: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 s_titl ...... ...... ...... ......" auto
            "...... ...... ...... ...... ...... ...... ......" 100px
            "...... ...... square square square square square" auto
            "...... ...... ...... ...... ...... ...... ......" 100px
            "...... ...... s_desc s_desc s_desc ...... ......" auto
            "...... ...... ...... ...... ...... ...... ......" 150px
            /1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }
}

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

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




.seat_title {
    grid-area: s_titl;
    text-align: center;
}

.seat_description {
    grid-area: s_desc;
    text-align: center;
}



/* パソコン */
@media (1200px < width) {
    .square {
        background-color: var(--main-color2);
        filter: var(--shadow-data);
        position: relative;
        grid-area: square;
        aspect-ratio: 4 / 1;
    }

    .square_img {
        width: 100%;
        filter: var(--shadow-data);
        height: auto;
        position: absolute;
        z-index: 0;
        /*重ねたい子要素にabsolute*/
        top: -20%;
        left: 0%;
        display: grid;
        grid-template:
            "...... inf_img_1  ...... inf_img_2  ...... " auto
            /0.1fr 1fr 0.1fr 1fr 0.1fr;
    }
}

/* タブレット */
@media (768px <=width <=1200px) {
    .square {
        background-color: var(--main-color2);
        filter: var(--shadow-data);
        position: relative;
        grid-area: square;
        aspect-ratio: 4 / 1;
    }

    .square_img {
        width: 100%;
        filter: var(--shadow-data);
        height: auto;
        position: absolute;
        z-index: 0;
        /*重ねたい子要素にabsolute*/
        top: -20%;
        left: 0%;
        display: grid;
        grid-template:
            "...... inf_img_1  ...... inf_img_2  ...... " auto
            /0.1fr 1fr 0.1fr 1fr 0.1fr;
    }
}

/* スマホ */
@media (width < 768px) {
    .square {
        background-color: var(--main-color2);
        filter: var(--shadow-data);
        position: relative;
        grid-area: square;
        border-radius: 10px 0 0 10px;
    }

    .square_img {
        width: 100%;
        filter: var(--shadow-data);
        height: auto;
        z-index: 0;
        /*重ねたい子要素にabsolute*/
        top: 0%;
        left: 0%;
        display: grid;
        grid-template:
            "...... ...... ...... ...... ...... " 20px
            "...... inf_img_1  inf_img_1  inf_img_1  ...... " auto
            "...... ...... ...... ...... ...... " 20px
            "...... inf_img_2  inf_img_2  inf_img_2  ...... " auto
            "...... ...... ...... ...... ...... " 20px
            /0.1fr 1fr 0.1fr 1fr 0.1fr;
    }
}



.interior_img {
    width: 90%;
    height: auto;
    grid-area: inf_img_1;
}

.interior_img img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}


.exterior_img {
    width: 90%;
    height: auto;
    grid-area: inf_img_2;
}

.exterior_img img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}