@charset "utf-8";
/* =========================================================================
   S01 オープニングパネル
   参照サイトのヒーローと同じ「構成」を、新規作図の装飾で組み立てたもの。
   （サンバースト / 散らした星 / 縦組み見出し / 吹き出し / 街のシルエット / 内枠）
   ※参照元のイラスト・手描き文字・街SVGは著作物のため一切使用していない。
   ========================================================================= */

.kb-visual { overflow: hidden; }          /* 装飾のはみ出しだけを切る。本文は必ず内側に収める */
/* 下部は街シルエット＋SWIPE導線の領域を空ける */
.kb-visual { padding-bottom: clamp(58px, 10.5dvh, 108px); }

/* =========================================================================
   二択の見せ方
   本文に埋もれさせず、対立する2枚のパネルを「or」で割って主役にする。
   支給キャッチ「安定or自由？」の "or" をそのまま装置として使っている。
   ========================================================================= */
.kb-choice {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(4px, 1.8vw, 13px);
}
.kb-choice_card {
  position: relative;
  flex: 1 1 0; min-width: 0;
  padding: clamp(9px, 1.7dvh, 17px) clamp(5px, 1.8vw, 12px);
  text-align: center;
}
/* 整列させない（DNA RULE 12）。手で置いたような傾き */
.kb-choice_card:first-of-type { rotate: -1.5deg; }
.kb-choice_card:last-of-type  { rotate:  1.5deg; }
.kb-choice_bg {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1;
}

.kb-choice_word {
  font-weight: 700; line-height: 1.08; letter-spacing: .06em;
  font-size: max(20px, min(calc(30 * var(--u)), 3.9dvh));
}
.kb-choice_word span {                    /* 選ぶ側だけマーカーで灯す */
  background: linear-gradient(var(--marker0) 56%, var(--marker) 56%);
}
.kb-choice_sub {
  margin-top: clamp(3px, .7dvh, 8px);
  font-size: max(10px, min(calc(11 * var(--u)), 1.55dvh));
  font-weight: 500; line-height: 1.6; letter-spacing: .02em;
}
.kb-choice_sub s {                        /* 諦めるものに赤い取り消し線 */
  font-weight: 700;
  text-decoration: line-through;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
}
.kb-choice_or {
  flex: none;
  font-weight: 700; font-style: italic;
  color: var(--accent);
  line-height: 1;
  font-size: max(17px, min(calc(26 * var(--u)), 3.3dvh));
}

.kb-choice_close {
  position: relative; z-index: 2;
  margin-top: clamp(10px, 2dvh, 22px);
  text-align: center;
  font-weight: 700; line-height: 1.6; letter-spacing: .08em;
  font-size: max(13px, min(calc(16 * var(--u)), 2.3dvh));
}

/* ---------- 内枠（参照の細い囲み罫） ---------- */
.kb-visual_frame {
  position: absolute; z-index: 3; pointer-events: none;
  inset: clamp(8px, 1.4dvh, 16px);
  border: 1px solid var(--line);
}

