@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*/
body{
font-family: 'Noto Sans JP', sans-serif;
font-size:100%
-webkit-text-size-adjust: none;
background: #cfa74b;
background: -moz-linear-gradient(left,  #cfa74b 1%, #ffe266 35%, #ffe266 65%, #cfa74b 100%);
background: -webkit-linear-gradient(left,  #cfa74b 1%,#ffe266 35%,#ffe266 65%,#cfa74b 100%);
background: linear-gradient(to right,  #cfa74b 1%,#ffe266 35%,#ffe266 65%,#cfa74b 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cfa74b', endColorstr='#cfa74b',GradientType=1 );
}
* {
-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;}

.contents{position: relative;z-index:1;}
.inner{position:relative;max-width:1060px;	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;}


#topBtn {z-index: 10;    position: fixed;    bottom:1em;    right: 1em;}
#topBtn a {    width: 50px;    display: block;}


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

/* アスタリスク　注釈用 */
ul.ast {	list-style: none;font-size: 100%;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: 100%;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;
}


@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;
}


/*メニュー要素の出現アニメ*/
.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;}

.gra{
background: #6c0b0b;
background: -moz-linear-gradient(left,  #6c0b0b 0%, #b71f24 35%, #b71f24 65%, #6c0b0b 100%);
background: -webkit-linear-gradient(left,  #6c0b0b 1%,#b71f24 35%,#b71f24 65%,#6c0b0b 100%);
background: linear-gradient(to right,  #6c0b0b 0%,#b71f24 35%,#b71f24 65%,#6c0b0b 100%);	
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6c0b0b', endColorstr='#6c0b0b',GradientType=1 );
}	
.border_upper{ background:  url( "../img/border_upper.png") no-repeat center center;	
moz-background-size:contain;
-webkit-background-size:contain;
-o-background-size:contain;
-ms-background-size:contain;
background-size:contain;		
height:	68px;	width:100%;position: absolute;
z-index:3}

.border_bottom{ background:  url( "../img/border_bottom.png") no-repeat center center;	
moz-background-size:contain;
-webkit-background-size:contain;
-o-background-size:contain;
-ms-background-size:contain;
background-size:contain;		
height:	68px;	width:100%;position: absolute;
z-index:3}

.border_bottom.bottom_hourse{ background:  url( "../img/border_upper.png") no-repeat center center;
moz-background-size:contain;
-webkit-background-size:contain;
-o-background-size:contain;
-ms-background-size:contain;
background-size:contain;		
	height:	68px;	width:100%;position: absolute;z-index:2


}



/*　ハンバーガーメニューボタン　*/
.hamburger {
  display : block;
  position: fixed;
  z-index : 3;
  right : 0.25em;
  top   : 3px;
  width : 46px;
  height: 46px;
  cursor: pointer;
  text-align: center;
	z-index:999;
}
.hamburger span {
  display : block;
  position: absolute;
  width   : 36px;
  height  : 3px ;
  left    : 6px;
  background : #fff;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition   : 0.3s ease-in-out;
  transition        : 0.3s ease-in-out;
}
.hamburger span:nth-child(1) {
  top: 10px;
}
.hamburger span:nth-child(2) {
  top: 22px;
}
.hamburger span:nth-child(3) {
  top: 34px;
}

/* スマホメニューを開いてる時のボタン */
.hamburger.active span:nth-child(1) {
  top : 16px;
  left: 6px;
  background :#fff;
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);
}

.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
  top: 16px;
  background :#fff;
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);
}

/* メニュー背景　*/
nav.globalMenuSp {
  position: fixed;
  z-index : 2;
  top  : 0;
  left : 0;
  color: #fff;
height:100vh;	
/*  background: 	  rgba( 71,70,73,0.6 );*/
	
background: #000;

  text-align: center;
  width: 100%;
opacity: 0;	
  /*transform: translateY(-100%);*/
  transition: all 0.3s;
	
	pointer-events: none;
}

nav.globalMenuSp .logo{position: absolute;width:25%;top:0.75em;left:0.75em;}



nav.globalMenuSp ul {
  margin: 4.25em auto 2em auto;
  padding: 0;
  width: 88%;
}

nav.globalMenuSp ul li {
  list-style-type: none;
  padding: 0;
  width: 100%;
  transition: .4s all;
}
nav.globalMenuSp ul li:last-child {
  padding-bottom: 0;
}
nav.globalMenuSp ul li:hover{
  background :#ddd;
}

nav.globalMenuSp ul li a {
  display: block;
  color: #fff;
  padding: 0;
  text-decoration :none;
}

/* クリックでjQueryで追加・削除 */
nav.globalMenuSp.active {
  opacity: 1;
  display: block;
   transform: translateY(0%);
	z-index:99;
	
	overflow: scroll;
	pointer-events:auto;
}





/*ヘッダー*/
header{ display:block;position: relative; margin:0; background: #d6be00;}
/*スライド*/

#header_main{margin:0 auto; padding:0; position: relative;overflow: hidden;  background: #d6be00;overflow: hidden;
width: 100%;
height: 107vw;	
}	

.slide__img {
  animation-duration: 18s;
  animation-iteration-count: infinite;
  animation-name: slideAnime;
  animation-timing-function: ease;
  display: block;
  opacity: 0;
  object-fit: cover;	
/*
height:645px;
width:1920px;		
*/
width: 100%;
height: 100%;	
}
	
.slide__item:nth-of-type(1) .slide__img {  animation-delay: 0s;}
.slide__item:nth-of-type(2) .slide__img {  animation-delay: 6s;}
.slide__item:nth-of-type(3) .slide__img {  animation-delay: 12s;}

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

  16% {
    opacity: 1;
	  transform: translateX(0);
  }

  33% {
    opacity: 1;
	 transform: translateX(0); 
  }

  45% {
    opacity: 0;
	 transform: translateX(-20%); 
  }

  100% {
    opacity: 0;
	 transform: translateX(-20%); 
    
  }
}
.slide__item {
  bottom: 0;
/*
  height: 100%;
 width: 100%;	
*/
  position: absolute;
  left: 0;
right: 0;	
 }


