@charset "UTF-8";

/* ========================================
   hearing.css
   店長ヒアリング（店長に聞いてみた）ページ専用スタイル
   ※ Figma: node 6:36088「店長との対談」準拠
   ※ 1920px 基準の px を vw 換算（px ÷ 1920 × 100）で再現。今回は PC 版のみ。
======================================== */

.hearing {
  /* ---- テーマカラー（Figma の塗りから）---- */
  --hr-red: #f75959;          /* テーマ赤（キャッチ・カードタイトル・MESSAGE 見出し）*/
  --hr-yellow-hero: #ffd571;  /* ヒーローの黄帯 */
  --hr-yellow-frame: #ffde8e; /* Q&A 外枠・「ぶっちゃけ話」の黄 */
  --hr-yellow-soft: #ffeec7;  /* ステップカード下の薄い黄パネル */
  --hr-yellow-band: #ffedc1;  /* まとめバナーの下線ハイライト */
  --hr-pink: #ffd0d0;         /* 回答キャッチの下線（薄赤）*/
  --hr-ink: #2c2c2c;          /* 本文の濃いグレー */
  --hr-ink-strong: #212121;   /* 枠線・見出しの黒に近いグレー */

  /* ---- レイアウト（interview 型：固定幅で余白先詰め → 最小余白で可変）----
     各セクション枠(非zoom)に「1920px 実測の固定幅」を上限として持たせ、ウィンドウを
     狭めると まず左右の余白から詰める。余白が最小(--hr-gutter＝左右各5%)に達したら、
     そこから下は幅も可変（＝90%幅）になり、内部は従来どおり vw × zoom で縮む。
     幅式: width: min(固定px, calc(100% - 2*--hr-gutter))。
     ※ 幅(px)は「zoom を持たないセクション枠」に置く。zoom を持つ内側(-inner)に px 上限を
       付けると zoom が幅まで縮めてしまうため、内側は width:100%＋zoom(中身のみ縮小)に統一。*/
  --hr-gutter: 5%;       /* 応答域の左右最小余白（interview の 90vw 慣例＝左右5%に合わせる）*/
  --hr-w-main: 1382px;   /* 何してる/Q&A の固定幅（1920px で 72%＝実測1382px）*/
  --hr-w-msg:  1103px;   /* MESSAGE の固定幅（1920px で 57.45%＝実測1103px）*/
  --hr-w-hero: 1649px;   /* ヒーロー中身の固定幅（1920px で 85.9%＝実測1649px）※ヒーローは別途対応 */
  --hr-zoom: 0.859;      /* 中身の縮小率（72 ÷ 83.8）*/

  background-color: #fffdf4;  /* ページ地色 */
  overflow-x: hidden;
}

/* 共通の中身ラッパ。幅はセクション枠(非zoom)が持つので内側は 100%。中身は zoom で縮小。*/
.hearing-what-inner,
.hearing-qa-inner,
.hearing-message-inner {
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  zoom: var(--hr-zoom);
}

/* ============================================================
   Hero（北モの店長に聞いてみた！）
   Figma(1920): 黄帯 #ffd571 高600px。中央に白窓 幅900px。
   左右に店長写真。中央にタイトル吹き出し画像＋リード文。
============================================================ */
.hearing-hero {
  position: relative;
}
/* 黄色い帯（全幅）。中央に白い窓を重ねる。*/
.hearing-hero-band {
  position: relative;
  background-color: var(--hr-yellow-hero);
  /* 中央 900/1920=46.875% の白窓を、左右対称グラデで表現（白窓 #fffdf4）*/
  /* 白窓は 0.859 倍（中央基準）で内側へ寄せる：26.5%→29.8% / 73.5%→70.2%。
     ヒーロー中身(hero-inner)を 0.859 に縮めたのに合わせ、道路・写真と揃える。*/
  background-image: linear-gradient(
    to right,
    var(--hr-yellow-hero) 0,
    var(--hr-yellow-hero) 29.8%,
    #fffdf4 29.8%,
    #fffdf4 70.2%,
    var(--hr-yellow-hero) 70.2%,
    var(--hr-yellow-hero) 100%
  );
}
.hearing-hero-inner {
  position: relative;
  z-index: 2;
  /* 他セクションと同じ「箱ごとスケール」。ヒーローは元々全幅設計なので、
     箱幅 = 100% × zoom(0.859) = 85.9%、中身を zoom 0.859 で同率縮小する。
     → 写真(左右8%位置)の外端が 14%〜86%（=72%コンテンツ幅）に揃い、
       タイトル/リードも 0.859 倍になって他セクションと同じ縮尺になる。*/
  width: calc(var(--hr-zoom) * 100%);
  margin: 0 auto;
  zoom: var(--hr-zoom);
  /* Figma: 帯高600px=31.25vw。タイトルを上部に、リードは中央寄りに。*/
  padding: clamp(48px, 6.5vw, 125px) 0 clamp(36px, 4.5vw, 86px);
  box-sizing: border-box;
}

/* タイトル吹き出し画像（北モの店長に聞いてみた！）*/
.hearing-hero-title {
  position: relative;
  z-index: 2;
  margin: 0;
  text-align: center;
  line-height: 0;
}
.hearing-hero-title-img {
  display: inline-block;
  /* 見本(Figma)より小さかったので現状(913px)の 1.2倍 ≒ 1096px 表示にする。
     hero-inner(85.9%=1649px@1920) に対し 1096/1649 ≒ 66.5%。max-width も 1096px 相当
     （zoom 0.859 を考慮し 1096/0.859 ≒ 1276px）にして 1096px で頭打ち。*/
  width: 66.5%;
  max-width: 1276px;
  height: auto;
}

/* リード文（中央・Inter相当 Bold 25px=1.30vw / leading50=line-height2）*/
.hearing-hero-lead {
  position: relative;
  z-index: 2;
  margin: clamp(20px, 2.2vw, 42px) auto 0;
  text-align: center;
  color: var(--hr-ink);
  /* 下限14px = 1.30vw が箱化境界(1080px)まで生き続ける値（14px到達は1077px＝箱化後）。
     旧: 下限15px は 1154px で発動し、%指定のタイトル・写真だけが縮み続けるため
     1081〜1154px でリードが相対的に大きくなる「バラバラ」の残りの原因だった。*/
  font-size: clamp(1.4rem, 1.30vw, 2.5rem);  /* Figma 25px=1.30vw */
  line-height: 2;                             /* Figma leading 50/25 = 2 */
}
.hearing-hero-lead p {
  margin: 0;
}
/* 狭幅(≦425px)専用の改行（ぶっちゃけ話を、の後）。
   箱化(true-hold)後の④(30文字)は「文字下限12px×30=360px」vs「リード96%幅(≦667px)」の
   比較になり、箱幅375px（≒ウィンドウ417px）まで1行で収まる。余裕をみて426px以上は改行しない。
   既定(＝狭幅)はUAデフォルトのまま触らず、「広い幅でだけ消す」min-width 方向で制御。*/
