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

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



/*------------------------------------
catch
------------------------------------*/

.catch_02{margin-top: -400px;}
.catch_03{margin-top: -320px;}
#catch p{position:relative; z-index:1;}


/*--------------------
bonus
--------------------*/


.bonus_01{
	width: 100%;
	margin: 0;
	padding: 0 0 0 0;
	position: relative; top: 25px;
}

.bonus_02{
	width: 100%;
	margin: 0;
	padding: 30px 0 0 0;
	position: relative; top: -10px;
}

.bonus_03{
	width: 100%;
	margin: 0;
	padding: 0 0 0 0;
	position: relative; top: 25px;
}


.bonus_04{
	width: 100%;
	margin: 0;
	padding: 0 0 80px 0;
	position: relative; top: 25px;
	z-index: -1;
}


.bonus_01::before,
.bonus_02::before,
.bonus_03::before,
.bonus_04::before{
	content: '';
	position: absolute;
	top: 0; bottom: 0; left: 0; right: 0;
	background:#d80c18;
	transform: skewY(-10deg);
}


.bonus img,#bonus .bonus a{
	position: relative;
	z-index: 10;
}

.bonus_01 img,
.bonus_03 img,
.bonus_04 img{
	margin-top: -35px;
}

.bonus_02 img{
	margin-top: -30px;
}



/*--------------------
regist_btn
--------------------*/


.regist_btn{display: block; width: 90%;}

.regist_btn_01,
.regist_btn_03{
	margin:40px auto 0;
}

.regist_btn_02{
	margin:40px auto 0;
}

.regist_btn_04{
	margin:40px auto 20px;
}



/*------------------------------------
intro
------------------------------------*/

#intro{
	width: 100%;
	margin: 0;
	padding: 140px 0 100px 0;
	position: relative;
	top: -60px;
}


#intro::before{
	content: '';
	position: absolute;
	top: 0; bottom: 0; left: 0; right: 0;
	background:#ffef00;
	clip-path:polygon(0 0, 100% 0, 100% 100%, 0 90%);
	/*transform: skewY(10deg);*/
	z-index: -1;
}


#intro .heading{ margin-bottom: 30px;}


#intro ul{
	width: 98%;
	margin:0 auto 20px;
}

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

.intro_text{ margin-top: -150px;}




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

#about{
	width: 90%;
	margin: 0 auto 10px;
	padding: 20px 0 0 0;
}

#about div{
	margin-bottom: 5px;
	font-size: 18px;
	font-weight: 700;
}

#about div em{color:#d80c18;}

#about .about_img{
	margin: 10px 0 20px;
}





/*------------------------------------
hit
------------------------------------*/


#hit{
	max-width: 700px;
	overflow:hidden;
}

.hit_01{
	width: 100%; margin: 0;
	padding: 100px 0 130px 0;
	position: relative;
	top: -90px;
}


.hit_01::before{
	content: '';
	position: absolute;
	top: 0; bottom: 0; left: 0; right: 0;
	background:#d80c18;
	clip-path:polygon(0 12%, 100% 0, 100% 100%, 0 100%);
	z-index: -1;
}


.hit_02{
	width: 100%; margin: 0;
	padding: 110px 0 145px 0;
	position: relative;
	top: -200px;
}


.hit_02::before{
	content: '';
	position: absolute;
	top: 0; bottom: 0; left: 0; right: 0;
	clip-path:polygon(0 12%, 100% 0, 100% 100%, 0 100%);
	background:#d80c18;
	z-index: -1;
}


.hit_03{
	width: 100%; margin: 0;
	padding: 110px 0 145px 0;
	position: relative;
	top: -120px;
}


.hit_03::before{
	content: '';
	position: absolute;
	top: 0; bottom: 0; left: 0; right: 0;
	clip-path:polygon(0 12%, 100% 0, 100% 100%, 0 100%);
	background:#d80c18;
	z-index: -1;
}


#hit .heading{ margin-bottom: 40px;}


