/* ============================================================
   KABUKI case.css（導入事例ページ専用）
   Figma: node 443:2610（PC）/ 455:3826（SP）
   色・フォント値は必ず tokens.css の var() を参照する。
   tokens.css に無い値（淡いグレー背景・タグの淡色背景等）は
   var() から color-mix() で導出し、根拠をコメントに残す
   （company.css / ai-marketing.css と同じ方針）。
   ============================================================ */

/* ================================================
   p-case__hero
   Figma: node 443:2610 内 hero-wrapper（446:3074, y=93〜348）
   ================================================ */
.p-case__hero {
  /* 出典: 田中指摘（周囲セクションとの背景色ズレ）。get_variable_defs(448:3265)
     "KABUKI/Gray": #f7fbf9 = --color-bg-section に統一（旧: --color-white、2026-07-31修正）。 */
  background-color: var(--color-bg-section);
}

.p-case__hero-inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-block: 40px 32px;
}

@media (min-width: 768px) {
  .p-case__hero-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-block: 64px;
  }
}

/* 2026-08-03 SOTA決定（Hero見出しブロックのカノニカル型統一）: 英語見出し
   「Cases」を上・日本語ラベル「導入事例」を下にしたDOM順に変更。旧実装は
   SPのみ横並び（row+baseline、order:-1で英語を視覚的に先出し）だったが、
   SP/PCとも縦積み・左揃えに統一し order ハックを撤去（他ページと共通の
   ブロック構造）。 */
.p-case__hero-heading-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.p-case__hero-eyebrow {
  /* 2026-08-03 SOTA決定: 全ページ共通の日本語ラベルサイズ（SP=fs-14 / PC=fs-18）に統一
     （旧実装はブレークポイント共通18pxだった）。 */
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  color: var(--color-black);
}

@media (min-width: 768px) {
  .p-case__hero-eyebrow {
    font-size: var(--fs-18);
  }
}

.p-case__hero-title {
  /* 2026-08-03 SOTA決定: 全ページ共通の英語見出しサイズ（SP=fs-32 / PC=fs-48*2）に統一
     （旧実装はSP側がfs-32*1.5=48pxの近似値だった）。 */
  font-size: var(--fs-32);
  color: var(--color-black);
}

@media (min-width: 768px) {
  .p-case__hero-title {
    font-size: calc(var(--fs-48) * 2);
  }
}

.p-case__hero-image {
  /* 出典: 実素材が横長（PC 1004x510 / SP 482x256）のため、
     ai-marketing/hero.php と同じ横長比率の幅指定に変更（旧180x180/280x280の正方形から変更）。 */
  width: 100%;
  max-width: 482px;
  align-self: center;
}

@media (min-width: 768px) {
  .p-case__hero-image {
    width: 420px;
    max-width: none;
    flex-shrink: 0;
  }
}

/* ================================================
   p-case__photo-placeholder（会社ロゴ・サイトスクショ・顔写真の共通コンテナ）
   実画像に差し替え済み（2026-07-24）。コンテナ div（角丸・overflow:hidden）は
   パターンB方式のまま維持し、中身のみグレー透かし→実画像に置換した。
   ================================================ */
.p-case__photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  overflow: hidden;
}

.p-case__photo-placeholder picture {
  display: block;
  width: 100%;
}

.p-case__photo-placeholder img {
  display: block;
  width: 100%;
  height: 100%;
  /* 高さ固定のコンテナ（--logo/--portrait）では実際にクロップ/収縮に効く。
     高さ自動のコンテナ（hero-image/screenshot）では height:100% が auto 相当に
     解決されるため、object-fit は無害（実質 width:100%; height:auto と同じ挙動）。 */
  object-fit: cover;
}

.p-case__photo-placeholder--logo {
  width: 120px;
  height: 48px;
  border-radius: 6px;
  flex-shrink: 0;
}

.p-case__photo-placeholder--logo img {
  /* ロゴを切り抜かず全体を収める */
  object-fit: contain;
}

.p-case__photo-placeholder--portrait {
  width: 130px;
  height: 130px;
  border-radius: 999px;
  flex-shrink: 0;
}

