/* ============================================
    ページ全体の基本構成
============================================ */
body {
  scroll-snap-type:  y proximity;   /* ← 一時的に無効化してスマホ挙動確認 */
  touch-action: auto;       /* ← スマホでのスクロールを有効化 */
  overflow-y: scroll;
  min-height: 100vh;
  height: auto;
  margin: 0;
  padding: 0;
  font-family: "Helvetica", "Arial", sans-serif;
  box-sizing: border-box;
}

/* セクション構成：スクロール演出と整列 */
section {
  height: 100vh;
  padding: 0.5vh 1vw;
  scroll-snap-align: start;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  gap: 1rem;
}

/* ============================================
    ペイン構成：左右ボックス
============================================ */
.half-box {
  flex: 1 1 45%;
  max-width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
}

/* ============================================
    画像関連（イベント写真・ロゴなど）
============================================ */
.crop-box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
}

.crop-box img {
  width: 100%;
  height: auto;
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* crop-box の高さを制限（ここだけ） */
.half-box.title-box .crop-box {
  height: 55%;
  overflow: hidden;
}

/* イベントロゴ画像 */
.crop-box .event-logo {
  width: 75%;
  max-width: 75%;
  height: auto;
  object-fit: contain;
  display: block;
  margin: auto;
  margin-bottom: 1vh;
}

/* ============================================
    テキスト構成・見出し
============================================ */
.left-align {
  text-align: left;
}

.bold-text {
  font-size: 1.5vw;
  font-weight: bold;
  color: #fff;
}

.inline-block {
  display: inline-block;
}

/* 筆文字（日本語ラベル）横書き・太字 */
.event-headline {
  font-family: 'Yuji Syuku', sans-serif;
  font-size: 2.7vw;
  font-weight: 400;
  color: #fff;
}

/* ============================================
    ルート図の画像サイズ調整
============================================ */
.route-map {
  width: 60%;
  height: auto;
  object-fit: contain;
}

/* ============================================
    スライドショー（必要に応じて使用）
============================================ */
.slideshow-container {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.slideshow-container .crop-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* コンテナ内で画像に合わせて高さを確保 */
.slideshow-container::before {
  content: "";
  display: block;
  padding-top: 70%;              /* 画像の比率に応じて調整：例→横:縦 = 2:1 */
}

/* スライド画像 */
.slideshow-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  z-index: 0;
}

/* 表示中の画像 */
.slideshow-img.active {
  opacity: 1;
  z-index: 1;
}

/* ============================================
    お問い合わせフォーム（Googleフォーム）
============================================ */
.google-form {
  width: 100%;
  height: 960px;
  border: none;
  margin-top: 6vh;
}

/* ============================================
    レスポンシブ対応は responsive.css にて管理
============================================ */