@charset "UTF-8";

body{
min-width: 1260px;
background:url("/eximages/2020/images_new/ftr_pc.png") repeat-y;
background-size: 100% auto;
}
header{
height: 100vh;
min-height: 660px;
min-height: 670px;
background: #FFF;
font-size: 0;
}
#mainMenu{
width: 30vw;
width: 30%;
height: 100vh;
min-width:378px;
min-height: 660px;
min-height: 670px;
display: inline-block;
position: relative;
}
#mainMenuWrap{
display: table-cell;
vertical-align: middle;
width: 30vw;
width: 30%;
min-width:378px;
min-height: 660px;
min-height: 670px;
height: 100vh;
text-align: center;
padding: 0;
box-sizing: border-box;
margin: 0px auto;
}
#mainMenuWrap2{
display: inline-block;
padding: 40px 0 36px 0;
padding: 40px 0 40px 0;
min-width:378px;
min-height: 595px;
transition: transform 2.0s cubic-bezier(0.15,0.9,0.5,1);
}
#mainMenuWrap2.set {
transform: scale(0.8);
}
#ttl{
width:290px;
margin-top: 15px;
}
#menuWrap{
font-size: 0;
width: 330px;
margin: 20px auto;
}
.menu{
width:156px;
display: inline-block;
margin: 2px;
}
.menu img{
width:100%;
opacity: 0;
}
#billing{
width:370px;
margin: 20px auto 20px auto;
margin: 20px auto 0px auto;
}
#billingFTR{
display: block;
width: 550px;
margin: 20px auto 40px auto;
}

/*キューミューカウンター*/
#kyumyuWrap{
width: 350px;
margin: 0 auto;
position: relative;
cursor: pointer;
}
#kyumyuIllust{
width: 350px;
}
#counter{
width: 199px;
height: 29px;
position: absolute;
top:49px;
left: 148px;
text-align: center;
font-size: 0;
}
#counter img{
height: 24px;
width: auto;
margin-top: 3px;
}
#heartBTN{
/*width: 199px;
height: 62px;
background: #090;*/
position: absolute;
top: 85px;
left: 145px;
text-align: left;
}
#heartBTN a{
display: inline-block;
width: 68px;
margin-left: -2px;
}

#shareWrap{
position: absolute;
/*bottom: 6px;*/
top: 6px;
left: 6px;
display: none;
}
.share{
display: inline-block;
width: 24px;
margin: 4px;
}
a.share:nth-of-type(1){
margin-left: 20px;
}
.share img{
width: 100%;
}

#mainVisual{
width: 70%;
height: 100vh;
min-width:882px;
min-height: 660px;
min-height: 670px;
display: inline-block;
box-sizing: border-box;
vertical-align: top;
position: relative;
overflow: hidden;
}

/*↓↓↓ビジュアル切り替え↓↓↓*/
#mainBG{
position: absolute;
width: 100%;
height: 100vh;
min-width:882px;
min-height: 660px;
min-height: 670px;
background: url("/eximages/2020/images_new/pc_header_bg_h.jpg") center 95% no-repeat;
background-size: cover;
/*transition: all 1.8s cubic-bezier(0.15,0.9,0.5,1);*/
transition: all 3.6s cubic-bezier(0.15,1,0.4,1);
}
#mainBG.set{
transform: scale(1.15);
opacity: 0;
}
#mainChara1{
position: absolute;
width: 100%;
height: 100vh;
min-width: 882px;
min-height: 660px;
min-height: 670px;
background: url("/eximages/2020/images_new/pc_header_chara1_h.png") center bottom no-repeat;
background-size: auto 100%;
transition: all 3.6s cubic-bezier(0.15,1,0.4,1);
opacity: 1;
}
#mainChara1.set {
transform: scale(1.6);
opacity: 0;
}
#mainChara2{
position: absolute;
width: 100%;
height: 100vh;
min-width:882px;
min-height: 660px;
min-height: 670px;
background: url("/eximages/2020/images_new/pc_header_chara2_h.png") center bottom no-repeat;
background-size: auto 100%;
transition: all 3.6s cubic-bezier(0.15,1,0.4,1);
opacity: 1;
}
#mainChara2.set {
transform: scale(1.8);
opacity: 0;
}
#mark50th{
position: absolute;
width: 72px;
top: 15px;
/*left: 15px;*/
top: 10px;
right: 10px;
z-index: 2;
}
#catch{
position: absolute;
width: 100%;
height: 100vh;
min-width:882px;
min-height: 660px;
min-height: 670px;
background: url("/eximages/2020/images_new/catch_pc_h2.png") center bottom no-repeat;
background-size: auto 100%;
transition: all 3.6s cubic-bezier(0.15,1,0.4,1);
opacity: 1;
}
#catch.set {
transform: scale(1.8);
opacity: 0;
}

