/* --- subf_view --- */

.subf_view::before {
	background:url(../images/bg_subf_company.jpg) no-repeat center / cover;
}

#greeting {
	margin-top:60px;
	margin-bottom:190px;
}

.massage1 {
	margin:90px auto 110px;
	padding-bottom:110px;
	border-bottom:1px solid #ababab;
}

.mes_name {
	width:100%;
	z-index:2;
	position:relative;
}

@media all and (-ms-high-contrast: none) {
  /* ここに書く */
.mes_name {
    margin-top:18%;
  }
}

.mes_wrap {
	position:relative;
	overflow: hidden;
	min-height:340px;
	margin-bottom:2.3em;
}

.mes_wrap figure {
	width:68%;
	max-width:450px;
	position:absolute;
	right:0;
	top:0;
	overflow: hidden;
}

.mes_name dt {
	font-size:1.5rem;
	letter-spacing: 0.3em;
	margin-bottom:0.2em;
}

.mes_name dd {
	font-size:2.3rem;
	letter-spacing: 0.4em;
}

.mes_name dd span {
	font-size:1rem;
	display: block;
	margin-top:1em;
	letter-spacing: 0.2em;
	line-height: 1em;
}

.mes_name h2 {
	margin-bottom:3em;
}

.mes_name h2 span {
	font-size:3rem;
	letter-spacing: 0.1em;
	line-height:1.35em;
}

.mes_txt {
	max-width:640px;
}

.mes_txt p {
	font-size:1.3rem;
	line-height:2.5em;
}

@media screen and (max-width:900px){
	.mes_wrap figure {
		width:90%;
		max-width:100%;
		position:relative;
		right:auto;
		top:auto;
		order:-1;
		margin-left:auto;
	}
	.mes_wrap {
		min-height:auto;
		flex-wrap:wrap;
		-webkit-flex-wrap:wrap;
	}
	.mes_name {
		margin-top:-5em;
	}
	.mes_name h2 span {
		font-size:2.4rem;
	}
}

/* --- philosophy --- */


#philosophy {
	padding:388px 0 180px;
	position:relative;
}

#philosophy::before {
	content:"";
	display: block;
	width:100%;
	height:24vw;
	min-height:340px;
	background:url(../images/bg_phi.png) no-repeat center top / cover;
	position:absolute;
	top:0;
	left:0;
}

#philosophy .bg_curve_top.bg_curve_bottom {
	position:relative;
}

.phi_wrap {
	margin-top:90px;
}

.phi_block {
	width:20vw;
	height:20vw;
	max-width:225px;
	max-height:225px;
	min-width:200px;
	min-height:200px;
	border-radius: 50%;
	margin-bottom:20px;
}

.phi_block h2 {
	font-size:1.8rem;
	letter-spacing: 0.1em;
	line-height:1.5em;
}

@media screen and (max-width:980px){
	.phi_wrap {
		justify-content: space-around!important;
		-webkit-justify-content: space-around!important;
	}
}

/* --- profile --- */

#profile {
	margin-top:60px;
}

.pro_dl {
	margin:50px auto 70px;
	width:100%;
	max-width:640px;
}

.pro_dl dt,
.pro_dl dd {
	font-size:1.3rem;
	letter-spacing: 0.2em;
	border-top:1px solid #ababab;
	line-height:1.85em;
}

.pro_dl dt:last-of-type,
.pro_dl dd:last-of-type {
	border-bottom:1px solid #ababab;
}

.pro_dl dt {
	width:21%;
	max-width:130px;
	padding:1em;
	background:#f5f4f4;
	text-align:center;
}

.pro_dl dd {
	width:79%;
	padding:2.8em 1em 2.8em 2.8em;
}

/* --- google map --- */

.googlemap {
	width:100%;
}

.googlemap_link {
	display: inline-block;
	padding-left:1.5em;
	font-size:1.2rem;
	margin-left:1em;
	position:relative;
	letter-spacing: 0.1em;
	margin-bottom:0.5em;
}

.googlemap_link::before {
	content:">";
	display: block;
	width:1em;
	height:1em;
	color:#008ba5;
	position:absolute;
	left:0;
	top:0;
}

.googlemap_wrap iframe {
	width:100%;
	height:390px;
}



/* --- ver sp --- */

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

	.subf_view h1 {
		font-size:8vw;
	}

	#greeting {
		margin:10vw auto 20vw;
	}

	.massage1 {
		margin:10vw auto 10vw;
		padding-bottom:10vw;
	}

	.mes_wrap figure {
		width:81.75vw;
		height:61.75vw;
	}

	.mes_name h2 span {
		font-size:5vw;
		line-height:1.75em;
	}

	.mes_name dt {
		font-size: 4vw;
	}

	.mes_name dd {
		font-size:5.5vw;
	}

	.mes_name dd span {
		font-size:2.5vw
	}

	.mes_txt {
		max-width:100%;
	}


	.mes_txt p {
		font-size:3.25vw;
	}

	#philosophy {
		padding:62.5vw 0 28vw;
	}

	#philosophy::before {
		min-height:auto;
		height:50vw;
	}

	.phi_wrap {
		margin-top:15vw;
		-webkit-justify-content: space-between!important;
		justify-content: space-between!important;
	}
	

	.phi_block {
		min-width:auto;
		min-height:auto;
		width:42vw;
		height:42vw;
		max-width:100%;
		max-height:100%;
		margin-bottom:0;
	}

	.phi_block3 {
		margin:-2vw auto 0;
	}

	.phi_block h2 {
		font-size:4vw;
	}

	#profile {
		margin-top:10vw;
	}

	.pro_dl {
		margin:10vw auto 15vw;
		max-width:100%;
	}

	.pro_dl dt,
	.pro_dl dd {
		max-width:100%;
		width:100%;
		padding:1em 1em 1em 1.5em;
		font-size:3.25vw;
	}

	.pro_dl dt {
		-webkit-justify-content: flex-start!important;
		justify-content: flex-start!important;
	}

	.pro_dl dd {
		border-top:none;
	}

	.pro_dl dt:last-of-type {
		border-bottom:none;
	}

	.pro_dl dd:last-of-type {
		border-bottom:1px solid #ababab;
	}

	.googlemap_link {
		font-size:3vw;
	}

	.googlemap_wrap iframe {
		height:75vw;
	}


}