/* ============================================================
   Web版（web.html）専用
   読み込み順: style.css → sub.css → web.css
   ※メインビジュアル・選ばれる理由・料金の足し分は、冊子版（book.css）と同じ作り・同じ数値。
     片方を直すときは、もう片方もそろえること。
   ※幅は冊子版と同じ1000px（l-container--narrow）。レスポンシブはファイルの末尾。
============================================================ */

/* ===============================
   メインビジュアル
                コピー30px Bold / ロゴ幅440 / 【Web版】50px Bold / ボタン400×60
                写真 角丸30
=============================== */
.p-web__mv {
  background: #F1F3F4;
  padding: 60px 0;
  font-family: var(--sub-font);
  color: #3C4043;
}
.p-web__mv-inner {
  display: grid;
  grid-template-columns: 550fr 750fr;
  gap: 38px;
  align-items: center;
}
.p-web__mv-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.p-web__mv-lead {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
}
.p-web__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-web__mv-logo {
  display: block;
  width: 330px;
  max-width: 100%;
  height: auto;
}
.p-web__mv-name {
  display: block;
  margin-top: 16px;
}
.p-web__mv-button {
  margin-top: 28px;
  min-width: 300px;
  background: #2F5F59;
  transition: transform 0.2s, box-shadow 0.2s;
}
/* オンマウスで少し浮く（ヘッダー右上のCTAボタンと同じ動き。色は薄くしない） */
.p-web__mv-button:hover {
  opacity: 1;
  transform: translateY(-4px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
.p-web__mv-photo {
  position: relative;
  aspect-ratio: 750 / 500;
  border-radius: 24px;
  overflow: hidden;
}
.p-web__mv-photo-img {
  position: absolute;
  left: -35.42%;
  top: -51.37%;
  width: 170.17%;
  height: 170.17%;
  max-width: none;
}

/* ===============================
   Web版が選ばれる理由（写真＋文章）
                見出し48px Bold / 本文26px Medium 行間35
=============================== */
.p-web__reasons {
  display: flex;
  flex-direction: column;
  gap: 60px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.p-web__reason {
  display: grid;
  grid-template-columns: 600fr 707fr;
  gap: 45px;
  align-items: center;
}
/* 偶数段：文章が左、写真が右 */
.p-web__reason--reverse {
  grid-template-columns: 707fr 600fr;
}
.p-web__reason--reverse .p-web__reason-photo {
  order: 2;
}
.p-web__reason-photo {
  position: relative;
  aspect-ratio: 600 / 400;
  border-radius: 24px;
  overflow: hidden;
}
.p-web__reason-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
/* 理由1の写真だけ、パソコンとスマホに目がいくように拡大して表示
   元の写真（4:3）のうち、横の約77%・縦の約69%の範囲を枠いっぱいに見せている（約1.3倍）。
   もっと寄る／引くときは、4つの数字を同じ割合で変える */
.p-web__reason-img--01 {
  inset: auto;
  left: -18%;
  top: -30%;
  width: 130%;
  height: 145.6%; /* 幅130%のとき、写真（4:3）の縦横比がくずれない高さ */
}
.p-web__reason-title {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.4;
}
.p-web__reason-text {
  margin: 18px 0 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.8;
}

/* ===============================
   画面サンプル（PCとスマホの画像を縦に2枚）
   ※画像の幅・角丸は共通部品 c-figure（幅いっぱい・角丸38px）
=============================== */
.p-web__samples {
  display: flex;
  flex-direction: column;
  gap: 52px;
}

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

/* ============================================================
   テーマ色: 緑。冊子版とWeb版は色だけ違って、作りは同じ。
============================================================ */
:root {
  --page-main: #5A9E94;   /* 見出しの飾り・ラベル・カードの線 */
  --page-dark: #2F5F59;   /* ボタン・金額 */
  --page-pale: #EDF5F3;   /* メインビジュアルの背景 */
  --page-tint: #F4F9F8;   /* サンプルの帯の背景 */
}
/* メインビジュアルの背景を、グレーから薄いテーマ色に */
.p-web__mv {
  background: var(--page-pale);
}
/* セクション見出し：上に小さい英字（data-en の文字）、下に短い線 */
.p-web__heading {
  position: relative;
  padding-bottom: 18px;
}
.p-web__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-web__heading::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 48px;
  height: 4px;
  border-radius: 2px;
  background: var(--page-main);
  transform: translateX(-50%);
}
/* サンプルの帯：グレーから、ごく薄いテーマ色に */
.p-web__tint {
  background: var(--page-tint);
}
/* 選ばれる理由の「REASON 01」ラベル */
.p-web__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-web__price-list .c-price__item {
  border-top: 6px solid var(--page-main);
}
.p-web__price-main,
.p-web__price-list .c-price__amount {
  color: var(--page-dark);
}
.p-web__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-web__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-web__price .c-price__note {
  margin-top: 12px;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.3;
}
.p-web__price-list {
  margin-top: 52px;
}
.p-web__price-list .c-price__name {
  font-size: 17px; /* 15 → 17 */
}
.p-web__price-main {
  font-size: 24px; /* 20 → 24 */
}
.p-web__price-list .c-price__text {
  font-size: 14px; /* 12 → 14 */
}
.p-web__price-list .c-price__amount {
  font-size: 30px; /* 24 → 30 */
}
.p-web__price-list .c-price__unit {
  font-size: 14px; /* 12 → 14 */
}
.p-web__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-web__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-web__price .c-price__foot strong {
  color: #C9727D;
}

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

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

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

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