@charset "UTF-8";

/*animation*/
.titleanimation{
}

.titleanimation .business_logo{
	transform: translateY(-10px);
	opacity: 0;
	transition-duration: 1.0s;
}
.titleanimation.on .business_logo{
	transform: translateY(0px);
	opacity: 1.0;
}

.titleanimation .maintitle > span{
	overflow: hidden;
}
.titleanimation .maintitle .animation{
	transform: translateY(100%);
	transition-duration: 1.0s;
	transition-timing-function: ease;
}
.titleanimation .maintitle .en .animation{
	transition-delay: 0.2s;
}
.titleanimation .maintitle .ja .animation{
	transition-delay: 0.4s;
}

.titleanimation.on .maintitle .animation{
	transform: translateY(0);
}



/* ++++++++++++++++++++++++++++++++++++++++++++++    PC    ++++++++++++++++++++++++++++++++++++++++++++++  */
/* 801px ~ */
@media screen and (min-width: 801px), print {

	#main {
		padding: 64px 0 150px;
		position: relative;
		overflow: hidden;
	}
	h1,h2{
		font-weight: 500;
	}
	
	#maintitleArea{
		padding-top: 80px;
		position: relative;
		margin-bottom: 100px;
	}
		#maintitleArea:after{
			content: '';
			display: block;
			position: absolute;
			width: 100%;
			height: 228px;
			top: 0;
			left: 0;
			z-index: -1;
		}
			.pj01 #maintitleArea:after{
				background: url("../img/project/pj01_mainimg.jpg") no-repeat center;
				background-size: cover;
			}
			.pj02 #maintitleArea:after{
				background: url("../img/project/pj02_mainimg.jpg") no-repeat center;
				background-size: cover;
			}
		.pj_detail #maintitleArea .business_logo{
			width: 68px;
			margin: 0 auto 50px;
		}
		.pj_detail #maintitleArea .maintitle{
			text-align: center;
		}
			.pj_detail #maintitleArea .maintitle span{
				display: block;
			}
				.pj_detail #maintitleArea .maintitle .en{
					font-size: 70px;
					line-height: 1em;
					letter-spacing: 0.2em;
					font-weight: normal;
					margin-bottom: 10px;
				}
				.pj_detail #maintitleArea .maintitle .ja{
					font-size: 26px;
					font-feature-settings: "palt";
					letter-spacing: 0.3em;
				}

	#intro {
		position: relative;
		width: 1040px;
		margin: auto;
		box-sizing: border-box;
		padding: 100px 130px;
		background-color: #f1f1f1;
	}
		#intro .contents .tit{
			font-size: 20px;
			font-weight: 500;
			color: white;
			padding: 0 15px;
			box-sizing: border-box;
			position: relative;
			letter-spacing: 0.16em;
			display: inline-block;
			padding-left: calc(50vw - 390px);
			margin-left: calc(-50vw + 390px);
			background-color: #f06400;
		}
		#intro .contents .tit::before{
			content: "";
			display: block;
			background-size: contain;
		}
		#intro .contents .intro_box{
			margin-top: 45px;
			display: flex;
			justify-content: space-between;
		}
			#intro .contents .intro_box p{
				width: calc(100% - 270px);
				line-height: 2.2;
				letter-spacing: 0.08em;
				text-align: justify;
				line-break: strict;
				word-wrap: break-word;
				overflow-wrap: break-word;
			}
			#intro .contents .intro_box .prof{
				width: 170px;
			}
				#intro .contents .intro_box .prof div{
				}
				#intro .contents .intro_box .prof dl{
				}
					#intro .contents .intro_box .prof dl dt{
						margin-top: 15px;
						font-size: 20px;
					}
						#intro .contents .intro_box .prof dl dt span{
							font-size: 14px;
							display: block;
							color: #f5b400;
						}
					#intro .contents .intro_box .prof dl dd{
						font-size: 13px;
					}


	.sec {
		position: relative;
	}
		.sec .bg {
			background-position: center;
			background-size: cover;
			background-repeat: no-repeat;
		}
		.sec .contents .tit{
			font-size: 20px;
			font-weight: 500;
			color: white;
			padding: 0 15px;
			box-sizing: border-box;
			position: relative;
			letter-spacing: 0.16em;
		}
		.sec .contents .tit::before{
			content: "";
			display: block;
			background-size: contain;
		}
			.sec .contents .tit h2{
				font-size: 25px;
				font-weight: 500;
				color: white;
				padding: 0 20px;
				box-sizing: border-box;
				position: relative;
				letter-spacing: 0.16em;
			}
		.sec .contents h3{
			margin-top: 60px;
			font-size: 25px;
			letter-spacing: 0.08em;
			font-weight: 500;
		}
		.sec .contents p{
			line-height: 2.2;
			letter-spacing: 0.08em;
			margin-top: 45px;
			text-align: justify;
			line-break: strict;
			word-wrap: break-word;
			overflow-wrap: break-word;
		}
		.sec .contents p .small{
			margin-top: 16px;
			font-size: 12px;
			display: block;
			text-indent: -1em;
			margin-left: 1em;
			line-height: 1.6;
		}
		
		
	.sec01{
		margin-top: 180px;
	}
		.sec01 .bg{
			width: 698px;
			height: 420px;
			margin-left: 12%;
		}
		.pj01 .sec01 .contents{
			margin-top: -22px;
			width: 80%;
			min-width: 800px;
			margin-right: 0;
			margin-left: auto;
		}
			.sec01 .contents .tit{
				background-color: #0a9bcd;
			}
			.sec01 .contents .tit::before{
				background-image: url("../img/icon01.png");
				width: 102px;
				height: 44px;
				position: absolute;
				z-index: 1;
				top: 20px;
				left: 82px;
			}
			.sec01 .contents p{
				width: 840px;
			}
	
	/*pj2*/
	.pj02 .sec01 {
		width: 1040px;
		margin: auto;
		margin-top: 200px;
	}
		.pj02 .sec01 .bg {
			position: absolute;
			top: 115px;
			left: 0;
			margin-left: 0;
			z-index: -1;
			width: 400px;
			height: 600px;
		}
		.pj02 .sec01 .contents {
			width: calc(100% - 440px);
			margin: 0 0 0 auto;
			padding-top: 115px;
		}
			.pj02 .sec01 .contents .tit{
				display: inline-block;
				padding-right: calc(50vw - 520px);
				position: absolute;
				right: calc((50vw - 520px)*-1);
				top: 0;
			}
			.pj02 .sec01 .contents .tit::before{
				content: "";
				display: block;
				background-image: url("../img/icon02.png");
				background-size: contain;
				width: 102px;
				height: 44px;
				position: absolute;
				z-index: 1;
				top: 20px;
				right: 145px;
			}
			.pj02 .career .sec01 .contents .tit::before{
				right: 17px;
			}
				.pj02 .sec01 .contents h3{
					text-align: right;
					margin-top: 0;
				}
			.pj02 .sec01 .contents p{
				width: 100%;
				margin: 45px 0 0 auto;
			}
		
	
	
	.pj01 .sec02 {
		width: 1040px;
		margin: auto;
		margin-top: 200px;
	}
		.pj01 .sec02 .bg {
			position: absolute;
			top: 115px;
			right: 0;
			z-index: -1;
			width: 400px;
			height: 600px;
		}
		.pj01 .sec02 .contents {
		}
			.sec02 .contents .tit{
				display: inline-block;
				background-color: #6e3cbe;
				padding-left: calc(50vw - 520px);
				margin-left: calc((50vw - 520px)*-1);
			}
			.sec02 .contents .tit::before{
				content: "";
				display: block;
				background-image: url("../img/icon02.png");
				background-size: contain;
				width: 102px;
				height: 44px;
				position: absolute;
				z-index: 1;
				top: 20px;
				right: 145px;
			}
			.career .sec02 .contents .tit::before{
				right: 17px;
			}
			.pj01 .sec02 .contents p{
				width: calc(100% - 440px);
			}
	/*pj02*/
	.pj02 .sec02{
		margin-top: 180px;
	}
		.pj02 .sec02 .bg{
			width: 698px;
			height: 376px;
			margin-right: calc(50vw - 520px);
			margin-left: auto;
		}
		.pj02 .sec02 .contents{
			margin-top: -22px;
			width: 80%;
			min-width: 800px;
			margin-right: 0;
			margin-left: auto;
		}
			.pj02 .sec02 .contents .tit{
				padding-left: calc(50vw - 420px);
				margin-left: calc((50vw - 420px)*-1);
			}
			.pj02 .sec02 .contents p{
				width: 840px;
			}
	
	
	

	.sec03 {
		margin-top: 180px;
	}
		.sec03 .bg {
			width: 100%;
			height: 420px;
		}
		.sec03 .bg02 {
			width: 70%;
			margin-left: auto;
			height: 340px;
			background-position: 50% 30%;
			background-size: cover;
			margin-top: 40px;
		}
		.sec03 .contents {
			margin-top: -22px;
			width: 80%;
			margin-left: auto;
		}
			.sec03 .wrapper .tit{
				background-color: #f06400;
			}
			.sec03 .wrapper .tit::before{
				content: "";
				display: block;
				background-image: url("../img/icon04.png");
				background-size: contain;
				width: 162px;
				height: 86px;
				position: absolute;
				z-index: 1;
				top: -57px;
				right: 0;
			}
			.sec03 .contents p{
				width: 80%;
			}
			
	
	

	
	
	/* animation
	------------------------------------------------------------------*/		
	/* topの画像 */
	.top .top-container > .fade_ramdom,
	.top .top-container > .wrap05{
		background-color: #dfdfdf;
		z-index: 1;
		padding: 10px;
		box-sizing: border-box;
	}
	.top .top-container > .fade_ramdom:before{
		content: '';
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		opacity: 0;
		transition: 1.0s;
	}
	.top .top-container > .fade_ramdom.on:before{
		opacity: 1.0;
	}
	.top .top-container .wrap05 .profile,
	.top .top-container .wrap05 .txt-box{		
		opacity: 0;
		transition: 1.0s 0.4s;
	}
	.top .top-container.on .wrap05 .profile,
	.top .top-container.on .wrap05 .txt-box{		
		opacity: 1.0;
	}
	.top .top-container .wrap05:before{
		content: '';
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		opacity: 0;
		background-color: #000;
		transition: 1.0s 0.4s;
		z-index: -1;
	}
	.top .top-container.on .wrap05:before{
		opacity: 1.0;
		
	}
	
	
	
	/*pj01
	------------------------------------------------------------------*/		
	.pj01 .sec01 .bg{
		background-image: url("../img/project/pj01_pht01.jpg");
	}
	.pj01 .sec02 .bg {
		background-image: url("../img/project/pj01_pht02.jpg");
	}
	.pj01 .sec03 .bg{
		background-image: url("../img/project/pj01_pht03.jpg");
	}
	.pj01 .sec03 .bg02 {
		background-image: url("../img/project/pj01_pht04.jpg");
	}

	/*pj02
	------------------------------------------------------------------*/		
	.pj02 .sec01 .bg{
		background-image: url("../img/project/pj02_pht02.jpg");
		background-position: 40% 50%;
	}
	.pj02 .sec02 .bg {
		background-image: url("../img/project/pj02_pht01.jpg");
		margin-top: 40px;
	}
	.pj02 .sec03 .bg{
		background-image: url("../img/project/pj02_pht03.jpg");
	}
	.pj02 .sec03 .bg02 {
		background-image: url("../img/project/pj02_pht04.jpg");
	}
	
	
	
	
	
	
	.deco_area {
	}
		.deco {
			position: absolute;
			z-index: 1;
			width: 4vw;
			height: 12px;
		}
		.sec01 .deco02, .sec03 .deco01, .sec04 .deco02, .sec04 .deco04, .career .top .deco05 {
			width: 12vw;
		}
			.sec01 .deco02, .sec03 .deco01, .sec04 .deco02, .sec04 .deco04, .career .top .deco05 {
				height: 28px;
			}
		.top .deco, .sec01 .deco, .sec02 .deco, .sec03 .deco, .sec04 .deco, .sec05 .deco, .sec06 .deco {
		}
		.top .deco01 {
			top: 30%;
			left: 0%;
		}
		.top .deco02 {
			bottom: 30%;
			left: 23%;
		}
		.top .deco03 {
			bottom: 28%;
			left: 19%;
		}
		.top .deco04 {
			top: 41%;
			right: calc(50% - 3px);
		}
		.top .deco05 {
			bottom: 5%;
			right: calc(30% + 6px);
		}
		.top .deco06 {
			top: 36.5%;
			right: 4%;
		}
		.top .deco07 {
			top: 35%;
			right: 0%;
		}
	
		.sec01 .deco01 {
			top: -6%;
			left: -4vw;
		}
		.sec01 .deco02 {
			top: -5%;
			left: 0;
		}
		.sec01 .deco03 {
			top: 80%;
			left: -4vw;
		}
		.sec01 .deco04 {
			top: calc(80% + 12px);
			left: 0;
		}
		.sec02 .deco01 {
			top: -40px;
			right: calc(514px - 4vw);
		}
		.sec02 .deco02 {
			top: -28px;
			right: 514px;
		}
		.sec03 .deco01 {
			top: -28px;
			left: calc(50% - 520px);
		}
		.sec03 .deco02 {
			top: 0;
			left: calc(50% - 520px - 4vw);
		}
		.sec03 .deco03 {
			top: 11%;
			left: calc(50% - 520px - 2vw);
		}
		.sec04 .deco01 {
			top: -40px;
			right: 12vw;
		}
		.sec04 .deco02 {
			top: -28px;
			right: 0;
		}
		.sec04 .deco03 {
			bottom: -5%;
			right: 12vw;
		}
		.sec04 .deco04 {
			bottom: calc(-5% + 12px);
			right: 0;
		}
		.sec05 .deco01 {
			top: -12px;
			left: 4vw;
		}
		.sec05 .deco02 {
			top: 0;
			left: 0;
		}
		.sec05 .deco03 {
			top: 32%;
			right: 0;
		}
			.deco span {
				position: absolute;				
				top: 0;
			}
			
			.on .deco span {
				
			}
			.top .deco01 span {
				left: 0;
				background-color: #fff;
				transition: 0.3s 0.9s;
			}
			.top .deco02 span {
				right: 0;
				background-color: #f5b400;
				transition: 0.3s 1.5s;
			}
			.top .deco03 span {
				left: 0;
				background-color: #f06400;
				transition: 0.3s 0.7s;
			}
			.top .deco04 span {
				right: 0;
				background-color: #f06400;
				transition: 0.3s 2.1s;
			}
			.top .deco05 span {
				left: 0;
				background-color: #6e3cbe;
				transition: 0.3s 1.3s;
			}
			.career .top .deco05 span {
				left: 0;
				background-color: #0a9bcd;
				transition: 0.3s 1.3s;
			}
			.top .deco06 span {
				right: 0;
				background-color: #0a9bcd;
				transition: 0.3s 1.9s;
			}
			.top .deco07 span {
				left: 0;
				background-color: #6e3cbe;
				transition: 0.3s 0.5s;
			}
			.sec01 .deco01 span {
				left: 0;
				background-color: #f06400;
				transition: 0.3s 0.9s;
			}
			.sec01 .deco02 span {
				right: 0;
				background-color: #0a9bcd;
				transition: 0.3s 1.5s;
			}
			.sec01 .deco03 span {
				left: 0;
				background-color: #f5b400;
				transition: 0.3s 0.7s;
			}
			.sec01 .deco04 span {
				right: 0;
				background-color: #0a9bcd;
				transition: 0.3s 2.1s;
			}
			.sec02 .deco01 span {
				left: 0;
				background-color: #6e3cbe;
				transition: 0.3s 0.9s;
			}
			.sec02 .deco02 span {
				right: 0;
				background-color: #f5b400;
				transition: 0.3s 1.5s;
			}
			.sec03 .deco01 span {
				left: 0;
				background-color: #f06400;
				transition: 0.3s 0.9s;
			}
			.sec03 .deco02 span {
				right: 0;
				background-color: #6e3cbe;
				transition: 0.3s 1.5s;
			}
			.sec03 .deco03 span {
				left: 0;
				background-color: #f5b400;
				transition: 0.3s 0.7s;
			}
			.sec04 .deco01 span {
				left: 0;
				background-color: #0a9bcd;
				transition: 0.3s 0.9s;
			}
			.sec04 .deco02 span {
				right: 0;
				background-color: #f5b400;
				transition: 0.3s 1.5s;
			}
			.sec04 .deco03 span {
				left: 0;
				background-color: #0a9bcd;
				transition: 0.3s 0.7s;
			}
			.sec04 .deco04 span {
				right: 0;
				background-color: #f5b400;
				transition: 0.3s 2.1s;
			}
			.sec05 .deco01 span {
				left: 0;
				background-color: #0a9bcd;
				transition: 0.3s 0.9s;
			}
			.sec05 .deco02 span {
				right: 0;
				background-color: #6e3cbe;
				transition: 0.3s 1.5s;
			}
			.sec05 .deco03 span {
				left: 0;
				background-color: #0a9bcd;
				transition: 0.3s 0.7s;
			}
	
