@charset "utf-8";
/* =========================================================================
   アイ・ホーム リブランディングサイト  下層ページ用スタイル
   デザイン基準: 支給SVG（PCトップページデザイン / アートボード W1440・本文W1200・左右余白120）
   ========================================================================= */

/* -----------------------------------------------------------------
   1. デザイントークン（支給SVGから抽出した実値）
   ----------------------------------------------------------------- */
:root {
  /* ブランドカラー */
  --c-red-deep: #6F0020;   /* アーチ グラデ 0%   */
  --c-red:      #E50020;   /* アーチ グラデ 33%  */
  --c-orange:   #ED7600;   /* アーチ グラデ 86%  */
  --c-amber:    #F2A20C;   /* アーチ グラデ 100% */
  --c-key:      #FF0000;   /* ロゴ地・ハンバーガー（支給ロゴPDFの赤） */

  /* ベース */
  --c-ink:   #1E1C1C;      /* フッター・ボタン地 */
  --c-text:  #292929;      /* 本文 */
  --c-mist:  #E6EEEE;      /* セクション地（淡いブルーグレー） */
  --c-white: #ffffff;
  --c-line:  rgba(30, 28, 28, .14);
  --c-muted: #6d6a6a;

  --grad-arc: linear-gradient(90deg,
              var(--c-red-deep) 0%, var(--c-red) 33.51%,
              var(--c-orange) 85.72%, var(--c-amber) 100%);

  /* レイアウト（1440基準） */
  --w-content: 1200px;
  --gutter: clamp(20px, 8.333vw, 120px);  /* 1440時に120px */
  --header-h: 92.308px;

  /* タイポ */
  --f-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", meiryo, sans-serif;
  --f-en: "Barlow", "Noto Sans JP", sans-serif;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* -----------------------------------------------------------------
   2. リセット / ベース
   ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--f-jp);
  font-weight: 400;
  font-size: 16px;
  line-height: 2;
  color: var(--c-text);
  background: var(--c-white);
  overflow-x: hidden;
  font-feature-settings: "palt" 1;
}
img, svg { max-width: 100%; height: auto; vertical-align: middle; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure, dl, dd { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--c-key); outline-offset: 3px; }

