@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: #fff;


}
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.fadein{transition: 1s;}
.inner{	padding: 0;	margin: 0 auto;}
.inner66{width:66%;	padding: 0;	margin: 0 auto;}
.inner70{width:70%;	padding: 0;	margin: 0 auto;}

.inner80{width:80%;	padding: 0;	margin: 0 auto;}
.inner84{width:84%;	padding: 0;	margin: 0 auto;}
.inner86{width:86%;	padding: 0;	margin: 0 auto;}
.inner90{width:90%;	padding: 0;	margin: 0 auto;}
.inner94{width:94%;	padding: 0;	margin: 0 auto;}
.item{position:relative;margin:0 0 1.25em 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;}
.smallfont{font-size:80%;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:#f36; text-align: center;font-size:95%;}
.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%;}
}


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


/*まる数字のスタイル*/
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;
}

.delay2 {
  animation-name: delay;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-fill-mode:  forwards;
}
.delay3 {
  animation-name: delay;
  animation-duration: 3s;
  animation-timing-function: ease-out;
  animation-fill-mode:  forwards;
}

/*境界*/
.border01{height:30px; background: url(../img/border01.png) repeat-x center top;
/*transform: scale(1, -1);*/
-moz-background-size:cover;
-webkit-background-size:cover;
-o-background-size:cover;
-ms-background-size:cover;
background-size:cover;	
}


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

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

/*右から*/
.fadein_right {  opacity: 0;  transform: translate(66%, 20%);  transition: 1.5s;
  animation-name: delay;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-fill-mode:  forwards;


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

/*左から*/
.fadein_left {  opacity: 0;  transform: translate(-77%, 0);  transition: 1s;}
.fadein_left.is-show {  transform: translate(0, 0);  opacity: 1;}

.fadein_uma {  opacity: 0;  transform: translate(-77%, 0);  transition: 1s;}
.fadein_uma.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, -30%);  transition: 0.5s;}
.fadein_down.is-show {  transform: translate(0, 0);  opacity: 1;}

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

header{ display:block;position: relative; overflow: hidden;}
h2{margin:0 auto 2em auto;}

/*upper*/
#header_upper{padding:0.25em;position: absolute;margin:auto;left:0;right:0;top:0;z-index: 1}
#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;}
#headersns li.icon {flex-basis:7%;margin:0 3px 0 0}
#headersns li.headline{flex-basis:60%;line-height: 1;}

/*header_main*/
#header_main{margin:0; padding:0; position: relative;}
#header_main #header_bg{}
#header_main h1{position: absolute;width:85%;top:12%;left:0;right:0;margin:auto;}
#header_main .copy{position: absolute;width:56%;top:67%;right:4%;}
#header_main .contrail{position: absolute;width:75%;top:31%;left:-26%;}
/*kikan_wrap*/
#kikan_wrap{ background: #f1264b;padding:1em 0;}
#kikan_wrap .inner{width:75%;margin:auto;}


/*shinki3step*/
#shinki3step{ background: #ffffc8;padding:1em 0;}
#shinki3step .inner{width:95%;margin:auto;}
#shinki3step .entryhere{position:absolute; width:15%; height:1em;top:67%;left:32%; z-index:1;}
#shinki3step .entryhere a{display:block;height:1em;  background: rgba(0,0,0,0)}
#shinki3step .inner.shinki_chance{width:88%;margin:auto;}


/*Q&A*/
#qa{margin:0;background: #fff; border-top:2px solid #f36;border-bottom:2px solid #f36;padding:0.5em 0;}

#qa .qawrap{ background: #f36;padding:1em;font-size:90%;color:#fff;border-radius:0.5em;}
#qa .qawrap p{margin:0 0 1em 0;}
#qa .qawrap a{color:#ffffc8;}
#qa .accbox > dt{display:flex;justify-content:flex-start;flex-flow: row nowrap;margin:0 0 0.5em 0;position:relative;}
#qa .accbox > dt:after{content:"\25bc";position: absolute;right:0;border:1px solid #fff;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:8%;margin:0 2% 0 0;}
#qa .accbox > dt .text{flex-basis:80%;}
#qa .accbox > dd{display:none; border-bottom:1px solid #fff;margin: 1em 0;font-size:80%;}
#qa .accbox > dt.active + dd{display:block;}
#qa .accbox > dd .icon{width:8%;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{}
#benri .item{margin:0 0 0.25em 0;}
#benri .flex .item{flex-basis:49%;}
#start_bank{margin:2em 0 0 0;}
#start_bank .imasugu,
#start_card .imasugu{width:35%; position: absolute; top: 10%;right:7%;}
#benri dl.acc{border-bottom:1em solid #f36;}
#benri dl.acc dt{padding:0.25em 0 0.5em 0;font-size:80%;}
#benri dl.acc dd{padding:1em;text-align: center;}
#benri .list{padding:1em 0;}

#benri dd{overflow: scroll;}
#benri dd .calender{width:200vw;}
#benri dl.acc a{text-indent: 0;}

/*chance*/
#chance{margin:0 0 2em 0;}
#chance .bnr_derby_here{width:88%; position: absolute; bottom: 4%;left:0;right:0;margin:auto}

/*clubjra*/
#clubjra{margin:0 0 2em 0;}

/*footer_derby*/
#footer_derby{ background: #c80000;	position:relative;}
#footer_derby .inner70{border:1px solid #fff;padding:1em;}
#footer_derby .inner70 .item{margin:0;}
#footer_derby .item.entry{margin:0.5em auto 2em auto;width:70%;}
#footer_derby .item.kikan{margin:0 0 1em 0;}
#footer_derby .item.ftbnr{margin:0}
#footer_derby .footer_upper{ background: #fff;line-height: 1;}

.entry_ended{margin:1em auto;width:90%; background: #000;font-size:100%;border-radius:0.5em;color:#fff;text-align: center;padding:0.5em;}

/* footer
================================================== */
footer{
padding:2em 0.5em 3em 0.5em;
 background: #c80000;	
text-align: center;
	color:#fff;
}
#footerlogo{width:22%;margin:0 auto 0.5em auto;}
#copyright{font-size: 70%;}


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