@charset "UTF-8";

/*――――――――――――――――――――
	全体系
――――――――――――――――――――*/

body{
    font-family: 'Noto Sans JP', sans-serif;
    position: relative;
}

.inner{
    width: 1080px;
    max-width: 90%;
    margin: 0 auto;
    font-weight: 300;
}

a{
    text-decoration: none;
}

p.img{
    text-align: center;
}

.popup-modal{
    display: none;
}

/*――――――――――――――――――――
	ヘッダー
――――――――――――――――――――*/

header .mainVisual h1 img{
    width: 100%;
}

/*――――――――――――――――――――
	コンテンツ
――――――――――――――――――――*/

article section h2{
    text-align: center;
}
article section h2 img{
    max-height: 56px;    
}

article section p.btn{
    max-width: 90%;
    width: 400px;
    margin: 0 auto;
}
article section p.btn > *{
    display: block;
    text-align: center;
    width: 100%;
    font-weight: bold;
    color: #003087;
    background: #fff;
    padding: 15px;
    box-sizing: border-box;
    border: 5px solid #003087;
    border-radius: 50px;
    transition: all .3s;
}
article section p.btn > *:hover{
    background: #003087;
    color: #fff;
}
article section p.btn.refund > *{
    color: #ac9933;
    border: 5px solid #ac9933;
}
article section p.btn.refund > *:hover{
    background: #ac9933;
    color: #fff;
}

article section p.tCenter{
    text-align: center;
}

ul.markList > li,
p.attentionText,
ul.attentionList{
	text-indent: -1em;
	padding-left: 1em;
}
p.attentionText::before,
ul.attentionList > li::before{
	display: inline;
	content: "※";
}
ul.markList > li::before{
    display: inline;
    content: "・";
}

article section [class^="column"],
article section .btnArea{
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/*――――――――――――――――――――
	概要
――――――――――――――――――――*/

article section#about .inner > p + p:not(.btn){
    margin-top: 1em;
}

/*――――――――――――――――――――
	メッセージ
――――――――――――――――――――*/

article section#message{
    background: #cde9fe url("../img/back01.jpg") no-repeat bottom center;
    background-size: 100% auto;
}

article section#message .inner ul + ul{
    margin-top: 40px;
}

article section#message .inner ul li{
    box-sizing: border-box;
}

article section#message .inner ul li h4{
    color: #003087;
    padding: 0 5px 3px;
    border-bottom: 3px solid #003087;
    margin-bottom: 5px;
    font-size: 110%;
}

article section#message .inner ul li .detail p{
    font-size: 90%;
    padding: 15px;
    box-sizing: border-box;
    background: rgba( 255, 255, 255, .7 );
}

article section#message .inner ul.playerList01 li h4{
    text-align: center;
}

article section#message .inner ul.playerList01 li .detail p{
    margin-top: 10px;
}

article section#message .inner ul.playerList02 li{
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
}

article section#message .inner ul.playerList02 li p.img{
    width: 30%;
}
article section#message .inner ul.playerList02 li .detail{
    width: 66%;
    margin-left: 4%;
}

/*――――――――――――――――――――
	返礼品
――――――――――――――――――――*/

article section#rewards{
    background: #0073b6 url("../img/back02.jpg") no-repeat bottom center;
    background-size: 100% auto;
}

article section#rewards .inner > p:not(.btn){
    text-align: center;
    font-size: 130%;
    color: #fff;
    font-weight: bold;
}

article section#rewards .tabArea ul.tabList{
    display: -ms-flexbox;
    display: flex;
    width: 95%;
    margin: 0 auto;
}

article section#rewards .tabArea ul.tabList li{
    color: #fff;
    background: #bdc2d5;
    border-radius: 10px 10px 0 0;
    width: 32%;
    margin-right: 2%;
    padding: 10px;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
    cursor: pointer;
    
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
}
article section#rewards .tabArea ul.tabList li:last-child{
    margin-right: 0;
}
article section#rewards .tabArea ul.tabList li.active{
    background: #003087;
}

article section#rewards .tabArea .tabBox{
    background: #003087;
    box-sizing: border-box;
    color: #fff;
}

