:root {
    --bg: #FEFEFB;
    --text: #3E2F23;
    --header: #4A3728;
    --accent: #2F9E44;
    --accent-hover: #257836;
    --accent-deep: #1D5E2A;
    --warm: #D97C4B;
    --warm-hover: #B8623A;
    --warm-deep: #9C5230;
    --warm-deep-hover: #7E4227;
    --stripe: #F6FAF1;
    --card-bg: #FFFFFF;
    --border: #EFE7D9;
    --font-heading: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  }

  * {
    box-sizing: border-box;
  }

  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    margin: 0;
    background-color: var(--bg);
    background-image:
      radial-gradient(900px 480px at 12% -8%, rgba(255, 200, 140, 0.18), transparent 60%),
      radial-gradient(900px 520px at 100% 8%, rgba(120, 210, 110, 0.12), transparent 60%),
      radial-gradient(760px 420px at 55% 105%, rgba(255, 224, 178, 0.12), transparent 62%);
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: var(--text);
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
    font-size: 16px;
    line-height: 1.9;
  }

  /* 折り返してほしくない語句を包むためのユーティリティ */
  .nw {
    white-space: nowrap;
  }

  .mock-banner {
    background-color: var(--border);
    color: var(--text);
    text-align: center;
    padding: 8px 12px;
    font-size: 13px;
  }

  header.site-header {
    background-image: linear-gradient(135deg, #4A3728, #5A4433);
    color: #FFFFFF;
    padding: 16px 20px;
  }

  .header-inner {
    max-width: 940px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
  }

  .site-name {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .site-logo {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: block;
    flex-shrink: 0;
  }

  .site-name-text {
    display: flex;
    flex-direction: column;
  }

  .site-name .name {
    font-size: 20px;
    font-weight: bold;
  }

  .site-name .sub {
    font-size: 13px;
  }

  nav.site-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
  }

  nav.site-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #FFFFFF;
    text-decoration: none;
    line-height: 1.4;
    padding-bottom: 3px;
    border-bottom: 2px solid transparent;
    transition: border-color 0.15s ease;
  }

  nav.site-nav a .ja {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: bold;
  }

  nav.site-nav a .en {
    font-size: 10px;
    letter-spacing: 0.06em;
    opacity: 0.65;
  }

  nav.site-nav a:hover {
    border-bottom-color: #9BD8A5;
  }

  main {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 20px;
  }

  section {
    padding: 48px 0;
  }

  section#fv {
    position: relative;
    padding: 0;
    margin-top: 24px;
    min-height: 600px;
    display: flex;
    align-items: center;
    border-radius: 20px;
    overflow: hidden;
    width: calc(100vw - 48px);
    max-width: 1100px;
    margin-left: 50%;
    transform: translateX(-50%);
  }

  /* v4: 画像を幅120%で置き、ごくゆっくり横パンさせる（cotobatoco方式） */
  .fv-photo {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 120%;
    background-image: url("./hero.jpg");
    background-size: cover;
    background-position: center 45%;
    animation: fvPan 20s ease-in-out infinite alternate;
    will-change: transform;
  }

  @keyframes fvPan {
    from { transform: translateX(0); }
    to { transform: translateX(-15%); }
  }

  /* v4: 背面のぼかしグラデ光の帯（右側のみ・写真が見えている側に置く） */
  .fv-glow {
    position: absolute;
    top: 8%;
    bottom: 8%;
    right: -8%;
    left: 42%;
    background-image: linear-gradient(115deg, rgba(223, 240, 216, 0.5), rgba(243, 222, 206, 0.5));
    filter: blur(30px);
    pointer-events: none;
  }

  .fv-overlay {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(90deg, rgba(254, 254, 251, 0.97) 0%, rgba(254, 254, 251, 0.90) 42%, rgba(254, 254, 251, 0.55) 72%, rgba(254, 254, 251, 0.30) 100%);
  }

  .fv-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 48px;
    width: 100%;
    padding: 56px 52px;
  }

  .fv-main {
    flex: 1.25;
    min-width: 0;
  }

  .fv-eyebrow {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: bold;
    color: var(--header);
    margin: 14px 0 2px;
  }

  .fv-main h1 {
    margin: 0 0 16px;
  }

  /* 意味の切れ目でだけ折り返す（日本語は単語途中で折れるため） */
  .fv-eyebrow .kumi,
  .fv-main h1 .kumi {
    display: inline-block;
    max-width: 100%;
  }

  /* v4: ボケ→合焦の登場演出（1回きり・backwardsで終了後は素の状態に戻す） */
  .fv-main {
    animation: fvFocus 1.2s cubic-bezier(0.2, 1, 0.2, 1) backwards;
  }

  .fv-side {
    animation: fvFocus 1.2s cubic-bezier(0.2, 1, 0.2, 1) 0.25s backwards;
  }

  @keyframes fvFocus {
    from { opacity: 0; filter: blur(20px); transform: scale(0.985); }
    to { opacity: 1; filter: blur(0); transform: none; }
  }

  .fv-lead {
    font-size: 16px;
    margin: 0 0 26px;
  }

  .fv-main .cta-button {
    padding: 14px 26px;
  }

  .fv-side {
    flex: 1;
    max-width: 420px;
  }

  .fv-side-card {
    background-color: rgba(255, 255, 255, 0.88);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 22px 22px 24px;
    box-shadow:
      0 1px 2px rgba(74, 55, 40, 0.05),
      0 8px 24px rgba(74, 55, 40, 0.08);
  }

  .fv-online-tag {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--border);
    color: var(--header);
    font-size: 13px;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 8px;
  }

  @media (max-width: 860px) {
    .fv-content {
      flex-direction: column;
      align-items: stretch;
      gap: 28px;
      padding: 36px 28px;
    }

    .fv-side {
      max-width: none;
    }

    .fv-overlay {
      background-image: linear-gradient(180deg, rgba(254, 254, 251, 0.93) 0%, rgba(254, 254, 251, 0.70) 42%, rgba(254, 254, 251, 0.34) 100%);
    }

    section#fv {
      min-height: 500px;
    }

    .fv-glow {
      left: 0;
      top: 46%;
      bottom: 0;
    }
  }

  @media (max-width: 680px) {
    .fv-photo {
      background-position: 68% 30%;
    }

    .fv-content {
      padding: 26px 18px 30px;
    }

    section#fv h1 {
      font-size: 27px;
    }

    .fv-eyebrow {
      font-size: 16px;
    }
  }

  section.stripe {
    background-color: var(--stripe);
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  section.stripe > .stripe-inner {
    max-width: 720px;
    margin: 0 auto;
  }

  h1 {
    font-size: 32px;
    line-height: 1.6;
    letter-spacing: 0.01em;
    color: var(--header);
  }

  h2 {
    font-size: 24px;
    color: var(--header);
    margin-bottom: 16px;
  }

  h3 {
    font-size: 18px;
    color: var(--header);
    margin-bottom: 8px;
  }

  .lead {
    font-size: 17px;
  }

  .chip {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 14px;
    padding: 6px 12px;
    border-radius: 8px;
  }

  .fv-chip-label {
    font-family: var(--font-heading);
    font-weight: bold;
    color: var(--header);
    font-size: 16px;
    margin: 0 0 12px;
  }

  .fv-chip-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .fv-chip-grid .chip {
    text-align: center;
    padding: 8px 10px;
  }

  .fv-chip-grid .chip:last-child {
    grid-column: 1 / -1;
  }

  .cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
  }

  .cta-button {
    display: inline-block;
    background-color: var(--accent-hover);
    color: #FFFFFF;
    text-decoration: none;
    border: 1.5px solid transparent;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 15px;
    text-align: center;
    box-shadow: 0 6px 16px rgba(47, 158, 68, 0.28);
    transition: box-shadow 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
  }

  .cta-button:hover {
    background-color: var(--accent-deep);
    box-shadow: 0 8px 18px rgba(47, 158, 68, 0.34);
    transform: translateY(-1px);
  }

  /* 第2CTAは枠線型。主CTA（緑）との優先度の差を見た目でつける */
  .cta-group .cta-button:nth-child(2) {
    background-color: rgba(255, 255, 255, 0.92);
    color: var(--warm-deep);
    border: 1.5px solid var(--warm-deep);
    box-shadow: 0 2px 8px rgba(74, 55, 40, 0.10);
  }

  .cta-group .cta-button:nth-child(2):hover {
    background-color: #FFFFFF;
    color: var(--warm-deep-hover);
    border-color: var(--warm-deep-hover);
    box-shadow: 0 4px 12px rgba(74, 55, 40, 0.14);
  }

  .card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 24px;
  }

  @media (max-width: 480px) {
    .card-grid {
      grid-template-columns: 1fr;
    }
  }

  .card {
    background-color: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 4px 14px rgba(74, 55, 40, 0.06);
  }

  ul.plain-list {
    padding-left: 20px;
    margin: 16px 0;
  }

  ul.plain-list li {
    margin-bottom: 8px;
  }

  .note-box {
    background-color: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px;
    margin-top: 20px;
    font-size: 15px;
  }

  .values-list {
    margin-top: 24px;
  }

  .values-list .value-item {
    margin-bottom: 20px;
  }

  .value-item h3::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--warm);
    margin-right: 8px;
    vertical-align: middle;
  }

  ol.steps {
    padding-left: 0;
    list-style: none;
    margin: 24px auto 0;
    max-width: 800px;
  }

  ol.steps li {
    position: relative;
    padding-bottom: 22px;
  }

  ol.steps li:last-child {
    padding-bottom: 0;
  }

  ol.steps li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 47px;
    top: calc(100% - 22px);
    height: 22px;
    width: 0;
    border-left: 2px dashed #CFE4C8;
  }

  .step-card {
    position: relative;
    background-color: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 18px 18px 18px 92px;
    box-shadow: 0 4px 14px rgba(74, 55, 40, 0.06);
  }

  /* v4: STEP番号を大きめの数字＋緑の角丸正方形アイコン枠に */
  .step-pill {
    position: absolute;
    left: 18px;
    top: 18px;
    width: 58px;
    height: 58px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--accent-hover);
    color: #FFFFFF;
    font-family: var(--font-heading);
    font-weight: bold;
    line-height: 1;
    padding: 0;
    margin: 0;
    border-radius: 14px;
    box-shadow: 0 4px 10px rgba(47, 158, 68, 0.28);
  }

  .step-pill .step-pill-label {
    font-size: 13px;
    letter-spacing: 0.06em;
    opacity: 0.92;
  }

  .step-pill .step-pill-num {
    font-size: 24px;
    line-height: 1.2;
  }

  .step-card h3 {
    margin: 0 0 4px 0;
  }

  .step-card .step-desc {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 16px;
  }

  .step-meta {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
  }

  .step-meta .meta-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
  }

  .step-meta .meta-row > span:not(.meta-label) {
    font-family: var(--font-heading);
  }

  .step-meta .meta-label {
    flex-shrink: 0;
    display: inline-block;
    min-width: 64px;
    text-align: center;
    font-family: var(--font-heading);
    font-size: 13px;
    color: var(--accent-hover);
    border: 1px solid #BFE3B0;
    border-radius: 6px;
    padding: 1px 8px;
    line-height: 1.7;
  }

  .steps-cta {
    margin-top: 28px;
    text-align: center;
  }

  .steps-cta .cta-button {
    margin-top: 10px;
  }

  .price-table {
    margin-top: 24px;
  }

  .price-row {
    background-color: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 4px 14px rgba(74, 55, 40, 0.06);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
  }

  .price-row .price-label {
    font-weight: bold;
  }

  .includes-box {
    margin-top: 20px;
  }

  .includes-box h3 {
    font-size: 17px;
  }

  .note-small {
    font-size: 14px;
    color: var(--text);
    margin-top: 12px;
  }

  .marker-highlight {
    background-image: linear-gradient(transparent 58%, rgba(191, 227, 176, 0.65) 58%, rgba(191, 227, 176, 0.65) 92%, transparent 92%);
    padding: 0 1px;
  }

  /* v4: ことり方式の蛍光マーカー風下線（見出し用） */
  .hand-underline {
    background-image: linear-gradient(transparent 66%, #DFF3E4 66%, #DFF3E4 94%, transparent 94%);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 100% 100%;
    padding: 0 2px 2px;
  }

  .name-story-box {
    background-color: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 24px;
    margin-top: 20px;
    box-shadow: 0 4px 14px rgba(74, 55, 40, 0.06);
  }

  /* v4: プロフィール（画像左）に対して、ここは画像右でリズムをつける */
  .name-story-box {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 26px;
  }

  .name-story-box .deco-nest {
    flex: 0 0 150px;
    width: 150px;
    height: auto;
    margin: 2px 0 0;
  }

  .name-story-box .story-text {
    flex: 1 1 auto;
    min-width: 0;
  }

  .name-story-box .story-text p:last-child {
    margin-bottom: 0;
  }

  /* 名前の由来の署名（2026-08-01）: 本文と区別がつくよう右寄せにする */
  .name-story-box .story-text .story-sign {
    text-align: right;
    margin-top: 18px;
  }

  @media (max-width: 680px) {
    .name-story-box {
      flex-direction: column;
      align-items: center;
    }

    .name-story-box .deco-nest {
      flex: 0 0 auto;
      width: 140px;
      margin: 0 auto 14px;
    }
  }

  .profile-layout {
    display: flex;
    align-items: flex-start;
    gap: 24px;
  }

  .profile-photo {
    flex: 0 0 200px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 1px solid var(--border);
    object-fit: cover;
  }

  .profile-text {
    flex: 1 1 auto;
    min-width: 0;
  }

  .profile-text p {
    margin-bottom: 14px;
  }

  /* 資格・所属（2026-08-01）
     ラベルと本体を分け、2行以上になる本体の先頭を縦に揃える。
     grid の max-content 列にラベルを置くことで、資格と所属の
     ラベル位置・本体の開始位置が自動で揃う（全角スペースは使わない）。 */
  .profile-meta {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 2px;
    row-gap: 2px;
    margin: 0 0 14px;
  }

  .profile-meta dt {
    grid-column: 1;
    font-weight: normal;
  }

  .profile-meta dd {
    grid-column: 2;
    margin: 0;
    min-width: 0;
  }

  /* 1行に1団体。団体名の途中では折り返さず、枠に入りきらないときだけ折る */
  .profile-meta dd span {
    display: block;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }

  @media (max-width: 680px) {
    .profile-layout {
      flex-direction: column;
      align-items: center;
    }

    .profile-photo {
      flex: 0 0 auto;
      width: 160px;
      height: 160px;
    }
  }

  details {
    position: relative;
    background-color: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 12px;
    box-shadow: 0 4px 14px rgba(74, 55, 40, 0.06);
  }

  summary {
    cursor: pointer;
    font-weight: bold;
    color: var(--header);
  }

  summary::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--warm);
    margin-right: 8px;
  }

  details p {
    margin-top: 12px;
    margin-bottom: 0;
  }

  .contact-notice {
    background-color: var(--stripe);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
    margin-top: 20px;
    margin-bottom: 24px;
  }

  form {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .form-field label {
    font-size: 15px;
    font-weight: bold;
  }

  select, input[type="email"], input[type="text"], textarea {
    font-family: inherit;
    font-size: 16px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background-color: var(--card-bg);
    color: var(--text);
    width: 100%;
  }

  textarea {
    min-height: 120px;
    resize: vertical;
  }

  .form-field.checkbox-field {
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
  }

  .form-field.checkbox-field input[type="checkbox"] {
    margin-top: 4px;
    flex-shrink: 0;
    /* 既定サイズは実測13pxでスマホでは押しにくいため、操作しやすい大きさにする */
    width: 22px;
    height: 22px;
  }

  .form-field.checkbox-field label {
    font-weight: normal;
    font-size: 15px;
  }

  .submit-button {
    align-self: flex-start;
    background-color: var(--accent-hover);
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(47, 158, 68, 0.28);
  }

  .submit-button:hover {
    background-color: var(--accent-deep);
  }

  .submit-button:disabled {
    background-color: #A9BFA6;
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.8;
  }

  .privacy-block p {
    margin: 0 0 16px 0;
  }

  footer.site-footer {
    background-image: linear-gradient(135deg, #4A3728, #5A4433);
    color: #FFFFFF;
    text-align: center;
    padding: 24px 20px;
    margin-top: 24px;
  }

  footer.site-footer p {
    margin: 4px 0;
  }

  .footer-logo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: block;
    margin: 0 auto 10px;
  }

  .footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 18px;
    margin: 14px 0 16px;
  }

  .footer-nav a {
    color: #FFFFFF;
    font-size: 14px;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.45);
    padding-bottom: 2px;
  }

  .footer-nav a:hover,
  .footer-nav a:focus-visible {
    color: #FFE3C7;
    border-color: #FFE3C7;
  }

  .footer-sns {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 0 0 16px;
  }

  .footer-sns a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 50%;
    color: #FFFFFF;
    text-decoration: none;
    font-size: 14px;
    font-family: var(--font-heading);
  }

  .footer-sns a:hover,
  .footer-sns a:focus-visible {
    color: #FFE3C7;
    border-color: #FFE3C7;
  }

  /* --- draft2: 丸文字見出し --- */
  h1, h2, h3,
  .site-name .name,
  summary,
  .price-label,
  .group-heading {
    font-family: var(--font-heading);
  }

  /* --- draft2: 手描き風イラスト装飾 --- */
  .deco-leaf {
    display: inline-block;
    vertical-align: -4px;
    margin-right: 6px;
  }

  .deco-leaf-mini {
    display: inline-block;
    vertical-align: -2px;
    margin-right: 5px;
  }

  .deco-nest {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto 16px;
  }

  .section-divider {
    display: flex;
    justify-content: center;
    margin: 4px 0;
  }

  .section-divider svg {
    display: block;
    max-width: 100%;
  }

  /* --- draft2: 添え言葉 --- */
  .soe-word {
    font-size: 15px;
    color: var(--text);
    opacity: 0.85;
    margin-top: 4px;
    margin-bottom: 0;
  }

  /* --- draft2: 相談できること 保護者/本人グループ見出し --- */
  .group-heading {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    color: var(--header);
    margin-top: 28px;
    margin-bottom: 0;
  }

  .group-heading:first-of-type {
    margin-top: 20px;
  }

  .group-heading::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .group-heading.parent::before {
    background-color: var(--accent);
  }

  .group-heading.child::before {
    background-color: var(--warm);
  }

  /* --- draft2: これからの見通し 縦型タイムライン --- */
  ol.timeline-vert {
    list-style: none;
    margin: 24px auto 0;
    padding: 0;
    max-width: 800px;
  }

  .tl-item {
    position: relative;
    padding-left: 44px;
    padding-bottom: 24px;
  }

  .tl-item:last-child {
    padding-bottom: 0;
  }

  .tl-item::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 20px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: var(--card-bg);
    border: 3px solid var(--accent);
    box-shadow: 0 2px 6px rgba(47, 158, 68, 0.22);
  }

  .tl-item:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 14px;
    top: 40px;
    bottom: -2px;
    width: 0;
    border-left: 2px dashed #CFE4C8;
  }

  .tl-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px 18px;
    box-shadow: 0 4px 14px rgba(74, 55, 40, 0.06);
  }

  .tl-card h3 {
    font-size: 17px;
    margin: 0 0 4px 0;
  }

  .tl-card .tl-desc {
    font-size: 16px;
    margin: 0;
  }

  .tl-card .tl-note {
    font-size: 14px;
    color: var(--text);
    opacity: 0.85;
    margin: 10px 0 0 0;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
  }

  .tl-branch-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 10px;
  }

  .tl-branch-grid .chip {
    text-align: center;
    background-color: var(--stripe);
  }

  @media (max-width: 480px) {
    .tl-branch-grid {
      grid-template-columns: 1fr;
    }
  }

  /* --- draft2: お知らせ --- */
  section#news {
    padding: 36px 0 8px;
  }

  section#news h2 {
    font-size: 20px;
    margin-bottom: 8px;
  }

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

  .news-list li {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    align-items: baseline;
    padding: 10px 4px;
    border-bottom: 1px dashed var(--border);
    font-size: 15px;
  }

  .news-list time {
    flex-shrink: 0;
    font-size: 14px;
    color: var(--accent);
    font-weight: bold;
  }

  .news-more {
    text-align: right;
    font-size: 14px;
    margin-top: 10px;
  }

  .news-more a {
    color: var(--header);
    text-decoration: none;
    border-bottom: 1px solid var(--border);
    padding-bottom: 1px;
  }

  .news-more a:hover {
    border-bottom-color: var(--accent);
    color: var(--accent);
  }

  /* --- draft2: SNS・LINE導線 --- */
  .header-sns {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .header-sns a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 13px;
    font-family: var(--font-heading);
  }

  .header-sns a:hover {
    border-color: #FFE3C7;
    color: #FFE3C7;
  }

  /* --- スマホでヘッダーを圧縮する（英字副題とSNSアイコンを畳む） --- */
  @media (max-width: 680px) {
    header.site-header {
      padding: 12px 16px;
    }

    .header-inner {
      gap: 8px;
    }

    nav.site-nav ul {
      gap: 6px 18px;
    }

    nav.site-nav a .en {
      display: none;
    }

    .header-sns {
      display: none;
    }
  }

  section#sns {
    padding: 40px 0;
  }

  .sns-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 20px;
  }

  @media (max-width: 680px) {
    .sns-grid {
      grid-template-columns: 1fr;
    }
  }

  .sns-card {
    display: block;
    background-color: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 4px 14px rgba(74, 55, 40, 0.06);
    text-decoration: none;
    color: var(--text);
    text-align: center;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
  }

  .sns-card:hover {
    box-shadow: 0 6px 16px rgba(74, 55, 40, 0.10);
    transform: translateY(-1px);
  }

  .sns-card .sns-name {
    display: block;
    font-family: var(--font-heading);
    font-weight: bold;
    color: var(--header);
    font-size: 16px;
    margin-top: 6px;
  }

  .sns-card .sns-desc {
    display: block;
    font-size: 14px;
    margin-top: 4px;
  }

  .sns-note {
    font-size: 14px;
    margin-top: 12px;
    opacity: 0.85;
  }

  /* --- draft2: 対象別の看板名（相談できること） --- */
  .group-heading .gh-name {
    font-size: 20px;
  }

  .group-heading .gh-tag {
    font-size: 14px;
    font-weight: normal;
    opacity: 0.85;
    margin-left: 2px;
  }

  @media (max-width: 480px) {
    .group-heading {
      flex-wrap: wrap;
    }
  }

  /* --- draft2: 立体感（多層シャドウ＋ホバーの持ち上がり） --- */
  .card, .step-card, .tl-card, .price-row, details, .name-story-box, .includes-box, .sns-card {
    box-shadow:
      0 1px 2px rgba(74, 55, 40, 0.05),
      0 4px 14px rgba(74, 55, 40, 0.07),
      0 14px 30px rgba(74, 55, 40, 0.05);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
  }

  .card:hover, .step-card:hover, .tl-card:hover, .price-row:hover, details:hover, .sns-card:hover {
    transform: translateY(-2px);
    box-shadow:
      0 2px 4px rgba(74, 55, 40, 0.05),
      0 8px 20px rgba(74, 55, 40, 0.09),
      0 20px 38px rgba(74, 55, 40, 0.06),
      0 6px 18px rgba(47, 158, 68, 0.08);
  }

  /* --- draft2: スクロールで静かに現れる --- */
  .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.9s ease, transform 0.9s ease;
  }

  .reveal.is-visible {
    opacity: 1;
    transform: none;
  }

  /* --- draft2: 背景をゆっくり漂う葉と光の粒 --- */
  .float-deco {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
  }

  .float-deco span {
    position: absolute;
    display: block;
  }

  /* v4: cotobatocoのverticalSquare方式（上下だけ・小さく・ゆっくり） */
  .float-deco .f1 { left: 6%; top: 24%; animation: verticalFloat 8s ease-in-out infinite alternate; }
  .float-deco .f2 { right: 8%; top: 40%; animation: verticalFloatRev 8s ease-in-out infinite alternate; }
  .float-deco .f3 { left: 12%; bottom: 18%; animation: verticalFloat 8s ease-in-out infinite alternate; }
  .float-deco .f4 { right: 14%; bottom: 26%; animation: verticalFloatRev 8s ease-in-out infinite alternate; }

  @keyframes verticalFloat {
    from { transform: translateY(-20%); }
    to { transform: translateY(20%); }
  }

  @keyframes verticalFloatRev {
    from { transform: translateY(20%); }
    to { transform: translateY(-20%); }
  }


  /* ============================================================
     v4 mock: 追加スタイル（既存ルールより後ろに置いて上書きする）
     ============================================================ */

  /* --- v4: セクション境界のぼかしグラデ帯（淡緑の帯を柔らかく立ち上げる） --- */
  section.stripe {
    position: relative;
  }

  section.stripe::before,
  section.stripe::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 46px;
    z-index: -1;
    pointer-events: none;
  }

  section.stripe::before {
    top: -46px;
    background-image: linear-gradient(to bottom, rgba(246, 250, 241, 0), rgba(246, 250, 241, 1));
  }

  section.stripe::after {
    bottom: -46px;
    background-image: linear-gradient(to top, rgba(246, 250, 241, 0), rgba(246, 250, 241, 1));
  }

  /* --- v4: 選択式カード「どんなご相談ですか？」 --- */
  section#choice {
    padding: 40px 0 12px;
  }

  section#choice h2 {
    margin-bottom: 4px;
  }

  .choice-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 20px;
  }

  @media (max-width: 680px) {
    .choice-grid {
      grid-template-columns: 1fr;
    }
  }

  .choice-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    background-color: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 18px 16px 20px;
    text-decoration: none;
    color: var(--text);
    box-shadow:
      0 1px 2px rgba(74, 55, 40, 0.05),
      0 4px 14px rgba(74, 55, 40, 0.07),
      0 14px 30px rgba(74, 55, 40, 0.05);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  }

  .choice-card:hover,
  .choice-card:focus-visible {
    transform: translateY(-2px);
    border-color: #CFE4C8;
    box-shadow:
      0 2px 4px rgba(74, 55, 40, 0.05),
      0 8px 20px rgba(74, 55, 40, 0.09),
      0 20px 38px rgba(74, 55, 40, 0.06);
  }

  .choice-card .choice-icon {
    display: block;
    margin-bottom: 2px;
  }

  .choice-card .choice-title {
    font-family: var(--font-heading);
    font-weight: bold;
    font-size: 17px;
    line-height: 1.6;
    color: var(--header);
  }

  .choice-card .choice-desc {
    font-size: 15px;
    line-height: 1.8;
  }

  /* --- v4: ご相談の流れ（PCで階段状インデント。SPは縦一列のまま） --- */
  @media (min-width: 861px) {
    ol.steps li:nth-child(1) { margin-left: 0; margin-right: 90px; }
    ol.steps li:nth-child(2) { margin-left: 18px; margin-right: 72px; }
    ol.steps li:nth-child(3) { margin-left: 36px; margin-right: 54px; }
    ol.steps li:nth-child(4) { margin-left: 54px; margin-right: 36px; }
    ol.steps li:nth-child(5) { margin-left: 72px; margin-right: 18px; }
    ol.steps li:nth-child(6) { margin-left: 90px; margin-right: 0; }

    /* 階段状にずれるため、点線のつなぎ目は出さない */
    ol.steps li:not(:last-child)::after {
      display: none;
    }
  }

  @media (max-width: 480px) {
    .step-card {
      padding-left: 82px;
    }

    .step-pill {
      left: 14px;
      width: 54px;
      height: 54px;
    }

    ol.steps li:not(:last-child)::after {
      left: 41px;
    }
  }

  /* --- draft2: 動きを減らす設定を尊重 --- */
  @media (prefers-reduced-motion: reduce) {
    .reveal {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
    }

    .float-deco span {
      animation: none !important;
    }

    .card, .step-card, .tl-card, .price-row, details, .name-story-box, .includes-box, .sns-card,
    .cta-button, .submit-button, nav.site-nav a {
      transition: none !important;
    }

    .card:hover, .step-card:hover, .tl-card:hover, .price-row:hover, details:hover, .sns-card:hover,
    .cta-button:hover {
      transform: none !important;
    }
  }

  /* --- v4: 動きを減らす設定を尊重（追加分） --- */
  @media (prefers-reduced-motion: reduce) {
    .fv-photo,
    .fv-main,
    .fv-side,
    .float-deco span {
      animation: none !important;
    }

    .fv-photo {
      transform: none !important;
    }

    .fv-main,
    .fv-side {
      opacity: 1 !important;
      filter: none !important;
    }

    .choice-card {
      transition: none !important;
    }

    .choice-card:hover,
    .choice-card:focus-visible {
      transform: none !important;
    }
  }

