@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500&family=Zen+Maru+Gothic:wght@500;700&display=swap');

:root{
  --bg:#FBF8F2; --surface:#FFFDF9;
  --ink:#2A2620; --ink-soft:#5A5248;
  --green:#34503F; --green-dark:#28402F; --green-bubble:#E8F0EA;
  --brown:#9A6B41; --tan:#B98C63; --tan-bubble:#F3EBDF;
  --border:#E7DDC9; --accent:#C46B4A;
  --font-head:'Zen Maru Gothic',sans-serif;
  --font-body:'Noto Sans JP',sans-serif;
  --wrap:720px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-weight:400;
  font-size:17px; line-height:1.85;
}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 18px;}

/* 見出し */
h1,h2,h3{font-family:var(--font-head); color:var(--ink); line-height:1.5;}
h1{font-size:25px; font-weight:700; margin:22px 0 14px;}
h2{font-size:21px; font-weight:700; color:var(--green);
   border-left:5px solid var(--green); padding-left:12px; margin:40px 0 16px;}
h3{font-size:18px; font-weight:500; margin:28px 0 12px;}
p{margin:0 0 1.2em;}
a{color:var(--green); text-decoration:underline; text-underline-offset:2px;}
a:hover{color:var(--green-dark);}

/* ヘッダー／フッター */
.site-header{background:var(--surface); border-bottom:1px solid var(--border);}
.site-header .wrap{display:flex; align-items:center; gap:10px; height:60px;}
.site-logo{font-family:var(--font-head); font-weight:700; font-size:20px;
  color:var(--green); text-decoration:none;}
.site-footer{margin-top:60px; background:#F2EBDD; border-top:1px solid var(--border);
  font-size:14px; color:var(--ink-soft);}
.site-footer .wrap{padding-top:26px; padding-bottom:26px;}
.site-footer a{color:var(--ink-soft);}
.site-footer nav{display:flex; gap:18px; flex-wrap:wrap; margin-bottom:10px;}

/* 記事本体 */
.article{background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:28px 22px; margin:24px 0;}
.article .lead{color:var(--ink-soft); font-size:16px;}

/* 会話（吹き出し・チャット型） */
.talk{display:flex; gap:10px; margin:18px 0; align-items:flex-start;}
.talk.reader{flex-direction:row-reverse;}
.talk-icon{flex-shrink:0; width:48px; height:48px; border-radius:50%;
  background-size:cover; background-position:center;
  display:flex; align-items:center; justify-content:center;
  color:#EAF1EB; font-family:var(--font-head); font-size:15px;}
.talk.expert .talk-icon{background-color:var(--green);}
.talk.reader .talk-icon{background-color:var(--tan); color:#fff;}
.talk-bubble{border-radius:14px; padding:11px 15px; font-size:15.5px; line-height:1.75;
  max-width:84%;}
.talk.expert .talk-bubble{background:var(--green-bubble);}
.talk.reader .talk-bubble{background:var(--tan-bubble);}
.talk-name{display:block; font-size:12px; margin-bottom:3px;}
.talk.expert .talk-name{color:var(--green);}
.talk.reader .talk-name{color:var(--brown);}

/* 著者バッジ（冒頭） */
.author-badge{background:var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:14px 16px; display:flex; align-items:center; gap:12px;
  margin:18px 0;}
.author-badge .ab-photo{flex-shrink:0; width:52px; height:52px; border-radius:50%;
  background:var(--green) center/cover; }
.author-badge .ab-role{font-size:13px; color:var(--green); line-height:1.5;}
.author-badge .ab-label{font-size:12px; color:var(--brown);}
.author-badge .ab-name{font-size:16px; color:var(--ink);}

/* 著者カード（末尾） */
.author-card{background:var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:20px 18px; margin:40px 0 10px;}
.author-card .ac-head{display:flex; gap:14px; align-items:flex-start; margin-bottom:12px;}
.author-card .ac-photo{flex-shrink:0; width:72px; height:72px; border-radius:50%;
  background:var(--green) center/cover;}
.author-card .ac-name{font-size:18px; color:var(--ink); margin:4px 0 3px;}
.author-card .ac-role{font-size:13px; color:var(--green); line-height:1.6;}
.author-card .ac-bio{font-size:14px; line-height:1.8; color:#3A352D;
  border-top:1px solid #ECE4D4; padding-top:12px;}

/* ボタン／CTA */
.btn{display:inline-block; background:var(--green); color:#fff !important;
  text-decoration:none; border-radius:10px; padding:12px 22px; font-weight:500;
  font-family:var(--font-head);}
.btn:hover{background:var(--green-dark); color:#fff;}

/* 医療免責など注意書き */
.notice{background:#FBF2EC; border:1px solid #EAD3C4; border-radius:10px;
  padding:14px 16px; font-size:14px; color:#6A4B38; margin:24px 0;}

/* 目次 */
.toc{background:#F4EEE2; border:1px solid var(--border); border-radius:12px;
  padding:16px 18px; margin:24px 0;}
.toc-title{font-family:var(--font-head); font-weight:700; color:var(--green); margin-bottom:8px;}
.toc ol{margin:0; padding-left:1.2em;}
.toc a{color:var(--ink);}

/* トップ：記事リスト */
.card-list{display:grid; grid-template-columns:1fr; gap:16px; margin:24px 0;}
.post-card{background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:18px 18px; text-decoration:none; color:var(--ink); display:block;}
.post-card:hover{border-color:var(--green);}
.post-card h3{margin:0 0 6px; color:var(--ink);}
.post-card p{margin:0; font-size:14px; color:var(--ink-soft);}

/* スマホ */
@media(max-width:600px){
  body{font-size:16px;}
  .talk-icon{width:42px; height:42px;}
  .talk-bubble{max-width:80%; font-size:15px;}
  .article{padding:22px 16px;}
  h1{font-size:22px;} h2{font-size:19px;}
}