/* =========================================================
   AI×FAQ 資料ダウンロードフォーム（/service/ai-faq/whitepaper/）
   ベースHTML（wisbit_download_form.html）のスタイルを踏襲。
   共通ヘッダー/フッターを持たない独立ページ。
   ========================================================= */

/* =========================================================
   Wisbit ブランドトークン
   ========================================================= */
:root {
  --wb-navy:      #355F9E;   /* Wisbitネイビー(ロゴ準拠) */
  --wb-navy-dark: #24406e;   /* ヒーロー背景用の濃色 */
  --wb-navy-deep: #142743;   /* 濃紺グラデ終点 */
  --wb-blue:      #43B0DD;   /* Wisbitライトブルー(ロゴ準拠) */
  --wb-blue-soft: #e9f4fb;   /* 薄ブルー(帯・hover) */
  --wb-orange:    #EC6626;   /* WisbitオレンジCTA(ロゴ準拠) */
  --wb-orange-dk: #c9531a;
  --wb-ink:       #1a2433;   /* 本文 */
  --wb-ink-sub:   #5a6b81;   /* 補足テキスト */
  --wb-bg:        #f4f7fb;   /* ページ背景 */
  --wb-line:      #d9e2ee;   /* 罫線・枠線 */
  --wb-radius: 14px;
}

/* 独立ページのためブラウザ既定の body margin(8px) をリセット */
html, body { margin: 0; padding: 0; }

.wb-dl * { margin: 0; padding: 0; box-sizing: border-box; }

.wb-dl {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  color: var(--wb-ink);
  background: var(--wb-bg);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

.wb-dl img { max-width: 100%; display: block; }

/* =========================================================
   ヒーロー(濃紺帯) — フォームカードがここに重なる
   ========================================================= */
.wb-dl .hero {
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(67,176,221,.32), transparent 60%),
    linear-gradient(135deg, var(--wb-navy-dark) 0%, var(--wb-navy-deep) 100%);
  color: #fff;
  padding: 22px 24px 150px; /* 下余白 = フォームカードの食い込み分。FHDで初期表示にフォーム全体を収めるため圧縮 */
  position: relative;
  overflow: hidden;
}

/* 背景の装飾ドット(FAQの吹き出しを想起させる粒) */
.wb-dl .hero::after {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.08) 1.5px, transparent 1.5px);
  background-size: 28px 28px;
  mask-image: linear-gradient(105deg, transparent 55%, #000 90%);
  -webkit-mask-image: linear-gradient(105deg, transparent 55%, #000 90%);
  pointer-events: none;
}

.wb-dl .hero-inner {
  max-width: 1120px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.wb-dl .site-logo {
  display: block;
  width: fit-content;
  margin-bottom: 14px;
}
/* ダーク背景ではネイビーの文字だけ白に反転(ロゴのSVG fillをCSSで上書き) */
.wb-dl .logo-white path[fill="#355F9E"] { fill: #ffffff; }

.wb-dl .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  color: #cfe0ff;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  padding: 4px 13px;
  margin-bottom: 12px;
}
.wb-dl .hero-eyebrow .tag {
  background: var(--wb-orange);
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  padding: 2px 10px;
  letter-spacing: .08em;
}

.wb-dl .hero h1 {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: .02em;
}
.wb-dl .hero h1 .marker {
  background: linear-gradient(transparent 62%, rgba(236,102,38,.45) 62%);
  padding: 0 2px;
}

.wb-dl .hero .lede {
  margin-top: 10px;
  max-width: 560px;
  color: #d7e3f6;
  font-size: 13px;
  line-height: 1.55;
}

/* =========================================================
   2カラム:左=資料紹介 / 右=フォーム(グラスカード)
   ========================================================= */
.wb-dl .layout {
  max-width: 1120px;
  margin: -140px auto 0;  /* ヒーローに食い込ませる */
  padding: 0 24px 80px;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 40px;
  align-items: start;
  position: relative;
  z-index: 2;
}

/* ---------- 左カラム ---------- */
.wb-dl .doc-panel { padding-top: 8px; }

/* 資料イメージ:表紙を前面に、中ページ2枚を背面にずらして重ねる */
.wb-dl .doc-stack {
  position: relative;
  padding-bottom: 9%;
}
.wb-dl .doc-stack img {
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.5);
  box-shadow: 0 18px 44px rgba(10, 33, 64, .32);
  height: auto;
}
.wb-dl .doc-stack .front {
  position: relative;
  z-index: 2;
  width: 70%;
  transform: rotate(-1.2deg);
}
.wb-dl .doc-stack .back {
  position: absolute;
  width: 55%;
  z-index: 1;
}
.wb-dl .doc-stack .back-1 {
  top: -8px;
  right: 0;
  transform: rotate(2deg);
}
.wb-dl .doc-stack .back-2 {
  bottom: 0;
  right: 3%;
  transform: rotate(-2.4deg);
  z-index: 0;
}

@media (max-width: 640px) {
  .wb-dl .doc-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-bottom: 0;
  }
  .wb-dl .doc-stack .front { width: 100%; transform: none; }
  .wb-dl .doc-stack .back {
    position: static;
    width: calc(50% - 6px);
    transform: none;
  }
}

