/* ============================================================
   お客様ノート 公開サイト — 共通スタイル
   2026-08-23 全面書き直し（案D2 を採用。宿題56 が正本）

   🔴 **スマホ基準で書く（2026-08-23 本人指示「ベースはスマホ版に注力して」）。**
      このファイルの素の状態＝スマホ。PC は下の `@media (min-width:900px)` だけ。
      ⚠️ PC用の値を素の側に書かないこと。素を直すとスマホが動く、という向きを保つ。
      理由＝来る人はほぼ iPhone（App Store へ行く導線）。PCは確認用。

   🔴 値は app/src/constants/theme.ts からの転記。ここで新しく決めていない。
     色     … PINK_LIGHT（配色8枚の既定）
     文字 T … 34 / 26 / 20 / 15 / 13 / 12 / 11（7段。この外を使わない）
     行間 LH… 38 / 30 / 25 / 23 / 20 / 18 / 16（T と同じキーで対にする）
     角丸 R … 4 / 10 / 14 / full（4段）
     余白 S … 4 / 8 / 12 / 16 / 24 の倍数
     HIT    … 44（押せるものの最小の高さ）

   🔴 書体はアプリと同じ＝**OSのシステムフォント**。
      アプリは `fontFamily` の指定が0件・`useFonts` も0件・`assets/fonts` も無い
      （2026-08-23 に実装で確認）。iOS ではヒラギノ角ゴ + San Francisco。
      ⚠️ Webフォントを足すとアプリと別の顔になる。足さないこと。
   🔴 ウェイトは 700 / 600 / 400 だけ。アプリは 700が136件・600が98件で、300は0件。
   🔴 日本語に letter-spacing を一律で掛けない（デザイン規則 §2-①）。**ロゴだけ例外。**
   🔴 グラデーション・影のついたカード・✨・violet を使わない（デザイン規則 §1）。

   🔴 **見出しと小見出しの順番を入れ替えないこと**（2026-08-23 本人指示）。
      App Store の掲載スクショと同じ＝**大きい見出し（メイン）が先、ピンクの一行（サブ）が後**。
      CSS の order で入れ替えない。
   ============================================================ */

:root{
  /* 色（PINK_LIGHT） */
  --paper:#fdf9fb;
  --card:#ffffff;
  --line:#eedde4;
  --tx:#20181b;
  --tx2:#806b73;
  --gold:#ca7899;     /* 面（塗り）用。文字には使わない */
  --goldtx:#c83d75;   /* 文字・アイコン用（背景に対して 4.5:1 以上） */
  --ongold:#20181b;   /* 金の面に乗せる文字色。白ではない */
  --today:#f7dfe9;
  --track:#f6ecf0;

  /* 文字の階段 T */
  --t-display:34px; --t-hero:26px; --t-title:20px; --t-body:15px;
  --t-label:13px;   --t-caption:12px; --t-micro:11px;
  /* 行間 LH */
  --lh-display:38px; --lh-hero:30px; --lh-title:25px; --lh-body:23px;
  --lh-label:20px;   --lh-caption:18px; --lh-micro:16px;
  /* 角丸 R */
  --r-sm:4px; --r-md:10px; --r-lg:14px; --r-full:999px;
  /* 余白 S */
  --s-xs:4px; --s-sm:8px; --s-md:12px; --s-lg:16px; --s-xl:24px;

  --head:60px;
  --max:1120px;
  --読み幅:760px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{scroll-padding-top:var(--head);}
body{
  background:var(--paper);color:var(--tx);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",sans-serif;
  font-weight:400;
  font-size:var(--t-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* 中身が短いページ（404・サポート）でも、フッターが画面の下に着くようにする。
     長いページには何も起きない。 */
  display:flex;flex-direction:column;min-height:100vh;
}
main{flex:1 0 auto;}
/* 🔴 height:auto は必須。img に width/height 属性を付けてあるので、これが無いと
   属性の height がそのまま使われて画像が縦に伸びる（2026-08-23 に実測して踏んだ）。
   属性自体は残す＝読み込み前に場所を確保して、画像が入った瞬間に文字が飛ぶのを防ぐため。 */
img{max-width:100%;height:auto;display:block;}
a{color:var(--goldtx);}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--s-xl);}