@media (min-width: 426px) {
  .hearing-hero-lead-br--sp { display: none; }
}

/* 左右の店長写真。Figma: w411.6×h331、left153/1357。中央窓の外側（黄帯上）に重なる。
   back（黒い吹き出し影）＋surface（写真）の2枚重ね。surface を少し上にオフセット。
   見本: 写真はタイトルより下・帯の中央〜下寄り（上に余白）。*/
.hearing-hero-photo {
  position: absolute;
  /* Figma: 写真中心 ≒ リード文中心 = 帯の約66%。タイトル（帯上部）の下に来て
     重ならない。*/
  top: 66%;
  transform: translateY(-50%);
  width: 21.4%;                 /* Figma 411.6/1920 ≒ 21.4% */
  max-width: 412px;
  height: auto;
  z-index: 3;                   /* 道路より前面 */
  display: inline-block;
}
.hearing-hero-photo--left  { left: 8%; }    /* Figma 153/1920 ≒ 8% */
.hearing-hero-photo--right { right: 8%; }   /* Figma 右端対称 */

/* 中央白窓の左右境界を縦に走る道路2本。
   インタビューの道路（グレー帯＋白破線）と同じ手法を「縦向き」にする。
   白窓は 26.5%〜73.5%。その境界（左26.5% / 右73.5%）に縦道路を置く。*/
.hearing-hero-road {
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(24px, 2.23vw, 43px);   /* 道路の幅（縦走）。中身0.859倍に合わせて縮小 */
  background-color: #595959;          /* インタビューと同じ道路グレー */
  z-index: 1;                         /* 黄帯の上・写真/中身の下 */
}
/* 道路中央の白い破線（縦方向に連続）。インタビューの repeating-linear-gradient を縦に。*/
.hearing-hero-road::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: clamp(3px, 0.2vw, 4px);
  transform: translateX(-50%);
  /* 破線：1本分の長さと間隔を2倍にして、白線の本数を半分にする。*/
  background-image: repeating-linear-gradient(
    to bottom,
    #fff 0,
    #fff clamp(24px, 1.43vw, 52px),
    transparent clamp(24px, 1.43vw, 52px),
    transparent clamp(48px, 2.87vw, 103px)
  );
}
.hearing-hero-road--left  { left: 29.8%; transform: translateX(-50%); }   /* 白窓の左境界（0.859倍で内側へ）*/
.hearing-hero-road--right { left: 70.2%; transform: translateX(-50%); }   /* 白窓の右境界（0.859倍で内側へ）*/
.hearing-hero-photo-back,
.hearing-hero-photo-surface {
  display: block;
  width: 100%;
  height: auto;
}
.hearing-hero-photo-surface {
  position: absolute;
}
/* Figma の back/surface ズレを per-side で再現（back が外側下に覗く）。
   左: surface +4右 -8上（back 153/383 → surface 157/375）→ -2.42% / +0.97%
   右: surface -6左 -6上（back 1357/381 → surface 1351/375）→ -1.81% / -1.46% */
.hearing-hero-photo--left  .hearing-hero-photo-surface { top: -2.42%; left: 0.97%; }
.hearing-hero-photo--right .hearing-hero-photo-surface { top: -1.81%; left: -1.46%; }

/* ヒーローのモバイル再構成。
   白窓は全幅の約40%固定比率なのに対し、リード文は縮小下限(15px)で止まるため、
   狭い幅で文章が白窓からはみ出し、左右絶対配置の写真も文章に重なる。
   実測: リード2行目の「店」が左道路に 1040px 幅まで接触し、1060px でクリア（隙間25px）。
   → 余裕20px を見て 1080px 以下で「タイトル → リード文 → 写真2枚（横並び）」の
     縦積みに再構成し、白窓を 29.8%〜70.2% → 8%〜92% に広げてリード文の受け皿を確保する。*/
@media (max-width: 1080px) {
  /* 白窓の拡大。道路2本も新しい窓の境界（8% / 92%）へ移動。*/
  .hearing-hero-band {
    background-image: linear-gradient(
      to right,
      var(--hr-yellow-hero) 0,
      var(--hr-yellow-hero) 8%,
      #fffdf4 8%,
      #fffdf4 92%,
      var(--hr-yellow-hero) 92%,
      var(--hr-yellow-hero) 100%
    );
  }
  .hearing-hero-road--left  { left: 8%; }
  .hearing-hero-road--right { left: 92%; }
  /* DOM順（写真→タイトル→リード）を flex の order で並べ替え、
     「タイトル → 写真2枚（横並び） → リード文」の縦積みにする。

     ▼箱化（true-hold・hearing-what と同方式）
     1080px時の実寸(928px)を上限に持ち、狭めると まず左右余白が --hr-gutter(5%)
     まで詰まる（中身は固定＝hold）。余白が最小に達する約1031px以下では、箱幅に
     連動して タイトル・写真・文字・余白 が全部同率で縮む。
     ・幅系は % （箱基準）、文字と余白は cqw（箱幅%）で 1080px時の見た目に一致させる
     ・zoom は解除（旧: 文字/px値だけ0.859倍で、幅%とスケールが食い違う原因だった）
     ・箱自身に cqw を使うと自己参照でviewport基準に化けるため、余白は子要素側に持たせる */
  .hearing-hero-inner {
    width: min(928px, calc(100% - 2 * var(--hr-gutter)));
    zoom: 1;
    container-type: inline-size;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 6%;              /* % は flexコンテナ（箱）基準なのでこのままでOK */
    padding: 0;                  /* 上下余白は title/lead の margin (cqw) へ移動 */
  }
  .hearing-hero-title { order: -2; width: 100%; margin: 6.5cqw 0 0; }   /* 旧 padding-top 相当 */
  .hearing-hero-title-img { width: 82%; }
  .hearing-hero-photo { order: -1; }
  /* 幅100%だと長い行が左右の道路に接触するため、道路の内側に収まる幅に絞る。
     文字は箱連動(1.39cqw＝1080px時12.9px相当)＋読みやすさの下限12px。*/
  .hearing-hero-lead {
    order: 0;
    width: 82%;
    margin: 2.2cqw auto 4.5cqw;  /* 上=旧clamp相当 / 下=旧 padding-bottom 相当 */
    font-size: max(12px, 1.39cqw);
  }
  /* 縦積みでは PC 専用の改行（店長って、の後）だけ解除。
     ③④間の無印 br は残し、指定の4行組にする:
       店長って、普段どんなことを考えているんだろう。
       売上のこと？それとも、社員のこと？
       北九州日産モーターの現場を長く見てきた店長に、
       店長という立場になってからのぶっちゃけ話を、聞いてみました。*/
  .hearing-hero-lead .hearing-hero-lead-br--pc { display: none; }
  /* 写真を絶対配置から通常フローへ（left/right 8% のオフセットも解除）。
     旧 max-width:300px（zoom後258px）のキャップは廃止し、常に箱比27.8%
     （=1080px時の実寸258px相当）で他要素と同率スケールさせる。*/
  .hearing-hero-photo {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
    width: 27.8%;
    max-width: none;
    margin-top: 3.33cqw;
  }
}

