/* assets/css/top.css */
:root{
  --bg:#f7f6f5; --paper:#fff; --grid:#e9e4e2;
  --ink:#322525; --muted:#6f5f5f;
  --rose:#a86266; --rose-2:#b87a7e; --rose-3:#c79a9d;
  --pill:#efe4e7; --shadow:0 10px 28px rgba(50,37,37,.08);
  --radius:18px; --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:#a86266; 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}
.actions{display:none} /* TOPはハンバーガー運用なので隠す */

/* ハンバーガー（TOP専用） */
.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;
}
.hambtn .bars{width:18px; height:12px; position:relative}
.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;
}
.nav-panel a:hover, .nav-panel button:hover{box-shadow:var(--shadow)}

/* Hero */
.hero{
  position:relative; margin-top:54px; min-height:62vh;
  display:grid; place-items:center; color:#1e1414; overflow:hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(247,246,245,0.28) 100%),
    url('../img/bouquet-hero.jpg') center/cover no-repeat;
}
.hero__inner{width:100%; max-width:var(--max); padding:72px 12px 40px; position:relative;}
.hero__nav{position:absolute; left:0; top:32px; display:flex; flex-direction:column; gap:14px;}
.hero__nav a{
  color:#fff; background:rgba(255,255,255,.18); border-left:3px solid #fff;
  padding:10px 18px 10px 14px; backdrop-filter: blur(2px); border-radius:0 999px 999px 0;
  font-weight:700; letter-spacing:.06em;
}
.hero__kicker{color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.25); font-size:.95rem; letter-spacing:.08em; margin-left:220px;}
.hero__title{margin:8px 0 0 220px; font-family:'Playfair Display',serif; font-weight:600; color:#fff; font-size:clamp(42px,7vw,82px); line-height:1.02; text-shadow:0 10px 24px rgba(0,0,0,.28);}
.hero__subtitle{margin:6px 0 0 220px; font-size:1.05rem; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.25);}
@media (max-width:900px){
  .hero__nav{position:static; flex-direction:row; flex-wrap:wrap; gap:10px; margin-bottom:16px}
  .hero__kicker,.hero__title,.hero__subtitle{margin-left:0}
  .hero{min-height:56vh}
}

/* Sections */
.wrap{max-width:var(--max); margin:0 auto; padding:36px 12px 80px}
.section{
  background:var(--paper); border:1px solid var(--grid); border-radius:22px;
  box-shadow:var(--shadow); padding:26px; margin-top:26px; position:relative; overflow:hidden;
}
.section h2{
  font-family:'Playfair Display',serif; font-size:2rem; color:#2b1f1f; margin:0 0 18px;
  position:relative; padding-bottom:14px;
}
.section h2::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:#cfc8c6}
.paper-grid{
  position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(to bottom, transparent 0 72px, rgba(0,0,0,.035) 72px 73px),
    repeating-linear-gradient(to right, transparent 0 240px, rgba(0,0,0,.04) 240px 241px);
  opacity:.35;
}

/* Intro */
.intro{display:grid; grid-template-columns:1.08fr .92fr; gap:28px; align-items:start;}
.intro p{margin:0 0 12px; color:#4b3f3f}
.intro .signature{margin-top:16px; font-weight:700}
.intro__media{position:relative}
.intro__photo{
  width:100%; aspect-ratio:3/4; border-radius:14px; border:1px solid var(--grid);
  background:
    url('../img/about-photo.jpg') center/cover no-repeat,
    radial-gradient(120% 100% at 80% 10%, #f6edef 0%, #efe7ea 40%, #f8f6f5 100%);
  box-shadow:0 14px 30px rgba(50,37,37,.12); position:relative; z-index:2;
}
.oval{position:absolute; z-index:1; right:-8%; bottom:-10%; width:85%; height:48%; background:var(--rose-2); border-radius:60% 40% 55% 45% / 55% 45% 60% 40%; filter:blur(.4px); opacity:.9}
@media (max-width:900px){ .intro{grid-template-columns:1fr} .oval{right:-4%; bottom:-6%; width:70%; height:40%} }

/* Counseling（カード分割） */
.c2-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media (max-width:900px){ .c2-grid{grid-template-columns:1fr} }
.c2-card{border:1px solid var(--grid); border-radius:16px; background:#fff; padding:16px;}
.c2-lead{color:#4b3f3f}
.c2-item{display:grid; grid-template-columns:40px 1fr; gap:12px; align-items:start}
.c2-item + .c2-item{margin-top:12px}
.c2-icon{
  width:36px; height:36px; border-radius:12px; display:grid; place-items:center;
  background:#fff; border:1px solid var(--grid); box-shadow:var(--shadow); font-size:18px;
}
.c2-feature{border:1px dashed var(--grid); background:#fbf9f9}
.c2-feature strong{display:block; margin-bottom:4px}
.c2-price{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:900px){ .c2-price{grid-template-columns:1fr} }
.price-card{border:1px solid var(--grid); border-radius:14px; background:#fff; padding:14px}
.price-card h3{margin:0 0 6px}
.yen{font-size:1.8rem; font-weight:800; color:var(--rose)}
.muted{color:var(--muted)}
.c2-cta{text-align:center}

/* -------- Community Board：カード -------- */
.cat-grid{display:grid; gap:14px; grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){ .cat-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:720px){ .cat-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .cat-grid{grid-template-columns:1fr} }

.cat{
  display:flex; align-items:center; gap:12px; padding:14px;
  border:1px solid var(--grid); border-radius:16px;
  background:linear-gradient(180deg,#fefefe 0%,#fbf7f8 100%);
  box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease;
  color:inherit;
}
.cat:hover{ transform:translateY(-2px); box-shadow:0 16px 36px rgba(50,37,37,.12) }
.cat__icon{
  width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center; font-size:20px;
  background:#fff; border:1px solid var(--grid); box-shadow:inset 0 0 0 4px #faf5f6, 0 4px 12px rgba(0,0,0,.04);
  flex:0 0 auto;
}
.cat__title{font-weight:800; line-height:1.35; color:#2b1f1f; font-size:.98rem}
.boards-caption{color:#6d5f5f; margin:-6px 0 14px; font-size:.95rem}
.boards-cta{margin-top:26px; text-align:center}
.boards-cta .btn-pill{padding:10px 16px}

/* News */
.news__grid{display:grid; grid-template-columns:120px 1fr 32px; align-items:center; gap:14px}
.news__year{color:#9a8e8e; font-weight:700; letter-spacing:.08em}
.news__line{grid-column:1/-1; height:1px; background:#e6e0de}
.news__date{color:#9a8e8e; font-size:.95rem; letter-spacing:.08em}
.news__title{color:#312626}
.news__arrow{justify-self:end; color:#7c6a6a}
.news__section h2{color:var(--rose)}