@charset "UTF-8";
/**
 * case-common.css — 導入事例の共用部品（一覧ページ・記事詳細ページの両方で読む）
 *
 * 読み込みは functions.php 139〜149行で登録済み。
 *   一覧   … theme-case-common → theme-case-study
 *   記事詳細 … theme-case-common → theme-case-study-single
 * 後から読むページ固有の CSS が勝つ順番になっている。
 *
 * このファイルが持つのは「両方のページに出るもの」だけ。
 *   0. 内容枠 .cs-inner
 *   1. カード群 .cs-cards（3件以下＝静的3列 ／ 4件以上＝スライダー＋前後ボタン）
 *   2. カード .cs-card
 *   3. CONTACT 帯 .cs-contact
 *   4. 1199px 以下 ／ 768px 以下
 *
 * 寸法の出どころ
 *   ログ  … figma-dump/inspect/case_list/00_under.txt（行番号を各所に書いてある）
 *   PNG   … figma-dump/screenshots/case/case_list.png（等倍 1440px）を実測した箇所は
 *           「PNG実測」と明記する
 *
 * 1rem = 10px（html{font-size:62.5%}）。カンプ幅 1440px 基準の可変指定
 * （clamp の vw 値は「1440px のときの px 値」に一致する）。
 * ブレイクポイントは max-width の単独指定。
 *
 * 流用する既存クラス（.page-title / .bread / .ar 系 / .btn 系）はここで再定義しない。
 */

/* =============================================================================
 * 0. 内容枠 .cs-inner
 * common.css の .section__inner は max-width 1200 の内側に左右 padding を持つため
 * 1440px 表示で内容幅が 1121px になり、カンプの内容幅 1200px と食い違う。
 * WEB版イヤホンガイドの .wgd-inner・製品一覧の .plt-inner と同じ式にそろえる
 * （本案件の取り決めで .section / .section__inner は使わない）。
 * ========================================================================== */
.cs-inner {
  max-width: calc(var(--sectionWidth) + 8rem); /* 固定: 1200 + 80 = 1280。コンテナの最大幅は固定値で持つ */
  margin-inline: auto;
  padding-inline: clamp(2rem, 2.7778vw, 4rem); /* 1440px で 39.6px ≒ カンプの左右余白 40px */
}


/* =============================================================================
 * 1. カード群 .cs-cards
 * ログ130行 Frame 4982（カード行 1200×447・カード間 gap 30）。
 * 件数での出し分けは PHP 側（template-parts/case/cards.php）が修飾クラスで決める。
 *   3件以下 … .cs-cards--static  3列グリッド・前後ボタンは出力しない
 *   4件以上 … .cs-cards--slider  slick（assets/js/case-study.js）＋前後ボタン
 * ========================================================================== */
.cs-cards {
  /* カード間 30px の半分。スライダー側はこれをカードの左右 padding にして
     一覧の左右端をカンプ（内容枠の端＝120／1320）にそろえる */
  --cs-gutter: clamp(1rem, 1.042vw, 1.5rem);
  position: relative; /* 前後ボタンの基準 */
}

/* -----------------------------------------------------------------------------
 * 3件以下（静的3列）
 * -------------------------------------------------------------------------- */
.cs-cards--static .cs-cards__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 2.083vw, 3rem); /* ログ130行 gap=30 */
}

/* -----------------------------------------------------------------------------
 * 4件以上（スライダー）
 * slick はスライド1枚ぶんの幅を等分するため、カード間の 30px は
 * 「カードの左右 padding 15px ＋ 一覧の左右 -15px」で作る。
 * この形だと表示中の左右端のカードが内容枠の端にぴったりそろう。
 * -------------------------------------------------------------------------- */
/* 前後ボタンの top 計算（4-1・4-2・4-4節）が使うコンテナクエリの基準。
   100cqw ＝ .cs-cards の実幅になり、.cs-inner の max-width 1280（37行）の頭打ちや
   左右 padding の clamp（39行）を矢印の式に持ち込まずに済む。
   矢印を出すスライダーだけに付け、静的3列（--static）には何も持ち込まない。 */
.cs-cards--slider {
  container-type: inline-size;
}

.cs-cards--slider .cs-cards__list {
  margin-inline: calc(var(--cs-gutter) * -1);
}

.cs-cards--slider .cs-cards__item {
  padding-inline: var(--cs-gutter);
}

/* slick 未初期化（JS が動かない・CDN が落ちた）ときの並び。
   初期化されると .cs-cards__list の直下は .slick-list 1つになるので grid を外す。 */
