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



#catch_img {
	margin:0px auto 15px auto;
text-align:center;
	position:relative;
	vertical-align: middle;
}

#catch_img img {
	width: 100%;
	height: auto;
}

#catch_img h1.catch_txt {
	font-size: 3.0rem;
	background-color: #06918f;
	color: #ffffff;
	padding: 30px 20px;
	box-sizing: border-box;
	line-height: 160%;
}

#contents #contact{
	max-width: 800px;
	width: 100%;
	margin: 0px auto;
}

#contents #contact p.about_personal{
	text-align: center;
	margin: 20px auto;
}

#contents #contact p.about_personal a{
	text-decoration: underline;
}

#contents #contact p.about_personal a:hover{
	 color: #06918f;
}

#contents #contact p.notice{
	color: #AE0A0D;
}

#contents #contact .thanks {
	text-align: center;
	min-height: 100px;
	padding:20px 10px 50px 10px;
	box-sizing: border-box;
}

#contents #contact span.notice{
	color: #AE0A0D;
}

#contents #contact table#contact_table {
	max-width: 900px;
	width: 100%;
	margin: 0px auto;
border-collapse:collapse;
	width: 100%;
	border-top: 1px solid #06918f;
	border-left: 1px solid #06918f;
	border-bottom: 1px solid #06918f;
	border-right: 1px solid #06918f;
	border-spacing: 0;

}

#contents #contact table#contact_table th,#contents #contact table#contact_table td {
	padding: 20px;
		vertical-align: middle;
}

#contents #contact table#contact_table tr {
	background-color: #ffffff;
}

#contents #contact table#contact_table tr:nth-child(odd) {
	background-color: #f9f9f9;
}

#contents #contact table#contact_table th {
	width: 30%;
	color: #06918f;
	text-align: center;
	 font-weight: normal;
}


#contents #contact table#contact_table td{
width: 70%;
	text-align: left;
}

#contents #contact .error_txt {
	background-color: #dc2d30;
	color: #ffffff;
	width: 90%;
	box-sizing: border-box;
	padding: 2px 10px;

}

input[type="submit"], input[type="button"], input[type="reset"] { -webkit-appearance: none; }

input.type1 {
	width: 90%;
	padding: 5px;
	border: 1px solid #ccc;
	box-sizing: border-box;
}

input.type2 {
	width: 90%;
	padding: 5px;
	border: 1px solid #ccc;
	box-sizing: border-box;
	float: right;
}

div.form_name {
	float: left;
	margin-right: 2%;
	width: 44%;
}

div.form_name:last-of-type {
	margin-right: 0px;
}

textarea.type1 {
	width: 90%;
	padding: 5px;
	border: 1px solid #ccc;
	box-sizing: border-box;
	height: 100px;
}

.btn_set {
	margin: 20px auto;
	width: 300px;
	text-align: center;

}
.btn_set input {
	border: none;
	font-size: 1.4rem;
	cursor: pointer;
}

.btn_set input.check_btn {
	background-color: #06918f;
	padding: 20px;
	box-sizing: border-box;
	width: 120px;
	color: #ffffff;
}

.btn_set input.check_btn:hover {
	background-color: #5faeca;
		transition: all 0.4s ease;
	-webkit-transition: all 0.4s ease;
	-moz-transform: all 0.4s ease;
	-ms-transform: all 0.4s ease;
	-o-transform: all 0.4s ease;
}

.btn_set input.check_reset {
	background-color: #404040;
	padding: 20px;
	box-sizing: border-box;
	width: 120px;
	color: #ffffff;
}

.btn_set input.check_reset:hover {
	background-color: #06918f;
		transition: all 0.4s ease;
	-webkit-transition: all 0.4s ease;
	-moz-transform: all 0.4s ease;
	-ms-transform: all 0.4s ease;
	-o-transform: all 0.4s ease;
}

/*サポート*/
#contents #support {
	background-color: #ffffff;
}

#contents #support .support_inner {
	max-width: 960px;
	margin: 0px auto;
}

