/* =========================================================
   page-top.css : トップページ固有
   hero / news / about / life / admission / instagram /
   support-recruit / access
   施設子サイト（りじょう認定こども園）
   ========================================================= */

/* 各セクション共通の中央寄せインナー */
.t-inner {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ===== hero ===== */
.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: clamp(560px, 52vw, 1000px);
  z-index: 1;

}
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  z-index: -1;
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
/* 写真はPCでは絶対配置（左に大きくはみ出す） */
.hero__photo {
  position: absolute;
  left: -12%;
  top: 50%;
  transform: translateY(-50%);
  width: 74%;
  max-width: 1233px;
  z-index: 1;
}
.hero__photo img { width: 100%; height: auto; }
.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1680px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  justify-content: flex-end;
}
.hero__copy { position: relative; width: 40%; max-width: 560px; z-index: 2;}
.hero__cloud { display: none; }
.hero__lead {
  font-family: var(--font-base);
  font-weight: 500;
  font-size: clamp(20px, 1.9vw, 36px);
  letter-spacing: 0.05em;
  color: var(--color-text);
}
.hero__catch {
  margin-top: 18px;
  font-family: var(--font-base);
  font-weight: 500;
  font-size: clamp(30px, 2.7vw, 50px);
  letter-spacing: 0.05em;
  line-height: 1.35;
  color: var(--color-text);
}
.hero__catch .y { color: #fac33a; }
.hero__catch .g { color: #80a759; }
.hero__sub {
  margin-top: 22px;
  font-family: var(--font-base);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.8;
  color: var(--color-text);
}

/* ===== news ===== */
.news { position: relative; z-index: 1; background-color: white;}
.news__deco {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}
.news__deco--top   { top: -48%;    width: 100%; height: auto; z-index: 0; }
.news__deco--cover { top: 12%; width: 100%; height: auto; z-index: 1; } /* news-cover-top をさらに上に重ねる */
.news__inner { position: relative; z-index: 2; }
.news__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
}
/* 一覧ボタンの出し分け（PC=Check付きピル / SP=小ピル） */
.news__more-sp { display: none; }

/* ===== about ===== */
.about { position: relative; z-index: 2;}
.about__deco {
  position: absolute;
  left: 50%;
  top: -7%;
  transform: translateX(-50%);
  width: 100%;
  height: auto;
  z-index: 0;
  pointer-events: none;
}
.about__inner {
  position: relative;
  z-index: 1;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 500px) minmax(0, 1fr);
  grid-template-areas:
    "head   photos"
    "sub    photos"
    "lead   photos"
    "more   photos";
  align-content: start;
  column-gap: clamp(20px, 3vw, 60px);
}
.about__head   { grid-area: head; }
.about__sub    { grid-area: sub; }
.about__lead   { grid-area: lead; }
.about__more   { grid-area: more; justify-self: end; align-self: start; margin-top: 24px; }
.about__photos {
  grid-area: photos;
  position: relative;
  width: 100%;
  aspect-ratio: 1001 / 619;
  align-self: center;
}
.about__sub {
  margin-top: 22px;
  font-family: var(--font-base);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.5;
  color: var(--color-text);
}
.about__underline { display: block; margin-top: 14px; width: 325px; max-width: 80%; height: 9px; }
.about__lead {
  margin-top: 22px;
  font-size: 16px;
  line-height: 1.9;
  color: var(--color-text-sub);
}
.about__photos img { position: absolute; height: auto; }
.about__circle { left: -5%; top: 50%; width: 24%; }  /* 写真背後の淡緑円（最初の子＝背面） */
.about__ph1 { left: 0;     top: 2%;  width: 67.6%; }  /* 大 */
.about__ph2 { left: 68.7%; top: 0;   width: 26.2%; }  /* 右上 小 */
.about__ph3 { left: 65.4%; top: 44%; width: 34.6%; }  /* こあらーむ */
.about__ph4 { left: 37.5%; top: 59%; width: 24.8%; }  /* おもちゃ */