/* 6ステップカードが1列になる幅（コンテナ600px ≒ ウィンドウ667px）以下：
   ヒーローの黄色い帯をなくし、道路2本をウィンドウの両端へ寄せて白窓を全幅化。
   空いた幅をリード文の受け皿として使う（82%→96%）。*/
@media (max-width: 667px) {
  .hearing-hero-band {
    background-color: #fffdf4;      /* 黄色→ページ地色 */
    background-image: none;         /* 左右の黄帯グラデも撤去 */
  }
  .hearing-hero-road--left  { left: 0;    transform: none; }
  .hearing-hero-road--right { left: auto; right: 0; transform: none; }
  .hearing-hero-lead { width: 96%; }
}

/* 黄帯の下端に「跨る」下向き矢印（上半分が黄帯側・下半分がクリーム側）。
   上マージンを「高さの半分」ぶん負にして矢印の中心を帯下端へ。負マージンなので
   下の「何してるの？」も一緒に上がり、旧position:top方式で残っていた無駄な余白(約63px)が消える。*/
.hearing-hero-pass {
  display: block;
  position: relative;
  z-index: 4;                                 /* 黄帯・写真より前面に */
  width: auto;
  height: clamp(34px, 4vw, 70px);
  margin: calc(clamp(34px, 4vw, 70px) / -2) auto 0;
}

/* ============================================================
   店長って "何してるの?" + 6ステップカード
============================================================ */
.hearing-what {
  /* interview 型：固定幅 1382px を上限に、狭めると左右余白から詰める→最小5%で90%幅に。*/
  width: min(var(--hr-w-main), calc(100% - 2 * var(--hr-gutter)));
  margin-inline: auto;
  /* 真のhold：中身のサイズ基準を「画面幅(vw)」でなく「この箱幅(cqw)」にする。
     箱が hold している間は 1cqw が一定＝文字・余白・画像も固定。箱が縮み始めて初めて縮む。*/
  container-type: inline-size;
  /* 矢印下端〜「何してるの?」タイトルの隙間 ≒ この margin。約50px に詰める（旧5vw/96pxは広すぎた）。*/
  margin-top: clamp(24px, 2.6vw, 50px);
}
/* キャッチ画像（店長って"何してるの?"）*/
.hearing-what-title {
  margin: 0;
  text-align: center;
  line-height: 0;
}
.hearing-what-title-img {
  display: inline-block;
  width: 47.3%;                /* Figma: 908/1920 ≒ 47.3% */
  max-width: 908px;
  height: auto;
}

