/* 導入事例ページ（/case/）固有のスタイル
 *
 * **このファイルは case/index.html だけが読み込む。** header / footer の見た目は
 * sections.css・components.css・sp.css が担うので、ここには書かない
 * （トップページの検証済み差分に影響させないため。contact.css と同じ方針）。
 *
 * Figma: 事例集 456:27（PC 1920）/ ライトボックス 463:506。SP のデザインは無いので、
 * PC を幅に追従させる（2026-10-01 オーナー判断）。
 * 生の色は書かず、必ず `--c-*` を使う（check-css が生hexをNGにする）。
 *
 * 縦（ページ上端からの絶対y。Figma 実値）:
 *   header 0〜72 / タイトル帯 72〜272 / リード 323〜359 / 絞り込み枠 416〜630 /
 *   見出し 706〜737 / 一覧 771〜3269（カード 270x383・行ピッチ 423）/
 *   「TOPページへ戻る」 3349〜3389 / footer 3469〜
 */

[hidden] {
  display: none !important;
}

/* ===========================================================
   装飾（Figma 456:83）— トップと同じ画像を、このページの座標で置く
   components.css の `.deco img:nth-child(1〜5)` はトップ用の座標なので上書きする。
   left = Figma実値x + 0.5。top = Figma実値y - 436（main 上端が y=72 なので、
   トップと同じ「y - 364」にこのページの main 上端 72 を足した値）。
   bg_img002（幅広）だけ画像が 107px 高いぶん更に上へ送る（トップと同じ規則）。
   Figma のスクリーンショットとの縦位置の差を実測（左 -358 / 右 -366・-365）して決めた
   =========================================================== */
/* 装飾は「全て」表示時の座標で固定しているので、絞り込みで一覧が短くなると
   footer の下へはみ出してページ下に大きな余白が出る（製造・士業・卸売・医療で 362〜688px）。
   縦も main の下端で切る（sections.css の main は横だけ clip。トップに影響させないためここで足す） */
main {
  overflow-y: clip;
}

main > .deco img:nth-child(1) {
  top: -32.055px;
  left: 1455.125px;
}

main > .deco img:nth-child(2) {
  top: 577.945px;
  left: -84.875px;
}

main > .deco img:nth-child(3) {
  top: 1140.945px;
  left: 1225.125px;
}

/* ===========================================================
   タイトル帯（Rectangle 7 456:144 / h1 456:145）
   =========================================================== */
#case-title {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  background: var(--c-tint);
}

#case-title h1 {
  font-size: 32px;
  line-height: 46px;
  text-align: center;
}

/* ===========================================================
   本体
   =========================================================== */
#case {
  padding-top: 51px;
  padding-bottom: 80px;
}

/* リード文 456:94（15.5px / 行間31。文字は箱の上端から 5.1px 下） */
#case > p:first-child {
  width: min(var(--w-wide), 100% - 48px);
  padding-top: 5.1px;
  margin-inline: auto;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--c-text);
  text-align: center;
}

/* --- 業種の絞り込み枠（Rectangle 63 463:208 / 1000x214）--- */
#case > div[role="group"] {
  width: min(1000px, 100% - 48px);
  padding: 57px 24px 57.26px;
  margin: 56.91px auto 0;
  text-align: center;
  background: var(--c-tint-3);
}

/* 「業種を絞り込む」463:212（Zen Kaku Bold 20px / 箱高29） */
#case-filter-label {
  font-family: var(--f-heading);
  font-size: var(--fs-h2-sm);
  font-weight: 700;
  line-height: 29px;
  color: var(--c-navy);
}

#case > div[role="group"] > div {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 30px;
  align-items: center;
  justify-content: center;
  margin-top: 30.74px;
}

/* 業種ボタン（a.scp1 463:214 ほか）。選択中はグラデ塗り・白文字、
   それ以外は白地 + 青の 1px 枠（Figma は枠を内側に描くので padding から 1px 引く）。
   どちらも 71x40（「建設・住宅」だけ 117x40） */
#case button.scp1 {
  padding: 10px 19px;
  font-size: var(--fs-btn-lg);
  line-height: 18px;
  color: var(--c-blue-text);
  letter-spacing: 0.02em;
  cursor: pointer;
  background: var(--c-white);
  border: 1px solid var(--c-blue-text);
}

#case button.scp1[aria-pressed="true"] {
  color: var(--c-white);
  background: var(--g-button);
  border-color: transparent;
}

#case button.scp1:focus-visible {
  outline: 3px solid var(--c-blue-text);
  outline-offset: 3px;
}

/* サムネイルはカード（overflow: hidden）いっぱいに広がっているので、外側に枠を描くと
   全部切り取られて見えない（実測: フォーカス中と非フォーカスのスクショが同一）。内側に描く */
#case article button:focus-visible {
  outline: 3px solid var(--c-blue-text);
  outline-offset: -3px;
}

/* --- 現在の絞り込み名 463:280（Noto Sans JP Medium 26px / 両脇に斜線）--- */
#case h2 {
  display: flex;
  gap: 15px;
  align-items: center;
  justify-content: center;
  margin-top: 76.04px;
  font-family: var(--f-body);
  font-size: 26px;
  font-weight: 500;
  line-height: 31px;
}

