@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);
    }
}