/* パソコン */
@media (1200px < width) {
    .introduction_design {
        width: 100%;
        overflow: hidden;
        position: relative;
        margin: 0;
        display: grid;
        grid-template:
            "....... ....... ....... ....... ....... ....... ....... ......." 150px
            "....... int_cat int_cat int_cat int_cat int_cat ....... ......." auto
            "....... ....... ....... ....... ....... ....... ....... ......." 100px
            "....... int_im1 int_im1 int_im1 int_im1 int_im1 ....... ......." auto
            "....... ....... ....... f2d2490 f2d2490 f2d2490 f2d2490 ......." auto
            "....... ....... ....... ....... ....... ....... ....... ......." 150px
            /1fr 1fr 1fr 1fr 1fr 1fr  0.5fr 0.5fr;
    }
    
    .f2d24909-c986-40bd-97cf-f07f74ca5353 {
        grid-area: f2d2490;
        filter: var(--shadow-data);
        display: grid;
        border-radius: 10px;
        position: absolute;
        background-color: var(--main-color2);
        grid-template:
            "....... ....... ....... ....... ....... ....... ......." 20px
            "....... int_tit int_tit int_tit int_tit int_tit ......." auto
            "....... ....... ....... ....... ....... ....... ......." auto
            "....... int_des int_des int_des int_des int_des ......." auto
            "....... ....... ....... ....... ....... ....... ......." 20px
            / 0.4fr 1fr 1fr 0.1fr 1fr 1fr 0.4fr;
        z-index: 1;
        /*重ねたい子要素にabsolute*/
        top: -150px;
        left: 0px;
    }
    
}


/* タブレット */
@media (768px <=width <=1200px) {
    .introduction_design {
        width: 100%;
        overflow: hidden;
        position: relative;
        margin: 0;
        display: grid;
        grid-template:
            "....... ....... ....... ....... ....... ....... ....... ......." 150px
            "....... int_cat int_cat int_cat int_cat int_cat ....... ......." auto
            "....... ....... ....... ....... ....... ....... ....... ......." 100px
            "....... int_im1 int_im1 int_im1 int_im1 int_im1 ....... ......." auto
            "....... ....... ....... f2d2490 f2d2490 f2d2490 f2d2490 ......." auto
            "....... ....... ....... ....... ....... ....... ....... ......." 150px
            /1fr 1fr 1fr 1fr 1fr 1fr  0.5fr 0.5fr;
    }
    
    .f2d24909-c986-40bd-97cf-f07f74ca5353 {
        grid-area: f2d2490;
        filter: var(--shadow-data);
        display: grid;
        border-radius: 10px;
        position: absolute;
        background-color: var(--main-color2);
        grid-template:
            "....... ....... ....... ....... ....... ....... ......." 20px
            "....... int_tit int_tit int_tit int_tit int_tit ......." auto
            "....... ....... ....... ....... ....... ....... ......." auto
            "....... int_des int_des int_des int_des int_des ......." auto
            "....... ....... ....... ....... ....... ....... ......." 20px
            / 0.4fr 1fr 1fr 0.1fr 1fr 1fr 0.4fr;
        z-index: 1;
        /*重ねたい子要素にabsolute*/
        top: -150px;
        left: 0px;
    }
    
}

/* スマホ */
@media (width < 768px) {
    .introduction_design {
        width: 100%;
        overflow: hidden;
        position: relative;
        margin: 0;
        display: grid;
        grid-template:
            "....... ....... ....... ....... ....... ....... ....... ......." 100px
            "....... int_cat int_cat int_cat int_cat int_cat ....... ......." auto
            "....... ....... ....... ....... ....... ....... ....... ......." 100px
            "....... int_im1 int_im1 int_im1 int_im1 int_im1 ....... ......." auto
            "....... ....... ....... ....... ....... ....... ....... ......." 50px
            "....... f2d2490 f2d2490 f2d2490 f2d2490 f2d2490 ....... ......." auto
            "....... ....... ....... ....... ....... ....... ....... ......." 100px
            /0.1fr 1fr 1fr 1fr 1fr 1fr  0fr 0.1fr;
    }
    
    .f2d24909-c986-40bd-97cf-f07f74ca5353 {
        grid-area: f2d2490;
        filter: var(--shadow-data);
        display: grid;
        border-radius: 10px;
        background-color: var(--main-color2);
        grid-template:
            "....... ....... ....... ....... ....... ....... ......." 20px
            "....... int_tit int_tit int_tit int_tit int_tit ......." auto
            "....... ....... ....... ....... ....... ....... ......." auto
            "....... int_des int_des int_des int_des int_des ......." auto
            "....... ....... ....... ....... ....... ....... ......." 20px
            / 0.4fr 1fr 1fr 0.1fr 1fr 1fr 0.4fr;
        z-index: 1;
        /*重ねたい子要素にabsolute*/
        top: 0px;
        left: 0px;
    }
    
}








.introduction_catchphrase {
    grid-area: int_cat;
    text-align: center;
}



.introduction_title {
    grid-area: int_tit;
}


.introduction_description {
    grid-area: int_des;

}

.b999afa3-a497-4bd5-bbd5-a48e2634d0f4 {
    position: absolute;
}

.introduction_img_1 {
    grid-area: int_im1;
    filter: var(--shadow-data);
}
.introduction_img_1 img {
    border-radius: 10px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}



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

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

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