@charset "UTF-8";
:root{
  --bg:#f3efe7;--paper:#fbf8f2;--ink:#20211d;--muted:#78736a;
  --line:rgba(32,33,29,.14);--accent:#9d6048;--olive:#566052;--dark:#2d302a;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#d8d1c7;color:var(--ink);font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:100%;object-fit:cover}
.site{width:min(100%,560px);margin:auto;overflow:hidden;background:var(--bg);box-shadow:0 0 60px rgba(0,0,0,.12)}
.top{position:fixed;z-index:100;inset:0 0 auto;display:flex;justify-content:space-between;align-items:center;padding:14px 20px;
  background:transparent;
  transition:background .35s, backdrop-filter .35s, box-shadow .35s;
}
.top.scrolled{
  background:rgba(251,248,242,.88);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(0,0,0,.07);
}
.brand{display:flex;align-items:center;text-decoration:none}
/* スクロール前: 白抜き / スクロール後: 元色 */
.brand-logo{
  height:28px;width:auto;display:block;
  filter:brightness(0) invert(1);
  transition:filter .35s;
}
.top.scrolled .brand-logo{ filter:none; }

/* ── ハンバーガーボタン ── */
.burger{
  background:none;border:none;cursor:pointer;
  width:36px;height:36px;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:5px;
  padding:4px;
}
/* 3本線を長さ違いのエディトリアルスタイルに */
.burger span{
  display:block;height:1.5px;
  background:#fff;
  transition:transform .32s cubic-bezier(.22,1,.36,1), opacity .25s, width .32s, background .35s;
  transform-origin:right center;
  border-radius:1px;
}
.burger span:nth-child(1){ width:22px; }
.burger span:nth-child(2){ width:14px; }
.burger span:nth-child(3){ width:18px; }
/* スクロール後は暗い線 */
.top.scrolled .burger span{ background:var(--ink); }
/* 開いた状態：2本の✕ */
.burger.open span:nth-child(1){ width:20px; transform:translateY(6.5px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; width:0; }
.burger.open span:nth-child(3){ width:20px; transform:translateY(-6.5px) rotate(-45deg); }
/* メニュー開時は常に白 */
.burger.open span{ background:#fff !important; }

/* ── オーバーレイ背景 ── */
.nav-overlay{
  position:fixed;inset:0;z-index:200;
  background:rgba(0,0,0,.5);
  opacity:0;pointer-events:none;
  transition:opacity .3s;
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
}
.nav-overlay.open{opacity:1;pointer-events:all}

/* ── スライドパネル ── */
.nav-panel{
  position:absolute;top:0;right:0;bottom:0;
  width:min(340px, 88vw);
  background:#0e100c;
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform .36s cubic-bezier(.22,1,.36,1);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.nav-overlay.open .nav-panel{ transform:translateX(0); }

/* ── パネルヘッダー ── */
.nav-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:20px 22px;
  border-bottom:1px solid rgba(255,255,255,.08);
  flex-shrink:0;
}
.nav-logo{ height:24px;width:auto;filter:brightness(0) invert(1); }
.nav-close{
  background:none;border:none;cursor:pointer;
  width:32px;height:32px;position:relative;
}
.nav-close span{
  position:absolute;top:50%;left:50%;
  width:18px;height:1.5px;background:rgba(255,255,255,.6);
}
.nav-close span:first-child{ transform:translate(-50%,-50%) rotate(45deg); }
.nav-close span:last-child{  transform:translate(-50%,-50%) rotate(-45deg); }

/* ── メインナビ ── */
.nav-main{ padding:8px 0;border-bottom:1px solid rgba(255,255,255,.08); }
.nav-link{
  display:flex;flex-direction:column;gap:2px;
  padding:16px 24px;
  text-decoration:none;
  transition:background .15s;
  cursor:pointer;
}
.nav-link:active{ background:rgba(255,255,255,.05); }
.nav-en{
  font:600 8px/1 "Helvetica Neue",sans-serif;
  letter-spacing:.28em;text-transform:uppercase;
  color:rgba(255,255,255,.35);
}
.nav-ja{
  font:400 17px/1.2 "Yu Mincho",serif;
  color:#f0ece4;
  letter-spacing:.04em;
  margin-top:3px;
}

/* ── カテゴリーグリッド ── */
.nav-cats-section{
  padding:20px 24px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-cats-label{
  font:600 7px/1 "Helvetica Neue",sans-serif;
  letter-spacing:.3em;text-transform:uppercase;
  color:rgba(255,255,255,.28);
  margin-bottom:14px;
}
.nav-cats-grid{
  display:flex;flex-wrap:wrap;gap:8px;
}
.nav-cats-grid a{
  padding:7px 13px;
  border:1px solid rgba(255,255,255,.16);
  font:400 12px/1 "Yu Mincho",serif;
  color:rgba(255,255,255,.7);
  text-decoration:none;
  letter-spacing:.06em;
  transition:background .15s,border-color .15s;
}
.nav-cats-grid a:active{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.4);
}

/* ── 認証ボタン ── */
.nav-auth{
  padding:20px 24px;
  display:flex;flex-direction:column;gap:10px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-btn-login{
  padding:14px;
  background:rgba(255,255,255,.92);
  border:none;cursor:pointer;
  font:500 12px/1 "Yu Mincho",serif;
  color:#0e100c;
  letter-spacing:.12em;
  transition:opacity .15s;
}
.nav-btn-logout{
  padding:14px;
  background:transparent;
  border:1px solid rgba(255,255,255,.22);
  cursor:pointer;
  font:400 12px/1 "Yu Mincho",serif;
  color:rgba(255,255,255,.55);
  letter-spacing:.12em;
  transition:background .15s;
}
.nav-btn-logout:active{ background:rgba(255,255,255,.06); }

/* ── フッター ── */
.nav-foot{
  padding:20px 24px;
  font:300 8px/1 "Helvetica Neue",sans-serif;
  letter-spacing:.2em;
  color:rgba(255,255,255,.2);
  margin-top:auto;
}
.hero{height:760px;min-height:94svh;position:relative;background:#333;overflow:hidden}

/* ── Hero sky animations ── */
.hero-sky{position:absolute;inset:0 0 50% 0;z-index:1;pointer-events:none;overflow:hidden}
.sky-cloud{position:absolute;pointer-events:none;filter:blur(2.5px)}
.sky-cloud::before,.sky-cloud::after{content:'';position:absolute;background:rgba(255,255,255,.68);border-radius:50%}

/* ── Cloud 1: medium ── */
.sc1{width:74px;height:20px;background:rgba(255,255,255,.68);border-radius:10px;top:22%;left:-88px;animation:skyClouds 34s linear infinite}
.sc1::before{width:34px;height:34px;top:-18px;left:10px}
.sc1::after {width:26px;height:26px;top:-13px;left:36px}

/* ── Cloud 2: small ── */
.sc2{width:50px;height:15px;background:rgba(255,255,255,.6);border-radius:8px;top:52%;left:-65px;animation:skyClouds 46s linear infinite;animation-delay:-20s}
.sc2::before{width:24px;height:24px;top:-13px;left:6px}
.sc2::after {width:18px;height:18px;top:-9px;left:24px}

/* ── Cloud 3: large ── */
.sc3{width:88px;height:22px;background:rgba(255,255,255,.65);border-radius:11px;top:14%;left:-105px;animation:skyClouds 40s linear infinite;animation-delay:-9s}
.sc3::before{width:38px;height:38px;top:-20px;left:14px}
.sc3::after {width:30px;height:30px;top:-15px;left:44px}

/* ── Cloud 4: tiny, distant ── */
.sc4{width:38px;height:12px;background:rgba(255,255,255,.5);border-radius:6px;top:40%;left:-50px;animation:skyClouds 52s linear infinite;animation-delay:-28s}
.sc4::before{width:18px;height:18px;top:-10px;left:4px}
.sc4::after {width:14px;height:14px;top:-7px;left:18px}

@keyframes skyClouds{from{transform:translateX(0)}to{transform:translateX(700px)}}
.sky-plane{
  position:absolute;top:55%;left:-90px;
  width:62px;height:auto;
  opacity:0;
  animation:skyPlane 18s linear infinite;animation-delay:2s;
}
.sky-plane img{width:100%;height:auto;display:block}
@keyframes skyPlane{
  0%  {transform:translateX(0)    translateY(0)     rotate(-12deg);opacity:0}
  8%  {opacity:1}
  85% {opacity:1}
  100%{transform:translateX(700px) translateY(-200px) rotate(-12deg);opacity:0}
}
/* 上：kicker + h1（空＝明るい → 暗色テキスト） */
.hero-copy{position:absolute;z-index:2;left:24px;right:24px;top:110px}
.hero-lead-wrap{display:none}
.hero-lead{
  position:relative;
  margin:12px 0 0;
  padding-top:14px;
  font-size:16px;
  line-height:2;
  letter-spacing:.09em;
  color:#1c0e06;
  font-family:"Yu Mincho","Hiragino Mincho Pro",serif;
  font-weight:500;
  text-shadow:0 0 18px rgba(255,244,230,.98),0 0 8px rgba(255,244,230,.85);
}
.hero-lead::before{
  content:'';
  position:absolute;
  top:0;left:0;
  width:24px;height:1.5px;
  background:var(--accent);
}
.kicker{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.hero .kicker{color:var(--accent);font-size:11px;letter-spacing:.2em}
h1,h2,h3{font-family:"Yu Mincho",serif;font-weight:500}
.hero h1{font-size:38px;line-height:1.45;letter-spacing:.06em;margin:8px 0 0;font-weight:600;color:var(--ink)}
.hero-foot{position:absolute;z-index:2;left:24px;right:24px;bottom:44px;text-align:center}
.hero-foot p{
  display:inline-block;
  background:#fff5f9;
  border:2.5px solid #ffb3d4;
  border-radius:24px;
  padding:14px 26px 16px;
  font-size:13px;line-height:1.9;
  color:#aa2060;font-weight:700;
  letter-spacing:.04em;
  margin:0 0 30px;
  position:relative;
  box-shadow:0 6px 22px rgba(200,50,120,.15);
}
/* しっぽ：縁どり層 */
.hero-foot p::before{
  content:'';
  position:absolute;
  bottom:-16px;left:50%;
  transform:translateX(-50%);
  border:13px solid transparent;
  border-top:14px solid #ffb3d4;
  border-bottom:0;
}
/* しっぽ：塗り層 */
.hero-foot p::after{
  content:'';
  position:absolute;
  bottom:-11px;left:50%;
  transform:translateX(-50%);
  border:11px solid transparent;
  border-top:12px solid #fff5f9;
  border-bottom:0;
}
/* ── Hero CTA Button (Uiverse.io / marcelodolza ベース) ── */
.hero-btn-wrap{display:flex;justify-content:center;padding-bottom:10px}
.hero-btn{
  --r:16px;
  --c1:#ffe8f4;--c2:#ff9ec8;--c3:#e8458e;--c4:#c22d72;--c5:#7a1044;
  border-radius:var(--r);outline:none;cursor:pointer;
  font-size:18px;font-family:"Yu Mincho",serif;
  background:transparent;letter-spacing:.1em;border:0;
  position:relative;width:100%;height:74px;
}
/* 3Dシャドウ台座 */
.btn-bg{position:absolute;inset:0;border-radius:inherit;filter:blur(1px)}
.btn-bg::before,.btn-bg::after{content:"";position:absolute;inset:0;border-radius:calc(var(--r)*1.1);background:var(--c5)}
.btn-bg::before{
  filter:blur(2px);
  box-shadow:0 6px 0 0 rgba(122,16,68,.55),0 12px 0 0 rgba(122,16,68,.35),0 18px 2px 0 rgba(122,16,68,.18),0 24px 4px 0 rgba(122,16,68,.08);
}
/* ボタン本体（真上にシフトして真下に影） */
.btn-wrap{border-radius:inherit;overflow:hidden;height:100%;transform:translateY(-6px);padding:3px;background:linear-gradient(to bottom,var(--c1),var(--c4));position:relative}
/* 内部ハイライトスピン */
.btn-outline{position:absolute;overflow:hidden;inset:0;border-radius:inherit}
/* コンテンツ面 */
.btn-content{
  pointer-events:none;display:flex;align-items:center;justify-content:center;
  z-index:1;position:relative;height:100%;gap:16px;
  border-radius:calc(var(--r)*.85);font-weight:600;
  background:linear-gradient(to bottom,var(--c3),var(--c4));
  box-shadow:inset -2px 12px 11px -5px var(--c2),inset 1px -3px 11px 0 rgba(0,0,0,.35);
}
.btn-content::before{content:"";inset:0;position:absolute;z-index:10;width:80%;top:45%;bottom:35%;opacity:.6;margin:auto;background:linear-gradient(to bottom,transparent,var(--c4));filter:brightness(1.3) blur(5px)}
/* スパークル（点滅のみ） */
.btn-sparkles{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:6}
.btn-sparkles i{position:absolute;width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.95);animation:btnTwinkle 1.6s ease-in-out infinite}
.btn-sparkles i:nth-child(1){top:24%;left: 8%;animation-delay:0s}
.btn-sparkles i:nth-child(2){top:62%;left:24%;animation-delay:.4s}
.btn-sparkles i:nth-child(3){top:28%;left:50%;animation-delay:.8s}
.btn-sparkles i:nth-child(4){top:60%;left:72%;animation-delay:.2s}
.btn-sparkles i:nth-child(5){top:22%;left:88%;animation-delay:1.1s}
@keyframes btnTwinkle{0%,100%{opacity:0;transform:scale(0)}45%,55%{opacity:1;transform:scale(1)}}
/* 文字ウェーブ */
.btn-chars{display:flex;align-items:center;gap:1px}
.btn-chars span{display:block;color:var(--c1);font-size:18px;font-weight:700;animation:btnCharWave 1.8s ease-in-out infinite;animation-delay:calc(var(--i)*.1s)}
/* 矢印（アイコン）*/
/* 矢印：左右スイングのみ、くるん演出なし */
.btn-icon{z-index:10}
.btn-icon div,.btn-icon div::before,.btn-icon div::after{height:3px;border-radius:2px;background:var(--c1)}
.btn-icon div::before,.btn-icon div::after{content:"";position:absolute;right:0;transform-origin:center right;width:14px;border-radius:15px}
.btn-icon div{position:relative;width:24px}
.btn-icon div::before{top:1px;transform:rotate(44deg)}
.btn-icon div::after{bottom:1px;transform:rotate(316deg)}
/* パスSVG */
.btn-path{display:none}
/* スプラッシュSVG：全幅対応で中央配置 */
.btn-splash{position:absolute;top:0;left:50%;transform:translateX(-50%) translateY(-31%);pointer-events:none;stroke-dasharray:60 60;stroke-dashoffset:60;stroke:var(--c2);animation:btnSplashLoop 4s ease-in-out infinite;animation-delay:.8s}

@keyframes btnCharWave{0%,100%{transform:translateY(0)}45%{transform:translateY(-5px)}}
@keyframes btnSplashLoop{0%,60%,100%{stroke-dasharray:60 60;stroke-dashoffset:60}30%{stroke-dasharray:2 60;stroke-dashoffset:-60}}
.section{padding:92px 22px}.paper{background:var(--paper)}.dark{background:var(--dark);color:#f7f2e9}
.title{font-size:30px;line-height:1.55;margin:0}.lead{font-size:11px;line-height:1.95;color:var(--muted);margin:12px 0 0}.dark .lead{color:rgba(255,255,255,.58)}
.intro-copy{font-size:30px;line-height:1.7;margin:0}.bodycopy{font-size:12px;line-height:2.1;color:var(--muted);margin-top:24px}

/* ── About Section ── */
.about-sec{
  background:#fff;
  padding:52px 24px 56px;
}
.about-label{
  display:flex;align-items:center;gap:13px;
  margin-bottom:34px;
}
.about-label::before{content:'';width:24px;height:1px;background:var(--accent);flex-shrink:0}
.about-label::after{content:'';flex:1;height:1px;background:var(--line)}
.about-label span{
  font:300 8px/1 "Helvetica Neue",Arial,sans-serif;
  letter-spacing:.3em;color:var(--accent);text-transform:uppercase;white-space:nowrap;
}
.about-headline{
  font:300 28px/1.85 "Yu Mincho",serif;
  letter-spacing:.05em;margin:0;color:var(--ink);
}
.about-rule{width:22px;height:1px;background:var(--accent);margin:26px 0}
.about-body{font-size:12px;line-height:2.1;color:var(--muted);margin:0}
.about-sig{
  margin-top:26px;text-align:right;
  font:500 12px/1 "Yu Mincho",serif;
  letter-spacing:.2em;color:var(--accent);
}

/* strong appeal 1 */
.statement{
  position:relative;height:500px;overflow:hidden;
}
.statement>img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;object-position:center top;
}
.statement-overlay{
  position:absolute;inset:0;
  background:linear-gradient(
    to bottom,
    transparent 15%,
    rgba(8,6,4,.55) 52%,
    rgba(8,6,4,.88) 100%
  );
}
.statement-label{
  position:absolute;top:18px;left:18px;z-index:2;
  font:300 7px/1 "Helvetica Neue",Arial,sans-serif;
  letter-spacing:.3em;color:rgba(255,255,255,.72);text-transform:uppercase;
}
.statement-content{
  position:absolute;bottom:0;left:0;right:0;
  padding:0 22px 30px;z-index:2;
}
.statement .big{
  font:300 30px/1.65 "Yu Mincho",serif;
  letter-spacing:.04em;margin:0;color:#fff;
}
.statement .big em{font-style:normal;color:#ffb07a}
.statement-lead{
  font-size:11px;line-height:1.9;
  color:rgba(255,255,255,.62);margin:14px 0 0;
}
.numbers{
  margin-top:20px;
  background:rgba(255,255,255,.1);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
  overflow:hidden;
}
.number{
  display:flex;align-items:center;gap:16px;
  padding:15px 18px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.number:last-child{border-bottom:none}
.number strong{
  font:400 30px/1 "Yu Mincho",serif;
  color:#ffb07a;
  flex-shrink:0;width:42px;text-align:right;
}
.number-ja{display:block;font:500 13px/1 "Yu Mincho",serif;color:#fff}
.number-desc{display:block;font-size:10px;line-height:1.5;color:rgba(255,255,255,.52);margin-top:5px}

/* picks */
.cover{display:block;margin-top:30px;height:430px;position:relative;overflow:hidden}
.cover:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.68))}
.cover-copy{position:absolute;z-index:2;left:18px;right:18px;bottom:20px;color:#fff}
.cover-copy .cover-tag{display:inline-block;font-size:8px;letter-spacing:.2em;text-transform:uppercase;background:rgba(255,255,255,.18);padding:3px 8px;border-radius:2px;margin-bottom:8px}
.cover-copy h3{font-size:22px;line-height:1.5;margin:0;font-weight:500;font-family:"Yu Mincho",serif}
.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.mini{height:200px;position:relative;overflow:hidden}
.mini img{width:100%;height:100%;object-fit:cover}
.mini:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.65))}
.mini-copy{position:absolute;z-index:2;left:12px;right:12px;bottom:12px;color:#fff}
.mini-copy b{display:block;font:500 13px/1.4 "Yu Mincho",serif}

/* ══════════════════════════════════════════
   SPECIAL JOURNEY  ―  Game
   Layer z-index:
   1-2 bg | 3 haze | 4 particles | 5 signpost
   6 traveler | 7 foliage | 8 grade | 9 branch-ui
   10 panel | 11 hud | 12 result
══════════════════════════════════════════ */
.game{background:#0d0c0b}
.game-stage{
  position:relative;height:min(100svh,640px);
  overflow:hidden;isolation:auto;
  background:#111; /* 背景画像が届かない端のフォールバック */
}

/* ── Backgrounds ── */
.bg-layer{
  position:absolute;inset:0;
  background-size:cover;background-position:center bottom;
  transition:opacity .9s ease;
  transform-origin:center 65%;
  will-change:transform,opacity;
}
#bgA{z-index:1}
#bgB{z-index:2}
.gm-tint{position:absolute;inset:0;z-index:2;pointer-events:none;transition:background 1.2s ease;}
#bgB{z-index:2;opacity:0}
.bg-layer.bg-active{animation:bgBreathe 10s ease-in-out infinite}
@keyframes bgBreathe{
  0%  {transform:scale(1)    translateY(0)    translateX(0)}
  30% {transform:scale(1.03) translateY(-5px) translateX(2px)}
  60% {transform:scale(1.04) translateY(-8px) translateX(-2px)}
  100%{transform:scale(1)    translateY(0)    translateX(0)}
}
/* walk forward */
.game-stage.is-walking .bg-layer.bg-active{
  animation:bgWalkFwd 1.5s ease-in-out forwards
}
@keyframes bgWalkFwd{
  from{transform:scale(1.04) translateY(-4px)}
  to  {transform:scale(1.16) translateY(-24px)}
}
/* branch camera tilt */
.game-stage.going-left  .bg-layer.bg-active{animation:bgTiltL 1.5s ease-in-out forwards}
.game-stage.going-right .bg-layer.bg-active{animation:bgTiltR 1.5s ease-in-out forwards}
@keyframes bgTiltL{from{transform:scale(1)}to{transform:scale(1.22) translateX( 20px) translateY(-10px)}}
@keyframes bgTiltR{from{transform:scale(1)}to{transform:scale(1.22) translateX(-20px) translateY(-10px)}}

/* ── Haze overlay ── */
.gm-haze{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(210,230,255,.08) 0%,transparent 28%),
    linear-gradient(to top,rgba(10,16,4,.12) 0%,transparent 30%);
}

/* ── Particles ── */
.gm-air{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.air-leaf{position:absolute;border-radius:50% 0 50% 0;opacity:0}
.al1{width:6px;height:6px;background:rgba(95,142,55,.72);left:70%;top:0;animation:leafFall 7s ease-in 1s infinite}
.al2{width:5px;height:5px;background:rgba(140,120,40,.65);left:18%;top:0;animation:leafFall 9s ease-in 3.5s infinite}
.al3{width:6px;height:6px;background:rgba(78,118,44,.68);left:44%;top:0;animation:leafFall 8s ease-in .3s infinite}
.al4{width:4px;height:4px;background:rgba(120,155,50,.6);left:55%;top:0;animation:leafFall 11s ease-in 5s infinite}
@keyframes leafFall{
  0%  {opacity:0;transform:translate(0,0) rotate(0)}
  8%  {opacity:.7}
  85% {opacity:.45}
  100%{opacity:0;transform:translate(-42px,110vh) rotate(320deg)}
}
.air-mote{position:absolute;border-radius:50%;opacity:0}
.am1{width:3px;height:3px;background:rgba(255,248,195,.85);left:27%;top:72%;animation:moteDrift 5.5s ease-in-out 0.8s infinite}
.am2{width:2px;height:2px;background:rgba(255,252,205,.75);left:60%;top:67%;animation:moteDrift 7s ease-in-out 2.8s infinite}
.am3{width:3px;height:3px;background:rgba(235,255,205,.7);left:77%;top:63%;animation:moteDrift 6s ease-in-out .2s infinite}
.am4{width:2px;height:2px;background:rgba(255,245,190,.65);left:40%;top:75%;animation:moteDrift 8s ease-in-out 4s infinite}
@keyframes moteDrift{
  0%  {opacity:0;transform:translate(0,0) scale(1)}
  15% {opacity:.8}
  75% {opacity:.35}
  100%{opacity:0;transform:translate(-8px,-65px) scale(1.5)}
}
.air-bird{position:absolute;width:14px;height:7px;opacity:0}
.air-bird::before,.air-bird::after{
  content:'';position:absolute;width:6px;height:3px;
  border-top:1.5px solid rgba(50,40,30,.42);border-radius:50% 50% 0 0;
}
.air-bird::before{left:0;transform:rotate(-18deg)}
.air-bird::after {right:0;transform:rotate(18deg)}
.ab1{top:18%;left:-16px;animation:birdFly 13s linear 3s infinite}
.ab2{top:14%;left:-16px;animation:birdFly 18s linear 8s infinite}
@keyframes birdFly{
  0%  {opacity:0;transform:translate(0,0)}
  4%  {opacity:.95}
  90% {opacity:.75}
  100%{opacity:0;transform:translate(640px,-30px)}
}

/* ── Signpost  (z:5) ── */
.gm-signpost{
  position:absolute;bottom:36%;left:50%;
  transform:translateX(-50%);
  z-index:5;width:220px;display:none;
}
.gm-signpost.show{
  display:block;
  animation:signIn .65s cubic-bezier(.22,1,.36,1) both;
}
@keyframes signIn{
  from{opacity:0;transform:translateX(-50%) translateY(14px) scale(.9)}
  to  {opacity:1;transform:translateX(-50%) translateY(0)   scale(1)}
}
/* 出現後にゆらぎ */
.gm-sign-img{
  width:100%;height:auto;display:block;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.45));
  animation:signSway 5s ease-in-out 0.7s infinite;
  transform-origin:50% 95%;
}
@keyframes signSway{
  0%,100%{transform:rotate(0deg)   translateY(0)}
  25%    {transform:rotate(.7deg)  translateY(-2px)}
  75%    {transform:rotate(-.7deg) translateY(-3px)}
}
/* テキストは画像に乗せない → 非表示 */
.sign-lbl{ display:none }

/* ── Traveler  (z:6) ── */
.game-traveler{
  position:absolute;bottom:13%;left:50%;
  transform:translateX(-50%);z-index:6;
  width:70px;
}
.tv-img{
  width:100%;height:auto;display:block;
  filter:drop-shadow(0 5px 10px rgba(0,0,0,.4));
  animation:tvIdle 2.8s ease-in-out infinite;
  transform-origin:bottom center;
}
@keyframes tvIdle{
  0%,100%{transform:translateY(0)    rotate(0deg)   scale(1)}
  25%    {transform:translateY(-3px) rotate(.5deg)  scale(1.008)}
  60%    {transform:translateY(-1px) rotate(-.3deg) scale(1.003)}
}
.game-stage.is-walking .tv-img{
  animation:tvWalk .38s ease-in-out infinite
}
@keyframes tvWalk{
  0%  {transform:translateY(0)    translateX(0)    scale(1)    rotate(0deg)}
  25% {transform:translateY(-5px) translateX(1.5px) scale(1.01) rotate(-1.4deg)}
  50% {transform:translateY(-1px) translateX(0)    scale(1)    rotate(0deg)}
  75% {transform:translateY(-5px) translateX(-1.5px)scale(1.01) rotate(1.4deg)}
  100%{transform:translateY(0)    translateX(0)    scale(1)    rotate(0deg)}
}

/* ── Foreground foliage  (z:7) ── */
.game-foliage{
  position:absolute;inset:0;z-index:7;pointer-events:none;overflow:hidden;
}
.fg-img{
  position:absolute;bottom:0;left:50%;
  transform:translateX(-50%);
  width:100%;height:100%;
  object-fit:cover;object-position:center bottom;
  animation:fgSway 6s ease-in-out infinite;
  transform-origin:bottom center;
}
@keyframes fgSway{
  0%,100%{transform:translateX(-50%) scaleX(1)     translateY(0)}
  30%    {transform:translateX(calc(-50% + 5px)) scaleX(1.007) translateY(-2px)}
  70%    {transform:translateX(calc(-50% - 4px)) scaleX(1.005) translateY(-1px)}
}
.game-stage.is-walking .fg-img{
  animation:fgWalkFx 1.5s ease-in-out forwards
}
@keyframes fgWalkFx{
  from{transform:translateX(-50%) translateY(0)}
  to  {transform:translateX(-50%) translateY(55px)}
}

/* ── Vignette + colour grade  (z:8) ── */
.gm-grade{
  position:absolute;inset:0;z-index:8;pointer-events:none;
  background:
    radial-gradient(ellipse 100% 100% at 50% 50%,transparent 50%,rgba(0,0,0,.28) 100%);
}

/* ── Branch directional buttons  (z:9) ── */
.gm-branch-ui{
  position:absolute;inset:0;z-index:9;pointer-events:none;display:none;
}
.gm-branch-ui.show{display:block}

/* 方向ボタン本体 */
.gm-dir{
  position:absolute;top:50%;
  pointer-events:all;
  display:flex;align-items:center;gap:8px;
  padding:12px 16px;
  max-width:46%; /* テキスト長に関わらず左右が重ならないよう制限 */
  background:rgba(0,0,0,.52);
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:0 4px 20px rgba(0,0,0,.4);
  cursor:pointer;
  transition:background .25s,border-color .25s,transform .15s;
}
.gm-dir:hover{
  background:rgba(0,0,0,.68);
  border-color:rgba(255,255,255,.62);
}
.gm-dir:active{ opacity:.8; }

/* 左：矢印→テキスト、画面左端から出現 */
.gm-dir-l{
  left:0;
  transform:translateY(-50%);
  flex-direction:row;
  border-left:none;
  border-radius:0 3px 3px 0;
  padding-left:14px;
  animation:dirInL .5s cubic-bezier(.22,1,.36,1) both;
}
.gm-dir-l:hover{transform:translateY(-50%) translateX(3px)}
.gm-dir-l:active{transform:translateY(-50%) scale(.95)}

/* 右：テキスト→矢印、画面右端から出現 */
.gm-dir-r{
  right:0;
  transform:translateY(-50%);
  flex-direction:row-reverse;
  border-right:none;
  border-radius:3px 0 0 3px;
  padding-right:14px;
  animation:dirInR .5s cubic-bezier(.22,1,.36,1) both;
}
.gm-dir-r:hover{transform:translateY(-50%) translateX(-3px)}
.gm-dir-r:active{transform:translateY(-50%) scale(.95)}

@keyframes dirInL{
  from{opacity:0;transform:translateY(-50%) translateX(-30px)}
  to  {opacity:1;transform:translateY(-50%) translateX(0)}
}
@keyframes dirInR{
  from{opacity:0;transform:translateY(-50%) translateX(30px)}
  to  {opacity:1;transform:translateY(-50%) translateX(0)}
}

/* 矢印アイコン */
.gm-dir-arrow{
  font-size:20px;line-height:1;color:#fff;flex-shrink:0;
}
.gm-dir-l .gm-dir-arrow{animation:arrowBounceL 2s ease-in-out infinite}
.gm-dir-r .gm-dir-arrow{animation:arrowBounceR 2s ease-in-out infinite}
@keyframes arrowBounceL{
  0%,100%{transform:translateX(0);opacity:.7}
  50%    {transform:translateX(-4px);opacity:1}
}
@keyframes arrowBounceR{
  0%,100%{transform:translateX(0);opacity:.7}
  50%    {transform:translateX( 4px);opacity:1}
}

/* ラベルテキスト */
.gm-dir-text{
  font:400 13px/1.4 "Yu Mincho","Hiragino Mincho ProN",serif;
  letter-spacing:.06em;color:#fff;
  white-space:normal; /* 長テキストで折り返す */
  word-break:break-word;
  text-shadow:0 1px 10px rgba(0,0,0,.9);
}
/* サブラベル */
.gm-dir-sub{
  display:block;
  font:300 8px/1 "Helvetica Neue",sans-serif;
  letter-spacing:.28em;text-transform:uppercase;
  color:rgba(255,255,255,.55);
  margin-top:4px;
}

/* ── Game panel  (z:10) ── */
.game-panel{
  position:absolute;bottom:0;left:0;right:0;z-index:10;
  padding:20px 22px 26px;
  /* 下部をしっかり暗くして文字を確実に見せる */
  background:linear-gradient(to top,
    rgba(0,0,0,.88) 0%,
    rgba(0,0,0,.65) 42%,
    rgba(0,0,0,.18) 75%,
    transparent 100%);
  transition:opacity .35s ease;
}
.game-panel.fade-out{opacity:0;pointer-events:none}
/* ── START screen — full-screen + center frame ── */
.game-stage.is-intro .game-panel{
  top:0;
  display:flex;flex-direction:column;
  justify-content:center;align-items:center;
  padding:18px 18px;
  /* パネル自体はほぼ透明 — 背景・旅人・前景が透けて見える */
  background:rgba(0,0,0,.18);
}
.game-stage.is-intro .game-traveler{bottom:10%}

/* ── センターフレーム ── */
.gi-frame{
  width:100%;
  padding:26px 22px 22px;
  background:rgba(6,10,4,.78);
  border:1px solid rgba(255,255,255,.44);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.1),   /* 外側に薄い光の縁 */
    0 12px 50px rgba(0,0,0,.55);
  position:relative;
  animation:frameIn .7s cubic-bezier(.22,1,.36,1) both;
}
@keyframes frameIn{
  from{opacity:0;transform:scale(.96) translateY(10px)}
  to  {opacity:1;transform:scale(1)   translateY(0)}
}
/* 左上・右下コーナーブラケット */
.gi-frame::before,.gi-frame::after{
  content:'';position:absolute;
  width:16px;height:16px;
  border-color:rgba(255,255,255,.7);border-style:solid;
  pointer-events:none;
}
.gi-frame::before{top:-2px;left:-2px;border-width:2px 0 0 2px}
.gi-frame::after {bottom:-2px;right:-2px;border-width:0 2px 2px 0}
/* 右上・左下コーナー（innerラッパーで補完） */
.gi-frame-inner{
  position:absolute;inset:0;pointer-events:none;
}
.gi-frame-inner::before,.gi-frame-inner::after{
  content:'';position:absolute;
  width:16px;height:16px;
  border-color:rgba(255,255,255,.7);border-style:solid;
}
.gi-frame-inner::before{top:-2px;right:-2px;border-width:2px 2px 0 0}
.gi-frame-inner::after {bottom:-2px;left:-2px;border-width:0 0 2px 2px}

/* eyebrow — 横線＋テキスト */
.gi-eyebrow{
  display:flex;align-items:center;gap:10px;
  margin-bottom:16px;
  animation:fadeUp .55s ease-out .1s both;
}
.gi-eyebrow::before,.gi-eyebrow::after{
  content:'';flex:1;height:1px;
  background:linear-gradient(to right,transparent,rgba(255,255,255,.45),transparent);
}
.gi-mark{
  font:300 8px/1 "Helvetica Neue",sans-serif;
  letter-spacing:.38em;text-transform:uppercase;
  color:rgba(255,255,255,.8);white-space:nowrap;
}
/* title */
.gi-title{
  font:400 25px/1.6 "Yu Mincho",serif;
  color:#fff;text-align:center;margin:0 0 10px;
  text-shadow:0 2px 16px rgba(0,0,0,.6);
  animation:fadeUp .55s ease-out .2s both;
}
/* lead */
.gi-lead{
  font-size:11px;line-height:2;
  color:rgba(255,255,255,.75);text-align:center;
  margin:0 0 18px;
  animation:fadeUp .55s ease-out .28s both;
}
/* ステップ */
.gi-steps{
  display:grid;grid-template-columns:1fr auto 1fr auto 1fr;
  align-items:center;
  margin-bottom:20px;padding:11px 0;
  border-top:1px solid rgba(255,255,255,.18);
  border-bottom:1px solid rgba(255,255,255,.18);
  animation:fadeUp .55s ease-out .36s both;
}
.gi-step{display:flex;flex-direction:column;align-items:center;gap:5px}
.gi-step-n{font:300 9px/1 "Helvetica Neue",sans-serif;letter-spacing:.1em;color:rgba(255,255,255,.45)}
.gi-step strong{font:400 14px/1.3 "Yu Mincho",serif;color:#fff}
.gi-step small{font:300 7px/1 "Helvetica Neue",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.gi-sep{width:1px;height:28px;background:rgba(255,255,255,.25);flex-shrink:0}

/* ── START CTA ── 押したくなるボタン全面リデザイン */
.gbtn-start{
  width:100%;
  padding:18px 22px 18px 24px;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  /* 温かみのある半透明塗り */
  background:linear-gradient(135deg,rgba(255,245,210,.13) 0%,rgba(255,225,150,.06) 100%) !important;
  border:1.5px solid rgba(255,230,170,.62) !important;
  box-shadow:
    0 0 0 1px rgba(255,220,120,.1),   /* 外光 */
    0 6px 28px rgba(0,0,0,.42);
  position:relative;overflow:hidden;
  cursor:pointer;
  transition:background .3s, box-shadow .3s;
  animation:fadeUp .55s ease-out .46s both, startPulse 2.8s ease-in-out 1.8s infinite;
}
/* 押す前はホバーで明るくなる */
.gbtn-start:hover{
  background:linear-gradient(135deg,rgba(255,245,210,.28) 0%,rgba(255,220,130,.15) 100%) !important;
  box-shadow:
    0 0 0 3px rgba(255,220,120,.28),
    0 10px 36px rgba(0,0,0,.5) !important;
}
.gbtn-start:active{
  transform:scale(.98);
  background:linear-gradient(135deg,rgba(255,245,210,.38) 0%,rgba(255,220,130,.22) 100%) !important;
}
/* 左側テキストブロック */
.gbtn-s-lbl{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
}
.gbtn-s-sub{
  font:300 8px/1 "Helvetica Neue",sans-serif;
  letter-spacing:.42em;text-transform:uppercase;
  color:rgba(255,220,140,.72);
}
.gbtn-s-main{
  font:500 19px/1 "Yu Mincho","Hiragino Mincho ProN",serif;
  letter-spacing:.18em;
  color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.45);
}
/* 右側アニメーション矢印 */
.gbtn-s-arr{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;
  border:1.5px solid rgba(255,220,150,.55);
  border-radius:50%;
  font-size:16px;
  color:rgba(255,220,150,.9);
  flex-shrink:0;
  animation:arrCircle 1.8s ease-in-out 2.2s infinite;
  transition:background .3s;
}
.gbtn-start:hover .gbtn-s-arr{
  background:rgba(255,210,100,.18);
  border-color:rgba(255,220,150,.9);
  color:#fff;
}
@keyframes arrCircle{
  0%,100%{transform:translateX(0);opacity:.85}
  50%    {transform:translateX(4px);opacity:1}
}
/* ボーダーパルス（生きている感） */
@keyframes startPulse{
  0%,100%{box-shadow:0 0 0 1px rgba(255,220,120,.1),0 6px 28px rgba(0,0,0,.42)}
  50%    {box-shadow:0 0 0 5px rgba(255,220,120,.18),0 8px 34px rgba(0,0,0,.46)}
}
/* シマースイープ */
.gbtn-start::before{
  content:'';position:absolute;top:0;left:-80%;
  width:50%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,240,190,.25),transparent);
  transform:skewX(-14deg);
  animation:shimmer 4s ease-in-out 2.5s infinite;
  pointer-events:none;
}
.gbtn-start::after{display:none !important}/* gbtn共通の→を消す */
@keyframes shimmer{0%{left:-80%}100%{left:140%}}

/* ── OPENING：ゲーム要素を非表示 */
.game-stage.is-opening .game-traveler,
.game-stage.is-opening .game-foliage,
.game-stage.is-opening .gm-air,
.game-stage.is-opening .gm-grade,
.game-stage.is-opening .gm-haze,
.game-stage.is-opening .gm-signpost,
.game-stage.is-opening .game-badge,
.game-stage.is-opening .game-dots { display:none !important; }

/* ── OPENING state ── ウォームゴールド・高級カード ── */
.game-stage.is-opening .game-panel{
  top:0;
  display:flex;flex-direction:column;
  justify-content:center;align-items:center;
  padding:18px;
  /* 周囲の画像に温もりを加える薄いアンバーベール */
  background:radial-gradient(ellipse at center,transparent 40%,rgba(10,5,1,.38) 100%);
}

/* ──── フレームカード本体 ── 地中海ブルー ──── */
.go-frame{
  width:100%;
  padding:28px 22px 24px;
  background:linear-gradient(148deg, rgba(8,28,58,.86) 0%, rgba(5,18,42,.9) 100%);
  border:1px solid rgba(140,200,245,.38);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  box-shadow:
    0 0 0 1px rgba(140,200,245,.1),
    0 20px 60px rgba(0,10,30,.55),
    inset 0 1px 0 rgba(180,225,255,.1);
  position:relative;
  animation:frameIn .7s cubic-bezier(.22,1,.36,1) both;
}
/* スカイブルーのコーナーブラケット */
.go-frame::before,.go-frame::after{
  content:'';position:absolute;
  width:18px;height:18px;
  border-color:rgba(160,215,250,.75);border-style:solid;pointer-events:none;
}
.go-frame::before{top:-2px;left:-2px;border-width:2px 0 0 2px}
.go-frame::after {bottom:-2px;right:-2px;border-width:0 2px 2px 0}
.go-frame-inner{position:absolute;inset:0;pointer-events:none}
.go-frame-inner::before,.go-frame-inner::after{
  content:'';position:absolute;
  width:18px;height:18px;
  border-color:rgba(160,215,250,.75);border-style:solid;
}
.go-frame-inner::before{top:-2px;right:-2px;border-width:2px 2px 0 0}
.go-frame-inner::after {bottom:-2px;left:-2px;border-width:0 0 2px 2px}

/* eyebrow ── スカイブルーライン */
.go-eyebrow{
  display:flex;align-items:center;gap:10px;
  margin-bottom:18px;
  animation:fadeUp .55s ease-out .1s both;
}
.go-eyebrow::before,.go-eyebrow::after{
  content:'';flex:1;height:1px;
  background:linear-gradient(to right,transparent,rgba(140,200,245,.6),transparent);
}
.go-mark{
  font:300 8px/1 "Helvetica Neue",sans-serif;
  letter-spacing:.40em;text-transform:uppercase;
  color:rgba(160,215,250,.88);white-space:nowrap;
}

/* タイトル */
.go-title{
  font:400 28px/1.6 "Yu Mincho","Hiragino Mincho ProN",serif;
  color:#fff;text-align:center;margin:0 0 10px;
  text-shadow:0 2px 20px rgba(0,40,100,.4);
  animation:fadeUp .55s ease-out .2s both;
}

/* リード */
.go-lead{
  font-size:11px;line-height:2.1;
  color:rgba(210,235,255,.75);text-align:center;
  margin:0 0 20px;
  animation:fadeUp .55s ease-out .28s both;
}

/* gi-steps をスカイブルーに */
.game-stage.is-opening .gi-step-n{ color:rgba(140,205,245,.72); }
.game-stage.is-opening .gi-step strong{ color:#fff; }
.game-stage.is-opening .gi-step small{ color:rgba(140,205,245,.48); }
.game-stage.is-opening .gi-sep{ background:rgba(140,200,245,.28); }
.game-stage.is-opening .gi-steps{
  border-top-color:rgba(140,200,245,.2);
  border-bottom-color:rgba(140,200,245,.2);
  margin-bottom:22px;
  animation:fadeUp .55s ease-out .34s both;
}

/* CTAボタン ── 白×ネイビー（清潔感・視認性最高） */
.go-btn{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;
  padding:17px 20px 17px 26px;
  background:rgba(255,255,255,.92);
  border:none;
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 5px 24px rgba(0,20,60,.4);
  cursor:pointer;position:relative;overflow:hidden;
  transition:filter .22s,transform .12s;
  animation:fadeUp .55s ease-out .42s both, startPulse 3s ease-in-out 2.2s infinite;
}
.go-btn:hover{ filter:brightness(1.06); box-shadow:0 8px 32px rgba(0,20,60,.5); }
.go-btn:active{ transform:scale(.98); filter:brightness(.96); }
.go-btn-text{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.go-btn-sub{
  font:300 7.5px/1 "Helvetica Neue",sans-serif;
  letter-spacing:.42em;text-transform:uppercase;
  color:rgba(8,40,90,.55);
}
.go-btn-main{
  font:600 17px/1 "Yu Mincho","Hiragino Mincho ProN",serif;
  letter-spacing:.16em;color:#061828;
}
.go-btn-arr{
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid rgba(8,40,90,.28);border-radius:50%;
  font-size:16px;color:rgba(8,40,90,.7);flex-shrink:0;
  animation:arrCircle 1.8s ease-in-out 2.5s infinite;
}
.go-btn:hover .go-btn-arr{ border-color:rgba(8,40,90,.55); }
.go-btn::before{
  content:'';position:absolute;top:0;left:-80%;
  width:50%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-14deg);
  animation:shimmer 4s ease-in-out 3.2s infinite;pointer-events:none;
}

/* ── normal state text ── */
.game-q{
  font:300 18px/1.75 "Yu Mincho","Hiragino Mincho ProN",serif;
  color:#fff;
  margin:0 0 5px;
  letter-spacing:.06em;
  text-shadow:0 2px 12px rgba(0,0,0,.7);
}
.game-sub{
  font:300 9px/1 "Helvetica Neue",sans-serif;
  letter-spacing:.32em;text-transform:uppercase;
  color:rgba(255,255,255,.52);
  margin:0 0 18px;
  text-shadow:0 1px 6px rgba(0,0,0,.6);
}

/* ── CTA ボタン ── 見やすいフロストグラス ── */
.gbtn{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;
  padding:14px 18px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.42);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:#fff;
  font:400 14px/1 "Yu Mincho","Hiragino Mincho ProN",serif;
  letter-spacing:.12em;
  cursor:pointer;
  transition:background .22s, border-color .22s;
}
.gbtn:hover{
  background:rgba(255,255,255,.24);
  border-color:rgba(255,255,255,.72);
}
.gbtn::after{
  content:'\2192';
  font-size:14px;
  opacity:.65;
  flex-shrink:0;
  transition:opacity .22s, transform .22s;
}
.gbtn:hover::after{ opacity:1; transform:translateX(4px); }
.gbtn:active{ background:rgba(255,255,255,.32); }

/* ── HUD  (z:11) ── */
.game-badge{
  position:absolute;top:18px;right:18px;z-index:11;
  font:300 7px/1 "Helvetica Neue",sans-serif;
  letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.5);padding:4px 8px;
  border:1px solid rgba(255,255,255,.18);
}
.game-dots{
  position:absolute;top:20px;left:50%;transform:translateX(-50%);
  z-index:11;display:flex;gap:7px;
}
.gd{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.26);transition:background .4s}
.gd.active{background:#fff}
.gd.done  {background:rgba(255,255,255,.52)}

/* ── ARRIVAL result overlay  (z:12) ── */
.game-result{
  position:absolute;inset:0;z-index:12;
  display:none;flex-direction:column;
  padding:0;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:linear-gradient(160deg,rgba(2,6,18,.96) 0%,rgba(4,14,8,.98) 60%,rgba(2,6,18,.99) 100%);
}
.game-result.show{display:flex}

/* ── ヘッダーエリア ── */
.gr-header{
  position:relative;overflow:hidden;
  flex-shrink:0;height:200px;
}
.gr-header-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  filter:brightness(.55) saturate(1.2);
  transform:scale(1.06);
  transition:transform 4s ease;
}
.game-result.show .gr-header-bg{ transform:scale(1); }
.gr-header-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to bottom, transparent 20%, rgba(2,6,18,.95) 100%);
}
.gr-header-content{
  position:absolute;bottom:0;left:0;right:0;
  padding:16px 20px 20px;
}
.gr-arrived{
  font:300 7px/1 "Helvetica Neue",sans-serif;
  letter-spacing:.32em;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin-bottom:8px;
  opacity:0;animation:fadeUp .5s ease-out .3s both;
}
.gr-heading{
  font:400 18px/1.5 "Yu Mincho",serif;color:#fff;margin:0;
  opacity:0;animation:fadeUp .5s ease-out .6s both;
}
.gr-heading small{
  display:block;margin-top:4px;
  font:300 9px/1 "Helvetica Neue",sans-serif;
  letter-spacing:.18em;color:rgba(255,255,255,.45);
}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ── セクションタイトル ── */
.gr-section-label{
  padding:18px 20px 10px;
  font:300 7px/1 "Helvetica Neue",sans-serif;
  letter-spacing:.3em;text-transform:uppercase;
  color:rgba(255,255,255,.35);
  border-bottom:1px solid rgba(255,255,255,.08);
  margin:0 20px;
  opacity:0;animation:fadeUp .4s ease-out .8s both;
}

