/*
  古河気合筋肉「社会の筋肉だ。」LP
  - 全クラス .kkm- プレフィックス（既存テーマとの衝突回避）
  - 対応レンジ: 320px〜2560pxで破綻なし
  - レイアウト方針:
      * PC（1024px以上）: カンプ基準幅 1440px。--kkm-px は「デザイン上の1px」で、
        1440px未満のビューポートでは等比縮小、1440px以上では1pxに固定される。
        例: width: calc(843 * var(--kkm-px)) = カンプ上843pxの要素
      * 1440px以上はコンテンツ(max-width: 1440px)を中央寄せし、背景のみfull-bleedで伸ばす
      * SP（1023px以下）: カンプ基準幅 390px（design/spec-sp.md）。--kkm-px-sp は「SPデザイン上の1px」で、
        562px相当（×1.44）まで等比拡大して停止し、コンテンツ列（390×倍率）は中央寄せ・
        背景はfull-bleed（PCの1440px以上と同じ思想）。320pxでは約0.82倍に縮小
*/

.kkm-lp {
  /* ==== tokens（Figma実測値: design/spec.md 2-3節） ==== */
  --kkm-color-red: #99141a; /* 基調の深い赤 */
  --kkm-color-red-bright: #c11920; /* 明るい赤（バッジ等のアクセント） */
  --kkm-color-black: #000;
  --kkm-color-white: #fff;
  --kkm-color-ink: #292929;

  /* 和文はNoto Sans JP（Figma上のCJKフォールバック実態）、欧文はRoboto */
  --kkm-font-sans:
    "Roboto", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    meiryo, sans-serif;
  /* SCROLL等の英字UI（ネガティブトラッキング指定はspec準拠で各所に記述） */
  --kkm-font-ui: "Work Sans", var(--kkm-font-sans);

  /* 幅系 */
  --kkm-content-max: 1440px; /* カンプ基準幅 */
  --kkm-px: min(
    1px,
    calc(100vw / 1440)
  ); /* デザイン1px（1440未満で等比縮小） */
  /* MV専用の「デザイン1px」。--kkm-pxと違い上限(min 1px)を持たず、常に 100vw/1440。
     これでMVは1440超でも 1440:840 の比率を保ったまま全幅拡大する（full-bleedヒーロー）。
     ≤1440では --kkm-px と一致するため従来の見え方は不変。SP(≤1023)はMVを別途上書き。 */
  --kkm-px-mv: calc(100vw / 1440);

  font-family: var(--kkm-font-sans);
  font-weight: 400;
  color: var(--kkm-color-white);
  background-color: var(--kkm-color-black);
  line-height: 1.6; /* spec: 16px/25.6px */
  font-size: 16px;
  overflow-x: clip;
}

/* コンテンツ幅ユーティリティ: 1440px中央寄せ */
.kkm-container {
  max-width: var(--kkm-content-max);
  margin-inline: auto;
}

/* SP専用改行（spec-sp.md 4節の改行位置を再現。PC=1024px以上では無効） */
.kkm-br-sp {
  display: none;
}

/* ==== SPスケール基盤（1023px以下: 390pxカンプの等比スケール。spec-sp.md） ==== */
@media (max-width: 1023px) {
  .kkm-lp {
    /* SPデザイン1px。390px超は562px相当(×1.44)で拡大停止、320pxで約0.82倍 */
    --kkm-px-sp: min(1.44px, calc(100vw / 390));
    /* SPコンテンツ列幅（中央寄せ。背景はセクション側でfull-bleed） */
    --kkm-content-max-sp: calc(390 * var(--kkm-px-sp));
  }

  .kkm-container {
    max-width: var(--kkm-content-max-sp);
  }

  .kkm-br-sp {
    display: inline;
  }
}

/* ==== MV（カンプ: y=79〜919 / 1440×840） ====
   MVはfull-bleedヒーロー: 高さ・コピー・SCROLLを --kkm-px-mv 基準にして、
   1440超でも 1440:840 の比率のまま全幅拡大する（画像のframingが1440時と同一）。 */
.kkm-mv {
  position: relative; /* z-indexは持たせない（子をルート文脈で重ねるため） */
  height: calc(840 * var(--kkm-px-mv));
}

.kkm-mv__slider {
  position: absolute;
  inset: 0;
  z-index: 1; /* イントロ(z:2)の破れ紙エッジより下 */
}

.kkm-mv__slide {
  overflow: hidden;
}

/* MVスライド画像: 正規トリミング素材（各2880×1680 = 1440:840ちょうど）。
   MVウィンドウ(PC)と同アスペクトのため基本は cover のみで全面フィット。 */
.kkm-mv__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* slide-03のみ、元写真の微傾きで右下隅に細い白フチ（源2880×1680の下辺〜59px・右下隅の三角）が
   残る。PCはMVが1440:840で全面表示のため白が出るので、上基準で1.05倍ズームし白帯を画面下外へ逃がす
   （源y>1600を隠す＝白フチの上端y=1621に約21pxの余裕）。slide-01/02は白フチなしのため補正しない。 */
.kkm-mv__img--03 {
  transform: scale(1.05);
  transform-origin: center top;
}

/* コピー・SCROLLの載る面: MVは全幅座標系（1440中央キャップを外しfull-bleed化）。
   margin-inline:auto はSP(≤1023)で max-width 復活時の中央寄せに使うため残す。 */
.kkm-mv__inner {
  position: absolute;
  inset: 0;
  z-index: 3; /* SCROLLがイントロの赤テクスチャ(z:2)の上に載る */
  margin-inline: auto;
}

/* タグライン画像（カンプ: x=40, y=504, 843×361）。--kkm-px-mvで全幅に比例拡大 */
.kkm-mv__copy {
  position: absolute;
  left: calc(40 * var(--kkm-px-mv));
  top: calc(425 * var(--kkm-px-mv)); /* 504 - MV上端79 */
  width: calc(843 * var(--kkm-px-mv));
}

/* SCROLLインジケータ（0718カンプ: x=1320, y=851, 80×104 = ラベル20 + 間20 + アイコン80×64） */
.kkm-mv__scroll {
  position: absolute;
  right: calc(40 * var(--kkm-px-mv));
  top: calc(772 * var(--kkm-px-mv)); /* 851 - MV上端79 */
  width: calc(80 * var(--kkm-px-mv));
  display: grid;
  justify-items: center;
  row-gap: calc(20 * var(--kkm-px-mv));
}

.kkm-mv__scroll-label {
  font-family: var(--kkm-font-ui);
  font-weight: 600;
  font-size: calc(20 * var(--kkm-px-mv));
  line-height: 1;
  color: var(--kkm-color-white);
}

