@charset "UTF-8";

/*============================
	about 
============================*/


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

@media screen and (max-width:767px) {
    .about__txt {
        text-align: left;
    }
}


/*============================
	worry 
============================*/
.worry {
    background: url(../img/feature/worry_bg.png) no-repeat center center/cover;
}

.worry__item {
    width: 24%;
    max-width: 285px;
    padding: 35px 3%;
    background: linear-gradient(90deg, #0bbafb, #4285ec);
    color: #fff;
}

.worry__atc {
    margin-bottom: 80px;

    &:last-child {
        margin-bottom: 0;
    }
}

.worry__txtwrap {
    width: 50%;
}

.worry__img {
    width: 45%;
    max-width: 530px;
}

.worry__subject {
    padding: .5em .5em .5em 1em;
    background: #fff;
    position: relative;

    &::before {
        content: "";
        position: absolute;
        width: 5px;
        height: 100%;
        background: linear-gradient(90deg, #0bbafb, #4285ec);
        left: 0;
        top: 0;
    }
}

.worry__atc:nth-child(even) {
    flex-direction: row-reverse;
}

@media screen and (max-width:1024px) {
    .worry__item {
        width: 24%;
        padding: 25px 1%;
    }

    .worry__atc {
        margin-bottom: 60px;
    }

    .worry__txtwrap {
        width: 50%;
    }

    .worry__img {
        width: 45%;
    }

    .worry__subject {
        padding: .5em .5em .5em 1em;

        &::before {
            width: 5px;
            height: 100%;
        }
    }

}

@media screen and (max-width:767px) {
    .worry__item {
        width: 100%;
        max-width: 350px;
        margin: 0 auto 10px;
        padding: 30px 5%;
    }

    .worry__num {
        font-size: 1.4rem;
    }

    .worry__atc {
        margin-bottom: 60px;
    }

    .worry__txtwrap {
        width: 100%;
        margin-bottom: 30px;
    }

    .worry__img {
        width: fit-content;
        margin: 0 auto;
    }

    .worry__subject {
        padding: .5em .5em .5em 1em;

        &::before {
            width: 5px;
            height: 100%;
        }
    }
}


/*============================
	compare 
============================*/
.compare {
    .inner__large {
        max-width: 1680px;
    }
}

.comp__tbl {
    width: 100%;

    & th {
        padding: 1em .5em;
        background: #969696;
        color: #fff;
        line-height: 1.5;
        vertical-align: middle;
        border: solid 1px #d2d2d2;
        position: relative;

        .logo {
            max-width: 170px;
            margin: 0 auto;
            display: block;
        }

        &:first-child {
            background: #4285ec;
        }

        &:nth-child(2) {
            &::before {
                content: "";
                position: absolute;
                width: calc(100% + 6px);
                height: calc(100% + 1em);
                left: 50%;
                transform: translate(-50%);
                bottom: 0;
                background: #d0eafe;
                border: solid 6px #fd644f;
                border-bottom: none;
                border-radius: 20px 20px 0 0;
                z-index: 1;

            }

            & img {
                position: relative;
                z-index: 9;
            }

        }
    }

    & td {
        padding: 1em .5em;
        line-height: 1.5;
        border: solid 1px #d2d2d2;
        text-align: center;
        vertical-align: middle;
        font-weight: bold;
        position: relative;

        &:nth-child(2) {
            border-left: solid 6px #fd644f;
            border-right: solid 6px #fd644f;
        }
    }

    .color-bl {
        color: #4285ec;
    }

    & tr:last-child td:nth-child(2) {
        border: none;

        & span {
            position: relative;
            z-index: 9;
        }

        &::before {
            content: "";
            position: absolute;
            width: calc(100% + 6px);
            height: calc(100% + 1em);
            left: 50%;
            transform: translate(-50%);
            top: 0;
            background: #fff;
            border: solid 6px #fd644f;
            border-top: none;
            border-radius: 0 0 20px 20px;
            z-index: 1;


        }
    }
}

@media screen and (max-width:1024px) {
    .comp__tbl {

        & th {
            padding: 1em .5em;

            .logo {
                max-width: 120px;
                margin: 0 auto;
            }

            &:nth-child(2) {
                &::before {
                    width: calc(100% + 6px);
                    height: calc(100% + 1em);
                    border: solid 6px #fd644f;
                    border-radius: 20px 20px 0 0;
                    border-bottom: none;
                }
            }
        }

        & td {
            padding: 1em .5em;

            &:nth-child(2) {
                border-left: solid 6px #fd644f;
                border-right: solid 6px #fd644f;
            }
        }



        & tr:last-child td:nth-child(2) {

            &::before {
                width: calc(100% + 6px);
                height: calc(100% + 1em);
                border: solid 6px #fd644f;
                border-top: none;
                border-radius: 0 0 20px 20px;

            }
        }
    }

}

@media screen and (max-width:767px) {
    .comp__tblwrap {
        width: 106%;
        overflow: hidden;
        overflow-x: scroll;
        padding: 2em 0;

    }

    .comp__tbl {
        min-width: 950px;
        font-size: 1.4rem;

        & th {
            padding: 1em .5em;

            .logo {
                max-width: 120px;
                margin: 0 auto;
            }

            &:nth-child(2) {
                &::before {
                    width: calc(100% + 6px);
                    height: calc(100% + 1em);
                    border: solid 6px #fd644f;
                    border-radius: 20px 20px 0 0;
                    border-bottom: none;
                }
            }
        }

        & td {
            padding: 1em .5em;

            &:nth-child(2) {
                border-left: solid 6px #fd644f;
                border-right: solid 6px #fd644f;
            }
        }



        & tr:last-child td:nth-child(2) {

            &::before {
                width: calc(100% + 6px);
                height: calc(100% + 1em);
                border: solid 6px #fd644f;
                border-top: none;
                border-radius: 0 0 20px 20px;

            }
        }
    }

}


/*============================
	data 
============================*/

.data {
    background: url(../img/feature/data_bg.png) no-repeat center center/cover;
}

.data__items {
    & img {
        width: 19.5%;
        margin-bottom: 10px;
    }
}


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

    .data__items {
        & img {
            width: 19.5%;
            margin-bottom: 10px;
        }
    }

}

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

    .data__items {
        display: flex;

        & img {
            width: 49%;
            margin-bottom: 10px;
        }
    }
}


