:root{
  --bg:#fff7fb;
  --panel:#ffffff;
  --ink:#222;
  --ink-soft:#666;
  --accent:#ff3ea5;
  --accent-2:#ff86c8;
  --line:#ffd6eb;
  --ok:#14b8a6;
  --ng:#ef4444;
  --radius:14px;
  --shadow:0 6px 20px rgba(255,62,165,.15);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", "Segoe UI", Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.75;
}

.container{width:min(1100px, 92%); margin-inline:auto}
.section{padding:56px 0}
.micro{font-size:.85rem}
.gray{color:var(--ink-soft)}
.accent{color:var(--accent)}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.9); backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:12px 0}
.brand{font-weight:800; color:var(--ink); letter-spacing:.02em}

/* --- ▼追加部分（ナビ修正） --- */
.nav {
  display:flex;
  flex-wrap:wrap;           /* 狭い画面で折り返し */
  justify-content:center;   /* 中央寄せ */
  gap:14px;                 /* リンク間の間隔 */
}
.nav a {
  margin:0; 
  padding:8px 10px;
  border-radius:8px;
  font-size:16px;
  font-weight:600;
  white-space:nowrap;       /* 改行防止 */
}
.nav a:hover{background:var(--line)}
/* --- ▲追加部分 --- */

/* Hero */
.hero{padding-top:22px; padding-bottom:24px}
.lead{margin:.5rem 0 1.25rem}
.cta-row{display:flex; align-items:center; gap:16px; flex-wrap:wrap}

/* Buttons */
.btn{display:inline-block; border:0; padding:12px 18px; border-radius:12px; cursor:pointer; box-shadow:var(--shadow); background:var(--panel)}
.btn:hover{filter:brightness(0.98)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(180deg, var(--accent), var(--accent-2)); color:white}
.btn-lg{font-size:1.05rem; padding:14px 22px}
.btn-yes{background:linear-gradient(180deg,#10b981,#059669); color:#fff}
.btn-no{background:linear-gradient(180deg,#ef4444,#dc2626); color:#fff}

/* Cards & grids */
.card-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px}
@media (max-width:980px){.card-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.card-grid{grid-template-columns:1fr}}
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.card img{width:100%; display:block; aspect-ratio:16/9; object-fit:cover}
.card .card-title{margin:.5rem .9rem 0}
.card .card-desc{margin:.25rem .9rem 1rem; color:var(--ink-soft)}
.product .card-title{font-size:1rem}

/* Ads */
.ad-row{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:12px auto}
@media (max-width:720px){.ad-row{grid-template-columns:1fr}}
.ad-slot{
  min-height:130px; border:2px dashed var(--line); border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-soft); background:#fff;
}

/* Quiz */
.quiz-box{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:22px; box-shadow:var(--shadow)
}
.quiz-progress{font-weight:700; margin-bottom:8px}
.quiz-question{font-size:1.2rem; margin:14px 0 16px}
.btn-row{display:flex; gap:12px; flex-wrap:wrap}

/* Result nav */
.result-nav{margin-top:24px}
.result-card{
  display:block; padding:0; overflow:hidden
}
.result-card h4{margin:.5rem .9rem 1rem}

/* FAQ */
.faq-list{display:grid; gap:10px}
.faq-item{
  background:#fff; border:1px solid var(--line); border-radius:10px; padding:8px 12px
}
.faq-item[open]{outline:2px solid var(--accent-2)}
.faq-item summary{font-weight:700; cursor:pointer}
.faq-a{padding:.25rem .5rem .75rem}

/* Contact */
.contact-form{display:grid; gap:12px}
.contact-form input, .contact-form textarea{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:#fff
}
.contact-form textarea{min-height:130px}

/* Footer */
.site-footer{border-top:1px solid var(--line); background:#fff}
.footer-inner{display:flex; align-items:center; justify-content:space-between; padding:20px 0}

/* Popular section emphasis */
#popular-title{position:relative}
#popular-title:after{
  content:"注目"; position:absolute; left:-12px; top:-12px;
  font-size:.7rem; background:var(--accent); color:#fff; padding:2px 6px; border-radius:999px;
}

/* Small utilities */
.hidden{display:none}
.share-inline{display:flex; align-items:center; gap:8px}