.wb-dl .learn {
  margin-top: 44px;
}
.wb-dl .learn h2 {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .04em;
  display: flex;
  align-items: center;
  gap: 12px;
}
.wb-dl .learn h2::before {
  content: "";
  width: 6px;
  height: 26px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--wb-blue), var(--wb-navy));
}

.wb-dl .learn ul {
  list-style: none;
  margin-top: 20px;
  display: grid;
  gap: 4px;
}
.wb-dl .learn li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 6px;
  border-bottom: 1px dashed var(--wb-line);
  font-size: 15px;
  font-weight: 500;
}
.wb-dl .learn li:last-child { border-bottom: none; }

.wb-dl .check {
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 3px;
}

.wb-dl .audience {
  margin-top: 36px;
  background: var(--wb-blue-soft);
  border-radius: var(--wb-radius);
  padding: 22px 24px;
  font-size: 14px;
}
.wb-dl .audience strong { color: var(--wb-navy); }

/* ---------- 右カラム:フォーム(グラスカード) ---------- */
.wb-dl .form-card {
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--wb-radius);
  box-shadow: 0 24px 60px rgba(10, 33, 64, .28);
  padding: 22px 24px 22px;
  position: sticky;
  top: 14px;
  margin-top: -142px;  /* フォームカードをヒーロー内まで引き上げる */
}

.wb-dl .form-card h2 {
  font-size: 17px;
  font-weight: 900;
  text-align: center;
  letter-spacing: .04em;
}
.wb-dl .form-card .form-note {
  text-align: center;
  font-size: 12.5px;
  color: var(--wb-ink-sub);
  margin: 6px 0 14px;
}

.wb-dl .field { margin-bottom: 12px; }
.wb-dl .field label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 5px;
}
.wb-dl .field label .req {
  color: var(--wb-orange-dk);
  font-size: 11px;
  font-weight: 700;
  margin-left: 6px;
}
.wb-dl .field .hint {
  font-size: 11.5px;
  color: var(--wb-ink-sub);
  margin-top: 4px;
}

.wb-dl .field input,
.wb-dl .field select,
.wb-dl .field textarea {
  width: 100%;
  font: inherit;
  font-size: 13.5px;
  padding: 10px 12px;
  border: 1px solid var(--wb-line);
  border-radius: 10px;
  background: #fff;
  color: var(--wb-ink);
  transition: border-color .15s, box-shadow .15s;
}
.wb-dl .field textarea { resize: vertical; min-height: 62px; }
.wb-dl .field input::placeholder,
.wb-dl .field textarea::placeholder { color: #a8b4c4; }
.wb-dl .field input:focus,
.wb-dl .field select:focus,
.wb-dl .field textarea:focus {
  outline: none;
  border-color: var(--wb-blue);
  box-shadow: 0 0 0 3px rgba(67,176,221,.3);
}

.wb-dl .field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* お名前(姓/名)の2カラム。CF7出力(wpcf7-form-control-wrap)と素のinputの両方に対応 */
.wb-dl .name-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.wb-dl .name-split > span,
.wb-dl .name-split .wpcf7-form-control-wrap {
  display: block;
}
.wb-dl .name-split input { width: 100%; }
/* CF7(autop)がラベルと姓/名の間に差し込む<br>を無効化しラベル直下に寄せる */
.wb-dl .field:has(.name-split) br { display: none; }

.wb-dl .consent {
  font-size: 12px;
  color: var(--wb-ink-sub);
  margin: 12px 0 12px;
  text-align: center;
}
.wb-dl .consent a { color: var(--wb-blue); font-weight: 700; }

.wb-dl .submit {
  width: 100%;
  font: inherit;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .06em;
  color: #fff;
  background: linear-gradient(180deg, var(--wb-orange), var(--wb-orange-dk));
  border: none;
  border-radius: 999px;
  padding: 12px;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(236,102,38,.4);
  transition: transform .12s, box-shadow .12s;
}
.wb-dl .submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(236,102,38,.45);
}
.wb-dl .submit:focus-visible {
  outline: 3px solid var(--wb-blue);
  outline-offset: 3px;
}
.wb-dl .submit-sub {
  text-align: center;
  font-size: 11.5px;
  color: var(--wb-ink-sub);
  margin-top: 6px;
}

