/* 蕨駅東口歯科クリニック おの 共通スタイル */
:root{
  --cream:#FAF6EF;
  --cream2:#F3EBDC;
  --cream3:#EDE2CC;
  --brown-900:#3B3022;
  --brown-700:#5C4A33;
  --brown-500:#8B6F47;
  --brown-300:#B49B76;
  --caramel:#B9834B;
  --terracotta:#C2643F;
  --line:#E4D8C3;
  --white:#FFFFFF;
  --serif:"Hiragino Mincho ProN","Yu Mincho","BIZ UDMincho Medium",serif;
  --sans:"Hiragino Kaku Gothic ProN","Yu Gothic Medium","Yu Gothic","Meiryo",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:84px;}
body{
  font-family:var(--sans);
  color:var(--brown-900);
  background:var(--cream);
  line-height:1.9;
  font-size:16px;
  letter-spacing:.03em;
}
img,svg{max-width:100%;vertical-align:middle;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
.inner{max-width:1080px;margin:0 auto;padding:0 20px;}

/* ─── ヘッダー ─── */
.header{
  position:sticky;top:0;z-index:100;
  background:rgba(250,246,239,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.header-in{
  max-width:1200px;margin:0 auto;padding:10px 20px;
  display:flex;align-items:center;gap:18px;
}
.brand{display:flex;align-items:center;gap:10px;min-width:0;}
.brand-mark{width:40px;height:40px;flex:none;}
.brand-txt{line-height:1.35;}
.brand-name{font-family:var(--serif);font-weight:700;font-size:17px;color:var(--brown-900);display:block;white-space:nowrap;}
.brand-sub{font-size:10.5px;color:var(--brown-500);letter-spacing:.06em;display:block;}
.gnav{margin-left:auto;}
.gnav ul{display:flex;gap:16px;font-size:13.5px;font-weight:600;}
.gnav a{padding:6px 2px;border-bottom:2px solid transparent;transition:.2s;white-space:nowrap;}
.gnav a:hover{color:var(--brown-500);border-bottom-color:var(--caramel);}
.header-cta{display:flex;gap:8px;flex:none;}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:999px;font-weight:700;transition:.25s;cursor:pointer;
  line-height:1.4;text-align:center;
}
.btn-tel{
  background:var(--white);color:var(--brown-700);
  border:2px solid var(--brown-500);
  padding:8px 18px;font-size:14px;
}
.btn-tel:hover{background:var(--cream2);}
.btn-tel .num{font-size:16px;font-weight:800;letter-spacing:.02em;}
.btn-web{
  background:var(--brown-500);color:#fff;
  border:2px solid var(--brown-500);
  padding:8px 22px;font-size:14px;
  box-shadow:0 4px 14px rgba(139,111,71,.35);
}
.btn-web:hover{background:var(--brown-700);border-color:var(--brown-700);transform:translateY(-1px);}
.menu-btn{display:none;}

/* ─── お知らせリボン ─── */
.ribbon{
  background:linear-gradient(90deg,var(--brown-700),var(--brown-500));
  color:#fff;text-align:center;font-size:13px;padding:7px 14px;letter-spacing:.06em;
}
.ribbon strong{color:#F7DFAE;}

/* ─── ヒーロー ─── */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(620px 420px at 88% -10%,#F1E3C8 0%,transparent 60%),
    radial-gradient(520px 420px at -8% 110%,#EFE4CF 0%,transparent 55%),
    var(--cream);
  border-bottom:1px solid var(--line);
}
.hero-in{
  max-width:1200px;margin:0 auto;padding:56px 20px 46px;
  display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:center;
}
.hero-loc{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13.5px;font-weight:700;color:var(--brown-700);
  background:var(--white);border:1px solid var(--line);border-radius:999px;
  padding:6px 16px;margin-bottom:18px;
  box-shadow:0 2px 8px rgba(92,74,51,.08);
}
.hero h1{
  font-family:var(--serif);font-size:38px;line-height:1.5;
  color:var(--brown-900);font-weight:700;margin-bottom:10px;
}
.hero h1 .accent{color:var(--caramel);}
.hero-name{
  font-family:var(--serif);font-size:22px;color:var(--brown-700);
  margin-bottom:18px;font-weight:700;
}
.hero-lead{font-size:15.5px;color:var(--brown-700);margin-bottom:22px;max-width:34em;}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px;}
.badge{
  background:var(--white);border:1.5px solid var(--brown-300);
  color:var(--brown-700);border-radius:12px;
  padding:9px 14px;font-size:13.5px;font-weight:700;
  display:flex;align-items:center;gap:7px;
  box-shadow:0 2px 6px rgba(92,74,51,.06);
}
.badge em{font-style:normal;color:var(--terracotta);}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:stretch;}
.cta-tel{
  background:var(--white);border:2px solid var(--brown-500);border-radius:16px;
  padding:12px 22px;text-align:center;line-height:1.5;
}
.cta-tel .lbl{font-size:12px;color:var(--brown-500);font-weight:700;display:block;}
.cta-tel .num{font-size:25px;font-weight:800;color:var(--brown-900);letter-spacing:.02em;display:flex;align-items:center;gap:8px;}
.cta-tel .time{font-size:11.5px;color:var(--brown-500);display:block;}
.cta-web{
  background:linear-gradient(135deg,var(--caramel),var(--brown-500));
  color:#fff;border-radius:16px;padding:12px 30px;
  display:flex;flex-direction:column;justify-content:center;text-align:center;
  font-weight:800;font-size:17px;box-shadow:0 6px 18px rgba(185,131,75,.4);
  transition:.25s;
}
.cta-web:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(185,131,75,.5);}
.cta-web small{font-size:11.5px;font-weight:600;opacity:.92;}
.hero-note{font-size:12px;color:var(--brown-500);margin-top:12px;}
.hero-visual{position:relative;text-align:center;}

/* ─── セクション共通 ─── */
section{padding:72px 0;}
.sec-head{text-align:center;margin-bottom:44px;}
.sec-en{
  font-size:12px;letter-spacing:.28em;color:var(--caramel);
  font-weight:700;text-transform:uppercase;display:block;margin-bottom:6px;
}
.sec-ttl{font-family:var(--serif);font-size:30px;font-weight:700;color:var(--brown-900);line-height:1.5;}
.sec-ttl .u{
  background:linear-gradient(transparent 68%,#F0DFBC 68%);
  padding:0 2px;
}
.sec-lead{max-width:640px;margin:14px auto 0;font-size:14.5px;color:var(--brown-700);}

/* ─── 症状ナビ ─── */
.sec-symptom{background:var(--cream);padding-top:64px;}
.sym-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
}
.sym-card{
  background:var(--white);border:1px solid var(--line);border-radius:16px;
  padding:22px 18px 44px;text-align:center;transition:.25s;position:relative;
  box-shadow:0 3px 10px rgba(92,74,51,.05);
  display:block;
}
.sym-card:hover{transform:translateY(-4px);box-shadow:0 10px 22px rgba(92,74,51,.13);border-color:var(--brown-300);}
.sym-ico{
  width:58px;height:58px;margin:0 auto 10px;border-radius:50%;
  background:var(--cream2);display:flex;align-items:center;justify-content:center;
}
.sym-t{display:block;font-weight:800;font-size:16px;color:var(--brown-900);margin-bottom:4px;}
.sym-d{display:block;font-size:12.5px;color:var(--brown-500);line-height:1.6;}
.sym-arrow{
  position:absolute;right:14px;bottom:12px;font-size:12px;color:var(--caramel);font-weight:700;
}

/* ─── 6つの理由 ─── */
.sec-reason{background:var(--cream2);}
.reason-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.reason-card{
  background:var(--white);border-radius:18px;padding:30px 24px 26px;
  border:1px solid var(--line);position:relative;
  box-shadow:0 4px 14px rgba(92,74,51,.06);
}
.reason-num{
  font-family:var(--serif);font-size:34px;color:var(--cream3);
  font-weight:700;position:absolute;top:12px;right:18px;line-height:1;
}
.reason-ico{width:52px;height:52px;margin-bottom:12px;}
.reason-t{font-size:17px;font-weight:800;color:var(--brown-900);line-height:1.6;margin-bottom:8px;}
.reason-t .hl{color:var(--terracotta);}
.reason-d{font-size:13.5px;color:var(--brown-700);line-height:1.85;}

/* ─── 院長あいさつ ─── */
.sec-doctor{background:var(--cream);}
.doc-wrap{
  display:grid;grid-template-columns:.9fr 1.4fr;gap:40px;align-items:start;
}
.doc-photo{
  background:var(--white);border:1px solid var(--line);border-radius:20px;
  padding:18px;text-align:center;box-shadow:0 6px 18px rgba(92,74,51,.08);
}
.photo-placeholder{
  background:linear-gradient(160deg,var(--cream2),var(--cream3));
  border-radius:14px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;
  color:var(--brown-500);font-size:12.5px;font-weight:700;
  min-height:300px;
}
.doc-name-box{margin-top:14px;line-height:1.6;}
.doc-role{font-size:12px;color:var(--brown-500);font-weight:700;letter-spacing:.1em;}
.doc-name{font-family:var(--serif);font-size:24px;font-weight:700;color:var(--brown-900);}
.doc-name small{font-size:13px;color:var(--brown-500);margin-left:8px;}
.doc-msg h3{
  font-family:var(--serif);font-size:22px;color:var(--brown-900);
  line-height:1.8;margin-bottom:18px;font-weight:700;
}
.doc-msg p{font-size:14.5px;color:var(--brown-700);margin-bottom:14px;text-align:justify;}
.doc-policy{
  margin-top:22px;background:var(--white);border:1px solid var(--line);
  border-radius:16px;padding:20px 24px;
}
.doc-policy h4{
  font-size:14px;color:var(--caramel);font-weight:800;
  letter-spacing:.12em;margin-bottom:10px;
}
.doc-policy li{
  font-size:14px;color:var(--brown-900);font-weight:600;
  padding:7px 0 7px 26px;position:relative;border-bottom:1px dashed var(--line);
}
.doc-policy li:last-child{border-bottom:none;}
.doc-policy li::before{
  content:"";position:absolute;left:2px;top:15px;
  width:14px;height:14px;border-radius:50%;
  background:var(--caramel);
  box-shadow:inset 0 0 0 3.5px var(--white);
  border:1px solid var(--caramel);
}

/* ─── 診療案内 ─── */
.sec-menu{background:var(--cream2);}
.menu-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.menu-card{
  background:var(--white);border:1px solid var(--line);border-radius:14px;
  padding:20px 16px;transition:.25s;
}
.menu-card:hover{border-color:var(--brown-300);box-shadow:0 8px 18px rgba(92,74,51,.1);}
.menu-ico{width:40px;height:40px;margin-bottom:8px;}
.menu-t{font-size:15px;font-weight:800;color:var(--brown-900);margin-bottom:4px;}
.menu-d{font-size:12px;color:var(--brown-500);line-height:1.7;}
.menu-note{
  margin-top:18px;font-size:12.5px;color:var(--brown-500);text-align:center;
}

/* ─── 料金 ─── */
.sec-fee{background:var(--cream);}
.fee-policy{
  max-width:760px;margin:0 auto 30px;background:var(--white);
  border:1px solid var(--line);border-radius:16px;padding:24px 28px;
  font-size:14.5px;color:var(--brown-700);
}
.fee-policy strong{color:var(--terracotta);}
.fee-table{
  width:100%;max-width:760px;margin:0 auto;border-collapse:collapse;
  background:var(--white);border-radius:16px;overflow:hidden;
  box-shadow:0 4px 14px rgba(92,74,51,.07);
  font-size:14px;
}
.fee-table th,.fee-table td{
  padding:13px 18px;border-bottom:1px solid var(--line);text-align:left;
}
.fee-table thead th{
  background:var(--brown-500);color:#fff;font-size:13.5px;letter-spacing:.08em;
}
.fee-table td.price{text-align:right;font-weight:800;color:var(--brown-900);white-space:nowrap;}
.fee-table tr:last-child td{border-bottom:none;}
.fee-note{max-width:760px;margin:12px auto 0;font-size:12px;color:var(--brown-500);}

/* ─── 診療時間・アクセス ─── */
.sec-access{background:var(--cream2);}
.acc-wrap{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start;}
.acc-card{
  background:var(--white);border:1px solid var(--line);border-radius:18px;
  padding:26px 28px;box-shadow:0 4px 14px rgba(92,74,51,.06);
}
.acc-card h3{
  font-family:var(--serif);font-size:19px;color:var(--brown-900);
  margin-bottom:16px;padding-bottom:10px;border-bottom:2px solid var(--cream3);
}
.hours-table{width:100%;border-collapse:collapse;font-size:14px;text-align:center;}
.hours-table th,.hours-table td{
  padding:10px 4px;border:1px solid var(--line);
}
.hours-table thead th{background:var(--cream2);font-size:13px;color:var(--brown-700);}
.hours-table .time-label{background:var(--cream2);font-size:12.5px;font-weight:700;color:var(--brown-700);white-space:nowrap;padding:10px 10px;}
.hours-table .open{color:var(--caramel);font-weight:800;font-size:16px;}
.hours-table .closed{color:#C9BBA4;font-size:15px;}
.hours-note{margin-top:12px;font-size:13px;color:var(--brown-700);}
.hours-note li{padding-left:1.2em;text-indent:-1.2em;margin-bottom:4px;}
.hours-note .strong-thu{
  background:linear-gradient(transparent 65%,#F7E6C4 65%);font-weight:800;
}
.acc-info{font-size:14px;color:var(--brown-700);line-height:2.05;}
.acc-info dt{font-weight:800;color:var(--brown-900);margin-top:10px;}
.acc-info dt:first-child{margin-top:0;}
.map-box{
  margin-top:16px;border-radius:14px;overflow:hidden;border:1px solid var(--line);
}
.map-box iframe{width:100%;height:250px;border:0;display:block;}

/* ─── NEWS ─── */
.sec-news{background:var(--cream);}
.news-list{max-width:760px;margin:0 auto;}
.news-item{
  display:flex;gap:20px;align-items:baseline;
  padding:16px 8px;border-bottom:1px dashed var(--line);font-size:14.5px;
}
.news-date{color:var(--caramel);font-weight:800;font-size:13px;flex:none;letter-spacing:.05em;}
.news-tag{
  flex:none;background:var(--cream3);color:var(--brown-700);
  font-size:11px;font-weight:800;border-radius:6px;padding:2px 10px;
}
/* ─── 採用 ─── */
.sec-recruit{background:var(--cream2);}
.recruit-box{
  max-width:760px;margin:0 auto;background:var(--white);
  border:1px solid var(--line);border-radius:18px;padding:30px 34px;
  text-align:center;
}
.recruit-box p{font-size:14.5px;color:var(--brown-700);margin-bottom:16px;}
.recruit-jobs{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:18px;}
.job-chip{
  background:var(--cream2);border:1px solid var(--brown-300);color:var(--brown-700);
  border-radius:999px;padding:6px 18px;font-size:13px;font-weight:700;
}
.btn-recruit{
  background:var(--white);border:2px solid var(--caramel);color:var(--caramel);
  padding:10px 34px;font-size:14px;
}
.btn-recruit:hover{background:var(--caramel);color:#fff;}

/* ─── FAQ ─── */
.sec-faq{background:var(--cream);}
.faq-list{max-width:760px;margin:0 auto;}
.faq-item{
  background:var(--white);border:1px solid var(--line);border-radius:14px;
  margin-bottom:12px;overflow:hidden;
}
.faq-item summary{
  list-style:none;cursor:pointer;padding:16px 48px 16px 52px;
  font-weight:800;font-size:15px;color:var(--brown-900);position:relative;
  transition:.2s;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::before{
  content:"Q";position:absolute;left:18px;top:14px;
  color:var(--caramel);font-family:var(--serif);font-size:19px;font-weight:700;
}
.faq-item summary::after{
  content:"＋";position:absolute;right:18px;top:15px;color:var(--brown-300);
  font-size:17px;font-weight:400;transition:.25s;
}
.faq-item[open] summary::after{content:"－";color:var(--caramel);}
.faq-item summary:hover{background:var(--cream);}
.faq-a{
  padding:2px 22px 18px 52px;font-size:14px;color:var(--brown-700);position:relative;
}
.faq-a::before{
  content:"A";position:absolute;left:18px;top:0;
  color:var(--terracotta);font-family:var(--serif);font-size:19px;font-weight:700;
}

/* ─── フッター ─── */
.footer{
  background:var(--brown-900);color:#EDE4D4;padding:52px 0 100px;
}
.footer-in{
  max-width:1080px;margin:0 auto;padding:0 20px;
  display:grid;grid-template-columns:1.2fr 1fr;gap:36px;
}
.footer .brand-name{color:#fff;font-size:20px;}
.footer .brand-sub{color:#C7B99F;}
.footer-info{font-size:13.5px;line-height:2.1;color:#D8CCB6;margin-top:12px;}
.footer-nav{display:flex;gap:40px;justify-content:flex-end;}
.footer-nav ul{font-size:13.5px;line-height:2.4;}
.footer-nav a:hover{color:#F2D9A8;}
.copyright{
  text-align:center;font-size:11.5px;color:#A8987C;margin-top:38px;
  grid-column:1 / -1;letter-spacing:.08em;
}

/* ─── スマホ固定バー ─── */
.fixed-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:110;
  display:none;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--line);border-top:1px solid var(--line);
  box-shadow:0 -4px 16px rgba(59,48,34,.16);
}
.fixed-bar a{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 8px;font-weight:800;font-size:15px;
}
.fixed-tel{background:var(--terracotta);color:#fff;}
.fixed-web{background:var(--brown-500);color:#fff;}

/* ─── フェードイン ─── */
.fade{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease;}
.fade.show{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .fade{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}

/* ─── レスポンシブ ─── */
@media (max-width:1120px){
  .gnav{display:none;}
  .header-cta{margin-left:auto;}
  .menu-btn{
    display:block;background:none;border:none;cursor:pointer;
    width:42px;height:42px;position:relative;flex:none;
  }
  .menu-btn span{
    position:absolute;left:9px;right:9px;height:2.5px;background:var(--brown-700);
    border-radius:2px;transition:.3s;
  }
  .menu-btn span:nth-child(1){top:13px;}
  .menu-btn span:nth-child(2){top:20px;}
  .menu-btn span:nth-child(3){top:27px;}
  .menu-btn.open span:nth-child(1){top:20px;transform:rotate(45deg);}
  .menu-btn.open span:nth-child(2){opacity:0;}
  .menu-btn.open span:nth-child(3){top:20px;transform:rotate(-45deg);}
  .gnav.sp-open{
    display:block;position:absolute;top:100%;left:0;right:0;
    background:var(--cream);border-bottom:1px solid var(--line);
    box-shadow:0 14px 24px rgba(59,48,34,.12);
  }
  .gnav.sp-open ul{flex-direction:column;gap:0;padding:8px 0;}
  .gnav.sp-open a{
    display:block;padding:13px 26px;border-bottom:1px dashed var(--line);font-size:15px;
  }
}
@media (max-width:960px){
  .hero-in{grid-template-columns:1fr;padding:40px 20px 36px;}
  .hero-visual{display:none;}
  .hero h1{font-size:30px;}
  .header-cta{display:none;}
  .menu-btn{margin-left:auto;}
  .sym-grid{grid-template-columns:repeat(2,1fr);}
  .reason-grid{grid-template-columns:1fr 1fr;}
  .menu-grid{grid-template-columns:repeat(3,1fr);}
  .doc-wrap{grid-template-columns:1fr;}
  .doc-photo{max-width:420px;margin:0 auto;}
  .acc-wrap{grid-template-columns:1fr;}
  .footer-in{grid-template-columns:1fr;}
  .footer-nav{justify-content:flex-start;}
  .fixed-bar{display:grid;}
}
@media (max-width:560px){
  body{font-size:15px;}
  .hero h1{font-size:25.5px;}
  .hero-name{font-size:18px;}
  .sec-ttl{font-size:24px;}
  section{padding:54px 0;}
  .sym-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
  .sym-card{padding:16px 10px 40px;}
  .reason-grid{grid-template-columns:1fr;}
  .menu-grid{grid-template-columns:1fr 1fr;}
  .hero-cta{flex-direction:column;}
  .cta-web{padding:16px 30px;}
  .fee-table th,.fee-table td{padding:11px 12px;}
  .brand-name{font-size:14.5px;}
  .brand-sub{display:none;}
}

/* ─── 下層ページ（診療案内 個別ページ）─── */
.page-hero{background:linear-gradient(180deg,var(--cream2),var(--cream));border-bottom:1px solid var(--line);padding:32px 0 28px;}
.breadcrumb{font-size:12px;color:var(--brown-500);margin-bottom:14px;}
.breadcrumb a{text-decoration:underline;text-underline-offset:3px;}
.breadcrumb .sep{margin:0 7px;color:var(--brown-300);}
.page-hero h1{font-family:var(--serif);font-size:29px;line-height:1.55;color:var(--brown-900);margin-bottom:10px;}
.page-hero h1 .accent{color:var(--caramel);}
.page-lead{font-size:14.5px;color:var(--brown-700);max-width:46em;}
.article{max-width:840px;margin:0 auto;padding:14px 20px 30px;}
.article h2{font-family:var(--serif);font-size:22.5px;color:var(--brown-900);border-left:5px solid var(--caramel);padding:3px 0 3px 14px;margin:34px 0 14px;line-height:1.5;}
.article h3{font-size:16.5px;font-weight:800;color:var(--brown-700);margin:22px 0 8px;padding-bottom:6px;border-bottom:2px dotted var(--cream3);}
.article p{font-size:14.5px;color:var(--brown-900);margin-bottom:12px;text-align:justify;}
.article ul.disc{margin:0 0 14px 1.5em;list-style:disc;}
.article ul.disc li{font-size:14px;color:var(--brown-900);margin-bottom:5px;}
.tbl{width:100%;border-collapse:collapse;background:var(--white);border-radius:14px;overflow:hidden;box-shadow:0 3px 12px rgba(92,74,51,.07);font-size:13.5px;margin:14px 0 18px;}
.tbl th,.tbl td{padding:11px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;}
.tbl thead th{background:var(--brown-500);color:#fff;font-size:13px;letter-spacing:.06em;}
.tbl tr:last-child td{border-bottom:none;}
.tbl td.em{font-weight:800;white-space:nowrap;color:var(--brown-700);}
.check-box{background:var(--white);border:1.5px solid var(--brown-300);border-radius:16px;padding:16px 22px;margin:14px 0 18px;}
.check-box li{font-size:14px;color:var(--brown-900);padding:7px 0 7px 28px;position:relative;border-bottom:1px dashed var(--line);}
.check-box li:last-child{border-bottom:none;}
.check-box li::before{content:"✓";position:absolute;left:4px;top:7px;color:var(--terracotta);font-weight:800;}
.flow{counter-reset:step;margin:14px 0 18px;list-style:none;}
.flow li{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:14px 18px 14px 60px;margin-bottom:10px;position:relative;font-size:13.5px;color:var(--brown-700);}
.flow li::before{counter-increment:step;content:counter(step,decimal-leading-zero);position:absolute;left:16px;top:13px;font-family:var(--serif);font-size:21px;font-weight:700;color:var(--caramel);}
.flow li strong{display:block;font-size:14.5px;color:var(--brown-900);margin-bottom:3px;}
.point-box{background:#FBF3E2;border-left:5px solid var(--caramel);border-radius:0 12px 12px 0;padding:14px 18px;margin:14px 0 18px;font-size:14px;color:var(--brown-900);}
.point-box a{color:var(--terracotta);font-weight:800;text-decoration:underline;text-underline-offset:3px;}
.caution-box{background:var(--white);border:1.5px solid #D9A69A;border-radius:14px;padding:16px 20px;margin:14px 0 18px;}
.caution-box h4{font-size:13.5px;color:#A6543C;font-weight:800;margin-bottom:8px;}
.caution-box ul{margin-left:1.4em;list-style:disc;}
.caution-box li{font-size:13px;color:var(--brown-900);margin-bottom:5px;}
.cta-box{background:linear-gradient(135deg,#F7EEDD,var(--cream2));border:1px solid var(--line);border-radius:18px;padding:26px 22px;text-align:center;margin:30px 0;}
.cta-box .t{font-family:var(--serif);font-size:18px;color:var(--brown-900);font-weight:700;margin-bottom:14px;}
.cta-box .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.supervisor{display:flex;gap:14px;align-items:center;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:14px 18px;margin:28px 0 8px;}
.supervisor .ic{width:46px;height:46px;flex:none;border-radius:50%;background:var(--cream2);display:flex;align-items:center;justify-content:center;}
.supervisor .nm{font-size:14px;font-weight:800;color:var(--brown-900);}
.supervisor .rl{font-size:12px;color:var(--brown-500);}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:14px 0 10px;}
.related-grid a{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:16px;font-size:14px;font-weight:800;color:var(--brown-900);transition:.2s;display:block;}
.related-grid a:hover{border-color:var(--brown-300);box-shadow:0 6px 14px rgba(92,74,51,.1);transform:translateY(-2px);}
.related-grid a small{display:block;font-size:11.5px;color:var(--brown-500);font-weight:600;margin-top:4px;}
.menu-more{display:inline-block;margin-top:6px;font-size:11.5px;color:var(--caramel);font-weight:800;}
@media(max-width:640px){
  .page-hero h1{font-size:22.5px;}
  .article h2{font-size:19px;}
  .related-grid{grid-template-columns:1fr;}
  .tbl th,.tbl td{padding:9px 10px;}
}