/* ============================================================
   トップのスマホ版（index.html と _preview_top_v2.html が読み込む）。2026-10-30 作り直し・同日 本番へ反映
   ★PCとスマホで並びと見せ方を分ける
   PC（ページの順番そのもの）：最初の画面→信頼の帯→大人/子ども→症例→シミュレーション→院長→選ばれる理由
       →相談→写真帯→矯正だけの医院(深緑)→矯正の種類→症状→治療の流れ→料金→不安→質問→アクセス→…
   スマホ（CSSの order で並べ替え）：最初の画面→信頼の帯→矯正専門の帯(短い版)→大人/子ども(小さいバナー)→症例
       →お悩みから探す→院長→シミュレーション(横すべり)→選ばれる理由→相談→写真帯→治療の流れ→料金→…
   ============================================================ */
.sp-only { display: none; }

/* PC（768px以上）は本番トップ(index.html)の並び・背景のまま。v2.css はスマホだけを変える（2026-10-30 本番へ反映） */

/* ---------- スマホ（767px以下） ---------- */
@media (max-width: 767px) {
  .sp-only { display: block; }
  .pc-only { display: none !important; }
  main#main { display: flex; flex-direction: column; }
  main#main > * { order: 50; }
  main#main > .hero { order: 1; }
  main#main > .trust-bar { order: 2; }
  main#main > #sp-specialty { order: 3; }
  main#main > .audience-split { order: 4; }
  /* 2026-11-06 歯並び・方法から探す → 料金の要約 → 症例 → 院長 → 理由（他AIのレビュー：料金を早く） */
  main#main > #case { order: 5; }   /* 2026-11-06 写真のインパクトがあるので、大人・子どものすぐ下に戻す（院長） */
  main#main > #find { order: 6; }
  main#main > #price { order: 7; }
  main#main > #doctor { order: 8; }
  main#main > #reason { order: 9; }
  main#main > #simulation { order: 10; }
  main#main > .cns-banner-wrap { order: 11; }
  main#main > .v3-band-group { order: 12; }
  main#main > #flow { order: 13; }
  main#main > #worry { order: 14; }
  main#main > #faq { order: 15; }
  main#main > #access { order: 16; }
  main#main > #area { order: 17; }
  main#main > #blog-teaser { order: 18; }
  main#main > #instagram { order: 19; }
  main#main > .final-cta { order: 20; }
  /* 背景：ベージュ／クリームの交互（スマホのシミュレーションは波なし） */
  .home.v2 main#main > :is(.audience-split, #find, #reason, .cns-banner-wrap, #price, #faq, #area, #instagram) { background-color: #FCFAF6; }
  .home.v2 main#main > :is(#case, #doctor, #simulation, #flow, #worry, #access, #blog-teaser) { background-color: #F3EFE8; }

  /* 矯正専門の帯（ごく短い版）：1行の見出し＋3つの要点。帯全体が「選ばれる理由」へのリンク */
  .sp-specialty { background: linear-gradient(180deg, #2E5847 0%, #22412F 100%); padding: 0; }
  .sp-specialty-in { position: relative; display: block; padding: 16px 52px 16px 20px; color: #FCFAF6; text-decoration: none; }
  .sp-specialty-title { display: block; font-family: var(--serif); font-size: 19px; font-weight: 700; line-height: 1.5; color: #FCFAF6; }
  .sp-specialty-title b { color: #DCC69E; }
  .sp-specialty-points { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  .sp-specialty-points > span { font-size: 12px; font-weight: 700; color: #D8E3D9; border: 1px solid rgba(252,250,246,.28); border-radius: 999px; padding: 3px 10px; line-height: 1.5; }
  .sp-specialty-arrow { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(252,250,246,.14); color: #FCFAF6; font-size: 16px; }

  /* シミュレーション：10/30 横スクロールをやめて元の2列に戻した */

  /* 大人／子ども：不定形の写真の小さいバナー */
  .home.v2 .audience-split { display: grid; grid-template-columns: 1fr; gap: 18px; padding: 24px 16px 28px; overflow-x: clip; }
  .home.v2 .aud-card { display: grid; grid-template-columns: 37% 1fr; align-items: center; gap: 12px; background: transparent; padding: 6px 0; }
  .home.v2 .audience-split .aud-photo, .home.v2 .aud-card--child .aud-photo { aspect-ratio: 1 / 0.86; width: 100%; margin: 0; isolation: isolate; }
  .home.v2 .aud-photo::before { inset: 8% -6% -7% 6%; }
  .home.v2 .aud-card--child .aud-photo::before { inset: 6% 6% -6% -6%; }
  .home.v2 .aud-body, .home.v2 .aud-card--child .aud-body { padding: 0; }
  .home.v2 .aud-badge { font-size: 11px; margin-bottom: 4px; }
  .home.v2 .aud-title, .home.v2 .aud-card--child .aud-title { font-size: 14.5px; line-height: 1.5; margin-bottom: 6px; letter-spacing: 0; text-wrap: balance; }
  .home.v2 .aud-lead { display: none; }
  .home.v2 .aud-btn { font-size: 13.5px; gap: 8px; padding: 0; }
  .home.v2 .aud-btn .arrow { width: 36px; height: 36px; }
}

/* ---------- お悩みから探す（スマホだけ。PCは元の「矯正の種類」「症状から探す」の段） ---------- */
.v2-find .find-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.v2-find .find-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--greige); border-radius: 14px; padding: 8px 4px 10px; color: var(--teal); font-weight: 700; font-size: 13px; text-align: center; }
.v2-find .find-tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
.v2-find .find-sub { text-align: center; font-family: var(--serif); color: var(--teal); font-size: 18px; margin: 30px 0 14px; }
.v2-find .find-menu { gap: 18px 14px; }
.v2-find .find-menu .menu-card img { box-shadow: 5px 6px 0 var(--blob-sage); }
.v2-find .find-menu .menu-card-body { padding-top: 10px; }
.v2-find .find-menu .menu-card-body h3 { font-size: 14.5px; margin-bottom: 4px; }
main:is(main, #_) .v2-find .find-menu .menu-card-body p { font-size: 13px; line-height: 1.6; margin: 0 0 6px; }
.v2-find .find-menu .menu-card-body a { font-size: 13px; }
.v2-find .find-more { text-align: center; margin: 14px 0 0; font-size: 14px; color: var(--ink-soft); }
.v2-find .find-more a { display: inline-flex; align-items: center; min-height: 44px; margin: 0 6px; color: var(--teal); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px) { .sp-specialty-points { flex-wrap: nowrap; gap: 5px; } .sp-specialty-points > span { font-size: 11.5px; padding: 3px 8px; white-space: nowrap; } }

/* ---- スマホ：「矯正は、矯正専門医院で。」の見出し → 4つの強み(信頼の帯) → 選ばれる理由へ ---- */
@media (max-width: 767px) {
  main#main > #sp-specialty { order: 2; }
  main#main > .trust-bar { order: 3; }
  main#main > .sp-trust-link { order: 3; }
  .sp-specialty { padding: 14px 20px 13px; text-align: center; }
  .sp-specialty-title { margin: 0; font-size: 19px; }
  .sp-trust-link { background: #fff; text-align: center; padding: 0 16px 16px; border-bottom: 1px solid var(--greige); }
  .sp-trust-link a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 22px; border: 1px solid var(--teal); border-radius: 999px; color: var(--teal); font-weight: 700; font-size: 14.5px; background: #fff; }
  .home.v2 .trust-bar { border-bottom: 0; }
}

/* ---- スマホ：大人／子どもをジグザグに（大人は写真が左・子どもは写真が右。写真は画面の端へ少しはみ出す） ---- */
@media (max-width: 767px) {
  .home.v2 .audience-split { gap: 6px; padding-top: 18px; }
  .home.v2 .aud-card--adult { grid-template-columns: 41% 1fr; }
  .home.v2 .aud-card--adult .aud-photo { margin-left: -16px; width: calc(100% + 16px); }
  .home.v2 .aud-card--child { grid-template-columns: 1fr 41%; }
  .home.v2 .aud-card--child .aud-photo { order: 2; margin-right: -16px; width: calc(100% + 16px); }
  .home.v2 .aud-card--child .aud-body { order: 1; align-items: flex-end; text-align: right; }
  .home.v2 .aud-card--child .aud-btn { flex-direction: row; }
  .home.v2 .aud-card--child .aud-badge { align-self: flex-end; }
}
/* 10/30 文字と写真の重なり解消：すき間を広げ、うしろの影は文字と反対側へ */
@media (max-width: 767px) {
  .home.v2 .aud-card--adult, .home.v2 .aud-card--child { column-gap: 22px; }
  .home.v2 .aud-card--adult .aud-photo::before { inset: 8% 0 -7% -8%; }
  .home.v2 .aud-card--child .aud-photo::before { inset: 6% -8% -6% 0; }
}
/* 10/30 歯並び／装置の区切りをはっきり：装置は別の帯（ベージュ）＋同じ大きさの見出し */
.v2-find .find-device { margin: 36px calc(50% - 50vw) 0; padding: 34px calc(50vw - 50%) 24px; background: #EFF3E6; }
.v2-find .find-device .find-sub { margin: 0 0 28px; font-size: clamp(24px, 3vw, 32px); }
.v2-find .find-menu .menu-card-body h3 { font-size: 17px; line-height: 1.45; margin-bottom: 6px; }
.home.v2 main#main > #find.v2-find { padding-bottom: 0; } .v2-find .find-device { padding-bottom: 48px; }
/* 10/30 治療の流れ（スマホ）：囲みなし・画面いっぱい、3つ＋2つの横並び */
@media (max-width: 767px) {
  .home.v2 #flow.komorebi-bg { margin: 0; padding: 52px 12px 48px; }
  .home.v2 #flow.komorebi-bg::before { display: none; }
  .home.v2 #flow .section-title { margin-bottom: 26px; }
  .home.v2 #flow .flow-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 0; max-width: none; margin: 0; padding: 0; background: none; border: 0; }
  .home.v2 #flow .flow-node { flex: 0 0 33.333%; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 4px; position: relative; }
  .home.v2 #flow .flow-node::before { display: block; top: 44px; left: calc(50% + 44px); width: calc(100% - 88px); height: 2px; bottom: auto;
    background: repeating-linear-gradient(90deg, rgba(31,95,91,.3) 0 6px, transparent 6px 11px); }
  .home.v2 #flow .flow-node:nth-child(3)::before, .home.v2 #flow .flow-node:last-child::before { display: none; }
  .home.v2 #flow .flow-disc { width: 88px; height: 88px; margin: 0 0 10px; border: 0; background: #fff; box-shadow: 0 8px 18px -12px rgba(31,95,91,.35); }
  .home.v2 #flow .flow-node:nth-child(even) .flow-disc { background: #fff; }
  .home.v2 #flow .flow-disc img { width: 74px; height: 74px; filter: none; }
  .home.v2 #flow .flow-num { display: inline-flex; top: -4px; left: calc(50% + 22px); transform: none; min-width: 28px; height: 28px; font-size: 13px; }
  .home.v2 #flow .flow-step { display: none; }
  .home.v2 #flow .flow-grid h3 { font-size: 15px; line-height: 1.4; margin: 0 0 4px; }
  .home.v2 main:is(main, #_) #flow .flow-grid p { font-size: 12.5px; line-height: 1.5; margin: 0; }
  .home.v2 #flow .flow-grid p a { display: none; }
  .home.v2 #flow .flow-cta { text-align: center; margin: 30px 0 0; }
  .home.v2 #flow .flow-cta a { min-height: 52px; padding: 0 30px; font-size: 16px; }
}
.v2 .nw { display: inline-block; }
/* 10/30 治療の流れ：各ステップを詳しいページへのリンクに */
.flow-link { display: contents; color: inherit; text-decoration: none; }
.flow-link::after { content: "詳しく →"; display: block; grid-column: 2; margin-top: 6px; font-size: 12.5px; font-weight: 700; color: var(--gold-ink, #8a6a3e); }
.flow-link:hover h3 { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px) {
  .home.v2 #flow .flow-grid { max-width: 560px; margin: 0 auto; }
  .home.v2 #flow .flow-link { display: flex; flex-direction: column; align-items: center; width: 100%; min-height: 44px; }
  .home.v2 #flow .flow-link > * { align-self: center; }
  .home.v2 #flow .flow-node { justify-content: flex-start; }
}
/* 10/30 「矯正は、矯正専門医院で。」の帯：深緑→若葉の淡い黄緑＋手書き（Klee One）でやわらかく */
@media (max-width: 767px) {
  .home.v2 .sp-specialty { background: #EAF1DC; border-top: 1px solid #DCE7C6; border-bottom: 1px solid #DCE7C6; }
  .home.v2 .sp-specialty-title { padding: 14px 16px 16px; text-align: center; font-family: "Klee One", var(--serif); font-weight: 600; font-size: 23px; letter-spacing: .04em; color: #2E5847; }
  .home.v2 .sp-specialty-title b { color: #2E5847; font-weight: 600; padding: 0 2px;
    background: linear-gradient(transparent 58%, rgba(232, 200, 120, .55) 58%, rgba(232, 200, 120, .55) 90%, transparent 90%); border-radius: 4px; }
}
/* 10/30 帯の文字をCodexの手書き画像に（文字を大きく）。「矯正専門医院」の下にはちみつ色のマーカー */
@media (max-width: 767px) {
  .home.v2 .sp-specialty-title { padding: 16px 16px 18px; font-size: 0; line-height: 0; }
  .home.v2 .sp-specialty-hand { position: relative; display: inline-block; width: min(100%, 400px); }
  .home.v2 .sp-specialty-hand img { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
  .home.v2 .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); }
}
.v2 .trust-link { display: contents; color: inherit; text-decoration: none; }
/* 10/30 選ばれる理由（スマホ）：6つとも見出しだけ並べ、押すと説明が開くアコーディオン */
@media (max-width: 767px) {
  .home.v2 #reason .reason-grid.is-acc { display: flex; flex-direction: column; gap: 10px; }
  .home.v2 #reason .is-acc .reason-item { display: block; padding: 0; background: #fff; border: 1px solid var(--greige); border-radius: 16px; overflow: hidden; }
  .home.v2 #reason .is-acc .reason-item::before, .home.v2 #reason .is-acc .reason-item::after { display: none; }
  .home.v2 #reason .is-acc .reason-item h3 { margin: 0; font-size: inherit; }
  .home.v2 #reason .reason-acc-btn { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 8px 14px 8px 10px; background: none; border: 0; text-align: left; cursor: pointer; font: inherit; color: var(--teal); }
  .home.v2 #reason .reason-acc-btn img { flex: 0 0 48px; width: 48px; height: 48px; margin: 0; }
  .home.v2 #reason .reason-acc-title { flex: 1; font-size: 16px; font-weight: 700; line-height: 1.45; }
  .home.v2 #reason .reason-acc-chev { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; background: #EFF3E6; position: relative; transition: transform .25s; }
  .home.v2 #reason .reason-acc-chev::before { content: ""; position: absolute; left: 50%; top: 45%; width: 7px; height: 7px; border-right: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: translate(-50%, -50%) rotate(45deg); }
  .home.v2 #reason .reason-acc-btn[aria-expanded="true"] .reason-acc-chev { transform: rotate(180deg); }
  .home.v2 #reason .reason-acc-body { padding: 0 16px 16px 70px; text-align: left; }
  .home.v2 #reason .reason-acc-body p { margin: 0 0 6px; }
  .home.v2 #reason .reason-toggle { display: none; }
}
/* 10/30 大人／子どもの「〜を見る」を大きく（写真の幅を少しだけ詰めて文字の場所をつくる） */
@media (max-width: 767px) {
  .home.v2 .aud-card--adult { grid-template-columns: 38% 1fr; }
  .home.v2 .aud-card--child { grid-template-columns: 1fr 38%; }
  .home.v2 .aud-btn { font-size: 16px; gap: 6px; white-space: nowrap; }
  .home.v2 .aud-btn .arrow { width: 38px; height: 38px; flex: 0 0 38px; }
}
@media (max-width: 359px) { .home.v2 .aud-btn { font-size: 14.5px; gap: 4px; } .home.v2 .aud-btn .arrow { width: 34px; height: 34px; flex-basis: 34px; } }

/* 2026-11-06 スマホのトップを短く：治療の流れは初診相談ページで見せる */
@media (max-width: 767px) { main#main > #flow { display: none; } }