*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:#dfe4e8;
  color:#10274c;
  font-family:
    "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    sans-serif;
}

a{
  color:inherit;
  text-decoration:none;
}

button{
  font:inherit;
}

img{
  display:block;
  width:100%;
}

.site{
  width:100%;
  max-width:430px;
  margin:0 auto;
  min-height:100vh;
  background:#fffaf0;
  overflow:hidden;
  position:relative;
}


/* =====================================================
   COMMON
===================================================== */

.section{
  padding:74px 22px;
}

.kicker{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:10px;
  line-height:1;
  font-weight:900;
  letter-spacing:.15em;
}

.kicker:before{
  content:"";
  width:18px;
  height:3px;
  background:currentColor;
}

.section-title{
  margin:13px 0 0;
  font-size:38px;
  line-height:1.03;
  letter-spacing:-.055em;
  font-weight:900;
}

.section-lead{
  margin:18px 0 0;
  font-size:13px;
  line-height:2;
  font-weight:600;
}

.en{
  font-family:Arial,sans-serif;
}


/* =====================================================
   HEADER
===================================================== */

/* =====================================================
   HEADER
===================================================== */

.header{
  height:60px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 18px;
  background:rgba(255,250,240,.96);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(16,39,76,.1);
  position:sticky;
  top:0;
  z-index:100;
}

.logo{
  display:flex;
  align-items:center;
}
.logo img{
  height:28px;
  width:auto;
}

/* ハンバーガーボタン */
.hamburger{
  width:42px;
  height:42px;
  border-radius:50%;
  background:#10274c;
  border:none;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  padding:0;
  -webkit-tap-highlight-color:transparent;
  flex-shrink:0;
  transition:opacity .15s;
}
.hamburger:active{ opacity:.75; }
.hamburger span{
  display:block;
  width:16px;
  height:2px;
  background:#fff;
  border-radius:2px;
  transition:transform .25s ease, opacity .2s ease;
  transform-origin:center;
}
.hamburger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2){ opacity:0; }
.hamburger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* オーバーレイ */
.drawer-overlay{
  position:fixed;
  inset:0;
  background:rgba(5,13,28,.58);
  z-index:199;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
}
.drawer-overlay.is-open{ opacity:1; pointer-events:auto; }

/* ドロワー */
.drawer{
  position:fixed;
  top:0;
  right:0;
  width:82%;
  max-width:300px;
  height:100%;
  background:#10274c;
  z-index:200;
  transform:translateX(100%);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.drawer.is-open{ transform:translateX(0); }

.drawer-head{
  height:60px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
  border-bottom:1px solid rgba(255,255,255,.08);
  flex-shrink:0;
}
.drawer-head-logo img{
  height:22px;
  width:auto;
  filter:brightness(0) invert(1);
  opacity:.85;
}
.drawer-close{
  width:34px;
  height:34px;
  border:1.5px solid rgba(255,255,255,.2);
  border-radius:50%;
  background:none;
  color:rgba(255,255,255,.8);
  font-size:13px;
  cursor:pointer;
  display:grid;
  place-items:center;
  line-height:1;
  padding:0;
  -webkit-tap-highlight-color:transparent;
}

.drawer-nav{
  flex:1;
  padding:16px 0;
  overflow-y:auto;
}
.drawer-link{
  display:grid;
  grid-template-columns:28px 1fr auto;
  align-items:center;
  gap:14px;
  padding:15px 22px;
  color:#fff;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:background .12s;
}
.drawer-link:active,
.drawer-link:hover{ background:rgba(255,255,255,.06); }
.drawer-link b{
  font-size:9px;
  font-weight:900;
  letter-spacing:.1em;
  color:rgba(255,213,62,.6);
}
.drawer-link span{
  font-size:13px;
  font-weight:700;
  letter-spacing:-.01em;
}
.drawer-link small{
  font-size:9px;
  color:rgba(255,255,255,.3);
  letter-spacing:.05em;
}

.drawer-footer{
  padding:20px 20px 40px;
  border-top:1px solid rgba(255,255,255,.08);
  flex-shrink:0;
}
.drawer-cta{
  display:block;
  background:#ffd53e;
  color:#10274c;
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
  text-align:center;
  padding:14px 0;
  border-radius:6px;
}
.drawer-cta--logout{
  background:rgba(255,255,255,.1);
  color:rgba(255,255,255,.6);
  border:1px solid rgba(255,255,255,.15);
}


/* =====================================================
   HERO
===================================================== */

.hero{
  position:relative;
  overflow:hidden;
}

.hero-image-wrap{
  position:relative;
  width:100%;
  line-height:0;
}

.hero-img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
}

.hero-btn-wrap{
  position:absolute;
  bottom:36px;
  left:20px;
  right:20px;
  display:flex;
  justify-content:center;
}

/* ---- ヒーローボタン（3D浮遊 + 踊る英字 + スパーク） ---- */
.hero-btn{
  --btn-dark:#10274c;
  --btn-face:#ff7000;
  --btn-light:#fffaf0;

  width:calc(100% - 8px);
  font-size:1.05rem;
  cursor:pointer;
  position:relative;
  font-family:Arial,"Helvetica Neue",sans-serif;
  font-weight:bold;
  line-height:1;
  padding:4px;
  transform:translate(-7px,-7px);
  outline:3px solid transparent;
  outline-offset:6px;
  border-radius:14px;
  background-color:var(--btn-dark);
  color:var(--btn-dark);
  border:none;
  text-align:center;
  transition:transform 150ms ease, box-shadow 150ms ease;
  box-shadow:
    1px 1px 0 0 var(--btn-dark),
    2px 2px 0 0 var(--btn-dark),
    3px 3px 0 0 var(--btn-dark),
    4px 4px 0 0 var(--btn-dark),
    5px 5px 0 0 var(--btn-dark),
    6px 6px 0 0 var(--btn-dark),
    7px 7px 0 0 var(--btn-dark),
    0 0 0 4px var(--btn-light),
    1px 1px 0 4px var(--btn-light),
    2px 2px 0 4px var(--btn-light),
    3px 3px 0 4px var(--btn-light),
    4px 4px 0 4px var(--btn-light),
    5px 5px 0 4px var(--btn-light),
    6px 6px 0 4px var(--btn-light),
    7px 7px 0 4px var(--btn-light);
  animation:hero-btn-float 2.6s ease-in-out infinite;
  text-decoration:none;
  display:block;
}
.hero-btn:hover{
  transform:translate(0,0);
  box-shadow:0 0 0 4px var(--btn-light);
  animation:none;
}
.hero-btn:hover > div{ animation:none; box-shadow:none; }
.hero-btn:active,
.hero-btn:focus-visible{ outline-color:var(--btn-face); }

/* フェイス（オレンジ面） */
.hero-btn > div{
  position:relative;
  pointer-events:none;
  background-color:var(--btn-face);
  border:4px solid rgba(255,255,255,.45);
  border-radius:10px;
  box-shadow:0 0 0 0 rgba(255,112,0,.7);
  animation:hero-btn-pulse 2.2s ease-in-out infinite;
  overflow:hidden;
}

/* 踊る文字 + スパーク */
.btn-bg-letters{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
}
.btn-bg-letters i{
  position:absolute;
  font-style:normal;
  font-weight:900;
  color:rgba(255,255,255,.22);
  line-height:1;
  user-select:none;
  will-change:transform;
}
/* 文字 01-18 */
.btn-bg-letters i:nth-child(1) {font-size:20px;top:8%; left:2%;}
.btn-bg-letters i:nth-child(2) {font-size:13px;top:14%;left:22%;}
.btn-bg-letters i:nth-child(3) {font-size:26px;top:2%; left:50%;}
.btn-bg-letters i:nth-child(4) {font-size:10px;top:56%;left:4%;}
.btn-bg-letters i:nth-child(5) {font-size:19px;top:60%;left:35%;}
.btn-bg-letters i:nth-child(6) {font-size:12px;top:7%; left:78%;}
.btn-bg-letters i:nth-child(7) {font-size:10px;top:63%;left:70%;}
.btn-bg-letters i:nth-child(8) {font-size:21px;top:66%;left:15%;}
.btn-bg-letters i:nth-child(9) {font-size:10px;top:18%;left:90%;}
.btn-bg-letters i:nth-child(10){font-size:15px;top:74%;left:86%;}
.btn-bg-letters i:nth-child(11){font-size:17px;top:33%;left:43%;}
.btn-bg-letters i:nth-child(12){font-size:11px;top:70%;left:7%;}
.btn-bg-letters i:nth-child(13){font-size:14px;top:26%;left:82%;}
.btn-bg-letters i:nth-child(14){font-size:12px;top:43%;left:16%;}
.btn-bg-letters i:nth-child(15){font-size:10px;top:48%;left:60%;}
.btn-bg-letters i:nth-child(16){font-size:16px;top:20%;left:38%;}
.btn-bg-letters i:nth-child(17){font-size:11px;top:80%;left:52%;}
.btn-bg-letters i:nth-child(18){font-size:13px;top:10%;left:63%;}
/* スパーク 19-23 */
.btn-bg-letters i:nth-child(19){font-size:16px;top:28%;left:9%; color:rgba(255,255,200,.7);}
.btn-bg-letters i:nth-child(20){font-size:13px;top:53%;left:84%;color:rgba(255,255,200,.7);}
.btn-bg-letters i:nth-child(21){font-size:20px;top:12%;left:47%;color:rgba(255,255,200,.7);}
.btn-bg-letters i:nth-child(22){font-size:11px;top:68%;left:28%;color:rgba(255,255,200,.7);}
.btn-bg-letters i:nth-child(23){font-size:15px;top:40%;left:71%;color:rgba(255,255,200,.7);}

