@charset "UTF-8";
/* ===========================================================
   料金セクション（2026-09-02 新3プラン）

   index.html と service/index.html の両方から読む。
   片方だけ直すと金額と中身が食い違うので、見た目はこの1枚に集約する。

   なぜ style.css に足さなかったか
     style.css は約300ページが読んでいる。1行足すだけで全ページの
     ?v= を付け直すことになり、同じフォルダを触っている別セッションと
     衝突する。料金は2ページしか使わないので別ファイルにした。

   色は css/style.css の :root に定義ずみのものだけを使う。
     ライト       --secondary   #1f7a5a
     スタンダード --primary     #16335c
     プレミアム   --accent-warm #e8762e
     持たない段   --neutral     #C4C8CC

   #e8762e は白地に対して約3.0:1 しかない。大きい数字や塗りには使えるが、
   小さい文字には使えないので、小さい文字だけ color-mix で暗くして
   4.5:1 を確保している（新しい色は足していない。同じ変数から作る）。

   文字は16px を下限にする。注記も16px。
   =========================================================== */

.pl{
  --pl-light:      var(--secondary);
  --pl-standard:   var(--primary);
  --pl-premium:    var(--accent-warm);
  /* #e8762e は白地で 2.97:1 しかない。用途ごとに暗さを変えて基準を満たす。
     文字用 66%（白地で約6.5:1／文字は4.5:1が必要）
     図形用 80%（白地で約3.4:1／図形は3:1が必要）
     どちらも --accent-warm から作っている。新しい色は足していない。 */
  --pl-premium-ink: #994e1e;
  --pl-premium-ink: color-mix(in srgb, var(--accent-warm) 66%, #000);
  --pl-premium-mark: #ba5e25;
  --pl-premium-mark: color-mix(in srgb, var(--accent-warm) 80%, #000);
  --pl-off:        #6b7280;
  /* 実施量の札だけに使う黄色（2026-09-03 白倉指示）

     このファイルは「色は style.css の :root にあるものだけを使う」と
     決めてある。ここはその例外。回数（月4本・週1回）を一番先に
     目に入れたい、という指示があり、既存の紺・緑・橙では
     どれも本文や見出しと同じ色になって前に出なかった。
     白地でも紺文字でも読めるように、明度の高い黄色を選んである。
       黄地 × 紺文字 … 9.6:1（本文の基準4.5:1を満たす）
     使う場所は .plc-qty ひとつだけ。ほかには広げないこと。 */
  --pl-pop:        #ffd84d;
  --pl-pop-ink:    #16335c;

  font-family: var(--font-ja);
  color: var(--dark);

  /* 幅を止めて中央に置く（2026-09-03 白倉指示）

     ページの器は --w-full（1800px）。料金は「3つ並べて選ぶ」ものなので、
     1800pxに広げると、左のライトから右のプレミアムまで視線が画面の
     端から端まで動く。1920pxの画面で1列380pxあった。
     プランのカード・どこまで持つかの表・プランごとの中身、
     ぜんぶ同じ980pxにそろえて1本の柱にする。
     980pxを切る画面では、これまでどおり画面の幅いっぱいに広がる。 */
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

.pl-block{ margin: 0 0 56px; }
.pl-block:last-child{ margin-bottom: 0; }

.pl-h3{
  font-size: 20px;
  font-weight: 700;
  color: var(--primary);
  margin: 0 0 6px;
  line-height: 1.5;
}
.pl-note{
  font-size: 16px;
  line-height: 1.9;
  color: #4a5261;
  margin: 0 0 22px;
}

/* ==========================================================
   1. プランカード3枚
   ========================================================== */
.pl-cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}
.pl-card{
  position: relative;
  display: flex;
  flex-direction: column;
  border: 2px solid var(--neutral);
  padding: 30px 24px 26px;
  background: #fff;
}
.pl-card.is-light{
  border-color: var(--pl-light);
  background: #edf4f2;
  background: color-mix(in srgb, var(--secondary) 8%, #fff);
}
.pl-card.is-standard{
  border-color: var(--pl-standard);
  background: #eceff2;
  background: color-mix(in srgb, var(--primary) 8%, #fff);
}
.pl-card.is-premium{
  border-color: var(--pl-premium);
  background: #fdf3ec;
  background: color-mix(in srgb, var(--accent-warm) 9%, #fff);
}

.pl-badge{
  position: absolute;
  top: -15px; left: 50%;
  transform: translateX(-50%);
  background: var(--pl-premium-ink);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 5px 20px;
  border-radius: 999px;
  white-space: nowrap;
}

.pl-en{
  font-family: var(--font-en);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .18em;
  margin: 0 0 8px;
}
.is-light   .pl-en{ color: var(--pl-light); }
.is-standard .pl-en{ color: var(--pl-standard); }
.is-premium .pl-en{ color: var(--pl-premium-ink); }

.pl-name{
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 16px;
}
.is-light   .pl-name{ color: var(--pl-light); }
.is-standard .pl-name{ color: var(--pl-standard); }
.is-premium .pl-name{ color: var(--pl-premium-ink); }

/* プラン名の高さを2行分で固定する（2026-09-04）

   ライトの「まず、見つけてもらう」だけが1行、他の2つが2行だったため、
   その下の金額・税別・共通で入るもの・説明・契約条件・開閉リンクまで、
   3枚すべてが 33px ずれていた。金額の高さが揃わないので、
   50,000／100,000／200,000 を横に並べて比べられない状態だった。

   直したあとの実測（1440px）
     カードの高さ 561/594/594 → 578/578/578
     金額の位置   118/151/151 → 153/153/153

   3列に並ぶときだけ効かせる。899px 以下は1列に積むので、
   高さを固定すると「まず、見つけてもらう」の下に空白が出るだけになる。 */
@media (min-width: 900px){
  .pl-card .pl-name{ min-height: 3em; }   /* 2行 × line-height 1.5 */
}

.pl-price{
  font-family: var(--font-en);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.is-light   .pl-price{ color: var(--pl-light); }
.is-standard .pl-price{ color: var(--pl-standard); }
.is-premium .pl-price{ color: var(--pl-premium-ink); }
.pl-price .pl-unit{
  font-family: var(--font-ja);
  font-size: 18px;
  font-weight: 700;
  margin-left: 3px;
}
.pl-tax{
  font-size: 16px;
  color: #4a5261;
  margin: 4px 0 0;
}

/* 全プラン共通で入るもの */
.pl-incl{
  margin: 16px 0 0;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--neutral);
  font-size: 16px;
  line-height: 1.8;
  color: #333b47;
}

.pl-desc{
  font-size: 16px;
  line-height: 1.9;
  color: #333b47;
  margin: 18px 0 0;
  flex: 1;
}

.pl-term{
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--neutral);
  font-size: 16px;
  line-height: 1.8;
  color: #4a5261;
}

/* カードの出口（2026-09-04）。

   /price/ の3枚だけ、押せるものが1つも入っていなかった。
   同じ .pl-card でも /service/ は「回数と中身を見る」、/enjoy/ は
   「このプランで相談する」を持っている。いちばん買う気で見ているページに
   だけ出口が無い状態だった。390px の実測では、本文中の最初のCTAが
   y=10,128（ページ全長11,615px の87%地点）にしか無かった。

   見た目は /enjoy/ の .pricing-cta-btn に合わせる（全幅の .btn.btn-accent）。
   .pl-desc が flex:1 なので、足しても3枚の下端はそろったまま。 */
.pl-cta{
  width: 100%;
  justify-content: center;
  margin: 18px 0 0;
  font-size: 15px;
}

/* ==========================================================
   2. どこまで持つか（4段 × 3プラン）
   このページで一番見せたい図なので大きく取る
   ========================================================== */
.pl-scope-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pl-scope{
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
  background: #fff;
}
.pl-scope caption{
  caption-side: top;
  text-align: left;
  font-size: 16px;
  line-height: 1.9;
  color: #4a5261;
  padding: 0 0 14px;
}
.pl-scope th,
.pl-scope td{
  border: 1px solid var(--neutral);
  padding: 18px 16px;
  vertical-align: middle;
}
.pl-scope thead th{
  background: var(--light-gray);
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
}
.pl-scope thead th:first-child{ text-align: left; }
.pl-scope thead .h-light   { color: var(--pl-light); }
.pl-scope thead .h-standard{ color: var(--pl-standard); }
.pl-scope thead .h-premium { color: var(--pl-premium-ink); }

.pl-scope tbody th{
  text-align: left;
  font-weight: 400;
  background: #fff;
  width: 43%;
}
.pl-step{
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  color: var(--primary);
  margin: 0 0 4px;
}
.pl-step .n{
  font-family: var(--font-en);
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: var(--primary);
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  align-self: center;
}
.pl-step-d{
  font-size: 16px;
  line-height: 1.85;
  color: #4a5261;
  margin: 0;
}

.pl-scope tbody td{ text-align: center; }
.pl-mark{
  font-size: 26px;
  line-height: 1;
  display: inline-block;
}
.pl-mark.m-light   { color: var(--pl-light); }
.pl-mark.m-standard{ color: var(--pl-standard); }
.pl-mark.m-premium { color: var(--pl-premium-mark); }
.pl-mark.m-off     { color: var(--pl-off); }
/* 丸だけで意味を持たせない。読み上げと、色が見えない場合の保険 */
.pl-mark-t{
  display: block;
  font-size: 16px;
  margin-top: 6px;
  color: #4a5261;
}

/* ==========================================================
   3. プランごとの中身の表
   ========================================================== */
.pl-detail{ margin: 0 0 40px; }
.pl-detail:last-child{ margin-bottom: 0; }

.pl-detail-head{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  padding: 14px 18px;
  color: #fff;
}
.pl-detail.d-light   .pl-detail-head{ background: var(--pl-light); }
.pl-detail.d-standard .pl-detail-head{ background: var(--pl-standard); }
.pl-detail.d-premium .pl-detail-head{ background: var(--pl-premium-ink); }
.pl-detail-head .n{ font-size: 20px; font-weight: 700; }
.pl-detail-head .s{ font-size: 16px; font-weight: 400; }
.pl-detail-head .p{
  margin-left: auto;
  font-family: var(--font-en);
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pl-detail-head .p span{ font-family: var(--font-ja); font-size: 16px; font-weight: 700; }
/* そのプランに全部で何項目あるか。
   「ライトはどこまでやってくれるのか」がここで分かるようにする。 */
.pl-cnt{
  margin-left: 14px;
  padding: 3px 11px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.5);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}
@media (max-width: 899px){
  .pl-cnt{ margin-left: 10px; font-size: 13px; padding: 2px 9px; }
}

/* 制作費の割引 */
.pl-discount{
  margin: 26px 0 0;
  padding: 18px 22px;
  background: var(--light-gray);
  border-left: 4px solid var(--accent-warm);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.8;
  color: var(--dark);
}

/* ==========================================================
   899px 以下：中身の表をカードに積む
   data-h を td に付けておかないと見出しが空欄になる
   ========================================================== */
@media (max-width: 899px){
  .pl-cards{ grid-template-columns: 1fr; gap: 26px; }
  .pl-detail-head .p{ margin-left: 0; width: 100%; }
}

@media (max-width: 600px){
  .pl-card{ padding: 26px 18px 22px; }
  .pl-price{ font-size: 34px; }
  .pl-scope th,
  .pl-scope td{ padding: 14px 12px; }
}

/* 図を横に回り込ませていた頃の指定は、下の「画像が主役のカード」に
   全部置きかわったので消した（2026-09-02）。
   .pl-fig と .pl-fig-z の見た目は、そちらのブロックにまとめてある。 */

.pl-sr{
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 動きは既存の .lp-reveal に任せる。ここでは足さない */
@media (prefers-reduced-motion: reduce){
  .pl-card{ transition: none; }
}

/* ==========================================================
   案A：899px以下は「プランを1つ選ぶ」形にする
   （2026-09-02 白倉決定。375pxで実測した結果からの作り直し）

   直す前、375pxで測った値
     料金セクション全体          8,377px（画面10.7枚ぶん）
     どこまで持つかの対応表      幅640pxのうち305px（48%）が画面の外
     プランごとの中身の3表       4,808px（画面6.2枚ぶん）
     「回数と中身」という見出し  23回くり返し

   直し方
     899px以下  タブで1プランだけ出す。対応表は消し、
                選んだプランの4段バッジに置きかえる。
                項目は「項目名 → 中身」の1かたまり。表の形は使わない。
     900px以上  タブは消え、3プランとも並ぶ。対応表も出る。
                つまりパソコンの見た目はこれまでどおり。変えていない。

   切りかえはラジオとCSSだけ。JSは使わない。
   JSが止まっても中身は消えない（900px以上の指定がそのまま生きる）。
   ========================================================== */

/* ラジオ本体。画面からは消すが display:none にはしない。
   消すとキーボードで選べなくなり、読み上げからも消える。 */
.pl-vh{
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pl-tabs{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 0 0 22px;
}
.pl-tab{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 56px;             /* 指で押せる高さ。44pxが下限 */
  padding: 14px 4px;
  white-space: nowrap;
  border: 2px solid var(--neutral);
  background: #fff;
  color: #4a5261;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  cursor: pointer;
}
/* タブに金額は入れない。
   すぐ下のプラン見出しと、上のカード3枚で同じ数字がもう2回出る。
   375pxで3列に並べると「50,000円/」「月」と折り返して読めなくなる。 */

/* 選ばれているタブ。白文字が乗るので、地の色は
   4.5:1 を満たす側を使う。--accent-warm は白地で2.97:1しかないので
   そのままでは使えない。66%まで暗くした ink を敷く。 */
#pl-r-light:checked    ~ .pl-tabs .t-light{    background: var(--pl-light);       border-color: var(--pl-light);       color: #fff; }
#pl-r-standard:checked ~ .pl-tabs .t-standard{ background: var(--pl-standard);    border-color: var(--pl-standard);    color: #fff; }
#pl-r-premium:checked  ~ .pl-tabs .t-premium{  background: var(--pl-premium-ink); border-color: var(--pl-premium-ink); color: #fff; }

/* キーボードで選んでいる場所を見せる。
   ラジオは画面の外にいるので、枠は札のほうに出す。 */
#pl-r-light:focus-visible    ~ .pl-tabs .t-light,
#pl-r-standard:focus-visible ~ .pl-tabs .t-standard,
#pl-r-premium:focus-visible  ~ .pl-tabs .t-premium{
  outline: 3px solid var(--pl-premium-mark);
  outline-offset: 2px;
}

/* 受注までの4段バッジ。899px以下だけ。
   丸と横棒ではなく字で書く。色が見えない人にも同じ意味が届く。 */
.pl-steps{ list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.pl-stepli{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--neutral);
  background: var(--light-gray);
}
.pl-stepli .n{
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-en);
  font-size: 16px; font-weight: 700; color: #fff;
  background: var(--primary);
}
.pl-stepli .t{
  flex: 1;
  font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--primary);
}
.pl-stepli .t em{
  display: block;
  font-style: normal; font-weight: 400; font-size: 16px;
  line-height: 1.75; color: #4a5261; margin-top: 2px;
}
.pl-stepli .m{ flex: 0 0 auto; font-size: 16px; font-weight: 700; }
.pl-stepli.is-on .m{ color: var(--pl-light); }
.pl-stepli.is-off{ background: #fff; }
.pl-stepli.is-off .n{ background: var(--pl-off); }
.pl-stepli.is-off .t,
.pl-stepli.is-off .t em,
.pl-stepli.is-off .m{ color: var(--pl-off); }

@media (max-width: 899px){
  /* 対応表のかたまりは丸ごと消す。段バッジが同じことを言う */
  .pl-scopeblock{ display: none; }

  /* 選ばれていないプランは出さない */
  .pl-panel{ display: none; }
  #pl-r-light:checked    ~ .pl-panels .p-light,
  #pl-r-standard:checked ~ .pl-panels .p-standard,
  #pl-r-premium:checked  ~ .pl-panels .p-premium{ display: block; }
}

@media (min-width: 900px){
  /* パソコンはこれまでどおり。タブと段バッジは出さない */
  .pl-tabs{ display: none; }
  .pl-steps{ display: none; }
  .pl-panel{ display: block; }
  /* .pl-detail が panel の唯一の子になったので :last-child が全部に当たる。
     プラン間のすき間は panel 側で持つ。 */
  .pl-panel + .pl-panel{ margin-top: 40px; }
  .pl-detail{ margin-bottom: 0; }
}

/* 899px以下だと1プランしか見えないので、
   「ライトの全内容」と書いてあっても、その中身がここにない。
   押すとそのプランへ切りかわる札を、値のうしろに置く。
   label なので JS は要らない。900px以上では3つとも並ぶので出さない。 */
.pl-jump{
  display: inline-block;
  margin: 8px 0 0;
  padding: 9px 14px;
  border: 1.5px solid var(--pl-standard);
  color: var(--pl-standard);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  cursor: pointer;
}
.pl-jump:hover{ background: var(--pl-standard); color: #fff; }
@media (min-width: 900px){
  .pl-jump{ display: none; }
}

/* ==========================================================
   料金ページへの導線（2026-09-02）
   トップと service にはカード3枚だけ置き、
   どこまで持つかの表・プランごとの中身・制作料金は /price/ にまとめた。
   金額の一次情報を1ページに集めるため。
   ========================================================== */
.pl-more{ margin: 30px 0 0; text-align: center; }
.pl-more-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;              /* 指で押せる高さ */
  padding: 16px 34px;
  background: var(--primary);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
}
.pl-more-btn:hover,
.pl-more-btn:focus-visible{ background: var(--pl-premium-ink); color: #fff; }
.pl-more-note{
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.85;
  color: #4a5261;
}
@media (max-width: 600px){
  .pl-more-btn{ width: 100%; padding: 16px 18px; }
}

/* ==========================================================
   プランカードを開いて中身を見せる（2026-09-02 白倉指示）

   既定は閉じた状態。タップで開く。
   details/summary なので JS は使わない。
   閉じていても中身はHTMLに載っているので、検索エンジンにも読まれる。

   ここに出すのは項目の名前だけ。回数と中身（月2件・週1回など）は
   /price/ にしか書かない。2箇所に書くと必ずどちらかが取り残される。
   ========================================================== */
.pl-open{
  margin: 16px 0 0;
  border-top: 1px solid var(--neutral);
}
.pl-open summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 52px;              /* 指で押せる高さ。44pxが下限 */
  padding: 14px 2px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  cursor: pointer;
  list-style: none;              /* Firefox の三角を消す */
}
.pl-open summary::-webkit-details-marker{ display: none; }
.is-light   .pl-open summary{ color: var(--pl-light); }
.is-standard .pl-open summary{ color: var(--pl-standard); }
.is-premium .pl-open summary{ color: var(--pl-premium-ink); }

/* 開閉の向きを示す山形。CSSで描く（アイコン読み込みに依存させない） */
.pl-open summary::after{
  content: "";
  flex: 0 0 auto;
  width: 9px; height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px,-2px);
  transition: transform .2s ease;
}
.pl-open[open] summary::after{ transform: rotate(-135deg) translate(-2px,-2px); }
.pl-open summary:focus-visible{ outline: 3px solid var(--pl-premium-mark); outline-offset: 2px; }

.pl-open-in{ padding: 2px 0 6px; }
.pl-open-h{
  margin: 12px 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--dark);
}
.pl-open-h:first-child{ margin-top: 4px; }

/* 4つの段。丸ではなく字で書く（色が見えなくても意味が届く） */
.pl-open-steps{ list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pl-open-steps li{
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  background: #fff;
  border: 1px solid var(--neutral);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--primary);
}
.pl-open-steps b{
  flex: 0 0 auto;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-en);
  font-size: 16px; font-weight: 700; color: #fff;
  background: var(--primary);
}
.pl-open-steps em{
  margin-left: auto;
  font-style: normal;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
}
.pl-open-steps .is-on em{ color: var(--pl-light); }
.pl-open-steps .is-off{ color: var(--pl-off); }
.pl-open-steps .is-off b{ background: var(--pl-off); }
.pl-open-steps .is-off em{ color: var(--pl-off); }

.pl-open-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.pl-open-list li{
  position: relative;
  padding-left: 20px;
  font-size: 16px;
  line-height: 1.75;
  color: #333b47;
}
.pl-open-list li::before{
  content: "";
  position: absolute;
  left: 3px; top: .62em;
  width: 8px; height: 8px;
  background: var(--pl-light);
}
.is-standard .pl-open-list li::before{ background: var(--pl-standard); }
.is-premium .pl-open-list li::before{ background: var(--pl-premium-mark); }

.pl-open-more{
  display: inline-block;
  margin: 16px 0 0;
  padding: 10px 2px;
  font-size: 16px;
  font-weight: 700;
  color: var(--pl-premium-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 開くとカードの高さが変わる。3枚を同じ高さに引き伸ばすのをやめ、
   それぞれの中身ぶんの高さにする。閉じているときの差は小さい。

   これが要るのは、カードの中に details（プランの中身を見る）がある
   トップと /service/ だけ。/price/ のカードは中に details を持たないので、
   3枚を同じ高さに伸ばす（2026-09-04 白倉指示）。
   プレミアムだけ説明文が2行で、下の罫線と「最低6ヶ月」の行が上にずれていた。
   .pl-desc は flex:1 なので、伸ばせば .pl-term が下端にそろう。 */
@media (min-width: 900px){
  .pl-cards{ align-items: start; }
  .pl-cards.pl-flat{ align-items: stretch; }
}
@media (prefers-reduced-motion: reduce){
  .pl-open summary::after{ transition: none; }
}

/* ==========================================================
   図をこのページで開く（2026-09-02 案2・白倉決定）

   演出は「ふつう」。
     暗転が150msで入り、そのあと図が96%→100%に200msで開く。
     合計0.35秒。待っている感じは出ない。閉じるときは逆再生。
     動きを嫌う設定（prefers-reduced-motion）では全部止める。

   図と説明の元は /service/before-after/ にしか置かない。
   ここはその中身を借りて表示するだけ。文章は複製していない。
   ========================================================== */
.plb{
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(9,18,32,.86);
  opacity: 0;
  transition: opacity .15s ease;
}
.plb.is-in{ opacity: 1; }

.plb-box{
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 660px;
  max-height: calc(100vh - 36px);
  background: #fff;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  /* 暗転が入りきってから図が開く。0.1秒の遅れがその「間」 */
  opacity: 0;
  transform: scale(.96);
  transition: opacity .2s ease .1s, transform .2s ease .1s;
}
.plb.is-in .plb-box{ opacity: 1; transform: none; }

.plb-img{ background: var(--light-gray); }
.plb-img img{
  display: block;
  margin: 0 auto;
  width: auto;
  max-width: 100%;
  max-height: 58vh;
  height: auto;
}

.plb-txt{ padding: 18px 20px 4px; }
.plb-q{ margin: 0; font-size: 19px; font-weight: 700; line-height: 1.55; color: var(--primary); }
.plb-a{ margin: 8px 0 0; font-size: 16px; line-height: 1.9; color: #333b47; }
.plb-w{ margin: 6px 0 0; font-size: 16px; line-height: 1.9; color: #4a5261; }

.plb-bar{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px 18px;
  margin-top: auto;
}
.plb-bar button{
  min-height: 46px;              /* 指で押せる高さ */
  padding: 10px 16px;
  border: 1.5px solid var(--neutral);
  background: #fff;
  color: var(--primary);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.plb-bar button:hover,
.plb-bar button:focus-visible{ border-color: var(--primary); background: var(--light-gray); }
.plb-bar .plb-n{
  font-family: var(--font-en);
  font-size: 16px;
  font-weight: 700;
  color: #4a5261;
  font-variant-numeric: tabular-nums;
  min-width: 62px;
  text-align: center;
}
.plb-bar .plb-close{
  margin-left: auto;
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}
.plb-bar .plb-close:hover,
.plb-bar .plb-close:focus-visible{ background: var(--pl-premium-ink); border-color: var(--pl-premium-ink); color: #fff; }
.plb button:focus-visible{ outline: 3px solid var(--pl-premium-mark); outline-offset: 2px; }

@media (max-width: 480px){
  .plb{ padding: 10px; }
  /* 狭い画面は高さで止めると図が小さくなる（375pxで270px幅までしぼんでいた）。
     幅いっぱいに出して、はみ出したぶんは箱の中で縦にスクロールさせる。 */
  .plb-img img{ width: 100%; max-height: none; }
  .plb-txt{ padding: 15px 16px 2px; }
  .plb-bar{ padding: 12px 16px 15px; gap: 8px; }
  .plb-bar button{ padding: 10px 12px; }
}

@media (prefers-reduced-motion: reduce){
  .plb, .plb-box{ transition: none; }
  .plb-box{ opacity: 1; transform: none; }
}
/* -------------------------------------------------------------------
   縦の一覧にした（2026-09-03 白倉指示）

   横に流すのをやめた理由。図の中の説明文は元が13pxで、
   カード264pxまで縮めると画面上は約3.4px相当になっていた。
   すぐ下の詳細テキスト14.5pxの4分の1以下で、読める大きさではない。
   図に説明させるのをやめて、文字に説明させる。図は押して開く根拠にまわす。

   縦に積むと track.scrollWidth が幅に収まるので、JSは自分で .is-still に
   倒れる。複製も自動送りも矢印も走らない。JSは1行も触っていない。
   ------------------------------------------------------------------- */
.plc-track{
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 auto;
  padding: 0;
  max-width: 900px;
  list-style: none;
  border-top: 1px solid var(--neutral);
}
/* 599px以下は縦積みのまま。横に伸びないように押さえておく */
@media (max-width: 599px){
  .is-live .plc-track,
  .is-still .plc-track{ width: auto; flex-wrap: nowrap; justify-content: flex-start; }
  .is-live .plc{ cursor: auto; }
}
/* 図の無い項目（ライトの全内容など）は、右の欄ごと空けない。
   ただし動画を持つカードは右の欄を使うので、ここから外す。
   外し忘れると grid-column:2 が暗黙の列を作り、
   動画が中身なりの幅（406px）まで広がって行が3倍に伸びる。 */
.plc-card:not(:has(.pl-fig)):not(:has(.plc-vid)){ grid-template-columns: 1fr; }
@media (max-width: 599px){
  /* ===== スマホは畳む（2026-09-03 白倉指示・案B） =====

     375pxで測ると、図が横幅の27%を取ったまま、図の中の説明文は
     1.2px相当までつぶれていた。文字に残るのは226pxで、
     見出しが3行に折れて1画面に3件しか入らない。

     そこで、閉じているあいだは「名前・実施量・ベネフィット」だけ出す。
     押した行だけ、毎月やることと図が開く。
     14項目が2画面で見渡せるようになる。

     JSは使わない。プランのタブと同じ、隠したチェックボックスと
     label の組み合わせでやる。読み上げ用の文言は .pl-vh に入れてある。 */
  .plc-card{ grid-template-columns: 1fr; column-gap: 0; padding: 15px 2px; }

  /* 閉じているあいだは出さない */
  .plc-sw:not(:checked) ~ .plc-tx,
  .plc-sw:not(:checked) ~ .pl-fig,
  .plc-sw:not(:checked) ~ .plc-vfig,
  .plc-sw:not(:checked) ~ .plc-vid{ display: none; }

  /* 図と動画の置き方は、.pl-fig の定義より後ろでないと勝てないので
     このファイルの下のほう（.pl-fig img のあたり）にまとめてある */
}
/* 何番目のカードか（2026-09-03 白倉指示）

   帯が流れていると、いま何枚目を見ているのか、
   あと何枚あるのかが分からない。番号を左上に置く。
   総数は見出しの右に「全5項目」と出してある。
   数はリストの順序（ol）が持っているので、この札は読み上げない。 */
.plc-no{
  /* 図の上には乗せない。はじめは左上に置いたが、図が持っている
     見出し（紺の帯の文字）を隠してしまった。名前の横に出す。 */
  flex: 0 0 auto;
  min-width: 22px; height: 20px;
  margin-top: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0 5px;
  background: var(--primary);
  color: #fff;
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.plc-count{
  margin-left: auto;
  align-self: center;
  flex: 0 0 auto;
  padding: 3px 10px;
  background: var(--light-gray);
  border: 1px solid var(--neutral);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  color: #4a5261;
  white-space: nowrap;
}
@media (max-width: 599px){
  .plc-count{ font-size: 13px; padding: 2px 8px; }
}
.plc-tx .pl-sub{
  display: block;
  margin-top: 6px;
  color: #4a5261;
} にすると、
   上のスマホ用ブロックより後ろにあるぶん後勝ちして、
   スマホでも消えてしまう（指で開けなくなる）。 */
@media (min-width: 600px){
  .plc-hit{ display: none; }
}

/* 見本の動画（AI施工動画）。縦9:16なので、幅を抑えて置く */
/* 見本の動画（2026-09-03 白倉指示で作り直し）

   はじめは図の枠（右の列）にそのまま動画を入れた。ところが動画は
   縦9:16で206pxあり、図（4:3で87px）の2.4倍の背丈がある。
   右の列は3行ぶんをまたぐので、その206pxが3行に配られて、
   名前とベネフィットと詳細のあいだが大きく空いてしまった。

   なので、ふだんは他の図とまったく同じ116×87のサムネを出す。
   押したときだけ、下に本体が開く。行が伸びるのは開いたときだけ。 */
.plc-vfig{ cursor: pointer; }
.plc-vfig img{ object-position: center 30%; }
.plc-play{
  position: absolute;
  left: 50%; top: 50%;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  background: rgba(15,35,66,.82);
}
.plc-play::before{
  content: "";
  position: absolute;
  left: 13px; top: 10px;
  border-left: 11px solid #fff;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}
.plc-vfig:hover .plc-play{ background: var(--pl-premium-mark); }
.plc-vsw:focus-visible ~ .plc-vfig{
  outline: 3px solid var(--pl-premium-mark);
  outline-offset: -3px;
}

.plc-vid{
  display: block;
  width: 100%;
  max-width: 190px;
  aspect-ratio: 9 / 16;
  margin: 8px 0 0;
  background: #000;
  border: 1px solid var(--neutral);
  grid-column: 1;
  grid-row: 4;
}
/* 閉じているあいだは出さない。開いたらサムネと入れ替わる。 */
/* 左右2枚組みにしてから、動画は .pm-body の中に入った。
   スイッチ（.plc-vsw）とは兄弟でなくなったので、間に .pm-body をはさむ。
   直さないと、サムネと動画が同時に出て本体が462px高くなる。 */
.plc-vsw:not(:checked) ~ .pm-body .plc-vid{ display: none; }
.plc-vsw:checked ~ .pm-body .plc-vfig{ display: none; }
.plc-btn.prev::before{ transform: translateX(2px) rotate(-135deg); }
.plc-btn.next::before{ transform: translateX(-2px) rotate(45deg); }
.plc-btn.prev{ left: -8px; }
.plc-btn.next{ right: -8px; }
@media (max-width: 599px){
  .plc-btn.prev{ left: -4px; }
  .plc-btn.next{ right: -4px; }
}

/* 項目の絵（2026-09-03 白倉指示）

   23項目が文字だけで並ぶと、どれも同じ見た目になって探せない。
   線の太さと大きさをそろえた24pxの線画を1つずつ付ける。
   絵文字もアイコン用フォントも使わない。SVGを直に書いてある。 */
/* 絵は既製のものを使う。自分で描き起こさない。
     Lucide      (ISC License)  … 機能アイコン20種
     Simple Icons(CC0 1.0)      … X / Instagram / LINE
   どちらも線幅・座標を変えずにそのまま置いてある。

   色は新しく足していない。このページで既に使っている
   プランの色をそのまま丸の下地にして、
   「その項目がどのプランから付くか」を色で言わせている。
     緑 --secondary    ライトの範囲（見つかる・保つ）
     紺 --primary      スタンダードで加わる
     橙 --accent-warm  プレミアムで加わる
     灰 --light-gray   全プラン共通
   ブランドマークだけは各社の公式色。X は黒、Instagram は公式の
   グラデーション、LINE は #06C755。Google のロゴは使っていない
   （代理店が自社の宣伝に使うことを Google が禁じているため）。 */
.pl-ic{
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pl-ic svg{ width: 19px; height: 19px; display: block; }

.ic-l{ color: var(--secondary); background: #e2eeea; }
.ic-l{ background: color-mix(in srgb, var(--secondary) 13%, #fff); }
.ic-s{ color: var(--primary);   background: #e3e7eb; }
.ic-s{ background: color-mix(in srgb, var(--primary) 12%, #fff); }
.ic-p{ color: var(--pl-premium-ink); background: #fbe9de; }
.ic-p{ background: color-mix(in srgb, var(--accent-warm) 16%, #fff); }
.ic-c{ color: #4a5261; background: var(--light-gray); }

/* 他社のマークは公式色のまま。丸ではなく白地の小判に2つ並べる */
.ic-b{
  width: auto; min-width: 34px;
  padding: 0 7px;
  gap: 5px;
  border-radius: 17px;
  background: #fff;
  border: 1px solid var(--neutral);
  color: var(--primary);
}
.ic-b svg{ width: 15px; height: 15px; }

/* 実施量の札（2026-09-03 白倉指示）

   「月4本」「週1回」が本文の中に埋もれていて、
   いくらで何回やるのかが読み取れなかった。名前の右に抜き出す。 */
/* 実施量の札（2026-09-03 白倉指示で作り直し）

   紺の塗りだと、見出しも項目名も紺なので前に出なかった。
   ここは「いくらで何回やるか」で、いちばん先に目に入ってほしい。
   黄色の地に紺文字。左右の端をぎざぎざに切って、値札に見せる。

   ぎざぎざは clip-path で作っている。効かないブラウザでは
   ただの四角い黄色い札になるだけで、読めなくなることはない。 */
.plc-qty{
  flex: 0 0 auto;
  padding: 5px 15px;
  background: var(--pl-pop);
  color: var(--pl-pop-ink);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .01em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  -webkit-clip-path: polygon(
    0% 50%, 6px 0%, 6px 18%, 100% 18%, 100% 0%,
    calc(100% - 6px) 50%, 100% 100%, 100% 82%, 6px 82%, 6px 100%);
  clip-path: polygon(
    0% 50%, 6px 0%, 6px 18%, 100% 18%, 100% 0%,
    calc(100% - 6px) 50%, 100% 100%, 100% 82%, 6px 82%, 6px 100%);
}
/* 御社に何が起きるか、を一語で（2026-09-03 白倉指示）

   「週1回 投稿」は、やる量。「受注増」は、それで何が起きるか。
   別のことを言っているので、見た目も分ける。
     実施量 … ネイビーの塗り
     テーマ … 白地に橙の枠線
   色は足していない。--accent-warm の濃いほう（文字用）を使っている。 */
.plc-th{
  flex: 0 0 auto;
  padding: 3px 9px;
  border: 1.5px solid var(--pl-premium-ink);
  color: var(--pl-premium-ink);
  background: #fff;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .02em;
  white-space: nowrap;
}
@media (max-width: 599px){
  .plc-th{ font-size: 12.5px; padding: 2px 8px; }
}

/* 本文に残っている回数も、そこだけ濃くする */
.plc-em{
  font-weight: 700;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
  /* 太字だけだと地の文に沈む。下に線を引いて浮かせる。
     padding で囲うと日本語の字間が空いて文が途切れて見えたので、
     場所を取らないマーカー（背景のグラデーション）にしてある。 */
  background: linear-gradient(transparent 58%, #ccd6e4 58%);
  background: linear-gradient(transparent 58%, color-mix(in srgb, var(--primary) 22%, #fff) 58%);
}
@media (max-width: 599px){
  .pl-ic{ width: 30px; height: 30px; }
  .pl-ic svg{ width: 17px; height: 17px; }
  .ic-b{ min-width: 30px; padding: 0 6px; border-radius: 15px; }
  .ic-b svg{ width: 14px; height: 14px; }
  .plc-qty{ font-size: 14px; padding: 3px 9px; }
}

/* ---- 図＝カードの主役 ---- */
/* 図は右端のサムネ。押すと今までどおり大きく開く。
   帯の見出しと項目名で見出しが2本立っていたので、
   帯を外した高さで切る（object-position で下にずらす）。 */
.pl-fig{
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: start;
  position: relative;
  display: block;
  width: 116px;
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--neutral);
  background: var(--light-gray);
  text-decoration: none;
  cursor: pointer;
}
@media (max-width: 599px){
  /* 開いた行の図は、横いっぱいに大きく出す。
     92pxのままだと図の中の説明文が1.2px相当で、置く意味がなかった。
     ここは .pl-fig の定義より後ろに置く（前だと後勝ちで潰れる）。 */
  .pl-fig{
    grid-column: 1;
    grid-row: 4;
    width: 100%;
    /* 元画像と同じ 1000x1333。16:7の帯にしていたときは上下が切れて、
       紺の見出しと「いま」側が枠の外に出ていた。 */
    aspect-ratio: 3 / 4;
    margin-top: 4px;
  }
  .plc-vid{ grid-row: 5; }   /* スマホは図が4行目に来るので、その下 */
}
/* カードに図は1枚だけ。2枚目以降は出さない。
   2026-09-03、図を差し替えるときに同じ図を2回入れてしまい、
   カードの中で画像が縦に2つ並んだ。HTMLは直したが、
   もう一度同じことが起きても見た目が壊れないように止めておく。 */
.plc-card .pl-fig ~ .pl-fig{ display: none; }
.pl-fig img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 上端から切る。はじめは帯を外して真ん中（30%）で切ったが、
     クチコミとAI検索の図は中ほどが白く、サムネが空箱に見えた。
     実測：平均輝度242・標準偏差36（＝のっぺり）。上端からなら221／71。
     帯は116px幅では文字が5px相当で読めないので、見出しの二重にはならず、
     どの図にも共通の紺の帯が付いて、一覧の目印になる。 */
  object-position: center top;
  border: 0;
  transition: transform .3s ease;
}

/* 拡大の合図（2026-09-02 白倉指示で文字を外した）

   はじめは右下に「大きく見る」と黒い札を置いていたが、
   図の下半分（いま／3ヶ月後の説明）にかぶって邪魔だった。
   ふだんは何も乗せない。図がそのまま見える。

   マウスがある画面 … 重ねたときだけ、うっすら暗くして虫めがねを出す
   触る画面         … ホバーが無いので、小さい印だけ右下に出す
                      （押せることが分からないと、誰も押さない）
   リンクの名前は読み上げ用に .pl-sr で残してある。 */
.pl-fig-z{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15,35,66,.42);
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
.pl-fig-z::before{
  /* 虫めがね。絵文字は使わずCSSで描く */
  content: "";
  width: 16px; height: 16px;
  border: 2.5px solid #fff;
  border-radius: 50%;
  box-shadow: 6px 6px 0 -1px #fff;
  transform: translate(-2px,-2px) rotate(-45deg);
}
@media (hover: hover){
  .pl-fig:hover .pl-fig-z{ opacity: 1; }
}
.pl-fig:focus-visible .pl-fig-z{ opacity: 1; }

@media (hover: none){
  /* 触る画面。図にはかぶせず、角に小さく出す */
  .pl-fig-z{
    inset: auto 6px 6px auto;
    width: 30px; height: 30px;
    background: rgba(15,35,66,.82);
    opacity: 1;
  }
  .pl-fig-z::before{
    width: 11px; height: 11px;
    border-width: 2px;
    box-shadow: 4px 4px 0 -1px #fff;
  }
}

.pl-fig:focus-visible{ outline: 3px solid var(--pl-premium-mark); outline-offset: -3px; }

@media (prefers-reduced-motion: reduce){
  .pl-fig img{ transition: none; }
}

/* ==========================================================
   カテゴリの見出し（2026-09-02 白倉指示）

   区切りは「受注までの4つの段」。対応表・カードのバッジ・
   図のページの章と同じものを使う。ここだけ別の分け方にすると、
   同じサービスが2通りに見えてしまう。
   ========================================================== */
.pm-dan{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 4px 10px;
  margin: 0 0 14px;
  padding: 0 0 10px;
  border-bottom: 2px solid var(--neutral);
  text-align: left;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--primary);
}
/* 段ごとに色を変える（2026-09-03 白倉指示・案2）

   4つの段が全部おなじ紺だったので、区切っても同じに見えていた。
   番号のバッジ・段名・見出しの下線を、段の色でそろえる。
   スクロールしていて「いま何の段か」が色で分かる。

   色は足していない。緑＝--secondary、紺＝--primary、
   橙2つは --accent-warm を黒で締めて作る。白抜きの文字が乗るので、
   白との比を4.5:1以上にしてある（16pxの太字は大きい文字に入らない）。
     3 作る・取る  約5.6:1
     4 増やす      約8.6:1
   色だけに意味を持たせない。番号と段名は文字でそのまま残す。 */
.pm-dan{ --stg: var(--primary); }
.pm-dan.g1{ --stg: var(--secondary); }
.pm-dan.g2{ --stg: var(--primary); }
.pm-dan.g3{ --stg: #a75521; --stg: color-mix(in srgb, var(--accent-warm) 72%, #000); }
.pm-dan.g4{ --stg: #743b17; --stg: color-mix(in srgb, var(--accent-warm) 50%, #000); }

.pm-dan.g1, .pm-dan.g2, .pm-dan.g3, .pm-dan.g4{ border-bottom-color: var(--stg); }
.pm-dan.g1 .pl-grp-n, .pm-dan.g2 .pl-grp-n,
.pm-dan.g3 .pl-grp-n, .pm-dan.g4 .pl-grp-n{ background: var(--stg); }
.pm-dan.g1 .pl-grp-t, .pm-dan.g2 .pl-grp-t,
.pm-dan.g3 .pl-grp-t, .pm-dan.g4 .pl-grp-t{ color: var(--stg); }

.pl-grp-n{
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  align-self: center;
  font-family: var(--font-en);
  font-size: 16px; font-weight: 700; color: #fff;
  background: var(--primary);
}
.pl-grp-t{ flex: 0 1 auto; }
/* 並び順を決めておく。スマホでは説明文が1行まるごと使うので、
   指定しないと「全5項目」だけが3行目に取り残される。
   番号 → 段名 → 全N項目 ／ 改行して 説明文、の順にする。 */
.pl-grp-n{ order: 1; }
.pl-grp-t{ order: 2; }
.pl-grp-d{ order: 4; }
.plc-count{ order: 5; margin-left: auto; }
.pl-grp-d{
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: #4a5261;
}
@media (max-width: 599px){
  .pm-dan{ font-size: 17px; padding-bottom: 8px; }
  .pl-grp-d{ flex-basis: 100%; }
  /* スマホは説明文が1行まるごと使う。札を説明文より先に置いて、
     段名と同じ行の右端で止める。あとに置くと3行目に落ちる。 */
  .plc-count{ order: 3; }
}
/* 図は切り取らずに丸ごと出す（2026-09-04 白倉指摘）

   いったん「右半分（3ヶ月後）だけを2倍で出す」案3を入れたが、外した。
   441pxの枠に右半分を入れると、家の絵だけ・机の木目だけが大写しになり、
   何の図なのか分からなくなった。図は「紺の見出し＋いま＋3ヶ月後」の
   3点が揃って初めて意味が出る。一覧の大きさで効くのは中の文字ではなく、
   左が灰色・右が色つき、という全体の形のほう。
   中の文字を読ませるのは、押して開いたときの役目にする。 */
.pl-fig img{
  position: static;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transform: none;
}

/* 動画カードのサムネは2枚組ではない（2026-09-04 修正）

   .plc-vfig は .pl-fig も持っているので、上の「いま⇄3ヶ月後」の
   指定がポスター画像にも掛かっていた。ポスターは9:16の1枚絵なので、
   右半分だけを出すと絵が崩れる。ここだけ元の切り取りに戻す。 */
.plc-vfig img{
  position: static;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transform: none;
}

/* ===================================================================
   カード形にする（2026-09-04 白倉指示）

   1項目1行の一覧から、1項目1枚のカードに戻す。図が上、名前と
   ベネフィットと中身が下。キャンバスで見せた形。

   前に横並びをやめた理由は「図の中の文字が3.4px相当までつぶれる」
   だった。そこは案3で変わっている。いまは2枚組の右半分だけを出すので、
   同じ枠でも絵は2倍。さらに2列組み（1枚441px）にしたので、
   パネルの原寸500pxに対して0.88倍。図の中の13pxの文字が11px相当まで
   戻る。3列にすると288pxで7.5px相当まで落ちるので、2列で止める。

   スマホ（599px以下）は畳んだままにする。あちらは14項目を2画面で
   見渡せることのほうが効くので、カードには戻さない。
   =================================================================== */
@media (min-width: 600px){
  /* 段ごとに1行の帯にする（2026-09-04 白倉指示・案2）

     図を丸ごと出したら、料金のかたまりが9,860px＝約11画面になった。
     縦に積むのをやめて、段ごとに横1行へ。縦はカード1枚ぶんで止まる。

     自動では流さない。矢印とスワイプだけで動かす。ここは読ませる
     カードなので、読んでいる途中で勝手に動くと邪魔になる。
     （「お客様の声」は読み流す文章なので、あちらは流したままでよい） */
  .plc-track{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: max-content;
    /* 縦積みの頃に付けていた 900px の上限を外す。
       残したままだと帯が900pxで切れて、右に80pxの死に幅ができる。
       送り幅の計算（枠の幅 − 帯の幅）もそこでずれる。 */
    max-width: none;
    gap: 18px;
    border-top: 0;
    align-items: stretch;
  }
  /* 入りきる段（1〜3項目）は帯にしないで、そのまま中央に置く */
  .is-still .plc-track{ width: auto; max-width: none; justify-content: center; flex-wrap: wrap; }
  .is-live .plc{ cursor: grab; }
  .is-live .plc:active{ cursor: grabbing; }
  .plc-card{ flex: 0 0 288px; width: 288px; }

  .plc-card{
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    column-gap: 0;
    row-gap: 0;
    padding: 0 0 15px;
    border: 1px solid var(--neutral);
    border-bottom: 1px solid var(--neutral);
    overflow: hidden;
  }
  /* 図の無いカードは、そろえた高さの中で中身を上下の真ん中に置く */
  .plc-card:not(:has(.pl-fig)){ justify-content: center; padding: 20px 0; }

  /* 図をカードの頭に持ち上げる。読み上げの順（名前→図→中身）は変えない */
  .plc-card .pl-fig{
    order: -1;
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    /* 元画像と同じ 1000x1333。枠をここに合わせると1ドットも切れない。
       4:3にしていたときは上下が切れて、紺の見出しと「いま」側が
       枠の外に出ていた。 */
    aspect-ratio: 3 / 4;
    margin: 0 0 12px;
    border: 0;
    border-bottom: 1px solid var(--neutral);
  }
  .plc-card .plc-vid{
    grid-column: auto;
    grid-row: auto;
    max-width: 190px;
    margin: 10px 14px 0;
  }

  .plc-card .pl-nm{ grid-column: auto; grid-row: auto; padding: 0 14px; }
  .plc-card .plc-be{
    grid-column: auto; grid-row: auto;
    padding: 7px 14px 0;
    font-size: 17px;
    line-height: 1.65;
  }
  .plc-card .plc-tx{
    grid-column: auto; grid-row: auto;
    margin: 6px 0 0;
    padding: 0 14px;
  }
}
/* ===================================================================
   左に一覧、右に図（2026-09-04 白倉指示・案3）

   図を丸ごと出すと1枚634px。980pxの幅に3枚しか並ばず、15項目を
   一度に見せることと図を大きく見せることが両立しなかった。
   左に項目を全部並べ、右には選んだ1つだけを大きく出す。
   「何をしてくれるのか」と「どう変わるのか」が同じ画面に乗る。

   JSは使わない。プランのタブと同じ、隠したラジオと label の組み合わせ。
   ラジオ・ラベル・本体は .pm-row の中で兄弟なので、
   .pm-sw:checked ~ .pm-body だけで切り替わる。idごとの指定は要らない。

   .pm-row は display:contents にして、中の3つを .pm の升目に直接置く。
   ラベルは左の列に上から順、本体は右の列で全行にまたがる。
   =================================================================== */
.pm{ margin: 0; }
.pm-row{ display: block; }

/* 段の見出し。色は案2のまま（.pm-dan.g1〜g4） */
.pm-dan{ grid-column: 1; }

/* ---- 左の一覧の1行 ----
   升目で組む。左端に印の列を固定幅で置くので、
   名前の長さが変わっても〇は必ず縦にそろう。 */
.pm-lb{
  display: grid;
  grid-template-columns: 30px 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 9px;
  padding: 11px 10px;
  border-bottom: 1px solid var(--neutral);
  cursor: pointer;
  color: var(--dark);
}
.pm-lb .pl-ic{ grid-column: 1; margin: 0; }
.pm-lb .plc-no{ grid-column: 2; margin: 0; justify-self: start; }
.pm-nm{ grid-column: 3; font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--primary); }
.pm-lb .plc-qty{ grid-column: 4; margin: 0; justify-self: end; }
.pm-lb:hover{ background: var(--light-gray); }

/* 選ばれている行 */
.pm-sw:checked ~ .pm-lb{ background: var(--light-gray); }
.pm-sw:focus-visible ~ .pm-lb{ outline: 3px solid var(--pl-premium-mark); outline-offset: -3px; }
/* マウスで押したときは、だいだい色の枠を出さない（2026-09-04 白倉指示）。

   ラジオとチェックボックスは、マウスで押しても :focus-visible が当たる
   （矢印キーでも動かせる部品なので、ブラウザがそう決めている）。
   そのため、押した行に枠が残って「これは何？」になっていた。

   キーボードで動かしている間だけ出す。html の data-pointer は
   price/index.html の小さなスクリプトが付け外しする。
   JSが動かなければ data-pointer が付かない＝今までどおり枠が出るので、
   キーボードで操作する人が印を失うことはない。 */
html[data-pointer] .pm-sw:focus-visible ~ .pm-lb{ outline: none; }

/* ---- 右の本体 ---- */
.pm-body{ display: none; }
.pm-sw:checked ~ .pm-body{ display: block; }
.pm-body .pl-fig{
  position: relative;
  display: block;
  width: 100%;
  /* 元画像と同じ 1000x1333。1ドットも切らない */
  aspect-ratio: 3 / 4;
  /* 真ん中に置く（2026-09-04 白倉指示）。
     図は420pxで止めているが、すぐ下の「この図が言っていること」は
     ペインの幅いっぱい（606px）に広がる。margin:0 だと図だけ左に寄って、
     右に180pxの空きができていた。文字の帯の真ん中に図を合わせる。 */
  margin: 0 auto;
  border: 1px solid var(--neutral);
  overflow: hidden;
  background: var(--light-gray);
}

/* 16:10 の図（2026-09-04 白倉指示・案2）

   これから作る図は 1600x1000 の横長にする。3:4 の枠に入れると、
   紺の帯と「いま／3ヶ月後」の札だけが残って、中身が枠の外に出る。
   縦横比は画像に合わせる。

   幅を 420px で止めていたのは、3:4 だと丈が560pxになって
   左の一覧より高くなるためだった。16:10 は同じ幅で262pxしかないので
   止める必要がない。器いっぱい（606px前後）まで使う。
   そこまで使えば、図の中の34pxの文字が13px相当になって読める。
   これが横長にした理由そのものなので、ここで縮めると意味がなくなる。 */
.pl-fig.is-w16{ aspect-ratio: 16 / 10; }
.pm-body .pl-fig.is-w16{ aspect-ratio: 16 / 10; max-width: none; }
/* 16:9 の図。生成AIで作ると 16:9 で出てくることがある（2026-09-04 BA02）。
   縦横比が合っていないと object-fit:cover で下が切れるので、枠のほうを合わせる。
   これから自分で組む図は 1600x1000（16:10）のまま。 */
.pl-fig.is-w169{ aspect-ratio: 16 / 9; }
.pm-body .pl-fig.is-w169{ aspect-ratio: 16 / 9; max-width: none; }
.pm-txt{ padding: 14px 2px 0; }
.pm-be{
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--primary);
}
.pm-tx{
  margin: 7px 0 0;
  font-size: 16px;
  line-height: 1.85;
  color: #4a5261;
}
.pm-tx .pl-sub{ display: block; margin-top: 6px; color: #4a5261; }
.pm-body .plc-th{ margin: 0 0 8px; }
.pm-body .plc-vid{ width: 100%; max-width: 260px; margin: 10px 0 0; }

@media (min-width: 860px){
  /* 2枚組みにするのは、左330px＋右が読める幅を取れるところから。

     右の本体は升目から外して置いている（position:absolute）。
     はじめは grid-row:1/-1 でまたがせたが、行を書いていない升目では
     -1 が1行目を指すので、本体が1行目に押し込まれ、段の見出しの行が
     954pxまで伸びた。またがせ直しても、行の少ないプレミアム
     （5項目）では余りが行に配られてラベルが間延びする。
     外に出してしまえば、左の行の高さは中身なりのまま動かない。

     外に出すと .pm の背丈が左の一覧だけで決まるので、
     本体が入る高さを min-height で確保しておく。 */
  .pm{
    position: relative;
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    column-gap: 44px;
    align-content: start;
    min-height: 830px;
  }
  .pm-row{ display: contents; }
  .pm-lb{ grid-column: 1; }
  /* 隠しているラジオを、画面の中に置いておく（2026-09-04 白倉指示）

     .pm-row を display:contents にすると、中のラジオは .pm の升目の
     部品になる。位置を書いていない absolute の部品は、升目の決まりで
     「升目の左上」に置かれる。つまり9個のラジオが全部 .pm の一番上に
     重なっていた。行のラベルを押すとそこへ焦点が移るので、ブラウザが
     一番上まで戻していた。実測でぬりカルテを押すと1033px戻っていた。

     fixed にして画面の中に固定すると、焦点を当てても戻す先がないので
     ページは動かない。1pxで clip してあるので何も見えないし、
     押せる面積も無い。キーボードでも今までどおり選べる。
     860px未満のたたむ形では、ラジオは元から行の位置にいるので触らない。 */
  .pm-sw{
    position: fixed;
    top: 50%;
    left: 0;
    margin: 0;
  }
  /* 本体は動かさない（2026-09-04 白倉指示）。

     いったんは選んだ行の高さに合わせて上下に動かしていたが、
     行を押すたびに図がスライドして、目で追う先が毎回変わっていた。
     上の行を押したときは上へ動くので、見ていた場所から figure が逃げる。
     いまは右の列の上に置いたままにして、中身だけ入れ替える。
     図の位置が動かないので、いま・3ヶ月後の見比べがそのまま続けられる。

     top は 0 のまま。JS は触らない（丈の確保だけ JS が見る）。 */
  .pm-body{
    position: absolute;
    top: 0;
    left: 374px;
    right: 0;
  }
  .pm-dan{ margin-top: 18px; }
  .pm-dan:first-child{ margin-top: 0; }
  /* 図が大きすぎると本体が左の一覧より高くなる。読める大きさで止める */
  .pm-body .pl-fig{ max-width: 420px; }
}

@media (max-width: 859px){
  /* 1列。押した項目だけ下に開く。いままでの畳んだ形と同じ動き */
  .pm-lb{ position: relative; padding-right: 30px; }
  .pm-lb::after{
    content: "";
    position: absolute;
    right: 10px; top: 50%;
    width: 8px; height: 8px;
    margin-top: -6px;
    border-top: 2.5px solid #6b7280;
    border-right: 2.5px solid #6b7280;
    transform: rotate(135deg);
  }
  .pm-sw:checked ~ .pm-lb::after{ transform: rotate(-45deg); margin-top: -2px; }
  .pm-body{ padding: 12px 2px 16px; border-bottom: 1px solid var(--neutral); }
  .pm-body .pl-fig{ max-width: 420px; }
  .pm-be{ font-size: 17px; }
  .pm-tx{ font-size: 15.5px; }
}

@media (max-width: 599px){
  .pm-lb{ grid-template-columns: 26px 22px minmax(0, 1fr); padding: 9px 26px 9px 4px; }
  .pm-lb .plc-qty{ grid-column: 3; grid-row: 2; justify-self: start; margin-top: 3px; }
  .pm-nm{ font-size: 15.5px; }
}
/* ===================================================================
   はじめの1ヶ月（2026-09-04 白倉指示）

   毎月くり返すものと、契約直後に1回だけやるものを分ける。
   混ぜると「月額の項目なのに2ヶ月目から何もしない行」ができる。
   =================================================================== */
.pl-firstblock{ max-width: 900px; margin-left: auto; margin-right: auto; }
.pl-first{
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  border-top: 1px solid var(--neutral);
}
.pl-first-li{
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 0 14px;
  align-items: start;
  padding: 14px 2px;
  border-bottom: 1px solid var(--neutral);
}
.pl-first-li .pl-ic{ grid-column: 1; margin: 2px 0 0; }
.pl-first-li > div{ grid-column: 2; min-width: 0; }
.pl-first-li b{
  display: block;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.55;
  color: var(--primary);
}
.pl-first-li p{
  margin: 5px 0 0;
  font-size: 16px;
  line-height: 1.85;
  color: #4a5261;
}
@media (max-width: 599px){
  .pl-first-li{ grid-template-columns: 30px minmax(0, 1fr); gap: 0 10px; padding: 12px 0; }
  .pl-first-li b{ font-size: 16px; }
  .pl-first-li p{ font-size: 15.5px; }
}
/* ===================================================================
   図が言っていること（2026-09-04 白倉指示・案4）

   図の中の文字は、右のペインでは5px相当までつぶれる。
   図を大きくするのではなく、図が言っていることを下に文字で置く。
   文章は /service/before-after/ から取ってくる（1か所にしか書かない）。

   図の説明であって、サービスの説明ではない。ベネフィットより一段
   小さく、囲みの中に入れて、どちらの話かが分かるようにする。
   =================================================================== */
.pm-say{
  margin: 10px 0 0;
  padding: 13px 15px 14px;
  background: var(--light-gray);
  border-left: 3px solid var(--neutral);
}
.pm-say-l{
  margin: 0 0 5px;
  font-family: var(--font-en);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  /* #6b7280 は薄いグレー地で4.49:1。12.5pxは普通の文字なので4.5:1が要る。
     わずかに足りないので #5f6875 まで落とす（5.19:1）。 */
  color: #5f6875;
}
.pm-say-q{
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--primary);
}
.pm-say-a{
  margin: 0;
  font-size: 15.5px;
  line-height: 1.85;
  color: #333b47;
}
.pm-say-w{
  margin: 8px 0 0;
  padding: 8px 0 0;
  border-top: 1px solid var(--neutral);
  font-size: 15.5px;
  line-height: 1.85;
  color: #4a5261;
}
.pm-say-w::before{
  /* 「なぜ効くか」の印。絵文字は使わずCSSで描く */
  content: "";
  display: inline-block;
  vertical-align: 2px;
  width: 8px; height: 8px;
  margin-right: 8px;
  background: var(--accent-warm);
}
@media (max-width: 859px){
  .pm-say{ padding: 12px 13px; }
  .pm-say-q{ font-size: 15.5px; }
  .pm-say-a, .pm-say-w{ font-size: 15px; }
}

/* ===================================================================
   はじめの1ヶ月の無償枠（2026-09-04）

   トップ・料金・サービスの3ページに同じ形で置く。
   最初はインラインstyleで入れたが、3ページに同じ指定が散って
   直すときに片方だけ変わる形になっていたので、ここに寄せた。
   色は新しく足さず、既存の変数から取る。
   注記は12.5px・#5f6875 を下限にする（それ以下は読めない）。
   =================================================================== */
.pl-trial{
  max-width: 920px;
  margin: 26px auto 0;
  border: 1px solid var(--neutral);
  border-radius: 14px;
  padding: 22px 24px;
  background: #fbfcfd;   /* --pl-off は #6b7280 のグレーなので使えない */
}
.pl-trial-en{
  margin: 0 0 8px;
  font-family: var(--font-en);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .08em;
  /* --pl-premium-mark(#ba5e25) は #fbfcfd の上で 4.34:1。12.5pxの文字は4.5:1が要る。
     文字用の --pl-premium-ink(#994e1e) にすると 5.90:1（2026-09-08） */
  color: var(--pl-premium-ink);
}
.pl-trial-h{
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.6;
  color: var(--primary);
}
.pl-trial-p{
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--dark);
}
.pl-trial-list{
  margin: 0 0 12px;
  padding-left: 1.2em;
  font-size: 14px;
  line-height: 2;
  color: var(--dark);
}
.pl-trial-note{
  margin: 0;
  font-size: 12.5px;
  line-height: 1.8;
  color: #5f6875;
}
/* 案内の行（ボタン＋副リンク）。2026-09-04 追加。
   index は sub-page.css を読まないので .btn-accent が使えない。
   3ページで同じ見た目にするため、ここに置く。 */
.pl-trial-act{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 18px;
}
.pl-trial-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;          /* 指で押せる大きさ（24px を大きく上回らせる） */
  padding: 12px 26px;
  border-radius: 8px;
  background: var(--accent-warm);
  /* 文字は白ではなく濃紺。白 × #e8762e は実測 2.97:1 で 4.5:1 に届かない。
     濃紺なら 5.9:1。オレンジ自体は変えない（2026-09-04 に home.css の
     .lp-sticky-cta / .lp-final .fbtn / .hero-cta-btn.is-orange で
     採った直し方と同じにそろえた）。 */
  color: #0f2342;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  transition: filter .2s ease;
}
.pl-trial-cta:hover{ filter: brightness(1.07); }
.pl-trial-more{
  font-size: 13.5px;
  color: #3f4a5a;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pl-trial-more:hover{ color: var(--primary); }

@media (max-width: 599px){
  .pl-trial{ padding: 18px 16px; border-radius: 12px; }
  .pl-trial-h{ font-size: 17px; }
  .pl-trial-cta{ width: 100%; }
}


/* ===================================================================
   受注までの3つの段（2026-09-06 追加）
   price/index.html の「プランごとの中身」の3パネルに入る。
   もとは1枚の画像でいただいたものを、構造はHTML／絵だけ画像に分けた。
   画像のままだと 1412px 未満で本文が 12.5px を割り、
   図の中の文字が検索にもAIにも読まれないため。
   雛形と生成は tools/design-lab/v/steps/。直すときはあちらを直して
   node v/steps/build.mjs で貼り直す（データを二重に持たない）。
   =================================================================== */
/* 「受注までの3つの段」をHTMLで組んだもの（①ライト）。
   画像にしないのは、375pxで文字が読めなくなるのと、
   図の中の文字が検索にもAIにも読まれないため。
   色は既存の --pl-light / --pl-standard / --pl-premium から取る。 */
.st{
  /* トップの「回数と中身を見る」から #plan-light などで飛んでくる。
     ヘッダーが position:fixed で 95px（スマホ50px）あるので、その下に着地させる。 */
  scroll-margin-top: 110px;
  /* 5列を置くには980pxだと1列186pxで詰まる。器を少しだけ広げる。
     画面が狭いときは自動で画面幅に収まる（横スクロールは出さない）。 */
  width:min(100% + 260px, calc(100vw - 32px), 1260px);
  margin-inline:auto;
  position:relative; left:50%; transform:translateX(-50%);
}
.st-head{ display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap; margin:0 0 16px; }
.st-head-t{ flex:1 1 420px; min-width:0; }
.st-no{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%; color:#fff; font-weight:900; font-size:19px;
  vertical-align:-7px; margin-right:11px;
}
.st-h{ margin:0 0 6px; font-size:26px; font-weight:900; line-height:1.4; color:var(--dark); }
.st-plan{ margin:0 0 10px; font-size:14.5px; font-weight:800; }
.st-lead{ margin:0; font-size:14px; line-height:1.9; color:var(--dark); }
.st-ill{ flex:0 1 340px; min-width:0; }
.st-ill img{ display:block; width:100%; height:auto; }

/* 列ごとに見出しとQの行数が違うので、そのままだと「A. 外し方」の
   始まる高さが5列でバラバラになる。subgrid で3行をそろえる。
   効かないブラウザでは、いまと同じ見え方に落ちるだけで壊れない。 */
/* 1fr の最小幅は min-content。「Googleビジネスプロフィール」が縮まず、
   1列目だけ器からはみ出していた（1440pxで8px・1180pxで26px）。
   minmax(0,1fr) で最小を0にし、長い語は折り返してよいことにする。 */
.st-cols{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px;
  grid-template-rows:auto auto 1fr auto; }
.st-col, .st-col *{ min-width:0; overflow-wrap:anywhere; }
.st-col{ border:1px solid var(--neutral); border-radius:8px; overflow:hidden; background:#fff;
  display:flex; flex-direction:column; }
@supports (grid-template-rows: subgrid){
  .st-col{ display:grid; grid-row:span 4; grid-template-rows:subgrid; }
}
.st-col-h{ display:flex; gap:8px; align-items:flex-start; padding:9px 11px; color:#fff;
  font-size:13.5px; font-weight:800; line-height:1.55; }
.st-col-h b{ flex:0 0 auto; font-size:15px; font-weight:900; }
.st-q, .st-a{ padding:11px 12px; }
.st-q{ background:#f6f8fa; border-bottom:1px solid #e6ebf1; }
.st-lb{ margin:0 0 5px; font-size:12.5px; font-weight:900; letter-spacing:.04em; }
.st-q ul{ margin:0; padding:0; list-style:none; }
.st-q li{ position:relative; padding-left:11px; font-size:13px; line-height:1.75; color:#3f4a5a; margin-bottom:3px; }
.st-q li::before{ content:""; position:absolute; left:0; top:.78em; width:4px; height:4px;
  border-radius:50%; background:#9aa6b5; }
.st-a{ flex:1; display:flex; flex-direction:column; gap:7px; padding-bottom:6px; }
.st-a-h{ margin:0; font-size:15px; font-weight:800; line-height:1.55; color:var(--dark); }
.st-a-p{ margin:0; font-size:13px; line-height:1.85; color:#3f4a5a; }
/* 図と同じで、オレンジの枠の上辺に SERVICE の札を乗せる。 */
.st-sv{ position:relative; margin:0 12px 12px; display:flex; gap:7px; align-items:center;
  border:1.5px solid var(--accent-warm); border-radius:8px; padding:15px 9px 10px; }
.st-sv::before{
  content:"SERVICE"; position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  background:var(--accent-warm); color:#fff;
  font-family:Archivo,system-ui,sans-serif; font-size:12.5px; font-weight:800;
  letter-spacing:.09em; line-height:1; padding:4px 11px; border-radius:999px; white-space:nowrap;
}
/* 27pxだとフィルムの穴や円グラフが潰れる。34pxまで上げる。 */
.st-sv-ic{ flex:0 0 auto; display:flex; align-items:center; gap:5px; }
.st-svg{ width:34px; height:34px; display:block; }
/* ブランドマークは段の色ではなく、それぞれの色で出す */
.st-sv-ic i{ font-size:18px; line-height:1; color:var(--dark); }
.st-sv-ic .fa-line{ color:#06C755; }
.st-sv-t{ font-size:12.5px; font-weight:800; line-height:1.6; color:#8a4413; }


/* 段の色。ライト=緑／スタンダード=紺／プレミアム=濃いオレンジ。
   プレミアムに --pl-premium(#e8762e) を使うと白文字が 2.97:1 で落ちる。
   濃い側の --pl-premium-ink(#994e1e) なら 6.07:1。
   pricing.css が既にバッジで同じ使い分けをしている。 */
.st.is-light    .st-no,.st.is-light    .st-col-h{ background:var(--pl-light); }
.st.is-standard .st-no,.st.is-standard .st-col-h{ background:var(--pl-standard); }
.st.is-premium  .st-no,.st.is-premium  .st-col-h{ background:var(--pl-premium-ink); }
.st.is-light    .st-plan,.st.is-light    .st-lb,.st.is-light    .st-sv-ic{ color:var(--pl-light); }
.st.is-standard .st-plan,.st.is-standard .st-lb,.st.is-standard .st-sv-ic{ color:var(--pl-standard); }
.st.is-premium  .st-plan,.st.is-premium  .st-lb,.st.is-premium  .st-sv-ic{ color:var(--pl-premium-ink); }
.st + .st{ margin-top:34px; }

@media (max-width:1179px){
  .st-cols{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .st-h{ font-size:23px; }
}
@media (max-width:819px){
  .st{ width:100%; left:auto; transform:none; scroll-margin-top:70px; }
  .st-cols{ grid-template-columns:1fr; gap:10px; }
  .st-h{ font-size:20px; }
  .st-no{ width:29px; height:29px; font-size:16px; vertical-align:-6px; margin-right:9px; }
  .st-ill{ flex:1 1 100%; order:-1; }
  .st-a-h{ font-size:14.5px; }
}

/* 図と全項目は、見たい人だけが開く（2026-09-06）。
   上の5列で「なぜ要るか→どう外すか」は言い切っているので、
   その下の一覧と図は既定で閉じておく。
   details なので JS は要らず、中身は DOM に残る（検索とAIには読まれる）。 */
.st-more{ margin-top:18px; border-top:1px solid var(--neutral); }
.st-more > summary{
  list-style:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  margin:14px 0 0; padding:10px 16px;
  min-height:44px;                       /* 指で押せる大きさ */
  border:1px solid var(--neutral); border-radius:8px;
  background:#fff; color:var(--primary);
  font-size:14px; font-weight:800; line-height:1.5;
}
.st-more > summary::-webkit-details-marker{ display:none; }
.st-more > summary::after{
  content:""; width:9px; height:9px; margin-left:2px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .2s ease;
}
.st-more[open] > summary::after{ transform:rotate(-135deg) translate(-2px,-2px); }
.st-more > summary:hover{ background:#f2f5f9; }
.st-more > summary:focus-visible{ outline:3px solid var(--primary); outline-offset:2px; }
.st-more .pl-detail{ margin-top:16px; }

/* ── 元が取れるまでの目安（2026-09-07 採用・C案）──
   ここまでサイトにあった回収の話は「粗利30万円の工事が1件で、月5万円プランの半年分」だけで、
   20万・30万を検討する人には材料が無かった。3プランぶんを件数で並べる。

   数字（税別・粗利30万円の工事で計算。CLAUDE.md の「回収は粗利ベース」に合わせている）
     ライト      月5万  年60万  → 年2件  ／ 1件で6ヶ月ぶん
     スタンダード  月20万 年240万 → 年8件  ／ 1件で1.5ヶ月ぶん
     プレミアム   月30万 年360万 → 年12件 ／ 1件で1ヶ月ぶん

   「◯件取れます」とは書かない。成果は約束しない。
   色は3プランの既存変数から取っている（白地で 5.26 / 12.63 / 6.06 : 1）。 */
.roi{ max-width:980px; margin:26px auto 0; }
.roi-h{ margin:0 0 6px; font-size:17px; font-weight:800; color:var(--dark); }
.roi-lead{ margin:0 0 16px; font-size:13.5px; line-height:1.9; color:#5f6875; }
.roi-note{ margin:14px 0 0; font-size:12.5px; line-height:1.85; color:#5f6875; }
/* 共通CSSに a{text-decoration:none} があるため、下線を明示する。
   これが無いと注記の中でリンクが地の文と1ドットも違わない（2026-09-07に実測して気づいた）。 */
.roi-note a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.roi-note a:hover{ color:var(--pl-standard); }

.roi-cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.roi-card{ border:1px solid var(--neutral); border-top-width:4px; border-radius:9px;
  background:#fff; padding:15px 16px 16px; }
.roi-card.is1{ border-top-color:var(--pl-light); }
.roi-card.is2{ border-top-color:var(--pl-standard); }
.roi-card.is3{ border-top-color:var(--pl-premium-ink); }
.roi-card .nm{ display:block; font-size:13.5px; font-weight:800; margin-bottom:2px; }
.roi-card.is1 .nm{ color:var(--pl-light); }
.roi-card.is2 .nm{ color:var(--pl-standard); }
.roi-card.is3 .nm{ color:var(--pl-premium-ink); }
.roi-card .fee{ display:block; font-size:12.5px; color:#5f6875; margin-bottom:10px; }
.roi-card .num{ display:flex; align-items:baseline; gap:4px; }
.roi-card .num b{ font-size:38px; font-weight:900; line-height:1; font-variant-numeric:tabular-nums; }
.roi-card.is1 .num b{ color:var(--pl-light); }
.roi-card.is2 .num b{ color:var(--pl-standard); }
.roi-card.is3 .num b{ color:var(--pl-premium-ink); }
.roi-card .num span{ font-size:15px; font-weight:800; color:var(--dark); }
.roi-card .sub{ display:block; margin-top:8px; font-size:12.5px; line-height:1.8; color:#5f6875; }

@media (max-width:719px){
  .roi-cards{ grid-template-columns:1fr; }
  .roi-card .num b{ font-size:32px; }
}

/* ── 作って終わり、にしません（2026-09-07・service/index.html）──
   坂本塗装工業様にお出しした「集客ページを作ったあとの費用」の書面から起こした節。
   料金ページの直前に置いてあるので、CSSもここに置く（sub-page.css は120ページが
   読んでいて、1ページのためのブロックで全部の ?v= を上げることになるため）。

   金額はこの節に書かない。書面にある 5,000円/回・10,000円/件・15,000円/本・
   まとめて+30,000円/月 は price/index.html にも llms.txt にも無い。 */
.lp-after-section{
  /* --pl-* は .pl の中でだけ宣言されている。この節は .pl の外なので解決せず、
     バッジの背景が透明になって白文字が消えた（2026-09-07 実測 1:1）。
     .pl 側は動かさず、ここで必要な2色だけ定義し直す。値は .pl と同じ。 */
  --af-in:  var(--secondary);   /* .pl の --pl-light と同じ #1f7a5a */
  --af-out: #994e1e;            /* .pl の --pl-premium-ink と同じ */
  padding:72px 0; background:#f7f9fb;
}
.lp-after-section .af-cols{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px;
  max-width:980px; margin:26px auto 0;
}
.af-card{ background:#fff; border:1px solid var(--neutral); border-radius:10px; padding:20px 22px 22px; }
.af-card.is-in{ border-top:4px solid var(--af-in); }
.af-card.is-out{ border-top:4px solid var(--af-out); }
.af-h{ display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  margin:0 0 12px; font-size:15px; font-weight:800; color:var(--dark); }
.af-badge{ flex:none; padding:3px 9px; border-radius:4px;
  font-size:12.5px; font-weight:800; color:#fff; background:var(--af-in); }
.af-badge.is-o{ background:var(--af-out); }
/* 共通CSSが ul の marker を消しているので、明示的に戻す */
.af-list{ margin:0; padding:0 0 0 1.15em; list-style:disc; }
.af-list li::marker{ color:#9aa4b2; }
.af-list li{ margin-bottom:5px; font-size:13.5px; line-height:1.85; color:#3c4756; }
.af-note{ margin:12px 0 0; padding-top:11px; border-top:1px solid #eef1f5;
  font-size:12.5px; line-height:1.85; color:#5f6875; }
.af-note a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.af-note a:hover{ color:var(--primary); }

.af-rule{ max-width:980px; margin:18px auto 0; background:#fff;
  border:1px solid var(--neutral); border-radius:10px; padding:20px 22px 22px; }
.af-rule-h{ margin:0 0 8px; font-size:15px; font-weight:800; color:var(--dark); }
.af-rule-t{ margin:0; font-size:13.5px; line-height:1.95; color:#3c4756; }
.af-rule-t b{ color:var(--dark); font-weight:800; }
.af-days{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px;
  margin:16px 0 0; padding:0; list-style:none; }
.af-days li{ background:#f2f5f9; border-radius:8px; padding:11px 13px; }
.af-days span{ display:block; font-size:12.5px; color:#5f6875; margin-bottom:3px; }
.af-days b{ font-size:14px; font-weight:800; color:var(--dark); line-height:1.5; }

@media (max-width:899px){
  .lp-after-section{ padding:52px 0; }
  .lp-after-section .af-cols{ grid-template-columns:1fr; gap:14px; }
  .af-days{ grid-template-columns:1fr; gap:9px; }
}

/* ── 作って終わり、にしません（短い帯・price/index.html のスポット料金表のうしろ）──
   service/index.html の #after を1段落に縮めたもの。文言は両方そろえる。
   .pl の外に出るので、色は足元で定義し直す（--pl-* は .pl の中でだけ宣言されている）。 */
.af-strip{
  --af-in: var(--secondary);
  max-width:980px; margin:22px auto 0; padding:18px 20px 19px;
  background:#fff; border:1px solid var(--neutral); border-left:4px solid var(--af-in);
  border-radius:0 10px 10px 0;
}
.af-strip-h{ margin:0 0 7px; font-size:16px; font-weight:800; color:var(--dark); }
.af-strip-t{ margin:0; font-size:13.5px; line-height:1.95; color:#3c4756; }
.af-strip-t b{ color:var(--dark); font-weight:800; }
.af-strip-n{ margin:11px 0 0; padding-top:10px; border-top:1px solid #eef1f5;
  font-size:12.5px; line-height:1.85; color:#5f6875; }
.af-strip-n a{ color:inherit; text-decoration:underline; text-underline-offset:2px;
  white-space:nowrap; }
.af-strip-n a:hover{ color:var(--primary); }

@media (max-width:719px){
  .af-strip{ padding:15px 16px 16px; }
  .af-strip-n a{ white-space:normal; }
}

/* 条件（対象になる人）は本文と分けて出す。読み飛ばされると誤解になるので薄くしすぎない */
.af-cond{ display:inline-block; margin-top:6px; font-size:13px; line-height:1.85; color:#3c4756; }
.af-strip-c{ margin:9px 0 0; padding:9px 12px; border-radius:7px; background:#f2f5f9;
  font-size:12.5px; line-height:1.85; color:#3c4756; }
.af-strip-c b{ color:var(--dark); font-weight:800; }