/**
 * ========================================
 * Responsive CSS - クリスマス特設LP
 * ========================================
 * 
 * モバイルファースト設計
 * ブレークポイント: 768px (タブレット), 1024px (PC), 1440px (大画面)
 * 
 * @version 1.0.0
 */

/* ========================================
 * タブレット (768px以上)
 * ======================================== */

@media (min-width: 768px) {
  
  /* ----------------------------------------
   * 基本設定
   * ---------------------------------------- */
  
  body {
    font-size: var(--font-size-md);
  }
  
  .container {
    padding-left: var(--container-padding-tablet);
    padding-right: var(--container-padding-tablet);
  }
  
  .section-padding {
    padding-top: var(--section-padding-tablet);
    padding-bottom: var(--section-padding-tablet);
  }
  
  /* ----------------------------------------
   * セクションヘッダー
   * ---------------------------------------- */
  
  .section-subtitle {
    font-size: var(--font-size-base);
  }
  
  .section-title {
    font-size: var(--font-size-3xl);
  }
  
  .section-description {
    font-size: var(--font-size-lg);
  }
  
  /* ----------------------------------------
   * ボタン
   * ---------------------------------------- */
  
  .hero-cta {
    flex-direction: row;
  }
  
  .contact-buttons {
    flex-direction: row;
  }
  
  .reservation-actions {
    flex-direction: row;
  }
  
  /* ----------------------------------------
   * セクション1: ヒーロー
   * ---------------------------------------- */
  
  .hero-title {
    font-size: var(--font-size-5xl);
  }
  
  .hero-description {
    font-size: var(--font-size-lg);
  }
  
  /* ----------------------------------------
   * セクション2: クリスマスの魅力
   * ---------------------------------------- */
  
  .attractions-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
  }
  
  /* ----------------------------------------
   * セクション3: イベントスケジュール
   * ---------------------------------------- */
  
  .schedule-timeline {
    padding-left: var(--space-8);
  }
  
  /* ----------------------------------------
   * セクション4: ギャラリー
   * ---------------------------------------- */
  
  .gallery-swiper {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
  
  /* ----------------------------------------
   * セクション5: 冬の特別体験
   * ---------------------------------------- */
  
  .experience-content {
    flex-direction: row;
    gap: var(--space-16);
  }
  
  .experience-image {
    width: 50%;
    flex-shrink: 0;
  }
  
  .experience-text {
    width: 50%;
  }
  
  /* ----------------------------------------
   * セクション6: 宿泊プラン
   * ---------------------------------------- */
  
  .plans-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-10);
  }
  
  .plan-card {
    padding: var(--space-10);
  }
  
  .plan-image {
    height: 260px;
  }
  
  /* ----------------------------------------
   * セクション7: アクセス
   * ---------------------------------------- */
  
  .access-content {
    flex-direction: row;
    align-items: flex-start;
  }
  
  .access-map {
    width: 50%;
    flex-shrink: 0;
  }
  
  .access-info {
    width: 50%;
  }
  
  /* ----------------------------------------
   * セクション9: 予約CTA
   * ---------------------------------------- */
  
  .reservation-title {
    font-size: var(--font-size-4xl);
  }
  
  /* ----------------------------------------
   * セクション10: フッター
   * ---------------------------------------- */
  
  .footer-main {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-12);
  }
  
  .footer-brand {
    grid-column: 1 / -1;
  }
  
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* ========================================
 * デスクトップ小 (1024px以上)
 * ======================================== */