@keyframes btn-dance-a{
  0%  { transform:translateY(0) rotate(0deg) scale(1); }
  20% { transform:translateY(-14px) rotate(22deg) scale(1.18); }
  45% { transform:translateY(8px) rotate(-16deg) scale(.88); }
  70% { transform:translateY(-10px) rotate(10deg) scale(1.12); }
  100%{ transform:translateY(0) rotate(0deg) scale(1); }
}
@keyframes btn-dance-b{
  0%  { transform:translateY(0) rotate(0deg) scale(1); }
  25% { transform:translateY(12px) rotate(-22deg) scale(.86); }
  55% { transform:translateY(-12px) rotate(18deg) scale(1.2); }
  80% { transform:translateY(6px) rotate(-8deg) scale(.94); }
  100%{ transform:translateY(0) rotate(0deg) scale(1); }
}
@keyframes btn-dance-c{
  0%  { transform:scale(1) rotate(0deg) translateY(0); }
  30% { transform:scale(1.35) rotate(28deg) translateY(-10px); }
  60% { transform:scale(.8) rotate(-20deg) translateY(8px); }
  85% { transform:scale(1.2) rotate(14deg) translateY(-6px); }
  100%{ transform:scale(1) rotate(0deg) translateY(0); }
}
@keyframes btn-sparkle{
  0%,100%{ opacity:0; transform:scale(.1) rotate(-20deg); }
  40%,60%{ opacity:1; transform:scale(1.8) rotate(35deg); }
}

/* 文字ダンス */
.btn-bg-letters i:nth-child(1) {animation:btn-dance-a 2.8s ease-in-out infinite 0.0s;}
.btn-bg-letters i:nth-child(2) {animation:btn-dance-b 3.2s ease-in-out infinite 0.3s;}
.btn-bg-letters i:nth-child(3) {animation:btn-dance-c 2.5s ease-in-out infinite 0.6s;}
.btn-bg-letters i:nth-child(4) {animation:btn-dance-a 3.5s ease-in-out infinite 0.9s;}
.btn-bg-letters i:nth-child(5) {animation:btn-dance-b 2.7s ease-in-out infinite 1.2s;}
.btn-bg-letters i:nth-child(6) {animation:btn-dance-c 3.0s ease-in-out infinite 0.4s;}
.btn-bg-letters i:nth-child(7) {animation:btn-dance-a 2.9s ease-in-out infinite 0.7s;}
.btn-bg-letters i:nth-child(8) {animation:btn-dance-b 3.3s ease-in-out infinite 1.5s;}
.btn-bg-letters i:nth-child(9) {animation:btn-dance-c 2.6s ease-in-out infinite 0.2s;}
.btn-bg-letters i:nth-child(10){animation:btn-dance-a 3.1s ease-in-out infinite 1.1s;}
.btn-bg-letters i:nth-child(11){animation:btn-dance-b 2.8s ease-in-out infinite 0.8s;}
.btn-bg-letters i:nth-child(12){animation:btn-dance-c 3.4s ease-in-out infinite 0.5s;}
.btn-bg-letters i:nth-child(13){animation:btn-dance-a 2.7s ease-in-out infinite 1.3s;}
.btn-bg-letters i:nth-child(14){animation:btn-dance-b 3.0s ease-in-out infinite 0.1s;}
.btn-bg-letters i:nth-child(15){animation:btn-dance-c 2.9s ease-in-out infinite 1.6s;}
.btn-bg-letters i:nth-child(16){animation:btn-dance-a 3.2s ease-in-out infinite 0.4s;}
.btn-bg-letters i:nth-child(17){animation:btn-dance-b 2.6s ease-in-out infinite 1.0s;}
.btn-bg-letters i:nth-child(18){animation:btn-dance-c 3.1s ease-in-out infinite 0.6s;}
/* スパーク：点滅 */
.btn-bg-letters i:nth-child(19){animation:btn-sparkle 2.1s ease-in-out infinite 0.0s;}
.btn-bg-letters i:nth-child(20){animation:btn-sparkle 2.4s ease-in-out infinite 0.7s;}
.btn-bg-letters i:nth-child(21){animation:btn-sparkle 1.9s ease-in-out infinite 1.2s;}
.btn-bg-letters i:nth-child(22){animation:btn-sparkle 2.6s ease-in-out infinite 0.4s;}
.btn-bg-letters i:nth-child(23){animation:btn-sparkle 2.2s ease-in-out infinite 1.6s;}

/* テキスト */
.hero-btn > div > span{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:1.1rem 1.5rem 1.2rem;
  gap:.3rem;
  filter:drop-shadow(0 -1px 0 rgba(255,255,255,.25));
  z-index:2;
}
.hero-btn-sub{
  font-size:.9rem;
  font-weight:700;
  letter-spacing:.08em;
  color:rgba(255,255,255,.9);
  line-height:1;
  text-shadow:0 1px 4px rgba(0,0,0,.35);
}
.hero-btn-main{
  font-size:1.6rem;
  font-weight:900;
  letter-spacing:.04em;
  line-height:1;
  color:#fff;
  text-shadow:0 1px 6px rgba(0,0,0,.4);
}

@keyframes hero-btn-float{
  0%,100%{
    transform:translate(-4px,-4px);
    filter:drop-shadow(0 0 8px rgba(255,130,0,.4));
  }
  50%{
    transform:translate(-4px,-7px);
    filter:drop-shadow(0 0 18px rgba(255,160,0,.75));
  }
}
@keyframes hero-btn-pulse{
  0%  { box-shadow:0 0 0 0   rgba(255,112,0,.7); }
  55% { box-shadow:0 0 0 16px rgba(255,112,0,0); }
  100%{ box-shadow:0 0 0 0   rgba(255,112,0,0); }
}


/* =====================================================
   PROMISE
===================================================== */

.promise{
  padding:52px 18px 60px;
  background:#fffaf0;
}

.promise-head{
  padding:0 2px;
  margin-bottom:28px;
}

.promise-head small{
  display:inline-block;
  font-size:9px;
  font-weight:900;
  letter-spacing:.18em;
  color:#168ce3;
}

.promise-head h2{
  margin:10px 0 0;
  font-size:26px;
  line-height:1.35;
  font-weight:900;
  letter-spacing:-.03em;
  color:#10274c;
}