article section#rewards .tabArea .tabBox > *{
    display: none;
}
article section#rewards .tabArea .tabBox > *.active{
    display: block;
}

article section#rewards .tabArea .tabBox .detailBox{
    border: 1px solid #fff;
    font-size: 90%;
}
article section#rewards .tabArea .tabBox * + .detailBox{
    margin-top: 10px;
}

article section#rewards .tabArea .tabBox h4{
    font-weight: bold;
    text-align: center;
}
article section#rewards .tabArea .tabBox h4 span{
    color: #003087;
    background: #fff;
    border-radius: 2px;
    padding: 0 5px;
    margin-left: 5px;
    display: inline-block;
}
article section#rewards .tabArea .tabBox .detailBox h4{
    padding: 15px 15px 0 15px;    
}

article section#rewards .tabArea .tabBox .detailBox p{
    width: 90%;
    margin: 0 auto;
}
article section#rewards .tabArea .tabBox .detailBox h4 + *{
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #fff;
}

article section#rewards .tabArea .tabBox .detailBox > *:last-child{
    padding-bottom: 15px;
}

article section#rewards .tabArea .tabBox .detailBox p.btn{
    max-width: 100%;
    padding-bottom: 15px;
}

article section#rewards .tabArea .tabBox .detailBox p.btn a{
    padding: 2px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #fff;
    color: #003087;
}
article section#rewards .tabArea .tabBox .detailBox p.btn a:hover{
    opacity: .6;
}

article section#rewards .tabArea .tabBox .rewards02 .rewardsBox{
    background: rgba( 255, 255, 255, .5 );
    padding: 20px;
    box-sizing: border-box;
}

article section#rewards .tabArea .tabBox .rewards02 h4{
    margin-top: 10px;
}

article section#rewards .tabArea .tabBox .rewards02 > * + [class^="column"]{
    margin-top: 20px;
}

article section#rewards .tabArea .tabBox .rewards01 p.img,
article section#rewards .tabArea .tabBox .rewards03 p.img{
    position: relative;
}
article section#rewards .tabArea .tabBox .rewards01 p.img::before,
article section#rewards .tabArea .tabBox .rewards03 p.img::before{
    content: "※イメージ";
    position: absolute;
    right: 5px;
    bottom: 5px;
    font-size: 85%;
    line-height: 1em;
}
article section#rewards .tabArea .tabBox .rewards03 p.img::before{
    color: #000;
}
article section#rewards .tabArea .tabBox #grade02 .rewards03 *:nth-child(2) p.img::before{
    color: #fff;
}

article section#rewards .tabArea .tabBox > * > p{
    color: #fff;
    text-align: center;
    font-size: 130%;
    font-weight: bold;
}

.mfp-content > *{
    margin: 0 auto;
    background: #fff;
    box-sizing: border-box;
    max-width: 90%;
    font-size: 90%;
    position: relative;
    background: #003087;
    color: #fff;
}

.mfp-content > * h4{
    width: 100%;
    text-align: center;
    font-size: 130%;
    font-weight: bold;
    margin-bottom: 20px;
    color: #fff;
}
.mfp-content > * h4 span{
    background: #fff;
    color: #003087;
    font-size: 80%;
    padding: 0 5px;
    margin-left: 5px;
    border-radius: 3px;
}

.mfp-content > * dl{
    margin-top: 10px;
}

.mfp-content > * dl dt{
    background: #fff;
    font-weight: bold;
    color: #003087;
    width: 6em;
    text-align: center;
    display: inline-block;
    margin-right: .5em;
    vertical-align: top;
}
.mfp-content > * dl dd{
    width: calc( 100% - 7em );
    display: inline-block;
}
.mfp-content > * dl dt:nth-of-type(n+2),
.mfp-content > * dl dd:nth-of-type(n+2){
    margin-top: 5px;
}

.mfp-content > * .popup-modal-dismiss{
    width: 100%;
    margin-top: 20px;
}
.mfp-content > * .popup-modal-dismiss a{
    display: block;
    text-align: center;
    width: 160px;
    color: #003087;
    background: #fff;
    padding: 8px;
    margin: 0 auto;
}

.mfp-close-btn-in .mfp-close{
    color: #fff !important;
}

article section#rewards .deduction{
    margin-top: 30px;
}

