@charset "UTF-8";
/* ==========================================================================
   studio うさぎの隠れ家 — 出演者募集サイト
   レイアウト：3カラム固定（左ロゴ／中央スクロール／右ナビ）
   コンセプト：深夜のスタジオ。ロゴの「三日月と眠るうさぎ」に合わせ、
               墨紺の地に真鍮色の光。うさぎのしっぽ（クリーム×桜ピンク×
               丸ゴシック）とは配色・書体・質感のすべてを分けている。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design Tokens
   -------------------------------------------------------------------------- */
:root {
  /* --- 地（夜） --- */
  --ink:        #10111A;
  --ink-2:      #171926;
  --ink-3:      #212433;

  /* --- 紙（中央カラムだけ明るくする） --- */
  --paper:      #F6F3ED;
  --paper-2:    #EDE8DE;
  --paper-line: #DCD4C6;

  /* --- 光（ロゴの月と星） --- */
  --gold:       #C6A86B;
  --gold-2:     #E2D0A6;
  --gold-dim:   #8A7647;

  /* --- 差し色 --- */
  --rose:       #C2607F;
  --rose-pale:  #F3E3E8;

  /* --- 文字 --- */
  --on-ink:       #E9E5DC;
  --on-ink-muted: #9A96A3;
  --on-paper:     #1A1C26;
  --on-paper-mut: #5E5A63;

  --focus: var(--gold);

  /* --- Type --- */
  --f-mincho: "Zen Old Mincho", "Yu Mincho", serif;
  --f-sans:   "Noto Sans JP", sans-serif;
  --f-en:     "Cormorant Garamond", "Zen Old Mincho", serif;

  /* --- Space --- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px;

  --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-pill: 999px;

  --e-out: cubic-bezier(.22, 1, .36, 1);
  --t-fast: .2s;
  --t-base: .4s;

  /* --- 3カラムの寸法 ---------------------------------------------------
     中央600pxを基準に、左右を calc で対称に置く。
     参考実装は left:65.5% の固定値だったが、画面幅によって間延びする。 */
  --center-w:  600px;
  --side-w:    300px;
  --side-gap:  clamp(24px, 3vw, 64px);
}

/* --------------------------------------------------------------------------
   2. Reset & Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--on-ink);
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 2;
  letter-spacing: .04em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, iframe { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--gold); color: var(--ink); }

/* 日本語の改行制御（文節単位で折り返す） */
h1, h2, h3, h4, p, dt, dd, li, summary, label {
  word-break: auto-phrase;
  line-break: strict;
}
p, dd, li { text-wrap: pretty; }
.sp-br { display: none; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--gold); color: var(--ink);
  padding: var(--sp-3) var(--sp-5);
}
.skip:focus { left: 0; }

.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;
}

/* 夜空の粒子。地色ののっぺり感を消す */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .5;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(226,208,166,.55) 50%, transparent 50%),
    radial-gradient(1px 1px at 78% 9%,  rgba(226,208,166,.40) 50%, transparent 50%),
    radial-gradient(1px 1px at 32% 62%, rgba(226,208,166,.35) 50%, transparent 50%),
    radial-gradient(1px 1px at 88% 74%, rgba(226,208,166,.45) 50%, transparent 50%),
    radial-gradient(1px 1px at 55% 88%, rgba(226,208,166,.30) 50%, transparent 50%),
    radial-gradient(1400px 700px at 50% -10%, rgba(198,168,107,.10), transparent 65%);
}

/* --------------------------------------------------------------------------
   3. 3カラムレイアウト

   中央だけがスクロールして見えるのは、左右を position:fixed にしているため。
   ページ自体は通常どおりスクロールし、固定した左右が動かないだけ。
   -------------------------------------------------------------------------- */
.col-left,
.col-right {
  position: fixed;
  top: 0;
  height: 100vh;
  width: var(--side-w);
  z-index: 20;
  display: flex;
  flex-direction: column;
}
.col-left  { left: calc(50% - var(--center-w) / 2 - var(--side-gap) - var(--side-w)); }
.col-right { left: calc(50% + var(--center-w) / 2 + var(--side-gap)); }