.promise-trial-note{
  margin:14px 0 0;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 14px;
  border-radius:6px;
  background:linear-gradient(90deg,#fff7d6,#fff2c0);
  border:1.5px solid rgba(255,184,0,.4);
  font-size:12px;
  font-weight:800;
  color:#8a4e00;
  letter-spacing:.02em;
}
.promise-trial-note::before{
  content:"\2713";
  display:grid;
  place-items:center;
  width:18px;height:18px;
  border-radius:50%;
  background:#ff9b2f;
  color:#fff;
  font-size:10px;
  font-weight:900;
  flex-shrink:0;
}

.promise-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.promise-item{
  position:relative;
  overflow:hidden;
  padding:24px 18px 22px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:155px;
}

.promise-item:nth-child(1){
  grid-column:1 / -1;
  background:#ffd53e;
  min-height:130px;
}
.promise-item:nth-child(2){ background:#10274c; }
.promise-item:nth-child(3){ background:#0e72c4; }
.promise-item:nth-child(4){
  grid-column:1 / -1;
  background:#d94a28;
  min-height:120px;
}

/* ゴースト数字 */
.promise-item::before{
  content:attr(data-num);
  position:absolute;
  top:-10px;
  right:8px;
  font-size:110px;
  font-weight:900;
  line-height:1;
  letter-spacing:-.06em;
  font-family:Arial,sans-serif;
  pointer-events:none;
}
.promise-item:nth-child(1)::before{ color:rgba(16,39,76,.1); }
.promise-item:nth-child(2)::before,
.promise-item:nth-child(3)::before,
.promise-item:nth-child(4)::before{ color:rgba(255,255,255,.1); }

/* テキスト色 */
.promise-item:nth-child(1) .promise-item-num,
.promise-item:nth-child(1) strong,
.promise-item:nth-child(1) span{ color:#10274c; }

.promise-item:nth-child(2) .promise-item-num,
.promise-item:nth-child(2) strong,
.promise-item:nth-child(2) span,
.promise-item:nth-child(3) .promise-item-num,
.promise-item:nth-child(3) strong,
.promise-item:nth-child(3) span,
.promise-item:nth-child(4) .promise-item-num,
.promise-item:nth-child(4) strong,
.promise-item:nth-child(4) span{ color:#fff; }

.promise-item-num{
  font-size:9px;
  font-weight:900;
  letter-spacing:.14em;
  margin-bottom:6px;
  position:relative;
  z-index:1;
}

.promise-item strong{
  display:block;
  font-size:20px;
  font-weight:900;
  letter-spacing:-.03em;
  line-height:1.1;
  position:relative;
  z-index:1;
}

.promise-item:nth-child(1) strong,
.promise-item:nth-child(4) strong{
  font-size:24px;
}

.promise-item span{
  display:block;
  margin-top:7px;
  font-size:11px;
  line-height:1.7;
  font-weight:600;
  position:relative;
  z-index:1;
}

/* SVGアイコン */
.promise-icon-wrap{
  position:absolute;
  top:20px;
  right:18px;
  width:32px;
  height:32px;
  z-index:1;
}
.promise-icon-wrap svg{ width:100%; height:100%; }
.promise-item:nth-child(1) .promise-icon-wrap{ color:#10274c; opacity:.4; }
.promise-item:nth-child(2) .promise-icon-wrap,
.promise-item:nth-child(3) .promise-icon-wrap,
.promise-item:nth-child(4) .promise-icon-wrap{ color:#fff; opacity:.55; }

.promise-item strong{
  display:block;
  font-size:15px;
  font-weight:900;
  color:#10274c;
  letter-spacing:-.01em;
}

.promise-item span{
  display:block;
  margin-top:6px;
  font-size:10px;
  line-height:1.75;
  font-weight:600;
  color:#5a6a82;
}


/* =====================================================
   PAPER FLIGHT
===================================================== */

.flight{
  padding:24px 0 60px;
  background:#fff6d9;
}

.flight-intro{
  padding:16px 22px 22px;
}

/* SPECIAL GAME バッジ */
.flight-kicker{
  display:inline-flex;
  align-items:center;
  gap:0;
  font-size:10px;
  letter-spacing:.22em;
  background:#10274c;
  color:#ffd53e;
  padding:6px 14px;
  border-radius:9999px;
  margin-bottom:12px;
}
.flight-kicker::before{ display:none; }

/* ゲームタイトル */
.flight-title{
  margin:0 0 14px;
  font-size:54px;
  line-height:.88;
  letter-spacing:-.04em;
  font-weight:900;
  color:#10274c;
}
.flight-title em{
  color:#168ce3;
  font-style:normal;
}

/* 説明文 */
.flight-description{
  font-size:13px;
  line-height:1.82;
  font-weight:600;
  color:rgba(16,39,76,.68);
  margin:0 0 16px;
}

/* TOKYO → SYDNEY フライトルート */
.flight-cities{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:9px;
  font-weight:900;
  letter-spacing:.12em;
  color:rgba(16,39,76,.38);
}
.flight-cities-line{
  flex:1;
  color:rgba(16,39,76,.28);
}
.flight-cities-line svg{
  width:100%;
  height:10px;
  display:block;
}


/* =====================================================
   PAPER FLIGHT ? DOM GAME
===================================================== */

.game-window{
  position:relative;
  height:380px;
  margin:24px 18px 0;
  border-radius:20px 20px 0 0;
  overflow:hidden;
  background:#87ceeb; /* fallback before pf-sky renders */
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  cursor:pointer;
}

/* ---- layer 0: sky ---- */
.pf-sky{
  position:absolute;
  inset:0;
  z-index:0;
  background:linear-gradient(to bottom,#87ceeb,#c8eaff);
  /* transition はゲーム中にJSで付与 */
}

/* ---- layer 1: city background ---- */
.pf-city-bg{
  position:absolute;
  bottom:0;
  left:0;
  width:200%;
  height:56%;
  z-index:2;
  background-size:auto 100%;
  background-repeat:repeat-x;
  background-position:bottom left;
  opacity:1;
  transition:opacity 1.5s ease;
}
.pf-city-bg.pf-fade{ opacity:0; }

/* ---- layer 2: clouds / balloons ---- */
.pf-cloud,
.pf-balloon{
  position:absolute;
  pointer-events:none;
  will-change:transform;
}

/* balloon obstacle: pop on hit */
.pf-balloon.pf-pop{
  animation:pf-balloon-pop .42s ease-out forwards;
}
@keyframes pf-balloon-pop{
  0%  { transform:scale(1);   opacity:.9; }
  30% { transform:scale(1.55); opacity:1; }
  100%{ transform:scale(0);   opacity:0; }
}

/* ---- layer 3: wind zones ---- */
.pf-wind-zone{
  position:absolute;
  pointer-events:none;
  overflow:hidden;
  z-index:5;
  /* background/border を持たせず線だけ表示 */
}
.pf-wind-line{
  position:absolute;
  height:1.5px;
  border-radius:2px;
  background:linear-gradient(to right, transparent, rgba(120,230,255,.7), transparent);
  animation:pf-wind-flow 0.7s linear infinite;
}
@keyframes pf-wind-flow{
  from{ transform:translateX(60px); opacity:.8; }
  to  { transform:translateX(-20px); opacity:0; }
}

/* ---- layer 4: stars ---- */
.pf-star{
  position:absolute;
  z-index:6;
  pointer-events:none;
  font-size:20px;
  color:#ffd53e;
  text-shadow:0 0 8px rgba(255,213,62,.6);
  line-height:1;
  transition:transform .1s;
}
.pf-star.pf-pop{
  animation:pf-star-pop .45s ease-out forwards;
}
@keyframes pf-star-pop{
  0%  { transform:scale(1);   opacity:1; }
  50% { transform:scale(2.4); opacity:.8; }
  100%{ transform:scale(0);   opacity:0; }
}
.pf-plus1{
  position:absolute;
  z-index:7;
  font-size:13px;
  font-weight:900;
  font-family:Arial,sans-serif;
  color:#ffd53e;
  pointer-events:none;
  animation:pf-plus-up .65s ease-out forwards;
}
@keyframes pf-plus-up{
  0%  { transform:translateY(0);    opacity:1; }
  100%{ transform:translateY(-45px); opacity:0; }
}

/* ---- layer 5: paper plane ---- */
.pf-plane{
  position:absolute;
  z-index:8;
  pointer-events:none;
  will-change:transform;
  filter:drop-shadow(2px 4px 5px rgba(16,39,76,.2));
  transform-origin:50% 50%;
  width:84px;
}
.pf-plane img{
  width:84px !important;
  height:auto !important;
  display:block;
}
.pf-plane.pf-crash{
  animation:pf-tumble .22s linear infinite;
}
@keyframes pf-tumble{
  from{ transform:rotate(0deg) scale(1); }
  50% { transform:rotate(180deg) scale(0.85); }
  to  { transform:rotate(360deg) scale(1); }
}
/* screen shake */
@keyframes pf-shake{
  0%,100%{ transform:translate(0,0) rotate(0); }
  15%    { transform:translate(-5px,-3px) rotate(-1deg); }
  30%    { transform:translate(5px,3px) rotate(1deg); }
  45%    { transform:translate(-4px,2px) rotate(-.7deg); }
  60%    { transform:translate(4px,-2px) rotate(.7deg); }
  75%    { transform:translate(-2px,1px) rotate(-.3deg); }
  90%    { transform:translate(2px,-1px) rotate(.3deg); }
}
.pf-game-shake{ animation:pf-shake .45s ease-out; }
/* red crash flash */
#pf-crash-flash{
  position:absolute;inset:0;z-index:19;
  pointer-events:none;display:none;
  background:rgba(220,30,30,.5);
  border-radius:inherit;
}
@keyframes pf-flash-out{ from{opacity:1;} to{opacity:0;} }
.pf-crash-flash-go{ display:block !important; animation:pf-flash-out .5s ease-out forwards; }
/* smoke particles */
@keyframes pf-smoke-rise{
  0%  { transform:translate(0,0) scale(1);   opacity:.75; }
  100%{ transform:translate(var(--sx),var(--sy)) scale(2.6); opacity:0; }
}

/* ── crash→result transition overlay ── */
#pf-trans-overlay{
  position:absolute;inset:0;z-index:28;
  background:linear-gradient(180deg,#020a18 0%,#050d1c 100%);
  opacity:0;pointer-events:none;
  transition:opacity .5s ease;
}

/* ── result screen: stagger reveal ── */
#pf-result-screen.pf-res-reveal .pf-res-label  { animation:pf-fade-up .4s .05s both; }
#pf-result-screen.pf-res-reveal .pf-res-km     { animation:pf-km-burst .65s .12s cubic-bezier(.22,1.55,.5,1) both; }
#pf-result-screen.pf-res-reveal .pf-res-km-unit{ animation:pf-fade-up .3s .22s both; }
#pf-result-screen.pf-res-reveal .pf-res-reached{ animation:pf-fade-up .3s .34s both; }
#pf-result-screen.pf-res-reveal .pf-res-city   { animation:pf-city-in .55s .42s cubic-bezier(.18,1.5,.5,1) both; }
#pf-result-screen.pf-res-reveal .pf-res-sep    { animation:pf-sep-grow .45s .58s ease both; }
#pf-result-screen.pf-res-reveal .pf-res-best   { animation:pf-fade-up .3s .62s both; }
#pf-result-screen.pf-res-reveal .pf-res-unlock { animation:pf-card-in .55s .95s cubic-bezier(.25,1.2,.5,1) both; }
#pf-result-screen.pf-res-reveal .pf-btn-retry  { animation:pf-fade-up .4s 1.20s both; }

@keyframes pf-fade-up{
  from{ opacity:0; transform:translateY(14px); }
  to  { opacity:1; transform:translateY(0); }
}
@keyframes pf-km-burst{
  0%  { opacity:0; transform:scale(.3) translateY(6px); }
  65% { opacity:1; transform:scale(1.12) translateY(-2px); }
  100%{ opacity:1; transform:scale(1) translateY(0); }
}
@keyframes pf-city-in{
  0%  { opacity:0; transform:scale(1.55); letter-spacing:.28em; }
  60% { opacity:1; transform:scale(.97); letter-spacing:.06em; }
  100%{ opacity:1; transform:scale(1); letter-spacing:.02em; }
}
@keyframes pf-sep-grow{
  from{ opacity:0; width:0; }
  to  { opacity:1; width:36px; }
}
@keyframes pf-card-in{
  from{ opacity:0; transform:translateY(30px) scale(.94); }
  to  { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes pf-star-pop{
  0%  { opacity:0; transform:scale(0) rotate(-30deg); }
  65% { opacity:1; transform:scale(1.5) rotate(8deg); }
  100%{ opacity:1; transform:scale(1) rotate(0deg); }
}
.pf-star-i{
  display:inline-block;
  opacity:0;
}
#pf-result-screen.pf-res-reveal .pf-star-i{
  animation:pf-star-pop .4s both;
}
/* NEW BEST badge */
@keyframes pf-newbest-pop{
  0%  { opacity:0; transform:scale(.4) rotate(-15deg); }
  60% { opacity:1; transform:scale(1.18) rotate(4deg); }
  100%{ opacity:1; transform:scale(1) rotate(0deg); }
}
.pf-newbest-badge{
  display:inline-block;
  background:linear-gradient(135deg,#ffd53e 0%,#ff9500 100%);
  color:#10274c;
  font-size:8px;font-weight:900;letter-spacing:.1em;
  padding:3px 8px; border-radius:9999px;
  margin-left:6px; vertical-align:middle;
  box-shadow:0 2px 8px rgba(255,149,0,.4);
  animation:pf-newbest-pop .55s 1.1s both;
}

/* ---- speed lines (boost) ---- */
.pf-spd-line{
  position:absolute;
  z-index:7;
  height:2px;
  border-radius:2px;
  background:linear-gradient(to left, rgba(255,213,62,.85), transparent);
  pointer-events:none;
  animation:pf-spd .35s linear forwards;
}
@keyframes pf-spd{
  from{ opacity:.9; transform:scaleX(1); }
  to  { opacity:0;  transform:scaleX(.2) translateX(-30px); }
}

/* ---- HUD ---- */
.pf-hud{
  position:absolute;
  top:12px;
  left:12px;
  right:12px;
  z-index:10;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  pointer-events:none;
}
.pf-hud-dist{
  background:rgba(16,39,76,.6);
  border-radius:12px;
  padding:6px 11px;
  color:#fff;
  font-family:Arial,sans-serif;
  line-height:1;
}
.pf-hud-dist small{
  display:block;
  font-size:7px;
  font-weight:900;
  letter-spacing:.12em;
  opacity:.7;
}
.pf-hud-dist strong{
  font-size:20px;
  font-weight:900;
}
.pf-hud-dist span{
  font-size:9px;
  font-weight:900;
}
.pf-hud-loc{
  background:rgba(16,39,76,.6);
  border-radius:20px;
  padding:6px 12px;
  font-size:9px;
  font-weight:900;
  letter-spacing:.12em;
  color:#fff;
  font-family:Arial,sans-serif;
}
.pf-hud-stars{
  background:rgba(16,39,76,.6);
  border-radius:12px;
  padding:6px 10px;
  font-size:13px;
  font-weight:900;
  color:#ffd53e;
  font-family:Arial,sans-serif;
}

/* ---- BOOST UI ---- */
.pf-boost-ui{
  position:absolute;
  bottom:12px;
  right:12px;
  z-index:10;
  display:flex;
  align-items:center;
  gap:8px;
}
.pf-bg-wrap{
  width:55px;
  height:6px;
  background:rgba(255,255,255,.18);
  border-radius:3px;
  overflow:hidden;
}
.pf-bg-fill{
  height:100%;
  width:0%;
  background:#ffd53e;
  border-radius:3px;
  transition:width .12s linear;
}
.pf-boost-btn{
  padding:8px 15px;
  border-radius:20px;
  border:none;
  font-family:Arial,sans-serif;
  font-size:10px;
  font-weight:900;
  letter-spacing:.06em;
  cursor:pointer;
  transition:all .2s;
  background:rgba(255,255,255,.15);
  color:rgba(255,255,255,.4);
  white-space:nowrap;
  pointer-events:auto;
}
.pf-boost-btn.ready{
  background:#ffd53e;
  color:#10274c;
  animation:pf-boost-pulse .8s ease-in-out infinite;
}
@keyframes pf-boost-pulse{
  0%,100%{ transform:scale(1);    box-shadow:0 0 0 0   rgba(255,213,62,.55); }
  50%    { transform:scale(1.07); box-shadow:0 0 0 6px rgba(255,213,62,0); }
}

/* ---- city arrival toast ---- */
.pf-arrive{
  position:absolute;
  left:50%;
  top:22%;
  transform:translateX(-50%);
  z-index:10;
  text-align:center;
  pointer-events:none;
  animation:pf-arrive-in 2s ease-out forwards;
}
.pf-arrive.pf-gone{ display:none; }
@keyframes pf-arrive-in{
  0%  { opacity:0; transform:translateX(-50%) translateY(12px); }
  18% { opacity:1; transform:translateX(-50%) translateY(0); }
  70% { opacity:1; }
  100%{ opacity:0; transform:translateX(-50%) translateY(-10px); }
}
.pf-arrive-label{
  display:block;
  font-size:8px;
  font-weight:900;
  letter-spacing:.2em;
  color:rgba(255,255,255,.75);
  font-family:Arial,sans-serif;
  background:rgba(16,39,76,.55);
  padding:3px 10px;
  border-radius:10px;
}
.pf-arrive-name{
  display:block;
  font-size:26px;
  font-weight:900;
  color:#ffd53e;
  font-family:Arial,sans-serif;
  letter-spacing:-.02em;
  text-shadow:0 2px 8px rgba(0,0,0,.3);
}

/* ---- start / result screens ---- */
.pf-screen{
  position:absolute;
  inset:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:auto;
  text-align:center;
  overflow:hidden;
}
/* 結果画面は縦スクロール許可（内容が380pxに収まらない場合の保険） */
#pf-result-screen{
  align-items:flex-start;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
}
#pf-result-screen .pf-scr-inner{
  min-height:100%;
  justify-content:center;
  margin:0 auto;
}
.pf-screen.pf-gone{ display:none; }

/* ── star-field background (result only) ── */
#pf-result-screen{
  background:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.75) 0%,transparent 100%),
    radial-gradient(1px 1px at 38%  8%, rgba(255,213,62,.8)   0%,transparent 100%),
    radial-gradient(1px 1px at 58% 28%, rgba(255,255,255,.55) 0%,transparent 100%),
    radial-gradient(1px 1px at 82% 14%, rgba(255,255,255,.70) 0%,transparent 100%),
    radial-gradient(1px 1px at 22% 58%, rgba(255,255,255,.45) 0%,transparent 100%),
    radial-gradient(1px 1px at 72% 68%, rgba(255,213,62,.55)  0%,transparent 100%),
    radial-gradient(1px 1px at 48% 80%, rgba(255,255,255,.50) 0%,transparent 100%),
    radial-gradient(1px 1px at  8% 88%, rgba(255,255,255,.60) 0%,transparent 100%),
    radial-gradient(1px 1px at 90% 50%, rgba(255,255,255,.50) 0%,transparent 100%),
    radial-gradient(1px 1px at 65% 92%, rgba(255,213,62,.4)   0%,transparent 100%),
    radial-gradient(1px 1px at 30% 95%, rgba(255,255,255,.4)  0%,transparent 100%),
    radial-gradient(ellipse 60% 40% at 50% 0%,  rgba(255,213,62,.07) 0%,transparent 70%),
    radial-gradient(ellipse 80% 60% at 20% 100%,rgba(80,120,220,.06) 0%,transparent 70%),
    linear-gradient(160deg,#050d1c 0%,#0b1b38 50%,#0f2248 100%);
}

/* ── start screen: jacket image ── */
#pf-start-screen{
  background:url('/images/game_top_c.jpg') center center / cover no-repeat;
  align-items:flex-end;
  justify-content:center;
}

/* ベストスコア: 右上に絶対配置 */
#pf-start-screen .pf-scr-best-badge{
  position:absolute;
  top:12px; right:12px;
  margin:0;
  background:rgba(5,13,28,.55);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,213,62,.35);
}

/* コンテンツエリア: グラデ背景なし、テキストシャドウで個別に対応 */
#pf-start-screen .pf-scr-inner{
  padding:0 18px 20px;
  width:100%;
  max-width:100%;
  background:none;
}

#pf-start-screen .pf-scr-eyebrow{
  color:#ffd53e;
  text-shadow:0 1px 6px rgba(0,0,0,.9),0 0 14px rgba(0,0,0,.8);
}
#pf-start-screen .pf-scr-title{
  text-shadow:0 2px 10px rgba(0,0,0,.9),0 0 30px rgba(0,0,0,.7);
}
#pf-start-screen .pf-scr-tagline{
  color:rgba(255,255,255,.85);
  text-shadow:0 1px 6px rgba(0,0,0,.9);
  margin-bottom:16px;
}

