/* GENERATED from mobile-readability.css + os-stage.css — run tools/build-common-css.mjs */
@media (max-width: 720px) { html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { overflow-x: clip; overflow-wrap: break-word; font-size: 15.5px; } :where(p, li, dd) { text-wrap: pretty; } body.home-page, body.subpage { --shared-tab-height: 44px; } body.home-page .shared-titlebar, body.subpage .shared-titlebar { padding-inline: 10px !important; } body.home-page .shared-brand, body.subpage .shared-brand { min-height: 44px !important; font-size: 11px !important; letter-spacing: 0.04em !important; } body.home-page .shared-window-controls button, body.subpage .shared-window-controls button { width: 32px !important; min-width: 32px !important; height: 32px !important; min-height: 32px !important; } body.home-page .shared-tabs > a, body.home-page .shared-tabs > span, body.subpage .shared-tabs > a, body.subpage .shared-tabs > span { height: var(--shared-tab-height) !important; min-height: var(--shared-tab-height) !important; padding-inline: 3px !important; font-size: clamp(10px, 2.7vw, 12px) !important; line-height: 1.15 !important; letter-spacing: 0.01em !important; } .shared-search-toggle { width: 36px !important; min-width: 36px !important; height: 36px !important; min-height: 36px !important; } .shared-search-toggle > span { top: 10px; left: 10px; } .shared-search-panel { width: calc(100% - 16px); right: 8px; padding: 14px; } .shared-search-panel label { font-size: 12px; } .shared-search-input-row { grid-template-columns: minmax(0, 1fr) 52px; gap: 8px; } .shared-search-input-row input, .shared-search-input-row button { min-height: 44px; font-size: 16px; } .shared-search-results a, .shared-search-results p { padding: 12px; font-size: 14px; line-height: 1.6; } body.subpage .subpage-main, .article-page-shell .subpage-main.article-page { padding-inline: 0 !important; } :is(.ui-chip, .micro-label, .category-tag, .magazine-kicker, .magazine-section-note, .photo-kicker, .fashion-file-label, .fashion-channel-name, .article-column-label) { font-size: 10px !important; line-height: 1.35 !important; letter-spacing: 0.08em !important; } .home-page .portal-copy p, .home-page .about-card > p:not(.micro-label), .home-page .feature-copy, .home-page .magazine-info-panel, .home-page .recommendation-loading { font-size: 14.5px !important; line-height: 1.65 !important; } .home-page .about-card h2, .home-page .feature-body h1 { line-height: 1.4 !important; } .home-page .recommendation-copy strong { font-size: 14.5px !important; line-height: 1.35 !important; } .home-page .recommendation-copy small, .home-page .recommendation-copy > span { font-size: 11px !important; line-height: 1.35 !important; } .home-page :is(.read-button, .pill-button, .magazine-read-button), .home-page .notes-panel .shuffle-button { min-height: 44px !important; height: auto !important; padding: 8px 14px !important; font-size: 12px !important; line-height: 1.2 !important; } .home-page .photo-controls button { min-width: 44px !important; min-height: 44px !important; } .home-page #magazine-info-button, .home-page #magazine-close-button { width: 36px !important; min-width: 36px !important; height: 36px !important; min-height: 36px !important; } .home-page .photo-cabinet-link { display: inline-flex !important; align-items: center; justify-content: center; min-height: 44px !important; padding: 8px 12px !important; } .home-page .window-footer a { display: inline-flex; align-items: center; min-height: 32px; padding-inline: 8px; } .article-page-shell .article-body { width: 100% !important; } .article-page-shell .article-intro { padding-inline: 14px !important; } .article-page-shell .article-lede { padding-inline: 12px !important; } .article-page-shell .article-body > p, .article-page-shell .article-body > h2, .article-page-shell .article-body > h3, .article-page-shell .article-body > blockquote, .article-page-shell .article-body > .toc, .article-page-shell .article-body > .article-figure, .article-page-shell .article-body > .image-comparison, .article-page-shell .article-body > .article-ending, .article-page-shell .article-body > .article-back-top-wrap { max-width: none !important; margin-inline: 16px !important; } .article-page-shell .article-display-title { font-size: clamp(23px, 7.2vw, 30px) !important; line-height: 1.32 !important; } .article-page-shell .article-subtitle { font-size: 14.5px !important; line-height: 1.6 !important; } .article-page-shell .article-lede p, .article-page-shell .article-body > p, .article-page-shell .article-body blockquote p { font-size: 15.5px !important; line-height: 1.75 !important; letter-spacing: 0.015em !important; } .article-page-shell .article-body > h2 { font-size: clamp(24px, 7vw, 29px) !important; line-height: 1.32 !important; } .article-page-shell .article-body > h3 { font-size: 20px !important; line-height: 1.35 !important; } .article-page-shell .toc li, .article-page-shell .toc a { font-size: 14.5px !important; line-height: 1.5 !important; } .article-page-shell .toc a { display: flex; align-items: center; min-height: 44px; padding-block: 4px; } .article-page-shell :is(.article-tags-list span, .article-share-line, .figure-caption, .image-source, .comparison-caption, .article-publish-meta) { font-size: 12px !important; line-height: 1.6 !important; } html.ohmy-native-phone-stage .article-page-shell .article-display-title { font-size: clamp(25px, 7.2vw, 31px) !important; } html.ohmy-native-phone-stage .article-page-shell .article-subtitle { font-size: 16px !important; } html.ohmy-native-phone-stage .article-page-shell .article-lede p, html.ohmy-native-phone-stage .article-page-shell .article-body > p, html.ohmy-native-phone-stage .article-page-shell .article-body blockquote p { font-size: 17px !important; line-height: 1.8 !important; } html.ohmy-native-phone-stage .article-page-shell .toc li, html.ohmy-native-phone-stage .article-page-shell .toc a { font-size: 15.5px !important; } html.ohmy-native-phone-stage .article-page-shell :is( .article-tags-list span, .article-share-line, .figure-caption, .image-source, .comparison-caption, .article-publish-meta) { font-size: 13px !important; } body.subpage.about-page-shell .subpage-feature-hero .about-lead { font-size: 15px !important; line-height: 1.6 !important; } .about-page-shell .content-window-body { padding-inline: 8px !important; } .about-page-shell .about-copy-panel { margin-inline: 0 !important; } .about-page-shell .about-copy-panel .about-body { padding-inline: 16px !important; } .about-page-shell .about-copy-panel .about-body p, .credits-page-shell .credits-hero > p:last-child, .credits-page-shell .credits-list li, .credits-page-shell .credits-note p { font-size: 15.5px !important; line-height: 1.75 !important; } .about-page-shell .about-copy-panel .about-body p { margin-bottom: 0.75em !important; } .about-page-shell .profile-facts { font-size: 14px !important; line-height: 1.55 !important; } .about-page-shell .about-switcher span { font-size: 12px !important; line-height: 1.25 !important; } .about-page-shell .about-switcher button, .about-page-shell .fake-ad, .about-page-shell .about-status { min-height: 44px !important; } .about-page-shell .section-toolbar h2, .credits-page-shell .credits-list h2 { line-height: 1.4 !important; } .fashion-page .fashion-hero-copy > p:last-child, .fashion-page .fashion-video-info > p:not(.fashion-channel-name), .fashion-page .article-card .description { color: #26363e !important; font-size: 14.5px !important; line-height: 1.7 !important; } .fashion-page .fashion-hero-copy > p:last-child { width: 100% !important; max-width: none !important; } .fashion-page .subpage-feature-hero { padding-inline: 16px !important; } .fashion-page .fashion-stream-card-body h3, .fashion-page .article-card h2 { font-size: 17px !important; line-height: 1.35 !important; } .fashion-page .fashion-card-tags { font-size: 11.5px !important; line-height: 1.4 !important; } .fashion-page :is(.fashion-card-meta, .fashion-stream-meta, .fashion-article-stats, .fashion-player-controls) { font-size: 10.5px !important; line-height: 1.3 !important; } .fashion-page :is(.fashion-hero-play, .fashion-read-button), .fashion-page :is(.fashion-hero-add, .fashion-hero-rate), .fashion-page .fashion-card-controls > :is(a, button), .fashion-page .fashion-player-controls > a { min-width: 44px !important; min-height: 44px !important; } .fashion-page .fashion-hero-play, .fashion-page .fashion-read-button { padding: 8px 12px !important; font-size: 13.5px !important; line-height: 1.2 !important; } .magazine-page-shell .magazine-archive-copy > p:last-child { color: #26363e !important; font-size: 14.5px !important; line-height: 1.7 !important; } .magazine-page-shell .magazine-category-group a { display: flex; align-items: center; min-height: 36px; padding-block: 4px; font-size: 13px !important; line-height: 1.3 !important; } .magazine-page-shell .magazine-search-field input { min-height: 44px; font-size: 16px !important; } .magazine-page-shell .magazine-breadcrumbs a { display: inline-flex; align-items: center; min-height: 28px; padding-inline: 4px; } .magazine-page-shell .magazine-item-copy h3 { font-size: 15px !important; line-height: 1.35 !important; } .magazine-page-shell .magazine-item-copy p { font-size: 12px !important; line-height: 1.5 !important; } .photo-page-shell .photo-hero > div > p:last-child, .photo-page-shell .photo-empty { font-size: 14.5px !important; line-height: 1.7 !important; } .photo-page-shell .photo-public-help, .photo-page-shell .photo-tile-name { font-size: 12px !important; line-height: 1.55 !important; } .photo-page-shell .photo-public-status b { font-size: 11px !important; } .photo-page-shell .photo-public-status small, .photo-page-shell .photo-viewer-readonly { font-size: 10px !important; } .photo-page-shell .photo-tile-open, .photo-viewer :is(.photo-viewer-nav, #photo-viewer-close) { min-width: 44px !important; min-height: 44px !important; } .article-page-shell .article-newsletter :is(input, button) { min-height: 44px !important; height: 44px !important; font-size: 16px !important; } body.home-page .shared-titlebar { height: 44px !important; min-height: 44px !important; } body.home-page .shared-brand { height: 44px !important; min-height: 44px !important; padding-block: 0 !important; } .home-page .portal-banner { min-height: 0 !important; margin: 6px 8px 0 !important; padding: 6px 12px 7px !important; gap: 0 !important; border-radius: 12px !important; } .home-page .portal-copy { width: 100%; display: grid; grid-template-columns: max-content minmax(0, 1fr); grid-template-areas: "issue brand" "tagline tagline"; align-items: center; column-gap: 10px; text-align: left; } .home-page .portal-copy > span { grid-area: issue; font-size: 7px !important; line-height: 1.2 !important; letter-spacing: 0.08em !important; } .home-page .portal-brand { width: 100% !important; max-width: 220px !important; height: 34px !important; margin: 0 !important; grid-area: brand; } .home-page .portal-copy p { margin: 2px 0 0 !important; grid-area: tagline; overflow: hidden; font-size: 11.5px !important; line-height: 1.25 !important; text-overflow: ellipsis; white-space: nowrap; } .home-page .portal-star, .home-page .portal-banner > small { display: none !important; } .home-page .magazine-grid { padding: 7px 8px 8px !important; gap: 8px !important; } .home-page .center-column { gap: 8px !important; } .home-page .feature-panel .panel-titlebar { height: 26px !important; } .home-page .feature-body { padding: 8px !important; } .home-page .feature-link { display: grid !important; grid-template-columns: minmax(112px, 36%) minmax(0, 1fr); grid-template-rows: auto auto auto minmax(44px, auto); column-gap: 9px; row-gap: 4px; } .home-page .feature-image-wrap { min-height: 174px; grid-column: 1; grid-row: 1 / 5; } .home-page .feature-image { height: 100% !important; aspect-ratio: auto !important; } .home-page .category-tag { margin: 0 !important; padding: 4px 6px !important; align-self: start; } .home-page .feature-body h1 { margin: 0 !important; display: -webkit-box; overflow: hidden; font-size: 18px !important; line-height: 1.25 !important; letter-spacing: -0.035em !important; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .home-page .feature-copy { margin: 0 !important; display: -webkit-box; overflow: hidden; font-size: 12.5px !important; line-height: 1.4 !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } body.home-page .feature-panel .feature-body .feature-link > .read-button { min-height: 44px !important; height: 44px !important; margin: 0 !important; padding: 7px 10px !important; align-self: end; font-size: 10px !important; } body.home-page .feature-panel .feature-body .feature-link > .read-button .capsule-word { font-size: 0 !important; letter-spacing: 0 !important; } body.home-page .feature-panel .feature-body .feature-link > .read-button .capsule-word::after { font-size: 10px; line-height: 1; } body.home-page .feature-panel .feature-body .feature-link > .read-button .capsule-word-left::after { content: "記事を"; } body.home-page .feature-panel .feature-body .feature-link > .read-button .capsule-word-right::after { content: "読む"; } .home-page .notes-panel .panel-titlebar { height: 34px !important; } body.home-page .notes-panel .shuffle-button { min-height: 30px !important; height: 30px !important; padding: 4px 8px !important; font-size: 10px !important; } .home-page .recommendation-grid { padding: 6px !important; gap: 6px !important; } .home-page .recommendation-copy small { top: 5px; right: 5px; bottom: auto; max-width: calc(100% - 10px); padding: 3px 5px; font-size: 9px !important; } .home-page .recommendation-copy strong { left: 5px; bottom: 5px; max-width: calc(100% - 10px); padding: 4px 5px; display: -webkit-box; overflow: hidden; font-size: 11.5px !important; line-height: 1.25 !important; opacity: 1; transform: none; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .home-page .about-card { padding: 14px !important; } .home-page .about-card h2 { margin-block: 6px !important; font-size: 20px !important; line-height: 1.3 !important; } body.subpage .content-window-body { padding-top: 8px !important; padding-bottom: 8px !important; } body.subpage .subpage-feature-hero { min-height: 148px !important; padding-top: 14px !important; padding-bottom: 14px !important; border-radius: 14px !important; } body.subpage.fashion-page .subpage-feature-hero h1[data-material-heading="rhinestone"] { font-size: clamp(38px, 12vw, 54px) !important; } body.subpage.about-page-shell .subpage-feature-hero h1[data-material-heading="paper"] { font-size: clamp(34px, 11vw, 48px) !important; } .article-page-shell .article-intro { margin-bottom: 18px !important; padding-top: 16px !important; padding-bottom: 16px !important; } .article-page-shell .article-opening-grid { gap: 14px !important; } .article-page-shell .article-display-title { margin-bottom: 8px !important; } .article-page-shell .article-subtitle { margin-bottom: 8px !important; } .article-page-shell .article-publish-meta { margin: 8px 0 10px !important; } .article-page-shell .article-lede { margin-top: 16px !important; padding-top: 14px !important; padding-bottom: 0 !important; } .article-page-shell .article-lede p { margin-bottom: 12px !important; } .article-page-shell .article-body > p { margin-top: 12px !important; margin-bottom: 12px !important; } .article-page-shell .article-body > h2 { margin-top: 28px !important; margin-bottom: 12px !important; } .article-page-shell .article-body > h3 { margin-top: 22px !important; margin-bottom: 10px !important; } .article-page-shell .article-body > :is(.toc, .article-figure, .image-comparison, blockquote) { margin-top: 16px !important; margin-bottom: 16px !important; } .about-page-shell .profile-deck { padding: 8px !important; gap: 8px !important; } .about-page-shell .profile-ticket .profile-motion { height: 132px !important; min-height: 132px !important; } .about-page-shell .about-dashboard-v2, .about-page-shell .about-sponsor-rail { gap: 10px !important; } .about-page-shell .about-switcher { margin-top: 6px !important; padding-top: 6px !important; gap: 6px !important; } .about-page-shell .about-story-switch { margin-top: 10px !important; } body.subpage.fashion-page .fashion-channel-strip { min-height: 38px !important; padding: 0 !important; gap: 0 !important; } body.subpage.fashion-page .fashion-channel-strip button { min-height: 0 !important; height: auto !important; padding: 0 2px !important; font-size: 8px !important; line-height: 1.08 !important; } body.subpage.fashion-page .fashion-channel-strip button.is-active { font-size: 10px !important; } .fashion-page .fashion-latest { padding-bottom: 12px !important; } .fashion-page .fashion-latest-heading { min-height: 46px !important; padding: 8px 10px 4px !important; } .fashion-page .fashion-latest-rail { padding: 6px 8px 10px !important; gap: 10px !important; } .fashion-page .fashion-stream-card-body { padding: 8px !important; } .magazine-page-shell .magazine-archive-hero { padding: 16px !important; gap: 12px !important; } .magazine-page-shell .magazine-archive-copy > p:last-child { margin-top: 8px !important; } .magazine-page-shell .magazine-shop-shell { gap: 10px !important; } .magazine-page-shell .magazine-card-grid { gap: 10px !important; } .photo-page-shell .photo-hero { min-height: 0 !important; padding: 12px !important; gap: 10px !important; } .photo-page-shell .photo-hero > div > p:last-child { margin-top: 8px !important; } .photo-page-shell .photo-public-toolbar, .photo-page-shell .photo-library-status { padding: 8px 10px !important; } .not-found-page .subpage-main p { font-size: 15.5px !important; line-height: 1.65 !important; } .not-found-page .subpage-main a, .credits-page-shell .credits-list a { min-height: 44px; } } @media (max-width: 380px) { body.home-page .shared-tabs > a, body.home-page .shared-tabs > span, body.subpage .shared-tabs > a, body.subpage .shared-tabs > span { font-size: 9px !important; } .article-page-shell .article-lede p, .article-page-shell .article-body > p, .article-page-shell .article-body blockquote p, .about-page-shell .about-copy-panel .about-body p, .credits-page-shell .credits-list li { font-size: 15.5px !important; } } @media (max-width: 1100px) { html.ohmy-os-stage-host:not(.ohmy-os-stage-ready) body { visibility: hidden !important; } html.ohmy-os-stage-host, html.ohmy-os-stage-host body { width: 100% !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; overflow-x: hidden !important; transform: none !important; } html.ohmy-os-stage-host.ohmy-os-stage-ready body { visibility: visible !important; } #ohmy-os-stage-viewport { width: 100%; min-height: 1px; position: relative; overflow: hidden; } #ohmy-os-stage-frame { width: var(--ohmy-stage-width, 1440px); height: var(--ohmy-stage-height, 900px); max-width: none; margin: 0; padding: 0; position: absolute; inset: 0 auto auto 0; display: block; border: 0; background: transparent; transform: scale(var(--ohmy-stage-scale, 1)); transform-origin: 0 0; } }