@charset "UTF-8";

body{
   font-size: 62.5%;
   font-family: 'Noto Sans JP', sans-serif;
}

a{
   display: inline-block;
   text-decoration: none;
   color: black;
}

*{
   box-sizing: border-box;
}



/* -------------------------------
   ヘッダー
   -------------------------------
*/
.header-outer{
   background-color: white;
   width: 100%;
   position: relative;
}
.header-inner{
   width: 1200px;
   margin: 0 auto;
   text-align: center;
   height: 100px;
   display: flex;
   justify-content: space-around;
   align-items: center;
}
.header-logo{
   background: url(../images/logo.svg) no-repeat center center;
   background-size: 60%;
   width: 80px;
   height: 80px;
}
.header-logo-block{
   width: 20%;
   display: flex;
   justify-content: space-around;
   align-items: center;
}

.header-name{
   font-size: 1.2rem;
   white-space: nowrap;
}

.header-empty-div{
   width: 20%;
}
.header-nav{
   display: block;
   visibility: visible;
}

.header-ul{
   display: flex;
   justify-content: space-around;
   align-items: center;
}

.header-list{
   padding: 0 20px;
}
.header-link{
   font-size: 1.1rem;
   white-space: nowrap;
}

.header-menu{
  display: none;
}

/* -------------------------------
   タブレットヘッダー
   -------------------------------
*/
@media screen and (min-width:751px) and (max-width:1280px) {
   .header-inner{
      width: 100%;
      display: block;
      position: relative;
      height: 80px;
   }
   .header-logo{
      background-size: 50%;
      height: 80px;
      width: 80px;
   }
   .header-logo-block{
      display: flex;
      justify-content: space-around;
      width: 40%;
      align-items: center;
   }
   .header-br{
      display: none;
   }
   .header-shea{
      margin-left: 1em;
   }
   .header-empty-div{
      width: 0%;
   }

   .header-nav{
      display: none;
      height: 100vh;
      width: 100%;
      background-color: #f2f2f2;
      position: fixed;
      top: 0;
      z-index: 1000;
   }
   .header-ul{
      display: flex;      
      flex-direction: column;
      align-items: center;
      background-color: #f2f2f2;
      margin: 0 auto;
      padding-top: 80px;
   }
   
   .header-list{
      padding: 0;
      margin-bottom: 2px;
      border-bottom: 1px solid black;
      border-right: 1px solid black;
   }
   .header-link{
      padding: 5px 5px;
      font-size: 1.5rem;
      width: 90vw;
   }

   /* =============== タブレットハンバーガーメニュー =============== */
.header-menu {
   display: block;
   position: absolute;
   top: 6%;
   right: 3%;
   height: 70px;
   width: 70px;
   background-color: #f2f2f2;
   z-index: 5000;
}

.header-menu__box {
   position: relative;
   width: 45px;
}

.header-menu__box span {
   width: 90%;
   height: 2px;
   left: 0;
   display: block;
   background: black;
   position: absolute;
   transition: all 0.5s ease;
}

.header-menu__box>span:nth-child(1) {
   top: 18px;
   left: 15px;
}

.header-menu__box>span:nth-child(2) {
   top: 36px;
   left: 15px;
}

.header-menu__box>span:nth-child(3) {
   top: 54px;
   left: 15px;
}

/* ×マーク */
.header-menu__box.open>span:nth-child(1) {
   top: 20px;
   transform: rotate(45deg);
   background-color: black;
}

.header-menu__box.open>span:nth-child(2) {
   width: 0;
}

.header-menu__box.open>span:nth-child(3) {
   top: 20px;
   transform: rotate(-45deg);
   background-color: black;
}
/* =============== タブレットハンバーガーメニューここまで =============== */
}

/* -------------------------------
   スマホヘッダー
   -------------------------------
*/
@media screen and (max-width:750px){
   .header-inner{
      width: 100%;
      display: block;
      position: relative;
      height: 60px;
   }
   .header-logo{
      background-size: 50%;
      height: 50px;
      width: 50px;
   }
   .header-logo-block{
      display: flex;
      justify-content: space-around;
      width: 80%;
   }
   .header-br{
      display: none;
   }
   .header-shea{
      margin-left: 1em;
   }
   .header-empty-div{
      width: 0%;
   }

   .header-nav{
      display: none;
      height: 100vh;
      width: 100%;
      background-color: #f2f2f2;
      position: fixed;
      top: 0;
      z-index: 1000;
   }
   .header-ul{
      display: flex;      
      flex-direction: column;
      align-items: center;
      background-color: #f2f2f2;
      margin: 0 auto;
      padding-top: 80px;
   }
   
   .header-list{
      padding: 0;
      margin-bottom: 2px;
      border-bottom: 1px solid black;
      border-right: 1px solid black;
   }
   .header-link{
      padding: 5px 5px;
      font-size: 1.5rem;
      width: 90vw;
   }

   /* =============== スマホハンバーガーメニュー =============== */
.header-menu {
   display: block;
   position: absolute;
   top: 6%;
   right: 2%;
   height: 45px;
   width: 45px;
   background-color: #f2f2f2;
   z-index: 5000;
}

.header-menu__box {
   position: relative;
   width: 45px;
}

.header-menu__box span {
   width: 50%;
   height: 2px;
   left: 0;
   display: block;
   background: black;
   position: absolute;
   transition: all 0.5s ease;
}

.header-menu__box>span:nth-child(1) {
   top: 13px;
   left: 12px;
}

.header-menu__box>span:nth-child(2) {
   top: 22px;
   left: 12px;
}

.header-menu__box>span:nth-child(3) {
   top: 31px;
   left: 12px;
}

/* ×マーク */
.header-menu__box.open>span:nth-child(1) {
   top: 20px;
   transform: rotate(45deg);
   background-color: black;
}

.header-menu__box.open>span:nth-child(2) {
   width: 0;
}

.header-menu__box.open>span:nth-child(3) {
   top: 20px;
   transform: rotate(-45deg);
   background-color: black;
}
/* =============== スマホハンバーガーメニューここまで =============== */
}