/* ── 押せるもの ── アプリと同じ形：面は gold・文字は onGold・角丸 R.md・高さ HIT */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:var(--s-md) var(--s-xl);
  background:var(--gold);color:var(--ongold);text-decoration:none;
  border-radius:var(--r-md);
  font-size:var(--t-body);font-weight:700;
}
.btn:hover{background:var(--goldtx);color:#fff;}
.btn.小さめ{padding:var(--s-sm) var(--s-lg);font-size:var(--t-label);}

/* AIの印＝アプリと同じ意味「コインが減る」。絵文字は使わない（デザイン規則 §1） */
.ai{
  display:inline-block;margin-right:var(--s-xs);
  border:1px solid var(--gold);border-radius:var(--r-sm);
  padding:0 3px;font-size:var(--t-micro);line-height:var(--lh-micro);
  font-weight:700;color:var(--goldtx);
}

/* ── 見出し組 ── メインが先、サブが後。順番を入れ替えない ── */
.主{font-size:var(--t-hero);line-height:var(--lh-hero);font-weight:700;margin:0;}
.副{font-size:var(--t-label);line-height:var(--lh-label);font-weight:600;
  color:var(--goldtx);margin:var(--s-sm) 0 0;}

/* ── ヘッダー（4ページ共通・固定） ── */
header.site{
  position:sticky;top:0;z-index:20;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--head);}
.logo{
  display:flex;align-items:center;gap:var(--s-sm);
  text-decoration:none;color:var(--tx);
  font-size:var(--t-body);font-weight:700;
  letter-spacing:.12em;  /* ロゴだけの例外 */
  min-height:44px;       /* HIT */
}
.logo img{width:22px;height:22px;}
.site-nav{display:flex;align-items:center;gap:var(--s-lg);
  font-size:var(--t-label);line-height:var(--lh-label);font-weight:600;}
.site-nav a{color:var(--tx2);text-decoration:none;}
.site-nav a:hover{color:var(--goldtx);}
.site-nav .btn{color:var(--ongold);}
.site-nav .隠す{display:none;}   /* スマホでは畳む。PC で戻す */

/* ── ヒーロー ── */
.hero{position:relative;padding:var(--s-xl) 0 32px;}
/* 🔵 左のブロックは中央揃え（2026-08-23 本人指示）。見出し・小見出し・本文・ボタンまで全部。 */
.hero .文{text-align:center;}
.斜め{
  position:absolute;top:0;left:0;right:0;height:62%;
  background:var(--today);
  clip-path:polygon(0 0,100% 0,100% 88%,0 100%);
  z-index:0;
}
.hero .wrap{position:relative;z-index:2;}
.hero h1{font-size:var(--t-hero);line-height:var(--lh-hero);font-weight:700;margin:0;}
/* ⚠️ ここに「2段目を下げる（.下げ）」があったが、2026-08-23 本人指示で削除。
   見出しは**左のブロックの中で中央揃え**（→ `.hero .文`）。全角スペースでの字下げもしない。 */
.hero .lead{font-size:var(--t-body);line-height:var(--lh-body);color:var(--tx2);
  margin:var(--s-lg) auto 0;max-width:30em;}
.hero .手{margin-top:var(--s-xl);}
.hero .note{display:block;margin-top:var(--s-sm);
  font-size:var(--t-caption);line-height:var(--lh-caption);color:var(--tx2);}
.hero .device{position:relative;max-width:240px;margin:var(--s-xl) auto 0;}
/* 🔴 端末画像は切らない（2026-08-23 本人指示）。全画面をそのまま置く */
.hero .device img{width:100%;border:1px solid var(--line);border-radius:var(--r-lg);}
/* ⚠️ 端末の角にあった「かぎ括弧」の飾りは 2026-08-23 本人指示で削除した。戻さない。 */

/* ── 節の見出し ── 3つの節（できること／料金／こまかいところ）で共通 ──
   🔵 2026-08-23 本人指示で大きくした（旧＝T.label 13px の薄い字で、見出しに見えていなかった）。
   ⚠️ 札の見出し（`.品 .主`＝T.title 20）より1段上に置くこと。同じ大きさだと階層が消える。 */
.節題{font-size:var(--t-hero);line-height:var(--lh-hero);font-weight:700;color:var(--tx);
  margin:0 0 var(--s-xl);text-align:center;}

/* ── できること ──
   スマホ＝**横スクロール**（2026-08-23 本人指示）。PC＝横並びのグリッド（下の @media）。
   🔑 JSは使わない。CSS の scroll-snap だけ＝押しどころも状態も増えない。
   🔑 `.wrap` の左右padding ぶんだけ負のマージンで外へ出す＝**画面の端まで流れる**ようにする。
      端で止まると「まだ続きがある」ことが見えず、横に動かせると気づけない。
   ⚠️ 次の1枚が少しはみ出して見えるのが唯一の合図なので、`品` の幅を広げすぎないこと。 */
