/* ===========================================
   ABOUT FRIENDS — Character Encyclopedia
   バットン & アモ 公式図鑑
   =========================================== */

:root{
  /* About The Fit · Fitness Studio HP 基調に準拠 */
  --bg-0: #F4EFE3;          /* cream（メイン背景） */
  --bg-1: #FAF6EA;          /* paper（やや明るい） */
  --bg-2: #FFFFFF;          /* カード */
  --bg-3: #EDE7DA;          /* 淡いベージュ（深さ表現） */
  --ink:  #1F2C29;          /* 深い緑黒 = 文字メイン */
  --ink-soft: #5D6864;      /* サブテキスト */
  --ink-mute: #8A9591;      /* 補助テキスト */
  --line: rgba(31,44,41,.08);
  --line-strong: rgba(31,44,41,.18);

  /* メインアクセント = ティール（HP と同じ） */
  --teal:      #18564F;
  --deepteal:  #0F3F38;
  --teal-mid:  #26786F;
  --teal-pale: #A8C5BF;

  /* キャラアクセント（フィットネスHPの差し色 #CEE24D を基軸に） */
  --lime:      #CEE24D;     /* フィットネス事業の差し色 */
  --lime-deep: #B5C73C;
  --batton:    #CEE24D;     /* バットン= 鮮やか黄緑（背景・バー・グロー用） */
  --batton-2:  #B5C73C;
  --batton-text: #6F8520;   /* バットンの文字色（cream 背景でも読める深い黄緑） */
  --batton-glow: rgba(206,226,77,.35);
  --amo:       #18564F;     /* アモ= ティール（MY PACE / 落ち着き） */
  --amo-2:     #0F3F38;
  --amo-text:  #18564F;     /* アモの文字色（そのままで OK） */
  --amo-glow:  rgba(24,86,79,.32);
  --gold:      #C8A14A;

  /* タイポ（HPと同じファミリー） */
  --f-jp: 'Noto Sans JP', system-ui, -apple-system, 'Hiragino Kaku Gothic ProN', sans-serif;
  --f-jp-serif: 'Noto Serif JP', 'Hiragino Mincho ProN', serif;
  --f-en: 'Source Serif 4', 'Times New Roman', serif;
  --f-mono: 'Source Serif 4', ui-monospace, monospace;

  --radius: 18px;
  --radius-s: 10px;
}

/* リセット */
*,*::before,*::after{ box-sizing: border-box; }
html,body{ margin:0; padding:0; background: var(--bg-0); color: var(--ink); }
html{ scroll-behavior: smooth; }
body{
  font-family: var(--f-jp);
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: .02em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }

/* ============ 背景：温かい紙＋微粒子 ============ */
#bg-stars{
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  z-index: -3;
  pointer-events: none;
  opacity: .5;
}
.bg-overlay{
  position: fixed; inset: 0; z-index: -2; pointer-events:none;
  background:
    radial-gradient(ellipse at 18% 20%, rgba(201,122,43,.10), transparent 55%),
    radial-gradient(ellipse at 82% 78%, rgba(92,127,74,.10), transparent 55%),
    linear-gradient(180deg, #F4EFE3 0%, #FAF6EA 50%, #F2ECDC 100%);
}
.bg-grid{
  position: fixed; inset: 0; z-index: -1; pointer-events:none; opacity: .25;
  background-image:
    linear-gradient(rgba(31,44,41,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31,44,41,.06) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 80% 60% at center, #000 50%, transparent 100%);
}

/* ============ ヘッダー ============ */
.hd{
  position: fixed; top: 0; left:0; right:0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 28px;
  z-index: 50;
  background: linear-gradient(180deg, rgba(250,246,234,.92) 0%, rgba(250,246,234,0) 100%);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hd-logo{ display: flex; align-items: center; gap: 12px; }
.hd-logo__img{
  height: 32px; width: auto; display: block;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.hd-logo:hover .hd-logo__img{ transform: rotate(-3deg); }
.hd-logo__divider{
  color: var(--ink-mute);
  font-family: var(--f-en); font-style: italic;
  font-size: 18px;
  margin: 0 2px;
}
.hd-logo__sub{
  font-family: var(--f-en); font-style: italic;
  font-size: 12px; letter-spacing: .18em;
  color: var(--ink-soft);
  text-transform: uppercase;
}

.hd-nav{ display: flex; align-items: center; gap: 26px; font-size: 13px; }
.hd-nav a{ color: var(--ink-soft); transition: color .2s; letter-spacing: .08em; }
.hd-nav a:hover{ color: var(--teal); }
.hd-cta{
  padding: 9px 18px; border-radius: 100px;
  color: var(--ink) !important;
  background: var(--lime);
  font-weight: 700;
  transition: all .25s;
  box-shadow: 0 2px 8px rgba(206,226,77,.4);
}
.hd-cta:hover{
  background: var(--lime-deep);
  color: #FAF6EA !important;
  transform: translateY(-1px);
}

@media (max-width: 720px){
  .hd{ padding: 14px 16px; }
  .hd-nav{ gap: 14px; font-size: 12px; }
  .hd-nav a:not(.hd-cta){ display: none; }
  .hd-logo__divider, .hd-logo__sub{ display: none; }
  .hd-logo__img{ height: 28px; }
}

/* ============ HERO ============ */
.hero{
  position: relative;
  min-height: 100vh;
  display: grid; place-items: center;
  padding: 120px 24px 80px;
  overflow: hidden;
}
.hero__bg{ position: absolute; inset: 0; pointer-events:none; }
.hero__glow{
  position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%;
  filter: blur(140px); opacity: .15;
  animation: drift 18s ease-in-out infinite alternate;
}
.hero__glow--orange{ background: var(--batton); top: -20vmax; left: -20vmax; }
.hero__glow--green { background: var(--lime);   bottom: -20vmax; right: -20vmax; animation-delay: -9s; }
@keyframes drift{
  0%{ transform: translate(0,0) scale(1); }
  100%{ transform: translate(8vmax,4vmax) scale(1.1); }
}

.hero__inner{ position: relative; max-width: 1180px; width: 100%; text-align: center; z-index: 2; }
.hero__eyebrow{
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .35em;
  color: var(--ink-mute); margin: 0 0 24px;
}
.hero__title{
  font-family: var(--f-jp-serif); font-weight: 900;
  font-size: clamp(40px, 8vw, 96px);
  line-height: 1.1; margin: 0;
  letter-spacing: -.01em;
  position: relative;
}
.hero__title-l1{ display: block; color: var(--ink); }
.hero__title-l2{
  display: inline-block;
  position: relative;
  /* 視認性最優先：固定の濃いティール色（cream 背景で常時くっきり読める） */
  color: var(--teal);
}

/* 1 文字ずつバウンドイン */
.hero__title .ch{
  display: inline-block;
  opacity: 0;
  transform: translateY(40px) rotate(-8deg);
  animation: chBounceIn .8s cubic-bezier(.34, 1.56, .64, 1) forwards;
}
.hero__title-l1 .ch:nth-child(1){ animation-delay: 0.10s; }
.hero__title-l1 .ch:nth-child(2){ animation-delay: 0.18s; }
.hero__title-l1 .ch:nth-child(3){ animation-delay: 0.26s; }
.hero__title-l1 .ch:nth-child(4){ animation-delay: 0.34s; }
.hero__title-l1 .ch:nth-child(5){ animation-delay: 0.42s; }
.hero__title-l2 .ch:nth-child(1){ animation-delay: 0.60s; }
.hero__title-l2 .ch:nth-child(2){ animation-delay: 0.70s; }
.hero__title-l2 .ch:nth-child(3){ animation-delay: 0.80s; }
.hero__title-l2 .ch:nth-child(4){ animation-delay: 0.90s; }
.hero__title-l2 .ch:nth-child(5){ animation-delay: 1.00s; }
@keyframes chBounceIn{
  0%  { opacity: 0; transform: translateY(40px) rotate(-8deg) scale(.8); }
  60% { opacity: 1; transform: translateY(-8px) rotate(2deg) scale(1.05); }
  100%{ opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}
/* ホバーで個別に跳ねる */
@media (hover: hover){
  .hero__title .ch{ cursor: default; transition: transform .25s cubic-bezier(.34,1.56,.64,1), color .25s; }
  .hero__title .ch:hover{
    transform: translateY(-10px) rotate(-4deg) scale(1.15);
    color: var(--batton-text);
  }
}

/* キラキラ装飾（「出会おう。」の右上） */
.hero__title-spark{
  position: absolute;
  top: -18%; right: -8%;
  width: clamp(50px, 7vw, 80px); height: clamp(50px, 7vw, 80px);
  color: var(--batton);
  filter: drop-shadow(0 0 12px var(--batton-glow));
  opacity: 0;
  animation: sparkAppear .6s ease 1.4s forwards, sparkSpin 8s linear 1.4s infinite, sparkPulse 1.8s ease-in-out 1.4s infinite;
}
.hero__title-spark-svg{ width: 100%; height: 100%; }
@keyframes sparkAppear{
  0%  { opacity: 0; transform: scale(0); }
  100%{ opacity: 1; transform: scale(1); }
}
@keyframes sparkSpin{
  0%{ rotate: 0deg; }
  100%{ rotate: 360deg; }
}
@keyframes sparkPulse{
  0%, 100%{ scale: 1; }
  50%{ scale: 1.2; }
}

.hero__lead{
  max-width: 580px; margin: 24px auto 56px;
  color: var(--ink-soft); font-size: 15px; line-height: 1.9;
}

/* キャラ並び */
.hero__chars{
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
  max-width: 980px; margin: 0 auto;
}
.hero__char{
  position: relative;
  padding: 36px 28px;
  border-radius: 28px;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--bg-1) 100%);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform .5s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .4s;
  text-align: center;
  box-shadow: 0 12px 36px -18px rgba(31,44,41,.18);
}
.hero__char:hover{
  transform: translateY(-6px);
  box-shadow: 0 24px 50px -18px rgba(31,44,41,.25);
}
.hero__char--batton:hover{ border-color: rgba(201,122,43,.5); }
.hero__char--amo:hover{    border-color: rgba(92,127,74,.5); }

.hero__char-glow{
  position: absolute; left:50%; top: 22%;
  width: 80%; aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  pointer-events: none;
  filter: blur(60px);
  opacity: 0; transition: opacity .6s;
}
.hero__char--batton .hero__char-glow{ background: var(--batton-glow); }
.hero__char--amo    .hero__char-glow{ background: var(--amo-glow); }
.hero__char:hover .hero__char-glow{ opacity: 1; }

.hero__char-frame{
  position: relative;
  width: 100%; aspect-ratio: 1/1;
  display: grid; place-items: center;
  margin-bottom: 22px;
  perspective: 1400px;
}
.hero__char-img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  transition: opacity .6s ease, transform .55s cubic-bezier(.2,.8,.2,1), filter .4s;
  animation: heroFloat 6s ease-in-out infinite;
  z-index: 2;
}
.hero__char--amo .hero__char-img{ animation-delay: -3s; }

/* シルエット（最初に見える、ホバーで消える） */
.hero__char-img--silhouette{
  filter: brightness(.04) saturate(0);
  z-index: 3;
  opacity: 1;
}
/* 本体（最初は隠れてる、ホバーで表示） */
.hero__char-img--reveal{
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.3));
  opacity: 1;
  z-index: 2;
}
/* PC（ホバー対応端末）: シルエット → 本体 */
@media (hover: hover){
  .hero__char-img--reveal{ opacity: 0; transform: scale(.96); }
  .hero__char:hover .hero__char-img--silhouette{ opacity: 0; }
  .hero__char:hover .hero__char-img--reveal{
    opacity: 1; transform: scale(1.04) translateY(-6px);
    filter: drop-shadow(0 22px 50px rgba(0,0,0,.45)) drop-shadow(0 0 32px var(--batton-glow));
  }
  .hero__char--amo:hover .hero__char-img--reveal{
    filter: drop-shadow(0 22px 50px rgba(0,0,0,.45)) drop-shadow(0 0 32px var(--amo-glow));
  }
}
/* モバイル: シルエットも表示 → スクロールイン後に自動 reveal */
@media (hover: none){
  .hero__char-img--reveal{ opacity: 0; }
  .hero__char-img--silhouette{ opacity: 1; }
  .hero__char.revealed .hero__char-img--silhouette{ opacity: 0; }
  .hero__char.revealed .hero__char-img--reveal{ opacity: 1; }
}

