/*==========================
mein　visual
==========================*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    animation: img-change 20s infinite;
}
.item img{
  width: 100%;
}
.item:nth-child(1) {
  animation-delay: 0s;
}
.item:nth-child(2) {
  animation-delay: 5s;
}
.item:nth-child(3) {
  animation-delay: 10s;
}
.item:nth-child(4) {
  animation-delay: 15s;
}
.item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes img-change {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  30% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

    .mv {
        width: 100%;
        height: 216vw;
        max-height: 810px;
        position: relative;
    }
    .MV_ttl{
        position: absolute;
        font-size: 15vw;
        color: #E2E2E2;
        bottom: 10%;
        left: 19%;
        font-family: "Libre Baskerville";
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        transform: rotate(-90deg);
        transform-origin: bottom left;
        width: 120vw;
        }
        .mv {
            width: 100%;
            height: 147vw;
            position: relative;
          }
        .MV_sub_ttl{
            padding: 4% 12.5% 4% 12.8%;
            color: #332725;
            font-family: "Shippori Mincho";
            font-size: 3.7vw;
            font-style: normal;
            font-weight: 500;
            line-height: 150%;
            display: flex;
            justify-content: center;
        }

        /* 500px */
        @media screen and (min-width:500px) {
            .mv{
                max-height: 810px;
            }
            .MV_ttl{
                font-size: min(6.5vw,80px);
                bottom: 10%;
                left: 9%;
            }
        }
        @media screen and (min-width:1023px) {
            .MV_sub_ttl{
                font-size: 2rem;
                line-height: 180%;
                letter-spacing: 3.2px;
                padding: 4% 0 4% 11%;
                justify-content: flex-start;
            }
        }