/* ============================================================
   v5 mock: 5ページ構成＋子どもテイストの追加スタイル
   （既存ルールより後ろに置いて上書きする）
   ============================================================ */

:root {
  /* 子どもテイスト用の差し色（水彩の淡いトーン2色・design.mdパレット外） */
  --pale-yellow: #F7E3A8;
  --pale-sky: #CFE4EF;
  --pale-yellow-soft: rgba(247, 227, 168, 0.34);
  --pale-sky-soft: rgba(207, 228, 239, 0.40);
  --pale-green-soft: rgba(191, 227, 176, 0.34);
}

/* --- v5: ページリンク型ナビ（現在地の表示付き） --- */
nav.site-nav a[aria-current="page"] {
  border-bottom-color: #9BD8A5;
}

nav.site-nav a[aria-current="page"] .ja {
  color: #DFF3E4;
}

nav.site-nav a[aria-current="page"] .en {
  opacity: 0.9;
}

/* --- v5: パンくず --- */
.crumbs {
  max-width: 760px;
  margin: 0 auto;
  padding: 14px 20px 0;
  font-size: 13px;
  color: var(--text);
  opacity: 0.85;
}

.crumbs a {
  color: var(--header);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}

.crumbs a:hover,
.crumbs a:focus-visible {
  border-bottom-color: var(--accent);
  color: var(--accent-hover);
}

