/* ============================================================
   トップ(index.html と試作 _preview_top_v2.html)が読み込む。2026-10-30 夕に試作から本番へ反映
   ガイドライン点検の改善 2〜6・9 と、同じ考え方をPCにも当てたもの。
   クラス .next はトップの body にだけ付いている
   ============================================================ */

/* ---------- 2. 開院前であることを最初の画面で ---------- */
.next .hero-open { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 14px 0 10px; }
.next .hero-open-date { display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border-radius: 999px; background: #2E5847; color: #FCFAF6; font-weight: 700; font-size: 15px; letter-spacing: .03em; }
.next .hero-open-sub { font-size: 14.5px; font-weight: 700; color: #2E5847; }

/* ---------- 3. LINEでできること（ボタンのすぐ下） ---------- */
.next .line-benefit { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 4px; }
.next .line-benefit li { position: relative; padding-left: 24px; font-size: 15px; line-height: 1.6; color: #34443A; }
.next .line-benefit li::before { content: ""; position: absolute; left: 2px; top: .38em; width: 14px; height: 14px; border-radius: 50%; background: #06A54B; }
.next .line-benefit li::after { content: ""; position: absolute; left: 6px; top: calc(.38em + 3px); width: 4px; height: 7px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); }

/* ---------- 4. LINEでの相談と、医院での初診相談を分ける ---------- */
.next .cns-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 22px 0 24px; text-align: left; }
.next .cns-col { background: #fff; border: 1px solid var(--greige); border-radius: 18px; padding: 18px 20px 16px; }
.next .cns-col--now { border-color: rgba(6, 165, 75, .45); box-shadow: 0 0 0 3px rgba(6, 165, 75, .08); }
.next .cns-col-h { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; font-size: 17px; font-weight: 700; color: #2E5847; }
.next .cns-col-when { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; font-size: 13px; font-weight: 700; background: #06A54B; color: #fff; }
.next .cns-col--visit .cns-col-when { background: #8A6A3E; }
.next .cns-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.next .cns-col li { position: relative; padding-left: 18px; font-size: 15.5px; line-height: 1.65; }
.next .cns-col li::before { content: ""; position: absolute; left: 3px; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: #C9B48A; }
.next .cns-col-note { margin: 10px 0 0; font-size: 14px; color: #5B6B60; }
@media (max-width: 767px) { .next .cns-two { grid-template-columns: 1fr; gap: 12px; } }

/* ---------- 5. 押せる範囲を44px以上に（見た目はほぼ同じ） ---------- */
.next main a.link-underline:only-child, .next .doctor-body > a.link-underline, .next .insta-handle a { display: inline-block; padding-top: 10px; padding-bottom: 10px; }
.next .notice-mark { display: inline-block; padding: 12px 6px; margin: -12px -4px; }

/* ---------- 6. 判断に必要な補足を読みやすく ---------- */
.next .cta-reply { font-size: 15px; opacity: 1; color: #34443A; }
.next .price-note { font-size: 15px; line-height: 1.75; }
.next .dg-card figcaption span { font-size: 14.5px; }
.next .stats-note { font-size: 12.5px; }
.home.v2.next main:is(main, #_) #flow .flow-grid p { font-size: 13.5px; }

/* 9. 診療カレンダーのタブは、アクセスページでも使うので style.css へ移した */

/* ---------- PC：スマホと同じ考え方の並び（背景を交互に） ---------- */
/* 並び：最初の画面→信頼の帯→大人/子ども→症例→歯並び→矯正の種類→院長→矯正専門(深緑)→選ばれる理由
   →シミュレーション→相談→写真帯・実績→治療の流れ→料金→… */
@media (min-width: 768px) {
  .home.next main#main > :is(.audience-split, #symptoms, #doctor, #reason, #flow, #worry, #access, #blog-teaser, #_) { background-color: #FCFAF6; }
  .home.next main#main > :is(#case, #treatment, #simulation, #price, #faq, #area, #instagram, #_) { background-color: #F3EFE8; }
}

/* ---------- PCにも「矯正は、矯正専門医院で。」の手書きの帯（最初の画面のすぐ下） ---------- */
@media (min-width: 768px) {
  .next .sp-specialty--both { display: block; background: #EAF1DC; border-top: 1px solid #DCE7C6; border-bottom: 1px solid #DCE7C6; }
  .next .sp-specialty--both .sp-specialty-title { margin: 0; padding: 26px 24px 28px; text-align: center; font-size: 0; line-height: 0; }
  .next .sp-specialty--both .sp-specialty-hand { position: relative; display: inline-block; width: min(62vw, 620px); }
  .next .sp-specialty--both .sp-specialty-hand img { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
  .next .sp-specialty--both .sp-specialty-hand::before { content: ""; position: absolute; left: 31%; right: 13%; bottom: 2%; height: 38%; z-index: 0;
    background: rgba(232, 200, 120, .55); border-radius: 40% 60% 55% 45% / 60% 40% 60% 40%; transform: rotate(-1deg); }
}

/* ---------- 「矯正だけを、毎日診ている医院です」の番号(01〜03)をすべて左上にそろえる ---------- */
.home.next .specialty-item:nth-child(even) .sp-num { right: auto; left: -14px; }

/* ---------- オープニング：PCはほかの情報も見えているので、ゆっくり約6秒で書き上げる ---------- */
@media (min-width: 768px) {
  .fv-go .hero-badge-img .badge-text { animation: writeInM 2s cubic-bezier(.55,.02,.42,1) .2s forwards; }
  .fv-go .hero-h1-write .h1-l1 { animation: writeInM 1.5s cubic-bezier(.45,.05,.35,1) 2.1s forwards; }
  .fv-go .hero-h1-write .h1-l2 { animation: writeInM 1.5s cubic-bezier(.45,.05,.35,1) 3.35s forwards; }
  .fv-go .hero-badge-img .badge-frame path { animation: drawFrame 1.2s cubic-bezier(.4,.06,.35,1) 4.8s forwards; }
  .fv-go .hero-h1-write .h1-kw { animation: fvFadeIn .8s ease 5.4s forwards; }
}

/* 2026-11-05 地域の見出し（千里丘・摂津市の矯正歯科）をキャッチの下へ。「矯正専門医院で／納得してから…」の文の途中に入らないように */
.hero-h1-write .h1-kw { margin: 14px 0 0; }