/*============================
 case
============================*/

.case__bnrs {
    & img {
        position: relative;
        width: 16%;
        margin-bottom: 20px;
    }
}

.case__atc {
    width: 32%;
    max-width: 366px;

    & a {
        display: block;
        width: 100%;
        height: 100%;

        &:hover {
            .case__img img {
                transform: scale(1.05);
            }
        }
    }
}

.case__cat {
    margin: 1em 0 .5em;
    width: fit-content;
    white-space: nowrap;
    line-height: 32px;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(45deg, #00b1e0, #0073fc);
    padding: 0 1.5em;
}

.case__h3 {
    font-weight: 500;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}


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

    .case__bnrs {
        & img {
            width: 16%;
            margin-bottom: 10px;
        }
    }

    .case__atc {
        width: 32%;

    }

    .case__cat {
        margin: 1em 0 .5em;
        line-height: 28px;
        border-radius: 14px;
    }

}

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

    .case__ttl {
        .font-en {
            font-size: 6rem;
        }

    }

    .case__bnrs {
        display: flex;

        & img {
            width: 32%;
            margin-bottom: 10px;
        }
    }

    .case__atc {
        width: 100%;
        margin: 0 auto 40px;

        &:last-child {
            margin-bottom: 0;
        }

    }

    .case__cat {
        margin: 1em 0 .5em;
        line-height: 28px;
        border-radius: 14px;
    }
}