.col-main {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: var(--center-w);
  margin-inline: auto;
  padding-block: var(--sp-7) var(--sp-9);
}

/* --- 左：ロゴ --- */
.col-left { align-items: center; justify-content: center; text-align: center; }

.brand { display: block; }
.brand__mark {
  width: clamp(150px, 15vw, 216px);
  margin-inline: auto;
  border-radius: 50%;
  /* ロゴPNGに生成り背景が付いているため、丸く抜いて「月のメダル」として見せる */
  box-shadow: 0 0 0 1px rgba(198,168,107,.35),
              0 24px 60px -24px rgba(0,0,0,.9),
              0 0 80px -30px rgba(198,168,107,.5);
  transition: transform var(--t-base) var(--e-out),
              box-shadow var(--t-base) var(--e-out);
}
.brand:hover .brand__mark {
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px rgba(198,168,107,.6),
              0 30px 70px -24px rgba(0,0,0,.9),
              0 0 110px -30px rgba(198,168,107,.7);
}
.brand__tag {
  margin-top: var(--sp-6);
  font-family: var(--f-en);
  font-size: 12px;
  font-style: italic;
  letter-spacing: .28em;
  color: var(--gold);
}
.brand__cap {
  margin-top: var(--sp-3);
  font-family: var(--f-mincho);
  font-size: 13px;
  line-height: 2.2;
  letter-spacing: .16em;
  color: var(--on-ink-muted);
}

/* --- 右：ナビ --- */
.col-right { align-items: flex-start; justify-content: center; }

.nav { width: 100%; }
.nav__item {
  display: block;
  padding-block: var(--sp-3);
  padding-left: var(--sp-5);
  border-left: 1px solid var(--ink-3);
  transition: border-color var(--t-base) var(--e-out),
              padding-left var(--t-base) var(--e-out);
}
.nav__en {
  display: block;
  font-family: var(--f-en);
  font-size: 17px;
  letter-spacing: .16em;
  color: var(--on-ink);
  transition: color var(--t-fast) linear;
}
.nav__ja {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: .14em;
  color: var(--on-ink-muted);
  transition: color var(--t-fast) linear;
}
.nav__item:hover,
.nav__item.is-active { border-left-color: var(--gold); padding-left: var(--sp-6); }
.nav__item:hover .nav__en,
.nav__item.is-active .nav__en { color: var(--gold); }
.nav__item.is-active .nav__ja { color: var(--gold-dim); }

.nav__entry {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
  margin-left: 1px;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--gold);
  border-radius: var(--r-pill);
  font-family: var(--f-mincho);
  font-size: 14px;
  letter-spacing: .16em;
  color: var(--gold);
  transition: background var(--t-fast) linear, color var(--t-fast) linear;
}
.nav__entry:hover { background: var(--gold); color: var(--ink); }

/* --------------------------------------------------------------------------
   4. 中央カラムの共通パーツ
   -------------------------------------------------------------------------- */
.sheet {
  background: var(--paper);
  color: var(--on-paper);
  border-radius: var(--r-lg);
  padding: clamp(28px, 5vw, 52px) clamp(22px, 4.5vw, 48px);
  box-shadow: 0 30px 70px -40px rgba(0,0,0,.9);
}
.sheet + .sheet { margin-top: clamp(20px, 3vw, 32px); }
.sheet--ink {
  background: var(--ink-2);
  color: var(--on-ink);
  border: 1px solid var(--ink-3);
}

.head { margin-bottom: clamp(24px, 4vw, 36px); }
.head__en {
  display: block;
  font-family: var(--f-en);
  font-size: clamp(28px, 5.6vw, 40px);
  font-style: italic;
  line-height: 1.1;
  letter-spacing: .04em;
  color: var(--gold-dim);
}
.head__ja {
  margin-top: var(--sp-2);
  font-family: var(--f-mincho);
  font-size: clamp(17px, 3.2vw, 22px);
  line-height: 1.7;
  letter-spacing: .1em;
  color: var(--on-paper);
}
.sheet--ink .head__en { color: var(--gold); }
.sheet--ink .head__ja { color: var(--on-ink); }

