@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=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap');

/*
font-family: 'Noto Serif JP', serif;
*/

/*------------------------------------base*/
html{
  scroll-behavior: smooth;
  scroll-padding-top: 18vw;

}

body{
font-family: 'Noto Sans JP', sans-serif;
font-size:100%;
background: linear-gradient(to right,  #781522 0%,#a52e2e 30%,#a52e2e 70%,#781522 100%);

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

img{width:100%;height:auto;}
/*ie*/
img { -ms-interpolation-mode: bicubic; }
a{transition: 0.3s;color:#007bc7;}
a:hover{opacity:0.5;}
div{position:relative;}
.inner{position:relative;padding: 0 1em;	margin: 0 auto;z-index: 2;position: relative;}
.item{position:relative;margin:0 0 2em 0;}
.center{text-align: center;}
.red{color:#b90015}
.sfont{font-size:80%;}
.flex{display:flex; justify-content: space-between; flex-flow:row wrap;}

#totop {z-index: 10;    position: fixed;    bottom:0.125em;    right: 0.125em;}
#totop a {    width: 11vw;    display: block;}

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

/* アスタリスク　注釈用 */
ul.ast {	list-style: none;font-size: 90%;margin: 0;text-align: left;}
ul.ast li {	margin: 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.dot {	list-style: none;font-size: 90%;margin: 0;text-align: left;}
ul.dot li {	margin: 0;	padding-left: 1em;	text-indent: -1em;}
ul.dot li:before {	content: "\30FB";	color: #000;}
ul.dot ul.ast 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:100%;
  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;
}

/*メニュー要素の出現アニメ*/
.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{ display:block;position: relative; padding:13vw 0 0 0;
background: linear-gradient(to right,  #b31d28 0%,#84011e 100%)!important;}

/*upper*/
#header_upper{padding:3vw;opacity: 1;z-index:100;position: fixed;width:100%;
background: linear-gradient(to right,  #b31d28 0%,#84011e 100%);
}
#header_upper .iconwrap{ margin:0;display:flex;justify-content: flex-start; align-items: center; line-height: 0.5;}
#header_upper .logo{width:20vw;margin:0 2vw 0 0;}
#header_upper .kaiingentei{width:55vw;margin:0;}




#header_kv_bg{z-index:-1;overflow: hidden; background: #fff;}
#header_kv_bg .kv_image{position: absolute;top:0;left:0;right:0;opacity:0;  
animation-name: kv_ani_roop;
animation-iteration-count:infinite; 
animation-duration: 14s;
}

#header_kv_bg .kv_image.one{
animation-duration: 14s;
animation-name: kv_ani01;
animation-timing-function: ease-out;
animation-fill-mode:  forwards;
}

#header_kv_bg .kv_image.two{
animation-duration: 14s;
animation-name: kv_ani02;
animation-timing-function: ease-out;
animation-fill-mode:  forwards;
}

#header_kv_bg .kv_image.three{
animation-duration: 14s;
animation-name: kv_ani03;
animation-timing-function: ease-out;
animation-fill-mode:  forwards;
}



@keyframes kv_ani01 {
  0% {
    opacity: 0;transform:scale(1.05);
  }
  15% {
    opacity: 1;transform:scale(1);
  }
  43% {
    opacity: 1;
  }
  75% {
    opacity:1;
  }  
  100% {
    opacity: 0; 
  }
}

@keyframes kv_ani02 {
  28% {
    opacity: 0;transform:scale(1.05);
  }
  43% {
    opacity: 1;transform:scale(1);
  }
  75% {
    opacity:1;
  }  
  80% {
    opacity: 0; 
  }
}

@keyframes kv_ani03 { 
  57% {
    opacity: 0;transform:scale(1.05);
  }
  72% {
    opacity: 1;transform:scale(1);
  }
 80% {
    opacity:1;
  }   
 100% {
    opacity:1;
  } 
}





#header_kv_title{
position: absolute;
width:100%;height:100%;top:13vw;left:0;right:0;margin:auto;
display:flex;align-items: center;opacity: 1;flex-flow:column;  
    
/*background: linear-gradient(to bottom,  rgba(0,0,0,0.45) 0%,rgba(0,0,0,0) 15%,rgba(0,0,0,0) 85%,rgba(0,0,0,0.45) 100%);*/

/*
animation-delay: 3s;
animation-name: header_kv_main;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-fill-mode:  forwards;
*/
}

#header_kv_title .header_kv_title{width:90vw;position: relative;top:-6vw;}
#header_kv_title .kv_copy_left{width:95vw;margin: auto;position: relative;top:-24vw;}
#header_kv_title .kv_copy_right{width:95vw;margin:auto;position: relative;top:12vw;}

/*タイトル*/
#header_kv_ani{height:100%;width:100%;position: absolute;}

#header_kv_ani .header_kv_one{position: absolute;top:5%;left:-2.8vw;right:0;width:16%;opacity: 0;margin:auto;
animation-delay: 1s;
animation-name: header_kv_one;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-fill-mode:  forwards;
}

#header_kv_ani .header_kv_copy{position: absolute;top:8%;right:29%;width:9%;opacity: 0;
animation-delay:2s;
animation-name: header_kv_copy;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-fill-mode:  forwards;	
}


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

