/* 10/19 SP修正（園田さま 修正シート） */

/* ヘッダーをスクロールしても上部に固定 */
.site-header { position: sticky; top: 0; z-index: 50; }

/* FVの区切り線は SP のみ */
.hero-rule { display: none; }

@media (max-width: 768px) {
  /* ① FV：文章を中央・中央揃え、「精密根管治療」のデザイン変更（白文字のまま） */
  .hero-inner { text-align: center; padding-top: 40px; }
  .hero-kicker { font-size: 21px; line-height: 1.7; }
  .hero-kicker span { font-size: 21px; margin-top: 2px; }
  .hero-rule { display: block; width: 44px; height: 1px; margin: 18px auto 0; background: #fff; opacity: .85; }
  .hero h1 { font-size: clamp(36px, 12vw, 54px); display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; line-height: 1.3; white-space: nowrap; }
  .hero-sub { position: relative; display: inline-block; font-size: .62em; letter-spacing: .08em; padding: 0 4px; }
  .hero-sub::before,
  .hero-sub::after {
    content: '';
    position: absolute;
    top: 50%;
    border-radius: 50%;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(circle at 35% 35%, #ffffff55, #ffffff1a 60%, #ffffff08 100%);
    box-shadow: inset 0 0 0 1px #ffffff40;
  }
  .hero-sub::before { width: 2.3em; height: 2.3em; left: -.55em; transform: translateY(-50%); }
  .hero-sub::after { width: 1.7em; height: 1.7em; left: .9em; transform: translateY(-50%); }
  .hero-main { font-size: 1em; letter-spacing: .06em; }

  /* ③ お悩みのカード：色はそのまま、角を丸く */
  .concern-cards li { background-image: url('../images/concern-frame-round.svg'); border-radius: 14px; }

  /* ④ セカンドビュー：3つの治療を枠で囲む */
  .treatment-types li { border: 3px solid #b7dbe1; box-shadow: 0 0 0 1px #fff inset; }

  /* ⑦ 症例：写真・説明文を表の上に */
  .case { display: flex; flex-direction: column; }
  .case-columns { display: contents; }
  .case-title { order: 1; }
  .case-image { order: 2; }
  .case-description { order: 3; margin-top: 18px; margin-bottom: 22px; }
  .case-data { order: 4; }

  /* ⑧ 保険診療・自由診療を画面内に左右並びで */
  .comparison .container { width: calc(100% - 24px); }
  .comparison-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; row-gap: 10px; }
  .comparison-column, .comparison-column ol { display: contents; }
  .insured .column-title, .insured ol > li { grid-column: 1; }
  .private .column-title, .private ol > li { grid-column: 2; }
  .column-title { grid-row: 1; margin: 0; padding: 12px 4px; font-size: 18px; }
  .comparison-column li:nth-child(1) { grid-row: 2; }
  .comparison-column li:nth-child(2) { grid-row: 3; }
  .comparison-column li:nth-child(3) { grid-row: 4; }
  .comparison-column li:nth-child(4) { grid-row: 5; }
  .comparison-column li:nth-child(5) { grid-row: 6; }
  .comparison-column li:nth-child(6) { grid-row: 7; }
  .comparison-column li { padding: 14px 10px; margin: 0; }
  .comparison-item-heading { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
  .number { width: 34px; height: 34px; font-size: 21px; }
  .comparison-item-heading h5 { font-size: 15px; line-height: 1.55; letter-spacing: 0; }
  .comparison-column p { font-size: 13px; line-height: 1.7; letter-spacing: 0; }

  /* ⑨ CTA：「精密根管治療」を色変更＋下線 */
  .cta-title .nowrap {
    display: inline-block;
    margin-top: 4px;
    padding: 0 10px;
    font-size: 1.35em;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.5;
    color: var(--gold);
    background: linear-gradient(transparent 68%, #ead9ae 68%, #ead9ae 92%, transparent 92%);
    border-radius: 4px;
  }
}

/* デメリット欄：点の位置をそろえる */
.case-risks li { position: relative; padding-left: 1em; }
.case-risks li::before { content: '・'; position: absolute; left: -.1em; top: 0; }