@charset "UTF-8";
/**
 * case-study.css — 導入事例 一覧ページ（archive-case-study.php）専用
 *
 * 読み込みは functions.php 144〜146行。case-common.css の後に読む（後勝ち）。
 * 共用部品（内容枠 .cs-inner ／ カード群 .cs-cards ／ カード .cs-card ／
 * CONTACT 帯 .cs-contact）は case-common.css 側にあるのでここでは持たない。
 *
 * このファイルが持つもの
 *   1. おすすめ機種 .cs-rec（2026-08-21 確定カンプで追加）
 *   2. イントロ文 .cs-intro
 *   3. カテゴリーのアンカー帯 .cs-nav
 *   4. カテゴリー節 .cs-sec（黒帯の小見出し＋カード群）
 *   5. 事例が1件も無いときの文言 .cs-empty
 *   6. 1199px 以下 ／ 768px 以下
 *
 * 寸法の出どころ
 *   確定ログ … figma-dump/inspect/confirm_20260821/case_list.txt（2026-08-21 確定版）
 *              セクション1・2 の「ログNN行」はこの行番号。
 *   旧ログ  … figma-dump/inspect/case_list/00_under.txt
 *              セクション3〜5 の「ログNN行」はこの行番号（節の追加で行がずれたため、
 *              書き換えると別の取り違えを生むので当時のまま残している。
 *              2つのログを突き合わせた結果、確定版で変わったのは
 *              おすすめ機種の節の追加とリード文の読点1つだけ）。
 *   PNG    … figma-dump/screenshots/confirm_20260821/case_list.png（等倍 1440px）
 *   改訂ログ … figma-dump/inspect/case_list_20260826/{recommended,page_link,sp}.txt
 *              （2026-08-26 安藤様 改訂版。CEO の Figma 複製 MxqqJWAYeUM9HrT4gVXU2Y から
 *                REST 全量ダンプ figma-dump/file_dupe_20260826.json を取って生成）。
 *              コメント中の「改訂ログNN行」はこの3本の行番号。
 *              改訂点＝(1) おすすめ機種の白箱が 110→150px になり機材写真2点が入った
 *                      (2) 赤帯の右端に白矢印 16×16 が入った
 *                      (3) カテゴリー目次が6→7個になり 4個＋3個の2段（SP は2列4段）
 *   改訂PNG  … figma-dump/screenshots/case_list_20260826/{recommended_pc,page_link_pc,sp_all}.png
 *
 * 1rem = 10px。カンプ幅 1440px 基準の可変指定（clamp の vw 値は
 * 「1440px のときの px 値」に一致する）。ブレイクポイントは max-width の単独指定。
 * 流用する既存クラス（.page-title / .bread / .ar 系）はここで再定義しない。
 */

/* =============================================================================
 * 1. おすすめ機種（ログ37〜64行 FRAME recommended_models [115,382,1325,786]）
 *
 * 白地・4px #EAEAEA 枠・内側 45px の箱。中身は上から
 *   見出し 28px → リード文 16px → 4カラム（赤帯＋白箱）。
 * 上の余白は .bread の下 padding 40px が持つ（カンプは箱の上端 y=382 ＝ パンくずの終わり）。
 * 下の 60px はカンプではリード文側の pad 上 60px（ログ65行）だが、
 * .cs-intro は他の場所からも使う可能性があるためこちらの下余白として持つ。
 * ========================================================================== */
.cs-rec {
  padding-bottom: clamp(4rem, 4.167vw, 6rem); /* ログ65行 txt pad 上 60px（箱とリード文のすき間） */
}

/* 箱は 1210px（x=115〜1325）で、このサイトの内容幅 1200px より左右 5px ずつ広い。
   .cs-inner（1200px）は使えないので、同じ式の幅ちがいをここに持つ。 */
