:root{
  --paper:#fbfaf7;
  --sand:#f2eee4;
  --sea:#e2f0ef;
  --ink:#17313a;
  --ink-soft:#5d7078;
  --line:#e1ddd3;
  --teal:#2f7d85;
  --teal-deep:#144049;
  --teal-pale:#7cb8ba;
  --wrap:min(1140px, calc(100% - 2.5rem));
  --read:min(720px, calc(100% - 2.5rem));
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-weight:400;
  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(--teal-deep);text-underline-offset:.25em}
.wrap{width:var(--wrap);margin-inline:auto}
.read{width:var(--read);margin-inline:auto}

/* ---------- 小さな英字ラベル ---------- */
.eyebrow{font-family:"Cormorant Garamond",serif;font-size:.86rem;letter-spacing:.36em;text-transform:uppercase;color:var(--teal);margin:0 0 1.3rem;font-weight:500}
.band-deep .eyebrow{color:var(--teal-pale)}

/* ---------- header ---------- */
.site-head{border-bottom:1px solid var(--line);background:rgba(251,250,247,.92);backdrop-filter:blur(8px);position:sticky;top:0;z-index:20}
.head-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:74px}
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--ink)}
.brand-mark{width:12px;height:12px;border-radius:50% 0 50% 50%;background:var(--teal);display:inline-block;flex:none}
.brand-name{font-family:"Cormorant Garamond","Noto Serif JP",serif;font-weight:500;font-size:1.25rem;letter-spacing:.3em}
.site-nav{display:flex;gap:1.6rem;flex-wrap:wrap}
.site-nav a{color:var(--ink-soft);text-decoration:none;font-size:.86rem;letter-spacing:.06em}
.site-nav a:hover{color:var(--teal-deep)}