@media (min-width: 1024px) {
  
  /* ----------------------------------------
   * 基本設定
   * ---------------------------------------- */
  
  .container {
    padding-left: var(--container-padding-desktop);
    padding-right: var(--container-padding-desktop);
  }
  
  .section-padding {
    padding-top: var(--section-padding-desktop);
    padding-bottom: var(--section-padding-desktop);
  }
  
  /* ----------------------------------------
   * セクションヘッダー
   * ---------------------------------------- */
  
  .section-title {
    font-size: var(--font-size-4xl);
  }
  
  /* ----------------------------------------
   * セクション1: ヒーロー
   * ---------------------------------------- */
  
  .hero-title {
    font-size: var(--font-size-6xl);
  }
  
  .hero-subtitle {
    font-size: var(--font-size-lg);
  }
  
  .hero-description {
    font-size: var(--font-size-xl);
    max-width: 730px;
  }
  
  /* ----------------------------------------
   * セクション2: クリスマスの魅力
   * ---------------------------------------- */
  
  .attractions-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-8);
  }
  
  .attraction-card {
    padding: var(--space-10);
  }
  
  .attraction-icon {
    width: 100px;
    height: 100px;
    font-size: var(--font-size-4xl);
  }
  
  .attraction-title {
    font-size: var(--font-size-2xl);
  }
  
  .attraction-description {
    font-size: var(--font-size-md);
  }
  
  /* ----------------------------------------
   * セクション3: イベントスケジュール
   * ---------------------------------------- */
  
  .schedule-timeline {
    padding-left: var(--space-12);
  }
  
  .schedule-item {
    gap: var(--space-8);
  }
  
  .schedule-time {
    width: 140px;
  }
  
  .time-badge {
    width: 140px;
    height: 60px;
    font-size: var(--font-size-2xl);
  }
  
  .schedule-title {
    font-size: var(--font-size-xl);
  }
  
  .schedule-description {
    font-size: var(--font-size-md);
  }
  
  /* ----------------------------------------
   * セクション4: ギャラリー
   * ---------------------------------------- */
  
  .gallery-swiper {
    padding-left: var(--space-12);
    padding-right: var(--space-12);
  }
  
  .gallery-title {
    font-size: var(--font-size-xl);
  }
  
  .gallery-description {
    font-size: var(--font-size-base);
  }
  
  /* Swiperスライド表示数調整 */
  .gallery-swiper .swiper-slide {
    width: auto;
  }
  
  /* ----------------------------------------
   * セクション5: 冬の特別体験
   * ---------------------------------------- */
  
  .experience-content {
    gap: var(--space-20);
  }
  
  .experience-image {
    width: 55%;
  }
  
  .experience-text {
    width: 45%;
  }
  
  .experience-description p {
    font-size: var(--font-size-md);
  }
  
  .experience-features .feature-item span {
    font-size: var(--font-size-md);
  }
  
  /* ----------------------------------------
   * セクション6: 宿泊プラン
   * ---------------------------------------- */
  
  .plan-name {
    font-size: var(--font-size-2xl);
  }
  
  .plan-subtitle {
    font-size: var(--font-size-md);
  }
  
  .price-value {
    font-size: var(--font-size-5xl);
  }
  
  .price-unit {
    font-size: var(--font-size-md);
  }
  
  .plan-features .feature-item span {
    font-size: var(--font-size-md);
  }
  
  .plan-image {
    height: 280px;
  }
  
  /* ----------------------------------------
   * セクション7: アクセス
   * ---------------------------------------- */
  
  .access-map {
    width: 55%;
  }
  
  .access-info {
    width: 45%;
  }
  
  .info-title {
    font-size: var(--font-size-xl);
  }
  
  .info-text {
    font-size: var(--font-size-md);
  }
  
  /* ----------------------------------------
   * セクション8: FAQ
   * ---------------------------------------- */
  
  .question-text {
    font-size: var(--font-size-md);
  }
  
  .faq-answer p {
    font-size: var(--font-size-md);
  }
  
  .contact-text {
    font-size: var(--font-size-xl);
  }
  
  /* ----------------------------------------
   * セクション9: 予約CTA
   * ---------------------------------------- */
  
  .reservation-title {
    font-size: var(--font-size-5xl);
  }
  
  .reservation-description {
    font-size: var(--font-size-xl);
  }
  
  .reservation-actions {
    max-width: 800px;
  }
  
  /* ----------------------------------------
   * セクション10: フッター
   * ---------------------------------------- */
  
  .footer-main {
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: var(--space-16);
  }
  
  .footer-brand {
    grid-column: 1 / 2;
  }
  
  .footer-logo {
    font-size: var(--font-size-3xl);
  }
  
  .footer-description {
    font-size: var(--font-size-md);
  }
  
  .footer-nav-title {
    font-size: var(--font-size-xl);
  }
  
  .footer-nav-list a {
    font-size: var(--font-size-md);
  }
  
  .contact-item {
    font-size: var(--font-size-md);
  }
}

