:root{
  --orange:#E0662E;
  --orange-deep:#C24E1B;
  --orange-soft:#F9E3D3;
  --beige:#FAF4EB;
  --beige-deep:#F1E5D4;
  --brown:#3E3128;
  --brown-soft:#7A6A5C;
  --white:#FFFFFF;
  --trust:#4A3B2E;
  --line:#06C755;
  --radius:20px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }
body{
  font-family:'Noto Sans JP',sans-serif;
  color:var(--brown);
  background:var(--beige);
  font-size:16px;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
  word-break:keep-all;overflow-wrap:break-word;
}
h1,h2,h3,.disp{font-family:'Zen Maru Gothic',sans-serif;}
img{max-width:100%;display:block;}
a{color:inherit;}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px;}
.wrap-narrow{max-width:740px;margin:0 auto;padding:0 24px;}

/* ===== header (shared with LP) ===== */
header{
  position:sticky;top:0;z-index:100;
  background:rgba(250,244,235,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--beige-deep);
}
.header-in{display:flex;align-items:center;justify-content:space-between;height:64px;max-width:1160px;margin:0 auto;padding:0 20px;}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;}
.logo-mark{width:34px;height:24px;position:relative;flex-shrink:0;}
.logo-mark span{position:absolute;width:20px;height:20px;border-radius:50%;border:2.5px solid var(--orange);top:2px;}
.logo-mark span:nth-child(1){left:0;}
.logo-mark span:nth-child(2){left:7px;border-color:var(--brown);}
.logo-mark span:nth-child(3){left:14px;border-color:var(--orange-deep);}
.logo-text{font-family:'Zen Maru Gothic',sans-serif;font-weight:900;font-size:19px;letter-spacing:.02em;}
.logo-text small{display:block;font-size:10px;font-weight:700;color:var(--brown-soft);letter-spacing:.12em;line-height:1;}
nav.gnav{display:flex;align-items:center;gap:26px;font-size:14px;font-weight:500;}
nav.gnav a{text-decoration:none;color:var(--brown-soft);}
nav.gnav a:hover{color:var(--orange-deep);}
.btn-head{
  background:var(--orange);color:#fff!important;font-weight:700;
  padding:10px 22px;border-radius:999px;text-decoration:none;font-size:14px;
  transition:background .2s;
}
.btn-head:hover{background:var(--orange-deep);}
@media(max-width:820px){nav.gnav a:not(.btn-head){display:none;}}

/* ===== breadcrumb ===== */
.crumb{font-size:12.5px;color:var(--brown-soft);padding:20px 0 0;}
.crumb a{color:var(--brown-soft);text-decoration:none;}
.crumb a:hover{color:var(--orange-deep);}
.crumb .sep{margin:0 6px;opacity:.6;}
.crumb .current{color:var(--brown);}

/* ===== article header ===== */
.article-head{padding:20px 0 8px;}
.cat-eyebrow{
  display:inline-block;font-size:12.5px;font-weight:700;color:var(--orange-deep);
  background:var(--orange-soft);padding:5px 14px;border-radius:999px;letter-spacing:.03em;
  text-decoration:none;
}
.article-head h1{
  font-size:clamp(24px,3.6vw,34px);font-weight:900;line-height:1.55;
  margin:16px 0 10px;text-wrap:balance;
}
.pubdate{font-size:12.5px;color:var(--brown-soft);}
.lead-box{
  background:var(--white);border-radius:16px;padding:22px 24px;margin-top:22px;
  font-size:15.5px;line-height:1.9;box-shadow:0 3px 14px rgba(62,49,40,.06);
}

/* ===== TOC ===== */
.toc{
  margin-top:28px;background:var(--white);border:1px solid var(--beige-deep);
  border-radius:16px;padding:20px 22px;
}
.toc-title{font-weight:900;font-family:'Zen Maru Gothic',sans-serif;font-size:15px;margin-bottom:10px;}
.toc ol{list-style:none;counter-reset:toc;}
.toc li{counter-increment:toc;font-size:13.5px;margin:7px 0;}
.toc li::before{content:counter(toc) ". ";color:var(--orange-deep);font-weight:700;}
.toc li a{color:var(--brown-soft);text-decoration:none;}
.toc li a:hover{color:var(--orange-deep);}
.toc li.lv3{margin-left:20px;}
.toc li.lv3::before{content:"– ";}

/* ===== body prose ===== */
.prose{margin-top:34px;font-size:15.5px;line-height:2;}
.prose h2{
  font-size:clamp(20px,2.6vw,25px);font-weight:900;margin:44px 0 16px;
  padding-bottom:10px;border-bottom:2px solid var(--beige-deep);
  scroll-margin-top:90px;text-wrap:balance;
}
.prose h3{
  font-size:17.5px;font-weight:700;margin:28px 0 12px;color:var(--orange-deep);
  scroll-margin-top:90px;
}
.prose p{margin-bottom:16px;color:var(--brown);}
.prose ul{margin:0 0 18px 1.2em;}
.prose li{margin-bottom:8px;color:var(--brown);}
.prose table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:14px;}
.prose th,.prose td{border:1px solid var(--beige-deep);padding:10px 12px;text-align:left;}
.prose th{background:var(--beige);font-weight:700;}

