@charset "UTF-8";
/* ===========================================
   AMA JAPAN 公式サイト  style.css

   デザイン方向性：005（Runway案・静かなラグジュアリー）踏襲
   配色：白・黒・金・真紅・水色・墨色 / 和：明朝体, 欧：高級誌セリフ

   ── 構成 ──────────────────────────────────
   1. Reset       ブラウザ既定値のならし
   2. Base        CSS変数（色・書体・余白）とタイポグラフィの土台
   3. Layout      wrap / section / stack / 見出し まわりの骨格
   4. Components  部品。共通 → TOP → 下層 → ページ別 → Footer の順
   5. Utilities   最大幅・色・余白のヘルパー（最優先で効く）

   ── 決めごと ──────────────────────────────
   ・数値はできるだけ clamp() で可変にする（メディアクエリは最小限）
   ・余白は CSS変数（--sec-y / --head-gap 等）で全ページ統一
   ・左右・上下の指定は論理プロパティ（margin-inline / padding-block 等）
   ・HTMLに style="" は書かない。必要ならここにクラスを足す
   ・金色の文字は白背景だと 3.07:1 しかない。文字には --c-gold-dk を使う
   ・小さい注記と金色の小ラベルは明朝だと細いので --f-gothic（ゴシック）
=========================================== */

@layer reset, base, layout, components, utilities;

/* ===========================================
   Reset
=========================================== */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  body { min-height: 100dvh; line-height: 1.95; }
  img, svg, video { max-width: 100%; height: auto; display: block; }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
  ul, ol { list-style: none; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
}

/* ===========================================
   Variables & Base
=========================================== */
@layer base {
  :root {
    --c-white:   #f4f3ef;   /* 白（基調） */
    --c-black:   #14110c;   /* 黒／墨（基調） */
    --c-ink:     #211c15;   /* 墨色（面） */
    --c-gold:    #a9863d;   /* 金（光の線・小ラベル） */
    --c-gold-lt: #cdaa63;
    --c-crimson: #9e1b1b;   /* 真紅（一点） */
    --c-aqua:    #7fb7d4;   /* 水色（Programの03）暗背景で 8.63:1 */
    --c-crimson-lt: #c94f4f; /* 明るい真紅。暗背景の数字・文字用（4.23:1）*/
    --c-gold-dk: #856827;   /* 金（白背景の文字用／4.72:1でAA達成）*/

    --f-jp: "Noto Serif JP", serif;
    --f-en: "Marcellus", serif;
    /* 金色の小ラベル・小さい注記用。明朝だと細くて読みづらいためゴシックにする。
       Webフォントを増やさないよう、OS標準のゴシックのみで構成。 */
    --f-gothic: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", YuGothic, Meiryo, sans-serif;

    --pad-x: clamp(1.5rem, 6vw, 8rem);
    --c-line: #05882c;      /* LINEグリーン（白文字で 4.60:1 = WCAG AA達成）*/
    --c-line-lt: #07b53b;   /* 明るいLINEグリーン。暗背景上の文字・罫線用（6.89:1）*/
    --sec-y: clamp(3rem, 7.3vw, 6.7rem);   /* 旧 clamp(4.5rem,11vw,10rem) の2/3 */
    --eyebrow-gap: clamp(.4rem, 1vw, .7rem);      /* 見出しラベル→次要素 */
    --head-gap: clamp(.9rem, 2.25vw, 1.5rem);     /* 見出し→本文 */
    --body-btn-gap: clamp(2rem, 3.4vw, 2.5rem);   /* 本文→ボタン */
    --stack-gap: clamp(1rem, 2.4vw, 1.6rem);
    --line-gap: clamp(1.1rem, 2.6vw, 1.7rem);
    --wrap:  min(74rem, 100%);
    --wrap-narrow: min(46rem, 100%);

    --fs-body: clamp(.9rem, .4vw + .8rem, .98rem);

    color-scheme: light;
  }

  body {
    font-family: var(--f-jp); font-weight: 400;
    color: var(--c-black);
    background: var(--c-white);
    font-size: var(--fs-body);
    font-feature-settings: "palt" 1;
    letter-spacing: .04em;
    overflow-x: hidden;
  }
  ::selection { background: var(--c-black); color: var(--c-white); }
  :focus-visible { outline: 2px solid var(--c-crimson); outline-offset: 3px; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  }
}

