@charset "utf-8";

/*
************************************************************************
* CAMPAIGN & INFO
* @copyright Revolme Inc.
************************************************************************
*/

/*
************************************************************************
* CAMPAIGNブロック
************************************************************************
*/
.campaign
{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:flex-start;

    margin: -1em;
}
.campaign .campaign-item
{
    width:calc(33.3333% - 2em);
    margin:1em;
    display: block;
}
.campaign .campaign-item .image
{
    margin-bottom: 15px;
}
.campaign .campaign-item .image img
{
    border-radius:0.5em;
    width:100%;
}
.campaign .campaign-item > .image > .title
{
    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%, -50%);


    font-size:2.4rem;
    font-weight:bold;
    color:#FFFFFF;
}
.campaign .campaign-item > .text
{
    font-size: 1.4rem;
    line-height: 1.5;
}

/* == ブレークポイント ==========================================================*/
@media screen and (max-width: 1100px) {
    .campaign .campaign-item
    {
        width:calc(50% - 2em);
    }
}

/* == スマートフォンサイズ ==========================================================*/
@media screen and (max-width: 767px) {
    .campaign
    {
        display:block;
        margin: 0;
    }
    .campaign .campaign-item
    {
        width:100%;
        margin-left:0vw;
        margin-right:0vw;
        margin-bottom: 5vw;
    }
    .campaign .campaign-item .image
    {
        margin-bottom: 3vw;
    }
    .campaign .campaign-item .image img
    {
        width:100%;
    }
    .campaign .campaign-item > .image > .title
    {
        position:absolute;

        top:50%;
        left:50%;

        transform:translate(-50%, -50%);


        font-size:2.4rem;
        font-weight:bold;
        color:#FFFFFF;
    }
    .campaign .campaign-item > .text
    {
        font-size: 2.4rem;
    }
}