/* ============================================================ base.css タイポグラフィ・コンテナ幅・リンク基本 Noto Sans JP / Inter / Caveat / Cormorant Garamond / Barlow ※ Google Fonts は index.html の で読み込む ============================================================ */ /* ------ ルート／body ------------------------------------------------ */ html { scroll-behavior: smooth; text-size-adjust: 100%; } body { font-family: var(--font-jp); font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: 0.03em; color: var(--color-text); background-color: var(--color-bg); /* SP下部固定CTAぶん余白確保 */ padding-bottom: 0; } @media (max-width: 767px) { body { padding-bottom: var(--sp-fixed-cta-height); } } /* ------ 見出し ----------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-jp); line-height: var(--lh-heading); letter-spacing: 0.06em; color: var(--color-text); font-weight: 700; } h1 { font-size: var(--fs-hero); font-weight: 700; } h2 { font-size: var(--fs-h2); font-weight: 700; } h3 { font-size: var(--fs-h3); font-weight: 600; } h4 { font-size: 18px; font-weight: 600; } /* ------ 本文 ------------------------------------------------------- */ p { line-height: var(--lh-body); } p + p { margin-top: 1.5em; } strong, b { font-weight: 700; color: var(--color-primary-dark); } small { font-size: var(--fs-caption); color: var(--color-text-muted); } /* ------ リンク ----------------------------------------------------- */ a { color: var(--color-primary-dark); transition: color var(--dur-fast) var(--ease-out); } a:hover { color: var(--color-primary); text-decoration: underline; text-underline-offset: 4px; } /* ------ コンテナ --------------------------------------------------- */ .container { width: 100%; max-width: var(--container-max); margin-left: auto; margin-right: auto; padding-left: var(--container-pad-pc); padding-right: var(--container-pad-pc); } @media (max-width: 767px) { .container { padding-left: var(--container-pad-sp); padding-right: var(--container-pad-sp); } } /* ------ ユーティリティ --------------------------------------------- */ .u-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .u-script { font-family: var(--font-script); font-weight: 400; } .u-serif { font-family: var(--font-serif); font-weight: 300; } .u-num { font-family: var(--font-num); font-variant-numeric: tabular-nums; } /* 装飾英字（縦書き） — PCのみ */ .u-vertical-en { font-family: var(--font-script); writing-mode: vertical-rl; color: rgba(0, 150, 11, 0.14); font-size: clamp(48px, 6vw, 80px); line-height: 1; user-select: none; } @media (max-width: 767px) { .u-vertical-en { display: none; } } /* ------ メインエリアの最低余白（次セッションで上書き） ----------- */ main { min-height: 40vh; } /* ------ Material Symbols Rounded ---------------------------------- */ .material-symbols-rounded { font-family: 'Material Symbols Rounded'; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; word-wrap: normal; direction: ltr; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; vertical-align: middle; user-select: none; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; }