@charset "utf-8";

/* ------------------------------
   Universal Reset
   Contents
   Animation
------------------------------ */

/*==================================================================
   Universal Reset
==================================================================*/
html,body{margin:0;padding:0;width:100%;height:100%;font-size:100%;}
main{display:block;}
h1,h2,h3,h4,h5,h6,p,blockquote,pre,hr,div,object,ul,ol,li,dl,dt,dd,tr,td,fieldset,form,legend,small,figure{margin:0;padding:0;font-size:100%;font-weight:normal;}
ul,ol{list-style:none;}
fieldset{margin:0;padding:0;border:0 none;}
legend{display:none;}
table,th,td{border:0;border-spacing:0;}
caption,th{text-align:left;}
em,strong,cite,abbr,caption,th,address{font-style:normal;font-weight:normal;}
img{max-width:100%;border:0 none;vertical-align:bottom;_vertical-align:text-bottom;}
input:not([type="radio"]):not([type="checkbox"]),select,textarea{margin:0;padding:0;border:none;border-radius:0;vertical-align:middle;
-moz-appearance:none;-webkit-appearance:none;appearance:none;}
select::-ms-expand{display:none;}
input[type="submit"]:hover{cursor:pointer;}
input[type="image"]{max-width:100%;outline: none;}
option{padding-right:5px;}
button{background:none;padding:0;border:0;text-align:left;}
article,aside,dialog,details,figure,figcaption,footer,header,hgroup,menu,nav,section{display:block;}
mark{font-weight:normal;font-style:normal;}
blockquote,q{quotes:none;}
a{vertical-align:baseline;text-decoration:none;}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;}