.crumbs .sep {
  margin: 0 6px;
  opacity: 0.6;
}

/* --- v5: 下層ページの見出し帯 --- */
.page-head {
  position: relative;
  padding: 34px 0 6px;
}

.page-head h1 {
  font-size: 30px;
  margin: 6px 0 12px;
}

.page-eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.16em;
  color: var(--accent-hover);
  margin: 0;
}

.page-head .page-lead {
  font-size: 17px;
  margin: 0;
}

/* --- v5: クレヨン風の手描きドゥードル --- */
.doodle-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 12px 0 0;
  opacity: 0.75;
}

.doodle-row svg {
  display: block;
  flex-shrink: 0;
}

.doodle-corner {
  position: absolute;
  pointer-events: none;
  opacity: 0.5;
}

.wave-divider {
  display: flex;
  justify-content: center;
  margin: 6px 0;
  overflow: hidden;
}

.wave-divider svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* --- v5: 年齢別セクション --- */
.age-block {
  position: relative;
  overflow: hidden;
  background-color: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-top: 26px;
  box-shadow:
    0 1px 2px rgba(74, 55, 40, 0.05),
    0 4px 14px rgba(74, 55, 40, 0.07),
    0 14px 30px rgba(74, 55, 40, 0.05);
}

.age-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px dashed var(--border);
}

