/* LPだけのスマホ試作。PCの基本CSSを保ち、切替は767px以下の１段階にまとめる。
   ログイン後の--space、ログイン・登録画面とは独立したレイアウト。 */
.pain-mobile-comma,.lp-phone-break{display:none}
@media (max-width:767px){
  /* 背景は全画面共通のmobile-background.cssで管理する。 */
  body.landing-page{--lp-mobile-space:16px;min-width:0}
  .container{width:calc(100% - 2 * var(--lp-mobile-space))}

  .site-header{height:auto;padding-block:var(--lp-mobile-space)}
  .nav-inner{height:auto;display:grid;grid-template-columns:auto repeat(3,minmax(0,1fr));gap:calc(var(--lp-mobile-space) / 2)}
  .site-header .paw-brand{gap:4px;font-size:18px}
  .site-header .paw-brand-mark{width:32px;height:32px;flex-basis:32px;border-width:2px}
  .site-header .paw-brand-mark .paw-logo{width:28px;height:28px}
  .site-header .paw-brand-reading{font-size:8px;margin-top:3px}
  .site-header :is(.trial-link,.signup-link,.login-link){width:auto;min-width:0;min-height:38px;flex:auto;margin:0;padding-inline:4px;border-width:2px;font-size:11px}

  /* display:contentsで既存の文章を同じグリッドへ参加させる。文章・画像の複製はしない。
     見出しと挿絵は１段目で重ね、説明文だけを２段目へ送る。 */
  .hero-inner{grid-template-columns:minmax(0,1fr);gap:calc(1.5 * var(--lp-mobile-space));padding-block:24px 36px;isolation:isolate}
  .hero-copy{display:contents}
  #hero-heading{grid-column:1;grid-row:1;align-self:start;position:relative;z-index:2;margin:0;font-size:clamp(26px,7.8vw,44px);line-height:1.5;letter-spacing:.025em}
  /* 白い縁で挿絵との重なりを区切る。strokeを先に描き、元の文字の太さを保つ。 */
  #hero-heading{-webkit-text-stroke:4px #fff;paint-order:stroke fill}
  .hero-visual{grid-column:1;grid-row:1;align-self:stretch;min-height:clamp(280px,75vw,400px);margin:0;padding:0;z-index:1}
  /* スマホのみ挿絵を24px下げ、おでこを見出しの下へ出す指定。 */
  body.landing-page .hero-visual .hero-shot{top:auto;right:-8px;bottom:-24px;width:min(86%,420px);height:auto;max-width:none}
  .hero-copy .hero-description{grid-column:1;grid-row:2;position:relative;z-index:2;max-width:none;margin:0;font-size:15px;line-height:1.9}

  .section-heading{margin-bottom:24px}
  .section-heading h2{font-size:clamp(22px,5.8vw,30px);line-height:1.55;letter-spacing:.01em}
  .pain-section.section-pad{padding-top:28px;padding-bottom:12px}
  .pain-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--lp-mobile-space)}
  .pain-card{min-height:0;padding:var(--lp-mobile-space) calc(var(--lp-mobile-space) / 2)}
  .pain-card h3{font-size:15px;line-height:1.6;text-align:center}
  .pain-card p{font-size:13px;line-height:1.85}
  .pain-mobile-comma{display:inline}
  .pain-desktop-break{display:none}

  .solution-bridge{margin-top:40px;padding-top:var(--lp-mobile-space)}
  .solution-bridge h2{font-size:clamp(24px,6vw,36px);line-height:1.55;letter-spacing:.01em}
  .feature-section.section-pad{padding-top:24px;padding-bottom:16px}
  /* ３枚を行順に２列へ置く。３枚目は左下、右下はDOM要素を足さず空欄になる。 */
  .paw-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--lp-mobile-space)}
  .paw-feature-card{min-height:0;padding:20px 14px}
  .paw-feature-badge{flex-direction:row;align-items:flex-end;gap:8px;margin-bottom:14px}
  .paw-letter{width:42px;height:42px;font-size:26px}
  .paw-feature-card h3{font-size:18px;line-height:1.6}
  .lp-phone-break{display:initial}
  .paw-feature-card p{font-size:13px}

  .value-section.section-pad{padding-block:48px}
  .value-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .value-story>h3{font-size:24px;margin-bottom:16px}
  .value-benefits{padding-inline-start:0}
}