/* アイコンはscroll-icon.svg(56×45)の等比拡大（0718実測80×64≒アスペクト一致） */
.kkm-mv__scroll-icon {
  --kkm-scroll-bob-d: calc(10 * var(--kkm-px-mv)); /* 上下バウンドの振幅 */
  width: calc(80 * var(--kkm-px-mv));
  animation: kkm-scroll-bob 1.8s ease-in-out infinite;
}

@keyframes kkm-scroll-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(var(--kkm-scroll-bob-d));
  }
}

/* ==== イントロコピー（カンプ: y=771〜1890 / 1440×1119、MV下部に148px重なる） ==== */
.kkm-intro {
  position: relative;
  z-index: 2; /* MVスライダー(z:1)の上、MV内SCROLL(z:3)の下 */
  /* MVへの食い込みは --kkm-px-mv 基準（MV下端の伸縮に追従させ、破れ紙シームを全幅で保つ）。
     イントロ内部の要素は従来どおり --kkm-px のまま。 */
  margin-top: calc(
    -148 *
    var(--kkm-px-mv)
  ); /* 919(MV下端) - 771(イントロ上端) */
  height: calc(1119 * var(--kkm-px));
  overflow: hidden; /* 人物写真の下端はみ出しを切る（黒背景に乗算＝ほぼ不可視のため） */
}

/* 破れ紙エッジ付きの赤テクスチャ（透過PNG・上下のエッジ込みで書き出し済み） */
.kkm-intro__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* 1440以下は等比一致、1440超では横方向にのみ伸びる（full-bleed方針） */
  object-fit: fill;
}

.kkm-intro__inner {
  position: relative;
  height: 100%;
  max-width: var(--kkm-content-max);
  margin-inline: auto;
}

/* スクワット人物（カンプ: x=740, y=1166, w=619 / Figma上MULTIPLY合成） */
.kkm-intro__figure {
  position: absolute;
  z-index: 1;
  left: calc(740 * var(--kkm-px));
  top: calc(395 * var(--kkm-px)); /* 1166 - イントロ上端771 */
  width: calc(619 * var(--kkm-px));
  height: auto;
  mix-blend-mode: multiply;
}

/* コピー文ブロック（カンプ: x=80, y=1015 起点） */
.kkm-intro__copy {
  position: absolute;
  z-index: 2; /* 人物写真より上 */
  left: calc(80 * var(--kkm-px));
  top: calc(244 * var(--kkm-px)); /* 1015 - イントロ上端771 */
}

/* リード文（spec: Noto Sans JP Bold 32px / 行高48px。halt併用時はトラッキング0がカンプ実測と一致） */
.kkm-intro__text {
  font-weight: 700;
  font-size: calc(32 * var(--kkm-px));
  line-height: 1.5;
  font-feature-settings: "halt"; /* 約物半角（カンプの詰まった句読点を再現） */
}

/* 段落間はカンプ上の空行1行分（0718実測: 3箇所計で114 → 1箇所38px。
   これでキャッチ「社会の筋肉だ。」上端がカンプy=1609に一致する */
.kkm-intro__text + .kkm-intro__text {
  margin-top: calc(38 * var(--kkm-px));
}

/* キャッチ「社会の筋肉だ。」（spec: 104px / 行高166.4px / -4.16px） */
.kkm-intro__catch {
  font-weight: 900;
  font-size: calc(104 * var(--kkm-px));
  line-height: 1.6;
  letter-spacing: -0.04em;
  font-feature-settings: "halt";
}

/* ==== CASE 01/02/03（カンプ基準1440px・各要素は絶対配置で --kkm-px 等比スケール） ====
   背景はfull-bleed（セクション全幅を地色で塗る）、内容は1440中央の座標系(.kkm-case__inner)。
   ページ地色は #C11920（明るい赤）。CASE01/03のみ #99141A（深い赤）を敷き、CASE02は地色のまま。
   バッジ/見出し2行/巨大数字はグランジ質感のため画像（PNG/SVG）、他はTEXT。
   見出し2行はそれぞれ背後に黒帯（矩形）を敷く。テキスト画像自体は帯を含まない透過PNGのため、
   .kkm-case__q-bar を別要素として追加している（Figma実測の黒帯座標。3節参照）。
   各CASEの座標差は .kkm-case--0N の CSS変数で吸収する。 */
.kkm-case {
  position: relative;
  overflow: clip; /* 横方向のはみ出しを抑止（レイアウトは1440内で完結） */
}

.kkm-case--01,
.kkm-case--03 {
  background-color: var(--kkm-color-red); /* #99141A 深い赤 */
}

.kkm-case--02 {
  background-color: var(
    --kkm-color-red-bright
  ); /* #C11920 明るい赤（ページ地色と同じ） */
}

/*
  カンプ絶対座標オフセットの補正:
  Figma上ではイントロ（Group2: y=771〜1890）とCASE01（0718: y=1876〜）が14px重なる。
  フロー積みの実装ではこの重なりが再現されず、CASE01以降がカンプより+14pxずれる。
  CASE01を14px引き上げて重なりを再現し、カンプの絶対座標へ一致させる。
  イントロ・CASEともに赤系のため、重なり帯（14px）に視覚的な継ぎ目は生じない
  （イントロのz-index:2がCASE01の赤の上に載るだけで、地色は赤のまま）。
  ※等比スケール（--kkm-px）に載せるのでPC確定レンジ（1024px以上）でのみ適用。
     1024px未満はSPの1カラムフローで別途指定する。
*/
@media (min-width: 1024px) {
  .kkm-case--01 {
    margin-top: calc(-14 * var(--kkm-px));
  }
}

/* 内容の座標系: 1440px中央寄せ。高さは各CASEのカンプ実高 */
.kkm-case__inner {
  position: relative;
  max-width: var(--kkm-content-max);
  margin-inline: auto;
  height: var(--kkm-case-h);
}

/* ---- 各CASEのカンプ実測値（design/spec.md + pc-0718-files.json 由来） ----
   --kkm-bar1-* / --kkm-bar2-* / --kkm-bar-pad-right / .kkm-case__question は0718値に同期済み
   （既存画像を0718サイズで表示。アート同一・等倍縮小のため再書き出し不要と確認済み 2026-07-21）。
   帯は常に右端x=1440へ密着（left+width=1440）し、bar1/bar2で左端(x)が異なるため
   left をcase別カスタムプロパティ（--kkm-bar1-left/--kkm-bar2-left）で持つ。 */
