/* ヘッダー */
#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  z-index: 1000;
  padding: 10px 20px;
  box-sizing: border-box;
  transition: transform 0.3s ease-in-out;
}
  
#headerWrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  position: relative;
}
  
#logo {
  height: auto;
}
  
#logo img {
  height: 100%;
  max-height: 50px;
}
  
#mainnav ul {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
  align-items: center;
}
  
#mainnav ul li {
  margin-right: 20px;
}
  
#mainnav ul li:last-child {
  margin-right: 0;
}

#mainnav ul li a {
  color: white;
font-size: 20px;
  text-decoration: none;
  padding: 10px 20px;
  display: inline-block;
}

/* スマホ表示時スクロール動作用 */
@media (max-width: 1200px) {
  #header {
      transition: transform 0.3s ease-in-out;
  }
  #header.hide {
    transform: translateY(-100%);
  }
}
  
  
/* SNSアイコンを右端に配置 */
#snsIcons {
  display: flex;
  gap: 10px;
  position: absolute;
  right: 1px;
}
  
#snsIcons img,#snsIcons-mobile img{
  width: auto;
  height: 50px;
}
  
#snsIcons-mobile{
  position: absolute;
  right: 1%;
  padding-top: 12px;
}
/* ここまで */


.contact-button{
  position: fixed; /* 追従させる為にfixedの値を記述 */
  z-index: 99999; /* 他の要素の下に隠れないように全面配置 */
  top: 80px; /* 上から~pxのところにバナーを配置 */
  right: 10px; /* 右から~pxのところにバナーを配置 */
}

.contact-button-mobile{
  position: fixed; /* 追従させる為にfixedの値を記述 */
  z-index: 99999; /* 他の要素の下に隠れないように全面配置 */
  top: 150px; /* 上から~pxのところにバナーを配置 */
  right: 5px; /* 右から~pxのところにバナーを配置 */
}
.contact-button-mobile img{
  width: 50px;
}


/* 画面幅が1200px以上の場合、ロゴを左端から200px、メニューを中央に配置 */
@media (min-width: 1200px) {
  #headerWrap {
      justify-content: center;
      position: relative;
  }

  #logo {
      position: absolute;
      left: 200px;
      margin-right: 40px;
  }

  #mainnav {
      margin-left: auto;
      margin-right: auto;
  }

  .hamburger-icon {
      display: none;
  }
  #snsIcons-mobile{
    display: none;
  }
  .contact-button-mobile{
    display: none;
  }

}
  
/* 画面幅が1600px以下の場合、ロゴをの位置を調整 */
@media (max-width: 1600px) {
  #logo {
    left: 10px;
    margin-right: 40px;
  }
}

/* 画面幅が1200px以下の場合、ロゴを中央、ハンバーガーメニューのみ表示 */
@media (max-width: 1200px) {
#headerWrap {
  justify-content: space-between;
}
  
  #logo {
    margin-left: auto;
    margin-right: auto;
  }
  
  #mainnav {
    position: absolute;
    top: 65px;
    right: 0;
    background-color: rgba(0, 0, 0, 0.9);
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transform: translateX(100%);
    transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s 0.5s;
  }
  
  #mainnav.open {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  
  #mainnav ul {
    flex-direction: column;
    padding: 20px 0;
  }
  
  #mainnav ul li {
    text-align: center;
    margin-bottom: 10px;
  }
  
  /* ハンバーガーアイコン */
  .hamburger-icon {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    position: fixed;
    top: 20px;
    right: 10px;
    z-index: 1001;
  }
  
  /* ハンバーガーアイコンのバー */
  .hamburger-icon .bar {
    width: 30px;
    height: 2px;
    margin: 4px 0;
    background-color: rgb(255, 255, 255);
    transition: transform 0.3s ease, opacity 0.3s ease, margin 0.3s ease; /* アニメーションと間隔調整 */
  }
  
  /* メニューが開いているときのスタイル */
  .hamburger-icon.open .bar:nth-child(1) {
    transform: translateY(10px) rotate(-315deg); /* 上のバーを斜めに */
  }
  
  .hamburger-icon.open .bar:nth-child(2) {
    opacity: 0; /* 中央のバーを非表示 */
  }
  
  .hamburger-icon.open .bar:nth-child(3) {
    transform: translateY(-10px) rotate(315deg); /* 下のバーを斜めに */
  }
  
  #snsIcons{
    display: none;
  }
  
  .contact-button{
    display: none;
  }
  
  /* メディアクエリ */
  @media (max-width: 1200px) {
    .hamburger-icon {
        display: flex; /* アイコンを表示 */
    }
  }
  }