/*
			.on .deco span {
				width: 100% !important;
			}
*/
			.deco.on span {
			}
}




/* ++++++++++++++++++++++++++++++++++++++++++++++        ++++++++++++++++++++++++++++++++++++++++++++++  */
/* ~ 800px */
@media only screen and (min-width: 800px) and (max-width: 1040px) {
	#intro .contents .tit {
		padding-left: 160px;
		margin-left: -130px;
	}
	.sec02 .contents .tit {
		padding-left: 30px;
		margin-left: 0;
	}
	.sec01 .contents p {
		width: calc(100% - 30px);
	}
	.sec02 .contents h3 ,
	.sec02 .contents p {
		padding-left: 30px;
	}
	.sec02 .contents p {
		width: calc(100% - 480px);
	}
	.sec03 .bg02 {
		width: 80%;
		height: 300px;
	}
	.sec03 .contents p {
		width: calc(100% - 30px);
	}
	
}

/* ++++++++++++++++++++++++++++++++++++++++++++++    sp    ++++++++++++++++++++++++++++++++++++++++++++++  */
/* ~ 800px */
@media only screen and (max-width: 800px) {

	h1,h2{
		font-weight: 500;
	}

	#main {
		padding: 50px 0;
		overflow: hidden;
		position: relative;
	}

	#maintitleArea{
		padding-top: 40px;
		position: relative;
		margin-bottom: 50px;
	}
		#maintitleArea:after{
			content: '';
			display: block;
			position: absolute;
			width: 100%;
			height: 114px;
			top: 0;
			left: 0;
			z-index: -1;
		}
			.pj01 #maintitleArea:after{
				background: url("../img/project/pj01_mainimg.jpg") no-repeat center;
				background-size: cover;
			}
			.pj02 #maintitleArea:after{
				background: url("../img/project/pj02_mainimg_sp.jpg") no-repeat center;
				background-size: cover;
			}
		#maintitleArea .business_logo{
			width: 35px;
			margin: 0 auto 25px;
		}
		#maintitleArea .maintitle{
			text-align: center;
		}
			#maintitleArea .maintitle span{
				display: block;
			}
				#maintitleArea .maintitle .en{
					font-size: 35px;
					line-height: 1em;
					letter-spacing: 0.2em;
					font-weight: normal;
					margin-bottom: 5px;
				}
				#maintitleArea .maintitle .ja{
					font-size: 16px;
					font-feature-settings: "palt";
					letter-spacing: 0.3em;
				}
	
	#intro {
		position: relative;
		box-sizing: border-box;
		padding: 50px 5%;
		background-color: #f1f1f1;
	}
		#intro .contents .tit{
			display: inline-block;
			background-color: #f06400;
