@import "/ginza/css/mainMenu.css"all;
@import "/ginza/css/base.css"all;
@import "style.css"all;

#mainContent {

	padding-top: 5em;

}

#mainContent div[id*=Section]:not(#contactSection) {

	color: #ffffff;

}

#mainContent div[id*=Section]:not(#contactSection) h2 {

	line-height: 1.2em;
	display: inline-block;
	padding: 1em 0;

}


#backgroundImage {

	width: 100%;
	height: 100vh;

}

#backgroundImage01 {

	width: 100%;
	height: 100vh;
	background-image: url(/ginza/studio/img/drawing/background.png);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: contain;
	z-index: -20;
	top: 0;
	left: 0;

}

#backgroundImage02 {

	width: 100%;
	height: 100vh;
	background-image: url(/ginza/studio/img/common/backgroundStudio.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 140vw;
	z-index: -21;

}

#layoutSection #caseSwitch {

	display: flex;
	width: 100%;
	justify-content: flex-start;
	list-style-type: none;
	padding: 0;
	margin: 0;
	margin-top: 3em;

}

#layoutSection #caseSwitch li {

	padding: 0em;
	text-align: center;
	line-height: 1.6em;
	display: inline-block;
	cursor: pointer;
	border: 1px solid #ffffff;
	border-bottom: none;
	width: 30%;
	margin-right: 1em;
	font-size: 1.6em;

	transition: all .3s ease-in-out;

}

#layoutSection #caseSwitch li:nth-of-type(3n) {

	margin-right: 0;

}

#layoutSection #caseSwitch li:hover, #layoutSection #caseSwitch li.active {

	border: 1px solid rgba(255, 255, 255, 0.3);
	border-bottom: none;
	background-color: rgba(255, 255, 255, 0.3);


}

#layoutSection #layoutBox {

	position: relative;
	margin-bottom: 5em;

}

#layoutSection #layoutBox div[class*=case] {

	background-color: rgba(255, 255, 255, 0.3);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-top: none;
	transition: display .3s ease-in-out;
	visibility: hidden;

}

#layoutSection #layoutBox div[class*=case] div.textBox h3 {

	margin-bottom: 1em;
	font-size: 1.4em;

}


#layoutSection #layoutBox div[class*=case]:not(:first-of-type) {

	position: absolute;
	top: 0;
	left: 0;

}

#layoutSection #layoutBox div[class*=case].active {

	visibility: visible;

}

#layoutSection #layoutBox div[class*=case] div.imgBox {

	text-align: center;

}

#layoutSection #layoutBox div[class*=case] div.imgBox img {

	max-width: 800px;
	width: 100%;

}

#layoutSection #layoutBox div[class*=case] table {

	border: 1px solid #ffffff;
	border-collapse: collapse;

}

#layoutSection #layoutBox div[class*=case] table thead th {

	text-align: center;
	padding: 0.5em;
	width: 30%;
	background-color: rgba(255, 255, 255, 0.3);
	border: 1px solid #ffffff;

}

#layoutSection #layoutBox div[class*=case] table tbody td {

	text-align: center;
	padding: 0.5em;
	width: 30%;
	border: 1px solid #ffffff;

}

#equipmentSection .captionText small {

	font-size: 0.6em;

}

#equipmentSection .equipmentImgBox {

	position: relative;

}

#equipmentSection .equipmentImgBox a {

	display: inline-block;

}

#equipmentSection .equipmentImgBox a h3 {

	color: #ffffff;

	font-size: 1.8em;
	line-height: 1em;

}


#equipmentSection .equipmentImgBox a:hover:not(.pdfDownload) {

	color: #ffffff;
	text-decoration: none;

}


#equipmentSection .equipmentImgBox a.pdfDownload {

	color: #ffffff;
	padding: 1.5em 0;
	display: inline-block;
	text-align: center;
	width: 15em;
	border: 1px solid #ffffff;
	transition: all .3s ease-in-out;

}

