/*------------------------------------
共通部分
------------------------------------*/

#LP {
	max-width: 750px;
	margin: 0 auto 0;
	font-size: 17px;
	line-height:1.5;
	font-family: "M PLUS 1p", sans-serif;
	font-weight: 500;
	font-style: normal;
}


.lp_inner{
	max-width: 750px;
	margin: 0 auto;
	padding: min(calc(40/750*100%),40px) 0 min(calc(60/750*100%),60px);
}

.box_w{
	padding: min(calc(30/750*100%),30px) min(calc(30/750*100%),30px) min(calc(60/750*100%),60px);
	background: #ffffff;
}

.lp_inner .heading{margin-bottom: min(calc(30/750*100%),30px);}
.lp_inner .heading02{margin-bottom: min(calc(15/750*100%),15px);}


/*------------------------------------
LP header
------------------------------------*/
#LP_header .top_bar{
	display:block;
	width: 100%;
	background: #ffffff;
	padding: 0px 0px 0px 10px;
}

.LP_header_inner{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
	width: 100%;
	margin: 0 auto 0;
	padding: 0 6px 0 8px;
	height:45px;
	background: #ffffff;
	position: relative;
}

#LP_header .LP_header_inner h1 img{ height: 28px;}

#LP_header .LP_header_inner .LP_regButton{
	height: 100%;
	padding: 20px 10px 0;
	background: linear-gradient(135deg, #fba831 0%,#fd6c05 100%);
	color: #ffffff;
	font-size: 12px;
}

#LP_header .LP_header_inner .head_regist_btn img{
	height: 30px;
}




/*------------------------------------
catch
------------------------------------*/
#catch{
	width: 100%;
	background-image: url("/images/bg_blue.gif");
	background-repeat: repeat;
	background-position: center top;
	overflow-x: hidden;
}


.catch_present{
	width: 100%;
	display: flex;
	justify-content: space-between;
	margin: -10% auto 0;
	padding: 0 10px;
}
.catch_present img{width: calc(50% - 2px);}

#catch p{
	text-align: center;
	color:#ffffff;
	font-size: clamp(12px, 2.4vw, 18px);
}

#catch p span{font-size:10px;}






/*--------------------
regist_btn
--------------------*/
.regist_btn{
	display: block;
	width: 90%;
	margin: 4% auto 2%;
}






/*------------------------------------
about
------------------------------------*/

#about{
	width: 100%;
	margin: 0;
	padding: clamp(0rem, 3vw, 2rem);
	position: relative;
}

#about ul{
	width: 100%;
	margin:0 auto 15px;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	gap: 5px;
}

#about ul li{
	margin-bottom: 5px;
}

#about p{
	margin-bottom: 20px;
}






/*------------------------------------
hit
------------------------------------*/
#hit{
	width: 100%;
	background-image: url("/images/bg_red.gif");
	background-repeat: repeat;
	background-position: center top;
	margin: 0;
	padding: 0px;
	position: relative;
}

#hit .ttl_fukidashi01{
	position: absolute;
	top: -35px;
	right: 0;
	left: 0;
}

#hit .ttl_fukidashi02{
	position: absolute;
	top: -25px;
	right: 0;
	left: 0;
}

#hit .hit_inner{
	max-width: 750px;
	margin: 0 auto;
	padding: 60px 5px 50px 5px;
	position: relative;
	overflow:hidden;
}

.hit_inner .heading{margin-bottom: min(calc(30/750*100%),30px);}

#hit .lp_result{

}

#hit .res_li{
	width: 240px;
	margin: 0 5px 0;
	background:#ffffff;
	border-radius: 15px;
	padding: 8px 8px 1px 8px;
}


#hit .res_li inner div{

}

#hit .res_li inner div .date{
	font-size: 11px;
	margin-bottom: 3px;
	text-align: right;
}

#hit .res_li inner div .race{
	display: block;
	width: 100%;
	padding: 2px 0px;
	background:#000000;
	color:#ffffff;
	text-align: center;
	font-weight: 700;
	border-radius: 100px;
	font-size: 13px;
}

