/* =========================================================================
 * トレードタイプ診断 — 共通スタイル（v3 ライト基調・設計書（改）625 準拠）
 * 基準: tradetype-result-frame（白×ダーク文字×ゴールド/ミント）
 * 全ページ共通: /trade-type/(LP/設問/結果) ・ /trade-type/types/(図鑑) ・ /trade-type/type/
 * ========================================================================= */
body.xs-trade-type-page, .tt-app{
  --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;
}
.tt-app *{box-sizing:border-box;margin:0;padding:0}
body.xs-trade-type-page{scroll-behavior:smooth}
body.xs-trade-type-page{font-family:var(--jp);background:var(--bg);color:var(--ink);line-height:1.7;font-weight:400;-webkit-font-smoothing:antialiased}
.tt-app a{color:var(--yellow)}
.tt-app .mono{font-family:var(--mono);font-weight:500}
.tt-app .yellow{color:var(--yellow)}.tt-app .mint{color:var(--mint)}
.tt-app .wrap{max-width:760px;margin:0 auto;padding:0 20px}

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

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

.tt-app #value{padding-top:14px}
.tt-app #value .wrap{max-width:1040px}
.tt-app .lp-value{display:grid;grid-template-columns:1fr;gap:20px;margin-top:14px}
@media(min-width:768px){.tt-app .lp-value{grid-template-columns:repeat(3,1fr)}}
/* 16Personalities風カード：上部カラーゾーン(イラスト右)＋波の境界＋下に本文 */
.tt-app .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}
.tt-app .lp-vcard:hover{transform:translateY(-5px) !important;box-shadow:0 16px 32px rgba(16,24,40,.13)}
.tt-app .lp-vcard>*{position:relative;z-index:1}
.tt-app .lp-vtop{position:relative;height:116px;overflow:hidden}
.tt-app .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%}
.tt-app .lp-vicon{position:absolute;right:16px;bottom:24px;width:84px;height:84px;margin:0}
.tt-app .lp-vicon img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(16,24,40,.14))}
.tt-app .lp-vbody{padding:14px 22px 24px}
.tt-app .lp-vcard h3{font-size:17px;margin:8px 0 8px;color:var(--ink);font-family:var(--jp);font-weight:700;line-height:1.4}
.tt-app .step-badge{display:inline-block;font-family:var(--jp);font-weight:700;font-size:11px;letter-spacing:.04em;padding:3px 11px;border-radius:999px}
.tt-app .lp-vcard p{font-size:13px;color:var(--ink2);line-height:1.7}
/* 3色（青 / 緑 / 紫） */
/* 上部ゾーンはフラット配色＋カード上辺に色ライン（青/緑/紫） */
.tt-app .lp-value .lp-vcard:nth-child(1) .lp-vtop{background:#EAF2FB}
.tt-app .lp-value .lp-vcard:nth-child(2) .lp-vtop{background:#E7F5EE}
.tt-app .lp-value .lp-vcard:nth-child(3) .lp-vtop{background:#F0EAFB}
.tt-app .lp-value .lp-vcard:nth-child(1){border-top-color:#4A90D9}
.tt-app .lp-value .lp-vcard:nth-child(2){border-top-color:#34B27B}
.tt-app .lp-value .lp-vcard:nth-child(3){border-top-color:#8E6FD6}
.tt-app .lp-value .lp-vcard:nth-child(1) .step-badge{background:#E3EEFA;color:#3D6CA8}
.tt-app .lp-value .lp-vcard:nth-child(2) .step-badge{background:#DFF2E8;color:#2E8B63}
.tt-app .lp-value .lp-vcard:nth-child(3) .step-badge{background:#EBE2F8;color:#6C5CE7}
.tt-app .lp-disc{font-size:12px;color:var(--gray);text-align:center;margin-top:22px}
.tt-app .lp-value .lp-vcard{opacity:0;transform:translateY(22px)}
.tt-app .lp-value.in .lp-vcard{animation:cardUp .6s cubic-bezier(.2,.7,.3,1) forwards}
.tt-app .lp-value.in .lp-vcard:nth-child(2){animation-delay:.13s}
.tt-app .lp-value.in .lp-vcard:nth-child(3){animation-delay:.26s}
@keyframes cardUp{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.tt-app .lp-value .lp-vcard{opacity:1;transform:none}}

/* 設問（このページ内に常設） */
.tt-app .wizard{display:block}
.tt-app .wizard .quiz-head{text-align:center;padding-top:6px}
.tt-app .wizard .quiz-head h2{margin-bottom:4px}
.tt-app .wizard .quiz-head .sec-note{margin-bottom:4px}
.tt-app .progress{position:sticky;top:52px;z-index:30;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);padding:14px 0}
.tt-app .progress-row{display:flex;align-items:center;gap:14px}
.tt-app .progress-txt{font-family:var(--mono);font-weight:500;font-size:13px;color:var(--yellow);min-width:54px}
.tt-app .progress-bar{flex:1;height:10px;background:#EDF0F3;border-radius:999px;overflow:hidden}
.tt-app .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){.tt-app .progress-fill{animation:none}}
.tt-app .q-axis{text-align:center;font-family:var(--mono);font-size:12px;color:var(--mint);letter-spacing:.08em;margin-top:24px}
.tt-app .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){.tt-app .q{font-size:23px}}
.tt-app .choices{display:grid;gap:12px}
.tt-app .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)}
.tt-app .choice:hover{border-color:var(--yellow);background:#FFFCF2}
.tt-app .choice .lbl{color:var(--yellow);font-family:var(--mono);font-weight:500;margin-right:8px}
.tt-app .controls{display:flex;justify-content:space-between;margin-top:22px}
.tt-app .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)}
.tt-app .back:hover{border-color:var(--yellow);color:var(--yellow)}
.tt-app .back:disabled{opacity:.4;cursor:not-allowed}
.tt-app .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}
.tt-app .calc{text-align:center;padding:80px 0}
.tt-app .calc .spin{font-size:46px;animation:sp 1s linear infinite;display:inline-block}
@keyframes sp{to{transform:rotate(360deg)}}
.tt-app .calc p{margin-top:16px;color:var(--ink2)}

/* ===== 5段階リッカート設問（1ページ5問） ===== */
.tt-app .qlist{display:flex;flex-direction:column;gap:14px;margin-top:8px}
.tt-app .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)}
.tt-app .q-text{font-size:15px;font-weight:700;color:var(--ink);line-height:1.55;margin-bottom:14px}
@media(min-width:768px){.tt-app .q-text{font-size:16px}}
.tt-app .q-no{display:inline-block;font-family:var(--mono);font-size:11px;color:var(--yellow);margin-right:8px}
.tt-app .likert{display:flex;flex-direction:column;gap:8px}
.tt-app .lk-ends{display:flex;justify-content:space-between;padding:0 4px;font-size:11px}
.tt-app .lk-ends .agree{color:var(--mint)}
.tt-app .lk-ends .dis{color:var(--coral)}
.tt-app .lk-dots{display:flex;align-items:center;justify-content:center;gap:14px}
.tt-app .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}
.tt-app .dot::before{content:"";position:absolute;inset:-7px}            /* タップ領域拡張 */
.tt-app .dot.v2, .tt-app .dot.v-2{width:44px;height:44px}
.tt-app .dot.v1, .tt-app .dot.v-1{width:36px;height:36px}
.tt-app .dot.v0{width:28px;height:28px}
.tt-app .dot.z-agree{border-color:#9FE0C6}
.tt-app .dot.z-dis{border-color:#F2B0B3}
.tt-app .dot.z-mid{border-color:#CBD5E0}
.tt-app .dot:hover{transform:scale(1.08)}
.tt-app .dot.z-agree.on{background:var(--mint);border-color:var(--mint)}
.tt-app .dot.z-dis.on{background:var(--coral);border-color:var(--coral)}
.tt-app .dot.z-mid.on{background:var(--gray);border-color:var(--gray)}
.tt-app .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}
.tt-app .next:hover{background:#000}
.tt-app .next:disabled{opacity:.4;cursor:not-allowed}

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

/* 結果ビュー：薄グレー地に、各セクションを白い影付きカードで分離（ヒーロー除く） */
.tt-app #resultView{background:#E9EEF4}
.tt-app #resultView .sec{padding:16px 0;position:relative;background:#E9EEF4}
.tt-app #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){.tt-app #resultView .sec:not(.r-hero):not(.c-final)>.wrap{padding:26px 18px}}
.tt-app .rwave::before{display:none}
.tt-app .r-card{box-shadow:0 1px 3px rgba(16,24,40,.06)}

/* hero */
.tt-app .r-hero{text-align:center;position:relative;overflow:hidden}
.tt-app .r-hero>.wrap{position:relative;z-index:2}
.tt-app .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}
.tt-app .r-hero .mascot img{width:auto;height:100%;object-fit:contain;filter:drop-shadow(0 16px 22px rgba(0,0,0,.24))}
.tt-app .r-hero .type-name{font-size:clamp(28px,7vw,50px);font-weight:800;letter-spacing:.01em;color:var(--ink);line-height:1.2}
.tt-app .r-hero .type-sub{font-family:var(--mono);font-size:15px;margin-top:8px;color:var(--gray)}
.tt-app .r-hero.famhero .type-sub{color:rgba(255,255,255,.92)}
.tt-app .r-hero .type-tag.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}
.tt-app .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}
.tt-app .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}
.tt-app .share-mini{margin-top:20px}
.tt-app .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}
.tt-app .share-mini a:hover{border-color:var(--yellow);color:var(--yellow)}
/* 系統別グラデーション・ヘッダー（タイプ別ページ／診断結果 共通） */
.tt-app #resultView .r-hero.fam-attack{background:linear-gradient(135deg,#FF7E9D 0%,#FF9A6B 100%)}
.tt-app #resultView .r-hero.fam-solid{background:linear-gradient(135deg,#2FD3A5 0%,#27B0CE 100%)}
.tt-app #resultView .r-hero.fam-pioneer{background:linear-gradient(135deg,#FFC24B 0%,#FF8F4D 100%)}
.tt-app #resultView .r-hero.fam-design{background:linear-gradient(135deg,#9E81FF 0%,#6C8CFF 100%)}
/* ヒーロー下辺を激しい波に＋次セクションへ背景を食い込ませる */
.tt-app #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}
.tt-app #resultView .r-hero.famhero{padding-top:46px}
.tt-app #resultView .r-hero + .sec{padding-top:96px}
.tt-app .r-hero.famhero .eyebrow{color:rgba(255,255,255,.92)}
.tt-app .r-hero.famhero .type-name{color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.20)}
.tt-app .r-hero.famhero .type-name .accent, .tt-app .r-hero.famhero .type-name .suffix{color:#fff}
.tt-app .r-hero.famhero .type-name .suffix{opacity:.92}
.tt-app .r-hero.famhero .type-tag{color:rgba(255,255,255,.92)}
.tt-app .r-hero.famhero .one-line{color:#fff}
.tt-app .r-hero.famhero .share-mini a{border-color:rgba(255,255,255,.6);color:#fff}
.tt-app .r-hero.famhero .share-mini a:hover{background:rgba(255,255,255,.16);border-color:#fff;color:#fff}
/* ヘッダーのキラキラ（白い星） */
.tt-app .r-hero .r-spark, .tt-app #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){.tt-app .r-hero .r-spark{animation:none;opacity:.5}}

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

/* やりがちなこと（あるある＋根拠の一言） */
.tt-app .aru-list{display:flex;flex-direction:column;gap:10px;max-width:620px;margin:22px auto 0}
.tt-app .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)}
.tt-app .aru-main{font-weight:700;font-size:14px;color:var(--ink);line-height:1.5}
.tt-app .aru-sub{font-size:12.5px;color:var(--ink2);margin-top:5px;line-height:1.55}

/* 図星（縦並びリスト・旧） */
.tt-app .bullseye{display:grid;grid-template-columns:1fr;gap:10px;margin-top:24px;max-width:620px;margin-left:auto;margin-right:auto}
.tt-app .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}
.tt-app .hit.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.tt-app .hit{opacity:1;transform:none;transition:none}}
.tt-app .aru{margin-top:18px;max-width:620px;margin-left:auto;margin-right:auto}
.tt-app .aru .col{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 20px}
.tt-app .aru ul{margin:0;padding-left:18px}
.tt-app .aru li{margin:8px 0;font-size:14px;color:var(--ink2);line-height:1.6}
.tt-app .aru-cap{font-family:var(--mono);font-size:12px;color:var(--gray);margin-top:14px;text-align:center}
.tt-app .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極=ブルー */
.tt-app .axbars{display:flex;flex-direction:column;gap:18px;max-width:600px;margin:22px auto 0}
.tt-app .axbar-top{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;margin-bottom:7px}
.tt-app .axbar-top .axname{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:#A0AAB5}
.tt-app .axbar-top .axl, .tt-app .axbar-top .axr{color:var(--gray)}
.tt-app .axbar.p-pos .axl{color:var(--mint);font-weight:700}
.tt-app .axbar.p-neg .axr{color:#4A90D9;font-weight:700}
.tt-app .axtrack{position:relative;height:8px;background:#EDF0F3;border-radius:999px;margin-top:5px}
.tt-app .axmid{position:absolute;left:50%;top:-3px;width:2px;height:14px;background:#CBD5E0;transform:translateX(-50%);border-radius:1px}
.tt-app .axfill{position:absolute;top:0;height:100%;border-radius:999px;transition:width .5s ease,left .5s ease}
.tt-app .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}
.tt-app .axbar.p-pos .axfill, .tt-app .axbar.p-pos .axdot{background:var(--mint)}
.tt-app .axbar.p-neg .axfill, .tt-app .axbar.p-neg .axdot{background:#4A90D9}
.tt-app .axis-note{font-size:12.5px;color:var(--ink2);margin-top:8px;line-height:1.6}

/* このタイプの特徴（散文）＋受け止め行 */
.tt-app .narrative{max-width:660px;margin:30px auto 0}
.tt-app .narrative-h{font-family:var(--jp);font-weight:700;font-size:17px;color:var(--ink);margin:0 0 14px;text-align:center}
.tt-app .narrative p{font-size:15px;line-height:1.9;color:#2D3748;margin:0}
.tt-app .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}

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

/* 裏の才能：このボックスだけ MC Black（#1A1A1A）×白文字で“特別感”を出す */
.tt-app #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)}
.tt-app #resultView .c-talent h2{color:#fff}
.tt-app #resultView .c-talent .sec-note{color:#CBD5E0}
.tt-app #resultView .c-talent .takeaway{color:#E2E8F0}
.tt-app #resultView .c-talent .t-foot{color:#9AA5B1}

/* 裏才能（該当1つだけ・中央寄せ縦積み・ビジュアル枠・絵文字なし） */
.tt-app .talent{margin-top:20px}
.tt-app .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}
.tt-app .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}
.tt-app .talent-visual img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 20px rgba(0,0,0,.35))}
.tt-app .talent-body h4{font-family:var(--jp);font-weight:700;font-size:19px;margin:4px 0 10px;color:#fff}
.tt-app .talent-body p{font-size:14px;color:#C7CCD4;margin:0 0 12px;line-height:1.7}
.tt-app .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}
.tt-app .t-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;position:relative}
.tt-app .t-card.lit{border-color:var(--mint);box-shadow:0 0 0 1px var(--mint) inset}
.tt-app .t-card.dim{opacity:.5}
.tt-app .t-ico{font-size:22px}
.tt-app .t-card h4{font-family:var(--jp);font-weight:700;font-size:14px;margin:8px 0 8px;color:var(--ink)}
.tt-app .t-card p{margin:0;font-size:13px;color:var(--ink2)}
.tt-app .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}
.tt-app .t-note{color:var(--gray);font-size:12px}
.tt-app .t-foot{text-align:center;font-size:11px;color:var(--gray);margin-top:14px}

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

