@charset "UTF-8";

* {
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

img {
  width: 100%;
}

body {

  font-family: Noto Sans JP;
  font-weight: 400;
  font-style: normal;
  font-size: var(--main-text);


  color: #5B534D;
}

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


.temporary-care {
  display: none;
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* FV-area */

.fv-inner {
  position: relative;
  width: 100%;
  height: min(100svh, calc(100vw * 700 / 390));
  /* overflow: hidden; */
}

.sp-fv {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.logo-box {
  position: absolute;
  width: 84%;
  left: 50%;
  bottom: -30px;
  transform: translateX(-50%);
}

.logo-text {
  position: absolute;
  width: 85%;
  left: 50%;
  bottom: -65px;
  transform: translateX(-50%);
}

.logo-box img {
  display: block;

}

/* 768px未満では出さない */
.pc-fv,
.fv-shape {
  display: none;
}

/* --- SP：雲のパーツをFVの写真にかぶせる版（<div id="fv-area" class="fv-cloud">）---
   プロフィールの先頭にある雲（.union）を上にずらして写真の下端に重ね、
   ロゴは雲の上〜クリーム色の部分に置きます。
   1画面目に「写真＋雲＋ロゴ」が下の固定ボタンより上に収まるよう、
   写真の高さを画面の高さから逆算しています。
     33.7vw … ロゴの高さ（幅84% × 画像の比率 473/1179）
     95px   … 固定ボタン55px ＋ TOPのサル（ボタンの上に出る分）約40px
     40px   … ロゴの上端を写真の下端からどれだけ上げるか
   768px以上は従来どおり（PC用の写真＋下の波）です */
@media (max-width: 767px) {
  .fv-cloud .fv-inner {
    height: max(320px, min(calc(100svh - 33.7vw - 95px), calc(100vw * 700 / 390)));
  }

  .fv-cloud .logo-box {
    top: calc(100% - 40px);
    bottom: auto;
    z-index: 2;
  }

  .fv-cloud~#profile {
    padding-top: 0;
  }

  /* 雲の高さ（画像 776×102）ぶん上げて写真に重ねます。
     ・上げる量は 100vw ではなく % で指定（margin の % は親の「幅」が基準なので、
       画像の幅と完全に同じ値になり、スクロールバー等で幅がずれません）
     ・さらに 2px 下にずらして、雲の下端を写真の下端より 2px 下に出しています。
       写真の高さは画面の高さから計算するので小数になりやすく、ぴったり合わせると
       端数の丸めで写真が1pxのぞくことがあるためです。
       雲の下端はプロフィールの背景と同じ色（#FFF4EE）なので、はみ出しても見えません。
     下の余白 = ロゴが写真の下にはみ出す分（33.7vw − 40px）＋ 85px（ずらした2pxは差し引き） */
  .fv-cloud~#profile .union {
    position: relative;
    z-index: 1;
    margin-top: calc(-100% * 102 / 776 + 2px);
    margin-bottom: calc(33.7vw + 43px);
  }
}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* FV：768px以上はPC用の横長ビジュアルに切り替え

   カンプ（960×673）からの実測値を％にしています。
   aspect-ratio で高さを決めているのでトリミング量が常に一定になり、
   ロゴ・キャッチと子どもの顔の位置関係が画面幅によってズレません。 */
@media (min-width: 768px) {

  .fv-inner {
    /* カンプの比率。高さは幅から自動で決まります */
    aspect-ratio: 960 / 673;
    height: auto;
    /* ただし画面の高さは超えないようにします。
       1920pxのモニターだと比率どおりでは高さ1346pxになり、
       下の波やキャッチが画面の外に出てしまうため。
       上限に当たったぶんは写真が上下に切れます（object-fit: cover） */
    max-height: 100svh;
  }

  .sp-fv {
    display: none;
  }

  /* 幅いっぱい・高さは自動（＝トリミングなし）。
     カンプと同じく上ぞろえで、下にできるすき間は波の画像が隠します */
  .pc-fv {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  /* ロゴ（左上）：カンプ x59 / y83 / 幅220 → 960×673に対する％ */
  .logo-box {
    top: 12.3%;
    bottom: auto;
    left: 6.2%;
    width: 22.9%;
    transform: none;
  }

  /* キャッチ：カンプ x164 / y278 / 幅680 */
  .logo-text {
    top: 41.3%;
    bottom: auto;
    left: 17.1%;
    width: 70.8%;
    transform: none;
  }

  /* 下の波。
     facility-fv-shape.png は一番下の1行だけ半透明（alpha 213）なので、
     bottom: 0 にすると そこから後ろの写真が透けて細い線に見えます。
     2pxだけ下にずらして、その半透明の行をプロフィールのクリーム色の上に
     逃がしています（同系色なので見えません）。 */
  .fv-shape {
    display: block;
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: auto;
  }

}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
   FV：1024px以上は「写真が1画面ぶん（100svh）＋その下に波」

   波は画像の比率（1280 × 146）どおり幅の11.4%の高さになるので、
   その高さぶんだけ .fv-inner を100svhより高くしています。
   こうすると波の上端がちょうど画面の下端に来て、
   ファーストビューは写真だけ、少しスクロールすると波が出ます。
   写真は object-fit: cover なので、あふれたぶんは左右が切れます。 */
@media (min-width: 1024px) {

  .fv-inner {
    aspect-ratio: auto;
    height: calc(100svh + 100vw * 146 / 1280);
    max-height: none;
  }

}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* profile */

#profile {
  background-color: #FFF4EE;
  padding-top: 130px;
}

.union {
  margin-bottom: 15px;
}

.union img {
  display: block;
}

.introduce {
  width: 77.7%;
  margin: 0 auto;
}

.en-ttl {
  font-size: var(--sub-heading);
  color: #EDA98D;
  font-weight: bold;
  text-align: center;
  margin-bottom: 15px;
}

#profile h2 {
  font-size: var(--middle-heading);
  color: #716054;
  text-align: center;
  padding-bottom: 11px;
  margin-bottom: 12px;
  border-bottom: 1px solid #5B534D;
}

.intro-text {
  margin-bottom: 50px;
  font-weight: 500;
}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
   企業主導型保育園ってなに？（#profile の中・企業主導型の園だけ）

   390pxのカンプ実測
     帯        画面いっぱい・高さ48px・#EDA98D。文字は白の18px（--sub-heading）太字
               文字は左58px、＋は右47pxで13px角
     中身      左右45px・上25px・下28px。文字16px（--main-text）・行間1.2
     見出し    16px太字・中央ぞろえ。色を変える部分は <span> で #E63879
     点線      見出しの下に1点線。カンプは3つ目だけ線がありますが、
               PCカンプに合わせて3つとも引いています
     アイコン  SPは表示しません（カンプどおり）
========================= */

.corporate {
  margin-bottom: 26px;
}


/* --- 帯（クリックで開閉します） --- */

.corporate-head {
  display: flex;
  justify-content: space-between;
  align-items: center;

  height: 48px;
  padding: 0 47px 0 58px;

  background-color: #EDA98D;
  color: #FFFFFF;
  font-size: var(--sub-heading);
  font-weight: bold;

  cursor: pointer;
  list-style: none;
}


/* details標準の三角を消す */
.corporate-head::-webkit-details-marker {
  display: none;
}

.corporate-head::marker {
  content: "";
}


/* --- ＋アイコン（開くと −  になります） --- */

.corporate-plus {
  position: relative;

  width: 13px;
  height: 13px;

  flex-shrink: 0;
  margin-left: 20px;
}

.corporate-plus::before,
.corporate-plus::after {
  content: "";

  position: absolute;
  top: 50%;
  left: 50%;

  background-color: #FFFFFF;

  transform: translate(-50%, -50%);
}

/* 横線 */
.corporate-plus::before {
  width: 13px;
  height: 2px;
}

/* 縦線 */
.corporate-plus::after {
  width: 2px;
  height: 13px;

  transition: opacity 0.3s ease;
}

.corporate[open] .corporate-plus::after {
  opacity: 0;
}


/* --- 中身 --- */

.corporate-inner {
  padding: 25px 45px 28px;

  color: #5B534D;
  font-size: var(--main-text);
}

/* 開くときのアニメーション（登園についてのアコーディオンと共通のキーフレーム） */
.corporate[open] .corporate-inner {
  animation: accordion-open 0.35s ease;
}

.corporate-intro p {
  line-height: 1.2;
}

.corporate-list {
  margin-top: 46px;
}

.corporate-item+.corporate-item {
  margin-top: 52px;
}

/* SPではアイコンを出しません */
.corporate-icon {
  display: none;
}

.corporate-lead {
  margin: 0;
  padding-bottom: 16px;

  font-size: var(--main-text);
  font-weight: bold;
  line-height: 1.2;
  text-align: center;

  border-bottom: 1px dotted #716054;
}

.corporate-lead span {
  color: #E63879;
}

.corporate-text {
  margin: 10px 0 0;
  line-height: 1.2;
}


.pride {
  /* 下の余白は、白い丸が本文より46pxぶん下にはみ出すのを見込んだ値です */
  margin-bottom: 105px;
  text-align: center;
}

/* 弧に沿ったピンクのコピー。
   カンプ実測「弦149px・いちばん高いところで13px」に合わせた2次ベジェに
   textPath で文字を乗せています（画像ではないので色もサイズもCSSで変更可） */
.pride-catch {
  margin: 0 0 3px;
}

.pride-catch-arc {
  display: block;
  width: 160px;
  height: 36px;
  margin: 0 auto;
  fill: #FA7DAB;
  font-size: var(--main-text);
  font-weight: bold;
}

.pride-ttl {
  width: 287px;
  max-width: 88%;
  margin: 0 auto 33px;
  padding: 6px 0;
  border-radius: 50px;
  background-color: #FA7DAB;
  color: #fdfdfd;
  font-size: var(--middle-heading);
  font-weight: bold;
  text-align: center;
}

.pride-item {
  position: relative;
  z-index: 0;
}

.pride-item+.pride-item {
  margin-top: 77px;
}

/* 中身の後ろに敷く白い丸 */
.pride-item::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 38px;
  left: 50%;
  width: 280px;
  height: 280px;
  margin-left: -140px;
  border-radius: 50%;
  background-color: #FFF9F9;
  box-shadow: 0px 4px 4px 0px rgba(202, 191, 191, 0.25);
}

.pride-icon {
  display: block;
  height: auto;
  margin: 0 auto;
}

.pride-icon-house {
  width: 73px;
}

.pride-icon-tree {
  width: 70px;
}

.pride-lead {
  margin: 26px 0 0;
  color: #5B534D;
  font-size: var(--middle-heading);
  /* font-weight: bold; */
  font-weight: 500;
  line-height: 1.4;
  font-family: Kiwi Maru;
}

.pride-lead span {
  color: #FA7DAB;
}

/* 見出しと本文のあいだの線 */
.pride-lead::after {
  content: "";
  display: block;
  width: 235px;
  max-width: 72%;
  height: 1px;
  margin: 32px auto 21px;
  background-color: #5B534D;
}

.pride-text {
  width: 291px;
  max-width: 88%;
  margin: 0 auto;
  font-size: var(--main-text);
  line-height: 1.2;
  text-align: left;
}


.photo-slider {
  position: relative;
  width: 100%;
  margin-inline: auto;
}

/* --- PROFILEスライダー左上のあしらいの鳥 ---
   #info の鳥と同じ画像を transform: scaleX(-1) で左右反転して使っています。
   位置の基準は .photo-slider（＝写真の上端・セクション左端）です。 */
.profile-bird {
  position: absolute;
  top: -47px;
  left: 0;
  width: 61px;
  height: auto;
  transform: scaleX(-1);
  pointer-events: none;
}

.photo-slider .swiper {
  height: 243px;
  /* 188（写真）＋ 55（キャプション） */
  overflow: hidden;
  margin-bottom: 30px;
}

/* 幅は写真サイズに合わせて自動（slidesPerView:'auto' 用） */
.photo-slider .swiper-slide {
  width: auto;
  height: 100%;
  cursor: grab;
}

.photo-slider .swiper-slide:active {
  cursor: grabbing;
}

/* 一言テキストは絶対配置。figureの幅＝写真の幅になり、
   テキストの長さで写真幅が変わらないようにしています */
.photo-slider .photo-slide {
  position: relative;
  margin: 0;
  height: 100%;
  padding-bottom: 55px;
  /* ＝ figcaption の height */
}

/* 高さだけ指定 → 幅は auto なので元画像のアスペクト比のまま表示されます */
.photo-slider .photo-slide img {
  height: 188px;
  width: auto;
  max-width: none;
  object-fit: contain;
  border-radius: 12px;
  display: block;
  background: #eee;
}

.photo-slider .photo-slide figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55px;
  /* 10（写真との間隔）＋ 16px × 1.4 × 2行 */
  display: flex;
  align-items: flex-start;
  /* 1行でも2行でも写真からの距離を一定にするため上寄せ */
  padding-top: 10px;
  justify-content: center;
  font-size: var(--main-text);
  font-weight: 500;
  line-height: 1.4;
  color: #333;
  text-align: center;
  letter-spacing: .02em;
}


/* 一言テキストを太くしたいスライダーにつけるクラス */
.photo-slider-bold .photo-slide figcaption {
  font-weight: 700;
}

/* --- 2段キャプション（タイトル＋説明文）のスライダー ---
   全体290px ／ 説明文エリア100px ／ 写真の高さ 290−100＝190px */
.photo-slider-point .swiper {
  height: 290px;
}

.photo-slider-point .photo-slide {
  padding-bottom: 100px;
}

.photo-slider-point .photo-slide img {
  height: 190px;
}

.photo-slider-point .photo-slide figcaption {
  height: 100px;
}

.photo-slider-point .photo-slide figcaption {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  /* 文字は左寄せ（共通スライダーは中央寄せ） */
  text-align: left;
  gap: 13px;
  /* タイトルと説明文の間隔 */
  padding-top: 13px;
  /* 写真とタイトルの間隔 */
}

/* 園の特徴（.point）のスライダーは説明文がSPで3行になるので、
   説明文エリアを3行ぶんに広げます（13＋タイトル22.4＋13＋15px×1.6×3行＝120.4 → 124px）
   全体 190＋124＝314px。PCは2行に収まるので1024px以上では元の100pxのままです */
@media (max-width: 1023px) {
  .point .photo-slider-point .swiper {
    height: 314px;
  }

  .point .photo-slider-point .photo-slide {
    padding-bottom: 124px;
  }

  .point .photo-slider-point .photo-slide figcaption {
    height: 124px;
  }
}

/* --- ドット（ページネーション） -----------------------------------------
   HTMLに <div class="slider-dots js-slider-dots"></div> を置いたスライダーだけ、
   写真の枚数ぶんのドットがJSで作られます */
.slider-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding-bottom: 55px;
}

.slider-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: #7E9B86;
  opacity: .3;
  /* 選択されていないドットの薄さ */
  cursor: pointer;
  appearance: none;
  transition: opacity .2s;
}

.slider-dot.is-active {
  opacity: 1;
}

/* ドットを付けたときは、スライダーとドットの間隔をつめる */
.photo-slider-point .swiper {
  margin-bottom: 16px;
}

/* キャプション内のテキスト */
.photo-slide-title {
  margin: 0;
  font-size: var(--main-text);
  font-weight: 700;
  line-height: 1.4;
}

.photo-slide-text {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
}

/* -------------------------------------------------------------------- */

.enrollment-info {
  display: flex;
  justify-content: center;
  gap: 10px;
  /* 左右の余白は padding ではなく幅で（左右20pxずつ） */
  width: calc(100% - 40px);
  /* 下の園情報との間隔（40px ＋ もと園情報の上にあった26px） */
  margin: 0 auto 66px;
}

.enrollment-item {
  flex: 1;
  height: 80px;
  background-color: #EDA98D;
  color: #fdfdfd;
  font-size: var(--sub-heading);
  border-radius: 10px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}


/* --- 園情報ブロック ---------------------------------------------------- */
.info-block {
  padding: 0 0 32px;
  line-height: 1.7;
}

/* 左右の余白は .info-block の padding ではなく、この箱の幅で（左右20pxずつ） */
.info-block-inner {
  width: calc(100% - 40px);
  margin-left: auto;
  margin-right: auto;
}

.info-list {
  margin: 0;
}

.info-row {
  display: grid;
  grid-template-columns: 4.6em 1fr;
  /* 見出し列の幅 */
  gap: 0 16px;
  /* 見出しと内容の間隔 */
  align-items: center;
  padding: 16px 0;
  border-bottom: 2px dotted #716054;
  /* 点線 */
}

.info-row:first-child {
  padding-top: 4px;
}

.info-row dt {
  font-weight: 500;
  letter-spacing: .04em;
}

.info-row dd {
  margin: 0;
  font-weight: 500;
}

.info-row dd.address {
  line-height: 1.2;
}

/* --- 最寄駅：1駅ずつ改行。駅名と所要時間（「〇〇駅」徒歩〇分）は途中で折り返さない --- */
.station-list {
  line-height: 1.5;
}

.station {
  display: block;
}

.station:not(:last-child) {
  margin-bottom: 8px;
}

.station-name {
  display: inline-block;
}

/* --- 所在地の行（鳥を重ねるため relative） --- */
.info-row--address {
  position: relative;
  padding-bottom: 22px;
}

.info-row--address dd {
  position: relative;
  z-index: 1;
}

.info-address {
  margin: 0;
}

/* --- Googlemapボタン --- */
/* display:flex なので必ず住所の次の行に置かれます（inline-flex だと横に並びます） */
.btn-map {
  display: flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-width: 158px;
  margin-top: 10px;
  padding: 4px 18px;
  border-radius: 50px;
  background: #E9558C;
  color: #fff;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  letter-spacing: .02em;
  transition: opacity .2s;
}

.btn-map:hover {
  opacity: .8;
}

.btn-map::after {
  content: "";
  width: 7px;
  height: 7px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* --- 鳥のイラスト --- */
.info-bird {
  position: absolute;
  right: -20px;
  bottom: -37px;
  width: 104px;
  height: auto;
  z-index: 0;
  pointer-events: none;
}

/* --- Instagramカード --- */
.info-insta {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 26px;
  padding: 18px 20px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  color: inherit;
  text-decoration: none;
  transition: box-shadow .2s;
}

.info-insta:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}