.rule { width: 40px; height: 1px; background: var(--gold); margin: var(--sp-5) 0; }

.txt {
  font-weight: 300;
  font-size: 14px;
  line-height: 2.15;
  color: var(--on-paper-mut);
}
.txt + .txt { margin-top: 1.5em; }
.txt strong { font-weight: 500; color: var(--on-paper); }
.sheet--ink .txt { color: var(--on-ink-muted); }
.sheet--ink .txt strong { color: var(--on-ink); }

/* --- ボタン --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: 58px;
  padding: var(--sp-3) var(--sp-6);
  border: 1px solid var(--gold);
  border-radius: var(--r-pill);
  background: var(--gold);
  color: var(--ink);
  font-family: var(--f-mincho);
  font-size: 15px;
  letter-spacing: .16em;
  cursor: pointer;
  transition: background var(--t-fast) linear,
              color var(--t-fast) linear,
              transform var(--t-fast) var(--e-out);
}
.btn:hover { background: transparent; color: var(--gold); transform: translateY(-2px); }
.btn[disabled] { opacity: .4; cursor: not-allowed; transform: none; }
.btn--ghost { background: transparent; color: var(--gold); }
.btn--ghost:hover { background: var(--gold); color: var(--ink); }
.btn--onpaper { border-color: var(--on-paper); background: var(--on-paper); color: var(--paper); }
.btn--onpaper:hover { background: transparent; color: var(--on-paper); }

/* --------------------------------------------------------------------------
   5. メインビジュアル
   -------------------------------------------------------------------------- */
.mv {
  position: relative;
  padding-block: clamp(40px, 9vw, 96px) clamp(32px, 6vw, 64px);
  text-align: center;
}
/* ファーストビューの動画。
   aspect-ratio は指定しない。動画本来の比率のまま表示するので、
   素材を差し替えても枠が崩れない。                                   */
.mv__movie {
  position: relative;
  margin: 0 0 clamp(32px, 6vw, 56px);
  border: 1px solid var(--ink-3);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 30px 70px -40px #000, 0 0 90px -50px rgba(198,168,107,.4);
}
.mv__movie video {
  width: 100%;
  height: auto;
  display: block;
  /* 読み込み中の素の <video> は黒く抜ける。地色を敷いておけば、
     ポスター画像が無くても「黒い箱」が出ない。               */
  background: var(--ink);
}
/* 下端だけ地色に溶かして、四角い箱として浮かないようにする */
.mv__movie::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 38%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(16,17,26,.75));
}

.mv__moon {
  width: clamp(120px, 26vw, 168px);
  margin: 0 auto clamp(28px, 5vw, 44px);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(198,168,107,.3), 0 0 90px -20px rgba(198,168,107,.55);
}
.mv__ttl {
  font-family: var(--f-mincho);
  font-weight: 500;
  font-size: clamp(27px, 6.4vw, 42px);
  line-height: 1.9;
  letter-spacing: .12em;
  color: var(--on-ink);
}
.mv__ttl em { font-style: normal; color: var(--gold); }
.mv__en {
  margin-top: var(--sp-5);
  font-family: var(--f-en);
  font-style: italic;
  font-size: clamp(12px, 2.4vw, 14px);
  letter-spacing: .3em;
  color: var(--gold-dim);
}
.mv__scroll {
  margin-top: clamp(32px, 6vw, 56px);
  font-family: var(--f-en);
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--on-ink-muted);
}
.mv__scroll::after {
  content: "";
  display: block;
  width: 1px; height: 48px;
  margin: var(--sp-3) auto 0;
  background: linear-gradient(var(--gold), transparent);
}

/* --------------------------------------------------------------------------
   6. 理念（クライアントメッセージ）
   -------------------------------------------------------------------------- */
.creed { text-align: center; }
.creed__line {
  font-family: var(--f-mincho);
  font-size: clamp(15px, 2.8vw, 18px);
  line-height: 2.6;
  letter-spacing: .1em;
  color: var(--on-ink);
}
.creed__line + .creed__line { margin-top: 1.8em; }
.creed__line--dim { color: var(--on-ink-muted); font-size: clamp(13px, 2.4vw, 15px); }
.creed__key {
  margin-top: 2em;
  padding: var(--sp-6) var(--sp-5);
  border-block: 1px solid var(--ink-3);
  font-family: var(--f-mincho);
  font-size: clamp(16px, 3.2vw, 21px);
  line-height: 2.2;
  letter-spacing: .12em;
  color: var(--gold);
}

