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

@media screen and (min-width:768px) and ( max-width:1023px){

.wrapper{
	padding: 0 2vw;
}


/* header */

header{
	width: 100%;
	height: 8vw;
	background: #FFF;
	position: fixed; top: 0; left: 0;
	z-index: 50;
	box-shadow: 0 0 10px rgba(5, 2, 2, 0.2);
}
header .wrapper{
	padding: 0;
}
header h1{
	height: 8vw;
	margin-left: 2vw;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	position: relative;
}
header h1 img{
	width: auto;
	height: 7vw;
}
header h1 span{
	position: absolute; top: 0; left: 13vw;
	font-size: 1.6vw;
	font-weight: normal;
	color: #080808;
}

header .menu{
}
header .menu .icon{
}
header .menu .icon p{
	width: 100%;
	position: absolute; bottom: -0.5vw; left: 0;
	font-size: 1.5vw;
	color: #1eb8b5;
	font-weight: bold;
	text-align: center;
}
header .menu .icon a{
	width: 8vw;
	height: 8vw;
	background: none;
	border-radius: 0;
	display: block;
	position: absolute; top: -0.5vw; right: 2vw;
	z-index: 100;
}
header .menu .icon span {
	width: 6vw;
	height: 2px;
	margin: -1px 0 0 -3.5vw;
	background: #1eb8b5;
	display: block;
	position: absolute; top: 50%; left: 50%;
	transition: 0.2s;
}
header .menu .icon span:before,
header .menu .icon span:after {
	content: "";
	width: 6vw;
	height: 2px;
	background: #1eb8b5;
	display: block;
	position: absolute; top: 0; left: 0;
	transition: 0.3s;
}
header .menu .icon span:before {
	margin-top: -8px;
}
header .menu .icon span:after {
	margin-top: 8px;
}
header .menu .icon a.on span {
	background: transparent;
}
header .menu .icon a.on span:before,
header .menu .icon a.on span:after {
	margin-top: 0;
	background: #1eb8b5;
}
header .menu .icon a.on span:before {
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}
header .menu .icon a.on span:after {
	transform: rotate(-135deg);
	-webkit-transform: rotate(-135deg);
}
header .menu .box{
	width: 100%;
	height: 100%;
	padding-top: 8vw;
	background: #FFF;
	position: fixed; top: 0; left: 0;
	display: none;
	z-index: 90;
	pointer-events: auto;
	overflow: auto;
}
header .menu nav {
	border-top: 1px solid #1eb8b5;
	text-align: left;
}
header .menu nav > div {
	margin-top: 0;
	border-bottom: 1px solid #1eb8b5;
}
header .menu nav > div a {
	padding: 2vw 2vw 2vw 4vw;
	background: #FFF;
	display: block;
	position: relative;
	font-size: 2vw;
	color: #1eb8b5;
	font-weight: bold;
	text-decoration: none;
}
header .menu nav div a::before{
	content: "";
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 5px solid #1eb8b5;
	position: absolute; top: 50%; left: 2vw;
	transform: translateY(-50%);
}
header .menu nav br{
	display: none;
}


/* main */

main{
	margin-top: 8vw;
	overflow: hidden;
}

.kv{
}
.kv .wrapper{
	padding: 0;
	position: relative;
}
.kv .btn_box{
	position: absolute; bottom: 4vw; left: 0;
	display: flex;
	justify-content: center;
}
.kv .btn_box div{
	width: 38%;
	margin: 0 1.5%;
	box-shadow: 0 0 10px rgba(5, 2, 2, 0.2);
}

h2{
	text-align: center;
}
h2 img{
	height: 10vw;
}

.service{
	padding-bottom: 8vw;
	position: relative;
}
.service .top_text{
	padding: 1vw;
	border: 1px solid #100964;
	border-radius: 10px;
}
.service .top_text p{
	padding: 2vw;
	background: #dff2f1;
	border: 2px solid #100964;
	border-radius: 10px;
	color: #100964;
}
.service .mid_text{
	margin-top: 4vw;
	padding: 0 2vw;
	font-weight: bold;
}
.service .mid_text span{
	font-size: 4vw;
	color: #8cbe5a;
}
.service .mid_text span:nth-child(2){
	color: #f08278;
}
.service .mid_text span:nth-child(3){
	color: #8cb4eb;
}
.service h3{
	width: 70%;
	margin: 4vw auto 0 auto;
	text-align: center;
}
.service .wrap{
	margin-top: 6vw;
	overflow: auto;
	position: relative;
	z-index: 1;
}
.service .box{
	width: 220vw;
	display: flex;
	justify-content: space-between;
}
.service .item{
	width: 60vw;
	position: relative;
}
.service .item::after{
	content: "";
	width: 10vw;
	height: 10vw;
	background: url(../images/service/webp/cross.webp) no-repeat;
	background-size: 100% 100%;
	position: absolute; top: 30%; right: -15vw;
}
.service .box .item:last-child::after{
	display: none;
}
.service h4{
	width: 90%;
	margin: 0 auto;
	padding: 1vw;
	background: #8cbe5a;
	border-radius: 3.5vw;
	position: relative;
	z-index: 1;
	font-size: 3.8vw;
	line-height: 5vw;
	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: -3.5vw;
	padding: 6vw 2vw 4vw 2vw;
	border: 1px solid #a6937c;
	box-shadow: 0 5px 0 rgba(5, 2, 2, 0.2);
}
.service .inner div{
	padding: 0.5vw 1vw;
	border-bottom: 1px solid #a6937c;
	font-size: 3.2vw;
}
.service .inner div::before{
	content: "";
	width: 3vw;
	height: 2.7vw;
	margin-right: 1vw;
	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: 4vw;
}
.service .catch{
	position: relative;
	z-index: 1;
	text-align: center;
}
.service .triangle{
	width: 70vw;
	position: absolute; bottom: -4vw; left: 50%;
	transform: translateX(-50%);
}

.recommend{
	padding: 8vw 0 4vw 0;
	background: #EEE;
}
.recommend h2 img{
	height: 12vw;
}
.recommend .box{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.recommend .item{
	width: 48%;
	margin-bottom: 4vw;
	padding: 4vw 2vw;
	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: 70%;
	margin: 0 auto;
}
.recommend p{
	margin-top: 1vw;
	font-size: 3.2vw;
}

.merit{
	padding-bottom: 4vw;
	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: 48%;
	margin-bottom: 4vw;
	padding: 0 2vw 4vw 2vw;
	background: #f6f6f6;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(5, 2, 2, 0.2);
}
.merit .num{
	width: 70%;
	margin: 0 auto;
	font-size: 0;
	text-align: center;
}
.merit h3{
	height: 12vw;
	margin-top: 2vw;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 4.5vw;
	line-height: 6vw;
	font-weight: bold;
	color: #666;
	text-align: center;
}
.merit .thum{
	width: 70%;
	margin: 0 auto;
	text-align: center;
}
.merit h4{
	margin-top: 2vw;
	font-size: 3.8vw;
	font-weight: normal;
	text-align: center;
}
.merit p{
	margin-top: 2vw;
	font-size: 3vw;
}
.merit p span{
	color: #e60012;
}

.workplace{
	background: #dff2f1;
}
.workplace .box{
	display: flex;
	flex-wrap: wrap;
}
.workplace .item{
	width: 33%;
	margin-bottom: 2vw;
	text-align: center;
}
.workplace .thum{
	width: 80%;
	margin: 0 auto;
}
.workplace p{
	margin-top: 2vw;
	font-size: 3.2vw;
}
.workplace p small{
	font-size: 2.3vw;
}

.introduce{
	padding: 4vw 0 8vw 0;
	background: url(../images/workplace/webp/bg.webp) no-repeat center top;
	background-size: 170% auto;
}
.introduce p{
	font-size: 4vw;
	line-height: 1;
	text-align: center;
}
.introduce p span{
	background: #fff799;
	font-size: 5vw;
	font-weight: bold;
	color: #100964;
}

.features{
	margin-top: 6vw;
	padding: 4vw 2vw 2vw 2vw;
	background: #EEE;
	outline: 3px solid #1eb8b5;
	border: 3px solid #FFF;
	border-radius: 10px;
}
.features .box{
}
.features h3{
	text-align: center;
}
.features h4{
	width: 50%;
	margin: 3vw auto 0 auto;
	position: relative;
	z-index: 1;
}
.features .inner{
	margin-top: -2vw;
	padding: 0 2vw 2vw 2vw;
	border: 3px solid #1eb8b5;
	border-radius: 10px;
	background: #FFF;
}
.features .inner div{
	margin-top: 2vw;
	padding-left: 8vw;
	position: relative;
}
.features .inner div::before{
	content: "";
	width: 6vw;
	height: 6vw;
	background: url(../images/workplace/webp/check.webp) no-repeat;
	background-size: 100% 100%;
	position: absolute; top: 0; left: 0;
}
.features .inner div small{
	display: block;
	font-size: 2.8vw;
}

.cta{
	padding: 4vw 0;
	background: #1eb8b5;
}
.cta .wrapper{
	display: flex;
	justify-content: space-between;
}
.cta .thum{
	width: 33%;
	filter: drop-shadow(0px 0px 10px rgba(5,2,2,0.2));
}
.cta .box{
	width: 67%;
	padding-bottom: 18vw;
	position: relative;
}
.cta .balloon{
	padding-left: 2vw;
}
.cta .tel{
}
.cta .title{
}
.cta .num{
	padding: 2vw 0 0 2vw;
}
.cta .btn_box{
	width: 80vw;
	position: absolute; bottom: 0; right: 0;
	display: flex;
	justify-content: space-between;
}
.cta .btn_box div{
	width: 49%;
}

.flow{
	padding-bottom: 6vw;
}
.flow h3{
	margin-top: -2vw;
	text-align: center;
}
.flow .box{
	margin-top: 4vw;
	overflow: auto;
}
.flow .inner{
	width: 210vw;
	display: flex;
	justify-content: space-between;
}
.flow .item{
	width: 45vw;
	position: relative;
}
.flow .item::after{
	content: "";
	width: 4vw;
	height: 7.2vw;
	background: url(../images/flow/webp/triangle.webp) no-repeat;
	background-size: 100% 100%;
	position: absolute; top: 50%; right: -4vw;
	transform: translateY(-50%);
}
.flow .inner .item:last-child::after{
	display: none;
}
.flow .caution{
	margin-top: 2vw;
	font-size: 3vw;
	color: #e60012;
	text-align: right;
}

.consultation{
	padding-bottom: 8vw;
	background: #dff2f1;
}
.consultation p{
	font-size: 3vw;
	text-align: center;
}
.consultation .thum{
	width: 70%;
	margin: 6vw auto 0 auto;
	text-align: center;
}

.contact{
	padding-bottom: 4vw;
	background: #EEE;
}
.contact .box{
	padding: 0 2vw 4vw 2vw;
	background: #FFF;
}
.contact .item{
	padding-top: 2vw;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.contact .name{
	width: 30%;
	padding-top: 11px;
	font-size: 2.2vw;
}
.contact .name.req{
	position: relative;
}
.contact .name.req::after{
	content: "必須";
	margin-top: 11px;
	padding: 0.1vw 1vw;
	background: #ca191d;
	position: absolute; top: 50%; right: 0;
	transform: translateY(-50%);
	font-size: 2vw;
	color: #FFF;
}
.contact .input{
	width: 65%;
	margin-top: 0;
}
.contact .input label + label{
	margin-left: 3vw;
}
.contact .form_check{
	margin-top: 2vw;
	font-size: 2.4vw;
	text-align: center;
}
.contact .form_btn{
	margin-top: 0;
}
.contact .form_btn button{
	min-width: 30vw;
	margin: 2vw auto 0 auto;
	outline: none;
	padding: 2vw;
	background: #222;
	border: none;
	border-radius: 10px;
	display: block;
	font-size: 3vw;
	color: #FFF;
	text-align: center;
}
.contact .form_btn button.submit{
	min-width: 50vw;
	background: #ca191d;
	border: 5px solid #d73925;
	box-shadow: 0 5px 0 #cfcdce;
}
.contact .form_btn button i{
	margin-right: 2vw;
}
.contact .other{
	margin-top: 2vw;
	padding: 2vw;
	background: #dff2f1;
	border-radius: 4px;
}
.contact .other p{
	font-size: 2vw;
}
.contact .other input{
	margin-top: 1vw;
}
.contact .area{
	border: 1px solid #EEE;
}
.contact .area div{
	padding: 1vw;
	font-size: 2.2vw;
}
.contact .area .region{
	background: #EEE;
}
.contact .area .region span{
	font-weight: bold;
}

.thanks{
	padding: 4vw 0;
}
.thanks h2{
	font-size: 3vw;
	color: #ca191d;
	font-weight: bold;
	text-align: center;
}
.thanks p{
	margin-top: 3vw;
	font-size: 1.8vw;
	text-align: center;
}
.thanks p.support{
	margin-top: 4vw;
	font-weight: bold;
}


/* footer */

footer{
	margin-top: 8vw;
	background: #FFF;
}
footer .wrapper{
	padding: 0 0 4vw 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}
footer .nav_box{
	width: 100%;
	border-bottom: 1px solid #666;
}
footer nav{
}
footer nav div{
	border-top: 1px solid #666;
}
footer nav div a{
	padding: 2vw 2vw 2vw 4vw;
	display: block;
	position: relative;
	font-size: 2vw;
	color: #666;
}
footer nav div a::before{
	content: "";
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 5px solid #666;
	position: absolute; top: 50%; left: 2vw;
	transform: translateY(-50%);
}
footer nav br{
	display: none;
}
footer .btn{
	width: 30%;
	margin: 4vw 0 0 0;
	padding: 0 2vw;
	text-align: center;
}
footer .logo_box{
	width: 70%;
	padding: 4vw 2vw 0 2vw;
}
footer .logo{
	height: 8vw;
	margin: 0;
	position: relative;
	text-align: left;
}
footer .logo img{
	width: auto;
	height: 7vw;
}
footer .logo span{
	position: absolute; top: 0; left: 13vw;
	font-size: 1.6vw;
	font-weight: normal;
}
footer .logo_box .tel{
	margin-top: 4vw;
}
footer .logo_box .tel p{
	font-size: 2vw;
}
footer .logo_box .number{
	width: 80%;
	margin-top: 1vw;
}
footer .logo_box .inner{
	margin-top: 2vw;
	display: flex;
	align-items: center;
}
footer .logo_box .inner p{
	font-size: 1.8vw;
}
footer .logo_box .inner p span{
	font-size: 2vw;
}
footer .logo_box .acc{
	width: 10vw;
	margin-left: 3vw;
}
footer .copy{
	padding: 1vw;
	background: #666;
	font-size: 1.6vw;
	color: #FFF;
	text-align: center;
}
footer .fixed_tel{
	width: 100%;
	position: fixed; bottom: 0; left: 0;
	z-index: 50;
	display: none;
	box-shadow: 0 0 10px rgba(5, 2, 2, 0.2);
}

}