/* ========================================
   内部ページ共通コンポーネント
   富山カワイ幼稚園
   ======================================== */

/* ── セクション ── */
.ip-section {
  background: #fff;
  padding: 72px 32px;
}

.ip-section-pale {
  background: #E6EDF5;
  padding: 72px 32px;
}

.ip-section-cta {
  background: #fff;
  padding: 56px 32px;
  text-align: center;
}

.ip-section-cta-pale {
  background: #E6EDF5;
  padding: 56px 32px;
  text-align: center;
}

.ip-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* ── セクション見出し ── */
.ip-section-eyebrow {
  font-size: var(--font-ui);
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--color-muted);
  margin-bottom: 12px;
}

/* メインセクション見出し（h2） */
.ip-section-title {
  font-size: var(--font-section-title);
  font-weight: 900;
  color: var(--color-ink);
  line-height: 1.5;
  margin-bottom: 24px;
}

/* セクションリード文 */
.ip-section-lead {
  font-size: var(--font-lead);
  color: var(--color-text);
  line-height: 2.0;
  margin-bottom: 32px;
}

/* フィーチャー見出し（セクション内 h2/h3） */
.ip-feature-title {
  font-size: var(--font-subsection-title);
  font-weight: 900;
  color: var(--color-ink);
  line-height: 1.45;
  margin-bottom: 20px;
}

/* フィーチャー本文 */
.ip-feature-body {
  font-size: var(--font-body);
  color: var(--color-text);
  line-height: 2.0;
}
.ip-feature-body + .ip-feature-body {
  margin-top: 16px;
}

/* ── グリッド ── */
.ip-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.ip-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.ip-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* ── 画像プレースホルダー ── */
.ip-img {
  width: 100%;
  border-radius: var(--radius-image);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-ui);
  color: var(--color-muted);
}

