@charset "utf-8";

/* ---------------------------------------------------------
キーパーラボ（サービス 解決ページ要素定義）
URL: https://www.keeperlabo.jp/
© I-tac Giken. All Rights Reserved.
------------------------------------------------------------ */
/* アルカリ */
#main1colArea {
    padding-top: 5px;

}
#main1colArea.problem_07 {
    background: url(../img/bg_1col_bot01.png) no-repeat bottom;
    padding: 0 0 5px;

    div.line {
        background-color: #2991b6;
        height: 9px;
        width: 940px;
        margin: 0 auto;
    }
    div.inner {
        width: 100%;
        height: auto;

        .title_before {
            margin: 0 auto;
            width: 100%;
            padding-top: 1rem;
            p.small {
                font-size: 100%;
                font-weight: bold;
                line-height: 1rem;
                width: 840px;
                margin: 0 auto;
            }
            p {
                font-size: 1.65rem;
                font-weight: bold;
                line-height: 2rem;
                width: 840px;
                margin: 0 auto;
            }
            .b_dotted {
                display: block;
                width: 100%;
                height: 1px;
                border-top: 1px dotted #222;
                margin-bottom: 0.2rem;
                width: 840px;
                margin: 0.5rem auto;
            }
        }
        .title {
            background-image: url(../img/service/problem/07-back.png) !important;
            background-position: 0 0 !important;
            background-size: contain !important;
            background-repeat: no-repeat !important;
            background-position: right bottom !important;
            height: 300px !important;
            margin-bottom: 2rem;

            h2 {
                color: #2991b6;
                font-size: 2.2rem;
                font-weight: bold;
                letter-spacing: 1px;
                width: 840px;
                margin: 0 auto;
            }
            h2::before {
                content: '「';
                margin-left: -1rem;
            }
            h2::after {
                content: '」';
            }
            p {
                font-size: 1.2rem;
                letter-spacing: -1px;
                font-weight: bold;
                line-height: 2rem;
                width: 840px;
                margin: 0 auto;
                span {
                    color: #2991b6;
                    font-weight: bold;
                }
            }
            .b_solid {
                display: block;
                height: 1px;
                border-top: 1px solid #222;
                margin-bottom: 0.2rem;
                width: 727px;
                margin-left: 47px;
            }
            p.detail {
                font-size: 100%;
                font-weight: normal;
                letter-spacing: 0;
                width: 700px;
                margin-top: 0.5rem;
                margin-left: 47px;
                line-height: 1rem;
                span {
                    color: #222;
                    font-weight: bold;
                }
            }
            div.img {
                display: flex;
                flex-direction: row;
                width: 600px;
                justify-content: space-between;
                align-items: flex-start;
                margin-top: 0.5rem;
                margin-left: 47px;

                div:nth-child(1) {
                    width: 370px;
                    p:nth-child(1) {
                        font-size: 100%;
                        font-weight: bold;
                        width: 370px;
                        letter-spacing: 1px;
                        line-height: 1rem;
                    }
                    p:nth-child(2) {
                        margin-top: 1rem;
                        font-size: 0.6rem;
                        font-weight: bold;
                        width: 370px;
                        letter-spacing: 1px;
                        line-height: 0.8rem;
                    }
                    p:nth-child(2)::before {
                        content: '※';
                    }
                }
                div:nth-child(2) {
                    width: 220px;
                    height: auto;
                    object-fit: cover;
                    img {
                        width: 100%;
                        height: auto;
                    }
                }
            }
        }
        .content-wrap {
            background: -webkit-linear-gradient(to bottom, #fff 40%, #d2e8ef) !important;
            background: linear-gradient(to bottom, #fff 40%, #d2e8ef) !important;
            width: 100%;
            height: auto;
        }
        .content {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-start;
            width: 840px;
            margin: 1rem auto 0;
            div.item1,
            div.item2 {
                width: 59%;
                display: flex;
                flex-direction: column;

                .before {
                    display: flex;
                    flex-direction: row;
                    justify-content: flex-start;
                    align-items: center;
                    width: 100%;

                    p {
                        font-size: 0.90rem;
                        width: auto;
                        margin: 0 0.5rem 0 0 !important;
                    }
                    img {
                        height: 1rem;
                        width: auto;
                    }
                }
                .inner {
                    background: #eee !important;
                    padding: 0.5rem !important;
                    width: calc(100% - 1rem);
                    height: 225px;
                    h3 {
                        display: flex;
                        align-items: center;
                        background: #fff!important;
                        padding: 0.5rem !important;
                        font-size: 1.65rem;
                        font-weight: bold;
                        span {
                            font-size: 0.65rem;
                            font-weight: bold;
                        }
                    }
                    p {
                        font-size: 0.75rem;
                        width: 100%;
                        line-height: 1.2rem;
                        margin-top: 0.5rem;
                        margin-bottom: 0.5rem;
                    }
                    p.catch {
                        font-size: 0.9rem;
                    }
                    ul.item1 {
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        li.times {
                            background: #dedede;
                            padding: 0.5rem;
                            font-size: 0.75rem;
                            font-weight: bold;
                            margin-right: 0.5rem;
                        }
                        li.price ul {
                            display: flex;
                            flex-direction: row;
                            align-items: center;
                            border: none;
                            padding: 0;
                            background: none;
                            li:nth-child(1) {
                                background: #fff;
                                border: 1px solid #222;
                                padding: 0.2rem;
                                font-size: 1.15rem;
                                font-weight: bold;
                                margin-right: 0;
                            }
                            li:nth-child(2) {
                                background: none;
                                font-size: 0.6rem;
                                font-weight: bold;
                            }
                        }
                    }
                    ul.item2 {
                        display: flex;
                        flex-direction: row;
                        justify-content: space-between;
                        align-items: center;
                        line-height: 1rem;
                        width: 250px;

                        li:nth-child(1) {
                            font-size: 0.65rem;
                            font-weight: bold;
                            margin-right: 0.5rem;
                        }
                        li:nth-child(1)::before {
                            content: '※';
                        }
                        li:nth-child(2) {
                            background: #fff;
                            border: 1px solid #222;
                            padding: 0.2rem;
                            font-size: 1.15rem;
                            font-weight: bold;
                            width: auto;
                        }
                    }
                    p.note {
                        padding: 0;
                        margin: 0;
                        width: 250px;
                        text-align: right;
                        font-size: 0.6rem;
                    }
                    p.detail {
                        font-weight: normal;
                        line-height: 1rem;
                        letter-spacing: -0.5px;
                    }
                    div.img {
                        display: flex;
                        flex-direction: row;
                        justify-content: space-between;
                        width: 100%;
                        div:nth-child(1) {
                            width: 69%;
                            height: auto;
                            /*
                            ul {
                                justify-content: space-between;
                                width: calc(100% - 0.5rem);
                                li:nth-child(1) {
                                    background: none;
                                    padding:0.5rem 0;
                                    font-size: 0.75rem;
                                }
                                li:nth-child(1)::before {
                                    content: '※';
                                }
                                li:nth-child(2) {
                                    background: #fff;
                                    border: 1px solid #222;
                                    padding: 0.5rem;
                                    font-size: 1.15rem;
                                    font-weight: bold;
                                }
                            }
                            */
                            /*
                            p.note {
                                font-size:  0.6rem;
                                text-align: right;
                                margin: 0!important;
                                width: calc(100% - 0.5rem);
                            }
                            */
                        }
                        div:nth-child(2) {
                            width: 30%;
                            height: auto;
                            img {
                                margin-top: 0.5rem;
                                width: 100%;
                                height: auto;
                            }
                        }
                    }
                }
            }
            div.item2 {
                width: 40%!important;
                padding-bottom: 2rem;

                h3 {
                    margin-bottom: 0.5rem;
                }
                .img {
                    background-image: url(../img/service/problem/07-img-2.png) !important;
                    background-position: 0 0 !important;
                    background-size: contain !important;
                    background-repeat: no-repeat !important;
                    background-position: right top !important;
                    height: 156px !important;
                }
                .inner {
                    p {
                        margin-top: 0;
                    }
                    p.times {
                        background: #dedede;
                        padding: 0.5rem;
                        font-size: 0.75rem;
                        font-weight: bold;
                        margin-top: 0;
                        margin-left: 0;
                        width: 9rem;
                    }
                    ul.item1 {
                        justify-content:flex-start !important;
                        width: 170px;
                        li:nth-child(1) {
                            background: #fff !important;
                            border: 1px solid #222;
                            padding: 0.2rem !important;
                            font-size: 1.15rem !important;
                            font-weight: bold;
                            margin-right: 0;
                        }
                        li:nth-child(1)::before {
                            content: none;
                        }
                        li:nth-child(2) {
                            background: none !important;
                            border: 0 !important;
                            font-size: 0.6rem !important;
                            font-weight: bold;
                            padding: 0 !important;
                        }
                    }
                    ul.item2 {
                        line-height: 1rem;
                        flex-direction: column;
                        justify-content: flex-start;
                        align-items: flex-start;
                        width: 170px;
                        li:nth-child(1) {
                            margin: 0.5rem 0 0 0;
                        }
                        li:nth-child(1)::before {
                            content:none;
                        }
                        li:nth-child(2) {
                            background: none;
                            padding: 0;
                            border: none;
                            ul.price {
                                display: flex;
                                flex-direction: row;
                                align-items: center;
                                line-height: 1rem;
                                li:nth-child(1) {
                                    margin:0;
                                    background: #fff;
                                    border: 1px solid #222;
                                    padding: 0.2rem;
                                    font-size: 1.15rem;
                                    font-weight: bold;
                                    width: auto;
                                }
                                li:nth-child(2) {
                                    font-size: 0.6rem;
                                }
                            }
                        }
                    }
                    p.option {
                        font-size: 0.75rem;
                        margin-bottom: 0.2rem !important;
                    }
                    p.option::before {
                        content: none;
                    }
                }
            }
        }
    }
}

/* メッキ */
#main1colArea.problem_18 {
    margin-top: 1.8rem;
    padding-top: 3px;
}

