@media (max-width: 768px) {
    body{
        grid-template-columns: calc(100vw - 40px) 40px ;
        align-items: flex-start;
    }
    body > header{
        grid-column: 1 / -1;
        grid-row: 1;
    }
    body > #slider{
        grid-column: 1 / -1;
        grid-row: 2;
        position: static;
    }
    body > #slider > div{
        position: static;
        width: 100%;
        height: auto;
    }
    #main-slider{
        grid-row: 1;
    }
    #main-slider img{
        height: 100%;
    }
    #thumbnail-slider{
        align-self: flex-end;
        grid-row: 2;
        z-index: 2;
    }
    ul.banner{
        grid-column: 2;
        grid-row: 1 / 5;
    }
    body > main{
        grid-column: 1;
        grid-row: 4;
    }
    body > p{
        grid-column: 1;
        grid-row: 3;
        margin-top: 3rem;
    }
    body > footer{
        grid-column: 1 / -1;
        grid-row: 5;
    }
}


article section{
    padding: 4rem 0;
}
article h2{
    font-size: 2rem;
    padding-left: 6rem;
    position: relative;
    margin-bottom: 3rem;
}
article h2::before{
    content: "";
    width: 26.75rem;
    height: 2px;
    background: var(--main-color);
    position: absolute;
    left: 0;
    bottom: -.5rem;
}
article h2::after{
    color: var(--main-color);
    font-size: .8rem;
    position: absolute;
    left: 27.5rem;
    bottom: -1rem;
}
@media (max-width: 768px) {
    article section{
        padding: 2rem 0;
    }
    article h2{
        font-size: 1.5rem;
        padding-left: 2rem;
    }
    article h2::before{
        width: 16rem;
    }
    article h2::after{
        left: 17rem;
    }
}


.plan h2::after{
    content: "Ranking";
}
.plan__contents{
    width: 90%;
    margin: 0 auto;
}

.plan__images{
    width: 500px;
    height: 500px;
    border-radius: 50%;
    mask-image: radial-gradient(rgb(255, 255, 255) 50%, rgba(255, 255, 255, 0) 70%);
    margin: 0 auto;
}
.plan__images img{
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.plan__text{
    max-width: 22.5rem;
    margin: .5rem auto 5rem;
    text-align: justify;
}
.plan__contents h3{
    text-align: center;
    font-size: 1.75rem;
}
.plan__list{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 3rem 1rem;
    width: 80%;
    margin: 2rem auto 4rem;
}
.plan__list__images{
    display: grid;
}
.plan__list__images img{
    grid-column: 1;
    grid-row: 1;
}
.plan__list__images figcaption{
    grid-column: 1;
    grid-row: 1;
    align-self: flex-end;
    background: var(--clear-color);
    color: var(--text-color);
    text-align: center;
    font-size: .9rem;
    justify-self: center;
    padding: .25rem 1rem;
    transform: translateY(50%);
    line-height: 1.3;
}
.plan__btn{
    width: 20rem;
    margin: 2rem auto 0;
    background: var(--main-color);
    border-radius: .5rem;
    text-align: center;
    font-size: .9rem;
}
.plan__btn a{
    color: var(--clear-color);
    padding: .5rem;
}

@media (max-width: 768px) {
    .plan__images{
        width: 350px;
        height: 350px;
    }
    .plan__list__images figcaption{
        font-size: .7rem;
        letter-spacing: 0;
    }
    .plan__text{
        margin: .5rem auto 3rem;
    }
    .plan__contents h3{
        font-size: 1.5rem;
    }
    .plan__list{
        width: 100%;
    }
}



.costume h2::after{
    content: "Costume";
}
.costume__text{
    max-width: 22.5rem;
    margin: .5rem auto;
    text-align: justify;  
    font-size: .9rem;
}
.costume__contents{
    width: 90%;
    margin: 0 auto;
}
.costume__list{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 3rem 1rem;
    width: 80%;
    margin: 2rem auto 4rem;
}
.costume__list__images{
    display: grid;
}
.costume__list__images img{
    grid-column: 1;
    grid-row: 1;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    width: 100%;
    height: 100%;
}
.costume__list__images figcaption{
    grid-column: 1;
    grid-row: 1;
    align-self: flex-end;
    background: var(--clear-color);
    color: var(--text-color);
    text-align: center;
    font-size: .9rem;
    justify-self: center;
    padding: .25rem 1rem;
    transform: translateY(50%);
    line-height: 1.3;
    z-index: 2;
}
.costume__btn{
    width: 20rem;
    margin: 2rem auto 0;
    background: var(--accent-color);
    border-radius: .5rem;
    text-align: center;
    font-size: .9rem;
}
.costume__btn a{
    color: var(--clear-color);
    padding: .5rem;
}
@media (max-width: 768px) {
    .costume__list__images figcaption{
        font-size: .7rem;
        letter-spacing: 0;
    }
    .costume__list{
        width: 100%;
    }
}




.gallery h2::after{
    content: "Gallery";
}
#gallery-slider{
    padding-top: 15rem;
    position: relative;
    margin-bottom: 6rem;
}
#gallery-slider::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: url(../images/gallery_bg.webp);
    background-color:rgba(255,255,255,.5);
    background-blend-mode:lighten;
    width: 100%;
    aspect-ratio: 4 / 3;
    z-index: -1;
    background-size: cover;
}
#gallery-slider .splide__track{
    width: 90%;
    margin: 0 auto;
    padding: 2rem 0 ;
}
#gallery-slider .splide__slide img {
    opacity: .5;
    transform: scale(.8);
    transition: .7s;
}
#gallery-slider .splide__slide.is-active img {
    opacity: 1;
    transform: scale(1.1);
    z-index: 1;
    overflow: visible;
}
.gallery-pagination{
    bottom: -2rem;
}
.gallery .gallery-page{
    border: 1px solid var(--main-color);
    background-color: var(--clear-color);
    width: .75rem;
    height: .75rem;
}
.gallery .gallery-page.is-active {
    background-color: var(--main-color);
}
.gallery h3{
    font-size: 1.5rem;
    text-align: center;
    position: relative;
}
.gallery h3::after{
    content: "";
    background: radial-gradient( rgba(var(--accent-color-opacity), .7) 0%, rgba(var(--accent-color-opacity), 0) 70%);
    width: 17.5rem;
    height: 13.5rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: -1;
}