/* 6ステップ = 3×2 グリッド */
.hearing-steps {
  list-style: none;
  margin: clamp(32px, 5.556cqw, 72px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(16px, 2.0835cqw, 28px);   /* Figma: カード間 ≒ 28px */
  row-gap: clamp(28px, 4.8615cqw, 64px);
}
/* 列数の切替（.hearing-what のコンテナ幅基準）：3列 → 2列 → 1列。
   カード内の文字・枠・写真は「カード幅」基準(下記 .hearing-step のコンテナ化)なので、
   列数が減るとカードが再び大きくなり、文字が枠からはみ出さない。*/
@container (max-width: 1000px) {
  .hearing-steps { grid-template-columns: repeat(2, 1fr); }
  /* タイトル画像は PC 比率(47.3%)のままだとカードに対して小さく見えるため拡大 */
  .hearing-what-title-img { width: 68%; }
}
@container (max-width: 600px) {
  .hearing-steps { grid-template-columns: 1fr; }
  .hearing-what-title-img { width: 92%; }
}
.hearing-step {
  display: flex;
  flex-direction: column;
  /* カード自身をコンテナ化：内側の寸法(cqw)の基準を「セクション幅」から「カード幅」へ。
     3列時のカード幅 = (100 − 2×2.0835)/3 ≒ 31.944% なので、内側の cqw 値は
     旧値 × 3.1305 に換算済み（3列時の見た目は従来と同一）。*/
  container-type: inline-size;
}
/* 番号＋タイトル箱（背景画像 hearing-0X.png の上に、白背景＋黒枠の箱を重ねる）*/
.hearing-step-head {
  position: relative;
}
.hearing-step-head-bg {
  display: block;
  width: 100%;
  height: auto;
}
/* 黒枠＋白背景の箱を、黄色画像（hearing-0X.png）の「箱部分（#01バッジを除く）」と
   完全に同じ位置・サイズに重ね、そこから中心基準で 95% に縮小する。
   → 四辺に均等な黄色帯（約2.5%ずつ）ができ、黄枠の内側にぴったり収まる。
   黄色画像の構造: 箱部分は画像の上 18.9% より下（上 18.9% は #01 バッジ）。
   黒線の太さ・角丸は黄枠の箱の輪郭に合わせる。*/
.hearing-step-head-tx {
  position: absolute;
  /* 黄色画像の箱の輪郭（左右いっぱい・箱上端18.9%〜下端）から、
     四辺すべて同じピクセル量だけ内側に入れる（＝黄色帯を四辺均等に）。
     横長でも左右と上下の黄帯を揃えるため、scale でなく同 px の inset を使う。*/
  /* 黄色帯の幅。どんな画面幅でも四辺均一にするため、cap を付けず純 vw で持つ
     （cap(8px)を付けると 1920px 以上で頭打ちし、カードが大きくなるほど帯の比率が
     崩れて不均一に見えるため）。vw はカード画像と同じく画面幅に比例するので、
     帯は全サイズで同じ比率を保ち、四辺とも同じ px になる。*/
  --hr-step-gap: 1.8264cqw;
  /* 黄色画像が左右1px非対称（右に余白）なので、右をわずかに広げて左右を揃える。*/
  left: var(--hr-step-gap);
  right: calc(var(--hr-step-gap) + 1px);
  bottom: var(--hr-step-gap);
  /* 上はバッジ分（箱上端18.9%）＋共通の黄色帯ぶん */
  top: calc(18.9% + var(--hr-step-gap));
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 0 5%;
  background-color: #fff;
  /* 白枠の黒線を、黄色の外側枠線と同じ太さに合わせる。黄色枠線は画像なので画面幅に
     比例して太さが変わる（実測 1.5px@1920）。白枠も vw 連動させて常に同じ太さにする
     （0.104vw ≒ レンダリング 1.7px@1920）。*/
  border: 0.4524cqw solid var(--hr-ink-strong);
  /* 白枠の角丸を黄枠（画像）の角丸に「同心」で合わせる。
     黄枠の外角丸は画像なのでカード幅に比例（実測 約38px@1920 render）。直線のすき間は
     約7.5px なので 白の外角丸 = 38 − 7.5 ≒ 30.5px(render) = CSS約35.5px = 1.85vw。
     画像と同じく比例拡大させるため上限(cap)は付けない（付けると最大幅で白だけ頭打ちして
     角が黄色よりキツくなる）。min だけ残して超小画面で潰れないようにする。*/
  border-radius: max(14px, 8.0443cqw);
  box-sizing: border-box;
}
.hearing-step-title {
  margin: 0;
  color: var(--hr-red);
  /* カード幅に純比例（上限なし）。上限(clamp max)を付けるとカードが縮み始めても
     フォントが最大値に張り付き、比率が崩れて #06 のサブ文字が折り返す。係数は 1536px
     (hold境界・カード幅445px)で従来の上限値と一致するよう再校正（45px÷5.18=8.687）。
     hold帯(≥1536px)ではカードが固定なので上限が無くても巨大化しない。*/
  font-size: max(2rem, 8.687cqw);   /* Figma 45px（1536px時）→以下は比例 */
  line-height: 1.25;
  letter-spacing: 0.05em;
}
.hearing-step-text {
  margin: 0.3em 0 0;
  color: var(--hr-ink);
  /* カード幅に純比例（上限なし）。35px÷5.18=6.757。これで #06「書類・出荷・入金を確認」が
     全幅で1行を維持したまま比例縮小する（従来は上限3.5remに張り付き1300pxで折返していた）。*/
  font-size: max(1.5rem, 6.757cqw); /* Figma 35px（1536px時）→以下は比例 */
  line-height: 1.2;
  letter-spacing: 0.04em;
}
/* 写真（枠2px黒・角丸40px）*/
.hearing-step-photo {
  display: block;
  width: 100%;
  /* 写真の高さ・上マージン・角丸もカード幅に純比例（上限なし）。カードが縮んでも
     写真だけ最大値に張り付いて縦長化しないよう、1536px時の値と一致する係数に再校正
     （高さ400÷5.18=77.22 / 上マージン22÷5.18=4.247 / 角丸40÷5.18=7.722）。*/
  height: max(180px, 77.22cqw);      /* Figma 400px（1536px時）→以下は比例 */
  margin-top: max(10px, 4.247cqw);
  object-fit: cover;
  border: 2px solid var(--hr-ink-strong);
  border-radius: max(20px, 7.722cqw); /* Figma 40px（1536px時）→以下は比例 */
  box-sizing: border-box;
}

/* まとめバナー（店長とは前に立つより後ろで支える仕事。）*/
.hearing-what-conclusion {
  position: relative;
  /* 三角をカード写真下端とバナー枠線の縦中央に。上下の隙間を均等（各 render≈20px）。
     三角1.5倍(render h≈35)＋上下20px で従来の総距離74pxを保つ＝バナー位置は不変。*/
  margin: clamp(14px, 1.6807cqw, 23px) auto 0;
  text-align: center;
}
/* バナー上の下向き三角 */
.hearing-what-conclusion-arrow {
  display: block;
  width: clamp(30px, 3.4794cqw, 48px);        /* Figma 32px の 1.5倍 = 48px */
  height: auto;
  /* カード写真下端〜バナー枠線の縦中央に来るよう、上(margin-top)と同値で下の隙間を均等化。*/
  margin: 0 auto clamp(14px, 1.6807cqw, 23px);
}
/* 白箱＋黒枠＋黄下線ハイライト。テキストは Dela、赤強調。*/
.hearing-what-conclusion-text {
  display: inline-block;
  margin: 0;
  /* Figma: バナー幅1149＝テキスト1088＋左右padding約30.5px。旧4vw(左右)は過大で横に広すぎ→1.59vw。*/
  padding: clamp(14px, 2.2224cqw, 26px) clamp(12px, 2.2085cqw, 30px);
  background-color: #fff;
  border: 2px solid var(--hr-ink-strong);
  border-radius: 20px;
  color: var(--hr-ink-strong);
  font-size: clamp(1.8rem, 3.6114cqw, 5rem);    /* Figma 50px=2.6vw（黒字部分）*/
  line-height: 1.2;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
/* 赤い強調部分（前に立つより後ろで支える）＝ 黄下線ハイライト付き・少し大きい */
.hearing-what-conclusion-em {
  color: var(--hr-red);
  font-size: clamp(1.05em, 1.2em, 1.2em);   /* Figma 60/50 = 1.2em */
  background: linear-gradient(transparent 60%, var(--hr-yellow-band) 60%);
}
/* まとめバナー：1列表示の幅では nowrap のまま文字列(約360px)が画面からはみ出すため
   折り返しを許可（※基底の nowrap より後に書き、同一詳細度の後勝ちで上書きする）。
   文字は下限(18px)張り付きで小さく見えるため、幅追従(cqw)で一段引き上げる。*/
@container (max-width: 600px) {
  .hearing-what-conclusion-text {
    white-space: normal;
    line-height: 1.5;
    font-size: clamp(2.1rem, 6.4cqw, 2.8rem);
  }
}
/* 上の折返し許可域(≦600px)では文が必ず2行になる（文字下限28px×19字 > 箱600px）ため、
   自然折返しに任せず「前に立つより／後ろで支える」の指定位置で改行させる。
   1行で収まる601px以上では br を消す（既定は改行あり＝「広い幅で消す」方向で制御）。*/
@container (min-width: 600.02px) {
  .hearing-what-conclusion-br { display: none; }
}

/* ============================================================
   店長になってみて、どうだった? Q&A
============================================================ */
.hearing-qa {
  /* interview 型：固定幅 1382px を上限に、狭めると左右余白から詰める→最小5%で90%幅に。*/
  width: min(var(--hr-w-main), calc(100% - 2 * var(--hr-gutter)));
  margin-inline: auto;
  /* 真のhold：中身のサイズ基準を箱幅(cqw)に。箱がholdする間は中身も固定。*/
  container-type: inline-size;
  /* Figma: バナーgroup bottom2447→見出しtop2522 = 75px。旧6vwは過大（render158px）。
     section margin は zoom 外なので等倍。qa-inner padding-top と合算で render≈64〜70px を狙う。*/
  margin-top: clamp(20px, 2.2vw, 42px);
}
.hearing-qa-head {
  position: relative;   /* 黄背景(::before)より前面に */
  z-index: 1;
  text-align: center;
}
/* 見出しバッジ（白・角丸・店長になってみて、どうだった?）*/
.hearing-qa-heading {
  position: relative;                        /* 下向きしっぽの基準 */
  display: inline-block;
  margin: 0 auto;
  /* Figma: 吹き出し幅673＝テキスト590＋左右padding41.5px。旧3vw(左右)は過大で横に広すぎ→2.16vw。*/
  padding: clamp(10px, 1.9446cqw, 22px) clamp(18px, 3.0002cqw, 41px);
  background-color: #fff;
  border: 2px solid var(--hr-ink-strong);
  /* 長方形寄り（角の丸い長方形）。Q・回答の吹き出しと同じ丸み。旧 999px(pill) から変更。*/
  border-radius: clamp(14px, 1.5973cqw, 22px);
  color: var(--hr-ink);
  font-size: clamp(1.8rem, 3.2503cqw, 4.5rem);  /* Figma 45px=2.34vw */
  line-height: 1.7;   /* 継承値(body 1.7)を明示固定。下の黄パネル::before の top 計算式の前提 */
  letter-spacing: 0.05em;
  /* しっぽの寸法（Q&A/インタビューの二重三角と同手法）*/
  --qh-tail-h: clamp(11px, 1.3057cqw, 18px);
  --qh-tail-w: clamp(9px, 1.0834cqw, 15px);
}
/* 下向きしっぽ：外側の黒三角（文章のちょうど中央＝box中央下）*/
.hearing-qa-heading::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(-1 * var(--qh-tail-h));
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: var(--qh-tail-h) var(--qh-tail-w) 0 var(--qh-tail-w);
  border-color: var(--hr-ink-strong) transparent transparent transparent;
}
/* 下向きしっぽ：内側の白三角（枠線 2px ぶん内側に。中央に揃える）*/
.hearing-qa-heading::after {
  content: "";
  position: absolute;
  left: 50%;
  /* 白三角を ::before と同サイズにして 2.5px 上へ。付け根の吹き出し下ボーダーを覆いつつ、
     ::before との縦ズレで黒縁を均一に残す（口の線＝要らない線を消す）。*/
  bottom: calc(-1 * var(--qh-tail-h) + 2.5px);
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: var(--qh-tail-h) var(--qh-tail-w) 0 var(--qh-tail-w);
  border-color: #fff transparent transparent transparent;
}
/* キャッチ（ここでしか聞けない!? 店長のぶっちゃけ話）＝ Dela、白＋黄、黒フチ。
   surprising.png（赤いギザギザ）を背景装飾として後ろに敷く。*/
/* キャッチ＝「箱コンテナ化」方式。
   箱（.hearing-qa-catch）の幅ルールは従来のまま（振る舞い不変）。箱自身を
   コンテナ化し、中身（sm/lg文字・黒フチ・装飾）をすべて「箱幅%（cqw・clampなし）」の
   純粋な比率で持つ。装飾(幅100%)と文字が常に同じ物差しになり、箱がどう伸縮しても
   1920px時（箱1051px: lg100・sm80・フチ3・装飾top59）の相似形が保たれる。*/
.hearing-qa-catch {
  position: relative;
  /* Figma: 見出しrect bottom2610.79→キャッチtop2639.78 = 29px=1.51vw。旧2.6vwは広め。*/
  margin: clamp(14px, 2.0974cqw, 29px) auto 0;
  /* Figma: 装飾幅 1051px ＝ 画面1920の54.74%。インナー(1608)基準の % だと
     狭くなる（880px）ため、画面基準の vw で指定。中央寄せで左端434・右端1485となり
     Figma の装飾 bounds に一致する。*/
  width: min(76.0339cqw, 1051px);
  text-align: center;
  container-type: inline-size;   /* ここから内側の cqw の基準＝この箱幅 */
}
.hearing-qa-catch-deco {
  position: absolute;
  left: 0;
  top: 5.6137cqw;             /* Figma: 59px ÷ 箱1051px。箱幅と同率でスケール */
  width: 100%;                /* = キャッチ幅 ≒ Figma 装飾幅1051px */
  height: auto;               /* 自然な縦横比（幅×350/2103 ≒ 175px = Figma h174.99）*/
  pointer-events: none;
  z-index: 0;
}
.hearing-qa-catch-text {
  position: relative;
  z-index: 1;
  margin: 0;
  line-height: 1.15;
  letter-spacing: 0.05em;
  /* 黒フチ付き（薄ベージュ背景でも白文字が読めるよう）。0.2854cqw=箱1051px時3px */
  -webkit-text-stroke: 0.2854cqw var(--hr-ink-strong);
  paint-order: stroke fill;
}
.hearing-qa-catch-sm {
  display: block;
  color: #fff;
  font-size: 7.6118cqw;       /* Figma 80px ÷ 箱1051px */
  white-space: nowrap;
}
.hearing-qa-catch-lg {
  display: block;
  color: #fff;
  font-size: 9.5147cqw;       /* Figma 100px ÷ 箱1051px */
  white-space: nowrap;
}
.hearing-qa-catch-em {
  color: #ffcd53;                           /* ぶっちゃけ話＝黄（#FFCD53 指定）*/
}

/* Q&A 全体ラッパ＝ #FFEEC7 の背景パネル（Figma 長方形7864）。
   Figma(1920): 幅1606px（画面83.6%・hearing-what と同じ幅）、角丸40px。*/
.hearing-qa-inner {
  position: relative;                          /* 黄背景(::before)の位置基準 */
  margin-top: 0;
  /* 上 padding を圧縮（旧3vw=見出し上の余白過大の主因）。下 padding は枠下の余白として維持。*/
  padding: clamp(8px, 1.6668cqw, 23px) 0 clamp(32px, 5.556cqw, 78px);
  background-color: transparent;               /* 黄背景は ::before で描く（上端だけ下げるため）*/
  box-sizing: border-box;
}
/* #ffeec7 の黄背景。上端を見出し吹き出しの y 中央に合わせ（背景を上側だけ短く）、
   下端はパネル下端のまま。境目に角丸を付けたいので gradient でなく角丸長方形の ::before で描画。*/
.hearing-qa-inner::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* 吹き出し（.hearing-qa-heading）の y 中央に厳密一致させる計算式。
     旧: 固定の clamp(48px, 6.0699cqw, 110px) ＝ 見出しとは別の物差しのため、
         中間幅で境目が中央から最大8px程度ズレていた。
     新: 見出しの実寸チェーンと同一の式で組む＝どの幅でも定義上ズレない。
       top = inner上padding + 見出し高さ/2
           = clamp(8,1.6668cqw,23)                       …qa-inner の padding-top と同式
           + 0.85 × clamp(1.8rem,3.2503cqw,4.5rem)       …(line-height1.7 × font)/2
           + clamp(10px,1.9446cqw,22px)                  …(上下padding×2)/2
           + 2px                                          …(border 2px×2)/2  */
  top: calc(clamp(8px, 1.6668cqw, 23px)
       + 0.85 * clamp(1.8rem, 3.2503cqw, 4.5rem)
       + clamp(10px, 1.9446cqw, 22px)
       + 2px);
  background-color: var(--hr-yellow-soft);     /* #ffeec7 */
  border-radius: clamp(20px, 2.8891cqw, 40px);    /* Figma 40px */
  z-index: 0;
}

