:root {
    --header-font-size-h1: clamp(18px, 2vw, 4vw);
}

.header_design h1 {
    font-size: var(--header-font-size-h1);
}


/* パソコン */
@media (1200px < width) {
    .header_design {
        width: 100%;
        overflow: hidden;
        position: relative;

        margin: 0;
        display: grid;
        grid-template:
            "...... ...... ...... ...... ...... ...... ...... ...... ......" 200px
            "...... ...... ...... ...... ...... ...... ...... ...... ......" auto
            "he_im1 he_im1 he_im1 he_im1 he_im1 he_im1 he_im1 he_im1 he_im1" auto
            "he_im1 he_im1 he_im1 he_im1 he_im1 he_im1 he_im1 he_im1 he_im1" auto
            "he_im1 he_im1 he_im1 he_im1 he_im1 he_im1 he_im1 he_im1 he_im1" auto
            "he_im1 he_im1 he_im1 he_im1 he_im1 he_im1 he_im1 he_im1 he_im1" auto
            "he_im1 he_im1 he_im1 he_im1 he_im1 he_im1 he_im1 he_im1 he_im1" auto
            "...... ...... ...... ...... ...... ...... ...... ...... ......" 200px
            "...... he_te1 he_te1 he_te1 he_te1 he_te1 he_te1 he_te1 ......" auto
            "...... ...... ...... ...... ...... ...... ...... ...... ......" 50px
            "...... ...... ...... ...... he_im2 ...... ...... ...... ......" auto
            "...... ...... ...... ...... ...... ...... ...... ...... ......" 100px
            /0.1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 0.1fr;
    }


    .c0932eb7-bc39-49d4-86dd-c7324a53887e {
        width: 150%;
    }

    .header_img_1 {
        grid-area: he_im1;
        background-color: var(--main-color2);
        height: 500px;
        display: grid;
        place-content: center;
        place-items: center;
    }
    .header_img_1 img {
    /* アスペクト比 */
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
}
}


/* タブレット */
@media (768px <=width <=1200px) {
    .header_design {
        width: 100%;
        overflow: hidden;
        position: relative;

        margin: 0;
        display: grid;
        grid-template:
            "...... ...... ...... ...... ...... ...... ...... ...... ......" 200px
            "...... ...... ...... ...... ...... ...... ...... ...... ......" auto
            "he_im1 he_im1 he_im1 he_im1 he_im1 he_im1 he_im1 he_im1 he_im1" auto
            "he_im1 he_im1 he_im1 he_im1 he_im1 he_im1 he_im1 he_im1 he_im1" auto
            "he_im1 he_im1 he_im1 he_im1 he_im1 he_im1 he_im1 he_im1 he_im1" auto
            "he_im1 he_im1 he_im1 he_im1 he_im1 he_im1 he_im1 he_im1 he_im1" auto
            "he_im1 he_im1 he_im1 he_im1 he_im1 he_im1 he_im1 he_im1 he_im1" auto
            "...... ...... ...... ...... ...... ...... ...... ...... ......" 200px
            "...... he_te1 he_te1 he_te1 he_te1 he_te1 he_te1 he_te1 ......" auto
            "...... ...... ...... ...... ...... ...... ...... ...... ......" 50px
            "...... ...... ...... ...... he_im2 ...... ...... ...... ......" auto
            "...... ...... ...... ...... ...... ...... ...... ...... ......" 100px
            /0.1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 0.1fr;
    }


    .c0932eb7-bc39-49d4-86dd-c7324a53887e {
        width: 100%;
    }

    .header_img_1 {
        grid-area: he_im1;
        background-color: var(--main-color2);
        height: 300px;
        display: grid;
        place-content: center;
        place-items: center;
    }
    .header_img_1 img {
    /* アスペクト比 */
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
}
}

/* スマホ */
@media (width < 768px) {
    .header_design {
        width: 100%;
        overflow: hidden;
        position: relative;

        margin: 0;
        display: grid;
        grid-template:
            "he_im1 he_im1 he_im1 he_im1 he_im1 he_im1 he_im1 he_im1 he_im1" auto
            "he_im1 he_im1 he_im1 he_im1 he_im1 he_im1 he_im1 he_im1 he_im1" auto
            "he_im1 he_im1 he_im1 he_im1 he_im1 he_im1 he_im1 he_im1 he_im1" auto
            "he_im1 he_im1 he_im1 he_im1 he_im1 he_im1 he_im1 he_im1 he_im1" auto
            "he_im1 he_im1 he_im1 he_im1 he_im1 he_im1 he_im1 he_im1 he_im1" auto
            "...... ...... ...... ...... ...... ...... ...... ...... ......" 20px
            "...... he_te1 he_te1 he_te1 he_te1 he_te1 he_te1 he_te1 ......" auto
            "...... ...... ...... ...... ...... ...... ...... ...... ......" 50px
            "...... ...... ...... he_im2 he_im2 he_im2 ...... ...... ......" auto
            "...... ...... ...... ...... ...... ...... ...... ...... ......" 100px
            /0.1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 0.1fr;
    }


    .c0932eb7-bc39-49d4-86dd-c7324a53887e {
        
    }

    .header_img_1 {
        grid-area: he_im1;
        background-color: var(--main-color2);
        
    }
    .header_img_1 img {
    /* アスペクト比 */
    aspect-ratio: 9 / 12;
    object-fit: cover;
    object-position: center;
}
}






.header_text {
    grid-area: he_te1;
    text-align: center;
}

.header_text span {
    border-bottom: solid 2px var(--main-color2);
}






.header_img_2 {
    grid-area: he_im2;
}

.header_img_2 img {}








/* パソコン */
@media (1200px < width) {}


/* タブレット */
@media (768px <=width <=1200px) {}

/* スマホ */
@media (width < 768px) {}