@charset "UTF-8";
/**
 * case-study-single.css — 導入事例 詳細ページ（single-case-study.php）専用
 *
 * 読み込み条件は functions.php セクション2。
 * theme-common → theme-case-common → theme-case-study-single の順で読む（後勝ち）。
 *
 * ■ ここに書くもの／書かないもの
 *   書く    … 記事の枠（.csd-article）・見出しブロック（.csd-head）・本文（.csd-content）・
 *             関連する導入事例の節まわり（.csd-related）・一覧へ戻る（.csd-back）
 *   書かない… .cs-inner（導入事例の共通枠）は case-common.css が正本。ここでは使うだけ。
 *             .page-title / .heading-01 / .btn / .ar 系は common.css の共通コンポーネントを流用し、
 *             再定義しない（実インスタンスの値だけ、この節に限って上書きする）。
 *             カード群の見た目は template-parts/case/cards が持つ。
 *
 * ■ 数値の出典
 *   ログ  = figma-dump/inspect/case_single/00_under.txt（node 865:9241）の行番号
 *   PNG   = figma-dump/screenshots/case/case_single.png（等倍 1440px）のピクセル実測
 *
 * ■ 数値の作り方
 *   カンプ幅 1440px 基準のリキッド。clamp(最小, 実測px ÷ 14.4 vw, 実測px) で 1440px 時に実測値へ一致。
 *   固定値は (1) コンテナ max-width (2) 1px/4px の罫線 (3) 20px 以下の細かい間隔
 *   (4) 本文の下限 16px  のみ。使う場所にその都度理由を書く。
 *   メディアクエリは max-width の単独指定（下の帯へ継承させるため min-width で下限を切らない）。
 *
 * ■ 色
 *   赤 #B80003 = var(--color_main)／本文 #111111 = var(--color_dark)／
 *   薄灰 #F6F6F6 = var(--color_light)／日付のグレー #717171 = var(--color_muted)
 *   いずれも common.css の :root に定義済みのため、ここでは変数を追加しない。
 */

/* =============================================================
   1. 記事の枠
   ログ37行 Frame 4988 [200,382,1240,1276]＝内容幅 1040px。
   .cs-inner（内容幅 1200px）の内側で中央に置くと x=200 に一致する。
   ============================================================= */

/* コンテナの max-width は固定が全案件共通の取り決め（vw にすると広い画面ほど1行が長くなる） */
.csd-article {
  max-width: 104rem;
  margin-inline: auto;
  /* ログ62行 FRAME ご利用製品 pad=(0,0,40,0) の末尾ぶん（本文の最後と関連セクションの間） */
  padding-bottom: clamp(2.4rem, 2.7778vw, 4rem);
}


/* =============================================================
   2. 見出しブロック（カテゴリータグ＋記事タイトル＋赤罫線＋日付）
   ログ38〜44行
   ============================================================= */

/* ログ38行 FRAME h2 pad=(0,0,40,0)＝日付の下から本文まで 40px */
.csd-head {
  padding-bottom: clamp(2.4rem, 2.7778vw, 4rem);
}

/*
 * ログ39行 FRAME h2_deco [200,382,1240,504]・pad=(20,0,20,0)・stroke=1px #B80003 INSIDE。
 * 🚨 ログの「1px INSIDE」は四辺の指定ではない。等倍 PNG を実測すると
 *      上辺 y=382 …… 赤なし（x=700 で走査）
 *      左辺 x=200 / 右辺 x=1240 …… 赤なし（y=470 で走査）
 *      下辺 …… y=500〜503 の 4px が #B80003（RGB 184,0,3）、x=200〜1239 の 1040px 幅
 *    で、下辺だけが 4px の赤帯だった（Figma の individualStrokeWeights も
 *    top:0 / right:0 / bottom:4 / left:0 で実測と一致）。よって border-bottom だけを引く。
 * Figma の INSIDE ストロークは枠の内側（下 padding 20px の中）に描かれるので、
 * CSS では padding-bottom 16px ＋ 罫線 4px＝20px とし、ブロック総高をカンプの 122px にそろえる。
 * 20px 以下の細かい間隔は共通コンポーネント（common.css .heading-01 など）と同じく固定 rem。
 */
.csd-head__box {
  padding-block: 2rem 1.6rem;
  border-bottom: .4rem solid var(--color_main);
}