/* 支給デザインの注記どおり、1440幅で「左右余白120px＋本文1200px」になる */
.l-inner {
  width: 100%;
  max-width: calc(var(--w-content) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.u-en { font-family: var(--f-en); font-weight: 900; letter-spacing: .02em; line-height: 1; }
.u-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* -----------------------------------------------------------------
   2-b. 閲覧パスワード（限定公開ゲート）
   ----------------------------------------------------------------- */
html.is-locked, html.is-locked body { overflow: hidden; height: 100%; }
/* 解錠されるまで本文は描画しない（ゲート以外を隠す） */
html.is-locked body > *:not(.c-gate):not(svg) { visibility: hidden; }

.c-gate {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  padding: clamp(24px, 5vw, 60px) var(--gutter);
  background: var(--c-ink); color: var(--c-white);
  overflow: hidden;
}
html:not(.is-locked) .c-gate { display: none; }
.c-gate[data-state="done"] { opacity: 0; transition: opacity .45s var(--ease); }

.c-gate__arc { position: absolute; left: 50%; bottom: -30%; width: max(1200px, 130vw);
  transform: translateX(-50%) scaleY(-1); opacity: .34; pointer-events: none; }
.c-gate__arc svg { display: block; width: 100%; height: auto; }

.c-gate__box { position: relative; z-index: 1; width: min(100%, 420px); text-align: left; }
.c-gate__logo { display: block; width: 76px; margin-bottom: clamp(20px, 3vw, 32px); }
.c-gate__logo svg { display: block; width: 100%; height: auto; }
/* 暗い地では深紅（#6F0020）が沈むため、明るい側だけのグラデーションを使う */
.c-gate__en { font-family: var(--f-en); font-weight: 700; font-size: 12px; letter-spacing: .2em;
  background: linear-gradient(90deg, var(--c-red) 0%, var(--c-orange) 55%, var(--c-amber) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.c-gate__title { margin-top: 10px; font-size: clamp(21px, 2.4vw, 29px); font-weight: 700; line-height: 1.5; letter-spacing: .03em; }
.c-gate__lead { margin-top: 12px; font-size: 13.5px; line-height: 1.9; color: rgba(255, 255, 255, .68); }

.c-gate__label { display: block; margin-top: clamp(22px, 3vw, 32px); margin-bottom: 8px;
  font-size: 12px; letter-spacing: .14em; color: rgba(255, 255, 255, .62); }
.c-gate__field { position: relative; display: flex; align-items: stretch; }
.c-gate__input {
  flex: 1 1 auto; min-width: 0; height: 56px; padding: 0 56px 0 18px;
  font: inherit; font-size: 16px; letter-spacing: .06em; /* 16px未満だとiOSで拡大される */
  color: var(--c-white); background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .26); border-radius: 0;
  transition: border-color .25s var(--ease), background .25s var(--ease);
  -webkit-appearance: none; appearance: none;
}
.c-gate__input:focus { outline: none; border-color: var(--c-amber); background: rgba(255, 255, 255, .11); }
.c-gate__input::placeholder { color: rgba(255, 255, 255, .35); }
.c-gate[data-state="error"] .c-gate__input { border-color: var(--c-red); }

.c-gate__reveal {
  position: absolute; right: 0; top: 0; width: 52px; height: 56px;
  display: grid; place-items: center; color: rgba(255, 255, 255, .6);
  transition: color .25s var(--ease);
}
.c-gate__reveal:hover { color: var(--c-white); }
.c-gate__reveal svg { width: 20px; height: 20px; }
.c-gate__reveal[aria-pressed="true"] { color: var(--c-amber); }

.c-gate__error { min-height: 1.7em; margin-top: 9px; font-size: 12.5px; line-height: 1.7; color: #FF8A93; }
/* 地と同じ #1E1C1C では沈むので白地に反転する */
.c-gate__submit { margin-top: 8px; width: 100%; background: var(--c-white); color: var(--c-ink); }
.c-gate__submit:hover, .c-gate__submit:focus-visible { color: var(--c-white); }

@media (max-width: 480px) {
  .c-gate { place-items: center start; }
  .c-gate__box { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .c-gate[data-state="done"] { transition: none; }
}

/* -----------------------------------------------------------------
   3. ヘッダー / ドロワー
   ----------------------------------------------------------------- */
.c-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: flex-start; justify-content: space-between;
  padding-inline: var(--gutter);
  pointer-events: none;
}
.c-header > * { pointer-events: auto; }
.c-header__logo { display: block; width: 100px; }
.c-header__logo svg { display: block; width: 100%; height: auto; }

/* ハンバーガー：支給SVG（赤2px×3本 / 幅50px / 間隔16.265px） */
.c-burger {
  width: 50px; height: var(--header-h);
  display: grid; align-content: center; gap: 14.265px;
  background: none;
}
.c-burger span {
  display: block; width: 50px; height: 2px; background: var(--c-key);
  transition: transform .4s var(--ease), opacity .25s linear;
}
.c-burger[aria-expanded="true"] span { background: var(--c-white); }
.c-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(16.265px) rotate(33deg); }
.c-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.c-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-16.265px) rotate(-33deg); }

.c-drawer {
  position: fixed; inset: 0; z-index: 90;
  background: var(--c-ink); color: var(--c-white);
  display: grid; align-content: center;
  padding: var(--header-h) var(--gutter);
  opacity: 0; visibility: hidden;
  /* 開くときは即座に visible（フォーカス移動のため）、閉じるときだけフェード後に hidden */
  transition: opacity .45s var(--ease), visibility 0s linear .45s;
  overflow-y: auto;
}
.c-drawer[data-open="true"] { opacity: 1; visibility: visible; transition: opacity .45s var(--ease), visibility 0s linear 0s; }
.c-drawer__list { display: grid; gap: clamp(14px, 2.2vw, 26px); max-width: var(--w-content); margin-inline: auto; width: 100%; }
.c-drawer__link { display: flex; align-items: baseline; gap: 1em; }
.c-drawer__en { font-family: var(--f-en); font-weight: 900; font-size: clamp(26px, 4.4vw, 46px); line-height: 1.1; letter-spacing: .01em; }
.c-drawer__jp { font-size: clamp(12px, 1.1vw, 14px); letter-spacing: .12em; color: rgba(255,255,255,.66); }
.c-drawer__link:hover .c-drawer__en,
.c-drawer__link:focus-visible .c-drawer__en {
  background: var(--grad-arc); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.c-drawer__foot { margin-top: clamp(24px, 4vw, 48px); font-size: 13px; letter-spacing: .08em; color: rgba(255,255,255,.6); max-width: var(--w-content); margin-inline: auto; width: 100%; }
body[data-lock="true"] { overflow: hidden; }

/* -----------------------------------------------------------------
   4. 共通パーツ
   ----------------------------------------------------------------- */
/* アーチ（支給SVGのグラデーション弧） */
.c-arc { display: block; width: 100%; }
.c-arc svg { display: block; width: 100%; height: auto; }

/* セクション */
.c-sec { padding-block: clamp(64px, 9vw, 130px); }
.c-sec--mist { background: var(--c-mist); }
.c-sec--ink  { background: var(--c-ink); color: var(--c-white); }

.c-label { display: flex; align-items: center; gap: 16px; margin-bottom: clamp(20px, 2.6vw, 36px); }
.c-label__en { font-family: var(--f-en); font-weight: 900; font-size: clamp(13px, 1.1vw, 15px); letter-spacing: .18em; }
.c-label__bar { flex: 1 1 auto; height: 2px; max-width: 96px; background: var(--grad-arc); }
.c-label__jp { font-size: 12px; letter-spacing: .18em; color: var(--c-muted); }
.c-sec--ink .c-label__jp { color: rgba(255,255,255,.6); }
/* 支給MVV資料の「WHY／WHERE／HOW」注記 */
.c-label { flex-wrap: wrap; }
.c-label__q { font-size: 12.5px; letter-spacing: .08em; color: var(--c-key); }
@media (max-width: 640px) {
  .c-label__bar { max-width: 48px; }
  .c-label__q { flex: 1 0 100%; margin-top: 2px; }
}

.c-h2 {
  font-size: clamp(24px, 3.05vw, 44px);
  font-weight: 700; line-height: 1.6; letter-spacing: .02em;
  color: var(--c-ink);
  word-break: auto-phrase;
}
.c-sec--ink .c-h2 { color: var(--c-white); }
.c-h2__en { display: block; margin-top: .9em; font-family: var(--f-en); font-weight: 700;
  font-size: clamp(12px, 1.05vw, 15px); letter-spacing: .16em; color: var(--c-key); }
.c-body { margin-top: clamp(20px, 2.4vw, 34px); font-size: clamp(14px, 1.11vw, 16px); line-height: 2.14; }
.c-body + .c-body { margin-top: 1.6em; }

/* ボタン（支給SVG：W201.6 × H56 / 地#1E1C1C / 白文字 + シェブロン） */
.c-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-width: 201.6px; height: 56px; padding-inline: 26px;
  background: var(--c-ink); color: var(--c-white);
  font-family: var(--f-en); font-weight: 700; font-size: 15px; letter-spacing: .16em;
  position: relative; overflow: hidden; isolation: isolate;
}
.c-btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--grad-arc); transform: translateX(-101%); transition: transform .5s var(--ease);
}
.c-btn:hover::before, .c-btn:focus-visible::before { transform: none; }
.c-btn svg { width: 14px; height: 24px; flex: none; }

