@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:100,300,400,500,700,900');
/*------------------------------------base*/
body{
font-family: 'Noto Sans JP', sans-serif;
font-size:100%
-webkit-text-size-adjust: none;
margin:0;
 background: #000;
color:#fff;	
}
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.fadein{transition: 1s;}

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


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

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;}
.sfont{font-size:80%;}
.left{text-align: left;}

img{width:100%;height:auto;}
a{transition: 0.2s;color:#0071ba; display:inline-block;}
a:hover{opacity:0.6;}

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

/*共通アコーディオン*/
.acc > dt{color:#000; text-align: center;font-weight:700;font-size:70%;border-top:2px solid #000;border-bottom:2px solid #000;padding:1em 0;}
.acc > dt:hover{cursor:pointer;}
.acc > dt:after{content:"\25bc";margin:0 0 0 0.5em;}
.acc > dt.active:after{content:"\25b2";}
.acc > dd{display:none; margin:1em 0 0 0;}
.acc > dt.active + dd{display:block;}

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


/* アスタリスク　注釈用 */
ul.ast {	list-style: none;font-size: 80%;margin: 1em 0 2em 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 li.red:before {	content: "\203b";	color: #f00;}
ul.ast li.ye:before {	content: "\203b";	color: #ffff00;}


/*まる数字のスタイル*/
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: 1s;
  animation-timing-function: ease-out;
  animation-fill-mode:  forwards;
}



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

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


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

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


@keyframes header_5000meisama {
0% { opacity: 0;
transform: scale(3);
}  

100% { opacity: 1; 
transform: translate(0, 0);
}
}

.header_5000meisama {
opacity: 0;	
animation-name: header_5000meisama;
animation-duration: 0.4s;
animation-delay: 2s ;	
animation-timing-function: ease-out;
animation-fill-mode:  forwards;
}


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

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



/*メニュー要素の出現アニメ*/
.fadein { opacity: 0;  transition: 1s;}
.fadein.is-show {  opacity: 1;}


/*lineから*/
.fadein_line_wh {  opacity: 0;  transform: translate(-500px, 50px);  transition: 0.5s;}
.fadein_line_wh.is-show {  transform: translate(0, 0);  opacity: 1;}

.fadein_line_bk {  opacity: 0;  transform: translate(-1000px, -100px);  transition: 1s;
}
.fadein_line_bk.is-show {  transform: translate(0, 0);  opacity: 1;}


/*左から*/
.fadein_left {  opacity: 0;  transform: translate(-100%, 0);  transition: 2.5s;
  animation-name: delay;
  animation-duration: 2.53s;
  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{ display:flex;flex-flow:column;position: relative; overflow: hidden;
height:180vw;
background: #000 url("../img/header_bg.jpg") no-repeat top center;
-moz-background-size:contain;
-webkit-background-size:contain;
-o-background-size:contain;
-ms-background-size:contain;
background-size:contain;	

	
}

h2{margin:0 auto 2em auto;}

/*upper*/
#header_upper{padding:0.75em; margin:0 0 2% 0}
#logo{flex-basis: 16%;}

#headersns{text-align: right;}
#headersns ul{display:flex;justify-content: flex-end;flex-flow:row wrap; align-items: center;}
#headersns li.icon {flex-basis: 7%;margin:0.1em 0.25em 0 0}
#headersns{flex-basis:80%;text-align: right;}

/*header_main*/
#header_main{margin:auto 9% 0 9%; padding:0;}
#header_main h1{margin:0 2% 2% 0;display:inline-block;}
#header_main .header_moraeru{margin:0 3% 3% 0;display:inline-block;}
#header_main .header_5000meisama{margin:0 0 3% 0;display:inline-block;}
#header_main .header_kikan{margin:0 0 4% 0;display:inline-block;}
#header_main .header_sokupat{width:73%; margin:0 auto 5% auto;}


/*shinki3step*/
#shinki3step{ background: #FFFF00;padding:1em 0 0.5em 0;}
#shinki3step .inner{width:90%;margin:0 auto 0 auto;}


#shinki3step .shinki_3step{margin:0 0 0.65em 0;position: relative;}



#shinki3step .shinki_3step a.sokupat{position: absolute; top:25%; left:14.5%; width:30%; height:2.15em; display:block;  }
#shinki3step .shinki_3step a.entry{position: absolute; top:52%; left:58%; width:37.5%; height:3.15em; display:block;}
#shinki3step .shinki_3step a.here{position: absolute; top:64%; left:30.5%; width:18.5%; height:1.15em; display:block;}


#shinki3step .shinki_3step a:hover{background: rgba(255,255,255,0.8); }
#shinki3step .shinki_kanryo{margin:0 0 1em 0;}
#shinki3step .shinki_entryhere{ margin:0 auto 0 auto;}


/*Q&A*/
#qa{margin:0;background: #FFFF00; border-bottom:2px solid #000;padding:0.5em 0 2em 0;}
#qa .qawrap{ padding:1em;font-size:90%;color:#000;border-radius:0.5em;}
#qa .qawrap p{margin:0 0 1em 0;}
#qa .accbox > dt{display:flex;justify-content:flex-start;flex-flow: row nowrap;margin:0 0 0.5em 0;position:relative;}


#qa dt:hover{cursor:pointer;}
#qa .accbox > dt:after{content:"\25bc";position: absolute;right:0;border:1px solid #000;border-radius:50%;font-size:80%;padding:0.25em;line-height: 1.2;}
#qa .accbox > dt.active:after{content:"\25b2";border:1px solid #EDE809;color:#EDE809}
#qa .accbox > dt .icon{flex-basis:7%;margin:0 2% 0 0;}
#qa .accbox > dt .text{flex-basis:80%;}
#qa .accbox > dd{display:none; border-bottom:1px solid #000;margin: 1em 0;font-size:80%;padding:0 0 1em 0;}
#qa .accbox > dt.active + dd{display:block;}
#qa .accbox > dd .icon{width:7%;display:inline-block;vertical-align: top;margin:0 2% 0 0;}
#qa .accbox > dd .text{width:88%;display:inline-block;vertical-align: top;}

/*benri*/


#benri{padding:3em 0 2em 0;}
#benri .benri_upper{width:81%;margin:0 auto 2.75em auto;} 
#benri .detail{width:90%;margin:0 auto 1em auto; align-items: center; flex-flow: column;}
#benri .detail .sokupat_btn_here{flex-basis:87%;margin:0 0 1.5em 0}
#benri .detail .sokupat_detail{flex-basis:90%;}


#benri dl.acc{ background: #fff; color:#000;margin:0 0 3em 0;}
#benri dl.acc dt{padding:0.75em 0;}
#benri dl.acc dd{padding:1em;text-align: center;}

#benri .sokupat_ginkou{width:90%;margin:0 auto 1.5em auto;}
#benri dl.acc a{text-indent: 0;}

#benri #sokupat dd .inner .calender{overflow: scroll;}
#benri .calender img{width:200vw; }




/*chance*/
#chance{margin:0; padding:0.5em 0 1em 0;
background: url("../img/arimacp_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;	
}

#chance .sarani_tt{width:94%;margin:auto;}


#arimacp_bnr{}



#arimacp{
padding:1em 0 1.5em 0;
	
background: url("../img/arimacp_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;	

}


#arimacp .inner{width:90%;margin:auto; }
#arimacp .arimacp_present{margin:0 0 1em 0;}





/*clubjra*/
#clubjra{margin:0; background: #FFFF00;padding:3em 0;}
#clubjra .inner{width:90%;margin:auto;}
#clubjra .clubjranet_detail{margin:0 0 1em 0;}
#clubjra .clubjranet_detailhere{width:77%;margin:auto;}



/*bottom*/
#bottom{ position:relative;}
#bottom .bottom_upper{ background: #FFFF00;line-height: 0.5;margin:0;padding:0;}
#bottom .bottom_upper img{line-height: 0.5;margin:0;padding:0;}

#bottom .bottom_arimakinen{width:77%;margin:0 auto 2.5em auto;} 
#bottom .bottom_entryhere{width:77%;margin:0 auto 1.5em auto;} 

#bottom .bottom_kikan{width:77%; padding:3%; margin:0 auto 1em auto;border:1px solid #ffff00; color:#ffff00;} 
#bottom .bottom_kikan ul{margin:0;font-size:75%;}
#bottom .bottom_kikan .bottom_kikan_wrap{margin:0 0 1em 0;font-size:88%;}
#bottom .bottom_kikan .bottom_kikan_wrap .bottom_kikan_tt{}
#bottom .bottom_kikan .bottom_kikan_wrap .bottom_kikan_day{}
#bottom .bottom_kikan .bottom_kikan_wrap .bottom_kikan_day span{display:inline-block;width:1em;text-align: right;}


@media screen and (max-width: 320px) {
#bottom .bottom_kikan .bottom_kikan_wrap{font-size:70%;}
#bottom .bottom_kikan ul{font-size:70%;}
}


/* footer
================================================== */
footer{
	
padding:1em 0.5em 3em 0.5em;
text-align: center;
color:#fff;
}
footer .inner{align-items: center;justify-content: space-between; }

footer a{width:55px;}
#copyright{font-size: 70%;font-weight:200;}


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