/* ---------- サンバースト ---------- */
.kb-visual_sun {
  position: absolute; z-index: 0; pointer-events: none;
  top: clamp(-96px, -10dvh, -40px);
  left: 50%; translate: -50% 0;
  width: 112%; aspect-ratio: 1;
  background: repeating-conic-gradient(from 6deg,
              var(--brand) 0deg 5deg, transparent 5deg 15deg);
  /* 中心は濃く、外へ向けて早めに消す＝参照の「短い放射」に寄せる */
  -webkit-mask-image: radial-gradient(circle, #000 12%, rgba(0,0,0,.55) 34%, transparent 52%);
          mask-image: radial-gradient(circle, #000 12%, rgba(0,0,0,.55) 34%, transparent 52%);
  opacity: .62;
}

/* ---------- 散らした星（リズム記号 C13） ---------- */
.kb-visual_stars { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.kb-visual_stars i {
  position: absolute; display: block; aspect-ratio: 1;
  background: var(--brand);
  clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.kb-visual_stars i:nth-child(1) { width: clamp(22px, 8.5vw, 42px); top:  8%; left:  5%; }
.kb-visual_stars i:nth-child(2) { width: clamp(13px, 4.6vw, 24px); top: 16%; left: 22%; background: var(--accent); }
.kb-visual_stars i:nth-child(3) { width: clamp(26px, 9.5vw, 48px); top:  6%; right: 6%; }
.kb-visual_stars i:nth-child(4) { width: clamp(12px, 4.2vw, 22px); top: 21%; right: 23%; }
.kb-visual_stars i:nth-child(5) { width: clamp(18px, 6.6vw, 34px); top: 46%; left:  3%; }
/* 6・7は本文に重ならないよう、二択パネルより下の帯へ逃がす */
.kb-visual_stars i:nth-child(6) { width: clamp(15px, 5.4vw, 28px); top: 81%; right: 9%; background: var(--accent); }
.kb-visual_stars i:nth-child(7) { width: clamp(20px, 7.2vw, 38px); top: 87%; left:  6%; }
.kb-visual_stars i:nth-child(8) { width: clamp(11px, 3.8vw, 20px); top: 36%; right: 11%; }

/* ---------- アーチ状の英字（参照の上部カーブ文字） ---------- */
.kb-visual_arc {
  position: absolute; z-index: 2;
  top: clamp(16px, 3dvh, 32px);
  left: 50%; translate: -50% 0;
  width: min(80%, 300px); height: auto;
}
.kb-visual_arc text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 15px; font-weight: 700; letter-spacing: .24em;
  fill: var(--accent);
}

/* ---------- 本体：吹き出し ＋ 縦組み見出し ---------- */
.kb-visual_main {
  position: relative; z-index: 2;
  display: flex; align-items: center;
  gap: clamp(8px, 2.4vw, 16px);
  margin-top: clamp(22px, 4.6dvh, 50px);      /* アーチ文字の下 */
  margin-bottom: clamp(10px, 1.8dvh, 20px);   /* この下に二択ブロックが入る */
}
.kb-visual_main .kb-balloon {
  flex: 1 1 auto; min-width: 0;
  padding: clamp(14px, 2.6dvh, 28px) clamp(12px, 3.6vw, 22px);
}
.kb-visual_main .kb-balloon .kb-p + .kb-p { margin-top: clamp(7px, 1.4dvh, 15px); }

/* 縦組みの見出し（参照の縦書き大文字に相当。書体はNoto Sans JPのまま） */
.kb-visual_title {
  flex: none;
  writing-mode: vertical-rl;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .06em;
  font-size: max(21px, min(calc(34 * var(--u)), 4.4dvh));
}
/* 縦書き版の蛍光マーカー。ベタ帯ではなく、文字の上を縦に引いた1本のストライプ */
.kb-visual_title span {
  background: linear-gradient(to left,
              var(--marker0) 0 24%, var(--marker) 24% 76%, var(--marker0) 76% 100%);
}

/* ---------- 支給イラスト（街の上に立たせる） ----------
   支給素材は無加工。トリミング・recolor・変形なし、縦横比は height + width:auto で保持。 */
.kb-visual_people {
  position: absolute; z-index: 2; pointer-events: none;
  left: 50%; translate: -50% 0;
  bottom: clamp(20px, 3.4dvh, 44px);
  width: auto; margin: 0;
}
/* 🔴 max-width に % を使うと、shrink-to-fit の親との循環で横だけ潰れる。
   高さだけ指定し、幅は auto に任せる（比率 1.2066 を厳密に維持）。 */
.kb-visual_people img {
  width: auto;
  max-width: none;
  height: clamp(74px, 12.5dvh, 150px);
}

/* ---------- 街のシルエット ---------- */
.kb-visual_town {
  position: absolute; z-index: 1; pointer-events: none;
  left: 0; right: 0; width: 100%;
  bottom: clamp(9px, 1.5dvh, 17px);
  height: clamp(34px, 6.5dvh, 72px);
  fill: var(--brand);
}

/* スワイプ導線は街の上に重ねる（#333 on #FF9902 = 5.9:1） */
.kb-visual .kb-scrollhint { z-index: 4; bottom: clamp(11px, 1.7dvh, 19px); color: var(--ink); opacity: .9; }