#hit .res_li inner div .sum{
	font-size: 18px;
	font-weight: 700;
	color:#000000;
	margin-top: 2px;
	text-align: center;
}

#hit .res_li inner div .sum::before {
	content: "";
	display: inline-block;
	width: 36px;
	height: 30px;
	background-image: url("/images/LP/icon_money.png");
	background-size: cover;
	position: relative;
	top: 3px;
}

#hit .res_li inner div .sum var{font-size: 24px;}

#hit .res_li inner div .sum var,
#hit .res_li inner div .sum unit{
	color:#bf0000;
}
#hit .res_li inner div .sum unit{
	font-size: 18px;
}

#hit .res_li inner figure{
	width: 240px;
	height: 125px;
	border-radius: 10px 10px 0 0;
	background:#fafafa;
}


#hit .nikukyu{
	position: absolute;
	top: 15px; left: 25px;
}


#hit .nikukyu img{ width: 35%;}







/*------------------------------------
lp01
------------------------------------*/
#lp01{
	width: 100%;
	margin: 0;
	padding: clamp(0rem, 3vw, 2rem);
	position: relative;
	background: #fff3f3;
}

#lp01 .lp_inner{padding-bottom: min(calc(80/750*100%),80px);}


#lp01 .lp01_text{
	font-weight: 700;
	font-size: clamp(18px, 2.4vw, 28px);
	text-align:center;
}
#lp01 .lp01_text span{color:#bf0000;}







/*------------------------------------
step
------------------------------------*/
#step{
	width: 100%;
	margin: 0;
	padding: clamp(0rem, 3vw, 2rem);
	position: relative;
}

#step .lp_inner{padding-bottom: 0;}





/*------------------------------------
qaa
------------------------------------*/
#qaa{
	width: 100%;
	margin-top: -8%;
	background: #fff3f3;
}


#qaa .qaa_ttl{
	width: 100%;
	padding: min(calc(80/750*100%),80px) min(calc(30/750*100%),30px) min(calc(170/750*100%),170px);
	background-image: url("/images/bg_red.gif");
	background-repeat: repeat;
	background-position: center top;
}

#qaa .qaa_ttl .qaa_ttl_inner{ 
	max-width: 750px;
	margin: 0 auto;
}

#qaa .lp_inner{
	padding: 0 min(calc(30/750*100%),30px) min(calc(80/750*100%),80px);
	margin-top: clamp(-120px, calc(-17.33vw + 10px), -55px);
}

#qaa .lp_inner .ttl_qaa{margin-bottom: min(calc(40/750*100%),40px);}

#qaa ul li{
	width: 100%;
	border-radius: 20px;
	border: 3px solid #bf0000;
	overflow: hidden;
	margin-bottom: min(calc(20/750*100%),20px);
}

#qaa ul li:last-child {margin-bottom: 0;}


#qaa ul li .q_txt{
	background:#bf0000;
	color:#ffffff;
	padding: 8px 5px 8px 8px;
	font-weight: 700;
}

#qaa ul li .q_txt::before {
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	background-image: url("/images/LP/icon_q.png");
	background-size: cover;
	position: relative;
	top: 3px;
	margin-right: 3px;
}

#qaa ul li .a_txt{
	background:#ffffff;
	padding: 10px 15px;
}




/*------------------------------------
last
------------------------------------*/

#last{
	width: 100%;
	margin: 0;
	padding: clamp(0rem, 3vw, 2rem);
	position: relative;
}












/********************** アニメーション設定 ************************/
.sa {
	opacity: 0;
	transition: all .5s ease;
}

.sa.show {
	opacity: 1;
	transform: none;
}

.sa--up {
	transform: translate(0, 100px);
}

.anime01{
	position: relative;
	opacity: 0;
	bottom: -2em;
}

.anime01-active{
	opacity: 1 !important;
	bottom: 0 !important;
	-webkit-transition: 1s;
	-moz-transition: 1s ;
	transition: 1s;
}

.anime02{
	position: relative;
	opacity: 0;
	left: -2em;
}