/* 二重枠（外側）＝ インタビューのプロフィール枠と同じ三層構造。
   「黒2px ＋ 黄色帯 ＋ 黒2px」。border で黄色帯、box-shadow で内外に黒2px。
   Figma: 黄枠 幅1450px（背景1606px の約90.3%）→ 背景の中に左右で余白。*/
.hearing-qa-blocks {
  position: relative;
  z-index: 1;                                 /* 黄背景(::before)より前面に */
  width: 90.3%;                               /* Figma 1450/1606 ≒ 90.3% */
  /* Figma: キャッチ(surprising含む)下端→枠top = 15.25px。ただし surprising.png は
     絶対配置でキャッチ箱より下にはみ出すため、その分も足して隙間を確保（実測で調整）。*/
  margin: clamp(20px, 3.0558cqw, 42px) auto 0;
  /* padding 無し：黄帯の内側に隙間を作らず、方眼の白箱を黒線のすぐ内側まで延長。
     黄帯は border のみが担当（内側の黄色い余白はデザイン上不要のため削除）。*/
  padding: 0;
  background-color: var(--hr-yellow-frame);   /* 黄色帯 #ffde8e（border と同色）*/
  border: clamp(6px, 1.0834cqw, 15px) solid var(--hr-yellow-frame); /* 黄色帯の太さ（インタビュー10px相当）*/
  border-radius: clamp(20px, 2.8891cqw, 40px);   /* Figma 40px */
  /* 外側の黒線（黄帯の外）。内側の黒線は白方眼箱の border が担当する。
     ※ inset で内側黒線を描くと、padding 0 の子（白箱）に覆われて消えるため、
        内側黒線は子要素の border で持たせる。*/
  box-shadow: 0 0 0 2px var(--hr-ink-strong);
}
/* 白内枠（方眼背景）。黄帯のすぐ内側に密着し、自身の黒 border が
   「三層枠の内側の黒線」になる（黄帯 → 黒線 → 方眼 の順）。*/