article section#rewards .deduction > p{
    color: #fff;
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
}

article section#rewards .deduction .deductionBox{
    background: #fff;
    padding: 50px;
    box-sizing: border-box;
    text-align: center;
}

/*――――――――――――――――――――
	お申し込み方法
――――――――――――――――――――*/

article section#method h3{
    color: #003087;
    padding-bottom: 5px;
    border-bottom: 3px solid #003087;
    margin-bottom: 10px;
    font-size: 150%;
    font-weight: bold;
    text-align: center;
}

/*――――――――――――――――――――
	払い戻しボタン
――――――――――――――――――――*/

article section.floatBtn p{
    position: fixed;
    right: 0;
    bottom: 0;
    width: 250px;
}

article section.floatBtn p a{
    display: block;
    background: #ac9933;
    color: #fff;
    padding: 15px;
    text-align: center;
    border-radius: 10px 0 0 0;
    font-weight: bold;
    transition: all .3s;
}
article section.floatBtn p a:hover{
    opacity: .6;
}

/*――――――――――――――――――――
	フッター
――――――――――――――――――――*/

footer{
    background: #000;
    text-align: center;
    padding: 50px;
    font-size: 12px;
    color: #fff;
}

footer p.logo{
    width: 188px;
    margin: 0 auto 30px;
}

footer small{
    font-size: 11px;
    margin-top: 10px;
    display: inline-block;
}


/*――――――――――――――――――――　PC　――――――――――――――――――――*/

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

    /*――――――――――――――――――――
        全体系
    ――――――――――――――――――――*/

    body{
        min-width: 1200px;
    }

    .inner{
        padding: 80px 0;
    }

    /*――――――――――――――――――――
        コンテンツ
    ――――――――――――――――――――*/

    article section h2{
        margin-bottom: 60px;
    }

    article section .btnArea p.btn{
        margin: 0;
    }
    article section .inner > * + p.btn,
    article section .btnArea{
        margin-top: 60px;
    }
    article section .btnArea p.btn:last-child{
        margin-left: 50px;
    }

    article section .column2Box > *{
        width: 48%;
        margin-right: 4%;
    }
    article section .column2Box > *:nth-child(2n){ margin-right: 0; }
    article section .column2Box > *:nth-child(n+3){ margin-top: 20px; }
    
    article section .column3Box > *{
        width: 32%;
        margin-right: 2%;
    }
    article section .column3Box > *:nth-child(3n){ margin-right: 0; }
    article section .column3Box > *:nth-child(n+4){ margin-top: 20px; }
    
    article section .column4Box > *{
        width: 23.5%;
        margin-right: 2%;
    }
    article section .column4Box > *:nth-child(4n){ margin-right: 0; }
    article section .column4Box > *:nth-child(n+5){ margin-top: 20px; }

    /*――――――――――――――――――――
        概要
    ――――――――――――――――――――*/

    article section#about .inner > p{
        font-size: 120%;
        text-align: center;
    }

    /*――――――――――――――――――――
        メッセージ
    ――――――――――――――――――――*/

    article section#message .inner ul.playerList01 li{
        width: 30%;
        margin-right: 5%;
    }
    article section#message .inner ul.playerList01 li:nth-child(3n){
        margin-right: 0;
    }

    article section#message .inner ul.playerList02 li .detail p{
        height: calc( 100% - 38px );    
    }

    /*――――――――――――――――――――
        返礼品
    ――――――――――――――――――――*/

    article section#rewards .tabArea{
        margin-top: 60px;
    }
    
    article section#rewards .tabArea .tabBox{
        padding: 50px;
    }
    
    article section#rewards .tabArea .tabBox > * > * + *{
        margin-top: 20px;
    }

    article section#rewards .tabArea .tabBox .detailBox{
        text-align: center;
    }

    article section#rewards .tabArea .tabBox .rewards02 .rewardsBox.explanationBox{
        width: 100%;
        display: -ms-flexbox;
        display: flex;
        align-items: center;
    }
    article section#rewards .tabArea .tabBox .rewards02 .rewardsBox.explanationBox .imgBox{
        width: 30%;
    }
    article section#rewards .tabArea .tabBox .rewards02 .rewardsBox.explanationBox .textBox{
        width: 68%;
        margin-left: 2%;
    }

    .mfp-content > *{
        width: 800px;
        padding: 30px;
        display: -ms-flexbox;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

    .mfp-content > * .img{
        width: 38%;
    }
    .mfp-content > * .textBox{
        width: 60%;
        margin-left: 2%;
    }


}
/*――――――――――――――――――――　//PC　――――――――――――――――――――*/