.age-block.age-pre .age-head { background-color: var(--pale-yellow-soft); }
.age-block.age-ele .age-head { background-color: var(--pale-green-soft); }
.age-block.age-jhs .age-head { background-color: var(--pale-sky-soft); }

.age-head svg,
.age-head .icon-illust {
  display: block;
  flex-shrink: 0;
}

.age-title {
  display: flex;
  flex-direction: column;
  line-height: 1.5;
}

.age-title .age-name {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: bold;
  color: var(--header);
}

.age-title .age-range {
  font-size: 13px;
  opacity: 0.85;
}

.age-body {
  padding: 18px 20px 20px;
}

.age-body > p:first-child {
  margin-top: 0;
}

.age-body .card-grid {
  margin-top: 16px;
}

.age-body .note-small {
  margin-bottom: 0;
}

.age-block .doodle-corner {
  top: 10px;
  right: 14px;
}

@media (max-width: 480px) {
  .age-head {
    padding: 12px 14px;
  }

  .age-body {
    padding: 16px 14px 18px;
  }

  .age-block .doodle-corner {
    display: none;
  }
}

/* --- v5: 年齢からのクイックリンク --- */
.age-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.age-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background-color: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 14px;
  font-family: var(--font-heading);
  font-size: 15px;
  color: var(--header);
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(74, 55, 40, 0.06);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.age-link::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.age-link.age-pre::before { background-color: var(--pale-yellow); }
.age-link.age-ele::before { background-color: #BFE3B0; }
.age-link.age-jhs::before { background-color: var(--pale-sky); }

.age-link:hover,
.age-link:focus-visible {
  transform: translateY(-1px);
  border-color: #CFE4C8;
  box-shadow: 0 4px 12px rgba(74, 55, 40, 0.10);
}

.age-links-label {
  font-size: 15px;
  margin: 20px 0 0;
  opacity: 0.9;
}

/* --- v5: イラスト調アイコン（生成イラストを丸バッジで表示） --- */
.icon-illust {
  border-radius: 50%;
  object-fit: cover;
}

h2 .icon-illust.deco-leaf {
  vertical-align: -7px;
}

/* --- v5: イラストのプレースホルダー --- */
/* 正方形イラストは大きくなりすぎないよう最大460pxに抑え、中央に置く */
.illust {
  max-width: 460px;
  margin: 22px auto 0;
}

.illust-frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 170px;
  padding: 12px;
  background-color: #FBF7EF;
  background-image:
    radial-gradient(420px 200px at 22% 0%, rgba(247, 227, 168, 0.30), transparent 65%),
    radial-gradient(420px 200px at 82% 100%, rgba(207, 228, 239, 0.28), transparent 65%);
  border: 2px dashed #E0D3B6;
  border-radius: 14px;
}