.kkm-case--01 {
  --kkm-case-h: calc(1510 * var(--kkm-px));
  --kkm-badge-top: calc(169.5 * var(--kkm-px));
  --kkm-bar1-top: calc(136 * var(--kkm-px));
  --kkm-bar1-h: calc(80 * var(--kkm-px));
  --kkm-bar1-pad-top: calc(8 * var(--kkm-px));
  --kkm-bar1-left: calc(608 * var(--kkm-px));
  --kkm-bar2-top: calc(232 * var(--kkm-px));
  --kkm-bar2-h: calc(80 * var(--kkm-px));
  --kkm-bar2-pad-top: calc(8 * var(--kkm-px));
  --kkm-bar2-left: calc(660 * var(--kkm-px));
  --kkm-bar-pad-right: calc(80 * var(--kkm-px));
  --kkm-fig-left: calc(115 * var(--kkm-px));
  --kkm-fig-top: calc(412 * var(--kkm-px));
  --kkm-fig-w: calc(330 * var(--kkm-px));
  --kkm-num-top: calc(402.4 * var(--kkm-px));
  --kkm-calc-top: calc(749.6 * var(--kkm-px));
  --kkm-prod-top: calc(976 * var(--kkm-px));
  --kkm-photo-w: calc(1035 * var(--kkm-px));
  --kkm-photo-h: calc(629 * var(--kkm-px));
  --kkm-photo-x: calc(-265 * var(--kkm-px));
  --kkm-photo-y: calc(-113.2 * var(--kkm-px));
}

.kkm-case--02 {
  --kkm-case-h: calc(1502 * var(--kkm-px));
  --kkm-badge-top: calc(162.5 * var(--kkm-px));
  --kkm-bar1-top: calc(120 * var(--kkm-px));
  --kkm-bar1-h: calc(80 * var(--kkm-px));
  --kkm-bar1-pad-top: calc(8 * var(--kkm-px));
  --kkm-bar1-left: calc(547 * var(--kkm-px));
  --kkm-bar2-top: calc(216 * var(--kkm-px));
  --kkm-bar2-h: calc(88 * var(--kkm-px));
  --kkm-bar2-pad-top: calc(8 * var(--kkm-px));
  --kkm-bar2-left: calc(496 * var(--kkm-px));
  --kkm-bar-pad-right: calc(80 * var(--kkm-px));
  --kkm-fig-left: calc(80 * var(--kkm-px));
  --kkm-fig-top: calc(323.4 * var(--kkm-px));
  --kkm-fig-w: calc(440 * var(--kkm-px));
  --kkm-num-top: calc(395.2 * var(--kkm-px));
  --kkm-calc-top: calc(740.8 * var(--kkm-px));
  --kkm-prod-top: calc(968 * var(--kkm-px));
  --kkm-photo-w: calc(1149 * var(--kkm-px));
  --kkm-photo-h: calc(601 * var(--kkm-px));
  --kkm-photo-x: calc(-234 * var(--kkm-px));
  --kkm-photo-y: calc(-107 * var(--kkm-px));
}

.kkm-case--03 {
  --kkm-case-h: calc(1502 * var(--kkm-px));
  --kkm-badge-top: calc(162.5 * var(--kkm-px));
  --kkm-bar1-top: calc(120 * var(--kkm-px));
  --kkm-bar1-h: calc(88 * var(--kkm-px));
  --kkm-bar1-pad-top: calc(8 * var(--kkm-px));
  --kkm-bar1-left: calc(583 * var(--kkm-px));
  --kkm-bar2-top: calc(224 * var(--kkm-px));
  --kkm-bar2-h: calc(80 * var(--kkm-px));
  --kkm-bar2-pad-top: calc(8 * var(--kkm-px));
  --kkm-bar2-left: calc(565 * var(--kkm-px));
  --kkm-bar-pad-right: calc(80 * var(--kkm-px));
  --kkm-fig-left: calc(80 * var(--kkm-px));
  --kkm-fig-top: calc(324.5 * var(--kkm-px));
  --kkm-fig-w: calc(417 * var(--kkm-px));
  --kkm-num-top: calc(394 * var(--kkm-px));
  --kkm-calc-top: calc(742 * var(--kkm-px));
  --kkm-prod-top: calc(968 * var(--kkm-px));
  --kkm-photo-w: calc(1084 * var(--kkm-px));
  --kkm-photo-h: calc(645 * var(--kkm-px));
  --kkm-photo-x: calc(-257.3 * var(--kkm-px));
  --kkm-photo-y: calc(-137 * var(--kkm-px));
}

/* CASEバッジ「CASE. 0N」（x=80・幅289固定・高さは画像比） */
.kkm-case__badge {
  position: absolute;
  left: calc(80 * var(--kkm-px));
  top: var(--kkm-badge-top);
  width: calc(289 * var(--kkm-px));
}

/* 質問見出し2行（黒帯+テキスト画像。帯は常に右端x=1440へ密着し、左端(x)だけがbar1/bar2・
   case別に異なるため.kkm-case__questionは全幅コンテナ化し、各帯は right:0 + case別の
   left（--kkm-bar1-left/--kkm-bar2-left）で位置決めする。
   テキスト画像は帯のpadding-left40/padding-top8だけ内側にずれるため、
   結果の絶対位置は帯導入前のq1-top/q2-top実測値と完全一致する（=1pxも動いていない）） */
.kkm-case__question {
  position: absolute;
  left: 0;
  top: 0; /* 子の top はセクション内絶対値（=inner上端基準） */
  width: 100%;
  height: 0;
}

.kkm-case__q-bar {
  position: absolute;
  display: block;
  right: 0;
  padding: 0 0 calc(8 * var(--kkm-px)) calc(40 * var(--kkm-px));
  background-color: var(--kkm-color-black);
}

.kkm-case__q-bar:first-of-type {
  left: var(--kkm-bar1-left);
  top: var(--kkm-bar1-top);
  height: var(--kkm-bar1-h);
  padding-top: var(--kkm-bar1-pad-top);
  padding-right: var(--kkm-bar-pad-right);
}

.kkm-case__q-bar:last-of-type {
  left: var(--kkm-bar2-left);
  top: var(--kkm-bar2-top);
  height: var(--kkm-bar2-h);
  padding-top: var(--kkm-bar2-pad-top);
  padding-right: var(--kkm-bar-pad-right);
}

.kkm-case__q-line {
  width: 100%;
}

/* 筋トレ人物写真（左・透過切り抜きPNG。位置・幅はCASEごとに異なる） */
.kkm-case__figure {
  position: absolute;
  left: var(--kkm-fig-left);
  top: var(--kkm-fig-top);
  width: var(--kkm-fig-w);
}

