@charset "UTF-8";
/************************************************************************************************************************
body：共通
*************************************************************************************************************************/
body {
  background-color: #fcfbf9;
  scroll-behavior: smooth;
}

/************************************************************************************************************************
Header：共通
*************************************************************************************************************************/
header {
  position: relative;
  width: 100%;
  /*header ＞ タイトル部*/
}
header #headarea {
  position: absolute;
  width: 100%;
  z-index: 10;
}
header #headarea .container-fluid {
  margin: 0;
  padding: 0;
  /*header ＞ タイトル部左側*/
  /*header ＞ タイトル部右側*/
}
header #headarea .container-fluid .inner_left {
  position: relative;
  z-index: 3;
}
header #headarea .container-fluid .inner_left #headarea_logo {
  position: relative;
  margin: 0 10px;
}
header #headarea .container-fluid .inner_left #headarea_logo a {
  width: 100%;
  height: 100%;
  align-items: center;
}
header #headarea .container-fluid .inner_left #headarea_logo_hidden {
  padding: 10px 0;
}
header #headarea .container-fluid .inner_left #headarea_logo_hidden .mobile-menu-icon {
  display: block;
  position: absolute;
  right: 10px;
  background-color: transparent;
  border: none;
}
header #headarea .container-fluid .inner_left #headarea_logo_hidden .mobile-menu-icon span {
  display: block;
  background-color: #333;
  width: 35px;
  height: 2px;
  margin-bottom: 9px;
  transition: all 300ms ease-in-out;
}
header #headarea .container-fluid .inner_left #headarea_logo_hidden .mobile-menu-icon span:last-child {
  margin-bottom: 0;
}
header #headarea .container-fluid .inner_left #headarea_logo_hidden .mobile-menu-icon.menu-open span:nth-child(1) {
  transform: translateY(11px) rotate(135deg);
}
header #headarea .container-fluid .inner_left #headarea_logo_hidden .mobile-menu-icon.menu-open span:nth-child(2) {
  transform: scaleX(0);
}
header #headarea .container-fluid .inner_left #headarea_logo_hidden .mobile-menu-icon.menu-open span:nth-child(3) {
  transform: translateY(-11px) rotate(-135deg);
}
header #headarea .container-fluid .inner_left #headarea_logo_hidden a {
  width: 100%;
  height: 100%;
}
header #headarea .container-fluid .inner_right #headarea_nav {
  position: relative;
  width: 100%;
  /*　トップページのHEADER */
}
header #headarea .container-fluid .inner_right #headarea_nav nav {
  display: block;
  width: 100%; /*これを設定しなければIEでflex-wrapが無視される*/
}
header #headarea .container-fluid .inner_right #headarea_nav nav #topnav ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  /*上下の配置方法*/
  /*左右の配置方法*/
  justify-content: end;
  margin: 0;
  padding: 0;
}
header #headarea .container-fluid .inner_right #headarea_nav nav #topnav ul li {
  display: block;
  position: relative;
  margin: 3px 3px 3px 0;
  height: 70px;
  width: 70px;
  background-color: rgba(255, 255, 255, 0.75);
}
header #headarea .container-fluid .inner_right #headarea_nav nav #topnav ul li a {
  display: block;
  padding: 9px 0;
  width: 100%;
  height: 100%;
  text-align: center;
  text-decoration: none;
  font-size: 0.7rem;
  font-weight: 550;
  letter-spacing: 0.05em;
  color: #3f3f3f;
}
header #headarea .container-fluid .inner_right #headarea_nav nav #topnav ul li a i {
  display: block;
  font-size: 1.7rem;
  margin-bottom: 10px;
}
header #headarea .container-fluid .inner_right #headarea_nav nav #topnav ul li a:hover {
  color: #eee;
  background-color: rgba(80, 80, 80, 0.75);
}
header #headarea .container-fluid .inner_right #headarea_nav_hidden {
  position: relative;
  width: 100%;
  /*　トップページのHEADER */
}
header #headarea .container-fluid .inner_right #headarea_nav_hidden nav {
  transform: translateY(-1000px);
  transition: 500ms ease-in-out;
}
header #headarea .container-fluid .inner_right #headarea_nav_hidden nav.menu-open {
  transform: translateY(0px);
}
header #headarea .container-fluid .inner_right #headarea_nav_hidden nav.dropdown {
  width: 100%; /*これを設定しなければIEでflex-wrapが無視される*/
}
header #headarea .container-fluid .inner_right #headarea_nav_hidden nav.dropdown #topnav_hidden ul {
  display: flex;
  position: relative;
  flex-direction: row;
  flex-wrap: wrap;
  /*上下の配置方法*/
  align-items: flex-start;
  /*左右の配置方法*/
  padding: 0px;
  border-top: 1px solid #8e8e8e;
}
header #headarea .container-fluid .inner_right #headarea_nav_hidden nav.dropdown #topnav_hidden ul::before {
  content: "";
  width: 1px;
  height: 100%;
  background-color: #8e8e8e;
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 2;
}
header #headarea .container-fluid .inner_right #headarea_nav_hidden nav.dropdown #topnav_hidden ul li {
  display: block;
  position: relative;
  flex-basis: 50%;
  box-sizing: border-box;
  border-bottom: 1px solid #8e8e8e;
  height: 45px;
  background-color: rgba(255, 255, 255, 0.9);
}
header #headarea .container-fluid .inner_right #headarea_nav_hidden nav.dropdown #topnav_hidden ul li a {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-left: 15px;
  text-decoration: none;
  font-size: 0.9rem;
  color: #3f3f3f;
}
header #headarea .container-fluid .inner_right #headarea_nav_hidden nav.dropdown #topnav_hidden ul li a i {
  display: inline-block;
  margin-right: 10px;
}
header #headarea .container-fluid .inner_right #headarea_nav_hidden nav.dropdown #topnav_hidden ul li a:hover {
  color: #fff;
  background-color: rgba(140, 140, 140, 0.75);
}
header #headarea .container-fluid .inner_right #headarea_nav_hidden nav.dropdown #topnav_hidden ul li a::after {
  position: absolute;
  top: 50%;
  right: 15px;
  content: "";
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid #333;
  transform: translateY(-50%);
}

