/* コラム共通スタイル */
.wrap{max-width:760px}
.crumb{font-size:13.5px;color:var(--ink-mute);margin-bottom:18px}
.crumb a{color:var(--ink-mute);text-decoration:none}
.crumb a:hover{color:var(--navy);text-decoration:underline}
.cat{display:inline-block;font-size:13px;font-weight:800;color:#fff;background:var(--brick);
     padding:5px 14px;border-radius:999px;letter-spacing:.04em}
.meta{margin-top:18px;font-size:16px;color:var(--ink-mute)}
.kotae{background:var(--navy-deep);color:#EDE6D8;border-radius:14px;padding:28px 30px;margin:32px 0}
.kotae b{display:block;color:#fff;font-size:16px;font-weight:800;letter-spacing:.06em;margin-bottom:14px}
.kotae ul{margin:0 0 0 1.2em}
.kotae li{margin:10px 0;font-size:17px}
.kotae li b{display:inline;font-size:inherit;letter-spacing:0;margin:0;color:#E5B95F}
.toc{background:var(--paper-2);border:1px solid var(--rule);border-radius:12px;padding:24px 28px;margin:34px 0}
.toc p{font-weight:800;color:var(--navy);margin:0 0 12px;font-size:17px;letter-spacing:.04em}
.toc ol{margin:0 0 0 1.3em}
.toc li{margin:7px 0;font-size:16.5px}
.toc a{text-decoration:none}
.toc a:hover{text-decoration:underline}
.warn{background:#FCF4F1;border:1px solid #EFD6CC;border-radius:12px;
      padding:20px 24px;margin:24px 0;font-size:16.5px}
.warn b{color:var(--brick)}
th.q{width:38%}
@media (max-width:560px){th.q{white-space:normal;width:34%}table:has(th.q){min-width:0}}
.pr{border:2px solid var(--gold);border-radius:14px;padding:28px 30px;margin:46px 0;background:#FDFBF6}
.pr .lbl{display:inline-block;font-size:14px;font-weight:800;color:#fff;background:var(--gold);
      padding:5px 12px;border-radius:4px;letter-spacing:.08em;margin-bottom:16px}
.pr h3{margin:0 0 12px;font-size:20px;color:var(--navy)}
.pr p{font-size:16.5px;margin:12px 0}
.pr .cmp{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0 6px}
.pr .cmp div{background:#fff;border:1px solid var(--rule);border-radius:10px;padding:16px 18px}
.pr .cmp b{display:block;color:var(--navy);font-size:16px;margin-bottom:7px}
.pr .cmp span{font-size:16px;color:var(--ink-soft);line-height:1.8}
@media (max-width:560px){.pr .cmp{grid-template-columns:1fr}}
.faq dt{font-weight:800;color:var(--navy);font-size:17.5px;margin:26px 0 8px}
.faq dd{margin:0;font-size:16.5px;color:var(--ink-soft)}
.dl{display:grid;grid-template-columns:1fr;gap:12px;margin:22px 0}
.dl a{display:flex;align-items:flex-start;gap:13px;background:var(--card);border:1px solid var(--rule);
      border-radius:11px;padding:17px 19px;text-decoration:none;color:inherit;transition:.18s}
.dl a:hover{border-color:var(--navy);transform:translateY(-2px);box-shadow:0 8px 22px rgba(20,29,39,.09)}
.dl svg{flex:none;width:26px;height:26px;color:var(--brick);margin-top:2px}
.dl b{display:block;font-size:16px;color:var(--navy);font-weight:800;line-height:1.5}
.dl span{display:block;font-size:16px;color:var(--ink-mute);margin-top:4px;line-height:1.65}
.soon{background:var(--paper-2);border:1px dashed var(--rule);border-radius:11px;padding:20px 22px;
      margin:18px 0;font-size:16px;color:var(--ink-soft)}
.soon b{color:var(--navy)}
.rel{margin:44px 0 0}
.rel-h{font-weight:800;color:var(--navy);font-size:16px;letter-spacing:.04em;margin-bottom:12px}
.rel a{display:block;background:var(--card);border:1px solid var(--rule);border-radius:11px;
       padding:18px 20px;text-decoration:none;color:inherit;transition:.18s}
.rel a:hover{border-color:var(--navy);transform:translateY(-2px);box-shadow:0 8px 22px rgba(20,29,39,.09)}
.rel b{display:block;font-size:16.5px;color:var(--navy);line-height:1.55}
.rel span{display:block;font-size:16px;color:var(--ink-mute);margin-top:5px}
/* 記事末尾のCTA。中身は build/column-tpl/cta.py が出す。
   見出しとボタンだけ中央、本文は左揃え。長い文を中央に置くと読みにくいため */
.end{background:var(--paper-2);border:1px solid var(--rule);border-radius:14px;
     padding:38px 32px 34px;margin:54px 0 0}
.end-in{max-width:520px;margin:0 auto}
.end-eyebrow{display:block;width:fit-content;margin:0 auto 18px;font-size:12.5px;font-weight:800;
  letter-spacing:.09em;color:var(--brick);border:1px solid var(--brick);border-radius:999px;
  padding:6px 16px;line-height:1}
.end h3{color:var(--navy);font-size:23px;line-height:1.5;margin:0 0 16px;text-align:center;
  letter-spacing:.01em}
.end-in > p{color:var(--ink-soft);font-size:16px;line-height:1.9;margin:0 0 22px;text-align:left}
.end-facts{list-style:none;margin:0 0 26px;padding:22px 24px;
  background:var(--card);border:1px solid var(--rule);border-radius:11px}
.end-facts li{position:relative;padding-left:22px;font-size:16px;line-height:1.75;
  color:var(--ink);margin-top:12px;text-align:left}
.end-facts li:first-child{margin-top:0}
.end-facts li::before{content:"";position:absolute;left:4px;top:10px;width:6px;height:6px;
  border-radius:50%;background:var(--brick)}
.end .btn{display:flex;align-items:center;justify-content:center;gap:10px;background:#06C755;color:#fff;
     font-weight:800;font-size:17px;padding:18px 24px;border-radius:10px;text-decoration:none;
     transition:.16s}
.end .btn:hover{filter:brightness(1.06);transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(6,199,85,.28)}
.end .btn svg{width:22px;height:22px;flex:none}
.end .end-note{font-size:16px;color:var(--ink-mute);line-height:1.8;margin:14px 0 0;text-align:left}
@media (max-width:560px){
  .end{padding:28px 20px 26px}
  .end h3{font-size:20px}
  .end-facts{padding:18px 18px}
  .end-facts li{font-size:16px}
  .end .btn{font-size:16px;padding:17px 18px}
}
.src{font-size:15px;color:var(--ink-mute);margin-top:44px;border-top:1px solid var(--rule);padding-top:20px;overflow-wrap:anywhere}
.src a{color:var(--ink-mute)}
/* 固定CTA（2026-10-05）。LINEの開業ロードマップ1本 */
.fixcta{position:fixed;z-index:60;right:26px;bottom:26px;width:310px;background:var(--navy-deep);
        color:#fff;border-radius:14px;padding:22px 24px;box-shadow:0 18px 48px rgba(18,39,64,.42);
        font-family:"Hiragino Sans","Yu Gothic",sans-serif}
.fixcta .ttl{font-size:17px;font-weight:800;line-height:1.55;margin-bottom:8px}
.fixcta .sub{font-size:14px;color:#B9C6D6;line-height:1.7;margin-bottom:16px}
.fixcta .acts{display:flex;flex-direction:column;gap:9px}
.fixcta .go{display:flex;align-items:center;justify-content:center;gap:8px;
            font-weight:800;font-size:15.5px;padding:14px 10px;border-radius:9px;
            text-decoration:none;white-space:nowrap;transition:.15s}
.fixcta .go svg{width:20px;height:20px;flex:none}
.fixcta .go-site{background:#FFFFFF;color:var(--navy)}
.fixcta .go-site:hover{background:#EFE9DC}
.fixcta .go-line{background:#06C755;color:#fff}
.fixcta .go-line:hover{filter:brightness(1.08)}
.fixcta .lbl-sm{display:none}
@media (max-width:820px){
  .fixcta{right:0;left:0;bottom:0;width:auto;border-radius:0;padding:10px 12px;
          box-shadow:0 -6px 22px rgba(18,39,64,.34)}
  .fixcta .ttl{font-size:13px;line-height:1.5;margin-bottom:8px;text-align:center;
               white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fixcta .sub{display:none}
  .fixcta .acts{flex-direction:row;gap:8px}
  .fixcta .go{flex:1;min-width:0;padding:13px 6px;font-size:14px;gap:6px}
  .fixcta .go svg{width:18px;height:18px}
  .fixcta .lbl-lg{display:none}
  .fixcta .lbl-sm{display:inline}
  footer{padding-bottom:120px}
}
@media (max-width:360px){.fixcta .go{font-size:13px}.fixcta .ttl{font-size:12px}}
@media print{.fixcta{display:none}}

/* PR枠の締めボタン。テキストリンクだと押されないのでボタンにする */
.pr .more-btn{display:inline-flex;align-items:center;gap:10px;margin-top:6px;
  background:var(--navy);color:#fff;font-weight:800;font-size:16.5px;
  padding:16px 30px;border-radius:10px;text-decoration:none;transition:.16s}
.pr .more-btn:hover{background:var(--navy-deep);transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(20,29,39,.18)}
.pr .more-btn svg{width:19px;height:19px;flex:none}
.pr .more-note{display:block;font-size:16px;color:var(--ink-mute);margin-top:10px}

/* 実写写真。記事の中に置く。キャプションは省略可 */
.shot{margin:26px 0}
.shot img{display:block;width:100%;height:auto;border-radius:12px;
  border:1px solid var(--rule);box-shadow:0 8px 24px rgba(20,29,39,.10)}
.shot figcaption{margin-top:9px;font-size:16px;color:var(--ink-mute);line-height:1.75}

/* 記事の書き手。誰が書いたかを最初に見せる */
.byline{display:flex;align-items:center;gap:15px;margin:22px 0 0;padding:16px 18px;
  background:var(--card);border:1px solid var(--rule);border-radius:12px}
.byline .face{width:66px;height:66px;border-radius:50%;object-fit:cover;flex:none;
  border:2px solid #fff;box-shadow:0 2px 9px rgba(20,29,39,.18)}
.byline .who{flex:1;min-width:0}
.byline .who > b{display:inline;font-size:16.5px;color:var(--navy);letter-spacing:.02em}
.byline .who em{font-style:normal;font-size:13px;color:var(--ink-soft);margin-left:9px;font-weight:700}
.byline .who span b{color:var(--navy);font-weight:800}
.byline .who span{display:block;font-size:12.5px;color:var(--ink-mute);line-height:1.7;margin-top:3px}
.byline .when{font-size:12px;color:var(--ink-mute);line-height:1.75;text-align:right;flex:none}
@media (max-width:560px){
  .byline{gap:12px;padding:14px 15px}
  .byline .face{width:56px;height:56px}
  .byline .when{display:none}
}

/* 別サービスへの控えめな導線。記事本文のCTAは開業サポートのまま変えない */
.xlink{display:block;background:var(--paper-2);border:1px solid var(--rule);
  border-left:5px solid var(--gold);border-radius:0 12px 12px 0;
  padding:18px 22px;margin:30px 0;text-decoration:none}
.xlink b{display:block;color:var(--navy);font-size:16px;margin-bottom:5px}
.xlink span{display:block;font-size:16px;color:var(--ink-soft);line-height:1.85}
.xlink em{font-style:normal;color:var(--brick);font-weight:800;white-space:nowrap}
.xlink:hover{background:#EFE8DA}

/* 記事末尾の電話導線（2026-09-08 追加） */
.end .tel-alt{display:flex;align-items:center;justify-content:center;gap:11px;
  margin:12px 0 0;padding:14px 16px;border:1.5px solid var(--navy);background:var(--card);
  border-radius:12px;color:var(--navy);text-decoration:none;transition:.2s}
.end .tel-alt:hover{background:#EEF2F7}
.end .tel-alt svg{width:20px;height:20px;flex:none;opacity:.9}
.end .tel-alt .t{font-size:14px;opacity:.82;display:block;line-height:1.5}
.end .tel-alt .n{font-size:19px;font-weight:800;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;line-height:1.25}
@media(max-width:600px){.end .tel-alt .n{font-size:18px}}

/* 文字を大きく（2026-09-25 TAMA：コラム全体と説明書きを大きめに） */
main{font-size:19px}
.lead{font-size:17.5px}
.kotae li{font-size:18px}
.toc li{font-size:17.5px}
.pr p,.faq dd{font-size:18px}
.faq dt{font-size:19px}
.dl b{font-size:17px}
.dl span{font-size:16.5px}
.shot figcaption{font-size:16px}
.rel b{font-size:17.5px}
.rel span{font-size:16.5px}
.xlink span{font-size:16px}
.end-in > p{font-size:17px}
.end-facts li{font-size:16.5px}
.end .tel-alt .t{font-size:16px;opacity:1}
.byline .who span{font-size:14px}
@media(max-width:600px){.end-facts li{font-size:16px}}

/* キャラクター（2026-10-05）佐藤さん＝聞く人／安場さん＝答える人 */
.talk{display:flex;align-items:flex-end;gap:12px;margin:34px 0 -14px}
.talk img{flex:none;width:96px;height:96px;object-fit:contain}
.talk .bubble{position:relative;background:#fff;border:1.5px solid var(--rule);border-radius:16px;
  padding:14px 18px;margin-bottom:22px;font-size:18px;font-weight:700;color:var(--ink);line-height:1.6}
.talk .bubble::before{content:"";position:absolute;left:-9px;bottom:16px;width:16px;height:16px;background:#fff;
  border-left:1.5px solid var(--rule);border-bottom:1.5px solid var(--rule);transform:rotate(45deg)}
.talk .who{display:block;font-size:14px;font-weight:700;color:var(--ink-mute);margin-bottom:2px;letter-spacing:.04em}
.kotae.has-face{position:relative;padding-top:30px}
.kotae.has-face .face-ch{position:absolute;right:14px;top:-62px;width:92px;height:92px;object-fit:contain}
.kotae.has-face > b{padding-right:96px}
.kotae .who{display:inline;font-size:14px;font-weight:700;color:#C9BFA8;letter-spacing:.04em;margin-left:8px}
.warn.has-face{display:flex;gap:14px;align-items:flex-start}
.warn.has-face .face-ch{flex:none;width:68px;height:68px;object-fit:contain;margin-top:-4px}
.warn.has-face .warn-tx{flex:1;min-width:0}
.faq-h{display:flex;align-items:center;gap:10px}
.faq-h img{width:64px;height:64px;object-fit:contain}
.end .end-ch{display:block;width:110px;height:110px;object-fit:contain;margin:-8px auto 6px}
@media (max-width:560px){
  .talk img{width:80px;height:80px}
  .talk .bubble{font-size:17px;padding:12px 15px}
  .kotae.has-face .face-ch{width:78px;height:78px;top:-52px;right:10px}
  .kotae.has-face > b{padding-right:76px}
  .warn.has-face .face-ch{width:56px;height:56px}
}

/* 固定CTA：資料の表紙つき（2026-10-05） */
.fixcta{display:grid;grid-template-columns:62px 1fr;column-gap:14px;align-items:start}
.fixcta .fx-cover{width:62px;height:auto;border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.35);grid-row:1}
.fixcta .txt{grid-column:2}
.fixcta .acts{grid-column:1 / -1}
.fixcta .sub{margin-bottom:14px}
.end .end-note{font-size:16px;color:var(--ink-mute);text-align:center;margin:10px 0 0}
@media (max-width:820px){
  .fixcta{display:flex;align-items:center;gap:10px}
  .fixcta .fx-cover{width:34px}
  .fixcta .txt{display:none}
  .fixcta .acts{flex:1}
}
.end .end-sub{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;padding:13px 10px;border-radius:10px;
  background:#fff;color:#05A548;border:2px solid #06C755;font-weight:800;font-size:16px;text-decoration:none}
.end .end-sub svg{width:20px;height:20px;flex:none}

/* ===== 2026-10-05 TAMA：文字を大きく・題名を句で折り返す・ヘッダーとフッターをトップと同じに ===== */
/* 題名・見出しは句の途中で折らない（Chrome は auto-phrase、ほかは keep-all）。はみ出す時だけ折る */
h1,h2,h3,.kotae > b{word-break:keep-all;word-break:auto-phrase;overflow-wrap:anywhere;text-wrap:pretty}
h1 .ph{display:inline-block}
h1{font-size:clamp(28px,4.4vw,40px);line-height:1.45}
/* 見出し：左だけの色線をやめる */
main h2{border-left:0;padding-left:0;padding-bottom:12px;border-bottom:2px solid var(--rule);font-size:clamp(23px,3vw,27px);line-height:1.5;margin-top:56px;color:var(--navy)}
main h3{font-size:21px;line-height:1.55}
/* 本文を大きく（PC 20px／スマホ 18px） */
main{font-size:20px;line-height:2}
.lead{font-size:19px}
.kotae li,.toc li,.pr p,.faq dd,.warn,.rel b,.dl b{font-size:19px}
.faq dt{font-size:20px}
main table{font-size:17px}
.wrap{max-width:800px}
@media (max-width:600px){
  main{font-size:18px;line-height:1.95}
  .lead{font-size:17.5px}
  .kotae li,.toc li,.pr p,.faq dd,.warn,.rel b,.dl b{font-size:17.5px}
  .faq dt{font-size:18.5px}
  main h2{font-size:22px}
  h1{font-size:27px}
  .wrap{padding:0 18px}
}

/* ヘッダー（トップと同じ形） */
.hd2{position:sticky;top:0;z-index:50;background:rgba(251,248,242,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.w2{max-width:1080px;margin:0 auto;padding:0 20px}
.hd2 .w2{display:flex;align-items:center;justify-content:space-between;height:68px;gap:16px}
.hd2 .logo{height:40px;width:auto;display:block}
.hd2 nav{display:flex;gap:26px;font-size:15px;font-weight:700}
.hd2 nav a{text-decoration:none;color:var(--ink-soft)}
.hd2 nav a:hover{color:var(--navy)}
.hd2 .hb{background:#06C755;color:#fff;text-decoration:none;font-weight:800;font-size:15px;padding:11px 18px;border-radius:10px;display:flex;gap:8px;align-items:center;white-space:nowrap}
.hd2 .hb svg{width:19px;height:19px;flex:none}
@media (max-width:860px){.hd2 nav{display:none}.hd2 .logo{height:34px}}
/* フッター（トップと同じ形） */
footer.ft2{border-top:1px solid var(--rule);padding:36px 0 60px;font-size:14px;color:var(--ink-mute)}
footer.ft2 .w2{display:block}
footer.ft2 .fl{height:52px;width:auto;margin-bottom:14px}
footer.ft2 nav{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:10px}
footer.ft2 a{color:var(--ink-mute);text-decoration:none}
footer.ft2 a:hover{color:var(--navy);text-decoration:underline}
@media (max-width:820px){footer.ft2{padding-bottom:110px}}

/* ===== 2026-10-05 TAMA：読みやすさの全体調整 ===== */
/* 段落の間をあける（「。」で改行するぶん、段落の切れ目をはっきり） */
main .wrap p{margin:0}
main .wrap p + p{margin-top:1.15em}
main .wrap h2 + p,main .wrap h3 + p{margin-top:.6em}
/* 小さすぎる文字をなくす：表・カード・注記は最低 16.5px（スマホ 16px） */
main .spec span,main .spec .k,main .row .v,main .row .k,main .cmp p,main .cmp li,main .vs p,main .vs li,
main .money span,main .money .k,main .check li,main .flow p,main .step p,main .order p,main .why p,
main .who-note,main .more-note,main .shot figcaption,main .tbl-wrap td,main .tbl-wrap th,main table td,main table th,
main .dl span,main .item span,main .form p,main .voice small{font-size:16.5px;line-height:1.85}
@media (max-width:600px){
  main .spec span,main .spec .k,main .row .v,main .row .k,main .cmp p,main .cmp li,main .vs p,main .vs li,
  main .money span,main .money .k,main .check li,main .flow p,main .step p,main .order p,main .why p,
  main .who-note,main .more-note,main .shot figcaption,main .tbl-wrap td,main .tbl-wrap th,main table td,main table th,
  main .dl span,main .item span,main .form p,main .voice small{font-size:16px}
}
/* 表の見出し行：濃い背景の上の文字は白にそろえる（薄くて読めないのを防ぐ） */
main .r.h,main .row.h{background:var(--navy-deep)}
main .r.h,main .r.h span,main .r.h div,main .row.h,main .row.h *{color:#fff}
main .r.h .k{color:#E5B95F}
main thead th{color:var(--navy)}
/* 表・カードの列をそろえる：左の項目名の幅を固定し、上で揃える */
main .spec .r,main .row{align-items:start}

/* 右下の固定の案内：本文に重ならないよう、横に十分な余白がある画面だけ右下に置く。それ以外は画面下の帯 */
@media (max-width:1439px){
  .fixcta{left:50%;right:auto;transform:translateX(-50%);bottom:14px;width:min(560px,calc(100% - 24px));
          display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px}
  .fixcta .fx-cover{width:34px}
  .fixcta .txt{display:none}
  .fixcta .acts{flex:1}
  .fixcta .lbl-lg{display:none}.fixcta .lbl-sm{display:inline}
  footer.ft2{padding-bottom:110px}
}
@media (max-width:820px){.fixcta{bottom:0;width:100%;border-radius:0;transform:none;left:0}}

/* 本文の中の小さな注記（small）も読める大きさに */
main .wrap small{font-size:16px}
main .wrap .srcl,main .wrap .srcl a{font-size:15px}

/* LINEの緑：白い文字が読める濃さにする（明るい緑だと文字が薄く見える） */
.end .btn,.fixcta .go-line,.hd2 .hb{background:#039447}
.end .end-sub{color:#037A3B;border-color:#039447}
/* 著者欄・日付・小見出しの小さな文字 */
.byline .who span,.byline .who em{font-size:15.5px}
.byline .when{font-size:14px}
.end .end-eyebrow{font-size:14px}
main .r.h{display:flex;gap:16px;padding:10px 14px;border-radius:6px}

/* スマホの表：横にはみ出さないよう、1行ずつのカードに並べ替える（見出しの名前は data-label から出す） */
@media (max-width:600px){
  main .wrap table{min-width:0 !important;width:100%;border:0}
  main .wrap .tbl-wrap{overflow:visible;border:0}
  main .wrap table thead,main .wrap table tr:not(:has(td)){display:none}
  main .wrap table tr{display:block;background:#fff;border:1px solid var(--rule);border-radius:12px;padding:12px 14px;margin:0 0 12px}
  main .wrap table td,main .wrap table th{display:block;border:0 !important;padding:4px 0 !important;width:auto !important;white-space:normal !important;text-align:left !important}
  main .wrap table tr > :first-child{font-weight:800;color:var(--navy);font-size:17px}
  main .wrap table td[data-label]::before{content:attr(data-label);display:block;font-size:13.5px;font-weight:800;color:var(--ink-mute);margin-bottom:2px}
  main .wrap table tr > td:first-child[data-label]::before{display:none}
}
/* ヘッダーの緑ボタン（開業ロードマップ資料をもらう）：スマホでは文字を詰めて1行に収める */
@media (max-width:480px){.hd2 .logo{height:28px}.hd2 .hb{font-size:12.5px;padding:9px 10px;gap:5px;letter-spacing:-.02em}.hd2 .hb svg{width:15px;height:15px}}

/* ===== 2026-10-08(2) 独立・開業タイプ診断：iPhone 14 の比率（390x844 = 9:19.5）の端末の絵 =====
   中身は LINE のトーク画面。質問が来る→選択肢をタップ→返信が出る→次の質問→結果のカード。CSSだけで約9秒の繰り返し。
   動きを減らす設定の人には、止めて結果の画面を出す */
.shd-phone{position:relative;width:100%;max-width:232px;margin:0 auto;aspect-ratio:9/19.5;box-sizing:border-box;
  background:#0F1620;border-radius:15% / 6.9%;padding:1.6%;
  box-shadow:0 18px 40px rgba(18,39,64,.26),inset 0 0 0 1.5px #3A4556;
  font-family:"Hiragino Sans","Yu Gothic",sans-serif;text-align:left;word-break:auto-phrase;line-break:strict}
.shd-screen{position:relative;height:100%;background:#D4E3F3;border-radius:13% / 6%;overflow:hidden;display:flex;flex-direction:column}
.shd-island{position:absolute;z-index:3;top:1.6%;left:50%;width:30%;height:3.2%;transform:translateX(-50%);background:#0A0F16;border-radius:99px}
.shd-status{flex:none;height:6.4%;background:#fff}
.shd-bar{flex:none;background:#fff;padding:0 10px 7px;font-size:14px;font-weight:800;color:#1C3A5E;line-height:1.4;display:flex;align-items:center;gap:7px;
  border-bottom:1px solid #DCE5EF}
.shd-bar::before{content:"";flex:none;width:9px;height:9px;border-left:2.5px solid #1C3A5E;border-bottom:2.5px solid #1C3A5E;transform:rotate(45deg);margin:0 3px 0 4px}
.shd-chat{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;padding:8px 8px 2px;overflow:hidden}
.shd-m{flex:none;padding-bottom:8px;overflow:hidden;font-size:14px;line-height:1.5}
.shd-m.q{display:flex;gap:6px;align-items:flex-start}
.shd-av{flex:none;width:26px;height:26px;border-radius:50%;background:#fff url(/assets/character/yasuba-point.webp) 50% 8%/230% no-repeat;border:1.5px solid #fff;margin-top:1px}
.shd-q{background:#fff;color:#141D27;border-radius:3px 12px 12px 12px;padding:6px 10px;font-weight:700}
.shd-m.a{display:flex;justify-content:flex-end}
.shd-a{background:#06C755;color:#0A2E17;border-radius:12px 3px 12px 12px;padding:5px 11px;font-weight:700}
.shd-m.r{padding-left:30px}
.shd-res{background:#fff;border-radius:12px;padding:8px 10px;color:#141D27;display:flex;align-items:center;gap:8px;border-bottom:3px solid #E5B95F}
.shd-res img{flex:none;width:54px;height:54px;object-fit:contain;border-radius:8px;background:#F6F3EB}
.shd-res small{display:block;font-size:14px;color:#5A646E;font-weight:700;line-height:1.4}
.shd-res b{display:block;font-size:15px;color:#1C3A5E;line-height:1.4;overflow-wrap:anywhere}
.shd-res > div{min-width:0}
.shd-res span{display:block;font-size:14px;color:#A5432B;font-weight:800;line-height:1.4}
.shd-choices{flex:none;position:relative;height:31%;background:#F2F6FB;border-top:1px solid #C9D7E6}
.shd-cp{position:absolute;inset:0;padding:8px 8px 18px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px}
.shd-o{position:relative;background:#fff;color:#1C3A5E;border:1.5px solid #06C755;border-radius:999px;text-align:center;
  font-size:14px;font-weight:700;line-height:1.4;padding:4px 8px}
.shd-o.go{background:#06C755;color:#0A2E17;font-weight:800}
.shd-tap{position:absolute;right:16%;top:50%;width:30px;height:30px;margin-top:-6px;border-radius:50%;
  background:rgba(20,30,45,.34);border:2px solid #fff;opacity:0;pointer-events:none}
.shd-home{position:absolute;z-index:3;bottom:1.2%;left:50%;width:34%;height:4px;margin-left:-17%;border-radius:9px;background:#141D27}
@media (prefers-reduced-motion:reduce){
  .shd-m.q,.shd-m.a,.shd-cp.p1,.shd-cp.p2{display:none}
  .shd-cp.p3{opacity:1}
}
@media (prefers-reduced-motion:no-preference){
  .shd-m{opacity:0;max-height:0}
  .shd-cp{opacity:0}
  .shd-m.m1{animation:shdM1 9s ease infinite both}
  .shd-m.m2{animation:shdM2 9s ease infinite both}
  .shd-m.m3{animation:shdM3 9s ease infinite both}
  .shd-m.m4{animation:shdM4 9s ease infinite both}
  .shd-m.m5{animation:shdM5 9s ease infinite both}
  .shd-cp.p1{animation:shdP1 9s ease infinite both}
  .shd-cp.p2{animation:shdP2 9s ease infinite both}
  .shd-cp.p3{animation:shdP3 9s ease infinite both}
  .shd-cp.p1 .shd-o:first-child{animation:shdO1 9s ease infinite both}
  .shd-cp.p2 .shd-o:first-child{animation:shdO2 9s ease infinite both}
  .shd-cp.p1 .shd-tap{animation:shdT1 9s ease infinite both}
  .shd-cp.p2 .shd-tap{animation:shdT2 9s ease infinite both}
}
@keyframes shdM1{0%,2%{opacity:0;max-height:0;transform:translateY(8px)}6%,95%{opacity:1;max-height:170px;transform:none}99%,100%{opacity:0;max-height:170px}}
@keyframes shdM2{0%,28%{opacity:0;max-height:0;transform:translateY(8px)}32%,95%{opacity:1;max-height:170px;transform:none}99%,100%{opacity:0;max-height:170px}}
@keyframes shdM3{0%,38%{opacity:0;max-height:0;transform:translateY(8px)}42%,95%{opacity:1;max-height:170px;transform:none}99%,100%{opacity:0;max-height:170px}}
@keyframes shdM4{0%,62%{opacity:0;max-height:0;transform:translateY(8px)}66%,95%{opacity:1;max-height:170px;transform:none}99%,100%{opacity:0;max-height:170px}}
@keyframes shdM5{0%,72%{opacity:0;max-height:0;transform:translateY(8px)}76%,95%{opacity:1;max-height:170px;transform:none}99%,100%{opacity:0;max-height:170px}}
@keyframes shdP1{0%,8%{opacity:0;transform:translateY(12px)}12%,28%{opacity:1;transform:none}31%,100%{opacity:0;transform:translateY(12px)}}
@keyframes shdP2{0%,44%{opacity:0;transform:translateY(12px)}48%,62%{opacity:1;transform:none}65%,100%{opacity:0;transform:translateY(12px)}}
@keyframes shdP3{0%,80%{opacity:0;transform:translateY(12px)}84%,94%{opacity:1;transform:none}98%,100%{opacity:0;transform:translateY(12px)}}
@keyframes shdO1{0%,22%{background:#fff;color:#1C3A5E;transform:none}23%{transform:scale(.96)}25%,100%{background:#06C755;color:#0A2E17;transform:none}}
@keyframes shdO2{0%,58%{background:#fff;color:#1C3A5E;transform:none}59%{transform:scale(.96)}61%,100%{background:#06C755;color:#0A2E17;transform:none}}
@keyframes shdT1{0%,19%{opacity:0;transform:scale(.4)}22%{opacity:1;transform:scale(1)}26%{opacity:0;transform:scale(1.5)}100%{opacity:0}}
@keyframes shdT2{0%,55%{opacity:0;transform:scale(.4)}58%{opacity:1;transform:scale(1)}62%{opacity:0;transform:scale(1.5)}100%{opacity:0}}
@keyframes shdS1{0%,4%{opacity:0;max-height:0;transform:translateY(8px)}8%,95%{opacity:1;max-height:170px;transform:none}99%,100%{opacity:0;max-height:170px}}
@keyframes shdS2{0%,34%{opacity:0;max-height:0;transform:translateY(8px)}38%,95%{opacity:1;max-height:170px;transform:none}99%,100%{opacity:0;max-height:170px}}
@keyframes shdS3{0%,44%{opacity:0;max-height:0;transform:translateY(8px)}48%,95%{opacity:1;max-height:170px;transform:none}99%,100%{opacity:0;max-height:170px}}
@keyframes shdSP{0%,10%{opacity:0;transform:translateY(12px)}14%,34%{opacity:1;transform:none}37%,100%{opacity:0;transform:translateY(12px)}}
@keyframes shdST{0%,22%{opacity:0;transform:scale(.4)}25%{opacity:1;transform:scale(1)}29%{opacity:0;transform:scale(1.5)}100%{opacity:0}}
@keyframes shdSO{0%,25%{background:#fff}28%,100%{background:#06C755}}

/* 小さな端末（右下の固定・文字なし）。同じ動きを、線と色だけで見せる */
.shd-phone.sm{max-width:none;padding:3%;border-radius:16% / 7.4%}
.shd-phone.sm .shd-screen{border-radius:13% / 6%}
.shd-phone.sm .shd-island{height:2.4%}
.shd-sm-bar{flex:none;height:9%;background:#fff;margin-top:6%}
.shd-sm-chat{flex:1;min-height:0;position:relative;padding:8% 7%;display:flex;flex-direction:column;gap:7%;overflow:hidden}
.shd-sm-chat i{display:block;border-radius:6px}
.shd-sm-q{background:#fff;width:70%;height:11%;flex:none}
.shd-sm-a{background:#06C755;width:44%;height:8%;align-self:flex-end;flex:none}
.shd-sm-res{background:#fff;height:19%;flex:none;border-bottom:3px solid #E5B95F}
.shd-sm-ch{flex:none;position:relative;height:30%;background:#F2F6FB;border-top:1px solid #C9D7E6}
.shd-sm-ch i{position:absolute;left:8%;right:8%;height:20%;border:1.5px solid #06C755;border-radius:99px;background:#fff}
.shd-sm-ch i:nth-child(1){top:12%}.shd-sm-ch i:nth-child(2){top:40%}.shd-sm-ch i:nth-child(3){top:68%}
.shd-sm-ch .shd-tap{width:16px;height:16px;right:22%;top:20%;margin:0;border-width:1.5px}
@media (prefers-reduced-motion:reduce){.shd-sm-ch{display:none}}
@media (prefers-reduced-motion:no-preference){
  .shd-sm-q,.shd-sm-a,.shd-sm-res{opacity:0}
  .shd-sm-q{animation:shdS1 9s ease infinite both}
  .shd-sm-a{animation:shdS2 9s ease infinite both}
  .shd-sm-res{animation:shdS3 9s ease infinite both}
  .shd-sm-ch{animation:shdSP 9s ease infinite both}
  .shd-sm-ch i:nth-child(1){animation:shdSO 9s ease infinite both}
  .shd-sm-ch .shd-tap{animation:shdST 9s ease infinite both}
}

/* ボタン（診断へ） */
.shd-btn{display:flex;align-items:center;justify-content:center;gap:8px;background:#1C3A5E;color:#fff !important;
  font-weight:800;font-size:17px;line-height:1.4;padding:16px 20px;border-radius:10px;text-decoration:none !important;transition:.16s;min-height:52px}
.shd-btn:hover{background:#122740;transform:translateY(-2px);box-shadow:0 10px 24px rgba(18,39,64,.22)}
.shd-btn::after{content:"→";font-weight:800}

/* 記事の中段：PR枠の診断カード（2026-10-08 Opus）。
   PC：左に端末、右に見出し・説明・ボタン。スマホ：端末と見出しを横に並べ、ボタンだけ下に横いっぱい */
.shd-pr{display:grid;grid-template-columns:168px 1fr;grid-template-areas:"head head" "ph tx" "ph btn";column-gap:28px;align-items:center;
  margin:40px 0;border:1px solid #D3DFEC;border-radius:18px;background:#EEF4FA;padding:18px 26px 24px}
.shd-pr-head{grid-area:head;display:flex;align-items:center;gap:10px;margin:0 0 14px !important;font-size:15px !important;font-weight:800;color:#1C3A5E;line-height:1.4 !important}
.shd-pr-lbl{flex:none;background:#fff;color:#5A646E;border:1px solid #C9D4E0;font-size:12.5px;font-weight:800;letter-spacing:.08em;padding:1px 8px;border-radius:5px;line-height:1.5}
.shd-pr > .shd-phone{grid-area:ph;width:168px;margin:0;align-self:start}
.shd-pr-tx{grid-area:tx;align-self:end;min-width:0}
.shd-pr-ttl{font-size:28px !important;font-weight:800;color:#1C3A5E;line-height:1.45 !important;margin:0 !important;word-break:keep-all}
.shd-pr-dsc{margin:12px 0 0 !important;font-size:17px !important;line-height:1.85 !important;color:#3D4954}
.shd-pr .sp{display:none}
.shd-pr > .shd-btn{grid-area:btn;align-self:start;margin-top:20px;font-size:18px;max-width:360px}
.shd-pr .shd-q,.shd-pr .shd-a{overflow-wrap:anywhere;word-break:normal;padding:5px 8px}
.shd-pr .shd-q,.shd-pr .shd-a,.shd-pr .shd-o{font-size:12.5px}
.shd-pr .shd-bar{font-size:12.5px;padding:0 8px 5px}
.shd-pr .shd-chat{padding:6px 6px 2px}
.shd-pr .shd-m{padding-bottom:6px}
.shd-pr .shd-m.q{gap:4px}
.shd-pr .shd-m.r{padding-left:0}
.shd-pr .shd-av{display:none}
.shd-pr .shd-res b{font-size:13px}.shd-pr .shd-res small,.shd-pr .shd-res span{font-size:12px}
.shd-pr .shd-res img{width:38px;height:38px}
.shd-pr .shd-choices{height:28%}
.shd-pr .shd-cp{padding:6px 6px 14px;gap:4px}
.shd-pr .shd-o{padding:2px 4px;line-height:1.35}
.shd-q,.shd-a{max-width:100%;min-width:0}
.shd-m.q .shd-q{flex:1;min-width:0}
@media (max-width:640px){
  .shd-pr{grid-template-columns:44% 1fr;grid-template-areas:"head head" "ph tx" "btn btn";column-gap:14px;padding:16px 14px;margin:34px 0;border-radius:16px}
  .shd-pr > .shd-phone{width:100%;max-width:170px}
  .shd-pr-tx{align-self:center}
  .shd-pr .sp{display:inline}
  .shd-pr-ttl{font-size:21px !important;line-height:1.5 !important}
  .shd-pr-dsc{font-size:15.5px !important;line-height:1.75 !important;margin-top:10px !important}
  .shd-pr-dsc{font-size:15.5px !important}
  .shd-pr > .shd-btn{max-width:none;margin-top:14px}
  .shd-pr .shd-res img{display:none}
  .shd-pr .shd-res{padding:6px 8px}
}

/* PCの右側（1440px以上）：開業ロードマップの固定枠の上に、同じ大きさの診断の枠 */
.shd-side{position:fixed;z-index:60;right:26px;bottom:300px;width:310px;box-sizing:border-box;display:grid;grid-template-columns:62px 1fr;column-gap:14px;
  align-items:start;background:#fff;color:#1C3A5E;border:1px solid #D3DFEC;border-radius:14px;padding:20px 22px 22px;text-decoration:none;
  box-shadow:0 18px 48px rgba(18,39,64,.22);font-family:"Hiragino Sans","Yu Gothic",sans-serif;transition:.15s}
.shd-side:hover{transform:translateY(-2px);box-shadow:0 22px 52px rgba(18,39,64,.28)}
.shd-side .shd-phone{width:62px;grid-row:1 / span 1;box-shadow:0 6px 14px rgba(18,39,64,.25)}
.shd-side-tx b{display:block;font-size:17px;font-weight:800;line-height:1.55;margin-bottom:6px}
.shd-side-tx span{display:block;font-size:14px;color:#3D4954;line-height:1.7}
.shd-side-go{grid-column:1 / -1;display:flex;align-items:center;justify-content:center;margin-top:16px;background:#1C3A5E;color:#fff;
  font-weight:800;font-size:15.5px;padding:14px 10px;border-radius:9px}
.shd-side-go::after{content:" →";margin-left:4px}
@media (max-width:1439px),(max-height:700px){.shd-side{display:none}}
/* 診断向きの記事：1439px以下は右下の小さな診断カードだけ（ロードマップの帯は出さない）。1440px以上は右側に2つ重ねる */
@media (max-width:1439px){body:has(.shd-float) .fixcta{display:none}body:has(.shd-float) footer.ft2{padding-bottom:40px}}
@media (min-width:1440px){.shd-float{display:none}}
@media print{.shd-side{display:none}}

/* 右下に浮かぶ診断カード（診断向きの記事だけ）。小さな端末＋何の診断かの文字。少しスクロールしてから出る */
.shd-float{position:fixed;z-index:60;right:16px;bottom:16px;opacity:0;visibility:hidden;transform:translateY(18px);
  transition:opacity .35s ease,transform .35s ease,visibility 0s linear .35s;font-family:"Hiragino Sans","Yu Gothic",sans-serif}
.shd-float.on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.shd-float-a{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;background:#fff;border-radius:18px;
  padding:10px 16px 10px 10px;box-shadow:0 14px 34px rgba(18,39,64,.26);border:1px solid #D3DFEC}
.shd-float .shd-phone{flex:none;width:52px;max-width:none;box-shadow:none}
.shd-float-tx{display:block;line-height:1.4}
.shd-float-tx small{display:block;font-size:12px;font-weight:800;color:#A5432B;letter-spacing:.02em}
.shd-float-tx b{display:block;margin-top:2px;font-size:16px;font-weight:800;color:#1C3A5E;line-height:1.4}
.shd-float-tx em{display:inline-block;margin-top:6px;font-style:normal;font-size:13.5px;font-weight:800;color:#fff;background:#1C3A5E;
  border-radius:99px;padding:3px 12px}
.shd-float-tx em::after{content:" →"}
.shd-float-x{position:absolute;top:-12px;left:-10px;z-index:4;width:28px;height:28px;border-radius:50%;background:#5A646E;color:#fff;
  border:2px solid #fff;font-size:16px;line-height:1;font-family:inherit;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center}
.shd-float-x::before{content:"";position:absolute;inset:-9px}
.shd-float-x:focus-visible,.shd-float-a:focus-visible{outline:3px solid #E5B95F;outline-offset:2px}
@media (max-width:640px){
  .shd-float{right:10px;bottom:10px}
  .shd-float-a{gap:10px;padding:8px 14px 8px 8px;border-radius:16px}
  .shd-float .shd-phone{width:44px}
  .shd-float-tx b{font-size:15px}
}
@media print{.shd-float{display:none}}
@media (prefers-reduced-motion:reduce){.shd-float{transition:none}}

/* 記事末尾のCTA（診断）：主ボタンを診断に */
.end .btn.shd-end-btn{background:#1C3A5E}
.end .btn.shd-end-btn:hover{box-shadow:0 10px 24px rgba(18,39,64,.28)}
.end .btn.shd-end-btn::after{content:"→";font-weight:800}