/* CHILDREN JAPAN — Web Renewal Demo
   Color roles & layout reverse-engineered directly from the production-handoff
   deck's own slide mockups (fills/text colors read from the .pptx XML), not
   re-interpreted from the text alone. */
:root{
  --navy:#0D2240;
  --navy-light:#17395F;
  --green:#2D7A4F;
  --gold:#C9A84C;
  --paper:#F5F2EB;
  --white:#FFFFFF;

  --on-navy-eyebrow:#7FD5A4;
  --on-navy-body:#E6EDF5;
  --on-navy-note:#CBD7E4;
  --on-paper-body:#425265;
  --meta:#637181;
  --navlink:#172536;
  --hairline:#D9E0E5;

  --radius:2px;
  --maxw:1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--navy);
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Helvetica Neue",Arial,sans-serif;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{line-height:1.4;margin:0 0 .6em;font-weight:700;}
p{margin:0 0 1em;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
@media(max-width:640px){.wrap{padding:0 20px;}}

/* ---- draft banner ---- */
.draft-banner{
  background:var(--navy-light);
  color:var(--white);
  font-size:.75rem;
  letter-spacing:.02em;
  text-align:center;
  padding:8px 16px;
}
.draft-banner strong{color:var(--gold);}

/* ---- header : white bar, per slide4/5 shape10 (fill FFFFFF) ---- */
header.site{
  background:var(--white);
  position:sticky;top:0;z-index:50;
  border-bottom:1px solid var(--hairline);
}
.nav{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 28px;max-width:var(--maxw);margin:0 auto;
  gap:20px;
}
@media(max-width:640px){.nav{padding:14px 20px;}}
.brand{display:flex;flex-direction:column;gap:2px;}
.brand .name{font-weight:700;font-size:1.05rem;letter-spacing:.04em;color:var(--navy);}
.brand .tagline{font-size:.62rem;color:var(--green);letter-spacing:.1em;font-weight:700;}
.navlinks{display:flex;align-items:center;gap:26px;flex-wrap:wrap;font-size:.85rem;}
.navlinks a{color:var(--navlink);padding:6px 0;}
.navlinks a.current{color:var(--green);font-weight:700;}
.navlinks a:hover{color:var(--green);}
.navlinks .soon{opacity:.38;font-size:.85rem;cursor:default;}

/* ---- mobile nav toggle ---- */
.nav-toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:40px;height:40px;padding:0;margin:0;
  background:none;border:none;cursor:pointer;flex-shrink:0;
}
.nav-toggle span{
  display:block;width:22px;height:2px;background:var(--navy);
  transition:transform .25s ease, opacity .25s ease;
}
.nav-toggle.is-active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.is-active span:nth-child(2){opacity:0;}
.nav-toggle.is-active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media(max-width:900px){
  .nav-toggle{display:flex;}
  .navlinks{
    display:none;position:absolute;top:100%;left:0;right:0;z-index:60;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--white);border-bottom:1px solid var(--hairline);
    box-shadow:0 12px 24px rgba(13,34,64,.1);
    padding:8px 24px 20px;
  }
  .navlinks.is-open{display:flex;}
  .navlinks a,.navlinks .soon{padding:14px 0;border-bottom:1px solid var(--hairline);}
  .navlinks a:last-of-type{border-bottom:none;}
  .navlinks .cta-btn{
    display:block;width:100%;margin-top:16px;text-align:center;border-bottom:none;
  }
}
.cta-btn{
  display:inline-block;background:var(--green);color:var(--white)!important;
  padding:13px 52px;border-radius:100px;font-weight:700;font-size:.85rem;
  white-space:nowrap;
}
.cta-btn:hover{background:#256341;}

/* ================= TOP-PAGE HERO : split panel, per slide4 ================= */
.hero-split{
  display:grid;grid-template-columns:1fr 1fr;min-height:560px;
}
@media(max-width:860px){
  .hero-split{grid-template-columns:1fr;min-height:0;}
  .hero-split .hero-carousel{order:-1;}
}

.hero-text{
  background:var(--navy);color:var(--white);
  display:flex;flex-direction:column;justify-content:center;
  padding:64px 56px;
}
@media(max-width:640px){.hero-text{padding:40px 24px;}}
.hero-text .eyebrow{color:var(--on-navy-eyebrow);}
.hero-text h1{color:var(--white);font-size:clamp(1.9rem,3vw,2.9rem);}
.hero-text .lead{color:var(--on-navy-body);font-size:1.02rem;max-width:560px;}
.hero-note{margin-top:18px;font-size:.8rem;color:var(--on-navy-note);}
@media(max-width:860px){
  .hero-text{align-items:center;text-align:center;}
  .hero-text .lead{margin-left:auto;margin-right:auto;}
  .hero-ctas{justify-content:center;}
}

.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px;}
.btn{display:inline-block;padding:14px 26px;border-radius:100px;font-weight:700;font-size:.9rem;border:none;cursor:pointer;font-family:inherit;}
.btn-gold{background:var(--gold);color:var(--navy);}
.btn-gold:hover{background:#dab765;}
.btn-navylight{background:var(--navy-light);color:var(--white);}
.btn-navylight:hover{background:#1f4570;}
.btn-green{background:var(--green);color:var(--white);}
.btn-green:hover{background:#256341;}

/* ---- hero image carousel (right panel, TOP page only) ---- */
.hero-carousel{position:relative;overflow:hidden;background:var(--navy);min-height:340px;}
@media(max-width:860px){.hero-carousel{min-height:0;aspect-ratio:4/3;}}
.hero-carousel .slide{
  position:absolute;inset:0;opacity:0;
  transform:scale(1.08);
  transition:opacity 1.6s ease, transform 7s ease;
}
.hero-carousel .slide img{width:100%;height:100%;object-fit:cover;}
.hero-carousel .slide.is-active{opacity:1;transform:scale(1);z-index:1;}
.hero-carousel .dots{
  position:absolute;left:0;right:0;bottom:20px;z-index:2;
  display:flex;justify-content:center;gap:8px;
}
.hero-carousel .dots span{
  width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.4);
  transition:background .3s, width .3s;
}
.hero-carousel .dots span.is-active{background:var(--gold);width:20px;border-radius:4px;}

/* ================= INNER-PAGE HERO : paper band + gold-framed photo, per slide5/6 ================= */
.hero-inner{background:var(--paper);padding:72px 0 56px;}
.hero-inner .grid-hero{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;}
@media(max-width:860px){
  .hero-inner{padding:40px 0 48px;}
  .hero-inner .grid-hero{grid-template-columns:1fr;gap:28px;}
  .hero-inner .grid-hero .gold-frame{order:-1;}
}
.hero-inner h1{color:var(--navy);font-size:clamp(1.8rem,3vw,2.6rem);}
.hero-inner .lead{color:var(--on-paper-body);font-size:1.02rem;max-width:480px;}

/* gold offset photo frame — mirrors the offset gold rectangle behind the
   picture in slide5/6 (picture drawn slightly up-left of a gold backing card) */
.gold-frame{position:relative;}
.gold-frame::after{
  content:"";position:absolute;
  top:18px;left:18px;right:-18px;bottom:-18px;
  background:var(--gold);z-index:0;border-radius:20px;
}
.gold-frame img{position:relative;z-index:1;width:100%;aspect-ratio:5/4;object-fit:cover;border-radius:20px;}

/* ================= section basics ================= */
section{padding:76px 0;}
section.tight{padding:44px 0;}
@media(max-width:640px){
  section{padding:48px 0;}
  section.tight{padding:32px 0;}
}
.section-head{max-width:720px;margin:0 0 44px;}
.section-head .kicker{
  font-size:.78rem;letter-spacing:.12em;font-weight:700;
  text-transform:uppercase;margin-bottom:12px;color:var(--green);
}
.section-head h2{font-size:clamp(1.4rem,2.6vw,2rem);color:var(--navy);}
.section-head .sub{color:var(--on-paper-body);font-size:.98rem;}
@media(max-width:860px){.section-head{margin-left:auto;margin-right:auto;text-align:center;}}

.lead-statement{margin:0;}
@media(max-width:860px){.lead-statement{margin-left:auto;margin-right:auto;text-align:center;}}

.cta-more{margin-top:32px;}
@media(max-width:860px){
  .cta-more{text-align:center;}
  .wrap > .btn{display:table;margin:0 auto;}
}

.bg-navy{background:var(--navy);color:var(--white);}
.bg-navy .kicker{color:var(--gold);}
.bg-navy .section-head h2{color:var(--white);}
.bg-navy .section-head .sub{color:var(--on-navy-body);}
.bg-paper{background:var(--paper);}
.bg-white{background:var(--white);}

/* slim navy divider bar — kicker(gold) + heading(white) inline, per slide5/6 bottom strip */
.divider-bar{
  background:var(--navy);color:var(--white);
  padding:22px 0;display:flex;align-items:baseline;gap:28px;flex-wrap:wrap;
}
.divider-bar .kicker{color:var(--gold);font-size:.78rem;letter-spacing:.12em;font-weight:700;text-transform:uppercase;margin:0;white-space:nowrap;}
.divider-bar h2{margin:0;font-size:1.15rem;color:var(--white);}

.grid{display:grid;gap:32px;}
.split-1115{grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;}
@media(max-width:860px){.split-1115{grid-template-columns:1fr;text-align:center;}.split-1115 p{margin-left:auto;margin-right:auto;}}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:860px){.grid-2,.grid-3{grid-template-columns:1fr;}.grid-4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.grid-4{grid-template-columns:1fr;}}

/* numbered feature (site strategy 01/02/03) — plain typographic block, no card box, per slide2 */
.numbered{display:flex;flex-direction:column;}
.numbered .icon{width:38px;height:38px;color:var(--green);margin-bottom:16px;}
.numbered .num{font-size:2rem;font-weight:700;color:var(--gold);line-height:1;margin-bottom:14px;}
.numbered h3{font-size:1.2rem;color:var(--navy);margin-bottom:12px;}
.numbered .rule{width:56px;height:2px;background:var(--green);margin-bottom:16px;}
.numbered p{color:var(--navlink);font-size:.92rem;margin:0;}
@media(max-width:860px){
  .numbered{align-items:center;text-align:center;}
  .numbered .rule{margin-left:auto;margin-right:auto;}
}

.audience-card{
  background:var(--white);border:1px solid var(--hairline);
  padding:34px;display:flex;flex-direction:column;gap:10px;
}
.audience-card .icon{width:46px;height:46px;color:var(--green);margin-bottom:6px;}
.audience-card .icon svg{width:100%;height:100%;display:block;}
.audience-card .tag{font-size:.72rem;letter-spacing:.1em;color:var(--gold);font-weight:700;text-transform:uppercase;}
.audience-card h3{font-size:1.3rem;color:var(--navy);}
.audience-card p{color:var(--on-paper-body);}
.audience-card .go{margin-top:auto;font-weight:700;color:var(--green);font-size:.9rem;}
@media(max-width:860px){
  .audience-card{align-items:center;text-align:center;}
  .audience-card .gold-frame{align-self:stretch;}
}

.step{border-left:2px solid var(--hairline);padding:0 0 30px 22px;position:relative;}
.step:last-child{padding-bottom:0;}
.step::before{content:"";position:absolute;left:-6px;top:2px;width:10px;height:10px;border-radius:50%;background:var(--gold);}
.step .label{font-size:.72rem;color:var(--green);font-weight:700;letter-spacing:.08em;}
.step h3{font-size:1rem;margin:.25em 0;color:var(--navy);}
.step p{color:var(--on-paper-body);font-size:.9rem;margin:0;}

.photo-cap{font-size:.78rem;color:var(--meta);padding:14px 4px 0 4px;}

.timeline{display:flex;flex-direction:column;}
.tl-item{display:grid;grid-template-columns:150px 1fr;gap:30px;padding:32px 0;border-top:1px solid var(--hairline);}
.tl-item:first-child{border-top:none;}
.tl-year{font-weight:700;color:var(--green);font-size:1.15rem;}
.tl-year .sub{display:block;font-size:.72rem;color:var(--meta);font-weight:400;margin-top:4px;}
.tl-item h3{color:var(--navy);font-size:1.05rem;}
.tl-item p{color:var(--on-paper-body);font-size:.92rem;margin:0 0 16px;}
@media(max-width:640px){.tl-item{grid-template-columns:1fr;gap:10px;}}

.quote-block{border-left:3px solid var(--gold);padding-left:24px;color:var(--navy);font-size:1.15rem;font-weight:700;margin:0;}

.mission-card{border:1px solid rgba(255,255,255,.18);padding:30px;}
.mission-card .num{display:inline-block;font-size:.72rem;font-weight:700;color:var(--gold);border:1px solid var(--gold);border-radius:100px;padding:3px 12px;margin-bottom:16px;}
.mission-card h3{color:var(--white);font-size:1.05rem;}
.mission-card p{color:var(--on-navy-body);font-size:.9rem;margin:0;}

.cta-band{background:var(--green);color:var(--white);text-align:center;padding:60px 24px;}
.cta-band h2{color:var(--white);font-size:1.5rem;}
.cta-band p{color:#DCEEE2;}

/* footer */
footer.site{background:var(--navy);color:var(--on-navy-body);padding:56px 0 28px;font-size:.85rem;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;margin-bottom:36px;}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr;}}
.foot-grid h4{color:var(--gold);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;margin:0 0 14px;}
.foot-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.foot-grid .soon{opacity:.4;}
.foot-bottom{border-top:1px solid rgba(255,255,255,.14);padding-top:20px;font-size:.78rem;color:#8A96AB;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}

/* ---- contact : navy info card + white form card, per slide16 ---- */
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:0;background:var(--white);border:1px solid var(--hairline);}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr;}}
.contact-info{background:var(--navy);color:var(--white);padding:48px 40px;}
@media(max-width:640px){.contact-info,.form-card{padding:32px 24px;}}
.contact-info .kicker{color:var(--gold);}
.contact-info h2{color:var(--white);}
.contact-info p{color:var(--on-navy-body);}
.contact-info ul{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;}
.contact-info li{color:var(--on-navy-body);font-size:.92rem;padding-left:16px;position:relative;}
.contact-info li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;background:var(--gold);}
.form-card{padding:48px 40px;}
.form-row{margin-bottom:20px;}
.form-row label{display:block;font-size:.85rem;font-weight:700;color:var(--navy);margin-bottom:6px;}
.form-row .req{color:var(--green);font-size:.72rem;margin-left:6px;font-weight:700;}
.form-row input,.form-row select,.form-row textarea{
  width:100%;padding:12px 14px;border:1px solid var(--hairline);border-radius:var(--radius);
  font-family:inherit;font-size:.92rem;background:var(--white);
}
.form-row textarea{min-height:110px;resize:vertical;}
.form-note{font-size:.78rem;color:var(--meta);background:var(--paper);border:1px solid var(--hairline);padding:14px 16px;margin-top:20px;}