.cs-rec__inner {
  max-width: 129rem; /* 固定: 1210 + 80 = 1290。コンテナの最大幅は固定値で持つ */
  margin-inline: auto;
  padding-inline: clamp(1rem, 2.7778vw, 4rem); /* 1440px で 39.6px ≒ カンプの左右余白 40px ／ SP カンプは 10px */
}

.cs-rec__box {
  /* ログ37行 pad=(45,45,45,45)。Figma の 45px は枠（4px・内側ストローク）と重なっているので、
     CSS では枠のぶんを引いて 41px にすると内容幅がカンプと同じ 1120px になる
     （assets/css/purchase.css 424行 .pur-demo__box と同じ考え方）。 */
  /* 固定: 上下はカンプが PC・SP とも 45px（枠 4px ぶんを引いて 41px）。
     左右は PC 45px → SP 15px なので可変（同じく 4px を引く）。 */
  padding: 4.1rem clamp(1.1rem, 2.8472vw, 4.1rem);
  border: 4px solid var(--color_line); /* 固定: 罫線は縮めると消えるため。ログ37行 stroke=4px #EAEAEA INSIDE */
  background: #fff;
}

/* ログ40行 28px / lh39.2 / 700 / #111111 / 中央。
   カンプではこの文字を Frame 4959 が囲み 1px の赤枠が指定されているが、
   Figma の実データで stroke の visible が false ＝描画されない（PNG にも出ていない）。
   枠は描かず、その枠が持つ下 padding 4px は下の余白に足してある。 */
/* 見出しの改行（改訂ログ SP 版は「用途に合わせて選べる／おすすめ機種」で2行）。
   🚨 2026-08-26 修正＝768px 以下で出していたが、768px でも不要に2行になっていた。
   実測＝見出し（22px・16文字）が1行に必要な幅は 370px、箱の内容幅は「画面幅 − 約75px」
   なので、画面幅 445px を切ると1行に入らなくなる。そこで 450px 以下でだけ出す
   （自然な折り返しに任せると「用途に合わせて選べるおすす／め機種」のような
   半端な位置で折れるため、カンプと同じ位置で折る）。
   1440px は1行・375px は2行でカンプどおり。 */
.cs-rec__head-br {
  display: none;
}

@media (max-width: 450px) {
  .cs-rec__head-br {
    display: inline;
  }
}

.cs-rec__head {
  margin-bottom: 3.4rem; /* 固定: 改訂ログ38〜39行 Frame 4959 の下 4px ＋ Frame 4958 の下 30px。PC・SP とも 34px */
  color: var(--color_dark);
  font-size: clamp(2.2rem, 1.9444vw, 2.8rem); /* ログ40行 28px */
  font-weight: 700;
  line-height: 1.4; /* ログ40行 lh39.2 / 28 */
  letter-spacing: .05em; /* ログ40行 字送り 1.4 / 28 */
  text-align: center;
}

/* ログ41〜42行 16px / lh25.6 / 500 / 中央・下 30px */
.cs-rec__lead {
  margin-bottom: 2rem; /* 固定: 改訂ログ41行 txt pad 下 20px（旧カンプは 30px だった）。PC・SP とも 20px */
  font-size: 1.6rem; /* 固定: 本文の最小サイズ（ログ42行 16px） */
  font-weight: 500;
  line-height: 1.6; /* ログ42行 lh25.6 / 16 */
  letter-spacing: .05em;
  text-align: center;
}

/* ログ43〜64行。1120px を4等分（各 280px）・すき間0の横並び。
   等分は grid で作る（flex の flex:1 1 0 だと列ごとの余白の差でずれるため）。
   罫線は「外枠の上と左＋各マスの右と下」で引く。この組み合わせなら
   列数・行数がいくつになっても隣どうしで二重にならない。 */
.cs-rec__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* カンプの罫線はマスの「外側」に引かれていて場所を取らない（Figma stroke OUTSIDE）。
     CSS の border は場所を取るので、上下の1本ぶんだけ戻して高さをカンプの 185px にそろえる
     （これで箱の高さがカンプどおり 404px になり、下に続く内容の位置がずれない）。 */
  margin-block: -1px;
  border-top: 1px solid var(--color_line); /* 固定: 罫線。ログ44行 stroke=1px #EAEAEA */
  border-left: 1px solid var(--color_line); /* 固定: 罫線 */
}

