/* =====================================================
   responsive.css — Pour moi LP
   BreakPoints:
     max-width: 390px  → 極小スマホ補正
     min-width: 700px  → タブレット / PC
     min-width: 1024px → 大画面PC
===================================================== */

/* ── 極小スマホ（〜400px）: about-tag縮小 ── */
@media (max-width: 400px) {
  .about-tag { font-size: 11px; padding: 4px 10px; letter-spacing: 1px; }
  .about-tags { gap: 5px; }
}

/* ── スマホ（〜699px）: はみ出し防止 + フォントサイズ拡大 ── */
@media (max-width: 699px) {
  /* ヘッダー */
  header { height: 70px; }
  main { padding-top: 70px; }
  .header-logo { height: 44px; width: 130px; }
  .menu-btn-icon { width: 30px; height: 40px; }
  .menu-btn span { font-size: 11px; }

  /* 道順モーダル */
  .direction-modal p { font-size: 13px; line-height: 2.2; }

  .strength-list,
  .strength-image,
  .voice-carousel-wrap,
  .flow-carousel-outer,
  .faq-list,
  .access-salon-img,
  .access-info { width: min(354px, calc(100vw - 48px)); }
  .flow-carousel-outer { max-width: min(354px, calc(100vw - 48px)); }

  /* セクションタイトル */
  .section-title .jp { font-size: 14px; }

  /* FOR YOU */
  .target-card p { font-size: 14px; }
  .what-text, .what-text .label { font-size: 14px; letter-spacing: 2px; }

  /* 強み */
  .strength-main { font-size: 14px; }
  .strength-sub { font-size: 13px; }

  /* ABOUT */
  .about-message { font-size: 12px; letter-spacing: 2px; }
  .about-message p { white-space: nowrap; }
  .about-tag { font-size: 13px; }

  /* VOICE */
  .voice-card .stars { font-size: 13px; }
  .voice-card .body { font-size: 12px; }
  .voice-card .meta { font-size: 10px; }

  /* ACCESS */
  .access-info { flex-direction: column; gap: 16px; align-items: center; }
  .access-text { font-size: 13px; line-height: 1.8; }
  .access-text p { white-space: normal; }
  .access-hours-label, .access-hours-value { font-size: 13px; line-height: 1.8; }
  .direction-btn span { font-size: 13px; }
  .google-map-wrap { width: min(283px, calc(0.8 * (100vw - 48px))); height: auto; aspect-ratio: 16/9; }
  .direction-btn { width: min(283px, calc(0.8 * (100vw - 48px))); }

  /* FAQ */
  .faq-question p { font-size: 13px; letter-spacing: 0; }
  .faq-answer p { font-size: 12px; }

  /* CONTACT */
  .contact-label-row p { font-size: 15px; }
  .booking-btn-inner span { font-size: 15px; }
  .line-btn span, .instagram-btn span { font-size: 11px; }
  .contact-hours { font-size: 11px; }
  .booking-note { font-size: 11px; }
}