.info-insta img {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  display: block;
  color: #E63979;
}

.info-insta p {
  margin: 0;
  line-height: 1.6;
  font-weight: 400;
}

.info-insta strong {
  font-weight: bold;
}

#profile .ttl-en {
  font-size: var(--sub-heading);
  color: #EDA98D;
  font-weight: bold;
  text-align: center;
  margin-bottom: 19px;
}


/* --- 画面が広がったときだけ少し大きく --- */
/* @media (min-width: 600px) {
  .info-block {
    font-size: 16px;
    padding: 32px 28px 38px;
  }

  .info-bird {
    width: 124px;
  }

  .profile-bird {
    top: -56px;
    width: 73px;
  }
} */

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* news */

#news {
  /* position を付けないと、次のセクション（#to-nursery）の背景が
     あとから塗られて影が隠れてしまうため */
  position: relative;
}

/* 背景色の箱。SPでは全幅なので #news に塗っていたのと同じ見た目です。
   PC（1024px～）ではこの箱の幅を狭めて内側に寄せます（#news の外側にクリーム色が見えます） */
.news-box {
  background-color: #F2D0C2;
  padding-top: 24px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .16);
}

/* 左下の木。PC（1024px～）だけ表示します */
.news-tree-bottom {
  display: none;
}

/* 見出しの右上の木。.introduce の右端にそろえています */
#news .introduce {
  position: relative;
}

.news-img {
  position: absolute;
  top: -4px;
  right: -3px;
  width: 64px;
  height: auto;
}

#news .en-ttl {
  font-size: var(--sub-heading);
  color: #E63979;
  font-weight: bold;
  text-align: center;
  margin-bottom: 19px;
}

#news h2 {
  font-size: var(--middle-heading);
  color: #716054;
  text-align: center;
  padding-bottom: 11px;
  margin-bottom: 12px;
  border-bottom: 1px solid #000;
}

.news-accent-color {
  color: #E63979;
}

.news-accent-color>strong {
  font-weight: 700;
}

.news-inner {
  width: 87%;
  margin: 0 auto;
}

#news .intro-text {
  margin-bottom: 0;
}

/* --- お知らせリスト ---------------------------------------------------- */
.page-news {
  padding: 24px 0 0;
}

/* 左右の余白は .page-news の padding ではなく、この箱の幅で（左右20pxずつ） */
.page-news-inner {
  width: calc(100% - 40px);
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 40px;
}

/* --- リスト本体 --- */
.page-news-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-news-list>li+li {
  margin-top: 22px;
}

.page-news-list-link {
  position: relative;
  display: block;
  padding: 15px 48px 15px 20px;
  /* 右側は矢印のぶん空ける */
  background: #fff;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  color: #5B534D;
  text-decoration: none;
  transition: box-shadow .2s;
}

.page-news-list-link:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, .16);
}

/* --- 日付＋カテゴリ --- */
.page-news-list-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
}

.page-news-list-date {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .02em;
}

.page-news-list-cat {
  display: inline-block;
  padding: 0px 15px;
  border-radius: 999px;
  background: #e8579f;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .02em;
  white-space: nowrap;
}

/* --- 本文 --- */
.page-news-list-title {
  display: block;
  margin-top: 3px;
  font-size: 16px;
  line-height: 1.6;
}

/* --- 「＞」矢印（画像不要） --- */
.page-news-list-link::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 22px;
  width: 9px;
  height: 9px;
  margin-top: -5px;
  border-top: 2px solid #8a8a8a;
  border-right: 2px solid #8a8a8a;
  transform: rotate(45deg);
}

/* --- 矢印なし（詳細ページのないお知らせ） ---
   使い方：<a> を <div> にして page-news-list-noarrow を追加
   <div class="page-news-list-link page-news-list-noarrow"> … </div> */
.page-news-list-noarrow {
  padding-right: 20px;
  /* 矢印ぶんの余白を左と同じに */
}

.page-news-list-noarrow::after {
  content: none;
}

.page-news-list-noarrow:hover {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  /* リンクではないので影を変えない */
}

/* キーボード操作時だけ青枠を出す */
.page-news-list-link:focus-visible {
  outline: 2px solid #2196f3;
  outline-offset: 0;
}

/* --- 一覧へのリンク --- */
.page-news-more {
  margin-top: 22px;

  text-align: right;
}

.page-news-more-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 4px 2px;
  color: #5B534D;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}

.page-news-more-link:hover {
  opacity: .7;
}

.page-news-more-link::after {
  content: "";
  width: 9px;
  height: 9px;
  border-top: 2px solid #4a4a4a;
  border-right: 2px solid #4a4a4a;
  transform: rotate(45deg);
  flex-shrink: 0;
}

.news-bottom {
  display: flex;
  align-items: flex-end;
  background-color: #F2D0C2;
}

.news-bottom img {
  display: block;
}

/* --- 画面が広がったときだけ少し大きく --- */
@media (min-width: 600px) {
  .page-news {
    padding: 32px 0 40px;
  }

  /* 左右28pxずつ */
  .page-news-inner {
    width: calc(100% - 56px);
  }

  .page-news-list-link {
    padding: 18px 52px 18px 24px;
  }

  .page-news-list-noarrow {
    padding-right: 24px;
  }

  .page-news-list-date,
  .page-news-list-title,
  .page-news-more-link {
    font-size: 17px;
  }
}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* to-nursery */

#to-nursery {
  padding-top: 60px;
  background-color: #F5F7F0;
}

.nav-box {
  width: 87%;
  margin: 0 auto 55px;
  background-color: #fdfdfd;
  border: 1px solid #D9D9D9;
  border-radius: 16px;
  padding-bottom: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .16);
}

.about-icon {
  display: block;
  margin: 0 auto;
  max-width: 100px;
  margin-top: -24px;
}

.about-nav .en-ttl {
  color: #94C49E;
  margin-bottom: 10px;
}

.nav-btn-box {
  text-align: center;
}

.nav-btn-box p {
  width: 84%;
  margin: 0 auto 20px;
  text-align: left;
}

.nav-ttl {
  text-align: center;
  margin-bottom: 23px;
  font-weight: 500;
}

/* 画像の中のカニがボックスの左右中央にくるように置いています。
   カニの中心は画像の幅350pxのうち248.5pxの位置＝中心より右寄りなので、
   画像をいったん中央に置いたうえで左へ36pxずらしています
   （170px表示時：248.5 × 170/350 − 85 ＝ 約36px） */
.guide-icon {
  display: block;
  max-width: 170px;
  margin-top: -24px;
  margin-inline: auto;
  transform: translateX(-36px);
}

.guide-nav .en-ttl {
  color: #8DB5ED;
  margin-bottom: 10px;
}


/* ======================================================================
   ナビボタン 共通部分
   寸法・矢印・ホバーの動きはすべてここ。色は下の個別クラスで指定します
   font-size は指定していません（サイト側の root / 親要素の指定が効きます）
   ====================================================================== */
.nav-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 272px;
  max-width: 100%;
  height: 45px;
  padding: 0 46px 0 16px;
  margin-bottom: 15px;
  border: 2px solid transparent;
  border-radius: 50px;
  background-color: #fdfdfd;
  font-weight: bold;
  line-height: 1.2;
  letter-spacing: .04em;
  text-align: center;
  transition: background-color .25s, color .25s;
}

/* ホバー・フォーカス時：地色と文字色が反転 */
.nav-btn:hover,
.nav-btn:focus-visible {
  color: #fff;
}

.nav-btn-label {
  display: block;
  white-space: nowrap;
  /* 2行に折り返させない */
}

/* --- 右の丸＋下向き矢印（画像不要） ---
   丸は塗りつぶし。currentColor なので文字色に追従します
   通常時：色地に白矢印 ／ ホバー時：白地に色矢印（下の個別クラスで指定） */
.nav-btn-icon {
  position: absolute;
  top: 50%;
  right: 12px;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  margin-top: -14px;
  border-radius: 50%;
  background-color: currentColor;
  transition: background-color .25s;
}

/* 矢印の縦棒 */
.nav-btn-icon::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 1.5px;
  height: 12px;
  margin-left: -.75px;
  background-color: #fff;
  transition: background-color .25s;
}

/* 矢印の先端 */
.nav-btn-icon::after {
  content: "";
  position: absolute;
  top: 11.5px;
  left: 50%;
  box-sizing: border-box;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-left: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: rotate(-45deg);
  transition: border-color .25s;
}

/* ======================================================================
   色違い　※増やすときはこの3ブロックをコピーして色コードだけ変えてください
   ====================================================================== */

/* --- 園について：緑 --- */
.about-nav-btn {
  border-color: #94c49e;
  color: #94c49e;
}

.about-nav-btn:hover,
.about-nav-btn:focus-visible {
  background-color: #94c49e;
}

/* ホバー時、丸は白（currentColorで自動）／矢印を色付きに */
.about-nav-btn:hover .nav-btn-icon::before,
.about-nav-btn:focus-visible .nav-btn-icon::before {
  background-color: #94c49e;
}

.about-nav-btn:hover .nav-btn-icon::after,
.about-nav-btn:focus-visible .nav-btn-icon::after {
  border-color: #94c49e;
}

/* --- 入園案内：青 --- */
.guide-nav-btn {
  border-color: #8db5ed;
  color: #8db5ed;
}

.guide-nav-btn:hover,
.guide-nav-btn:focus-visible {
  background-color: #8db5ed;
}

.guide-nav-btn:hover .nav-btn-icon::before,
.guide-nav-btn:focus-visible .nav-btn-icon::before {
  background-color: #8db5ed;
}

.guide-nav-btn:hover .nav-btn-icon::after,
.guide-nav-btn:focus-visible .nav-btn-icon::after {
  border-color: #8db5ed;
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* point */

.point {
  position: relative;
}

/* 見出しの下、スライダーの上に入るフクロウ */
.point-img {
  position: absolute;
  top: 57px;
  left: 3px;
  width: 140px;
  height: auto;
}

/* 右下の木（お知らせと同じ画像） */
.point-tree {
  position: absolute;
  right: 20px;
  bottom: 0;
  width: 64px;
  height: auto;
}

.point h3 {
  max-width: 200px;
  margin: 0 auto 100px;
  border-radius: 50px;
  background-color: #94C49E;
  color: #fdfdfd;
  font-size: var(--middle-heading);
  padding: 10px 0;
  text-align: center;
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* life */

.life {
  background-color: #94C49E;
  padding: 40px 0 0;
  /* 下は .oneday（うすい緑の帯）が続くので 0。
     スライダーだけにする場合は 40px 0 に戻してください */
}

.life h3 {
  max-width: 200px;
  margin: 0 auto 100px;
  border-radius: 50px;
  border: 1px solid #fdfdfd;
  color: #fdfdfd;
  font-size: var(--middle-heading);
  padding: 5px 0;
  text-align: center;
}

/* --- 園での生活スライダー ------------------------------------------------
   SP           : 写真の下にテキスト（緑地に白文字）
   PC(1024px～) : 左に写真／右に白いカード
   ※写真はトリミングしません（幅100%・高さauto＝元画像の比率のまま）
   ※1件ずつ送る動きはSP・PC共通。出し分けはこのCSSだけで行っています */
.life-slider {
  width: 87%;
  margin: 0 auto;
}

.life-item {
  margin: 0;
}

.life-item-photo img {
  display: block;
  width: 100%;
  height: auto;
}

.life-item-body {
  padding-top: 20px;
  color: #fdfdfd;
}

.life-item-date {
  margin: 0 0 12px;
  font-size: var(--sub-heading);
  font-weight: 700;
  letter-spacing: .02em;
}

.life-item-text {
  margin: 0;
  font-size: var(--main-text);
  line-height: 1.7;
}

/* --- 矢印＋ドットの並び（共通パーツ） --- */
.slider-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 24px;
  padding-bottom: 40px;
}

/* 矢印と横並びにするときは、ドット単体のときの余白を打ち消す */
.slider-nav .slider-dots {
  margin: 0;
  padding: 0;
}

.slider-arrow {
  position: relative;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  appearance: none;
}

/* 矢印の線の色は color で変わります（下の .life 内の指定を参照） */
.slider-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}

.slider-arrow-prev::before {
  transform: translate(-30%, -50%) rotate(-135deg);
}

.slider-arrow-next::before {
  transform: translate(-70%, -50%) rotate(45deg);
}

/* 緑地なので矢印・ドットは白 */
.life .slider-arrow {
  color: #fdfdfd;
}

.life .slider-dot {
  background-color: #fdfdfd;
}

/* --- PC：左に写真／右に白いカード --- */
/* 1024pxまではSPデザインのまま。PCレイアウトは1025px以上から */
@media (min-width: 1025px) {
  .life-slider {
    width: min(86%, 900px);
  }

  .life-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 左右の幅の比率。写真を大きくしたいときは 1.1fr 1fr など */
    gap: 40px;
    align-items: stretch;
  }

  .life-item-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px;
    background-color: #fdfdfd;
    color: #5B534D;
  }

  .life-item-text {
    font-size: 15px;
  }
}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* 園でのいちにち（タイムライン） */

/* ---------------------------------------------------------------------
   調整はこの2つの数値でほぼ済みます
     --oneday-step  : ●から●までの間隔（＝1項目ぶんの高さ）
     --oneday-dot-y : 項目の上端から●の中心までの距離（時刻の行に合わせる）
   項目の間隔を広げたいところだけ <li class="oneday-item oneday-item-wide">
   --------------------------------------------------------------------- */
.oneday {
  background-color: #F5F7F0;
  padding-top: 65px;
  /* 下は動物イラストを入れる余白。必要に応じて増やしてください */
}

.oneday-ttl {
  max-width: 220px;
  margin: 0 auto 45px;
  padding: 11px 0;
  border-radius: 50px;
  background-color: #94C49E;
  color: #fdfdfd;
  font-size: var(--sub-heading);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

/* ●から●までの間隔は52px（＝.oneday-item の height）。
   項目の上端から●の中心までは12px、●の大きさは13px、
   文字とたて線のあいだは16px。変えるときはこの数値が出てくる箇所をまとめて直してください */
.oneday-list {
  position: relative;
  width: 90%;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

/* 中央のたて線（最初の●から最後の●まで） */
.oneday-list::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 12px;
  /* 52px（項目の高さ）− 12px（●の位置） */
  bottom: 40px;
  width: 2px;
  margin-left: -1px;
  background-color: #C69372;
}

/* 最後の項目が .oneday-item-wide のときは、たて線もその高さぶん伸ばします
   （104px − 12px）。項目を減らして最後が入れかわっても線が足りなくなりません */
.oneday-list:has(> .oneday-item:last-child.oneday-item-wide)::before {
  bottom: 92px;
}

/* 1項目 = 幅は半分。高さを固定して、●の間隔を一定にしています。
   はみ出した文字は反対側の余白に入るので重なりません */
.oneday-item {
  position: relative;
  width: 50%;
  height: 52px;
}

/* 間隔を広げたい項目につけるクラス */
.oneday-item-wide {
  height: 104px;
}

/* SPだけ間隔を広げたい項目につけるクラス（PCは通常の92pxに戻ります）
   項目名が3行になって、すぐ下の項目の文字に重なるときに使います */
.oneday-item-wide-sp {
  height: 104px;
}

/* 奇数＝線の左（右寄せ） */
.oneday-item:nth-child(odd) {
  padding-right: 16px;
  text-align: right;
}

/* 偶数＝線の右（左寄せ） */
.oneday-item:nth-child(even) {
  margin-left: 50%;
  padding-left: 16px;
  text-align: left;
}

/* 線の上の● */
.oneday-item::before {
  content: "";
  position: absolute;
  top: 12px;
  width: 13px;
  height: 13px;
  margin-top: -6.5px;
  border-radius: 50%;
  background-color: #94C49E;
}

.oneday-item:nth-child(odd)::before {
  right: -6.5px;
}

.oneday-item:nth-child(even)::before {
  left: -6.5px;
}

/* 時刻・項目名・ひとことは、丸写真より前面に出して読めるようにしています */
.oneday-time,
.oneday-title,
.oneday-note {
  position: relative;
  z-index: 1;
}

.oneday-time {
  margin: 0;
  color: #000;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .02em;
}

.oneday-title {
  margin: 6px 0 0;
  color: #000;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

/* 折り返しで分けたくない語のまとまり。
   例）活動とあそび・<span class="oneday-nowrap">戸外活動</span>
   → 1行に入らないときは「・」の後ろでまとめて改行します */
.oneday-nowrap {
  display: inline-block;
}

.oneday-note {
  margin: 4px 0 0;
  color: #94C49E;
  font-size: 13px;
  line-height: 1.4;
  font-family: "Kiwi Maru", serif;
  font-weight: bold;
  letter-spacing: -0.09em;
}

/* --- 丸写真 ---------------------------------------------------------
   項目の中に置くと、その項目と同じ側のいちばん外側に出ます。
   上下の位置はHTML側の style="top: calc(50% + 60px)" で1枚ずつ調整（マイナスで上へ）。
   大きさを変えたいときは width と height を同じ値にしてください */
.oneday-photo {
  /* --photo-x : たて線から写真の内側の端までの距離
     --photo-y : 項目の中心からの上下（マイナスで上へ）
     どちらも .oneday-photo-1 〜 -4 で1枚ずつ指定しています。
     390px未満では外にはみ出すので、列の外側の端で止めます。
     直径は96px。画面が384pxより狭いときは画面幅の25％まで小さくして、文字との重なりを防ぎます */
  --photo-size: min(96px, 25vw);
  --photo-x: min(79.5px, calc(100% - var(--photo-size)));
  --photo-y: 0px;
  position: absolute;
  top: calc(50% + var(--photo-y));
  transform: translateY(-50%);
  display: block;
  width: var(--photo-size);
  height: var(--photo-size);
  border-radius: 50%;
  background-color: #D9D9D9;
  /* 写真が入るまでのグレー */
  object-fit: cover;
  pointer-events: none;
}

/* --- 丸写真の上下位置 ----------------------------------------------
   写真そのものに付けたクラスで指定しています。
   項目（li）の数が増えても減っても、写真は自分の項目について動くので
   付け替えは不要です。位置を変えたいときはこの4つの数値を直してください */
.oneday-photo-1 {
  --photo-y: 60px;
}

.oneday-photo-2 {
  --photo-y: 70px;
}

.oneday-photo-3 {
  --photo-y: 80px;
}

.oneday-photo-4 {
  --photo-y: -40px;
}

/* --- 項目の数ごとの微調整 --------------------------------------------
   項目（li）の数で、写真の上下位置を変えられます。
   :nth-child(9):last-child は「9番目が最後の項目＝項目がちょうど9個」
   という意味です。HTMLには何も足さずに切り替わります。
   2・3枚目や、ほかの個数（8個・11個など）も同じ書き方を足せば指定できます。
   4枚目は -22px より下げると、下の鹿のイラストに重なります */

/* 項目が9個のとき */
.oneday-list:has(> .oneday-item:nth-child(9):last-child) .oneday-photo-1 {
  --photo-y: 80px;
}

/* 15:00のイラスト（.oneday-deco-tea-up）とぶつからないよう少し上へ */
.oneday-list:has(> .oneday-item:nth-child(9):last-child) .oneday-photo-2 {
  --photo-y: 55px;
}

.oneday-list:has(> .oneday-item:nth-child(9):last-child) .oneday-photo-4 {
  --photo-y: 0px;
}

/* 項目が10個のとき */
.oneday-list:has(> .oneday-item:nth-child(10):last-child) .oneday-photo-1 {
  --photo-y: 60px;
}

.oneday-list:has(> .oneday-item:nth-child(10):last-child) .oneday-photo-4 {
  --photo-y: -40px;
}

/* --- 丸写真の左右 ---------------------------------------------------
   1・3枚目はたて線の左、2・4枚目は右、と写真ごとに決め打ちしています。
   項目が1つ減ると項目の左右（奇数・偶数）は入れかわりますが、
   写真はこの指定で元の側に残るので、2枚が同じ側に並んで重なることがありません。
   項目が線の反対側にいるときは calc(100% + …) でたて線をまたがせています */
.oneday-item:nth-child(odd)>.oneday-photo-1,
.oneday-item:nth-child(odd)>.oneday-photo-3 {
  right: var(--photo-x);
  left: auto;
}

.oneday-item:nth-child(even)>.oneday-photo-1,
.oneday-item:nth-child(even)>.oneday-photo-3 {
  right: calc(100% + var(--photo-x));
  left: auto;
}

.oneday-item:nth-child(odd)>.oneday-photo-2,
.oneday-item:nth-child(odd)>.oneday-photo-4 {
  left: calc(100% + var(--photo-x));
  right: auto;
}

.oneday-item:nth-child(even)>.oneday-photo-2,
.oneday-item:nth-child(even)>.oneday-photo-4 {
  left: var(--photo-x);
  right: auto;
}

/* --- あしらいのイラスト ---------------------------------------------
   時刻の項目（li）の中に置いて、そこからの位置で配置しています。
   --deco-x … たて線から右へどれだけ離すか
   top      … その項目の上端からの距離（マイナスで上へ）
   写真と同じく、項目の左右が入れかわってもたて線の右側に残します */
.oneday-deco {
  --deco-x: 0px;
  position: absolute;
  display: block;
  height: auto;
  pointer-events: none;
}

.oneday-item:nth-child(odd)>.oneday-deco {
  left: calc(100% + var(--deco-x));
  right: auto;
}

.oneday-item:nth-child(even)>.oneday-deco {
  left: var(--deco-x);
  right: auto;
}

/* 9:00 おやつ・朝の集い */
.oneday-deco-snack {
  --deco-x: 69px;
  width: 74px;
  top: -24px;
}

/* 11:30 昼食（12:30あたりの高さに置いています） */
.oneday-deco-lunch {
  --deco-x: 69px;
  width: 50px;
  top: 102px;
}

/* 15:00 検温・おやつ */
.oneday-deco-tea {
  --deco-x: 109px;
  width: 46px;
  top: 11px;
}

/* 項目名が長くてイラストと重なるとき用（SPのみ。PCは上の位置のまま）
   <img class="oneday-deco oneday-deco-tea oneday-deco-tea-up" …>
   項目名の右ではなく、時刻（15:00）の右上に置きます */
.oneday-deco-tea-up {
  --deco-x: 82px;
  top: -18px;
}

/* 項目が9個のとき、最後の丸写真（20:00）がうすい緑の帯の下にはみ出すので、
   帯の下を少し伸ばします（PCは別に下の余白があるので不要） */
@media (max-width: 1023px) {
  .oneday:has(.oneday-list > .oneday-item:nth-child(9):last-child) {
    padding-bottom: 24px;
  }

  /* 項目が9個のとき、2枚目の丸写真を「お昼ごはん」の文字の下まで下げます */
  .oneday-list:has(> .oneday-item:nth-child(9):last-child) .oneday-photo-2 {
    --photo-y: 76px;
  }

  /* 15:00のイラスト（.oneday-deco-tea-up）は、右側だと丸写真とぶつかるので
     たて線の左側（15:00の●の左上）に置きます */
  .oneday-item:nth-child(even)>.oneday-deco-tea-up {
    left: auto;
    right: calc(100% + 24px);
    top: -8px;
  }
}

/* 左に親子の鹿、右に1頭。画像ごとに横幅を％で持たせているので、
   画面幅が変わっても並びと大きさの比率は変わりません */
.timeline-img {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 80%;
  margin: 0 auto;
}

.timeline-img img {
  display: block;
  height: auto;
}

.timeline-img-pair {
  width: 46%;
}

.timeline-img-single {
  width: 13%;
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* 園長先生の声*/

.manager-message {
  background-image: url(/assets/img/facility-manager-bg.jpg);
  background-repeat: repeat;
  padding: 32px 0 20px;
}

.manager-flex-box {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 15px;
}

.manager-img {
  min-width: 155px;
  max-width: 50%;
}

.manager-text {
  margin-top: -3px;
}

.manager-text p {
  line-height: 1.2;
  font-size: 15px;
  letter-spacing: 0.02em;
}

.manager-text h3 {
  font-family: "Kiwi Maru", serif;
  font-weight: 500;
  padding-bottom: 13px;
}

.manager-name {
  font-family: "Kiwi Maru", serif;
  color: #716054;
  font-weight: 500;
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* 年間行事*/

.event {
  background-color: #F5F7F0;
  padding-top: 50px;
}

.event h3 {
  background-color: #94C49E;
  border-radius: 50px;
  padding: 5px 0;
  color: #fdfdfd;
  text-align: center;
  font-size: var(--middle-heading);
  max-width: 220px;
  margin: 0 auto 50px;
}


.event-img {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  width: 84%;
  margin: 0 auto -3px;
}

.event-img img {
  display: block;
  height: auto;
}

.event-img-apple {
  width: 14.2%;
  margin-right: 24.9%;
  /* 画像の下の透明部分のぶん、くまと足元をそろえる */
  margin-bottom: -0.9%;
}

.event-img-bear {
  width: 25.4%;
  margin-right: 3.6%;
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* プログラム*/

.program {
  background-color: #ABDEB6;
  padding-top: 50px;
}

.p-right-item {
  display: none;
}

.program h3 {
  background-color: #FDFDFD;
  color: #94C49E;
  font-size: var(--middle-heading);
  text-align: center;
  max-width: 220px;
  padding: 5px 0;
  border-radius: 50px;
  margin: 0 auto 60px;
}

.program h4 {
  text-align: center;
  font-size: var(--middle-heading);
  padding-bottom: 25px;
  width: 78%;
  margin: 0 auto 30px;
  border-bottom: 1px solid #5B534D;
}

.program-text {
  width: 78%;
  margin: 0 auto 45px;
  font-size: var(--main-text);
}

.program-price-box {
  width: 88%;
  margin: 0 auto 10px;
  background-color: #fdfdfd;
  border-radius: 16px;
  padding: 17px 25px 16px 35px;
}

.program-name {
  font-size: var(--middle-heading);
  font-weight: bold;
}

.program-price {
  font-size: var(--main-text);
  color: #7E9B86;
  font-weight: 900;
  text-align: right;
}

.program-change-bg img {
  display: block;
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* サービス*/
.service {
  position: relative;
  z-index: 2;
}

.service h3 {
  background-color: #94C49E;
  color: #fdfdfd;
  font-size: var(--middle-heading);
  text-align: center;
  max-width: 220px;
  padding: 5px 0;
  border-radius: 50px;
  margin: 0 auto 60px;
}

.service h4 {
  text-align: center;
  font-size: var(--middle-heading);
  padding-bottom: 25px;
  width: 78%;
  margin: 0 auto 30px;
  border-bottom: 1px solid #5B534D;
}

.service-text {
  width: 78%;
  margin: 0 auto 45px;
  font-size: var(--main-text);
}

.service-price-box {
  width: 88%;
  margin: 0 auto 10px;
  background-color: #fdfdfd;
  border-radius: 16px;
  padding: 17px 25px 16px 35px;
}

.service-name {
  font-size: var(--middle-heading);
  font-weight: bold;
  margin-bottom: 20px;
}

.service-detail {
  margin-bottom: 20px;
}

.service-price {
  font-size: var(--main-text);
  color: #7E9B86;
  font-weight: 900;
  text-align: right;
}

/* レスポンシブ用に .service-flex-box / .plan を足したことで、
   .daily が .service の中に入りました。
   そのままだと後ろに書かれている .daily の緑がおむつプランの白いカードに
   かぶってしまうので、.plan を1段前に出しています。
   （.service が position: relative / z-index: 2 で重なりの基準になっています） */
.plan {
  position: relative;
  z-index: 1;
}


/* SPでは写真を出しません（PCだけ2カラムで写真つきになります） */
.program-photo {
  display: none;
}

/* 料金カードの中の小さい（　）書き */
.program-name span,
.service-name span,
.service-detail span,
.daily-detail span {
  font-size: 0.72em;
}

/* 料金ボックスの下の ※注記（2行） */
.program-note {
  width: 88%;
  margin: 0 auto;
  padding-left: 5px;

  font-size: var(--main-text);
  line-height: 1.75;
}

/* 連携企業枠についての注記 */
.service-note {
  width: 78%;
  /* 上は .service-text の margin-bottom(45px) を打ち消して本文のすぐ下に付けています */
  margin: -38px auto 45px;
  color: #7E9A85;
  font-size: var(--main-text);
}

/* おむつプランのカードを並べる箱。SPは縦積みです */
.service-box-list .service-price-box+.service-price-box {
  margin-top: 15px;
}

/* さんのみやキッズは緑がカードの後ろにせり上がりますが、
   企業主導型はカンプどおりカードの下から緑を始めます */
.service-multi .daily {
  margin-top: 45px;
  padding-top: 54px;
}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* デイリー*/

.daily {
  background-color: #94C49E;
  margin-top: -45px;
  z-index: -1;
  padding-top: 105px;
  padding-bottom: 100px;
}

.daily h4 {
  text-align: center;
  font-size: var(--middle-heading);
  padding-bottom: 25px;
  width: 78%;
  margin: 0 auto 30px;
  border-bottom: 1px solid #5B534D;
}

.daily-text {
  width: 78%;
  margin: 0 auto 45px;
  font-size: var(--main-text);
}

.daily-price-box {
  width: 88%;
  margin: 0 auto 10px;
  background-color: #fdfdfd;
  border-radius: 16px;
  padding: 17px 25px 16px 35px;
}

.daily-name {
  font-size: var(--middle-heading);
  font-weight: bold;
  margin-bottom: 20px;
}

.daily-detail {
  margin-bottom: 10px;
}

.daily-price {
  font-size: var(--main-text);
  color: #7E9B86;
  font-weight: 900;
  text-align: right;
}

/* 料金ボックスの「月額　2,600円」。間は &emsp; ではなく gap で
   <p class="program-price"><span>月額</span><span>2,600円</span></p> */
.program-price,
.service-price,
.daily-price {
  display: flex;
  justify-content: flex-end;
  gap: 1em;
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* セクションの境目（波） */

/* ---------------------------------------------------------------------
   波は画像ではなくSVGの半円をよこに繰り返して動かしています。
   数値の意味
     波の高さ 9px  … .wave-layer::before の height（＋継ぎ目用の1px）と
                      .wave-blue の top、.wave-divider の height に出てきます
     波の幅  29px  … background-size と @keyframes wave-slide の移動量
     速さ     8s   … .wave-layer::before の animation（白＝10.8s／手前＝13.6s）
   --------------------------------------------------------------------- */
.wave-divider {
  position: relative;
  /* .daily が .service（z-index: 2）の中に入ったので、
     それより上にしないと茶色のワニが緑に隠れてしまいます */
  z-index: 3;
  /* 上のセクションに1px重ねる。ぴったり接すると拡大率によって
     境目に細い線が見えることがあるため */
  margin-top: -1px;
  /* 波の高さ9px × 2 + 36px */
  height: 54px;
  /* 上のセクション（.daily）の色 */
  background-color: #94C49E;
}

/* 帯そのもの（下は塗りつぶし）
   bottom を -1px にしているのは、画面の拡大率によっては
   いちばん下に1pxのスキマ（線）が出ることがあるため */
.wave-layer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
}

/* 帯の上辺の波。半円でくり抜いた形を横に繰り返しています */
.wave-layer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  /* 1pxだけ帯に重ねる。ぴったり接するとブラウザの拡大率によって
     継ぎ目に線が出るため、わざと重ねています */
  bottom: calc(100% - 1px);
  /* 波の高さ9px ＋ 重ねる1px */
  height: 10px;
  background-repeat: repeat-x;
  background-size: 29px 100%;
  animation: wave-slide 8s linear infinite;
}

/* 奥＝水色。top は波の高さ9px */
.wave-blue {
  background-color: #7ACDF4;
  top: 9px;
}

.wave-blue::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12' preserveAspectRatio='none'%3E%3Cpath d='M0 0 A 10 12 0 0 0 20 0 L20 12 L0 12 Z' fill='%237ACDF4'/%3E%3C/svg%3E");
}

/* まんなか＝白。top は 9px + 16px */
.wave-white {
  background-color: #FFFFFF;
  top: 25px;
}

.wave-white::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12' preserveAspectRatio='none'%3E%3Cpath d='M0 0 A 10 12 0 0 0 20 0 L20 12 L0 12 Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
  /* 8s × 1.35。左へ流す */
  animation-duration: 10.8s;
  animation-direction: reverse;
}

/* 手前＝次のセクションの色。top は 9px + 29px */
.wave-front {
  background-color: #EAEEF7;
  top: 38px;
}

.wave-front::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12' preserveAspectRatio='none'%3E%3Cpath d='M0 0 A 10 12 0 0 0 20 0 L20 12 L0 12 Z' fill='%23EAEEF7'/%3E%3C/svg%3E");
  /* 8s × 1.7 */
  animation-duration: 13.6s;
}

@keyframes wave-slide {
  from {
    background-position-x: 0;
  }

  to {
    background-position-x: 29px;
  }
}

/* --- ワニ --- */
.wave-alligator {
  position: absolute;
  display: block;
  height: auto;
}

.wave-alligator-back {
  right: 0;
  width: 40%;
  max-width: 220px;
  top: -53px;
  z-index: 0;
}

.wave-alligator-front {
  left: -50px;
  width: 41%;
  max-width: 225px;
  top: 31px;
  z-index: 3;
}

@media (prefers-reduced-motion: reduce) {

  .wave-layer::before {
    animation: none;
  }
}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* 入園・ご利用案内 */

.guide {
  background-color: #EAEEF7;
  padding-top: 80px;
}

.guide h3 {
  background-color: #8DB5ED;
  color: #fdfdfd;
  font-size: var(--middle-heading);
  text-align: center;
  max-width: 220px;
  padding: 5px 0;
  border-radius: 50px;
  margin: 0 auto 25px;
}

.guide-text {
  text-align: center;
  margin-bottom: 33px;
  font-size: var(--main-text);
}

/* 全体 */
.table-accordion {
  position: relative;
  width: 100%;
}

/* 左下の魚。PC（1024px～）だけ表示します */
.fish07 {
  display: none;
}

/* もっと見るボタンの左にいる魚。
   top を px で指定しているので、アコーディオンが開いて
   .table-accordion の高さが変わっても位置は動きません */
.fish03 {
  position: absolute;
  top: 16px;
  left: 14px;
  width: 91px;
  height: auto;
  pointer-events: none;
}


/* =========================
   もっと見るボタン
========================= */

.more-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 0 auto;
  padding: 20px 30px;
  background: transparent;
  border: 0;
  color: #5B534D;
  cursor: pointer;
}


/* ＋ */
.more-icon {
  position: relative;
  width: 20px;
  height: 20px;
  display: block;
}

.more-icon::before,
.more-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #5B534D;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease;
}


/* 横線 */
.more-icon::before {
  width: 20px;
  height: 2px;
}


/* 縦線 */
.more-icon::after {
  width: 2px;
  height: 20px;
}


/* もっと見る */
.more-text {
  font-weight: 500;
  line-height: 1.4;
}


/* hover */
.more-btn:hover {
  opacity: 0.65;
}


/* 開いたとき＋を－に */
.table-accordion.is-open .more-icon::after {
  transform:
    translate(-50%, -50%) rotate(90deg);
}


/* =========================
   table開閉
========================= */

.more-table-area {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 0.4s ease,
    opacity 0.3s ease;
}

.table-inner {
  overflow: hidden;
}

.table-accordion.is-open .more-table-area {
  grid-template-rows: 1fr;
  opacity: 1;
}


/* =========================
   table
========================= */
.time-guide-table,
.price-guide-table,
.fee-table,
.table-inner table {
  width: 88%;
  margin: 0 auto 15px;
  text-align: center;
  vertical-align: middle;
  font-size: var(--main-text);
  border-collapse: separate;
  border-spacing: 0.5px;
  border: 0.5px solid #B9B5B5;
}

.time-guide-table th,
.price-guide-table th,
.fee-table th,
.table-inner th {
  width: 35%;
  color: #fdfdfd;
  font-weight: bold;
  background-color: #8DB5ED;
  height: 65px;
}