#contents #support .box_support_half {
	width: 50%;
	float: left;
	margin-bottom: 40px;
}


#contents #support .box_support_half:nth-of-type(2n) {
	float: right;
}

#contents #support .box_support_half:nth-of-type(6n) {
	margin-bottom: 0px;
}

#contents #support .box_support_half p.circle{
	border-radius: 50%;
	height: 260px;
	width: 260px;
	text-align: center;
	background-color: #ffffff;
	box-sizing: border-box;
	border: 1px solid #028e8a;
	padding-top: 150px;
	color: #018e8a;
	font-size: 2.4rem;
	margin: 0px auto 5px auto;
}

#contents #support .support_inner a:link{
	color: #028e8a;
}

#contents #support .support_inner a:hover{
	text-decoration: underline;
	color: #222222;
}

#contents #support .support_inner a:visited{
	color: #028e8a;
}

#contents #support #qa {
  width: 100%;
border-top: solid 1px #028e8a;
	border-left: solid 1px #028e8a;
	border-right: solid 1px #028e8a;
}
 
#qa > dt {
  
  background-color: #f5faf9;
  color: #028e8a;
  cursor: pointer;
  padding: 10px 30px 10px 10px;
  font-weight: bold;
position: relative;
	text-align: left;
	
}

#qa > dt:last-child {
	border-bottom: none;
} 

#qa > dt:after {
   content: "▼";
   position: absolute;
   width: 10px;
   right: 10px;
   height: 10px;
	margin-top: -10px;
	top: 50%;
}

#qa > dt.ac:after {
   content: "▲";
   position: absolute;
width: 10px;
   right: 10px;
   height: 10px;
}

#qa > dt.bline {
	border-bottom: solid 1px #028e8a;
}

#qa > dd {
	text-align: left;
  margin: 0px;
  padding: 10px 10px 25px 10px;
border-bottom: solid 1px #028e8a;
}

#qa > dd:last-child {
	
}

#contents #support .box_support_half p.mail {
	background-image: url(/images/top/icon_mail.png);
	background-repeat: no-repeat;
	background-position: center 90px;
	display: block;
}
#contents #support .box_support_half p.tel {
	background-image: url(/images/top/icon_tel.png);
	background-repeat: no-repeat;
	background-position: center 80px;
	display: block;
}
#contents #support .box_support_half p.chat {
	background-image: url(/images/top/icon_chat.png);
	background-repeat: no-repeat;
	background-position: center 40px;
	display: block;
}

#contents #support .box_support_half h4 {
	font-size: 1.8rem;
	text-align: left;
	padding: 10px 0px 5px 0px;
	box-sizing: border-box;
	color: #018e8a;
}



#contents #support .box_support_half p.detail {
	vertical-align: middle;
	display: table-cell;
	text-align: left;
	width: 50%;
	text-align: left;
	padding: 0px 0px ;
	box-sizing: border-box;
}

#contents #support .box_support_half .support_img {
	margin-top: 20px;
}

#contents #support section.video_area {
	margin-bottom: 50px;
}




#contents #support ul.support_menu {

	list-style: none;
	display: table;
	margin: 0px auto 20px auto;
	border-collapse: separate;
 border-spacing: 10px 0;
}
#contents #support ul.support_menu li {
	
	display: table-cell;


}
#contents #support ul.support_menu li:last-child {
	margin-right: 0px;
}
#contents #support ul.support_menu li a {
	color: #06918f;
	display: block;
	padding: 5px 10px 5px 10px;
	box-sizing: border-box;
	border: 1px solid #06918f;
	width: 120px;
}
#contents #support ul.support_menu li a:hover {
	color: #fff;
	background-color: #06918f;
}




/*機能一覧*/
#contents #function {
	background-color: #ffffff;
}


#contents #function_inner {
background-color: #fff;
	max-width: 1200px;
	width: 100%;
	margin: 0px auto;
	box-sizing: border-box;
}



#contents #function_inner section.function_section {
	margin-bottom: 70px;
}