/* ===========================================
   Layout / shared
=========================================== */
@layer layout {
  .wrap { width: var(--wrap); margin-inline: auto; }
  .section { padding-block: var(--sec-y); padding-inline: var(--pad-x); position: relative; }
  .section--tight { padding-block: clamp(2rem, 4.7vw, 4rem); }   /* 旧 clamp(3rem,7vw,6rem) の2/3 */
  /* 写真のないページの先頭セクション。固定ヘッダーに隠れないよう上を空ける */
  .section--below-header { padding-block-start: clamp(7rem, 16vw, 10rem); }
  .stack { display: grid; justify-items: start; gap: var(--stack-gap); }
  .stack--center { justify-items: center; text-align: center; }

  .eyebrow {
    font-family: var(--f-en);
    font-size: clamp(.72rem, 1.2vw + .4rem, .84rem);
    letter-spacing: .4em; text-transform: uppercase;
    color: var(--c-gold);
    display: flex; align-items: center; gap: .8em;
  }
  .eyebrow::before { content: ""; width: clamp(1.6rem, 4vw, 2.8rem); height: 1px; background: currentColor; }
  /* 中央寄せの見出しラベル。.stack--center 配下、または .eyebrow--center を付けた要素 */
  .stack--center .eyebrow,
  .eyebrow--center { justify-content: center; }
  /* 中央寄せの eyebrow は左右対称に罫線を出す。
     letter-spacing:.4em の分だけ末尾に余白が付くので margin で相殺して見た目を左右均等にする */
  .stack--center .eyebrow::after,
  .eyebrow--center::after { content: ""; width: clamp(1.6rem, 4vw, 2.8rem); height: 1px; background: currentColor; margin-inline-start: -.4em; }

  /* --- 見出しラベル直後の間隔をサイト共通で統一 --- */
  .eyebrow + * { margin-block-start: var(--eyebrow-gap); }
  .stack > .eyebrow + * { margin-block-start: calc(var(--eyebrow-gap) - var(--stack-gap)); }
  .line__inner > .eyebrow + * { margin-block-start: calc(var(--eyebrow-gap) - var(--line-gap)); }

  .head {
    font-family: var(--f-jp); font-weight: 600;
    line-height: 1.44; letter-spacing: .08em;
    font-size: clamp(1.8rem, 4vw + .5rem, 3rem);
  }
  /* 見出しの変化形。サイズ違いと、直下に少しだけ余白を足したいとき */
  .head--sm { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
  .head--mb-sm { margin-block-end: .2em; }
  .head--mb-md { margin-block-end: .4em; }
  .head .en { display: block; font-family: var(--f-en); font-size: clamp(.95rem, 1.6vw, 1.2rem); letter-spacing: .18em; text-transform: uppercase; color: var(--c-gold); margin-block-start: .55em; }

  .body-text { line-height: 2.05; }
  .body-text p + p { margin-block-start: 1.4em; }
  /* 序文用。本文(--fs-body)より少しだけ大きい程度に抑える。
     旧 clamp(1.02rem,1.4vw+.6rem,1.25rem) は本文の1.27倍あり、他セクションと差が出すぎていた */
  .lead { font-size: clamp(.95rem, .6vw + .75rem, 1.05rem); line-height: 2; letter-spacing: .06em; }
}

/* ===========================================
   Components
=========================================== */
@layer components {

  /* ═══════════════════════════════════════════
     共通パーツ（全ページで使う部品）
     ═══════════════════════════════════════════ */

  /* ---------- Header ---------- */
  .site-header {
    position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: clamp(1rem, 2.4vw, 1.5rem) var(--pad-x);
    color: var(--c-white);
    transition: background-color .5s ease, color .5s ease, padding .4s ease, box-shadow .5s ease;
  }
  .site-header.is-scrolled {
    background: color-mix(in srgb, var(--c-black) 92%, transparent);
    backdrop-filter: blur(10px);
    padding-block: clamp(.65rem, 1.6vw, 1rem);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--c-gold) 40%, transparent);
  }
  .brand { display: flex; align-items: center; }
  /* トップロゴ画像（top_logo.png 680x144 / 比率4.72:1）。高さ基準・幅autoで比率維持 */
  .brand__img { display: block; width: auto; height: clamp(32px, 5.4vw, 44px); transition: height .4s ease; }
  .site-header.is-scrolled .brand__img { height: clamp(26px, 4.4vw, 36px); }
  @media (prefers-reduced-motion: reduce) { .brand__img { transition: none; } }

  .nav { display: none; }
  @media (min-width: 62rem) {
    .nav { display: flex; align-items: center; gap: clamp(1.4rem, 2.4vw, 2.6rem); }
    .nav a { font-family: var(--f-en); font-size: .92rem; letter-spacing: .14em; text-transform: uppercase; position: relative; padding-block: .3rem; }
    .nav a::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .4s ease; }
    .nav a:hover::after, .nav a:focus-visible::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
    .nav a[aria-current="page"] { color: var(--c-gold-lt); }
  }
  .nav-toggle { display: inline-grid; place-items: center; width: 44px; height: 44px; }
  @media (min-width: 62rem) { .nav-toggle { display: none; } }
  .nav-toggle span { width: 22px; height: 1.5px; background: currentColor; position: relative; }
  .nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; inset-inline: 0; height: 1.5px; background: currentColor; }
  .nav-toggle span::before { inset-block-start: -7px; } .nav-toggle span::after { inset-block-start: 7px; }

  .drawer { border: none; padding: 0; margin: 0; inline-size: 100%; max-inline-size: 100%; block-size: 100dvh; max-block-size: 100dvh; background: var(--c-black); color: var(--c-white); }
  .drawer::backdrop { background: color-mix(in srgb, var(--c-black) 78%, transparent); }
  .drawer__inner { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: clamp(1.1rem, 4.5vw, 2rem); padding: var(--pad-x); text-align: center; }
  .drawer a { font-family: var(--f-en); font-size: clamp(1.6rem, 7vw, 2.6rem); letter-spacing: .1em; text-transform: uppercase; }
  .drawer a small { display: block; font-family: var(--f-jp); font-size: .7rem; letter-spacing: .28em; color: var(--c-gold-lt); margin-block-start: .3em; text-transform: none; }
  .drawer__close { position: absolute; inset-block-start: 1.1rem; inset-inline-end: var(--pad-x); width: 44px; height: 44px; font-family: var(--f-en); font-size: 1.6rem; }

  /* ---------- Buttons ---------- */
  .btn {
    font-family: var(--f-en); font-size: clamp(.95rem, 2vw, 1.1rem); letter-spacing: .14em; text-transform: uppercase;
    color: var(--c-black); background: var(--c-white); border: 1px solid var(--c-white);
    padding: .95em 2.6em; min-height: 44px; border-radius: 999px;
    display: inline-flex; align-items: center; gap: .7em;
    transition: background .4s ease, color .4s ease;
  }
  .btn:hover, .btn:focus-visible { background: transparent; color: var(--c-white); }
  .btn--ghost { color: var(--c-black); background: transparent; border-color: color-mix(in srgb, var(--c-black) 45%, transparent); }
  .btn--ghost:hover, .btn--ghost:focus-visible { background: var(--c-black); color: var(--c-white); border-color: var(--c-black); }
  /* LINEブランドカラー */
  .btn--line { color: var(--c-white); background: var(--c-line); border-color: var(--c-line); transition: background .4s ease, color .4s ease, border-color .4s ease; }
  /* ホバー時は背景が抜けて暗色地になるため、文字・罫線は明るい方の緑を使う
     （#05882c だと暗背景に対して 4.09:1 で基準未達になるため）*/
  .btn--line:hover, .btn--line:focus-visible { background: transparent; color: var(--c-line-lt); border-color: var(--c-line-lt); }

  /* ---------- Breadcrumb ---------- */
  .crumb { padding: clamp(1rem, 2.4vw, 1.4rem) var(--pad-x); font-family: var(--f-en); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--c-black) 55%, transparent); border-block-end: 1px solid color-mix(in srgb, var(--c-black) 10%, transparent); }
  .crumb ol { display: flex; flex-wrap: wrap; gap: .6em; align-items: center; }
  .crumb li { display: flex; align-items: center; gap: .6em; }
  .crumb li + li::before { content: "/"; color: var(--c-gold); }
  .crumb a:hover { color: var(--c-crimson); }

  /* ---------- Sections tone ---------- */
  .section--dark { background: var(--c-black); color: var(--c-white); overflow: hidden; }
  .section--dark .head { color: var(--c-white); }
  .section--dark .eyebrow { color: var(--c-gold-lt); }
  .section--ink { background: var(--c-ink); color: var(--c-white); }
  .section--ink .eyebrow { color: var(--c-gold-lt); }
  .glow-top::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(60% 40% at 50% 0%, rgba(255,248,232,.1), transparent 70%); pointer-events: none; }
  .glow-top > * { position: relative; z-index: 1; }

  /* ---------- Split (image + text) ---------- */
  .split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
  @media (min-width: 56rem) {
    .split { grid-template-columns: 1fr 1fr; }
    .split--wide-text { grid-template-columns: .85fr 1.15fr; }
    .split--reverse .split__media { order: 2; }
  }
  /* 画像とテキストの高さが違うとき、上端で揃える */
  .split--top { align-items: start; }
  .split__media { position: relative; }
  .split__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
  .split__media--wide img { aspect-ratio: 3 / 2; }
  .split__media::after { content: ""; position: absolute; inset: 10px; border: 1px solid color-mix(in srgb, var(--c-gold) 45%, transparent); pointer-events: none; }
  .section--dark .split__media::after { border-color: color-mix(in srgb, var(--c-gold-lt) 40%, transparent); }

  /* ---------- Cards / Bento (Education 4本柱等) ---------- */
  .cards { display: grid; gap: clamp(1.2rem, 2.4vw, 1.8rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); margin-block-start: clamp(2rem, 4vw, 3rem); }
  .card { position: relative; overflow: hidden; background: var(--c-ink); color: var(--c-white); display: grid; grid-template-rows: auto 1fr; }
  /* 画像へのホバー効果はサイト全体で廃止（ユーザー指示）。opacity:.9 は常時の抑えた色調として維持 */
  .card__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; opacity: .9; }
  .card__body { padding: clamp(1.2rem, 2.4vw, 1.7rem); display: grid; gap: .6rem; align-content: start; }
  .card__tag { font-family: var(--f-en); font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--c-gold-lt); }
  /* line-height 未指定だと body の 1.95 を継承し、英文タイトルが2〜3行になると行間が空きすぎる */
  .card__title { font-family: var(--f-jp); font-weight: 600; font-size: 1.15rem; letter-spacing: .06em; line-height: 1.4; }
  .card__desc { font-size: .88rem; line-height: 1.9; color: color-mix(in srgb, var(--c-white) 78%, transparent); }

  /* ---------- Prose (About/Education 本文) ---------- */
  .prose { max-width: 44rem; }
  .prose h3 { --h3-fs: clamp(1.2rem, 2vw + .4rem, 1.55rem);
              font-family: var(--f-jp); font-weight: 600; font-size: var(--h3-fs); letter-spacing: .06em; margin-block: 2.4em .8em; padding-inline-start: .8em; border-inline-start: 2px solid var(--c-gold); }
  .prose h3:first-child { margin-block-start: 0; }
  /* 暗い面では金の罫線を明るいほうに差し替える */
  .prose--lt h3 { border-inline-start-color: var(--c-gold-lt); }
  .prose p { line-height: 2.05; margin-block-start: 1.2em; }
  .prose p:first-of-type { margin-block-start: 0; }
  .prose .marker { display: inline-block; font-family: var(--f-en); font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--c-gold); margin-block-end: .3em; margin-inline-end: .8em;
                    vertical-align: calc(var(--h3-fs) * .15); }
  /* ↑ 英字ラベルと和文見出しが詰まって見えるため右に余白。
     letter-spacing:.2em の分と合わせて約13pxの間隔になる。
     vertical-align は、和文見出しと英字ラベルの上下中心を揃えるための持ち上げ量。
     ラベルのフォントは固定(.8rem)で見出し側だけ可変なので、見出しのフォントサイズ
     (--h3-fs)に比例させると全画面幅で中心が揃う（実測ズレ 1px未満）*/
  /* スマホでは英字ラベルを独立した行にする。
     和文見出しと同じ行に置くと、見出しの途中で折り返して読みにくくなるため。 */
  @media (max-width: 44rem) {
    .prose .marker { display: block; margin-inline-end: 0; margin-block-end: .5em; vertical-align: baseline; }
  }

  /* ---------- Feature list (役割・活動) ---------- */
  .feature-list { display: grid; gap: .1rem; margin-block-start: 1.4em; border-block-start: 1px solid color-mix(in srgb, currentColor 16%, transparent); }
  .feature-list li { display: flex; gap: 1em; align-items: baseline; padding-block: .95em; border-block-end: 1px solid color-mix(in srgb, currentColor 16%, transparent); line-height: 1.7; }
  .feature-list li::before { content: ""; flex: none; width: 7px; height: 7px; margin-block-start: .55em; background: var(--c-gold); rotate: 45deg; }

  /* ---------- Timeline (連携/導線) ---------- */
  .flow { display: grid; gap: clamp(1rem, 2vw, 1.4rem); margin-block-start: clamp(2rem, 4vw, 3rem); counter-reset: flow; }
  @media (min-width: 52rem) { .flow { grid-template-columns: repeat(3, 1fr); } }
  .flow__step { position: relative; padding: clamp(1.4rem, 2.6vw, 2rem); background: color-mix(in srgb, currentColor 4%, transparent); border: 1px solid color-mix(in srgb, currentColor 16%, transparent); display: grid; gap: .6rem; }
  .flow__step::before { counter-increment: flow; content: counter(flow, decimal-leading-zero); font-family: var(--f-en); font-size: 1.4rem; color: var(--c-gold); letter-spacing: .04em; }
  .flow__title { font-family: var(--f-jp); font-weight: 600; font-size: 1.1rem; letter-spacing: .06em; }
  .flow__desc { font-size: .88rem; line-height: 1.9; color: color-mix(in srgb, currentColor 78%, transparent); }

  /* ═══════════════════════════════════════════
     TOPページ
     ═══════════════════════════════════════════ */

  /* ---------- Hero (top) ---------- */
  .hero { position: relative; min-height: 100dvh; display: grid; place-items: center; text-align: center; background: var(--c-black); color: var(--c-white); overflow: hidden; isolation: isolate; }
  .hero__slides { position: absolute; inset: 0; z-index: -2; }
  .hero__slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.6s ease; transform: scale(1.06); animation: heroZoom 8s ease-in-out infinite alternate; filter: brightness(1.24) saturate(1.06); }
  .hero__slide.is-active { opacity: 1; }
  /* スライドの写真は装飾なので、HTMLに style="" を書かずCSS側で持つ */
  .hero__slide:nth-child(1) { background-image: url("../images/hero-01.jpg"); }
  .hero__slide:nth-child(2) { background-image: url("../images/hero-02.jpg"); }
  .hero__slide:nth-child(3) { background-image: url("../images/hero-03.jpg"); }
  .hero__slide:nth-child(4) { background-image: url("../images/hero-04.jpg"); }
  .hero__slide:nth-child(5) { background-image: url("../images/hero-05.jpg"); }
  /* 404ページのヒーロー（写真1枚・見出し小さめ） */
  .hero--404 .hero__slide { background-image: url("../images/hero-03.jpg"); }
  .hero--404 .btn { margin-block-start: 1.6rem; }
  /* ※ 旧HTMLには 404の見出しを小さくする指定が inline で入っていたが、
        clamp(1.8rem,5vw+.4rem,3.4rem) と演算子の前後に空白がなく CSS として無効だった。
        つまり実際には一度も効いていない。見た目を変えないため、ここでは再現しない。
        小さくしたい場合は下の1行を有効にする。
     .hero--404 .hero__title { font-size: clamp(1.8rem, 5vw + .4rem, 3.4rem); } */
  @keyframes heroZoom { from { transform: scale(1.02); } to { transform: scale(1.12); } }
  @media (prefers-reduced-motion: reduce) { .hero__slide { animation: none; transform: none; } }
  .hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
    background:
      radial-gradient(74% 64% at 50% 46%, color-mix(in srgb, var(--c-black) 10%, transparent), color-mix(in srgb, var(--c-black) 40%, transparent) 90%),
      linear-gradient(to bottom, color-mix(in srgb, var(--c-black) 40%, transparent) 0%, color-mix(in srgb, var(--c-black) 8%, transparent) 30%, color-mix(in srgb, var(--c-black) 40%, transparent) 62%, color-mix(in srgb, var(--c-black) 74%, transparent) 84%, color-mix(in srgb, var(--c-black) 92%, transparent) 100%); }
  .hero__inner { inline-size: 100%; padding-inline: var(--pad-x); position: relative; z-index: 1; display: grid; justify-items: center; gap: clamp(.9rem, 2vw, 1.4rem); }
  /* グリッドの子は既定で min-content 幅まで広がるため、明示的に上限を設ける */
  .hero__inner > * { max-inline-size: 100%; }
  /* スマホでのみ有効になる改行。英文コピーを PHILOSOPHY / BEYOND で折り返す */
  .br-sp { display: none; }
  @media (max-width: 44rem) { .br-sp { display: inline; } }
  .hero__eyebrow { font-family: var(--f-en); font-size: clamp(.6rem, 1.9vw, .9rem); letter-spacing: clamp(.14em, .75vw, .42em); text-transform: uppercase; color: #e7d3a3; text-shadow: 0 1px 2px rgba(0,0,0,.92), 0 2px 16px rgba(0,0,0,.85); }
  .hero__logo { width: clamp(3.6rem, 9vw, 5.4rem); filter: drop-shadow(0 6px 20px rgba(0,0,0,.5)); }
  .hero__title { font-family: var(--f-jp); font-weight: 600; font-size: clamp(1.6rem, 6.4vw + .4rem, 4.4rem); line-height: 1.42; letter-spacing: clamp(.04em, .5vw, .1em); text-shadow: 0 4px 40px rgba(0,0,0,.6); }
  .hero__en { font-family: var(--f-en); font-size: clamp(.88rem, 2.4vw, 1.35rem); letter-spacing: clamp(.08em, .5vw, .16em); text-transform: uppercase; color: color-mix(in srgb, var(--c-white) 92%, transparent); text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 2px 20px rgba(0,0,0,.7); }
  .hero__scroll { position: absolute; inset-block-end: clamp(1.2rem, 3vw, 2.2rem); inset-inline-start: 50%; translate: -50% 0; z-index: 1; font-family: var(--f-en); font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; color: color-mix(in srgb, var(--c-white) 60%, transparent); display: grid; justify-items: center; gap: .5rem; }
  .hero__scroll::after { content: ""; width: 1px; height: clamp(1.6rem, 4vw, 2.6rem); background: linear-gradient(var(--c-gold-lt), transparent); }

  /* ---------- Hero CTA（オーディション導線） ----------
     .hero__inner 内、英文コピーの直後に横型ボタンとして配置（全画面幅共通） */
  .hero__cta {
    /* .hero__inner はグリッド（gap clamp(.9rem,2vw,1.4rem)）。
       CTAは他の行より少し離したいので、gap に上乗せする分だけをマージンで足す */
    margin-block-start: clamp(.8rem, 2vw, 1.4rem);
    display: inline-flex; align-items: center; gap: clamp(.5em, 2.4vw, .85em);
    max-inline-size: 100%;
    /* 中の文字・余白をすべて em にしてあるので、この1行でボタン全体が画面幅に追従する。
       360px幅で内容量の約13%の余裕が出るよう係数を調整済み。 */
    font-size: clamp(.66rem, 3.3vw, .92rem);
    min-block-size: 44px; padding: .95em clamp(1em, 4vw, 1.75em); border-radius: 999px;
    color: var(--c-white);
    /* 真紅の面。単色ではなく上下でわずかに明度差をつけて奥行きを出す */
    background:
      linear-gradient(165deg,
        color-mix(in srgb, var(--c-crimson) 88%, #fff) 0%,
        var(--c-crimson) 52%,
        color-mix(in srgb, var(--c-crimson) 80%, #000) 100%);
    border: 1px solid color-mix(in srgb, var(--c-gold-lt) 60%, transparent);
    /* 写真の上でも浮いて見えるよう、真紅そのものの色で影を落とす */
    box-shadow:
      0 8px 26px color-mix(in srgb, var(--c-crimson) 45%, transparent),
      inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent);
    transition: box-shadow .45s ease, border-color .45s ease, translate .45s ease, filter .45s ease;
  }
  /* flex-shrink と折り返しを止める（縮むと文字が回り込んで重なる） */
  .hero__cta-en {
    flex: none; white-space: nowrap;
    font-family: var(--f-en); font-size: .96em;
    letter-spacing: clamp(.1em, .5vw, .2em); text-transform: uppercase;
    color: #e7d3a3;  /* 真紅の上で 5.4:1。--c-gold-lt だと 3.6:1 で AA 未達 */
  }
  .hero__cta-jp {
    flex: none; white-space: nowrap;
    font-size: 1em; letter-spacing: clamp(.06em, .35vw, .14em);
    padding-inline-start: clamp(.55em, 2.2vw, .9em);
    border-inline-start: 1px solid color-mix(in srgb, var(--c-white) 32%, transparent);
  }
  .hero__cta-arrow { flex: none; font-family: var(--f-en); transition: translate .45s ease; }
  .hero__cta:hover, .hero__cta:focus-visible {
    border-color: var(--c-gold-lt);
    box-shadow:
      0 12px 34px color-mix(in srgb, var(--c-crimson) 62%, transparent),
      inset 0 1px 0 color-mix(in srgb, #fff 30%, transparent);
    translate: 0 -2px; filter: saturate(1.1) brightness(1.06);
  }
  .hero__cta:hover .hero__cta-arrow, .hero__cta:focus-visible .hero__cta-arrow { translate: .25em 0; }
  @media (prefers-reduced-motion: reduce) {
    .hero__cta, .hero__cta-arrow { transition: none; }
    .hero__cta:hover, .hero__cta:focus-visible { translate: none; }
    .hero__cta:hover .hero__cta-arrow, .hero__cta:focus-visible .hero__cta-arrow { translate: none; }
  }

  /* ---------- Philosophy ---------- */
  .philosophy { text-align: center; }
  .philosophy__rule { width: 1px; height: clamp(2.4rem, 6vw, 4rem); background: linear-gradient(var(--c-gold), transparent); margin-inline: auto; }
  .philosophy__key { font-family: var(--f-jp); font-weight: 500; font-size: clamp(1.7rem, 3.8vw + .5rem, 2.9rem); line-height: 1.55; letter-spacing: .1em; max-width: 24ch; margin-inline: auto; margin-block-end: var(--head-gap); }
  /* .philosophy の text-align:center を本文だけ解除。ブロック自体は中央配置のまま */
  .philosophy__body { max-width: 44rem; inline-size: fit-content; margin-inline: auto; text-align: start; }
  /* 本文とボタンの間隔。共通の .mt-sm (1.4rem) は他でも使うためここだけ上書き */
  .philosophy .btn { margin-block-start: var(--body-btn-gap); }

  /* 中央寄せセクション（about の Network など）も Philosophy と同じリズムに揃える */
  .stack--center .head + .body-text,
  .stack--center .head + .lead { margin-block-start: var(--head-gap); }
  /* .stack はグリッドで row-gap が既に間隔を作るため、その分を差し引いて --head-gap に揃える
     （eyebrow の扱いと同じ考え方。これが無いと gap + margin で約2倍空く）*/
  .stack > .head + .body-text,
  .stack > .head + .lead { margin-block-start: calc(var(--head-gap) - var(--stack-gap)); }
  /* 本文の箱を fit-content にすると、1行に収まるときは箱がテキスト幅まで縮んで
     margin-inline:auto で中央に、折り返すときだけ箱が広がって左揃えになる。
     （.line p と同じ考え方。メディアクエリ不要）*/
  .stack--center .body-text,
  .stack--center .lead { inline-size: fit-content; margin-inline: auto; text-align: start; }
  .stack--center .body-text + .btn { margin-block-start: var(--body-btn-gap); }

  /* ---------- Program / Lineup ---------- */
  .program { text-align: center; }
  .lineup { margin-block-start: clamp(2.6rem, 5vw, 4rem); display: grid; gap: clamp(2.4rem, 5vw, 3rem); position: relative; }
  @media (min-width: 52rem) { .lineup { grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); } }
  .look { display: grid; justify-items: center; gap: 0; position: relative; z-index: 1; }
  /* スマホ・タブレット（1カラム表示）では テキスト → 画像 の順にする。
     PCの3カラム表示では従来どおり 画像 → テキスト。
     HTMLの並びはPC基準のままにして、狭い画面だけ order で入れ替える。 */
  @media (max-width: 51.99rem) { .look__img { order: 1; margin-block-start: 1.1rem; } }
  .look__img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; filter: grayscale(.15) contrast(1.02); }

  /* 番号は左右に細い罫線を添える。サイト共通の .eyebrow と同じ装飾言語なので後付け感が出ない。
     罫線は currentColor 由来なので、01=真紅 / 02=金 / 03=水色 の色がそのまま線にも乗る。 */
  .look__no {
    display: flex; align-items: center; gap: .75em;
    font-family: var(--f-en); font-size: clamp(.95rem, 1.6vw, 1.1rem);
    letter-spacing: .28em; line-height: 1; margin-block-start: .5rem;
    color: var(--c-gold-lt);
  }
  .look__no::before, .look__no::after {
    content: ""; width: clamp(1.4rem, 3vw, 2.2rem); height: 1px;
    background: color-mix(in srgb, currentColor 60%, transparent);
  }
  /* letter-spacing の分だけ数字の末尾に余白が付くため、右の罫線を引き戻して左右対称にする */
  .look__no::after { margin-inline-start: -.28em; }
  /* PCでは画像と番号の間を少し空ける。.look__no の既定マージンより後に置いて上書きする */
  @media (min-width: 52rem) { .look__no { margin-block-start: 1.4rem; } }
  .look:first-child .look__no { color: var(--c-crimson-lt); }
  .look:last-child .look__no { color: var(--c-aqua); }

  /* 1行しか入らない見出しに本文用の行間(1.95)が効くと、上下に余分な空きが生まれる */
  .look__title { margin-block-start: .95rem; font-family: var(--f-en); font-size: clamp(1.1rem, 2.2vw, 1.35rem); letter-spacing: .26em; line-height: 1.35; text-transform: uppercase; }
  .look__jp { margin-block-start: .5rem; font-family: var(--f-jp); font-weight: 500; font-size: .95rem; letter-spacing: .16em; line-height: 1.5; color: var(--c-gold-lt); }
  /* 説明文は金の細罫で区切る。見出しの塊と説明が別の情報だと一目で分かる */
  .look__desc {
    margin-block-start: 1.15rem; padding-block-start: 1.15rem;
    border-block-start: 1px solid color-mix(in srgb, var(--c-gold) 26%, transparent);
    inline-size: min(22rem, 100%);
    font-size: .88rem; line-height: 1.9; color: color-mix(in srgb, currentColor 78%, transparent);
  }

  /* ---------- News ---------- */
  /* ブロックごと中央に配置。行の中身（日付＝左／タグ＝右）はそのまま */
  .news__list { margin-block-start: clamp(2rem, 4vw, 3rem); max-width: 48rem; margin-inline: auto; border-block-start: 1px solid color-mix(in srgb, var(--c-black) 14%, transparent); }
  .news .form__note { inline-size: min(48rem, 100%); margin-inline: auto; }
  .news__item { display: grid; gap: .3rem .9rem; align-items: baseline; grid-template-columns: auto 1fr auto; padding-block: clamp(1.1rem, 2.4vw, 1.5rem); border-block-end: 1px solid color-mix(in srgb, var(--c-black) 14%, transparent); transition: padding-inline .4s ease, background .4s ease; }
  .news__item:hover { background: color-mix(in srgb, var(--c-black) 4%, transparent); padding-inline: .8rem; }
  .news__date { font-family: var(--f-en); font-size: .95rem; letter-spacing: .06em; }
  .news__tag { font-family: var(--f-en); font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-gold); justify-self: end; }
  .news__text { grid-column: 1 / -1; line-height: 1.8; margin-block-start: .2rem; }
  @media (min-width: 42rem) { .news__text { grid-column: 2; grid-row: 1; margin-block-start: 0; } }

  /* ---------- X導線ボタン ---------- */
  .news__cta { display: grid; justify-items: center; margin-block-start: var(--body-btn-gap); }
  .news__text a { text-decoration: underline; text-underline-offset: .25em; text-decoration-color: color-mix(in srgb, var(--c-black) 35%, transparent); }
  .news__text a:hover { color: var(--c-crimson); }

  /* ---------- LINE CTA ---------- */
  .line { text-align: center; }
  .line__inner { position: relative; z-index: 1; display: grid; justify-items: center; gap: var(--line-gap); }
  .line__head { font-family: var(--f-jp); font-weight: 500; font-size: clamp(1.7rem, 3.6vw + .5rem, 2.7rem); letter-spacing: .08em; }
  /* 34rem(544px)だと本文が587px必要で2行に折り返していたため40remへ拡張。
     .line__inner は justify-items:center なので、この p の幅は fit-content =
     min(テキスト幅, 使える幅)。1行に収まるときは箱がテキスト幅ぴったりに縮んで中央に置かれ、
     折り返すときだけ箱が横いっぱいに広がる。よって text-align:start にしておけば
     「1行＝中央／2行以上＝左揃え」がメディアクエリなしで成立する */
  .line p { max-width: 40rem; text-align: start; color: color-mix(in srgb, var(--c-white) 82%, transparent); }

  /* ---------- Message / portrait ---------- */
  .message__grid { display: grid; gap: clamp(2.2rem, 5vw, 4rem); align-items: center; }
  @media (min-width: 58rem) { .message__grid { grid-template-columns: .72fr 1.28fr; } }
  .portrait { aspect-ratio: 3 / 4; position: relative; overflow: hidden; background: color-mix(in srgb, var(--c-black) 12%, var(--c-white)); display: grid; place-items: center; }
  .portrait img { width: 100%; height: 100%; object-fit: cover; }
  .portrait::before { content: ""; position: absolute; inset: 10px; border: 1px solid color-mix(in srgb, var(--c-gold) 55%, transparent); pointer-events: none; z-index: 1; }
  /* スマホでは人物写真が大きく感じるとのご指摘により、幅を絞って中央に置く（2026-08-11） */
  @media (max-width: 57.999rem) {
    .message__grid .portrait { inline-size: min(74%, 20rem); margin-inline: auto; }
  }
  .message__quote { font-family: var(--f-jp); font-weight: 500; font-size: clamp(1.3rem, 2.6vw + .5rem, 2.1rem); line-height: 1.7; letter-spacing: .05em; }
  .message__quote .hl { color: var(--c-crimson); }
  .section--dark .message__quote .hl { color: var(--c-gold-lt); }
  .message__body { max-width: 40rem; line-height: 2.05; }
  .message__name { font-family: var(--f-en); font-size: .95rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-gold); }
  .message__name b { display: block; font-family: var(--f-jp); font-weight: 600; font-size: 1.2rem; letter-spacing: .1em; text-transform: none; color: inherit; margin-block-start: 0; }
  /* ↑ 役職と氏名の間隔。margin を 0 にしても、上の行の line-height 由来の
     行間（約7px）が残るので詰まりすぎにはならない（旧 .35em で13px）*/
  .section--dark .message__name b { color: var(--c-white); }

  /* ═══════════════════════════════════════════
     下層ページ共通
     ═══════════════════════════════════════════ */

  /* ---------- Page hero (下層ページ) ---------- */
  .page-hero { position: relative; min-height: clamp(52vh, 60vw, 74vh); display: grid; place-items: end start; padding: var(--pad-x); padding-block-end: clamp(2.6rem, 6vw, 4.5rem); background: var(--c-black); color: var(--c-white); overflow: hidden; isolation: isolate; }
  .page-hero__bg { position: absolute; inset: 0; z-index: -2; object-fit: cover; width: 100%; height: 100%; filter: saturate(.92); }
  .page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, color-mix(in srgb, var(--c-black) 82%, transparent), color-mix(in srgb, var(--c-black) 30%, transparent) 60%, transparent), linear-gradient(to top, color-mix(in srgb, var(--c-black) 88%, transparent), transparent 55%); }
  .page-hero__inner { position: relative; z-index: 1; display: grid; gap: clamp(.7rem, 1.6vw, 1.1rem); max-width: 46rem; }
  .page-hero__title { font-family: var(--f-jp); font-weight: 600; font-size: clamp(2rem, 5vw + .4rem, 3.6rem); line-height: 1.4; letter-spacing: .1em; text-shadow: 0 4px 30px rgba(0,0,0,.5); }
  .page-hero__en { font-family: var(--f-en); font-size: clamp(.85rem, 1.6vw, 1.05rem); letter-spacing: .34em; text-transform: uppercase; color: var(--c-gold-lt); }

  /* ═══════════════════════════════════════════
     Audition
     ═══════════════════════════════════════════ */

  /* ---------- Audition: 募集要項テーブル ---------- */
  .terms {
    inline-size: min(46rem, 100%); margin-inline: auto; text-align: start;
    margin-block-start: clamp(1.6rem, 3.4vw, 2.4rem);
    border-block-start: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  }
  .terms__row {
    display: grid; gap: .35em 1.6em; padding-block: clamp(1em, 2vw, 1.3em);
    border-block-end: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  }
  @media (min-width: 34rem) { .terms__row { grid-template-columns: 11em 1fr; align-items: baseline; } }
  .terms dt { font-family: var(--f-gothic); font-weight: 600; font-size: 1.18em; letter-spacing: .06em; color: var(--c-gold); }
  .terms dd { line-height: 1.9; }
  .terms__lead { font-size: 1.12em; letter-spacing: .04em; }
  .terms__note { display: block; margin-block-start: .5em; font-family: var(--f-gothic); font-size: .82rem; line-height: 1.85; text-indent: -1em; padding-inline-start: 1em; color: color-mix(in srgb, currentColor 72%, transparent); }

  /* ---------- Audition: 選考の流れ（縦タイムライン） ---------- */
  .steps {
    /* タイムラインの丸番号ぶん左に余白を取るため、本文の実質幅を
       他セクション（.prize＝44rem）に合わせるには 44rem + インデント分 が必要。 */
    inline-size: min(50rem, 100%); margin-inline: auto;
    margin-block-start: clamp(2rem, 4vw, 3rem); display: grid;
  }
  .steps__item {
    position: relative; display: grid; gap: .55rem;
    padding-inline-start: clamp(3.2rem, 7vw, 4.6rem);
    padding-block-end: clamp(2.2rem, 4.5vw, 3.2rem);
  }
  .steps__item:last-child { padding-block-end: 0; }
  /* 番号の下から次のステップへ伸びる縦線 */
  .steps__item:not(:last-child)::before {
    content: ""; position: absolute;
    inset-block-start: calc(clamp(2.2rem, 4.8vw, 3rem) + .5rem); inset-block-end: 0;
    inset-inline-start: calc(clamp(2.2rem, 4.8vw, 3rem) / 2);
    inline-size: 1px; background: color-mix(in srgb, var(--c-gold) 40%, transparent);
  }
  .steps__no {
    position: absolute; inset-block-start: 0; inset-inline-start: 0;
    inline-size: clamp(2.2rem, 4.8vw, 3rem); aspect-ratio: 1;
    display: grid; place-items: center; border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--c-gold) 55%, transparent);
    font-family: var(--f-en); font-size: clamp(.8rem, 1.5vw, .95rem);
    letter-spacing: .04em; color: var(--c-gold-lt);
  }
  .steps__title { font-family: var(--f-jp); font-weight: 600; font-size: clamp(1.1rem, 1.6vw + .5rem, 1.35rem); letter-spacing: .06em; line-height: 1.5; }
  .steps__meta { display: grid; gap: .45em; margin-block-start: .2em; }
  .steps__meta > div { display: grid; gap: .1em .9em; }
  @media (min-width: 30rem) { .steps__meta > div { grid-template-columns: 4.8em 1fr; align-items: baseline; } }
  .steps__meta dt { font-family: var(--f-gothic); font-weight: 600; font-size: 1.05rem; letter-spacing: .1em; color: var(--c-gold-lt); }
  /* PC幅（2カラム化後）は4.8emの左カラムに収まるよう少し小さめに */
  @media (min-width: 30rem) { .steps__meta dt { font-size: 1rem; } }
  .steps__meta dd { font-size: .95rem; line-height: 1.85; letter-spacing: .02em; }
  .steps__note + .steps__note { margin-block-start: .5em; }
  .steps__note { font-family: var(--f-gothic); font-size: .82rem; line-height: 1.85; text-indent: -1em; padding-inline-start: 1em; color: color-mix(in srgb, currentColor 72%, transparent); }

  /* リーダーシップワークショップの補足（選考の流れの末尾） */
  .steps-note {
    inline-size: min(44rem, 100%); margin-inline: auto;
    margin-block-start: clamp(2rem, 4vw, 2.8rem);
    padding: clamp(1.3rem, 3vw, 1.9rem) clamp(1.2rem, 3vw, 2rem);
    border: 2px solid color-mix(in srgb, var(--c-gold) 34%, transparent);
    background: color-mix(in srgb, var(--c-gold) 6%, transparent);
  }
  .steps-note__title {
    font-family: var(--f-jp); font-weight: 600;
    font-size: clamp(1rem, 1.1vw + .6rem, 1.15rem);
    letter-spacing: .06em; line-height: 1.6; color: var(--c-gold-lt);
  }
  .steps-note__body { margin-block-start: .9em; font-size: .95rem; line-height: 1.95; letter-spacing: .02em; }

  /* ---------- Audition: グランプリ特典 ---------- */
  .prize { inline-size: min(44rem, 100%); margin-inline: auto; text-align: start; margin-block-start: clamp(1.4rem, 3vw, 2rem); }
  .prize .feature-list { margin-block-start: 0; }
  .prize__cover { margin-block-start: 1.2em; font-size: .9rem; line-height: 1.8; }
  .prize__cover::before { content: "（"; } .prize__cover::after { content: "）"; }
  .prize__note { margin-block-start: .8em; font-family: var(--f-gothic); font-size: .82rem; line-height: 1.85; text-indent: -1em; padding-inline-start: 1em; color: color-mix(in srgb, currentColor 72%, transparent); }

  /* ---------- Audition: 応募 ---------- */
  .entry { inline-size: min(46rem, 100%); margin-inline: auto; display: grid; justify-items: center; gap: var(--stack-gap); text-align: center; }
  /* .stack と同じ考え方で、グリッドの row-gap 分を差し引いてサイト共通のリズムに揃える */
  .entry > .eyebrow + * { margin-block-start: calc(var(--eyebrow-gap) - var(--stack-gap)); }
  .entry > .entry__copy + .entry__lead { margin-block-start: calc(var(--head-gap) - var(--stack-gap)); }
  .entry > .entry__lead + .btn { margin-block-start: calc(var(--body-btn-gap) - var(--stack-gap)); }
  .entry__copy { font-family: var(--f-jp); font-weight: 500; font-size: clamp(1.15rem, 3vw + .4rem, 2.2rem); line-height: 1.7; letter-spacing: .08em; }
  .entry__lead { color: color-mix(in srgb, var(--c-white) 82%, transparent); }
  .entry > .btn + .entry__terms { margin-block-start: calc(var(--body-btn-gap) - var(--stack-gap)); }
  .entry__terms {
    font-family: var(--f-gothic); font-size: .82rem; line-height: 1.9;
    color: color-mix(in srgb, var(--c-white) 72%, transparent);
  }
  .entry__terms a { text-decoration: underline; text-underline-offset: .3em; text-decoration-color: color-mix(in srgb, var(--c-white) 40%, transparent); }
  .entry__terms a:hover, .entry__terms a:focus-visible { color: var(--c-gold-lt); }
  .entry > .entry__terms + .entry__office { margin-block-start: calc(1.6rem - var(--stack-gap)); }
  .entry__office {
    font-family: var(--f-gothic); font-size: .82rem; line-height: 1.95;
    padding-block-start: 1.4rem;
    border-block-start: 1px solid color-mix(in srgb, var(--c-white) 18%, transparent);
    inline-size: min(30rem, 100%);
    color: color-mix(in srgb, var(--c-white) 72%, transparent);
  }
  .entry__office a { color: var(--c-gold-lt); text-decoration: underline; text-underline-offset: .3em; }
  .entry__hours { display: block; margin-block-start: .25em; font-size: .95em; color: color-mix(in srgb, var(--c-white) 55%, transparent); }

  /* ═══════════════════════════════════════════
     Contact
     ═══════════════════════════════════════════ */

  /* ---------- Contact ---------- */
  .contact-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); }
  @media (min-width: 54rem) { .contact-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
  .contact-types { display: grid; gap: .1rem; border-block-start: 1px solid color-mix(in srgb, var(--c-black) 16%, transparent); }
  .contact-types li { padding-block: 1em; border-block-end: 1px solid color-mix(in srgb, var(--c-black) 16%, transparent); display: flex; align-items: baseline; gap: 1em; }
  .contact-types .en { font-family: var(--f-en); font-size: .82rem; letter-spacing: .18em; text-transform: uppercase; color: var(--c-gold); flex: none; width: 8.5em; }
  /* 連絡手段（公式LINE／メール） */
  .contact-ways { display: grid; gap: clamp(1.6rem, 3.4vw, 2.4rem); }
  .contact-way { padding-block: 1.4em; border-block-start: 1px solid color-mix(in srgb, var(--c-black) 16%, transparent); display: grid; justify-items: start; gap: .9em; }
  .contact-way__label { font-family: var(--f-gothic); font-weight: 600; font-size: .82rem; letter-spacing: .18em; color: var(--c-gold-dk); }
  .contact-way__body { line-height: 1.95; }
  .contact-way__mail { font-family: var(--f-en); font-size: clamp(1.05rem, 2.6vw, 1.25rem); letter-spacing: .06em; text-decoration: underline; text-underline-offset: .3em; }
  .contact-way__mail:hover { color: var(--c-crimson); }
  .contact-way__note { font-family: var(--f-gothic); font-size: .82rem; line-height: 1.85; color: color-mix(in srgb, var(--c-black) 72%, transparent); }
  .contact-way + .form__note, .contact-ways + .form__note { margin-block-start: 1.6rem; }

  .form__note { font-family: var(--f-gothic); font-size: .82rem; line-height: 1.85; color: color-mix(in srgb, var(--c-black) 72%, transparent); text-indent: -1em; padding-inline-start: 1em; }
  .form__note a { text-decoration: underline; text-underline-offset: .25em; }
  .form__note a:hover { color: var(--c-crimson); }

  /* ---------- Googleフォーム埋め込み ---------- */
  /* クロスオリジンのiframeなので中の見た目はこちらから変更できない。
     高さも自動調整されないため、フォームの項目数に合わせて --gform-h を調整する。
     指定が足りないとiframe内に縦スクロールバーが出る。 */
  .gform { --gform-h: 1180px; }
  .gform iframe { display: block; width: 100%; height: var(--gform-h); border: 0; }
  @media (max-width: 40rem) { .gform { --gform-h: 1360px; } }
  /* フォーム設置までの仮表示。iframe を有効化したら削除する */
  .gform__placeholder {
    display: grid; place-items: center; min-height: 16rem; padding: 2rem;
    border: 1px dashed color-mix(in srgb, var(--c-black) 30%, transparent);
    color: color-mix(in srgb, var(--c-black) 55%, transparent); font-size: .9rem; text-align: center;
  }

  /* ═══════════════════════════════════════════
     Privacy / 規約
     ═══════════════════════════════════════════ */

  /* ---------- 規約・ポリシー（privacy / terms） ----------
     長文の法務ページ用。条番号つき見出し＋本文＋箇条書き。
     金は白背景だとコントラストが 3.07:1 しかないため、文字には --c-gold-dk（4.72:1）を使う。 */
  .legal { inline-size: min(48rem, 100%); margin-inline: auto; }
  .legal__lead { line-height: 2.05; }
  .legal__sec { margin-block-start: clamp(2.6rem, 5.4vw, 3.8rem); }
  .legal__sec > * + * { margin-block-start: 1.3em; }
  .legal h2 {
    display: flex; align-items: baseline; gap: .8em;
    font-family: var(--f-jp); font-weight: 600;
    font-size: clamp(1.02rem, 1.2vw + .72rem, 1.28rem);
    line-height: 1.6; letter-spacing: .08em;
    padding-block-end: .75em;
    border-block-end: 1px solid color-mix(in srgb, var(--c-gold) 55%, transparent);
  }
  .legal h2 .no { flex: none; font-family: var(--f-en); font-size: .8em; letter-spacing: .16em; color: var(--c-gold-dk); }
  .legal h3 { font-family: var(--f-jp); font-weight: 600; font-size: 1em; letter-spacing: .06em; color: var(--c-gold-dk); }
  .legal p { line-height: 2.05; }
  .legal ol, .legal ul { display: grid; gap: .75em; }
  .legal ol { counter-reset: legal-item; }
  .legal ol > li { display: flex; gap: .7em; line-height: 1.9; counter-increment: legal-item; }
  .legal ol > li::before { content: "(" counter(legal-item) ")"; flex: none; font-family: var(--f-en); font-size: .92em; color: var(--c-gold-dk); font-variant-numeric: tabular-nums; }
  .legal ul > li { display: flex; gap: .8em; line-height: 1.9; }
  .legal ul > li::before { content: ""; flex: none; width: 5px; height: 5px; margin-block-start: .82em; background: var(--c-gold); rotate: 45deg; }
  /* 項番号を「1.」形式にする（号の「(1)」と区別するため。オーディション参加規約で使用） */
  .legal ol.is-num > li::before { content: counter(legal-item) "."; }
  /* 号を入れ子にする場合。番号列を保ったまま、号を本文の左端に揃えて次の行へ送る */
  .legal ol.is-num > li { display: grid; grid-template-columns: auto 1fr; gap: .7em; align-items: baseline; }
  .legal ol.is-num > li > ol { grid-column: 2; margin-block-start: .85em; }
  .legal__back { margin-block-start: clamp(2.6rem, 5.4vw, 3.8rem); font-family: var(--f-gothic); font-size: .88rem; }
  .legal__back a { text-decoration: underline; text-underline-offset: .3em; }
  .legal__note { font-family: var(--f-gothic); font-size: .82rem; line-height: 1.85; text-indent: -1em; padding-inline-start: 1em; color: color-mix(in srgb, var(--c-black) 72%, transparent); }
  /* ※で始まらない注記用（ぶら下げを解除） */
  .legal__note--plain { text-indent: 0; padding-inline-start: 0; }
  .legal a { text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; }
  .legal a:hover { color: var(--c-crimson); }
  /* 定義リスト（提供先の明細など）。.terms より小ぶりな法務用 */
  .legal__dl { display: grid; gap: .1rem; border-block-start: 1px solid color-mix(in srgb, var(--c-black) 16%, transparent); }
  .legal__dl > div { display: grid; gap: .35em; padding-block: .95em; border-block-end: 1px solid color-mix(in srgb, var(--c-black) 16%, transparent); }
  @media (min-width: 36rem) { .legal__dl > div { grid-template-columns: 11em 1fr; gap: 1.2em; align-items: baseline; } }
  .legal__dl dt { font-family: var(--f-gothic); font-weight: 600; font-size: .92em; letter-spacing: .06em; color: var(--c-gold-dk); }
  .legal__dl dd { line-height: 1.9; }
  .legal__meta {
    margin-block-start: clamp(2.8rem, 5.4vw, 3.8rem);
    padding-block-start: 1.5em;
    border-block-start: 1px solid color-mix(in srgb, var(--c-black) 14%, transparent);
    display: grid; gap: .4em; justify-items: start;
    font-family: var(--f-gothic); font-size: .82rem; letter-spacing: .06em;
    color: color-mix(in srgb, var(--c-black) 72%, transparent);
  }

  /* ═══════════════════════════════════════════
     Footer
     ═══════════════════════════════════════════ */

  /* ---------- Footer ---------- */
  /* 直前が section--dark（黒）のページがあるため、フッターは墨色にして境目を出す */
  .site-footer { background: var(--c-ink); border-block-start: 1px solid color-mix(in srgb, var(--c-gold) 30%, transparent); color: color-mix(in srgb, var(--c-white) 80%, transparent); padding: clamp(3.4rem, 6vw, 5rem) var(--pad-x) clamp(1.6rem, 3vw, 2.4rem); display: grid; justify-items: center; gap: 1.5rem; text-align: center; }
  .site-footer img { width: clamp(3rem, 7vw, 4.2rem); }
  .footer-tag { font-family: var(--f-en); font-size: clamp(.95rem, 2vw, 1.15rem); letter-spacing: .16em; text-transform: uppercase; color: var(--c-gold-lt); }
  .footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1rem, 3vw, 2rem); }
  .footer-nav a { font-family: var(--f-en); font-size: .92rem; letter-spacing: .12em; text-transform: uppercase; }
  .footer-nav a:hover { color: var(--c-gold-lt); }
  .footer-meta { font-size: .82rem; letter-spacing: .06em; color: color-mix(in srgb, var(--c-white) 68%, transparent); line-height: 1.9; }
  .footer-sub { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4em; font-size: .78rem; letter-spacing: .08em; }
  .footer-sub a { text-decoration: underline; text-underline-offset: .3em; text-decoration-color: color-mix(in srgb, var(--c-white) 35%, transparent); }
  .footer-sub a:hover { color: var(--c-gold-lt); }
  .copy { font-family: var(--f-en); font-size: .8rem; letter-spacing: .1em; color: color-mix(in srgb, var(--c-white) 58%, transparent); }

  /* ---------- スマホのフッター ----------
     本文用の行間(1.95)がそのまま効くと1行ずつ浮いて見えるため、行間と文字サイズを詰める。 */
  @media (max-width: 44rem) {
    .site-footer { gap: 1.05rem; padding-block: clamp(2.6rem, 9vw, 3.6rem) 1.5rem; }
    .site-footer img { width: 3.1rem; }
    .footer-tag { font-size: .92rem; letter-spacing: .1em; line-height: 1.75; }
    /* ナビ5項目を 3 + 2 の2段に固定する。
       6分割のグリッドに2列ずつ配置すると、1段目は 1-2 / 3-4 / 5-6、
       2段目は 2-3 / 4-5 に入り、左右対称に中央へ寄る。
       フォントの実測幅に依存しないので、端末が変わっても崩れない。 */
    .footer-nav { display: grid; grid-template-columns: repeat(6, 1fr); inline-size: 100%; gap: .5rem .45rem; }
    /* 枠を付けてタップできることを明示する。高さは WCAG 2.2 推奨の 44px を確保。 */
    .footer-nav a {
      font-size: clamp(.68rem, 3.2vw, .84rem); letter-spacing: .06em; text-align: center;
      display: grid; place-items: center; min-block-size: 44px; padding-inline: .3em;
      border: 1px solid color-mix(in srgb, var(--c-gold) 34%, transparent); border-radius: 999px;
      transition: border-color .3s ease, background .3s ease, color .3s ease;
    }
    .footer-nav a:hover, .footer-nav a:focus-visible {
      border-color: var(--c-gold-lt); background: color-mix(in srgb, var(--c-gold) 12%, transparent);
    }
    .footer-nav a:nth-child(1) { grid-column: 1 / 3; }
    .footer-nav a:nth-child(2) { grid-column: 3 / 5; }
    .footer-nav a:nth-child(3) { grid-column: 5 / 7; }
    .footer-nav a:nth-child(4) { grid-column: 2 / 4; }
    .footer-nav a:nth-child(5) { grid-column: 4 / 6; }
    .footer-meta { font-size: .76rem; line-height: 1.75; }
    .footer-sub { font-size: .76rem; }
    .copy { font-size: .7rem; letter-spacing: .05em; line-height: 1.7; }
  }

}

/* ===========================================
   Utilities
=========================================== */
@layer utilities {
  /* JSが有効なときのみ隠す（no-JS / JS失敗時もコンテンツは必ず表示） */
  html.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s ease, transform .9s ease; }
  html.js .reveal.is-in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1; transform: none; } }
  .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  /* 読みやすさのための最大幅。HTMLに数値を書かず、用途で選ぶ */
  .measure-xs { max-inline-size: 36rem; }
  .measure-sm { max-inline-size: 44rem; }
  .measure-md { max-inline-size: 46rem; }
  .measure-lg { max-inline-size: 48rem; }
  .text-crimson { color: var(--c-crimson); }
  .text-white { color: var(--c-white); }
  .text-gold-lt { color: var(--c-gold-lt); }
  .text-center { text-align: center; }
  .mt-sm { margin-block-start: 1.4rem; }
  .mt-md { margin-block-start: 2.2rem; }
}