/*==================================================================
   Contents
==================================================================*/
html{font-size: calc(1000vw / 750);}
body{color:#000533;background:#F0F0F0;font-size:3.2rem;font-family:'Noto Sans JP',"Helvetica Neue","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;line-height:1.6;-webkit-text-size-adjust:100%;-webkit-touch-callout:none;font-feature-settings: "palt" on;}
#container{max-width:750px;text-align:left;margin:0 auto;background:#91d4ff;}
main{z-index: 0;}
section{position:relative;overflow: hidden;}

/*========== contents ==========*/
/*--- area_total_amount ---*/
.area_total_amount{padding: 0 3rem;text-align: center;}
.area_total_amount .ttl{background: #000533;color: #fff;font-size: 4rem;border-radius: 4.3rem;margin-bottom: 4rem;padding: 1.5rem;font-weight: bold;position: relative;}
.area_total_amount .ttl::after {position: absolute;content: "";bottom: -2rem;left: calc(50% - 1.5rem);border-style: solid;border-width: 2rem 1.5rem 0;border-color: #000533 transparent;}
.area_total_amount .ttl span{position: relative;padding-left: 8rem;}
.area_total_amount .ttl span::before{position: absolute;content: "？";width: 5.5rem;height: 5.5rem;left: 0;top: calc(50% - 2.75rem);background: #fff;border-radius: 50%;color: #000533;font-size: 5rem;display: flex;align-items: center;justify-content: center;}
.area_total_amount .box_01{overflow: visible;}
.area_total_amount .box_01 > .ttl_amount{background: url(./default_bg_pattern02.png) repeat;background-size: 1.2rem;position: relative;height: 8rem;border-radius: 1.5rem 1.5rem 0 0;}
.area_total_amount .box_01 > .ttl_amount img{width: 26.4rem;position: relative;margin-top: -0.8rem;}
.area_total_amount .box_01 > .ttl_amount::before{position: absolute;content: "";top: 0;background:url(./default_amount_garland.png) center top / 100% no-repeat;width: 100%;height: 11.1rem;left: 0;right: 0;}
.area_total_amount .box_01 > .total_amount{color: #ff0064;font-size: 6rem;font-weight: bold;background: #fdf6d6;margin: 1rem;border-radius: 2rem;border: solid 0.4rem #ebe1b4;word-wrap: break-word;line-height: 1.2;padding: 2rem 1rem;}
.area_total_amount .note{font-size: 2rem;text-align: right;margin-top: 2rem;font-weight: 500;}

/*--- area_regist ---*/
.area_regist{padding: 5rem 7rem;text-align: center;}
.area_regist > p.btn_regist > a{display: block;max-width: 60.9rem;margin: 0 auto 2.5rem;}
.area_regist > p.agree{font-weight: bold;}
.area_regist > p.agree > a{color:#fff;border-bottom:0.2rem solid currentColor;}

/*--- area_summary ---*/
.area_summary > .box_01{background-repeat:no-repeat;background-size:100%;}
.area_summary > .box_01 > p{padding: 0 4rem 4rem;font-weight: bold;}

/*--- box_01 ---*/
.box_01{background: #fff;border-radius: 2rem;border: solid 0.5rem #000533;overflow: hidden;}

/*--- footer ---*/
footer {color: #FFF;font-size: 2.5rem;text-align: left;padding: 2rem 0 4rem;background: #017ad2;}
footer nav{width:100%;}
footer nav ul > li > a{position:relative;display:block;color:#FFF;padding:1.5rem 3rem 1.5rem 5.5rem;}
footer nav ul > li > a:before{position: absolute;content: "";top: 2.5rem;left: 3rem;width: 0;height: 0;
 border-style: solid;
 border-top: 1rem solid transparent;
 border-bottom: 1rem solid transparent;
 border-left: 1.5rem solid #fff;
 border-right: 0;}
footer nav ul > li > a:hover{text-decoration: underline;}
footer ul.list_caution{padding: 3rem 3rem 4rem;font-size: 2rem;line-height: 2;}
footer .copyright{font-size: 1.8rem;text-align: center;font-feature-settings: normal;}

/*========== section block ==========*/
*[class^="blc_"] > .inner{padding:4rem 3rem;}

/*--- blc_mv ---*/
.blc_mv{position:relative;overflow:hidden;min-height:145.4rem;
 background:url(./default_mv_bg.jpg) center top / cover no-repeat;padding-top: 71rem;}
.blc_mv h1{position: absolute;top: 16rem;}
.blc_mv p.bar{position: absolute;top: 0;background: #000533;color: #ffb400;border-radius: 0 0 2rem 2rem;font-weight: bold;left: 50%;transform: translate(-50%, 0);padding: 1.5rem 10rem 2rem;white-space: nowrap;line-height: 1.2;}
.blc_mv p.catch01{position: absolute;top: 9rem;}
.blc_mv p.catch02{position: absolute;top: 40rem;}

/*--- blc_reason ---*/
.blc_reason ul.list_reason > li:not(:last-child){margin-bottom: 3rem;}
.blc_reason ul.list_reason > li > dl > dt{background: #000533;color: #fff;font-size: 4.3rem;display: flex;justify-content: space-between;align-items: center;padding: 2rem;}
.blc_reason ul.list_reason > li > dl > dt img{width: 7rem;}
.blc_reason ul.list_reason > li > dl > dt span{width: calc(100% - 7rem - 2rem);font-weight: bold;}
.blc_reason ul.list_reason > li > dl > dd{background: url(./default_reason_pic01.png) center bottom / 100% no-repeat;padding: 2.5rem 4rem;font-weight: bold;}

/*--- blc_result ---*/
.blc_result{background: url(./default_bg_pattern03.png) repeat;background-size: 2.4rem;}
.blc_result .swiper{background: #dd8c00;}
.blc_result ul.list_result{padding: 4rem 0 4rem 3rem;}
.blc_result ul.list_result > li {box-sizing: border-box; background: url(./default_result_img.png) center center / 100% repeat;min-height: 30.8rem;width: 64.2rem;display: grid;grid-template-columns: 18rem 10rem minmax(0, 1fr); column-gap: 1.6rem;padding: 1.5rem 2rem;border: .6rem solid #101010;border-radius: 2rem;overflow: hidden;position: relative;}
.blc_result ul.list_result > li::before{content: "";position: absolute;background:url(./default_mv_logo.png) left bottom / 100% no-repeat;width: 18.5rem;height: 6.1rem;bottom: 1.5rem;left: 1.5rem;}
.blc_result ul.list_result > li::after{content: "";position: absolute;background:url(./default_result_txt01.png) right bottom / 100% no-repeat;width: 27.7rem;height: 3rem;bottom: 1.5rem;right: 1.5rem;}
.blc_result ul.list_result > li p {font-size: 2.8rem;font-weight: bold;min-width: 0; overflow-wrap: anywhere;word-break: normal;}
.blc_result ul.list_result > li .area_result{padding-bottom: 6rem;line-height: 1.2;}
.blc_result ul.list_result > li .area_result > .race { font-size: 4rem; margin-top: 2rem;}
.blc_result ul.list_result > li .bet {writing-mode: vertical-rl;text-orientation: upright;font-size: 4.6rem;border: .4rem solid #000533;text-align: center;padding: 3rem 1rem;position: relative;place-items: center;min-width: 0;}
.blc_result ul.list_result > li .bet::before,
.blc_result ul.list_result > li .bet::after {content: "";position: absolute;left: 0; right: 0;height: 3rem;background: #000533;}
.blc_result ul.list_result > li .bet::before { top: 0; }
.blc_result ul.list_result > li .bet::after  { bottom: 0; }
.blc_result ul.list_result > li .area_hit{padding-bottom: 3rem;}
.blc_result ul.list_result > li .area_hit > .hit {background: #000533;color: #fff;border-radius: 2.2rem;text-align: center;margin-bottom: 1rem;}
.blc_result ul.list_result > li .area_hit > .dividend {font-size: 3.9rem;color: #ff0064;border-bottom: .5rem solid #000533;text-align: center;}
.blc_result .area_total_amount{padding-top: 6rem;}

/*--- blc_recommend ---*/
.blc_recommend .area_check{margin-bottom: 3rem;background: url(./default_bg_pattern01.png) repeat;background-size: 5.1rem;position: relative;}
.blc_recommend .area_check::before{position: absolute;content: "";background:url(./default_recommend_txt01.png) right top / 100% no-repeat;width: 44.3rem;height: 8rem;top: 1.5rem;right: 1.5rem;}
.blc_recommend .area_check > .check{display: inline-block;background: #000533;color: #fff;font-size: 2.6rem;font-weight: bold;padding: 0.2rem 1.5rem;margin: 3rem 0 1.5rem;position: relative;}
.blc_recommend .area_check > .check:after {content: "";position: absolute;top: 0;right: -1.5rem;width: 1.5rem;height: 100%;background: #000533;padding-right: calc(1rem + 1px);clip-path: polygon(0% 0%, 100% 0%, calc(100% - 1.5rem) 50%, 100% 100%, 0% 100%);}
.blc_recommend .area_check > ul.list_recommend{padding: 0 4rem 2rem;}
.blc_recommend .area_check > ul.list_recommend > li{font-size: 4rem;font-weight: bold;background: url(./default_recommend_check.png) center left / 4.8rem no-repeat;padding: 1rem 0 1rem 6rem;}
.blc_recommend .area_check > ul.list_recommend > li:not(:last-child){border-bottom: dotted 0.5rem #91d4ff;margin-bottom: 1rem;}
.blc_recommend .area_summary > .box_01{background-image: url(./default_recommend_pic01.png);padding-top: 38rem;}

/*--- blc_step ---*/
.blc_step{background: url(./default_step_bg.jpg) center bottom / 100% no-repeat #cd91ff;}
.blc_step ol.list_step{position: relative;margin-bottom: 17rem;}
.blc_step ol.list_step::after{position: absolute;content: "";background:url(./default_step_arrow.png) center top / 13.3rem no-repeat;width: 100%;height: 9.2rem;}
.blc_step ol.list_step > li {min-height: 37.4rem;margin-bottom: 3rem;display: flex;justify-content: space-between;padding: 0.5rem;}
.blc_step ol.list_step > li > figure{width: 18.5rem;background: url(./default_bg_pattern04.png) repeat;background-size: 1.2rem;align-content: center;border-radius: 1.8rem 0 0 1.8rem;}
.blc_step ol.list_step > li > figure img{border-radius: 1.8rem 0 0 1.8rem;}
.blc_step ol.list_step > li > dl{width: calc(100% - 18.5rem - 0.5rem);}
.blc_step ol.list_step > li > dl > dt{background: #000533;color: #fff;font-size: 3.9rem;display: flex;justify-content: space-between;align-items: center;border-radius: 0 1.8rem 0 0;}
.blc_step ol.list_step > li > dl > dt img{width: 7.6rem;margin: 0.5rem;}
.blc_step ol.list_step > li > dl > dt span{width: calc(100% - 7.6rem - 3rem);font-weight: bold;}
.blc_step ol.list_step > li > dl > dd{padding: 3rem 3rem 2rem 2rem;font-weight: bold;}
.blc_step .area_summary > .box_01{background-image: url(./default_step_pic04.png);padding-top: 29rem;margin-top: 5rem;}

/*--- blc_last ---*/
.blc_last{background: url(./default_last_bg.jpg) center top / cover no-repeat;padding: 7rem 0 2rem;}
.blc_last .logo{padding-bottom: 2rem;}



/*========== Responsive ==========*/
@media screen and (min-width:750px) { /* 750px以上 */
html{font-size: 62.5%;}
/**/} /* Responsive End */


/*========== common ==========*/
em{color:#ff0000;}
strong{color:#ff0000;font-weight:bold;}

.mt_0{margin-top:0 !important;}
.mt_S{margin-top:0.5em !important;}
.mt_M{margin-top:1em !important;}
.mt_L{margin-top:1.5em !important;}
.mt_LL{margin-top:2em !important;}
.mb_0{margin-bottom:0 !important;}
.mb_S{margin-bottom:0.5em !important;}
.mb_M{margin-bottom:1em !important;}
.mb_L{margin-bottom:1.5em !important;}
.mb_LL{margin-bottom:2em !important;}

.pt_0{padding-top:0 !important;}
.pt_S{padding-top:0.5em !important;}
.pt_M{padding-top:1em !important;}
.pt_L{padding-top:1.5em !important;}
.pt_LL{padding-top:2em !important;}
.pb_0{padding-bottom:0 !important;}
.pb_S{padding-bottom:0.5em !important;}
.pb_M{padding-bottom:1em !important;}
.pb_L{padding-bottom:1.5em !important;}
.pb_LL{padding-bottom:2em !important;}

.f_SS{font-size:0.6em !important;}
.f_S{font-size:0.8em !important;}
.f_L{font-size:1.2em !important;}
.f_bold{font-weight: bold !important;}
.f_red{color: #ff0000 !important;}
.f_pink{color: #ff0064 !important;}
.f_yellow{color:#ffea00 !important;}


/*==================================================================
   Animation
==================================================================*/
/*-- pushRepeat--*/
.animated_pushRepeat{
animation: pushRepeat 2s ease-out infinite;
opacity: 1;
}
@keyframes pushRepeat {
0%, 40%, 60%, 80% {transform: scale(1.0);}
50%, 70% {transform: scale(0.95);}
}

.js_inview{opacity: 0;}
/*-- fadeIn inview --*/
.animated_fadeIn.active{opacity: 1;
 -webkit-animation:fadeIn 1s ease 1;
 animation: fadeIn 1s ease 1;
}
@-webkit-keyframes fadeIn {
 from {opacity: 0;}
 to {opacity: 1;}
}
@keyframes fadeIn {
 from {opacity: 0;}
 to { opacity: 1;}
}

/*-- fadeInUp inview --*/
.animated_fadeInUp.active{opacity: 1;
-webkit-animation:fadeInUp .8s ease 1;
animation: fadeInUp .8s ease 1;
}
@-webkit-keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}

/*-- zoomIn inview --*/
.animated_zoomIn.active{opacity: 1;
-webkit-animation:zoomIn 0.8s ease 1;
animation: zoomIn 0.8s ease 1;
}
@-webkit-keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
@keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}

/*-- slideInLeft inview --*/
.animated_slideInLeft.active{opacity: 1;
-webkit-animation:slideInLeft 0.5s ease 1;
animation: slideInLeft 0.5s ease 1;
}
@-webkit-keyframes slideInLeft {
from {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInLeft {
from {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}

/*-- slideInRight inview --*/
.animated_slideInRight.active{opacity: 1;
-webkit-animation:slideInRight 0.5s ease 1;
animation: slideInRight 0.5s ease 1;
}
@-webkit-keyframes slideInRight {
from {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInRight {
from {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}

/*-- bounceInDown inview --*/
.animated_bounceInDown.active {opacity: 1;
-webkit-animation: bounceInDown 1s ease 1;
animation: bounceInDown 1s ease 1;
}
@-webkit-keyframes bounceInDown {
0%, 60%, 75%, 90%, 100% {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0) scaleY(3);
transform: translate3d(0, -3000px, 0) scaleY(3);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0) scaleY(0.9);
transform: translate3d(0, 25px, 0) scaleY(0.9);
}
75% {
-webkit-transform: translate3d(0, -10px, 0) scaleY(0.95);
transform: translate3d(0, -10px, 0) scaleY(0.95);
}
90% {
-webkit-transform: translate3d(0, 5px, 0) scaleY(0.985);
transform: translate3d(0, 5px, 0) scaleY(0.985);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes bounceInDown {
0%, 60%, 75%, 90%, 100% {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0) scaleY(3);
transform: translate3d(0, -3000px, 0) scaleY(3);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0) scaleY(0.9);
transform: translate3d(0, 25px, 0) scaleY(0.9);
}
75% {
-webkit-transform: translate3d(0, -10px, 0) scaleY(0.95);
transform: translate3d(0, -10px, 0) scaleY(0.95);
}
90% {
-webkit-transform: translate3d(0, 5px, 0) scaleY(0.985);
transform: translate3d(0, 5px, 0) scaleY(0.985);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}