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


#contents{
	padding-bottom: 0px;
}


/* main */ 

#contents main,
#contents main #alphablack{
	min-height: 600px;
}

#contents main #mainphoto div{
	position: absolute;
	top:0px;
	left: 0px;
	width: 100%;
	height: 100%;
	min-height: 500px;
	background-size: cover;
	background-position: center top;
	z-index: 1;
}

#contents main #mainphoto div,
#contents.check main #mainphoto div{
	transform: scale(1.2,1.2);
	-webkit-transform:scale(1.2,1.2);
	-moz-transform:scale(1.2,1.2);
	-ms-transform:scale(1.2,1.2);
	-o-transform:scale(1.2,1.2);
}

#contents.load main #mainphoto div{
	transform: scale(1.2,1.2);
	-webkit-transform:scale(1.2,1.2);
	-moz-transform:scale(1.2,1.2);
	-ms-transform:scale(1.2,1.2);
	-o-transform:scale(1.2,1.2);
	
	-webkit-animation: shrink 1.2s forwards cubic-bezier(.07,.68,.41,1) .8s;
	animation: shrink 1.2s forwards cubic-bezier(.07,.68,.41,1) .8s;
}

body.project_1 #contents main #mainphoto div{
	background-image: url(../img/project/main_1.jpg);
}

body.project_2 #contents main #mainphoto div{
	background-image: url(../img/project/main_2.jpg);
}



#contents main article{
	color: #FFF;
	width: 90%;
	max-width: 1000px;
}

body.project_1 #contents main article{
	font-size: 16px;
	position: absolute;
	bottom: 10%;
	left: 0%;
	line-height: 1.6;
	font-weight: 600;
	z-index: 100;
}

body.project_2 #contents main article{
	font-size: 16px;
	position: absolute;
	bottom: 10%;
	right: 0%;
	line-height: 1.6;
	font-weight: 600;
	z-index: 100;
	text-align: right;
}

body.project_1 main article #worktitle{
	width: 100%;
	position: absolute;
	padding-left: 5%;
	margin-top: -5px;
	z-index: 10;
}

body.project_2 main article #worktitle{
	position: absolute;
	padding-right: 5%;
	margin-top: -5px;
	z-index: 10;
	right: 0;
}

#contents main article #worktitle h1{
	display: inline-block;
}

#contents main article #worktitle span{
	display: inline-block;
	letter-spacing: 1px;
	padding-left: 15px;
}

#contents main article #maincopy{
	position: relative;
	display: inline-block;
	overflow: hidden;
	width: 0%;
}

body.project_1 #contents main article #maincopy > div{
	padding: 40px 100px 35px 5%;
}

body.project_2 #contents main article #maincopy > div{
	padding: 40px 5% 35px 40px;
}

#contents.load main #maincopy{
	width: 0%;
	-webkit-animation: width_100 1.5s forwards cubic-bezier(.86,0,.07,1) 1s;
	animation: width_100 1.5s forwards cubic-bezier(.86,0,.07,1) 1s;
}

#contents.load main #maincopy{
	width: 0%;
	-webkit-animation: width_100 1.5s forwards cubic-bezier(.86,0,.07,1) 1.4s;
	animation: width_100 1.5s forwards cubic-bezier(.86,0,.07,1) 1.4s;
}



#contents main article #maincopy div.gradient_bg{
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 100%;
	top:0; 
	left: 0;
	opacity: .8;
}

@supports (backdrop-filter: blur(5px)) {
	#contents main article #maincopy{
		backdrop-filter: blur(5px);
	}
	
	#contents main article #maincopy div.gradient_bg{
		position: absolute;
		z-index: -1;
		width: 100%;
		height: 100%;
		top:0; 
		left: 0;
		opacity: .5;
	}
}


#contents main article #maincopy aside{
	display: inline-block;
	background-color: #000;
	color: #FFF;
	font-size: 22px;
	padding: 3px 20px;
	white-space: nowrap;
}