.badge-inline{display:inline-block;background:var(--paper);color:var(--meta);font-size:.72rem;padding:4px 10px;border-radius:100px;}

/* ---- bullet list (subsidy programs, sub-items) ---- */
.bullets{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.bullets li{padding-left:18px;position:relative;color:var(--on-paper-body);font-size:.92rem;}
.bullets li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;background:var(--green);}
.bullets li strong{color:var(--navy);display:block;font-size:.95rem;margin-bottom:2px;}
.bg-navy .bullets li{color:var(--on-navy-body);}
.bg-navy .bullets li strong{color:var(--white);}
.bg-navy .bullets li::before{background:var(--gold);}

/* ---- pillar overview nav (services page top) ---- */
.pillar-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:48px;}
@media(max-width:860px){.pillar-nav{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.pillar-nav{grid-template-columns:1fr;}}
.pillar-nav a{display:block;border:1px solid var(--hairline);background:var(--white);padding:22px 20px;text-decoration:none;transition:border-color .15s ease;}
.pillar-nav a:hover{border-color:var(--green);}
.pillar-nav .n{font-size:1.4rem;font-weight:700;color:var(--gold);line-height:1;margin-bottom:10px;}
.pillar-nav h4{font-size:.95rem;color:var(--navy);margin:0 0 6px;}
.pillar-nav .go{font-size:.78rem;color:var(--green);font-weight:700;}

/* ---- pillar block (services page) ---- */
.pillar{padding:44px 0;border-top:1px solid var(--hairline);}
.pillar:first-child{border-top:none;padding-top:0;}
.pillar .eyebrow-en{color:var(--meta);font-size:.82rem;font-style:italic;margin-bottom:10px;}
.pillar h3{color:var(--navy);font-size:1.35rem;margin-bottom:14px;}
.pillar > p{color:var(--on-paper-body);max-width:720px;}
.pillar .grid-sub{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin-top:24px;}
@media(max-width:760px){.pillar .grid-sub{grid-template-columns:1fr;}}

.pillar .lead-grid{display:grid;grid-template-columns:1.3fr .8fr;gap:40px;align-items:start;}
@media(max-width:760px){.pillar .lead-grid{grid-template-columns:1fr;}}
.pillar .lead-grid .pillar-text p{color:var(--on-paper-body);}
.pillar .lead-grid .gold-frame{margin:0;}
.pillar .lead-photos{display:flex;flex-direction:column;gap:20px;}
.pillar .lead-photos .gold-frame{margin:0;}

/* ---- case study proof card ---- */
.case-card{border:1px solid var(--hairline);background:var(--white);padding:28px;}
.case-card .region{font-size:.72rem;letter-spacing:.1em;color:var(--gold);font-weight:700;text-transform:uppercase;margin-bottom:10px;}
.case-card h3{color:var(--navy);font-size:1.05rem;margin-bottom:12px;}
.case-card p{color:var(--on-paper-body);font-size:.9rem;margin:0 0 12px;}
.case-card .result{color:var(--green);font-weight:700;font-size:.88rem;margin:0;}
.case-card .more{display:block;color:var(--navy);font-weight:700;font-size:.82rem;margin-top:10px;}
.case-card .thumb{width:calc(100% + 56px);aspect-ratio:16/9;object-fit:cover;margin:-28px -28px 20px;}
.case-card{overflow:hidden;}
.case-card .mini-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0 0 14px;}
.case-card .mini-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;}

