@charset "UTF-8";

#topHeader {
  width: 100%;
  background: #fff;
  z-index: 100;
  box-shadow: 0 2px 10px #a0a0a0;
}
@media only screen and (max-width: 854px) {
  #topHeader {
    position: fixed;
    padding: 13px 0;
  }
}

.header__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  position: relative;
}
@media only screen and (max-width: 854px) {
  .header__inner {
    width: 90%;
    display: block;
  }
}

.header__logo {
  width: 153px;
  margin: 0 auto 20px;
}
@media only screen and (max-width: 854px) {
  .header__logo {
    width: 128px;
    margin: 0;
  }
}
.header__logo img {
  width: 100%;
}

.globalNavi {
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 854px) {
  .globalNavi {
    display: none;
  }
}
.globalNavi a {
  font-size: 14px;
  font-weight: 500;
  margin-right: 33px;
}
.globalNavi a:last-child {
  margin-right: 0;
}
.globalNavi a img {
  margin-right: 4px;
}

.menuBar__logo {
  display: none;
}

.menuBar {
  padding: 15px 0;
}

.menuBar.scroll {
  position: fixed;
  top: 0;
  padding: 22px 0;
}
@media only screen and (max-width: 854px) {
  .menuBar.scroll {
    opacity: 0;
  }
}
.menuBar.scroll .header__logo {
  display: none;
}
.menuBar.scroll .menuBar__logo {
  display: block;
  position: absolute;
  left: -87px;
  top: -9px;
}