.time-guide-table td,
.price-guide-table td,
.fee-table td,
.table-inner td {
  width: 65%;
  background-color: #fdfdfd;
  height: 65px;
}

.price-guide-table tbody tr:nth-child(n+2):nth-child(-n+3) th,
.price-guide-table tbody tr:nth-child(n+2):nth-child(-n+3) td {
  height: 112px;
}

.time-guide-table th,
.time-guide-table td,
.price-guide-table th,
.price-guide-table td,
.fee-table th,
.fee-table td,
.table-inner th,
.table-inner td {
  border-bottom: 0.5px solid #B9B5B5;
}

.time-guide-table tr:last-child th,
.time-guide-table tr:last-child td,
.price-guide-table tr:last-child th,
.price-guide-table tr:last-child td,
.fee-table tr:last-child th,
.fee-table tr:last-child td,
.table-inner table tr:last-child th,
.table-inner table tr:last-child td {
  border-bottom: none;
}

.table-inner table th span {
  font-size: 0.8em;
}

/* --- 表の中の時間・金額の位置合わせ（&emsp; や &nbsp; は使いません） ---
   数字は tabular-nums で全部同じ幅にして、桁をそろえます */
.time-guide-table td,
.price-guide-table td,
.fee-table td,
.table-inner td {
  font-variant-numeric: tabular-nums;
}

/* 時間・期間：「開始」「～」「終了」の3列。どの行も「～」が縦一列にそろいます
   <span class="time-range"><span>7:30</span><span>～</span><span>19:00</span></span>
   列幅を変えたいときは grid-template-columns の数値だけ直してください */
.time-range {
  display: inline-grid;
  grid-template-columns: 3.2em 1.5em 3.2em;
}

.time-range>span:first-child {
  text-align: right;
}

.time-range>span:nth-child(2) {
  text-align: center;
}

.time-range>span:last-child {
  text-align: left;
}

/* 金額：決まった幅の箱の中で右ぞろえにして、行の終わり（「円」や「/月」の後ろ）をそろえます
   <span class="price-row"><span>1,200円</span><span class="price-unit">/月</span></span>
   箱の幅（width）は一番長い金額＋単位がちょうど入る大きさにして、表の中で中央寄りに見えるようにしています
   （5.1em ＝「3,300円/月」、6.2em ＝「3,000円/30分」がちょうど入る幅） */
.price-row {
  display: inline-block;
  width: 5.1em;
  text-align: right;
}

/* 「/30分」「/60分」など長い単位がある表は箱を広げます
   （保育料の表は常に。ほかの表は <table class="price-wide"> を付けたときだけ） */
.price-guide-table .price-row,
.price-wide .price-row {
  width: 6.2em;
}


.guide-label {
  width: 88%;
  margin: 0 auto 20px;

  color: #3A86DB;
  font-size: var(--main-text);
  font-weight: bold;
}

.fee-list {
  margin-bottom: 31px;
}

.fee-table {
  margin-bottom: 23px;
}

.fee-table:last-child {
  margin-bottom: 0;
}

.fee-price {
  color: #8DB5ED;
  font-size: var(--sub-heading);
  font-weight: bold;
}

/* 3歳児クラスの（無償化対象外は…）だけ小さく */
.fee-price-sub {
  display: block;
  margin-top: 2px;

  color: #5B534D;
  font-size: 14px;
  font-weight: normal;
}

/* 高さは .fee-table td（65px）より強くしたいので td. で指定しています */
.fee-table td.fee-detail {
  height: 100px;
  padding: 0 10px;
  font-size: var(--main-text);
}

/* 内訳の下の但し書き */
.fee-note {
  display: block;
  margin-top: 12px;
  font-size: 14px;
}

/* 「副食費 4,500円」の金額部分 */
.fee-strong {
  color: #8DB5ED;
  font-size: var(--sub-heading);
  font-weight: bold;
}

/* 割引き・連携企業枠についての箇条書き */
.guide-notes {
  width: 88%;
  margin: 0 auto 30px;
  padding: 0;

  list-style: none;
  font-size: var(--main-text);
}

/* 「・」を1文字ぶらさげます */
.guide-notes li {
  padding-left: 16px;
  text-indent: -16px;
  line-height: 1.2;
}

.guide-notes li+li {
  margin-top: 21px;
}

.guide-notes span {
  color: #3A86DB;
  font-weight: bold;
}

/* 表とのあいだ */
.guide-price .time-guide-table {
  margin-bottom: 57px;
}

/* アコーディオンの中に表が2つ並ぶので、そのあいだを空けます */
.guide-price .table-inner table+table {
  margin-top: 36px;
}


.table-attentinon {
  width: 88%;
  margin: 0 auto 110px;
  text-align: right;
  font-weight: 500;

  position: relative;
}

.fish01 {
  display: block;
  max-width: 120px;
  position: absolute;
  top: 35px;
  left: -10px;
}

.fish02 {
  display: block;
  max-width: 190px;
  position: absolute;
  top: 45px;
  right: -65px;
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* 登園について*/

.attendance {
  position: relative;
  z-index: 1;
  background-color: #EAEEF7;
  padding-bottom: 50px;
}

/* PCのみのあしらい（登園について） */
.at-fish {
  display: none;
}

/* --- マンボウ（大）---
   アーチの手前。.attendance の下端を基準に、下のセクションへはみ出させています
   （.temporary-care は overflow: hidden なので、あちらに入れると上が切れます） */
.fish05 {
  position: absolute;
  right: 64px;
  bottom: -60px;
  width: 71px;
  height: auto;
  pointer-events: none;
}

.attendance h3 {
  background-color: #8DB5ED;
  color: #fdfdfd;
  font-size: var(--middle-heading);
  text-align: center;
  max-width: 220px;
  padding: 5px 0;
  border-radius: 50px;
  margin: 0 auto 45px;
}

.attendance-card {
  position: relative;
  width: 88%;
  margin: 60px auto 20px;
  background-color: #fdfdfd;
  border: 1px solid #ddd;
  border-radius: 24px;
  padding-top: 50px;
  padding-bottom: 35px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}

.attendance-card:last-child {
  margin-bottom: 20px;
}

/* 「園に置いておくもの」のカードの左下にいるヒトデ。
   .attendance-card が position: relative なので、そこからの位置で置いています */
.fish04 {
  position: absolute;
  left: 4px;
  bottom: -40px;
  width: 64px;
  height: auto;
  pointer-events: none;
}

/* 上に重なるアイコン */
.attendance-card-icon {
  position: absolute;
  top: 0;
  left: 50%;
  width: 62px;
  height: 62px;
  transform: translate(-50%, -50%);
}

.attendance h4 {
  font-size: var(--sub-heading);
  font-weight: bold;
  text-align: center;
}

.attendance h4::after {
  content: "";
  display: block;
  width: 70px;
  height: 1px;
  margin: 15px auto 15px;
  background-color: #716054;
}

.attendance-detail {
  width: 80%;
  margin: 0 auto;
}

/* 途中で折り返したくない語のまとまり（1行に入らないときは、まとめて次の行へ）
   例）着替え・パジャマ・<span class="attendance-nowrap">連絡帳関係など</span> */
.attendance-nowrap {
  display: inline-block;
}

.attendance-detail-attention {
  width: 80%;
  margin: 0 auto;
  font-size: 11px;
  text-align: right;
  color: #000;
}

.attendance-yellow {
  color: #DFA209;
  font-weight: 500;
}

.attendance-red {
  color: #DF4509;
  font-weight: 500;
}

/* =========================
   アコーディオン全体
========================= */

.attendance-accordion {
  width: 74%;
  margin: 0 auto;
}

/* =========================
   タイトル部分
========================= */

.accordion-title {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 18px 0 14px;

  color: #716054;
  font-size: var(--main-text);
  font-weight: bold;

  cursor: pointer;
  border-bottom: 1px solid #716054;
  margin-bottom: 10px;
}


/* details標準の三角を消す */
.accordion-title::-webkit-details-marker {
  display: none;
}

.accordion-title::marker {
  content: "";
}


/* =========================
   ＋アイコン
========================= */

.accordion-icon {
  position: relative;

  width: 20px;
  height: 20px;

  flex-shrink: 0;
  margin-left: 20px;
}


/* 横線・縦線共通 */
.accordion-icon::before,
.accordion-icon::after {
  content: "";

  position: absolute;
  top: 50%;
  left: 50%;

  background-color: #716054;

  transform: translate(-50%, -50%);
}


/* 横線 */
.accordion-icon::before {
  width: 20px;
  height: 1px;
}


/* 縦線 */
.accordion-icon::after {
  width: 1px;
  height: 20px;

  transition: opacity 0.3s ease;
}


/* 開いたら＋ → － */
.accordion-item[open] .accordion-icon::after {
  opacity: 0;
}


/* =========================
   本文
========================= */

.accordion-content {
  padding: 0 0 24px;
  color: #716054;
  font-size: var(--main-text);
  overflow: hidden;
}


/* 段落間 */
.accordion-content p {
  margin-bottom: 24px;
  font-weight: 400;
  line-height: 1.2;
}

.accordion-content p:last-child {
  margin-bottom: 0;
}


/* =========================
   開くときのアニメーション
========================= */

.accordion-item[open] .accordion-content {
  animation: accordion-open 0.35s ease;
}

@keyframes accordion-open {

  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}


.accordion-orange {
  color: #F36E09;
  font-weight: 500;
}

.accordion-yellow {
  color: #DFA209;
  font-weight: 500;
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* 一時預かりについて*/


.temporary-care {
  position: relative;
  /* 中のマンボウを z-index: -1 で青いアーチの後ろに置くため、
     このセクション自身を重なりの基準（stacking context）にしています */
  z-index: 0;
  overflow: hidden;
  padding: 100px 0 0;
  background-color: #EAEEF7;
}


/* PCのみ：ボタンの下を流れる文字／黄色い魚／インタビュー上の流れる文字 */
.tc-marquee,
.iv-marquee,
.fish08 {
  display: none;
}

/* <picture> 自体は箱を作らず、中の <img> をそのまま並べます */
.interview-photo-pic {
  display: contents;
}

/* --- マンボウ（小）---
   z-index: -1 で青いアーチ（::before は z-index: 0）の後ろに入り、
   下のほうがアーチに隠れます。位置はこのセクションの上端から10px */
.fish06 {
  position: absolute;
  z-index: -1;
  top: 10px;
  right: 16px;
  width: 42px;
  height: auto;
  pointer-events: none;
}

.temporary-care::before {
  content: "";
  position: absolute;
  top: 45px;
  bottom: 0;
  left: 50%;
  width: 200%;
  background-color: #8DB5ED;
  border-radius: 50% 50% 0 0 / 140px 140px 0 0;
  transform: translateX(-50%);
  z-index: 0;
}


/* 中身を背景より前に出す */
/* 左右の余白は .temporary-care の padding ではなく、この箱の幅で（左右20pxずつ） */
.temporary-care-inner {
  position: relative;
  z-index: 1;
  width: calc(100% - 40px);

  text-align: center;
}


/* =========================
   見出し
========================= */

.temporary-care h3 {
  width: 230px;
  margin: 0 auto 45px;
  padding: 5px 0;
  background-color: #fdfdfd;
  color: #4F82C6;
  font-size: var(--sub-heading);
  font-weight: bold;
  text-align: center;
  border-radius: 50px;
}


/* =========================
   本文
========================= */

.temporary-care-text {
  color: #716054;
  text-align: center;
  margin-bottom: 40px;
}


.temporary-care h4 {
  font-size: 23px;
  font-weight: bold;
  text-align: center;
  color: #FFF9F9;
}

.temporary-care h4::after {
  content: "";
  display: block;
  width: 140px;
  height: 1px;
  margin: 15px auto 25px;
  background-color: #FFF9F9;
}

.temporary-care-date {
  font-size: 23px;
  color: #FFF9F9;
  font-weight: bold;
  margin-bottom: 35px;
}

.temporary-care-attention {
  width: 78%;
  margin: 0 auto 40px;
  font-size: var(--main-text);
  line-height: 1.2;
  text-align: left;
}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* リクルート*/

.recruit {
  position: relative;
  background-color: #F5F7F0;
}

.temporary-care-btn {
  display: block;
  margin: 0 auto;
  color: #fdfdfd;
  font-weight: bold;
  text-align: center;
  max-width: 300px;
  border-radius: 50px;
  background-color: #DFA209;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  padding: 10px 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -20px;
  width: 100%;
}

/* --- リクルート本体 -----------------------------------------------------
   数値の意味
     写真の1辺   150px … .recruit-photo の width と img の height
     写真の間隔   26px … .recruit-photo の margin-right
                         （gap だと最後の1枚の後ろに間隔がつかず、つなぎ目で13pxずれるため）
     ジグザグ段差 115px … .recruit-photo:nth-child(even) の margin-top
                         （.recruit-photos の height は 150 + 115 ＝ 265px）
     流れる速さ        … 文字26s ／ 写真80s（大きいほどゆっくり。写真は1周12枚ぶんの秒数）
   ※ボタンがはみ出すので、.recruit ではなく .recruit-inner を overflow: hidden に
   ----------------------------------------------------------------------- */
.recruit-inner {
  position: relative;
  overflow: hidden;
  /* 下の余白は気球のぶん */
  padding: 80px 0 70px;
}

/* 背景の丸（疑似要素） */
.recruit-inner::before,
.recruit-inner::after {
  content: "";
  position: absolute;
  border: 1px solid #F5EBC7;
  border-radius: 50%;
  pointer-events: none;
}

.recruit-inner::before {
  width: 290px;
  height: 290px;
  top: 40px;
  left: -120px;
}

.recruit-inner::after {
  width: 290px;
  height: 290px;
  bottom: 110px;
  right: -150px;
}

/* --- 流れる文字 --- */
.recruit-marquee {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.recruit-marquee-track {
  display: flex;
  width: max-content;
  animation: recruit-marquee 26s linear infinite;
}

.recruit-marquee-track span {
  padding-right: 60px;
  /* 文字と文字の間隔 */
  font-size: 40px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .02em;
  white-space: nowrap;
}

/* 濃い文字＝右から左へ */
.recruit-marquee-dark .recruit-marquee-track span {
  color: #989995;
}

/* 薄い文字＝左から右へ（同じアニメを逆再生） */
.recruit-marquee-light .recruit-marquee-track {
  animation-direction: reverse;
}

.recruit-marquee-light .recruit-marquee-track span {
  color: #E9E6E5;
}

@keyframes recruit-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* --- リード文 --- */
.recruit-lead {
  position: relative;
  z-index: 1;
  margin: 50px 0 0;
  color: #716054;
  font-size: var(--middle-heading);
  font-weight: 700;
  line-height: 2.2;
  text-align: center;
}

/* --- 流れる写真 ---
   気球（z-index: 2）より前面。重ね順は
   太陽 0 ＜ 文字・リード 1 ＜ 気球 2 ＜ 写真 3 */
.recruit-photos {
  position: relative;
  z-index: 3;
  margin-top: 55px;
  overflow: hidden;
  /* 写真1枚ぶん150px ＋ ジグザグの段差115px */
  height: 265px;
}

.recruit-photos-track {
  display: flex;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: recruit-marquee 80s linear infinite;
}

.recruit-photo {
  width: 150px;
  flex-shrink: 0;
  margin-right: 26px;
}

/* ジグザグ。偶数枚目を下げています */
.recruit-photo:nth-child(even) {
  margin-top: 115px;
}

.recruit-photo img {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
  /* PC（280pxで角丸50px）と同じ比率で、SPは150px → 27px */
  border-radius: 27px;
}

/* --- イラスト（写真の後ろ） --- */
.recruit-accent {
  position: absolute;
  z-index: 0;
  display: block;
  height: auto;
}

.recruit-accent-sun {
  width: 80px;
  left: -20px;
  bottom: 80px;
}

/* 気球は次のセクション（.interview は z-index: 1）より前面、
   ただし流れる写真（z-index: 3）よりは後ろ */
.recruit-accent-balloon {
  z-index: 2;
  width: 80px;
  left: 45px;
  bottom: -25px;
}

/* OSで「視差効果を減らす」設定にしている人には動かさない */
@media (prefers-reduced-motion: reduce) {

  .recruit-marquee-track,
  .recruit-photos-track {
    animation: none;
  }
}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* インタビュー*/

.interview {
  position: relative;
  z-index: 1;
  /* 下のボタンのマイナスマージンがセクションの外に逃げないように */
  display: flow-root;
  background-color: #F5EBC7;
  padding-top: 45px;
}

/* 背景の白い丸。上の .recruit にはみ出してまたがるので、
   overflow: hidden を付けていない .interview 側に置いています。
   （中身の .interview-card は z-index: 1 なのでこの丸より前面） */
.interview::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -57px;
  left: -82px;
  width: 246px;
  height: 246px;
  border: 1px solid #FFFFFF;
  border-radius: 50%;
  pointer-events: none;
}

.interview-inner {
  position: relative;
  padding-bottom: 25px;
}

.interview-lead {
  position: relative;
  z-index: 1;
  margin: 0 0 30px;
  color: #5B534D;
  font-size: var(--main-text);
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}

/* --- インタビューカード --- */
.interview-card {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 26px;
  width: 91%;
  margin: 0 auto;
  padding: 18px 22px 15px 14px;
  border-radius: 16px;
  background-color: #fdfdfd;
  box-shadow: 0 4px 4px rgba(0, 0, 0, .15);
}

.interview-profile {
  width: 130px;
  flex-shrink: 0;
  text-align: center;
}

/* 正方形の写真を丸く切り抜き */
.interview-photo {
  display: block;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  object-fit: cover;
}

.interview-name {
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.3;
}

.interview-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.interview-text {
  margin: 10px 0 0;
}

/* 丸ボタン＋Interviewの文字。右寄せ */
.interview-link {
  margin: 16px 0 0 auto;
  color: #5B534D;
  text-decoration: none;
  text-align: center;
}

.interview-link-icon {
  position: relative;
  display: block;
  width: 36px;
  height: 36px;
  margin: 0 auto;
  border-radius: 50%;
  background-color: #DFA209;
  transition: opacity .2s;
}

/* 白い「＞」 */
.interview-link-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -6px;
  border-top: 2px solid #fdfdfd;
  border-right: 2px solid #fdfdfd;
  transform: rotate(45deg);
}

.interview-link-label {
  display: block;
  margin-top: 8px;
  font-size: var(--main-text);
  line-height: 1.2;
}

.interview-link:hover .interview-link-icon {
  opacity: .8;
}

/* --- リクルートサイトへのボタン（セクションの境目にまたがる） --- */
.interview-btn {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 87%;
  height: 50px;
  /* 高さの半分だけ下のセクションにはみ出す */
  margin: 0 auto -25px;
  border-radius: 50px;
  background-color: #62BFD5;
  box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
  color: #fdfdfd;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none;
  transition: opacity .2s;
}

.interview-btn:hover {
  opacity: .85;
}

.interview-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 24px;
  width: 9px;
  height: 9px;
  margin-top: -5px;
  border-top: 2px solid #fdfdfd;
  border-right: 2px solid #fdfdfd;
  transform: rotate(45deg);
}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* お問合せ */