/* --------------------------------------------------------------------------
   7. 約束（安全・尊重）
   -------------------------------------------------------------------------- */
.promise { display: grid; gap: var(--sp-5); }
.promise__item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
}
.promise__no {
  font-family: var(--f-en);
  font-style: italic;
  font-size: 22px;
  line-height: 1.4;
  color: var(--gold-dim);
}
.promise__ttl {
  font-family: var(--f-mincho);
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: .06em;
  color: var(--on-paper);
}
.promise__txt {
  margin-top: var(--sp-2);
  font-weight: 300;
  font-size: 13.5px;
  line-height: 2.05;
  color: var(--on-paper-mut);
}

/* --------------------------------------------------------------------------
   8. 応募の流れ（AV新法の待機期間を構造として見せる）
   -------------------------------------------------------------------------- */
.flow { display: grid; gap: 0; }
.flow__step {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: var(--sp-4);
  padding-bottom: var(--sp-6);
}
.flow__no {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  font-family: var(--f-en);
  font-size: 16px;
  color: var(--gold-dim);
}
/* ステップ同士を縦線でつなぐ */
.flow__step:not(:last-child) .flow__no::after {
  content: "";
  position: absolute;
  top: 46px; left: 50%;
  width: 1px; height: calc(100% + var(--sp-6) - 4px);
  background: var(--paper-line);
  transform: translateX(-50%);
}
.flow__ttl {
  padding-top: 9px;
  font-family: var(--f-mincho);
  font-size: 16px;
  letter-spacing: .06em;
  color: var(--on-paper);
}
.flow__txt {
  margin-top: var(--sp-2);
  font-weight: 300;
  font-size: 13.5px;
  line-height: 2.05;
  color: var(--on-paper-mut);
}

/* 法定の待機期間。飛ばせない期間であることを視覚的に示す */
.wait {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-6) 54px;
  padding: var(--sp-4) var(--sp-5);
  background: var(--paper-2);
  border-left: 2px solid var(--rose);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.wait__label {
  flex: none;
  font-family: var(--f-mincho);
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--rose);
}
.wait__txt {
  font-weight: 300;
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--on-paper-mut);
}

.law-note {
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  background: var(--paper-2);
  border-radius: var(--r-md);
  font-weight: 300;
  font-size: 12.5px;
  line-height: 2;
  color: var(--on-paper-mut);
}
.law-note strong { font-weight: 500; color: var(--on-paper); }

/* --------------------------------------------------------------------------
   9. 募集要項
   -------------------------------------------------------------------------- */
.dl { display: grid; grid-template-columns: 130px minmax(0, 1fr); }
.dl > dt, .dl > dd { padding-block: var(--sp-4); border-top: 1px solid var(--paper-line); }
.dl > dt:first-of-type, .dl > dt:first-of-type + dd { border-top: 0; }
.dl > dt {
  font-family: var(--f-mincho);
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--on-paper);
}
.dl > dd { font-weight: 300; font-size: 13.5px; line-height: 2; color: var(--on-paper-mut); }
.dl ul li { position: relative; padding-left: 1.1em; }
.dl ul li::before {
  content: ""; position: absolute; left: 0; top: .85em;
  width: 4px; height: 4px; border-radius: 50%; background: var(--gold);
}

.todo {
  display: inline-block;
  padding: 1px 9px;
  border: 1px solid var(--rose);
  border-radius: var(--r-pill);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--rose);
}

