/* フォルトゥナ デザインシステム v2 — 金枠の夜(紺青×真鍮金×星白) */
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@500;600;700&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap');

:root{
  --bg:#0d0e26;--bg2:#181940;--card:rgba(30,31,66,.78);--card-line:#3a3c78;
  --gold:#d4b26a;--gold-hi:#e8c15a;--tx:#eceaf6;--sub:#a8a6c8;--ac:#8e7cf0;
  --serif:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --sans:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--sans);background:var(--bg) url("img/bg.jpg") no-repeat top center/cover fixed;color:var(--tx);min-height:100vh;line-height:1.8}
@media(max-width:640px){body{background-attachment:scroll}}
a{color:var(--gold);text-decoration:none}
.wrap{max-width:640px;margin:0 auto;padding:16px}

/* ---- 戻るボタン(館ページ) ---- */
.backbtn{display:inline-block;margin:14px 0 0;padding:9px 18px;border:1px solid rgba(212,178,106,.6);border-radius:999px;background:rgba(30,31,66,.75);color:var(--gold);font-size:.92rem;letter-spacing:.06em;backdrop-filter:blur(4px)}
.backbtn:hover{border-color:var(--gold);background:rgba(42,43,88,.85)}

/* ---- ヘッダー ---- */
header.site{text-align:center;padding:34px 0 10px}
header.site h1{font-family:var(--serif);font-weight:600;font-size:2.2rem;letter-spacing:.34em;text-indent:.34em;color:var(--tx);text-shadow:0 0 24px rgba(212,178,106,.25)}
header.site .tag{color:var(--sub);font-size:.95rem;margin-top:6px;letter-spacing:.12em}
.stars{color:var(--gold);letter-spacing:.4em;font-size:.85rem;opacity:.9}
h2.sec-title{font-family:var(--serif);font-weight:600;font-size:1.2rem;color:var(--gold);letter-spacing:.14em;margin:30px 0 4px;display:flex;align-items:center;gap:10px}
h2.sec-title:before,h2.sec-title:after{content:"";height:1px;background:linear-gradient(90deg,transparent,rgba(212,178,106,.55),transparent);flex:1}
.sec-lead{font-size:.9rem;color:var(--sub);text-align:center;margin-bottom:6px}

/* ---- ヒーロー(概念とアート) ---- */
.hero-art{border:1px solid rgba(212,178,106,.5);border-radius:16px;overflow:hidden;margin:16px 0 6px;box-shadow:0 10px 40px rgba(0,0,0,.4)}
.hero-art img{display:block;width:100%}
.hero-cap{font-size:.75rem;color:var(--sub);text-align:center;letter-spacing:.2em;margin-bottom:14px}
.concept{background:var(--card);border-radius:14px;padding:22px;margin:12px 0;backdrop-filter:blur(3px)}
.concept p{font-family:var(--serif);font-size:.98rem;line-height:2.1;margin:10px 0}
.concept p:first-child{margin-top:0}