.hearing-qa-blocks-inner {
  padding: clamp(28px, 5.0004cqw, 68px) clamp(20px, 4.167cqw, 56px);
  background-color: #fff;
  /* 方眼メモリ背景（インタビューのプロフィール背景と同じ CSS 手法 = linear-gradient）。*/
  background-image:
    linear-gradient(to right, rgba(247, 89, 89, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(247, 89, 89, 0.08) 1px, transparent 1px);
  background-size: 20px 20px;
  /* この border が三層枠の「内側の黒線」になる。*/
  border: 2px solid var(--hr-ink-strong);
  /* 黄帯の内側の丸みに合わせる＝外側の丸み − 黄帯の幅（2.08vw − 0.78vw = 1.30vw／40−15=25px）。
     これで内側の黒線が黄帯の内側にピタリ沿い、角も含めて黄色帯が均一な太さになる（同心の丸）。*/
  border-radius: clamp(14px, 1.8057cqw, 25px);
}

/* 各 Q ブロック */
.hearing-qa-block + .hearing-qa-block {
  margin-top: clamp(36px, 6.1116cqw, 84px);
}
/* 質問行（Q円アイコン＋質問吹き出し）*/
.hearing-qa-q {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6668cqw, 22px);   /* 下限=1920px時(約19px)の6割。狭い画面で詰まりすぎない */
}
.hearing-qa-q-icon {
  flex-shrink: 0;
  width: clamp(48px, 5.7921cqw, 80px);           /* Figma 80px */
  height: auto;
}
/* 質問テキスト（吹き出し風・黒枠角丸＋左向きしっぽ）。
   インタビューページの Q 行ピル（白＋黒枠＋しっぽ）と同じ CSS 手法を流用。*/
.hearing-qa-question {
  position: relative;
  flex: 1;
  margin: 0;
  padding: clamp(12px, 1.9446cqw, 24px) clamp(18px, 2.778cqw, 36px);
  background-color: #fff;
  border: 2px solid var(--hr-ink-strong);
  /* インタビュー/know の吹き出しと同じ「角丸長方形」（両端は丸くしない）。
     インタビュー Q行ピル = 22px 相当（999px のピル形をやめる）。*/
  border-radius: clamp(14px, 1.5973cqw, 22px);
  color: var(--hr-ink-strong);
  /* 下限2.4rem = 本文(1.915rem)×1.25。狭めても必ず本文より大きく保つ */
  font-size: clamp(2.4rem, 2.1668cqw, 3rem);     /* Figma 30px=1.56vw */
  letter-spacing: 0.04em;
}
/* 吹き出しのしっぽ：外側ボーダー三角（左向き＝Qアイコン側）*/
.hearing-qa-question::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -12px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 12px 8px 0;
  border-color: transparent var(--hr-ink-strong) transparent transparent;
  transform: translateY(-50%);
}
/* 吹き出しのしっぽ：内側白三角 */
.hearing-qa-question::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -8px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 10px 6px 0;
  border-color: transparent #fff transparent transparent;
  transform: translateY(-50%);
}

/* 回答（アバター＋吹き出し）。柴崎=左アバター、木戸=右アバター。
   名前をアバター下に絶対配置するため position:relative を基準にする。*/
.hearing-qa-answer {
  position: relative;
  --hr-qa-avatar: clamp(48px, 5.7921cqw, 80px);  /* アバター径（名前の中央寄せ基準にも使う）*/
  display: flex;
  align-items: flex-start;
  gap: clamp(14px, 1.9446cqw, 26px);   /* 下限=1920px時(約22px)の6割 */
  margin-top: clamp(20px, 3.3336cqw, 44px);
}
.hearing-qa-answer-avatar {
  flex-shrink: 0;
  width: var(--hr-qa-avatar);                 /* Figma 80px */
  height: var(--hr-qa-avatar);
  border-radius: 50%;
  object-fit: cover;
  order: 0;
}
/* 回答の中身（名前・キャッチ・本文）を縦に */
.hearing-qa-answer-name,
.hearing-qa-answer-catch,
.hearing-qa-answer-body {
  /* 下のラッパに入れず、flex 直下に並ぶので、本文側を1つの塊にする */
}
/* 回答の塊（名前＋吹き出し）を1カラムに。名前は吹き出しの外（上）。*/
.hearing-qa-answer-main {
  flex: 1;
  min-width: 0;
}
/* 店長名：アバターの真下に中央寄せで配置する。
   absolute にして回答 main のフローから外すと、吹き出しが main 先頭へ繰り上がり
   アバター上端と揃う（Q行のアイコン＋吹き出しと同じ位置感になる）。*/
