@charset "UTF-8";


header {
	width: 100%;
	background: url(../images/header_p_01.jpg) no-repeat left top;
	background-size: 39% auto;
	margin: 0 0 4%;
	padding: 0 0 11%;
	position: relative;
}
header h1 {
	width: 46%;
	margin: 0 auto 2.5%;
	padding-top: 23%;
}
header h1 figure {
	margin: 0 0 2vw;
}
header h1 figure img {
	width: 100%;
}
header p {
	font-size: 1.52rem;
	width: 17em;
	text-align: left;
	line-height: 1.7;
	margin-left: auto;
}
header .lang {
	display: flex;
	justify-content: center;
}
header .lang li {
	color: #003c87;
	width: 12em;
	line-height: 1.8;
	text-align: center;
	background: #c0b4a9;
	margin: 0 1em;
}
header .lang li a {
	color: #FFF;
	text-decoration: none;
	background: #403e3b;
	display: block;
}

#intro {
	margin: 0 0 8%;
	position: relative;
}
#intro .fig1 {
	width: 18.32%;
	position: absolute;
	top: 0;
	right: 22.5%;
}
#intro .fig2 {
	width: 18.32%;
	position: absolute;
	top: 36.4%;
	left: 22.5%;
}
#intro .fig1 img { width: 100%; }
#intro .fig2 img { width: 100%; }

#intro .tatemidashi {
	margin: 0 auto;
}
#intro .honbun {
	margin: 10vw 22.5% 0;
}

#works {
	background: url(../images/works_p_01.jpg) no-repeat left top;
	background-size: 100% auto;
	padding: 10.8% 0 0 0;
}
#works .tatemidashi {
	margin: 0 26% 1.3vw auto;
}
#works .sec1 {
	margin: 0 24% 5.5vw;
	position: relative;
}
#works .sec1 .fig1 {
	width: 38%;
	position: absolute;
	top: 0;
	left: 0;
}
#works .sec1 .fig2 {
	width: 45%;
	position: absolute;
	top: 28vw;
	right: 0;
}
#works .sec1 .fig1 img { width: 100%; }
#works .sec1 .fig2 img { width: 100%; }

#works .sec1 .block1 {
	width: 40%;
	margin: 0 0 10vw auto;
	padding: 2vw 0 0 0;
}
#works .sec1 .block2 {
	width: 45%;
	margin: 0 0 10vw;
}
#works .sec1 .block2 h2 {
	width: 18vw;
	margin: 0 0 1vw;
}
#works .sec1 .block2 h2 img {
	width: 100%;
}
#works .sec1 .lowheight {
	font-size: .86rem;
	margin: 0 0 .5vw;
}

#works .sec2 {
	margin: 0 20% 10vw;
	position: relative;
}
#works .sec2 .fig1 {
	width: 40%;
	position: absolute;
	top: 0;
	left: 0;
}
#works .sec2 .fig2 {
	width: 40%;
	position: absolute;
	top: 35vw;
	left: 0;
}
#works .sec2 .fig1 img { width: 100%; }
#works .sec2 .fig2 img { width: 100%; }

#works .sec2 .block1 {
	margin: 0 0 0 45%;
	padding: 12vw 0 0 0;
}
#works .sec2 .block1 .flex {
	display: flex;
	align-items: flex-end;
}
#works .sec2 .block1 h2 {
	width: 15vw;
	margin: 0 1vw 1vw 0;
}
#works .sec2 .block1 h2 img {
	width: 100%;
}
#works .sec2 .block1 .subTit {
	line-height: 2.4;
}
#works .sec2 .block1 dl {
	line-height: 2.14;
	margin-top: 8vw;
}

#works .sec3 {
	margin: 0 0 12vw;
}
#works .sec3 img {
	width: 100%;
}

#works .sec4 {
	margin: 0 20% 10vw;
	position: relative;
}
#works .sec4 .fig1 {
	width: 38%;
	position: absolute;
	top: 15vw;
	right: -10%;
}
#works .sec4 .fig2 {
	width: 38%;
	position: absolute;
	top: 48vw;
	right: -10%;
}
#works .sec4 .fig1 img { width: 100%; }
#works .sec4 .fig2 img { width: 100%; }

#works .sec4 .block1 {
	width: 60%;
	margin: 0 0 20vw;
}
#works .sec4 .block1 .flex {
	display: flex;
	align-items: flex-end;
}
#works .sec4 .block1 h2 {
	width: 15vw;
	margin: 0 1vw 1vw 0;
}
#works .sec4 .block1 h2 img {
	width: 100%;
}
#works .sec4 .block1 .subTit {
	line-height: 2.4;
}
#works .sec4 .block1 dl {
	line-height: 2.14;
	margin-top: 8vw;
}