/* ===== life ===== */
.life { position: relative; overflow: hidden; }
.life__head { position: relative; z-index: 1; text-align: left; }
.life__more { position: relative; z-index: 1; }
.life__deco { position: absolute; height: auto; z-index: 0; pointer-events: none; }
.life__deco--l  { left: -30px; top: 6px;  width: 180px; }   /* 黄・左上 */
.life__deco--r1 { right: -50px; top: 44%; width: 320px; }   /* 黄・右下 */
.life__deco--r2 { right: 50px;  top: 28%; width: 190px; }   /* 緑・右 */
.life__head { text-align: left; }
.life__carousel {
  position: relative;
  z-index: 1;
  width: fit-content;
  margin: 36px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.life__card {
  background: var(--color-white);
  border-radius: 10px;
  padding: 8px;
  flex: 0 0 auto;
}
.life__card img { display: block; width: 100%; border-radius: 6px; object-fit: cover; }
.life__card--side    { width: 330px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06); }
.life__card--side img { aspect-ratio: 330 / 222; }
.life__card--center  { width: 460px; margin-inline: -28px; z-index: 2; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1); }
.life__card--center img { aspect-ratio: 460 / 310; }
.life__nav {
  position: absolute;
  top: 50%;
  z-index: 3;
}
.life__nav--prev { left: 0;  transform: translate(-50%, -50%); }
.life__nav--next { right: 0; transform: translate(50%, -50%); }
.life__more { margin-top: 34px; text-align: center; }
.life__dots { display: none; }

/* ===== admission（PC=ワイド写真カード / SP=別ブロック） ===== */
.admission { position: relative; overflow: hidden; }
.admission__card {
  display: block;
  position: relative;
  max-width: 1495px;
  margin-inline: auto;
  aspect-ratio: 1495 / 394;
  border-radius: 10px;
  overflow: hidden;
}
.admission__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.admission__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(91deg, rgba(234, 244, 238, 0) 3%, rgb(234, 244, 238) 70%);
}
.admission__body {
  position: absolute;
  z-index: 1;
  right: clamp(24px, 5vw, 80px);
  top: 50%;
  transform: translateY(-50%);
  text-align: left;
}
.admission__more { margin-top: 18px; }

/* SP専用 入園案内カード */
.admission-sp { display: none; }

/* ===== instagram =====
   PCは設計どおり要素が重なる絶対配置（コンテンツ枠 1009×389 を比率固定ステージ化） */
.insta { position: relative; overflow: hidden; background-color: white; }
.insta__inner {
  position: relative;
  width: 100%;
  max-width: 1010px;
  margin-inline: auto;
  aspect-ratio: 1009 / 389;
}
.insta__icon {
  display: inline-block;
  width: 60px;
  height: 60px;
  background-color: var(--color-accent); /* Instagram見出しアイコン色＝アクセント。園で自動追従 */
  -webkit-mask: var(--ic) no-repeat center / contain;
          mask: var(--ic) no-repeat center / contain;
}
.insta__head {
  position: absolute;
  left: 13.7%;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 16px;
}
.insta__text {
  position: absolute;
  left: 15.2%;
  top: 48.8%;
  z-index: 2;
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text-sub);
}
.insta__more { position: absolute; left: 0; top: 78%; z-index: 2; }
.insta__illust {
  position: absolute;
  left: 33.1%;
  top: 36.8%;
  width: 66.9%;
  z-index: 1;
}
/* SVGに preserveAspectRatio="none" が付くため比率を固定して横伸びを防ぐ */
.insta__illust img { display: block; width: 100%; height: auto; }
.insta__illust--pc img { aspect-ratio: 675 / 245; }
.insta__illust--sp img { aspect-ratio: 354.768 / 186.779; }
.insta__illust--sp { display: none; }