#equipmentSection .equipmentImgBox a.pdfDownload:hover {

	text-decoration: none;
	color: #ff9900;

}

#equipmentSection .equipmentImgBox a img {

	display: inline-block;

}


#tableSection .textBox {

	margin-bottom: 2em;

}

#tableSection .imgBox a {

	display: inline-block;
	color: #ffffff;
	margin-bottom: 2em;
	font-size: 0.8em;
	transition: all .3s ease-in-out;
	vertical-align: top;

}

#tableSection .imgBox a img {

	width: 100%;

}

#tableSection .imgBox a:hover {

	text-decoration: none;
	color: #ff9900;

}


#tableSection .imgBox a h3 {

	font-size: 1.2em;
	display: block;
	margin-bottom: 1em;

}

#tableSection a.pdfDownload {
	color: #ffffff;
	padding: 2em 0;
	display: inline-block;
	text-align: center;
	width: 15em;
	border: 1px solid #ffffff;
	transition: all .3s ease-in-out;
}

#tableSection a.pdfDownload:hover {

	text-decoration: none;
	color: #ff9900;

}

.flexBox a {

	margin-bottom: 1em;

}

@media(min-width:769px) {

	#mainContent div[id*=Section] {

		max-width: 980px;
		min-width: 769px;
		margin: 0 auto;

	}

	#mainContent div[id*=Section]:not(#contactSection) h2 {

		font-size: 3em;

	}


	#layoutSection #layoutBox div[class*=case] {

		padding: 4em;

	}

	#layoutSection #layoutBox div[class*=case] table {

		width: 48%;
		vertical-align: top;
		display: inline-table;

	}

	#equipmentSection .captionText {

		text-align: right;

	}

	#equipmentSection .captionText small {

		padding: 0 3em;
		display: inline-block;

	}

	#equipmentSection .equipmentImgBox {

		height: 20em;

	}

	#equipmentSection .equipmentImgBox a:not(.pdfDownload) {

		width: 68%;
		position: absolute;

	}


	#equipmentSection .equipmentImgBox a.pdfDownload {

		z-index: 8;
		top: 0;
		left: 0;
		position: absolute;

	}

	#equipmentSection .equipmentImgBox a.secondFloorImgMap {

		top: 0;
		left: 0;
		z-index: 5;

	}

	#equipmentSection .equipmentImgBox a.thirdFloorImgMap {

		top: 0;
		right: 0;
		z-index: 3;

	}

	#equipmentSection .equipmentImgBox a h3 {

		position: absolute;
		top: 0;
		left: 60%;
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		transform: translateX(-50%);

	}

	#equipmentSection .equipmentImgBox a:not(.pdfDownload) img {

		width: 100%;

	}

	#tableSection .imgBox {

		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

	}

	#tableSection .imgBox a {

		margin-right: 1em;
		width: 300px;

	}

	#tableSection .imgBox a:nth-of-type(3n) {

		margin-right: 0;

	}

	.flexBox {
		display: flex;
		width: 100%;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	#tableSection a.pdfDownload:last-of-type {

		width: 100%;

	}

}

@media(max-width:768px) {

	#mainContent div[id*=Section]:not(#contactSection) h2 {

		font-size: 2.2em;

	}

	#layoutSection {

		padding: 0 1em;

	}

	#layoutSection .textBox {

		padding: 1em;

	}

	#layoutSection #layoutBox div[class*=case] table {

		display: table;
		margin: 1em auto;

	}

	#equipmentSection .equipmentImgBox a {

		margin-bottom: 2em;

	}

	#equipmentSection .equipmentImgBox a img {

		width: 100%;

	}

	#tableSection .imgBox a {

		display: block;
		margin: auto;
		margin-bottom: 3em;

	}

	#tableSection div.contents {

		text-align: center;

	}

	#tableSection div.contents .imgBox p {

		text-align: left;

	}

}