.illust-frame::before {
  content: attr(data-illust-label);
  font-family: var(--font-heading);
  font-size: 14px;
  color: #A38F6E;
  text-align: center;
}

.illust-frame img {
  display: block;
  position: relative;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

.illust-frame.is-loaded {
  display: block;
  min-height: 0;
  padding: 0;
  background: none;
  border: none;
}

.illust-frame.is-loaded::before {
  content: none;
}

.illust-caption {
  font-size: 13px;
  text-align: center;
  opacity: 0.8;
  margin: 8px 0 0;
}

.illust.illust-wide .illust-frame {
  min-height: 210px;
}

@media (max-width: 480px) {
  .illust-frame {
    min-height: 140px;
  }

  .illust.illust-wide .illust-frame {
    min-height: 160px;
  }
}

/* --- v5: トップのヒーローイラストをゆっくり入れ替える --- */
.illust-slideshow {
  isolation: isolate;
  aspect-ratio: 1 / 1;
}

.illust-slideshow .illust-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.8s ease-in-out;
}

.illust-slideshow .illust-slide.is-active {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .illust-slideshow .illust-slide {
    transition: none;
  }
}

/* --- v5: トップの特徴の要約 --- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 20px;
}

@media (max-width: 680px) {
  .feature-grid {
    grid-template-columns: 1fr;
  }
}

.feature-item {
  background-color: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 18px 16px;
  box-shadow:
    0 1px 2px rgba(74, 55, 40, 0.05),
    0 4px 14px rgba(74, 55, 40, 0.07);
}

.feature-item svg,
.feature-item .icon-illust {
  display: block;
  margin-bottom: 6px;
}

.feature-item h3 {
  font-size: 17px;
  margin: 0 0 6px;
}

.feature-item p {
  font-size: 15px;
  margin: 0;
}

/* --- v5: 学習アプリの導線 --- */
.app-band {
  display: flex;
  align-items: center;
  gap: 18px;
  background-color: var(--card-bg);
  background-image:
    radial-gradient(360px 160px at 0% 0%, rgba(247, 227, 168, 0.28), transparent 62%),
    radial-gradient(360px 160px at 100% 100%, rgba(207, 228, 239, 0.26), transparent 62%);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 22px;
  margin-top: 20px;
  box-shadow:
    0 1px 2px rgba(74, 55, 40, 0.05),
    0 4px 14px rgba(74, 55, 40, 0.07);
}

