/* =========================================
   books.css  : 本紹介ページ専用スタイル
   読み込み順：base.css / list.css の後
========================================= */

@charset "utf-8";

/*著作品
---------------------------------------------------------------------------*/

/* ギャラリー全体のスタイル */
#gallery {
  padding: 40px 20px;
  display: flex; /* ギャラリー全体をフレックスボックスで中央寄せ */
  justify-content: center; /* コンテンツを中央に寄せる */
}

/* グリッドレイアウト */
.gallery-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
}

/* 各アイテムのスタイル */
.gallery-item {
  position: relative;
  overflow: hidden;
  height: auto;
}

.gallery-item img {
  width: 100%;
  height: auto; /* アスペクト比を維持 */
  display: block;
  border-radius: 4px; /* 角丸（必要に応じて変更） */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 微妙な影を追加 */
  transition: 0.3s ease-in-out; /* ホバー時のエフェクトをスムーズに */
}

/* マウスオン時に画像がうっすら白くなる効果 */
.gallery-item:hover img {
  filter: brightness(80%); /* 明るさを80%に調整 */
}

@media (max-width: 768px) {
  #gallery {
    padding: 20px 10px;
  }

  .gallery-container {
    gap: 8px;
  }
}

/* 本の情報欄の設定
---------------------------------------------------------------------------*/
.book-intro {
  display: flex;
  justify-content: space-between; /* 左右に要素を配置 */
  align-items: flex-start; /* 上揃えに変更 */
  margin: 20px 0; /* 上下の余白 */
  gap: 20px; /* 左右の間隔 */
  width: 100%; /* 全体幅を確保 */
}

/* 左半分：画像 */
.book-image {
  flex: 0 0 47%; /* 左側を全体の47%に固定 */
  display: flex;
  justify-content: flex-end; /* 画像を右寄せに配置 */
  align-items: flex-start; /* 上揃え */
}

.book-image img {
  height: 500px;
  border: 1px solid #ccc; /* 枠線（任意） */
}

/* 右半分：本の紹介 */
.book-details {
  flex: 0 0 50%; /* 右側を全体の50%に固定 */
  display: flex;
  flex-direction: column; /* 縦方向に並べる */
  align-items: flex-start; /* 左揃え */
  justify-content: flex-start; /* 上揃え */
  position: relative; /* 子要素の絶対配置の基準とする */
  height: 500px; /* 親要素の高さを固定 */
  box-sizing: border-box; /* パディングやボーダーを含めた幅計算 */
}

/* タイトル */
.book-title {
  font-size: 32px; /* 指定されたフォントサイズ */
  margin: 50px 30px 15px 15px; /* タイトル上下左右の余白 */
  line-height: 1.2; /* 行間を縮める */
  color: #000; /* 黒色 */
}

/* 著者 */
.book-author {
  font-size: 20px; /* フォントサイズ */
  color: #555; /* 少し控えめな色 */
  margin: 0 0 5px; /* 著者の下方向の余白を5pxに設定 */
}

/* 価格 */
.book-price {
  font-size: 20px; /* フォントサイズ */
  color: #555; /* 少し控えめな色 */
  margin: 0 0 5px; /* 下方向の余白を5pxに設定 */
}

/* 発売日 */
.release-date {
  font-size: 12px; /* フォントサイズ */
  color: #666; /* 控えめな色 */
  text-align: right; /* 右寄せ */
  align-self: flex-end; /* コンテナ内の右端に揃える */

  width: 100%; /* コンテナ内で幅を占有 */
}

/* 難易度 */
.difficulty-level {
  position: absolute; /* 親要素を基準に配置 */
  bottom: 50px; /* 親要素の下から50pxの位置に配置 */
  font-size: 20px; /* 任意のフォントサイズ */
}

.star {
  color: orange; /* オレンジ色 */
  font-size: 30px; /* 任意のフォントサイズ */
}

.star-not {
  color: gray; /* 塗られていない星の色 */
  font-size: 30px; /* 任意のフォントサイズ */
}

