@charset "utf-8";
/* ==========================================================================
   つむぎの森保育園 デモサイト v2 — style.css
   架空サイト / noindex / 外部送信なし
   目次
   00 tokens
   01 base
   02 a11y (skip link / focus / reduced motion)
   03 layout helpers
   04 header / nav
   05 buttons
   06 hero (FV)
   07 quick info
   08 news / blog
   09 cta banners
   10 about / portal / values
   11 daily life (横スクロール)
   12 philosophy / recruit / access
   13 lower page parts (page-hero / feature / table / steps / faq / season)
   14 form / modal
   15 footer / mobile cta
   16 responsive 1180 / 1000 / 640
   ========================================================================== */

/* 00 tokens ------------------------------------------------------------- */
:root{
  --bg:#fffaf4;
  --paper:#fffdf9;
  --white:#ffffff;
  --ink:#332f2c;
  --muted:#6a635d;

  /* テキスト・CTAに使う濃いローズ
     白文字 5.52:1 ／ 本文背景 5.32:1 ／ CTAバナーのグラデ両端 4.69〜4.72:1
     いずれもWCAG AA(4.5:1)を満たす値に調整 */
  --rose:#a94a56;
  --rose-dark:#8f3d47;
  --rose-soft:#f7e2e4;

  /* 装飾専用の淡い色面（文字を載せない） */
  --pink:#ed8e9b;
  --pink2:#f9dee0;
  --mint:#b9ded4;
  --mint2:#eff7f2;
  --blue:#8fcbd1;
  --yellow:#f4d980;
  --green:#89ad87;

  --teal-ink:#4d6c71;
  --line:#e9ded3;
  --focus:#2b5f66;

  --wrap:1180px;
  --gutter:clamp(20px,4vw,40px);
  --header-h:82px;
  --radius:34px;
  --shadow-sm:0 10px 30px rgba(60,45,35,.05);
  --shadow-md:0 16px 50px rgba(76,55,40,.08);

  --serif:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP",serif;
  --sans:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic",Meiryo,system-ui,sans-serif;
}

/* 01 base --------------------------------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.85;
  -webkit-text-size-adjust:100%;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{line-height:1.5}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

/* sticky header 分のアンカーオフセット */
[id]{scroll-margin-top:calc(var(--header-h) + 20px)}

.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* 02 a11y --------------------------------------------------------------- */
.skip-link{
  position:fixed;top:-80px;left:16px;z-index:60;
  background:var(--white);color:var(--ink);
  border:2px solid var(--focus);border-radius:999px;
  padding:11px 20px;font-weight:700;font-size:14px;
  transition:top .18s ease;
}
.skip-link:focus{top:12px}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:4px;
  border-radius:6px;
}
.daily-track:focus-visible{border-radius:18px;outline-offset:2px}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    scroll-behavior:auto!important;
    transition:none!important;
    animation:none!important;
  }
}

/* 03 layout helpers ------------------------------------------------------ */
/* 幅は必ず「min(最大幅, 100% - 左右ガター)」で確保し、
   どのブレークポイントでも端に貼り付かないようにする */
.section{
  width:min(var(--wrap),100% - var(--gutter) * 2);
  margin-inline:auto;
  padding-block:clamp(56px,7vw,92px);
}
.section-head>span{
  display:block;
  font-size:12px;letter-spacing:.18em;font-weight:800;color:var(--rose);
}
.section-head h2{
  font-family:var(--serif);font-weight:600;letter-spacing:.06em;
  font-size:clamp(26px,3vw,44px);line-height:1.45;margin:8px 0 20px;
}
.section-head small{display:block;color:var(--muted);margin-top:6px;font-size:13px}
.section-head.center{text-align:center}
.section-head.center h2{margin-inline:auto}