/* ================================================
   p-case__intro（「導入事例」見出し + タブ）
   Figma: 見出し（448:3182, y=380）+ タブ行（458:4191 Frame 447, y=468）
   ================================================ */
.p-case__intro {
  background-color: var(--color-white);
  padding-block: 8px 32px;
}

.p-case__intro-heading {
  font-size: var(--fs-24);
  font-weight: var(--fw-bold);
  text-align: center;
  color: var(--color-black);
}

@media (min-width: 768px) {
  .p-case__intro-heading {
    font-size: var(--fs-32);
  }
}

.p-case__tabs-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
}

@media (min-width: 768px) {
  .p-case__tabs-list {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    /* 出典: get_design_context(458:4191) Frame 447 gap-[20px]（旧16pxから修正、2026-07-29） */
    gap: 20px;
  }
}

.p-case__tab {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 出典: get_design_context(458:4191) Button/AnchorLink px-[20px] py-[15px]（旧12px 20pxから修正） */
  padding: 15px 20px;
  /* 出典: 同上 border border-[#0d0d0d]（旧--color-grayから修正、2026-07-29） */
  border: 1px solid var(--color-black);
  border-radius: var(--radius-pill);
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  color: var(--color-black);
  text-align: center;
}

/* 出典: get_design_context(458:4191) はPCフレームで text-[14px] 固定
   （デスクトップでも14pxのまま。旧・768px以上でfs-16へ拡大していたのを削除、2026-07-29） */

/* ================================================
   p-case__entry（CASE01〜03 共通ブロック）
   Figma: case01_paketfabric（448:3265）/ Frame 136（448:3417）/
   Frame 489（471:2400, Rectangle 87 背景あり）。
   3ブロックとも淡いグレー背景で統一実装（判断。完了報告参照）。
   ================================================ */
.p-case__entry {
  padding-block: 24px;
}

.p-case__entry-inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px 20px;
  /* 出典: get_variable_defs(448:3265) "KABUKI/Gray": #f7fbf9 = --color-bg-section。
     旧: color-mix() による近似値から、確定トークンへ修正（2026-07-29）。 */
  background-color: var(--color-bg-section);
  /* 出典: get_variable_defs(448:3265) "Fills - Vibrant/Primary": #cccccc（3ブロック共通の枠線。旧実装は枠線なし）。
     2026-07-29: 局所トークン --case-border-fill を廃止し、tokens.css のグローバル
     --color-table-border（#CCCCCC、同じFigma変数が出典）に統合。 */
  border: 1px solid var(--color-table-border);
  border-radius: 16px;
}

@media (min-width: 768px) {
  .p-case__entry-inner {
    gap: 32px;
    padding: 50px;
  }
}

/* ⚠️ 構造差（2026-07-30 見た目突合で発見・修正）: SPの実機描画は「バッジ+ロゴが
   中央揃えで縦に積まれ、その下に社名・見出し・タグが左揃え全幅で続く」構成
   （出典: get_metadata 459:4423 Frame463 x=51.5 width=210 が親313幅の中央、
   内部 Frame414(badge) y=0 height28 → logo_packet_header 2 y=58 height48
   の縦積み。471:2401 CASE03含む全社共通）。旧実装はPCと同じ「バッジ+社名+見出し
   +タグを左カラム、ロゴを右カラムに横並び」のままSPにも適用されており、
   ロゴとの横並びで社名テキストの幅が圧迫され不要な折り返しが発生していた。
   HTML構造（badgeがheader-mainの子）を変えずに実現するため、SPのみ
   header-mainをdisplay:contentsで透過し、バッジ/ロゴ/社名/見出し/タグを
   headerの直下フレックスアイテムとして並べ替える（order指定）。768px以上は
   従来どおりheader-mainを実体化し、PCの見た目を非破壊で維持する。 */
.p-case__entry-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.p-case__entry-header-main {
  display: contents;
}

@media (min-width: 768px) {
  .p-case__entry-header {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
  }

  .p-case__entry-header-main {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
  }
}

