@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%;
background: #f1e2c9;

}
* {
-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;}
.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: 100;    position: fixed;    bottom:5em;    right: 1em;}
#totop a {    width: 62px;    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: 15px;
  width: 15px;
  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; margin:0;}

/*upper*/
#header_upper{padding:1.25em;position: absolute;top:0;left:0;right:0;margin:auto;opacity: 1;z-index:100;}
#header_upper .iconwrap{ margin:0;display:flex;justify-content: flex-end; align-items: center; line-height: 0.5;}
#header_upper .kaiingentei{width:20%;margin:0 0.5em 0 0}
#header_upper .icon {width:2.55%;margin:0 0 0 0.5em}
#header_upper .logo{width:7%;margin:0;margin:0 0 0 1em}



/*タイトル*/
#header_kv{overflow: hidden; background: #fff;}
#header_kv h1{position: absolute; top:23vw; left:50%;translate: -50% 0;width:62vw;opacity: 0;
animation-duration: 1s;
animation-name: kv_title;
animation-timing-function: ease-out;
animation-fill-mode:  forwards;
}
#header_kv .kv_kikan{position: absolute; bottom:0.5vw; left:50%;translate: -50% 0;width:40vw;}
#header_kv .kv_ataru{position: absolute; bottom:2vw; right:6.5%;width:17vw;opacity: 0;
animation-delay:1.5s ;   
animation-duration: 0.3s;
animation-name: kv_ataru;
animation-timing-function: ease-out;
animation-fill-mode:  forwards;
}


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

@keyframes kv_ataru {
  0% {
    opacity: 0;transform:scale(1.85);
  } 
  100% {
    opacity: 1;transform:scale(1); 
  }
}


.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:relative;margin:0 0 5vw 0; display: flex;justify-content: center; align-items: center;z-index:1;}
#navi ul{flex-flow:row nowrap;justify-content: space-between; align-items: center;}
#navi li.txt{flex-basis:12%; margin:0 2.2vw 0 0;}
#navi li.btn{flex-basis:26%; }
#navi li.btn:last-child{margin:0 0 0 1vw; }



section{position: relative;}
.inner{position:relative;max-width:1000px;margin: 0 auto;}
.content{margin:0 0 0 0;}
.line{line-height:0.5;}


#intro_upper{background: linear-gradient(to bottom,  #19185c 0%,#282896 33%,#282896 66%,#19185c 100%);padding:3%;}
#intro_upper .intro_ataru{max-width:1000px;margin:auto;}
#intro_bottom{background: #231815;padding:4% 3%;}
#intro_bottom .intro_50years{max-width:1000px;margin:auto;}

#prize{padding:0;}
#prize .prize_calendar{background: linear-gradient(to right,  #a9a5a9 0%,#f7f7f7 50%,#a9a5a9 100%);padding:3%;}
#prize .prize_calendar .content{max-width:1220px;margin:auto;}
#prize .prize_entry_tokuten{background: linear-gradient(135deg,  #aa610c 0%,#fef5e0 43%,#aa610c 100%);padding:3%;}
#prize .prize_entry_tokuten .content{max-width:1000px;margin:auto;}
#prize .prize_entry_tokuten .content .prize_entry_tokuten_btn{position: absolute; bottom:7%; left:50%;translate: -50% 0;width:65%;}
#prize .carouce_wrap{background:#231816;padding:5% 3%;}
#prize .carouce_wrap .inner{max-width:1220px;margin:auto;}
#prize .carouce_wrap .carouce_tt{width:28%;margin:0 auto 3vw auto;}
#prize .carouce_wrap .swiper .hide_left{position:absolute;top:0;left:0; width:36%;height:10%; background:#231816;z-index:2;}
#prize .carouce_wrap .swiper .hide_right{position:absolute;top:0;right:0; width:36%;height:10%; background:#231816;z-index:2;}

