@media only screen and (min-width: 1001px) and (max-width: 1600px) {
    header nav ul {
        gap: 2.1875vw;
      }
      header nav ul li a {
        font-size: 1.5vw;
        line-height: 1.75vw;
      }
      header nav ul li.active::after {
        content: "";
        width: 3.867vw;
        height: 4.33625vw;
        top: calc(100% + 0.9375vw);
      }
      .page-center {
        max-width: 84.040625vw;
        padding: 0 1.5vw;
      }
      header .page-center {
        gap: 6.2125vw;
      }
      header {
        padding-top: 2.75vw;
        padding-bottom: 1.375vw;
      }
      .header-active header {
        padding: 1.375vw 1.5vw;
      }
      .main-banner-top {
        padding-top: 9.375vw;
        padding-bottom: 6.25vw;
      }
      .main-banner-top .page-center {
        gap: 1.25vw;
      }
      .banner-left {
        max-width: 48.125vw;
      }
      .banner-left h1 {
        padding-bottom: 2.3125vw;
        font-size: 3.125vw;
        line-height: 3.75vw;
      }
      .banner-left p {
        padding-bottom: 2.3125vw;
        font-size: 1.875vw;
        line-height: 2.125vw;
        max-width: 43vw;
      }
      .btn-flex {
        gap: 2.0625vw;
        padding-top: 2.25vw;
      }
      .btn-flex a {
        font-size: 1.375vw;
        line-height: 1.375vw;
        border-radius: 2.4375vw;
        padding: 1.0625vw 2.6875vw;
      }
      .btn-flex a::before {
        width: 2.5vw;
        border-radius: 0 2.4375vw 2.4375vw 0;
        background-image: url(../images/angle-arrow.png);
        background-size: 1.125vw;
      }
      .main-banner-bottom {
        padding-top: 12.875vw;
        padding-bottom: 2.6875vw;
      }
      .content-center-wrapper {
        max-width: 68.5vw;
      }
      .content-center-wrapper h2 {
        padding-bottom: 0.75vw;
        font-size: 4.375vw;
        line-height: 5vw;
      }
      .content-center-wrapper p {
        font-size: 2.25vw;
        line-height: 2.625vw;
        padding-bottom: 1.5vw;
      }
      .form-inline {
        max-width: 50.3125vw;
        padding-top: 1.5vw;
        gap: 1.5vw;
        padding-bottom: 2.3125vw;
      }
      .form-inline span input[type="text"],
      .form-inline span input[type="email"],
      .form-inline span input[type="number"],
      .form-inline span textarea {
        padding: 1.75vw 3.1875vw;
        border-radius: 2.4375vw;
        font-size: 1.875vw;
        line-height: 1.875vw;
      }
      .form-inline input[type="submit"] {
        padding: 1.75vw 3.875vw;
        border-radius: 2.4375vw;
        font-size: 1.875vw;
        line-height: 1.8750vw;
      }
      .robot-check {
        font-size: 1.75vw;
      }
      .robot-check input[type="checkbox"] {
        width: 2.375vw;
        min-width:2.375vw;
        border-radius: 0.75vw;
        margin-right: 1.8125vw;
        height: 2.3750vw;
      }
      .robot-check input[type="checkbox"]:checked::after {
        left: 0.4375vw;
        font-size: 1.75vw;
      }
      .content-center-wrapper .label-text {
        font-size: 1.6875vw;
        line-height: 1.9375vw;
      }
      .book-one {
        padding-top: 11.125vw;
        padding-bottom: 6.375vw;
      }
      .title-center {
        max-width: 58.875vw;
      }
      .title-center h2 {
        font-size: 4.375vw;
        line-height: 5vw;
        padding-bottom: 1.5625vw;
      }
      .title-center p {
        font-size: 2.25vw;
        line-height: 2.625vw;
        padding-bottom: 6.1875vw;
      }
      .music-wrapper {
        max-width: 55.6875vw;
        gap: 6.0625vw;
      }
      .music-item {
        gap: 2.9375vw;
      }
      .music-item figure {
        max-width: 18.0625vw;
      }
      .music-content {
        max-width: 34.6875vw;
      }
      .music-item figure img {
        border-radius: 2.125vw;
      }
      .music-content h3 {
        font-size: 2.5vw;
        line-height: 2.8125vw;
        padding-bottom: 1.4375vw;
      }
      .music-content h6 {
        font-size: 1.5vw;
        line-height: 1.875vw;
      }
      .music-content p {
        font-size: 1.25vw;
        line-height: 1.875vw;
        padding-bottom: 2.9375vw;
      }
      .img-flex {
        gap: 1.45625vw;
      }
      .img-flex a img {
        width: 3.5vw;
        height: 3.5vw;
        box-shadow: 0.5vw 0.5vw 0.9375vw rgba(0, 0, 0, 0.4);
      }
      .visual-world {
        padding-top: 13.8125vw;
        padding-bottom: 10.8125vw;
      }
      .visual-world .title-center {
        max-width: 85.8125vw;
      }
      .visual-world .title-center p {
        font-size: 2.5vw;
        line-height: 2.8125vw;
      }
      .visual-flex {
        column-gap: 6.5625vw;
        row-gap: 4.4375vw;
      }
      .visual-item {
        max-width: 27.125vw;
      }
      .visual-world .page-center,
      .author .page-center {
        max-width: 97.75vw;
      }
      .visual-slider .slick-dots {
        gap: 1.75vw;
        bottom: -6.0625vw;
      }
      .visual-slider .slick-dots button {
        width: 4.4375vw;
        height: 1vw;
        border-radius: 0.5vw;
      }
      .author {
        padding-top: 16.625vw;
        padding-bottom: 8.5625vw;
      }
      figcaption {
        font-size: 1.875vw;
        line-height: 2.5vw;
      }
      .author-text h2 {
        font-size: 4.375vw;
        line-height: 5vw;
        padding-bottom: 2.5vw;
      }
      .author-text h6 {
        font-size: 2.0625vw;
        line-height: 2.375vw;
      }
      .author-text p {
        font-size: 1.875vw;
        line-height: 2.125vw;
        padding-bottom: 1.25vw;
      }
      .author .page-center {
        gap: 5.9375vw;
      }
      .author-text {
        max-width: 56.625vw;
      }
      .author figure {
        max-width: 28.875vw;
      }
      .author figure span {
        margin-left: 2.6875vw;
        margin-bottom: 2.9375vw;
      }
      .author figure span::before {
        width: calc(100% + 1.5vw);
        height: calc(100% + 1.625vw);
        left: -2.6875vw;
        bottom: -2.8125vw;
        z-index: -1;
      }
      .author figcaption {
        max-width: 24.5625vw;
        padding-left: 2.6875vw;
      }
      footer {
        padding-top: 13.25vw;
        padding-bottom: 6.25vw;
      }
      .footer-contact-wrapper {
        max-width: 52.3125vw;
      }
      .footer-contact-form > h2 {
        font-size: 4.375vw;
        line-height: 5vw;
        padding-bottom: 1.5625vw;
      }
      .footer-contact-form > p {
        font-size: 2.5vw;
        line-height: 2.8125vw;
        padding-bottom: 2.8125vw;
      }
      .form-footer {
        gap: 2.8125vw;
        max-width: 46.0625vw;
        padding-bottom: 3.375vw;
      }
      .input-inline {
        gap: 1.8125vw;
      }
      .input-inline>span {
        max-width: calc(50% - 0.9375vw);
      }
      .form-footer span input[type="text"],
      .form-footer span input[type="email"],
      .form-footer span input[type="number"],
      .form-footer span textarea {
        padding: 1.5vw 2.9375vw;
      }
      .form-footer input[type="submit"] {
        padding: 1.5vw 2.9375vw;
      }
      .form-footer .check-input .wpcf7-list-item{
        max-width: calc(50% - 2vw);
      }
      .form-footer .check-input{
        gap: 4vw;
        row-gap: 1.5625vw;
        padding-left: 1.5625vw;
      }
      .form-footer textarea {
        min-height: 11.625vw;
        height: 11.625vw;
      }
      .form-footer .robot-check input[type="checkbox"] {
        margin-right: 1.125vw;
      }
      .footer-social h5 {
        padding-bottom: 3.125vw;
        font-size: 2.5vw;
        line-height: 2.8125vw;
      }
      .footer-social-flex {
        gap: 2vw;
        padding-bottom: 8.2vw;
      }
      .footer-social-flex a img {
        width: 3.3475vw;
        height: 3.3475vw;
      }
      .footer-copy img {
        max-width: 14.802vw;
      }
      .footer-copy p {
        padding-top: 3.625vw;
        font-size: 1.75vw;
        line-height: 2vw;
      }
      header .page-center a > img{
        max-width: 20.3625vw;
        height: 2.6875vw;
      }
      .header-active header nav ul li.active::after {
        width: 1.8750vw;
        height: 1.8750vw;
        top: -1.8750vw;
      }
      .powered-by{
        font-size: 1.25vw !important;
      }
      .powered-by img {
        max-width: 5.3125vw !important;
      }
       .visual-item a img{
        height: 27.1250vw;
       }
}

