*{margin:0;padding:0;box-sizing:border-box;}
html,body{overflow-x:hidden;}
body{background:#fff;min-height:100vh;color:#343c4b;font-family:'Inter','Hiragino Kaku Gothic ProN','Hiragino Sans','Yu Gothic Medium','Yu Gothic','Meiryo',sans-serif;font-size:16px;line-height:1.7;position:relative;}
a{color:inherit;}
h1,h2{font-family:'Red Hat Display','Hiragino Kaku Gothic ProN','Hiragino Sans','Yu Gothic Medium','Yu Gothic','Meiryo',sans-serif;}
.wrap{max-width:760px;margin:0 auto;padding:0 20px;}

/* ---- top menu ---- */
.top-menu{position:fixed;top:14px;right:14px;z-index:20;}
.top-menu-btn{background:#fff;border:1px solid rgba(36,28,51,.14);color:#241c33;font-size:16px;font-weight:700;width:38px;height:38px;border-radius:50%;cursor:pointer;-webkit-tap-highlight-color:transparent;font-family:inherit;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(36,28,51,.14);}
@media (hover:hover){.top-menu-btn:hover{background:#faf6ff;}}
.top-menu-drop{display:none;position:absolute;top:calc(100% + 8px);right:0;background:#fff;border:1px solid rgba(36,28,51,.1);border-radius:14px;padding:7px;min-width:168px;box-shadow:0 14px 32px rgba(36,28,51,.18);flex-direction:column;gap:2px;}
.top-menu-drop.open{display:flex;}
.top-menu-drop a{color:#241c33;font-size:13px;font-weight:600;text-decoration:none;padding:10px 12px;border-radius:9px;-webkit-tap-highlight-color:transparent;display:block;}
@media (hover:hover){.top-menu-drop a:hover{background:#f4eefc;}}

/* ---- breadcrumb ---- */
.crumb{font-size:13px;color:#9b93a8;padding:64px 0 0;display:flex;gap:6px;flex-wrap:wrap;}
.crumb a{color:#6b6478;text-decoration:none;}
.crumb a:hover{text-decoration:underline;}
.crumb .sep{color:#c7c0d1;}
.crumb .cur{color:var(--gc,#9257D9);font-weight:700;}

/* ---- letters legend (実物の.lettersを踏襲: 丸バッジ+意味の2列グリッド) ---- */
.letters{display:grid;grid-template-columns:1fr 1fr;gap:14px 10px;margin-top:20px;padding-bottom:20px;border-bottom:1px solid rgba(36,28,51,.1);}
.letter{display:flex;align-items:center;gap:10px;}
.letter b{width:30px;height:30px;border-radius:50%;background:color-mix(in srgb, var(--gc) 16%, white);color:var(--gc);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;flex:none;}
.letter span{font-size:13.5px;font-weight:700;color:#343c4b;display:flex;flex-direction:column;line-height:1.3;}
.letter em{font-style:normal;font-weight:600;font-size:11.5px;color:#9b93a8;}

/* ---- title (実物のh1.description__title: プレーン・左寄せ・下線区切り) ---- */
.title-eyebrow{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gc);margin-top:28px;margin-bottom:10px;}
.description h1{font-size:36px;font-weight:900;line-height:1.11;color:#241c33;margin-bottom:14px;}
.tagline{font-size:17px;font-weight:700;color:var(--gc);margin-bottom:20px;}
.lead{font-size:16px;color:#4a4458;padding-bottom:22px;margin-bottom:26px;border-bottom:1px solid rgba(36,28,51,.1);}

/* ---- scene photo (実物の.scene: 挿絵、枠なしでそのまま挿入) ---- */
.scene{margin:26px auto 34px;text-align:center;}
.scene-photo{width:100%;max-width:420px;aspect-ratio:1/1;margin:0 auto;border-radius:14px;background-size:cover;background-position:center top;box-shadow:0 6px 20px rgba(36,28,51,.12);}

/* ---- sections (実物同様カード化しない。見出し+段落のみ) ---- */
.sec-wrap{}
.sec{margin-top:36px;padding-top:32px;border-top:1px solid rgba(36,28,51,.08);}
.sec h2{font-size:26px;font-weight:900;color:#241c33;margin-bottom:14px;line-height:1.2;}
.sec p{font-size:16px;color:#4a4458;white-space:pre-line;}

/* ---- axis / traits / tags ---- */
.trait-item{display:flex;gap:9px;font-size:15px;padding:7px 0;color:#4a4458;}
.trait-mark{color:var(--gc);flex:none;}
.tag-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.tag-chip{font-size:12.5px;font-weight:700;padding:6px 13px;border-radius:100px;background:color-mix(in srgb, var(--gc) 12%, white);color:var(--gc);border:1px solid color-mix(in srgb, var(--gc) 30%, white);}

/* ---- compat ---- */
.compat-list{margin-top:4px;}
.compat-item{display:flex;gap:14px;padding:16px 0;border-top:1px solid rgba(36,28,51,.07);}
.compat-item:first-child{border-top:none;padding-top:2px;}
.compat-num{flex:none;font-size:12px;font-weight:900;color:#c7c0d1;width:32px;}
.compat-photo{flex:none;width:56px;height:56px;border-radius:12px;background-size:cover;background-position:center top;}
.compat-body{flex:1;min-width:0;}
.compat-name{font-size:16px;font-weight:800;text-decoration:none;color:#241c33;}
.compat-desc{font-size:14px;color:#6b6478;margin-top:5px;line-height:1.65;}
.compat-tip{font-size:13px;color:#8a8296;margin-top:8px;}
.compat-tip b{color:#4a4458;font-weight:700;}

/* ---- cta ---- */
.cta-row{margin-top:52px;padding-top:36px;border-top:1px solid rgba(36,28,51,.08);display:flex;flex-direction:column;gap:12px;max-width:360px;margin-left:auto;margin-right:auto;}
.cta-btn{display:block;text-align:center;text-decoration:none;font-weight:800;font-size:15.5px;padding:16px;border-radius:100px;}
.cta-btn.host{background:linear-gradient(135deg,#4298B4,#2E86D6);color:#fff;box-shadow:0 10px 24px rgba(66,152,180,.3);}
.cta-btn.hime{background:linear-gradient(135deg,#E8628A,#FF6F61);color:#fff;box-shadow:0 10px 24px rgba(232,98,138,.3);}
.cta-btn.ghost{background:#fff;border:1.5px solid rgba(36,28,51,.14);color:#241c33;}

footer{margin:64px 0 40px;text-align:center;font-size:12.5px;color:#a89fb5;}

/* ---- PC(768px以上)向け拡大: 16Personalities実物のbp-md/bp-lgに相当 ---- */
@media(min-width:768px){
  .crumb{padding-top:78px;font-size:14px;}
  .letters{grid-template-columns:repeat(4,auto);justify-content:start;gap:28px;margin-top:26px;padding-bottom:24px;}
  .description h1{font-size:44px;margin-bottom:16px;}
  .tagline{font-size:20px;margin-bottom:24px;}
  .lead{font-size:18px;padding-bottom:28px;margin-bottom:32px;}
  .scene-photo{max-width:520px;}
  .sec{margin-top:48px;padding-top:40px;}
  .sec h2{font-size:32px;margin-bottom:18px;}
  .sec p{font-size:18px;}
  .trait-item{font-size:16px;}
  .compat-name{font-size:17px;}
  .compat-desc{font-size:15px;}
  .cta-btn{font-size:16px;padding:17px;}
}
@media(min-width:1200px){
  .description h1{font-size:54px;}
  .sec h2{font-size:38px;}
  .scene-photo{max-width:600px;}
}