.split,.two-col,.about-home,.philosophy,.recruit-home,.access{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(30px,4vw,66px);align-items:center;
}
.lead{font-size:clamp(15px,1.4vw,17px)}
.note{font-size:13px;color:var(--muted)}
.center-link{text-align:center;margin-top:34px}
.eyebrow{
  display:block;
  font-size:12px;letter-spacing:.18em;font-weight:800;color:var(--rose);
}
.hand-note{
  font-family:var(--serif);
  color:var(--teal-ink);
  transform:rotate(-1.5deg);
  transform-origin:left center;
  display:inline-block;
}
.text-link{display:inline-block;font-weight:700;margin-top:16px;color:var(--rose);
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.text-link.inline{margin-top:0}
.section-note{margin-top:16px}

/* ---- TOPだけの小さな装飾（純装飾 / aria-hidden前提） -------------------
   置き方のルール
   1. 親に isolation:isolate でスタッキングコンテキストを作り、装飾は z-index:-1。
      親の背景より前・本文より後ろに必ず描画されるため、テキストを覆わない。
   2. 絶対配置はセクションの上下パディング内（＝必ず空いている帯）だけに置く。
   3. オフセットは正の値のみ。負の値を使わないので横オーバーフローが起きない。
   4. pointer-events / user-select を切り、操作や選択の邪魔をしない。 */
.has-deco{position:relative;isolation:isolate}
.deco{
  position:absolute;z-index:-1;
  pointer-events:none;user-select:none;-webkit-user-select:none;
  opacity:.9;
}
.deco-leaf{top:12px;left:2px;width:clamp(44px,4.4vw,62px)}
.deco-flower{top:10px;right:2px;width:clamp(72px,8vw,112px)}
.deco-doodle{top:12px;right:14px;width:clamp(44px,5vw,66px)}

/* 街並みは絶対配置せず本文の流れに置く（どの幅でも重なりようがない） */
.deco-town{
  display:block;width:clamp(150px,20vw,220px);
  margin-top:10px;opacity:.9;
  pointer-events:none;user-select:none;-webkit-user-select:none;
}

/* 04 header / nav -------------------------------------------------------- */
.site-header{
  height:var(--header-h);
  display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:28px;
  padding-inline:var(--gutter);
  /* backdrop-filter は使わない。
     backdrop-filter を指定した要素は position:fixed の子孫（開いたモバイル
     ナビ）の包含ブロックになり、sticky ヘッダーとの組み合わせで挙動が
     ブラウザ依存になるため。不透明背景で確実に処理する。 */
  background:var(--paper);
  position:sticky;top:0;z-index:30;
  border-bottom:1px solid rgba(233,222,211,.8);
}
.brand{display:flex;gap:12px;align-items:center;white-space:nowrap}
.brand strong{display:block;font-family:var(--serif);font-size:20px;letter-spacing:.06em}
.brand small{display:block;font-size:11px;color:var(--muted);letter-spacing:.08em}
.brand-mark{display:flex;gap:3px;align-items:flex-end}
.brand-mark i{display:block;width:11px;height:30px;border-radius:50% 50% 42% 42%;background:var(--mint)}
.brand-mark i:nth-child(2){height:38px;background:var(--yellow)}
.brand-mark i:nth-child(3){height:27px;background:var(--pink)}

.global-nav{display:flex;justify-content:center;gap:20px;font-size:13px}
.global-nav a{padding:10px 2px;position:relative}
.global-nav a[aria-current="page"]{color:var(--rose);font-weight:700}
.global-nav a[aria-current="page"]::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;
  background:var(--rose);border-radius:2px;
}
.nav-cta{display:none}

.header-cta{
  background:var(--rose);color:var(--white);
  padding:13px 20px;border-radius:999px;font-size:13px;font-weight:700;
  white-space:nowrap;
}
.header-cta:hover{background:var(--rose-dark)}

