@charset "UTF-8";

/* CAMPAIGN MODAL PC */
#campaignModal.modalArea {
    position: relative;
    background: linear-gradient(to bottom, #002060, #4d87fa 50%, #002060);
    padding: 5px;
    width: 1000px;
    box-sizing: border-box;
    box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.3);
    margin: 0 auto;
    text-align: center;
}

#campaignModal .modalInner {
    background: #f7faff;
    line-height: 160%;
    padding: 10px 20px 20px 20px;
}

.modalArea .date {
    margin-right: 40px;
    font-size: 24px;
    padding: 5px;
    text-align: center;
    background-color: #b9d0ff;
    font-weight: bold;
}

#campaignModal.modalPremium {
    background: linear-gradient(to bottom, #d1943c, #ffea96 50%, #d1943c);
}

#campaignModal .modalInnerPremium {
    background: #f6f4dc;
}

.modalArea .datePremium {
    background-color: #e5e2bc;
}

.modalArea .modalWrap {
    margin-top: 20px;
}

.modalArea .modalWrap .mdTitleLeft {
    width: 50%;
    float: left;
}

.mdTitleLeft h3 .mdlogo {
    display: inline-block;
    width: 81px;
    vertical-align: middle;
    margin-right: 10px;
}

.mdTitleLeft h3 .mdlogo img {
    width: 100%;
    height: auto;
}

.mdTitleLeft h3 .text {
    font-size: 24px;
    font-weight: bold;
    line-height: 140%;
    width: 370px;
    display: inline-block;
    vertical-align: middle;
}

.modalArea .modalWrap .mdTitleRight {
    width: 50%;
    float: left;
    position: relative;
}

.modalArea .modalWrap .mdTitleRight img {
    vertical-align: bottom;
}

.modalArea .modalWrap .mdTitleRight .bubble {
    position: absolute;
    right: 0;
    top: 0;
}

.modalArea .campignList {
    padding: 10px;
}

.modalArea .campignList ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.modalArea .campignList ul li {
    width: 225px;
    text-align: center;
}

.modalArea .campignList ul li img {
    display: block;
}

.modalArea .campignList ul li .btn {
    margin: 10px auto;
    text-align: center;
}

.modalArea .campignList ul li .btn img {
    margin: 0 auto;
    text-align: center;
}

.mdAtt1x {
    background-color: #ff0000;
    color: #FFF;
    border-radius: 20px;
    text-align: center;
    font-size: 20px;
    padding: 10px;
}

.mdAttSmall {
    border: 1px solid #1f4b92;
    background-color: #FFF;
    padding: 10px;
    margin-top: 10px;
    font-size: 14px;
    line-heigt: 20px;
}

.linkText {
    text-align: right;
    margin-top: 10px;
    font-size: 16px;
}

.linkText a {
    color: #1f4b92;
}

.linkText a:before {
    content: "";
    display: inline-block;
    background: url(/assets/img/arrow/blueS.png) center top no-repeat;
    width: 4px;
    height: 7px;
    margin-right: 5px;
}

#campaignModal .mdClose {
    display: block;
    width: 35px;
    height: 35px;
    position: absolute;
    top: 20px;
    right: 20px;
}

/* LOGIN BONUS MODAL PC */

#loginbonusModal.modalArea {
    position: relative;
    /*	background: url("/common/img/logincalendar/logincalendar_bg.png") center top no-repeat;;
    */
    padding: 5px;
    width: 1038px;
    height: 796px;
    box-sizing: border-box;
}

#loginbonusModal .modalInner {
    line-height: 160%;
    padding: 190px 35px 20px 35px;
}

.weekWrap dl {
    width: 128px;
    float: left;
    margin-right: 10px;
}

.weekWrap dl:nth-last-of-type(1) {
    margin-right: 0;
}

.weekWrap dl dt {
    background-color: #edd299;
    border-radius: 15px;
    font-size: 16px;
    text-align: center;
    font-weight: bold;
    padding: 5px;
    margin-bottom: 10px;
}

.weekWrap dl dt .weekSat {
    color: #005aff;
}

.weekWrap dl dt .weekSun {
    color: #ff0000;
}

