/* =========================================================
   PONBOM デザインシステム — ミニマル フルイド
   - 暖色系の紙白 × 墨色 × 朱(スタンプ)アクセント
   - 書体: Zen Kaku Gothic New / 滑らかなモーション
   ========================================================= */
:root{
  --bg:#f7f5f1;            /* 暖かい紙白 */
  --panel:#ffffff;
  --line:#e9e5dc; --line-strong:#d8d2c6;
  --text:#211f1b; --sub:#6f6a5f;
  --accent:#d94a26;        /* 朱色（判子の朱肉） */
  --accent-deep:#b83b1c;
  --accent-soft:#faeee8;
  --ink:#211f1b;
  --ok:#31783a; --warn:#a06a00; --bad:#b3271e;
  --ease:cubic-bezier(.22,1,.36,1);
  --shadow-sm:0 1px 2px rgba(33,31,27,.05);
  --shadow-md:0 10px 30px -10px rgba(33,31,27,.14);
}
*{box-sizing:border-box}
::selection{background:var(--accent);color:#fff}

body{margin:0;color:var(--text);font-size:14px;line-height:1.7;background:var(--bg);
  font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic UI",sans-serif;
  -webkit-font-smoothing:antialiased}

/* ---------- topbar ---------- */
.topbar{display:flex;align-items:center;gap:26px;background:rgba(255,254,251,.88);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:var(--text);padding:13px 26px;position:sticky;top:0;z-index:20;
  border-bottom:1px solid var(--line)}
.brand{font-weight:700;font-size:16px;letter-spacing:.06em;display:flex;align-items:center;
  gap:10px;white-space:nowrap}
.brand .logo{width:26px;height:26px;border-radius:7px;background:var(--accent);flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  color:#fff;font-size:14px;font-weight:700;transform:rotate(-4deg);
  box-shadow:var(--shadow-sm)}
.brand .logo::before{content:"P"}
.topbar nav{display:flex;gap:6px;flex-wrap:wrap}
.topbar a{color:var(--sub);text-decoration:none;padding:7px 11px;font-size:13.5px;
  border-radius:8px;transition:color .25s var(--ease),background .25s var(--ease)}
.topbar a:hover{color:var(--text);background:#f1ede4}
.topbar a.on{color:var(--accent);background:var(--accent-soft);font-weight:700}
.viewsel{display:flex;align-items:center;gap:6px;color:var(--sub);font-size:12.5px}
.viewsel select{background:#fff;color:var(--text);border:1px solid var(--line);
  border-radius:8px;padding:5px 9px;font:inherit}

/* ---------- layout / motion ---------- */
main{max-width:1180px;margin:26px auto;padding:0 18px;animation:pageIn .55s var(--ease)}
@keyframes pageIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
h1{font-size:21px;margin:6px 0 18px;font-weight:700;letter-spacing:.02em}
h2{font-size:15.5px;margin:18px 0 8px;font-weight:700}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:18px 20px;margin-bottom:16px;box-shadow:var(--shadow-sm);
  transition:box-shadow .35s var(--ease),transform .35s var(--ease)}
.panel.lift:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}