.menu-btn{
  display:none;
  align-items:center;gap:8px;
  min-height:44px;padding:8px 10px;
  border:0;background:none;cursor:pointer;
  font-size:12px;font-weight:700;letter-spacing:.06em;
}
.menu-btn-bars{position:relative;display:block;width:22px;height:14px}
.menu-btn-bars::before,
.menu-btn-bars::after,
.menu-btn-bars i{
  content:"";position:absolute;left:0;width:22px;height:2px;
  background:var(--ink);border-radius:2px;transition:transform .2s ease,opacity .2s ease;
}
.menu-btn-bars::before{top:0}
.menu-btn-bars i{top:6px}
.menu-btn-bars::after{top:12px}
.menu-btn[aria-expanded="true"] .menu-btn-bars::before{transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-btn-bars i{opacity:0}
.menu-btn[aria-expanded="true"] .menu-btn-bars::after{transform:translateY(-6px) rotate(-45deg)}

/* 05 buttons ------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:13px 26px;
  border-radius:999px;border:1px solid var(--ink);
  font-weight:700;text-align:center;cursor:pointer;
  transition:background-color .2s ease,color .2s ease;
}
.btn-primary{background:var(--rose);border-color:var(--rose);color:var(--white)}
.btn-primary:hover{background:var(--rose-dark);border-color:var(--rose-dark)}
.btn-ghost{background:var(--white);color:var(--ink)}
.btn-ghost:hover{background:#fdf3ec}

/* 06 hero ---------------------------------------------------------------- */
.hero{
  position:relative;overflow:hidden;
  padding:clamp(30px,4vw,54px) var(--gutter) clamp(46px,6vw,72px);
}
.hero::before,.hero::after{
  content:"";position:absolute;border-radius:45% 55% 40% 60%;opacity:.6;z-index:0;
}
.hero::before{width:290px;height:210px;background:var(--pink2);left:-70px;top:40px;transform:rotate(-14deg)}
.hero::after{width:340px;height:220px;background:#dcf1eb;right:-90px;bottom:-70px;transform:rotate(16deg)}
.hero-inner{
  position:relative;z-index:1;
  width:min(var(--wrap),100%);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  gap:clamp(26px,4vw,58px);align-items:center;
  min-height:520px;
}
.hero h1{
  font-family:var(--serif);font-weight:600;letter-spacing:.06em;
  /* 1024pxでも42%カラムに収まる係数に調整 */
  font-size:clamp(32px,3.4vw,62px);
  line-height:1.4;margin:16px 0 22px;
}
.hero-copy p{font-size:15px}
.hero-media{position:relative}
.hero-media::before{
  content:"";position:absolute;inset:-18px 32px 32px -16px;
  background:var(--yellow);border-radius:35% 65% 43% 57%;z-index:0;opacity:.5;
}
/* .hero-media img だと同じ親の中にある .hero-bird にも当たり
   （詳細度 0,1,1 > 0,1,0）、鳥が写真サイズまで巨大化する。
   メイン写真専用の .hero-photo だけを対象にすること。 */
.hero-media .hero-photo{
  position:relative;z-index:1;
  width:100%;height:clamp(300px,42vw,520px);object-fit:cover;object-position:center 40%;
  border-radius:45% 55% 42% 58% / 36% 44% 56% 64%;
}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 18px}
.hero-actions .btn{flex:0 1 auto}
/* 鳥は .hero-media（写真側）を基準に配置する。
   ビューポート基準だと 1001〜1300px 付近で見出しに重なるため。 */
.hero-bird{position:absolute;width:clamp(34px,3.4vw,52px);height:auto;z-index:2}
.bird-a{left:-14px;top:-12px}
.bird-b{right:-6px;bottom:6%}

/* 07 quick info ---------------------------------------------------------- */
.quick-info{
  width:min(var(--wrap),100% - var(--gutter) * 2);
  margin:-34px auto clamp(56px,7vw,80px);
  padding:18px 24px;
  display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--white);border-radius:24px;
  box-shadow:var(--shadow-md);
  position:relative;z-index:2;
}
.quick-info div{text-align:center;padding:8px 10px;border-right:1px solid var(--line)}
.quick-info div:last-child{border-right:0}
.quick-info strong{display:block;font-size:clamp(16px,1.5vw,19px);line-height:1.5}
.quick-info span{display:block;color:var(--muted);font-size:12px;line-height:1.6}