.pf-diff-row{
  display:flex;
  gap:7px;
  margin-top:10px;
  margin-bottom:0;
  width:100%;
}

/* コントロールパネル（フロストガラス） は廃止 */

.pf-scr-inner{
  padding:14px 18px 16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  max-width:340px;
  position:relative;
  z-index:2;
}

/* ── start screen ── */
.pf-scr-eyebrow{
  font-size:9px;
  font-weight:900;
  letter-spacing:.32em;
  color:rgba(255,213,62,.7);
  font-family:Arial,sans-serif;
  margin-bottom:6px;
  text-transform:uppercase;
}
.pf-scr-title{
  font-size:42px;
  font-weight:900;
  color:#fff;
  font-family:Arial,sans-serif;
  letter-spacing:-.03em;
  line-height:1.0;
  margin-bottom:2px;
  text-shadow:0 0 40px rgba(255,213,62,.35), 0 3px 0 rgba(0,0,0,.5);
}
.pf-scr-title em{
  color:#ffd53e;
  font-style:normal;
}
.pf-scr-tagline{
  font-size:11px;
  color:rgba(255,255,255,.6);
  font-family:Arial,sans-serif;
  margin-bottom:18px;
  letter-spacing:.04em;
}
.pf-scr-best-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,213,62,.3);
  border-radius:9999px;
  padding:5px 14px;
  margin-bottom:0;
  font-family:Arial,sans-serif;
  font-size:11px;
  font-weight:900;
  color:rgba(255,255,255,.75);
}.pf-scr-best-badge strong{
  color:#ffd53e;
  font-size:14px;
}