/* ===== support / recruit（full-bleed・画面端密着・中央で僅かに重なる） ===== */
.sr { position: relative; overflow: hidden; padding-block: 90px; }
.sr__deco { /* 右上の淡緑円 */
  position: absolute;
  top: -10%;
  right: clamp(20px, 4vw, 80px);
  width: clamp(180px, 17vw, 330px);
  height: auto;
  z-index: 0;
  pointer-events: none;
}
.sr__item { position: relative; width: 47.5%; }
.sr__item--support { margin-right: auto; z-index: 1; }
.sr__item--recruit { margin-left: auto; margin-top: clamp(-180px, -8vw, -80px); z-index: 2; }
.sr__head { margin-bottom: 14px; }
.sr__item--support .sr__head { padding-left: clamp(20px, 6.6vw, 127px); }
.sr__item--recruit .sr__head { padding-right: clamp(20px, 6.6vw, 127px); text-align: right; }
.sr__photo {
  display: block;
  width: 100%;
  aspect-ratio: 910 / 300;
  overflow: hidden;
}
.sr__item--support .sr__photo { border-radius: 0 14px 14px 0; }
.sr__item--recruit .sr__photo { border-radius: 14px 0 0 14px; }
.sr__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sr__more {
  position: absolute;
  bottom: 24px;
  z-index: 2;
}
.sr__item--support .sr__more { right: clamp(20px, 8vw, 130px); }
.sr__item--recruit .sr__more { right: 24px; }

/* ===== access ===== */
.access { position: relative; overflow: hidden; padding-top: 90px; padding-bottom: 80px; }
.access__head { text-align: center; }
.access__map {
  position: relative;
  margin-top: 40px;
  line-height: 0;
}
.access__map iframe {
  display: block;
  width: 100%;
  height: 460px;
  border: 0;
}
.access__addr {
  margin-top: 26px;
  text-align: center;
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-text-sub);
}

/* =========================================================
   レスポンシブ（SP : max-width 750px）
   ========================================================= */