/* -----------------------------------------------------------------
   5. パンくず / ページヘッド
   ----------------------------------------------------------------- */
.p-crumb { padding-top: calc(var(--header-h) + 18px); font-size: 12px; letter-spacing: .06em; color: var(--c-muted); }
.p-crumb ol { display: flex; flex-wrap: wrap; gap: .6em; }
.p-crumb li + li::before { content: "／"; margin-right: .6em; color: var(--c-line); }
.p-crumb a:hover { color: var(--c-key); }

.p-head { position: relative; padding-block: clamp(40px, 6vw, 86px) clamp(50px, 7vw, 104px); overflow: hidden; }
.p-head__arc { position: absolute; left: 50%; top: 0; width: max(1440px, 100%); transform: translateX(-50%); z-index: 0; opacity: .96; pointer-events: none; }
.p-head__inner { position: relative; z-index: 1; }
.p-head__en {
  font-family: var(--f-en); font-weight: 900; line-height: .92;
  font-size: clamp(52px, 8.6vw, 124px); letter-spacing: .005em; color: var(--c-ink);
}
.p-head__jp { margin-top: clamp(16px, 2vw, 28px); font-size: clamp(17px, 1.94vw, 28px); font-weight: 700; letter-spacing: .04em; line-height: 1.7; color: var(--c-ink); word-break: auto-phrase; }
.p-head__date { margin-top: clamp(14px, 1.6vw, 22px); font-size: 13px; letter-spacing: .1em; color: var(--c-muted); }
.p-head__date span { font-family: var(--f-en); font-weight: 700; }

