@charset "UTF-8";
/* ==========================================================================
   ameale design ｜ 料金のご案内（price.html）専用スタイル
   --------------------------------------------------------------------------
   ・すべてのセレクタを .page-price 配下に限定しています。
     このファイルを読み込んでも、既存ページの見た目は変わりません。
   ・色・余白・文字サイズは下の .page-price ブロックで一元管理しています。
   ・style.css のあとに読み込んでください。
   ========================================================================== */

.page-price {
  /* ---- color（この画面のためのトーン。参考デザインに合わせた値） ---- */
  --pr-bg:          #faf8f5;   /* 背景（生成り） */
  --pr-bg-warm:     #f6f2ec;   /* 一段濃い背景 */
  --pr-white:       #ffffff;
  --pr-text:        #352d29;   /* 本文 */
  --pr-text-sub:    #6e6058;   /* 補足文 */
  --pr-price:       #542e2b;   /* 価格 */
  --pr-rule:        #eae1da;   /* 罫線 */
  --pr-rule-soft:   #f0e9e2;
  --pr-sage:        #e2e7dd;   /* セージグリーン */
  --pr-pink:        #f3e3df;   /* くすみピンク */
  --pr-greige:      #ece6df;   /* グレージュ */

  /* ---- 文字サイズ ---- */
  --pr-fs-body:     1rem;      /* 16px */
  --pr-fs-sm:       0.875rem;  /* 14px */
  --pr-fs-xs:       0.8125rem; /* 13px */
  --pr-fs-price:    1.0625rem;
  --pr-fs-cat:      1.25rem;
  --pr-fs-h2:       clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  --pr-fs-h1:       clamp(2.1rem, 1.35rem + 3vw, 3.4rem);

  /* ---- 余白・形 ---- */
  --pr-max:         1240px;
  --pr-pad-x:       clamp(20px, 5vw, 44px);
  --pr-sec:         clamp(52px, 6vw, 88px);
  --pr-gap:         clamp(14px, 1.6vw, 22px);
  --pr-radius:      8px;
  --pr-radius-lg:   28px;
  --pr-ease:        cubic-bezier(.22,.61,.36,1);

  background: var(--pr-bg);
  color: var(--pr-text);
}

.page-price main[id] { scroll-margin-top: calc(var(--header-h, 86px) + 12px); }

.page-price .pr-wrap {
  width: min(100% - var(--pr-pad-x) * 2, var(--pr-max));
  margin-inline: auto;
}

/* 未設定リンクを、プレビュー上ではっきり分かる状態にする
   （main.js が data-link-pending="true" を付与します。この画面だけの表示です） */
.page-price a[data-link-pending="true"]:not(.btn) {
  text-decoration: underline dotted #b07f62;
  text-underline-offset: 3px;
  cursor: not-allowed;
}
.page-price .btn[data-link-pending="true"] {
  opacity: .78;
  filter: grayscale(.35);
  cursor: not-allowed;
}
.page-price .pr-contact [data-link-pending="true"] { position: relative; }
.page-price .pr-contact [data-link-pending="true"]::after {
  content: "リンク未設定";
  position: absolute;
  left: 50%;
  bottom: -1.5em;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: .04em;
  color: #a4442f;
  white-space: nowrap;
}

/* 写真の共通トーン：紙の印刷物のようにわずかに落ち着かせる */
.page-price img { border-radius: inherit; }

/* スナップ写真（少し傾けて重ねる小さな写真） */
.page-price .pr-snap {
  position: absolute;
  margin: 0;
  width: clamp(104px, 12vw, 158px);
  padding: 8px 8px 22px;
  background: var(--pr-white);
  border: 1px solid var(--pr-rule);
  border-radius: 4px;
  box-shadow: 0 6px 20px rgba(88, 66, 50, .10);
  overflow: hidden;
}
.page-price .pr-snap img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 2px;
  display: block;
}