.cs-rec__item {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--color_line); /* 固定: 罫線 */
  border-bottom: 1px solid var(--color_line); /* 固定: 罫線 */
  background: #fff;
}

/* 赤帯（改訂ログ44〜45行 Frame 4862 280×75・fill #B80003・pad 左右 20・gap 10）。
   2行の行送りの合計 50.4px に上下 12px ずつで 75px（カンプ実測 y556〜631）。
   2026-08-26 改訂で右端に白矢印 16×16 が入り、横並び（HORIZONTAL）になった。 */
.cs-rec__band {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: clamp(.6rem, .694vw, 1rem); /* 改訂ログ44行 gap=10 */
  min-height: clamp(7rem, 5.2083vw, 7.5rem); /* 改訂ログ44行 75px ／ SP カンプ 70px */
  padding: clamp(1rem, .833vw, 1.2rem) clamp(1.2rem, 1.389vw, 2rem); /* ログ44行 左右 20px ／ 上下は 75px から逆算 */
  background: var(--color_main); /* ログ44行 fill=#B80003 */
  color: #fff;
  text-align: center;
}

/* 文字のかたまりは残り幅いっぱい（改訂ログ45行 テキストは layoutGrow=1 ＝ 214px）。
   矢印が右端に入ったぶん文字の中心は帯の中心より 13px 左になる。これはカンプどおり。
   min-width:0 は、長い型番でも縮んで矢印を押し出さないようにするため。 */
.cs-rec__band-txt {
  flex: 1 1 auto;
  min-width: 0;
}

/* 1行目（用途の説明句）。Figma の文字は基底 18px に見えるが、実データの
   styleOverrideTable でこの行だけ 16px に上書きされている（PC・SP とも 16px）。
   行送りは基底のまま lh21.6。固定値にしているのは、カンプが PC と SP の
   どちらでも 16px で、縮小しても変わらない設計だから。 */
.cs-rec__use {
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2; /* ログ45行 lh21.6 / 18 */
  letter-spacing: .05em; /* ログ45行 0.9 / 18 */
}

/* 2行目（型番）ログ45行 混在指定の 24px / lh28.8 / 700。 */
.cs-rec__model {
  display: block;
  font-size: clamp(2rem, 1.6667vw, 2.4rem);
  font-weight: 700;
  line-height: 1.2; /* ログ45行 lh28.8 / 24 */
  letter-spacing: .05em;
}

/* 製品詳細ページへのリンク（2026-08-25 ケンネット様ご返信 項目2）。
   2026-08-26 の改訂カンプで赤帯の右端に矢印が入り、それが導線の記号になったため、
   赤帯そのものをリンクにし、型番の下線は外した（改訂カンプの実データでも
   型番の textDecoration は無し）。

   🚨 ホバーは opacity .85 にしていたが、赤面ではほとんど変化が見えず
   「押せる」ことが伝わらなかった（2026-08-26 CEO 指摘）。
   カンプの hover 指定フレーム（node 99:1369）は「赤い面（#B80003）は
   hover で #7C0002 に暗くする」で、サイトの他の赤ボタン（common.css 919行・
   case-common.css 396行ほか）も全てこれに従っている。同じ語彙にそろえる。
   キーボード操作でも同じ表示になるよう :focus-visible も併記する。 */
.cs-rec__band--link {
  text-decoration: none;
  transition: var(--transition);
}
.cs-rec__band--link:hover,
.cs-rec__band--link:focus-visible {
  background: var(--color_main_dark); /* Figma hover フレーム main_color_dark #7C0002 */
}

