/* トップページ専用スタイル。
 * 物語: 夜(紺・キャラ大集合) → 夜明け(コーラル) → 昼(生成り)。規約ページには読み込まない。
 * 動きは transform/opacity のみ（モバイル発熱対策）。
 * JSなし・省モーション時は「完成状態」がそのまま見える設計:
 *   隠す指定はCSSに書かず、JS(gsap.set)だけが初期状態を作る。 */

:root {
  --night: #101528;
  --night2: #1b2140;
  --dawn1: #ff7a6e;
  --dawn2: #ffb199;
  --cream: #f5f1ea;
  --day-bg: #fff8f4;
  --day-ink: #3a2f2c;
}

body.home { background: var(--night); overflow-x: clip; }

/* ── ヘッダー(夜の上に浮かす→昼で白に) ── */
body.home header.site.home-header {
  position: fixed; left: 0; right: 0; top: 0;
  background: rgba(16, 21, 40, .55);
  border-bottom: 1px solid rgba(245, 241, 234, .08);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  transition: background .45s ease, border-color .45s ease;
}
body.home header.site .brand { color: var(--cream); transition: color .45s ease; }
body.home header.site nav a { color: rgba(245, 241, 234, .65); transition: color .45s ease; }
body.home header.site nav a:hover { color: #ffb199; }
body.home.day header.site.home-header {
  background: rgba(255, 248, 244, .78);
  border-bottom-color: rgba(58, 47, 44, .08);
}
/* PCは幅いっぱい使う（トップだけ。中身のあるページは読みやすい760pxのまま） */
body.home header.site .wrap { max-width: 1280px; }
body.home.day header.site .brand { color: var(--day-ink); }
body.home.day header.site nav a { color: rgba(58, 47, 44, .62); }
body.home.day header.site nav a:hover { color: #e8637a; }

/* ── 星空 ── */
.stars { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.stars::before, .stars::after {
  content: ""; position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: transparent;
  box-shadow:
    4vw 12vh 0 0 rgba(255,255,255,.8), 12vw 32vh 0 0 rgba(255,255,255,.5),
    22vw 8vh  0 0 rgba(255,255,255,.9), 31vw 44vh 0 0 rgba(255,255,255,.4),
    38vw 18vh 0 0 rgba(255,255,255,.7), 47vw 6vh  0 0 rgba(255,255,255,.5),
    55vw 28vh 0 0 rgba(255,255,255,.8), 63vw 12vh 0 0 rgba(255,255,255,.4),
    71vw 38vh 0 0 rgba(255,255,255,.6), 79vw 22vh 0 0 rgba(255,255,255,.9),
    87vw 9vh  0 0 rgba(255,255,255,.5), 94vw 30vh 0 0 rgba(255,255,255,.7),
    9vw 56vh  0 0 rgba(255,255,255,.4), 27vw 62vh 0 0 rgba(255,255,255,.6),
    58vw 52vh 0 0 rgba(255,255,255,.5), 83vw 58vh 0 0 rgba(255,255,255,.4);
}
.stars::after {
  width: 1px; height: 1px;
  box-shadow:
    7vw 24vh 0 0 rgba(255,255,255,.5), 17vw 15vh 0 0 rgba(255,255,255,.4),
    26vw 36vh 0 0 rgba(255,255,255,.5), 42vw 27vh 0 0 rgba(255,255,255,.35),
    52vw 14vh 0 0 rgba(255,255,255,.5), 66vw 33vh 0 0 rgba(255,255,255,.4),
    76vw 7vh  0 0 rgba(255,255,255,.45), 91vw 19vh 0 0 rgba(255,255,255,.5),
    36vw 58vh 0 0 rgba(255,255,255,.3), 69vw 61vh 0 0 rgba(255,255,255,.35);
  animation: twinkle 3.4s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: .35; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .stars::after { animation: none; } }

/* ── ヒーロー: キャラ大集合 ── */
.hero-cast {
  position: relative; min-height: 100svh; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: 92px 0 64px;
  background:
    radial-gradient(120% 55% at 50% 108%, rgba(255, 122, 110, .38) 0%, rgba(255, 122, 110, 0) 60%),
    linear-gradient(180deg, #0b0f1f 0%, var(--night) 52%, #1c2244 100%);
  color: var(--cream); text-align: center;
}
.cast-copy { position: relative; z-index: 3; padding: 0 22px; }
/* PC＝広い窓では文言側も一緒に大きく（キャラとの間の空白が間延びして見える対策）。
   上限はvwに追従: 1600px幅でロゴ約104px・見出し約3.4rem */
.cast-logo {
  /* トップの主役。ここは「一番最初に目に入るもの」なので大きく取る（従来の約3倍）。
     幅にも上限を置く：高さだけで決めると、横長の窓で画面からはみ出す。 */
  /* 高さは「窓の高さ」にも縛る。幅だけで決めると、背の低いノートPCでロゴが画面を
     占領して、キャラの列が最初の一画面から押し出される。 */
  height: clamp(216px, min(33vw, 40svh), 450px); width: auto; max-width: min(88vw, 1000px);
  display: block; margin: 2px auto 14px;
  filter: drop-shadow(0 6px 22px rgba(0, 0, 0, .45));
}
/* スマホ: 高さの下限216pxに対して幅が88vwで頭打ちになり、縦に引き伸ばされていた（元は1440×542）。
   幅を基準にして高さは成り行きに */
@media (max-width: 640px) {
  .cast-logo { width: 88vw; height: auto; max-width: none; }
}
.hero-cast h1 {
  margin: 0 0 10px; font-weight: 600;
  font-size: clamp(1.7rem, 4.6vw, 3.4rem); line-height: 1.42; letter-spacing: .06em;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  text-shadow: 0 2px 24px rgba(8, 10, 24, .6);
}
.cast-lead {
  margin: 0 0 18px; font-size: clamp(.92rem, 2.2vw, 1.22rem);
  color: rgba(245,241,234,.85); letter-spacing: .04em;
}
.badges { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.badge {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px;
  text-align: left;
  background: rgba(16, 21, 40, .55); border: 1px solid rgba(255, 177, 153, .35);
  border-radius: 14px; padding: 9px 14px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.badge b { font-size: .86rem; color: #ffcbb8; letter-spacing: .04em; }
.badge i { font-style: normal; font-size: .72rem; color: rgba(245,241,234,.66); }
@media (min-width: 1100px) {
  .badge { padding: 12px 18px; border-radius: 16px; }
  .badge b { font-size: 1rem; }
  .badge i { font-size: .8rem; }
}

/* キャラの列: 左→右へ流れるパレード。全14人が順に通り過ぎ、切れ目なくループする。
   仕組み: JSが列を丸ごと複製して2周分にし(.looping付与)、trackを -50%→0 へ動かす。
   端は両コピーの継ぎ目＝同じ絵なので跳ばない。JSが動かない環境では静止した集合のまま。 */
.cast-row {
  position: relative; z-index: 2; width: 100%;
  flex: 1 1 auto; min-height: 300px;
  display: flex; align-items: flex-end; justify-content: flex-start;
  margin-top: 8px; overflow: hidden;
  /* 縦スクロールは端末に任せ、横の指の動きだけこちらで拾う */
  touch-action: pan-y;
  cursor: grab;
  /* 画面の両端でふわっと消える(流れの出入りを柔らかく) */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.cast-row.dragging { cursor: grabbing; }
.cast-track {
  display: flex; align-items: flex-end; width: max-content;
  margin: 0 auto;                /* JSが動かない静止時は中央寄せ */
  will-change: transform;
}
.cast-track.looping { margin: 0; }  /* 動きはJS(rAF)が担当。ドラッグと自動走行を両立するため */
.cast {
  display: block; width: auto;
  filter: drop-shadow(0 18px 30px rgba(6, 8, 20, .55));
  margin: 0 -1.6vw;              /* 少し重ねて“集合”感を出す */
  will-change: transform;
  cursor: pointer;
  user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
}
/* タップで自己紹介の声。話している間はふわっと光らせる */
.cast.say {
  filter: drop-shadow(0 18px 30px rgba(6, 8, 20, .55))
          drop-shadow(0 0 22px rgba(255, 150, 165, .9));
}
/* 背の高さは3段(元絵720pxなので640px止まり)。縦に余る窓では伸びて空白を埋める */
.th1 { height: min(50svh, 640px); z-index: 9; }
.th2 { height: min(43svh, 545px); z-index: 7; opacity: .96; }
.th3 { height: min(36svh, 455px); z-index: 5; opacity: .9; }

/* ゆっくり呼吸するように上下(省モーションでは止まる) */
@media (prefers-reduced-motion: no-preference) {
  .cast { animation: bob 5.2s ease-in-out infinite alternate; }
  .cast:nth-child(3n+1) { animation-delay: -2.6s; }
  .cast:nth-child(3n+2) { animation-delay: -1.3s; }
}
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(-10px); } }

.scroll-cue {
  position: relative; z-index: 3; margin-top: 14px;
  color: rgba(245,241,234,.72); font-size: .74rem; letter-spacing: .18em; text-align: center;
}
.scroll-cue .cue-sub { display: block; margin-top: 5px; color: rgba(245,241,234,.45); font-size: .68rem; }
.scroll-cue i {
  display: block; width: 1px; height: 30px; margin: 8px auto 0;
  background: linear-gradient(180deg, rgba(245,241,234,.6), transparent);
  animation: cue 1.8s ease-in-out infinite; transform-origin: top;
}
@keyframes cue { 0% { transform: scaleY(0); } 55% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .scroll-cue i { animation: none; } }

/* ── ピン留めの物語 ── */
.story { position: relative; }
.story-stage {
  position: relative; min-height: 100svh; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: 84px 18px 40px;
}
.sky { position: absolute; inset: 0; }
.sky-night { background: linear-gradient(180deg, #0b0f1f 0%, var(--night2) 70%, #232a52 100%); }
.sky-dawn {
  background:
    linear-gradient(180deg, #35406e 0%, #8d6482 34%, var(--dawn1) 68%, var(--dawn2) 100%);
}

.story-grid {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  gap: 56px; width: 100%; max-width: 980px;
}

.caps { position: relative; flex: 1 1 320px; max-width: 440px; min-height: 12em; }
.cap {
  position: absolute; top: 0; left: 0; margin: 0;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  font-size: clamp(1.24rem, 2.9vw, 1.7rem); line-height: 1.9; letter-spacing: .08em;
  color: var(--cream); text-shadow: 0 2px 18px rgba(10, 12, 28, .35);
}
/* JSなしの完成形: 最後のことばだけ見せる */
.cap0, .cap1, .cap2 { opacity: 0; }
.cap3 { opacity: 1; }

/* ── スマホモック(実アプリのチャット画面を忠実に:
      その子の写真を背面に敷き、上下だけ暗幕・アイランド・状態バーまで再現) ── */
.phone {
  flex: 0 0 auto; width: min(330px, 88vw);
  background: #14161f; border-radius: 46px; padding: 8px;
  box-shadow:
    0 30px 80px rgba(6, 8, 20, .55),
    inset 0 0 0 1px rgba(255,255,255,.1);
}
.p-screen {
  position: relative; border-radius: 38px; overflow: hidden;
  display: flex; flex-direction: column;
  background: #fdf2f5 url("/img/maid_aoi.webp") top center / cover no-repeat;
}
.p-screen::before {                            /* アプリと同じ: 上下は文字のため暗く、中央は写真を見せる */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(20, 12, 18, .42) 0%, rgba(20, 12, 18, .10) 17%,
    rgba(255, 246, 249, .18) 34%, rgba(255, 246, 249, .18) 66%,
    rgba(20, 12, 18, .08) 84%, rgba(20, 12, 18, .38) 100%);
}
.p-screen > * { position: relative; }
.p-island {                                    /* Dynamic Island */
  position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 88px; height: 25px; border-radius: 14px; background: #000;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); z-index: 5;
}
.p-status {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 22px 2px; min-height: 25px;
  color: #fff; font-size: .74rem; font-weight: 700;
  font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px rgba(0,0,0,.45);
}
.ps-moon { font-weight: 400; opacity: .95; }
.ps-ics { filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.phone-top {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px 6px;
}
.phone-top img {
  width: 34px; height: 34px; border-radius: 50%;
  object-fit: cover; object-position: 50% 12%;
  box-shadow: 0 0 0 2px rgba(255,255,255,.75);
}
.phone-top .who {
  font-size: .92rem; font-weight: 700; color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.45);
}
.pt-lv {
  margin-left: auto; font-size: .72rem; font-weight: 800; color: #ff5a76;
  text-shadow: 0 1px 2px rgba(255,255,255,.6);
}
/* 上下のアイコンは絵文字をやめ、アプリと同じ形・同じ色のSVGにする。
   絵文字は端末ごとに絵が違ううえ、黄色い顔・黒いゲーム機のように配色も揃わないので、
   「アプリの画面です」と言われたときに現物と結びつかなかった。 */
.phone-top .ptop-ic {
  width: 17px; height: 17px; color: #fff; flex: 0 0 auto;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.45));
}
.phone-top .pt-album { color: #ff8fb0; }
.pt-lv .ptop-heart { width: 11px; height: 11px; color: #ff5a76; vertical-align: -1px; }
.chat {
  padding: 12px 12px 10px; min-height: 430px;
  display: flex; flex-direction: column; gap: 10px;
}
.tstamp {
  align-self: center; font-size: .66rem; letter-spacing: .22em;
  color: #fff; padding: 2px 12px; font-variant-numeric: tabular-nums;
  background: rgba(30, 18, 26, .30); border-radius: 999px;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.mrow { display: flex; align-items: flex-end; gap: 6px; }
.mrow.me { justify-content: flex-end; }
.mrow.her { justify-content: flex-start; }
.mmeta {                                       /* 吹き出しの横・下端そろえの「既読・時刻」(アプリと同じ) */
  flex: 0 0 auto; font-size: .58rem; line-height: 1.5; color: #fff;
  font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px rgba(0,0,0,.5);
  padding-bottom: 2px;
}
.mrow.me .mmeta { text-align: right; }
.msg {
  position: relative; max-width: 76%; padding: 9px 13px; border-radius: 16px;
  font-size: .83rem; line-height: 1.7; color: #3a3440;
}
/* しっぽ。CSSの三角形（border技）は「垂直に切り落とした直角三角形」しか作れず、
   吹き出しの角に四角い出っ張りが生えたように見えていた。
   アプリ本体(ChatBubbleShape)は外側の辺を曲線で引いた“流れるしっぽ”なので、
   同じ形をSVGで描いて敷く。しっぽ側の角は丸めない（丸めると根元に隙間が出る）。 */
.msg.me {
  background: #f8cdd9;
  border-bottom-right-radius: 0;
  box-shadow: 0 1px 3px rgba(90, 60, 70, .12);
}
.msg.me::after {
  content: ""; position: absolute; right: -7px; bottom: 0; width: 7px; height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='12'%3E%3Cpath d='M0 0 Q0 7.8 7 12 L0 12 Z' fill='%23f8cdd9'/%3E%3C/svg%3E") no-repeat;
}
.msg.her {
  background: #ffffff;
  border-bottom-left-radius: 0;
  box-shadow: 0 1px 3px rgba(90, 60, 70, .12);
}
.msg.her::after {
  content: ""; position: absolute; left: -7px; bottom: 0; width: 7px; height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='12'%3E%3Cpath d='M7 0 Q7 7.8 0 12 L7 12 Z' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat;
}
.stamp-msg { width: 116px; height: auto; margin: 2px 0 0 4px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.18)); }
.phone-input {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px 16px;
}
/* 入力バーのアイコン。色までアプリに合わせる（写真・スタンプ・キーボード・ゲームはピンク、
   占いだけ紫）。背景がキャラ写真なので、白いふちを1枚敷いて沈まないようにする。 */
.pi-ic {
  width: 21px; height: 21px; flex: 0 0 auto; color: #ff5f86;
  filter: drop-shadow(0 0 2px rgba(255,255,255,.9)) drop-shadow(0 1px 2px rgba(0,0,0,.25));
}
.pi-ic.pi-moon { color: #a878f0; }
.pi-talk {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  background: #f4577b; color: #fff;
  border-radius: 999px; padding: 10px 0; font-size: .84rem; font-weight: 700;
  letter-spacing: .06em; box-shadow: 0 6px 16px rgba(233, 60, 100, .38);
}
.pi-talk svg { width: 17px; height: 17px; color: #fff; }

/* ── 昼パート共通 ── */
.wrap-wide { max-width: 1020px; margin: 0 auto; padding: 0 24px; }
.big-h {
  margin: 0 0 18px; font-weight: 600;
  font-size: clamp(1.5rem, 4.4vw, 2.3rem); line-height: 1.6; letter-spacing: .05em;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  color: var(--day-ink);
}

/* ── もたらすもの ── */
.gifts {
  background: linear-gradient(180deg, var(--dawn2) 0%, var(--day-bg) 14%, var(--day-bg) 100%);
  color: var(--day-ink); padding: 110px 0 90px;
}
.gift-cards { display: grid; gap: 20px; margin-top: 44px; }
@media (min-width: 760px) { .gift-cards { grid-template-columns: repeat(3, 1fr); } }
.gift {
  background: #fff; border-radius: 22px; padding: 26px 26px 28px;
  box-shadow: 0 14px 44px rgba(212, 120, 100, .12);
  border: 1px solid #ffe4d8; overflow: hidden;
}
.gift-img {
  display: block; width: calc(100% + 52px); margin: -26px -26px 20px;
  aspect-ratio: 16 / 10; object-fit: cover;
}
.gift-no {
  font-size: .78rem; letter-spacing: .3em; color: #e8637a; margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}
.gift h3 {
  margin: 0 0 12px; font-size: 1.12rem; line-height: 1.7; font-weight: 700;
  color: var(--day-ink);
}
.gift p { margin: 0; font-size: .89rem; line-height: 2; color: #7c6a63; }

.more-cta { margin-top: 64px; text-align: center; }
.more-cta p { margin: 0 0 16px; color: #7c6a63; font-size: .94rem; }
.btn-more {
  display: inline-block; padding: 15px 38px; border-radius: 999px;
  background: linear-gradient(135deg, #e8637a, #ff8f76);
  color: #fff; text-decoration: none; font-size: .95rem; letter-spacing: .06em;
  box-shadow: 0 12px 30px rgba(232, 99, 122, .32);
  transition: transform .25s ease, box-shadow .25s ease;
}
.btn-more:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(232, 99, 122, .4); }
.btn-more.ghost {
  background: transparent; color: #e8637a;
  border: 1.5px solid #e8637a; box-shadow: none;
}

/* ── いっしょに遊ぶ ── */
.plays { background: var(--day-bg); color: var(--day-ink); padding: 30px 0 40px; }
.plays-head { position: relative; text-align: center; padding-top: 30px; }
.plays-stamp {
  position: absolute; top: -6px; right: max(2vw, 8px); width: clamp(84px, 12vw, 132px);
  transform: rotate(9deg); pointer-events: none;
}
.plays-lead {
  margin: 0 auto; max-width: 34em; font-size: .95rem; line-height: 2.1; color: #7c6a63;
}
.plays-lead b { color: var(--day-ink); }
.game-strip {
  display: flex; gap: 16px; padding: 34px 24px 10px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.game-strip::-webkit-scrollbar { display: none; }
.game-strip figure {
  margin: 0; flex: 0 0 auto; scroll-snap-align: center;
  width: clamp(160px, 22vw, 220px); text-align: center;
}
.game-strip img {
  width: 100%; border-radius: 22px; display: block;
  box-shadow: 0 14px 34px rgba(212, 120, 100, .22);
  border: 3px solid #fff;
  transform: rotate(var(--tilt, 0deg));
  transition: transform .3s ease;
}
.game-strip figure:nth-child(odd) img { --tilt: -2.2deg; }
.game-strip figure:nth-child(even) img { --tilt: 2.2deg; }
.game-strip img:hover { transform: rotate(0deg) translateY(-6px); }
.game-strip figcaption { margin-top: 10px; font-size: .84rem; color: #7c6a63; font-weight: 700; }
.plays-note { text-align: center; margin: 26px 24px 0; font-size: .88rem; color: #a08376; }

/* ── フレンズ紹介 ── */
.friends { background: var(--day-bg); color: var(--day-ink); padding: 70px 0 100px; }
.friends-lead { margin: 0 0 40px; color: #7c6a63; font-size: .95rem; }
.friend-cards { display: grid; gap: 22px; }
@media (min-width: 760px) { .friend-cards { grid-template-columns: repeat(3, 1fr); } }
.fcard {
  margin: 0; background: #fff; border-radius: 22px; overflow: hidden;
  border: 1px solid #ffe4d8; box-shadow: 0 14px 44px rgba(212, 120, 100, .1);
}
.fimg { aspect-ratio: 2 / 3; overflow: hidden; }
.fimg img {
  width: 100%; height: 112%; object-fit: cover; display: block;
  will-change: transform;
}
.fcard figcaption { padding: 18px 20px 22px; }
.fcard b { font-size: 1.06rem; }
.fcard span { margin-left: 10px; font-size: .8rem; color: #a08376; }
.fcard p { margin: 8px 0 0; font-size: .85rem; line-height: 1.9; color: #7c6a63; }

/* ── 締め ── */
.closing {
  background: linear-gradient(180deg, var(--day-bg), #ffeee4);
  text-align: center; padding: 90px 0 110px; color: var(--day-ink);
}
.closing .icon {
  width: 88px; height: 88px; border-radius: 22px; margin-bottom: 22px;
  box-shadow: 0 14px 40px rgba(212, 120, 100, .25);
}
.closing h2 {
  margin: 0 0 14px; font-size: 1.6rem; letter-spacing: .06em; font-weight: 600;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
}
.closing p { margin: 0 0 30px; color: #7c6a63; font-size: .94rem; line-height: 2.1; }

/* ── ストアボタン（App Store／Google Play。2026-10-01 両方公開） ── */
.store-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 0 0 14px; }
.store-btn {
  display: inline-flex; align-items: center; gap: 11px;
  background: #17181d; color: #fff; border-radius: 13px;
  padding: 10px 22px 10px 16px; min-width: 168px;
  box-shadow: 0 8px 22px rgba(23, 24, 29, .25);
  text-decoration: none;                      /* リンク化しても下線を出さない */
  transition: transform .25s ease, box-shadow .25s ease;
}
a.store-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(23, 24, 29, .32); }
.store-btn .sb-t { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.store-btn small { font-size: .66rem; color: rgba(255,255,255,.72); letter-spacing: .04em; }
.store-btn b { font-size: 1.02rem; font-weight: 700; letter-spacing: .05em; }
.store-btn.is-soon { opacity: .88; }
.closing .dl-note { margin: 0 0 26px; font-size: .8rem; color: #a3928b; line-height: 1.9; }

/* ── PC向けQR（スマホには出さない。スマホの人はボタンを押せば済む） ── */
.dl-qr { display: inline-flex; align-items: center; gap: 12px; margin: 2px 0 18px;
  padding: 10px 16px 10px 10px; background: #fff; border-radius: 14px;
  box-shadow: 0 6px 18px rgba(23, 24, 29, .10); }
.dl-qr img { display: block; border-radius: 6px; }
.closing .dl-qr p { margin: 0; font-size: .78rem; color: #7c6a63; line-height: 1.7; text-align: left; }
@media (max-width: 759px) { .dl-qr { display: none; } }

body.home footer.site { background: #ffeee4; border-top: 1px solid #ffd9c8; margin-top: 0; }

/* ── レスポンシブ ── */
.sp { display: none; }
.nw { white-space: nowrap; }
@media (max-width: 759px) {
  .sp { display: inline; }
  body.home header.site nav { gap: 14px; }
  body.home header.site nav a { font-size: .8rem; }
  /* 大きくしたロゴが、固定ヘッダーの下に潜り込まないよう頭を空ける */
  .hero-cast { padding-top: 74px; }
  .badges { gap: 7px; padding: 0 6px; }
  .badge { padding: 7px 11px; border-radius: 12px; }
  .badge b { font-size: .76rem; }
  .badge i { display: none; }                 /* モバイルは太字だけで簡潔に */
  .cast { margin: 0 -12px; }
  .th1 { height: min(38svh, 380px); }
  .th2 { height: min(32svh, 320px); }
  .th3 { height: min(27svh, 270px); }
  .story-grid { flex-direction: column; gap: 14px; }
  /* 縦積みでは flex-basis(320px) が「高さ320px」になってしまう
     （キャプション2行75px+空白245px＝スマホの上の大穴の正体）。中身の高さに戻す */
  .caps { flex: 0 0 auto; min-height: 4.6em; width: 100%; max-width: none; text-align: center; }
  .cap { left: 0; right: 0; font-size: 1.15rem; line-height: 1.8; }
  .story-stage { padding: 84px 14px 16px; }
  .chat { min-height: 0; }
  .msg { font-size: .78rem; line-height: 1.62; padding: 8px 11px; }
  .stamp-msg { width: 100px; }
  .plays-stamp { top: -22px; width: 76px; }
}

/* ── アニメ（第1話）。押すまでは自前のポスター＋再生ボタン（YouTube は押してから読み込む） ── */
.anime { padding: 84px 0 72px; background: linear-gradient(180deg, #fff6f0 0%, #ffeee4 100%); text-align: center; }
.anime .anime-kicker { margin: 0 0 8px; font-size: .8rem; letter-spacing: .18em; color: #e0786b; font-weight: 700; }
.anime .anime-lead { margin: 14px auto 28px; max-width: 640px; color: #7c6a63; font-size: .95rem; line-height: 2; }
.anime-player { position: relative; max-width: 880px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden;
  box-shadow: 0 18px 44px rgba(60, 30, 20, .22); background: #111; }
.anime-player iframe, .anime-facade { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.anime-facade { padding: 0; cursor: pointer; background: #111; }
.anime-facade img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease, filter .3s ease; }
.anime-facade:hover img { transform: scale(1.03); filter: brightness(.92); }
.anime-play { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(224, 92, 80, .92);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .35); transition: transform .25s ease; }
.anime-facade:hover .anime-play { transform: scale(1.08); }
.anime .anime-links { margin: 18px 0 0; font-size: .85rem; color: #a3928b; }
.anime .anime-links a { color: #e0786b; }
.pc { display: inline; }
@media (max-width: 759px) {
  .anime { padding: 60px 0 52px; }
  .anime-player { border-radius: 12px; margin: 0 -4px; }
  .anime-play { width: 62px; height: 62px; margin: -31px 0 0 -31px; }
  .pc { display: none; }
}

/* 10/17 検索対策: 見出しに名前の文字を入れる（画面には出さない） */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ═══ あおいに質問（10/17 オーナー「本番OK」・決まった答え＋あおいの声・PC だけ自由に話す入口） ═══ */
.aoi-faq-wrap { padding:64px 16px; }
  #aoi-faq { --pink:#e8457a; --navy:#1b2440; --cream:#fff8f2;
    max-width:960px; margin:0 auto; background:var(--cream); border-radius:24px; padding:28px 24px;
    display:grid; grid-template-columns:200px 1fr; gap:24px; align-items:start; box-shadow:0 10px 40px rgba(0,0,0,.35); }
  #aoi-faq h2 { grid-column:1 / -1; margin:0; font-size:1.3rem; color:var(--navy); text-align:center; }
  #aoi-faq h2 small { display:block; font-size:.8rem; color:#888; font-weight:normal; margin-top:4px; }
  #aoi-faq .who { text-align:center; }
  #aoi-faq .who img { width:100%; max-width:200px; border-radius:16px; display:block; margin:0 auto; }
  #aoi-faq .who .nm { font-weight:bold; margin-top:6px; color:var(--navy); }
  #aoi-faq .talk { display:flex; flex-direction:column; gap:14px; }
  #aoi-faq .bubble { position:relative; background:#fff; border-radius:18px; padding:16px 18px 16px 18px; line-height:1.8;
    box-shadow:0 1px 4px rgba(0,0,0,.08); min-height:3.6em; font-size:1rem; }
  #aoi-faq .bubble .q { font-size:.82rem; color:var(--pink); font-weight:bold; margin-bottom:4px; }
  #aoi-faq .bubble .play { position:absolute; right:10px; bottom:8px; border:0; background:transparent; font-size:1.2rem; cursor:pointer; opacity:.7; }
  #aoi-faq .bubble .play:hover { opacity:1; }
  #aoi-faq .chips { display:flex; flex-wrap:wrap; gap:8px; }
  #aoi-faq .chips button { background:#fff; color:var(--pink); border:1.5px solid var(--pink); border-radius:20px; padding:8px 14px;
    font-size:.9rem; cursor:pointer; font-family:inherit; }
  #aoi-faq .chips button.on { background:var(--pink); color:#fff; }
  #aoi-faq .row { display:flex; flex-wrap:wrap; gap:10px; align-items:center; font-size:.85rem; }
  #aoi-faq .row label { display:flex; gap:6px; align-items:center; color:#555; cursor:pointer; }
  #aoi-faq .row a { color:var(--navy); }
  #aoi-faq .pc { display:none; background:var(--navy); color:#fff; border-radius:16px; padding:14px 16px; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
  #aoi-faq .pc.show { display:flex; }
  #aoi-faq .pc p { margin:0; font-size:.88rem; line-height:1.6; }
  #aoi-faq .pc a { background:var(--pink); color:#fff; text-decoration:none; border-radius:20px; padding:8px 16px; font-weight:bold; white-space:nowrap; }
  @media (max-width:640px) {
    #aoi-faq { grid-template-columns:1fr; padding:20px 14px; margin:12px; }
    #aoi-faq .who { display:flex; align-items:center; gap:12px; text-align:left; }
    #aoi-faq .who img { width:72px; height:72px; object-fit:cover; object-position:top; border-radius:50%; margin:0; }
  }