@charset "utf-8";

:root {
    --mainColor:#6c3b86;
    --subColor:#be8dc9;;
    --subColor2:#fdf5ff;
}

.pc- {
    display: block;
}

.sp- {
    display: none;
}

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

    .pc- {
        display: none;
    }
}

.u-img--100 {
    width: 85%;
    margin: 0 auto;
}
.u-img--100 img {
    width: 100%;
}

.lead-box {
    margin: 2em 80px 1em;
}
.lead-box__h3{
    background: var(--subColor);
    color: #fff;
    font-weight: bold;
    display: block;
    padding: 20px;
    width: 80%;
    margin: 0 auto 1.5em;
    text-align: center;
}

.lead-box__title {
    font-size: 22px;
    margin-bottom: 32px;
    color: var(--mainColor);
    text-align: center;
}

.lead-box__sub-title {
    font-size: 18px;
    margin-bottom: 32px;
    color: var(--mainColor);
    text-align: center;
    line-height: 1.5em;
}

.lead-box__text {
    margin: 20px;
    font-size: 16px;
    text-align: center;
    margin-bottom: 40px;
}
.lead-box__link {
    display: block;
    text-decoration: underline;
    margin-bottom: 1em;
}

.overview-box {
    margin: 0 auto 56px auto;
    font-size: 18px;
    width: 86%;
}

.overview-box__lead  {
    margin-bottom: 1em;
}

.overview-box__lead a {
    text-decoration: underline;
}

.overview-box dt {
    margin-bottom: 16px;
    margin-top: 16px;
    padding-left: 8px;
    font-weight: bold;
    /* border-left: 8px solid var(--mainColor); */
}
.overview-box dt::before {
    content: "";
    width: 21px;
    height: 21px;
    background: url(/img/usr/cp/etc/241001_clearturn_present_icon.png);
    background-size: cover;
    display: inline-block;
    margin: 0px 6px -2px 0px;
}

.overview-box dd {
    margin-left: 16px;
    margin-bottom: 2em;
}

.cp-detail {
    margin: 40px 20px 60px;
}
.cp-detail__lead {
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
    font-weight: bold;
}
.cp-detail__prize {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}
.cp-detail__note {
    font-size: 14px;
}
.cp-detail__head {
    width: 75%;
}
.cp-detail__pairs {
    width: 20%;
}


.t-caution {
    display: block;
    margin-top: 1em;
    font-size: 12px;
}
.t-caution span {
    display: block;
    padding-left: 1em;
    text-indent: -1em;
}

.block-present {
    width: 100%;
    margin-top: 1em;
    margin: 1.5em auto 0;
    border-radius: 20px;
    background-color: var(--subColor2);
}