/* 08 news / blog --------------------------------------------------------- */
.news-wrap{align-items:start}
.news-list{list-style:none;padding:0;margin:20px 0 0}
.news-list li{
  display:grid;grid-template-columns:minmax(0,208px) 1fr;gap:6px 16px;
  border-bottom:1px solid var(--line);padding:14px 0;align-items:center;
}
.news-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
/* ピルは .tag を付けた要素だけに適用する（日付を巻き込まない） */
.tag{
  display:inline-block;
  font-size:11px;background:var(--rose-soft);color:#7c3b45;
  border-radius:999px;padding:4px 12px;width:max-content;line-height:1.7;
}
.news-list a{text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(51,47,44,.25)}
.news-list a:hover{text-decoration-color:currentColor}
/* NEWSはカテゴリ＋タイトルのみ。長期掲載のため年月日は表示しない。 */

.blog-card{background:var(--white);padding:clamp(20px,2.4vw,28px);border-radius:30px;box-shadow:var(--shadow-sm)}
.mini-posts{display:grid;gap:14px;margin-bottom:16px}
.mini-posts article{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:center}
.mini-posts img{width:120px;height:78px;object-fit:cover;border-radius:14px}
.mini-posts p{margin:0;font-size:14px}

/* 09 cta banners --------------------------------------------------------- */
.visit-banner,.final-cta{
  width:min(var(--wrap),100% - var(--gutter) * 2);
  margin:24px auto clamp(50px,6vw,70px);
  border-radius:var(--radius);
  padding:clamp(28px,3.4vw,44px) clamp(24px,3.6vw,54px);
  background:linear-gradient(115deg,#fbe8e8,#fff4d8 55%,#dff1ec);
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(20px,3vw,32px);flex-wrap:wrap;
}
.visit-banner h2,.final-cta h2{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(22px,2.6vw,34px);line-height:1.5;margin:8px 0;
}
.visit-banner p,.final-cta p{margin:0;font-size:15px}
.final-cta{margin-top:clamp(50px,6vw,70px)}
.final-cta .hero-actions{margin:0}

/* 10 about / portal / values --------------------------------------------- */
.about-photo img,.philosophy-photo img,.two-col>img,.recruit-home>img{
  width:100%;height:clamp(280px,32vw,420px);object-fit:cover;
  border-radius:40% 60% 45% 55% / 48% 42% 58% 52%;
}
.portal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.portal-grid>a,.portal-grid>article{
  background:var(--white);border-radius:24px;padding:12px;
  box-shadow:var(--shadow-sm);
  transition:transform .2s ease,box-shadow .2s ease;
}
.portal-grid>a:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(60,45,35,.1)}
.portal-grid img{width:100%;height:170px;object-fit:cover;border-radius:18px}
.portal-grid strong,.portal-grid h3{
  display:block;font-size:18px;margin:12px 6px 2px;font-weight:700;line-height:1.5;
}
.portal-grid span,.portal-grid p{
  display:block;font-size:13px;color:var(--muted);margin:0 6px 12px;line-height:1.75;
}
.portal-grid.three{grid-template-columns:repeat(3,1fr)}
/* 園庭カード：園舎カードと印象が重ならないよう、子どもたちの側に寄せて切り抜く */
.portal-grid .thumb-outdoor{object-position:center 62%}

/* 全幅の色面はラッパーで作る（負のinsetを使わず横オーバーフローを作らない） */
.values-bleed{
  background:var(--mint2);
  border-radius:clamp(28px,5vw,70px) clamp(28px,5vw,70px) 0 0;
  margin-top:clamp(30px,5vw,60px);
}
.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:42px}
.value-grid article{background:var(--white);padding:18px;border-radius:30px;box-shadow:var(--shadow-sm)}
.value-grid img{width:100%;height:230px;object-fit:cover;border-radius:24px}
.value-grid article>span{display:block;color:var(--rose);font-size:12px;font-weight:800;letter-spacing:.14em;margin-top:14px}
.value-grid h3{font-family:var(--serif);font-size:26px;margin:6px 0 8px;font-weight:600}
.value-grid strong{display:block;margin-bottom:8px;font-size:15px}
.value-grid p{font-size:14px;color:var(--muted)}

