@charset "UTF-8";
/* ==========================================================
   /document/ お役立ち資料・資料ダウンロード・資料請求完了 専用スタイル

   本文のレイアウトは page-document-*.php 側のインラインスタイルで
   完結しているため、ここではテーマ共通CSSと干渉させたくない
   最小限の指定と、Contact Form 7「資料ダウンロード」の見た目のみを置く。
   すべて #document-page 配下にスコープする。

   2026-10-26 初版
   2026-10-27 固定ヘッダー分の上余白を追加
   ========================================================== */

/* ---------- 固定ヘッダー分の上余白 ----------
   テーマのヘッダーは position: fixed で本文に重なる。
   SP：高さ92px（上下16px＋ロゴ60px）／PC（1024px〜）：バー100px＋ロゴ下端が最大190px付近。
   本文側で空けないとパンくず・見出しがヘッダーとロゴの裏に隠れる。 */
#document-page {
  padding-top: 92px;
}

@media (min-width: 1024px) {
  #document-page {
    padding-top: 160px;
  }
}

/* ---------- リンク色（テーマ既定を上書きせずページ内のみ） ---------- */
#document-page a {
  color: #00053A;
}

#document-page a:hover {
  color: #006FCF;
}

#document-page .document-btn-primary:hover,
#document-page .document-btn-outline:hover {
  opacity: 0.85;
}

/* ---------- 資料請求完了：お礼＋案内（左）とカレンダー（右） ----------
   PCではカレンダーを最初の画面に入れるため横並び。それより狭い幅は縦並び。
   TimeRex はPCブラウザだと min-width: 550px で描画し、はみ出しは自分の枠内で横スクロールさせる
   （スマホ判定時は幅100%）。右列が600px前後とれる 1200px〜 で並べる。
   minmax(0, 1fr)：列が中身の550pxに合わせて広がり、ページ全体がはみ出すのを防ぐ。 */
#document-page .document-thanks-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
}

/* 縦並びのときは文章の1行が長くなりすぎないようにする */
#document-page .document-thanks-grid > div:first-child {
  max-width: 760px;
}

@media (min-width: 1200px) {
  #document-page .document-thanks-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 56px;
    align-items: start;
  }

  #document-page .document-thanks-grid > div:first-child {
    max-width: none;
  }
}

/* 余白・文字サイズ（PC・タブレット）。SP で詰めるためインラインではなくここで持つ */
#document-page .document-thanks-hero {
  padding: 40px 24px 72px;
}

#document-page .document-thanks-steps {
  margin: 0 0 28px;
}

#document-page .document-thanks-title {
  margin: 0 0 16px;
  font-size: clamp(22px, 2.1vw, 30px);
}

#document-page .document-thanks-message {
  margin: 0 0 32px;
  font-size: 15px;
  line-height: 2;
}

#document-page .document-thanks-meeting {
  padding-top: 28px;
}

#document-page .document-thanks-meeting-title {
  margin: 0 0 12px;
  font-size: clamp(20px, 1.8vw, 24px);
}

#document-page .document-thanks-lead {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 2;
}

#document-page .document-thanks-pills {
  gap: 8px;
}

#document-page .document-thanks-pills li {
  padding: 6px 16px;
  border-radius: 999px;
  background: #ffffff;
  color: #00053A;
  font-size: 14px;
  font-weight: 700;
}

#document-page .document-thanks-calendar {
  padding: 16px;
}

/* SP：カレンダーを最初の画面に入れるため詰める（2026-10-28 上長依頼）
   TimeRex は枠内の上部に自前で「所要時間・タイトル・ステップ」を出すため、
   こちらの案内は見出しと所要時間・形式・料金だけ残す。
   英字の見出しと、カレンダーがすぐ下にあれば不要な補足文は出さない。 */