/*upper*/
#header_upper{padding:0.75em 0.5em;
background: #6b5d00;
background: -moz-linear-gradient(left,  #6b5d00 15%, #a4a10a 50%, #6b5d00 85%);
background: -webkit-linear-gradient(left,  #6b5d00 15%,#a4a10a 50%,#6b5d00 85%);
background: linear-gradient(to right,  #6b5d00 15%,#a4a10a 50%,#6b5d00 85%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6b5d00', endColorstr='#6b5d00',GradientType=1 );
}
#header_upper .inner.flex{ align-items: center; justify-content: flex-start;padding:0;}
#header_upper #logo{flex-basis:25%;}
#header_upper ul{flex-basis:55%; margin:0 0 0 1em;display:flex;justify-content: flex-end; align-items: center; line-height: 0.5;}
#header_upper li.icon {width:38px;margin:0 0 0 0.75em}
#header_upper li.headline{margin:0}

/*header_main*/


/*slick*/
.slider {position: absolute;top:0;left:0;  display: flex;  width: 1920px;  height: 645px;  overflow: hidden;
 backface-visibility: visible;/*初期値 背面が可視になる*/
  backface-visibility: hidden;/*背面が非表示になる*/
}
.slider .img{display:inline-block;transform: translate3d(0,0,0); position: relative;z-index:1; margin:0;padding:0;}
.slider img {width: 1920px;  height: 645px;backface-visibility: hidden;/*追加*/}

/*header_title*/
#header_title{padding：0;position: relative;}


/*navi*/
#navi{padding:0;overflow: hidden;position: relative;}
#navi .navibg{margin:5em 0 0 0;}
#navi .inner{flex-flow:column;}
#navi .item{width:77%;margin:0 auto 0 auto;}
#navi .item a{position:relative;}
#navi .item.entryhere{width:88%;margin:2em auto 3em auto}

#navi #sns ul{ margin:0 0 0 1em;display:flex;justify-content: center; align-items: center; line-height: 0.5;list-style: none;}
#navi #sns li.icon {flex-basis:15%;margin:0 0.75em}




/*upper_info*/
#upper_info{ background: #000;padding:0 0 1.25em 0;}
.upper_info_text_wrap{}
.upper_info_text{}
.upper_info_present_wrap{position: relative;top:-5em;}
.upper_info_present{margin:0 auto 0.25em auto;}

.entry_wrap{flex-flow: column;}
.entry_wrap .upper_info_present_kikan{width:90%;margin:0 auto 1.25em auto;}
.entry_wrap .entry_btn{width:70%;margin:0 auto 1.25em auto;}


.upper_info_present_jyoken{width:90%;margin:0 auto 1em auto;}
.upper_info_super_wrap{position: relative;top:-5em;margin:0 0 -5.5em 0}
.upper_info_super{width:90%;margin:0 auto 1em auto;position: relative;}
.upper_info_super a{width:52%;height:8%;display:block;position: absolute;right:0;left:0;margin:auto;bottom:4%;}
.upper_info_super a:hover{ background:#000;opacity:0.5;}

/*prize*/
#prize{
overflow: hidden;
position: relative;
padding:1.5em 0	
}

#prize h2{width:80%;margin:0 auto 1.5em auto;}


#prize h3{height:35px;line-height:35px;text-align: center; position: relative;}
#prize h3 img.tt{width:auto;height:35px;position: relative;z-index:5;}

#prize h3.best{height:35px;line-height:35px;text-align: right; position: relative;padding:0 1.5em 0 0;}
#prize h3.best img.tt{width:auto;height:40px;position: relative;z-index:5;}



.title_obi{position: relative;padding:0.75em 0;}
.title_obi .border_upper{position: absolute;top:-34px;}
.title_obi .border_bottom{position: absolute;bottom:-34px;}
.prize_content{ background:#fff;max-width:1060px;margin:0 1.5em;position: relative;}
.prize_content_inner{padding:2em 1em;}
.nendodaihyo{margin:0 0 1em 0;}
.race_wrap{margin:0 0 1em 0}
.race_wrap .place{margin:0 0 0.75em 0;}
.race_wrap .card_wrap{margin:0;}
.race_wrap .card_wrap a{flex-basis:30%;margin:0 0 0.75em 0;}
.race_wrap .card_wrap a:last-child{flex-basis:30%;margin:0 auto;}

.race_wrap .card_wrap a:hover{ background: #ffeb80;opacity:1;}
 p.note{font-size:70%;margin:2em 0 0 0;}




.uma01{position: absolute;width:33%;right:1.75%;top:-262%;z-index:3;}
.uma02{position: absolute;width:36%;left:1.75%;top:-236%;z-index:3;}
.uma03{position: absolute;width:41%;right:1%;top:-289.5%;z-index:3;}



/*Wチャンス賞*/
.wchance{ position: relative;}
.wchance .border_upper{position: absolute;top:-34px;}
.wchance .border_bottom{position: absolute;bottom:-34px;}
.wchance .tt{margin:0 1.5em 1em 1.5em;position: absolute;z-index:2;}
.wchance .item{margin:0 auto 0 auto;position: relative;top:0;left:0;}

/*エントリーボーナス賞*/
.entrybonus{padding:2em 0 1em 0;margin:0 0 1em 0;}
.entrybonus .item{margin:0 1.5em 1em 1.5em;}
.entrybonus .btn_mm_howto{width:60%;margin:0 auto 0 auto;}

/*エントリー期間*/
.entryobi_kikan{z-index:2;position: relative;}
.entryobi_kikan .item{margin:1em 1.5em 0.5em 1.5em;}
.entryobi_kikan .entryobi_entryhere{width:55%;margin:0 auto 0 auto;}

/*応募方法　Culb JRA-Net　応募規約共通*/
.format{position: relative;margin:3em 0 4em 0;}

.format h2{text-align: center;position: relative;top:-40px;margin:0 0 -50px 0;overflow: hidden;}
.format h2 img{width:auto;height:18vw;}

.format .inner{ background: #fdf1a0;width:90%;margin:auto;}
.format a{display:block;}

/*応募方法*/
#howto.format{margin:3em 0 5em 0;}
.howto_item_wrap{padding:2em 0 20% 0;position: relative;}
a.reglink{position:absolute;width:12.75%;height:2.25%;top:23%;left:9.7%;display:block; }
a.reglink:hover{ background:#fff;opacity: 0.5;}
.howto_login{position:absolute;width:50%;top:29%;left:0;right:0;margin:auto;}
.howto_contacthere{position:absolute;width:98%;top:82.5%;left:0;right:0;margin:auto;}
.howto_entryhere{position:absolute;width:84%;top:94%;left:0;right:0;margin:auto;}

/*Club JRA-Netとは*/
.clubjranet_item_wrap{padding:2em 0 25% 0;position: relative;}
.about_clubjranet_detailhere{position:absolute;width:98%;top:94%;left:0;right:0;margin:auto;}
#mailmaga_setting{position:absolute;width:100%;height:23%;top:67%;left:0;right:0;margin:auto;}

/*応募規約 */
#oubokiyaku{position:relative;top:-2em;}/*アンカー用ID*/

#kiyaku.format{margin:5em 0 3em 0;}
#kiyaku.format .inner{padding:0 0 1em 0;font-size:90%;}
#kiyaku h3{color:#b40c18;text-align: center;font-size:105%;margin:0 0 1em 0;}
.kiyaku_text_wrap{background: #fff;padding:1em;margin:2em 1em 2em 1em}
.kiyaku_text_wrap .kiyaku_inner{height:400px;overflow-y: scroll;padding:0 1em 0 0}

/*
.kiyaku_text_wrap .kiyaku_inner::-webkit-scrollbar{
   width: 5px;
}
.kiyaku_text_wrap .kiyaku_inner::-webkit-scrollbar-track{
   background-color: #ccc;
}
.kiyaku_text_wrap .kiyaku_inner::-webkit-scrollbar-thumb{
   background-color: #000;
}
*/


/* スクロールバー本体*/
.simplebar-scrollbar::before {
  background: #000;
  border-radius: 0;
  width: 4px;


  margin-left: 0;
  margin-right: 0;
  margin-top: 0;

}
/*スクロールバー本体の透明度*/
.simplebar-scrollbar.simplebar-visible::before {
  opacity: 1;
}
/*スクロールバーの背景色*/
.simplebar-track {
  background-color: #efefef;
}









.kiyaku_text_wrap .kiyaku_inner a{color:#000;text-decoration: underline;display:inline;}
.kiyaku_text_wrap .kiyaku_inner p{margin:0 0 0.5em 0}
.kiyaku_text_wrap .kiyaku_inner ul{margin:0 0 0.5em 0}
#kiyaku .kiyaku_text_wrap .kiyaku_inner h3{text-align: left;font-size:111%;margin:1em 0 0.5em 0;}
#kiyaku .qa_section{background: #fff;padding:1em;margin:0 1em 2em 1em}
#kiyaku dl{margin:0 0 0.5em 0;padding:0 0 0.5em 0;border-bottom:1px solid #b40c18;}
#kiyaku dt{  align-items: center;font-family: 'Noto Serif JP', serif;font-weight:700;}
#kiyaku dt:hover{cursor:pointer;}
#kiyaku dt .icon{flex-basis: 10%;padding:1%;margin:0 0 0 1%}
#kiyaku dt .text{flex-basis: 70%;text-align: left;}
#kiyaku dt .mk_open,#kiyaku dt .mk_close{flex-basis: 5%;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 dt:hover{cursor:pointer;}
#kiyaku 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;}
#kiyaku dt.active:after{content:"\25b2";border:1px solid #EDE809;color:#EDE809}
*/
#kiyaku dd{display:none;margin:0 0 1em 0;font-size:90%;text-align: left;padding:1em 0;font-family: 'Noto Serif JP', serif;font-weight:700;}
#kiyaku dt.active + dd{display:block;}
#kiyaku dd .icon{width: 10%;padding:1%;margin:0 1% 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:#000;text-decoration: underline;display:inline;}
#kiyaku .notice{font-size:80%;margin:0 1em 1em 1em;}

/*Twitterキャンペーン*/
#tw_cp{
padding:0 0 3em 0;
position: relative;z-index:1;
background: #0086c9;
background: -moz-linear-gradient(left,  #0086c9 0%, #00ddc9 15%, #00ddc9 85%, #0086c9 100%);
background: -webkit-linear-gradient(left,  #0086c9 0%,#00ddc9 15%,#00ddc9 85%,#0086c9 100%);
background: linear-gradient(to right,  #0086c9 0%,#00ddc9 15%,#00ddc9 85%,#0086c9 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0086c9', endColorstr='#0086c9',GradientType=1 );
}
.tw_cp_wrap{position:relative;}
.twcp{border-bottom:4px solid #0066c9;}
.twcp_tt{margin:auto;}
.twcp_detail{position: relative;top:-1em;margin:0 1em 0 1em;}
a.link_follow{position:absolute;width:37%;height:10%; top:35.5%;left:54%;}
a.link_follow:hover{ background:#fff;opacity: 0.5;}
a.link_rule{position:absolute;width:19.5%;height:6%; top:83%;left:39.5%;}
a.link_rule:hover{ background:#00ddc9;opacity: 0.5;}

/*bottom_hourse*/
.bottom_hourse{position: relative;z-index:2;}
.bottom_hourse .border_upper{position: absolute;top:-34px;}
.bottom_hourse .border_bottom{position: absolute;bottom:-34px;}

/*フッター*/
footer{padding:1.5em 0;text-align: center; position: relative;color:#fff;z-index: 1;
background:#760811 url( "../img/footer_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 .inner{max-width:1087px;}
footer .footer_logo{max-width:84%;margin:0 auto 1.5em auto;}
footer .footer_detailhere{width:50%;margin:0 auto 1.25em auto;}
footer .jralogo {text-align: center;margin:0 auto 1.25em auto;}
footer .jralogo a{width:100px;display:inline-block;}
footer .footer_link{font-size:75%;margin:0 auto 1em auto;}
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%;}
footer .copyright{font-size:75%;position: absolute;right:0;bottom:0;}
@media screen and (max-width: 950px) {
footer .copyright{font-size:75%;position:relative;right:0;bottom:0;}
}