/*==========================
TOP about
==========================*/
        .TOP_about{
            position:relative;
            overflow: hidden;
            height:144vw;
            margin-top: 3vw;
        }
        .TOP_about::before{
            content: "";
            width: 95.73vw;
            height: 125.7vw;
            position: absolute;
            background: var(--primary-khaki);
            right: 0;
            top: 12%;
            z-index: -1;
        }
        .TOP_about_nail_img{
            width: 65.07vw;
            height: 40vw;
            max-height: 409.2px;
            margin-left: 15.47vw;
        }
        .about_caption{
            padding: 6.1vw 0 13vw 10vw;
        }
        .TOP_heading{
            font-family: "Libre Baskerville";
            font-size: 5.3vw;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
        }
        .TOP_about_heading{
            color: #E2E2E2;
        }
        .TOP_sub_heading{
            font-family: "Shippori Mincho";
            font-size: 2.7vw;
            font-style: normal;
            font-weight: 600;
            line-height: normal;
            padding-left: 7px;
        }
        .TOP_sub_about_heading{
            color: #E2E2E2;
        }
        #about_caption_text{
            color: #E2E2E2;
            font-size: 3.2vw;
            font-style: normal;
            font-weight: 400;
            line-height: 150%;
            letter-spacing: 0.48px;
            margin-top: 5px;
        }
        .next_btn{
            margin-top: 8px;
            margin-left: 56%;
            position: relative;
            width: 130px;
        }
        .next_btn img{
            width: 30vw;
        }
        .about_next_btn{
            color: #E2E2E2;
            margin-top: 8px;
            margin-left: 56%;
            margin-top: 6.13vw;
            width: 130px;
        }
        .TOP_about_interior{
            display: flex;
            justify-content: space-between;
        }
        .TOP_about_interior_img1{
            width: 39vw;
            height: 53vw;
            max-height: 540.1px;
        }
        .TOP_about_interior_img2{
            width: 52.53vw;
            height: 35.73vw;
            max-height: 365.5px;
            margin-top: 8vw;
        }
    /* 1440px */
    @media screen and (min-width:1023px) {
        .TOP_about{
            height: initial;
            max-width: 1440px;
            margin: 0 auto;
            margin-top: 4%;
        }
        .TOP_about::before{
            content: "";
            width: 91.73%;
            height: 125%;
            position: absolute;
            background: var(--primary-khaki);
            right: 0;
            top: 12%;
            z-index: -1;
        }
        .TOP_about_nail_img{
            height: 42.15%;
            max-height: 607px;
            width: 56.25%;
            max-width: 810px;
            margin-left: 20.47%;        
        }
        .about_caption{
            padding: 23px 0 40px 38px;
        }
        .TOP_heading{
            font-size: 2rem;
        }
        .TOP_about_heading{
            margin-left: 50%;
            margin-top: 3.5%;
        }
        .TOP_sub_heading{
            font-size: 1.25rem;
        }
        #about_caption_text{
            font-size: 2rem;
            margin-top: 2.5%;
            margin-left: 50%;
        }
        .about_next_btn{
            margin-top: 2%;
            margin-left: 50%;
        }
        .next_btn{
            width: 191.91px;
        }
        .next_btn img{
            width: 100%;
            height: 100%;
        }
        .TOP_about_interior{
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            transform: translateY(-11%);
        }
        .TOP_about_interior_img1{
            width: 39.31%;
            height: 52.43%;
            max-height: 755px;
            max-width: 566px;
            margin-top: -10%;
            margin-right: 23%;
        }
        .TOP_about_interior_img2{
            width: 37.78%;
            height: 28.26%;
            max-width: 544px;
            max-height: 407px;
            margin-top: 8vw;
            transform: translateX(-30%);
        }
        
    }
    /*==========================
    TOP menu
    ==========================*/
    
    .TOP_menu{
        margin-top: 7.2vw;
        margin-bottom: 7.73vw;
        width: 100%;
    }
    .menu_nail{
        position: relative;
        height: 52vw;
        width: 80vw;
        margin-left: 6.4vw;
    }
    .menu_nail img{
        display: block;
        height: 52vw;
        width: 80vw;
    }
    .menu_nail::after{
        content: "";
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: var(--primary-beige);
        top: 5vw;
        left: 7.5vw;

        z-index: -1;
    }
    .menu_caption{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-left: 8.53vw;
        margin-top: 8.27vw;
    }
    .caption_text{
        color: #332725;
        font-family: "Noto Serif JP";
        font-size: 2.67vw;
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
        letter-spacing: 0.4px;
        margin-top: 3.47vw;
    }
    @media screen and (min-width:1023px) {
        .TOP_menu{
            display: flex;
            flex-direction: row-reverse;
            max-width: 1440px;
            padding-right: 50px;
            justify-content: center;
            margin: 0 auto;
            padding: 120px 50px 120px 0px;
        }
        .caption_text{
            font-size: 1.125rem;
            width: 101.4%;
            margin-top: 9%;
        }
        .menu_next_btn{
            margin-top: 10%;
            margin-left: 0%;
        }
        .menu_nail{
            width: 35.66%;
            height: 23.82%;
        }
        .menu_nail img{
            width: initial;
            height: initial;
        }
        .menu_nail::after {
            top: 15%;
            left: 10%;
        }

        .menu_caption{
            width: 38%;
            margin-left:initial;
            margin-top:initial;
        }
    }
    
    /*==========================
    TOP GALLERY
==========================*/

        .TOP_GALLERY{
            position: relative;
            overflow: hidden;
            background: linear-gradient(180deg, white 0%, white 100px, #E5E2CF 100px);
            height: 100%;
        }
        .gallery_next_btn{
            margin-top: 8%;
        }
        .slider {
            width: 100%;
            max-width: 1023px;
            margin: 30px auto;
        }
        .slick-slide{
            display: block;
            padding: 0 0.5%;
        }
        
        .TOP_GALLERY_img_list_item img{
            height: auto;
            width: 100%;
        }
        .gallery_caption{
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            margin:8.27vw 8.53vw;
        }
        .TOP_GALLERY_instagram_btn{
            display: inline-flex;
            padding: 2.67% 4.53% 3.47% 5.33%;
            justify-content: center;
            align-items: center;
            border: 1px solid var(--primary-brown);
            margin-top: 2.67vw;
        }
        .instagram_btn{
            font-family: "Libre Baskerville";
            font-size: 4.27vw;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
        }
        @media screen and (min-width:1023px) {
            .TOP_GALLERY{
                margin: 0 auto;
                height: 55vw;
                max-height: 601px;
            }
            .slider{
                max-width: 1440px;
            }
            .TOP_heading{
                font-size: 2.75rem;
            }
            .gallery_caption{
                margin: 3% 15%;
            }
            .gallery_caption_text{
                margin-top: 5%;
            }
            .TOP_GALLERY_instagram_btn{
                padding: 2% 7%;
                margin-top: initial;
                margin-left: 70%;
                margin-top: -13%;
            }
            .instagram_btn{
                font-size: 1.5rem;
            }
            .gallery_next_btn{
                margin-top:4%;
                margin-left: initial;
            }
        }

/*==========================
TOP NAIL PROBLEM
==========================*/
        .foot{
            width: 100vw;
            height: 74.93vw;
            flex-shrink: 0;
            overflow: hidden;
        }
        .foot img{
            height: 100%;
            width: 100%;
            object-fit: cover;
        }
        .nailproblem_caption{
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            margin: 8.27vw 8.53vw;
        }
        .nailproblem_caption_text{
            margin-left: 10vw;
        }
        @media screen and (min-width:1023px) {
            .TOP_nailproblem{
                display: flex;
            flex-direction: row-reverse;
            max-width: 1440px;
            margin: 0 auto;
            }
            .foot{
                width: 34.38%;
                height: 45.83%;
                max-width: 495px;
                max-height: 660px;
            }
            .nailproblem_caption{
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                margin: 13% auto;
            }
            .nailproblem_caption_text{
                margin-left: initial;
                margin-top: 5%;
            }
            .nailpoblem_next_btn{
                margin-left: initial;
            }
         }
/*==========================
TOP SEMINARVIDEO
==========================*/
        .TOP_seminarvideo{
            padding: 10vw;
            background-color: var(--primary-cream);
        }
        .seminarvideo_caption{
            display: flex;
            flex-direction: column;
            align-items: center;
            border: 0.53vw solid #4D483F;
            box-sizing: border-box;
            margin: -5vw;
            padding: 5vw;
            text-align: center;
         }
         .seminarvideo_next_btn{
            margin: 6% auto 0;
         }
         @media screen and (min-width:1023px) {
            .TOP_seminarvideo{
                padding: 3%;
                height: 26.67%;
            }
            .seminarvideo_caption{
                margin: initial;
                padding: initial;
                padding-bottom: 5%;
                margin: 0 auto;
                max-width: 1440px;
            }
            .TOP_seminarvideo_heading{
                display: flex;
                flex-direction: column; 
                margin: 3%;
            }
            .seminarvideo_caption_text{
                margin-top: initial;
            }
            .seminarvideo_next_btn{
                margin: 3% auto 0;
            }
         }

/*==========================
TOP RESERVE
==========================*/
         .TOP_reserve{
            width: 100%;
            height: 62vw;
            background-image: url(../images/TOP_image/TOP_Reserve_SP.png);
            background-repeat: no-repeat;
            background-size: cover;
         }
         .TOP_RESERVE{
            display: flex;
                justify-content: center;
                padding-top: 10%;
            color: var(--primary-white);
            font-family: "Libre Baskerville";
            font-size: 5.33vw;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
         }
          .reserve_btn{
            display: flex;
            justify-content: center;
            padding-top: 9%;
          }
          .reserve_btn a{
            padding: 5.5% 3.5%;
            margin-top: -2%;
            font-size: 4.44vw;
            font-weight: bold;
            text-align: center;
            background-color: #FFF;
            mix-blend-mode: screen;
            width: 83.33%;
            border-radius: 2vw;
        }
         .reserve_visual::before{
            width: 100%;
            height: 100%;
            z-index: 0;
            content: "";
            display: block;
            top: 0;
            left: 0;
            background-color: rgba(80, 80, 80, 0.30);
         }
         .reserve_visual img{
            width: 100vw;
         }

         @media screen and (min-width:1023px) {
            .TOP_reserve {
                width: 100%;
                margin: 0 auto;
                height: 31.11%;
                background-image: url(../images/TOP_image/TOP_Reserve_PC.png);
            }
            .TOP_RESERVE {
                font-size: 2rem;
                padding-top: 5%;
            }
            .reserve_btn a {
                font-size: 2.25rem;
                padding: 5% 0;
                width: 37.99%;
                line-height: 150%;
            }
            .reserve_btn{
                padding-top: 4%;
                padding-bottom: 10%;
                max-width: 1440px;
                margin: 0 auto;
            }
         }