:root{
  --red:#C1442D;
  --teal:#1F3D3D;
  --indigo:#2C3E50;
  --jade:#7FA99B;
  --cream:#F6EFE3;
  --paper:#FCF8EF;
  --gold:#D4A24E;
  --ink:#2A2622;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Noto Sans JP', sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 1px 1px, rgba(42,38,34,.035) 1px, transparent 1px) 0 0/22px 22px,
    var(--cream);
  line-height:1.85;
}
h1,h2,h3,h4,.serif{font-family:'Noto Serif JP', serif;}
a{color:inherit; text-decoration:none;}
img,svg{display:block; max-width:100%;}

/* ===== Header ===== */
header{
  position:sticky; top:0; z-index:100;
  background:rgba(252,248,239,.92);
  backdrop-filter:blur(6px);
  border-bottom:2px solid var(--ink);
}
.nav-wrap{
  max-width:900px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px; gap:16px;
}
.logo{
  display:flex; align-items:center; gap:12px;
  font-family:'Zen Maru Gothic',serif;
  font-size:1.4rem; font-weight:900; letter-spacing:.04em;
}
.logo .seal{
  width:40px;height:40px;border:3px solid var(--red);border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  color:var(--red); font-weight:900; font-size:1.1rem;
  transform:rotate(-6deg);
  font-family:'Noto Serif JP',serif;
  flex-shrink:0;
}
.back-link{font-size:.85rem; font-weight:700; white-space:nowrap;}
.back-link:hover{color:var(--red);}

/* ===== Main layout ===== */
main{max-width:1080px; margin:0 auto; padding:48px 24px 80px;}

/* ===== Two-column article layout ===== */
.article-layout{display:grid; grid-template-columns:1fr 280px; gap:48px; align-items:start;}