.contact {
  background-color: #F5F7F0;
  padding-top: 55px;
  padding-bottom: 60px;
}

.contact-inner {
  display: block;
  width: 84%;
  margin: 0 auto;
}

.contact-ttl-img {
  max-width: 53px;
  margin: 0 auto 15px;
}

.contact-ttl-img img {
  display: block;
}

.contact .en-ttl {
  font-size: var(--sub-heading);
  color: #90B022;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}

.contact h2 {
  text-align: center;
}

.contact h2::after {
  content: "";
  display: block;
  width: 300px;
  /* 320px幅の画面では枠（約270px）より長くなり横スクロールが出るので、枠の幅で止めます */
  max-width: 100%;
  height: 1px;
  margin: 45px auto 20px;
  background-color: #5B534D;
}

.contact h3 {
  color: #7E9B86;
  margin-bottom: 20px;
}

.contact-intro {
  font-size: var(--main-text);
  margin-bottom: 60px;
}

.contact-flex-box {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10%;
  margin-bottom: 10px;
}

.to-icon {
  max-width: 50px;
  width: 100%;
}

.to-mail {
  margin-bottom: 70px;
}

.to-contact-btn {
  display: block;
  background-color: #94C49E;
  color: #FDFDFD;
  font-size: var(--sub-heading);
  padding: 18px 0 18px 24px;
  font-weight: bold;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.to-line {
  margin-bottom: 65px;
}

.to-line h3 {
  color: #06C755;
}

.to-line .to-contact-btn {
  background-color: #06C755;
}

.to-tel {
  margin-bottom: 70px;
}

.to-tel span {
  background-color: #D9D9D9;
  display: inline-block;
  padding: 2px 14px;
  margin-top: 15px;
}

.to-tel .contact-flex-box {
  margin-bottom: 40px;
}

.to-tel .to-contact-btn {
  background-color: #DFA209;
  font-size: var(--middle-heading);
  font-weight: 500;
  letter-spacing: 0.05em;
}

.to-tel h3 {
  color: #D5A607;
}

/* Instagramバナー。<a class="banner"> でリンクにしています
   （<div class="banner"> のままの園もそのまま表示されます） */
.banner {
  display: block;
  transition: opacity .2s;
}

a.banner:hover {
  opacity: .8;
}

a.banner:focus-visible {
  outline: 2px solid #2196f3;
  outline-offset: 2px;
}

.banner img {
  display: block;
}

/* .to-top {
  background-color: #F5F7F0;
} */

/* TOPボタン（.to-top-btn）はPC専用。見た目の指定は 1024px以上 のメディアクエリにあります */


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* 右側のサイドナビ（1024px～）

   1300pxのカンプ実測
     タブ     幅88px・右端にぴったり。左の角だけ13pxの丸
     高さ     1つめ117px／2～4つめ84px・あいだ15px
     中身     文字2行（--main-text・行間1.3）＋ 下に「∨」14×8px
     色       #EDA98D ／ #8DB5ED ／ #F2D994 ／ #94C49E

   動き：高さ0のsticky枠（.pc-nav-wrap）を FV の直後に置いています。
         本文の流れに場所を取らないので、FVの下から始まって
         スクロールで上端に来たらそこで止まります。
   ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

.pc-nav-wrap {
  display: none;
}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* 画面下に固定するナビ（～1023px）*/

.sp-nav {
  position: fixed;
  z-index: 100;
  left: 50%;
  bottom: 0;
  width: 100%;
  transform: translateX(-50%);
}

.sp-nav-list {
  display: flex;
  /* ボタンのあいだのすき間。下の背景が細く見えます */
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sp-nav-list li {
  flex: 1;
  min-width: 0;
}

.sp-nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 55px;
  background-color: #FA7DAB;
  color: #fdfdfd;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.2;
  letter-spacing: .02em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .2s;
}

.sp-nav-btn:hover {
  opacity: .85;
}


/* アイコン（画像なし・線で描いています） */
.sp-nav-icon {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #fdfdfd;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 太陽のトゲだけ塗り */
.sp-nav-icon-fill {
  fill: #fdfdfd;
  stroke: none;
}

/* --- TOPへ戻るサル ---
   facility-to-top.png は画像の下に灰色の「TOP」が入っているので、
   高さ72pxの枠で切り取ってサルだけ見せ、白い「▲ TOP」は
   CSSで上に重ねています */
.sp-nav-top {
  position: absolute;
  right: 0;
  /* バーの高さぶん上に置くと、サルの下半分がバーに隠れます */
  bottom: 55px;
  width: 74px;
  height: 72px;
  overflow: hidden;
  text-decoration: none;
}

.sp-nav-top img {
  display: block;
  width: 74px;
  height: auto;
}

.sp-nav-top-label {
  position: absolute;
  left: 30px;
  bottom: 6px;
  transform: translateX(-50%);
  color: #fdfdfd;
  font-family: "Times New Roman", serif;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: .02em;
}

/* 文字の上の白い三角 */
.sp-nav-top-label::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  margin: 0 0 3px -3.5px;
  border-right: 3.5px solid transparent;
  border-bottom: 6px solid #fdfdfd;
  border-left: 3.5px solid transparent;
}

/* 固定ナビのサルと重なるので、ページ末尾のTOPボタンはここでは隠します。
   高さは固定ナビのぶんの余白として残しています */
/* SP・タブレットでは固定ナビのサルがあるので、ページ末尾のTOPボタンは出しません（PC専用） */
.to-top-btn {
  display: none;
}

/* .to-top {
  padding-bottom: 80px;
} */


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* タブレット対応：中身の最大幅（～1024px）

   390pxのデザインをそのまま広い画面でも使うため、
   各ブロックが横に伸びすぎないよう上限を付けています。
   基準は「本文カラム600px」。各値は
     もとの％ × 600px
   で出しているので、390pxのときの余白バランスがそのまま保たれます。
   背景色の帯は全幅のままです。
   ＝＝＝ 幅を変えたくなったら、この600pxを基準に計算し直してください ＝＝＝
   （例：78%のブロックなら 600 × 0.78 ＝ 468px） */

/* 見出しまわり（77.7% → 466px） */
.introduce {
  max-width: 466px;
}

/* お知らせ（87% → 522px ／ 内側は左右20pxパディングぶん引いて560px） */
.news-inner {
  max-width: 522px;
}

.page-news-inner,
.info-block-inner {
  max-width: 560px;
}

/* 園を知る・入園案内のボックス（87% → 522px） */
.nav-box {
  max-width: 522px;
}

.nav-btn-box p {
  max-width: 504px;
}

/* 園での生活スライダー。
   写真1枚が大きく見えるので、他の枠（522px）より小さめで止めています
   （隣の「園の特徴」スライダーの写真が286px固定なのとのバランス） */
.life-slider {
  max-width: 440px;
}

/* 園でのいちにち。ここだけは広げていません。
   ●や写真がたて線からの距離で固定されているので、
   枠だけ広げても外側に余白が増えるだけになるためです */
.oneday-list {
  max-width: 450px;
}

.timeline-img {
  max-width: 400px;
}

/* 園長先生の声。写真・本文・名前をまとめた箱（.manager-inner）の幅で中央に置きます
   （左右12pxずつ。名前の左端も写真の左端にそろいます） */
.manager-inner {
  width: calc(100% - 24px);
  max-width: 576px;
  margin-inline: auto;
}

/* 年間行事の動物（84% → 504px）
   ※りんご・くまの大きさは枠に対する％指定なので、枠が広がるとその比率で大きくなります
   　390pxのときの大きさで固定したい場合は、下の2行のコメントを外してください */
.event-img {
  max-width: 504px;
}

/*
.event-img-apple { max-width: 47px; }
.event-img-bear  { max-width: 83px; }
*/

/* プログラム・サービス・デイリー（78% → 468px ／ 料金ボックス 88% → 528px） */
.program h4,
.program-text,
.service h4,
.service-text,
.daily h4,
.daily-text,
.temporary-care-attention {
  max-width: 468px;
}

.program-price-box,
.service-price-box,
.daily-price-box {
  max-width: 528px;
}

/* 料金表（88% → 528px） */
.time-guide-table,
.price-guide-table,
.table-inner table,
.table-attentinon {
  max-width: 528px;
}

/* 登園について（88% → 528px ／ 本文80% → 480px ／ アコーディオン74% → 444px） */
.attendance-card {
  max-width: 528px;
}

.attendance-detail,
.attendance-detail-attention {
  max-width: 480px;
}

.attendance-accordion {
  max-width: 444px;
}

/* 一時預かり（左右20pxパディングぶん引いて560px） */
.temporary-care-inner {
  max-width: 560px;
  margin-inline: auto;
}

/* インタビュー（91% → 546px ／ ボタン87% → 522px） */
.interview-card {
  max-width: 546px;
}

.interview-btn {
  max-width: 522px;
}

/* お問い合わせ（84% → 504px） */
.contact-inner {
  max-width: 504px;
}

@media (min-width: 500px) {



  .wave-alligator-back {
    top: -90px;
  }

  .to-tel .contact-flex-box {
    margin-bottom: 15px;
  }
}


@media (min-width: 768px) {

  #profile {
    padding-top: 40px;
  }

  .interview-text {
    margin: 12px 0 0;
    font-size: 15px;
    line-height: 1.35;
  }

}

@media (min-width: 1024px) {
  .union {
    display: none;
  }

  .logo-box {
    top: 9.3%;
    left: 2.2%;
  }

  /* 見出しまわり（カンプ：下線570px・本文は約640pxで2行） */
  .introduce {
    max-width: 640px;
  }

  #profile .ttl-en {
    margin-bottom: 28px;
  }

  #profile h2 {
    max-width: 570px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 32px;
    margin-bottom: 25px;
  }

  .intro-text {
    margin-bottom: 60px;
    text-align: center;
  }

  .profile-bird {
    top: -40%;
    /* left: 15px; */
    left: 1%;
    width: 120px;
  }


  /* --- 企業主導型保育園ってなに？（PC）：枠線つきのカード ---
       1366pxのカンプ実測
         カード    幅908px・中央ぞろえ・#EDA98D の2px枠
         帯        高さ52px。文字は左64px、＋は右52px
         中身      左右64px・上52px・下54px
         3つの項目 アイコン70px ＋ 余白23px ＋ 本文。左右48pxずつ内側に寄せます   */
  .corporate {
    max-width: 908px;
    margin: 0 auto 96px;

    border: 2px solid #EDA98D;
  }

  .corporate-head {
    height: 52px;
    padding: 0 52px 0 64px;
  }

  .corporate-inner {
    padding: 52px 64px 54px;
  }

  /* PCでは2文が1行ずつ並びます */
  .corporate-intro p+p {
    margin-top: 12px;
  }

  .corporate-list {
    margin: 68px 48px 0;
  }

  /* アイコンと本文を横並びに。高さが違っても上下中央でそろえます */
  .corporate-item {
    display: flex;
    align-items: center;
    gap: 23px;
  }

  .corporate-item+.corporate-item {
    margin-top: 46px;
  }

  .corporate-icon {
    display: block;

    width: 70px;
    height: auto;

    flex-shrink: 0;
  }

  .corporate-detail {
    flex: 1;
  }

  .corporate-lead {
    padding-bottom: 15px;
    text-align: left;
  }

  .corporate-text {
    margin-top: 13px;
  }


  /* --- こんなところが自慢です（PC）：2カラム --- */
  .pride-catch {
    margin-bottom: 5px;
  }

  .pride-catch-arc {
    width: 166px;
    height: 38px;
  }

  .pride-ttl {
    margin-bottom: 60px;
  }

  /* 下の余白：丸のすぐ下からスライダーが始まります（鳥はスライダー側の位置指定で丸の左下に来ます） */
  .pride {
    margin-bottom: 80px;
  }

  /* --- こんなところが自慢です（PC）：丸2つを横に並べる ---
     カンプ：丸は直径451px・ピンクの細い枠線、あいだ45px。
     丸の中は上から60px空けて「見出し → アイコン → 本文」の順（HTMLは アイコン→見出し→本文 なので order で入れ替え） */
  .pride-list {
    display: flex;
    justify-content: center;
    gap: 45px;
  }

  .pride-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 451px;
    height: 451px;
    padding-top: 60px;
  }

  .pride-item+.pride-item {
    margin-top: 0;
  }

  .pride-item::before {
    top: 0;
    width: 451px;
    height: 451px;
    margin-left: -225.5px;
    /* border: 1px solid #FA7DAB; */
    box-shadow: 0px 4px 4px 0px rgba(202, 191, 191, 0.25);

  }

  /* 見出し：3行ぶんの高さを確保して、2行・3行どちらでもアイコンの位置がそろうようにします */
  .pride-lead {
    order: 1;
    height: 90px;
    margin: 0 0 25px;
    /* 2行の見出しは3行ぶんの高さの中で上下中央に */
    align-content: center;
    font-size: var(--middle-heading);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.01em;
  }

  /* SPの見出し下の線はPCでは出しません */
  .pride-lead::after {
    content: none;
  }

  .pride-icon {
    order: 2;
    width: auto;
    height: 95px;
    margin: 0 auto 50px;
  }

  .pride-icon-house,
  .pride-icon-tree {
    width: auto;
  }

  .pride-text {
    order: 3;
    /* カンプどおり1行17文字で折り返す幅 */
    width: 17em;
    max-width: none;
    /* 本文は3行ぶんの高さで固定（文字の折り返しが変わっても、見出し・アイコンの位置がずれないように） */
    height: calc(1.3em * 3);
    margin: 0 auto;
    line-height: 1.3;
  }

  /* --- スライダー（PC） -------------------------------------------
     写真の高さ278pxは3つとも共通。
     キャプションの高さだけスライダーごとに変えています。 */
  .photo-slider .photo-slide img {
    height: 278px;
  }

  /* 共通スライダー（PROFILE）：278 ＋ 60 ＝ 338 */
  .photo-slider .swiper {
    height: 338px;
    margin-bottom: 80px;
  }

  .photo-slider .photo-slide {
    padding-bottom: 60px;
  }

  .photo-slider .photo-slide figcaption {
    height: 60px;
    /* 12（写真との間隔）＋ 17px × 1.4 × 2行 */
    padding-top: 12px;
  }

  /* 2段キャプション（園の特徴／年間行事）：278 ＋ 100 ＝ 378
     ※ .photo-slider の指定を打ち消すため、必ずこの下に書いてください */
  .photo-slider-point .swiper {
    height: 378px;
    margin-bottom: 16px;
    /* ドットとの間隔。共通スライダーの80pxに戻らないよう再指定 */
  }

  .photo-slider-point .photo-slide {
    padding-bottom: 100px;
  }

  .photo-slider-point .photo-slide figcaption {
    height: 100px;
    padding-top: 13px;
  }

  .enrollment-item {
    flex: 0 0 250px;
  }

  .enrollment-info {
    gap: 110px;
    /* 60px ＋ 園情報の上の26px */
    margin-bottom: 86px;
  }


}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
   PC（1024px～）：園情報ブロック ／ お知らせ
   カンプ（アートボード1300px）から実寸に換算した値です。
   ・園情報の表        …… 幅746px（中央）
   ・お知らせの背景箱  …… 左右88pxあけて幅1124px
   ・お知らせのカード  …… 幅676px（中央）／高さ96px
   ・「一覧をみる」    …… 背景箱の右端から55pxの位置で右寄せ
   ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
