/* ============================================================
   下層ページ（セカンドページ）共通の部品だけを置くファイル
   読み込み順: style.css → sub.css → 各ページのCSS（faq.css など）
   ※各ページ専用のスタイルはここに書かず、ページ別のCSSに書く。
============================================================ */

/* ===============================
   下層ページ共通の数値（ここを変えると全下層ページに効く）
=============================== */
:root {
  --container: 1280px;        /* コンテンツ幅の上限。ヘッダー・フッターと同じ */
  --container-narrow: 1000px;
  --sub-font: "Inter", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
}

/* 共通コンテナ：ヘッダーの .l-header__inner と同じ考え方
   （max-width 1280px の内側に左右 var(--offset) の余白） */
.l-container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--offset);
}
/* 狭い版：中身が1000pxになるよう、左右余白ぶんを足している */
.l-container--narrow {
  max-width: calc(var(--container-narrow) + var(--offset) * 2);
}

/* ===============================
   ページタイトル帯（下層ページ共通）
   ※文字サイズ・余白は、ヘッダー・フッターの縮小率（約0.75倍）に合わせて調整
=============================== */
.c-page-title {
  background: #F1F3F4;
  padding: 60px 0;
  text-align: center;
}
.c-page-title__heading {
  margin: 0;
  font-family: var(--sub-font);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.3;
  color: #3C4043;
}
/* 2行タイプ：見出しの上に小さく「Fresher's Course」を入れるとき（コンテンツ・導入事例） */
.c-page-title__sub {
  display: block;
  margin-bottom: 6px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
}

/* 左寄せタイプ（下層ページの基本形。よくあるご質問ページがベース）
   使い方:
   <div class="c-page-title c-page-title--left" style="--page-title-bg: #D5C4E6;">
     <div class="l-container l-container--narrow">
       <h1 class="c-page-title__heading"><span class="c-page-title__sub">Faq</span>よくあるご質問</h1>
   ・背景色はページごとに style の --page-title-bg で指定（sub.cssは触らなくてよい）
   ・開始位置は中のコンテナで決まる（l-container--narrow = 中身1000pxの左端）
   ・日本語の見出し32px / その上の英字18px */
.c-page-title--left {
  background: var(--page-title-bg, #F1F3F4);
  text-align: left;
}
.c-page-title--left .c-page-title__heading {
  font-size: 32px;
}
.c-page-title--left .c-page-title__sub {
  font-size: 18px;
}

/* ===============================
   セクション（白とグレーが交互の背景帯）
   使い方: <section class="l-section"> / グレーにするときは l-section--gray を足す
=============================== */
.l-section {
  padding: 64px 0;
  background: #FFFFFF;
  font-family: var(--sub-font);
  color: #3C4043;
}
.l-section--gray {
  background: #F5F5F5; /* 埋め込みフォーム（iframe）の背景色に合わせた */
}

/* ===============================
   セクション見出し（中央寄せの太字）
   例:「冊子版が選ばれる理由」「料金」
=============================== */
.c-heading {
  margin: 0 0 40px;
  font-family: var(--sub-font);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.4;
  color: #3C4043;
  text-align: center;
}

/* ===============================
   ボタン（角丸のグレー）
   例:「無料サンプルを申込む」「購入する」
   c-button--small … カード内などの小さいボタン
=============================== */
.c-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 240px;
  min-height: 48px;
  padding: 8px 32px;
  border: none;
  border-radius: 999px;
  background: #BABCBE;
  font-family: var(--sub-font);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: #FFFFFF;
  text-align: center;
  cursor: pointer;
  transition: opacity 0.2s;
}
.c-button:hover {
  opacity: 0.8;
}
/* 濃いグレーのボタン（フッターと同じ色） */
.c-button--dark {
  background: #4D4D4D;
}
.c-button--small {
  min-width: 120px;
  min-height: 32px;
  padding: 4px 20px;
  font-size: 13px;
}

/* ===============================
   カード（白＋角丸＋薄い影）
   影はフッターのCTAボタンと同じ値
=============================== */
.c-card {
  background: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

/* ===============================
   料金ブロック（カード3枚）
   使うページ: 冊子版 / Web版（料金ページでも使う見込み）
=============================== */
.c-price {
  font-family: var(--sub-font);
  color: #3C4043;
  text-align: center;
}
.c-price__lead {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
}
.c-price__note {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.6;
}
.c-price__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
}
.c-price__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 20px 28px;
}
.c-price__name {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
}
.c-price__img {
  width: 100%;
  max-width: 220px;
  height: auto;
  margin-top: 16px;
  display: block;
}
.c-price__text {
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 1.7;
  text-align: left;
}
.c-price__amount {
  margin: auto 0 0;
  padding-top: 16px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
}
.c-price__unit {
  font-size: 12px;
  font-weight: 400;
}
.c-price__item .c-button {
  margin-top: 12px;
}
.c-price__foot {
  margin: 32px 0 0;
  font-size: 14px;
  line-height: 1.6;
}

