/* assets/css/counseling.css */
:root{
  --bg:#f7f6f5; --paper:#fff; --grid:#e9e4e2;
  --ink:#322525; --muted:#6f5f5f;
  --rose:#a86266; --rose-2:#b87a7e; --rose-3:#c79a9d;
  --shadow:0 10px 28px rgba(50,37,37,.08);
  --max:1100px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Noto Sans JP','Hiragino Sans','Yu Gothic','Meiryo',sans-serif;
  line-height:1.8; -webkit-font-smoothing:antialiased;
}
a{color:var(--rose); text-decoration:none}
a:hover{opacity:.9}

/* ───── Topbar ───── */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:40;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(6px);
  border-bottom:1px solid var(--grid);
}
.topbar__inner{
  max-width:var(--max); margin:0 auto; padding:10px 12px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  position:relative;
}
.brand{display:flex; align-items:center; gap:10px}
.brand__logo{
  width:28px; height:18px; border-radius:999px; flex:0 0 auto;
  background:radial-gradient(45% 80% at 60% 50%,#fff 0%,#fff 30%,#e9ccd1 31%,#c28b91 100%);
  box-shadow:0 2px 8px rgba(168,98,102,.25) inset;
}
.brand__name{font-weight:700; letter-spacing:.02em}

/* ===== ハンバーガー ===== */
.hambtn{
  width:40px; height:40px; border:1px solid var(--grid);
  background:#fff; color:var(--rose);
  border-radius:10px; display:inline-grid; place-items:center;
  cursor:pointer; position:absolute; right:12px; top:50%; transform:translateY(-50%);
}
.hambtn .bars{width:18px; height:12px; position:relative; top:-1px;}
.hambtn .bars::before,.hambtn .bars::after,.hambtn .bars span{
  content:""; position:absolute; left:0; right:0;
  height:2px; background:currentColor; border-radius:2px;
}
.hambtn .bars::before{top:0}
.hambtn .bars span{top:5px}
.hambtn .bars::after{bottom:0}

.nav-panel{
  position:absolute; right:12px; top:56px; width:240px; background:#fff;
  border:1px solid var(--grid); border-radius:16px; box-shadow:var(--shadow);
  padding:10px; display:none; z-index:60;
}
.nav-panel.open{display:block}
.nav-panel a, .nav-panel button{
  display:flex; align-items:center; justify-content:center;
  width:100%; border:1px solid var(--grid); background:#fff; color:var(--rose);
  border-radius:999px; padding:10px 14px; font-weight:700; margin:6px 0; cursor:pointer; text-decoration:none;
}
.nav-panel a:hover, .nav-panel button:hover{box-shadow:var(--shadow)}

.btn-pill{
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--grid); background:#fff; color:var(--rose);
  border-radius:999px; padding:6px 14px; font-weight:700; font-size:.95rem; cursor:pointer;
}

/* ───── Hero ───── */
.hero{
  margin-top:54px; position:relative; overflow:hidden;
  background:radial-gradient(120% 100% at 80% 10%, #f6edef 0%, #efe7ea 40%, #f8f6f5 100%);
  border-bottom:1px solid var(--grid);
}
.hero__inner{
  max-width:var(--max); margin:0 auto; padding:36px 12px;
  display:grid; grid-template-columns:1.15fr .85fr; gap:24px; align-items:center;
}
@media (max-width:900px){ .hero__inner{grid-template-columns:1fr} }
.h-title{
  font-family:'Playfair Display',serif; font-weight:600;
  font-size:clamp(36px,6vw,60px); margin:0;
}
.h-sub{color:#664c4c; margin:.3rem 0 0}
.hero__art{
  height:240px; border:1px solid var(--grid); border-radius:16px;
  background:
    url('../img/bouquet-hero.jpg') center/cover no-repeat,
    linear-gradient(135deg,#f5f0f2,#ffffff);
  box-shadow:var(--shadow);
}

/* ───── コンテンツ共通 ───── */
.wrap{
  max-width:var(--max); margin:0 auto; padding:24px 12px 64px
}
.section{
  background:var(--paper); border:1px solid var(--grid);
  border-radius:22px; box-shadow:var(--shadow);
  padding:24px; margin-top:24px; position:relative;
}
.section h2{
  font-family:'Playfair Display',serif; font-size:2rem; color:#2b1f1f;
  margin:0 0 16px; padding-bottom:12px; position:relative;
}
.section h2::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:#cfc8c6
}

.grid-2{display:grid; grid-template-columns:1.1fr .9fr; gap:22px}
@media (max-width:900px){ .grid-2{grid-template-columns:1fr} }
.lead p{margin:.2rem 0 1rem; color:#4b3f3f}
.card{border:1px solid var(--grid); border-radius:16px; background:#fff; padding:16px;}
.kv{display:grid; grid-template-columns:24px 1fr; gap:10px; align-items:start; margin:.4rem 0}
.kv i{font-style:normal}
.features{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
@media (max-width:900px){ .features{grid-template-columns:1fr} }
.feature{
  border:1px dashed var(--grid); border-radius:16px; background:#fbf9f9; padding:16px;
}
.feature strong{display:block; margin-bottom:6px}
.pricing{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:900px){ .pricing{grid-template-columns:1fr} }
.price{
  border:1px solid var(--grid); border-radius:16px; padding:18px; background:#fff;
}
.price h3{margin:0 0 8px}
.price .yen{font-size:2rem; font-weight:800; color:#a86266}
.flow{position:relative; padding-left:20px}
.flow::before{
  content:""; position:absolute; left:9px; top:6px; bottom:6px; width:2px; background:#eadfe0
}
.step{position:relative; margin:12px 0 16px; padding-left:12px}
.step::before{
  content:""; position:absolute; left:-3px; top:6px; width:12px; height:12px;
  border-radius:999px; background:#c79a9d; box-shadow:0 0 0 4px #f3e8ea
}
.access-link{
  display:inline-flex; align-items:center; gap:.5rem; padding:10px 14px;
  border:1px solid var(--grid); border-radius:12px; background:#fff;
  font-weight:700; color: var(--ink);
}
.access-link::before{ content:"▶"; color:var(--rose); }
.access-link:hover{ box-shadow:var(--shadow); }
.badge{
  display:inline-flex; align-items:center; gap:.35rem; padding:4px 8px;
  border:1px solid var(--grid); border-radius:999px; background:#fff;
  font-weight:700; color:#6b5c5c; font-size:.9rem
}
.muted{color:var(--muted)}