/*--------------------------------------------------
  リセット・基本設定
--------------------------------------------------*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  /* 例: モダンなゴシック体 Webフォント (Noto Sans JP) */
  /* font-family: 'Noto Sans JP', sans-serif; */
  font-family: 'Helvetica', Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #fff;
  /* 基本の背景色 */
}

/* ズームインアニメーション */
@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.7);
    /* 開始時: 70%のサイズで透明 */
  }

  to {
    opacity: 1;
    transform: scale(1);
    /* 終了時: 100%のサイズで不透明 */
  }
}

@keyframes poyoyon3 {

  0%,
  40% {
    transform: skew(0deg, 0deg);
  }

  5% {
    transform: skew(5deg, 5deg);
  }

  10% {
    transform: skew(-4deg, -4deg);
  }

  15% {
    transform: skew(3deg, 3deg);
  }

  20% {
    transform: skew(-2deg, -2deg);
  }

  25% {
    transform: skew(1deg, 1deg);
  }

  30% {
    transform: skew(-0.6deg, -0.6deg);
  }

  35% {
    transform: skew(0.3deg, 0.3deg);
  }

  /* 40% から 100% は skew(0deg, 0deg) のまま */
}

@keyframes pulseBannerText {

  0%,
  100% {
    /* 開始時と終了時は通常のサイズ */
    transform: scale(1);
  }

  50% {
    /* アニメーションの中間で少しだけ拡大 */
    transform: scale(1.05);
    /* 1.05 = 5%拡大 (この数値を調整して拡大率を変更) */
  }
}

/*--------------------------------------------------
  コンテナ
--------------------------------------------------*/
.container {
  width: 100%;
  max-width: 1300px;
  /* PCでの最大幅 */
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  /* コンテナ左右に少し余白 */
  padding-right: 15px;
}

/*--------------------------------------------------
  セクション全般
--------------------------------------------------*/
.section {
  position: relative;
  overflow: hidden;
  /* はみ出し防止 */
  padding-top: 60px;
  /* 上下の余白 */
  padding-bottom: 60px;
}



.section-bg-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 縦横比維持しつつ全体をカバー */
  object-position: center;
  /* 中央を基準に表示 */
}

/* セクションコンテンツ（背景に重ねる部分） */
.section-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 20px;
  /* コンテンツ周りの余白 */
}

/*--------------------------------------------------
  ヘッダー
  - Flexboxでレイアウト
  - 右上ボタンは固定
--------------------------------------------------*/
.header {
  background: #fff;
  padding: 5px 0;
  /* 上下の余白 */
  border-bottom: 1px solid #eee;
  /* 区切り線 */
  position: sticky;
  /* スクロールに追従する場合 */
  top: 0;
  z-index: 1000;
}

.header .container {
  /* ヘッダー内のコンテナ設定 */
  display: flex;
  justify-content: space-between;
  /* 左:ロゴ+スローガン / 右:ボタン群 */
  align-items: center;
  /* 全体を垂直中央揃え */
  width: 100%;
  max-width: none;
  padding: 0 20px;
  /* ヘッダー左右の余白 */
}

/* ヘッダーロゴのリンクスタイル */
.header-logo-link {
  display: inline-block;
  /* または block */
  text-decoration: none;
  /* リンクの下線を消す */
  border: none;
  /* リンクの枠線を消す */
  line-height: 0;
  /* 画像下の余計なスペースをなくす */
}


/* ロゴとスローガンを含む左側エリア */
.header-left {
  display: flex;
  /* 中の要素(ロゴ, スローガン)を横並びに */
  align-items: center;
  /* 垂直方向中央揃え */
}

/* ロゴ画像のスタイル */
.header-left img {
  /* より具体的にセレクタを指定してもOK */
  height: 50px;
  /* ロゴの高さを適切なサイズに調整 */
  width: 150px;
  /* 幅は自動 */
  vertical-align: middle;
  /*念のため垂直位置を調整 */
}

/* スローガン（タイトル）のスタイル */
.header-slogan {
  margin-left: 15px;
  /* ロゴの右側に余白を作る */
  color: #333;
  font-weight: 580;
  line-height: 1.2;
  /* ロゴの高さと行高を合わせる */
  white-space: nowrap;
  /* 念のため改行を防ぐ */
  font-style: oblique;
  font-size: 16px;
  /* フォントサイズを変更 */
}

/* 右上のボタン群（固定）- PC表示用 */
.header-right {
  position: fixed;
  top: 20px;
  right: 15px;
  display: flex;
  flex-direction: column;
  /* 縦積み */
  align-items: flex-end;
  /* 右端揃え */
  z-index: 1001;
  gap: 8px;
  /* ボタン間の隙間をgapで指定 */
}

/* PC版 ボタン共通スタイル */
.header-right .btn {
  /* --- 元々のPC版のスタイルを指定 --- */
  color: #fff;
  padding: 8px 20px;
  /* PC用パディング */
  text-decoration: none;
  border-radius: 999px;
  /* PC用角丸 */
  font-size: 14px;
  /* PC用フォントサイズ */
  font-weight: bold;
  width: 220px;
  /* PC用幅 */
  height: 60px;
  /* PC用高さ */
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  letter-spacing: 0.1rem;

  /* PC版レイアウト: テキスト中央揃え */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* ★★ PC版ではモバイル用要素(アイコン、テキスト)を非表示 ★★ */
.header-right .btn .icon-mobile,
.header-right .btn .text-mobile {
  display: none;
}

/* ★★ PC版ではPC用テキストを表示 ★★ */
.header-right .btn .text-pc {
  display: inline;
  /* または block など元のレイアウトに合わせて */
}

/* --- PC版 個別ボタン背景色 --- */
.header-right .line-btn {
  background: #00B900;
}

.header-right .inquiry-btn {
  background: linear-gradient(to right, #ff8c00, #ffd700);
}

/* --- PC版 ホバー効果 --- */
.header-right .line-btn:hover {
  background: #fff;
  color: #06C755;
  border-color: #06C755;
}

.header-right .inquiry-btn:hover {
  background: #fff;
  color: #ff8c00;
  border-color: #ff8c00;
}


/* =============================================== */
/* モバイル版 (@media max-width: 768px) スタイル */
/* =============================================== */
@media (max-width: 768px) {

  .header-left {
    display: flex;
    /* 中の要素(ロゴ, スローガン)を横並びに */
    align-items: center;
    /* 垂直方向中央揃え */
  }

  /* ロゴ画像のスタイル */
  .header-left img {
    /* より具体的にセレクタを指定してもOK */
    height: 25px;
    /* ロゴの高さを適切なサイズに調整 */
    width: 75px;
    /* 幅は自動 */
    vertical-align: middle;
    /*念のため垂直位置を調整 */
  }

  .header-slogan {
    font-size: 13px;
    text-align: center;
    /* スローガンを中央揃えにする */
    margin-left: 3rem;
    /* ロゴとの余白*/
    font-weight: 570;
  }

  /* --- モバイル版 ボタンエリア (.header-right) --- */
  .header-right {
    position: fixed;
    bottom: 0;
    top: auto;
    left: 0;
    width: 100%;
    right: auto;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-around;
    align-items: center;
    padding: 0;
    z-index: 1001;
    gap: 0px;
    box-sizing: border-box;
  }

  /* --- モバイル版 ボタン共通スタイル --- */
  .header-right .btn {
    /* 横幅に関する指定 (flex-grow, max-width) は削除 */
    height: auto;
    /* 高さは自動 */
    padding: 0;
    /* クリックしやすいように少し余白をとる */
    /* 背景色、境界線、角丸などはリセット (アイコン画像が主役のため) */
    background: none;
    border: none;
    border-radius: 0;
    /* ボタン内のflex設定は削除 */
    /* display: flex; flex-direction: column; */
    line-height: 1;
    /* 行の高さをリセット */
    /* 他の不要なテキスト関連スタイルもリセット */
    font-weight: normal;
    letter-spacing: normal;
  }

  /* ★★ モバイル版ではPC用テキストを非表示 ★★ */
  .header-right .btn .text-pc {
    display: none;
  }

  /* ★★ Font Awesome アイコン (お問い合わせボタン内) のスタイル ★★ */
  .header-right .btn .icon-mobile {
    display: block;
    /* 画像を行ブロック要素として扱う */
    width: 100%;
    /* ★ アイコンの幅 (調整してください) */
    height: 100%;
    /* ★ アイコンの高さ (調整してください) */
    object-fit: contain;
    /* 画像の比率を保って表示 */
    padding: 0;
    margin: 0;
    border: 0;
    /* margin: 0 auto; は不要 (親が flex で align-items しているため) */
  }

  /* ★★ モバイル版ではモバイル用テキストを表示 ★★ */
  .header-right .btn .text-mobile {
    display: none
      /* 親(ボタン)の色を継承 */
  }


}

/*--------------------------------------------------
  ヒーローセクション
--------------------------------------------------*/
.hero {
  padding: 0;
  margin-bottom: 0;
  border: 0;
  overflow: hidden; /* 動画がはみ出さないように念のため追加 */
}

.hero-container {
  text-align: center;
  margin: 0 auto;
  max-width: 100%;
  border: 0;
  position: relative; /* 必要に応じて子要素の位置調整の基準にする */
  line-height: 0; /* video要素下の余白対策 */
}

.hero-video-mobile {
  display: none; /* モバイル用動画をデフォルトで非表示 */
}

.hero-main-video,
.hero-video-mobile {
  display: block;
  width: 100%;   /* 横幅いっぱいに */
  height: auto;  /* 高さは自動で比率を保つ */
  object-fit: cover; /* 動画のアスペクト比を保ちつつ、要素全体を覆うように調整 */
                     /* contain にすると動画全体が表示されますが、余白ができる場合があります */
  margin: 0 auto; /* 中央寄せ */

}

.hero-video-mobile {
  display: none; /* モバイル用動画をデフォルトで非表示 */}
  

/* ヒーロー レスポンシブ対応 */
@media (max-width: 768px) {
  .hero-main-video {
    display: none; /* PC用動画を非表示にする */
  }

  .hero-video-mobile {
    display: block; /* モバイル用動画を表示する */
    width: 100%;
    height: auto;
    /* object-fit は共通スタイルで指定済みなのでここでは不要な場合があります */
  }

  .hero {
    margin-bottom: 0;
  }
}

/*--------------------------------------------------
  CTAセクション (余白最小化 & 幅いっぱい表示)
--------------------------------------------------*/

/* CTAセクション */
.cta {
  text-align: center;
  /* ボタンや画像を中央寄せにする場合に影響 */
  padding: 0;
  margin: 0;
  /* 必要に応じて上下マージンを追加 (例: .cta + .cta { margin-top: 20px; }) */
  max-width: none;
  width: 100%;
  box-sizing: border-box;
}

/* CTAコンテナ */
.cta-container {
  max-width: none;
  padding: 0;
  margin: 0;
  /* 背景色はテーマクラスで指定 */
}

/* CTAボタン (<a>) */
.cta-button {
  display: block;
  /* モバイルでのデフォルト表示 */
  line-height: 1;
  margin: 0 auto;
  /* ボタン自体を中央寄せする場合 (親のtext-align:centerと併用または代替) */
  padding: 0;
  max-width: none;
  /* PC版ではFlexコンテナとしての最大幅を別途設定 */
  text-decoration: none;
  /* リンクの下線を除去 */
  font-size: 0;
  /* img要素間の隙間対策 */
}

/* CTA画像 - 共通スタイル (必要であれば) */
.cta-image {
  height: auto;
  vertical-align: middle;
  /* 画像の縦位置調整 */
}

/* PC用画像 (デフォルトでは非表示、PC幅で表示) */
.cta-image-pc {
  display: none;
  /* width, max-width はPC表示時に設定 */
}

/* モバイル用画像 (デフォルトで表示、PC幅で非表示) */
.cta-image-mobile {
  display: block;
  /* モバイルではこちらを表示 */
  width: 100%;
  /* 親要素の幅に合わせる */
  max-width: 600px;
  /* モバイルでの画像の最大幅 (例: ユーザー指定の800pxより小さめを推奨) */
  margin: 0 auto;
  /* 中央寄せ */
  margin-bottom: 20px;
}


/*--------------------------------------------------
  レスポンシブ対応: PC表示 (ブレークポイント例: 768px以上)
--------------------------------------------------*/
@media (min-width: 768px) {
  .cta-button {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 100%; /* ★修正点: 全体の幅を親要素の90%に設定（調整推奨） */
    /* あるいは、より大きな画面で最大値を持たせたい場合： */
    /* max-width: 1200px; */ /* これを設定しつつ、下のwidth: 90%も併用 */
    width: 90%; /* ★追加: 画面が狭いときに縮小されるように */
    margin: 0 auto;
    /* gap: 8px; */ /* gapを使用する場合はコメント解除 */
  }

  .cta-image-pc {
    display: block;
    flex: 0 0 auto;
    max-width: 250px; /* 各画像の最大幅（これ以上大きくならない） */
    width: 90%; /* ★修正点: 各画像が親要素の25%の幅になるように */
    padding-top: 20px;
    /* padding: 0 2px; */ /* gapを使用する場合は不要 */
    box-sizing: border-box;
  }


  /* 画像間の隙間を均一にする調整 (paddingを使用する場合) */
  .cta-image-pc:first-child {
    padding-left: 0;
  }

  .cta-image-pc:last-child {
    padding-right: 0;
  }

  .cta-image-mobile {
    display: none !important;
    /* PCではモバイル用画像を確実に非表示 */
  }
}

/*--------------------------------------------------
  背景色のバリエーション
--------------------------------------------------*/
/* デフォルトテーマ (例: 白背景) */
.cta--theme-default .cta-container {
  background-color: #ffffff;
  /* 元の指定 #ffff */
}

/* 代替テーマ (例: 明るいグレー背景) */
.cta--theme-alternate .cta-container {
  background-color: #E4EEF0;
}

/*--------------------------------------------------
  プログラムセクション
--------------------------------------------------*/
.section-program {
  position: relative;
  /* ::after疑似要素のために必要 */
  /* .section を継承 */
  padding-top: 5px;
  /* 上下padding調整 */
  padding-bottom: 80px;
}

.section-program .section-content {
  background: transparent !important;
  position: relative;
  /* コンテンツをオーバーレイより手前に */
  z-index: 1;
}

.section-program-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  /* 一番奥 */
}

.program-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 背景画像への薄水色オーバーレイ */
.section-program::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* ★ 薄水色の半透明オーバーレイ (色・透明度は調整可能) */
  background: rgba(127, 144, 188, 0.75);
  /* 例: LightBlueの60%透明度 */
  z-index: -1;
  /* 背景画像とコンテンツの間 */
}

/* ロゴやテキストを含むコンテナ */
.program-container {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
}

.program-logo {
  max-width: 220px;
  display: block;
  margin: 0 auto 0;
}

.program-text {
  font-size: 2rem;
  text-align: center;
  color: #fff;
  margin-bottom: 30px;
  /* 動画との間隔 */
  margin-top: 0;
  /* ブラウザデフォルトマージンを打ち消し */
  padding: 1px 2px;
  display: inline-block;
  border-radius: 8px;
  line-height: 1.4;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.9);
  /* 影を少し濃く */

}

.program-text .highlight-keyword {
  /* --- マーカー風スタイル --- */
  background: linear-gradient(transparent 65%, #f2e985 65%);
  /* 黄色の蛍光マーカー風下線 */
  padding: 0 0.1em;
}


/* ▼▼▼ 動画関連のスタイル ▼▼▼ */
/* YouTube動画をレスポンシブにするためのラッパー */
.video-wrapper {
  position: relative;
  /* iframeを絶対配置するための基準 */
  width: 50%;
  /* 幅をコンテナに合わせる */
  padding-bottom: 28.125%;
  /* 16:9 のアスペクト比を維持 (高さ / 幅 * 100) */
  height: 0;
  /* 高さはpadding-bottomで確保するので0に */
  overflow: hidden;
  /* はみ出しを隠す */
  background-color: #000;
  /* 動画読み込み中の背景色 (任意) */

  /* --- ↓↓↓ 中央揃えにするための追加 ↓↓↓ --- */
  margin-left: auto;
  /* 左マージンを自動に */
  margin-right: auto;
  /* 右マージンを自動に */
  /* --- ↑↑↑ 中央揃えにするための追加 ↑↑↑ --- */

}

/* video-wrapper内のiframeのスタイル */
.video-wrapper iframe {
  position: absolute;
  /* 親要素(.video-wrapper)を基準に絶対配置 */
  top: 0;
  left: 0;
  width: 100%;
  /* 幅を親要素に合わせる */
  height: 100%;
  /* 高さを親要素に合わせる */
  border: 0;
  /* デフォルトの枠線を消す */
}

/* ▲▲▲ 動画関連のスタイル ▲▲▲ */


/* 3枚の画像を囲む親コンテナ (PC版の基本レイアウト) */
.section-program .image-gallery-container {
  display: flex;
  /* Flexboxで横並び */
  flex-wrap: nowrap;
  /* PCでは折り返さない想定 */
  justify-content: space-between;
  /* ★ 両端揃えでスペースを分配 */
  gap: 30px;
  /* ★ メイン画像とサブ画像群の間の隙間 */
  margin-top: 50px;
  margin-bottom: 40px;
  padding: 30px;
  max-width: 1000px;
  height: 600px;
  margin-left: auto;
  margin-right: auto;
  background-color: #fff;
  border-radius: 20px;
  box-sizing: border-box;
}

/* ★ 1枚目の画像アイテム (メイン) - PC版 カード*/
.section-program .gallery-item-main {
  flex: 0 0 45%;
  /* ★ 幅を約45%に (調整可)、伸縮しない */
  width: 350px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* 中身を上下に分配 */
  position: relative;
  /* ★ カーテンアニメーションの基準 */
  overflow: hidden;
  /* ★ カーテンアニメーションのため */
  height: 500px;
  padding-right: 0;
}

/* ★ ブラインドの羽根を覆うオーバーレイコンテナ */
.section-program .gallery-item-main .blind-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  /* 水平の羽根を縦に並べる */
  z-index: 2;
  /* ★ 画像(0)より手前、カーテン(3)より後ろ */
}