/* 巨大アウトライン数字ロックアップ（x=520・幅840のSVG） */
.kkm-case__answer {
  position: absolute;
  left: calc(520 * var(--kkm-px));
  top: var(--kkm-num-top);
  width: calc(840 * var(--kkm-px));
}

.kkm-case__answer-num {
  width: 100%;
}

/* 計算方法ボタン（枠線）+ 計算式テキスト（x=520・幅840） */
.kkm-case__calc {
  position: absolute;
  left: calc(520 * var(--kkm-px));
  top: var(--kkm-calc-top);
  width: calc(840 * var(--kkm-px));
}

.kkm-case__calc-label {
  display: grid;
  place-items: center;
  height: calc(50 * var(--kkm-px)); /* 0718: 46 → 50 */
  border: 1px solid var(--kkm-color-white);
  font-size: calc(20 * var(--kkm-px)); /* 0718: 16 → 20（weight 400のまま） */
  line-height: 1;
  color: var(--kkm-color-white);
}

.kkm-case__calc-body {
  margin-top: calc(24 * var(--kkm-px));
  font-size: calc(16 * var(--kkm-px));
  line-height: 1.6; /* spec: 16px/25.6px */
  text-align: justify;
  color: var(--kkm-color-white);
}

/* 製品エリア（x=80・幅1280・高さ414（0718: 349→414））: 写真620 + 黒カード660 */
.kkm-case__product {
  position: absolute;
  left: calc(80 * var(--kkm-px));
  top: var(--kkm-prod-top);
  width: calc(1280 * var(--kkm-px));
  height: calc(414 * var(--kkm-px));
}

/* 製品写真（620×414の窓に原寸オーバーサイズ画像をクリップ配置。カンプのトリミング再現） */
.kkm-case__photo {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(620 * var(--kkm-px));
  height: calc(414 * var(--kkm-px));
  overflow: hidden;
}

.kkm-case__photo img {
  position: absolute;
  max-width: none; /* reset.cssの max-width:100% を解除 */
  left: var(--kkm-photo-x);
  top: var(--kkm-photo-y);
  width: var(--kkm-photo-w);
  height: var(--kkm-photo-h);
  object-fit: cover;
}

/* 製品カード（黒地・x=700起点・幅660。0718: 高さ349→414） */
.kkm-case__card {
  position: absolute;
  left: calc(620 * var(--kkm-px));
  top: 0;
  width: calc(660 * var(--kkm-px));
  height: calc(414 * var(--kkm-px));
  padding: calc(56 * var(--kkm-px)) calc(40 * var(--kkm-px)) 0;
  background-color: var(--kkm-color-black);
}

/* 〈製品紹介〉ラベル（0718新設: 製品名の上。spec: 20px/32px Black。
   haltで「〈」の全角前アキを詰め、インクの左端を製品名と同じx=740に揃える） */
.kkm-case__product-label {
  font-weight: 700;
  font-size: calc(20 * var(--kkm-px));
  line-height: 1.6; /* spec: 20px/32px */
  color: var(--kkm-color-white);
  font-feature-settings: "halt";
}

.kkm-case__product-name {
  margin-top: calc(8 * var(--kkm-px)); /* 0718: ラベル→製品名の間8 */
  font-weight: 900;
  font-size: calc(32 * var(--kkm-px));
  line-height: 1.3; /* spec: 32px/41.6px */
  color: var(--kkm-color-white);
}

.kkm-case__product-desc {
  margin-top: calc(24 * var(--kkm-px));
  font-size: calc(16 * var(--kkm-px));
  line-height: 1.6;
  color: var(--kkm-color-white);
}

/* 「事業詳細はこちら」: テキスト + 右端が上へ跳ねる下線矢印（カンプ再現・CSSで作図） */
.kkm-case__product-link {
  position: absolute;
  right: calc(40 * var(--kkm-px));
  bottom: calc(56 * var(--kkm-px));
  width: calc(208 * var(--kkm-px));
  padding-bottom: calc(14 * var(--kkm-px));
  transition: opacity 0.2s ease;
}

/* ホバー: refに具体指定なし → GALLERYナビ・OTHERSカードと同じ控えめな演出で統一 */
.kkm-case__product-link:hover {
  opacity: 0.7;
}

.kkm-case__product-link-text {
  display: block;
  font-weight: 900;
  font-size: calc(20 * var(--kkm-px));
  line-height: 1.6;
  color: var(--kkm-color-white);
}

/* 下線+右端跳ね上げの矢印: Figma書き出しSVG（下線が全幅を走り、右端で上方向へ跳ね上がる1本線）。
   リンク幅208×帯16 = viewBox「0 0 208 16」と一致するため background-size:100% 100% で無歪み。
   跳ねは箱の内側（右端x197〜208）に収まるのでリンク幅からはみ出さない。 */
.kkm-case__product-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(208 * var(--kkm-px));
  height: calc(16 * var(--kkm-px));
  background: url("../img/product-arrow-pc.svg") no-repeat;
  background-size: 100% 100%;
}

/* ==== CASE: SP実装（1023px以下・390pxカンプ基準。sp-0718-files.json 実測） ====
   0718でSPカンプのCASE②③に実内容（ベルトコンベヤ/ユニッククレーン）が入り、①の複製状態は解消。
   レイアウトはPCの絶対配置と異なり縦フロー（マージン=カンプ実測差分）。②③のテキスト量差は
   高さautoで吸収する。背景色はカンプ実測どおりPCと同じ
   （コンテナ#99141A・CASE②のみ#C11920）で、PC側の指定がそのまま生きる。 */