.app-band svg,
.app-band .icon-illust {
  display: block;
  flex-shrink: 0;
}

.app-band-text {
  flex: 1 1 auto;
  min-width: 0;
}

.app-band-text h3 {
  font-size: 17px;
  margin: 0 0 4px;
}

.app-band-text p {
  font-size: 15px;
  margin: 0;
}

@media (max-width: 560px) {
  .app-band {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* --- v5: 支援者・専門職向け（AI活用ノート）への案内帯 ---
   .app-band と同じ作り。読者が違うことを小さなラベルで示し、
   保護者向けの主導線より静かに見えるよう、子ども向けの差し色
   （淡い黄色・淡い空色）のグラデーションと影を落としている。 */
.app-band.pro-band {
  align-items: flex-start;
  background-image: none;
  box-shadow: 0 1px 2px rgba(74, 55, 40, 0.05);
}

.pro-band .pro-band-label {
  font-size: 13px;
  margin: 0 0 4px;
  opacity: 0.75;
}

.app-cat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 18px;
}

@media (max-width: 560px) {
  .app-cat-grid {
    grid-template-columns: 1fr;
  }
}

.app-cat {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background-color: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 15px;
  box-shadow: 0 2px 8px rgba(74, 55, 40, 0.06);
}

.app-cat svg {
  display: block;
  flex-shrink: 0;
  margin-top: 4px;
}

.app-cat .app-cat-name {
  font-family: var(--font-heading);
  font-weight: bold;
  color: var(--header);
}

/* 外部リンクであることを示す小さな印 */
.ext-mark {
  display: inline-block;
  margin-left: 5px;
  font-size: 12px;
  vertical-align: 1px;
  opacity: 0.75;
}

/* --- v5: ページ下部の共通CTA帯 --- */
.page-cta {
  position: relative;
  overflow: hidden;
  background-color: var(--stripe);
  border: 1px solid #E3EEDA;
  border-radius: 14px;
  padding: 28px 24px;
  margin: 38px 0 12px;
  text-align: center;
}

.page-cta h2 {
  margin-top: 0;
  margin-bottom: 8px;
}

.page-cta .cta-group {
  justify-content: center;
}

.page-cta .doodle-corner {
  top: 8px;
  right: 12px;
}

@media (max-width: 480px) {
  .page-cta .doodle-corner {
    display: none;
  }
}

/* --- v5: 次のページへの案内 --- */
.next-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 22px;
}