@keyframes heroFloat{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-12px); }
}

/* === ヒーローカードの登場：奥から回って出現 === */
.hero__char{
  opacity: 0;
  transform: perspective(1400px) rotateY(-65deg) translateZ(-180px) scale(.7);
  transition: opacity 1.2s cubic-bezier(.2,.8,.2,1), transform 1.4s cubic-bezier(.2,.8,.2,1);
}
.hero__char.in{
  opacity: 1;
  transform: perspective(1400px) rotateY(0) translateZ(0) scale(1);
}
.hero__char--amo{
  transform: perspective(1400px) rotateY(65deg) translateZ(-180px) scale(.7);
  transition-delay: .25s;
}
.hero__char--amo.in{
  transform: perspective(1400px) rotateY(0) translateZ(0) scale(1);
}

.hero__char-meta{ position: relative; z-index: 2; }
.hero__char-no{
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .25em;
  color: var(--ink-mute);
}
.hero__char-name{
  font-family: var(--f-jp-serif); font-weight: 900;
  font-size: clamp(28px, 4vw, 40px);
  margin: 8px 0 6px;
  line-height: 1.15;
}
.hero__char-name small{
  display: block; font-family: var(--f-en); font-weight: 600; font-style: italic;
  font-size: 14px; letter-spacing: .04em; color: var(--ink-mute);
}
.hero__char-tag{
  display: inline-block; padding: 6px 14px; border-radius: 100px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .25em;
  border: 1px solid var(--line-strong);
}
.hero__char--batton .hero__char-tag{ color: var(--batton-text); border-color: rgba(111,133,32,.5); background: rgba(206,226,77,.15); }
.hero__char--amo    .hero__char-tag{ color: var(--amo-text);    border-color: rgba(24,86,79,.4); background: rgba(24,86,79,.08); }

@media (max-width: 720px){
  .hero__chars{ grid-template-columns: 1fr; gap: 18px; }
  .hero__char{ padding: 24px 18px; }
}

.hero__scroll{
  margin-top: 72px; display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .35em;
  color: var(--ink-mute);
}
.hero__scroll-line{
  width: 60px; height: 1px;
  background: linear-gradient(90deg, var(--ink-mute), transparent);
  animation: scrollLine 2.5s ease-in-out infinite;
}
@keyframes scrollLine{
  0%,100%{ transform: scaleX(.5); transform-origin: left; }
  50%{ transform: scaleX(1); transform-origin: left; }
}

