/*
CSS
---------------------------------------------------------------- */

/* index
-------------------------------- */
#index .frame .title._lv2{
    padding-bottom: 0;
    margin-bottom: 0;

    &::after{
        content: none;
    }
}

#index .frame_flex{
    display: flex;
    flex-direction: column;

    @media only screen and
    (max-width : 767px) {
        gap: 16px;

        .text{
            margin-top: 0;
        }
    }
}

#index .frame h3.title{
    font-size: 2rem;
    margin-bottom: 12px;
    padding-bottom: 0;
    text-align: left;
    border: none;

    @media only screen and
    (max-width : 767px) {
        margin-bottom: 0;
    }
}

#index .frame ._icon{
    display: flex;
    justify-content: flex-start;
    align-items: center;

    &::before{
        flex-shrink: 0;
        content: "";
        display: block;
        background: url(../images/index/icon1.png) no-repeat center top / contain;
        width: 80px;
        height: 80px;
        margin-right: 20px;

        @media only screen and
        (max-width : 767px) {
            margin-right: 0;
        }
    }

    @media only screen and
    (max-width : 767px) {
        flex-direction: column;
        gap: 16px;
    }
}

#index .frame.col2 ._icon::before{
    background: url(../images/index/icon2.png) no-repeat center top / contain;
}
#index .frame.col3 ._icon::before{
    background: url(../images/index/icon3.png) no-repeat center top / contain;
}
#index .frame.col4 ._icon::before{
    background: url(../images/index/icon4.png) no-repeat center top / contain;
}

/* reason
-------------------------------- */
#reason .title._num{
    display: flex;
    align-items: center;
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 20px;

    .circle_number{
        width: 48px;
        height: 48px;
        line-height: 1;
        margin-right: 10px;
        color: #fff;
        background-color: #0068B7;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 2.0rem;
        flex-shrink: 0;

        @media only screen and
        (max-width : 767px) {
            width: 40px;
            height: 40px;
            font-size: 1.8rem;
        }
    }
    .txt{
        text-align: left;
        font-size: 2.4rem;

        @media only screen and
        (max-width : 767px) {
            font-size:2rem;
        }
    }
}

/* information
-------------------------------- */

/* price
-------------------------------- */
#price{
    & .imageMap{
        margin-right: -31px;
        @media only screen and
        (max-width : 767px) {
            margin-right: -10px;
        }
    }

    & table.denwa-table {
        & tbody{
           td{
                font-size: 1.8rem;
                @media only screen and
                (max-width : 767px) {
                    font-size: 1.6rem
                }
            }
        }
    }
}

/* step
-------------------------------- */

/* consumer_protection
-------------------------------- */
.caution_area {
    ._header {
        padding: 15px 40px;
        background: #D14141;
        color: #fff;
        @media only screen and
        (max-width : 767px) {
            padding: 15px;
        }

        ._lv3 {
            display: flex;
            align-items: center;
            justify-content: center;
            padding-left: 0;

            &::before {
                content: "";
                display: inline-block;
                background: url(../images/consumer_protection/caution.svg) no-repeat left center;
                background-size: contain;
                width: 39px;
                height: 34px;
                margin-right: 10px;
                position: relative;
                transform: none;
                border-radius: 0;
                top: 0;
            }
        }
    }
    ._body {
        padding: 23px 40px;
        @media only screen and
        (max-width : 767px) {
            padding: 20px;
        }

        ._lv3::before {
            background-color: #D14141;
        }
        .asterisk._center li {
            justify-content: center;
        }

        @media only screen and
        (max-width : 767px) {
            & .contact_wrap {
                .tel_area {
                    padding-left: 55px;
                    background-size: 50px;
                }
            }
        }
    }
}

/* faq
-------------------------------- */
#question_answer {

    .question:last-of-type {
        border-bottom: 1px solid #DBDBDB;
    }

    .question h2 {
        border-top: 1px solid #DBDBDB;
        position: relative;
        font-weight: 700;
        padding: 28px 40px 28px 56px;
        cursor: pointer;
        font-size: 1.7rem;
        text-align: left;
        margin: 0;

        &::after {
            content: none;
        }
    }
    .question h2 span {
        position: absolute;
        top: 21px;
        left: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 999px;
        width: 40px;
        height: 40px;
        font-weight: 500;
        font-size: 1.8rem;
        line-height: 1;
        background: var(--color-blue);
        color: #fff;
        line-height: 1.5;
    }

    .question h2.qa_clicked {
        margin: 0;
    }
    .question .body {
        display: none;
    }
    .question .body .text {
        position: relative;
        padding: 5px 52px 28px 56px;
        text-align: left;
        margin: 0;
    }
    .question .body .text span {
        position: absolute;
        top: 0px;
        left: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 999px;
        width: 40px;
        height: 40px;
        font-weight: 500;
        font-size: 1.8rem;
        line-height: 1;
        background: #fff;
        color: var(--color-blue);
        border: 1px solid var(--color-blue);
        line-height: 1.5;
    }

    .question .toggle {
        display: inline-block;
        width: 20px;
        height: 20px;
        position: absolute;
        right: 20px;
        top: 30px;
    }
    .question .toggle::before, .question .toggle::after {
        content: "";
        width: 100%;
        height: 2px;
        background: var(--color-blue);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transition: .2s;
    }
    .question .toggle::before {
        transform: translate(-50%, -50%) rotate(90deg);
        -webkit-transform: translate(-50%, -50%) rotate(90deg);
        -ms-transform: translate(-50%, -50%) rotate(90deg);
    }
    .question h2.open .toggle::before {
        transform: translate(-50%, -50%) rotate(0deg);
        -webkit-transform: translate(-50%, -50%) rotate(0deg);
        -ms-transform: translate(-50%, -50%) rotate(0deg);
    }
        
    @media only screen and
    (max-width : 767px) {
        .question h2 {
            padding: 20px 32px 20px 48px;
            font-size: 1.6rem;
        }
        .question h2 span {
            top: 21px;
            width: 36px;
            height: 36px;
            font-size: 1.6rem;
        }
        .question .body .text {
            position: relative;
            padding: 0 0 20px 48px;
            font-size: 1.5rem;
        }
        .question .body .text span {
            width: 36px;
            height: 36px;
            font-size: 1.6rem;
        }

        .question .toggle {
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto 0;
        }
    }
}

/* news
-------------------------------- */
#news {
    & .c-link__news-item {
        border-left: none;
        border-right: none;

        & a {
            background-position: center right 10px;
            padding-left: 10px;
            padding-right: 25px;
            &:hover {
	            background-position: center right 5px;
            }
        }
    }
}

/* contact
-------------------------------- */
 #contact {
    & .title._lv2 {
        padding-bottom: 0;
        margin-bottom: 30px;
        &::after {
            content: none;
        }
    }
    & .frame._gray {
        padding: 30px 38px;
        @media only screen and
        (max-width : 767px) {
            padding: 28px 20px;
        }
    }
    & a.ic_blank {
        position: relative;
        &::after {
            content: "";
            width: 12px;
            height: 12px;
            display: inline-block;
            position: relative;
            top: 0.04em;
            margin: 0 0.3em;
            background: url(../images/common/icon/ic_blank.svg) no-repeat 50%;
            background-size: 12px;
        }
    }
}