/* pages/price.css
   料金（price.html）だけの見た目（p-price-）
   ・共通部品（c-）の中身は上書きしない。足りない見た目は、共通部品のクラスと並べて付ける p-price- のクラスに書く
   ・色・書体は base.css のトークンだけ（新しい色は足さない）。メディアクエリは従来の書き方だけ
   ・タブ（c-tabs）・比較表（c-compare-table）・注記の枠（c-note-box）・ページ見出し（c-page-head）は parts.css、
     料金カード（c-plan-card）・動画カード（c-video-card。丸投げ動画制作所のタブの制作例）・数字の一覧（c-data-list）・FAQ（c-faq）・写真の枠（c-photo-frame）・CTA帯は components.css の共通部品。
     HTML 側でクラスを付けるだけで、このファイルには書かない（見出しの帯の写真の比率だけ、下に書く）
   AI Search Dock（単体）の料金カードの、名前・価格・初期費用・箇条書きの並びは、
   c-plan-card の修飾子（c-plan-card--price-top と __pricebox / __initial / __features / __price--sm）で作るので、このファイルには書かない */

/* 見出しの帯の写真（オフィスのイメージ。タブの外にあり、どのタブでも見える）。PC は右の列、SP は文章の下で、どちらも 2:1（背を低くして、タブの帯を最初の画面に入れる）。
   タブレットは横いっぱいに広がるので 4:1（1024×768 でもタブの帯が最初の画面に入る高さ。写真は 3:2 なので上下が切れるが、机・柱・観葉植物・ソファのある中央が残る） */
.p-price-head__media {
  --photo-ratio: 2 / 1;
}

@media (min-width: 768px) and (max-width: 1099.98px) {
  .p-price-head__media {
    --photo-ratio: 4 / 1;
  }
}

/* 表の見出し（h3。「AI検索支援フルパッケージ — 月額5プラン（税別）」） */
.p-price-subhead {
  margin-bottom: 20px;
}

/* 表の下の注記とオプションの枠を、縦に並べる */
.p-price-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin-top: 20px;
}

/* AI検索支援のタブの中の「投資回収の目安」（h3 p-price-subhead ＋ データの一覧 ＋ 注記）。比較表・注記・オプションの下に続く新しい小見出しの塊なので、
   上の余白は、丸投げ動画制作所のタブの制作例（p-price-works）と同じ 56px（SP 40px）にする（20px だと、オプションの枠に詰まって見える） */
.p-price-roi {
  margin-top: 56px;
}

/* データの一覧の説明は h4（見出しの階層は、タブの見出し h2 → 投資回収の目安 h3 → 説明 h4）。c-data-list__lead は、h3 のときは base.css の h3 の text-wrap: balance が効いていたので、
   h4 でも同じ折り返しにする（見た目は変えない） */
.p-price-roi__lead {
  text-wrap: balance;
}

.p-price-roi__note {
  margin-top: 20px;
}

@media (max-width: 767.98px) {
  .p-price-roi {
    margin-top: 40px;
  }
}

/* 丸投げ動画制作所のタブ：料金カードと注記の下に、制作例（動画カード3本。サムネイル・作品名・お客様名）を並べる。見出し（h3）は、表の見出しと同じ p-price-subhead */
.p-price-works {
  margin-top: 56px;
}

/* 作品名は h4（見出しの階層は、タブの見出し h2 → 制作例 h3 → 作品名 h4）。動画カードの作品名（c-video-card__title）は、ギャラリーでは h3 で見出しの書体になるので、
   h4 にも同じ書体・太さ・字間を付ける */
.p-price-work__title {
  font-family: var(--ff-head);
  font-weight: 700;
  letter-spacing: .02em;
  text-wrap: balance;
}

/* 3列の制作例のカードが細い 768〜831px（カードの内側が 183〜203px）では、折り返さない「＜ホワイトペーパーラボ＞」（16px で 196px）が右の余白にはみ出すので、
   この幅だけ作品名を 14px（171px）にする。832px 以上は 16px のままで、内側の幅に収まる */
@media (min-width: 768px) and (max-width: 831.98px) {
  .p-price-work__title {
    font-size: 14px;
  }
}

/* 作品名の下の、お客様名（作品名より小さく、補足の文字色） */
.p-price-client {
  margin-top: -2px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--c-ink-2);
}

@media (max-width: 767.98px) {
  .p-price-works {
    margin-top: 40px;
  }
}