/* トップページのスマホ表示（767px以下）。
   参考LP（DS.INSIGHT）から借りたのは「組み立て」だけ: 中央ぞろえの見出し、面の交互、カード型のよくある質問、
   料金カード、最後の呼びかけの帯、画面下に追いかけるボタン。
   色・写真・ボタンは当サービスのもの（青緑のボタン、写真は結果の添え物として小さく見せる）。ピンクのバッジ・英字ラベル・V字の区切りは使わない。
   PCの見た目は変えない。ここの指定はすべて body.lp と 767px 以下に閉じる。書体は増やさない（和文ゴシック1系統＋数字だけ Outfit）。 */

.lp-sp, .price-chip, .lp-final-lead, .lp-sticky { display: none; }

@media (max-width: 767px) {
  .lp {
    --lp-mint-bg: #EDF8F6;
    --lp-photo-h: 470px;
  }

  /* ── 面の交互 ── */
  .lp main > .section { background: var(--public-surface); padding-top: 44px; padding-bottom: 44px; }
  .lp main > .lp-mint { background: var(--lp-mint-bg); }
  /* ミント地の上の小さい文字は、白地より少し濃くして AA（4.5:1）を満たす */
  .lp main > .lp-mint .sub, .lp main > .lp-mint .container > .sub { color: #556878; }
  .lp main > .lp-mint .sample-eyebrow { color: #066975; }

  /* ── 見出し: 中央ぞろえ ── */
  .lp main .section-title { justify-content: center; text-align: center; font-size: 21px; line-height: 1.5; margin-bottom: 14px; }
  .lp .lp-big { font-family: var(--font-num); font-size: 40px; line-height: 1; color: var(--public-primary); margin: 0 2px; vertical-align: -3px; }
  .lp #sample .sample-eyebrow, .lp #help-feature .sample-eyebrow { text-align: center; }
  .lp #sample .sample-lead, .lp #genres .container > .sub, .lp .help-feature-lead { text-align: center; }
  .lp .lp-sp { display: flex; }

  /* ── ボタン: 角の丸い青緑（いつものボタン）。副は白地に青緑の線 ── */
  .lp main .btn-primary, .lp .lp-btn-sub, .lp .lp-sticky .btn {
    position: relative; width: 100%; min-height: 54px; padding: 12px 44px;
    border-radius: 999px; font-size: 16px; font-weight: 700;
  }
  .lp main .btn-primary, .lp .lp-sticky .btn { background: var(--public-primary); color: #fff; box-shadow: 0 8px 20px rgba(8,126,139,.28); }
  .lp .lp-btn-sub { min-height: 50px; background: #fff; color: var(--public-primary); border: 2px solid var(--public-primary); }
  .lp main .btn-primary .icon { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); }

  /* ── ファーストビュー: 空の写真はヒーロー全体に敷いたまま、白い膜で薄めて背景に下げる。見出しは濃い色 ── */
  .lp .hero-wide { padding: 0 0 36px; background: var(--public-surface); }
  .lp .hero-wide .hero-bg, .lp .hero-wide .hero-bg img { display: block; inset: 0; height: 100%; object-position: 30% 100%; }
  .lp .hero-wide .hero-bg img { filter: saturate(.85); }
  .lp .hero-wide::before {
    display: block; inset: 0; height: auto;
    background: linear-gradient(180deg, rgba(255,255,255,.86) 0%, rgba(255,255,255,.66) 26%, rgba(255,255,255,.30) 50%, rgba(255,255,255,.50) 70%, rgba(255,255,255,.85) 88%, #fff 100%);
  }
  .lp .hero-wide .hero-grid { padding-top: 30px; gap: 0; }
  .lp .hero-wide .hero-copy { display: contents; }
  .lp .hero-wide h1 { order: 1; text-align: center; font-size: 26px; line-height: 1.5; color: var(--public-text); text-shadow: none; }
  .lp .hero-wide .hero-lead { order: 2; text-align: center; color: var(--public-text); font-size: 14px; font-weight: 500; margin: 10px 0 0; text-shadow: none; }
  .lp .hero-wide .hero-preview { order: 3; display: flex; justify-content: flex-end; margin: 26px 0 26px; }
  .lp .hero-wide .preview-card { width: 214px; padding: 16px 16px 12px; box-shadow: 0 12px 28px rgba(10,40,70,.20); }
  .lp .hero-wide .preview-card .preview-tier { margin-bottom: 10px; }
  .lp .hero-wide .preview-card .preview-rows { padding-top: 10px; gap: 6px; }
  .lp .hero-wide .preview-card .preview-row { font-size: 12px; }
  .lp .hero-wide .preview-caption { text-align: right; margin-top: 6px; }
  .lp .hero-wide .btn-primary { order: 4; }
  .lp .hero-wide .lp-btn-sub { order: 5; margin-top: 12px; }
  .lp .hero-wide .assurances { order: 6; margin: 18px 0 0; }

  /* ── 分かる3つ: アイコンつきのカード ── */
  .lp #about .grid-3 { gap: 14px; margin-top: 18px; }
  .lp .value-card { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 18px; }
  .lp .value-card .icon-lg {
    grid-row: span 2; width: 48px; height: 48px; margin: 0; padding: 12px; border-radius: 50%;
    background: var(--public-primary-soft); color: var(--public-primary);
  }
  .lp .value-card h3 { font-size: 17px; margin-bottom: 4px; }
  .lp .value-card .sub { font-size: 14px; }

  /* ── 結果の見本 ── */
  .lp .sample-cta { text-align: center; }
  .lp .pdf-callout { background: #fff; }

  /* ── よくある質問: 白いカード、左に Q、右に＋ ── */
  .lp #faq { background: var(--public-bg); }
  .lp .faq {
    position: relative; margin-bottom: 12px; padding: 0; border: 0;
    background: #fff; border-radius: 12px; box-shadow: 0 2px 10px rgba(23,50,77,.07);
  }
  .lp .faq summary { list-style: none; position: relative; padding: 16px 46px 16px 48px; font-size: 15px; font-weight: 700; line-height: 1.6; }
  .lp .faq summary::-webkit-details-marker { display: none; }
  .lp .faq summary::before {
    content: 'Q'; position: absolute; left: 16px; top: 16px;
    font-family: var(--font-num); font-size: 18px; font-weight: 700; line-height: 1.35; color: var(--public-primary);
  }
  .lp .faq summary::after {
    content: ''; position: absolute; right: 18px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%);
    background:
      linear-gradient(var(--public-primary), var(--public-primary)) center / 14px 2px no-repeat,
      linear-gradient(var(--public-primary), var(--public-primary)) center / 2px 14px no-repeat;
  }
  .lp .faq[open] summary::after { background: linear-gradient(var(--public-primary), var(--public-primary)) center / 14px 2px no-repeat; }
  .lp .faq p { margin: 0; padding: 0 18px 16px 48px; }
  .lp #faq .faq-more { text-align: center; font-size: 14px; }

  /* ── 料金: 上に写真、下に大きな数字 ── */
  .lp .price-card { display: flex; flex-direction: column; padding: 0 0 22px; overflow: hidden; }
  .lp .price-card .price-photo { display: block; order: -1; }
  .lp .price-photo img { height: auto; aspect-ratio: 21 / 9; border-radius: 0; object-position: center 60%; -webkit-mask-image: none; mask-image: none; }
  .lp .price-copy { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 22px 20px 0; }
  .lp .price-card h2 { order: -1; font-size: 20px; margin-bottom: 10px; }
  .lp .price-figure { justify-content: center; margin-bottom: 8px; }
  .lp .price-figure .price-amount { font-size: 72px; }
  .lp .price-chip { display: inline-block; margin: 0 0 12px; padding: 3px 12px; border-radius: 999px; background: var(--public-primary-soft); color: var(--public-primary); font-size: 13px; font-weight: 700; }
  .lp .price-card .price-points { align-self: stretch; text-align: left; margin: 14px 0 20px; }

  /* ── 最後の呼びかけ: 白いカード。上端に太いバー、灯台は細い帯で添える ── */
  .lp main > .lp-final { padding: 36px 0 44px; background: var(--lp-mint-bg); }
  .lp .lp-final .container.cta-band {
    min-height: 0; margin: 0 16px; width: auto; align-items: stretch; text-align: center;
    justify-content: flex-start; gap: 12px; padding: 0 20px 24px; border-radius: 20px; background: var(--public-surface);
  }
  .lp .lp-final .cta-band::before { height: 10px; }
  .lp .lp-final .cta-band picture { display: block; order: -1; margin: 0 -20px 8px; }
  .lp .lp-final .band-photo {
    position: static; display: block; width: 100%; height: 132px; object-position: center 22%;
    -webkit-mask-image: none; mask-image: none;
  }
  .lp .lp-final h2 { color: var(--public-text); font-size: 21px; max-width: none; }
  .lp .lp-final .lp-final-lead { color: var(--public-text-sub); font-size: 14px; font-weight: 400; margin-top: -4px; max-width: none; }
  .lp .lp-final .btn { max-width: none; }
  .lp .lp-final .btn-primary { box-shadow: 0 8px 20px rgba(8,126,139,.28); }
  .lp .lp-final .lp-btn-sub { background: #fff; border-color: var(--public-primary); }

  /* ── 画面下に追いかけるボタン ── */
  .lp .lp-sticky {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    box-shadow: 0 -4px 16px rgba(23,50,77,.10);
    transform: translateY(110%); visibility: hidden;
    transition: transform .25s ease, visibility 0s linear .25s;
  }
  .lp.sticky-on .lp-sticky { transform: none; visibility: visible; transition: transform .25s ease; }
  .lp .lp-sticky .btn { min-height: 50px; box-shadow: none; }
  .lp .lp-sticky small { font-weight: 500; font-size: 12px; margin-left: 6px; opacity: .9; }
  .lp .lp-sticky .btn::after {
    content: ''; position: absolute; right: 22px; top: 50%; width: 8px; height: 8px;
    border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: translateY(-50%) rotate(45deg);
  }
  .lp.sticky-on .hb-btn { bottom: 86px; }
  .lp.sticky-on .hb-panel { bottom: 144px; }
  .lp .site-footer { padding-bottom: 96px; }
  .lp .site-header::before { height: 5px; }
  .lp .sample-frame::before { height: 10px; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .lp .lp-sticky, .lp.sticky-on .lp-sticky { transition: none; }
}