@charset "utf-8";
/* CSS Document */
/*---------------------
index.html
---------------------*/
.pagettl {
	background: url(../images/bg_pagettl.jpg) top center no-repeat;
}
.const_list, .panolama_list, .video_list {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
}
.const_list li, .panolama_list li, .video_list li {
	position: relative;
	width: 352px;
	margin: 0 0 30px 42px;
}
.const_list li:nth-child(3n+1), .panolama_list li:nth-child(3n+1), .video_list li:nth-child(3n+1) {
	margin-left: 0;
}
.const_list li:hover, .panolama_list li:hover, .video_list li:hover {
	opacity: .5;
	transition: .8s
}
.const_list h4, .panolama_list h4, .video_list h4 {
	font-size: 1.6rem;
	font-weight: 600;
	text-align: center;
	line-height: 1.4;
}
.const_list h4 span, .panolama_list h4 span, .video_list h4 span {
	color: #333;
	font-size: 1.4rem;
	font-weight: normal;
}
.const_list a, .panolama_list a, .video_list a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-indent: -999px;
	z-index: 999;
}
#const {
	background: #f6f6f6;
}
.const_list .type {
	color: #FFF;
	text-align: center;
}
.const_list .type.new {
	background: #000;
}
.const_list .type.order {
	background: #85B200;
}
.panolama_list h4 {
	margin-top: .5em;
}
.panolama_list li:after {
	content: '';
	width: 99px;
	height: 94px;
	background: url("../images/panolama_ico_360.png") top center no-repeat;
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#video {
	background: #f6f6f6;
}
.video_list li:after {
	content: url(../images/video_ico.png);
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -50px 0 0 -33px;
}
.video_list h4 {
	margin-top: .5em;
}
/*---------------------
works
---------------------*/
.pankuzu .inner {
	position: relative;
}
.album_nav_1 ul {
	display: flex;
	position: absolute;
	top: -7px;
	right: 0;
}
.album_nav_1 li {
	position: relative;
	margin-left: 1px;
	padding-left: 0;
	height: 39px;
	font-size: 1.5rem;
}
.album_nav_1 li a {
	display: inline-block;
	padding: 7px 2em 7px 3em;
	background: #000;
	color: #fff;
	font-weight: bold;
	text-decoration: none;
	line-height: 25px;
	letter-spacing: 0.15em
}
.album_nav_1 li:last-child a {
	border-right: none;
}
.album_nav_1 li:nth-child(2) a {
	letter-spacing: 0;
}
.album_nav_1 li:before {
	content: none;
}
.album_nav_1 a:before {
	content: url(../../common/images/arrow_white.png);
	position: absolute;
	top: 8px;
	left: 1em;
	padding-right: 1em;
}
.album_nav_1 li a:hover {
	text-decoration: none;
	opacity: .5;
	transition: .8s;
}
.works_lttl {
	margin-bottom: 40px;
	text-align: center;
	font-size: 2.4rem;
	font-weight: normal;
	line-height: 1.4;
	letter-spacing: 0.15em;
}
.works_lttl .num {
	font-family: serif;
	font-size: 3.0rem;
	font-weight: bold;
}
.slide {
	margin-bottom: 40px;
	padding: 50px 70px;
	background: #DFDFD0;
}
.slider li {
	text-align: center;
}
.bx-wrapper {
	position: relative;
	margin-bottom: 10px;
}
.slide .bx-wrapper .bx-controls-direction a {
	position: absolute;
	top: 48%;
	margin-top: -16px;
	outline: 0;
	width: 34px;
	height: 67px;
	text-indent: -9999px;
	z-index: 999;
}
.slide .bx-wrapper .bx-prev {
	left: -50px;
	background: url(../images/slide_prev.png) no-repeat 0 0;
}
.slide .bx-wrapper .bx-next {
	right: -50px;
	background: url(../images/slide_next.png) no-repeat 0 0;
}
.bx-pager {
	display: none;
}
.slide.r_gallery .bx-wrapper:after {
	position: absolute;
	top: 33px;
	left: 33px;
	content: '';
	width: 103px;
	height: 149px;
	background: url("../images/r_gallery_logo.png") top left no-repeat;
}
.thumb {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
}
.thumb li {
	width: 95px;
	margin: 0 0 5px 5px
}
.thumb li:nth-child(10n+1) {
	margin-left: 3px;
}
.album_nav_2 ul {
	display: flex;
	justify-content: center;
}
.album_nav_2 li {
	position: relative;
	margin: 0 8px;
	height: 39px;
	font-size: 1.5rem;
}
.album_nav_2 li a {
	display: inline-block;
	padding: 7px 2em 7px 3em;
	background: #000;
	color: #fff;
	font-weight: bold;
	text-decoration: none;
	line-height: 25px;
	letter-spacing: 0.15em
}
.album_nav_2 li:nth-child(2) a {
	letter-spacing: 0;
}
.album_nav_2 li a:hover {
	opacity: .5;
	transition: .8s;
}
.album_nav_2 a:before {
	content: url(../../common/images/arrow_white.png);
	position: absolute;
	top: 8px;
	left: 1em;
	padding-right: 1em;
}
@media screen and (max-width:640px) {
	/*---------------------
index.html
---------------------*/
	.pagettl {
		background: url(../images/bg_pagettl.jpg) top center no-repeat;
		background-size: auto 100%;
	}
	.const_list, .panolama_list, .video_list {
		justify-content: space-between;
	}
	.const_list li, .panolama_list li, .video_list li {
		width: 48%;
		margin: 0 0 20px 0;
	}
	.panolama_list li a {
		z-index: 999;
	}
	.panolama_list li:after {
		width: 20vw;
		height: 20vw;
		-webkit-background-size: contain;
		background-size: contain;
		top: 35%;
	}
	#video {
		background: #f6f6f6;
	}
	.video_list li:after {
		margin: -55px 0 0 -33px;
	}