@media (max-width: 560px) {
  .next-links {
    grid-template-columns: 1fr;
  }
}

.next-link {
  display: block;
  background-color: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 18px;
  text-decoration: none;
  color: var(--text);
  box-shadow:
    0 1px 2px rgba(74, 55, 40, 0.05),
    0 4px 14px rgba(74, 55, 40, 0.07);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.next-link:hover,
.next-link:focus-visible {
  transform: translateY(-2px);
  border-color: #CFE4C8;
  box-shadow: 0 8px 20px rgba(74, 55, 40, 0.09);
}

.next-link .next-title {
  display: block;
  font-family: var(--font-heading);
  font-weight: bold;
  font-size: 16px;
  color: var(--header);
}

.next-link .next-desc {
  display: block;
  font-size: 14px;
  margin-top: 2px;
}

/* --- v5: トップの「はじめての方へ」（料金・進め方・FAQの抜粋） --- */
/* 見出しの太さは3つ（料金の目安／ご相談までの進め方／よくあるご質問から）で揃える。
   既定のboldだと、白カードの中の価格ラベルやFAQの見出しに埋もれて細く見えるため、
   Zen Maru Gothic の Black（900）を使う（index.html のフォント指定に 900 を追加済み）。 */
.intro-title {
  margin-top: 28px;
  font-weight: 900;
}

.mini-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 560px) {
  .mini-steps {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.mini-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background-color: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 18px 18px;
  box-shadow:
    0 1px 2px rgba(74, 55, 40, 0.05),
    0 4px 14px rgba(74, 55, 40, 0.07);
}

.mini-step-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #DFF3E4;
  color: var(--header);
  font-family: var(--font-heading);
  font-weight: bold;
  font-size: 15px;
  line-height: 28px;
  text-align: center;
}

.mini-step-text {
  font-family: var(--font-heading);
  font-size: 16px;
  line-height: 1.75;
  color: var(--header);
}

@media (max-width: 560px) {
  .mini-step {
    align-items: center;
    padding: 16px 18px;
  }
}

/* --- v5: 動きを減らす設定を尊重（追加分） --- */
@media (prefers-reduced-motion: reduce) {
  .age-link,
  .next-link,
  .app-band,
  .feature-item {
    transition: none !important;
  }

  .age-link:hover,
  .age-link:focus-visible,
  .next-link:hover,
  .next-link:focus-visible {
    transform: none !important;
  }
}

/* --- v5: 本文中のテキストリンク（既定の青リンクをブランド色に揃える） --- */
main p a,
.privacy-block a,
.news-list a,
details p a {
  color: var(--accent-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

main p a:hover,
.privacy-block a:hover,
details p a:hover {
  color: var(--accent-deep);
}

main p a:focus-visible,
.privacy-block a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --- v5: コラム一覧の記事カード --- */
.column-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 22px;
}

@media (max-width: 680px) {
  .column-grid {
    grid-template-columns: 1fr;
  }
}

.column-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

a.column-card:hover,
a.column-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(74, 55, 40, 0.10);
}

.column-card .column-thumb {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #FBF7EF;
}

.column-card .column-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.column-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px 16px;
}

.column-date {
  font-size: 12px;
  letter-spacing: 0.04em;
  opacity: 0.75;
}

.column-title {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: bold;
  color: var(--header);
  line-height: 1.6;
}

.column-card.is-preparing {
  opacity: 0.55;
}

.column-card.is-preparing .column-thumb img {
  filter: grayscale(0.35);
}

