@charset "UTF-8";

@media screen and (max-width: 768px) {
  
  /* ユーティリティ */
  .sp-only {
    display: inline;
  }
  br.sp-only {
    display: block; /* 改行を確実に効かせるため */
  }

  /* セクションタイトル */
  .sec-title { font-size: 28px; line-height: 1.3; }
  
  .intro-parallax { padding: 60px 0; }
  .intro-content { padding: 30px 20px; }

  /* ダイナミックオーバーラップをスマホでは縦積みに解除 */
  .dynamic-block, .dynamic-block.reverse {
    flex-direction: column;
    margin-bottom: 80px;
  }
.dynamic-img-area { width: 100%; }
  .dynamic-slider img { 
    height: 35vh; 
    min-height: 250px; 
  }
  
  /* テキストボックスを画像の下に少し重ねる程度に変更 */
  .dynamic-text-area, .dynamic-block.reverse .dynamic-text-area {
    width: 90%;
    margin: -40px auto 0 auto;
    padding: 30px 20px;
    box-sizing: border-box;
  }
  .dynamic-text-area h3 { font-size: 22px; }

  /* 横スクロール対応 (観光スポット・料理) */
  .scroll-hint {
    display: block;
    text-align: right;
    font-size: 12px;
    color: #666;
    margin-bottom: 5px;
    margin-top: -10px;
  }
  .scroll-wrapper {
    overflow-x: auto;
    padding-bottom: 20px; /* スクロールバー用の余白 */
    margin: 0 -5%; /* 画面端までスクロールさせるためのネガティブマージン */
    padding: 0 5%;
  }
  /* スマホの時の card-grid を上書きして横並びにする */
  .scroll-wrapper .card-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 15px;
  }
  /* 各カードの幅を固定化 */
  .scroll-wrapper .card {
    flex: 0 0 280px; 
  }

  /* それ以外の card-grid */
  .card-grid { grid-template-columns: 1fr; gap: 20px; }
  
  /* みんなの体験談 */
  .voice-grid { grid-template-columns: 1fr; }
  .voice-card { flex-direction: column; }
  .voice-img { width: 100%; height: 200px; }
  .voice-text { width: 100%; padding: 20px; }

  /* モンゴル基本情報 テーブルを縦積みに */
  .basic-info-table th, .basic-info-table td { display: block; width: 100%; }
  .basic-info-table th { border-bottom: none; padding-bottom: 5px; }
  .basic-info-table td { padding-top: 5px; margin-bottom: 10px; }

  /* 追加した表の見出しとパディング */
  .table-title { font-size: 20px; margin-top: 40px; }
  .data-table th, .data-table td { font-size: 13px; padding: 10px; }

  /* ボタン */
  .btn-primary { 
    padding: 14px 30px; 
    font-size: 16px; 
    width: 80%; 
    display: block; 
    margin: 0 auto; 
    box-sizing: border-box; 
  }
	
	/* スマホでのみスライダー化 */
  .sp-slider-wrap {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox用 */
    margin: 0 -5%; /* スマホ画面端までスクロールさせる */
    padding: 0 5%;
  }
  .sp-slider-wrap::-webkit-scrollbar {
    display: none; /* Chrome, Safari用 */
  }
  
  /* グリッドを解除し、中の画像を直接スライダーに並べる魔法のコード */
  .dynamic-sub-grid {
    display: contents; 
  }

  /* メイン画像とサブ画像3枚をすべて同じサイズで横並びにする */
  .dynamic-main-img,
  .dynamic-sub-grid img {
    flex: 0 0 90%; /* 1枚の幅 */
    width: 90%;
    height: 35vh !important; /* PCの指定を上書き */
    min-height: 250px !important;
    object-fit: cover;
    scroll-snap-align: center; /* 中央でピタッと止まる */
    margin-right: 15px;
  }
}