/* ---- stat bar (verified figures pulled from case copy) ---- */
.stat-bar{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:36px;}
.stat-bar .stat .num{font-size:2.1rem;font-weight:700;color:var(--navy);line-height:1;margin-bottom:10px;}
.stat-bar .stat .num span{font-size:1.1rem;font-weight:700;}
.stat-bar .stat .cap{font-size:.86rem;color:var(--on-paper-body);}
.bg-navy .stat-bar .stat .num{color:var(--gold);}
.bg-navy .stat-bar .stat .cap{color:var(--white);opacity:.85;}

/* ---- structured mini case (課題/アプローチ/成果) ---- */
.case-structured{border:1px solid var(--hairline);background:var(--white);padding:28px;display:flex;flex-direction:column;gap:14px;}
.case-structured .region{font-size:.72rem;letter-spacing:.1em;color:var(--gold);font-weight:700;text-transform:uppercase;}
.case-structured h3{color:var(--navy);font-size:1.05rem;margin:2px 0 0;}
.case-structured dl{margin:0;display:flex;flex-direction:column;gap:10px;}
.case-structured dt{font-size:.75rem;font-weight:700;color:var(--green);letter-spacing:.06em;margin-bottom:3px;}
.case-structured dd{margin:0;color:var(--on-paper-body);font-size:.9rem;}