@media (max-width: 1023px) {
  /* イントロ背景（564px）の破れ紙下端がCASE①上端に5px重なる（0718: bg下端1187 / CASE①上端1182） */
  .kkm-case--01 {
    margin-top: calc(-10 * var(--kkm-px-sp));
  }

  .kkm-case__inner {
    height: auto;
    max-width: var(--kkm-content-max-sp);
    padding: calc(64 * var(--kkm-px-sp)) 0; /* 0718: 40 → 64 */
  }

  /* バッジ「CASE. 0N」（0718: x16 y64 幅109。高さは画像等比=①41.1/②③37.3で自動） */
  .kkm-case__badge {
    position: static;
    width: calc(109 * var(--kkm-px-sp));
    height: auto;
    margin-left: calc(16 * var(--kkm-px-sp));
  }

  /* 見出し帯2行（帯1→右端 h43 / 帯2→右端 h43 / 行間8。左端(x)のみcase別に異なる。
     テキスト画像は帯の内側padding16で幅なり=①300/278・②326/343・③307/319相当。
     x位置はsp-0718-files.json実測へ同期済み（既存画像を0718サイズで表示。
     等倍縮小のため再書き出し不要と確認済み 2026-07-21）。
     ブロック位置（margin-top）はバッジ実高との組で0718のy=137/133に一致する */
  .kkm-case__question {
    position: relative;
    left: auto;
    width: auto;
    height: calc(94 * var(--kkm-px-sp));
    margin-top: calc(32 * var(--kkm-px-sp)); /* 0718: 24 → 32 */
  }

  .kkm-case__q-bar,
  .kkm-case__q-bar:first-of-type,
  .kkm-case__q-bar:last-of-type {
    position: absolute;
    right: 0;
    width: auto;
    height: calc(43 * var(--kkm-px-sp));
    padding: calc(8 * var(--kkm-px-sp)) calc(16 * var(--kkm-px-sp)) 0;
  }

  .kkm-case__q-bar:first-of-type {
    top: 0;
    left: var(--kkm-bar1-left);
  }

  .kkm-case__q-bar:last-of-type {
    top: calc(51 * var(--kkm-px-sp));
    left: var(--kkm-bar2-left);
  }

  .kkm-case--01 {
    --kkm-bar1-left: calc(58 * var(--kkm-px-sp));
    --kkm-bar2-left: calc(80 * var(--kkm-px-sp));
  }

  .kkm-case--02 {
    --kkm-bar1-left: calc(32 * var(--kkm-px-sp));
    --kkm-bar2-left: calc(15 * var(--kkm-px-sp));
  }

  .kkm-case--03 {
    --kkm-bar1-left: calc(51 * var(--kkm-px-sp));
    --kkm-bar2-left: calc(39 * var(--kkm-px-sp));
  }

  /* 筋トレ人物写真（0718: 358×238の窓に中央配置。画像幅はCASEごと実測、
     ②③は画像が窓より縦長のため上下センタークロップ＝Figma clipsContent再現。
     place-content: 窓より大きい子でもトラックごと中央化して両側均等にはみ出させる
     （place-itemsだとトラックが窓上端起点になり上端クロップにならないため不可） */
  .kkm-case__figure {
    position: static;
    display: grid;
    place-content: center;
    overflow: hidden;
    width: calc(358 * var(--kkm-px-sp));
    height: calc(238 * var(--kkm-px-sp));
    margin: calc(32 * var(--kkm-px-sp)) 0 0 calc(16 * var(--kkm-px-sp));
  }

  .kkm-case__figure img {
    width: var(--kkm-fig-img-w);
    height: auto;
  }

  .kkm-case--01 {
    --kkm-fig-img-w: calc(163 * var(--kkm-px-sp)); /* 163×238（クロップなし） */
  }

  .kkm-case--02 {
    --kkm-fig-img-w: calc(
      275 *
      var(--kkm-px-sp)
    ); /* 275×400 → 上下81クロップ */
  }

  .kkm-case--03 {
    --kkm-fig-img-w: calc(
      258 *
      var(--kkm-px-sp)
    ); /* 258×376 → 上下69クロップ */
  }

  /* 巨大アウトライン数字（0718: x16 y517/512 幅358。写真との間16） */
  .kkm-case__answer {
    position: static;
    width: calc(358 * var(--kkm-px-sp));
    margin: calc(16 * var(--kkm-px-sp)) 0 0 calc(16 * var(--kkm-px-sp));
  }

  /* 筋肉換算（0718 text: x16 y677/672 358×203 = ラベル枠33 + 間16 + 本文154。
     本文の行数差は高さautoで流し、次の製品エリアまでの間隔32はマージンで確保） */
  .kkm-case__calc {
    position: static;
    width: calc(358 * var(--kkm-px-sp));
    margin: calc(40 * var(--kkm-px-sp)) 0 0 calc(16 * var(--kkm-px-sp));
  }

  .kkm-case__calc-label {
    height: calc(33 * var(--kkm-px-sp)); /* 0718: 38 → 33 */
    font-size: calc(16 * var(--kkm-px-sp)); /* 0718: 14 → 16 */
    font-weight: 500; /* spec-sp 3-1: PC 400 → SP 500 */
  }

  .kkm-case__calc-body {
    margin-top: calc(16 * var(--kkm-px-sp));
    font-size: calc(14 * var(--kkm-px-sp)); /* 0718: 11 → 14 */
    font-weight: 500; /* 0718: 400 → 500 */
  }

  /* 製品エリア（0718 btn: 写真358×239の直下に黒カード。筋肉換算との間32） */
  .kkm-case__product {
    position: static;
    width: calc(358 * var(--kkm-px-sp));
    height: auto;
    margin: calc(32 * var(--kkm-px-sp)) 0 0 calc(16 * var(--kkm-px-sp));
  }

  .kkm-case__photo {
    position: relative; /* 中のオーバーサイズ画像の基準（PCはphoto自体がabsolute） */
    width: 100%;
    height: calc(238.7 * var(--kkm-px-sp));
  }

  /* SP用トリミング（--kkm-photo-*を0718実測値で上書き。高さは等比のためautoに） */
  .kkm-case__photo img {
    height: auto;
  }

  .kkm-case--01 {
    --kkm-photo-w: calc(597 * var(--kkm-px-sp));
    --kkm-photo-x: calc(-176.8 * var(--kkm-px-sp));
    --kkm-photo-y: calc(-65.3 * var(--kkm-px-sp));
  }

  .kkm-case--02 {
    --kkm-photo-w: calc(664 * var(--kkm-px-sp));
    --kkm-photo-x: calc(-122.4 * var(--kkm-px-sp));
    --kkm-photo-y: calc(-61.8 * var(--kkm-px-sp));
  }

  .kkm-case--03 {
    --kkm-photo-w: calc(626 * var(--kkm-px-sp));
    --kkm-photo-x: calc(-159.3 * var(--kkm-px-sp));
    --kkm-photo-y: calc(-79.1 * var(--kkm-px-sp));
  }

  /* 黒カード（0718 text: 358×270 padding24・ボタン領域はpadding-bottom 86=間16+ボタン46+下24。
     ②の説明文が長い分は高さautoで下に伸びる（0718実測 ②292）） */
  .kkm-case__card {
    position: relative; /* 「事業詳細はこちら」絶対配置の基準 */
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    min-height: calc(270 * var(--kkm-px-sp));
    padding: calc(24 * var(--kkm-px-sp)) calc(24 * var(--kkm-px-sp))
      calc(86 * var(--kkm-px-sp));
  }

  /* 〈製品紹介〉ラベル（0718新設: spec-sp 16px/25.6px Bold） */
  .kkm-case__product-label {
    font-size: calc(16 * var(--kkm-px-sp));
    font-weight: 700;
  }

  .kkm-case__product-name {
    margin-top: calc(4 * var(--kkm-px-sp)); /* 0718: ラベル→製品名の間4 */
    font-size: calc(20 * var(--kkm-px-sp));
  }

  .kkm-case__product-desc {
    margin-top: calc(16 * var(--kkm-px-sp));
    font-size: calc(14 * var(--kkm-px-sp));
    font-weight: 500; /* spec-sp 3-1: PC 400 → SP 500 */
  }

  /* 事業詳細はこちら（カンプbtn_sp: 171×46 右24 下24）。矢印はSP用SVGに差し替え
     （viewBox「0 0 171 16」= リンク幅171×帯16。45°跳ね。下線が全幅を走り右端で跳ね上がる） */
  .kkm-case__product-link {
    right: calc(24 * var(--kkm-px-sp));
    bottom: calc(24 * var(--kkm-px-sp));
    width: calc(171 * var(--kkm-px-sp));
    padding-bottom: calc(8 * var(--kkm-px-sp));
  }

  .kkm-case__product-link-text {
    font-size: calc(14 * var(--kkm-px-sp));
    font-weight: 500; /* spec-sp 3-1: PC 900 → SP 500 */
  }

  .kkm-case__product-link::after {
    left: 0;
    width: calc(171 * var(--kkm-px-sp));
    height: calc(16 * var(--kkm-px-sp));
    background-image: url("../img/product-arrow-sp.svg");
  }
}