/* 業者テーブル */
.tt-app .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}
.tt-app .whatis b{color:var(--ink)}
.tt-app .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)}
.tt-app .btable th, .tt-app .btable td{text-align:left;padding:12px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.tt-app .btable th{font-family:var(--mono);font-size:11px;color:#7A5C00;font-weight:700;letter-spacing:.04em;background:#FBE08C}
.tt-app .btable .rank{font-family:var(--mono);color:var(--yellow);white-space:nowrap}
.tt-app .btable .bk{font-weight:700;color:var(--ink)}
.tt-app .btable .fit{color:var(--mint);font-family:var(--mono);font-size:12px}
.tt-app .btable .note{color:var(--gray);font-size:12px}
.tt-app .btable tr.env td{background:#F1F3F5}
.tt-app .btable tbody tr.top td{background:#FFFBEB}
.tt-app .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}
.tt-app .btable tr:last-child td{border-bottom:none}
.tt-app .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px auto 0;max-width:680px}
@media(max-width:600px){.tt-app .steps{grid-template-columns:1fr}}
.tt-app .step{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px;text-align:center}
.tt-app .step .n{font-family:var(--mono);color:var(--yellow);font-size:12px}
.tt-app .step p{margin:8px 0 0;font-size:13px;color:var(--ink2)}
.tt-app .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}
.tt-app .cta-main:hover{background:#000}
.tt-app .cta-foot{font-family:var(--mono);font-size:12px;color:var(--gray);text-align:center;margin-top:10px}
.tt-app .reassure{margin:18px auto 0;max-width:680px;font-size:13px;color:var(--ink2)}
.tt-app .reassure div{padding:7px 0;border-bottom:1px solid var(--line)}
.tt-app .reassure div:last-child{border-bottom:none}

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

/* シェア */
.tt-app .r-share{text-align:center}
.tt-app .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}
.tt-app .cta-sub:hover{background:var(--ink);color:#fff}
.tt-app .retake{display:block;margin-top:16px;color:var(--gray);font-size:13px;text-decoration:none}

/* 最終CTA（猫を大きく主役に・家系色の淡い背景） */
.tt-app .r-final{text-align:center}
.tt-app .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}
.tt-app .r-final .mascot img{width:auto;height:100%;object-fit:contain;filter:drop-shadow(0 14px 20px rgba(0,0,0,.18))}
/* 最終CTA：フルワイド＋上辺を激しい波に＋前セクションへ背景を食い込ませる */
.tt-app #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}
.tt-app #resultView .c-share{padding-bottom:150px}
.tt-app #resultView .c-final>.wrap{background:transparent;border:none;box-shadow:none;position:relative;z-index:2}
.tt-app #resultView .c-final.famend-attack{background:linear-gradient(135deg,#FF7E9D 0%,#FF9A6B 100%)}
.tt-app #resultView .c-final.famend-solid{background:linear-gradient(135deg,#2FD3A5 0%,#27B0CE 100%)}
.tt-app #resultView .c-final.famend-pioneer{background:linear-gradient(135deg,#FFC24B 0%,#FF8F4D 100%)}
.tt-app #resultView .c-final.famend-design{background:linear-gradient(135deg,#9E81FF 0%,#6C8CFF 100%)}
.tt-app #resultView .c-final h2{color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.18)}
.tt-app #resultView .c-final .cta-foot{color:rgba(255,255,255,.9)}

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

/* スティッキーCTA */
.tt-app .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)}
.tt-app .sticky.show{transform:translateY(0)}
.tt-app .sticky .stx{font-family:var(--mono);font-size:12px;color:var(--gray)}
.tt-app .sticky .cta{padding:11px 18px;font-size:14px}
@media(max-width:560px){.tt-app .sticky .stx{display:none}.tt-app .sticky .cta{flex:1;text-align:center}}

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

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