/* =========================================================
   Contact Form 7 出力の調整
   （CF7 は各コントロールを span.wpcf7-form-control-wrap で包む）
   ========================================================= */
.wb-dl .form-card .wpcf7 { margin: 0; }
.wb-dl .form-card .wpcf7 form.wpcf7-form { margin: 0; }
.wb-dl .field .wpcf7-form-control-wrap { display: block; }
.wb-dl .field label .wpcf7-form-control-wrap { margin-top: 6px; }

/* バリデーションメッセージ・エラー枠 */
.wb-dl .wpcf7-not-valid-tip {
  color: var(--wb-orange-dk);
  font-size: 11.5px;
  margin-top: 4px;
}
.wb-dl .field input.wpcf7-not-valid,
.wb-dl .field select.wpcf7-not-valid,
.wb-dl .field textarea.wpcf7-not-valid {
  border-color: var(--wb-orange-dk);
}
.wb-dl .wpcf7-response-output {
  margin: 14px 0 0;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.6;
}

/* 送信中スピナー */
.wb-dl .wpcf7-spinner { margin: 12px auto 0; display: block; }

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width: 920px) {
  .wb-dl .hero { padding-bottom: 64px; }
  .wb-dl .layout {
    grid-template-columns: 1fr;
    margin-top: 32px;
  }
  .wb-dl .form-card { position: static; margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .wb-dl .submit { transition: none; }
  .wb-dl .submit:hover { transform: none; }
}

/* =========================================================
   サンクスページ
   ========================================================= */
/* 上部帯(DLページのヒーローの短縮版) */
.wb-thanks .thx-hero {
  background:
    radial-gradient(900px 400px at 85% -20%, rgba(67,176,221,.32), transparent 60%),
    linear-gradient(135deg, var(--wb-navy-dark) 0%, var(--wb-navy-deep) 100%);
  color: #fff;
  padding: 44px 24px 140px;
}
.wb-thanks .thx-hero-inner { max-width: 760px; margin: 0 auto; }
.wb-thanks .thx-logo { display: block; width: fit-content; }
.wb-thanks .thx-logo-white { width: 170px; height: auto; }
.wb-thanks .thx-logo-white path[fill="#355F9E"] { fill: #ffffff; }

/* 完了カード */
.wb-thanks .thx-wrap {
  max-width: 760px;
  margin: -104px auto 0;
  padding: 0 24px 80px;
}
.wb-thanks .thx-card {
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--wb-radius);
  box-shadow: 0 24px 60px rgba(10, 33, 64, .28);
  padding: 44px 40px;
  text-align: center;
}
.wb-thanks .thx-done-icon { width: 64px; height: 64px; margin: 0 auto 18px; }
.wb-thanks .thx-card h1 {
  font-size: clamp(22px, 3.4vw, 28px);
  font-weight: 900;
  letter-spacing: .03em;
  color: var(--wb-ink);
}
.wb-thanks .thx-lead {
  margin-top: 12px;
  font-size: 15px;
  color: var(--wb-ink-sub);
}
.wb-thanks .thx-dl-button {
  display: inline-block;
  margin-top: 26px;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .06em;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(180deg, var(--wb-orange), var(--wb-orange-dk));
  border-radius: 999px;
  padding: 16px 44px;
  box-shadow: 0 10px 24px rgba(236,102,38,.4);
  transition: transform .12s, box-shadow .12s;
}
.wb-thanks .thx-dl-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(236,102,38,.45);
}
.wb-thanks .thx-dl-button:focus-visible {
  outline: 3px solid var(--wb-blue);
  outline-offset: 3px;
}
.wb-thanks .thx-dl-sub {
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--wb-ink-sub);
}

