/* SumaQ ブログ共通スタイル（全記事で共有）
   色・書体は LP（lp/d/index.html）とサービス画面のヘッダーに合わせる。白背景。 */
:root{
  --bg:#ffffff;
  --ink:#1f2a2e;
  --ink-soft:#5a6a70;
  --teal:#2f9e8f;
  --teal-deep:#257f73;
  --teal-pale:#eef7f5;
  --teal-line:#cfe6e1;
  --gold:#c9a227;
  --gold-pale:#fbf6e6;
  --line:#e3ebe9;
  --col:760px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:76px;-webkit-text-size-adjust:100%}
body{font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;color:var(--ink);background:var(--bg);
  font-size:17px;line-height:1.85;letter-spacing:.02em;overflow-x:hidden;overflow-wrap:anywhere}
img{display:block;max-width:100%;height:auto}
a{color:var(--teal-deep)}
h1,h2,h3{line-height:1.45;letter-spacing:.03em;font-weight:700}
p,li,dd,summary,figcaption{text-wrap:pretty}
strong{font-weight:700}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ヘッダー・フッター */
.b-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.b-header .in{max-width:1120px;margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo{display:flex;align-items:baseline;gap:10px;white-space:nowrap;font-weight:900;font-size:24px;letter-spacing:.02em;color:var(--teal);text-decoration:none;line-height:1}
.logo i{font-style:normal;color:var(--gold)}
.logo small{font-size:13px;font-weight:500;color:var(--ink-soft);letter-spacing:.1em}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border-radius:999px;
  background:var(--teal);color:#fff;font-weight:700;font-size:17px;text-decoration:none;letter-spacing:.04em;white-space:nowrap}
.btn:hover{background:var(--teal-deep)}
.b-header .btn{min-height:40px;padding:0 18px;font-size:14px}
.b-footer{margin-top:72px;padding:36px 0 44px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-soft)}
.b-footer .in{max-width:1120px;margin:0 auto;padding:0 24px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px}
.b-footer ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px}
.b-footer a{color:inherit;text-decoration:none}
.b-footer a:hover{color:var(--teal)}

