@charset "UTF-8";
/* ============================================================
   price.css（v2: 2026-10-27 見た目の整理）
   料金ページ（/price/）専用。<body data-page="price"> のときだけ効く。

   方針
   - 区切りは背景色ではなく余白でつくる。背景の色替えは「白」と「ごく薄いグレー」の2つだけ
   - 太字は見出しと金額だけ。本文・リストは通常の太さ
   - 色はアクセントの緑（#29baa2）を、推奨プラン・チェック・ボタンに絞って使う
   - 囲み枠は必要なもの（プランカード・導入例）だけ。補足は枠なしの小さい文字

   「仮」バッジ（.p-price-tbd）は未確定の項目の目印。公開前にすべて外す。
   v1 は data/_price_css_mock_v1_20261027.css に控えあり。
   ============================================================ */

[data-page="price"] {
  --pr-teal: #29baa2;
  --pr-teal-dk: #1d8d7a;
  --pr-teal-bg: #f1faf8;
  --pr-ink: #1a1a1a;
  --pr-soft: #555;
  --pr-mute: #8a8a8a;
  --pr-line: #ebebeb;
  --pr-soft-bg: #f7f8f7;
  --pr-q-ink: #1b1b1a;
  --pr-q-gold: #c9b24a;
  --pr-q-gold-dk: #a89010;
  --pr-num: "Montserrat", Helvetica, Arial, sans-serif;
}

[data-page="price"] .l-main {
  color: var(--pr-ink);
}

/* 着地位置: SP は固定ヘッダー 56px、PC は top26px＋高さ76px */
[data-page="price"] [id^="price-"] {
  scroll-margin-top: 72px;
}
@media screen and (min-width: 768px) {
  [data-page="price"] [id^="price-"] {
    scroll-margin-top: 120px;
  }
}

/* ------------------------------------------------------------
   0. 共通
   ------------------------------------------------------------ */
.p-price-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}
@media screen and (min-width: 768px) {
  .p-price-inner {
    padding: 0 40px;
  }
}
.p-price-section {
  padding: 72px 0;
}
.p-price-section.-soft {
  background: var(--pr-soft-bg);
}
.p-price-section.-line {
  border-top: 1px solid var(--pr-line);
}
@media screen and (min-width: 768px) {
  .p-price-section {
    padding: 120px 0;
  }
}
.p-price-head {
  text-align: center;
  margin-bottom: 40px;
}
@media screen and (min-width: 768px) {
  .p-price-head {
    margin-bottom: 64px;
  }
}
.p-price-eyebrow {
  font-family: var(--pr-num);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--pr-teal-dk);
  margin-bottom: 12px;
}
.p-price-hdg {
  font-size: 2.4rem;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: .02em;
}
.p-price-hdg.-left {
  text-align: left;
}
.p-price-lead {
  font-size: 1.4rem;
  line-height: 1.8;
  color: var(--pr-soft);
  margin-top: 12px;
}
@media screen and (min-width: 768px) {
  .p-price-hdg {
    font-size: 3.2rem;
  }
  .p-price-lead {
    font-size: 1.5rem;
  }
}
.p-price-num {
  font-family: var(--pr-num);
  font-weight: 700;
  letter-spacing: .01em;
}
.p-price-subhdg {
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
  margin: 72px 0 24px;
}
@media screen and (min-width: 768px) {
  .p-price-subhdg {
    font-size: 2rem;
    margin: 96px 0 32px;
  }
}

/* 未確定の目印（控えめに） */
.p-price-tbd {
  display: inline-block;
  vertical-align: 2px;
  font-size: 1rem;
  line-height: 1;
  font-weight: 700;
  color: #c2410c;
  background: #fff0e5;
  border-radius: 3px;
  padding: 3px 4px;
  margin-left: 6px;
  letter-spacing: 0;
}

/* ボタン */
.p-price-btn {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
  background: var(--pr-teal);
  border: 1px solid var(--pr-teal);
  border-radius: 999px;
  padding: 15px 20px;
  transition: opacity .2s, background-color .2s;
}
.p-price-btn.-outline {
  color: var(--pr-teal-dk);
  background: #fff;
}
.p-price-btn.-gold {
  background: var(--pr-q-gold-dk);
  border-color: var(--pr-q-gold-dk);
}
@media (any-hover: hover) {
  .p-price-btn:hover {
    opacity: .85;
  }
  .p-price-btn.-outline:hover {
    opacity: 1;
    background: var(--pr-teal-bg);
  }
}