/* PC：英字見出しはアーチに重ねる（支給デザインの処理）。
   和文タイトルと日付はアーチの裾を抜けた白場に置いて可読性を確保する。 */
@media (min-width: 901px) {
  .p-head__jp { margin-top: clamp(64px, 9.6vw, 140px); }
}
/* SP：アーチを上部のスウィープとして扱い、見出しは白場に置く */
@media (max-width: 900px) {
  .p-head { padding-top: clamp(150px, 46vw, 420px); }
  .p-head__arc { width: 200vw; }
}

/* -----------------------------------------------------------------
   6. リード（VITALITY FOR LIFE）
   ----------------------------------------------------------------- */
.p-lead { padding-block: clamp(56px, 8vw, 116px) clamp(64px, 9vw, 130px); }
.p-lead__mark { width: min(100%, 760px); }
.p-lead__mark svg { display: block; width: 100%; height: auto; }
.p-lead__copy { margin-top: clamp(24px, 3.4vw, 46px); font-size: clamp(19px, 2.36vw, 34px); font-weight: 700; line-height: 1.75; letter-spacing: .02em; color: var(--c-ink); word-break: auto-phrase; }
.p-lead__text { margin-top: clamp(22px, 2.8vw, 38px); max-width: 860px; }

/* -----------------------------------------------------------------
   7. MISSION / VISION / VALUE のステートメント（支給MVV資料の内容）
   ----------------------------------------------------------------- */
.p-mvv__state { display: grid; gap: .28em; }
.p-mvv__en {
  font-family: var(--f-en); font-weight: 700;
  font-size: clamp(34px, 5.2vw, 76px); line-height: 1.15; letter-spacing: .03em; color: var(--c-ink);
}
.p-mvv__jp {
  font-size: clamp(30px, 4.6vw, 66px); font-weight: 700;
  line-height: 1.45; letter-spacing: .08em; color: var(--c-ink); word-break: auto-phrase;
}