/* --- v5: お問い合わせページの段階表示（STEP 1 → STEP 2） --- */
.step-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin: 0 0 10px;
  padding: 3px 14px;
  border-radius: 8px;
  background-color: var(--accent-hover);
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-weight: bold;
  line-height: 1.6;
  box-shadow: 0 4px 10px rgba(47, 158, 68, 0.24);
}

.step-badge .step-badge-label {
  font-size: 13px;
  letter-spacing: 0.06em;
}

.step-badge .step-badge-num {
  font-size: 19px;
}

.flow-forward {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px dashed var(--border);
}

.flow-forward .cta-group {
  margin-top: 12px;
}

/* 折りたたみ式のフォーム。初期状態は open で書き、linest.js が読み込み時に折りたたむ */
.form-disclosure {
  background-color: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 0;
  box-shadow: none;
}

.form-disclosure:hover {
  transform: none;
  box-shadow: none;
}

.form-disclosure > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  background-color: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 18px;
  font-family: var(--font-heading);
  font-size: 16px;
  color: var(--header);
  box-shadow:
    0 1px 2px rgba(74, 55, 40, 0.05),
    0 4px 14px rgba(74, 55, 40, 0.07);
}

.form-disclosure > summary::-webkit-details-marker {
  display: none;
}

.form-disclosure > summary::before {
  content: none;
}

.form-disclosure > summary::after {
  content: "";
  flex-shrink: 0;
  margin-left: auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--accent-hover);
  border-bottom: 2px solid var(--accent-hover);
  transform: translateY(-3px) rotate(45deg);
  transition: transform 0.15s ease;
}

.form-disclosure[open] > summary::after {
  transform: translateY(2px) rotate(-135deg);
}

.form-disclosure > summary:hover {
  border-color: #CFE4C8;
}

.form-disclosure > summary:focus-visible {
  outline: 2px solid var(--accent-hover);
  outline-offset: 2px;
}

.form-disclosure .disclosure-close {
  display: none;
}

.form-disclosure[open] .disclosure-open {
  display: none;
}

.form-disclosure[open] .disclosure-close {
  display: inline;
}

.form-disclosure > form {
  margin-top: 20px;
}

@media (prefers-reduced-motion: reduce) {
  .form-disclosure > summary::after {
    transition: none !important;
  }
}

/* =========================================================
   日本語の改行制御（2026-08-01）
   - 最終行に1〜2文字だけ残る「取り残され」を減らす
   - 未対応ブラウザでは単に無視され、現状と同じ表示になる
   ========================================================= */

/* サイト全体: 日本語の禁則を厳密に扱う
   （長音符「ー」や小書き仮名「ゃゅょっ」が行頭に来るのを防ぐ） */
html {
  line-break: strict;
}

/* 本文・箇条書き・説明文: 最終行が極端に短くなるのを避ける */
p,
li,
dd,
summary,
figcaption,
blockquote,
.step-desc,
.tl-desc,
.tl-note,
.choice-desc,
.next-desc,
.note-box,
.app-cat > span {
  text-wrap: pretty;
}

/* 見出しと、短文を狭い枠に入れている部品: 行の長さを均す
   （.kumi・.chip・.column-title・.price-label などは
     inline-block／flexアイテムで自前のブロックを作るため、
     親ではなくこの要素自身に指定する必要がある） */
h1,
h2,
h3,
h4,
.fv-eyebrow .kumi,
.fv-main h1 .kumi,
.chip,
.card,
.column-title,
.next-title,
.mini-step-text,
.price-label,
.group-heading,
.app-cat-name {
  text-wrap: balance;
}

/* 上乗せ: Chromium系（Chrome / Edge / Android Chrome）だけで効く文節改行。
   iOS Safari・Firefoxは未対応で、その場合は上の指定だけが働く。
   .age-body .card は <wbr> で明示制御しているため、ここには含めない。 */
h1,
h2,
h3,
h4,
.fv-eyebrow .kumi,
.fv-main h1 .kumi,
.chip,
.column-title,
.next-title,
.mini-step-text,
.price-label,
.group-heading,
.app-cat-name {
  word-break: auto-phrase;
}

/* 年齢別セクションのカード見出しは、HTMLに入れた <wbr>（文節の切れ目）
   でだけ折り返す。文節が枠に入りきらないときだけ、
   overflow-wrap: anywhere が保険として働く（横スクロール・見切れ防止）。 */
.age-body .card,
.choice-card .choice-desc,
.fv-lead {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* フッターの支援者向け導線（2026-08-01）
   保護者向けHPの読者はほぼ全員が保護者のため、ヘッダーのメニューには足さず
   フッターの1行だけに留める（2026-07-26決定）。Xのアイコンと紛れないよう、
   アイコンではなく文字リンクにしている。 */
.footer-note {
  margin: 0 0 12px;
  font-size: 13px;
}

.footer-note .footer-note-label {
  margin-right: 10px;
  opacity: 0.8;
}

.footer-note a {
  color: #FFFFFF;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  padding-bottom: 2px;
}

.footer-note a:hover,
.footer-note a:focus-visible {
  color: #FFE3C7;
  border-bottom-color: #FFE3C7;
}

/* 本文も文節で折り返す（2026-08-01）
   本人指摘「そんなは、そんなで改行してほしい」。text-wrap: pretty は
   最終行の短さしか整えないため、語の途中で割れるのは防げない。
   auto-phrase はChromium系のみ有効で、未対応ブラウザでは無視される
   （＝これまでと同じ表示に戻るだけで、崩れることはない）。
   iOS Safariでも効かせたい箇所は、HTML側に <wbr> を打って keep-all と併用する。 */
p,
li,
dd,
summary,
figcaption,
blockquote,
.step-desc,
.tl-desc,
.tl-note,
.choice-desc,
.next-desc,
.note-box,
.app-cat > span {
  word-break: auto-phrase;
}

/* 名前の由来は本人の文章で、枠が狭く割れやすい。
   HTMLに打った <wbr> の位置でだけ折り返す（全ブラウザで効く）。 */
.story-text p {
  word-break: keep-all;
  overflow-wrap: anywhere;
}