/* ========================================
 * 大画面デスクトップ (1440px以上)
 * ======================================== */

@media (min-width: 1440px) {
  
  /* ----------------------------------------
   * 基本設定
   * ---------------------------------------- */
  
  .section-header {
    margin-bottom: var(--space-16);
  }
  
  /* ----------------------------------------
   * セクション1: ヒーロー
   * ---------------------------------------- */
  
  .hero-content {
    padding: var(--space-16) var(--space-8);
  }
  
  .hero-title {
    font-size: calc(var(--font-size-6xl) * 1.1);
  }
  
  /* ----------------------------------------
   * セクション2: クリスマスの魅力
   * ---------------------------------------- */
  
  .attractions-grid {
    gap: var(--space-10);
  }
  
  /* ----------------------------------------
   * セクション3: イベントスケジュール
   * ---------------------------------------- */
  
  .schedule-content {
    padding: var(--space-8);
  }
  
  /* ----------------------------------------
   * セクション5: 冬の特別体験
   * ---------------------------------------- */
  
  .experience-content {
    gap: var(--space-24);
  }
  
  /* ----------------------------------------
   * セクション6: 宿泊プラン
   * ---------------------------------------- */
  
  .plans-grid {
    gap: var(--space-12);
  }
  
  /* ----------------------------------------
   * セクション10: フッター
   * ---------------------------------------- */
  
  .footer-section {
    padding: var(--space-20) 0 var(--space-10);
  }
}

/* ========================================
 * 超大画面 (1920px以上)
 * ======================================== */

@media (min-width: 1920px) {
  
  /* ----------------------------------------
   * セクション1: ヒーロー
   * ---------------------------------------- */
  
  .hero-title {
    font-size: calc(var(--font-size-6xl) * 1.2);
  }
  
  .hero-description {
    max-width: 800px;
  }
}

/* ========================================
 * 横向きスマートフォン対応
 * ======================================== */

@media (max-height: 500px) and (orientation: landscape) {
  
  /* ヒーローセクションの高さ調整 */
  .hero-section {
    min-height: 100vh;
    padding: var(--space-8) 0;
  }
  
  .hero-title {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--space-4);
  }
  
  .hero-description {
    font-size: var(--font-size-base);
    margin-bottom: var(--space-4);
  }
  
  .hero-cta {
    gap: var(--space-3);
  }
  
  .scroll-indicator {
    display: none;
  }
}

/* ========================================
 * プリント最適化 (追加)
 * ======================================== */

@media print {
  
  /* セクション余白調整 */
  .section-padding {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
  }
  
  /* ヒーローを1ページ目に収める */
  .hero-section {
    min-height: auto;
    padding: var(--space-12) 0;
    page-break-after: always;
  }
  
  .hero-title {
    font-size: var(--font-size-3xl);
  }
  
  /* グリッドを縦並びに */
  .attractions-grid,
  .plans-grid {
    grid-template-columns: 1fr;
  }
  
  /* カードのシャドウを軽く */
  .attraction-card,
  .plan-card,
  .schedule-content {
    box-shadow: none;
    border: 1px solid var(--color-gray-300);
  }
  
  /* 背景画像を非表示 */
  .hero-section {
    background-image: none;
    background-color: var(--color-navy);
  }
  
  /* インタラクティブ要素を非表示 */
  .hero-cta,
  .plan-cta,
  .experience-cta,
  .reservation-section,
  .faq-contact {
    display: none;
  }
}

