/* メインエリア全体のスクロールを外側で管理 */
/* ---------- setMOVIEページ専用: Live2D仕様に統一 ---------- */

/* 親Flex (#mainFlexArea) を中央寄せ */
#mainFlexArea {
  display: flex;
  justify-content: center;
  /* Live2Dに合わせて中央寄せ */
  align-items: flex-start;
  gap: 20px;
  /* 左右カラムがある場合の間隔 */
  flex-wrap: wrap;
  /* スマホ時に折り返す場合 */
}

/* 中央コンテンツ (.centerArea) */
.centerArea {
  max-width: 800px;
  /* Live2Dに合わせた最大幅 */
  width: 100%;
  /* 横幅いっぱいに */
  margin: 0 auto;
  /* 中央寄せ */
  box-sizing: border-box;
}

/* 左右カラムが空でもFlexの影響でズレないように幅を確保 */
.leftArea,
.rightArea {
  width: 0;
  /* 空なら幅ゼロで影響をなくす */
  min-width: 0;
}

/* 動画Wrapperを中央寄せ */
.videoWrapper {
  width: 100%;
  max-width: 800px;
  /* 中央コンテンツに合わせる */
  margin: 0 auto;
  /* 中央寄せ */
}

/* iframeの16:9サイズを確保 */
.videoWrapper iframe {
  width: 100%;
  height: 450px;
  /* 必要に応じて変更可能 */
  display: block;
  /* 不要な隙間を消す */
}

.img img {
  max-width: 100%;
  /* 親要素の幅に収める */
  height: auto;
  /* 縦横比を維持 */
  display: block;
  /* 余計な余白を防ぐ */
  margin: 0 auto;
  /* 中央配置 */
}

/*********** 見出しエリアの調整 ***********/
.ttl_line8 {
  position: relative;
  padding: 0.3em 0.5em;
  /* 上下左右に余白を追加 */
  font-weight: bold;
  /* 太字 */
  text-transform: none;
  /* 小文字をそのまま表示 */
  letter-spacing: 2px;
  /* 文字間隔を広げる */
  color: #111;
  /* 見出しの文字色（変更可能） */
  text-align: center;
  /* 見出しを中央揃え */
}

/* 見出し下のグラデーションライン */
.ttl_line8::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  content: '';
  border-radius: 2px;
  background-image: -webkit-gradient(linear, right top, left top, from(#9ca5ee), to(#49ebdf));
  background-image: -webkit-linear-gradient(right, #9ca5ee 0%, #49ebdf 100%);
  background-image: linear-gradient(to left, #9ca5ee 0%, #49ebdf 100%);
}

/* 動画のレスポンシブ表示（16:9アスペクト比） */
.videoWrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  /* 16:9 アスペクト比 */
  overflow: hidden;
  margin-bottom: 20px;
  border-radius: 5px;
}

.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.discount-banner {
  background-color: #ffe0b2;
  /* 薄いオレンジ背景 */
  color: #d35400;
  /* 鮮やかなオレンジ文字 */
  padding: 15px;
  text-align: center;
  font-weight: bold;
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.discount-heading {
  font-size: 1.5em;
  /* 見出しのサイズ */
  color: #e67e22;
  /* 明るいオレンジ色 */
  margin: 0 0 10px 0;
  /* 下部マージンで段落と間隔を作る */
  font-family: 'Helvetica', 'Arial', sans-serif;
  /* フォントを指定 */
}

.discount-banner p {
  font-size: 1em;
  /* 通常のテキストサイズ */
  line-height: 1.6;
  /* 読みやすい行間 */
}


/* 料金比較表 */
.pricingTable {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.pricingTable th,
.pricingTable td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: left;
}

.pricingTable th {
  background-color: #a6f0f7;
}


/* 動画サンプルの横並び */
.sampleVideos {
  display: flex;
  gap: 20px;
  /* 動画間のスペース */
  justify-content: space-between;
  margin-bottom: 20px;
}

/* 各動画ラッパー（16:9のアスペクト比を維持） */
.sampleVideos .videoWrapper {
  width: 45%;
  /* 横幅を45%に設定 */
  position: relative;
  overflow: hidden;
  padding-top: 25.3125%;
  /* 高さを横幅の16:9比率に基づいて設定 (16 ÷ 9 = 1.78 → 100 ÷ 1.78 ≈ 56.25%) */
}

.sampleVideos .videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


/* コラムエリア */
.columnArea {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
}

.columnArea a img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}


.columnArea p {
  margin-bottom: 10px;
  line-height: 1.6;
}

.notice-list {
  list-style-type: disc;
  /* 箇条書きのデザイン */
  padding-left: 20px;
  /* 左側のインデント */
  font-size: 14px;
  /* 目立たないように文字サイズを少し小さく */
  color: #666;
  /* 文字色を薄めのグレーに設定 */
  line-height: 1;
  /* 行間を広げて読みやすく */
  margin-top: 10px;
  text-align: left;
}

.notice-list li {
  margin-bottom: 8px;
  /* 各項目の間隔を少し空ける */
}

.columnArea h2 {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  color: #fff;
  background-color: #E1292E;
  /* 背景色オレンジ */
  padding: 10px;
  border-radius: 5px;
  /* 角丸 */
}

.columnArea p {
  text-align: left;
  /* 左寄せ */
  margin: 0 auto;
  /* 中央配置を維持 */
  max-width: 90%;
  /* 横幅を制限してバランス調整（調整可能） */
}

.box-text-notice {
  position: relative;
  border: 3px double #da4033;
  /* 赤系で目立たせる */
  border-radius: 5px;
  margin: 20px 0;
  padding: 20px;
  width: 100%;
  /* サービス画面幅に合わせる */
  box-sizing: border-box;
  background-color: #fff8f8;
  /* やさしい赤系背景 */
}

.box-text-notice::before {
  content: "重要！";
  /* 見出し文字 */
  position: absolute;
  background-color: #f4f4f4;
  color: #da4033;
  font-weight: bold;
  left: 20px;
  top: -20px;
  padding: 5px 10px;
  border-radius: 3px;
}


/* スマホ（最大幅600px）向け */
@media screen and (max-width: 600px) {
  #mainFlexArea {
    flex-direction: column;
    /* 横並び→縦並びに */
    align-items: center;
  }

  .sampleVideos {
    flex-direction: column;
    /* 横並び→縦並び */
    gap: 15px;
  }

  .sampleVideos .videoWrapper {
    width: 100% !important;
    /* 動画幅を100%に */
    padding-top: 56.25%;
    /* 16:9比の高さ */
  }

  #mainContents {
    padding: 10px;
    max-width: 100%;
  }

  .discount-banner,
  .columnArea {
    padding: 10px;
    margin: 10px 0;
  }

  .columnArea h2 {
    font-size: 20px;
  }

  .ttl_line8 {
    font-size: 1.2rem;
    letter-spacing: 1px;
  }

  .notice-list {
    font-size: 12px;
    padding-left: 15px;
  }
}