/*新ビジュアル用*/
#main2BG{
position: absolute;
width: 100%;
height: 100vh;
min-width:882px;
min-height: 660px;
min-height: 670px;
background: url("/eximages/2020/images_new/pc_header2_bg.jpg") center 95% no-repeat;
background-size: cover;
transition: all 3.6s cubic-bezier(0.15,1,0.4,1);
opacity: 1;
}
#main2BG.set{
transform: scale(1.15);
opacity: 0;
}
#main2Chara{
position: absolute;
width: 100%;
height: 100vh;
min-width:882px;
min-height: 660px;
min-height: 670px;
background: url("/eximages/2020/images_new/pc_header2_chara2.png") center bottom no-repeat;
background-size: auto 100%;
transition: all 3.6s cubic-bezier(0.15,1,0.4,1);
opacity: 1;
}
#main2Chara.set {
transform: scale(1.6);
opacity: 0;
}
#catch2{
position: absolute;
width: 100%;
height: 100vh;
min-width:882px;
min-height: 660px;
min-height: 670px;
background: url("/eximages/2020/images_new/catch2_pc.png") center bottom no-repeat;
background-size: auto 100%;
transition: all 3.6s cubic-bezier(0.15,1,0.4,1);
opacity: 1;
}
#catch2.set {
transform: scale(1.8);
opacity: 0;
}
.z1{
z-index: 1;
}
.z2{
z-index: 2;
}
/*↑↑↑ビジュアル切り替え↑↑↑*/

#spBnrWrap{
position: absolute;
width: 170px;
width: 24vh;
width: 26vh;
width: 24vh;
max-width: 230px;
max-width: 220px;
min-width: 170px;
min-width: 150px;
top: 15px;
left: 15px;
font-size: 0;
display: none;
z-index: 3;
}
.spbnr{
display: inline-block;
width: 100%;
margin-bottom: 4px;
}
#hashBNR{
position: absolute;
width: 20vh;
max-width: 120px;
top: 80px;
right: 10px;
z-index: 3;
display: none;
}
#hashBNR a{
width: 100%;
}
#headlineBG,
#hlWrap{
position: absolute;
bottom:15px;
left: 15px;
height: 38px;
/*background: #909;*/
font-size: 0;
display: none;
z-index: 3;
}
#hlM{
height: 38px;
}
.hl{
font-size: 14px;
line-height: 25px;
margin-top: 8px;
margin-left: 40px;
}
.hlNew{
display: inline-block;
color: #FF0;
text-decoration: none;
margin-right: 5px;
}
.hlDate{
display: inline-block;
color: #FFF;
text-decoration: none;
padding-right: 20px;
background:url("/eximages/2020/images_new/hl_pc_dot.png") right center repeat-y;
background-size: 19px 25px;
}
.hlTXT{
display: inline-block;
color: #FFF;
text-decoration: underline;
}
.ticker {
/*margin: 0 auto;*/
position: relative;
width: 65vw;
min-width: 780px;
height: 38px;
overflow: hidden;
}

.ticker ul {
width: 100%;
position: relative;
}

.ticker ul li {
width: 100%;
display: none;
height: 38px;
}

footer{
padding: 20px 10px;
}

/*スポンサーバナー*/
#sponcerWrap{
font-size: 0;
text-align: center;
padding: 40px 10px 20px 10px;
width: 100%;
margin: 0 auto;
box-sizing: border-box;
}
.sponcer{
display: inline-block;
width:120px;
margin-right: 5px;
margin-bottom: 5px;
}

#officialSNSwrap{
display: block;
margin: 10px auto 10px auto;
text-align: center;
font-size: 0;
}
#ctgrySNS{
display: block;
width: 190px;
margin: 0px auto 5px auto;
text-align: center;
}
#officialSNSwrap a{
display: inline-block;
width: 38px;
margin-right: 10px;
}
#officialSNSwrap a#snsLast{
margin-right: 0px;
}