.weekWrap dl dd {
    position: relative;
}

.weekWrap dl dd .cardbase {
    position: relative;
    z-index: 1;
}

.weekWrap dl dd .cardchara {
    position: absolute;
    top: 5px;
    left: 4px;
    z-index: 2;
}

.weekWrap dl.today dd:after {
    content: "";
    display: block;
    width: 128px;
    height: 97px;
    z-index: 3;
    /*	background:url("/common/img/logincalendar/loginstamp_anime.gif") center top no-repeat;
    */
    position: absolute;
    top: 15px;
    left: 0;
}

.mdloginText {
    margin-top: 30px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    height: 65px;
}

.mdInfoPanel {
    margin: 20px auto;
    text-align: center;
}

.mdCheck {
    display: block;
    width: 252px;
    height: 38px;
    position: absolute;
    bottom: 25px;
    left: 40px;
}

.mdCheck input[type=checkbox] {
    display: none;
    margin: 0;

}

.mdCheck input[type=checkbox] + label {
    display: block;
    width: 252px;
    height: 38px;
    /*	background: url("/common/img/logincalendar/logincalendar_nodisp_off.png") center top no-repeat;
    */
    padding: 0;
    cursor: pointer;
}

.mdCheck input[type=checkbox]:checked + label {
    /*	background: url("/common/img/logincalendar/logincalendar_nodisp_on.png") center top no-repeat;
    */
}

#loginbonusModal .mdClose {
    display: block;
    width: 35px;
    height: 35px;
    position: absolute;
    top: 35px;
    right: 35px;
}


@media screen and (min-width: 961px) {
    .sp {
        display: none;
    }

    .liMargin {
        margin-right: 5px;
    }

    .liMarginElement2 {
        margin-left: 50px;
        margin-right: 50px;
    }

    .liMarginElement3 {
        margin-right: 50px;
    }

    .liMarginElement4 {
        margin-right: 0;
    }
}