/* ------------------------------------------------------------
   1. KV
   ------------------------------------------------------------ */
.p-price-kv {
  background: linear-gradient(180deg, var(--pr-teal-bg) 0%, #fff 100%);
  /* ヘッダーは固定配置で高さを持たないため、その分を上に空ける */
  padding: 80px 0 64px;
}
.p-price-kv .c-breadcrumb {
  margin-bottom: 40px;
}
.p-price-kv__body {
  text-align: center;
}
.p-price-kv__title {
  font-size: 2.8rem;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: .02em;
  margin-bottom: 20px;
}
.p-price-kv__sub {
  font-size: 1.4rem;
  line-height: 1.9;
  color: var(--pr-soft);
  margin-bottom: 40px;
}
.p-price-kv__price {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 0;
}
.p-price-kv__price > div {
  padding: 0 20px;
}
.p-price-kv__price > div + div {
  border-left: 1px solid #d8e9e5;
}
.p-price-kv__price dt {
  font-size: 1.2rem;
  color: var(--pr-soft);
  margin-bottom: 4px;
}
.p-price-kv__price dd {
  font-size: 1.4rem;
  font-weight: 700;
}
.p-price-kv__price .p-price-num {
  font-size: 3rem;
  margin-right: 2px;
}
.p-price-kv__note {
  font-size: 1.2rem;
  line-height: 1.7;
  color: var(--pr-mute);
  margin-top: 14px;
}
.p-price-kv__points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  margin-top: 32px;
}
.p-price-kv__points li {
  position: relative;
  font-size: 1.3rem;
  line-height: 1.6;
  padding-left: 22px;
}
.p-price-kv__points li span {
  color: var(--pr-mute);
  font-size: 1.2rem;
}
.p-price-kv__points li::before,
.p-price-plan__list li::before,
.p-price-qualite__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .3em;
  width: 15px;
  height: 15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3L12.5 5' fill='none' stroke='%2329baa2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat;
}
@media screen and (min-width: 768px) {
  .p-price-kv {
    padding: 128px 0 96px;
  }
  .p-price-kv .c-breadcrumb {
    margin-bottom: 56px;
  }
  .p-price-kv__title {
    font-size: 4.4rem;
    margin-bottom: 24px;
  }
  .p-price-kv__sub {
    font-size: 1.6rem;
    margin-bottom: 48px;
  }
  .p-price-kv__price > div {
    padding: 0 48px;
  }
  .p-price-kv__price dt {
    font-size: 1.3rem;
  }
  .p-price-kv__price .p-price-num {
    font-size: 4rem;
  }
  .p-price-kv__points {
    gap: 8px 36px;
    margin-top: 40px;
  }
  .p-price-kv__points li {
    font-size: 1.4rem;
  }
}

/* ------------------------------------------------------------
   2. プランカード
   ------------------------------------------------------------ */
.p-price-plans {
  display: grid;
  gap: 24px;
}
@media screen and (min-width: 960px) {
  .p-price-plans {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
  }
}
.p-price-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--pr-line);
  border-radius: 16px;
  padding: 36px 28px 28px;
}
.p-price-plan.-recommend {
  border: 2px solid var(--pr-teal);
  box-shadow: 0 12px 32px rgba(41, 186, 162, .12);
}
/* SP は縦に3枚並ぶので、迷ったらこれ（PRO）を先頭に出す */
@media screen and (max-width: 959px) {
  .p-price-plan.-recommend {
    order: -1;
    margin-top: 8px;
  }
}
.p-price-plan__badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
  background: var(--pr-teal);
  border-radius: 999px;
  padding: 6px 18px;
}
.p-price-plan__badge .p-price-tbd {
  vertical-align: 1px;
}
.p-price-plan__name {
  font-family: var(--pr-num);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: .06em;
}
.p-price-plan__name ruby { ruby-position: over; ruby-align: center; }
.p-price-plan__name rt {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--pr-soft);
}
.p-price-plan__fit {
  font-size: 1.3rem;
  line-height: 1.7;
  color: var(--pr-soft);
  margin-top: 6px;
  min-height: 2.2em;
}
.p-price-plan__price {
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 24px;
}
.p-price-plan__price .p-price-num {
  font-size: 4rem;
  line-height: 1;
  margin-right: 2px;
}
.p-price-plan__per {
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--pr-soft);
}
.p-price-plan__was {
  margin-top: 22px;
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--pr-mute);
}
.p-price-plan__was s {
  text-decoration: line-through;
}
/* 通常価格を画像で出すとき（3倍で書き出した画像を文字と同じ大きさに） */
.p-price-plan__was img {
  display: block;
  width: 110px;
  max-width: 100%;
  height: auto;
}
.p-price-plan__was + .p-price-plan__price {
  margin-top: 2px;
}
.p-price-plan__now {
  display: block;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--pr-teal);
  margin-bottom: 6px;
}
.p-price-plan__tax {
  font-size: 1.2rem;
  color: var(--pr-mute);
  margin-top: 6px;
}
.p-price-plan__list {
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--pr-line);
  margin-top: 24px;
  padding-top: 24px;
  flex-grow: 1;
  align-content: start;
}
.p-price-plan__list li {
  position: relative;
  font-size: 1.4rem;
  line-height: 1.6;
  padding-left: 24px;
}
.p-price-plan__list li.-base {
  font-weight: 700;
}
.p-price-plan__support {
  font-size: 1.2rem;
  color: var(--pr-mute);
  margin: 24px 0 20px;
}
@media screen and (min-width: 960px) {
  .p-price-plan {
    padding: 40px 32px 32px;
  }
}

