@charset "utf-8";
/* スマホ・PCの切り替え　*/

@media screen and (min-width:801px) { 
	.sp{
		display: none !important;
	}
}
@media screen and (max-width:800px) { 
	.pc{
		display: none !important;
	}
}
.pc{
	display: inherit;
}
/* 　==============　変数　==============　*/
:root {
  --main-color-green: #00b7af;
  --main-color-orange: #e6a705;
  --main-color-white: #fff;
  --main-color-yellow: #fff16c;
  --main-color-cream: #f7f3f0;
  --main-color-cream2: #eddebc;
  --font-size-xxl: 36px;
  --font-size-xl: 32px;
  --font-size-l: 24px;
  --font-size-m: 20px;
  --font-size-r: 18px;
  --font-size-s: 14px;
  @media screen and (max-width:750px) {
	  --font-size-xxl: 6.6vw;
	  --font-size-xl: 4.8vw;
	  --font-size-l: 4.4vw;
	  --font-size-m: 4.0vw;
	  --font-size-r: 3.6vw;
	  --font-size-s: 2.6vw;
  }
}
h1,
h2,
h3{
	font-family: "M PLUS 2", serif;
  font-style: normal;
  *{
	font-family: "M PLUS 2", serif;
	font-style: normal;
  }
}
/* 　==============　ヘッダーここから　==============　*/
header{
	.hwrapper{
		position:relative;
		height:100vh;
		@media screen and (max-width:800px) { 
			height:106.9vw;
		}
		& > p{
			background-color: var(--main-color-green);
			color: #fff;
			font-weight: bold;
			padding:4px 10px;
			width: 100%;
			box-sizing: border-box;
			position: relative;
			z-index: 2;
		}
		.inner{
			position: relative;
			z-index: 2;
		}
		.hlogo{
			display: inline-block;
			margin-top:0;
			margin-left: 2vw;
			padding: 10px 20px 0 20px;
			z-index:2;
			&:before{
				display: none;
			}
			a{
				display: flex;
				img{
					width: 20%;
				}
				& > span{
					font-size:var(--font-size-m);
					font-weight:bold;
					line-height:1.2;
          padding-left: 10px;
          @media screen and (max-width:800px) { 
          	font-size:var(--font-size-s);
          }
					& + span{
            font-size: 320%;
            font-weight: bold;
            line-height: 1;
            padding-left: 10px;
	          @media screen and (max-width:800px) { 
	          	font-size: 5.7vw;
	          }
					}
				}
			}
		}
		.mv{
			position: absolute;
			top: 0;
			height:100vh;
			width:100vw;
			z-index: 1;
			@media screen and (max-width:800px) { 
				width:100vw;
				height:auto;
			}
			.swiper{
				.swiper-wrapper{
					align-items: flex-start;
					.swiper-slide{
						height:100vh;
						align-self: flex-start;
						overflow:hidden;
						position:relative;
						@media screen and (max-width:800px) { 
							height:auto;
						}
						img{
							min-height:100vh;
							width: auto;
							max-width: 10000px;
							min-width: 100%;
							@media screen and (max-width:800px) {
								width: 100%;
								height: auto;
								min-height:auto;
							}
						}
						p{
							position:absolute;
							bottom: 4vh;
							left: 2vw;
							opacity:0;
							@media screen and (max-width:800px) {
								bottom: 4vw;
							}
							span.p1{
								font-size: var(--font-size-xxl);
								font-weight: bold;
								color: #000;
								background-color:rgb(255 255 255 / .8);
								padding-top: 0 4px;
								@media screen and (max-width:800px) {
									font-size: var(--font-size-r);
								}
							}
							span.p2{
								font-size: var(--font-size-xxl);
								background-color: yellow;
								font-weight: bold;
								padding-top: 0 4px;
								@media screen and (max-width:800px) {
									font-size: var(--font-size-r);
								}
							}
						}
					}
					.swiper-slide-visible,
					.swiper-slide-prev{
						p{
						  animation-delay: 2s;
						  animation-duration: 2s;
						  animation-fill-mode: both;
						  animation-name: txtanm;
						}
					}
				}
			}
		}
		.hbnr{
			position: absolute;
			bottom: 4vh;
			right: 2vw;
			z-index: 2;
			@media screen and (max-width:800px) {
				bottom: 2vw;
				width: 40%;
			}
		}
	}
}
/* アニメーション */
@keyframes txtanm {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* 　==============　ヘッダーここまで　==============　*/
/* 　==============　フッターここから　==============　*/
footer{
	padding: 30px 0 30px 0;
	background-color: #604f45;
	@media screen and (max-width:750px) {
		padding-bottom: 24%;
	}
	.bnr{
		ul{
			width: 80%;
			margin-left: auto;
			margin-right: auto;
			gap:15px;
			display: flex;
			padding-bottom:4%;
			li{
				width: calc((100% - 15px) / 2 );
				a{
					text-align: center;
				}
			}
		}
	}
	section.inner{
		display: flex;
		flex-wrap: wrap;
		h1{
			color: var(--main-color-white);
			width: 30%;
			@media screen and (max-width:750px) {
				width: 100%;
			}
		}
		nav{
			width: 70%;
			display:flex;
			justify-content: space-between;
			@media screen and (max-width:750px) {
			width: 100%;
			margin-bottom: 5%;
			}
			> ul{
				@media screen and (max-width:750px) {
					flex:inherit;
				}
				li{
					a{
						color: #fff;
						font-size: var(--font-size-s);
						text-decoration: underline;
					}
						li{
							padding-left:15px;
							a{
								color: #fff;
								font-size: 0.8rem;
							}
					}
				}
					li.sns{
						padding-top: 10px;
				}
			}
		}	
	}
	section:nth-child(2){
		padding:2% 0;
		ul{
			display: block;
			width: 30%;
			min-width: 400px;
			margin: 0 auto;
			justify-content:center; 
			box-sizing: border-box;
			@media screen and (max-width:750px) {
				flex-wrap: wrap;
				margin-bottom: 5%;
				flex-direction: column;
				min-width:90%;
			}
			li{
				padding: 10px 25px;
				flex: 1;
				vertical-align: bottom;
				line-height: 1;
				margin-bottom: 10px;
				@media screen and (max-width:750px) {
				padding: 0 5%;
				}
				a{
					background-color: #fff;
					padding: 3px 15px;
					display: block;
					text-align: center;
					line-height: 1;
					box-sizing: border-box;
				}
			}
		}
	}
	.copy{
		text-align: center;
		color: #fff;
		font-size: var(--font-size-s);
	}
}
/* 　==============　フッターここまで　==============　*/

.bggr{
	background-image: url(../images/bg_car.webp),url(../images/bg_gr.webp),url(../images/bg_cloud.webp);
	background-size: 10% auto,100% auto,cover;
	background-repeat: no-repeat,no-repeat,no-repeat;
	background-position: right 34% bottom 0 ,center bottom -1px ,center bottom !important;
	padding-bottom: 12% !important;
	@media screen and (max-width:750px) {
		background-size: 15% auto,150% auto,cover;
		padding-bottom: 18% !important;
	}
}
.bgcr{
	background-image: url(../images/bg_car02.webp),url(../images/bg_cr.webp);
	background-size: 10% auto,100% auto;
	background-repeat: no-repeat,no-repeat;
	background-position: right 18% bottom 0 ,center bottom -1px !important;
	padding-bottom: 12% !important;
	@media screen and (max-width:750px) {
		background-size: 15% auto,150% auto,cover;
		padding-bottom: 18% !important;
	}
}
.bgcr{
	background-image: url(../images/bg_car02.webp),url(../images/bg_cr.webp);
	background-size: 10% auto,100% auto;
	background-repeat: no-repeat,no-repeat;
	background-position: right 18% bottom 0 ,center bottom -1px !important;
	padding-bottom: 12% !important;
	@media screen and (max-width:750px) {
		background-size: 15% auto,150% auto,cover;
		padding-bottom: 18% !important;
	}
}

.bgcr2{
	background-image: url(../images/bg_car03.webp),url(../images/bg_cr.webp),url(../images/bg_cloud.webp);
	background-size: 10% auto,100% auto,cover;
	background-repeat: no-repeat,no-repeat,no-repeat;
	background-position: right 34% bottom 0 ,center bottom -1px,center bottom !important;
	padding-bottom: 12% !important;
	@media screen and (max-width:750px) {
		background-size: 15% auto,150% auto,cover;
		padding-bottom: 18% !important;
	}
}
.bgcr2.car03{
	background-image: url(../images/bg_car.webp),url(../images/bg_cr.webp),url(../images/bg_cloud.webp);
	background-size: 10% auto,100% auto,cover;
	background-repeat: no-repeat,no-repeat,no-repeat;
	background-position: right 34% bottom 0 ,center bottom -1px,center bottom !important;
	padding-bottom: 12% !important;
	@media screen and (max-width:750px) {
		background-size: 15% auto,150% auto,cover;
		padding-bottom: 18% !important;
	}
}

/* 　==============　固定バナー　==============　*/
.fixed.top{
	position: fixed;
	z-index: 3;
	right: 0;
	top: 140px;
	@media screen and (max-width:750px) {
		display: none;
	}
	div{
		text-align: right;
	}
}
.fixed.bottom{
	position: fixed;
	z-index: 3;
	right: 0;
	bottom: 20px;
	right:2%;
	@media screen and (max-width:750px) {
		bottom: 10%;
	}
	.totop{
		opacity: 0;
		transition: 0.3s all;
	}
	.totop.fade{
		opacity: 1;
	}
	div{
		text-align: center;
		a{
			span{
				display: block;
				color: #fff;
				text-align: center;
				padding: 3px 7px;
				box-sizing:border-box;
				position:relative;
				&:before{
					content: "";
					display: block;
					margin-right: auto;
					margin-left: auto;
				  height: calc(15px / 2 * tan(60deg));
				  width: 15px;
				  background-color: #fff;
				  clip-path: polygon(50% 0, 100% 100%, 0 100%);
				  position: relative;
				  top:0;
				  
				}
			}
			&:hover span:before{
				animation: anime05 1.2s ease 0s infinite normal running;
			}
		}
	}
}
@media screen and (min-width:751px) {
	.spfixed{
		display: none;
	}
}
@media screen and (max-width:750px) {
	.spfixed{
		position: fixed;
		z-index: 3;
		width: 100%;
		bottom: 0;
		div{
			width: 25%;
			background-repeat:no-repeat;
			background-position:top 25% center;
			background-size:50% auto;
			padding-bottom:3%;
			a{
				font-weight: bold;
				font-size: var(--font-size-r);
				padding-top: 3%;
				padding-bottom: 3%;
				display: block;
				width: 100%;
				background-color: var(--main-color-orange);
				text-align: center;
				border-radius: 10px;
				filter: drop-shadow(0.5px 0.5px 2px rgba(0, 0, 0, 0.3));
			}
		}
		.nav03{
			width: 80%;
			background-image: url(../images/fnav_icon01.png);
			background-size:25% auto;
			margin-left:auto;
			margin-right:auto;
			a{
				color: var(--main-color-white);
			}
		}
	}
}
/* 　==============　ページ共通　==============　*/
p span{
	font-size: 0.8rem;
}
.pdf{
	&:after{
		content:"";
		width: 1px;
		height: 1px;
		padding:3%;
		background-image: url(../images/pdf_icon.png);
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		display: inline-block;
    vertical-align: middle;
    margin-left: 15px;

	}
}
.wrapper{
	min-width:1000px;
	@media screen and (max-width:1200px) {
	min-width:94%;
	}
}
html.open{
	overflow: hidden;
}
body.open{
	overflow: hidden;
	height:100%;
}
body.open .bwrapper{
	&:after{
		content: "";
		display: block;
		width: 100%;
		height: 100vh;
		position: fixed;
		background-color: rgba(0,0,0, 0.6);
		top:0;
		left: 0;
		z-index: 4;
	}
}
header,
footer,
main{
	min-width: 1200px;
	@media screen and (max-width:1200px) { 
		width: 100%;
		min-width: 100%;
	}
}
img{
	max-width: 100%;
	height: auto;
}
a img{
	transition: all 0.5s 0s ease;
}
a:hover{
	opacity: 0.7;
}
.inner{
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
	@media screen and (max-width:1200px) {
	width: 94%;
	}
}
.corner{
		filter: drop-shadow(0.5px 0.5px 2px rgba(0, 0, 0, 0.3));
	display: block;
	margin-top: 10px;
	margin-bottom: 10px;
  position: relative;
  	background-color:var(--main-color-green);
  	padding:0 15px;
  	box-sizing:border-box;
  &::before{
  	position: absolute;
  	content:"";
  	top: -10px;
  	left:0;
  	display: block;
  	background-image:
  	url(../images/corner_gr_01.png),
  	url(../images/corner_gr_02.png),
  	url(../images/corner_gr_05.png);
  	background-position: 
  	left,
  	right,
  	center;
  	background-repeat: 
  	no-repeat,
  	no-repeat,
  	no-repeat;
  	background-size: 
  	10px,
  	10px,
  	calc(100% - 19px);
  	width: 100%;
  	height: 10px;
  }
  &::after{
  	position: absolute;
  	bottom: -10px;
  	left:0;
  	content:"";
  	display: block;
  	background-position: 
  	left,
  	right,
  	center;
  	background-repeat: 
  	no-repeat,
  	no-repeat,
  	no-repeat;
  	background-size: 
  	10px,
  	10px,
  	calc(100% - 19px);
  	width: 100%;
  	height: 10px;
  }
}
.corner_wh{
  	background-color:var(--main-color-white);
  &::before{
  	background-image:
  	url(../images/corner_wh_01.png),
  	url(../images/corner_wh_02.png),
  	url(../images/corner_wh_05.png);
  }
  &::after{
  	background-image:
  	url(../images/corner_wh_03.png),
  	url(../images/corner_wh_04.png),
  	url(../images/corner_wh_05.png);
  }
}
.corner_gr{
  	background-color:var(--main-color-green);
  &::before{
  	background-image:
  	url(../images/corner_gr_01.png),
  	url(../images/corner_gr_02.png),
  	url(../images/corner_gr_05.png);
  }
  &::after{
  	background-image:
  	url(../images/corner_gr_03.png),
  	url(../images/corner_gr_04.png),
  	url(../images/corner_gr_05.png);
  }
}
.corner_or{
  	background-color:var(--main-color-orange);
  &::before{
  	background-image:
  	url(../images/corner_or_01.png),
  	url(../images/corner_or_02.png),
  	url(../images/corner_or_05.png);
  }
  &::after{
  	background-image:
  	url(../images/corner_or_03.png),
  	url(../images/corner_or_04.png),
  	url(../images/corner_or_05.png);
  }
}
.corner_yl{
  	background-color:var(--main-color-yellow);
  &::before{
  	background-image:
  	url(../images/corner_yl_01.png),
  	url(../images/corner_yl_02.png),
  	url(../images/corner_yl_05.png);
  }
  &::after{
  	background-image:
  	url(../images/corner_yl_03.png),
  	url(../images/corner_yl_04.png),
  	url(../images/corner_yl_05.png);
  }
}
.corner_cr{
  	background-color:var(--main-color-cream);
  &::before{
  	background-image:
  	url(../images/corner_cr_01.png),
  	url(../images/corner_cr_02.png),
  	url(../images/corner_cr_05.png);
  }
  &::after{
  	background-image:
  	url(../images/corner_cr_03.png),
  	url(../images/corner_cr_04.png),
  	url(../images/corner_cr_05.png);
  }
}
.linkarrow{
	span{
	display: block;
	width: 80%;
	margin-right: auto;
	margin-left:auto;
	font-weight: bold;
	position:relative;
		&:after{
			content:"＞";
			position: absolute;
			right: 0;
			font-weight: bold;
			font-family:  
		    "Hiragino Kaku Gothic ProN",
		    "Hiragino Sans",
		    Meiryo,
		    sans-serif;
		    transition: all 0.5s 0s ease;
		}
	}
	&:hover{
		span{
			&:after{
				right: -10px;
			}
		}
	}
}
.content{
	.tit01{
		font-size: var(--font-size-xl);
		font-weight: bold;
		position:relative;
		text-align:center;
		padding-top:30px;
		margin-bottom: 4%;
		@media screen and (max-width:750px) {
			margin-bottom: 10%;
		}
		&:after{
			content: "";
			width: 90px;
			border-bottom: 3px solid var(--main-color-green);
      display: block;
      margin-left: auto;
      margin-right: auto;
      padding-top: 10px;
		}
	}
	.tit02{
		background-color: var(--main-color-green);
		font-size: var(--font-size-xl);
		font-weight: bold;
		color: #fff;
		text-align: center;
		padding: 2%;
		margin-bottom: 4%;
	}
	.tit03{
		border-top:2px solid var(--main-color-green);
		border-bottom:2px solid var(--main-color-green);
		font-size: var(--font-size-m);
		font-weight: bold;
		padding: 2px 10px;
		position:relative;
		margin-bottom: 2%;
		span{
			background-color: var(--main-color-green);
			color: #fff;
			font-weight: bold;
			padding: 1px 10px;
			margin-left: 20px;
			border-radius: 4px;
			position: absolute;
			right: 10px;
			top: 5px;
			@media screen and (max-width:750px) {
				font-size: 0.8em;
				top: 1.0vw;
			}
		}
	}
	.tit04{
		font-size: var(--font-size-r);
		font-weight: bold;
	}
	.tit05{
		font-size: var(--font-size-r);
		font-weight: bold;
		background-color: var(--main-color-green);
		color: #fff;
		padding: 2px 15px;
		display: inline-block;
	}
	table.tbl{
		width: 80%;
		margin-right:auto;
		margin-left:auto;
		@media screen and (max-width:750px) {
			width: 100%;
		}
		tr{
			border-top: 1px solid #999;
			&:last-child{
			border-bottom: 1px solid #999;
			}
			th + td{
        	padding-top: 8px;
			}
			th,
			td{
				padding: 8px 10px 8px 0;
				text-align: center;
				position:relative;
				vertical-align:middle;
				@media screen and (max-width:750px) {
					display: block;
					text-align: left !important;
        	text-wrap: wrap !important;
        	padding-left: 2%;
        	padding-right: 2%;
        	padding-bottom: 0;
        	padding-top: 0;
				}
				&:first-child{
        	padding-top: 8px;
				}
				&:last-child{
        	padding-bottom: 8px;
				}
				&:after{
				content: "";
				border-right: 1px solid #999;
				padding-left: 10px;
				position: absolute;
        display: block;
        min-height: calc(100% - 12px);
        top: 6px;
        right: 10px;
				}
        @media screen and (max-width:750px) {
        	&:after{
        	content: none;
        	}
        }
				&:last-child{
					&:after{
						content: none;
					}
				}
			}
			th{
				@media screen and (max-width:750px) {
					font-weight: bold;
					border-bottom: 1px dashed #999;
					padding-top: 10px ;
					padding-bottom: 10px;
				}
			td{
					@media screen and (max-width:750px) {
					padding-bottom: 0 ;
					}
				}
			}
		}
	}
}
	.toform{

		h4{
			font-size: var(--font-size-l);
			font-weight: bold;
			text-align: center;
			color: #fff;
			background-image: url(../images/sp_fixed_icon02.webp);
			background-repeat: no-repeat;
			background-position: top  center;
			background-size: 60px auto;
			padding-top: 45px;
			@media screen and (max-width:750px) {
				font-size: 3.2vw;
			}
		}
		&:hover h4{
			animation: anime01 1.2s ease 0s infinite normal running;
		}

	}
	.tocall{
		margin-right:auto;
		margin-left:auto;
		width:80%;
		div{
			display:flex;
  		justify-content: center;
  		align-items:center;
  		@media screen and (max-width:750px) { 
  			justify-content: space-between;
  		}
			h4{
				display:flex;
				padding-right: 3%;
        align-items: center;
        @media screen and (max-width:750px) { 
        	padding-right: 12%;
        	justify-content: flex-start;
        	flex: 1;
        }
				span{
				font-size: var(--font-size-l);
				font-weight: bold;
				flex-shrink: 0;
        line-height: 60px;
				@media screen and (max-width:1200px) { 
        	.sp{
        		display: none;
        	}
				}
				@media screen and (max-width:750px) { 
        line-height: 4.0vw;
        font-size:3.0vw;
        padding-top:2.5%;
        	.sp{
        		display: inherit;
        	}
				}
				}
				&:before{
					content: "";
					background-image: url(../images/sp_fixed_icon01.webp);
					background-repeat: no-repeat;
					background-position: left  center;
					background-size: 60px auto;
					padding-left: 60px;
					padding-top: 30px;
					padding-bottom: 30px;
					transform: rotate(-1deg);
					display: block;
				}
					@media screen and (max-width:750px) { 
						&:before{
						background-size: 100% auto;
						background-position: center;
						padding-left: 45%;
						padding-top: 15%;
					}
					}
			}
			&:hover h4:before{
				animation: anime02 1.2s ease 0s infinite normal running;
			}
			address,
			address a{
				font-size: var(--font-size-xxl);
				color: var(--main-color-green);
				line-height:1.1;
				padding-left: 3%;
				font-weight:bold;
				text-decoration: none;
				@media screen and (max-width:750px) { 
				font-size: 5.0vw;
				}
				span{
					display: block;
					@media screen and (max-width:750px) { 
					font-size: 2.2vw;
					}
				}
			}
		}
	}
.taxicall{
			width: 80%;
			margin-right: auto;
			margin-left: auto;
			padding-top:1%;
			margin-top:8%;
			margin-bottom:6%;
			@media screen and (max-width:750px) {
				margin-bottom:8%;
			}
			h4{
				text-align: center;
				margin-bottom:1%;
				span{
					font-size: var(--font-size-l);
					font-weight: bold;
					padding-right:30px;
					padding-left: 50px;
					padding-top: 3%;
					padding-bottom: 3%;
					position:relative;
	                &:before {
	                    content: "";
	                    background-image: url(../images/sp_fixed_icon01.webp);
	                    background-repeat: no-repeat;
	                    background-position: left center;
	                    background-size: 60px auto;
	                    padding-left: 60px;
	                    padding-top: 30px;
	                    padding-bottom: 30px;
	                    transform: rotate(-1deg);
	                    display: inline-block;
	                    position: absolute;
	                    top: 15%;
	                    left:0;	
	                }
	                @media screen and (max-width:750px) { 
		                &:before {
                        background-size: 100% auto;
                        padding-left: 19%;
                        padding-top: 8%;
                        padding-bottom: 9%;
                        top: 1%;
                        left: 3%;
		                }
	                }
                }
			}
			&:hover h4 span:before{
				animation: anime03 1.2s ease 0s infinite normal running;
			}
			h5{
				text-align: center;
				font-size: var(--font-size-r);
				font-weight: bold;
				margin-bottom:1%;
				color: var(--main-color-green);
			}
			address,
			address a{
				color: var(--main-color-green);
				font-size: 50px;
				letter-spacing: 0;
				text-align: center;
				line-height: 1.1;
				font-weight: bold;
				text-decoration: none;
				@media screen and (max-width:750px) { 
					font-size: 10vw;
				}
				span{
					display: block;
					text-align: center;
				}
			}
		}

			@keyframes anime01 {
				0% {
				background-position: top 0 center;
				}
				20% {
				background-position: top 6px center;
				}
				40% {
				background-position: top -3px center;
				}
				60% {
				background-position: top -3px center;
				}
				80% {
				background-position: top 0 center;
				}
				100% {
				background-position: top 0 center;
				}
			}
			@keyframes anime02 {
				0% {
				transform: rotate(1deg);
				}
				20% {
				transform: rotate(6deg);
				}
				40% {
				transform: rotate(-3deg);
				}
				60% {
				transform: rotate(6deg);
				}
				80% {
				transform: rotate(-3deg);
				}
				100% {
				transform: rotate(1deg);
				}
			}
			@keyframes anime03 {
				0% {
				transform: rotate(-1deg);
				}
				20% {
				transform: rotate(-3deg);
				}
				40% {
				transform: rotate(3deg);
				}
				60% {
				transform: rotate(-6deg);
				}
				80% {
				transform: rotate(3deg);
				}
				100% {
				transform: rotate(-1deg);
				}
			}
			@keyframes anime04 {
				0% {
				transform: rotate(1deg);
				}
				20% {
				transform: rotate(6deg);
				}
				40% {
				transform: rotate(-3deg);
				}
				60% {
				transform: rotate(6deg);
				}
				80% {
				transform: rotate(-3deg);
				}
				100% {
				transform: rotate(1deg);
				}
			}
			@keyframes anime05 {
				0% {
				top:0 ;
				}
				20% {
				top:4px ;
				}
				40% {
				top:-3px ;
				}
				60% {
				top:-3px ;
				}
				80% {
				top:0 ;
				}
				100% {
				top:0 ;
				}
			}
.recruit{
	.hwrapper{
		height: auto;
	}
	main{
		padding:4% 0;
		h2{
			color: var(--main-color-green);
			font-size: var(--font-size-xl);
			text-align: center;
		}
	}
}


			.contacttbl{
				border-top: 1px solid #999;
				background-color: #fff;
				width: 80%;
				margin-left: auto;
				margin-right: auto;
				margin-bottom:40px;
				@media screen and (max-width:750px) { 
					width: 100%;
				}
				tr{
					border-bottom: 1px solid #999;
					th{	
						width: 200px;
						font-weight: bold;
						text-wrap: nowrap;
						vertical-align: top;
						@media screen and (max-width:750px) { 
							border-bottom:1px dashed #999 ;
						}
						p{
							font-weight: bold;
							text-wrap: nowrap;
							vertical-align: top;
						}
					}
					th,td{
						padding:10px 20px ;
						@media screen and (max-width:750px) { 
							display: block;
							width: 100%;
							box-sizing: border-box;
						}
					}
				}
				input,
				textarea{
					width: 100%;
				}
				label input{
					width: auto;
				}
			}
			button,
			.wpcf7-submit{

                background: inherit;
                text-shadow: 0px 2px 0px #000;
				background-color:  var(--main-color-green);
				color: #fff;
				border: none;
				font-size:  var(--font-size-m);
				padding: 15px 40px;
				font-weight: bold;
				border-radius: 10px;
				margin-left: auto;
				margin-right: auto;
				display: block;
			}
.grecaptcha-badge {
    bottom: 100px !important;
}
.grecaptcha-badge {
    @media screen and (max-width: 750px) {
        bottom: 22% !important;
    }
}