@charset "UTF-8";


/**********************************************************************/
/******************************* BANNER *******************************/
/**********************************************************************/

#slideContainer
{
	margin-top: 8rem;
	margin-bottom: 2rem;

	display:-webkit-box;
	display:-moz-box;
	display:-ms-box;
	display:-webkit-flexbox;
	display:-moz-flexbox;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:-moz-flex;
	display:-ms-flex;
	display:flex;
	
	-webkit-justify-content: center;
	justify-content: center;
	
	-moz-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;	
}

.slideWrapper
{
	position: relative;
	margin-bottom: 0rem;
	width: 100%;
/*	max-width: 1200px;*/
	box-sizing: border-box;	
/*	padding: 0 50px;*/
	padding-right: 2rem;
}

#workSlide
{
	width: 100%;
	position: relative;
	z-index: 0;
/*	background: linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px, linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px, linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px, linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px, linear-gradient(90deg, #1b1b1b 10px, transparent 10px), linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);*/
/*background: linear-gradient(27deg, rgba(180, 190, 190, .1), rgba(180, 190, 190, .2));*/
	background-color: rgba(255, 255, 255, 1);
}

#workSlide .photoTrim
{
	width: 100%;
}

#workSlide .bannerSlideContainer
{
	position: relative;
	width: 100%;
}

#workSlide .bannerChildren
{
	position: relative;
	box-sizing: border-box;
	float: left;

	width: 100%;
	height: 100%;
	
	display:-webkit-box;
	display:-moz-box;
	display:-ms-box;
	display:-webkit-flexbox;
	display:-moz-flexbox;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:-moz-flex;
	display:-ms-flex;
	display:flex;
	
	-webkit-box-lines:multiple;
	-moz-box-lines:multiple;
	-webkit-flex-wrap:nowrap;
	-moz-flex-wrap:nowrap;
	-ms-flex-wrap:nowrap;
	flex-wrap:nowrap;
	
	-webkit-align-items: center;
	align-items: center;
}

#workSlide .bannerChildren .photoWrapper
{
	width: 100%;
	position: relative;
	padding: 0;
	box-sizing: border-box;

	display:-webkit-box;
	display:-moz-box;
	display:-ms-box;
	display:-webkit-flexbox;
	display:-moz-flexbox;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:-moz-flex;
	display:-ms-flex;
	display:flex;
	
	-webkit-flex-wrap:nowrap;
	-moz-flex-wrap:nowrap;
	-ms-flex-wrap:nowrap;
	flex-wrap:nowrap;
	
	-webkit-align-items: center;
	align-items: center;
	
	-webkit-justify-content: center;
	justify-content: center;
}

#workSlide .bannerChildren .photoWrapper > img
{
    max-width:100%;
}

#workSlide .bannerChildren .photoWrapper.progress:after
{
	content: ""; 
	display: block;

	box-sizing:border-box;
	position: absolute;
	width: 2.5rem;
	height: 2.5rem;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	border: 5px solid rgb(244, 232, 0);
	border-right-color: transparent;
	
	top: 50%;
	left: 50%;
	margin-top:-1.25rem;
	margin-left:-1.25rem; 

	animation: circle-spin 1s linear infinite; /*1秒毎にくるくる回転するアニメーション*/
}

#workSlide .bannerChildren .photoWrapper.progress img
{
	filter:alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
}
#workSlide .bannerChildren .photoWrapper.load img
{
	filter:alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
}
#workSlide .bannerChildren .photoWrapper.load img
{
	max-width: 100%;
	height: auto;
	
	-webkit-transition:opacity .3s ease;
	-moz-transition:opacity .3s ease;
	-ms-transition:opacity .3s ease;
	-o-transition:opacity .3s ease;
	transition:opacity .3s ease;
}

#slideContainer .sumnailWrapper
{
	box-sizing: border-box;
	margin-top: 2rem;
	margin-bottom: .5em;
}

#slideContainer .sumnailWrapper .sumanilContainer
{
	position: relative;
	margin: 0 2rem;
	
	display:-webkit-box;
	display:-moz-box;
	display:-ms-box;
	display:-webkit-flexbox;
	display:-moz-flexbox;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:-moz-flex;
	display:-ms-flex;
	display:flex;

	-webkit-flex-wrap:wrap;
	-moz-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
	
	-webkit-align-items: center;
	align-items: center;
	
	-webkit-justify-content: center;
	justify-content: center;
}