/* ★ 個々のブラインドの羽根 */
.section-program .gallery-item-main .blind-slat {
  width: 100%;
  flex-grow: 1;
  /* 親要素の高さを羽根の数で均等に分割 */
  background-color: #ffffff;
  /* 例: カーテンの色より少し明るいブラインドの色 */
  transform-origin: top;
  /* アニメーションの基点を上に設定（上に向かって縮む） */
  opacity: 1;
  transform: scaleX(1); /* 初期は閉じている（X軸方向に pełny） */

  /* 初期状態は不透明 */

  /* アニメーションの適用 */
  /*animation-name: blindOpenEffect;
  animation-duration: 1s;
  /* 各羽根のアニメーション時間 (調整可) */
  /*animation-fill-mode: forwards;
  /*animation-timing-function: ease-in-out;
  /* animation-delay は以下で個別に設定 */
}

/* ★ 2枚目、3枚目の各画像アイテム (サブ) - PC版 */
.section-program .gallery-item-sub {
  flex: 1;
  /* 高さを均等に分ける (flex-direction: column の場合) */
  background-color: #ffff;
  /* 例: サブアイテムの背景 */
  padding: 5px;
  border-radius: 15px;
  text-align: center;
  display: flex;
  flex-direction: column;
  height: 250px;
  justify-content: center;
  align-items: center;
  /* ★ 子要素群全体を垂直方向に中央揃え */
  height: 500px;
  /* ★ フェードインアニメーション */
  opacity: 0;
  transform: translateY(20px);
  /*animation: fade-in-item 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;*/
}

/* ★ 1枚目の画像 (メイン) - ブラインドで表示されるコンテンツ */
.section-program .gallery-item-main .gallery-image.gallery-image-content {
  display: block;
  width: 100%;
  height: calc(100% - 80px);
  /* この値はボタンの高さとマージンで調整 */

  object-fit: contain;
  /* ★ coverにしてコンテナを埋める（containだと余白が出る） */
  border-radius: 20px;
  /* ★ 親コンテナに角丸があるので画像自体は角丸なしで良い場合も */
  margin-bottom: 0;
  /* ボタンがある場合はボタンのスタイルで調整 */
  position: relative;
  z-index: 0;
  /* スラットより奥 */
}


/* ★ 2枚目と3枚目の画像を囲むコンテナ - PC版 */
.section-program .gallery-sub-items {
  flex: 1 1 50%;
  /* 残りのスペースを取る */
  display: flex;
  flex-direction: row;
  /* サブアイテムを縦に並べる場合 */
  gap: 20px;
  /* サブアイテム間の隙間 */
  padding-bottom: 0;
  margin-bottom: 0;
}






/* ★ サブ画像 (2、3枚目) */
.section-program .gallery-item-sub .gallery-image {
  display: block;
  object-fit: contain;
  width: 100%;
  height: auto;
  /* ★ 高さは自動とし、画像の本来のアスペクト比を尊重 */
  max-height: calc(100% - 45px);
  border-radius: 8px;
  margin-left: auto;
  /* 幅が100%なので実質効果なし、念のため */
  margin-right: auto;

}

/* 画像キャプション/店舗名 (スタイルは既存のものを流用または調整) */
.section-program .gallery-caption {
  margin-top: 10px;
  /* ★ 少し調整 */
  font-size: 1.3rem;
  /* ★ 少し小さく */
  color: #333;
  line-height: 1.4;
}



/* 誘導ボタン (ギャラリーアイテム内) */
.section-program .store-link-banner.gallery-item-banner {
  display: block;
  /* ★ ブロック要素に変更して margin auto で中央揃え */
  width: 100%;
  /* ★ 親要素に対して幅100% */
  max-width: 300px;
  /* ★ 最大幅を指定 (この幅で中央揃えされる) */
  margin-left: auto;
  /* ★ 左マージン自動 */
  margin-right: auto;
  /* ★ 右マージン自動 */
  margin-top: auto;
  /* 既存: アイテム下端に寄せる */
  padding: 5px 10px;
  font-size: 1.5rem;
  letter-spacing: 0.25rem;
  text-align: center;
  /* ボタン内のテキストは中央 (基本スタイルで指定済みだが念のため) */

  /* ★ 下からライズするアニメーション */
  opacity: 0;
  /* 初期状態は非表示 */
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* アニメーションの代わりにトランジションでも良いが、キーフレームアニメーションを使うなら下記 */
  
  /*animation: rise-from-bottom 0.7s 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  /* アニメーション: 名前 時間 遅延 イージング 終了状態維持 */
  /* 遅延時間はメイン画像のカーテンとフェードインの後になるように調整 */
}

/* バナー表示エリア (program-banner-area) */
.program-banner-area {
  display: none;
  text-align: center;
  /* ★ このエリア内のインラインブロック要素を中央揃え */
  margin-top: 40px;
  margin-bottom: 0;
  padding: 0 15px;
}

/* (このバナーは元々 .store-link-banner の基本スタイルで inline-block & text-align:center で中央揃えされているはず) */
.program-banner-area .store-link-banner {
  /* program-section-banner クラスが付いていればそれでもOK */
  /* ★ 下からライズするアニメーション */
  opacity: 0;
  transform: translateY(30px);/* 初期状態は非表示 */
  /*animation: rise-from-bottom 0.7s 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  /* 遅延時間は適宜調整 */
  /* PCでは .program-banner-area が display: none なので、このアニメーションは実質モバイルでのみ影響 */
}

/* --- .is-visible クラスが付与された時のアニメーション適用 --- */

/* ★ メイン画像のブラインド：.is-visible が親要素 .gallery-item-main に付与されたらアニメーション開始 */
.section-program .gallery-item-main.is-visible .blind-slat {
  animation-name: blindOpenEffect;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}

/* 遅延設定も .is-visible を起点に */
.section-program .gallery-item-main.is-visible .blind-slat:nth-child(1) { animation-delay: 0.2s; } /* 表示されてからの遅延なので調整 */
.section-program .gallery-item-main.is-visible .blind-slat:nth-child(2) { animation-delay: 0.4s; }
.section-program .gallery-item-main.is-visible .blind-slat:nth-child(3) { animation-delay: 0.6s; }
.section-program .gallery-item-main.is-visible .blind-slat:nth-child(4) { animation-delay: 0.8s; }
.section-program .gallery-item-main.is-visible .blind-slat:nth-child(5) { animation-delay: 1.0s; }


/* ★ サブアイテム：.is-visible が付与されたらアニメーション開始 */
.section-program .gallery-item-sub.is-visible {
  opacity: 1; /* animation-fill-mode: forwards があれば不要な場合も */
  transform: translateY(0); /* animation-fill-mode: forwards があれば不要な場合も */
  animation: fade-in-item 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
}
/* 遅延設定も .is-visible を起点に */
.section-program .gallery-item-sub.is-visible:nth-child(1) { animation-delay: 0.3s; } /* 表示されてからの遅延なので調整 */
.section-program .gallery-item-sub.is-visible:nth-child(2) { animation-delay: 0.5s; }


/* 誘導ボタンのアニメーション */
.section-program .store-link-banner.gallery-item-banner.is-visible,
.program-banner-area .store-link-banner.is-visible {
  animation: rise-from-bottom 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
/* 誘導ボタンの遅延設定 (要素が表示されてからの遅延) */
/* メイン画像のブラインドやサブアイテムのアニメーションがある程度進んでから表示する場合 */
.section-program .store-link-banner.gallery-item-banner.is-visible {
  animation-delay: 1.5s; /* 例: ブラインドとサブアイテムのアニメーション後 */
}
.program-banner-area .store-link-banner.is-visible {
  /* こちらは独立している、または gallery-item-sub と同じタイミングなどで良い場合 */
  animation-delay: 0.6s; /* 例: サブアイテムの2つ目と同時くらい */
}



/* --- アニメーションキーフレーム --- */

@keyframes blindOpenEffect {
  from {
    transform: scaleX(1);
    /* 通常の高さ */
    opacity: 1;
  }

  to {
    transform: scaleX(0);
    /* 高さを0にして見えなくする */
    opacity: 0;
  }
}

@keyframes fade-in-item {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- 新しいアニメーションキーフレーム --- */
@keyframes rise-from-bottom {
  from {
    opacity: 0;
    transform: translateY(30px);
    /* 少し下から開始 */
  }

  to {
    opacity: 1;
    transform: translateY(0);
    /* 本来の位置へ */
  }
}

/* -------------------------------------------------- */
/* store-link-banner の基本スタイル（再掲）          */
/* -------------------------------------------------- */
.store-link-banner {
  padding: 12px 35px;
  /* ★★★ オレンジから黄色へのグラデーション背景 ★★★ */
  background: linear-gradient(to right, #ff8c00, #eff757);
  color: #ffffff;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  border-radius: 999px;
  /* 角丸（ピル形状） */
  border: 1px solid transparent;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.store-link-banner:hover {
  background: #ffffff;
  color: #ff8c00;
  border-color: #ff8c00;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


.program-section-banner {
  display: none;

}

/* =============================================== */
/* レスポンシブ対応 (モバイル: 例 768px以下)       */
/* =============================================== */
@media (max-width: 768px) {


  .section-program {
    padding-bottom: 5px;
  }

  /* セクション全体のコンテナ左右余白調整 */
  .section-program .container {
    padding-left: 1px;
    padding-right: 1px;
    max-width: none;
    width: 100%;
    box-sizing: border-box;
  }

  /* 画像ギャラリー全体のコンテナ */
  .section-program .image-gallery-container {
    display: flex;
    /* ★★★ メイン画像とサブ画像群を縦に積む ★★★ */
    flex-direction: column;
    align-items: center;
    /* 中央揃え */
    gap: 25px;
    /* ★ メイン画像群とサブ画像群の間の隙間 */
    margin-top: 20px;
    /* 上マージン調整 */
    width: 100%;
    /* 親(.container)に対して100% */
    margin-left: auto;
    /* ★ 中央揃えにするために追加 */
    margin-right: auto;
    /* ★ 中央揃えにするために追加 */
    height: auto;
    /* ★ 高さはコンテンツに合わせて自動調整 */
    padding-left: 10px;
    padding-right: 10px;

    background-color: #fff;
    /* PC版のスタイルを維持 */
    border-radius: 20px;
    /* PC版のスタイルを維持 */
    box-sizing: border-box;
    /* PC版のスタイルを維持 */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    /* PC版の影を適用 (任意) */
  }

  .section-program .gallery-item-main>.store-link-banner.gallery-item-banner {
    display: none;
  }

  /* 画像の直接の親要素（例: .gallery-item-main）のスタイル */
  .section-program .gallery-item-main {
    width: 100%;
    /* 親コンテナいっぱいに広がるようにする */
    margin-right: 5px;
    margin-left: 5px;
    padding-left: 0px;
    /* 画像の左側に5pxの余白を確保 */
    padding-right: 0px;
    /* 画像の右側に5pxの余白を確保 */
    box-sizing: border-box;
    /* paddingを含めて幅を計算 */
    /* --- モバイルのメイン画像もアニメーションさせる場合 (例: フェードイン) --- */
    opacity: 0; /* 初期状態 */
    transform: translateY(10px); /* 少し下にずらすなど */
  }

  /* モバイルのメイン画像コンテナが表示された時のアニメーション */
  .section-program .gallery-item-main.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    transition-delay: 0.1s; /* 少し遅れて開始 */
  }


  /* --- 1枚目の画像アイテム (メイン) --- */
  .section-program .gallery-item-main img {
    display: block;
    width: 100%;
    /* ★変更: 親要素のパディングの内側の幅いっぱいに */
    max-width: 390px;
    /* ★追加: 画像の最大幅を350pxに制限 */
    height: auto;
    /* ★変更推奨: アスペクト比を保つためにautoに。固定したい場合は350pxなど */
    /* height: 350px; */
    box-sizing: border-box;
    border-radius: 15px;
    overflow: hidden;
    margin-top: 1px;
    background-color: #ffff;
  }

  /* --- 2枚目と3枚目の画像を囲むコンテナ --- */
  .section-program .gallery-sub-items {
    display: flex;
    flex-direction: row;
    gap: 5px;
    /* ★ サブ画像間の隙間を少し広げる例 */
    width: 100%;
    /* 親コンテナ(.image-gallery-container)の幅いっぱいに */
    height: 100%;
  }

  /* --- 2枚目、3枚目の各画像アイテム (サブ) --- */
  .section-program .gallery-item-sub {
    flex: 1;
    height: 160px;
    padding: 10px;
    border-radius: 10px;
    background-color: #ffffff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-align: center;
    }
    
  .section-program .gallery-item-sub .gallery-image {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    margin-bottom: 8px;
    border-radius: 6px;
    /* サブ画像の角丸 */
  }


  .section-program .gallery-caption {
    font-size: 1rem;
    /* モバイル用フォントサイズ */
    line-height: 1.3;
    padding: 0 5px 5px 5px;
    /* 下に少しパディング */
    margin-top: auto;
  }


  /* .program-text, .video-wrapper, .program-banner-area, .store-link-banner は既存のモバイルスタイルを維持 */
  .section-program .program-text {
    font-size: 1.2rem;
    margin-bottom: 25px;
    line-height: 1.5;
  }

  .video-wrapper {
    position: relative;
    width: 95%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    background-color: #000;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
  }

  .program-banner-area {
    display: block;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 20px;
    padding: 0;
  }

  .store-link-banner {
    /* .program-banner-area 内のバナーを想定 */
    padding: 10px 40px;
    /* パディングを少し調整 */
    font-size: 1.3rem;
    /* フォントサイズを少し調整 */
    display: inline-block;
    width: 300px;
    letter-spacing: 1px;
    box-sizing: border-box;
  }
}

/*--------------------------------------------------
  目的セクション
--------------------------------------------------*/
.purpose {
  padding-top: 45px;
  /* 上パディングは維持 */
  padding-bottom: 10px;
  /* ★★★ 下パディングを減らす (例: 20px) ★★★ */
  padding-left: 0;
  /* 左右パディング (元の指定に合わせる) */
  padding-right: 0;
  /* 左右パディング (元の指定に合わせる) */
  background-color: #e0f7ff;
  text-align: center;
}


.purpose .container {
  font-size: 2.2rem;
  /* 見出しサイズ */
  margin-bottom: 0;
  /* 下マージンは不要に */
  color: #333;
  line-height: 1.6;
  /* 行間調整 */
  letter-spacing: 0.5rem;

}

/* マーカー風スタイル */
.highlight-marker {
  background: linear-gradient(transparent 65%, #fff799 65%);
  /* 黄色のマーカー風下線 */
  padding: 0 0.1em;
  /* マーカーの左右に少しだけ余白 */
  display: inline;
  /* インライン要素として扱う */
  /* 他のマーカースタイル案 */
  /* background-color: rgba(255, 247, 153, 0.7); /* 半透明の黄色 */
  /* box-shadow: 0 0.5em 0 0 #fff799 inset; /* 下線風 */
}

/* レスポンシブ対応（必要に応じて） */
@media (max-width: 768px) {
  .purpose .container {
    font-size: 1.4rem;
    /* モバイルでは少し小さく */
    letter-spacing: 0.1rem;
    padding-bottom: 0;
    margin-bottom: 0;
  }

  .highlight-marker {
    background: linear-gradient(transparent 60%, #fff799 60%);
    /* モバイルではマーカー位置調整 */
  }
}

/*--------------------------------------------------
  目的セクション
--------------------------------------------------*/
.section-troubles {
  padding-top: 10px;
  /* ★★★ 上パディングを減らす (例: 30px) ★★★ */
  padding-bottom: 60px;
  /* 下パディングは維持 */
  padding-left: 20px;
  /* 左右パディング (元の指定に合わせる) */
  padding-right: 20px;
  /* 左右パディング (元の指定に合わせる) */
  background-color: #e0f7ff;
  /* 例: 白いカードが映える薄い背景色 */
}

/* 5つのアイテムを内包する大きな白いコンテナ */
.troubles-images {
  /* ▼▼▼ ここを白いコンテナにする ▼▼▼ */
  background-color: #ffffff;
  /* ★ 背景色: 白 */
  padding: 15px;
  /* ★ コンテナ内部の上下左右の余白 */
  border-radius: 10px;
  /* ★ コンテナの角丸 */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  /* ★ 影 */
  /* ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */

  max-width: 1300px;
  /* コンテナ全体の最大幅 */
  margin: 10px auto 0;
  /* 上マージンと左右auto(中央揃え) */
  box-sizing: border-box;

  /* ▼ 中のアイテムを横並びにする設定は維持 ▼ */
  display: flex;
  justify-content: center;
  /* または space-around */
  flex-wrap: wrap;
  gap: 20px;
  /* ★ アイテム間の隙間 */
  /* ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */
}

/* 各お悩みアイテム (背景や影は持たない) */
.trouble-item {
  position: relative;
  text-align: center;
  box-sizing: border-box;

  /* ▼ アイテム内の画像とテキストの配置 ▼ */
  display: block;
  flex-direction: column;
  align-items: center;
  flex-basis: 5px;
  padding-top: 30px;
  /* ★ 上下の余白を調整 (例: 15px、元の値があれば変更) */
  padding-bottom: 30px;
  /* ★ 上下の余白を調整 (例: 15px、元の値があれば変更) */
  width: 100%;

}


/* 上からフェードインのアニメーションのキーフレーム定義 */
@keyframes fadeInFromTopnayami {
  from {
    opacity: 0;
    transform: translateY(-30px);
    /* アニメーション開始時: 30px上からスライドしつつ透明 */
    /* この -30px の値は、どれくらい上から降りてくるかを調整できます */
  }

  to {
    opacity: 1;
    transform: translateY(0);
    /* アニメーション終了時: 元の画像位置で不透明 */
  }
}

/* アイテム内の画像 */
.trouble-item img {
  display: block;
  width: 220px;
  height: 90%;
  object-fit: cover;
  margin-bottom: 10px;
  border-radius: 20px;
  /* ★ コンテナの角丸 */
  opacity: 0;
  transform: translateY(-30px); /* ★ 初期状態は少し上に */
}

/* .is-visible が .trouble-item に付与されたら、中の img をアニメーション */
.trouble-item.is-visible img {
  animation-name: fadeInFromTopnayami;
  animation-duration: 0.8s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  /* animation-delay は以下で nth-child を使って個別に設定 */
}

/* 各アイテムの画像に遅延を設定 (例) */
.trouble-item.is-visible:nth-child(1) img { animation-delay: 0.1s; }
.trouble-item.is-visible:nth-child(2) img { animation-delay: 0.2s; }
.trouble-item.is-visible:nth-child(3) img { animation-delay: 0.3s; }
.trouble-item.is-visible:nth-child(4) img { animation-delay: 0.4s; }
.trouble-item.is-visible:nth-child(5) img { animation-delay: 0.5s; }
/* アイテムがさらにある場合は同様に追加 */



/* アイコンのスタイル */
.trouble-icon {
  position: absolute;
  width: 75px;
  /* アイコンの幅 (円の直径) */
  height: 75px;
  /* アイコンの高さ (円の直径) */
  border-radius: 50%;
  /* 円形にする */
  background: linear-gradient(to right, rgb(255, 157, 0), rgb(237, 243, 66));
  /* オレンジ→黄色のグラデーション */
  color: #fff;
  /* アイコン内テキストの色 (例: 白) */
  font-size: 14px;
  /* アイコン内テキストのサイズ (例) */
  font-weight: 100;
  display: flex;
  align-items: center;
  /* テキストを垂直方向に中央揃え */
  justify-content: center;
  /* テキストを水平方向に中央揃え */
  text-align: center;
  z-index: 10;
  /* 画像の上に表示 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  /* 任意: アイコンに影を付ける */
  padding: 2px;
  /* テキストが長くなった場合のための微調整用 */
  box-sizing: border-box;

  /* デスクトップ版のデフォルト位置: 右上 */
  /* top と right の値は、アイコンサイズや画像の角の丸みによって微調整してください */
  top: -15px;
  /* 画像の上端から少しはみ出すように配置 */
  right: -15px;
  /* 画像の右端から少しはみ出すように配置 */
}


/* --- ↑↑↑ アニメーション設定ここまで --- */


/* アイテム内のテキスト */
.trouble-item p {
  font-size: 0.95rem;
  line-height: 1.3;
  color: #333;
  /* ★ 白い背景に合わせた文字色 */
  margin-top: 0px;
}

/*--------------------------------------------------
  レスポンシブ対応 (お悩みセクション)
--------------------------------------------------*/
/* ▼▼▼ 768px以下で【縦並び(1列)】に変更 ▼▼▼ */
@media (max-width: 768px) {

  /* セクション全体のパディングをモバイル用に調整 (任意) */
  /* 親セクションのパディング調整 (これが.troubles-imagesの最大利用可能幅に影響) */
  .section-troubles {
    margin-top: 0;
    padding-top: 10px;
    padding-bottom: 5px;
    padding-left: 0px;
    /* ★ モバイルでの画面左右の余白 (例: 10px) */
    padding-right: 0px;
    /* ★ モバイルでの画面左右の余白 (例: 10px) */
    background-color: #e0f7ff;
    box-sizing: border-box;
    /* 念のため親にも指定 */
  }

  /* 白い背景のコンテナ (.troubles-images) */
  .troubles-images {
    /* PC版の max-width を確実に上書き */
    max-width: 100%;
    /* ★ 親要素の幅を上限とする */
    width: 100%;
    /* ★ 親要素のコンテンツ領域いっぱいに広がる */

    margin: -15px 0 0;
    /* 上マージン、左右マージン0 (width:100%なのでautoは不要) */
    padding-top: 15px;
    /* 白い背景の内側の余白 */
    padding-bottom: 2PX;

    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
    /* ★ これが非常に重要！ */

    display: flex;
    flex-direction: column;
    /* モバイルではアイテムを縦積み */
    align-items: center;
    /* 縦積みアイテムを中央揃え */
    gap: 5px;
  }

  /* 各お悩みアイテム (.trouble-item) */
  .trouble-item {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 300px;
    /* .troubles-imagesのパディングの内側で100%幅 */
    height: 250px;
    /* padding-top, padding-bottom は gap で管理するため不要なことが多い */
    padding-bottom: 1PX;
    padding-top: 1px;
  }



  .trouble-icon {
    width: 90px;
    /* モバイルではアイコンを少し小さくする例 */
    height: 90px;
    font-size: 15px;
  }

  /* 1番目、3番目、5番目 (奇数番目) のアイテムのアイコンを右上に配置 */
  .trouble-item:nth-child(odd) .trouble-icon {
    top: -10px;
    /* モバイル用に調整 (例) */
    right: -10px;
    /* モバイル用に調整 (例) */
    left: auto;
    /* 左の位置指定をリセット */
  }

  /* 2番目、4番目 (偶数番目) のアイテムのアイコンを左上に配置 */
  .trouble-item:nth-child(even) .trouble-icon {
    top: -10px;
    /* モバイル用に調整 (例) */
    left: -10px;
    /* モバイル用に調整 (例) */
    right: auto;
    /* 右の位置指定をリセット */
  }

  .trouble-item img {
    /* PC用の width, height を上書き */
    display: block;
    width: 98%;
    /* ★ 例: 幅をアイテム幅の75%に拡大 */
    height: 60%;
    object-fit: cover;
    /* cover を維持 */
    border-radius: 15px;
    /* 角丸は維持 */
    margin-bottom: 15px;
    /* ★ テキストとの間隔を少し設定 */

    /* ▲▲▲ */

  }

  .trouble-item p {
    font-size: 1rem;
    line-height: 1.3;
    color: #333;
    padding-bottom: 10px;
  }

}

/*--------------------------------------------------
  こんな経験はありませんか セクション
--------------------------------------------------*/
.section-experience {
  position: relative;
  /* 背景とオーバーレイのため */
  padding: 80px 0;
  /* セクション上下の余白 */
  color: #fff;
  /* デフォルト文字色 (背景による) */
  overflow: hidden;
  /* はみ出し防止 */
}

/* 背景画像コンテナ */
.section-experience .section-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  /* 一番後ろ */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 120px), 50% 100%, 0 calc(100% - 120px));

}

.section-experience .section-bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 画像をカバー表示 */

}

/* 薄水色オーバーレイ */
.section-experience::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* ▼ 薄水色の半透明 (色・透明度は調整可能) ▼ */
  background: rgba(127, 144, 188, 0.75);
  /* 例: LightBlue 75% */
  z-index: -1;
  /* 背景とコンテンツの間 */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 120px), 50% 100%, 0 calc(100% - 120px));

}