/* ── buttons ── */
.pf-btn-fly{
  padding:15px 46px;
  border-radius:9999px;
  background:linear-gradient(135deg,#ffd53e 0%,#ffb800 100%);
  color:#10274c;
  font-family:Arial,sans-serif;
  font-size:16px;
  font-weight:900;
  letter-spacing:.08em;
  border:none;
  cursor:pointer;
  box-shadow:0 6px 28px rgba(255,213,62,.45), 0 2px 8px rgba(0,0,0,.35);
  transition:transform .15s, box-shadow .15s;
  animation:pf-btn-pulse 2.2s ease-in-out infinite;
}
@keyframes pf-btn-pulse{
  0%,100%{ box-shadow:0 6px 28px rgba(255,213,62,.45),0 2px 8px rgba(0,0,0,.35); }
  50%    { box-shadow:0 8px 40px rgba(255,213,62,.75),0 2px 8px rgba(0,0,0,.35); }
}
.pf-btn-fly:hover{ transform:translateY(-3px); box-shadow:0 10px 40px rgba(255,213,62,.6),0 3px 10px rgba(0,0,0,.35); }

.pf-btn-retry{
  padding:10px 32px;
  border-radius:9999px;
  background:rgba(255,255,255,.12);
  border:1.5px solid rgba(255,255,255,.35);
  color:#fff;
  font-family:Arial,sans-serif;
  font-size:13px;
  font-weight:900;
  letter-spacing:.05em;
  cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.2);
  transition:transform .15s, background .15s;
  margin-top:2px;
}
.pf-btn-retry:hover{ transform:translateY(-2px); background:rgba(255,255,255,.2); }

/* ── difficulty selector ── */
.pf-diff-row{
  display:flex;
  gap:7px;
  margin-bottom:0;
  width:100%;
}
.pf-diff-btn{
  flex:1;
  padding:9px 0;
  border-radius:10px;
  background:rgba(5,13,28,.58);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border:1.5px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.7);
  font-family:Arial,sans-serif;
  font-size:11px;
  font-weight:900;
  cursor:pointer;
  transition:all .15s;
  line-height:1.3;
}
.pf-diff-btn small{
  display:block;
  font-size:8px;
  font-weight:400;
  opacity:.7;
  margin-top:2px;
}
.pf-diff-btn.pf-diff-active{
  background:rgba(255,213,62,.16);
  border-color:#ffd53e;
  color:#ffd53e;
}

