@charset "UTF-8";
/* =========================================================
   フォームページ（資料請求 / 無料トライアル）
   参考: lp-dx-navi.kikagaku.ai/document-download・/free-trial-form
   style.css の後に読み込む（ヘッダー・フッター・SPメニューは style.css を流用）
   ========================================================= */
.form-page{ background:var(--gray); color:#000; }
/* 現行ページは固定ヘッダーの下まで背景が入り、上端から140px（SP 100px）に本文が始まる */
.form-page__inner{ max-width:1330px; margin-inline:auto; padding:calc(140px - var(--header-h)) 20px 140px; }
/* 左：本文＋トップに戻る ／ 右：フォーム（2行にまたがる）。フォームの方が長くても「トップに戻る」は本文の直下に来る */
.form-page__row{
  display:grid; grid-template-columns:minmax(0, 845px) 375px; grid-template-rows:auto 1fr;
  grid-template-areas:"body card" "back card"; justify-content:space-between; column-gap:70px;
}
.form-page__body{ grid-area:body; min-width:0; }

/* 見出しブロック */
/* 見出し〜線の空きは、線〜次の見出し（.form-page__h3 の margin-top）と同じにする */
.form-page__head{ padding-bottom:55px; border-bottom:1px solid #DEDEDE; }
.form-page__tag{ display:inline-block; padding:8px; border-radius:50px; background:#000; color:#fff; font-weight:700; font-size:16px; line-height:1.4; }
.form-page__title{ margin-top:20px; font-weight:700; font-size:32px; line-height:1.4; }

/* 本文 */
.u-nowrap{ white-space:nowrap; }
.form-page__h3{ margin-top:55px; font-weight:700; font-size:20px; line-height:1.4; }
.form-page__list{ margin:30px 0 0 20px; list-style:disc; }
.form-page__list li + li{ margin-top:20px; }
.form-page__list--simple li{ line-height:1; }
.form-page__list + .form-page__h3{ margin-top:90px; }
.form-page__text{ margin-top:30px; font-size:16px; line-height:1.5; }

/* 資料請求：提供資料の画像 */
.form-page__shots-list{ display:grid; grid-template-columns:repeat(2, 1fr); gap:30px; }
.form-page__shots-list--doc{ margin-top:70px; }
.form-page__shots-list img{ width:100%; height:auto; display:block; border:1px solid #DEDEDE; }

/* トライアル：【見出し】＋丸数字リスト */
.form-page__label{ margin-top:40px; font-size:16px; line-height:1.4; color:#333; }
.form-page__h3 + .form-page__label{ margin-top:50px; }
.form-page__num{ margin-top:24px; counter-reset:num; color:#333; line-height:1.4; }
.form-page__num li{ position:relative; padding-left:50px; counter-increment:num; }
.form-page__num li + li{ margin-top:20px; }
.form-page__num li::before{
  content:counter(num); position:absolute; left:0; top:-3px; width:28px; height:28px; border-radius:50%;
  background:var(--blue); color:#fff; font-family:var(--ff-en); font-weight:700; font-size:14px; line-height:28px; text-align:center;
}

/* トライアル：画面例（PCは2枚を横並び、SPは縦並び） */
.form-page__trial-shots{ display:flex; align-items:flex-start; gap:3.5%; margin-top:40px; }
.form-page__trial-shots img{ flex:1 1 0; min-width:0; height:auto; display:block; border-radius:10px; }
.form-page__note{ margin-top:16px; font-size:14px; line-height:1.5; color:#777; }

/* フォームカード */
.form-card{ grid-area:card; align-self:start; padding:30px 20px; border-radius:10px; background:#fff; }
.form-card iframe{ display:block; width:100%; height:1250px; border:0; }

/* トップに戻る */
.form-page__back{ grid-area:back; align-self:start; display:flex; justify-content:flex-start; margin-top:100px; }
.form-page__back a{ display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:16px; line-height:1; transition:opacity .3s; }
.form-page__back a:hover{ opacity:.7; }
.form-page__back img{ width:28px; height:28px; }

/* 1カラム（フォームを本文の下へ） */
@media (max-width:1000px){
  .form-page__row{ grid-template-columns:minmax(0, 1fr); grid-template-rows:auto; grid-template-areas:"body" "card" "back"; row-gap:55px; }
  .form-card{ width:100%; max-width:600px; margin-inline:auto; }
  .form-page__back{ margin-top:15px; }
}
@media (max-width:768px){
  .form-page__inner{ padding:calc(100px - var(--header-h)) 20px 100px; }
  .form-page__tag{ padding:6px 8px; font-size:12px; }
  .form-page__title{ margin-top:16px; font-size:24px; }
  .form-page__head{ padding-bottom:40px; }
  .form-page__h3{ margin-top:40px; font-size:18px; }
  .form-page__list + .form-page__h3{ margin-top:60px; }
  .form-page__shots-list{ gap:10px; }
  .form-page__num li{ padding-left:40px; }
  .form-page__row{ row-gap:40px; }
  .form-page__shots-list--doc{ margin-top:40px; grid-template-columns:minmax(0, 1fr); }
  .form-page__trial-shots{ flex-direction:column; gap:15px; }
  .form-page__trial-shots img{ flex:none; width:100%; border-radius:5px; }
  .form-card{ padding:20px 15px; }
}