/* コンテンツエリア */
.section-experience .section-content {
  position: relative;
  z-index: 1;
}

/* 左右カラムコンテナ */
.experience-container {
  display: flex;
  align-items: center;
  /* 垂直中央揃え */
  gap: 50px;
  /* カラム間の隙間 */
  margin-bottom: 40px;
  /* ★ 下の矢印との間隔 */
}

/* 左カラム：タイトルエリア (中央揃え) */
.experience-title-area {
  flex: 1 1 40%;
  max-width: 40%;
  text-align: center;
  /* ★念のためテキスト中央揃え */
}

.experience-title {
  font-weight: bold;
  color: #fff;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  /* ★内部要素を中央揃え (維持) */
  gap: 10px;
}

/* 強調フレーズ */
.title-emphasis {
  display: inline-block;
  font-size: 1.8rem;
  color: #37351fda;
  /* 色は元のまま */
  background-color: rgba(242, 242, 234, 0.469);
  /* 背景色は元のまま */
  padding: 10px 20px;
  border-radius: 8px;
  line-height: 1.4;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* メインフレーズ */
.title-main {
  display: block;
  font-size: 2.5rem;
  /* font-size 2.4rem から少し調整 */
  line-height: 1.5;
  font-weight: 10;
}


/* 右カラム：リストエリア全体 */
.experience-list-area {
  flex: 1 1 65%;
  max-width: 70%;
  padding: 35px;
  border-radius: 10px;

}

/* リスト全体 (ul) */
.experience-list {
  list-style: none;
  padding: 0;
  margin: 0;
  width: auto;
  /* ★ 幅は内容に合わせる */

}

/* 各リスト項目 (li) */
.experience-list li {
  color: #ffff;
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  /* ★★★ 垂直方向の中央揃えに変更 ★★★ */

}

.experience-list li:last-child {
  margin-bottom: 0;
}

/* アイテム内の画像 */
.section-experience .list-icon-img {
  /* --- 既存のスタイル --- */
  display: block;
  width: 80px;
  /* 例: 現在のサイズ */
  height: 80px;
  /* 例: 現在のサイズ */
  object-fit: contain;
  margin-bottom: 10px;
  border-radius: 15px;

  /* --- ↓↓↓ アニメーションを直接適用 ↓↓↓ --- */
  animation: poyoyon3 2.5s infinite;
  /* アニメーション名、時間、繰り返し */
  /* --- ↑↑↑ --- */
}


/* 下矢印コンテナ */
.arrow-down-container {
  text-align: center;
  /* アイコンやシェイプを中央寄せ */
  margin: 30px 0 20px;

}

/* Font Awesome 下矢印アイコンのスタイル */
.arrow-down-icon {
  font-size: 5rem;
  /* アイコンの大きさ */
  color: #ffff;
  /* アイコンの色 (オレンジ系) */
  /* animation: bounce 2s infinite; */
}



/* バナー風シェイプ (experience-containerの外に配置) */
.cta-banner {
  background: linear-gradient(to right, #ff8c00, #ffd700);
  padding: 20px 30px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  /* width: 100%; */
  /* 不要 */
  max-width: 1000px;
  /* ★ バナー自体の最大幅 */
  margin: 0 auto;
  /* ★ 上下マージン0、左右autoで中央寄せ */
  border-radius: 20px;

  /* --- ↓↓↓ アニメーション設定を追加 ↓↓↓ --- */

  display: inline-block;
  /* ★ transformを適用するためインラインブロック要素にする */
  animation-name: pulseBannerText;
  /* 上で定義したアニメーション名 */
  animation-duration: 1s;
  /* アニメーション1周期の時間 (調整可) */
  animation-timing-function: ease-in-out;
  /* ゆっくり始まってゆっくり終わる変化 */
  animation-iteration-count: infinite;
  /* 無限に繰り返す */

  /* --- ↑↑↑ アニメーション設定ここまで --- */
}



/* バナー内テキスト (変更なし) */
.banner-text {
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.6;
  margin: 0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}



/* --- レスポンシブ対応 --- */
@media (max-width: 992px) {

  /* タブレット */
  .experience-list-area {
    padding: 30px;
  }

  .experience-list li {
    font-size: 0.95rem;
  }

  /* タイトルの調整 */
  .title-emphasis {
    font-size: 1.6rem;
    padding: 8px 15px;
  }

  .title-main {
    font-size: 2rem;
  }
}

@media (max-width: 768px) {

  /* モバイル */
  /* カラム縦積み */
  .experience-container {
    flex-direction: column;
    align-items: center;
    /* コンテナ内の要素を中央揃え */
    gap: 10px;
  }

  .section-experience {
    padding-top: 10px;
  }

  /* 各エリアの幅調整 */
  .experience-title-area,
  .experience-list-area {
    flex-basis: auto;
    max-width: 100%;
    width: 100%;
  }

  /* タイトル中央揃え (維持) */
  .experience-title-area {
    text-align: center;
    margin-bottom: 10px;
    margin-top: 0;
    padding-top: 0;
  }

  /* タイトル文字サイズ調整 */
  .title-emphasis {
    font-size: 1.1rem;
    padding: 6px 12px;
  }

  .title-main {
    font-size: 2rem;
  }

  .experience-list-area {
    padding: 30px 5px 0px 5px;
    width: 100%;
    box-sizing: border-box;
    display: block;
    text-align: left;
  }

  /* リスト(ul) の中のliの揃え方 */
  .experience-list {
    width: 100%;
    /* ★ 親要素の幅に合わせる */
    list-style: none;
    /* リストマーカー削除 */
    padding: 0;
    /* デフォルトパディング削除 */
    margin: 0;
    /* デフォルトマージン削除 */
  }

  .experience-list li {
    font-size: 1.1rem;
    /* ★ 文字サイズ調整 (例: 0.9rem) */
    margin-bottom: 20px;
    /* 項目間マージン */
    display: flex;
    /* Flexboxで横並び */
    align-items: flex-start;
    /* 上端揃え (垂直中央なら center) */
    text-align: left;
    /* テキスト左揃え */
  }

  .experience-list li:last-child {
    margin-bottom: 0;
    /* ★ これで最後の項目と下の要素の間にliのマージンは入らない */
  }

  .list-icon-fa {
    font-size: 0.8em;
    margin-right: 7px;
    width: 1.5em;
    flex-shrink: 0;
    /* 縮まないように */
    padding-top: 0em;
    /* ★ テキストとの垂直位置微調整 (任意) */
  }

  .arrow-down-container {
    margin-top: 0;
    margin-bottom: 15px;
  }

  .arrow-down-icon {
    font-size: 2rem;
  }

  .cta-banner {
    padding: 15px 20px;
    /* パディングを少し戻す */
    width: 100%;
    /* ★ 画面幅(のコンテナ)に対する割合で指定 (例: 95%) */
    max-width: 400px;
    /* ★ モバイルでの最大幅を設定 (広がりすぎ防止) */
    margin-left: auto;
    /* ★ 中央揃え */
    margin-right: auto;
    /* ★ 中央揃え */
    box-sizing: border-box;
    /* 念のためpaddingを含めて幅計算 */
  }

  .banner-text {
    font-size: 1.2rem;
  }
}


/*--------------------------------------------------
  選ばれる理由セクション
--------------------------------------------------*/
.reasons {
  /* タイトル部分のセクション */
  padding: 60px 0 40px;
  /* 下の余白を少し減らす */
  background: #fff;
  text-align: center;
}

/* 選ばれる理由 タイトル */
.reasons h2 {
  font-size: 2.4rem;
  /* 他のセクションタイトルとサイズ感を合わせる */
  font-weight: 500;
  /* 太さを指定 */
  line-height: 1;
  color: #333;
  /* ★ 文字色を指定 (背景が白なので) */
  margin-bottom: 0.5px;
  /* ★ 下のサブタイトルとの間隔 */
  display: inline-block;

}

/* ▼▼▼ サブタイトル ("reason") のスタイル変更 ▼▼▼ */
.reasons .reason-subtitle {
  margin-top: 0;
  /* 上の間隔は h2 の margin-bottom で調整 */
  margin-bottom: 25px;
  /* 下の説明文pタグとの間隔 */

  background: linear-gradient(to right,
      #ff4b4b 0%,
      /* 赤 (開始位置) */
      #ffa500 45%,
      /* オレンジ (全体の25%の位置) */
      #4dff4d 75%
      /* 緑 (全体の75%の位置) */
    );
  -webkit-background-clip: text;
  /* ★ 正しく記述されているか？ */
  background-clip: text;
  /* ★ 正しく記述されているか？ */
  color: transparent;
  /* ★★★ これが最重要！適用されているか？ ★★★ */

  text-shadow: none;
  /* 影も通常不要 */
  letter-spacing: 0.5rem;

}

/* 既存のpタグ (説明文) のスタイル */
.reasons p:not(.reason-subtitle) {
  font-size: 1rem;
  color: #555;
  max-width: 600px;
  margin: 0 auto;
  /* 左右autoで中央揃え */
  line-height: 1.7;
}


@keyframes fadeInFromTopPoint {
  from {
    opacity: 0;
    transform: translateY(-90px);
    /* ★「上から」に変更 (-30pxの値は調整可) */
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 各ポイントのカード */
.point-card {
  display: flex;
  align-items: center;
  background: #e0f7ff;
  border-radius: 15px;
  padding: 30px;
  /* 内側余白 */
  margin: 30px auto;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  max-width: 900px;
  /* min-height: 350px; */
  /* 高さはコンテンツに合わせる */
  gap: 30px;
  /* テキストと画像の間の隙間 */
  /* ▼▼▼ アニメーション設定 ▼▼▼ */
  opacity: 0;
  transform: translateY(-90px); /* ★ 初期状態は少し上に (キーフレームの from と合わせる) */

}

/* .is-visible が .point-card に付与されたらアニメーションを適用 */
.point-card.is-visible {
  animation-name: fadeInFromTopPoint;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  /* animation-delay は以下で nth-child を使って個別に設定 */
}

/* 各 .point-card のアニメーション遅延 */
.point-card.is-visible:nth-child(1) { /* CSSのnth-childは1から始まるので注意。HTML構造に依存 */
  animation-delay: 0.2s; /* 遅延時間を調整 (例: 0.5s -> 0.2s) */
}
.point-card.is-visible:nth-child(2) {
  animation-delay: 0.6s; /* 遅延時間を調整 (例: 1s -> 0.4s) */
}
.point-card.is-visible:nth-child(3) {
  animation-delay: 0.9s; /* 遅延時間を調整 (例: 1.5s -> 0.6s) */
}

.point-card .point-text h3 {
  /* ▼▼▼ Flexboxでアイコンとテキストの位置を制御 ▼▼▼ */
  display: flex;
  /* Flexboxを有効化 */
  align-items: center;
  /* ★ 垂直方向の中央揃え (アイコンとテキストの中心を合わせる) */
  gap: 10px;
  /* ★ アイコンとテキストの間の隙間 (調整可) */
  font-size: 1.6rem;
  /* 見出しの文字サイズ */
  line-height: 1.4;
  /* 行間 */
  color: #333;
  /* 文字色 */
  font-weight: 2.5;
  /* 太字 */
  margin: 0 0 15px 0;
  /* ★ 下の<p>タグとのマージン (上左右は0) */
  text-align: left;
  /* display:flexにしたので左揃えを明示 */
}



/* h3内のアイコン画像 */
.point-card .point-text .h3-icon {
  width: 100px;
  /* ★ アイコンの幅 (調整してください) */
  height: 100px;
  /* ★ アイコンの高さ (調整してください) */
  object-fit: contain;
  /* 画像が枠内に収まるように */
  flex-shrink: 0;
  /* アイコンがテキストに押されて縮まないように */
  /* margin-right は gap で指定するため不要 */
}

/* ポイントカード内の説明テキスト (p) */
.point-card .point-text p {
  /* --- 既存または追加のスタイル (調整可) --- */
  flex: 1 1 75%;
  max-width: 75%;
  font-size: 1rem;
  /* 説明文の文字サイズ */
  line-height: 1.7;
  /* 行間 */
  color: #555;
  /* 文字色 */
  margin-bottom: 10px;
  /* 段落間のマージン */
  text-align: center;
}


.point-image {
  flex: 1 1 50%;
  max-width: 50%;


}


/* ポイントカード内の画像(.point-image の中の img) */
.point-card .point-image img {
  display: block;
  /* 画像下の余白対策やmargin:autoのため */
  max-width: 100%;
  width: 400px;
  /* ★ 希望の幅を指定 (例: 350px) */
  height: 300px;
  /* ★ 希望の高さを指定 (例: 280px) */

  /* ▼ 画像の表示方法を選択 ▼ */
  object-fit: contain;
  /* 指定した幅・高さの領域を画像で覆う（はみ出しはトリミング） */

  margin-left: auto;
  /* 親要素内で中央揃えにする場合 */
  margin-right: auto;
  /* 親要素内で中央揃えにする場合 */
  border-radius: 8px;
  /* 角丸 (任意) */
}


/* ★ 3枚目の画像コンテナ用のスタイル (幅制限を緩和) */
.point-image-container-expanded {
  flex-basis: 75%;
  /* ★ 例: より多くのスペースを確保 (パーセンテージは調整してください) */
  max-width: 85%;
  /* ★ 例: 親要素の65%まで許容 */
  /* もし .point-card の幅いっぱいに近づけたい場合は、
     .point-text の flex-basis と合わせて合計100%に近づくように調整し、
     gapも考慮します。 */
}

/* 3枚目の画像 (point-image-large クラスを持つ画像) の個別サイズ調整 */
.point-image img.point-image-large {
  width: 105%;
  /* 例: 他の画像より大きく表示したい場合 (親要素の幅を超える可能性に注意) */
  /* height: 300px; */
  /* 例: 高さを指定する場合 (アスペクト比が崩れないよう注意) */
  /* object-fit: contain; */
  /* 高さを指定した場合にアスペクト比を保つ方法 */
  /* margin: 0 auto; */
  /* 例: 幅を固定値にして中央揃えにしたい場合 */
}


/* 選ばれる理由 レスポンシブ */
@media (max-width: 768px) {


  /* 選ばれる理由 タイトル */
  .reasons h2 {
    font-size: 1.6rem;
    letter-spacing: 0.5cap;
  }

  /* --- ポイントカードのレイアウト調整 --- */
  .point-card {
    position: relative;
    flex-direction: column;
    text-align: center;
    /* アイコンを配置するスペースを考慮して padding を調整 */
    padding: 20px;
    /* 基本の padding */
    padding-top: 60px;
    /* アイコンの高さ + 余白分を確保 (要調整) */
    max-width: 95%;
    gap: 25px;
    margin: 25px auto;
  }

  /* ▼▼▼ 表示順序とスタイル調整 ▼▼▼ */
  .point-image {
    /* 画像エリア */
    order: 1;
    /* ★ こちらを先に表示 (デフォルトは0) */
    flex-basis: auto;
    /* Flexboxの基本サイズは自動 */
    width: 100%;
    /* ★ 幅を親要素いっぱいに */
    max-width: 450px;
    /* ★ 画像の最大幅 (大きめに設定、調整可) */
    margin: 0 auto;
    /* コンテナ内で中央揃え */
  }

  .point-text {
    /* テキストエリア */
    order: 2;
    /* ★ こちらを後に表示 */
    text-align: center;
    /* テキストエリア内も中央揃え */
    width: 100%;
    /* 幅を確保 */
  }

  /* ▲▲▲ ここまで ▲▲▲ */


  .point-card .point-text .h3-icon {
    position: absolute;
    /* 絶対配置 */
    top: 15px;
    /* カード上端からの距離 (padding-top より小さい値) */
    left: 15px;
    /* カード左端からの距離 (padding-left と同じか少し内側) */
    width: 75px;
    /* アイコンのサイズを指定 (要調整) */
    height: 80px;
    /* アイコンのサイズを指定 (要調整) */
    z-index: 10;
    /* 他の要素より手前に表示 */
  }

  /* 画像自体のスタイル */
  .point-card .point-image img {
    width: 100%;
    /* 親(.point-image)の幅に合わせる */
    height: auto;
    /* 高さは自動 */
    border-radius: 8px;
    /* 角丸 */
  }

  .point-card .point-text h3 {
    display: block;
    font-size: 1.4rem;
    /* h3内のアイコンを絶対配置するため、h3自体のテキスト位置調整が必要 */
    width: 100%;
    /* 追加してテスト */
    max-width: 100%;
    margin: 0 auto 15px auto;
    text-align: center;
  }

  .point-card .point-text p {
    font-size: 0.85rem;
    line-height: 1.7;
    color: #555;
    margin-bottom: 8px;
    text-align: left;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;

  }

}

/*--------------------------------------------------
  パーソナルジムに望むことセクション
--------------------------------------------------*/
/* --- 基本的なセクションのスタイル (既存のものを流用・調整) --- */
.section-personal {
  /* 必要に応じて padding など調整 */
  position: relative;
  /* 子要素の位置調整の基準になる場合 */
  overflow: hidden;
  /* はみ出し防止 */
}

.section-title-container {
  /* 既存のスタイルを適用 */
  text-align: center;
  margin-bottom: 0px;
  /* タイトルと画像の間のスペース */
}

.section-title {

  font-size: 2.4rem;
  /* 他のセクションタイトルとサイズ感を合わせる */
  font-weight: 500;
  /* 太さを指定 */
  line-height: 1;
  color: #333;
  /* ★ 文字色を指定 (背景が白なので) */
  margin-bottom: 0.5px;
  /* ★ 下のサブタイトルとの間隔 */
  display: inline-block;
  letter-spacing: 10px;
}

.mobile-only-br {
  display: none;
}

.reason-subtitle {
  margin-top: 0;
  /* 上の間隔は h2 の margin-bottom で調整 */
  margin-bottom: 20px;
  /* 下の説明文pタグとの間隔 */

  background: linear-gradient(to right,
      #ff4b4b 0%,
      /* 赤 (開始位置) */
      #ffa500 45%,
      /* オレンジ (全体の25%の位置) */
      #4dff4d 75%
      /* 緑 (全体の75%の位置) */
    );
  -webkit-background-clip: text;
  /* ★ 正しく記述されているか？ */
  background-clip: text;
  /* ★ 正しく記述されているか？ */
  color: transparent;
  /* ★★★ これが最重要！適用されているか？ ★★★ */

  font-size: 1.3rem;
  /* ★ 文字サイズを調整 (タイトルとのバランス) */
  font-weight: 1.2;
  /* 太字 */
  line-height: 1.3;
  /* 行間 */

  text-shadow: none;
  /* 影も通常不要 */
}

/* --- PC/モバイル切り替え画像 --- */

.personal-main-image-container {
  position: relative;
  /* 背景やカードの位置調整の基準点 */
  line-height: 0;
  /* 画像下の不要な隙間を防ぐ */
}

.personal-main-image {
  display: block;
  width: 1200px;
  height: 500px;
  margin-left: auto;
  margin-right: auto;

  /* アニメーションを適用 */
  /* 初期状態: 透明で、少し下にいる */
  opacity: 0;
  transform: translateY(30px);
  /* 下に30pxずらす */

  /* 変化をアニメーションさせる設定 */
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;

}

.personal-main-image.start-animation {
  opacity: 1;
  transform: translateY(0);
}

.personal-main-image-mobile {
  display: block;
  /* モバイルで表示 (デフォルト) */
}

.personal-main-image-pc {
  display: none;
  /* PCでは非表示 (デフォルト) */
}



/* --- 背景とカードエリア --- */
.personal-content-area {
  position: relative;
  /* 画像の高さに応じて調整が必要です (例: 画像高さが500pxなら -200px) */
  margin-top: -140px;
  /* ★要調整★ */
  margin-left: auto;
  margin-right: auto;
  padding-top: 350px;
  /* ★要整★ */
  padding-bottom: 20px;
  /* カード下の余白 */
  width: 1200px;
  overflow: hidden;
  border-radius: 20px;
}

.personal-background-image {
  /* 以前の .personal-background-overlay から変更 */
  position: absolute;
  top: 0px;
  bottom: 0;
  /* 下端に固定する場合 */
  left: 0;
  width: 100%;
  /* 幅をコンテナに合わせる */
  height: auto;
  /* 高さは画像の比率を保つ */
  object-fit: cover;
  /* コンテナを覆うように画像を調整（必要なら contain など） */
  object-position: center bottom;
  /* 画像のどの部分を表示するか (下部中央) */
  z-index: -2;
  /* カードより下に配置 */
  display: block;
  /* 不要な隙間を防ぎ、幅・高さを制御しやすくする */
}

.personal-content-area::before {
  content: '';
  /* 疑似要素には必須 */
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  top: -140px;
  /* ★padding-topの値と合わせるか調整★ */

  background-color: rgba(127, 144, 188, 0.75);
  /* 50%の黒 */

  /* 重なり順: 背景画像より上、カードより下 */
  z-index: -1;
}

/* --- 3つのカード --- */
.personal-cards {
  position: relative;
  /* 背景の上に表示 */
  z-index: 2;
  /* 背景(z-index: 1)より上 */
  display: flex;
  flex-wrap: wrap;
  /* 画面幅が狭い場合に折り返す */
  justify-content: center;
  /* カードを中央寄せ */
  gap: 30px;
  /* カード間の隙間 */
  max-width: 1100px;
  /* カード全体の最大幅 */
  margin-top: -200px;
  /* 中央揃え */
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px;
  /* 左右の余白 */
}


@keyframes fadeInFromTopPersonal {
  from {
    opacity: 0;
    transform: translateY(-60px);
    /* アニメーション開始時: 30px上からスライドしつつ透明 */
    /* この -30px の値は、どれくらい上から降りてくるかを調整できます */
  }

  to {
    opacity: 1;
    transform: translateY(0);
    /* アニメーション終了時: 元の画像位置で不透明 */
  }
}

.personal-cards .card {
  background-color: #fff;
  /* カードの背景色 */
  border-radius: 10px;
  /* カードの角丸 */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  /* カードの影 */
  text-align: center;
  padding: 18px;
  /* flex-basis で基本幅を指定し、flex-grow で伸縮可能に */
  flex-basis: calc(20% - 20px);
  /* ★例: 33.333% から少し減らす */
  max-width: calc(30% - 20px);
  /* ★例: 33.333% から少し減らす */
  flex-grow: 1;
  box-sizing: border-box;
  /* paddingを含めて幅計算 */

  /* ▼▼▼ 新しい「上からフェードイン」アニメーションの設定 ▼▼▼ */
  animation-name: fadeInFromTopPersonal;
  /* 上で定義したキーフレーム名を指定 */
  animation-duration: 2s;
  /* アニメーションの長さ（例: 0.8秒、お好みで調整） */
  animation-timing-function: ease-out;
  /* アニメーションの速度曲線 */
  animation-fill-mode: forwards;
  /* アニメーション終了後、最後の状態を維持する */
  animation-delay: 0s;
  /* ★ 全ての画像が同時に開始されるように遅延を0秒に設定
                                                (この行を削除してもデフォルトで0秒なので同様の効果です) */
  /* ▲▲▲ ここまでが新しいアニメーション設定 ▲▲▲ */

}



.personal-cards .card img {
  display: block;
  max-width: 100%;
  height: 200px;
  margin-bottom: 20px;
  object-fit: cover;
  margin-left: auto;
  margin-right: auto;
  border-radius: 20px;

}

.card-title {
  /* .card-title 全体のスタイル */
  font-weight: 20;
  margin-bottom: 10px;
  line-height: 1.2;
  /* 行間を調整 */
}

/* グラデーションを適用する共通スタイル */
.gradient-text {
  background: linear-gradient(to right, #ff8a00, #fbea02);
  /* グラデーションの色を指定 */
  -webkit-background-clip: text;
  /* Safari/Chrome用 */
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* 標準 */
  /* display: inline-block; */
  /* または display: block; を各行で指定 */
}

/* 1行目のスタイル */
.card-title .title-line-1 {
  font-size: 1.8em;
  /* ★1行目の文字サイズを指定 */
  display: block;
  /* または inline-block */
}

/* 2行目のスタイル */
.card-title .title-line-2 {
  font-size: 1.0em;
  /* ★2行目の文字サイズを指定 */
  display: block;
  /* または inline-block */
  /* .gradient-text クラスが付いているのでグラデーション適用 */
}

.card-description {
  font-size: 15px;

}

/* --- レスポンシブ調整 (画面幅が狭い場合) --- */
/* 例: 画面幅 992px 以下で2列に */
@media (max-width: 992px) {
  .personal-cards .card {
    flex-basis: calc(50% - 15px);
    /* 隙間を考慮した幅 (2列) */
    max-width: calc(50% - 15px);
  }
}

/* 例: 画面幅 767px 以下で1列に */

@media (min-width: 990px) {
  .personal-main-image-mobile {
    display: none;
  }

  .personal-main-image-pc {
    display: block;
  }
}

@media (max-width: 767px) {

  /* --- セクションタイトル --- */
  .section-title {
    font-size: 1.7rem;
    /* ★モバイル用のタイトルサイズ (例) */
    /* 必要であれば他のスタイル (margin-bottom など) も調整 */
  }

  .mobile-only-br {
    display: block;
    /* モバイル時のみ <br> をブロック要素として表示し、改行させる */
  }

  .reason-subtitle {
    font-size: 1rem;
    /* ★モバイル用のサブタイトルサイズ (例) */
    letter-spacing: 0.1em;
    /* ★文字間隔も調整 (例) */
    margin-bottom: 40px;
    /* ★下の要素との間隔調整 (例) */
    line-height: 1.7;
    /* または line-height: 1.4; など適切な値を試す */

  }

  .page-container {
    /* .personal-main-image-mobile を囲む親要素の例 */
    padding-left: 0;
    /* モバイルでは左右のpaddingをなくす */
    padding-right: 0;
  }

  /* --- 画像切り替え --- */
  .personal-main-image-mobile {
    display: flex;
    width: 88%;
    /* 画面幅いっぱいに */
    height: 100%;
    padding-top: 10px;
  }

  .personal-main-image-pc {
    display: none;
  }

  /* --- 背景とカードエリアのコンテナ --- */
  .personal-content-area {
    margin-top: -50px;
    /* ★例: 背景画像との重なり具合を調整 */
    padding-top: 110px;
    /* ★例: 画像下のスペース、背景開始位置の調整 */
    width: auto;
    /* 固定幅を解除 */
    padding-left: 10px;
    /* ★例: コンテナ左右の余白を少し狭める */
    padding-right: 10px;
    /* ★例: コンテナ左右の余白を少し狭める */
    padding-bottom: 20px;
    /* ★カード下の余白、背景表示のために必要 */
    border-radius: 0;
    /* モバイルでは角丸なし (任意) */

  }

  /* --- 背景オーバーレイ (疑似要素) --- */
  .personal-content-area::before {
    /* コンテナ全体を覆うように調整 */
    top: 0;
    /* コンテナ上端から */
    bottom: 0;
    /* コンテナ下端まで */
  }



  /* --- カード群 --- */
  .personal-cards {
    /* display: flex; は継承 */
    flex-direction: column;
    /* 縦積み */
    align-items: center;
    /* 中央揃え */
    gap: 25px;
    /* ★カード間の隙間 (例) */
    max-width: 100%;
    /* 親要素の幅に合わせる */
    margin-top: -20px;
    /* ★例: 位置調整 (padding-topと連動) */
    margin-left: auto;
    /* 中央揃え維持 */
    margin-right: auto;
    /* 中央揃え維持 */
    padding: 0;
    /* 左右パディングは親で指定 */
    /* position: relative, z-index はPCから継承 */
  }

  /* --- 個々のカード --- */
  .personal-cards .card {
    width: 90%;
    /* ★カード幅を広げる (例: 95%) */
    flex-grow: 0;
    /* 縦積みなので不要 */
    max-width: none;
    flex-basis: auto;
    /* ★ これを追加 */
    margin-bottom: 10px;
    /* padding, background-color などはPCから継承される */
    /* 必要であればモバイル用に再指定 */
    /* padding: 15px; */
  }


  .personal-cards .card img {
    display: block;
    max-width: 100%;
    height: 250px;
    margin-top: 20px;
    margin-bottom: 20px;
    object-fit: cover;
    margin-left: auto;
    margin-right: auto;
    border-radius: 20px;
  }

  /* --- カードタイトル --- */
  .personal-cards .card-title {
    min-height: auto;
    /* 高さ揃え解除 */
    margin-top: 10px;
    /* 必要であればカードタイトルの font-size も調整 */
    /* .card-title .title-line-1 { font-size: 1.6em; } */
    /* .card-title .title-line-2 { font-size: 0.9em; } */
  }

  .section-personal {
    padding-bottom: 20px;

  }

}

/* @media クエリの閉じ括弧 */

/*--------------------------------------------------
  料金／他社比較セクション
--------------------------------------------------*/
.section-pricing-comparison {
  padding: 80px 0;
  /* セクション上下の余白 */
  background-color: #e0f7ff;
  /* 背景色 (例: 白) */
  overflow: hidden;
  /* ★ 任意: アニメーション初期状態のはみ出しを隠す */

}

.section-pricing-comparison .container {
  text-align: center;
  /* ← これを追加 */
  background-color: #e0f7ff;
  max-width: 1000px;
  /* ★ ページ全体のコンテナ最大幅（例） */
  width: 100%;
  /* ★ 画面幅に対しては100% */
}

/* セクションタイトル (他のセクションタイトルと共通化可能) */
.section-pricing-comparison .section-title {
  font-size: 2.4rem;
  /* 他のセクションタイトルとサイズ感を合わせる */
  font-weight: 500;
  /* 太さを指定 */
  line-height: 1;
  color: #333;
  /* ★ 文字色を指定 (背景が白なので) */
  margin-bottom: 5px;
  /* ★ 下のサブタイトルとの間隔 */
  display: inline-block;
}

.section-pricing-comparison .pricing-image.is-mobile {
  display: none;
}

.pricing-subtitle {
  margin-top: 0;
  /* 上の間隔は h2 の margin-bottom で調整 */
  margin-bottom: 30px;

  background: linear-gradient(to right,
      #ff4b4b 0%,
      /* 赤 (開始位置) */
      #ffa500 45%,
      /* オレンジ (全体の25%の位置) */
      #4dff4d 60%
      /* 緑 (全体の75%の位置) */
    );
  -webkit-background-clip: text;
  /* ★ 正しく記述されているか？ */
  background-clip: text;
  /* ★ 正しく記述されているか？ */
  color: transparent;
  /* ★★★ これが最重要！適用されているか？ ★★★ */

  font-size: 1.3rem;
  /* ★ 文字サイズを調整 (タイトルとのバランス) */
  font-weight: 1.2;
  /* 太字 */
  line-height: 1;
  /* 行間 */

  text-shadow: none;
  /* 影も通常不要 */
  letter-spacing: 0.5rem;

}


/* 各画像 */
.pricing-image {
  display: block;
  /* ★ block要素に変更 */
  width: 100%;
  /* ★ 親コンテナの幅100% */
  max-width: 100%;
  /* ★ 親コンテナの幅を超えない */
  height: auto;
  /* ↓↓↓ 画像下の余白をさらに詰める ↓↓↓ */
  margin: 0 auto 5px;
  /* ★例: 下マージンを 15px から 5px に (さらに詰めるなら 0px も試す) */
  /* ↑↑↑ ここまで調整 ↑↑↑ */
  border-radius: 0;
  border-radius: 0;

  /* ▼▼▼ アニメーション初期状態 ▼▼▼ */
  opacity: 0;
  transform: translateY(90px);
  /* ★ 最初は下に40pxずらす */
  /* ▲▲▲ ここまで ▲▲▲ */

  /* ▼▼▼ transition の設定 ▼▼▼ */
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  /* ★ 少しゆっくりめに */
  /* transition-delay は下で設定 (またはここで直接指定も可) */
  will-change: opacity, transform;
  /* ▲▲▲ ここまで ▲▲▲ */
}

/* ★ 表示アニメーション: 画面内に入ったときのクラス (JavaScriptで付与) */
.pricing-image.is-visible {
  opacity: 1;
  /* 不透明に */
  transform: translateY(0);
  /* 元の位置(Y=0)に戻す */
}



/* --- 料金セクション レスポンシブ --- */
@media (max-width: 768px) {

  /* セクション全体のパディング調整 (任意) */
  .section-pricing-comparison {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .section-pricing-comparison .section-title {
    font-size: 2rem;
    /* 他のセクションタイトルとサイズ感を合わせる */
    font-weight: 500;
    /* 太さを指定 */
    line-height: 1;
    color: #333;
    /* ★ 文字色を指定 (背景が白なので) */
    margin-bottom: 5px;
    /* ★ 下のサブタイトルとの間隔 */
    display: inline-block;
  }

  .pricing-subtitle {
    padding-bottom: 5px;
  }

  /* モバイル用コンテナの左右パディング調整 */
  .section-pricing-comparison .container {
    padding-left: 10px;
    padding-right: 10px;
    max-width: none;
    width: 100%;
    box-sizing: border-box;
    padding-top: 0;
    margin-top: 0;
  }

  /* ★★★ PC用画像はモバイルでは非表示 ★★★ */
  .section-pricing-comparison .pricing-image.is-pc {
    display: none;
  }

  /* モバイル用画像コンテナのレイアウト */
  .section-pricing-comparison .pricing-images {
    display: block;
    /* ★ 縦積みにするため block に変更 */
    margin-top: 20px;
  }

  /* ★★★ モバイル用画像を表示し、スタイルを設定 ★★★ */
  .section-pricing-comparison .pricing-image.is-mobile {
    display: block;
    /* 表示 */
    width: 100%;
    /* 幅をコンテナいっぱいに */
    max-width: 100%;
    /* 最大幅制限なし */
    height: auto;
    /* 高さは自動 */
    object-fit: contain;
    /* 画像全体を表示 */
    border-radius: 10px;
    /* 例: モバイル用角丸 */
    /* ★ 縦に並んだ画像間の隙間 */
    margin-bottom: 20px;
    /* gapを使わない場合の画像下の隙間 */
  }

  .section-pricing-comparison .pricing-image.is-mobile:first-child {
    margin-bottom: 5px;
    /* 例: 通常20pxのところを5pxに変更。希望の余白に調整してください */
  }

  /* 最後のモバイル画像の下マージンは不要 */
  .section-pricing-comparison .pricing-image.is-mobile:last-child {
    margin-bottom: 0;
  }
}

/*--------------------------------------------------
  トレーナーセクション
--------------------------------------------------*/
.trainer-section {
  padding: 80px 0;
  position: relative;
  /* ★ position と z-index を追加 */
  z-index: 0;
  /* ★ 重なり順の基準 */
  background-color: #e0f7ff;

}

.trainer-section .section-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  z-index: -2;
  /* オーバーレイより後ろ */
  background-image: url("images/your-trainer-background.jpg");
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}


.trainer-section .container {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 1140px;
  /* 例: コンテナの最大幅 */
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  /* コンテナ左右のパディング */
  padding-right: 15px;
}

.trainer-section::after {
  /* セクションの疑似要素としてオーバーレイを追加 */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  /* ★ 背景画像と同じ高さ (要調整) */
  /* ★ 薄水色の半透明オーバーレイ (RGBAで色と透明度を指定) */
  background: rgba(21, 27, 60, 0.65);
  /* 例: #e0f7ff を80%の透明度で */
  /* 他の薄水色例: rgba(173, 216, 230, 0.7); LightBlue 70% */
  z-index: -1;
  /* ★ 背景画像(1)の上、コンテンツ(3)の下 */
}

/* ↑↑↑ 背景画像用オーバーレイを追加 ↑↑↑ */



.trainer-section .section-title {
  font-size: 2.4rem;
  /* 他のセクションタイトルとサイズ感を合わせる */
  font-weight: 500;
  /* 太さを指定 */
  line-height: 1;
  color: #ffff;
  /* ★ 文字色を指定 (背景が白なので) */
  margin-bottom: 0.5px;
  /* ★ 下のサブタイトルとの間隔 */
  display: inline-block;
}

.trainer-subtitle {
  margin-top: 0;
  /* 上の間隔は h2 の margin-bottom で調整 */
  margin-bottom: 25px;
  /* 下の説明文pタグとの間隔 */

  background: linear-gradient(to right,
      #ff4b4b 0%,
      /* 赤 (開始位置) */
      #ffa500 45%,
      /* オレンジ (全体の25%の位置) */
      #4dff4d 60%
      /* 緑 (全体の75%の位置) */
    );
  -webkit-background-clip: text;
  /* ★ 正しく記述されているか？ */
  background-clip: text;
  /* ★ 正しく記述されているか？ */
  color: transparent;
  /* ★★★ これが最重要！適用されているか？ ★★★ */

  font-size: 1.3rem;
  /* ★ 文字サイズを調整 (タイトルとのバランス) */
  font-weight: 1.2;
  /* 太字 */
  line-height: 1;
  /* 行間 */

  text-shadow: none;
  /* 影も通常不要 */
  letter-spacing: 0.5rem;
  /* ★ 値はお好みで調整してください (例: 1px, 3px, 0.1em など) */

}

.trainer-description {
  /* クラス名を指定する方が確実 */
  text-align: center;
  font-size: 1.3rem;
  color: #ffff;
  /* 背景画像が透ける場合、可読性を確認 */
  max-width: 600px;
  margin: 0 auto 50px;
  line-height: 1.7;
}


.trainer-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* 2列 */
  gap: 35px;
  justify-items: center;
  /* グリッドアイテムをセル内で中央揃え */
  max-width: 800px;
  /* カード群全体の最大幅 */
  margin: 0px auto 0 auto;
  /* 位置調整と中央揃え (★必要に応じて再調整) */
  padding: 0 20px;
  position: relative;
  z-index: 2;
}

/* ★★★ アニメーションのキーフレーム (上からフェードイン) ★★★ */
@keyframes fadeInFromTopEffect {
  from {
    opacity: 0;
    transform: translateX(-50px);
    /* ★「上から」に変更 (-30pxの値は調整可) */
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* トレーナーカード */
.trainer-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 15px;
  padding: 25px;
  display: block;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* opacityのtransitionはアニメーションに任せる */
  will-change: transform, opacity, box-shadow;
  /* opacityもアニメーション対象 */
  max-width: 530px;
  width: 100%;
  box-sizing: border-box;
  position: relative;

  /* ▼▼▼ アニメーション設定 ▼▼▼ */
  opacity: 0;
  transform: translateX(-50px); /* ★ 初期状態は少し左に (キーフレームの from と合わせる) */


}
/* .is-visible が .trainer-card に付与されたらアニメーションを適用 */
.trainer-card.is-visible {
  animation-name: fadeInFromTopEffect;
  animation-duration: 0.8s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  /* animation-delay は以下で nth-child を使って個別に設定 */
}

/* ★ ホバー時の効果 (変更なし) */
.trainer-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* 各トレーナーカードに個別の表示遅延を設定 */
.trainer-cards .trainer-card.is-visible:nth-child(1) {
  animation-delay: 0.2s; /* 元の0.4sから調整 */
}
.trainer-cards .trainer-card.is-visible:nth-child(2) {
  animation-delay: 0.4s; /* 元の0.6sから調整 */
}
.trainer-cards .trainer-card.is-visible:nth-child(3) {
  animation-delay: 0.6s; /* 元の0.8sから調整 */
}
.trainer-cards .trainer-card.is-visible:nth-child(4) {
  animation-delay: 0.8s; /* 元の1sから調整 */
}

/* トレーナー情報部分 */
.trainer-info {
  flex: 1;
  order: 1; /* モバイルでの表示順制御用、PCでは影響なし */

}

.comment-title {
  display: block;
  font-size: 1.2rem;
  /* 文字サイズ */
  margin-bottom: 15px;
  /* ★ 下のテキストとの間隔を調整 */
  font-weight: 100;
  width: 100%;
  color: #ffffff;
  /* ★ テキスト色を白に */
  background: linear-gradient(to right, #ff8c00, #eeec7d);
  /* ★ オレンジ→黄色グラデーション背景 */
  padding: 8px 15px;
  /* ★ 背景が見えるように内側余白を追加 */
  border-radius: 6px;
  /* ★ 角を少し丸める (任意) */
  line-height: 1.4;
  /* 行間調整 */
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  /* ★ 白文字の視認性を上げるための影 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  text-align: center;
  /* ★ テキストを中央揃えにする */
  box-sizing: border-box;
  /* ★ paddingを含めてwidth: 100%にする */
  position: relative;
  background: none;
  /* ★ 元の背景は使わない */


}


.comment-title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* ▼▼▼ 高さを画像上端位置に合わせる（要調整）▼▼▼ */
  height: 58px;
  /* 例: この値を下の margin-top と合わせる */
  /* ▲▲▲ ここまで ▲▲▲ */
  background: linear-gradient(to right, #ff8c00, #ebf38b);
  /* 背景グラデーション */
  border-radius: 6px;
  /* 角丸 */
  z-index: -1;
  /* テキストの背面に */
}

/* --- HTML内の改行用クラス --- */
/* PC版では非表示 */
.br-sp {
  display: none;
}

.trainer-main-content {
  display: flex;
  /* ★ ここで画像と情報を横並びにする */
  align-items: flex-start;
  /* ★ 上端揃え */
  gap: 25px;
  /* ★ 画像と情報の間の隙間 */
  margin-left: 0;
}

/* トレーナー情報部分 (名前、英語名、コメント) */
.trainer-info {
  flex: 1;
  /* ★ 残りのスペースを取る */
  text-align: left;
  /* ★ 左揃え */
  order: 1;
}


.trainer-name {
  font-size: 1.5rem;
  /* サイズ調整 */
  letter-spacing: 3.5px;
  margin-bottom: 2px;
  color: #333;
  font-weight: 10;
  margin-top: 0;
  width: 200px;
  text-align: center;
}

.trainer-name-eng {
  font-size: 0.9rem;
  margin-bottom: 15px;
  width: 200px;
  /* color: #777; */
  /* ← 元の色指定を削除またはコメントアウト */
  text-transform: uppercase;
  /* ▼▼▼ 文字色グラデーション設定 ▼▼▼ */
  background: linear-gradient(to right, #ffa500, #e4f24e);
  /* ★ オレンジから黄色へ */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
  /* ★ グラデーション適用に必要 */
  text-align: center;
  /* ▲▲▲ ここまで ▲▲▲ */
}

.trainer-comment {
  font-size: 0.75rem;
  /* サイズ調整 */
  color: #555;
  line-height: 1.6;
}

/* トレーナー画像 */
.trainer-image {
  flex-shrink: 0;
  text-align: center;
  margin-top: 5px;
  margin-bottom: 0;
  order: 2;

}

.trainer-image img {
  width: 120px;
  /* ★ 幅を調整 (例: 150px) */
  height: auto;
  /* ★ 高さは自動で比率を維持 */
  border-radius: 8px;
  /* ★ 角丸四角形にする (任意) */
  object-fit: contain;
  /* または contain (余白許容なら) or 不要 */
  display: block;
  /* 画像下の余白を防ぐ */
  margin-right: 0.5px;
}

/* トレーナー レスポンシブ */
/* (992px以下のスタイルは既存のまま) */
@media (max-width: 992px) {
  .trainer-cards {
    grid-template-columns: 1fr;
    /* 1列表示 */
    max-width: 600px;
    /* 1列時の最大幅 */
    margin: 0 auto;
  }
}

/* ▼▼▼ 767px以下でカード内レイアウトを変更 ▼▼▼ */
@media (max-width: 767px) {

  .trainer-section {

    position: relative;
    /* .section-background の position:absolute の基準となります */
    /* min-height: 500px; */
    /* 例: モバイルでもセクションに最低限の高さを確保する場合 */
  }

  .trainer-section .section-background {
    /* 高さをモバイル用に調整 */
    height: 45vh;
    width: 100%;
    /* 例: ビューポートの高さの40%。または 300px のような固定値でも良いです */

    background-attachment: scroll;
    /* ★ モバイルでは fixed を scroll に変更します */
  }

  .trainer-section::after {
    /* セクションの疑似要素としてオーバーレイを追加 */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 45vh;
    /* ★ 背景画像と同じ高さ (要調整) */
    /* ★ 薄水色の半透明オーバーレイ (RGBAで色と透明度を指定) */
    background: rgba(21, 27, 60, 0.65);
    /* 例: #e0f7ff を80%の透明度で */
    /* 他の薄水色例: rgba(173, 216, 230, 0.7); LightBlue 70% */
    z-index: -1;
    /* ★ 背景画像(1)の上、コンテンツ(3)の下 */
  }

  /* セクションタイトルなどのスタイル */
  .trainer-section .section-title {
    font-size: 1.7rem;
    /* 例 */
    letter-spacing: 1px;
  }

  .trainer-subtitle {
    font-size: 1.1rem;
    /* 例 */
  }

  .trainer-description {
    font-size: 1rem;
    margin-bottom: 30px;
    /* 例 */
  }

  .br-sp {
    display: block;
  }


  .trainer-section .container {
    /* ← 実際のセレクタに合わせる */
    /* ★ 左右のパディングを同じ値にする */
    padding-left: 15px;
    padding-right: 15px;
  }

  /* カード全体のコンテナ */
  .trainer-cards {
    max-width: none;
    /* ★ 最大幅の上限をなくす */
    width: 100%;
    /* ★ 画面幅いっぱいに広がるように */
    padding-left: 10px;
    /* ★ 画面左右の余白をここで確保 (調整可) */
    padding-right: 10px;
    /* ★ 画面左右の余白をここで確保 (調整可) */
    box-sizing: border-box;
    /* ★ paddingを含めて幅100%にする */
    gap: 25px;
    /* カード間の垂直方向の隙間 */
  }

  /* トレーナーカード */
  .trainer-card {
    display: flex;

    flex-direction: column;
    /* 全体を縦積み (タイトル → メインコンテンツ) */
    align-items: stretch;
    /* 子要素の幅を親に合わせる */
    gap: 15px;
    /* タイトルとメインコンテンツの間隔 */
    padding: 20px;
    /* モバイル用パディング (例) */
    max-width: 800px;
    /* 親のグリッドセルに合わせる */
    width: 350px;
  }

  .comment-title {
    /* HTML変更後は order 不要 */
    width: 100%;
    margin-bottom: 0;
    /* 下のマージンは gap で管理 */
    font-size: 1.1rem;
    /* モバイル用サイズ (例) */
    text-align: center;
    /* 中央揃え */
    padding: 8px 5px;
    line-height: 1.4;
    color: #ffffff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    position: relative;
    /* ::before の基準 */
    background: none;
    /* 背景は ::before で */
    border-radius: 6px;
    /* PC版から継承または再指定 */
    box-sizing: border-box;
    font-weight: 300;
    /* PC版から継承または再指定 */
    white-space: normal;
    /* PC版から継承または再指定 */
  }

  /* comment-title::before の高さ修正 */
  .comment-title::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* ★ 高さを100%にして完全に覆う */
    /* padding は削除 */
    background: linear-gradient(to right, #ff8c00, #ffd700);
    border-radius: 6px;
    z-index: -1;
  }


  .trainer-cards {
    padding: 0px;
  }

  /* 2. 画像とテキスト群を横並びにするラッパー */
  .trainer-main-content {
    /* ★HTMLで追加したクラス */
    display: flex;
    flex-direction: row;
    /* 画像とテキストを横並び */
    align-items: flex-start;
    /* 上端揃え */
    gap: 15px;
    /* 画像とテキストの間隔 */
    width: 100%;
  }

  /* トレーナー情報 (左側) */
  .trainer-info {
    order: 1;
    /* ★ こちらを先に (左に) */
    flex: 1;
    text-align: left;
    /* font-weight なども必要ならPCから継承or再指定 */
  }

  /* トレーナー画像 (右側) */
  .trainer-image {
    order: 2;
    /* ★ こちらを後に (右に) */
    flex-basis: 70px;
    /* 画像の基本幅 */
    flex-shrink: 0;
    margin-top: 0;
  }

  .trainer-image img {
    width: 100px;
    /* ★画像サイズ (flex-basisと合わせる) */
    height: 200px;
    /* ★画像サイズ (正方形にする場合) */
    object-fit: contain;
    /* 画像の表示方法 */
    border-radius: 8px;
    display: block;
  }

  /* トレーナー情報 (名前、英語名、コメント) */
  .trainer-info {
    order: 1;
    /* 配置順 (デフォルト) */
    flex: 1;
    /* 残りのスペースを埋める */
    text-align: left;
    /* テキストは左揃え */
  }

  .trainer-name {
    font-size: 1.6rem;
    margin-bottom: 2px;
    font-weight: 700;
    text-align: center;
  }

  .trainer-name-eng {
    font-size: 0.9rem;
    margin-bottom: 8px;
    text-align: center;
  }

  .trainer-comment {
    font-size: 0.75rem;
    line-height: 1.5;
    text-align: left;
    /* ★ コメントだけ左揃えに戻す */
  }

}


/*--------------------------------------------------
  体験トレーニングセクション
--------------------------------------------------*/
.section-trial {
  padding: 80px;
  position: relative;
  background-color: #e0f7ff;
  z-index: 0;
}

/* 背景画像コンテナ (他のセクションと同様と仮定) */
.section-trial .section-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 30%;
  z-index: -2;
  /* オーバーレイより後ろ */
  background-image: url("images/trial-bg.jpg");
  background-attachment: fixed;
  background-size: cover;
  background-position: center;

}

/* ▼▼▼ グレーオーバーレイを追加 ▼▼▼ */
.section-trial::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 30%;
  background: rgba(21, 27, 60, 0.65);
  /* 例: #e0f7ff を80%の透明度で */
  z-index: -1;
  /* 背景画像とコンテンツの間 */
}

.section-trial .section-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 20px;
}

/* タイトル */
.section-trial .section-title {
  font-size: 2.4rem;
  /* ★ サイズ調整 (他と合わせる) */
  font-weight: 500;
  /* ★ 太さ調整 */
  margin-bottom: 5px;
  color: #fff;
  /* ★ 背景が暗くなるため白文字に変更 */
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  /* ★ 影を追加 */
  /* 下線が必要なら追加 */
  position: relative;
  display: inline-block;
  padding-bottom: 15px;
  letter-spacing: 0.3em;
}

/* ★ 追加した英語タイトルのスタイル */
.section-title-eng {
  font-size: 1.3rem;
  /* color: #b0b0b0; */
  /* ← 通常の色指定を削除 */
  font-weight: 400;
  /* ★ グラデーションが見やすいように太字推奨 */
  text-align: center;
  margin-top: 0;
  margin-bottom: 30px;
  letter-spacing: 0.5em;

  /* ▼▼▼ 文字色グラデーション設定 ▼▼▼ */
  background: linear-gradient(to right,
      #ff4b4b 0%,
      /* 赤 (開始位置) */
      #ffa500 45%,
      /* オレンジ (全体の25%の位置) */
      #4dff4d 60%
      /* 緑 (全体の75%の位置) */
    );
  -webkit-background-clip: text;
  /* ★ 正しく記述されているか？ */
  background-clip: text;
  /* ★ 正しく記述されているか？ */
  color: transparent;
  /* ★★★ これが最重要！適用されているか？ ★★★ */

}

/* サブタイトル */
.section-subtitle-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-bottom: 60px;
  /* ★ ステップカードとの間隔調整 */
}

.section-subtitle-line {
  height: 1px;
  width: 50px;
  background-color: rgba(255, 255, 255, 0.5);
  /* ★ 線色を明るく */
}

.section-subtitle {
  font-size: 1.3rem;
  color: #eee;
  /* ★ 文字色を明るく */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
  /* ★ 影を追加 */
}

/* ステップ全体 */
.trial-steps {
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 1100px;
  margin: 0 auto;
}

/* 各ステップカード */
.trial-steps {
  background-color: #ffff;
  /* ★ 背景を白に */
  border-radius: 25px;
  /* ★ コンテナの角を丸くする (半径はお好みで) */
  padding: 20px;
  /* ★ コンテナの内側の余白 (上下左右) */
  max-width: 900px;
  /* ★ コンテナの最大幅 (お好みで調整) */
  margin: 50px auto;
  /* ★ セクション内での上下マージンと左右中央揃え */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  /* ★ 任意: 影で見やすく */
  box-sizing: border-box;
  /* ▼▼▼ 画像を縦に配置するための設定 ▼▼▼ */
  display: flex;
  flex-direction: column;
  /* 子要素を縦方向に並べる */
  align-items: center;
  /* 子要素(画像)を水平方向中央に */
  gap: 30px;
  /* ★ 画像間の垂直方向の隙間 */
  /* ▲▲▲ ここまで ▲▲▲ */
}

/* 各ステップのラッパー */
.trial-step {
  width: 100%;
  max-width: 600px;
  /* 画像の最大幅に合わせるなど調整 */
  text-align: center;
  box-sizing: border-box;
  /* 念のため */

  /* ▼▼▼ アニメーション初期状態 ▼▼▼ */
  opacity: 0;
  /* ★ 最初は透明 */
  transform: translateX(-30px);
  /* ★ 最初は少し左にずらす (右からなら +30px) */
  /* または transform: translateY(30px); で下からフワッと表示 */
  /* ▲▲▲ ここまで ▲▲▲ */

  /* ▼▼▼ transition の設定 ▼▼▼ */
  /* opacity と transform の変化に 0.6秒かけて ease-out でアニメーション */
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  /* transition-delay は下で個別に設定 */
  will-change: opacity, transform;
  /* ブラウザに変化を予告 (パフォーマンス向上ヒント) */
  /* ▲▲▲ ここまで ▲▲▲ */
}

/* ★ 表示アニメーション: 画面内に入ったときのクラス (JavaScriptで付与) */
.trial-step.is-visible {
  opacity: 1;
  /* ★ 不透明にする */
  transform: translateX(0);
  /* ★ 元の位置に戻す */
  /* または transform: translateY(0); */
}

/* --- ステップごとのアニメーション遅延 --- */
/* is-visible が付く前の要素に transition-delay を設定 */
.trial-step:nth-child(1) {
  transition-delay: 0.1s;
}

.trial-step:nth-child(2) {
  transition-delay: 0.2s;
}

.trial-step:nth-child(3) {
  transition-delay: 0.3s;
}

.trial-step:nth-child(4) {
  transition-delay: 0.4s;
}

/* --- 遅延ここまで --- */


.step-image.is-mobile {
  display: none;
}


/* 体験 レスポンシブ */
@media (max-width: 768px) {
  .section-trial {
    padding: 60px 0;
  }

  .section-trial .section-title {
    font-size: 1.6rem;
    letter-spacing: 4px;
  }

  /* タイトルサイズ */
  .section-subtitle-container {
    margin-bottom: 40px;
  }

  .section-subtitle {
    font-size: 1rem;
  }


  /* 背景画像コンテナ (他のセクションと同様と仮定) */
  .section-trial .section-background {
    position: absolute;
    top: 0;
    left: 0;
    width:430px;
    height: 45vh;
    z-index: -2;
    /* オーバーレイより後ろ */
    background-image: url("images/trial-bg.jpg");
    background-attachment: scroll;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* これを追加！ */

  }

  /* ▼▼▼ グレーオーバーレイを追加 ▼▼▼ */
  .section-trial::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 45vh;
    background: rgba(21, 27, 60, 0.65);
    /* 例: #e0f7ff を80%の透明度で */
    z-index: -1;
    /* 背景画像とコンテンツの間 */
  }

  .trial-steps {
    padding: 10px;
    /* スマホではパディングを狭める */
    gap: 20px;
    /* スマホでは画像間の隙間を狭める */
    border-radius: 20px;
    max-width: 90%;
    /* 画面幅に対する割合で指定 */
    margin: 10px auto;
    display: flex;
    /* flex であることを確認 */
    flex-direction: column;
    /* ★★★ 水平中央揃えを確実に適用 ★★★ */
    align-items: center;
  }

  .step-image.is-pc {
    display: none;
  }

  .step-image.is-mobile {
    display: block;
    /* 表示 */
  }

  .trial-step .step-image {
    width: 100%;
    max-width: 400px;
    margin-bottom: 20px;
    align-items: center;

  }

  .trial-step .step-content {
    text-align: center;
  }

  .step-title {
    font-size: 1.2rem;
  }
}



.trial-step {
  max-width: 100%;
  /* スマホでは画像の最大幅制限を解除 */
}

.step-image {
  border-radius: 10px;
  /* スマホでは画像の角丸を少し小さく */
}



/*--------------------------------------------------
  お客様の声セクション
  ※注意: テキストの声部分のHTMLに合わせてCSS追加が必要
--------------------------------------------------*/
/* セクション全体のテキスト中央揃え (必要に応じて) */
.voice {
  /* または #voice など、セクションを特定するセレクタ */
  padding-top: 80px;
  /* セクションの上下余白 */
  padding-bottom: 60px;
  background-color: #ffff;
  /* セクションの背景色 (例: 薄いグレー) */
  text-align: center;
  /* ★ タイトルなどを中央揃え */
}

/* お客様の声 タイトル (他のタイトルと共通スタイル) */
.voice .section-title {
  /* 親セレクタ + .section-title */
  font-size: 2.4rem;
  /* 文字サイズ */
  font-weight: 500;
  /* 太さ */
  color: #333;
  /* 文字色 */
  margin-bottom: 5px;
  /* ★ 下のコンテンツとの間隔 */
  position: relative;
  /* 下線の基準位置 */
  display: inline-block;
  /* 下線の幅をテキストに合わせる */
  /* text-align: center; は親(.voice)から継承される想定 */
}

.voice-subtitle {
  font-size: 1.3rem;
  /* color: #b0b0b0; */
  /* ← 通常の色指定を削除 */
  font-weight: 400;
  /* ★ グラデーションが見やすいように太字推奨 */
  text-align: center;
  margin-top: 0;
  margin-bottom: 30px;
  letter-spacing: 0.5em;

  /* ▼▼▼ 文字色グラデーション設定 ▼▼▼ */
  background: linear-gradient(to right,
      #ff4b4b 0%,
      /* 赤 (開始位置) */
      #ffa500 45%,
      /* オレンジ (全体の25%の位置) */
      #4dff4d 60%
      /* 緑 (全体の75%の位置) */
    );
  -webkit-background-clip: text;
  /* ★ 正しく記述されているか？ */
  background-clip: text;
  /* ★ 正しく記述されているか？ */
  color: transparent;
  /* ★★★ これが最重要！適用されているか？ ★★★ */

}


/* Before After */
.before-after-container {

  grid-template-columns: 1fr;
  /* ★ 常に1列表示に変更 */
  gap: 30px;
  /* ★ 縦に並んだアイテム間の隙間 */
  max-width: 1000px;
  /* ★ 1列表示に適した最大幅に調整 (例: 950px) */
  margin: 0 auto;
  /* 中央揃え */
}


/* Before After 画像 */
.before-after-image {
  width: 100%;
  /* 親コンテナ(.before-after-container)の幅に合わせる */
  height: auto;
  /* 高さは自動 */
  aspect-ratio: 10 / 3;
  /* 縦長の比率 (維持) */
  object-fit: contain;
  /* ★ ボックスに合わせてトリミング (余白なし) */
  display: block;
  /* 下の隙間防止 */
  border-radius: 10px;
  /* ★ 画像自体に角丸を設定 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  /* ★ 画像自体に影を設定 */
  /* background-color: #f8f8f8; */
  /* contain の場合の背景色 (不要なら削除) */
  margin: 0;
  /* マージンリセット */
  padding: 0;
  /* パディングリセット */

  /* --- ▼ 表示アニメーション用スタイル ▼ --- */
  opacity: 0;
  /* 初期状態: 透明 */
  transform: translateY(30px);
  /* 初期状態: 少し下に */
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  /* アニメーション */
  will-change: opacity, transform;
}

/* ★ 画面内に入ったときに付与されるクラス */
.before-after-image.is-visible {
  opacity: 1;
  /* 表示状態: 不透明に */
  transform: translateY(0);
  /* 表示状態: 元の位置に */
}

.before-after-image.is-mobile {
  display: none;
}

/* --- レスポンシブ対応 (他のタイトルと共通化可能) --- */
@media (max-width: 768px) {
  .voice {
    /* セクションの余白調整 */
    padding-top: 60px;
    padding-bottom: 40px;
  }

  .voice .section-title {
    font-size: 2rem;
    /* モバイルでのタイトルサイズ */
    margin-bottom: 5px;
    padding-bottom: 1px;
  }

  .voice .section-title::after {
    width: 50%;
    max-width: 120px;
    height: 3px;
    /* モバイルでの下線太さ */
  }

  .before-after-container {
    display: block;
    /* シンプルに縦並び */
    max-width: 90%;
    /* モバイルでの最大幅 (例) */
    height: auto;
  }

  .before-after-image.is-pc {
    display: none;
  }

  .before-after-image.is-mobile {
    display: block;
    /* 表示 */
    width: 100%;
    /* 幅100% */
    aspect-ratio: 2 / 3;
    /* ★ モバイル用アスペクト比 (例) */
    object-fit: contain;
    /* ★ モバイル用フィット方法 (例) */
    margin-bottom: 20px;
    /* 画像間の垂直マージン */
    box-shadow: none;
    /* アニメーションなどは共通スタイルが適用される */
  }

  .before-after-container img.is-mobile:last-of-type {
    margin-bottom: 0;
  }

}


/*--------------------------------------------------
  店舗セクション (.stores)
--------------------------------------------------*/
.stores {
  padding: 60px 0;
  background-color: #e0f7ff;
  /* 背景色 (例: 薄いグレー) */

}

.stores .container {
  max-width: 1140px;
  /* コンテナ幅 */
  margin: 0 auto;
  padding: 0 15px;
}

.stores .section-title {
  display: block;
  /* ★ ブロック要素であることを保証 */
  text-align: center;
  /* ★ テキストを中央揃え (既存) */
  margin-left: auto;
  /* ★ 要素自体を中央揃え */
  margin-right: auto;
  /* ★ 要素自体を中央揃え */
  margin-bottom: 10px;
  font-size: 2.4rem;
  /* 文字サイズ */
  font-weight: 500;
  /* 太さ */
  color: #333;
  /* 文字色 */
}

.stores .store-subtitle {
  font-size: 1.3rem;
  /* color: #b0b0b0; */
  /* ← 通常の色指定を削除 */
  font-weight: 400;
  /* ★ グラデーションが見やすいように太字推奨 */
  text-align: center;
  margin-top: 0;
  margin-bottom: 50px;
  letter-spacing: 0.5em;

  /* ▼▼▼ 文字色グラデーション設定 ▼▼▼ */
  background: linear-gradient(to right,
      #ff4b4b 0%,
      /* 赤 (開始位置) */
      #ffa500 45%,
      /* オレンジ (全体の25%の位置) */
      #4dff4d 60%
      /* 緑 (全体の75%の位置) */
    );
  -webkit-background-clip: text;
  /* ★ 正しく記述されているか？ */
  background-clip: text;
  /* ★ 正しく記述されているか？ */
  color: transparent;
  /* ★★★ これが最重要！適用されているか？ ★★★ */

}

/* 全店舗を囲むコンテナ */
.store-list-container {
  display: flex;
  flex-direction: column;
  /* 店舗ブロックを縦に並べる */
  gap: 60px;
  /* ★ 店舗ブロック間の大きな隙間 */
}

/* --- 新しいアニメーションキーフレーム (下からフェードイン) --- */
@keyframes fadeInUpAnimation {
  from {
    opacity: 0;
    transform: translateY(30px); /* 少し下から開始 */
  }
  to {
    opacity: 1;
    transform: translateY(0); /* 本来の位置へ */
  }
}

/* 各店舗ブロックのコンテナ */
.store-block {
  background-color: #ffffff;
  /* 白背景 */
  border-radius: 18px;
  /* 角丸 */
  padding: 35px;
  /* 内側の余白 */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.09);
  /* 影 */
  box-sizing: border-box;
  overflow: hidden;
  /* 角丸を iframe にも適用しやすくする */
  opacity: 0; /* ★ 初期状態は透明 */
  transform: translateY(30px); /* ★ 初期状態は少し下に */
}

.store-block.is-visible {
  animation-name: fadeInUpAnimation;
  animation-duration: 0.8s; /* アニメーションの長さ */
  animation-timing-function: ease-out;
  animation-fill-mode: forwards; /* アニメーション終了後、最後の状態を維持 */
  /* animation-delay は以下で nth-child を使って個別に設定 */
}

/* 各 .store-block のアニメーション遅延 */
/* .store-list-container 直下にある .store-block を対象とします */
.store-list-container > .store-block.is-visible:nth-child(1) {
  animation-delay: 0.1s;
}
.store-list-container > .store-block.is-visible:nth-child(2) {
  animation-delay: 0.2s;
}
.store-list-container > .store-block.is-visible:nth-child(3) {
  animation-delay: 0.3s;
}

/* 店舗ブロック内の左右カラム用ラッパー */
.store-block-content {
  display: flex;
  flex-wrap: wrap;
  /* スマホなどで折り返し */
  gap: 35px;
  /* ★ 画像とマップの間の隙間 */
  align-items: stretch;
  /* 高さを揃える (iframeには効きにくい場合あり) */
}

/* 店舗画像エリア */
.store-block-image {
  flex: 1;
  /* スペースを分け合う */
  min-width: 300px;
  /* 折り返し基点の最小幅 */
}

.store-block-image img {
  display: block;
  width: 90%;
  height: 90%;
  /* ★ 親要素の高さに合わせる */
  object-fit: contain;
  /* 領域を埋めるように表示 */
  border-radius: 12px;
  /* ★ 画像の角丸 */
  min-height: 350px;
  /* 画像が潰れない最小高さ */
}

/* マップエリア */
.store-block-map {
  flex: 1;
  /* スペースを分け合う */
  min-width: 300px;
  /* 折り返し基点の最小幅 */
  display: flex;
  /* 中のiframeを制御 */
}

.store-block-map iframe {
  display: block;
  width: 100%;
  height: 400px;
  /* ★ マップの高さを指定 */
  /* height: 100%; */
  /* ← stretchを効かせたい場合 */
  border: none;
  border-radius: 12px;
  /* ★ マップの角丸 */
}

/* レスポンシブ対応 (スマホ表示) */
@media (max-width: 767px) {

  .stores .container {
    max-width: none;
    /* PC用のmax-widthを解除 */
    /* または max-width: 100%; */
    padding: 0 10px;
    /* モバイル用の左右パディング (例: 10px) */
    box-sizing: border-box;
    /* 念のため */
  }

  .stores .section-title {
    font-size: 1.9rem;
    /* 文字サイズ */
    font-weight: 500;
    /* 太さ */
    color: #333;
    /* 文字色 */
  }

  .stores .store-subtitle {
    font-size: 1rem;
  }

  .store-list-container {
    gap: 40px;
    /* ブロック間隔を狭める */
  }

  .store-block {
    padding: 20px;
    border-radius: 15px;
    width: 100%;
    /* ★ 親コンテナ幅に合わせる */
    box-sizing: border-box;
    /* paddingを含める */


  }

  .store-block-content {
    flex-direction: column;
    /* 縦積み */
    gap: 25px;
  }

  .store-block-image {
    min-width: 100%;
    order: 1;
    /* 画像を先に */
    width: 100%;
  }

  .store-block-image img {
    width: 100%;
    /* ★ 幅を100%に */
    height: 280px;
    /* 高さを指定 (例) */
    min-height: auto;
    border-radius: 10px;
    object-fit: contain;
    /* 表示方法 (例) */
    display: block;
  }

  .store-block-map {
    display: block;
    min-width: 100%;
    order: 2;
    /* マップを後に */
    height: 300px;
    /* スマホでのマップ高さ */
    width: 100%;
  }

  .store-block-map iframe {
    display: block;
    height: 300px;
    width: 100%;
    border-radius: 10px;
    border: none;
  }



}


/*--------------------------------------------------
  問い合わせフォームセクション (.inquiry)
--------------------------------------------------*/
.inquiry {
  padding: 80px 0;
  background-color: #e0f7ff;
}

/* セクションタイトル (共通スタイルを想定) */
/* タイトルを中央揃えにするため、コンテナにtext-alignを追加 */

.promo-header-container {
  position: relative;
  /* 子要素のabsolute配置の基準点 */
  width: 1200px;
  height: 600px;
  overflow: hidden;
  /* はみ出した動画を隠す */
  margin-left: auto;
  margin-right: auto;
}

.promo-content-overlay {
  width: 50%;
  position: relative;
  /* z-indexを効かせるためと、レイアウトの基準 */
  z-index: 10;
  /* 動画より手前に表示 */
  /* ▼▼▼ 幅と中央揃え、角丸の設定 ▼▼▼ */
  box-sizing: border-box;
  /* paddingとborderをwidth/heightの計算に含める */
  padding: 40px 20px;
  /* テキストコンテンツ周りの余白。これで高さも決まる */
  margin-left: auto;
  /* 左マージンを自動にして中央揃え */
  margin-right: auto;
  /* 右マージンを自動にして中央揃え */
  text-align: center;
  border-radius: 15px;
  /* 背景の角を丸める (半径15pxの例。お好みで調整) */

  color: #fff;
  /* 文字色 (グラデーション背景に合わせて調整) */
  background: linear-gradient(to right, rgb(255, 128, 0), rgb(255, 230, 0));
  /* オレンジから黄色へのグラデーション */
  /* 必要であれば、この要素の最小の高さや固定の高さを指定 */
  /* min-height: 160px; */
}

.promo-main-title {
  font-size: 2rem;
  /* 例 */
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 15px;
  /* サブタイトルとの間隔 */
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
  /* 文字の視認性向上のため (任意) */
}

.promo-sub-title {
  font-size: 1rem;
  /* 例 */
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1.5;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
  /* 文字の視認性向上のため (任意) */
}

.promo-video-background-wrapper {
  position: absolute;
  left: 0;
  width: 100%;

  top: 60px;
  /* この値を調整してください。promo-content-overlayの高さの約半分 */
  /* 高さは、開始点からpromo-header-containerの下端まで */
  height: calc(100% - 1px);
  /* 上記のtopの値と同じ値を引く */
  z-index: 1;
  /* promo-content-overlay の後ろ */
}

.promo-image-background {
  /* HTMLで <img class="promo-image-background"> を使用した場合 */
  display: block;
  /* img要素の予期せぬ下余白を防ぐ */
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* ラッパー要素いっぱいに画像を表示 (アスペクト比維持、はみ出しはトリミング) */
}


.form-followup-container {
  /* 横幅と中央揃え */
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;

  /* ★★★ 位置調整 ★★★ */
  position: relative;
  /* z-indexを有効にするため */
  z-index: 20;
  /* 動画や他のオーバーレイより手前に表示 */
  margin-top: -200px;
  /* ★★★ 開始位置を上に調整 (例: -80px。この値を調整してください) ★★★ */
  /* promo-content-overlayの下端からどの程度上にするかで値を決めます */

  /* ★★★ 背景と見た目 (透過効果を追加) ★★★ */
  background-color: rgba(242, 247, 249, 0.85);
  /* ★★★ 背景色をRGBAに変更し、透明度を85%に設定 (0.0〜1.0で調整) ★★★ */
  border-radius: 18px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  text-align: center;

  /* コンテンツ自体のための内側パディング */
  padding-top: 30px;
  padding-bottom: 10px;

  /* 下のマージン */
  margin-bottom: 40px;
}

.followup-heading {
  font-size: 1.6rem;
  /* 見出しのサイズ */
  font-weight: bold;
  color: #333;
  /* 文字色 */
  margin-top: 0;
  margin-bottom: 10px;
}

.followup-text {
  font-size: 1rem;
  line-height: 1.6;
  color: #555;
  max-width: 550px;
  /* テキストが長くなる場合、読みやすさのために最大幅を設定 */
  margin-left: auto;
  /* 上記 max-width と合わせて中央揃えにする場合 */
  margin-right: auto;
}

.followup-image-content {
  text-align: center;
  /* 画像を中央に配置 */
}

.followup-image-content img {
  display: inline-block;
  /* text-align:centerで中央寄せにするため */
  max-width: 100%;
  /* 親要素の幅を超えないように */
  height: 100px;
  /* アスペクト比を維持 */
  border-radius: 8px;
  /* 画像の角丸 (任意) */
  /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
  /* 画像に影 (任意) */

  /* コンテンツ自体のための内側パディング */
  padding-top: 30px;
  padding-bottom: 30px;



  /* 上下のマージン */
  /* margin-top は .promo-header-container の margin-bottom で調整 */
  margin-bottom: 30px;
  /* ★ 下に来る .inquiry .container (フォームタイトル等を含む) とのマージン */
  /* z-index: 5; は通常のフローでは不要な場合が多い */
}

.inquiry .container {
  max-width: 700px;
  /* フォーム幅に合わせる */
  margin: 0 auto;
  text-align: center;
  /* ★ タイトルと送信ボタンを中央揃え */
}

.inquiry .section-title {
  font-size: 2.4rem;
  font-weight: 500;
  color: #333;
  margin-bottom: 10px;
  margin-top: 10px;
  position: relative;
  display: inline-block;
  padding-bottom: 1px;
}

.inquiry-subtitle {
  font-size: 1.2rem;
  /* color: #b0b0b0; */
  /* ← 通常の色指定を削除 */
  font-weight: 400;
  /* ★ グラデーションが見やすいように太字推奨 */
  text-align: center;
  margin-bottom: 30px;
  letter-spacing: 0.3em;

  /* ▼▼▼ 文字色グラデーション設定 ▼▼▼ */
  background: linear-gradient(to right,
      #ff4b4b 0%,
      /* 赤 (開始位置) */
      #ffa500 45%,
      /* オレンジ (全体の25%の位置) */
      #4dff4d 60%
      /* 緑 (全体の75%の位置) */
    );
  -webkit-background-clip: text;
  /* ★ 正しく記述されているか？ */
  background-clip: text;
  /* ★ 正しく記述されているか？ */
  color: transparent;
  /* ★★★ これが最重要！適用されているか？ ★★★ */

}

/* フォーム全体のスタイル */
.inquiry-form {
  background-color: #f2f7f9;
  padding: 40px;
  margin-top: 30px;
  /* タイトル下のマージン */
  border-radius: 18px;
  /* ★ 角を丸くする */
  text-align: left;
  /* フォーム内部の要素は左揃え */
}

/* 各入力項目のグループ */
.form-group {
  margin-bottom: 25px;
  /* 各項目の下の間隔 */
}

/* ラベル */
.form-label,
.gender-group legend {
  /* fieldsetのlegendもラベルスタイルを適用 */
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: #495057;
  /* 少し濃いめのグレー */
  font-size: 0.95rem;
}

/* 必須マーク */
.required-mark {
  color: #dc3545;
  /* やや暗めの赤 */
  font-size: 0.8em;
  margin-left: 4px;
  font-weight: normal;
}

/* 入力欄 (input, select, textarea) 共通スタイル */
.form-control {
  display: block;
  width: 100%;
  padding: 10px 14px;
  /* パディング調整 */
  font-size: 1rem;
  line-height: 1.6;
  color: #212529;
  /* 入力文字色 */
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  /* 枠線 */
  border-radius: 6px;
  /* 角丸 */
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  box-sizing: border-box;
}

.form-control::placeholder {
  /* プレースホルダー */
  color: #adb5bd;
  opacity: 1;
}

.form-control:focus {
  /* フォーカス時 */
  border-color: #fecba1;
  /* オレンジ系の枠線 */
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(255, 140, 0, 0.2);
  /* オレンジ系の影 */
}

/* Textarea */
textarea.form-control {
  min-height: 120px;
  resize: vertical;
}

/* Select */

select.form-control:invalid,
select.form-control option[value=""] {
  /* 未選択時の文字色 */
  color: #adb5bd;
}

select.form-control option {
  /* 選択肢の文字色 */
  color: #212529;
}

/* --- 性別ラジオボタン --- */
.gender-group fieldset,
/* fieldsetスタイルリセット */
.gender-group {
  border: none;
  padding: 0;
  margin: 0;
}

.radio-options {
  /* ラジオボタンの選択肢を横並びに */
  display: flex;
  flex-wrap: wrap;
  /* 折り返し可 */
  gap: 10px 20px;
  /* 縦横の隙間 */
  padding-top: 5px;
  /* 上に少し余白 */
}

.radio-item {
  /* 各ラジオボタン＋ラベル */
  display: flex;
  align-items: center;
}

.radio-label {
  /* ラベル */
  margin-bottom: 0;
  margin-left: 6px;
  /* ボタンとラベルの間隔 */
  font-weight: normal;
  color: #333;
  cursor: pointer;
}

input[type="radio"] {
  /* ラジオボタン本体 */
  margin: 0;
  width: 1.1em;
  height: 1.1em;
  cursor: pointer;
  vertical-align: middle;
  /* テキストとの位置合わせ */
}

/* --- 希望日時 --- */
.datetime-inputs {
  /* 日付と時間の入力欄を横並びに */
  display: flex;
  flex-wrap: wrap;
  /* モバイルで折り返すように */
  gap: 15px;
  /* 入力欄の間の隙間 */
}

.date-input {
  /* 日付入力欄 */
  flex: 2 1 180px;
  /* 幅の比率と最小幅 */
}

.time-select {
  /* 時間選択欄 */
  flex: 1 1 120px;
  /* 幅の比率と最小幅 */
}

/* --- プライバシーポリシー同意 --- */
.privacy-policy-agreement {
  margin: 30px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  /* 折り返し可 */
  gap: 8px;
  font-size: 0.9rem;
}

.privacy-policy-agreement input[type="checkbox"] {
  width: 1.1em;
  height: 1.1em;
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
}

.privacy-policy-agreement label {
  margin-bottom: 0;
  font-weight: normal;
  color: #555;
  cursor: pointer;
  line-height: 1.4;
}

.privacy-policy-agreement label a {
  /* ポリシーへのリンク */
  color: #ff8c00;
  text-decoration: underline;
}

.privacy-policy-agreement label a:hover {
  color: #cc7000;
}


/* --- 送信ボタン --- */
.submit-button-container {
  margin-top: 30px;
  text-align: center;
  /* text-align: center; は親(.container)から継承 */
}

.btn.submit-btn {
  display: inline-block;
  font-weight: bold;
  color: #fff;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background: linear-gradient(to right, #ff8c00, #ffd700);
  /* グラデーション */
  border: none;
  padding: 14px 45px;
  /* パディング調整 */
  font-size: 1.1rem;
  border-radius: 50px;
  /* 丸いボタン */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.btn.submit-btn:hover {
  background: linear-gradient(to right, #ffa500, #ffec8b);
  /* ホバー色 */
  transform: translateY(-2px);
  /* 少し浮き上がる */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}


/* --- レスポンシブ対応 --- */
@media (max-width: 768px) {
  .inquiry .container {
    max-width: 90%;
    /* モバイルではコンテナ幅を広げる */
    padding-top: 0px;
    padding-bottom: 0px;
    margin-top: 0;
  }

  .inquiry .section-title {
    font-size: 1.6rem;
    letter-spacing: 0;
    padding-bottom: 0;
  }

  .promo-header-container {
    height: 300px;
    /* ★ モバイルでの動画セクションの高さを調整 (例: 600px -> 400px) */
    width: 100%;
  }

  .promo-content-overlay {
    width: 90%;
    /* ★ モバイルではテキストオーバーレイの幅を広げる (例: 60% -> 85%) */
    padding: 10px 10px;
    /* ★ モバイルでは内側パディングを少し小さく調整 (例) */
    margin-left: auto;
    /* PC版から継承されるはずですが、念のため確認・明示 */
    margin-right: auto;
    /* 同上 */
  }

  .promo-main-title {
    font-size: 1.4rem;
    /* ★ モバイルでのメインタイトルフォントサイズ調整 (例: 2rem -> 1.6rem) */
    margin-bottom: 10px;
    /* ★ モバイルでのサブタイトルとの間隔調整 (例) */
  }

  .promo-sub-title {
    font-size: 0.7rem;
    /* ★ モバイルでのサブタイトルフォントサイズ調整 (例: 1rem -> 0.9rem) */
    line-height: 1.4;
    /* ★ モバイルでの行間調整 (例) */
  }

  .promo-video-background-wrapper {
    /* promo-content-overlay のモバイルでの大まかな高さを見積もる。
      例: padding-top(25) + padding-bottom(25) + main-title(約30-40px) + sub-title(約20-30px) + 余白 = 約100px～120px
      その半分程度を開始点にするイメージ。
    */
    top: 10px;
    /* ★ モバイルでの動画表示開始位置を調整 (例: 80px -> 60px) */
    /* 上記 promo-content-overlay の高さの約半分が目安 */
    height: calc(100% - 0px);
    /* ★ モバイルでの動画の高さを再計算 (topの値と合わせる) */
  }


  .form-followup-container {
    top: 100px;
    margin-left: 5px;
    margin-right: 5px;

  }

  .followup-heading {
    font-size: 20px;
  }

  .followup-image-content {
    width: 100%;
    height: 100px;
    margin-left: 5px;
    margin-right: 5px;
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
  }

  .followup-text {
    font-size: 15px;
    letter-spacing: 0px;
  }


  select.form-control:invalid,
  select.form-control option[value=""] {
    /* 未選択時の文字色 */
    color: #adb5bd;
  }

  select.form-control option {
    /* 選択肢の文字色 */
    color: #212529;
  }

  .form-label,
  .gender-group legend {
    font-size: 0.9rem;
  }

  .form-control {
    padding: 10px 12px;
    font-size: 0.95rem;
  }

  .privacy-policy-agreement {
    font-size: 0.85rem;
    justify-content: flex-start;
    /* モバイルでは左寄せに */
  }

  .btn.submit-btn {
    padding: 12px 35px;
    font-size: 1rem;
  }
}


/*--------------------------------------------------
  よくある質問セクション (#faq)
--------------------------------------------------*/
.section-faq {
  padding: 80px 0;
  /* セクション上下の余白 */
  background-color: #e0f7ff;
}

/* セクションタイトル等 */
.section-faq .section-title {
  font-size: 2.4rem;
  font-weight: 500;
  color: #333;
  margin-bottom: 20px;
  position: relative;
  display: block;
  padding-bottom: 1px;
  text-align: center;
}

.section-faq .faq-subtitle {
  font-size: 1.2rem;
  /* color: #b0b0b0; */
  /* ← 通常の色指定を削除 */
  font-weight: 400;
  /* ★ グラデーションが見やすいように太字推奨 */
  text-align: center;
  margin-bottom: 30px;
  letter-spacing: 0.3em;

  /* ▼▼▼ 文字色グラデーション設定 ▼▼▼ */
  background: linear-gradient(to right,
      #ff4b4b 0%,
      /* 赤 (開始位置) */
      #ffa500 45%,
      /* オレンジ (全体の25%の位置) */
      #4dff4d 60%
      /* 緑 (全体の75%の位置) */
    );
  -webkit-background-clip: text;
  /* ★ 正しく記述されているか？ */
  background-clip: text;
  /* ★ 正しく記述されているか？ */
  color: transparent;
  /* ★★★ これが最重要！適用されているか？ ★★★ */

}

/* Q&Aリストコンテナ */
.faq-list {
  max-width: 850px;
  /* Q&Aリスト全体の最大幅 */
  margin: 0 auto;
  /* 中央揃え */
  display: flex;
  flex-direction: column;
  gap: 40px;
  /* 各Q&Aアイテム間の隙間 */
}


/* --- ▼▼▼ ここからアニメーション用のCSSを追加 ▼▼▼ --- */

/* アニメーションキーフレーム (下からフェードイン) */
@keyframes fadeInUpFAQ {
  from {
    opacity: 0;
    transform: translateY(25px); /* 少し下から開始 */
  }
  to {
    opacity: 1;
    transform: translateY(0); /* 本来の位置へ */
  }
}

.faq-item {
  /* 他の既存スタイルがあればここに記述（ただし、アニメーション前の見た目） */
  opacity: 0; /* ★ 初期状態は透明 */
  transform: translateY(25px); /* ★ 初期状態は少し下に */
  /* animation-* プロパティは .is-visible で指定するため、ここでは記述しない */
}

/* .is-visible クラスが .faq-item に付与されたらアニメーションを適用 */
.faq-item.is-visible {
  animation-name: fadeInUpFAQ;
  animation-duration: 0.7s; /* アニメーションの長さ */
  animation-timing-function: ease-out;
  animation-fill-mode: forwards; /* アニメーション終了後、最後の状態を維持 */
  /* animation-delay は以下で nth-child を使って個別に設定 */
}

/* 各 .faq-item のアニメーション遅延 */
/* .faq-list 直下にある .faq-item を対象とします */
.faq-list > .faq-item.is-visible:nth-child(1) { animation-delay: 0.1s; }
.faq-list > .faq-item.is-visible:nth-child(2) { animation-delay: 0.15s; } /* 少しずつ遅延を増やす */
.faq-list > .faq-item.is-visible:nth-child(3) { animation-delay: 0.2s; }
.faq-list > .faq-item.is-visible:nth-child(4) { animation-delay: 0.25s; }
.faq-list > .faq-item.is-visible:nth-child(5) { animation-delay: 0.3s; }
.faq-list > .faq-item.is-visible:nth-child(6) { animation-delay: 0.35s; }
.faq-list > .faq-item.is-visible:nth-child(7) { animation-delay: 0.4s; }
.faq-list > .faq-item.is-visible:nth-child(8) { animation-delay: 0.45s; }
/* HTMLにある全ての .faq-item の数に応じて、必要であれば :nth-child の数を増やしてください */

/* --- ▲▲▲ アニメーション用のCSSここまで ▲▲▲ --- */

/* 質問部分 */
.faq-question {
  display: flex;
  align-items: center;
  /* アイコンとテキストを垂直中央揃え */
  gap: 15px;
  /* アイコンとテキストの間の隙間 */
  /* ▼ オレンジから黄緑へのグラデーション ▼ */
  background: linear-gradient(to right, #ff8c00, #c8ef05);
  /* Orange to YellowGreen */
  color: #ffffff;
  /* ★ 白文字 */
  padding: 18px 30px;
  /* 内側余白 (少し大きめ) */
  border-radius: 12px;
  /* 角丸 */
  font-weight: 500;
  /* 太字 */
  font-size: 1.15rem;
  /* 文字サイズ (少し大きめ) */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  /* 影 */
  line-height: 1.5;
  /* 行間 */
}

.faq-q-icon {
  font-size: 1.4em;
  /* アイコンサイズ */
  flex-shrink: 0;
  /* アイコンが縮まないように */
  opacity: 0.9;
  /* 少し透明度を落とす */
}

/* 回答部分 */
.faq-answer {
  display: flex;
  align-items: flex-start;
  /* アイコンと吹き出しを上揃え */
  gap: 18px;
  /* ★ アイコンと吹き出しの隙間 */
  margin-top: 20px;
  /* ★ 質問の帯との隙間 */
  padding-left: 15px;
  /* ★ 回答全体を少し右にインデント */
}

/* 回答トレーナーアイコン */
.faq-answer-icon {
  width: 95px;
  /* アイコンサイズ */
  height: 95px;
  /* アイコンサイズ */
  border-radius: 50%;
  /* ★ 丸型 */
  object-fit: contain;
  /* 画像のトリミング方法 */
  flex-shrink: 0;
  margin-top: 8px;
  /* アイコンの垂直位置微調整 */
  border: 3px solid #fff;
  /* 白い枠線 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  background-color: #ffff;
}

/* 回答吹き出し */
.faq-answer-bubble {
  flex-grow: 1;
  /* 横幅を可能な限り取る */
  background-color: #ffffff;
  /* 吹き出しの背景色 (白) */
  border: 1px solid #dce4f0;
  /* 枠線の色 (少し薄め) */
  padding: 25px 30px;
  /* 内側余白 */
  border-radius: 15px;
  /* 角丸 */
  position: relative;
  /* 吹き出しのしっぽの基準点 */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.07);
}

/* 吹き出しのしっぽ (左側) */
.faq-answer-bubble::before {
  content: "";
  position: absolute;
  top: 25px;
  /* アイコンの中心あたりに合わせる (要微調整) */
  left: -11px;
  /* (border-width + border線の太さ) */
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 11px 11px 11px 0;
  /* 三角形のサイズ */
  border-color: transparent #ffffff transparent transparent;
  /* 背景色と同じ */
  filter: drop-shadow(-1px 0px 1px rgba(0, 0, 0, 0.05));
  /* 影 */
}

/* 吹き出しのしっぽの枠線 */
.faq-answer-bubble::after {
  content: "";
  position: absolute;
  top: 25px;
  /* 上と同じ位置 */
  left: -12px;
  /* 枠線なので少し外側 (-11px - 1px) */
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 11px 11px 11px 0;
  border-color: transparent #dce4f0 transparent transparent;
  /* 枠線色と同じ */
  z-index: -1;
  /* 背景色のしっぽより後ろ */
}


.faq-answer-bubble p {
  margin: 0;
  /* pタグのデフォルトマージンを削除 */
  line-height: 1.8;
  /* 行間を少し広めに */
  color: #454545;
  /* 回答テキストの色 */
  font-size: 0.95rem;
}

/* レスポンシブ対応 */
@media (max-width: 767px) {
  .section-faq {
    padding: 50px 0;
  }

  .section-faq .section-title {
    font-size: 25px;
  }

  .faq-list {
    gap: 30px;
    /* スマホではアイテム間隔を狭める */
    max-width: 100%;
  }

  .faq-question {
    padding: 15px 20px;
    font-size: 1.05rem;
    gap: 12px;
  }

  .faq-q-icon {
    font-size: 1.3em;
  }

  .faq-answer {
    gap: 15px;
    padding-left: 5px;
    /* スマホではインデントを減らす */
    margin-top: 15px;
  }

  .faq-answer-icon {
    width: 60px;
    height: 60px;
  }

  .faq-answer-bubble {
    padding: 20px 25px;
    border-radius: 12px;
  }

  /* スマホでのしっぽの位置調整 */
  .faq-answer-bubble::before,
  .faq-answer-bubble::after {
    top: 20px;
    /* アイコンサイズ変更に伴い調整 */
  }

  .faq-answer-bubble p {
    font-size: 0.9rem;
  }
}

/*--------------------------------------------------
  フッター
  ※注意: HTML構造に合わせた詳細なCSSが必要です
--------------------------------------------------*/
.footer {
  background-color: #2f2f5a;
  /* デフォルトの背景色 */
  padding: 30px 0;
  /* PC版の上下パディング */
  color: #ffff;
  font-size: 14px;
}

.footer-container {
  max-width: 1100px;
  margin: 0 auto;
  /* コンテナ自体はページ中央 */
  padding: 0 20px;
  /* コンテナ左右の余白 */
  display: flex;
  /* ★ PC版: justify-content を center に変更して中央揃え */
  justify-content: center;
  align-items: center;
  /* 垂直中央揃え */
  gap: 30px;
  /* ★ 中央揃えにした要素間の隙間 */
}

/* PC版ではモバイル用要素は非表示 (必要なら変更) */
.footer-logo,
.footer-title {
  display: none;
}

/* コピーライト関連のデフォルト (PC表示) */
.footer-copyright {
  display: flex;
  flex-direction: row;
  /* 横並び */
  gap: 8px;
  align-items: center;
  font-size: 0.9em;
}

.footer-copyright p {
  margin: 0;
}


/* --- Footer Responsive Styles (Mobile) --- */
/* 画面幅が768px以下の場合に適用 */
@media (max-width: 768px) {
  .footer {
    background: linear-gradient(to right, orange, rgb(242, 242, 92));
    padding: 15px 10px 20% 10px;
    /* 例: 上15px, 左右10px, 下60px (値は調整可) */
    color: #333;
  }

  .footer-container {
    display: flex;
    flex-direction: column;
    /* 縦並び */
    align-items: center;
    /* 水平中央揃え */
    text-align: center;
    /* ★ モバイル版: 要素間の垂直方向の隙間を設定 */
    gap: 15px;
    /* 例: 15px (値は調整可) */
  }

  /* --- 各要素のモバイル用スタイル --- */

  .footer-logo {
    display: block;
    width: 100px;
    height: auto;
    /* margin-top/padding-topはgapで制御するため不要なことが多い */
  }

  .footer-title {
    display: block;
    font-size: 1.2em;
    /* color: #FFFF; */
    /* ← 背景が明るくなったので白(#FFFF)だと見えにくい可能性あり。デフォルトの #333 を使うか、濃い色を指定推奨 */
    color: #ffff;
    /* 例: 親要素から継承 or #2f2f5a など */
    margin: 0;
  }

  .footer-copyright {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    /* コピーライト内の行間を調整 (例: 3px) */
    font-size: 0.9em;
    line-height: 1.4;
    color: #ffff;
    /* 例: 親要素から継承 or #2f2f5a など */
  }

  .footer-copyright p {
    margin: 0;
  }
}

/* --- フッターCSSここまで --- */