.worksContainer {
	width: 100%;
	background-image: linear-gradient(white, darkgray);	
}

#main #works {
	width: 100%;
	padding: 50px 0px 0px 0px;	
}
#main #works .workBox {
	width: calc(100% / 1);
	height: 250px;
	margin-bottom: 30px;
	position: relative;
	overflow-x: scroll;
	-webkit-overflow-scrolling: touch;
}
#main #works .designing {
	display: block;
}
#main #works .binding {
	display: block;
}
#main #works .framing {
	display: block;
}
#main #works .workBox .workEachBox {
	width: calc(100% - 0px);
	height: calc(100% - 0px);
	position: absolute;
	left: 0%;
}
#main #works .workBox .workEachBox .workEachBoxInner {
	width: 100%;
	height: 100%;
	position: relative;
}
#main #works .workBox .workEachBox .workEachBoxInner div {
	width: calc(100%);
	height: calc(100%);
	position: absolute;
	top: 0px;
	padding-left: 20px;
	padding-right: 20px;
}
#main #works .workBox .workEachBox .workEachBoxInner div:first-child {
	left: calc(90% * 0);
}
#main #works .workBox .workEachBox .workEachBoxInner div:nth-child(2n) {
	left: calc(90% * 1);
}
#main #works .workBox .workEachBox .workEachBoxInner div:nth-child(3n) {
	left: calc(90% * 2);
}
#main #works .workBox .workEachBox .workEachBoxInner div:nth-child(4n) {
	left: calc(90% * 3);
}
#main #works .workBox .workEachBox .workEachBoxInner div:nth-child(5n) {
	left: calc(90% * 4);
}
#main #works .workBox .workEachBox .workEachBoxInner div:nth-child(6n) {
	left: calc(90% * 5);
}
#main #works .workBox .workEachBox .workEachBoxInner div:nth-child(7n) {
	left: calc(90% * 6);
}
#main #works .workBox .workEachBox .workEachBoxInner div:nth-child(8n) {
	left: calc(90% * 7);
}
#main #works .workBox .workEachBox .workEachBoxInner div:nth-child(9n) {
	left: calc(90% * 8);
}
#main #works .workBox .workEachBox .workEachBoxInner div:nth-child(10n) {
	left: calc(90% * 9);
}
#main #works .workBox .workEachBox .workEachBoxInner div:last-child {
	padding-left: 10px;
	padding-right: 10px;
}
#main #works .workBox .workEachBox .workEachBoxInner .imgBox img {
	width: calc(90%);
	height: calc(100%);
	object-fit: contain;
}
#main #works .workBox .workEachBox .workEachBoxInner .infoBox {
	width: calc(100%);
	height: calc(100%);
	position: absolute;
	top: 0px;
	background-color: rgba(255, 255, 255, 0);
}
#main #works .workBox .workEachBox .workEachBoxInner .infoBox .infoInner {
	width: calc(100%);
	height: calc(100%);
}
#main #works .workBox .workEachBox .workEachBoxInner .infoBox .infoInner .workTitle {
	width: calc(100%);
	height: calc(100%);
	position: relative;
}
#main #works .workBox .workEachBox .workEachBoxInner .infoBox .infoInner .workTitle ul {
	width: calc(100%);
	font-size: 1em;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	padding-left: 10px;
	padding-right: 10px;
	letter-spacing: 1px;
	color: #1a1a1a;
}
#main #works .workBox .workEachBox .workEachBoxInner .infoBox .infoInner .workTitle ul li {
	padding-bottom: 5px;
}
#main #works .workBox .workEachBox .workEachBoxInner .infoBox .infoInner .workTitle ul li.title {
	font-size: 1em;
}
#main #works .workBox .workEachBox .workEachBoxInner .infoBox .infoInner .workTitle ul li.private {
	font-size: 1em;
}
#main #works .workBox .workEachBox .workEachBoxInner .infoBox .infoInner .workTitle ul li.client {
	font-size: 1em;
}
#main #works .workBox .workEachBox .workEachBoxInner .infoBox .infoInner .workTitle ul li.clientEn {
	font-size: 1em;
}
#main #works .workBox .workEachBox .workEachBoxInner .infoBox .infoInner .workTitle ul li.year {
	font-size: 0.8em;
}
#main #works .workBox .workEachBox .workEachBoxInner .infoBox .infoInner .workMedia {
	width: calc(100%);
	height: calc(50%);
	font-size: 0.7em;
}
#main #works .workBox .workEachBox .workEachBoxInner .infoBox .infoInner .workStatement {
	width: calc(100%);
	height: calc(100%);
	font-size: 0.8em;
	padding-right: 0px;
	overflow-y: scroll;
}