/* =========================================================================
 * エンタメ指数セクション（恋愛・結婚 / 破産・FIRE・残高チャート）
 * ========================================================================= */
.tt-app .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)}
.tt-app .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}

/* --- 恋愛傾向カード --- */
.tt-app .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カード --- */
.tt-app .love-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:760px;margin:0 auto}
@media(max-width:640px){.tt-app .love-cards{grid-template-columns:1fr;gap:14px;max-width:420px}}
.tt-app .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)}
.tt-app .love-card:hover{transform:translateY(-5px);box-shadow:0 12px 26px rgba(16,24,40,.14)}
.tt-app .love-card.good{border-top:4px solid var(--mint)}
.tt-app .love-card.bad{border-top:4px solid var(--coral)}
.tt-app .love-card.marry{border-top:4px solid var(--yellow)}
.tt-app .lc-label{font-size:12px;font-weight:800;font-family:var(--jp);padding:3px 12px;border-radius:999px;margin-bottom:12px}
.tt-app .love-card.good .lc-label{color:var(--mint);background:var(--h-solid-bg)}
.tt-app .love-card.bad .lc-label{color:var(--coral);background:var(--h-attack-bg)}
.tt-app .love-card.marry .lc-label{color:var(--yellow);background:var(--h-pioneer-bg)}
.tt-app .lc-img{height:110px;display:flex;align-items:flex-end;justify-content:center;margin-bottom:8px}
.tt-app .lc-img img{height:100%;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 8px 12px rgba(16,24,40,.2))}
.tt-app .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}
.tt-app .lc-pct{font-family:var(--mono);font-weight:700;font-size:34px;line-height:1;margin:4px 0 8px;color:var(--ink)}
.tt-app .love-card.good .lc-pct{color:var(--mint)}
.tt-app .love-card.bad .lc-pct{color:var(--coral)}
.tt-app .love-card.marry .lc-pct{color:var(--yellow)}
.tt-app .lc-pct .pp{font-size:16px;font-weight:700;margin-left:1px}
.tt-app .lc-c{font-size:12.5px;line-height:1.7;color:var(--ink2)}

