@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap');
.l-main{
    color: #000;
    font-weight: 500;
    font-family: "Zen Maru Gothic", sans-serif;
    --color_red: #E60012;
    --color_pink: #EB6060;
    --color_white: #fff;
}

.l-content{
    max-width: calc( 1240px + 2*min(5vw,48px) );
    padding: 0 min(5vw,48px);
    margin: 0 auto;
}

/* bg */
.l-bg{
    background-color: rgba(255, 198, 185, 0.50);
}

/* title */
.c-title{
    display: flex;
    justify-content: center;
    align-items: center;
}

@media screen and (max-width: 769px) {
    .c-title{
        width: 80%;
        margin: 0 auto;
    }
}

/* button */
.c-button{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: var(--color_white);
    font-size: 2rem;
    text-align: center;
    line-height: 1;
    background-color: var(--color_pink);
    padding: 1em 2.5em;
    border-radius: 999px;
    transition: opacity .2s;
}

.c-button:hover{
    opacity: .8;
}

.c-button::after{
    content: '';
    position: absolute;
    top: 50%;
    right: 1em;
    transform: translateY(-50%);
    width: 2rem;
    aspect-ratio: 1/1;
    background-image: url(../img/button-arrow.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.c-button__deco{
    color: var(--color_pink);
    font-size: 1rem;
    font-weight: bold;
    background-color: #fff;
    border-radius: 999px;
    padding: .5em 1em;
}

.c-button:has(.c-button__deco){
    padding-top: .5em;
}

@media screen and (max-width: 1024px) {
    .c-button::after{
        right: .75em;
    }
}

@media screen and (max-width: 769px) {
    .c-button{
        font-size: 1.3rem;
        padding: 1em 2.2em;
    }

    .c-button::after{
        width: 1.5rem;
        right: .5em;
    }

    .c-button__deco{
        font-size: .75rem;
    }

    .c-button__deco.--long{
        font-size: 0.65rem;
    }
}

/* card */
.c-card{
    display: flex;
    gap: 20px;
}

.c-card.--reverse{
    flex-direction: row-reverse;
}

.c-card__img{
    flex-basis: 50%;
    border-radius: 60px;
    overflow: hidden;
}

.c-card__img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.c-card__main{
    flex-basis: 50%;
    padding: 40px;
}

.c-card__title_box{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
}

.c-card__info{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0 20px;
}

.c-card__name{
    color: #7D7D7D;
    font-size: 1.5rem;
    font-weight: bold;
}

.c-card__class{
    color: #fff;
    font-weight: bold;
    line-height: 1.1;
    background-color: var(--color_pink);
    padding: .5em 1em;
    border-radius: 999px;
}

.c-card__title{
    color: var(--color_pink);
    font-size: 2rem;
    font-weight: bold;
}

.c-card__text{
    line-height: 2;
    margin-top: 10px;
}

@media screen and (max-width: 1024px) {
    .c-card{
        flex-direction: column;
    }

    .c-card.--reverse{
        flex-direction: column;
    }

    
    .c-card__main{
        padding: 0;
    }

    .c-card__title_box{
        align-items: center;
    }
}

@media screen and (max-width: 769px) {
    .c-card__img{
        border-radius: 20px;
    }

    .c-card__class{
        font-size: .8rem;
    }

    .c-card__title{
        font-size: 1.5rem;
    }
}

/* mv */
.p-mv{
    position: relative;
    background-image: url(../img/mv_bg.png);
    background-size: cover;
    overflow: hidden;
}

.p-mv::before{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20%;
    background-image: linear-gradient( to top, #fff,transparent );
}

.p-mv__main{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 50px;
}

.p-mv__title{
    position: relative;
    z-index: 1;
}

.p-mv__nav{
    position: relative;
    z-index: 1;
}

.p-mv__nav-ul{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px 60px;
}

.p-mv__nav-a{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #D6463C;
    font-size: 1.5rem;
    font-weight: bold;
    transition: opcity .2s;
}

.p-mv__nav-a::after{
    content: '';
    width: 1rem;
    aspect-ratio: 1/1;
    background-image: url(../img/nav-arrow.svg);
    background-repeat: no-repeat;
    background-size: contain;
}

.p-mv__nav-a:hover{
    opacity: .8;
}

.p-mv__deco{
    position: absolute;
    aspect-ratio: 1/1;
    pointer-events: none;
}

.p-mv__deco img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.p-mv__deco.--01{
    width: min( 40%, calc( (1240px + 2*min(5vw,48px))*0.4 ) );
    top: 0;
    right: 0;
    transform: translate(20%,-10%);
}
.p-mv__deco.--02{
    width: min( 40%, calc( (1240px + 2*min(5vw,48px))*0.4 ) );
    top: 20%;
    left: 0;
    transform: translate(-15%,-10%);
}
.p-mv__deco.--03{
    width: min( 30%, calc( (1240px + 2*min(5vw,48px))*0.3 ) );
    bottom: 0;
    right: 10%;
    transform: translate(10%,5%);
}

@media screen and (max-width: 1024px) {
    .p-mv__nav-ul{
        display: grid;
        grid-template-areas: 'one one two two three three'
                             'four four four five five five';
        gap: 20px 10px;
    }

    .p-mv__nav-li.--01{
        grid-area: one;
    }
    .p-mv__nav-li.--02{
        grid-area: two;
    }
    .p-mv__nav-li.--03{
        grid-area: three;
    }
    .p-mv__nav-li.--04{
        grid-area: four;
    }
    .p-mv__nav-li.--05{
        grid-area: five;
    }
}

@media screen and (max-width: 769px) {
    .p-mv__nav-a{
        font-size: 1rem;
    }

    .p-mv__main{
        padding-top: 30vw;
        padding-bottom: 30vw;
    }
    
    .p-mv__deco.--01{
        width: 70%;
        transform: translate(30%,-25%);
    }
    .p-mv__deco.--02{
        width: 70%;
        top: unset;
        bottom: 0;
        transform: translate(-35%,0);
        z-index: 1;

    }
    .p-mv__deco.--03{
        width: 60%;
        bottom: 0;
        right: 10%;
        transform: translate(30%,25%);
    }
}

/* voice */
.p-voice{
    margin-top: 120px;
}

.p-voice__main_text{
    color: var(--color_pink);
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
    margin-top: 10px;
}

.p-voice__cards_wrapper{
    display: flex;
    flex-direction: column;
    gap: 120px;
    margin-top: 50px;
}

@media screen and (max-width: 769px) {
    .p-voice{
        margin-top: 60px;
    }

    .p-voice__main_text{
        font-size: 1.5rem;
    }

    .p-voice__cards_wrapper{
        gap: 60px;
    }
}


/* product */
.p-product{
    position: relative;
    padding-top: 160px;
    padding-bottom: 160px;
    margin-top: calc((min(100vw, calc( 1240px + 2*min(5vw,48px) ) ) /3.3)*.6 + 100px );
}

.p-product::before{
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translate(-50%,40%);
    width: 100%;
    max-width: calc( 1240px + 2*min(5vw,48px) );
    aspect-ratio: 3.3/1;
    background-image: url(../img/gallery.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
}

.p-product__title{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--color_red);
    font-size: 2.8rem;
    font-weight: bold;
}

.p-product__text{
    font-size: 1.125rem;
    text-align: center;
}

.p-product__list{
    display: grid;
    grid-template-areas: 'one two'
                         'three three';
    gap: 60px 25px;
    margin-top: 50px;
}

.p-product__item{
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.p-product__item.--01{
    grid-area: one;
}
.p-product__item.--02{
    grid-area: two;
}
.p-product__item.--03{
    grid-area: three;
}

.p-product__info{
    position: relative;
    width: 100%;
    text-align: center;
    background-color: #fff;
    border-radius: 999px;
    padding: 1em 2em;
}

.p-product__name{
    font-size: 2rem;
    font-weight: bold;
    line-height: 1.2;
}

.p-product__price{
    font-size: 1.125rem;
}

.p-product__icon{
    position: absolute;
    right: 1em;
    top: 50%;
    transform: translateY(-50%);
}

.p-product__catch{
    color: var(--color_pink);
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
}

.p-product__101{
    display: grid;
    grid-template-columns: repeat(2,1fr) auto;
    justify-content: center;
    align-items: center;
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

.p-product__img{
    display: flex;
    justify-content: center;
    align-items: center;
}

.p-product__img img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.p-product__buttons{
    display: flex;
    flex-direction: column;
    gap: 25px;
    width: 100%;
    max-width: 800px;
    margin: 90px auto 0;
}

@media screen and (max-width: 1024px) {
    .p-product__list{
        grid-template-areas: 'one'
                            'two'
                            'three';
    }
}

@media screen and (max-width: 769px) {
    .p-product{
        padding-top: 25vw;
        padding-bottom: 80px;
        margin-top: 70vw;
    }

    .p-product::before{
        transform: translate(-50%,30%);
        aspect-ratio: 1/1;
        background-image: url(../img/gallery-sp.png);
    }

    .p-product__title{
        font-size: 1.8rem;
    }

    .p-product__title img{
        width: 60%;
    }

    .p-product__info.--wide .p-product__name{
        text-align: left;
    }

    .p-product__icon{
        top: 0;
        transform: translateY(-40%);
        width: 25%;
    }

    .p-product__info.--wide .p-product__icon{
        width: 40%;
    }

    .p-product__price{
        font-size: 1rem;
    }

    .p-product__price_before{
        font-size: .8rem;
    }

    .p-product__catch{
        font-size: 1.2rem;
    }

    .p-product__img img{
        max-width: 500px;
    }

    .p-product__101{
        grid-template-columns: 1fr;
    }
}


/* feature */
.p-feature{
    margin-top: 120px;
}

.p-feature__items{
    display: grid;
    grid-template-areas: 'one one'
                         'two three'
                         'four four';
    gap: 25px;
    margin-top: 60px;
}

.p-feature__item img{
    width: 100%;
}

.p-feature__item.--01{
    grid-area: one;
}
.p-feature__item.--02{
    grid-area: two;
}
.p-feature__item.--03{
    grid-area: three;
}
.p-feature__item.--04{
    grid-area: four;
}

.p-feature__notice{
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: .875rem;
    line-height: 1.3;
    margin-top: 20px;
}

@media screen and (max-width: 769px) {
    .p-feature{
        margin-top: 60px;
    }

    .p-feature__items{
        display: grid;
        grid-template-areas: 'one'
                            'two'
                            'three'
                            'four';
        gap: 25px;
        margin-top: 30px;
    }
}

/* buy */
.p-buy{
    margin-top: 180px;
}

.p-buy__contact{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    border: 6px solid var(--color_pink);
    border-radius: 32px;
    padding: 60px;
    margin-top: 50px;
}

.p-buy__text{
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    line-height: 1.8;
}

@media screen and (max-width: 769px) {
    .p-buy{
        margin-top: 80px;
    }

    .p-buy__contact{
        padding: 30px 20px;
        margin-top: 30px;
    }

    .p-buy__text{
        font-size: 1rem;
    }
}

/* catalog */
.p-catalog{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 120px;
    padding-bottom: 120px;
    margin-top: 200px;
    margin-bottom: -120px;
}

@media screen and (max-width: 1024px) {
    .p-catalog{
        margin-bottom: -80px;
    }
}

@media screen and (max-width: 769px) {
    .p-catalog{
        margin-top: 80px;
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .p-catalog .c-button{
        font-size: 1.2rem;
    }
}

/* utility */
.u-tab{
    display: none;
}

.u-sp{
    display: none;
}

@media screen and (max-width: 1024px) {
    .u-tab{
        display: block;
    }
}

@media screen and (max-width: 769px) {
    .u-sp{
        display: block;
    }
}