.cs-cards--slider .cs-cards__list:not(.slick-initialized) {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

/* slick の .slick-list は overflow:hidden なので、そのままだとカードの影
   （0 5px 20px＝下へ25px・上へ15px）が上下で切れる。上下だけ逃げを作って
   同じ量の負のマージンで戻す（配置は動かない）。
   左右は逃げを作れない（窓が広がると隣のスライドが見えてしまう）。 */
.cs-cards--slider .slick-list {
  padding-block: 2.5rem;
  margin-block: -2.5rem;
}

/* 高さぞろえ。slick は既定でスライドを float させるため flex にして伸ばす */
.cs-cards--slider .slick-track {
  display: flex;
}

.cs-cards--slider .slick-slide {
  height: auto;
}

/* -----------------------------------------------------------------------------
 * 前後ボタン（ログ157〜162行 GROUP ar）
 * 円 52×52・#B80003・白 3px リング(INSIDE)・影 0 5 20 rgba(0,0,0,.1)。
 * 位置はカード行の上下中央、内容枠の左右外側 42px（ログ x=78〜130 ／ 1308〜1360）。
 * 中の白い山形は共通クラス .ar--white（common.css 750行）を使う。
 * -------------------------------------------------------------------------- */
.cs-cards__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.2rem; /* 固定: 円。図形なので大きさを明示する（共通契約 1-6） */
  height: 5.2rem;
  padding: 0;
  background: var(--color_main);
  border: 3px solid #fff; /* 固定: 3px リング（Figma stroke 3px INSIDE） */
  border-radius: 50%;
  box-shadow: 0 5px 20px rgba(0, 0, 0, .1); /* Figma DROP_SHADOW(0,5 r=20 #000000@0.1) */
  transform: translateY(-50%);
  cursor: pointer;
  transition: var(--transition, all .3s ease); /* 2026-08-20 追加：hover の色変化をフェードさせる（従来は瞬間切替） */
}

.cs-cards__arrow--prev {
  left: -4.2rem; /* ログ 内容枠左端 120 − ボタン左端 78 = 42px */
}

.cs-cards__arrow--next {
  right: -4.2rem;
}

.cs-cards__arrow--prev .ar--white {
  transform: rotate(180deg);
}

/* hover はフローティング CTA のレンタルボタン（common.css 1709行・Figma node 569:4991 実測
   赤→濃い赤）と同じ語彙。2026-08-20 CEO 指示により opacity: .85 から変更。 */
.cs-cards__arrow:hover {
  background: var(--color_main_dark);
}

/* slick 未初期化のあいだは押しても何も起きないので出さない */
.cs-cards--slider:not(:has(.slick-initialized)) .cs-cards__arrow {
  display: none;
}


/* =============================================================================
 * 2. カード .cs-card（ログ131〜148行 INSTANCE Frame 4973 ほか）
 * 380×447・pad30・白地・影 0 5 20 rgba(0,0,0,.1)。
 * カード全体が1つのリンクなので、中に別のリンクは置かない。
 * ========================================================================== */
.cs-cards__item {
  display: flex; /* 中のカードを行の高さいっぱいに伸ばす */
}

.cs-card {
  display: flex;
  flex-direction: column;
  gap: clamp(1.4rem, 1.389vw, 2rem); /* ログ131行 gap=20 */
  width: 100%;
  padding: clamp(2rem, 2.083vw, 3rem); /* ログ131行 pad=30 */
  background: #fff;
  /* 上辺だけの赤帯（8px）。ログは stroke=1px としか出ないが、Figma の実データは
     individualStrokeWeights {top:8, right:0, bottom:0, left:0} で、
     PNG実測でも y=827〜834 の 8px・カード幅いっぱい（380px）、左右下は罫線なしだった。
     Figma の INSIDE ストロークは padding の内側に重ねて描かれ配置を動かさないため、
     border ではなく内側の影で作る（border にすると 30px の余白が 38px にずれる）。 */
  box-shadow:
    inset 0 .8rem 0 0 var(--color_main),
    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);
}

.cs-card:hover {
  opacity: .65; /* 2026-08-26 CEO 指示: ホバーが効いているか分かるよう .8/.85 → .65 に統一 */
}

/* サムネイル 320×180（ログ132行）。登録済み画像サイズ card（800×533）を
   16:9 の枠に切り抜いて入れる */
.cs-card__thumb {
  position: relative; /* タグの基準 */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color_light); /* アイキャッチが無い事例はこの下地だけが出る */
}

