@charset "UTF-8";

.gallery-movi:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha(opacity=70)";
	transition-duration: 0.3s;
  }
/*--------------------------------------------------------------*/
/*	works */
/*--------------------------------------------------------------*/
#works {
	padding: 64px 8%;
	background-color: #f3f1f2;
	overflow: hidden;
	color: #505050;
}
.w-flex{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
}
.w-basis{
flex-basis: 28%;
font-size:0.8rem;
line-height: 1.2rem;
padding:16px;
background-color: #fff;
text-align: justify;
}
.gallery-movi img{
	width:100%;
}
/*------- decoration --------*/
.gallery-title{
	font-size: 1.1rem;
	color:#1450A0;
	line-height: 1.8rem;
}
.gallery-time{
	font-size:0.7rem;
	border:1px solid;
	padding:0 4px;
	width:100px;
}
/*------- yo-btn --------*/
.yo-btn{
	text-align: center;
    font-size: 0.9rem;
    color: #fff;
    background: #eb5d2b;
    border-radius: 4px;
    padding: 8px 10px;
    width: auto;
}
/*------- modal --------*/
body #works .modal .modal-wrap {
    margin: auto;
}
#works .modal .modal-wrap {
    width: 40%;
}
/*--------------------------------------------------------------*/
/*	contents-btnt */
/*--------------------------------------------------------------*/
.contents-btn {
	font-size: 0.8rem;
	padding: 0 16%;
	margin-bottom: 32px;
	display: none;
}
.contents-btn li a {
	color: #505050;
	border-bottom: 1px solid #505050;
}
.contents-btn li a:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha(opacity=70)";
}
/*--------------------------------------------------------------*/
/*	1234px */
/*--------------------------------------------------------------*/
@media screen and (max-width: 1234px) {
	.gallery-title{
		font-size: 0.9rem;
	}
}
/*--------------------------------------------------------------*/
/*	1051px */
/*--------------------------------------------------------------*/
@media screen and (max-width: 1051px) {
	.p-b30-10-07 {
		padding-bottom: 10px;
}
}
/*--------------------------------------------------------------*/
/*	1024px */
/*--------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
	#works {
		padding-left: 4%;
		padding-right: 4%;
	}
}
/*--------------------------------------------------------------*/
/*	960px */
/*--------------------------------------------------------------*/
@media screen and (max-width: 960px) {
	.w-basis {
		flex-basis: 44%;
	}
	.m-rn01{
		margin-right:0;
	}
	.sp-m-r2{
		margin-right:2%;
	}
}
/*--------------------------------------------------------------*/
/*	768px */
/*--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
	#works {
		padding-left: 4%;
		padding-right: 4%;
	}
	.accordion {
		width: 100%;
	}
	.sp-m-r4 {
		margin-right: 0%;
	}
	.sp-w-90 {
		width: 85%;
	}
	.block01 {
		display: inline;
	}
	.accordionbox {
		padding-bottom: 10px;
	}
	.w-basis {
		flex-basis: 44%;
	}
	.m-rn02{
		margin-right:0;
	}
	.spm-r2{
		margin-right:2%;
	}
}
/*--------------------------------------------------------------*/
/*	667px */
/*--------------------------------------------------------------*/
@media screen and (max-width: 667px) {
	.flex02 {
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	.w-basis {
		flex-basis: 100%;
	}
	#works .modal .modal-wrap {
		width: 80%;
		padding: 80px 20px;
	}
	.spm-r2{
		margin-right:0%;
	}
}