/* ヘッダー タイトルイラスト */
* {
    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: center top;
   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: #fff;
       transform: translateY(-50%);
    }
    #open::before {
       content: '';
       display: block;
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 2px;
       background-color: #fff;
    }
    #open::after {
       content: '';
       display: block;
       position: absolute;
       bottom: 0;
       left: 0;
       width: 70%;
       height: 2px;
       background-color: #fff;
    }
    /*スマホメニュー*/
    .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;
    }
 }