/* =====================================================
   御菓子司 此花堂 — style.css
   flat BEM（ネスト記法不使用・発注規約）／@layerで詳細度管理
   演出Lv4・計7種（GSAP/ScrollTrigger自己ホストで駆動・js/main.js側):
   ①スクロールテリング ②歌の墨載せ ③クリップパス出現 ④数字カウンター
   ⑤写真ゆっくりズーム ⑥幕開き導入 ⑦縦パララックス
   CSS側は初期状態（非表示・オフセット）と静的な見た目のみを持ち、
   実際の遷移はGSAPが受け持つ（prefers-reduced-motion・JS未読込時は
   js/main.jsが即時に最終状態へ倒す。下部の@mediaは念のための二重保険）
   ===================================================== */
@layer reset, base, components, sections, utilities;

/* ==== reset ==== */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border-radius: 0; }
  ul, ol { list-style: none; }
  img, svg, video { display: block; max-width: 100%; height: auto; }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
  address { font-style: normal; }
}

/* ==== base: design tokens ==== */
@layer base {
  :root {
    /* 色: 真昼の和紙白×墨×紅梅（設計書導出。テラコッタ回避の青み紅） */
    --color-paper: #FAF8F1;
    --color-paper-deep: #F2EEE2;
    --color-ink: #211E19;         /* 本文 墨（紙上コントラスト約15:1） */
    --color-ink-soft: #5E574C;    /* 薄墨（約7:1） */
    --color-red: #B3304C;         /* 紅梅 */
    --color-red-deep: #8E2038;
    --color-line: #D9D3C3;
    --color-paper-on-ink: #F5F2E9;

    --font-display: "Shippori Mincho B1", "Hiragino Mincho ProN", serif;
    --font-body: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;

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

    --font-size-sm: clamp(.8rem, .76rem + .2vw, .9rem);
    --font-size-base: clamp(.98rem, .92rem + .3vw, 1.08rem);
    --font-size-lg: clamp(1.3rem, 1.1rem + 1vw, 1.8rem);
    --font-size-xl: clamp(1.55rem, 1.2rem + 1.8vw, 2.5rem);
    --font-size-hero: clamp(2.15rem, 1.4rem + 4.2vw, 4.3rem);

    --space-sm: clamp(.8rem, .6rem + .8vw, 1.4rem);
    --space-md: clamp(1.6rem, 1.2rem + 1.6vw, 2.8rem);
    --space-lg: clamp(3.2rem, 2.2rem + 3.4vw, 5.6rem);
    --space-xl: clamp(4.8rem, 3.2rem + 5.5vw, 8.5rem);

    --side-pad: clamp(1.1rem, 5.5vw, 5rem);
    --measure: 42em; /* 日本語の読みやすい行長上限 */
  }

  html { scroll-behavior: smooth; }
  body {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: 1.85;
    background: var(--color-paper);
    color: var(--color-ink);
    -webkit-font-smoothing: antialiased;
  }
  /* ごく薄い和紙テクスチャ（素材=和紙の導出。img-src data: をCSPで許可済み） */
  body::before {
    content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.52 0 0 0 0 0.45 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  :focus-visible { outline: 2px solid var(--color-red); outline-offset: 3px; }
  :focus:not(:focus-visible) { outline: none; }
  main { position: relative; z-index: 1; }
}

/* ==== components ==== */
@layer components {
  .skip-link {
    position: absolute; top: -100%; left: 1rem; z-index: 10000;
    background: var(--color-ink); color: var(--color-paper);
    padding: .8em 1.4em; font-weight: 700; letter-spacing: .1em;
  }
  .skip-link:focus { top: 1rem; }

  .btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 48px; padding: .9em 1.8em;
    font-weight: 700; font-size: var(--font-size-sm); letter-spacing: .16em;
    border: 1px solid var(--color-ink); color: var(--color-ink); background: transparent;
    transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  }
  .btn:hover { background: var(--color-ink); color: var(--color-paper); }
  .btn--primary { background: var(--color-red); border-color: var(--color-red); color: #fff; }
  .btn--primary:hover { background: var(--color-red-deep); border-color: var(--color-red-deep); color: #fff; }
  .btn--ghost-light { border-color: var(--color-paper-on-ink); color: var(--color-paper-on-ink); }
  .btn--ghost-light:hover { background: var(--color-paper-on-ink); color: var(--color-ink); }

  .eyebrow {
    display: flex; align-items: center; gap: 1em;
    font-size: var(--font-size-sm); font-weight: 500; letter-spacing: .3em;
    color: var(--color-ink-soft); margin-bottom: 2.4em;
  }
  .eyebrow::before { content: ""; width: 2.4em; height: 1px; background: var(--color-red); flex: none; }

  /* 写真・動画スロット（CLS防止にaspect-ratio固定。中身はimg/parallaxまたは組み込み前は空） */
  .media-slot {
    position: relative; background: var(--color-paper-deep);
    border: 1px solid var(--color-line); aspect-ratio: 4 / 3;
    overflow: hidden;
  }
  .media-slot--wide { aspect-ratio: 16 / 9; }

  /* ⑤写真ゆっくりズーム: hover（常時）＋初出現時（GSAP・モバイル含め全端末で視認可） */
  .media-zoom img, .media-zoom video { transition: transform 1.6s var(--ease); }
  .media-zoom:hover img, .media-zoom:hover video { transform: scale(1.045); }

  /* ③クリップパス出現・行スクラブの初期状態（遷移そのものはGSAP ScrollTriggerが駆動） */
  .reveal:not(.statement--lines) { clip-path: inset(0 0 101% 0); }
}

/* ==== sections ==== */
@layer sections {

  /* -- header -- */
  .site-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: clamp(.85rem, 2.6vw, 1.3rem) var(--side-pad);
    transition: background-color .4s var(--ease), box-shadow .4s var(--ease);
  }
  .site-header.is-scrolled {
    background: color-mix(in srgb, var(--color-paper), transparent 6%);
    box-shadow: 0 1px 0 var(--color-line);
  }
  .brand {
    display: flex; align-items: center; gap: .6em;
    font-family: var(--font-display); font-weight: 700;
    font-size: 1.04rem; letter-spacing: .13em;
  }
  .brand .mon { width: 1.65em; height: 1.65em; color: var(--color-red); }
  .site-nav { display: none; }
  .site-nav__list { display: flex; gap: 2.1em; align-items: center; }
  .site-nav__link {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 .15em;
    font-size: .84rem; font-weight: 500; letter-spacing: .16em;
    border-bottom: 1px solid transparent;
    transition: border-color .3s var(--ease);
  }
  .site-nav__link:hover { border-bottom-color: var(--color-ink); }
  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 7px;
    min-width: 48px; min-height: 48px; padding: 12px; align-items: center;
  }
  .nav-toggle__bar { width: 24px; height: 2px; background: var(--color-ink); transition: transform .3s var(--ease), opacity .3s var(--ease); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(9px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
  .mobile-nav {
    position: fixed; inset: 0; z-index: 90; background: var(--color-paper);
    display: grid; place-items: center; text-align: center;
    opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s var(--ease);
  }
  .mobile-nav.is-open { opacity: 1; visibility: visible; }
  .mobile-nav__list { display: grid; gap: 1.6em; }
  .mobile-nav__link {
    display: inline-flex; min-height: 48px; align-items: center; justify-content: center;
    font-family: var(--font-display); font-size: 1.4rem; letter-spacing: .18em; padding: 0 1em;
  }
  @media (min-width: 768px) {
    .site-nav { display: block; }
    .nav-toggle, .mobile-nav { display: none; }
  }

  /* -- 01 hero -- */
  /* 低いビューポート（ノートPCの非最大化ウィンドウ等）でヒーロー文言が固定ヘッダーと衝突しないよう下限を確保 */
  .hero { position: relative; min-height: max(100dvh, 48rem); display: flex; align-items: flex-end; overflow: hidden; }
  @supports not (min-height: 100dvh) { .hero { min-height: max(100vh, 48rem); } }

  /* ヒーロー全面写真（images/hero-shusse-yokan.webp 組み込み時に .hero__bg を追加すると有効化） */
  .hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
  .hero__bg img { width: 100%; height: 100%; object-fit: cover; }
  .hero__bg::after {
    content: ""; position: absolute; inset: 0;
    background:
      linear-gradient(90deg, rgba(250, 248, 241, .84) 0%, rgba(250, 248, 241, .38) 46%, rgba(250, 248, 241, 0) 72%),
      linear-gradient(0deg, rgba(250, 248, 241, .78) 0%, rgba(250, 248, 241, 0) 34%);
  }
  .hero__poem { z-index: 2; }
  .hero__scrollcue { z-index: 2; }

  /* ②歌の墨載せ（signature） */
  .hero__poem {
    position: absolute; top: clamp(5.2rem, 13vh, 8rem); right: clamp(1.1rem, 6vw, 5rem);
    writing-mode: vertical-rl; font-family: var(--font-display); font-weight: 600;
    font-size: clamp(1.28rem, 3.9vw, 2.15rem); letter-spacing: .22em; line-height: 1;
  }
  .poem-line { display: block; }
  .poem-line + .poem-line { margin-block-start: 1.05em; }
  /* 初期状態のみ（1文字ずつの出現はGSAPのstaggerで駆動・js/main.js） */
  .ch { opacity: 0; filter: blur(7px); }
  .ch--soft { color: var(--color-ink-soft); }

  .hero__main {
    position: relative; z-index: 2; max-width: 46em;
    padding: 0 clamp(4.6rem, 24vw, 11rem) clamp(4.6rem, 11vh, 7rem) var(--side-pad);
  }
  .hero__eyebrow {
    display: flex; align-items: center; gap: 1em;
    font-size: var(--font-size-sm); font-weight: 500; letter-spacing: .3em;
    color: var(--color-ink-soft); margin-bottom: 1.7em;
  }
  .hero__eyebrow::before { content: ""; width: 2.4em; height: 1px; background: var(--color-red); flex: none; }
  .hero__title {
    font-family: var(--font-display); font-weight: 700;
    font-size: var(--font-size-hero); line-height: 1.32; letter-spacing: .05em;
    margin-bottom: .68em;
  }
  .hero__sub { display: flex; align-items: center; gap: .8em; margin-bottom: 2.3em; }
  .seal { flex: none; width: 2em; height: 2em; background: var(--color-red); color: #fff; display: grid; place-items: center; }
  .seal svg { width: 1.25em; height: 1.25em; }
  .hero__sub-copy { font-weight: 500; letter-spacing: .12em; font-size: clamp(.95rem, 2.6vw, 1.15rem); }
  .hero__cta { display: flex; flex-wrap: wrap; gap: .8em; margin-bottom: 3em; }

  .hero__scrollcue {
    position: absolute; left: 50%; bottom: 1.1rem; transform: translateX(-50%);
    display: flex; align-items: center; gap: .8em;
    writing-mode: vertical-rl; font-size: .66rem; letter-spacing: .34em; color: var(--color-ink-soft);
  }
  .hero__scrollcue::after { content: ""; width: 1px; height: 3.2em; background: var(--color-ink-soft); animation: cue 2.6s var(--ease) infinite; }
  @keyframes cue {
    0% { transform: scaleY(0); transform-origin: top; }
    55% { transform: scaleY(1); transform-origin: top; }
    56% { transform-origin: bottom; }
    100% { transform: scaleY(0); transform-origin: bottom; }
  }

  /* -- 共通セクション骨格 -- */
  .section { padding: var(--space-xl) var(--side-pad); }
  .section--deep { background: var(--color-paper-deep); }
  .section--below { content-visibility: auto; contain-intrinsic-size: auto 640px; }
  .section__inner { max-width: 72rem; margin-inline: auto; }
  .section__inner--narrow { max-width: var(--measure); margin-inline: auto; }
  .statement {
    font-family: var(--font-display); font-weight: 600;
    font-size: var(--font-size-xl); line-height: 1.65; letter-spacing: .05em;
    margin-bottom: 1.1em;
  }
  .lead { max-width: var(--measure); }
  .lead + .lead { margin-top: 1.4em; }

  /* -- 03 沿革 -- */
  .stats {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1em;
    margin-bottom: 3.6em; border-block: 1px solid var(--color-line); padding-block: 1.7em;
  }
  .stat { display: flex; flex-direction: column; gap: .15em; }
  .stat + .stat { border-left: 1px solid var(--color-line); padding-left: 1.1em; }
  .stat__num {
    font-family: var(--font-body); font-weight: 700; font-variant-numeric: tabular-nums;
    font-size: clamp(2rem, 7.5vw, 5rem); line-height: 1.05; letter-spacing: .01em;
  }
  .stat__unit { font-family: var(--font-display); font-size: .4em; margin-left: .16em; letter-spacing: .1em; color: var(--color-red); }
  .stat__label { font-size: .78rem; letter-spacing: .22em; color: var(--color-ink-soft); }
  .tl { border-left: 1px solid var(--color-line); padding-left: clamp(1.4rem, 4vw, 2.6rem); display: grid; gap: 3em; }
  .tl__item { position: relative; }
  .tl__item::before {
    content: ""; position: absolute; top: .62em;
    left: calc(-1 * clamp(1.4rem, 4vw, 2.6rem) - 5px);
    width: 9px; height: 9px; background: var(--color-red);
  }
  .tl__era { font-size: .8rem; font-weight: 500; letter-spacing: .24em; color: var(--color-ink-soft); margin-bottom: .7em; }
  .tl__title { font-family: var(--font-display); font-weight: 700; font-size: var(--font-size-lg); letter-spacing: .06em; margin-bottom: .65em; }
  .tl__text { max-width: 38em; }

  /* -- 04 職人の工程 -- */
  .craft { display: grid; gap: var(--space-lg); }
  .craft__step { display: grid; gap: var(--space-sm); align-items: center; }
  .craft__num {
    font-family: var(--font-display); font-weight: 700; color: var(--color-red);
    font-size: 1rem; letter-spacing: .3em; margin-bottom: .8em;
  }
  .craft__title { font-family: var(--font-display); font-weight: 700; font-size: var(--font-size-lg); letter-spacing: .08em; margin-bottom: .55em; }
  .craft__text { max-width: 34em; }
  .craft__media { aspect-ratio: 3 / 2; margin-inline: calc(-1 * var(--side-pad)); }
  @media (min-width: 768px) {
    .craft__step { grid-template-columns: 2fr 3fr; gap: var(--space-md); }
    .craft__media { margin-inline: 0; }
    /* 偶数工程はメディアを左に（左右対称の単調を崩す） */
    .craft__step:nth-child(even) .craft__media { order: -1; }
  }

  /* -- 05 商品ダイジェスト（マガジン可変） -- */
  .goods { display: grid; gap: var(--space-md); grid-template-columns: 1fr; }
  .goods__item--lead { display: grid; gap: var(--space-sm); }
  .goods__name { font-family: var(--font-display); font-weight: 700; font-size: var(--font-size-lg); letter-spacing: .08em; margin-bottom: .4em; }
  .goods__copy { max-width: 30em; margin-bottom: .7em; }
  .goods__price { font-size: var(--font-size-sm); letter-spacing: .14em; color: var(--color-ink-soft); }
  .goods__name-link { border-bottom: 1px solid transparent; transition: border-color .3s var(--ease); }
  .goods__name-link:hover { border-bottom-color: var(--color-ink); }
  .goods-cta { margin-top: var(--space-md); }
  @media (min-width: 768px) {
    .goods { grid-template-columns: repeat(2, 1fr); }
    .goods__item--lead { grid-column: 1 / -1; grid-template-columns: 3fr 2fr; align-items: end; gap: var(--space-md); }
  }

  /* -- 06 出世羊羹の指南 -- */
  .rank { display: grid; gap: var(--space-md); }
  .rank__card { border: 1px solid var(--color-line); background: var(--color-paper); padding: var(--space-md); position: relative; }
  .rank__card--mid { border-color: var(--color-ink); }
  .rank__tag {
    position: absolute; top: 0; right: 0; transform: translateY(-50%);
    background: var(--color-red); color: #fff; font-size: .7rem; font-weight: 700;
    letter-spacing: .2em; padding: .45em .9em;
  }
  .rank__name { font-family: var(--font-display); font-weight: 700; font-size: var(--font-size-lg); letter-spacing: .1em; }
  .rank__price { font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .06em; margin: .3em 0 1.1em; }
  .rank__list { display: grid; gap: .9em; }
  .rank__dt { font-size: .74rem; letter-spacing: .24em; color: var(--color-ink-soft); margin-bottom: .2em; }
  .rank__dd { font-size: var(--font-size-sm); line-height: 1.75; }
  .rank__note { margin-top: var(--space-md); font-size: var(--font-size-sm); color: var(--color-ink-soft); max-width: var(--measure); }
  @media (min-width: 768px) { .rank { grid-template-columns: repeat(3, 1fr); align-items: start; } .rank__card--mid { margin-top: -1.2rem; } }

  /* -- 07 御用達 -- */
  .clients { display: flex; flex-wrap: wrap; gap: 1.4em 2.8em; align-items: baseline; margin-bottom: .9em; }
  .clients__name { font-family: var(--font-display); font-weight: 600; letter-spacing: .2em; font-size: clamp(.86rem, 2vw, 1rem); color: var(--color-ink-soft); }
  .clients-note { font-size: .7rem; letter-spacing: .16em; color: var(--color-ink-soft); margin-bottom: var(--space-lg); }
  .voices { display: grid; gap: var(--space-md); }
  .voice { border-left: 2px solid var(--color-red); padding-left: 1.4em; }
  .voice__quote { font-family: var(--font-display); font-size: clamp(1.02rem, 2.6vw, 1.25rem); line-height: 2; letter-spacing: .04em; margin-bottom: .6em; }
  .voice__by { font-size: .78rem; letter-spacing: .2em; color: var(--color-ink-soft); }
  @media (min-width: 768px) { .voices { grid-template-columns: 1fr 1fr; gap: var(--space-lg); } }

  /* -- 08 店舗への誘い -- */
  .shop { display: grid; gap: var(--space-md); align-items: center; }
  .shop__hours { display: grid; gap: .5em; margin-top: 1.4em; }
  .shop__hours-row { display: flex; gap: 1.6em; font-size: var(--font-size-sm); letter-spacing: .1em; }
  .shop__hours-day { color: var(--color-ink-soft); min-width: 6.5em; }
  @media (min-width: 768px) { .shop { grid-template-columns: 2fr 3fr; gap: var(--space-lg); } }

  /* -- 09 結びCTA（フルワイド2択） -- */
  .cta-band { background: var(--color-ink); color: var(--color-paper-on-ink); padding: var(--space-xl) var(--side-pad); }
  .cta-band__inner { max-width: 72rem; margin-inline: auto; }
  .cta-band__title {
    font-family: var(--font-display); font-weight: 700;
    font-size: var(--font-size-xl); letter-spacing: .06em; line-height: 1.5; margin-bottom: .6em;
  }
  .cta-band__text { color: color-mix(in srgb, var(--color-paper-on-ink), transparent 18%); margin-bottom: 2.2em; max-width: var(--measure); }
  .cta-band__actions { display: flex; flex-wrap: wrap; gap: .9em; }

  /* -- footer -- */
  .site-footer { border-top: 1px solid var(--color-line); padding: var(--space-lg) var(--side-pad) var(--space-md); position: relative; z-index: 1; }
  .site-footer__grid { max-width: 72rem; margin-inline: auto; display: grid; gap: var(--space-md); }
  .site-footer__brand { display: flex; align-items: center; gap: .6em; font-family: var(--font-display); font-weight: 700; letter-spacing: .13em; }
  .site-footer__brand .mon { width: 1.6em; height: 1.6em; color: var(--color-red); }
  .site-footer__addr { margin-top: .9em; font-size: var(--font-size-sm); color: var(--color-ink-soft); line-height: 1.9; }
  .site-footer__heading { font-size: .74rem; letter-spacing: .26em; color: var(--color-ink-soft); margin-bottom: 1em; }
  .site-footer__list { display: grid; gap: .55em; }
  .site-footer__link {
    display: inline-flex; align-items: center; min-height: 44px;
    font-size: var(--font-size-sm); letter-spacing: .1em;
    border-bottom: 1px solid transparent; transition: border-color .3s var(--ease);
  }
  .site-footer__link:hover { border-bottom-color: var(--color-ink); }
  .site-footer__soon { font-size: var(--font-size-sm); letter-spacing: .1em; color: var(--color-ink-soft); }
  .site-footer__legal { max-width: 72rem; margin: var(--space-md) auto 0; padding-top: var(--space-sm); border-top: 1px solid var(--color-line); }
  .demo-note { font-size: .73rem; letter-spacing: .12em; color: var(--color-ink-soft); }
  .copyright { margin-top: .5em; font-size: .73rem; letter-spacing: .12em; color: var(--color-ink-soft); }
  @media (min-width: 768px) { .site-footer__grid { grid-template-columns: 2fr 1fr 1fr; } }

  /* -- Cookie同意（K28準拠・下部固定でCLS回避） -- */
  .cookie-consent {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999;
    background: var(--color-paper); border-top: 1px solid var(--color-line);
    box-shadow: 0 -4px 20px rgba(33, 30, 25, .08);
    padding: var(--space-sm) var(--side-pad);
    transform: translateY(105%); transition: transform .4s var(--ease);
  }
  .cookie-consent.is-visible { transform: translateY(0); }
  .cookie-consent__inner { max-width: 72rem; margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 1.2em; }
  .cookie-consent__text { flex: 1; min-width: 220px; font-size: .82rem; line-height: 1.7; }
  .cookie-consent__actions { display: flex; gap: .6em; flex-wrap: wrap; }
  .cookie-consent__btn { min-height: 44px; padding: .7em 1.4em; font-size: .82rem; font-weight: 700; letter-spacing: .1em; border: 1px solid var(--color-ink); }
  .cookie-consent__btn--accept { background: var(--color-ink); color: var(--color-paper); }
  .cookie-consent__btn--accept:hover { background: var(--color-red-deep); border-color: var(--color-red-deep); }
  .cookie-consent__btn--reject { background: transparent; color: var(--color-ink); }
  .cookie-consent__btn--reject:hover { background: var(--color-paper-deep); }

  /* -- ⑥幕開き導入（Lv4・1.2秒以内に完了）: 初期状態のみ。遷移はGSAPタイムラインで駆動 -- */
  .curtain {
    position: fixed; inset: 0; z-index: 300; pointer-events: none;
    background: var(--color-paper-deep);
    display: grid; place-items: center;
  }
  .curtain .mon { width: 54px; height: 54px; color: var(--color-red); opacity: 0; }

  /* -- ヒーロー導入の段差（幕に続いて要素が起きる）: 初期状態のみ -- */
  .hero__main > * { opacity: 0; transform: translateY(14px); }

  /* -- ⑦縦パララックス: 初期状態のみ（動きはGSAP ScrollTrigger・scrub） -- */
  .media-slot .parallax { position: absolute; inset: -9% 0; }
  .media-slot .parallax img, .media-slot .parallax video { width: 100%; height: 100%; object-fit: cover; }

  /* -- 理念の大コピー: 行単位スクラブ（初期状態のみ・遷移はGSAP） -- */
  .statement--lines .line { display: block; clip-path: inset(0 0 101% 0); }
}

/* ==== utilities ==== */
@layer utilities {
  .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
}

/* ==== アクセシビリティ横断（K12正典） ==== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .ch { opacity: 1 !important; filter: none !important; animation: none !important; }
  .reveal { animation: none !important; clip-path: none !important; transition: none !important; }
  .hero__scrollcue::after { animation: none !important; }
  .curtain { display: none !important; }
  .hero__main > * { opacity: 1 !important; transform: none !important; animation: none !important; }
  .statement--lines .line { animation: none !important; clip-path: none !important; transition: none !important; }
  .media-slot .parallax { animation: none !important; transform: none !important; }
}
@media (prefers-contrast: more) {
  :root { --color-ink-soft: #443E33; --color-line: #A79F8A; }
  .btn, .rank__card, .media-slot, .cookie-consent__btn { border-width: 2px; }
}