/* =========================================================================
 * トレードタイプ診断 — 共通スタイル（v3 ライト基調・設計書（改）625 準拠）
 * 基準: tradetype-result-frame.html（白×ダーク文字×ゴールド/ミント）
 * 全ページ共通: index.html(LP/設問/結果) ・ types.html(図鑑) ・ result.html
 * ========================================================================= */
:root{
  --bg:#FFFFFF; --sub:#F7F8FA; --ink:#1A1A1A; --ink2:#4A5568; --gray:#718096;
  --yellow:#C99500; --yellow-d:#A87E00; --mint:#00A878; --coral:#E5484D;
  --line:#E2E8F0; --card:#FFFFFF; --fire:#E5663B; --steel:#3B7BC4;
  --mono:'DM Mono',monospace; --disp:'Montserrat',sans-serif; --jp:'Noto Sans JP',sans-serif;
  /* 家系カラー（パステル背景＋濃色アクセント） */
  --h-attack:#E5484D; --h-attack-bg:#FCEBEB;
  --h-solid:#00A878;  --h-solid-bg:#E6F6F0;
  --h-pioneer:#C99500;--h-pioneer-bg:#FBF3D9;
  --h-design:#6C5CE7; --h-design-bg:#EEEBFB;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--jp);background:var(--bg);color:var(--ink);line-height:1.7;font-weight:400;-webkit-font-smoothing:antialiased}
a{color:var(--yellow)}
.mono{font-family:var(--mono);font-weight:500}
.yellow{color:var(--yellow)}.mint{color:var(--mint)}
.wrap{max-width:760px;margin:0 auto;padding:0 20px}

/* ====================== 共通ヘッダー ====================== */
.hd{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hd .wrap{display:flex;align-items:center;gap:12px;padding:12px 20px;max-width:1080px}
.hd .logo{display:flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:800;font-size:15px;color:var(--ink);text-decoration:none}
.hd .logo svg{width:22px;height:22px}
.hd .logo img{height:26px;width:auto;display:block}
.hd .sp{flex:1}
.hd .nav{display:flex;gap:16px}
.hd .nav a{font-size:13px;color:var(--ink2);text-decoration:none}
.hd .nav a:hover{color:var(--yellow)}
.hd .nav .acc{color:var(--yellow);font-weight:700}
.hd .navsep{color:#cbd5e0;align-self:center}
@media(max-width:560px){.hd .nav{font-size:12px;gap:12px}}
section{padding:48px 0;position:relative}
@media(min-width:1024px){section{padding:60px 0}}
.sub-dark{background:var(--sub)}
h1,h2,h3{font-family:var(--disp);line-height:1.25}
h2{font-size:23px;font-weight:800;text-align:center;line-height:1.3;margin-bottom:6px;color:var(--ink)}
@media(min-width:768px){h2{font-size:28px}}
.sec-note{text-align:center;color:var(--gray);font-size:13px;margin-bottom:24px}
.eyebrow{font-family:var(--mono);font-size:12px;color:var(--yellow);letter-spacing:.12em;text-transform:uppercase;text-align:center;margin-bottom:12px}
.cta{display:inline-block;background:var(--ink);color:#fff;font-weight:700;border:none;border-radius:12px;padding:17px 34px;font-size:16px;cursor:pointer;text-decoration:none;line-height:1.4;transition:background .15s,transform .15s;font-family:var(--jp)}
.cta:hover{background:#000;transform:translateY(-1px)}
.cta-center{text-align:center}

/* ====================== 診断LP / 設問 (index.html) ====================== */
.lp-hero{text-align:center;padding:44px 0 22px;position:relative;overflow:hidden;background:var(--sub)}
.lp-hero-bg{display:none}
.lp-hero>.wrap{position:relative;z-index:2}
.lp-hero h1{font-size:30px;font-weight:800;line-height:1.25;margin-bottom:14px;color:var(--ink)}
@media(min-width:768px){.lp-hero h1{font-size:46px}}
.lp-hero .sub{color:var(--ink2);font-size:15px;margin-bottom:24px}
.lp-note{font-size:12.5px;color:var(--gray);margin-top:12px}

#value{padding-top:14px}
#value .wrap{max-width:1040px}
.lp-value{display:grid;grid-template-columns:1fr;gap:20px;margin-top:14px}
@media(min-width:768px){.lp-value{grid-template-columns:repeat(3,1fr)}}
/* 16Personalities風カード：上部カラーゾーン(イラスト右)＋波の境界＋下に本文 */
.lp-vcard{position:relative;background:#fff;border:1px solid var(--line);border-top:3px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 6px 20px rgba(16,24,40,.07);transition:transform .2s ease,box-shadow .2s ease}
.lp-vcard:hover{transform:translateY(-5px) !important;box-shadow:0 16px 32px rgba(16,24,40,.13)}
.lp-vcard>*{position:relative;z-index:1}
.lp-vtop{position:relative;height:116px;overflow:hidden}
.lp-vtop::after{content:'';position:absolute;left:0;right:0;bottom:0;height:20px;background:#fff;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 20' preserveAspectRatio='none'%3E%3Cpath d='M0,8 C300,20 900,0 1200,11 L1200,20 L0,20 Z' fill='%23000'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 20' preserveAspectRatio='none'%3E%3Cpath d='M0,8 C300,20 900,0 1200,11 L1200,20 L0,20 Z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}
.lp-vicon{position:absolute;right:16px;bottom:24px;width:84px;height:84px;margin:0}
.lp-vicon img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(16,24,40,.14))}
.lp-vbody{padding:14px 22px 24px}
.lp-vcard h3{font-size:17px;margin:8px 0 8px;color:var(--ink);font-family:var(--jp);font-weight:700;line-height:1.4}
.step-badge{display:inline-block;font-family:var(--jp);font-weight:700;font-size:11px;letter-spacing:.04em;padding:3px 11px;border-radius:999px}
.lp-vcard p{font-size:13px;color:var(--ink2);line-height:1.7}
/* 3色（青 / 緑 / 紫） */
/* 上部ゾーンはフラット配色＋カード上辺に色ライン（青/緑/紫） */
.lp-value .lp-vcard:nth-child(1) .lp-vtop{background:#EAF2FB}
.lp-value .lp-vcard:nth-child(2) .lp-vtop{background:#E7F5EE}
.lp-value .lp-vcard:nth-child(3) .lp-vtop{background:#F0EAFB}
.lp-value .lp-vcard:nth-child(1){border-top-color:#4A90D9}
.lp-value .lp-vcard:nth-child(2){border-top-color:#34B27B}
.lp-value .lp-vcard:nth-child(3){border-top-color:#8E6FD6}
.lp-value .lp-vcard:nth-child(1) .step-badge{background:#E3EEFA;color:#3D6CA8}
.lp-value .lp-vcard:nth-child(2) .step-badge{background:#DFF2E8;color:#2E8B63}
.lp-value .lp-vcard:nth-child(3) .step-badge{background:#EBE2F8;color:#6C5CE7}
.lp-disc{font-size:12px;color:var(--gray);text-align:center;margin-top:22px}
.lp-value .lp-vcard{opacity:0;transform:translateY(22px)}
.lp-value.in .lp-vcard{animation:cardUp .6s cubic-bezier(.2,.7,.3,1) forwards}
.lp-value.in .lp-vcard:nth-child(2){animation-delay:.13s}
.lp-value.in .lp-vcard:nth-child(3){animation-delay:.26s}
@keyframes cardUp{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.lp-value .lp-vcard{opacity:1;transform:none}}

/* 設問（このページ内に常設） */
.wizard{display:block}
.wizard .quiz-head{text-align:center;padding-top:6px}
.wizard .quiz-head h2{margin-bottom:4px}
.wizard .quiz-head .sec-note{margin-bottom:4px}
.progress{position:sticky;top:52px;z-index:30;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);padding:14px 0}
.progress-row{display:flex;align-items:center;gap:14px}
.progress-txt{font-family:var(--mono);font-weight:500;font-size:13px;color:var(--yellow);min-width:54px}
.progress-bar{flex:1;height:10px;background:#EDF0F3;border-radius:999px;overflow:hidden}
.progress-fill{height:100%;width:0;border-radius:999px;transition:width .3s;background:linear-gradient(90deg,#C99500 0%,#EAC24E 50%,#C99500 100%);background-size:200% 100%;animation:barflow 2.4s linear infinite}
@keyframes barflow{from{background-position:0 0}to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.progress-fill{animation:none}}
.q-axis{text-align:center;font-family:var(--mono);font-size:12px;color:var(--mint);letter-spacing:.08em;margin-top:24px}
.q{font-size:20px;font-weight:700;line-height:1.5;margin:8px 0 22px;text-align:center;color:var(--ink)}
@media(min-width:768px){.q{font-size:23px}}
.choices{display:grid;gap:12px}
.choice{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 20px;text-align:left;color:var(--ink);font-size:15px;font-weight:500;cursor:pointer;transition:all .15s;line-height:1.5;font-family:var(--jp);box-shadow:0 1px 3px rgba(16,24,40,.05)}
.choice:hover{border-color:var(--yellow);background:#FFFCF2}
.choice .lbl{color:var(--yellow);font-family:var(--mono);font-weight:500;margin-right:8px}
.controls{display:flex;justify-content:space-between;margin-top:22px}
.back{background:transparent;border:1px solid var(--line);color:var(--gray);border-radius:8px;padding:9px 18px;cursor:pointer;font-size:14px;font-family:var(--jp)}
.back:hover{border-color:var(--yellow);color:var(--yellow)}
.back:disabled{opacity:.4;cursor:not-allowed}
.milestone{background:#E6F6F0;border:1px solid rgba(0,168,120,.3);border-radius:8px;padding:11px 16px;margin:16px 0;color:var(--mint);font-size:14px;text-align:center}
.calc{text-align:center;padding:80px 0}
.calc .spin{font-size:46px;animation:sp 1s linear infinite;display:inline-block}
@keyframes sp{to{transform:rotate(360deg)}}
.calc p{margin-top:16px;color:var(--ink2)}

/* ===== 5段階リッカート設問（1ページ5問） ===== */
.qlist{display:flex;flex-direction:column;gap:14px;margin-top:8px}
.qrow{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 18px 16px;box-shadow:0 1px 3px rgba(16,24,40,.05)}
.q-text{font-size:15px;font-weight:700;color:var(--ink);line-height:1.55;margin-bottom:14px}
@media(min-width:768px){.q-text{font-size:16px}}
.q-no{display:inline-block;font-family:var(--mono);font-size:11px;color:var(--yellow);margin-right:8px}
.likert{display:flex;flex-direction:column;gap:8px}
.lk-ends{display:flex;justify-content:space-between;padding:0 4px;font-size:11px}
.lk-ends .agree{color:var(--mint)}
.lk-ends .dis{color:var(--coral)}
.lk-dots{display:flex;align-items:center;justify-content:center;gap:14px}
.dot{position:relative;flex:0 0 auto;border-radius:50%;border:2px solid;background:transparent;cursor:pointer;padding:0;transition:transform .12s ease,background .12s ease,border-color .12s ease}
.dot::before{content:'';position:absolute;inset:-7px}            /* タップ領域拡張 */
.dot.v2,.dot.v-2{width:44px;height:44px}
.dot.v1,.dot.v-1{width:36px;height:36px}
.dot.v0{width:28px;height:28px}
.dot.z-agree{border-color:#9FE0C6}
.dot.z-dis{border-color:#F2B0B3}
.dot.z-mid{border-color:#CBD5E0}
.dot:hover{transform:scale(1.08)}
.dot.z-agree.on{background:var(--mint);border-color:var(--mint)}
.dot.z-dis.on{background:var(--coral);border-color:var(--coral)}
.dot.z-mid.on{background:var(--gray);border-color:var(--gray)}
.next{background:var(--ink);color:#fff;border:none;border-radius:10px;padding:11px 26px;font-size:15px;font-weight:700;cursor:pointer;font-family:var(--jp);transition:background .15s}
.next:hover{background:#000}
.next:disabled{opacity:.4;cursor:not-allowed}

/* ====================== 結果ビュー (frame準拠・ライト) ====================== */
.devbar{background:#FBF3D9;border-bottom:1px solid var(--line);padding:9px 0;font-size:12px;color:#7a6a2a}
.devbar .wrap{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.devbar select{background:#fff;color:var(--ink);border:1px solid var(--yellow);border-radius:6px;padding:5px 8px;font-family:inherit;font-size:12px}

/* 結果ビュー：薄グレー地に、各セクションを白い影付きカードで分離（ヒーロー除く） */
#resultView{background:#E9EEF4}
#resultView .sec{padding:16px 0;position:relative;background:#E9EEF4}
#resultView .sec:not(.r-hero):not(.c-final)>.wrap{background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:0 4px 20px rgba(16,24,40,.06);padding:34px 28px}
@media(max-width:600px){#resultView .sec:not(.r-hero):not(.c-final)>.wrap{padding:26px 18px}}
.rwave::before{display:none}
.r-card{box-shadow:0 1px 3px rgba(16,24,40,.06)}

/* hero */
.r-hero{text-align:center;position:relative;overflow:hidden}
.r-hero>.wrap{position:relative;z-index:2}
.r-hero .mascot{width:250px;height:250px;margin:0 auto 8px;background:none;border:none;box-shadow:none;display:flex;align-items:flex-end;justify-content:center;overflow:visible}
.r-hero .mascot img{width:auto;height:100%;object-fit:contain;filter:drop-shadow(0 16px 22px rgba(0,0,0,.24))}
.r-hero .type-name{font-size:clamp(28px,7vw,50px);font-weight:800;letter-spacing:.01em;color:var(--ink);line-height:1.2}
.r-hero .type-sub{font-family:var(--mono);font-size:15px;margin-top:8px;color:var(--gray)}
.r-hero.famhero .type-sub{color:rgba(255,255,255,.92)}
.r-hero .type-tag.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}
.r-hero .type-tag.chips .chip{font-family:var(--mono);font-size:12px;padding:6px 13px;border-radius:999px;background:rgba(255,255,255,.20);border:1px solid rgba(255,255,255,.45);color:#fff;white-space:nowrap}
.r-hero .one-line{font-size:clamp(15px,3.6vw,18px);color:var(--ink);margin-top:16px;font-weight:500;max-width:560px;margin-left:auto;margin-right:auto}
.share-mini{margin-top:20px}
.share-mini a{font-family:var(--mono);font-size:12px;background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:9px 16px;cursor:pointer;text-decoration:none}
.share-mini a:hover{border-color:var(--yellow);color:var(--yellow)}
/* 系統別グラデーション・ヘッダー（タイプ別ページ／診断結果 共通） */
#resultView .r-hero.fam-attack{background:linear-gradient(135deg,#FF7E9D 0%,#FF9A6B 100%)}
#resultView .r-hero.fam-solid{background:linear-gradient(135deg,#2FD3A5 0%,#27B0CE 100%)}
#resultView .r-hero.fam-pioneer{background:linear-gradient(135deg,#FFC24B 0%,#FF8F4D 100%)}
#resultView .r-hero.fam-design{background:linear-gradient(135deg,#9E81FF 0%,#6C8CFF 100%)}
/* ヒーロー下辺を激しい波に＋次セクションへ背景を食い込ませる */
#resultView .r-hero{position:relative;z-index:2;padding:44px 0 108px;margin-bottom:-78px;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H1200 V42 C1040,98 900,6 720,52 C560,95 400,4 240,48 C150,72 70,36 0,58 Z' fill='%23000'/%3E%3C/svg%3E"),linear-gradient(#000,#000);
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H1200 V42 C1040,98 900,6 720,52 C560,95 400,4 240,48 C150,72 70,36 0,58 Z' fill='%23000'/%3E%3C/svg%3E"),linear-gradient(#000,#000);
  -webkit-mask-size:100% 100px,100% calc(100% - 96px);mask-size:100% 100px,100% calc(100% - 96px);
  -webkit-mask-position:bottom,top;mask-position:bottom,top;
  -webkit-mask-repeat:no-repeat,no-repeat;mask-repeat:no-repeat,no-repeat}
#resultView .r-hero.famhero{padding-top:46px}
#resultView .r-hero + .sec{padding-top:96px}
.r-hero.famhero .eyebrow{color:rgba(255,255,255,.92)}
.r-hero.famhero .type-name{color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.20)}
.r-hero.famhero .type-name .accent,.r-hero.famhero .type-name .suffix{color:#fff}
.r-hero.famhero .type-name .suffix{opacity:.92}
.r-hero.famhero .type-tag{color:rgba(255,255,255,.92)}
.r-hero.famhero .one-line{color:#fff}
.r-hero.famhero .share-mini a{border-color:rgba(255,255,255,.6);color:#fff}
.r-hero.famhero .share-mini a:hover{background:rgba(255,255,255,.16);border-color:#fff;color:#fff}
/* ヘッダーのキラキラ（白い星） */
.r-hero .r-spark,#resultView .c-final .r-spark{position:absolute;z-index:1;pointer-events:none;opacity:0;background:#fff;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);filter:drop-shadow(0 0 5px rgba(255,255,255,.95));animation:rsparkle ease-in-out infinite}
@keyframes rsparkle{0%{opacity:0;transform:scale(.2) rotate(0)}30%{opacity:1}58%{transform:scale(1.15) rotate(90deg)}82%{opacity:.6}100%{opacity:0;transform:scale(.2) rotate(160deg)}}
@media(prefers-reduced-motion:reduce){.r-hero .r-spark{animation:none;opacity:.5}}

.r-lead{color:var(--ink2);margin-top:12px;text-align:center;max-width:600px;margin-left:auto;margin-right:auto}

/* やりがちなこと（あるある＋根拠の一言） */
.aru-list{display:flex;flex-direction:column;gap:10px;max-width:620px;margin:22px auto 0}
.aru-item{background:#fff;border:1px solid var(--line);border-left:3px solid var(--yellow);border-radius:10px;padding:14px 16px;box-shadow:0 1px 3px rgba(16,24,40,.05)}
.aru-main{font-weight:700;font-size:14px;color:var(--ink);line-height:1.5}
.aru-sub{font-size:12.5px;color:var(--ink2);margin-top:5px;line-height:1.55}

/* 図星（縦並びリスト・旧） */
.bullseye{display:grid;grid-template-columns:1fr;gap:10px;margin-top:24px;max-width:620px;margin-left:auto;margin-right:auto}
.hit{background:#FFF9EC;border:1px solid #EFD98A;border-radius:14px;padding:15px 18px;font-size:14px;line-height:1.65;color:var(--ink);text-align:left;opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
.hit.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.hit{opacity:1;transform:none;transition:none}}
.aru{margin-top:18px;max-width:620px;margin-left:auto;margin-right:auto}
.aru .col{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 20px}
.aru ul{margin:0;padding-left:18px}
.aru li{margin:8px 0;font-size:14px;color:var(--ink2);line-height:1.6}
.aru-cap{font-family:var(--mono);font-size:12px;color:var(--gray);margin-top:14px;text-align:center}
.sup-badge{display:block;text-align:center;font-family:var(--jp);font-size:11px;color:#9AA5B1;margin-top:16px;line-height:1.6}

/* タイプの内訳（4軸バー＋解釈の一言）
   勝っている極を左に・左から塗る（向きを全軸統一）。色は POS極=ミント / NEG極=ブルー */
.axbars{display:flex;flex-direction:column;gap:18px;max-width:600px;margin:22px auto 0}
.axbar-top{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;margin-bottom:7px}
.axbar-top .axname{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:#A0AAB5}
.axbar-top .axl,.axbar-top .axr{color:var(--gray)}
.axbar.p-pos .axl{color:var(--mint);font-weight:700}
.axbar.p-neg .axr{color:#4A90D9;font-weight:700}
.axtrack{position:relative;height:8px;background:#EDF0F3;border-radius:999px;margin-top:5px}
.axmid{position:absolute;left:50%;top:-3px;width:2px;height:14px;background:#CBD5E0;transform:translateX(-50%);border-radius:1px}
.axfill{position:absolute;top:0;height:100%;border-radius:999px;transition:width .5s ease,left .5s ease}
.axdot{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;transform:translate(-50%,-50%);border:3px solid #fff;box-shadow:0 1px 4px rgba(16,24,40,.28);z-index:2;transition:left .5s ease}
.axbar.p-pos .axfill,.axbar.p-pos .axdot{background:var(--mint)}
.axbar.p-neg .axfill,.axbar.p-neg .axdot{background:#4A90D9}
.axis-note{font-size:12.5px;color:var(--ink2);margin-top:8px;line-height:1.6}

/* このタイプの特徴（散文）＋受け止め行 */
.narrative{max-width:660px;margin:30px auto 0}
.narrative-h{font-family:var(--jp);font-weight:700;font-size:17px;color:var(--ink);margin:0 0 14px;text-align:center}
.narrative p{font-size:15px;line-height:1.9;color:#2D3748;margin:0}
.takeaway{max-width:660px;margin:18px auto 0;font-size:13.5px;line-height:1.75;color:var(--ink2);border-left:3px solid var(--yellow);padding-left:14px}

/* 強み・事故 */
.sw{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
@media(max-width:600px){.sw{grid-template-columns:1fr}}
.sw .col{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px}
.sw .col.s{background:#EAF7F0;border-color:#BFE6D4}
.sw .col.w{background:#F2F4F7;border-color:#E2E8F0}
.sw h3{font-family:var(--jp);font-weight:700;font-size:14px;margin-bottom:12px}
.sw .col.s h3{color:var(--mint)} .sw .col.w h3{color:var(--coral)}
.sw ul{margin:0;padding-left:18px;color:var(--ink2);font-size:14px}
.sw li{margin:6px 0}

/* 裏の才能：このボックスだけ MC Black（#1A1A1A）×白文字で“特別感”を出す */
#resultView .sec.c-talent:not(.r-hero):not(.c-final)>.wrap{background:#1A1A1A;border-color:#1A1A1A;box-shadow:0 10px 30px rgba(0,0,0,.28)}
#resultView .c-talent h2{color:#fff}
#resultView .c-talent .sec-note{color:#CBD5E0}
#resultView .c-talent .takeaway{color:#E2E8F0}
#resultView .c-talent .t-foot{color:#9AA5B1}

/* 裏才能（該当1つだけ・中央寄せ縦積み・ビジュアル枠・絵文字なし） */
.talent{margin-top:20px}
.talent-single{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;background:transparent;border:none;border-radius:0;padding:8px 0 0;max-width:480px;margin:0 auto}
.talent-visual{width:240px;height:240px;display:flex;align-items:center;justify-content:center;color:#5b6472;font-size:11px;text-align:center;line-height:1.5;overflow:visible}
.talent-visual img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 20px rgba(0,0,0,.35))}
.talent-body h4{font-family:var(--jp);font-weight:700;font-size:19px;margin:4px 0 10px;color:#fff}
.talent-body p{font-size:14px;color:#C7CCD4;margin:0 0 12px;line-height:1.7}
.talent-body .t-sub{display:inline-block;font-family:var(--mono);font-size:11px;color:var(--mint);border:1px solid var(--mint);border-radius:6px;padding:3px 9px}
.t-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;position:relative}
.t-card.lit{border-color:var(--mint);box-shadow:0 0 0 1px var(--mint) inset}
.t-card.dim{opacity:.5}
.t-ico{font-size:22px}
.t-card h4{font-family:var(--jp);font-weight:700;font-size:14px;margin:8px 0 8px;color:var(--ink)}
.t-card p{margin:0;font-size:13px;color:var(--ink2)}
.t-sub{display:inline-block;margin-top:10px;font-family:var(--mono);font-size:11px;color:var(--mint);border:1px solid var(--mint);border-radius:6px;padding:2px 7px}
.t-note{color:var(--gray);font-size:12px}
.t-foot{text-align:center;font-size:11px;color:var(--gray);margin-top:14px}

/* 環境（カード＋なぜ効くかの理由） */
.env-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:680px;margin:20px auto 0}
@media(max-width:600px){.env-grid{grid-template-columns:1fr}}
.env-card{background:#F4FBF8;border:1px solid #C9EADD;border-radius:14px;padding:16px 18px;text-align:left}
.env-h{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px;color:var(--ink);line-height:1.4}
.env-h::before{content:"✓";flex:0 0 22px;width:22px;height:22px;border-radius:50%;background:var(--mint);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12px}
.env-why{font-size:12.5px;color:var(--ink2);margin-top:9px;line-height:1.6}
.env-foot{text-align:center;color:var(--ink2);font-size:13.5px;margin-top:18px;line-height:1.7}

/* 業者テーブル */
.whatis{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin-top:18px;font-size:14px;color:var(--ink2);max-width:680px;margin-left:auto;margin-right:auto;text-align:center;line-height:1.85}
.whatis b{color:var(--ink)}
.btable{width:100%;max-width:680px;margin:20px auto 0;border-collapse:collapse;font-size:14px;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 1px 3px rgba(16,24,40,.06)}
.btable th,.btable td{text-align:left;padding:12px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.btable th{font-family:var(--mono);font-size:11px;color:#7A5C00;font-weight:700;letter-spacing:.04em;background:#FBE08C}
.btable .rank{font-family:var(--mono);color:var(--yellow);white-space:nowrap}
.btable .bk{font-weight:700;color:var(--ink)}
.btable .fit{color:var(--mint);font-family:var(--mono);font-size:12px}
.btable .note{color:var(--gray);font-size:12px}
.btable tr.env td{background:#F1F3F5}
.btable tbody tr.top td{background:#FFFBEB}
.reco-badge{display:inline-block;background:var(--mint);color:#06372a;font-size:10px;font-weight:700;font-family:var(--mono);padding:2px 8px;border-radius:6px;margin-left:6px;vertical-align:middle}
.btable tr:last-child td{border-bottom:none}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px auto 0;max-width:680px}
@media(max-width:600px){.steps{grid-template-columns:1fr}}
.step{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px;text-align:center}
.step .n{font-family:var(--mono);color:var(--yellow);font-size:12px}
.step p{margin:8px 0 0;font-size:13px;color:var(--ink2)}
.cta-main{display:block;width:100%;max-width:520px;margin:24px auto 0;text-align:center;background:var(--ink);color:#fff;font-family:var(--jp);font-weight:700;font-size:16px;text-decoration:none;padding:18px 20px;border-radius:12px;border:none;cursor:pointer}
.cta-main:hover{background:#000}
.cta-foot{font-family:var(--mono);font-size:12px;color:var(--gray);text-align:center;margin-top:10px}
.reassure{margin:18px auto 0;max-width:680px;font-size:13px;color:var(--ink2)}
.reassure div{padding:7px 0;border-bottom:1px solid var(--line)}
.reassure div:last-child{border-bottom:none}

/* 相性 */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px;max-width:620px;margin-left:auto;margin-right:auto}
@media(max-width:600px){.pair{grid-template-columns:1fr}}
.pair .box{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;text-align:center;font-weight:700;color:var(--ink)}
.pair .label{font-family:var(--mono);font-size:11px;letter-spacing:.04em;margin-bottom:10px;font-weight:500}
.pair .good{color:var(--mint)} .pair .bad{color:var(--coral)}
.compat-img{position:relative;width:100%;height:132px;margin:8px 0 8px;display:flex;align-items:flex-end;justify-content:center}
.compat-img img{height:128px;width:auto;object-fit:contain;filter:drop-shadow(0 8px 12px rgba(16,24,40,.22))}
/* ボックス全体を家系の薄いグラデに */
.pair .box.cfam-attack{background:linear-gradient(135deg,#FFE3E9,#FFEFE2);border-color:#F8D6DC}
.pair .box.cfam-solid{background:linear-gradient(135deg,#DCF4EC,#E6F6F0);border-color:#C7E9DC}
.pair .box.cfam-pioneer{background:linear-gradient(135deg,#FFEFD2,#FFE8D6);border-color:#F3DDB4}
.pair .box.cfam-design{background:linear-gradient(135deg,#EAE2FB,#EEEAFC);border-color:#D9CEF6}

/* シェア */
.r-share{text-align:center}
.cta-sub{display:inline-block;background:transparent;color:var(--ink);font-weight:700;font-size:15px;text-decoration:none;padding:14px 28px;border:1px solid var(--ink);border-radius:12px;margin-top:8px;cursor:pointer}
.cta-sub:hover{background:var(--ink);color:#fff}
.retake{display:block;margin-top:16px;color:var(--gray);font-size:13px;text-decoration:none}

/* 最終CTA（猫を大きく主役に・家系色の淡い背景） */
.r-final{text-align:center}
.r-final .mascot{width:200px;height:200px;margin:0 auto 14px;background:none;border:none;border-radius:0;box-shadow:none;display:flex;align-items:flex-end;justify-content:center;overflow:visible}
.r-final .mascot img{width:auto;height:100%;object-fit:contain;filter:drop-shadow(0 14px 20px rgba(0,0,0,.18))}
/* 最終CTA：フルワイド＋上辺を激しい波に＋前セクションへ背景を食い込ませる */
#resultView .c-final{position:relative;z-index:2;padding:150px 0 52px;margin-top:-120px;overflow:hidden;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0,100 H1200 V58 C1040,2 900,94 720,48 C560,5 400,96 240,52 C150,28 70,64 0,42 Z' fill='%23000'/%3E%3C/svg%3E"),linear-gradient(#000,#000);
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0,100 H1200 V58 C1040,2 900,94 720,48 C560,5 400,96 240,52 C150,28 70,64 0,42 Z' fill='%23000'/%3E%3C/svg%3E"),linear-gradient(#000,#000);
  -webkit-mask-size:100% 100px,100% calc(100% - 96px);mask-size:100% 100px,100% calc(100% - 96px);
  -webkit-mask-position:top,bottom;mask-position:top,bottom;
  -webkit-mask-repeat:no-repeat,no-repeat;mask-repeat:no-repeat,no-repeat}
#resultView .c-share{padding-bottom:150px}
#resultView .c-final>.wrap{background:transparent;border:none;box-shadow:none;position:relative;z-index:2}
#resultView .c-final.famend-attack{background:linear-gradient(135deg,#FF7E9D 0%,#FF9A6B 100%)}
#resultView .c-final.famend-solid{background:linear-gradient(135deg,#2FD3A5 0%,#27B0CE 100%)}
#resultView .c-final.famend-pioneer{background:linear-gradient(135deg,#FFC24B 0%,#FF8F4D 100%)}
#resultView .c-final.famend-design{background:linear-gradient(135deg,#9E81FF 0%,#6C8CFF 100%)}
#resultView .c-final h2{color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.18)}
#resultView .c-final .cta-foot{color:rgba(255,255,255,.9)}

/* フッター */
.foot{background:var(--sub);padding:34px 0;text-align:center;border-top:1px solid var(--line)}
.foot .url{font-family:var(--mono);font-size:13px;color:var(--yellow)}
.foot .legal{font-size:12px;color:var(--gray);margin-top:10px;line-height:1.8}

/* スティッキーCTA */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(255,255,255,.97);border-top:1px solid var(--line);padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;transform:translateY(120%);transition:transform .25s;box-shadow:0 -4px 16px rgba(16,24,40,.06)}
.sticky.show{transform:translateY(0)}
.sticky .stx{font-family:var(--mono);font-size:12px;color:var(--gray)}
.sticky .cta{padding:11px 18px;font-size:14px}
@media(max-width:560px){.sticky .stx{display:none}.sticky .cta{flex:1;text-align:center}}

/* ===================== SP / 仕上げ調整 ===================== */
html,body{overflow-x:hidden;max-width:100%}
.sticky{display:none !important}
.spbr{display:none}
@media(max-width:600px){ .spbr{display:inline} }
#resultView .r-hero.famhero .type-name{text-shadow:0 2px 10px rgba(0,0,0,.32)}
#resultView .r-hero .type-sub,#resultView .r-hero .one-line,#resultView .r-hero .eyebrow,#resultView .r-hero .type-tag.chips .chip{text-shadow:0 1px 6px rgba(0,0,0,.30)}
.foot .legal{font-size:10px;line-height:1.6}
.whatis{text-align:left}
.btable .bk a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.btable .bk a:hover{color:var(--yellow)}
@media(max-width:600px){
  .btable{font-size:12.5px}
  .btable th,.btable td{padding:10px 8px}
}
.lp-value{display:block;max-width:560px;margin:18px auto 0;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 6px 20px rgba(16,24,40,.07);overflow:hidden}
.lp-vrow{display:flex;align-items:flex-start;gap:14px;padding:16px 18px;border-top:1px solid var(--line)}
.lp-vrow:first-child{border-top:none}
.lp-ic{flex:0 0 auto;width:46px;height:46px;border-radius:10px;background:var(--sub);display:flex;align-items:center;justify-content:center;overflow:hidden}
.lp-ic img{width:82%;height:82%;object-fit:contain}
.lp-tx h3{font-size:15px;font-weight:700;color:var(--ink);margin:2px 0 4px;font-family:var(--jp);line-height:1.45}
.lp-tx p{font-size:13px;color:var(--ink2);line-height:1.7;margin:0}

/* SP: 結果カードが左右パンパンにならないよう余白（地を見せる） */
@media(max-width:600px){
  #resultView .sec:not(.r-hero):not(.c-final)>.wrap{margin-left:14px;margin-right:14px;padding:24px 16px}
}
/* 固定の業者バーは完全非表示（PC/SP） */
.sticky,#sticky{display:none !important}

/* =========================================================================
 * エンタメ指数セクション（恋愛・結婚 / 破産・FIRE・残高チャート）
 * ========================================================================= */
.ent-badge{display:inline-block;vertical-align:middle;margin-left:8px;font-family:var(--jp);
  font-size:11px;font-weight:800;letter-spacing:.04em;color:#fff;background:var(--yellow);
  padding:3px 10px;border-radius:999px;transform:translateY(-2px)}
.ent-disc{margin-top:18px;font-size:11px;line-height:1.7;color:var(--gray);
  background:var(--sub);border-radius:10px;padding:11px 14px;text-align:left}

/* --- 恋愛傾向カード --- */
.love-trait{margin:6px auto 22px;max-width:620px;background:var(--card);border:1px solid var(--line);
  border-left:5px solid var(--yellow);border-radius:12px;padding:16px 20px;
  font-size:14.5px;line-height:1.85;color:var(--ink);text-align:left;
  box-shadow:0 4px 16px rgba(16,24,40,.06)}
/* --- 相性3カード --- */
.love-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:760px;margin:0 auto}
@media(max-width:640px){.love-cards{grid-template-columns:1fr;gap:14px;max-width:420px}}
.love-card{display:flex;flex-direction:column;align-items:center;text-align:center;text-decoration:none;
  background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 14px 20px;
  color:inherit;transition:transform .15s ease,box-shadow .15s ease;box-shadow:0 4px 14px rgba(16,24,40,.06)}
.love-card:hover{transform:translateY(-5px);box-shadow:0 12px 26px rgba(16,24,40,.14)}
.love-card.good{border-top:4px solid var(--mint)}
.love-card.bad{border-top:4px solid var(--coral)}
.love-card.marry{border-top:4px solid var(--yellow)}
.lc-label{font-size:12px;font-weight:800;font-family:var(--jp);padding:3px 12px;border-radius:999px;margin-bottom:12px}
.love-card.good .lc-label{color:var(--mint);background:var(--h-solid-bg)}
.love-card.bad .lc-label{color:var(--coral);background:var(--h-attack-bg)}
.love-card.marry .lc-label{color:var(--yellow);background:var(--h-pioneer-bg)}
.lc-img{height:110px;display:flex;align-items:flex-end;justify-content:center;margin-bottom:8px}
.lc-img img{height:100%;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 8px 12px rgba(16,24,40,.2))}
.lc-name{font-size:14px;font-weight:800;font-family:var(--jp);color:var(--ink);line-height:1.35;min-height:2.6em;display:flex;align-items:center}
.lc-pct{font-family:var(--mono);font-weight:700;font-size:34px;line-height:1;margin:4px 0 8px;color:var(--ink)}
.love-card.good .lc-pct{color:var(--mint)}
.love-card.bad .lc-pct{color:var(--coral)}
.love-card.marry .lc-pct{color:var(--yellow)}
.lc-pct .pp{font-size:16px;font-weight:700;margin-left:1px}
.lc-c{font-size:12.5px;line-height:1.7;color:var(--ink2)}

/* --- エンタメ指数：破産/FIRE 2カード --- */
.ent-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:620px;margin:0 auto 16px}
@media(max-width:480px){.ent-grid{gap:12px}}
.ent-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 16px;text-align:center;box-shadow:0 4px 14px rgba(16,24,40,.06)}
.ent-card.hasan{border-top:4px solid var(--coral)}
.ent-card.fire{border-top:4px solid var(--yellow)}
.ent-h{font-size:13px;font-weight:700;font-family:var(--jp);color:var(--ink2)}
.ent-num{font-family:var(--mono);font-weight:700;font-size:44px;line-height:1.1;margin:6px 0 8px}
.ent-card.hasan .ent-num{color:var(--coral)}
.ent-card.fire .ent-num{color:var(--yellow)}
.ent-num .pp{font-size:20px;margin-left:1px}
.ent-c{font-size:12.5px;line-height:1.7;color:var(--ink2)}
@media(max-width:480px){.ent-num{font-size:36px}}

/* --- 残高チャートの形（線画・金額なし） --- */
.ent-chart{max-width:620px;margin:0 auto;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 18px 16px;box-shadow:0 4px 14px rgba(16,24,40,.06)}
.ent-chart-name{font-size:15px;font-weight:800;font-family:var(--jp);color:var(--ink);margin-bottom:10px}
.ent-svg{width:100%;height:130px;display:block}
.ent-svg polyline,.ent-svg path{fill:none;stroke:url(#entGrad);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.ent-chart-note{font-size:11px;color:var(--gray);margin-top:8px}

/* 恋愛・結婚：薄いピンクグラデ＋ふわふわハート（CSSのみ・軽量／画像・JSなし） */
.c-love{background:linear-gradient(180deg,#fff6fa 0%,#ffedf4 100%) !important;position:relative;overflow:hidden}
.c-love>.wrap{position:relative;z-index:1}
.c-love .hearts{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.c-love .heart{position:absolute;bottom:-30px;width:calc(var(--sz,15px)*1.5);height:calc(var(--sz,15px)*1.5);opacity:0;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FF9EC0' d='M12 21s-7.4-4.85-7.4-10.35A4.15 4.15 0 0 1 12 7a4.15 4.15 0 0 1 7.4 3.65C19.4 16.15 12 21 12 21z'/%3E%3C/svg%3E");
  animation:heartFloat var(--dur,9s) linear var(--delay,0s) infinite;will-change:transform,opacity}
@keyframes heartFloat{
  0%{transform:translateY(0) scale(.7) rotate(-6deg);opacity:0}
  12%{opacity:.5}
  70%{opacity:.36}
  100%{transform:translateY(-380px) scale(1.05) rotate(10deg);opacity:0}
}
@media(prefers-reduced-motion:reduce){.c-love .heart{animation:none;display:none}}

/* ヒーロー恋愛ワンライナー */
.r-hero .hero-love{margin:12px auto 0;max-width:560px;font-size:13.5px;line-height:1.75;color:rgba(255,255,255,.94);background:rgba(0,0,0,.22);border-radius:12px;padding:9px 16px}
.r-hero .hero-love:empty{display:none}
/* 業者セクション前の「納得の橋」 */
.mcg-bridge{max-width:680px;margin:26px auto 4px;padding:0 20px}
.mcg-bridge p{margin:0;background:var(--sub);border:1px solid var(--line);border-left:4px solid var(--yellow);border-radius:12px;padding:15px 18px;font-size:13.5px;line-height:1.9;color:var(--ink2)}
.mcg-bridge p:empty{display:none}