/* --------------------------------------------------------------------------
   10. FAQ
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: var(--sp-2); }
.faq__item { border-bottom: 1px solid var(--paper-line); }
.faq__item > summary {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  padding: var(--sp-4) 0;
  cursor: pointer; list-style: none;
  font-family: var(--f-mincho);
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--on-paper);
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary::before {
  content: "Q"; flex: none; width: 12px;
  font-family: var(--f-en); font-style: italic; font-size: 15px;
  color: var(--gold-dim); padding-top: 1px;
}
/* 「A」は絶対配置。flexにすると本文中の<strong>が別列に分かれてしまうため */
.faq__a {
  position: relative;
  padding: 0 0 var(--sp-5) calc(12px + var(--sp-4));
  font-weight: 300; font-size: 13.5px; line-height: 2.05;
  color: var(--on-paper-mut);
}
.faq__a strong { font-weight: 500; color: var(--on-paper); }
.faq__a::before {
  content: "A";
  position: absolute; top: 0; left: 0; width: 12px;
  font-family: var(--f-en); font-style: italic; font-size: 15px;
  color: var(--rose);
}

/* --------------------------------------------------------------------------
   11. フォーム
   -------------------------------------------------------------------------- */
.form { display: grid; gap: var(--sp-5); }
.field { display: grid; gap: var(--sp-2); }
.field__label {
  display: flex; align-items: center; gap: var(--sp-2);
  font-family: var(--f-mincho);
  font-size: 13px; letter-spacing: .08em;
  color: var(--on-paper);
}
.req { padding: 1px 8px; border-radius: var(--r-pill); background: var(--rose); color: #fff; font-size: 10px; }
.opt { padding: 1px 8px; border-radius: var(--r-pill); background: var(--paper-2); color: var(--on-paper-mut); font-size: 10px; }

.input, .textarea, .select {
  width: 100%;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--paper-line);
  border-radius: var(--r-sm);
  font-family: var(--f-sans);
  font-size: 16px;      /* iOSのズーム防止 */
  line-height: 1.7;
  color: var(--on-paper);
  transition: border-color var(--t-fast) linear, box-shadow var(--t-fast) var(--e-out);
}
.textarea { min-height: 150px; resize: vertical; }
.select {
  appearance: none; padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8'%3E%3Cpath d='M1 1l5.5 5.5L12 1' fill='none' stroke='%235E5A63' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.input::placeholder, .textarea::placeholder { color: #A9A3AC; }
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(198,168,107,.22);
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] {
  border-color: #B3291B; background: #FFF7F6;
}
.field__help { font-size: 11.5px; font-weight: 300; line-height: 1.8; color: var(--on-paper-mut); }

