@charset "UTF-8";
/* CSS Document */
/* bodyの高さと幅を確保 */
html, body {
  width: 100%;
  /* スクロールを可能にするため、bodyの高さはコンテンツに合わせて可変に */
}
/* 全画面表示したいセクションのスタイル */
.full-height {
  /* 画面のビューポート（表示領域）の高さいっぱいにする */
  height: 100vh;
  /* 以下のスタイルはコンテンツの配置例です */
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直方向の中央揃え */
  align-items: center; /* 水平方向の中央揃え */
  text-align: center;
  /* 背景やテキストの色を設定 */
  background-color: #f0f0f0;
  color: #333;
  padding: 10%;
}
/* 他のセクションのスタイル (フルハイトでなくてもOK) */
.other-content-top {
  min-height: 100vh; /* 最低限の高さ設定 */
  padding: 40px 15%;
  background-color: #fff;
  border-top: 1px solid #ccc;
}
.other-content {
  /*min-height: 50vh;  最低限の高さ設定 */
  padding: 40px 15%;
  background-color: #fff;
}
.bdrTop {
  border-top: 1px solid #ccc;
}
/* ヒーローセクションの背景色など (区別のため) */
header, .hero, footer {
  background-color: #730202;
  color: white;
}
.parallax-section {
  /* 背景画像の指定とサイズ調整 */
  background-image: url('../../music-lab/img/top.jpg');
  background-position: center;
  background-size: cover;
  height: 50vh; /* セクションの高さ */
  /* **パララックス効果の核**：背景を固定する */
  background-attachment: fixed;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.parallax-section h2 {
  color: #fff;
  border: none;
  margin: 0 auto;
  max-width: 80%;
}
/* 親要素: .other-content内の分割コンテナ */
.split-container {
  display: flex; /* ★これがないと横並びになりません */
  justify-content: space-between; /* 左右に少し隙間を開ける例 */
  gap: 20px; /* 必要に応じて要素間の隙間を設定 */
}
/* 子要素: 2分割したい各カラム */
.half-column {
  /* 2つのカラムが均等にスペースを占有するように設定 */
  width: 50%;
  box-sizing: border-box; /* paddingやborderを幅に含めるために推奨 */
  padding: 20px;
}
.column30 {
  /* 2つのカラムが均等にスペースを占有するように設定 */
  width: 30%;
  box-sizing: border-box; /* paddingやborderを幅に含めるために推奨 */
  padding: 20px;
}
.column70 {
  /* 2つのカラムが均等にスペースを占有するように設定 */
  width: 70%;
  box-sizing: border-box; /* paddingやborderを幅に含めるために推奨 */
  padding: 20px;
}
.grid-container {
  /* Flexboxコンテナとして設定 */
  display: flex;
  /* ★重要: 1行に収まらない要素を次の行に折り返すように設定 */
  flex-wrap: wrap;
  /* 子要素間の水平・垂直の隙間を設定 (任意) */
  gap: 20px;
}
.grid-item {
  /* ★重要: 親コンテナの幅の50%に設定 */
  width: calc(50% - 10px);
  /* gapプロパティを使用する場合、box-sizing: border-box; は必須ではありませんが、
       paddingやmarginを細かく調整する場合は設定しておくと安全です。 */
  box-sizing: border-box;
  /* 見た目のためのスタイル (任意) */
  padding: 20px;
  text-align: center;
}
/* 1. 最大幅と中央配置を設定するラッパー */
.video-container-wrapper {
  /* 最大幅をYouTubeのデフォルトサイズに設定 */
  max-width: 560px;
  /* 親要素の幅が560pxより広い場合に中央に配置 */
  margin: 0 auto;
}
/* 2. レスポンシブとアスペクト比を維持するコンテナ */
.video-container {
  position: relative;
  width: 100%; /* ラッパーの幅いっぱいに広がる */
  height: 0;
  /* 16:9 のアスペクト比 (315px ÷ 560px = 0.5625) */
  padding-bottom: 56.25%;
  overflow: hidden;
}
/* 3. 動画本体 */
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* PC向けの基本スタイル (メディアクエリ外に記述) */
body {
  font-size: 16px;
  line-height: 1.6;
}
.sticky-header {
  /* 1. スティッキーを指定 */
  position: sticky;
  /* 2. 画面の上端から0pxの位置で固定する */
  top: 0;
  z-index: 10;
}
.container {
  width: 1000px; /* PCでの最大幅を固定またはmax-widthで設定 */
  margin: 0 auto; /* 中央揃え */
  padding: 20px;
}
.main-content {
  width: 70%;
  float: left; /* PCでのカラムレイアウト */
}
.sidebar {
  width: 30%;
  float: right; /* PCでのカラムレイアウト */
}
/* 画像が親要素からはみ出さないようにする */
img {
  max-width: 100%;
  height: auto;
}
/* FlexboxやGridを活用してレイアウトを柔軟にする */
.parent {
  display: flex;
  flex-wrap: wrap; /* 画面幅が狭くなったら折り返す */
}
.h100vhBox {
  height: 100vh;
  text-align: center;
  display: flex; /* Flexboxで左右に並べる */
  justify-content: center;
  align-items: center; /* 垂直方向の中央揃え */
}
/* 左右に画像とテキストのレイアウト */
.media-text-block {
  display: flex; /* Flexboxで左右に並べる */
  align-items: center; /* 垂直方向の中央揃え */
  padding: 50px 0; /* 適度な余白 */
  /* スクロールエフェクトのための初期状態（非表示・少し移動） */
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* アニメーションの時間を設定 */
  height: 100vh;
}
/* 新しい左右反転用のCSSを追加 */
.media-text-block.reversed {
  /* 何も設定しなくても、HTMLでテキスト→画像の順にすれば逆になるが、
       Flexboxのorderプロパティを使うとHTMLの順序を保ったまま反転できる */
  flex-direction: row-reverse; /* 主軸の方向を反転させる */
  /* これだけで、text-containerが左に、image-containerが右に配置される */
}
.media-text-block.reversed .image-container {
  order: -1;
}
.media-text-block.is-visible {
  opacity: 1; /* 表示状態 */
  transform: translateY(0); /* 移動を元に戻す */
}
.image-container {
  flex: 1; /* 左側を1の比率で占める */
}
.text-container {
  flex: 1; /* 右側を1の比率で占める */
}
.media-text-block.reversed .text-container {
  text-align: right;
}
.text-container h3, .text-container p, .h100vhBox h1, .h100vhBox p {
  /* 必要に応じて、さらに細かい中央配置やフォント調整 */
  margin: 0 auto;
  max-width: 80%; /* テキストの幅を制限してバランス良く */
}
/* タブレット (例: 1024px以下) */
@media screen and (max-width: 1024px) {
  /* 1. 全体の幅の調整 */
  .container {
    width: 90%; /* 幅を%に変えて可変にする */
    padding: 15px;
  }
  /* 2. 2カラムレイアウトを維持しつつ調整 */
  .main-content, .sidebar {
    width: 100%; /* 1カラムにする場合は100%に */
    float: none; /* floatを解除 */
  }
  /* 3. フォントサイズの調整（任意） */
  body {
    font-size: 15px;
  }
}
/* スマートフォン (例: 767px以下) */
@media screen and (max-width: 767px) {
  /* 1. 幅の調整 */
  .container {
    padding: 10px;
  }
  /* 2. 画像の最適化（PC基準でも設定するのが理想だが、ここで改めて確認） */
  img {
    max-width: 100%;
    height: auto;
  }
  /* 3. ナビゲーションの変更 */
  .global-nav {
    /* ハンバーガーメニューなど、モバイルに特化したデザインに変更 */
    display: none; /* デフォルトで非表示にする場合 */
  }
  /* 4. フォントサイズの調整 */
  body {
    font-size: 14px;
  }
  /* 1. 親要素のFlexbox設定を変更 */
  .split-container {
    /* 横並びをやめ、要素を縦に並べる（必要に応じて） */
    flex-direction: column;
    gap: 0; /* 縦積みになったので、横の隙間は不要に */
  }
  /* 2. 子要素の幅を100%にする */
  .half-column, .column30, .column70 {
    width: 100%; /* ★最重要: 画面幅いっぱいに広げる */
    margin-bottom: 20px; /* 各セクションの下に隙間を開ける */
  }
  .grid-item {
    width: 100%; /* ★最重要: 画面幅いっぱいに広げる */
  }
  /* 左右レイアウトの親要素に適用 */
  .media-text-block {
    /* Flexアイテムの並び順を縦方向（上から下）に変更 */
    flex-direction: column;
  }
  /* 左右反転用の設定をリセット */
  .media-text-block.reversed {
    /* 通常レイアウト（縦並び）に戻すため、flex-directionをリセット */
    flex-direction: column;
  }
  /* orderプロパティのリセット */
  /* reversedクラスで設定した順序もリセットし、HTMLの記述順に戻す */
  .media-text-block .image-container, .media-text-block .text-container, .media-text-block.reversed .image-container, .media-text-block.reversed .text-container {
    order: 0 !important; /* orderをリセット（通常はorderの初期値は0） */
  }
  /* 画像とテキストコンテナの幅を調整 */
  .image-container, .text-container {
    /* 幅をコンテナいっぱいに広げる */
    width: 100%;
    /* Flexの比率指定もリセット */
    flex: none;
    /* 縦に並んだ際の上下の余白 */
    margin-bottom: 20px;
  }
  /* テキストの中央寄せを左寄せに戻すか検討 */
  .text-container, .media-text-block.reversed .text-container {
    text-align: left; /* スマホでは左寄せの方が読みやすいことが多い */
  }
  .h100vhBox h2 {
    padding-left: 40px;
  }
}