/* style-mobile.css — モバイル専用 (max-width: ...) ブロックを style.css から分離 */
/* Sprint 軽量化-2: デスクトップユーザーには配信しない (media query 条件付きロード) */

@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="search"],
  input[type="url"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

@media (max-width: 768px) {
  button,
  a.btn-primary,
  a.btn-secondary,
  input[type="submit"],
  input[type="button"] {
    min-height: 44px;
  }
}

@media (max-width: 640px) {
  .hero-yado, .hero-camp, .hero-oasis, .hero-main {
    background-attachment: scroll;
  }
}

@media (max-width: 768px) {
  main { padding-bottom: 4px; }
}

@media (max-width: 768px) {
  ::-webkit-scrollbar { width: 4px; height: 4px; }
}

@media (max-width: 640px) {
  section.hero-yado,
  section.hero-camp,
  section.hero-oasis {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .hero-main {
    /* py-24/32 を上書き */
    min-height: auto;
  }
  .hero-main h1 {
    font-size: 1.875rem !important;
    line-height: 1.25 !important;
  }
  .hero-yado h1,
  .hero-camp h1,
  .hero-oasis h1 {
    font-size: 1.75rem !important;
    line-height: 1.25 !important;
  }
  .hero-main p,
  .hero-yado p,
  .hero-camp p,
  .hero-oasis p {
    font-size: 0.95rem !important;
  }
  /* セクション全体の余白を控えめに */
  main section.py-16 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  main section.py-20 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  main section.py-12 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
}

@media (max-width: 480px) {
  .menu-tab {
    flex: 1;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    font-size: 0.875rem;
  }
}

@media (max-width: 1024px) {
  #orderSection .sticky {
    position: static !important;
    top: auto !important;
  }
}

@media (max-width: 640px) {
  h1.font-serif-jp { letter-spacing: -0.01em; }
  h2.font-serif-jp.text-3xl { font-size: 1.5rem !important; }
}

@media (max-width: 480px) {
  .rounded-2xl { border-radius: 0.875rem; }
}

@media (max-width: 768px) {
  main { padding-bottom: 72px; }
}

@media (max-width: 640px) {
  .photo-yado-room,
  .photo-yado-onsen,
  .photo-yado-meal,
  .photo-yado-rotenburo,
  .photo-camp-bungalow,
  .photo-camp-bbq,
  .photo-camp-nature,
  .photo-oasis-soft,
  .photo-oasis-udon {
    height: 11rem !important;
  }
}

@media (max-width: 640px) {
  p { line-height: 1.65; }
}

@media (max-width: 640px) {
  input[type="date"],
  input[type="datetime-local"],
  input[type="tel"],
  input[type="email"],
  input[type="text"],
  input[type="password"],
  input[type="number"],
  select {
    min-height: 44px;
  }
}

@media (max-width: 640px) {
  .gachapon-wrap { width: 180px; height: 220px; }
}

@media (max-width: 640px) {
  .gachapon-globe { width: 140px; height: 140px; top: 26px; }
}

@media (max-width: 640px) {
  .ball { width: 22px; height: 22px; }
}

@media (max-width: 520px) {
  .v2-dormant-banner { flex-direction: column; align-items: flex-start; }
  .v2-dormant-banner__btn { width: 100%; padding: 12px; }
}

@media (max-width: 480px) {
  .v2-referral-card__share-btns { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .v2-hero-video__caption { font-size: 17px; }
  .v2-hero-video__overlay { padding: 14px; }
}

@media (max-width: 520px) {
  .v2-season-counter { flex-direction: row; }
  .v2-season-counter__title { font-size: 15px; }
}

@media (max-width: 600px) {
  .v2-next-visit__grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .v2-quick-actions { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="password"],
  input[type="date"],
  input[type="tel"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

@media (max-width: 480px) {
  .f-grid-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .f-grid-stats .f-kpi { padding: 10px 12px; }
  .f-grid-stats .f-kpi__value { font-size: 18px; }
  .f-grid-stats .f-kpi__label { font-size: 10px; }
}

@media (max-width: 640px) {
  .lux-hero-video { min-height: 72vh; }
}

@media (max-width: 640px) {
  .lux-hero-video__content { padding: 80px 20px 96px; }
}

@media (max-width: 640px) {
  .lux-area-map__pin-name { font-size: 0.65rem; padding: 1px 5px; }
  .lux-area-map__pin-label { font-size: 0.55rem; }
  .lux-area-map__pin-icon { width: 36px; height: 36px; font-size: 0.9rem; }
}

@media (max-width: 540px) {
  .v2-rank-ladder { padding: 1.25rem 0.85rem 1.5rem !important; }
  .v2-rank-ladder__title { font-size: 1.2rem !important; }
  .v2-rank-step { padding: 0.6rem 0.25rem 0.7rem !important; }
  .v2-rank-step__icon { width: 36px !important; height: 36px !important; font-size: 0.95rem !important; }
  .v2-rank-step__name { font-size: 0.78rem !important; }
  .v2-rank-step__min { font-size: 0.6rem !important; }
  .v2-rank-ladder__perks { font-size: 0.72rem !important; overflow-x: auto; }
  .v2-rank-ladder__perks table { min-width: 480px; }
}

@media (max-width: 720px) {
  .lux-omikuji-mountain { top: 14%; opacity: 0.32; }
}

@media (max-width: 720px) {
  .lux-omikuji-torii { width: min(220px, 56vw); opacity: 0.6; }
}

@media (max-width: 720px) {
  .lux-omikuji-scroll { width: 32px; }
  .lux-omikuji-scroll__rod { width: 32px; height: 10px; }
  .lux-omikuji-scroll__paper { width: 22px; font-size: 12px; }
}

@media (max-width: 720px) {
  .lux-omikuji-recap__inner { grid-template-columns: repeat(2, 1fr); gap: 12px 8px; }
  .lux-omikuji-recap__cell:nth-child(3)::before,
  .lux-omikuji-recap__cell:nth-child(2)::before { display: none; }
}

@media (max-width: 480px) {
  .lux-omikuji-rei { gap: 6px; padding: 10px; }
  .lux-omikuji-rei__num { width: 22px; height: 22px; font-size: 11px; }
  .lux-omikuji-rei__lbl { font-size: 10px; }
}

@media (max-width: 540px) {
  .lux-omikuji-drawer {
    grid-template-columns: 70px 1fr 42px 50px;
    gap: 6px;
    padding-left: 36px;
    font-size: 12px;
  }
  .lux-omikuji-wadansu { inset: 64px 8px 10px 8px; }
}

@media (max-width: 640px) {
  .lux-mypage-hero h1,
  .lux-mypage-page h1,
  main h1 {
    font-size: clamp(1.3rem, 5.5vw, 2rem);
    line-height: 1.45;
    letter-spacing: 0.02em;
  }
  /* 大型見出しが含む eyebrow ラベル */
  .lux-section-eyebrow,
  .lux-mypage-eyebrow {
    font-size: 0.6rem !important;
    letter-spacing: 0.22em !important;
  }
}

@media (max-width: 640px) {
  /* welcome modal の中身を縮小（汎用クラス） */
  #welcomeModal .text-2xl,
  #welcomeModal h2 {
    font-size: 1.25rem !important;
    line-height: 1.4 !important;
  }
  #welcomeModal .text-sm,
  #welcomeModal p {
    font-size: 0.82rem !important;
    line-height: 1.6 !important;
  }
}

@media (max-width: 640px) {
  button:not(.tab-btn):not(.lux-omikuji-rei__step),
  a.btn,
  .lux-omikuji-reset__btn {
    min-height: 44px;
  }
  /* タブナビゲーション (フッター) はスマホで触りやすく */
  .lux-bottom-nav__item,
  footer nav a {
    min-height: 56px;
  }
}

@media (max-width: 767px) {
  .lux-omikuji-altar__grid {
    grid-template-columns: 1fr !important;
  }
  /* 筒側 (stand) のスペース最小化、視覚的に頭に置く */
  .lux-omikuji-stand {
    border-bottom: 1px solid rgba(201, 168, 118, 0.18);
  }
}

@media (max-width: 767px) {
  /* MyPageのヒーロー h1 を確実に縮小 */
  .lux-mypage__title {
    font-size: clamp(1.3rem, 5.2vw, 1.85rem) !important;
    line-height: 1.35 !important;
    letter-spacing: 0.01em !important;
    margin-top: 0.2rem !important;
    margin-bottom: 0.6rem !important;
  }
  .lux-mypage__eyebrow {
    font-size: 0.7rem !important;
    letter-spacing: 0.18em !important;
  }
  .lux-mypage__header {
    padding: 12px 4px 8px !important;
  }
  .lux-mypage__inner {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  /* Member card もモバイルでコンパクトに */
  .lux-member-card__name {
    font-size: 1.15rem !important;
  }
  .lux-member-card__body {
    padding: 14px !important;
    gap: 12px !important;
  }
}