#slideContainer .sumnailWrapper .sumanilContainer > div
{
	box-sizing: border-box;
	position: relative;
	cursor: pointer;
	width: 2rem;
	height: 1rem;
	margin: 0 .1em;
}

#slideContainer .sumnailWrapper .sumanilContainer.nouse > div
{
	cursor: auto;
}

#slideContainer .sumnailWrapper .sumanilContainer > div:after
{
	content:"";
	position: absolute;
	width:100%;
	top: calc(50% - 2px / 2);
	height: 2px;
	background-color: rgba(100, 110, 110, .5);
}

#slideContainer .sumnailWrapper .sumanilContainer > div
{
	width: auto;
	flex: 1 1 auto;
}

#slideContainer .sumnailWrapper .sumanilContainer > div.now:after
{
	top: calc(50% - 4px / 2);
	height: 4px;
	background-color: rgba(244, 232, 0, 1);
}

#slideContainer .sumnailWrapper .sumanilContainer.nouse  > div.now:after
{
	background-color: rgba(100, 110, 110, .5);
	height: 2px;
}

body:not(.touch) #slideContainer .sumnailWrapper .sumanilContainer:not(.nouse) > div:hover:after
{
	top: calc(50% - 4px / 2);
	height: 4px;
	background-color: rgba(100, 110, 110, 1);
}

.cap
{
	position: relative;
	padding-top: 1em;
	color: rgba(100, 110, 110, 1);
	font-size: .7rem;
	min-height: 3em;
	
	box-sizing: border-box;

	display:-webkit-box;
	display:-moz-box;
	display:-ms-box;
	display:-webkit-flexbox;
	display:-moz-flexbox;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:-moz-flex;
	display:-ms-flex;
	display:flex;
	
	-webkit-justify-content: center;
	justify-content: center;
	
	-webkit-transition:all .3s ease;
	-moz-transition:all .3s ease;
	-ms-transition:all .3s ease;
	-o-transition:all .3s ease;
	transition:all .3s ease;
}
/*.cap p
{
	position: relative;
	padding-left: 1em;
}
.cap.on p:before
{
	content: "";
	display: block;
	position: absolute;
	width: 0;
	height: 0;
	left: 0;
	top: calc(.3em / 1.41 + .35em);
	border-style: solid;
	border-width: 0 .35em .6em .35em;
	border-color: transparent transparent rgb(100, 110, 110) transparent;
}*/

.cap.on
{
	filter:alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
}

.cap.off
{	
	filter:alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
}

.cap .photoCredit{font-size: .7em; margin-left: 1em;}
.cap .photoCredit:before{content: "© ";}

#slideContainer .bannerSlideContainer .photoDir
{
	top: auto;
	margin-top: 0;
	height: 2rem;
	bottom: -3.5rem;
	color: rgb(100, 110, 110);
}

.bannerSlideContainer .photoDir
{
	right: 0;
}

.bannerSlideContainer .photoDirL
{
	left: 0;
}

.bannerSlideContainer .photoDir:after
{
	content: "";
	display: block;
	position: absolute;
	top: calc(50% - .4rem);
	width: 0;
	height: 0;
	border-style: solid;

	-webkit-transition:all .3s ease;
	-moz-transition:all .3s ease;
	-ms-transition:all .3s ease;
	-o-transition:all .3s ease;
	transition:all .3s ease;
}

.bannerSlideContainer .photoDirR:after
{
	right: .25em;
	border-width: .35rem 0 .35rem .7rem;
	border-color: transparent transparent transparent rgba(100, 110, 110, 1);
}

.bannerSlideContainer .photoDir.nouse
{
	cursor: auto;
}
.bannerSlideContainer .photoDir.nouse:after
{
	filter:alpha(opacity=30);
	-moz-opacity: .3;
	opacity: .3;
}

.bannerSlideContainer .photoDirR:not(.nouse):hover:after
{
	left: auto;
	right: 0;
}
.bannerSlideContainer .photoDirL:after
{
	left: .25em;
	border-width: .35rem .7rem .35rem 0;
	border-color: transparent rgba(100, 110, 110, 1) transparent transparent;
}
.bannerSlideContainer .photoDirL:not(.nouse):hover:after
{
	right: auto;
	left: 0;
}

/*********************************************************************/
/****************************** conttext ******************************/
/*********************************************************************/

#text
{
	box-sizing:border-box;
	padding: 3rem 0;
	background-color: rgba(255, 255, 255, 1);
	display:-webkit-box;
	display:-moz-box;
	display:-ms-box;
	display:-webkit-flexbox;
	display:-moz-flexbox;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:-moz-flex;
	display:-ms-flex;
	display:flex;
	
	-moz-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;

	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
}

