/* =========================================================
   資料ダウンロードページ  page-business-download.php
   （KV / section_head / back_btn は page-usecase.css を流用）
   ========================================================= */

/* ===== KV（usecase_mv 流用・白箱＋青文字に上書き） ===== */
.download_mv .mv_kv_text {
  top: 26%; /* Figma 箱 y169（KV内相対 25.9%） */
}
.download_mv .mv_title span {
  color: #0a63ab; /* 白箱＋青文字（usecase_mv 既定の #00a7ff を上書き） */
}
.download_mv .mv_desc {
  top: 52%; /* Figma サブコピー y253（相対 51.8%） */
  line-height: 1.55; /* Figma 36px / 23.258px */
  white-space: normal; /* 2行想定（usecase_mv 既定 nowrap を解除） */
}

/* ===== コンテナ ===== */
.dl_wrap {
  width: min(980px, calc(100% - 40px)); /* タブレット谷間: PCは980・以下は左右20px余白で流動 */
  margin: 0 auto;
  padding: 60px 0 0; /* KV下端 → 製品カタログ見出し 60px */
  box-sizing: border-box;
}

/* ===== 製品カタログ 見出し（usecase_section_head 流用） ===== */
.dl_head {
  margin-bottom: 34px; /* H2ブロック圧縮後、リード y575 合わせ */
}
.dl_head h2 {
  line-height: 35px; /* Figma「製品カタログ」line35（usecase_section_head 既定1.2を詰める） */
}
/* Figmaの赤線ノードは「高さ0のコンテナ＋内側の画像が上へ-4pxはみ出す」構造なので
   inset(77.27%)は線の“下端”。PC(273×68)なら実体は48.5〜52.5でラベル56.7＝隙間4.2px。
   共有既定の16px＋ラベル2pxだと線が下がりラベルが詰まる（SPと同じ誤読が初回実装から入っていた）。 */
.dl_head h2::after {
  margin-top: 12px;
}
.dl_head .section_label {
  /* ラベルはFigma通り大文字 "CATALOG"。他ページ同様HTML側に大文字で書くので
     text-transform の打ち消しは不要（旧実装は小文字 "catalog" + none だった） */
  letter-spacing: 0;
  margin-top: 4px; /* 赤線下端 → ラベル。PC/SPとも同値でFigmaに一致する */
}

.dl_lead {
  margin: 0 0 80px; /* リード下端 → 最初のセクション見出し 80px */
  text-align: center;
  font-size: 16px;
  line-height: 1.56; /* Figma 828×50 の2行 */
  color: #000;
}

/* ===== 各カテゴリセクション ===== */
.dl_section:not(:last-child) {
  margin-bottom: 80px; /* 前カード下端 → 次セクション見出し 80px */
}

.dl_section_head {
  margin-bottom: 32px; /* 見出しバー下端 → カード上端 32px */
}
.dl_section_head h3 {
  display: inline-flex;
  align-items: center; /* 24px/16px 混在のベースラインずれを吸収 */
  height: 40px; /* Figma py8 + text24 = 40 固定（行ボックス膨張を防ぐ） */
  box-sizing: border-box;
  margin: 0;
  padding: 0 12px; /* Figma px12 */
  background: #0966c5;
  color: #fff;
  font-weight: bold;
  line-height: 24px;
  font-family: inherit;
}
.dl_section_head .dl_sh_main {
  font-size: 24px;
}
.dl_section_head .dl_sh_sub {
  font-size: 16px;
}

/* ===== カードグリッド ===== */
.dl_cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* タブレット谷間: 232px固定→4列fluid（PC980で232に一致、谷間で比例縮小） */
  gap: 17px; /* Figma カード間隔 249-232 */
  justify-content: start; /* 3枚のセクションは左寄せ */
}

.dl_card {
  position: relative;
  /* タブレット谷間: 絶対配置の固定px図版なので container-type+cqw で丸ごと比例スケール（factor=100/232）。
     グリッドセル(1fr)が幅を与え、aspect-ratioで高さが決まる。PC(232)では各cqwが元pxに一致し無改変。 */
  width: auto;
  aspect-ratio: 232 / 243;
  height: auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.3s ease;
  container-type: inline-size;
}