.cs-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* カテゴリータグ（ログ145〜146行 Frame 4971）。
   サムネイルの左下に重ねる（タグ左端 150 = サムネ左端／タグ下端 1037 = サムネ下端）。
   共通の .tag-icon は寸法（高さ・字送り）が違うので流用しない。 */
.cs-card__tag {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: .4rem 1rem; /* 固定: ログ145行 pad=(4,10,4,10)。4px + 19.6px + 4px = 27.6 ≒ 高さ28 */
  background: var(--color_main);
  color: #fff;
  font-size: 1.4rem; /* 本文の最小サイズのため可変にしない */
  font-weight: 700;
  line-height: 1.4; /* ログ146行 lh19.6 / 14 */
  letter-spacing: .05em;
}

.cs-card__title {
  font-size: clamp(1.6rem, 1.25vw, 1.8rem); /* ログ135行 18px */
  font-weight: 700;
  line-height: 1.4; /* ログ135行 lh25.2 / 18 */
  letter-spacing: .05em;
}

/* 概要（ログ136行 15px / lh24 / 500）。カンプは5行ぶん（120px）の高さで切れている */
.cs-card__text {
  display: -webkit-box;
  overflow: hidden;
  margin-top: .6rem; /* ログ134行 gap=6 */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  font-size: 1.5rem; /* 固定: カード内の補足文。ログ136行 15px */
  font-weight: 500;
  line-height: 1.6; /* ログ136行 lh24 / 15 */
  letter-spacing: .05em;
}

/* 「詳細を見る」はリンクではなく飾り（カード全体が1つのリンクのため）。
   ログ137行 右寄せ・文字とのあいだ gap=6・矢印は共通 .ar--2（16×16 赤） */
.cs-card__more {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .6rem;
  margin-top: auto; /* カードの高さがそろっても最下段に置く */
  color: var(--color_main);
  font-size: 1.4rem; /* 本文の最小サイズのため可変にしない */
  font-weight: 700;
  /* ログ137行の行の高さは16px＝矢印 16×16 が決めている。文字に 1.4（lh19.6）を掛けると
     行が 19.6px になりカード全体がカンプより 3.6px 高くなるため 1 にする
     （行の高さは矢印の 16px が持つ・この文言は折り返さない）。 */
  line-height: 1;
  letter-spacing: .05em;
}


/* =============================================================================
 * 3. CONTACT 帯 .cs-contact（ログ411〜459行 INSTANCE contact）
 * assets/css/legal.css 209〜444行の CONTACT 帯から、クラスの接頭辞だけ
 * .cs-contact に置き換えて転記（同じコンポーネント・数値は1つも変えていない）。
 * legal.css 側の数値はさらに warranty.css → top.css 1935〜2100行（.top-contact 系）が
 * 出所で、各宣言に書いてある top.css の行番号もそのまま残してある。
 * top.css / legal.css はそれぞれのページ限定で読み込まれ本ページでは効かないため、
 * クラスを別（cs-contact__*）にして必要な分だけここに持つ。
 * ========================================================================== */
.cs-contact {
  /* 上下は top.css 1936行と同値（Figma pad(80,276,80,276) の上下）。
     左右は .section__inner を使わない取り決めのためここで持つ。 */
  padding-block: 8rem;
  padding-inline: clamp(2rem, 2.7778vw, 4rem);
  background: var(--gradient); /* Figma cta_gr。top.css 1937行は同じ値を直書き */
  color: #fff;
}

.cs-contact__inner {
  display: flex;
  align-items: center;
  gap: clamp(4rem, 6.94vw, 10rem); /* top.css 1944行 10rem。1024px 付近で右カラムを潰さないよう縮む側にした */
  max-width: 100rem; /* top.css 1945行。Figma 実配置 220〜1220px */
  min-height: 26.6rem; /* top.css 1946行。Figma title-wrap 266px（426 − 上下 padding 160） */
  margin-inline: auto;
}

/* -----------------------------------------------------------------------------
 * 左カラム（legal.css 227〜302行 ／ 出所は top.css 1950〜2025行）
 * -------------------------------------------------------------------------- */
.cs-contact__intro {
  flex: 0 0 30rem; /* top.css 1951行 */
  align-self: stretch; /* top.css 1952行。カンプは左カラムだけ上寄せ（266px 枠の上端から始まる） */
}

.cs-contact__label {
  display: flex; /* top.css 1956行 */
  align-items: center;
  gap: .4rem; /* Figma 丸マーク右端234 → 文字左端238 */
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .05em;
}