/* ---- カード ---- */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:16px 0}
.card{background:var(--card);border:1px solid var(--card-line);border-radius:14px;padding:16px;display:block;transition:.15s;backdrop-filter:blur(3px)}
.card:hover{transform:translateY(-2px);border-color:var(--gold)}
.card .em{font-size:1.5rem;display:inline-block;width:44px;height:44px;line-height:44px;text-align:center;background:radial-gradient(circle at 50% 35%,#26275c,#161738);border:1px solid rgba(212,178,106,.5);border-radius:50%}
.card h3{font-family:var(--serif);font-size:1.06rem;margin:8px 0 2px;color:var(--tx);font-weight:600}
.card p{font-size:.86rem;color:var(--sub);line-height:1.6}
.badge{display:inline-block;background:var(--ac);color:#fff;font-size:.7rem;border-radius:8px;padding:1px 8px;margin-left:4px;vertical-align:middle;font-family:var(--sans)}
.badge.free{background:#2e7d5b}

/* 館カード(鑑定師の顔つき) */
.card.svc{display:flex;gap:14px;align-items:center;padding:14px 15px}
.card.svc img{width:72px;height:72px;flex:none;border-radius:50%;object-fit:cover;object-position:top;border:2px solid var(--gold);box-shadow:0 2px 12px rgba(0,0,0,.4)}
.card.svc .m-name{font-size:.82rem;color:var(--gold);margin-top:2px}
.card.svc h3{margin:0}
@media(max-width:400px){.card.svc{flex-direction:row}.card.svc img{width:60px;height:60px}}

/* ---- ボタン ---- */
.btn{display:block;width:100%;text-align:center;background:linear-gradient(135deg,#e8c15a,#cfa04e);color:#241c08;font-weight:700;border:none;border-radius:12px;padding:15px;font-size:1.05rem;cursor:pointer;margin:8px 0;font-family:var(--sans);box-shadow:0 4px 18px rgba(212,178,106,.25);letter-spacing:.04em}
.btn:hover{filter:brightness(1.06)}
.btn.sec{background:transparent;color:var(--tx);border:1px solid #4a4c8a;box-shadow:none;font-weight:500}
.btn.line{background:#06c755;color:#fff;box-shadow:0 4px 18px rgba(6,199,85,.22)}

/* ---- 鑑定師 ---- */
.master-head{display:flex;gap:16px;align-items:center;background:var(--card);border:1px solid var(--card-line);border-radius:16px;padding:18px;margin:14px 0}
.master-head img{width:104px;height:104px;flex:none;border-radius:50%;object-fit:cover;object-position:top;border:2px solid var(--gold);box-shadow:0 3px 16px rgba(0,0,0,.45)}
.master-head .m-catch{font-size:.8rem;color:var(--gold);letter-spacing:.08em}
.master-head .m-name{font-family:var(--serif);font-size:1.3rem;font-weight:600;margin:2px 0}
.master-head .m-role{font-size:.85rem;color:var(--sub)}
.m-quote{background:var(--card);border-left:3px solid var(--gold);border-radius:0 12px 12px 0;padding:14px 18px;margin:10px 0;font-size:.98rem;color:var(--tx);font-family:var(--serif);line-height:2}
.m-quote .who{display:block;text-align:right;color:var(--sub);font-size:.8rem;margin-top:6px;font-family:var(--sans)}
.master-mini{display:flex;gap:12px;align-items:center;margin:12px 0 4px}
.master-mini img{width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:top;border:2px solid var(--gold)}
.master-mini .who{font-size:.88rem;color:var(--sub);line-height:1.7}
.master-mini .who b{color:var(--gold);font-family:var(--serif)}
/* 来歴(鑑定師の物語) */
details.story{background:var(--card);border:1px solid var(--card-line);border-radius:12px;margin:10px 0;padding:0}
details.story summary{cursor:pointer;padding:13px 16px;font-family:var(--serif);font-size:.95rem;color:var(--gold);letter-spacing:.06em;list-style:none}
details.story summary::-webkit-details-marker{display:none}
details.story summary:after{content:" ▾";color:var(--sub)}
details.story[open] summary:after{content:" ▴"}
details.story .body{padding:2px 18px 16px;font-size:.92rem;color:var(--tx);line-height:2}

/* ---- 診断UI ---- */
.qbox{background:var(--card);border-radius:14px;padding:20px;margin:16px 0;backdrop-filter:blur(3px)}
.qbox .qno{color:var(--gold);font-size:.85rem;margin-bottom:6px;letter-spacing:.1em}
.qbox h2{font-family:var(--serif);font-size:1.15rem;margin-bottom:14px;font-weight:600}
.opt{display:block;width:100%;text-align:left;background:var(--bg2);color:var(--tx);border:1px solid #4a4c8a;border-radius:10px;padding:13px 15px;margin:8px 0;font-size:1rem;cursor:pointer;font-family:var(--sans)}
.opt:hover{border-color:var(--gold)}
.bar{height:6px;background:#35376e;border-radius:3px;margin:10px 0}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-hi));border-radius:3px;transition:.3s}
input[type=text],input[type=date],select{width:100%;padding:12px;border-radius:10px;border:1px solid #4a4c8a;background:var(--bg2);color:var(--tx);font-size:1rem;margin:6px 0 12px;font-family:var(--sans)}
label{font-size:.85rem;color:var(--sub)}
.result{background:var(--card);border:1px solid var(--gold);border-radius:16px;padding:24px;margin:16px 0;text-align:center;position:relative;backdrop-filter:blur(3px)}
.result:before{content:"✦";position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--bg);color:var(--gold);padding:0 10px;font-size:.85rem}
.result .type{font-family:var(--serif);font-size:1.6rem;color:var(--gold);font-weight:600;margin:6px 0}
.result .em{font-size:2.6rem}
.result p{text-align:left;margin:10px 0;font-size:1rem}
.score{display:flex;justify-content:space-between;background:var(--bg2);border-radius:10px;padding:11px 15px;margin:6px 0;font-size:.95rem}
.score b{color:var(--gold)}

/* ---- 有料訴求 ---- */
.premium{background:linear-gradient(150deg,rgba(58,42,110,.85),rgba(28,29,69,.9));border:1px solid var(--ac);border-radius:16px;padding:20px;margin:18px 0;text-align:center;backdrop-filter:blur(3px)}
.premium h3{font-family:var(--serif);color:var(--gold);font-size:1.15rem;margin-bottom:8px;font-weight:600;letter-spacing:.06em}
.premium ul{text-align:left;font-size:.92rem;color:var(--sub);margin:10px 0 14px;list-style:none}
.premium li{margin:5px 0}
.premium li:before{content:"✦ ";color:var(--gold)}
.freeline{display:flex;align-items:center;gap:10px;color:var(--sub);font-size:.8rem;letter-spacing:.18em;margin:24px 0 4px}
.freeline:before,.freeline:after{content:"";height:1px;background:linear-gradient(90deg,transparent,#4a4c8a,transparent);flex:1}
.toc{background:var(--bg2);border:1px solid var(--card-line);border-radius:12px;margin:10px 0 14px;text-align:left}
.toc .toc-h{font-size:.82rem;color:var(--gold);padding:11px 15px 4px;letter-spacing:.08em}
.toc ol{list-style:none;padding:2px 15px 11px}
.toc li{font-size:.9rem;color:var(--tx);padding:8px 0;border-top:1px dashed #3a3c78;display:flex;justify-content:space-between;gap:8px}
.toc li:first-child{border-top:none}
.toc li .lock{color:var(--sub);font-size:.76rem;flex:none}
.toc li.open .lock{color:#7fc79a}
/* 本鑑定の書き出し(読み味見・下ほどかすむ) */
.peek{position:relative;background:var(--bg2);border:1px solid var(--card-line);border-radius:12px;margin:10px 0 4px;padding:15px 18px 34px;text-align:left}
.peek .peek-h{font-size:.8rem;color:var(--gold);letter-spacing:.1em;margin-bottom:6px}
.peek .peek-t{font-family:var(--serif);font-size:.95rem;line-height:2.05;color:var(--tx);
  -webkit-mask-image:linear-gradient(180deg,#000 30%,transparent 96%);mask-image:linear-gradient(180deg,#000 30%,transparent 96%)}
.peek .peek-more{position:absolute;left:0;right:0;bottom:10px;text-align:center;font-size:.82rem;color:var(--gold);letter-spacing:.14em}

/* ---- 比較表 ---- */
.cmp{width:100%;border-collapse:collapse;font-size:.88rem;margin:12px 0;background:var(--card);border-radius:12px;overflow:hidden}
.cmp th,.cmp td{padding:11px 8px;text-align:center;border-bottom:1px solid #33356a}
.cmp th{font-family:var(--serif);color:var(--gold);font-weight:600;font-size:.9rem;background:rgba(212,178,106,.07)}
.cmp td:first-child{text-align:left;color:var(--sub)}
.cmp .ok{color:#7fc79a}
.cmp .no{color:#5c5e94}
.cmp .best{background:rgba(142,124,240,.12)}

/* ---- 下部固定CTA(館ページ) ---- */
.ctabar{position:fixed;left:0;right:0;bottom:0;z-index:50;background:rgba(18,19,46,.92);backdrop-filter:blur(8px);border-top:1px solid rgba(212,178,106,.45);padding:10px 14px calc(10px + env(safe-area-inset-bottom))}
.ctabar .inner{max-width:640px;margin:0 auto;display:flex;gap:10px;align-items:center}
.ctabar img{width:42px;height:42px;border-radius:50%;object-fit:cover;object-position:top;border:2px solid var(--gold);flex:none}
.ctabar .t{flex:1;font-size:.8rem;color:var(--sub);line-height:1.45}
.ctabar .t b{color:var(--tx);font-family:var(--serif);font-size:.9rem}
.ctabar button{flex:none;background:linear-gradient(135deg,#e8c15a,#cfa04e);color:#241c08;font-weight:700;border:none;border-radius:10px;padding:11px 16px;font-size:.92rem;cursor:pointer;font-family:var(--sans)}
body.has-ctabar{padding-bottom:84px}

.small{font-size:.82rem;color:var(--sub);text-align:center;margin:14px 0}
footer{text-align:center;color:var(--sub);font-size:.8rem;padding:24px 0;border-top:1px solid #35376e;margin-top:30px}
footer a{color:var(--sub);margin:0 8px}
.hide{display:none}
@media(max-width:420px){.grid{gap:10px}.card{padding:12px}}