/* =========================================================
   page-life.css : 園生活
   page-pill / Events(年間行事) / DailyLife(1日の生活) / Gallery
   施設子サイト（りじょう認定こども園）
   ※ page-pill / about-deco 等は page-about.css と共通だが、
     このページ用に必要分を再定義する。
   ========================================================= */

/* ===== ページタイトル pill（about と共通仕様） ===== */
.page-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 500px;
  max-width: calc(100% - 40px);
  height: 70px;
  margin: 40px auto 0;
  background: var(--color-white);
  border: 1px solid var(--color-accent-mid);
  border-radius: 10px;
  font-family: var(--font-gothic);
  font-weight: 900;
  font-size: 28px;
  color: var(--color-accent);
}

.life-inner {
  width: 100%;
  max-width: 1500px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* 背景装飾はPC共通背景(body.bg-en / pc-bg.webp)に一本化。ページ個別装飾は持たない。
   ※ .daily / .gallery の position:relative・overflow:hidden は各セクションで別途定義（カルーセル等に必要）。 */

/* ===== Events（年間行事） ===== */
/* 見出しは grid の1列目「月カラム幅」分だけ右にインデント（デザインの一座ずれ） */
.events__head { margin-left: clamp(60px, 8vw, 122px); }
.events__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: clamp(20px, 3vw, 48px);
  row-gap: 44px;
  margin-top: 40px;
}
/* 各セル＝月(右揃え) ＋ イベント(左揃え) の2カラム、中央揃え */
.events__cell {
  display: grid;
  grid-template-columns: minmax(96px, auto) 1fr;
  align-items: center;
  column-gap: 16px;
}
.events__month {
  font-family: var(--font-gothic);
  font-weight: 900;
  font-size: 50px;
  line-height: 1;
  color: var(--color-accent-mid);
  text-align: right;
  white-space: nowrap;
  width: 148px;
}
.events__num { font-size: 80px; }
.events__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 16px;
  line-height: 1;
  color: var(--color-text);
}

/* ===== DailyLife（1日の生活） ===== */
.daily { position: relative; overflow: hidden; }
.daily__timeline {
  position: relative;
  width: 100%;
  max-width: 1425px;
  margin: 40px auto 0;
  aspect-ratio: 1425 / 1384;
}
.daily__line { /* 中央の縦線 x957 → 51.8% */
  position: absolute;
  left: 51.8%;
  top: 0;
  transform: translateX(-50%);
  width: 14px;
  height: 100%;
  background: #d9e4c4;
  border-radius: 7px;
}
/* node＋txt の対（グループ）。align-items:center で1ユニット。t3,t4 は txtが左(--rev) */
.daily__item {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 2;
}
/* txtが左に来る項目は row-reverse（PC: t3,t4）。DOMは常に node→txt */
.daily__item--t3, .daily__item--t4 { flex-direction: row-reverse; }
/* 時刻バッジ（葉っぱ型）＝141/1425≒9.9% */
.daily__node {
  flex: 0 0 auto;
  width: clamp(100px, 9.9vw, 141px);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent-mid);
  color: var(--color-white);
  font-family: var(--font-gothic);
  font-weight: 900;
  font-size: clamp(18px, 1.9vw, 28px);
}
.daily__node--l { border-radius: 0 0 0 50%; border-top-right-radius: 50%; } /* 左下＋右上が葉 */
.daily__node--r { border-radius: 0 0 50% 0; border-top-left-radius: 50%; }  /* 右下＋左上が葉 */
.daily__txt {
  font-family: var(--font-base);
  font-weight: 500;
  font-size: clamp(15px, 1.5vw, 22px);
  line-height: 1.45;
  color: var(--color-text);
  white-space: nowrap;
}
.daily__photo { position: absolute; width: 25%; height: auto; z-index: 1; }

/* グループ位置（base ox218.6 oy1169 W1425.39 H1384）。left=左側要素x / top=nodeのtop */
.daily__item--t1 { left: 41.9%; top: 0;     }   /* node816 / 1169 */
.daily__item--t2 { left: 51.8%; top: 6.5%;  }   /* node957 / 1259 */
.daily__item--t3 { left: 23.5%; top: 24.6%; }   /* txt554 / node1510 */
.daily__item--t4 { left: 32.7%; top: 35.8%; }   /* txt685 / node1664 */
.daily__item--t5 { left: 58.3%; top: 49.9%; }   /* node1050 / 1859 */
.daily__item--t6 { left: 45.6%; top: 69.2%; }   /* node869 / 2127 */
.daily__item--t7 { left: 28.2%; top: 78.3%; }   /* node620 / 2253 */
.daily__item--t8 { left: 41.3%; top: 89.8%; }   /* node808 / 2412 */

