/* 10/20 SP修正（園田さま 修正シート2）：FVに先生写真・「精密根管治療」・お悩み4つを収める（デザイン・色はそのまま、配置のみ変更） */
.section-title .concern-lead { color: inherit; text-decoration: none; }

@media (max-width: 768px) {
  /* ① FV：先生の写真を左、「精密 根管治療」を右に */
  .hero {
    height: 78vw;
    background-image: linear-gradient(180deg, #b49e70 0%, #cdbb93 22%, rgba(217,203,170,0) 52%), url('../images/hero-background.webp');
    background-size: 100% 100%, auto 72vw;
    background-position: center, -76vw 100%;
    background-repeat: no-repeat;
  }
  .hero-inner { width: 100%; padding: 5vw 3vw 0; text-align: center; }
  .hero-kicker { font-size: 5.2vw; line-height: 1.6; }
  .hero-kicker span { font-size: 5.2vw; margin-top: 0; }
  .hero-rule { width: 12vw; margin: 3vw auto 0; }
  .hero h1 {
    position: absolute;
    right: 3vw;
    top: 31vw;
    width: 50vw;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1vw;
    font-size: 11.4vw;
    line-height: 1.2;
    text-shadow: 1px 2px 6px rgba(101, 92, 73, .55);
  }
  .hero-sub { font-size: .62em; padding: 0; }
  .hero-sub::before { width: 2.2em; height: 2.2em; left: -.45em; }
  .hero-sub::after { width: 1.6em; height: 1.6em; left: .95em; }

  /* ② お悩み：FV内に収まるよう詰める。「歯を残したいとお考えの方へ」は削除 */
  .concern-lead { display: none; }
  .concerns { padding-top: 3vw; }
  .concerns .section-title { font-size: 5.4vw; line-height: 1.55; margin-bottom: 3.5vw; }
  .concern-cards { width: 100%; gap: 2.7vw; }
  .concern-cards li {
    aspect-ratio: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    min-height: min(27vw, 150px);
    padding: 18px 2.5vw;
    font-size: min(3.55vw, 18px);
    line-height: 1.36;
    /* 枠は今と同じ二重線・角丸・上下の飾り線（縦を詰めても崩れないようCSSで描く） */
    background: #fff9;
    border: 1px solid #906c2b;
    border-radius: 14px;
    outline: 2px solid #906c2b;
    outline-offset: -7px;
  }
  .concern-cards li::before,
  .concern-cards li::after {
    content: '';
    position: absolute;
    left: 10%;
    right: 10%;
    height: 3px;
    background:
      radial-gradient(ellipse 4px 2.5px at 50% 50%, #906c2b 90%, transparent 100%),
      linear-gradient(90deg, rgba(144,108,43,0) 0%, #906c2b 48%, transparent 48%, transparent 52%, #906c2b 52%, rgba(144,108,43,0) 100%) center / 100% 1.5px no-repeat;
  }
  /* Safariで文字の幅が狭くならないよう、中の文字は枠いっぱいの幅に */
  .concern-cards li > span { display: block; width: 100%; letter-spacing: 0; }
  .concern-cards li::before { top: 9px; }
  .concern-cards li::after { bottom: 9px; }
}