@media (min-width: 1024px) {

  /* ---------- 園情報ブロック ---------- */
  .info-block {
    /* 鳥をこのブロック基準で置くため */
    position: relative;
    padding-bottom: 62px;
  }

  .info-block-inner {
    max-width: 746px;
  }

  /* 見出し列と内容列の間隔を広げる（左端から 32 → 見出し4.6em → 120 → 内容） */
  .info-row {
    gap: 0 120px;
    padding: 28px 32px;
  }

  /* 所在地の行だけ、住所＋ボタンぶん上下の余白を調整 */
  .info-row--address {
    /* 鳥を .info-block 基準で置きたいので、この行は基準から外します */
    position: static;
    padding-top: 20px;
    padding-bottom: 13px;
  }

  /* 住所は1行に収まるので改行を消します（custom.css の .o-1024 が非表示になります） */

  /* Googlemapボタン：内容列の右端にそろえ、矢印なし・文字は中央 */
  .btn-map {
    min-width: 220px;
    margin-top: 21px;
    margin-left: auto;
    padding: 10px 18px;
  }

  .btn-map::after {
    display: none;
  }

  /* 鳥は表の左外側へ。セクション左端から18px */
  .info-bird {
    left: 18px;
    right: auto;
    bottom: 222px;
    width: 124px;
  }

  /* Instagramカード：アイコン左／文字は残りの幅の中央 */
  .info-insta {
    margin-top: 78px;
    padding: 24px 0 24px 67px;
    gap: 0;
  }

  .info-insta img {
    width: 71px;
    height: 71px;
  }

  .info-insta p {
    flex: 1;
    text-align: center;
  }

  /* ---------- お知らせ ---------- */
  /* 背景箱を内側に寄せる。外側に出る色は #profile と同じクリーム */
  #news {
    background-color: #FFF4EE;
  }

  /* 背景箱は #news の padding ではなく、箱自身の幅で内側に寄せます（左右88pxずつ） */
  .news-box {
    width: calc(100% - 176px);
    margin-inline: auto;
    padding-top: 36px;
  }

  #news .introduce {
    max-width: 650px;
  }

  /* 見出し右上の木（左下の木と同じ大きさ） */
  .news-img {
    top: 14px;
    right: 0;
    width: 92px;
  }

  #news .en-ttl {
    margin-bottom: 28px;
  }

  #news h2 {
    padding-bottom: 47px;
    margin-bottom: 24px;
  }

  .news-inner {
    max-width: 650px;
  }

  /* #profile の .intro-text は中央寄せですが、お知らせの本文は左寄せです */
  #news .intro-text {
    text-align: left;
  }

  /* リストは中央676px、「一覧をみる」は箱の右端から55px */
  /* 下の余白は padding で持ちます（margin だと箱の外に抜けてしまうため） */
  .page-news {
    padding: 40px 0 34px;
  }

  /* 左右55pxずつ（「一覧をみる」が箱の右端から55pxになります） */
  .page-news-inner {
    width: calc(100% - 110px);
    max-width: none;
  }

  .page-news-list {
    max-width: 676px;
    margin-inline: auto;
  }

  .page-news-list>li+li {
    margin-top: 40px;
  }

  /* カード：左に日付、右にカテゴリ＋本文。高さは96pxでそろえます */
  .page-news-list-link {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 129px;
    min-height: 96px;
    padding: 14px 56px 14px 40px;
  }

  /* 日付とカテゴリの入れ物を透過させ、グリッドに直接並べます */
  .page-news-list-head {
    display: contents;
  }

  .page-news-list-date {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .page-news-list-cat {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    padding: 0 22px;
  }

  .page-news-list-title {
    grid-column: 2;
    grid-row: 2;
    margin-top: 5px;
  }

  .page-news-list-link::after {
    right: 29px;
  }

  .page-news-list-noarrow {
    padding-right: 40px;
  }

  .page-news-more {
    margin-top: 33px;
    margin-bottom: 0;
  }

  /* 左下の木。芝生より後ろに出します */
  .news-tree-bottom {
    display: block;
    position: absolute;
    left: 42px;
    bottom: 0;
    width: 96px;
  }

  /* 芝生：全幅に敷き、横方向にくり返します（imgだと拡大されすぎるため背景に切替）
     元画像は左右の端に数pxの透明があるため、くり返すとつなぎ目に細い隙間ができます。
     そこで下の土台（画像の下14px＝表示8pxぶん）と同じ色の帯を1枚うしろに敷いて、
     隙間が見えないようにしています */
  .news-bottom {
    position: relative;
    z-index: 1;
    height: 33px;
    margin-top: -23px;
    background-image:
      url(/assets/img/facility-news-bg-bottom.png),
      linear-gradient(#BCD537, #BCD537);
    background-repeat: repeat-x, no-repeat;
    background-position: left bottom, left bottom;
    background-size: auto 33px, 100% 8px;
    background-color: unset;
  }

  .news-bottom img {
    display: none;
  }
}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
   PC（1024px～）：園での生活 ／ 園でのいちにち ／ 園長先生の声
   カンプ（アートボード1300px）から実寸に換算した値です。
   ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
@media (min-width: 1024px) {

  /* ========== 園での生活 ========== */
  .life {
    padding-top: 45px;
  }

  .life h3 {
    max-width: 333px;
    margin-bottom: 38px;
  }

  /* 1300pxのとき 写真520×340 ／ 間101 ／ カード400×250（合計1021px）。
     画面が狭くなるときは、この比率のまま全体が縮みます */
  .life-slider {
    width: min(78.5%, 1021px);
    max-width: 1021px;
    margin-inline: auto;
  }

  .life-item {
    display: grid;
    /* 写真520 : カード400 の比率 */
    grid-template-columns: 520fr 400fr;
    column-gap: 9.89%;
    /* カードは写真に対して上下中央 */
    align-items: center;
  }

  /* 写真は520×340の枠に合わせて表示します
     （ダミー画像が3:2なので上下がわずかに切れます。520×340で入稿されれば切れません） */
  .life-item-photo {
    aspect-ratio: 520 / 340;
  }

  .life-item-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .life-item-body {
    position: relative;
    /* 1300pxでちょうど250px。本文が増えたときだけ縦に伸びます */
    min-height: 250px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #fdfdfd;
    color: #5B534D;
  }

  .life-item-date {
    font-size: 22px;
    margin-bottom: 22px;
  }

  .life-item-text {
    font-size: var(--main-text);
  }

  /* 矢印＋ドットは2つのボックスの中間（＝スライダーの中央）に置きます */
  .life .slider-nav {
    justify-content: center;
    margin-top: 26px;
    padding-bottom: 57px;
  }

  /* ========== 園でのいちにち ========== */
  .oneday {
    position: relative;
    /* 1300px未満では丸写真や鹿が画面の外に出るので、はみ出しを隠します */
    overflow: hidden;
    padding-top: 98px;
    padding-bottom: 154px;
  }

  .oneday-ttl {
    max-width: 332px;
    margin-bottom: 64px;
    padding: 13px 0;
  }

  /* ●から●までは92px（間をあける項目は184px）／●は21px／
     項目の上端から●の中心までは17px／文字とたて線のあいだは38px */
  .oneday-list {
    max-width: 900px;
  }

  .oneday-list::before {
    top: 17px;
    bottom: 75px;
    width: 3px;
    margin-left: -1.5px;
  }

  .oneday-item {
    height: 92px;
  }

  .oneday-item-wide {
    height: 184px;
  }

  .oneday-item:nth-child(odd) {
    padding-right: 38px;
  }

  .oneday-item:nth-child(even) {
    padding-left: 38px;
  }

  .oneday-item::before {
    top: 17px;
    width: 21px;
    height: 21px;
    margin-top: -10.5px;
  }

  .oneday-item:nth-child(odd)::before {
    right: -10.5px;
  }

  .oneday-item:nth-child(even)::before {
    left: -10.5px;
  }

  /* 項目名・ひとことが長いときは2行に折り返して、丸写真の側まで
     文字が伸びないようにします。224pxは、いまの最長の文言
     （項目名10文字＝220px／ひとこと12文字＝218px）が1行に収まる幅です。
     これより長い文字が入ったときだけ2行になります */
  .oneday-time,
  .oneday-title,
  .oneday-note {
    max-width: 300px;
  }

  /* 折り返した文字のかたまりは、たて線側に寄せます */
  .oneday-item:nth-child(odd) .oneday-time,
  .oneday-item:nth-child(odd) .oneday-title,
  .oneday-item:nth-child(odd) .oneday-note {
    margin-left: auto;
    margin-right: 0;
  }

  .oneday-item:nth-child(even) .oneday-time,
  .oneday-item:nth-child(even) .oneday-title,
  .oneday-item:nth-child(even) .oneday-note {
    margin-left: 0;
    margin-right: auto;
  }

  .oneday-time {
    font-size: 27px;
  }

  .oneday-title {
    margin-top: 5px;
    font-size: 21px;
  }

  .oneday-note {
    font-size: 20px;
  }

  /* --- 丸写真（296px）。たて線からの距離と、項目の中心からの上下で置いています --- */
  /* 1300pxで296px。それより狭い画面（タブレット）では写真が画面の外に
     出てしまうので、画面幅に合わせて小さくします（最小150px） */
  .oneday-photo {
    --photo-size: clamp(150px, calc(50vw - 354px), 296px);
  }

  /* 上下・左右とも写真ごとのクラスで指定。たて線のどちら側に出すかは
     SPと同じ指定をそのまま使うので、ここでは距離だけ上書きします */
  .oneday-photo-1 {
    --photo-x: 338px;
    --photo-y: 48px;
  }

  .oneday-photo-2 {
    --photo-x: 338px;
    --photo-y: 60px;
  }

  .oneday-photo-3 {
    --photo-x: 338px;
    --photo-y: 13px;
  }

  .oneday-photo-4 {
    --photo-x: 338px;
    --photo-y: -92px;
  }

  /* PCでも項目の数ごとに調整できます（SPとは別の値にできます）。
     PCの4枚目は -92px より下げると、右下の鹿のイラストに近づきます */

  /* 項目が9個のとき */
  .oneday-list:has(> .oneday-item:nth-child(9):last-child) .oneday-photo-1 {
    --photo-y: 48px;
  }

  .oneday-list:has(> .oneday-item:nth-child(9):last-child) .oneday-photo-4 {
    --photo-y: -92px;
  }

  /* 項目が10個のとき */
  .oneday-list:has(> .oneday-item:nth-child(10):last-child) .oneday-photo-1 {
    --photo-y: 48px;
  }

  .oneday-list:has(> .oneday-item:nth-child(10):last-child) .oneday-photo-4 {
    --photo-y: -92px;
  }

  /* --- あしらいのイラスト --- */
  .oneday-deco-snack {
    --deco-x: 146px;
    width: 95px;
    top: -47px;
  }

  .oneday-deco-lunch {
    --deco-x: 169px;
    width: 95px;
    top: 74px;
  }

  .oneday-deco-tea {
    --deco-x: 280px;
    width: 64px;
    top: 37px;
  }

  /* 最後の項目が .oneday-item-wide のとき（184px − 17px） */
  .oneday-list:has(> .oneday-item:last-child.oneday-item-wide)::before {
    bottom: 167px;
  }

  /* --- 鹿。SPは .timeline-img（1か所）ですが、PCは左上と右下の2か所なので
         .oneday の疑似要素で2つ置いています（親子2頭＋子鹿1頭） --- */
  .timeline-img {
    display: none;
  }

  .oneday::before,
  .oneday::after {
    content: "";
    position: absolute;
    width: 206px;
    height: 157px;
    background-image:
      url(/assets/img/facility-sp-timeline01.png),
      url(/assets/img/facility-sp-timeline02.png);
    background-repeat: no-repeat, no-repeat;
    background-position: left top, right bottom;
    background-size: 146px auto, 40px auto;
    pointer-events: none;
  }

  /* 左上：1300pxでは左から87px。画面が狭いときは
     7:30の文字（たて線から左へ248px）にぶつからない位置まで左に寄せます */
  .oneday::before {
    left: min(87px, calc(50% - 474px));
    top: 150px;
  }

  /* 1240px未満（タブレット）では、7:30の文字と重なるので
     見出し（園でのいちにち）の左横まで上げます */
  @media (max-width: 1239px) {
    .oneday::before {
      top: 40px;
    }
  }

  /* 右下：20:00の丸写真（セクション上端から1417pxで終わる）より下に収まるよう、
     少し小さめ（85%）にしています。これでどの画面幅でも重なりません */
  .oneday::after {
    right: 91px;
    bottom: 0;
    width: 175px;
    height: 134px;
    background-size: 124px auto, 34px auto;
  }

  /* ========== 園長先生の声 ========== */
  /* 左に写真（傾き＋うしろに黄色い四角）／右に見出し・名前・本文
     写真385 ＋ 間110 ＋ 本文480 ＝ 975px の箱（.manager-inner）を中央に置きます。
     画面が狭いときは箱の幅（100% − 左右60pxずつ）で止まり、本文の列だけが縮みます
     （写真のうしろの黄色い四角が左に24pxはみ出すので、左右は60px あけています） */
  .manager-message {
    padding: 67px 0 60px;
  }

  .manager-inner {
    display: grid;
    grid-template-columns: 385px minmax(0, 480px);
    /* 見出し・名前は中身ぶんの高さ。余ったぶんは3行目（本文）の行が受けます。
       これを auto auto auto にすると、写真の高さに合わせて
       見出しと名前の行まで引き伸ばされ、行間が広く見えます */
    grid-template-rows: auto auto 1fr;
    align-items: start;
    column-gap: 110px;
    width: calc(100% - 120px);
    max-width: 975px;
  }

  .manager-flex-box {
    display: contents;
  }

  .manager-text {
    display: contents;
  }

  .manager-img {
    grid-column: 1;
    grid-row: 1 / span 3;
    position: relative;
    z-index: 0;
    min-width: 0;
    max-width: none;
    width: 385px;
    /* 上のセクションに少しはみ出します */
    margin-top: -99px;
    /* transform: rotate(-4deg); */
  }

  /* うしろの黄色い四角 */
  .manager-img::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: -24px;
    top: 31px;
    width: 100%;
    height: 100%;
    background-color: #E0BE00;
    transform: rotate(-5deg);
  }

  .manager-img img {
    display: block;
    width: 100%;
    height: auto;
  }

  .manager-text h3 {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    /* ← 見出しと名前のあいだ */
    padding-bottom: 10px;
    font-size: var(--middle-heading);
    /* Kiwi Maru は行送りが広いので、指定しないと箱が高くなります */
    line-height: 1.4;
  }

  .manager-name {
    grid-column: 2;
    grid-row: 2;
    /* ← 名前と本文のあいだ */
    margin: 0 0 51px;
    font-family: "Kiwi Maru", serif;
    font-size: var(--middle-heading);
    font-weight: 400;
    line-height: 1.4;
  }

  .manager-text p {
    grid-column: 2;
    grid-row: 3;
    margin: 0;
    font-size: var(--main-text);
    line-height: 1.8;
  }

  .event-img {
    display: none;
  }

  .slider-dots {
    padding-bottom: 150px;
  }

  .program {
    position: relative;
    /* 枝の右側と、写真の傾きぶんのはみ出しを横方向だけ切ります。
       clip なので、上にはみ出す枝（top: -44px）はそのまま見えます */
    overflow-x: clip;
  }

  .program::before,
  .program::after {
    content: "";
    position: absolute;
    width: 110px;
    height: 97px;
    background-image: url(/assets/img/facility-about-nav-accent.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
  }

  /* 右上。上のセクションにはみ出します */
  .program::before {
    top: -44px;
    right: 0;
  }

  /* 左下。アーチの境目にまたがる位置 */
  .program::after {
    bottom: 7px;
    left: 4px;
    transform: scaleX(-1);
  }

  .program h3 {
    max-width: 325px;
    margin: 0 auto 100px;
  }

  .p-pc-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 100px;
    margin-bottom: 100px;
  }

  .p-right-item {
    display: block;
    position: relative;
    z-index: 0;
    max-width: 490px;
  }

  .p-right-item::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: 15px;
    background-color: #DFA209;
    transform: rotate(3deg);
  }

  .p-right-item img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 15px;
  }

  .program-price-box {
    margin: 0 auto;
    padding: 25px;

    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .program-name,
  .program-price {
    font-size: var(--middle-heading);
  }

  .program h4,
  .program-text {
    max-width: 500px;
  }

  .program h4 {
    padding-bottom: 0;
    margin: 0 auto 20px;
    border-bottom: none;
  }

  .program-text {
    width: 78%;
    margin: 0 auto 45px;
    border-bottom: 1px solid #5B534D;
    padding-bottom: 35px;
    font-size: var(--main-text);
  }


  /* --- 企業主導型：プログラムが2つ並ぶレイアウト ---
       1280pxのカンプ実測
         カード    幅440px・あいだ80px（合計960px・中央ぞろえ）
         写真      カード幅いっぱい。うしろのオレンジは3度回転
         見出し    左ぞろえ・下線なし。写真から70px、本文まで30px
         料金ボックス・注記  幅960px                                    */
  .program-multi .program-list {
    display: flex;
    justify-content: space-between;
    /* gap: 80px; */

    max-width: 900px;
    margin: 0 auto 60px;
  }

  .program-multi .program-item {
    width: 440px;
  }

  /* 写真。うしろに少し傾けたオレンジの板を敷いています */
  .program-multi .program-photo {
    display: block;
    position: relative;
    z-index: 0;
    margin-bottom: 70px;
  }

  .program-multi .program-photo::before {
    content: "";

    position: absolute;
    z-index: -1;
    inset: 0;

    border-radius: 15px;
    background-color: #DFA209;

    transform: rotate(3deg);
  }

  .program-multi .program-photo img {
    display: block;

    width: 100%;
    height: auto;
    /* 写真の縦横比が違っても2枚の高さがそろうようにしています */
    aspect-ratio: 440 / 268;
    object-fit: cover;

    border-radius: 15px;
  }

  .program-multi h4 {
    max-width: none;
    margin: 0 0 30px;
    padding-bottom: 0;

    text-align: left;
    border-bottom: none;
  }

  .program-multi .program-text {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-bottom: 0;
    border-bottom: none;
  }

  .program-multi .program-price-box {
    max-width: 700px;
    margin-bottom: 20px;
  }

  .program-multi .program-note {
    width: 100%;
    max-width: 700px;
    /* カンプ実測：料金ボックスの左端から44px内側 */
    padding-left: 44px;
  }


  /* --- 企業主導型：おむつプランA・Bが横並び、Dailyはその下 ---
       1280pxのカンプ実測
         中身      幅960px・中央ぞろえ
         見出し    左ぞろえ・下線なし。本文まで35px
         本文の下  1本線（35px下）→ その38px下にカード
         カード    2枚を65pxあけて等分
         Dailyまで 68px                                                */
  .service-multi .service-flex-box {
    display: block;

    max-width: 960px;
    margin: 0 auto;
    padding-bottom: 170px;
  }

  .service-multi h4 {
    max-width: none;
    width: 100%;
    margin: 0 0 35px;
    padding-bottom: 0;

    text-align: left;
    border-bottom: none;
  }

  .service-multi .service-text,
  .service-multi .daily-text {
    max-width: none;
    width: 100%;
    margin: 0;
  }

  .service-multi .service-note {
    width: 100%;
    margin: 8px 0 0;
  }

  /* 本文の下の線は、カードの箱の上ボーダーで引いています */
  .service-multi .service-box-list {
    display: flex;
    gap: 65px;

    margin-top: 35px;
    padding-top: 38px;

    border-top: 1px solid #5B534D;
  }

  .service-multi .service-box-list>* {
    flex: 1;
    max-width: none;
    width: auto;
    margin: 0;
  }

  /* 縦積み用の余白を打ち消します */
  .service-multi .service-box-list .service-price-box+.service-price-box {
    margin-top: 0;
  }

  .service-multi .daily {
    margin-top: 68px;
    padding-top: 0;
  }

  /* 「※週末に持ち帰り…」の注記。本文と同じ幅・同じ左端で左ぞろえ、
     黒ではなく本文と同じ色にして、本文とのあいだは少しだけあけます */
  .attendance-detail-attention {
    width: min(100% - 40px, 270px);
    max-width: none;
    margin: 18px auto 0;
    color: #5B534D;
    font-size: 14px;
    line-height: 1.6;
    text-align: left;
  }

  .recruit-photos {
    height: 650px;
  }

  .recruit-photo {
    width: 280px;
    flex-shrink: 0;
  }

  /* ジグザグ。偶数枚目を下げています */
  .recruit-photo:nth-child(even) {
    margin-top: 360px;
  }

  .recruit-photo img {
    height: 280px;
    border-radius: 50px;
  }



  .contact-inner {
    max-width: 830px;
    width: 100%;
  }


  .contact-column-box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 45px;
    column-gap: 70px;
  }

  .to-mail,
  .to-line,
  .to-tel,
  .banner {
    margin-bottom: 0;
  }

  /* ---- ここからカンプ（1300px）に合わせた調整 ---- */

  /* 見出しまわりの余白 */
  .contact {
    padding-top: 144px;
  }

  .contact-ttl-img {
    max-width: 54px;
    margin-bottom: 27px;
  }

  .contact .en-ttl {
    margin-bottom: 27px;
  }

  .contact h2::after {
    width: 650px;
    margin: 49px auto 59px;
  }

  .contact-intro {
    margin-bottom: 64px;
    text-align: center;
  }

  /* 各ブロック。ボタンを下端にそろえるため縦フレックスにしています */
  .to-mail,
  .to-line,
  .to-tel {
    display: flex;
    flex-direction: column;
  }

  /* 電話ブロックは、右のバナーと下端がそろう位置に置きます */
  .to-tel {
    align-self: end;
  }

  .contact h3 {
    font-size: var(--middle-heading);
    margin-bottom: 24px;
  }

  .contact-flex-box,
  .to-tel .contact-flex-box {
    gap: 36px;
    margin-bottom: 22px;
  }

  /* アイコンはカンプ実測。1つずつ大きさが違います */
  .to-mail .to-icon {
    max-width: 70px;
  }

  .to-line .to-icon {
    max-width: 82px;
  }

  .to-tel .to-icon {
    max-width: 60px;
  }

  /* ボタン。高さ68pxでそろえ、右端に矢印を出します */
  .to-contact-btn {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 68px;
    margin-top: auto;
    padding: 0 60px 0 36px;
  }

  .to-contact-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 42px;
    width: 10px;
    height: 10px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
  }

}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
   PC（1024px～）：入園・ご利用案内
   ・「もっと見る」はオフ。3つの表を常に表示します
   ・1つ目の表は中央、2つ目（料金）と3つ目（オプション）は左右に並べます
   ・表はHTML上では別々の入れ物に入っているので、.guide をグリッドにして
     入れ物だけ display: contents で透過させ、表を直接並べています
   ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