/* ===============================
   使い方: <div class="l-container l-container--narrow l-stack"> の直下に並べる
=============================== */
.l-stack {
  display: flex;
  flex-direction: column;
  gap: 52px;
}

/* ===============================
   下線付きの大見出し（中央寄せ＋太い下線）
   例:「Fresher’s Course サービス紹介資料」
=============================== */
.c-title-line {
  margin: 0;
  padding-bottom: 18px;
  border-bottom: 3px solid #848484;
  font-family: var(--sub-font);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.4;
  color: #3C4043;
  text-align: center;
}

/* ===============================
   下線付きの小見出し（左寄せ＋細い下線）
   例:「注意事項」「この資料で分かること」
=============================== */
.c-subhead {
  margin: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid #848484;
  font-family: var(--sub-font);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  color: #3C4043;
}

/* ===============================
   箇条書き（・付き）
=============================== */
.c-list {
  margin: 24px 0 0;
  padding: 0 0 0 1.5em;
  list-style: disc;
  font-family: var(--sub-font);
  font-size: 18px;
  line-height: 1.6;
  color: #3C4043;
}

/* ===============================
   大きい画像（資料の表紙など）
=============================== */
.c-figure {
  margin: 0;
}
.c-figure__img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 38px;
}

/* ===============================
   ボタンを中央に置く行
=============================== */
.c-button-row {
  margin: 0;
  display: flex;
  justify-content: center;
}

/* ===============================
   埋め込みフォームのブロック（グレー帯の中に置く）
   フォームの中身は外部サービスのiframeで表示されるため、
   ここで決めているのは説明文と、フォームを置く枠の幅だけ。
=============================== */
.c-form__lead {
  margin: 0;
  font-family: var(--sub-font);
  font-size: 18px;
  line-height: 1.6;
  color: #3C4043;
}
/* 説明文があるときだけ、説明文とフォームの間をあける */
.c-form__lead + .c-form__embed {
  margin-top: 52px;
}
.c-form__embed iframe {
  display: block;
  max-width: 100%;
  border: 0;
}

/* ===============================
   640px以下のときだけ効く改行
   使い方: <br class="u-br-sp">
=============================== */
.u-br-sp {
  display: none;
}
@media (max-width: 640px) {
  .u-br-sp {
    display: inline;
  }
}

/* ===============================
   スマートフォン（640px以下）
   下層ページ共通部品のスマホ用の値
=============================== */
@media (max-width: 640px) {
  .c-page-title {
    padding: 30px 0;
  }
  .c-page-title--left .c-page-title__heading {
    font-size: 24px;
  }
  .c-title-line {
    padding-bottom: 10px;
    font-size: 22px;
    line-height: 1.2;
  }
  .c-heading {
    margin-bottom: 28px;
    font-size: 22px;
  }
  .c-subhead {
    font-size: 18px;
  }
  .c-list {
    margin: 16px 0 0;
    font-size: 16px;
  }
  /* 縦に積むブロックの間隔（画像 c-figure の上下の空きはこれ） */
  .l-stack {
    gap: 36px;
  }
  /* セクションの上下の余白 */
  .l-section {
    padding: 44px 0;
  }
  /* 大きい画像の角丸（画像が小さくなるぶん控えめに） */
  .c-figure__img {
    border-radius: 20px;
  }
}

/* ===============================
   注意事項用の小さい版（小見出し＋箇条書き）
   使い方: class="c-subhead c-subhead--note" / class="c-list c-list--note"
   ※「この資料で分かること」など注意事項でないものには付けない
=============================== */
.c-subhead--note {
  font-size: 16px;
  letter-spacing: 1px;
}
.c-list--note {
  margin: 14px 0 0;
  font-size: 14px;
}
@media (max-width: 640px) {
  .c-subhead--note {
    padding-bottom: 8px;
    font-size: 14px;
  }
  .c-list--note {
    margin: 16px 0 0;
    font-size: 12px;
  }
}