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

/* -----------------------------
TITLE BLOCK 
----------------------------- */
#title{
	width:14.28%;
	position:relative;
	margin:0 auto;
	padding-top:110px;
}
#title h1{
	width:100%;
	padding-top:6.571vw;
	padding-bottom:15.714vw;
	margin:0 auto;
}


@media screen and (max-width:767px) {
	#title{
		width:80%;
		padding-top:80px;
	}
	#title h1{
		width:30vw;
		padding-top:2vw;
		padding-bottom:10vw;
		margin:0 auto;
	}
}
/* -----------------------------
共通
----------------------------- */
 .detail_box{
	width:100%;
	height:100%;
	
	display:flex;
	align-items:center;
	justify-content: center;
	 
	transition: 1s;
}

.detail_box .spac_box{
	/*display:none;*/
	opacity:0;
	transition: 1s;
}
.detail_box:hover .spac_box{
	opacity:1;
	display:block;
}
 .detail_box .spac_box a{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
	-webkit-box-pack: justify;
    -ms-flex-pack: justify;
	
	justify-content: space-between;
	
	background:rgba(0,0,0,0.6);
	
	border-radius:10px;
}
 .detail_box .spec{
	text-align:center;
	color:#FFF;
	display:block;
	margin:1.429vw 6.429vw;
	
	display:flex;
	align-items:center;
	justify-content: center;
}
 .detail_box .more{
	text-align:center;
	color:#FFF;
	 font-weight:300;
	display:block;
	padding-right:0.714vw;
	
	display:flex;
	align-items:center;
	justify-content: center;
}
 .detail_box .more::after{
	content:"＞＞";
	margin-left:0.5vw;
	margin-right:1vw;
	font-size:1.4rem;
}
#work01,
#work02,
#work03,
#work04{
	margin:0;
	position:relative;
	height:100vh;
	max-height:700px;
}
@media screen and (max-width:767px) {
	.detail_box{
		transition:initial;
		
		overflow:hidden;
	}

	.detail_box .spac_box{
		width:90%;
		
		display:block;
		opacity:1;
		transition: initial;
	}
	.detail_box:hover .spac_box{
		display:block;
	}
	 .detail_box .spac_box a{
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		
		 align-items:center;
		justify-content: center;
		background:rgba(0,0,0,0.6);
		border-radius:10px;
		padding:1vh 0;
	}
	 .detail_box .spec{
		display:block;
		/*margin:1.429vw 6.429vw;*/
	}
	 .detail_box .more{
		width:100%;
		 text-align:center;
		 display:block;
		padding-right:initial;
		padding-bottom:0.8vh;
	}
	 .detail_box .more::after{
		content:"＞＞";
		margin-left:0.5vw;
		margin-right:initial;
		font-size:1.4rem;
	}
	#work01,
	#work02,
	#work03,
	#work04{
		margin:0;
		position:relative;
		height:40vh;
		max-height:700px;
	}
}
/* -----------------------------
#work01
----------------------------- */

#work01 .detail_box{
	background:url("../image/work01.jpg") no-repeat center top;
	background-size:cover;
}
#work01 .detail_box:hover{
	background:url("../image/work01_on.jpg") no-repeat center top;
	background-size:cover;
}

@media screen and (max-width:767px) {
		#work01 .detail_box{
		background:url("../image/work01.jpg") no-repeat left 25% top;
		background-size:cover;
	}
	#work01 .detail_box:hover{
		background:url("../image/work01.jpg") no-repeat left 25% top;
		background-size:cover;
	}
}

/* -----------------------------
#work02
----------------------------- */
#work02 .detail_box{
	background:url("../image/work02.jpg") no-repeat center top;
	background-size:cover;
}
#work02 .detail_box:hover{
	background:url("../image/work02_on.jpg") no-repeat center top;
	background-size:cover;
}

@media screen and (max-width:767px) {
	#work02 .detail_box{
		background:url("../image/work02.jpg") no-repeat center top;
		background-size:cover;
	}
	#work02 .detail_box:hover{
		background:url("../image/work02.jpg") no-repeat center top;
		background-size:cover;
	}
}