/* VALUE の5つの行動指針 */
.p-creed { margin-top: clamp(34px, 4.6vw, 62px); display: grid; gap: 0; border-top: 1px solid var(--c-line); }
.p-creed__row {
  display: grid; grid-template-columns: minmax(0, 260px) 1fr;
  gap: clamp(16px, 3vw, 48px); align-items: center;
  padding-block: clamp(16px, 1.9vw, 26px); border-bottom: 1px solid var(--c-line);
}
.p-creed__term {
  font-family: var(--f-en); font-weight: 700; font-size: clamp(14px, 1.25vw, 18px);
  letter-spacing: .06em; color: var(--c-ink); position: relative;
}
.p-creed__desc { font-size: clamp(14px, 1.32vw, 19px); line-height: 1.85; letter-spacing: .02em; color: var(--c-text); }
/* 支給資料の「英語 ── 日本語」の罫線表現 */
.p-creed__term::after {
  content: ""; position: absolute; right: calc(clamp(16px, 3vw, 48px) * -0.5);
  top: 50%; width: clamp(14px, 2vw, 34px); height: 1px; background: var(--c-ink); transform: translateX(-50%);
}
@media (max-width: 700px) {
  .p-creed__row { grid-template-columns: 1fr; gap: 6px; align-items: start; }
  .p-creed__term::after { display: none; }
  .p-creed__term { color: var(--c-key); }
}

/* -----------------------------------------------------------------
   10. SUPPORTERS（ランク別スポンサーロゴ）
   ----------------------------------------------------------------- */
/* ランク名は表示しない。参考ページ同様、ロゴの大きさとカラー／白黒の差だけで
   協賛レベルを表し、グループ間は余白で区切る。 */
.p-tiers { margin-top: clamp(34px, 4.6vw, 62px); display: grid; gap: clamp(40px, 5.2vw, 76px); }

/* ロゴの升目。上位ランクほどセルを大きく取り、支給参考ページの階層表現に合わせる */
/* 列数に満たない行も中央に寄せるため grid ではなく折り返し flex で組む。
   升目の幅は「(全幅 − 溝×(列数−1)) ÷ 列数」で、列数は --cols で段ごとに指定する。 */
.p-logos {
  --gap: clamp(8px, 1vw, 14px);
  --cols: 4;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--gap);
}
.p-logos > .p-logos__item { flex: 0 0 calc((100% - var(--gap) * (var(--cols) - 1)) / var(--cols)); }
/* ロゴ画像は全点 320×140 のキャンバスに正規化してあるため、
   升目の高さは画像の比率で自動的に揃う（aspect-ratio や object-fit は不要）。
   新しいロゴを追加するときも同じキャンバスに収めること。 */
.p-logos__item {
  background: var(--c-white); display: grid; place-items: center;
  padding: clamp(10px, 1.4vw, 20px);
  border: 1px solid rgba(30, 28, 28, .07);
  min-width: 0;
}
.p-logos__item img { display: block; width: 100%; height: auto; }

/* ロゴ未提出の企業は同じ升目に社名テキストで掲載する。
   画像が無いぶん高さが決まらないので、画像と同じ比率の見えない枠（::before）を置いて
   「パディング＋画像高」という画像セルと同じ高さにする。
   ※ box-sizing を変えると flex の幅計算が隣のセルとずれるため、枠は疑似要素で作る。 */
.p-logos__item--text {
  position: relative;
  text-align: center;
  font-weight: 700; line-height: 1.5; letter-spacing: .02em;
  color: var(--c-ink); word-break: auto-phrase;
}
.p-logos__item--text::before { content: ""; display: block; width: 100%; aspect-ratio: 320 / 140; }
.p-logos__item--text > span {
  position: absolute; inset: 0; padding: inherit;
  display: grid; place-items: center; overflow: hidden;
}
.p-logos--col2 .p-logos__item--text { font-size: clamp(16px, 1.7vw, 24px); }
.p-logos--col3 .p-logos__item--text { font-size: clamp(13px, 1.25vw, 18px); }
.p-logos--col4 .p-logos__item--text { font-size: clamp(11.5px, 1.02vw, 14.5px); }
.p-logos--col6 .p-logos__item--text { font-size: clamp(10px, .84vw, 12px); }

/* バナーリンクになっているロゴ */
.p-logos__link { display: block; width: 100%; transition: opacity .3s var(--ease); }
.p-logos__link:hover { opacity: .62; }
.p-logos__link:focus-visible { outline-offset: 6px; }

