@charset "UTF-8";
/* CSS Document */

/*
	00 layout
	01 index
	02 concept
	03 infomation

*/

/* clearfix
   ========================================================================== */
*{
	font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
	font-weight:100;
}
p,.gothic{
}
p,span,figcaption,a,li{
	transform:rotate(0.05deg);
}
.clear {
	clear: both;
}
A:focus {
	-moz-outline-style: none;
}
/* ClearFix　A */
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
/* Hides from IE-mac \*/
* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;
}
/* End hide from IE-mac */

/* for modern browser */
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
/* for IE 5.5-7 */
.clearfix {
	zoom: 100%;
}
/* for modern browser */
.clearfix {
	display: inline-block;
}
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
/* Hides from IE-mac \*/
* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;
}
/* End hide from IE-mac */
@media print {
	body {
		display: block;
	}
}

/* .sp <= width=640px < .pc */
.pc,.sp{display: none;}
@media all and (min-width: 641px){
	.pc{display: block;}
}
@media all and (max-width: 640px){
	.sp{display: block;}
}

/*	00 layout
------------------------------------------*/
/* footer fixed*/
html, body {
	height: 100%;
}
figure,figcaption{
	margin:0;
	padding:0;
}


/*header*/
header{
	position: relative;
	width:90%;
	max-width:1000px;
	margin:0 auto;
	margin-top:80px;
	
}
header .logo{
	display:inline-block;
	max-width:288px;
	width:60vw;
}
header .logo img{
	width:100%;
	height:auto;
}
header .head_info{
	margin-top:40px;
}
header .head_info p{
	font-size:0.65rem;
	line-height:18px;
	color:#888;
}
header nav{
	position:absolute;
	right:0;
	top:0;
	text-align:right;
	z-index: 10;
}
header nav a{
	display:block;
	margin-bottom:25px;
	opacity:0.5;
}
header nav a.on{
	opacity:1;
}
header nav img{
	max-height:14px;
	height:3vw;
	width:auto;
}

/*main*/
main{
	position:relative;
	width:90%;
	max-width:1000px;
	margin:0 auto;
	padding:75px 0;
}
.toppage main{
	padding:120px 0;	
}
main > section{
	width:100%;
}
main > section > h1:first-of-type{
	display:block;
	height:15px;
	margin-bottom:40px;
}
.toppage main > section > h1:first-of-type{
	margin-bottom:50px;
}
main > section > h1:first-of-type img{
	display:block;
	height:15px;
}
main > section > * > h1{
  font-weight:bold;
  padding:30px 0 25px 0;
	display:block;
	height:15px;
	margin-bottom:40px;
  font-size:1.1rem;
}



/*footer*/
footer {
	position:relative;
	width:90%;
	max-width:1000px;
	margin:0 auto;
	padding-bottom:50px;
}
footer .foot_info{
	margin-top:10px;
}
footer .foot_info p{
	font-size:0.65rem;
	line-height:18px;
}



/*	01 index (works)
-------------------------------------------*/
/*index*/
.toppage header{
	position: absolute;
	width: 100%;
	max-width: 90%;
	margin: 50px 5% 0;
	z-index: 10;
}
@media all and (min-width: 1001px){
	.toppage header{
		max-width: calc(100% - 100px);
		margin: 50px 50px 0;
	}
}
.fv{
	height: 100vh;
	width: 100%;
	overflow: hidden;
	z-index: -10;
}
.fv_slider,.fv_slider div,.fv_slider li{
	width: 100%;
	height: 100%;
}
.fv_slider li div{
	background-repeat: no-repeat;
	background-size: cover;
	background-position: bottom;
}
.fv_slider .pc{
	display: none;
}
@media screen and (min-width:641px) {
	.fv_slider .pc{
		display: block;
	}
	.fv_slider .sp{
		display: none;
	}
}
.works_list{
	width:100%;
}
.works_list .works_item{
	width: 48%;
	margin-bottom:40px;
	float:left;
}
.works_list .works_item:not(:nth-child(2n)){
	margin-right: 4%;
}
.works_list .works_item a{
	display:block;
}
.works_list .works_item a span{
	display:block;
	background-size:cover;
	background-position:center;
	width:100%;
	height: 0;
	padding-bottom: 66%;
}
.works_list .works_item .title{
	font-size:0.9rem;
	letter-spacing:2px;
	margin-top:6px;
	line-height:18px;
}
.works_list .works_item .sub_title,
.works_list .works_item .description{
	margin-top:7px;
	letter-spacing:1px;
	font-size:0.65rem;
	color:#888;
	font-weight:100;
	line-height:15px;
}
.works_list .works_item .description{
	margin-top:20px;
}