/* ---- faq ---- */
.faq-item{border-top:1px solid var(--hairline);padding:22px 0;}
.faq-item:last-child{padding-bottom:0;}
.faq-item .q{color:var(--navy);font-weight:700;font-size:1rem;margin:0 0 10px;display:flex;gap:12px;}
.faq-item .q::before{content:"Q";color:var(--gold);font-weight:900;}
.faq-item .a{margin:0;display:flex;gap:12px;color:var(--on-paper-body);font-size:.92rem;}
.faq-item .a::before{content:"A";color:var(--green);font-weight:900;flex-shrink:0;}

/* ---- supported prefectures grid ---- */
.pref-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:24px;}
.pref-item{text-align:center;}
.pref-item img{width:52px;height:52px;object-fit:contain;margin:0 auto 12px;display:block;}
.pref-item span{font-size:.82rem;color:var(--navy);font-weight:700;}

/* ---- report block (event write-up used on kyodo-dinner / wabitabi) ---- */
.report-block{padding:64px 0;}
.report-head{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;margin-bottom:32px;}
@media(max-width:860px){
  .report-head{grid-template-columns:1fr;gap:24px;}
  .report-head .gold-frame{order:-1;}
}
.report-head .gold-frame img{aspect-ratio:4/3;}
.report-meta{font-size:.78rem;color:var(--meta);letter-spacing:.04em;margin-bottom:10px;}
.report-head h3{color:var(--navy);font-size:1.3rem;}
.report-head p{color:var(--on-paper-body);}

.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
@media(max-width:760px){.gallery{grid-template-columns:repeat(2,1fr);}}
.gallery figure{margin:0;border:1px solid var(--hairline);background:var(--white);}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;}
.gallery figcaption{font-size:.72rem;color:var(--meta);padding:8px 10px;}