.anime02-active{
	opacity: 1 !important;
	left: 0 !important;
	-webkit-transition: 1s;
	-moz-transition: 1s ;
	transition: 1s;
}

.anime03{
	position: relative;
	opacity: 0;
	right: -2em;
}

.anime03-active{
	opacity: 1 !important;
	left: 0 !important;
	-webkit-transition: 1s;
	-moz-transition: 1s ;
	transition: 1s;
}

.anime04,
.anime05,
.anime06,
.anime07,
.anime08,
.anime09{
	opacity: 0;
}

.anime04-active,
.anime05-active,
.anime06-active,
.anime07-active,
.anime08-active,
.anime09-active{
	animation: img-opacity 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
	overflow: hidden;
	position: relative;
}

.anime04-active:before,
.anime05-active:before,
.anime06-active:before,
.anime07-active:before,
.anime08-active:before,
.anime09-active:before{
	content: '';
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 1;
}

.anime04-active:before,
.anime05-active:before{
	background: #ffffff;
}

.anime06-active:before,
.anime07-active:before{
	background: #ffef00;
}

.anime08-active:before,
.anime09-active:before{
	background: <br />
<b>Warning</b>:  Undefined variable $hexColor_darkyellow in <b>/home/sites/www.boat-masters.net/html/css/lp_css.php</b> on line <b>518</b><br />
;
}

.anime04-active:before{
	animation: anime04-active 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.anime05-active:before{
	animation: anime05-active 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.anime06-active:before{
	animation: anime06-active 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.anime07-active:before{
	animation: anime07-active 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.anime08-active:before{
	animation: anime08-active 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.anime09-active:before{
	animation: anime09-active 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes img-opacity {
	100% {
		opacity: 1;
	}
}

@keyframes anime04-active{
	100% {
		transform: translateX(100%);
	}
}

@keyframes anime06-active{
	100% {
		transform: translateX(100%);
	}
}

@keyframes anime08-active{
	100% {
		transform: translateX(100%);
	}
}

@keyframes anime05-active{

	100% {
		transform: translateX(-100%);
	}
}

@keyframes anime07-active{

	100% {
		transform: translateX(-100%);
	}
}

@keyframes anime09-active{

	100% {
		transform: translateX(-100%);
	}
}




.bounceIn{
	opacity: 0;
}

.animate__bounceIn{
	opacity: 1;
}



.delay-time01{ animation-delay: 0.2s;}
.delay-time02{ animation-delay: 0.4s;}
.delay-time03{ animation-delay: 0.6s;}
.delay-time04{ animation-delay: 0.8s;}
.delay-time05{ animation-delay: 1.0s;}
.delay-time06{ animation-delay: 1.2s;}
.delay-time07{ animation-delay: 1.4s;}




.fuwafuwa {
    animation: fuwafuwa 3s linear infinite;
} 
/* fuwafuwa */
@keyframes fuwafuwa {
  0% { transform: translateY(-4px) }
  33.33333% { transform: translateY(-8px) }
  66.66667% { transform: translateY(0) }
  100% { transform: translateY(-4px) }
}

.delay-time01{ animation-delay: 0.2s;}
.delay-time02{ animation-delay: 0.4s;}
.delay-time03{ animation-delay: 0.6s;}
.delay-time04{ animation-delay: 0.8s;}
.delay-time05{ animation-delay: 1.0s;}
.delay-time06{ animation-delay: 1.2s;}
.delay-time07{ animation-delay: 1.4s;}



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


.poyoyon {
  animation: poyoyon 2.5s infinite;
  opacity: 1;
}
@keyframes poyoyon {
  0%, 40% {
    transform: skew(0deg, 0deg);
  }
  5% {
    transform: skew(5deg, 5deg);
  }
  10% {
    transform: skew(-4deg, -4deg);
  }
  15% {
    transform: skew(3deg, 3deg);
  }
  20% {
    transform: skew(-2deg, -2deg);
  }
  25% {
    transform: skew(1deg, 1deg);
  }
  30% {
    transform: skew(-0.6deg, -0.6deg);
  }
  35% {
    transform: skew(0.3deg, 0.3deg);
  }
}