/* =========================================================
   page-about.css : 当園について
   page-pill / Message / Philosophy / Policy / OverView
   施設子サイト（りじょう認定こども園）
   ========================================================= */

/* ===== ページタイトル pill ===== */
.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);
}

/* セクション共通の内側幅（やや広め） */
.about-inner {
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* 背景装飾はPC共通背景(body.bg-en / pc-bg.webp)に一本化。ページ個別の楕円装飾は持たない。 */
.message, .philo, .policy, .overview { position: relative; }
.message > .about-inner,
.philo > .philo__stage,
.policy > .about-inner,
.overview > .about-inner { position: relative; z-index: 1; }
/* SP写真は既定で非表示（PCはblob写真） */
.philo__photo-sp { display: none; }
.policy__x--4 { display: none; }

/* 見出し（英ラベル＋和）の上のサブ見出し・本文の共通体裁 */
.a-sub {
  margin-top: 18px;
  font-family: var(--font-base);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.5;
  color: var(--color-text);
}
.a-body {
  margin-top: 18px;
  font-size: 16px;
  line-height: 1.95;
  color: var(--color-text-sub);
}

/* ===== Message（園長あいさつ） ===== */
.msg__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(320px, 34%, 476px);
  grid-template-areas:
    "head  photo"
    "sub   photo"
    "body  photo";
  column-gap: clamp(30px, 4vw, 80px);
  align-items: start;
}
.msg__head   { grid-area: head; }
.msg__g-sub  { grid-area: sub; }
.msg__g-body { grid-area: body; }
.msg__photo  { grid-area: photo; align-self: start; }
.msg__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 476 / 320;
  object-fit: cover;
  border-radius: 10px;
}
.msg__cap {
  margin-top: 16px;
  text-align: center;
  font-size: 16px;
  line-height: 1.9;
  color: var(--color-text-sub);
}
.msg__cap-name { margin-left: 8px; }

/* ===== Philosophy（理念）＝散らし配置 ===== */
.philo { position: relative; }
.philo__stage {
  position: relative;
  width: 100%;
  max-width: 1500px;
  margin-inline: auto;
  aspect-ratio: 1720 / 860;
}
.philo__head { position: absolute; left: 70.2%; top: 0; }
.philo__lead {
  position: absolute;
  left: 70.2%;
  top: 12.8%;
  font-size: 16px;
  line-height: 1.9;
  color: var(--color-text-sub);
}
.philo__photo { position: absolute; height: auto; }
.philo__photo--piano  { left: 18.4%; top: 5%;    width: 25%; }
.philo__photo--food   { left: 0;     top: 39.9%; width: 24.2%; }
.philo__photo--toilet { left: 70.9%; top: 48.3%; width: 29.1%; }
.philo__txt {
  position: absolute;
  font-size: 16px;
  line-height: 1.85;
  color: var(--color-text-sub);
}
.philo__txt--1 { left: 46%; top: 20%; }
.philo__txt--2 { left: 50%; top: 54%; }
.philo__txt--3 { left: 28.6%; top: 75%; }

/* ===== Policy（教育方針） ===== */
.policy__head { text-align: center; }
.policy__sub {
  margin-top: 20px;
  text-align: center;
  font-family: var(--font-base);
  font-weight: 500;
  font-size: 28px;
  color: var(--color-text);
}
.policy__lead {
  margin-top: 10px;
  text-align: center;
  font-size: 16px;
  color: var(--color-text-sub);
}
.policy__chart {
  position: relative;
  width: 100%;
  max-width: 1296px;
  margin: 40px auto 0;
  aspect-ratio: 1296 / 360;
}
.policy__box {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 23.1%;
  aspect-ratio: 300 / 200;
  border-radius: 10px;
  background: var(--color-accent-mid);
  color: var(--color-white);
  font-family: var(--font-gothic);
  font-weight: 900;
  font-size: clamp(20px, 2.2vw, 32px);
  z-index: 2;
}
.policy__box--1 { left: 0;     top: 8%; }
.policy__box--2 { left: 25.8%; top: 39%; }
.policy__box--3 { left: 51.5%; top: 0; }
.policy__box--4 { left: 77.8%; top: 25%; }
.policy__x {
  position: absolute;
  width: 7.7%;
  aspect-ratio: 1;
  z-index: 1;
}
.policy__x::before,
.policy__x::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -20%;
  width: 140%;
  height: 1px;
  background: #9aa6a0;
}
.policy__x::before { transform: rotate(45deg); }
.policy__x::after  { transform: rotate(-45deg); }
.policy__x--1 { left: 18%;   top: 58%; }
.policy__x--2 { left: 44%;   top: 11%; }
.policy__x--3 { left: 69.6%; top: 44%; }
.policy__list {
  max-width: 640px;
  margin: 28px auto 0;
  font-size: 16px;
  line-height: 1.9;
  color: var(--color-text-sub);
}