section#problem_18 {
    background: -webkit-linear-gradient(to bottom, #fff 40%, #eee) !important;
    background: linear-gradient(to bottom, #fff 40%, #eee) !important;

    .inner {
        margin: 1.5rem auto 0;
        background-image: url(../img/service/problem/18-back.png)!important;
        background-size: 325px !important;
        background-repeat: no-repeat!important;
        background-position: right top!important;
        height: 210px!important;

        .new_icon {
            display: inline-block;
            font-size: 1.2rem;
            font-weight: bold;
            margin-right: 0.2rem;
            position: absolute;
            margin-left: 10px;
            margin-top: -30px;
            color: #fff;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: #e60012;
            text-align: center;
            line-height: 48px;
            span {
                display: block;
                font-size: 6px;
                font-weight: bold;
                line-height: 7px;
                color: #fff;
                position: absolute;
                margin-top: -15px;
                margin-left: 13px;
            }
        }
        /* 太罫線 */
        .line {
            height: 5px;
            width: 100%;
            margin: 0 auto;
            background: #9a8ec3;
        }
        .title {
            width: 840px;
            margin: 1rem auto 0;
            /* 罫線 */
            .b_dotted {
                display: block;
                width: 500px;
                height: 1px;
                border-top: 1px dotted #222;
                width: 612px;
            }
            .b_solid {
                display: block;
                width: 555px;
                height: 1px;
                border-top: 1px solid #222;
                width: 618px;
            }
            p {
                margin-top: 0;
                font-size: 1.65rem;
                font-weight: bold;
                letter-spacing: 0 !important;
                padding: 0 !important;
            }
            h2 {
                font-size: 2.2rem !important;
                font-weight: bold;
                letter-spacing: 1px;
                line-height: 3.2rem;
                color: #4c4398 !important;
                padding: 0 0 0 0.2rem !important;
                margin: 0 !important;
                border-left: none !important;
            }
            h2::before {
                content: '「';
                margin-left: -1.2rem;
            }
            h2::after {
                content: '」';
            }
            .wrap {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                height: auto;
                background: none;
                position: absolute;
                top: 75px;
                width: 565px;
                ul {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    margin-top: 65px;
                    height: 2rem;
                    li:nth-child(1) {
                        font-size: 100%;
                        font-weight: bold;
                    }
                    li:nth-child(2) {
                        ul {
                            display: flex;
                            flex-direction: row;
                            align-items: center;
                            justify-content: flex-start;
                            height: 2rem;
                            position: absolute;
                            top: 0;
                            left: 100px;
                            li:nth-child(1) {
                                font-size: 1.2rem;
                                font-weight: bold;
                                padding: 0.5rem;
                                background: #fff;
                                margin-right: 0.2rem;
                            }
                            li:nth-child(2) {
                                font-size: 0.6rem;
                                font-weight: bold;
                            }
                        }
                    }
                }
                img {
                    width: 180px;
                    height: auto;
                    object-fit: cover;
                }
            }
        }
    }
}