.hearing-qa-answer-name {
  position: absolute;
  left: calc(var(--hr-qa-avatar) / 2);        /* アバターの水平中心 */
  transform: translateX(-50%);                /* その中心に対して中央寄せ */
  top: calc(var(--hr-qa-avatar) + clamp(4px, 0.5556cqw, 8px));  /* アバター下端＋小さな余白 */
  margin: 0;
  color: var(--hr-ink);
  font-size: clamp(1.3rem, 1.3057cqw, 1.8rem);   /* Figma 18px=0.94vw */
  font-weight: bold;
  white-space: nowrap;                         /* 折り返さず中央寄せでアバター下に置く */
  text-align: center;
}
/* 回答の吹き出し（白＋黒枠＋角丸＋左向きしっぽ）。中にキャッチ＋本文。
   インタビューの A 行吹き出しと同じ CSS 手法を流用。*/
.hearing-qa-bubble {
  position: relative;
  padding: clamp(14px, 2.2224cqw, 28px) clamp(18px, 2.778cqw, 36px) clamp(16px, 2.5002cqw, 32px);
  background-color: #fff;
  border: 2px solid var(--hr-ink-strong);
  border-radius: clamp(14px, 1.9446cqw, 26px);     /* インタビュー 22px 相当 */
}
/* 吹き出しのしっぽ：外側ボーダー三角（左向き＝アバター側、上部）*/
.hearing-qa-bubble::before {
  content: "";
  position: absolute;
  top: clamp(20px, 2.778cqw, 36px);
  left: -12px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 12px 8px 0;
  border-color: transparent var(--hr-ink-strong) transparent transparent;
}
/* 吹き出しのしっぽ：内側白三角 */
.hearing-qa-bubble::after {
  content: "";
  position: absolute;
  top: clamp(22px, 2.9863cqw, 38px);
  left: -8px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 10px 6px 0;
  border-color: transparent #fff transparent transparent;
}
/* 見出し（質問・キャッチ）の手動改行。ふだんは非表示で、
   その要素が1行を保てなくなる幅（実測+10px）以下でのみ有効になる。
   改行位置は hearing.php 側の ＠指定（<br class="hearing-qa-br--幅">）*/
.hearing-qa-br { display: none; }
@media (max-width: 470px) { .hearing-qa-br--470 { display: inline; } }
@media (max-width: 460px) { .hearing-qa-br--460 { display: inline; } }
@media (max-width: 450px) { .hearing-qa-br--450 { display: inline; } }
@media (max-width: 430px) { .hearing-qa-br--430 { display: inline; } }
@media (max-width: 410px) { .hearing-qa-br--410 { display: inline; } }

/* キャッチ（吹き出しの中・上）＝ 薄赤下線ハイライト */
.hearing-qa-answer-catch {
  display: inline;
  margin: 0;
  color: var(--hr-ink);
  /* 下限2.4rem = 本文(1.915rem)×1.25。狭めても必ず本文より大きく保つ */
  font-size: clamp(2.4rem, 2.1668cqw, 3rem);     /* Figma 30px=1.56vw */
  letter-spacing: 0.04em;
  /* 文字全体を覆うマーカー（interview の .interview-qa-marker と同方式）。
     旧: linear-gradient(transparent 18%,…) は em箱の上18%が透明でグリフ上部が覆えなかった。
     solid の background-color にすると inline の背景がem箱(=グリフ全体)を覆う。*/
  background-color: var(--hr-pink);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 2px;
}
.hearing-qa-answer-body {
  margin: 0.7em 0 0;
}
.hearing-qa-answer-body p {
  margin: 0;
  color: var(--hr-ink);
  /* 本文は「1920pxの吹き出し幅(≒971px)で最長の指定行=59字が1行に収まる」よう拡大。
     ◯指定の改行は <br> で入れる(hearing.php)。フォントは狭くなっても保ち、折り返しで対応。
     19.15px × zoom0.859 ≒ 16.45px 実効、59字×16.45≒965px＜971px で1行に収まる。SP(≤667px)は下で14pxに。*/
  font-size: 1.915rem;
  line-height: 1.85;                           /* Figma leading 33.3/18 ≒ 1.85 */
}
/* ◯指定改行(<br>)は最大幅帯だけ表示し、狭くなったら一括解除＝自動折り返しに戻す。
   最長の指定行(59字)が1行に収まらなくなる幅＝コンテナ(.hearing-qa)≒1375px(画面幅≒1528px)で解除。
   （59字×16.45px≒965px。本文幅971pxがこの幅で965pxを下回るため。）*/
@container (max-width: 1375px) {
  .hearing-qa-answer-body br { display: none; }
}

/* Q&A のモバイル調整。interview/member1〜8 の SP デザインに合わせる：
   枠は細く（緑枠相当＝黄帯3px＋黒1.5px）、方眼は14px、文字は interview SP と同等
   （質問13.5px〜・本文14px〜）。667px = 下の @media（全幅化＋zoom解除）と同じ境界。
   ※旧: @container (max-width:667px) だったが、全幅化前はコンテナ幅≒画面の90%のため
     画面幅668〜741pxで先に発火し、SP の px 指定が zoom(0.859) のまま縮んで描画される
     ズレがあった。境界を完全一致させるため @media に統一（cqw は .hearing-qa の
     コンテナ基準のまま有効。≦667px では全幅化によりコンテナ幅＝画面幅）。*/