/* 白箱（改訂ログ46〜47行 Frame 4865 280×150・fill #FFFFFF・pad 左右 20）。
   2026-08-26 改訂で高さが 110→150px になり、右下に機材写真2点が入った。
   本文は上下中央（改訂ログ46行 counterAxisAlignItems=CENTER・カンプ実測でも
   上25px／下25px で対称）。 */
.cs-rec__body {
  position: relative; /* 機材写真の絶対配置の基準（カンプと同じ組み方） */
  display: flex;
  /* 🚨 上ぞろえ。カンプは4マスとも本文の1行目が同じ高さから始まる（改訂ログ47行の
     テキスト上端はどのマスも y=264 ＝ 白箱の上から 25px）。行数の少ないマスを
     上下中央にすると、そのマスだけ本文が下がってカンプとずれる。 */
  align-items: flex-start;
  flex: 1 1 auto;
  min-height: clamp(13rem, 10.4167vw, 15rem); /* 改訂ログ46行 150px ／ SP カンプ 130px */
  /* 左 20px は固定（カンプは PC・SP とも 20px）。右は機材写真が占める幅
     （写真枠＋右の逃げ＋本文とのすき間）を padding で確保して、本文が写真の下へ
     潜り込まないようにする（絶対配置の要素の専有幅を親の padding で確保する規約）。 */
  /* 上 18px＝カンプの本文上端 25px から、行ボックスの上の余り（約7px）を引いた値。
     この差はブラウザの行送りの取り方によるもので、引かないと本文が 7px 下がる（実測）。 */
  padding: clamp(1.6rem, 1.25vw, 1.8rem) calc(clamp(5rem, 4.1667vw, 6rem) + 1.8rem + .7rem) 0 2rem;
  border-top: 1px solid var(--color_line); /* 固定: 罫線。赤帯と白箱の境目 */
  background: #fff;
}

/* ログ47行 16px / lh22.4 / 500 / #111111 / 左そろえ。
   幅はカンプの 175px 固定（改訂ログ47行 layoutSizingHorizontal=FIXED）。
   ここを可変にすると4つの列で改行位置が変わり、カンプと行数が合わなくなる。 */
.cs-rec__text {
  width: clamp(14rem, 12.1528vw, 17.5rem);
  color: var(--color_dark);
  font-size: clamp(1.4rem, 1.111vw, 1.6rem); /* 改訂ログ47行 PC 16px ／ SP カンプ 14px */
  font-weight: 500;
  line-height: 1.4; /* ログ47行 lh22.4 / 16（SP も lh19.6 / 14 で同じ 1.4） */
  letter-spacing: .05em;
  text-align: left;
}

/* 機材写真2点（改訂ログ47行 Frame 5005〜5008 60×116）。
   🚨 カンプでは白箱の中に絶対配置（layoutPositioning=ABSOLUTE）＝流し込みの幅を
   取らない置き方で、右下に下端そろえで入っている。CSS でも同じく絶対配置にする。
   流し込み（margin-left:auto）で組むと、本文 175px ＋ 写真 60px ＋ すき間が
   1マスの 280px を 6px 超えて4列が箱からはみ出す（2026-08-26 実測で確認）。
   2点の幅は機種ごとに違うため、枠に対する比率を .cs-rec__item--<機種> で持つ
   （比率で持つと SP で枠が 54px に縮んでも2点の大小関係がカンプのまま保たれる）。 */
.cs-rec__media {
  position: absolute;
  right: 1.8rem; /* 固定: 改訂カンプ 18px（SP は 20px・下のメディアクエリで差し替え） */
  bottom: clamp(2rem, 1.7361vw, 2.5rem); /* 改訂ログ47行 白箱の下端から 25px ／ SP カンプ 20px */
  display: flex;
  align-items: flex-end; /* 改訂ログ47行 2点は下端そろえ */
  gap: var(--cs-rec-img-gap);
  width: clamp(5rem, 4.1667vw, 6rem); /* 改訂ログ47行 60px */
}

.cs-rec__img {
  height: auto; /* 縦横比は書き出した画像そのもの（カンプと同じ切り抜き） */
}