@media screen and (max-width: 960px) {
    /* CAMPAIGN MODAL SP */
    .pc {
        display: none;
    }

    #campaignModal.modalArea {
        width: 100%;
        padding: 1vw;
    }

    #campaignModal .modalInner {
        padding: 3vw;
    }

    .modalArea .date {
        margin-right: 10vw;
        font-size: 5vw;
        padding-left: 13vw;
    }

    .modalArea .modalWrap {
        margin-top: 3vw;
    }

    .modalArea .modalWrap .mdTitleLeft {
        width: 100%;
        float: none;
    }

    .mdTitleLeft h3 {
        text-align: center;
    }

    .mdTitleLeft h3 .mdlogo {
        width: 20%;
        margin-right: 3%;
    }

    .mdTitleLeft h3 .text {
        font-size: 5vw;
        width: auto;
    }

    .mdTitleLeft .title img {
        width: 100%;
        height: auto;
    }

    .modalArea .modalWrap .mdTitleRight {
        width: 100%;
        float: none;
    }

    .modalArea .modalWrap .mdTitleRight img.number {
        width: 78%;
        height: auto;
    }

    .modalArea .modalWrap .mdTitleRight img.unit {
        width: 20%;
        height: auto;
    }

    .modalArea .modalWrap .mdTitleRight .bubble {
        width: 20%;
    }

    .modalArea .campignList {
        padding: 0;
        margin-top: 5vw;
    }

    .modalArea .campignList ul li {
        width: 49%;
        margin-right: 2%;
        margin-bottom: 2vw;
    }

    .modalArea .campignList ul li:nth-of-type(2n) {
        margin-right: 0;
    }

    .modalArea .campignList ul li img {
        width: 100%;
    }

    .modalArea .campignList ul li .btn {
        margin-top: 2vw;
        padding: 0 2vw;
    }

    .mdAtt1x {
        border-radius: 10vw;
        font-size: 3.2vw;
        padding: 2vw 2vw;
    }

    .mdAttSmall {
        display: none;
    }

    .linkText {
        text-align: center;
        margin-top: 3vw;
        font-size: 3.4vw;
    }

    .linkText a {
        color: #1f4b92;
    }

    .linkText a:before {
        margin-bottom: 0.5vw;
    }

    #campaignModal .mdClose {
        width: 10vw;
        height: 10vw;
        position: absolute;
        top: 4vw;
        right: 3vw;
    }

    .mdClose img {
        width: 100%;
        height: auto;
    }

    /* LOGIN BONUS MODAL SP */
    #loginbonusModal.modalArea {
        position: relative;
        /*		background: url("/common/img/logincalendar/logincalendar_bg_sp.png") center top no-repeat / 100% auto;
        */
        padding: 3vw;
        width: 100%;
        height: 183vw;
    }

    #loginbonusModal .modalInner {
        padding: 27vw 2vw 5vw 2vw;
    }

    .weekWrap {
        letter-spacing: -.4em;
        text-align: center;
    }

    .weekWrap dl {
        letter-spacing: normal;
        width: 18%;
        float: none;
        display: inline-block;
        margin: 0 0.8%;
    }

    .weekWrap dl dt {
        line-height: 120%;
        border-radius: 3vw;
        font-size: 3.0vw;
        margin-bottom: 1vw;
        padding: 0.5vw;
    }

    .weekWrap dl dd .cardchara {
        position: absolute;
        top: 0;
        left: 1%;
        width: 98%;
    }

    .weekWrap dl dd img {
        width: 100%;
        height: auto;
    }

    .weekWrap dl.today dd:after {
        width: 98%;
        height: 20vw;
        background-size: 100% auto;
        position: absolute;
        top: 0;
        left: 1%;
    }

    .mdloginText {
        margin-top: 0;
        font-size: 3.8vw;
        height: 19vw;
        line-height: 120%;
    }

    .mdInfoPanel {
        margin: 1vw auto;
        text-align: center;
        padding: 0 1vw;
    }

    .mdInfoPanel img {
        width: 100%;
        height: auto;
    }

    .mdCheck {
        display: block;
        width: 60%;
        height: 9vw;
        position: relative;
        bottom: auto;
        left: auto;
        margin: 3vw auto 0 auto;
        text-align: center;
    }

    .mdCheck input[type=checkbox] + label {
        width: 100%;
        height: 9vw;
        background-size: 100% auto;
    }

    .mdCheck input[type=checkbox]:checked + label {
        background-size: 100% auto;
    }

    #loginbonusModal .mdClose {
        display: block;
        width: 35px;
        height: 35px;
        position: absolute;
        top: 6vw;
        right: 6vw;
    }
}

/* FREE FLOATING MODAL */
[id^='freeFloatingModal'].modalArea {
    position: relative;
    background: #4d87fa;
    padding: 5px;
    width: 1000px;
    box-sizing: border-box;
    box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.3);
    margin: 0 auto;
    text-align: center;
}

[id^='freeFloatingModal'] .modalInner {
    background: #FFF;
    line-height: 160%;
    padding: 10px 20px 20px 20px;
}

.freeImg {
    margin: 50px auto 20px auto;
}

.freeImg img {
    width: 100%;
}

.freeTtl {
    font-size: 110%;
    font-weight: bold;
    text-align: left;
    padding-bottom: 0.5em;
}

.freeTxt {
    font-size: 100%;
    font-weight: normal;
    text-align: left;
}

@media screen and (max-width: 960px) {
    [id^='freeFloatingModal'].modalArea {
        width: 100%;
        padding: 1vw;
    }

    [id^='freeFloatingModal'] .modalInner {
        padding: 3vw;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.modal {
    display: none;
    position: fixed;
    z-index: 10000;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background: rgba(0, 0, 0, 0.7);
}

.modal__overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: scroll;
}

@media screen and (max-width:960px) {
    .modal__overlay {
        align-items: baseline;
    }
}

.modal[aria-hidden="false"] {
    animation: fadeIn 0.3s;
}

.modal[aria-hidden="true"] {
    animation: fadeOut 0.3s;
}

.modal.is-open {
    display: block;
}

.modal-wrapper {
    padding: 10px 10px 0;
    margin: auto;
}
.modalArea {

}
.mdClose {
    display: block;
    width: 35px;
    height: 35px;
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
}