/* --- エンタメ指数：破産/FIRE 2カード --- */
.tt-app .ent-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:620px;margin:0 auto 16px}
@media(max-width:480px){.tt-app .ent-grid{gap:12px}}
.tt-app .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)}
.tt-app .ent-card.hasan{border-top:4px solid var(--coral)}
.tt-app .ent-card.fire{border-top:4px solid var(--yellow)}
.tt-app .ent-h{font-size:13px;font-weight:700;font-family:var(--jp);color:var(--ink2)}
.tt-app .ent-num{font-family:var(--mono);font-weight:700;font-size:44px;line-height:1.1;margin:6px 0 8px}
.tt-app .ent-card.hasan .ent-num{color:var(--coral)}
.tt-app .ent-card.fire .ent-num{color:var(--yellow)}
.tt-app .ent-num .pp{font-size:20px;margin-left:1px}
.tt-app .ent-c{font-size:12.5px;line-height:1.7;color:var(--ink2)}
@media(max-width:480px){.tt-app .ent-num{font-size:36px}}

/* --- 残高チャートの形（線画・金額なし） --- */
.tt-app .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)}
.tt-app .ent-chart-name{font-size:15px;font-weight:800;font-family:var(--jp);color:var(--ink);margin-bottom:10px}
.tt-app .ent-svg{width:100%;height:130px;display:block}
.tt-app .ent-svg polyline, .tt-app .ent-svg path{fill:none;stroke:url(#entGrad);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.tt-app .ent-chart-note{font-size:11px;color:var(--gray);margin-top:8px}

/* 恋愛・結婚：薄いピンクグラデ＋ふわふわハート（CSSのみ・軽量／画像・JSなし） */
.tt-app .c-love{background:linear-gradient(180deg,#fff6fa 0%,#ffedf4 100%) !important;position:relative;overflow:hidden}
.tt-app .c-love>.wrap{position:relative;z-index:1}
.tt-app .c-love .hearts{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.tt-app .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){.tt-app .c-love .heart{animation:none;display:none}}

/* ヒーロー恋愛ワンライナー */
.tt-app .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}
.tt-app .r-hero .hero-love:empty{display:none}
/* 業者セクション前の「納得の橋」 */
.tt-app .mcg-bridge{max-width:680px;margin:26px auto 4px;padding:0 20px}
.tt-app .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)}
.tt-app .mcg-bridge p:empty{display:none}

/* ===== 図鑑ページ専用（ライト・16Personalities風パステル） ===== */
.tt-app .hd{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.tt-app .hd .wrap{display:flex;align-items:center;gap:12px;padding:12px 20px;max-width:1080px}
.tt-app .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}
.tt-app .hd .logo svg{width:22px;height:22px}
.tt-app .hd .sp{flex:1}
.tt-app .hd .nav{display:flex;gap:16px}
.tt-app .hd .nav a{font-size:13px;color:var(--ink2);text-decoration:none}
.tt-app .hd .nav a:hover{color:var(--yellow)}
.tt-app .hd .nav .acc{color:var(--yellow);font-weight:700}
.tt-app .hd .navsep{color:#cbd5e0;align-self:center}
@media(max-width:560px){.tt-app .hd .nav{font-size:12px;gap:12px}}
.tt-app .crumb{background:var(--bg);padding:12px 0;font-size:12px;color:var(--gray)}
.tt-app .crumb .dwrap{max-width:1080px}
.tt-app .crumb a{color:var(--gray);text-decoration:none}.tt-app .crumb a:hover{color:var(--yellow)}
.tt-app .crumb .sep{margin:0 7px;color:#cbd5e0}

.tt-app .dwrap{max-width:1080px;margin:0 auto;padding:0 22px}

.tt-app .dex-intro{padding:50px 0 78px;background:var(--bg);text-align:center}
.tt-app .dex-intro h1{font-family:var(--jp);font-size:33px;font-weight:900;line-height:1.2;color:var(--ink);letter-spacing:.03em}
@media(min-width:768px){.tt-app .dex-intro h1{font-size:44px}}
.tt-app .dex-intro .lead{font-size:14px;color:var(--ink2);margin:12px auto 0;max-width:600px;line-height:1.75}
.tt-app .dex-intro .icta{margin-top:26px}

/* 家系セクション（パステル背景＋上辺の波カット）
   ※ 上辺の波は「固定64pxの波マスク」で実装（セクション高さに依存しない）。
      旧 clip-path(objectBoundingBox=高さ比例) はスマホでセクションが高くなると
      波の落ち込みが固定の重なり量を超え、白い隙間が出るため廃止。 */
.tt-app .dex-section{padding:150px 0 120px;position:relative;overflow:hidden;margin-top:-63px;
  -webkit-mask-size:100% 65px,100% calc(100% - 63px);mask-size:100% 65px,100% calc(100% - 63px);
  -webkit-mask-position:top,bottom;mask-position:top,bottom;
  -webkit-mask-repeat:no-repeat,no-repeat;mask-repeat:no-repeat,no-repeat}
.tt-app .dex-section:nth-child(odd){
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 64' preserveAspectRatio='none'%3E%3Cpath d='M0,30 C400,58 800,6 1200,32 L1200,64 L0,64 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 64' preserveAspectRatio='none'%3E%3Cpath d='M0,30 C400,58 800,6 1200,32 L1200,64 L0,64 Z' fill='%23000'/%3E%3C/svg%3E"),linear-gradient(#000,#000)}
.tt-app .dex-section:nth-child(even){
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 64' preserveAspectRatio='none'%3E%3Cpath d='M0,32 C400,6 800,58 1200,30 L1200,64 L0,64 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 64' preserveAspectRatio='none'%3E%3Cpath d='M0,32 C400,6 800,58 1200,30 L1200,64 L0,64 Z' fill='%23000'/%3E%3C/svg%3E"),linear-gradient(#000,#000)}
/* 鮮やかなグラデーション（SHAPES風） */
.tt-app .dex-section.attack{background:linear-gradient(135deg,#FF9DB4 0%,#FFB489 100%)}
.tt-app .dex-section.solid{background:linear-gradient(135deg,#5BDCB8 0%,#57C4DA 100%)}
.tt-app .dex-section.pioneer{background:linear-gradient(135deg,#FFD375 0%,#FFAB72 100%)}
.tt-app .dex-section.design{background:linear-gradient(135deg,#B6A0FF 0%,#94ACFF 100%)}
/* 左右の白い歪な図形（ゆっくり動く） */
/* 装飾シェイプ（家系ごとに形を変える） */
.tt-app .sh{position:absolute;background:rgba(255,255,255,.16);z-index:0;pointer-events:none;will-change:transform}
.tt-app .sh.blobA{border-radius:42% 58% 63% 37%/45% 38% 62% 55%}
.tt-app .sh.blobB{border-radius:60% 40% 35% 65%/55% 60% 40% 45%}
.tt-app .sh.cplxA{border-radius:30% 70% 70% 30%/30% 30% 70% 70%}
.tt-app .sh.cplxB{border-radius:67% 33% 42% 58%/55% 58% 42% 45%}
.tt-app .sh.tri{clip-path:polygon(50% 0,100% 100%,0 100%);background:rgba(255,255,255,.18)}
.tt-app .sh.sq{border-radius:12px}
.tt-app .sh.float{animation:shFloat 18s ease-in-out infinite}
.tt-app .sh.spin{animation:shSpin 22s ease-in-out infinite}
@keyframes shFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-28px) rotate(-10deg)}}
@keyframes shSpin{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(32deg) scale(1.12)}}
/* キラキラ（白） */
.tt-app .spark{position:absolute;z-index:2;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:sparkle ease-in-out infinite}
@keyframes sparkle{0%{opacity:0;transform:scale(.2) rotate(0)}30%{opacity:1}58%{transform:scale(1.15) rotate(90deg)}82%{opacity:.65}100%{opacity:0;transform:scale(.2) rotate(160deg)}}
.tt-app .dex-section .sh, .tt-app .dex-section .spark{animation-play-state:paused}
.tt-app .dex-section.in-view .sh, .tt-app .dex-section.in-view .spark{animation-play-state:running}
@media(prefers-reduced-motion:reduce){.tt-app .sh, .tt-app .spark{animation:none !important}}
.tt-app .fam-wm{position:absolute;top:96px;left:0;right:0;text-align:center;font-family:var(--jp);font-weight:900;font-size:clamp(56px,11.5vw,128px);line-height:1;color:#fff;opacity:.22;z-index:1;pointer-events:none;white-space:nowrap;user-select:none}

.tt-app .tgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:52px;max-width:1140px;margin:0 auto;position:relative;z-index:1;align-items:start}
@media(max-width:900px){.tt-app .tgrid{grid-template-columns:repeat(2,1fr);gap:52px 40px}}
@media(max-width:540px){.tt-app .tgrid{grid-template-columns:1fr;gap:40px}}
/* 枠なし：MBTI(16P)風にパステル背景へ直接キャラを置く */
.tt-app .tcard{text-align:center;display:flex;flex-direction:column;align-items:center;text-decoration:none;color:inherit;cursor:pointer;transition:transform .16s ease}
.tt-app .tcard:hover{transform:translateY(-7px)}
.tt-app .tcard:hover .timg img{filter:drop-shadow(0 18px 22px rgba(16,24,40,.34))}
.tt-app .tcard .timg{height:210px;width:100%;margin:0 auto 12px;display:flex;align-items:flex-end;justify-content:center;position:relative}
.tt-app .tcard .timg img{height:100%;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 14px 18px rgba(16,24,40,.28))}
/* グリッド・ジャグラーだけ少し大きく（足元基準で拡大・並びは維持） */
.tt-app .tt-SECH .timg img{transform:scale(1.14);transform-origin:bottom center}
.tt-app .vbtn{position:absolute;top:46%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.85);color:var(--ink);font-size:20px;line-height:1;cursor:pointer;z-index:3;display:flex;align-items:center;justify-content:center}
.tt-app .vbtn:hover{border-color:var(--hc);color:var(--hc)}
.tt-app .vprev{left:0}.tt-app .vnext{right:0}
.tt-app .vcnt{position:absolute;bottom:0;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:10px;color:var(--gray);background:rgba(255,255,255,.9);padding:2px 9px;border-radius:999px;z-index:3;border:1px solid var(--line)}
.tt-app .tcard .tname{font-size:18px;font-weight:800;color:#fff;line-height:1.35;font-family:var(--jp);text-shadow:0 2px 10px rgba(0,0,0,.40)}
.tt-app .tcard .tcode{font-family:var(--mono);font-size:14px;font-weight:700;color:#fff;letter-spacing:.14em;margin:7px 0 12px;text-shadow:0 1px 7px rgba(0,0,0,.34)}
.tt-app .tcard .tdesc{font-size:13.5px;color:rgba(255,255,255,.95);line-height:1.8;max-width:240px;margin:0 auto;text-shadow:0 1px 6px rgba(0,0,0,.30)}

.tt-app .fam-cta{text-align:center;margin-top:34px;position:relative;z-index:1}
.tt-app .final-t{background:var(--bg);text-align:center;padding:64px 0 60px;position:relative;z-index:2}
.tt-app .final-t .wave-top{position:absolute;top:-69px;left:0;width:100%;height:70px;display:block}


body.xs-trade-type-page{overflow-x:hidden}
.tt-app{min-width:0;overflow-x:hidden}
.tt-app .tt-local-nav{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:16px;max-width:1080px;margin:0 auto;padding:12px 20px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.tt-app .tt-local-logo{font-family:var(--disp);font-weight:900;color:var(--ink);text-decoration:none}
.tt-app .tt-local-spacer{flex:1}
.tt-app .tt-local-nav a{font-size:13px;color:var(--ink2);text-decoration:none}
.tt-app .tt-local-nav a.is-active,.tt-app .tt-local-nav a:hover{color:var(--yellow);font-weight:800}
.tt-app .tt-legal{padding:34px 20px;background:#0f172a;color:#dbe7e2;text-align:center}
.tt-app .tt-legal .legal{max-width:860px;margin:0 auto;font-size:12px;line-height:1.9}
@media(max-width:560px){.tt-app .tt-local-nav{gap:12px;padding-inline:14px}.tt-app .tt-local-logo{font-size:13px}.tt-app .tt-local-nav a{font-size:12px}}