/* CSS Document */

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

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

#top-image {
	width: 100%;
	position: relative;
	background-color: #FFF;
}
#top-image.message::before {
	content: " ";
	display: block;
	width: 100%;
	height: 80%;
	position: absolute;
	background-color: #ff8a00;
	left: 0;
	bottom: clamp(-20%, -20vw, -200px);
	z-index: 0;
}
#top-image .photo {
	width: 100%;
	position: relative;
	background-color: #FFF;
}
#top-image.message .photo {
	width: 95%;
	position: relative;
	background-color: #f0f0f0;
	border-radius: 20px;
	overflow: hidden;
	margin: 0 auto;
}
#top-image .photo .bg-cover {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
#top-image .photo .marquee-wrap {
	position: absolute;
	mix-blend-mode: overlay;
	left: 0;
	bottom: -12px;
	z-index: 3;
}
#top-image .photo .marquee-wrap .item {
	width: 100vw;
	height: 20vw;
	position: relative;
	opacity: .3;
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: contain;
	margin: 0 2%;
}


#top-image .photo .marquee-wrap.person .item {
	background-image: url("../../person/images/bg_txt.svg");
}
#top-image .photo .marquee-wrap.about {
	mix-blend-mode: multiply;
}
#top-image .photo .marquee-wrap.about .item {
	background-image: url("../../about/images/bg_txt.svg");
}
#top-image .photo .marquee-wrap.message {
	mix-blend-mode: multiply;
}
#top-image .photo .marquee-wrap.message .item {
	background-image: url("../../message/images/bg_txt.svg");
}

#top-image .photo .marquee-wrap.works {
	mix-blend-mode: screen;
}
#top-image .photo .marquee-wrap.works .item {
	background-image: url("../../style/images/bg_txt.svg");
}

#top-image .photo .marquee-wrap.entry {
	mix-blend-mode: screen;
}
#top-image .photo .marquee-wrap.entry .item {
	background-image: url("../../entry/images/bg_txt.svg");
}

#top-image .txt {
	width: 50%;
	position: absolute;
	top: 50%;
	left: 5%;
	transform: translate(0, -55%);
	z-index: 4;
}
#top-image.message .txt {
	width: 60%;
	left: 8%;
}
#top-image .txt h1 {
	color: #FFF;
	font-size: 10vw;
	line-height: 100%;
}
#top-image .txt h1 span {
	display: block;
	font-size: 26%;
	line-height: 100%;
	color: #ff8a00;
	padding: .2em 0;
}
#top-image .txt.pu h1 {
	color: #6d218e!important;
}
#top-image .txt.pu h1 span {
	color: #6d218e!important;
}
#top-image.works .txt {
	width: 100%;
	left: 0;
}
#top-image.works .txt h1 {
	color: #FFF;
	text-align: center;
}
#top-image.works .txt h1 span {
	color: #FFF;
}

#top-image .photo-option {
	width: 52%;
	position: absolute;
	top: 0;
	right: 0;
	transform: translate(-5%, -2%);
	z-index: 1;
}
#top-image .photo-option div.opt2 {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}
#top-image .photo-option div.opt3 {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}

#top-image .photo-option.message {
	width: 40%;
	position: absolute;
	top: initial;
	top: auto;
	bottom: clamp(-20%, -20vw, -200px);
	right: 0;
	transform: translate(-5%, 0);
	z-index: 1;
}

#top-image .marquee-img {
	width: 100%;
	overflow: hidden;
	position: absolute;
	left: 0;
	bottom: 8%;
	z-index: 1;
}
#top-image .marquee-img-inner {
	display: flex;
	width: max-content;
	animation: img-scroll 15s linear infinite;
}
#top-image .marquee-img-inner.sub {
	animation: img-scroll 20s linear infinite reverse;
}

@keyframes img-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

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




@media only screen and (min-width:1px) and (max-width: 768px) {
	
	#top-image {
		margin-top: 60px;
	}
	#top-image .photo {
		overflow: hidden;
	}
	#top-image.message .photo {
		border-radius: 10px;
	}
	#top-image .photo .bg img,#top-image .photo .bg-cover img {
		display: block;
		width: 150%;
		max-width: 150%;
		height: auto;
		margin-left: -50%;
	}
	#top-image.message .photo .bg img {
		display: block;
		width: 120%;
		max-width: 120%;
		height: auto;
		margin-left: -10%;
	}
	#top-image .txt h1 span {
		font-size: 2rem;
		line-height: 100%;
	}
	#top-image .photo-option {
		transform: translate(-5%, 1%);
		z-index: 1;
	}
	#top-image .photo-option.message {
		width: 45%;
	}
	
	.marquee-img-inner img {
        width: 160vw!important;
    }
}

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

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

}