.check {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-5);
  background: var(--paper-2);
  border: 1px solid var(--paper-line);
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: 13px; line-height: 1.9; font-weight: 300;
  color: var(--on-paper);
}
.check input { width: 18px; height: 18px; margin-top: 4px; flex: none; accent-color: var(--rose); }
.check[data-invalid="true"] { border-color: #B3291B; background: #FFF3F1; }
.check a { color: var(--rose); text-decoration: underline; text-underline-offset: 3px; }

.err { display: flex; gap: 5px; font-size: 12.5px; color: #B3291B; }
.err::before { content: "！"; }

.form__note { font-size: 12px; font-weight: 300; line-height: 1.9; color: var(--on-paper-mut); text-align: center; }
.form__note a { color: var(--rose); text-decoration: underline; text-underline-offset: 3px; }
.hp { position: absolute; left: -9999px; opacity: 0; }

.grecaptcha-badge { visibility: hidden !important; }
.form__recaptcha { font-size: 11px; font-weight: 300; line-height: 1.8; color: var(--on-paper-mut); text-align: center; }
.form__recaptcha a { color: var(--on-paper-mut); text-decoration: underline; }

.banner {
  display: flex; gap: var(--sp-4);
  margin-bottom: var(--sp-6);
  padding: var(--sp-5);
  background: var(--paper-2);
  border-left: 2px solid var(--gold);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.banner--err { border-left-color: #B3291B; background: #FFF3F1; }
.banner__ttl { font-family: var(--f-mincho); font-size: 15px; color: var(--on-paper); }
.banner__txt { font-weight: 300; font-size: 13px; line-height: 1.95; color: var(--on-paper-mut); }

/* --- LINEでの相談 --- */
.line-box {
  display: flex; align-items: center; gap: var(--sp-5);
  padding: var(--sp-5);
  background: var(--paper-2);
  border: 1px solid var(--paper-line);
  border-radius: var(--r-md);
}
.line-box__body { flex: 1; min-width: 0; display: grid; gap: var(--sp-3); }
.line-box__ttl { font-family: var(--f-mincho); font-size: 16px; color: var(--on-paper); }
.line-box__txt { font-weight: 300; font-size: 13px; line-height: 1.95; color: var(--on-paper-mut); }
.line-box__btn { margin-top: var(--sp-2); min-height: 52px; font-size: 14px; }

/* QRは読み取る別端末がある（＝マウス操作の）環境だけ */
.line-box__qr { display: none; flex: none; width: 140px; text-align: center; }
.line-box__qr img { width: 100%; height: auto; padding: 6px; background: #fff; border-radius: var(--r-md); }
.line-box__qr figcaption { margin-top: var(--sp-2); font-size: 11px; font-weight: 300; color: var(--on-paper-mut); }
@media (hover: hover) and (pointer: fine) {
  .line-box__qr { display: block; }
}

/* 「または」区切り */
.line-box__or {
  display: flex; align-items: center; gap: var(--sp-4);
  margin: var(--sp-6) 0 var(--sp-5);
  font-family: var(--f-mincho); font-size: 13px; letter-spacing: .12em; color: var(--on-paper-mut);
}
.line-box__or::before, .line-box__or::after { content: ""; flex: 1; height: 1px; background: var(--paper-line); }

.form-errors {
  margin-bottom: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  background: #FFF3F1;
  border: 1px solid #B3291B;
  border-radius: var(--r-md);
}
.form-errors p { font-family: var(--f-mincho); font-size: 14px; color: #B3291B; margin-bottom: var(--sp-2); }
.form-errors li { font-size: 13px; color: #B3291B; }

/* --------------------------------------------------------------------------
   11-b. 年齢確認ゲート

   参考仕様は全寸法が vw 指定だったが、ワイドモニタで巨大化し、
   狭い画面では読めなくなるため clamp() に置き換えている。
   また「同意して進む」しか無かったので、退出の導線も用意した。
   -------------------------------------------------------------------------- */
body.is-gated { overflow: hidden; }

.gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 40px);
  background: rgba(10, 11, 17, .9);
  backdrop-filter: blur(10px);
  overflow-y: auto;
}
.gate__card {
  width: 100%;
  max-width: 460px;
  padding: clamp(28px, 5vw, 48px) clamp(22px, 4vw, 40px);
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: var(--r-lg);
  box-shadow: 0 40px 90px -40px #000,
              0 0 120px -60px rgba(198,168,107,.6);
  text-align: center;
}
.gate__mark {
  width: clamp(96px, 22vw, 130px);
  margin: 0 auto clamp(18px, 3vw, 26px);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(198,168,107,.3), 0 0 70px -22px rgba(198,168,107,.55);
}
.gate__en {
  font-family: var(--f-en);
  font-style: italic;
  font-size: 12px;
  letter-spacing: .3em;
  color: var(--gold);
}
.gate__ttl {
  margin-top: var(--sp-2);
  font-family: var(--f-mincho);
  font-weight: 500;
  font-size: clamp(19px, 4.2vw, 24px);
  letter-spacing: .1em;
  color: var(--on-ink);
}
.gate__txt {
  margin-top: clamp(18px, 3vw, 26px);
  padding-top: clamp(18px, 3vw, 26px);
  border-top: 1px solid var(--ink-3);
  font-weight: 300;
  font-size: 13.5px;
  line-height: 2.1;
  color: var(--on-ink-muted);
  text-align: left;
}
.gate__txt p + p { margin-top: 1.2em; }
.gate__txt strong { font-weight: 500; color: var(--gold); }

.gate__btns {
  display: grid;
  gap: var(--sp-3);
  margin-top: clamp(22px, 4vw, 32px);
}
.gate__btns .btn { min-height: 54px; font-size: 14px; letter-spacing: .1em; }

.gate__note {
  margin-top: var(--sp-5);
  font-size: 11.5px;
  font-weight: 300;
  line-height: 1.9;
  color: var(--on-ink-muted);
}

.gate__card--bye { max-width: 420px; }

/* --------------------------------------------------------------------------
   11-c. 写真

   前構成（配信スタジオ）で作った画像を流用している。元は暖色クリーム基調で
   墨紺の地から浮くため、画像を作り直さずCSSだけで夜側へ寄せる。
     ・filter        … 彩度と明度を落とし、コントラストをわずかに上げる
     ・::before      … 墨紺を color ブレンドで重ね、色相だけを夜に寄せる
                       （輝度は保つので、灯りの金色は金色のまま残る）
     ・::after       … 下方向へ暗くして、地色との境目を溶かす
   -------------------------------------------------------------------------- */
.shot {
  position: relative;
  margin: clamp(20px, 3vw, 32px) 0;
  border: 1px solid var(--ink-3);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 30px 70px -40px #000;
}
.shot img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: saturate(.62) brightness(.74) contrast(1.06);
}
/* 縦位置の写真。3:2で切ると構図が壊れるので、縦長のまま見せる。
   元は2:3（600px幅だと900px）と高すぎるため、4:5に収めている。 */
.shot--portrait img { aspect-ratio: 4 / 5; }
.shot::before,
.shot::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.shot::before {
  background: var(--ink);
  mix-blend-mode: color;
  opacity: .34;
}
.shot::after {
  background: linear-gradient(180deg,
              rgba(16,17,26,.10) 0%,
              rgba(16,17,26,.28) 55%,
              rgba(16,17,26,.72) 100%);
}
.shot__cap {
  position: absolute;
  left: clamp(14px, 3vw, 22px);
  bottom: clamp(12px, 2.4vw, 18px);
  z-index: 2;
  font-family: var(--f-mincho);
  font-size: 12.5px;
  letter-spacing: .12em;
  color: var(--on-ink);
  text-shadow: 0 2px 12px rgba(0,0,0,.8);
}

/* 紙のシートの中に置く場合は、上下の余白を詰める */
.sheet .shot { margin-inline: 0; }

/* --------------------------------------------------------------------------
   11-d. 規約ページ（プライバシーポリシー等）

   本文と同じ .sheet の上に置く前提。見出しと箇条書きだけを足す。
   -------------------------------------------------------------------------- */
.legal__h {
  margin-top: clamp(32px, 5vw, 48px);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--paper-line);
  font-family: var(--f-mincho);
  font-weight: 500;
  font-size: clamp(15px, 2.4vw, 17px);
  letter-spacing: .06em;
  color: var(--on-paper);
}
.legal__ul {
  margin-top: var(--sp-3);
  display: grid;
  gap: var(--sp-2);
}
.legal__ul li {
  position: relative;
  padding-left: 1.2em;
  font-weight: 300;
  font-size: 13.5px;
  line-height: 2;
  color: var(--on-paper-mut);
}
.legal__ul li::before {
  content: "";
  position: absolute;
  left: 0; top: .85em;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gold);
}
.legal__a {
  color: var(--rose);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal__updated {
  margin-top: clamp(32px, 5vw, 48px);
  font-weight: 300;
  font-size: 12.5px;
  color: var(--on-paper-mut);
  text-align: right;
}

/* --------------------------------------------------------------------------
   12. フッター
   -------------------------------------------------------------------------- */
.site-footer {
  margin-top: clamp(32px, 5vw, 56px);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--ink-3);
  text-align: center;
}
.site-footer__nav {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--sp-3) var(--sp-5);
  margin-bottom: var(--sp-5);
}
.site-footer__nav a {
  font-size: 12px; font-weight: 300; letter-spacing: .1em;
  color: var(--on-ink-muted);
  transition: color var(--t-fast) linear;
}
.site-footer__nav a:hover { color: var(--gold); }
.site-footer__copy {
  font-family: var(--f-en); font-style: italic;
  font-size: 11px; letter-spacing: .16em; color: var(--on-ink-muted);
}

/* 上に戻る */
.totop {
  position: fixed;
  right: clamp(14px, 2.5vw, 28px);
  bottom: clamp(14px, 2.5vw, 28px);
  z-index: 90;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 1px solid var(--ink-3);
  border-radius: 50%;
  background: var(--ink-2);
  color: var(--gold);
  cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--t-base) var(--e-out),
              transform var(--t-base) var(--e-out),
              visibility var(--t-base),
              background var(--t-fast) linear, color var(--t-fast) linear;
}
.totop.is-show { opacity: 1; visibility: visible; transform: none; }
.totop:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); }