/* -----------------------------
#work03
----------------------------- */
#work03 .detail_box{
	background:url("../image/work03.jpg") no-repeat center top;
	background-size:cover;
}
#work03 .detail_box:hover{
	background:url("../image/work03_on.jpg") no-repeat center top;
	background-size:cover;
}

@media screen and (max-width:767px) {
	#work03 .detail_box{
		background:url("../image/work03.jpg") no-repeat center top;
		background-size:cover;
	}
	#work03 .detail_box:hover{
		background:url("../image/work03.jpg") no-repeat center top;
		background-size:cover;
	}
}

/* -----------------------------
#work04
----------------------------- */
#work04 .detail_box{
	background:url("../image/work04.jpg") no-repeat center top;
	background-size:cover;
}
#work04 .detail_box:hover{
	background:url("../image/work04_on.jpg") no-repeat center top;
	background-size:cover;
}

@media screen and (max-width:767px) {
	#work04 .detail_box{
		background:url("../image/work04.jpg") no-repeat center top;
		background-size:cover;
	}
	#work04 .detail_box:hover{
		background:url("../image/work04.jpg") no-repeat center top;
		background-size:cover;
	}
}

/* -----------------------------
IMAGE BLOCK
----------------------------- */
#image{
	width:100%;
}
#image img{
	margin-bottom:1.429vw;
}

@media screen and (max-width:767px) {
	
}

/* -----------------------------
SPEC BLOCK
----------------------------- */
#spec{
	width:90%;
	max-width:1100px;
	margin:0 auto;
	
	position:relative;
	
	display:-webkit-box;
	display: -webkit-flex;
	display:-ms-flexbox;
	display: flex;
	-webkit-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
	
	justify-content: space-between;
	align-items:flex-start;
}

#spec .left{
	width:52%;
}
#spec .right{
	width:44%;
	/*position:sticky;*/
	top:70px;
}

#spec .left p{
	margin-bottom:2.143vw;
}
#spec .left span{
	display:block;
	font-size:1.3rem;
	line-height:1.6;
	text-align:left;
	font-weight:300;
	padding:0.500vw 0 0;
}
#spec h1{
	display:block;
	font-size:1.8rem;
	font-weight:300;
}
#spec h1 span{
	display:block;
	font-size:1.6rem;
	font-weight:300;
	padding:0;
	margin:0;
	border-bottom:solid 1px #000;
	padding-bottom:1.071vw;
}
#spec .copy_box{
	margin:0;
	padding:0 0 2.143vw 0;
}
#spec h3{
	font-size:2.4rem;
	line-height:1.6;
	padding:1.071vw 0;
	display:block;
}
#spec .copy_box p{
	margin-bottom:2.143vw;
}
#spec .right .copy_box{
	display:block;
	font-size:1.7rem;
	margin-bottom:1.429vw;
}
#spec .right .spec_box{
	display:block;
	margin-bottom:1.429vw;
}

@media screen and (max-width:767px) {
	#spec .left{
		width:100%;
		order:2;
	}
	#spec .right{
		width:100%;
		/*position:sticky;*/
		top:initial;
		order:1;
	}

	#spec .left p{
		margin-bottom:2.143vw;
	}
	#spec h1{
		display:block;
		font-size:1.8rem;
		font-weight:300;
	}
	#spec h1 span{
		display:block;
		font-size:1.6rem;
		font-weight:300;
		padding:0;
		margin:0;
		border-bottom:solid 1px #000;
		padding-bottom:2.143vw;
	}
	#spec .copy_box{
		margin:0;
		padding:0 0 2.143vw 0;
	}
	#spec h3{
		font-size:2.4rem;
		line-height:1.6;
		padding:2.143vw 0 2vh;
		display:block;
	}

	#spec .copy_box p{
		margin-bottom:2vh;
	}
	#spec .right .copy_box{
		display:block;
		font-size:1.7rem;
		margin-bottom:1.429vw;
		
		padding:0 0 2.143vw 0;
	}
	#spec .right .spec_box{
		display:block;
		margin-bottom:1.429vw;
	}
}