.cs-contact__label-mark {
  flex: 0 0 1.4rem; /* top.css 1966行。Figma Ellipse 14×14・stroke 3px INSIDE */
  width: 1.4rem;
  height: 1.4rem;
  border: 3px solid #fff;
  border-radius: 50%;
}

.cs-contact__title {
  font-family: var(--font_eng); /* top.css 1975行は "Roboto", sans-serif 直書き。変数の中身は同じ */
  font-size: clamp(4.4rem, 4.17vw, 6rem); /* 上限 top.css 1976行 6rem ／ 下限 同 2337行 4.4rem */
  font-weight: 700;
  line-height: 1.4; /* Figma lh 84 */
  letter-spacing: 0; /* top.css 1979行。CONTACT だけ字間を空けない */
}

.cs-contact__point {
  display: block; /* top.css 1983行。Figma point 68×4 */
  width: 6.8rem;
  height: .4rem;
  margin: 2rem 0;
  background: #fff;
}

.cs-contact__tel-label {
  font-size: 1.5rem; /* top.css 1991行 */
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .05em;
}

.cs-contact__tel {
  display: flex; /* top.css 1998行 */
  align-items: center;
  gap: .4rem;
}

.cs-contact__tel-icon {
  flex: 0 0 3.2rem; /* top.css 2003行。Figma icon 32×32 */
  width: 3.2rem;
  height: 3.2rem;
}

.cs-contact__tel a {
  font-family: var(--font_eng); /* top.css 2009行 */
  font-size: clamp(2.8rem, 2.36vw, 3.4rem); /* 上限 top.css 2010行 3.4rem ／ 下限 同 2341行 2.8rem */
  font-weight: 700;
  line-height: 1.4; /* Figma lh 47.6 */
  text-decoration: none;
  letter-spacing: .05em;
}

.cs-contact__hours {
  margin-top: .8rem; /* top.css 2018行。Figma gap 8 */
  padding: .7rem; /* top.css 2019行。Figma 34px = border 1px + 7px + 本文 18.2px + 7px + border 1px */
  border: 1px solid var(--color_line); /* top.css 2020行は #EAEAEA 直書き */
  font-size: clamp(1.2rem, .9vw, 1.3rem); /* 上限 top.css 2021行 1.3rem ／ 下限 同 2345行 1.2rem */
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .05em;
}

/* -----------------------------------------------------------------------------
 * 右カラム（ボタン2本・legal.css 306〜375行 ／ 出所は top.css 2031〜2100行）
 * -------------------------------------------------------------------------- */
.cs-contact__btns {
  display: flex; /* top.css 2032行 */
  flex: 0 1 60rem; /* Figma ボタン 600px。1024px 付近では縮む側にする */
  flex-direction: column;
  gap: 2rem; /* top.css 2036行。Figma wrap gap 20 */
  min-width: 0;
}

.cs-contact__btn {
  position: relative; /* top.css 2039行 */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 12rem; /* top.css 2044行。Figma 120px */
  box-shadow: 0 10px 30px rgba(134, 13, 8, .3); /* Figma DROP_SHADOW(0,10 r=30 #860D08@0.3)・top.css 2045行と同値 */
  text-decoration: none;
  transition: var(--transition, all .3s ease);
}

.cs-contact__btn--rental {
  background: var(--color_main_dark); /* Figma main_color_dark #7C0002・top.css 2050行 */
  color: #fff;
}

.cs-contact__btn--inquiry {
  background: #fff; /* top.css 2055行 */
  color: var(--color_main);
}

/* hover はフローティング CTA（common.css 1716行）と同じ語彙。白地は内側 2px の赤枠、
   濃い赤地はその白枠版。box-shadow は1プロパティなので既存の外影を併記して維持する。
   2026-08-20 CEO 指示により opacity: .85 から変更（薄くなるだけで分からなかったため）。 */
.cs-contact__btn--rental:hover {
  box-shadow: 0 10px 30px rgba(134, 13, 8, .3), inset 0 0 0 2px #fff;
}

.cs-contact__btn--inquiry:hover {
  box-shadow: 0 10px 30px rgba(134, 13, 8, .3), inset 0 0 0 2px var(--color_main);
}

.cs-contact__btn-icon {
  position: absolute; /* top.css 2064行。Figma 64×64・ボタン左端から40px */
  top: 50%;
  left: 4rem;
  width: 6.4rem;
  height: 6.4rem;
  transform: translateY(-50%);
}