/* 次のアクション */
.wb-thanks .thx-next { margin-top: 40px; }
.wb-thanks .thx-next h2 {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .04em;
  text-align: center;
  color: var(--wb-ink-sub);
}
.wb-thanks .thx-next-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.wb-thanks .thx-next-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-radius);
  padding: 22px 22px 20px;
  transition: border-color .15s, box-shadow .15s, transform .12s;
}
.wb-thanks .thx-next-card:hover {
  border-color: var(--wb-blue);
  box-shadow: 0 10px 26px rgba(53,95,158,.14);
  transform: translateY(-2px);
}
.wb-thanks .thx-nc-title {
  font-weight: 900;
  font-size: 15px;
  color: var(--wb-navy);
  display: flex;
  align-items: center;
  gap: 8px;
}
.wb-thanks .thx-nc-title::after {
  content: "→";
  margin-left: auto;
  color: var(--wb-blue);
}
.wb-thanks .thx-nc-desc {
  margin-top: 6px;
  font-size: 13px;
  color: var(--wb-ink-sub);
}
.wb-thanks .thx-back-home {
  display: block;
  text-align: center;
  margin-top: 32px;
  font-size: 13px;
  color: var(--wb-ink-sub);
}
.wb-thanks .thx-back-home a { color: var(--wb-navy); font-weight: 700; }

@media (max-width: 640px) {
  .wb-thanks .thx-card { padding: 34px 22px; }
  .wb-thanks .thx-next-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .wb-thanks .thx-dl-button, .wb-thanks .thx-next-card { transition: none; }
  .wb-thanks .thx-dl-button:hover, .wb-thanks .thx-next-card:hover { transform: none; }
}

/* =========================================================
   お問い合わせ / 製品資料ダウンロード（本体サイト）追加分
   ダウンロードフォームのトークン・レイアウトを共有する。
   ========================================================= */

/* 任意項目バッジ（必須バッジ .req と対） */
.wb-dl .field label .opt {
  color: var(--wb-ink-sub);
  font-size: 11px;
  font-weight: 700;
  margin-left: 6px;
}

/* ヒーローのキャッチと左カラム（資料画像/担当写真）の間に余白を確保 */
.wb-dl .doc-panel { padding-top: 44px; }

/* お問い合わせ:左カラムの担当者イメージ写真 */
.wb-dl .contact-photo {
  margin: 0;
  max-width: 460px;
  border-radius: var(--wb-radius);
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(10, 33, 64, .28);
}
.wb-dl .contact-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* お問い合わせ:電話番号リンク */
.wb-dl .audience .tel-link {
  color: var(--wb-navy);
  font-weight: 900;
  font-size: 18px;
  letter-spacing: .02em;
  text-decoration: none;
}

/* 製品資料DL:資料内容の3項目（サムネイル + 説明） */
.wb-dl .doc-features {
  list-style: none;
  margin: 18px 0 0;
  display: grid;
  gap: 14px;
}
.wb-dl .doc-feature {
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 16px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-radius);
  padding: 14px;
}
.wb-dl .doc-feature__thumb {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  background: var(--wb-blue-soft);
  border: 1px solid var(--wb-line);
}
.wb-dl .doc-feature__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 画像未配置時のプレースホルダー（onerror でセット） */
.wb-dl .doc-feature__thumb.is-empty {
  position: relative;
  background:
    repeating-linear-gradient(45deg, #eef4fb, #eef4fb 8px, #e4eef8 8px, #e4eef8 16px);
}
.wb-dl .doc-feature__thumb.is-empty::after {
  content: "画像";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--wb-ink-sub);
}
.wb-dl .doc-feature__body { display: block; }
.wb-dl .doc-feature__title {
  display: block;
  font-size: 15px;
  font-weight: 900;
  color: var(--wb-navy);
}
.wb-dl .doc-feature__desc {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--wb-ink-sub);
  line-height: 1.7;
}

@media (max-width: 640px) {
  .wb-dl .doc-feature { grid-template-columns: 92px 1fr; gap: 12px; }
}