/* ============ 図鑑（DEX）セクション ============ */
.dex{
  position: relative;
  padding: 140px 24px;
  overflow: hidden;
}
.dex__bg{
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 30%, rgba(201,122,43,.08), transparent 60%);
  pointer-events: none;
}
.dex--amo .dex__bg{
  background: radial-gradient(ellipse at 50% 30%, rgba(92,127,74,.08), transparent 60%);
}
.dex__inner{ position: relative; max-width: 1100px; margin: 0 auto; }

.dex__head{ text-align: center; margin-bottom: 32px; }
.dex__no{
  display: inline-block;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .3em;
  color: var(--ink-mute);
  padding: 6px 18px; border: 1px solid var(--line-strong); border-radius: 100px;
}
.dex__name{
  font-family: var(--f-jp-serif); font-weight: 900;
  font-size: clamp(48px, 9vw, 110px);
  margin: 24px 0 16px;
  line-height: 1;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.dex__name-jp{
  color: var(--ink);
}
.dex__name-en{
  font-family: var(--f-en); font-style: italic; font-weight: 700;
  font-size: clamp(18px, 2.5vw, 26px);
  letter-spacing: .1em; color: var(--ink-mute);
}
.dex__catch{
  font-family: var(--f-en); font-weight: 700; font-style: italic;
  font-size: clamp(22px, 3vw, 32px);
  letter-spacing: .03em;
  color: var(--batton-text);
  margin: 24px 0 6px;
}
.dex--amo .dex__catch{ color: var(--amo-text); }
.dex__role{
  font-size: 13px; color: var(--ink-soft); letter-spacing: .12em;
  margin: 0;
}

/* ============ 360° VIEWER ============ */
.viewer{
  position: relative;
  margin: 0 auto;
  max-width: 100%;
  width: 100%;
}
.viewer__stage{
  position: relative;
  aspect-ratio: 1/1;
  display: block;   /* grid → block（iOS Safari の絶対配置安定化） */
  perspective: 1200px;
  width: 100%;
  min-height: 340px;
  overflow: hidden;
}
.viewer__platform{
  position: absolute;
  left: 50%; bottom: 4%;
  width: 80%; height: 120px;
  transform: translateX(-50%);
  pointer-events: none;
}
.viewer__platform-logo{
  position: absolute; left: 50%; top: 50%;
  width: 75%; height: auto;
  transform: translate(-50%, -50%) rotateX(72deg) scale(.9);
  transform-origin: center;
  opacity: .22;
  pointer-events: none;
  animation: ringSpin 28s linear infinite reverse;
  mix-blend-mode: multiply;
}
.viewer__platform-ring{
  position: absolute; left:50%; top:50%;
  width: 100%; height: 100%;
  transform: translate(-50%,-50%) rotateX(70deg);
  border-radius: 50%;
  border: 1.5px solid rgba(201,122,43,.3);
  box-shadow:
    0 0 30px rgba(201,122,43,.25),
    inset 0 0 40px rgba(201,122,43,.12);
  animation: ringSpin 18s linear infinite;
}
.dex--amo .viewer__platform-ring{
  border-color: rgba(92,127,74,.35);
  box-shadow:
    0 0 30px rgba(92,127,74,.35),
    inset 0 0 40px rgba(92,127,74,.18);
}
.viewer__platform-glow{
  position: absolute; left:50%; top:50%;
  width: 80%; height: 60%;
  transform: translate(-50%,-50%);
  background: radial-gradient(ellipse at center, var(--batton-glow), transparent 70%);
  filter: blur(20px);
}
.dex--amo .viewer__platform-glow{
  background: radial-gradient(ellipse at center, var(--amo-glow), transparent 70%);
}
@keyframes ringSpin{
  0%  { transform: translate(-50%,-50%) rotateX(70deg) rotateZ(0deg); }
  100%{ transform: translate(-50%,-50%) rotateX(70deg) rotateZ(360deg); }
}

/* Three.js キャンバス */
.viewer__canvas{
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important;
  z-index: 2;
  cursor: grab;
  touch-action: none;
}
.viewer__canvas:active{ cursor: grabbing; }

.viewer3d__loading{
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Orbitron', monospace; font-size: 11px; letter-spacing: .35em;
  color: var(--ink-mute);
  z-index: 3;
  pointer-events: none;
  opacity: 1;
  transition: opacity .6s;
}
.viewer3d__loading--done{ opacity: 0; }

/* === フォールバック画像は「常時表示」がデフォルト。
       Three.js 起動時のみ JS で display:none にする（PC）
       これで iOS Safari の @media 判定不具合に一切依存しない === */
.viewer__fallback{
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: block;
  z-index: 2;
  overflow: hidden;
}
.viewer__fallback-img{
  position: absolute;
  top: 10%; left: 10%; right: 10%; bottom: 10%;
  width: 80%; height: 80%;
  object-fit: contain;
  opacity: 0;
  transition: opacity .45s ease;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.18));
}
.viewer__fallback-img.active{
  opacity: 1;
  animation: float 5s ease-in-out infinite;
}
@keyframes float{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}

