html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    border: none;
    touch-action: manipulation; 
}

body {
    background-color: #fff9f9;
}

/* .main {
    width: 100%;
    margin: 0 auto;
} */

.SP {
    width:750px;
    display: block;
    margin:0 auto;
}

@media screen and (max-width: 768px) {
    .SP {
        width:100%;
    }
}

.PC img {
    width: 100%;
    display: block;
    margin: 0 auto;
}

.SP img {
    width: 100%;
    display: block;
    margin: 0 auto;
}

.countdown_box {
    width: 100%;
    margin: 0 auto;
    background-color: #FFF7F3;
    text-align: center;

}

#countdown {
    color: #D9343F;
    font-size: 2.2rem;
    font-weight: bold;
    letter-spacing: 0.3rem;
}

@media screen and (max-width: 820px) {
    .countdown_box {
        height: 3.4rem;
        letter-spacing: 0;
    }

    #countdown {
        font-size: 2.2rem;
        letter-spacing: 0;
    }
}

@media screen and (max-width: 640px) {
    .countdown_box {
        height: 2rem;
        letter-spacing: 0;
    }

    #countdown {
        font-size: 1.2rem;
        letter-spacing: 0;
    }
}

.SP .video_01 {
    position: relative;
    /* background: url(../img/event_all/video_bg.png) no-repeat center; */
    background-size: 100%;
}

.SP .video_01 img {
    position: absolute;
}

.SP .video_01 video {
    width: 80%;
    display: block;
    margin: 0 auto;
    padding: 9.5% 0 10% 0;
}

.SP .slideshow_08 {
    width: 100%;
    position: relative;
    background-color: #FFD3B7;
}

.SP #slideshow_08 {
    position: absolute;
    top: 0;
}

.SP .slideshow_cover {
    position: absolute;
    bottom: 0;
    opacity: 0.9;
}


.SP .video_02 video {
    width: 100%;
}

.SP .point1{
    position: relative;
}

.SP .point1_bg{
    position: relative;
}

.SP .point1_gif01{
    position: absolute;
    width: 43%;
    top: 14.7%;
    left: 3.5%;
}

.SP .point1_gif02{
    position: absolute;
    width: 43%;
    top: 31.5%;
    left: 3.5%;
}

.SP .point1_gif03{
    position: absolute;
    width: 43%;
    top: 48.3%;
    left: 3.5%;
}

.SP .point1_gif04{
    position: absolute;
    width: 43%;
    top: 65%;
    left: 3.5%;
}

.SP .point1_before{
    position: absolute;
    width: 38%;
    left: 5.2%;
    bottom: 10.6%;
}

.SP .point1_after{
    position: absolute;
    width: 46.9%;
    right: 5.5%;
    bottom: 9.2%;
}

.SP .point2{
    position: relative;
}

.SP .point2_bg{
    position: relative;
}

.SP .point2 video {
    position: absolute;
    width: 86%;
    top: 22%;
    left: 7%;
}

.SP .point2_tag01{
    position: absolute;
    width: 17%;
    top: 25%;
    left: 4%;
}

.SP .point2_tag02{
    position: absolute;
    width: 17%;
    top: 28%;
    left: 4%;
}

.PC .video_02 {
    padding: 4% 0;
    position: relative;
}

.PC .video_02 video {
    width: 70%;
    height: 486;
    display: block;
    margin: 0 auto;
}

.PC .video_02 .video_cover{
    position: absolute;
    top:0;
}

.photo_content {
    width: 100%;
    margin: 0 auto;
    position: relative;
}

.photo_content.photo_bg {
    width: 100%;
}

.photo_content .photo_cover {
    position: absolute;
    width: 42%;
    left: 10%;
    bottom: 3%;
}

#carouselSlides {
    position: absolute;
    width: 35%;
    left: 15%;
    bottom: 7%;
}

@media screen and (max-width: 768px) {
    .photo_content {
        width: 100%;
    }

    #carouselSlides {
        width: 35%;
        left: 3%;
        bottom: 3%;
    }
}

img.anniversary_2 {
    width: 40%;
    position: fixed;
    top: -1.5%;
    right: 31%;
    z-index: 100;
    cursor: pointer;
}