/* 🔵 節ごとに地の色を変える（2026-08-23 本人指示）。
   紙 → 溝 → 紙 → 溝 → 淡いピンク の順で、切れ目が色で分かるようにする。
   ⚠️ **料金だけは紙でなければならない**＝タブの溝(track)が地と同じ色になると、
      選ばれている札が浮いて見えなくなる（→ 下の `.料金`）。 */
.できること{background:var(--track);padding:48px 0 40px;}
.品ぞろえ{
  display:flex;align-items:flex-start;gap:var(--s-lg);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  margin:0 calc(-1 * var(--s-xl));
  padding:0 var(--s-xl) var(--s-sm);
  scroll-padding-left:var(--s-xl);
  scrollbar-width:none;               /* Firefox */
}
.品ぞろえ::-webkit-scrollbar{display:none;}
.品{flex:0 0 260px;scroll-snap-align:start;text-align:center;}
/* 🔵 画像は札の一番下（2026-08-23 本人指示「見出しを上に」）。掲載スクショの絵と同じ並び */
.品 img{width:100%;max-width:220px;margin:var(--s-lg) auto 0;
  border:1px solid var(--line);border-radius:var(--r-lg);}
.品 .主{font-size:var(--t-title);line-height:var(--lh-title);}

/* ── 料金 ── アプリのペイウォールと同じ2枚のタブ（プラン／機能比較） ──
   🔴 **JavaScript を使わない。** `_headers` の CSP が `default-src 'none'` で script-src が無く、
      「このサイトは script タグが1つも無い」ことを前提に締めてある（2026-08-16 実測）。
      ⇒ 隠したラジオ + `:checked ~` の兄弟セレクタだけで切り替える。
      ⚠️ そのため **input は seg と面より前に置く**（順番を変えると切り替わらなくなる）。
   🔑 寸法はアプリの `Segmented`（components/ui.tsx）からの転記＝
      溝は `--track`・角丸 R.md・内側 3px・札の高さ 38（HIT-6＝溝の3+3を足して44）。 */
/* 地は paper。溝(track)が一段沈み、選ばれた札(card)だけが浮く＝アプリの Segmented と同じ関係。
   ⚠️ ここを track にすると溝と地が同じ色になり、**選んだ側が沈んで見える**（2026-08-23 に踏んだ）。 */
.料金{background:var(--paper);padding:48px 0;}
/* 隠すが、キーボードの的からは外さない（display:none にすると focus できなくなる） */
.タブ入力{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.seg{display:flex;gap:3px;background:var(--track);
  border-radius:var(--r-md);padding:3px;
  max-width:var(--読み幅);margin:0 auto var(--s-lg);}
.seg label{
  flex:1;min-height:38px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-md);padding:0 var(--s-sm);
  font-size:var(--t-label);line-height:var(--lh-label);color:var(--tx2);
  border:1px solid transparent;cursor:pointer;
}
#tab-plan:checked ~ .seg label[for="tab-plan"],
#tab-cmp:checked  ~ .seg label[for="tab-cmp"]{
  background:var(--card);border-color:var(--line);color:var(--tx);font-weight:700;
}
#tab-plan:focus-visible ~ .seg label[for="tab-plan"],
#tab-cmp:focus-visible  ~ .seg label[for="tab-cmp"]{outline:2px solid var(--goldtx);outline-offset:2px;}
.面{display:none;}
#tab-plan:checked ~ .面プラン{display:block;}
#tab-cmp:checked  ~ .面比較{display:block;}

/* 機能比較の表。角丸は外側の箱で作る（border-collapse だと table には効かない） */
.比較箱{max-width:var(--読み幅);margin:0 auto;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;}
.比較{width:100%;table-layout:fixed;border-collapse:collapse;
  font-size:var(--t-label);line-height:var(--lh-label);}
.比較 th:first-child{width:46%;}
.比較 td{width:27%;}
.比較 th,.比較 td{padding:var(--s-md) var(--s-sm);border-top:1px solid var(--line);}
.比較 thead th{border-top:none;background:var(--track);
  font-size:var(--t-caption);line-height:var(--lh-caption);font-weight:600;color:var(--tx2);}
.比較 thead th:first-child{text-align:left;padding-left:var(--s-lg);}
.比較 tbody th{text-align:left;font-weight:400;color:var(--tx);padding-left:var(--s-lg);}
/* 🔵 3列のバランス（2026-08-23 本人指示）。`table-layout:fixed` にして割合で持つ＝
   値の列を固定pxにすると、狭い画面で見出し側だけが潰れて左右が不均衡になる。 */
