/* ============================================================
Deal HP — 共通スタイル（全ページで読み込む）
------------------------------------------------------------
読み込み順：common.css → 各ページ専用CSS
ここに置くもの：
・デザイントークン（色・フォント・サイズ・余白）
・リセット / ベース
・レイアウトプリミティブ（.shell / .section-inner）
・スクロール出現（.reveal ※JSは common.js）
・見出しタイポグラフィ（.en-h2 / .en-h3 / .section-head）
・ロゴカード（.logo-card）
・共通コンポーネント（.button-cta / .link-more / .icon-arrow）
・配下ページ用ヘッダー（.site-header）
・フッター（.footer）
ページ固有のスタイル・配置指定はここに書かない
============================================================ */
:root {
/* ---- brand ---- */
--teal-300: #1ed9c3;
--teal-400: #1abdaa;
--teal-200: #35e7d0;
--teal-900: #0e3b34;
/* ---- neutral ---- */
--neutral-900: #2b2520;
--neutral-800: #4d453b;
--neutral-700: #5b5246;
--neutral-50: #faf7f0;
/* ---- accent ----
鮮やか版と、くすませた -deep 版の2組。brand/primary → --deep と同じ作法。
⚠️ 以前は --amber / --red-pink / --coral / --accent-yellow の4つだったが、
同系色なのに名前が並列でどちらを使うか判断できなかったため改名した。
--red-pink(#eb4365) は使用箇所が無かったので削除済み。
⚠️ クラス名の修飾子（.header-cta--amber 等）はトークン名とは独立した色ラベル。
.button-cta--teal が --teal-300 を使うのと同じ扱いなので改名していない */
--accent-yellow: #fad825; /* レポートモックのハイライトバー */
--accent-yellow-deep: #e7cc3f; /* ヘッダーCTA「無料相談」／Expert Reviewカード背景 */
--accent-pink: #ff446a; /* フォームの必須マーク */
/* ---- fonts ---- */
--font-jp: "Noto Sans JP", sans-serif;
--font-en-serif: "Young Serif", serif;
--font-maru: "Zen Maru Gothic", sans-serif;
--font-inter: "Inter", sans-serif;
/* ============================================================
幅・余白の設計トークン
------------------------------------------------------------
● 全幅レイヤー (width:100%) … 背景色が画面端まで届く要素
● 最大幅レイヤー (--shell) … 中身は --shell で頭打ち＋中央寄せ
● 左右padding／余白は 1440px 基準の vw で画面幅に比例
（clamp の中間項 = 設計px ÷ 14.4 vw。上下限だけクランプ）
============================================================ */
--shell: 1200px; /* コンテンツ列の最大幅 */
--edge: clamp(16px, 2.78vw, 64px); /* 左右padding（40px@1440・画面比例） */
--page-inset: clamp(48px, 5.56vw, 160px); /* 白面をPCで画面端から離す量（80px@1440・画面比例） */
--pad-section: clamp(56px, 8.33vw, 160px);/* セクション/大カードの上下（120px@1440） */
--pad-card: clamp(28px, 4.44vw, 96px); /* カード内側（64px@1440） */
--gap-stack: clamp(56px, 8.61vw, 180px); /* セクション内ブロックの縦間隔（124px@1440） */
--radius: clamp(20px, 2.22vw, 40px); /* カード角丸（標準・32px@1440） */
--radius-lg: clamp(32px, 4.44vw, 80px); /* カード角丸（大・64px@1440） */
/* ---- 文字サイズ：1440px 基準の vw 比例（clamp の中間項 = px ÷ 14.4vw）---- */
--fs-display: clamp(34px, 3.75vw, 72px); /* 53.98@1440：EN特大見出し / HEROタイトル */
--fs-en-h3: clamp(26px, 2.78vw, 54px); /* 40@1440：EN中見出し */
--fs-jp-xl: clamp(24px, 2.64vw, 32px); /* 帯見出し専用。超ワイド画面で握手画像と重ならないよう上限を抑制 */
--fs-jp-lg: clamp(22px, 2.22vw, 44px); /* 32@1440：JP見出し */
--fs-jp-md: clamp(18px, 1.67vw, 32px); /* 24@1440：中見出し / menu英字 */
--fs-ttl: clamp(17px, 1.39vw, 27px); /* 20@1440：カード見出し */
--fs-body: clamp(15px, 1.25vw, 24px); /* 18@1440：本文 */
--fs-body-sm: clamp(13px, 1.11vw, 21px); /* 16@1440：小本文 / 日付 */
--fs-sm: clamp(12px, 0.97vw, 18px); /* 14@1440：ラベル */
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scrollbar-gutter: stable; } /* スクロールバー出現で本編が左にズレるのを防止 */
body {
background: var(--neutral-50);
font-family: var(--font-jp);
color: var(--neutral-900);
-webkit-font-smoothing: antialiased;
overflow-x: hidden; /* 横スクロール事故防止 */
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
/* ============================================================
日本語の改行位置
既定のブラウザは日本語をほぼどの文字間でも折り返すため、SP幅で
「時代／へ。」「こと／が、」のように意味の切れ目でない位置で
改行されてしまう。文節（意味のかたまり）単位で折り返させる。
- word-break: auto-phrase … 文節で改行（html[lang="ja"]が前提。全ページ指定済み）
- text-wrap: balance … 見出しの各行の長さを均す（数行の短い塊向け）
- text-wrap: pretty … 本文の行分けを全体最適化し、最終行の孤立を防ぐ
（実測で「そのズレを可視化し、解消する／ことが、」→「そのズレを可視化し、／
解消することが、」に改善した。auto-phraseとの併用が前提）
:where() で指定しているので詳細度0。個別に上書きしたい箇所は
通常のセレクタで普通に勝てる。未対応ブラウザは従来の折り返しに
なるだけで、レイアウトは崩れない。
注意：手打ちの
は原則そのまま残すこと。
で区切られた塊ごとに
auto-phrase が効くので、両方あるほうが改行位置は良くなる。実測でも
を消すと h1 が「問われるのは、"」で切れるなど悪化した。
SPで明らかに不自然になる
だけ個別に .br-pc を付けて無効化する。
============================================================ */
/* word-break は継承プロパティなので body に1回だけ置く。
以前はタグを列挙していたが、このサイトは本文を
のような block 化した span で組んでいる箇所が多く（work-card__desc /
menu-card__desc / news-item__title / article-card__title など7種）、
そこだけ文節改行が効かず「向上しま／した。」と単語の途中で切れていた。
継承させれば要素の種類に関係なく全テキストへ行き渡る。
折り返さない要素（ピル・nowrap指定）では何も起きないので副作用はない */
:where(body) { word-break: auto-phrase; }
:where(h1, h2, h3, h4, h5, h6) { text-wrap: balance; }
/* ⚠️ text-wrap: pretty は auto-phrase が効くブラウザ（＝Chrome系）限定にする。
Safari は auto-phrase 非対応な一方 pretty を「段落全体の行長最適化」として
実装しているため、両方が揃わないと
・文節では切れない（語の途中で折れる）
・なのに行が詰め切られず右に80〜100pxの余白が残る
という最悪の組み合わせになる（iPhone実機で確認）。
@supports の条件に auto-phrase を使えば、この2つは必ずセットで効く。
Safari では既定の折り返し＝行を最後まで詰める挙動に戻る */
@supports (word-break: auto-phrase) {
:where(p, li, dd, figcaption) { text-wrap: pretty; }
}
/* 途中で切りたくない語句を囲む（例: RapiQ） */
.nowrap { white-space: nowrap; }
/* 視覚的には隠すが、スクリーンリーダーとクローラには読ませる。
⚠️ display:none / visibility:hidden は使わないこと。一部のAIクローラが
テキストを読み取らなくなる（レビュー指摘。reveal演出も同じ理由でopacityを使う）。
用途：h1にサービス概要を含める／NEWS・BLOGカードに要約文を添える など */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* SPで不自然になる手打ち改行に個別に付ける。英字2行見出し（CLIENTS &/WORKS）や
会社概要の和名/英名のような「意味のある改行」には付けないこと */
@media (max-width: 767.98px) {
br.br-pc { display: none; }
}
/* ============================================================
Layout primitive
.shell = 「最大幅で中央寄せ」の共通コンテナ。
各セクションはこの規則で中央1カラムに収まる。
============================================================ */
.shell {
width: 100%;
max-width: var(--shell);
margin-inline: auto;
padding-inline: var(--edge);
}
/* .section-inner = 全幅セクションの「中身」を最大幅で中央寄せする層。
背景色は親（全幅）が担当し、中身だけこの幅で頭打ちにする。 */
.section-inner {
width: 100%;
max-width: var(--shell);
margin-inline: auto;
}
/* ============ Scroll reveal（発火JSは common.js） ============ */
.reveal {
opacity: 0;
transform: translateY(32px);
transition: opacity 0.7s cubic-bezier(0.16, 0.84, 0.44, 1),
transform 0.7s cubic-bezier(0.16, 0.84, 0.44, 1);
transition-delay: var(--reveal-delay, 0s);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
.reveal { transition: none; opacity: 1; transform: none; }
}
/* ============ Typography (英字見出し) ============ */
.en-h2 {
font-family: var(--font-en-serif);
font-weight: 400;
font-size: var(--fs-display);
line-height: 1.1;
letter-spacing: 4.66px;
color: var(--teal-900);
}
.en-h3 {
font-family: var(--font-en-serif);
font-weight: 400;
font-size: var(--fs-en-h3);
line-height: 1.3;
letter-spacing: 5px;
color: var(--teal-900);
}
/* ============ 見出し行（SP:縦 / PC:横） ============ */
.section-head { display: flex; flex-direction: column; gap: 16px; }
.section-head__ttl { width: 100%; }
.section-head__jp {
font-size: var(--fs-body);
line-height: 1.85;
letter-spacing: 2px;
color: var(--neutral-700);
}
.section-head__body { color: var(--teal-900); }
.section-head__body h3 {
font-size: var(--fs-jp-lg);
font-weight: 700;
line-height: 1.3;
letter-spacing: 5px;
color: var(--teal-400);
}
.section-head__body p {
margin-top: 24px;
font-size: var(--fs-body);
line-height: 1.85;
letter-spacing: 2px;
}
/* ============ Logo card (header & footer) ============ */
/* 虹色の囲み線（Figmaのグラデーションborder再現：コーラル→ゴールド→ティール）。
conic-gradient の開始角度 --logo-angle をループさせ、色が輪郭に沿ってゆっくり回る。
実装は「透明ボーダー＋二層背景」方式：mask方式だと内側の角丸半径が外側と同じ値になり
四隅だけ線が太くカクカクして見えるため、ブラウザに内側の角丸を計算させるこの方式にしている */
@property --logo-angle {
syntax: '';
inherits: false;
initial-value: 135deg;
}
/* ---- 虹色リング（ロゴカード／SNSカードで共有） ----
padding-box に白、border-box に conic-gradient を敷き、border を透明にすると
「枠だけ虹色」になる。線幅は border-width、角丸は border-radius で各自が指定。
⚠️ グラデーションは background なので、これを使う要素で background を
上書きするとリングごと消える（.contact-sns から background:#fff を外した理由）。
⚠️ --logo-angle は @property で inherits:false 登録済み。:root 経由の
間接参照にすると初期値で固まってアニメーションしないので、直接ここで使うこと */
.logo-card,
.contact-sns {
border: 2.5px solid transparent; /* 虹色線の線幅（.contact-sns 側で2pxに上書き） */
background:
linear-gradient(#fff 0 0) padding-box,
conic-gradient(from var(--logo-angle, 135deg),
#fc6a6d, #ffa36a, #ffd169, #9ab55b, #00cca0, #00bd9f, #fc6a6d) border-box;
animation: logo-hue-rotate 9s linear infinite;
}
.logo-card {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center; /* 1行タグライン時も中身を上下中央に */
/* 140px → 120px。中のシンボル＋Deal文字を0.8倍にしたぶんカードも詰め、
白余白を12px前後に保つ（中身の高さ82.8px ＋ 上下の余白）。
マークのサイズを変えたらこの値も一緒に見直すこと */
width: 120px;
aspect-ratio: 1; /* カードは正方形を保つ */
/* ⚠️ padding を縮めても見た目の白場は変わらない
（中身のほうが content-box より小さく、中央に浮いているだけなので）。
白場を詰めたいときは下の .logo-card__symbol / __name を大きくする。
下だけ2px厚いのは、justify-content:center の中身を1px上へ寄せるため
（シンボル上部の余白ぶん、上が広く見えていた） */
padding: 12px 12px 14px;
border-radius: 18px;
text-align: center;
}
@keyframes logo-hue-rotate {
to { --logo-angle: 495deg; } /* 135deg + 360deg で1周・継ぎ目なし */
}
@media (prefers-reduced-motion: reduce) {
.logo-card, .contact-sns { animation: none; }
}
.logo-card__symbol { width: 78px; height: 62px; margin-bottom: -6px; }
.logo-card__name {
font-family: var(--font-en-serif);
font-size: 29.8px;
line-height: 0.9;
letter-spacing: -0.3px;
color: var(--neutral-900);
}
/* .logo-card__tagline（旧タグライン）と .logo-card--small は削除。
ヘッダーのロゴはタグライン無しのシンボル＋Dealのみになり、
小サイズ版を使っていたフッターのロゴカードも撤去済み（現在は .footer__logo）。
復活させる場合はシンボルと名前の垂直中央（justify-content: center）が
タグラインぶんずれる点に注意 */
/* ==============================================
共通コンポーネント：CTAボタン
使い方：
ラベル
マージンは持たない（配置は使用側のCSSで指定する）
============================================== */
/* claymorphism：現実の「厚み5〜8mmの粘土ボタン」を box-shadow だけで表現。
・表面…ほぼ無地＋縁の薄いハイライト（スムースなコーナー感）
・厚み…下方向の押し出し影（0 6px 5px -2px 側面色）＝ボタンの側面。
わずかにぼかしてコーナーが滑らかに回り込んで見えるようにする
・接地…その下に柔らかい落ち影
色は変数化してあり、--dark 修飾子で濃緑（PRODUCT背景色）に切替可能。
明るい背景には --dark、ティール等の色背景には既定のアイボリーを使う */
.button-cta {
/* 面をわずかに落として（#fdfaf1→#fbf7ec）、白のハイライトが視認できるようにしている。
元の値だとほぼ白地に白のハイライトで「ふくらみ」が出ず、外側の厚み帯だけが
見えて角が立って見えていた */
--cta-bg-top: #fbf7ec; /* 表面（上端） */
--cta-bg-bottom: #efe8d6; /* 表面（下端） */
/* 側面＝厚み。不透明色だと縁が線として立つので半透明にする（ヘッダーCTAと同じ考え方） */
--cta-side: rgba(184, 170, 138, 0.5);
--cta-text: var(--teal-900, #0e3b34);
--cta-hl: rgba(255, 255, 255, 0.95); /* 内側ハイライト（左上）＝ふくらみ */
--cta-lo: rgba(198, 185, 156, 0.5); /* 内側シェード（右下）＝ふくらみ */
display: inline-flex;
align-items: center;
gap: 8px;
padding: 18px 44px; /* 左右は 32 → 44px（テキストの両脇にゆとりを持たせる） */
background: linear-gradient(180deg, var(--cta-bg-top) 0%, var(--cta-bg-bottom) 100%);
border: none;
border-radius: 999px;
text-decoration: none;
color: var(--cta-text); /* テキスト・icon-arrow が currentColor で継承 */
cursor: pointer;
/* クレイ質感：内側の左上ハイライト＋右下シェードで「ぷっくり」した厚み、
外側は下方向の押し出し影＋やわらかい落ち影で浮遊感。
insetの数値はヘッダー右上ボタン（.header-cta/.header-menu）と統一 */
box-shadow:
inset 5px 5px 11px var(--cta-hl),
inset -6px -6px 12px var(--cta-lo),
0 6px 7px -3px var(--cta-side),
0 9px 12px rgba(14, 59, 52, 0.12),
0 16px 24px rgba(14, 59, 52, 0.12);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
/* ---- 色バリアント（追加するときは必ずここに足す。個別CSSで作らないこと） ---- */
/* 濃緑（明るい背景用）：内側ハイライト/シェードも濃色寄りに */
.button-cta--dark {
--cta-bg-top: #14493f;
--cta-bg-bottom: #0e3b34;
--cta-side: rgba(7, 35, 30, 0.5);
--cta-text: #fff;
--cta-hl: rgba(255, 255, 255, 0.16);
--cta-lo: rgba(0, 0, 0, 0.32);
}
/* 白（色面・写真の上に置く用）。旧 .contact__pill 相当 */
.button-cta--white {
--cta-bg-top: #ffffff;
--cta-bg-bottom: #f7f4ec;
--cta-side: rgba(184, 170, 138, 0.5);
--cta-text: var(--teal-900);
--cta-hl: rgba(255, 255, 255, 0.9);
--cta-lo: rgba(224, 215, 193, 0.55);
}
/* ティール（ヘッダーCTA相当）。旧 .header-cta の配色 */
.button-cta--teal {
--cta-bg-top: #35e7d0;
--cta-bg-bottom: #1ed9c3;
--cta-side: rgba(14, 130, 116, 0.5);
--cta-text: var(--teal-900);
--cta-hl: rgba(255, 255, 255, 0.5);
--cta-lo: rgba(14, 90, 80, 0.35);
}
/* アンバー（黄）。ヘッダー右上の無料相談（.header-cta--amber）と同じ配色で、
「相談する」導線の色をサイト内で揃えるためのもの */
.button-cta--amber {
--cta-bg-top: #f0d95a;
--cta-bg-bottom: #e7cc3f;
--cta-side: rgba(150, 122, 30, 0.5);
--cta-text: var(--teal-900);
--cta-hl: rgba(255, 255, 255, 0.7);
--cta-lo: rgba(180, 148, 50, 0.35);
}
/* ---- サイズ修飾子 ---- */
.button-cta--sm { padding: 12px 24px; }
.button-cta--sm .button-cta__text { font-size: 14px; letter-spacing: 2px; }
/* ホバー：厚みの半分だけ沈む（ふくらみは保ちつつ落ち影を弱める＝押している感） */
.button-cta:hover {
transform: translateY(3px);
box-shadow:
inset 4px 4px 9px var(--cta-hl),
inset -5px -5px 10px var(--cta-lo),
0 3px 3px -1px var(--cta-side),
0 5px 8px rgba(14, 59, 52, 0.10);
}
/* .contact__pill も .button-cta と同じ「素の矢印」に揃えたので、
矢印まわりの指定は両方を対象にする（丸ボタン .btn-round は使わない） */
.button-cta:hover .button-cta__arrow,
.contact__pill:hover .button-cta__arrow {
transform: translateX(8px);
}
/* クリック中：底まで押し切る。内側の陰影を右下→左上に寄せて凹み感を出す */
.button-cta:active {
transform: translateY(5px);
box-shadow:
inset 5px 5px 11px var(--cta-lo),
inset -5px -5px 10px var(--cta-hl),
0 1px 2px -1px var(--cta-side);
}
.button-cta__text {
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 16px;
color: inherit; /* バリアント（--cta-text）に追従 */
letter-spacing: 4px;
white-space: nowrap;
line-height: 1.85;
}
/* SP：長いラベルだと画面からはみ出す（例「私たちが大切にしていること」は
letter-spacing込みで364px必要だが、375px端末の利用可能幅は287px）。
詰めたうえで折り返しも許可して、必ず画面内に収める */
@media (max-width: 599.98px) {
/* 最長ラベル「私たちが大切にしていること」を1行に収めるための詰め。
⚠️ 2行になるのはNGという要件なので、padding を広げたら必ずここを測り直すこと。
375pxでの実測：ボタン幅287 − 左右padding52 − gap8 − 矢印28 ＝ テキストに使える199px。
14px/letter-spacing0.5px で必要188px（余裕11px）。
360px系は使える幅が184pxまで落ちるので、下の374.98pxブロックで13pxに落とす */
.button-cta {
max-width: 100%;
padding-inline: 26px; /* 14 → 26px（PC同様に +12px） */
}
.button-cta__text {
/* normal のままにしてあるのは、将来もっと長いラベルが来たときに
はみ出すより折り返したほうが被害が小さいため。
現状のラベルはすべて下のサイズで1行に収まる */
white-space: normal;
font-size: 14px;
letter-spacing: 0.5px;
text-align: center;
}
/* .icon-arrow（32px）はこのブロックより後ろで定義されていて同詳細度＝後勝ちなので、
クラス2つ書いて詳細度で勝たせる */
.button-cta .button-cta__arrow,
.contact__pill .button-cta__arrow { width: 28px; height: 28px; }
}
/* 375px未満（Android 360px系など）はもう一段小さくして1行を維持する。
375px時点で余裕が2.5pxしか無く、360pxでは使える幅が272pxまで落ちて
上の指定だけでは2行になるため。font-size 16→15px ＋ letter-spacing 1→0.5px
＋ padding 14→12px で必要幅261.5px（360pxで余裕10.5px）。
これより狭い端末（320px等）では .nowrap（HTML側）が効いて
「私たちが／大切にしていること」で折れる＝「こと」だけが残らない */
@media (max-width: 374.98px) {
.button-cta { padding-inline: 24px; } /* 12 → 24px（PC同様に +12px） */
/* 360pxではテキストに使える幅が184pxまで落ち、14pxだと188pxで足りない。
13px/0.5px なら175pxで収まる（余裕9px） */
.button-cta__text { font-size: 13px; }
}
/* ==============================================
共通コンポーネント：詳細リンク（テキスト＋長矢印）
使い方：
詳細を見る
============================================== */
.link-more {
display: inline-flex;
align-items: center;
gap: 8px;
text-decoration: none;
color: var(--teal-900, #0e3b34);
}
.link-more__text {
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 16px;
letter-spacing: 4px;
line-height: 1;
padding: 0 4px 10px;
border-bottom: 2px solid currentColor;
white-space: nowrap;
}
.link-more .icon-arrow {
margin-bottom: 10px; /* 下線ぶんの視覚バランス調整 */
}
.link-more:hover .icon-arrow {
transform: translateX(8px);
}
/* ---- サイズ修飾子（.button-cta--sm と同じ命名） ----
セクション内の副次的な導線（NEWS/BLOGの「一覧を見る」など）で使う。
下線の太さは2pxのまま。細くすると小さい字で下線がかすれて見える */
.link-more--sm { gap: 6px; }
.link-more--sm .link-more__text {
font-size: 14px;
letter-spacing: 3px;
padding: 0 3px 8px;
}
.link-more--sm .icon-arrow {
width: 26px;
height: 26px;
margin-bottom: 8px;
}
.link-more--sm:hover .icon-arrow { transform: translateX(6px); }
/* ==============================================
共通コンポーネント：矢印アイコン（Figma 650:406）
使い方：
色は currentColor を継承。サイズは width/height で上書き可
============================================== */
.icon-arrow {
display: inline-block;
width: 32px;
height: 32px;
flex-shrink: 0;
background: currentColor;
-webkit-mask: url('assets/icon-arrow.svg') no-repeat center / contain;
mask: url('assets/icon-arrow.svg') no-repeat center / contain;
transition: transform 0.2s ease;
}
/* ==============================================
共通コンポーネント：丸矢印ボタン（.btn-round）
------------------------------------------------
以前はカード・関連ページ・カルーセルなどで個別に定義され、
38〜56pxの6種類に散らばっていた。役割で2サイズだけに統一する。
・既定（主導線）… 48px。カード／関連ページ行など「進む」導線
・--sm（補助） … 40px。カルーセル送りなど操作系
使い方：
配色は修飾子で選ぶ（新しい配色が要るときは必ずここに足すこと）：
--fill（濃緑地・白抜き）/ --invert（白地・濃緑）/ --outline（枠線のみ）/ --ghost（地なし）
============================================== */
.btn-round {
--br-size: 48px;
flex-shrink: 0;
display: grid;
place-items: center;
width: var(--br-size);
height: var(--br-size);
border: none;
border-radius: 50%;
background: var(--teal-900);
color: #fff;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.btn-round .icon-arrow { width: 46%; height: 46%; }
.btn-round--sm { --br-size: 40px; }
/* 配色バリアント */
.btn-round--invert { background: #fff; color: var(--teal-900); }
.btn-round--outline {
background: transparent;
border: 1px solid currentColor;
color: var(--teal-400);
}
.btn-round--ghost { background: transparent; color: var(--neutral-900); }
/* ホバーは「矢印が少し進む」で統一（親のhoverでも効くようにする） */
.btn-round:hover .icon-arrow,
a:hover > .btn-round .icon-arrow,
a:hover .btn-round .icon-arrow { transform: translateX(3px); }
.btn-round:disabled { opacity: 0.3; cursor: default; }
.btn-round:disabled .icon-arrow { transform: none; }
/* ==============================================
共通コンポーネント：関連ページリンク（行リスト）
使い方：
============================================== */
/* 回遊リンクの上余白。全ページ共通で標準セクション間隔に統一（88px@1280）。
各ページで前セクションの trailing 余白は 0 にしてあるので、この margin だけが
唯一の間隔になり、どのページでも同じ見た目になる */
.related { margin-top: clamp(56px, 7vw, 120px); }
.related-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding-block: clamp(28px, 3.5vw, 48px);
border-top: 1px solid #ddd7c9;
}
.related-row:last-child { border-bottom: 1px solid #ddd7c9; }
.related-row__en {
font-family: var(--font-en-serif);
font-size: clamp(22px, 2vw, 32px);
letter-spacing: 2px;
color: var(--teal-900);
}
.related-row__jp {
margin-top: 6px;
font-size: var(--fs-sm);
letter-spacing: 2px;
color: var(--neutral-700);
}
/* 丸矢印は共通の .btn-round--outline（上部で定義）。ここでは行ホバー時の反転だけ足す */
.related-row:hover .btn-round--outline {
background: var(--teal-400);
color: #fff;
}
/* ==============================================
共通コンポーネント：お知らせ1件（NEWS行）
TOPのNEWS抜粋と news.html（一覧）で共用。
使い方：
サービス
見出しテキスト
============================================== */
/* 左右は12px。ホバー時に敷く背景（下の :hover）が文字にぴったり付いて
窮屈に見えるため、ホバー時だけでなく常時この余白を持たせている */
.news-item {
display: block;
padding: 18px 12px 19px;
border-bottom: 1px solid #ece4d4;
transition: background 0.2s ease;
}
.news-item:hover { background: var(--neutral-50); }
.news-item__meta { display: flex; align-items: center; gap: 12px; }
.news-item__date {
font-family: var(--font-en-serif);
font-size: var(--fs-body-sm);
line-height: 1.52;
letter-spacing: 2px;
color: var(--teal-900);
opacity: 0.8;
}
.news-badge {
background: var(--c);
border-radius: 16px;
padding: 6px 10px;
font-size: 13px;
font-weight: 700;
line-height: 1.14;
letter-spacing: 2px;
color: #fff;
white-space: nowrap;
}
.news-item__title {
display: block;
padding-top: 8px;
font-size: var(--fs-body-sm);
line-height: 1.85;
letter-spacing: 2px;
color: var(--teal-900);
}
/* ============================================================
ヘッダー（全ページ共通・スクロール追従）
------------------------------------------------------------
マークアップは2系統あるが、中身のパーツは共通：
・配下ページ …