#contents main article #maincopy h1{
	color: #FFF;
	font-size: 50px;
	line-height: 1.4;
	font-weight: 700;
	padding-top: 15px;
	white-space: nowrap;
}

body.project_1 #contents main article #maincopy h1{
	padding-right: 5%;
}

body.project_2 #contents main article #maincopy h1{
	padding-left: 5%;
}

#contents main article #maincopy h1 .split{
	position: relative;
	display: inline-block;
	overflow: hidden;
	line-height: 1;
}

#contents main article #maincopy h1 i{
	position: relative;
	display: inline-block;
	font-style: normal;
	padding-right: 1px;
	transform: translateY(100%);

}


#contents.load main article #maincopy h1 span:nth-of-type(1) i:nth-child(1),
#contents.load main article #maincopy h1 span:nth-of-type(2) i:nth-child(3),
#contents.load main article #maincopy h1 span:nth-of-type(3) i:nth-child(5){
	-webkit-animation: title_project_move .5s forwards cubic-bezier(.2,.44,.35,1) 2.55s;
	animation: title_project_move .5s forwards cubic-bezier(.2,.44,.35,1) 2.55s;
}

#contents.load main article #maincopy h1 span:nth-of-type(1)  i:nth-child(2),
#contents.load main article #maincopy h1 span:nth-of-type(2) i:nth-child(5),
#contents.load main article #maincopy h1 span:nth-of-type(3) i:nth-child(6){
	-webkit-animation: title_project_move .9s forwards cubic-bezier(.2,.44,.35,1) 2s;
	animation: title_project_move .9s forwards cubic-bezier(.2,.44,.35,1) 2s;
}

#contents.load main article #maincopy h1 span:nth-of-type(1) i:nth-child(3),
#contents.load main article #maincopy h1 span:nth-of-type(2) i:nth-child(7),
#contents.load main article #maincopy h1 span:nth-of-type(3) i:nth-child(8){
	-webkit-animation: title_project_move .3s forwards cubic-bezier(.2,.44,.35,1) 2.6s;
	animation: title_project_move .3s forwards cubic-bezier(.2,.44,.35,1) 2.6s;
}

#contents.load main article #maincopy h1 span:nth-of-type(1) i:nth-child(4),
#contents.load main article #maincopy h1 span:nth-of-type(2) i:nth-child(9),
#contents.load main article #maincopy h1 span:nth-of-type(3) i:nth-child(10){
	-webkit-animation: title_project_move .5s forwards cubic-bezier(.2,.44,.35,1) 2.5s;
	animation: title_project_move .5s forwards cubic-bezier(.2,.44,.35,1) 2.5s;
}

#contents.load main article #maincopy h1 span:nth-of-type(1) i:nth-child(5),
#contents.load main article #maincopy h1 span:nth-of-type(2) i:nth-child(1),
#contents.load main article #maincopy h1 span:nth-of-type(3) i:nth-child(2){
	-webkit-animation: title_project_move .6s forwards cubic-bezier(.2,.44,.35,1) 2.35s;
	animation: title_project_move .6s forwards cubic-bezier(.2,.44,.35,1) 2.35s;
}

#contents.load main article #maincopy h1 span:nth-of-type(1) i:nth-child(6),
#contents.load main article #maincopy h1 span:nth-of-type(2) i:nth-child(2),
#contents.load main article #maincopy h1 span:nth-of-type(3) i:nth-child(1){
	-webkit-animation: title_project_move .8s forwards cubic-bezier(.2,.44,.35,1) 2.8s;
	animation: title_project_move .8s forwards cubic-bezier(.2,.44,.35,1) 2.8s;
}

#contents.load main article #maincopy h1 span:nth-of-type(1) i:nth-child(7),
#contents.load main article #maincopy h1 span:nth-of-type(2) i:nth-child(4),
#contents.load main article #maincopy h1 span:nth-of-type(3) i:nth-child(11){
	-webkit-animation: title_project_move 1.2s forwards cubic-bezier(.2,.44,.35,1) 2.4s;
	animation: title_project_move 1.2s forwards cubic-bezier(.2,.44,.35,1) 2.4s;
}

