/* ================================================================
   診断ラボ 共通スタイル
   - 色は CSS 変数で管理。<body class="theme-dark"> でダークテーマ
   - 診断ごとのアクセント色は --accent（診断データの accent で指定）
   ================================================================ */
:root{
  --bg:#f6f7f9; --panel:#ffffff; --panel2:#f0f2f5; --line:#e2e6ec;
  --text:#1b2330; --muted:#677385; --accent:#3b6cf6; --on-accent:#fff;
  --good:#1f9d5c; --bad:#d64545; --radius:12px;
  --shadow:0 1px 2px rgba(16,24,40,.04),0 4px 14px rgba(16,24,40,.05);
}
.theme-dark{
  --bg:#0b0f14; --panel:#121821; --panel2:#18202b; --line:#253041;
  --text:#e6edf3; --muted:#8b98a9; --on-accent:#111;
  --good:#26d07c; --bad:#ff5d5d; --shadow:none;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font-family:"Noto Sans JP",system-ui,sans-serif;line-height:1.75;min-height:100vh;display:flex;flex-direction:column}
a{color:inherit}
.container{width:100%;max-width:760px;margin:0 auto;padding:0 18px}
main.container{flex:1;padding-bottom:40px}
.mono{font-family:"JetBrains Mono",monospace}
.center{text-align:center}

/* header / footer */
.site-header{background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.hbar{display:flex;align-items:center;justify-content:space-between;height:56px;gap:12px}
.logo{font-weight:900;font-size:18px;text-decoration:none;display:flex;align-items:center;gap:6px;white-space:nowrap}
.logo-mark{color:var(--accent)}
.gnav{display:flex;gap:16px;font-size:14px}
.gnav a{text-decoration:none;color:var(--muted)} .gnav a:hover{color:var(--text)}
.site-footer{border-top:1px solid var(--line);background:var(--panel);padding:26px 0;font-size:13px;color:var(--muted)}
.flinks{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:10px}
.flinks a{text-decoration:none} .flinks a:hover{color:var(--text)}
.crumbs{font-size:12px;color:var(--muted);padding:14px 0 0;display:flex;flex-wrap:wrap;gap:4px}
.crumbs a{text-decoration:none} .crumbs a:hover{text-decoration:underline}
.crumbs .here{color:var(--text)}

/* common */
.tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--accent);border:1px solid var(--accent);padding:1px 8px;border-radius:4px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);color:var(--on-accent);border:none;font-family:inherit;font-weight:700;font-size:15px;padding:12px 24px;border-radius:10px;cursor:pointer;text-decoration:none;transition:filter .15s,transform .1s}
.btn:hover{filter:brightness(1.08)} .btn:active{transform:scale(.98)}
.btn-lg{font-size:17px;padding:15px 32px}
.btn.ghost{background:transparent;color:var(--muted);border:1px solid var(--line);font-weight:500;font-size:14px;padding:9px 18px}
.btn.ghost:hover{color:var(--text);border-color:var(--muted)}
.note{font-size:12px;color:var(--muted);margin-top:12px}
.block{margin-top:44px}
.sec-title{font-size:18px;font-weight:900;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.sec-title::before{content:"";width:4px;height:18px;background:var(--accent);border-radius:2px}
.page-title{font-size:26px;font-weight:900;margin:22px 0 18px}
.more{margin-top:12px;font-size:14px;text-align:right} .more a{color:var(--accent);text-decoration:none}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-top:16px;box-shadow:var(--shadow)}
.disclaimer{font-size:12px;color:var(--muted);margin-top:28px;padding:14px;border:1px dashed var(--line);border-radius:8px}
.fade{animation:fade .35s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* hero */
.hero{text-align:center;padding:52px 0 18px}
.hero-tag{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.2em;color:var(--accent)}
.hero h1{font-size:40px;font-weight:900;line-height:1.3;margin:6px 0 10px}
.hero-lead{color:var(--muted);margin-bottom:18px}

/* diagnosis cards */
.dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.dcard{display:flex;flex-direction:column;gap:6px;background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--accent);border-radius:var(--radius);padding:18px;text-decoration:none;box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s}
.dcard:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(16,24,40,.1)}
.dcard-cat{font-size:11px;font-weight:700;color:var(--accent)}
.dcard-title{font-size:18px;font-weight:900;line-height:1.4}
.dcard-lead{font-size:13px;color:var(--muted);flex:1}
.dcard-meta{font-size:12px;color:var(--muted);display:flex;justify-content:space-between;margin-top:6px}
.dcard-meta .go{color:var(--accent);font-weight:700}

