/* ロゴ画像サイズをCSSで統一管理 */
.site-logo {
  height: 44px;           /* お好みで 36〜56px */
  width: auto;
  display: block;
}

/* ヘッダー行の間隔微調整 */
.header-box {
  gap: 16px;
}

/* PC 横並びナビの見た目 */
.header-nav .nav-link {
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
.header-nav .nav-link:hover {
  text-decoration: underline;
}

/* ハンバーガー固定位置（既存を継承） */
button.menu-btn {
  border: none;
  padding: 7px;
  position: relative;
  right: 20px;
}

/* SPメニューの覆い隠し動作（既存） */
.menu-bio{
  position: fixed;
  top: 0; right: 0;
  z-index: 1000;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 150px 0;
  background: linear-gradient(45deg, #a4dfed 5%, #138a31 100%);
}

/* アニメーション（既存） */
.menu, .menu-bio { transform: translateX(100vw); transition: all .3s linear; }
.menu.is-active, .menu-bio.is-active { transform: translateX(0); }


/* ---- SP時はハンバーガーをロゴと同じ行に並べる ---- */
@media (max-width:767.98px) {
  /* フレックス行で縦中央揃え（保険） */
  .header-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-block: 8px; /* お好みで */
  }

  /* ロゴ画像の高さを決めて基準に（任意） */
  .site-logo {
    height: 40px;  /* 36〜44pxくらいで調整 */
    width: auto;
    display: block;
  }

  /* ハンバーガーを“固定配置”から外し、行の右端へ */
  .menu-btn {
    position: static;   /* ← これが肝 */
    right: auto;
    top: auto;
    width: 44px;
    height: 44px;
    margin-left: auto;  /* 行の右端によせる */
    display: flex;      /* アイコン中央寄せ */
    align-items: center;
    justify-content: center;
    padding: 7px;
	/* header となじむ半透明の暗色。グラデにするとより一体感が出ます */
    background: linear-gradient(180deg,
                 rgba(0,0,0,.55) 0%,
                 rgba(26,26,26,.55) 40%,
                 rgba(43,26,14,.55) 100%);
    backdrop-filter: saturate(110%) blur(0.5px); /* ほんのり質感（対応ブラウザのみ） */
  }
}



/* ===== ヘッダー基調（黒〜焦げ茶の高級感＋うっすら透け） ===== */
:root {
  /* グラデーション色を変えたくなったらここだけ触ればOK */
  --hdr-c1: rgba(0, 0, 0, 0.90);
  --hdr-c2: rgba(26, 26, 26, 0.85);
  --hdr-c3: rgba(43, 26, 14, 0.80); /* 焦げ茶 */
  --hdr-grad: linear-gradient(180deg, var(--hdr-c1) 0%, var(--hdr-c2) 40%, var(--hdr-c3) 100%);
}

header {
  background: var(--hdr-grad);
  color: #fff;
}

/* ===== スマホ時：余計な上下マージンをゼロ、適量のパディングで“詰まり見え”回避 ===== */
@media (max-width: 767.98px) {
  /* header に付いている .my-2 が隙間の主因なので打ち消し */
  header.my-2 { margin-block: 0 !important; }

  /* header 内の上下余白は padding で統一（視覚的に窮屈に見えない最小値） */
  .header-box { 
    padding-block: 10px;          /* ここで“詰まり見え”を防ぐ */
    align-items: center;
    gap: 12px;
  }

  /* 見出しや段落のデフォルト上下マージンを最小化（詰めすぎない程度） */
  header h1, header h2, header h3, header h4, header h5, header p {
    margin-block: 4px;            /* 既定16px→4pxに圧縮 */
  }
  header h5{
  font-size: 0.8rem;
}

  /* ロゴ画像高さ（任意で微調整） */
  .site-logo { height: 40px; width: auto; display: block; }

  /* ハンバーガーは行内配置（右上固定をやめる） */
  .menu-btn {
    position: static;   /* fixed/absolute を無効化 */
    right: auto; top: auto;
    width: 44px; height: 44px;
    margin-left: auto;  /* 右端へ */
    border: none;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    padding: 6px;
  }
  .menu-btn i { color: #fff; }
  .menu-btn:hover { opacity: .9; }
}

/* ===== オフキャンバス（スマホメニュー）：headerと同系のグラデに統一 ===== */
.menu-bio {
  background: var(--hdr-grad);
  /* 既存：transformアニメーションはそのままでOK */
}

/* メニュー内リンク：白・ホバーは下線のみ（背景色は付けない） */
.menu-bio .nav-link {
  color: #fff !important;
  text-decoration: none;
    padding: .4rem 1.5rem;
    display: block;
    font-size: 14px;
    font-weight: 600;
}
.menu-bio .nav-link:hover { text-decoration: underline; }

/* ===== 余計な余白の温床になりがちなクラスの微調整（スマホ限定） ===== */
@media (max-width: 767.98px) {
  /* 以前の .pa20 のスマホゼロ指定を活かしつつ、header 内は header-box で余白管理 */
  .pa20 { padding: 0; }

  /* Bootstrapコンテナの左右パディングはそのまま、上下は header-box で管理 */
  header .container-fluid,
  header .container-lg {
    padding-top: 0; padding-bottom: 0;
  }
}

/* ===== メニュー展開時：背景固定で“背面スクロール”を防ぐ（任意） ===== */
html.menu-open,
body.menu-open { overflow: hidden; }