#text > div
{
	max-width: 100%;
}

#text .titleWrapper
{
	margin-right: 4rem;
	margin-bottom: 2rem;
}

#text .architects, #text .year_progress, #text .otherCate
{
	font-size: .7rem;
	color: rgba(100, 110, 110, 1);
	display: block;
}
#text .architects span, #text .otherCate span
{
	display: inline-block;
	position: relative;
	margin-right: .5em;
}

#text .year_progress span.year
{
	position: relative;
	font-family: Roboto-B, GG-B, sans-serif;
	font-weight: 700;
	margin-right: 1.75em;
	color: rgba(100, 110, 110, 1);
}
#text .year_progress span.year:after
{
	content: "";
	font-size: .7rem;
	position: absolute;
	height: 1em;
	width: 1px;
	left: 3em;
	margin-right: 4em;
	top: 0;
	background-color: rgba(100, 110, 110, 1);
}

#text .year_progress span.progress
{
	text-transform: uppercase;
}

#text .workCate
{
	margin-bottom: 1em;
}

#text .workCate span
{
	display: inline-block;
	font-size: .6rem;
	letter-spacing: .1em;
	text-transform: uppercase;

/*	font-family: Roboto-B, GG-B, sans-serif;
	font-weight: 700;*/
	
/*	padding: .25em 1em;*/
	padding-bottom: .25em;
	color: rgb(100, 110, 110);
	border-bottom: 5px solid rgb(244, 232, 0);
/*	background-color: rgb(244, 232, 0);*/
	
/*	color: rgb(244, 232, 0);
	border: 1px solid rgb(244, 232, 0);
	background-color: rgba(100, 110, 110, .5);*/
}

/*#text .workCate span + span
{
	margin-left: 1em;
}*/

#text .workCate span.other
{
	padding-left: 1em;
}

#text .workTitle
{
	font-family: Roboto-B, GG-B, sans-serif;
	font-weight: 700;
	font-size: 1.1rem;
	line-height: 1.5;
	color: rgb(50, 50, 50);
	padding: 0em 0em;
	margin-bottom: .5em;
}

#text .workTitle br
{
/*	display: none;*/
}

.textWrapperWrapper
{
	padding-right:4rem;
	position: relative;
	box-sizing:border-box;

	display:-webkit-box;
	display:-moz-box;
	display:-ms-box;
	display:-webkit-flexbox;
	display:-moz-flexbox;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:-moz-flex;
	display:-ms-flex;
	display:flex;
	
	-webkit-justify-content: space-between;
	justify-content: space-between;
}

.textWrapper
{
	position: relative;
	margin-right: 4rem;
}

.desc
{
	color: rgb(80, 90, 90);
	text-align: justify;
	text-justify: inter-ideograph;
}

.desc .subHead
{
	margin-bottom: 1em;
}

.desc .subHead + br
{
	display: none;
}


/*********************************************************************/
/******************************** List ********************************/
/*********************************************************************/

.listWrapper
{
	color: rgb(100, 110, 110);
	font-size: .9em;
}
.listWrapper .listTitle{margin-top: 1.5em;}
.listWrapper .listTitle:first-child
{
	margin-top: 0em;
}
.listWrapper td{vertical-align: top; line-height: 1.7; text-align: left;}
.listWrapper td.list-1
{
	color: rgba(100, 110, 110, .7);
	min-width: 6em;
/*	white-space: nowrap;*/
/*	font-family: Roboto-B, GG-B, sans-serif;
	font-weight: 700;
	color: rgb(100, 110, 110);*/
}
.listWrapper td{padding-top: .5em;}
/*.listContainer tr:first-child td{padding-top: .75em;}*/
.listWrapper tr td:first-child
{
	padding-right: 2em;
}

.listWrapper td.list-2
{
/*	min-width: 10em;*/
}

.listWrapper table + table
{
	margin-top: 1.5em;
}

.mapWrapper
{
	position: relative;
	box-sizing: border-box;
	padding: 0 2rem;
	
	display:-webkit-box;
	display:-moz-box;
	display:-ms-box;
	display:-webkit-flexbox;
	display:-moz-flexbox;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:-moz-flex;
	display:-ms-flex;
	display:flex;
	
	-webkit-justify-content: center;
	justify-content: center;
	
}