.p-case__badge {
  /* SP: header直下フレックスアイテムとしてバッジ→ロゴの順で中央に積む（order 1）。
     badge→logo間の縦ギャップ≈30px（出典: 459:4423 badge高28、logo y=58 → 差30px。
     header基準gap8pxとの差分22pxをmargin-bottomで補う） */
  order: 1;
  margin-bottom: 22px;
  display: inline-flex;
  align-items: center;
  /* 出典: get_design_context(471:2401) Frame414 px-[10px] py-[5px]（旧4px 14pxから修正、2026-07-29） */
  padding: 5px 10px;
  /* 出典: 同上 KABUKI Corporate Montserrat/14px-Bold（旧fs-12・フォント指定なしから修正） */
  font-family: var(--font-en);
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  background-color: var(--color-black);
  border-radius: var(--radius-pill);
}

@media (min-width: 768px) {
  .p-case__badge {
    order: initial;
    margin-bottom: 0;
    align-self: flex-start;
  }
}

.p-case__company {
  /* SP: header直下フレックスアイテム（order 3=バッジ/ロゴの下）。全幅・左揃え
     （出典: 459:4423 Frame491 x=0 width=313=親フル幅）。768px以上は解除。 */
  order: 3;
  align-self: flex-start;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  color: var(--color-black);
}

@media (min-width: 768px) {
  .p-case__company {
    order: initial;
    align-self: auto;
    width: auto;
  }
}

.p-case__company-bullet {
  color: var(--color-red);
  /* 出典: get_design_context(448:3237等) text-[#da0000] text-[16px]（旧fs-12から修正、2026-07-29） */
  font-size: var(--fs-16);
}

.p-case__heading {
  /* SP: header直下フレックスアイテム（order 4）。全幅・左揃え（company と同様） */
  order: 4;
  align-self: flex-start;
  width: 100%;
  font-size: var(--fs-18);
  font-weight: var(--fw-bold);
  line-height: var(--lh-jp);
  color: var(--color-black);
}

@media (min-width: 768px) {
  .p-case__heading {
    order: initial;
    align-self: auto;
    width: auto;
    /* 出典: get_design_context(448:3238等) KABUKI Corporate/22px-Bold（旧fs-24から修正、2026-07-29） */
    font-size: var(--fs-22);
  }
}