#hit .res_li{
	width: 250px;
	margin: 0 10px 0;
	background:#ffffff;
	border-radius: 10px;
}


#hit .res_li inner div{
	padding: 20px 0 10px 20px;
}

#hit .res_li inner div .date{
	font-size: 13px;
	display: inline;
	padding: 5px 15px 5px 15px;
	background:#ffef00;
	text-align: center;
	font-weight: 700;
	border-radius: 50px;
}

#hit .res_li inner div .race{
	margin-top: 10px;
}

#hit .res_li inner div .sum{
	font-size: 26px;
	font-weight: 700;
	color:#d80c18;
}


#hit .res_li inner figure{
	width: 250px;
	height: 125px;
	border-radius: 10px 10px 0 0;
	background-image: url("../images/LP/img.png");
	background-size: contain;
}


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


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






/*------------------------------------
step
------------------------------------*/


#step{
	width: 100%;
	margin: 0;
	padding: 80px 0 120px 0;
	position: relative;
	top: -170px;
}


#step::before{
	content: '';
	position: absolute;
	top: 0; bottom: 0; left: 0; right: 0;
	background:#ffef00;
	clip-path:polygon(0 0, 100% 2.5%, 100% 100%, 0 100%);
	/*transform: skewY(7deg);*/
	z-index: -1;
}

#step .heading{ margin-bottom: 20px;}

#step ul{
	width: 96%;
	margin: 0 auto 0;
	padding: 0;
	font-size: 18px;
	font-weight: 700;
	font-weight: bold;
}

#step ul li div{
	width: 90%;
	margin: 10px auto 15px;
	padding: 0;
	text-align: center;
}

#step ul li p:first-of-type{ margin-top: -10px;}

#step .arrow{ margin: 20px auto 5px;}

#step .regist_btn{
	display: block;
	width: 86%;
	margin: 0 auto 0;
}

.step_text{
	margin-top: -280px;
	position: relative;
        z-index:10;
}

#step .foot{
	margin: 15px auto 10px;
	font-size: 20px;
	font-weight: 700;
	font-style: bold;
	text-align: center;
}




/*------------------------------------
service
------------------------------------*/


#service{
	width: 100%;
	margin: 0;
	padding: 120px 0 100px 0;
	position: relative;
	top: -90px;
	background:#3e0a09;
	z-index: -1;
}


#service .heading{ margin: 20px 0 60px 0;}


#service ul{
	width: 90%;
	max-width: 500px;
	margin: 0 auto 0;
	padding: 0;
}


#service ul li{
	padding: 40px 15px 30px 15px;
	margin: 0 0 40px 0;
	background:#ffffff;
	border-radius: 10px;
	position: relative;
}

#service ul li figure img{
	width: 65px;
	position:absolute;
	right: 0;
	left: 0;
	margin: -70px auto 0;
}


#service ul li div{
	width: 71%;
	padding: 0 0 0 5px;
	color:#3e0a09;
	font-size: 18px;
	font-weight: 700;
}

.service_img01{
	width: 37vw;
	max-width: 130px;
	position:absolute;
	top: 46%;
	left: 68%;
}

.service_img02{
	width: 49vw;
	max-width: 135px;
	position:absolute;
	top: 48%;
	left: 68%;
}

.service_img03{
	width: 29vw;
	max-width: 110px;
	position:absolute;
	top: 45%;
	left: 69%;
}

.service_img04{
	width: 30vw;
	max-width: 120px;
	position:absolute;
	top: 48%;
	left: 70%;
}


#service ul li p{ margin: 8px 0 20px 0;}


#service .foot{
	width: 86%;
	margin: 0px auto 20px;
	padding: 0;
	color:#ffffff;
	font-size: 18px;
	font-weight: 700;
}





/*------------------------------------
concept
------------------------------------*/


#concept{
	width: 100%;
	margin: 0;
	padding: 100px 0 110px 0;
	position: relative;
	top: -285px;
}