/* ── タブレット / PC（700px〜）── */
@media (min-width: 700px) {
  /* ヘッダー */
  header { height: 72px; padding: 0 32px 0 24px; }
  main { padding-top: 72px; }
  .header-logo { height: 44px; width: 130px; }
  .menu-btn-icon { width: 30px; height: 40px; }
  .menu-btn span { font-size: 11px; }

  /* ヒーロー */
  .hero-image { aspect-ratio: 16/9; }

  /* TOPループ */
  .top-object-wrap { height: 320px; }
  .top-object-track { height: 320px; gap: 24px; animation-duration: 40s; }
  .top-object-img { width: 290px; height: 290px; }

  /* メインメッセージ */
  .main-message-title { padding: 50px 0 100px; }
  .main-message .brand { font-size: 80px; }
  .main-message .brand-jp { font-size: 24px; }
  .main-message-sub { padding-bottom: 100px; font-size: 18px; }

  /* セクションタイトル */
  .section-title { padding: 60px 0; }
  .section-title .en { font-size: 72px; }
  .section-title .jp { font-size: 18px; }

  /* FOR YOU */
  .targets { width: 60%; max-width: 520px; }
  .target-card p { font-size: 15px; }
  .what-block { gap: 40px; }
  .what-img { width: 220px; height: 300px; }
  .what-text { font-size: 16px; gap: 20px; }
  .what-text .label { font-size: 16px; }

  /* 強み */
  .strength-list { width: 480px; }
  .strength-image { width: 480px; height: 340px; }
  .strength-main { font-size: 15px; }
  .strength-sub { font-size: 13px; }

  /* ABOUT */
  .about-img { width: 200px; height: 260px; }
  .about-message { font-size: 12px; }

  /* VOICE */
  .voice-carousel-wrap { width: 480px; }
  .flow-carousel-outer { width: 480px; max-width: 480px; }
  .voice-card { width: 420px; }
  .voice-card .body { font-size: 13px; }

  /* MENU */
  .menu-tabs { max-width: 520px; }
  .menu-panel-wrap { max-width: 520px; }
  .menu-tab { font-size: 13px; height: 48px; }
  .menu-card-name { font-size: 16px; }
  .menu-row-time { font-size: 18px; }
  .menu-row-price .num { font-size: 24px; }
  .menu-row-price .yen { font-size: 14px; }

  /* ACCESS */
  .access-salon-img { width: 480px; height: 280px; }
  .google-map-wrap { width: 200px; height: 115px; }
  .access-text { font-size: 11px; }
  .access-text p { line-height: 18px; }
  .access-hours-label,
  .access-hours-value { font-size: 11px; }

  /* FAQ */
  .faq-list { width: 480px; }
  .faq-question p { font-size: 14px; }
  .faq-answer p { font-size: 13px; }

  /* CONTACT */
  .booking-btn-wrap { width: 320px; }
  .booking-btn { width: 320px; height: 90px; }
  .booking-btn-inner span { font-size: 16px; }
  .line-btn, .instagram-btn { width: 150px; height: 55px; }
  .line-btn span, .instagram-btn span { font-size: 12px; }
  .contact-label-row p { font-size: 16px; }
  .contact-hours { font-size: 12px; }

  /* FOOTER — 700px〜はベース(120px)を継承、変更なし */
}

/* ── 大画面PC（1024px〜）── */
@media (min-width: 1024px) {
  /* ヘッダー */
  header { height: 80px; padding: 0 40px 0 28px; }
  main { padding-top: 80px; }
  .header-logo { height: 50px; width: 146px; }
  .menu-btn-icon { width: 33px; height: 44px; }
  .menu-btn span { font-size: 12px; }

  /* TOPループ */
  .top-object-wrap { height: 480px; }
  .top-object-track { height: 480px; gap: 30px; animation-duration: 60s; }
  .top-object-img { width: 450px; height: 450px; }

  .section-title .en { font-size: 80px; }
  .section-title .jp { font-size: 20px; }

  .strength-list { width: 560px; }
  .strength-image { width: 560px; height: 380px; }

  .about-img { width: 230px; height: 300px; }

  .voice-carousel-wrap { width: 560px; }
  .flow-carousel-outer { width: 560px; max-width: 560px; }
  .voice-card { width: 500px; }

  .menu-tabs { max-width: 600px; }
  .menu-panel-wrap { max-width: 600px; }

  .access-salon-img { width: 560px; height: 320px; }
  .google-map-wrap { width: 240px; height: 135px; }

  .faq-list { width: 560px; }

  .booking-btn-wrap { width: 360px; }
  .booking-btn { width: 360px; height: 100px; }

  /* FOOTER */
  footer { height: 165px; }
  .footer-left { height: 165px; padding: 28px 0 28px 32px; }
  .footer-logo { width: 152px; height: 72px; }
  .footer-copy { font-size: 12px; }
  .footer-right { height: 165px; width: 195px; padding: 28px 36px 28px 18px; }
  .footer-booking { padding: 12px 18px; gap: 8px; }
  .footer-booking span { font-size: 13px; }
  .footer-booking .arrow { font-size: 13px; }
  .footer-sns a { width: 28px; height: 28px; }
}