@charset "UTF-8";
/* 料金プランのページ（/plan/・2026-10-04）。このページだけが読む。
   札は白い紙に細い罫、金額だけ太字で大きく緑の字。緑は札の上の線と小さな印（2026-10-20 LINE 風。前は紙と墨と柿色）。
   文章・図・相談の枠・目次は style.css の「顧客起点の頁」の部品をそのまま使う。
   色・罫・角丸の基は style.css の変数（--paper --ink --ink-soft --line --line-strong --green --accent --r --c-sheet --c-wider）。 */

/* 札の並び。月額の 2 つ → 買い切り の順（買い切りは後ろ・本人 2026-10-04）。狭い画面は縦に同じ順 */
.pcards {
  list-style: none;
  width: var(--c-wider);
  margin: 0;
  margin-inline: calc(50% - var(--c-wider) / 2);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.9rem, 2vw, 1.3rem);
}
.pcard {
  display: flex;
  flex-direction: column;
  padding: 1.35rem 1.2rem 1.1rem;
  text-align: center;
  background: var(--c-sheet);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
}
.pcard p { margin: 0; }
/* 3 枚とも同じ札（2026-10-04 本人「買い切りも他の 2 枚と同じように白く、同じデザインに」）。
   上の線は太い緑・「月額プラン」の字と料金の数字とページ数の枠は緑の字（2026-10-11 の「3 はっきり」の形のまま、色だけ緑へ） */
.pcard { border-top: 5px solid var(--green); }
.pcard__kind { font-size: .8rem; line-height: 1.5; letter-spacing: .14em; color: var(--accent); }
/* プランの名前。英語の名前は字間を広く、読みは下に小さく。買い切りは日本語の名前だけ */
.pcard .pcard__name { min-height: 2.8rem; margin-top: .3rem; font-family: var(--sans); font-weight: 700; font-size: 1.32rem; line-height: 1.35; letter-spacing: .14em; text-indent: .14em; }
.pcard__name-sub { display: block; font-family: var(--sans); font-size: .72rem; letter-spacing: .16em; text-indent: .16em; color: var(--ink-soft); }
.pcard--buy .pcard__name { letter-spacing: .08em; text-indent: .08em; }
.pcard__pages {
  align-self: center;
  margin-top: .6rem;
  padding: .12em .95em;
  font-size: .82rem;
  line-height: 1.7;
  letter-spacing: .06em;
  color: var(--accent);
  border: 1px solid var(--green);
  border-radius: 999px;
}
.pcard .pcard__price { margin-top: 1.05rem; font-family: var(--sans); line-height: 1.1; white-space: nowrap; }
.pcard__num { font-size: clamp(2.1rem, 4.4vw, 2.7rem); font-weight: 700; letter-spacing: .01em; color: var(--accent); font-variant-numeric: lining-nums tabular-nums; }
.pcard__unit { margin-left: .16em; font-size: 1rem; letter-spacing: .06em; }
.pcard .pcard__per { margin-top: .4rem; font-size: .78rem; letter-spacing: .1em; color: var(--ink-soft); }
.pcard .pcard__fit { flex: 1 1 auto; margin-top: .95rem; padding-top: .9rem; font-size: .9rem; line-height: 1.75; border-top: 1px solid var(--line); }
.pcard__facts { margin: .9rem 0 0; font-size: .84rem; line-height: 1.6; text-align: left; }
.pcard__facts div { display: flex; justify-content: space-between; gap: .8rem; padding: .44rem 0; border-top: 1px solid var(--line); }
.pcard__facts dt { color: var(--ink-soft); }
.pcard__facts dd { margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* 札の下の添え書き */
.pnote { font-size: .86rem; line-height: 1.85; color: var(--ink-soft); }
.ctext.pwide .pnote { margin: .8rem 0 0; }

/* 使えるカード（2026-10-10）。カード会社の名前を紙の札で並べる。マークの画像は使わない */
.paccept {
  margin: 1.1rem 0 0;
  padding: .9rem 1.05rem 1rem;
  background: var(--c-sheet);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.paccept__label { margin: 0 0 .6rem; font-size: .86rem; letter-spacing: .14em; color: var(--ink-soft); }
.paccept__list { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.paccept__brand {
  padding: .3rem .75rem;
  font-size: .86rem;
  line-height: 1.4;
  letter-spacing: .02em;
  white-space: nowrap;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
}
.paccept__note { margin: .7rem 0 0; font-size: .84rem; line-height: 1.75; color: var(--ink-soft); }

/* 決まりの一言（作り込んだ 3D はページが少なくても PREMIUM）。緑の細い線を左に 1 本 */
.pcallout {
  padding: .8rem 1.05rem;
  font-size: .95rem;
  line-height: 1.8;
  background: var(--c-sheet);
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  border-radius: var(--r);
}

/* 月額に含まれるもの。3 つのまとまりを 1 枚の紙に */
.pinc {
  width: var(--c-wider);
  margin-inline: calc(50% - var(--c-wider) / 2);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem clamp(1.2rem, 3vw, 2.2rem);
  padding: clamp(1.1rem, 2.8vw, 1.7rem);
  background: var(--c-sheet);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.pinc__name {
  margin: 0 0 .35rem;
  padding-bottom: .5rem;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.5;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--line-strong);
}
.pinc__list { list-style: none; margin: 0; padding: 0; }
.pinc__list li { position: relative; padding: .44rem 0 .44rem 1.2em; font-size: .92rem; line-height: 1.6; border-bottom: 1px solid var(--line); }
.pinc__list li::before { content: ""; position: absolute; left: .1em; top: 1.08em; width: .32em; height: .32em; background: var(--green); }

/* 比べる表。本文より 1 段広く置き、3 列を電話の幅にも収める（横に送らせない） */
.pwide { width: var(--c-wide); margin-inline: calc(50% - var(--c-wide) / 2); }
.ctext.pwide .table-wrap { margin: 0; }
.ctext .pcompare { min-width: 0; table-layout: fixed; }
.ctext .pcompare th:first-child { width: 27%; }
.ctext .pcompare tbody th { white-space: normal; font-size: .94em; line-height: 1.6; }
.ctext .pcompare thead th:nth-child(2) { color: var(--accent); }
.pcompare__line { display: block; }

/* 表の題と、費用の例の表（金額を 1 段大きく） */
.pcaption { padding: 0 0 .5rem; caption-side: top; text-align: left; font-family: var(--sans); font-weight: 700; font-size: 1.02rem; letter-spacing: .06em; }
.ctext .pcost td { font-family: var(--sans); font-size: 1.06em; letter-spacing: .02em; }
.ctext .pcost tbody tr:nth-child(3) > * { border-bottom-color: var(--line-strong); font-weight: 700; }

/* 良いところ・気をつけたいところ・合うかた。月額と買い切りを同じ札で左右に並べる（狭い画面は縦に） */
.psides {
  width: var(--c-wider);
  margin-inline: calc(50% - var(--c-wider) / 2);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.9rem, 2vw, 1.3rem);
  align-items: start;
}
.pside {
  padding: clamp(1.1rem, 2.6vw, 1.6rem);
  background: var(--c-sheet);
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--green);
  border-radius: var(--r);
}
.pside__name { margin: 0 0 1rem; font-family: var(--sans); font-weight: 700; font-size: 1.2rem; line-height: 1.5; letter-spacing: .06em; text-align: center; }
.pside .pside__label {
  margin: 1.25rem 0 .1rem;
  padding-bottom: .45rem;
  font-family: var(--sans);
  font-weight: 700;
  font-size: .98rem;
  line-height: 1.5;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--line-strong);
}
.pside .pside__label:first-of-type { margin-top: 0; }
.pside__list { list-style: none; margin: 0; padding: 0; }
.pside__list li { position: relative; padding: .46rem 0 .46rem 1.35em; font-size: .93rem; line-height: 1.65; border-bottom: 1px solid var(--line); }
.pside__list li::before { content: ""; position: absolute; left: .12em; top: 1.02em; width: .5em; height: .5em; box-sizing: border-box; }
/* 印は 3 種：良いところ＝緑の丸、気をつけたいところ＝灰の三角、合うかた＝灰の細い枠の四角 */
.pside__list--good li::before { background: var(--green); border-radius: 50%; }
.pside__list--care li::before { top: .95em; width: 0; height: 0; border-left: .3em solid transparent; border-right: .3em solid transparent; border-bottom: .52em solid var(--ink-soft); }
.pside__list--fit li::before { border: 1px solid var(--ink-soft); }
.pside__label--care { color: var(--ink-soft); }

