@charset "utf-8";
/* =========================================================================
   S02 ABOUT US — 完成イメージの再現
   カラフルな吹き出しコラージュを背景に敷き、その上に
   赤い吹き出しのタイトル / 白い雲の本文 / 4色の働き方バブル / 周辺コピー を置く。
   ※この画面だけ多色を使う（支給された完成イメージに合わせるため）
   ========================================================================= */

.kb-about {
  overflow: hidden;
  /* 🔴 2026-09-18 ユーザー指摘「ABOUT US のタイトルがギリギリ（ヘッダーに掛かる）」。
     原因は justify-content:center。中身がセクションより 27〜29px 高かったため、
     はみ出しが上下へ均等に割れ、ラベルがセクション上端より 9〜10px 上（＝固定ヘッダーの下）
     へ押し出されて切れていた。上端揃えにして、ヘッダー下からの余白を明示的に確保する。
     計測は scratchpad/measure_s02_top.py（ヘッダー下端→ラベル上端の実測値）。 */
  justify-content: flex-start;
  /* 🔴 2026-09-19 クライアント指摘「携帯で見た時のみフレーム内側の上下余白が狭い」。
     一度 12-28px→16-32px に広げたが「あまり変わってない」との指摘で再度拡大。
     下は swipe-section 共通値(clamp(6px,2.2dvh,30px))に頼っていたため、
     ここだけ明示的に広げる。上端揃え(flex-start)なので、この分がそのまま
     締め文の下に増える。 */
  /* 🔴 2026-09-19 ユーザー指示「会社概要もっとひろげて」でさらに拡大。 */
  padding-top: clamp(24px, 6.5dvh, 56px);
  padding-inline: clamp(6px, 2vw, 16px);   /* 雲を大きく取るため本文より詰める */
  padding-bottom: clamp(24px, 7dvh, 58px);
}

/* 🔴 背景コラージュの地を実測すると rgb(252,178,80) のオレンジ。
   ここに既定色を置くとコントラスト比が
     ABOUT US の赤 #E00201 … 2.78:1（AA不足）
     社名の下線 #FF9902     … 1.18:1（ほぼ同化）
   となり視認できない。墨 #333 なら 6.99:1。
   下線は --brand 帯と同じ考え方で白へ逃がす。 */
/* 🔴 2026-09-18(後半) ユーザー指示：セクションタイトルは中央寄せ */
.kb-about > .kb-label { color: var(--ink); justify-content: center; }
.kb-about > .kb-label::before { background: var(--ink); }
.kb-about > .kb-h { text-align: center; }
.kb-about .kb-h .kb-y {
  background: linear-gradient(rgba(255,255,255,0) 56%, var(--white) 56%);
}
/* 🔴 この画面のマーカーだけ黄色。支給の完成形から実測した値
   （本文の帯 #F4DD59 / 締め文の帯 #FAE84E / 吹き出し内の帯 #FDEA4D）。
   吹き出しの黄色が画像に焼き込まれているので、CSSの帯もそこへ揃える。
   #333 とのコントラストは 10.1:1。 */
.kb-about {
  --marker: #FAE84E;
  --marker0: rgba(250,232,78,0);
}

/* ---------- 背景のコラージュ（2026-09-18 支給の完成形プレートへ差し替え） ----------
   🔴 ベールは掛けない。完成形の発色をそのまま出す。
   本文は白い雲の中、締め文は白帯の上、見出しは黄色の吹き出しの上に乗るので、
   地を薄めなくても可読性は確保できている（旧版の .18 ベールは廃止）。
   🔴 2026-09-18(後半) 一度「無地背景＋人物レイヤー分離」を試したが、
   分離用に使った支給素材が別生成のイラストで質感が承認済みの完成形と
   ずれる（ユーザー指摘「画像ずらしてるやん」）ため、元の1枚絵に戻した。
   本文とイラストの重なりは、この下の .kb-about_close 側の余白で解決している。 */
/* 🔴 2026-09-18(夜) 支給の新背景へ差し替え（人物なし・白い雲は焼き込み）。
   一度は雲を高さ132〜158%へ拡大して本文を収めていたが、
   ユーザー指摘「白の枠、渡した元画像はこんなに大きくなかった」で撤回し、拡大なしに戻した。
   🔴 2026-09-18(さらに夜) ユーザーが雲を一回り大きく描き直した新しい背景素材を支給。
   これに差し替え（拡大は掛けない＝画像高さ100%のまま）。
   雲の内接枠（画像比・実測値そのまま）＝ 上18.24% 下50.00% 左19.87% 右19.45%
   （実測: _scripts/measure_bg_cloud.py、新素材で再計測） */
