.materials main {
    padding: 150px 0 120px;
    background-color: #fff;
    display: flex;
    flex-wrap: wrap;

    @media screen and (max-width:992px) {
        padding: 0 0 120px;
    }
}

.materials-header {
    width: 100%;
    background-image: url(../images/materials/header-bk.webp);

    & h2 {
        padding: 50px 0;
        font-size: 50px;
        text-align: center;
        font-weight: bold;
        line-height: 1;

        @media screen and (max-width:992px) {
            font-size: 8vw;
        }
    }
}

.materials-lead {
    width: 1000px;
    padding: 30px 0;
    color: #00A753;
    border-bottom: 1px solid #C8C8C8;
    margin: 0 auto;
    font-size: 30px;
    text-align: center;

    @media screen and (max-width:992px) {
        width: 100%;
        font-size: 4vw;
    }
}

.materials-anchor {
    position: relative;
    z-index: 1;
    width: 1000px;
    margin: 0 auto;
    padding: 30px 0;
    text-align: center;

    @media screen and (max-width:992px) {
        display: none;
    }

    & h3 {
        font-size: 32px;
        font-weight: bold;
        margin: 0 0 15px;
    }

    & .materials-anchor_inner {
        width: 730px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin: 0 auto;

        & a {
            width: 130px;
            height: 50px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(to bottom, #fff, #B4B4B4);
            border-radius: 5px;
            margin: 0 0 20px;
            color: #000;
            font-size: 16px;
            font-weight: bold;
        }

        & a:hover {
            text-decoration: none;
        }
    }
}

.materials-select {
    display: none;
}

@media screen and (max-width:992px) {
    .materials-select {
        position: relative;
        z-index: 1;
        width: 100%;
        display: block;
        padding: 40px 0;
        text-align: center;

        & .title {
            font-size: 4vw;
            font-weight: bold;
        }

        & select {
            padding: 1vw 3vw;
            background: linear-gradient(to bottom, #fff, #B4B4B4);
        }

    }
}

.materials_inner {
    width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}

.product {
    display: inline-block;
    width: 100%;
    margin: 0 auto 50px;

    & h3 {
        color: #00A753;
        border-bottom: 1px solid #C8C8C8;

        @media screen and (max-width:992px) {
            font-size: 5vw;
        }
    }

    & .product-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 13px;
        /* タイル同士の間隔 */
        padding: 0;
        /* 外側の余白をなくす */
        margin: 0;

        /* 念のため */
        @media screen and (max-width:992px) {
            grid-template-columns: repeat(auto-fill, minmax(calc((240 / 600) * 100vw), 1fr));
        }

        & .tile {
            & .product-image {
                height: 200px;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: #E6E6E6;

                @media screen and (max-width:992px) {
                    height: calc((305 / 600) * 100vw);
                }

                & img {
                    height: 170px;

                    @media screen and (max-width:992px) {
                        height: calc((170 / 600) * 100vw);
                    }
                }
            }

            & .product-title {
                padding: 10px 0 5px;
                text-align: center;
                font-size: 16px;
                font-weight: bold;
                line-height: 1.3;

                @media screen and (max-width:992px) {
                    font-size: 4vw;
                }
            }

            & .product-lead {
                min-height: 85px;
                padding: 0 15px;
                font-size: 14px;

                @media screen and (max-width:992px) {
                    min-height: none;
                    font-size: 4vw;
                }
            }
        }
    }
}

.product50p {
    display: inline-block;
    width: 48.5%;
    margin: 0 auto 50px;

    @media screen and (max-width:992px) {
        width: 100%;
    }

    & h3 {
        color: #00A753;
        border-bottom: 1px solid #C8C8C8;

        @media screen and (max-width:992px) {
            font-size: 5vw;
        }
    }

    & .product-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 13px;
        /* タイル同士の間隔 */
        padding: 0;
        /* 外側の余白をなくす */
        margin: 0;
        /* 念のため */

        @media screen and (max-width:992px) {
            grid-template-columns: repeat(auto-fill, minmax(calc((240 / 600) * 100vw), 1fr));
        }

        & .tile {
            & .product-image {
                height: 200px;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: #E6E6E6;

                @media screen and (max-width:992px) {
                    height: calc((305 / 600) * 100vw);
                }

                & img {
                    height: 170px;

                    @media screen and (max-width:992px) {
                        height: calc((170 / 600) * 100vw);
                    }
                }
            }

            & .product-title {
                padding: 10px 0 5px;
                text-align: center;
                font-size: 16px;
                font-weight: bold;
                line-height: 1.3;

                @media screen and (max-width:992px) {
                    font-size: 4vw;
                }
            }

            & .product-lead {
                min-height: 85px;
                padding: 0 15px;
                font-size: 14px;

                @media screen and (max-width:992px) {
                    min-height: none;
                    font-size: 4vw;
                }
            }
        }
    }
}