/* ── result screen ── */
.pf-res-sep{
  width:36px;height:2px;
  background:rgba(255,255,255,.2);
  border-radius:2px;
  margin:5px auto;
}
.pf-res-label{
  font-size:8px;
  font-weight:900;
  letter-spacing:.32em;
  color:rgba(255,213,62,.75);
  font-family:Arial,sans-serif;
  margin-bottom:4px;
  text-transform:uppercase;
}
.pf-res-km{
  font-size:52px;
  font-weight:900;
  color:#fff;
  font-family:Arial,sans-serif;
  letter-spacing:-.04em;
  line-height:1;
  margin-bottom:0px;
  text-shadow:0 0 40px rgba(255,213,62,.5);
}
.pf-res-km-unit{
  font-size:14px;
  font-weight:700;
  color:rgba(255,255,255,.6);
  font-family:Arial,sans-serif;
  margin-bottom:6px;
}
.pf-res-reached{
  font-size:10px;
  font-weight:700;
  color:rgba(255,255,255,.45);
  font-family:Arial,sans-serif;
  margin-bottom:1px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.pf-res-city{
  font-size:22px;
  font-weight:900;
  color:#ffd53e;
  font-family:Arial,sans-serif;
  letter-spacing:.02em;
  margin-bottom:5px;
  text-shadow:0 0 20px rgba(255,213,62,.4);
}
.pf-res-stars{
  font-size:18px;
  color:#ffd53e;
  letter-spacing:4px;
  margin-bottom:2px;
  filter:drop-shadow(0 0 6px rgba(255,213,62,.6));
}
.pf-res-best{
  font-size:10px;
  color:rgba(255,255,255,.45);
  font-family:Arial,sans-serif;
  font-weight:700;
  margin-bottom:5px;
  letter-spacing:.06em;
}

/* ── result: unlocked genre ── */
.pf-res-unlock{
  margin:2px 0 6px;
  width:100%;
  max-width:290px;
  background:rgba(255,255,255,.96);
  border-radius:14px;
  padding:10px 14px 12px;
  text-align:center;
  box-shadow:0 4px 24px rgba(0,0,0,.25);
}
.pf-res-unlock-eyebrow{
  font-size:8px;
  font-weight:900;
  letter-spacing:.2em;
  color:rgba(16,39,76,.4);
  font-family:Arial,sans-serif;
  margin-bottom:4px;
  text-transform:uppercase;
}
.pf-res-unlock-name{
  font-size:15px;
  font-weight:900;
  color:#10274c;
  font-family:'Noto Sans JP','Hiragino Sans',sans-serif;
  line-height:1.4;
  margin-bottom:8px;
}
.pf-res-unlock-link{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 0;
  border-radius:12px;
  background:linear-gradient(135deg,#ffd53e 0%,#ffb300 100%);
  color:#10274c;
  font-family:Arial,sans-serif;
  font-size:13px;
  font-weight:900;
  text-decoration:none;
  letter-spacing:.04em;
  transition:transform .15s, box-shadow .15s;
  box-shadow:0 4px 20px rgba(255,179,0,.55), 0 1px 0 rgba(255,255,255,.3) inset;
  animation:pf-cta-pulse 2.2s 1.6s ease-in-out infinite;
  position:relative;
  overflow:hidden;
}
/* 光沢シーン */
.pf-res-unlock-link::before{
  content:'';
  position:absolute;top:0;left:-60%;
  width:40%;height:100%;
  background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.4) 50%,transparent 100%);
  animation:pf-cta-shine 2.8s 1.8s ease-in-out infinite;
}
.pf-res-unlock-link::after{
  content:'?';
  font-size:9px;
  transition:transform .15s;
}
.pf-res-unlock-link:hover,
.pf-res-unlock-link:active{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 7px 28px rgba(255,179,0,.65), 0 1px 0 rgba(255,255,255,.3) inset;
}
.pf-res-unlock-link:hover::after,
.pf-res-unlock-link:active::after{ transform:translateX(3px); }
@keyframes pf-cta-pulse{
  0%,100%{ box-shadow:0 4px 20px rgba(255,179,0,.55); }
  50%    { box-shadow:0 4px 32px rgba(255,179,0,.85), 0 0 0 4px rgba(255,213,62,.18); }
}
@keyframes pf-cta-shine{
  0%   { left:-60%; opacity:0; }
  10%  { opacity:1; }
  40%  { left:120%; opacity:0; }
  100% { left:120%; opacity:0; }
}


/* game explanation */