#contents.load main article #maincopy h1 span:nth-of-type(1) i:nth-child(8),
#contents.load main article #maincopy h1 span:nth-of-type(2) i:nth-child(6),
#contents.load main article #maincopy h1 span:nth-of-type(3) i:nth-child(7){
	-webkit-animation: title_project_move .4s forwards cubic-bezier(.2,.44,.35,1) 2.2s;
	animation: title_project_move .4s forwards cubic-bezier(.2,.44,.35,1) 2.2s;
}

#contents.load main article #maincopy h1 span:nth-of-type(1) i:nth-child(9),
#contents.load main article #maincopy h1 span:nth-of-type(2) i:nth-child(8),
#contents.load main article #maincopy h1 span:nth-of-type(3) i:nth-child(3){
	-webkit-animation: title_project_move .6s forwards cubic-bezier(.2,.44,.35,1) 1.9s;
	animation: title_project_move .6s forwards cubic-bezier(.2,.44,.35,1) 1.9s;
}

#contents.load main article #maincopy h1 span:nth-of-type(1) i:nth-child(10),
#contents.load main article #maincopy h1 span:nth-of-type(2) i:nth-child(11),
#contents.load main article #maincopy h1 span:nth-of-type(3) i:nth-child(4){
	-webkit-animation: title_project_move .6s forwards cubic-bezier(.2,.44,.35,1) 2.45s;
	animation: title_project_move .6s forwards cubic-bezier(.2,.44,.35,1) 2.45s;
}

#contents.load main article #maincopy h1 span:nth-of-type(1) i:nth-child(11),
#contents.load main article #maincopy h1 span:nth-of-type(2) i:nth-child(10),
#contents.load main article #maincopy h1 span:nth-of-type(3) i:nth-child(9){
	-webkit-animation: title_project_move .6s forwards cubic-bezier(.2,.44,.35,1) 2.3s;
	animation: title_project_move .6s forwards cubic-bezier(.2,.44,.35,1) 2.3s;
}


@keyframes title_project_move{
	0% {
		transform: translateY(100%);
	}
	100% {
		transform: translateY(0%);
	}
}


/* main */ 



/* chapterbox */

.chapterbox_1{
	background-color: #f5f5f5;
}

.chapterbox{
	padding: 120px 0px;
}

#chapter_3.chapterbox{
	padding-bottom: 150px;
}

.chapterbox aside {
	display: inline-block;
	overflow: hidden;
	width: 0%;
}

.chapterbox aside span{
	display: inline-block;
	color: #FFF;
	font-size: 30px;
	font-weight: 600;
	letter-spacing: 1px;
	line-height: 1;
	white-space: nowrap;
	padding: 10px 105px 5px 20px;
}

.load .chapterbox aside.inview_anime_photo_on{
	width: 0%;
	-webkit-animation: width_100 .8s forwards cubic-bezier(.86,0,.07,1) .3s;
	animation: width_100 .8s forwards cubic-bezier(.86,0,.07,1) .3s;
}

.chapterbox h2{
	position: relative;
	font-size: 40px;
	line-height: 1.4;
	font-weight: 700;
	padding: 30px 0px 40px;
}

.chapterbox h2::before{
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	right: 0;
	top: 0;
	background-color: #FFF;
}

.chapterbox_1.chapterbox h2::before{
	background-color: #f5f5f5;
}

#contents.load .chapterbox h2.inview_anime_photo_on::before{
	width: 100%;
	-webkit-animation: width_0 .8s forwards cubic-bezier(.86,0,.07,1) .5s;
	animation: width_0 .8s forwards cubic-bezier(.86,0,.07,1) .5s;
}


.chapterbox p{
	padding-bottom: 100px;
}