/* ---------- forms ---------- */
.filters{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.filters label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--sub)}
input[type=text],input[type=number],input[type=url],input[type=password],input[type=datetime-local],select,textarea{
  border:1px solid var(--line-strong);border-radius:9px;padding:8px 11px;font:inherit;
  background:#fff;color:var(--text);transition:border-color .25s,box-shadow .25s}
input::placeholder,textarea::placeholder{color:#b3ac9e}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft)}
textarea{width:100%;min-height:220px;line-height:1.7}
input[type=checkbox]{width:15px;height:15px;accent-color:var(--accent)}

button{border:1px solid var(--line-strong);border-radius:9px;padding:8px 15px;font:inherit;
  cursor:pointer;background:#fff;color:var(--text);
  transition:all .25s var(--ease)}
button:hover{background:#f4f0e8;transform:translateY(-1px)}
button:active{transform:translateY(0) scale(.98)}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
button.primary:hover{background:var(--accent-deep);border-color:var(--accent-deep);
  box-shadow:0 6px 18px -6px rgba(217,74,38,.45)}
button.danger{background:var(--bad);border-color:var(--bad);color:#fff}
button.ghost{background:transparent}
button:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}

/* ---------- table ---------- */
table{width:100%;border-collapse:collapse;background:var(--panel)}
th,td{border-bottom:1px solid var(--line);padding:9px 12px;text-align:left;vertical-align:top}
th{font-size:12px;color:var(--sub);font-weight:700;white-space:nowrap;background:#faf8f3}
tr{transition:background .2s}
tr:hover td{background:#faf7f0}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow-sm);background:var(--panel)}

/* ---------- badges / text ---------- */
.badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;white-space:nowrap}
.badge.ok{background:#e8f2e4;color:var(--ok)}
.badge.warn{background:#f6ecd6;color:var(--warn)}
.badge.bad{background:#f9e7e4;color:var(--bad)}
.badge.info{background:var(--accent-soft);color:var(--accent-deep)}
.badge.gray{background:#efece4;color:var(--sub)}
.muted{color:var(--sub);font-size:12.5px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}
a.link{color:var(--accent-deep)}
code.ph{background:#f1ede4;border-radius:6px;padding:1px 7px;font-size:12.5px;
  font-family:"Consolas","Menlo",monospace}
.shot-thumb{max-width:120px;max-height:70px;border:1px solid var(--line);border-radius:6px}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:16px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px;
  box-shadow:var(--shadow-sm);transition:box-shadow .35s var(--ease),transform .35s var(--ease)}
.stat:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.stat .num{font-size:30px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.stat .lbl{font-size:12px;color:var(--sub);margin-top:2px}
.bar-row{display:grid;grid-template-columns:220px 1fr 60px;gap:10px;align-items:center;padding:4px 0}
.bar-track{background:#ece8df;border-radius:99px;height:14px;overflow:hidden}
.bar-fill{background:var(--accent);height:100%;border-radius:99px;min-width:2px;
  transition:width .7s var(--ease)}

/* ---------- progress / toast / modal ---------- */
.progress{background:#ece8df;border-radius:99px;height:9px;overflow:hidden}
.progress > div{background:var(--accent);height:100%;border-radius:99px;
  transition:width .6s var(--ease)}
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);
  background:var(--ink);color:#fff;padding:11px 20px;border-radius:11px;z-index:50;
  box-shadow:var(--shadow-md);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.toast.error{background:var(--bad)}
.toast.hidden{opacity:0;transform:translateX(-50%) translateY(10px);pointer-events:none}
.modal-bg{position:fixed;inset:0;background:rgba(33,31,27,.4);z-index:30;
  display:flex;align-items:center;justify-content:center;
  animation:fadeIn .25s var(--ease);backdrop-filter:blur(2px)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{background:#fff;border-radius:16px;padding:24px;width:min(560px,92vw);
  max-height:88vh;overflow:auto;box-shadow:var(--shadow-md);
  animation:popIn .35s var(--ease)}
@keyframes popIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.modal h2{margin-top:0}
.hidden{display:none !important}

/* ---------- chips（選択式絞り込み） ---------- */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin:10px 0 16px}
.chip{border:1px solid var(--line-strong);background:#fff;border-radius:999px;
  padding:7px 16px;cursor:pointer;font-size:13.5px;color:var(--text);
  transition:all .25s var(--ease)}
.chip:hover{border-color:var(--accent);color:var(--accent-deep);transform:translateY(-1px)}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700;
  box-shadow:0 5px 14px -6px rgba(217,74,38,.5)}
.preview-box{margin:12px 0;padding:13px 17px;border-radius:11px;
  background:var(--accent-soft);color:#5c2410;animation:fadeIn .3s var(--ease)}
.upsell{margin-top:14px;padding:15px 18px;border:1px solid #e6d9b8;border-radius:11px;
  background:#faf4e3;color:#6d5615}

/* ---------- ホーム: ジャーニー ---------- */
.hero{border-radius:16px;padding:30px 32px 28px;margin-bottom:18px;color:#f6f3ec;
  background:var(--ink);box-shadow:var(--shadow-md);position:relative;overflow:hidden}
.hero::after{content:"P";position:absolute;right:26px;bottom:-34px;font-size:150px;
  font-weight:700;color:rgba(217,74,38,.16);transform:rotate(-8deg);pointer-events:none}
.hero::before{content:none}
.hero h1{margin:0 0 8px;font-size:22px;color:#fff;letter-spacing:.03em}
.hero p{margin:0;font-size:13.5px;color:#c9c4b8}
.hero .cta{margin-top:20px}
.hero .cta button{background:var(--accent);border-color:var(--accent);color:#fff;
  font-weight:700;font-size:14px;padding:12px 24px;border-radius:10px}
.hero .cta button:hover{background:var(--accent-deep);transform:translateY(-2px);
  box-shadow:0 10px 24px -8px rgba(217,74,38,.55)}

.journey{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:20px 0}
@media(max-width:840px){.journey{grid-template-columns:1fr}}
.jstep{position:relative;padding:18px 16px 16px;border:1px solid var(--line);background:var(--panel);
  border-radius:14px;cursor:pointer;text-decoration:none;color:var(--text);display:block;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .35s var(--ease),transform .35s var(--ease),border-color .35s}
.jstep:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.jstep .no{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:13px;margin-bottom:10px;
  background:#f0ece2;color:var(--sub);transition:all .35s var(--ease);
  font-variant-numeric:tabular-nums}
.jstep .ttl{font-weight:700;font-size:13.5px;margin-bottom:3px}
.jstep .dsc{font-size:11.5px;color:var(--sub);line-height:1.6}
.jstep.done{background:#fbfaf6}
.jstep.done .no{background:#e8f2e4;color:var(--ok)}
.jstep.current{border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft),var(--shadow-md)}
.jstep.current .no{background:var(--accent);color:#fff;animation:breathe 2.6s var(--ease) infinite}
@keyframes breathe{
  0%,100%{box-shadow:0 0 0 0 rgba(217,74,38,.35)}
  50%{box-shadow:0 0 0 9px rgba(217,74,38,0)}}
.jstep .go{display:inline-block;margin-top:9px;font-size:12.5px;font-weight:700;
  color:var(--accent-deep)}
.jstep.locked{opacity:.6}

/* ---------- モバイル ---------- */
@media(max-width:760px){
  .topbar{gap:12px;padding:10px 14px;flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none}
  .topbar::-webkit-scrollbar{display:none}
  .topbar nav{flex-wrap:nowrap}
  .topbar a{white-space:nowrap;padding:6px 10px}
  .brand{font-size:14px}
  .viewsel{white-space:nowrap}
  main{margin:16px auto;padding:0 12px}
  h1{font-size:18px}
  .hero{padding:20px 18px}
  .hero h1{font-size:19px}
  .hero::after{font-size:100px;right:8px}
  .panel{padding:14px}
  .stats{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
  .stat .num{font-size:24px}
  .filters label{width:100%}
  .filters input[type=text],.filters select{width:100% !important}
}

/* ---------- ホームLP（サービス紹介） ---------- */
.lp-section{margin:34px 0}
.lp-section > h2{font-size:19px;margin:0 0 4px;letter-spacing:.02em}
.lp-section > .lead{color:var(--sub);font-size:13.5px;margin:0 0 16px}
.lp-divider{height:1px;background:var(--line);border:0;margin:38px 0 30px}
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.feature{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 20px;
  box-shadow:var(--shadow-sm);transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.feature:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.feature .k{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--accent-deep);
  text-transform:uppercase}
.feature h3{font-size:15px;margin:6px 0 6px}
.feature p{font-size:12.5px;color:var(--sub);margin:0;line-height:1.7}
.compare{width:100%;border-collapse:separate;border-spacing:0}
.compare th,.compare td{padding:12px 14px;text-align:left;font-size:13px;border-bottom:1px solid var(--line)}
.compare thead th{background:#faf8f3;font-size:12px;color:var(--sub)}
.compare thead th:last-child{background:var(--ink);color:#fff;border-radius:10px 10px 0 0}
.compare td:last-child{background:var(--accent-soft);color:#5c2410;font-weight:700}
.compare tr:last-child td{border-bottom:0}
.compare .yes{color:var(--ok);font-weight:700}
.compare .no{color:#b3aca0}
.metric-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.metric{background:var(--ink);color:#f6f3ec;border-radius:14px;padding:20px;text-align:center}
.metric .big{font-size:30px;font-weight:700;letter-spacing:.01em;
  font-variant-numeric:tabular-nums;color:#fff}
.metric .cap{font-size:12px;color:#c9c4b8;margin-top:4px}
.funnel-step{display:flex;align-items:center;gap:12px;padding:9px 0}
.funnel-step .bar{height:26px;background:var(--accent);border-radius:6px;min-width:40px;
  display:flex;align-items:center;padding:0 12px;color:#fff;font-weight:700;font-size:13px}
.funnel-step .lab{font-size:13px;min-width:120px}
.persona-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.persona{border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:0 12px 12px 0;
  padding:16px 18px;background:var(--panel)}
.persona h3{font-size:14px;margin:0 0 5px}
.persona p{font-size:12.5px;color:var(--sub);margin:0;line-height:1.7}
.lp-cta{background:var(--grad);border-radius:16px;padding:28px 30px;text-align:center;color:#fff;
  box-shadow:var(--shadow-md)}
.lp-cta h2{color:#fff;margin:0 0 8px;font-size:20px}
.lp-cta p{margin:0 0 18px;font-size:13.5px;opacity:.95}
.lp-cta button{background:#fff;color:var(--accent-deep);font-weight:700;font-size:14px;
  padding:12px 28px;border:0;border-radius:10px}
.lp-cta button:hover{transform:translateY(-2px)}
@media(max-width:640px){.compare thead th:last-child{border-radius:0}}

/* ---------- ホームLP: ストーリー（疑い→設計） ---------- */
.story-open{max-width:640px;margin:6px auto 8px;text-align:center;font-size:15px;line-height:2.2}
.story-open .noise{color:var(--sub)}
.story-open .hook{font-size:17px;font-weight:700;letter-spacing:.02em}
.doubt{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:28px 30px;margin-top:16px;box-shadow:var(--shadow-sm)}
.doubt.flip .visual{order:-1}
@media(max-width:820px){.doubt{grid-template-columns:1fr;gap:20px;padding:20px}
  .doubt.flip .visual{order:0}}
.doubt .no{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--accent-deep)}
.doubt h3{font-size:21px;margin:4px 0 14px;letter-spacing:.02em;line-height:1.5}
.doubt .them{color:var(--sub);font-size:13px;margin:0 0 10px;padding-left:12px;
  border-left:2px solid var(--line-strong)}
.doubt .them b{color:#8b8577;font-size:11px;letter-spacing:.08em;display:block}
.doubt .us{font-size:14px;font-weight:700;margin:0;padding-left:12px;
  border-left:2px solid var(--accent);line-height:1.9}
/* 疑問1: スクショ実物風モック */
.shot{background:#fff;border:1px solid var(--line-strong);border-radius:12px;
  box-shadow:var(--shadow-md);overflow:hidden;position:relative;transform:rotate(-1.2deg)}
.shot .bar{display:flex;gap:5px;padding:9px 11px;background:#f1ede4;border-bottom:1px solid var(--line)}
.shot .dot{width:8px;height:8px;border-radius:50%;background:#d8d2c6}
.shot .body{padding:14px 16px 18px;display:flex;flex-direction:column;gap:9px}
.shot .f{display:flex;flex-direction:column;gap:3px}
.shot .f .lab{font-size:10px;color:var(--sub)}
.shot .f .val{border:1px solid var(--line);border-radius:6px;padding:5px 9px;
  font-size:11.5px;background:#fdfcf9;color:var(--text)}
.shot .f .val.long{min-height:34px;color:var(--sub);font-size:10.5px;line-height:1.5}
.stamp{position:absolute;right:16px;bottom:16px;transform:rotate(-9deg);
  border:2.5px solid var(--accent);color:var(--accent);border-radius:9px;
  padding:5px 13px;font-weight:700;font-size:14px;letter-spacing:.2em;
  background:rgba(255,255,255,.88);box-shadow:var(--shadow-sm)}
.shot-cap{text-align:center;font-size:11.5px;color:var(--sub);margin-top:10px}
/* 疑問2: リスト選別モック */
.listmock .row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:11px 13px;border:1px solid var(--line);border-radius:10px;
  background:#fff;margin-bottom:8px;font-size:12.5px;box-shadow:var(--shadow-sm)}
.listmock .row .nm{font-weight:700}
.listmock .row.out{opacity:.6;background:#f4f1ea}
.listmock .row.out .nm{text-decoration:line-through;font-weight:400;color:var(--sub)}
.chip{font-size:10.5px;padding:2px 9px;border-radius:999px;font-weight:700;white-space:nowrap}
.chip.ok{background:#eef5ee;color:var(--ok)}
.chip.ng{background:#f7e9e7;color:var(--bad)}
/* 疑問3: 数字ドン */
.bignum{text-align:center;padding:8px 0}
.bignum .pct{font-size:78px;font-weight:700;color:var(--accent-deep);line-height:1.05;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.bignum .def{font-size:11.5px;color:var(--sub);margin-top:8px}
.bignum .rest{display:inline-block;margin-top:12px;font-size:13px;font-weight:700;
  background:var(--accent-soft);color:#4a2213;border-radius:999px;padding:6px 16px}
.captcha-note{max-width:640px;margin:22px auto 0;text-align:center;font-size:13px;
  color:var(--sub);line-height:2}
.captcha-note b{color:var(--text)}

/* stagger（順に浮かび上がる） */
.stagger > *{animation:pageIn .6s var(--ease) both}
.stagger > *:nth-child(1){animation-delay:.03s}
.stagger > *:nth-child(2){animation-delay:.1s}
.stagger > *:nth-child(3){animation-delay:.17s}
.stagger > *:nth-child(4){animation-delay:.24s}
.stagger > *:nth-child(5){animation-delay:.31s}

/* ============ 初期設定ウィザード（/welcome） ============ */
.wiz-head{margin:6px 0 20px}
.wiz-head h1{margin:0 0 4px}
.wiz-steps{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:14px 0 10px}
.wiz-pill{display:flex;align-items:center;gap:8px;padding:7px 15px 7px 8px;border-radius:999px;
  border:1px solid var(--line);background:var(--panel);font-size:12.5px;color:var(--sub);
  cursor:pointer;transition:all .22s var(--ease)}
.wiz-pill:hover{border-color:var(--accent);color:var(--accent-deep)}
.wiz-pill .n{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:#efece4;color:var(--sub);font-size:11.5px;font-weight:700}
.wiz-pill.done{background:#fbfaf6;color:var(--text)}
.wiz-pill.done .n{background:#e8f2e4;color:var(--ok)}
.wiz-pill.on{border-color:var(--accent);color:var(--accent-deep);font-weight:700;
  box-shadow:0 0 0 3px var(--accent-soft)}
.wiz-pill.on .n{background:var(--accent);color:#fff}
.wiz-card{animation:pageIn .45s var(--ease) both}
.wiz-no{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--accent-deep);
  text-transform:uppercase}
.wiz-card > h2{margin:4px 0 10px;font-size:19px;letter-spacing:.02em}
.wiz-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:20px;
  padding-top:16px;border-top:1px solid var(--line)}
.wiz-summary{list-style:none;padding:0;margin:14px 0 0}
.wiz-summary li{display:flex;gap:14px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}
.wiz-summary li:last-child{border-bottom:0}
.wiz-summary .k{min-width:120px;color:var(--sub);font-size:12.5px}
.wiz-summary .v{font-weight:700}
@media (max-width:700px){
  .wiz-summary li{flex-direction:column;gap:2px}
  .wiz-summary .k{min-width:0}
}

/* ---------- ホーム（運用ビュー） ---------- */
.attn-list{display:flex;flex-direction:column;gap:6px}
.attn{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;
  font-size:13px;background:#faf8f3;border:1px solid var(--line)}
.attn .dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--sub)}
.attn.bad{background:#fdf1ef;border-color:#f3d2cd}
.attn.bad .dot{background:var(--bad)}
.attn.warn{background:#fbf4e4;border-color:#eedcb5}
.attn.warn .dot{background:var(--warn)}
.attn.info .dot{background:var(--accent)}
.attn .msg{flex:1}
.attn a.link{white-space:nowrap;font-weight:700;text-decoration:none}
.home-grid{display:grid;grid-template-columns:3fr 2fr;gap:14px;margin-bottom:16px}
@media(max-width:900px){.home-grid{grid-template-columns:1fr}}
.react-list{display:flex;flex-direction:column}
.react{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.react:last-child{border-bottom:0}
.react .nm{font-weight:700}
details.intro{margin:26px 0 10px}
details.intro > summary{cursor:pointer;color:var(--sub);font-size:13px;padding:10px 14px;
  border:1px dashed var(--line-strong);border-radius:10px;list-style:none;user-select:none}
details.intro > summary::-webkit-details-marker{display:none}
details.intro > summary::before{content:"▸ ";color:var(--accent)}
details.intro[open] > summary::before{content:"▾ "}
details.intro > summary:hover{color:var(--text);background:#faf8f3}
/* 結果の絞り込みチップ（ジョブ詳細・ジョブ一覧） */
.fchip{border:1px solid var(--line-strong);background:#fff;border-radius:999px;padding:4px 12px;
  font-size:12.5px;color:var(--text);cursor:pointer;transition:all .2s var(--ease)}
.fchip:hover{border-color:var(--accent);color:var(--accent-deep)}
.fchip.on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:700}
.fchip b{margin-left:2px}
.tpl-preview{white-space:pre-wrap;background:#fdfcf9;border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;margin-top:8px;font-size:13px;line-height:1.8;max-height:260px;overflow:auto}
/* 送付先リスト: 企業を探して追加（旧ターゲット選定の統合） */
details.addbox{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:14px 20px;margin-bottom:14px;box-shadow:var(--shadow-sm)}
details.addbox > summary{cursor:pointer;list-style:none;user-select:none}
details.addbox > summary::-webkit-details-marker{display:none}
details.addbox > summary::before{content:"▸ ";color:var(--accent)}
details.addbox[open] > summary::before{content:"▾ "}
/* 運営: 収益化可能在庫の内訳 */
.pi-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}
@media(max-width:900px){.pi-grid{grid-template-columns:1fr}}

/* 管理者が利用者画面を確認しているときの帯。運営画面と見間違えないよう常に上部に出す */
.previewbar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin:0 0 16px; padding:9px 14px; border-radius:8px;
  background:#fff5e6; border:1px solid #f0c987; color:#7a4b00; font-size:13px;
}
.previewbar button{
  margin-left:auto; padding:5px 12px; border-radius:6px; cursor:pointer;
  background:#7a4b00; color:#fff; border:0; font-size:12.5px;
}

/* 送付先リストの内訳（ホーム・ダッシュボード）。総数だけでは意味が伝わらないため、
   届いた/届かなかった/送れない/まだ送れる を帯と表で並べて見せる */
.funnel .fbar{ display:flex; height:12px; border-radius:7px; overflow:hidden; margin:14px 0 12px; background:#eef0f4; }
.funnel .seg{ display:block; height:100%; }
.funnel .seg.ok{ background:#2f9e5e; }
.funnel .seg.fail{ background:#d9dde3; }
.funnel .seg.blocked{ background:#b9bfc9; }
.funnel .seg.left{ background:#3b6fd4; }
.funnel .seg.other{ background:#e6e8ec; }
.funnel .ftable{ width:100%; border-collapse:collapse; font-size:13px; }
.funnel .ftable td{ padding:7px 8px; border-top:1px solid #eef0f4; vertical-align:middle; }
.funnel .ftable tr:first-child td{ border-top:0; }
.funnel .ftable td.n{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; width:90px; }
.funnel .ftable td.amt{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; width:90px; color:#4a5261; }
.funnel .ftable tr.hilite td{ background:#f4f7fd; border-top:1px solid #dce4f5; }
.funnel .key{ display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:8px; vertical-align:-1px; }
.funnel .key.ok{ background:#2f9e5e; }
.funnel .key.fail{ background:#d9dde3; }
.funnel .key.blocked{ background:#b9bfc9; }
.funnel .key.left{ background:#3b6fd4; }
.funnel .key.other{ background:#e6e8ec; }
@media (max-width: 640px){
  .funnel .ftable td.muted, .funnel .ftable tr.hilite td:last-child{ font-size:12px; }
}

/* ホームの運転席。自動送付の利用者向けに「状態・費用・残り・反応」を1枚にまとめる */
.cockpit{ padding:0; overflow:hidden; }
.cockpit .ck-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:14px 18px; border-bottom:1px solid #eef0f4; background:#fbfcfe; }
.cockpit .ck-dot{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:7px; vertical-align:0; }
.cockpit .ck-dot.on{ background:#2f9e5e; box-shadow:0 0 0 3px rgba(47,158,94,.16); }
.cockpit .ck-dot.off{ background:#b9bfc9; }
.cockpit .ck-sub{ font-size:12px; margin-top:3px; }
.cockpit .ck-lbl{ font-size:12px; color:#6b7280; }
.cockpit .ck-val{ font-size:24px; font-weight:700; line-height:1.25; margin-top:2px; font-variant-numeric:tabular-nums; }
.cockpit .ck-val .u{ font-size:13px; font-weight:400; color:#4a5261; margin-left:5px; }
.cockpit .ck-grid{ display:grid; grid-template-columns:1fr 1fr; }
.cockpit .ck-cell{ padding:14px 18px; }
.cockpit .ck-cell + .ck-cell{ border-left:1px solid #eef0f4; }
.cockpit .ck-fuel{ padding:14px 18px; border-top:1px solid #eef0f4; background:#f7f9fc; }
.cockpit .ck-fuel.warn{ background:#fff6ea; border-top-color:#f0d9b5; }
.cockpit .ck-react{ display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:12px 18px; border-top:1px solid #eef0f4; font-size:13px; }
@media (max-width: 640px){
  .cockpit .ck-grid{ grid-template-columns:1fr; }
  .cockpit .ck-cell + .ck-cell{ border-left:0; border-top:1px solid #eef0f4; }
  .cockpit .ck-val{ font-size:21px; }
}
/* テンプレ名は長文になりがち（本文の一節を名前にしている利用者が多い）ので1行に収める */
.cockpit .ck-tpl{ display:inline-block; max-width:340px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; }

/* 500社パック */
.packbox.offer{ border:1px solid #dce4f5; background:linear-gradient(180deg,#f7f9fe,#fff); }
.packbox.reached{ border:1px solid #cfe9d8; background:#f3fbf6; }
.packbox .pk-title{ font-size:18px; font-weight:700; margin-bottom:4px; }
.packbox .pk-price{ font-size:22px; font-weight:700; margin:2px 0 8px; font-variant-numeric:tabular-nums; }
.packbox .pk-points{ margin:0; padding-left:18px; font-size:13px; line-height:1.7; color:#4a5261; }
.cockpit .ck-pack{ padding:10px 18px 12px; border-bottom:1px solid #eef0f4; background:#fbfcfe; font-size:13px; }


/* 企業を探して追加（統一版）: 条件は縦に並べ、結果は「該当→送れる」だけを大きく */
.findbox{ padding:12px 4px 4px; }
.findbox .frow{ display:flex; align-items:flex-start; gap:12px; margin:8px 0; }
.findbox .frow > label{ flex:0 0 84px; font-weight:600; padding-top:7px; color:#374151; }
.findbox .chips{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.findbox .fresult{ margin-top:14px; padding:12px 14px; background:#f4f7fd; border:1px solid #dce4f5; border-radius:10px; }
.findbox .fnums{ font-size:16px; }
.findbox .fnums b{ font-size:22px; font-variant-numeric:tabular-nums; }
.findbox .fnums .ok-num{ color:#2f9e5e; }
@media (max-width:640px){ .findbox .frow{ flex-direction:column; gap:4px; } .findbox .frow > label{ padding-top:0; } }


/* 企業一覧をコンパクトに: 1行を1段に収め、リンクは折り返さず省略、操作列は縦に割れない */
.tablewrap.compact th,.tablewrap.compact td{padding:5px 10px;font-size:13px;line-height:1.35;vertical-align:middle}
.tablewrap.compact td .badge{padding:1px 8px;font-size:11.5px}
.tablewrap.compact td a.link{display:inline-block;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.tablewrap.compact td:last-child{white-space:nowrap}
.tablewrap.compact td .muted{font-size:11.5px}