/* ネットで購入ボタン */
.purchase-button {
  display: inline-block;
  margin-left: 20px;
  position: absolute; /* 親要素を基準に配置 */
  bottom: 10px; /* 親要素の下から20pxの位置に配置 */
  padding: 10px 20px; /* ボタンの余白 */
  font-size: 16px; /* ボタン内テキストの大きさ */
  color: #fff; /* テキスト色 */
  background-color: #74325c; /* ボタン背景色 */
  text-decoration: none; /* テキストの下線を消す */
  border-radius: 5px; /* 角を丸くする */
  transition: background-color 0.3s; /* ホバー時の変化をスムーズに */
}

.purchase-button:hover {
  background-color: #fff; /* ホバー時の色 */
  border: 2px solid #9a4075;
  text-decoration: none; /* 下線を削除 */
  color: #9a4075;
}

/* 本人による本の内容紹介の設定
---------------------------------------------------------------------------*/

.book-section h3 {
  margin-top: 40px !important ; /* 上方向のスペースを追加 */
}

.container {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  margin-left: auto; /* ← 左側の余白を自動で調整 */
  margin-right: auto; /* ← 右側も自動で調整（中央寄せベース） */
  max-width: 1000px; /* ← 最大幅を設定して、中央寄せが効くように */
  padding-left: 40px; /* ← 少しだけ左に余白を残すことで、右寄せ感を演出 */
}

.picture-wrapper {
  display: flex;
  justify-content: flex-start; /* ← 右寄せから左寄せに変更 */
  width: auto;
}

.icon-container {
  max-width: 200px; /* ← 最大幅を制限して安定表示 */
}

.icon {
  width: 100%;
  margin: 20px 0 0 0;
  display: block;
}

.content {
  width: 70%;
  padding: 50px 0 0 0;
  text-align: left;
  box-sizing: border-box; /* ← 幅計算を安定させる */
}

/* 本の内容紹介のpタグの間隔を広げる */
.container .content p {
  margin-bottom: 20px; /* 下方向の間隔を広げる */
  line-height: 1.8; /* 行間を広げる */
}

/* 点線枠で囲むスタイル */
.highlight-box {
  border: 2px dashed #666; /* 点線枠の色と太さ */
  padding: 20px; /* 内側の余白 */
  margin: 0px 25px 30px 25px;
  background-color: #f9f9f9; /* 背景色（任意） */
}

.highlight-box p {
  margin-bottom: 10px; /* 各段落の間隔 */
}

.highlight-box p:last-child {
  margin-bottom: 0; /* 最後の段落の余白をなくす */
}

/* レスポンシブ設定
---------------------------------------------------------------------------*/

@media (max-width: 1200px) {
  .container {
    padding-left: 30px;
    padding-right: 30px;
  }

  .content {
    width: 75%;
    padding: 40px 0 0 0;
  }

  .icon-container {
    max-width: 180px;
  }
}

@media (max-width: 900px) {
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .content {
    width: 80%;
    padding: 30px 0 0 0;
  }

  .icon-container {
    max-width: 160px;
  }
}
@media (max-width: 768px) {
  /* 本の紹介セクションを縦並びに */
  .book-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .book-image {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  .book-image img {
    height: auto;
    max-width: 60%;
    margin: 0 auto;
    display: block;
  }

  .book-details {
    flex: 0 0 auto;
    height: auto;
    width: 100%;
    padding: 0 10px;
    align-items: center;
    text-align: center;
    position: static;
  }

  .book-title {
    font-size: 24px;
    margin: 30px 0 10px;
  }

  .book-author,
  .book-price {
    font-size: 18px;
  }
  .release-date {
    text-align: center;
    align-self: center;
  }

  .difficulty-level {
    position: static;
    margin-top: 20px;
  }

  .purchase-button {
    position: static;
    margin-top: 20px;
  }
}

@media (max-width: 600px) {
  .container {
    flex-direction: column;
    align-items: center;
    padding-left: 10px;
    padding-right: 10px;
  }

  .icon-container {
    display: none;
  }

  .content {
    width: 100%;
    padding: 20px 0 0 0;
  }

  .highlight-box {
    margin: 20px 10px 30px 10px;
  }
}