@media (min-width: 1024px) {

  .guide {
    position: relative;
    /* 魚が画面の外に出たぶんだけ切ります */
    overflow-x: clip;
    padding-top: 68px;
    /* 下の「登園について」との間隔（同じ背景色なのでこちらの下に持たせています） */
    padding-bottom: 116px;
    display: grid;
    grid-template-columns: minmax(0, 433px) 76px minmax(0, 433px);
    justify-content: center;
    row-gap: 0;
  }

  .guide h3 {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
    width: 330px;
    max-width: none;
    margin: 0 0 36px;
  }

  .guide-text {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-bottom: 86px;
  }

  /* PCでは1行に収めます */
  .guide-text br {
    display: none;
  }

  /* 1つ目の表（時間）。中央に435px */
  .time-guide-table {
    grid-column: 1 / -1;
    grid-row: 3;
    width: min(435px, 100%);
    max-width: none;
    margin: 0 auto 66px;
  }

  /* 2つ目の表（料金）＝左 */
  .price-guide-table {
    grid-column: 1;
    grid-row: 4;
    width: 100%;
    max-width: none;
    margin: 0;
  }

  /* 入れ物を透過させて、3つ目の表と注釈をグリッドに直接置きます */
  .table-accordion,
  .more-table-area,
  .table-inner {
    display: contents;
  }

  /* 「もっと見る」ボタンは非表示 */
  .more-btn {
    display: none;
  }

  /* 3つ目の表（オプション）＝右 */
  .table-inner table {
    grid-column: 3;
    grid-row: 4;
    width: 100%;
    max-width: none;
    margin: 0;
    align-self: start;
  }

  /* 注釈は左の表の下・右寄せ */
  .table-attentinon {
    grid-column: 1;
    grid-row: 5;
    position: static;
    width: 100%;
    max-width: none;
    margin: 13px 0 140px;
  }

  /* --- セルの高さ --- */
  .time-guide-table th,
  .time-guide-table td,
  .price-guide-table th,
  .price-guide-table td,
  .table-inner th,
  .table-inner td {
    height: 74px;
  }

  .price-guide-table tbody tr:nth-child(n+2):nth-child(-n+3) th,
  .price-guide-table tbody tr:nth-child(n+2):nth-child(-n+3) td {
    height: 150px;
  }

  .time-guide-table th,
  .price-guide-table th,
  .table-inner th {
    width: 34%;
  }

  .time-guide-table td,
  .price-guide-table td,
  .table-inner td {
    width: 66%;
  }

  /* --- 魚。.guide を基準に、たて位置はセクション上端からの距離で置いています --- */
  .fish01 {
    max-width: 262px;
    top: 458px;
    left: calc(50% + 249px);
    right: auto;
  }

  .fish02 {
    max-width: 167px;
    top: 547px;
    left: calc(50% + 386px);
    right: auto;
  }

  /* 黄色い魚は「もっと見る」ボタンのためのあしらいなので、PCでは隠します */
  .fish03 {
    display: none;
  }

  .fish07 {
    display: block;
    position: absolute;
    bottom: 12px;
    left: 46px;
    width: 171px;
    height: auto;
    pointer-events: none;
  }
}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
   PC（1024px～）：入園・ご利用案内（企業主導型・保育料カード版）
   ・さんのみやキッズ用のグリッドは使わず、中身を940pxの中央ぞろえで積みます
   ・保育料カードと、下の2つの表はそれぞれ2カラム

   1300pxのカンプ実測
     中身       幅940px・中央ぞろえ
     時間の表   436px・中央
     料金カード 2列（461px）・よこ18px／たて24px
     下の2表    2列（460px）・あいだ20px
   ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
@media (min-width: 1024px) {

  .guide-price {
    display: block;
  }

  .guide-price h3 {
    width: 330px;
    max-width: none;
    margin: 0 auto 36px;
  }

  .guide-price .guide-text {
    margin-bottom: 86px;
  }

  .guide-price .time-guide-table {
    width: min(436px, 100%);
    max-width: none;
    margin: 0 auto 60px;
  }

  .guide-price .guide-label {
    width: 100%;
    max-width: 940px;
  }

  .guide-price .fee-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 18px;

    max-width: 940px;
    margin: 0 auto 45px;
  }

  .guide-price .fee-table {
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .guide-price .fee-table td.fee-detail {
    height: 106px;
  }

  .guide-price .guide-notes {
    width: 100%;
    max-width: 940px;
    margin: 0 auto 60px;
  }

  /* 箇条書きはPCでは1行ずつ収まるので間隔を詰めます */
  .guide-price .guide-notes li+li {
    margin-top: 8px;
  }

  /* 「もっと見る」は使わず、表は開いたまま2カラムで出します */
  .guide-price .table-accordion {
    display: block;
    /* 魚は .guide を基準に置きたいので relative を外します */
    position: static;
    max-width: 940px;
    margin: 0 auto;
  }

  .guide-price .more-btn {
    display: none;
  }

  .guide-price .more-table-area {
    display: block;
    max-height: none;
    overflow: visible;
    opacity: 1;
  }

  .guide-price .table-inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .guide-price .table-inner table+table {
    margin-top: 0;
  }

  .guide-price .table-inner table {
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    max-width: none;
    margin: 0;
    align-self: start;
  }

  /* 注釈は右の表の下・右寄せ */
  .guide-price .table-attentinon {
    grid-column: 2;
    grid-row: auto;
    position: static;
    width: 100%;
    max-width: none;
    margin: 13px 0 140px;
  }

}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
   PC（1024px～）：登園について
   ・カードは「毎日の持ちもの」「園に置いておくもの」を左右に、
     「発熱・感染時の対応」を下に全幅で並べます（.attendance をグリッド化）
   ・アコーディオンは常に開いた状態（＋アイコンなし。openはJSで付けています）
   ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
@media (min-width: 1024px) {

  .attendance {
    display: grid;
    /* カード321 ＋ 間215 ＋ カード321 ＝ 857 */
    grid-template-columns: minmax(0, 321px) 200px minmax(0, 321px);
    justify-content: center;
    padding-bottom: 81px;
    /* 右の魚が画面外に出たぶんを切ります */
    overflow-x: clip;
  }

  .attendance h3 {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
    width: 331px;
    max-width: none;
    margin: 0 0 124px;
  }

  .attendance-card {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-top: 80px;
    padding-bottom: 44px;
  }

  /* 見出し下の線と本文のあいだを詰めて、見出し・本文をひとまとまりに見せます */
  .attendance h4::after {
    margin: 24px auto 30px;
  }

  /* 本文：左ぞろえ。上の2枚は同じ幅の箱にして、文字の左端の位置をそろえます
     （カードの左右20pxずつ内側。広い画面では幅270pxで止めて中央に置きます） */
  .attendance-detail {
    width: min(100% - 40px, 270px);
    max-width: none;
    margin: 0 auto;
    line-height: 1.85;
    letter-spacing: .03em;
  }

  .attendance-card:nth-of-type(1) {
    grid-column: 1;
    grid-row: 2;
  }

  .attendance-card:nth-of-type(2) {
    grid-column: 3;
    grid-row: 2;
  }

  .attendance-card:nth-of-type(3) {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 130px;
    padding-bottom: 56px;
  }

  .attendance-card-icon {
    width: 84px;
    height: 84px;
  }

  /* 発熱カードの本文も左ぞろえ。横長のカードなので箱の上限を760pxにしています。
     3つの文の区切りが分かるよう、行間を少し広めにしています */
  .attendance-card:nth-of-type(3) .attendance-detail {
    width: min(100% - 40px, 760px);
    line-height: 2;
  }

  /* ヒトデは「園に置いておくもの」カードの右下外側へ */
  .fish04 {
    left: auto;
    right: -109px;
    bottom: -129px;
    width: 68px;
  }

  /* --- アコーディオン（常に開いた状態） --- */
  .attendance-accordion {
    grid-column: 1 / -1;
    grid-row: 4;
    width: 100%;
    max-width: none;
    margin: 112px 0 0;
  }

  .accordion-icon {
    display: none;
  }

  .accordion-title {
    cursor: default;
    pointer-events: none;
  }

  .accordion-content p {
    margin-bottom: 10px;
  }

  /* --- あしらい --- */
  .at-fish {
    display: block;
    position: absolute;
    height: auto;
    pointer-events: none;
  }

  /* 左上の魚2匹（上の間隔を .guide の下に移したので、
     「登園について」の上端より上＝境目あたりに出ます。そのためマイナス値です） */
  .at-fish-a {
    top: -86px;
    left: 46px;
    width: 164px;
  }

  .at-fish-b {
    top: -10px;
    left: 164px;
    width: 172px;
  }

  /* 右側の魚2匹（検診についてのあたり） */
  .at-fish-c {
    top: 1513px;
    left: calc(50% + 483px);
    width: 222px;
  }

  .at-fish-d {
    top: 1599px;
    left: calc(50% + 580px);
    width: 140px;
  }

  /* マンボウ（大）は左下へ */
  /* 一時預かりのカンプに合わせた位置（セクション上端から38px下・左から114px） */
  .fish05 {
    right: auto;
    left: 60px;
    bottom: -195px;
    width: 116px;
    transform: scale(-1, 1);
  }
}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
   PC（1024px～）：一時預かりについて
   ・ボタンを青い帯の中に入れ、その下に流れる文字を1本置きます
     （SP用の .recruit の中の1本目は非表示。2本目はそのまま）
   ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
@media (min-width: 1024px) {

  /* 左右のパディングを外して、流れる文字を画面いっぱいに出します。
     中身は .temporary-care-inner の margin-inline: auto で中央に来ます */
  .temporary-care {
    padding: 135px 0 13px;
  }

  /* 青いアーチ：カンプに合わせて、左右の端が170pxほど下がる深いカーブにします。
     （幅120%＋たて半径385pxの楕円。SPは元のゆるいカーブのままです） */
  .temporary-care::before {
    width: 120%;
    border-radius: 50% 50% 0 0 / 385px 385px 0 0;
  }

  .temporary-care-inner {
    max-width: 700px;
  }

  .temporary-care h3 {
    width: 333px;
    padding: 10px 0;
    margin-bottom: 50px;
  }

  .temporary-care-text {
    line-height: 1.78;
    margin-bottom: 51px;
    color: #fdfdfd;
  }

  .temporary-care h4::after {
    width: 649px;
    margin: 38px auto 59px;
  }

  .temporary-care-date {
    margin-bottom: 53px;
  }

  /* 「月～土」と「日・祝」を1行に並べたときの間隔（SPは改行で分かれます）。
     間に <br> が入るので + ではなく ~ で指定しています */
  .temporary-care-date span~span {
    margin-left: 88px;
  }

  .temporary-care-attention {
    width: 100%;
    max-width: none;
    margin-bottom: 197px;
    color: #fdfdfd;
  }

  /* ボタンは青い帯の中へ（.recruit の上端から202px上） */
  .temporary-care-btn {
    max-width: 376px;
    padding: 24px 0;
    top: -202px;
  }

  /* ボタン右端の「>」 */
  .temporary-care-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 28px;
    width: 10px;
    height: 10px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
  }

  /* PCのカンプでこの位置に見えているマンボウは、登園についての .fish05 が
     はみ出してきたものです。SP用の .fish06 と重なるので、こちらは隠します */
  .fish06 {
    display: none;
  }

  /* 黄色い魚 */
  .fish08 {
    display: block;
    position: absolute;
    z-index: 1;
    top: 577px;
    left: calc(50% + 291px);
    width: 164px;
    height: auto;
    pointer-events: none;
  }

  /* 流れる文字：SP用の1本目を隠して、青い帯の中のものを出します */
  .recruit-inner .recruit-marquee-dark {
    display: none;
  }

  .tc-marquee {
    display: block;
  }

  /* この1本だけ左から右へ流します（同じアニメを逆再生） */
  .tc-marquee .recruit-marquee-track {
    animation-direction: reverse;
  }

  .tc-marquee .recruit-marquee-track span {
    font-size: 56px;
    padding-right: 157px;
    color: #E0E0CE;
  }
}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
   PC（1024px～）：リクルート／インタビュー
   ・流れる文字の2本目は .interview の中に移動（SP用は非表示）
   ・インタビューは .interview-inner 自体をカードにして、
     見出し・名前・本文・リンクをグリッドで並べ直しています
   ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