#contents .chapterbox div figure,
#contents .chapterbox div.inview_anime_photo figure{
	transition: all .8s .8s ease;
	transform: scale(1.1,1.1) translateY(50px);
	-webkit-transform:scale(1.1,1.1) translateY(50px);
	-moz-transform:scale(1.1,1.1) translateY(50px);
	-ms-transform:scale(1.1,1.1) translateY(50px);
	-o-transform:scale(1.1,1.1) translateY(50px);
	opacity: 0;
}


#contents.load .chapterbox div.inview_anime_photo_on figure{
	transform: scale(1,1) translateY(0px);
	-webkit-transform:scale(1,1) translateY(0px);
	-moz-transform:scale(1,1) translateY(0px);
	-ms-transform:scale(1,1) translateY(0px);
	-o-transform:scale(1,1) translateY(0px);
	opacity: 1;
}

/* chapterbox */






/* profilearea */

#profilearea{
	background-color: #0b2438;
	font-weight: 700;
	padding-bottom: 200px;
	
}

#profilearea h3{
	font-size: 30px;
	font-weight: 600;
	color: #FFF;
	text-align: center;
	letter-spacing: 1px;
	
	padding: 70px 0px 60px;
}

#profilearea #profilebox{
	position: relative;
}

#profilearea #profilebox div{
	position: absolute;
	display: inline-block;
	background-color: #FFF;
	color: #000;
	bottom: -25px;
	right: 25px;
	padding: 10px 20px 20px;
	min-width: 400px;
}

.project_2 #profilearea #profilebox div{
	right: auto;
	left: 25px;
}

#profilearea #profilebox div h4{
	padding-top: 25px;
	font-size: 20px;
	font-weight: 600;
	line-height: 0;
}

#profilearea #profilebox div i{
	display: inline-block;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 1px;
	padding-bottom: 15px;
}

#profilearea #profilebox div span{
	display: block;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.6;
}



#profilearea p{
	display: block;
	color: #FFF;
	padding-top: 70px;
}







/* profilebox */




@media screen and (max-width: 900px) {
	
	/* main */ 
	
	
	body.project_1 #contents main article #maincopy > div{
		padding: 35px 40px 30px 5%;
	}
	
	body.project_2 #contents main article #maincopy > div{
		padding: 35px 5% 30px 40px;
	}
	
	#contents main article #maincopy aside{
		display: inline-block;
		background-color: #000;
		color: #FFF;
		font-size: 18px;
		padding: 3px 20px;
		white-space: nowrap;
	}

	#contents main article #maincopy h1{
		color: #FFF;
		font-size: 46px;
		line-height: 1.4;
		font-weight: 700;
		padding-top: 15px;
		white-space: nowrap;
	}
	
	
	/* main */ 

	
}


@media screen and (max-width: 768px) {
	
	/* main */ 
	
	#contents main,
	#contents main #alphablack,
	#contents main #mainphoto div{
		min-height: inherit;
	}
	
	body.project_1 #contents main article,
	body.project_2 #contents main article{
		bottom: 7%;
	}
	
	
	
	#contents main article #worktitle{
		position: absolute;
		padding-left: 5%;
		margin-top: -8px;
		z-index: 10;
	}
	
	/* main */ 
	
	
	/* chapterbox */

	
	.chapterbox{
		padding: 100px 0px;
	}

	#chapter_3.chapterbox{
		padding-bottom: 120px;
	}
	
	.chapterbox aside span{
		display: inline-block;
		color: #FFF;
		font-size: 24px;
		font-weight: 600;
		letter-spacing: 1px;
		line-height: 1;
		white-space: nowrap;
		padding: 10px 80px 5px 15px;
	}

	.chapterbox h2{
		font-size: 34px;
		padding: 25px 0px 35px;
	}
	
	
	.chapterbox p{
		padding-bottom: 70px;
	}
	
	/* chapterbox */
	
	/* profilearea */

	#profilearea{
		padding-bottom: 150px;
	}

	#profilearea h3{
		font-size: 30px;
		padding: 60px 0px 50px;
	}

	#profilearea #profilebox div{
		position: relative;
		display: inline-block;
		background-color: #FFF;
		color: #000;
		bottom: auto;
		right: auto;
		width: 80%;
		margin: -20px 0px 0px 20px;
		padding: 10px 20px 20px;
		min-width:inherit;
	}
	
	.project_2 #profilearea #profilebox div{
		left: auto;
	}

	#profilearea #profilebox div h4{
		padding-top: 25px;
		font-size: 20px;
		font-weight: 600;
		line-height: 0;
	}

	#profilearea #profilebox div i{
		display: inline-block;
		font-size: 14px;
		font-weight: 500;
		line-height: 1;
		letter-spacing: 1px;
		padding-bottom: 15px;
	}

	#profilearea #profilebox div span{
		display: block;
		font-size: 14px;
		font-weight: 500;
		line-height: 1.6;
	}



	#profilearea p{
		display: block;
		color: #FFF;
		padding-top: 20px;
	}







	/* profilebox */
}




