@charset "utf-8";

/* ---------------------------------------------------------
キーパーラボ（サービス コーティングページ要素定義）
URL: https://www.keeperlabo.jp/
© I-tac Giken. All Rights Reserved.
------------------------------------------------------------ */
#mattexture {
    width: 946px;
    background: url(../img/bg_1col_top01.png) no-repeat top;
    padding: 5px 0 0;
    clear: both;
    margin: 0 0 15px;

    div.wrap {
        background: url(../img/bg_1col_bot01.png) no-repeat bottom;
        padding: 0 0 3px;

    }
    div.article_body {
        clear: both;
        background: url(../img/bg_1col_mid01.png) repeat-y;
        position: relative;

    }
    .inner {
        width: calc(100% - 6px);
        margin: 0 auto;

        article {
            background-image: url(../img/service/coating/mattexture/img-back.png);
            background-repeat: no-repeat;
            background-position: 2px -80px;
            background-size: contain;
            height: 1545px;
            overflow: hidden;
            width: 936px;

            .title {
                width: 800px;
                margin: 32px 0 0 80px;

                p {
                    display: inline-block;
                    font-size: 1.65rem;
                    font-weight: bold;
                    color: #fff;
                    background: #222;
                    padding: 8px;
                    letter-spacing: 1px;
                    margin-bottom: 8px;
                }
                h2 {
                    font-size: 2.8rem;
                    font-weight: bold;
                    letter-spacing: 6px;
                }
                div {
                    display: flex;
                    flex-direction: row;
                    justify-content: flex-start;
                    align-items: flex-start;
                    p.logo {
                        color: #222;
                        background: none;
                        margin: 0 8px;
                        padding: 0;

                        span {
                            display: block;
                            padding-left: 120px;
                            font-size: 0.6rem;
                            font-weight: bold;
                            letter-spacing: 5px;
                        }
                        span::before {
                            content:'【';
                        }
                        span::after {
                            content: '】';
                        }
                    }
                    img {
                        height: 32px;
                        width: auto;
                    }
                }
            }
            .content {
                width: 480px;
                margin: 440px 0 0 80px;

                h3 {
                    font-size: 1.8rem;
                    font-weight: bold;
                    line-height: 2.8rem;
                    letter-spacing: 1px;
                    margin-bottom: 1rem;
                    span {
                        display: block;
                    }
                }
                p {
                    font-size: 0.9rem;
                    font-weight: bold;
                    letter-spacing: 1px;
                    line-height: 1.8rem;
                    width: 400px;
                    white-space: break-spaces;
                }
            }
            .detail {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                width: 780px;
                height: auto;
                margin: 50px 0 0 80px;

                .item1 {
                    width: 350px;
                    height: auto;
                    img {
                        width: 100%;
                        height: auto;
                    }
                    div {
                        display: flex;
                        background: #eee;
                        padding: 1rem 0.5rem 0.5rem 0.5rem;
                        margin: -0.5rem 0 0 0;

                        p {
                            width: 50%;
                            text-align: center;
                            font-weight: bold;
                        }
                    }
                }
                .item2 {
                    width: 200px;
                    height: auto;
                    background: #eee;
                    padding: 1rem;

                    p {
                        text-align: center;
                        margin-bottom: 1rem;
                        font-size: 1rem;
                        font-weight: bold;
                    }

                    div {
                        display: flex;
                        flex-direction: row;
                        justify-content: space-between;
                        width: 100%;
                        height: auto;

                        div {
                            width: 47%;
                            height: auto;
                            display: flex;
                            flex-direction: column;
                            justify-content: flex-start;
                            img {
                                width: 100%;
                                height: auto;
                            }
                            p {
                                width: 100%;
                                height: auto;
                                text-align: left;
                                margin: 0;
                                padding-top: 0.5rem;
                                font-size: 0.6rem;
                                font-weight: bold;                                
                            }
                            p.title::after {
                                content: '／';
                            }
                        }
                    }
                }
                .item3 {
                    width: 170px;
                    height: auto;
                    div {
                        background: linear-gradient(287deg, rgba(24,49,142,1) 0%, rgba(174,3,131,1) 40%);
                        width: calc(100% - 1rem);
                        height: auto;
                        padding: 0.5rem;
                        p {
                            color: #fff;
                            font-weight: bold;
                            letter-spacing: 1px;
                        }
                        hr {
                            color: #fff;
                            margin: 0.5rem 0
                        }
                    }
                    table {
                        margin-top: 0.5rem;
                        width: 100%;
                        height: auto;
                        tr {
                            display: flex;
                            flex-direction: row;
                            width: 100%;
                            height: auto;

                            td {
                                padding: 0.5rem;
                                border-top: 1px solid #222;
                                border-left: 1px solid #222;
                                font-size: 1rem;
                                font-weight: bold;
                            }
                            td:nth-child(1) {
                                width: 30%;
                                text-align: center;
                                background: #eee;
                            }
                            td:nth-child(2) {
                                width: 70%;
                                border-right: 1px solid #222;
                                text-align: right;
                            }
                            td.last {
                                border-bottom: 1px solid #222;
                                margin-bottom: 0.2rem;
                            }
                        }
                    }
                    p.note {
                        font-size: 0.6rem;
                        text-align: right;
                        font-weight: bold;
                    }
                }
            }
        }
    }
}