#worksimage {
	text-align: center;
	background: #1a1a1a;
	padding: 10vw 0;
}
#worksimage h2 {
	margin: 0 0 2vw;
}
#worksimage .inner {
	text-align: center;
	margin: 0 10%;
}
#worksimage #wi1 {
	width: 100%;
}
#worksimage #wi2 {
	margin: 5vw 10% 0;
	display: flex;
	flex-wrap: wrap;
}
#worksimage #wi2 li {
	width: calc(100% / 7 - 20px);
	margin: 10px;
	cursor: pointer;
}
#worksimage #wi2 li img {
	width: 100%;
}
#worksimage .logo {
	width: 9vw;
	text-align: right;
	margin: 100px 0 0 auto;
}
#worksimage .logo img {
	width: 100%;
}


#history {
	color: #1a1a1a;
	background: #FFF;
	padding: 10vw 0 20vw;
}
	body.cn #history {
		padding-bottom: 25vw;
	}
#history .sec1 {
	margin: 0 20% 10vw;
	position: relative;
}
#history .sec1 .fig1 {
	width: 35%;
	position: absolute;
	top: 3vw;
	left: 45%;
}
#history .sec1 .fig2 {
	width: 30%;
	position: absolute;
	top: 30vw;
	left: 2%;
}
#history .sec1 .fig1 img { width: 100%; }
#history .sec1 .fig2 img { width: 100%; }

#history .sec1 .tatemidashi {
	height: 35vw;
	margin: 0 0 22vw auto;
}
#history .sec1 .honbun {
	margin: 0 0 10vw;
}

#history .sec2 {
	margin: 0 20%;
	position: relative;
}
#history .sec2 .fig1 {
	width: 40%;
	position: absolute;
	top: 12vw;
	right: 0;
}
#history .sec2 .fig2 {
	width: 33%;
	position: absolute;
	top: 60vw;
	left: 0;
}
	body.cn #history .sec2 .fig2 {
		top: 55vw;
	}
#history .sec2 .fig1 img { width: 100%; }
#history .sec2 .fig2 img { width: 100%; }

#history .sec2 .block1 {
	width: 55%;
	margin: 0 0 15vw;
}
#history .sec2 .block1 .flex {
	margin: 0 0 5vw;
	display: flex;
	align-items: flex-end;
}
#history .sec2 .block1 h2 {
	width: 16vw;
	margin: 0 1vw 1vw 0;
}
#history .sec2 .block1 h2 img {
	width: 100%;
}
#history .sec2 .block1 .subTit {
	line-height: 2.4;
	transform: translateY(-1vw);
}
#history .sec2 .block1 .name {
	font-size: 1.143rem;
	margin: 0 0 2.5vw;
}
#history .sec2 .block1 dl dt {
	line-height: 1.8;
}
#history .sec2 .block1 dl dd {
	line-height: 1.8;
	margin: 0 0 1em;
}
#history .sec2 .block2 {
	width: 43%;
	margin: 0 0 0 auto;
}
#history .sec2 .block2 .flex {
	margin: 0 0 5vw;
	display: flex;
	align-items: flex-end;
}
#history .sec2 .block2 h2 {
	width: 16vw;
	margin: 0 1vw 1vw 0;
}
#history .sec2 .block2 h2 img {
	width: 100%;
}
#history .sec2 .block2 .subTit {
	line-height: 2.4;
}


