/* ロプラ サービスサイト — スマホ版（幅760px以下）
   PCの部品を縮めて積むのではなく、スマホで読む・指でめくる・親指で押す前提で、区画ごとに組み直したもの。
   基準はバクラク請求書受取のスマホ表示（左寄せの大きな見出し・要素を絞った製品画面・区画ごとの資料請求）。
   base / sections / mocks の後に読む。760px以下の規則はこのファイルだけに置く（ほかの3ファイルには置かない） */

/* スマホだけで使う部品は、PCでは出さない */
.m-steps, .m-menu-btn, .m-menu { display: none; }

@media (max-width: 760px) {
  :root { --header-h: 56px; }
  body { font-size: 15px; line-height: 1.8; }
  .wrap, .wrap--narrow { width: calc(100% - 32px); }
  .pc { display: none; }
  .sp { display: inline; }

  /* ===== 共通: 区画・見出し・ボタン ===== */
  .sec { padding: 56px 0; }
  .sec-head, .sec-head[data-split] { display: block; margin-bottom: 24px; text-align: left; }
  .en { margin-bottom: 10px; padding: 1px 10px; font-size: 11.5px; }
  .h2 { font-size: 24px; line-height: 1.45; letter-spacing: 0.02em; }
  .sec-head .lead, .sec-head[data-split] .lead { margin: 12px 0 0; max-width: none; font-size: 14px; line-height: 1.8; }
  .sec-head .lead small { margin-top: 6px; font-size: 12px; }
  .source, .source--center { margin-top: 14px; text-align: left; font-size: 11.5px; }
  .btn--lg { width: 100%; min-height: 58px; padding: 6px 44px 6px 20px; font-size: 16.5px; }
  .btn--lg small { font-size: 10.5px; }
  .btn__arrow { right: 20px; }
  .cta-pair, .cta-band { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 0; }
  .cta-band { margin-top: 32px; }
  /* 資料請求のボタンには、資料の小さな表紙を添える（何が届くかが分かる） */
  .btn--lg[data-cta="doc"] { padding-left: 64px; }
  .btn--lg[data-cta="doc"]::before { content: ""; position: absolute; left: 22px; top: 50%; width: 28px; height: 36px; margin-top: -18px; border-radius: 2px; background: linear-gradient(var(--brand), var(--brand)) 0 0 / 100% 11px no-repeat, linear-gradient(var(--line-cool), var(--line-cool)) 5px 16px / 18px 2px no-repeat, linear-gradient(var(--line-cool), var(--line-cool)) 5px 21px / 14px 2px no-repeat, linear-gradient(var(--sun), var(--sun)) 5px 28px / 10px 3px no-repeat, #fff; box-shadow: 0 3px 8px rgba(10, 20, 60, 0.25), 4px -3px 0 -1px #fff, 4px -3px 0 0 var(--indigo-100); transform: rotate(-6deg); }

  /* ===== ヘッダー: ロゴ・資料請求・メニュー ===== */
  .site-header { box-shadow: 0 1px 0 rgba(26, 34, 56, 0.07); }
  .site-header__inner { gap: 10px; }
  .logo__img { height: 24px; }
  .logo__desc { display: none; }
  .site-header__cta { margin-left: auto; }
  .site-header__cta .btn--line { display: none; }
  .site-header__cta .btn { min-height: 36px; padding: 4px 14px; font-size: 12.5px; box-shadow: none; }
  .m-menu-btn { display: grid; place-content: center; gap: 5px; width: 40px; height: 40px; margin-right: -8px; padding: 0; border: 0; background: none; cursor: pointer; }
  .m-menu-btn i { display: block; width: 20px; height: 2px; border-radius: 1px; background: var(--ink); transition: transform 0.3s var(--ease), opacity 0.2s; }
  .m-menu-btn[aria-expanded="true"] i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .m-menu-btn[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
  .m-menu-btn[aria-expanded="true"] i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .m-menu { position: fixed; inset: var(--header-h) 0 auto; z-index: 49; display: block; max-height: calc(100dvh - var(--header-h)); overflow-y: auto; padding: 8px 16px calc(20px + env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 24px 40px rgba(26, 34, 56, 0.18); }
  .m-menu[hidden] { display: none !important; }
  .m-menu nav a { display: flex; align-items: center; justify-content: space-between; padding: 15px 4px; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 700; text-decoration: none; }
  .m-menu nav a::after { content: ""; width: 7px; height: 7px; border-top: 2px solid var(--brand); border-right: 2px solid var(--brand); transform: rotate(45deg); }
  .m-menu__cta { display: grid; gap: 10px; margin-top: 18px; }

  /* ===== 最初の画面: 写真と実際の評価レポート → 見出し → 3つの約束 → ボタン（明るい地） ===== */
  .fv { padding: var(--header-h) 0 36px; background: #fff; color: var(--ink); }
  .fv::before, .fv::after { display: none; }
  .fv__inner { display: flex; flex-direction: column; gap: 0; }
  .fv__copy { display: contents; }
  .fv__visual { order: 1; min-height: 0; height: 330px; width: auto; max-width: none; margin: 0 -16px; }
  .fv__photo { inset: 0 0 34px 0; border-radius: 0; clip-path: none; }
  .fv__photo img { object-position: 64% 26%; }
  .fv__photo::after { display: block; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 62%, #fff 100%); }
  .fv__shot { left: 16px; right: auto; bottom: 0; width: 78%; padding: 0; border-radius: 14px; box-shadow: 0 18px 40px rgba(10, 20, 60, 0.22), 0 0 0 1px var(--line); }
  .fv__shot img { aspect-ratio: 2.25; object-fit: cover; object-position: 50% 36%; border-radius: 14px; }
  .fv__shot-bar, .fv__shot--sub { display: none; }
  .fv__shot-label { top: -12px; left: 12px; right: auto; padding: 2px 10px; font-size: 11px; }
  .fv__cat { order: 2; align-self: flex-start; margin: 24px 0 12px; padding: 2px 10px; border-radius: 4px; background: var(--indigo-50); color: var(--brand); font-size: 12px; }
  .fv__title { order: 3; font-size: 30px; line-height: 1.36; letter-spacing: 0.01em; }
  .fv__badges { order: 4; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: none; margin: 18px 0 20px; }
  .fv__badges li { flex-direction: column; justify-content: flex-start; gap: 6px; padding: 11px 4px 10px; border-radius: 12px; background: var(--paper-2); font-size: 11.5px; line-height: 1.45; text-align: center; white-space: normal; }
  .fv__badges svg { width: 20px; height: 20px; }
  .fv .cta-pair { order: 5; }
  .fv .btn--lg { padding-right: 44px; }
  .fv .btn--white { border-color: var(--brand); }
  .fv__sub { order: 6; margin-top: 20px; color: var(--ink-2); font-size: 14px; line-height: 1.85; }

  /* ===== 信頼の材料: 1行を横にめくる ===== */
  .trust__inner { flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; gap: 8px; width: auto; margin: 0; padding: 12px 16px; overflow-x: auto; scrollbar-width: none; font-size: 12.5px; }
  .trust__inner::-webkit-scrollbar { display: none; }
  .trust__inner li { flex: none; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--paper-2); white-space: nowrap; }
  .trust__inner svg { width: 16px; height: 16px; }
  .trust__inner a { border-bottom: 0; }

  /* ===== お悩み: アイコンと文の一覧 ===== */
  .worries { display: block; overflow: hidden; border-radius: 18px; background: #fff; box-shadow: var(--shadow-sm); }
  .worry { grid-template-columns: 42px minmax(0, 1fr); align-items: center; justify-items: start; gap: 14px; padding: 16px 18px; border-radius: 0; box-shadow: none; text-align: left; }
  .worry + .worry { border-top: 1px solid var(--line); }
  .worry__ico { width: 42px; height: 42px; }
  .worry__ico svg { width: 22px; height: 22px; }
  .worry p { font-size: 14.5px; line-height: 1.65; text-wrap: pretty; }
  .solve-arrow { margin-top: 30px; }
  .solve-arrow::before { border-left-width: 24px; border-right-width: 24px; border-top-width: 16px; }
  .solve-arrow p { font-size: 20px; line-height: 1.55; }

  /* ===== 機能の4手順: 上の切り替えと横にめくるカード。製品画面の見本は要素を絞る ===== */
  .m-steps { position: sticky; top: var(--header-h); z-index: 20; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 0 -16px 14px; padding: 8px 16px; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(8px); }
  .m-steps button { display: grid; padding: 6px 2px; border: 0; border-radius: 10px; background: var(--paper-2); color: var(--ink-2); font-size: 11.5px; font-weight: 700; line-height: 1.35; cursor: pointer; transition: background-color 0.25s, color 0.25s; }
  .m-steps button b { font-family: var(--font-num); font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; color: var(--brand); }
  .m-steps button[aria-selected="true"] { background: var(--brand); color: #fff; }
  .m-steps button[aria-selected="true"] b { color: var(--lime); }
  .points { display: grid; align-items: start; grid-auto-flow: column; grid-auto-columns: 88%; gap: 12px; margin: 0 -16px; padding: 4px 16px 12px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none; overscroll-behavior-x: contain; transition: height 0.35s var(--ease); }
  .points::-webkit-scrollbar { display: none; }
  .point { grid-template-columns: minmax(0, 1fr); scroll-snap-align: start; border-radius: 20px; box-shadow: 0 0 0 1px var(--line), var(--shadow-sm); }
  .point[data-reveal] { opacity: 1; transform: none; }
  .point__text { min-height: 0; gap: 8px; padding: 20px 20px 18px; }
  .point__no { padding: 0 8px; font-size: 11px; }
  .point__text h3 { font-size: 18.5px; line-height: 1.5; }
  .point__text p { font-size: 13.5px; line-height: 1.8; }
  .point__visual { place-items: start stretch; padding: 16px 14px 18px; }
  .point__visual > * { max-width: none; }
  .app-window { border-radius: 16px; box-shadow: var(--shadow-sm); }
  .app-window__bar { padding: 9px 14px; background: #fff; font-size: 11.5px; color: var(--ink-2); }
  .app-window__bar i { display: none; }
  .app-window__bar span { margin-left: 0; }
  /* STEP 1: 商材の説明は省き、必須行動・禁止事項・合格条件の3つだけ */
  .crit { gap: 8px; padding: 14px; }
  .crit > .crit__field:nth-child(2) { display: none; }
  .crit__head { font-size: 14.5px; }
  .crit__field { padding: 8px 10px; font-size: 12.5px; }
  /* STEP 2 */
  .call-mock__body { grid-template-columns: 104px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .call-mock__face { aspect-ratio: 3 / 4; }
  .call-mock__face span { left: 6px; right: 6px; bottom: 6px; padding: 3px 6px; font-size: 9.5px; }
  .call-mock__side { gap: 8px; font-size: 11.5px; }
  /* STEP 3: 会話の記録は省き、判定と根拠の発言だけを見せる（根拠の発言は各行に引用で出ている） */
  .evi { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 14px; border-radius: 16px; box-shadow: var(--shadow-sm); }
  .evi__log, .evi__link { display: none; }
  .evi__list { gap: 8px; }
  .evi__cap { margin-bottom: 0; }
  .evi-row { padding: 10px; font-size: 12px; }
  .evi-row b { font-size: 13px; }
  .evi-verdict { padding: 9px 12px; }
  .evi-verdict b { font-size: 16px; }
  /* STEP 4 */
  .queue { padding: 4px 12px 10px; }
  .queue li { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 12px 4px; font-size: 13px; }
  .q-date { display: none; }

  /* そのほかの機能: 名前だけの一覧にして、押すと説明が開く */
  .func { margin-top: 40px; }
  .func__title { margin-bottom: 14px; font-size: 18px; text-align: left; }
  .func__grid { display: block; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
  .sec:not(.sec--tint) .func__grid li, .func__grid li { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 14px 44px 14px 16px; border-radius: 0; background: #fff; box-shadow: none; cursor: pointer; }
  .func__grid li + li { border-top: 1px solid var(--line); }
  .func__grid li::after { content: ""; position: absolute; right: 20px; top: 22px; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform 0.3s var(--ease); }
  .func__grid li.is-open::after { top: 25px; transform: rotate(-135deg); }
  .func__grid svg { width: 22px; height: 22px; }
  .func__grid b { font-size: 14.5px; line-height: 1.5; }
  .func__grid span { display: none; grid-column: 2; margin-top: 4px; font-size: 13px; line-height: 1.7; }
  .func__grid li.is-open span { display: block; }

  /* ===== 導入のメリット: 前後の比較は行ごとに矢印で、3つのメリットは横にめくる ===== */
  .shift { gap: 0; margin: 0 0 20px; padding: 6px 16px; }
  .shift__head { display: none; }
  .shift__row { grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr); gap: 6px 4px; padding: 14px 0; }
  .shift__head + .shift__row { border-top: 0; }
  .shift__row > span { grid-column: 1 / -1; font-size: 13.5px; }
  .shift__row > span::after { content: "導入前 → 導入後"; margin-left: 8px; font-size: 10.5px; font-weight: 700; color: var(--muted); }
  .shift__row + .shift__row > span::after { content: none; }
  .who { padding: 8px 6px; font-size: 12px; line-height: 1.5; }
  .who:last-child { grid-column: 3; position: relative; }
  .who:last-child::before { content: ""; position: absolute; left: -15px; top: 50%; margin-top: -5px; border-left: 7px solid var(--brand); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
  .merits { gap: 12px; }
  .merit { padding: 24px 20px 22px; scroll-snap-align: start; }
  .merit__no { top: 16px; right: 18px; font-size: 30px; }
  .merit__ico { width: 46px; height: 46px; margin-bottom: 14px; border-radius: 14px; }
  .merit__ico svg { width: 24px; height: 24px; }
  .merit h3 { font-size: 17px; }
  .merit p { font-size: 13.5px; line-height: 1.8; }

  /* ===== 横にめくるカード（共通） ===== */
  .swipe { display: grid !important; grid-auto-flow: column; grid-auto-columns: 84%; grid-template-columns: none !important; align-items: stretch; gap: 12px !important; margin: 0 -16px; padding: 4px 16px 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none; }
  .swipe::-webkit-scrollbar { display: none; }
  .swipe > * { scroll-snap-align: start; }
  .swipe > [data-reveal] { opacity: 1; transform: none; }
  .swipe-hint { display: flex !important; justify-content: center; align-items: center; gap: 6px; margin-top: 2px; }
  .swipe-hint i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-cool); transition: background-color 0.2s, width 0.2s; }
  .swipe-hint i.is-on { width: 18px; border-radius: 3px; background: var(--brand); }

  /* ===== 他のAIロープレとの違い: 行ごとに「主な製品」と「ロプラ」を左右に ===== */
  .cmp { border-radius: 16px; }
  .cmp__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cmp__row > span { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 6px; align-items: start; padding: 4px 12px 12px; font-size: 12px; line-height: 1.6; }
  .cmp__row > span:first-child { grid-column: 1 / -1; display: block; padding: 12px 12px 6px; font-size: 13.5px; }
  .cmp__row--head > span:first-child { display: none; }
  .cmp__row--head > span { display: flex; flex-direction: column; justify-content: center; padding: 10px 12px; font-size: 12px; }
  .cmp__row--head .cmp__us { font-size: 14px; }
  .cmp__us { box-shadow: none !important; }
  .cmp__logo { height: 16px; }
  .mk { width: 18px; height: 18px; font-size: 10px; }
  .mk svg { width: 11px; height: 11px; }
  .cmp__note { font-size: 12px; line-height: 1.7; }

  /* ===== 評価レポート: 全体の画面は出さず、4つの切り抜きを横にめくる ===== */
  .real { padding: 0; }
  .real__frame { display: none; }
  .real__crops { margin-top: 0; }
  .real__crops figure { display: block; }
  .real__crops img { width: 100%; height: 190px; object-fit: cover; object-position: left top; }
  .real__crops figcaption { padding: 10px 14px; font-size: 13.5px; }
  .cta-box { margin-top: 28px; padding: 24px 18px; border-radius: 20px; grid-template-columns: minmax(0, 1fr); }
  .cta-box::before, .cta-box .deck { display: none; }
  .cta-box__title { margin-bottom: 16px; font-size: 19px; }

  /* ===== 料金: 伺う3つを一覧に ===== */
  .prices--ask { display: block; overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
  .price, .sec--tint .price { grid-template-columns: 44px minmax(0, 1fr); justify-items: start; align-items: center; gap: 2px 14px; padding: 16px 18px; border-radius: 0; background: #fff; text-align: left; }
  .price + .price { border-top: 1px solid var(--line); }
  .price__ico { grid-row: span 2; width: 44px; height: 44px; box-shadow: none; background: var(--indigo-50); }
  .price__ico svg { width: 22px; height: 22px; }
  .price h3 { font-size: 15.5px; }
  .price p { font-size: 13px; line-height: 1.7; }
  .price-cta { margin-top: 20px; }

  /* ===== 活用シーン ===== */
  .use img { aspect-ratio: 16 / 10; }
  .use__body { padding: 16px 16px 18px; }
  .use__tag { font-size: 11.5px; }
  .use h3 { font-size: 16px; }
  .use__ex { gap: 4px 8px; padding: 10px 12px; font-size: 12.5px; }

  /* ===== 会話例: メッセージの画面のように ===== */
  .talk { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; }
  .talk__title { font-size: 24px; line-height: 1.45; margin-bottom: 12px; }
  .talk__copy p:not(.eyebrow) { font-size: 14px; }
  .talk__note { font-size: 12.5px !important; }
  .talk__chat { gap: 8px; padding: 16px 12px; border-radius: 20px; background: var(--paper-2); }
  .tb { max-width: 88%; padding: 10px 13px; font-size: 13.5px; line-height: 1.65; }
  .tb--cus { background: #fff; }
  .tb-flag { flex-wrap: wrap; gap: 6px; justify-self: stretch; font-size: 12.5px; line-height: 1.6; }

  /* ===== 導入前の確認事項 ===== */
  .checks > div { grid-template-columns: minmax(0, 1fr); }
  .checks dt, .sec--tint .checks dt { padding: 14px 16px 2px; background: #fff; font-size: 14.5px; }
  .checks dd { padding: 0 16px 14px; font-size: 13.5px; line-height: 1.75; }

  /* ===== よくあるご質問 ===== */
  .faq-list { gap: 10px; }
  .faq-list summary { padding: 16px 44px 16px 48px; font-size: 14.5px; line-height: 1.6; }
  .faq-list summary::before { left: 14px; top: 16px; width: 24px; height: 24px; font-size: 12px; }
  .faq-list summary::after { right: 18px; width: 12px; height: 12px; margin-top: -6px; background-size: 12px 2px, 2px 12px; }
  .faq-list details p { padding: 0 18px 18px 48px; font-size: 13.5px; line-height: 1.8; }

  /* ===== 導入までの流れ: 縦の道のり ===== */
  .steps4 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .step4, .sec--tint .step4 { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; align-items: start; padding: 0 0 22px; border-radius: 0; background: none; box-shadow: none; text-align: left; }
  .step4 + .step4::before { content: none; }
  .step4:not(:last-child)::after { content: ""; position: absolute; left: 23px; top: 52px; bottom: 4px; width: 2px; background: repeating-linear-gradient(180deg, var(--brand) 0 5px, transparent 5px 9px); opacity: 0.45; }
  .step4__ico { grid-row: span 3; width: 48px; height: 48px; margin: 0; background: #fff; box-shadow: 0 0 0 1.5px var(--indigo-100); }
  .step4__ico svg { width: 22px; height: 22px; }
  .step4__no { margin: 2px 0 0; font-size: 11px; }
  .step4 h3 { margin-bottom: 2px; font-size: 16px; }
  .step4 p { font-size: 13.5px; line-height: 1.7; }

  /* ===== 申込 ===== */
  .apply { padding: 56px 0 64px; }
  .apply__inner { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .apply__copy .h2 { margin-bottom: 10px; }
  .apply__copy p { font-size: 14px; }
  .deck--apply { display: none; }
  .apply-form { gap: 14px; padding: 22px 18px 20px; border-radius: 20px; }
  .field input, .field select { height: 52px; }
  .agree { gap: 10px; min-height: 44px; font-size: 14px; }
  .agree input { width: 22px; height: 22px; margin: 0; accent-color: var(--brand); }

  /* ===== フッター・下に固定する申込ボタン ===== */
  .site-footer__inner { padding: 28px 0 100px; }
  .site-footer__copy { margin-left: 0; }
  .sticky-cta { position: fixed; inset: auto 0 0; z-index: 55; display: grid; grid-template-columns: 1fr 1.7fr; gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(8px); box-shadow: 0 -1px 0 var(--line); transform: translateY(110%); transition: transform 0.4s var(--ease); }
  .sticky-cta.is-on { transform: none; }
  .sticky-cta .btn { min-height: 50px; padding: 6px 10px; border-radius: 14px; font-size: 15px; }
}