.cs-rec__img--r {
  width: var(--cs-rec-img-r);
}

.cs-rec__img--t {
  width: var(--cs-rec-img-t);
}

/* 改訂ログ47行の実測（枠 60px に対する比率）。
   KR-400   受信機 29 / すき間 2 / 送信機 28
   KR-400W  受信機 26 / すき間 2 / 送信機 26
   KR-500   受信機 25 / すき間 3 / 送信機 27
   KD-18    受信機 28 / すき間 2 / 送信機 26 */
.cs-rec__item--kr400 {
  --cs-rec-img-r: 48.333%;
  --cs-rec-img-t: 46.667%;
  --cs-rec-img-gap: 3.333%;
}

.cs-rec__item--kr400w {
  --cs-rec-img-r: 43.333%;
  --cs-rec-img-t: 43.333%;
  --cs-rec-img-gap: 3.333%;
}

.cs-rec__item--kr500 {
  --cs-rec-img-r: 41.667%;
  --cs-rec-img-t: 45%;
  --cs-rec-img-gap: 5%;
}

.cs-rec__item--kd18 {
  --cs-rec-img-r: 46.667%;
  --cs-rec-img-t: 43.333%;
  --cs-rec-img-gap: 3.333%;
}


/* =============================================================================
 * 2. イントロ文（ログ65行 FRAME txt [120,786,1320,969] pad=(60,0,45,0)）
 * 本文 16px / lh25.6 / 中央 / 500。上の 60px は .cs-rec の下余白が持つ。
 * カンプでは 1px #EAEAEA の枠が指定されているが Figma 上で描画されないため引かない
 * （PNG の y=900 前後を実測しても左右の端まで純白）。
 * ========================================================================== */
.cs-intro {
  padding-bottom: clamp(3rem, 3.125vw, 4.5rem); /* ログ65行 pad 下 45px */
}

.cs-intro__text {
  font-size: 1.6rem; /* 固定: 本文の最小サイズ（ログ66行 16px） */
  font-weight: 500;
  line-height: 1.6; /* ログ66行 lh25.6 / 16 */
  letter-spacing: .05em;
  text-align: center;
}

/* カンプの改行2か所。行が短くなりすぎる幅では改行しない */
@media (max-width: 768px) {
  .cs-intro__br {
    display: none;
  }
}


/* =============================================================================
 * 3. カテゴリーのアンカー帯（旧ログ39〜108行 Frame 4981）
 * 画面幅いっぱいの #F6F6F6・上下 30px。内側のボタン列は 1120px（ログ40行 wrap）。
 * 6つのボタンはそれぞれ下のカテゴリー節（#cs-{スラッグ}）へ飛ぶ。
 * ========================================================================== */
.cs-nav {
  padding-block: 3rem; /* 固定: 改訂ログ39行 pad=(30,0,30,0)。カンプは PC・SP とも 30px */
  padding-inline: clamp(1rem, 2.75vw, 4rem); /* SP カンプは帯の内側 wrap が 354px＝左右 10.5px。狭い幅ではそこまで詰める */
  background: var(--color_light); /* ログ39行 fill=#F6F6F6 */
}

/* 2026-08-26 改訂＝カテゴリーが6→7個になり、カンプは 4個＋3個の2段（両段とも中央そろえ）。
   改訂ログ40行 wrap は固定 1040px・flex WRAP・primaryAxisAlignItems=CENTER・gap 16（縦横とも）、
   btn は 240×120。1040px のうち実際に使うのは 1008px（240×4＋16×3）で、残り 32px は
   両側の余りにすぎない（wrap に背景は無い）ため、CSS では 1008px を中央に置いて同じ見え方にする。
   grid をやめたのは、grid では最後の段（3個）を中央にそろえられないため。 */
.cs-nav__list {
  --cs-nav-gap: clamp(.6rem, 1.11vw, 1.6rem); /* 改訂ログ40行 gap=16（PC）／ SP カンプ 6px。1本の clamp で両端に一致する */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--cs-nav-gap);
  max-width: 100.8rem; /* 固定: ボタン 240px×4 ＋ すき間 16px×3。コンテナの最大幅は固定値で持つ */
  margin-inline: auto;
}