/* --------------------------------------------------------------------------
   13. レスポンシブ

   3カラムの成立下限は 600 + (300 + 64) * 2 = 1328px。
   それ未満では左右を隠し、中央1カラムに落とす。
   -------------------------------------------------------------------------- */
.m-nav { display: none; }

@media screen and (max-width: 1327px) {
  .col-left, .col-right { display: none; }
  .col-main { max-width: 640px; padding-inline: clamp(16px, 4vw, 32px); }
  .m-nav { display: block; }
}

/* 3カラムが成立する幅では、本文先頭のロゴは不要（左カラムにあるため） */
@media screen and (min-width: 1328px) {
  .mv__moon { display: none; }
}

/* --- モバイル用の開閉ナビ --- */
.m-nav__toggle {
  position: fixed; top: 14px; right: 14px; z-index: 120;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 1px solid var(--ink-3);
  border-radius: 50%;
  background: rgba(16,17,26,.9);
  backdrop-filter: blur(10px);
  cursor: pointer;
}
.m-nav__toggle span { display: block; width: 16px; height: 1px; background: var(--gold); position: relative; }
.m-nav__toggle span::before, .m-nav__toggle span::after {
  content: ""; position: absolute; left: 0; width: 16px; height: 1px; background: var(--gold);
  transition: transform var(--t-base) var(--e-out);
}
.m-nav__toggle span::before { top: -5px; }
.m-nav__toggle span::after  { top: 5px; }
.m-nav__toggle[aria-expanded="true"] span { background: transparent; }
.m-nav__toggle[aria-expanded="true"] span::before { transform: translateY(5px) rotate(45deg); }
.m-nav__toggle[aria-expanded="true"] span::after  { transform: translateY(-5px) rotate(-45deg); }

