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

.works h2 {
	width: 80%;
	margin: 50px 10% 20px;
	padding: 5px 0;
	text-align: center;
	font-family: 'notoLight';
	font-weight:lighter;
	font-style: lighter;
	font-size: 24px;
	border-bottom: #264077 1px solid;
}

.works01,.works02,.works03 { width: 60%; }

.works01 { float: left;margin: 0 35% 50px 5%; }
.works02 { float: right;margin: 0 5% 50px 35%; }
.works03 { float: center;margin: 0 20% 50px; }

/* *****************  LIGHTBOX  RAYOUT  ****************** */

.works .img_box {
	width: 98%;
	margin: 0 0 0 2%;
	padding: 0 0 20px 0;
	float: left;
}

.works .img_box ul {
	width: 23%;
	margin: 20px 2% 0 0;
	padding: 0;
	float: left;
}

.works .img_box img {
	width: 100%;
	margin: 0;
	padding: 0;
	float: left;
}

.works .img_box p {
	width: 96%;
	height: 34px;
	font-size: 15px;
	line-height: 17px;
	margin: 5px 2%;
	padding: 0;
	float: left;
}

.works .img_box a {
	margin: 0;
	padding: 0;
	display: block;
	color: #264077;
}

.works .img_box a:hover {
	opacity: 0.7;
}

/* *****************  Detail Page  RAYOUT  ****************** */

.works_detail .message { 
	width: 80%;
	margin: 0 10% 50px;
	float: left;
}

.works_detail .detail_block { margin: 0 0 100px; }

.works_detail .detail_block h2 { 
	text-align: center;
	padding: 10px 0;
	font-size: 24px;
}

.works_detail .detail_block h2:first-letter { 
	color: orangered;
}

.works_detail .detail_block .glid-left,
.works_detail .detail_block .glid-right {
	width: 40%;
	margin: 0 3%;
}
.works_detail .detail_block .glid-left { float: left; }
.works_detail .detail_block .glid-right { float: right; }

.works_detail .detail_block .center {
	width: 8%;
	margin: 300px 0;
	float: left;
	text-align: center;
	display: block;
}

.works_detail .detail_block .photo { 
	text-align: center;
	margin: 30px 0 0;
}

.works_detail .photo.single { 
	width: 90%;
	margin: 30px 5% 100px;
	float: left;
}

.works_detail .slider {
	width: 100%;
	margin: 30px 0 100px;
	float: left;
}

.works_detail .slider .flexslider ul.slides li img {
	width: 100%;
}

/* **************************************************************** */
/*  RESPONSIVE  RAYOUT  MAX-WIDTH 1100px */
/* **************************************************************** */
@media only screen and (max-width:1100px){

.works01,.works02,.works03 {
	width: 80%;
	margin: 0 10% 50px;
	float: left;
}

.works .img_box ul {
	width: 31%;
	margin: 20px 2% 0 0;
}

.works_detail .detail_block .center { margin: 250px 0 0; }

}

/* **************************************************************** */
/*  RESPONSIVE  RAYOUT  MAX-WIDTH 680px */
/* **************************************************************** */
@media only screen and (max-width:680px){

.works01,.works02,.works03 {
	width: 100%;
	margin: 0 0 50px;
}

.works_detail .detail_block .glid-left,
.works_detail .detail_block .glid-right {
	width: 90%;
	margin: 0 5% 50px;
}

.works_detail .detail_block .center {
	display: none;
}

}

/* **************************************************************** */
/*  RESPONSIVE  RAYOUT  MAX-WIDTH 580px */
/* **************************************************************** */
@media only screen and (max-width:580px){

.works .img_box ul {
	width: 48%;
	margin: 20px 2% 0 0;
}

}