.p-case__tag-list {
  /* SP: header直下フレックスアイテム（order 5）。全幅・左揃え（company と同様） */
  order: 5;
  align-self: flex-start;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

@media (min-width: 768px) {
  .p-case__tag-list {
    order: initial;
    align-self: auto;
    width: auto;
  }
}

.p-case__tag {
  display: inline-flex;
  align-items: center;
  /* 出典: get_design_context(471:2401) Tag component px-[11px] py-[4px]（旧2px 12pxから修正、2026-07-29） */
  padding: 4px 11px;
  /* 出典: 同上 KABUKI Corporate/10px-Regular text-black、bg指定なし（透過）
     旧: fs-12・bold・gray-text・白背景から修正 */
  font-size: var(--fs-10);
  font-weight: var(--fw-regular);
  color: var(--color-black);
  background-color: transparent;
  border: 1px solid var(--color-black);
  border-radius: var(--radius-pill);
}

.p-case__entry-logo {
  /* SP: header直下フレックスアイテム（order 2=バッジの下）。logo→社名間の
     縦ギャップ≈20px（出典: 459:4423 Frame463終端y=106、Frame491開始y=126 → 差20px。
     header基準gap8pxとの差分12pxをmargin-bottomで補う） */
  order: 2;
  margin-bottom: 12px;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .p-case__entry-logo {
    order: initial;
    margin-bottom: 0;
  }
}

/* ⚠️ 構造変更（2026-07-24）: 納品スクショが「PC=横長1枚に2サイト合成／
   SP=縦長1枚に縦積み」の単一画像のため、旧・2枚横並びレイアウトを廃止。
   PC/SPで画像そのもののアスペクト比が大きく異なる（PC 約1952:710の横長、
   SP 約626:948の縦長）ため、固定 aspect-ratio は使わず高さ自動（実寸比率）
   で表示する。 */
.p-case__screenshots {
  width: 100%;
}

.p-case__screenshot {
  width: 100%;
}

.p-case__quote-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 出典: get_design_context(448:3258等) 全CASE共通 text-[14px]（PCフレームでも14pxのまま）。
   旧: 768px以上でfs-16へ拡大していたのを削除（2026-07-29）。
   line-height: Figma実測 leading-[1.8]。tokens.css に --lh-body(1.8) 追加のため反映（2026-07-29）。 */
.p-case__quote-line {
  margin: 0;
  font-size: var(--fs-14);
  line-height: var(--lh-body);
  color: var(--color-black);
}

/* 出典: get_design_context(453:3513) 「・」箇条書き3行のみ Noto_Sans_JP:Bold（2026-07-30発見・修正） */
.p-case__quote-line--bold {
  font-weight: var(--fw-bold);
}

/* ⚠️ 2026-07-31修正（石黒指摘）: 段落間の空きは従来 &nbsp; のみを持つ空行 <p>
   （.p-case__quote-line--blank）を挿入して作っていたが、意味を持たない空要素を
   DOMに残す実装だったため、CSSのmarginで処理する方式に変更した。
   空行1行分の見た目（fs-14 × lh-body 1.8 ≈ 25.2px）と、.p-case__quote-block の
   flex gap（16px）を足した合計 ≈ 41px を、新しい段落グループ先頭の行に
   margin-top として付与する（旧実装の「gap16px + 空行高25.2px + gap16px」と
   同じ合計スペースになるよう算出）。 */
.p-case__quote-line--gap {
  margin-top: calc(16px + (var(--fs-14) * var(--lh-body)));
}

/* ⚠️ 出典: get_design_context(458:4270) SP版は署名が引用文と同じ左揃え（右揃えではない）。
   PC版（471:2392）は右揃えのまま（旧実装はSPにもPCのflex-endが漏れていた。
   2026-07-30 見た目突合で発見・修正）。 */
.p-case__signature {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

@media (min-width: 768px) {
  .p-case__signature {
    justify-content: flex-end;
  }
}

/* ================================================
   p-case__quote-block--has-photo（顔写真あり=CASE02/03）
   出典: get_metadata(448:3301 / 471:2397) — 引用文（左）と顔写真+署名の縦積み（右）が
   同じ y から始まる横並び2カラム構成（顔写真なしCASE01は従来どおり縦積み・右揃え）。
   2026-07-30 見た目突合で発見。SP側は未検証のため768px未満は縦積みのまま維持。
   ================================================ */
@media (min-width: 768px) {
  .p-case__quote-block--has-photo {
    flex-direction: row;
    align-items: flex-start;
    /* 出典: 448:3301(gap≈40px) / 471:2397(gap≈30px) の平均的な値として
       .p-case__entry-inner の768px以上gap(32px)と揃える */
    gap: 32px;
  }

  .p-case__quote-block--has-photo .p-case__quote {
    flex: 1;
    min-width: 0;
  }

  .p-case__quote-block--has-photo .p-case__signature {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
    /* 出典: get_metadata 448:3301(kasuya_photo width168.46) / 471:2397(Frame441 width152)。
       広い方の168pxに揃える（2026-07-30）。 */
    width: 168px;
    text-align: center;
  }
}

.p-case__signature-names {
  display: flex;
  flex-direction: column;
}

/* 出典: get_design_context(448:3307) 「代表取締役 粕谷哲 様」16px-Bold の下に
   「（バリスタ世界チャンピオン）」12px-Bold の2段構成（同一サイズの1行ではない）。
   2026-07-30 見た目突合で発見・修正。 */
.p-case__signature-sub {
  margin: 0;
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  color: var(--color-black);
}

.p-case__signature-text {
  /* 出典: get_design_context(448:3259 / 453:3478等) KABUKI Corporate/16px-Bold（旧fs-14から修正、2026-07-29） */
  margin: 0;
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  color: var(--color-black);
}