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

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


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


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

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




.header_design {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin: 0;
    display: grid;
    grid-template:
        "...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ......" 100px
        "...... ...... ...... ...... ...... ...... ...... ...... he_im2 ...... ......" auto
        "...... ...... a2be56 ...... ...... ...... ...... ...... he_im2 ...... ......" auto
        "he_im1 he_im1 he_im1 he_im1 he_im1 he_im1 ...... ...... he_im2 ...... ......" auto
        "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 ...... ...... ...... ...... ......" auto
        "he_im1 he_im1 he_im1 he_im1 he_im1 he_im1 ...... he_te1 he_te1 he_te1 ......" auto
        "he_im1 he_im1 he_im1 he_im1 he_im1 he_im1 ...... he_te1 he_te1 he_te1 ......" auto
        "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 ...... ...... ...... ...... ......" auto
        "...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ......" 100px
        /0.1fr 1fr 1fr 1fr 1fr 1fr 0.5fr 0.5fr 1fr 0.5fr 0.5fr;
}


.a2be56cf-01ad-43b0-adfd-31f094c7b90d {
    grid-area: a2be56;
    position: absolute;
    z-index: 1;
    /*重ねたい子要素にabsolute*/
    top: 0px;
    left: 0px;
    animation: verticalMove 5s infinite;
    /* Adjust timing */
    /*重ねたい子要素にabsolute*/
}

@keyframes verticalMove {
    0% {
        transform: rotate(-45deg);
    }

    50% {
        transform: rotate(45deg);
        /* Adjust for distance */
    }

    100% {
        transform: rotate(-45deg);
    }
}




.header_img_1 {
    grid-area: he_im1;

}

.header_img_1 img {
    /* アスペクト比 */
    aspect-ratio: 16 / 9;
    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) {}