/* 斜線は 22x22 の枠に、長さ 31.1 / 太さ 1px の線を 135° に置いたもの（Line 6 / Line 5）。
   書き出しアセットは使わず CSS で描く（色は #cbcbcb。--c-divider #ccc で代用） */
#case h2::before,
#case h2::after {
  flex: none;
  width: 22px;
  height: 22px;
  content: "";
  background: linear-gradient(
    to bottom left,
    transparent calc(50% - 0.5px),
    var(--c-divider) calc(50% - 0.5px),
    var(--c-divider) calc(50% + 0.5px),
    transparent calc(50% + 0.5px)
  );
}

/* --- 事例一覧（4列 x 270px・間隔 40px）--- */
#case > ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
  width: min(var(--w-wide), 100% - 48px);
  padding: 0;
  margin: 33.96px auto 0;
  list-style: none;
}

/* カード（article.scp3 456:104）。270x383・枠 1px #dce7f5・角丸 6px。
   中の画像は 270x381 で、枠の内側に 1px 食い込む（top:1 / left:1）ので
   section4 と同じく padding を 0 にして overflow で切る */
#case .scp3 {
  aspect-ratio: 270 / 383;
  padding: 0;
}

#case .scp3 > button {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  cursor: pointer;
  background: none;
  border: 0;
}

#case .scp3 img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: top;
}

#case > p[data-case-empty] {
  width: min(var(--w-wide), 100% - 48px);
  margin: 60px auto 0;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--c-text);
  text-align: center;
}

/* footer はトップ用の `margin-top: -1px`（section7 との重なり補正）が効いているが、
   このページには重なる相手が無い。Figma は一覧の下端 → ボタン → 80px → footer */
footer {
  margin-top: 0;
}

/* 「TOPページへ戻る」456:142（161x40）。一覧の下端から 80px */
#case > a.scp1 {
  display: flex;
  width: fit-content;
  margin: 80px auto 0;
  font-size: var(--fs-btn-lg);
  line-height: 18px;
}

/* ===========================================================
   狭い幅（Figma に無い帯。列数だけで吸収する）
   =========================================================== */
@media (max-width: 899px) {
  #case > ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
}

@media (max-width: 599px) {
  #case > ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  #case > div[role="group"] {
    padding-inline: 16px;
  }

  #case > div[role="group"] > div {
    gap: 12px;
  }

  #case h2 {
    margin-top: 48px;
    font-size: 22px;
  }
}

/* ===========================================================
   ライトボックス（Figma 463:506）
   サムネイルのクリックで、ページ全体の画像をパネル内でスクロールして見せる。
   スクロールバーは Figma どおり画像の右 32px に置くため、ネイティブではなく自前で描く。
   寸法は Figma 実値: 背景 rgba(0,0,0,.5) / パネル 1080x720・角丸10・余白50 /
   窓 620x620 / バー幅6（窓の右 32px）/ 閉じる 24px（右上 13・14）
   =========================================================== */
.case-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
}

.case-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 50%);
}

.case-lightbox-panel {
  position: relative;
  display: flex;
  justify-content: center;
  width: min(1080px, 92vw);
  height: min(720px, 86vh);
  padding: 50px;
  background: var(--c-white);
  border-radius: 10px;
  box-shadow: 0 24px 60px rgb(0 0 0 / 25%);
}

.case-lightbox-close {
  position: absolute;
  top: 14px;
  right: 13px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  color: var(--c-text);
  cursor: pointer;
  background: none;
  border: 0;
}

.case-lightbox-close svg {
  display: block;
}

.case-lightbox-close:focus-visible,
.case-lightbox-scroll:focus-visible {
  outline: 3px solid var(--c-blue-text);
  outline-offset: 4px;
}

.case-lightbox-viewport {
  position: relative;
  /* 右 38px（= 32px の余白 + 6px のバー）はスクロールバー用に空ける */
  width: min(620px, calc(100% - 44px));
  height: 100%;
}

.case-lightbox-scroll {
  display: grid;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* 窓に収まる短いページは中央に置く。safe を付けているので、はみ出す長いページでは
     上端起点に戻り先頭が切れない（safe 未対応のブラウザでは宣言ごと無視され上端起点） */
  align-content: safe center;
  background: var(--c-white);
  scrollbar-width: none;
}

.case-lightbox-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.case-lightbox-img {
  display: block;
  width: 100%;
  height: auto;
}

.case-lightbox-bar {
  position: absolute;
  top: 0;
  right: -38px;
  width: 6px;
  height: 100%;
  background: var(--c-scrollbar);
  border-radius: 3px;
}

.case-lightbox-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  min-height: 40px;
  cursor: grab;
  background: var(--c-scrollbar-thumb);
  border-radius: 3px;
  /* 指定しないと、タッチ端末でつまみをドラッグした瞬間にスクロールと判定され pointercancel が飛ぶ */
  touch-action: none;
}

.case-lightbox-thumb.is-dragging {
  cursor: grabbing;
}

/* 表示中は背面をスクロールさせない */
body.is-case-open {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

@media (max-width: 767px) {
  .case-lightbox-panel {
    width: 96vw;
    height: 88vh;
    padding: 42px 14px 14px;
    border-radius: 8px;
  }

  .case-lightbox-close {
    top: 10px;
    right: 10px;
  }

  .case-lightbox-viewport {
    width: calc(100% - 30px);
  }

  .case-lightbox-bar {
    right: -24px;
  }
}