/* ------------------------------------------------------------
   3. QUALITE（白黒＋金。/solutions/qualite/ のトーン）
   ------------------------------------------------------------ */
.p-price-qualite {
  margin-top: 32px;
  background: var(--pr-q-ink);
  color: #f5f5f2;
  border-radius: 16px;
  padding: 36px 28px;
  display: grid;
  gap: 28px;
}
@media screen and (min-width: 768px) {
  .p-price-qualite {
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    padding: 48px 56px;
    align-items: center;
  }
}
.p-price-qualite__fit {
  font-size: 1.2rem;
  letter-spacing: .08em;
  color: var(--pr-q-gold);
}
.p-price-qualite__name {
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 2.8rem;
  letter-spacing: .1em;
  font-weight: 600;
  margin-top: 10px;
}
.p-price-qualite__name rt {
  font-size: 1rem;
  letter-spacing: .12em;
  color: #a9a9a2;
}
.p-price-qualite__catch {
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 1.5rem;
  line-height: 1.9;
  color: #dcdcd6;
  margin-top: 12px;
}
.p-price-qualite .p-price-plan__price {
  margin-top: 20px;
}
.p-price-qualite .p-price-plan__per,
.p-price-qualite .p-price-plan__tax {
  color: #a9a9a2;
}
.p-price-qualite .p-price-plan__was {
  margin-top: 20px;
  color: #a9a9a2;
}
.p-price-qualite .p-price-plan__now {
  color: var(--pr-q-gold);
}
.p-price-qualite__list {
  display: grid;
  gap: 12px;
  margin-bottom: 28px;
}
.p-price-qualite__list li {
  position: relative;
  font-size: 1.4rem;
  line-height: 1.6;
  padding-left: 24px;
}
.p-price-qualite__list li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3L12.5 5' fill='none' stroke='%23c9b24a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.p-price-qualite__more {
  display: inline-block;
  margin-top: 16px;
  font-size: 1.3rem;
  color: var(--pr-q-gold);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ------------------------------------------------------------
   4. CUSTOMIZE（枠なしの1行）
   ------------------------------------------------------------ */
/* 4. CUSTOMIZE（横長の控えめな枠。プランカードと同じ線・角丸） */
.p-price-customize {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: #fff;
  border: 1px solid var(--pr-line);
  border-radius: 16px;
  padding: 28px;
}
.p-price-customize__price {
  font-size: 1.8rem;
  font-weight: 700;
  margin-top: 8px;
}
.p-price-customize__txt {
  font-size: 1.3rem;
  line-height: 1.8;
  color: var(--pr-soft);
  margin-top: 6px;
}
@media screen and (min-width: 768px) {
  .p-price-customize {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 32px 56px;
  }
  .p-price-customize__main {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    column-gap: 24px;
  }
  .p-price-customize__price {
    margin-top: 0;
  }
  .p-price-customize__txt {
    grid-column: 1 / -1;
  }
  .p-price-customize .p-price-btn {
    width: 260px;
    flex-shrink: 0;
  }
}

/* ------------------------------------------------------------
   5. 台数で月額が変わらない
   ------------------------------------------------------------ */
.p-price-flat {
  display: grid;
  gap: 40px;
  align-items: center;
}
@media screen and (min-width: 768px) {
  .p-price-flat {
    grid-template-columns: 1fr 1.15fr;
    gap: 72px;
  }
}
.p-price-flat__txt {
  font-size: 1.5rem;
  line-height: 1.9;
  color: var(--pr-soft);
  margin-top: 20px;
}
.p-price-flat__note {
  font-size: 1.2rem;
  line-height: 1.7;
  color: var(--pr-mute);
  margin-top: 16px;
}
.p-price-flat__fig svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ------------------------------------------------------------
   6. 比較表
   ------------------------------------------------------------ */
.p-price-compare__tabs {
  position: sticky;
  top: 56px;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  background: #fff;
  padding: 10px 0;
  margin-bottom: 4px;
}
.p-price-compare__tab {
  font-family: var(--pr-num);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.2;
  border: 1px solid var(--pr-line);
  border-radius: 999px;
  background: #fff;
  color: var(--pr-soft);
  padding: 9px 0;
  cursor: pointer;
}
.p-price-compare__tab[aria-selected="true"] {
  background: var(--pr-ink);
  border-color: var(--pr-ink);
  color: #fff;
}
@media screen and (min-width: 768px) {
  .p-price-compare__tabs {
    display: none;
  }
}
.p-price-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 1.4rem;
  line-height: 1.5;
}
.p-price-table th,
.p-price-table td {
  border-bottom: 1px solid var(--pr-line);
  padding: 14px 8px;
  vertical-align: middle;
}
.p-price-table thead th {
  background: #fff;
  text-align: center;
  font-family: var(--pr-num);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .04em;
  border-bottom: 2px solid var(--pr-ink);
  padding: 14px 8px;
}
.p-price-table thead th small {
  display: block;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--pr-mute);
  letter-spacing: 0;
  margin-top: 2px;
}
/* おすすめ列（PRO）は見出しから最終行まで薄い緑の帯でつなぐ */
.p-price-table thead th.-recommend {
  color: var(--pr-teal-dk);
  background-color: var(--pr-teal-bg);
  border-radius: 8px 8px 0 0;
}
.p-price-table tbody [data-col="standard"] {
  background-color: var(--pr-teal-bg);
}
.p-price-table tbody th {
  text-align: left;
  font-weight: 500;
  padding-left: 0;
}
.p-price-table tbody th small {
  display: block;
  font-size: 1.2rem;
  color: var(--pr-mute);
  margin-top: 2px;
}
.p-price-table td {
  text-align: center;
  width: 15%;
}
/* 1行おきに薄い下地を敷いて、横に目が流れるようにする */
.p-price-table tbody tr:not(.p-price-table__cat):nth-of-type(even) > th,
.p-price-table tbody tr:not(.p-price-table__cat):nth-of-type(even) > td:not([data-col="standard"]) {
  background-color: var(--pr-soft-bg);
}
/* ◯ はチェックアイコンに置き換える（読み上げは「◯」のまま） */
.p-price-table td.-yes {
  font-size: 0;
  color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%2329baa2'/%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
}
.p-price-table td.-no {
  color: #b5b5b5;
  font-size: 1.6rem;
}
.p-price-table td.-text {
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--pr-soft);
}
.p-price-table td.-text small {
  display: block;
  font-size: 1.1rem;
  color: var(--pr-mute);
  margin-top: 2px;
}
/* カテゴリ行は左に短い縦線を付けた帯にして、区切りとして読めるようにする */
.p-price-table .p-price-table__cat th {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--pr-ink);
  background: #fff;
  border-bottom: 1px solid var(--pr-ink);
  padding: 28px 0 8px;
}
.p-price-table .p-price-table__cat th::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 14px;
  background: var(--pr-teal);
  border-radius: 2px;
  margin-right: 8px;
  vertical-align: -2px;
}
@media screen and (min-width: 768px) {
  /* 固定ヘッダー（top26px＋高さ76px）の下に貼りつける */
  .p-price-table thead th {
    position: sticky;
    top: 102px;
    z-index: 2;
  }
  .p-price-table th,
  .p-price-table td {
    padding: 14px 12px;
  }
  .p-price-table tbody th {
    padding-left: 12px;
  }
  .p-price-table thead th:first-child {
    width: 34%;
  }
  .p-price-table tbody tr:not(.p-price-table__cat):hover > th,
  .p-price-table tbody tr:not(.p-price-table__cat):hover > td {
    background-color: #eef2f1;
  }
  .p-price-table tbody tr:not(.p-price-table__cat):hover > td[data-col="standard"] {
    background-color: #e3f4f0;
  }
}
/* SP: 選んだプランの列だけ残す */
@media screen and (max-width: 767px) {
  .p-price-table [data-col] {
    display: none;
  }
  .p-price-compare[data-active="basic"] .p-price-table [data-col="basic"],
  .p-price-compare[data-active="standard"] .p-price-table [data-col="standard"],
  .p-price-compare[data-active="premium"] .p-price-table [data-col="premium"],
  .p-price-compare[data-active="qualite"] .p-price-table [data-col="qualite"] {
    display: table-cell;
  }
  .p-price-table td {
    width: 36%;
  }
  .p-price-table thead th:first-child {
    border-bottom-color: var(--pr-ink);
  }
  /* SPは1列しか見せないので、列の帯は消して縞だけにする */
  .p-price-table tbody [data-col="standard"] {
    background-color: transparent;
  }
  .p-price-table tbody tr:not(.p-price-table__cat):nth-of-type(even) > td[data-col="standard"] {
    background-color: var(--pr-soft-bg);
  }
  .p-price-table thead th.-recommend {
    background-color: transparent;
  }
}
.p-price-footnotes {
  display: grid;
  gap: 24px;
  margin-top: 48px;
}
@media screen and (min-width: 768px) {
  .p-price-footnotes {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }
}
.p-price-footnotes__title {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.p-price-footnotes p {
  font-size: 1.2rem;
  line-height: 1.9;
  color: var(--pr-soft);
}

/* ------------------------------------------------------------
   7. 初期費用・導入例・オプション
   ------------------------------------------------------------ */
.p-price-initial__amount {
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 20px;
}
.p-price-initial__amount .p-price-num {
  font-size: 4rem;
  margin-right: 2px;
}
.p-price-initial__amount small {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--pr-mute);
  margin-left: 4px;
}
.p-price-initial__items {
  display: grid;
  gap: 24px;
  max-width: 880px;
  margin: 0 auto;
}
.p-price-initial__items li {
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: 8px;
  row-gap: 2px;
}
.p-price-initial__no {
  grid-row: span 2;
  font-family: var(--pr-num);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--pr-teal);
}
.p-price-initial__items b {
  font-size: 1.6rem;
  line-height: 1.5;
}
.p-price-initial__items li > span:last-child {
  font-size: 1.3rem;
  line-height: 1.7;
  color: var(--pr-soft);
}
@media screen and (min-width: 768px) {
  .p-price-initial__items {
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
  }
  .p-price-initial__items li {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 0 24px;
  }
  .p-price-initial__items li + li {
    border-left: 1px solid var(--pr-line);
  }
}
.p-price-examples {
  display: grid;
  gap: 16px;
}
@media screen and (min-width: 768px) {
  .p-price-examples {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}
.p-price-example {
  border: 1px solid var(--pr-line);
  border-radius: 16px;
  padding: 28px;
}
.p-price-example__type {
  font-size: 1.6rem;
  font-weight: 700;
}
.p-price-example__plan {
  font-size: 1.2rem;
  color: var(--pr-mute);
  margin-top: 4px;
}
.p-price-example__total {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 18px 0 16px;
}
.p-price-example__total .p-price-num {
  font-size: 2.8rem;
  margin-right: 2px;
}
.p-price-example dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
  font-size: 1.3rem;
  line-height: 1.5;
  border-top: 1px solid var(--pr-line);
  padding-top: 16px;
}
.p-price-example dt {
  color: var(--pr-soft);
}
.p-price-example dd {
  font-family: var(--pr-num);
  text-align: right;
}
.p-price-examples__note {
  font-size: 1.2rem;
  line-height: 1.7;
  color: var(--pr-mute);
  text-align: center;
  margin-top: 16px;
}
.p-price-options {
  max-width: 880px;
  margin: 0 auto;
  border-top: 1px solid var(--pr-line);
}
.p-price-options li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-bottom: 1px solid var(--pr-line);
  padding: 20px 0;
}
.p-price-options__name {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.6;
}
.p-price-options__name small {
  display: block;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--pr-mute);
  margin-top: 2px;
}
.p-price-options__price {
  font-family: var(--pr-num);
  font-size: 1.4rem;
  font-weight: 600;
  white-space: nowrap;
}
@media screen and (min-width: 768px) {
  .p-price-options li {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
  }
}

