/* Felitrot 公式サイト（felitrot.panmarie.com）
   統合設計: 骨格=「ページが1回のセッション」(コーラル⇔空色の交互リズム)
   魂=「止まると、彼は待つ」(スクロール歩行コンパニオン) 山場=「手紙の開封」
   パレット=アプリFTheme実値のみ。文字は黒禁止(brown)。ベタ塗り禁止(粒子+グラデ+絵)。 */

:root {
  --cream: #FFF6E9;
  --cream-deep: #F6E8D3;
  --coral: #FF7A59;
  --coral-light: #FFA184;
  --coral-deep: #E8563A;
  --coral-pale: #FFD9CC;
  --mint: #9ED9B5;
  --mint-deep: #63B98A;
  --mint-wash: #E0F1E5;
  --sky: #9CCBEF;
  --sky-deep: #5E9ED6;
  --sky-wash: #DCEAF8;
  --brown: #6B4A2F;
  --brown-light: #9A7B5F;
  --gold: #E8B84B;
  --gold-pale: #F3DCA8;
  --wood: #8A5A36;
  --wood-light: #A97248;
  --hairline: rgba(138, 90, 54, 0.18);
  --finale-top: #503722;
  --font-head: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "BIZ UDGothic", sans-serif;
  --font-body: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "BIZ UDGothic", sans-serif;
  --font-latin: "Baloo 2", "Zen Maru Gothic", sans-serif;
  --font-voice: "Klee One", "Hiragino Maru Gothic ProN", serif;
  --shadow-soft: 0 10px 30px rgba(107, 74, 47, 0.16);
  --radius-card: 22px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* 日本語の文節折り（Chrome=auto-phrase。非対応ブラウザはbalanceのみ） */
h1, h2, h3 { text-wrap: balance; }
h1, h2, h3, .sub, .lede, .bubble p, .craftcard p, .msg p, .wl-lede, .closing, .demo-chip, .fine-note { word-break: auto-phrase; }
html { scroll-behavior: smooth; }
/* 横はみ出しの根絶（Felestiaの教訓: bodyだけでは iOS Safari に効かない） */
html, body { overflow-x: hidden; overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }

body {
  background:
    radial-gradient(140% 60% at 50% -8%, rgba(243, 220, 168, 0.5), transparent 60%),
    linear-gradient(178deg, var(--cream) 0%, #FDF2E0 50%, var(--cream) 100%);
  color: var(--brown);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.02em;
}

/* 紙の粒子（全面・リクエストゼロ） */
.grain {
  position: fixed; inset: 0; z-index: 40; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.032'/%3E%3C/svg%3E");
}

a { color: var(--sky-deep); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--coral-deep); outline-offset: 3px; border-radius: 6px;
}

/* ---- ページ進行（散歩の現在地） ---- */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 5px; z-index: 70; }
#progress-fill {
  display: block; height: 100%;
  transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, var(--coral) 0%, var(--gold) 100%);
  border-radius: 0 99px 99px 0;
}

