/* /assets/css/header.css
   =========================================================
   BENMI header
   - Logo only
   ========================================================= */

.site-header{
  border: none;

  /* GAP TUNING:
     ヘッダーロゴと本文（最上段セクション）の間が空きすぎる場合は
     まずここ（header側）を詰める。 */
  padding: .55rem 0 .18rem;
}

.site-header .brand{
  display: block;
  width: 100%;
}

.site-header .brand img{
  /* HEADER LOGO SIZE MARKER:
     PCでは vw 基準で幅を決めつつ、wrap の中で必ず収まるよう max-width で抑える。
     これで「領域にピッタリ」になる。
  */
  width: 23vw;
  max-width: 100%;
  height: auto;

  display: block;
  margin: 0 auto;
  opacity: .98;
}

@media (max-width: 767px){
  /* GAP TUNING (SP) */
  .site-header{ padding: .48rem 0 .16rem; }

  /* SPは 60vw だと細く感じるので幅100%に戻す */
  .site-header .brand img{ width: 80%; }
}

/* ロゴ以外はクリック不可にする（リンク領域を画像サイズに限定） */
.site-header .wrap{
  text-align: center;
}
.site-header .brand{
  display: inline-block;
  width: auto;
}