/* ------------------------------------------------------------
   8. よくある質問・注記
   ------------------------------------------------------------ */
.p-price-faq {
  max-width: 820px;
  margin: 0 auto;
  border-top: 1px solid #e1e3e1;
}
.p-price-faq__item {
  border-bottom: 1px solid #e1e3e1;
}
.p-price-faq__q {
  list-style: none;
  cursor: pointer;
  position: relative;
  font-size: 1.5rem;
  line-height: 1.7;
  font-weight: 700;
  padding: 22px 40px 22px 0;
}
.p-price-faq__q::-webkit-details-marker {
  display: none;
}
.p-price-faq__q::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 12px;
  height: 12px;
  background:
    linear-gradient(var(--pr-teal-dk), var(--pr-teal-dk)) center/12px 1.5px no-repeat,
    linear-gradient(var(--pr-teal-dk), var(--pr-teal-dk)) center/1.5px 12px no-repeat;
  transform: translateY(-50%);
  transition: transform .2s;
}
.p-price-faq__item[open] .p-price-faq__q::after {
  transform: translateY(-50%) rotate(45deg);
}
.p-price-faq__a {
  font-size: 1.4rem;
  line-height: 1.9;
  color: var(--pr-soft);
  padding: 0 40px 24px 0;
}
@media screen and (min-width: 768px) {
  .p-price-faq__q {
    font-size: 1.6rem;
    padding: 26px 48px 26px 0;
  }
  .p-price-faq__a {
    font-size: 1.5rem;
  }
}
.p-price-notes {
  max-width: 820px;
  margin: 56px auto 0;
  display: grid;
  gap: 4px;
}
.p-price-notes li {
  font-size: 1.2rem;
  line-height: 1.8;
  color: var(--pr-mute);
  padding-left: 1em;
  text-indent: -1em;
}
.p-price-notes li::before {
  content: "※";
}
.p-price-notes a {
  color: var(--pr-teal-dk);
  text-decoration: underline;
}

