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

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


/* パソコン */
@media (1200px < width) {
    .header_design {
    width: 100%;
    overflow: hidden;
    margin: 0;
    display: grid;
    grid-template:
        "...... ...... ...... ...... ...... ...... ......" 50px
        "...... ...... ...... he_im1 he_im1 he_im1 ......" auto
        "...... he_te1 ...... he_im1 he_im1 he_im1 ......" auto
        "...... he_te1 ...... he_im1 he_im1 he_im1 ......" auto
        "...... ...... ...... he_im1 he_im1 he_im1 ......" auto
        "...... he_im2 ...... he_im1 he_im1 he_im1 ......" auto
        "...... ...... ...... he_im1 he_im1 he_im1 ......" auto
        "...... ...... ...... ...... ...... ...... ......" 150px
        /0.3fr 1fr 0.5fr 1fr 1fr 1fr 0.2fr;
}
}


/* タブレット */
@media (768px <=width <=1200px) {
    .header_design {
    width: 100%;
    overflow: hidden;
    margin: 0;
    display: grid;
    grid-template:
        "...... ...... ...... ...... ...... ...... ......" 50px
        "...... ...... ...... he_im1 he_im1 he_im1 ......" auto
        "...... he_te1 ...... he_im1 he_im1 he_im1 ......" auto
        "...... he_te1 ...... he_im1 he_im1 he_im1 ......" auto
        "...... ...... ...... he_im1 he_im1 he_im1 ......" auto
        "...... he_im2 ...... he_im1 he_im1 he_im1 ......" auto
        "...... ...... ...... he_im1 he_im1 he_im1 ......" auto
        "...... ...... ...... ...... ...... ...... ......" 150px
        /0.3fr 1fr 0.5fr 1fr 1fr 1fr 0.2fr;
}
}

/* スマホ */
@media (width < 768px) {
    .header_design {
    width: 100%;
    overflow: hidden;
    margin: 0;
    display: grid;
    grid-template:
        "...... ...... ...... ...... ...... ...... ......" 50px
        "...... ...... he_im2 he_im2 he_im2 ...... ......" auto
        "...... ...... ...... ...... ...... ...... ......" 50px
        "he_im1 he_im1 he_im1 he_im1 he_im1 he_im1 he_im1" auto
        "...... ...... ...... ...... ...... ...... ......" 50px
        "...... he_te1 he_te1 he_te1 he_te1 he_te1 ......" auto
        "...... ...... ...... ...... ...... ...... ......" auto
        "...... ...... ...... ...... ...... ...... ......" 150px
        /0.1fr 1fr 1fr 1fr 1fr 1fr 0.1fr;
}
}







.header_img_1 {
    grid-area: he_im1;
}

.header_img_1 img {
    /* アスペクト比 */
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
}

.header_text {
    grid-area: he_te1;
    word-wrap: normal;
}

.header_img_2 {
    grid-area: he_im2;
    display: grid;
    place-content: center;
    place-items: center;
}

.header_img_2 img {
    width: 50%;
}