/* 列数＝ランク。上位ほど列が少なくロゴが大きくなる */
.p-logos--col2 { --cols: 2; }
.p-logos--col3 { --cols: 3; }
.p-logos--col4 { --cols: 4; }
.p-logos--col6 { --cols: 6; }
.p-logos--col4 .p-logos__item,
.p-logos--col6 .p-logos__item { padding: clamp(8px, 1vw, 14px); }

/* 白黒表示のランク */
.p-logos.is-mono img { filter: grayscale(1); }

@media (max-width: 1000px) {
  .p-logos--col4 { --cols: 3; }
  .p-logos--col6 { --cols: 4; }
}
@media (max-width: 700px) {
  .p-logos--col3 { --cols: 2; }
  .p-logos--col4 { --cols: 2; }
  .p-logos--col6 { --cols: 3; }
}
@media (max-width: 420px) {
  .p-logos--col6 { --cols: 2; }
}

.p-sup__note { margin-top: clamp(20px, 2.4vw, 30px); font-size: 12.5px; color: var(--c-muted); letter-spacing: .04em; }

/* -----------------------------------------------------------------
   11. CTA / フッター
   ----------------------------------------------------------------- */
.p-cta { position: relative; overflow: hidden; padding-block: clamp(60px, 8vw, 118px); background: var(--c-ink); color: var(--c-white); text-align: center; }
/* 上下反転のみ（rotate(180deg)にするとグラデーションの向きが左右逆になるため） */
/* アーチ図形は高さ＝幅×0.2885、帯の下端は図形高さの81.5%の位置にある（上下反転後）。
   その帯の下端がセクション内に収まる量だけ下げることで、下端で直線的に切れるのを防ぐ。
   幅の分岐（max）に合わせ、bottom も min() で同じ分岐にする。 */
.p-cta__arc {
  position: absolute; left: 50%; width: max(1440px, 100vw);
  bottom: min(-70.6px, -4.9vw);
  transform: translateX(-50%) scaleY(-1);
  opacity: .45; pointer-events: none;
}
/* 狭い画面では弧のカーブが画面内に収まらず色面が平らに見えるため、装飾を外す */
@media (max-width: 900px) { .p-cta__arc { display: none; } }
.p-cta__inner { position: relative; z-index: 1; }
.p-cta__mark { width: min(100%, 560px); margin-inline: auto; }
.p-cta__mark svg { display: block; width: 100%; height: auto; }
.p-cta__jp { margin-top: clamp(14px, 1.8vw, 24px); font-size: clamp(14px, 1.2vw, 17px); letter-spacing: .06em; color: rgba(255,255,255,.78); }
.p-cta .c-btn { margin-top: clamp(26px, 3.2vw, 44px); background: var(--c-white); color: var(--c-ink); }
.p-cta .c-btn:hover, .p-cta .c-btn:focus-visible { color: var(--c-white); }

.c-footer { background: var(--c-ink); color: var(--c-white); padding-block: clamp(52px, 6.4vw, 92px) 0; }
.c-footer__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 4vw, 64px); }
@media (max-width: 900px) { .c-footer__top { grid-template-columns: 1fr; } }
.c-footer__logo { width: 100px; display: block; }
.c-footer__tag { margin-top: clamp(18px, 2.2vw, 28px); width: min(100%, 380px); }
.c-footer__addr { margin-top: clamp(16px, 2vw, 26px); font-size: 13.5px; line-height: 2.1; color: rgba(255,255,255,.74); font-style: normal; }
.c-footer__addr a:hover { color: var(--c-amber); }
.c-footer__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px clamp(20px, 3vw, 48px); align-content: start; }
@media (max-width: 560px) { .c-footer__nav { grid-template-columns: 1fr; } }
.c-footer__nav a { font-size: 14px; letter-spacing: .06em; color: rgba(255,255,255,.82); display: inline-flex; align-items: center; gap: .7em; }
.c-footer__nav a::before { content: ""; width: 14px; height: 1px; background: var(--c-key); transition: width .3s var(--ease); }
.c-footer__nav a:hover { color: var(--c-white); }
.c-footer__nav a:hover::before { width: 24px; }
.c-footer__bottom { margin-top: clamp(36px, 4.6vw, 64px); border-top: 1px solid rgba(255,255,255,.14); padding-block: 22px 26px;
  display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; justify-content: space-between; }
