/* CSS Document */

/*==================================================

contents
=================================================*/

#top-image {
	width: 100%;
	position: relative;
	/*background-image: url("../../images/head_bg.png");
	background-position: left top;
	background-repeat: repeat;
	background-size: contain;*/
}
#top-image .photo {
	z-index: 3;
}
.on-item {
	width: 15%;
	max-width: 160px;
	position: absolute;
	aspect-ratio: 1 / 1;
	top: 0;
	right: 0;
	z-index: 1;
}
#efon1 {
	top: 15%;
	right: 0;
	z-index: 1;
}
#efon2 {
	width: 25%;
	top: initial;
	top: auto;
	right: 10%;
	bottom: 0%;
	z-index: 1;
}

/* Effect item */

#top-image .head-effect {
	width: 100%;
	height: 70%;
	max-height: 900px;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(0, -50%);
	z-index: 3;
}
#top-image .head-effect .effect {
	width: 100%;
	max-width: 1600px;
	height: 100%;
	position: absolute;
	background-repeat: no-repeat;
	top: 0;
	z-index: 1;
}
#top-image .head-effect #ef1 {
	background-image: url("../../images/head_obj1.png");
	background-position: 20.75% 65%;
	background-size: 8.75%;
}
#top-image .head-effect #ef2 {
	background-image: url("../../images/head_obj2.png");
	background-position: right -5% top;
	background-size: 31.25%;
	right: 0;
	transform: translate(0, -8%);
}
#top-image .head-effect #ef3 {
	background-image: url("../../images/head_obj3.png");
	background-position: right 4% top 32%;
	background-size: 12.5%;
	right: 0;
}
#top-image .head-effect #ef4 {
	background-image: url("../../images/head_obj4.png");
	background-position: right -16% top;
	background-size: 31.25%;
	right: 0;
	z-index: 2;
}
#top-image .head-effect #ef5 {
	background-image: url("../../images/head_obj5.png");
	background-position: left -6% bottom;
	background-size: 31.25%;
}
#top-image.normal .head-effect #ef5 {
	background-image: url("../../images/head_obj5_2.png");
}
#top-image .head-effect #ef6 {
	background-image: url("../../images/head_obj6_2.png");
	background-position: left -6% bottom;
	background-size: 31.25%;
}
#top-image .head-effect #ef7 {
	background-image: url("../../images/head_obj8.png");
	background-position: center top 25%;
	background-size: 15%;
	left: 0;
}

#top-image img {
    width: 100%;
	max-width: 100%;
	height: auto;
}

.eff-bg {
	background-image: url("../../images/page_bg_r3.svg"),url("../../images/page_bg_l3.svg"),url("../../images/page_bg_r4.svg"),url("../../images/page_bg_l4.svg");
	background-position: right -14% top,left -14% center,right -6% bottom,left -6% bottom;
	background-repeat: no-repeat;
	background-size: 25%,25%,20%,15%;
}
@media only screen and (min-width:1600px) {
	.eff-bg {
		background-position: right -14% top,left -10% center,right -6% bottom,left -6% bottom;
		background-size: auto 25%,auto 45%,auto 35%,auto 15%;
	}
}

.eff-bg-n {
	background-image: url("../../images/page_bg_r3.svg"),url("../../images/page_bg_l3.svg"),url("../../images/page_bg_r4.svg");
	background-position: right -14% top,left -14% center,right -6% bottom;
	background-repeat: no-repeat;
	background-size: 25%,25%,20%;
}
@media only screen and (min-width:1600px) {
	.eff-bg-n {
		background-position: right -14% top,left -10% center,right -6% bottom;
		background-size: auto 25%,auto 45%,auto 35%;
	}
}

.eff-bg-half {
	background-image: url("../../images/page_bg_l2.svg"),url("../../images/page_bg_r2.svg");
	background-position: left -15% center,right -15% top;
	background-repeat: no-repeat;
	background-size: 30%,30%;
}
@media only screen and (min-width:1600px) {
	.eff-bg-half {
		background-position: left -10% center,right -10% top;
		background-size: auto 65%,auto 65%;
	}
}

.eff-bg-half-n {
	background-image: url("../../images/page_bg_l2.svg"),url("../../images/page_bg_r2.svg");
	background-position: left -15% center,right -15% top;
	background-repeat: no-repeat;
	background-size: 30%,30%;
}
@media only screen and (min-width:1600px) {
	.eff-bg-half-n {
		background-position: left -15% center,right -15% top;
		background-size: auto 60%,auto 60%;
	}
}



@media only screen and (min-width:1px) and (max-width: 1020px) {
	
	#top-image .head-effect {
		width: 100%;
		height: 300px;
		max-height: 300px;
		position: absolute;
		top: 20%;
		left: 0;
		z-index: 3;
	}
	#top-image.normal .head-effect {
		height: 100%;
	}
	#top-image .head-effect #ef1 {
		background-size: 14%;
	}
	#top-image.normal .head-effect #ef1 {
		background-size: 14%;
	}
	#top-image .head-effect #ef2 {
		background-size: auto 100%;
		background-position: right -5% center;
	}
	#top-image .head-effect #ef3 {
		background-size: 22%;
		background-position: right 4% center;
	}
	#top-image .head-effect #ef4 {
		background-size: auto 100%;
		background-position: right -16% center;
	}
	#top-image.normal .head-effect #ef4 {
		background-size: auto 100%;
		background-position: right -20% top;
	}
	#top-image .head-effect #ef5 {
		background-size: auto 100%;
		background-position: left -6% center;
	}
	#top-image.normal .head-effect #ef5 {
		background-size: auto 100%;
		background-position: left -32% center;
	}
	#top-image .head-effect #ef6 {
		background-size: auto 80%;
		background-position: left -15% center;
	}
	#top-image.normal .head-effect #ef6 {
		background-size: auto 80%;
		background-position: left -35% center;
	}
	#top-image .head-effect #ef7 {
		background-position: center top 25%;
		background-size: 12%;
		left: 0;
	}
	
}
@media only screen and (min-width:1px) and (max-width: 768px) {
	
	#top-image {
		width: 100%;
		position: relative;
		margin-top: 70px;
		z-index: 1;
	}
	#top-image .head-effect {
		width: 100%;
		height: 300px;
		max-height: 300px;
		position: absolute;
		top: 15%;
		left: 0;
		z-index: 3;
	}
	#top-image .head-effect #ef1 {
		background-size: 14%;
	}
	#top-image .head-effect #ef2 {
		background-size: auto 80%;
	}
	#top-image .head-effect #ef4 {
		background-size: auto 80%;
		background-position: right -16% center;
	}
	#top-image .head-effect #ef5 {
		background-size: auto 80%;
		background-position: left -8% center;
	}
	#top-image .head-effect #ef6 {
		background-size: auto 60%;
		background-position: left -15% center;
	}
}

@media only screen and (min-width:1px) and (max-width: 568px) {
	

}
	
@media only screen and (min-width:1px) and (max-width: 480px) {
	

}