/* ===========================================================
   下層ページ用スタイル（v5のトークンを継承）
   v5-base.css の :root 変数・header・footer をそのまま使う
   =========================================================== */

/* ---------- タイプスケール ----------
   本文の基準を16→18pxへ引き上げ、見出しとのジャンプ率を確保する。
   モバイルでも比率が潰れないよう、clamp の下限側を高めに取っている。 */
:root{
  --fs-base:clamp(1rem,.93rem + .3vw,1.125rem);      /* 16 → 18 */
  --fs-h1:clamp(2.4rem,1.5rem + 2.9vw,4.1rem);       /* 38 → 66  ジャンプ率 2.4〜3.6 */
  --fs-h2:clamp(1.95rem,1.45rem + 2.1vw,3rem);       /* 31 → 48  ジャンプ率 1.95〜2.7 */
  --fs-h3:clamp(1.22rem,1.05rem + .75vw,1.6rem);
  --fs-lede:clamp(1.18rem,1.05rem + .6vw,1.45rem);
  --fs-lead:clamp(1.05rem,.98rem + .32vw,1.22rem);
  --fs-sm:clamp(1rem,.95rem + .2vw,1.08rem);         /* 本文より一段小さい最小値。16px を下回らせない */
  --fs-label:clamp(.8rem,.74rem + .16vw,.92rem);     /* 英字ラベル・キャプション */
}
body{padding-top:0;font-size:var(--fs-base)}

/* ---------- ヘッダー ----------
   TOPは全画面ヒーローの上に透過で乗る（v5の挙動を維持）。
   下層（body.lower）は常にクリーム地。 */
body.lower header{
  background:rgba(253,248,241,.93);backdrop-filter:blur(14px);
  padding:14px var(--gutter);box-shadow:0 1px 0 rgba(90,28,0,.1);
}
/* logo_w.png は白抜きロゴ（平均輝度245）。クリーム地のヘッダーでは
   filter:none だと視認できないため暗色へ反転する。
   v5-base.css の `header.solid .logo img{filter:none}` に詳細度で負けるので
   同じ詳細度のセレクタを併記している。 */
header.solid .logo img,
body.lower header .logo img{filter:brightness(0);opacity:.92}
body.lower header .logo .tag{color:var(--ink-60);border-left-color:rgba(16,43,78,.25)}
body.lower header .nav-item{color:var(--ink)}

/* ---------- 文字サイズの底上げ ----------
   v5のTOPは本文が14〜15px、フッターが13pxで小さかった。
   見出しは既に大きいので、本文側を引き上げてジャンプ率を整える。 */
nav a{font-size:15px}
nav .en-sub{font-size:10px}
.btn-contact{font-size:15px}
.hero p{font-size:clamp(16.5px,.95rem + .45vw,19px)}
.lead{font-size:clamp(16.5px,.95rem + .45vw,19px);line-height:2.05}
.v-card p{font-size:clamp(16.5px,1rem + .35vw,20px)}
.c-item .cap{font-size:clamp(16px,.95rem + .3vw,18.5px)}
.band p{font-size:clamp(16px,.95rem + .3vw,18.5px)}
.rc-inner p{font-size:clamp(16px,.95rem + .3vw,18.5px)}
.cta p{font-size:clamp(16.5px,1rem + .2vw,18px)}
.sh-areas div{font-size:16px}
.nw-item .ttl{font-size:clamp(16.5px,1rem + .25vw,18px)}
.nw-item time{font-size:14.5px}
.n-cell .v i{font-size:16px}
.ft-addr{font-size:15px;line-height:2.05}
.ft-nav a{font-size:15px}
.ft-bottom{font-size:12.5px}
/* v5 TOP に残っていた小さい本文（11.5〜12.5px）を底上げ */
.biz-facts .k{font-size:clamp(11px,.68vw,12.5px)}
.biz-facts .v{font-size:clamp(15px,.95rem + .25vw,17.5px)}
.n-cell .k{font-size:14px}
.n-cell .note{font-size:clamp(14px,.85rem + .2vw,15.5px);color:rgba(58,26,10,.6)}
.st-key .cap{font-size:clamp(14.5px,.88rem + .2vw,16px)}
.label,.sec-label-en{font-size:clamp(11px,.68vw,12.5px)}
/* ラベル・チップ類の底上げ（本文ではないが11px台は小さいため） */
.hero-eyebrow{font-size:13px}
/* 375px で「もっと豊かに。」が 313px、使える幅が 312px。
   1px 足りずに「に。」が孤立するので、狭い幅だけ字間を詰める。 */