.比較 td{text-align:center;}
.比較 .無{color:var(--tx2);}
.プラン{display:grid;grid-template-columns:1fr;gap:var(--s-lg);
  max-width:var(--読み幅);margin:0 auto;}
/* ⚠️ 2枚を同じ見た目にしない（デザイン規則 §3-②）。主役はプレミアムの側 */
.枚{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s-xl);}
.枚.主役{border-color:var(--gold);}
.枚 .名{font-size:var(--t-label);line-height:var(--lh-label);font-weight:600;color:var(--tx2);margin:0;}
.枚 .額{font-size:var(--t-hero);line-height:var(--lh-hero);font-weight:700;margin:var(--s-xs) 0 0;}
.枚.主役 .額{color:var(--goldtx);}
.枚 .額 span{font-size:var(--t-caption);font-weight:400;color:var(--tx2);}
.枚 ul{list-style:none;margin:var(--s-lg) 0 0;padding:0;}
.枚 li{font-size:var(--t-label);line-height:var(--lh-label);
  padding:var(--s-sm) 0;border-top:1px solid var(--line);}
.枚 li:first-child{border-top:none;padding-top:0;}
.料金 .注{font-size:var(--t-caption);line-height:var(--lh-caption);color:var(--tx2);
  max-width:var(--読み幅);margin:var(--s-lg) auto 0;}

/* ── 細い一覧 ── 主役ではないものはカードにせずここへ落とす ── */
.一覧{background:var(--track);padding:48px 0;}
.一覧 dl{margin:0 auto;max-width:var(--読み幅);}
/* ⚠️ `.一覧 div` と書くと外側の .wrap にも当たる（2026-08-23 に踏んだ）。dl の直下だけに絞る */
.一覧 dl > div{border-bottom:1px solid var(--line);padding:var(--s-lg) 0;}
.一覧 dl > div:first-child{border-top:1px solid var(--line);}
.一覧 dt{font-size:var(--t-body);line-height:var(--lh-body);font-weight:700;margin:0;}
.一覧 dd{margin:var(--s-xs) 0 0;font-size:var(--t-label);line-height:var(--lh-label);color:var(--tx2);}

/* ── 締め ── */
.締め{background:var(--today);padding:48px 0;text-align:center;}
.締め h2{font-size:var(--t-hero);line-height:var(--lh-hero);font-weight:700;
  margin:0 0 var(--s-lg);border:none;padding:0;}

/* ============================================================
   読ませるページ（規約・ポリシー・サポート）
   トップと同じトークンで組む。ここだけ別の顔にしない。
   ============================================================ */
main{padding-bottom:40px;}
.読み物{padding-top:var(--s-xl);}
.読み物 .wrap{max-width:calc(var(--読み幅) + 48px);}
.読み物 h1{font-size:var(--t-hero);line-height:var(--lh-hero);font-weight:700;margin:0 0 var(--s-lg);}
.読み物 h2{font-size:var(--t-title);line-height:var(--lh-title);font-weight:700;
  margin:var(--s-xl) 0 var(--s-md);padding-top:var(--s-xl);border-top:1px solid var(--line);}
.読み物 h2:first-of-type{border-top:none;padding-top:0;}
.読み物 h3{font-size:var(--t-body);line-height:var(--lh-body);font-weight:700;margin:var(--s-lg) 0 var(--s-xs);}
.読み物 p,.読み物 li{font-size:var(--t-body);line-height:var(--lh-body);}
.読み物 li{margin-bottom:var(--s-sm);}
.読み物 ul,.読み物 ol{padding-left:var(--s-xl);}
.読み物 .lead{color:var(--tx2);margin-bottom:var(--s-lg);}
.読み物 blockquote{margin:var(--s-lg) 0;padding:var(--s-xs) 0 var(--s-xs) var(--s-lg);
  border-left:2px solid var(--line);color:var(--tx2);font-size:var(--t-label);line-height:var(--lh-label);}
.読み物 table{width:100%;border-collapse:collapse;margin:var(--s-lg) 0;
  font-size:var(--t-label);line-height:var(--lh-label);}
.読み物 th,.読み物 td{border:1px solid var(--line);padding:var(--s-md);text-align:left;vertical-align:top;}
.読み物 th{color:var(--tx2);font-weight:700;}
/* スマホでは表を積む（横スクロールを作らない） */
.読み物 table,.読み物 tbody,.読み物 tr,.読み物 th,.読み物 td{display:block;width:auto;}
.読み物 td{border-top:none;}
.読み物 th{border-bottom:none;}
.small-print{font-size:var(--t-caption);line-height:var(--lh-caption);color:var(--tx2);}
.checklist{padding-left:var(--s-xl);}

