@charset "utf-8";

/*

************************************************************************

 画像と文章

************************************************************************

*/

.image-text

{

    

}

.image-text > .image-text-item

{

    display: flex;

    flex-wrap: wrap;

    margin:-1em;

    margin-bottom:2em;

}

.image-text > .image-text-item:last-child

{

    margin-bottom:0em;

}

.image-text > .image-text-item > .image

{

    margin:1em;

    flex: 0 0 calc(35% - 2em);

}

.image-text > .image-text-item:nth-child(even) > .image

{

    order:1;

}

.image-text > .image-text-item > .text

{

    margin:1em;

    flex: 0 0 calc(100% - 2em);

    align-self: center;

}

.image-text > .image-text-item > .image + .text

{

    flex: 0 0 calc(65% - 2em);

}

.image-text > .image-text-item > .text > .title

{

    display: flex;

    flex-wrap: nowrap;

    align-items: flex-start;

    /* margin-left:-0.6em; */

}

.image-text > .image-text-item > .text > .title > i

{

    font-size: 1.2em !important;

    color: var(--body-icon-color);

    line-height: 2.0;

    margin-right: 0.25em;

}

.image-text > .image-text-item > .text > .title > .main

{

    align-self: center;

    font-weight: bold;

    font-size: 1.4em;

}

.image-text > .image-text-item.image-text-item-large > .image

{

    flex: 0 0 calc(35% - 2em);

}

.image-text > .image-text-item.image-text-item-large > .image + .text

{

    flex: 0 0 calc(65% - 2em);

}





/* ################################################################################################ */

/* ## TAB                        ################################################################## */

/* ################################################################################################ */

@media screen and (max-width:1040px) {

}



/* ################################################################################################ */

/* ## スマホサイト用スタイル ###################################################################### */

/* ################################################################################################ */

@media screen and (max-width:640px) {

    .image-text > .image-text-item > .image,

    .image-text > .image-text-item.image-text-item-large > .image

    {

        flex: 0 0 calc(100% - 2em);

    }

    .image-text > .image-text-item:nth-child(even) > .image

    {

        order:0;

    }

    .image-text > .image-text-item > .text,

    .image-text > .image-text-item > .image + .text,

    .image-text > .image-text-item.image-text-item-large > .image + .text

    {

        flex: 0 0 calc(100% - 2em);

    }

}