/* ================================================================
 * good-o 下層ページ（サービス一覧・サービス詳細・料金の目安）の共通の見せ方
 *
 *  考え方: トップの棚と MAKASU の入口タイルと同じく「絵・短い言葉・開始価格」で先に伝え、
 *  判断に要る条件は同じ場所のすぐ下に畳んで置く。文字は同じ音量で並べず、強弱を付ける。
 *
 *  .sp-scope        このファイルの語彙を使う範囲（線画の .mk-art__* もこの中でだけ定義する）
 *  .sp-hero         絵＋一言＋開始価格のファーストビュー
 *  .sp-lane         「直す／つなぐ／つくる」の1レーン（一覧）
 *  .sp-row          行: 名前・ひとこと・価格・矢印
 *  .sp-voices / .sp-can / .sp-steps / .sp-scopecols   詳細ページの部品
 *  .sp-board        料金の早見表
 *  .sp-matrix       LP／Webサイト × おまかせ／オーダーメイド の比較表
 *  .sp-plan         初期費用0円・12ヶ月プラン（時間軸の図）
 *  .sp-care         保守・運用プランの2枚比較
 *  .sp-fold         畳んだ詳細（details）
 *
 * 固定名のファイル（_astro のハッシュに影響しない）。色は既存のトークンだけを使う。
 * ================================================================ */