/* ---- ヘッダー ---- */
header.site {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 14px;
  padding: 10px clamp(16px, 4vw, 44px);
  background: rgba(255, 246, 233, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { border-radius: 10px; box-shadow: 0 2px 6px rgba(107, 74, 47, 0.25); }
.wordmark {
  font-family: var(--font-latin); font-weight: 800; font-size: 22px;
  letter-spacing: 0.06em; color: var(--brown); line-height: 1.1;
}
.wordmark small {
  display: block; font-family: var(--font-latin); font-weight: 600;
  font-size: 9.5px; letter-spacing: 0.32em; color: var(--wood-light); text-transform: uppercase;
}
nav.site { margin-left: auto; display: flex; gap: clamp(8px, 2.2vw, 26px); align-items: center; }
nav.site a {
  color: var(--brown); text-decoration: none; font-size: 13.5px; font-weight: 700;
  letter-spacing: 0.1em; padding: 14px 4px;
}
nav.site a:hover { color: var(--coral-deep); }

/* ---- ボタン（アプリのクッキーカプセル絵を9-sliceで） ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 700; text-decoration: none; cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
  border: 0; background: none;
}
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
}
.btn:active { transform: translateY(2px); transition-duration: 0.05s; }
.btn-coral {
  height: 64px; min-width: 250px; padding: 0 10px;
  border-style: solid; border-width: 0 32px;
  border-image: url("img/ui/ui_capsule_coral_h84.webp") 0 84 fill / 0 32px stretch;
  color: #FFF6E9; font-size: 17.5px; letter-spacing: 0.06em;
  text-shadow: 0 1.5px 0 rgba(160, 50, 20, 0.4);
}
.btn-cream {
  height: 54px; min-width: 210px; padding: 0 10px;
  border-style: solid; border-width: 0 27px;
  border-image: url("img/ui/ui_capsule_cream_h56.webp") 0 56 fill / 0 27px stretch;
  color: var(--brown); font-size: 15px; letter-spacing: 0.05em;
}
.btn-wood {
  height: 48px; min-width: 180px; padding: 0 14px;
  border-style: solid; border-width: 0 24px;
  border-image: url("img/ui/ui_chip_wood.webp") 0 128 fill / 0 24px stretch;
  color: #FFF6E9; font-size: 15px; letter-spacing: 0.08em;
  text-shadow: 0 1.5px 0 rgba(70, 42, 20, 0.5);
}
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 30px; }
.center-cta { justify-content: center; }

/* ---- セクション共通 ---- */
main { position: relative; z-index: 1; }
section.band { position: relative; padding: clamp(56px, 8vw, 110px) clamp(16px, 5vw, 64px); }
.inner { max-width: 1080px; margin: 0 auto; }
.inner.narrow { max-width: 760px; }
.inner.center { text-align: center; }
.band h2 {
  font-family: var(--font-head); font-weight: 900;
  font-size: clamp(24px, 3.4vw, 38px); letter-spacing: 0.06em; line-height: 1.6;
  color: var(--brown); margin-bottom: 16px;
}
.band h3 { font-family: var(--font-head); font-weight: 700; font-size: 19px; letter-spacing: 0.06em; }
.band .sub { color: var(--brown); max-width: 44em; margin: 0 auto 14px; font-size: 15.5px; }
.inner:not(.center) .sub { margin-left: 0; }
.sub.center { text-align: center; }
.hr-paw {
  height: 3px; border: 0; margin: 0 0 22px; width: 110px; border-radius: 99px;
  background: linear-gradient(90deg, var(--coral), var(--gold) 70%, transparent);
}
.inner.center .hr-paw, .inner.narrow.center .hr-paw { margin-left: auto; margin-right: auto; }

/* フェーズの色ワッシャー（はやあるき=コーラル/ゆっくり=空色）＝上から差す朝の光 */
.band.fast { background: linear-gradient(180deg, var(--coral-pale) 0%, rgba(255, 217, 204, 0) min(34rem, 82%)); }
.band.slow { background: linear-gradient(180deg, var(--sky-wash) 0%, rgba(220, 234, 248, 0) min(34rem, 82%)); }
.band.kind { background: linear-gradient(180deg, var(--mint-wash) 0%, rgba(224, 241, 229, 0) min(34rem, 82%)); }
.band.letterband {
  background:
    radial-gradient(90% 46% at 50% 0%, rgba(232, 184, 75, 0.28), transparent 70%),
    linear-gradient(180deg, var(--gold-pale) 0%, rgba(243, 220, 168, 0) 78%);
}

/* 丘の稜線ディバイダー（次セクションの色で塗る） */
.divider { height: 70px; margin-bottom: -1px; position: relative; z-index: 1; }
.divider svg { display: block; width: 100%; height: 100%; }

/* ---- ヒーロー ---- */
.hero { position: relative; padding: clamp(30px, 5vw, 64px) clamp(16px, 5vw, 64px) 0; min-height: 94svh; display: flex; flex-direction: column; }
.hero-inner {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(18px, 4vw, 56px); align-items: center; width: 100%;
  position: relative; z-index: 3; flex: 1;
}
.kicker {
  font-family: var(--font-latin); font-weight: 600; color: var(--wood-light);
  font-size: 12px; letter-spacing: 0.32em; margin-bottom: 20px;
}
h1.catch { display: grid; gap: 2px; }
h1.catch .cl {
  font-family: var(--font-head); font-weight: 900;
  font-size: clamp(34px, 5.2vw, 62px); line-height: 1.5; letter-spacing: 0.04em;
  color: var(--brown);
}
h1.catch .cl1 { color: var(--coral-deep); }
h1.catch .cl2 { color: var(--sky-deep); }
.hero .lede { margin-top: 20px; max-width: 30em; font-size: clamp(14.5px, 1.5vw, 16px); }
.hero-note { margin-top: 14px; font-size: 12.5px; color: var(--brown-light); letter-spacing: 0.08em; }

.hero-stage { position: relative; justify-self: center; padding-bottom: 10px; }
figure.phone { margin: 0; width: min(66vw, 300px); }
.phone-frame {
  padding: 9px; border-radius: 46px;
  background: linear-gradient(170deg, #8A5A36, #5F3E24);
  box-shadow: inset 0 1px 0 rgba(255, 240, 210, 0.35), var(--shadow-soft), 0 26px 60px rgba(107, 74, 47, 0.3);
}
.phone-frame img { border-radius: 38px; }
figure.phone figcaption {
  margin-top: 12px; text-align: center; color: var(--brown-light);
  font-size: 12px; letter-spacing: 0.12em;
}
.hero-phone { transform: none; }

.hero-cat { position: absolute; left: -136px; bottom: 44px; z-index: 4; }
.hero-bubble { position: absolute; bottom: 252px; left: -118px; width: max-content; max-width: 236px; }

.scrollcue {
  position: relative; z-index: 4; align-self: center;
  margin: 18px 0 12px; color: var(--brown); text-decoration: none;
  font-size: 13px; letter-spacing: 0.14em; font-weight: 700;
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255, 246, 233, 0.82); padding: 9px 18px; border-radius: 99px;
  border: 1.5px solid var(--hairline);
}
.paws-cue { display: inline-flex; gap: 4px; }
.paws-cue i {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--coral); opacity: 0.25;
  animation: cuepulse 1.8s ease-in-out infinite;
}
.paws-cue i:nth-child(2) { animation-delay: 0.3s; }
.paws-cue i:nth-child(3) { animation-delay: 0.6s; }
@keyframes cuepulse { 0%, 100% { opacity: 0.25; } 40% { opacity: 1; } }

.hero-ground {
  position: relative; height: clamp(120px, 20vh, 190px); margin: 0 calc(-1 * clamp(16px, 5vw, 64px));
  background-image: url("img/stages/stage_park_xl.webp");
  background-size: cover; background-position: center 72%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 52%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 52%);
}