/* 「3D で見る」ボタン（モバイル用オンデマンド起動） */
.viewer__3d-toggle{
  position: absolute; right: 12px; bottom: 12px;
  display: none;   /* PC では非表示 */
  align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: 100px;
  background: var(--ink);
  color: var(--lime);
  font-family: var(--f-mono);
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  border: 1px solid var(--ink);
  cursor: pointer;
  z-index: 4;
  box-shadow: 0 6px 20px rgba(31,44,41,.25);
  transition: transform .2s, background .2s;
}
.viewer__3d-toggle:hover{ transform: translateY(-1px); background: var(--lime); color: var(--ink); }

/* Three.js 起動時、fallback は JS で display:none にする（下の .viewer--3d-on） */

/* 「3D で見る」ボタンは常時表示可能（PC でも見せる → いつでも切替可） */
body.is-mobile-viewer .viewer__3d-toggle{ display: inline-flex !important; }
@media (max-width: 900px){
  .viewer__3d-toggle{ display: inline-flex; }
}

/* 3D 起動中：canvas 表示、fallback 隠す */
.viewer.viewer--3d-on .viewer__canvas{ display: block !important; }
.viewer.viewer--3d-on .viewer3d__loading{ display: block !important; }
.viewer.viewer--3d-on .viewer__fallback{ display: none !important; }
.viewer.viewer--3d-on .viewer__3d-toggle{
  background: #C86950 !important;
  color: #FAF6EA !important;
  border-color: #C86950 !important;
}
.viewer.viewer--3d-on .viewer__3d-toggle svg{ display: none; }

/* canvas はデフォルト非表示 → JS で 3D 起動時のみ show */
.viewer__canvas{ display: none; }
.viewer3d__loading{ display: none; }