.sp-scope {
  --sp-ease: cubic-bezier(0.22, 0.75, 0.2, 1);
  --sp-radius: calc(var(--radius, 0.5rem) * 1.5);
  --mk-tint: var(--brand-teal, #4ad7a8);
}

.sp-scope [data-sp-tint='start'], .sp-scope[data-sp-tint='start'] { --mk-tint: var(--brand-lime, #d7d93e); }
.sp-scope [data-sp-tint='find'], .sp-scope[data-sp-tint='find'] { --mk-tint: var(--brand-blue, #7f99ce); }
.sp-scope [data-sp-tint='respond'], .sp-scope[data-sp-tint='respond'] { --mk-tint: var(--brand-teal, #4ad7a8); }
.sp-scope [data-sp-tint='input'], .sp-scope[data-sp-tint='input'] { --mk-tint: var(--brand-pink, #d760ae); }
.sp-scope [data-sp-tint='check'], .sp-scope[data-sp-tint='check'] { --mk-tint: #c9a227; }
.sp-scope [data-sp-tint='watch'], .sp-scope[data-sp-tint='watch'] { --mk-tint: #a87b9f; }

/* ---------------- 線画（トップ・MAKASU と同じ語彙） ---------------- */

.sp-scope .mk-art { inline-size: min(100%, 17rem); block-size: auto; overflow: visible; color: var(--color-ink, #1b1a1f); }
.sp-scope .mk-art__line { stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sp-scope .mk-art__thick { stroke-width: 3; }
.sp-scope .mk-art__soft { stroke: color-mix(in srgb, var(--color-ink, #1b1a1f) 28%, transparent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sp-scope .mk-art__dash { stroke-dasharray: 3 5; }
.sp-scope .mk-art__paper { fill: var(--color-white, #ffffff); }
.sp-scope .mk-art__accent { fill: color-mix(in srgb, var(--mk-tint) 62%, var(--color-white, #ffffff)); }
.sp-scope .mk-art__tint-fill { fill: var(--mk-tint); }
.sp-scope .mk-art__tint-line { stroke: color-mix(in srgb, var(--mk-tint) 80%, var(--color-ink, #1b1a1f)); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sp-scope .mk-art__dot { stroke: currentColor; stroke-width: 5; stroke-linecap: round; }
.sp-scope .mk-art__pulse, .sp-scope .mk-art__pop, .sp-scope .mk-art__slide { transform-box: fill-box; transform-origin: center; transition: transform 320ms var(--sp-ease); }

.sp-art {
  display: grid;
  place-items: center;
  padding: 1.2rem 1rem 1rem;
  border-radius: var(--sp-radius);
  background:
    radial-gradient(120% 110% at 100% 0%, color-mix(in srgb, var(--mk-tint) 30%, var(--color-white, #ffffff)), transparent 72%),
    var(--color-mist, #f4f3f5);
}

/* ---------------- 小さな部品 ---------------- */

.sp-price {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  background: var(--color-ink, #1b1a1f);
  color: var(--color-white, #ffffff);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.4;
  white-space: nowrap;
}

.sp-price--ghost { background: transparent; color: var(--color-ink, #1b1a1f); box-shadow: inset 0 0 0 1px var(--color-ink, #1b1a1f); }
.sp-price small { font-size: 0.72rem; font-weight: 700; opacity: 0.8; }

.sp-scope .sp-num {
  margin: 0;
  color: var(--color-ink, #1b1a1f);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.sp-scope .sp-num small { margin-inline-start: 0.1em; font-size: 0.5em; font-weight: 700; letter-spacing: 0; }

.sp-go {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: 2rem;
  block-size: 2rem;
  border: 1px solid var(--color-line, #dedde2);
  border-radius: 999px;
  font-size: 0.95rem;
  transition: background 160ms var(--sp-ease), color 160ms var(--sp-ease), border-color 160ms var(--sp-ease), transform 160ms var(--sp-ease);
}

.sp-kicker {
  color: var(--color-ink-soft, #66636c);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.sp-h2 {
  margin: 0;
  font-size: clamp(1.45rem, 2.6vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.3;
  text-wrap: balance;
}

.sp-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.sp-stack > * { min-width: 0; }
.sp-section { padding-block: clamp(2.75rem, 6vw, 4.5rem); }
.sp-section--mist { background: var(--color-mist, #f4f3f5); }
.sp-section__head { display: grid; gap: 0.4rem; margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.sp-section__head p { margin: 0; max-width: 40rem; color: var(--color-ink-soft, #66636c); }

/* ---------------- ファーストビュー ---------------- */

.sp-hero { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(1.75rem, 4vw, 3rem); }
.sp-hero__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.sp-hero__grid--solo { grid-template-columns: minmax(0, 1fr); }
.sp-hero h1 { margin: 0.4rem 0 0; font-size: clamp(2rem, 4.6vw, 3.4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.2; text-wrap: balance; }
.sp-hero__name { margin: 0; color: var(--color-teal, #5d2e54); font-size: 0.95rem; font-weight: 800; }
.sp-hero__lead { margin: 1rem 0 0; max-width: 34rem; color: var(--color-ink-soft, #66636c); font-size: 1.02rem; line-height: 1.8; }
.sp-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-top: 1.25rem; }
.sp-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: 1.5rem; }
.sp-hero__art .mk-art { inline-size: min(100%, 24rem); }
.sp-hero__art.sp-art { padding: clamp(1.25rem, 3vw, 2.5rem); }
.sp-textlink { font-weight: 800; text-underline-offset: 0.25em; }

.sp-hero--detail h1 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); }
/* 日本語の見出しは文節で折り返す（対応ブラウザのみ。非対応でも通常の折り返しになる） */
.sp-scope :is(h1, h2, h3, h4, summary, strong, dt) { word-break: auto-phrase; }

/* レーンへのショートカット */
.sp-jump { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }
.sp-jump a { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 1rem 0.45rem 0.75rem; border: 1px solid var(--color-line, #dedde2); border-radius: 999px; background: var(--color-white, #ffffff); color: inherit; font-weight: 800; text-decoration: none; transition: border-color 160ms var(--sp-ease), transform 160ms var(--sp-ease); }
.sp-jump a::before { content: ''; inline-size: 0.7rem; block-size: 0.7rem; border-radius: 999px; background: var(--mk-tint); }
.sp-jump a:hover, .sp-jump a:focus-visible { border-color: var(--color-ink, #1b1a1f); transform: translateY(-1px); }
.sp-lane { scroll-margin-top: 6rem; }

/* ---------------- 一覧: レーン ---------------- */

.sp-lanes { display: grid; gap: clamp(1rem, 2.4vw, 1.5rem); }

.sp-lane {
  display: grid;
  grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1rem, 2.4vw, 1.5rem);
  border: 1px solid var(--color-line, #dedde2);
  border-radius: calc(var(--sp-radius) * 1.2);
  background: var(--color-white, #ffffff);
}

.sp-lane__head { display: grid; align-content: start; gap: 0.75rem; }
.sp-lane__verb { margin: 0; font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.sp-lane__sum { margin: 0; color: var(--color-ink-soft, #66636c); font-weight: 700; }
.sp-lane__rows { display: grid; align-content: center; }

.sp-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.35rem 1rem;
  padding: 1rem 0.25rem;
  border-top: 1px solid var(--color-line, #dedde2);
  color: inherit;
  text-decoration: none;
}

.sp-row:first-child { border-top: 0; }
.sp-row__name { margin: 0; font-size: clamp(1.02rem, 1.6vw, 1.2rem); font-weight: 800; line-height: 1.45; }
.sp-row__line { grid-column: 1; margin: 0; color: var(--color-ink-soft, #66636c); font-size: 0.9rem; line-height: 1.6; }
.sp-row__price { grid-row: 1 / span 2; grid-column: 2; display: grid; justify-items: end; gap: 0.3rem; }
.sp-row .sp-go { grid-row: 1 / span 2; grid-column: 3; }
.sp-row:hover .sp-go, .sp-row:focus-visible .sp-go { background: var(--color-ink, #1b1a1f); border-color: var(--color-ink, #1b1a1f); color: var(--color-white, #ffffff); transform: translateX(2px); }
.sp-row:hover .sp-row__name, .sp-row:focus-visible .sp-row__name { text-decoration: underline; text-underline-offset: 0.25em; }
.sp-row--sub .sp-row__name { font-size: 0.98rem; }
.sp-row--sub { padding-block: 0.7rem; }

.sp-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.sp-chips li { padding: 0.25rem 0.65rem; border: 1px solid var(--color-line, #dedde2); border-radius: 999px; background: var(--color-white, #ffffff); font-size: 0.8rem; font-weight: 700; line-height: 1.5; }

/* 任せる（MAKASU）: 墨の帯 */
.sp-lane--dark { border-color: transparent; background: var(--color-ink, #1b1a1f); color: var(--color-white, #ffffff); }
.sp-lane--dark .sp-lane__sum, .sp-lane--dark .sp-row__line { color: rgb(255 255 255 / 0.72); }
.sp-lane--dark .sp-art { background: radial-gradient(120% 110% at 100% 0%, color-mix(in srgb, var(--mk-tint) 38%, #2a2830), transparent 72%), #26242b; }
.sp-lane--dark .mk-art { color: var(--color-white, #ffffff); }
.sp-lane--dark .mk-art__paper { fill: #1b1a1f; }
.sp-lane--dark .mk-art__soft { stroke: rgb(255 255 255 / 0.32); }
.sp-lane--dark .sp-price { background: var(--color-white, #ffffff); color: var(--color-ink, #1b1a1f); }
.sp-lane--dark .sp-price--ghost { background: transparent; color: var(--color-white, #ffffff); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.5); }
.sp-lane--dark .sp-go { border-color: rgb(255 255 255 / 0.4); }
.sp-lane--dark .sp-row:hover .sp-go { background: var(--color-white, #ffffff); color: var(--color-ink, #1b1a1f); }

/* どれか分からないとき */
.sp-ask { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(1.25rem, 4vw, 3rem); align-items: center; }
.sp-ask__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; counter-reset: ask; }
.sp-ask__list li { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: center; padding: 0.9rem 1rem; border-radius: var(--sp-radius); background: var(--color-white, #ffffff); font-weight: 700; line-height: 1.5; counter-increment: ask; }
.sp-ask__list li::before { content: counter(ask); display: grid; place-items: center; inline-size: 1.7rem; block-size: 1.7rem; border-radius: 999px; background: var(--color-ink, #1b1a1f); color: var(--color-white, #ffffff); font-size: 0.8rem; font-weight: 800; }

/* ---------------- 詳細: 声・できること・進め方・範囲 ---------------- */

.sp-voices { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.sp-voices li {
  position: relative;
  padding: 0.85rem 1.15rem;
  border: 1px solid var(--color-ink, #1b1a1f);
  border-radius: 1.1rem 1.1rem 1.1rem 0.25rem;
  background: var(--color-white, #ffffff);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  font-weight: 800;
  line-height: 1.5;
}
.sp-voices li::before { content: '「'; }
.sp-voices li::after { content: '」'; }

.sp-can { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; counter-reset: can; }
.sp-can li { display: grid; align-content: start; gap: 0.35rem; padding: 1.1rem 1.1rem 1.2rem; border-radius: var(--sp-radius); background: var(--color-white, #ffffff); border: 1px solid var(--color-line, #dedde2); counter-increment: can; }
.sp-can li::before { content: counter(can, decimal-leading-zero); color: color-mix(in srgb, var(--mk-tint) 70%, var(--color-ink, #1b1a1f)); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; }
.sp-can strong { font-size: 1.02rem; line-height: 1.5; }
.sp-can span { color: var(--color-ink-soft, #66636c); font-size: 0.85rem; line-height: 1.6; }

.sp-steps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.sp-steps li { position: relative; display: grid; align-content: start; gap: 0.35rem; padding: 0 1rem 0 0; counter-increment: step; }
.sp-steps li::before { content: counter(step); display: grid; place-items: center; inline-size: 2.2rem; block-size: 2.2rem; margin-bottom: 0.5rem; border: 2px solid var(--color-ink, #1b1a1f); border-radius: 999px; background: var(--color-white, #ffffff); font-weight: 800; position: relative; z-index: 1; }
.sp-steps li::after { content: ''; position: absolute; inset-block-start: 1.1rem; inset-inline: 2.2rem 0; border-top: 2px dashed var(--color-line, #dedde2); }
.sp-steps li:last-child::after { display: none; }
.sp-steps strong { font-size: 1rem; line-height: 1.5; }
.sp-steps span { color: var(--color-ink-soft, #66636c); font-size: 0.85rem; line-height: 1.65; }

.sp-scopecols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.sp-scopecols > div { padding: 1.1rem 1.2rem; border-radius: var(--sp-radius); background: var(--color-white, #ffffff); border: 1px solid var(--color-line, #dedde2); }
.sp-scopecols h3 { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.6rem; font-size: 0.95rem; }
.sp-scopecols h3::before { content: '○'; display: grid; place-items: center; inline-size: 1.5rem; block-size: 1.5rem; border-radius: 999px; background: color-mix(in srgb, var(--brand-teal, #4ad7a8) 40%, var(--color-white, #ffffff)); font-size: 0.8rem; font-weight: 800; }
.sp-scopecols > div + div h3::before { content: '−'; background: var(--color-mist, #f4f3f5); }
.sp-scopecols ul { display: grid; gap: 0.4rem; margin: 0; padding: 0; list-style: none; font-size: 0.88rem; line-height: 1.65; }
.sp-scopecols > div + div ul { color: var(--color-ink-soft, #66636c); }

.sp-related { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.sp-related a { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: 0.75rem 1rem 0.75rem 0.75rem; border: 1px solid var(--color-line, #dedde2); border-radius: var(--sp-radius); background: var(--color-white, #ffffff); color: inherit; text-decoration: none; transition: border-color 160ms var(--sp-ease), transform 160ms var(--sp-ease); }
.sp-related a:hover, .sp-related a:focus-visible { border-color: var(--color-ink, #1b1a1f); transform: translateY(-2px); }
.sp-related .sp-art { padding: 0.4rem; }
.sp-related strong { display: block; line-height: 1.45; }
.sp-related span span { display: block; color: var(--color-ink-soft, #66636c); font-size: 0.82rem; line-height: 1.55; }

/* ---------------- 畳んだ詳細 ---------------- */

.sp-fold { border-top: 1px solid var(--color-line, #dedde2); }
.sp-fold:last-of-type { border-bottom: 1px solid var(--color-line, #dedde2); }
.sp-fold > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.95rem 0.25rem; font-weight: 800; line-height: 1.5; cursor: pointer; list-style: none; }
.sp-fold > summary::-webkit-details-marker { display: none; }
.sp-fold > summary::after { content: '+'; display: grid; place-items: center; flex: none; inline-size: 1.7rem; block-size: 1.7rem; border: 1px solid var(--color-line, #dedde2); border-radius: 999px; font-weight: 700; line-height: 1; }
.sp-fold[open] > summary::after { content: '−'; background: var(--color-ink, #1b1a1f); border-color: var(--color-ink, #1b1a1f); color: var(--color-white, #ffffff); }
.sp-fold > summary:focus-visible { outline: 2px solid var(--color-teal, #5d2e54); outline-offset: 2px; }
.sp-fold__title { flex: 1 1 auto; min-width: 0; }
.sp-fold__price { flex: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sp-fold__body { padding: 0 0.25rem 1.25rem; color: var(--color-ink-soft, #66636c); font-size: 0.92rem; line-height: 1.8; }
.sp-fold__body h4 { margin: 1rem 0 0.4rem; color: var(--color-ink, #1b1a1f); font-size: 0.9rem; }
.sp-fold__body h4:first-child { margin-top: 0; }
.sp-fold__body ul, .sp-fold__body ol { display: grid; gap: 0.3rem; margin: 0; padding-inline-start: 1.2rem; }
.sp-fold__body p { margin: 0.6rem 0 0; }
.sp-fold__body p:first-child { margin-top: 0; }
.sp-fold__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.sp-note { margin: 0.9rem 0 0; color: var(--color-ink-soft, #66636c); font-size: 0.85rem; line-height: 1.75; }
.sp-note strong { color: var(--color-ink, #1b1a1f); }
.sp-warn { margin: 0.9rem 0 0; padding: 0.8rem 1rem; border-inline-start: 3px solid var(--brand-pink, #d760ae); background: color-mix(in srgb, var(--brand-pink, #d760ae) 8%, var(--color-white, #ffffff)); font-size: 0.88rem; line-height: 1.75; }

/* ---------------- 料金: 早見表 ---------------- */

.sp-board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.75rem; }
.sp-board__col { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--color-line, #dedde2); border-radius: var(--sp-radius); background: var(--color-white, #ffffff); overflow: hidden; }
.sp-board__head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; padding: 0.8rem 1rem; background: radial-gradient(140% 160% at 100% 0%, color-mix(in srgb, var(--mk-tint) 34%, var(--color-white, #ffffff)), transparent 70%), var(--color-mist, #f4f3f5); color: inherit; text-decoration: none; }
.sp-board__head strong { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; }
.sp-board__head span { font-size: 0.78rem; font-weight: 700; color: var(--color-ink-soft, #66636c); }
.sp-board__head:hover strong, .sp-board__head:focus-visible strong { text-decoration: underline; text-underline-offset: 0.2em; }
.sp-board dl { display: grid; align-content: start; margin: 0; padding: 0.25rem 1rem 0.75rem; }
.sp-board dl > div { display: grid; gap: 0.1rem; padding: 0.65rem 0; border-top: 1px solid var(--color-line, #dedde2); }
.sp-board dl > div:first-child { border-top: 0; }
.sp-board dt { color: var(--color-ink-soft, #66636c); font-size: 0.8rem; font-weight: 700; line-height: 1.5; }
.sp-board dd { margin: 0; font-size: 1.02rem; font-weight: 800; line-height: 1.4; font-variant-numeric: tabular-nums; }

.sp-pricenote { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin: 1.1rem 0 0; padding: 0; list-style: none; color: var(--color-ink-soft, #66636c); font-size: 0.82rem; }
.sp-pricenote li::before { content: '・'; }

/* ---------------- 料金: 章（左に絵と動詞、右に中身） ---------------- */

.sp-chapter { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: clamp(1.25rem, 4vw, 3.5rem); align-items: start; }
.sp-chapter__head { position: sticky; inset-block-start: 5.5rem; display: grid; gap: 0.6rem; }
.sp-chapter__verb { margin: 0; font-size: clamp(2rem, 3.6vw, 2.8rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.sp-chapter__sum { margin: 0; color: var(--color-ink-soft, #66636c); font-weight: 700; line-height: 1.6; }
.sp-chapter__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; min-width: 0; }
.sp-chapter__body > * { min-width: 0; }

.sp-card { padding: clamp(1.1rem, 2.4vw, 1.6rem); border: 1px solid var(--color-line, #dedde2); border-radius: var(--sp-radius); background: var(--color-white, #ffffff); }
.sp-card__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.35rem 1.25rem; }
.sp-card__top h3 { margin: 0; font-size: clamp(1.1rem, 1.9vw, 1.35rem); line-height: 1.45; }
.sp-card__lead { margin: 0.6rem 0 0; color: var(--color-ink-soft, #66636c); line-height: 1.8; }
.sp-card .sp-fold:first-of-type { margin-top: 1.1rem; }

/* 直す: 1回目 → 2回目以降 */
.sp-twostep { display: grid; grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 1fr); gap: 0.75rem; align-items: stretch; }
.sp-twostep__cell { display: grid; align-content: start; gap: 0.3rem; padding: 1.1rem 1.2rem; border-radius: var(--sp-radius); background: var(--color-mist, #f4f3f5); }
.sp-twostep__cell--main { background: radial-gradient(140% 160% at 100% 0%, color-mix(in srgb, var(--mk-tint) 34%, var(--color-white, #ffffff)), transparent 70%), var(--color-mist, #f4f3f5); }
.sp-twostep__cell p { margin: 0; }
.sp-twostep__cell .sp-kicker { color: var(--color-ink, #1b1a1f); }
.sp-twostep__cell strong { font-size: 1rem; line-height: 1.5; }
.sp-twostep__arrow { display: grid; place-items: center; color: var(--color-ink-soft, #66636c); font-weight: 800; }
.sp-twostep small { color: var(--color-ink-soft, #66636c); font-size: 0.82rem; line-height: 1.6; }
/* 旧 pricing.css の .pr-repair-followup（枠と、子 div を横並びの flex にする指定）を打ち消す。
   class 名は tests/pricing が見ているので残し、見た目だけ sp-twostep に合わせる。 */
.sp-twostep.pr-repair-followup { margin-top: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.sp-twostep.pr-repair-followup > div { display: grid; justify-content: stretch; align-items: stretch; margin: 0; }
.sp-twostep.pr-repair-followup > .sp-twostep__arrow { display: grid; place-items: center; }
.sp-twostep.pr-repair-followup > div > p { margin: 0; }

/* つなぐ: 行 */
.sp-offer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 1.25rem; align-items: baseline; padding: 1.1rem 0; border-top: 1px solid var(--color-line, #dedde2); }
.sp-offer:first-child { border-top: 0; padding-top: 0; }
.sp-offer h3 { margin: 0; font-size: clamp(1.02rem, 1.7vw, 1.2rem); line-height: 1.5; }
.sp-offer > p { grid-column: 1; margin: 0; color: var(--color-ink-soft, #66636c); font-size: 0.92rem; line-height: 1.75; }
.sp-scope .sp-offer .sp-num { grid-column: 2; grid-row: 1; font-size: clamp(1.2rem, 2vw, 1.5rem); }
.sp-offer .sp-fold { grid-column: 1 / -1; margin-top: 0.6rem; border: 0; }
.sp-offer .sp-fold > summary { padding: 0.2rem 0; font-size: 0.85rem; justify-content: flex-start; color: var(--color-teal, #5d2e54); }
.sp-offer .sp-fold > summary::after { inline-size: 1.3rem; block-size: 1.3rem; font-size: 0.8rem; }
.sp-offer .sp-fold__body { padding: 0.5rem 0 0; }

/* ---------------- 比較表: LP／Webサイト × おまかせ／オーダーメイド ---------------- */

.sp-matrix { display: grid; grid-template-columns: minmax(6rem, 9.5rem) repeat(2, minmax(0, 1fr)); border: 1px solid var(--color-line, #dedde2); border-radius: var(--sp-radius); background: var(--color-white, #ffffff); overflow: hidden; }
.sp-matrix > * { padding: 1.1rem 1.2rem; border-top: 1px solid var(--color-line, #dedde2); border-inline-start: 1px solid var(--color-line, #dedde2); min-width: 0; }
.sp-matrix > *:nth-child(3n + 1) { border-inline-start: 0; }
.sp-matrix > *:nth-child(-n + 3) { border-top: 0; }
.sp-matrix__corner { background: var(--color-mist, #f4f3f5); }
.sp-matrix__way { display: grid; align-content: start; gap: 0.5rem; background: var(--color-mist, #f4f3f5); }
.sp-matrix__way--custom { background: radial-gradient(140% 160% at 100% 0%, color-mix(in srgb, var(--mk-tint) 34%, var(--color-white, #ffffff)), transparent 70%), var(--color-mist, #f4f3f5); }
.sp-matrix__way h3 { margin: 0; font-size: clamp(1.15rem, 2vw, 1.45rem); letter-spacing: -0.02em; }
.sp-matrix__way p { margin: 0; color: var(--color-ink-soft, #66636c); font-size: 0.88rem; line-height: 1.65; }
.sp-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin: 0; padding: 0; list-style: none; font-size: 0.78rem; font-weight: 800; }
.sp-flow li { padding: 0.2rem 0.55rem; border-radius: 999px; background: var(--color-white, #ffffff); border: 1px solid var(--color-line, #dedde2); line-height: 1.5; }
.sp-flow li + li::before { content: '→'; margin-inline: -0.1rem 0.4rem; margin-inline-start: -1.05rem; position: relative; inset-inline-start: -0.35rem; color: var(--color-ink-soft, #66636c); font-weight: 700; }
.sp-flow li + li { margin-inline-start: 0.85rem; }
.sp-flow li.is-key { background: var(--color-ink, #1b1a1f); border-color: var(--color-ink, #1b1a1f); color: var(--color-white, #ffffff); }
.sp-matrix__kind { display: grid; align-content: center; gap: 0.2rem; }
.sp-matrix__kind strong { font-size: 1.05rem; line-height: 1.4; }
.sp-matrix__kind span { color: var(--color-ink-soft, #66636c); font-size: 0.8rem; font-weight: 700; }
.sp-matrix__cell { display: grid; align-content: start; gap: 0.45rem; }
.sp-matrix__cell .sp-chips li { background: var(--color-mist, #f4f3f5); border-color: transparent; }
.sp-matrix__title { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------------- 初期費用0円・12ヶ月プラン ---------------- */

.sp-plan { padding: clamp(1.2rem, 2.6vw, 1.75rem); border-radius: var(--sp-radius); background: var(--color-ink, #1b1a1f); color: var(--color-white, #ffffff); }
.sp-plan__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem 1.5rem; align-items: end; }
.sp-plan__tag { display: inline-block; margin: 0 0 0.5rem; padding: 0.2rem 0.65rem; border-radius: 999px; background: var(--brand-lime, #d7d93e); color: var(--color-ink, #1b1a1f); font-size: 0.75rem; font-weight: 800; }
.sp-plan h3 { margin: 0; font-size: clamp(1.25rem, 2.4vw, 1.7rem); letter-spacing: -0.02em; line-height: 1.35; }
.sp-plan__lead { margin: 0.5rem 0 0; color: rgb(255 255 255 / 0.74); font-size: 0.92rem; line-height: 1.75; }
.sp-plan__from { text-align: end; }
.sp-scope .sp-plan .sp-num { color: var(--color-white, #ffffff); }
.sp-scope .sp-plan__from .sp-num { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.sp-plan__from span { display: block; color: rgb(255 255 255 / 0.74); font-size: 0.78rem; font-weight: 700; }

.sp-timeline { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; margin: 1.5rem 0 0; }
.sp-timeline__end { display: grid; gap: 0.15rem; padding: 0.7rem 0.9rem; border-radius: var(--sp-radius); background: rgb(255 255 255 / 0.1); font-size: 0.8rem; line-height: 1.5; }
.sp-timeline__end strong { font-size: 0.92rem; }
.sp-timeline__end--goal { background: var(--brand-lime, #d7d93e); color: var(--color-ink, #1b1a1f); }
.sp-timeline__bar { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; }
.sp-timeline__bar i { block-size: 1.5rem; border-radius: 3px; background: rgb(255 255 255 / 0.22); }
.sp-timeline__bar i:first-child { background: var(--brand-lime, #d7d93e); }
.sp-timeline__bar span { position: absolute; inset-block-start: calc(100% + 0.35rem); inset-inline: 0; color: rgb(255 255 255 / 0.74); font-size: 0.75rem; font-weight: 700; text-align: center; }
.sp-plan__branches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; margin: 2.1rem 0 0; padding: 0; list-style: none; }
.sp-plan__branches li { padding: 0.75rem 0.9rem; border: 1px solid rgb(255 255 255 / 0.22); border-radius: var(--sp-radius); font-size: 0.82rem; line-height: 1.65; color: rgb(255 255 255 / 0.8); }
.sp-plan__branches strong { display: block; color: var(--color-white, #ffffff); font-size: 0.9rem; }

.sp-plan__scroll { overflow-x: auto; margin-top: 1.25rem; }
.sp-plan table { inline-size: 100%; min-inline-size: 30rem; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.sp-plan th, .sp-plan td { padding: 0.7rem 0.5rem; border-top: 1px solid rgb(255 255 255 / 0.18); text-align: start; font-size: 0.9rem; }
.sp-plan thead th { border-top: 0; color: rgb(255 255 255 / 0.7); font-size: 0.75rem; font-weight: 700; }
.sp-plan td { font-weight: 800; white-space: nowrap; }
.sp-plan td:last-child { color: rgb(255 255 255 / 0.74); font-weight: 700; }
.sp-plan .sp-fold { margin-top: 1rem; border-color: rgb(255 255 255 / 0.22); }
.sp-plan .sp-fold > summary::after { border-color: rgb(255 255 255 / 0.4); }
.sp-plan .sp-fold[open] > summary::after { background: var(--color-white, #ffffff); color: var(--color-ink, #1b1a1f); }
.sp-plan .sp-fold__body { color: rgb(255 255 255 / 0.8); }

/* ---------------- 保守・運用: 2枚で比べる ---------------- */

.sp-care { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.sp-care__plan { display: grid; align-content: start; gap: 0.5rem; padding: clamp(1.1rem, 2.4vw, 1.5rem); border: 1px solid var(--color-line, #dedde2); border-radius: var(--sp-radius); background: var(--color-white, #ffffff); }
.sp-care__plan h3 { margin: 0; font-size: 1.02rem; line-height: 1.5; }
.sp-care__plan p { margin: 0; color: var(--color-ink-soft, #66636c); font-size: 0.88rem; line-height: 1.7; }
.sp-care__key { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem; align-items: center; margin-top: 0.4rem; padding: 0.75rem 0.9rem; border-radius: var(--sp-radius); background: radial-gradient(140% 160% at 100% 0%, color-mix(in srgb, var(--mk-tint) 34%, var(--color-white, #ffffff)), transparent 70%), var(--color-mist, #f4f3f5); }
.sp-care__key b { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1; white-space: nowrap; }
.sp-care__key span { font-size: 0.85rem; font-weight: 700; line-height: 1.55; }
.sp-include { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.sp-include > div { padding: 1rem 1.2rem; border-radius: var(--sp-radius); background: var(--color-mist, #f4f3f5); }
.sp-include h3 { margin: 0 0 0.5rem; font-size: 0.92rem; }
.sp-include ul { display: grid; gap: 0.35rem; margin: 0; padding: 0; list-style: none; font-size: 0.86rem; line-height: 1.6; }
.sp-include li { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); gap: 0.3rem; }
.sp-include li::before { content: '○'; font-size: 0.7rem; font-weight: 800; line-height: 2; color: color-mix(in srgb, var(--brand-teal, #4ad7a8) 60%, var(--color-ink, #1b1a1f)); }
.sp-include > div + div li::before { content: '−'; color: var(--color-ink-soft, #66636c); }
.sp-include > div + div ul { color: var(--color-ink-soft, #66636c); }

/* 詳細ページ: 関連する別の選択肢（MAKASU） */
.sp-related-option { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0.5rem 1rem; align-items: center; margin-top: 0.75rem; padding: 1.1rem 1.2rem; border-radius: var(--sp-radius); background: var(--color-ink, #1b1a1f); color: var(--color-white, #ffffff); text-decoration: none; }
.sp-related-option strong { display: block; font-size: 1.05rem; }
.sp-related-option > span:first-child > span { display: block; margin-top: 0.25rem; color: rgb(255 255 255 / 0.74); font-size: 0.86rem; line-height: 1.7; }
.sp-related-option .sp-price { background: var(--color-white, #ffffff); color: var(--color-ink, #1b1a1f); }
.sp-related-option .sp-go { border-color: rgb(255 255 255 / 0.4); }
.sp-related-option__label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sp-related-option:hover .sp-go, .sp-related-option:focus-visible .sp-go { background: var(--color-white, #ffffff); color: var(--color-ink, #1b1a1f); }

/* 詳細ページ: 本文の幅と章のあいだ */
.sp-detail { display: grid; gap: clamp(2.5rem, 6vw, 4rem); padding-block: clamp(1.5rem, 4vw, 2.5rem) clamp(3rem, 7vw, 5rem); }
.sp-detail > section { min-width: 0; }
.sp-area { margin: 1rem 0 0; color: var(--color-ink-soft, #66636c); font-size: 0.85rem; }
.sp-faq { max-width: 52rem; }

/* AI: 2つの入口 */
.sp-duo { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0.75rem; align-items: stretch; }
.sp-duo__or { display: grid; place-items: center; color: var(--color-ink-soft, #66636c); font-size: 0.85rem; font-weight: 800; }
.sp-duo a { display: grid; align-content: start; gap: 0.3rem; padding: 1.1rem 1.2rem; border: 1px solid var(--color-line, #dedde2); border-radius: var(--sp-radius); background: var(--color-white, #ffffff); color: inherit; text-decoration: none; transition: border-color 160ms var(--sp-ease), transform 160ms var(--sp-ease); }
.sp-duo a:hover, .sp-duo a:focus-visible { border-color: var(--color-ink, #1b1a1f); transform: translateY(-2px); }
.sp-duo a span { color: var(--color-ink-soft, #66636c); font-size: 0.85rem; font-weight: 700; }
.sp-duo a strong { font-size: 1.15rem; }

/* ---------------- 狭い画面 ---------------- */

@media (max-width: 62rem) {
  .sp-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-can { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-chapter { grid-template-columns: minmax(0, 1fr); }
  .sp-chapter__head { position: static; grid-template-columns: 7.5rem minmax(0, 1fr); align-items: center; gap: 0.25rem 1rem; }
  .sp-chapter__head .sp-art { grid-row: 1 / span 2; padding: 0.5rem; }
  .sp-chapter__head .sp-kicker { display: none; }
}

@media (max-width: 42rem) {
  .sp-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .sp-hero__art { order: -1; }
  .sp-hero__art .mk-art { inline-size: min(70%, 15rem); }
  .sp-lane { grid-template-columns: minmax(0, 1fr); }
  .sp-lane__head { grid-template-columns: 6.5rem minmax(0, 1fr); align-items: center; gap: 0.2rem 1rem; }
  .sp-lane__head .sp-art { grid-row: 1 / span 2; padding: 0.4rem; }
  .sp-row { grid-template-columns: minmax(0, 1fr) auto; }
  .sp-row__price { grid-column: 1; grid-row: auto; justify-items: start; margin-top: 0.3rem; }
  .sp-row .sp-go { grid-column: 2; grid-row: 1 / span 3; }
  .sp-ask, .sp-ask__list, .sp-scopecols, .sp-related, .sp-fold__cols, .sp-care, .sp-include { grid-template-columns: minmax(0, 1fr); }
  .sp-board { grid-template-columns: minmax(0, 1fr); }
  .sp-board dl > div { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0.75rem; }
  .sp-can { grid-template-columns: minmax(0, 1fr); }
  .sp-can li { grid-template-columns: auto minmax(0, 1fr); gap: 0.1rem 0.9rem; padding: 0.9rem 1rem; }
  .sp-can li::before { grid-row: 1 / span 2; align-self: center; }
  .sp-steps { grid-auto-flow: row; gap: 0; }
  .sp-steps li { grid-template-columns: 2.2rem minmax(0, 1fr); gap: 0 0.9rem; padding: 0 0 1.25rem; }
  .sp-steps li::before { grid-row: 1 / span 2; margin: 0; }
  .sp-steps li::after { inset-inline: 1.1rem auto; inset-block: 2.2rem 0; border-top: 0; border-inline-start: 2px dashed var(--color-line, #dedde2); }
  .sp-twostep, .sp-duo { grid-template-columns: minmax(0, 1fr); }
  .sp-related-option { grid-template-columns: minmax(0, 1fr) auto; }
  .sp-related-option .sp-price { grid-column: 1; justify-self: start; }
  .sp-related-option .sp-go { grid-column: 2; grid-row: 1 / span 2; }
  .sp-twostep__arrow, .sp-duo__or { padding-block: 0.1rem; }
  .sp-twostep__arrow { transform: rotate(90deg); }
  .sp-offer { grid-template-columns: minmax(0, 1fr); }
  .sp-scope .sp-offer .sp-num { grid-column: 1; grid-row: auto; }
  /* 比較表は「種類ごとに2枚」へ組み替える */
  .sp-matrix { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-matrix__corner { display: none; }
  .sp-matrix > * { border-inline-start: 1px solid var(--color-line, #dedde2); padding: 0.9rem; }
  .sp-matrix > .sp-matrix__way { border-top: 0; }
  .sp-matrix > .sp-matrix__way:nth-child(2), .sp-matrix > .sp-matrix__cell:nth-child(3n + 2) { border-inline-start: 0; }
  .sp-matrix__kind { grid-column: 1 / -1; grid-template-columns: auto 1fr; align-items: baseline; gap: 0.6rem; border-inline-start: 0 !important; background: var(--color-mist, #f4f3f5); padding-block: 0.6rem !important; }
  .sp-flow { display: none; }
  .sp-plan__top { grid-template-columns: minmax(0, 1fr); }
  .sp-plan__from { text-align: start; }
  .sp-timeline { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  .sp-timeline__bar span { position: static; margin-top: 0.35rem; grid-column: 1 / -1; }
  .sp-plan__branches { grid-template-columns: minmax(0, 1fr); margin-top: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sp-scope *, .sp-scope *::before, .sp-scope *::after { transition: none !important; animation: none !important; }
}

/* ============================================================
 * Web制作プラン（2026-09-22）: 制作思想 → 4枚のカード → 引き渡しの一文 → CUSTOM → 比較表 → オプション
 * 旧 .sp-matrix / .sp-plan の指定は残してある（deploy lane の対象を増やさない）。
 * ============================================================ */

.sp-plans-wrap { display: grid; gap: 1rem; }

.sp-creed { display: grid; gap: 0.35rem; padding: 0 0 0.25rem; }
.sp-creed__main { margin: 0; font-size: clamp(1.05rem, 1.9vw, 1.3rem); font-weight: 800; line-height: 1.6; letter-spacing: -0.01em; }
.sp-creed__sub { margin: 0; color: var(--color-ink-soft, #66636c); font-size: 0.92rem; line-height: 1.7; }
.sp-creed span { display: inline-block; margin-inline-end: 0.5em; }

.sp-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.sp-plancard { position: relative; display: grid; grid-template-rows: auto auto auto auto auto 1fr auto auto; gap: 0.6rem; min-width: 0; padding: 0 1.1rem 1.1rem; border: 1px solid var(--color-line, #dedde2); border-radius: var(--sp-radius); background: var(--color-white, #ffffff); }
.sp-plancard--recommended { border-color: var(--color-ink, #1b1a1f); box-shadow: 0 0 0 1px var(--color-ink, #1b1a1f); }
.sp-plancard__band { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin: 0 -1.1rem; padding: 0.7rem 1.1rem; border-radius: var(--sp-radius) var(--sp-radius) 0 0; background: radial-gradient(140% 160% at 100% 0%, color-mix(in srgb, var(--mk-tint) 40%, var(--color-white, #ffffff)), transparent 72%), var(--color-mist, #f4f3f5); }
.sp-plancard__name { font-size: 1.05rem; font-weight: 800; letter-spacing: 0.04em; }
.sp-plancard__badge { padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--color-ink, #1b1a1f); color: var(--color-white, #ffffff); font-size: 0.72rem; font-weight: 800; }
.sp-plancard__title { margin: 0.2rem 0 0; font-size: 0.95rem; font-weight: 800; line-height: 1.55; }
.sp-plancard__monthly { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.15rem 0.4rem; margin: 0; }
.sp-plancard__price { font-size: clamp(1.45rem, 2vw, 1.85rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-plancard__x { color: var(--color-ink-soft, #66636c); font-size: 0.85rem; font-weight: 800; }
.sp-plancard__rows { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--color-line, #dedde2); }
.sp-plancard__rows > div { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 0.5rem; padding: 0.42rem 0; border-bottom: 1px solid var(--color-line, #dedde2); }
.sp-plancard__rows dt { color: var(--color-ink-soft, #66636c); font-size: 0.74rem; font-weight: 700; white-space: nowrap; }
.sp-plancard__rows dd { margin: 0; display: grid; justify-items: end; font-size: 0.88rem; font-weight: 800; font-variant-numeric: tabular-nums; text-align: end; white-space: nowrap; }
.sp-plancard__rows dd small { color: var(--color-ink-soft, #66636c); font-size: 0.7rem; font-weight: 700; }
.sp-plancard__chips li { background: var(--color-mist, #f4f3f5); border-color: transparent; font-size: 0.74rem; }
.sp-plancard__features { display: grid; gap: 0.3rem; margin: 0; padding: 0; list-style: none; font-size: 0.84rem; line-height: 1.6; }
.sp-plancard__features li { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: 0.3rem; }
.sp-plancard__features li::before { content: '○'; font-size: 0.65rem; font-weight: 800; line-height: 2.1; color: color-mix(in srgb, var(--mk-tint) 70%, var(--color-ink, #1b1a1f)); }
.sp-plancard__note { margin: 0; color: var(--color-ink-soft, #66636c); font-size: 0.78rem; line-height: 1.6; }
.sp-plancard__cta { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.7rem 0.9rem; border: 1px solid var(--color-ink, #1b1a1f); border-radius: 999px; color: var(--color-ink, #1b1a1f); font-size: 0.88rem; font-weight: 800; text-decoration: none; transition: background 160ms var(--sp-ease), color 160ms var(--sp-ease); }
.sp-plancard--recommended .sp-plancard__cta { background: var(--color-ink, #1b1a1f); color: var(--color-white, #ffffff); }
.sp-plancard__cta:hover, .sp-plancard__cta:focus-visible { background: var(--color-ink, #1b1a1f); color: var(--color-white, #ffffff); }
.sp-plancard__cta:focus-visible { outline: 2px solid var(--color-teal, #5d2e54); outline-offset: 3px; }

.sp-handover { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.2rem 1.25rem; align-items: baseline; padding: 1rem 1.2rem; border-inline-start: 0.25rem solid var(--brand-lime, #d7d93e); border-radius: 0 var(--sp-radius) var(--sp-radius) 0; background: var(--color-white, #ffffff); }
.sp-handover__head { grid-row: 1 / span 2; margin: 0; font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; }
.sp-handover__text { margin: 0; font-size: 0.9rem; line-height: 1.7; }
.sp-handover__phases { margin: 0; color: var(--color-ink-soft, #66636c); font-size: 0.82rem; font-weight: 700; }
.sp-handover__phases span { margin-inline-end: 0.6em; }

.sp-custom { padding: clamp(1.2rem, 2.6vw, 1.6rem); border-radius: var(--sp-radius); background: var(--color-ink, #1b1a1f); color: var(--color-white, #ffffff); }
.sp-custom h3 { margin: 0; font-size: clamp(1.2rem, 2.2vw, 1.5rem); letter-spacing: 0.04em; }
.sp-custom h3 span { display: block; margin-top: 0.2rem; font-size: 0.95rem; font-weight: 800; letter-spacing: 0; }
.sp-custom__examples { margin-top: 1rem; }
.sp-custom__examples li { background: rgb(255 255 255 / 0.1); border-color: rgb(255 255 255 / 0.25); color: var(--color-white, #ffffff); }

/* START vs STANDARD */
.sp-compare-wrap { display: grid; gap: 0.75rem; }
.sp-compare { inline-size: 100%; border-collapse: collapse; border: 1px solid var(--color-line, #dedde2); border-radius: var(--sp-radius); overflow: hidden; background: var(--color-white, #ffffff); font-size: 0.9rem; }
.sp-compare caption { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sp-compare th, .sp-compare td { padding: 0.7rem 0.9rem; border-top: 1px solid var(--color-line, #dedde2); text-align: start; vertical-align: top; line-height: 1.55; }
.sp-compare thead th { border-top: 0; background: radial-gradient(140% 160% at 100% 0%, color-mix(in srgb, var(--mk-tint) 34%, var(--color-white, #ffffff)), transparent 70%), var(--color-mist, #f4f3f5); font-size: 1rem; font-weight: 800; letter-spacing: 0.04em; }
.sp-compare thead th:first-child { --mk-tint: transparent; background: var(--color-mist, #f4f3f5); font-size: 0.8rem; color: var(--color-ink-soft, #66636c); letter-spacing: 0; }
.sp-compare thead th small { margin-inline-start: 0.5em; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--color-ink, #1b1a1f); color: var(--color-white, #ffffff); font-size: 0.7rem; font-weight: 800; letter-spacing: 0; }
.sp-compare tbody th { inline-size: 9rem; color: var(--color-ink-soft, #66636c); font-size: 0.82rem; font-weight: 700; }
.sp-compare td { font-weight: 700; }
.sp-compare__guide { margin: 0; font-size: 0.92rem; font-weight: 800; line-height: 1.7; }
.sp-compare__guide span { display: block; }
.sp-compare__note { margin: 0; color: var(--color-ink-soft, #66636c); font-size: 0.85rem; line-height: 1.65; }

/* オプション: 小さな一覧1枚 */
.sp-options { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-line, #dedde2); }
.sp-options li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.15rem 1rem; padding: 0.7rem 0.25rem; border-bottom: 1px solid var(--color-line, #dedde2); }
.sp-options strong { font-size: 0.92rem; }
.sp-options .sp-options__price { grid-column: 2; grid-row: 1; justify-self: end; font-size: 0.92rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-options small { grid-column: 1 / -1; color: var(--color-ink-soft, #66636c); font-size: 0.8rem; line-height: 1.6; }
.sp-options__unit { color: var(--color-ink-soft, #66636c); font-size: 0.78rem; font-weight: 700; }

/* 条件: 隠さず表示する短い一覧 */
.sp-terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem 1.25rem; margin: 0; padding: 0; list-style: none; font-size: 0.85rem; line-height: 1.6; }
.sp-terms li { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: 0.3rem; }
.sp-terms li::before { content: '・'; font-weight: 800; }

/* AI受付（プレビュー限定）: 2つの違いを1行で */
.sp-ai-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.sp-ai-split > div { padding: 1rem 1.2rem; border-radius: var(--sp-radius); background: var(--color-mist, #f4f3f5); }
.sp-ai-split h4 { margin: 0; font-size: 1rem; }
.sp-ai-split p { margin: 0.25rem 0 0; font-size: 0.88rem; line-height: 1.65; }
.sp-preview-flag { display: inline-block; margin-inline-start: 0.5rem; padding: 0.1rem 0.55rem; border: 1px dashed var(--color-ink-soft, #66636c); border-radius: 999px; color: var(--color-ink-soft, #66636c); font-size: 0.72rem; font-weight: 800; vertical-align: middle; }

@media (max-width: 62rem) {
  .sp-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 42rem) {
  .sp-plans { grid-template-columns: minmax(0, 1fr); }
  .sp-handover { grid-template-columns: minmax(0, 1fr); }
  .sp-handover__head { grid-row: auto; }
  .sp-terms, .sp-ai-split { grid-template-columns: minmax(0, 1fr); }
  /* オプションは名称→価格→説明の順に縦へ。価格の nowrap を解いて幅内に収める（監査所見 2026-09-23） */
  .sp-options li { grid-template-columns: minmax(0, 1fr); }
  .sp-options .sp-options__price { grid-column: 1; grid-row: auto; justify-self: start; white-space: normal; }
  /* 比較表は「項目 → START → STANDARD」を縦に読む */
  .sp-compare thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .sp-compare tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid var(--color-line, #dedde2); }
  .sp-compare tbody tr:first-child { border-top: 0; }
  .sp-compare tbody th { grid-column: 1 / -1; inline-size: auto; padding-block: 0.6rem 0.2rem; border-top: 0; }
  .sp-compare td { border-top: 0; padding-block: 0.2rem 0.7rem; font-size: 0.86rem; }
  .sp-compare td::before { content: attr(data-label); display: block; margin-bottom: 0.1rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; color: var(--color-ink-soft, #66636c); }
}

.sp-card__h { margin: 0 0 0.75rem; font-size: 1rem; font-weight: 800; }
.sp-h3 { margin: 0 0 0.75rem; font-size: clamp(1.05rem, 1.8vw, 1.25rem); font-weight: 800; letter-spacing: -0.01em; }