/* ── カードグリッド ── */
.gr-grid{
  display:flex;flex-direction:column;gap:0;
  flex:1;padding:8px 0 10px;
}

/* カード本体 */
.gr-card{
  display:flex;overflow:hidden;
  text-decoration:none;flex-shrink:0;
  padding:14px 20px;
  border-bottom:1px solid rgba(255,255,255,.07);
  gap:14px;align-items:stretch;
  opacity:0;animation:fadeUp .45s ease-out both;
  transition:background .2s;
}
.gr-card:active{ background:rgba(255,255,255,.04); }
.gr-card:nth-child(1){animation-delay:.9s}
.gr-card:nth-child(2){animation-delay:1.1s}
.gr-card:nth-child(3){animation-delay:1.3s}

/* カード番号バッジ */
.gr-num{
  flex-shrink:0;width:20px;
  font:300 10px/1 "Helvetica Neue",sans-serif;
  color:rgba(255,255,255,.22);
  padding-top:4px;letter-spacing:.02em;
}

/* 画像 */
.gr-img{
  flex-shrink:0;width:80px;height:80px;
  position:relative;overflow:hidden;
  border-radius:2px;
  background:#1e2820;
}
.gr-img img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .4s ease;
}
.gr-card:active .gr-img img{ transform:scale(1.04); }
.gr-img::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.06) 0%,transparent 60%);
  pointer-events:none;
}
/* 画像なし・読み込み失敗時のプレースホルダー */
.gr-img.no-img::before{
  content:'✈';
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:28px;
  color:rgba(255,255,255,.25);
}