.ip-img-a { background: linear-gradient(135deg, #c8d8b8, #b0c8a8); }
.ip-img-b { background: linear-gradient(135deg, #c8b8d8, #b0a8c8); }
.ip-img-c { background: linear-gradient(135deg, #b8ccd8, #a8b8c8); }
.ip-img-d { background: linear-gradient(135deg, #d8c8b0, #c8b8a0); }
.ip-img-e { background: linear-gradient(135deg, #b8d0c8, #a8c0b8); }

/* ── アクセスページ ── */
.access-contact-btn {
  margin-top: 20px;
}

.access-inline-link {
  color: var(--color-primary, #0874C7);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.access-goal-title {
  margin-bottom: 12px;
  color: var(--color-ink);
  font-weight: 700;
}

.access-goal-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 12px;
  margin: 0;
}

.access-goal-list dt {
  color: var(--color-ink);
  font-weight: 700;
}

.access-goal-list dd {
  margin: 0;
}

.access-map-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  align-items: stretch;
}

.access-map-photo {
  display: flex;
  flex-direction: column;
}

.access-map-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-image);
}

.access-address {
  margin: 16px 0 0;
  color: var(--color-text);
  font-size: var(--font-body);
  line-height: 1.8;
}

.access-map {
  overflow: hidden;
  border-radius: 8px;
}

.access-map-frame {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  border: 0;
}

/* ── テーブル ── */
.ip-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-body);
}

.ip-table th {
  background: #E6EDF5;
  border: 1px solid #D1D1D1;
  padding: 13px 16px;
  text-align: left;
  font-weight: 700;
  color: var(--color-ink);
  width: 140px;
  white-space: nowrap;
}

.ip-table td {
  border: 1px solid #D1D1D1;
  padding: 13px 16px;
  color: var(--color-text);
  line-height: 1.7;
}

/* thead がある場合：ヘッダー行は黒背景 */
.ip-table thead th {
  background: #1A1A1A;
  color: #fff;
  width: auto;
  text-align: center;
}

/* 3カラムテーブル modifier（ip-table と併用） */
.ip-table--3col tbody th {
  width: auto;
  white-space: normal;
}
.ip-table--3col tbody th small {
  font-weight: 400;
  font-size: var(--font-note);
  color: var(--color-muted);
  display: block;
  margin-top: 2px;
}
.ip-table--3col tbody td {
  text-align: center;
}

/* ── ステップフロー ── */
.ip-steps {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 24px 0;
}

.ip-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 16px;
  background: #fff;
  border: 1px solid #D1D1D1;
  border-right: none;
  position: relative;
  font-size: var(--font-body);
  color: var(--color-text);
  line-height: 1.5;
}

.ip-section-pale .ip-step {
  background: #fff;
}

.ip-step:last-child {
  border-right: 1px solid #D1D1D1;
}

.ip-step::after {
  content: '';
  position: absolute;
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 12px solid #D1D1D1;
  z-index: 1;
}

.ip-step:last-child::after {
  display: none;
}

.ip-step-num {
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #0874C7;
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  line-height: 36px;
  text-align: center;
  margin-bottom: 10px;
  flex-shrink: 0;
}

/* ── 日程カード ── */
.ip-schedule-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 24px;
}

.ip-date-card {
  border: 1px solid #D1D1D1;
  border-radius: 8px;
  padding: 20px;
  background: #fff;
}

.ip-date-card.is-next {
  border-color: #0874C7;
  border-width: 2px;
  background: #F0F6FF;
}

.ip-date-label {
  font-size: var(--font-note);
  font-weight: 700;
  color: #0874C7;
  margin-bottom: 6px;
}

.ip-date-card:not(.is-next) .ip-date-label {
  color: var(--color-muted);
}

.ip-date-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 4px;
}

.ip-date-time {
  font-size: 14px;
  color: var(--color-text);
  margin-bottom: 6px;
}

.ip-date-theme {
  font-size: 14px;
  color: var(--color-text);
  margin-bottom: 8px;
}

.ip-date-status {
  display: inline-block;
  font-size: var(--font-note);
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 100px;
  margin-bottom: 10px;
}

.ip-date-capacity {
  font-size: var(--font-note);
  color: var(--color-muted);
  margin-bottom: 12px;
}

.ip-date-apply-wrap {
  margin-top: 12px;
  text-align: center;
}

.ip-date-status.open {
  background: #0874C7;
  color: #fff;
}

.ip-date-status.soon {
  background: #E6EDF5;
  color: #0874C7;
  border: 1px solid #0874C7;
}

.ip-date-status.pending {
  background: #F0F0F0;
  color: var(--color-muted);
  border: 1px solid #D1D1D1;
}

.ip-date-status.closed {
  background: #F0F0F0;
  color: var(--color-muted);
  border: 1px solid #D1D1D1;
}

.ip-date-status.full {
  background: #FFF0F0;
  color: #C0392B;
  border: 1px solid #C0392B;
}

/* ── FAQ アコーディオン ── */
.ip-faq-list {
  border-top: 1px dotted #D1D1D1;
}

.ip-faq-item {
  border-bottom: 1px dotted #D1D1D1;
}

.ip-faq-q {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 18px 4px;
  font-size: var(--font-body);
  font-weight: 700;
  color: var(--color-ink);
  cursor: pointer;
  gap: 16px;
  list-style: none;
  user-select: none;
}

.ip-faq-q::marker,
.ip-faq-q::-webkit-details-marker {
  display: none;
}

.ip-faq-q .ip-faq-icon {
  font-size: 30px;
  color: #0874C7;
  flex-shrink: 0;
  margin-left: auto;
}

.ip-faq-q::before {
  content: "Q.";
  color: #0874C7;
  font-weight: 900;
  font-size: var(--font-body);
  flex-shrink: 0;
}

details[open] .ip-faq-icon {
  transform: rotate(180deg);
}

.ip-faq-a {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #EBF3FC;
  padding: 20px 20px;
  font-size: var(--font-body);
  color: var(--color-text);
  line-height: 1.9;
  margin-bottom: 0;
}

.ip-faq-a::before {
  content: "A";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background-color: #FFA500;
  color: #fff;
  font-weight: 700;
  border-radius: 50%;
  font-size: var(--font-ui);
  margin-top: 1px;
}

/* ── アイコンボックス（利用シーン） ── */
.ip-icon-box {
  background: #fff;
  border: 1px solid #D1D1D1;
  border-radius: 8px;
  padding: 24px 16px;
  text-align: center;
}

.ip-icon-box .material-symbols-outlined {
  font-size: 36px;
  color: #0874C7;
  display: block;
  margin-bottom: 12px;
}

.ip-icon-title {
  font-size: var(--font-body);
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 6px;
}

.ip-icon-sub {
  font-size: var(--font-note);
  color: var(--color-muted);
  line-height: 1.6;
}

/* ── CTA ボタン群 ── */
.ip-cta-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 32px;
}

.ip-cta-title {
  font-size: var(--font-subsection-title);
  font-weight: 900;
  color: var(--color-ink);
  line-height: 1.4;
  margin-bottom: 12px;
}

.ip-cta-lead {
  font-size: var(--font-lead);
  color: var(--color-text);
  line-height: 1.9;
  margin-bottom: 0;
}

/* ── 問い合わせ電話 ── */
.ip-tel-block {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  color: var(--color-ink);
}

.ip-tel-block .material-symbols-outlined {
  font-size: 28px;
  color: #0874C7;
}

.ip-tel-num {
  display: block;
  font-size: var(--font-subsection-title);
  font-weight: 900;
  letter-spacing: 0.03em;
  line-height: 1.2;
}

.ip-tel-note {
  display: block;
  font-size: var(--font-note);
  color: var(--color-muted);
  margin-top: 2px;
}

/* ── インフォボックス ── */
.info-box {
  border-radius: 6px;
  padding: 16px 20px;
  font-size: var(--font-body);
  line-height: 1.8;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.info-box .material-symbols-outlined { font-size: 20px; flex-shrink: 0; margin-top: 2px; }
.info-box--blue { background: #EBF3FC; color: #1A5FA8; border: 1px solid #B8D0F0; }
.info-box--blue .material-symbols-outlined { color: #0874C7; }
.info-box--yellow { background: #FDF8EC; color: #7A5A00; border: 1px solid #F0DCA0; }
.info-box--yellow .material-symbols-outlined { color: #C08000; }
.info-box--red { background: #FEF0F0; color: #900; border: 1px solid #F0C0C0; }
.info-box--red .material-symbols-outlined { color: #c00; }

/* ── ページ内クイックナビ ── */
.page-quicknav {
  background: #fff;
  padding: 20px 32px;
}

.page-quicknav-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  justify-content: center;
  flex-wrap: wrap;
}

.page-quicknav-inner a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px 8px 20px;
  font-size: var(--font-body);
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
  border-radius: 100px;
  transition: color 0.15s, background 0.15s;
  text-decoration: none;
}

.page-quicknav-inner a:hover {
  color: #D98345;
  background: #FDF3E7;
}

.page-quicknav-inner a .material-symbols-outlined {
  font-size: 22px;
  color: #D98345;
  font-variation-settings: 'FILL' 1;
}

/* FAQ: もっと見るリンク */
.ip-faq-more-link {
  display: block;
  text-align: center;
  margin-top: 20px;
  font-size: var(--font-body);
  font-weight: 700;
  color: #0874C7;
  text-decoration: none;
}
.ip-faq-more-link:hover { text-decoration: underline; }
.ip-faq-more-link .material-symbols-outlined {
  font-size: var(--font-body);
  vertical-align: middle;
}
.faq-answer-text { white-space: pre-line; }

/* 発達支援・医療的ケア */
.support-intro {
  text-align: left;
}

.support-intro-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}

.support-intro-photo {
  display: block;
  width: 100%;
  height: 360px;
  border-radius: var(--radius-image);
  object-fit: cover;
}

.support-intro-content .ip-section-title {
  margin-bottom: 24px;
}

.support-perspectives {
  margin: 32px 0 0;
  overflow: hidden;
  border: 1px solid #AFC7D8;
  border-radius: 16px;
  background: #fff;
}

.support-perspective-row {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
}

.support-perspective-row + .support-perspective-row {
  border-top: 1px solid #AFC7D8;
}

.support-perspective-row dt,
.support-perspective-row dd {
  margin: 0;
  padding: 20px 24px;
  font-size: var(--font-body);
  line-height: 1.8;
}

.support-perspective-row dt {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0874C7;
  color: #fff;
  font-size: var(--font-minor-title);
  font-weight: 900;
}

.support-perspective-row dd {
  display: flex;
  align-items: center;
  background: #F7FBFE;
  color: var(--color-text);
}

.support-profile-list {
  display: grid;
  gap: 48px;
  margin-top: 40px;
}

.support-profile-list .support-profile {
  margin-top: 0;
}

.support-copy,
.parents-app-copy {
  color: var(--color-text);
  font-size: var(--font-body);
  line-height: 1.9;
}

.support-copy + .support-copy,
.support-intro-followup {
  margin-top: 16px;
}

.support-development-layout {
  display: grid;
  /* 準備中セクションは画像なしのため1列 */
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}

.support-development-photo {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-image);
  object-fit: cover;
  box-shadow: var(--shadow-subtle);
}

.support-profile {
  position: relative;
  margin-top: 40px;
  padding: 0;
}

.support-profile-card {
  position: relative;
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 32px;
  align-items: center;
  min-height: 220px;
  padding: 24px 40px;
  border: 1px solid rgba(8, 116, 199, 0.1);
  border-radius: 24px;
  background: #F5F8FC;
  box-shadow: var(--shadow-subtle);
}

.support-profile-photo-wrap {
  width: 180px;
  height: 180px;
  overflow: hidden;
  border: 6px solid #EFF7FD;
  border-radius: 50%;
  background: #EFF7FD;
}

.support-profile-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.support-profile-photo-ot {
  object-position: 28% center;
  transform: scale(1.8);
  transform-origin: 35% 32%;
}

.support-profile-photo-nurse {
  transform: scale(1.65);
  transform-origin: 72% 28%;
}

.support-profile-photo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #6F8799;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.support-profile-photo-placeholder .material-symbols-outlined {
  font-size: 56px;
  font-variation-settings: 'FILL' 1;
}

.support-profile-role {
  margin: 0 0 4px;
  color: var(--color-text);
  font-size: var(--font-body);
  font-weight: 700;
}

.support-profile-name {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--font-subsection-title);
  line-height: 1.45;
}

.support-profile-message {
  margin: 18px 0 0;
  color: var(--color-text);
  font-size: var(--font-body);
  line-height: 1.9;
}

.support-profile-message + .support-profile-message {
  margin-top: 12px;
}

.support-consult-card {
  padding: 56px 48px;
  border-radius: 24px;
  background: #0874C7;
  box-shadow: var(--shadow-subtle);
  text-align: center;
}

.lower-page-blue .support-consult-card .support-consult-title {
  margin-bottom: 20px;
  color: #fff;
}

.support-consult-copy {
  max-width: 760px;
  margin: 0 auto 28px;
  color: #fff;
  font-size: var(--font-body);
  line-height: 1.9;
}

.support-photo,
.parents-app-image {
  display: block;
  width: 100%;
  border-radius: var(--radius-image);
  object-fit: cover;
}

.support-photo {
  height: 240px;
}

.parents-app-image {
  height: auto;
  box-shadow: var(--shadow-subtle-hover);
}

.parents-app-copy + .parents-app-copy {
  margin-top: 16px;
}

.parents-app-copy-last {
  margin-bottom: 24px;
}

/* ── レスポンシブ ── */
@media (max-width: 960px) {
  .access-map-layout,
  .ip-grid-2,
  .support-intro-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .support-intro-photo {
    height: auto;
    aspect-ratio: 3 / 2;
  }
}

@media (max-width: 768px) {
  .access-goal-list {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .access-goal-list dd:not(:last-child) {
    margin-bottom: 8px;
  }

  .access-map-frame {
    height: 320px;
    min-height: 0;
  }

  .support-profile {
    margin-top: 32px;
    padding: 0;
  }

  .support-profile-card {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 20px;
    min-height: 0;
    padding: 24px;
    border-radius: 20px;
  }

  .support-profile-photo-wrap {
    width: 112px;
    height: 112px;
    border-width: 4px;
  }

  .support-profile-message {
    margin-top: 12px;
  }

  .support-perspectives {
    margin-top: 24px;
  }

  .support-perspective-row {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .support-perspective-row dt,
  .support-perspective-row dd {
    padding: 16px;
  }

  .support-perspective-row dt {
    font-size: var(--font-card-title);
  }

  .support-profile-list {
    gap: 32px;
    margin-top: 32px;
  }

  .support-development-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .support-consult-card {
    padding: 40px 24px;
    border-radius: 20px;
  }

  .page-quicknav {
    padding: 16px 20px;
  }
  .page-quicknav-inner {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 6px;
  }
  .page-quicknav-inner a {
    flex: 0 0 auto;
  }

  /* テーブル横スクロール：テーブル全体を成り行き幅にしてはみ出したらスクロール */
  .ip-table,
  .ip-table--3col,
  .adm-table,
  .adm-cost-table,
  .adm-uniform-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* ヘッダーは折り返さない */
  .ip-table th,
  .adm-table th,
  .adm-cost-table th,
  .adm-uniform-table th {
    white-space: nowrap;
  }
  /* データセルは折り返しつつ最低幅を確保 */
  .ip-table td,
  .adm-table td,
  .adm-cost-table td,
  .adm-uniform-table td {
    min-width: 140px;
    white-space: normal;
  }
}

@media (max-width: 768px) {
  .ip-section,
  .ip-section-pale,
  .ip-section-cta,
  .ip-section-cta-pale {
    padding: 48px 20px;
  }

  .ip-faq-a {
    padding: 16px;
    gap: 10px;
  }
  .ip-faq-a::before {
    width: 24px;
    height: 24px;
    font-size: var(--font-ui);
  }

  .ip-grid-3,
  .ip-grid-4 {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .ip-schedule-grid {
    grid-template-columns: 1fr;
  }

  .ip-steps {
    flex-direction: column;
  }

  .ip-step {
    border-right: 1px solid #D1D1D1;
    border-bottom: none;
  }

  .ip-step:last-child {
    border-bottom: 1px solid #D1D1D1;
  }

  .ip-step::after {
    right: auto;
    left: 50%;
    top: auto;
    bottom: -12px;
    transform: translateX(-50%);
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 12px solid #D1D1D1;
    border-bottom: none;
  }

  .ip-section-title {
    font-size: var(--font-section-title);
  }

  .ip-feature-title {
    font-size: var(--font-subsection-title);
  }

  .ip-cta-title {
    font-size: var(--font-subsection-title);
  }
}

@media (max-width: 480px) {
  .support-profile-card {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 16px;
    padding: 20px;
  }

  .support-profile-photo-wrap {
    width: 88px;
    height: 88px;
  }
}

/* ── 入園スケジュール（microCMSの admission-schedule から描画） ── */
.ip-schedule-block { margin-bottom: 64px; }
.ip-schedule-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid #D7EAF8;
}
.ip-schedule-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  padding: 16px 4px;
  border-bottom: 1px solid #D7EAF8;
}
.ip-schedule-step {
  flex: 0 0 auto;
  min-width: 190px;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-ink);
}
.ip-schedule-date {
  flex: 1 1 240px;
  font-size: 16px;
  font-weight: 700;
  color: #075C9F;
}
.ip-schedule-note {
  flex: 1 1 100%;
  font-size: 14px;
  color: var(--color-text);
}
.ip-schedule-status {
  padding: 20px 4px;
  margin: 0;
  font-size: var(--font-body);
  color: var(--color-text);
}
@media (max-width: 767px) {
  .ip-schedule-item { gap: 2px 12px; padding: 14px 2px; }
  .ip-schedule-step { flex: 1 1 100%; min-width: 0; font-size: var(--font-body); }
  .ip-schedule-date { flex: 1 1 100%; font-size: 16px; }
}