: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;
        position: relative;
        margin: 0;
        display: grid;
        grid-template:
            "...... ...... ...... ...... ...... ...... ...... ...... ......" 50px
            "...... ...... ...... ...... ...... ...... ...... k27648 ......" auto
            "...... he_im2 ...... he_im1 he_im1 he_im1 he_im1 he_im1 ......" auto
            "...... he_im2 ...... he_im1 he_im1 he_im1 he_im1 he_im1 ......" auto
            "...... he_im2 ...... he_im1 he_im1 he_im1 he_im1 he_im1 ......" auto
            "...... ...... ...... he_im1 he_im1 he_im1 he_im1 he_im1 ......" auto
            "...... ...... ...... he_im1 he_im1 he_im1 he_im1 he_im1 ......" auto
            "...... ...... ...... ...... ...... ...... ...... ...... ......" 50px
            "...... he_te1 he_te1 he_te1 he_te1 he_te1 he_te1 he_te1 ......" auto
            "...... ...... ...... ...... ...... ...... ...... ...... ......" 100px
            /0.3fr 0.5fr 0.1fr 1fr 0.5fr 1fr 1fr 1fr 0.2fr;
    }

    .k27648bc-efbd-4804-9e99-64fe0656534e {
        grid-area: k27648;
        width: 50%;
        position: absolute;
        z-index: 1;
        /*重ねたい子要素にabsolute*/
        top: 0px;
        left: 100px;
        animation: verticalMove 2s infinite;
        /* Adjust timing */
        /*重ねたい子要素にabsolute*/
    }

    @keyframes verticalMove {
        0% {
            top: 0px;
        }

        50% {
            top: 100px;
            /* Adjust for distance */
        }

        100% {
            top: 0px;
        }
    }
}


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

    .k27648bc-efbd-4804-9e99-64fe0656534e {
        grid-area: k27648;
        width: 50%;
        position: absolute;
        z-index: 1;
        /*重ねたい子要素にabsolute*/
        top: 0px;
        left: 50px;
        animation: verticalMove 2s infinite;
        /* Adjust timing */
        /*重ねたい子要素にabsolute*/
    }

    @keyframes verticalMove {
        0% {
            top: 0px;
        }

        50% {
            top: 80px;
            /* Adjust for distance */
        }

        100% {
            top: 0px;
        }
    }
}

/* スマホ */
@media (width < 768px) {
    .header_design {
        width: 100%;
        overflow: hidden;
        position: relative;
        margin: 0;
        display: grid;
        grid-template:
            "...... ...... ...... ...... ...... ...... ...... k27648 ......" 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
            "...... ...... ...... ...... ...... ...... ...... ...... ......" 50px
            "...... he_te1 he_te1 he_te1 he_te1 he_te1 he_te1 he_te1 ......" auto
            "...... ...... ...... ...... ...... ...... ...... ...... ......" 50px
            "...... he_im2 he_im2 he_im2 he_im2 he_im2 he_im2 he_im2 ......" auto
            "...... ...... ...... ...... ...... ...... ...... ...... ......" 100px
            /0.1fr 0.5fr 0.1fr 1fr 0.5fr 1fr 1fr 1fr 0.1fr;
    }

    .k27648bc-efbd-4804-9e99-64fe0656534e {
        grid-area: k27648;
        width: 100%;
        position: absolute;
        z-index: 1;
        /*重ねたい子要素にabsolute*/
        top: 0px;
        left: -50px;
        animation: verticalMove 2s infinite;
        /* Adjust timing */
        /*重ねたい子要素にabsolute*/
    }

    @keyframes verticalMove {
        0% {
            top: 0px;
        }

        50% {
            top: 80px;
            /* Adjust for distance */
        }

        100% {
            top: 0px;
        }
    }
}











.header_text {
    grid-area: he_te1;
}

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











/* パソコン */
@media (1200px < width) {
    .header_img_1 {
        grid-area: he_im1;

    }

    .header_img_1 img {
        /* アスペクト比 */
        aspect-ratio: 16 / 9;
        object-fit: cover;
        object-position: center;
        border-radius: 20%;
    }

    .header_img_2 {
        grid-area: he_im2;
    }

    .header_img_2 img {
        border-radius: 5px;
    }
}


/* タブレット */
@media (768px <=width <=1200px) {
    .header_img_1 {
        grid-area: he_im1;

    }

    .header_img_1 img {
        /* アスペクト比 */
        aspect-ratio: 16 / 9;
        object-fit: cover;
        object-position: center;
        border-radius: 20%;
    }

    .header_img_2 {
        grid-area: he_im2;
    }

    .header_img_2 img {
        border-radius: 5px;
    }
}

/* スマホ */
@media (width < 768px) {
    .header_img_1 {
        grid-area: he_im1;

    }

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

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

    .header_img_2 img {
        border-radius: 5px;
        width: 50%;
    }
}