/* ── フッター（4ページ共通） ── */
footer.site{border-top:1px solid var(--line);padding:var(--s-xl) 0 32px;
  font-size:var(--t-caption);line-height:var(--lh-caption);color:var(--tx2);}
footer.site a{color:var(--tx2);text-decoration:none;}
/* 🔴 HIT=44 を下回らせない。スマホで実測したら 26px だった（2026-08-23） */
.足リンク a{display:flex;align-items:center;min-height:44px;}
footer.site a:hover{color:var(--goldtx);}
.sns{margin-top:var(--s-md);}
.sns a{display:inline-flex;align-items:center;gap:var(--s-xs);margin-right:var(--s-lg);min-height:44px;}
.sns svg{width:14px;height:14px;fill:currentColor;display:block;}
footer.site .small-print{margin-top:var(--s-sm);}

/* ============================================================
   PC（ここから下だけがPC用。素の側に書かないこと）
   ============================================================ */
@media(min-width:900px){
  .wrap{padding:0 40px;}
  .site-nav{gap:var(--s-xl);}
  .site-nav .隠す{display:inline;}
  .logo{font-size:var(--t-title);gap:var(--s-md);letter-spacing:.16em;}
  .logo img{width:24px;height:24px;}

  /* ヒーロー＝左に文・右に端末。斜めの面は右半分へ（inset なので丈に追随する） */
  /* 🔵 上下を詰めた（2026-08-23 本人指示「PCはヒーローの上下をもっと短く」）。
     🔑 **丈を決めているのは余白ではなく端末画像**＝切らない方針なので、縦を縮める唯一の手は
        **横幅を細くすること**（290 → 240px ＝ 628px → 519px）。余白の圧縮は40pxぶんしか効かない。
     ⚠️ 以前 align-items を start にしたのは、端末が628pxあって center だと見出しが
        画面の下半分へ落ちたため。**519px まで縮んだので center へ戻した**
        （左右の高さ差が縮み、上下に振り分けた方が収まる）。数字が変わったら向きも見直すこと。 */
  .hero{padding:var(--s-lg) 0 var(--s-xl);}
  .斜め{top:0;left:auto;right:0;bottom:0;width:52vw;height:auto;
    clip-path:polygon(20% 0,100% 0,100% 100%,0 100%);}
  /* 🔵 文と端末を寄せる（2026-08-23 本人指示「中心が開きすぎ」）。
     🔑 原因は gap ではなく **左の列が `1fr` で伸びていたこと**＝文は 30em で止まるのに
        列だけ 776px あり、余りが全部まん中の空白になっていた。
     ⇒ 列を伸ばさず、2つを1組として中央に置く。 */
  .hero .wrap{display:flex;justify-content:center;align-items:center;gap:48px;}
  .hero .文{flex:0 1 520px;}
  .hero .device{flex:0 0 240px;}
  .hero .文{padding-top:0;}
  .hero h1{font-size:var(--t-display);line-height:var(--lh-display);}
  .hero .device{max-width:none;margin:0;}

  .節{padding:56px 0 var(--s-xl);}

  /* 🔵 できること＝PCでは横並びのグリッド（2026-08-23 本人指示）。
     ⚠️ スマホ側の横スクロールを**全部**解くこと（overflow / margin / padding / snap）。
        1つでも残ると、PCで端が切れたり左に寄ったりする。 */
  .できること{padding:56px 0;}
  .品ぞろえ{
    display:grid;grid-template-columns:repeat(3,1fr);gap:48px var(--s-xl);
    overflow:visible;margin:0;padding:0;scroll-snap-type:none;
  }
  .品{flex:none;}
  .品 img{max-width:200px;}

  .料金{padding:56px 0;}
  .プラン{grid-template-columns:1fr 1fr;gap:var(--s-xl);align-items:start;}
  .一覧{padding:56px 0;}
  .一覧 dl > div{display:grid;grid-template-columns:1fr 1.25fr;gap:var(--s-xl);}
  .一覧 dd{margin-top:0;}
  .締め{padding:64px 0;}

  .読み物{padding-top:40px;}
  .読み物 .wrap{max-width:calc(var(--読み幅) + 80px);}
  .読み物 table{display:table;}
  .読み物 tbody{display:table-row-group;}
  .読み物 tr{display:table-row;}
  .読み物 th,.読み物 td{display:table-cell;border:1px solid var(--line);}
  .読み物 th{width:30%;}

  .足リンク a{display:inline-flex;margin-right:var(--s-xl);}
  .足リンク{display:flex;gap:0;}
}