/* パソコン */
@media (1200px < width) {
    .introduction_design {
        width: 100%;
        overflow: hidden;
        margin: 0;
        display: grid;
        grid-template:
            "....... ....... ....... ....... ....... ....... ......." 300px
            "....... int_cat int_cat int_cat int_cat int_cat ......." auto
            "....... ....... ....... ....... ....... ....... ......." 100px
            "....... ....... ....... ....... int_im1 int_im1 ......." auto
            "....... int_tit int_tit ....... int_im1 int_im1 ......." auto
            "....... ....... ....... ....... int_im1 int_im1 ......." auto
            "....... int_des int_des ....... int_im1 int_im1 ......." auto
            "....... ....... ....... ....... ....... ....... ......." auto
            "....... ....... ....... ....... ....... ....... ......." 300px
            /0.5fr 1fr 1fr 0.3fr 1fr 1fr 0.5fr;
    }
}

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

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




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

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

/* スマホ */
@media (width < 768px) {
    .introduction_title {
        grid-area: int_tit;
        text-align: center;
    }
}






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



.introduction_img_1 {
    grid-area: int_im1;
    filter: var(--shadow-data);
}




.introduction_description {
    grid-area: int_des;
}