@-ms-viewport {
	width: device-width;
}
html {
	box-sizing: border-box;
	-ms-overflow-style: scrollbar;
background-color: #FFF;
font-size: 0.78125vw;
font-family: 
"Yu Mincho",
"游明朝",
"Hiragino Mincho ProN",
"Noto Serif JP",
"MS PMincho",
serif;
}

.mainfont{
  font-family: 
    "Yu Mincho",
    "游明朝",
    "Hiragino Mincho ProN",
    "Noto Serif JP",
    "MS PMincho",
    serif;
}

.sfont{
  font-family: 
    "Yu Gothic",
    "游ゴシック体",
    "Hiragino Kaku Gothic ProN",
    "Noto Sans JP",
    "Meiryo",
    sans-serif;
}
.ssfont{
  font-family: 
    "Hiragino Kaku Gothic ProN",
    "ヒラギノ角ゴ ProN W3",
    "Yu Gothic",
    "Noto Sans JP",
    "Meiryo",
    sans-serif;
}

.enfont{
  font-family: 
    "Avenir",
    "Helvetica Neue",
    "Segoe UI",
    "Noto Sans",
    "Arial",
    sans-serif;

}

.Img{
width:100%;
height: auto;
}

.headercontainer {
	width: 100%;
	padding-left: 50px;
	padding-right: 50px;
	margin-right: auto;
	margin-left: auto;
  background-color: #fff;
}
header {
  width: 100%;
  height: 90px;
  background-color:transparent;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
    }
    
  .headerContent{
  background-color: transparent;
	width: 100%;
    height: 150px;
    display: flex;
    align-items: center;
  padding-top: 10px;
  }
    
    .header-logo{
    width: 120px;
    padding: 0;
    }

    .header-logo a{
      display: block;
      width:100%;
      height: 100%;
    }
    
  .header-Nav{
  width: calc(100% - 150px);
  padding-left:20%;
  display: flex;
  position:relative;
  }
    
  .header-Nav ul{
  list-style: none;
  display: flex;
  justify-content:space-between;
  width: 60%;
}
    
  .header-Nav ul li{
  padding-left: 5px;
  padding-right: 5px;
  font-size: 1.7778rem;
  line-height: 50px;
  font-family: 
    "Yu Gothic",
    "游ゴシック体",
    "Hiragino Kaku Gothic ProN",
    "Noto Sans JP",
    "Meiryo",
    sans-serif;
  font-weight: 400;
  margin:0 auto;
  }
  
    .header-Nav ul li a{
  text-decoration: none;
  color:#000;
  
    }

  .headerCta{
    width: 20%;
  }

.headerCta a{
display: block;
position: absolute;
right: 0;
top: 10px;
width:13.3333rem;
height: 5.33333rem;
line-height: 5.33333rem;
text-decoration: none;
color: white;
background-color: #011B68;
border-radius: 60px;
text-decoration: none;
text-align: center;
font-size: 1.7778rem;
font-weight: bold;
  }





    @media screen and (max-width: 860px) {
      html {
        font-size: 2.5614vw;
        }

        .headercontainer {
          padding-left: 10px;
          padding-right: 10px;
        }
        header {
          width: 100%;
          height: 60px;
          background-color:transparent;
          position: fixed;
          top: 0;
          z-index: 99;
          }
            
          .headerContent{
          width: 100%;
          margin-top: 0;
          background-color: transparent;
          margin: 0;
          margin-right: 0;
          padding: 0;
          height: 120px;
          }
            
          .header-logo{
        width: 100px;
        padding: 0;
          }
          
          .header-Nav ul{
          margin-top:20vh;
          list-style: none;
          display: flex;
          justify-content:center;
          flex-wrap:wrap;
          padding:0;
          }
            
          .header-Nav ul li{
          padding-left: 5px;
          padding-right: 5px;
          font-size: 1.31rem;
          line-height: 50px;
          width:100%;
          
          }
          
          .header-Nav ul li a{
          text-decoration: none;
          color:#000;
          font-size:2.68rem;
          line-height:150%;
          }
            
            
            /*ヘッダーボタン*/
          .openbtn {
          display:block;
          position: absolute;
          z-index: 9999;
          top: 20px;
          right: 10px;
          cursor: pointer;
          width: 50px;
          height: 50px;
          }
          .openbtn span {
          display: inline-block;
          transition: all .4s;
          position: absolute;
          right: 14px;
          height: 3px;
          border-radius: 2px;
          background-color: #5E5E5E;
          width: 45%;
          }
          .openbtn span:nth-of-type(1) {
          top: 15px;
          }
          .openbtn span:nth-of-type(2) {
          top: 23px;
          }
          
          .openbtn span:nth-of-type(3) {
          top: 31px;
          }
          
          .openbtn.active{
          position: fixed;
          }
          
          .openbtn.active span:nth-of-type(1) {
          top: 18px;
          right: 18px;
          transform: translateY(6px) rotate(-45deg);
          width: 40%;
          background: #5E5E5E;
          }
          .openbtn.active span:nth-of-type(2) {
          opacity: 0;
          }
          
          .openbtn.active span:nth-of-type(3) {
          top: 30px;
          right: 18px;
          transform: translateY(-6px) rotate(45deg);
          width: 40%;
          background: #5E5E5E;
          }
            
          #header-Nav {
          position: fixed;
          flex-wrap: wrap;
          z-index: 999;
          top: 0;
          bottom:0;
          margin: 0;
          right: -100%;
          width: 80%;
          height:auto;
          background-color: #E5E7E8;
          transition: all 0.6s;
          padding-bottom: 80px;
          box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5);
          overflow-y:scroll;
          overflow-x:hidden;
          }
          #header-Nav.panelactive {
          right: 0;
          }
          
          
          #header-Nav.panelactive ul {
          z-index: 999;
          width: 100%;
          height: auto;
          -webkit-overflow-scrolling: touch;
          height: 50%;
          }
          
          .headerCta {
            width: 100%;
            position: relative;
            height: 30%;
        }

        .headerCta a{
          position: absolute;
          top: 20%;
          left: 0;
          width: 80%;

}


      }