/* Base typography & layout primitives * 仕様: 「ブレイクポイントでカチっと切り替わるのではなく自然にレスポンシブ」 * → clamp() による fluid scaling を多用 */ html { font-size: 16px; } /* [2026-09] JP/EN共通のrem基準切り替え。.t-body(JP16px/EN18px)と同じ比率を のルートフォントサイズ自体に適用し、remで指定した要素はJP/EN両対応が 自動で効くようにする(body.is-enへの個別上書きが要らなくなる)。 :has()はjta-port.css側で過去に別目的(62.5%リセット)で使われ撤去された前例が あるが、今回はそリセットとは無関係な単純な16→18pxの切り替えのみ。 */ html:has(body.is-en) { font-size: 18px; } body { font-family: var(--f-jp-mincho); color: var(--c-text); background: var(--c-bg); line-height: 1.6; min-width: 320px; } /* === BP #7 (v0.8.21): 320px サブピクセル overflow セーフガード === * Tour LP / Enquiry で text rendering 由来の +1〜5px 微小 overflow が * 残るケースがある (offsetWidth=320 だが scrollWidth=321〜325)。 * 子要素は全て viewport 内なので overflow-x: clip で安全に切り落とす。 * (clip は scroll anchor を壊さず、子の position: sticky に影響しない) */ @media (max-width: 370px) { html, body { overflow-x: clip; } } /* === END BP #7 === */ /* Typography classes per spec font sizes */ .t-en-serif { font-family: var(--f-en-serif); } .t-jp-mincho { font-family: var(--f-jp-mincho); } .t-gothic { font-family: var(--f-header-gothic); } /* Hero title (Desktop 116/94, Mobile 48/44) */ .t-hero { font-family: var(--f-en-serif); font-weight: 500; font-size: clamp(48px, 9vw, 116px); line-height: clamp(44px, 7.3vw, 94px); letter-spacing: -0.01em; } /* Section title (Desktop 64/56, Mobile 36/31) */ .t-section { font-family: var(--f-en-serif); font-weight: 500; font-size: clamp(36px, 5vw, 64px); line-height: clamp(31px, 4.4vw, 56px); letter-spacing: 0.04em; } /* Section subtitle EN (32/42 ↔ 17/31) */ .t-subtitle-en { font-family: var(--f-en-serif); font-weight: 500; font-size: clamp(17px, 2.5vw, 32px); line-height: clamp(31px, 3.3vw, 42px); } /* Section subtitle JP (26/42 ↔ 15/31) */ .t-subtitle-jp { font-family: var(--f-jp-mincho); font-size: clamp(15px, 2vw, 26px); line-height: clamp(31px, 3.3vw, 42px); } /* Body text * [2026-09] ABOUT/GUIDE/フロントの「本文・ステートメント文」で共通利用する * 唯一の情報源。ここを直せば全ページに反映される。日本語16px / 英語18pxで * 言語別に分岐(下のbody.is-en側)。 */ .t-body { font-family: var(--f-jp-mincho); font-size: 16px; line-height: 2.4; /* 31/15 ≈ 2.06 の比率をそのまま維持 */ letter-spacing: 0.04em; } body.is-en .t-body { font-family: var(--f-en-serif); font-size: 18px; } .t-body-en { font-family: var(--f-en-serif); font-size: 15px; line-height: 31px; } /* Container */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad-x); } /* CTA button — 紺背景・白文字・ホバー赤 */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 14px; padding: 20px 40px; background: var(--c-navy); color: var(--c-white); font-family: var(--f-en-serif); font-size: clamp(15px, 1.6vw, 20px); line-height: 1; letter-spacing: 0.06em; border: var(--line-thin) solid var(--c-navy); transition: background var(--t-base); } .btn-primary:hover { background: var(--c-red); border-color: var(--c-red); } .btn-primary .arrow { transition: transform var(--t-base); } .btn-primary:hover .arrow { transform: translateX(8px); } /* CTA button — 白背景・黒文字・ホバー黒背景白文字 (Journal VIEW MORE) */ .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 14px; padding: 20px 40px; background: var(--c-white); color: var(--c-black); font-family: var(--f-en-serif); font-size: clamp(15px, 1.6vw, 20px); line-height: 1; letter-spacing: 0.06em; border: var(--line-thin) solid var(--c-black); transition: background var(--t-base), color var(--t-base); } .btn-secondary:hover { background: var(--c-black); color: var(--c-white); } .btn-secondary .arrow { transition: transform var(--t-base); } .btn-secondary:hover .arrow { transform: translateX(8px); } /* CTA arrow box: small bordered square containing → */ .cta-arrow { display: inline-flex; align-items: center; gap: 18px; padding: 18px 32px; border: var(--line-thin) solid currentColor; font-family: var(--f-en-serif)!important; font-size: clamp(1.1rem, 2.5vw, 1.25rem); line-height: 1; letter-spacing: 0.04em; transition: background var(--t-base), color var(--t-base); } .cta-arrow:hover { background: var(--c-black); color: var(--c-white); border-color: var(--c-black); } .cta-arrow .arrow { display: inline-block; transition: transform var(--t-base); } .cta-arrow:hover .arrow { transform: translateX(8px); } /* Underline-from-left animation for nav links */ .nav-link { position: relative; display: inline-block; padding: 4px 0; transition: color var(--t-base); } .nav-link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: var(--line-base); background: currentColor; transition: width var(--t-slow) ease; } .nav-link:hover { color: var(--c-red); } .nav-link:hover::after { width: 100%; } .nav-link:not(:hover)::after { width: 0; transition: width var(--t-slow) ease; } /* Decorative horizontal rule (細いセパレータ) */ .hr-thin { height: var(--line-thin); background: currentColor; margin: 24px auto; width: 80px; opacity: 0.6; } /* モバイル: 末尾1文字の孤立(オーファン)を防ぐ — 行を均し/前行へ繰り上げる */ @media (max-width: 768px) { p, li, h1, h2, h3, h4, figcaption, dd, .concierge__body, .philosophy__welcome, .guide-hero__lead { text-wrap: pretty; } }