:root{
  --bg:#f7f6f5; --ink:#322525; --muted:#6f5f5f; --rose:#a86266; --rose-2:#b87a7e; --rose-3:#c79a9d;
  --paper:#fff; --grid:#e9e4e2; --pill:#efe4e7; --shadow:0 10px 28px rgba(50,37,37,.08);
  --radius:18px; --max:1100px;
  --layout-gap:18px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:'Noto Sans JP','Hiragino Sans','Yu Gothic','Meiryo',sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.75; -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:50;
  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:8px 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}

/* pill ボタン */
.btn-pill {
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--grid); background:#fff; color:#a86266;
  border-radius:999px; padding:6px 10px; font-weight:700; font-size:.95rem; line-height:1.2;
  white-space:nowrap; cursor:pointer; transition:box-shadow .2s ease, background-color .2s ease;
}
.btn-pill:hover { box-shadow: var(--shadow); }

.wrap{
  max-width:var(--max); margin:0 auto;
  padding:88px 12px 72px;
}

/* ハンバーガー */
.hambtn{
  width:40px; height:40px; border:1px solid var(--grid); background:#fff; color:#a86266;
  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:#a86266;
  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)}

/* Hero */
.hero{
  background:var(--paper); border:1px solid var(--grid);
  border-radius:22px; box-shadow:var(--shadow); overflow:hidden;
}
.hero__inner{padding:40px 7vw 28px; text-align:center}
.hero__title{
  font-family:'Playfair Display',serif; font-weight:600; color:#a86266;
  font-size:clamp(44px, 7vw, 92px); line-height:1.02; margin:0 0 8px;
}
.hero__subtitle{
  font-family:'Playfair Display',serif; color:#a86266;
  font-size:clamp(24px, 4.6vw, 56px); line-height:1.08; margin:0;
}
.hero__caption{color:var(--muted); font-size:.95rem; margin-top:10px}

/* Main layout: content + sidebar */
.main{
  display:grid; grid-template-columns: 1fr 280px; gap:var(--layout-gap);
  margin-top:var(--layout-gap);
}
@media (max-width:980px){
  .main{ grid-template-columns:1fr; }
}

/* Content list */
.grid{
  display:grid; gap:14px; grid-template-columns:repeat(2,1fr);
}
@media (max-width:980px){
  .grid{grid-template-columns:1fr}
}

.card{
  background:#fff; border:1px solid var(--grid);
  border-radius:var(--radius); box-shadow:var(--shadow);
  overflow:hidden; transition:transform .2s;
}
.card:hover{transform:translateY(-2px)}
.card__thumb-link{display:block}
.thumb{
  aspect-ratio:16/9;
  background:linear-gradient(180deg,#f7eff1 0%, #fefefe 100%);
  border-bottom:1px solid var(--grid);
}
.thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.card__body{padding:16px}
.card__title{
  font-family:'Playfair Display',serif; color:#a86266;
  font-size:1.2rem; margin:0 0 6px;
}
.card__title a{color:inherit; text-decoration:none}
.meta{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  color:#6b5c5c; font-size:.86rem; margin-bottom:6px;
}
.excerpt{
  color:#574b4b; font-size:.96rem; margin:0 0 8px;
}
.cats{color:#5b4a4a; font-size:.9rem}
.more{font-size:.9rem}

/* Pagination */
.pager{
  display:flex; gap:8px; justify-content:center; margin-top:18px;
}
.pager .btn-pill{min-width:100px}

/* Sidebar */
.sidebar{position:sticky; top:76px; height:fit-content}
.panel{
  background:#fff; border:1px solid var(--grid);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:16px;
}
.panel h3{
  margin:0 0 10px; font-family:'Playfair Display',serif;
  color:#2b1f1f; font-size:1.2rem;
}
.cat-list{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:6px;
}
.cat-list a{
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 10px; border:1px solid var(--grid); border-radius:10px;
  background:#fbf9f9; color:#5b3d3f; text-decoration:none;
  font-weight:700; font-size:.95rem;
}
.cat-list a[aria-current="true"]{
  background:#fff; box-shadow:var(--shadow); color:#a14c53;
}
.tiny{
  display:block; text-align:center; color:#6b5c5c;
  font-size:.86rem; margin-top:18px;
}

/* フッターで使うやつ（なければ） */
.section{
  background:var(--paper); border:1px solid var(--grid);
  border-radius:22px; box-shadow:var(--shadow);
  padding:24px; margin-top:24px;
}
.muted{color:var(--muted);}