/* ==== 見出し共通（GALLERY / OTHER CONTENTS。spec上は同一styleの2件） ==== */
.kkm-gallery__title,
.kkm-others__title {
  font-family: var(--kkm-font-ui);
  font-weight: 600;
  font-size: calc(80 * var(--kkm-px));
  line-height: 1.3; /* spec: 80px/104px */
  letter-spacing: -0.04em;
  color: var(--kkm-color-white);
  text-align: center;
}

/* ==== GALLERY（0718カンプ: y=6920 h=960 / #292929地、見出し+Swiperカルーセル） ====
   実測: paddingTop96 + 見出し104 + gap80 + スライダー560 + paddingBottom120 = 960 */
.kkm-gallery {
  position: relative;
  background-color: var(
    --kkm-color-ink
  ); /* #292929（プレースホルダの黒から実測色へ） */
  padding-top: calc(96 * var(--kkm-px)); /* 0718: 80 → 96 */
  padding-bottom: calc(120 * var(--kkm-px));
}

.kkm-gallery__inner {
  position: relative; /* 前後ナビの絶対配置の基準（ナビは.swiperのoverflow:hiddenの外に置く） */
}

/* スライダーだけを full-bleed(100vw) 化: 見出しは .kkm-container 内(中央)のまま。
   これで1440超でも両隣スライドの覗きが1440境界でハードカットされず、ビューポート端まで伸びる
   （中央スライド840はcenteredSlidesで常にビューポート中央）。overflow-x:clip前提で横スクロールは出ない。
   ≤1440では 50% - 50vw が 0 に収束するため従来と同じ（no-op）。SPは下のメディアクエリで無効化。 */
.kkm-gallery__slider {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: calc(80 * var(--kkm-px));
  height: calc(560 * var(--kkm-px));
}

/* slidesPerView:"auto" のため実サイズはCSS側で指定（Swiperがこれを実測する） */
.kkm-gallery__slider .swiper-slide {
  width: calc(840 * var(--kkm-px));
  height: calc(560 * var(--kkm-px));
  overflow: hidden;
}

.kkm-gallery__slider .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 前後ナビ（0718で刷新: 32×32のヒットエリアに16×20の白ストローク矢印を中央表示。
   Figma上は不可視の円+矢印ベクター。位置は中央スライド(300〜1140)の左右40px外・垂直中央。
   prevは同じ矢印を180°回転して使う。基準は.kkm-gallery__inner
   （top = 見出し104 + 間80 + スライダー中央280 = 464） */
.kkm-gallery__prev,
.kkm-gallery__next {
  position: absolute;
  top: calc(464 * var(--kkm-px));
  transform: translateY(-50%);
  width: calc(32 * var(--kkm-px));
  height: calc(32 * var(--kkm-px));
  background-image: url("../img/gallery-nav-arrow.svg");
  background-repeat: no-repeat;
  background-position: center;
  /* 矢印インク実寸16×20 + ストローク/マイター張り出し込みの描画領域 */
  background-size: calc(19.63 * var(--kkm-px)) calc(22.55 * var(--kkm-px));
  z-index: 2;
  transition: opacity 0.2s ease;
}

.kkm-gallery__prev:hover,
.kkm-gallery__next:hover {
  opacity: 0.7;
}

.kkm-gallery__prev {
  left: calc(228 * var(--kkm-px));
  transform: translateY(-50%) rotate(180deg);
}

.kkm-gallery__next {
  right: calc(228 * var(--kkm-px));
}

/* ==== GALLERY: SP実装（1023px以下・390pxカンプ基準。0718: h494=上48+見出し47+間40+写真239+間24+ナビ32+下64） ==== */
@media (max-width: 1023px) {
  .kkm-gallery {
    padding-top: calc(48 * var(--kkm-px-sp)); /* 0718: 40 → 48 */
    /* スライダー下端〜セクション下端 = ナビ間24 + ナビ32 + 下64 = 120 */
    padding-bottom: calc(120 * var(--kkm-px-sp));
  }

  .kkm-gallery__title,
  .kkm-others__title {
    font-size: calc(
      36 *
      var(--kkm-px-sp)
    ); /* 0718: 80px → 36px（weight600のまま） */
  }

  /* SPは full-bleed を無効化しコンテナ幅由来に戻す（0718 SPは1スライド=コンテンツ幅の設計） */
  .kkm-gallery__slider {
    width: auto;
    margin-left: 0;
    margin-top: calc(40 * var(--kkm-px-sp));
    height: calc(239 * var(--kkm-px-sp));
  }

  /* 0718: スライド358×239（コンテンツ幅いっぱい。前後の見切れなし） */
  .kkm-gallery__slider .swiper-slide {
    width: calc(358 * var(--kkm-px-sp));
    height: calc(239 * var(--kkm-px-sp));
  }

  /* 前後ナビ（0718で新設: スライダー下24px・右寄せ、32×32を16px間隔で2つ。
     右端はコンテンツ右端-16 = PCと同じ矢印svgを使用。
     inner基準 top = 見出し46.8 + 間40 + スライダー239 + 間24 = 349.8 */
  .kkm-gallery__prev,
  .kkm-gallery__next {
    top: calc(349.8 * var(--kkm-px-sp));
    width: calc(32 * var(--kkm-px-sp));
    height: calc(32 * var(--kkm-px-sp));
    background-size: calc(19.63 * var(--kkm-px-sp))
      calc(22.55 * var(--kkm-px-sp));
  }

  .kkm-gallery__prev {
    left: auto;
    right: calc(64 * var(--kkm-px-sp)); /* 16 + 32 + 間16 */
    transform: rotate(180deg);
  }

  .kkm-gallery__next {
    right: calc(16 * var(--kkm-px-sp));
    transform: none;
  }
}