/* ---- スプライト（横1列シート＋steps。全ブラウザ対応の本命方式） ---- */
.sprite { background-repeat: no-repeat; background-position: 0% 0; position: relative; }
/* 接地影（キャラが浮いて見えない） */
.hero-cat .sprite::after, .banzai-wrap .sprite::after, .profile-card .sprite::after {
  content: ""; position: absolute; left: 50%; bottom: -9px; translate: -50% 0;
  width: 72%; height: 16px; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(107, 74, 47, 0.26), transparent 72%);
}
.sprite-idle {
  width: 142px; height: 240px;
  background-image: url("img/sprites/idle_sheet.webp");
  background-size: 1600% 100%;
  animation: playidle 2s steps(16, jump-none) infinite;
}
.sprite-idle.big { width: 165px; height: 280px; }
@keyframes playidle { from { background-position-x: 0%; } to { background-position-x: 100%; } }
.sprite-banzai {
  width: 141px; height: 240px;
  background-image: url("img/sprites/banzai_sheet.webp");
  background-size: 1800% 100%;
}
.sprite-banzai.play { animation: playbanzai 1.4s steps(18, jump-none) 2 forwards; }
@keyframes playbanzai { from { background-position-x: 0%; } to { background-position-x: 100%; } }

/* ---- 吹き出し（猫の声・Klee One） ---- */
.bubble {
  position: relative; display: flex; align-items: center; gap: 12px;
  background: linear-gradient(172deg, #FFFBF2, var(--cream-deep));
  border: 2px solid #EBD9B8; border-radius: 24px;
  padding: 13px 20px; box-shadow: 0 6px 18px rgba(107, 74, 47, 0.13);
  width: fit-content;
}
.bubble p { font-family: var(--font-voice); font-weight: 400; font-size: 15.5px; line-height: 1.85; color: var(--brown); }
.bubble-face { border-radius: 50%; flex: 0 0 auto; width: 48px; height: 48px; object-fit: cover; object-position: 50% 6%; border: 2px solid #EBD9B8; background: #FFFBF2; }
.bubble-tail {
  position: absolute; left: 42px; bottom: -10px; width: 18px; height: 18px;
  background: inherit; border: 2px solid #EBD9B8; border-top: 0; border-left: 0;
  transform: rotate(45deg); border-radius: 0 0 6px 0;
  background: var(--cream-deep);
}
.quote-bubble { margin-top: 20px; }
.center-bubble { margin-left: auto; margin-right: auto; }
.hero-bubble p, .cbubble { font-size: 14px; }

/* ---- 共感（表情ストリップ） ---- */
.emo-strip { display: flex; justify-content: center; gap: clamp(8px, 2vw, 18px); margin-top: 30px; }
.emo-strip img {
  border-radius: 50%; border: 2px solid #EBD9B8; background: #FFFBF2;
  padding: 3px; box-shadow: 0 4px 10px rgba(107, 74, 47, 0.12);
  animation: floaty 5.4s ease-in-out infinite;
}
.emo-strip img:nth-child(2n) { animation-duration: 6.6s; animation-delay: 0.5s; }
.emo-strip img:nth-child(3n) { animation-delay: 1.1s; }
@keyframes floaty { 50% { transform: translateY(-7px); } }

/* ---- でか文字デモ ---- */
.demo-board {
  position: relative; width: min(680px, 100%); margin: 26px auto 18px;
  border-radius: 30px; padding: clamp(30px, 5vw, 52px) 20px 40px;
  background: linear-gradient(178deg, var(--coral-light), var(--coral) 55%, var(--coral-deep));
  box-shadow: inset 0 2px 0 rgba(255, 250, 235, 0.45), inset 0 -8px 18px rgba(160, 50, 20, 0.25), var(--shadow-soft);
  text-align: center; transition: background 0.9s ease;
  overflow: hidden;
}
.demo-board.slowmode { background: linear-gradient(178deg, #BFDCF5, var(--sky) 55%, var(--sky-deep)); }
.demo-word {
  font-family: var(--font-head); font-weight: 900;
  font-size: clamp(56px, 11vw, 108px); line-height: 1.25; letter-spacing: 0.04em;
  color: #FFF9EC;
  text-shadow: 0 3px 0 rgba(107, 50, 25, 0.35), 0 12px 30px rgba(107, 50, 25, 0.3);
}
.demo-board.bump .demo-word { animation: bump 0.5s ease; }
@keyframes bump { 40% { transform: scale(1.045); } }
.demo-pills { display: flex; justify-content: center; gap: 8px; margin-bottom: 16px; }
.demo-pills .dp {
  width: 46px; height: 14px; border-radius: 99px;
  background: rgba(255, 249, 236, 0.42); box-shadow: inset 0 1px 2px rgba(107, 50, 25, 0.25);
}
.demo-pills .dp.on { background: #FFF9EC; }
.demo-touch { position: absolute; inset: 0; background: transparent; border: 0; cursor: pointer; }
.chip-wood {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 4px 20px;
  border-style: solid; border-width: 0 20px;
  border-image: url("img/ui/ui_chip_wood_h40.webp") 0 80 fill / 0 20px stretch;
  color: #FFF6E9; font-size: 13px; font-weight: 700; letter-spacing: 0.06em;
  text-decoration: none; text-shadow: 0 1px 0 rgba(70, 42, 20, 0.5); line-height: 1.7;
}
.chip-wood.note { margin-top: 4px; }
.demo-chip { text-align: center; color: var(--brown-light); font-size: 13.5px; margin-top: 14px; letter-spacing: 0.04em; }
#demo .hr-paw, #demo h2, #demo .sub { text-align: center; margin-left: auto; margin-right: auto; }

/* ---- 2カラム ---- */
.inner.split {
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: clamp(24px, 4.5vw, 64px); align-items: center;
}
.inner.split figure.phone { justify-self: center; }
.inner.split.rev > div { order: 2; }
.inner.split.rev > figure { order: 1; }
.cards3 { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 22px 0 6px; }
.sci3 { grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2.4vw, 24px); margin: 30px 0 26px; }
.craftcard {
  border-radius: var(--radius-card);
  background: linear-gradient(168deg, #FFFBF2, var(--cream-deep));
  border: 1.5px solid #EBD9B8;
  box-shadow: 0 1px 0 #FFFDF7 inset, 0 8px 22px rgba(107, 74, 47, 0.12);
  padding: 20px 22px;
}
.craftcard:nth-child(odd) { transform: rotate(-0.35deg); }
.craftcard:nth-child(even) { transform: rotate(0.3deg); }
.craftcard h3 { color: var(--coral-deep); margin-bottom: 6px; font-size: 17px; }
.craftcard p { font-size: 14px; line-height: 1.95; }
.craftcard.sci h3 { color: var(--brown); }
.craftcard.sci h3::before { content: "✦ "; color: var(--gold); }

/* ---- 完走（ばんざい＋紙吹雪） ---- */
.banzai-wrap { position: relative; margin-top: 26px; height: 250px; display: grid; justify-items: center; }
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti i {
  position: absolute; top: -12px; width: 9px; height: 13px; border-radius: 3px;
  opacity: 0; animation: fall 2.4s ease-in forwards;
}
@keyframes fall {
  0% { opacity: 0; transform: translateY(0) rotate(0); }
  8% { opacity: 1; }
  100% { opacity: 0.9; transform: translateY(240px) rotate(320deg); }
}

/* ---- 手紙（封筒→開封→往復チャット） ---- */
.letterband .sub { margin-bottom: 8px; }
.envelope {
  position: relative; width: min(430px, 86vw); aspect-ratio: 43 / 28;
  margin: 34px auto 20px; transform: rotate(-1.4deg);
  filter: drop-shadow(0 14px 26px rgba(107, 74, 47, 0.22));
  perspective: 700px; transition: transform 0.6s ease, opacity 0.6s ease;
}
.env-body {
  position: absolute; inset: 0; border-radius: 12px;
  background: linear-gradient(176deg, #FFFBF2, #F7EAD3);
  border: 1.5px solid #E8D9BE;
}
.env-body::after {
  content: ""; position: absolute; inset: 0; border-radius: 12px;
  background: linear-gradient(115deg, transparent 46%, rgba(232, 184, 75, 0.12) 47%, transparent 62%);
}
.env-flap {
  position: absolute; top: 0; left: 0; right: 0; height: 56%;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(178deg, #FBEFD9, #EFDDBE);
  border-radius: 12px 12px 0 0;
  transform-origin: top center; transition: transform 0.65s cubic-bezier(0.3, 0.9, 0.3, 1);
  z-index: 3;
}
.envelope.open .env-flap { transform: rotateX(-165deg); }
.envelope.open { transform: rotate(0deg) scale(0.94); opacity: 0.55; }
.env-seal {
  position: absolute; left: 50%; top: 52%; translate: -50% -50%; z-index: 4;
  width: 62px; height: 62px; border-radius: 50%;
  background:
    url("img/ui/ui_paw_filled.webp") center / 34px auto no-repeat,
    radial-gradient(circle at 34% 30%, var(--gold-pale), var(--gold) 62%, #C8973B);
  box-shadow: 0 3px 8px rgba(107, 74, 47, 0.35), inset 0 1px 0 rgba(255, 250, 230, 0.6);
  transition: opacity 0.4s ease;
}
.envelope.open .env-seal { opacity: 0; }
.env-addr {
  position: absolute; left: 0; bottom: 12%; width: 100%; text-align: center; z-index: 2;
  font-family: var(--font-voice); font-weight: 600; font-size: 22px; letter-spacing: 0.2em;
  color: var(--brown);
}
.env-stamp {
  position: absolute; top: 10px; right: 12px; z-index: 2;
  width: 54px; height: 54px; object-fit: cover; object-position: 50% 6%;
  background: #FFFBF2; border: 2px dashed #D9C6A6; border-radius: 8px; padding: 3px;
}
#open-letter { display: block; margin: 0 auto; }

.chat { max-width: 560px; margin: 30px auto 0; text-align: left; display: grid; gap: 12px; }
.msg { display: flex; gap: 10px; align-items: flex-end; opacity: 0; translate: 0 10px; transition: opacity 0.35s ease, translate 0.35s ease; }
.msg.in { opacity: 1; translate: 0 0; }
.msg .face { width: 42px; height: 42px; border-radius: 50%; border: 2px solid #EBD9B8; background: #FFFBF2; flex: 0 0 auto; object-fit: cover; object-position: 50% 6%; }
.msg p {
  font-family: var(--font-voice); font-size: 15px; line-height: 1.9; color: var(--brown);
  background: linear-gradient(172deg, #FFFBF2, var(--cream-deep));
  border: 1.5px solid #EBD9B8; border-radius: 4px 18px 18px 18px;
  padding: 10px 16px; max-width: 24em;
  box-shadow: 0 4px 12px rgba(107, 74, 47, 0.1);
}
.msg.me { justify-content: flex-end; }
.msg.me p {
  background: linear-gradient(172deg, #FFE3D8, var(--coral-pale));
  border-color: #F2C4B2; border-radius: 18px 4px 18px 18px;
}
.chip-row { display: flex; justify-content: flex-end; gap: 10px; }
.chip-row .chip {
  font-family: var(--font-voice); font-size: 14.5px; color: var(--coral-deep); cursor: pointer;
  background: #FFFBF2; border: 2px solid var(--coral-light); border-radius: 99px;
  padding: 10px 20px; min-height: 46px;
  box-shadow: 0 4px 0 var(--coral-pale);
  transition: transform 0.12s ease;
  animation: chippulse 2.4s ease-in-out 2;
}
.chip-row .chip:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--coral-pale); }
@keyframes chippulse { 0%, 100% { transform: translateY(0); } 12% { transform: translateY(-3px); } 24% { transform: translateY(0); } }
.chat-note { margin-top: 16px; font-size: 12px; color: var(--brown-light); letter-spacing: 0.08em; text-align: center; }
.closing {
  margin: 26px auto 0; font-size: clamp(17px, 2.4vw, 21px); font-weight: 600;
  color: var(--brown); text-align: center; letter-spacing: 0.04em;
}
.klee { font-family: var(--font-voice); }

/* ---- 舞台絵巻 ---- */
.stagestrip {
  display: flex; gap: clamp(14px, 2vw, 22px);
  overflow-x: auto; scroll-snap-type: x proximity;
  padding: 30px clamp(16px, 5vw, 64px) 40px;
  -webkit-overflow-scrolling: touch;
}
.stagestrip::-webkit-scrollbar { height: 8px; }
.stagestrip::-webkit-scrollbar-thumb { background: var(--gold-pale); border-radius: 99px; }
.win {
  position: relative; margin: 0; flex: 0 0 clamp(190px, 22vw, 240px);
  scroll-snap-align: center;
}
.win img {
  border-radius: 18px;
  box-shadow: 0 0 0 1.5px rgba(232, 184, 75, 0.5), 0 14px 32px rgba(107, 74, 47, 0.22);
}
.win figcaption { margin: 12px auto 0; width: fit-content; }
.win:nth-child(odd) { transform: translateY(14px); }
.win .veil {
  position: absolute; inset: 0 0 52px; border-radius: 18px;
  background: rgba(255, 246, 233, 0.9);
  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'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
  display: grid; place-items: center;
}
.win .veil::after {
  content: "?"; font-family: var(--font-voice); font-weight: 600;
  font-size: 58px; color: rgba(107, 74, 47, 0.45);
  text-shadow: 0 1px 0 rgba(255, 251, 242, 0.8);
}
.win.frost img { filter: blur(10px) saturate(0.4) brightness(1.06); }
.win.final img { filter: blur(5px) brightness(0.6) saturate(0.75); }
.win.final .veil.dark {
  background: linear-gradient(184deg, rgba(52, 32, 15, 0.92), rgba(76, 48, 24, 0.8));
  inset: 0; border-radius: 18px;
}
.win.final .veil::after { content: none; }
.win.final { flex-basis: clamp(220px, 26vw, 280px); }
.finalcap {
  position: absolute; inset: auto 12px 18px; z-index: 2;
  color: var(--cream); font-size: 13.5px; font-weight: 700; line-height: 1.9;
  letter-spacing: 0.08em; text-align: center;
  text-shadow: 0 1px 4px rgba(60, 36, 16, 0.8);
}

/* ---- 科学（木看板） ---- */
.signboard {
  width: min(600px, 92vw); aspect-ratio: 887 / 378;
  margin: 0 auto; display: grid; place-items: center;
  background: url("img/ui/ui_signboard.webp") center / 100% 100% no-repeat;
  filter: drop-shadow(0 10px 22px rgba(107, 74, 47, 0.25));
}
.signboard h2 { margin: 0; font-size: clamp(22px, 3.4vw, 34px); padding-bottom: 8px; }
#science .sub.center { text-align: center; margin: 22px auto 0; }
.sources-h { text-align: center; font-weight: 700; color: var(--brown-light); font-size: 13px; letter-spacing: 0.2em; margin-top: 10px; }
.sources { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; margin: 12px 0 26px; }
.fine-note { text-align: center; color: var(--brown-light); font-size: 12px; line-height: 2; max-width: 46em; margin: 0 auto 6px; }
.midcta { display: grid; justify-items: center; gap: 6px; margin-top: 34px; }
.midcta .cta-row { justify-content: center; margin-top: 16px; }

/* ---- 責めない（週ゲージ） ---- */
.gauge {
  width: min(540px, 94vw); aspect-ratio: 563 / 240;
  margin: 28px auto; display: grid; place-content: center; gap: 6px;
  background: url("img/ui/ui_signboard_h120.webp") center / 100% 100% no-repeat;
  filter: drop-shadow(0 10px 22px rgba(107, 74, 47, 0.22));
}
.gauge-label { font-size: 14px; font-weight: 700; letter-spacing: 0.14em; text-align: center; }
.gauge-paws { display: flex; gap: clamp(4px, 1vw, 9px); justify-content: center; }
.paw {
  width: clamp(24px, 4.4vw, 34px); aspect-ratio: 246 / 235; position: relative;
  background: url("img/ui/ui_paw_empty.webp") center / contain no-repeat;
}
.paw::after {
  content: ""; position: absolute; inset: 0;
  background: url("img/ui/ui_paw_filled.webp") center / contain no-repeat;
  opacity: 0; transform: scale(1.5);
}
.gauge.on .paw.fill::after {
  animation: stampin 0.4s cubic-bezier(0.2, 1.3, 0.4, 1) forwards;
  animation-delay: calc(var(--i) * 0.12s);
}
@keyframes stampin { to { opacity: 1; transform: scale(1) rotate(0); } }
.gauge-val { font-family: var(--font-latin); font-weight: 800; text-align: center; font-size: 17px; letter-spacing: 0.04em; }
.bigquote { margin: 34px auto 6px; }
.bigquote p { font-size: clamp(24px, 3.6vw, 34px); font-weight: 600; letter-spacing: 0.1em; color: var(--brown); }
.bigquote cite { display: block; margin-top: 10px; font-style: normal; font-size: 12.5px; color: var(--brown-light); letter-spacing: 0.1em; }
.records { margin-top: clamp(40px, 6vw, 70px); }

/* ---- プロフィールカード ---- */
.profile-card {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 4vw, 48px);
  align-items: center; max-width: 820px;
  background: linear-gradient(168deg, #FFFBF2, var(--cream-deep));
  border: 1.5px solid #EBD9B8; border-radius: 28px;
  box-shadow: var(--shadow-soft); padding: clamp(24px, 4vw, 44px);
  transform: rotate(-0.5deg);
}
.profile-card::before {
  content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--coral-light), var(--coral-deep));
  top: 14px; left: 50%; box-shadow: 0 2px 4px rgba(107, 74, 47, 0.4);
}
.inner.profile-card { position: relative; }
.profile-lines { list-style: none; margin: 12px 0 4px; }
.profile-lines li { font-size: 15.5px; line-height: 2.2; }
.profile-lines li::before { content: "・"; color: var(--coral); font-weight: 900; }

/* ---- 最終面（夜明け前・丘は見せ切らない） ---- */
.finale {
  position: relative; color: var(--cream); overflow: hidden;
  background: linear-gradient(182deg, #503722 0%, #6B4A2F 36%, #9A6B44 68%, #C89263 100%);
  padding-bottom: clamp(70px, 9vw, 120px);
}
.finale::before {
  content: ""; position: absolute; inset: auto 0 0; height: 52%;
  background: url("img/stages/stage_hill_xl.webp") center 68% / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 82%);
  mask-image: linear-gradient(180deg, transparent, #000 82%);
  opacity: 0.5;
  filter: brightness(0.52) saturate(0.6);
}
/* 夜明け前の地平の光（丘の稜線にだけ、gold の一筋） */
.finale::after {
  content: ""; position: absolute; inset: auto 0 0; height: 30%;
  background: radial-gradient(60% 90% at 50% 100%, rgba(232, 184, 75, 0.35), transparent 70%);
  pointer-events: none;
}
.finale .inner { position: relative; z-index: 2; }
.finale h2 { color: var(--cream); text-shadow: 0 2px 14px rgba(50, 30, 12, 0.6); }
.finale .sub { color: var(--gold-pale); }
.finale-bubble { display: grid; justify-items: center; margin: 26px 0 4px; }

/* リリース通知＝手紙の予約（その場で開くダイアログ・Felestia方式） */
dialog#waitlist {
  margin: auto; width: min(440px, calc(100vw - 32px));
  background: linear-gradient(176deg, #FFFBF2, #F7EAD3);
  border: 1.5px solid #E8D9BE; border-radius: 18px;
  box-shadow: 0 24px 60px rgba(40, 24, 10, 0.45);
  padding: 30px 28px 24px;
  color: var(--brown);
}
dialog#waitlist::backdrop { background: rgba(60, 40, 20, 0.5); backdrop-filter: blur(3px); }
dialog#waitlist:focus, dialog#waitlist:focus-visible { outline: none; }
#wl-form { position: relative; }
#wl-form h2 { font-size: 19px; font-weight: 600; margin: 0 36px 8px 0; letter-spacing: 0.04em; }
.wl-close {
  position: absolute; top: -12px; right: -10px; width: 44px; height: 44px; border-radius: 50%;
  background: #FFFDF8; border: 1.5px solid #E3D2B4; color: var(--brown);
  font-size: 19px; cursor: pointer;
}
.wl-lede { font-size: 13px; line-height: 1.95; color: var(--brown-light); margin-bottom: 18px; }
#wl-form .field { margin-bottom: 14px; }
#wl-form label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--wood); margin-bottom: 6px; }
#wl-form input[type="email"] {
  width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 12px;
  background: #FFFDF8; border: 1.5px solid #E3D2B4;
  color: var(--brown); font-size: 15px; font-family: var(--font-body);
}
.wl-submit { width: 100%; margin-top: 6px; }
#wl-status { min-height: 1.6em; margin-top: 12px; font-size: 13.5px; color: var(--coral-deep); }
.wl-privacy { margin-top: 12px; font-size: 11.5px; color: var(--brown-light); line-height: 1.9; }
.wl-privacy a { color: var(--wood); }
.postmark {
  position: absolute; top: 14px; right: 16px; width: 86px; height: 86px;
  border: 3px solid rgba(232, 86, 58, 0.6); border-radius: 50%;
  display: grid; place-items: center;
  background: url("img/ui/ui_paw_filled.webp") center 14px / 30px auto no-repeat;
  color: var(--coral-deep); font-family: var(--font-voice); font-size: 14px; font-weight: 600;
  padding-top: 26px; transform: rotate(-14deg) scale(0); opacity: 0;
}
.postmark.on { animation: stampin 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) 0.15s forwards; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- フッター ---- */
footer.site {
  position: relative; z-index: 1;
  background: var(--cream-deep);
  border-top: 1px solid var(--hairline);
  padding: 44px clamp(16px, 5vw, 64px) 60px;
  color: var(--brown); font-size: 13.5px;
}
footer .cols { max-width: 1080px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 26px 56px; align-items: flex-start; }
.brand-foot { display: flex; gap: 12px; align-items: center; margin-right: auto; }
.brand-foot img { border-radius: 10px; }
footer nav { display: grid; gap: 10px; }
footer a { color: var(--brown); text-decoration: none; padding: 4px 0; }
footer a:hover { color: var(--coral-deep); }
footer .fine { max-width: 1080px; margin: 22px auto 0; font-size: 11px; color: var(--brown-light); line-height: 1.9; }

/* ---- コンパニオン（記名の仕掛け＝止まると、彼は待つ） ---- */
.companion { position: fixed; right: clamp(10px, 2.4vw, 28px); bottom: 8px; z-index: 50; pointer-events: none; }
.csprite {
  width: 54px; height: 96px;
  background-image: url("img/sprites/walk_sheet.webp");
  background-size: 2700% 100%;
  filter: drop-shadow(0 4px 6px rgba(107, 74, 47, 0.3));
}
.csprite.idling {
  width: 57px;
  background-image: url("img/sprites/idle_sheet.webp");
  background-size: 1600% 100%;
  animation: playidle 2s steps(16, jump-none) infinite;
}
.cbubble {
  position: absolute; bottom: 102px; right: 0; width: max-content; max-width: 230px;
  background: linear-gradient(172deg, #FFFBF2, var(--cream-deep));
  border: 2px solid #EBD9B8; border-radius: 16px 16px 4px 16px;
  padding: 9px 14px; font-family: var(--font-voice); font-size: 13px; line-height: 1.8;
  color: var(--brown); box-shadow: 0 6px 16px rgba(107, 74, 47, 0.18);
  opacity: 0; translate: 0 6px; transition: opacity 0.4s ease, translate 0.4s ease;
}
.cbubble.show { opacity: 1; translate: 0 0; }

/* ---- 表示アニメーション ---- */
.reveal { opacity: 0; translate: 0 22px; transition: opacity 0.7s ease, translate 0.7s ease; }
.reveal.in { opacity: 1; translate: 0 0; }
.reveal.d1 { transition-delay: 0.1s; }
.reveal.d2 { transition-delay: 0.2s; }
.reveal.d3 { transition-delay: 0.3s; }

/* ---- 法務・サポート ---- */
body.subpage { background: linear-gradient(178deg, var(--cream) 0%, #FDF2E0 100%); }
.doc { max-width: 800px; margin: 0 auto; padding: clamp(40px, 7vw, 80px) clamp(16px, 5vw, 40px) 90px; }
.doc h1 { font-weight: 900; font-size: clamp(24px, 3.4vw, 32px); letter-spacing: 0.08em; margin-bottom: 10px; }
.doc .updated { color: var(--brown-light); font-size: 13.5px; margin-bottom: 36px; }
.doc h2 { font-size: 17.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--wood); margin: 36px 0 10px; }
.doc h3 { font-size: 15.5px; margin: 24px 0 8px; }
.doc p, .doc li { font-size: 14.5px; line-height: 2.05; }
.doc ul { padding-left: 1.5em; margin: 6px 0 14px; }
.doc .backlink { display: inline-block; margin-top: 48px; color: var(--coral-deep); font-weight: 700; text-decoration: none; }
.doc h2.faq-q { font-size: 15px; margin-top: 26px; color: var(--coral-deep); }
form#contact { margin: 8px 0 56px; display: grid; gap: 20px; max-width: 620px; }
form#contact .field { display: grid; gap: 8px; }
form#contact label { color: var(--wood); font-size: 13.5px; font-weight: 700; letter-spacing: 0.06em; }
form#contact input, form#contact textarea {
  width: 100%; background: #FFFDF8; color: var(--brown);
  border: 1.5px solid #E3D2B4; border-radius: 12px;
  padding: 13px 14px; font-family: var(--font-body); font-size: 15px; line-height: 1.8;
}
form#contact button { justify-self: start; }
form#contact .hint { color: var(--brown-light); font-size: 12.5px; }
#form-status { min-height: 1.6em; color: var(--coral-deep); font-size: 14px; }

/* ---- レスポンシブ ---- */
.hide-sp { display: inline-block; }
@media (max-width: 900px) {
  nav.site a.hide-sp { display: none; }
  .hero { min-height: auto; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-stage { order: 2; margin-top: 10px; width: 100%; display: grid; justify-items: center; }
  .hero-copy { order: 1; text-align: center; }
  .hero-copy .lede { margin-left: auto; margin-right: auto; }
  .cta-row { justify-content: center; }
  h1.catch .cl { font-size: clamp(31px, 8.6vw, 40px); }
  .hero-cat { left: -4px; bottom: 34px; transform: scale(0.62); transform-origin: bottom left; }
  .hero-bubble { max-width: 170px; left: -4px; bottom: 246px; }
  .hero-bubble p { font-size: 12.5px; }
  .inner.split, .inner.split.rev { grid-template-columns: 1fr; }
  .inner.split > figure { order: -1; }
  .inner.split.rev > div, .inner.split.rev > figure { order: revert; }
  .inner.split.rev > figure { order: -1; }
  .sci3 { grid-template-columns: 1fr; }
  .banzai-wrap { height: 220px; display: grid; justify-items: center; }
  .win { flex-basis: 64vw; }
  .win.final { flex-basis: 70vw; }
  .companion { right: 8px; bottom: 6px; }
  .csprite { width: 40px; height: 72px; }
  .csprite.idling { width: 43px; }
  .cbubble { bottom: 78px; max-width: 180px; font-size: 12px; }
  .demo-word { font-size: clamp(46px, 15vw, 76px); }
  .profile-card { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .profile-lines li { text-align: left; }
}

/* ---- reduced-motion（個別に停止・機能は保つ） ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; translate: 0 0; transition: none; }
  .sprite-idle, .csprite.idling, .emo-strip img, .paws-cue i { animation: none; }
  .sprite-banzai.play { animation: none; background-position-x: 100%; }
  .demo-board, .env-flap, .envelope, .msg, .cbubble { transition: none; }
  .demo-board.bump .demo-word { animation: none; }
  .chip-row .chip { animation: none; }
  .confetti { display: none; }
  .companion { display: none; }
  .gauge.on .paw.fill::after { animation: none; opacity: 1; transform: none; }
  .postmark.on { animation: none; opacity: 1; transform: rotate(-14deg) scale(1); }
}


/* ---- Talk drop（おしゃべり吹き出し・旧封筒の置き換え・2026-07-13 世界観転換） ---- */
.band.talkband{background:linear-gradient(180deg,var(--gold-pale),#F8ECCB)}
.talkband .talkdrop{position:relative;width:min(300px,80vw);margin:30px auto 22px;background:#fff;
  border-radius:26px;padding:24px 28px;display:flex;align-items:center;justify-content:center;gap:14px;
  box-shadow:0 16px 36px rgba(107,74,47,.2);animation:drop-in .7s cubic-bezier(.2,.9,.3,1.4)}
@keyframes drop-in{0%{opacity:0;transform:translateY(-22px) scale(.9)}100%{opacity:1;transform:none}}
.talkdrop-face{border-radius:50%;background:var(--cream-deep);flex:none}
.talkdrop-dots{display:inline-flex;gap:6px}
.talkdrop-dots i{width:9px;height:9px;border-radius:50%;background:var(--coral-light);animation:dotpulse 1.2s ease-in-out infinite}
.talkdrop-dots i:nth-child(2){animation-delay:.2s}
.talkdrop-dots i:nth-child(3){animation-delay:.4s}
@keyframes dotpulse{50%{transform:translateY(-5px);background:var(--coral)}}
.talkdrop-tail{position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);width:0;height:0;
  border:11px solid transparent;border-top-color:#fff;border-bottom:0}
.talkdrop.open{transform:scale(.96);opacity:.55;transition:transform .4s,opacity .4s}

/* ---- Badges（肉球バッジ） ---- */
.badges{display:flex;flex-wrap:wrap;gap:clamp(16px,3vw,34px);justify-content:center;margin-top:30px}
.badge{width:clamp(120px,26vw,160px);text-align:center}
.badge img{width:clamp(96px,20vw,120px);height:auto;margin:0 auto;filter:drop-shadow(0 8px 14px rgba(107,74,47,.22))}
.badge figcaption{font-weight:700;font-size:14px;color:var(--brown);margin-top:10px}

/* ---- Widget shot ---- */
.phone.widget-shot{max-width:330px}

/* ---- Widget cards（ホーム画面ウィジェットの実物） ---- */
.widgets{display:flex;gap:20px;justify-content:center;align-items:center;flex-wrap:wrap;
  margin:30px auto 18px;padding:clamp(24px,5vw,40px);border-radius:28px;max-width:640px;
  background:linear-gradient(160deg,#EAF3FB,#FFE9DF);box-shadow:inset 0 2px 12px rgba(107,74,47,.08)}
.wcard{border-radius:22px;overflow:hidden;box-shadow:0 12px 28px rgba(107,74,47,.22)}
.wcard img{display:block;height:auto}
.wcard-m img{width:clamp(230px,58vw,300px)}
.wcard-s img{width:clamp(118px,28vw,142px)}