/* --- .book-hero の背景画像設定 --- */

.book-hero {
  /* 疑似要素を絶対配置するための基準点設定 */
  position: relative;
  
  /* 既存のコンテンツ（テキストなど）が背景画像より手前に来るように設定 */
  z-index: 1;

  /* (オプション) もし .book-hero 自体に背景色があれば無効化 */
  /* background: none !important; */

  padding-left: 2.5rem; /* (例: 40px相当) この値は好みに合わせて調整してください */
}

.book-hero::before {
  /* 疑似要素（背景画像レイヤー）の作成 */
  content: ""; 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* 背景画像を指定 (ステップ1で配置したパス) */
  background-image: url('/images/hero-background.jpg');
  
  /* 画像を中央に配置し、要素全体をカバー */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  
  /* コンテンツの「下」に配置 */
  z-index: -1; 
  
  /* * (オプション) 目を引くように、かつテキストを読みやすくするために
   * 画像を少し暗くしたり、オーバーレイをかける設定 
   */
  
  /* 例1: 画像を少し暗くする (80%の不透明度) */
  /*opacity: 0.8; */
  
  /* 例2: 暗いオーバーレイを重ねる (こちらを使う場合は opacity: 0.8; は消す) */
  
  background-color: rgba(0, 0, 0, 0.2); 
  background-blend-mode: multiply; 
  
}

/* * (オプション) 背景画像が暗い場合、テキストが見えにくくなるため
 * テキストやボタンの色を明るく（白く）調整します。
 */
.book-hero h1,
.book-hero p {
  color: #FFFFFF; /* テキストを白に */
  text-shadow: 5px 5px 10px rgba(0,0,0,0.8);  /* 読みにくければ影をつける */
}

.book-hero .book-btn {
  color: #FFFFFF; /* ボタンの文字を白に */
  border-color: #FFFFFF; /* ボタンの枠線を白に */
}

/* --- セクション間の間隔（余白）の調整 --- */

/* H2, H3タグ（見出し）の上に大きな余白を入れる */
h2, h3 {
    margin-top: 2.5rem !important; /* デフォルトよりかなり広めに設定 */
    margin-bottom: 1.5rem !important; /* 見出し下の余白 */
    line-height: 1.4;
}

/* 段落間の余白も少し広げて読みやすくする */
p {
    margin-bottom: 1.5rem;
    line-height: 1.8; /* 行間を広げて目に優しくする */
}


/* --- セクションタイトルの強調 --- */

/* 大見出し（H2）のデザイン */
h2 {
    /*font-size: 1.75rem;*/     /* 文字サイズを大きく */
    font-weight: 700;       /* 太字 */
    color: #333;            /* 文字色（必要なら変更してください） */
    border-bottom: 2px solid #F78812; /* 下線を追加して区切りを明確に */
    padding-bottom: 0.5rem; /* 下線と文字の間隔 */
}

/* 中見出し（H3）のデザイン */
h3 {
    font-size: 1.4rem;
    font-weight: 600;
    border-left: 5px solid #F78812; /* 左側にアクセントラインを入れる */
    padding-left: 10px;    /* 線と文字の間隔 */
}