/* ============================================================
   AMFC グループ 共通デザイントークン  design-tokens.css
   正本：05_web/_deploy/amfc-group（確定済みグループサイト）から抽出・体系化
   使い方：<link rel="stylesheet" href="design-tokens.css">
   原則：フラット（光沢/グラデ/3D禁止）／UIアイコンは絵文字でなくSVG／
         Noto系Webフォント（システムフォント依存をやめる）／8pxグリッド
   更新：2026-06-08 初版（プロレベル化D）
   ============================================================ */

/* --- Webフォント（システムフォント脱却の要）--- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&family=Noto+Sans+JP:wght@400;500;700&family=Noto+Serif+JP:wght@500;600;700&display=swap');

:root{
  /* 色：基調ブランド */
  --navy:#0B2A44; --deep-navy:#071E33; --gold:#B8964A;
  /* 色：3社アクセント（AM=紺 / AMIC=緑 / AMRC=ワイン）*/
  --am:#0B2A44; --amic:#006B5A; --amrc:#7A2638;
  /* 色：テキスト・背景・罫線 */
  --text:#1B2F45; --muted:#6F7C88; --bg:#F7FAFC; --white:#FFFFFF; --line:#E7ECF2;
  /* 書体 */
  --serif:"Noto Serif JP","Yu Mincho",serif;
  --sans:"Noto Sans JP","Yu Gothic",sans-serif;
  --en:"Cormorant Garamond","Times New Roman",serif;
  /* 余白スケール（8pxグリッド：これ以外の半端な値を使わない）*/
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:104px;
  /* 影（フラット＝極薄1段のみ。濃い影・グラデ・3Dは禁止）*/
  --shadow:0 14px 40px rgba(11,42,68,.07);
  --shadow-hover:0 24px 50px rgba(11,42,68,.18);
  /* 角丸・文字間 */
  --radius:5px; --radius-sm:2px; --ls-jp:.05em; --ls-en:.18em;
}

/* --- リセット＆ベース --- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--text);background:var(--white);line-height:1.8;-webkit-font-smoothing:antialiased;font-size:16px}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* --- レイアウト --- */
.container{max-width:1200px;margin:0 auto;padding:0 28px}
.section{padding:var(--s7) 0}

/* --- 見出し（英字ラベル＋明朝＋金の下線）--- */
.sec-head{text-align:center;margin-bottom:var(--s5)}
.sec-head .en{font-family:var(--en);font-size:14px;letter-spacing:.22em;color:var(--gold);text-transform:uppercase;display:block;margin-bottom:10px}
.sec-head h2{font-family:var(--serif);font-weight:600;font-size:clamp(25px,3vw,33px);color:var(--navy);letter-spacing:var(--ls-jp)}
.sec-head h2::after{content:"";display:block;width:50px;height:2px;background:var(--gold);margin:20px auto 0}

/* --- ボタン（フラット）--- */
.btn{display:inline-block;background:var(--navy);color:#fff;padding:11px 22px;letter-spacing:.06em;border-radius:var(--radius-sm);transition:background .2s;font-family:var(--sans)}
.btn:hover{background:var(--deep-navy)}
.btn-gold{background:var(--gold)} .btn-gold:hover{filter:brightness(.92)}

/* --- カード（フラット・極薄影のみ）--- */
.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--s5) var(--s4)}
.card:hover{box-shadow:var(--shadow-hover)}

/* --- 3社テーマ：accent変数を切替（.theme-amic 等を親に付ける）--- */
.theme-am{--accent:var(--am)}
.theme-amic{--accent:var(--amic)}
.theme-amrc{--accent:var(--amrc)}
.accent-bar{border-left:3px solid var(--accent,var(--gold));padding-left:var(--s3)}
.accent-text{color:var(--accent,var(--navy))}