@media (max-width: 750px) {
  /* hero */
  .hero {
    display: block;
    min-height: 0;
    padding-bottom: 20px;
  }
  .hero__photo {
    position: relative;
    left: 0;
    top: 0;
    transform: none;
    width: 112%;
    max-width: none;
    margin-left: -6%;
  }
  .hero__inner { display: block; padding: 0; }
  .hero__copy {
    position: relative;
    width: 100%;
    max-width: none;
    text-align: center;
    padding: 30px 20px 0;
  }
  .hero__copy > *:not(.hero__cloud) { position: relative; z-index: 1; }
  .hero__cloud {
    display: block;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 130%;
    max-width: none;
    z-index: 0;
    pointer-events: none;
  }
  .hero__lead { font-size: 22px; }
  .hero__catch { margin-top: 14px; font-size: 35px; line-height: 1.5; }
  .hero__sub { margin-top: 18px; font-size: 16px; line-height: 1.8; }

  /* news */
  .news__head { align-items: center; margin-bottom: 18px; }
  .news__more-pc { display: none; }
  .news__more-sp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 130px;
    height: 40px;
    padding: 0 28px 0 16px;
    position: relative;
    border: 1px solid var(--color-accent-mid);
    border-radius: 10px;
    background: var(--color-white);
    font-family: var(--font-gothic);
    font-weight: 700;
    font-size: 13px;
    color: var(--color-accent);
    white-space: nowrap;
  }
  .news__more-sp::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-top: 1.5px solid var(--color-accent);
    border-right: 1.5px solid var(--color-accent);
    transform: translateY(-50%) rotate(45deg);
  }

  /* about */
  .about__inner {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "sub" "photos" "lead" "more";
    row-gap: 0;
  }
  .about__head { max-width: max-content; margin-inline: auto; text-align: left; }
  .about__sub { text-align: center; margin-top: 18px; font-size: 18px; }
  .about__underline { margin-inline: auto; }
  .about__lead { line-height: 1.8; }
  .about__more { display: block; justify-self: stretch; width: 100%; margin-top: 22px; }
  .about__more .more__btn { width: 100%; min-width: 0; }
  /* SP写真コラージュ（Figma 14:18449 準拠の配置・比率303/424） */
  .about__photos { margin: 22px auto; max-width: 340px; aspect-ratio: 303 / 424; }
  .about__ph1 { left: 0;     top: 0;   width: 90.0%; }  /* 上・大 DSC00244 300x202 */
  .about__ph2 { left: 44.0%; top: 33.9%; width: 51.0%; } /* 右中 170x161 */
  .about__ph3 { left: 23.6%; top: 70.2%; width: 55.5%; } /* 中下 185x127 */
  .about__ph4 { left: 3.4%;  top: 50.4%; width: 36.9%; } /* 左下 123x126 */

  /* life */
  .life__head { max-width: max-content; margin-inline: auto; text-align: left; }
  .life__carousel { width: 100%; margin-top: 24px; padding-inline: 28px; }
  .life__card { padding: 0; box-shadow: none; }
  .life__card--side { display: none; }
  .life__card--center { width: 100%; max-width: 460px; margin-inline: auto; box-shadow: none; }
  .life__card--center img { aspect-ratio: 320 / 200; }
  .life__nav { display: none; }
  .life__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
  }
  .life__dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-accent-bg);
    cursor: pointer;
  }
  .life__dots span.is-active { background: var(--color-accent); }
  .life__more { width: 100%; }
  .life__more .more { display: block; width: 100%; }
  .life__more .more__btn { width: 100%; min-width: 0; }

  /* admission：PC版を隠しSP版を表示 */
  .admission__pc { display: none; }
  .admission-sp {
    display: block;
    position: relative;
    max-width: 340px;
    margin-inline: auto;
    padding: 26px 24px 30px;
    text-align: center;
  }
  .admission-sp__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
  }
  .admission-sp > *:not(.admission-sp__bg) { position: relative; z-index: 1; }
  .admission-sp__ttl {
    margin-top: 14px;
    font-family: var(--font-gothic);
    font-weight: 900;
    font-size: 22px;
    color: var(--color-accent);
  }
  .admission-sp__lead {
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-text);
    text-align: left;
    display: inline-block;
  }
  .admission-sp__photo {
    margin-top: 18px;
    width: 100%;
    border-radius: 8px;
  }
  .admission-sp__more { margin-top: 20px; }
  .admission-sp__more .more__btn { width: auto; min-width: 150px; }

  /* instagram：ステージ解除してフローで積み上げ */
  .insta__inner { position: static; max-width: none; aspect-ratio: auto; }
  .insta__head { position: static; justify-content: center; }
  .insta__text { position: static; margin-top: 18px; text-align: left; }
  .insta__more { position: static; display: block; margin-top: 20px; }
  .insta__more .more__btn { width: auto; min-width: 150px; }
  .insta__illust { position: static; width: 100%; }
  .insta__illust--pc { display: none; }
  .insta__illust--sp { display: block; width: 100%; margin-top: 8px; }

  /* support / recruit */
  .sr { padding-block: 40px; }
  .sr__item { width: 88%; }
  .sr__item--support { margin-right: auto; }
  .sr__item--recruit { margin-left: auto; margin-top: 40px; }
  .sr__item--support .sr__head { padding-left: 0; }
  .sr__item--recruit .sr__head { padding-right: 0; }
  .sr__photo { aspect-ratio: 329 / 191; }
  .sr__more { bottom: 16px; }
  .sr__item--support .sr__more { left: 16px; right: auto; }
  .sr__item--recruit .sr__more { right: 16px; }
  .sr__more .more__btn { width: auto; min-width: 150px; height: 44px; }

  /* access */
  .access { padding-top: 54px; }
  .access__map { margin-top: 24px; }
  .access__map iframe { height: 200px; }
  .access__addr { margin-top: 18px; text-align: left; }
}