/**********************************************
  media query

  none<576 576<=sm 768<=md 992<=lg 1200<=xl 1400<=xxl
***********************************************/
/*lg〜xlまで( > 1200 )の場合*/
/*md〜lgまで( > 992 )の場合*/
/*md以上( > 768 )の場合*/
@media screen and (min-width: 768px) {
  /*スマホ・タブレットサイズ以上のヘッダ表示切り替え*/
  #headarea .inner_left {
    display: flex;
    align-items: center;
    height: 76px;
  }
  #headarea .inner_right {
    height: 76px;
  }
  #headarea #headarea_logo {
    display: block;
  }
  #headarea #headarea_logo_hidden {
    display: none;
  }
  #headarea #headarea_nav {
    display: block;
  }
  #headarea #headarea_nav_hidden {
    display: none;
  }
  #nav_overlay {
    display: none;
  }
}
/*sm〜mdまで( < 768 )の場合*/
@media screen and (max-width: 767.9px) {
  /*スマホ・タブレットサイズ以下のヘッダ表示切り替え*/
  #headarea .inner_left {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
  }
  #headarea #headarea_logo {
    display: none;
  }
  #headarea #headarea_logo_hidden {
    display: block;
  }
  #headarea #headarea_nav {
    display: none;
  }
  #headarea #headarea_nav_hidden {
    display: block;
  }
  #nav_overlay {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 5;
  }
}
.noscroll {
  overflow: hidden;
}/*# sourceMappingURL=header.css.map */