/* テキスト */
.gr-body{
  flex:1;display:flex;flex-direction:column;justify-content:center;gap:6px;
}
.gr-tag{
  font:300 7px/1 "Helvetica Neue",sans-serif;
  letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,210,100,.65);
}
.gr-name{
  font:400 13px/1.55 "Yu Mincho",serif;
  color:rgba(255,255,255,.9);
}
.gr-arrow{
  font-size:10px;color:rgba(255,255,255,.2);
  align-self:flex-end;margin-top:2px;
}

/* ── リプレイボタン ── */
.gr-replay{
  flex-shrink:0;margin:8px 20px 20px;
  padding:15px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.65);
  font:400 11px/1 "Yu Mincho",serif;
  letter-spacing:.22em;cursor:pointer;
  transition:background .2s,border-color .2s;
  opacity:0;animation:fadeUp .4s ease-out 1.7s both;
}
.gr-replay:active{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.38);
}

/* strong appeal 2 */
.promise{padding:52px 20px 60px;background:#fff}
.promise .kicker{color:var(--accent)}
.promise h2{font-size:28px;line-height:1.6;margin:14px 0 0;color:var(--ink)}
.promise-lead{font-size:12px;line-height:2;color:var(--muted);margin:12px 0 0}
.promise-grid{display:grid;gap:10px;margin-top:28px}
.promise-card{display:flex;align-items:stretch;border:1px solid rgba(0,0,0,.13);overflow:hidden}
.promise-card-img{width:130px;flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:10px}
.promise-card-img img{width:100%;height:100%;object-fit:contain;max-height:110px}
.promise-card-body{flex:1;padding:18px 16px;display:flex;flex-direction:column;justify-content:center;background:#fff;border-left:1px solid rgba(0,0,0,.08)}
.promise-card-body small{font:300 8px/1 "Helvetica Neue",sans-serif;letter-spacing:.24em;text-transform:uppercase}
.promise-card-body strong{display:block;font:500 14px/1.55 "Yu Mincho",serif;color:var(--ink);margin-top:6px}
/* カード個別の背景色（イラストに合わせる） */
.pc-discover{background:#f0e6d0}
.pc-discover .promise-card-body small{color:#8a6030}
.pc-play{background:#e6ede6}
.pc-play .promise-card-body small{color:#4a6645}
.pc-learn{background:#e4ecf2}
.pc-learn .promise-card-body small{color:#2e5a7a}
.pc-go{background:#ede8de}
.pc-go .promise-card-body small{color:#7a5c3a}

/* strong appeal 3 */
.bridge{background:#161210;padding:56px 24px 64px;position:relative;overflow:hidden}
.bridge::before{
  content:'';position:absolute;
  top:0;left:24px;right:24px;height:1px;
  background:linear-gradient(to right,transparent,rgba(196,149,90,.4),transparent);
}
.bridge-kicker{
  font:300 8px/1 "Helvetica Neue",sans-serif;
  letter-spacing:.32em;text-transform:uppercase;
  color:#c4955a;display:flex;align-items:center;gap:10px;margin-bottom:28px;
}
.bridge-kicker::after{content:'';flex:1;height:1px;background:rgba(196,149,90,.25)}
.bridge h2{
  font:300 36px/1.65 "Yu Mincho",serif;
  letter-spacing:.05em;margin:0 0 32px;
  color:#f0ece4;
}
.bridge h2 em{font-style:normal;color:#c4955a}
.bridge-photo{
  position:relative;margin:0 -4px 32px;
  border-top:1px solid rgba(240,236,228,.18);
  border-bottom:1px solid rgba(240,236,228,.18);
}
.bridge-photo img{
  width:100%;height:260px;
  object-fit:cover;object-position:center 25%;
  display:block;
  filter:contrast(1.04) saturate(.92);
}
.bridge-photo-caption{
  position:absolute;bottom:10px;right:12px;
  font:300 7px/1 "Helvetica Neue",sans-serif;
  letter-spacing:.18em;color:rgba(255,255,255,.5);
  text-transform:uppercase;
}
.bridge p{
  font-size:12px;line-height:2;
  color:rgba(240,236,228,.6);
  margin:0 0 28px;
}
.bridge-cta{
  display:inline-flex;align-items:center;gap:14px;
  font:500 13px/1 "Yu Mincho",serif;letter-spacing:.12em;
  color:#f0ece4;text-decoration:none;
  padding-bottom:10px;
  border-bottom:1px solid rgba(240,236,228,.3);
  transition:border-color .3s,color .3s;
}
.bridge-cta::after{
  content:'';width:24px;height:1px;
  background:rgba(240,236,228,.5);
  transition:width .3s;
}
.bridge-cta:hover{color:#c4955a;border-color:#c4955a}
.bridge-cta:hover::after{width:36px;background:#c4955a}

/* content */
.food-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:10px;margin-top:28px}
.food-big{height:390px;position:relative;overflow:hidden;display:block;border-radius:4px}
.food-big img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.food-big:hover img{transform:scale(1.04)}
.food-big:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 38%,rgba(0,0,0,.75))}
.food-caption{position:absolute;z-index:2;left:18px;right:18px;bottom:20px;color:#fff}
.food-caption-tag{display:inline-block;font-size:8px;letter-spacing:.2em;text-transform:uppercase;background:rgba(255,255,255,.2);padding:3px 8px;border-radius:2px;margin-bottom:8px}
.food-caption-title{display:block;font:500 15px/1.6 "Yu Mincho",serif}
.food-side{display:grid;gap:10px}
.food-side a{height:190px;position:relative;overflow:hidden;display:block;border-radius:4px}
.food-side a img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.food-side a:hover img{transform:scale(1.05)}
.food-side a:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 25%,rgba(0,0,0,.68))}
.food-side-cap{position:absolute;z-index:2;left:12px;right:12px;bottom:12px;color:#fff;font:500 12px/1.45 "Yu Mincho",serif;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.btn-price-note{margin-top:10px;margin-bottom:0;text-align:center;font:400 10px/1.4 "Helvetica Neue","Hiragino Sans",sans-serif;letter-spacing:.06em;color:rgba(255,255,255,.6)}
.food-more{text-align:right;margin-top:12px;margin-bottom:0}.food-more a{font:600 10px/1 "Helvetica Neue",sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);text-decoration:none;opacity:.55;transition:opacity .2s}.food-more a:hover{opacity:1}
.list{margin-top:28px;border-top:1px solid var(--line)}.row{display:grid;grid-template-columns:34px 1fr 20px;align-items:center;min-height:70px;border-bottom:1px solid var(--line)}
.row span:first-child{font-size:8px;color:#999}.row b{font-size:12px;font-weight:500}.row span:last-child{color:#999}

/* ── BEFORE THE TRIP ─ Dark editorial redesign ── */
.before-trip{
  background:#0d1117;
  color:#f0ece4;
  padding:60px 0 52px;
}
.before-trip .kicker{
  color:rgba(255,255,255,.35);
  padding:0 24px;
  border-left:none;
}
.before-trip .kicker::before{
  background:rgba(255,255,255,.25);
}
.before-trip .title{
  color:#f0ece4;
  padding:0 24px;
  font-size:28px;
  margin-top:10px;
}
.before-trip .list{
  margin-top:36px;
  border-top:1px solid rgba(255,255,255,.08);
}
.before-trip .row{
  display:flex;
  align-items:center;
  min-height:auto;
  padding:20px 24px;
  border-bottom:1px solid rgba(255,255,255,.08);
  border-top:none;
  grid-template-columns:none;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:background .22s;
  text-decoration:none;
}
.before-trip .row::before{
  content:'';
  position:absolute;left:0;bottom:0;
  width:0;height:1px;
  background:rgba(255,255,255,.4);
  transition:width .35s ease;
}
.before-trip .row:active{background:rgba(255,255,255,.04)}
.before-trip .row:active::before{ width:100%; }

/* 番号 */
.before-trip .row span:first-child{
  font:300 11px/1 "Helvetica Neue",sans-serif;
  letter-spacing:.18em;
  color:rgba(255,255,255,.25);
  margin-right:20px;
  flex-shrink:0;
  width:28px;
}
/* タイトル */
.before-trip .row b{
  flex:1;
  font:400 17px/1.4 "Yu Mincho","Hiragino Mincho ProN",serif;
  color:#f0ece4;
  letter-spacing:.04em;
}
/* 矢印 */
.before-trip .row span:last-child{
  font-size:14px;
  color:rgba(255,255,255,.3);
  margin-left:12px;
  transition:transform .22s, color .22s;
  flex-shrink:0;
}
.before-trip .row:active span:last-child{
  transform:translate(3px,-3px);
  color:rgba(255,255,255,.7);
}

/* 大きな装飾番号（背景） */
.before-trip .row::after{
  content:attr(data-num);
  position:absolute;right:56px;top:50%;
  transform:translateY(-50%);
  font:700 64px/1 "Helvetica Neue",sans-serif;
  color:rgba(255,255,255,.03);
  pointer-events:none;
  letter-spacing:-.02em;
}
.flight{margin-top:28px;background:#243034;color:#eef2ef;padding:12px 15px}.flight-row{display:grid;grid-template-columns:44px 1fr 16px;gap:8px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.12)}.flight-row:last-child{border-bottom:0}.flight-row small{color:#91a1a1}.flight-row b{font-size:11px;font-weight:500}

/* ── Fly Smart ── */
.fly-smart{background:#fff;overflow:hidden}
.fly-smart-head{padding:44px 22px 28px}
.fly-smart .kicker{color:#2b7db8;letter-spacing:.24em}
.fly-smart .title{font:500 24px/1.55 "Yu Mincho",serif;color:var(--ink);margin:12px 0 16px}
.fly-smart-img{position:relative;height:190px;overflow:hidden;margin-top:24px}
.fly-smart-img img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.flight{padding:16px 22px 44px;display:grid;grid-template-columns:1fr 1fr;gap:7px}
.flight-row{
  display:flex;flex-direction:column;
  padding:15px 14px 13px;
  color:#fff;
  cursor:pointer;
  min-height:96px;
  position:relative;
  overflow:hidden;
}
.flight-row::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.08) 0%,transparent 60%);
  pointer-events:none;
}
.flight-row.wide{
  grid-column:1/-1;
  flex-direction:row;
  align-items:center;
  gap:10px;
  min-height:auto;
  padding:14px 16px;
}
.fc-lcc{background:#c9581f}
.fc-ana{background:#0c2d6b}
.fc-jal{background:#a8001a}
.fc-air{background:#1a6b3a}
.fc-tkt{background:#1f6aa0}
.flight-code{
  font:800 10px/1 "Helvetica Neue",Arial,sans-serif;
  letter-spacing:.12em;
  opacity:.6;
  margin-bottom:auto;
}
.flight-title{
  font:500 13px/1.45 "Yu Mincho",serif;
  margin-top:22px;
}
.wide .flight-title{flex:1;margin-top:0;font-size:14px}
.flight-arrow{
  align-self:flex-end;
  font-size:14px;
  opacity:.5;
}
.wide .flight-arrow{align-self:center}
.fly-smart-lead{
  margin:0;
  padding:0;
  text-align:left;
}
.fsl-keys{
  display:block;
  font:300 10px/1 "Helvetica Neue","Arial",sans-serif;
  letter-spacing:.2em;
  color:var(--muted);
  margin-bottom:8px;
}
.fsl-msg{
  display:block;
  font:400 15px/1.7 "Yu Mincho","Hiragino Mincho ProN",serif;
  color:var(--ink);
  letter-spacing:.04em;
}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:28px}.tag{padding:8px 11px;border:1px solid var(--line);border-radius:999px;font-size:10px;background:rgba(255,255,255,.28)}

/* ══════════════════════════════════════
   ALL JOURNEYS — カテゴリーセクション
══════════════════════════════════════ */
.all-journeys{
  background:var(--paper);
  padding:56px 0 52px;
}
.all-journeys .kicker,
.all-journeys .title,
.all-journeys .lead{ padding:0 22px; }
.all-journeys .lead{ color:var(--muted); font-size:11px; margin-top:8px; }

.aj-body{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--line);
  margin-top:28px;
}

/* ── 各セル ── */
.aj-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 15px;
  background:var(--paper);
  text-decoration:none;
  transition:background .15s, color .15s;
  min-height:52px;
}
.aj-row:hover{ background:var(--ink); }
.aj-row:hover .aj-name{ color:#fff; }
.aj-row:hover .aj-arr{ opacity:1; color:#fff; transform:translate(2px,-2px); }
.aj-row:active{ background:var(--ink); }

/* ジャンル名 */
.aj-name{
  font:400 13px/1.4 "Yu Mincho","Hiragino Mincho ProN",serif;
  color:var(--ink);
  letter-spacing:.04em;
  flex:1;
  min-width:0;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  transition:color .15s;
}

/* 矢印 */
.aj-arr{
  font-style:normal;
  font-size:12px;
  color:var(--muted);
  opacity:.4;
  flex-shrink:0;
  margin-left:6px;
  transition:transform .15s, opacity .15s, color .15s;
}

/* グループ間の仕切り */
.aj-sep{
  grid-column:1/-1;
  height:20px;
  background:var(--bg);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

/* もっと見るリンク */
.aj-more{
  grid-column:1/-1;
  margin:0;
  padding:0 22px;
  background:var(--paper);
  border-top:2px solid var(--ink);
}
.aj-more a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 0;
  font:500 13px/1 "Yu Mincho","Hiragino Mincho ProN",serif;
  color:var(--ink);
  text-decoration:none;
  letter-spacing:.08em;
  transition:opacity .2s;
}
.aj-more a::after{
  content:'→';
  font-size:14px;
  transition:transform .2s;
}
.aj-more a:hover{ opacity:.6; }
.aj-more a:hover::after{ transform:translateX(5px); }
/* ── FINAL section ── */
.final{
  position:relative;
  overflow:hidden;
  color:#fff;
}
/* 画像エリア */
.final-img{
  position:relative;
  height:260px;
  overflow:hidden;
}
.final-img img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:center 30%;
  animation:finalKenBurns 18s ease-in-out infinite alternate;
  transform-origin:55% 45%;
}
@keyframes finalKenBurns{
  0%  { transform:scale(1)    translateX(0)    translateY(0); }
  100%{ transform:scale(1.1) translateX(-2%)  translateY(-1%); }
}
/* 画像とテキストエリアの境界をなじませる */
.final-img::after{
  content:"";
  position:absolute;bottom:0;left:0;right:0;
  height:80px;
  background:linear-gradient(to bottom, transparent, #0d0816);
}

/* テキストエリア */
.final-copy{
  background:#0d0816;
  padding:32px 24px 56px;
  display:flex;flex-direction:column;
  align-items:center;
  text-align:center;
  position:relative;
  overflow:hidden;
}
/* 背景にふわふわ光のオーブ */
.final-orb{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  mix-blend-mode:screen;
  filter:blur(55px);
}
.final-orb-1{
  width:260px;height:260px;
  background:radial-gradient(circle,rgba(180,50,180,.5) 0%,transparent 70%);
  top:-80px;right:-60px;
  animation:orbFloat1 12s ease-in-out infinite;
}
.final-orb-2{
  width:200px;height:200px;
  background:radial-gradient(circle,rgba(80,30,200,.45) 0%,transparent 70%);
  bottom:-40px;left:-40px;
  animation:orbFloat2 15s ease-in-out infinite;
}
.final-orb-3{
  width:150px;height:150px;
  background:radial-gradient(circle,rgba(220,80,120,.4) 0%,transparent 70%);
  top:40%;right:15%;
  animation:orbFloat3 10s ease-in-out infinite;
}
@keyframes orbFloat1{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%    { transform:translate(-25px,30px) scale(1.15); }
}
@keyframes orbFloat2{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%    { transform:translate(35px,-40px) scale(1.2); }
}
@keyframes orbFloat3{
  0%,100%{ transform:translate(0,0) scale(1);   opacity:.7; }
  50%    { transform:translate(-20px,28px) scale(1.25); opacity:1; }
}
.final-copy .kicker{
  color:rgba(255,255,255,.5);
  margin-bottom:14px;
  position:relative;z-index:1;
}
.final-copy .kicker::before{ background:rgba(255,255,255,.25); }
.final h2{
  font:400 28px/1.65 "Yu Mincho",serif;
  letter-spacing:.06em;
  margin:0 0 10px;
  position:relative;z-index:1;
}
.final-lead{
  font:300 12px/2 "Yu Mincho",serif;
  color:rgba(255,255,255,.62);
  letter-spacing:.06em;
  margin:0 0 32px;
  position:relative;z-index:1;
}
.final .hero-btn-wrap{
  width:100%;padding-bottom:0;
  position:relative;z-index:1;
}
.cta{display:none}
.final-copy{
  background:#0d0816;
  padding:32px 24px 56px;
  display:flex;flex-direction:column;
  align-items:center;
  text-align:center;
}
.final-copy .kicker{
  color:rgba(255,255,255,.6);
  margin-bottom:14px;
}
.final-copy .kicker::before{ background:rgba(255,255,255,.35); }
.final h2{
  font:400 28px/1.65 "Yu Mincho",serif;
  letter-spacing:.06em;
  margin:0 0 10px;
}
.final-lead{
  font:300 12px/1.9 "Yu Mincho",serif;
  color:rgba(255,255,255,.72);
  letter-spacing:.06em;
  margin:0 0 32px;
}
.final .hero-btn-wrap{ width:100%; padding-bottom:0; }
.cta{display:none}
footer{padding:28px 20px 34px;background:#ece7df;display:flex;justify-content:space-between;color:#817a70;font-size:8px}footer strong{font:500 15px "Yu Mincho",serif;color:var(--ink)}

/* ════════════════════════════════════════
   FOOTER — PHP テンプレート対応フッター
   クラス名 ft- プレフィックスで衝突防止
════════════════════════════════════════ */
.ft-outer{
  background:#0a0c10;
  color:#f0ece4;
  padding:0;
  /* 上部にアクセントライン */
  border-top:2px solid transparent;
  border-image:linear-gradient(90deg,#c22d72,#6b1f5e,#2d1259) 1;
}
.ft-inner{
  max-width:480px;
  margin:0 auto;
  padding:44px 22px 36px;
}

/* ── ブランドエリア ── */
.ft-brand{
  display:flex;flex-direction:column;align-items:center;
  gap:8px;
  margin-bottom:36px;
}
.ft-logo{
  height:26px;width:auto;
  filter:brightness(0) invert(1);
  opacity:.9;
}
.ft-tagline{
  font:300 9px/1 "Helvetica Neue",sans-serif;
  letter-spacing:.26em;text-transform:uppercase;
  color:rgba(255,255,255,.25);
  margin:0;
}
/* ロゴ下の装飾ライン */
.ft-brand::after{
  content:'';display:block;
  width:32px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
  margin-top:8px;
}

/* ── footer_wrap リセット ── */
.footer_wrap{ margin:0;padding:0; }

/* ── メインリンク（認証・アカウント系） ── */
.footer_menu{
  list-style:none;
  margin:0;padding:0;
}
/* 最初の3件（ログイン系）：全幅の横長行 */
.footer_menu li:nth-child(-n+3) a{
  display:flex;align-items:center;justify-content:space-between;
  padding:15px 0;
  border-bottom:1px solid rgba(255,255,255,.07);
  font:400 13px/1 "Yu Mincho",serif;
  color:rgba(255,255,255,.82);
  text-decoration:none;
  letter-spacing:.06em;
  transition:color .15s;
}
.footer_menu li:nth-child(-n+3) a::after{
  content:'\2192';
  font-size:12px;
  color:rgba(255,255,255,.28);
  transition:transform .15s,color .15s;
}
.footer_menu li:nth-child(-n+3) a:active{ color:#fff; }
.footer_menu li:nth-child(-n+3) a:active::after{
  transform:translateX(3px);color:rgba(255,255,255,.7);
}

/* サポートリンクのラベル */
.ft-support-label{
  font:600 7px/1 "Helvetica Neue",sans-serif;
  letter-spacing:.3em;text-transform:uppercase;
  color:rgba(255,255,255,.2);
  margin:28px 0 14px;
}

/* 4件目以降（サポート系）：コンパクトな横並び */
.footer_menu li:nth-child(n+4){
  display:inline;
}
.footer_menu li:nth-child(n+4) a{
  display:inline-block;
  font:300 10px/1 "Helvetica Neue",sans-serif;
  letter-spacing:.06em;
  color:rgba(255,255,255,.35);
  text-decoration:none;
  padding:6px 0;
  margin:0 12px 4px 0;
  border-bottom:1px solid rgba(255,255,255,.1);
  transition:color .15s,border-color .15s;
  white-space:nowrap;
}
.footer_menu li:nth-child(n+4) a:active{
  color:rgba(255,255,255,.75);
  border-color:rgba(255,255,255,.4);
}

/* サポートリンクのwrapper（inline liをflexboxで包む） */
.ft-support-wrap{
  display:flex;flex-wrap:wrap;gap:0;
  margin-bottom:32px;
}

/* ── コピーライト ── */
.ft-copy,#footer{
  text-align:center;
  font:300 7px/2 "Helvetica Neue",sans-serif;
  letter-spacing:.2em;
  color:rgba(255,255,255,.18);
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.06);
  margin-top:0;
}
/* ── フッター追従ボタン (FAB) ── */
.fab-wrap{
  position:fixed;
  bottom:20px;left:50%;
  transform:translateX(-50%) translateY(28px);
  z-index:90;
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease, transform .35s cubic-bezier(.22,1,.36,1);
  width:calc(100% - 32px);
  max-width:420px;
}
.fab-wrap.visible{
  opacity:1;
  pointer-events:all;
  transform:translateX(-50%) translateY(0);
}
.fab{
  display:flex;
  align-items:center;justify-content:space-between;
  width:100%;
  padding:0 20px;
  height:58px;
  background:linear-gradient(100deg, #e8458e 0%, #ff7eb3 45%, #c22d72 100%);
  color:#fff;
  text-decoration:none;
  border-radius:4px;
  box-shadow:
    0 0 0 1px rgba(255,120,180,.35),
    0 4px 20px rgba(194,45,114,.55),
    0 12px 40px rgba(194,45,114,.3);
  position:relative;
  overflow:hidden;
  transition:transform .15s, box-shadow .2s;
  animation:fabGlow 2.8s ease-in-out infinite;
}
.fab:active{
  transform:scale(.97);
  box-shadow:0 2px 10px rgba(194,45,114,.4);
}

/* グロー点滅 */
@keyframes fabGlow{
  0%,100%{ box-shadow:0 0 0 1px rgba(255,120,180,.35),0 4px 20px rgba(194,45,114,.55),0 12px 40px rgba(194,45,114,.3); }
  50%    { box-shadow:0 0 0 3px rgba(255,150,200,.5), 0 6px 30px rgba(194,45,114,.75),0 18px 50px rgba(194,45,114,.45); }
}

/* シマー */
.fab::before{
  content:'';
  position:absolute;
  top:0;left:-80%;
  width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-18deg);
  animation:fabShimmer 2.4s ease-in-out infinite;
}
@keyframes fabShimmer{
  0%    { left:-80%; opacity:0; }
  20%   { opacity:1; }
  60%   { left:130%; opacity:0; }
  100%  { left:130%; opacity:0; }
}

.fab-left{ display:flex;flex-direction:column;gap:3px;position:relative;z-index:1; }
.fab-sub{
  font:300 7px/1 "Helvetica Neue",sans-serif;
  letter-spacing:.28em;text-transform:uppercase;
  color:rgba(255,255,255,.7);
}
.fab-label{
  font:600 15px/1 "Yu Mincho",serif;
  letter-spacing:.1em;
  color:#fff;
  text-shadow:0 1px 6px rgba(0,0,0,.2);
}
.fab-arrow{
  font-size:20px;
  color:rgba(255,255,255,.85);
  position:relative;z-index:1;
  animation:fabBounce 1.8s ease-in-out infinite;
}
@keyframes fabBounce{
  0%,100%{ transform:translateX(0); }
  50%    { transform:translateX(4px); }
}