#concept::before{
	content: '';
	position: absolute;
	top: 0; bottom: 0; left: 0; right: 0;
	background:#ffef00;
	clip-path:polygon(0 0, 100% 2.1%, 100% 100%, 0 100%);
	z-index: -1;
}


#concept p:first-child{
	width: 90%;
	margin: 0 auto 20px;
	font-weight: 700;
	font-weight: bold;
}

#concept .concept_area{
	width: 96%;
	margin: 0 auto 0;
}


#concept div ul{margin-bottom: 25px;}


#concept div ul li{
	padding: 15px;
	margin: 0 5px 15px;
	background:#ffffff;
	border-radius: 10px;
	position: relative;
}

#concept div ul li div{
	margin-bottom: 15px;
	padding: 15px;
	background:#3e0a09;
	color:#ffffff;
	text-align: center;
	font-weight: bold;
	border-radius: 50px;
}

#concept div ul li div em{
	color:#ffef00;
}

#concept div ul li p em{
	color:#d80c18;
	font-weight: 700;
}


#concept div ul li img{
	margin-top: 15px;
}

#concept .foot{
	margin-top: 10px;
}




/*------------------------------------
qaa
------------------------------------*/


#qaa{
	width: 100%;
	margin: 0;
	padding: 110px 0 80px 0;
	position: relative;
	top: -40px;
	background:#009fed;
	z-index: -1;
}


#qaa .heading{ margin-bottom: 20px;}


#qaa ul{
	width: 92%;
	margin: 30px auto 0;
}

#qaa li{
	margin-bottom: 15px;
}

.qaa_q{
	margin-bottom: 15px;
}


.qaa_q{
	width: 84%;
	border-radius: 20px;
	margin-left: 16%;
	padding: 20px;
	font-size: 18px;
	background: #ffffff;
	font-weight: 700;
	position: relative;
}


.qaa_a{
	width: 85%;
	border-radius: 20px;
	padding: 20px;
	background: #6de47a;
	position: relative;
}


.qaa_q::before {
	position: absolute;
	top: 33px;
	width: 25px;
	height: 35px;
	content: '';
	left: -15px;
	border-radius: 0 0 0 20px;
	box-shadow: -3px -20px 0 -7px white inset;
}


.qaa_q figure{
	position: absolute;
	top: -3px; left:-61px;
	content: '';
}

.qaa_q figure img{
	width: 63%;
}


.qaa_a::before {
	position: absolute;
	top: 59px;
	width: 25px;
	height: 35px;
	content: '';
	right: -17px;
	border-radius: 0 0 20px 0;
	box-shadow: 3px -20px 0 -7px #6de47a inset;
}


.qaa_a figure{
	position: absolute;
	top: -3px; right:-130px;
	content: '';
}

.qaa_a figure img{ width: 53%;}

.qaa_a em{
	font-weight: 700;}

.qaa_a .a_icon{
	width: 9.5%;
	max-width: 35px;
	margin-left: 3px;
	position: relative; top: -3px;
}


#qaa .foot{
	width: 90%;
	margin: 20px auto 20px;
	padding: 0;
}




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

#last{
	width: 100%;
	margin: 0;
	padding: 60px 0 0 0;
	position: relative;
	top: -180px;
}


#last::before{
	content: '';
	position: absolute;
	top: 0; bottom: 0; left: 0; right: 0;
	background:#ffef00;
	transform: skewY(10deg);
	z-index: -1;
}


#last div{
	width: 100%;
	margin: 0;
	padding: 60px 20px 120px 20px;
	position: relative;
	top: -30px;
	color:#ffffff;
	background:#3e0a09;
	position: relative;
	z-index:0;
	font-size: 19px;
	clip-path:polygon(0 0, 100% 11%, 100% 100%, 0 100%);
}




#last div em{
	color:#ffef00;
}

#last img{
	margin-top: -100px;
	position: relative;
	z-index:-1;
}


.LP footer{margin-top: -60px;}





/********************** アニメーション設定 ************************/
.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-bulldog.net/html/css/lp_css.php</b> on line <b>833</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);
  }
}