/* ============================================================
   global.css — 全ページ共通（v4・2026-07-07 改修指示書v4.1）
   責務: 固定ヘッダー・統一フッター（マントル）・ページ遷移・ロゴ縦横比
   style.css は凍結のため、上書きはすべて本ファイルで行う。
   読み込み順: style.css → global.css →（ホームのみ）home.css
   ============================================================ */

:root { --header-h: 60px; }

/* ---------- 固定ヘッダー（全12ページ統一・§9） ---------- */
.c-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background .45s ease, box-shadow .45s ease; }
.c-header .c-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px clamp(20px, 4vw, 44px); }
.c-brand { display: flex; align-items: center; gap: 13px; flex: 0 0 auto; }
/* §12: ロゴはいかなる幅でも縦横比を維持（高さ指定＋幅auto・max-width解除・flex固定） */
.c-brand img { height: 30px; width: auto; max-width: none; flex: 0 0 auto; }
.c-brand .c-white { display: block; }
.c-brand .c-lockup { display: none; }
.c-nav { display: flex; align-items: center; gap: clamp(14px, 2.6vw, 32px); flex-wrap: wrap; justify-content: flex-end; }
.c-nav a { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: rgba(248,244,236,.8); padding: 12px 4px 3px; border-bottom: 1px solid transparent; transition: color .25s, border-color .25s; }
.c-nav a:hover { color: #F8F4EC; border-color: var(--gold-soft); }
.c-nav .c-lang { color: rgba(248,244,236,.55); font-size: 11px; letter-spacing: .14em; }
.c-langs { display: inline-flex; align-items: center; gap: clamp(10px, 2.4vw, 16px); white-space: nowrap; }
/* solid（地上）状態 — 下層・GTMは常時 */
.c-header.is-solid { background: var(--paper); box-shadow: 0 1px 0 var(--hairline); }
.c-header.is-solid .c-white { display: none; }
.c-header.is-solid .c-lockup { display: block; }
.c-header.is-solid .c-nav a { color: var(--ink-soft); }
.c-header.is-solid .c-nav a:hover { color: var(--ink); border-color: var(--gold); }
/* 現在ページの明示（§9.2） */
.c-header .c-nav a.current { color: var(--ink); border-color: var(--ink); }
@media (max-width: 820px) {
  .c-nav { gap: 10px 14px; }
  .c-nav a { padding: 14px 6px 8px; letter-spacing: .18em; }
}
@media (max-width: 480px) {
  .c-brand img { height: 24px !important; }
}

/* ---------- 下層オフセット（§9.2: 本文・page-heroと重なりゼロ） ----------
   下層・GTMはヘッダーを通常フロー＋stickyに置き、実高で本文を押し下げる
   （ナビ折返し・言語差・どの幅でも構造的に重なりゼロ。ホームはfixedのまま） */
.subpage .c-header { position: sticky; top: 0; }
.subpage main { padding-top: 0; }
/* 狭幅: ブランド行＋ナビ行の2段に圧縮（全ページ共通） */
@media (max-width: 600px) {
  .c-header .c-bar { flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 16px 8px; }
  .c-nav { justify-content: flex-start; gap: 2px 12px; }
  .c-nav a { padding: 8px 2px 6px; letter-spacing: .14em; font-size: 10px; }
  /* 言語切替をブランド行の右上へ退避し、ナビ本体を1行に収める（3段→2段） */
  .c-langs { position: absolute; top: 14px; right: 16px; }
}

/* ---------- 層タグ（strata）基礎 — ホーム各層＋フッター「核」で使用 ---------- */
.c-stratum { position: absolute; right: clamp(20px, 7vw, 96px); transform: translateY(-50%); text-align: right; pointer-events: none; z-index: 4; }
.c-stratum .s-rule { display: block; margin-left: auto; width: 34px; height: 1px; background: currentColor; opacity: .45; margin-bottom: 9px; }
.c-stratum .s-name { display: block; font-size: 9px; letter-spacing: .3em; text-transform: uppercase; opacity: .85; }
.c-stratum .s-els { display: block; margin-top: 7px; font-weight: 300; font-size: 10.5px; letter-spacing: .16em; opacity: .8; white-space: nowrap; }
.c-stratum--ivory { color: #F8F4EC; }
.c-stratum--ink { color: #1F2733; }
.c-stratum--warm { color: #F8E7C2; }
@media (max-width: 820px) {
  .c-stratum { right: 16px; }
  .c-stratum .s-els { font-size: 9.5px; letter-spacing: .1em; }
}
/* フッター用調整（§7.3「核」） */
.c-stratum--foot { position: static; transform: none; margin: clamp(40px, 5vw, 56px) 0 18px; opacity: .8; }
/* サブページのヒーロー装飾ラベル(Vein/Au 79 等): 狭幅では中央寄せ本文と衝突するため静的化し本文下へ回す */
@media (max-width: 820px) {
  .page-hero .c-stratum { position: static; transform: none; right: auto; text-align: center; margin: 16px auto 0; }
  .page-hero .c-stratum .s-rule { margin-right: auto; }
}

/* ---------- フッター＝マントル（全12ページ共通・§7） ---------- */
footer { background: linear-gradient(180deg, #2E180B 0%, #1A0D06 100%); border-top: 0; box-shadow: inset 0 90px 140px -70px rgba(239,115,40,.10); }
.foot-wordmark { color: #F8F4EC; }
.foot-addr, .foot-col a, .foot-legal, .foot-disclaimer { color: rgba(248,231,194,.78); }
.foot-col h5 { color: #FBE3C8; }
/* 免責文の最終行オーフィン(「ん。」等)防止。style.css凍結のためここで付与 */
.foot-disclaimer { text-wrap: pretty; }
.foot-col a:hover { color: #F8F4EC; }
.foot-legal { border-top: 1px solid rgba(248,231,194,.22); }
.foot-legal a { color: inherit; }
.foot-legal a:hover { color: #F8F4EC; }
/* 下層のみ: 紙面→闇への降下グラデ（改良版・縞なし多段ストップ §7.1）。ホームはband-mantle直結・GTMは全面ダークのためキャップなし */
.subpage footer { padding-top: 0; }
.subpage footer::before { content: ""; display: block; height: clamp(220px, 32vh, 320px); background: linear-gradient(180deg, #F8F4EC 0%, #EDE4D0 18%, #D9C8A8 38%, #A98D62 58%, #6B4A28 76%, #3A2313 90%, #2E180B 100%); margin-bottom: clamp(56px, 8vw, 96px); }
.gtm-dark footer::before { content: ""; display: block; height: clamp(180px, 26vh, 300px); background: linear-gradient(180deg, #2E180B 0%, #29160B 55%, #241811 100%); margin-bottom: clamp(56px, 8vw, 96px); }
/* GTMのみ: フッター本体を鉱脈色(quote-band基準)へ反転。マントル熱のオレンジ内影は除去 */
.gtm-dark footer { background: linear-gradient(180deg, #241811 0%, #2E1B0F 100%); box-shadow: none; }

/* ---------- ページ遷移「マトリックス」（§10・cross-document View Transitions） ---------- */
@view-transition { navigation: auto; }
.c-header { view-transition-name: site-header; }
@keyframes vt-slide-out-l { to { transform: translateX(-100%); } }
@keyframes vt-slide-in-r { from { transform: translateX(100%); } }
@keyframes vt-slide-out-r { to { transform: translateX(100%); } }
@keyframes vt-slide-in-l { from { transform: translateX(-100%); } }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; } }
html[data-nav-dir="fwd"]::view-transition-old(root) { animation: vt-slide-out-l .48s cubic-bezier(.22,.61,.21,1) both; }
html[data-nav-dir="fwd"]::view-transition-new(root) { animation: vt-slide-in-r .48s cubic-bezier(.22,.61,.21,1) both; }
html[data-nav-dir="back"]::view-transition-old(root) { animation: vt-slide-out-r .48s cubic-bezier(.22,.61,.21,1) both; }
html[data-nav-dir="back"]::view-transition-new(root) { animation: vt-slide-in-l .48s cubic-bezier(.22,.61,.21,1) both; }
html[data-nav-dir="lang"]::view-transition-old(root) { animation: vt-fade-out .24s ease both; }
html[data-nav-dir="lang"]::view-transition-new(root) { animation: vt-fade-in .24s ease both; }
/* 縦軸（§10）: GTM＝地中。down＝降下（旧が上へ抜け、新が下から）、up＝帰還（ミラー） */
@keyframes vt-slide-out-up { to { transform: translateY(-100%); } }
@keyframes vt-slide-in-from-below { from { transform: translateY(100%); } }
@keyframes vt-slide-out-down { to { transform: translateY(100%); } }
@keyframes vt-slide-in-from-above { from { transform: translateY(-100%); } }
html[data-nav-dir="down"]::view-transition-old(root) { animation: vt-slide-out-up .48s cubic-bezier(.22,.61,.21,1) both; }
html[data-nav-dir="down"]::view-transition-new(root) { animation: vt-slide-in-from-below .48s cubic-bezier(.22,.61,.21,1) both; }
html[data-nav-dir="up"]::view-transition-old(root) { animation: vt-slide-out-down .48s cubic-bezier(.22,.61,.21,1) both; }
html[data-nav-dir="up"]::view-transition-new(root) { animation: vt-slide-in-from-above .48s cubic-bezier(.22,.61,.21,1) both; }
/* reduced-motion: 遷移アニメーション全無効（即時切替） */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------- グループ社名の一列表示（§7.3） ---------- */
.foot-col--group li a { white-space: nowrap; font-size: 11.5px; }
@media (max-width: 400px) { .foot-col--group li a { font-size: 11px; letter-spacing: .01em; } }

/* ---------- 余白の上質化（§15・全ページ：style.css凍結のためここで上書き）
   block +20%: clamp(70,10vw,140)→(84,12vw,168) / sec-head +25%: (38,5vw,64)→(48,6.25vw,80)
   page-hero +20%: (64,9vw,120)/(56,8vw,100)→(77,10.8vw,144)/(67,9.6vw,120) / compliance +20% */
section.block { padding: clamp(84px, 12vw, 168px) 0; }
.sec-head { margin-bottom: clamp(48px, 6.25vw, 80px); }
.page-hero { padding: clamp(77px, 10.8vw, 144px) 24px clamp(67px, 9.6vw, 120px); }
.compliance { padding: clamp(67px, 9.6vw, 120px) 0; }

/* ============================================================
   GTM＝「地中の世界」ダーク変奏（§11.2・.gtm-dark スコープ）
   コーポレート（紙）の裏面。全要素実測コントラスト4.5:1以上。
   ============================================================ */
body.gtm-dark { background: linear-gradient(180deg, #241811 0%, #2E180B 100%); color: rgba(248,231,194,.85); }
.gtm-dark .page-hero { position: relative; background: #1B0F08; border-bottom: 0; }
.gtm-dark .page-hero h1 { color: #F8E7C2; }
.gtm-dark .page-hero .sub { color: rgba(248,231,194,.8); }
.gtm-dark section.block + section.block { border-top-color: rgba(248,231,194,.14); }
.gtm-dark .sec-head h2 { color: #F8E7C2; }
.gtm-dark .sec-num { color: #FBE3C8; }
.gtm-dark .sec-head .rule { background: rgba(248,231,194,.3); }
.gtm-dark .lede { color: #F8E7C2; }
.gtm-dark .prose { color: rgba(248,231,194,.85); }
.gtm-dark .prose strong { color: #F8E7C2; }
.gtm-dark .def-table th { color: #FBE3C8; }
.gtm-dark .def-table td { color: rgba(248,231,194,.88); }
.gtm-dark .def-table th, .gtm-dark .def-table td { border-color: rgba(248,231,194,.18); }
.gtm-dark .notice { border-color: rgba(239,115,40,.4); background: rgba(239,115,40,.06); }
.gtm-dark .notice h4 { color: #FBE3C8; }
.gtm-dark .notice p { color: rgba(248,231,194,.85); }
.gtm-dark .link-line { color: #FBE3C8; border-color: rgba(248,231,194,.4); }
.gtm-dark .link-line:hover { color: #F8F4EC; border-color: #F8F4EC; }
/* ヘッダー（§11.3）: 透過＋白ロゴ＝地中では白が灯る。スクロール切替なし */
.gtm-dark .c-header { background: transparent; box-shadow: 0 1px 0 rgba(248,231,194,.15); }
.gtm-dark .c-nav a.current { color: #F8F4EC; border-color: #F8F4EC; }

/* ---------- スクロール到達フェードイン（JS有効かつモーション許容時のみ・§追加2026-07-09） ---------- */
.ef-reveal .ef-rv { opacity: 0; transform: translateY(24px); transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1); }
.ef-reveal .ef-rv.ef-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .ef-reveal .ef-rv { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* ---------- 規程ページ（privacy/terms/anti-social）: 余白圧縮＋読みやすい行幅 ---------- */
.legal section.block { padding: clamp(38px, 5vw, 68px) 0; }
.legal .wrap { max-width: 1180px; }
.legal .prose { max-width: 50em; }
.legal .sec-head { margin-bottom: clamp(18px, 2.4vw, 30px); }

/* GROUP列: 長い法人名の折返しを整える */
.foot-col--group a { font-size: 12.5px; letter-spacing: .01em; line-height: 1.5; }


/* ---------- 本文タイプスケール引上げ＋統制ステートメント（§追加 2026-07-09f・style.css凍結のため上書き） ---------- */
.prose { font-size: 18px; line-height: 1.8; }
.lede { font-size: clamp(20px, 2.35vw, 27px); }
.sec-head h2 { font-size: clamp(26px, 3.4vw, 42px); }
.tile p { font-size: 16.5px; line-height: 1.85; }
.entity .e-body, .pillar p, .def-table td, .notice p { font-size: 16px; }
/* 統制ステートメント（compliance 節・serif・日英タイ グリフ別フォールバック） */
.c-ethos { font-family: "EB Garamond", "Noto Serif JP", "Noto Serif Thai", serif; font-weight: 400;
  font-size: clamp(22px, 2.9vw, 34px); line-height: 1.55; color: var(--ink);
  margin-top: clamp(34px, 4.5vw, 52px); max-width: 22em; letter-spacing: .01em; }
.gtm-dark .c-ethos { color: #F8E7C2; }

/* 2026-07-09r J: サブページheroの説明をデスクトップで横1行に収めやすく。
   長い英文/タイ文（business/group等）は可読上2行に折り返す場合あり。 */
.page-hero .sub { max-width: 52em; }

/* 2026-07-09r K: モバイルはサブページheroを左寄せ（既存24pxパディング維持で端寄せせず整然と）。
   全サブページ共通＝下層デザインと調和。 */
@media (max-width: 820px) {
  .page-hero { text-align: left; }
  .page-hero .sub { margin-left: 0; margin-right: 0; }
  .page-hero .c-stratum { text-align: right; margin-left: auto; margin-right: 0; }
  .page-hero .c-stratum .s-rule { margin-left: auto; margin-right: 0; }
}

/* 2026-07-09s N: フッターのESPOIR FRONTIERをロゴ(.wordmark)と同一の書体・字間・大きさに */
.foot-wordmark { font-weight: 500; font-size: 18px; letter-spacing: 0.34em; text-indent: 0.34em; white-space: nowrap; }

/* 2026-07-09s O: フッター最下部ディスクレーマの横幅を拡張（62em -> フッター幅いっぱい）。
   モバイルは元々全幅のため影響なし＝desktopで広がる。 */
.foot-disclaimer { max-width: none; }

/* 2026-07-09u S: モバイル限定改行ユーティリティ（desktopでは無効化＝1行流し） */
@media (min-width: 821px) { br.m-only { display: none; } }

/* 2026-07-09u U: デスクトップの本文サイズを全体的に拡大（ヒーロー見出し h1 は対象外＝据え置き）。
   モバイルは影響なし（min-width:821px 限定）。 */
@media (min-width: 821px) {
  body { font-size: 18.5px; }
  .page-hero .sub { font-size: 16.5px; }
  .tile p, .pillar p, .entity .e-body, .contact-card p, .def-table td { font-size: 16.5px; }
  .notice p { font-size: 15.5px; }
  .foot-col a { font-size: 14.5px; }
  .foot-addr { font-size: 13.5px; }
}

/* 2026-07-09v W+X: フッターをワイド化し、右端を降下stratum（マントル等）と同じ
   right offset = clamp(20px,7vw,96px) に合わせる。→ フッターの「核」の右端が
   「マントル」と一致し、右側の元素記号が縦に整列する。 */
@media (min-width: 821px) {
  footer .wrap, .legal footer .wrap { max-width: none; padding-left: clamp(20px, 7vw, 96px); padding-right: clamp(20px, 7vw, 96px); }
  /* 09w Y: 列を内容幅で均等・中央グループ化（2fr起因の不均等を解消）。核レールは右端＝マントルに整列を維持 */
  .foot-grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* 2026-07-09x #5: フッター見出し（サイト/グループ）が小さいので拡大（リンクとバランス） */
.foot-col h5 { font-size: 12.5px; }

/* 2026-07-09x #4: モバイルで言語切替をナビ折返しの最後→上段（ロゴ行）へ。ロゴの横軸に寄せる */
@media (max-width: 820px) {
  .c-bar { flex-wrap: wrap; }
  .c-nav { flex-basis: 100%; order: 2; justify-content: flex-start; }
  .c-langs { position: absolute; top: 14px; right: clamp(16px, 4vw, 44px); height: 24px; align-items: center; }
  .c-langs .c-lang { padding-top: 0; padding-bottom: 0; }
}

/* 2026-07-09y issue3: モバイルはフッター余白を詰め、文章をフッター幅いっぱいに（自然折返し） */
@media (max-width: 820px) {
  footer .wrap { padding-left: 14px; padding-right: 14px; }
  .foot-disclaimer { text-wrap: wrap; }
}

/* 2026-07-09z req2: お知らせ等で本文(.prose)直後の注記(.notice=確認の方法)に上余白を追加 */
.prose + .notice { margin-top: clamp(32px, 5vw, 56px); }


/* ============================================================
   OTM＝「海底の世界」ダーク変奏（12b・.otm-dark スコープ）
   .gtm-dark（地中・暖色）の対。配色はTOP降下帯の海域 #27454F→#14232B に整合。
   フッターは核（暖色）へ連続させるため GTM と同一の暖色系を維持。
   ============================================================ */
body.otm-dark { background: linear-gradient(180deg, #1E3A45 0%, #14232B 100%); color: rgba(216,230,239,.85); }
.otm-dark .page-hero { position: relative; background: #0F2129; border-bottom: 0; }
.otm-dark .page-hero h1 { color: #D8E6EF; }
.otm-dark .page-hero .sub { color: rgba(216,230,239,.8); }
.otm-dark section.block + section.block { border-top-color: rgba(216,230,239,.14); }
.otm-dark .sec-head h2 { color: #D8E6EF; }
.otm-dark .sec-num { color: #CFE0EB; }
.otm-dark .sec-head .rule { background: rgba(216,230,239,.3); }
.otm-dark .lede { color: #D8E6EF; }
.otm-dark .prose { color: rgba(216,230,239,.85); }
.otm-dark .prose strong { color: #D8E6EF; }
.otm-dark .def-table th { color: #CFE0EB; }
.otm-dark .def-table td { color: rgba(216,230,239,.88); }
.otm-dark .def-table th, .otm-dark .def-table td { border-color: rgba(216,230,239,.18); }
.otm-dark .notice { border-color: rgba(239,115,40,.4); background: rgba(239,115,40,.06); }
.otm-dark .notice h4 { color: #CFE0EB; }
.otm-dark .notice p { color: rgba(216,230,239,.85); }
.otm-dark .link-line { color: #CFE0EB; border-color: rgba(216,230,239,.4); }
.otm-dark .link-line:hover { color: #F8F4EC; border-color: #F8F4EC; }
.otm-dark .c-header { background: transparent; box-shadow: 0 1px 0 rgba(216,230,239,.15); }
.otm-dark .c-nav a.current { color: #F8F4EC; border-color: #F8F4EC; }
.otm-dark .c-ethos { color: #D8E6EF; }
.otm-dark footer::before { content: ""; display: block; height: clamp(180px, 26vh, 300px); background: linear-gradient(180deg, #14232B 0%, #1D2020 55%, #241811 100%); margin-bottom: clamp(56px, 8vw, 96px); }
.otm-dark footer { background: linear-gradient(180deg, #241811 0%, #2E1B0F 100%); box-shadow: none; }

/* 12c: フッターロゴ（ワードマーク文字の置換） */
.foot-logo { display: block; }