/* ===========================================================
   top.css — トップページ専用
   =========================================================== */

/* --- 01 ファーストビュー --------------------------------- */
/* カンプ：FV枠 y=210、写真 x=160 y=323 1120×739（下8pxは枠で切れる）
   数値はすべて「1440幅のデザイン上の値 × --u」。ヘッダーと同じ比率で縮む */

.fv {
  position: relative;
  isolation: isolate;          /* 背景の水彩を、この枠の中で一番後ろに置くため */
  width: calc(1120 * var(--u));
  margin: calc(7 * var(--u)) auto calc(8 * var(--u));
  padding-top: calc(113 * var(--u));   /* 縦組みコピーが写真より上から始まる分 */
}

.fv__media {
  overflow: hidden;
  background: var(--c-placeholder);
  aspect-ratio: 1120 / 739;
}

.fv__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 背景の水彩。写真の後ろに置き、画面の外まではみ出す */
.fv__wash {
  position: absolute;
  z-index: -1;
  opacity: .63;
  pointer-events: none;
}
.fv__wash--right { right: calc(-160 * var(--u)); top: calc(-40 * var(--u)); width: calc(520 * var(--u)); }
.fv__wash--left  { left:  calc(-160 * var(--u)); top: calc(200 * var(--u)); width: calc(420 * var(--u)); }

/* キャッチコピー（Figma 実測）
   位置：FV枠の x=1040 y=17、2列で幅172
   文字：32px、1文字あたり約46px（字間14px）
   帯：幅62、色 rgba(247,245,240,.52)、左の列は82px下げる */
.fv__catch {
  position: absolute;
  top: calc(17 * var(--u));
  right: calc(75 * var(--u));
  margin: 0;
  writing-mode: vertical-rl;   /* 1行目が右、2行目が左 */
  font-family: var(--font-head);
  font-size: calc(32 * var(--u));
  font-weight: 700;
  line-height: 1;
  letter-spacing: calc(14 * var(--u));
  color: var(--c-text);
  text-shadow: 0 4px 4px rgba(255, 255, 255, .25);
}

.fv__line {
  display: block;
  white-space: nowrap;         /* 1行を必ず1列に */
  padding: calc(4 * var(--u)) calc(15 * var(--u)) 0;
  background: rgba(247, 245, 240, .52);
}

/* 2列目：右の列との間（block＝横）36、下げる量（inline＝縦）82 */
.fv__line + .fv__line {
  margin-block-start: calc(36 * var(--u));
  margin-inline-start: calc(82 * var(--u));
}

/* FVのボタン：ボタンごと比例で縮む（文字は12pxより小さくしない） */
.fv__btn {
  --btn-h: calc(60 * var(--u));
  --arrow: calc(22 * var(--u));
  position: absolute;
  left: calc(58 * var(--u));
  bottom: calc(71 * var(--u));
  min-width: calc(246 * var(--u));
  font-size: max(12px, calc(16 * var(--u)));
}

/* ボタンの左にかかるガーランド */
.fv__garland {
  position: absolute;
  left: calc(-9 * var(--u));
  top: calc(657 * var(--u));
  width: calc(198 * var(--u));
  pointer-events: none;
}

/* --- 02 ごあいさつ --------------------------------------- */
/* カンプ：枠 y=1070 高さ770。見出し y=83 → 本文 y=217 → ボタン y=681 */

.greeting {
  position: relative;
  isolation: isolate;
  height: 770px;
  padding-top: 83px;
  text-align: center;
}

.greeting__head {
  color: var(--c-text-sub);
  font-family: var(--font-head);
  font-size: 24px;
  line-height: 1.46;
}

.greeting__body {
  width: 736px;
  margin: 64px auto 0;
  font-size: 20px;
  line-height: 1.45;
  letter-spacing: .3em;
  color: #000;                  /* カンプの指定どおり（ほかの本文はこげ茶） */
}

.greeting__btn { margin-top: 87px; }

