@charset "UTF-8";

/* 既存調整 */
.product-detail .p-product-detail__freeArea{
    background-color: #fff;
    height: auto;
}
@media screen and (min-width: 901px), print {
    .product-detail .p-product-detail__freeArea{
        height: auto;
    }
}


/* section-teiki */
.section-teiki{
    width: 100%;
    max-width: 960px;
    margin-top: 60px;
    font-family: "M PLUS Rounded 1c", sans-serif;
    text-rendering: optimizeSpeed;
    transform: rotate(0.03deg);
    color: #595757;
    box-sizing: border-box;
    container-type: inline-size;
}
@container (width <= 959px) {
    .section-teiki__inner{
        padding: 0 5vw;
    }
}

/* c-teiki-top-img */
.c-teiki-top-img{
    width: 100%;
}
.c-teiki-top-img img{
    display: block;
    width: 100%;
    height: auto;
    vertical-align: bottom;
}


/* c-teiki-heading */
.c-teiki-heading{
    width: fit-content;
    margin: 60px auto 0;
}
.c-teiki-heading.--top80{
    margin-top: 80px;
}
.c-teiki-heading.--top100{
    margin-top: 100px;
}
.c-teiki-heading:has(.c-teiki-heading__title03,.c-teiki-heading__title04,.c-teiki-heading__title05){
    margin: 0;
}

