@charset "utf-8";

body{
    background-color: #FBFAF5;
    font-family: "Inter", sans-serif;
    color: #333;
}

.p-garland{
    position: relative;
}
.p-garland::before,
.p-garland::after{
    position: absolute;
    content: "";
    width: 20.13888888888889vw;
    height: 16.944444444444446vw;
    background-repeat: no-repeat;
    background-size: cover;
    top: 0;
    background-image: url(../img/garland.png);
}
.p-garland::before{
    left: 0;
}
.p-garland::after{
    right: 0;
    transform: scaleX(-1);
}

.l-header{
    background-color: #4666FF;
    display: flex;
    height: 5.555555555555555vw;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 100;
}
.l-header__link{
    font-family: "Jost", sans-serif;
    color: #fff;
    font-size: 2.083333333333333vw;
}
.p-title{
    font-size: 5vw;
    font-family: "Jost", sans-serif;
    text-align: center;
    font-weight: 600;
    padding-top: 10.416666666666668vw;
}
.p-subTitle{
    font-size: 2.083333333333333vw;
    text-align: center;
    padding-bottom: 4.861111111111112vw;
}

.p-present__inner{
    width: 70.83333333333334vw;
    margin: 0 auto;
}
.p-present__item{
    display: flex;
    gap: 6.25vw;
    padding: 3.6111111111111107vw 0;
    border-top: 0.06944444444444445vw solid #000;
}
.p-present__left img{
    width: 20.833333333333336vw;
    box-shadow: 0.3472222222222222vw 0.3472222222222222vw 0.6944444444444444vw 0 rgba(0, 0, 0, 0.25);
}
.p-present__title{
    font-size: 1.6666666666666667vw;
    font-weight: 700;
    padding-bottom: 1.3888888888888888vw;
}
.p-label{
    color: #fff;
    background-color: #6D6D6D;
    padding: 0.2777777777777778vw 0.6944444444444444vw;
    border-radius: 0.3472222222222222vw;
}
.p-publisher__name{
    padding: 0.6944444444444444vw 0 1.3888888888888888vw;
    font-size: 1.3888888888888888vw;
}
.p-author__name{
    font-size: 1.3888888888888888vw;
    padding: 0.6944444444444444vw 0 2.083333333333333vw;
}

.p-tag{
    display: flex;
    gap: 0.9722222222222222vw;
}
.p-quantity{
    padding: 0.5555555555555556vw 0.8333333333333334vw;
    font-size: 1.1111111111111112vw;
}
.p-sign{
    padding: 0.5555555555555556vw 0.8333333333333334vw;
    font-size: 1.1111111111111112vw;
}
.p-quantity--three{
    background-color: #AEFF00;
}
.p-quantity--few{
    background-color: #FFD400;
}
.p-quantity--one{
    background-color: #EF86FF;
}
.p-quantity--twelve{
    background-color: #56E0FF;
}
.p-quantity--two{
    background-color: #FF6B6B;
}

.p-handmodel{
    background-color: #F9E5B9;
}

.p-sign--no{
    background-color: #EAEAEA;
}
.p-sign--yes{
    background-color: #FFD5D5;
    color: #C00000;
}

.p-announce{
    font-size: 0.9722222222222222vw;
    padding-top: 0.5555555555555556vw;
}
.c-button{
    display: flex;
    width: 13.333333333333334vw;
    height: 4.166666666666666vw;
    justify-content: center;
    align-items: center;
    font-size: 1.1111111111111112vw;
    font-weight: 600;
    background-color: #333;
    color: #fff;
    border-radius: 2.083333333333333vw;
    margin-top: 3.4722222222222223vw;
    transition: 0.3s;
}
.c-button:hover{
    opacity: 0.7;
}

.u-nui{
    position: relative;
}
.u-nui::before{
    position: absolute;
    content: "";
    background-image: url(../img/present/wawachan-nui.svg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 21.944444444444443vw;
    height: 19.72222222222222vw;
    top: -13.88888888888889vw;
    right: -6.25vw;
}

@media screen and (max-width: 440px){

.p-garland::before,
.p-garland::after{
    top: 9.090909090909092vw;
}

    .l-header{
        height: 13.636363636363635vw;
    }
    .l-header__link{
        font-size: 4.090909090909091vw;
    }
    .p-title{
        font-size: 6.363636363636363vw;
        padding-top: 18.181818181818183vw;
    }
    .p-subTitle{
        font-size: 3.6363636363636362vw;
        padding-bottom: 6.8181818181818175vw;
    }
    .p-present__inner{
        width: 90.9090909090909vw;
    }
    .p-present__item{
        display: flex;
        gap: 6.25vw;
        padding: 6.8181818181818175vw 0;
        border-top: 0.22727272727272727vw solid #000;
    }
    .p-present__left img{
        width: 34.090909090909086vw;
        box-shadow: 1.1363636363636365vw 1.1363636363636365vw 2.272727272727273vw 0 rgba(0, 0, 0, 0.25);
    }
    .p-present__right{
        width: 56.81818181818182vw;
    }
    .p-present__title{
        font-size: 3.6363636363636362vw;
        padding-bottom: 2.272727272727273vw;
    }
    .p-label{
        padding: 0.9090909090909091vw 1.5909090909090908vw;
        border-radius: 1.1363636363636365vw;
        font-size: 2.727272727272727vw;
    }
    .p-publisher__name{
        padding: 1.8181818181818181vw 0 2.272727272727273vw;
        font-size: 3.1818181818181817vw;
    }
    .p-author__name{
        font-size: 3.1818181818181817vw;
        padding: 1.8181818181818181vw 0 2.272727272727273vw;
    }
    .p-quantity{
        padding: 1.1363636363636365vw 1.8181818181818181vw;
        font-size: 2.727272727272727vw;
    }
    .p-sign{
        padding: 1.1363636363636365vw 1.8181818181818181vw;
        font-size: 2.727272727272727vw;
    }
    .p-announce{
        font-size: 2.727272727272727vw;
    }

    .c-button{
        width: 36.36363636363637vw;
        height: 9.090909090909092vw;
        font-size: 2.9545454545454546vw;
        border-radius: 4.545454545454546vw;
        margin-top: 6.8181818181818175vw;
    }
    .u-nui::before{
        width: 29.545454545454547vw;
        height: 25vw;
        top: -34.090909090909086vw;
        right: 3.6363636363636362vw;
    }

    .u-pd{
        padding-bottom: 11.363636363636363vw;
    }
}