@charset "utf-8";
/* 
eスマ UIUX側で追加したcssファイル（ヘッダー用）
/company/lp/general/assets/header.css
 */

header{
    background: #FFF;
    box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.10);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 3;
  }
  header .header_top{
    border-bottom: solid 3px #E60000;
  }
  header .header_top_inner{
    height: 50px;
    display: flex;
    width: 100%;
    flex-flow: wrap;
    justify-content: space-between;
    align-items: center;
    max-width: 1010px;
    margin: 0 auto;
  }
  header .header_top .logo{
    display:block;
    width: 256px;
  }
  header .header_top .mission_logo{
    display:block;
    width: 163px;
  }
  .header_bottom_menu{
    background-color: #fff;
    padding: 10px 0;
  }
  .header_bottom_menu ul{
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
    align-items: center;
    max-width: 600px;
    margin: 0 auto;
    list-style: none;
  }
  .header_bottom_menu ul li{
    width: 20%;
    text-align: center;
    padding: 3px 0;
  }
  .header_bottom_menu ul li a{
    display: block;
    width: 100%;
  }
  header .header_bottom_menu ul li img{
    width: auto;
    display: unset;
    vertical-align: middle;
  }
  
  @media screen and (max-width: 1058px) {
    header .header_top_inner{
      /* padding-left: 24px;
      padding-right: 24px; */
      padding-left: 16px;
      padding-right: 16px;
      width: auto;
    }
  }
  @media screen and (max-width: 767px) {
    header{
      height: 50px;
    }
    header .header_top{
      /* height: 50px; */
      height: 56px;
      background-color: white;
    }
    header .logo_right{
      flex-grow: 1;
    }
    header .header_top .logo{
      /* width: 75px; */
      width: 86px;
    }
    header .header_top .mission_logo{
      /* width: 135px;
      padding-right: 18px; */
      width: 175px;
      padding-right: 13px;
      margin: 0 0 0 auto;

    }
  
    header .header_bottom{
      display: none;
      position: relative;
      background-color: #fff;
      justify-content: center;
      align-items: center;
    }
    header .header_bottom nav{
      max-width: 1010px;
      width: 100%;
      display: flex;
      justify-content: cefnter;
      align-items: center;
      margin: 0 auto;
    }
    header .header_bottom nav ul{
      display: flex;
      justify-content: center;
      flex-direction: column;
      padding: 8px 21px 24px;
      width: 100%;
    }
    header .header_bottom nav ul li{
      list-style: none;
      width: 100%;
      position: relative;
      border-bottom: solid 1px #D0D0D0;
    }
    header .header_bottom nav ul li a{
      position: relative;
      display: block;
      width: 100%;
      text-decoration: none;
      vertical-align: middle;
      font-size: 17px;
      line-height: 1.3;
      padding: 13px 0;
    }
    header .header_bottom nav ul li a::after{
      content: "";
      position: absolute;
      width: 20px;
      height: 20px;
      background: url(../img/header_menu_icon.svg) no-repeat center;
      background-size: contain;
      top: 15px;
      right: 0;
    }
    header .header_bottom ul li img{
      width: auto;
      display: unset;
      vertical-align: middle;
    }
  }
  /*-- ハンバーガー --*/
.openbtn{
    position: relative;
    cursor: pointer;
    width: 34px;
    height: 24px;
  }
  .openbtn span{
    display: inline-block;
    transition: all .3s;
    position: absolute;
    top: 0;
    height: 3px;
    width: 100%;
    background-color: #E60000;
  }
  .openbtn span:nth-of-type(1) {
    top:0px; 
  }
  .openbtn span:nth-of-type(2) {
    top:11px;
  }
  .openbtn span:nth-of-type(3) {
    top:21px;
  }
  .openbtn.active span:nth-of-type(1) {
    top: 6px;
    left: 0px;
    transform: translateY(6px) rotate(-45deg);
    width: 100%;
  }
  .openbtn.active span:nth-of-type(2) {
    opacity: 0;
  }
  .openbtn.active span:nth-of-type(3){
    top: 18px;
    left: 0px;
    transform: translateY(-6px) rotate(45deg);
    width: 100%;
  }
  @media screen and (max-width: 767px){
    .openbtn{
      width: 20px;
      height: 16px;
    }
    .openbtn span{
      height: 2px;
    }
    .openbtn span:nth-of-type(2) {
      top: 7px;
    }
    .openbtn span:nth-of-type(3) {
      top: 14px;
    }
    .openbtn.active span:nth-of-type(1) {
      top: 4px;
      left: 0px;
      transform: translateY(4px) rotate(-45deg);
      width: 100%;
    }
    .openbtn.active span:nth-of-type(3){
      top: 14px;
      left: 0px;
      transform: translateY(-6px) rotate(45deg);
      width: 100%;
    }
  }
  @media screen and (max-width: 768px) {
    .btnpa.u-sp {
      position: fixed;
      z-index: 999;
      width: 100%;
      height: calc(60 * (100vw / 375));
      bottom: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }