@charset "UTF-8";

:root {
    --maincolor: #336fd8;
}

/*---------- campaign ----------*/
.campaign_box h2 {
    -webkit-text-stroke: 5px #1f5cc9;
    paint-order: stroke;
    padding: 0 1em;
    left: 50%;
    transform: translateX(-50%);
}
.campaign_box h2 .title_r {
    display: flex;
    align-items: end;
    font-size: 0.7em;
    color: #ffff00;
}
.campaign_box h2 .title_r strong {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 4em;
    font-weight: 600;
    line-height: 1;
}
.campaign_box h2 .title_r .zoryo {
    font-size: 2em;
    margin-top: 3px;
    display: inline-block;
}
.campaign_box h2:before,
.campaign_box h2:after {
    position: absolute;
    top: 0;
    content: "";
    width: 1px;
    height: 100%;
    background: #fff;
    border: 3px solid #1f5cc9;
    border-radius: 3px;
}
.campaign_box h2:before {
    left: 0;
    transform: rotate(-25deg);
}
.campaign_box h2:after {
    right: 0;
    transform: rotate(25deg);
}
@media screen and (max-width: 640px) {
    .campaign_box h2 {
        -webkit-text-stroke: 3px #1f5cc9;
    }
    .campaign_box h2 .title_r .zoryo {
        margin-top: 0;
        font-size: 2.3em;
        vertical-align: bottom;
        line-height: 1.2;
    }
    .campaign_box h2:before,
    .campaign_box h2:after {
        border: 1px solid #1f5cc9;
    }
}

/* IIJmioクーポンカード/デジタル */
.zoryo_list {
    display: flex;
    border: 1px solid #fff;
    border-radius: 5px;
    margin: 1.5em 0;
}
.zoryo_list li {
    width: 20%;
    border-right: 1px solid #fff;
    padding: 1.1em 0;
    text-align: center;
}
.zoryo_list li:not(.zoryo_list_head) {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 2.2em;
    font-weight: 600;
    letter-spacing: 2px;
    color: #fff;
}
.zoryo_list li:last-of-type {
    border: 0;
}
.zoryo_list_head {
    background: #fff;
}
@media screen and (min-width: 641px) {
    .zoryo_list_head {
        padding-top: 1.5em !important;
    }
}
.zoryo_list_head p {
    font-weight: bold;
    font-size: 0.85em;
}
.zoryo_list li .before_gb {
    position: relative;
    display: inline-block;
    font-size: 0.6em;
}
.zoryo_list li .before_gb:before {
    position: absolute;
    content: "";
    display: block;
    transform: rotate(-15deg);
    background-color: #ff000099;
    width: calc(100% - 0.7em);
    height: 1px;
    top: 50%;
    left: -10%;
}
.zoryo_list_head img {
    margin-top: 0.5rem;
}
@media screen and (max-width: 640px) {
    .zoryo_list {
        display: block;
        margin: 1em 0 1.5em;
    }
    .zoryo_list li {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #fff;
        padding: 0.3em 0;
    }
    .zoryo_list li:nth-of-type(2) {
        padding-top: 0.5em;
    }
    .zoryo_list_head {
        position: relative;
    }
    .zoryo_list_head:after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        border: 8px solid transparent;
        border-top: 8px solid #fff;
        transform: translateX(-50%);
    }
    .zoryo_list_head p {
        font-weight: normal;
        font-size: 1.2em;
    }
    .zoryo_list li .before_gb {
        font-size: 0.8em;
        font-weight: bold;
    }
}

/*---------- feature ----------*/
.recharge_step_box .obi_box {
    border-width: 1px;
    margin-bottom: 1em;
}
.recharge_step_box .obi_title {
    font-size: 1.5em;
    font-weight: normal;
    padding-left: 6em;
}
.recharge_step_box .obi_title:before {
    content: url(/campaign/loppi/img/coupon_digital.png);
    position: absolute;
    top: -10%;
    left: 20%;
}
@media screen and (max-width: 640px) {
    .recharge_step_box .obi_box {
        border: none;
    }
    .recharge_step_box .obi_title {
        font-size: 1.1em;
        letter-spacing: 0;
        line-height: 1.1;
        padding-left: 4em;
    }
    .recharge_step_box .obi_title:before {
        content: "";
        top: -20%;
        left: -2%;
        width: 20vw;
        height: 11vw;
        background: url(/campaign/loppi/img/coupon_digital.png) center / contain no-repeat;
    }
}

/* リチャージ手順 */
.recharge_step li p:not(.step_circle) {
    color: var(--maincolor);
}

/*---------- 商品紹介 ----------*/
#showcase .obi_title:before {
    content: url(/campaign/loppi/img/coupon_digital_large.png);
    position: absolute;
    top: -22%;
    left: 76%;
}
@media screen and (max-width: 640px) {
    #showcase .obi_title {
        font-size: 1.2em;
        text-align: center !important;
        letter-spacing: 0;
        line-height: 1.1;
        padding-left: 5em;
    }
    #showcase .obi_title:before {
        content: "";
        top: -20%;
        left: -2%;
        width: 5.5em;
        height: 3em;
        background: url(/campaign/loppi/img/coupon_digital.png) center / contain no-repeat;
    }
}

/*---------- ご購入店舗 ----------*/
.shoplist_flex .nihon {
    position: relative;
    bottom: auto;
}
.shop_box {
    left: 0;
}
.shop_box li:first-of-type {
    border-bottom: 1px solid var(--maincolor);
}
.shop_box li .shop_logo img[alt="MINISTOP"] {
    padding: 0;
}