:root { --bg:#ffffff; --fg:#1f2328; --sub:#59636e; --line:#d8dee4; --soft:#f6f8fa;
  --accent:#d1242f; --accent-fg:#fff; --pro:#8250df; --max:760px; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#16191d; --fg:#e6edf3; --sub:#9198a1; --line:#30363d; --soft:#1f2329;
    --accent:#f85149; --accent-fg:#fff; --pro:#ab7df8; }
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--fg); line-height:1.8;
  font-family:-apple-system, "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif; font-size:16px; }
a { color:inherit; }
.wrap { max-width:var(--max); margin:0 auto; padding:0 16px; }
header.site { border-bottom:1px solid var(--line); }
header.site .wrap { display:flex; justify-content:space-between; align-items:center; height:56px; }
header.site a.brand { font-weight:700; text-decoration:none; }
header.site nav a { font-size:14px; color:var(--sub); text-decoration:none; margin-left:16px; }
main { padding:40px 0 64px; }
h1 { font-size:28px; line-height:1.4; margin:0 0 12px; }
h2 { font-size:22px; line-height:1.4; margin:56px 0 16px; }
h3 { font-size:17px; margin:24px 0 8px; }
p { margin:0 0 16px; }
.lead { font-size:18px; color:var(--sub); }
.sub { color:var(--sub); font-size:14px; }
.btn { display:inline-block; background:var(--accent); color:var(--accent-fg); font-weight:700;
  text-decoration:none; border-radius:10px; padding:14px 28px; border:0; font-size:17px; cursor:pointer; }
.btn.ghost { background:transparent; color:var(--fg); border:1px solid var(--line); font-weight:600; }
.btn[aria-disabled=true] { opacity:.5; cursor:not-allowed; }
.card { border:1px solid var(--line); border-radius:14px; padding:20px; background:var(--soft); }
.grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); }
figure { margin:24px 0; }
figure img { width:100%; height:auto; border:1px solid var(--line); border-radius:12px; display:block; }
figcaption { font-size:13px; color:var(--sub); margin-top:6px; }
table { width:100%; border-collapse:collapse; font-size:15px; }
th, td { border-bottom:1px solid var(--line); padding:12px 8px; text-align:left; vertical-align:top; }
th { white-space:nowrap; }
table.legal th { width:30%; background:var(--soft); }
@media (max-width:560px) {
  header.site .wrap { height:auto; flex-wrap:wrap; padding-top:10px; padding-bottom:8px; row-gap:2px; }
  header.site nav { width:100%; display:flex; flex-wrap:wrap; column-gap:14px; white-space:nowrap; }
  header.site nav a { margin-left:0; font-size:13px; }
  h1 { font-size:24px; }
  table.legal th, table.legal td { display:block; width:100%; }
  table.legal th { border-bottom:0; padding-bottom:4px; }
}
.compare td:nth-child(2), .compare td:nth-child(3), .compare th:nth-child(2), .compare th:nth-child(3) { text-align:center; }
.price { font-size:36px; font-weight:800; }
.price small { font-size:15px; font-weight:600; color:var(--sub); }
ul.check { padding-left:0; list-style:none; }
ul.check li { padding-left:28px; position:relative; margin-bottom:8px; }
ul.check li::before { content:"✓"; position:absolute; left:4px; color:var(--accent); font-weight:800; }
details { border-bottom:1px solid var(--line); padding:12px 0; }
summary { cursor:pointer; font-weight:600; }
details p { margin:8px 0 0; }
footer.site { border-top:1px solid var(--line); padding:24px 0 40px; font-size:13px; color:var(--sub); }
footer.site a { margin-right:16px; }
.legal-doc h2 { font-size:18px; margin:32px 0 8px; }
.legal-doc ol, .legal-doc ul { padding-left:1.4em; }

.contact-form label { display:block; font-weight:600; margin:0 0 18px; }
.contact-form .req { font-size:11px; font-weight:700; color:var(--accent-fg); background:var(--accent); border-radius:4px; padding:1px 6px; margin-left:8px; vertical-align:middle; }
.contact-form input, .contact-form textarea { display:block; width:100%; margin-top:6px; font:inherit; font-weight:400; color:var(--fg); background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:10px 12px; }
.contact-form input:focus, .contact-form textarea:focus { outline:2px solid var(--accent); outline-offset:1px; }
.contact-form .hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.contact-form .btn:disabled { opacity:.6; cursor:wait; }
.msg { color:var(--accent); font-weight:600; min-height:1em; }

