html {
	margin:0; 
	padding:0; 
}
html * {
	line-height:1.5em; 
	box-sizing: border-box;
}
body {
	margin:0; 
	padding:0em; 
	box-sizing: border-box;
	font-size:16px; 
}

* { font-family: 'メイリオ',Meiryo,'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','sans-serif','Lucida Grande','Arial','Osaka'; }

header {
	position:relative;
	margin:0; 
	padding:0em; 
	height:55vw; 
	background-image:url(_images/mainimg.jpg);
	background-size:cover;
	background-position:center top;
		animation: fadeIn 1s ease 0s 1 normal;
		-webkit-animation: fadeIn 1s ease 0s 1 normal;}
h1 { 
	bottom:0;
	color:#fff; 
	font-size:5.5vw; 
	text-align:center; 
	margin:0 0 0 0 ;
	line-height:1.3em; 
	width:100%;
	padding:0.3em 10% 0.3em 10%; 
	position:absolute;
	background-color: transparent;
	background-color: rgba(0, 0, 0,0.5);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50000000,endColorstr=#50000000);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#50000000,endColorstr=#50000000)";
}
h1 > span:nth-child(2) { 
	display:inline-block; line-height:inherit; 
}
.intro h2 { 
	color:#fff; background:url(_images/footerbg.jpg); text-align:center; margin:0; padding:0.5em 0; font-size:2.3vw; line-height:1.2em; 
}
.intro p { 
	display:block; width:75%; text-align:left; margin:2em auto 0 auto; font-size:1.8em; color:#999; line-height:1.7em; 
}
h2,h3 { 	color:#53504b; }
h2 { 
	font-size:2.5em; 
	text-align:center; 
	margin:1.5em 0 1.5em 0; 
}
h3 { margin:0; padding:0; line-height:1em; }
h3 > p { margin:0; padding:0;  line-height:1em; }
.w {
	width:80%; 
	margin:0 auto; 
	padding:2em 0em 4em 0em; 
	line-height:2em; 
}
.interview p { line-height:2.2em; font-size:1.2em; margin:0 0 2.5em 0; }
.interview img.img1 { width:100%; margin:0em 0 4vw 0; height:30vw; object-fit:cover; object-position: 50% 20%;}
.interview img.img2 { width:45%; max-width:500px; float:left; margin:0.5em 4em 1em 0; }
.interview img.img3 { width:45%; max-width:500px; float:right; margin:0.5em 0 3em 4em; }
.interview .imgprofile { color:#fff; position:absolute; }
.interview .imgprofile > div { text-align:inherit; }
.interview .imgprofile div div:nth-child(1) { font-size:2vw; }
.interview .imgprofile div div:nth-child(2) { font-size:1vw; }
.interview .imgprofile1 { color:#fff; margin:-12vw 0 0 2.5vw; }
.interview .imgprofile2 { color:#000; margin:-12vw 0 0 2.5vw; }
.interview span.pharumichi { display:inline-block; background-size:cover;width:3em; height:3em; float:left; margin:0.5em 1em 0.1em 0; background-image:url(_images/icon_harumichi.jpg); }
.interview span.pnaomichi { display:inline-block; background-size:cover;width:3em; height:3em; float:left; margin:0.5em 1em 0.1em 0; background-image:url(_images/icon_naomichi.jpg); }

.profile { clear:both; background:#f6f4f1; overflow:auto; padding-bottom:4em; }
.profile p { line-height:1.7em; }
.profile img { width:100%; }
.profile section {display:block; width:47%;padding:0;margin:2em 0 0em 0; list-style-type:none; }
.profile section:nth-of-type(1) { float:left; }
.profile section:nth-of-type(2) { float:right; }
.profile h3 { font-size:1.5em; margin:0 0 0.2em 0; }
.profile h3 + p { font-size:1em; color:#888; margin:0 0 1em 0; padding:0; }
.profile p:nth-child(2) { margin:0; padding:0; line-height:1.8em; }

.company { background:#e7e4e0; overflow:auto; padding:0 0 0em 0; }
.company p { line-height:1.8em; }
.company h3 { font-size:1.2em; font-weight:bold; line-height:1.7em; }
.company .blist { margin:1.5em 0 2em 0 ; overflow:auto; }
.company .blist img { width:20%; float:left; border:1px solid #ddd; }
.company img.b:nth-last-of-type(1) { margin:0; }
.company div.e { float:right; width:40%; max-width:250px; margin:0.3em 0 2vw 5vw; }
.company div.e img { width:100%; }
.company div.e p { font-size:0.8em; }
.company a.banner img { width:100%; margin:1.5em 0 0 0; }

footer {clear:both; background:url(_images/footerbg.jpg); color:#fff; padding:1em 10%;}
footer img { display:block; width:40%; max-width:500px; margin:1em auto 2em auto; }
footer h2 { font-size:1.2em; color:#fff; margin:0 0 0.7em 0; }
footer a { color:#fff; }
footer .phone { display:flex; justify-content: center; align-items: center; margin:2.5em 0; }
footer .phone span { font-size:1.2em;  background:#0a0; color:#fff; display:inline-block; padding:0.1em 1em; margin:0em 0.7em 0em 0; }
footer .phone a { font-family:arial; font-size:2.5em; display:block; line-height:1em; margin:0.2em 0 0em 0; }
footer p { 	font-size:0.8em; text-align:center; 	margin:0.3em 0; }
footer small { margin:1em 0 2em 0; padding:0; display:block; text-align:center; color:#aaa; line-height:1.4em; }

@keyframes fadeIn { 0% { display:none; opacity: 0} 1% { display:block; opacity: 0} 100% { display:block; opacity: 1}}
@-webkit-keyframes fadeIn { 0% { display:none; opacity: 0} 1% { display:block; opacity: 0} 100% { display:block; opacity: 1} } 
@keyframes fadeOut { 0% { display:block; opacity: 1} 1% { displa:block; opacity: 1} 100% { display:none; opacity: 0} } 
@-webkit-keyframes fadeOut { 0% { display:block; opacity: 1} 1% { display:block; opacity: 1} 100% { display:none; opacity: 0} } 
.fadein {animation: fadeIn 1s ease 0s 1 normal forwards;-webkit-animation: fadeIn 1s ease 0s 1 normal forwards;}
.fadeout {animation: fadeOut 1s ease 0s 1 normal forwards;-webkit-animation: fadeOut 1s ease 0s 1 normal forwards;}
	
@media only screen and (max-width: 767px)  {
	body { 	font-size:14px; }
	header { height:85vw; }
	header > h1 { 
		font-size:9vw; 
		line-height:1.1em; 
		padding:0.4em 10% 0.3em 10%; 
	}
	header > h1 > span { display:inline-block; }
	.intro h2 { font-size:3.5vw; }
	.intro p { font-size:1.3em; }	

	h2 { font-size:2em; margin:1em 0; }
	
	.interview img.img1 { height:55vw; object-fit:cover; }
	.interview img.img2 { width:100%; max-width:none; float:none; margin:1em 0 3em 0; padding:0; }
	.interview img.img3 { width:100%; height:110vw; max-width:none; object-fit:cover; margin-left:0; float:none; background-position:center top;}
	.interview p { line-height:1.6em; }
	.interview .imgprofile div div:nth-child(1) { font-size:4vw; }
	.interview .imgprofile div div:nth-child(2) { font-size:2vw; }
	.interview .imgprofile1 { color:#fff; margin:-18vw 0 0 4vw; }
	.interview .imgprofile2 { color:#fff; margin:-18vw 0 0 4vw; text-shadow: 1px 1px 2px #000000; }

	.profile section { width:100%; float:none; margin:2em 0 0 0; }
	.profile img { width:100%; }

	.company img.e { width:40%; }

	footer img { width:80%; margin:1em auto; }
	footer .phone { display:block; }
	footer .phone span { margin:0 0 0.5em 0; }
}