/* 支援内容ページ／PC・スマートフォン版
   共通の色・書体・ヘッダー・CTAはstyle.cssを使用。
   このファイルは支援内容ページだけで読み込みます。
   承認済みPC版を維持し、末尾のメディアクエリでスマートフォンを調整。 */

.support-page .site-nav [aria-current="page"] { color: var(--green); }
.detail-breadcrumb { display: flex; align-items: center; gap: 12px; padding-block: 18px; font-size: 13px; color: #697a89; }
.detail-breadcrumb a { color: var(--navy); }
.detail-breadcrumb a:hover { text-decoration: underline; }

/* 導入 */
.detail-hero { position: relative; overflow: hidden; }
.detail-hero-inner { position: relative; padding-block: 60px; min-height: 370px; display: flex; align-items: center; }
.detail-hero-copy { width: 710px; max-width: 65%; }
.detail-hero h1 { font-size: 50px; line-height: 1.4; margin-bottom: 20px; letter-spacing: .02em; }
.detail-intro-lead { color: var(--navy); font-size: 24px; font-weight: 700; line-height: 1.7; margin-bottom: 18px; }
.detail-hero-copy > p:last-child { font-size: 17px; line-height: 1.9; }

/* 3つの支援：参考画像と同じ、相談テーマの左列と写真・説明の右列 */
.support-topic { padding-block: 90px; }
.topic-tinted { background: var(--mist); }
.detail-grid { display: grid; grid-template-columns: 1fr 1.12fr; grid-template-areas: "heading photo" "themes description"; column-gap: 64px; row-gap: 28px; align-items: start; }
.topic-heading { grid-area: heading; align-self: center; }
.topic-number { display: block; width: 48px; padding-bottom: 6px; border-bottom: 2px solid #80b69e; font-size: 26px; color: var(--green); margin-bottom: 20px; line-height: 1.4; }
.topic-heading h2 { font-size: 42px; line-height: 1.45; letter-spacing: 0; }
.topic-lead { margin-top: 16px; color: var(--navy); font-size: 21px; line-height: 1.7; font-weight: 700; }
.topic-themes-panel { grid-area: themes; align-self: stretch; padding: 26px; background: var(--mist); border-radius: 3px; }
.topic-tinted .topic-themes-panel { background: #fff; }
.theme-heading { font-size: 20px; line-height: 1.5; margin-bottom: 18px; color: var(--green); }
.topic-themes li { position: relative; padding-left: 22px; font-size: 18px; line-height: 1.85; }
.topic-themes li::before { content: ""; position: absolute; left: 0; top: 13px; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.topic-themes li + li { margin-top: 15px; }
.topic-photo { grid-area: photo; display: block; width: 100%; height: auto; aspect-ratio: 1.85; object-fit: cover; }
.topic-description { grid-area: description; align-self: stretch; padding-block: 26px; }
.topic-description h3 { font-size: 20px; line-height: 1.5; margin-bottom: 18px; }
.topic-description p { font-size: 18px; line-height: 1.9; }
.topic-description p + p { margin-top: 16px; }

/* 伴走：中央見出し、アイコン付きの4枠。説明文は文字のまま編集できます */
.support-journey { background: var(--mist); padding-block: 80px 110px; }
.journey-heading { text-align: center; }
.journey-heading::before { content: ""; display: block; width: 60px; height: 2px; margin: 0 auto 28px; background: #80b69e; }
.journey-heading h2 { font-size: 34px; }
.journey-lead { font-size: 22px; line-height: 1.7; font-weight: 700; color: var(--navy); margin-top: 18px; }
.journey-figure { margin: 40px 0 0; }
.journey-steps { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.journey-steps > li { position: relative; display: grid; grid-template-columns: 92px minmax(0,1fr); gap: 26px; align-items: center; min-height: 194px; padding: 32px 28px; background: #fff; border-radius: 4px; }
.journey-number { position: absolute; top: 16px; left: 16px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--green); color: #fff; font-size: 16px; font-weight: 700; }
.journey-icon { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; background: var(--mist); }
.journey-icon svg { width: 46px; height: 46px; color: var(--green); stroke-width: 1.7; }
.journey-step-copy h3 { font-size: 22px; line-height: 1.5; margin-bottom: 12px; }
.journey-step-copy p { font-size: 18px; line-height: 1.85; }
.journey-description { position: relative; max-width: 1050px; margin: 44px auto 0; padding-top: 30px; text-align: center; font-size: 18px; line-height: 1.9; }
.journey-description::before { content: ""; position: absolute; top: 0; left: calc(50% - 30px); width: 60px; height: 2px; background: #80b69e; }
.journey-description p + p { margin-top: 16px; }

/* PCの小さなウィンドウでも、本文を小さくせず読みやすさを保つ */
@media (min-width: 821px) and (max-width: 1160px) {
  .detail-grid { column-gap: 40px; }
  .topic-heading h2 { font-size: 38px; }
  .topic-lead { font-size: 20px; }
  .topic-themes-panel { padding: 24px; }
  .topic-description { padding-block: 24px; }
  .journey-heading h2 { font-size: 32px; }
  .journey-lead { font-size: 21px; }
  .journey-steps > li { grid-template-columns: 78px minmax(0,1fr); gap: 20px; padding: 30px 24px; }
  .journey-icon { width: 78px; height: 78px; }
  .journey-icon svg { width: 42px; height: 42px; }
  .journey-step-copy h3 { font-size: 21px; }
}

/* タブレット・スマートフォン：表題→写真→相談テーマ→支援内容の順で読む */
@media (max-width: 820px) {
  .detail-breadcrumb { padding-block: 14px; font-size: 12px; }
  .detail-hero { display: flex; flex-direction: column; }
  .detail-hero .hero-photo { position: static; order: 2; height: 220px; object-position: 65% 65%; }
  .detail-hero .hero-overlay { display: none; }
  .detail-hero-inner { order: 1; min-height: auto; padding-block: 38px 32px; background: #f8fafb; }
  .detail-hero-copy { width: 100%; max-width: 100%; }
  .detail-hero h1 { font-size: 36px; margin-bottom: 20px; }
  .detail-intro-lead { font-size: 21px; line-height: 1.7; }
  .detail-intro-lead span { display: block; }
  .detail-hero-copy br { display: none; }
  .detail-hero-copy > p:last-child { font-size: 17px; line-height: 1.85; }
  .support-topic { padding-block: 58px; }
  .detail-grid { max-width: 680px; grid-template-columns: minmax(0,1fr); grid-template-areas: "heading" "photo" "themes" "description"; gap: 28px; }
  .topic-heading { align-self: start; }
  .topic-number { width: 40px; font-size: 23px; margin-bottom: 14px; }
  .topic-heading h2 { font-size: clamp(26px,7.2vw,32px); line-height: 1.5; }
  .topic-lead { font-size: 18px; line-height: 1.75; margin-top: 12px; }
  .topic-photo { aspect-ratio: 1.78; }
  .topic-themes-panel { padding: 24px; }
  .theme-heading { font-size: 18px; margin-bottom: 18px; }
  .topic-themes li { font-size: 17px; line-height: 1.85; padding-left: 20px; }
  .topic-themes li::before { top: 12px; width: 7px; height: 7px; }
  .topic-themes li + li { margin-top: 14px; }
  .topic-description { padding-block: 0; }
  .topic-description h3 { font-size: 20px; margin-bottom: 18px; }
  .topic-description p { font-size: 17px; line-height: 1.9; }
  .support-journey { padding-block: 58px 64px; }
  .support-journey > .section-shell { max-width: 680px; }
  .journey-heading::before { margin-bottom: 24px; }
  .journey-heading h2 { font-size: 28px; line-height: 1.6; text-wrap: balance; }
  .journey-lead { font-size: 19px; line-height: 1.8; margin-top: 16px; text-wrap: balance; }
  .journey-figure { margin-top: 30px; }
  .journey-steps { grid-template-columns: minmax(0,1fr); gap: 18px; }
  .journey-steps > li { grid-template-columns: 64px minmax(0,1fr); gap: 16px 18px; min-height: 0; padding: 30px 24px 24px; }
  .journey-number { top: 12px; left: 12px; width: 26px; height: 26px; font-size: 15px; }
  .journey-icon { grid-column: 1; grid-row: 1; width: 64px; height: 64px; }
  .journey-icon svg { width: 35px; height: 35px; }
  .journey-step-copy { display: contents; }
  .journey-step-copy h3 { grid-column: 2; grid-row: 1; align-self: center; font-size: 21px; line-height: 1.5; margin: 0; }
  .journey-step-copy p { grid-column: 1 / -1; font-size: 17px; line-height: 1.85; }
  .journey-description { text-align: left; font-size: 17px; line-height: 1.9; margin-top: 34px; padding-top: 28px; }
}
@media (max-width: 520px) {
  .detail-hero .hero-photo { height: 180px; }
  .detail-hero h1 { font-size: 34px; }
  .detail-intro-lead { font-size: 20px; }
  .topic-themes-panel { padding: 22px 20px; }
  .journey-heading h2 { font-size: 26px; }
  .journey-lead { font-size: 18px; }
  .journey-steps > li { padding-inline: 20px; }
  .journey-step-copy h3 { font-size: 20px; }
}