/* ============================================================
   冊子版（book.html）専用
   読み込み順: style.css → sub.css → book.css
   ※メインビジュアルと「選ばれる理由」は Web版（903）も同じ作りになる見込み。
============================================================ */

/* ===============================
   メインビジュアル
                コピー30px Bold / ロゴ幅440 / 【冊子版】50px Bold / ボタン400×60
                写真 角丸30
=============================== */
.p-book__mv {
  background: #F1F3F4;
  padding: 60px 0;
  font-family: var(--sub-font);
  color: #3C4043;
}
.p-book__mv-inner {
  display: grid;
  grid-template-columns: 550fr 750fr;
  gap: 38px;
  align-items: center;
}
.p-book__mv-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.p-book__mv-lead {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
}
.p-book__mv-title {
  margin: 20px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.3;
}
.p-book__mv-logo {
  display: block;
  width: 330px;
  max-width: 100%;
  height: auto;
}
.p-book__mv-name {
  display: block;
  margin-top: 16px;
}
.p-book__mv-button {
  margin-top: 28px;
  min-width: 300px;
  background: #533E67; /* 濃い紫（よくあるご質問の＋／−マークと同じ色） */
  transition: transform 0.2s, box-shadow 0.2s;
}
/* オンマウスで少し浮く（ヘッダー右上のCTAボタンと同じ動き。色は薄くしない） */
.p-book__mv-button:hover {
  opacity: 1;
  transform: translateY(-4px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
.p-book__mv-photo {
  position: relative;
  aspect-ratio: 750 / 500;
  border-radius: 24px;
  overflow: hidden;
}
/* 写真は 3:2 に切り抜いた画像を、枠いっぱいに表示 */
.p-book__mv-photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* ===============================
   冊子版が選ばれる理由（写真＋文章）
                見出し48px Bold / 本文26px Medium 行間35
=============================== */
.p-book__reasons {
  display: flex;
  flex-direction: column;
  gap: 60px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.p-book__reason {
  display: grid;
  grid-template-columns: 600fr 707fr;
  gap: 45px;
  align-items: center;
}
/* 偶数段：文章が左、写真が右 */
.p-book__reason--reverse {
  grid-template-columns: 707fr 600fr;
}
.p-book__reason--reverse .p-book__reason-photo {
  order: 2;
}
.p-book__reason-photo {
  position: relative;
  aspect-ratio: 600 / 400;
  border-radius: 24px;
  overflow: hidden;
}
.p-book__reason-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.p-book__reason-img--02 {
  inset: auto;
  left: -7.33%;
  top: -7.46%;
  width: 114.99%;
  height: 115%;
}
.p-book__reason-title {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.4;
}
.p-book__reason-text {
  margin: 18px 0 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.8;
}

/* ===============================
   誌面サンプル（トップページと同じ ActiBook One の埋め込み）
   枠の形はトップページ（.p-top-sample__viewer）と同じ 1200:700。幅はコンテナ（1000px）いっぱい
=============================== */
.p-book__sample-viewer {
  width: 100%;
  aspect-ratio: 1200 / 700;
  background: #DCDEE0;
}
/* 埋め込みスクリプトがiframeに付ける最小サイズを打ち消す（狭い画面ではみ出さないように） */
.p-book__sample-viewer iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0 !important;
  min-height: 0 !important;
  border: 0;
}
/* スマホ：枠をやや縦長（6:6.5）にする（トップページと同じ）
   ビューアはスマホでも見開き表示で、下に操作バー（約110px）が付く。
   正方形で誌面が上下にすき間なく収まる。そこから少しだけ縦に広げて（6:6.5）、誌面の上下にゆとりを持たせている。
   これより低くすると誌面がどんどん小さくなる。縦長にしても、誌面は大きくならず上下が空くだけ */
@media (max-width: 640px) {
  .p-book__sample-viewer {
    aspect-ratio: 6 / 6.5;
  }
}

/* ===============================
   料金（共通部品 c-price への、このページだけの足し分）
=============================== */
.p-book__price-main {
  font-size: 20px;
}
.p-book__price-img {
  border-radius: 11px;
}

/* ============================================================
   テーマ色: 紫。冊子版とWeb版は色だけ違って、作りは同じ。
============================================================ */
:root {
  --page-main: #9A7CB6;   /* 見出しの飾り・ラベル・カードの線 */
  --page-dark: #533E67;   /* ボタン・金額 */
  --page-pale: #F3EEF8;   /* メインビジュアルの背景 */
  --page-tint: #F7F4FA;   /* サンプルの帯の背景 */
}
/* メインビジュアルの背景を、グレーから薄いテーマ色に */
.p-book__mv {
  background: var(--page-pale);
}
/* セクション見出し：上に小さい英字（data-en の文字）、下に短い線 */
.p-book__heading {
  position: relative;
  padding-bottom: 18px;
}
.p-book__heading::before {
  content: attr(data-en);
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--page-main);
}
.p-book__heading::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 48px;
  height: 4px;
  border-radius: 2px;
  background: var(--page-main);
  transform: translateX(-50%);
}
/* サンプルの帯：グレーから、ごく薄いテーマ色に */
.p-book__tint {
  background: var(--page-tint);
}
/* 選ばれる理由の「REASON 01」ラベル */
.p-book__reason-num {
  display: inline-block;
  margin-bottom: 12px;
  padding: 3px 14px;
  border-radius: 999px;
  background: var(--page-main);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
}
/* 料金カード：上にテーマ色の線、名前と金額を濃いテーマ色に、ボタンも濃いテーマ色に */
.p-book__price-list .c-price__item {
  border-top: 6px solid var(--page-main);
}
.p-book__price-main,
.p-book__price-list .c-price__amount {
  color: var(--page-dark);
}
.p-book__price-list .c-button--dark {
  background: var(--page-dark);
}