@media (min-width: 1024px) {

  /* ------- 右側のサイドナビ ------- */

  .pc-nav-wrap {
    display: block;
    position: sticky;
    top: 0;
    z-index: 50;
    /* 高さを0にして、本文の流れに場所を取らないようにします */
    height: 0;
  }

  .pc-nav {
    position: absolute;
    top: 0;
    right: 0;
  }

  .pc-nav-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .pc-nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 88px;
    height: 84px;
    padding: 11px 0;
    /* 左の角だけ丸く。右は画面の端にぴったり付けます */
    border-radius: 13px 0 0 13px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, .15);
    color: #fdfdfd;
    font-size: var(--main-text);
    font-weight: bold;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    transition: opacity .2s;
  }

  .pc-nav-btn:hover {
    opacity: .85;
  }

  /* 1つめだけ背が高く、サルが乗るぶん上に余白があります */
  .pc-nav-list li:first-child .pc-nav-btn {
    height: 117px;
    padding: 23px 0 14px;
  }

  .pc-nav-chev {
    display: block;
    width: 14px;
    height: 8px;
    fill: none;
    stroke: #fdfdfd;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* 色。文字と「∨」には、カンプと同じドロップシャドウ
     （X0 / Y2 / ぼかし2 / 各色50%）を付けています */
  .pc-nav-btn-guide {
    background-color: #EDA98D;
  }

  .pc-nav-btn-guide .pc-nav-label {
    text-shadow: 0 2px 2px rgba(227, 113, 66, .5);
  }

  .pc-nav-btn-guide .pc-nav-chev {
    filter: drop-shadow(0 2px 2px rgba(227, 113, 66, .5));
  }

  .pc-nav-btn-care {
    background-color: #8DB5ED;
  }

  .pc-nav-btn-care .pc-nav-label {
    text-shadow: 0 2px 2px rgba(58, 129, 228, .5);
  }

  .pc-nav-btn-care .pc-nav-chev {
    filter: drop-shadow(0 2px 2px rgba(58, 129, 228, .5));
  }

  .pc-nav-btn-recruit {
    background-color: #F2D994;
  }

  .pc-nav-btn-recruit .pc-nav-label {
    text-shadow: 0 2px 2px rgba(239, 198, 85, .5);
  }

  .pc-nav-btn-recruit .pc-nav-chev {
    filter: drop-shadow(0 2px 2px rgba(239, 198, 85, .5));
  }

  .pc-nav-btn-contact {
    background-color: #94C49E;
  }

  .pc-nav-btn-contact .pc-nav-label {
    text-shadow: 0 2px 2px rgba(48, 176, 74, .5);
  }

  .pc-nav-btn-contact .pc-nav-chev {
    filter: drop-shadow(0 2px 2px rgba(48, 176, 74, .5));
  }

  /* サル。1つめのタブにぶら下がる形で、右半分はタブの後ろに隠れます */
  .pc-nav-monkey {
    position: absolute;
    z-index: -1;
    top: 12px;
    right: 47px;
    width: 124px;
    height: auto;
    pointer-events: none;
  }

  /* 固定ナビはSP・タブレットだけ。PCは元のTOPボタンに戻します */
  .sp-nav {
    display: none;
  }

  /* --- TOPボタン（PC専用）--- */
  .to-top-btn {
    display: block;
    max-width: 365px;
    margin: 0 auto;
    background-color: #FA7DAB;
    color: #fff;
    text-align: center;
    font-weight: bold;
    font-size: var(--middle-heading);
    position: relative;
    padding: 20px 0;
    border-radius: 50px;
  }

  .to-top-monkey {
    position: absolute;
    max-width: 110px;
    top: 15px;
    left: 0;
  }

  /* サル（.to-top-monkey）は absolute でボタンの下にはみ出しているので、
     はみ出すぶん（top 15px＋サルの高さ150px−ボタンの高さ約65px＝100px）を
     ボタンの下に確保します。サルの大きさや top を変えたらここも直してください */
  .to-top-btn:has(.to-top-monkey) {
    margin-bottom: 100px;
  }

  /* TOPボタンをお問い合わせ（.contact-inner）の中に入れたとき、
     上の箱との間隔は上の箱の下側でとります */
  .contact-column-box:has(+ .to-top-btn) {
    margin-bottom: 60px;
  }

  .to-top {
    padding-bottom: 60px;
  }

  /* ------- リクルート ------- */

  .recruit-inner {
    /* 上下の余白。中身はリード文と流れる写真だけになります */
    padding: 93px 0 38px;
  }

  /* 流れる文字の2本目はインタビュー側に出すので、ここでは隠します */
  .recruit-inner .recruit-marquee-light {
    display: none;
  }

  .recruit-lead {
    margin: 0;
    font-size: var(--main-heading);
    line-height: 1.94;
  }

  /* 写真どうしを少し重ねます（gapのかわりに負のマージン） */
  .recruit-photos {
    margin-top: 75px;
  }

  .recruit-photos-track {
    gap: 0;
  }

  .recruit-photo {
    margin-right: -58px;
  }

  /* 背景の丸 */
  .recruit-inner::before {
    width: 308px;
    height: 308px;
    top: 525px;
    left: -61px;
  }

  .recruit-inner::after {
    width: 298px;
    height: 298px;
    top: 83px;
    bottom: auto;
    right: 27px;
  }

  /* 気球はリード文の左へ。太陽はカンプに出てこないので非表示 */
  /* 気球はリード文との位置関係を保ちたいので、中央から左に484pxで置いています
     （1300pxのカンプで左から166pxの位置） */
  .recruit-accent-balloon {
    width: 89px;
    top: 71px;
    bottom: auto;
    left: calc(50% - 484px);
  }

  .recruit-accent-sun {
    display: none;
  }

  /* ------- インタビュー ------- */

  .interview {
    padding-top: 52px;
  }

  /* 流れる文字（2本目）。リクルートの中のものと入れ替えで出します */
  .iv-marquee {
    display: block;
  }

  .iv-marquee .recruit-marquee-track span {
    font-size: 56px;
    padding-right: 157px;
    color: #FCFAF2;
  }

  /* 背景の丸。クリーム色なのでリクルート側にはみ出した上の弧だけが見えます */
  .interview::before {
    top: -39px;
    left: calc(50% - 320px);
    width: 711px;
    height: 711px;
    border-color: #F5EBC7;
  }

  /* --- カード ---
     .interview-inner を白いカードにして、中の入れ子（.interview-card /
     .interview-profile / .interview-body）は display: contents で透過させ、
     見出し・名前・本文・リンクを1つのグリッドに並べています。
     列は［写真ぶんの余白 217px］［本文 1fr］［Interviewリンク 108px］ */
  .interview-inner {
    display: grid;
    grid-template-columns: 217px minmax(0, 1fr) 108px;
    width: min(960px, 100% - 200px);
    margin: 78px auto 0;
    padding: 22px 67px 30px 0;
    border-radius: 30px;
    background-color: #fdfdfd;
    box-shadow: 0 4px 4px rgba(0, 0, 0, .15);
  }

  .interview-card,
  .interview-profile,
  .interview-body {
    display: contents;
  }

  /* 写真はカードの左にはみ出させます。PC用画像は丸く切り抜き済みで
     頭が円の上に出ているので、border-radius は外します */
  .interview-photo {
    position: absolute;
    top: 6px;
    left: -60px;
    width: 202px;
    height: auto;
    border-radius: 0;
  }

  .interview-lead {
    grid-column: 2;
    grid-row: 1;
    margin: 0 0 31px;
    padding-bottom: 44px;
    border-bottom: 1px solid #5B534D;
    font-size: var(--sub-heading);
    line-height: 1.68;
    text-align: left;
  }

  /* 「経験を活かし、」で改行 */
  .interview-lead span {
    display: block;
  }

  .interview-name {
    grid-column: 2;
    grid-row: 2;
    margin: 0 0 16px;
    /* .interview-profile の text-align: center が効いてしまうので戻します */
    text-align: left;
  }

  .interview-text {
    grid-column: 2;
    grid-row: 3;
    margin: 0;
  }

  .interview-link {
    grid-column: 3;
    grid-row: 3;
    justify-self: end;
    margin: 0;
  }

  /* --- リクルートサイトへのボタン --- */
  .interview-btn {
    max-width: 540px;
    height: 66px;
    /* 下のセクションへのはみ出しは27px */
    margin: 103px auto -27px;
    padding-right: 73px;
    font-size: var(--middle-heading);
  }

  /* 白い丸＋中の水色の「>」 */
  .interview-btn::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 33px;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    border-radius: 50%;
    background-color: #fdfdfd;
  }

  .interview-btn::after {
    right: 49px;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-color: #62BFD5;
  }

}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
   PC（1024px～）：園を知る／入園・利用について（#to-nursery）
   ・カードを［アイコン＋見出し］と［ボタン＋説明文］の横2カラムに
   ・ボタンはPCでは塗りつぶしが通常状態（ホバーで白地に反転）
   ・Aboutカードの左の枝は facility-about-nav-accent.png を左右反転して使用
   ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
@media (min-width: 1024px) {

  #to-nursery {
    padding-top: 63px;
  }

  .nav-box {
    position: relative;
    display: flex;
    align-items: center;
    width: min(1006px, 100% - 40px);
    max-width: none;
    /* 2枚の高さをそろえるためカンプの高さを下限にしています */
    min-height: 332px;
    margin: 0 auto 44px;
    padding: 24px 55px 24px 0;
  }

  /* 左half：アイコン・英字・見出し */
  .nav-head {
    width: 467px;
    flex-shrink: 0;
    text-align: center;
  }

  .about-icon {
    max-width: 120px;
    margin-top: 0;
  }

  /* カニがカラムの中央にくるように左へずらします（SPと同じ考え方で、
     表示幅230pxぶんに換算：248.5 × 230/350 − 115 ＝ 約48px） */
  .guide-icon {
    max-width: 230px;
    margin-top: 0;
    transform: translateX(-48px);
  }

  .nav-box .en-ttl {
    margin: 11px 0 19px;
  }

  .nav-box .nav-ttl {
    margin-bottom: 0;
  }

  /* Aboutカードの左の枝。プログラムの枝と同じ画像を左右反転して使います */
  .about-nav::before {
    content: "";
    position: absolute;
    top: 154px;
    left: 0;
    width: 81px;
    height: 70px;
    background-image: url(/assets/img/facility-about-nav-accent.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transform: scaleX(-1);
    pointer-events: none;
  }

  /* 右half：ボタンと説明文 */
  .nav-btn-box {
    flex: 1;
    min-width: 0;
    text-align: left;
  }

  .nav-btn {
    width: 328px;
    height: 44px;
    margin-bottom: 16px;
  }

  .nav-btn-icon {
    right: 20px;
  }

  .nav-btn-box p {
    width: auto;
    max-width: none;
    margin: 0 0 35px;
    padding-left: 14px;
    line-height: 1.2;
  }

  .nav-btn-box p:last-child {
    margin-bottom: 0;
  }

  /* --- ボタンの色：PCは塗りつぶしが通常状態 --- */
  .about-nav-btn {
    background-color: #94c49e;
    color: #fdfdfd;
  }

  .about-nav-btn .nav-btn-icon::before {
    background-color: #94c49e;
  }

  .about-nav-btn .nav-btn-icon::after {
    border-color: #94c49e;
  }

  /* ホバーで白地に反転 */
  .about-nav-btn:hover,
  .about-nav-btn:focus-visible {
    background-color: #fdfdfd;
    color: #94c49e;
  }

  .about-nav-btn:hover .nav-btn-icon::before,
  .about-nav-btn:focus-visible .nav-btn-icon::before {
    background-color: #fdfdfd;
  }

  .about-nav-btn:hover .nav-btn-icon::after,
  .about-nav-btn:focus-visible .nav-btn-icon::after {
    border-color: #fdfdfd;
  }

  .guide-nav-btn {
    background-color: #8db5ed;
    color: #fdfdfd;
  }

  .guide-nav-btn .nav-btn-icon::before {
    background-color: #8db5ed;
  }

  .guide-nav-btn .nav-btn-icon::after {
    border-color: #8db5ed;
  }

  .guide-nav-btn:hover,
  .guide-nav-btn:focus-visible {
    background-color: #fdfdfd;
    color: #8db5ed;
  }

  .guide-nav-btn:hover .nav-btn-icon::before,
  .guide-nav-btn:focus-visible .nav-btn-icon::before {
    background-color: #fdfdfd;
  }

  .guide-nav-btn:hover .nav-btn-icon::after,
  .guide-nav-btn:focus-visible .nav-btn-icon::after {
    border-color: #fdfdfd;
  }

  /* --- 園の特徴 --- */
  /* 上の「入園・利用について」の箱との間隔は、その箱の margin-bottom に持たせています */
  .guide-nav {
    margin-bottom: 151px;
  }

  .point h3 {
    max-width: 332px;
    padding: 6px 0;
  }

  /* フクロウは左端に少しはみ出します */
  .point-img {
    top: 14px;
    left: -13px;
    width: 175px;
  }

  .service-flex-box {
    display: flex;
    align-items: baseline;
    justify-content: center;
    padding-bottom: 170px;
    gap: 85px;
  }

  .service-detail {
    margin-bottom: 5px;
  }

  .service-price,
  .daily-price {
    font-size: var(--middle-heading);
  }

  .daily {
    background-color: transparent;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  .wave-divider {
    background-color: #F5F7F0;
  }

  .daily h4,
  .daily-text,
  .service h4,
  .service-text,
  .daily-price-box,
  .service-price-box {
    max-width: 420px;
    width: 100%;
  }

  .service h4 {
    text-align: left;
  }

  /* --- 便利なサービス：下線と白い箱（1024px～） ---
     下線は見出しの下ではなく本文の下に引きます。
     白い箱は細い枠線つき・高さ180pxを下限にして、2つの箱の高さをそろえます。
     中の説明は残りの高さの上下中央、料金は箱の右下に置きます */
  .service h4,
  .daily h4 {
    padding-bottom: 0;
    margin-bottom: 30px;
    border-bottom: none;
  }

  .service-text,
  .daily-text {
    padding-bottom: 38px;
    margin-bottom: 38px;
    border-bottom: 1px solid #5B534D;
  }

  .service-price-box,
  .daily-price-box {
    display: flex;
    flex-direction: column;
    min-height: 180px;
    margin-bottom: 0;
    padding: 28px 28px 24px 44px;
    border: 1px solid #DDDDDD;
    border-radius: 16px;
    background-color: #fdfdfd;
  }

  /* 上下の margin: auto で、料金より上の残りの高さの中で上下中央にします
     （display: flex にすると中の <br> や <span> の並びが崩れるため、margin で） */
  .service-detail,
  .daily-detail {
    margin: auto 0;
    padding-bottom: 10px;
  }

  .service-price,
  .daily-price {
    text-align: right;
  }



}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
   大きい画面（1440px～）：動物などのあしらいを大きく

   1440px以上は画面が広いぶん余白が目立つので、あしらいのイラストを
   --deco-scale 倍（1.35倍）に拡大します。
   ・scale プロパティで拡大しているので、まわりのレイアウト（文字・カードの位置）は動きません。
     もとの transform（左右反転・回転など）ともそのまま重ねがけされます。
   ・大きさを変えたいときは --deco-scale の数値だけ直してください。
   ・見出しのアイコンやカード内のアイコンなど、レイアウトに関わる画像は対象外です。

   transform-origin（どこを基準に大きくするか）
     地面や線の上に立っているもの → 下を基準（浮いたり、線の下にはみ出したりしないように）
     画面の端にあるもの         → 端を基準（画面の外に切れないように）
   ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
@media (min-width: 1440px) {

  :root {
    --deco-scale: 1.35;
  }

  .profile-bird,
  .info-bird,
  .news-img,
  .news-tree-bottom,
  .point-img,
  .point-tree,
  .oneday-deco,
  .wave-alligator,
  .fish01,
  .fish02,
  .fish03,
  .fish04,
  .fish05,
  .fish06,
  .fish07,
  .fish08,
  .at-fish,
  .recruit-accent,
  .about-nav::before,
  .oneday::before,
  .oneday::after,
  .program-multi::before,
  .program-multi::after {
    scale: var(--deco-scale);
  }

  /* 線や地面の上に立っているもの：下を基準に */
  .news-img,
  .point-tree {
    transform-origin: center bottom;
  }

  .news-tree-bottom,
  .wave-alligator-front {
    transform-origin: left bottom;
  }

  /* 右下の鹿・右端のワニ：右下を基準に（画面の右に切れないように） */
  .wave-alligator-back,
  .oneday::after {
    transform-origin: right bottom;
  }

  /* 左上の鹿・左端の鳥：左を基準に（画面の左に切れないように） */
  .oneday::before {
    transform-origin: left top;
  }

  .info-bird {
    transform-origin: left center;
  }

  /* 入園・ご利用案内の右側の魚2匹：中央基準だと左に広がって保育時間の表にかかるので、
     左端を基準に右へ大きくし、さらに30px右へずらしています */
  .fish01,
  .fish02 {
    transform-origin: left center;
    translate: 30px 0;
  }

  /* 登園についての右側の魚2匹：1440px以上は下の説明（アコーディオン）が幅1000pxに広がって
     魚にかぶるので、説明の右端（中央＋500px）より外へ出します。
     左端基準で右へ大きくし、画面からはみ出した分は .attendance の overflow-x: clip で切れます
     （画面の端から泳いで入ってくるように見えます） */
  .at-fish-c,
  .at-fish-d {
    transform-origin: left center;
  }

  .at-fish-c {
    left: calc(50% + 520px);
  }

  .at-fish-d {
    left: calc(50% + 617px);
  }

  /* PROFILEの鳥は左右反転（transform: scaleX(-1)）しているので、
     基準を左にすると反転の向きまで変わってしまいます。
     中央基準のまま、大きくなったぶんの半分だけ右へずらしています（120px＝PCでの幅） */
  .profile-bird {
    translate: calc(120px * (var(--deco-scale) - 1) / 2) 0;
  }

  /* 「園を知る」の枝も左右反転しているので同じ方法で。
     大きくなったぶんの半分だけ右へずらし、左端を白いボックスの左端（left: 0）にそろえます
     （81px＝PCでの幅） */
  .about-nav::before {
    translate: calc(81px * (var(--deco-scale) - 1) / 2) 0;
  }

  /* 右下の鹿が大きくなって上の丸写真に近づくので、そのぶん帯の下を伸ばします
     （134px＝鹿の箱の高さ。154px＝もとの下の余白） */
  .oneday {
    padding-bottom: calc(154px + 134px * (var(--deco-scale) - 1));
  }

  .info-block-inner {
    max-width: 1000px;
    width: 100%;
  }

  #news .introduce,
  .news-inner {
    max-width: 750px;
  }

  .page-news-list {
    max-width: 750px;
  }

  .nav-box {
    max-width: 1000px;
    width: 100%;
  }

  .manager-inner {
    width: 100%;
    max-width: 1000px;
  }

  .program-multi .program-list {
    max-width: 1000px;
    /* margin: 0 auto 76px; */
  }

  .program-multi .program-price-box {
    max-width: 900px;
  }

  .daily h4,
  .daily-text,
  .service h4,
  .service-text,
  .daily-price-box,
  .service-price-box {
    max-width: 500px;
    width: 100%;
  }

  .attendance {
    grid-template-columns: minmax(0, 390px) 220px minmax(0, 390px);
  }

  /* 一時預かり：ほかのセクションと同じくコンテンツ幅1000px */
  .temporary-care-inner {
    max-width: 1000px;
  }

  /* ※の注記は1000pxの左端まで広げると、見出し・本文（中央ぞろえ）から離れて読みにくいので、
     文章の幅ぴったりの箱を中央に置き、行の頭は左でそろえます */
  .temporary-care-attention {
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }


}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
   角丸の見出し（ピル型）の大きさを全セクションで統一

   対象：私たちのいいところ（.pride-ttl）／園の特徴／園でのいちにち（.oneday-ttl）／年間行事／
         楽しいプログラム／便利なサービス／入園・ご利用案内／登園について／一時預かりについて
   色・下の余白（margin-bottom）は各セクションのまま。大きさ・文字サイズだけをここで決めています。
     SP  ：幅220px（文字が長いときは自動で広がる）・高さ40px・文字 --middle-heading
     PC  ：幅332px・高さ46px
   大きさを変えたいときは、この下の min-width / padding の数値だけ直してください
   ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
.pride-ttl,
.point h3,
.oneday-ttl,
.event h3,
.program h3,
.service h3,
.guide h3,
.attendance h3,
.temporary-care h3 {
  box-sizing: border-box;
  width: fit-content;
  min-width: 220px;
  max-width: calc(100% - 40px);
  margin-left: auto;
  margin-right: auto;
  padding: 5px 24px;
  border-radius: 50px;
  font-size: var(--middle-heading);
  line-height: 1.43;
  text-align: center;
}

.contact-inner {
  max-width: 1000px;
}

@media (min-width: 1024px) {

  .pride-ttl,
  .point h3,
  .oneday-ttl,
  .event h3,
  .program h3,
  .service h3,
  .guide h3,
  .attendance h3,
  .temporary-care h3 {
    width: fit-content;
    min-width: 332px;
    max-width: calc(100% - 40px);
    padding: 5px 24px;
  }
}