/* ==========================================
   cw_contact.css  ?  Download/Contact page（最終版）
   * このページ専用。すべて .dl-page でスコープ
   * 画像は PC/モバイルとも 16:9 で統一（object-fit: cover）
   ========================================== */

/* ===== Base ===== */
* { box-sizing: border-box; }
html, body { height: 100%; }
body.dl-page {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial,
               "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  color: #111;
  background: #fff;
}
.dl-page img { max-width: 100%; height: auto; display: block; }

/* ===== Layout helpers ===== */
.dl-page .wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.dl-page .section { padding: 40px 0; }
.dl-page .section--content { padding-top: 24px; }
.dl-page .card {
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
  padding: 20px;
}

/* ===== Header ===== */
.dl-page .dl-header { background: #fff; border-bottom: 1px solid rgba(0,0,0,.06); }
.dl-page .dl-header__inner {
  height: 60px; display:flex; align-items:center; justify-content:flex-start;
}
.dl-page .dl-header__logo img { height: 32px; width: auto; }

/* ===== Hero ===== */
.dl-page .hero { padding: 40px 0 12px; background: #f7f8fb; }
.dl-page .eyebrow { font-size: 13px; letter-spacing: .06em; color: #5a5f6a; margin: 0 0 6px; }
.dl-page .hero__title {
  margin: 0 0 8px;
  font-size: clamp(22px, 2.6vw + .6rem, 40px);
  line-height: 1.25; font-weight: 800; letter-spacing: .01em;
}
.dl-page .hero__lead { margin: 0; color: #333; line-height: 1.8; }

/* ===== Grid (content + form) ===== */
.dl-page .grid {
  display: grid;
  grid-template-columns: 1fr minmax(360px, 560px);
  gap: 24px; align-items: start;
}
@media (max-width: 1024px) {
  .dl-page .grid { grid-template-columns: 1fr; }
}

/* Content column */
.dl-page .col--content { display: grid; gap: 16px; }

/* ===== Thumbnails: 上1 + 下2 ===== */
/* 画像ブロックのカード背景/枠/影を無効化（白い四角を消す） */
.dl-page .thumbs.card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.dl-page .thumbs { display: grid; grid-template-rows: auto auto; gap: 12px; }

/* PC/モバイルともに 16:9 で統一（余剰はトリミング） */
.dl-page .thumbs__hero img,
.dl-page .thumbs__item img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 10px;
}

.dl-page .thumbs__hero figcaption { margin-top: 6px; font-size: 12px; color: #555; }

/* 下2枚は2カラム（モバイルで1カラム） */
.dl-page .thumbs__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 768px) { .dl-page .thumbs__grid { grid-template-columns: 1fr; gap: 8px; } }

.dl-page .thumbs__item figcaption { margin-top: 6px; font-size: 12px; color: #555; }

/* ===== Learn block（背景色と見出しを強調） ===== */
.dl-page .learn.card {
  background: #f7f8fb !important;
  border: 1px solid rgba(0,0,0,.05);
}
.dl-page .section__title { font-size: 18px; margin: 0 0 10px; line-height: 1.4; }
.dl-page .learn .section__title { font-size: 22px; font-weight: 800; margin-bottom: 12px; }
.dl-page .learn__list { margin: 0; padding-left: 1.2em; line-height: 1.8; }

/* Overview */
.dl-page .overview p { margin: 0; line-height: 1.9; color: #222; }

/* ===== Form column ===== */
.dl-page .col--form .form__title { margin: 0 0 10px; font-size: 18px; }
.dl-page .form__iframe {
  width: 100%; height: 920px; border: 0; display: block; background: #fff;
}

/* ===== CTA ===== */
.dl-page .section--cta { padding-top: 8px; padding-bottom: 40px; }
.dl-page .cta__note { margin: 0; color: #555; font-size: 14px; }

/* ===== Footer ===== */
.dl-page .dl-footer { border-top: 1px solid rgba(0,0,0,.06); background: #fff; }
.dl-page .dl-footer__inner { padding: 24px 0; color: #666; font-size: 13px; }

/* ===== Lightbox ===== */
.dl-page .lb-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.72);
  display: none; align-items: center; justify-content: center;
  padding: 24px; z-index: 9999;
}
.dl-page .lb-overlay.is-open { display: flex; }
.dl-page .lb-img {
  max-width: 92vw; max-height: 92vh; border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.dl-page .lb-close {
  position: absolute; top: 12px; right: 16px; font-size: 28px; color: #fff;
  line-height: 1; cursor: pointer; user-select: none;
}

/* ===== Desktop tuning（PC時に左を広げて画像を大きく） ===== */
@media (min-width: 1025px) {
  /* 必要に応じて 1280→1360/1440 */
  .dl-page .wrap { max-width: 1280px; }

  /* 左右比率：左を広げる（数値を上げるほど左が広く） */
  .dl-page .grid { grid-template-columns: 1.15fr minmax(360px, 520px); }

  /* 下2枚の最小幅を確保しつつ拡大 */
  .dl-page .thumbs__grid { grid-template-columns: repeat(2, minmax(320px, 1fr)); gap: 10px; }
}

/* ===== Optional knobs（必要に応じてコメント解除） ===== */
/* 角丸を弱める/消す
.dl-page .thumbs__hero img, .dl-page .thumbs__item img { border-radius: 6px; }  または 0;
*/

/* フォームを端末ごとに高さ調整
@media (max-width: 768px) { .dl-page .form__iframe { height: 920px; } }
*/
/* ==== ヘッダーが縦に広がるのを抑止（このページ専用の強制上書き） ==== */
.dl-page header.dl-header {
  /* 汎用headerルールを打ち消す */
  padding: 0 !important;
  margin: 0 !important;
  min-height: 60px;                 /* これ以上は伸びない基準 */
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.06);
  line-height: normal;
}

.dl-page header.dl-header .dl-header__inner {
  height: 60px;                     /* 実高さ */
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 16px;                  /* 横の余白だけ */
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.dl-page header.dl-header .dl-header__logo {
  display: inline-flex;
  align-items: center;
  height: 100%;
}

.dl-page header.dl-header .dl-header__logo img {
  height: 32px !important;          /* 画像拡大で高さが伸びないよう固定 */
  width: auto;
}

/* 上に余白が出るケース（マージンの折り畳み対策） */
.dl-page .hero { margin-top: 0 !important; }

/* ==== ヘッダーロゴの横位置を本文の左端にピッタリ合わせる ==== */
.dl-page .dl-header__inner {
  max-width: 1120px;   /* モバイル?タブレット */
  margin: 0 auto;
  padding: 0 16px;     /* 本文 .wrap と同じ左右余白 */
}

@media (min-width: 1025px) {
  .dl-page .dl-header__inner {
    max-width: 1280px; /* ← 本文 .wrap と同じ値にする（1280/1360/1440など） */
  }
}
/* ==== ヘッダーはこのページでは非表示 ==== */
.dl-page .dl-header { display: none !important; }

/* ==== ヒーロー先頭：ロゴ + 資料請求（横並び） ==== */
.dl-page .hero { padding: 28px 0 12px; } /* ヘッダー削除分を少し詰める */
.dl-page .hero__top{
  display: flex;
  align-items: center;
  gap: 10px;             /* ロゴとテキストの間隔 */
  margin-bottom: 6px;    /* タイトルとの距離 */
}
.dl-page .hero__logo img{
  height: 18px;          /* 13インチでも主張しすぎないサイズ感 */
  width: auto;
  display: block;
}

@media (max-width: 768px){
  .dl-page .hero{ padding: 24px 0 10px; }
  .dl-page .hero__logo img{ height: 16px; }
}
/* ==== 13インチ最適化：1366×768 / 1280×800 付近 ==== */
@media (min-width: 1180px) and (max-width: 1440px) {

  /* 横幅バランス：本文の最大幅を少し絞って視線移動を短く */
  .dl-page .wrap { max-width: 1200px; }

  /* タイトルまわり：サイズと余白を圧縮 */
  .dl-page .hero { padding: 20px 0 8px; }
  .dl-page .hero__title {
    font-size: clamp(24px, 2.2vw + .4rem, 32px);  /* だいたい 28?32px */
    line-height: 1.25;
    margin-bottom: 6px;
  }
  .dl-page .hero__lead { font-size: 13px; }

  /* 2カラム比率：左(画像)をやや広く、フォームは固定幅寄りに */
  .dl-page .grid {
    grid-template-columns: 1.2fr minmax(400px, 460px);
    gap: 20px;
  }

  /* フォームカード：パディングを少し詰める。iframeも短めに */
  .dl-page .card { padding: 16px; } /* 全体のカードも少しタイトに */
  .dl-page .col--form .form__title { font-size: 16px; margin-bottom: 8px; }
  .dl-page .form__iframe { height: 920px; }  

  /* 画像：高さを抑えて“上1＋下2”が1画面に入りやすく */
  /* 上の大画像は横長に（高さを低く） */
  .dl-page .thumbs__hero img {
    aspect-ratio: 21 / 9;         /* 以前 16/9 → 21/9 で背丈を低く */
  }
  /* 下2枚はやや低めにして3枚を一望しやすく */
  .dl-page .thumbs__item img {
    aspect-ratio: 16 / 10;        /* 以前 16/9 → 16/10（少しだけ背を低く） */
  }

  /* 画像群の余白をさらに詰める */
  .dl-page .thumbs { gap: 10px; }
  .dl-page .thumbs__grid { gap: 8px; }
  .dl-page .thumbs__hero figcaption,
  .dl-page .thumbs__item figcaption { font-size: 11px; margin-top: 4px; }

  /* 「資料でわかること」ブロックもコンパクト化 */
  .dl-page .learn.card { padding: 14px; }
  .dl-page .learn .section__title { font-size: 20px; margin-bottom: 8px; }
  .dl-page .learn__list { line-height: 1.7; }
}
/* ==== ロゴと「資料請求」を上下中央で揃える ==== */
.dl-page .hero__top{
  display: flex;
  align-items: center;   /* ← ここで上下中央揃え */
  gap: 10px;
  margin-bottom: 6px;
}

/* ロゴ（高さはお好みで 16?22px の範囲で調整） */
.dl-page .hero__logo{ display: flex; align-items: center; }
.dl-page .hero__logo img{
  height: 18px;          /* ← 必要なら 20px などに */
  width: auto;
  display: block;        /* 余計なベースラインのズレを防止 */
}

/* 「資料請求」側の段落余白と行間をゼロ基準に */
.dl-page .hero__top .eyebrow{
  margin: 0 !important;  /* 既存の 0 0 6px を無効化 */
  line-height: 1 !important;
  padding: 0;
  display: inline-block;
}

/* 微調整が必要なときの“1pxだけ下げる/上げる”用（任意） */
/* 下げたい：正ならプラス、上げたい：マイナスで */
.dl-page .hero__top .eyebrow{ transform: translateY(0); }
/* 例) 0.5pxだけ下げる → translateY(0.5px); */

/* 「この資料でわかること」見出しを中央揃え */
.dl-page .learn .section__title {
  text-align: center;
}

/* 箇条書きを確実に表示（黒丸・左インデント） */
.dl-page .learn__list {
  list-style: disc inside;  /* または disc; として padding-left を使ってもOK */
  padding-left: 1.2em;
  margin: 8px 0 0;
}

/* 「この資料でわかること」ブロック：上下余白を追加 */
.dl-page .learn.card{
  margin: 28px 0;         /* ← 外側の余白（上・下） */
  padding-top: 20px;      /* ← 内側の上余白（お好みで調整） */
  padding-bottom: 20px;   /* ← 内側の下余白（お好みで調整） */
}

/* 見出しの前後も少し広げたい場合 */
.dl-page .learn .section__title{
  margin: 12px 0 14px;    /* 上下の間隔 */
}

/* モバイルは少しタイトにする場合（任意） */
@media (max-width: 768px){
  .dl-page .learn.card{
    margin: 20px 0;
    padding-top: 16px;
    padding-bottom: 16px;
  }
}