/* article list */
.alist{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.aitem{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:14px 16px;text-decoration:none;border-top:1px solid var(--line)}
.aitem:first-child{border-top:none}
.aitem:hover{background:var(--panel2)}
.aitem-cat{font-size:11px;color:var(--accent);font-weight:700;border:1px solid var(--line);border-radius:4px;padding:1px 6px;white-space:nowrap}
.aitem-title{font-weight:700;font-size:15px}
.aitem-date{font-size:12px;color:var(--muted);white-space:nowrap}

/* diagnosis page */
.dx-hero{padding:26px 0 6px}
.dx-hero h1{font-size:32px;font-weight:900;line-height:1.35;margin:10px 0 8px}
.dx-hero h1 em{font-style:normal;color:var(--accent)}
.dx-lead{color:var(--muted)}
.dx-app{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:26px 22px;margin-top:22px;box-shadow:var(--shadow);min-height:300px}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:26px}
.step{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:14px}
.step .n{font-family:"JetBrains Mono",monospace;color:var(--accent);font-size:12px}
.step .t{font-weight:700;font-size:14px}
.step .d{color:var(--muted);font-size:12px}
.dx-start{padding:10px 0}
.progress{display:flex;justify-content:space-between;font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--muted)}
.pbar{height:5px;background:var(--line);border-radius:3px;margin:8px 0 24px;overflow:hidden}
.pbar i{display:block;height:100%;background:var(--accent);transition:width .3s}
.section{font-size:12px;color:var(--accent);font-weight:700;letter-spacing:.06em}
.q{font-size:20px;font-weight:700;margin:6px 0 22px;min-height:64px;line-height:1.6}
.likert{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:0 4px}
.likert button{-webkit-tap-highlight-color:transparent;flex:1;aspect-ratio:1;border-radius:50%;border:2px solid currentColor;background:transparent;cursor:pointer;transition:background .15s,transform .1s}
.likert button:nth-child(1),.likert button:nth-child(5){max-width:60px}
.likert button:nth-child(2),.likert button:nth-child(4){max-width:46px}
.likert button:nth-child(3){max-width:34px}
.likert button:nth-child(-n+2){color:var(--good)} .likert button:nth-child(3){color:var(--muted)} .likert button:nth-child(n+4){color:var(--bad)}
.likert button.sel{background:currentColor}
@media (hover:hover) and (pointer:fine){.likert button:not(.sel):hover{box-shadow:0 0 0 4px var(--panel2)}}
.likert button:active{transform:scale(.92)}
.likert-labels{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:10px}
.opts{display:flex;flex-direction:column;gap:10px}
.opts button{-webkit-tap-highlight-color:transparent;text-align:left;background:var(--panel);border:1px solid var(--line);color:var(--text);font-family:inherit;font-size:15px;padding:13px 16px;border-radius:10px;cursor:pointer;display:flex;gap:12px;align-items:center;transition:border-color .15s,background .15s}
.opts button .k{font-family:"JetBrains Mono",monospace;color:var(--accent);font-size:13px;width:16px;flex-shrink:0}
.opts button.sel{border-color:var(--accent);background:var(--panel2);box-shadow:inset 0 0 0 1px var(--accent);font-weight:700}
@media (hover:hover) and (pointer:fine){.opts button:not(.sel):hover{border-color:var(--muted)}}
.back{margin-top:24px}

