/* =====================
   Base layout styles
   ===================== */
*{box-sizing:border-box}
html{font-size:16px}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic",Meiryo,Arial,sans-serif;
  color:#1f2937; background:#fff; line-height:1.75;
}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:1040px;margin:0 auto;padding:20px}

/* Header & Nav */
.header{position:sticky;top:0;background:#fff;border-bottom:1px solid #e5e7eb;z-index:10}
.header .container{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.logo img{width:auto;height:36px}
@media (min-width:900px){ .logo img{height:40px} }
.nav a{margin-left:16px;color:#1f2937}

/* Hero (title + search + tags) */
.hero{padding:28px 0;border-bottom:1px solid #e5e7eb;background:#fff}
.hero h1{margin:0 0 6px 0;font-size:1.8rem}
.hero p{margin:0;color:#6b7280}
.controls{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 6px}
.search{flex:1;min-width:220px;display:flex;gap:8px;border:1px solid #e5e7eb;border-radius:999px;padding:8px 12px;background:#fff}
.search input{border:0;outline:0;flex:1;font-size:1rem}
.tagbar{display:flex;flex-wrap:wrap;gap:8px}
.tag{border:1px solid #e5e7eb;border-radius:999px;padding:6px 10px;font-size:.9rem;color:#6b7280;background:#fff;cursor:pointer}
.tag.active{border-color:#0f766e;color:#064e3b;background:#ecfdf5}

/* Grid cards */
.grid{display:grid;grid-template-columns:1fr;gap:22px}
@media(min-width:900px){.grid{grid-template-columns:repeat(3,1fr)}}
.card{border:1px solid #e5e7eb;border-radius:16px;overflow:hidden;background:#fff;transition:box-shadow .2s}
.card:hover{box-shadow:0 8px 28px rgba(0,0,0,.06)}
.thumb{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:#eef2f7}
.body{padding:14px 16px}
.title{margin:0 0 6px 0;font-size:1.05rem;line-height:1.4}
.meta{font-size:.85rem;color:#6b7280;margin-bottom:6px}
.excerpt{color:#374151}
.badge{display:inline-block;margin-right:8px;padding:2px 8px;border-radius:999px;font-size:.75rem;background:#f3f4f6;color:#374151}

/* Pager */
.pager{display:flex;justify-content:center;gap:8px;margin:18px 0}
.pager button{border:1px solid #e5e7eb;background:#fff;border-radius:8px;padding:8px 12px;cursor:pointer}

/* Footer */
.footer{margin-top:32px;border-top:1px solid #e5e7eb;background:#fafafa;color:#6b7280;font-size:.9rem}
.footer .container{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}

/* Article */
.prose h1,.prose h2,.prose h3{line-height:1.3}
.prose h2{margin-top:28px;font-size:1.35rem}
.prose h3{margin-top:22px;font-size:1.05rem}
.prose p{margin:12px 0}
.prose ul{padding-left:1.2rem}
.note{padding:12px 14px;border-left:4px solid #f59e0b;background:#fff8e6;border-radius:12px;margin:18px 0}
.banner-box{margin:28px 0;padding:18px;border:1px dashed #e5e7eb;border-radius:12px;background:#f9fafb}
.breadcrumbs{font-size:.9rem;color:#6b7280;margin:6px 0 12px}

/* =====================
   Theme B (Sage Chic) + spacing tweaks
   ===================== */
body{ background:#FFFFFF; }
.header{ background:#FFFFFF; border-bottom:1px solid #E5E7E9; }
.hero{ background:#F3F6F4; border-bottom:1px solid #E5E7E9; }
.footer{ background:#F3F6F4; border-top:1px solid #E5E7E9; color:#667070; }
.card{ border-color:#E5E7E9; }
.badge{ background:#EDF2EF; color:#2F3A35; }
.tag.active{ background:#4F6F62; border-color:#4F6F62; color:#FFF; }
a:hover{ color:#4F6F62; }

/* Header spacing: logoとメニューの間は保ちつつ、下側だけ薄く */
.header .container{ row-gap:14px; column-gap:16px; padding-top:20px; padding-bottom:6px; }
.header .nav{ display:flex; gap:16px; }
.header .nav a{ padding-bottom:2px; line-height:1.2; }

/* Hero thinner: 検索周りを薄く */
.hero{ padding:10px 0; }
.hero h1{ font-size:1.35rem; margin:0 0 2px; }
.hero p{ margin:0; font-size:.95rem; }
.controls{ margin:6px 0 0; gap:8px; }
.search{ padding:6px 10px; }
.search input{ font-size:.95rem; }
.tagbar{ gap:6px; }
.tag{ padding:4px 8px; font-size:.85rem; }

@media(max-width:900px){
  .hero{ padding:8px 0; }
  .controls{ margin-top:4px; }
}


/* ▼ 常に（PC/スマホとも）ロゴの“下”にメニューを置く */
.header .container{
  display: flex;
  flex-direction: column;     /* ← 横並びから縦並びへ */
  align-items: flex-start;    /* 左寄せ */
  justify-content: flex-start;
  row-gap: 8px;               /* ロゴとメニューの間（お好みで 6〜14px） */
  column-gap: 0;
  padding-top: 20px;
  padding-bottom: 6px;        /* 下側だけ薄めの余白 */
}

/* ナビは左寄せで、横方向の間隔は維持 */
.header .nav{
  width: 100%;
  display: flex;
  justify-content: flex-start; 
  gap: 16px;
  margin-top: 0;
}

/* （念のため）以前に入れた“PCは右側並び”指定を無効化 */
@media (min-width: 901px){
  .header .container{ justify-content: flex-start; align-items: flex-start; }
  .header .nav{ width: 100%; margin-top: 0; }
}


/* ===== Readability Patch (JP) ===== */
.prose{
  max-width: 760px;           /* 読書幅を少し細めに */
  margin: 0 auto;
  font-size: 1.06rem;
}
@media (max-width: 900px){
  .prose{ max-width: 92%; font-size: 1.02rem; }
}

/* 段落：行間と段落間隔を広げる（文言は触らない） */
.prose p{
  line-height: 1.95;
  letter-spacing: .02em;      /* 日本語向けに気持ち広め */
  margin: 0 0 1.1em;
}

/* 見出し：詰まりを解消して読みやすく */
.prose h1, .prose h2{ text-wrap: balance; } /* 非対応ブラウザは無視されます */
.prose h1{
  font-size: clamp(1.6rem, 2.2vw, 2.0rem);
  line-height: 1.25;
  margin: .2em 0 .4em;
}
.prose h2{
  font-size: clamp(1.2rem, 2.0vw, 1.45rem);
  line-height: 1.35;
  margin: 2.0em 0 .6em;       /* セクション間の余白を明確に */
  font-weight: 700;
}

/* 箇条書き：詰めすぎない・読みやすく */
.prose ul, .prose ol{ margin: .6em 0 1.2em; padding-left: 1.2em; }
.prose li{ line-height: 1.9; }
.prose li + li{ margin-top: .3em; }

/* 画像：周囲に余白＋角丸 */
.prose .thumb{
  display:block;
  margin: 10px auto 18px;
  border-radius: 12px;
}

/* 長いURLなどのはみ出し防止と微妙な描画改善 */
.prose{
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
}