.cs-contact__btn-txt {
  display: flex; /* top.css 2072行 */
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  text-align: center;
}

.cs-contact__btn-main {
  font-size: 2.4rem; /* top.css 2080行。Figma 24px */
  font-weight: 700;
  line-height: 1;
  letter-spacing: .05em;
}

.cs-contact__btn-sub {
  font-size: 1.5rem; /* top.css 2087行。Figma 15px */
  font-weight: 700;
  line-height: 1;
  letter-spacing: .05em;
}

.cs-contact__btn .ar {
  position: absolute; /* top.css 2093行。Figma 24×24・ボタン右端から20px */
  top: 50%;
  right: 2rem;
  transform: translateY(-50%);
}


/* =============================================================================
 * 4-1. 1366px 以下
 * 前後ボタンの左右 −42px は 1440px でも内容枠の左右余白（最大 40px）を超えるため、
 * コンテナが画面幅いっぱいになる 1366px 以下ではカード側へ引き込む。
 * 引き込まないと 1280px 付近で本体が横にはみ出す（実測: 1280px で −6.8px）。
 * ========================================================================== */
@media (max-width: 1366px) {
  .cs-cards__arrow--prev {
    left: -.8rem;
  }

  .cs-cards__arrow--next {
    right: -.8rem;
  }

  /* 引き込むと prev は左端カードの内側に入り、既定の top:50%（カード行の上下中央）が
     サムネイル下端付近＝カテゴリータグ（左下・高さ28px）に当たる
     （実測: 769〜900・1200〜1366px で重なり。1024〜1199px は抜粋の行数で外れているだけ）。
     4-4節の SP と同じ語彙＝サムネイルの縦中央へ上げる。1367px 以上はボタンが
     カードの外に出るためカンプどおり行の上下中央のまま（この節に閉じる）。
     top ＝ カード上 padding（clamp は .cs-card 168行と同値）＋ サムネ高さの半分。
     サムネ幅 ＝ カード幅 − カード左右 padding。カード幅は列数で決まり、
       3枚: (100cqw − gutter×4) ÷ 3 ／ 2枚: 50cqw − gutter（4-2節） ／ 1枚: 100cqw（4-4節）。
     16:9 なので高さの半分は幅 × 9/32。中心合わせは既定の translateY(-50%)（125行）。
     ボタン下端とタグ上端は最小の 1200px 時でも約33px 空く。左右は −.8rem のまま
     （重なりの原因は縦位置だけのため動かさない）。2026-08-21 CEO 指摘。 */
  .cs-cards__arrow {
    top: calc(clamp(2rem, 2.083vw, 3rem)
         + ((100cqw - var(--cs-gutter) * 4) / 3
            - clamp(2rem, 2.083vw, 3rem) * 2) * 9 / 32);
  }
}


/* =============================================================================
 * 4-2. 1199px 以下
 * カードは 380px を保つと3列で 1200px 必要なので2列に落とす。
 * スライダーも同じ位置で slidesToShow を 2 にする（assets/js/case-study.js）。
 * ========================================================================== */
@media (max-width: 1199px) {
  .cs-cards--static .cs-cards__list,
  .cs-cards--slider .cs-cards__list:not(.slick-initialized) {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 前後ボタン: 2枚表示のカード幅で 4-1節の式を上書き（考え方は 4-1節のコメント） */
  .cs-cards__arrow {
    top: calc(clamp(2rem, 2.083vw, 3rem)
         + ((50cqw - var(--cs-gutter))
            - clamp(2rem, 2.083vw, 3rem) * 2) * 9 / 32);
  }
}


/* =============================================================================
 * 4-3. 1023px 以下（legal.css 385〜404行から転記・CONTACT 帯の分だけ）
 * 2カラムのままだと右カラムが 600px を切り、ボタンの中の文字
 * （最長「レンタル・購入・デモ機などのご相談はこちら」＝約330px）と
 * 左右のアイコン・矢印（合わせて148px）が競って折り返しが増えるため縦積みにする。
 * ========================================================================== */
@media (max-width: 1023px) {
  .cs-contact__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 4rem;
    min-height: 0;
  }

  /* 縦積みでは左右いっぱいに広げず、カンプのボタン幅 600px にそろえて置く
     （営業時間の枠だけが 850px まで伸びて間延びするのを防ぐ） */
  .cs-contact__intro,
  .cs-contact__btns {
    flex: 0 0 auto;
    width: 100%;
    max-width: 60rem;
    margin-inline: auto;
  }
}