/* 🔴 2026-09-19 ユーザー実機報告「ABOUT USの背景左右に約30pxの隙間」。
   原因は background-size: auto 100%（高さ基準）。Safariはツールバーの
   表示/非表示で dvh が動的に縮む。セクション高さが約698px未満になると
   （画像アスペクト941:1672から逆算）、高さ基準で計算した画像の幅が
   コンテナ幅を下回り、中央寄せの左右に隙間が生まれる。
   （実測: 高さ800pxでは画像幅450px＝隙間なし。580pxなら326px＝左右33pxの隙間。
   ヘッダーはこの高さ基準サイズ指定を使っていないため無事だった。）
   cover に変更し、幅・高さのどちらも必ず埋まるようにして隙間を物理的に防ぐ。 */
.kb-about_bg {
  position: absolute; inset: 0; z-index: 0;
  background: url("../images/illust/about_bg_v3.png") center top / cover no-repeat;
}

/* ---------- 人物イラスト（支給の透過素材・無加工） ----------
   背景に焼き込まず個別レイヤーにしてあるので、文章と重ならない位置へ寄せられる。 */
.kb-about_il { position: absolute; z-index: 1; margin: 0; pointer-events: none; }
.kb-about_il img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* 🔴 下の帯の高さをここで一本化する。締め文はこの値を使って必ず上へ逃げる
   （旧: 締め文の白帯が左下の男性を覆い隠していた。実測で 2250px² 重なり） */
.kb-about { --ilW: clamp(40px, 12vw, 64px); }
/* 🔴 2人組は「見出しの真横」から「雲の右肩」へ下げる（支給スクショの矢印の位置＝高さ約23%）。
   ただし top 指定だと画面サイズで高さが変わり本文の1行目に掛かる（実測で
   1440x900 のとき10px 食い込んだ）。本文枠の上端のすぐ上へ
   「下端」を固定することで、どの画面でも本文に掛からない。
   🔴 2026-09-18(さらに夜) ユーザー指摘「イラストが白い雲の前に重なっている」。
   雲を上へ動かした(top 24.4%→17%)ときにこちらを連動させていなかった回帰。
   雲の新しい上端(17%)のすぐ上（83%）へ引き上げる。 */
.kb-about_il--pair  { bottom: 84%; right: clamp(-14px, -2vw, -6px);
                      width: clamp(88px, 25vw, 140px); aspect-ratio: 1175/826; }
.kb-about_il--board { bottom: 0; left: clamp(-8px, -1.4vw, -3px);
                      width: var(--ilW); aspect-ratio: 926/1047; }
.kb-about_il--city  { bottom: clamp(2px, .5dvh, 8px); right: clamp(-6px, -1vw, -2px);
                      width: clamp(46px, 14vw, 78px); aspect-ratio: 1084/504; }

