@import url("../style.css");
/* ============================================================
   おおわだ幼稚園 デザイン B案「絵本のような、あたたかい世界」
   明朝見出し × クリーム/テラコッタ/若葉 × アーチ写真・中央構成
   ※A案CSSを@importで継承し、変数と一部ルールを上書きして全ページをB世界観に。
   ============================================================ */
/* A案が使う変数名をB配色・明朝に上書き（下層9ページもB世界観に） */
:root{
  --paper:#FBF7EF; --paper-deep:#F3EADB; --card:#FFFDF8;
  --ink:#4A3F35; --ink-soft:#8A7A6B;
  --blue:#DCA98D; --blue-deep:#C9765A; --blue-dark:#A85838; --blue-pale:#F6ECDD;
  --star:#7C9E5E; --star-deep:#5C7A42; --line:#E7DCC8;
  --maru:"Zen Old Mincho",serif; --sans:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;
  --shadow:0 14px 40px rgba(94,74,53,.10);
}
/* B案は動きをゆっくり（絵本のページめくり） */
html.js .anim .rv.on,html.js .anim .snap.on,html.js .anim .rvx-l.on,html.js .anim .rvx-r.on{transition-duration:1s !important}
/* 比較提案版では本番用の固定CTAは隠す */
.sticky-cta{display:none !important}

:root{
  --paper:#FBF7EF;
  --paper-deep:#F3EADB;
  --card:#FFFDF8;
  --ink:#4A3F35;
  --ink-soft:#8A7A6B;
  --brown:#6E5847;
  --terra:#C9765A;
  --terra-deep:#A85838;
  --green:#7C9E5E;
  --green-deep:#5C7A42;
  --line:#E7DCC8;
  --shadow:0 14px 40px rgba(94,74,53,.10);
  --mincho:"Zen Old Mincho",serif;
  --sans:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;overflow-x:clip;font-family:var(--sans);font-size:15.5px;line-height:2.0;letter-spacing:.04em;
  color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--terra-deep)}
.wrap{max-width:1040px;margin:0 auto;padding:0 24px}
.narrow{max-width:760px}

h1,h2,h3{font-family:var(--mincho);font-weight:700;line-height:1.6;margin:0;letter-spacing:.04em}
h2{font-size:clamp(27px,3.8vw,38px)}
h3{font-size:clamp(19px,2.3vw,23px)}
.lead{max-width:34em;color:var(--ink-soft)}

/* 小見出し（英語＋和） */
.eyebrow{display:inline-flex;align-items:center;gap:.7em;font-family:var(--mincho);font-size:12.5px;
  letter-spacing:.22em;color:var(--terra-deep);margin-bottom:1.2em}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--terra)}

/* リビール（ふわっと・ゆっくり＝絵本のページめくり） */
.rv{opacity:1}
html.js .anim .rv{opacity:0;transform:translateY(20px)}
html.js .anim .rv.on{opacity:1;transform:none;transition:opacity 1s var(--ease),transform 1s var(--ease)}
html.js .anim .rv.d1.on{transition-delay:.12s}
html.js .anim .rv.d2.on{transition-delay:.24s}
html.js .anim .rv.d3.on{transition-delay:.36s}

