@charset "UTF-8";
@import url(./reset.css);

* {
	box-sizing: border-box;
}

body {
	font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
	font-weight: normal;
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
	line-height: 1.6;
	color: #4c4c4c;
}


p{
	font-size: 16px;
	line-height: 1.8;
}

a{text-decoration: none;}

.inner{
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 3%;
}

.center{text-align: center;}


img {
	border: none;
	vertical-align: bottom;
	height: auto;
	width: 100%;
}

.clearfix{text-align: center;}

.clearfix:after {
	content: ""; 
	display: block; 
	height: 0; 
	font-size:0;	
	clear: both; 
	visibility:hidden;
}
.mb0 { margin-bottom: 0px !important; }
.mb10 { margin-bottom: 10px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb30 { margin-bottom: 30px !important; }
.mb40 { margin-bottom: 40px !important; }
.mb50 { margin-bottom: 50px !important; }
.mb60 { margin-bottom: 60px !important; }
.mb1em { margin-bottom: 1em !important; }
.mb2em { margin-bottom: 2em !important; }
.mb3em { margin-bottom: 3em !important; }
.mb4em { margin-bottom: 4em !important; }
.mb5em { margin-bottom: 5em !important; }
.mb6em { margin-bottom: 6em !important; }


@media screen and (max-width: 767px){
	.pcOnly{
		display: none;
	}
	.inner{min-width: 100%;}
	p{font-size: 13px;}
}

@media screen and (min-width: 768px){
	.spOnly{
		display: none;
	}
}




/*--------------ヘッダー--------------*/
.header {
	background: #ffffff;
	background-size: 548px;
	width: 100%;
	height: 110px;
	position: relative;
	z-index: 999;

	margin: 0 auto;
	padding: 0;
	position: fixed;
}


.header .sp_nav, .close_btn {
	display: none;
}

.header .page_title {
	width: 160px;
	position: absolute;
	left: 20px;
	top: 24px;
	z-index: 9999;
}

.header .page_title img {
	width: 280px;
	height: 100%;
	transition: opacity 0.3s ease;
}

.header .page_title img:hover {
	opacity: 0.6;
}

.header nav {
	position: absolute;
	right: 0px;
	bottom: 0;
}

.header ul {
	display: inline-block;
	
}

.header ul li {
	display: inline-block;
	font-size: 20px;
	font-weight: bold;
}

.header ul li a {
	border-bottom: 3px solid transparent;
	display: inline-block;
	padding: 0 20px;
	text-align: center;
	height: 70px;
	line-height: 80px;
	font-weight: lighter;
	color: #000000;
	text-decoration: none;
	transition: border 0.3s ease;
}

.header ul li a:hover, .header ul li a.current {
	border-bottom: 3px solid #e6dcb0;
}

.header .contact_box {
	display: flex;
	justify-content: end;
	align-items: center;
	padding-right: 20px;
}

.header .contact_box div {
	color: #000000;
	margin-top: 15px;
}


.header .contact_box .tel {
	font-weight: bold;
	font-family: "游ゴシック体", "Yu Gothic", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	padding-right: 2em;
	vertical-align: middle;
	height: 36px;
	line-height: 36px;
}

.header .contact_box .tel span.tel {
	font-size: 20px;
	display: inline-block;
	padding: 0 8px;
	background-color: #39aa3f;
	border-radius: 3px;
	margin-right: 0.5em;
	height: 40px;
	line-height: 40px;
	margin-bottom: 16px;
}
span.tel{color: #fff;}

.header .contact_box .tel span.no {
	font-size: 35px;
	display: inline-block;
}

.header .contact_box .mail a {
	background-color: #39aa3f;;
	display: block;
	line-height: 40px;
	height: 40px;
	text-align: center;
	width: 280px;
	color: #fff;
	font-weight: bold;
	text-decoration: none;
	font-size: 18px;
	border-radius: 5px;
}

.header .contact_box .mail a:hover {
	background-color: #ffa200;
}

.header .contact_box .mail a img {
	width: 30px;
	height: 20px;
	vertical-align:middle;
	margin-right: 0.5em;
}





@media screen and (max-width: 910px){


	.header{
		min-width: 100%;
		width: 100%;
		height: 80px;
		box-shadow: 0 2px 3px rgba(0,0,0,0.2);
	}
	
	.header .page_title {
		width: 151px;
		height: 80px;
		position: absolute;
		left: 10px;
		top: 0;
	}

	.header .page_title img {
		width: 190px;
		height: 47px;
		margin-top: 17px;
	}
	
	.header .sp_nav {
		display: block;
		position: absolute;
		width: 165px;
		height: 80px;
		right: 0px;
		top: 0px;
	}
	
	.header .sp_nav > div, .header .sp_nav > a {
		display: block;
		float: left;
		width: 55px;
		height: 80px;
		text-align: center;
		position: relative;
		border-left: 1px solid #000000;
	}
	
	.header .sp_nav > div img, .header .sp_nav > a img {
		width: 35px;
		margin-top: 20px;
	}
	
	.header .sp_nav > div::after, .header .sp_nav > a::after {
		display: block;
		width: 100%;
		color: #000000;
		font-size: 10px;
		position: absolute;
		left: 0;
		bottom: 10px;
		font-weight: bold;
	}

	.header .tel::after {
		content: 'お電話';
	}
	
	.header .mail::after {
		content: 'メール';
	}
	
	.header .menu_btn::after {
		content: 'メニュー';
	}
	
	.close_btn {
		display: block;
		width: 40px;
		height: 80px;
		position: absolute;
		right: 0;
		top: 0;
		text-align: center;
		z-index: 999999;
	}
	
	.close_btn img {
		width: 25px;
		margin-top: 20px;
	}
	
	.close_btn::after {
		content: '閉じる';
		display: block;
		width: 100%;
		color: #000000;
		font-size: 9px;
		position: absolute;
		left: 0;
		bottom: 15px;
		font-weight: bold;
	}
	
	.header nav {
		display: none;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 999999;
		background-color: #9d2626;
		width: 100%;
		height: 100%;
	}
	
	.header nav.open {
		display: block;
	}
	
	.header ul {
		display: block;
		margin-top: 75px;
		border-top: 1px solid #000000;
	}

	.header ul li {
		display: block;
		font-size: 16px;
		border-bottom: 1px solid #000000;
	}

	.header ul li a {
		color: #fff;
		display: block;
		height: 70px;
		line-height: 70px;
		border: none;
	}
	
	.header ul li a:hover, .header ul li a.current {
		border-bottom: none;
	}
	
	.header ul li a:hover {
		border: none;
	}
	
	.header .contact_box {
		display: none;
	}
}







/*------mv-----*/
.mv{margin-top: 110px;}

@media screen and (max-width: 900px){
	.mv{margin-top: 90px;}
}
@media screen and (max-width: 767px){
	.mv{margin: 85px 0 50px;}
}






/*--------------サブタイトル--------------*/
.company{background: linear-gradient(20deg, #ffa9c9 0%, #ffde69 100%);}
.service{background: linear-gradient(20deg, #a1d3ff 0%, #a2d196 100%);}
.recruit{background: linear-gradient(20deg, #d1a8e2 0%, #96d5ff 100%);}
.contact{background: linear-gradient(20deg, #ffd270 0%, #9fdf95 100%);}
.sv{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 215px 50px 100px;
	height: 300px;
}
.sv h1{
	font-size: 50px;
	font-weight: bold;
	color: #fff;
}
.sv img{
	width: 200px;
}
@media screen and (max-width: 910px){
	.sv{padding: 190px 20px 100px;}
}
@media screen and (max-width: 550px){
	.sv{padding: 150px 20px 70px; height: 250px;}
	.sv h1{font-size: 30px;}
   .sv img{width: 100px;}
   
}






/*--------------トップ--------------*/
h1{
	text-align: left;
	font-size: 36px;
	font-weight: lighter;
}

.contents{
	display: flex;
	justify-content: space-between;
	margin: 30px auto 80px;
}
.contents a{
	width: 32%;
	transition: 0.3s;
}
.contents a:hover{background-color: #fffda2;}

@media screen and (max-width: 850px){
	h1{font-size: 28px;}
}



/*----会社概要-----*/

table{
  margin: 100px 0;
  width: 100%;
  font-size: 18px;
  color:#616161;
  border: 1px solid #616161;
  border-collapse: collapse;
  line-height: 2;
}

th{
  width: 25%;
  border: 1px solid #616161;
  background-color: #EFFBFF;
  font-weight: normal;
  padding: 30px 10px;
}

td{
  border: 1px solid #616161;
  padding: 30px 20px;
}

.hp{
  display: block;
  width: 75%;
  margin: 80px auto 180px;
  line-height: 4;
  text-align: center;
  font-size: 18px;
  background-color: #4DA327;
  color: #fff;
  border-radius: 5px;
  transition: 0.3s;
}

.hp:hover{
  width: 77%;
  font-size: 20px;
  background-color: #3e7bad;
  color:yellow
}

@media screen and (max-width: 767px){
  table{font-size: 14px;}
  .hp{
    width: 100%;
    font-size: 14px;
  }
}



/*--------------サービス--------------*/
section{margin: 100px 0 50px;}
.obi{
	padding: 10px 20px;
	font-size: 30px;
	margin-bottom: 20px;
}
.taiyo{background-color: #d2e5f6;}
.hanbai{background-color: #ebf4e2;}
.jukai{background-color: #fcecdb;}
.kyujin{background-color: #f4d8f8;}

.item{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.box{
	width: 30%;
	margin-bottom: 20px;
}

.item::after{
  content:"";
  display: block;
  width:30%;
}


.obi-in{
	padding: 10px 5px;
	font-size: 20px;
	height: 60px;
	line-height: 1.3;
	margin-bottom: 10px;
	text-align: center;
	background-color: #0098d8;
	color: #fff;
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


.box p{
	line-height: 1.4;
	margin-bottom: 0;
}
.green{background-color: #6fb06b;}

.check{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.check div{
	width: 50%;
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}
.check div p{line-height: 1.3;}
.check div img{
	width: 20px;
	height: 20px;
	margin-right: 3px;
}


@media screen and (max-width: 767px){
	section{margin: 60px 0 30px;}
	.obi{font-size: 20px;}
	.obi-in{font-size: 13px;}
}

@media screen and (max-width: 520px){
	.check{display:block}
	.check div{width: 100%;}
}





/*--------------求人--------------*/
.space{margin: 100px 0 80px;}

.catch{
	font-size: 24px;
	font-weight: lighter;
	margin-bottom: 50px;
	line-height: 2;
}

.magin{margin: 20px auto}

.flow_design07 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
}

.flow07 > li {
  list-style-type: none;
  display: flex;
}

.flow07 > li:not(:last-child) {
  margin: 0 0 50px;
}

.flow07 > li .icon07 {
  width: 200px;
  box-sizing: border-box;
  padding: 20px 10px 10px;
  font-weight: bold;
  font-size: 20px;
  color: #FFF;
  text-align: center;
  background: #80c2f4;
  border-radius: 5px 5px 0 0;
  position: relative;
  line-height: 125%;
  margin: 0;
}
.flow07 > li .icon07::after {
  content: ' ';
  width: 0;
  height: 0;
  border-left: 90px solid transparent;
  border-right: 90px solid transparent;
  border-top: 40px solid #80c2f4;
  position: absolute;
  bottom: -40px;
  left: 0;
}

.flow07 > li dl {
  padding: 0 0 0 30px;
  width: calc(100% - 120px);
}

.flow07 > li dl dt {
  padding: 0 0 5px;
  margin: 0 0 15px;
  font-size: 1.2em;
  font-weight: bold;
  border-bottom: 4px solid #CCCCCC;
  position: relative;
}
.flow07 > li dl dt::after {
  content: '';
  width: 20%;
  height: 4px;
  position: absolute;
  bottom: -4px;
  left: 0;
  background-color: #80c2f4;
}

.flow07 > li dl dd {
  margin: 0;
}

@media screen and (max-width: 767px){
	.space{margin: 70px 0;}
	.catch{font-size: 16px;}
	.flow07 > li .icon07 {
		width: 120px;
		font-size: 14px;
	}
	.flow07 > li .icon07::after {
		border-left: 60px solid transparent;
		border-right: 60px solid transparent;
		border-top: 30px solid #80c2f4;
		bottom: -30px;
	}
	.flow07 > li dl {padding: 0 0 0 20px;}
}




/*--お問い合わせ--*/
.f-text{
  margin: 60px 0 40px;
  text-align: left;
}

.f-text span {
background-color: #C50018;
font-size: 11px;
padding: 5px 5px;
color: #fff;
white-space: nowrap;
line-height: 14px;
  margin-right: 2px;
}

.form > p {
text-align: center;
font-size: 14px;
line-height: 2;
margin-bottom: 3em;
}

.f_table {
border-bottom: 1px solid #b6b6b6;
font-size: 14px;
margin-bottom: 50px;
}

.f_table .tr {
width: 100%;
display: flex;
border-top: 1px solid #b6b6b6;
}

.f_table .th {
width: 250px;
padding: 30px 25px;
background-color: #EFFBFF;
line-height: 1.5;
display: flex;
align-items: center;
}

.f_table span {
background-color: #C50018;
font-size: 11px;
padding: 2px 5px;
color: #fff;
white-space: nowrap;
margin-left: 15px;
line-height: 14px;
}

.f_table .td {
width: calc( 100% - 250px );
padding: 30px 25px;
line-height: 1.5;
text-align: left;
}

.f_table input[type='radio']{
margin: 0 3px 15px 15px;
}

.f_table input[type='checkbox']{
margin: 0 3px 15px 15px;
}

.f_table input[type='text'], .f_table textarea {
border: 1px solid #ccc;
min-width: 100%;
height: 46px;
padding: 5px;
transition: all 0.3s ease;
border-radius: none !important;
line-height: 1.5;
}

.f_table input[type='text']:focus, .f_table textarea:focus {
background-color: #f5f5f5;
border: 1px solid #999;
  min-width: 100%;
}

.f_table textarea {
min-height: 200px;
}

h5{
margin: 0 0 20px;
font-size: 20px;
text-align: center;
}

.privacy {
background-color: #f5f5f5;
padding: 30px;
font-size: 14px;
line-height: 1.5;
text-align: center;
margin: 40px auto 50px;
}

.privacy div {
font-weight: bold;
}

.form input[type='submit'] {
width: 100%;
max-width: 320px;
height: 70px;
color: #fff;
background-color: #ef7a1b;
  border-radius: 5px;
font-size: 16px;
border: none;
margin: 0 auto 60px;
font-weight: bold;
cursor: pointer;
transition: opacity 0.3s ease;
border-radius: none !important;
display: block;
}

.form input[type='submit']:hover {
opacity: 0.6;
}

iframe{
  width: 100%;
  margin: 20px auto;
}


@media screen and (max-width: 767px){

#form{padding: 0 20px 20px 30px; }

.f-text{margin: 50px 0 30px;}

.form > p {
  text-align: left;
  font-size: 12px;
  margin-bottom: 3em;
}

.f_table {
  font-size: 13px;
  margin-bottom: 0;
  border: none;
  padding-right: 3%;
}

.f_table .tr {
  display: block;
  border: none;
}

.f_table .th {
  width: 100%;
  background-color: transparent;
  padding: 0;
  display: block;
}

.f_table span {
  font-size: 10px;
  padding: 2px 5px;
  margin-left: 10px;
  line-height: 12px;
}

.f_table .td {
  width: 100%;
  padding: 10px 0 30px;
}

.f_table input[type='text'], .f_table textarea {
  height: 36px;
  padding: 5px;
}

.f_table textarea {
  height: 200px;
}

h5{font-size: 16px;}

.privacy {
  max-width: 480px;
  padding: 20px 10px;
  font-size: 13px;
  margin: 30px auto 30px;
}


.form input[type='submit'] {
  width: 100%;
  max-width: 240px;
  font-size: 14px;
  margin-bottom: 100px;
  border-radius: 5px;
}

}






/*--サンクス--*/
.thanks h1{
	margin: 0px 0 80px;
	padding-top: 200px;
	text-align: center;
}
.thanks p{
	padding: 10%;
	text-align: center;
	border: 1px solid #0789ed;
}
.thanks a{
max-width: 320px;
line-height: 5;
text-align: center;
color: #fff;
background-color: #0789ed;
  border-radius: 5px;
font-size: 16px;
margin: 70px auto 100px;
font-weight: bold;
cursor: pointer;
transition: 0.3s;
display: block;
}

.thanks a:hover{background-color: #7ec45d;}









/*--------------フッター--------------*/

footer {
	background: #42b049;
	color: #fff;
	font-weight: bold;
	letter-spacing: 0.1em;
	padding: 40px 0;
	margin-top: 60px;
}

footer .inner{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.name img{
	width: 400px;
	margin-bottom: 20px;
}

.contact-box h2{
	font-size: 35px;
	line-height: 1.4;
}

.f-mail a {
	background-color: #ffa200;
	display: block;
	line-height: 45px;
	height: 45px;
	text-align: center;
	width: 360px;
	color: #fff;
	font-weight: bold;
	text-decoration: none;
	font-size: 20px;
	border-radius: 5px;
	margin: 10px auto 0;
}

.f-mail a:hover {
	background-color: #a37424;
}

.f-mail a img {
	width: 30px;
	height: 20px;
	vertical-align:middle;
	margin-right: 0.5em;
}

@media screen and (max-width: 850px){
	footer .inner{
	display: block;
	text-align: center;
}
.name img{
	width:250px;
}

.contact-box h2{
	font-size: 28px;
}
.f-mail a {
	width: 85%;
	font-size: 18px;
}
}