/* 草花の装飾 */
.page-price .pr-leaf {
  position: absolute;
  pointer-events: none;
  color: #cfd8c6;
  opacity: .8;
  z-index: 0;
}
.page-price .pr-leaf--hero { left: -28px; top: 18%; width: clamp(70px, 8vw, 128px); }
.page-price .pr-leaf--foot { right: 0; bottom: -10px; width: clamp(80px, 9vw, 150px); }

/* ==========================================================================
   1. ヒーロー
   ========================================================================== */
.page-price .pr-hero {
  position: relative;
  padding-block: calc(var(--header-h, 86px) + clamp(18px, 2.4vw, 40px)) clamp(34px, 4vw, 60px);
  overflow: hidden;
}
.page-price .pr-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: clamp(22px, 3vw, 46px);
  align-items: center;
}
.page-price .pr-hero__copy { position: relative; z-index: 2; min-width: 0; }

.page-price .pr-hero__brand { margin: 0 0 clamp(18px, 2.4vw, 32px); line-height: 1.6; }
.page-price .pr-hero__brand b {
  display: block;
  font-family: var(--font-en, serif);
  font-weight: 400;
  font-size: clamp(1.05rem, .9rem + .5vw, 1.35rem);
  letter-spacing: .18em;
  color: var(--pr-text);
}
.page-price .pr-hero__brand span {
  display: block;
  margin-top: 4px;
  font-size: var(--pr-fs-xs);
  letter-spacing: .22em;
  color: var(--pr-text-sub);
}

.page-price .pr-hero__ttl {
  margin: 0;
  word-break: auto-phrase;
  font-family: var(--font-serif, serif);
  font-weight: 500;
  font-size: var(--pr-fs-h1);
  line-height: 1.35;
  letter-spacing: .1em;
  color: var(--pr-text);
}
.page-price .pr-hero__en {
  margin: .2em 0 0;
  font-family: var(--font-en, serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.9rem);
  letter-spacing: .1em;
  color: #8a7566;
}
.page-price .pr-hero__lead {
  margin: clamp(16px, 2vw, 26px) 0 0;
  font-size: var(--pr-fs-body);
  line-height: 1.95;
  letter-spacing: .06em;
  color: var(--pr-text-sub);
}

/* 写真コラージュ */
.page-price .pr-hero__collage { position: relative; min-width: 0; }
.page-price .pr-hero__photo { position: relative; margin: 0; }
.page-price .pr-hero__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  border-radius: var(--pr-radius-lg) var(--pr-radius) var(--pr-radius) var(--pr-radius-lg);
}
/* 写真の左端を背景になじませ、文字側の可読性を守る */
.page-price .pr-hero__photo::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 42%;
  border-radius: var(--pr-radius-lg) 0 0 var(--pr-radius-lg);
  background: linear-gradient(to right, var(--pr-bg) 0%, rgba(250,248,245,.72) 42%, rgba(250,248,245,0) 100%);
  pointer-events: none;
  z-index: 1;
}
/* スナップ写真は写真の左寄りに。右上の縦書きコピーと重ならない位置にしています */
.page-price .pr-snap--a { left: -7%; bottom: -11%; transform: rotate(-4deg); z-index: 3; }
.page-price .pr-snap--b { left: 15%; bottom: -17%; transform: rotate(3.5deg); z-index: 3; }

/* 縦書きのコピー（PCのみ） */
.page-price .pr-hero__vertical {
  position: absolute;
  top: clamp(14px, 2vw, 26px);
  right: clamp(14px, 2vw, 26px);
  z-index: 2;
  display: flex;
  gap: 10px;
  writing-mode: vertical-rl;
  font-family: var(--font-serif, serif);
  font-size: clamp(.8rem, .7rem + .3vw, .95rem);
  line-height: 1.8;
  letter-spacing: .16em;
  color: var(--pr-text);
}
.page-price .pr-hero__vertical span {
  background: rgba(255,255,255,.84);
  padding: 12px 7px;
  border-radius: 3px;
}

/* ==========================================================================
   2. できること（写真帯）
   ========================================================================== */