/* ヘッダー */
.header{position:sticky;top:0;z-index:50;background:rgba(251,247,239,.9);border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
.header-in{max-width:1120px;margin:0 auto;padding:16px 24px;display:flex;align-items:center;gap:18px}
.brand{font-family:var(--mincho);font-weight:700;font-size:21px;color:var(--ink);text-decoration:none;letter-spacing:.1em;line-height:1.3}
.brand small{display:block;font-family:var(--sans);font-weight:400;font-size:10px;color:var(--ink-soft);letter-spacing:.16em;margin-top:2px}
.brand .leaf{color:var(--green)}
.nav{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
.nav a{font-family:var(--mincho);font-size:14px;color:var(--ink);text-decoration:none;padding:8px 12px;border-radius:4px;transition:color .3s}
.nav a:hover{color:var(--terra-deep)}
.nav-toggle{display:none}

/* ヒーロー：アーチ写真＋中央コピー（絵本の扉） */
.hero{text-align:center;padding:56px 0 20px;position:relative;overflow:hidden}
.hero-arch{max-width:600px;margin:0 auto;position:relative}
.hero-arch img{width:100%;aspect-ratio:5/4;object-fit:cover;border-radius:300px 300px 20px 20px;box-shadow:var(--shadow)}
.hero-arch::after{content:"";position:absolute;inset:0;border-radius:300px 300px 20px 20px;
  box-shadow:inset 0 0 0 6px rgba(255,255,255,.6)}
.hero h1{font-size:clamp(30px,5.4vw,52px);margin:.7em 0 0;color:var(--ink);line-height:1.65}
.hero .hero-sub{max-width:30em;margin:1.2em auto 0;color:var(--ink-soft);font-size:clamp(14px,1.6vw,16px)}
.hero-cta{margin-top:2em;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero-deco{position:absolute;font-family:var(--mincho);color:var(--paper-deep);font-size:200px;line-height:1;z-index:-1;user-select:none}
.hero-deco.l{left:-40px;top:40px}
.hero-deco.r{right:-40px;bottom:0}

/* ボタン（きちっとした角丸＝大人の品） */
.btn{display:inline-block;font-family:var(--mincho);font-weight:700;font-size:15px;text-decoration:none;
  padding:14px 34px;border-radius:8px;transition:transform .15s,background .3s,color .3s,box-shadow .3s;cursor:pointer;border:1.5px solid transparent}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--terra);color:#fff;box-shadow:0 8px 20px rgba(201,118,90,.28)}
.btn-primary:hover{background:var(--terra-deep)}
.btn-ghost{border-color:var(--brown);color:var(--brown);background:transparent}
.btn-ghost:hover{background:var(--brown);color:#fff}

/* お知らせ帯 */
.notice{margin:56px 0 0;background:var(--green-deep);color:#fff}
.notice-in{max-width:1040px;margin:0 auto;padding:22px 24px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.notice .tag{font-family:var(--mincho);font-size:12px;letter-spacing:.18em;background:rgba(255,255,255,.2);border-radius:4px;padding:4px 12px}
.notice p{margin:0;flex:1;min-width:240px;font-size:14.5px}
.notice a{color:#fff;font-family:var(--mincho);white-space:nowrap;border-bottom:1px solid rgba(255,255,255,.6);text-decoration:none;padding-bottom:2px}

/* セクション */
.sec{padding:96px 0}
.sec-head{margin-bottom:2.8em}

/* 園紹介（左テキスト・右アーチ写真） */
.intro{display:grid;grid-template-columns:1fr .82fr;gap:56px;align-items:center}
.intro .i-txt p{margin:1.2em 0 0;color:var(--ink-soft);max-width:32em}
.intro figure{margin:0}
.intro img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:200px 200px 16px 16px;box-shadow:var(--shadow)}
.intro figcaption{font-size:12.5px;color:var(--ink-soft);margin-top:.9em;text-align:center}

/* 5つの子ども像（明朝の縦リスト・罫線区切り・大きな数字） */
.kodomozo{max-width:640px;margin:0 auto;list-style:none;padding:0}
.kodomozo li{display:flex;align-items:baseline;gap:26px;padding:24px 4px;border-bottom:1px solid var(--line)}
.kodomozo li:last-child{border-bottom:none}
.kodomozo .kz-n{font-family:var(--mincho);font-size:clamp(30px,4vw,40px);color:var(--terra);line-height:1;min-width:1.4em}
.kodomozo li:nth-child(2n) .kz-n{color:var(--green)}
.kodomozo .kz-t{font-family:var(--mincho);font-size:clamp(17px,2.3vw,21px)}

/* 全幅写真（アーチ上辺） */
.bleed{max-width:1180px;margin:0 auto;padding:0 24px}
.bleed img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:180px 180px 24px 24px;box-shadow:var(--shadow)}
.bleed figcaption{text-align:center;font-size:13px;color:var(--ink-soft);margin-top:1em;font-family:var(--mincho)}

/* 通わせやすさ3カード */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cards li{list-style:none;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:34px 28px;transition:transform .35s var(--ease),box-shadow .35s}
.cards li:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.cards .c-num{font-family:var(--mincho);font-size:25px;color:var(--terra-deep);display:block}
.cards h3{margin:.5em 0 .5em;font-size:19px}
.cards p{margin:0;font-size:14px;color:var(--ink-soft)}
.cards a{font-family:var(--mincho);font-size:13.5px;display:inline-block;margin-top:1em;color:var(--terra-deep)}

/* クロージング */
.closing{text-align:center;padding:104px 0;background:var(--paper-deep)}
.closing h2{margin-bottom:.6em}
.closing p{color:var(--ink-soft);max-width:30em;margin:0 auto 2em}

/* フッター */
.footer{background:var(--brown);color:#F3EADB;padding:64px 0}
.footer .wrap{text-align:center}
.f-brand{font-family:var(--mincho);font-size:22px;letter-spacing:.1em;margin:0 0 .3em}
.f-brand .leaf{color:#A9C48A}
.footer p{margin:.2em 0;font-size:13.5px;opacity:.9}
.footer nav{margin-top:1.6em;display:flex;gap:8px 18px;justify-content:center;flex-wrap:wrap}
.footer nav a{color:#F3EADB;font-family:var(--mincho);font-size:13.5px;text-decoration:none;opacity:.85}
.footer nav a:hover{opacity:1;text-decoration:underline}

/* 案切り替えバー（比較提案用・商談で説明） */
.variant-bar{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:80;display:flex;gap:6px;
  background:rgba(74,63,53,.92);padding:7px;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.2);backdrop-filter:blur(6px)}
.variant-bar a{font-family:var(--sans);font-weight:500;font-size:12.5px;color:#fff;text-decoration:none;padding:7px 16px;border-radius:999px;white-space:nowrap;opacity:.7}
.variant-bar a:hover{opacity:1}
.variant-bar a.on{background:var(--terra);opacity:1}

@media (max-width:860px){
  .intro{grid-template-columns:1fr;gap:32px}
  .cards{grid-template-columns:1fr}
}
@media (max-width:640px){
  .sec{padding:72px 0}
  .nav-toggle{display:inline-flex;align-items:center;gap:6px;margin-left:auto;cursor:pointer;font-family:var(--mincho);
    font-size:13px;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:6px;padding:8px 14px}
  html.js .nav{display:none;width:100%;flex-direction:column;gap:2px;margin-top:8px}
  html.js .nav.open{display:flex}
  html.js .header-in{flex-wrap:wrap}
  .hero h1{font-size:30px}
  .hero-arch img{aspect-ratio:1/1}
  .variant-bar{bottom:10px}
  .variant-bar a{padding:7px 13px;font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  html.js .anim .rv{opacity:1 !important;transform:none !important;transition:none !important}
  .btn:hover,.cards li:hover{transform:none}
}