/* ============================================================
   RENTAL SALON LOTUS - responsive.css
   ============================================================ */

/* ── Tablet: 768px – 1199px ───────────────────────────────── */
@media (max-width: 1199px) {

  .container {
    padding: 0 32px;
  }

  /* Section spacing */
  .section {
    padding: 80px 0;
  }

  .section__header {
    margin-bottom: 48px;
  }

  /* Section container padding for colored sections */
  .section--blue .container,
  .section--sand .container {
    padding: 48px 40px;
  }

  /* Concept: 2-col */
  .concept__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  /* Facilities */
  .facilities__layout {
    flex-direction: column;
    gap: 40px;
  }

  .facilities__slider-wrap {
    width: 100%;
  }

  .facilities__checklist {
    flex: unset;
    width: 100%;
  }

  .facilities__list {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Pricing */
  .pricing__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  .pricing__card--popular,
  .pricing__card--featured {
    transform: scale(1.02);
  }

  .pricing__amount {
    font-size: 36px;
  }

  /* Support */
  .support__layout {
    gap: 48px;
  }

  .support__visual {
    flex: 0 0 320px;
  }

  /* Story */
  .story__layout {
    gap: 48px;
  }

  .story__photo-wrap {
    flex: 0 0 280px;
  }

  /* Access */
  .access__layout {
    gap: 28px;
  }

  .access__map-wrap {
    flex: 0 1 360px;
  }

  .access__info {
    flex: 0 0 240px;
  }

  /* Footer */
  .footer__top {
    flex-wrap: wrap;
    gap: 36px;
  }

  .footer__brand {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .footer__logo-img {
    width: 100%;
    height: auto;
  }

  .footer__nav {
    flex: 1;
  }

  .footer__nav-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 16px;
  }

  .footer__sns {
    flex: 0 0 auto;
    text-align: left;
  }

  .footer__sns-links {
    justify-content: flex-start;
  }

  /* Testimonials swiper */
  .testimonials-swiper .swiper-slide {
    width: 320px;
  }
}

/* ── SP: ≤767px ───────────────────────────────────────────── */
@media (max-width: 767px) {

  .container {
    padding: 0 20px;
  }

  .section--blue .container,
  .section--sand .container {
    border-radius: 16px;
    padding: 40px 24px;
  }

  /* Utility */
  .pc-only {
    display: none;
  }

  /* Section spacing */
  .section {
    padding: var(--space-section-sp);
  }

  .section__header {
    margin-bottom: 36px;
  }

  .section__title {
    font-size: clamp(22px, 5vw, 28px);
  }

  /* ── NAV ── */
  .nav__links,
  .nav__cta {
    display: none;
  }


  .nav__hamburger {
    display: flex;
  }

  .nav__drawer {
    display: block;
  }

  .nav__inner {
    height: 68px;
  }

  .nav__logo-img {
    height: 44px;
  }

  .nav__logo-en {
    font-size: 20px;
  }

  /* ── HERO ── */
  .hero {
    min-height: 100svh;
  }

  .hero__content {
    text-align: center;
  }

  .hero__catchcopy {
    font-size: clamp(12px, 3.2vw, 15px);
    margin-bottom: 12px;
  }

  .hero__actions {
    flex-direction: column;
    gap: 12px;
    bottom: 12%;
  }

  .hero__actions .btn--xl {
    width: 100%;
    max-width: 320px;
    font-size: 15px;
    padding: 16px 24px;
  }

  .hero__scroll-hint {
    display: none;
  }

  /* ── CONCEPT ── */
  .concept__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .concept__card {
    padding: 20px 10px;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
  }

  .concept__icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    margin: 0 auto;
  }

  .concept__card-title {
    font-size: 12px;
    margin-bottom: 4px;
  }

  .concept__card-text {
    font-size: 11px;
  }

  /* ── FACILITIES ── */
  .facilities__layout {
    flex-direction: column;
    gap: 32px;
  }

  .facilities__slide-img {
    height: 240px;
  }

  .facilities__list {
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
  }

  .facilities__checklist-title {
    font-size: 18px;
  }

  /* ── PRICING ── */
  .pricing__grid {
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 400px;
    margin: 0 auto;
  }

  .pricing__card--popular,
  .pricing__card--featured {
    transform: none;
  }

  .pricing__card--popular:hover,
  .pricing__card--featured:hover {
    transform: none;
  }

  .pricing__card {
    padding: 32px 24px;
  }

  .pricing__amount {
    font-size: 40px;
  }

  /* ── TESTIMONIALS ── */
  .testimonials__swiper-wrap {
    padding: 0 20px 32px;
  }

  .testimonials-swiper .swiper-slide {
    width: 300px;
  }

  .testimonial__card {
    padding: 24px;
  }

  /* ── SUPPORT ── */
  .support__layout {
    flex-direction: column;
    gap: 40px;
  }

  .support__visual {
    flex: unset;
    width: 100%;
  }

  .support__visual-inner {
    height: 280px;
  }

  .support__visual-card {
    padding: 16px;
    min-width: 100px;
  }

  /* ── STORY ── */
  .story__layout {
    flex-direction: column;
    gap: 32px;
  }

  .story__photo-wrap {
    flex: unset;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }

  .story__signature {
    font-size: 22px;
  }

  /* ── ACCESS ── */
  .access__layout {
    flex-direction: column;
    gap: 32px;
  }

  .access__map-wrap {
    aspect-ratio: 16 / 9;
    width: 100%;
    flex: unset;
  }

  .access__info {
    flex: unset;
    width: 100%;
  }

  /* ── CONTACT ── */
  .contact__line-btn {
    font-size: 15px;
    padding: 18px 28px;
    width: 100%;
  }

  .contact__faq {
    max-width: 100%;
  }

  .contact__faq-title {
    font-size: 18px;
  }

  /* ── PRICING (SP追加) ── */
  .pricing__plan-name {
    font-size: 17px;
  }

  /* ── FOOTER ── */
  .footer {
    padding: 48px 0 80px; /* extra bottom for SP CTA bar */
  }

  .footer__top {
    flex-direction: column;
    gap: 32px;
    margin-bottom: 40px;
    padding-bottom: 40px;
  }

  .footer__brand {
    flex: unset;
    width: 100%;
  }

  .footer__logo-img {
    width: 100%;
    height: auto;
  }

  .footer__nav-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 12px;
  }

  .footer__sns {
    flex: unset;
    text-align: left;
  }

  .footer__sns-links {
    justify-content: flex-start;
  }

  /* ── SP CTA BAR ── */
  .sp-cta {
    display: block;
  }

  /* ── Body padding for CTA bar ── */
  body {
    padding-bottom: 0;
  }

  /* ── Buttons: ensure minimum tap target ── */
  .btn {
    min-height: 44px;
  }
}

/* ── Very small screens ──────────────────────────────────── */
@media (max-width: 380px) {
  .container {
    padding: 0 16px;
  }

  .hero__catchcopy {
    font-size: 12px;
  }

  .pricing__amount {
    font-size: 36px;
  }

  .pricing__card {
    padding: 28px 20px;
  }

  .footer__nav-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px 8px;
    font-size: 12px;
  }
}

/* ── Large screens ───────────────────────────────────────── */
@media (min-width: 1200px) {
  .sp-cta {
    display: none !important;
  }
}

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}