/* support.html 専用スタイル（style.css の後・_utilities.css の前に読み込む） */

.page-support {
  /* 予約導線（TeOTeロゴボタン / LINEボタン）の共通幅。縦に並ぶので左右の端を揃える */
  --reserve-btn-w: 300px;
}

.marigold-pre {
  display: block;
  font-size: 0.6em;
  margin-bottom: 2px;
  letter-spacing: 0.08em;
}

.necessary-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: necessary;
}

.necessary-list li {
  position: relative;
  padding-left: 2em;
  line-height: 1.9;
}

.necessary-list li::before {
  counter-increment: necessary;
  content: counter(necessary, fullwidth-num) "　";
  position: absolute;
  left: 0;
  top: 0;
}

.notice-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* デザイン案どおり、2行目以降はぶら下げず左端に揃える（「・」は行頭に置くだけ） */
.notice-list li {
  line-height: 1.9;
}

.notice-list li::before {
  content: "・";
}

.teote-logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--reserve-btn-w);
  max-width: 100%;
  margin: 44px auto 0;
  /* 左右を広めに取ってロゴを小さくし、LINEボタンと同じ高さに収める */
  padding: 12px 40px;
  border: 2px solid #222;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 3px 0 #222;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.teote-logo-link:hover {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #222;
}

/* 横長1行のロゴ（マーク＋TeOTe＋病児保育）。枠は .teote-logo-link 側で描く */
.teote-logo {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.teote-flow {
  display: block;
  width: 240px;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--c-gray-200);
  border-radius: var(--r-md);
}

.btn-teote {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 15px 34px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  border: 2px solid #d32231;
}

.btn-teote::before {
  content: "";
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: 2.5px dashed currentColor;
  border-radius: 50%;
}

.btn-teote--fill {
  background: #d32231;
  color: #fff;
}

.btn-teote--outline {
  background: #fff;
  color: #d32231;
}

/* グローバルの a:hover（文字色変化）を打ち消し、ホバー時も色を変えない */
.btn-teote--fill:hover {
  color: #fff;
}

.btn-teote--outline:hover {
  color: #d32231;
}

/* LINE からの予約ボタン（デザイン案の「または」導線） */
.btn-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: var(--reserve-btn-w);
  max-width: 100%;
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  background: #06c755;
  color: #fff;
}

.btn-line:hover {
  color: #fff;
}

/* LINE公式ブランドアイコン。角丸四角の地色はボタンと同じ緑なので、
   見た目は吹き出しだけがボタン上に乗る */
.btn-line-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}

/* 「または」の区切り */
.teote-or {
  text-align: center;
  margin-top: 18px;
  margin-bottom: 18px;
  color: var(--c-gray-600, #666);
}

.teote-line-link {
  text-align: center;
}

/* ============================================================
   本文ブロック（デザイン案どおり、囲みカードを使わず地の文で構成する）
   ・.support-gap    … 段落どうしを1行分あけて話題の切れ目を示す
   ・.support-gap-lg … 図版・注意書きなど、ブロック単位の切れ目
   ============================================================ */
.philosophy-content p.support-gap {
  margin-top: 28px;
}

.philosophy-content .necessary-list {
  margin-top: 4px;
}

.support-gap-lg {
  margin-top: 56px;
}

/* 「予約に関する注意事項」など、直後のリストと一体で読ませる見出し行。
   デザイン案では本文と同じ字送り・字面で、リストとの間もあけない */
.philosophy-content p.support-note-title {
  margin-bottom: 0;
}

/* セクション内のサブ見出し（デザイン案では中央大見出しではなく左寄せの一行）。
   デザイン案の実寸は本文7pt に対して9pt ＝ 本文の約1.29倍 */
.support-subtitle {
  max-width: 680px;
  margin: 80px auto 20px;
  font-size: 1.29rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--c-gray-700);
}

/* ３ステップ／３つの安心（番号バッジや矢印を使わない、左寄せの素の並び） */
.support-steps {
  max-width: 680px;
  margin: 28px auto 0;
}

.support-step:not(:first-child) {
  margin-top: 28px;
}

.support-step h4 {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.9;
  color: var(--c-gray-700);
}

.support-step p {
  line-height: 1.9;
  color: var(--c-text);
}

/* ステップ内のボタンはデザイン案どおり中央に置く */
.support-step-action {
  margin-top: 24px;
  margin-bottom: 8px;
  text-align: center;
}

/* 「利用の流れ」図版は本文幅の枠に収める。スマホはデザイン案どおり中央、
   PCは下のメディアクエリで左端を本文のラインに揃える
   （style.css の .zoom-trigger は width:fit-content のため上書き） */
.page-support .zoom-trigger {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 680px;
}

