@charset "UTF-8";

@media screen and (min-width: 900px) {
    #business-page {

        div.gray-image-bg {
            background-size: contain;
            background-position: top center;
            background-repeat: no-repeat;
        }

        #section-new-factory {

            display: grid;
            grid-template-columns: 55% 5% 40%;
            grid-template-rows: auto auto 1fr;

            & > h2 {
                grid-column: 3 / 4;
                grid-row: 1 / 2;
                aspect-ratio: 1 / 0.45;
                text-align: right;
                padding-top: 3rem;
                /* letter-spacing: 0.2em; */
            }
            & > img {

                &:nth-of-type(1) {
                    grid-column: 1 / 3;
                    grid-row: 1 / 3;
                    z-index: 1;
                }

                &:nth-of-type(2) {
                    grid-column: 2 / 4;
                    grid-row: 2 / 4;
                }
            }

            & > div {
                grid-column: 1 / 2;
                grid-row: 3 / 4;
                margin: 3rem 2rem 0 0;
            }
        }

        #section-making-hamburg {

            margin-top:10rem;

            h2 {
                text-align: right;
                width: 70%;
            }

            & > div.disp-grid {

                grid-template-columns: 1fr 18% 18% 18%;
                grid-template-rows: auto 1fr;
                gap:1.5rem;

                & > img {
                    &:nth-of-type(1) {
                        grid-column: 1 / 2;
                        grid-row: 1 / 2;
                        padding-right: 1rem;
                    }
                    &:nth-of-type(2) {
                        grid-column: 2 / 3;
                        grid-row: 1 / 3;
                        margin-top: 5rem;
                    }
                    &:nth-of-type(3) {
                        grid-column: 3 / 4;
                        grid-row: 1 / 3;
                    }
                    &:nth-of-type(4) {
                        grid-column: 4 / 5;
                        grid-row: 1 / 3;
                        margin-top: 5rem;
                    }

                }

                & > div {
                    grid-column: 1 / 2;
                    grid-row: 2 / 3;
                    padding-right: 1rem;
                }
            }
        }

        #section-oem-pb {

            margin-top:5rem;
            position: relative;
            padding-bottom: 5rem;

            h2 {
                padding-left : 3.5rem;

                & > img {
                    height: 5rem;
                    width: auto;
                }

            }

            h3 {
                font-size: 2.4rem;
            }

            /* .content-text {
                color : var(--color-white);
            } */

            .gray-bg {

                display: grid;
                gap: 2.5rem;
                padding : 150px 100px;
                grid-template-columns: 65% 35%;
                grid-template-rows: auto 1fr;

                & > img {
                    grid-column: 1 / 2;
                    grid-row: 1 / 2;
                }

                & > div {
                    grid-column: 1 / 2;
                    grid-row: 2 / 3;
                }

                & > ul.content-text {
                    grid-column: 2 / 3;
                    grid-row: 1 / 3;

                    & > li {
                        & > img {
                            max-width:350px;
                        }
                    }

                }

            }
        }

        #section-sales-results {

            margin-top:3rem;
            padding-bottom: 8rem;

            display: grid;
            gap: 0 2%;
            /* grid-template-columns: 36% 62%; */
            grid-template-columns: 40% 58%;
            grid-template-rows: auto 1fr;

            & > h2 {
                grid-column: 2 / 3;
                grid-row: 1 / 2;
                margin-top:0.5rem;
            }

            & > img {

                width: 100%;

                &:nth-of-type(1) {
                    grid-column: 2 / 3;
                    grid-row: 2 / 3;
                }

                &:nth-of-type(2) {
                    grid-column: 1 / 2;
                    grid-row: 1 / 3;
                }

            }
        }

        #section-safety {

            margin-top:10rem;
            position: relative;

            h2 {
                width: 70%;
                margin-left:30%;
            }

            & > .disp-grid {

                grid-template-columns: 58% 38.5%;
                gap: 3.5%;
                grid-template-rows: auto 1fr;

                & > img {

                    &:nth-of-type(1) {
                        grid-column: 1 / 2;
                        grid-row: 1 / 2;
                    }

                    &:nth-of-type(2) {
                        grid-column: 2 / 3;
                        grid-row: 1 / 3;
                    }
                }

                & > div {
                    grid-column: 1 / 2;
                    grid-row: 2 / 3;
                }
            }


        }
    }
}

/** 1201px以上 の場合にフォントサイズなどをさらに大きくする **/
@media screen and (min-width: 1201px) {
}