/* ヘッダー タイトルイラスト */
* {
   box-sizing: border-box;
}

header {
   padding: 25px 35px 12px;
   z-index: 555;
   top: 0;
   width: 100%;
   display: flex;
   align-items: center;
}

header h1{
   margin: 0; padding: 0;
   font-size: 20px;
}

header li a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  font-size: 16px;
}
header li a::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, #00dbde 0%, #fc00ff 100%);
  transform: scale(0, 1);
  transform-origin: left;
  transition: transform .3s;
}
header li a:hover::after {
  transform: scale(1, 1);
}
header nav{
   margin: 0 0 5px auto;
}
header ul{
   list-style: none;
   margin: 0;
   display: flex;
}
header li{
   margin: 0 0 0 15px;
   font-size: 14px;
}



.sp-nav {
   display: none;
}

@media screen and (max-width: 700px) {
   .pc-nav {
      display: none;
   }
   header img{
     max-width: 80%;
     margin-left: -30px;}
   .sp-nav {
      z-index: 1;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      display: block;
      width: 100%;
      background: rgba(0, 0, 0, .8);
      opacity: 0;
      transform: translateX(-100%);
      transition: all .2s ease-in-out;}
      .sp-nav div{
        position: absolute;
        top: 45%;
        right: 0px;
        transform: translateY(-50%);
        width: 100%;
      }
      .dsp-nav:active {
       overflow-y: hidden;
      }

   #open {
      position: relative;
      display: block;
      width: 30px;
      height: 25px;
      margin: 0 0 0 auto;
   }
   #open span {
      position: absolute;
      top: 50%;
      left: 0;
      display: block;
      width: 100%;
      height: 2px;
      background-color: #756AE8;
      transform: translateY(-50%);
   }
   #open::before {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: #756AE8;
   }
   #open::after {
      content: '';
      display: block;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 70%;
      height: 2px;
      background-color: #756AE8;
   }
   /*スマホメニュー*/
   .sp-nav ul {
     display: block;
     color: #fff;
     padding: 1em 0em 1em 40px;
     text-decoration: none;
     transition: 0.2s;
     font-family: 'Oswald','Noto Sans JP', sans-serif;
     font-size: 23px;
     font-weight: 400;
     letter-spacing: 0.2em;
     text-align: left;
     font-style: italic;
     font-weight: bold;
     line-height: 0.9em;
   }
   .sp-nav li {
      margin: 0;
      padding: 0;
   }
   .sp-nav li span {
      font-size: 15px;
      color: #fff;
   }
   .sp-nav li a, .sp-nav li span {
      display: block;
      padding: 20px 0;
   }
   /*-閉じるアイコンー*/
   .sp-nav .close {
      position: relative;
      padding-left: 20px;
   }
   .sp-nav .close::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      display: block;
      width: 16px;
      height: 1px;
      background: #fff;
      transform: rotate( 45deg );
   }
   .sp-nav .close::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      display: block;
      width: 16px;
      height: 1px;
      background: #fff;
      transform: rotate( -45deg );
   }
   .toggle {
      transform: translateY( 0 );
      opacity: 1;
      transition: 0.5s;
   }
   .main-visual {
      padding: 0 4%;
   }
   h2 {
      line-height: 1.6;
      text-align: center;
   }
}