.operator { display:flex; gap:16px; align-items:center; }
.operator img { width:80px; height:80px; border-radius:50%; object-fit:cover; flex-shrink:0; border:1px solid var(--line); }

.cta { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.cta .btn { margin:0; }
/* 料金の表のすぐ下の購入ボタンは、表から離して置く（くっついて見づらいと本人指摘 2026-10-05） */
.grid + .cta, .card + .cta { margin-top: 32px; }
.card .btn { margin-top: 8px; }

/* 上部メニュー：商品は「拡張機能」の中にまとめる（商品が増えても上部は3つのまま） */
header.site { position:relative; z-index:20; background:var(--bg); }
header.site nav { display:flex; align-items:center; gap:4px; }
header.site nav > a, .pmenu > summary { font-size:14px; color:var(--fg); text-decoration:none; margin:0; padding:8px 12px; border-radius:8px; cursor:pointer; }
header.site nav > a:hover, .pmenu > summary:hover, .pmenu[open] > summary { background:var(--soft); }
.pmenu { position:relative; border-bottom:0; padding:0; }  /* よくある質問の details の線と余白を受けない */
.pmenu > summary { list-style:none; user-select:none; }
.pmenu > summary::-webkit-details-marker { display:none; }
.pmenu > summary::after { content:""; display:inline-block; width:6px; height:6px; margin-left:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-3px) rotate(45deg); transition:transform .15s; }
.pmenu[open] > summary::after { transform:translateY(1px) rotate(-135deg); }
.pmenu:not([open]) .pmenu-panel { display:none; }
.pmenu-panel { position:absolute; right:0; top:calc(100% + 8px); width:360px; background:var(--bg); border:1px solid var(--line); border-radius:14px; box-shadow:0 12px 32px rgba(0,0,0,.12); padding:8px; }
.pmenu-panel a { display:flex; align-items:center; gap:12px; padding:10px; border-radius:10px; text-decoration:none; color:var(--fg); }
.pmenu-panel a:hover { background:var(--soft); }
.pmenu-panel img { width:32px; height:32px; border-radius:8px; flex:none; }
.pmenu-panel span { display:flex; flex-direction:column; line-height:1.4; }
.pmenu-panel b { font-size:14px; }
.pmenu-panel small { font-size:12px; color:var(--sub); }
.pmenu-panel .pmenu-all { justify-content:center; font-size:13px; color:var(--sub); border-top:1px solid var(--line); border-radius:0 0 8px 8px; margin-top:4px; padding-top:12px; }
@media (max-width:560px) {
  header.site .wrap { height:56px !important; flex-wrap:nowrap !important; padding-top:0 !important; padding-bottom:0 !important; }
  header.site nav { width:auto !important; flex-wrap:nowrap !important; column-gap:0 !important; }
  header.site nav > a, .pmenu > summary { font-size:13px !important; padding:8px 8px; }
  .pmenu { position:static; }
  .pmenu-panel { left:12px; right:12px; width:auto; top:60px; }
}

/* トップの商品カード：アイコン＋名前 */
.card-title { display:flex; align-items:center; gap:12px; margin:0 0 10px; }
.card-title img { width:40px; height:40px; border-radius:10px; flex:none; }
#products { grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); }  /* 名前が折り返さないよう2列 */

/* 商品ページの見出しの上：アイコン＋商品名 */
.hero-badge { display:flex; align-items:center; gap:14px; margin:0 0 18px; }
.hero-badge img { width:56px; height:56px; border-radius:14px; flex:none; }
.hero-badge span { display:flex; flex-direction:column; line-height:1.35; }
.hero-badge b { font-size:18px; }
.hero-badge small { font-size:13px; color:var(--sub); }

/* 「有料版」「回数券」などの小さな印 */
.badge { display:inline-block; font-size:12px; font-weight:600; color:#8250df; border:1px solid #8250df; border-radius:999px; padding:0 8px; margin-left:8px; vertical-align:middle; }