#contents #function_inner .movie_txt {
	margin-top: 20px;
	font-size: 1.6rem;
}

#contents #function_inner .box_function {
	width: 50%;
	float: left;
	padding: 0px 40px;
	box-sizing: border-box;
}

#contents #function_inner .function_txt {
	text-align: center;
	margin-bottom: 40px;
}

#contents #function_inner .box_function h3 {
	border-radius: 50%;
	height: 260px;
	width: 260px;
	text-align: center;
	background-color: #ffffff;
	box-sizing: border-box;
	border: 1px solid #06918f;
	padding-top: 160px;
	color: #06918f;
	font-size: 2.4rem;
	margin: 0px auto 10px auto;
}
#contents #function_inner .box_function h3.mato {
	background-image: url(/images/function/icon_mato.png);
	background-repeat: no-repeat;
	background-position: 95px 70px;
	display: block;
}

#contents #function_inner .box_function h3.hand {
	background-image: url(/images/function/icon_hand.png);
	background-repeat: no-repeat;
	background-position: center 70px;
	display: block;
}

/*導入実績下層*/
#contents #case_inner {
	max-width: 1000px;
	margin: 0px auto;
	padding: 10px;
	box-sizing: border-box;
	
}

.company_img {
	margin: 30px auto;
	max-width: 1200px;
	width: 100%;
	z-index: 1;
	position: relative;
	padding: 10px;
	box-sizing: border-box;
	text-align: left;
}

.company_img .com_catch{
	z-index: 998;
	position: absolute;
	top: 40px;
	left: 110px;
	font-size: 2.8rem;
	line-height: 160%;
	color: #06918f;
	padding-right: 5px;
	box-sizing: border-box;
}

.company_img .com_catch_name {
	z-index: 800;
	position: absolute;
	bottom: 70px;left: 110px;
	font-size: 1.6rem;
line-height: 120%;}

.company_img .com_catch_person{
	z-index: 700;
	position: absolute;
	bottom: 40px;left: 110px;
	font-size: 2.2rem;
}

#contents #case_inner dl.task {
	width: 100%;
	margin-bottom: 50px;
	background-color: #f5faf9;
}

#contents #case_inner dl.task dt {
	width: 100%;
}

#contents #case_inner dl.task dd {
	width: 100%;

}
#contents #case_inner p.flow_arrow {
	text-align:center;
}

#contents #case_inner dl.task .bold{
	color: #018e8a;
	font-weight: bold;
}

#contents #case_inner dl.task dt div {
	float: left;
	padding: 20px;
	box-sizing: border-box;
	text-align: left;
}

#contents #case_inner dl.task dt div:first-child,#contents #case_inner dl.task dd div:first-child {
	width: 10%;
}
#contents #case_inner dl.task dt div:last-child,#contents #case_inner dl.task dd div:last-child {
	width: 90%;
}

#contents #case_inner dl.task dd div {
	float: left;
padding: 20px;
	box-sizing: border-box;
	text-align: left;
}

#contents #case_inner .overview {
	margin-bottom: 60px;
	text-align: left;
}

#contents #case_inner section {
	margin-bottom: 80px;
}

#contents #case_inner div.plan_box2 {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #06918f;
	margin-top: 20px;
	border-radius: 5px;

}

#contents #case_inner .case_cat {
	margin-bottom: 40px;
}

#contents #case_inner .case_cat ul li {
	float: left;
	list-style: none;
	padding: 10px;
	width: 120px;
	margin-right: 20px;
	box-sizing: border-box;
	text-align:center;
}

#contents #case_inner .case_cat ul li.on {
	border: 1px solid #06918f;
	color: #06918f;

}

#contents #case_inner .case_cat ul li.off {
		border: 1px solid #ccc;
	color: #ccc;
}

#contents #case_inner div.plan_box2 p.staff_voice{
	box-sizing: border-box;	
	padding: 30px 20px 20px 280px;
	background-image: url(/images/case/case_img.jpg);
	background-position: 85px;
	background-repeat: no-repeat;
	min-height: 170px;
	
}