/*detail*/
.works_detail .title{
	letter-spacing:2px;
	font-size:1rem;
	font-weight:600;
}
.works_detail .sub_title{
	color:#888;
}
.works_detail .main_image{
	width:100%;
	height:auto;
	margin-top:25px;
}
.works_detail .description{
	margin:40px 0 80px 0;
}
.works_detail .description div:first-child{
	letter-spacing:2px;
	font-size:0.95rem;
	width:60%;
	float:left;
}
.works_detail .description div:last-child{
	float:right;
	width:38%;
	padding-left:30px;
	border-left:1px dotted gray;
}
.works_detail .description div:last-child dl{
	position:relative;
	width:100%;
}
.works_detail .description div:last-child dt,
.works_detail .description div:last-child dd{
	font-size:0.95rem;
	/* display:inline-block; */
	vertical-align:top;
	line-height:35px;
}
.works_detail .description div:last-child dl{margin-top:2px;display: flex;}
.works_detail .description div:last-child dt{width:40%;}
.works_detail .description div:last-child dd{width:60%;line-height:25px;margin-top:5px;}

.works_detail .item{
	margin-bottom:90px;
	text-align:center;
}
.works_detail .item img{
	width:100%;
	height:auto;
}
.works_detail .item p{
  text-align:left;
}
.full_width{
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	top:0;
	z-index:-11;
	position:fixed;
	width:100vw;
	/* height:100vh; */
	background:#eee;
}
.works_foot_list{
	width:90%;
	max-width:1000px;
	margin:0 auto;
	padding:75px 0;
}
.dummy{
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	position:relative;
	z-index:-20;
	width:100vw;
	height:100vh;
}
.filter{
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	z-index: -10;
	position:absolute;
	top:0;
	background:white;
	width:100vw;
	height:100vh;
}

/*	02 concept
-------------------------------------------*/
.concept_list h2{
	padding:15px 0 20px 0;
	font-size:1.1rem;
}

.concept_list h1{
	padding:60px 0 20px 0;
}


.concept_list p{
	font-size:1rem;
	padding-bottom:30px;
	line-height:28px;
}

/*	03 infomation
-------------------------------------------*/
#info section{
	position:relative;
	padding-bottom:60px;
}	
#info section h2{
	padding:10px 0 25px 0;
	font-size:1.1rem;
	letter-spacing:3px;
}
#info p{
	padding-bottom:30px;
	line-height:28px;
}
#info dt,#info dd{
	letter-spacing:1px;
	display:inline-block;
	margin-bottom:12px;
}
#info dt{
	width:10%;
	min-width:92px;
	vertical-align:top;
}
#info dd{
	width:80%;
}
#info .half{
	max-width:600px;
	width:50%;
}
#info .img{
	width:45%;
	max-width:442px;
}
#info .img img{
	width:100%;
	height:auto;
}
@media all and (min-width: 641px){
	#info .text_img{
		display: flex;
		flex-direction: row-reverse;
	}
	#info .text_img .text_img_textblock{
		width: 50%;
		margin-right: auto;
	}
}