.block-present__inner {
    padding: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.block-present__img {
    width: 50%;
    margin-right: 2em;
}

.block-present__img img {
    background: #fff;
    width: 100%;
}

.block-present__lead {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 1em;
}

.block-present__text {
    width: 50%;
}

.block-present__text p {
    text-indent: -1em;
    padding-left: 1em;
    margin-bottom: 1em;
}

.cw-prod-ttl-main {
    font-size: 20px;
    font-weight: normal;
    letter-spacing: 0.01em;
    line-height: 1.5;
    text-align: center;
    margin-top: 80px;
}

.btn-wrapper {
    margin-top: 20px;
}
.btn-square {
    display: block;
}
.btn-square a {
    display: flex;
    border: 1.5px solid #b1b3b4;
    width: fit-content;
    padding: 1em 2em;
    color: inherit;
    text-align: center;
    transition: .5s;
    align-items: center;
    position: relative;
}
.btn-square a::after {
    display: block;
    content: "";
    width: 10px;
    height: 10px;
    border-top: 1px solid;
    border-right: 1px solid;
    rotate: 45deg;
    position: absolute;
    right: 10%;
    top: 50%;
    transform: translateY(-50%);
}
.btn-square a:hover{
    opacity: .5;
    transition: .5s;
}
.btn-square a span {
    width: 16px;
    margin-left: 1em;
}
.btn-square a span img{
    width: 100%;
}

.items-btn {
    display: inline-block;
    width: 60%;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
    color: inherit;
    position: relative;
    transition: .5s;
}
.items-btn::after {
    display: block;
    content: "";
    width: 10px;
    height: 10px;
    border-top: 1px solid;
    border-right: 1px solid;
    rotate: 45deg;
    position: absolute;
    right: 10%;
    top: 50%;
    transform: translateY(-50%);
}
.items-btn:hover{
    opacity: .5;
    transition: .5s;
}

.swiper-slide {
    transition: .7s;
    cursor: pointer;
}
.swiper-slide:hover {
    opacity: .5;
}

.swiper-button-prev:after, .swiper-button-next:after {
    color: var(--mainColor);
}
    
.anchor {
    margin-top: -200px;
    padding-top: 200px;
}

@media screen and (max-width: 759px) {
    .u-img--100 {
        width: 100%;
        margin: 0 auto;
    }
    p{
        padding-bottom: .3em;
    }
    .product .p-product__header {
        margin: 30px 0 0;
        padding:0;
    }
    .lead-box {
        margin: 2em 4.2%;
        /*border-bottom:2px solid #ccc;*/
    }
    .lead-box__h3{
        font-size: 4.5vw;
        line-height: 1.5; 
    }

    .lead-box__title {
        margin: 0 0 16px;
        color: var(--mainColor);
        text-align: center;
    }

    .lead-box__title strong {
        font-size: 4.3vw;
        color: var(--mainColor);
    }

    .lead-box__sub-title {
        font-size: 16px;
    }

    .lead-box__text {
        margin: 1em 0 1.5em;
    }

    .lead-box__link {
        font-size: 13px;
        text-align: center;
    }

    .lead-box__bg {
        background-color: #F2F9FF;
        padding: 20px;
        text-align: center;
        width: 80%;
        margin: 0 auto 30px auto;
    }

    .overview-box {
        margin-bottom: 32px;
        width: 100%;
        font-size: 15px;
    }

    .overview-box dt {
        margin-bottom: 16px;
        padding-left: 8px;
        font-weight: bold;
        /* border-left: 8px solid var(--mainColor); */
    }

    .overview-box dd {
        margin-left: 16px;
    }

    .cp-detail {
        margin: 40px 0 60px;
    }

    .cp-detail__prize {
        align-items: end;
        margin-bottom: 1em;
    }
    .cp-detail__note {
        font-size: 12px;
    }

    .t-caution {
        display: block;
        margin-top: 2em;
        font-size: 12px;
    }

    .block-present {
        background-color: var(--subColor2);
    }

    .block-present__inner {
        padding: 1em 1.5em 1.5em;
        margin-top: 2em;
        display: flex;
        flex-direction: column;
    }

    .block-present__img {
        width: 100%;
        margin: 0 auto .5em;
    }

    .block-present__img img {
        width: 100%;
    }

    .block-present__text {
        width: 100%;
        margin-top: 20px;
    }

    .block-present__lead {
        font-size: 16px;
    }

    .cw-prod-ttl-main {
        font-size: 5vw;
        font-weight: normal;
        letter-spacing: 0.01em;
        line-height: 1.5;
        text-align: center;
        margin-top: 40px;
        padding-bottom: 24px;
    }
    .btn-square a {
        display: flex;
        border: 1.5px solid #b1b3b4;
        width: 78vw;
        padding: .8em;
        color: inherit;
        transition: .5s;
        align-items: center;
        justify-content: center;
    }
    .btn-square a span {
        width: 10vw;
        margin-left: 1em;
    }
    .items-btn {
        width: 80%;
    }

    .anchor {
        margin-top: -100px;
        padding-top: 100px;
    }
    
}