/* PC：本文・見出し・ステップをまとめて中央寄せにする。
   ボタン・図版・写真はもともと中央にあるため、これで縦のラインが揃う。
   スマホはデザイン案どおり左揃えのまま（このメディアクエリの外） */
@media (min-width: 769px) {
  .page-support .philosophy-content,
  .page-support .philosophy-content p,
  .page-support .support-subtitle,
  .page-support .support-step h4,
  .page-support .support-step p,
  .page-support .necessary-list,
  .page-support .notice-list {
    text-align: center;
  }

  /* 中央寄せでは番号をぶら下げず、行頭にそのまま並べる
     （左寄せ用の absolute 配置のままだと番号だけ左端に取り残される） */
  .necessary-list li {
    padding-left: 0;
  }

  .necessary-list li::before {
    position: static;
  }

  /* 中央寄せでも図版が小さく見えないよう一回り大きくする */
  .teote-flow {
    width: 300px;
  }
}

/* 一時預かりセクションは下余白（共通の padding-bottom）を無くす。
   次の「園庭＆園内開放」見出しの上余白は mt-60 側で確保する */
#temporary {
  padding-bottom: 0;
}

/* 園庭＆園内開放（band-sky）セクションは下余白（共通の padding-bottom）を無くす */
#openday {
  padding-bottom: 0;
}

/* サブセクション見出し（mt-60 指定）の上余白をさらに広げ、話題の切り替わりを明確にする。
   _utilities.css の .mt-60 より詳細度を高くして上書き（このページのみ） */
.page-support .section-title.mt-60 {
  margin-top: 100px;
}

@media (max-width: 768px) {
  .page-support .section-title.mt-60 {
    margin-top: 100px;
  }

  /* 「一時預かり保育」の見出しと、その上のマリーゴールドの写真との間隔を
     「園庭＆園内開放」と同じ（写真の下から見出しまで100px）に揃える。
     PCはセクションの下余白だけで足りているが、スマホはその余白が縮むため補う */
  .page-support #temporary .section-title {
    margin-top: 50px;
  }
}


/* ============================================================
   背景SVG（このページ専用）— PC / スマホで個別に調整できます
   ・.subpage-bg-green / -sky / -cream … 帯の上端位置(top:%)と高さ(height)
   ・.page-shape-cream-fill … 最下部のクリーム塗り（波直下〜ページ最下端まで伸縮）
   ・値は現状のまま。ここを編集するとこのページだけに反映されます。
   ============================================================ */
/* ── PC ── */
/* 緑帯の上端は他のサブページと揃えた絶対位置（hero下端440px + 206px）。
   従来の 10% とこのページでは同じ位置になるため見え方は変わらない */
.subpage-bg-green {
  top: 646px;
  height: 560px;
}

.subpage-bg-sky {
  top: 39%;
  height: 1060px;
}

.subpage-bg-cream {
  top: 72%;
  height: 760px;
}

/* ── スマホ（幅768px以下） ── */
@media (max-width: 768px) {
  /* スマホも同じく絶対位置（hero下端360px + 453px）。従来の 12% と同じ位置 */
  .subpage-bg-green {
    top: 813px;
    height: 960px;
  }

  .subpage-bg-sky {
    top: 39%;
    height: 960px
  }

  .subpage-bg-cream {
    top: 72%;
    height: 960px
  }
}

/* ========== セクション間の写真（デザイン案どおり 3:2 全体表示）========== */
.support-photo {
  width: 100%;
  /* PCは中央寄せレイアウトのため本文幅に合わせる必要はなく、
     写真だけで画面が埋まらないよう本文（680px）より一回り小さく抑える */
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  line-height: 0;
  /* PCでは他ページ（hoiku / shokuiku / トップのティーザー）の写真と同じく、
     有機的に歪んだ形でくり抜く。角丸長方形に見えないよう、対角で半径を大きく振る。
     スマホは下部メディアクエリで矩形に戻す */
  border-radius: 55% 35% 48% 42% / 42% 55% 38% 48%;
  overflow: hidden;
}

/* 3枚の写真は形状に個体差をつける（同じ型の繰り返しに見せない） */
.support-photo--b {
  border-radius: 35% 55% 42% 48% / 55% 40% 52% 38%;
}

.support-photo--c {
  border-radius: 48% 42% 55% 35% / 38% 48% 42% 55%;
}

.support-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

@media (max-width: 768px) {
  /* スマホは container の左右余白（24px）を打ち消して画面幅いっぱいに */
  .support-photo,
  .support-photo--b,
  .support-photo--c {
    max-width: none;
    width: auto;
    margin-left: -24px;
    margin-right: -24px;
    /* スマホは角丸なし（矩形・幅いっぱい）。個体差クラスの詳細度に合わせて上書き */
    border-radius: 0;
  }
}