@charset "UTF-8";

/* CSS Document */
:root {
    --deepblue: #293d4f;
    --pink: #da429f;
}

.flex-box {
    display: flex;
    justify-content: space-between;
}

.sec-feature .caution {
    font-size: 10px;
    letter-spacing: normal;
    margin: 0;
    background: #778bb32b;
    padding: min(3vw, 20px) min(5.3vw, 20px);
    margin: min(5.3vw, 40px);
}

.flex-box .explain__box {
    width: 50%;
}

.flex-box .explain__box:not(:last-child) {
    margin-right: 20px;
}

.section__heading {
    font-size: min(5vw, 30px);
}


.sec-feature .feature-point-content .feature-point__caution {
    font-size: 10px;
    letter-spacing: normal;
    margin: 14px;
    line-height: 1.4;
}

.sec-feature {
    color: var(--deepblue);
    font-size: min(3.6vw, 14px);
    background-image: url("../../../../../../assets/images/pages/f-static/product-detail/22218_bg02s.jpg");
    background-color: linear-gradient(to bottom, #efeff8 0%, #ebf3fb 70%, #efeff8 70%, #ebf3fb 100%);
    background-size: contain;
    margin: 0;
}

.feature-point__box .feature-point__img-box {
    padding: 0 min(5.3vw, 20px) 20px;
}

.section__heading {
    margin-top: -60px;
    z-index: 1;
    position: relative;
}

.sec-feature img {
    width: 100%;
}

.main-banner {
    background-image: url("../../../../../../assets/images/pages/f-static/product-detail/22218_bg01s.png");
    background-size: contain;
    height: 165vw;
    background-position: bottom;
}

.main-banner .main-banner__ttl01 {
    width: 90%;
    margin: 0 auto 10px;
    display: block;
}

.feature-point__titlebox {
    display: flex;
    padding: 30px min(5.3vw, 20px) 0;
}

.feature-point__num {
    width: min(10vw, 60px);
    height: min(10vw, 60px);
    background-image: url("../../../../../../assets/images/pages/f-static/product-detail/22218_feature-list_icon01.png");
    background-size: contain;
    background-repeat: no-repeat;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: serif;
    font-size: min(6vw, 35px);
    margin-right: min(2vw, 20px);
    text-shadow: 1px 1px 2px #a1a9d1;
}



.main-banner__txt {
    font-family: serif;
    font-weight: 600;
    padding: 0 min(5.3vw, 20px) 20px;
    line-height: 1.8;
    text-shadow: 1px 1px 2px #ffffff;
}

.feature-point__box .feature-point__text-box .feature-point__img-box {
    padding: 0 min(5.3vw, 20px) 20px;
}

.feature-point__text-box {
    padding: 0 min(5.3vw, 20px) 20px;
}

.feature-point__text-box .feature-point__img {
    margin-top: 20px;
}

.feature-point__toptitle {
    font-size: min(4.7vw, 18px);
    margin-bottom: 20px;
    line-height: 1;
}

.feature-point__toptitle span {
    font-size: min(2.6vw, 10px);
}


.sec-feature .feature-point__container {
    padding-bottom: 20px;
    background: #fff;
    /* background:
        -webkit-radial-gradient(0 100%, circle, #ffffff00 20px, #fff 20px, #fff 21px),
        -webkit-radial-gradient(100% 100%, circle, #ffffff00 20px, #fff 20px, #fff 21px),
        -webkit-radial-gradient(100% 0, circle, #ffffff00 20px, #fff 20px, #fff 21px),
        -webkit-radial-gradient(0 0, circle, #ffffff00 20px, #fff 20px, #fff 21px); */
    background-position: bottom left, bottom right, top right, top left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    position: relative;
}

.sec-feature .feature-point-content .feature-point {
    position: relative;
}

.sec-feature .feature-point-content .feature-point::before {

    /* content: "";
    top: -1px;
    left: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    position: absolute; */

    /* background:
        -webkit-radial-gradient(0 100%, circle, #ffffff00 20px, #325a7d 20px, #325a7d 21px),
        -webkit-radial-gradient(100% 100%, circle, #ffffff00 20px, #325a7d 20px, #325a7d 21px),
        -webkit-radial-gradient(100% 0, circle, #ffffff00 20px, #325a7d 20px, #325a7d 21px),
        -webkit-radial-gradient(0 0, circle, #ffffff00 20px, #325a7d 20px, #325a7d 21px); */
    /* background: -webkit-radial-gradient(0 100%, circle, #ffffff00 20px, #325a7d 21px), -webkit-radial-gradient(100% 100%, circle, rgba(204, 0, 0, 0) 20px, #325a7d 21px), -webkit-radial-gradient(100% 0, circle, rgba(204, 0, 0, 0) 20px, #325a7d 21px), -webkit-radial-gradient(0 0, circle, rgba(204, 0, 0, 0) 20px, #325a7d 21px); */
    background-position: bottom left, bottom right, top right, top left;
    background-size: 51% 50%;
    background-repeat: no-repeat;
}

.sec-feature .feature-point__container::before {
    position: absolute;
    border: 1px solid #325a7d;
    content: "";
    top: 4px;
    bottom: 4px;
    left: 4px;
    right: 4px;
    z-index: 1;
    mix-blend-mode: darken;
}

.feature-point__text-box a {
    border: 1px solid #585564;
    display: block;
    width: 100%;
    margin-top: 1rem;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
    font-size: 16px;
    position: relative;
    z-index: 3;
}

.feature-point__text-box a:hover {
    background: #000;
    color: #fff;
    transition: 0.5s;
}

.sec-feature .feature-point-content {
    padding: 0 min(5.3vw, 40px);
}

.sec-feature .feature-point-content .feature-point__title {
    color: var(--pink);
    font-size: min(4.5vw, 18px);
    margin: 0;
    line-height: 1.4;
}

.sec-feature .feature-point-content .feature-point__text {
    line-height: 1.6;
    font-size: min(3.7vw, 14px);
}

.explain {
    padding: min(3vw, 20px) min(5.3vw, 20px);
    background: #f5f6f9;
    margin: 0 min(5.3vw, 40px);
}

.explain__box .explain__image {
    width: 100%;
}

.explain__image {
    width: calc(50% - 20px);
    margin-right: 20px;
}

.explain__text {
    font-size: min(2.9vw, 13px);
    width: 50%;
}

.explain__box .explain__text {
    width: 100%;
}

/*ここからPC*/
@media (min-width: 768px) {
    .sec-feature {
        background-image: url("../../../../../../assets/images/pages/f-static/product-detail/22218_bg03.jpg");
        background-size: cover;
    }

    .main-banner {
        background-image: url("../../../../../../assets/images/pages/f-static/product-detail/22218_bg01.png");
        max-width: 1280px;
        margin: 0 auto;
        height: 600px;
        background-position: right 0 top 40px;
        position: relative;
        background-size: 63%;
        padding: 0 40px;
    }

    .main-banner__txt {
        padding: 0;
        font-size: 16px;
        width: 42%;
        position: absolute;
        bottom: 180px;
    }

    .feature-point__titlebox {
        display: flex;
        padding: 20px 20px 0;
        align-items: center;
    }

    .feature-point__toptitle {
        margin-bottom: 0;
        line-height: 1.4;
    }

    .main-banner .main-banner__ttl01 {
        width: 35%;
        position: absolute;
        top: 80px;
        left: 20px;
    }

    .flex-box-pc {
        display: flex;
        justify-content: space-between;
    }


    .feature-point__box .feature-point__img-box {
        width: 50%;
        padding: 0;
    }

    .feature-point__box {
        padding: 20px;
    }

    .sec-feature .feature-point-content.column02 .feature-point__text-box {
        padding: 0;
        width: calc(50% - 10px);
        margin-left: 10px;
    }

    .sec-feature .feature-point-content.column03 .feature-point__text-box {
        padding: 0;
        margin-top: 20px;
    }

    .feature-point-content.column03 img {
        object-fit: contain;
        height: 288px;
    }

    .feature-point__img.explain img {
        height: 109px;
    }

    .feature-point__text-box .feature-point__img {
        margin-top: 40px;
    }

    .sec-feature .feature-point-content .feature-point {
        width: calc(100% / 3 - 10px);
    }

    .sec-feature .feature-point__container {
        height: 100%;
    }

    .sec-feature .feature-point-content .feature-point__caution {
        font-size: 10px;
        letter-spacing: 0;
        line-height: 1.4;
        margin: 0 20px;
    }

    .sec-feature {
        margin-top: 0;

    }

    .explain {
        margin: 20px 0 0;
    }

    .sec-feature__image {
        margin: 0;
    }

    .sec-feature .feature-point-content {
        padding: 0 40px;
        max-width: 1280px;
        margin: 40px auto;
        justify-content: space-between;
        align-items: stretch;
        padding: 0 10px;
    }

    .sec-feature .feature-point-content.column02 .feature-point {
        width: calc(100% / 2 - 10px);
        margin-right: 10px;
    }

    .sec-feature .feature-point-content.column02 .feature-point:last-child {
        margin-right: 0;
        margin-left: 10px;
    }

    .sec-feature .feature-point-content .feature-point {
        margin: 0;
    }

    .sec-feature .caution {
        max-width: 1280px;
        margin: 0 auto;


    }
}