/* 基本的なフォント設定
  index.htmlで読み込んでいる Google Fonts (Noto Sans JP, Inter) を
  サイト全体（bodyタグ）に適用します。
*/
body {
    font-family: 'Noto Sans JP', 'Inter', sans-serif;
}

/* ヒーローセクション（メインの画像表示箇所）の設定
  .hero-section クラスが指定された要素の「::before」（疑似要素）を使って
  背景画像用のレイヤーを挿入します。
*/
.hero-section::before {
    content: ""; /* 疑似要素に必須のプロパティ */
    position: absolute; /* 親要素(.hero-section)を基準に配置します */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    
    /* ユーザー様ご指定の背景画像 (images/bg-1.png)
      index.html と同じ階層に 'images' フォルダがあり、
      その中に 'bg-1.png' があることを前提としています。
    */
    background-image: url('images/bg-1.png'); 
    
    background-size: cover; /* 画像をセクション全体に広げます */
    background-position: center; /* 画像を中央に配置します */
    background-repeat: no-repeat; /* 画像を繰り返しません */
    
    /* 背景画像を少し暗くして、上の文字（白文字）を見やすくします。
      (0.5 の値は 0.1 〜 1.0 の間でお好みに調整してください)
    */
    filter: brightness(0.5); 
    
    /* 重なり順を 0 に設定します。
      index.html側のテキストコンテナ(.container)が 
      Tailwind の 'z-10' (z-index: 10) で手前に表示されるため、
      この疑似要素（背景画像）が背面に表示されます。
    */
    z-index: 0;
}