@media (max-width:430px){
  .hero h1{letter-spacing:.005em;font-size:clamp(2.6rem,6.6vw,7.6rem)}
}
.logo .tag{font-size:12px}
.cul-tags span,.cul-tags a{font-size:13.5px}
.nw-item .cat{font-size:12.5px}
.tel-note{font-size:14px}


/* 語の途中で折れないようにする（「KDDI一次代／理店」対策）
   ただし nowrap を全体にかけると 320px でフッターがはみ出すため、
   短い見出し系だけ nowrap、長い文字列は文節で折る。 */
/* data-kddi は段落そのものに付く箇所もある。
   keep-all を段落にかけると、読点までの一続きが長すぎて狭い幅ではみ出すため、
   短いインライン（span）だけに限定する。 */
span[data-kddi]{word-break:keep-all}
.hero-eyebrow [data-kddi],
.logo .tag{white-space:nowrap}
.hero-eyebrow{word-break:keep-all}
.ft-bottom{flex-wrap:wrap;gap:6px 18px}

/* 320px 級では数字を1列に（2列だと桁が収まらない） */
@media (max-width:400px){
  .n-grid{grid-template-columns:1fr}
}

/* ---------- モバイルメニュー ----------
   v5は1080px以下でナビ項目が全て消え、下層への到達手段が無かった。
   閲覧の9割以上がスマートフォンのためドロワーを追加する。 */
