:root{
  --coral:#f0714e; --coral-dark:#df5c3a; --coral-soft:#ffe6da;
  --green:#4caf6d; --green-soft:#eaf7ed;
  --blue-soft:#eaf3fc; --blue-text:#3a7bc8;
  --water:#dbeeff; --water-text:#0b5e8a;
  --fire:#ffd9d9; --fire-text:#a3231f;
  --wood:#dcefc9; --wood-text:#3a6b1f;
  --metal:#fbeec1; --metal-text:#8a6d10;
  --ink:#4a3f33; --line:#f0e2d4;
}
*{box-sizing:border-box;}
body{
  margin:0; padding:0 16px 40px;
  background:linear-gradient(180deg,#ffe3cf 0%, #fff1e3 30%, #fdf7ee 55%, #f6f3ec 100%);
  font-family:"M PLUS Rounded 1c","Zen Maru Gothic","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;
  color:var(--ink); line-height:1.75;
}
.wrap{max-width:900px; margin:0 auto;}
nav.top{
  text-align:center; padding:22px 0 6px; font-size:.9rem; font-weight:700;
  color:var(--blue-text); letter-spacing:.08em;
}
nav.top span{ margin:0 12px; cursor:default; opacity:.85;}
nav.top a{
  margin:0 6px; padding:6px 16px; border-radius:999px; text-decoration:none;
  color:var(--blue-text); opacity:.75;
}
nav.top a:hover{ opacity:1; background:var(--blue-soft); }
nav.top a.active{ background:var(--coral-soft); color:var(--coral-dark); opacity:1; }
h1{
  font-family:"Zen Maru Gothic",sans-serif;
  font-size:2.4rem; text-align:center; margin:6px 0 10px;
  font-weight:900; color:var(--coral);
  text-shadow: 2px 2px 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff,
               3px 3px 6px rgba(240,113,78,.25);
  letter-spacing:.03em;
  cursor:pointer; user-select:none; transition:transform .15s;
}
h1:hover{ transform:scale(1.03); }
h1:active{ transform:scale(0.98); }
.back-to-top{
  position:fixed; right:20px; bottom:24px; width:54px; height:54px; border-radius:50%;
  background:var(--coral); color:#fff; border:none; font-size:1.5rem;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 6px 16px rgba(223,92,58,.35);
  opacity:0; pointer-events:none; transform:translateY(10px);
  transition:opacity .25s, transform .2s, background .15s; z-index:999;
}
.back-to-top.show{ opacity:1; pointer-events:auto; transform:translateY(0); }
.back-to-top:hover{ background:var(--coral-dark); transform:translateY(-4px) scale(1.06); }
.sub{text-align:center; color:#8a7c68; font-size:.92rem; margin-bottom:18px;}
.badge-row{text-align:center; margin-bottom:30px;}
.badge{
  display:inline-block; background:var(--green); color:#fff; font-weight:700;
  padding:9px 22px; border-radius:999px; font-size:.88rem;
  box-shadow:0 3px 0 #3c9058;
}
.card{
  background:#fff; border-radius:22px;
  padding:26px 30px; margin-bottom:22px;
  box-shadow:0 10px 30px rgba(180,120,80,.10);
}
.card h2{
  font-family:"Zen Maru Gothic",sans-serif;
  font-size:1.08rem; margin:0 0 16px; color:var(--coral-dark);
  display:flex; align-items:center; gap:8px;
}
.card h2::before{
  content:""; width:8px; height:8px; background:var(--coral); border-radius:50%;
  display:inline-block;
}
label{font-size:.82rem; color:#8a7c68; font-weight:700; display:block; margin-bottom:6px;}
.form-row{display:flex; gap:16px; flex-wrap:wrap; align-items:flex-start;}
.form-row > div{flex:1; min-width:130px;}
input[type=number]{
  width:100%; padding:12px 14px; border:none; border-radius:14px;
  font-size:1.05rem; background:var(--blue-soft); color:#2a4a6b;
  font-family:inherit; font-weight:700;
}
input[type=number]:focus{outline:2px solid var(--blue-text);}
.dir-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:4px;
}
.dir-btn{
  padding:12px 6px; border-radius:14px; border:none; background:var(--coral-soft);
  color:var(--coral-dark); font-weight:700; font-size:.95rem; cursor:pointer;
  font-family:inherit; transition:all .12s;
}
.dir-btn:hover{ filter:brightness(0.96); }
.dir-btn.active{
  background:var(--coral); color:#fff; box-shadow:0 3px 0 var(--coral-dark);
}
button.submit{
  margin-top:22px; width:100%; background:var(--coral); color:#fff; border:none;
  padding:16px 22px; border-radius:999px; font-size:1.1rem; cursor:pointer;
  font-weight:800; font-family:"Zen Maru Gothic",sans-serif; letter-spacing:.05em;
  box-shadow:0 4px 0 var(--coral-dark);
}
button.submit:hover{ filter:brightness(1.03); }
button.submit:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--coral-dark); }
#result{display:none;}
.num-hero{
  display:flex; align-items:center; gap:18px; margin-bottom:10px;
}
.num-circle{
  width:78px; height:78px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:2rem; font-weight:900; flex-shrink:0;
  border:4px solid #fff; box-shadow:0 4px 12px rgba(0,0,0,.12);
}
table{width:100%; border-collapse:separate; border-spacing:0 6px; margin-top:8px; font-size:.92rem;}
th, td{padding:10px 12px; text-align:center;}
th{color:#8a7c68; font-size:.8rem; font-weight:700;}
tbody tr{background:#faf6f0;}
tbody tr td:first-child{border-radius:12px 0 0 12px;}
tbody tr td:last-child{border-radius:0 12px 12px 0;}
tbody tr.rank1{background:#fff1d6;}
tbody tr.rank2{background:#fff8ea;}
.note{font-size:.82rem; color:#9a8c76; margin-top:10px;}
.grid9{
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin:16px 0;
  max-width:640px; margin-left:auto; margin-right:auto;
}
.grid9 .cell{
  border-radius:14px; padding:14px 8px;
  text-align:center; font-size:.82rem; min-height:88px; display:flex;
  flex-direction:column; justify-content:center; background:#faf6f0;
}
.grid9 .dir{font-weight:800; font-size:.85rem; margin-bottom:4px; color:#8a7c68;}
.grid9 .center{background:#ffe6da; font-weight:800; color:var(--coral-dark); font-size:1.1rem;}
.grid9 .good{background:var(--green-soft); }
.grid9 .good .dir{color:#3c9058;}
.grid9 .bad{background:#fdeceb;}
.tip{
  background:#fff8ea; border-radius:16px;
  padding:16px 18px; margin-top:16px; font-size:.92rem;
}
.warn{
  background:#fdeceb; border-radius:14px;
  padding:14px 18px; margin-top:14px; font-size:.88rem; color:#a3231f; display:none;
}
footer{text-align:center; font-size:.78rem; color:#a89a83; margin-top:30px; padding:0 10px;}

/* 相性鑑定ページ用 */
.vs-row{
  display:flex; align-items:center; justify-content:center; gap:22px;
  margin-bottom:6px; flex-wrap:wrap;
}
.vs-person{ text-align:center; }
.vs-person .p-label{ font-size:.8rem; color:#8a7c68; font-weight:700; margin-bottom:8px;}
.vs-person .num-circle{ margin:0 auto; }
.vs-person .p-note{ font-size:.78rem; color:#9a8c76; margin-top:6px; max-width:150px;}
.vs-mark{
  font-size:1.1rem; font-weight:900; color:var(--coral); align-self:center;
  padding-top:24px;
}
.relation-badge{
  display:inline-block; padding:7px 20px; border-radius:999px; font-weight:800;
  font-size:.92rem; margin:14px auto 6px; text-align:center;
}
.relation-badge.good{ background:var(--green-soft); color:#3c9058; }
.relation-badge.spicy{ background:#fff1d6; color:#a3771f; }
.relation-headline{ text-align:center; }
.stars{ font-size:1.3rem; letter-spacing:3px; color:#e0b23a; text-align:center; margin:2px 0 14px;}
.bonus-tip{
  background:var(--green-soft); border-radius:14px; padding:14px 18px;
  margin-top:16px; font-size:.9rem; color:#33633f;
}
.bonus-tip.spicy{
  background:#fff1d6; color:#8a6414;
}
.name-input label{ text-align:left; }
.toggle-btn{
  background:#fff; color:var(--coral-dark); border:2px solid var(--coral-soft);
  padding:10px 20px; border-radius:999px; font-size:.88rem; font-weight:700;
  cursor:pointer; font-family:inherit; transition:all .15s;
}
.toggle-btn:hover{ background:var(--coral-soft); }

/* 誘導CTA */
.cta-card{
  background:linear-gradient(135deg,#fff8ea 0%, #ffe6da 100%);
  border-radius:22px; padding:26px 28px; margin-bottom:22px;
  text-align:center; border:2px dashed var(--coral-soft);
}
.cta-card .cta-label{
  display:inline-block; background:var(--coral); color:#fff; font-weight:800;
  padding:5px 16px; border-radius:999px; font-size:.76rem; margin-bottom:12px;
  letter-spacing:.05em;
}
.cta-card h3{
  font-family:"Zen Maru Gothic",sans-serif; font-size:1.05rem; margin:0 0 8px;
  color:var(--coral-dark);
}
.cta-card p{ font-size:.86rem; color:#8a7c68; margin:0 0 18px; }
.cta-btn{
  display:inline-block; background:var(--coral); color:#fff; text-decoration:none;
  padding:14px 32px; border-radius:999px; font-size:1rem; font-weight:800;
  font-family:"Zen Maru Gothic",sans-serif; letter-spacing:.03em;
  box-shadow:0 4px 0 var(--coral-dark); transition:filter .12s, transform .1s;
}
.cta-btn:hover{ filter:brightness(1.03); }
.cta-btn:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--coral-dark); }

/* MilkyStep登録ポップアップ */
.modal-overlay{
  display:none; position:fixed; inset:0; background:rgba(60,40,30,.55);
  z-index:1000; align-items:center; justify-content:center; padding:20px;
}
.modal-overlay.show{ display:flex; }
.modal-box{
  position:relative; background:linear-gradient(135deg,#fff8ea 0%, #ffe6da 100%);
  border-radius:22px; padding:30px 24px 20px; max-width:420px; width:100%;
  max-height:85vh; overflow-y:auto; box-shadow:0 12px 40px rgba(0,0,0,.25);
}
.modal-close{
  position:absolute; top:12px; right:14px; background:none; border:none;
  font-size:1.5rem; line-height:1; color:#8a7c68; cursor:pointer; padding:4px;
}
.modal-close:hover{ color:var(--coral-dark); }
.modal-lead{ text-align:center; margin-bottom:16px; }
.modal-lead h3{
  font-family:"Zen Maru Gothic",sans-serif; font-size:1.05rem; margin:8px 0;
  color:var(--coral-dark);
}
.modal-lead p{ font-size:.86rem; color:#8a7c68; margin:0; }
.ms-form{ display:flex; flex-direction:column; gap:14px; }
.ms-email{
  width:100%; padding:14px 16px; border:none; border-radius:14px;
  font-size:1rem; background:var(--blue-soft); color:#2a4a6b;
  font-family:inherit; font-weight:700;
}
.ms-email:focus{ outline:2px solid var(--blue-text); }
.ms-email::placeholder{ color:#8ba3c0; font-weight:500; }
.ms-submit{
  width:100%; background:var(--coral); color:#fff; border:none;
  padding:14px 22px; border-radius:999px; font-size:1.05rem; cursor:pointer;
  font-weight:800; font-family:"Zen Maru Gothic",sans-serif; letter-spacing:.05em;
  box-shadow:0 4px 0 var(--coral-dark); transition:filter .12s, transform .1s;
}
.ms-submit:hover{ filter:brightness(1.03); }
.ms-submit:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--coral-dark); }