/* ホバー（Figma card-download バリアント2）: 影を強め・白50%ベールで退色・PDFボタンを赤ベタ反転 */
.dl_card:hover {
  box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.08); /* 0.04→0.08 */
}
/* 白50%ベール（コンテンツの上・PDFボタンの下＝z-index:1） */
.dl_card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 1;
}
.dl_card:hover::after {
  opacity: 1;
}

/* キャッチコピー */
.dl_catch {
  position: absolute;
  top: 6.897cqw;   /* 16/232 */
  left: 6.897cqw;
  right: 6.897cqw;
  text-align: center;
  color: #0966c5;
  font-size: 5.172cqw; /* 12 */
  font-weight: bold;
  line-height: 7.759cqw; /* 18 */
}
.dl_catch p {
  margin: 0;
}

/* バッジ（40×40 画像・2段。SVGはDIN Alternate Bold/ヒラギノW6をパス化しフォント非依存） */
.dl_badge {
  position: absolute;
  left: 6.897cqw; /* 16/232 */
  width: 17.241cqw; /* 40 */
  height: 17.241cqw;
  display: block;
}
.dl_badge_top {
  top: 27.586cqw; /* 64 */
}
.dl_badge_bottom {
  top: 46.552cqw; /* 108 */
}

/* 製品画像 */
.dl_photo {
  position: absolute;
  top: 27.586cqw; /* 64 */
  left: 27.586cqw; /* 64 */
  width: 65.517cqw; /* 152 */
  height: 36.207cqw; /* 84 */
}
.dl_photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 製品名・型番 */
.dl_name {
  position: absolute;
  top: 67.241cqw; /* 156 */
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  color: #000;
  font-size: 6.897cqw; /* 16 */
  font-weight: bold;
  line-height: 8.621cqw; /* 20 */
}
.dl_code {
  position: absolute;
  top: 77.586cqw; /* 180 */
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  color: #000;
  font-size: 4.741cqw; /* 11 */
  line-height: 4.741cqw;
}

/* PDFダウンロードボタン */
.dl_pdf_btn {
  position: absolute;
  left: 8.190cqw;  /* 19/232 */
  right: 7.759cqw; /* 18 */
  top: 87.500cqw;  /* 203 */
  height: 10.345cqw; /* 24 */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12.069cqw; /* 28 */
  padding: 1.724cqw 1.724cqw 1.724cqw 17.241cqw; /* 4 4 4 40 */
  background: #fff;
  border: 1px solid #e60039;
  border-radius: 100px;
  color: #e60039;
  font-size: 5.603cqw; /* 13 */
  font-weight: bold;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  z-index: 2; /* 白ベールより上に出す */
  transition: background-color 0.3s ease, color 0.3s ease;
}
.dl_pdf_btn img {
  width: 6.897cqw;  /* 16/232 */
  height: 6.897cqw;
  transform: rotate(-90deg); /* Figma -rotate-90（右矢印→下向き） */
  flex-shrink: 0;
}
/* 矢印の切替（デフォルト=赤円白矢印 / ホバー=白円赤矢印） */
.dl_arrow_hover {
  display: none;
}
/* ホバー: ボタンを赤ベタ反転＋矢印差し替え */
.dl_card:hover .dl_pdf_btn {
  background: #e60039;
  color: #fff;
}
.dl_card:hover .dl_arrow_default {
  display: none;
}
.dl_card:hover .dl_arrow_hover {
  display: inline-block;
}
/* グローバル a:hover{opacity:.5} 打ち消し（PDFボタンが<a>の時） */
.dl_pdf_btn:hover {
  opacity: 1;
}

/* ===== 法人TOPへ戻る ===== */
.dl_back {
  text-align: center;
  padding: 160px 0 100px; /* カード下端→ボタン160 / ボタン下端→footer100 */
}

/* ===== CTA（お問い合わせ）=====
   Figma PC版にCTAは無く、右端の固定サイドボタン(.business_side)が担う。
   SPでは .business_side が display:none になるため、SP版Figmaにのみ存在するCTAを
   フローに置く。PCでは完全に非表示＝PC無改変。 */