#contents #case_inner div.plan_box2 h3 {
	color: #ffffff;
	background-color: #06918f;box-sizing: border-box;
	padding: 20px;
	font-size: 2.4rem;
	text-align: center;
}

#contents #case_inner div.plan_box2 p {
	padding: 20px;
	box-sizing: border-box;
	text-align: left;
}

#contents #case_inner div.plan_box2 h4 {
	color: #06918f;
	line-height: 160%;
	box-sizing: border-box;
	padding: 20px;
	font-size: 3.4rem;
	
}

#contents #case_inner table#company_table {
border-top: solid 1px #028e8a;
	border-left: solid 1px #028e8a;
	background-color: #ffffff;
	width: 100%;
}

#contents #case_inner table#company_table td.com_name {
	text-align: center;
}

#contents #case_inner table#company_table th {
border-right:solid 1px #028e8a;
border-bottom:solid 1px #028e8a;
	white-space: nowrap;
	padding: 20px;
	box-sizing: border-box;
	vertical-align: middle;
}

#contents #case_inner table#company_table td {
border-right:solid 1px #028e8a;
border-bottom:solid 1px #028e8a;
	padding: 20px;
	text-align: left;
	box-sizing: border-box;
}

#contents #case_inner table#company_table td a:hover {
	text-decoration: underline;
}

#contents #case_inner table#company_table td img {
	width: 230px;
}

#contents #case_inner table#company_table td dl {
	line-height: 130%;
}

#contents #case_inner table#company_table td dl dt {
	float: left;
	width: 15%;
	margin-bottom: 5px;
}

#contents #case_inner table#company_table td dl dd {
	float: left;
	width: 85%;
	margin-bottom: 5px;
	line-height: 130%;
}

#contents #case_inner table#company_table td dl dd:last-child {
	margin-bottom: 0px;
}

/*パンくず*/

.bread {
	margin: 0px auto;
	max-width: 1200px;
	box-sizing: border-box;
	padding: 5px 10px;
}

.bread ul li {
	float: left;

	list-style: none;
}

.bread ul li:after{
  content: '>';
  padding: 0 4px;
  color: #222222;
}

.bread ul li:last-child:after{
  content: '';
}

.bread ul li a {
	text-decoration: none;
}

.bread ul li a:hover {
	text-decoration: underline;
}

@media screen and (max-width: 1080px) {
.company_img .com_catch{
	top: 10px;
	left: 20px;
	color: #06918f;
	position: absolute;
	margin: 10px 0px;
}

.company_img .com_catch_name {
	bottom:50px ;left: 20px;
	font-size: 1.6rem;
	position: absolute;}

.company_img .com_catch_person{
	bottom: 25px;left: 20px;
	font-size: 	2.0rem;
	position: absolute;
}
}


@media screen and (max-width: 940px) {
	
/*導入実績下層*/
#contents #case_inner,#contents #function_inner {
		padding: 10px;
}
	
#contents #support .box_support_half p.mail {
	height: 180px;
	width: 180px;
	padding-top: 110px;
	font-size: 1.8rem;
	background-position: center 50px;
}
#contents #support .box_support_half p.tel {
	height: 180px;
	width: 180px;
	padding-top: 110px;
	font-size: 1.8rem;
	background-position: center 45px;
}
#contents #support .box_support_half p.chat {
	height: 180px;
	width: 180px;
	padding-top: 120px;
	font-size: 1.8rem;
	background-position: center 15px;
}
}
	
@media screen and (max-width: 920px) {
	#catch_img h1.catch_txt {
	font-size: 2.4rem;
		

}
.company_img .com_catch{
	top: 20px;
	left: 20px;
	font-size: 2.0rem;
	line-height: 160%;
	color: #06918f;
}

.company_img .com_catch_name {
	bottom: 50px;left: 20px;
	font-size: 1.6rem;}

.company_img .com_catch_person{
	bottom: 20px;left: 20px;
	font-size: 2.2rem;
}

