@charset "utf-8";
/* 三ノ輪歯科コラム｜ブランドカラー：緑#6C9B77 / オレンジ#DB8A22 / 茶#5C492D / 生成り#F7F5F4 */

:root{
  --green:#6FB00C; --green-d:#548209; --green-l:#C6E39A;
  --orange:#E38A2C; --brown:#3B4022; --cream:#F8FBF1;
  --line:#E2E8D4; --gray:#75786A; --ink:#2A2D20; --white:#fff;
  --cat-F:#6FB00C; --cat-S:#2C7CC0; --cat-D:#C0824A; --cat-P:#C0574A; --cat-I:#3F7F6B; --cat-K:#8A6BA8; --cat-E:#5C7A8A;
  --w:1080px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); background:var(--cream);
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic",sans-serif;
  font-size:17px; line-height:1.95; -webkit-text-size-adjust:100%;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--green-d)}
a:hover{opacity:.8}

/* ── ヘッダー ── */
.site-head{background:var(--white); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50}
.site-head .inner{max-width:var(--w); margin:0 auto; padding:14px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px 24px; flex-wrap:wrap}
.site-head .logo{font-weight:700; font-size:18px; color:var(--brown); text-decoration:none; letter-spacing:.02em}
.site-head .logo span{color:var(--green); font-size:13px; display:block; font-weight:500; letter-spacing:.08em}
.site-head .head-right{display:flex; align-items:center; gap:18px; margin-left:auto; flex-wrap:nowrap; justify-content:flex-end}
.site-head nav{display:flex; gap:15px; font-size:13.5px; flex-wrap:wrap}
.site-head nav a{color:var(--brown); text-decoration:none}
.site-head .tel{background:var(--green); color:#fff; padding:8px 16px; border-radius:999px; font-size:14px; font-weight:700; text-decoration:none; white-space:nowrap}

/* ── レイアウト ── */
main{max-width:var(--w); margin:0 auto; padding:0 20px 80px}
.breadcrumb{font-size:13px; color:var(--gray); padding:18px 0; word-break:break-all}
.breadcrumb a{color:var(--gray)}

/* ── 記事 ── */
article h1{font-size:clamp(24px,4.2vw,34px); line-height:1.5; margin:.2em 0 .6em; color:var(--brown); letter-spacing:.01em}
.meta{font-size:13px; color:var(--gray); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:12px 0; margin-bottom:24px}
.meta b{color:var(--brown); font-weight:700}
.hero-img{border-radius:10px; overflow:hidden; margin-bottom:32px; background:#e9e6e1}

.lead{font-size:17px; background:var(--white); border-left:5px solid var(--green); padding:20px 24px; border-radius:0 8px 8px 0; margin-bottom:32px}

.summary{background:var(--white); border:1px solid var(--line); border-radius:10px; padding:24px 28px; margin:0 0 36px}
.summary h2{font-size:16px; margin:0 0 12px; color:var(--green-d); letter-spacing:.06em; border:0; padding:0}
.summary ul{margin:0; padding-left:1.2em}
.summary li{margin-bottom:8px}
.summary b{color:var(--brown)}

.toc{background:#fff; border:1px solid var(--line); border-radius:10px; padding:22px 28px; margin:0 0 44px; font-size:15px}
.toc h2{font-size:15px; margin:0 0 10px; color:var(--brown); border:0; padding:0; letter-spacing:.06em}
.toc ol{margin:0; padding-left:1.4em}
.toc li{margin-bottom:6px}
.toc a{color:var(--ink); text-decoration:none}
.toc a:hover{text-decoration:underline}

article h2{font-size:clamp(20px,3vw,25px); margin:56px 0 20px; padding:0 0 12px; border-bottom:3px solid var(--green-l); color:var(--brown); line-height:1.5; scroll-margin-top:80px}
article h3{font-size:clamp(17px,2.4vw,20px); margin:36px 0 14px; color:var(--green-d); line-height:1.6}
article p{margin:0 0 1.5em}
article ul,article ol{margin:0 0 1.6em; padding-left:1.5em}
article li{margin-bottom:.5em}

/* ── 表 ── */
.tw{overflow-x:auto; margin:0 0 2em; -webkit-overflow-scrolling:touch}
table{border-collapse:collapse; width:100%; min-width:520px; background:#fff; font-size:15px}
th,td{border:1px solid var(--line); padding:12px 14px; text-align:left; vertical-align:top}
thead th{background:var(--green); color:#fff; font-weight:700; white-space:nowrap}
tbody th{background:#F2F5F2; font-weight:700; white-space:nowrap}
td.num{text-align:right; white-space:nowrap}

/* ── 注意ボックス ── */
.note{background:#FDF6E9; border:1px solid #EBD9B4; border-radius:8px; padding:18px 22px; margin:0 0 2em; font-size:15.5px}
.note b{color:#9A6A12}
.risk{background:#FBF1EF; border:1px solid #E8CCC6; border-radius:8px; padding:18px 22px; margin:0 0 2em; font-size:15.5px}
.risk h3{margin:0 0 10px; color:#A2493A; font-size:16px}
.risk ul{margin:0; padding-left:1.3em}
.risk h4{margin:14px 0 6px; font-size:15px; color:#A2493A}
.risk h4:first-of-type{margin-top:0}
.risk p{margin:0 0 12px}
.risk p:last-child{margin-bottom:0}

/* ── FAQ ── */
.faq{margin:56px 0 0}
.faq h2{margin-top:0}
.faq dl{margin:0}
.faq dt{font-weight:700; color:var(--brown); background:#fff; border:1px solid var(--line); border-radius:8px 8px 0 0; padding:14px 18px; margin-top:16px}
.faq dt::before{content:"Q. "; color:var(--green)}
.faq dd{margin:0; background:#fff; border:1px solid var(--line); border-top:0; border-radius:0 0 8px 8px; padding:14px 18px}
.faq dd::before{content:"A. "; color:var(--orange); font-weight:700}

/* ── 政府統計ブロック ── */
.statcite{
  background:#fff; border:1px solid var(--line); border-top:4px solid var(--green);
  border-radius:4px 4px 10px 10px; padding:24px 28px; margin:0 0 2em;
}
.statcite h3{
  margin:0 0 14px; color:var(--brown); font-size:clamp(16px,2.2vw,19px); line-height:1.6;
  padding-left:30px; position:relative;
}
.statcite h3::before{
  content:"";
  position:absolute; left:0; top:.32em; width:20px; height:14px;
  background:
    linear-gradient(var(--green),var(--green)) 0 100%/4px 6px no-repeat,
    linear-gradient(var(--green),var(--green)) 8px 100%/4px 11px no-repeat,
    linear-gradient(var(--orange),var(--orange)) 16px 100%/4px 14px no-repeat;
}
.statcite p{margin:0 0 1.2em; font-size:15.5px}
.statcite .tw{margin-bottom:1.4em}
.statcite table{min-width:420px}
.statcite .src{
  font-size:12.5px; color:var(--gray); margin:0 0 1.4em;
  padding-left:12px; border-left:3px solid var(--line);
}
.statcite .src:last-child{margin-bottom:0}

/* ── 出典 ── */
.sources{margin:48px 0 0; font-size:14px; color:var(--gray); background:#fff; border:1px solid var(--line); border-radius:10px; padding:20px 24px}
.sources h2{font-size:15px; margin:0 0 10px; border:0; padding:0; color:var(--brown)}
.sources ul{margin:0; padding-left:1.3em}

/* ── 監修者ボックス（記事末尾） ── */
.reviewer{display:flex; gap:18px; align-items:center; margin:32px 0 0;
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:20px 24px}
.rv-photo{width:88px; height:88px; border-radius:50%; object-fit:cover; flex-shrink:0;
  background:#e9e6e1; border:3px solid var(--green-l)}
.rv-body{min-width:0}
.rv-role{margin:0 0 4px; font-size:12px; font-weight:700; letter-spacing:.06em; color:var(--green-d)}
.rv-name{margin:0; font-size:18px; font-weight:700; color:var(--brown); line-height:1.4}
.rv-read{font-size:12.5px; color:var(--gray); font-weight:500; margin-left:8px}
.rv-title{display:block; font-size:12.5px; color:var(--gray); font-weight:500; margin-top:2px}
.rv-creds{margin:8px 0 0; font-size:13px; color:var(--ink); line-height:1.6}
.rv-more{margin:8px 0 0; font-size:13px}

/* ── 監修者プロフィール（operator.html） ── */
.director-card{display:flex; gap:22px; align-items:flex-start; margin:8px 0 4px;
  background:var(--cream); border:1px solid var(--line); border-radius:12px; padding:22px 24px}
.dc-photo{width:120px; height:120px; border-radius:12px; object-fit:cover; flex-shrink:0;
  background:#e9e6e1; border:1px solid var(--line)}
.dc-body{min-width:0}
.dc-name{margin:0 0 6px; font-size:21px; font-weight:700; color:var(--brown); line-height:1.4}
.dc-read{font-size:13px; color:var(--gray); font-weight:500; margin-left:10px}
.dc-title{display:block; font-size:14px; color:var(--green-d); font-weight:700; margin-top:4px}
.dc-school{margin:0 0 8px; font-size:14px; color:var(--ink)}
.dc-bio{margin:0; font-size:14.5px; color:var(--ink); line-height:1.8}
.dc-list{margin:0 0 4px; padding-left:1.3em; line-height:1.9}
@media(max-width:560px){
  .reviewer{flex-direction:column; align-items:flex-start; gap:12px; text-align:left}
  .director-card{flex-direction:column; align-items:center; text-align:center}
  .dc-body{text-align:center}
}

/* ── 院内リンク（CTA） ── */
.clinic-cta{margin:56px 0 0; background:#fff; border:2px solid var(--green); border-radius:12px; overflow:hidden}
.clinic-cta .hd{background:var(--green); color:#fff; padding:14px 24px; font-weight:700; font-size:17px}
.clinic-cta .bd{padding:24px 28px}
.clinic-cta dl{display:grid; grid-template-columns:auto 1fr; gap:8px 20px; margin:0 0 20px; font-size:15px}
.clinic-cta dt{font-weight:700; color:var(--brown); white-space:nowrap}
.clinic-cta dd{margin:0}
.btns{display:flex; gap:12px; flex-wrap:wrap}
.btns a{display:inline-block; padding:12px 24px; border-radius:999px; text-decoration:none; font-weight:700; font-size:15px}
.btns .p{background:var(--orange); color:#fff}
.btns .s{background:#fff; color:var(--green-d); border:2px solid var(--green)}

/* ── 関連記事 ── */
.related{margin:56px 0 0}
.related h2{margin-top:0}
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; list-style:none; margin:0; padding:0}
.card{background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden; margin:0}
.card a{text-decoration:none; color:inherit; display:block; height:100%}
.card img{width:100%; aspect-ratio:16/9; object-fit:cover; background:#e9e6e1}
.card .b{padding:16px 18px}
.card .chip{display:inline-block; font-size:11px; color:#fff; padding:3px 10px; border-radius:999px; margin-bottom:8px; letter-spacing:.04em}
.card h3{font-size:16px; margin:0; line-height:1.6; color:var(--brown)}
.chip-F{background:var(--cat-F)} .chip-S{background:var(--cat-S)} .chip-D{background:var(--cat-D)} .chip-P{background:var(--cat-P)} .chip-I{background:var(--cat-I)} .chip-K{background:var(--cat-K)} .chip-E{background:var(--cat-E)}

/* ── index ヒーロー（共通）── */
.hero{background:var(--white); border-bottom:1px solid var(--line); margin-bottom:8px}
.hero .inner{max-width:var(--w); margin:0 auto; padding:56px 20px 52px}
.hero .eyebrow{
  font-size:13px; letter-spacing:.1em; color:var(--green-d); margin:0 0 14px; font-weight:700;
  display:inline-block; border-bottom:2px solid var(--green-l); padding-bottom:6px;
}
.hero h1{
  font-size:clamp(24px,3.1vw,34px); color:var(--brown); margin:0 0 18px;
  line-height:1.5; letter-spacing:.005em; text-wrap:balance;
  word-break:keep-all; overflow-wrap:anywhere;
}
.hero .hero-lead{color:var(--gray); font-size:16px; margin:0; line-height:2}

/* hero=montage：左テキスト＋右3枚モンタージュ */
.hero-montage .inner{display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:40px; align-items:center}
.hero-montage .hero-fig{margin:0}
.hero-montage .hero-fig img{width:100%; border-radius:14px; box-shadow:0 12px 32px rgba(0,0,0,.14)}

/* hero=cover：全面背景写真＋文字オーバーレイ */
.hero-cover{position:relative; border-bottom:0; min-height:clamp(360px,42vw,540px); display:flex; align-items:center; overflow:hidden}
.hero-cover .hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero-cover::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.42) 45%, rgba(0,0,0,.08) 100%)}
.hero-cover-inner{position:relative; z-index:1; max-width:var(--w); width:100%; margin:0 auto; padding:56px 20px}
.hero-cover .hero-txt{max-width:620px}
.hero-cover .eyebrow{color:#fff; border-bottom-color:rgba(255,255,255,.6)}
.hero-cover h1{color:#fff}
.hero-cover .hero-lead{color:rgba(255,255,255,.92)}

/* hero=split：上に横長写真1枚＋下に中央寄せテキスト */
.hero-split .inner{display:flex; flex-direction:column; padding-top:0}
.hero-split .hero-wide{order:0; margin:0 0 32px}
.hero-split .hero-wide img{width:100%; height:clamp(240px,30vw,400px); object-fit:cover; border-radius:16px; box-shadow:0 12px 32px rgba(0,0,0,.14)}
.hero-split .hero-txt{order:1; max-width:760px; margin:0 auto; text-align:center}
.hero-split .eyebrow{border-bottom:0; padding-bottom:0}
.hero-split .hero-lead{max-width:640px; margin:0 auto}

/* ── カテゴリ見出し（バリアント）── */
.cat-sec{margin:56px 0 0}
.cat-sec h2{font-size:22px; color:var(--brown); margin:0 0 8px; scroll-margin-top:80px}
.cat-sec>p{color:var(--gray); font-size:15px; margin:0 0 24px}
/* heading=underline（既定）*/
.thm-head-underline .cat-sec h2{border-bottom:3px solid var(--green-l); padding-bottom:12px}
/* heading=leftbar */
.thm-head-leftbar .cat-sec h2{padding:2px 0 2px 16px; border-left:6px solid var(--green); border-bottom:0}
/* heading=chip */
.thm-head-chip .cat-sec h2{position:relative; padding-top:14px; border-bottom:0}
.thm-head-chip .cat-sec h2::before{content:""; display:block; width:44px; height:5px; border-radius:3px; background:var(--green); margin-bottom:10px}
.disclosure{background:#fff; border:1px solid var(--line); border-radius:10px; padding:24px 28px; margin:48px 0 0; font-size:15px}
.disclosure h2{font-size:17px; margin:0 0 12px; color:var(--brown); border:0; padding:0}

/* ── card=alt：カードを画像左・テキスト右の横並びに（1カラム）── */
.thm-card-alt .cards{grid-template-columns:1fr; gap:16px; max-width:860px}
.thm-card-alt .card a{display:grid; grid-template-columns:minmax(0,240px) 1fr; align-items:stretch; height:auto}
.thm-card-alt .card img{aspect-ratio:auto; height:100%; min-height:150px}
.thm-card-alt .card .b{padding:20px 22px; display:flex; flex-direction:column; justify-content:center}
.thm-card-alt .card h3{font-size:17px}
@media(max-width:640px){
  .thm-card-alt .card a{grid-template-columns:1fr}
  .thm-card-alt .card img{aspect-ratio:16/9; min-height:0}
}

/* ── shape：角の性格 ── */
.thm-shape-sharp .card,.thm-shape-sharp .summary,.thm-shape-sharp .toc,.thm-shape-sharp .note,
.thm-shape-sharp .risk,.thm-shape-sharp .sources,.thm-shape-sharp .disclosure,.thm-shape-sharp table,
.thm-shape-sharp .hero-montage .hero-fig img,.thm-shape-sharp .hero-split .hero-wide img{border-radius:2px}
.thm-shape-sharp .clinic-cta{border-radius:2px}
.thm-shape-soft .card,.thm-shape-soft .summary,.thm-shape-soft .toc,.thm-shape-soft .note,
.thm-shape-soft .risk,.thm-shape-soft .sources,.thm-shape-soft .disclosure,
.thm-shape-soft .hero-montage .hero-fig img,.thm-shape-soft .hero-split .hero-wide img{border-radius:22px}
.thm-shape-soft .clinic-cta{border-radius:22px}
.thm-shape-soft .card img{border-radius:0}

/* ── tint：カテゴリセクションの背景に薄く色を敷く ── */
.thm-tint .cat-sec{padding:32px 28px; border-radius:16px; background:color-mix(in srgb, var(--green) 6%, #fff)}
.thm-tint .cat-sec .card{background:#fff}
.thm-shape-sharp.thm-tint .cat-sec{border-radius:2px}
@media(max-width:640px){ .thm-tint .cat-sec{padding:24px 16px} }

/* ── フッター ── */
.site-foot{background:var(--brown); color:#EDE8E0; padding:44px 20px 32px; font-size:14px; line-height:1.9}
.site-foot .inner{max-width:var(--w); margin:0 auto}
.site-foot h2{font-size:16px; margin:0 0 14px; color:#fff; border:0; padding:0}
.site-foot dl{display:grid; grid-template-columns:auto 1fr; gap:6px 20px; margin:0 0 20px; max-width:760px}
.site-foot dt{white-space:nowrap; color:var(--green-l)}
.site-foot dd{margin:0}
.site-foot a{color:#fff}
.site-foot .cr{border-top:1px solid rgba(255,255,255,.2); padding-top:16px; margin-top:20px; font-size:12.5px; color:#C9C0B2}

@media(max-width:900px){
  .hero-montage .inner{grid-template-columns:1fr; gap:32px; padding:40px 20px 44px}
  .hero-montage .hero-fig{order:-1}
  .hero-cover{min-height:0}
  .hero-cover .hero-bg{position:relative; height:auto; aspect-ratio:3/2}
  .hero-cover::after{background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.55))}
  .hero-cover-inner{position:absolute; inset:0; display:flex; align-items:flex-end; padding:24px 20px 28px}
}
/* 中間幅：ナビが1行に収まりきらない場合、ロゴ下に全幅の2段目として整列させる（浮きを防ぐ）*/
@media(max-width:1040px) and (min-width:641px){
  .site-head .inner{flex-wrap:wrap; row-gap:12px}
  .site-head .logo{flex:1 1 auto}
  .site-head .head-right{width:100%; margin-left:0; justify-content:center;
    padding-top:12px; border-top:1px solid var(--line)}
}
@media(max-width:640px){
  body{font-size:16px; line-height:1.9}
  .site-head nav{display:none}
  /* モバイル：長い医院名でも1行に収め、電話は右端。追従の電話ボタンがあるので header の電話は控えめに */
  .site-head .inner{flex-wrap:nowrap; gap:10px}
  .site-head .logo{font-size:16px; min-width:0}
  .site-head .logo span{font-size:11px; letter-spacing:.04em}
  .site-head .tel{margin-left:auto; flex-shrink:0; padding:7px 12px; font-size:13px}
    .hero h1 br{display:none}
  .lead,.summary,.toc,.clinic-cta .bd{padding-left:18px; padding-right:18px}
  .clinic-cta dl{grid-template-columns:1fr; gap:2px 0}
  .clinic-cta dt{margin-top:8px}
  .site-foot dl{grid-template-columns:1fr; gap:2px 0}
  .site-foot dt{margin-top:8px}
}

/* ── 追従の電話ボタン（モバイル）── */
.sticky-tel{
  display:none; position:fixed; left:12px; right:12px; bottom:12px; z-index:100;
  background:var(--orange); color:#fff; text-align:center; text-decoration:none;
  padding:15px 12px; border-radius:999px; font-weight:700; font-size:15px;
  box-shadow:0 6px 20px rgba(92,73,45,.3);
}
@media(max-width:768px){
  .sticky-tel{display:block}
  body{padding-bottom:76px}
}

/* ── 緊急性の高い記事の冒頭CTA ── */
.urgent-cta{
  background:#FDF6E9; border:2px solid var(--orange); border-radius:10px;
  padding:16px 20px; margin:0 0 28px; font-size:16px; font-weight:700; line-height:1.8;
}
.urgent-cta a{color:#9A6A12; text-decoration:underline}