/* Re:TUBE LP（スマホ優先・漫画のコマ）
   文字の太さは2種類だけ＝見出し 900・本文 500。
   横スクロールは出さない（隠さず、出ない作りにする）。 */

:root {
  --ink: #111111;
  --paper: #ffffff;
  --yellow: #ffd400;
  --green: #4b9148;
  --gray: #f3f3f3;
  --line: 4px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #e9e9e9;
  color: var(--ink);
  font-family: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif;
  font-weight: 500;
  line-height: 1.6;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}
img { display: block; max-width: 100%; height: auto; }
.nw { white-space: nowrap; }
a { color: inherit; }

/* 真ん中の細長い柱（PCでも同じ並び） */
.page {
  max-width: 430px;
  margin: 0 auto;
  background: var(--paper);
  border-left: var(--line) solid var(--ink);
  border-right: var(--line) solid var(--ink);
  padding-bottom: 92px; /* 下の固定ボタンの分 */
}
@media (max-width: 439px) {
  .page { border-left: 0; border-right: 0; }
}

/* 1画面＝1つのコマ */
.sc {
  padding: 26px 18px 30px;
  border-bottom: var(--line) solid var(--ink);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sc-last { border-bottom: 0; }
.sc-yellow { background: var(--yellow); }
.sc-gray { background: var(--gray); }

.kicker { font-size: 12px; font-weight: 900; letter-spacing: 0.1em; }
.h1 { margin: 0; font-size: 31px; font-weight: 900; line-height: 1.25; letter-spacing: -0.01em; }
.h1 em { font-style: normal; background: linear-gradient(transparent 55%, var(--yellow) 55%); }
.h2 { margin: 0; font-size: 30px; font-weight: 900; line-height: 1.25; }
.h2 .big { font-size: 54px; line-height: 1; }
.h2.price .big { font-size: 58px; }
.h2 .small { font-size: 16px; }
.p { margin: 0; font-size: 15px; line-height: 1.65; }
.p-s { font-size: 14px; line-height: 1.7; }
.note { font-size: 12px; text-align: center; }

/* 最初の画面 */
.hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.logo { height: 30px; width: auto; }
.tag { font-size: 12px; font-weight: 900; letter-spacing: 0.08em; border: 2px solid var(--ink); padding: 4px 8px; white-space: nowrap; }
.hero-frame { height: 320px; background: var(--yellow); }
.hero-bubble { position: absolute; left: 12px; bottom: 12px; font-size: 15px; }
.h1 .big { font-size: 56px; line-height: 1; letter-spacing: -0.02em; }
.hero-cta { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }

/* 枠（コマ） */
.frame { position: relative; border: var(--line) solid var(--ink); overflow: hidden; background: var(--paper); }
.koma { height: 320px; }
.koma-gray { background: var(--gray); }
.koma-green { background: #e8f3e8; }

/* 吹き出し */
.bubble {
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 18px;
  padding: 10px 14px;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.35;
  word-break: keep-all;
}
.bubble-l { position: absolute; left: 14px; top: 16px; width: 186px; }
.bubble-r { position: absolute; right: 12px; top: 18px; width: 190px; font-size: 16px; line-height: 1.4; }
.bubble-dark { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.bubble-c { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); width: 240px; font-size: 14px; line-height: 1.4; text-align: center; padding: 10px 12px; }

/* キャラクター＝頭を見せて、コマの下の線で体を切る（上にそろえる） */
.ch { position: absolute; top: 24px; width: 300px; max-width: none; }
.ch-r { right: -50px; }
.ch-l { left: -60px; }
.koma-gray .ch { top: 104px; width: 280px; right: -40px; }
.koma-green .ch { top: 92px; width: 260px; }
.koma-green .ch-l { left: -50px; }
.koma-green .ch-r { right: -30px; }
.ch-dash { right: -40px; top: 20px; }

/* キャラクターだけ置く舞台（枠なし・胸から上） */
.stage { position: relative; height: 150px; overflow: hidden; }
.stage .ch { top: 0; width: 200px; }
.stage .ch-r { right: 10px; }
.stage .ch-l { left: 10px; }
.stage-c { height: 170px; }
.ch-c { left: 50%; transform: translateX(-50%); }
.stage .ch-xs { width: 150px; right: 0; }
/* 吹き出しの無いキャラの小さな斜めのセリフ（2026-10-09 ミッツ指示） */
.serifu { position: absolute; top: 34px; font-size: 16px; font-weight: 900; letter-spacing: 0.04em; white-space: nowrap; line-height: 1.2; }
.serifu-l { right: 196px; transform: rotate(-8deg); }   /* キャラ（右・幅200）のすぐ左 */
.serifu-r { left: 196px; top: 78px; transform: rotate(8deg); }   /* キャラ（左・幅200）のすぐ右 */
.stage-c .serifu-l { top: 40px; }
.serifu-lo { top: 72px; }   /* 絵の飾り（オレンジの線）の下に */
.stage .ch-xs + .serifu-l, .stage .serifu-l:has(+ .ch-xs) { right: 140px; }   /* 小さいキャラ（幅150）のすぐ左 */

/* 会員さんの声 */
.voice {
  margin: 10px 0 0;
  border: var(--line) solid var(--ink);
  background: var(--paper);
  padding: 18px 16px 16px;
  font-size: 15px;
  line-height: 1.7;
  position: relative;
}
.voice-tag {
  position: absolute; top: -14px; left: 12px;
  background: var(--yellow); border: 3px solid var(--ink);
  padding: 2px 10px; font-size: 12px; font-weight: 900; white-space: nowrap;
}

/* 動画の多さ＝コースの表紙が流れる壁（3段・左右に流れ続ける） */
.wall-frame .ch-dash { top: auto; bottom: -10px; right: -30px; width: 190px; filter: drop-shadow(0 0 2px #ffffff) drop-shadow(0 0 2px #ffffff); }
.wall { position: absolute; left: -40px; top: 14px; width: 520px; transform: rotate(-4deg); display: flex; flex-direction: column; gap: 8px; }
.wall-row { display: flex; gap: 8px; width: max-content; animation: wall-left 28s linear infinite; }
.wall-row.wall-rev { animation: wall-right 34s linear infinite; }
.wall-row img { width: 150px; height: 93px; object-fit: cover; border: 3px solid var(--ink); flex: 0 0 auto; background: var(--paper); }
@keyframes wall-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes wall-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .wall-row { animation: none; } }

/* 写真 */
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo-1 { height: 190px; }
.photo-1 img { object-position: 50% 45%; }
.photo-2 { height: 150px; }
.photo-2 img { object-position: 50% 30%; }
.photo-3 { height: 260px; }
.photo-3 img { object-position: 60% 30%; }
.photo-4 { height: 300px; }
.photo-4 img { object-position: 50% 20%; }
.photo-5 { height: 340px; }
.photo-5 img { object-position: 50% 0; }
.cap { position: absolute; left: 10px; bottom: 10px; background: var(--ink); color: var(--paper); padding: 4px 10px; font-size: 13px; font-weight: 900; }

/* 実績 */
.awards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.awards li { border: 3px solid var(--ink); padding: 10px 12px; font-size: 14px; line-height: 1.4; }
.awards b { font-weight: 900; }

/* 講師 */
.name { font-size: 20px; font-weight: 900; line-height: 1.3; }
.name small { display: block; font-size: 13px; font-weight: 500; }
/* AIGの4冠（2026-10-09 ミッツ指示） */
.award4 { display: flex; gap: 12px; align-items: stretch; border: 3px solid var(--ink); background: var(--paper); padding: 10px; margin: 2px 0 4px; }
.award4 img { flex: 0 0 132px; width: 132px; height: 164px; object-fit: cover; object-position: 50% 40%; border: 2px solid var(--ink); }
.award4-t { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.award4-k { font-size: 11px; font-weight: 900; letter-spacing: 0.06em; }
.award4-h { font-size: 20px; font-weight: 900; line-height: 1.1; }
.award4-h .big { font-size: 46px; line-height: 1; background: linear-gradient(transparent 60%, var(--yellow) 60%); }
.award4-s { font-size: 13px; line-height: 1.4; }
.award4-s b { font-weight: 900; }
/* 講師の年表（2026-10-09） */
.career { margin: 2px 0 0 6px; border-left: 4px solid var(--ink); padding: 2px 0 0 16px; }
.career div { position: relative; padding: 0 0 12px; }
.career div:last-child { padding-bottom: 0; }
.career div::before { content: ""; position: absolute; left: -26px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); border: 2px solid var(--gray); }
.career dt { font-size: 13px; font-weight: 900; letter-spacing: 0.05em; line-height: 1.3; }
.career dd { margin: 2px 0 0; font-size: 14px; line-height: 1.6; text-wrap: pretty; }
.career b { font-weight: 900; background: linear-gradient(transparent 60%, var(--yellow) 60%); }

/* よくある質問 */
.faq { border: 3px solid var(--ink); padding: 12px 14px; }
.q { font-size: 15px; font-weight: 900; line-height: 1.4; }
.a { font-size: 14px; line-height: 1.6; margin-top: 4px; }
.foot { font-size: 11px; line-height: 1.7; color: #333333; }

/* ボタン */
.btn {
  display: block; text-align: center; text-decoration: none;
  background: var(--green); color: var(--paper);
  font-size: 18px; font-weight: 900; line-height: 1.2;
  padding: 16px; border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  min-height: 44px;
}
.btn-dark { background: var(--ink); box-shadow: 5px 5px 0 var(--green); }
.btn:hover { background: #3d7a3b; }
.btn-dark:hover { background: #333333; }

/* 画面の下に常に見えるボタン */
.sticky {
  position: fixed; left: 0; right: 0; bottom: 0;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.92);
  border-top: var(--line) solid var(--ink);
}
.btn-sticky {
  max-width: 430px; margin: 0 auto;
  box-shadow: 4px 4px 0 var(--ink);
  padding: 12px 16px;
}
.sticky-sub { display: block; font-size: 12px; font-weight: 500; margin-top: 2px; }

/* 特定商取引法の表記 */
.toku { margin: 0; display: grid; grid-template-columns: 1fr; gap: 0; }
.toku dt { font-weight: 900; font-size: 14px; padding: 12px 0 2px; border-top: 2px solid var(--ink); }
.toku dd { margin: 0 0 12px; font-size: 14px; line-height: 1.7; }
.toku-sub { font-size: 12px; }
.back { margin: 20px 0 0; font-size: 14px; }

/* 動画のコース（表紙＋名前・2列） */
.courses { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 10px; }
.course img { width: 100%; height: auto; aspect-ratio: 400 / 248; object-fit: cover; border: 3px solid var(--ink); background: var(--paper); }
.course .cn { font-size: 13px; font-weight: 900; line-height: 1.3; margin-top: 5px; word-break: keep-all; }
.course-text { aspect-ratio: 400 / 248; border: 3px solid var(--ink); background: var(--yellow); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size: 15px; font-weight: 900; line-height: 1.3; padding: 6px; }
.course-text span { font-size: 11px; font-weight: 500; margin-top: 4px; }

/* 最初の画面（2026-10-09 ミッツ選択A＝見出しが先＋「完全攻略」の判） */
.h1-xl { font-size: 36px; line-height: 1.2; }
.stamp { position: absolute; right: 10px; top: 10px; width: 96px; height: 96px; border-radius: 50%; background: #e60012; color: var(--paper); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); display: flex; align-items: center; justify-content: center; text-align: center; font-size: 22px; font-weight: 900; line-height: 1.1; transform: rotate(-12deg); }

/* 03 ミッツの答え＝6つのステップの道（2026-10-09 ミッツ選択A） */
.road { list-style: none; margin: 0; padding: 0; position: relative; }
.road::before { content: ""; position: absolute; left: 17px; top: 12px; bottom: 14px; width: 4px; background: var(--ink); }
.road li { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 0 0 10px; }
.rn { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: var(--paper); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 900; position: relative; z-index: 1; box-shadow: 0 0 0 3px var(--yellow); }
.rn-goal { background: var(--green); }
.rc { flex: 1 1 0; min-width: 0; background: var(--paper); border: 3px solid var(--ink); padding: 7px 10px 8px; }
.rt { font-size: 17px; font-weight: 900; line-height: 1.25; display: flex; align-items: baseline; gap: 6px; }
.rt small { font-size: 11px; font-weight: 500; }
.rk { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.rk span { font-size: 12px; font-weight: 900; border: 2px solid var(--ink); padding: 2px 7px; line-height: 1.3; white-space: nowrap; }
.rk .hi { background: var(--yellow); }
.rc-goal { background: var(--green); color: var(--paper); border-color: var(--ink); }
.rc-goal .rt { font-size: 20px; }
.road-note { font-size: 12px; font-weight: 900; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.road-note .rl { flex: 0 0 100%; font-weight: 900; }
.road-note span { border: 2px solid var(--ink); background: var(--paper); padding: 2px 7px; line-height: 1.3; white-space: nowrap; }
/* キャラと吹き出しは重ねず横に並べる（2026-10-09 ミッツ「もろかぶり」） */
.stage-talk { height: 170px; display: flex; align-items: flex-start; gap: 4px; }
.stage-talk .ch { position: static; flex: 0 0 170px; width: 170px; margin-right: -24px; }
.stage-talk .bubble-l { position: static; flex: 1 1 auto; width: auto; margin-top: 26px; }