.greeting__deco {
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.greeting__deco--sprig  { left: calc(50% + 306px); top: 88px;  width: 156px; }  /* カンプ実測 */
.greeting__deco--flower { left: calc(50% - 463px); top: 371px; width: 130px; }  /* カンプ実測 */

/* --- 03 写真ギャラリー ----------------------------------- */
/* カンプ：枠 y=1840 高さ495。写真は y=130 から、352×235 を3枚、間隔16 */

.gallery-section { position: relative; isolation: isolate; height: 495px; padding-top: 130px; }

.gallery {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.gallery img {
  width: 352px;
  height: 235px;
  object-fit: cover;
  background: var(--c-placeholder);
}

/* --- 04 保育園の魅力 --------------------------------------- */
/* カンプ：ベージュの枠 y=2335 高さ1375。位置はFigmaの座標そのまま */

.miryoku {
  position: relative;
  isolation: isolate;
  height: 1375px;
  background: var(--c-bg-beige);
}

.miryoku > * { position: absolute; }

.miryoku__head  { top: 123px; left: calc(50% - 585px); width: 586px; text-align: center; }
.miryoku__bird  { top: 92px;  left: calc(50% - 78px); width: 101px; }
.miryoku__photo { top: 247px; left: calc(50% - 493px); width: 496px; height: 463px; object-fit: cover; border-radius: 52px; }
.miryoku__sprig { top: 586px; left: calc(50% - 574px); width: 185px; pointer-events: none; }

.miryoku__catch {
  top: 300px; left: calc(50% + 30px); width: 440px;   /* 写真の右、少し広めに */
  text-align: center;
  font-family: var(--font-head);
  font-weight: 700;
}

/* 2行とも同じ書体・同じ大きさ・同じ色。違いは「出てくる動き」だけ（motion.css） */
.miryoku__catch-main,
.miryoku__catch-sub {
  display: block;
  font-size: 34px;
  line-height: 1.5;
  letter-spacing: .06em;
  color: var(--c-text);
}

.miryoku__tree { top: 429px; left: calc(50% + 178px); width: 415px; pointer-events: none; }

.miryoku__sub {
  top: 858px; left: 0; right: 0;
  text-align: center;
  color: var(--c-text-sub);
  font-family: var(--font-head);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
}

.miryoku__body {
  top: 966px; left: calc(50% - 368px); width: 736px;
  text-align: center;
  font-size: 16px;
  line-height: 1.44;
}

/* --- 05 選ばれる理由 --------------------------------------- */
/* カンプ：紙の質感の背景 y=3710 高さ1200。上端は前のベージュが楕円で張り出す */

.reason {
  position: relative;
  isolation: isolate;
  height: 1200px;
  background: url("../images/bg-paper.jpg") center top / 1440px auto repeat-y, var(--c-bg-beige);
}

.reason::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: -73px;
  width: 1651px;
  height: 163px;
  transform: translateX(-50%);
  background: var(--c-bg-beige);
  border-radius: 50%;
  filter: blur(2px);
}

.reason > * { position: absolute; }

.reason__head { top: 157px; left: 0; right: 0; text-align: center; }

/* カード：白・角丸8・内側の余白32。幅304 */
.reason-card {
  width: 304px;
  padding: 40px 32px 32px;
  background: #fff;
  border-radius: 8px;
}
.reason-card--1 { top: 337px; left: calc(50% - 358px); height: 295px; }
.reason-card--2 { top: 337px; left: calc(50% - 22px); height: 295px; }
.reason-card--3 { top: 694px; left: calc(50% - 182px); height: 293px; }
.reason-card--4 { top: 694px; left: calc(50% + 158px); height: 293px; }

/* 見出し：緑の縦線＋緑の文字 */
.reason-card__title {
  margin-bottom: 16px;
  padding-left: 10px;
  border-left: 4px solid var(--c-green);
  color: var(--c-green);
  font-size: 20px;
  line-height: 1.75;
}

.reason-card__body {
  font-size: 14px;
  line-height: 1.65;
  letter-spacing: .12em;
}

.reason__btn   { top: 603px; left: calc(50% + 216px); }
.reason__girl  { top: 498px; left: calc(50% + 322px); width: 97px; z-index: 2; pointer-events: none; }   /* ボタンに座る */
.reason__photo { top: 785px; left: calc(50% - 471px); width: 256px; height: 171px; object-fit: cover; }

.reason__leaf { width: 100px; pointer-events: none; }
.reason__leaf--1 { top: 575px; left: calc(50% - 400px); scale: -1 1; }   /* 左右反転 */   /* 左右反転 */
.reason__leaf--2 { top: 950px; left: calc(50% + 432px); rotate: 10deg; }

/* --- 淡い水彩（各セクション共通） ------------------------ */
/* 透明度は画像に焼き込み済み。位置はFigmaの座標 */
.wash { position: absolute; z-index: -1; pointer-events: none; }
.wash--greeting   { top: 385px;  left: calc(50% - 621px);   width: 495px; }
.wash--gallery-r  { top: -40px;  left: calc(50% - 110px);  width: 474px; }
.wash--gallery-l  { top: 123px;  left: calc(50% - 514px);  width: 474px; }
.wash--support-tl { top: -56px;  left: calc(50% - 867px); width: 591px; }
.wash--support-br { top: 1005px; left: calc(50% + 253px);  width: 437px; }

/* --- 06 保護者にとっての“うれしい” ------------------------- */
/* カンプ：枠 高さ1451。位置はすべてFigmaの座標（左端からのx）をそのまま使います。
   --x(n) は「1440幅のデザインでx=n」を、画面幅が変わっても中央基準で保つための書き方です */

.support {
  position: relative;
  isolation: isolate;
  height: 1451px;
}

.support__head {
  position: absolute; top: 102px; left: 0; right: 0;
  text-align: center;
}

.support__lead {
  position: absolute;
  top: 214px;
  left: calc(50% - 351px);       /* x=369 */
  width: 700px;
  font-size: 20px;
  line-height: 1.45;
  letter-spacing: 0;
  white-space: nowrap;
}

.support__text { position: absolute; }
.support__text--1 { top: 448px; left: calc(50% - 503px); width: 484px; }   /* x=217 */
.support__text--2 { top: 877px; left: calc(50% + 9px);   width: 494px; }   /* x=729 */

.support__title {
  font-size: 20px;
  line-height: 1.4;
  margin-bottom: var(--s-16);
}

.support__body {
  font-size: 14px;
  line-height: 1.65;
  letter-spacing: .12em;        /* カンプ実測：1文字あたり約15.7px */
  text-align: justify;
}

.support__photo {
  position: absolute;
  width: 496px;
  height: 394px;
  object-fit: cover;
  background: var(--c-placeholder);
}
.support__photo--1 { top: 337px; left: calc(50% + 5px); }     /* x=725 */
.support__photo--2 { top: 781px; left: calc(50% - 524px); }   /* x=196 */

.support__basket {
  position: absolute;
  top: 650px;
  left: calc(50% - 74px);       /* x≈646 */
  width: 92px;
  pointer-events: none;
}

/* --- 07 園での生活 --------------------------------------- */
/* カンプ：ベージュの枠 高さ3002。上端は波形（半楕円）で、前のセクションに盛り上がります。
   位置はFigmaの座標をそのまま使っています（x は1440幅のデザイン上の値） */

.life {
  position: relative;
  isolation: isolate;
  height: 3002px;
  background: var(--c-bg-beige);
}

/* 上端の波形：前のセクションに100pxほど盛り上がる */
.life::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: -100px;
  width: 1845px;
  height: 332px;
  transform: translateX(-50%);
  background: var(--c-bg-beige);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

.life__head { position: absolute; top: 120px; left: 0; right: 0; text-align: center; }

.life__map {
  position: absolute;
  top: 230px; left: calc(50% - 369px);
  width: 736px; height: 495px;
  object-fit: contain;
  background: #fff;
}

.life__btn1, .life__btn2 { position: absolute; left: 0; right: 0; text-align: center; }
.life__btn1 { top: 827px; }
.life__btn2 { top: 2855px; }

.life__sub {
  position: absolute; top: 998px; left: 0; right: 0;
  text-align: center;
  font-size: 24px;
  line-height: 1.1;
}

.life__lead {
  position: absolute; top: 1054px; left: 0; right: 0;
  text-align: center;
  font-size: 20px;
  line-height: 1.45;
}

/* 園の1日：幅352の列。右寄せと左寄せが交互 */
.day__item { position: absolute; left: calc(50% - 176px); width: 352px; }
.day__item--right { text-align: right; }
.day__item--1 { top: 1240px; }
.day__item--2 { top: 1403px; }
.day__item--3 { top: 1601px; }
.day__item--4 { top: 1801px; }
.day__item--5 { top: 2000px; }
.day__item--6 { top: 2201px; }
.day__item--7 { top: 2403px; }

.day__title {
  display: inline-block;
  padding-bottom: 6px;
  margin-bottom: 12px;
  border-bottom: 3px dashed var(--c-yellow);
  font-size: 22px;
  line-height: 1.4;
  letter-spacing: .07em;
}

.day__time { letter-spacing: .22em; margin-right: 2em; }

.day__text {
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: .06em;
}

.day__tags { margin-top: 4px; font-size: 13px; letter-spacing: .02em; }

.life__photo {
  position: absolute;
  width: 256px; height: 171px;
  object-fit: cover;
  background: var(--c-placeholder);
}
.life__photo--1 { top: 1240px; left: calc(50% - 495px); }
.life__photo--2 { top: 1543px; left: calc(50% + 240px); }
.life__photo--3 { top: 1846px; left: calc(50% - 495px); }
.life__photo--4 { top: 2088px; left: calc(50% + 240px); }
.life__photo--5 { top: 2328px; left: calc(50% - 495px); }
.life__photo--6 { top: 2519px; left: calc(50% + 240px); }

.life__water {
  position: absolute; top: 2690px; left: 0; right: 0;
  text-align: center;
}

.life__deco { position: absolute; pointer-events: none; }
.life__deco--book   { top: 29px;   left: calc(50% - 81px); width: 143px; }
.life__deco--leaf-a { top: 1135px; left: calc(50% + 300px); width: 100px; }
.life__deco--blocks { top: 1730px; left: calc(50% - 495px); width: 78px; }
.life__deco--leaf-b { top: 1920px; left: calc(50% + 440px); width: 100px; rotate: -135deg; }
.life__deco--leaf-c { top: 2660px; left: calc(50% - 445px); width: 90px; rotate: -45deg; }

/* --- 09 お知らせ ----------------------------------------- */
/* カンプ：ベージュの枠 高さ848。カード 304幅×3、間隔32、y=281 */

.news {
  position: relative;
  height: 848px;
  background: var(--c-bg-beige);
}

.news__icon { position: absolute; top: 42px; left: calc(50% - 56px); width: 112px; }
.news__head { position: absolute; top: 140px; left: 0; right: 0; text-align: center; }

.news__list {
  position: absolute;
  top: 281px; left: 0; right: 0;
  display: flex;
  justify-content: center;
  gap: 32px;
}

.news-card { width: 304px; }

.news-card__date {
  display: block;
  margin-bottom: 6px;
  color: var(--c-text-sub);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
}

.news-card__img {
  width: 304px; height: 203px;
  object-fit: cover;
  background: var(--c-placeholder);
}

.news-card__title {
  margin-top: 10px;
  color: var(--c-text-sub);
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .12em;
}

.news__btn { position: absolute; top: 702px; left: 0; right: 0; text-align: center; }

/* --- スマホ ---------------------------------------------- */

@media (max-width: 767px) {

  .fv {
    width: 100%;
    margin-block: 0 var(--s-48);
  }

  .fv__media { border-radius: 0; }

  .fv__photo { aspect-ratio: 3 / 4; }

  .fv__catch {
    top: var(--s-16);
    right: var(--s-16);
    gap: var(--s-16);
    font-size: var(--fs-catch);
  }

  .fv__line + .fv__line { margin-inline-start: var(--s-32); margin-block-start: var(--s-16); }

  .fv__btn {
  --btn-h: 60px;   /* FVのボタンだけ少し高い */
  position: absolute;
  left: 58px;
  bottom: 71px;
}

  .fv-intro { letter-spacing: .1em; }

  .gallery { flex-direction: column; align-items: center; }
  .gallery img { width: 100%; }
}