/* ============================================
   domyoji-kyouiku — 教育記事
   藍染ベース・読み物向けに余白と書体を調整
   ============================================ */
:root{
  --bg:#162848;--bg2:#1c3258;--card:#223c66;
  --ink:#f0f4fa;--body:#cdd6e6;--muted:#94a4ba;
  --line:rgba(238,243,250,.10);
  --accent:#e8dcc0;--shu:#c94040;
  --fd:"Shippori Mincho B1",serif;
  --fh:"Noto Serif JP",serif;
  --fb:"Noto Sans JP",sans-serif;
  --pad:clamp(24px,5vw,80px);
  --content:clamp(320px,90vw,640px);
}

/* reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip;scroll-behavior:smooth}
body{
  font-family:var(--fd);font-size:17px;line-height:2.2;
  color:var(--body);background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
strong{color:var(--ink);font-weight:600}

/* ============================================
   progress
   ============================================ */
.progress{position:fixed;top:0;left:0;width:100%;height:2px;z-index:100}
.progress__bar{height:100%;width:0;background:var(--accent);transition:width .1s linear}

/* ============================================
   article container
   ============================================ */
.article{
  max-width:var(--content);
  margin:0 auto;
  padding:clamp(60px,10vh,120px) var(--pad) clamp(80px,12vh,160px);
}

/* ============================================
   header / title
   ============================================ */
.art__header{
  text-align:center;
  margin-bottom:clamp(48px,8vh,80px);
}
.art__kana{
  font-family:var(--fb);font-size:10px;font-weight:300;
  letter-spacing:.5em;color:var(--muted);
  display:block;margin-bottom:16px;
}
.art__title{
  font-family:var(--fd);font-weight:700;
  font-size:clamp(22px,5vw,36px);
  color:var(--ink);letter-spacing:.06em;line-height:1.6;
}
.art__date{
  display:block;margin-top:20px;
  font-family:var(--fb);font-size:11px;
  letter-spacing:.2em;color:var(--muted);
}

/* ============================================
   section / text
   ============================================ */
.art__section{
  margin-bottom:clamp(48px,6vh,72px);
}
.art__h{
  font-family:var(--fd);font-weight:600;
  font-size:clamp(18px,3.5vw,26px);
  color:var(--ink);letter-spacing:.1em;line-height:1.5;
  margin-bottom:clamp(20px,3vh,32px);
  padding-left:16px;
  border-left:3px solid var(--shu);
}
.art__p{
  margin-bottom:clamp(18px,2.5vh,28px);
  font-size:clamp(15px,2.2vw,17px);
  letter-spacing:.04em;
}
.art__p--center{text-align:center}
.art__p--strong{
  color:var(--ink);
  font-weight:600;
}
.art__p--feature{
  font-size:clamp(17px,2.8vw,20px);
  color:var(--accent);
  font-weight:500;
  letter-spacing:.08em;
  margin-top:clamp(32px,4vh,48px);
  margin-bottom:clamp(24px,3vh,36px);
  padding-left:16px;
  border-left:2px solid var(--shu);
}
.art__lead{
  font-size:clamp(14px,2vw,15px);
  color:var(--muted);
  line-height:2;
  margin-bottom:clamp(24px,3vh,40px);
}

/* ============================================
   divider
   ============================================ */
.art__hr{
  border:none;
  height:1px;
  background:linear-gradient(90deg,transparent 0%,var(--accent) 30%,var(--accent) 70%,transparent 100%);
  opacity:.2;
  margin:clamp(32px,5vh,56px) auto;
  max-width:120px;
}

/* ============================================
   illustration (SVG containers)
   ============================================ */
.art__illust{
  display:flex;justify-content:center;
  margin:clamp(32px,5vh,56px) auto;
  opacity:.85;
}
.art__illust svg{
  max-width:280px;
  width:clamp(180px,50vw,280px);
  height:auto;
}

/* ============================================
   quote / testimonial
   ============================================ */
.art__voice{
  margin-bottom:clamp(36px,5vh,56px);
}
.art__voice-label{
  font-family:var(--fb);font-size:12px;
  letter-spacing:.2em;color:var(--accent);
  margin-bottom:12px;display:block;
}
.art__voice-box{
  background:#e0e0e0;
  padding:clamp(16px,3vw,24px) clamp(18px,4vw,28px);
  border-radius:18px;
  border-left:none;
  position:relative;
  max-width:88%;
}
.art__voice-box::before{
  content:"";
  position:absolute;
  left:-8px;top:16px;
  width:16px;height:16px;
  background:#e0e0e0;
  clip-path:polygon(100% 0, 0 50%, 100% 100%);
}
.art__voice-box p{
  font-family:var(--fb);
  font-size:clamp(14px,2vw,15px);
  line-height:1.9;letter-spacing:.02em;
  color:#333;margin-bottom:10px;
}
.art__voice-box p:last-child{margin-bottom:0}

/* ============================================
   signature
   ============================================ */
.art__sign{
  text-align:right;
  font-family:var(--fd);font-size:clamp(18px,3vw,24px);
  color:var(--ink);letter-spacing:.2em;
  margin-top:clamp(40px,6vh,64px);
  padding-top:20px;
  border-top:1px solid var(--line);
}

/* ============================================
   reveal animation
   ============================================ */
.in{
  opacity:0;transform:translateY(18px);
  transition:opacity 1s cubic-bezier(.22,1,.36,1),
             transform 1s cubic-bezier(.22,1,.36,1);
}
.in.is-in{opacity:1;transform:translateY(0)}

/* ============================================
   canvas glow
   ============================================ */
.fx-glow{
  position:fixed;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:92;mix-blend-mode:screen;
}

/* ============================================
   responsive
   ============================================ */
@media(max-width:480px){
  .art__title{font-size:clamp(18px,5vw,26px);letter-spacing:0}
  .art__h{font-size:clamp(16px,4vw,20px);padding-left:12px}
  .art__illust svg{max-width:220px}
}

/* ============================================
   reduced motion
   ============================================ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    transition-duration:.01ms!important;
  }
  .in{opacity:1;transform:none}
  .progress{display:none}
}