.page-price .pr-strip { padding-block: clamp(34px, 4vw, 62px) clamp(10px, 1.5vw, 24px); }

.page-price .pr-strip__ttl {
  margin: 0 0 clamp(20px, 2.4vw, 30px);
  font-family: var(--font-serif, serif);
  font-weight: 500;
  font-size: var(--pr-fs-h2);
  letter-spacing: .08em;
  line-height: 1.6;
  word-break: auto-phrase;
}
.page-price .pr-strip__ttl span {
  display: block;
  margin-bottom: .5em;
  font-family: var(--font-en, serif);
  font-size: .68rem;
  font-style: italic;
  letter-spacing: .22em;
  color: #77675a;
}

.page-price .pr-strip__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--pr-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}
.page-price .pr-strip__list > li { min-width: 0; }
.page-price .pr-strip__list figure {
  margin: 0 0 12px;
  border-radius: var(--pr-radius);
  overflow: hidden;
  border: 1px solid var(--pr-rule);
}
.page-price .pr-strip__list img {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
}
.page-price .pr-strip__cap {
  margin: 0;
  font-size: var(--pr-fs-xs);
  line-height: 1.8;
  letter-spacing: .04em;
  color: var(--pr-text-sub);
}
.page-price .pr-strip__cap b {
  display: block;
  margin-bottom: 2px;
  font-family: var(--font-serif, serif);
  font-weight: 500;
  font-size: var(--pr-fs-body);
  letter-spacing: .08em;
  color: var(--pr-text);
}

/* ==========================================================================
   3. 料金カード
   ========================================================================== */
.page-price .pr-list { padding-block: clamp(30px, 3.5vw, 52px) var(--pr-sec); }

.page-price .pr-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pr-gap);
}

.page-price .pr-card {
  --pr-cat-bg: var(--pr-greige);
  display: grid;
  grid-template-columns: 33% minmax(0, 1fr);
  background: var(--pr-white);
  border: 1px solid var(--pr-rule);
  border-radius: var(--pr-radius);
  overflow: hidden;
  min-width: 0;
}
.page-price .pr-card--sage   { --pr-cat-bg: var(--pr-sage); }
.page-price .pr-card--pink   { --pr-cat-bg: var(--pr-pink); }
.page-price .pr-card--greige { --pr-cat-bg: var(--pr-greige); }

/* 左：カテゴリ（上に写真、下に淡色のカテゴリ欄） */
.page-price .pr-card__cat {
  background: var(--pr-cat-bg);
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
}
.page-price .pr-card__photo {
  margin: 0;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.55);
}
.page-price .pr-card__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.page-price .pr-card__catbody {
  padding: clamp(14px, 1.5vw, 20px) clamp(12px, 1.2vw, 18px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  min-width: 0;
}
.page-price .pr-card__num {
  font-family: var(--font-en, serif);
  font-size: var(--pr-fs-sm);
  letter-spacing: .12em;
  color: var(--pr-text-sub);
  align-self: flex-start;
}
.page-price .pr-card__icon { display: block; color: var(--pr-text); }
.page-price .pr-card__icon svg { width: 28px; height: 28px; display: block; }
.page-price .pr-card__name {
  margin: 2px 0 0;
  font-family: var(--font-serif, serif);
  font-weight: 500;
  font-size: var(--pr-fs-cat);
  letter-spacing: .08em;
  line-height: 1.4;
  color: var(--pr-text);
}
.page-price .pr-card__desc {
  margin: 0;
  font-size: var(--pr-fs-xs);
  line-height: 1.75;
  letter-spacing: .03em;
  color: var(--pr-text-sub);
}

/* 右：料金 */
.page-price .pr-card__body { display: grid; min-width: 0; }
.page-price .pr-rows {
  margin: 0;
  display: grid;
  grid-auto-rows: minmax(min-content, 1fr);
  min-width: 0;
}
.page-price .pr-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: clamp(11px, 1.1vw, 15px) clamp(13px, 1.3vw, 19px);
  border-bottom: 1px solid var(--pr-rule-soft);
}
.page-price .pr-row:last-child { border-bottom: 0; }