.gallery .button {
    background-color: transparent;
    height: 30px;
    transition: .2s;
    width: 30px;
}
.gallery .button::before {
    background-repeat: no-repeat;
    background-size: contain;
    bottom: 0;
    content: "";
    height: 30px;
    left: 0;
    margin: auto;
    position: absolute;
    top: 0;
    width: 30px;
}
.gallery .prev{
    transform: translate(7.5rem,7.5rem);
}
.gallery .next{
    transform: translate(-7.5rem,7.5rem);
}
.gallery .prev::before {
    background-image: url(../images/arrow-left.svg);
}
.gallery .next::before {
    background-image: url(../images/arrow-right.svg);
}
.gallery .button:disabled::before {
    opacity: .5;
}
.gallery .splide__slide img {
    height: auto;
    width: 100%;
}
@media (max-width: 768px) {
    .gallery > div{
        padding-top: 7.5rem;
    }
    .gallery .prev{
        transform: translate(3.25rem,3rem);
    }
    .gallery .next{
        transform: translate(-3.25rem,3rem);
    }
}







.voice h2::after{
    content: "Voice";
}
.voice .splide__track{
    width: 80%;
    margin: 0 auto;
    padding: 2rem 0 ;
}
.voice .splide__slide{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 2rem;
}
.voice-pagination{
    bottom: 0;
}
.voice-page{
    border: 1px solid var(--main-color);
    background-color: var(--clear-color);
    width: .5rem;
    height: .5rem;
}
.voice-page.is-active {
    background-color: var(--main-color);
}
.voice .slide-content{
    padding: 2rem;
    background: rgba(var(--main-color-opacity), .1);    
    font-size: .9rem;
}
.voice .button {
    background-color: transparent;
    height: 30px;
    transition: .2s;
    width: 30px;
}
.voice .button::before {
    background-repeat: no-repeat;
    background-size: contain;
    bottom: 0;
    content: "";
    height: 30px;
    left: 0;
    margin: auto;
    position: absolute;
    top: 0;
    width: 30px;
}
.voice .prev{
    transform: translate(3rem,0);
}
.voice .next{
    transform: translate(-3rem,0);
}
.voice .prev::before {
    background-image: url(../images/arrow-left.svg);
}
.voice .next::before {
    background-image: url(../images/arrow-right.svg);
}
.voice .button:disabled::before {
    opacity: .5;
}
.voice .splide__slide img {
    height: auto;
    width: 100%;
}
.voice .slide-content h3 {
    margin-bottom: 1rem;
}
.voice .slide-content h3 span{
    display: block;
    font-size: 1rem;
}
@media (max-width: 768px) {
    .voice .splide__slide{
        grid-template-columns: 1fr;
        gap: 0;
    }
    .voice .prev{
        transform: translate(1rem,0);
    }
    .voice .next{
        transform: translate(-1rem,0);
    }
}



.shopinfo h2::after{
    content: "Shop info";
}
.shopinfo__contents{
    width: 90%;
    margin: 0 auto;
}
.shopinfo__contents h3{
    font-size: 1.5rem;
    text-align: center;
    margin: 2rem auto;
    position: relative;
}
.shopinfo__contents h3::after{
    content: "";
    background: radial-gradient( rgba(var(--main-color-opacity), .4) 0%, rgba(var(--main-color-opacity), 0) 70%);
    width: 10rem;
    height: 8rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: -1;
}
.shopinfo__contents h3 span{
    display: block;
    line-height: 1;
}
.shopinfo__contents h3 span img{
    width: 6.625rem;
}
.shopinfo__text{
    max-width: 30rem;
    width: 90%;
    margin: .5rem auto 5rem;
    text-align: justify;
    font-size: .9rem;
}
.shopinfo__contents figure{
    max-width: 30rem;
    width: 90%;
    margin: 2rem auto;
}
.shopinfo__contents table{
    max-width: 30rem;
    width: 90%;
    margin: 2rem auto;
    font-size: .9rem;
    border-collapse: collapse;
}
.shopinfo__contents table th,
.shopinfo__contents table td{
    padding: .5rem .75rem;
    font-weight: normal;
    text-align: left;
    vertical-align: top;
}
.shopinfo__contents table th{
    white-space: nowrap
}
.shopinfo__contents table br{
    display: none;
}
@media (max-width: 768px) {
    .shopinfo__text{
        width: 90%;
        margin: .5rem auto 3rem;
    }
    .shopinfo__contents table{
        max-width: 100%;
        letter-spacing: 0;
    }
    .shopinfo__contents table th,
    .shopinfo__contentstable td{
        padding: .5rem;
    }
    .shopinfo__contents table br{
        display: block;
    }
}


.instagram__contents{
    width: 90%;
    margin: 0 auto;
}
.instagram__contents a{
    color: var(--text-color);
}