@media (max-width: 767px) {
  #document-page .document-thanks-hero {
    padding-top: 24px;
  }

  #document-page .document-thanks-grid {
    gap: 20px;
  }

  #document-page .document-thanks-steps {
    margin-bottom: 16px;
  }

  #document-page .document-thanks-eyebrow,
  #document-page .document-thanks-sp-hide {
    display: none;
  }

  #document-page .document-thanks-title {
    margin-bottom: 8px;
    font-size: 20px;
  }

  #document-page .document-thanks-message {
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.8;
  }

  #document-page .document-thanks-meeting {
    padding-top: 16px;
  }

  #document-page .document-thanks-meeting-title {
    margin-bottom: 10px;
    font-size: 17px;
  }

  #document-page .document-thanks-pills {
    gap: 6px;
  }

  #document-page .document-thanks-pills li {
    padding: 3px 10px;
    font-size: 12px;
  }

  #document-page .document-thanks-calendar {
    padding: 8px;
  }
}

/* ---------- 読み上げ専用テキスト ---------- */
#document-page .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 資料ダウンロードフォーム（CF7） ----------
   フォームの中身は管理画面の CF7「資料ダウンロード」で
   .dl-field / .dl-required / .dl-consent / .dl-submit を使って組む。 */
#document-page .taw-document-form {
  display: grid;
  gap: 20px;
}

#document-page .taw-document-form .dl-field label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #00053A;
}

#document-page .taw-document-form .dl-required {
  padding: 1px 8px;
  border-radius: 4px;
  background: #00053A;
  color: #ffffff;
  font-size: 11px;
}

#document-page .taw-document-form .wpcf7-form-control-wrap {
  display: block;
}

#document-page .taw-document-form input[type="text"],
#document-page .taw-document-form input[type="email"],
#document-page .taw-document-form input[type="tel"] {
  width: 100%;
  box-sizing: border-box;
  min-height: 50px;
  padding: 12px 16px;
  border: 1px solid #CBCBCB;
  border-radius: 8px;
  background: #ffffff;
  font: inherit;
  font-size: 16px; /* 16px 未満だと iOS で入力時に拡大される */
  color: #282828;
}

#document-page .taw-document-form input[type="text"]:focus,
#document-page .taw-document-form input[type="email"]:focus,
#document-page .taw-document-form input[type="tel"]:focus {
  outline: 2px solid #006FCF;
  outline-offset: 1px;
  border-color: #006FCF;
}

#document-page .taw-document-form input::placeholder {
  color: #8A949E;
}

#document-page .taw-document-form .dl-consent {
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
  color: #5E6A75;
  text-align: center;
}

#document-page .taw-document-form .dl-consent a {
  color: #006FCF;
  text-decoration: underline;
}

#document-page .taw-document-form .dl-submit {
  position: relative;
}

#document-page .taw-document-form .wpcf7-submit {
  display: block;
  width: 100%;
  min-height: 56px;
  border: 0;
  border-radius: 999px;
  background: #006FCF; /* ヘッダー「お問い合わせ」（bg-secondary）と同色 */
  color: #ffffff;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

#document-page .taw-document-form .wpcf7-submit:hover {
  opacity: 0.9;
}

#document-page .taw-document-form .wpcf7-submit:focus-visible {
  outline: 2px solid #006FCF;
  outline-offset: 3px;
}

#document-page .taw-document-form .wpcf7-submit:disabled {
  background: #9ca3af;
  cursor: not-allowed;
}

/* 送信中のスピナーはボタンの右端に重ねる（ボタン幅を崩さない） */
#document-page .taw-document-form .wpcf7-spinner {
  position: absolute;
  top: 50%;
  right: 16px;
  margin: -12px 0 0;
}

/* ---------- CF7 のエラー・送信結果 ---------- */
#document-page .taw-document-form .wpcf7-not-valid {
  border-color: #C8102E;
}

#document-page .taw-document-form .wpcf7-not-valid-tip {
  margin-top: 6px;
  font-size: 13px;
  color: #C8102E;
}

#document-page .taw-document-form .wpcf7-response-output {
  margin: 0;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.7;
}

/* ---------- アクセシビリティ ---------- */
#document-page a:focus-visible {
  outline: 2px solid #006FCF;
  outline-offset: 3px;
}