/* ===== Article header ===== */
.breadcrumb{font-size:.78rem; color:#a89a87; margin-bottom:16px;}
.breadcrumb a:hover{color:var(--red);}
.article-cat{
  display:inline-block; font-size:.72rem; letter-spacing:.18em; font-weight:700;
  color:var(--red); text-transform:uppercase; border:1px solid var(--red);
  padding:4px 14px; border-radius:20px; margin-bottom:16px;
}
.article-header h1{font-size:clamp(1.6rem,4vw,2.3rem); line-height:1.55; margin-bottom:16px;}
.article-meta-bar{display:flex; gap:16px; flex-wrap:wrap; font-size:.82rem; color:#a89a87; margin-bottom:32px;}

/* ===== Hero illustration ===== */
.article-illus-hero{
  aspect-ratio:16/9; border-radius:12px; overflow:hidden; margin-bottom:36px;
  border:1px solid #e0d6c4;
}

/* ===== Lead paragraph ===== */
.article-lead{
  font-size:1.05rem; color:#54493f; padding:22px 26px;
  background:var(--paper); border-left:4px solid var(--gold);
  border-radius:0 10px 10px 0; margin-bottom:40px;
}

/* ===== Body content ===== */
.article-body h2{font-size:1.35rem; margin:44px 0 18px; padding-bottom:10px; border-bottom:2px solid var(--ink);}
.article-body h3{font-size:1.1rem; margin:28px 0 12px; color:var(--teal);}
.article-body p{margin-bottom:18px; color:#3f3a34;}
.article-body strong{color:var(--red);}

/* ===== Tables ===== */
.compare-table{width:100%; border-collapse:collapse; margin:24px 0 28px; font-size:.88rem;}
.compare-table th,.compare-table td{border:1px solid #e0d6c4; padding:10px 14px; text-align:left;}
.compare-table th{background:var(--teal); color:#fff; font-weight:700;}
.compare-table tbody tr:nth-child(even){background:var(--paper);}

/* ===== Info / caution boxes ===== */
.info-box, .caution-box{
  border-radius:10px; padding:18px 22px; margin:24px 0; border:1px solid #e0d6c4;
}
.info-box{background:var(--paper); border-left:4px solid var(--jade);}
.caution-box{background:#fdf3ec; border-left:4px solid var(--red);}
.info-box h4, .caution-box h4{font-size:.95rem; margin-bottom:8px;}
.info-box p, .caution-box p{margin-bottom:0; font-size:.9rem; color:#54493f;}

/* ===== Phrase bubble ===== */
.phrase-bubble{
  display:flex; gap:16px; align-items:flex-start;
  background:#fff; border:1px solid #e0d6c4; border-radius:10px;
  padding:16px 20px; margin-bottom:14px;
}
.phrase-bubble .icon{
  flex-shrink:0; width:42px; height:42px; border-radius:50%;
  background:var(--teal); color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:'Noto Serif JP',serif; font-weight:900; font-size:1.1rem;
}
.phrase-bubble .content .ja{font-weight:700; margin-bottom:4px;}
.phrase-bubble .content .reading{font-size:.85rem; color:#a89a87;}

/* ===== Route card ===== */
.route-card{
  display:flex; gap:18px; background:var(--paper); border:1px solid #e0d6c4;
  border-radius:10px; padding:20px; margin-bottom:14px;
}
.route-card .num{
  flex-shrink:0; width:38px; height:38px; border-radius:50%;
  background:var(--red); color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:'Noto Serif JP',serif; font-weight:900;
}
.route-card h4{margin-bottom:8px; font-size:1rem;}
.route-card p{font-size:.88rem; color:#6b5f52; margin-bottom:0;}

/* ===== Sources ===== */
.sources{margin-top:40px; padding-top:24px; border-top:1px dashed #ddd2bd;}
.sources h4{font-size:.9rem; margin-bottom:10px; color:#a89a87;}
.sources ul{list-style:none; display:flex; flex-direction:column; gap:6px;}
.sources li{font-size:.8rem; color:#a89a87; padding-left:1.2em; position:relative;}
.sources li::before{content:'※'; position:absolute; left:0;}

/* ===== Disclosure ===== */
.disclosure-note{font-size:.75rem; color:#a89a87; margin-top:18px; line-height:1.7;}

/* ===== Sidebar ===== */
.sidebar{display:flex; flex-direction:column; gap:24px; position:sticky; top:90px;}
.sidebar-widget{background:var(--paper); border:1px solid #e0d6c4; border-radius:10px; padding:22px;}
.sidebar-widget h4{font-size:.92rem; margin-bottom:14px; padding-bottom:10px; border-bottom:2px solid var(--ink);}
.series-nav-list{list-style:none; display:flex; flex-direction:column; gap:12px;}
.series-nav-list li a{display:flex; gap:10px; align-items:flex-start; font-size:.82rem; line-height:1.6; color:#54493f;}
.series-nav-list li a:hover{color:var(--red);}
.series-nav-list .num{flex-shrink:0; font-family:'Noto Serif JP',serif; font-weight:900; color:var(--gold); font-size:.95rem;}
.series-nav-list li a.is-current{color:var(--red); font-weight:700;}
.series-nav-list li a.is-current .num{color:var(--red);}
.sidebar-cta p{font-size:.85rem; color:#6b5f52; margin-bottom:14px;}
.sidebar-widget p{font-size:.85rem; color:#6b5f52; margin-bottom:10px;}
.btn-block{display:flex; justify-content:center; width:100%; padding:12px 20px; font-size:.85rem;}
.sidebar-link{display:block; font-size:.85rem; font-weight:700; color:var(--teal); margin-top:6px;}
.sidebar-link:hover{color:var(--red);}

/* ===== Prev / Next pager ===== */
.article-pager{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:48px;}
.pager-link{
  display:flex; flex-direction:column; gap:6px; padding:18px 20px;
  background:var(--paper); border:1px solid #e0d6c4; border-radius:10px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.pager-link:hover{transform:translateY(-3px); box-shadow:0 10px 24px rgba(42,38,34,.12);}
.pager-link .dir{font-size:.7rem; letter-spacing:.15em; color:var(--gold); font-weight:700; text-transform:uppercase;}
.pager-link .title{font-size:.88rem; font-weight:700; line-height:1.55;}
.pager-next{grid-column:2; text-align:right; align-items:flex-end;}
.pager-prev{grid-column:1;}

/* ===== Blog archive ===== */
.archive-header{margin-bottom:36px;}
.archive-header h1{font-size:clamp(1.6rem,4vw,2.3rem); margin-bottom:14px;}
.archive-lead{font-size:1rem; color:#54493f; max-width:680px;}
.blog-list{display:flex; flex-direction:column; gap:24px;}
.blog-card{
  display:grid; grid-template-columns:220px 1fr; gap:0;
  background:var(--paper); border:1px solid #e0d6c4; border-radius:12px; overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}
.blog-card:hover{transform:translateY(-4px); box-shadow:0 14px 32px rgba(42,38,34,.12);}
.blog-card-illus{aspect-ratio:4/3;}
.blog-card-illus svg{width:100%; height:100%;}
.blog-card-body{padding:22px 24px;}
.blog-card-body .article-cat{margin-bottom:10px;}
.blog-card-body h2{font-size:1.15rem; margin-bottom:10px; line-height:1.6;}
.blog-card-body p{font-size:.9rem; color:#6b5f52; margin-bottom:14px;}
.blog-card-meta{display:flex; gap:14px; font-size:.78rem; color:#a89a87; margin-bottom:10px;}
.blog-card-more{font-size:.85rem; font-weight:700; color:var(--teal);}
.blog-card:hover .blog-card-more{color:var(--red);}

/* ===== Related articles ===== */
.related{margin-top:56px;}
.related h3{font-size:1.2rem; margin-bottom:20px; border-bottom:2px solid var(--ink); padding-bottom:12px;}
.related-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.related-card{
  display:block; background:var(--paper); border:1px solid #e0d6c4; border-radius:10px;
  overflow:hidden; transition:transform .25s ease, box-shadow .25s ease;
}
.related-card:hover{transform:translateY(-4px); box-shadow:0 12px 28px rgba(42,38,34,.12);}
.related-illus{aspect-ratio:16/10;}
.related-illus img, .related-illus svg{width:100%; height:100%; object-fit:cover;}
.related-card-body{padding:14px 16px;}
.related-card-body .cat{font-size:.7rem; color:var(--red); font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom:6px; display:block;}
.related-card-body h4{font-size:.92rem; font-weight:700; line-height:1.55; font-family:'Noto Sans JP',sans-serif;}

/* ===== Article CTA ===== */
.article-cta{
  margin-top:48px; background:var(--teal); color:var(--cream);
  border-radius:12px; padding:36px; text-align:center;
}
.article-cta h3{color:#fff; margin-bottom:10px; font-size:1.25rem;}
.article-cta p{color:#cfe0dc; font-size:.92rem; margin-bottom:22px;}

/* ===== Button ===== */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 28px; border-radius:2px; font-weight:700; font-size:.95rem;
  transition:transform .2s ease, box-shadow .2s ease; cursor:pointer; border:none;
}
.btn-primary{background:var(--red); color:#fff;}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 8px 20px rgba(193,68,45,.35);}

/* ===== Footer ===== */
footer{background:var(--ink); color:#cfc6ba; margin-top:40px;}
.footer-wrap{max-width:900px; margin:0 auto; padding:28px 24px; text-align:center; font-size:.8rem;}
.footer-wrap a{font-weight:700;}
.footer-wrap a:hover{color:var(--gold);}

/* ===== Responsive ===== */
@media (max-width:880px){
  .article-layout{grid-template-columns:1fr;}
  .sidebar{position:static; flex-direction:row; flex-wrap:wrap;}
  .sidebar-widget{flex:1 1 260px;}
  .blog-card{grid-template-columns:1fr;}
  .blog-card-illus{aspect-ratio:16/9;}
}
@media (max-width:640px){
  .related-grid{grid-template-columns:1fr;}
  .route-card{flex-direction:column;}
  .phrase-bubble{flex-direction:column;}
  main{padding:32px 18px 60px;}
  .article-pager{grid-template-columns:1fr;}
  .pager-next{grid-column:1; text-align:left; align-items:flex-start;}
}