/*---------------------
works
---------------------*/
	.pankuzu {
		display: block;
	}
	.pankuzu .inner > ul {
		display: none;
	}
	.album_nav_1 ul {
		display: flex;
		justify-content: space-between;
		position: static;
	}
	.album_nav_1 li {
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
		-ms-align-items: center;
		align-items: center;
		margin: 0 auto;
		height: auto;
		background: #000;
		font-size: 1.3rem;
	}
	.album_nav_1 li a {
		padding: 5px 1em 5px 2em;
		line-height: 1.4;
		letter-spacing: 0;
	}
	.album_nav_1 a:before {
		top: 50%;
		left: .5em;
		transform: translate(0, -50%);
		padding-right: .5em;
	}
	.works_lttl {
		font-size: 2.0rem;
	}
	.works_lttl .num {
		font-size: 2.4rem;
	}
	.slide {
		padding: 15px;
	}
	.slider {
		width: 100%;
	}
	.slide .bx-wrapper .bx-controls-direction a {
		width: calc((34/760)*100vw);
		height: calc((67/760)*100vw);
	}
	.slide .bx-wrapper .bx-prev {
		left: calc((-20/760)*100vw);
		background: url(../images/slide_prev.png) no-repeat 0 0;
		background-size: 100% auto;
	}
	.slide .bx-wrapper .bx-next {
		right: calc((-20/760)*100vw);
		background: url(../images/slide_next.png) no-repeat 0 0;
		background-size: 100% auto;
	}
	.slide.r_gallery .bx-wrapper:after {
		top: calc((30/760)*100vw);
		left: calc((30/760)*100vw);
		width: calc((103/760)*100vw);
		height: calc((149/760)*100vw);
		-webkit-background-size: contain;
		background-size: contain;
	}
	.thumb li {
		width: 23%;
		margin: 0 1% 5px 1%
	}
	.thumb li:nth-child(10n+1) {
		margin-left: 1%;
	}
	.album_nav_2 ul {
		justify-content: space-between;
	}
	.album_nav_2 li {
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
		-ms-align-items: center;
		align-items: center;
		margin: 0 auto;
		/*width: 33%;
	margin: 0;*/
		height: auto;
		background: #000;
		font-size: 1.3rem;
	}
	.album_nav_2 li a {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		width: 100%;
		padding: 7px 7px 7px 2em;
		line-height: 1.4;
		letter-spacing: 0
	}
	.album_nav_2 a:before {
		content: url(../../common/images/arrow_white.png);
		position: absolute;
		top: 50%;
		left: .5em;
		transform: translate(0, -50%);
		padding-right: .5em;
	}
}
#vr_modelhouse {
	background: #f6f6f6;
}
#vr_modelhouse .vr_list li {
	text-align: center;
}
@media screen and (max-width:640px) {
	#vr_modelhouse .vr_list li img {
		width: calc((600/760)*100vw);
	}
}
#vr_modelhouse .vr_list li h4 {
	margin: -30px 240px 0 0;
	font-size: 2.0rem;
	text-align: right;
}
@media screen and (max-width:640px) {
	#vr_modelhouse .vr_list li h4 {
		margin: calc((-50/760)*100vw) 0 0;
		font-size: calc((30/760)*100vw);
	}
}
/*---------------------
interview
---------------------*/
#interview img {
	max-width: 100%;
}
#interview .interview_list {
	margin-bottom: 30px;
}
@media screen and (max-width:640px) {
	#interview .interview_list {
		margin-bottom: calc((40/760)*100vw);
	}
}
#interview .interview_list li {
	width: 700px;
	margin: 0 auto;
}
@media screen and (max-width:640px) {
	#interview .interview_list li {
		width: 100%;
	}
}
#interview .interview_more a {
	position: relative;
	display: block;
	width: 100px;
	margin: 0 auto;
	background: #000;
	border-radius: 20px;
	color: #FFF;
	font-size: 1.4rem;
	letter-spacing: .2em;
	text-align: center;
	text-decoration: none;
}
@media screen and (max-width:640px) {
	#interview .interview_more a {
		width: calc((200/760)*100vw);
		font-size: calc((24/760)*100vw);
	}
}
#interview .interview_more a:after {
	position: absolute;
	top: 8px;
	right: 5px;
	content: '';
	width: 0;
	height: 0;
	border: transparent 3px solid;
	border-left: #FFF 5px solid;
}
@media screen and (max-width:640px) {
	#interview .interview_more a:after {
		top: calc((16/760)*100vw);
		right: calc((25/760)*100vw);
		border: transparent calc((5/760)*100vw) solid;
		border-left: #FFF calc((10/760)*100vw) solid;
	}
}
#interview .interview_more a:hover {
	opacity: .5;
	transition: .8s;
}
.interview {
	padding-bottom: 220px;
	background: #F6F6F6;
}
.interview_lttl {
	font-size: 2.0rem;
	line-height: 2.3;
}
.interview_lttl .case {
	font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
	color: #000;
	font-size: 1.6rem;
}
.interview_mttl {
	margin: 5em 0 2em;
	font-size: 1.8rem;
	font-weight: bold;
	text-align: center;
	letter-spacing: .1em;
}
.interview_text {
	margin-top: 2em;
}
.interview_img {
	margin-top: 2em;
}
.interview_img figucaption {
	display: block;
	margin-top: .5em;
	font-size: 1.3rem;
	text-align: right;
}
.interview_img img {
	max-width: 100%;
}
.interview_flex {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-align-items: flex-start;
	align-items: flex-start;
	justify-content: space-between;
}
.interview_flex .interview_img {
	width: 48%;
}
@media screen and (max-width:640px) {
	.interview {
		padding-bottom: 5.0rem;
	}
	.interview_lttl {
		font-size: 1.8rem;
	}
	.interview_lttl .case {
		font-size: 1.5rem;
	}
	.interview_mttl {
		margin: 3em 0 2em;
		font-size: 1.5rem;
	}
	.interview_img figucaption {
		font-size: 1.1rem;
		line-height: 1.2;
		text-align: center;
	}
}