@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap');
:root{
  --navy:#12305c;
  --blue:#1565c0;
  --blue-d:#0d47a1;
  --yellow:#f5b301;
  --yellow-d:#d99a00;
  --green:#2e7d5b;
  --orange:#e8590c;
  --purple:#6741d9;
  --ink:#1f2733;
  --ink-2:#5b6675;
  --ink-3:#8b95a3;
  --line:#e3e8ef;
  --bg:#eef1f5;
  --card:#fff;
  --radius:14px;
  --shadow:0 1px 3px rgba(16,32,64,.06),0 6px 20px rgba(16,32,64,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Zen Kaku Gothic New","Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic UI",system-ui,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.65;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"palt" 1;
  padding-bottom:64px;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1240px;margin:0 auto;padding:0 20px}

/* ---------- header ---------- */
.hd{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.hd-in{display:flex;align-items:center;gap:24px;height:74px}
.logo{display:flex;flex-direction:column;align-items:flex-start;gap:1px;flex-shrink:0}
.logo-img{height:38px;width:auto}
.logo-sub{font-size:10px;color:var(--ink-3);letter-spacing:.02em;padding-left:2px}
.logo-mark-sm{height:30px;width:auto}
.search{flex:1;max-width:300px;position:relative}
.search input{width:100%;height:40px;border:1px solid var(--line);border-radius:8px;padding:0 38px 0 12px;font-size:13px;background:#fff;font-family:inherit}
.search input:focus{outline:2px solid #cfe0f5;border-color:var(--blue)}
.search svg{position:absolute;right:11px;top:11px;color:var(--ink-3)}
.gnav{display:flex;gap:26px;margin-left:auto;font-size:13.5px;font-weight:600}
.gnav a{position:relative;padding:4px 0;transition:color .18s}
.gnav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--navy);
  transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
.gnav a:hover{color:var(--navy)}
.gnav a:hover::after{transform:scaleX(1)}
.hd-cta{display:flex;gap:10px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;font-family:inherit;font-weight:700;cursor:pointer;transition:.15s;text-align:center}
.btn-ghost{border:1.5px solid var(--navy);color:var(--navy);background:#fff;padding:9px 22px;font-size:13.5px}
.btn-ghost:hover{background:#f4f7fb}
.btn-y{background:var(--yellow);color:#3a2c00;padding:10px 20px;font-size:13.5px;box-shadow:0 2px 0 var(--yellow-d)}
.btn-y:hover{background:#ffc21f}
.btn-navy{background:var(--navy);color:#fff;padding:11px 24px;font-size:14px}
.btn-lg{padding:16px 34px;font-size:17px;border-radius:999px}

/* ---------- hero ---------- */
.hero{position:relative;background:#dce9f7;overflow:hidden}
.hero-img{width:100%;height:440px;object-fit:cover;object-position:center 52%}
.hero-ov{position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.90) 22%,rgba(255,255,255,.52) 38%,rgba(255,255,255,0) 52%)}
.hero-c{position:absolute;inset:0}
.hero-c .wrap{height:100%;display:flex;flex-direction:column;justify-content:center}
.hero-c .wrap>*{max-width:600px}
.hero-h1{font-size:42px;font-weight:900;letter-spacing:-.03em;margin:0 0 14px;line-height:1.25;white-space:nowrap;text-shadow:0 1px 10px rgba(255,255,255,.85)}
.hero-h1 em{font-style:normal;color:var(--orange)}
.hero-p{font-size:15.5px;font-weight:600;color:var(--ink-2);margin:0 0 20px;line-height:1.8}
.steps{display:flex;gap:0;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;max-width:530px;box-shadow:var(--shadow)}
.step{flex:1;display:flex;gap:9px;align-items:center;padding:12px 14px;border-right:1px solid var(--line)}
.step:last-child{border:0}
.step-ico{width:32px;height:32px;border-radius:7px;background:#eef3fa;display:grid;place-items:center;flex-shrink:0;font-size:14px;overflow:hidden}
.step-ico img{width:100%;height:100%;object-fit:contain}
.step-ico .phbox{min-height:0;font-size:0;border:0;background:none}
.step-ico .phbox b{font-size:15px;margin:0;opacity:.4}
.step b{display:block;font-size:13px}
.step span{font-size:10.5px;color:var(--ink-3);line-height:1.45;display:block}
.hero-cta{margin-top:20px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.stores{display:flex;gap:10px;align-items:center}
.stores img{height:40px;width:auto;display:block}
.stores a{display:block;transition:opacity .15s}
.stores a:hover{opacity:.8}

/* ---------- section ---------- */
.sec{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;margin-top:18px}
.sec-h{display:flex;align-items:center;justify-content:space-between;margin:0 0 18px}
.sec-h h2{font-size:19px;margin:0;font-weight:800}
.more{font-size:12.5px;color:var(--blue);font-weight:700}

/* ---------- theme cards ---------- */
.themes{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.th{border:2px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;background:#fff;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.th.g{background:#f2f9f5}.th.b{background:#f1f6fd}.th.o{background:#fdf5ef}.th.p{background:#f6f3fd}
.th:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(16,32,64,.12)}
.th.g:hover{border-color:var(--green)}.th.b:hover{border-color:var(--blue)}
.th.o:hover{border-color:var(--orange)}.th.p:hover{border-color:var(--purple)}
.th:hover .th-thumb img{transform:scale(1.05)}
.th-thumb img{transition:transform .3s ease}
.th-top{display:block;margin-bottom:10px}
.th-top>div{min-height:76px}
.th-thumb{width:100%;height:100px;border-radius:8px;overflow:hidden;border:1px solid rgba(0,0,0,.08);background:#fff;margin-bottom:11px}
.th-thumb img{width:100%;height:100%;object-fit:cover}
.th-b{font-size:15px;font-weight:800;margin:0 0 4px;letter-spacing:-.02em;line-height:1.35}
.th.g .th-b{color:var(--green)}.th.b .th-b{color:var(--blue)}.th.o .th-b{color:var(--orange)}.th.p .th-b{color:var(--purple)}
.th-d{font-size:10.5px;color:var(--ink-2);line-height:1.6}
.th-n{font-size:10.5px;color:var(--ink-3);margin-top:auto;padding-top:8px}
.th-n b{display:block;font-size:19px;color:var(--ink);font-weight:800;letter-spacing:-.01em}
.th-n b em{font-style:normal;font-size:11px;font-weight:600;margin-left:2px}
.th-btn{margin-top:10px;border-radius:8px;color:#fff;font-size:12.5px;font-weight:700;padding:9px;display:flex;justify-content:space-between;align-items:center}
.th.g .th-btn{background:var(--green)}.th.b .th-btn{background:var(--blue)}.th.o .th-btn{background:var(--orange)}.th.p .th-btn{background:var(--purple)}
.th-add{border:2px dashed var(--line);align-items:center;justify-content:center;text-align:center;gap:6px;color:var(--ink-3);font-size:12.5px}
.th-add .plus{font-size:30px;color:var(--ink-3);line-height:1}

/* ---------- stats ---------- */
.grid-2{display:grid;grid-template-columns:1fr 340px;gap:18px;align-items:start}
.stats{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.stat{display:flex;gap:11px;align-items:center;padding-right:26px}
.stat-ico{width:44px;height:44px;border-radius:10px;background:#eef3fa;display:grid;place-items:center;font-size:19px;overflow:hidden;padding:8px}
.stat-ico img{width:100%;height:100%;object-fit:contain}
.stat-ico .phbox,.bene .i .phbox{width:100%;height:100%;min-height:0;font-size:0;border:0;background:none;display:grid;place-items:center}
.stat-ico .phbox b,.bene .i .phbox b{font-size:10px;margin:0;opacity:.4;color:var(--ink-3)}
.stat small{font-size:11px;color:var(--ink-3);display:block}
.stat b{font-size:25px;font-weight:800;letter-spacing:-.02em}
.stat b em{font-style:normal;font-size:12px;font-weight:600;margin-left:2px}
.appbox{background:#fffbf0;border:1px solid #f6e4b4;border-radius:var(--radius);padding:20px}
.appbox h3{margin:0 0 12px;font-size:15px}
.appbox li{font-size:12px;color:var(--ink-2);margin-bottom:8px;list-style:none;position:relative;padding-left:20px;line-height:1.5}
.appbox li::before{content:"";position:absolute;left:2px;top:4px;width:5px;height:9px;
  border:solid var(--green);border-width:0 2px 2px 0;transform:rotate(43deg)}
.appbox ul{padding:0;margin:0 0 14px}

/* ---------- ranking / area / steps3 ---------- */
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;margin-top:18px}
.rank{list-style:none;padding:0;margin:0}
.rank li{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px dashed var(--line);font-size:13px}
.rank li:last-child{border:0}
.rank .no{width:22px;height:22px;border-radius:50%;background:var(--navy);color:#fff;font-size:11px;display:grid;place-items:center;font-weight:700;flex-shrink:0}
.rank .no.n1{background:#e0a800}.rank .no.n2{background:#9aa4b1}.rank .no.n3{background:#b3763c}
.rank .nm{flex:1;font-weight:600}
.rank .nm small{display:block;font-size:10px;color:var(--ink-3);font-weight:400}
.rank .pr{font-weight:800;color:var(--orange);font-size:13px;white-space:nowrap}
.area{list-style:none;padding:0;margin:0}
.area li{display:flex;justify-content:space-between;padding:9px 12px;font-size:12.5px;border-bottom:1px solid var(--line)}
.area li:last-child{border:0}
.area li b{font-weight:700}
/* 3ステップ（縦積み・各行にイラスト） */
.s3{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.s3 .c{display:flex;gap:14px;align-items:center;background:#f7f9fb;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.s3-img{width:64px;height:64px;border-radius:10px;background:#fff;border:1px solid var(--line);flex-shrink:0;overflow:hidden;display:grid;place-items:center}
.s3-img img{width:100%;height:100%;object-fit:contain}
.s3-img .phbox{min-height:0;font-size:0;border:0;background:none}
.s3-img .phbox b{font-size:18px;margin:0;opacity:.35}
.s3-tx{min-width:0}
.s3 .n{display:inline-grid;place-items:center;width:19px;height:19px;border-radius:50%;background:var(--green);color:#fff;font-size:11px;font-weight:700;vertical-align:1px;margin-right:6px}
.s3 .c:nth-child(2) .n{background:var(--blue)}
.s3 .c:nth-child(3) .n{background:var(--yellow);color:#3a2c00}
.s3 .c b{font-size:14px}
.s3 .c .s3-tx>span:last-child{font-size:11.5px;color:var(--ink-3);line-height:1.6;display:block;margin-top:2px}

/* 画像スロット（GPT生成画像を差し込むまでの仮置き） */
.phbox{width:100%;height:100%;min-height:44px;background:repeating-linear-gradient(45deg,#f2f4f7,#f2f4f7 8px,#e9edf2 8px,#e9edf2 16px);
  border:1px dashed #c3ccd6;border-radius:6px;display:grid;place-items:center;text-align:center;color:#93a0ae;
  font-size:9.5px;line-height:1.45;padding:4px;font-family:Consolas,monospace;word-break:break-all}
.phbox b{display:block;font-size:15px;line-height:1;margin-bottom:3px;opacity:.5}
.adm .phbox{background:repeating-linear-gradient(45deg,#1c2836,#1c2836 8px,#20303f 8px,#20303f 16px);border-color:#33445a;color:#6f8093}
.sample .phbox{min-height:112px}
.hero .phbox{min-height:440px;border-radius:0}

/* 買取レンジ */
.pr-range{font-weight:800;color:var(--orange);font-size:13px;white-space:nowrap;text-align:right}
.pr-range small{display:block;font-size:9.5px;color:var(--ink-3);font-weight:600}
.bonus{display:grid;grid-template-columns:1fr;gap:7px;margin-top:14px}
.bonus div{display:flex;align-items:center;gap:8px;font-size:11.5px;background:#f7f9fb;border:1px solid var(--line);border-radius:8px;padding:8px 11px}
.bonus span{flex:1;line-height:1.4}
.bonus b{color:var(--orange);font-weight:800;white-space:nowrap}
.b-ico{width:26px;height:26px;flex-shrink:0;display:grid;place-items:center}
.b-ico img{width:100%;height:100%;object-fit:contain}
.b-ico .phbox{min-height:0;font-size:0;border:0;background:none}
.b-ico .phbox b{font-size:14px;margin:0;opacity:.35;color:var(--ink-3)}
.calc{background:#f2f9f5;border:1px solid #c8e6d5;border-radius:10px;padding:14px}
.calc-row{display:flex;justify-content:space-between;font-size:12.5px;padding:5px 0}
.calc-row.tot{border-top:1px solid #c8e6d5;margin-top:6px;padding-top:10px;font-size:15px;font-weight:800}
.calc-row.tot b{color:var(--green);font-size:20px}

/* ---------- footer benefits ---------- */
.bene{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:30px 0}
.bene>div{display:flex;gap:12px;align-items:center}
.bene>div>div{min-width:0}
.bene .i{width:38px;height:38px;flex-shrink:0;display:grid;place-items:center}
.bene .i img{width:100%;height:100%;object-fit:contain}
.bene>div>div b{font-size:14px;display:block;line-height:1.45}
.bene>div>div span{font-size:11.5px;color:var(--ink-3);display:block;line-height:1.55}
footer{background:var(--navy);color:#cbd6e5;font-size:12px;padding:26px 0;margin-top:20px}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}

/* ---------- generic app pages ---------- */
.page-hd{background:#fff;border-bottom:1px solid var(--line)}
.page-hd .wrap{display:flex;align-items:center;gap:14px;height:64px}
.page-hd h1{font-size:17px;margin:0;font-weight:800}
.back{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;background:#f2f5f9;color:var(--ink-2);font-size:15px}
.narrow{max-width:840px;margin:0 auto;padding:0 20px}

.balance{background:linear-gradient(135deg,var(--navy),#1c4a8a);color:#fff;border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.balance .lb{font-size:12px;opacity:.75}
.balance .big{font-size:46px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.balance .big em{font-style:normal;font-size:17px;font-weight:600;margin-left:4px}
.bar{height:9px;background:rgba(255,255,255,.2);border-radius:99px;overflow:hidden;margin:14px 0 8px}
.bar i{display:block;height:100%;background:var(--yellow);border-radius:99px}
.balance .hint{font-size:11.5px;opacity:.85}

.pill{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:99px;white-space:nowrap}
.p-ok{background:#e6f5ec;color:#1d7a45}
.p-wait{background:#fff5e0;color:#a06a00}
.p-ng{background:#fdeced;color:#c0392b}
.p-paid{background:#eef1f5;color:var(--ink-2)}

.tbl{width:100%;border-collapse:collapse;background:#fff;font-size:13px}
.tbl th{background:#f7f9fb;text-align:left;font-size:11.5px;color:var(--ink-2);padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle;white-space:nowrap}
.tbl td.w{white-space:normal}
.tbl tr:last-child td{border-bottom:0}
.tbl .thumb{width:56px;height:42px;border-radius:5px;border:1px solid var(--line);overflow:hidden}

.note{background:#fff8e6;border:1px solid #f3e3b3;border-radius:10px;padding:12px 14px;font-size:12px;color:#6b5300;line-height:1.7}
.mono{font-family:"Consolas",monospace;letter-spacing:.02em}

/* admin */
.adm{background:#0f1720;color:#dbe3ec}
.adm .page-hd{background:#16212d;border-bottom:1px solid #263241}
.adm .page-hd h1{color:#fff}
.adm .logo-mark-sm{background:#fff;border-radius:50%}
.kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:18px 0}
.kpi div{background:#16212d;border:1px solid #263241;border-radius:12px;padding:16px}
.kpi small{font-size:11px;color:#8899ab;display:block}
.kpi b{font-size:28px;font-weight:800;color:#fff;letter-spacing:-.02em}
.kpi b em{font-style:normal;font-size:12px;font-weight:600;color:#8899ab;margin-left:3px}
.adm .sec{background:#16212d;border:1px solid #263241;box-shadow:none}
.adm .sec-h h2{color:#fff}
.adm .tbl{background:transparent;color:#dbe3ec}
.adm .tbl th{background:#1c2836;color:#8899ab;border-color:#263241}
.adm .tbl td{border-color:#263241}
.adm .tbl .thumb{border-color:#33445a}
.mini{border:0;border-radius:7px;padding:6px 12px;font-size:11.5px;font-weight:700;cursor:pointer;font-family:inherit}
.m-ok{background:#1d7a45;color:#fff}
.m-ng{background:#3a2530;color:#ff8b8b;border:1px solid #5c2f3c}
.codebox{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;font-family:Consolas,monospace;font-size:10.5px}
.codebox span{background:#1c2836;border:1px solid #263241;border-radius:5px;padding:6px;text-align:center;color:#8899ab}
.codebox span.used{opacity:.35;text-decoration:line-through}

/* demo nav */
.demo{position:fixed;bottom:0;left:0;right:0;background:#0f1720;color:#8899ab;z-index:99;font-size:12px}
.demo .wrap{display:flex;align-items:center;flex-wrap:nowrap;gap:6px;height:48px}
.demo b{color:#fff;font-size:11px;margin-right:8px;letter-spacing:.04em}
.demo a{padding:6px 13px;border-radius:99px;background:#1c2836;color:#c3ceda;font-weight:600}
.demo a.on{background:var(--yellow);color:#3a2c00}
.demo .rt{margin-left:auto;font-size:10.5px;opacity:.6}

@media(max-width:1100px){
  .themes{grid-template-columns:repeat(2,1fr)}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .gnav{display:none}
  .kpi{grid-template-columns:repeat(2,1fr)}
}

/* ================= スマホ ================= */
@media(max-width:760px){
  html,body{overflow-x:hidden}
  .wrap{padding:0 14px}
  .narrow{padding:0 14px}

  /* ヘッダー：ロゴ＋ボタンを1段目、検索を2段目 */
  .hd-in{height:auto;padding:12px 14px;flex-wrap:wrap;gap:10px 8px}
  .logo{order:1;flex-shrink:1;min-width:0}
  .logo-img{height:28px}
  .logo-sub{display:none}
  .hd-cta{order:2;margin-left:auto;gap:7px;flex-shrink:0}
  .btn-ghost{padding:8px 12px;font-size:12px;white-space:nowrap}
  .btn-y{padding:9px 12px;font-size:12px;white-space:nowrap}
  .search{order:3;flex:1 0 100%;max-width:none}

  /* ヒーロー：文字は折り返す。CTAは中央・全幅 */
  .hero-img{height:600px;object-position:64% 38%}
  .hero-ov{background:linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.88) 40%,rgba(255,255,255,.4) 66%,rgba(255,255,255,0) 92%)}
  .hero-c .wrap{justify-content:flex-start;padding-top:24px}
  .hero-c .wrap>*{max-width:none;width:100%}
  .hero-h1{white-space:normal;font-size:31px;text-align:center;letter-spacing:-.02em}
  .hero-p{font-size:13.5px;text-align:center}
  .steps{flex-direction:column;max-width:none}
  .step{border-right:0;border-bottom:1px solid var(--line);padding:11px 14px}
  .step:last-child{border-bottom:0}
  .step span{font-size:11px}
  .step span br{display:none}
  .hero-cta{align-items:center;width:100%}
  .btn-lg{width:100%;padding:16px;font-size:16px}
  .stores{justify-content:center;width:100%}
  .stores img{height:44px}

  /* セクション見出し */
  .sec{padding:18px 16px}
  .sec-h{flex-wrap:wrap;gap:8px}
  .sec-h h2{font-size:17px}

  /* テーマカード：1列。画像を大きく */
  .themes{grid-template-columns:1fr;gap:12px}
  .th-thumb{height:150px}
  .th-top>div{min-height:0}
  .th-btn{padding:12px;font-size:13.5px}
  .th-add{padding:22px}

  /* 収集状況 */
  .stats{gap:10px}
  .stat{flex:1 1 calc(50% - 10px);padding-right:0}
  .stat b{font-size:21px}

  /* 下部の3つの訴求 */
  .bene{grid-template-columns:1fr;gap:16px;padding:22px 0}

  /* フッター */
  footer .wrap{flex-direction:column;align-items:center;text-align:center;gap:8px;line-height:1.8}

  /* デモ用ナビ：横スクロール */
  .demo .wrap{overflow-x:auto;flex-wrap:nowrap;gap:6px;padding:0 12px;height:44px;-webkit-overflow-scrolling:touch}
  .demo b{flex-shrink:0}
  .demo a{white-space:nowrap;flex-shrink:0}
  .demo .rt{display:none}

  /* 表・管理画面 */
  .kpi{grid-template-columns:repeat(2,1fr);gap:10px}
  .balance{padding:20px}
  .balance .big{font-size:38px}
  .codebox{grid-template-columns:repeat(3,1fr)}
  .profit{grid-template-columns:1fr}
  .page-hd .wrap{height:56px}
  .page-hd h1{font-size:16px}

  /* 横スクロールで包んだテーブルだけ、折り返さず最小幅を確保 */
  [style*="overflow-x:auto"] .tbl{min-width:600px}
  [style*="overflow-x:auto"] .tbl td.w{white-space:nowrap}
  .balance>div{flex-direction:column;align-items:flex-start!important;gap:10px}
}

@media(max-width:400px){
  .hero-h1{font-size:27px}
  .hd-cta .btn-ghost{padding:8px 11px}
  .hd-cta .btn-y{padding:9px 11px}
  .stat{flex:1 1 100%}
}