#subBNRwrap{
text-align: center;
margin: 30px auto;
font-size: 0;
}
#subBNRwrap a{
display: inline-block;
width: 230px;
margin-right: 7px;
}

#linksWrap{
text-align: center;
margin: 30px auto;
font-size: 0;
}

#linksWrap a{
display: inline-block;
width: 200px;
margin-right: 7px;
}
#linksWrap a:nth-last-of-type(1){
margin-right: 0px;
}

#tohoWrap{
text-align: center;
margin: 30px auto;
font-size: 0;
}

#tohoWrap a{
display: inline-block;
width: 170px;
margin-right: 7px;
}
#tohoWrap a:nth-last-of-type(1){
margin-right: 0px;
}

#footerLink{
margin: 20px auto;
font-size: 11px;
display:block;
line-height: 1em;
text-align: center;
color: #FFF;
}
#footerLink a,
#footerLink a:visited {
color: #FFF;
}
#footerLink a:hover {
color: #FE0;
}
#billing2{
display: block;
margin: 10px auto 0 auto;
width: 420px;
}
#cr{
display: block;
margin: 5px auto 0 auto;
width: 210px;
}



/*ポップアップ系*/
#popupBG{
position: fixed;
z-index: 10;
width: 120vw;
height: 120vh;
top: 0;
left: 0;
background: rgba(255,255,255,0.9);
cursor: pointer;
}
#popupBG,
#maeWin,
#nyuWin{
display: none;
}
.popup{
position: absolute;
z-index: 10;
width: 92%;
max-width: 650px;
}
.popupWrap{
text-align: center;
}
.popupImg{
border: solid 5px #1e75cd;
border-radius: 20px;
background: #1e75cd; 
}
.maeBTN{
position: absolute;
top:0;
left: 0;
width: 330px;
left: 155px;
top:625px;
}
.close{
/*width: 96px;
margin: 20px auto;
cursor: pointer;
pointer-events: auto;*/

position: fixed;
width: 48px;
top: 10px;
right: 10px;
cursor: pointer;
pointer-events: auto;

}
#trWin{
position: fixed;
z-index: 5;
top: 0;
left: 0;
width: 110vw;
height: 110vh;
background: rgba(255,255,255,0.9);
display: none;
}
#player{
width: 100vw;
height: 56.25vw;
}


.modaal{
display: none;
}
.modaal-close{
position: fixed;
cursor: pointer;
opacity: 1;
width: 48px;
height: 48px;
top: 10px;
right: 10px;
background: url("/eximages/2020/images_new/close_pc.png") center center no-repeat;
background-size: 48px 48px;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
font-size: 0;
}
.modaal-close:focus,
.modaal-close:hover {
opacity: 0.7;
}
.modalAnimation{
transform: scale3d(0.9,0.9,0.9);
opacity: 0;
transition: all 0.2s ease-in-out;
}
.modalOpen{
opacity: 1;
transform: scale3d(1.0,1.0,1.0);
transition: all 0.2s ease-in-out;
}
.modaal-container{
width: 90%;
max-width: 600px;
background: transparent;
padding: 0;
}

/*
#correct,
#incorrect{
width: 90%;
max-width: 1040px;
box-sizing: border-box;
margin: 0 auto;
padding: 5vw 0;
border-radius: 8vw;
background: #FFF;
text-align: center;
}*/
.modalMax{
width: 90%;
max-width: 600px;
}

#kyuWrap{
width: 100%;
box-sizing: border-box;
margin: 0 auto;
padding: 20px 0;
border-radius: 20px;
background: #FFF;
text-align: center;
border: solid 5px #6db647;
}
#myuWrap{
width: 100%;
box-sizing: border-box;
margin: 0 auto;
padding: 20px 0;
border-radius: 20px;
background: #FFF;
text-align: center;
border: solid 5px #ef7ca6;
}
.modalImg{
width: 510px;
}
.kyumyuWPbtn{
display: inline-block;
width: 210px;
margin: 10px 10px 40px 10px;
}
.kyumyuMSGbtn{
display: inline-block;
width: 260px;
margin: 10px;
}