@media only screen and (max-width: 1000px){
    header .page-center{
      justify-content: space-between;
      gap: 25px;
      }
      header .page-center a > img{
        max-width: 246.75px;
        height: 32.62px;
      }
      .mobile-menu{
        display: block !important;
        position: relative;
        width: 49px;
        height: 49px;
      }
      .mobile-menu img{
        position: absolute;
        width: 49px;
        height: 49px;
        top: 0;
        left: 0;
        object-fit: contain;
    }
      header nav {
        display: none;
        position: fixed;
        top: 120px;
        left: 0;
        width: 100%;
        z-index: 999;
        height: 100%;
        background: #000;
    }
    header nav ul li.active::after {
      display: none;
    }
    .header-mobile{
      background-color: #000 !important;
      height: 100%;
    }
    header nav ul{
      flex-direction: column;
      align-items: baseline;
      height: 100%;
      overflow-y: auto;
      height: 100%;
      padding: 0;
      gap: 0;
    }
    header nav ul li a{
      font-size: 20px;
      line-height: 23px;
    }
    header nav ul li{
      padding: 15px 29px;
      border-bottom: 1px dotted #fff;
      width: 100%;
    }
   .hide-scroll,.hide-scroll body{
    overflow: hidden;
   }
   .active .mobile-normal{
      opacity: 0;
   }
   .mobile-fixed{
    position: absolute;
    pointer-events: none;
   }
   .active .mobile-fixed{
    opacity: 1 !important;
    left: 0;
    top: 0;
   }
    header{
    padding: 25px 0 !important;
   }
   .page-center{
      padding: 0 29px;
   }
   .main-banner-top {
    padding-top: 97.5px;
    padding-bottom: 30.7px;
   }
   .main-banner-top .page-center{
    flex-direction: column-reverse;
   }
   .banner-left{
    max-width: 100%;
   }
   .main-banner-top .page-center figure{
    max-width: 100%;
    flex-grow: inherit;
   }
   .main-banner-top .page-center figure img{
    max-width: 335px;
    margin: 0 auto;
   }
   .banner-left h1{
      padding-bottom: 13px;
      font-size: 30px;
      line-height: 36px;
   }
   .banner-left p{
      font-size: 20px;
      line-height: 26px;
      padding-bottom: 20px;
      max-width: 100%;
   }
   .btn-flex{
    gap: 15px;
    padding-top: 15px;
    flex-wrap: wrap;
   }
   .btn-flex a{
    text-align: center;
    justify-content: center;
    padding: 13px 35px;
    font-size: 17px;
    line-height: 17px;
    white-space: nowrap;
   }
   .btn-flex a::before {
    background-size: 15px;
   }
   .main-banner-bottom{
    padding-top: 35.2px;
  padding-bottom: 56px;
   }
   .content-center-wrapper h2{
    padding-bottom: 22px;
    font-size: 40px;
    line-height: 45px;
   }
   .content-center-wrapper p{
    padding-bottom: 22px;
    font-size: 20px;
    line-height: 23px;
   }
   .form-inline{
    padding-top: 10px;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 25.2px;
   }
   .robot-check,.content-center-wrapper .label-text{
        font-size: 18px;
        line-height: 21px;
        padding-bottom: 0;
   }
   .form-inline span input[type="text"], .form-inline span input[type="email"], .form-inline span input[type="number"], .form-inline span textarea{
      padding: 15px 25px;
      font-size: 17px;
      line-height: 20px;
   }
   .form-inline input[type="submit"]{
    padding: 15px 25px;
    font-size: 17px;
    line-height: 20px;
    width: 100%;
   }
   .form-inline span{
    width: 100%;
   }
   .form-footer .check-flex{
    display: none !important;
   }
   .form-inline .check-input{
    position: initial;
    display: flex;
    justify-content: center;
   }
   .book-one {
    padding-top: 22px;
    padding-bottom: 52px;
   }
   .title-center{
    max-width: 100%;
   }
   .title-center h2{
    padding-bottom: 28px;
    font-size: 40px;
    line-height: 45px;
   }
   .title-center p{
    padding-bottom: 25px;
    font-size: 20px;
    line-height: 23px;
   }
   .music-wrapper{
    max-width: 100%;
    gap: 37px;
   }
   .music-item{
    gap: 28px;
   }
   .music-content h3 {
    font-size: 30px;
    line-height: 34px;
    padding-bottom: 15px;
   }
   .music-content h6 {
    font-size: 20px;
    line-height: 30px;
   }
   .music-content p {
    font-size: 20px;
    line-height: 30px;
    padding-bottom: 18px;
   }
   .visual-world {
    padding-top: 32px;
    padding-bottom: 58px;
  }
  .visual-world .title-center{
    max-width: 100%;
    padding: 0 29px;
  }
  .visual-world .title-center p{
    font-size: 20px;
    line-height: 23px;
    padding-bottom: 40px;
  }
  .visual-item{
    max-width: 100%;
  }
  .visual-flex{
    gap: 20px;
  }
  .visual-item img{
    width: 100%;
  }
  .author {
    padding-top: 35px;
    padding-bottom: 30px;
  }
  .author .page-center{
    gap: 55px;
    flex-direction: column;
  }
  .mobile-hide{
    display: none !important;
  }
  .mobile-title{
    display: flex !important;
    padding-bottom: 30px;
    text-align: center;
    justify-content: center;
    font-size: 40px;
    line-height: 45px;
    padding-bottom: 35px;
  }
  .author figure span{
    order: 3;
  }
  .author figcaption{
    max-width: 302px;
    padding: 0;
    padding-bottom: 30px;
    font-size: 19px;
    line-height: 26px;
  }
  .author::before {
    inset: 0;
    background-color: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(5px);
  }
  .author figure span{
    margin-left: 27px;
    margin-bottom: 30px;
  display: flex;
  justify-content: center;
  }
  .author figure span::before {
    content: "";
    width: calc(100% + 10px);
    height: calc(100% + 13px);
    left: -27px;
    bottom: -31px;
  }
  .author-text h6 {
    font-size: 20px;
    line-height: 26px;
    padding-bottom: 15px;
  }
  .author-text p {
    font-size: 20px;
    line-height: 26px;
    padding-bottom: 30px;
  }
  footer{
    padding-top: 43px;
    padding-bottom: 52px;
  }
  .footer-contact-form > h2{
    font-size: 40px;
    line-height: 45px;
    padding-bottom: 25px;
  }
  .footer-contact-form > p{
    font-size: 20px;
    line-height: 23px;
    padding-bottom: 15px;
  }
  .form-footer{
    max-width: 100%;
    gap: 22px;
  }
  .input-inline{
    flex-direction: column;
    width: 100%;
    gap: 22px;
  }
  .input-inline>span{
    max-width: 100%;
  }
  .form-footer textarea {
    min-height: 219px;
    height: 219px;
    border-radius: 15px !important;
  }
  .form-footer input[type="submit"]{
  margin-top: 7px;
  }
  .footer-social h5{
    padding-top: 12px;
    padding-bottom: 42px;
  }
  .footer-social-flex{
    padding-bottom: 87.4px;
  }
  .footer-copy img{
    max-width: 184.25px;
  }
  .footer-copy p{
    padding-top: 32.5px;
    font-size: 18px;
    line-height: 21px;
    max-width: 207px;
    margin: 0 auto;
  }
  .visual-world .page-center{
    padding: 0;
  }
  .visual-slider,.visual-slider-mobile{
    padding: 0 29px;
  }
    .slick-slide{
      margin: 0 10px;
    }
    .image-popup-content{
      max-height: 50%;
    }
    .visual-slider-mobile{
      display: block !important;
    }
    .image-popup-content img{
      object-fit: cover;
    }
    .powered-by{
        font-size: 15px !important;
      }
      .powered-by img{
        max-width: 69px !important;
      }
        .visual-item a img{
        height: 300px;
       }
}
@media only screen and (max-width: 767px){
  .music-item{
    flex-direction: column;
    text-align: center;
  }
  .music-content{
    max-width: 100%;
  }
  .music-item figure{
    margin: 0 auto;
  }
  .img-flex{
    justify-content: center;
  }
}
@media only screen and (max-width: 767px){
  .btn-flex a{
    width: 100%;
  }
 .image-popup-content {
        padding: 15px;
  }
}
@media only screen and (max-width: 500px){
  .slick-slide .visual-item{
    transition: all 0.5s cubic-bezier(0.37, 0, 0.63, 1);
    transform: scale(0.9);
  }
  .slick-slide.slick-center .visual-item{
    transform: scale(1);
  }
  .slick-slide .visual-item a:before{
    background-color: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(4px);
    opacity: 1;
    transform: scale(1);
    transition: all 0.5s cubic-bezier(0.37, 0, 0.63, 1);
  }
  .slick-slide.slick-center .visual-item a:before{
    opacity: 0;
    transform: scale(1);
  }
  .slick-slide.slick-center .visual-item a:hover:before{
    background: #000;
    opacity: 0.3;
    backdrop-filter: none;
  }
  .visual-slider-mobile,.visual-slider{
    padding: 0;
  }
    .slick-slide{
      margin: 0;
    }
}