/* ============================================================
   料金コーナーの文字サイズ（PC）。全体的に大きくしている
   共通部品 c-price（sub.css）の値を、このページ用に上書きしている。
   → の左が sub.css の元の値
============================================================ */
/* 「導入料金･基本料金 ゼロ円」と、その下の1行は、料金ページ（price.css の p-price__lead）と同じ見た目：
   36px・黄色いマーカーの下線／24px。カードとの間も料金ページと同じ52px */
.p-book__price .c-price__lead {
  width: fit-content;
  margin-inline: auto;
  padding: 0 8px;
  background: linear-gradient(transparent 78%, #FFEDA8 78%);
  font-size: 36px;
  font-weight: 600;
  line-height: 1.3;
}
.p-book__price .c-price__note {
  margin-top: 12px;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.3;
}
.p-book__price-list {
  margin-top: 52px;
}
.p-book__price-list .c-price__name {
  font-size: 17px; /* 15 → 17 */
}
.p-book__price-main {
  font-size: 24px; /* 20 → 24 */
}
.p-book__price-list .c-price__text {
  font-size: 14px; /* 12 → 14 */
}
.p-book__price-list .c-price__amount {
  font-size: 30px; /* 24 → 30 */
}
.p-book__price-list .c-price__unit {
  font-size: 14px; /* 12 → 14 */
}
.p-book__price-list .c-price__item .c-button {
  min-width: 150px;  /* 120 → 150 */
  min-height: 38px;  /* 32 → 38 */
  font-size: 15px;   /* 13 → 15 */
}
/* 「特別セット」の一文：トップページ（style.css の p-top-type__note）と同じ、赤系の線の丸い枠 */
.p-book__price .c-price__foot {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  padding: 12px 28px;
  border: 2px solid #C9727D;
  border-radius: 999px;
  background: #FFFFFF;
  font-size: 15px;
  font-weight: 500;
}
.p-book__price .c-price__foot strong {
  color: #C9727D;
}

/* ============================================================
   レスポンシブ（サイト共通のブレークポイント 820 / 640 / 480px）
   ※冊子版（book.css）とWeb版（web.css）で同じ値。片方を直すときはもう片方もそろえる。
============================================================ */

/* ----- 820px以下（タブレット）：横並びのまま、文字と間隔を少し詰める ----- */
@media (max-width: 820px) {
  .p-book__mv {
    padding: 44px 0;
  }
  .p-book__mv-inner {
    gap: 24px;
  }
  .p-book__mv-lead {
    font-size: 18px;
  }
  .p-book__mv-title {
    margin-top: 16px;
    font-size: 28px;
  }
  .p-book__mv-logo {
    width: 260px;
  }
  .p-book__mv-name {
    margin-top: 12px;
  }
  .p-book__mv-button {
    margin-top: 22px;
    min-width: 240px;
  }
  .p-book__reasons {
    gap: 44px;
  }
  .p-book__reason {
    gap: 28px;
  }
  .p-book__reason-title {
    font-size: 22px;
  }
  .p-book__reason-text {
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.7;
  }
  /* 料金カード：3枚横並びのまま、中を少し詰める */
  .p-book__price-list {
    gap: 14px;
  }
  .p-book__price-list .c-price__item {
    padding: 20px 14px 24px;
  }
  .p-book__price-list .c-price__name {
    font-size: 13px;
  }
  .p-book__price-main {
    font-size: 18px;
  }
  /* 料金の文字：PCより少し小さく（カードの幅が狭くなるため） */
  .p-book__price .c-price__foot {
    font-size: 15px;
  }
  .p-book__price-list .c-price__text {
    font-size: 13px;
  }
  .p-book__price-list .c-price__amount {
    font-size: 26px;
  }
  .p-book__price-list .c-price__unit {
    font-size: 12px;
  }
  .p-book__price-list .c-price__item .c-button {
    min-width: 120px;
    min-height: 34px;
    font-size: 14px;
  }
}

/* ----- 640px以下（スマホ）：縦1列に積む ----- */
@media (max-width: 640px) {
  .p-book__mv {
    padding: 28px 0;
  }
  /* メインビジュアル：スマホでも横並びのまま、写真は小さく添えるだけにする
     （写真で見せるより、すぐ本文を読み進められるように） */
  /* 上の段：左に文字（コピー〜【】まで）、右に写真。下の段：ボタンを横いっぱいの中央に */
  .p-book__mv-inner {
    grid-template-columns: 1fr 38%;
    grid-template-areas:
      "lead   photo"
      "title  photo"
      "button button";
    gap: 0 16px;
  }
  /* 文字のまとまり（mv-body）の枠をなくして、中身を1つずつ上の配置に並べる */
  .p-book__mv-body {
    display: contents;
  }
  .p-book__mv-lead {
    grid-area: lead;
    align-self: end;
    text-align: center;
    font-size: 14px;
  }
  .p-book__mv-title {
    grid-area: title;
    align-self: start;
    margin-top: 12px;
    font-size: 20px;
  }
  .p-book__mv-photo {
    grid-area: photo;
  }
  .p-book__mv-logo {
    width: 200px;
  }
  .p-book__mv-name {
    margin-top: 8px;
  }
  .p-book__mv-button {
    grid-area: button;
    justify-self: center;
    margin-top: 20px;
    min-width: 0;
    width: 100%;
    max-width: 320px;
    min-height: 44px;
    font-size: 15px;
  }
  .p-book__mv-photo {
    border-radius: 12px;
  }
  /* 選ばれる理由：どの段も 写真 → 文章 の順に縦並び */
  .p-book__reasons {
    gap: 40px;
  }
  .p-book__reason,
  .p-book__reason--reverse {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .p-book__reason--reverse .p-book__reason-photo {
    order: 0;
  }
  .p-book__reason-photo {
    border-radius: 16px;
  }
  .p-book__reason-title {
    font-size: 20px;
  }
  /* 料金：カードを横幅いっぱいで縦に1枚ずつ。
     カードの中は「左に画像／右に名前と説明」、下の段に「金額と購入ボタン」を横に並べて、*/
  .p-book__price-list {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 24px;
  }
  .p-book__price-list .c-price__item {
    display: grid;
    grid-template-columns: 34% 1fr auto;
    grid-template-areas:
      "img    name   name"
      "img    text   text"
      "amount amount button";
    grid-template-rows: auto 1fr auto; /* 説明文を名前のすぐ下に付ける */
    gap: 0 14px;
    align-items: start;
    padding: 14px 16px 16px;
    text-align: left;
  }
  .p-book__price-list .c-price__img {
    grid-area: img;
    max-width: none;
    margin-top: 0;
  }
  /* 名前は改行をやめて1〜2行に（冊子版＊コミュニケーション・ペーパー） */
  .p-book__price-list .c-price__name {
    grid-area: name;
    font-size: 14px;
    line-height: 1.5;
  }
  .p-book__price-list .c-price__name br {
    display: none;
  }
  .p-book__price-main {
    font-size: 16px;
  }
  .p-book__price-list .c-price__text {
    grid-area: text;
    margin-top: 6px;
    line-height: 1.6;
  }
  .p-book__price-list .c-price__amount {
    grid-area: amount;
    align-self: center;
    margin: 12px 0 0;
    padding-top: 0;
    font-size: 22px;
  }
  .p-book__price-list .c-price__item .c-button {
    grid-area: button;
    align-self: center;
    margin-top: 12px;
  }
  /* 料金ページのスマホと同じ：24px／16px */
  .p-book__price .c-price__lead {
    font-size: 24px;
  }
  .p-book__price .c-price__note {
    margin-top: 8px;
    font-size: 16px;
  }
  .p-book__price .c-price__foot {
    padding: 10px 20px;
    border-radius: 24px;
    font-size: 13px;
  }
  .p-book__price .c-price__foot {
    margin-top: 24px;
  }
}

/* ----- 480px以下（小さいスマホ） ----- */
@media (max-width: 480px) {
  .p-book__mv-inner {
    gap: 0 12px;
  }
  .p-book__mv-lead {
    font-size: 12px;
  }
  .p-book__mv-title {
    font-size: 17px;
  }
  .p-book__mv-logo {
    width: 160px;
  }
  .p-book__reason-title {
    font-size: 18px;
  }
}