@charset "utf-8";
/* =========================================================================
   S01 — 支給カンプの再現
   琥珀のグラデ地＋放射／横罫のブランド行／手書きコピー／巨大な縦組みタイトル／
   点線区切りの紙カード／丸アイコン付きの二択カード＋ピル／筆ストロークの締め／
   クレーン付きの街と人物
   ========================================================================= */

.kb-hero {
  overflow: hidden;
  justify-content: flex-start;
  padding: clamp(2px, .6dvh, 10px) clamp(10px, 3.4vw, 26px)
           clamp(14px, 3dvh, 40px);
  background: linear-gradient(180deg, #FFF4DF 0%, #FFEFD3 46%, #FFE7BF 100%);
}

/* ---------- 右上から差す放射 ---------- */
.kb-hero_sun {
  position: absolute; z-index: 0; pointer-events: none;
  top: clamp(-150px, -16dvh, -70px); right: clamp(-130px, -26vw, -60px);
  width: 150%; aspect-ratio: 1;
  background: repeating-conic-gradient(from 190deg,
              rgba(255,196,60,.55) 0deg 4.2deg, rgba(255,196,60,0) 4.2deg 11deg);
  -webkit-mask-image: radial-gradient(circle, #000 18%, rgba(0,0,0,.5) 44%, transparent 64%);
          mask-image: radial-gradient(circle, #000 18%, rgba(0,0,0,.5) 44%, transparent 64%);
}

/* ---------- 散らした星 ---------- */
.kb-hero_stars { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.kb-hero_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-hero_stars i:nth-child(1) { width: clamp(14px, 4.4vw, 24px); top:  9%; left:  5%; }
.kb-hero_stars i:nth-child(2) { width: clamp(9px,  2.8vw, 15px); top: 17%; left: 25%; background: var(--accent); }
.kb-hero_stars i:nth-child(3) { width: clamp(11px, 3.4vw, 18px); top: 31%; right: 5%; }
.kb-hero_stars i:nth-child(4) { width: clamp(13px, 4vw,   22px); top: 70%; left:  2%; }
.kb-hero_stars i:nth-child(5) { width: clamp(10px, 3vw,   16px); top: 78%; right: 7%; background: var(--accent); }
.kb-hero_stars i:nth-child(6) { width: clamp(12px, 3.6vw, 20px); top: 86%; left:  9%; }

/* =========================================================================
   上部の帯（2026-09-18 支給カンプへの作り替え）
   カンプでは「雲 → 街とクレーン → 3人の作業員」が画面の上4割を占め、
   その下に紙カード・二択・締めが続く。旧版は人物と街が最下部にあったので、
   ブロックごと上へ移した。人物は支給の透過PNGを無加工で使う。
   ========================================================================= */
.kb-hero_top {
  position: relative; z-index: 2;
  /* セクションの padding-inline を打ち消して、街と雲を画面端まで伸ばす */
  width: auto;
  margin-inline: calc(-1 * clamp(10px, 3.4vw, 26px));
  height: clamp(150px, 29dvh, 290px);
  flex: none;
}
.kb-hero_clouds {
  position: absolute; z-index: 1; pointer-events: none;
  left: 0; right: 0; top: 2%;
  width: 100%; height: 62%;
}
/* 街は人物の後ろ。カンプでは人物の腰のあたりに稜線が来る */
.kb-hero_top .kb-hero_town {
  position: absolute; z-index: 2; pointer-events: none;
  left: 0; right: 0; bottom: 0; top: auto;
  /* カンプでは稜線が人物の腰より上に来て、人物の左右で街が見える。
     46%だと人物の後ろへ完全に隠れたので上げた。 */
  width: 100%; height: 58%;
  fill: var(--brand);
}
.kb-hero_top .kb-hero_crane { fill: none; stroke: var(--brand); stroke-width: 3; }
/* 3人の作業員（支給素材・トリミングも変形もしない。透明余白だけ落としてある） */
.kb-hero_top .kb-hero_people {
  position: absolute; z-index: 3; margin: 0; pointer-events: none;
  /* 🔴 右上の看板の下へ潜り込ませないため、右を空けて左寄りに置く（カンプも同じ）。
     箱を「幅86% × 高さ94%」で決めて、中身は contain で収める。
     こうすると高い画面では幅が、低い画面では高さが上限になり、
     どちらでも支給素材を歪めずに最大まで使える。 */
  left: 1%; bottom: 0; translate: none;
  width: 86%; height: 94%;
}
.kb-hero_top .kb-hero_people img {
  width: 100%; max-width: 100%; height: 100%;
  object-fit: contain; object-position: bottom center;
}

/* ---------- ブランド行（両側に横罫） ---------- */
.kb-hero_brand {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(6px, 2vw, 14px);
  margin-top: clamp(2px, .6dvh, 8px);
}
.kb-hero_brand::before,
.kb-hero_brand::after {
  content: ""; height: 1px; flex: 0 0 clamp(16px, 6vw, 46px);
  background: #3a2f22;
}
.kb-hero_brand span {
  font-size: max(9px, min(calc(11.5 * var(--u)), 1.5dvh));
  font-weight: 700; letter-spacing: .22em; color: #3a2f22;
}

/* ---------- 左上の手書きコピー ---------- */
.kb-hero_hand {
  position: relative; z-index: 3;      /* 絶対配置だと紙カードに重なるためフローへ */
  align-self: flex-start;
  margin: clamp(6px, 1.4dvh, 16px) 0 0 clamp(2px, 1.2vw, 10px);
  font-size: max(10px, min(calc(12 * var(--u)), 1.6dvh));
  font-weight: 700; line-height: 1.75; letter-spacing: .02em;
  color: #3a2f22;
}
.kb-hero_hand::after {
  content: ""; display: block; height: clamp(2px, .35dvh, 4px);
  width: 78%; margin-top: 2px; border-radius: 2px;
  background: var(--brand);
}

/* ---------- 巨大な縦組みタイトル ---------- */
/* 🔴 カンプでは看板がわずかに左へ傾いている（帯の左端の傾き dx/dy=-0.049 → -2.8°）。
   実測値は scratchpad/measure_fv.py。文字は縦組みのまま（向きは変えない）。 */
.kb-hero_title {
  position: absolute; z-index: 4;
  top: clamp(6px, 1.4dvh, 18px); right: clamp(2px, 1.4vw, 14px);
  writing-mode: vertical-rl;
  font-weight: 900; line-height: 1.02; letter-spacing: .01em;
  color: #1d1d1d;
  display: flex; align-items: flex-start;
  rotate: -2.8deg;
  transform-origin: 100% 0;
  filter: drop-shadow(0 3px 0 rgba(160, 100, 10, .18));
}
.kb-hero_title b {
  font-size: max(38px, min(calc(56 * var(--u)), 7.1dvh));
  font-weight: 900;
  color: #fff;
  -webkit-text-stroke: clamp(2px, .45dvh, 4px) #1d1d1d;
  paint-order: stroke fill;
}
.kb-hero_title span {
  font-size: max(21px, min(calc(30 * var(--u)), 3.9dvh));
  background: linear-gradient(to left,
              rgba(255,196,60,0) 0 6%, #FFC43C 6% 86%, rgba(255,196,60,0) 86%);
}

/* ---------- 紙カード（点線区切り） ---------- */
/* 🔴 2026-09-18 カンプ差し替え：紙は中央・水平・幅広。人物の足元に少し重ねる。
   旧版（左寄せ・幅72%・-1.8度・画鋲つき）はカンプに無いので廃止した。 */
.kb-hero_paper {
  position: relative; z-index: 3;
  width: min(94%, 400px);
  margin: clamp(-30px, -3.6dvh, -12px) auto 0;   /* 人物の裾へ少し重ねる */
  padding: clamp(7px, 1.4dvh, 15px) clamp(13px, 4vw, 24px);
  background: #FCFAF5;
  border-radius: clamp(10px, 3vw, 20px);
  box-shadow: 0 4px 14px rgba(120, 80, 20, .18);
}
/* 画鋲はカンプに無いので廃止（2026-09-18） */

.kb-hero_paper p {
  /* 🔴 下限は --fsMin（13px）。級数を上げたぶん行間を 1.8→1.7 に詰めて高さを戻す */
  /* 🔴 2026-09-18 ユーザー指示「このセクションが大きすぎる。フォント少し下げて枠も縮めて」。
     下限の13pxは守ったまま、幅基準の伸び(13.4u=13.9px)を 13u に、行間を 1.7→1.62 に。 */
  font-size: max(var(--fsMin), min(calc(13 * var(--u)), 1.88dvh));
  font-weight: 500; line-height: 1.62; letter-spacing: 0; color: var(--ink);
}
.kb-hero_paper p + p {
  margin-top: clamp(3px, .7dvh, 8px);
  padding-top: clamp(3px, .7dvh, 8px);
  border-top: 2px dashed rgba(58, 47, 34, .28);  /* カンプの点線区切り */
}

/* ---------- 二択カード ---------- */
.kb-hero_choice {
  position: relative; z-index: 2;
  display: flex; align-items: stretch; justify-content: center;
  gap: clamp(2px, 1.2vw, 10px);
  /* 🔴 2026-09-18 カンプ作り替えで看板は上部の帯に収まったため、
     「？」を避けるための大きな逃げ（旧 6.2dvh+19px）は不要になった。 */
  /* 🔴 丸アイコンは箱の上端から「直径の70%」外へ出る（.kb-hc_icon）。
     紙カードとの間隔がそれ未満だと、紙の角がアイコンに掛かる（ユーザー指摘）。
     直径 clamp(26px,7.4vw,42px) の70% ＝ 18〜29px を最低ラインとして足しておく。 */
  /* 🔴 2026-09-18(さらに夜) FV最下部の街の帯ぶん、末尾の余白だけ詰めた（アイコン逃げは維持）。 */
  margin-top: calc(clamp(26px, 7.4vw, 42px) * 0.70 + clamp(6px, 1dvh, 12px));
}
.kb-hc {
  flex: 1 1 0; min-width: 0;
  position: relative;
  /* 🔴 2026-09-18 ユーザー指示「箱を小さくしてもいい」。内側の余白を少し詰めた。 */
  padding: clamp(7px, 1.5dvh, 17px) clamp(6px, 2vw, 14px) clamp(5px, 1dvh, 10px);
  background: #FFFDF8;
  border: clamp(2.5px, .45dvh, 3.5px) solid var(--brand);
  border-radius: clamp(12px, 3.4vw, 22px);
  text-align: center;
  box-shadow: 0 clamp(3px,.6dvh,5px) 0 rgba(214,120,0,.22), 0 6px 14px rgba(180,110,20,.13);
}
.kb-hc--y { border-color: #FFC43C; box-shadow: 0 clamp(3px,.6dvh,5px) 0 rgba(212,160,30,.24), 0 6px 14px rgba(180,140,30,.13); }
.kb-hc_icon {
  /* 2026-09-17 指示: 「安定/自由」の文字に接触するため上げる。
     🔴 固定pxで上げると、直径が 28.9px→42px まで育つ大画面で足りない。
        直径の70%を箱の上へ出す＝残り30%だけ内側、と比率で持たせる。 */
  position: absolute; top: calc(clamp(26px, 7.4vw, 42px) * -0.70); left: 50%; translate: -50% 0;
  width: clamp(26px, 7.4vw, 42px); aspect-ratio: 1;
  border-radius: 50%;
  background: var(--brand);
  display: grid; place-items: center;
}
.kb-hc--y .kb-hc_icon { background: #FFC43C; }
.kb-hc_icon svg { width: 58%; height: 58%; fill: #fff; }
.kb-hc_word {
  font-size: max(18px, min(calc(29 * var(--u)), 3.8dvh));
  font-weight: 900; line-height: 1.1; letter-spacing: .02em; color: #1d1d1d;
}
.kb-hc_word span {
  position: relative;
  display: inline-block;
}
.kb-hc_word span::before {            /* 筆で一度引いたようなハイライト */
  content: ""; position: absolute; z-index: -1;
  left: -.12em; right: -.12em;
  top: 58%; bottom: 2%;
  background: #FFD34D;
  rotate: -1.2deg;
  border-radius: 2px 6px 3px 5px / 4px 3px 6px 2px;
}
.kb-hc_sub {
  margin-top: clamp(1px, .3dvh, 4px);
  font-size: max(var(--fsMin), min(calc(13 * var(--u)), 1.9dvh));
  font-weight: 700; color: #3a2f22;
  padding-bottom: clamp(4px, .9dvh, 10px);
  margin-inline: clamp(2px, 1.4vw, 10px);
  border-bottom: 2px dashed rgba(255, 153, 2, .5);
}
.kb-hc_pill {
  margin-top: clamp(3px, .8dvh, 9px);
  padding: clamp(3px, .6dvh, 7px) clamp(4px, 1.6vw, 12px);
  border-radius: 999px;
  background: var(--brand); color: #fff;
  border: clamp(1.5px, .3dvh, 2.5px) solid #D97706;   /* 縁取り（同系の濃いオレンジ） */
  box-shadow: 0 2px 0 rgba(180, 95, 0, .28);
  font-size: max(var(--fsMin), min(calc(13 * var(--u)), 1.9dvh));
  font-weight: 900; letter-spacing: 0; white-space: nowrap;
}
.kb-hc--y .kb-hc_pill { background: #FFC43C; color: #4a3608; border-color: #C9950E;
  box-shadow: 0 2px 0 rgba(160, 120, 10, .28); }

.kb-hero_or {
  flex: 0 0 auto; align-self: center;
  font-size: max(17px, min(calc(24 * var(--u)), 3.1dvh));
  font-weight: 900; font-style: italic; color: var(--brand);
  padding-inline: clamp(2px, 1.2vw, 8px);
  text-shadow: 0 0 6px rgba(255,255,255,.95), 0 0 12px rgba(255,255,255,.8);
}

/* ---------- 締め ---------- */
.kb-hero_close {
  position: relative; z-index: 2;
  /* 🔴 2026-09-18(さらに夜) 最下部に街の帯(.kb-hero_bottom)を追加した分、上限を詰めた。 */
  margin-top: clamp(3px, .8dvh, 9px);
  text-align: center;
  font-size: max(13px, min(calc(21 * var(--u)), 2.8dvh));
  font-weight: 900; line-height: 1.45; letter-spacing: .02em; color: #1d1d1d;
}
.kb-hero_close em {
  font-style: normal;
  font-weight: 900;
  background: linear-gradient(rgba(255,196,60,0) 66%, #FFD866 66% 97%, rgba(255,196,60,0) 97%);
}

/* ---------- 下部の手書きコピー ---------- */
.kb-hero_hand2 {
  position: absolute; z-index: 3;
  font-size: max(8.5px, min(calc(10.5 * var(--u)), 1.4dvh));
  font-weight: 700; line-height: 1.6; color: #b4600d;
}
.kb-hero_hand2--l { left: clamp(6px, 2.6vw, 22px); bottom: clamp(56px, 11dvh, 118px); }
.kb-hero_hand2--r { right: clamp(6px, 2.6vw, 22px); bottom: clamp(60px, 12dvh, 126px); text-align: right; }

/* 人物と街は .kb-hero_top（上部の帯）へ移設した（2026-09-18） */

/* ---------- FV最下部の街の帯（2026-09-18 さらに夜） ----------
   ユーザー指示「まえ言ってた街のイラストみたいの下に入れて」。
   上部の帯(.kb-hero_top .kb-hero_town)と同じ配色・同じ稜線パス。
   人物(illust_kangaeru.png)は位置が合わない指摘の後「入れなくていい」で撤回、
   街の帯だけ残しサイズも拡大（ユーザー指示「サイズも小さい」）。 */
.kb-hero_bottom {
  /* 🔴 2026-09-18(さらに夜) ユーザー指摘「密着してない」。
     フロー内(margin-bottomで打ち消す方式)だと swipe-section の
     justify-content:safe center と実機の動的ツールバーによる dvh 差で
     ズレが出る。position:absolute でセクション最下端に直接固定する。 */
  position: absolute; z-index: 2;
  left: 0; right: 0; bottom: 0;
  width: auto;
  height: clamp(40px, 8.6dvh, 86px);
}
.kb-hero_bottom .kb-hero_town {
  position: absolute; z-index: 1; pointer-events: none;
  left: 0; right: 0; bottom: 0; top: auto;
  width: 100%; height: 78%;
  fill: var(--brand);
}
.kb-hero_bottom .kb-hero_crane { fill: none; stroke: var(--brand); stroke-width: 3; }

.kb-hero .kb-scrollhint { display: none; }   /* カンプに無いので出さない */