/* ===== closing CTA ===== */
.col-cta{background:var(--trust);color:#fff;border-radius:24px;padding:44px 30px;margin:52px 0;text-align:center;}
.col-cta h2{font-size:clamp(20px,2.8vw,26px);font-weight:900;margin-bottom:12px;}
.col-cta p{font-size:14.5px;opacity:.85;max-width:44em;margin:0 auto 26px;}
.col-cta .btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--orange);color:#fff;font-family:'Zen Maru Gothic',sans-serif;font-weight:700;
  font-size:16.5px;padding:16px 36px;border-radius:999px;text-decoration:none;
  transition:background .2s,transform .15s;
}
.col-cta .btn:hover{background:var(--orange-deep);transform:translateY(-2px);}
.col-cta .btn-note{font-size:12px;opacity:.7;margin-top:16px;}

/* ===== FAQ ===== */
.faq-section{margin:52px 0;}
.faq-section h2{
  text-align:center;font-size:clamp(20px,2.8vw,25px);font-weight:900;margin-bottom:26px;
}
.faq-item{
  background:var(--white);border-radius:14px;padding:20px 22px;margin-bottom:12px;
  border:1px solid var(--beige-deep);
}
.faq-item summary{
  cursor:pointer;list-style:none;font-weight:700;font-size:15px;
  display:flex;justify-content:space-between;align-items:flex-start;gap:14px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .q-mark{color:var(--orange-deep);margin-right:6px;}
.faq-item summary .plus{flex-shrink:0;color:var(--brown-soft);transition:transform .2s;}
.faq-item[open] summary .plus{transform:rotate(45deg);}
.faq-item p{margin-top:12px;font-size:14px;color:var(--brown-soft);line-height:1.8;}

/* ===== related / category list ===== */
.related-title{font-size:15px;font-weight:900;margin:0 0 18px;font-family:'Zen Maru Gothic',sans-serif;}
.article-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;}
.article-card{
  display:block;background:var(--white);border-radius:16px;padding:20px;text-decoration:none;
  color:var(--brown);border:1px solid var(--beige-deep);transition:transform .15s,box-shadow .15s;
}
.article-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(62,49,40,.1);}
.article-card .cat-eyebrow{margin-bottom:10px;}
.article-card h3{font-size:15px;font-weight:700;line-height:1.6;}

/* ===== column top / category hero ===== */
.col-hero{padding:48px 0 10px;text-align:center;}
.col-hero .sec-eyebrow{
  text-align:center;font-size:13px;font-weight:700;letter-spacing:.22em;
  color:var(--orange);margin-bottom:10px;
}
.col-hero h1{font-size:clamp(26px,4vw,36px);font-weight:900;margin-bottom:14px;text-wrap:balance;}
.col-hero p{color:var(--brown-soft);max-width:640px;margin:0 auto;font-size:15px;}

.cat-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin:40px 0;}
.cat-card{
  display:block;background:var(--white);border-radius:20px;padding:26px 24px;text-decoration:none;
  color:var(--brown);border:1px solid var(--beige-deep);transition:transform .15s,box-shadow .15s;
}
.cat-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(62,49,40,.1);}
.cat-card .cat-name{font-family:'Zen Maru Gothic',sans-serif;font-weight:900;font-size:17px;margin-bottom:8px;color:var(--orange-deep);}
.cat-card .cat-desc{font-size:13.5px;color:var(--brown-soft);line-height:1.8;}
.cat-card .cat-count{font-size:12px;color:var(--brown-soft);margin-top:10px;}

section{padding:0;}

/* ===== footer (shared) ===== */
footer{background:var(--trust);color:rgba(255,255,255,.82);margin-top:60px;}
.foot-in{max-width:1080px;margin:0 auto;padding:56px 24px 28px;}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;margin-bottom:34px;}
.foot-brand .logo-text,.foot-brand .logo-text small{color:#fff;}
.foot-brand p{font-size:13px;line-height:1.9;margin-top:14px;opacity:.75;}
.foot-col h4{font-size:13px;font-weight:700;color:#fff;margin-bottom:14px;letter-spacing:.04em;}
.foot-col ul{list-style:none;}
.foot-col li{margin-bottom:10px;}
.foot-col a{color:rgba(255,255,255,.75);text-decoration:none;font-size:13.5px;}
.foot-col a:hover{color:#fff;}
.foot-bottom{border-top:1px solid rgba(255,255,255,.15);padding-top:22px;font-size:11.5px;opacity:.6;line-height:1.9;}
@media(max-width:760px){.foot-top{grid-template-columns:1fr;}}

main{display:block;}
.page-pad{padding-bottom:60px;}