.m-nav__panel {
  position: fixed; inset: 0; z-index: 110;
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--sp-8) clamp(24px, 8vw, 56px);
  background: rgba(16,17,26,.97);
  backdrop-filter: blur(14px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-base) var(--e-out), visibility var(--t-base);
  overflow-y: auto;
}
.m-nav__panel.is-open { opacity: 1; visibility: visible; }
.m-nav__panel .nav__item { border-left: 0; border-bottom: 1px solid var(--ink-3); padding-left: 0; }
.m-nav__panel .nav__item:hover { padding-left: var(--sp-3); }

@media screen and (max-width: 600px) {
  body { font-size: 14.5px; }
  .sp-br { display: inline; }
  .dl { grid-template-columns: 1fr; }
  .dl > dt { padding-bottom: 0; }
  .dl > dt + dd { padding-top: var(--sp-2); border-top: 0; }
  .dl > dt:first-of-type + dd { border-top: 0; }
  .wait { margin-left: 0; }
  .flow__step { grid-template-columns: 44px minmax(0, 1fr); gap: var(--sp-3); }
  .flow__no { width: 36px; height: 36px; font-size: 14px; }
  .flow__step:not(:last-child) .flow__no::after { top: 40px; }
}

/* --------------------------------------------------------------------------
   14. アクセシビリティ / 印刷
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-contrast: more) {
  :root { --on-ink-muted: #C4C0CB; --on-paper-mut: #3E3A44; --ink-3: #3A3E52; }
}

@media print {
  body { background: #fff; color: #000; }
  body::before, .col-left, .col-right, .m-nav, .totop { display: none !important; }
  .col-main { max-width: none; padding: 0; }
  .sheet, .sheet--ink { background: #fff; color: #000; border: 1px solid #999; box-shadow: none; }
  .head__en { color: #666; }
  .sheet--ink .head__ja, .sheet--ink .txt, .creed__line, .creed__key { color: #000 !important; }
  .faq__a { display: block !important; }
  details { break-inside: avoid; }
}