/* 11 daily life（意図的に横スクロールする唯一の領域） -------------------- */
.daily-track{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(168px,1fr);
  gap:16px;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  padding:10px 2px 22px;
  scrollbar-width:thin;
}
.daily-track article{scroll-snap-align:start}
.daily-track img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:42% 58% 46% 54%}
.daily-track time{display:block;color:var(--rose);font-weight:800;margin-top:12px;font-size:14px}
.daily-track h3{margin:2px 0;font-size:16px}
.daily-track p{font-size:13px;color:var(--muted);margin:0}
.scroll-hint{font-size:12px;color:var(--muted);margin:0 0 6px}

/* 12 philosophy / recruit / access ---------------------------------------- */
.philosophy p{font-size:15px}
.recruit-home{
  background:#fff2ee;border-radius:40px;
  padding-inline:clamp(24px,3.4vw,60px);
}
/* 地図は画像本来の比率をそのまま使う。
   aspect-ratio で比率を固定すると、素材の比率と食い違ったときに
   引き伸ばしやレターボックスの余白が出るため指定しない。
   .access img だと同じセクション内の装飾SVG（.deco-town）にも当たるため、
   地図専用の .access-map に限定すること（.hero-media img と同じ轍）。 */
.access .access-map{
  border-radius:24px;
  width:100%;
  height:auto;
  aspect-ratio:auto;
  object-fit:contain;
}
.access-list{list-style:none;padding:0;margin:0 0 16px}
.access-list li{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.access-list b{font-weight:700;font-size:14px;color:var(--muted)}

/* 13 lower page parts ----------------------------------------------------- */
.page-hero{
  padding:clamp(64px,8vw,110px) var(--gutter) clamp(52px,7vw,90px);
  text-align:center;background:linear-gradient(180deg,#fff9f4,#f9eee8);
}
.page-hero h1{
  font-family:var(--serif);font-weight:600;letter-spacing:.06em;
  font-size:clamp(30px,4.4vw,58px);margin:10px 0 14px;
}
.page-hero p{color:var(--muted);max-width:44em;margin-inline:auto;font-size:15px}

.feature-detail article{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(26px,4vw,58px);align-items:center;
  margin-bottom:clamp(46px,6vw,86px);
}
.feature-detail article:last-of-type{margin-bottom:0}
.feature-detail article:nth-of-type(even) .feature-photo{order:2}
.feature-detail .feature-photo{width:100%;height:clamp(240px,28vw,360px);object-fit:cover;border-radius:36px}
.feature-detail span{display:block;color:var(--rose);font-weight:800;font-size:13px;letter-spacing:.14em}
.feature-detail h2{font-family:var(--serif);font-weight:600;font-size:clamp(24px,2.6vw,34px);margin:6px 0 14px}

.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card-grid>article{background:var(--white);border-radius:24px;padding:26px;box-shadow:var(--shadow-sm)}
.card-grid h3{font-size:19px;margin:8px 0 10px}
.card-grid p{font-size:14px;color:var(--muted);margin:0}
.card-grid span{color:var(--rose);font-size:12px;font-weight:800;letter-spacing:.14em}

.info-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.info-cards article{background:var(--white);padding:30px;border-radius:24px;text-align:center;box-shadow:var(--shadow-sm)}
.info-cards span{display:block;color:var(--rose);font-size:12px;font-weight:800;letter-spacing:.14em}
.info-cards h3{font-size:16px;margin:8px 0 4px;color:var(--muted)}
.info-cards p{font-size:clamp(20px,2.2vw,26px);font-weight:700;margin:0}

.spec-table{width:100%;border-collapse:collapse;background:var(--white);border-radius:24px;overflow:hidden;box-shadow:var(--shadow-sm)}
.spec-table caption{caption-side:bottom;text-align:left;font-size:12px;color:var(--muted);padding-top:12px}
.spec-table th,.spec-table td{text-align:left;padding:16px 22px;border-bottom:1px solid var(--line);font-size:15px;vertical-align:top}
.spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:0}
.spec-table th{width:190px;background:#fdf6ef;font-weight:700;white-space:nowrap}

.steps{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  list-style:none;padding:0;margin:0;counter-reset:step;
}
.steps li{
  background:var(--white);border-radius:24px;padding:44px 24px 26px;
  position:relative;counter-increment:step;box-shadow:var(--shadow-sm);
}
.steps li::before{
  content:"STEP " counter(step,decimal-leading-zero);
  position:absolute;top:20px;left:24px;
  color:var(--rose);font-weight:800;font-size:12px;letter-spacing:.14em;
}
.steps strong{display:block;font-size:18px;margin-bottom:8px}
.steps span{font-size:13px;color:var(--muted)}

.check-list{padding-left:1.2em;margin:0}
.check-list li{margin:8px 0}

.faq{display:grid;gap:12px}
.faq details{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:2px 22px}
.faq summary{
  cursor:pointer;font-weight:700;padding:18px 30px 18px 0;position:relative;list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:2px;top:50%;
  width:9px;height:9px;border-right:2px solid var(--rose);border-bottom:2px solid var(--rose);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .faq-body{padding:0 0 20px;font-size:14px;color:var(--muted)}

.season-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.season-grid article{background:var(--white);border-radius:24px;padding:24px;box-shadow:var(--shadow-sm)}
.season-grid h3{font-family:var(--serif);font-size:20px;margin:0 0 10px;font-weight:600}
.season-grid ul{margin:0;padding-left:1.1em;font-size:14px;color:var(--muted)}
.season-grid li{margin:4px 0}

.news-archive{display:grid;gap:18px}
.news-archive article{background:var(--white);border-radius:24px;padding:clamp(22px,2.4vw,30px);box-shadow:var(--shadow-sm)}
.news-archive .news-meta{margin-bottom:10px}
.news-archive h3{font-size:20px;margin:0 0 8px}
.news-archive p{font-size:14px;color:var(--muted);margin:0}

/* 14 form / modal --------------------------------------------------------- */
.form-wrap{width:min(760px,100% - var(--gutter) * 2)}
.form-wrap form{background:var(--white);border-radius:30px;padding:clamp(24px,3vw,34px);display:grid;gap:20px;box-shadow:var(--shadow-sm)}
.field{display:grid;gap:8px}
.field>label{font-weight:700;font-size:15px}
.req{
  display:inline-block;margin-left:8px;font-size:11px;font-weight:700;
  background:var(--rose-soft);color:#7c3b45;border-radius:999px;padding:2px 9px;vertical-align:2px;
}
.form-wrap input,.form-wrap select,.form-wrap textarea{
  width:100%;border:1px solid #d5cac2;border-radius:12px;padding:13px;background:var(--white);
  min-height:48px;
}
.form-wrap textarea{min-height:140px;resize:vertical}
.form-wrap .hint{font-size:12px;color:var(--muted)}
.form-note{font-size:13px;color:var(--muted);background:#fdf6ef;border-radius:14px;padding:14px 16px;margin:0}

.modal{position:fixed;inset:0;background:rgba(35,30,28,.55);z-index:100;display:grid;place-items:center;padding:20px}
.modal[hidden]{display:none}
.modal-panel{background:var(--white);border-radius:28px;padding:34px 30px 30px;max-width:480px;position:relative}
.modal-panel h2{font-size:22px;margin:0 0 12px}
.modal-panel p{font-size:14px;color:var(--muted)}
.modal-close{
  position:absolute;right:10px;top:8px;
  width:44px;height:44px;display:grid;place-items:center;
  border:0;background:none;font-size:26px;line-height:1;cursor:pointer;border-radius:50%;
}
.modal-close:hover{background:#f7efe8}
.modal-ok{margin-top:18px}
body.modal-open,body.nav-open{overflow-y:hidden}

/* 15 footer / mobile cta -------------------------------------------------- */
.site-footer{background:#eef4eb;padding:clamp(44px,6vw,58px) var(--gutter) 24px;margin-top:clamp(50px,7vw,70px)}
.footer-inner{
  width:min(var(--wrap),100%);margin-inline:auto;
  display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;
}
.footer-brand strong{display:block;font-family:var(--serif);font-size:22px}
.footer-brand span{font-size:11px;color:var(--muted)}
.footer-nav{display:grid;grid-template-columns:repeat(2,auto);gap:6px 28px;font-size:13px}
.footer-nav a{text-decoration:underline;text-underline-offset:4px;text-decoration-color:transparent}
.footer-nav a:hover{text-decoration-color:currentColor}
.footer-contact{max-width:280px}
.footer-contact strong{display:block;font-size:14px}
.footer-contact p{font-size:12px;color:var(--muted);margin:4px 0 12px}
.footer-contact .btn{min-height:44px;padding:10px 20px;font-size:13px}
.demo-note{
  width:min(var(--wrap),100%);margin:40px auto 10px;padding-top:20px;
  border-top:1px solid #d9e0d7;font-size:12px;color:var(--muted);
}
.copyright{width:min(var(--wrap),100%);margin-inline:auto;font-size:11px;color:var(--muted)}

.mobile-cta{display:none}

/* 16 responsive ----------------------------------------------------------- */

/* 1180px以下：デスクトップナビが残る 1101〜1180px でヘッダーを詰める */
@media (max-width:1180px){
  .site-header{gap:18px}
  .global-nav{gap:14px;font-size:12.5px}
  .header-cta{padding:12px 16px;font-size:12.5px}
  .brand strong{font-size:18px}
  /* 2カラムのままタイトルが折り返さないようメタ列を詰める */
  .news-list li{grid-template-columns:minmax(0,180px) 1fr}
}

/* 1100px以下：ハンバーガー / 1カラム化
   1024px でデスクトップナビを無理に維持せず、タブレットでは余白を優先する。
   JS 側の matchMedia も同じ 1100px に統一している。 */
@media (max-width:1100px){
  .site-header{grid-template-columns:auto 1fr auto}
  .global-nav{
    position:fixed;inset:var(--header-h) 0 auto;
    background:var(--white);padding:20px var(--gutter) 28px;
    display:none;flex-direction:column;gap:0;
    max-height:calc(100dvh - var(--header-h));overflow-y:auto;
    box-shadow:0 14px 24px rgba(0,0,0,.08);font-size:15px;
  }
  .global-nav.open{display:flex}
  .global-nav a{padding:14px 4px;border-bottom:1px solid var(--line)}
  .global-nav a[aria-current="page"]::after{display:none}
  .nav-cta{
    display:flex;align-items:center;justify-content:center;
    margin-top:20px;background:var(--rose);color:var(--white);
    border-radius:999px;border-bottom:0;font-weight:700;min-height:50px;
  }
  .nav-cta:hover{background:var(--rose-dark)}
  .menu-btn{display:inline-flex;justify-self:end}
  .header-cta{display:none}

  .hero-inner{grid-template-columns:1fr;min-height:0}
  /* 黄色の色面(-18px)と鳥(-12px)がFVコピーに重ならない余白を確保 */
  .hero-media{margin-top:40px}

  .quick-info{margin-top:-14px}

  .split,.two-col,.about-home,.philosophy,.recruit-home,.access{grid-template-columns:1fr}
  .philosophy-photo{order:-1}
  .portal-grid,.portal-grid.three,.value-grid,.card-grid,.info-cards{grid-template-columns:repeat(2,1fr)}
  .feature-detail article{grid-template-columns:1fr;gap:24px}
  .feature-detail article:nth-of-type(even) .feature-photo{order:0}
  .steps,.season-grid{grid-template-columns:repeat(2,1fr)}
  .visit-banner,.final-cta{display:block}
  .visit-banner>.btn{margin-top:20px}
  .final-cta .hero-actions{margin-top:20px}
  .footer-inner{gap:26px}
}

/* 768px前後：QUICK INFOを2×2に、テーブルを縦積みへ */
@media (max-width:860px){
  .quick-info{grid-template-columns:repeat(2,1fr);padding:12px 14px}
  .quick-info div{border-right:0;border-bottom:1px solid var(--line)}
  .quick-info div:nth-child(3),.quick-info div:nth-child(4){border-bottom:0}
}

/* 640px以下（390px想定） */
@media (max-width:640px){
  :root{--header-h:68px}
  .site-header{gap:10px}
  .brand strong{font-size:16px}
  .brand small{display:none}
  /* ラベルは見た目だけ隠し、ボタンのアクセシブルネームは残す */
  .menu-btn-label{
    position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  }

  .hero{padding-bottom:38px}
  .hero h1{font-size:clamp(30px,8.6vw,40px);margin:14px 0 18px}
  .hero-copy p{font-size:14.5px}
  .hero-media .hero-photo{height:clamp(260px,66vw,330px)}
  .hero-actions{margin:22px 0 14px}
  .hero-actions .btn{flex:1 1 100%}

  /* SPでは装飾を1点減らし、残りは小さくして余白内に収める */
  .deco-leaf{display:none}
  .deco-flower{top:12px;right:0;width:62px}
  .deco-doodle{top:10px;right:12px;width:44px}
  .deco-town{width:clamp(140px,44vw,180px);margin-top:8px}

  .quick-info{margin-bottom:44px}

  .section-head h2{font-size:clamp(24px,6.6vw,30px)}
  .news-list li{grid-template-columns:1fr;gap:4px}
  .mini-posts article{grid-template-columns:92px 1fr;gap:12px}
  .mini-posts img{width:92px;height:70px}

  .portal-grid,.portal-grid.three,.value-grid,.card-grid,.info-cards,
  .steps,.season-grid{grid-template-columns:1fr}
  .portal-grid img{height:200px}
  .value-grid img{height:220px}

  /* DAILY LIFE のみ横スクロール（カードを画面幅に対して大きく） */
  .daily-track{grid-auto-columns:minmax(72vw,1fr);scroll-snap-type:x mandatory;gap:14px}

  .about-photo img,.philosophy-photo img,.two-col>img,.recruit-home>img{height:clamp(240px,64vw,320px)}

  .visit-banner,.final-cta{padding:26px 22px}
  .visit-banner>.btn{width:100%}
  .final-cta .hero-actions .btn{flex:1 1 100%}

  /* テーブルは横スクロールさせず縦積み */
  .spec-table,.spec-table tbody,.spec-table tr,.spec-table th,.spec-table td{display:block;width:auto}
  .spec-table tr{border-bottom:1px solid var(--line);padding:6px 0}
  .spec-table tr:last-child{border-bottom:0}
  .spec-table th{background:none;padding:14px 18px 0;white-space:normal;font-size:13px;color:var(--muted);border-bottom:0}
  .spec-table td{padding:2px 18px 14px;border-bottom:0}
  /* 表本体を display:block にすると caption が匿名テーブルボックスに包まれて
     幅を失い、日本語が1文字ずつ縦に折れる。ブロック化して幅を明示する。 */
  .spec-table caption{
    display:block;
    width:100%;
    box-sizing:border-box;
    white-space:normal;
    text-align:left;
    padding:18px 18px 4px;
    caption-side:top;
  }

  .footer-inner{display:block}
  .footer-nav,.footer-contact{margin-top:24px}
  .footer-contact{max-width:none}

  /* 主要CTAを常時表示（画面外に出ない） */
  .mobile-cta{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:40;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
    /* ヘッダーと同様に backdrop-filter は使わず不透明背景にする */
    background:var(--paper);
    border-top:1px solid var(--line);
  }
  .mobile-cta .btn{width:100%;min-height:52px}
  /* バーの出入りでコンテンツが動かないよう、余白は常に確保しておく */
  body.has-mobile-cta{padding-bottom:88px}

  /* JSがIntersectionObserverで制御できたときだけ、既定を「隠す」に切り替える。
     JS無効・非対応時は .js-cta-managed が付かず、従来どおり常時表示される。
     transition は prefers-reduced-motion の共通指定で自動的に無効化され、
     表示条件そのものは変わらない。 */
  .mobile-cta.js-cta-managed{
    transform:translateY(115%);
    visibility:hidden;
    transition:transform .25s ease,visibility .25s;
  }
  .mobile-cta.js-cta-managed.is-visible{
    transform:none;
    visibility:visible;
  }

  /* ナビ展開中は固定CTAを隠す（ナビ内にCTAがあるため重複させない） */
  body.nav-open .mobile-cta{display:none}
}