/*
 * ログ40〜41行 FRAME category 142×30・pad=(4,10,4,10)・fill #B80003／文字 16px/700 白。
 * カンプではリンクになっていないので p のまま出す（a にしない）。
 * display:flex ＋ width:fit-content で、内容ぶんだけ縮むブロックにする
 * （inline-flex にすると親の行送りぶん行箱が伸びて、下の 4px gap が狂う）。
 */
.csd-head__cat {
  display: flex;
  align-items: center;
  width: fit-content;
  padding: .4rem 1rem; /* Figma 実測。10px 以下の細かい値のため固定 */
  background: var(--color_main);
  color: #fff;
  font-size: 1.6rem; /* 16px。本文の下限と同値のため固定 */
  font-weight: 700;
  line-height: 1.4; /* 22.4px。4+22.4+4＝30.4px でカンプの 30px に一致 */
  letter-spacing: .05em;
}

/* ログ39行 gap=4（タグとタイトルの間）／ログ42行 34px・lh47.6（＝1.4）・700 */
.csd-head__title {
  margin-top: .4rem;
  color: var(--color_dark);
  font-size: clamp(2.2rem, 2.3611vw, 3.4rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .05em;
}

/* ログ43行 FRAME 4991 pad=(10,0,0,0)／ログ44行 16px・700・#717171 */
.csd-head__date {
  display: block;
  padding-top: 1rem; /* 10px。細かい値のため固定 */
  color: var(--color_muted);
  font-size: 1.6rem; /* 16px。本文の下限と同値のため固定 */
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .05em;
}


/* =============================================================
   3. 本文（ブロックエディター／patterns/case-study-body.php の出力）
   ログ45〜70行。common.css の .single__body は使わない（コラム用の体裁を持ち込まない）
   ============================================================= */

/*
 * ログ45行 FRAME 4993 gap=45／ログ46行 左 610px／ログ68行 右 385px。
 * ブロックエディターの2列は既定が flex なので grid で上書きする。
 * 610fr : 385fr は段間 45px を引いた残り 995px をカンプどおりの比で分ける指定。
 */
.csd-content .wp-block-columns {
  display: grid;
  grid-template-columns: 610fr 385fr;
  column-gap: clamp(2.4rem, 3.125vw, 4.5rem);
  /* WordPress 標準の :where(.wp-block-columns){margin-bottom:1.75em} を打ち消す。
     残すと本文の下に 28px 余分に付き、関連セクションまでの間隔がカンプと合わない */
  margin-bottom: 0;
}

/* 長い URL などで列が広がって横スクロールが出るのを防ぐ（grid の既定は min-width:auto） */
.csd-content .wp-block-column {
  min-width: 0;
}

/* ログ47行 FRAME 4992 pad=30・fill #F6F6F6 */
.csd-content .cs-summary {
  padding: clamp(2rem, 2.0833vw, 3rem);
  background: var(--color_light);
}

/* ログ48行 18px・lh28.8（＝1.6）・500 */
.csd-content .cs-summary p {
  font-size: clamp(1.6rem, 1.25vw, 1.8rem);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .05em;
}

/*
 * 節ラベル（導入の背景／ご利用方法／ご利用製品）。
 * ログ52行 FRAME 104 610×40・pad=(10,10,10,10)・stroke=1px #B80003 INSIDE。
 * PNG 実測でも上 y=821・下 y=860・左 x=200・右 x=809 の四辺すべてに 1px の赤があり、
 * こちらは見出しブロックの罫線と違って「四辺 1px の枠」で正しい。
 * 枠内ストロークなので padding は 10px − 罫線 1px ＝ 9px。
 * 文字の行送りは Figma の文字枠が 16px／高さ 20px 固定（ログ53行の [210,831,675,851]）
 * のため 1.25。9+1+20+1+9＝40px でカンプの箱の高さに一致する。
 * 節間はログ 950→990 の 40px、ラベル下はログ 861→872 の 11px。
 */
.csd-content h2 {
  display: flex;
  align-items: center;
  min-height: 4rem;
  margin-top: clamp(2.4rem, 2.7778vw, 4rem);
  margin-bottom: 1.1rem; /* 11px。細かい値のため固定（縮めると枠と本文がくっつく） */
  padding: .9rem;
  border: 1px solid var(--color_main);
  color: var(--color_main);
  font-size: 1.6rem; /* 16px。本文の下限と同値のため固定 */
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .05em;
}

/* 列の先頭に来たときは上の余白を持たせない（列の上端はカンプで写真とそろう） */
.csd-content .wp-block-column > *:first-child {
  margin-top: 0;
}

/* ログ55行 16px・lh25.6（＝1.6）・500。16px は本文の下限のため固定 */
.csd-content p {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .05em;
}

/* カンプは1節1段落だが、記事によっては段落が続く。くっつかないよう1行ぶん（16px）だけ空ける */
.csd-content p + p {
  margin-top: 1.6rem;
}

/*
 * ログ68行 FRAME 4996 gap=30（写真の縦の間隔）。
 * 写真はカンプの比率（385×260）に限定せず、入稿された画像の実比率のまま出す。
 */
.csd-content .wp-block-image {
  margin: 0 0 clamp(2rem, 2.0833vw, 3rem);
}
.csd-content .wp-block-image:last-child {
  margin-bottom: 0;
}
.csd-content .wp-block-image img {
  width: 100%;
}

/*
 * 本文中のリンク（現在は「ご利用製品」の KR-400 のみ）。
 * 2026-08-21 の確定カンプで確定した表現に差し替えた（暫定の「赤文字＋下線」は廃止）。
 * inspect: figma-dump/inspect/confirm_20260821/case_single.txt 67行
 *          （Figma 実データ node 866:9415 ／ textDecoration=UNDERLINE）
 *   文字色 #111111（本文と同じ黒のまま）／ 700 ／ 下線あり
 *   16px / lh25.6 / 字送り 0.8
 * 文字の大きさ・行送り・字送りは .csd-content の本文（16px / lh1.6 / .05em）と同値なので
 * ここでは指定しない（二重管理を避ける）。太字と下線だけをリンクの目印として足す。
 *
 * ホバーは 2026-08-20 の統一語彙にそろえる。下線付きの文字リンクは
 * 「下線を保ったまま文字色を主色にする」（compare.css 161〜170行 .cmp-table__link ／
 * common.css 1175〜1181行 .bread a と同じ）。下線を消す表現は取らない
 * （消すとリンクだと分からなくなるうえ、他ページの文字リンクと語彙が食い違う）。
 */
.csd-content a {
  color: var(--color_dark); /* ログ67行 #111111 */
  font-weight: 700; /* ログ67行 wght=700 */
  text-decoration: underline; /* Figma 実データ textDecoration=UNDERLINE */
  text-underline-offset: .2em;
  transition: var(--transition);
}
.csd-content a:hover {
  color: var(--color_main);
}


/* =============================================================
   4. 関連する導入事例
   ログ71行 FRAME 4989 pad=(80,0,60,0)
   ============================================================= */
.csd-related {
  padding-block: clamp(4.8rem, 5.5556vw, 8rem) clamp(3.6rem, 4.1667vw, 6rem);
}

/*
 * ログ72行 INSTANCE head_01 pad=(0,0,50,0)。
 * 共通の .heading-01 は既定が padding-bottom 1.6rem のため、この節の実インスタンス値に
 * 上書きする（共通コンポーネント側は触らない・common.css 788行の取り決めと同じ扱い）。
 */
.csd-related__head {
  padding-bottom: clamp(3rem, 3.4722vw, 5rem);
}


/* =============================================================
   5. 導入事例一覧に戻る
   ログ115行 FRAME 4990 pad=(0,0,80,0)／ログ116行 btn 320×60（共通 .btn と同寸）
   ============================================================= */
.csd-back {
  display: flex;
  justify-content: center;
  padding-bottom: clamp(4.8rem, 5.5556vw, 8rem);
}

/* 関連事例が0件で節ごと消えたとき、本文のすぐ下にボタンが来ないよう上にも同じ余白を置く */
.csd-back--alone {
  padding-top: clamp(4.8rem, 5.5556vw, 8rem);
}

/* .btn は幅 32rem 固定のコンポーネント。狭い端末で枠から出ないための保険 */
.csd-back .btn {
  max-width: 100%;
}


/* =============================================================
   6. SP（max-width: 768px）
   本文の2列を1列にする。DOM は本文→写真の順なので、そのまま縦に積めばカンプの読み順になる。
   ============================================================= */
@media (max-width: 768px) {
  .csd-content .wp-block-columns {
    grid-template-columns: 1fr;
    /* SP カンプが無いため、本文の節間（ログ 950→990 の 40px）と同じ値にそろえる */
    row-gap: clamp(2.4rem, 2.7778vw, 4rem);
  }
}