/* 固定: ボタンは改訂カンプの 240px（layoutSizingHorizontal=FIXED）。
   ここを可変にすると、1段に入る個数と段の詰まり方がカンプと変わってしまう。
   幅が狭まると 4個→3個→2個と自然に折り返し、どの段も中央にそろう。 */
.cs-nav__list > li {
  width: 24rem;
}

.cs-nav__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem; /* ログ41行 gap=5 */
  /* ログ41行 120px（SP カンプ 100px）。height でなく min-height にしているのは、
     375px より狭い画面で最長ラベル「スポーツ観戦・スタジアム」が2行に折れたときに
     中身がボタンからはみ出さないようにするため（375px では1行に収まる）。 */
  min-height: clamp(10rem, 8.33vw, 12rem);
  padding-inline: clamp(.4rem, .556vw, .8rem); /* 文字が枠の端に触れないための逃げ。SP カンプは padding 0 のため狭い幅ほど詰める */
  background: #fff;
  box-shadow: 0 5px 20px rgba(0, 0, 0, .1); /* Figma DROP_SHADOW(0,5 r=20 #000000@0.1) */
  color: var(--color_dark);
  text-decoration: none;
  transition: var(--transition);
}

/* カンプは1つ目のボタンにだけ 2px の赤枠が付いている（ログ41行 stroke=2px INSIDE。
   残り5つは Figma の実データでも strokes が空で描画されない）。
   「選択中」の状態はこのページに無い（アンカーで飛ぶだけで現在地が変わらない）ため、
   ホバーとキーボードフォーカスの表現と解釈して当てる。
   border ではなく内側の影で描くのは、枠が付いてもレイアウトを動かさないため。 */
.cs-nav__btn:hover,
.cs-nav__btn:focus-visible {
  box-shadow:
    inset 0 0 0 2px var(--color_main),
    0 5px 20px rgba(0, 0, 0, .1);
}

.cs-nav__icon {
  width: clamp(6.4rem, 5.556vw, 8rem); /* ログ42行 product_icon 80×60 ／ 下限は SP カンプの 64×48 */
  height: clamp(4.8rem, 4.167vw, 6rem);
  object-fit: contain; /* 素材ごとに縦横比が違うので枠の中に収める */
}

.cs-nav__label {
  font-size: clamp(1.3rem, 1.181vw, 1.7rem); /* ログ48行 17px（下限は SP カンプの 13px） */
  font-weight: 700;
  /* ログ48行 lh=17 / 17 = 1。サイト標準の 1.4 にするとボタンの中身が 6.8px 下がり
     アイコンと矢印の位置がカンプとずれる。ラベルは最も狭い 375px（2列・ボタン幅162.5px）
     でも最長の「会議・研修・視察」が1行に収まることを実測で確認している。 */
  line-height: 1;
  letter-spacing: .05em;
  text-align: center;
}

/* 下向きの赤矢印。共通の .ar--down（common.css 746行・24×24 を90度回転）を
   カンプの 20×20（ログ49行 INSTANCE ar_down）に合わせて縮める。 */
.cs-nav__btn .ar--down {
  width: 2rem;
  height: 2rem;
  background-size: 2rem 2rem;
}


/* =============================================================================
 * 4. カテゴリー節（旧ログ110〜410行 Frame 4997〜5002）
 * 上下 30px。先頭の節だけ上 60px（ログ110行 pad=(60,0,30,0)）、
 * 最後の節だけ下 80px（ログ360行 pad=(30,0,80,0)）。
 * ========================================================================== */
