@charset "UTF-8";
/* A Modern CSS Reset */

*{
  margin: 0;
  padding: 0;
  font-weight:normal;
  font-style: normal;
  font-size: 16px;
  list-style: none;
  line-height: 140%;
  box-sizing: border-box;
}

a{
  text-decoration: none;
}

.btn:hover{
  opacity: 0.8;
}

img{
  width: 100%;
  vertical-align: bottom;
}

.center{
  text-align: center;
}

.left{
  text-align: left;
}

.right{
  text-align: right;
}

.flexbox{
  display: flex;
}

.flexboxsp{
  display: flex;
}

.column{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.flex-center{
  justify-content: center;
}

.align-center{
  align-items: center;

}

.strech{
  align-items: stretch;
}

.align-left{
  align-items: flex-start;
}

.align-right{
  align-items: flex-end;
}

.flex-end{
  justify-content: flex-end;
}

.space-around{
  justify-content: space-around;
}

.space-between{
  justify-content: space-between;
}

.block{
  display: block;
}

.inline-block{
  display: inline-block;
}

.wrap{
  flex-wrap: wrap;
}

.parent{
  position: relative;
}

.child{
  position: absolute;
}

.position-center{
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.position-center-x{
  right: 0;
  left: 0;
  margin: 0 auto;
}

.position-center-y{
  top: 0;
  bottom: 0;
  margin: auto 0;
}

.margin-center{
  margin: 0 auto;
}

.sticky{
  position: sticky;
  top: 0;
}

.mg-1{
  margin-bottom: 8px;
}

.mg-2{
  margin-bottom: 16px;
}

.mg-3{
  margin-bottom: 24px;
}

.mg-4{
  margin-bottom: 32px;
}

.mg-5{
  margin-bottom: 40px;
}

.mg-6{
  margin-bottom: 48px;
}

.mg-7{
  margin-bottom: 56px;
}

.mg-8{
  margin-bottom: 64px;
}

.mg-9{
  margin-bottom: 72px;
}

.mg-10{
  margin-bottom: 80px;
}

.mg-12{
  margin-bottom:96px;
}


.gap-1{
  gap:8px;
}

.gap-2{
  gap:16px;
}

.gap-3{
  gap:24px;
}

.gap-4{
  gap:32px;
}

.gap-5{
  gap:40px;
}

.gap-6{
  gap:48px;
}

.gap-7{
  gap:56px;
}

.gap-8{
  gap:64px;
}

.gap-9{
  gap:72px;
}

.gap-10{
  gap:80px;
}

.radius-1{
  border-radius: 8px;
}

.radius-2{
  border-radius: 16px;
}

.radius-3{
  border-radius: 24px;
}

.radius-4{
  border-radius: 32px;
}

.radius-5{
  border-radius: 40px;
}

.radius-6{
  border-radius: 48px;
}

.radius-7{
  border-radius: 56px;
}

.radius-8{
  border-radius: 64px;
}

.radius-9{
  border-radius: 72px;
}

.radius-10{
  border-radius: 80px;
}

.circle{
  border-radius: 999999px;
}

.pd-1{
  padding: 8px;
}

.pd-2{
  padding: 16px;
}

.pd-3{
  padding: 24px;
}

.pd-4{
  padding:32px;
}

.pd-5{
  padding:40px;
}

.pd-6{
  padding: 48px;
}

.pd-7{
  padding: 56px;
}

.pd-8{
  padding: 64px;
}

.pd-9{
  padding: 72px;
}

.pd-10{
  padding: 80px;
}

.bold{
  font-weight: bold;
}

/*header*/

 header {
    position: fixed;
    left: 0;
    top: 0;
    height: 120px;
    width: 100%;
    padding: 0 40px; 
    z-index: 999;
}


nav.NavMenu{
position: fixed;
z-index: 12;
top: 0;
left: 0;
background: #191919;
text-align: center;
width: 100%;
height: 100%;
display: none;
}

.NavInner{
width: 100%;
margin: 0 auto;
padding: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}

nav.NavMenu ul li{
font-size: 24px;
list-style-type: none;
width: 100%;
padding-bottom: 0px;
}

nav.NavMenu ul li:last-child{
padding-bottom: 0;
}



/*ボタンのスタイル*/
.Toggle {
position: fixed;
right:40px;
top: 40px;
width: 45px;
height: 45px;
cursor: pointer;
z-index: 13;
display: block;
}

.Toggle span {
display: block;
position: absolute;
width: 35px;
border-bottom: solid 2px #FFFFFF;
-webkit-transition: .35s ease-in-out;
-moz-transition: .35s ease-in-out;
transition: .35s ease-in-out;
left: 6px;
}

.Toggle span:nth-child(1) {
top: 9px;
}

.Toggle span:nth-child(2) {
top: 20px;
}

.Toggle span:nth-child(3) {
top: 31px;
}

.Toggle.active span:nth-child(1) {
top: 18px;
left: 6px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
border-bottom: solid 3px #FFFFFF;
}
.Toggle.active span:nth-child(2),
.Toggle.active span:nth-child(3) {
top: 18px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
border-bottom: solid 3px #FFFFFF;
}



@media screen and (max-width: 1199px) { 
  .pc_only{
    display: none!important;
  }

  header .flexbox{
    gap:32px;
    padding-left: 0;
  }


  *{
    font-size: 14px;

  }

  .flexbox{
    display: block;
  }

  main{
    margin-top: 64px!important;
  }

  .mg-1{
  margin-bottom: 4px;
}

.mg-2{
  margin-bottom: 8px;
}

.mg-3{
  margin-bottom: 16px;
}

.mg-4{
  margin-bottom: 24px;
}

.mg-5{
  margin-bottom: 24px;
}

.mg-6{
  margin-bottom: 32px;
}

.mg-7{
  margin-bottom: 32px;
}

.mg-8{
  margin-bottom: 32px;
}

.mg-9{
  margin-bottom: 32px;
}

.mg-10{
  margin-bottom: 32px;
}

.mg-12{
  margin-bottom:32px;
}

.gap-1{
  gap:8px;
}

.gap-2{
  gap:16px;
}

.gap-3{
  gap:24px;
}

.gap-4{
  gap:32px;
}

.gap-5{
  gap:40px;
}

.gap-6{
  gap:48px;
}

.gap-7{
  gap:56px;
}

.gap-8{
  gap:64px;
}

.gap-9{
  gap:72px;
}

.gap-10{
  gap:80px;
}

.radius-1{
  border-radius: 8px;
}

.radius-2{
  border-radius: 16px;
}

.radius-3{
  border-radius: 24px;
}

.radius-4{
  border-radius: 32px;
}

.radius-5{
  border-radius: 40px;
}

.radius-6{
  border-radius: 48px;
}

.radius-7{
  border-radius: 56px;
}

.radius-8{
  border-radius: 64px;
}

.radius-9{
  border-radius: 72px;
}

.radius-10{
  border-radius: 80px;
}



}

@media screen and (min-width: 1200px) {
  *{
 

  }

  .logo{
    width: 200px;
  }

  nav.NavMenu ul li{
    width: 48%;
  }
  nav.NavMenu ul li a{
    align-items: flex-start;
  }

  .sp_only{
    display: none!important;
  }



  main{
    margin-top: 120px!important;
  }


  footer ul{
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin:0 auto;
  }

}