/* ---------- 左上：赤い吹き出しのタイトル ---------- */
.kb-about_title {
  position: absolute; z-index: 3;
  top: clamp(8px, 1.8dvh, 24px);
  left: 0;
  width: clamp(210px, 78%, 342px);
  padding: clamp(12px, 2.4dvh, 26px) clamp(14px, 4vw, 26px) clamp(16px, 3dvh, 32px);
  background: #E3242B;
  border-radius: clamp(18px, 5vw, 34px);
  color: #fff;
}
.kb-about_title::after {           /* 吹き出しの尻尾 */
  content: ""; position: absolute;
  left: clamp(26px, 9vw, 54px); bottom: clamp(-13px, -2dvh, -9px);
  border: solid transparent; border-width: clamp(9px, 1.6dvh, 15px) clamp(8px, 2.4vw, 14px) 0;
  border-top-color: #E3242B;
}
.kb-about_label {
  display: flex; align-items: center; gap: .5em;
  font-size: max(9px, min(calc(11 * var(--u)), 1.5dvh));
  font-weight: 700; letter-spacing: .22em;
}
.kb-about_label::before {
  content: ""; width: 1em; height: 1em; background: #fff; flex: none;
  clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.kb-about_name {
  margin-top: clamp(3px, .7dvh, 8px);
  font-size: max(16px, min(calc(23 * var(--u)), 3.1dvh));
  font-weight: 700; letter-spacing: 0; line-height: 1.25;
  white-space: nowrap;
  padding-bottom: clamp(3px, .6dvh, 7px);
  border-bottom: clamp(3px, .5dvh, 5px) solid #FFC400;   /* 完成イメージの黄色い下線 */
}
.kb-about_catch {
  margin-top: clamp(6px, 1.2dvh, 14px);
  font-size: max(12px, min(calc(15 * var(--u)), 2dvh));
  font-weight: 700; line-height: 1.5; letter-spacing: .04em;
}

/* ---------- 中央：白い雲の本文 ---------- */
/* 🔴 本文枠は「焼き込みの雲の中」へ絶対配置する（MERIT1/2 と同じ作り方）。
   2026-09-18(さらに夜) ユーザーが赤線で指定した左右座標をピクセル解析して反映。
   赤線入りスクショ(image-cache/4.png)を実測: 雲の左端から15.4%、右端マージン19.1%
   （雲自体の幅に対する比率）。SP390の実レンダリング(s02_390x740.png)で雲の外接
   bbox(x8〜379px / 390px幅)を実測し、その比率をセクション%へ変換。
   上下は不変（背景の内接枠の実測値）。 */
.kb-about_cloud {
  position: absolute; z-index: 2;
  /* 🔴 2026-09-18(さらに夜) ユーザー指示「テキストもっと下」→その後「もう少しだけ上に」で微調整。 */
  top: 18%; bottom: 48.5%;
  left: 16.7%; right: 21%;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0;
}
.kb-about_cloud .kb-p + .kb-p { margin-top: clamp(4px, 1dvh, 10px); }
/* 🔴 390x740以下は原文の文字量に対して雲が縦に足りないので、行間をさらに詰める。 */
@media (max-height: 780px) {
  .kb-about_cloud .kb-p { line-height: 1.62; }
  .kb-about_cloud .kb-p + .kb-p { margin-top: clamp(2px, .6dvh, 6px); }
}

/* 雲の中は行幅が狭い。字間0.2emのままだと不自然な折り返しになるので詰める */
.kb-about_cloud .kb-p,
.kb-about_cloud .kb-p--sm {
  font-size: max(var(--fsMin), min(calc(13.2 * var(--u)), 1.95dvh));
  letter-spacing: .02em;
  line-height: 1.7;
  /* 🔴 2026-09-18 ユーザー指示で中央揃えへ変更。
     旧: text-align:justify（禁則で行末が微妙にガタつく）。
     MERITの吹き出しと同じ理由（中央のほうが雲の丸みに馴染む）で統一した。 */
  text-align: center;
}
/* 🔴 2026-09-18(さらに夜) ユーザー指摘「い・・・?」だけが孤立して改行されるのを回避。
   末尾の一節をひとまとまりにして、割れる位置をその手前へ強制的にずらす。 */
.kb-nowrap { white-space: nowrap; }

/* ---------- 周辺の小さなコピー ---------- */
.kb-about_side {
  position: absolute; z-index: 1;
  font-weight: 700; line-height: 1.5; letter-spacing: .04em;
  font-size: max(8px, min(calc(10 * var(--u)), 1.35dvh));
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,.18);
  pointer-events: none;
}
.kb-about_side--tr { top: clamp(10px, 2dvh, 26px);  right: clamp(14px, 5vw, 34px); color: #333; text-shadow: none; }
.kb-about_side--mr { top: clamp(112px, 22dvh, 230px); right: clamp(8px, 3vw, 22px); letter-spacing: .16em; }
.kb-about_side--ml { top: clamp(212px, 42dvh, 430px); left: 2px; writing-mode: horizontal-tb; }
.kb-about_side--br { top: clamp(256px, 51dvh, 530px); right: 2px; }
.kb-about_side--bl { bottom: clamp(30px, 7dvh, 78px); left: clamp(40px, 13vw, 90px); color: #333; text-shadow: none; }
.kb-about_side--bc { bottom: clamp(34px, 8dvh, 88px); right: clamp(30px, 9vw, 66px); }

/* 余白が狭いときは周辺コピーを間引いて本文を優先する */
@media (max-height: 640px) {
  .kb-about_side--mr, .kb-about_side--bl { display: none; }
}

/* =========================================================================
   4つの働き方 — 2026-09-18 に支給素材（吹き出しPNG 4点）へ差し替え。
   文字は画像に入っているのでCSSでは組まない。旧版の「テキスト散らし」は廃止。

   🔴 配置の出どころ
   支給の完成形(941x1672) と 背景プレート(941x1672) は同寸で1:1に重なる。
   4枚の位置は完成形に対するテンプレートマッチ（アルファマスク付き形状マッチ、
   一致度 0.939〜0.960）で確定した。素材の「不透明部」の当たり位置を、
   透明余白を含む素材キャンバス全体の矩形へ戻して % 化してある。

     素材(不透明部 → 完成形)        倍率
     しっかり  1296x962 → 486x361   0.375
     副業      1107x805 → 415x302   0.375
     週1日     1222x842 → 434x299   0.355
     いつか独立 1223x854 → 422x295  0.345

   グループ枠 = 4枚の見えている部分の外接矩形 941x618（完成形の y754-1372）。
   各 % はこの枠に対する値。左右は枠の外へ食み出す（完成形どおり）。
   ========================================================================= */
.kb-bub4 {
  /* 🔴 本文枠を焼き込みの雲へ絶対配置したので、こちらも絶対配置に揃える。
     % の margin は「幅」基準で高さに使えないため、top を % で直接指定する。 */
  position: absolute; z-index: 2;
  /* 🔴 2026-09-18(さらに夜) ユーザー指示「4つはもっと拡大して雲に被せる。
     4つが前面に来るように」。z-index は既に kb-about_cloud と同値2だが
     DOM順で後にあるため元々前面（変更不要）。top を上げて雲の下端(49.5%)へ
     被せ、width も一段階拡大する。 */
  top: 51%; left: 50%; translate: -50% 0;
  /* 幅は「高さ」で頭打ちにする。低い画面で1画面に収めるための要。
     1.5227 = 941/618（グループ枠の縦横比）
     🔴 単純な dvh 比例だと 390x600 で 6px あふれ、900px 級では逆に痩せて
     左右の食み出しが消える。定数を引いた傾きにして、低い画面だけ強く抑える。 */
  width: min(98%, calc(1.5227 * clamp(140px, calc(34dvh - 20px), 340px)));
  aspect-ratio: 941 / 618;
  margin: 0;
}
/* 🔴 このグループ自体はフェードさせない（.kb-inview の既定を打ち消す）。
   出現は中の4枚が1枚ずつ担当する → anim.css */
.kb-bub4.kb-inview { opacity: 1; transform: none; }

.kb-bub {
  position: absolute; margin: 0;
  pointer-events: none;
}
.kb-bub img {
  display: block; width: 100%; height: auto;   /* 縦横比は維持・トリミングしない */
}
/* 並び順＝重ね順。手前2枚が後ろ2枚の裾に重なるのが完成形の形 */
.kb-bub--shikkari  { left: -3.59%;  top: -4.55%;  width: 57.70%; z-index: 1; }
.kb-bub--fukugyo   { left: 49.01%;  top: -4.55%;  width: 57.69%; z-index: 1; }
.kb-bub--shu1      { left:  2.06%;  top: 43.69%;  width: 54.65%; z-index: 2; }
.kb-bub--dokuritsu { left: 49.42%;  top: 41.04%;  width: 53.10%; z-index: 2; }

/* 締めの段落：雲の外・散らしの下。読めるように白を薄く敷く */
.kb-about_close {
  /* 🔴 こちらも絶対配置。下端からの距離で置くことで、
     左下・右下のイラスト（別レイヤー）との隙間を数値で管理できる。 */
  position: absolute; z-index: 2;
  left: 50%; translate: -50% 0;
  /* 🔴 吹き出しを大きくするぶん、締め文は下げる。
     幅を絞って左右のイラストの「内側」に収めるので、同じ高さ帯に来ても重ならない。 */
  /* 🔴 左右のイラストの「内側」に収まる幅にして、同じ高さ帯でも重ならないようにする。
     実測: SP390 で左のイラストは x-8〜39、右は x331〜386。締め文は x62〜328。 */
  /* 🔴 2026-09-18(さらに夜) ユーザー指示「このテキストもっと上に移動できる」。 */
  bottom: clamp(18px, 3.6dvh, 40px);
  width: min(68%, 300px);
  text-align: center;
}
.kb-about_close .kb-p {
  display: inline;
  font-size: max(var(--fsMin), min(calc(13.2 * var(--u)), 1.95dvh));
  letter-spacing: .02em; line-height: 1.9;
  background: rgba(255,255,255,.82);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: .12em .3em;
}

/* =========================================================================
   支給プレート（背景に吹き出しとイラストが入っている画像）を使う画面
   ========================================================================= */
.kb-plate {
  overflow: hidden;
  justify-content: flex-start;              /* 見出しは上端へ（中央寄せだと絵に被る） */
  padding-inline: clamp(10px, 3.5vw, 26px);
  padding-top: clamp(8px, 1.8dvh, 22px);
}
/* 🔴 2026-09-19 ユーザー指摘「MERIT1〜3すべて右端に線が入ってる」を調査。
   Playwrightヘッドレスのスクリーンショットでは x=382(390幅中)に一貫した
   暗い1px線を検出。ただし .kb-plate_bg を display:none にしても消えず、
   実Chrome(claude-in-chrome)の拡大鏡では再現しなかった＝ヘッドレス撮影
   固有のアーティファクトと判断し、CSS変更は行わない（実機での再現待ち）。 */
.kb-plate_bg {
  position: absolute; inset: 0; z-index: 0;
  background: url("../images/illust/merit2_bg_20260924.png") center / cover no-repeat;
}
/* 見出しまわりは背景のオレンジに乗るので #333 のまま（白は 2.1:1 で不可） */
.kb-plate .kb-label,
.kb-plate .kb-merit_head { position: relative; z-index: 2; }

/* 本文の器。背景プレートの吹き出しを完全に覆うサイズで重ねる */
/* 背景プレートに描かれた吹き出しの内側へ本文を流し込む。
   自前の吹き出しを重ねると二重になるので描かない。 */
.kb-plate_cloud {
  position: absolute; z-index: 2;
  left: 9%; right: 9%;
  top: 38%; bottom: 25%;
  display: flex; flex-direction: column; justify-content: center;
}
/* 🔴 判定はビューポート比ではなく「高さ」で行う。
   中央カラムは常に幅480px以下なので、ビューポート比では実体と合わない。
   高さ700px以上あればプレートの吹き出しが十分な縦幅を持つ。 */
@media (min-height: 700px) {
  .kb-plate_cloud { top: 36%; bottom: 22%; }
  /* 🔴 MERIT2 の雲は実測で 上39.7%〜下29.7%。旧値(36/22)は上下とも雲の外へ
     はみ出していて、本文がオレンジ地に乗っていた（実測 390x740 で2827px）。 */
  .kb-plate--m2 .kb-plate_cloud { top: 37.4%; bottom: 26.2%; }
  /* 🔴 MERIT2 の本文枠。雲は3枚ともほぼ同じ幅なので、3セクションで本文の
     実寸幅が揃うように左右を持つ（9%のままだと雲の縁まで 5px しか無かった）。 */
  .kb-plate--m2 .kb-plate_cloud { left: 15%; right: 15%; }
}
@media (max-height: 699.98px) {
  .kb-plate_cloud {
    position: relative; inset: auto;
    width: min(100%, 460px); margin: clamp(8px,1.6dvh,18px) auto 0;
    padding: clamp(12px, 2.6dvh, 28px) clamp(20px, 6vw, 34px);
    background: rgba(255,255,255,.94);
    border: 1px solid #2b2b2b;
    border-radius: clamp(14px, 4vw, 26px);
  }
}
/* 🔴 MERIT1-3 共通の「吹き出しの中の呼吸」（2026-09-18 ユーザー指示）
   詰まって見える原因は行間と段落間。文章量は変えられないので、
   ①級数をわずかに落として ②行間 1.95→2.15 ③段落間を約1.6倍 に配分する。
   3画面で見た目のルールがばらつかないよう、ここ1か所で決める。
   （MERIT3 だけは雲が一回り小さいので下の個別ブロックで級数だけ微調整） */
.kb-plate_cloud .kb-p {
  /* 🔴 2026-09-18(夜) ユーザー指示「枠の中の空白が目立つ。文字を大きく・太さを変えて
     見栄え良く・リッチに」。実測で s03 は枠の28%が余白、本文は枠幅の72%しか
     使えていなかった（scratchpad/verify_merit.py）。
     対応は3点:
       ① 級数を 13.4u → 15.0u（上限 15.5 → 17.5px）に上げる
       ② 行間 1.95 → 1.82 に締めて、増えた高さを吸収する
       ③ 最後の強調文だけ級数と太さを上げて「締め」を作る（下の .kb-p--em）
     🔴 2026-09-18(さらに夜) ユーザー指摘「MERITのフォントサイズが小さい気がする」で再確認したところ、
     上の①がコードへ反映されていなかった（13.4u/15.5pxのまま）。
     さらにユーザー指示「MERITは全部ABOUT USのフォントサイズとそろえよう」で、
     ABOUT US(.kb-about_cloud .kb-p)と全く同じ式へ統一する。 */
  font-size: max(var(--fsMin), min(calc(13.2 * var(--u)), 1.95dvh));
  letter-spacing: .01em;
  line-height: 1.95;
  /* 🔴 改行位置の品質。幅を詰めても、折り返しが下手だと詰まって見える。
     実例：「週5日、しっかり働くのもい / い。」と最終行に1文字だけ落ちていた。
     auto-phrase … 日本語を文節で折る（「働き / 方」のような割れを防ぐ）
     strict      … 禁則処理を厳しく
     pretty      … 最終行に1〜2文字だけ残るのを避ける
     いずれも非対応ブラウザでは既定の折り返しに戻るだけで、崩れない。 */
  word-break: auto-phrase;
  line-break: strict;
  text-wrap: pretty;
  overflow-wrap: normal;
  /* 🔴 もこもこ（円形の吹き出し）の中は中央揃えの方が形に馴染む。
     左寄せだと右端が雲の丸みに沿わず、余白が片側に溜まって見える。
     ※ text-wrap: balance は併用しない。文節優先の折り返しを上書きして
        「週 / 5日」のような割れ方を作るのを実測で確認済み。 */
  text-align: center;
}
.kb-plate_cloud .kb-p + .kb-p { margin-top: clamp(9px, 2.1dvh, 22px); }
/* 最後の強調文は前後に一段広い余白を持たせて、締めとして独立させる */
/* 🔴 締めの1文だけ一段大きく・太くして、面（座布団）と合わせて視線の着地点にする。
   Noto Sans JP は 400/500/700/800/900 を読み込み済みなので 700 が使える。 */
.kb-plate_cloud .kb-p--em {
  margin-top: clamp(13px, 3dvh, 30px);
  font-weight: 700;
}
.kb-plate_cloud .kb-p--em .kb-zab { font-weight: 700; }
.kb-plate_cloud .kb-p--em + .kb-p { margin-top: clamp(13px, 3dvh, 30px); }

/* 🔴 2026-09-18(さらに夜) MERIT2はフォント拡大(ABOUT USに統一)で締め文が雲から
   はみ出した（1440x900で雲の外504px）。雲の外へ出す案はユーザー指示で撤回、
   代わりに行間・段落間だけを詰めて雲の中に収める（MERIT3と同じやり方）。 */
.kb-plate--m2 .kb-plate_cloud .kb-p { line-height: 1.62; }
.kb-plate--m2 .kb-plate_cloud .kb-p + .kb-p { margin-top: clamp(5px, 1.1dvh, 12px); }
.kb-plate--m2 .kb-plate_cloud .kb-p--em { margin-top: clamp(7px, 1.6dvh, 16px); }
.kb-plate--m2 .kb-plate_cloud .kb-p--em + .kb-p { margin-top: clamp(7px, 1.6dvh, 16px); }

/* 🔴 低い画面（≤699px）は級数を下げられない（13px下限）ので、
   行間と段落間だけを詰めて雲の中に収める。字面は13pxのまま。 */
@media (max-height: 699.98px) {
  .kb-plate_cloud .kb-p { line-height: 1.66; }
  .kb-plate_cloud .kb-p + .kb-p { margin-top: clamp(6px, 1.4dvh, 12px); }
  .kb-plate_cloud .kb-p--em { margin-top: clamp(8px, 1.9dvh, 16px); }
  .kb-plate_cloud .kb-p--em + .kb-p { margin-top: clamp(8px, 1.9dvh, 16px); }
}


/* 🔴 背景レイヤー(.kb-about_bg)は position:absolute; z-index:0 なので、
   z-index を持たない静的要素より前面に描かれる。
   フェード中だけ opacity<1 で合成が持ち上がり「一瞬見えて消える」症状になる。
   見出し・ラベルにも重ね順を与えて前面に固定する。 */
.kb-about > .kb-label,
.kb-about > h1,
.kb-about > h2 { position: relative; z-index: 2; }

/* =========================================================================
   MERIT1 — プレート画像が無いので、基準(MERIT2)と同じ寸法体系のまま
   地色と白い雲をこちらで描く。地色は merit2_bg.png から実測した #FE9601。
   ========================================================================= */
.kb-plate_bg--draw {
  background-image:
    radial-gradient(rgba(255,255,255,.16) 1.4px, transparent 1.5px),
    radial-gradient(circle at 88% 6%, rgba(255,255,255,.14), transparent 42%),
    linear-gradient(180deg, #FF9D0C 0%, #FE9601 52%, #F58D00 100%);
  background-size: 15px 15px, 100% 100%, 100% 100%;
  background-position: 0 0, 0 0, 0 0;
  background-repeat: repeat, no-repeat, no-repeat;
}
/* 本文ボックス(.kb-plate_cloud)を包む白い雲。基準プレートの雲と同じ見え方にする */
.kb-plate_cloudbg {
  position: absolute; z-index: 1; pointer-events: none;
  left: 2%; right: 2%;
  top: 30%; bottom: 17%;
  width: auto; height: auto;
  filter: drop-shadow(0 3px 5px rgba(120, 70, 0, .22));
}
@media (max-height: 699.98px) {
  .kb-plate_cloudbg { display: none; }   /* 白地フォールバック時は不要 */
}

/* MERIT1 のイラストは、基準(MERIT2)と同じく雲の上端に跨がらせる */
.kb-plate .kb-msg_il { position: absolute; z-index: 3; margin: 0; pointer-events: none; }
.kb-plate .kb-msg_il img { width: auto; max-width: none; height: clamp(72px, 15.5dvh, 176px); }
.kb-plate .kb-msg_il--tr { top: 15%; right: 3%; bottom: auto; left: auto; }
.kb-plate .kb-msg_il--bl { top: 16%; left: 2%;  bottom: auto; right: auto; }

/* =========================================================================
   MERIT3 の周辺イラスト — カンプの配置に合わせて個別に置く
   （プレート画像だと雲の縁で切れるため、切り出し素材を自前で配置）
   ========================================================================= */
/* 🔴 帯の実測（セクション比）
   ラベル 2-5% / 見出し 5-17% / 雲(白) 22-25% → 71-73% / 本文枠 27-67%
   空きは ①下帯 71-100% ②本文の左右 0-12% と 88-100% の細帯 の2つだけ。
   本文に一切かぶらせないため、この2つの外には出さない。 */
.kb-topil { position: absolute; z-index: 3; margin: 0; pointer-events: none; }
.kb-topil img { width: auto; max-width: none; height: auto; }

/* 指定位置（スクショの赤丸をピクセル検出した中心座標・セクション基準）に
   中心を合わせる。雲の輪郭に跨がらせ、外へ食み出させる。
   サイズは s06/s07 のイラスト（セクション高の 17.2%）に合わせた。
   セクション高 = 100dvh - headerH なので 17.2% ≒ 16dvh。 */
.kb-topil { translate: -50% -50%; }

/* 絵筆：雲の左肩 */
.kb-topil--brush { left: 8%; top: 27%; rotate: -8deg; }
.kb-topil--brush img { height: clamp(52px, 12dvh, 130px); }

/* 緑服の男性：雲の右肩 */
.kb-topil--thinker { left: 86%; top: 22%; }
.kb-topil--thinker img { height: clamp(72px, 16dvh, 175px); }

/* 🔴 2026-09-18(後半) 下帯の死に余白（セクション高の約29%が空だった）。
   MERIT1/2 は下帯に人物が大きく入って画面が締まっているのに、MERIT3 だけ
   小さいイラストが2つ浮いている状態だったので、下の2点を大きくして帯を埋める。
   雲の下端は約71-73%。中心を 80〜82% に置き、上端を雲へ少し掛ける。 */
/* 投稿カード：雲の左下 */
.kb-topil--card { left: 19%; top: 81%; rotate: -3deg; }
.kb-topil--card img { height: clamp(96px, 21.5dvh, 232px); }

/* 眼鏡の男性：右下 */
.kb-topil--boss { left: 79%; top: 80%; }
.kb-topil--boss img { height: clamp(104px, 23.5dvh, 252px); }

/* 🔴 低い画面ほど雲が下へ伸びるので、下帯が薄くなる。
   大きくした2点がそのままだと本文へ食い込む（実測 390x600 で65px被覆）。
   短い画面だけ下げて小さくする。 */
@media (max-height: 740.98px) {
  .kb-topil--card { top: 86%; }
  .kb-topil--card img { height: clamp(78px, 16.5dvh, 150px); }
  .kb-topil--boss { top: 85%; }
  .kb-topil--boss img { height: clamp(84px, 18dvh, 165px); }
}


/* =========================================================================
   MERIT1 専用プレート（支給画像 merit1_bg.png）
   雲もイラストも画像に入っているので、CSSで描いた地と別置きのイラストは使わない。
   雲の位置が MERIT2 と違う（実測 上23.7% 下31.5% 左12.4% 右10.4%）ため、
   本文枠の％も MERIT1 だけ別に持つ。
   ※ 高さ699px以下では雲を使わず白いカードへ落ちる指定があるので、そこは触らない。
   ========================================================================= */
.kb-plate_bg--m1 {
  background: url("../images/illust/merit1_bg.png") center / cover no-repeat;
}
/* 🔴 高さ699px以下では雲を使わず position:relative の白カードへ落ちる指定があるため、
   ここで top/left を無条件に書くと、そのカードがズレて表示される。
   必ず「雲を使う高さ」だけに閉じ込める。 */
@media (min-height: 700px) {
  /* 実測で合わせた値。描画された雲の中心 y と本文枠の中心 y を一致させている */
  .kb-plate--m1 .kb-plate_cloud { top: 27.5%; bottom: 35.5%; left: 18%; right: 16%; }
}

/* -------------------------------------------------------------------------
   高さ699px以下：本来は「白いカード」へ落ちる指定だが、
   画像プレート(MERIT1/MERIT2)には雲が焼き込まれているため、
   白カードが雲の上に二重に乗ってしまう。画像の雲をそのまま本文の受け皿にする。
   ※ 雲を持たない MERIT3 は従来どおり白カードのまま。
   雲の位置は cover の切り取り後を実測した値（360x640 と 375x667 でほぼ同値）。
   ------------------------------------------------------------------------- */
@media (max-height: 699.98px) {
  .kb-plate--m1 .kb-plate_cloud,
  .kb-plate--m2 .kb-plate_cloud {
    position: absolute; inset: auto;
    width: auto; margin: 0;
    background: none; border: 0; border-radius: 0;
    padding: 0 clamp(6px, 2vw, 14px);
  }
  /* 低い画面は行数が増えて縦が先に詰まるので、左右は高い画面より控えめに寄せる */
  .kb-plate--m1 .kb-plate_cloud { top: 27%; bottom: 36%; left: 17%; right: 15%; }
  .kb-plate--m2 .kb-plate_cloud { top: 38%; bottom: 26%; left: 15%; right: 13%; }
}


/* =========================================================================
   MERIT3 専用プレート（支給画像 merit3_bg.png）
   雲の実測: 上26.9% 下31.3% 左12.5% 右12.6%（下端に吹き出しの尻尾があるので本文は少し上寄せ）
   ========================================================================= */
.kb-plate_bg--m3 {
  background: url("../images/illust/merit3_bg.png") center / cover no-repeat;
}
/* 🔴この雲は左下の筆・右下の人物が内側に食い込んでいる。
   ただし食い込んでいるのは淡い筆と人物なので、その上に黒文字が乗っても読める。
   白い所だけに収めようとすると枠が 229px 幅まで痩せて、無理やり詰めた見た目になる。
   なので「雲の内側であること」だけを条件にし、白かどうかは問わない。 */
/* MERIT3 は本文が4段落あり、雲も一回り小さい。
   🔴 2026-09-18(後半) 13px下限を満たすため、旧「級数だけ落とす」方式を廃止。
   級数は MERIT1/2 と同じにして、行間と段落間だけ MERIT3 用に詰める。
   （検証: scratchpad/cloud_fit.py — 4つの雲×7画面で枠からのはみ出しを測る） */
.kb-plate--m3 .kb-plate_cloud .kb-p {
  letter-spacing: 0;
  line-height: 1.74;
}
.kb-plate--m3 .kb-plate_cloud .kb-p + .kb-p { margin-top: clamp(5px, 1.2dvh, 13px); }
.kb-plate--m3 .kb-plate_cloud .kb-p--em { margin-top: clamp(7px, 1.7dvh, 18px); }
.kb-plate--m3 .kb-plate_cloud .kb-p--em + .kb-p { margin-top: clamp(7px, 1.7dvh, 18px); }

@media (min-height: 700px) {
  /* 🔴 中央揃えにすると短い行の右端が外へ出るので、左寄せ時より縦位置がシビア。
     実測で被覆0・地落ち0になるのは top30/bottom32（scratchpad/fix_m3_center.py）。 */
  /* 🔴 13px化で4段落ぶんの高さが増えたため、枠を上下に 1.5〜1.5% 広げた。
     雲の内側（実測 22-25% → 71-73%）の内側に収まる範囲。 */
  /* 🔴 2026-09-18(さらに夜) ユーザーが赤線で指定(image-cache/12.png)。雲の左端から
     13.97%の位置まで左を詰める（実測: s05_390x740.pngの雲bbox x8〜378）。
     右は指示により変更しない。 */
  .kb-plate--m3 .kb-plate_cloud { top: 29.5%; bottom: 31%; left: 15.3%; right: 17%; }
}
@media (max-height: 699.98px) {
  .kb-plate--m3 .kb-plate_cloud {
    position: absolute; inset: auto;
    width: auto; margin: 0;
    background: none; border: 0; border-radius: 0;
    padding: 0;
    /* 🔴 左右を詰めると行数が増え、1行目が上がって緑服の男性(thinker)に
       390x667 で 37px 食い込んだ。枠ごと 2% 下げて逃がす（実測で被覆0）。
       検証: scratchpad/fix_m3_667.py — top/bottom/left/right の総当たり */
    top: 29.5%; bottom: 31%; left: 17%; right: 17%;
  }
  /* 🔴 MERIT3 は4段落あるぶん低い画面で最後に溢れる。
     共通の短画面ルール(.kb-plate_cloud .kb-p)より詳細度が高いので、ここで個別に詰める。 */
  .kb-plate--m3 .kb-plate_cloud .kb-p { line-height: 1.58; }
  /* 段落間もここだけ詰める（4段落ぶんの積み上がりが効く） */
  .kb-plate--m3 .kb-plate_cloud .kb-p + .kb-p { margin-top: clamp(4px, .9dvh, 9px); }
  .kb-plate--m3 .kb-plate_cloud .kb-p--em { margin-top: clamp(6px, 1.3dvh, 12px); }
  .kb-plate--m3 .kb-plate_cloud .kb-p--em + .kb-p { margin-top: clamp(6px, 1.3dvh, 12px); }
  /* 絵筆は本文の1行目に寄るので、短い画面だけ外へ逃がす */
  .kb-topil--brush { left: 6%; top: 24%; }
}
/* 640px以下は雲に対して文字量が最も厳しい。行間だけさらに詰める（級数は13pxのまま） */
@media (max-height: 640px) {
  .kb-plate--m3 .kb-plate_cloud .kb-p { line-height: 1.48; }
  .kb-topil--thinker { left: 88%; top: 20%; }
  .kb-topil--boss { left: 81%; top: 86%; }
}


/* =========================================================================
   🔴 低い画面の最終調整（ファイル末尾に置くこと）
   CSSは「同じ詳細度なら後に書いたほうが勝つ」。.kb-bub4 の本体指定より前に
   書くと効かない（実際に2回ハマった）。高さ由来の微調整はここへまとめる。
   ========================================================================= */
@media (max-height: 640px) {
  /* 390x600級は下の余白が足りず、吹き出し群と締め文が5px重なる（実測）。ここだけ縮める */
  .kb-bub4 { width: min(96%, calc(1.5227 * clamp(120px, calc(26dvh - 20px), 312px))); }
}