.c-footer__sub { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 12.5px; color: rgba(255,255,255,.6); }
.c-footer__sub a:hover { color: var(--c-white); }
.c-footer__copy { font-family: var(--f-en); font-weight: 500; font-size: 12px; letter-spacing: .1em; color: rgba(255,255,255,.5); }

/* -----------------------------------------------------------------
   11-b. トースト（静的デモ：リンク／メニュー無効の通知）
   ----------------------------------------------------------------- */
.c-toast {
  /* left:50% だけだと収縮幅の基準が画面の半分になり不要に折り返すため、
     left/right:0 + margin auto + fit-content で中央寄せする */
  position: fixed; left: 0; right: 0; margin-inline: auto; width: fit-content;
  bottom: clamp(20px, 3.4vw, 44px); z-index: 200;
  display: flex; align-items: center; gap: 12px;
  max-width: min(92vw, 460px); padding: 15px 24px 16px 21px;
  background: var(--c-ink); color: var(--c-white);
  font-size: clamp(13px, 1.05vw, 14.5px); font-weight: 500; letter-spacing: .04em; line-height: 1.5;
  box-shadow: 0 14px 34px rgba(30, 28, 28, .3);
  overflow: hidden; pointer-events: none;
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .3s var(--ease), transform .42s var(--ease), visibility 0s linear .42s;
}
.c-toast[data-show="true"] {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity .28s var(--ease), transform .42s var(--ease), visibility 0s linear 0s;
}
/* 上辺のブランドグラデーション */
.c-toast__accent { position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad-arc); }
.c-toast__icon { width: 19px; height: 19px; flex: none; color: var(--c-amber); }
.c-toast__text { flex: 1 1 auto; }
/* 残り時間バー（JSでscaleXを0へ遷移させる） */
.c-toast__timer {
  position: absolute; inset: auto 0 0 0; height: 2px; background: rgba(255, 255, 255, .38);
  transform: scaleX(1); transform-origin: left center;
}
@media (max-width: 480px) { .c-toast { padding: 13px 18px 14px 16px; gap: 10px; } }
@media (prefers-reduced-motion: reduce) {
  .c-toast, .c-toast[data-show="true"] { transform: none; }
  .c-toast { transition: opacity .01s linear, visibility 0s linear .01s; }
  .c-toast__timer { display: none; }
}

/* ページトップ */
.c-pagetop { position: fixed; right: clamp(14px, 2vw, 28px); bottom: clamp(14px, 2vw, 28px); z-index: 80;
  width: 52px; height: 52px; display: grid; place-items: center; background: var(--c-ink); color: #fff;
  opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s, background .3s; }
.c-pagetop[data-show="true"] { opacity: 1; visibility: visible; }
.c-pagetop:hover { background: var(--c-key); }
.c-pagetop svg { width: 13px; height: 22px; transform: rotate(-90deg); }

/* -----------------------------------------------------------------
   12. リビール（動きを弱めても内容は必ず表示する）
   ----------------------------------------------------------------- */
.js .js-reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .js-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .js-reveal, .js .js-reveal.is-in { opacity: 1; transform: none; transition: none; }
  .c-btn::before { transition: none; }
}

/* -----------------------------------------------------------------
   13. 印刷
   ----------------------------------------------------------------- */
@media print {
  .c-header, .c-drawer, .c-pagetop, .p-cta { display: none !important; }
  body { color: #000; }
  .js .js-reveal { opacity: 1 !important; transform: none !important; }
}