.page-price .pr-row__name {
  margin: 0;
  font-size: var(--pr-fs-sm);
  line-height: 1.7;
  letter-spacing: .03em;
  color: var(--pr-text);
  min-width: 0;
}
.page-price .pr-row__sub {
  display: block;
  margin-top: 3px;
  font-size: var(--pr-fs-xs);
  line-height: 1.65;
  color: var(--pr-text-sub);
}
.page-price .pr-row__price {
  margin: 0;
  padding-left: clamp(10px, 1.2vw, 18px);
  border-left: 1px solid var(--pr-rule-soft);
  min-width: clamp(112px, 11vw, 148px);
  text-align: right;
  font-family: var(--font-serif, serif);
  font-size: var(--pr-fs-price);
  font-variant-numeric: tabular-nums;
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--pr-price);
  white-space: nowrap;
}
.page-price .pr-row__price--wrap { white-space: normal; }
.page-price .pr-row__price small {
  display: block;
  font-family: var(--font-sans, sans-serif);
  font-size: var(--pr-fs-xs);
  letter-spacing: .02em;
  color: var(--pr-text-sub);
  white-space: nowrap;
}
.page-price .pr-row__price em {
  font-style: normal;
  font-family: var(--font-sans, sans-serif);
  font-size: var(--pr-fs-sm);
}

/* ==========================================================================
   4. 料金一覧の注記
   ========================================================================== */
.page-price .pr-notes {
  margin: clamp(22px, 2.6vw, 34px) 0 0;
  padding: clamp(18px, 2vw, 26px) clamp(18px, 2.2vw, 30px);
  list-style: none;
  background: var(--pr-white);
  border: 1px solid var(--pr-rule);
  border-radius: var(--pr-radius);
  display: grid;
  gap: 8px;
}
.page-price .pr-notes li {
  position: relative;
  padding-left: 1.3em;
  font-size: var(--pr-fs-sm);
  line-height: 1.85;
  letter-spacing: .03em;
  color: var(--pr-text-sub);
}
.page-price .pr-notes li::before { content: "・"; position: absolute; left: 0; color: #77675a; }

/* ==========================================================================
   5. サポート内容について
   ========================================================================== */
.page-price .pr-support { padding-block: var(--pr-sec); background: var(--pr-bg-warm); }
.page-price .pr-support__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 3.6vw, 60px);
  align-items: start;
}
.page-price .pr-support__photo { position: relative; }
.page-price .pr-support__photo > img {
  display: block;
  width: 100%;
  aspect-ratio: 19 / 22;
  object-fit: cover;
  border-radius: var(--pr-radius-lg) var(--pr-radius) var(--pr-radius-lg) var(--pr-radius);
  border: 1px solid var(--pr-rule);
}
.page-price .pr-snap--c { right: -8%; bottom: -7%; transform: rotate(4deg); }
.page-price .pr-support__body { min-width: 0; }

.page-price .pr-sec-ttl {
  margin: 0 0 clamp(20px, 2.4vw, 32px);
  font-family: var(--font-serif, serif);
  font-weight: 500;
  font-size: var(--pr-fs-h2);
  letter-spacing: .08em;
  line-height: 1.6;
  color: var(--pr-text);
  word-break: auto-phrase;
}
.page-price .pr-sec-ttl span {
  display: block;
  margin-bottom: .5em;
  font-family: var(--font-en, serif);
  font-size: .68rem;
  font-style: italic;
  letter-spacing: .22em;
  color: #77675a;
}