/* 記事の骨格 */
.article{max-width:var(--col);margin:0 auto;padding:20px 24px 0}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:2px 0;font-size:13px;color:var(--ink-soft);line-height:1.6}
.crumbs li:not(:last-child)::after{content:"›";margin:0 8px;color:#a9b5b8}
.crumbs a{color:inherit;text-decoration:none}
.crumbs a:hover{color:var(--teal)}
.crumbs [aria-current]{color:var(--ink)}
.a-head{margin-top:22px}
.cat{display:inline-block;font-size:13px;font-weight:700;color:var(--teal-deep);background:var(--teal-pale);
  border:1px solid var(--teal-line);border-radius:999px;padding:2px 14px;text-decoration:none}
.a-head h1{font-size:30px;margin:14px 0 14px;letter-spacing:.02em}
.meta{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:14px;color:var(--ink-soft);line-height:1.6}
.meta .by a{color:inherit}
.eyecatch{margin:22px 0 0}
.eyecatch img{width:100%;border:1px solid var(--line)}

/* 本文 */
.body{margin-top:28px}
.body>p,.body section>p{margin:0 0 1.25em}
.lead{font-size:18px}
.body h2{font-size:24px;margin:64px 0 22px;padding:0 0 12px 16px;border-left:5px solid var(--teal);border-bottom:1px solid var(--line)}
.body h3{font-size:20px;margin:40px 0 14px;padding-left:12px;border-left:3px solid var(--gold)}
.body ul.dots,.body ol.nums{margin:0 0 1.4em 1.4em}
.body ul.dots li,.body ol.nums li{margin:.3em 0}
.body ul.dots li::marker{color:var(--teal)}
.body ol.nums li::marker{color:var(--teal-deep);font-weight:700}

/* 要点ボックス・注意ボックス */
.point{background:var(--teal-pale);border:1px solid var(--teal-line);border-radius:12px;padding:20px 24px;margin:0 0 1.6em}
.point .ttl{font-weight:700;color:var(--teal-deep);margin-bottom:6px}
.point ul{list-style:none}
.point li{position:relative;padding-left:1.4em;margin:.35em 0}
.point li::before{content:"";position:absolute;left:.2em;top:.72em;width:.5em;height:.5em;border-radius:50%;background:var(--teal)}
.note{background:var(--gold-pale);border-left:4px solid var(--gold);border-radius:0 10px 10px 0;padding:16px 22px;margin:0 0 1.6em}
.note .ttl{font-weight:700;margin-bottom:4px}
.note ul{list-style:none}
.note li{position:relative;padding-left:1.3em;margin:.3em 0}
.note li::before{content:"";position:absolute;left:.15em;top:.75em;width:.45em;height:.45em;background:var(--gold)}

/* 目次 */
.toc{border:2px solid var(--teal-line);border-radius:14px;padding:18px 24px 20px;margin:32px 0 8px}
.toc .ttl{font-weight:700;font-size:17px;color:var(--teal-deep);margin-bottom:6px}
.toc ol{list-style:none;counter-reset:toc}
.toc>ol>li{counter-increment:toc;border-top:1px dashed var(--teal-line);padding:7px 0}
.toc>ol>li:first-child{border-top:0}
.toc>ol>li>a::before{content:counter(toc) ".";display:inline-block;min-width:1.8em;color:var(--teal);font-weight:700}
.toc a{color:var(--ink);text-decoration:none;font-size:16px}
.toc a:hover{color:var(--teal)}
.toc ol ol{margin:4px 0 0 1.8em;font-size:16px}
.toc ol ol li{padding:2px 0}
.toc ol ol a{font-size:16px;color:var(--ink-soft)}

/* 図版（画像は角丸なし） */
.fig{margin:8px 0 1.8em}
.fig img{width:100%;border:1px solid var(--line);background:#fff}
.fig figcaption{font-size:14px;color:var(--ink-soft);margin-top:8px;line-height:1.7}
.fig-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:8px 0 1.8em}
.fig-row .fig{margin:0}
.fig-phones{display:flex;justify-content:center;gap:28px;margin:8px 0 1.8em;flex-wrap:wrap}
.fig-phones .fig{margin:0;width:240px}

/* 表 */
.tbl-wrap{overflow-x:auto;margin:0 0 1.6em;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:15px;line-height:1.65}
th,td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
thead th{background:var(--teal-pale);color:var(--teal-deep);font-weight:700;white-space:nowrap}
tbody th{background:#f7faf9;font-weight:700;white-space:nowrap}
td.num{white-space:nowrap}

/* 4択の問題カード */
.qcards{display:grid;gap:16px;margin:0 0 1.6em}
.qcard{border:1px solid var(--line);border-radius:14px;padding:18px 20px 16px;background:#fff}
.qcard .qhead{display:flex;gap:12px;align-items:flex-start}
.qno{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:48px;height:34px;padding:0 10px;border-radius:999px;margin-top:2px;
  background:var(--teal);color:#fff;font-weight:700;font-size:15px;line-height:1;font-variant-numeric:tabular-nums}
.qtext{font-weight:700;font-size:18px;line-height:1.6;padding-top:5px}
.choices{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0 0}
.choices li{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:16px;line-height:1.5}
.choices b{flex:none;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:6px;
  background:var(--teal-pale);color:var(--teal-deep);font-size:14px}
.ans{margin-top:12px;border-top:1px dashed var(--teal-line);padding-top:8px}
.ans summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--teal-deep);font-size:15px;padding:4px 0}
.ans summary::-webkit-details-marker{display:none}
.ans summary::before{content:"";width:8px;height:8px;border-right:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(-45deg);transition:transform .15s}
.ans[open] summary::before{transform:rotate(45deg)}
.ans .a{display:flex;gap:10px;align-items:flex-start;margin-top:8px}
.ans .a p{margin:0}
.badge{flex:none;display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;margin-top:1px;
  font-weight:700;font-size:14px;line-height:1}
.badge.bq{background:var(--teal);color:#fff}
.badge.ba{background:var(--gold);color:#fff}
.ans .ok{font-weight:700}
.ans .tip{font-size:16px;color:var(--ink-soft);margin-top:2px}

/* 司会の読み上げ例 */
.script{border:1px solid var(--line);border-radius:12px;margin:0 0 1.6em;overflow:hidden}
.script dl{display:grid;grid-template-columns:7.5em 1fr}
.script dt,.script dd{padding:12px 16px;border-top:1px solid var(--line)}
.script dt:first-of-type,.script dd:first-of-type{border-top:0}
.script dt{background:#f7faf9;font-weight:700;font-size:15px;color:var(--teal-deep)}
.script dd{font-size:16px}

/* FAQ */
.faq{display:grid;gap:14px;margin:0 0 1.6em}
.faq .item{border:1px solid var(--line);border-radius:12px;padding:16px 20px}
.faq .q,.faq .a{display:flex;gap:12px;align-items:flex-start}
.faq .q h3{font-size:17px;margin:0;padding:2px 0 0;border:0;line-height:1.6}
.faq .a{border-top:1px dashed var(--teal-line);margin-top:12px;padding-top:12px}
.faq .a p{margin:0;padding-top:1px}

/* まとめ */
.summary{border:2px solid var(--teal);border-radius:14px;padding:20px 24px;margin:0 0 1.6em}

/* 著者ボックス */
.author{display:flex;gap:18px;align-items:flex-start;border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin:56px 0 0;background:#fff}
.author .mark{flex:none;width:64px;height:64px;border-radius:50%;background:var(--teal-pale);border:1px solid var(--teal-line);
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:22px;color:var(--teal);letter-spacing:.01em}
.author .mark i{font-style:normal;color:var(--gold)}
.author .lbl{font-size:14px;color:var(--ink-soft)}
.author .name{font-weight:700;font-size:18px;margin:2px 0 6px}
.author p{font-size:16px;line-height:1.8;margin:0}

/* CTA */
.cta{margin:40px 0 0;border-radius:16px;background:var(--teal-pale);border:1px solid var(--teal-line);padding:28px 28px 30px;text-align:center}
.cta .ttl{font-weight:700;font-size:22px;line-height:1.5}
.cta .ttl i{font-style:normal;color:var(--gold)}
.cta p{margin:10px auto 18px;max-width:34em;font-size:16px}
.cta small{display:block;margin-top:10px;font-size:13px;color:var(--ink-soft)}

/* 関連記事 */
.related{margin:56px 0 0}
.related h2{font-size:20px;margin:0 0 14px;padding-left:12px;border-left:4px solid var(--teal)}
.related ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.related li a{display:block;height:100%;border:1px solid var(--line);border-radius:12px;padding:16px 18px;text-decoration:none;color:var(--ink)}
.related li a:hover{border-color:var(--teal)}
.related .tag{display:inline-block;font-size:12px;color:var(--teal-deep);font-weight:700}
.related .soon{display:inline-block;margin-left:8px;font-size:12px;color:var(--ink-soft);border:1px solid var(--line);border-radius:999px;padding:0 8px}
.related .t{display:block;font-weight:700;font-size:16px;line-height:1.6;margin-top:4px}


/* 関連記事（未公開は span） */
.related .card-soon{display:block;height:100%;border:1px dashed #cdd7d9;border-radius:12px;padding:16px 18px;color:var(--ink-soft)}
.related .card-soon .t{color:var(--ink-soft)}

/* 一覧ページ（/blog/・カテゴリ） */
.list .a-head h1{margin-bottom:8px}
.list-lead{color:var(--ink-soft);font-size:16px}
.cats ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 8px}
.cats a{display:inline-block;font-size:14px;font-weight:700;color:var(--teal-deep);border:1px solid var(--teal-line);border-radius:999px;padding:4px 16px;text-decoration:none}
.cats a[aria-current]{background:var(--teal);border-color:var(--teal);color:#fff}
.posts{list-style:none;display:grid;gap:22px;margin:24px 0 0}
.post{display:grid;grid-template-columns:300px 1fr;gap:22px;border:1px solid var(--line);border-radius:14px;padding:18px;align-items:start}
.post-img img{width:100%;border:1px solid var(--line)}
.post-ttl{font-size:19px;line-height:1.55;margin:8px 0 6px}
.post-ttl a{color:var(--ink);text-decoration:none}
.post-ttl a:hover{color:var(--teal)}
.post-ex{font-size:16px;line-height:1.8;margin:0}
.post-date{font-size:14px;color:var(--ink-soft);margin-top:6px}

@media (max-width:768px){
  body{font-size:16px;line-height:1.85}
  .b-header .in{padding:0 16px;height:58px}
  .logo{font-size:21px}
  .logo small{display:none}
  .b-header .btn{min-height:38px;padding:0 14px;font-size:13px}
  .article{padding:14px 16px 0}
  .a-head h1{font-size:23px}
  .lead{font-size:17px}
  .body h2{font-size:21px;margin-top:52px;padding-left:12px}
  .body h3{font-size:18px}
  .toc{padding:14px 16px 16px}
  .point,.note{padding:16px 16px}
  .fig-row{grid-template-columns:1fr;gap:14px}
  .fig-phones{gap:14px;flex-wrap:nowrap}
  .fig-phones .fig{width:calc(50% - 7px)}
  .qcard{padding:16px 14px 14px}
  .qtext{font-size:17px}
  .choices{grid-template-columns:1fr}
  .script dl{grid-template-columns:1fr}
  .script dt{border-top:1px solid var(--line);padding:8px 14px}
  .script dd{border-top:0;padding:8px 14px 12px}
  .faq .item{padding:14px 14px}
  .author{padding:16px;gap:14px}
  .author .mark{width:52px;height:52px;font-size:18px}
  .cta{padding:22px 16px 24px}
  .cta .ttl{font-size:19px}
  .cta .btn{width:100%;max-width:340px}
  .cta p{text-align:left}
  .related ul{grid-template-columns:1fr}
  table{font-size:14px}
  th,td{padding:8px 8px}
  td.num,thead th{white-space:normal}
  .b-footer .in{padding:0 16px}
  .post{grid-template-columns:1fr;gap:12px;padding:14px}
  .post-ttl{font-size:18px}
}

/* ===== 2026-10-30 追加：問題カードの種類ラベル・答えの常時表示 ===== */
.qtype{display:inline-block;margin:0 0 10px;padding:1px 12px;border:1px solid var(--teal-line);border-radius:999px;background:var(--teal-pale);color:var(--teal-deep);font-size:13px;font-weight:700;line-height:1.7}
.qtype.gold{border-color:var(--gold);background:var(--gold-pale);color:#7a5f0c}
.qcard .fig{margin:14px 0 0}
.qcard .fig figcaption{font-size:14px}

/* ===== 共通部品：サイドバー（目次＋バナー）。PC 1024px以上で右に出す ===== */
.toc-sp summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;margin:0}
.toc-sp summary::-webkit-details-marker{display:none}
.toc-sp summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(45deg);margin-right:4px;transition:transform .15s}
.toc-sp[open] summary::after{transform:rotate(-135deg)}
.toc-sp[open] summary{margin-bottom:6px}
.side{display:none}
.bn{border:1px solid var(--teal-line);background:#fff}
.bn img{width:100%;height:auto;border:0}
.bn-in{padding:16px 18px 20px;text-align:center;border-top:4px solid var(--teal)}
.bn-logo{font-weight:900;font-size:28px;line-height:1.2;color:var(--teal);letter-spacing:.01em}
.bn-logo i{font-style:normal;color:var(--gold)}
.bn-sub{font-size:13px;font-weight:700;color:var(--teal-deep);margin:4px 0 8px}
.bn-txt{font-size:14px;line-height:1.7;color:var(--ink-soft);margin:0 0 14px;text-align:left}
.bn .btn{width:100%;min-height:48px;padding:0 16px;font-size:16px}
.bn-inline{margin:40px 0 8px;display:grid;grid-template-columns:1fr}
@media (min-width:1024px){
  .article.has-side{max-width:1140px}
  .layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:stretch}
  .side{display:block}
  .side-in{position:sticky;top:84px;display:grid;gap:20px}
  .side-toc{border:1px solid var(--line);border-top:4px solid var(--teal);padding:12px 14px 10px}
  .side-toc .ttl{font-weight:700;font-size:15px;color:var(--teal-deep);margin-bottom:6px}
  .side-toc ol{list-style:none;margin:0;padding:0}
  .side-toc li{margin:0}
  .side-toc a{display:block;padding:5px 8px;border-left:3px solid transparent;color:var(--ink);font-size:14px;line-height:1.55;text-decoration:none}
  .side-toc ol ol a{padding-left:20px;font-size:13px;color:var(--ink-soft)}
  .side-toc a:hover{color:var(--teal)}
  .side-toc a.is-active{border-left-color:var(--teal);background:var(--teal-pale);color:var(--teal-deep);font-weight:700}
  .bn-side img{height:96px;object-fit:cover}
  .bn-side .bn-in{padding:12px 16px 16px}
  .bn-side .bn-logo{font-size:24px}
  .bn-side .bn-txt{margin-bottom:10px}
  .bn-side .btn{min-height:44px}
  .side-toc a{padding:4px 8px}
  .toc-sp,.bn-inline{display:none}
}
/* 見出しの最後の1字だけが改行されないように（R27） */
h1,h2,h3,.qtext,.post-ttl,.cta .ttl{word-break:auto-phrase;text-wrap:pretty}
thead th{white-space:nowrap}
table th,table td{word-break:auto-phrase}
td.num{white-space:nowrap}
td.nw{white-space:nowrap}
th .sub,td .sub{font-size:.86em;font-weight:500;color:var(--ink-soft)}
@media (min-width:1024px){
  .side-toc ol{max-height:calc(100vh - 525px);min-height:96px;overflow:auto}
}