/* CSS Document */
@charset "utf-8";

@media screen and (min-width:1024px){

.wrapper{
	width: 96%;
	margin: 0 auto;
	padding: 0;
	position: relative;
}
@media screen and (min-width:1200px){
	.wrapper{
		width: 1200px;
	}
}
@media screen and (min-width:1440px){
	header .wrapper{
		width: 1400px;
	}
}


/* header */

header{
	width: 100%;
	height: 80px;
	background: #FFF;
	position: relative;
	z-index: 50;
	box-shadow: 0 0 10px rgba(5, 2, 2, 0.2);
}
header .wrapper{
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
header h1{
	width: auto;
	height: 80px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	position: absolute; top: 0; left: 0;
}
header h1 img{
	width: auto;
	height: 50px;
}
header h1 span{
	width: 200%;
	position: absolute; top: 5px; left: 90px;
	font-size: 12px;
	font-weight: normal;
	color: #080808;
}
header .tel{
	width: 360px;
	margin: 5px 230px 0 0;
}
header .tel p{
	width: 100%;
	margin-top: 5px;
	font-size: 13px;
	line-height: 1.5;
}
header .tel .number{
	width: 100%;
}
header .tel .number a{
	pointer-events: none;
}
header .btn{
	width: 200px;
	display: block;
	position: absolute; top: 0; right: 0;
}

header .menu{
	display: none;
}
@media screen and (min-width:1200px){
	header h1 img{
		height: 66px;
	}
	header h1 span{
		position: absolute; top: 5px; left: 120px;
		font-size: 14px;
	}
	header .tel{
		width: 434px;
		margin: 0 260px 0 0;
	}
	header .tel p{
		font-size: 16px;
	}
	header .btn{
		width: 240px;
	}
}


/* main */

main{
	margin-top: 0;
	overflow: hidden;
}

.kv{
	height: 620px;
	padding: 0;
	background: url(../images/kv/webp/bg.webp) no-repeat center;
	background-size: cover;
	position: relative;
	z-index: 1;
}
.kv .wrapper{
	height: 100%;
	padding: 0;
	position: relative;
}
.kv .image{
	width: 815px;
	margin: 0 auto;
	text-align: center;
}
.kv .image img{
	margin-top: -15px;
}
.kv .btn_box{
	width: 100%;
	position: absolute; bottom: 28px; left: 0;
	display: flex;
	justify-content: center;
}
.kv .btn_box div{
	width: 400px;
	margin: 0 10px;
	box-shadow: 0 0 10px rgba(5, 2, 2, 0.2);
}

.gnav{
	padding: 15px 0;
	background: #EEE;
}
.gnav nav{
	display: flex;
	justify-content: center;
}
.gnav div{
	padding: 0 14px;
	border-right: 1px solid #080808;
}
.gnav nav div:first-child{
	border-left: 1px solid #080808;
}
.gnav div a{
	font-size: 13px;
	text-decoration: none;
}
.gnav div a:hover,
.gnav div a.on{
	color: #009e96;
}
@media screen and (min-width:1200px){
	.gnav div a{
		font-size: 16px;
	}
}

h2{
	text-align: center;
}
h2 img{
	height: 112px;
}

.service{
	padding-bottom: 40px;
	position: relative;
}
.service .top_text{
	padding: 5px;
	border: 1px solid #100964;
	border-radius: 10px;
}
.service .top_text p{
	padding: 25px;
	background: #dff2f1;
	border: 2px solid #100964;
	border-radius: 10px;
	font-size: 16px;
	line-height: 2;
	color: #100964;
	text-align: center;
}
.service .mid_text{
	margin-top: 30px;
	padding: 0;
	font-size: 28px;
	font-weight: bold;
	text-align: center;
}
.service .mid_text span{
	font-size: 28px;
	color: #8cbe5a;
}
.service .mid_text span:nth-child(2){
	color: #f08278;
}
.service .mid_text span:nth-child(3){
	color: #8cb4eb;
}
.service h3{
	width: 380px;
	margin: 20px auto 0 auto;
	text-align: center;
}
.service .wrap{
	margin-top: 34px;
	overflow: auto;
	position: relative;
	z-index: 1;
}
.service .box{
	width: 1200px;
	padding: 0 30px;
	display: flex;
	justify-content: space-between;
}
.service .item{
	width: 330px;
	position: relative;
}
.service .item::after{
	content: "";
	width: 50px;
	height: 50px;
	background: url(../images/service/webp/cross.webp) no-repeat;
	background-size: 100% 100%;
	position: absolute; top: 150px; right: -62.5px;
}
.service .box .item:last-child::after{
	display: none;
}
.service h4{
	width: 90%;
	margin: 0 auto;
	padding: 5px;
	background: #8cbe5a;
	border-radius: 18px;
	position: relative;
	z-index: 1;
	font-size: 18px;
	line-height: 26px;
	font-weight: bold;
	color: #FFF;
	text-align: center;
}
.service .box .item:nth-child(2) h4{
	background: #f08278;
}
.service .box .item:nth-child(3) h4{
	background: #8cb4eb;
}
.service .inner{
	margin-top: -18px;
	padding: 32px 20px 30px 20px;
	border: 1px solid #a6937c;
	box-shadow: 0 5px 0 rgba(5, 2, 2, 0.2);
}
.service .inner div{
	padding: 12px 10px 3px 20px;
	border-bottom: 1px solid #a6937c;
	font-size: 16px;
}
.service .inner div::before{
	content: "";
	width: 15px;
	height: 13.5px;
	margin-right: 5px;
	background: url(../images/service/webp/check.webp) no-repeat;
	background-size: 100% 100%;
	display: inline-block;
	vertical-align: middle;
}
.service .box .item:nth-child(3) .inner div:nth-child(6)::before,
.service .box .item:nth-child(3) .inner div:nth-child(7)::before{
	display: none;
}
.service .acc{
	margin-top: 20px;
}
.service .catch{
	width: 980px;
	margin-top: -95px;
	position: relative;
	z-index: 1;
	text-align: center;
}
.service .triangle{
	width: 500px;
	position: absolute; bottom: -60px; left: 50%;
	transform: translateX(-50%);
}
@media screen and (min-width:1200px){
	.service .top_text p{
		font-size: 18px;
	}
	.service .box{
		width: 100%;
	}
}

.recommend{
	padding: 45px 0 21px 0;
	background: #EEE;
}
.recommend h2 img{
	height: 130px;
}
.recommend .box{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.recommend .item{
	width: 23%;
	margin-bottom: 27px;
	padding: 25px 10px 20px 10px;
	background: #FFF;
	border: 3px solid #1eb8b5;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(5, 2, 2, 0.2);
	text-align: center;
}
.recommend .thum{
	width: 200px;
	margin: 0 auto;
}
.recommend p{
	height: 48px;
	margin-top: 14px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 14px;
	line-height: 24px;
	text-align: center;
}
@media screen and (min-width:1200px){
	.recommend .item{
		width: 280px;
	}
	.recommend .thum{
		width: 215px;
	}
	.recommend p{
		font-size: 18px;
	}
}

.merit{
	padding-bottom: 45px;
	background: url(../images/merit/webp/bg.webp) repeat-x;
	background-size: cover;
}
.merit .box{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.merit .item{
	width: 23%;
	margin-bottom: 0;
	padding: 0 15px 15px 15px;
	background: #f6f6f6;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(5, 2, 2, 0.2);
}
.merit .num{
	width: 150px;
	margin: 0 auto;
	font-size: 0;
	text-align: center;
}
.merit h3{
	height: 72px;
	margin-top: 15px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 27px;
	line-height: 36px;
	font-weight: bold;
	color: #666;
	text-align: center;
}
.merit .thum{
	width: 170px;
	margin: 0 auto;
	text-align: center;
}
.merit h4{
	margin-top: 15px;
	font-size: 17px;
	line-height: 1.2;
	font-weight: normal;
	text-align: center;
}
.merit p{
	margin-top: 20px;
	font-size: 16px;
}
.merit p span{
	color: #e60012;
}
@media screen and (min-width:1200px){
	.merit .item{
		width: 280px;
	}
	.merit h3{
		font-size: 34px;
	}
	.merit h4{
		font-size: 22px;
	}
}

.workplace{
	background: #dff2f1;
}
.workplace .box{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.workplace .item{
	width: 14%;
	margin-bottom: 0;
	text-align: center;
}
.workplace .thum{
	width: 95%;
	margin: 0 auto;
}
.workplace p{
	margin-top: 20px;
	font-size: 18px;
	line-height: 1.2;
}
.workplace p small{
	font-size: 10px;
}
@media screen and (min-width:1200px){
	.workplace .item{
		width: 170px;
	}
	.workplace .thum{
		width: 150px;
	}
	.workplace p small{
		font-size: 13px;
	}
}

.introduce{
	margin-top: -1px;
	padding: 40px 0 45px 0;
	background: url(../images/workplace/webp/bg.webp) no-repeat center top;
	background-size: 170% auto;
}
.introduce p{
	font-size: 36px;
	line-height: 1;
	text-align: center;
}
.introduce p span{
	background: linear-gradient(transparent 8%, #fff799 8%, #fff799 80%, transparent 80%);
	font-size: 48px;
	font-weight: bold;
	color: #100964;
}

.features{
	width: 1000px;
	margin: 35px auto 0 auto;
	padding: 28px 40px 20px 40px;
	background: #EEE;
	outline: 5px solid #1eb8b5;
	border: 5px solid #FFF;
	border-radius: 10px;
}
.features .box{
}
.features h3{
	width: 580px;
	margin: 0 auto;
	text-align: center;
}
.features h4{
	width: 300px;
	margin: 18px auto 0 auto;
	position: relative;
	z-index: 1;
}
.features .inner{
	width: 900px;
	margin: -12px auto 0 auto;
	padding: 25px 35px 25px 85px;
	border: 3px solid #1eb8b5;
	border-radius: 10px;
	background: #FFF;
}
.features .inner div{
	margin-top: 15px;
	padding-left: 60px;
	position: relative;
	font-size: 20px;
}
.features .inner div::before{
	content: "";
	width: 40px;
	height: 40px;
	background: url(../images/workplace/webp/check.webp) no-repeat;
	background-size: 100% 100%;
	position: absolute; top: -5px; left: 0;
}
.features .inner div small{
	display: block;
	font-size: 16px;
}

.cta{
	padding: 20px 0;
	background: #1eb8b5;
}
.cta .wrapper{
	display: block;
	position: relative;
}
.cta .thum{
	width: 32%;
	position: absolute; top: -25px; left: 0;
	filter: drop-shadow(0px 0px 10px rgba(5,2,2,0.2));
}
.cta .box{
	width: 100%;
	padding: 0 0 0 32%;
	position: relative;
}
.cta .balloon{
	padding-left: 0;
}
.cta .tel{
	margin-top: 5px;
	padding: 0 25px;
	display: flex;
}
.cta .title{
	margin-right: 10px;
}
.cta .num{
	padding: 0;
}
.cta .num a{
	pointer-events: none;
}
.cta .btn_box{
	width: 100%;
	margin-top: 10px;
	position: static;
	display: flex;
	justify-content: space-between;
}
.cta .btn_box div{
	width: 49%;
}
@media screen and (min-width:1200px){
	.cta .thum{
		width: 385px;
		position: absolute; top: -25px; left: 0;
	}
	.cta .box{
		width: 1200px;
		padding: 0 0 0 380px;
	}
	.cta .btn_box div{
		width: 400px;
	}
}

.flow{
	padding-bottom: 40px;
}
.flow h3{
	margin-top: -26px;
	text-align: center;
}
.flow .box{
	margin-top: 15px;
	overflow: auto;
}
.flow .inner{
	width: 1200px;
	display: flex;
	justify-content: space-between;
}
.flow .item{
	width: 250px;
	position: relative;
}
.flow .item::after{
	content: "";
	width: 20px;
	height: 36px;
	background: url(../images/flow/webp/triangle.webp) no-repeat;
	background-size: 100% 100%;
	position: absolute; top: 50%; right: -20px;
	transform: translateY(-50%);
}
.flow .inner .item:last-child::after{
	display: none;
}
.flow .caution{
	margin-top: 20px;
	font-size: 18px;
	color: #e60012;
	text-align: right;
}
@media screen and (min-width:1200px){
	.flow .inner{
		width: 100%;
	}
}

.consultation{
	padding-bottom: 90px;
	background: #dff2f1;
}
.consultation p{
	margin-top: 2px;
	font-size: 16px;
	text-align: center;
}
.consultation .thum{
	width: 470px;
	margin: 45px auto 0 auto;
	text-align: center;
}

.contact{
	padding: 0 0 45px 0;
	background: #EEE;
}
.contact .box{
	width: 1000px;
	margin: 0 auto;
	padding: 20px 50px 30px 50px;
	background: #FFF;
}
.contact .item{
	padding-top: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.contact .name{
	width: 22%;
	padding-top: 11px;
	font-size: 14px;
}
.contact .name.req{
	position: relative;
}
.contact .name.req::after{
	content: "必須";
	margin-top: 0;
	padding: 3px 10px;
	background: #ca191d;
	position: absolute; top: 50%; right: 30px;
	transform: translateY(-50%);
	font-size: 13px;
	color: #FFF;
}
.contact .input{
	width: 78%;
	margin-top: 0;
}
.contact .input label + label{
	margin-left: 15px;
}
.contact .form_check{
	margin-top: 30px;
	text-align: center;
}
.contact .form_btn{
	margin-top: 0;
}
.contact .form_btn button{
	min-width: 120px;
	margin: 30px auto 0 auto;
	outline: none;
	padding: 15px;
	background: #222;
	border: 5px solid #222;
	border-radius: 10px;
	display: block;
	font-size: 24px;
	line-height: 30px;
	color: #FFF;
	text-align: center;
	transition: .2s;
}
.contact .form_btn button:hover{
	background: #FFF;
	color: #222;
}
.contact .form_btn button.submit{
	min-width: 400px;
	background: #ca191d;
	border: 5px solid #d73925;
	box-shadow: 0 5px 0 #cfcdce;
}
.contact .form_btn button.submit:hover{
	background: #FFF;
	color: #ca191d;
}
.contact .form_btn button i{
	margin-right: 10px;
}
.contact .other{
	margin-top: 10px;
	padding: 10px 20px;
	background: #dff2f1;
	border-radius: 4px;
}
.contact .other p{
	font-size: 14px;
}
.contact .other input{
	margin-top: 10px;
}
.contact .area{
	border: 1px solid #EEE;
}
.contact .area div{
	padding: 10px 20px;
	font-size: 14px;
}
.contact .area .region{
	background: #EEE;
}
.contact .area .region span{
	font-weight: bold;
}

.thanks{
	padding: 50px 0;
}
.thanks h2{
	font-size: 20px;
	color: #ca191d;
	font-weight: bold;
	text-align: center;
}
.thanks p{
	margin-top: 20px;
	font-size: 16px;
	text-align: center;
}
.thanks p.support{
	margin-top: 30px;
	font-weight: bold;
}


/* footer */

footer{
	margin-top: 0;
	background: #FFF;
}
footer .wrapper{
	padding: 15px 0 20px 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}
footer .nav_box{
	width: 300px;
	margin-top: 25px;
	border-bottom: none;
	display: block;
	justify-content: space-between;
}
footer nav{
	margin-left: 0;
	display: block;
}
footer nav + nav{
	margin-top: 0;
}
footer nav div{
	border-top: none;
}
footer nav div a{
	padding: 0;
	border-right: none;
	display: inline;
	font-size: 14px;
	line-height: 1;
	text-decoration: none;
}
footer nav div a::before{
	display: none;
}
footer nav div a:hover{
	color: #009e96;
}
footer nav br{
	display: none;
}
footer .btn{
	width: 200px;
	margin: 5px 0 0 0;
	padding: 0;
	text-align: center;
}
footer .logo_box{
	width: 430px;
	padding: 0;
}
footer .logo{
	height: 66px;
	margin: 0;
	position: relative;
	text-align: left;
}
footer .logo img{
	width: auto;
	height: 66px;
}
footer .logo span{
	position: absolute; top: -3px; left: 120px;
	font-size: 14px;
	font-weight: normal;
}
footer .logo_box .tel{
	margin-top: 15px;
}
footer .logo_box .tel p{
	font-size: 15px;
}
footer .logo_box .number{
	width: 100%;
	margin-top: 5px;
}
footer .logo_box .number a{
	pointer-events: none;
}
footer .logo_box .inner{
	margin-top: 12px;
	display: flex;
	align-items: center;
}
footer .logo_box .inner p{
	font-size: 14px;
}
footer .logo_box .inner p span{
	font-size: 16px;
}
footer .logo_box .acc{
	width: 80px;
	margin-left: 5px;
}
footer .copy{
	padding: 10px;
	background: #666;
	font-size: 14px;
	color: #FFF;
	text-align: center;
}
footer .fixed_tel{
	display: none !important;
}
@media screen and (min-width:1200px){
	footer .nav_box{
		width: 430px;
		display: flex;
	}
	footer .btn{
		width: 240px;
	}
}

}