@keyframes delay {
0% { opacity: 0; }   
50% { opacity: 0; }
100% { opacity: 1; }
}

/*navi*/
#navi{position: absolute;width:100%;height:100%;margin:auto;z-index: 10;}
#navi ul{}
#navi li.txt{ }
#navi li.btn{margin:1em 0 0 0;}
#navi .icon_wrap{align-irtems:center;justify-content: center;}
#navi .icon_wrap .icon{flex-basis: 12vw;margin:0 6vw;}


/*
nav
------------------------------------------------------------------------------------ */
nav.globalMenuSp {
	position: fixed;
	top: 0;
	left: 0;
	background: linear-gradient(to right,  #b31d28 0%,#84011e 100%);
	color: #000;
	text-align: center;
	transform: translateY(-100%);
	transition: all 0.2s;
    opacity: 0;
    z-index:-1;
	width: 100%;
    height:100%;
    padding:30% 8% 10% 8%;
    
}
nav.globalMenuSp ul {
	/*background: rgba(255,255,255,0.7);*/
	margin: 0 auto 1.5em auto;
	padding: 0;
	width: 100%;
}
nav.globalMenuSp ul li {
	font-size: 1.1em;
	list-style-type: none;
	padding: 0;
flex-basis: 100%;
}

nav.globalMenuSp ul li span{display:block;}


/* 最後はラインを描かない */
nav.globalMenuSp ul li:last-child {
	padding-bottom: 0;
	border-bottom: none;
}
nav.globalMenuSp ul li a {
	display: block;
	color: #fff;
	padding: 0.5em 0;
}

nav.globalMenuSp ul li a.current {
	color: #fff;
}
nav.globalMenuSp ul li a.current.general {
	color: #000;
}


nav.globalMenuSp ul li.sp a {
	display: inline-block;
width:30%;
}

/*
nav.globalMenuSp ul li a:before{
content:""; 
width:0;    
height: 0;
border-style: solid;
border-color: transparent transparent transparent #fff;
border-width: 6px 0px 6px 12px;   
display:inline-block; 
    margin:0 0.5em 0 0;
}
*/

/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
    opacity: 1;
    z-index:100;
   transform: translateY(0%);
}
.navToggle {
	position: fixed;    /* bodyに対しての絶対位置指定 */
	right: 2vw;
	top:2vw;
	width: 44px;
	height: 36px;
	cursor: pointer;
	z-index: 999;
	text-align: center;
}