#contents #contact table#contact_table th,#contents #contact table#contact_table td {
	float: left;
	text-align: left;
	padding: 0px 10px 10px 10px;
	width: 96%;

}

#contents #support .box_support_half .support_img {
	display: none;
}


input.type1 {
	width: 96%;

}

textarea.type1 {
	width: 96%;
}
.form_title {
		margin-top: 20px;
}
#contents #contact {
		padding: 10px;
		box-sizing: border-box;
}

#contents #case_inner div.plan_box2 h4 {
	font-size: 1.4rem;
}
	
#contents #case_inner dl.task {
	margin-bottom: 20px;
}

#contents #case_inner dl.task dt div{
	float: none;
}

#contents #case_inner dl.task dd div{
float: none;
}
#contents #case_inner dl.task dt div:first-child, #contents #case_inner dl.task dd div:first-child {
		padding: 5px 5px 0px 5px;
		width: 100%;
}
#contents #case_inner dl.task dt div:last-child, #contents #case_inner dl.task dd div:last-child {
	width: 100%;
	padding: 0px 5px 0px 5px;
}
	
#contents #case_inner table#company_table td dl dt {
	float: none;
	width: 100%;
	margin-bottom: 0px;
}

#contents #case_inner table#company_table td dl dd {
	float: none;
	width: 100%;
}	

}

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


.company_img {
		margin-bottom: 5px;
	padding:5px 10px;
}	
	
.company_img .com_catch{
	top: auto;
	left: auto;
	font-size: 1.6rem;
	line-height: 160%;
	color: #06918f;
	position: relative;
	margin: 10px 0px;
}

.company_img .com_catch_name {
	top:15% ;left: 20px;
	font-size: 1.2rem;
	position: absolute;}

.company_img .com_catch_person{
	top: 30%;left: 20px;
	font-size: 	1.4rem;
	position: absolute;
}

#catch_img p.sub_catch {
font-size: 1.6rem;
}
	
#contents #support .box_support_half {
	width: 100%;
	float: none;
}
#contents #support .box_support_half p.detail {
	height: auto;
	padding-bottom: 20px;
		
}
	
#contents #case_inner .case_cat ul li {
		padding: 2px;
		width: 100px;
		margin: 2px;
}
#contents #case_inner div.plan_box2 p.staff_voice {
		padding: 20px;
	background: none;
	}
	
#contents #case_inner table#company_table th {
	padding: 5px;
}

#contents #function_inner section.function_section {
	margin-bottom: 30px;
}
	
#contents #case_inner .case_cat {
	margin-bottom: 20px;
}

#contents #case_inner div.plan_box2 h3 {
font-size: 1.7rem;
}
	
#contents #support ul.support_menu li a {
	width: 100px;
	font-size: 1.2rem;
	padding: 5px;
}

#contents #support .box_support_half {
	margin-bottom: 0px;
}
	#contents #case_inner div.plan_box2 p.staff_voice {
		min-height:auto;
	}
	#contents #case_inner section {
		margin-bottom:40px;
	}

#contents #function_inner .function_txt {
	text-align: left;
	margin-bottom: 20px;
}

#contents #function_inner .box_function {
		padding:0px 5px;
	}
	
#contents #function_inner .box_function h3 {
	border-radius: 50%;
	height: 160px;
	width: 160px;
	text-align: center;
	background-color: #ffffff;
	box-sizing: border-box;
	border: 1px solid #06918f;
	padding-top: 110px;

	font-size: 1.4rem;

}
#contents #function_inner .box_function h3.mato {
background-position: 45px 30px;
}

#contents #function_inner .box_function h3.hand {
	background-position: center 30px;
}	
}

@media screen and (max-width: 560px) {
	
#contents #case_inner .case_cat ul li {
		width: 80px;
	font-size: 1.0rem;
}
	#catch_img h1.catch_txt {
	font-size: 1.8rem;
		padding: 20px 20px;
}
	
	#catch_img p.sub_catch {
font-size: 1.3rem;
line-height: 140%;
	max-width: 240px;
		margin-top: 15px;
}
}