/* ------------------------------------------------------------
   9. 最後のCTA
   ------------------------------------------------------------ */
.p-price-cta {
  padding: 80px 0;
  text-align: center;
}
.p-price-cta__title {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.6;
}
.p-price-cta__txt {
  font-size: 1.4rem;
  line-height: 1.8;
  color: var(--pr-soft);
  margin-top: 12px;
}
.p-price-cta__btns {
  display: grid;
  gap: 12px;
  max-width: 560px;
  margin: 32px auto 0;
}
@media screen and (min-width: 768px) {
  .p-price-cta {
    padding: 120px 0;
  }
  .p-price-cta__title {
    font-size: 2.8rem;
  }
  .p-price-cta__txt {
    font-size: 1.5rem;
  }
  .p-price-cta__btns {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}

/* KV の直後は余白を詰める（KV 下端と合わせて空きすぎないように） */
.p-price-section.-first {
  padding-top: 24px;
}
@media screen and (min-width: 768px) {
  .p-price-section.-first {
    padding-top: 40px;
  }
}

/* SP の KV: 見出し・金額が折り返さない大きさに抑え、チェック項目は左揃えで中央に置く */
@media screen and (max-width: 767px) {
  .p-price-kv__title {
    font-size: 2.5rem;
  }
  .p-price-kv__price > div {
    padding: 0 16px;
  }
  .p-price-kv__price dd {
    white-space: nowrap;
  }
  .p-price-kv__price .p-price-num {
    font-size: 2.6rem;
  }
  .p-price-kv__points {
    display: grid;
    justify-content: center;
    gap: 10px;
    text-align: left;
  }
  .p-price-kv__points li span {
    display: block;
  }
}

/* サポート欄の補足（営業時間外も可）は途中で折り返さない */
.p-price-plan__support span,
.p-price-qualite__list span {
  white-space: nowrap;
}

/* 補足つきのセル用チェックアイコン（td.-yes と同じ絵柄） */
.p-price-check {
  display: block;
  width: 18px;
  height: 18px;
  margin: 0 auto 4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3L12.5 5' fill='none' stroke='%2329baa2' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat;
}