/* ==== OTHER CONTENTS（0718カンプ: y=8000〜9259 / 明赤地=ページ地色の透過、見出し+2×2リンクカード(黒)） ==== */
.kkm-others {
  position: relative;
  background-color: var(--kkm-color-red-bright);
  padding-top: calc(
    120 *
    var(--kkm-px)
  ); /* GALLERY→OTHER CONTENTS間のカンプ余白（0718: 80→120） */
  padding-bottom: calc(
    120 *
    var(--kkm-px)
  ); /* OTHER CONTENTS→フッター間のカンプ余白（0718: 160→120） */
}

.kkm-others__list {
  display: grid;
  grid-template-columns: repeat(2, calc(542 * var(--kkm-px)));
  column-gap: calc(40 * var(--kkm-px));
  row-gap: calc(40 * var(--kkm-px)); /* 0718: 80 → 40 */
  justify-content: center;
  margin-top: calc(80 * var(--kkm-px));
}

.kkm-others__card {
  display: block;
  background-color: var(--kkm-color-black);
}

.kkm-others__thumb {
  display: block;
  overflow: hidden;
  height: calc(304 * var(--kkm-px));
}

.kkm-others__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform 0.5s ease,
    filter 0.5s ease;
}

/* ホバー: refに具体的な指定なし → 画像の軽いスケール+明度の控えめな演出 */
.kkm-others__card:hover .kkm-others__thumb img {
  transform: scale(1.04);
  filter: brightness(1.08);
}

.kkm-others__body {
  padding: calc(24 * var(--kkm-px));
}

/* タイトルは1行省略（…）。ユーザー明示指示によりカンプ（応援歌カードは2行）と異なる。
   カード本文幅を超えたら末尾を省略。PC/SP共通（SPはfont-sizeのみ上書き）。 */