/*――――――――――――――――――――　SP　――――――――――――――――――――*/

@media screen and (max-width: 767px) {
	
	.displayPC{
		display: none;
	}

    /*――――――――――――――――――――
        全体系
    ――――――――――――――――――――*/

    article{
        padding-bottom: 60px;
    }

    .inner{
        padding: 50px 0;
    }

    /*――――――――――――――――――――
        コンテンツ
    ――――――――――――――――――――*/

    article section h2{
        margin-bottom: 40px;
    }
    article section h2 img{
        max-height: 33px;
    }

    article section .inner * + p.btn,
    article section .btnArea{
        margin-top: 30px;
    }
    article section .btnArea p .btn:last-child{
        margin-top: 20px;
    }

    article section .column3Box > *,
    article section .column4Box > *{
        width: 48%;
        margin-right: 4%;
    }
    article section .column3Box > *:nth-child(3n),
    article section .column4Box > *:nth-child(4n){ margin-right: 0; }
    article section .column3Box > *:nth-child(n+4),
    article section .column4Box > *:nth-child(n+5){ margin-top: 20px; }


    /*――――――――――――――――――――
        メッセージ
    ――――――――――――――――――――*/

    article section#message .inner ul li + li{
        margin-top: 20px;
    }
    
    article section#message .inner ul li .detail p{
        padding: 10px 15px;
    }

    article section#message .inner ul.playerList01 li{
        width: 100%;
        margin-right: 0;
    }
    article section#message .inner ul.playerList01 li h4{
        margin-bottom: 10px;
    }
    article section#message .inner ul.playerList01 li p.img{
        width: 80%;
        margin: 0 auto;
    }
    
    article section#message .inner ul.playerList02 li .detail p{
        font-size: 80%;
    }

    /*――――――――――――――――――――
        返礼品
    ――――――――――――――――――――*/

    article section#rewards .tabArea{
        margin-top: 30px;
    }
    
    article section#rewards .tabArea ul.tabList{
        justify-content: space-between;
        width: 100%;
    }
    
    article section#rewards .tabArea ul.tabList li{
        width: 32.5%;
        font-size: 12px;
        line-height: 1.2em;
        font-weight: 500;
    }
    
    article section#rewards .tabArea .tabBox{
        padding: 30px;
    }
    
    article section#rewards .tabArea .tabBox > * > * + *{
        margin-top: 20px;
    }
    
    article section#rewards .tabArea .tabBox .rewardsBox{
        width: 100%;
        margin-right: 0;
    }
    
    article section#rewards .tabArea .tabBox .rewardsBox + .rewardsBox{
        margin-top: 20px;
    }
    
    article section#rewards .tabArea .tabBox .rewards02 .rewardsBox p.img{
        width: 50%;
        margin: 0 auto;
    }
    
    article section#rewards .tabArea .tabBox .rewards02 .rewardsBox.explanationBox .textBox{
        margin-top: 10px;
    }

    .mfp-content > *{
        max-width: 95%;
        padding: 20px;
    }

    .mfp-content > * .textBox{
        margin-top: 10px;
    }
    
    article section#rewards .deduction .deductionBox{
        padding: 20px 10px;
    }

    /*――――――――――――――――――――
        払い戻しボタン
    ――――――――――――――――――――*/

    article section.floatBtn p{
        width: 100%;
    }

    article section.floatBtn p a{
        border-radius: 10px 10px 0 0;
        padding: 10px;
        width: 95%;
        margin: 0 auto;
        box-sizing: border-box;
    }

    /*――――――――――――――――――――
        フッター
    ――――――――――――――――――――*/

    footer p.logo{
        width: 140px;
        margin: 0 auto 20px;
    }


}
/*――――――――――――――――――――　//SP　――――――――――――――――――――*/