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

    .introduction_design {
        width: 100%;
        overflow: hidden;
        margin: 0;
        display: grid;
        grid-template:
            "....... ....... ....... ....... ....... ....... ......." 150px
            "....... int_cat int_cat int_cat ....... ....... ......." auto
            "....... ....... ....... ....... int_im2 int_im2 ......." auto
            "....... int_im1 ....... ....... int_im2 int_im2 ......." auto
            "....... int_im1 ....... ....... ....... ....... ......." auto
            "....... int_im1 ....... int_tit int_tit ....... ......." auto
            "....... int_im1 ....... ....... ....... ....... ......." auto
            "....... ....... ....... int_des int_des ....... ......." auto
            "....... ....... ....... ....... ....... ....... ......." 150px
            /1fr 1fr 0.3fr 1fr 1fr 1fr 0.5fr;
    }
}




/* タブレット */
@media (768px <=width <=1200px) {
    .introduction_design {
        width: 100%;
        overflow: hidden;
        margin: 0;
        display: grid;
        grid-template:
            "....... ....... ....... ....... ....... ....... ......." 150px
            "....... int_cat int_cat int_cat int_cat ....... ......." auto
            "....... ....... ....... ....... ....... int_im2 int_im2" auto
            "....... int_im1 ....... ....... ....... int_im2 int_im2" auto
            "....... int_im1 ....... ....... ....... ....... ......." auto
            "....... int_im1 ....... ....... int_tit int_tit ......." auto
            "....... int_im1 ....... ....... ....... ....... ......." auto
            "....... ....... ....... ....... int_des int_des ......." auto
            "....... ....... ....... ....... ....... ....... ......." 150px
            /1fr 1fr 0.3fr 1fr 1fr 1fr 0.5fr;
    }
}

/* スマホ */
@media (width < 768px) {
    .introduction_design {
        width: 100%;
        overflow: hidden;
        margin: 0;
        display: grid;
        grid-template:
            "....... ....... ....... ....... ....... ....... ......." 150px
            "....... int_cat int_cat int_cat int_cat int_cat ......." auto
            "....... ....... ....... ....... ....... ....... ......." 30px
            "....... ....... ....... ....... int_im2 int_im2 ......." auto
            "....... int_im1 int_im1 ....... int_im2 int_im2 ......." auto
            "....... int_im1 int_im1 ....... ....... ....... ......." auto
            "....... ....... ....... ....... ....... ....... ......." 30px
            "....... int_tit int_tit int_tit int_tit int_tit ......." auto
            "....... ....... ....... ....... ....... ....... ......." auto
            "....... int_des int_des int_des int_des int_des ......." auto
            "....... ....... ....... ....... ....... ....... ......." 150px
            /0.1fr 1fr 1fr 0.7fr 1fr 1fr 0.1fr;
    }
}


.introduction_img_2 {
    grid-area: int_im2;
    width: 40%;
    height: auto;
}


/* パソコン */
@media (1200px < width) {
    .introduction_title {
        grid-area: int_tit;
    }
    .afdc3982-f40e-4c9a-977b-7873aed54ba8 {
        position: absolute;
        width: 100%;
        height: 150%;
        top: 0;
        left: 0;
    }
}

/* タブレット */
@media (768px <=width <=1200px) {
    .introduction_title {
        grid-area: int_tit;
    }
    .afdc3982-f40e-4c9a-977b-7873aed54ba8 {
        position: absolute;
        width: 150%;
        height: 200%;
        top: 0;
        left: 0;
    }
}

/* スマホ */
@media (width < 768px) {
    .introduction_title {
        grid-area: int_tit;
        text-align: center;
    }
    .afdc3982-f40e-4c9a-977b-7873aed54ba8 {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }
    .introduction_img_2 {
        grid-area: int_im2;
        width: 50%;
        height: auto;
    }
}






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



.introduction_img_1 {
    grid-area: int_im1;
    position: relative;
    aspect-ratio: 1 / 1;
    filter: var(--shadow-data);
}



.afdc3982-f40e-4c9a-977b-7873aed54ba8 img {
    width: 100%;
    height: 100%;
    border-radius: 30px;
    object-fit: cover;
}



.introduction_description {
    grid-area: int_des;
}