.page-price .pr-disc {
  background: var(--pr-white);
  border: 1px solid var(--pr-rule);
  border-radius: var(--pr-radius);
  margin-bottom: var(--pr-gap);
}
.page-price .pr-disc > summary {
  list-style: none;
  cursor: pointer;
  padding: clamp(15px, 1.6vw, 20px) clamp(17px, 1.8vw, 24px);
  font-family: var(--font-serif, serif);
  font-size: 1.0625rem;
  letter-spacing: .06em;
  color: var(--pr-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.page-price .pr-disc > summary::-webkit-details-marker { display: none; }
.page-price .pr-disc > summary::after {
  content: "";
  flex: none;
  width: 11px; height: 11px;
  border-right: 1px solid #77675a;
  border-bottom: 1px solid #77675a;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .25s var(--pr-ease);
}
.page-price .pr-disc[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.page-price .pr-disc > summary:focus-visible { outline: 2px solid #3f6ba8; outline-offset: -3px; border-radius: var(--pr-radius); }
.page-price .pr-disc__body {
  padding: clamp(16px, 1.8vw, 22px) clamp(17px, 1.8vw, 24px) clamp(18px, 2vw, 26px);
  border-top: 1px solid var(--pr-rule-soft);
}

.page-price .pr-plans { display: grid; gap: 14px; margin: 0; }
.page-price .pr-plan {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: clamp(12px, 1.5vw, 22px);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--pr-rule-soft);
}
.page-price .pr-plan:last-child { border-bottom: 0; padding-bottom: 0; }
.page-price .pr-plan dt {
  font-family: var(--font-serif, serif);
  font-size: var(--pr-fs-price);
  font-variant-numeric: tabular-nums;
  color: var(--pr-price);
  letter-spacing: .02em;
}
.page-price .pr-plan dd {
  margin: 0;
  font-size: var(--pr-fs-sm);
  line-height: 1.9;
  letter-spacing: .03em;
  color: var(--pr-text-sub);
}
.page-price .pr-plan dd b { font-weight: 500; color: var(--pr-text); }
.page-price .pr-plans__note {
  margin: 1.2em 0 0;
  font-size: var(--pr-fs-sm);
  letter-spacing: .04em;
  color: var(--pr-text-sub);
}

.page-price .pr-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pr-gap); }
.page-price .pr-compare > div {
  background: var(--pr-bg);
  border: 1px solid var(--pr-rule-soft);
  border-radius: var(--pr-radius);
  padding: clamp(16px, 1.8vw, 22px);
  min-width: 0;
}
.page-price .pr-compare h3 {
  margin: 0 0 .5em;
  font-family: var(--font-serif, serif);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: .05em;
}
.page-price .pr-compare p { margin: 0; font-size: var(--pr-fs-sm); line-height: 1.9; color: var(--pr-text-sub); }

.page-price .pr-bonus {
  background: var(--pr-white);
  border: 1px solid var(--pr-rule);
  border-radius: var(--pr-radius);
  padding: clamp(17px, 1.9vw, 24px);
}
.page-price .pr-bonus h3 {
  margin: 0 0 .6em;
  font-family: var(--font-serif, serif);
  font-weight: 500;
  font-size: 1.0625rem;
  letter-spacing: .06em;
}
.page-price .pr-bonus p { margin: 0; font-size: var(--pr-fs-sm); line-height: 1.9; color: var(--pr-text-sub); }

/* ==========================================================================
   6. 理念エリア
   ========================================================================== */
.page-price .pr-values { padding-block: var(--pr-sec); position: relative; }
.page-price .pr-values__band {
  margin: 0 0 calc(var(--pr-radius-lg) * -1.2);
  border-radius: var(--pr-radius-lg);
  overflow: hidden;
  width: 88%;
  margin-inline: auto;
}
.page-price .pr-values__band img {
  display: block;
  width: 100%;
  aspect-ratio: 40 / 11;
  object-fit: cover;
}
.page-price .pr-values__box {
  position: relative;
  background: var(--pr-white);
  border: 1px solid var(--pr-rule);
  border-radius: var(--pr-radius-lg);
  padding: clamp(28px, 3.4vw, 48px) clamp(20px, 2.6vw, 40px);
}
.page-price .pr-values__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.page-price .pr-values__list li {
  text-align: center;
  padding-inline: clamp(10px, 1.4vw, 22px);
  border-left: 1px solid var(--pr-rule-soft);
  min-width: 0;
}
.page-price .pr-values__list li:first-child { border-left: 0; }
.page-price .pr-values__icon { display: block; margin: 0 auto 12px; color: var(--pr-text); }
.page-price .pr-values__icon svg { width: 30px; height: 30px; }
.page-price .pr-values__ttl {
  margin: 0 0 .55em;
  word-break: auto-phrase;
  font-family: var(--font-serif, serif);
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: 1.65;
  letter-spacing: .06em;
}
.page-price .pr-values__txt {
  margin: 0;
  font-size: var(--pr-fs-xs);
  line-height: 1.85;
  letter-spacing: .03em;
  color: var(--pr-text-sub);
}

.page-price .pr-values__foot {
  margin-top: clamp(26px, 3vw, 42px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.page-price .pr-values__brand {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  font-family: var(--font-en, serif);
  font-size: 1.15rem;
  letter-spacing: .16em;
  color: var(--pr-text);
}
.page-price .pr-values__brand i { display: inline-block; width: 42px; height: 1px; background: var(--pr-rule); }
.page-price .pr-values__brand b {
  font-family: var(--font-serif, serif);
  font-weight: 400;
  font-size: .9rem;
  letter-spacing: .12em;
}
.page-price .pr-values__msg {
  margin: 0;
  font-family: var(--font-serif, serif);
  font-size: var(--pr-fs-sm);
  letter-spacing: .08em;
  color: var(--pr-text-sub);
}

/* ==========================================================================
   7. 相談導線
   ========================================================================== */
.page-price .pr-contact { padding-block: 0 var(--pr-sec); }
.page-price .pr-contact__box {
  background: var(--pr-bg-warm);
  border: 1px solid var(--pr-rule);
  border-radius: var(--pr-radius-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  align-items: center;
}
.page-price .pr-contact__photo { margin: 0; height: 100%; }
.page-price .pr-contact__photo img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: clamp(220px, 24vw, 320px);
  object-fit: cover;
}
.page-price .pr-contact__body {
  padding: clamp(30px, 3.6vw, 52px) clamp(20px, 3vw, 44px);
  text-align: center;
}
.page-price .pr-contact__ttl {
  margin: 0;
  word-break: auto-phrase;
  font-family: var(--font-serif, serif);
  font-weight: 500;
  font-size: var(--pr-fs-h2);
  letter-spacing: .08em;
  line-height: 1.6;
}
.page-price .pr-contact__lead {
  margin: 1.1em auto 0;
  max-width: 34em;
  font-size: var(--pr-fs-sm);
  line-height: 1.95;
  letter-spacing: .04em;
  color: var(--pr-text-sub);
}
.page-price .pr-contact__btns {
  margin-top: clamp(22px, 2.6vw, 34px);
  display: flex;
  flex-wrap: wrap;
  gap: 14px 16px;
  justify-content: center;
}

/* ==========================================================================
   8. モーション
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .page-price .pr-disc > summary::after { transition: none; }
}

/* ==========================================================================
   9. レスポンシブ
   ========================================================================== */

/* ---------- ~1080px ---------- */
@media (max-width: 1080px) {
  .page-price .pr-card { grid-template-columns: 36% minmax(0, 1fr); }
  .page-price .pr-card__name { font-size: 1.125rem; }
}

/* ---------- ~900px：料金カードを1列へ ---------- */
@media (max-width: 900px) {
  .page-price .pr-grid { grid-template-columns: minmax(0, 1fr); }

  /* カテゴリを、写真つきの横長ヘッダーへ */
  .page-price .pr-card { grid-template-columns: minmax(0, 1fr); }
  .page-price .pr-card__cat {
    grid-template-rows: none;
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: stretch;
  }
  .page-price .pr-card__photo { border-bottom: 0; border-right: 1px solid rgba(255,255,255,.55); }
  .page-price .pr-card__photo img { aspect-ratio: auto; height: 100%; min-height: 84px; }
  .page-price .pr-card__catbody {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: 4px 12px;
    padding: 12px 16px 13px;
  }
  .page-price .pr-card__num { align-self: center; }
  .page-price .pr-card__icon svg { width: 24px; height: 24px; }
  .page-price .pr-card__name { margin: 0; font-size: 1.0625rem; }
  .page-price .pr-card__desc { flex: 1 1 100%; margin-top: 2px; }
  .page-price .pr-card__desc br { display: none; }

  /* ヒーロー */
  .page-price .pr-hero__inner { grid-template-columns: minmax(0, 1fr); }
  .page-price .pr-hero__photo::before { display: none; }
  .page-price .pr-hero__photo img { aspect-ratio: 16 / 10; }
  .page-price .pr-hero__vertical {
    position: static;
    writing-mode: horizontal-tb;
    display: block;
    margin-top: 14px;
    font-size: var(--pr-fs-sm);
    line-height: 1.95;
    letter-spacing: .08em;
    word-break: auto-phrase;
    color: var(--pr-text-sub);
  }
  .page-price .pr-hero__vertical span { background: none; padding: 0; display: inline; }
  /* スマホ・タブレットでは、重ねずに写真を2枚並べて見せる */
  .page-price .pr-hero__collage {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 26px;
  }
  .page-price .pr-hero__photo { grid-column: 1 / -1; }
  .page-price .pr-snap {
    position: static;
    width: auto;
    transform: none;
    padding: 8px 8px 20px;
  }
  .page-price .pr-snap img { aspect-ratio: 4 / 3; }
  .page-price .pr-leaf--hero { display: none; }

  /* 写真帯 */
  .page-price .pr-strip__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* サポート */
  .page-price .pr-support__inner { grid-template-columns: minmax(0, 1fr); }
  .page-price .pr-support__photo > img { aspect-ratio: 16 / 9; }
  .page-price .pr-snap--c { right: 3%; bottom: -10%; }
  .page-price .pr-compare { grid-template-columns: minmax(0, 1fr); }
  .page-price .pr-plan { grid-template-columns: minmax(0, 1fr); gap: 4px; }

  /* 理念 */
  .page-price .pr-values__band { width: 100%; margin-bottom: calc(var(--pr-radius-lg) * -1); }
  .page-price .pr-values__band img { aspect-ratio: 24 / 9; }
  .page-price .pr-values__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 0; }
  .page-price .pr-values__list li:nth-child(odd) { border-left: 0; }

  /* 相談 */
  .page-price .pr-contact__box { grid-template-columns: minmax(0, 1fr); }
  .page-price .pr-contact__photo img { min-height: 0; aspect-ratio: 16 / 7; }
}

/* ---------- ~560px：スマートフォン ---------- */
@media (max-width: 560px) {
  .page-price .pr-row { gap: 8px; padding: 12px 14px; }
  .page-price .pr-row__price { min-width: 0; padding-left: 10px; font-size: 1rem; }
  .page-price .pr-row__name { font-size: var(--pr-fs-sm); }

  .page-price .pr-card__cat { grid-template-columns: 76px minmax(0, 1fr); }

  .page-price .pr-values__list li { padding-inline: 8px; }
  .page-price .pr-values__foot { flex-direction: column; align-items: flex-start; gap: 10px; }
  .page-price .pr-contact__btns .btn { width: 100%; }
  .page-price .pr-leaf--foot { width: 84px; opacity: .6; }
}

/* ---------- ~359px：ごく狭い画面では料金を名称の下へ ---------- */
@media (max-width: 359px) {
  .page-price .pr-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .page-price .pr-row__price { border-left: 0; padding-left: 0; text-align: left; }
}

@media print {
  .page-price .header, .page-price .drawer, .page-price .pagetop-wrap { display: none !important; }
  .page-price .pr-disc__body { display: block !important; }
}