/* uminohoshi base — design tokens, typography, buttons */

/* ─────────── CSS Reset (Tailwind Preflight 相当) ─────────── */
/* プロトタイプは Tailwind CDN の Preflight でリセット済み。
   WordPress にはそれがないのでブラウザデフォルト余白を明示的にゼロにする。 */
*, *::before, *::after { box-sizing: border-box; }
h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; }
p  { margin: 0; padding: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd { margin: 0; padding: 0; }
blockquote { margin: 0; padding: 0; }
figure { margin: 0; }
img, svg { display: block; }
img { max-width: 100%; }
table { border-collapse: collapse; }

  :root{
    --c-bg:          #ffffff;
    --c-bg-warm:     #FAF8F3;
    --c-bg-cream:    #FBF3E0;
    --c-bg-sky:      #EDF4FA;
    --c-blue-50:     #EDF4FA;
    --c-blue-100:    #D7E6F1;
    --c-blue-200:    #A8C8E0;
    --c-blue-400:    #6FA8C8;
    --c-blue-600:    #3F7FA3;
    --c-blue-800:    #2C5A78;
    --c-orange:      #F5923A;
    --c-orange-dark: #E07626;
    --c-yellow:      #F5C76A;
    /* キャッチコピー用。園舎のベージュとも床の木目とも離れる薄い緑（先方指示 2026-09-16） */
    --c-green-soft:  #AEE6B8;
    --c-yellow-dark: #E2B14C;
    --c-text:        #333333;
    --c-text-sub:    #555555;
    --c-text-mute:   #666666;
    --c-border:      #ECE7D9;
    --c-border-soft: #F2EEE3;
    --shadow-sm:     0 2px 8px rgba(63, 127, 163, .06), 0 1px 2px rgba(0,0,0,.03);
    --shadow-md:     0 8px 28px rgba(63, 127, 163, .10), 0 2px 6px rgba(0,0,0,.04);
    --shadow-lg:     0 24px 60px rgba(63, 127, 163, .14), 0 8px 18px rgba(0,0,0,.05);
    --accent:        var(--c-orange);
    --accent-dark:   var(--c-orange-dark);
  }
  *{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
  html,body{ background:var(--c-bg); color:var(--c-text); }
  body{
    font-family: "M PLUS 1p", system-ui, -apple-system, "Hiragino Kaku Gothic ProN","Yu Gothic", sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.9;
    letter-spacing: .02em;
    color: #333333;
  }
  .serif{ font-family: "M PLUS 1p", sans-serif; }
  .container-x{ max-width: 1200px; margin-inline:auto; padding-inline:24px; }
  @media(min-width:768px){ .container-x{ padding-inline:32px; } }

  /* ─────────── Section ─────────── */
  .section{ padding-block: 80px; }
  @media(min-width:768px){ .section{ padding-block: 120px; } }
  .eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-size: 15px; letter-spacing:.18em; color:var(--c-blue-600); font-weight:600;
  }
  .eyebrow::before{
    content:""; width:28px; height:1px; background:var(--c-blue-400);
  }
  .h-title{
    font-weight:700; letter-spacing:.04em; color:var(--c-text);
    font-size: clamp(26px, 3.2vw, 36px);
    line-height: 1.5;
  }
  .h-title small{
    display:block; font-size: 15px; letter-spacing:.22em; color:var(--c-blue-600);
    font-weight:700; margin-bottom: 14px;
  }
  .lede{ color:var(--c-text-sub); font-size:15.5px; line-height:2.0; }

  /* ─────────── Buttons ─────────── */
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    padding: 14px 26px; border-radius: 999px;
    font-size: 15px; font-weight: 700; letter-spacing: .08em;
    text-decoration: none; transition: transform .15s, box-shadow .15s, background .15s;
  }
  .btn .arr{ width:16px; height:16px; display:inline-grid; place-items:center; }
  .btn-primary{ background: var(--accent); color:#fff; box-shadow: 0 8px 22px rgba(232,168,124,.42); }
  .btn-primary:hover{ background: var(--accent-dark); transform: translateY(-1px); }
  .btn-secondary{ background: rgba(255,255,255,.94); color: var(--c-blue-600); }
  .btn-secondary:hover{ background:#fff; transform: translateY(-1px); }
  .btn-outline{ border:1.5px solid var(--c-blue-400); color: var(--c-blue-600); background:#fff; }
  .btn-outline:hover{ background: var(--c-blue-50); }
  .btn-text{ font-weight:600; color: var(--c-blue-600); font-size: 15px; }
  .btn-text:hover{ color: var(--c-blue-800); }