/* FOR smartphone portrait
***************************************************************************/
@media (orientation: portrait) and (max-width: 767px) {
	header {
		width: 100%;
		background-size: 50% auto;
		margin: 0 0 4vw;
		padding: 0 0 10vw;
	}
	header h1 {
		width: 100%;
		margin: 0 auto 10vw;
		padding-top: 25vw;
	}
	header h1 figure {
		width: 50%;
		margin: 0 auto 10px;
	}
	header p {
		font-size: 1.3rem;
		width: 100%;
		text-align: center;
		line-height: 1.7;
		margin-left: 0;
	}
	header #menu li a {
	}

	header .lang {
	}
	header .lang li {
		width: 9em;
	}
	header .lang li a {
	}

	#intro {
		margin: 0 0 10vw;
	}
	#intro .fig1 {
		width: 30vw;
		top: 0;
		right: 0;
	}
	#intro .fig2 {
		width: 28vw;
		top: 50vw;
		left: 5vw;
	}

	#intro .tatemidashi {
		margin: 0 auto;
	}
	#intro .honbun {
		margin: 8vw 5vw 0;
	}

	#works {
		padding: 10vw 0 0 0;
	}
	#works .tatemidashi {
		margin: 0 auto 5vw auto;
	}
	#works .sec1 {
		margin: 0 0 5.5vw;
	}
	#works .sec1 .fig1 {
		width: 30%;
		top: -60vw;
		left: 3vw;
	}
	#works .sec1 .fig2 {
		width: 30%;
		position: absolute;
		top: -40vw;
		right: 0;
	}
	#works .sec1 .block1 {
		width: 90vw;
		margin: 0 5vw 10vw;
		padding: 0;
	}
	#works .sec1 .block2 {
		width: 90vw;
		margin: 0 auto 10vw;
	}
	#works .sec1 .block2 .flex {
		margin: 0 0 3vw;
		display: flex;
		align-items: flex-end;
	}
	#works .sec1 .block2 h2 {
		width: 25vw;
		margin: 0 1em 1vw 0;
	}
	#works .sec1 .block2 .subTit {
		line-height: 2.4;
		transform: translateY(.5em);
	}
	#works .sec1 .lowheight {
	}

	#works .sec2 {
		margin: 0 5vw 10vw 0;
		position: relative;
	}
	#works .sec2 .fig1 {
		width: 30vw;
		top: 10vw;
	}
	#works .sec2 .fig2 {
		width: 30vw;
		top: 55vw;
		left: 0;
	}
	#works .sec2 .block1 {
		margin: 0 0 0 35vw;
		padding: 0;
	}
	#works .sec2 .block1 .flex {
	}
	#works .sec2 .block1 h2 {
		width: 25vw;
		margin: 0 1em 1vw 0;
	}
	#works .sec2 .block1 .subTit {
		transform: translateY(.5em);
	}
	#works .sec2 .block1 dl {
		line-height: 1.6;
		margin-top: 5vw;
	}
	#works .sec2 .block1 dd {
		padding-left: 1em;
		position: relative;
	}
	#works .sec2 .block1 dd::before {
		content: "・";
		font-weight: bold;
		position: absolute;
		top: 0;
		left: 0;
	}

	#works .sec3 {
		margin: 0 0 8vw;
	}

	#works .sec4 {
		margin: 0 0 10vw 5vw;
		position: relative;
	}
	#works .sec4 .fig1 {
		width: 30vw;
		position: absolute;
		top: 15vw;
		right: 0;
	}
	#works .sec4 .fig2 {
		width: 30vw;
		top: 60vw;
		right: 0;
	}
	#works .sec4 .block1 {
		width: 60vw;
		margin: 0 0 10vw;
	}
	#works .sec4 .block1 .flex {
	}
	#works .sec4 .block1 h2 {
		width: 25vw;
		margin: 0 1em 1vw 0;
	}
	#works .sec4 .block1 .subTit {
		transform: translateY(.5em);
	}
	#works .sec4 .block1 .copyright {
		display: none;
	}
	#works .sec4 .block1 dl {
		line-height: 2.14;
		margin-top: 3vw;
	}
	#works .sec4 .block1 dd {
		padding-left: 1em;
		position: relative;
	}
	#works .sec4 .block1 dd::before {
		content: "・";
		font-weight: bold;
		position: absolute;
		top: 0;
		left: 0;
	}

	#worksimage {
	}
	#worksimage .copyright {
		display: none;
	}
	#worksimage h2 {
		width: 50vw;
		text-align: center;
		margin: 0 auto 5vw;
	}
	#worksimage .inner {
		margin: 0;
	}
	#worksimage #wi1 {
	}
	#worksimage #wi2 {
		margin: 3vw 3vw 0;
	}
	#worksimage #wi2 li {
		width: calc(100% / 7 - 4px);
		margin: 2px;
	}

/*	#worksimage #wi2 {
		width: auto;
		margin: 0;
		display: static;
	}
	#worksimage #wi2 li {
		width: auto;
		margin: 0;
	}
	#worksimage #wi2 li img {
		width: auto;
	}
*/
	#worksimage .logo {
		width: 15vw;
		margin: 5vw 5vw 0 auto;
	}

	#history {
		padding: 10vw 0 35vw;
	}
		body.cn #history {
			padding-bottom: 35vw;
		}
	#history .sec1 {
		margin: 0 5vw 10vw;
	}
	#history .sec1 .fig1 {
		width: 30vw;
		top: 5vw;
		left: 30vw;
	}
	#history .sec1 .fig2 {
		width: 25vw;
		top: 40vw;
		left: 0;
	}
	#history .sec1 .tatemidashi {
		height: auto;
		margin: 0 3vw 10vw auto;
	}
	#history .sec1 .honbun {
		margin: 0 0 10vw;
	}

	#history .sec2 {
		margin: 0;
	}
	#history .sec2 .fig1 {
		position: static;
		float: right;
		width: 33vw;
		margin: 0 0 4em 1em;
		transform: translateY(15vw);
	}
	#history .sec2 .fig2 {
		width: 25vw;
		top: 180vw;
		left: 0;
	}
		body.cn #history .sec2 .fig2 {
			top: 155vw;
		}
	#history .sec2 .block1 {
		width: 90vw;
		margin: 0 5vw 10vw;
	}
	#history .sec2 .block1 .flex {
		margin: 0 0 5vw;
	}
	#history .sec2 .block1 h2 {
		width: 24vw;
		margin: 0 1em 1vw 0;
	}
	#history .sec2 .block1 .subTit {
		transform: translateY(.2em);
	}
	#history .sec2 .block1 .name {
		font-size: 1.143rem;
		margin: 0 0 3vw;
	}
	#history .sec2 .block1 dl dt {
		float: none;
	}
	#history .sec2 .block1 dl dd {
		padding: 0;
	}
	#history .sec2 .block2 {
		width: 65vw;
		margin: 0 0 0 auto;
	}
	#history .sec2 .block2 .flex {
	}
	#history .sec2 .block2 h2 {
		width: 25vw;
		margin: 0 1em 1vw 0;
	}
	#history .sec2 .block2 .subTit {
		transform: translateY(.6em);
	}


}