.kkm-others__card-title {
  font-weight: 900;
  font-size: calc(32 * var(--kkm-px));
  line-height: 1.3; /* spec: 32px/41.6px */
  color: var(--kkm-color-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kkm-others__card-desc {
  margin-top: calc(24 * var(--kkm-px));
  font-size: calc(16 * var(--kkm-px));
  line-height: 1.6; /* spec: 16px/25.6px */
  text-align: justify;
  color: var(--kkm-color-white);
}

/* ==== OTHER CONTENTS: SP実装（1023px以下・390pxカンプ基準。縦1列4件・カード358幅） ==== */
@media (max-width: 1023px) {
  .kkm-others {
    padding-top: calc(
      64 *
      var(--kkm-px-sp)
    ); /* GALLERY→見出しのカンプ間隔（0718: 80→64） */
    padding-bottom: calc(
      64 *
      var(--kkm-px-sp)
    ); /* 最終カード→フッターのカンプ間隔（0718: 104→64） */
  }

  .kkm-others__list {
    grid-template-columns: calc(358 * var(--kkm-px-sp));
    row-gap: calc(32 * var(--kkm-px-sp)); /* 0718: 40 → 32 */
    margin-top: calc(40 * var(--kkm-px-sp));
  }

  /* カンプのサムネは358×201.5=素材アスペクト等倍のためheight固定を外す */
  .kkm-others__thumb {
    height: auto;
  }

  .kkm-others__thumb img {
    height: auto;
  }

  .kkm-others__body {
    padding: calc(20 * var(--kkm-px-sp)) calc(16 * var(--kkm-px-sp)); /* 0718: 上下16→20 */
  }

  .kkm-others__card-title {
    font-size: calc(20 * var(--kkm-px-sp));
  }

  .kkm-others__card-desc {
    margin-top: calc(16 * var(--kkm-px-sp));
    font-size: calc(14 * var(--kkm-px-sp));
    font-weight: 500; /* spec-sp 3-1: PC 400 → SP 500 */
  }
}

/* ==== 計算注記（〈筋肉換算について〉）: CASE03直下・明るい赤地に白枠ボックス ====
   0718カンプ: box(80,6470) 1280×330。上余白80・下余白120（GALLERYまで） */
.kkm-notes {
  background-color: var(
    --kkm-color-red-bright
  ); /* #C11920（ページ地色と同じ明るい赤） */
  padding-top: calc(80 * var(--kkm-px));
  padding-bottom: calc(120 * var(--kkm-px)); /* 0718: 80 → 120 */
}

.kkm-notes__box {
  width: calc(
    1280 *
    var(--kkm-px)
  ); /* カンプ: x=80起点・幅1280（左右80px余白） */
  max-width: 100%;
  margin-inline: auto;
  padding: calc(32 * var(--kkm-px)) calc(77 * var(--kkm-px)); /* 0718: 左右80→77 */
  border: 1px solid var(--kkm-color-white);
  color: var(--kkm-color-white);
}

/* 見出し〈筋肉換算について〉（0718: 13px → 20px/32px Regular。haltで「〈」の前アキを詰める） */
.kkm-notes__heading {
  font-size: calc(20 * var(--kkm-px));
  line-height: 1.6;
  font-feature-settings: "halt";
}

/* font-sizeはul自体に指定（liへは継承。ブロック間マージンの1.6emを本文サイズ基準にするため） */
.kkm-notes__lead,
.kkm-notes__list {
  font-size: calc(13 * var(--kkm-px)); /* spec: Roboto 13px/20.8px */
  line-height: 1.6;
}

/* 見出し→本文の間はカンプ実測24、本文ブロック間はカンプの空行1行分（=1.6em） */
.kkm-notes__heading + * {
  margin-top: calc(24 * var(--kkm-px));
}

.kkm-notes__lead + .kkm-notes__lead,
.kkm-notes__lead + .kkm-notes__list,
.kkm-notes__list + .kkm-notes__lead {
  margin-top: 1.6em;
}

.kkm-notes__list li {
  padding-left: 1.1em;
  text-indent: -1.1em; /* ・のぶら下げインデント（折り返し行を頭揃え） */
}

.kkm-notes__list li::before {
  content: "・";
}

/* ==== 計算注記: SP実装（1023px以下・390pxカンプ基準。0718: 枠358幅 padding24/16） ==== */
@media (max-width: 1023px) {
  .kkm-notes {
    padding-top: calc(48 * var(--kkm-px-sp)); /* 0718: 80 → 48 */
    padding-bottom: calc(64 * var(--kkm-px-sp)); /* 0718: 80 → 64 */
  }

  .kkm-notes__box {
    width: calc(358 * var(--kkm-px-sp));
    padding: calc(24 * var(--kkm-px-sp)) calc(16 * var(--kkm-px-sp)); /* 0718: 14→24 */
  }

  /* 0718: 見出し 11px → 16px/25.6px Medium */
  .kkm-notes__heading {
    font-size: calc(16 * var(--kkm-px-sp));
    font-weight: 500;
  }

  .kkm-notes__lead,
  .kkm-notes__list {
    font-size: calc(11 * var(--kkm-px-sp)); /* spec-sp: 13px → 11px */
  }

  .kkm-notes__heading + * {
    margin-top: calc(12 * var(--kkm-px-sp)); /* 0718: 見出し→本文の間12 */
  }
}

/* ==== MV / イントロ: SP実装（1023px以下・390pxカンプ基準。spec-sp 1節） ==== */
@media (max-width: 1023px) {
  /* MV（カンプ: 390×680。3枚スライドショーはPCと共通）
     0721CB2: SP専用縦画像の下部に傾き由来の白フチがあり、680だと破れ紙エッジの隙間から白が覗く。
     高さを664に詰め（+下記 object-position:top で下寄りをクリップ）、残る白はイントロ赤ベタ下に隠す。実機確認済み。 */
  .kkm-mv {
    height: calc(664 * var(--kkm-px-sp));
  }

  .kkm-mv__inner {
    max-width: var(--kkm-content-max-sp);
  }

  /* タグライン画像（カンプ: x16 y512（MV上端から418） 296×127）
     0721CB2: MV高さ短縮でイントロ赤帯が上がり、タグライン下端が赤に重なっていたため上へ移動（418→364）。
     赤の破れ紙エッジ上端の少し上に収め、画像の上で完結させる。 */
  .kkm-mv__copy {
    left: calc(16 * var(--kkm-px-sp));
    top: calc(400 * var(--kkm-px-sp));
    width: calc(296 * var(--kkm-px-sp));
  }

  /* SCROLLインジケータ（0718で新設: node 196:1253。x=331 y=647 43×57
     = ラベル11 + 間12 + アイコン枠34（ベクター実測40×32）。MV上端94からのy=553）
     0721CB: タグライン直下で窮屈だったため参照カンプに合わせて下げる（553→576） */
  .kkm-mv__scroll {
    right: calc(16 * var(--kkm-px-sp));
    top: calc(576 * var(--kkm-px-sp));
    width: calc(43 * var(--kkm-px-sp));
    row-gap: calc(12 * var(--kkm-px-sp));
  }

  .kkm-mv__scroll-label {
    font-size: calc(11 * var(--kkm-px-sp));
  }

  .kkm-mv__scroll-icon {
    --kkm-scroll-bob-d: calc(5 * var(--kkm-px-sp)); /* PC比率(10/80)相当 */
    width: calc(40 * var(--kkm-px-sp));
  }

  /* MVはSPでは<picture>でSP専用縦画像(780×1360=390:680)に差し替え。
     画像下部の白フチ(傾き由来)を隠すため object-position:top で上寄せし、
     MV高さ632(上記)で下側をクリップ＋残りはイントロ赤ベタ下に収める（3枚とも実機確認済み）。 */
  .kkm-mv__img {
    object-position: 50% 0;
  }

  /* slide-03のPC用ズーム補正は縦画像では不要 → 解除して全3枚を同条件に */
  .kkm-mv__img--03 {
    transform: none;
  }

  /* イントロ（0718カンプ: bg 390×564がMV下端に151重なる。人物写真はクリップ帯化
     したためはみ出しは無いが、overflowはvisibleのままで支障なし） */
  .kkm-intro {
    margin-top: calc(-151 * var(--kkm-px-sp));
    height: calc(564 * var(--kkm-px-sp)); /* 0718: 533 → 564 */
    overflow: visible;
  }

  /* SPカンプの背景はvector(#BF1920)+紙テクスチャ構成だが、#BF1920は既存トークン
     #C11920（PC書き出しPNGの地色）との差が誤差レベルのためPC素材を流用して丸める。
     PNG(1440×1119)とSP枠(390×533)のアスペクト差はcoverで吸収
     （破れ紙の上下エッジを保持し左右をクロップ） */
  .kkm-intro__bg {
    object-fit: cover;
  }

  .kkm-intro__inner {
    max-width: var(--kkm-content-max-sp);
  }

  /* スクワット人物（0718: 画像233×340をx141 y915（イントロ上端から292）に置き、
     クリップ枠(141,1007)233×156で中央帯だけを見せる=Figma clipsContent実測を
     clip-path insetで再現（上下92ずつ切る）。multiply合成は要素自身に残るため保たれる） */
  .kkm-intro__figure {
    left: calc(141 * var(--kkm-px-sp));
    top: calc(292 * var(--kkm-px-sp)); /* 0718: 265 → 292 */
    width: calc(233 * var(--kkm-px-sp));
    clip-path: inset(calc(92 * var(--kkm-px-sp)) 0);
  }

  /* コピー文ブロック（カンプ: x16.84→16 y703（イントロ上端から80））
     0721CB: 破れ紙エッジ直下で本文が窮屈だったため上余白を追加（80→100） */
  .kkm-intro__copy {
    left: calc(16 * var(--kkm-px-sp));
    top: calc(100 * var(--kkm-px-sp));
  }

  /* リード文（spec-sp: 15px/24px Bold。段落間は空行1行分=24px） */
  .kkm-intro__text {
    font-size: calc(15 * var(--kkm-px-sp));
    line-height: 1.6;
  }

  .kkm-intro__text + .kkm-intro__text {
    margin-top: calc(24 * var(--kkm-px-sp));
  }

  /* キャッチ「社会の筋肉だ。」（spec-sp: 40px/64px/-1.6px。行高・字間はPCと同率のため継承） */
  .kkm-intro__catch {
    font-size: calc(40 * var(--kkm-px-sp));
  }
}

/* ==== モーション低減設定 ==== */
@media (prefers-reduced-motion: reduce) {
  .kkm-mv__scroll-icon {
    animation: none;
  }
}