@charset "utf-8";
/* CSS Document */

#title2 {
  display: block;
  height: 50px;
  border-left: solid 12px #076098;
  font-size: 25px;
  font-weight: bold;
  text-shadow: 1px 1px 2px #999;
  padding-left: 20px;
  line-height: 50px;
  background: linear-gradient(90deg, #ffffff, #70b6d0);
}


/* 話ごとの外枠（話と話の間に広い余白を作る） */
.manga-loop-item {
  margin-bottom: 80px; /* 1話ごとの間隔をしっかり空ける */
}

/* ページ内の一番最後の話だけは下の余白をなしにする */
.manga-loop-item:last-child {
  margin-bottom: 0;
}

/* 全体共通・ベース */
.manga-loop-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* タイトル・サブタイトル */
.manga-title {
  background-color: #ec6200;
  color: #fff;
  padding: 10px;
  font-size: 20px;
  text-align: center;
  font-weight: bold;
  margin: 0;
}

.manga-subtitle {
  color: #ec6200;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  margin: 10px 0 20px;
}

/* コンテンツレイアウト（PC環境） */
.manga-content {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* 漫画とドライバーの声の間の隙間 */
}

.manga-main {
  flex: 1;
  min-width: 60%;
}

.manga-sidebar {
  flex: 1;
  min-width: 35%;
}

/* ドライバーの声 */
.voice-list {
  margin: 0;
}

.voice-title {
  padding: 10px 0;
  font-size: 18px;
  text-align: center;
  font-weight: bold;
}

.voice-item {
  margin: 0 0 10px 0;
}

/* スマホ表示用の調整（画面幅768px以下） */
@media (max-width: 768px) {
  .manga-main,
  .manga-sidebar {
    min-width: 100%; /* スマホ時は縦に並べる */
  }
  .manga-loop-item {
    margin-bottom: 50px; /* スマホ時は余白を少し狭く */
  }
}