/* result (shared parts) */
.res-head{text-align:center;padding:26px 16px;border-radius:14px;background:var(--panel2);border:1px solid var(--line)}
.res-label{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.16em;color:var(--muted)}
.res-code{font-family:"JetBrains Mono",monospace;font-size:50px;font-weight:700;letter-spacing:.08em;color:var(--accent);line-height:1.15;margin-top:8px}
.res-name{font-size:25px;font-weight:900;margin-top:4px;line-height:1.4}
.res-badge{display:inline-block;margin-top:10px;font-size:14px;font-weight:700;padding:3px 14px;border-radius:20px;border:1px solid}
.res-catch{color:var(--muted);margin-top:10px;font-size:14px}
.result h3{font-size:15px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.result h3::before{content:"";width:4px;height:16px;background:var(--accent);border-radius:2px}
.axis{margin-bottom:12px}
.axis .lbl{display:flex;justify-content:space-between;font-size:13px}
.axis .lbl b{font-family:"JetBrains Mono",monospace}
.axis .track{height:8px;background:var(--line);border-radius:4px;position:relative;margin-top:4px}
.axis .track::after{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:var(--muted)}
.axis .fill{position:absolute;top:0;height:100%;border-radius:4px;background:var(--accent)}
.meter{display:flex;gap:4px;margin:8px 0 4px}
.meter i{flex:1;height:10px;border-radius:2px;background:var(--line)}
.meter-l{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}
.alloc{display:flex;height:34px;border-radius:6px;overflow:hidden;margin:4px 0 12px}
.alloc div{display:flex;align-items:center;justify-content:center;font-family:"JetBrains Mono",monospace;font-size:12px;font-weight:700;color:#0b0f14;min-width:0}
.legend{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;font-size:13px}
.legend span{display:flex;align-items:center;gap:8px}
.legend i{width:10px;height:10px;border-radius:2px;flex-shrink:0}
.legend b{margin-left:auto;font-family:"JetBrains Mono",monospace;font-weight:500;color:var(--muted)}
.asset{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.asset:first-of-type{border-top:none;padding-top:0}
.asset .ic{font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--accent);border:1px solid var(--line);border-radius:4px;padding:2px 6px;height:fit-content;white-space:nowrap}
.asset .nm{font-weight:700;font-size:15px}
.asset .ds{font-size:13px;color:var(--muted)}
.asset.locked{opacity:.5} .asset.locked .ic{color:var(--muted)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.plist{list-style:none;font-size:14px}
.plist li{padding-left:18px;position:relative;margin-bottom:6px}
.plist li::before{position:absolute;left:0;font-family:"JetBrains Mono",monospace;font-weight:700}
.plist.good li::before{content:"+";color:var(--good)} .plist.bad li::before{content:"−";color:var(--bad)}
.plist.check li::before{content:"✓";color:var(--good)}
.share{margin-top:26px;text-align:center;padding:18px;border-top:1px solid var(--line)}
.share p{font-size:13px;color:var(--muted);margin-bottom:10px}
.share-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.sbtn{font-family:inherit;font-size:14px;font-weight:700;padding:9px 16px;border-radius:8px;border:none;cursor:pointer;text-decoration:none}
.sx{background:#000;color:#fff} .theme-dark .sx{background:#fff;color:#000}
.sl{background:#06c755;color:#fff}
.sc{background:var(--panel2);color:var(--text);border:1px solid var(--line)}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--good);color:#fff;font-weight:700;font-size:14px;padding:10px 18px;border-radius:8px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:50}
.toast.show{opacity:1}

/* type list / type page */
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.tchip{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px;text-decoration:none;font-size:13px;line-height:1.45}
.tchip b{font-family:"JetBrains Mono",monospace;color:var(--accent);font-size:13px}
.tchip:hover,.tchip.on{border-color:var(--accent)}
.tchip.on{background:var(--panel2)}
.type-head{text-align:center;padding:34px 0 10px}
.type-code{font-family:"JetBrains Mono",monospace;font-size:46px;font-weight:700;color:var(--accent);letter-spacing:.08em;line-height:1.1}
.type-head h1{font-size:30px;font-weight:900;margin-top:4px;line-height:1.4}
.type-catch{color:var(--muted);margin-top:6px}
.cta{text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:24px;margin-top:32px}
.cta p{font-weight:700;margin-bottom:12px}

/* article / prose */
.article header{padding:26px 0 10px}
.article h1{font-size:28px;font-weight:900;line-height:1.45;margin-top:8px}
.article-date{font-size:12px;color:var(--muted);margin-top:6px}
.prose{font-size:16px}
.prose > * + *{margin-top:1em}
.prose h2{font-size:21px;font-weight:900;margin-top:2em;padding-bottom:6px;border-bottom:2px solid var(--line)}
.prose h3{font-size:17px;font-weight:700;margin-top:1.6em}
.prose ul,.prose ol{padding-left:1.4em}
.prose li + li{margin-top:.3em}
.prose a{color:var(--accent)}
.prose table{width:100%;border-collapse:collapse;font-size:14px;display:block;overflow-x:auto}
.prose th,.prose td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.prose th{background:var(--panel2);white-space:nowrap}
.prose .box{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:8px;padding:14px 16px}
.prose small{color:var(--muted)}
.faq details{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 16px;margin-bottom:8px}
.faq summary{font-weight:700;cursor:pointer}
.faq p{margin-top:8px;font-size:14px;color:var(--muted)}

/* ad */
.ad{margin:26px 0;text-align:center}
.ad-label{display:block;font-size:11px;color:var(--muted);margin-bottom:4px}
.ad-placeholder{border:2px dashed var(--line);border-radius:10px;height:110px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px}

@media (max-width:560px){
  .gnav{gap:12px;font-size:13px}
  .gnav a:nth-child(3){display:none}
  .hero h1{font-size:30px}
  .dx-hero h1{font-size:25px}
  .q{font-size:18px}
  .res-code{font-size:42px}
  .two,.legend{grid-template-columns:1fr}
  .aitem{grid-template-columns:1fr;gap:2px}
  .aitem-cat{justify-self:start}
}

/* form controls (custom question inputs) */
.formrow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.formrow label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700;color:var(--muted)}
.formrow select{font-family:inherit;font-size:16px;color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 12px;appearance:auto}
.formrow select:focus{outline:2px solid var(--accent);outline-offset:1px}
.formrow select:disabled{opacity:.5}
.btn:disabled{opacity:.4;cursor:not-allowed;filter:none}
.note a{color:var(--accent)}
.cat-bars{margin-top:10px}
.cat-bars .track::after{display:none}
.cat-bars .lbl b{font-weight:500}
.cat-tag{display:inline-block;font-size:11px;font-weight:700;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:0 6px;margin-left:8px;vertical-align:2px}
.asset .ds a{color:var(--accent)}
@media (max-width:560px){.formrow{grid-template-columns:1fr}}

/* ---- 性格タイプ連動 ---- */
.mytype{display:inline-flex;align-items:center;gap:6px}
.mytype.has{color:var(--text)!important;font-weight:700}
.mytype-code{font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:700;color:#fff;background:#3b6cf6;border-radius:4px;padding:1px 6px}
.dcard-cat{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dcard-badge{font-size:10px;font-weight:700;color:var(--muted);border:1px solid var(--line);border-radius:10px;padding:0 8px}
.dcard-badge.first{color:#fff;background:var(--accent);border-color:var(--accent)}
.dcard-done{font-size:12px;font-weight:700;color:var(--good)}
.dcard.feature{border-top-width:6px}
.dcard.feature .dcard-title{font-size:22px}
.flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:10px;align-items:stretch;margin:6px 0 18px}
.flow-step{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.flow-step b{font-size:15px;color:var(--text)}
.flow-n{font-family:"JetBrains Mono",monospace;font-size:11px;color:#3b6cf6;font-weight:700}
.flow-arrow{display:flex;align-items:center;color:var(--muted);font-weight:700}
.home-cta .dcard{max-width:none}
.home-me{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;background:var(--panel);border:1px solid var(--line);border-left:5px solid #3b6cf6;border-radius:12px;padding:18px 20px}
.home-me-code{font-family:"JetBrains Mono",monospace;font-size:34px;font-weight:700;color:#3b6cf6;line-height:1.1}
.home-me-name{font-weight:900}
.home-me p{font-size:14px;color:var(--muted)}
.gate{text-align:center;padding:6px 0}
.gate h2{font-size:19px;font-weight:900;line-height:1.5;margin:10px 0 8px}
.gate p{color:var(--muted);font-size:14px;margin-bottom:16px}
.gate-icon{display:inline-flex;width:54px;height:54px;border-radius:14px;align-items:center;justify-content:center;background:#3b6cf6;color:#fff;font-family:"JetBrains Mono",monospace;font-weight:700;font-size:20px}
.gate-or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;margin:22px 0 12px}
.gate-or::before,.gate-or::after{content:"";flex:1;height:1px;background:var(--line)}
.formrow.one{grid-template-columns:1fr;max-width:420px;margin:0 auto;text-align:left}
.type-chip{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;font-size:14px;background:var(--panel2);border:1px solid var(--line);border-radius:30px;padding:8px 16px;margin:0 auto 20px;width:fit-content}
.type-chip span{font-size:12px;color:var(--muted)}
.type-chip b{color:#3b6cf6}
.theme-dark .type-chip b,.theme-dark .home-me-code{color:#7aa2ff}
.type-chip button{font-family:inherit;font-size:12px;color:var(--muted);background:none;border:1px solid var(--line);border-radius:12px;padding:1px 10px;cursor:pointer}
.type-card{border:2px solid #3b6cf6}
.type-card-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.type-card-head span{font-weight:700;color:#fff;background:#3b6cf6;border-radius:6px;padding:2px 8px;font-size:14px}
.type-card-head b{font-size:17px}
.first-step{background:var(--panel2);border-radius:10px;padding:14px 16px;margin-top:14px;border-left:4px solid var(--accent)}
.fs-label{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--accent)}
.fs-title{font-size:17px;font-weight:900;margin:2px 0 6px}
.fs-why{font-size:13px;color:var(--muted)}
.fs-tip{font-size:14px;margin-top:6px}
.type-trap{font-size:13px;color:var(--muted);margin-top:12px}
.next-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.next-card{display:flex;flex-direction:column;gap:4px;border:1px solid var(--line);border-top:4px solid var(--accent);border-radius:10px;padding:14px;text-decoration:none;background:var(--panel)}
.next-card b{font-size:16px}
.next-card span{font-size:13px;color:var(--muted);flex:1}
.next-why{font-size:11px;font-weight:700;color:var(--accent);letter-spacing:.04em}
.next-box{margin-top:22px;border-width:2px}
.next-card em{font-style:normal;font-size:13px;font-weight:700;color:var(--accent)}
.next-card:hover{background:var(--panel2)}
.ret-card{border:2px solid var(--good);text-align:center;margin-bottom:16px}
.ret-card p{margin-bottom:10px;font-size:14px}
.mp-type{text-align:center}
.mp-axes{text-align:left;max-width:460px;margin:16px auto 0}
.actions-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.mp-list{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.mp-item{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:14px 16px;text-decoration:none;border-top:1px solid var(--line)}
.mp-item:first-child{border-top:none}
.mp-item:hover{background:var(--panel2)}
.mp-title{font-weight:700}
.mp-res{font-size:14px;font-weight:700;color:var(--good)}
.mp-res.muted{color:var(--muted);font-weight:500}
.mp-date{font-size:12px;color:var(--muted)}
.mp-go{font-size:13px;font-weight:700;color:#3b6cf6}
@media (max-width:640px){
  .flow{grid-template-columns:1fr}
  .flow-arrow{justify-content:center;transform:rotate(90deg);height:14px}
  .home-me{grid-template-columns:1fr;text-align:center}
  .mp-item{grid-template-columns:1fr auto}
  .mp-item .mp-date,.mp-item .mp-go{grid-column:2}
}

/* ---- トランプ診断：カードの絵 ---- */
.felt{display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap;padding:30px 20px;border-radius:16px;background:radial-gradient(ellipse at center,#2f7d46 0%,#1d5a31 70%,#164826 100%);box-shadow:inset 0 0 40px rgba(0,0,0,.35)}
.felt-text{color:#fff;text-align:left}
.felt-name{font-size:30px;font-weight:900;line-height:1.3}
.felt-title{font-size:16px;color:#e6f4ea;margin-top:4px}
.pcard{position:relative;width:170px;height:238px;background:#fff;border-radius:14px;box-shadow:0 10px 24px rgba(0,0,0,.35);color:#1b1f24;font-family:"JetBrains Mono",monospace;animation:flip .7s ease;flex-shrink:0}
.pcard.red{color:#d6336c}
.pc-corner{position:absolute;font-size:20px;font-weight:700;line-height:1.05;text-align:center}
.pc-corner.tl{top:10px;left:12px}
.pc-corner.br{bottom:10px;right:12px;transform:rotate(180deg)}
.pc-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.pc-big{font-size:96px;line-height:1}
.pc-num{font-size:64px;font-weight:700;line-height:1}
.pc-mid{font-size:44px;line-height:1.1}
.pc-face{font-size:72px;font-weight:700;line-height:1;display:flex;flex-direction:column;align-items:center;border:3px double currentColor;border-radius:10px;padding:10px 22px}
.pc-face span{font-size:34px}
.pcard.joker{background:linear-gradient(160deg,#fff 0%,#fff3bf 100%);color:#7048e8}
.pcard.joker .pc-corner{font-size:13px}
.pc-star{font-size:70px;color:#f59f00;line-height:1}
.pc-jk{font-size:26px;font-weight:700;letter-spacing:.1em;margin-top:6px}
@keyframes flip{from{transform:rotateY(90deg)}to{transform:none}}
.game-chips{display:flex;gap:8px;flex-wrap:wrap}
.game-chips span{background:var(--panel2);border:1px solid var(--line);border-radius:20px;padding:4px 14px;font-weight:700;font-size:14px}
@media (max-width:560px){.felt{flex-direction:column;gap:18px}.felt-text{text-align:center}.felt-name{font-size:24px}}

/* ---- カテゴリー ---- */
.group-nav{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 -8px}
.group-nav a{font-size:13px;font-weight:700;text-decoration:none;padding:6px 14px;border-radius:20px;border:1px solid var(--line);background:var(--panel);color:var(--text)}
.group-nav a:hover{border-color:var(--accent)}
.group{scroll-margin-top:70px}
.group-lead{font-size:13px;color:var(--muted);margin:-6px 0 14px}
.others-title{font-size:20px;font-weight:900;margin:48px 0 0;padding-top:24px;border-top:1px solid var(--line)}
.others-title + .home-cta{margin-top:16px}
h3.sec-title{font-size:16px}
/* 診断ページは開始ボタンが最初の画面に入るように詰める */
.dx-hero{padding:14px 0 0}
.dx-app{margin-top:16px}
.dx-start .steps{margin:22px 0 0}
.gate h2{margin-top:0}
@media (max-width:560px){
  .dx-hero h1{font-size:22px;margin:6px 0 4px}
  .dx-lead{font-size:14px;line-height:1.6}
  .dx-app{padding:20px 16px}
  .crumbs{padding-top:8px}
}
.upgrade-card{border:2px solid var(--accent);margin-bottom:16px}
.upgrade-card p{font-size:14px;margin-bottom:12px}
.sub-card{margin-top:16px}
.sub-card h3{font-size:16px}
#app{scroll-margin-top:70px}
/* ---------- 図解・データツール ---------- */
.feature{margin-top:18px}
.fcard{border-style:dashed}
.ft-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.ft-controls label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:700;color:var(--muted)}
.ft-controls select{font:inherit;font-size:16px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text)}
.ft-seg{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ft-seg button{font:inherit;font-weight:700;font-size:16px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);cursor:pointer;display:flex;flex-direction:column;align-items:center}
.ft-seg button small{font-weight:500;font-size:11px;color:var(--muted)}
.ft-seg button.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:var(--panel2)}
.ft-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ft-stat{border:1px solid var(--line);border-radius:14px;padding:14px;background:var(--panel);display:flex;flex-direction:column;gap:4px}
.ft-stat.main{border:2px solid var(--accent)}
.ft-stat .lbl{font-size:12px;color:var(--muted);font-weight:700}
.ft-stat b{font-size:24px;line-height:1.3}
.ft-stat b small{font-size:13px;color:var(--muted)}
.ft-stat .sub{font-size:13px;color:var(--muted)}
.ft-note{font-size:13px;color:var(--muted);margin:10px 0}
.ft-rank{margin-top:16px}
.ft-bars{display:flex;flex-direction:column;gap:2px;margin-top:8px}
.ft-bar{display:grid;grid-template-columns:7.5em 1fr 3.6em;gap:8px;align-items:center;font-size:13px;padding:2px 4px;border-radius:6px}
.ft-bar .t{position:relative;height:12px}
.ft-bar .t i{position:absolute;left:0;top:0;bottom:0;background:#c5ccd6;border-radius:0 4px 4px 0}
.ft-bar .t em{position:absolute;top:-3px;bottom:-3px;width:0;border-left:1.5px dashed #7a8594}
.ft-bar .v{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}
.ft-bar.me{background:var(--panel2);font-weight:700}.ft-bar.me .t i{background:var(--accent)}.ft-bar.me .v{color:var(--text)}
.ft-bar.cmp{font-weight:700}.ft-bar.cmp .t i{background:#eb6834}
.ft-bar:hover{background:var(--panel2)}
@media (max-width:640px){.ft-controls{grid-template-columns:1fr}.ft-cards{grid-template-columns:1fr}.ft-bar{grid-template-columns:6.5em 1fr 3.4em;font-size:12px}}
.zk-master{position:sticky;top:64px;z-index:5;border:2px solid var(--accent)}
.zk-h{font-size:22px;margin:22px 0 10px}.zk-h em{font-style:normal;color:var(--accent)}
.zk-sec{margin-top:14px}
.zk-inputs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px 20px;margin:10px 0 14px}
.zk-sl label{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;font-weight:700;color:var(--muted)}
.zk-sl label b{font-size:16px;color:var(--text);font-variant-numeric:tabular-nums}
.zk-sl input[type=range]{width:100%;accent-color:var(--accent);height:28px}
.zk-sl small{display:block;font-size:11px;color:var(--muted)}
.zk-big{display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:var(--panel2);border-radius:12px;padding:12px 14px;margin:10px 0}
.zk-big span{font-size:12px;font-weight:700;color:var(--muted)}
.zk-big b{font-size:28px;line-height:1.2;font-variant-numeric:tabular-nums}
.zk-big small{font-size:13px;color:var(--muted)}
.zk-legend{display:flex;gap:14px;font-size:12px;color:var(--muted);margin-top:4px}
.zk-legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:-1px}
.zk-pair{margin:10px 0}
.zk-pl{font-size:13px;font-weight:700;margin-bottom:4px}
.zk-row{display:grid;grid-template-columns:4em 1fr 7.5em;gap:8px;align-items:center;font-size:13px;margin:3px 0}
.zk-row .k{color:var(--muted)}
.zk-row .t{height:14px;position:relative}
.zk-row .t i{position:absolute;left:0;top:0;bottom:0;border-radius:0 4px 4px 0;min-width:2px}
.zk-row .v{text-align:right;font-variant-numeric:tabular-nums}
.zk-note{font-size:13px;color:var(--muted);margin-top:8px;line-height:1.8}
@media (max-width:560px){.zk-master{top:58px}.zk-row{grid-template-columns:3.6em 1fr 6.6em}}
/* ---- 図解・データ：全国比較 ---- */
.ft-controls .wide{grid-column:1/-1}
.ft-seg.three{grid-template-columns:repeat(3,1fr)}
.ft-seg button:disabled{opacity:.45;cursor:default}
.ft-rank .ft-seg{margin:8px 0 12px}
.ft-tabs{display:flex;gap:4px;margin:18px 0 -8px;border-bottom:1px solid var(--line)}
.ft-tabs button{font:inherit;font-size:14px;font-weight:700;padding:9px 14px;border:0;background:none;color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1px}
.ft-tabs button[aria-selected=true]{color:var(--text);border-bottom-color:var(--accent)}
.ft-preview{font-size:13px;background:#fff4d6;border:1px solid #f2d27a;color:#5c4400;border-radius:10px;padding:8px 12px;margin-bottom:14px}
.ft-bar.wide{grid-template-columns:8.5em 1fr 3.6em}
.ft-bar .mv{font-size:10px;margin-left:4px;font-weight:700}.ft-bar .mv.up{color:#2b8a3e}.ft-bar .mv.dn{color:#c92a2a}
.jp-map{display:grid;grid-template-columns:repeat(13,1fr);grid-auto-rows:minmax(34px,auto);gap:3px;margin:6px 0 8px}
.jp-t{font:inherit;font-size:11px;font-weight:700;border:0;border-radius:6px;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;min-width:0;line-height:1.1}
.jp-t span{writing-mode:horizontal-tb;word-break:keep-all;overflow-wrap:anywhere;text-align:center}
.jp-t.na{background:#eceff3;color:#98a2b3}
.jp-t.me{outline:3px solid #10243e;outline-offset:1px;position:relative;z-index:1}
.jp-t.cmp{outline:3px dashed #eb6834;outline-offset:1px;position:relative;z-index:1}
.jp-t:focus-visible{outline:3px solid var(--accent)}
.jp-legend{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.jp-legend i{flex:1;height:8px;border-radius:4px;max-width:240px}
@media (max-width:640px){.jp-map{gap:2px;grid-auto-rows:minmax(24px,auto)}.jp-t{font-size:8.5px;border-radius:4px}.ft-seg.three button{font-size:13px}.ft-bar.wide{grid-template-columns:7.2em 1fr 3.2em}.ft-tabs button{padding:8px 10px;font-size:13px}}
/* ハブページ */
.hub-lead{font-size:15px;color:var(--muted);margin:-6px 0 18px}
.hub-tip{border:1px solid var(--line);background:var(--panel);border-radius:14px;padding:12px 14px;font-size:13px;color:var(--muted);margin:0 0 16px}
.hub-tip b{color:var(--text)}
.more-link{margin:10px 0 0;text-align:right;font-size:14px}
.ft-controls .zk-sl label{flex-direction:row;justify-content:space-between;align-items:baseline}
/* ================================================================
   トップページ（診断ラボ）
   色：ライラック #f1edff／インク #231f55／ピンク #ff4f8b／イエロー #ffd23f
   ================================================================ */
.skin-home{--bg:#f6f4ff;--text:#231f55;--muted:#625c8c;--line:#e2dcf7}
.skin-home .site-header .container,.skin-home main.container,.skin-home .site-footer .container{max-width:1080px}
.skin-home .logo-mark{color:#ff4f8b}
.lh-hero{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center;padding:56px 0 64px}
.lh-hero::before{content:"";position:absolute;z-index:-1;inset:0 auto 0 50%;width:100vw;transform:translateX(-50%);
  background:radial-gradient(circle at 1px 1px,rgba(35,31,85,.13) 1.2px,transparent 1.4px) 0 0/22px 22px,linear-gradient(160deg,#ebe4ff 0%,#f6f4ff 55%,#fff1f6 100%)}
.lh-copy h1{font-family:"Dela Gothic One","Noto Sans JP",sans-serif;font-weight:400;font-size:64px;line-height:1.18;letter-spacing:.01em;color:#231f55;margin-bottom:18px}
.lh-lead{font-size:16px;color:var(--muted);max-width:27em;margin-bottom:26px}
.lh-actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.lh-btn{display:inline-flex;align-items:center;font-weight:900;font-size:16px;text-decoration:none;padding:14px 26px;border-radius:999px;background:#ff4f8b;color:#fff;box-shadow:0 6px 0 #c92d68;transition:transform .1s,box-shadow .1s}
.lh-btn:active{transform:translateY(4px);box-shadow:0 2px 0 #c92d68}
.lh-btn.ghost{background:#fff;color:#231f55;box-shadow:0 6px 0 #d4ccf3}
.lh-btn:focus-visible{outline:3px solid #231f55;outline-offset:3px}
.lh-meta{font-size:13px;color:var(--muted)}
/* 扇形に広げた診断カード */
.lh-deck{position:relative;height:380px}
.lh-card{position:absolute;left:50%;top:20px;width:196px;height:286px;margin-left:-98px;border-radius:18px;background:#fff;border:3px solid #231f55;box-shadow:0 14px 30px -14px rgba(35,31,85,.45);
  display:flex;flex-direction:column;padding:14px 16px;text-decoration:none;color:#231f55;overflow:hidden;
  transform-origin:50% 120%;transform:rotate(calc(var(--i) * 11deg)) translateX(calc(var(--i) * 26px));z-index:calc(10 - var(--i) * var(--i))}
.lh-card::before{content:"";position:absolute;inset:0 0 auto 0;height:118px;background:var(--accent);z-index:-1}
.lh-card::after{content:"";position:absolute;left:0;right:0;top:110px;height:16px;background:radial-gradient(circle at 8px 0,var(--accent) 8px,transparent 8.5px) 0 0/16px 16px repeat-x;z-index:-1}
.lc-cat{font-size:11px;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.lc-glyph{font-family:"Dela Gothic One",sans-serif;font-size:76px;line-height:1;color:#fff;margin:4px 0 26px;text-shadow:3px 3px 0 rgba(35,31,85,.25)}
.lc-title{font-weight:900;font-size:17px;line-height:1.35;flex:1}
.lc-q{font-size:12px;font-weight:700;color:var(--muted);border-top:2px dashed #e2dcf7;padding-top:6px}
@media (prefers-reduced-motion:no-preference){
  .lh-card{animation:fanOut .9s cubic-bezier(.2,.8,.2,1.1) both;animation-delay:calc((2 - var(--i) * var(--i)) * -40ms + 150ms)}
  @keyframes fanOut{from{transform:rotate(0) translateX(0) translateY(30px);opacity:0}}
}
/* はじめ方 */
.lh-start{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr);gap:22px;align-items:stretch;margin-top:8px}
.lh-flow{list-style:none;counter-reset:st;display:flex;flex-direction:column;gap:10px}
.lh-flow li{counter-increment:st;position:relative;background:#fff;border:2px solid #231f55;border-radius:16px;padding:12px 14px 12px 58px;display:flex;flex-direction:column;font-size:13px;color:var(--muted)}
.lh-flow li::before{content:counter(st);position:absolute;left:14px;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;background:#ffd23f;color:#231f55;font-family:"Dela Gothic One",sans-serif;display:grid;place-items:center;font-size:16px}
.lh-flow li b{font-size:15px;color:#231f55}
.skin-home #home-type .dcard{height:100%;border:3px solid #231f55;border-radius:22px;box-shadow:8px 8px 0 #231f55}
.skin-home #home-type .home-me{height:100%;border:3px solid #231f55;border-radius:22px;box-shadow:8px 8px 0 #231f55}
.lh-collect{display:flex;align-items:center;gap:14px;margin:26px 0 0;padding:12px 18px;border-radius:999px;background:#231f55;color:#fff;font-size:14px}
.lh-collect b{font-size:20px;color:#ffd23f}
.cl-bar{flex:1;height:10px;border-radius:5px;background:rgba(255,255,255,.18);overflow:hidden}
.cl-bar i{display:block;height:100%;background:linear-gradient(90deg,#ffd23f,#ff4f8b);border-radius:5px}
.lh-collect a{color:#fff;font-weight:700;font-size:13px;white-space:nowrap}
/* カテゴリと診断カード */
.skin-home .group-nav{margin-top:40px}
.skin-home .group-nav a{border:2px solid #231f55;background:#fff}
.skin-home .sec-title{font-family:"Dela Gothic One","Noto Sans JP",sans-serif;font-weight:400;font-size:28px;border:0;padding:0}
.skin-home .sec-title::before{display:none}
.skin-home .dgrid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.skin-home .group .dcard{position:relative;border:2px solid #231f55;border-radius:18px;padding:0 16px 16px;overflow:hidden;box-shadow:5px 5px 0 #231f55;transition:transform .12s,box-shadow .12s}
.skin-home .group .dcard:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 #231f55}
.skin-home .group .dcard::before{content:attr(data-glyph);display:flex;align-items:flex-end;height:84px;margin:0 -16px 10px;padding:0 14px 6px;background:var(--accent);color:#fff;font-family:"Dela Gothic One",sans-serif;font-size:54px;line-height:1;text-shadow:3px 3px 0 rgba(35,31,85,.22);overflow:hidden}
.skin-home .group .dcard-cat{color:#231f55}
@media (max-width:820px){
  .lh-hero{grid-template-columns:1fr;padding:30px 0 20px;gap:4px}
  .lh-copy h1{font-size:42px}
  .lh-deck{height:300px;margin-top:4px}
  .lh-card{width:150px;height:220px;margin-left:-75px;transform:rotate(calc(var(--i) * 10deg)) translateX(calc(var(--i) * 22px))}
  .lh-card::before{height:92px}.lh-card::after{top:84px}
  .lc-glyph{font-size:56px;margin-bottom:16px}
  .lc-title{font-size:14px}
  .lh-start{grid-template-columns:1fr}
}
@media (max-width:420px){.lh-copy h1{font-size:36px}.lh-collect{flex-wrap:wrap;border-radius:16px}}
.lh-collect[hidden]{display:none}
body.skin-home{overflow-x:clip}
/* 診断アイコン（絵文字） */
.skin-home .group .dcard::before{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-size:46px;text-shadow:none;filter:drop-shadow(2px 3px 0 rgba(35,31,85,.25));padding-bottom:10px}
.lc-glyph{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-size:64px;text-shadow:none;filter:drop-shadow(3px 4px 0 rgba(35,31,85,.25))}
@media (max-width:820px){.lc-glyph{font-size:48px}}
/* トップ・カテゴリの省スペース化 */
.more-link{margin:10px 0 0;text-align:right;font-size:14px;font-weight:700}
.more-link a{color:var(--accent,#3b6cf6)}
.skin-home .more-link a{color:#231f55}
.lh-all{text-align:center;margin:30px 0 10px}
.group-nav a[aria-current]{background:#231f55;color:#fff;border-color:#231f55}
@media (max-width:640px){
  .skin-home .group .dgrid{display:grid;grid-auto-flow:column;grid-auto-columns:76%;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 8px 12px 2px;margin:0 -18px 0 0;gap:14px}
  .skin-home .group .dcard{scroll-snap-align:start}
}