/* ========================================
 * アクセシビリティ - 大きなテキスト設定
 * ======================================== */

@media (prefers-reduced-motion: no-preference) {
  /* 通常のアニメーション設定 */
  .attraction-card,
  .schedule-content,
  .plan-card {
    transition: var(--transition-all);
  }
}

/* ユーザーが大きなテキストを好む場合 */
@media (prefers-contrast: high) {
  /* コントラスト強化 */
  .hero-overlay {
    background: linear-gradient(
      to bottom,
      rgba(30, 58, 95, 0.85) 0%,
      rgba(30, 58, 95, 0.7) 50%,
      rgba(30, 58, 95, 0.9) 100%
    );
  }
  
  .gallery-caption {
    background: linear-gradient(
      to top,
      rgba(30, 58, 95, 1) 0%,
      rgba(30, 58, 95, 0.9) 50%,
      rgba(30, 58, 95, 0) 100%
    );
  }
}

/* ========================================
 * カスタムブレークポイント - ギャラリー最適化
 * ======================================== */

/* 3カラム表示 (900px以上) */
@media (min-width: 900px) {
  .swiper-slide {
    width: calc(33.333% - 20px);
  }
}

/* 4カラム表示 (1200px以上) */
@media (min-width: 1200px) {
  .swiper-slide {
    width: calc(25% - 20px);
  }
}

/* ========================================
 * タッチデバイス対応
 * ======================================== */

@media (hover: none) and (pointer: coarse) {
  /* タッチデバイスでホバー効果を軽減 */
  .attraction-card:hover,
  .plan-card:hover,
  .schedule-content:hover {
    transform: none;
  }
  
  /* ボタンのタップエリア拡大 */
  .btn {
    min-height: 48px;
    padding: var(--space-4) var(--space-8);
  }
  
  /* FAQ質問のタップエリア拡大 */
  .faq-question {
    min-height: 60px;
  }
  
  /* スクロールトップボタンを大きく */
  .scroll-to-top {
    width: 60px;
    height: 60px;
  }
}

/* ========================================
 * 高解像度ディスプレイ対応
 * ======================================== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* 高解像度用の画像最適化指示をHTMLで行う */
  /* ここではフォントのアンチエイリアシングを最適化 */
  body {
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
  }
}

/* ========================================
 * ダークモード対応（将来の拡張用）
 * ======================================== */

/*
@media (prefers-color-scheme: dark) {
  .attractions-section,
  .experience-section,
  .access-section {
    background-color: var(--color-navy-dark);
  }
  
  .attraction-card,
  .plan-card,
  .info-section {
    background-color: var(--color-navy);
    color: var(--color-white);
  }
}
*/

/* ========================================
 * 極小デバイス対応 (320px以下)
 * ======================================== */

@media (max-width: 320px) {
  /* 最小デバイスでのフォントサイズ調整 */
  .hero-title {
    font-size: var(--font-size-3xl);
  }
  
  .section-title {
    font-size: var(--font-size-xl);
  }
  
  .btn {
    font-size: var(--font-size-sm);
    padding: var(--space-2) var(--space-4);
  }
  
  .time-badge {
    width: 100px;
    height: 45px;
    font-size: var(--font-size-lg);
  }
  
  .schedule-time {
    width: 100px;
  }
}

/* ========================================
 * IE11対応（フォールバック）
 * ======================================== */

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  /* Gridのフォールバック */
  .attractions-grid,
  .plans-grid {
    display: flex;
    flex-wrap: wrap;
  }
  
  .attraction-card,
  .plan-card {
    flex: 1 1 calc(50% - var(--space-4));
  }
  
  /* CSS変数が使えない場合のフォールバック */
  .btn--primary {
    background-color: #f4c430;
    color: #1e3a5f;
  }
  
  .btn--secondary {
    background-color: #d4845f;
    color: #ffffff;
  }
}