*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Noto Sans JP",system-ui,sans-serif;
  font-size:16px;line-height:1.95;letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent-deep);text-underline-offset:.25em}
.wrap{width:min(1000px, calc(100% - 3rem));margin-inline:auto}
.read{width:min(720px, calc(100% - 3rem));margin-inline:auto}

/* ================= レイアウト（左サイドバー） ================= */
.layout{display:flex;min-height:100vh}
.side{
  width:230px;flex:none;padding:2.6rem 1.6rem;
  position:sticky;top:0;align-self:flex-start;min-height:100vh;
  display:flex;flex-direction:column;gap:2.4rem;
  background:var(--paper);
}
.col{flex:1;min-width:0}

.brand{text-decoration:none;color:inherit;display:block}
.brand-name{
  display:block;font-family:"Cormorant Garamond",serif;font-weight:500;
  font-size:1.45rem;letter-spacing:.16em;color:var(--accent-deep);line-height:1.3;
}
.brand-sub{
  display:block;margin-top:.5rem;font-size:.68rem;letter-spacing:.16em;
  color:var(--ink-soft);line-height:1.7;
}

.side-nav{display:flex;flex-direction:column;gap:1.5rem}
.side-nav a{text-decoration:none;color:var(--ink);display:block}
.side-nav .ja{display:block;font-size:.9rem;letter-spacing:.1em}
.side-nav .en{
  display:block;font-family:"Cormorant Garamond",serif;font-style:italic;
  font-size:.74rem;letter-spacing:.14em;color:var(--accent);margin-top:.1rem;
}
.side-nav a:hover .ja{color:var(--accent-deep)}
.side-foot{margin-top:auto;font-size:.62rem;letter-spacing:.1em;color:var(--ink-soft)}

.topbar{display:flex;justify-content:flex-end;padding:1.8rem 2rem 0}
.pill{
  display:inline-block;background:var(--accent-deep);color:#fff;text-decoration:none;
  border-radius:999px;padding:.7rem 1.7rem;font-size:.82rem;font-weight:500;letter-spacing:.08em;
}
.pill:hover{background:var(--accent)}

@media (max-width:860px){
  .layout{display:block}
  .side{
    width:auto;min-height:0;position:static;flex-direction:row;align-items:center;
    justify-content:space-between;flex-wrap:wrap;gap:1rem;padding:1.4rem 1.5rem;
    border-bottom:1px solid var(--line);
  }
  .brand-sub,.side-foot{display:none}
  .side-nav{flex-direction:row;gap:1.2rem;flex-wrap:wrap}
  .side-nav .en{display:none}
  .topbar{padding:1.2rem 1.5rem 0}
}

/* ================= セクション ================= */
.band{padding:5.5rem 0}
.band-soft{background:var(--soft)}
.band-accent{background:var(--accent-soft)}
.band-tight{padding:3.2rem 0}

h1,h2,h3{font-family:"Noto Serif JP",serif;font-weight:400;line-height:1.6;letter-spacing:.06em}

.eyebrow{
  font-family:"Cormorant Garamond",serif;font-style:italic;
  font-size:1rem;letter-spacing:.14em;color:var(--accent);
  margin:0 0 .5rem;font-weight:500;
}
.sec-head{text-align:center;margin:0 0 3rem}
.sec-head h2{font-size:clamp(1.35rem,2.4vw,1.85rem);margin:0 0 1rem;letter-spacing:.14em}
.sec-head p{margin:0 auto;color:var(--ink-soft);font-size:.93rem;max-width:34em}

/* ================= ヒーロー ================= */
.hero{padding:1.5rem 0 4.5rem}
.hero-grid{
  display:grid;grid-template-columns:minmax(260px,.9fr) 1.25fr;
  gap:clamp(1.8rem,4vw,3.5rem);align-items:center;
}
.hero .inner{padding-left:2.5rem}
.hero h1{font-size:clamp(1.7rem,3.6vw,2.6rem);margin:.4rem 0 1.4rem;line-height:1.6;letter-spacing:.12em;font-weight:400}
.hero .lead{font-size:.97rem;color:var(--ink-soft);margin:0 0 2rem}
.hero-actions{display:flex;gap:.8rem;flex-wrap:wrap}
.hero-figure{
  position:relative;min-height:clamp(300px,42vw,500px);
  border-radius:22px 0 0 22px;overflow:hidden;
  background:var(--figure);
  background-image:url("/assets/hero.jpg");
  background-size:cover;background-position:58% 50%;
}
.hero-figure::after{
  content:"";position:absolute;inset:auto 0 0 0;height:45%;
  background:linear-gradient(180deg,transparent,rgba(90,60,40,.42));
}
.hero-figure span{
  position:absolute;left:0;right:0;bottom:1.6rem;text-align:center;z-index:2;
  font-family:"Cormorant Garamond",serif;font-size:.8rem;letter-spacing:.4em;
  text-transform:uppercase;color:rgba(255,255,255,.92);
  text-shadow:0 1px 6px rgba(0,0,0,.35);
}

