/* =========================================================
   page-admission.css : 入園案内
   page-pill / Course(保育コース) / Fees(保育料金) / Classes(クラス情報)
   施設子サイト（りじょう認定こども園）
   ========================================================= */

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

/* 背景装飾はPC共通背景(body.bg-en / pc-bg.webp)に一本化。ページ個別装飾は持たない。 */

/* セクション見出しは中央寄せ（コンテンツ幅基準） */
.adm-head { text-align: center; }

/* ===== Course（保育コースのご案内） ===== */
.course__inner {
  width: 100%;
  max-width: 458px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.course__dl { margin-top: 24px; }
.course__row {
  display: grid;
  grid-template-columns: 128px 1fr;
  column-gap: 8px;
  padding: 4px 0;
  font-size: 16px;
  line-height: 2;
}
.course__row dt { color: var(--color-accent); }
.course__row dd { color: var(--color-text); }
.adm-note {
  margin-top: 28px;
  padding: 22px 32px;
  border-radius: 10px;
  background: var(--color-accent-bg);
  font-size: 16px;
  line-height: 2;
  color: var(--color-text-sub);
}

/* ===== Fees（保育料金） ===== */
.fees__inner {
  width: 100%;
  max-width: 840px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.fees__head { margin-top: 0; }
.fees__block { margin-top: 28px; }
/* 共通セル */
.fee-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  font-family: var(--font-base);
  font-size: 16px;
}
.fee-label { background: var(--color-accent-mid); color: var(--color-text); font-weight: 500; }
.fee-value { background: var(--color-white); color: var(--color-text); }
.fee-head  { background: var(--color-accent-mid); color: var(--color-text); }

/* 入園準備費・延長保育（ラベル120＋値） */
.fees__line { display: grid; grid-template-columns: 120px 180px; }
.fees__line .fee-label { border-radius: 0; }

/* 料金テーブル */
.fees__table { width: 100%; }
.fees__trow { display: grid; grid-template-columns: 120px repeat(4, 1fr); }
.fees__trow--head .fee-empty { background: transparent; }
.fees__tablabs { display: none; } /* SPタブ（PCでは非表示） */

/* ===== Classes（クラス情報） ===== */
.classes__inner {
  width: 100%;
  max-width: 1211px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.classes__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(20px, 6vw, 80px);
  margin-top: 40px;
}
.class-card { text-align: center; }
.class-card__star {
  position: relative;
  margin-bottom: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.class-card__star::before { /* 星（テキストでなくCSS） */
  content: "★";
  font-family: var(--font-gothic);
  font-weight: 900;
  font-size: 120px;
  line-height: 1;
  color: var(--card-color, #f2b38b);
  margin-bottom: 10px;
}
.class-card__group { /* 組名（星と同色で星の下部に重なる：実測 中心59.2%） */
  font-family: var(--font-gothic);
  font-weight: 900;
  font-size: 22px;
  color: var(--card-color, #f2b38b);
  white-space: nowrap;
}
.class-card__divider {
  position: relative;
  border-top: 1px solid var(--card-color, #f2b38b);
  padding-top: 26px;
}
.class-card__divider::before { /* 上線中央の半円（クラス色） */
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 15px;
  background: var(--card-color, #f2b38b);
  border-radius: 0 0 15px 15px;
}
.class-card__name {
  font-family: var(--font-base);
  font-weight: 500;
  font-size: 18px;
  color: var(--color-text);
}
.class-card__foot { /* Line82＝カード全幅の上線 */
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid var(--card-color, #f2b38b);
}
.class-card__body { /* 本文は実測192px幅・中央寄せ */
  max-width: 192px;
  margin-inline: auto;
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-text-sub);
}
/* クラス別カラー */
.class-card--sakura { --card-color: #f2b38b; } /* 3歳 橙 */
.class-card--hikari { --card-color: #e3b930; } /* 4歳 黄 */
.class-card--sora   { --card-color: #8fb6d9; } /* 5歳 青 */

/* =========================================================
   レスポンシブ（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; }

  /* Course：dl ラベル上・値字下げ */
  .course__inner { max-width: none; }
  .course__row { grid-template-columns: 1fr; column-gap: 0; padding: 8px 0; line-height: 1.7; }
  .course__row dd { padding-left: 16px; }

  /* Fees：タブで料金表を切替 */
  .fees__inner { max-width: none; }
  .fees__line { grid-template-columns: 120px 1fr; }
  .fees__tabhint {
    margin-top: 18px;
    font-size: 14px;
    color: var(--color-text-sub);
  }
  .fees__tablabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    margin-top: 10px;
  }
  .fees__tab {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px 8px 0 0; /* 左上・右上だけ */
    background: #eef3e3;
    color: var(--color-accent);
    font-size: 14px;
    cursor: pointer;
  }
  .fees__tab.is-active { background: var(--color-accent-mid); color: var(--color-white); }
  /* タブ直下のテーブルは上margin 2px */
  .fees__table { margin-top: 2px; }
  /* テーブルは「ラベル列＋選択中の1列」だけ表示 */
  .fees__trow { grid-template-columns: 120px 1fr; }
  .fees__trow--head { display: none; } /* SPはタブが見出しの役割 */
  .fee-value[data-age] { display: none; }
  .fee-value[data-age].is-active { display: flex; }

  /* Classes：縦積み（星＋名＋本文） */
  .classes__list { grid-template-columns: 1fr; row-gap: 10px; margin-top: 30px; }
  .class-card { max-width: 340px; margin-inline: auto; }
}