/* =====================================================================
   インサイドツアーのページ（2026-10-21）
   一般向けLP（backyard-tour-lp-public）の中身をそのまま使い、見た目だけをこのサイト（TOP のイラレ案）に合わせる
   - 色：水色 #29abe2・黄 #fcef00・赤 #ea545d・ピンク #e40055・紺 #182987（LP の赤と緑を置きかえる）
   - 書体：丸ゴシック（Zen Maru Gothic）＋広めの字間
   - 色の面の上の端は、TOP と同じゆるい弧
   - 上のメニューとフッターは TOP と同じもの
   ===================================================================== */
:root {
  --ink: #1f1f1f; --ink-soft: #3a3a3a; --gray: #6b6b6b;
  --blue: #e40055; --blue-deep: #182987; --blue-soft: #fff9c2; --blue-line: #f5e46a;   /* LP の「赤」→ ピンク、薄い地 → 薄い黄 */
  --pink: #29abe2; --pink-deep: #182987; --pink-soft: #dff2fb;                         /* LP の「緑」→ 水色 */
  --line: #e6eef3;
  --sans: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  --navy: #182987; --yellow: #fcef00; --red: #ea545d; --sky: #29abe2;
}
body.tour-page { letter-spacing: .05em; padding-top: 0; }
.tour-page h2, .tour-page h3, .tour-page .hero-lead, .tour-page .big, .tour-page .msg { letter-spacing: .08em; }
.tour-page .wrap { max-width: 720px; }

