@charset "utf-8";

/*********************************
 *
 * services common STYLES
 * TOPからのリンクページ(services)の共通CSS
 *
 *********************************/
 
 /*****************共通*****************/
.services {
	font-size: 14px;
	line-height: 1.75;
	font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, Helvetica, Arial, sans-serif;
	color: #7a3327;
	text-align: center;
}

.services img {
	width: 100%;
}

.services h1,
.services h2,
.services h3,
.services h4,
.services h5,
.services h6 {
	line-height: 1.2;
	font-weight: bold;
	font-feature-settings: "palt";
	color: #7a3327;
	text-align: center;
}

.services a {
	color: #FFF;
	text-decoration: none;
	transition: 0.2s;
	display: block;
	width: 100%;
}

.services a:hover {
	opacity: 0.7;
}
 
.services section h2,
.services section h1{
	font-size: 33px
}

.services section h1{
	width: 90%;
	margin: 0 auto;

}
.services section h1 + p{
	margin:10px auto 20px;
	font-size: 20px;
	line-height: 1.2em
}

.services section h2 + p{
	font-size: 20px;
	margin: 10px 5% 50px;
	max-width: 1800px;
	text-align: left;
}

.services .pc{
	display: block
}

.services .sp{
	display: none
}

.services article.content{
	margin: 0 auto;
	max-width: 1920px;
}

.services .float_text,
.services .Plantect,
.services .header{
	margin-bottom:30px;
	display: flex;
	margin: 0 auto;
	align-content: center;
	align-items: center;
	background: #fff;
	justify-content:space-between;
	flex-wrap: wrap;
}

.services section.bg{
	background:#f8f5f4;
	padding:40px 0
}

.services section.bg .figure{
	max-width: 1800px;
	margin: 0 auto;
	width:90%;
}
.services section .concept{
	max-width: 640px;
	margin: 0 auto;
}

.services section.header .concept img{
	width:60%;
	max-width:252px;
	margin: 20px auto
} 
.services section.header img,
.services section.float_text img{
	max-width:1400px;
	width:100%;
}
 
.services .header + section img:first-of-type{
	margin-bottom: 40px;
}
 
.services section{
	margin:90px auto
}
.services .float_text{
	background: #f8f5f4;
	margin:50px auto
}
.services section ul{
	display: flex;
	align-content: center;
	align-items:flex-start;
	flex-wrap: wrap;
	max-width: 1920px;
	justify-content:space-between;
	width: 90%;
	margin: 40px auto 0
}
.services section li{
	max-width: 480px;
	width: 23%;
	text-align: left;
	color: #333
}
.services section li h3{
	color:#7a3327;
	font-size:24px;
	line-height:40px
}
.services figcaption h4{
	font-size:24px;
	margin-bottom: 12px;
}
 
.services .float_text p,
.services figcaption {
	padding: 5%;
	text-align: left;
	font-size: 14px;
	line-height: 1.4em;
	color: #000;
}
.services .float_text p{
	padding:0;
	margin: 4px 0
}
.services .float_text p + p{
	margin: 15px 0
}
 
.services .float_text h2{
	font-size: 24px;
	margin-bottom:32px;
	text-align: left
}
  
.services form dl{
	display: flex;
	flex-wrap: wrap;
	text-align: left;
	color: #000;
	margin: 10px 0
}

.services form dt,
.services form dd{
	width:100%
}
 
.services input[type="submit"],
.services .btn{
	background: #7a3327;
	max-width: 640px;
	height: 64px;
	margin: 50px auto;
	width:90%;
	font-size: 30px;
	display: flex;
	justify-content:center;
	align-items: center;
}
 
.services .Plantect{
	width: 100%;
	max-width:1300px;
	background:#f8f5f4;
	align-items: flex-end;
}
.services .Plantect_img{
	text-align: center;
	max-width: 800px;
	width: 100%;
	margin: 0 auto;
}
.services section.float_text .Plantect_img img{
	width:100%;
	max-width:600px;
}
.services .Plantect h4{
	font-size:43px;
	margin:40px auto 20px;
}
.services form{
	margin: 20px auto;
	max-width: 640px;
	width: 90%;
}
.services section.float_text img.b_logo{
	max-width: 330px;
	width: 90%;
	margin: 0 auto 20px
}
.services input[type="text"],
.services input[type="email"]{
	width:100%;
	height:30px;
	border: 1px solid #ccc;
	padding: 8px;
}
.services textarea{
	width:100%;
	border: 1px solid #ccc;
	padding: 8px;
}
.services input[type="submit"],
.services .float_text h2.btn{
	color: #fff;
	cursor: pointer
}
 
.services #formWrap input[type="button"]:hover,
.services input[type="submit"]:hover,
.services .float_text h2.btn:hover{
	opacity: .7
}
.services .Plantect h3{
	border:1px solid #7a3327;
	line-height: 2em;
	font-size:24px;
	margin: 30px auto;
}
.services .form_w{
	display: none;
	width: 100%;
	background: #fff;
	margin: 40px auto 0;
}
.services .form_w h3{
	font-size:24px;
	margin: 60px auto 40px;
	width:96%;
}
.services .form_w span{
	font-size:12px;
	color: #aaa
}