.game-how{
  margin:0 18px;
  padding:22px 16px 28px;
  background:linear-gradient(160deg,#07122a 0%,#060e20 100%);
  border-radius:0 0 22px 22px;
  position:relative;
  overflow:hidden;
}
/* ドットテクスチャ */
.game-how::before{
  content:'';
  position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:16px 16px;
  pointer-events:none;
}

.game-how-label{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:8px;
  font-weight:900;
  letter-spacing:.24em;
  color:#ffd53e;
  text-transform:uppercase;
  position:relative;
}
.game-how-label::before{
  content:'';
  display:inline-block;
  width:18px;height:1.5px;
  background:#ffd53e;
  opacity:.6;
  border-radius:2px;
}

.game-how h3{
  margin:9px 0 0;
  font-size:20px;
  line-height:1.38;
  color:#fff;
  font-weight:900;
  position:relative;
  letter-spacing:-.01em;
}

.game-steps{
  display:flex;
  gap:8px;
  margin-top:18px;
  position:relative;
}

.game-step{
  flex:1;
  padding:14px 8px 16px;
  border-radius:14px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  text-align:center;
  position:relative;
  overflow:hidden;
}
/* ゴースト番号 */
.game-step::before{
  content:attr(data-n);
  position:absolute;
  right:-3px;top:-10px;
  font-size:58px;
  font-weight:900;
  font-family:Arial,sans-serif;
  color:rgba(255,255,255,.045);
  line-height:1;
  pointer-events:none;
  letter-spacing:-.02em;
}
/* 上部アクセントバー */
.game-step::after{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:2.5px;
  border-radius:14px 14px 0 0;
}
.game-step:nth-child(1)::after{ background:linear-gradient(90deg,#ffd53e,#ffb300); }
.game-step:nth-child(2)::after{ background:linear-gradient(90deg,#4cde8c,#22bb6a); }
.game-step:nth-child(3)::after{ background:linear-gradient(90deg,#ff8c42,#ff5500); }

/* アイコン */
.game-step b{
  display:grid;
  place-items:center;
  width:34px;height:34px;
  margin:0 auto 8px;
  border-radius:50%;
  font-size:15px;
  font-style:normal;
  font-weight:normal;
}
.game-step:nth-child(1) b{ background:rgba(255,213,62,.14); box-shadow:0 0 0 1px rgba(255,213,62,.25); }
.game-step:nth-child(2) b{ background:rgba(76,222,140,.12); box-shadow:0 0 0 1px rgba(76,222,140,.22); }
.game-step:nth-child(3) b{ background:rgba(255,140,66,.14);  box-shadow:0 0 0 1px rgba(255,140,66,.25); }

.game-step strong{
  display:block;
  font-size:9px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:1;
}
.game-step:nth-child(1) strong{ color:#ffd53e; }
.game-step:nth-child(2) strong{ color:#4cde8c; }
.game-step:nth-child(3) strong{ color:#ff8c42; }

.game-step span{
  display:block;
  margin-top:6px;
  font-size:10px;
  line-height:1.55;
  color:rgba(255,255,255,.52);
}


/* route */

.route{
  padding:25px 22px 0;
}

.route-line{
  height:5px;
  border-radius:10px;
  background:#d8d8d1;
  position:relative;
}

.route-line:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:57%;
  border-radius:10px;
  background:#168ce3;
}

.route-cities{
  display:flex;
  justify-content:space-between;
  margin-top:8px;
}

.route-cities span{
  width:20%;
  text-align:center;
  font-size:6px;
  font-weight:900;
}


/* =====================================================
   DAILY USE
===================================================== */

.daily{
  padding:0 0 52px;
  background:#fff9ef;
  overflow:hidden;
}

.daily-head{
  padding:26px 22px 0;
}
.daily-kicker{ margin-bottom:10px; }

.daily-head h2,
.daily-hero-text h2{
  margin:0;
  font-size:30px;
  line-height:1.18;
  letter-spacing:-.04em;
  color:#10274c;
}

/* 挿絵: テキストより大きく、余白込みで全幅 */
.daily-image{
  display:block;
  width:calc(100% - 44px);
  height:210px;
  object-fit:cover;
  border-radius:14px;
  margin:18px 22px 0;
}

.daily-lead{
  margin:14px 22px 0;
  font-size:12px;
  line-height:1.82;
  color:rgba(16,39,76,.58);
}

/* ── ツリータイムライン ── */
.timeline{
  margin:28px 22px 0;
  position:relative;
}
.timeline::before{ display:none; }

.time-item{
  display:grid;
  grid-template-columns:36px 1fr;
  gap:0 14px;
  position:relative;
}

/* トラック列: ノード + ステム */
.time-track{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-top:3px;
}

.time-node{
  width:14px; height:14px;
  border-radius:50%;
  flex-shrink:0;
  border:3px solid #fff9ef;
  box-sizing:border-box;
  position:relative;
  z-index:2;
}
.time-item:nth-child(1) .time-node{ background:#e8a800; box-shadow:0 0 0 2px #e8a800; }
.time-item:nth-child(2) .time-node{ background:#2da85e; box-shadow:0 0 0 2px #2da85e; }
.time-item:nth-child(3) .time-node{ background:#7c4dcc; box-shadow:0 0 0 2px #7c4dcc; }

.time-stem{
  width:2px;
  flex:1;
  margin-top:4px;
  min-height:60px;
  border-radius:2px;
}
.time-item:nth-child(1) .time-stem{
  background:linear-gradient(to bottom, #e8a800, #2da85e);
}
.time-item:nth-child(2) .time-stem{
  background:linear-gradient(to bottom, #2da85e, #7c4dcc);
}

/* コンテンツ列 */
.time-body{
  padding-bottom:26px;
}

.time{
  font-size:28px;
  font-weight:900;
  line-height:1;
  letter-spacing:-.04em;
  margin-bottom:8px;
  display:block;
  position:static;
}
.time::after{ display:none; }
.time-item:nth-child(1) .time{ color:#c48200; }
.time-item:nth-child(2) .time{ color:#1a8a48; }
.time-item:nth-child(3) .time{ color:#6030a8; }

.time-card{
  background:none;border-radius:0;
  padding:0;box-shadow:none;
}

.time-card small{
  font-size:8px;font-weight:900;
  letter-spacing:.18em;
  display:block;margin-bottom:5px;
}
.time-item:nth-child(1) .time-card small{ color:#9a6e00; }
.time-item:nth-child(2) .time-card small{ color:#1a7a40; }
.time-item:nth-child(3) .time-card small{ color:#5b21b6; }

.time-card h3{
  font-size:19px;font-weight:900;
  letter-spacing:-.03em;line-height:1.15;
  margin:0 0 6px;color:#10274c;
}
.time-card p{
  font-size:11px;line-height:1.78;
  color:rgba(16,39,76,.52);margin:0;
}

/* ── 締め ── */
.daily-message{
  margin:0 0 -52px;
  padding:28px 22px 36px;
  background:#10274c;
  text-align:center;
  font-size:12px;line-height:2;
  font-weight:700;
  color:rgba(255,255,255,.48);
  border-radius:0;
}
.daily-message strong{
  display:block;
  color:#ffd53e;
  font-size:19px;font-weight:900;
  letter-spacing:-.02em;line-height:1.35;
  margin-top:5px;background:none;
}


/* =====================================================
   JOURNEY INTRO
===================================================== */

.journey-intro{
  padding:60px 22px 36px;
  background:#10274c;
  color:#fff;
}

.journey-intro .kicker{
  color:rgba(255,255,255,.5);
}

.journey-intro h2{
  margin:12px 0 0;
  font-size:42px;
  line-height:1;
  letter-spacing:-.06em;
}

.journey-intro h2 span{
  color:#ffd53e;
}

.journey-intro p{
  margin-top:18px;
  font-size:13px;
  line-height:1.9;
  color:rgba(255,255,255,.7);
}

/* ステップ進行バー */
.journey-steps{
  display:flex;
  align-items:center;
  gap:0;
  margin-top:28px;
}

.journey-step{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  position:relative;
}

.journey-step + .journey-step::before{
  content:'';
  position:absolute;
  left:-50%;
  top:11px;
  width:100%;
  height:1px;
  background:rgba(255,255,255,.2);
}

.journey-step-dot{
  width:22px;
  height:22px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:8px;
  font-weight:900;
  font-family:Arial,sans-serif;
  position:relative;
  z-index:1;
}

.journey-step:nth-child(1) .journey-step-dot{ background:#ffd53e; color:#10274c; }
.journey-step:nth-child(2) .journey-step-dot{ background:#1aa850; color:#fff; }
.journey-step:nth-child(3) .journey-step-dot{ background:#1278d0; color:#fff; }
.journey-step:nth-child(4) .journey-step-dot{ background:#5c3fb0; color:#fff; }

.journey-step-name{
  font-size:7px;
  font-weight:900;
  letter-spacing:.04em;
  color:rgba(255,255,255,.4);
  text-align:center;
}


/* =====================================================
   JOURNEY LEVELS ? COMMON
===================================================== */

/* コンテナ：レベルが隙間なく積み重なる */
.journey-levels{
  display:flex;
  flex-direction:column;
}

.lv{
  display:flex;
  flex-direction:column;
}

/* ---- 画像エリア ---- */

.lv-img{
  position:relative;
  height:220px;
  overflow:hidden;
  flex-shrink:0;
}

.lv-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* 右上に大きな白い番号 */
.lv-num{
  position:absolute;
  top:12px;
  right:16px;
  font-size:88px;
  font-weight:900;
  font-family:Arial,sans-serif;
  line-height:1;
  color:rgba(255,255,255,.55);
  text-shadow:0 2px 12px rgba(0,0,0,.35);
  pointer-events:none;
}

/* ---- テキストエリア：レベルカラー全塗り ---- */

.lv-info{
  padding:22px 22px 28px;
  position:relative;
  overflow:hidden;
}

.lv--beginner .lv-info    { background:#ffd53e; }
.lv--intermediate .lv-info{ background:#1aa850; }
.lv--advanced .lv-info    { background:#1278d0; }
.lv--expert .lv-info      { background:#5c3fb0; }

/* ゴースト大文字 */
.lv-info::after{
  content:attr(data-num);
  position:absolute;
  right:-4px;
  bottom:-20px;
  font-size:130px;
  font-weight:900;
  letter-spacing:-.06em;
  line-height:1;
  font-family:Arial,sans-serif;
  pointer-events:none;
}

.lv--beginner .lv-info::after    { color:rgba(16,39,76,.07); }
.lv--intermediate .lv-info::after,
.lv--advanced .lv-info::after,
.lv--expert .lv-info::after      { color:rgba(255,255,255,.09); }

/* ラベル */
.lv-label{
  display:block;
  font-size:9px;
  font-weight:900;
  letter-spacing:.22em;
  margin-bottom:7px;
}

.lv--beginner .lv-label    { color:rgba(16,39,76,.55); }
.lv--intermediate .lv-label,
.lv--advanced .lv-label,
.lv--expert .lv-label      { color:rgba(255,255,255,.65); }

/* コピー見出し */
.lv-name{
  margin:0 0 8px;
  font-size:22px;
  font-weight:900;
  letter-spacing:-.03em;
  line-height:1.2;
}

.lv--beginner .lv-name    { color:#10274c; }
.lv--intermediate .lv-name,
.lv--advanced .lv-name,
.lv--expert .lv-name      { color:#fff; }

/* 説明文 */
.lv-copy{
  margin:0 0 16px;
  font-size:12px;
  font-weight:600;
  line-height:1.7;
}

.lv--beginner .lv-copy    { color:rgba(16,39,76,.7); }
.lv--intermediate .lv-copy,
.lv--advanced .lv-copy,
.lv--expert .lv-copy      { color:rgba(255,255,255,.8); }

/* ジャンルタグ */
.lv-tags{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:0;
}

.lv-tag{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:12px;
  font-weight:800;
  letter-spacing:.05em;
  padding:12px 16px;
  border-radius:10px;
  line-height:1;
  text-decoration:none;
  color:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.18);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s;
}
.lv-tag::after{
  content:'\2192';
  font-size:14px;
  font-weight:900;
  transition:transform .18s ease;
}
.lv-tag:hover{
  transform:translateX(5px) scale(1.03);
  filter:brightness(1.08);
  box-shadow:0 6px 18px rgba(0,0,0,.22);
}
.lv-tag:hover::after{ transform:translateX(4px); }

/* 3色: 黄・コーラル・青 ─ 全レベル共通 */
.lv-tag:nth-child(1){ background:linear-gradient(135deg,#f5b527,#e8960a); }
.lv-tag:nth-child(2){ background:linear-gradient(135deg,#ff5e6c,#e83a50); }
.lv-tag:nth-child(3){ background:linear-gradient(135deg,#3b9fe8,#1a7cce); }

/* レベル間の「道標」コネクター */
.lv-road{
  background:#10274c;
  height:68px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0;
  overflow:hidden;
}

.lv-road svg{
  display:block;
  opacity:0;
  animation:lv-chevron-cute 1.6s ease-in-out infinite;
}

.lv-road svg:nth-child(1){ animation-delay:0s; }
.lv-road svg:nth-child(2){ animation-delay:.25s; }
.lv-road svg:nth-child(3){ animation-delay:.5s; }

@keyframes lv-chevron-cute{
  0%        { opacity:0;   transform:translateY(-6px); }
  25%, 55%  { opacity:.85; transform:translateY(0); }
  85%, 100% { opacity:0;   transform:translateY(6px); }
}


/* =====================================================
   ALL GENRES
===================================================== */

.genres{
  padding:56px 0 0;
  background:#0d1e40;
}

/* ── ヘッダー ── */
.genres-head{
  padding:0 22px 40px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.genres-kicker{
  color:#ffd53e;
}
.genres-kicker::before{ background:#ffd53e; }

.genres-head h2{
  margin:10px 0 0;
  font-size:52px;
  line-height:.88;
  letter-spacing:-.065em;
  color:#fff;
}
.genres-head p{
  margin-top:16px;
  font-size:12px;
  line-height:1.85;
  color:rgba(255,255,255,.5);
}

/* ── グループ ── */
.genre-group{
  border-bottom:1px solid rgba(255,255,255,.07);
}

.genre-group-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:18px 22px 10px;
  position:relative;
}

.genre-group-head span{
  font-size:9px;
  font-weight:900;
  letter-spacing:.12em;
  color:rgba(255,255,255,.3);
  background:none;
  width:auto;height:auto;
  border-radius:0;
}

.genre-group-head strong{
  font-size:11px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.genre-group--words   .genre-group-head strong{ color:#ffd53e; }
.genre-group--conv    .genre-group-head strong{ color:#4cde8c; }
.genre-group--culture .genre-group-head strong{ color:#60a8ff; }
.genre-group--practice .genre-group-head strong{ color:#ff8c42; }

/* ── アイテムリスト ── */
.genre-list{
  border-top:1px solid rgba(255,255,255,.06);
}

.genre-item{
  display:grid;
  grid-template-columns:40px 1fr 28px;
  align-items:center;
  min-height:52px;
  padding:0 22px;
  border-bottom:1px solid rgba(255,255,255,.05);
  text-decoration:none;
  transition:background .12s;
}
.genre-item:last-child{ border-bottom:none; }
.genre-item:hover,
.genre-item:active{ background:rgba(255,255,255,.05); }

.genre-item b{
  font-size:9px;
  font-weight:900;
  letter-spacing:.06em;
  color:rgba(255,213,62,.4);
}
.genre-item strong{
  font-size:13px;
  font-weight:700;
  color:#fff;
  letter-spacing:-.01em;
}
.genre-item i{
  font-style:normal;
  font-size:13px;
  color:rgba(255,213,62,.45);
  text-align:right;
}


/* =====================================================
   FINAL
===================================================== */

.final{
  background-color:#0d1e40;
  background-image:radial-gradient(rgba(255,213,62,.08) 1px, transparent 1px);
  background-size:22px 22px;
  padding:44px 18px 90px;
}

/* レターカード */
.final-letter{
  background-color:#fff9ef;
  background-image:repeating-linear-gradient(
    -45deg,
    transparent 0, transparent 14px,
    rgba(16,39,76,.022) 14px, rgba(16,39,76,.022) 15px
  );
  border:1.5px solid #10274c;
  position:relative;
  box-shadow:6px 6px 0 rgba(201,162,39,.28), 12px 12px 0 rgba(201,162,39,.1);
}

/* 内枠 */
.final-letter::after{
  content:"";
  position:absolute;
  inset:8px;
  border:1px solid rgba(16,39,76,.18);
  pointer-events:none;
  z-index:5;
}

/* コーナー金具 */
.final-corner{
  position:absolute;
  width:14px;
  height:14px;
  border-color:#b88c2a;
  z-index:6;
}
.final-corner--tl{top:5px;left:5px;border-top:2px solid;border-left:2px solid;}
.final-corner--tr{top:5px;right:5px;border-top:2px solid;border-right:2px solid;}
.final-corner--bl{bottom:5px;left:5px;border-bottom:2px solid;border-left:2px solid;}
.final-corner--br{bottom:5px;right:5px;border-bottom:2px solid;border-right:2px solid;}

/* 挿絵 */
.final-img{
  width:100%;
  height:200px;
  object-fit:cover;
  object-position:center top;
  display:block;
  border-bottom:1.5px solid #10274c;
}

/* レター本文エリア */
.final-letter-body{
  padding:26px 22px 32px;
}

/* レターヘッド */
.final-letterhead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-bottom:14px;
  border-bottom:1px solid rgba(16,39,76,.18);
  margin-bottom:22px;
}
.final-letterhead-name{
  font-size:11px;
  font-weight:900;
  letter-spacing:.16em;
  color:#10274c;
}
.final-letterhead-tagline{
  font-size:9px;
  font-weight:700;
  letter-spacing:.1em;
  color:rgba(16,39,76,.38);
}

/* TO */
.final-to{
  font-size:9px;
  font-weight:900;
  letter-spacing:.16em;
  color:rgba(16,39,76,.4);
  margin:0 0 6px;
}
.final-to-name{
  display:block;
  font-size:14px;
  font-weight:700;
  letter-spacing:-.01em;
  color:#10274c;
  margin-top:4px;
}

/* H2 */
.final h2{
  margin:18px 0 0;
  font-size:44px;
  line-height:1.15;
  letter-spacing:-.05em;
  color:#10274c;
}
.final h2 span{
  color:#b88c2a;
}

/* 装飾区切り */
.final-divider{
  display:flex;
  align-items:center;
  gap:8px;
  margin:22px 0;
  color:rgba(16,39,76,.28);
  font-size:10px;
}
.final-divider::before,
.final-divider::after{
  content:"";
  flex:1;
  height:1px;
  background:rgba(16,39,76,.2);
}

/* コピー */
.final-copy{
  margin:0;
  font-size:13px;
  line-height:2.05;
  color:rgba(16,39,76,.65);
}

/* お試し無料ノート */
.final-trial-note{
  margin:18px 0 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 18px;
  border-radius:8px;
  background:linear-gradient(90deg,#fff8de,#fff0c4);
  border:1.5px solid rgba(255,184,0,.45);
  font-size:13px;
  font-weight:800;
  color:#7a4200;
  letter-spacing:.02em;
  text-align:center;
}
.final-trial-note::before{
  content:"\2713";
  display:grid;
  place-items:center;
  width:20px;height:20px;
  border-radius:50%;
  background:linear-gradient(135deg,#ffd84d,#ff9b2f);
  color:#fff;
  font-size:11px;
  font-weight:900;
  flex-shrink:0;
}

/* シール */
.final-seal{
  width:68px;
  height:68px;
  border-radius:50%;
  border:2px solid #b88c2a;
  background:radial-gradient(circle, #fffae8, #fff9ef);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  margin:26px 0;
  position:relative;
}
.final-seal::before{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:50%;
  border:1px solid rgba(184,140,42,.4);
}
.final-seal-text{
  font-size:7px;
  font-weight:900;
  letter-spacing:.1em;
  text-align:center;
  line-height:1.5;
  color:#b88c2a;
  position:relative;
  z-index:1;
}

/* ボタンラッパー */
.final-btn-wrap{
  margin-top:32px;
  padding-top:7px;
  padding-right:7px;
  padding-bottom:7px;
}
.final-btn-wrap .hero-btn{
  width:100%;
}


/* =====================================================
   STICKY
===================================================== */

/* ---- スティッキーCTA ---- */
.sticky{
  position:fixed;
  z-index:200;
  left:50%;
  bottom:18px;
  transform:translateX(-50%) translateY(110px);
  width:calc(100% - 32px);
  max-width:400px;
  opacity:0;
  transition:transform .45s cubic-bezier(.22,1,.36,1), opacity .45s ease;
  pointer-events:none;
}
.sticky.is-visible{
  transform:translateX(-50%) translateY(0);
  opacity:1;
  pointer-events:auto;
}
.sticky .hero-btn{
  width:calc(100% - 8px);
  animation:hero-btn-float 2.6s ease-in-out infinite;
}
.sticky .hero-btn > div{
  animation:hero-btn-pulse 2.2s ease-in-out infinite;
}


/* =====================================================
   FOOTER
===================================================== */
.footer{
  background:#f0ece4;
  color:#3a3530;
  padding:40px 20px 28px;
}
.footer-inner{
  max-width:520px;
  margin:0 auto;
}

/* ロゴ＋キャッチ */
.footer-brand{
  display:flex;
  align-items:center;
  gap:14px;
  padding-bottom:20px;
  border-bottom:1px solid rgba(0,0,0,.1);
  margin-bottom:24px;
}
.footer-brand img{
  height:22px;
  width:auto;
}
.footer-brand p{
  font-size:10px;
  line-height:1.5;
  color:rgba(58,53,48,.5);
  letter-spacing:.03em;
  margin:0;
}

/* ナビリンク */
.footer_list{
  list-style:none;
  margin:0 0 24px;
  padding:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
}
.footer_list li{
  border-bottom:1px solid rgba(0,0,0,.07);
}
.footer_list li:nth-child(odd){
  border-right:1px solid rgba(0,0,0,.07);
}
.footer_list li a{
  display:block;
  padding:11px 12px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.04em;
  color:rgba(58,53,48,.75);
  text-decoration:none;
  transition:color .2s, background .2s;
}
.footer_list li a:hover{
  color:#d85a00;
  background:rgba(255,112,0,.06);
}

/* コピーライト */
#footer{
  font-size:10px;
  text-align:center;
  color:rgba(58,53,48,.35);
  letter-spacing:.06em;
  padding-top:16px;
  border-top:1px solid rgba(0,0,0,.07);
}

/* =====================================================
   DESKTOP
===================================================== */

@media(min-width:431px){

  body{
    padding:25px 0;
  }

  .site{
    box-shadow:
      0 15px 60px rgba(20,35,50,.15);
  }

}