/* ---------- 上のメニュー（TOP と同じ） ---------- */
.tour-page .hd {
  position: sticky; top: 0; z-index: 55; display: flex; align-items: center; justify-content: space-between;
  background: #fff; padding: 10px clamp(16px, 4vw, 56px); box-shadow: 0 2px 0 rgba(24, 41, 135, .06);
}
.tour-page .hd-brand-mark { display: block; width: clamp(150px, 15vw, 230px); aspect-ratio: 739 / 186; background: url(../assets/top/img-logo.webp) center / contain no-repeat; }
.tour-page .hd-nav { display: flex; gap: 14px; align-items: center; margin-top: 12px; }
.tour-page .hd-nav a { border-radius: 999px; transition: transform .15s, box-shadow .15s; }
.tour-page .hd-nav > a:first-child {
  background: #fff; color: var(--navy); border: 3px solid var(--navy); padding: 6px 16px;
  font-weight: 700; font-size: 15px; letter-spacing: .08em; box-shadow: 0 4px 0 var(--navy);
}
.tour-page .hd-nav a:hover { transform: translateY(3px); box-shadow: 0 1px 0 var(--navy); }
.tour-page .hd-tour {
  position: relative; display: flex; flex-direction: column; align-items: center; line-height: 1.05;
  background: var(--blue); color: #fff; padding: 8px 22px 8px 64px; box-shadow: 0 4px 0 var(--navy);
}
.tour-page .hd-tour span { font-family: "Archivo", var(--sans); font-weight: 900; font-size: 16px; letter-spacing: .06em; }
.tour-page .hd-tour small { font-size: 10px; font-weight: 700; letter-spacing: .14em; }
.tour-page .hd-tour[aria-current="page"] { outline: 3px solid var(--yellow); outline-offset: 2px; }
.tour-page .hd-tour::before {
  content: ""; position: absolute; left: 8px; bottom: 4px; width: 50px; aspect-ratio: 702 / 698;
  background: url(../assets/top/hd-tour-mascot.webp) center / contain no-repeat; transform-origin: 50% 100%; animation: hd-cat 2.6s ease-in-out infinite;
}
.tour-page .hd-tour:hover::before { animation: hd-cat-jump .5s cubic-bezier(.3, 1.6, .5, 1) 1; }
@keyframes hd-cat { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes hd-cat-jump { 0% { transform: translateY(0); } 30% { transform: translateY(-14px) scale(.94, 1.08); } 60% { transform: translateY(0) scale(1.08, .92); } 100% { transform: none; } }
#progress { z-index: 60; }   /* 読み進みの線は、上のメニューの上にかぶせて出す */

/* ---------- 色の面と弧 ---------- */
.tour-page .hero { background: var(--sky); color: #fff; padding-top: clamp(40px, 7vw, 80px); }
.tour-page .hero::before { top: auto; right: -60px; bottom: 30%; width: 180px; height: 180px; background: rgba(252, 239, 0, .9); }
.tour-page .hero::after { background: rgba(228, 0, 85, .85); width: 120px; height: 120px; bottom: 20%; left: -40px; }
.tour-page .hero-kicker { color: var(--blue); }
.tour-page .hero-lead, .tour-page .hero-lead .pk { color: #fff; }
.tour-page .hero-lead .lead-key { color: var(--navy); }   /* 紺（2026-10-23 本人指示） */
.tour-page .limited { background: var(--navy); color: var(--yellow); flex-direction: column; gap: 4px; }   /* 帯は紺、文字は黄色（2026-10-23 本人指示）。日付は下の行へ */
.tour-page .limited + .tint { position: relative; z-index: 2; }   /* 申込むボタンが、次の区画の弧に隠れないように */
.tour-page .tint, .tour-page .pink-tint, .tour-page .final { position: relative; }
.tour-page .tint { background: var(--blue-soft); }
.tour-page .pink-tint { background: var(--pink-soft); }
.tour-page .final { background: var(--yellow); }
.tour-page section.tint::before, .tour-page section.pink-tint::before, .tour-page section.final::before {
  content: ""; position: absolute; z-index: 0; left: -40%; right: -40%; top: calc(-1 * var(--arc-h)); height: calc(2 * var(--arc-h));
  border-radius: 50%; background: inherit; --arc-h: clamp(26px, 4vw, 60px); pointer-events: none;
}
.tour-page section.tint > *, .tour-page section.pink-tint > *, .tour-page section.final > * { position: relative; z-index: 1; }
body.tour-page { overflow-x: clip; }

/* ---------- 見出し・強調 ---------- */
.tour-page h2 { font-weight: 700; }
.tour-page h2 .mark { background: linear-gradient(transparent 62%, var(--yellow) 62%); }
.anim.tour-page h2 .mark, .anim .tour-page h2 .mark { background: linear-gradient(var(--yellow), var(--yellow)) no-repeat 0 100% / 0 38%; }
.anim .tour-page h2.is-in .mark { background-size: 100% 38%; }
.tour-page .eyebrow { background: var(--navy); }
.tour-page .eyebrow.pink { background: var(--sky); }

/* ---------- 申込ボタン：TOP のボタンと同じ形（ピンクに紺の影） ---------- */
.tour-page .cta {
  background: var(--blue); border: 0; text-shadow: none; box-shadow: 0 6px 0 var(--navy);
  font-family: var(--sans); font-weight: 900; letter-spacing: .1em;
}
.tour-page .cta::before { display: none; }
.tour-page .cta:active { box-shadow: 0 0 0 var(--navy); }
.tour-page .sticky .cta { box-shadow: 0 3px 0 var(--navy); }
.tour-page .cta-tel { border-color: var(--navy); color: var(--navy); }
.tour-page .cta.is-closed { background: #b8c2d6; box-shadow: 0 4px 0 #8896ac; }

/* ---------- フッター（TOP と同じ） ---------- */
.tour-page .ft { background: var(--navy); color: #fff; padding: clamp(44px, 7vw, 80px) clamp(16px, 4vw, 56px) 26px; text-align: left; font-size: 14px; }
.tour-page .ft-inner { max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px 48px; }
.tour-page .ft-co { font-weight: 900; font-size: clamp(17px, 1.8vw, 22px); letter-spacing: .06em; }
.tour-page .ft-sub { margin-top: 2px; opacity: .85; }
.tour-page .ft-addr { font-style: normal; margin-top: 14px; line-height: 1.9; opacity: .9; font-size: 14px; }
.tour-page .ft a { color: #fff; }
.tour-page .ft a:hover { text-decoration: underline; }
.tour-page .ft-nav { display: flex; gap: 12px 48px; flex-wrap: wrap; }
.tour-page .ft-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tour-page .ft-nav a { font-weight: 700; }
.tour-page .ft-copy { max-width: 1100px; margin: clamp(36px, 6vw, 60px) auto 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.25); font-size: 12px; opacity: .7; }

@media (max-width: 760px) {
  .tour-page .hd-nav { gap: 8px; }
  .tour-page .hd-nav > a:first-child { padding: 5px 11px; font-size: 13px; }
  .tour-page .hd-tour { padding: 6px 14px 6px 50px; }
  .tour-page .hd-tour::before { width: 40px; }
  .tour-page .hd-tour span { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .tour-page .hd-tour::before { animation: none; } }

/* ---------- 「年間700件超」を大きく（2026-10-23） ---------- */
.tour-page .fg .before { font-size: clamp(16px, 4.4vw, 19px); }
.tour-page .fg .after { font-size: clamp(25px, 6.8vw, 42px); line-height: 1.3; margin-top: 8px; white-space: nowrap; }
.tour-page .fg .after em { font-size: 1.8em; }

/* ---------- 最初の画面の丸：大きく・画面の中をただよってふちではね返る・つかんで投げられる（js/hero-balls.js） ---------- */
.tour-page .hero::before, .tour-page .hero::after { display: none; }
.tour-page .hero-inner { pointer-events: none; }   /* 丸を文字の後ろに置いたまま、さわれるように */
.hero-ball { position: absolute; z-index: 0; aspect-ratio: 1; border-radius: 50%; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.hero-ball i { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--c); transition: scale .25s cubic-bezier(.3, 1.8, .5, 1); }
.hero-ball:hover i { scale: 1.06; }
.hero-ball.is-grab { cursor: grabbing; }
.hero-ball.is-grab i { scale: 1.1; animation-play-state: paused; }
.hero-ball.is-pop i { animation: ball-pop .5s cubic-bezier(.3, 1.6, .5, 1); }
.hero-ball--y { --c: rgba(252, 239, 0, .9); --t: 5s; width: clamp(220px, 30vw, 440px); aspect-ratio: 1; right: calc(clamp(220px, 30vw, 440px) * -.35); top: 42%; }
.hero-ball--p { --c: rgba(228, 0, 85, .85); --t: 4s; width: clamp(160px, 21vw, 300px); aspect-ratio: 1; left: calc(clamp(160px, 21vw, 300px) * -.35); top: 58%; }
@keyframes ball-pop { 0% { transform: scale(1); } 30% { transform: scale(1.25, .8); } 60% { transform: scale(.88, 1.12); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .hero-ball i { animation: none; } }
/* 下の区画にも丸を置く（js/hero-balls.js の EXTRA。ページ全体で10個くらい）。丸は区画の中だけを動き、文字や枠の後ろを通る */
.tour-page .ball-field { position: relative; }
.tour-page .ball-field > :not(.hero-ball) { position: relative; z-index: 1; }
.tour-page .ball-field > .hero-ball { position: absolute; z-index: 0; }   /* 色の面の区画の「中身はみな relative」に負けないように */
@media (max-width: 760px) {   /* スマホでは黄色の丸が黄色の文字に重なるので、ねこの横まで下げる */
  .hero-ball--y { top: auto; bottom: 4%; right: calc(clamp(220px, 30vw, 440px) * -.5); }
  .hero-ball--p { top: auto; bottom: 22%; left: calc(clamp(160px, 21vw, 300px) * -.5); }
}

/* ---------- 開催日「12月14日」：数字を大きく、月・日は小さく（2026-10-23） ---------- */
.tour-page .announce .big-date .db-main .num { font-size: 1.75em; }
.tour-page .announce .big-date .db-main .num .u { font-size: .55em; margin: 0 .04em; }

/* ---------- 「700」：スロットのように回る（index.html の spinReel） ---------- */
.tour-page .fg .after em { cursor: pointer; }
.tour-page .fg .after em.is-reel { display: inline-flex; vertical-align: bottom; }
.tour-page .reel { display: inline-block; height: 1.1em; line-height: 1.1; overflow: hidden; }
.tour-page .reel b { display: block; font-weight: inherit; transition: transform var(--d, 1.5s) cubic-bezier(.12, .6, .2, 1.04); }
.tour-page .reel b span { display: block; height: 1.1em; }

/* ---------- 最初の画面のねこ：ボールが当たると、びくっとして「あっ」の絵に変わる（js/hero-balls.js） ---------- */
.tour-page .hero-cat { position: relative; transform-origin: 50% 100%; }
.tour-page .hero-cat .cat-surprise { position: absolute; left: -14.57%; top: 2.34%; width: 107.27%; max-width: none; margin: 0; opacity: 0; pointer-events: none; }
.tour-page .hero-cat.is-hit > img[data-img] { opacity: 0; }
.tour-page .hero-cat.is-hit .cat-surprise { opacity: 1; }
.tour-page .hero-cat.is-hit { animation: cat-biku .5s cubic-bezier(.3, 1.6, .5, 1); }
/* 絵の下はしは帯で切れているので、下はしは動かさない（上に跳ばない・回さない）。下を支点にのびちぢみと、上だけ左右にゆれる */
@keyframes cat-biku {
  0% { transform: none; } 15% { transform: scale(.95, 1.1); } 35% { transform: scale(1.04, .95); }
  50% { transform: skewX(-4deg); } 65% { transform: skewX(3deg); } 80% { transform: skewX(-1.5deg); } 100% { transform: none; }
}

/* ---------- 当日のスケジュール：地は上と同じクリーム色、白い枠の中は白のまま（2026-10-23） ---------- */
.tour-page .cream { background: var(--blue-soft); }
.tour-page .cream .flow > li { background: #fff; }

/* ---------- 吹き出し（本人支給 アセット 3）。しっぽは左下（2026-10-23） ----------
   広い画面：箱の右の空いているところに置いて、箱の枠に少しかぶせる。しっぽで箱を指す
   せまい画面（横に空きがない）：箱の右上にのせて、しっぽで箱を指す。箱の上に吹き出しの分の空きをとる
   吹き出しは、指す箱（.bubble-at）の中に置く。幅は --bw（広い画面）と --bw-sp（せまい画面）。箱の上の空きにも使うので、箱の側で決める */
.tour-page .bubble-at { position: relative; }
.tour-page .bubble {
  position: absolute; z-index: 3; display: flex; flex-direction: column; justify-content: center; align-items: center;
  aspect-ratio: 779 / 509; padding: 0 9% 9%; text-align: center; font-weight: 900; color: var(--ink); letter-spacing: .03em;
  background: url(../inside-tour/images/bubble.webp) center / 100% 100% no-repeat;
  width: var(--bw-sp); right: -6px; bottom: calc(100% - 18px);
}
@media (max-width: 1279px) { .tour-page .bubble-at:has(> .bubble) { margin-top: calc(var(--bw-sp) * .653 - 4px); } }
.tour-page .bubble > span { display: block; white-space: nowrap; }
@media (min-width: 1280px) {
  .tour-page .bubble { width: min(var(--bw), calc((100vw - 620px) / 2 + 130px)); right: auto; left: calc(100% - 150px); bottom: 40%; }   /* 箱の枠にかぶせる。もっと内側に（本人指示） */
  .tour-page .bubble--end, .tour-page .roi .pitch .bubble--reframe { font-size: 22px; }
}
.tour-page .bubble-at:has(> .bubble--3rd) { --bw: 330px; --bw-sp: clamp(220px, 56vw, 330px); }
.tour-page .bubble--3rd { font-size: clamp(22px, 5.8vw, 30px); line-height: 1.3; }
.tour-page .bubble--3rd { color: var(--blue); }
.tour-page .bubble--3rd .pk { font-size: 1em; color: var(--pink); }
.tour-page .bubble-at:has(> .bubble--end) { --bw: 400px; --bw-sp: clamp(270px, 80vw, 380px); }
.tour-page .bubble--end { font-size: clamp(16px, 4.4vw, 21px); line-height: 1.45; color: var(--pink); margin: 0; padding: 0 8% 10%; }
.tour-page .bubble-at:has(> .bubble--reframe) { --bw: 400px; --bw-sp: clamp(260px, 78vw, 360px); }
.tour-page .roi .pitch .bubble--reframe { font-size: clamp(15px, 4.2vw, 19px); line-height: 1.6; margin: 0; }
.tour-page .roi .pitch .bubble--reframe .a { opacity: .45; }
.tour-page .roi .pitch .bubble--reframe .b { color: var(--pink); }
/* 吹き出しは、スクロールして見えたところでポンと出る（しっぽの先から大きくなる）。index.html の bubbleIo */
.anim .tour-page .bubble { opacity: 0; transform: scale(.2) rotate(-8deg); transform-origin: 12% 96%; }
.anim .tour-page .bubble.is-in { animation: bubble-pop .7s cubic-bezier(.2, .9, .3, 1) .1s both; }
@keyframes bubble-pop { 0% { opacity: 0; transform: scale(.1) rotate(-10deg); } 40% { opacity: 1; transform: scale(1.18) rotate(3deg); } 60% { transform: scale(.92) rotate(-1deg); } 80% { transform: scale(1.04); } 100% { opacity: 1; transform: none; } }

/* ---------- 当日のスケジュール：見出し・時間と場所・番号を大きく（2026-10-23 本人「小さい」） ---------- */
.tour-page .flow > li { padding: 22px 20px 22px 70px; }
.tour-page .flow > li::before { left: 16px; top: 20px; width: 40px; height: 40px; font-size: 20px; }
.tour-page .flow .where { font-size: clamp(15px, 4vw, 18px); padding: 5px 16px; margin-bottom: 12px; }
.tour-page .flow h3 { font-size: clamp(22px, 5.8vw, 28px); line-height: 1.4; }

/* ---------- 「目的は、気づきを得ること。」の区画を大きく（2026-10-23 本人指示） ---------- */
.tour-page .callout h3 { font-size: clamp(26px, 7vw, 40px); line-height: 1.4; }
.tour-page .callout .lines { font-size: clamp(18px, 4.8vw, 24px); line-height: 1.9; margin-top: 18px; }

/* ---------- 「当日のスケジュール」の下の矢印が、次の区画に隠れて切れていた（2026-10-23） ---------- */
.tour-page .bridge { position: relative; z-index: 2; padding-bottom: 22px; }

/* ---------- 次回以降の開催予定（開催日の枠の下。2026-10-23） ---------- */
.tour-page .next-dates { margin: 28px auto 0; padding: 20px 18px; border: 2px dashed var(--navy); border-radius: 16px; background: rgba(255, 255, 255, .7); text-align: center; }
.tour-page .next-dates .nd-head { display: inline-block; background: var(--navy); color: #fff; font-size: 14px; font-weight: 900; padding: 4px 16px; border-radius: 999px; }
.tour-page .next-dates ul { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tour-page .next-dates li { font-size: clamp(16px, 4.4vw, 19px); font-weight: 700; color: var(--ink); }
.tour-page .next-dates li b { font-size: 1.3em; color: var(--sky); margin: 0 .1em; }
.tour-page .next-dates .nd-note { margin-top: 10px; font-size: 13px; color: var(--gray); }
/* 「濃厚な内容で…」は、せまい画面では「終了」の文字の近くに寄せる（2026-10-23 本人「もっと文字の方に寄せて」） */
@media (max-width: 1279px) {
  .tour-page .bubble--end { right: auto; left: 24%; bottom: calc(100% - 46px); }
}

/* ---------- 勉強会の6項目（01〜06）：見出し・番号・説明を大きく（2026-10-23 本人「見出し小さい、全体的に」） ---------- */
.tour-page .study-card { padding: 20px 20px 20px 72px; }
.tour-page .study-card .no { left: 18px; top: 20px; font-size: 30px; }
.tour-page .study-card .st { font-size: clamp(21px, 5.6vw, 27px); line-height: 1.45; }
.tour-page .study-card .sd { font-size: clamp(15px, 4.1vw, 17px); margin-top: 8px; }

/* ---------- 吹き出しの中の文字を大きく（2026-10-23 本人「全体的に吹き出しの中の文字大きくして、改行してOK」） ---------- */
.tour-page .bubble--3rd { font-size: clamp(26px, 7vw, 36px); }
.tour-page .bubble--end, .tour-page .roi .pitch .bubble--reframe { font-size: clamp(20px, 5.4vw, 27px); line-height: 1.4; }
@media (min-width: 1280px) { .tour-page .bubble--end, .tour-page .roi .pitch .bubble--reframe { font-size: 27px; } }
/* 文字を大きくしたぶん、吹き出しも大きく */
.tour-page .bubble-at:has(> .bubble--end), .tour-page .bubble-at:has(> .bubble--reframe) { --bw: 460px; --bw-sp: clamp(290px, 86vw, 440px); }
.tour-page .bubble-at:has(> .bubble--3rd) { --bw: 380px; --bw-sp: clamp(250px, 64vw, 380px); }
.tour-page .bubble--end, .tour-page .roi .pitch .bubble--reframe { padding: 4% 9% 12%; }

/* ---------- 診断と最後の申込の区画：地を黄色から水色に（2026-10-23 本人指示。最初の画面と同じ水色） ---------- */
.tour-page .final { background: var(--sky); }
/* 水色の地では、水色の文字（来てみてください。）と灰色の小さい文字が読めないので、白と紺にする */
.tour-page .final .msg .pk { color: #fff; }
.tour-page .final .start-note, .tour-page .final .cta-note, .tour-page .final .cta-note b { color: var(--navy); }

/* ---------- 「第３弾、開催します！」：「2026年」の「年」の中に置き、しっぽの先（絵の左 11.5%・上 97%）を「年」の右上に合わせる。
   文字の大きさや画面の幅が変わっても、「年」から吹き出したまま（2026-10-23 本人「大きさ変わっても吹き出しの位置変えたくない」） ---------- */
.tour-page .announce .big-date { --b3w: clamp(250px, 64vw, 380px); margin-top: calc(var(--b3w) * .653 - 20px); }
.tour-page .db-nen { position: relative; display: inline-block; }
.tour-page .db-nen > .bubble--3rd { width: var(--b3w); left: calc(100% - var(--b3w) * .115 + 2px); right: auto; top: auto; bottom: calc(78% - var(--b3w) * .02); }

/* ---------- スマホの崩れ（2026-10-23 確認エージェントの結果から） ---------- */
/* 区画の上の弧（左右に 40% はみ出す）と丸のせいで、スマホでページが横に 1.4倍に広がり、下の固定バーの「申込む」が画面の外に出ていた。横だけ切る（上の弧は残る） */
.tour-page section.tint, .tour-page section.pink-tint, .tour-page section.final, .tour-page .ball-field { overflow-x: clip; }
/* 上のメニューの「INSIDE TOUR インサイドツアー」が4行に折れていた */
.tour-page .hd-tour span, .tour-page .hd-tour small { white-space: nowrap; }
@media (max-width: 420px) {
  .tour-page .hd-brand-mark { width: 118px; }
  .tour-page .hd-tour small { display: none; }
  #countdown .cd-sub { font-size: 11.5px; }
}
/* 「濃厚な内容で…」の吹き出しが、スマホで「終了」の枠からはみ出していた */
@media (max-width: 760px) {
  .tour-page .bubble--end { left: auto; right: 0; width: min(var(--bw-sp), calc(100% - 8px)); bottom: calc(100% - 30px); }
  .tour-page .ball-field:not(.hero) > .hero-ball { opacity: .5; }   /* 下の区画の丸は、スマホでは文字のじゃまにならないよう薄く */
}
/* 1〜2文字だけ次の行に落ちる折れ方を減らす（言葉の切れ目で折る） */
.tour-page :is(h2, h3, .hero-lead, .st, .callout h3, .bubble, .lines, .msg) { word-break: auto-phrase; text-wrap: balance; }
/* フッターのリンクの押せる高さを広げる */
.tour-page .ft-nav a { display: inline-block; padding: 8px 0; }
/* せまいスマホでは、「年」から吹き出したまま画面の右はしに収まるよう、吹き出しと文字を小さくする（「年」の右はし ≒ 画面のまん中） */
.tour-page .announce .big-date { --b3w: clamp(180px, calc(56vw - 12px), 380px); }
.tour-page .bubble--3rd { font-size: clamp(19px, 5.6vw, 36px); }
@media (max-width: 400px) {
  .tour-page .hd-nav { gap: 6px !important; }
  .tour-page .hd-tour { padding: 6px 10px 6px 50px !important; }
  .tour-page .hd-tour::before { width: 42px; }
}

/* ---------- 診断の見出し：黄色の下線をやめて白い文字に（2026-10-23 本人指示） ---------- */
.tour-page .final .quiz-inline h2 { color: #fff; }
.tour-page .final .quiz-inline h2 .mark { background: none !important; color: inherit; }

/* ---------- 「少人数制・1回15人未満。」は紺の帯をやめ、最初の「参加を申込む」の下に文字だけで置く（2026-10-23 本人指示） ---------- */
.tour-page .tint > .limited { background: none; color: var(--navy); padding: 12px 0 0; font-size: clamp(16px, 4.4vw, 19px); }
.tour-page .hero + .tint { position: relative; z-index: 2; padding-bottom: 8px !important; }   /* 申込むボタンが次の区画の弧に隠れないように（帯がなくなったので付け直し） */

/* ---------- 「2万円を…」：「明日から変えることが」の「が」の中に置き、左右を反転した吹き出しで「が」の左上から上へ吹き出す。
   CSS だけで合わせるので、画面の幅や文字の大きさが変わっても「が」から出たまま。上の青い箱にかぶらないよう、黒い箱の上に吹き出しの分の空きをとる（2026-10-23 本人「かぶりすぎ」） ---------- */
.tour-page .roi .pitch.bubble-at { --rw: clamp(220px, calc(70vw - 20px), 340px); margin-top: calc(var(--rw) * .653 * .97 - 6px) !important; }
.tour-page .from-ga { position: relative; display: inline-block; }
.tour-page .from-ga > .bubble--reframe {
  width: var(--rw) !important; left: auto !important; right: calc(100% - var(--rw) * .115 - 2px) !important; top: auto !important; bottom: 70% !important;
  background: none; padding: 2% 9% 12% !important; font-size: clamp(17px, 4.6vw, 23px) !important; line-height: 1.45; color: var(--ink); white-space: normal;
  transform-origin: 88% 96%;
}
.tour-page .from-ga > .bubble--reframe::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url(../inside-tour/images/bubble.webp) center / 100% 100% no-repeat; transform: scaleX(-1); }
.anim .tour-page .from-ga > .bubble--reframe { transform-origin: 88% 96%; }
.tour-page .ft-stats { float: right; color: inherit; opacity: .6; font-size: 11px; text-decoration: none; }   /* アクセス解析（/stats/）へ */

/* 上のメニューの「ゼミ入校」（2026-10-25 本人指示「ゼミ入校のボタンつくって」）。INSIDE TOUR と同じ形で、色は水色 */
.tour-page .hd-zemi {
  position: relative; display: flex !important; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05;
  background: #29abe2 !important; color: #fff !important; padding: 8px 22px !important; box-shadow: 0 4px 0 #182987; border-radius: 999px;
  font-family: "Zen Maru Gothic", var(--display, sans-serif);
}
.tour-page .hd-zemi span { font-weight: 900; font-size: 16px; letter-spacing: .1em; white-space: nowrap; }
.tour-page .hd-zemi small { font-size: 10px; font-weight: 700; letter-spacing: .12em; opacity: .95; white-space: nowrap; }
.tour-page .hd-zemi[aria-current="page"] { outline: 3px solid #fcef00; outline-offset: 2px; }
@media (max-width: 760px) { .tour-page .hd-zemi { padding: 6px 14px !important; } .tour-page .hd-zemi span { font-size: 13px; } }
@media (max-width: 420px) { .tour-page .hd-zemi small { display: none; } .tour-page .hd-zemi { padding: 8px 12px !important; } }
@media (max-width: 480px) {   /* メニューが3つになり、スマホで横にはみ出したので詰める（2026-10-25） */
  .tour-page .hd-brand-mark { width: 96px; }
  .tour-page .hd-nav { gap: 5px !important; }
  .tour-page .hd-nav > a:first-child { padding: 4px 9px; font-size: 12px; border-width: 2px; }
  .tour-page .hd-tour { padding: 6px 8px 6px 40px !important; }
  .tour-page .hd-tour::before { width: 34px; left: 5px; }
  .tour-page .hd-tour span, .tour-page .hd-zemi span { font-size: 12px; letter-spacing: .02em; }
  .tour-page .hd-zemi { padding: 8px 9px !important; }
}
@media (max-width: 400px) { .tour-page .hd-brand-mark { width: 80px; } .tour-page .hd-nav { gap: 4px !important; } .tour-page .hd-nav > a:first-child { padding: 4px 7px; } }
/* 「第３弾、開催します！」の吹き出しを外したので、開催日の枠の上の吹き出し用の空きもなくす（2026-10-25 本人指示「とる」） */
.tour-page .announce .big-date { margin-top: 0; }

/* 上のメニューの「ラゼミ入校」：ラゼミのページと同じ紺の地・黄色い文字に（2026-10-26 本人指示「いろあわせる」） */
.tour-page .hd-zemi { background: #182987 !important; color: #fcef00 !important; box-shadow: 0 4px 0 #0e1a5e; }
.tour-page .hd-zemi small { color: #fff; opacity: .9; }
/* 「2万円を…」の吹き出しを上へ（2026-10-26 本人指摘「もう少し上だな、近い」）。しっぽの先は「が」の少し上。上げた分、黒い箱の上の空きも広げる */
.tour-page .from-ga > .bubble--reframe { bottom: 125% !important; }
.tour-page .roi .pitch.bubble-at { margin-top: calc(var(--rw) * .653 * .97 + 24px) !important; }
/* メニューが3つになり、320〜360px と 421〜480px で横にはみ出していた（2026-10-26 確認係の指摘）。小さい行は 480px 以下で隠し、380px 以下はさらに詰める */
@media (max-width: 480px) { .tour-page .hd-tour small, .tour-page .hd-zemi small { display: none; } }
@media (max-width: 380px) {
  .tour-page .hd-brand-mark { width: 66px; }
  .tour-page .hd-nav { gap: 4px !important; }
  .tour-page .hd-nav > a:first-child { padding: 4px 6px; font-size: 11px; }
  .tour-page .hd-tour { padding: 6px 7px 6px 34px !important; }
  .tour-page .hd-tour::before { width: 28px; left: 4px; }
  .tour-page .hd-tour span, .tour-page .hd-zemi span { font-size: 11px; letter-spacing: 0; }
  .tour-page .hd-zemi { padding: 8px 7px !important; }
}

/* スマホ（〜760px）：最初の画面のねこが大きすぎた（2026-10-26 本人指摘「でかいな」） */
@media (max-width: 760px) { .tour-page .hero-cat { max-width: min(270px, 66%); } }
@media (max-width: 760px) {
  /* 当日のスケジュール：番号を上のまん中に置き、中身もまん中にそろえる（2026-10-26 本人指示「数字を真ん中にして。全体を中央にして」） */
  .tour-page .flow > li { padding: 22px 20px; text-align: center; }
  .tour-page .flow > li::before { position: static; display: grid; place-items: center; margin: 0 auto 12px; }
  .tour-page .flow .where { display: inline-block; }
  /* 「濃厚な内容で…」の吹き出しはスマホでは出さない（2026-10-26 本人指示「吹き出しやめる」） */
  .tour-page .bubble--end { display: none; }
}
@media (max-width: 760px) {
  /* 「2万円を、経費と見るか…」の吹き出しもスマホでは出さない（2026-10-26 本人指示「吹き出し辞める」）。吹き出しのために空けていた上の空きも詰める */
  .tour-page .from-ga > .bubble--reframe { display: none; }
  .tour-page .bubble-at:has(> .bubble) { margin-top: 0 !important; }
}
@media (max-width: 760px) { .tour-page .roi .pitch.bubble-at { margin-top: 0 !important; } }