.services .form_w span{
	font-size:12px;
	color: #aaa
}

.services input[type="submit"]{
	border:none;
	width: 100%;
}
 
.services .formTable{
	width:100%;
	max-width: 640px;
	font-size: 18px;
	text-align: left;
	border-collapse: collapse;
	border-spacing: 0;
	padding:2px;
}

.services .b_wrapper{
	display: flex;
	justify-content:center;
	align-items: center;
}
.services .formTable tr {
	display: flex;
	flex-wrap: wrap;
}
.services .formTable td{
	border-bottom:1px solid #7a3327;
	padding:4px 8px;
	width:100%;
	display: block;
	 color: #333
}
.services .formTable th{
	padding:4px 8px;
	width:100%;
}
 
.services h3.thank,
.services #formWrap h3{
	font-size: 30px;
	margin: 50px auto 20px
}
.services #formWrap p{
	font-size: 18px;
	color: #333
}
 
.services #formWrap input[type="button"],
.services #formWrap input[type="submit"]{
	width: 45%;
}
.services #formWrap input[type="button"]{
	border:1px solid #7a3327;
	height: 64px;
	font-size: 16px;
	color: #AAAAAA
}
.services dl.visit{
	color: #333;
	display: flex;
	flex-wrap: wrap;
}
.services .visit dt{
	width: 15%;
	text-align: left
}
.services .visit dd{
	width: 83%;
	text-align: left;
	margin-left: 2%
}
 
 /*スマホ*/
 @media (min-width: 300px) and (max-width:960px) {
 
	.services .pc{
		display: none
	}
	.services .sp{
		display: block
	}
	
	.services section h2,
	.services section h1{
		font-size:24px;
		text-align: left;
		margin: 0 5%;
	}
	.services section h2{
		margin: 0
	}
	.services section h1 +p{
		text-align: left;
		margin: 2% 5%;
	}
	.services .float_text p{
		padding:0
	}
	/*header*/
	.services .float_text,
	.services .header{
		margin-bottom:20px;
		display: contents
	}
	.services .header .concept{
		width: 90%;
		margin: 20px auto;
		padding: 0
	}
	.services .header .concept p{
		text-align: left;
		margin: 20px auto
	}
	.services section li{
		width: 100%;
		max-width: none
	}
	.services figcaption {
		padding:3% 6%;
	}
	.services section .concept{
		margin: 5%;
		padding:0;
		max-width: none;
		width: auto;
	}
	
	.services section > h2{
		margin: 5%;
	}
	.services section.header img, 
	.services section.float_text img{
		width: 100%
	} 
} 
 
 @media (min-width: 300px) and  (max-width:720px) {
	.services section {
		margin: 40px auto;
	}
	.services section ul{
		display:block;
		margin: 20px auto;
	}
	.services section h2 + p {
		line-height: 1.4em;
	}
	.services .float_text h2 {
		margin-bottom: 20px;
	}
	.services .btn{
		font-size: 20px
	}
	
	.services section .concept{
		width:auto;
		max-width:none
	}
	.services section.header img,
	.services section.float_text img{
		width:100%;
		max-width:none
	}
}

/*タブレット*/
@media (min-width: 720px) and (max-width:1200px) {
	.services section li{
		width: 48%;
		margin-top: 20px;
	}
	.services form dt{
		width:25%
	}
	.services form dd{
		width:75%;
	}
	.services .formTable{
		width:100%;
		max-width: 640px;
		font-size: 18px;
		text-align: left;
		border-collapse: collapse;
		border-spacing: 0;
		border:2px solid #7a3327;
		padding:2px;
	}
	.services .formTable td,
	.services .formTable th{
		padding:4px 8px;
		border-bottom:1px solid #7a3327
	}
	.services .formTable th{
		width: 30%;
	}
	.services .formTable td{
		color: #333;
		border-left:1px solid #7a3327;
		width:70%
	} 
}

/*PC*/
@media (min-width: 1200px) {
	.services .header{
		align-items: flex-start
	}
	.services form dt{
		width:25%
	}
	.services form dd{
		width:75%;
	}
	.services .formTable{
		width:100%;
		max-width: 640px;
		font-size: 18px;
		text-align: left;
		border-collapse: collapse;
		border-spacing: 0;
		border:2px solid #7a3327;
		padding:2px;
	}
	.services .formTable td,
	.services .formTable th{
		padding:4px 8px;
		border-bottom:1px solid #7a3327
	}
	.services section.header img,
	.services section.float_text img{
		max-width:1400px ;
		width:62%
	}
	.services section .concept{
		max-width: 420px;
		margin: 0 auto;
		width:45%;
	}
	
	.services .Plantect_img{
		text-align: center;
		max-width: 800px;
		width: 45%;
		margin: 0 auto;
	}
	.services .formTable tr{
		display:table-row
	}
	.services .formTable th{
		width: 30%;
		display:table-cell
	}
	.services .formTable td{
		color: #333;
		border-left:1px solid #7a3327;
		width: 70%;
		display:table-cell
	}
}