.dl_cta {
  display: none;
}

/* =========================================================
   モバイル(SP)対応
   Figma「資料ダウンロードページ」node 23821:8145（393×3486）
   BP=750px（テーマ全体で統一）。PCは無改変（全て本メディア内）。
   座標は frame 基準。KV写真の上端71pxを基準に相対値へ換算する。
   寸法は原則 100%/calc で書き、Figma実寸は「393pxのときその値か」の検算に使う。
   ========================================================= */
@media (max-width: 750px) {

  /* ===== KV（Figma y71-491 / SP専用画像 kv_photo_sp.png 393×420） =====
     .usecase_mv 側のSP定義（page-usecase.css）が土台。ここでは
     page-download.css が後読みで勝ってしまうPC用の上書きを打ち消す。 */
  .download_mv .mv_kv_text {
    top: 141px; /* Figma 箱上端212 − 写真上端71 */
    left: 20px;
  }

  /* 共有SP定義は28px（kintai由来）。downloadは23px/leading29.952＝箱46px。
     28pxのままだと「資料ダウンロード」が224pxになり箱幅208pxとずれる。
     ※単一spanなので line-height:30px / margin-bottom:0 は :last-child 定義が既に効く */
  .download_mv .mv_title span {
    font-size: 23px; /* 8字×23px=184px ＋ padding24 = 箱208px（Figma一致） */
  }

  .download_mv .mv_desc {
    top: 199px; /* Figma y270 − 71 */
    right: 20px; /* 他ページの副コピーは1行nowrapで右端不要だが、downloadは4行折返し（Figma 353×80） */
    line-height: 20px; /* Figma 19.968px（PC用の1.55を打ち消す） */
  }

  /* ===== コンテナ ===== */
  .dl_wrap {
    max-width: none;
    /* base の width:min(980px,calc(100%-40px)) を打消す（タブレット谷間用）。
       打ち消さないと calc の左右20px と下の padding 20px が二重に効き、
       内側が計40px 内側に入ってカードが 171px→151px に痩せる。SPの余白は padding だけで作る。 */
    width: 100%;
    padding: 40px 20px 0; /* 写真下端491 → H2フレーム上端531 */
  }

  /* ===== 製品カタログ 見出し（usecase_section_head 流用） =====
     Figma h2フレーム 305×66（y531）。タイトル28/28 → 赤線51 → ラベル55（フレーム下端を3px超過） */
  .dl_head {
    margin-bottom: 37px; /* ラベル下端600 → リード637。PC用34pxを打ち消す */
  }

  .dl_head h2 {
    line-height: 28px; /* PC用35pxを打ち消す */
  }

  /* 赤線(::after margin-top:12px)とラベル(margin-top:4px)はPC側の指定がそのままSPでも
     Figma一致（赤線47〜51／ラベル55／隙間4px）になるため、SP専用の上書きは不要。 */

  /* ===== リード文（Figma y637-737 / x20 w353・4行×25px） ===== */
  .dl_lead {
    margin-bottom: 60px; /* リード下端737 → 最初の見出しバー797 */
    text-align: left;
    line-height: 25px;
  }

  /* ===== 各カテゴリセクション ===== */
  .dl_section:not(:last-child) {
    margin-bottom: 60px; /* 前カード下端 → 次セクション見出し 60px */
  }

  .dl_section_head {
    margin-bottom: 20px; /* バー下端849 → カード上端869 */
  }

  /* PCは大小を1行に並べるが、SPは2段組み（Figma Frame 9 = 277×52）。
     単段のAndroid/カメラは 8+16+8=32px でFigma一致。 */
  .dl_section_head h3 {
    flex-direction: column;
    /* PCの align-items:center は横並びなので「縦中央」の意味だが、縦積みにすると
       「横中央」に化ける。Figmaのバー内テキストは左寄せなので flex-start に戻す */
    align-items: flex-start;
    height: auto;
    padding: 8px 12px;
    row-gap: 4px; /* 16+4+16=36 ＋ padding16 = 52px（Figmaフレーム高） */
  }

  .dl_section_head .dl_sh_main {
    font-size: 18px;
    line-height: 16px;
  }

  .dl_section_head .dl_sh_sub {
    font-size: 10px;
    line-height: 16px;
  }

  /* ===== カードグリッド（PC4列232px → SP2列） =====
     393pxで (353-11)/2 = 171px ＝ Figma実寸。1fr で狭い端末にも追従させる。 */
  .dl_cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 11px; /* 行 1116-869-235=12 ／ 列 202-20-171=11 */
    justify-content: stretch;
  }

  .dl_card {
    width: auto;
    height: 235px;
    aspect-ratio: auto; /* タブレット用 aspect-ratio(232/243) の漏れを打消し（SPは固定高235） */
  }

  /* タッチ端末では :hover が張り付き、白ベールが乗ったまま残る（PCのホバーは無傷） */
  .dl_card:hover {
    box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.04);
  }
  .dl_card:hover::after {
    opacity: 0;
  }
  .dl_card:hover .dl_pdf_btn {
    background: #fff;
    color: #e60039;
  }
  .dl_card:hover .dl_arrow_default {
    display: inline-block;
  }
  .dl_card:hover .dl_arrow_hover {
    display: none;
  }

  /* キャッチコピー（Figma inset top6.81%→16px・左右0・2行×14px） */
  .dl_catch {
    top: 16px;
    left: 0;
    right: 0;
    font-size: 10px;
    line-height: 14px;
  }

  /* バッジはPCと同じ40×40のまま（Figma SPも40×40）。位置だけ詰まる */
  .dl_badge {
    left: 12px; /* 7.02% */
    width: 40px;  /* base の 17.241cqw 漏れを打消し40×40固定 */
    height: 40px;
  }
  .dl_badge_top {
    top: 56px; /* 23.83% */
  }
  .dl_badge_bottom {
    top: 100px; /* 42.55% */
  }

  /* 製品画像（Figma left32.75% right7.02% top56 h84・aspect103/84）。
     幅はPCの152px固定を解除し左右insetで決めることで狭い端末にも追従させる。 */
  .dl_photo {
    top: 56px;
    left: 32.75%;
    right: 7.02%;
    width: auto;
    height: 84px;
  }

  .dl_name {
    top: 148px; /* 62.98% */
    font-size: 15px;
    line-height: 20px;
  }

  .dl_code {
    top: 172px; /* 73.19% */
    font-size: 11px;   /* base の 4.741cqw 漏れを打消し */
    line-height: 11px;
  }

  /* PDFボタン（Figma inset l/r 7.02%=12px・top195・h24）。
     Figmaは gap12 の固定値だが、合計がカード内寸ギリギリで狭い端末だと破綻するため
     space-between で幅非依存にする（393pxでの見た目はFigmaと同一）。 */
  .dl_pdf_btn {
    left: 12px;
    right: 12px;
    top: 195px; /* 82.98% */
    height: 24px;   /* base の 10.345cqw 漏れを打消し */
    /* 修正依頼#20: Figmaの pl19+space-between だと狭い端末(≈360px)でボタン幅にコンテンツが
       収まらず矢印が右へはみ出す。中央寄せ＋対称paddingにして全幅で収める（文字+矢印を中央配置）。 */
    padding: 4px;
    gap: 8px;
    justify-content: center;
    font-size: 12px;
    line-height: 13px;
  }

  .dl_pdf_btn img {
    width: 14px;
    height: 14px;
  }

  /* ===== CTA（Figma "button - contact" 353×60 / y2619）=====
     PCでは非表示。ボタン本体の寸法は共有 .usecase_cta のSP定義が担う。 */
  .dl_cta {
    display: block;
    padding: 80px 20px 0; /* 最終カード下端2539 → CTA上端2619 */
  }

  /* ===== 法人TOPへ戻る（Figma y2739 / 315×36） ===== */
  .dl_back {
    padding: 60px 0 80px; /* CTA下端2679 → ボタン2739 ／ ボタン下端2775 → footer2855 */
  }
}