/* =============================================================================
 * 4-5. 599px 以下（カードを1列にする）
 *
 * 🚨 2026-08-26 CEO 指摘で 768px から 599px へ下げた。
 *    もとは「サイト共通の SP ブレイクポイント＝768px」でカードを1列にしていたが、
 *    768px で1列にするとカード幅が画面いっぱい（約 700px）になり、16:9 のサムネイルが
 *    約 394px の高さになって間延びする。769px では2列なので、1px の差で
 *    2列 → 巨大な1列 に落ちる状態だった。
 *
 *    2列を保てる下限は実測で約 520px（2列時のサムネ幅が、重ねて置くカテゴリータグの
 *    最長「スポーツ観戦・スタジアム」＝約 196px を下回る幅）。余裕を見て 600px までを
 *    2列とし、599px 以下で1列にする。SP カンプ（375px）の見え方は変わらない。
 *
 *    矢印の引き込みもここへ移した。600〜768px は 4-2節（2枚表示の式）が
 *    max-width の継承でそのまま効くため、新しい式は要らない。
 *    slick 側の切り替えは assets/js/case-study.js の breakpoint 600（＝599px 以下）。
 * ========================================================================== */
@media (max-width: 599px) {
  .cs-cards--static .cs-cards__list,
  .cs-cards--slider .cs-cards__list:not(.slick-initialized) {
    grid-template-columns: 1fr;
  }

  /* 前後ボタン。1列表示ではボタンがカードの内側に入り、カード行の上下中央（既定の
     top:50%）がサムネイル下端付近に当たってカテゴリータグ（サムネ左下・高さ28px）を
     覆い、文字が読めなくなる（375px 実測: 横24px・縦は全域で重なる。2026-08-21 CEO 指摘）。
     導入事例ページの SP カンプは無いため、トップページの同型スライダーの語彙
     （top.css 2312〜2326行「矢印がカードの内側に入るときは写真の中に置く」）を踏襲し、
     サムネイルの縦中央に置いて左右をカード内側へ引き込む。
     top の式 ＝ カード上 padding 2rem ＋ サムネ高さの半分。サムネ幅は
     100vw − .cs-inner の左右 padding 4rem − カード左右 padding 4rem
     （--cs-gutter はリストの負マージンと打ち消し合うので式に出ない）。
     16:9 なので高さの半分は幅 × 9/32。中心合わせは既定の translateY(-50%)（125行）が
     そのまま効く。375px でボタン下端はタグ上端の 29px 上・320px でも 13px 空く。
     静的グリッド（3件以下）は cards.php 93〜100行で矢印そのものを出力しないため無影響。 */
  .cs-cards__arrow {
    top: calc(2rem + (100vw - 8rem) * 9 / 32);
    top: calc(2rem + (100cqw - 4rem) * 9 / 32); /* 上の vw 版の厳密形。720〜768px の誤差とスクロールバー分のずれが消える。cqw 非対応のブラウザーは上の行に落ちる */
  }

  .cs-cards__arrow--prev {
    left: 1rem; /* top.css 2321行と同値 */
  }

  .cs-cards__arrow--next {
    right: 1rem; /* top.css 2325行と同値 */
  }

}


/* =============================================================================
 * 4-4. 768px 以下
 * CONTACT 帯は legal.css 412〜444行から転記（出所は top.css 2320〜2375行）。
 * 🚨 カードの1列化と矢印の引き込みは 4-5節（599px 以下）へ移した（2026-08-26）。
 * ========================================================================== */
@media (max-width: 768px) {
  .cs-contact {
    padding-block: 6rem; /* top.css 2321行 */
  }

  .cs-contact__btn {
    height: auto; /* top.css 2350行 */
    min-height: 10rem;
    padding: 2rem 4.4rem 2rem 8.8rem;
  }

  .cs-contact__btn-icon {
    left: 1.6rem; /* top.css 2356行 */
    width: 5.6rem;
    height: 5.6rem;
  }

  .cs-contact__btn-main {
    /* 1行に収める（トップと同じ扱い＝top.css 2364行）。最長の「お問い合わせ・見積相談」は
       19px だと 219px 必要で入る幅が 203px しかなく折り返す。17px なら 196px で収まる。 */
    font-size: 1.7rem;
  }

  .cs-contact__btn-sub {
    font-size: 1.3rem; /* top.css 2370行 */
    line-height: 1.4;
  }

  .cs-contact__btn .ar {
    right: 1.2rem; /* top.css 2373行 */
  }
}