@charset "UTF-8";
/* CSS Document */

/* === support04 Download Section === */

/* セクション全体 */
.dl-section {
  padding: 24px 0;
}
.dl-title {
  margin: 0 0 20px;
  font-size: 22px;
  font-weight: 700;
  padding-bottom: 6px;
}

/* グリッド */
.dl-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr)); /* PCは3カラム */
  gap: 50px 60px;
  align-items: start;
}

/* カード */
.dl-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
}

/* キャプション：3行ボックス＋下揃え */
.dl-caption {
  margin: 0;
  line-height: 1.5;
  height: calc(1.5em * 3);   /* 3行ぶん固定 */
  display: flex;
  align-items: flex-end;     /* テキストを底辺に寄せる */
font-size:15px;
  font-weight: 700;
}

/* 図の画像だけ枠付き */
.dl-img img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #e6e1d5;
  border-radius: 4px;
  padding: 4px;
  background: #fff;
}

/* DLボタン */
.dl-btn {
  margin-top: 6px;
  text-align: center;
}
.dl-btn img {
  display: inline-block;
  max-width: 240px;
  height: auto;
}
.dl-card.is-ex7 {
  position: relative; /* 基準にする */
}

/* 黄色の縦バー */
/*.dl-card.is-ex7::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -30px; 
  width: 3px;
  background: #fac000;
  margin: auto; 
}*/

/* 8+9を右2カラムに配置。中身サイズはそのまま */
.dl-group89{
  grid-column: 2 / 4;                            /* 7の右側(列2-3)を丸ごと使う */
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  column-gap: 60px; /* 親(.dl-grid)と同じ横gap */
  row-gap: 50px;   /* 親と同じ縦gap */
  position: relative;
  z-index: 0;
  padding: 0;  /* ← 重要：中身を縮めない */
}

/* 背景は疑似要素で。中身の幅に影響させない */
.dl-group89::before{
  content: "";
  position: absolute;
  inset: 21px -24px -25px; /* 上下左右下地調整 */
  background: #F3F5DF; 
  border-radius: 12px;
  z-index: -1;
  pointer-events: none;
}

/* 子カードの背景があれば透過に（親の下地を見せるため） */
.dl-group89 .dl-card{ background: transparent; }

.pc-only-note {
  display: none;
  margin-top: 8px;
}

@media (hover:hover) and (pointer:fine) {
  .pc-only-note {
    display: block;
  }
}
/* ==== レスポンシブ ==== */

/* タブレット（～1080px）：2カラム */
@media (max-width: 1080px) {
  .dl-grid {
    grid-template-columns: repeat(2, minmax(240px, 1fr));
	gap: 50px 50px;
  }
  .dl-caption{
    /* 3行ボックスを維持して底揃え */
    height: calc(1.5em * 3);
    align-items: flex-end;
    line-height: 1.5;
    display: flex;
  }
  .dl-card.is-ex7 {
    border-right: none;
    padding-right: 0;
    margin-right: 0;
  }
  .dl-group89 {
    grid-template-columns: repeat(2, 1fr); /* ← 2列維持 */
    column-gap: 20px;  /* 好みで調整 */
    row-gap: 20px;     /* 縦間隔も調整可能 */
  }
  .dl-group89::before{
    inset: -8px -12px;    /* はみ出し量を控えめに */
  }

}


@media (max-width:1080px){
  /* 2列を強制（他CSSの後勝ち対策） */
  .dl-grid{
    grid-template-columns: repeat(2, minmax(240px, 1fr)) !important;
    gap: 50px 50px !important;
  }

  /* 8+9のグループは親グリッドをフルで使わせる（列2/4指定を上書き） */
  .dl-group89{
    grid-column: 1 / -1 !important;
    grid-template-columns: repeat(2, minmax(240px, 1fr)) !important;
    column-gap: 20px;
    row-gap: 20px;
  }
}

/* ==== スマホ（～640px）：1カラム ==== */
@media (max-width: 640px) {
  .dl-grid {
    grid-template-columns: 1fr !important; /* 1カラム強制 */
    gap: 30px !important;                  /* 好みで調整 */
  }
  .dl-caption {
    height: auto !important;  
    align-items: normal !important;
  }
  .dl-group89 {
    grid-template-columns: 1fr !important; 
    grid-column: 1 / -1 !important;
  }
}
/* ===== 画像カード（サムネイル） ===== */
.dl-img {
  position: relative;
}
.dl-img > img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #e6e1d5;
  border-radius: 4px;
  padding: 4px;
  background: #fff;
  transition: transform .18s ease, box-shadow .18s ease;
}

/* マウス環境のみの軽いホバー演出 */
@media (hover:hover) and (pointer:fine) {
  .dl-img:hover > img {
    transform: scale(1.02);
    box-shadow: 0 6px 16px rgba(0,0,0,.12);
  }
}

/* ===== オーバーレイ ===== */
.zoom-overlay {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  background: rgba(0,0,0,.28);
  z-index: 9999;
}
.zoom-overlay.is-open { display: grid; }
.zoom-overlay img {
  max-width: 70dvw;
  max-height: 70dvh;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
}

/* ← このブロックを下に追加（カーソル指定を分離） */
.zoom-overlay,
.zoom-overlay img {
  cursor: zoom-out;  /* 背景でも画像上でも閉じられる雰囲気に */
}

body.-noScroll { overflow: hidden; }

/* ===== PCのみ表示する虫眼鏡アイコン ===== */
@media (hover:hover) and (pointer:fine) {
  .dl-img::after {
    content: "";
    position: absolute;
    right: 8px;
    bottom: 6px;
    width: 22px;
    height: 22px;
    background: url("../img/support/icon-zoom.svg") no-repeat center / contain;
    opacity: .75;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  .dl-img:hover::after { opacity: 1; }
}

/* ===== アニメ苦手設定に配慮（任意） ===== */
@media (prefers-reduced-motion: reduce) {
  .dl-img > img,
  .zoom-overlay img {
    transition: none;
  }
}