img.SP_anniversary_2 {
    width: 104%;
    position: fixed;
    top: 5%;
    right: -3%;
    z-index: 100;
}

@media screen and (max-width: 414px) {
    img.SP_anniversary_2 {
        top: 10%;
    }
}

.PC .event_box{
    position: relative;
}

.PC .event_box .more_btn {
    position: absolute;
    width: 26%;
    display: block;
    bottom: 5%;
    right: 37%;
    cursor: pointer;
}

.SP .event_box_m {
    position: relative;
}

.SP .more_btn {
    position: absolute;
    width: 76%;
    display: block;
    right: 12%;
    bottom: 1.5%;
    cursor: pointer;
}

.PC .offerbox {
    position: relative;
}

.PC .offerbox .offerbtn {
    position: absolute;
    width: 20%;
    display: block;
    bottom: 5.5%;
    right: 40%;
}

.PC .offer_more_btn{
    position: absolute;
    width: 13%;
    display: block;
    top: 11%;
    left: 26%;
    cursor: pointer;
}

.SP .offerbox_m {
    position: relative;
}

.SP .offerbox_m .offerbtn_m_1 {
    position: absolute;
    width: 63%;
    display: block;
    right: 18%;
    top: 32%;
}

.SP .offerbox_m .offerbtn_m_2 {
    position: absolute;
    width: 63%;
    display: block;
    right: 18%;
    bottom: 3%;
}

.SP .offerbox_m .offerbtn_m_3 {
    position: absolute;
    width: 63%;
    display: block;
    right: 18%;
    bottom: 8%;
}

.SP .offer_more_btn_m{
    position: absolute;
    width: 23%;
    display: block;
    left: 2.5%;
    top: 5.5%;
}

.offerbtn:hover {
    opacity: 0.8;
}

.offer_opacity{
    opacity:0;
}

@media screen and (max-width: 768px) {
    .SP .offerbtn {
        margin: 0% auto 5% auto;
        width: 58%;
    }
}

.PC .preorder{
    position: relative;
}
.PC .preorderbtn{
    position: absolute;
    width: 20%;
    display: block;
    bottom: 8.5%;
    right: 40%;
}

.preorderbtn:hover {
    opacity: 0.8;
}

.SP .preorder_m{
    position: relative;
}
.SP .preorderbtn_m{
    position: absolute;
    width: 63%;
    display: block;
    right: 18%;
    bottom: 25%;
}

.SP .sizechart_m {
    position: relative;
}

.SP .sizechart_m .kol_btn {
    position: absolute;
    width: 63%;
    display: block;
    right: 18%;
    bottom: 12%;
}

.sns_btn {
    text-align: center;
}

.sns_btn ul li {
    display: inline-block;
    margin: 0 8px;
    cursor: pointer;
}

.buybtn {
    width: 150px;
    position: fixed;
    right: 0;
    bottom: 8px;
    z-index: 99;
}

.buybtn img {
    width: 100%;
    height: auto;
}

@media screen and (max-width: 768px) {
    .buybtn {
        width: 24%;
        max-width: 170px;
    }
}

.modal_img_style {
    max-width: 100%;
    height: auto;
}

@media screen and (max-width: 768px) {
    .modal_img_style {
        max-width: 70%;
    }
}

@media screen and (max-width: 768px) {
    .media-body {
        height: 21vh;
        overflow: auto;
    }

    .modal#exampleModalLong {
        top: 60px;
    }
}

.color {
    width: 70%;
    margin: 0 auto;
    display: block;
}

@media screen and (max-width: 768px) {
    .color {
        width: 100%;
    }
}

/* .carousel-item{
transition: transform 0.1s ease-in-out,-webkit-transform 0.1s ease-in-out;
} */
#color_carousel_1 .carousel-control-prev {
    background-color: black;
    width: 3%;
}

#color_carousel_1 .carousel-control-next {
    background-color: black;
    width: 3%;
}

.calculator_box {
    width: 640px;
    margin: 0 auto;
}

@media screen and (max-width: 768px) {
    .calculator_box {
        width: 100%;
    }
}