/* 流れの図。真ん中（お客様のものになる）を緑の枠にしているので、文字を中央に寄せる */
.pflow .cflow__step--goal { display: flex; flex-direction: column; justify-content: center; }

@media (max-width: 760px) {
  .pcards, .pinc, .psides { grid-template-columns: minmax(0, 1fr); }
  .pcard { padding-inline: 1.1rem; }
  .ctext .pcompare { font-size: .86em; }
  .ctext .pcompare th, .ctext .pcompare td { padding-inline: .5em; }
  .ctext .pcompare th:first-child, .ctext .pcompare td:first-child { padding-left: 0; }
}

/* 月額プランの看板（2026-10-09）。見出しのすぐ下に太字の一行と、添え書きの一行。
   緑は左の細い罫 1 本だけ。読点の後ろでだけ折り返す（.phrase は style.css） */
.ctext .plan-catch {
  margin: -.3em 0 .45em;
  padding-left: .85rem;
  border-left: 2px solid var(--green);
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.24rem, 3.2vw, 1.62rem);
  line-height: 1.55;
  letter-spacing: .03em;
}
.ctext .plan-catch-sub {
  margin: 0 0 1.6em;
  padding-left: calc(.85rem + 2px);
  font-size: .92rem;
  line-height: 1.8;
  color: var(--ink-soft);
}

/* 補助金と組み合わせる経費の表（2026-10-09）。区分の名前（ウェブサイト関連費 など）が
   電話で語の途中から折れないよう、1 列目を広げる */
@media (max-width: 760px) {
  .ctext .psubsidy th:first-child { width: 38%; }
}

/* /web/ の料金の節（WEB-05・2026-10-11 本人「月額をメインに」）。月額の 2 枚だけを、少し細めの柱に並べる */
.pcards--monthly {
  width: min(var(--c-wider), 46rem);
  margin-inline: calc(50% - min(var(--c-wider), 46rem) / 2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-block: 1.6rem 1.8rem;
}
@media (max-width: 640px) {
  .pcards--monthly { grid-template-columns: 1fr; }
}