/* ===== OverView（概要） ===== */
.overview__inner { max-width: 1240px; }
.overview__name {
  margin-top: 16px;
  font-family: var(--font-base);
  font-weight: 500;
  font-size: 18px;
  color: var(--color-text);
}
.overview__dl {
  margin-top: 24px;
  max-width: 720px;
}
.overview__row {
  display: flex;
  gap: 24px;
  padding: 8px 0;
  font-size: 16px;
  line-height: 1.6;
}
.overview__row dt {
  flex: 0 0 144px;
  color: var(--color-accent);
}
.overview__row dd { color: var(--color-text); }

/* =========================================================
   レスポンシブ（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; }
  .a-sub { font-size: 22px; }

  /* Message：見出し→写真(正方形)→サブ→本文 の縦積み */
  .msg__inner {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "photo" "sub" "body";
  }
  .msg__photo { max-width: 171px; margin: 16px auto 4px; }
  .msg__photo img { aspect-ratio: 1 / 1; border-radius: 50%; }
  .msg__cap { text-align: center; }
  .msg__g-sub { text-align: center; }

  /* Philosophy：見出し→リード→(写真+テキスト)×3 をジグザグ縦積み（SP専用画像） */
  .philo__stage { position: static; max-width: none; aspect-ratio: auto; display: flex; flex-direction: column; }
  .philo__head, .philo__lead { position: static; }
  .philo__head { order: 0; }
  .philo__lead { order: 1; margin-top: 12px; font-size: 15px; }
  .philo__photo { display: none; }            /* PC blobは非表示 */
  .philo__photo-sp { display: block; width: 100%; height: auto; }
  .philo__txt { position: static; font-size: 15px; line-height: 1.85; margin-top: 12px; text-align: left; }
  /* インターロック型ジグザグ：各itemは幅約半分・左右交互、次itemの写真が前itemのテキストと同高 */
  .philo__item { display: flex; flex-direction: column; }
  .philo__item--piano  { order: 2; width: 41%; margin-left: auto; }   /* 右 153/375 */
  .philo__item--food   { order: 3; width: 45%; margin-right: auto; margin-top: -40%; } /* 左 148/375 */
  .philo__item--toilet { order: 4; width: 47%; margin-left: auto; margin-top: -84px; }  /* 右 178/375 */

  /* Policy：2×2グリッド＋×4箇所 */
  .policy__head { text-align: left; max-width: max-content; margin-inline: auto; }
  .policy__sub { font-size: 22px; }
  .policy__chart {
    position: relative;
    aspect-ratio: auto;
    max-width: 340px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 30px;
  }
  .policy__box {
    position: static;
    width: 100%;
    aspect-ratio: 123 / 82;
    font-size: 18px;
  }
  /* 並び順：運動・教育｜情操教育 / しつけ教育｜知能教育 */
  .policy__box--1 { order: 1; }
  .policy__box--3 { order: 2; }
  .policy__box--2 { order: 3; }
  .policy__box--4 { order: 4; }
  /* ×マーク4箇所（グリッドの隙間） */
  .policy__x {
    display: block;
    position: absolute;
    width: 41px;
    height: 41px;
    transform: translate(-50%, -50%);
    z-index: 3;
  }
  .policy__x::before, .policy__x::after { left: 0; width: 100%; background: #9aa6a0; }
  .policy__x--1 { left: 50%; top: 25%; }   /* 上ペア間 */
  .policy__x--2 { left: 23%; top: 50%; }   /* 左ペア間 */
  .policy__x--3 { left: 77%; top: 50%; }   /* 右ペア間 */
  .policy__x--4 { left: 50%; top: 75%; }   /* 下ペア間 */

  /* 番号リスト：左右ジグザグ */
  .policy__list { max-width: 340px; margin: 24px auto 40px; }
  .policy__list li { max-width: 240px; }
  .policy__list li:nth-child(2),
  .policy__list li:nth-child(4) { margin-left: auto; }

  /* OverView：幅258・中央寄せ、ラベル上・値下 */
  .overview__inner { max-width: 258px; margin-inline: auto; padding-inline: 0; }
  .overview__dl { max-width: none; }
  .overview__row { flex-direction: column; gap: 2px; padding: 10px 0; }
  .overview__row dt { flex: none; font-weight: 500; }
  .overview__row dd { padding-left: 15px; }
}