/* ヘッダー全体 */
/* ヘッダーを透明にして、背景画像の上に配置 */
.site-header {
    position: absolute; /* ✅ ページ最上部に固定 */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* ✅ 画像の上に配置 */
    background-color: transparent !important; /* ✅ 背景を完全透明にする */
    margin-top: 50px;
}

/* ヘッダー内コンテナ（Flexbox） */
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 40px;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    background-color: transparent !important; /* ✅ 背景色を透明に */
    z-index: 0;
}
      
    /* ロゴ部分：左端に配置 */
    .site-logo {
      flex-shrink: 0;
      margin: 0; /* 左端に寄せる */
      /* もし余白が不要なら padding もリセット */
    }
      
    /* ロゴ画像のサイズ */
    .site-logo img {
      height: 69px;       /* 高さを69pxに固定 */
      width: 69px;        /* 横幅は69pxに固定（必要なら auto に変更） */
    }
      
    /* メニュー部分（例） */
    .main-nav {
      flex: 1;                  /* 空いたスペースを占有 */
      margin-left: 20px;        /* ロゴとの間に余白を設定 */
      color: #fff;
    }
    .main-nav .nav-list {
      display: flex;
      flex-direction: row;      /* 横並びにする */
      list-style: none;
      gap: 30px;                /* 各メニューの間隔 */
      margin: 0;
      padding: 0;
    }
      
    .main-nav .nav-list li a {
    color: #fff;           /* リンクの基本色を白に */
    text-decoration: none; /* 下線を消す */
  }
  
  .main-nav .nav-list li a:hover {
    color: #373e5a;        /* ホバー時の文字色を #373e5a に */
  }
    /* ボタン部分 */
    .header-buttons {
      margin-left: 100px !important;
    }
    
    .header-buttons .btn {
      border-radius: 30px !important;
    }
      
    .header-buttons .btn {
      display: inline-block;
      background-color: #373e5a; /* ボタンの背景色 */
      color: #fff;
      padding: 8px 16px;
      border-radius: 10px;  /* 角を丸く */
      text-decoration: none;
      font-weight: 600;
      transition: background-color 0.3s ease;
    }
      
    .header-buttons .btn:hover {
      background-color: #2b304a;
    }