/* -------------------- Reset -------------------- */
*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
button{cursor:pointer;}
:root{
  --max-w: 1180px;
  --ink: #1c1c1c;
  --muted:#6b6b6b;
  --bg:#e8e7e3;
  --card:#fff;
  --shadow:0 10px 24px rgba(0,0,0,.08);
  --radius:14px;

  --green: #388e3c;
  --red:#e53935;
  --console:#5a5268;
  --console-dark:#3e3748;
}

/* Loader */
.loader{position:fixed;inset:0;background:#0d1116;display:grid;place-items:center;z-index:2000;color:#d8e8ff;}
.loader-inner{display:grid;gap:12px;min-width:280px;width:min(420px,80%);text-align:center;}
.loader-title{font-family: ui-monospace, monospace;letter-spacing:.08em;font-weight:900;}
.loader-bar{height:14px;background:#1a2330;border:1px solid #324255;border-radius:10px;overflow:visible;box-shadow:inset 0 2px 6px rgba(0,0,0,.5);}
.loader-bar span{display:block;height:100%;background:linear-gradient(90deg,#49b3ff,#7fd1ff);box-shadow:0 0 18px rgba(79,196,255,.6) inset;width:0%;transition:width .25s ease;}
.loader-tip{font-size:12px;color:#9bb0c8;}
.loader-scanline{position:absolute;left:0;right:0;top:-100%;height:100%;background:linear-gradient(180deg,transparent,rgba(255,255,255,.06),transparent);animation:scan 2.2s linear infinite;}
@keyframes scan{from{top:-100%;}to{top:100%;}}
.loader.done{animation:fade .5s ease forwards;}
@keyframes fade{to{opacity:0;visibility:hidden;}}

/* Fixed Top Bar */
.topbar {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 70px;
  background: #fff;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 0 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.airport-logo { position: absolute; left: 50%; transform: translateX(-50%); }
.airport-logo img { height: 55px; transition: opacity .3s; }
.airport-logo:hover img { opacity: .6; }

.hamburger{
  display:inline-grid;gap:4px;width:40px;height:40px;padding:8px;border:none;background:#ffffff;border-radius:8px;
}
.hamburger span{display:block;height:3px;background:#333;border-radius:2px;}

.top-cta{margin-left:auto;display:flex;gap:0;align-items:stretch;height:100%;}
.badge{
  position:relative;display:flex;align-items:center;gap:10px;justify-content:center;
  padding:0 16px; min-width: 260px; height:100%;
  font-weight:900;color:#fff;border-radius:0; box-shadow:none;
  transition: opacity 0.2s;
}
.badge + .badge{border-left:none;}
.badge-green{background:#8eb533;}
.badge-red{background:#951a50;}

.badge:active .circle-btn {
  transform: translateY(2px);
}
.circle-btn:active,
.badge:active .circle-btn { transform: translateY(2px); }

/* 丸ボタン（>アイコン入り） */
.circle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  margin-left: 6px;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.circle-btn:active {
  transform: translateY(2px);
}

.badge.pressed .circle-btn,
.circle-btn.pressed{
  transform: translateY(2px);
}

.circle-btn svg{width:14px;height:14px;fill:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s;}
.circle-btn.green svg path{stroke: #8eb533;}
.circle-btn.red   svg path{stroke: #951a50;}
.badge:hover{opacity:.8;}  
.badge:hover .circle-btn svg{transform:rotate(90deg);} 

/* HERO */
body{background:var(--bg);color:var(--ink);font-family:"Hiragino Sans","Noto Sans JP","Yu Gothic",system-ui,-apple-system,sans-serif;line-height:1.7;}
.hero{padding-top:120px;padding-bottom:4px;}
@media (max-width: 767px){
  .hero{
    padding-top: 160px !important; 
  }
}
.wrap{max-width:900px;margin:0 auto;padding:0 20px;}

.hero-grid{display:grid;grid-template-columns:1fr;gap:20px;align-items:start;}
@media (min-width:1100px){.hero-grid{grid-template-columns:minmax(560px,540px) 1fr;gap:8px;}}


.console-frame {
  background: var(--console);
  border: 8px solid var(--console-dark);
  border-radius: 32px;
  padding: 12px 20px;
  position: relative;
  box-shadow: inset 0 18px 32px rgba(0,0,0,.25), 0 6px 24px rgba(0,0,0,.12);
  max-width: 500px; 
  width: 90%;      
  min-height: 580px;
  margin: 0 auto;  
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}



.screen{
  background:linear-gradient(#6cbacd,#eef7ff);
  border:5px solid #676b78; border-radius:18px;
  padding:35px 18px 18px; text-align:center;
  position:relative; overflow:visible;
  height:540px;
}
.screen.is-quiz{background:linear-gradient(#eaf3ff,#f7fbff);}

.screen-viewport{
  position:relative; z-index:1;
  height:100%; overflow:auto;
  display:flex; flex-direction:column; align-items:center; 
  scrollbar-width:thin;
}
.screen-headline{font-weight:800;color:#1e1e1e;margin:6px 0 4px;font-size:17px;}
.logo{position:relative; z-index:1; width:min(360px,92%); margin:6px auto 8px;}
.subcopy{position:relative; z-index:1; margin:0 0 10px; color:#1e1e1e; font-size:14px;top: 5px;}

/* スマホ版（幅767px以下）の場合 */
@media (max-width: 767px) {
  .console-frame {
    min-height: 525px;  
  }
  .screen {
    height: 480px;      
    padding: 24px 12px; 
  }
  .screen-viewport {
    padding: 20px 8px;  
  }
}


/* タイトル画面の中身を縦中央に */
#titleView{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;       /* ← 縦中央 */
  min-height: calc(100% - 20px); /* .screen-viewport の padding(20*2)を差し引く */
  text-align: center;
  gap: 8px;
}


/* 雲：1枚PNGの横タイル & 右向きループ */
.cloud-loop{
  position:absolute; inset:0; pointer-events:none; opacity:.96;
  background-image:url('img/cloud_loop.png');
  background-repeat: repeat-x;
  background-position: 0 8%;
  background-size: 820px auto; 
  animation: cloudLoop 12s linear infinite;
}
@keyframes cloudLoop{
  from { background-position: 0 8%; }
  to   { background-position: 820px 8%; }  /* ← 900px → 820px に修正 */
}

/* ピクセル風ボタン */
/* --- RPG風 ピクセルボタン --- */
.dot-btn{
  --bg: #d83a4a;           /* ベース色（青） */
  --bg2:#8f1120;           /* 影色 */
  --edge:#5b0b15;          /* エッジ影 */
  --shine:rgba(255,255,255,.25);

  font-family:"Press Start 2P", ui-monospace, monospace;
  font-size:14px; line-height:1;
  letter-spacing:.08em; font-weight:900;

  position:relative; display:inline-block;
  padding:16px 28px;
  color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.25);
  background:linear-gradient(var(--bg), var(--bg2));
  border:none; border-radius:10px;

  /* “ドット打ち”っぽい多段シャドウで縁を作る */
  box-shadow:
    0 0 0 2px #0a1840 inset,            /* 内側濃紺ライン */
    0 6px 0 var(--edge),                /* 押し出し影（台座） */
    0 14px 24px rgba(0,0,0,.28);        /* 落ち影 */

  /* ピクセル角のトリム（8角形っぽく） */
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px),
                     calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);

  /* なめらか押下 */
  transition: transform .05s ease, box-shadow .05s ease, filter .2s ease;
}

/* 上面の“ハイライト帯” */
.dot-btn::before{
  content:"";
  position:absolute; left:6px; right:6px; top:6px; height:28%;
  border-radius:6px;
  background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
  mix-blend-mode:screen; pointer-events:none;
}

/* 走査線（うっすら） */
.dot-btn::after{
  content:"";
  position:absolute; inset:0; border-radius:10px;
  background:repeating-linear-gradient(
    180deg,
    transparent 0 2px,
    rgba(0,0,0,.06) 2px 4px
  );
  opacity:.25; pointer-events:none;
}

/* 右上に“きらり” */
.dot-btn .sparkle{
  position:absolute; top:6px; right:10px; width:10px; height:10px;
  background: radial-gradient(circle, #fff 0 40%, rgba(255,255,255,0) 41%);
  filter:blur(.2px); opacity:.9; pointer-events:none;
  animation: sparkle 1.8s linear infinite;
}
@keyframes sparkle{
  0%,100%{ transform:scale(.6) rotate(0deg); opacity:.7; }
  60%    { transform:scale(1.1) rotate(90deg); opacity:1; }
}

/* ホバー/アクティブの“カチッ”挙動 */
.dot-btn:hover{
  filter:saturate(1.1);
  transform: translateY(1px);
  box-shadow:
    0 0 0 2px #0a1840 inset,
    0 5px 0 var(--edge),
    0 12px 20px rgba(0,0,0,.24);
}
.dot-btn:active{
  transform: translateY(3px);
  box-shadow:
    0 0 0 2px #0a1840 inset,
    0 3px 0 var(--edge),
    0 8px 14px rgba(0,0,0,.22);
}

/* サイズ可変（任意） */
.dot-btn.lg{ font-size:16px; padding:18px 32px; }
.dot-btn.sm{ font-size:12px; padding:12px 18px; }



/* クイズUI */
.quiz-step .q{font-weight:800;margin-bottom:10px;font-size:16px; color:#13344f;}
.choices{display:grid;gap:10px;margin-bottom:10px;width:100%;}
.choice{padding:10px;border-radius:10px;border:1px solid #cfe0ff;background:#f7fbff;}
.progress{font-size:12px;color:#6b6b6b;}
.result-card{display:grid;gap:12px;place-items:center;position: absolute;top: 30px;}
.result-title{
  text-align:center;
  font-size:20px;
  font-weight:700;
  margin-top:8px;
}
.result-desc{
  text-align:center;
  margin:6px 0 10px;
  color:#444;
  line-height:1.6;
}
.result-recommend{
  text-align:center;
  margin:6px 0 14px;
  font-size:18px;
}

.result-img{
  display:block;
  height:min(17vh, 320px); 
  width:auto;             
  max-width:100%;          
  object-fit:contain;      
}

.result-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom: 10px;}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:10px 16px;border:1px solid #ddd;background:#fff;box-shadow:var(--shadow);}
.btn.primary{background:#7a0b21;color:#ffffff;font-weight:800;}
.btn.ghost{background:#fff;border-color:#cfd8e3;color:#2a3d5a;font-weight:700;}
.btn .icon{width:18px;height:18px;object-fit:contain;}

/* コントローラー */
.controller-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-top:12px;gap:10px;max-width: 540px;margin: auto;margin-top: 10px;}
.controller-side{display:flex;align-items:center;}
.controller-side.left{justify-content:flex-start;padding:0 0 0 40px;}
.controller-side.right{justify-content:flex-end;padding:0px 40px 25px;}
.controller-center{display:flex;flex-direction:column;align-items:center;gap:6px;opacity:.9;}
.controller-center .dot{width:22px;height:22px;background:#3e3e40;border-radius:50%;display:block;}
.controller-center .pill{width:90px;height:16px;background:#594d69;border-radius:18px;display:block;}
.controller-center .dot.small{width:18px;height:18px;}
.controller-center .pill.small{width:70px;height:12px;}

.ab{display:flex;gap:14px;align-items:center;}
.ab .btn-a,.ab .btn-b{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:900;}
.ab .btn-a{background:#951a50;box-shadow:inset 0 4px 10px rgba(255,255,255,.15), 0 6px 0 #710d39;}
.ab .btn-b{background:#1e1e1e;box-shadow:inset 0 4px 10px rgba(255,255,255,.1), 0 6px 0 #0f0f0f;}

/* STORY / Reasons */
.section{padding:72px 0;background:#2e928e;}
.section.gray{background:#f5f5f6;}
.section h2{font-size:28px;letter-spacing:.2em;text-align:center;margin:0 0 10px;}
.section .lead{color:#6b6b6b;text-align:center;margin-bottom:18px;}

.between-text{background:transparent;padding:56px 0 24px;position:relative;}
.story-block{position:relative;text-align:center;}
.story-block .cloud{position:absolute;top:-12px;width:180px;height:auto;image-rendering:pixelated;opacity:.9;pointer-events:none;}
.story-block .cloud-left{left:-12%;}
.story-block .cloud-right{right:-12%;}
.between-title{font-size:22px;letter-spacing:.18em;margin:0 0 10px;}
.story-desc{margin:0 auto 12px;max-width:680px;line-height:1.9;color:#333;}
.pixel-cta{
  display:inline-block;background:#31a2ff;color:#fff;padding:10px 22px;border-radius:8px;
  box-shadow:0 6px 0 #0c4f8f, 0 12px 24px rgba(0,0,0,.2);font-weight:900;letter-spacing:.06em;
  clip-path: polygon(2px 0, calc(100% - 2px) 0, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 0 calc(100% - 2px), 0 2px);
}
.pixel-cta:hover{transform:translateY(1px); box-shadow:0 5px 0 #0c4f8f, 0 10px 20px rgba(0,0,0,.2);}

.reasons-title{font-size:18px;letter-spacing:.12em;text-align:center;margin:28px 0 45px;color:#222;}
.reasons{
  display:grid;grid-template-columns:repeat(3, 1fr);
  gap:18px;justify-items:center;align-items:start;max-width:500px;margin:0 auto;
}
.reason{
  background:#fff;border-radius:50%;width:120px;height:120px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;font-size:14px;box-shadow:0 2px 4px rgba(0,0,0,.1);
}
.reason span{font-size:18px;font-weight:800;display:block;margin-bottom:4px;}
/* 2段目：中央寄せ配置（左右1/3列に配置） */
.reason.r4{grid-column:1;}
.reason.r5{grid-column:3;}
@media (min-width:840px){.reason{width:140px;height:140px;font-size:15px;} .reason span{font-size:20px;}}

/* ===== Runway Section ===== */
.runway-section{background:transparent;}
.runway-wrap{position:relative; overflow:visible; height:200px; background:transparent;}
.runway-bg{
  position:absolute; bottom:0; left:0; right:0; height:140px;
  background:url('img/pixel_takamatsu_runway_wide.png') ;
  background-size:auto 100%; z-index:1; image-rendering:pixelated;
}
.plane-area{position:relative;width:100%;height:300px;overflow:hidden;}
/* ===== Runway / Plane ===== */
.plane-wrap{
  position: absolute;
  bottom: 110px;
  right: -240px;   
  width: 200px;
  height: 120px;
  z-index: 2;
  animation: planeTaxiTakeoffRTL 20s linear infinite; 
  will-change: transform;
}

.plane{
  position: absolute;
  bottom: -100px;
  left: 0;
  width: 140px;
  image-rendering: pixelated;
  transform: scaleX(-1);       /* 進行方向に向ける */
  transform-origin: 50% 60%;
}

/* 右→左版（滑走→機首上げ→上昇→左へ抜ける） */
@keyframes planeTaxiTakeoffRTL {
  0%   { transform: translateX(200px)  translateY(0)      scale(1);    opacity:0; }
  5%   { transform: translateX(0)      translateY(0)      scale(1);    opacity:1; }
  50%  { transform: translateX(-1300px) translateY(0)     scale(1);    opacity:1; }
  60%  { transform: translateX(-1500px) translateY(-60px) scale(1.05); opacity:1; }
  95%  { transform: translateX(-2400px) translateY(-160px)scale(1.12); opacity:1; }
  99%  { transform: translateX(-2600px) translateY(-180px)scale(1.15); opacity:0; }
  100% { transform: translateX(200px)   translateY(0)      scale(1);    opacity:0; }
}




/* === SP専用：滑走路背景（.runway-bg）差し替え === */
@media (max-width: 767px){
  .runway-bg{
    /* フォールバック（等倍） */
    background-image: url('img/pixel_takamatsu_runway_sp.png');
    /* 高解像度端末用 */
    background-image: image-set(
      url('img/pixel_takamatsu_runway_sp.png') 1x,
      url('img/pixel_takamatsu_runway_sp.png') 2x
    );
    background-image: -webkit-image-set(
      url('img/pixel_takamatsu_runway_sp.png') 1x,
      url('img/pixel_takamatsu_runway_sp.png') 2x
    );

    background-size: auto 100%;
    height: 120px;
  }
}

/* さらに小さい端末向け微調整（任意） */
@media (max-width: 360px){
  .runway-bg{ height: 100px; }
}


/* 飛行アニメ（一定速／右端で消えて透明戻り） */
@keyframes planeTaxiTakeoff {
  0%   { transform:translateX(-200px) translateY(0) scale(1); opacity:0; }
  5%   { transform:translateX(0) translateY(0) scale(1); opacity:1; }
  50%  { transform:translateX(1300px) translateY(0) scale(1); opacity:1; }
  60%  { transform:translateX(1500px) translateY(-60px) scale(1.05); opacity:1; }
  95%  { transform:translateX(2400px) translateY(-160px) scale(1.12); opacity:1; }
  99%  { transform:translateX(2600px) translateY(-180px) scale(1.15); opacity:0; }
  100% { transform:translateX(-200px) translateY(0) scale(1); opacity:0; }
}

/* === Fixed Bottom Routes Bar (new) === */
.routes-bar{
  position: fixed;
  left: 0; bottom: 0; width: 100%;
  background: #fff;               /* ← 画面いっぱいの白ベタ */
  color: #111;
  border-top: 1px solid #ddd;
  z-index: 1000;
}
.routes-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;}
.routes-title{
  font-weight: 700;
  white-space: nowrap;
  margin-right: 8px;
  font-size: 15px;
}
.routes-more{color:#a9d3ff; font-size:12px; text-decoration:none;}
.routes-more:hover{opacity:.8}
.routes-scroller{
  display: flex;
  gap: 16px;
  overflow-x: auto;
}
.routes-scroller::-webkit-scrollbar{display:none;}

.route-chip{
  display: flex;
  flex-direction: column;       /* ロゴの下に文字 */
  align-items: center;
  text-decoration: none;
  color: #111;
  background: transparent;      /* ← 個別の白ベタはやめる */
  border: 0;                    /* ← 角丸もナシ */
  padding: 6px 4px;             /* 余白は控えめに */
}
.route-chip .flag{
  display: block;
  width: 88px;                  /* ← ロゴを大きく（必要なら100〜120pxへ） */
  height: auto !important;      /* ← 高さ固定があれば打ち消す */
  object-fit: contain !important;/* ← 念のため “切り抜かない” 指定を強制 */
  margin-bottom: 6px;
  /* もしどこかで丸角が付いていたら打ち消す */
  border-radius: 0 !important;
}
/* ラベル文字 */
.route-chip span{
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  text-align: center;
}
.route-chip:hover{background:#233042; transform:translateY(-1px); box-shadow:0 4px 14px rgba(0,0,0,.25)}
.route-chip:active{transform:translateY(0)}
.routes-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:34px; height:34px; display:grid; place-items:center;
  background:#ffffff; color:#1f2937; border:none; border-radius:50%;
  box-shadow:0 8px 18px rgba(0,0,0,.2); cursor:pointer; opacity:.95;
}
.routes-nav svg{width:18px; height:18px}
.routes-nav.prev{left:14px}
.routes-nav.next{right:14px}
.routes-nav:hover{opacity:.8}
.routes-nav:active{transform:translateY(-50%) scale(.98)}

/* Footer 下に固定バーの分の余白 */
footer{padding:60px 0 110px;color:#9aa0a6;text-align:center;font-size:12px;margin-top:20px;}

/* === Right column: pixel HUD style === */
.right-col .panel {
  background:#0b0f14;  
  color:#fff;
  border: 6px solid #000;         /* 外黒 */
  outline: 2px solid #fff;        /* 内白 */
  outline-offset: -6px;           /* 黒の内側に白線を寄せる */
  border-radius:0;
  padding:14px 16px;
  margin-bottom:10px;
}



/* タイトル（Lv. / STORY 見出し） */
.right-col .panel h3,
.right-col .statcard .lv{
  font-family:"Press Start 2P", ui-monospace, monospace;
  font-weight:900;
  letter-spacing:.08em;
  color:#fff;
  margin:6px 0 10px;
  font-size:18px;
}

/* STORYの本文を読みやすく */
.right-col .storycard p{
  margin:0;
  line-height:1.9;
  color:#f1f1f1;
  font-size:14px;
}

/* ステータスバーのレイアウト（HP/MPラベル＋バー） */
.right-col .statcard .bar-wrap{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  row-gap:10px;
  column-gap:10px;
}
.right-col .statcard .label{
  font-family:"Press Start 2P", ui-monospace, monospace;
  font-weight:900;
  letter-spacing:.06em;
  color:#fff;
  font-size:14px;
}

/* バー本体（背景） */
.right-col .statcard .bar{
  height:12px;
  background:#2a303a;
  border:1px solid #3c414a;
  border-radius:3px;
  overflow:hidden;
}
.right-col .statcard .bar span{
  display:block; height:100%;
  background:#61d54a;          /* 既定：HP色 */
}
/* HP/MP 色分け */
.right-col .statcard .bar.hp span{ background:#61d54a; }  /* 明るい緑 */
.right-col .statcard .bar.mp span{ background:#e05249; }  /* 明るい赤 */

/* SNSパネルは背景なしのまま */
.sns-panel.no-bg{ background:transparent; box-shadow:none; border:none; margin-top: 20px;}

/* --- stop horizontal scrollbar when plane flies off-screen --- */
html, body { overflow-x: hidden; }  /* 念のため全体でも抑止 */

.runway-section,
.runway-wrap {
  position: relative;
  overflow: hidden;                 /* ← これが効きます */
}

/* さらに強力に（対応ブラウザならスクロール自体を生成させない） */
@supports (overflow: clip) {
  .runway-section,
  .runway-wrap { overflow: clip; }
}

/* パフォーマンスと描画の安定化 */
.plane-wrap, .plane { will-change: transform; transform: translate3d(0,0,0); }

/* 就航路線バー */
.routes-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #951a50;
  color: #fff;
  z-index: 1000;
  font-size: 14px;
}

/* 内側を横並びに */
.routes-inner {
  display: flex;
  align-items: center;
  padding: 4px 6px;
  overflow-x: auto;
}

/* 見出し（タイトル） */
.routes-title {
  font-weight: bold;
      margin: 0 56px;
  white-space: nowrap;
  font-size: 16px; /* 少し大きめに */
}

/* 路線リスト横スクロール */
.routes-scroller {
  display: flex;
  gap: 4px;
  flex: 1;
  overflow-x: auto;
}

/* 路線チップ */
.route-chip {
display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #111;
    padding: 12px 16px;
    width: 283px;
    border-radius: 0;
    border: 1px solid #ddd;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.4;
    box-sizing: border-box;
}

/* ロゴ */
.route-chip .flag {
  width: 130px;                /* ロゴを大きめに */
  height: auto;
  margin-bottom: 8px;         /* ロゴと文字の間にスペース */
  object-fit: contain;
}

/* ホバー時効果 */
.route-chip:hover {
  background: #f3f3f3;
}

/* === HP/MPゲージ：アニメ伸長 === */
.right-col .statcard .bar span {
  width: 0%;                 /* 初期値 */
  transition: width 600ms ease;  /* 伸びるアニメ */
}

/* 行書体の見出し */
.calligraphy {
  font-family: 'Yuji Syuku', 'Hiragino Mincho ProN', serif;
  font-size: 2.2rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 40px;
  letter-spacing: 1px;
}

/* 奥義リスト */
.okugi-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.okugi-item {
  display: flex;
  align-items: center; 
  gap: 20px;
  margin-bottom: 30px;
}

.okugi-num {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #000;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
}

.okugi-body h3 {
  position: relative;
  display: inline-block; 
  font-family: 'Yuji Syuku', 'Hiragino Mincho ProN', serif;
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 10px;
  z-index: 1; 
}

@media (max-width: 767px) {
  .okugi-body h3 {
    font-size: 20px;  
    line-height: 1.4; 
  }
}

.okugi-body h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 7px; 
  width: 100%;
  height: 12px; 
  background: #ffd828; 
  z-index: -1; 
}

.okugi-body p {
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
  margin:auto;
}

/* 奥義セクション専用の横幅制御 */
.okugi-section .wrap {
  max-width: 750px;  /* 数値は自由に調整 */
  margin: 0 auto;
}

.sns-inline {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}

.sns-icon img {
  width: 30px;   /* サイズ調整 */
  height: 30px;
  display: block;
  transition: opacity .15s ease, transform .06s ease;
}

.sns-icon:hover img {
  opacity: 0.85;
  transform: translateY(-1px);
}
.sns-icon:active img {
  transform: translateY(0);
}
/* === リザルト専用シェアボタン === */
.result-share {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  font-size: 13px !important;
  padding: 6px 20px !important;
  border-radius: 0px;
  background: #ffffff !important;
  color: #333 !important;
  border: 1px solid #cfd8e3 !important;
  cursor: pointer;
  margin: 0 5px;
  line-height: 1.2;
}

.result-share img {
  width: 14px;
  height: 14px;
}
.result-share:hover {
  background: #e6f2ff !important;  /* 薄いグレー背景 */
  border-color: #c2d2e7 !important; /* 少し濃い枠色 */
  color: #000 !important;           /* テキストを黒寄りに */
}
.result-card .btn.primary {
  display: inline-block;
  font-size: 14px;
  padding: 8px 18px;
  background: #ffd828;
  color: #1e1e1e;
  cursor: pointer;
  transition: all 0.2s ease, transform 0.1s ease; 
  border-radius: 990px;
  text-decoration: none;
}

.result-card .btn.primary:hover {
    background: #ffd828;
  color: #1e1e1e;
  transform: translateY(2px);
}

/* === リザルト画面：もう一度診断する === */
.result-card .btn.ghost {
  display: inline-block;
  font-size: 14px;
  padding: 8px 18px;
  background: #1e1e1e;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease, transform 0.1s ease;
  border-radius: 990px;
  text-decoration: none;
  margin-left: 8px; /* キャンペーン詳細との間に余白 */
}

.result-card .btn.ghost:hover {
  background: #1e1e1e;
  color: #ffffff;
  transform: translateY(2px); /* ホバーで沈む */
}

/* 奥義セクションに重ねる準備 */
.okugi-section .wrap{ position: relative; }

/* PCのみ：写真をセクション内に“かぶせる” */
@media (min-width:1024px){
  .okugi-photos{
    position: absolute;
    top: 90px;         
    left: 0; right: 0;
    pointer-events: none; 
    transition-delay: var(--delay, 0s);
  }

  /* 各写真カード（左右からフワッと） */
  .okugi-photo{
    position: absolute;
    width: 360px;          
    max-width: 28vw;
    padding: 8px;          
    background: #eef3f7;
    border-radius: 4px;
    box-shadow: 0 12px 28px rgba(0,0,0,.18);
    opacity: 0;
    transform: translateX(var(--from,0)) rotate(var(--rot,0deg));
    transition: transform .7s ease, opacity .7s ease;
    transition-delay: var(--delay, 0s);
    z-index: 0;              /* テキストより奥 */
  }
  .okugi-photo img{ display:block; width:100%; height:auto; border-radius:2px; }

  /* 初期位置（左右/角度）と横位置 */
  .okugi-photo.left  { left: -480px; --from:-40px; --rot:-6deg; }
  .okugi-photo.right { right:-480px; --from: 40px; --rot: 6deg; }

  /* 縦位置は各要素の --top で調整（個別 inline style で指定） */
  .okugi-photo{ top: var(--top, 0); }

  /* 画面内に入ったら表示 */
  .okugi-photo.in{ opacity:1; transform: translateX(0) rotate(var(--rot)); }

  /* 重ねた分だけ下に余白を確保（次セクションと被らないように） */
  .okugi-section{ padding-bottom: 10px; } /* 最下段の写真位置+高さに合わせて調整 */
}

/* スマホは非表示 */
@media (max-width:1023px){
  .okugi-photos{ display:none; }
}

.story-block .subtitle {
  font-family: "Press Start 2P", ui-monospace, monospace;
  font-size: 16px;          
  color: #1e1e1e;
  margin-bottom: -3px;
  text-align: center;       
  display: block;
  letter-spacing: 2px;
}
/* キャンペーン全体 */
.campaign-section {
  padding: 80px 0;    
  background-image: url("img/background.webp");
  background-repeat: repeat;        /* 並べて敷き詰め */
  background-position: top left;    /* 左上から配置 */
  background-size: auto;            /* 元サイズで繰り返す */
}

/* 白ベタのキャンペーン詳細ボックス */
.campaign-detail-box {
  background: #fff;
  padding: 50px;
  max-width: 750px;
  margin: auto 0;
  border-radius: 20px;
  margin: 40px auto;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

@media (max-width: 767px){
  .campaign-detail-box{ opacity:1; transform:none; padding: 30px;}
}

/* 表示時の状態 */
.campaign-detail-box.in {
  opacity: 1;
  transform: translateY(0);
}

.campaign-detail-box h3 {
  font-size: 32px;
  max-width: 750px;
  color: #a4c25d;
  text-align: center;
  margin-top: 2px;
}

.campaign-detail-box p.lead {
  text-align: center;
  margin-bottom: 20px;
  font-size: 16px;
}

.campaign-detail-box .card {
  margin: 20px 0;
}

.campaign-detail-box .prizes .prize {
  display: flex;
  align-items: center;
  margin: 8px 0;
}

.campaign-detail-box .prizes .txt {
  margin-left: 10px;
}
/* キャンペーン見出しのラベル */
.camp-label {
  font-size: 17px;
  color: #ffffff;
  background: #8eb533;
  border-radius: 30px;
  text-align: center;
padding: 8px 0px;
    max-width: 200px;
    margin: auto;
}

.camp-title {
  font-size: 26px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 16px;
}

/* --- キャンペーンごとのカラー --- */
#camp1 .camp-label { background: #8eb533; }   /* 深緑 */
#camp1 .camp-title { color: #8eb533; }

#camp2 .camp-label { background: #951a50; }   /* 深い赤 */
#camp2 .camp-title { color: #951a50; }


/* キャンペーン詳細ブロック */
.detail-block {
  padding: 16px 0;
  border-bottom: 1px solid #ddd; /* 薄い灰色の区切り線 */
}

.detail-block:last-child {
    border-bottom: none;
    max-width: 540px;
    margin: auto;
}

.detail-block h4 {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 6px;
  color: #333;
}

.detail-block p a {
color: #5112ff;  
}

.form-btn-wrap {
  text-align: center;
  margin-top: 40px;
}

.btn.form-btn {
  display: inline-block;
      padding: 20px 100px;
  background: #ffd828;
  color: #1e1e1e;
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn.form-btn:hover {
  background: #1e1e1e;
  color: #ffffff;
  transform: translateY(2px); /* ぽちっと下がるアニメーション */
}

.transfer-destinations {
  margin-top: 30px;
  text-align: center;
}

.transfer-destinations h4 {
  font-size: 18px;
  margin-bottom: 12px;
  color: #333;
  text-align: left;
}

.transfer-destinations img {
  max-width: 100%;
  height: auto;
  border: 1px solid #ddd;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* 「こちら」リンクの強調 */
.highlight-link {
  font-weight: bold;
  color: #7a0b21;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.highlight-link:hover {
  color: #b2183e;
}

.note-list {
  list-style: none; 
  counter-reset: num;
  color: #000000; 
}

.note-list li{
counter-increment: num; 
  position: relative;
  padding-left: 1.5em;
}

.note-list li::before {
  content: counter(num) ". ";
  margin-right: 0.4em;
  color: #d81f00;
  font-weight: bold;
}
/* リザルト見出し＆小見出し */
.result-headline{
  text-align:center;
  font-size:22px;
  font-weight:900;
  letter-spacing:.02em;
  margin: 6px 0 4px;
}
.result-subline{
  text-align:center;
  font-size:16px;
  line-height:1.6;
  margin: 4px 0 14px;
}

/* キャンペーン名の強調（太字・大きめ・色分け） */
.camp-strong{
  display:inline-block;
  font-weight:900;
  font-size:22px;
  padding: 0 2px;
}

/* 色分け（サイト全体のトーンに合わせた2色） */
.camp-strong.camp1{ color:#a4c25d; } 
.camp-strong.camp2{ color:#951a50; } 

@media (max-width: 767px){
  .result-subline {font-size: 14px;} 
  .result-card {gap: 2px;position: absolute;top: 0px;}
  .camp-strong.camp1{ font-size: 17px; } 
.camp-strong.camp2{ font-size: 17px; } 
}

/* ABボタン：押したら下にストン */
.ab .btn-a,
.ab .btn-b{
  transition: transform .08s ease, box-shadow .08s ease;
}

.ab .btn-a:active{
  transform: translateY(3px);
  /* 影を浅くして“押し込み感”を出す（元は 0 6px 0 ...） */
  box-shadow: inset 0 4px 10px rgba(255,255,255,.15), 0 3px 0 #710d39;
}

.ab .btn-b:active{
  transform: translateY(3px);
  box-shadow: inset 0 4px 10px rgba(255,255,255,.1), 0 3px 0 #0f0f0f;
}


/* 画面内エフェクトの土台 */
.screen{ position:relative; overflow:visible; }




/* コイン */
.coin {
  position: absolute;
  top: -40px;
  left: 50%;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffe680, #d4af37);
  border: 2px solid #b8860b;
  transform: translateX(-50%);
  animation: coin-fall 1.2s linear forwards;
  z-index: 20;
}


/* 画面下に溜まる */
.coin.stack {
  animation: none !important;
  bottom: 20px;
}

/* コイン・ハートの落下アニメ */
.fall-item {
  position: absolute;
  top: -50px;
  width: 32px;
  height: 32px;
  pointer-events: none;
  animation: fall-down 2s linear forwards;
  z-index: 30;
}

@keyframes fall-down {
  0%   { transform: translateY(-50px) rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateY(90vh) rotate(360deg); opacity: 0; }
}

/* 右カラムのカウンター */
.counter {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: bold;
}

.counter img {
  width: 20px;
  height: 20px;
}

/* Lv行専用レイアウト */
.right-col .statcard .lv-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

/* カウンター専用 */
.right-col .statcard .lv-counters {
  display: flex;
  align-items: center;
  gap: 10px;
}
.right-col .statcard .lv-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.right-col .statcard .lv-item img {
  width: 16px;
  height: 16px;
}
.right-col .statcard .lv-item b {
  font-size: 14px;
  font-weight: 800;
}

/* === Mobile header: 2段レイアウト === */
@media (max-width: 767px){
  .topbar{
    display: grid;
    grid-template-columns: 48px 1fr 48px; 
    grid-template-rows: 76px auto;    
    grid-template-areas:
      "ham logo ."
      "cta cta  cta";
    height: auto;       
    padding: 0;  
  }

  /* 1段目：白ベタ行（ヘッダ自体が白ベタなのでOK。影は既存のまま） */
  .hamburger{
    grid-area: ham;
    justify-self: start;
    align-self: center;
    width: 40px; height: 40px;
    padding: 8px;
    border-radius: 8px;
    background: #fff;   
  }

  .airport-logo{
    grid-area: logo;
    position: static;       
    transform: none;      
    justify-self: center;
    align-self: center;
  }
  .airport-logo img{
    height: 60px;         
  }

  /* 2段目：キャンペーンバナー行 */
  .top-cta{
    grid-area: cta;
    height: auto;     
    display: flex;
    overflow-x: auto;    
    -webkit-overflow-scrolling: touch;
  }
  .top-cta::-webkit-scrollbar { display: none; }

  /* バナー（badge）をモバイル向けに少しコンパクト化 */
  .badge{
    min-width: 200px;  
    height: 54px;       
    padding: 0 12px;
  }
  .badge .label{ font-size: 15px; line-height: 1.3; }
  .circle-btn{ width: 22px; height: 22px; }
}

/* === SPだけ2段レイアウト＆横スワイプ === */
@media (max-width: 767px){
  .routes-bar{
    padding: 7px 0 0;
  }

  /* 上段=タイトル、下段=チップ */
  .routes-inner{
    display: grid;
    grid-template-rows: auto auto;
    row-gap: 6px;
    align-items: center;
  }

  .routes-title {
    white-space: nowrap;
    font-size: 16px;     
    text-align: center;   
  }

    .routes-title br {
    display: none;   /* SPでは改行タグを無効化 */
  }

  /* 下段：就航先チップを横スワイプ */
  .routes-scroller{
    display: flex;
    gap: 8px;
    overflow-x: auto;                 /* ← スワイプで横スクロール */
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;    /* ← スナップで止まる */
    padding: 2px 0 4px;
    touch-action: pan-x;              /* ← 横スワイプ優先 */
  }
  .routes-scroller::-webkit-scrollbar{ display: none; }

  /* 3個見える幅に調整（gap=8pxならこれでOK） */
  .route-chip{
    flex: 0 0 calc((100% - 16px) / 3); /* (= (100% - gap*2) / 3) */
    scroll-snap-align: start;
    display: flex; align-items: center; justify-content: center;
    height: 70px;
    padding: 6px 11px;
    background: #fff;
    text-decoration: none;
    font-size: 12px;
    gap: 6px;
  }

  /* ロゴサイズは小さめで揃える */
  .route-chip .flag{
    width: auto;
    height: 20px;                      /* 18〜22pxで微調整 */
    object-fit: contain;
  }
  .route-chip span{
    white-space: nowrap;
    color: #222;
    font-weight: 700;
  }
}

.between-title.calligraphy .small {
  font-size: 0.6em; 
  font-weight: bold; 
  line-height: 1.4;  
  display: inline-block; 
}

.quest-heading {
  position: relative;
  display: inline-block;
  text-align: center;
  margin: 40px auto;
}

/* コイン装飾 */
.coin-decoration {
  position: absolute;
  width: 130px; 
  height: auto;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.9;
}

/* 左右に配置 */
.coin-decoration.left {
  left: 40px; 
}

.coin-decoration.right {
  right: 50px;
}

@media (max-width: 767px) {
  .coin-decoration {
    width: 80px;      
    top: 0%;         
    transform: translateY(-30%);
  }

  .coin-decoration.left {
    left: -10px;      
  }

  .coin-decoration.right {
    right: -10px;      
  }
}

@media (max-width: 767px) {
  .btn.form-btn {
    padding: 18px 40px;  
    font-size: 18px;    
  }
}

.check-section {
  text-align: center;
  margin: 40px auto 20px;
  padding: 20px;
}

.check-title {
  font-size: 20px;
  font-weight: 800;
  color: #333;
  margin-bottom: 16px;
}

.check-content .check-image {
  max-width: 40%;
  height: auto;
  margin: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: opacity 0.3s ease;
}

@media (max-width: 767px) {
  .check-content .check-image {
    max-width: 100%;
  }
}

.check-content a:hover .check-image {
  opacity: 0.7; 
}

.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 110px; 
  width: 44px;
  height: 44px;
  background: #7a0b21;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.2s ease;
  z-index: 999;
}

@media (max-width: 767px) {
  .back-to-top {
      position: fixed;
      bottom: 140px; 
  }
}

.back-to-top:hover {
  transform: translateY(-3px);
  background: #951a50;
}

/* 表示時 */
.back-to-top.show {
  opacity: 1;
  pointer-events: auto;
}


/* SR-only（任意：読み上げ用タイトルを隠す） */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ===== Drawer base ===== */
.drawer{
  position: fixed;
  inset: 0 auto 0 0;
  width: min(86vw, 360px);
  height: 100dvh;
  background: #951a50;
  box-shadow: 4px 0 24px rgba(0,0,0,.18);
  transform: translateX(-100%);            /* ← 左から出す */
  transition: transform .32s cubic-bezier(.2,.8,.2,1);
  z-index: 1200;
}
.drawer.is-open{ transform: translateX(0); }

.drawer__inner{
  display: flex; flex-direction: column;
  height: 100%;
  padding: 14px 16px 18px;
  overflow-y: auto;
}

.drawer__close{
  align-self: flex-end;
  font-size: 28px; line-height: 1;
  width: 40px; height: 40px;
  border: none; background: transparent; cursor: pointer;
  color: #fff;
}

/* スクリーン暗幕 */
.drawer__scrim{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.3);
  z-index: 1190;
  opacity: 0; transition: opacity .25s ease;
}
.drawer__scrim.is-open{ opacity: 1; }
body.no-scroll{ overflow: hidden; }

/* ===== メニュー本体 ===== */
.drawer__nav{
  display: grid; gap: 10px;
  margin: 6px 0 16px;
}
.drawer__link{
  position: relative;
  display: inline-block;
  font-weight: 800;
  letter-spacing: .02em;
  padding: 8px 2px;
  color: #ffffff; text-decoration: none;
}
/* 左→右に伸びる下線（hover/keyboard focus） */
.drawer__link::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width: 100%; height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;          /* ← 左起点で伸びる */
  transition: transform .22s ease;
}
.drawer__link:hover::after,
.drawer__link:focus-visible::after{
  transform: scaleX(1);
}

/* ===== 就航路線情報 ===== */
.drawer__routes{ margin-top: 4px; }
.drawer__routes-title{
  font-weight: 900;
  margin: 12px 0 10px;
  font-size: 14px;
  color: #fff;
}
.drawer__routes-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);  /* 2列 */
  gap: 10px;
}
.route-card{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; min-height: 84px;
  background:#fff; border:1px solid #e3e7ef;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
  text-decoration:none; color:#111; 
  padding: 20px;
}
.route-card:hover {
  background-color: #ddd;          
  transition: background-color 0.3s ease, color 0.3s ease;
}

.route-card .flag{
  height: 22px; width: auto; object-fit: contain;
}
.route-card span{
  font-size: 12px; font-weight: 800; white-space: nowrap;
}

/* PCではハンバーガー想定＝ドロワーを基本非表示でもOK。SP中心で使う */
@media (min-width: 1025px){
  /* 必要あればPCで無効化 */
  /* .drawer, .drawer__scrim{ display:none; } */
}

.check-section .more-campaign {
  display: block;
    background: #2679cd;
    color: #ffffff;
    text-align: center;
    font-size: 17px;
    font-weight: 700;
    max-width: 460px;
    padding: 14px 10px;
    margin: 50px auto 0;
    border-radius: 50px;
    text-decoration: none;
    transition: background 0.3s 
ease;
}

.check-section .more-campaign:hover {
  background: #13589c;
}

/* パスポート取得キャンペーン キャッチ */
.passport-catch {
  margin: 34px auto 10px;
  text-align: center;
  color: #111;
}

/* 1行目 */
.pc-line1 {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.pc-tag {
  display: inline-block;
  padding: 6px 12px;
  border: 2px solid #cfd3d8;
  background: #fff;
  font-weight: 700;
  font-size: 14px;
}
.pc-plus {
  font-weight: 900;
  font-size: 20px;
  color: #8f8f8f;
}

/* 2行目 */
.pc-line2 {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 16px;
}
.pc-text-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* QUOカードPayバッジ */
.pc-badge {
  display: inline-block;
  background: #d23a2c;
  color: #fff;
  padding: 6px 40px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 900;
}

/* 黄色ベタ付きテキスト */
.pc-text-block {
  position: relative;
  display: inline-block;
  font-size: 32px;
  font-weight: 900;
  line-height: 1.2;
  padding: 0 4px;
  margin-bottom: 7px;
}
.pc-text-block::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 2px;
  height: 14px;
  background: #ffe35a;
  z-index: -1;
}
.pc-num {
  font-size: 64px;
  font-weight: 900;
  color: #d81f00;
  letter-spacing: 1px;
}

/* ギフトカード */
.pc-gift {
  position: absolute;
  right: 90px;   
  bottom: 100px;  
  width: 90px;    
  height: auto;
}

/* 注記 */
.pc-note {
  font-size: 11px;
  color: #333;
  margin-top: 6px;
  text-align: right;
}

.br-sp {
  display: none;
}

/* SP調整 */
@media (max-width: 767px) {
  .pc-num { font-size: 64px; }
  .pc-text-block { font-size: 28px; margin-bottom: 15px;}
  .pc-text-block::after { bottom: -2px; height: 10px; }
  .pc-badge { font-size: 18px; padding: 5px 30px; }
  .pc-gift { max-width: 30%;position: absolute;right: -24px;top: 20px;}
  .br-sp {
    display: block;
  }
}

/* ===== 海外旅行応援キャンペーン：キャッチ ===== */
.travel-catch {
    margin: 36px auto 28px;
    text-align: center;
    color: #111;
    padding: 0 50px;
}

/* タグ */
.tc-tags{ margin-bottom:10px; }
.tc-tag{
  display:inline-block; padding:6px 12px; background:#fff;
  border:2px solid #cfd3d8; border-radius:4px; font-weight:700; font-size:14px;
}

/* 見出し（黄色ベタ） */
.tc-headline{
  position:relative; display:inline-block; font-weight:900; line-height:1.2;
  font-size:32px; margin:6px 0 18px;
}
.tc-headline::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:14px;
  background:#ffe35a; z-index:-1;          
}
.tc-strong{ color:#d81f00; font-size: 20px;}
.tc-very{ color:#d81f00; }                

@media (max-width:767px){
  .tc-strong{ font-size: 20px;}
  .travel-catch {margin: 36px auto 28px;padding: 0 10px;}
  .tc-headline{ font-size:22px; }
  .tc-headline::after{ bottom:-3px; height:10px; }
  .tc-tag{ font-size:14px; padding:5px 10px; }
  .tc-very{ font-size: 30px;}     
}

/* 賞ブロック */
.tc-prizes{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:start;
  max-width:960px; margin:18px auto;
}
@media (max-width:900px){
  .tc-prizes{ grid-template-columns:repeat(3,1fr); gap:16px; }
}
@media (max-width:767px){
  .tc-prizes{ grid-template-columns:1fr; gap:40px; }
}

.tc-prize{ display:flex; flex-direction:column; align-items:center; gap:10px; }


/* === Prize: Photo Card Mode (override) === */
.ph-wrap{
  position: relative;
  width: 160px;          
  aspect-ratio: 4 / 3;   
  overflow: hidden;          
  background: #f4f4f6;    
  margin: 0;           
}

/* 丸背景は撤去（残っていても表示されないよう無効化） */
.ph-circle{ display:none !important; }

/* 画像は切り抜かずにカバー表示 */
.ph-wrap > img,
.ph-photo{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;        /* トリミングして面いっぱいに */
  border-radius: 0;         /* 丸→四角 */
}

/* スマホでは写真を大きめに */
@media (max-width: 767px){
  .ph-wrap{ width: min(82vw, 360px); }   /* 横幅は画面に追従 */
}


/* A/B/C 見出し */
.tc-ab{ font-weight:900; font-size:28px; line-height:1; }
.tc-ab-letter{ font-size:34px; margin-right:2px; }
.tc-ab-letter.a{ color:#d81f00; }
.tc-ab-letter.b{ color:#d81f00; }
.tc-ab-letter.c{ color:#d81f00; }

.tc-desc{ font-weight:800; margin:0; font-size:16px; line-height:1.5; }
.tc-badge {
    display: inline-block;
    margin-top: 6px;
    padding: 6px 32px;
    background: #d81f00;
    color: #ffffff;
    font-weight: 900;
    font-size: 17px;
}

@media (max-width:767px){
  .ph-wrap {
        width: 240px;
        height: 240px;
    }
  .tc-ab{ font-size:35px; }
  .tc-ab-letter{ font-size:50px; }
  .tc-desc{ font-size:20px; }
  .tc-badge{ font-size:23px; }
}

/* Wチャンス */
.tc-wchance{ margin-top:35px; }
.tc-wlead {
    font-weight: 900;
    color: #3455cc;
    margin: 10px 0 0;
    font-size: 20px;
}
.tc-wlead .w{ font-size:1.8em; }

.tc-wbox{
  max-width:760px; margin:0 auto; padding: 25px 40px;
  border:3px solid #3b63d1; border-radius:18px; background:#fff;
}
.tc-wtext{ font-weight:800; margin:0 0 6px; }
.tc-wtext .pill{
  display:inline-block; background:#3b63d1; color:#fff; padding:2px 10px; border-radius:999px;
  font-weight:900;
}
.tc-wbig{
  position:relative; font-weight:900; font-size:26px; margin:0 0 4px;
}
.tc-wbig .yen1000{
  font-size:56px; color:#1b4ed8; position:relative; z-index:1; letter-spacing:1px;
}
.tc-wbig::after{
  content:""; position:absolute; left:0; right:0; bottom:6px; height:12px; background:#ffe35a; z-index:0;
}
.tc-wnote{ margin-bottom: -20px; color:#333; font-size:16px; }
.tc-coupon{ margin-bottom: 0px; color:#333; font-size:12px; }

@media (max-width:767px){
  .tc-wbox{ padding: 31px 14px 36px; border-radius:16px; }
  .tc-wlead {font-size: 15px;}
  .tc-wbig{ font-size: 21px;
        line-height: 28px;
        margin-top: 30px;}
  .tc-wbig .yen1000{ font-size:44px; }
  .tc-wbig::after{ bottom:-10px; height:10px; }
  .tc-wnote{ font-size:12px; }
  .tc-coupon{ margin: 30px 0 -14px; font-size:12px; }
}

@media (max-width:900px){
  .tc-wbig{ font-size: 21px;
}
}


/* --- Popup ON button icon to yellow --- */
.sound-gate__actions .btn.primary .ico{
  fill:#ffe14a; stroke:#ffe14a;
}


/* ====== Sound Gate & Toggle (with animation) ====== */
.vh{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.sound-gate[hidden]{ display:none !important; opacity:0; pointer-events:none; }
.sound-gate{ position: fixed; inset: 0; display: grid; place-items: center; z-index: 2500;
  opacity:0; transition: opacity .28s ease;
  backdrop-filter: blur(6px);
  background: radial-gradient(1200px 600px at 50% 30%, rgba(255,255,255,0.18), rgba(0,0,0,0.55)) , rgba(0,0,0,.45);
}
.sound-gate.show{ opacity:1; }

.sound-gate__card{
  width: min(520px, 92%);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.9));
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
  border-radius: 14px;
  padding: 26px 22px;
  text-align: center;
  transform: translateY(8px);
  opacity: 0;
  transition: transform .28s ease, opacity .28s ease;
}
.sound-gate.show .sound-gate__card{ transform: translateY(0); opacity:1; }
.sound-gate__card h3{ margin: 6px 0 6px; font-size: 20px; letter-spacing: .04em; }
.sound-gate__card p{ margin: 0 0 12px; color: #333; line-height: 1.7; }
.sound-gate__actions{ display: flex; gap: 10px; justify-content: center; }

.sound-gate__actions .btn{
  display:inline-flex; gap:12px; align-items:center; justify-content:center;
  min-width: 160px; padding: 12px 18px; border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #111; color:#fff; font-weight:800;
  transition: transform .08s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.sound-gate__actions .btn .ico{ width:22px; height:22px; }
.sound-gate__actions .btn.primary{ background: #111; color:#fff; border-color:#111; }
.sound-gate__actions .btn.ghost{ background: #fff; color:#111; border-color:#e5e7eb; }
.sound-gate__actions .btn:active{ transform: translateY(1px); }
.sound-gate__actions .btn .label{ letter-spacing:.04em; }

/* ONボタンのアイコンを黄色に */
.sound-gate__actions .btn.primary .ico{ fill:#ffe14a; stroke:#ffe14a; }

/* right-floating toggle */
.sound-toggle{
  position: fixed; right: 14px; top: 80px;
  z-index: 2400;
  min-width: 74px; height: 44px; padding: 0 12px;
  border-radius: 999px;
  border: 1px solid #1f2937; background: rgba(255,255,255,.92);
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
  display:flex; align-items:center; justify-content:center;
}
.sound-toggle .toggle-inner{ position:relative; display:inline-grid; grid-auto-flow:column; align-items:center; gap:8px; }
.sound-toggle .ico{ width:20px; height:20px; display:block; }
.sound-toggle .label-on, .sound-toggle .label-off{ font-weight:800; font-size:12px; letter-spacing:.06em; }
.sound-toggle[aria-pressed="true"]{ background:#111; color:#ffe14a; border-color:#111; }
.sound-toggle[aria-pressed="false"]{ background:rgba(255,255,255,.94); color:#111; border-color:#1f2937; }
.sound-toggle:active{ transform: translateY(1px); }
@media (max-width: 767px){ .sound-toggle{ top: 150px; bottom: 110px; } }

/* show ON icon when pressed=true, else show muted */
.sound-toggle[aria-pressed="true"] .ico.on{ display:block; fill:#ffe14a; stroke:#ffe14a; }
.sound-toggle[aria-pressed="true"] .ico.off{ display:none; }
.sound-toggle[aria-pressed="true"] .label-on{ display:inline-block; color:#ffe14a; }
.sound-toggle[aria-pressed="true"] .label-off{ display:none; }

.sound-toggle[aria-pressed="false"] .ico.on{ display:none; }
.sound-toggle[aria-pressed="false"] .ico.off{ display:block; fill:#111; stroke:#111; }
.sound-toggle[aria-pressed="false"] .label-on{ display:none; }
.sound-toggle[aria-pressed="false"] .label-off{ display:inline-block; color:#111; }

/* animated waves when ON */
.sound-toggle[aria-pressed="true"] .ico .wave{
  fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round;
  opacity:.85; animation: snd-wave 1.5s ease-in-out infinite;
}
.sound-gate__card .ico .wave{ stroke:#111; fill:none; stroke-width:2; }
@keyframes snd-wave{ 0%{opacity:.2;} 50%{opacity:1;} 100%{opacity:.2;} }

/* === Ribbon + Sparkles (scoped to #titleView) === */
#titleView .screen-headline{
  /* レイアウト */
  position: relative;
  display: grid;
  place-items: center; 
  width: min(280px, 94vw);
  aspect-ratio: 1417 / 768;
  margin: 0px auto -14px;
  padding: 0;    
  border: none;
  box-shadow: none;
  background: none;

  /* テキストの見た目 */
  color: #2a2314;  
  text-align: center;
  font-weight: 900;
  letter-spacing: .02em;
  font-size: clamp(16px, 2.6vw, 24px);
  line-height: 1.5;

  /* 読みやすさのための縁取り＆光 */
  text-shadow:
    0 2px 0 rgba(255,255,255,.55),  
    0 0 10px rgba(255,255,255,.25); 
}

/* 背景画像（擬似要素で敷く：比率を崩さない） */
#titleView .screen-headline::before{
  content:"";
  position: absolute; inset: 0;
  background:
    image-set(
      url("img/banner_scroll.png") 1x,
      url("img/banner_scroll@2x.png") 2x
    ) center / contain no-repeat;
  /* 画像のエッジを活かすため影は軽めに */
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.22));
  pointer-events: none;
}

/* 角の“キラッ”演出（控えめ）。不要なら丸ごと消してOK */
#titleView .screen-headline::after{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle, rgba(255,230,140,.95) 0 3px, transparent 4px) 10% 18%/auto no-repeat,
    radial-gradient(circle, rgba(255,230,140,.95) 0 2.4px, transparent 3.4px) 90% 22%/auto no-repeat,
    radial-gradient(circle, rgba(255,230,140,.95) 0 3px, transparent 4px) 12% 80%/auto no-repeat,
    radial-gradient(circle, rgba(255,230,140,.95) 0 2.4px, transparent 3.4px) 88% 78%/auto no-repeat;
  animation: scrollSpark 2s ease-in-out infinite;
}
@keyframes scrollSpark{
  0%,100%{ opacity:.9; transform: translateZ(0); }
  50%{    opacity:.65; }
}

/* スマホ調整 */
@media (max-width: 480px){
  #titleView .screen-headline{
    width: 95vw;
    font-size: clamp(15px, 4.2vw, 20px);
  }
}


/* === SP横はみ出しガード === */
@media (max-width: 640px){
  html, body { overflow-x: hidden; }

  /* 1) 全体の箱は幅100%以内に閉じ込める */
  #viewport,
  .screen-viewport,
  .screen-frame,
  .game-shell,
  .game-screen {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;  /* パディング/ボーダー込みで100%に収める */
  }

  /* 2) 画像/メディアは親幅を超えない */
  img, canvas, video, svg { 
    max-width: 100%;
    height: auto;
  }

  /* 3) HUD/LV/Storyの行は“縮む”ことを許可（min-width対策） */
  .hud, .lv, .status-row, .story, .story-inner, .story-box {
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;   /* ← これ大事：フレックス子要素のはみ出し防止 */
    box-sizing: border-box;
  }

  /* 4) フレックス行でgapや長いテキストが押し広げないように */
  .hud, .status-row, .lv {
    display: flex;
    flex-wrap: wrap;      /* 折り返しOK */
    min-width: 0;
  }
  .hud > *, .status-row > *, .lv > * {
    min-width: 0;         /* 子も縮める許可 */
  }

  /* 5) 固定px幅が残っている要素の救済（例） */
  .story, .lv, .hud { 
    width: 100% !important;
  }

  /* 6) もし “vw + padding” を使っているセクションがあれば、幅を内側幅に */
  .section, .panel, .box {
    inline-size: 100%;
    box-sizing: border-box;
  }
}

/* === SPの横はみ出し完全停止パッチ === */
@media (max-width: 767px){
  /* 1) グリッド子要素を縮められるように（最重要） */
  .hero-grid{ grid-template-columns: minmax(0,1fr); }
  .hero-grid > *{ min-width: 0; }            /* ← これが効きます */

  /* 2) コンソール側も右コラムも親幅に収める */
  .console, .right-col,
  .console-frame, .screen, .screen-viewport,
  .panel, .storycard, .statcard {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* 3) STORY/LV 行が押し広げないよう余白と折返し */
  .right-col .panel{ padding-inline: 12px; }
  .right-col .statcard .lv-row,
  .right-col .statcard .bar-wrap{
    min-width: 0;               /* フレックス/グリッドの子を縮小許可 */
  }
  .right-col .storycard p{
    word-break: break-word;     /* 長文がはみ出るのを防ぐ */
  }

  /* 4) コントローラー左右の過剰パディングを縮小 */
  .controller-side.left{  padding-left: 12px; }
  .controller-side.right{ padding-right: 12px; }

  /* 5) 念のためのガード */
  html, body{ overflow-x: hidden; }
}


/* === Title Stack: ロゴ上 / 巻物リボン下 / テキスト前 === */
#titleView .title-stack{
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0;
  width: min(620px, 94%);
  margin: 6px auto 8px;
}

/* ❶ ロゴ（最前面） */
#titleView .title-stack .game-logo{
  position: relative;
  z-index: 2;                  /* ← リボンより前 */
  width: min(560px, 92%);
  height: auto;
}




/* === Title Stack: ロゴ最前 / 巻物画像の上にテキスト === */
#titleView .title-stack{
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0;
  width: min(400px, 94%);
  margin: 16px 0 8px;
  top: 70px;
}

#titleView .title-stack .game-logo{
  position: relative;
  z-index: 2;              
  width: min(560px, 92%);
  height: auto;
  top: -20px;
}

#titleView .title-stack .scroll-banner{
  position: relative;
  z-index: 1;               
  display: grid;
  place-items: center;
  width: 85%;
  aspect-ratio: 1417 / 768;  
  margin-top: clamp(-10px, -2.5vw, -18px); 
  color: #2a2314;
  text-align: center;
  font-weight: 900;
  letter-spacing: .02em;
  font-size: clamp(16px, 0.6vw, 24px);
  line-height: 1.5;
  text-shadow:
    0 2px 0 rgba(255,255,255,.55),
    0 0 10px rgba(255,255,255,.25);
    top: -67px;
}

/* 巻物（背景画像） */
#titleView .title-stack .scroll-banner::before{
  z-index: -1;
  content:"";
  position: absolute; inset: 0;
  background:
    image-set(
      url("img/banner_scroll.png") 1x,
      url("img/banner_scroll.png") 2x
    ) center / contain no-repeat;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.22));
  pointer-events: none;
  top: -20px;
}

/* SP最適化＋はみ出し防止 */
@media (max-width: 767px){
  #titleView .title-stack{ width: min(92vw, 560px); }
  #titleView .title-stack .game-logo{ width: min(88vw, 520px); }
  #titleView .title-stack .scroll-banner{
    font-size: clamp(15px, 4.0vw, 20px);
    margin-top: clamp(-6px, -2.2vw, -12px);
  }
  #titleView, #viewport, .screen-viewport{ max-width: 100%; }
  #titleView .title-stack, #titleView .title-stack *{ min-width: 0; }
}

/* === Game screen の横スクロールバーを消す（中身は縦だけ） === */
.screen-viewport{
  overflow-x: hidden;     /* ← 横は切る */
  overflow-y: auto;       /* ← 縦だけスクロール */
  max-width: 100%;
  box-sizing: border-box; /* padding/border込で100%以内 */
}

/* 内側の要素が“縮めない”既定を無効化（横はみ出し防止） */
.screen-viewport > *,
#titleView, #titleView *{
  min-width: 0;
  max-width: 100%;
}

/* タイトルの3段重ねがわずかに押し広げる場合の保険 */
.title-stack{ width: min(620px, 94%); }
.title-stack .game-logo{ width: min(560px, 92%); }
.title-stack .scroll-banner{ width: 100%; }
.title-stack .scroll-banner::before{
  inset: 0;              /* 画像自体で溢れる場合は 0 2% にして少し内側へ */
}

/* 画像は親幅を超えない */
img, svg, canvas, video{
  max-width: 100%;
  height: auto;
  display: block;
}

/* === SPチューニング（スマホのときだけ上書き） === */
@media (max-width: 767px){
  /* まずは調整用の変数（ここを書き換えるだけで微調整できます） */
  :root{
    --sp-stack-w:    92vw;   /* タイトル全体の幅 */
    --sp-logo-w:     84vw;   /* ロゴの幅 */
    --sp-overlap:   10px;   /* ロゴと巻物の重なり量（マイナスで重ねる） */
    --sp-font:    clamp(14px, 2.2vw, 18px); /* 巻物上の文字サイズ */
    --sp-banner-inset: -4%;   /* 巻物画像を内側に縮める（% or px） */
    --sp-banner-bgsz: contain; /* 例: 90% auto; にすると一回り小さく */
  }

  /* タイトル全体の箱 */
  #titleView .title-stack{
    width: min(var(--sp-stack-w), 560px);
  }

  /* ロゴ */
  #titleView .title-stack .game-logo{
    width: min(var(--sp-logo-w), 520px);
    height: auto;
  }

  /* 巻物（文字） */
  #titleView .title-stack .scroll-banner{
    font-size: var(--sp-font);
    margin-top: var(--sp-overlap);
  }
  /* 巻物（画像） */
  #titleView .title-stack .scroll-banner::before{
    inset: var(--sp-banner-inset);
    background-size: var(--sp-banner-bgsz);
  }
}

/* === 奥義セクション：ドットイラスト版 === */
.okugi-illustrations {
  position: absolute; 
  inset-inline: 0; 
  top: 90px; 
  pointer-events: none;
  top: 90px;
  left: 0;
  right: 0;
  pointer-events: none;
}

.okugi-illust {
  position:absolute;
  top:var(--top,0);
  width:320px; max-width:28vw;
  opacity:0;
  transform: translateX(var(--from,0)) rotate(var(--rot,0deg));
  transition: transform .7s ease, opacity .7s ease;
}

.okugi-illust img{ width:100%; height:auto; image-rendering:pixelated; }


.okugi-illust.in{
  opacity:1;
  transform: translateX(0) rotate(var(--rot));
}

@media (max-width:1023px){
  .okugi-illustrations{ display:none; }
}


.annotation{
  font-size: 12px;
    color: #797979;  
  }
  
.annotation a{
    color: #5112ff;  
  }