@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr;padding-inline:1.5rem}
  .hero .inner{padding-left:0}
  .hero-figure{border-radius:18px;min-height:0;aspect-ratio:1/1;order:-1;margin-bottom:1.8rem;background-position:center}
  .hero{padding:1rem 0 3rem}
}

/* ================= ボタン ================= */
.btn,.btn-ghost{
  display:inline-block;text-decoration:none;border-radius:999px;
  padding:.8rem 1.9rem;font-size:.84rem;font-weight:500;letter-spacing:.08em;
}
.btn{background:var(--accent-deep);color:#fff}
.btn:hover{background:var(--accent)}
.btn-ghost{border:1px solid var(--accent-deep);color:var(--accent-deep)}
.btn-ghost:hover{background:var(--accent-soft)}
/* 濃い帯の上のボタンは、白抜きにして見えるようにする */
.band-deep .btn,.cta .btn{background:#fff;color:var(--accent-deep)}
.band-deep .btn:hover,.cta .btn:hover{background:var(--accent);color:#fff}
.center{text-align:center}
.sp{display:none}
@media (max-width:860px){.sp{display:inline}}

/* ================= カード ================= */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.6rem}
.card{background:var(--card);border-radius:14px;padding:1.7rem 1.5rem;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.card .n{
  display:block;background:none;color:var(--accent);
  font-family:"Cormorant Garamond",serif;font-size:2.2rem;font-weight:400;
  letter-spacing:.12em;line-height:1;margin:0 0 .9rem;padding:0;
}
.card h3{font-size:.99rem;margin:0 0 .8rem;line-height:1.8;letter-spacing:.06em;font-weight:500}
.card p{margin:0;font-size:.88rem;color:var(--ink-soft);line-height:1.9}

/* ================= 記事カード一覧 ================= */
.list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.6rem}
.list a{
  display:block;text-decoration:none;color:inherit;background:var(--card);
  border-radius:14px;padding:1.5rem 1.4rem;box-shadow:0 1px 3px rgba(0,0,0,.04);
  transition:transform .15s ease;
}
.list a:hover{transform:translateY(-2px)}
.list .m{font-size:.7rem;color:var(--ink-soft);letter-spacing:.12em;margin:0 0 .7rem}
.list .t{font-family:"Noto Serif JP",serif;font-weight:500;font-size:1rem;line-height:1.8;margin:0 0 .7rem;letter-spacing:.04em}
.list .d{font-size:.85rem;color:var(--ink-soft);margin:0;line-height:1.9}
.pillar-flag{
  display:inline-block;background:var(--accent);color:#fff;border-radius:4px;
  font-size:.64rem;letter-spacing:.1em;padding:.15rem .6rem;margin-right:.6rem;
}

/* ================= 主張の帯 ================= */
.band-deep{background:var(--deep);color:var(--deep-ink)}
.band-deep h2,.band-deep h3{color:#fff}
.band-deep .eyebrow{color:var(--accent-pale)}
.band-deep .sec-head p{color:var(--deep-soft)}
.statement{
  font-family:"Noto Serif JP",serif;font-weight:300;
  font-size:clamp(1.2rem,2.6vw,1.85rem);line-height:2;letter-spacing:.12em;
  margin:0;text-align:center;
}
.statement small{
  display:block;font-family:"Noto Sans JP",sans-serif;font-size:.85rem;
  letter-spacing:.04em;color:var(--deep-soft);margin-top:1.5rem;line-height:1.95;
}

/* ================= タグ ================= */
.tags{display:flex;flex-wrap:wrap;gap:.55rem;justify-content:center}
.tags span{
  border:1px solid var(--accent-pale);border-radius:999px;padding:.4rem 1.1rem;
  font-size:.74rem;letter-spacing:.06em;color:var(--accent-deep);background:var(--card);
}

/* ================= 記事ページ ================= */
.article-head{padding:2.5rem 0 0;text-align:center}
.article-head h1{font-size:clamp(1.45rem,2.9vw,2.1rem);margin:.8rem 0 1rem;letter-spacing:.09em;font-weight:400;line-height:1.75}
.article-meta{font-size:.7rem;color:var(--ink-soft);letter-spacing:.16em}
.article-body{padding:2rem 0 4rem;font-size:1rem}
.article-body h2{
  font-size:1.28rem;margin:3.6rem 0 1.2rem;padding:0 0 .8rem;
  border-bottom:1px solid var(--line);letter-spacing:.08em;font-weight:500;
}
.article-body h3{font-size:1.02rem;margin:2.4rem 0 .9rem;padding-left:.8rem;border-left:3px solid var(--accent);letter-spacing:.06em;font-weight:500}
.article-body p{margin:1.3rem 0}
.article-body ul,.article-body ol{margin:1.3rem 0;padding-left:1.4rem}
.article-body li{margin:.55rem 0}
.article-body strong{font-weight:700}
.article-body blockquote{margin:1.7rem 0;padding:.2rem 0 .2rem 1.3rem;border-left:3px solid var(--line);color:var(--ink-soft)}
.article-body table{width:100%;border-collapse:collapse;margin:1.7rem 0;font-size:.9rem}
.article-body th,.article-body td{border:1px solid var(--line);padding:.75rem .85rem;text-align:left}
.article-body th{background:var(--accent-soft);font-weight:500}
.table-scroll{overflow-x:auto}
.article-body hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}

.summary{background:var(--accent-soft);border-radius:14px;padding:1.8rem 1.9rem;margin:2rem 0}
.summary h2{font-size:.68rem;margin:0 0 1rem;border:0;padding:0;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);font-family:"Cormorant Garamond",serif;font-style:italic;font-size:.92rem}
.summary ul{margin:0;padding-left:1.2rem}
.summary li{margin:.5rem 0;font-size:.92rem}

.toc{background:var(--soft);border-radius:14px;padding:1.5rem 1.7rem;margin:2rem 0}
.toc p{margin:0 0 .8rem;font-family:"Cormorant Garamond",serif;font-style:italic;font-size:.92rem;letter-spacing:.12em;color:var(--accent)}
.toc ol{margin:0;padding-left:1.3rem}
.toc li{margin:.4rem 0;font-size:.9rem}
.toc a{color:var(--ink-soft);text-decoration:none}
.toc a:hover{color:var(--accent-deep);text-decoration:underline}

.faq{margin:3.5rem 0 0}
.faq h2{font-size:1.28rem;margin:0 0 1.1rem;padding-bottom:.8rem;border-bottom:1px solid var(--line);font-weight:500}
.faq details{border-bottom:1px solid var(--line);padding:1rem 0}
.faq summary{cursor:pointer;font-weight:500;font-size:.95rem}
.faq .a{margin:.8rem 0 0;color:var(--ink-soft);font-size:.92rem}

.related{margin:3.5rem 0 0;background:var(--soft);border-radius:14px;padding:1.6rem 1.8rem}
.related p.h{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:.92rem;letter-spacing:.12em;color:var(--accent);margin:0 0 .9rem}
.related ul{margin:0;padding-left:1.2rem}
.related li{margin:.45rem 0;font-size:.92rem}

/* ================= CTA ================= */
.cta{background:var(--deep);color:var(--deep-ink);border-radius:18px;padding:2.8rem 2.2rem;margin:3.5rem 0 0;text-align:center}
.cta h2{margin:0 0 1rem;font-size:1.25rem;color:#fff;border:0;padding:0;letter-spacing:.1em;font-weight:400}
.cta p{margin:0 auto 1.7rem;font-size:.9rem;color:var(--deep-soft);max-width:32em}

/* ================= フッター ================= */
.site-foot{background:var(--deep);color:var(--deep-soft);padding:3.5rem 0 2.5rem;margin-top:5rem}
.foot-brand{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:1.35rem;letter-spacing:.2em;margin:0 0 .5rem;color:#fff}
.foot-tag{font-size:.85rem;margin:0 0 1.6rem}
.foot-nav{display:flex;gap:1.5rem;flex-wrap:wrap;margin-bottom:1.8rem}
.foot-nav a{color:var(--deep-soft);text-decoration:none;font-size:.82rem;letter-spacing:.06em}
.foot-nav a:hover{color:#fff}
.copy{font-size:.68rem;letter-spacing:.1em;margin:0;opacity:.7}

@media (max-width:640px){
  body{font-size:15px}
  .band{padding:3.5rem 0}
  .cta{padding:2rem 1.4rem}
}

/* 教室サイト風テーマ：クリームの地、濃紺、テラコッタ */
:root{
  --paper:#f8f5f0;
  --soft:#f1ece4;
  --card:#ffffff;
  --ink:#3a3733;
  --ink-soft:#7d766e;
  --line:#e6ded3;

  --accent:#c8794a;        /* テラコッタ */
  --accent-deep:#2c3e5c;   /* 濃紺（ボタン・リンク） */
  --accent-pale:#e3b492;   /* 淡いテラコッタ */
  --accent-soft:#f6ece2;   /* テラコッタのごく薄い面 */
  --marker:#f7e3d2;

  --deep:#2c3e5c;          /* 濃紺の帯 */
  --deep-ink:#f2f5f9;
  --deep-soft:#b9c6d8;

  --figure:linear-gradient(160deg,#e8d6c4 0%,#d3a684 38%,#b8794f 72%,#8c5533 100%);
  --figure-glow:
    radial-gradient(130% 58% at 20% 100%, rgba(255,255,255,.30), transparent 62%),
    radial-gradient(90% 46% at 80% 100%, rgba(255,255,255,.18), transparent 60%);
}

/* 明るい前提のテーマなので、端末のダークモードでも配色を保つ */
@media (prefers-color-scheme:dark){
  :root{
    --paper:#f8f5f0; --soft:#f1ece4; --card:#ffffff;
    --ink:#3a3733; --ink-soft:#7d766e; --line:#e6ded3;
  }
}