@media screen and (max-width: 560px) {
	
	#contents main article{
		color: #FFF;
	
		width: 90%;
		max-width: 1200px;
	
	}
	
	/* main */ 
	
	
	body.project_1 #contents main article #maincopy > div{
		padding: 30px 5% 30px 5%;
	}
	
	body.project_2 #contents main article #maincopy > div{
		padding: 30px 5% 30px 5%;
	}
	
	#contents main article #maincopy aside{
		display: inline-block;
		background-color: #000;
		color: #FFF;
		font-size: 18px;
		padding: 5px 20px;
		line-height: 1.4;
	}

	#contents main article #maincopy h1{
		color: #FFF;
		font-size: 8.5vw;
		line-height: 1.4;
		font-weight: 700;
		padding-top: 10px;
		white-space: nowrap;
	}
	
	
	/* main */ 

	/* profilearea */

	#profilearea{
		padding: 0px 5% 100px;
	}

	#profilearea h3{
		font-size: 30px;
		padding: 40px 0px 30px;
	}

	#profilearea #profilebox div{
		position: relative;
		display: block;
		background-color: #FFF;
		color: #000;
		bottom: auto;
		right: auto;
		width: 100%;
		margin: 0px 0px 0px 0px;
		padding: 10px 20px 20px;
	}

	#profilearea #profilebox div h4{
		padding-top: 25px;
		font-size: 20px;
		font-weight: 600;
		line-height: 0;
	}

	#profilearea #profilebox div i{
		display: inline-block;
		font-size: 14px;
		font-weight: 500;
		line-height: 1;
		letter-spacing: 1px;
		padding-bottom: 15px;
	}

	#profilearea #profilebox div span{
		display: block;
		font-size: 13px;
		font-weight: 500;
		line-height: 1.6;
	}



	#profilearea p{
		display: block;
		color: #FFF;
		padding-top: 20px;
	}


	
}



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

	/* chapterbox */


	.chapterbox{
		padding: 80px 0px;
	}

	#chapter_3.chapterbox{
		padding-bottom: 100px;
	}
	
	.chapterbox aside span{
		display: inline-block;
		color: #FFF;
		font-size: 18px;
		font-weight: 600;
		letter-spacing: 1px;
		line-height: 1;
		white-space: nowrap;
		padding: 10px 60px 5px 12px;
	}

	.chapterbox h2{
		font-size: 28px;
		padding: 22px 0px 32px;
	}

	.chapterbox p{
		padding-bottom: 50px;
	}
	/* chapterbox */



}



@media screen and (max-width: 360px) {
	
	
	/* main */
	#contents main article #maincopy aside{
		font-size: 16px;
		padding: 5px 15px;
	}
	/* main */
	
	/* chapterbox */


	.chapterbox{
		padding: 60px 0px;
	}

	#chapter_3.chapterbox{
		padding-bottom: 80px;
	}
	
	.chapterbox aside span{
		font-size: 18px;
	}

	.chapterbox h2{
		font-size: 24px;
		padding: 20px 0px 30px;
	}


	/* chapterbox */



}