.menu-btn{
  display:none;position:relative;z-index:130;
  width:44px;height:44px;border:0;background:none;cursor:pointer;padding:0;margin-left:4px;
}
.menu-btn span{
  position:absolute;left:9px;width:26px;height:2px;background:#fff;
  transition:.4s var(--ease);border-radius:2px;
}
.menu-btn span:nth-child(1){top:15px}
.menu-btn span:nth-child(2){top:21px}
.menu-btn span:nth-child(3){top:27px}
header.solid .menu-btn span,
body.lower .menu-btn span{background:var(--ink)}
body.menu-open .menu-btn span{background:#fff}
body.menu-open .menu-btn span:nth-child(1){top:21px;transform:rotate(45deg)}
body.menu-open .menu-btn span:nth-child(2){opacity:0}
body.menu-open .menu-btn span:nth-child(3){top:21px;transform:rotate(-45deg)}

.drawer{
  position:fixed;inset:0;z-index:120;background:var(--navy);
  display:flex;flex-direction:column;justify-content:center;
  padding:90px var(--gutter) 44px;
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s;
  overflow-y:auto;
}
body.menu-open .drawer{opacity:1;visibility:visible}
/* header は z-index:100 で独自の重なり文脈を作るため、
   子の menu-btn(z:130) だけではドロワー(z:120)の上に出られない。
   メニューを開いている間はヘッダーごと持ち上げる。 */
body.menu-open header{z-index:130}
body.menu-open header .logo,
body.menu-open header nav a{opacity:0;pointer-events:none;transition:opacity .25s}
body.menu-open{overflow:hidden}
.drawer a{
  display:block;color:#fff;padding:15px 0;
  border-bottom:1px solid rgba(255,255,255,.14);
  font-size:clamp(1.1rem,1rem + .5vw,1.3rem);font-weight:700;
}
.drawer a .en{
  display:block;font-family:"Outfit",sans-serif;font-size:10px;
  letter-spacing:.2em;color:var(--lemon);font-weight:600;margin-top:4px;
}
.drawer .drawer-cta{
  margin-top:30px;background:var(--brand);border:0;border-radius:999px;
  text-align:center;padding:18px;font-size:1.05rem;
}
.drawer .drawer-cta .en{color:rgba(255,255,255,.7)}

@media (max-width:1080px){
  .menu-btn{display:block}
  header nav .btn-contact{display:none}
}
/* ヘッダーの詰まり対策
   ナビ項目5本＋ボタン＋ハンバーガーに加え、ロゴ横のタグが並ぶと
   1400px 未満でナビと重なる。狭い幅ではタグを畳む。 */
@media (max-width:1400px){
  header .logo .tag{display:none}
}
@media (max-width:1200px){
  header nav{gap:clamp(12px,1.6vw,22px)}
  nav a{font-size:14px}
}

/* ---------- ページヘッダー ---------- */
.page-head{
  padding:calc(96px + clamp(40px,7vw,110px)) 0 clamp(40px,6vw,88px);
  background:linear-gradient(180deg,var(--cream-2) 0%,var(--cream) 100%);
  border-bottom:1px solid rgba(16,43,78,.08);
}
.page-head .en-label{
  display:block;font-family:"Outfit",sans-serif;font-weight:600;
  font-size:clamp(12px,.72rem + .18vw,14px);letter-spacing:.28em;color:var(--brand);margin-bottom:20px;font-weight:700;
}
.page-head h1{
  font-family:"Shippori Mincho",serif;font-weight:600;
  font-size:var(--fs-h1);line-height:1.3;letter-spacing:.01em;
}
.page-head .lead{
  margin-top:24px;max-width:54ch;color:var(--ink-60);
  font-size:var(--fs-lead);line-height:1.95;
}
/* 見出しの改行制御
   PC向けに入れた <br> をスマホでも効かせると「に、」のような孤立行が出るため、
   狭い幅では手動改行を無効化し、文節単位の自動折り返しに任せる。 */
.page-head h1,.sec h2,.doc-head h1,.page-head .lead,.lede{word-break:auto-phrase;text-wrap:pretty}
/* 長い本文は行末が過度にギザつくため pretty のみ */
.sec p,.card p,.article p{text-wrap:pretty}
@media (max-width:760px){
  .page-head h1 br,.sec h2 br,.doc-head h1 br{display:none}
}

.crumb{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  font-size:13px;color:var(--ink-60);margin-bottom:28px;
}
/* v5-base.css の `nav a{color:#fff}` を継承してしまうため色を明示 */
.crumb a{color:var(--ink-60);border-bottom:1px solid rgba(16,43,78,.2)}
.crumb a:hover{color:var(--brand);border-bottom-color:var(--brand)}
.crumb span[aria-hidden]{opacity:.4}

/* ---------- セクション ---------- */
.sec{padding:clamp(52px,7.5vw,110px) 0}
.sec + .sec{border-top:1px solid rgba(16,43,78,.08)}
.sec.tinted{background:var(--cream-2)}
.sec.navy{background:var(--navy);color:#fff}
.sec.navy .sec-label{color:var(--lemon)}
.sec.navy .lead,.sec.navy p{color:rgba(255,255,255,.76)}
.sec-label{
  font-family:"Outfit",sans-serif;font-weight:700;font-size:clamp(12px,.72rem + .18vw,14px);
  letter-spacing:.26em;color:var(--brand);margin-bottom:18px;display:block;
}
.sec h2{
  font-family:"Shippori Mincho",serif;font-weight:600;
  font-size:var(--fs-h2);line-height:1.45;margin-bottom:24px;
}
.sec h3{
  font-size:var(--fs-h3);font-weight:700;line-height:1.55;margin-bottom:14px;
}
.sec p{max-width:58ch;line-height:1.95;color:var(--ink-60)}
.sec.navy h2,.sec.navy h3{color:#fff}
.lede{font-size:var(--fs-lede);color:var(--ink)!important;line-height:1.9;font-weight:500}

/* ---------- グリッド ---------- */
.grid{display:grid;gap:clamp(20px,3vw,40px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
@media (max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}.split{grid-template-columns:1fr}}
@media (max-width:600px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ---------- カード ---------- */
.card{
  background:#fff;border:1px solid rgba(16,43,78,.09);border-radius:4px;
  padding:clamp(22px,2.6vw,34px);
}
.card h3{margin-bottom:10px}
.card p{font-size:var(--fs-sm);line-height:1.9}
.card .num{
  font-family:"Outfit",sans-serif;font-weight:600;font-size:12px;
  letter-spacing:.2em;color:var(--brand);display:block;margin-bottom:14px;
}

/* ---------- 写真アタリ（差し替え前提） ---------- */
.ph{position:relative;overflow:hidden;background:#e9e0d3;border-radius:3px}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph.tall{aspect-ratio:3/4}
.ph.wide{aspect-ratio:16/9}
.ph.sq{aspect-ratio:1/1}
.ph.hero-ph{aspect-ratio:21/9}
@media (max-width:700px){.ph.hero-ph{aspect-ratio:4/3}}



/* 仮置きの数値・テキスト。承認済みTOP（v5）と同じく装飾せず素のまま出す */
.tbd{font-style:normal}

/* ---------- 数値ブロック ---------- */
.stat{text-align:center;padding:clamp(20px,2.6vw,32px) 12px}
.stat .k{font-size:var(--fs-label);letter-spacing:.14em;color:var(--ink-60);display:block;margin-bottom:16px;font-weight:600}
.stat .v{
  font-family:"Outfit",sans-serif;font-weight:600;
  font-size:clamp(3rem,2rem + 5vw,5.5rem);line-height:1;color:var(--navy);
  display:flex;align-items:baseline;justify-content:center;gap:.14em;
}
.stat .v .u{font-size:clamp(1rem,.9rem + .4vw,1.2rem);font-weight:500;color:var(--ink-60);letter-spacing:.06em}
.stat .note{font-size:.88rem;color:var(--ink-60);margin-top:12px;line-height:1.8;max-width:24ch;margin-inline:auto}
.sec.navy .stat .v{color:#fff}
.sec.navy .stat .k,.sec.navy .stat .note,.sec.navy .stat .v .u{color:rgba(255,255,255,.7)}

/* ---------- 一次代理店の図解 ---------- */
.chart{display:grid;gap:0;justify-items:center;text-align:center;margin:clamp(28px,4vw,52px) 0}
.chart .box{
  border:1.5px solid var(--navy);border-radius:4px;background:#fff;
  padding:clamp(14px,2vw,22px) clamp(20px,3.4vw,42px);min-width:min(88vw,300px);
}
.chart .box.brand{border-color:var(--brand);border-width:2.5px;background:#fff;box-shadow:0 10px 34px rgba(235,85,5,.14)}
.chart .box .t{font-weight:700;font-size:clamp(1.15rem,1rem + .8vw,1.5rem);line-height:1.5}
.chart .box .s{font-size:12px;letter-spacing:.16em;color:var(--ink-60);margin-top:6px;font-family:"Outfit",sans-serif}
.chart .arrow{
  width:1.5px;height:clamp(34px,4.6vw,58px);background:var(--navy);position:relative;
}
.chart .arrow.brand{background:var(--brand);width:2.5px}
.chart .arrow::after{
  content:"";position:absolute;left:50%;bottom:-1px;translate:-50% 0;
  border:5px solid transparent;border-top-color:var(--navy);
}
.chart .arrow.brand::after{border-top-color:var(--brand)}
.chart .arrow .cap{
  position:absolute;left:calc(100% + 12px);top:50%;translate:0 -50%;
  white-space:nowrap;font-size:13px;font-weight:700;color:var(--brand);letter-spacing:.08em;
}
/* 「直接契約」ラベルは矢印の右外に絶対配置しているため、
   狭い幅や2カラム内では画面外へ出る。narrow では矢印の上に重ねる。 */
@media (max-width:900px){
  .chart .arrow .cap{
    left:50%;translate:-50% -50%;
    background:var(--cream-2);padding:3px 10px;border-radius:3px;
  }
}
.chart .box{max-width:100%}

/* 地図枠（Google Maps API の採否が未決のため、住所＋外部リンクで代替） */
.map-ph{
  aspect-ratio:21/8;min-height:190px;display:grid;place-items:center;text-align:center;
  background:
    repeating-linear-gradient(0deg,rgba(16,43,78,.05) 0 1px,transparent 1px 42px),
    repeating-linear-gradient(90deg,rgba(16,43,78,.05) 0 1px,transparent 1px 42px),
    var(--cream-2);
  border:1px solid rgba(16,43,78,.12);border-radius:4px;padding:24px;
}
.map-ph .en{display:block;font-family:"Outfit",sans-serif;font-weight:700;font-size:12px;letter-spacing:.24em;color:var(--brand);margin-bottom:12px}
.map-ph p{margin:0 auto 18px;max-width:40ch}
@media (max-width:700px){.map-ph{aspect-ratio:auto}}
.chart .shops{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.chart .shops .box{min-width:0;padding:12px 20px}
.chart .shops .box .t{font-size:var(--fs-sm);font-weight:500}

/* 比較表 */
.cmp{width:100%;border-collapse:collapse;margin-top:26px;font-size:var(--fs-sm)}
.cmp th,.cmp td{border:1px solid rgba(16,43,78,.14);padding:14px 16px;text-align:left;vertical-align:top;line-height:1.8}
.cmp thead th{background:var(--navy);color:#fff;font-weight:600;letter-spacing:.04em}
.cmp tbody th{background:var(--cream-2);width:26%;font-weight:600}
.cmp .ours{background:rgba(235,85,5,.055);font-weight:600;color:var(--ink)}

/* ---------- 一般テーブル ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.tbl th,.tbl td{border-bottom:1px solid rgba(16,43,78,.12);padding:16px 4px;text-align:left;vertical-align:top;line-height:1.9}
.tbl th{width:26%;font-weight:600;color:var(--ink)}
.tbl td{color:var(--ink-60)}
@media (max-width:600px){
  .tbl th,.tbl td{display:block;width:100%;border:0;padding:6px 0}
  .tbl th{padding-top:16px;border-top:1px solid rgba(16,43,78,.12)}
  .tbl td{padding-bottom:16px}
}

/* ---------- 沿革 ---------- */
.hist{border-left:2px solid rgba(16,43,78,.14);padding-left:clamp(20px,3vw,40px);margin-top:12px}
.hist li{list-style:none;position:relative;padding:0 0 clamp(24px,3vw,40px)}
.hist li::before{
  content:"";position:absolute;left:calc(-1 * clamp(20px,3vw,40px) - 6px);top:9px;
  width:10px;height:10px;border-radius:50%;background:var(--cream);border:2px solid var(--brand);
}
.hist .y{font-family:"Outfit",sans-serif;font-weight:600;font-size:clamp(1.18rem,1.05rem + .6vw,1.45rem);color:var(--brand);letter-spacing:.06em}
.hist .d{margin-top:6px;line-height:1.95;color:var(--ink-60);max-width:56ch}

/* ---------- リスト ---------- */
.ticks{margin-top:8px}
.ticks li{list-style:none;padding-left:30px;position:relative;line-height:2.1;color:var(--ink-60)}
.ticks li::before{content:"";position:absolute;left:6px;top:.95em;width:9px;height:2px;background:var(--brand)}
.ticks li strong{color:var(--ink);font-weight:700}

/* ---------- タイムライン（1日の流れ） ---------- */
.day li{list-style:none;display:grid;grid-template-columns:78px 1fr;gap:18px;padding-bottom:26px;position:relative}
.day li::after{content:"";position:absolute;left:87px;top:26px;bottom:0;width:1px;background:rgba(16,43,78,.14)}
.day li:last-child::after{display:none}
.day .t{font-family:"Outfit",sans-serif;font-weight:600;color:var(--brand);font-size:clamp(1.05rem,1rem + .3vw,1.18rem);position:relative}
.day .t::after{content:"";position:absolute;right:-14px;top:8px;width:8px;height:8px;border-radius:50%;background:var(--brand)}
.day .c strong{display:block;margin-bottom:4px}
.day .c p{font-size:var(--fs-sm);margin:0}

/* ---------- CTA ---------- */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:18px 38px;border-radius:999px;font-weight:700;font-size:var(--fs-sm);
  background:var(--brand);color:#fff;transition:.35s var(--ease);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(235,85,5,.3)}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid rgba(16,43,78,.28)}
.btn.ghost:hover{background:var(--navy);color:#fff;border-color:var(--navy);box-shadow:none}
.btn .en{font-size:12px;opacity:.7}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}

/* 画面下固定CTA */
.fixed-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  display:grid;grid-template-columns:repeat(3,1fr);
  background:var(--navy);box-shadow:0 -6px 24px rgba(16,43,78,.22);
}
.fixed-cta a{
  padding:15px 8px;text-align:center;color:#fff;font-weight:700;font-size:clamp(.88rem,.8rem + .5vw,1.02rem);
  border-left:1px solid rgba(255,255,255,.14);line-height:1.4;
}
.fixed-cta a:first-child{border-left:0}
.fixed-cta a.primary{background:var(--brand)}
.fixed-cta .en{display:block;font-size:10px;opacity:.65;letter-spacing:.12em;margin-top:3px}
body.has-fixed-cta{padding-bottom:64px}
@media (min-width:1000px){
  .fixed-cta{left:auto;right:26px;bottom:26px;width:300px;grid-template-columns:1fr;border-radius:6px;overflow:hidden}
  body.has-fixed-cta{padding-bottom:0}
  .fixed-cta a{border-left:0;border-top:1px solid rgba(255,255,255,.14);padding:13px}
  .fixed-cta a:first-child{border-top:0}
}

/* ---------- ページ送り ---------- */
.pager{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:clamp(30px,4vw,54px) 0;border-top:1px solid rgba(16,43,78,.1);
}
.pager a{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-sm);font-weight:700}
.pager .en{font-size:10px;color:var(--brand);letter-spacing:.16em;font-weight:600}
.pager .next{text-align:right;margin-left:auto}

/* ---------- 一覧（NEWS / SHOP） ---------- */
.list-row{
  display:grid;grid-template-columns:110px 110px 1fr 24px;gap:20px;align-items:center;
  padding:22px 4px;border-bottom:1px solid rgba(16,43,78,.12);transition:.3s var(--ease);
}
.list-row:hover{background:#fff;padding-inline:14px}
.list-row .date{font-family:"Outfit",sans-serif;color:var(--ink-60);font-size:var(--fs-sm);letter-spacing:.04em}
.list-row .cat{
  font-size:12px;letter-spacing:.08em;text-align:center;
  border:1px solid rgba(16,43,78,.24);border-radius:999px;padding:4px 0;color:var(--ink-60);
}
.list-row .ttl{font-weight:600;line-height:1.65;font-size:clamp(1.05rem,1rem + .35vw,1.18rem)}
.list-row .ar{color:var(--brand);text-align:right}
@media (max-width:700px){
  .list-row{grid-template-columns:auto 1fr;grid-template-areas:"d c" "t t";gap:8px 14px}
  .list-row .date{grid-area:d}.list-row .cat{grid-area:c;justify-self:start;padding:4px 14px}
  .list-row .ttl{grid-area:t}.list-row .ar{display:none}
}

/* 店舗カード */
.shop-card{background:#fff;border:1px solid rgba(16,43,78,.09);border-radius:4px;overflow:hidden;display:flex;flex-direction:column}
.shop-card .ph{aspect-ratio:4/3}
.shop-card .b{padding:20px 22px 24px}
.shop-card h3{font-size:clamp(1.15rem,1.05rem + .5vw,1.38rem);margin-bottom:10px}
.shop-card dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:var(--fs-sm);color:var(--ink-60);line-height:1.8}
.shop-card dt{font-weight:700;color:var(--ink)}
.area-head{
  display:flex;align-items:baseline;gap:14px;margin:clamp(30px,4vw,52px) 0 20px;
  padding-bottom:12px;border-bottom:2px solid var(--navy);
}
.area-head h3{font-size:clamp(1.3rem,1.1rem + 1vw,1.85rem);margin:0}
.area-head .en{font-size:11px;color:var(--brand);letter-spacing:.2em}

/* 記事本文 */
.article{max-width:74ch;margin-inline:auto}
.article h2{font-size:clamp(1.45rem,1.2rem + 1.2vw,2.1rem);margin:48px 0 18px}
.article p{margin-bottom:20px;color:var(--ink)}
.article .meta{display:flex;gap:16px;align-items:center;margin-bottom:30px;font-size:var(--fs-sm);color:var(--ink-60)}

/* フォーム */
.form{max-width:720px}
.field{margin-bottom:26px}
.field label{display:block;font-weight:700;font-size:var(--fs-sm);margin-bottom:10px}
.field .req{color:var(--brand);font-size:.76rem;margin-left:8px;font-weight:700}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:var(--fs-sm);padding:15px 16px;
  border:1px solid rgba(16,43,78,.24);border-radius:3px;background:#fff;color:var(--ink);
}
.field textarea{min-height:150px;resize:vertical}
.field .help{font-size:.9rem;color:var(--ink-60);margin-top:8px}

/* タブ */
.tabs{display:flex;gap:0;border-bottom:1px solid rgba(16,43,78,.16);margin-bottom:34px;flex-wrap:wrap}
.tabs button{
  font:inherit;font-weight:700;font-size:clamp(.86rem,1.5vw,1rem);
  background:none;border:0;border-bottom:3px solid transparent;
  padding:14px 26px;cursor:pointer;color:var(--ink-60);transition:.25s;
}
.tabs button[aria-selected="true"]{color:var(--brand);border-bottom-color:var(--brand)}
.tabpanel[hidden]{display:none}

/* FAQ */
.faq details{border-bottom:1px solid rgba(16,43,78,.12);padding:20px 0}
.faq summary{cursor:pointer;font-weight:700;font-size:clamp(1.08rem,1rem + .38vw,1.24rem);line-height:1.65;list-style:none;display:flex;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";font-family:"Outfit",sans-serif;color:var(--brand);font-weight:700}
.faq details p{margin-top:14px;padding-left:28px;font-size:var(--fs-sm)}

/* 大見出しの強調（120年） */
.bignum{
  font-family:"Outfit",sans-serif;font-weight:700;line-height:.9;
  font-size:clamp(4.5rem,17vw,13rem);color:var(--brand);letter-spacing:-.02em;
}
.bignum small{font-size:.2em;letter-spacing:.1em;color:var(--ink);font-weight:600;margin-left:.2em}