.showGallery {
	width: 100%;
	height: calc(100%);
	z-index: 999;
	background-color: rgba(255, 255, 255, 1);
	display: none;
	padding-top: 0px;
	padding-bottom: 20px;
	padding-left: 0px;
	padding-right: 0px;
	position: fixed;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	animation: fadeIn .8s ease 0s 1 normal;
}
.displayNone {
	display: none;
}
.showGallery .showGalleryBox {
	width: 100%;
	height: calc(100% - 50px);
	padding-top: 50px;
	padding-bottom: 0px;
	padding-left: 20px;
	padding-right: 20px;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
.showGallery .showGalleryBox .workContentsBoxInner {
	width: 100%;
	height: 100%;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;
}
.showGallery .showGalleryBox .workContentsBoxInner .workContentsInfo {
	width: 100%;
	padding-top: 0px;
	padding-bottom: 50px;
	padding-left: 0px;
	padding-right: 0px;
}
.showGallery .showGalleryBox .workContentsBoxInner .workContentsInfo .workContentsInfoInner {
	width: 100%;
	background-color: white;
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
	padding-right: 20px;
}
.showGallery .showGalleryBox .workContentsBoxInner .workContentsInfo .workContentsInfoInner .workTitle {
	padding-bottom: 15px;	
}
.showGallery .showGalleryBox .workContentsBoxInner .workContentsInfo .workContentsInfoInner .workTitle ul {
	width: calc(100%);
}
.showGallery .showGalleryBox .workContentsBoxInner .workContentsInfo .workContentsInfoInner .workTitle ul li {
	padding-bottom: 3px;
}
.showGallery .showGalleryBox .workContentsBoxInner .workContentsInfo .workContentsInfoInner .workTitle ul li.title {
	font-size: 1em;
}
.showGallery .showGalleryBox .workContentsBoxInner .workContentsInfo .workContentsInfoInner .workTitle ul li.private {
	font-size: 0.8em;
}
.showGallery .showGalleryBox .workContentsBoxInner .workContentsInfo .workContentsInfoInner .workTitle ul li.client {
	font-size: 0.8em;
}
.showGallery .showGalleryBox .workContentsBoxInner .workContentsInfo .workContentsInfoInner .workTitle ul li.clientEn {
	font-size: 0.8em;
}
.showGallery .showGalleryBox .workContentsBoxInner .workContentsInfo .workContentsInfoInner .workTitle ul li.year {
	font-size: 0.7em;
}
.showGallery .showGalleryBox .workContentsBoxInner .workContentsInfo .workContentsInfoInner .workTitle p {
	font-size: 1em;
}
.showGallery .showGalleryBox .workContentsBoxInner .workContentsInfo .workContentsInfoInner .workMedia {
	padding-bottom: 15px;
}
.showGallery .showGalleryBox .workContentsBoxInner .workContentsInfo .workContentsInfoInner .workMedia p {
	font-size: 0.7em;
}
.showGallery .showGalleryBox .workContentsBoxInner .workContentsInfo .workContentsInfoInner .workStatement {
}
.showGallery .showGalleryBox .workContentsBoxInner .workContentsInfo .workContentsInfoInner .workStatement p {
	font-size: 0.8em;
	line-height: 1.7em;
}
.showGallery .showGalleryBox .workContentsBoxInner .workContentsImg {
	width: 100%;
	height: calc(auto);
	padding-top: 0px;
	padding-bottom: 50px;
	padding-left: 0px;
	padding-right: 0px;
}
.showGallery .showGalleryBox .workContentsBoxInner .workContentsImg:first-child {
	padding-top: 0px;
}
.showGallery .showGalleryBox .workContentsBoxInner .workContentsImg img{
	width: 100%;
	height: calc(100%);
	object-fit: contain;
}
.showGallery .CloseBox {
	width: calc(100% - 0%);
	height: 50px;
	position: fixed;
	top: 0;
	transform: translate3d(0, 0, 0);
}
.showGallery .CloseBox .CloseInner {
	width: 100%;
	height: 100%;
	position: relative;
}
.showGallery .CloseBox .CloseInner .CloseLineBox {
	width: 50px;
	height: 100%;
	position: absolute;
	right: 0px;
	padding: 15px;
}
.showGallery .CloseBox .CloseInner .CloseLineBox .CloseLineInner {
	width: 100%;
	height: 100%;
	position: relative;
}
.showGallery .CloseBox .CloseInner .CloseLineBox .CloseLineInner .CloseLine{
	width: calc(100%);
	height: calc(2px);
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	background-color: black;
}
.showGallery .CloseBox .CloseInner .CloseLineBox:first-child .CloseLineInner .CloseLine{
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.showGallery .CloseBox .CloseInner .CloseLineBox:last-child .CloseLineInner .CloseLine{
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

@media all and (min-width: 480px) {

	#main #works {
		padding: 50px 0px 0px 0px;	
	}
	#main #works .workBox {
		width: calc(100% / 1);
		height: 300px;
		margin-bottom: 30px;
		position: relative;
		overflow-x: scroll;
		-webkit-overflow-scrolling: touch;
	}
	#main #works .workBox .workEachBox {
		width: calc(100% - 0px);
		height: calc(100% - 0px);
		position: absolute;
		left: 0%;
	}
	#main #works .workBox .workEachBox .workEachBoxInner {
		width: 100%;
		height: 100%;
		position: relative;
	}
	#main #works .workBox .workEachBox .workEachBoxInner div {
		width: calc((100% - 300px));
		height: calc(100%);
		position: absolute;
		top: 0px;
		padding-left: 20px;
		padding-right: 20px;
		margin-left: 0px;
	}
	#main #works .workBox .workEachBox .workEachBoxInner div:first-child {
		left: calc((100% * 0) + 300px);
	}
	#main #works .workBox .workEachBox .workEachBoxInner div:nth-child(2n) {
		left: calc((100% * 1) - 50px);
	}
	#main #works .workBox .workEachBox .workEachBoxInner div:nth-child(3n) {
		left: calc((100% * 2) - (300px + (50px * 2)));
	}
	#main #works .workBox .workEachBox .workEachBoxInner div:nth-child(4n) {
		left: calc((100% * 3) - ((300px * 2) + (50px * 3)));
	}
	#main #works .workBox .workEachBox .workEachBoxInner div:nth-child(5n) {
		left: calc((100% * 4) - ((300px * 3) + (50px * 4)));
	}
	#main #works .workBox .workEachBox .workEachBoxInner div:nth-child(6n) {
		left: calc((100% * 5) - ((300px * 4) + (50px * 5)));
	}
	#main #works .workBox .workEachBox .workEachBoxInner div:nth-child(7n) {
		left: calc((100% * 6) - ((300px * 5) + (50px * 6)));
	}
	#main #works .workBox .workEachBox .workEachBoxInner div:nth-child(8n) {
		left: calc((100% * 7) - ((300px * 6) + (50px * 7)));
	}
	#main #works .workBox .workEachBox .workEachBoxInner div:nth-child(9n) {
		left: calc((100% * 8) - ((300px * 7) + (50px * 8)));
	}
	#main #works .workBox .workEachBox .workEachBoxInner div:nth-child(10n) {
		left: calc((100% * 9) - ((300px * 8) + (50px * 9)));
	}
	#main #works .workBox .workEachBox .workEachBoxInner div:last-child {
		padding-right: 20px;
	}
	#main #works .workBox .workEachBox .workEachBoxInner .imgBox img {
		width: calc(90%);
		height: calc(100%);
		object-fit: contain;
	}
	
	#main #works .workBox .workEachBox .workEachBoxInner .infoBox {
		width: calc(100% - 300px);
		height: calc(100%);
	}
	#main #works .workBox .workEachBox .workEachBoxInner .infoBox .infoInner {
		width: calc(100%);
		height: calc(100%);
		padding-top: 0px;
		padding-bottom: 0px;
		position: absolute;
		left: 0;
	}

	#main #works .workBox .workEachBox .workEachBoxInner .infoBox .infoInner .workTitle ul li.title {
		font-size: 1em;
	}
	#main #works .workBox .workEachBox .workEachBoxInner .infoBox .infoInner .workTitle ul li.private {
		font-size: 1em;
	}
	#main #works .workBox .workEachBox .workEachBoxInner .infoBox .infoInner .workTitle ul li.client {
		font-size: 1em;
	}
	#main #works .workBox .workEachBox .workEachBoxInner .infoBox .infoInner .workTitle ul li.clientEn {
		font-size: 1em;
	}
	#main #works .workBox .workEachBox .workEachBoxInner .infoBox .infoInner .workTitle ul li.year {
		font-size: 1em;
	}

	.showGallery .showGalleryBox .workContentsBoxInner .workContentsImg {
		height: calc(500px);
	}
}

@media all and (min-width: 1005px) {

	#main #works .workBox {
		height: 650px;
		margin-bottom: 100px;
	}

}