@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:100,300,400,500,700,900');
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@400;500;600;700;800&display=swap');
/* SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP */		
/* SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP */		
/* SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP */		
/* SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP */		
/* SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP */		
/* SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP */		
/* SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP */		
/* SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP */		
/* SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP */		
/* SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP SP */		

/*
font-family: 'Noto Sans JP', sans-serif;
font-family: 'Shippori Mincho B1', serif;
*/
/*------------------------------------base*/

body{
font-family: 'Noto Sans JP', sans-serif;
font-size:100%
-webkit-text-size-adjust: none;

background: #efeff0;
color:#000;	
font-family: 'Shippori Mincho B1', serif;	
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.inner{position:relative;padding: 0;	margin: 0 auto;}


.center{text-align: center;}
.flex{display:flex;justify-content: center;flex-flow:row wrap;}
.bg_white{	background: #fff;}
.bg_red{	background: #d10015;}
.red{color:#b90015}
.bold500{font-weight:500;}
.notice{text-align:center;color:#fff;font-size:85%;}

span.largetext{font-size:123%;font-weight:500;display:block;text-align: center;margin:0 0 0.5em 0;}
span.largetext_btm{font-size:85%;font-weight:500;display:block;text-align: center;}
.smallfont{font-size:80%;}


img{width:100%;height:auto;}
a{transition: 0.3s;color:#007FFF; display:block;}
a:hover{opacity:0.6;}

.flex{display:flex; justify-content: space-between; flex-flow:row wrap;}



@media screen and (max-width: 320px) {
.notice{font-size:75%;}
span.largetext_btm{font-size:80%;}
}


/* アスタリスク　注釈用 */
ul.ast {	list-style: none;font-size: 70%;line-height: 120%;margin: 10px 0 0 0;text-align: left;}
ul.ast li {	margin: 0 0 5px 0;	padding-left: 1em;	text-indent: -1em;}
ul.ast li:before {	content: "\203b";	color: #000;}
ul.ast.bk li:before {	content: "\203b";	color: #000;}

/*まる数字のスタイル*/
ol.num {
  counter-reset: my-counter;
  list-style: none;
  padding: 0;
  margin: 0 0 0.5em 0;
}
ol.num li {
font-size:111%;
  line-height: 1.5;
  padding-left: 1.25em;
  position: relative;
}
ol.num li:before {
  content: counter(my-counter);
  counter-increment: my-counter;
  border: 1px solid #000; 
  border-radius: 50%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 17px;
  width: 17px;
  font-size: 70%;
	font-weight:500;
  line-height: 1;
  position: absolute;
  top: 0.45em;
  left: 0;
}



@keyframes delay {
0% {
    opacity: 0;

  }   
    
 50% {
    opacity: 0;

  }
  
  100% {
    opacity: 1;
  }
}
.delay {
  animation-name: delay;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-fill-mode:  forwards;

}

@keyframes copy {
0% { opacity: 0;
transform: translate(0, -10%);
}  

100% { opacity: 1;
transform: translate(0, 0);
}
}
.copy {
opacity: 0;	
animation-name: copy;
animation-duration: 3s;
animation-delay: 1s ;	
animation-timing-function: ease;
animation-fill-mode:  forwards;
}

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

100% { opacity: 1; 
}
}
.arima {
opacity: 0;	
animation-name: arima;
animation-duration: 2s;
animation-delay: 1s ;	
animation-timing-function: ease-out;
animation-fill-mode:  forwards;

}

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

100% { opacity: 1; 
}
}
.cp {
opacity: 0;	
animation-name: cp;
animation-duration: 2s;
animation-delay: 2s ;	
animation-timing-function: ease;
animation-fill-mode:  forwards;
}


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

100% { opacity: 1; 
}
}
.arima_roman {
opacity: 0;	
animation-name: arima_roman;
animation-duration: 7s;
animation-delay: 2s ;	
animation-timing-function: ease;
animation-fill-mode:  forwards;
}



/*メニュー要素の出現アニメ*/

.fadein { opacity: 0;  transition: 1s;}
.fadein.is-show {  opacity: 1;}



/*右から*/
.fadein_right {  opacity: 0;  transform: translate(0, 20%);  transition: 1s;}
.fadein_right.is-show {  transform: translate(0, 0);  opacity: 1;}

/*左から*/
.fadein_left {  opacity: 0;  transform: translate(-100%, 0);  transition: 3s;

  animation-name: delay;
  animation-duration: 3s;
  animation-timing-function: ease-out;
  animation-fill-mode:  forwards;

}
.fadein_left.is-show {  transform: translate(0, 0);  opacity: 1;}

/*下から*/
.fadein_up {  opacity: 0;  transform: translate(0, 10%);  transition: 1s;}
.fadein_up.is-show {  transform: translate(0, 0);  opacity: 1;}


/*上から*/
.fadein_down {  opacity: 0;  transform: translate(0, -80%);  transition: 1.5s;}
.fadein_down.is-show {  transform: translate(0, 0);  opacity: 1;}


/*------------------------------------*/

header{position: relative;}

/*upper*/
#header_upper{padding:0.25em 0.5em; z-index: 1;position: absolute;}
#header_upper .inner{justify-content: space-between;z-index:1;}
#logo{flex-basis: 16%;}
#headersns{flex-basis:80%;text-align: right;}
#headersns ul{display:flex;justify-content: flex-end;flex-flow:row wrap; align-items: center;list-style: none;}
#headersns li.icon {flex-basis: 7%;margin:0.1em 0.25em 0 0}
#headersns li.headline{flex-basis:55%;line-height: 1;margin:0 0 0 0}

/*header_main*/
#header_main{position: relative;}

#header_main .title {width:85%;margin:auto; position: absolute;left:0;right:0; bottom:14%;}
#header_main .copy{position: absolute;top:13%;left:4%;color:#000;	font-size:114%;
text-shadow: 0 10px 5px #fff,0 -10px 5px #fff,5px 0 5px #fff,-5px 0 5px #fff;
 -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}


#header_kikan {margin:0 0 1em 0;}
#header_kikan .item{margin:auto;}


/*navi*/
/*navi*/
#navi{position:relative;z-index: 2;margin:0 0 1em 0;}
#navi .inner{margin:auto;}
#navi ul.menu{align-items: center;margin:0 0.5em 1em 0.5em;list-style: none;}
#navi ul.menu li{flex-basis:31%;font-size:90%;text-align: center;}



#navi ul.menu li.basic{border-right:1px solid #000}
#navi ul.menu li.basic:first-child{border-left:1px solid #000}
#navi ul.menu li.basic a{color:#000;text-decoration: none;font-size:111%;font-weight:700;}
#navi ul.menu li.basic a:after{
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    position: relative;
    top: -0.175em;
    margin: 0 0.5em 0 0.55em;
    border-right: 2px solid #dd8008;
    border-bottom: 2px solid #dd8008;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

#navi ul.bnr{width:74%;margin:0 auto 1.5em auto;list-style: none;}
#navi ul.bnr li{margin:0 0 0.5em 0;}



@media screen and (max-width: 320px) {
#navi li.short img{height:35px;width:auto;}
}


section{margin:0 0 0 0;position: relative;}



/*intro*/
#intro{padding:0 0 1.5em 0; position: relative; overflow: hidden;}
#intro .intro_upper{width:92%;margin:0 auto 1.5em auto;}
#intro .intro_kikan{width:82%;margin:0 auto 1.5em auto;}
#intro .intro_otoku{width:89%;margin:0 auto 1.5em auto;}


h2{background: url("../img/line.png") no-repeat center center;text-align: center;font-size:188%;font-weight:700;vertical-align: middle;line-height: 1; margin:0 0 1em 0;
-moz-background-size:contain;
-webkit-background-size:contain;
-o-background-size:contain;
-ms-background-size:contain;
background-size:contain;
}

h3{background: url("../img/line_single.png") no-repeat center center;text-align: center;font-size:188%;font-weight:500;vertical-align: middle;line-height: 1; margin:0 4% 1em 4%;
-moz-background-size:cover;
-webkit-background-size:cover;
-o-background-size:cover;
-ms-background-size:cover;
background-size:cover;
}



/*prize*/
#prize{
padding:0 0 1.5em 0;	
position: relative; overflow: hidden;	
}
#prize .inner{margin:0 5% 1em 5%;}

.prizebox{ background: #fff;padding:3%;position: relative;margin:0 0 0.5em 0;}

.prizebox .sq01{position: absolute;width:25px;height:25px; background: #f3d19a;top:0;left:0;}
.prizebox .sq02{position: absolute;width:25px;height:25px; background: #f3d19a;top:0;right:0;}
.prizebox .sq03{position: absolute;width:25px;height:25px; background: #f3d19a;bottom:0;right:0;}
.prizebox .sq04{position: absolute;width:25px;height:25px; background: #f3d19a;bottom:0;left:0;}

.pinner{border-left:3px solid #c35905;border-right:3px solid #c35905;position: relative;}
.pinner .upperline{height:3px;position: absolute;top:0;width:100%; background: #c35905;
background: -moz-linear-gradient(left,  #c35905 0%, #e8cc3d 50%, #c35905 100%);
background: -webkit-linear-gradient(left,  #c35905 0%,#e8cc3d 50%,#c35905 100%);
background: linear-gradient(to right,  #c35905 0%,#e8cc3d 50%,#c35905 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c35905', endColorstr='#c35905',GradientType=1 );
}
.pinner .btmline{height:3px;position: absolute;bottom:0;width:100%; background: #c35905;
background: -moz-linear-gradient(left,  #c35905 0%, #e8cc3d 50%, #c35905 100%);
background: -webkit-linear-gradient(left,  #c35905 0%,#e8cc3d 50%,#c35905 100%);
background: linear-gradient(to right,  #c35905 0%,#e8cc3d 50%,#c35905 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c35905', endColorstr='#c35905',GradientType=1 );
}

.pinner .midline{height:3px;width:100%; background: #c35905; margin:0;
background: -moz-linear-gradient(left,  #c35905 0%, #e8cc3d 50%, #c35905 100%);
background: -webkit-linear-gradient(left,  #c35905 0%,#e8cc3d 50%,#c35905 100%);
background: linear-gradient(to right,  #c35905 0%,#e8cc3d 50%,#c35905 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c35905', endColorstr='#c35905',GradientType=1 );
}

.pinner .detail{padding:1em;}
.pinner .jyoken {margin:1em 0 0 0; }
.pinner .jyoken .jyoken_tt{ margin:0 0 0.75em 0;font-weight:700; }
.pinner .jyoken .jyoken_detail{border-top:1px solid #000;border-bottom:1px solid #000; font-weight:700; padding:0.75em 0;font-size:80%;}
.pinner .jyoken .jyoken_detail p{margin:0;line-height: 177%;font-weight:700;}
.pinner .jyoken a{color:#000; }


.prizebox + ul.ast{margin:0 0 2em 0;}

/*QUOカード部分*/

.quocard_wrap{
margin:1em 0 0 0;
padding:2% 3%;	
}
.quocard_wrap p{color:#000;font-size:70%;margin:0 0 2em 0;text-align: center;}	

.prize_a_quo_tt{margin:0 0 0.125em 0;}


.quocard {padding:0; margin:0 0 0.5em 0;}
.quocard .item{flex-basis:48%;margin:0 0 0.75em 0;}
.quocard .item a{
display:block;


/*
	border-radius:0.5em;overflow: hidden;	
-moz-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
*/
}


.quocard .item .race{font-family: 'Shippori Mincho B1', serif;color:#000;font-size:65%;font-weight:500;}
.quocard .item .race.narrow{letter-spacing: -1px}

@media screen and (max-width: 320px) {
.quocard .item .race{font-size:60%;letter-spacing: -1px}
.quocard .item .race.narrow{letter-spacing: -2px}	
}


.prize_down_arrow{width:38%;margin:1.5em auto ;}
.prize_w_tt{margin:0 5% 1em 5%;}

.prizebox.shinki{ background: #c61d14;}
.prizebox.shinki .pinner{border:2px solid #fff;position: relative;}
.prizebox.shinki .pinner .jyoken { color:#fff;}
.prizebox.shinki .pinner .jyoken .jyoken_tt{ margin:0 0  0.75em 0;font-weight:700; }
.prizebox.shinki .pinner .jyoken .jyoken_detail{border-top:1px solid #fff;border-bottom:1px solid #fff; font-weight:700; padding:0.75em 0;}
.prizebox.shinki .pinner .jyoken .jyoken_detail p{margin:0;line-height: 177%;}
.prizebox.shinki .pinner .jyoken a{color:#fff;font-weight:700; display:inline-block;}
.prize_wshinki_tt{margin:0 auto;border-bottom:2px solid #fff;}
.prize_wshinki_bnr{margin:1em auto 0 auto; }

/*howto*/
#howto{padding:0	;position: relative; overflow: hidden;}
#oubo{margin:0 0 3em 0;}
#oubo .oubo_copy{margin:0 4% 2em 4%;}
#oubo .oubo_step{margin:0 5% 2em 5%;;position: relative}
#oubo .oubo_step a.here_link{position: absolute;left:20%;top:21%;  width:23%;height:1.25em;}
#oubo .oubo_step a.rogin_link{position: absolute;left:41%;top:26%;  width:52%;height:2em;}
#oubo .oubo_step a.entry_link{position: absolute;left:32%;top:55%;  width:41%;height:3em; }


#oubo .oubo_entry_here{width:74%;margin:0 auto 0.5em auto; }
#oubo .vote_contact{font-size:80%;}
#oubo .vote_contact a{color:#000;text-align: center;}

#terms{margin:0 0 3em 0;}
#terms .kiyaku_wrap{padding:1em;margin:0 5%; background: #fff;height:390px; overflow: scroll}
#terms a{display:inline;}
#terms h4{font-size:122%;font-weight:700;margin:0 0 1em 0;text-align: center;}
#terms h5{font-size:111%;font-weight:700;margin:0 0 0.5em 0;}
#terms p{margin:0 0 1em 0;}
#terms p.mb0{margin:0 0 0.125em 0;}
#terms ul{margin:0 0 1em 1em;}
#terms ul.ast{margin:0 0 1em 0;font-size:100%;}
#terms ul.ast li{ line-height:144%;}


/*Q&A        d09816*/
#qa{
padding:0;
position: relative; overflow: hidden;	
	margin:0 0 2.5em 0;
}
#qa .qawrap{ }
#qa .qawrap .qatabcontents{ margin:0 5%;}
#qa .qawrap p{margin:0 0 1em 0;}
#qa .qawrap a{display:inline-block;}
#qa dt{display:flex;justify-content:flex-start;align-items: center; flex-flow: row nowrap;padding:0.5em; margin:0 0 0.75em 0;position:relative; background: #fff;}
#qa dt:hover{cursor:pointer;}
#qa dt:after{
	
    content: '';
    display: inline-block;
    width: 9px;
    height: 9px;
    position: relative;
    top: -0.175em;
    margin: 0 0.5em 0 0.55em;
    border-right: 3px solid #dd8008;
    border-bottom: 3px solid #dd8008;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
#qa dt.active{}
#qa dt.active:after{
    content: '';
    display: inline-block;
    width: 9px;
    height: 9px;
    position: relative;
    margin: 0 0.5em 0 0.55em;
    border-right: 3px solid #dd8008;
    border-bottom: 3px solid #dd8008;
    -webkit-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    transform: rotate(225deg);
}
#qa dt .icon{flex-basis:10%;margin:0 2% 0 0;color:#d09816;font-size:155%;font-weight:700;}
#qa dt .text{flex-basis:80%;font-size:100%;font-weight:700;}
#qa dd{display:none;opacity:0; padding:0 0.5em;margin:0 0 0.5em 0;background: #fff;}
#qa dt.active + dd{display:block;position: relative;top:-0.75em; opacity:1;}
#qa dd .icon{width:10%;display:inline-block;vertical-align: top;margin:0 2% 0 0;color:#d09816;font-size:155%;font-weight:700;line-height: 1;}
#qa dd .text{width:80%;display:inline-block;vertical-align: top;font-size:111%;}

#qa .qatab{margin:0 auto 1em auto;width:88%;}
#qa .qatab li{flex-basis: 19%; padding:0.25em 0;font-size:133%;color:#fff;border:3px double #fff;text-align: center;transition: 0.2s;}
#qa .qatab li.qatab_current{color:#c00;border:3px double #f00;background: #fff;}
#qa .qatab li:hover{cursor: pointer;opacity: 0.5;}

/*twitter*/
#twitter{margin:0 5% 3em 5%;}
#twitter .tw_forrow{margin:auto;position: relative;}
#twitter .tw_forrow a.tw_link{position: absolute;left:10%;top:49%;width:23%;height:1.75em; }
#twitter a.oubokiyaku_link{position: absolute;left:41%;bottom:12%;width:19%;height:1.75em;  }
#twitter .tw_btm_text{position:absolute;bottom:9.5em;left:0;right:0; width:90%;text-align: center;font-size:90%; color:#fff;font-family: 'Noto Sans JP', sans-serif;text-align: center;margin:auto;}

/*clubjra*/
#clunjra_net{margin:0 0 3em 0;position: relative; overflow: hidden;}
#clunjra_net .clubjranet_detail{margin:0 5% 2em 5%;}
#clunjra_net .clubjranet_btn_detaihere{width:74%;margin:0 auto 0 auto;}

/*footer*/
#footer{position:relative;margin:0; z-index: 2;
padding:12% 0 10% 0;	
background: url("../img/btm_bg.jpg") no-repeat top center;
-moz-background-size:cover;
-webkit-background-size:cover;
-o-background-size:cover;
-ms-background-size:cover;
background-size:cover;
}

#footer .bottom_arimalogo{width:84%;margin:0 auto 1em auto;}
#footer .btm_hassou{width:73%;margin:0 auto 1em auto;}
#footer .bottom_btn_entryhere{width:73%;margin:0 auto 1em auto;}
#footer .bottom_kikan{width:70%;margin:0 auto 0.5em auto;}
#footer p.notice{font-size:70%;text-align:center;color:#000;margin:0 5% 2em 5%;}
#footer .bottom_bnr{width:80%;margin:0 auto 0 auto;}

/* footer
================================================== */
footer{
padding:1em 0.5em 3em 0.5em;
text-align: center;
color:#fff;
	background: #000;
}

footer .baken{justify-content: center;margin:0 0 2em 0;font-size:75%;}
footer .baken a{justify-content: center;font-family: 'Noto Sans JP', sans-serif;color:#fff;text-decoration: none;}
footer .sepa{margin:0 0.5em }
footer .copyright{align-items: center;justify-content: space-between;}

footer a.jralogo{width:23%;margin:0 auto 1em auto;}



	

#copyright{font-size: 60%;font-weight:200;}


#totop {z-index: 100;
    position: fixed;
    bottom:0em;
    right: 1em;
}
#totop a {
    width: 40px;
    display: block;
}