@charset "utf-8";

/*
************************************************************************
* ・キャンペーン
* @copyright Revolme Inc.
************************************************************************
*/

/* ################################################################################################ */
/* ## PC                         ################################################################## */
/* ################################################################################################ */

.campaign_list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: -1em;
    margin-bottom: 1em;
}
.campaign_list_item {
    width: calc(33.3333% - 2em);
    margin: 1em;
    text-align: left;
    list-style: none;
}
.campaign_list_item .title {
    font-weight: bold;
}
.campaign_list_item .image {
    display: block;
    margin-bottom: 0.2em;
}
.campaign-schedule {
    margin-bottom: 1em;
}
.campaign-description {
}
.campaign-image {
    width: 50%;
    border-radius: 1em;
    margin-bottom: 1em;
}
.campaign-image.campaign-image-w100 {
    width: 100%;
}
.campaign_list_item img,
.campaign-image img {
    border-radius: 1em;
}
.caption p {
    color: #404040;
}


.block-campaign .campaign_list_item a {
    display: block;
    color: #404040;
}

.block-campaign .campaign_list_item a:hover {
    text-decoration: none;
    opacity: 0.7;
}

.campaign_list .date {
    display: block;
}
.campaign_list .tag {
    margin: 0 1em 0 0;
    text-align: center;
    font-size: 0.8em;
}
.campaign_list .tag .blue {
    background-color: #3885ff;
    color: #fff;
    padding: 0 1em;
    margin: 0 0.2em 0 0;
    border-radius: 0.2em;
}


.campaign-detail {
    margin-bottom: 1em;
    font-size: 1em;
}
.campaign-detail .item {
    font-weight: bold;
    line-height: 2;
}
.campaign-detail .text {
    margin-bottom: 0.5em;
}
.campaign-detail .text a {
    color: #404040;
}
.campaign-detail .text a:hover {
    text-decoration: none;
}
.campaign-detail .text a.link-text {
    color: #3885ff;
}


.campaign-detail span:before {
    height: 1.4em;
    margin-right: 0.3em;
}

.campaign-detail .mail:before {
    width: 1.5em;
}

.campaign-detail .tel:before {
    width: 1.5em;
}
.campaign-detail .phone-number {
    font-size: 1.2em;
    margin-left: 0.2em;
    font-weight: bold;
}


.photo-gallery
{
    margin:-0.25em;
}
.photo-gallery-thumb
{
    display:block;
    width:25%;
    padding:0.25em;
}


.flow-reserve .flow-reserve-tel {
    margin: 0 auto;
    text-align: center;
    line-height: 1;
}

.flow-reserve .flow-reserve-web {
    float: left;
    width: 50%;
    padding-left: 3em;
    text-align: center;
    border-left: 1px solid #707070;
}

.flow-reserve .flow-reserve-web a {
    display: block;
    width: 80%;
    margin: 0 auto;
    border:1px solid #404040;
    border-radius: 1em;
    padding: 2em 0;
    color: #404040;
}
.flow-reserve .flow-reserve-web a:hover {
    background-color: #3885ff;
    color: #fff;
    font-weight: bold;
    border:1px solid #fff;
    text-decoration: none;
}
.flow-reserve .flow-reserve-web a:hover .icon-out-link:after {
    background-image: url(../../img/common/icon/ic-out-link-wh.svg);
}


.flow-reserve-tel span:before {
    width: 0.9em;
    height: 0.8em;
    margin-right: 0.3em;
}
.flow-reserve-tel .phone-number {
    display: block;
    font-size: 2em;
    margin: 0.2em 0 0.3em 0;
    line-height: 1;
    color: #404040;
    font-weight: bold;
}
.flow-reserve-tel .phone-number:hover {
    text-decoration: none;
    color: #3885ff
}
.flow-reserve-tel .phone-number .icon.tel {
    vertical-align: bottom;
}

.footer-campaign {
    margin-top: 1em;
}


/* ################################################################################################ */
/* ## TAB                        ################################################################## */
/* ################################################################################################ */
@media screen and (max-width:1320px) {

}

/* ################################################################################################ */
/* ## スマホサイト用スタイル ###################################################################### */
/* ################################################################################################ */
@media screen and (max-width:640px) {

    .campaign_list {
        margin: 0em;
        margin-bottom: 1em;
    }
    .campaign_list_item.tag_pickup {
        width: 100%;
        margin: 0 0 2em 0;
    }
    .campaign_list_item {
        width: calc(50% - 0.5em);
        margin: 1em 0.25em;
    }
    .campaign_list_item.tag_pickup .image {
        margin-bottom: 0.5em;
    }
    .campaign_list_item.tag_pickup .title {
        font-size: 1.2em;
    }

    .footer-campaign {
        margin-top: 0em;
    }
    .pickup_campaign_footer {
        margin: 0 -0.5em;
        margin-bottom: 1em;
    }
    .pickup_campaign_footer .campaign_list_item.tag_pickup {
        width: calc(50% - 1em);
        margin: 0.5em;
    }




    .campaign-image {
        width: 100%;
    }

    .photo-gallery-thumb
    {
        display:block;
        width:50%;
        padding:0.25em;
    }
    .flow-reserve .flow-reserve-tel {
        max-width: 640px;
        width: 100%;
        float: none;
        margin-bottom: 0em;
    }

    .flow-reserve .flow-reserve-web {
        float: none;
        width: 100%;
        padding-left: 0em;
        font-size: 1.2em;
        border-left:none;
    }
    .flow-reserve .flow-reserve-web .icon-out-link:after {
        width: 1em;
        height: 1em;
    }
}