.cs-sec {
  /* ヘッダーが position:fixed（common.css 156行・高さ var(--header_height)）のため、
     アンカーで飛んだときに黒帯の見出しがヘッダーへ潜らないよう逃げを持たせる
     （製品一覧 assets/css/product.css 452行・470行と同じ扱い）。 */
  scroll-margin-top: calc(var(--header_height) + 2rem);
  padding-block: clamp(2rem, 2.083vw, 3rem); /* ログ163行 pad=(30,0,30,0) */
}

.cs-sec--first {
  padding-top: clamp(4rem, 4.167vw, 6rem); /* ログ110行 pad 上 60px */
}

.cs-sec--last {
  padding-bottom: clamp(5rem, 5.556vw, 8rem); /* ログ360行 pad 下 80px */
}

/* 黒帯の小見出し（ログ112〜122行 h3_deco）。1200×52・#111111・pad(8,20,8,20)。
   PNG実測: 黒帯の下端（y=797）から次のカード上端（y=827）までの 30px は
   1200px 幅すべて純白で、赤い罫線は無い。Figma の実データでも h3_deco は
   individualStrokeWeights の bottom が 1 だが strokes が空＝描画されない。
   赤く見えるのはカード上辺の 8px の帯（case-common.css .cs-card）。 */
.cs-sec__head {
  display: flex;
  align-items: center;
  gap: .8rem; /* ログ112行 gap=8 */
  min-height: 5.2rem; /* ログ112行 52px。中身が増えても潰れないよう下限で持つ */
  margin-bottom: clamp(2rem, 2.083vw, 3rem); /* ログ111行 pad 下 30px */
  padding: .8rem clamp(1.4rem, 1.389vw, 2rem); /* ログ112行 pad=(8,20,8,20) */
  background: var(--color_dark); /* ログ112行 fill=#111111 */
  color: #fff;
}

.cs-sec__icon {
  flex: 0 0 3rem; /* ログ113行 product_icon 30×30 */
  width: 3rem;
  height: 3rem;
  object-fit: contain; /* 素材ごとに縦横比が違うので枠の中に収める */
}

.cs-sec__label {
  font-size: clamp(1.7rem, 1.389vw, 2rem); /* ログ122行 20px */
  font-weight: 700;
  line-height: 1.8; /* ログ122行 lh36 / 20 */
  letter-spacing: .05em;
}


/* =============================================================================
 * 5. 事例が1件も無いとき
 * 全カテゴリーの件数が0だと帯も節も出ないので、白紙にならないよう1行だけ置く。
 * 文言はトップページ template-parts/top/case.php の空表示と同じにそろえている。
 * ========================================================================== */
.cs-empty {
  padding-block: clamp(4rem, 4.167vw, 6rem);
  font-size: 1.6rem;
  line-height: 1.8;
  text-align: center;
}


/* =============================================================================
 * 6-1. 1199px 以下
 * カテゴリー帯 … 6列のままだと1つ 160px を切り「会議・研修・視察」が3行に割れるため
 *                3列2行にする。横スクロールの帯にはしない
 *                （6つのカテゴリーが一目で見えることを優先）。
 * おすすめ機種 … 4列のままだと 1024px あたりで1マスの中身が 196px まで細り、
 *                赤帯の最長行「質疑応答を伴う案内には」（16px で 185px）が
 *                折り返す寸前になる。折り返すと4つの赤帯の高さがそろわないので、
 *                その手前の 1199px で 2列2行へ落とす（赤帯と白箱は1マス＝<li>
 *                なので、必ずセットのまま動く）。横スクロールにはしない。
 * ========================================================================== */
