:root {
    --seat-font-size-h2: clamp(30px, 2vw, 4vw);
    --seat-font-size-h3: clamp(25px, 1.5vw, 3vw);
    --seat-font-size-p: clamp(18px, 1vw, 2vw);
}

.seat_design h2 {
    font-size: var(--seat-font-size-h2);
}

.seat_design h3 {
    font-size: var(--seat-font-size-h3);
}

.seat_design p {
    font-size: var(--seat-font-size-p);
}




/* パソコン */
@media (1200px < width) {
    .seat_design {
        grid-area: h_img1;
        width: 100%;
        overflow: hidden;
        margin: 0;
        display: grid;
        grid-template:
            "........ ........ ........ ........ ........ ........ ........" 150px
            "........ s_titl   s_titl   ........ square_A square_A ........" auto
            "........ s_titl   s_titl   ........ square_A square_A ........" auto
            "........ ........ ........ ........ ........ ........ ........" 50px
            "........ square_B square_B ........ s_desc   s_desc   ........" auto
            "........ square_B square_B ........ s_desc   s_desc   ........" auto
            "........ ........ ........ ........ ........ ........ ........" 150px
            /0.1fr 1fr 1fr 0.3fr 1fr 1fr 0.5fr;
    }
}

/* タブレット */
@media (768px <=width <=1200px) {
    .seat_design {
        grid-area: h_img1;
        width: 100%;
        overflow: hidden;
        margin: 0;
        display: grid;
        grid-template:
            "........ ........ ........ ........ ........ ........ ........" 150px
            "square_B square_B square_B square_B square_B square_B square_B" auto
            "........ ........ ........ ........ ........ ........ ........" 50px
            "........ s_titl   s_titl   s_titl   s_titl   s_titl   ........" auto
            "........ ........ ........ ........ ........ ........ ........" 50px
            "........ square_A square_A square_A square_A square_A ........" auto
            "........ ........ ........ ........ ........ ........ ........" 50px
            "........ s_desc   s_desc   s_desc   s_desc   s_desc   ........" auto
            "........ ........ ........ ........ ........ ........ ........" 150px
            /0.5fr 1fr 1fr 0.3fr 1fr 1fr 0.5fr;
    }
}

/* スマホ */
@media (width < 768px) {
    .seat_design {
        grid-area: h_img1;
        width: 100%;
        overflow: hidden;
        margin: 0;
        display: grid;
        grid-template:
            "........ ........ ........ ........ ........ ........ ........" 80px
            "square_B square_B square_B square_B square_B square_B square_B" auto
            "........ ........ ........ ........ ........ ........ ........" 50px
            "........ s_titl   s_titl   s_titl   s_titl   s_titl   ........" auto
            "........ ........ ........ ........ ........ ........ ........" 50px
            "........ square_A square_A square_A square_A square_A ........" auto
            "........ ........ ........ ........ ........ ........ ........" 50px
            "........ s_desc   s_desc   s_desc   s_desc   s_desc   ........" auto
            "........ ........ ........ ........ ........ ........ ........" 80px
            /0.5fr 1fr 1fr 0.3fr 1fr 1fr 0.5fr;
    }
}






/* パソコン */
@media (1200px < width) {
    .square_A {
        position: relative;
        filter: var(--shadow-data);
        grid-area: square_A;
        width: 200%;
        aspect-ratio: 3 / 1;
    }

    .square_B {
        position: relative;
        filter: var(--shadow-data);
        grid-area: square_B;
        width: 150%;
        aspect-ratio: 2 / 1;
    }

    .interior_img {
        position: absolute;
        z-index: 1;
        /*重ねたい子要素にabsolute*/
        top: 15%;
        left: -10%;
    }

    .exterior_img {
        position: absolute;
        z-index: 2;
        /*重ねたい子要素にabsolute*/
        top: -20%;
        left: 15%;
    }

    .square_A img,
    .square_B img {
        width: 60%;
        height: 80%;
        object-fit: cover;
    }
}

/* タブレット */
@media (768px <=width <=1200px) {
    .square_A {
        position: relative;
        filter: var(--shadow-data);
        grid-area: square_A;


    }

    .square_B {
        position: relative;
        filter: var(--shadow-data);
        grid-area: square_B;

    }

    .interior_img {
        width: 100%;
        height: auto;
    }

    .exterior_img {
        width: 100%;
        height: auto;
    }
}

/* スマホ */
@media (width < 768px) {
    .square_A {
        position: relative;
        filter: var(--shadow-data);
        grid-area: square_A;


    }

    .square_B {
        position: relative;
        filter: var(--shadow-data);
        grid-area: square_B;

    }

    .interior_img {
        width: 100%;
        height: auto;
    }

    .exterior_img {
        width: 100%;
        height: auto;
    }
}





.seat_title {
    grid-area: s_titl;
    display: grid;
    place-content: center;

}


.seat_description {
    grid-area: s_desc;

}