/* 写真（356/1425≒25%）。base同じ */
.daily__photo--p1 { left: 0;    top: 4.0%;  }  /* (218,1224) */
.daily__photo--p2 { left: 75.0%; top: 21.6%; } /* (1288,1467) */
.daily__photo--p3 { left: 6.8%;  top: 45.9%; } /* (315,1805) */
.daily__photo--p4 { left: 67.2%; top: 75.4%; } /* (1177,2213) */

/* ===== Gallery（施設ギャラリー）＝トップ life__carousel と同方式 ===== */
.gallery { position: relative; overflow: hidden; }
.gallery__viewport {
  position: relative;
  z-index: 1;
  width: fit-content;
  margin: 40px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery__card { flex: 0 0 auto; text-align: center; }
/* 白bg・影・角丸は写真ラッパにのみ（キャプションは外） */
.gallery__pic {
  display: block;
  background: var(--color-white);
  border-radius: 10px;
  padding: 4px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
}
.gallery__card img {
  display: block;
  width: 100%;
  border-radius: 8px;
  object-fit: cover;
}
.gallery__card--side   { width: 330px; }
.gallery__card--side img { aspect-ratio: 322 / 214; }
/* 中央カードを負marginで左右に重ねる（前面） */
.gallery__card--center { width: 460px; margin-inline: -28px; z-index: 2; }
.gallery__card--center .gallery__pic { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1); }
.gallery__card--center img { aspect-ratio: 450 / 300; }
.gallery__cap {
  margin-top: 12px;
  font-family: var(--font-base);
  font-weight: 500;
  font-size: 18px;
  color: var(--color-text);
}
/* nav はカード群の両端外側（写真の縦中央に合わせ、キャプション分だけ上へ） */
.gallery__nav {
  position: absolute;
  top: calc(50% - 22px);
  z-index: 3;
}
.gallery__nav--prev { left: 0;  transform: translate(-50%, -50%); }
.gallery__nav--next { right: 0; transform: translate(50%, -50%); }
.gallery__dots { display: none; }

/* =========================================================
   レスポンシブ（SP : max-width 750px）
   ========================================================= */
@media (max-width: 750px) {
  .page-pill { width: 300px; max-width: calc(100% - 40px); height: 40px; font-size: 22px; margin-top: 24px; }

  /* Events：1列。月カラム幅を統一・右揃え＋イベント左。gridはmax-content中央寄せ。見出しインデント解除 */
  .events__head { margin-left: 0; }
  .events__grid {
    grid-template-columns: 1fr;
    max-width: max-content;
    margin: 30px auto 0;
    row-gap: 30px;
  }
  .events__cell { grid-template-columns: 100px 1fr; column-gap: 14px; }
  .events__month { font-size: 50px; width: auto; }
  .events__num { font-size: 50px; }

  /* DailyLife：SP実測(frame x-18 y1369 w410 h957)を%化。バッジ90px=22%、中央線50.1% */
  .daily__timeline { aspect-ratio: 410 / 957; max-width: 410px; }
  .daily__line { left: 50.1%; width: 10px; }
  .daily__node { width: clamp(80px, 22vw, 90px); font-size: 18px; }
  .daily__txt { font-size: 15px; line-height: 1.5; }
  .daily__photo { width: 32.2%; }
  /* SPは reverse を t7 のみに（PCのt3,t4 reverse解除） */
  .daily__item--t3, .daily__item--t4 { flex-direction: row; }
  .daily__item--t7 { flex-direction: row-reverse; }
  .daily__item { gap: 12px; }

  .daily__item--t1 { left: 11.4%; top: 11.8%; }  .daily__photo--p1 { left: 67.8%; top: 4.3%;  }
  .daily__item--t2 { left: 43.4%; top: 16.5%; }
  .daily__item--t3 { left: 32.5%; top: 34.8%; }  .daily__photo--p3 { left: 67.8%; top: 47.8%; }
  .daily__item--t4 { left: 11.4%; top: 42.7%; }
  .daily__item--t5 { left: 20.9%; top: 56.6%; }  .daily__photo--p2 { left: 0;     top: 23.8%; }
  .daily__item--t6 { left: 54.5%; top: 67.4%; }
  .daily__item--t7 { left: 7.1%;  top: 77.1%; }  .daily__photo--p4 { left: 0;     top: 88.3%; }
  .daily__item--t8 { left: 46.6%; top: 89.1%; }

  /* Gallery：1枚＋ドット */
  .gallery__viewport { gap: 0; }
  .gallery__card--side { display: none; }
  .gallery__card--center { width: 100%; max-width: 340px; margin-inline: auto; }
  .gallery__nav { display: none; }
  .gallery__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
  }
  .gallery__dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-accent-bg);
    cursor: pointer;
  }
  .gallery__dots span.is-active { background: var(--color-accent); }
}