.modal-item {
    max-width: 600px;

    @media screen and (max-width:992px) {
        width: calc((570 / 600) * 100vw);
    }

    & .modal-content {
        position: relative;

        & .modal-close {
            position: absolute;
            right: 0;
            top: -38px;
        }

        & .modal-content_inner {
            padding: 30px;

            & .title {
                color: #000;
                font-size: 16px;
                font-weight: bold;

                @media screen and (max-width:992px) {
                    font-size: 4vw;
                }
            }

            & .image {
                text-align: center;
                padding: 0 0 30px;

                & img {
                    height: 170px;

                    @media screen and (max-width:992px) {
                        height: calc((170 / 600) * 100vw);
                    }
                }
            }

            & .comment {
                padding: 0 0 5px;

                @media screen and (max-width:992px) {
                    font-size: 3vw;
                }
            }

            & .component {
                padding: 0 0 10px;

                @media screen and (max-width:992px) {
                    font-size: 3vw;
                }
            }

            & .more-btn {
                width: 130px;
                display: inline-block;
                padding: 5px 0;
                background-color: #D8D8D8;
                color: #000;
                border-radius: 5px;
                font-size: 16px;
                text-align: center;

                @media screen and (max-width:992px) {
                    width: 40vw;
                    font-size: 3vw;
                }
            }

            & .modal-close-btn {
                font-size: 13px;
                text-align: center;

                @media screen and (max-width:992px) {
                    font-size: 3vw;
                }

                & span {
                    cursor: pointer;
                    text-decoration: underline;
                }
            }
        }
    }
}

.scene {
    display: inline-block;
    width: 100%;
    margin: 0 auto 50px;

    @media screen and (max-width:992px) {
        width: 85%;
    }

    & h3 {
        color: #00A753;
        border-bottom: 1px solid #C8C8C8;

        @media screen and (max-width:992px) {
            font-size: 5vw;
        }
    }

    & .scene_inner {
        display: flex;
        justify-content: space-between;

        @media screen and (max-width:992px) {
            flex-wrap: wrap;
        }

        & .scene_card {
            width: 240px;
            height: 240px;
            display: flex;
            padding: 22px 13px 0;
            border: 2px solid #E6E6E6;
            border-radius: 15px;

            @media screen and (max-width:992px) {
                width: calc((240 / 600) * 100vw);
                height: calc((240 / 600) * 100vw);
                margin: 0 0 3vw;
            }

            & .left {
                & img {
                    height: 192px;

                    @media screen and (max-width:992px) {
                        height: calc((192 / 600) * 100vw);
                    }
                }
            }

            & .right {
                padding: 0 0 0 12px;

                & a {
                    color: #88320C;
                    font-size: 15px;
                    font-weight: bold;

                    @media screen and (max-width:992px) {
                        font-size: 3vw;
                    }
                }

                & p {
                    font-size: 14px;

                    @media screen and (max-width:992px) {
                        font-size: 2vw;
                    }
                }
            }
        }
    }
}

.anc-link {
    display: block;
    padding-top: 180px;
    margin-top: -180px;
}

@media screen and (max-width:768px) {
    .anc-link {
        padding-top: 0;
        margin-top: auto;
    }
}