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




.seat_title {
    grid-area: s_titl;

}

.seat_description {
    grid-area: s_desc;

}



.square {
    position: relative;
    filter: var(--shadow-data);
    grid-area: square;
    aspect-ratio: 1 / 1;
}

.square_img {
    width: 100%;
    height: auto;
    position: absolute;
    z-index: 0;
    /*重ねたい子要素にabsolute*/
    top: -20%;
    left: 0%;
}

.interior_img {
    width: 100%;
    height: auto;
    border-radius: 30px;
    position: absolute;
    z-index: 2;
    /*重ねたい子要素にabsolute*/
    top: 0%;
    left: 0%;
}



.exterior_img {
    width: 100%;
    height: auto;
    border-radius: 30px;
    position: absolute;
    z-index: 1;
    /*重ねたい子要素にabsolute*/
    top: 20%;
    left: 40%;
}


.interior_img,
.exterior_img {
    width: 60%;
    height: 80%;
    object-fit: cover;
}