.c-teiki-heading__title01 {
    font-weight: 700;
    text-align: center;
}
.c-teiki-heading__title01 span {
    letter-spacing: .16em;
    color: #418fde;
    background: linear-gradient(transparent 50%, #fff573 50%);

}
.c-teiki-heading__title02{
    font-weight: bold;
    color: #595757;
}
    /* .c-teiki-heading__title01 {
        letter-spacing: 0.1em;
        font-size: 2rem;
        margin-bottom: 0.9375rem;
    }
    .c-teiki-heading__title01 span {
        padding: 0 0.625rem;
    } */



.c-teiki-heading__title02::before{
    content: '';
    display: inline-block;
    width: 73px;
    height: 68px;
    margin-right: 8px;
    vertical-align: middle;
    background-image: url('/img/dcs/teiki/img_kumapin.png');
    background-repeat: no-repeat;
    background-size: cover;
}
.c-teiki-heading__title02::after{
    content: '';
    display: inline-block;
    width: 64px;
    height: 55px;
    margin-left: 16px;
    vertical-align: middle;
    background-image: url('/img/dcs/teiki/img_kaikai.png');
    background-repeat: no-repeat;
    background-size: cover;
}
.c-teiki-heading__title03,
.c-teiki-heading__title04,
.c-teiki-heading__title05{
    font-size: 20px;
    font-weight: 700;
    color: #418fde;
    line-height: 1.2;
    text-align: left;
}
.c-teiki-heading__title03:before,
.c-teiki-heading__title04:before,
.c-teiki-heading__title05:before{
    content: '';
    display: inline-block;
    margin-right: 12px;
    vertical-align: middle;
}
.c-teiki-heading__title03:before{
    width: 76px;
    height: 70px;
    background-image: url('/img/dcs/teiki/icon_offer_01.png');
    background-repeat: no-repeat;
    background-size: cover;
}
.c-teiki-heading__title04:before{
    width: 101px;
    height: 73px;
    background-image: url('/img/dcs/teiki/icon_offer_02.png');
    background-repeat: no-repeat;
    background-size: cover;
}
.c-teiki-heading__title05:before{
    width: 101px;
    height: 70px;
    background-image: url('/img/dcs/teiki/icon_offer_03.png');
    background-repeat: no-repeat;
    background-size: cover;
}

/* @container (width <= 959px) { */
@container (width <= 679px) {

    .c-teiki-heading{
        margin: 8vw auto 0;
    }
    .c-teiki-heading.--top80{
        margin-top: 10.667vw;
    }
    .c-teiki-heading.--top100{
        margin-top: 13.333vw;
    }
    .c-teiki-heading__title01{
        font-size: 5.6vw;
    }
    .c-teiki-heading__title02{
        font-size: 4.5vw;
    }
    .c-teiki-heading__title02::before{
        width: 9vw;
        height: 8.5vw;
        margin-right: .1vw;
    }
    .c-teiki-heading__title02::after{
        width: 8vw;
        height: 7vw;
        margin-left: 2vw;
    }
    .c-teiki-heading__title03,
    .c-teiki-heading__title04,
    .c-teiki-heading__title05{
        font-size: 4.4vw;
    }
    .c-teiki-heading__title03:before,
    .c-teiki-heading__title04:before,
    .c-teiki-heading__title05:before{
        margin-right: 1.6vw;
    }
    .c-teiki-heading__title03:before{
        width: 10.13vw;
        height: 9.333vw;
    }
    .c-teiki-heading__title04:before{
        width: 13.4vw;
        height: 9.73vw;
    }
    .c-teiki-heading__title05:before{
        width: 13.4vw;
        height: 9.333vw;
    }
}
    



/* @media only screen and (min-width: calc(48em + 0.01px)) {

} */

/* c-teiki-img */
.c-teiki-img{
    margin-top: 45px;
}
.c-teiki-img img{
    display: block;
    width: 100%;
    height: auto;
    vertical-align: bottom;
}
@container (width <= 959px) {
    .c-teiki-img{
        overflow-x: scroll;
        overflow-scrolling: touch;
        -webkit-overflow-scrolling: touch;
    }
    .c-teiki-img__price{
        width: 960px;
    }
}
@container (width <= 679px) {
    .c-teiki-img{
        margin-top: 6vw;
    }
    .c-teiki-img__price{
        width: 180vw;
    }
}

/* c-teiki-link01 */
.c-teiki-link01{
    margin-top: 35px;
    padding: 0;
    text-align: center;
}
.c-teiki-link01 a{
    text-decoration: underline;
    line-height: 1.2;
    letter-spacing: .05em;
}
.c-teiki-link01 a::after{
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 5px;
    background-image: url('/img/dcs/teiki/icon_link_blank_blue.png');
    background-repeat: no-repeat;
    background-size: contain;
}

.product-detail .l-main__content .c-teiki-link01 a{
    color: #418fde;
}
@container (width <= 679px) {
    .c-teiki-link01{
        margin-top: 4.667vw;
    }
    .c-teiki-link01 a{
        font-size: 3.6vw;
    }
    .c-teiki-link01 a::after{
        width: 3vw;
        height: 3vw;
        margin-left: 1vw;
    }
}



/* p-box */
.p-box{
    width: 100%;
    margin-top: 40px;
    padding: 30px 45px;
    box-sizing: border-box;
    border: 2px solid #418fde;
    border-radius: 15px;
}
.p-box .c-teiki-heading{
    margin-top: 0;
}
.p-box > p{ 
    margin-top: 20px;
    padding: 0;
    text-indent: 0;
    line-height: 1.6;
}
@container (width <= 679px) {
    .p-box{
        margin-top: 5.333vw;
        padding: 3vw 4vw;
    }
    .p-box > p{
        margin-top: 2.667vw;
        font-size: 3.6vw;
    }

}

/* .c-teiki-tokuten{ */
.c-teiki-tokuten{
    display: flex;
    margin-top: 16px;
    justify-content: space-between;
    /* container-type: inline-size; */
}
.c-teiki-tokuten li{
    flex: 0 0 184px;
}
.c-teiki-tokuten li img{
    display: block;
    width: 100%;
    height: auto;
    vertical-align: bottom;
}
@container (width <= 959px) {
    .c-teiki-tokuten{
        margin-top: 5.333vw;
    }
    .c-teiki-tokuten li{
        flex: 0 0 17.4vw;
    }
}
@container (width <= 679px) {
    .c-teiki-tokuten{
        flex-wrap: wrap;
        justify-content: center;
        gap: 4vw;
    }
    .c-teiki-tokuten li{
        flex: 0 0 35vw;
    }
}

/* c-teiki-notes */
.c-teiki-notes{
    font-size: 14px;
}
@container (width <= 679px) {
    .c-teiki-notes{
        font-size: 3.2vw;
    }
}



/* c-teiki-qa */
.c-teiki-qa{
    margin-top: 40px;
}
.c-teiki-qa__answer{
    width: 100%;
    margin-top: 20px;
}

.c-teiki-qa__answer > dt {
    position: relative;
    display: block;
    width: 100%;
    min-height: 62px;
    padding: 15px 80px;
    text-align: left;
    line-height: 1.6;
    letter-spacing: .1em;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    background-color: #5ba5ef;
    cursor: pointer;
    box-sizing: border-box;
    z-index: 5;
}
.c-teiki-qa__answer > dt::before {
    content: 'Q';
    position: absolute;
    top: 50%;
    left: 30px;
    transform: translateY(-50%);
    display: inline-block;
    width: 30px;
    height: 30px;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    background-color: #fff;
    color: #5ba5ef;
    border-radius: 50%;
}
.c-teiki-qa__answer > dd {
    opacity: 0;
    position: relative;
    padding: 0 20px 0 80px;
    max-height: 0px;
    color: #595757;
    background-color: #e3f9ff;
    box-sizing: border-box;
    overflow: hidden;
    z-index: 3;
    transition: all ease .5s;
}
.c-teiki-qa__answer.is-open dd {
    opacity: 1;
    padding: 20px 20px 20px 80px;
    max-height: 500px;
    line-height: 1.6;
    transition: all ease .5s;

}
.c-teiki-qa__answer > dd a {
    color: #418fde !important;
    text-decoration: underline;
}
.c-teiki-qa__answer > dd::before {
    content: 'A';
    position: absolute;
    top: 50%;
    left: 30px;
    transform: translateY(-50%);
    display: inline-block;
    width: 30px;
    height: 30px;
    /* margin: auto 0; */
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    background-color: #418fde;
    color: #fff;
    border-radius: 50%;
}

@container (width <= 679px) {
    .c-teiki-qa{
        margin-top: 5.333vw;
    }
    .c-teiki-qa__answer{
        margin-top: 2.667vw;
    }

    .c-teiki-qa__answer > dt {
        min-height: 8.267vw;
        padding: 2vw 11vw;
        font-size: 3.6vw;
    }
    .c-teiki-qa__answer > dt::before {
        left: 2.8vw;
        width: 6vw;
        height: 6vw;
        font-size: 3.6vw;
        line-height: 6vw;
    }
    .c-teiki-qa__answer > dd {
        padding: 0 2.667vw 0 11vw;
        font-size: 3.6vw;
        /* line-height: 0; */
    }
    .c-teiki-qa__answer.is-open dd {
        padding: 2.667vw 2.667vw 2.667vw 11vw;
        max-height: 66vw;

    }
    .c-teiki-qa__answer > dd::before {
        left: 2.8vw;
        width: 6vw;
        height: 6vw;
        font-size: 3.6vw;
        line-height: 6vw;
    }
}


/* icon-acordion */
.icon-acordion {
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
    display: block;
    width: 24px;
    height: 24px;
}
.icon-acordion::before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translate(-50%);
    width: 24px;
    height: 3px;
    background-color: #fff;
}
.icon-acordion::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translate(-50%) rotate(90deg);
    width: 24px;
    height: 3px;
    background-color: #fff;
    transition: transform ease .5s;
}
.c-teiki-qa__answer.is-open .icon-acordion::after{
    transform: translate(-50%) rotate(0deg);
}

@container (width <= 679px) {
    .icon-acordion {
        right: 2vw;
        width: 4.2vw;
        height: 4.2vw;
    }
    .icon-acordion::before {
        width: 4.2vw;
        /* height: 3px; */
    }
    .icon-acordion::after {
        width: 4.2vw;
        /* height: 3px; */
    }
}


.is-pc{
    display: block !important;
}
.is-sp{
    display: none !important;
}
/* @media screen and (max-width: 679px) { */
@container (width <= 679px) {
    .is-pc{
        display: none !important;
    }
    .is-sp{
        display: block !important;
    }
}