.mapWrapper iframe, .gmap
{
	width: 100%;
	min-width: 300px;
/*	max-width: calc(1200px - 2rem);*/
	height: 250px;
	border: 0;
	margin-top: 5rem;
}

.gmap
{
	margin-top: 3rem;
}

/**********************************************************************/
/***************************** prev_next ******************************/
/**********************************************************************/

.prev_next
{
	position: relative;
	margin-top: 5rem;
	margin-right: 2rem;
	box-sizing: border-box;

	display:-webkit-box;
	display:-moz-box;
	display:-ms-box;
	display:-webkit-flexbox;
	display:-moz-flexbox;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:-moz-flex;
	display:-ms-flex;
	display:flex;
	
	-webkit-justify-content: space-between;
	justify-content: space-between;
	
/*	border-top: 1px solid rgba(244, 232, 0, 1);*/
	border-bottom: 1px solid rgba(244, 232, 0, 1);
	padding: 1em 0;
}

.mapWrapper + .prev_next
{
	margin-top: 2rem;
}

.prev_next a
{
	display: block;
	color: black;
	text-decoration: none;
	font-size: .8em;
	position: relative;
	color: rgba(100, 110, 110, 1);
	text-transform: uppercase;
	
	line-height: 1;
}

.prev_next a.nextBt:after, .prev_next a.prevBt:after
{
	content: "";
	position:absolute;
	display: block;
	
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-ms-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
}
.prev_next a.nextBt{padding-right: 1.25rem;}
.prev_next a.nextBt:after
{
	right: 1rem;
	width: 0;
	height: 0;
	border-style: solid;
	top: .1em;
	right: .25em;
	border-width: .4em 0 .4em .7em;
	border-color: transparent transparent transparent rgba(100, 110, 110, .5);
}
.prev_next a.nextBt:hover:after{right: 0rem;}

.prev_next a.prevBt{padding-left: 1.25rem;}
.prev_next a.prevBt:after
{
	left: 1rem;
	width: 0;
	height: 0;
	border-style: solid;
	top: .1em;
	left: .25em;
	border-width: .4em .7em .4em 0;
	border-color: transparent rgba(100, 110, 110, .5) transparent transparent;
}
.prev_next a.prevBt:hover:after{left: 0rem;}

.prev_next a.works
{
/*	display: none;*/
}
.prev_next a.works:after
{
	content: "";
	z-index: -1;
	display: block;
	position: absolute;
	width: 100%;
	height: 5px;
	background-color: rgba(255, 255, 255, 0);
	bottom: calc(-1em - 2px);
	
	transform-origin: center top;
	transform: scale(1, 0);
	
	-webkit-transition:all .3s ease;
	-moz-transition:all .3s ease;
	-ms-transition:all .3s ease;
	-o-transition:all .3s ease;
	transition:all .3s ease;
}
.prev_next a.works:after{background-color: rgba(244, 232, 0, 1);}
.prev_next a.works:hover:after
{
	transform: scale(1, 1);
}


/*//////////////////////////////////////////////////////////////////////////////////
///////////////////////////////// MEDIA SCREEN /////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////*/


@media screen and (min-width: 1201px)
{
	.textWrapper
	{
		max-width: 800px;
	}
	.mapWrapper{padding-left: 0;}
}

@media screen and (max-width: 1200px)
{
	#text
	{
		-moz-flex-direction: column;
		-webkit-flex-direction: column;
		flex-direction: column;
	}
	
	.textWrapperWrapper
	{
		padding: 0 2rem;
	}
	
	.textWrapper{width: calc( (100% / 3) * 2);}
	.listWrapper{width: calc(100% / 3);}
	
	#text .titleWrapper
	{
		margin-right: 0;
		padding: 0 2rem;
	}
	
}

@media screen and (max-width: 900px)
{
	.slideWrapper
	{
		padding: 0 2rem;
	}
	.textWrapperWrapper
	{
		-moz-flex-direction: column;
		-webkit-flex-direction: column;
		flex-direction: column;
	}
	.textWrapper{width: 100%; margin-right: 0; margin-bottom: 3rem;}
	.listWrapper{width: 100%;}
	
	#slideContainer .sumnailWrapper .sumanilContainer > div
	{
		width: auto;
		flex: 1 1 auto;
	}
	
	.prev_next{margin-left: 2rem;}
}

@media screen and (min-width: 651px)
{
	.listWrapper{margin-top: -.5rem;}
}

@media screen and (orientation: portrait)
{
	#prev_next a.nextBt{transform: translateX(1rem) }
	#prev_next a.prevBt{transform: translateX(-1rem) }
}