/* 使い方ガイド（_guide_body.php）。アプリの中（style.css）と公開ページ（lp.css）の両方で読む。
   色はどちらの変数でも効くように、style.css の名前 → lp.css の名前 → 固定値 の順で拾う。 */
.guide{
  --g-surface: var(--surface, var(--card, #fff));
  --g-sunken:  var(--sunken, var(--bg, #f5f2ea));
  --g-accent:  var(--accent, var(--orange, #B8430C));
  --g-soft:    var(--accent-soft, rgba(232,74,32,.10));
  --g-line:    var(--line, #ddd);
  --g-ink:     var(--ink, #222); --g-ink-2: var(--ink-2, #555); --g-ink-3: var(--ink-3, #888);
  color: var(--g-ink); max-width: 980px; margin: 0 auto; line-height: 1.8;
}
.guide a{ color: var(--g-accent); }
.guide code{ background: var(--g-sunken); padding: .05rem .35rem; border-radius: 4px; font-size: .9em; }
.g-hero{ padding: 2rem; border: 1px solid var(--g-line); border-radius: 18px; background: var(--g-surface); }
.g-eyebrow{ color: var(--g-accent); font-size: .8rem; font-weight: 700; }
.g-hero h1{ margin: .7rem 0; font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.4; letter-spacing: -.02em; }
.g-hero p{ color: var(--g-ink-2); font-size: .95rem; max-width: 40rem; }
.g-btn{ display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 1.2rem; margin: .4rem .4rem 0 0;
  border-radius: 10px; border: 1px solid var(--g-line); background: var(--g-surface); color: var(--g-ink) !important; font-weight: 700; text-decoration: none; }
.g-btn--primary{ background: var(--g-accent); border-color: var(--g-accent); color: #fff !important; }
.g-toc{ display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .55rem; margin: 1rem 0 1.4rem; }
.g-toc a{ display: grid; grid-template-columns: auto 1fr; column-gap: .55rem; padding: .7rem .8rem; border: 1px solid var(--g-line);
  border-radius: 12px; background: var(--g-surface); color: var(--g-ink) !important; text-decoration: none; line-height: 1.4; }
.g-toc span{ grid-row: span 2; color: var(--g-accent); font-weight: 700; font-size: .8rem; padding-top: .1rem; }
.g-toc b{ font-size: .86rem; }
.g-toc small{ color: var(--g-ink-3); font-size: .74rem; }
.g-sec{ margin: 1rem 0; padding: 1.5rem; background: var(--g-surface); border: 1px solid var(--g-line); border-radius: 16px; scroll-margin-top: 90px; }
.g-sec > header{ display: flex; align-items: flex-start; gap: .9rem; margin-bottom: 1.1rem; }
.g-num{ display: grid; place-items: center; min-width: 40px; min-height: 40px; border-radius: 10px; color: var(--g-accent); background: var(--g-soft); font-weight: 700; }
.g-sec h2{ margin: 0; font-size: 1.22rem; line-height: 1.4; }
.g-sec header p{ margin: .3rem 0 0; color: var(--g-ink-3); font-size: .85rem; }
.g-sec p, .g-sec li{ font-size: .92rem; color: var(--g-ink-2); }
.g-sec b{ color: var(--g-ink); }
.g-h3{ font-size: 1rem; margin: 1.3rem 0 .4rem; }
.g-list{ padding-left: 1.2rem; margin: .4rem 0 .6rem; }
.g-list li{ padding: .22rem 0; }
.g-steps{ padding-left: 1.3rem; margin: .4rem 0; }
.g-steps li{ padding: .35rem 0; }
.g-steps p{ margin: .2rem 0 0; }
.g-mini{ padding-left: 1.2rem; margin: .3rem 0 0; }
.g-mini li{ padding: .15rem 0; font-size: .88rem; }
.g-flow{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin: 1rem 0; }
.g-flow div{ padding: 1rem; border-radius: 12px; background: var(--g-sunken); }
.g-flow span{ display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--g-accent); color: #fff; font-weight: 700; font-size: .8rem; margin-right: .4rem; }
.g-flow b{ font-size: .95rem; } .g-flow small{ display: block; color: var(--g-ink-3); margin-top: .2rem; }
.g-cards{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; margin: .8rem 0; }
.g-cards--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-cards article{ min-width: 0; padding: 1rem; border-radius: 12px; background: var(--g-sunken); }
.g-cards article > span{ color: var(--g-accent); font-size: .75rem; font-weight: 700; }
.g-cards h3{ font-size: .98rem; margin: .3rem 0; }
.g-cards p{ margin: .3rem 0 0; font-size: .88rem; }
.g-note{ padding: .8rem 1rem; border-radius: 10px; background: var(--g-sunken); font-size: .88rem !important; }
.g-warn{ padding: .9rem 1rem; border-radius: 10px; border: 1px solid #d9534f; background: rgba(217,83,79,.08); }
.g-table-wrap{ overflow-x: auto; margin: .8rem 0; -webkit-overflow-scrolling: touch; }
.g-table{ width: 100%; border-collapse: collapse; font-size: .86rem; min-width: 560px; }
.g-table th, .g-table td{ padding: .6rem .7rem; border-bottom: 1px solid var(--g-line); text-align: left; vertical-align: top; color: var(--g-ink-2); }
.g-table thead th{ color: var(--g-ink); font-size: .8rem; background: var(--g-sunken); }
.g-table tbody th{ color: var(--g-ink); white-space: nowrap; }
.g-table small{ display: block; color: var(--g-ink-3); font-weight: 400; font-size: .75rem; }
.g-table--plans td{ text-align: center; } .g-table--plans tbody th{ white-space: normal; min-width: 9rem; }
.g-terms{ margin: .8rem 0; }
.g-terms > div{ display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: .8rem; padding: .6rem 0; border-bottom: 1px solid var(--g-line); font-size: .88rem; }
.g-terms dt{ font-weight: 700; } .g-terms dd{ margin: 0; color: var(--g-ink-2); }
.g-faq{ margin-top: .6rem; padding: .1rem .9rem; border: 1px solid var(--g-line); border-radius: 10px; }
.g-faq summary{ padding: .75rem 0; cursor: pointer; font-size: .9rem; font-weight: 600; color: var(--g-ink); }
.g-faq p{ margin: 0 0 .8rem; font-size: .88rem; }
.g-help{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin-top: 1.1rem; }
.g-help a{ display: block; padding: 1rem; border-radius: 12px; background: var(--g-sunken); color: var(--g-ink) !important; text-decoration: none; }
.g-help small{ display: block; color: var(--g-ink-3); font-size: .8rem; margin-top: .25rem; line-height: 1.6; }
@media (max-width: 720px){
  .g-hero{ padding: 1.2rem; }
  .g-sec{ padding: 1rem; }
  .g-toc{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-flow, .g-cards, .g-cards--2, .g-help{ grid-template-columns: 1fr; }
  .g-terms > div{ grid-template-columns: 1fr; gap: .2rem; }
}
.g-crumb{ font-size:.8rem; color:var(--g-ink-3); margin:.2rem 0 .6rem; }
.g-art h1{ font-size:clamp(1.4rem,3vw,1.9rem); line-height:1.45; margin:0 0 1rem; }
.g-art h2{ font-size:1.15rem; margin:1.6rem 0 .5rem; padding-top:.8rem; border-top:1px solid var(--g-line); }
.g-art p{ font-size:.98rem; line-height:1.95; }
.g-cta{ background:var(--g-soft); border-color:transparent; }
.g-cta h2{ font-size:1.1rem; margin:0 0 .4rem; }
/* 記事・ガイドの画面写真。スマホの画面をそのまま見せるので、幅は細め・枠つき */
.g-fig{ margin:1rem auto 1.4rem; max-width:360px; text-align:center; }
.g-fig img{ display:block; width:100%; height:auto; border:1px solid var(--g-line); border-radius:14px; box-shadow:0 6px 20px rgba(19,42,66,.10); background:#fff; }
.g-fig figcaption{ margin-top:.5rem; font-size:.8rem; color:var(--g-ink-3); line-height:1.6; }
.g-figs{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin:.6rem 0 1rem; }
.g-figs .g-fig{ flex:1 1 220px; max-width:300px; margin:0; }