/* ---------- bands ---------- */
.band{padding:6rem 0}
.band-sand{background:var(--sand)}
.band-sea{background:var(--sea)}
.band-deep{background:linear-gradient(180deg,#3d939a 0%,#1e5f6a 55%,#103b45 100%);color:#f2f7f6;position:relative}
.band-deep h2,.band-deep h3{color:#fff}
.band-tight{padding:3.5rem 0}

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

/* ---------- hero ---------- */
.hero{padding:7rem 0 6rem;background:linear-gradient(180deg,#e6f2f1 0%,rgba(230,242,241,.35) 45%,var(--paper) 100%)}
.hero h1{font-size:clamp(2rem,5vw,3.5rem);margin:0 0 1.8rem;line-height:1.45;letter-spacing:.12em;font-weight:300}
.hero .lead{font-size:1.03rem;color:var(--ink-soft);max-width:34em;margin:0 0 2.4rem}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap}

/* ---------- buttons ---------- */
.btn,.btn-ghost{
  display:inline-block;text-decoration:none;padding:.85rem 2rem;border-radius:999px;
  font-size:.88rem;font-weight:700;letter-spacing:.08em;
}
.btn{background:var(--teal-deep);color:#fff}
.btn:hover{background:var(--teal)}
.btn-ghost{border:1px solid var(--teal);color:var(--teal-deep)}
.btn-ghost:hover{background:var(--sea)}
.band-deep .btn{background:#fff;color:var(--teal-deep)}

/* ---------- section head ---------- */
.sec-head{margin:0 0 2.8rem}
.sec-head h2{font-size:clamp(1.45rem,2.6vw,2rem);margin:0 0 1rem;letter-spacing:.1em;font-weight:300;line-height:1.65}
.sec-head p{margin:0;color:var(--ink-soft);font-size:.96rem;max-width:36em}
.band-deep .sec-head p{color:#cfe0dd}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem}
.card{background:var(--paper);border:1px solid var(--line);border-radius:3px;padding:2rem 1.7rem}
.card .n{font-family:"Cormorant Garamond",serif;font-size:2.6rem;font-weight:300;color:var(--teal-pale);margin:0 0 .6rem;letter-spacing:.06em;line-height:1}
.card h3{font-size:1.02rem;margin:0 0 .9rem;line-height:1.75;letter-spacing:.06em;font-weight:500}
.card p{margin:0;font-size:.92rem;color:var(--ink-soft);line-height:1.85}

/* ---------- tag pills ---------- */
.tags{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.tags span{
  border:1px solid var(--teal-pale);border-radius:999px;padding:.45rem 1.2rem;
  font-size:.78rem;letter-spacing:.06em;color:var(--teal-deep);background:var(--paper);
}
.band-deep .tags span{border-color:rgba(255,255,255,.35);color:#eaf3f1;background:transparent}

/* ---------- statement ---------- */
.statement{font-family:"Noto Serif JP",serif;font-weight:300;font-size:clamp(1.25rem,2.8vw,2rem);line-height:2;letter-spacing:.12em;margin:0;text-align:center}
.statement small{display:block;font-family:"Noto Sans JP",sans-serif;font-size:.9rem;letter-spacing:.04em;color:#bcd4d0;margin-top:1.6rem;line-height:1.9}

/* ---------- article list ---------- */
.list{display:grid;gap:0;border-top:1px solid var(--line)}
.list a{display:block;padding:1.9rem 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.list a:hover{background:var(--sand)}
.list .t{font-family:"Noto Serif JP",serif;font-weight:500;font-size:1.1rem;line-height:1.75;margin:0 0 .6rem;letter-spacing:.05em}
.list .d{font-size:.9rem;color:var(--ink-soft);margin:0;line-height:1.85}
.list .m{font-size:.72rem;color:var(--ink-soft);letter-spacing:.16em;margin:0 0 .6rem}
.pillar-flag{display:inline-block;font-size:.66rem;letter-spacing:.16em;color:var(--teal-deep);border:1px solid var(--teal-pale);border-radius:999px;padding:.15rem .8rem;margin-right:.8rem}

/* ---------- article ---------- */
.article-head{padding:4.5rem 0 0}
.article-head h1{font-size:clamp(1.6rem,3.2vw,2.3rem);margin:.9rem 0 1rem;letter-spacing:.08em;font-weight:400;line-height:1.7}
.article-meta{font-size:.72rem;color:var(--ink-soft);letter-spacing:.16em}
.article-body{padding:2.2rem 0 4.5rem;font-size:1.02rem}
.article-body h2{font-size:1.35rem;margin:3.8rem 0 1.2rem;padding-bottom:.8rem;border-bottom:1px solid var(--teal-pale);letter-spacing:.08em;font-weight:400}
.article-body h3{font-size:1.05rem;margin:2.6rem 0 .9rem;padding-left:.9rem;border-left:2px solid var(--teal);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;background:linear-gradient(transparent 64%,var(--sea) 64%)}
.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:.93rem}
.article-body th,.article-body td{border:1px solid var(--line);padding:.75rem .85rem;text-align:left}
.article-body th{background:var(--sea);font-weight:700}
.table-scroll{overflow-x:auto}
.article-body hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}

.summary{background:var(--sea);border-radius:3px;padding:1.9rem 2rem;margin:2.2rem 0}
.summary h2{font-size:.72rem;margin:0 0 1rem;border:0;padding:0;letter-spacing:.24em;text-transform:uppercase;color:var(--teal);font-family:"Noto Sans JP",sans-serif}
.summary ul{margin:0;padding-left:1.2rem}
.summary li{margin:.5rem 0;font-size:.95rem}

.toc{border:1px solid var(--line);border-radius:3px;padding:1.5rem 1.7rem;margin:2.2rem 0;background:var(--sand)}
.toc p{margin:0 0 .8rem;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--teal)}
.toc ol{margin:0;padding-left:1.3rem}
.toc li{margin:.4rem 0;font-size:.92rem}
.toc a{color:var(--ink-soft);text-decoration:none}
.toc a:hover{color:var(--teal-deep);text-decoration:underline}

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

.related{margin:3.5rem 0 0;border-top:1px solid var(--line);padding-top:1.6rem}
.related p.h{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--teal);margin:0 0 .9rem}
.related ul{margin:0;padding-left:1.2rem}
.related li{margin:.45rem 0;font-size:.94rem}

/* ---------- cta ---------- */
.cta{background:var(--teal-deep);color:#f2f7f6;border-radius:3px;padding:3rem 2.4rem;margin:3.8rem 0 0;text-align:center}
.cta h2{margin:0 0 1.2rem;font-size:1.4rem;color:#fff;border:0;padding:0;letter-spacing:.1em;font-weight:300}
.cta p{margin:0 auto 1.8rem;font-size:.95rem;color:#cfe0dd;max-width:34em}

/* ---------- footer ---------- */
.site-foot{background:var(--teal-deep);color:#cfe0dd;padding:4rem 0 3rem;margin-top:6rem}
.foot-brand{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:1.5rem;letter-spacing:.3em;margin:0 0 .6rem;color:#fff}
.foot-tag{font-size:.88rem;margin:0 0 1.8rem}
.foot-nav{display:flex;gap:1.6rem;flex-wrap:wrap;margin-bottom:2rem}
.foot-nav a{color:#cfe0dd;text-decoration:none;font-size:.85rem;letter-spacing:.06em}
.foot-nav a:hover{color:#fff}
.copy{font-size:.72rem;letter-spacing:.1em;margin:0;color:var(--teal-pale)}

@media (max-width:640px){
  body{font-size:15px}
  .band{padding:3.8rem 0}
  .hero{padding:4rem 0 3.5rem}
  .site-nav{gap:1rem}
  .site-nav a{font-size:.8rem}
  .cta{padding:2rem 1.4rem}
  .card{padding:1.6rem 1.4rem}
}

@media (prefers-color-scheme:dark){
  :root{
    --paper:#101a1d;
    --sand:#16242a;
    --sea:#183036;
    --ink:#e6eeed;
    --ink-soft:#9db2b6;
    --line:#26383e;
    --teal:#6fa8ac;
    --teal-deep:#0d2a30;
    --teal-pale:#4e8188;
  }
  .site-head{background:rgba(16,26,29,.92)}
  a,.card h3{color:#9fd0d2}
  .btn{background:#6fa8ac;color:#0d2a30}
  .btn:hover{background:#8bbfc2}
  .band-deep,.cta,.site-foot{background:#0b2126}
  .article-body strong{background:linear-gradient(transparent 64%,#1d3d44 64%)}
}


/* ---------- 波の区切り ---------- */
.wave{line-height:0;margin:0;padding:0}
.wave svg{display:block;width:100%;height:clamp(38px,6vw,80px)}
.wave-down svg{transform:rotate(180deg)}


/* ---------- 非対称2カラム ---------- */
.split{display:grid;grid-template-columns:minmax(240px,.85fr) 2fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.split .sec-head{margin:0;position:sticky;top:110px}
.split .sec-head h2{margin-bottom:1.1rem}

/* ---------- ヒーロー2カラム ---------- */
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hero-figure{
  position:relative;min-height:clamp(280px,42vw,460px);border-radius:2px;overflow:hidden;
  background:linear-gradient(165deg,#8fc9c9 0%,#3d939a 42%,#1e5f6a 78%,#123f49 100%);
}
.hero-figure::after{
  content:"";position:absolute;inset:auto 0 0 0;height:62%;
  background:
    radial-gradient(120% 60% at 20% 100%, rgba(255,255,255,.22), transparent 60%),
    radial-gradient(90% 50% at 80% 100%, rgba(255,255,255,.14), transparent 60%);
}
.hero-figure span{
  position:absolute;left:0;right:0;bottom:2rem;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,.75);
}

@media (max-width:860px){
  .split{grid-template-columns:1fr;gap:2rem}
  .split .sec-head{position:static}
  .hero-grid{grid-template-columns:1fr}
  .hero-figure{min-height:220px;order:-1;margin-bottom:2.2rem}
}