/* においの教科書 — 現行サイトの配色をそのまま使う（実測 #00B6BC / 見出し #0092B7） */
:root{
  --teal:#00B6BC;          /* ヘッダー帯 */
  --teal-deep:#0092B7;     /* 見出し・リンク */
  --ink:#4a4a4a;
  --muted:#8a8a8a;
  --line:#e6eef0;
  --bg:#ffffff;
  --soft:#f4fbfc;
  --badge:#f7a72b;
  --wrap:1160px;
  --font:"M PLUS Rounded 1c","Rounded Mplus 1c","Hiragino Maru Gothic ProN",sans-serif;
}
*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font);
  line-height:1.9; font-size:16px; -webkit-text-size-adjust:100%}
img{max-width:100%; height:auto}
a{color:var(--teal-deep)}

.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 20px}

/* ── ヘッダー ───────────────────────── */
.site-head{background:#fff}
.head-bar{background:var(--teal); text-align:center; padding:14px 20px}
.brand{color:#fff; text-decoration:none; font-weight:700; font-size:19px;
  letter-spacing:.06em}
.nav{border-bottom:1px solid var(--line)}
.nav-inner{display:flex; flex-wrap:wrap; justify-content:center; gap:6px 26px;
  padding-top:12px; padding-bottom:12px}
.nav a{color:var(--teal-deep); text-decoration:none; font-size:14px; padding:4px 0}
.nav a:hover{opacity:.7}
.nav-row{display:none}
.nav-burger{display:none}

/* ── 2カラム ───────────────────────── */
.layout{display:flex; gap:40px; align-items:flex-start; padding-top:32px;
  padding-bottom:48px}
.main{flex:1 1 auto; min-width:0}
.side{flex:0 0 300px}

/* ── 記事 ──────────────────────────── */
.badge{display:inline-block; background:var(--badge); color:#fff; font-size:12px;
  font-weight:700; padding:3px 12px; border-radius:12px; text-decoration:none;
  margin-right:6px}
.article-head h1{color:var(--teal-deep); font-size:28px; line-height:1.5;
  margin:14px 0 8px}
.article-head .date{color:var(--muted); font-size:13px; text-align:right; margin:0 0 14px}
.eyecatch{display:block; width:100%; border-radius:6px; margin-bottom:28px}
.article-body{font-size:16px}
/* 【重要】記事本文は自前のCSSを持っている（.section-title など）。
   ここで h2/h3 をまとめて塗ると、その作り込みを潰してしまう。
   **クラスが付いていない見出しにだけ**既定の体裁を当てる。 */
.article-body h2:not([class]){color:var(--teal-deep); font-size:22px;
  margin:44px 0 16px; padding:10px 14px; background:var(--soft);
  border-left:5px solid var(--teal); border-radius:3px; line-height:1.5}
.article-body h3:not([class]){color:var(--teal-deep); font-size:19px;
  margin:34px 0 12px; padding-bottom:6px; border-bottom:2px solid var(--line)}
.article-body p{margin:0 0 1.6em}
.article-body ul,.article-body ol{padding-left:1.5em; margin:0 0 1.6em}
.article-body li{margin:.4em 0}
.article-body img{border-radius:6px; margin:8px 0}
.article-body table{width:100%; border-collapse:collapse; margin:0 0 1.6em;
  font-size:15px}
.article-body th,.article-body td{border:1px solid var(--line); padding:10px 12px}
.article-body th{background:var(--soft)}
.article-body blockquote{margin:0 0 1.6em; padding:14px 18px; background:var(--soft);
  border-left:4px solid var(--teal); border-radius:0 6px 6px 0}

/* ── 記事カード ─────────────────────── */
.sec-h{color:var(--teal-deep); font-size:22px; margin:40px 0 18px}
.cards{display:grid; grid-template-columns:repeat(2,1fr); gap:22px}
.card-post{display:block; text-decoration:none; color:inherit;
  border:1px solid var(--line); border-radius:10px; overflow:hidden;
  transition:transform .2s, box-shadow .2s}
.card-post:hover{transform:translateY(-3px); box-shadow:0 8px 22px rgba(0,0,0,.08)}
.card-post img{display:block; width:100%; aspect-ratio:16/9; object-fit:cover}
.card-body{display:block; padding:14px 16px}
.card-title{display:block; font-weight:700; font-size:15px; line-height:1.6;
  color:var(--teal-deep)}
.card-date{display:block; color:var(--muted); font-size:12px; margin-top:8px}
.more{text-align:center; margin:28px 0}

/* ── サイドバー ─────────────────────── */
.card{border:1px solid var(--line); border-radius:10px; padding:22px 20px;
  margin-bottom:24px; text-align:center}
.card-h{color:var(--teal-deep); font-size:16px; margin:0 0 12px}
.chara-role{color:var(--muted); font-size:12px; margin:0}
.chara-name{font-weight:700; font-size:16px; margin:6px 0 12px}
.chara-img{width:150px; height:150px; border-radius:50%; object-fit:cover;
  border:3px solid var(--teal)}
.chara-text{font-size:13px; text-align:left; color:#666; margin:14px 0 0}
.cat-list{list-style:none; padding:0; margin:0; text-align:left}
.cat-list li{border-bottom:1px solid var(--line)}
.cat-list a{display:block; padding:10px 4px; text-decoration:none; font-size:14px}

/* ── フッター ───────────────────────── */
.site-foot{background:var(--soft); padding:32px 0; margin-top:40px;
  border-top:1px solid var(--line)}
.foot-nav{display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px;
  font-size:13px; margin-bottom:14px}
.foot-nav a{text-decoration:none}
.copy{text-align:center; color:var(--muted); font-size:12px; margin:0}

/* ── スマホ ───────────────────────── */
@media(max-width:900px){
  .layout{display:block; padding-top:22px}
  .side{margin-top:36px}
  .brand{font-size:15px}
  .article-head h1{font-size:22px}
  .article-body h2{font-size:19px}
  .cards{grid-template-columns:1fr}

  /* ナビはハンバーガー */
  .nav-row{display:block; padding-top:8px; padding-bottom:8px}
  .nav-burger{display:block; width:28px; height:22px; position:relative;
    cursor:pointer; margin-left:auto}
  .nav-burger span{position:absolute; left:0; width:100%; height:2px;
    background:var(--teal-deep); border-radius:2px; transition:transform .25s, opacity .2s}
  .nav-burger span:nth-child(1){top:0}
  .nav-burger span:nth-child(2){top:10px}
  .nav-burger span:nth-child(3){top:20px}
  .nav-toggle:checked ~ .nav-row .nav-burger span:nth-child(1){transform:translateY(10px) rotate(45deg)}
  .nav-toggle:checked ~ .nav-row .nav-burger span:nth-child(2){opacity:0}
  .nav-toggle:checked ~ .nav-row .nav-burger span:nth-child(3){transform:translateY(-10px) rotate(-45deg)}
  .nav{max-height:0; overflow:hidden; transition:max-height .3s ease; border-bottom:none}
  .nav-toggle:checked ~ .nav{max-height:600px; border-bottom:1px solid var(--line)}
  .nav-inner{flex-direction:column; gap:0; padding-top:0}
  .nav a{display:block; padding:13px 4px; border-bottom:1px solid var(--line);
    font-size:15px}
}

/* トップのサイト名は h1。見た目はリンク時と同じにする */
.brand-h1{margin:0; font-size:19px; font-weight:700; letter-spacing:.06em; color:#fff}
@media(max-width:900px){ .brand-h1{font-size:15px} }

/* h1 の中身はサイト名だけ。副題は装飾として同じ行に置く
   （現行の h1 は「においの教科書」のみ） */
.head-bar{display:flex; justify-content:center; align-items:baseline; gap:0}
.brand-h1{display:inline}
.brand-tag{color:#fff; font-weight:400; font-size:19px; letter-spacing:.06em}
@media(max-width:600px){ .brand-tag{display:none} }
@media(max-width:900px){ .brand-tag{font-size:15px} }
.cat-list a{line-height:1.6}