body {
  background-color: #e3dbdb;
}

.title img {
    width: 80vw;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* 既存のスタイル */
.title img {
  width: 80vw;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* --- メニューバー（ハンバーガーメニュー）のスタイル --- */
#nav-container {
  display: flex;
  align-items: center;
  padding: 10px;
}
#menu-toggle {
  background: none;
  border: none;
  font-size: 30px;
  cursor: pointer;
  z-index: 1001;
}
#main-nav {
  position: fixed;
  top: 0;
  left: -250px; /* 画面外に隠す */
  width: 250px;
  height: 100%;
  background-color: #838383;
  transition: left 0.3s ease;
  padding-top: 60px;
  z-index: 1000;
}
#main-nav.open {
  left: 0; /* 表示 */
}
#main-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
#main-nav li a {
  display: block;
  padding: 15px;
  text-decoration: none;
  color: white;
  border-bottom: 1px solid #444;
}
#main-nav li a:hover {
  background-color: #555;
}

/* --- カルーセルのスタイル --- */
.carousel-container {
max-width: 90%;
position: relative;
margin: auto;
overflow: hidden;
margin-bottom: 20px;
}
.carousel-slide {
display: none;
}
.carousel-img {
width: 100%;
height: auto;
display: block;
}
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
@keyframes fade {
from {opacity: .4} 
to {opacity: 1}
}
/* Prev/Nextボタン */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
background-color: rgba(0, 0, 0, 0.5);
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* 更新時間表示のスタイル */
.episode-info {
  text-align: right;
  font-size: 0.8em;
  padding: 5px 0;
  color: #555;
}


/* --- レスポンシブな画像/文章の横並びレイアウト --- */

/* コンテナ設定 */
.flex-responsive {
  display: flex;
  /* 画面幅の70%〜90%の範囲で幅を確保 */
  width: 80%; /* 基準となる幅をパーセントで設定 */
  max-width: 900px; /* 広がりすぎ防止の最大幅 */
  min-width: 300px; /* 狭くなりすぎ防止の最小幅 */
  margin: 4vw auto; /* 画面幅に応じた上下マージンと中央寄せ */
  gap: 5%; /* 要素間の隙間をパーセントで設定 */
  align-items: center; /* 垂直方向の中央揃え */
  padding: 2vw; /* 画面幅に応じたパディング */
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

/* 画像エリア設定 */
.image-area {
  /* flex-basisで基準となる幅を設定 (全体の約40%を画像エリアに割り当て) */
  flex-basis: 40%;
  flex-shrink: 0; /* 縮まないように設定 */
  margin: 0; /* figureタグのデフォルトマージンをリセット */
}

/* 画像本体 */
.image-area img {
  display: block;
  width: 100%; /* 親要素の幅いっぱいに広がる */
  height: auto;
  border-radius: 6px;
}

/* 文章エリア設定 */
.text-area {
  flex-grow: 1; /* 残りのスペースを全て占有する */
  /* 文章エリアのフォントサイズを画面幅に応じて調整 */
  font-size: clamp(14px, 1.5vw, 18px); 
}

/* タイトルサイズ調整 */
.text-area .titles {
  margin-top: 0;
  /* タイトルのサイズも画面幅に応じて柔軟に変化 */
  font-size: clamp(1.5em, 3vw, 2.2em); 
  line-height: 1.3;
}
.text-area .text {
  /* 本文の行の高さを少し広げ、読みやすく */
  line-height: 1.6;
}


/* --- レスポンシブ対応 (スマートフォン表示の場合) --- */
@media (max-width: 650px) {
  .flex-responsive {
      flex-direction: column; /* 縦並びに戻す */
      gap: 10px;
      width: 90%; /* スマホでは幅を広げる */
      padding: 4vw;
      text-align: center;
  }
  .image-area {
      /* 縦並びになったら、画像幅を全体の60%に設定 */
      flex-basis: auto;
      width: 60%; 
  }
  .text-area .titles {
      margin-top: 10px;
  }
}

.episodes {
  display: block; /* 横全体をリンクとして機能させる */
  text-decoration: none; /* 下線を消す */
  color: #333; /* テキストカラー */
  padding: 10px 15px; /* 内側の余白を設定 */
  margin: 5px 0; /* 各リンクの間に余白を追加 */
  background-color: #f9f9f9; /* デフォルトの背景色 */
  border: 1px solid #ffffff; /* 枠線を追加 */
  border-radius: 5px; /* 角を丸くする */
  transition: background-color 0.3s ease; /* 背景色の変化をスムーズに */
}

.episodes:hover {
  background-color: rgb(255, 255, 184); /* ホバー時に背景を黄色に */
  color: #000; /* テキストカラーを黒に */
  cursor: pointer; /* カーソルをポインターに */
}

/* --- SNSシェアボタンのスタイル --- */
.share-container {
  text-align: right; /* 右寄せ */
  margin: 20px 0;
  padding-right: 20px; /* 右端からの余白 */
}

.share-label {
  font-size: 0.9em;
  color: #666;
  margin-right: 10px;
}

.share-icon {
  display: inline-block;
  margin-left: 12px;
  vertical-align: middle;
  /* アイコンの色をSNSのイメージに合わせて設定 */
  color: #1DA1F2; /* デフォルトをX (Twitter) の青 */
  transition: transform 0.2s, opacity 0.2s;
}

.share-icon:hover {
  transform: scale(1.1); /* ホバーで少し拡大 */
  opacity: 0.8;
}

/* 個別アイコンの色設定 */
.x-share {
  color: #000; /* X (Twitter) は黒 */
}
.fb-share {
  color: #3b5998; /* Facebook の青 */
}
.line-share {
  color: #00B900; /* LINE の緑 */
}