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

#detail{
	width: 1160px;
	padding: 128px 0 40px 0;
	margin: 0 auto;
	border-bottom: solid 5px #000;
	opacity: 0;
	-webkit-transition: all 1.5s ease-out;
	-moz-transition: all 1.5s ease-out;
	-ms-transition: all 1.5s ease-out;
	-o-transition: all 1.5s ease-out;
	transition: all 1.5s ease-out;
}
#detail.active{
	opacity: 1;
}

#detail img{
	width: 100%;
	height: auto;
	vertical-align: bottom;
}
#detail .swiper-container.main{
	width: 100%;
	height: auto;
	margin: 0 auto 20px auto;
}
#detail .swiper-container.thumb{
	width: 100%;
	margin: 0 auto 40px auto;
}
#detail .swiper-container.thumb .swiper-slide{
	width: 20%;
	box-sizing: border-box;
}
#detail .swiper-container.thumb .swiper-slide.swiper-slide-active{
	border: solid 5px #000;
}
#detail .swiper-button-prev{
	background-image: url(../images/arrow_left.png);
	background-size: contain;
	width: 50px;
	height: 50px;
	margin: -25px 0 0 0;
	left: 10px;
}
#detail .swiper-button-next{
	background-image: url(../images/arrow_right.png);
	background-size: contain;
	width: 50px;
	height: 50px;
	margin: -25px 0 0 0;
	right: 10px;
}
#detail .swiper-pagination-bullet{
	background-color: #FFF;
	opacity: 1;
}
#detail .swiper-pagination-bullet-active{ background-color: #000; }
#detail .dataset{
	text-align: left;
}
#detail .dataset .data{
width: 400px;
float: left;
}
#detail .dataset .data h3{
	font-size: 2.4rem;
	font-weight: 500;
	line-height: 100%;
	margin-bottom: 20px;
}
#detail .dataset .data table{
	font-size: 0.9rem;
	width: 100%;
	border-collapse: collapse;
	border-top: solid 1px #999;
}
#detail .dataset .data table th{
	font-weight: 500;
	white-space: nowrap;
	width: 1%;
	padding: 10px 0;
	border-bottom: solid 1px #999;
}
#detail .dataset .data table td{
	padding: 10px 0 10px 40px;
	border-bottom: solid 1px #999;
	box-sizing: border-box;
}
#detail .dataset .text{
width: 720px;
float: right;
}
#detail .dataset .text h5{
	font-size: 1.2rem;
	line-height: 1.8rem;
	font-weight: bold;
	margin-bottom: 5px;
}
#detail .dataset .text p{
	font-size: 1rem;
	line-height: 1.8rem;
	margin-bottom: 20px;
}
#detail .dataset .text p.mb{ margin-bottom: 60px; }
#detail .dataset .text p:last-child{ margin-bottom: 0px; }

#contents{
	opacity: 0;
	-webkit-transition: all 1.5s ease-out;
	-moz-transition: all 1.5s ease-out;
	-ms-transition: all 1.5s ease-out;
	-o-transition: all 1.5s ease-out;
	transition: all 1.5s ease-out;
}
#contents.active{ opacity: 1; }
#contents .works{ margin: 0 auto; }

/* --------------------------------------- Media Queries Smartphone --------------------------------------- */
@media only screen and (max-width: 736px) {


#detail{
	width: 100%;
	padding: 60px 0 40px 0;
}
#detail .swiper-container.main{
	width: 100%;
	height: auto;
	margin: 0 auto 10px auto;
}
#detail .swiper-container.thumb{
	width: 100%;
	margin: 0 auto 40px auto;
}
#detail .swiper-container.thumb .swiper-slide{
	width: 15%;
	box-sizing: border-box;
}
#detail .swiper-container.thumb .swiper-slide.swiper-slide-active{
	border: solid 3px #000;
}
#detail .swiper-button-prev{
	width: 20px;
	height: 20px;
	margin: -10px 0 0 0;
	left: 10px;
}
#detail .swiper-button-next{
	width: 20px;
	height: 20px;
	margin: -10px 0 0 0;
	right: 10px;
}
#detail .dataset{
	text-align: left;
	padding: 0 20px;
}
#detail .dataset .data{
width: 100%;
margin: 0 auto 40px auto;
float: none;
}
#detail .dataset .data h3{
	font-size: 2rem;
	line-height: 2.4rem;
	margin-bottom: 10px;
}
#detail .dataset .data table{
	font-size: 1.2rem;
	line-height: 1.8rem;
	width: 100%;
	border-collapse: collapse;
	border-top: solid 1px #999;
}
#detail .dataset .data table th{
	font-weight: 500;
	white-space: nowrap;
	width: 30%;
	padding: 10px 0;
}
#detail .dataset .data table td{
	padding: 10px 0 10px 10px;
	box-sizing: border-box;
}
#detail .dataset .text{
width: 100%;
padding: 0px;
float: none;
box-sizing: border-box;
}
#detail .dataset .text h5{
	font-weight: 500;
	margin-bottom: 5px;
}
#detail .dataset .text p{
	font-size: 1.1rem;
	line-height: 1.9rem;
	margin-bottom: 10px;
}
#detail .dataset .text p:last-child{ margin-bottom: 0px; }
#detail .dataset .text p.mb{ margin-bottom: 40px; }

#contents .works{ margin: 0 auto; }
#contents .works ul{
	margin: 0 auto 10px auto;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
}
#contents .works ul li{
	width: 30%;
	margin: 0;
}
#contents .works ul li:first-child{ margin: 0px; }
#contents .works ul li .photo{ margin-bottom: 10px; }
#contents .works ul.btns li a{ padding: 5px 0; }
	
}