/*			width: 95vw;*/
			margin-left: -6%;
			font-size: 16px;
			font-weight: 500;
			color: white;
			padding: 0 15px;
			box-sizing: border-box;
			position: relative;
			letter-spacing: 0.16em;
			text-align: justify;
			line-break: strict;
			word-wrap: break-word;
			overflow-wrap: break-word;
		}
		#intro .contents .tit::before{
			width: 55px;
			height: 44px;
			position: absolute;
			z-index: 1;
			content: "";
			display: block;
			background-size: contain;
			background-repeat: no-repeat;
		}
		#intro .contents .intro_box{
			margin-top: 30px;
		}
			#intro .contents .intro_box p{
				line-height: 2.2;
				letter-spacing: 0.08em;
				text-align: justify;
				line-break: strict;
				word-wrap: break-word;
				overflow-wrap: break-word;
			}
			#intro .contents .intro_box .prof{
				text-align: center;
			}
				#intro .contents .intro_box .prof div{
					width: 170px;
					margin: 40px auto 0;
				}
				#intro .contents .intro_box .prof dl{
				}
					#intro .contents .intro_box .prof dl dt{
						margin-top: 15px;
						font-size: 20px;
					}
						#intro .contents .intro_box .prof dl dt span{
							font-size: 14px;
							display: block;
							color: #f5b400;
						}
					#intro .contents .intro_box .prof dl dd{
						font-size: 13px;
					}
			

	.sec {
		position: relative;
		margin-top: 80px;
	}
	.sec .bg{
		width: 100%;
		height: 60vw;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}
	.sec .contents{
		box-sizing: border-box;
		width: 100%;
		padding: 0 5%;
		margin-top: -22px;
		margin-right: 0;
		margin-left: auto;
	}
		.sec .contents .tit{
			display: inline-block;
			background-color: #f5b400;
/*			width: 95vw;*/
			margin-left: -6%;
			font-size: 16px;
			font-weight: 500;
			color: white;
			padding: 0 15px;
			box-sizing: border-box;
			position: relative;
			letter-spacing: 0.16em;
			text-align: justify;
			line-break: strict;
			word-wrap: break-word;
			overflow-wrap: break-word;
		}
		.sec .contents .tit::before{
			width: 55px;
			height: 44px;
			position: absolute;
			z-index: 1;
			content: "";
			display: block;
			background-size: contain;
			background-repeat: no-repeat;
		}
		.sec .contents h3{
			margin-top: 35px;
			font-size: 18px;
			letter-spacing: 0.08em;
			font-weight: 500;
			text-align: justify;
			line-break: strict;
			word-wrap: break-word;
			overflow-wrap: break-word;
		}
		.sec .contents p{
			line-height: 2.2;
			letter-spacing: 0.08em;
			margin-top: 20px;
			text-align: justify;
			line-break: strict;
			word-wrap: break-word;
			overflow-wrap: break-word;
		}
		.sec .contents p.small{
			font-size: 11px;
		}
	
	
	.sec{
	}
	
	.sec01 {
		margin-top: 100px;
	}
	.sec01 .contents .tit{
		background-color: #0a9bcd;
	}
	.sec01 .contents .tit::before{
		background-image: url("../img/icon01.png");
		width: 55px;
		height: 44px;
		top: 21px;
		left: 97px;
		transform: rotate(355deg);

	}
	
	.sec02 .contents .tit{
		background-color: #0a9bcd;
		font-weight: 400;
	}
	.sec02 .contents .tit::before{
		background-image: url("../img/icon02.png");
		width: 55px;
		top: 21px;
		height: 44px;
		left: 114px;
		transform: rotate(355deg);
	}
	.sec03 .wrapper .tit{
		background-color: #f06400;
	}
	.sec03 .wrapper .tit::before{
		position: absolute;
		z-index: 1;
		content: "";
		display: block;
		background-size: contain;
		background-repeat: no-repeat;
		background-image: url("../img/icon04.png");
		width: 125px;
		height: 68px;
		right: 0;
		bottom: auto;
		left: auto;
		top: -35px;
	}
	.sec03 .wrapper .contents h3{
/*		margin-top: 55px;*/
	}
	.sec03 .bg02{
		margin-top: 20px;
		width: 95%;
		margin-left: auto;
		height: 40vw;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}


	
		/*pj01
	------------------------------------------------------------------*/		
	.pj01 .sec01 .bg{
		background-image: url("../img/project/pj01_pht01.jpg");
	}
	
	.pj01 .sec02 .bg {
		background-image: url("../img/project/pj01_pht02.jpg");
	}
	
	.pj01 .sec03 .bg{
		background-image: url("../img/project/pj01_pht03.jpg");
	}
	.pj01 .sec03 .bg02 {
		background-image: url("../img/project/pj01_pht04.jpg");
	}
		
	.pj01 .sec05 .topics .contents .img-box {
		background-image: url("../img/people01/topics.jpg");
	}

	/*pj02
	------------------------------------------------------------------*/		
	.pj02 .sec01 .bg{
		background-image: url("../img/project/pj02_pht02.jpg");
		background-position: 40% 50%;
	}
	.pj02 .sec02 .bg {
		background-image: url("../img/project/pj02_pht01_sp.jpg");		
	}
	.pj02 .sec03 .bg{
		background-image: url("../img/project/pj02_pht03.jpg");
	}
	.pj02 .sec03 .bg02 {
		background-image: url("../img/project/pj02_pht04.jpg");
	}

	
	
	.deco_area {
	}
		.deco {
			position: absolute;
			z-index: 0;
			width: 12vw;
			height: 12px;
		}
			.sec01 .deco02, .sec03 .deco01, .sec04 .deco02, .sec04 .deco04 {
				width: 32vw;
			}
			.sec01 .deco02, .sec03 .deco01, .sec04 .deco02, .sec04 .deco04 {
				height: 20px;
			}
		.top .deco, .sec01 .deco, .sec02 .deco, .sec03 .deco, .sec04 .deco, .sec05 .deco, .sec06 .deco {
		}
		.top .deco01 {
			top: 10%;
			left: 0%;
		}
		.top .deco02 {
			bottom: 54%;
			left: 21%;
		}
		.top .deco03 {
			bottom: 28%;
			left: 19%;
		}
		.top .deco04 {
			top: 23%;
			right: 0;
		}
		.top .deco05 {
			bottom: 32.4%;
			right: 12vw;
		}
		.top .deco06 {
			bottom: 30%;
			right: 0%;
		}
		.top .deco07 {
			bottom: 6%;
			left: 0%;
		}
		.sec01 .deco01 {
			top: -7%;
			right: -2%;
		}
		.sec01 .deco02 {
			top: -3%;
			right: -10%;
		}
		.sec01 .deco03 {
			bottom: -0.8%;
			left: -8%;
		}
		.sec01 .deco04 {
			bottom: -2%;
			left: 4%;
		}
		.sec02 .deco01 {
			top: -12px;
			right: 12vw;
		}
		.sec02 .deco02 {
			top: 0;
			right: 0;
		}
		.sec03 .deco01 {
			top: -20px;
			left: 0;
		}
		.sec03 .deco02 {
			top: 2%;
			left: -4%;
		}
		.sec03 .deco03 {
			top: 11%;
			left: calc(50% - 520px - 2vw);
		}
		.sec04 .deco01 {
			top: -32px;
			right: 32vw;
		}
		.sec04 .deco02 {
			top: -20px;
			right: 0;
		}
		.sec04 .deco03 {
			bottom: calc(-3% + 20px);
			right: 32vw;
		}
		.sec04 .deco04 {
			bottom: -3%;
			right: 0;
		}
		.sec05 .deco01 {
			top: -12px;
			left: 12vw;
		}
		.sec05 .deco02 {
			top: 0;
			left: 0;
		}
		.sec05 .deco03 {
			bottom: 46%;
			right: 0;
		}
			.deco span {
				position: absolute;				
				top: 0;
				width: 0;
			}
			
			.on .deco span {
				width: 0 !important;
			}
			.top .deco01 span {
				left: 0;
				background-color: #fff;
				transition: 0.3s 0.9s;
			}
			.top .deco02 span {
				right: 0;
				background-color: #f5b400;
				transition: 0.3s 1.5s;
			}
			.top .deco03 span {
				left: 0;
				background-color: #fff;
				transition: 0.3s 0.7s;
			}
			.top .deco04 span {
				right: 0;
				background-color: #f06400;
				transition: 0.3s 2.1s;
			}
			.top .deco05 span {
				left: 0;
				background-color: #6e3cbe;
				transition: 0.3s 1.3s;
			}
			.top .deco06 span {
				right: 0;
				background-color: #0a9bcd;
				transition: 0.3s 1.9s;
			}
			.top .deco07 span {
				left: 0;
				background-color: #6e3cbe;
				transition: 0.3s 0.5s;
			}
			.sec01 .deco01 span {
				left: 0;
				background-color: #f06400;
				transition: 0.3s 0.9s;
			}
			.sec01 .deco02 span {
				right: 0;
				background-color: #0a9bcd;
				transition: 0.3s 1.5s;
			}
			.sec01 .deco03 span {
				left: 0;
				background-color: #f5b400;
				transition: 0.3s 0.7s;
			}
			.sec01 .deco04 span {
				right: 0;
				background-color: #0a9bcd;
				transition: 0.3s 2.1s;
			}
			.sec02 .deco01 span {
				left: 0;
				background-color: #6e3cbe;
				transition: 0.3s 0.9s;
			}
			.sec02 .deco02 span {
				right: 0;
				background-color: #f5b400;
				transition: 0.3s 1.5s;
			}
			.sec03 .deco01 span {
				left: 0;
				background-color: #f06400;
				transition: 0.3s 0.9s;
			}
			.sec03 .deco02 span {
				right: 0;
				background-color: #6e3cbe;
				transition: 0.3s 1.5s;
			}
			.sec03 .deco03 span {
				left: 0;
				background-color: #f5b400;
				transition: 0.3s 0.7s;
			}
			.sec04 .deco01 span {
				left: 0;
				background-color: #0a9bcd;
				transition: 0.3s 0.9s;
			}
			.sec04 .deco02 span {
				right: 0;
				background-color: #f5b400;
				transition: 0.3s 1.5s;
			}
			.sec04 .deco03 span {
				left: 0;
				background-color: #0a9bcd;
				transition: 0.3s 0.7s;
			}
			.sec04 .deco04 span {
				right: 0;
				background-color: #f5b400;
				transition: 0.3s 2.1s;
			}
			.sec05 .deco01 span {
				left: 0;
				background-color: #0a9bcd;
				transition: 0.3s 0.9s;
			}
			.sec05 .deco02 span {
				right: 0;
				background-color: #6e3cbe;
				transition: 0.3s 1.5s;
			}
			.sec05 .deco03 span {
				left: 0;
				background-color: #0a9bcd;
				transition: 0.3s 0.7s;
			}
	
/*
			.on .deco span {
				width: 100% !important;
			}
*/
			.deco.on span {
				width: 100% !important;
			}
	
	
	
	
}