@charset "UTF-8";

header {
  z-index: 10;
  position: fixed;  /* ヘッダーを固定 */
  top: 0;
  left: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  transition: background-color 0.3s ease-in-out,
              box-shadow 0.3s ease-in-out; /* 色と影の変化をスムーズに */
  box-shadow: none; /* 初期状態ではボックスシャドウを無しに */
}

header.scroll-active {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* スクロール時に影を追加 */
}

#mainHeader .container{
  max-width: 1200px;
}

/* ロゴ */
.navbar-brand img {
  height: 40px;
  width: auto;
  display: block;
}

/* 共通ボタンサイズ */
.contact-btn,
.hamburger-btn {
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: .375rem;
}

/* ホバー */
a.contact-btn,
.hamburger-btn {
  transition: background .5s, color .5s;
}
a.contact-btn:hover,
.hamburger-btn:hover {
  transition: background .8s, color .8s;
}

/* お問い合わせボタン */
.contact-btn,
a.contact-btn {
  color: #fff;
  background-color: #952223;
}
.contact-btn:hover,
a.contact-btn:hover {
  color: #fff !important;
  background: #cc4244;
}
.contact-btn .fa-envelope {
  padding-right: .5rem;
}

/* ハンバーガー */
.hamburger-btn {
  background: #952223;
  border: 1px solid transparent;
  width: 38px;
  padding: 0;
}
.hamburger-btn:hover {
  background: #cc4244;
}
.hamburger-btn:active {
  background: transparent;
  border-color: #fff;
}

/* ハンバーガー線 */
.hamburger-line,
.hamburger-line::before,
.hamburger-line::after {
  display: block;
  width: 18px;
  height: 2px;
  background: #fff;
  position: relative;
}
.hamburger-line::before,
.hamburger-line::after {
  content: "";
  position: absolute;
  left: 0;
}
.hamburger-line::before{
  top: -6px;
}
.hamburger-line::after{
  top: 6px;
}

/* スマートフォン */
@media (max-width: 767px) {
  /* ロゴ */
  .navbar-brand img {
    height: clamp( 26px, 6vw, 32px ) !important;
  }
  
  /* 共通ボタンサイズ */
  .contact-btn,
  .hamburger-btn {
    font-size: .8rem !important;
    height: 34px;
    border-radius: .375rem;
  }

  /* offcanvas */
  #offcanvasNavbar {
    width: 100vw;
    background-color: rgba(255, 255, 255, 0.8); /* 初めは透明 */
  }
  .offcanvas-body {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .navbar-nav,
  .offcanvas-header {
    text-align: center;
  }
}