#howto{}
#howto .howto_3step{background: linear-gradient(to bottom,  #19185c 0%,#282896 33%,#282896 66%,#19185c 100%);padding:4% 3% 5% 3%;}
#howto .howto_3step .content{max-width:880px;margin:0 auto 1.6em auto;}
#howto .howto_3step .content a.textlink{position:absolute;top: 65%;left: 7.5%;width: 8%;height: 14px;background:#f3e3ca;opacity:0;}
#howto .howto_3step .content a.textlink:hover{ background:#f3e3ca;opacity:0.6;}
#howto .howto_3step .content a.howto_step_login{position:absolute;top: 73%; left: 5.5%;width: 28%;height:44px;background:#f3e3ca;opacity:0;}
#howto .howto_3step .content a.howto_step_login:hover{ background:#f3e3ca;opacity:0.6;}
#howto .howto_3step .content .howto_oubo_contact_here {width:57%;margin:1.5em auto 4em auto;}
@media screen and (max-width: 880px) {
#howto .howto_3step .content a.textlink{position:absolute;top: 43vw; left: 7vw;width: 7.6vw;height:3vw;}
#howto .howto_3step .content a.howto_step_login{position:absolute;top: 48.5vw; left: 5vw;width: 26vw;height:5vw;}
}

#howto .howto_bottom{max-width:880px;margin:0 auto;align-items:center;}
#howto .howto_bottom .howto_kikan{flex-basis:57%;}
#howto .howto_bottom a{flex-basis:40%;}

/*Club JRA-Netとは*/
#howto #clubjranet{background: linear-gradient(to bottom,  #016934 0%,#006835 50%,#003b1d 100%);padding:4% 3%;}
#howto #clubjranet .content{max-width:880px;margin:0 auto;}
#howto #clubjranet .about_clubjranet_detail_here{position: absolute; bottom:4%; left:50%;translate: -50% 0;width:40%;}



/*応募規約 */
#oubokiyaku{z-index:1;}
.kiyaku.format{}
.kiyaku.format .inner{padding:4% 3%;max-width: 940px;}
.kiyaku h3{color:#3c3764;text-align: center;font-size:144%;margin:0 0 1em 0;}
.kiyaku_text_wrap{background: #fff;padding:5%;}
.kiyaku_text_wrap .kiyaku_inner{height:460px;overflow-y: scroll;padding:0 1em 0 0;line-height: 166%}

.kiyaku_text_wrap .kiyaku_inner::-webkit-scrollbar{   width: 10px;}
.kiyaku_text_wrap .kiyaku_inner::-webkit-scrollbar-track{   background-color: #f0f0f0;}
.kiyaku_text_wrap .kiyaku_inner::-webkit-scrollbar-thumb{   background-color: #d2a04c;}

.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: #282896;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;}
.kiyaku dt:hover{cursor:pointer;}
.kiyaku dt .icon{flex-basis: 5%;padding:1%;margin:0 3% 0 2%}
.kiyaku dt .text{flex-basis: 85%;text-align: left;color:#fff;}
.kiyaku dt .mk_open,.kiyaku dt .mk_close{flex-basis: 2.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 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: 5%;padding:1%;margin:0 3% 0 1%;display:inline-block;vertical-align: top;position: relative;top:-0.25em;}
.kiyaku dd .text{width: 88%;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 .link{color:#282896;}
.kiyaku dd a{color:#282896;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:80%;color:#000;}


#qa{}
#qa .qa_wrap{background: linear-gradient(to right,  #a9a5a9 0%,#f7f7f7 50%,#a9a5a9 100%);padding:1% 0;}


#entry_area{background: linear-gradient(to bottom,  #19185c 0%,#282896 33%,#282896 66%,#19185c 100%);padding:2em 3%;}
#entry_area a{max-width:380px; margin:auto;display:block;}



#clubjranet_x{padding:2em 3%;}
#clubjranet_x a{max-width:348px; margin:auto;display:block;}


/*フッター*/
footer{background: #fff;padding:1% 2% 2% 2%;}
footer .inner{margin:auto;}

footer .footer_link{font-size:88%;margin:0 auto 2em auto;font-weight:500;}
footer .footer_link ul{ justify-content:center;align-items: center;}
footer .footer_link a{text-decoration:none;color:#000;}
footer .footer_link ul li.bar{font-size:122%;color:#000;margin:0 0.5em;}

footer .footer_logo_copyright{max-width:1220px;margin:0 auto 1em auto;}

footer .footer_logo_copyright a{flex-basis:100px; }


footer .footer_logo_copyright .copyright{font-size:77%; color:#000;text-align: center;padding:1%;}