/* ============================================================
   お財布で金運診断 — シンプル&洗練（深緑×金）
   ============================================================ */
:root{
  --bg:#FBF1DC; --bg2:#FFFCF3; --card:#FFFDF6; --ink:#6B4E1E; --mut:#B59A63;
  --gold:#E0A52C; --gold2:#F7CE5B; --green:#D98A3D; --green2:#E8A23A; --line:#F0E2C4;
  --pink:#E89CA8; --accent:#D98A3D;
  --serif:"Mochiy Pop One",sans-serif;
  --sans:"Zen Maru Gothic",sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{background:linear-gradient(170deg,#FCF4E2 0%,#FBEFD8 60%,#F8E9CC 100%);color:#6B4E1E;
  font-family:var(--sans);line-height:1.85;font-size:15px;min-height:100svh;overflow-x:hidden}
::selection{background:var(--gold);color:#fff}
a{color:var(--green2)}
b{font-weight:700;color:var(--green)}
.wrap{max-width:600px;margin:0 auto;padding:max(16px,env(safe-area-inset-top)) 18px 56px;position:relative;z-index:1}

/* 和柄うっすら背景 */
.bgdeco{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(circle at 18% 22%,rgba(255,255,255,.8) 0 4px,transparent 5px),
    radial-gradient(circle at 84% 40%,rgba(224,165,44,.16) 0 6px,transparent 7px),
    radial-gradient(circle at 62% 84%,rgba(232,156,168,.16) 0 6px,transparent 7px),
    radial-gradient(circle at 36% 64%,rgba(255,255,255,.6) 0 3px,transparent 4px);
  background-size:180px 180px,240px 240px,160px 160px,120px 120px}
.bgdeco::before{content:"";position:absolute;top:0;left:0;right:0;height:60px;opacity:.5;
  background-image:repeating-linear-gradient(90deg,rgba(224,165,44,.18) 0 14px,transparent 14px 28px),repeating-linear-gradient(0deg,rgba(224,165,44,.18) 0 14px,transparent 14px 28px);
  background-size:28px 28px}

.toplinks{display:flex;gap:5px;justify-content:flex-end;flex-wrap:wrap;margin-bottom:22px}
.toplinks a{font-size:11px;color:#8A5A12;text-decoration:none;padding:6px 13px;font-weight:700;
  border:2px solid rgba(242,168,30,.55);border-radius:999px;background:rgba(255,254,246,.85);transition:all .3s var(--ease)}
.toplinks a:hover{color:#C96A0F;border-color:var(--gold);transform:translateY(-1px)}

/* ===== 共通カード ===== */
.panel{background:var(--card);border-radius:30px;padding:30px 22px;
  border:3px solid #fff;
  box-shadow:0 16px 40px rgba(200,150,40,.2),0 0 0 4px rgba(224,165,44,.28);position:relative;overflow:hidden}
.panel::before{content:"";position:absolute;top:-2px;left:0;right:0;height:14px;
  background:radial-gradient(circle at 9px 0,transparent 8px,var(--gold2) 9px) 0 0/18px 14px repeat-x}

.screen{display:none}
.screen.active{display:block;animation:scrIn .45s var(--ease) both}
@keyframes scrIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ===== INTRO ===== */
.hero{margin:-30px -22px 0}
.hero-main{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:center;border-radius:27px 27px 16px 16px}
@media(max-width:430px){
  .hero{margin:-30px -22px 0}
  .hero-main{border-radius:27px 27px 14px 14px}
}
/* リボンバナー（WALLET FORTUNE） */
.ribbon-banner{display:inline-block;position:relative;margin:4px 0 0;white-space:nowrap;
  background:linear-gradient(180deg,var(--gold2),var(--gold));color:#fff;
  font-weight:800;font-size:12px;letter-spacing:.18em;padding:7px 20px;border-radius:6px;
  box-shadow:0 4px 10px rgba(200,150,40,.3),inset 0 1px 0 rgba(255,255,255,.4);
  font-family:var(--sans);text-shadow:0 1px 1px rgba(150,100,10,.4)}
.ribbon-banner::before,.ribbon-banner::after{content:"";position:absolute;top:50%;transform:translateY(-50%);
  border:9px solid var(--gold);width:0;height:0}
.ribbon-banner::before{left:-12px;border-right-width:8px;border-left-color:transparent;border-radius:2px}
.ribbon-banner::after{right:-12px;border-left-width:8px;border-right-color:transparent;border-radius:2px}
.eyebrow{font-size:11px;letter-spacing:.28em;color:var(--green);font-weight:700;margin-bottom:12px}
h1{font-family:var(--serif);font-weight:800;font-size:clamp(30px,8.4vw,42px);line-height:1.32;letter-spacing:.03em;color:#7A5410;
  text-shadow:2px 2px 0 #fff,3px 3px 0 rgba(224,165,44,.35)}
h1 .sub{display:block;font-size:clamp(12px,3.4vw,14px);color:#C2607A;font-weight:700;letter-spacing:.03em;margin-top:12px;text-shadow:none;
  border-top:2px dashed rgba(232,156,168,.6);padding-top:10px}
.intro-lead{font-size:14px;color:#6B4E1E;margin:22px auto 0;max-width:460px;text-align:left;
  background:linear-gradient(180deg,#FFFBEF,#FFF7E4);border:2px dashed rgba(224,165,44,.5);border-radius:18px;padding:20px 18px;line-height:2}
.intro-lead b{color:#C77F12;background:linear-gradient(transparent 58%,#FFE6A0 58%)}
.badges{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin:22px 0 6px}
.badges span{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:#7A5410;
  background:#fff;padding:9px 16px;border-radius:999px;border:2px solid var(--line);box-shadow:0 4px 10px rgba(200,150,40,.15)}
.badges span:nth-child(2){}
.badges span b{color:var(--pink)}
@media(max-width:430px){
  .badges{gap:5px;flex-wrap:nowrap}
  .badges span{gap:3px;padding:8px 7px;font-size:10px;white-space:nowrap}
}

.btn{display:block;width:100%;border:0;cursor:pointer;text-decoration:none;text-align:center;
  font-family:var(--serif);font-weight:800;transition:all .25s var(--ease);border-radius:14px}
.btn-main{margin-top:24px;margin-bottom:6px;padding:22px;font-size:22px;letter-spacing:.06em;color:#fff;border-radius:22px;
  font-family:var(--serif);
  background:linear-gradient(180deg,#FBD571,#F0B22E 55%,#E0A52C);
  border:2px solid #fff;
  box-shadow:0 7px 0 #C2870F,0 14px 26px rgba(216,138,12,.4),inset 0 2px 4px rgba(255,255,255,.6);
  text-shadow:0 2px 2px rgba(160,105,10,.45)}
.btn-main:hover{transform:translateY(-2px) rotate(-.5deg);box-shadow:0 9px 0 #C2870F,0 18px 30px rgba(216,138,12,.5),inset 0 2px 4px rgba(255,255,255,.6)}
.btn-main:active{transform:translateY(5px);box-shadow:0 2px 0 #C2870F,inset 0 2px 4px rgba(255,255,255,.6)}
.btn-gold{padding:18px;font-size:17px;letter-spacing:.08em;color:#7A4E12;border-radius:18px;
  background:linear-gradient(180deg,var(--gold2),var(--gold));box-shadow:0 6px 0 #C98322,0 12px 22px rgba(242,160,61,.3)}
.btn-gold:hover{transform:translateY(-2px) rotate(.5deg)}
.btn-gold:active{transform:translateY(4px);box-shadow:0 2px 0 #C98322}
.btn-ghost{padding:14px;font-size:14px;letter-spacing:.06em;color:var(--green);background:#fff;border:2px solid var(--line);border-radius:18px}
.btn-ghost:hover{border-color:var(--green2);color:var(--green2)}
.share-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.btn-share{display:flex;align-items:center;justify-content:center;gap:9px;padding:15px 10px;
  font-family:var(--sans);font-weight:800;font-size:14.5px;letter-spacing:.02em;color:#fff;border-radius:18px;
  position:relative;overflow:hidden;border:0;cursor:pointer;text-decoration:none;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.btn-share svg{width:19px;height:19px;flex:none}
.btn-share::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg)}
.btn-share:hover{transform:translateY(-3px) scale(1.015)}
.btn-share:hover::after{animation:sheen .8s var(--ease)}
.btn-share:active{transform:translateY(0) scale(.985)}
@keyframes sheen{to{left:130%}}
.btn-x{background:#000;box-shadow:0 6px 18px rgba(0,0,0,.3)}
.btn-x:hover{box-shadow:0 10px 24px rgba(0,0,0,.4)}
.btn-th{background:linear-gradient(135deg,#3A3A3A,#000);box-shadow:0 6px 18px rgba(0,0,0,.3)}
.btn-th:hover{box-shadow:0 10px 24px rgba(0,0,0,.4)}
.note{font-size:10.5px;color:var(--mut);text-align:center;margin-top:14px;letter-spacing:.04em}

/* ===== QUIZ ===== */
.q-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.q-count{font-family:var(--serif);font-weight:800;font-size:15px;color:var(--green)}
.q-count em{font-style:normal;font-size:24px;color:var(--gold)}
.q-skip{font-size:11px;color:var(--mut)}
.prog{height:8px;background:var(--line);border-radius:999px;overflow:hidden;margin-bottom:26px}
.prog i{display:block;height:100%;width:25%;border-radius:999px;
  background:linear-gradient(90deg,var(--gold),var(--gold2));transition:width .5s var(--ease)}
.q-text{font-family:var(--serif);font-weight:800;font-size:clamp(18px,5vw,22px);line-height:1.65;
  color:var(--ink);margin-bottom:22px;min-height:2.4em}
.q-text .qn{color:var(--gold);margin-right:8px}
.opts{display:grid;gap:11px}
.opt{display:flex;align-items:center;gap:13px;text-align:left;cursor:pointer;
  background:#FAFBFA;border:2px solid var(--line);border-radius:14px;padding:16px 16px;
  font-family:var(--sans);font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.5;
  transition:all .2s var(--ease)}
.opt .mk{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:2px solid var(--line);font-family:var(--serif);font-weight:800;font-size:14px;color:var(--mut);transition:all .2s}
.opt:hover{border-color:var(--gold);background:#fff;transform:translateX(3px)}
.opt:hover .mk{border-color:var(--gold);color:var(--gold)}
.opt:active{transform:scale(.99)}

/* ===== LOADING ===== */
.loading{text-align:center;padding:40px 10px}
.lcoin{width:72px;height:72px;margin:0 auto 22px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#F4DE8E,var(--gold) 70%);
  box-shadow:0 8px 18px rgba(201,162,39,.4);animation:flip 1.1s linear infinite}
@keyframes flip{0%{transform:rotateY(0)}100%{transform:rotateY(360deg)}}
.lmsg{font-family:var(--serif);font-weight:700;font-size:15px;letter-spacing:.14em;color:var(--green)}

/* ===== RESULT ===== */
.r-eyebrow{text-align:center;font-size:11px;letter-spacing:.24em;color:var(--green);font-weight:700;margin-bottom:6px}
.r-rank{text-align:center;font-family:var(--serif);font-weight:800;font-size:13px;color:var(--mut);margin-bottom:14px}
.r-emoji{font-size:60px;text-align:center;line-height:1;margin:6px 0 10px}
.r-name{font-family:var(--serif);font-weight:800;font-size:clamp(21px,5.6vw,26px);line-height:1.5;text-align:center;color:var(--ink)}
.r-luck{display:flex;align-items:center;justify-content:center;gap:10px;margin:18px 0}
.r-luck .lstars{font-size:22px;color:var(--gold);letter-spacing:.12em}
.r-luck .llabel{font-family:var(--serif);font-weight:800;font-size:14px;color:var(--green)}
.r-desc{font-size:14px;color:#4D3A0C;background:#FFF8DC;border-radius:16px;padding:18px 18px;margin-bottom:16px;line-height:1.95}
.r-block{border:2px solid var(--line);border-radius:16px;padding:16px 16px;margin-bottom:14px}
.r-block h3{font-family:var(--serif);font-weight:800;font-size:14px;color:var(--green);display:flex;align-items:center;gap:8px;margin-bottom:8px}
.r-block.up{border-color:rgba(242,168,30,.6);background:linear-gradient(180deg,#FFF6CE,#fff)}
.r-block.up h3{color:#9A6608}
.r-block ul{list-style:none;display:grid;gap:7px}
.r-block li{font-size:13.5px;color:#4D3A0C;padding-left:22px;position:relative;line-height:1.7}
.r-block li::before{content:"✔";position:absolute;left:0;color:#D98A0C;font-size:12px;top:3px}
.r-block.up li::before{content:"💰"}
.share-box{background:#FFF8DC;border-radius:16px;padding:14px 16px;margin:18px 0 8px}
.share-box .slab{font-size:10px;color:var(--mut);letter-spacing:.18em;margin-bottom:6px}
.share-box p{font-size:12.5px;color:#3F4843;white-space:pre-wrap;word-break:break-word}
.actions{display:grid;gap:10px;margin-top:14px}
.copied{text-align:center;font-size:12px;color:var(--green2);font-weight:700;height:1em;margin-top:2px;opacity:0;transition:opacity .3s}
.copied.on{opacity:1}
.r-disclaimer{font-size:10.5px;color:var(--mut);text-align:center;margin-top:12px}

/* ===== 10タイプ一覧（SEO/クロール用） ===== */
.types{margin-top:42px}
.types h2,.seo h2.s{font-family:var(--serif);font-weight:800;font-size:18px;color:#8F5E07;
  display:flex;align-items:center;gap:10px;margin-bottom:4px}
.types h2::before,.seo h2.s::before{content:"🪙";width:auto;height:auto;background:none;transform:none;font-size:17px}
.types .sub{font-size:10px;color:#BFA040;letter-spacing:.24em;margin:0 0 16px 26px}
.type-grid{display:grid;gap:10px}
.tc{display:flex;gap:13px;align-items:flex-start;background:var(--card);border-radius:16px;padding:14px 15px;box-shadow:0 4px 12px rgba(232,112,79,.1)}
.tc .te{font-size:28px;flex:none;line-height:1.2}
.tc .tt{font-family:var(--serif);font-weight:800;font-size:14.5px;color:var(--ink);line-height:1.45}
.tc .td{font-size:12px;color:#9A7A2E;margin-top:3px;line-height:1.6}

/* ===== SEO ===== */
.seo{margin-top:44px;background:var(--card);border-radius:22px;padding:28px 22px;box-shadow:0 10px 28px rgba(232,112,79,.12)}
.seo h2{font-family:var(--serif);font-size:17px;font-weight:800;color:#8F5E07;margin-bottom:12px}
.seo h3{font-family:var(--serif);font-size:14px;font-weight:800;color:#9A6608;margin:22px 0 9px}
.seo p{font-size:13.5px;color:#4D3A0C;margin-bottom:11px}
.faq dt{font-weight:700;font-size:13.5px;color:var(--green);margin-top:14px;padding-left:20px;position:relative}
.faq dt::before{content:"Q";font-family:var(--serif);color:#fff;background:var(--gold);position:absolute;left:0;top:4px;
  width:16px;height:16px;font-size:10px;display:grid;place-items:center;border-radius:50%}
.faq dd{font-size:13px;color:#4A544E;padding-left:20px;margin-top:3px}

footer{margin-top:40px;text-align:center}
footer nav{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:12px}
footer a{font-size:12px;color:#6E4709;text-decoration:none;font-weight:700}
footer a:hover{color:#C96A0F}
footer small{font-size:10px;color:#7A5E15;letter-spacing:.14em}

/* ===== 今っぽい動き ===== */
/* 画面切替：ふわっと上げ */
.screen.active>.panel{animation:panelUp .55s var(--ease) both}
@keyframes panelUp{from{opacity:0;transform:translateY(26px) scale(.985)}to{opacity:1;transform:none}}
/* 選択肢スタガー */
@keyframes optIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.opt{opacity:0;animation:optIn .42s var(--ease) forwards}
.opt:nth-child(1){animation-delay:.05s}
.opt:nth-child(2){animation-delay:.12s}
.opt:nth-child(3){animation-delay:.19s}
.opt:nth-child(4){animation-delay:.26s}
/* 選択肢の押下リップル */
.opt{position:relative;overflow:hidden}
.opt .ripple{position:absolute;border-radius:50%;background:rgba(242,160,61,.35);
  transform:translate(-50%,-50%) scale(0);animation:ripple .55s var(--ease) forwards;pointer-events:none}
@keyframes ripple{to{transform:translate(-50%,-50%) scale(3.4);opacity:0}}
.opt.chosen{border-color:var(--gold);background:#FFF4E6}
.opt.chosen .mk{background:var(--gold);border-color:var(--gold);color:#fff;transform:scale(1.08)}
/* スタートボタンの呼吸グロー */
.btn-main{position:relative}
.btn-main::after{content:"";position:absolute;inset:0;border-radius:18px;
  box-shadow:0 0 0 0 rgba(232,112,79,.5);animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(224,165,44,.5)}70%{box-shadow:0 0 0 16px rgba(224,165,44,0)}100%{box-shadow:0 0 0 0 rgba(224,165,44,0)}}
.btn-main .knob{position:absolute;bottom:-13px;left:50%;transform:translateX(-50%);width:26px;height:26px;border-radius:50%;
  background:linear-gradient(180deg,#FBD571,#E0A52C);border:2px solid #fff;display:grid;place-items:center;font-size:12px;color:#fff;box-shadow:0 3px 6px rgba(200,150,40,.4)}
/* 結果要素の連続フェード */
.r-emoji{animation:pop .6s var(--ease) both}
@keyframes pop{0%{opacity:0;transform:scale(.4) rotate(-12deg)}60%{transform:scale(1.18) rotate(6deg)}100%{opacity:1;transform:none}}
.r-name{animation:fadeUp .5s var(--ease) .12s both}
.r-luck{animation:fadeUp .5s var(--ease) .22s both}
.r-desc{animation:fadeUp .5s var(--ease) .32s both}
.r-block{animation:fadeUp .5s var(--ease) both}
.r-block:nth-of-type(1),.r-block.up:nth-of-type(1){animation-delay:.4s}
.actions{animation:fadeUp .5s var(--ease) .55s both}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
/* 金運の星がキラッと順に灯る */
.lstars{position:relative}
.lstars b{font-style:normal}
/* プログレスバーに光沢 */
.prog i{position:relative;overflow:hidden}
.prog i::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);
  transform:translateX(-100%);animation:progSheen 1.8s var(--ease) infinite}
@keyframes progSheen{to{transform:translateX(220%)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.tcs-static{position:relative;z-index:2;max-width:680px;margin:26px auto;padding:0 16px}
  .tcs-card{background:rgba(255,255,255,.94);border:1px solid #c99a2e44;border-radius:18px;padding:20px 18px;margin:18px 0;box-shadow:0 8px 22px rgba(60,40,110,.10)}
  .tcs-card h2{margin:0 0 10px;color:#2b2735;font-size:1.25rem}
  .tcs-card h3{color:#c99a2e;border-bottom:1px solid #c99a2e44;padding-bottom:6px;margin:24px 0 8px;font-size:1.05rem}
  .tcs-card p,.tcs-card li,.tcs-card dd{line-height:1.92;font-size:.94rem;color:#2b2735;margin:6px 0}
  .tcs-axes{display:grid;gap:12px;margin:14px 0}
  .tcs-axes dt{font-weight:800;color:#c99a2e;margin-bottom:2px}
  .tcs-axes dd{margin:0;color:#6f687e}
  .tcs-item{border:1px solid #c99a2e44;border-radius:14px;padding:14px 16px;margin:12px 0;background:rgba(255,255,255,.75)}
  .tcs-item h4{margin:0 0 4px;font-size:1.03rem;color:#2b2735;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
  .tcs-sub{font-size:.72rem;font-weight:700;color:#6f687e;letter-spacing:.05em}
  .tcs-catch{font-weight:700;color:#c99a2e;margin:2px 0 8px}
  .tcs-label{font-weight:700;margin:8px 0 2px;color:#2b2735}
  .tcs-item ul{margin:0;padding-left:1.2em;color:#6f687e}
  .tcs-tags{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0;padding:0;list-style:none}
  .tcs-tags li,.tcs-tag{font-size:.74rem;font-weight:700;color:#c99a2e;border:1px solid currentColor;border-radius:999px;padding:2px 10px}
  .tcs-note{color:#6f687e;font-size:.86rem;border-top:1px dashed #c99a2e44;padding-top:8px;margin-top:10px}
  .tcs-column p{line-height:2}

.diagnosis-back{display:block;margin:18px auto 0;border:0;background:transparent;color:var(--ink);font-weight:700;text-decoration:underline;cursor:pointer}