.navToggle span {
	display: block;
	position: absolute;    /* .navToggleに対して */
	width: 30px;
	border-bottom: solid 3px #fff;
	-webkit-transition: .35s ease-in-out;
	-moz-transition: .35s ease-in-out;
	transition: .35s ease-in-out;
	left: 6px;
}
.navToggle.active span {border-bottom: solid 3px #fff;}



.navToggle span:nth-child(1) {
	top: 7px;
}
.navToggle span:nth-child(2) {
	top: 16px;
}
.navToggle span:nth-child(3) {
	top: 25px;
}
.navToggle span:nth-child(4) {
	border: none;
	color: #eee;
	font-size: 9px;
	font-weight: bold;
	top: 34px;
}
/* 最初のspanをマイナス45度に */
.navToggle.active span:nth-child(1) {
	top: 16px;
	left: 6px;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
/* 2番目と3番目のspanを45度に*/
.navToggle.active span:nth-child(2), .navToggle.active span:nth-child(3) {
	top: 16px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transform: rotate(45deg);
}

section{position: relative;}
.content{margin:0 0 2em 0;}

.entry_area{   margin:0 0 2em 0 ;  padding:0.5em 2%;}
.entry_area .entry_area_inner{}
.entry_area .entryarea_kikan{margin:0 0 1.5em 0;}
.entry_area a{display: block;width:70%;margin:1.75em auto 0 auto;}

.title_area{position:relative; height:60vw;}
.title_area h2{width:70vw;position: absolute;top:-7vw;}
.title_area .rightsidecopy{width:12vw;position: absolute;top:0;right:6vw;top:-7vw;}

.quo_wrap.hanshin{position: absolute;width:85%;top:30.75%;left:0;right:0;margin:auto;flex-flow:column;}
.quo_wrap.nakayama{position: absolute;width:85%;top:65%;left:0;right:0;margin:auto;}

.quo_race{width:100%;margin:0 0 1em 0;}
.quoitem_wrap {flex-basis:100%;}
.quoitem_wrap .item{flex-basis:30%;margin:0 0 1.5em 0;}

section.kikan{padding:8% 2% 4% 2%;}
section.kikan.gold{padding:5% 2% 1% 2%;background: linear-gradient(to right,  #d6b65a 0%,#fbe787 30%,#d6b65a 50%,#fbe787 70%,#d6b65a 100%);}


#sec01 {}
#sec01 .inner{padding:0}


#sec02 {}
#sec02 .inner{padding:2% 3% 5% 3%;margin:auto;}
#sec02 .soukei{margin:0 0 1.5em 0;}


#prize{z-index:1;padding:4vw 0 0 0;}
#prize .title_area{
background:url("../img/prize_bg.jpg") top center no-repeat;
background-size: cover;}
#prize .inner{ padding:9% 2% 2% 2%;top:-24vw;margin:0 auto -24vw auto;}
#prize .inner .content.chance{margin:-4vw 0 8vw 0;

margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}





#sec04{background: linear-gradient(to right,  #d6b65a 0%,#fbe787 30%,#d6b65a 50%,#fbe787 70%,#d6b65a 100%);}
#sec04 .inner{padding:10% 2% 9% 2%;;margin:auto;}
#sec04 .content{margin:0 0 2em 0;}
#sec04 .clubjranet_howto_here {width:88vw;margin:auto;}
#sec04 .clubjranet_howto_here a{display: block;}

#howto{z-index:1;padding:4vw 0 0 0;}
#howto .inner{padding:10% 3% 9% 3%;margin:auto;}
#howto .title_area{background:url("../img/oubo_bg.jpg") top center no-repeat;background-size: cover;}
#howto .howto_oubo_contact_here {margin:auto;}
#howto .howto_step_login{position:absolute;top: 43.5%; left: 0%;right:0;margin:auto;width: 75vw;}
#howto .textlink{position: absolute;    width: 12.5%;
    top: 37%;
    left: 22.5%;
    height: 3%;}

/*Club JRA-Netとは*/
#sec06{}
#sec06 .inner{padding:8% 2% 2% 2%;margin:auto;}
#sec06 .about_clubjranet_free{position: absolute;width: 22%;margin:auto; TOP: 3vw; right:0;}
#sec06 .about_clubjranet_detail_here{position: absolute;width: 91%;margin:auto; bottom: 8vw; left: 0; right:0;}


/*応募規約 */
#oubokiyaku{z-index:1;padding:4vw 0 0 0;}
#oubokiyaku .title_area{
background:url("../img/oubokiyaku_bg.jpg") top center no-repeat;
background-size: cover;}
#oubokiyaku .qa_title{width:94vw;margin:0 auto 1em auto;}
.kiyaku.format{}
.kiyaku.format .inner{padding:3.5% 0 3% 0;}
.kiyaku h3{color:#3c3764;text-align: center;font-size:111%;margin:0 0 1em 0;}
.kiyaku_text_wrap{background: #fff;margin:1.5em 0}
.kiyaku_text_wrap .kiyaku_inner{height:400px;overflow-y: scroll;padding:1em}
.kiyaku_text_wrap .kiyaku_inner::-webkit-scrollbar{   width: 10px;}
.kiyaku_text_wrap .kiyaku_inner::-webkit-scrollbar-track{   background-color: #ccc;}
.kiyaku_text_wrap .kiyaku_inner::-webkit-scrollbar-thumb{   background-color: #000;}
.kiyaku_text_wrap .kiyaku_inner a{color:#3c3764;text-decoration: underline;display:inline;}
.kiyaku_text_wrap .kiyaku_inner p{margin:0 0 0.5em 0;font-size:90%;}
.kiyaku_text_wrap .kiyaku_inner ul{margin:0 0 0.5em 0;font-size:90%;}
.kiyaku_text_wrap .kiyaku_inner ol{margin:0 0 0.5em 0;font-size:90%;}

.kiyaku .kiyaku_text_wrap .kiyaku_inner h4{text-align: left;font-size:111%;margin:1em 0 0.5em 0;color:#3c3764;}
.kiyaku .qa_section{background: #333;padding:0;margin:0 0 2em 0}
.kiyaku dl{margin:0 0 0.5em 0;padding:0 0 0 0;border-bottom:1px solid #fff;}
.kiyaku dl:last-child{border-bottom:none;}
.kiyaku dt{  align-items: center;font-weight:700;padding:5px 0;font-size:90%;}
.kiyaku dt:hover{cursor:pointer;}
.kiyaku dt .icon{flex-basis: 8%;padding:1%;margin:0 3% 0 2%}
.kiyaku dt .text{flex-basis: 70%;text-align: left;color:#fff;}
.kiyaku dt .mk_open,.kiyaku dt .mk_close{flex-basis: 6%;margin:0 2% 0 0;}
.kiyaku dt.active{color:#801528}
.kiyaku dt .mk_close{display:none;}
.kiyaku dt.active .mk_open{display:none;}
.kiyaku dt.active .mk_close{display: block;}
.kiyaku dd{display:none;margin:0;font-size:90%;text-align: left;padding:1.5em 1.25%;font-weight:500;}
.kiyaku dt.active + dd{display:block; background: #fff;}
.kiyaku dd .icon{width: 8%;padding:1%;margin:0 3% 0 1%;display:inline-block;vertical-align: top;position: relative;top:-0.25em;}
.kiyaku dd .text{width: 70%;text-align: left;display:inline-block;vertical-align: top}
.kiyaku dd p + p{margin:1em 0 0 0;}
.kiyaku dd ul{margin:0.5em 0 1.5em 0}
.kiyaku dd ul li{font-size:111%;}
.kiyaku dd p.howtomailmaga{margin:3em 0 0 0;}
.kiyaku dd a{color:#e61e23;text-decoration: underline;display:inline;}
.kiyaku .notice{font-size:90%;margin:0 auto 1em auto;text-align: center;}
.kiyaku .kiyakubottom{text-align:left;font-size:60%;color:#fff;}

#sec08{background: linear-gradient(to right,  #d6b65a 0%,#fbe787 30%,#d6b65a 50%,#fbe787 70%,#d6b65a 100%);}
#sec08 .inner{padding:6% 3% 2% 3%;margin:auto;}

#sec09{z-index:1;background: linear-gradient(to right,  #3b3761 0%,#1f1e3b 100%);}
#sec09 .inner{padding:9% 3% 14% 3%;margin:auto;}
#sec09 p.howto_oubo{text-align:center;font-size:90%;color:#fff;margin:0 0 2em 0;}
#sec09 p.howto_oubo a{color:#fae600;}
#sec09 .x_cp{margin:0 auto 3em auto;}
#sec09 .x_cp_eraberupay{width:95%;margin:0 auto 2em auto;}
#sec09 .x_cp_eraberupay_text{width:95%;margin:0 auto 3em auto;}
#sec09 .x_cp_eraberupay_text a.textlink{position: absolute;width: 24.7%; top: 56.5%; left: 17.5%; height: 13%; }
#sec09 .x_cp_eraberupay_text a.textlink:hover{ background: rgba(0,0,0,0.9) }
#sec09 .x_cp_step a.textlink{position: absolute;    width: 62%;    top: 35.5%;    left: 0;    right: 0;    height: 4%;margin:auto; }
#sec09 .x_cp_step a.textlink:hover{ background: rgba(255,255,255,0.9) }
#sec09 .x_cp_step{margin:0 auto 2em auto;}
#sec09 .x_cp_official_account_btn{width:90%;margin:auto;}

#sec10 {}
#sec10 .inner{padding:0%;margin:auto;}
#sec10 .footer_title{margin:0;}
#sec10 .bottom_entry_area{width:66%;margin:auto;position: absolute;left:0;right:0;bottom:8vw;}

/*フッター*/
footer{background: #000;}
footer .inner{padding:5% 2% ;}
footer .footer_logo{width:25%; margin:0 auto 1em auto;}
footer .footer_link{font-size:70%;margin:0 auto 1em auto;font-weight:500;}
footer .footer_link ul{ justify-content:center;align-items: center;}
footer .footer_link a{text-decoration:none;color:#fff;}
footer .footer_link ul li.bar{font-size:122%;color:#fff;margin:0 0.5em;}
footer .footer_logo_copyright{margin:0 auto 1em auto;}
footer .copyright{font-size:66%; color:#fff;text-align: center;padding:1%;}