@media (max-width: 1199px) {
  /* カテゴリー帯はここに指定を持たない。ボタンが 240px 固定なので、幅が狭まると
     4個→3個→2個と自然に折り返し、どの段も中央にそろう（カンプの規則のまま）。 */

  .cs-rec__list {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 2列になると1マスが倍近く広がる。本文をカンプの 175px 固定のままにすると
     本文と機材写真の間だけが大きく空くので、ここでは本文に残り幅を持たせる。 */
  .cs-rec__text {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
  }
}




@media (max-width: 768px) {
  .cs-nav__list {
    justify-content: flex-start; /* SP カンプは最後の1個が左寄せ（中央に置かない） */
    max-width: none;
  }

  /* SP カンプ＝2列4段。ボタンは画面幅に応じて伸びる（375px でカンプの 174px） */
  .cs-nav__list > li {
    width: calc((100% - var(--cs-nav-gap)) / 2);
  }

}


/* =============================================================================
 * 6-3. 599px 以下（おすすめ機種を1列にする）
 *
 * 🚨 2026-08-26 CEO 指摘で 768px から 599px へ下げた。カード群（case-common.css
 *    4-5節）と同じ理由で、768px で1列にすると白箱が約 657px 幅になり、本文と
 *    右下の機材写真（54px）の間が大きく空いて間延びする。2列のまま 600px まで
 *    持たせる（600px でも1マス約 270px ＝ PC カンプの 280px とほぼ同じ）。
 *    SP カンプ（375px）の見え方は変わらない。
 * ========================================================================== */
@media (max-width: 599px) {
  .cs-rec__list {
    grid-template-columns: 1fr;
  }

  /* 1列になって白箱が画面幅いっぱいに広がるので、本文にも残り幅を持たせる。
     幅を SP カンプの 210px で固定すると、375px より広い画面（〜768px）で
     本文の右側だけが大きく空いてしまう。右の機材写真ぶんは白箱の padding で
     確保しているので、本文が写真に潜り込むことはない。 */
  .cs-rec__text {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
  }

  /* 写真の右の逃げが 18→20px になるぶん、確保する padding も合わせる。
     本文の上は SP カンプ 30px。 */
  .cs-rec__body {
    padding-top: 2.3rem; /* SP カンプの本文上端 30px −7px（上と同じ理由） */
    padding-right: calc(clamp(4.6rem, 14.4vw, 5.4rem) + 2rem + .7rem);
  }

  .cs-rec__media {
    right: 2rem; /* 固定: SP カンプ 20px */
    width: clamp(4.6rem, 14.4vw, 5.4rem); /* SP カンプ 54px */
  }
}


/* --- カテゴリーの紹介文（2026-08-24 追加） -----------------------------
   ケンネット様ご指示で、旧用途別ページの文言から起こした短文を見出し直下に置く。
   文字サイズ・行間は本文系の既定（common.css の body）に合わせる。固定 px は使わない。

   🚨 2026-08-25 CEO 指摘＝90rem（900px）の頭打ちを入れていたため、6本中4本で
      末尾の4〜7文字だけが2行目に落ちて不格好だった（1行に必要な幅は 877〜1004px
      なのに 900px で切っていた）。頭打ちを撤去し、幅は親 .cs-inner の内容幅
      （1200px）に従わせる。文言は旧用途別ページの原文のままで一切触っていない。
      🚨 2026-08-26 CEO 指摘＝そのとき入れた text-wrap: balance が、行を均等に
      割るために1行目を内容幅より手前で切っており、幅いっぱいまで使わず
      中途半端な位置で折り返していた。balance は外し、内容幅いっぱいまで
      流してから折り返す通常の組みに戻す。 */
/* 🚨 2026-08-26 CEO 指摘＝下の余白が無く、紹介文がカード群にくっついて不格好だった。
   黒帯（見出し）とカード群の間隔はカンプで 30px。紹介文が入る節では
   「見出し →16px→ 紹介文 →30px→ カード群」にして、紹介文を見出し側に寄せる。
   見出しの下を詰めるのは .cs-sec--has-lead が付いた節だけ（紹介文の無い
   スポーツ観戦・スタジアムはカンプどおり 30px のまま）。 */
.cs-sec--has-lead .cs-sec__head {
	margin-bottom: clamp(1.2rem, 1.11vw, 1.6rem);
}

.cs-sec__lead {
	margin: 0 0 clamp(2rem, 2.083vw, 3rem);
	font-size: clamp(1.4rem, 1.11vw, 1.6rem);
	line-height: 1.9;
}