@media (max-width: 667px) {
  /* 三層枠を interview SP の細さに（黄帯 render≒2.6px ＋ 黒 render≒1.3px）*/
  .hearing-qa-blocks {
    border-width: 3px;
    border-radius: 16px;
    box-shadow: 0 0 0 1.5px var(--hr-ink-strong);
  }
  .hearing-qa-blocks-inner {
    padding: 20px 12px;               /* interview SP: 18px 14px 相当 */
    border-width: 1.5px;
    border-radius: 13px;              /* 外16px − 黄帯3px */
    background-size: 14px 14px;       /* 方眼 PC 20 → SP 14（interview と同じ）*/
  }
  /* 下の @media で zoom を 1 に戻すため、指定値がそのまま render される。
     interview SP と同値：質問/見出し 13.5〜14px・本文 14px。*/
  /* キャッチ（ここでしか聞けない!? 店長のぶっちゃけ話）：
     小画面では文字が小さくなりすぎるため「箱ごと」拡大する（文字だけ引き上げると
     装飾とのバランスが崩れるため）。線形式はコンテナ600pxで基準幅(76.0339%)と
     一致（段差なし）→ 縮むほど比率が上がり、コンテナ337px(≒375px端末)で100%幅。
     このとき lg ≒ 32px と、旧・文字引き上げ時と同等の読みやすさになる。*/
  .hearing-qa-catch { width: min(calc(45.32cqw + 184px), 100cqw, 1051px); }
  .hearing-qa-question { font-size: 1.75rem; }     /* 本文1.4rem×1.25 */
  .hearing-qa-answer-catch { font-size: 1.75rem; } /* 本文1.4rem×1.25 */
  .hearing-qa-answer-body p { font-size: 1.4rem; }
  .hearing-qa-answer-body { margin-top: 0.9em; }
  .hearing-qa-answer-name { font-size: 1.2rem; }
}

/* スマホ幅では Q&A の黄背景パネル(#ffeec7)を画面幅いっぱいまで広げる
   （interview SP の「QA箱が画面幅に伸びる」見た目に合わせる）。
   zoom(0.859) が残っていると全幅指定でも右に約10pxの隙間が出るため等倍に戻す。
   これで文字も指定値どおり render され、interview SP のサイズ感と一致する。*/
@media (max-width: 667px) {
  /* 上のモバイル調整（旧 @container）と同じ 667px 境界。全幅化＋zoom解除により
     px 指定が常に等倍で render される。*/
  .hearing-qa { width: 100%; }
  .hearing-qa-inner { zoom: 1; }
  .hearing-qa-inner::before { border-radius: 0; }
}

/* ============================================================
   MESSAGE（締め＋集合写真）
============================================================ */
.hearing-message {
  /* interview 型：MESSAGE は固定幅 1103px（他セクションより狭い）を上限に、最小5%で90%幅に。*/
  width: min(var(--hr-w-msg), calc(100% - 2 * var(--hr-gutter)));
  /* 真のhold：中身のサイズ基準を箱幅(cqw)に。箱がholdする間は中身も固定。*/
  container-type: inline-size;
  margin: clamp(56px, 7vw, 130px) auto clamp(56px, 7vw, 120px);
}
.hearing-message-inner {
  /* 幅はセクション枠(.hearing-message)が 1103px で持つので内側は 100%（旧 57.45% 上書きは撤去）。*/
  /* Figma準拠のフロート型：写真を右上に float し、文章が左＆下に回り込む。
     flow-root で float を内包（高さに含める・text が回り込む）。旧 flex から変更。*/
  display: flow-root;
}
.hearing-message-text {
  /* 通常ブロック（BFCを作らない）＝ 行が写真(float)に回り込む。旧 flex:1/min-width:0 は撤去。*/
}
.hearing-message-heading {
  margin: 0 0 clamp(16px, 3.482cqw, 38px);
  color: var(--hr-red);
  font-size: clamp(2.4rem, 4.5266cqw, 5rem);      /* Figma 50px=2.6vw */
  letter-spacing: 0.04em;
  /* 見出し文字を黒フチで縁取り（Figma には無い追加。赤字＋黒フチ）。
     paint-order で塗り(赤)を前・線(黒)を後ろにして赤面をつぶさない。*/
  -webkit-text-stroke: clamp(1.5px, 0.2263cqw, 2.5px) var(--hr-ink-strong);
  paint-order: stroke fill;
}
.hearing-message-body p {
  margin: 0 0 1.2em;
  color: var(--hr-ink);
  font-size: clamp(1.5rem, 2.2633cqw, 2.5rem);   /* Figma 25px=1.30vw */
  line-height: 2;                             /* Figma leading 50/25 = 2 */
}
.hearing-message-body p:last-child {
  margin-bottom: 0;
}
/* 集合写真（右上に float、文章が回り込む）*/
.hearing-message-photo {
  position: relative;
  float: right;
  /* Figma: 画像685px ÷ MESSAGEコンテンツ1284px ≒ 53.35%（rendered≒588px＝Figma685×zoom0.859）。
     コンテンツに比例するので画面幅が変わっても Figma と同率を保つ。*/
  width: 53.35%;
  /* 回り込む文章との余白（左＝文章との間、下＝下の全幅行との間）*/
  margin: 0 0 clamp(10px, 2.0892cqw, 24px) clamp(16px, 3.1338cqw, 34px);
}
.hearing-message-photo-back {
  position: absolute;
  /* Figma: 影プレートのオフセット 12px。画像幅685px→1.75%／高さ404px→2.97%。
     画像に対する比率で持つと、画面幅が変わっても常に同じ見え方（≒Figma同率）になる。*/
  left: 1.75%;
  top: 2.97%;
  width: 100%;
  height: 100%;
  border-radius: 20px;
}
.hearing-message-photo-surface {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  border: 2px solid var(--hr-ink-strong);
  border-radius: 20px;
  box-sizing: border-box;
}
/* MESSAGE のモバイル再構成（.hearing-message のコンテナ幅基準）。
   写真の右上フロートだと 1 段落目が写真の左の狭い列に押し込まれるため、
   「見出し → 本文 → 写真（全幅）」の縦積みに切り替える。*/
@container (max-width: 600px) {
  .hearing-message-inner { display: flex; flex-direction: column; }
  /* text ラッパを透過し、見出しと本文を写真の前後に並べ替えられるようにする */
  .hearing-message-text { display: contents; }
  .hearing-message-heading { order: -1; margin-bottom: clamp(12px, 3cqw, 20px); }
  .hearing-message-body { order: 0; }
  .hearing-message-photo {
    float: none;
    order: 1;
    width: 100%;
    margin: clamp(14px, 4cqw, 24px) 0 0;
  }
}

/* #3: ウィンドウが狭くなり、指定改行(<br>)のままだと窮屈に折り返す幅になったら、
   <br> を解除して自然に流す（写真フロートに回り込みつつ、連続テキストで折り返し）。
   写真は float のままなので #2「文章と画像は重ならない」は全幅で維持される。
   実測: 1200px前後まで Figma の改行がきれいに1行で収まり、それ未満で溢れ始めるため 1150px で解除。*/
@media (max-width: 1150px) {
  .hearing-message-body br { display: none; }
}

/* ★2026-08-07 B-1(記号の全角統一)の見た目補正
   「ここでしか聞けない！？」の全角約物2文字ぶんの左右の空きを詰め、半角時の字面に戻す */
.hearing-qa-catch-bang {
  margin-inline: -0.26em;
  letter-spacing: -0.12em;
}