.viewer__controls{
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 8px;
  margin-top: 18px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 4px 16px -8px rgba(31,44,41,.1);
}
.viewer__btn{
  padding: 12px 8px;
  border-radius: 10px;
  font-size: 13px; font-weight: 700;
  color: var(--ink-soft);
  letter-spacing: .06em;
  transition: all .25s;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.viewer__btn small{
  font-family: var(--f-mono); font-size: 9px; letter-spacing: .2em;
  color: var(--ink-mute); font-weight: 500;
}
.viewer__btn:hover{ color: var(--ink); background: var(--bg-3); }
.viewer__btn.active{
  color: #FAF6EA;
  background: linear-gradient(135deg, var(--batton), var(--batton-2));
  box-shadow: 0 4px 16px var(--batton-glow);
}
.viewer__btn.active small{ color: rgba(250,246,234,.7); }
.dex--amo .viewer__btn.active{
  background: linear-gradient(135deg, var(--amo), var(--amo-2));
  box-shadow: 0 4px 16px var(--amo-glow);
}

.viewer__hint{
  margin-top: 12px; text-align: center;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .25em;
  color: var(--ink-mute);
}

/* ============ PROFILE グリッド ============
   レイアウト：[viewer | stats] / [info | story]
   .dex__inner で全体を grid 化、.profile は display:contents で透過
*/
.dex__inner{
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  grid-template-areas:
    "head   head"
    "viewer stats"
    "info   story";
}
.dex__head{ grid-area: head; }
.viewer{ grid-area: viewer; margin: 0 !important; max-width: none !important; }
.profile{ display: contents; }
.profile__card:nth-of-type(1){ grid-area: info; align-self: start; }
.profile__card--stats{ grid-area: stats; align-self: stretch; display: flex; flex-direction: column; }
.profile__card--story{ grid-area: story; align-self: start; }

@media (max-width: 900px){
  .dex__inner{
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "viewer"
      "stats"
      "info"
      "story";
  }
}

.profile__card{
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px;
  box-shadow: 0 6px 26px -14px rgba(31,44,41,.15);
  min-width: 0;         /* iOS Safari の grid セルはみ出し防止 */
  overflow: hidden;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.profile__h{
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .3em;
  color: var(--ink-mute);
  margin: 0 0 18px;
  display: flex; align-items: center; gap: 10px;
}
.profile__h::before{
  content: ''; display: block; width: 24px; height: 1px;
  background: linear-gradient(90deg, var(--batton), transparent);
}
.dex--amo .profile__h::before{
  background: linear-gradient(90deg, var(--amo), transparent);
}

.profile__list{ margin: 0; display: grid; gap: 10px; }
.profile__list > div{
  display: grid; grid-template-columns: 110px 1fr;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.profile__list dt{ font-size: 12px; color: var(--ink-mute); letter-spacing: .1em; }
.profile__list dd{ margin: 0; font-size: 15px; color: var(--ink); font-weight: 500; }

.profile__sub{
  font-size: 11px; letter-spacing: .25em; color: var(--ink-mute);
  margin: 22px 0 10px; font-weight: 600;
}
.profile__progs, .profile__quotes{
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.profile__progs li{
  padding: 6px 12px; border-radius: 8px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .15em; font-weight: 700;
  background: rgba(206,226,77,.22); color: var(--batton-text);
  border: 1px solid rgba(111,133,32,.3);
}
.dex--amo .profile__progs li{
  background: rgba(24,86,79,.1); color: var(--amo-text);
  border-color: rgba(24,86,79,.25);
}
.profile__quotes{ flex-direction: column; gap: 6px; }
.profile__quotes li{
  font-family: var(--f-jp-serif); font-size: 14px; color: var(--ink-soft);
  font-style: italic;
}

/* PARAMETER バー（縦に広げて viewer 高さに揃える） */
.profile__card--stats .stats{ flex: 1; gap: 18px; }
.stats{ margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.stats li{
  display: grid;
  grid-template-columns: 90px 1fr 30px;
  align-items: center;
  gap: 12px;
}
.stats__label{ font-size: 12px; color: var(--ink-soft); letter-spacing: .1em; }
.stats__bar{
  position: relative;
  height: 8px; border-radius: 100px;
  background: rgba(31,44,41,.08);
  overflow: hidden;
}
.stats__bar::before{
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--v);
  background: linear-gradient(90deg, var(--batton-2), var(--batton));
  border-radius: 100px;
  box-shadow: 0 0 12px var(--batton-glow);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.2s cubic-bezier(.2,.8,.2,1);
}
.dex--amo .stats__bar::before{
  background: linear-gradient(90deg, var(--amo-2), var(--amo));
  box-shadow: 0 0 12px var(--amo-glow);
}
.stats__bar.show::before{ transform: scaleX(1); }
.stats__num{
  font-family: var(--f-mono); font-size: 14px; font-weight: 700;
  color: var(--ink); text-align: right;
}

.profile__skill{
  margin: 24px 0 0;
  padding: 16px 18px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(201,122,43,.08), rgba(201,122,43,.02));
  border: 1px solid rgba(201,122,43,.3);
  display: grid; gap: 4px;
  min-width: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.profile__skill span{ min-width: 0; word-break: break-word; overflow-wrap: anywhere; }
.dex--amo .profile__skill{
  background: linear-gradient(135deg, rgba(92,127,74,.08), rgba(92,127,74,.02));
  border-color: rgba(92,127,74,.3);
}
.profile__skill-l{
  font-family: var(--f-mono); font-size: 9px; letter-spacing: .3em; color: var(--ink-mute);
}
.profile__skill strong{
  font-size: 17px;
  color: var(--batton-text);
  font-weight: 700;
  display: inline-flex; align-items: center; gap: 8px;
}
.dex--amo .profile__skill strong{ color: var(--amo-text); }

/* SPECIAL アイコン（バットン=雷 / アモ=若葉） */
.profile__skill-icon{
  width: 32px; height: 32px;
  flex-shrink: 0;
  animation: skillPulse 2.6s ease-in-out infinite;
  filter: drop-shadow(0 2px 6px var(--batton-glow));
}
.dex--amo .profile__skill-icon{
  animation: skillFloat 3.4s ease-in-out infinite;
  filter: drop-shadow(0 2px 6px var(--amo-glow));
}
@keyframes skillPulse{
  0%, 100%{ transform: scale(1) rotate(-2deg); }
  50%{ transform: scale(1.12) rotate(2deg); }
}
@keyframes skillFloat{
  0%, 100%{ transform: translateY(0) rotate(-3deg); }
  50%{ transform: translateY(-3px) rotate(3deg); }
}
.profile__skill span:last-child{ font-size: 13px; color: var(--ink-soft); line-height: 1.7; }

.profile__card--story p{
  font-family: var(--f-jp-serif);
  font-size: 15.5px; line-height: 2.0;
  color: var(--ink); margin: 0 0 16px;
  word-break: keep-all;
  line-break: strict;
  overflow-wrap: break-word;
}
.profile__card--story p:last-child{ margin-bottom: 0; }

/* ============ STORY ============ */
.story{
  padding: 160px 24px;
  text-align: center;
  position: relative;
}
.story__inner{ max-width: 760px; margin: 0 auto; position: relative; z-index: 2; }
.story__eyebrow{
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .35em; color: var(--ink-mute);
  margin: 0 0 24px;
}
.story__h{
  font-family: var(--f-jp-serif); font-weight: 900;
  font-size: clamp(36px, 7vw, 72px);
  line-height: 1.2; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.story__h-accent{
  background: linear-gradient(120deg, var(--teal), var(--batton));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.story__lead{
  margin: 32px auto 40px;
  font-size: 15px; line-height: 2.0; color: var(--ink-soft);
}

/* ===== STORY 本文 ===== */
.story__body{
  margin: 40px auto 56px;
  max-width: 640px;
  text-align: center;
}
.story__body p{
  font-family: var(--f-jp-serif);
  font-size: 16px; line-height: 2.05;
  color: var(--ink);
  margin: 0 0 22px;
  /* 日本語の文節途中で改行されないように */
  word-break: keep-all;
  line-break: strict;
  overflow-wrap: break-word;
}
.story__body p b{
  color: var(--batton-text);
  font-weight: 700;
}
.story__body p:nth-child(1) b:last-child{ color: var(--amo-text); }
.story__emphasis{
  font-size: 22px !important;
  font-weight: 900;
  color: var(--teal) !important;
  letter-spacing: .06em;
  margin: 34px 0 !important;
  position: relative;
}
.story__emphasis::before,
.story__emphasis::after{
  content: "─"; color: var(--ink-mute); margin: 0 18px;
  font-weight: 400;
}
.story__closing{
  font-size: 17px !important;
  color: var(--teal) !important;
  font-weight: 700;
  margin-top: 36px !important;
}

/* ===== クロージング画像：奥からゆっくりフェードイン（背景に馴染ませる） ===== */
.story__scene{
  margin: 24px auto 48px;
  max-width: 920px;
  position: relative;
  perspective: 1800px;
}
.story__scene img{
  width: 100%; height: auto;
  display: block;
  /* 四隅を cream 背景に完全シームレスにフェード（境界を限りなく曖昧に） */
  -webkit-mask-image: radial-gradient(ellipse 95% 92% at center,
    #000 8%,
    rgba(0,0,0,.92) 30%,
    rgba(0,0,0,.65) 55%,
    rgba(0,0,0,.30) 78%,
    rgba(0,0,0,.08) 92%,
    transparent 100%);
          mask-image: radial-gradient(ellipse 95% 92% at center,
    #000 8%,
    rgba(0,0,0,.92) 30%,
    rgba(0,0,0,.65) 55%,
    rgba(0,0,0,.30) 78%,
    rgba(0,0,0,.08) 92%,
    transparent 100%);
  opacity: 0;
  transform: perspective(1800px) translateZ(-260px) translateY(40px) scale(.92);
  transition: opacity 2.4s cubic-bezier(.2,.8,.2,1),
              transform 2.8s cubic-bezier(.2,.8,.2,1);
}
.story__scene.in img{
  opacity: 1;
  transform: perspective(1800px) translateZ(0) translateY(0) scale(1);
}
/* 上下に長い柔らかな光のグラデーション（地面と空に溶け込ませる） */
.story__scene::before{
  content: "";
  position: absolute; inset: -8% -2% -4% -2%;
  background:
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(24,86,79,.10), transparent 70%),
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(206,226,77,.08), transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 2s ease 1s;
  z-index: -1;
}
.story__scene.in::before{ opacity: 1; }
.story__motto{
  font-family: var(--f-en); font-style: italic; font-weight: 700;
  font-size: 22px; letter-spacing: .08em;
  color: var(--teal);
  margin: 0 0 56px;
}
.story__cta{ margin-top: 40px; }
.story__btn{
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 32px;
  border-radius: 100px;
  font-size: 14px; font-weight: 700; letter-spacing: .08em;
  color: var(--ink);
  background: var(--lime);
  box-shadow: 0 8px 28px rgba(206,226,77,.45);
  transition: transform .3s, box-shadow .3s, background .3s, color .3s;
}
.story__btn:hover{
  transform: translateY(-2px);
  background: var(--lime-deep);
  color: #FAF6EA;
  box-shadow: 0 12px 36px rgba(181,199,60,.5);
}

/* ============ フッター ============ */
.ft{
  padding: 40px 24px 60px;
  text-align: center;
  color: var(--ink-mute);
  font-size: 11px; letter-spacing: .12em;
  border-top: 1px solid var(--line);
}
.ft p{ margin: 4px 0; }

/* ============ 入場アニメ ============ */
.reveal{ opacity: 0; transform: translateY(30px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.reveal.in{ opacity: 1; transform: none; }

/* ============================================
   📱 スマホ最適化（768px以下）
============================================ */
@media (max-width: 768px){
  /* ヒーロー全体 */
  .hero{ padding: 96px 16px 56px; min-height: auto; }
  .hero__eyebrow{ font-size: 10px; letter-spacing: .25em; margin-bottom: 16px; }
  .hero__title{ font-size: clamp(34px, 11vw, 56px); }
  .hero__lead{ font-size: 13.5px; margin: 18px auto 36px; line-height: 1.85; }

  /* キラキラ位置（モバイルではみ出ないように） */
  .hero__title-spark{
    top: -6%; right: -2%;
    width: 38px; height: 38px;
  }

  /* キャラカード：縦並び、余白圧縮 */
  .hero__chars{ grid-template-columns: 1fr; gap: 14px; max-width: 92vw; }
  .hero__char{ padding: 22px 18px 24px; border-radius: 22px; }
  .hero__char-no{ font-size: 10px; }
  .hero__char-name{ font-size: clamp(24px, 6vw, 30px); margin: 6px 0 4px; }
  .hero__char-name small{ font-size: 12px; }
  .hero__char-tag{ font-size: 9px; padding: 5px 12px; letter-spacing: .2em; }
  /* 奥から登場の振り幅を抑える（モバイルで強すぎないように） */
  .hero__char{
    transform: perspective(1000px) rotateY(-30deg) translateZ(-80px) scale(.85);
  }
  .hero__char--amo{
    transform: perspective(1000px) rotateY(30deg) translateZ(-80px) scale(.85);
  }

  .hero__scroll{ margin-top: 40px; }
  .hero__scroll-line{ width: 40px; }

  /* === 図鑑セクション === */
  .dex{ padding: 80px 16px; }
  .dex__head{ margin-bottom: 24px; }
  .dex__no{ font-size: 10px; padding: 5px 14px; }
  .dex__name{ font-size: clamp(40px, 11vw, 64px); }
  .dex__name-en{ font-size: 14px; }
  .dex__catch{ font-size: clamp(20px, 6vw, 26px); margin: 18px 0 4px; }
  .dex__role{ font-size: 11px; }

  /* === 3Dビューア === */
  .dex__inner{ gap: 18px; }
  .viewer__stage{ min-height: 320px; }
  .viewer__controls{
    grid-template-columns: repeat(4, 1fr);
    gap: 4px; padding: 4px;
  }
  .viewer__btn{
    padding: 9px 4px; font-size: 11px;
  }
  .viewer__btn small{ font-size: 8px; letter-spacing: .15em; }
  .viewer__hint{ font-size: 9px; letter-spacing: .2em; }

  /* === PROFILE カード === */
  .profile__card{ padding: 22px 18px; border-radius: 14px; }
  .profile__h{ font-size: 10px; margin-bottom: 14px; }
  .profile__list > div{ grid-template-columns: 96px 1fr; padding: 7px 0; }
  .profile__list dt{ font-size: 11px; }
  .profile__list dd{ font-size: 14px; }
  .profile__sub{ font-size: 10px; margin-top: 18px; }
  .profile__progs li{ font-size: 10px; padding: 5px 10px; }
  .profile__quotes li{ font-size: 13px; }
  .profile__skill{ padding: 14px 14px; }
  .profile__skill strong{ font-size: 15px; gap: 6px; }
  .profile__skill-icon{ width: 26px; height: 26px; }
  .profile__skill span:last-child{ font-size: 12px; line-height: 1.7; }

  /* PARAMETER */
  .stats li{ grid-template-columns: 76px 1fr 26px; gap: 9px; }
  .stats__label{ font-size: 11px; }
  .stats__num{ font-size: 12px; }
  .stats__bar{ height: 7px; }
  .profile__card--stats .stats{ gap: 12px; }

  /* STORY 本文 */
  .profile__card--story p{ font-size: 14.5px; line-height: 1.95; }

  /* === STORY セクション === */
  .story{ padding: 90px 16px; }
  .story__eyebrow{ font-size: 10px; letter-spacing: .25em; }
  .story__h{ font-size: clamp(28px, 8vw, 44px); line-height: 1.3; }
  .story__body{ margin: 30px auto 36px; }
  .story__body p{ font-size: 14.5px; line-height: 1.95; margin-bottom: 18px; }
  .story__emphasis{
    font-size: 18px !important;
    margin: 26px 0 !important;
  }
  .story__emphasis::before, .story__emphasis::after{
    margin: 0 10px; font-size: 14px;
  }
  .story__closing{ font-size: 15px !important; }

  /* クロージング画像 */
  .story__scene{ margin: 24px auto 36px; }
  .story__motto{ font-size: 18px; margin: 0 0 36px; }
  .story__btn{ padding: 14px 24px; font-size: 13px; }

  /* === フッター === */
  .ft{ padding: 30px 16px 40px; font-size: 10px; }
}

/* ============================================
   📱 極小スマホ（420px以下）
============================================ */
@media (max-width: 420px){
  .hero__title{ font-size: clamp(28px, 11vw, 44px); }
  .hero__char-frame{ max-width: 280px; margin: 0 auto 16px; }
  .dex__name{ font-size: 44px; }
  .viewer__btn{ font-size: 10px; }
  .viewer__btn small{ display: none; }  /* 「FRONT」とかは省略 */
  .profile__list > div{ grid-template-columns: 82px 1fr; }
}

/* ============================================
   🔴 動きを減らす設定の人への配慮（2026-09-21 追加）
   ============================================
   OSやブラウザで「視差効果を減らす／動きを減らす」を選んでいる人がいる。
   三半規管が弱い人には、漂う・跳ねる・回るものが具合の悪さの原因になる。

   このページには @keyframes が11個ある：
     drift / chBounceIn / sparkAppear / sparkSpin / sparkPulse /
     heroFloat / scrollLine / ringSpin / float / skillPulse / skillFloat

   ⚠️ 0秒ではなく 0.01ms にする。
      animation を切ると、opacity:0 から始まる演出が **消えたまま** になる。
      一瞬で終わらせれば、中身は最後の状態（見える状態）で残る。

   ⚠️ 3Dビューアの自動回転は、ここでは止まらない。
      three.js が描いているので viewer3d.js 側で止めている。
      （CSSとJSの両方を塞がないと、片方だけ動き続ける）
============================================ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}