/* CSS Document */

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

top-contents
=================================================*/

#top-image {
	width: 100%;
	position: relative;
	background-color: #FFF;
}
#top-image .photo {
	width: 100%;
	position: relative;
	background-color: #FFF;
}
#top-image .photo .bg-cover {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
#top-image .photo .bg-light {
	width: 100%;
	position: absolute;
	overflow: hidden;
	text-align: right;
	mix-blend-mode: overlay;
	opacity: .5;
	top: 50%;
	right: 0;
	transform: translate(0, -50%);
	z-index: 2;
}
#top-image .photo .bg-light .item {
	transform: translate(25%, 0);
}
#top-image .photo .marquee-wrap {
	position: absolute;
	mix-blend-mode: overlay;
	top: -3px;
	left: 0;
	z-index: 3;
}
#top-image .photo .marquee-wrap .item {
	width: 100vw;
	height: 20vw;
	position: relative;
	
	opacity: .3;
	background-image: url("../../images/bg_txt.svg");
	background-position: center top;
	background-repeat: no-repeat;
	background-size: contain;
	margin: 0 2%;
}
#top-image .mv-main {
	width: 55%;
	position: absolute;
	animation: reveal 1s ease forwards;
	animation-delay: 2s;
	filter: brightness(0) invert(1);
	right: 0;
	bottom: 0;
	z-index: 3;
}
@keyframes reveal {
	 0%   { filter: brightness(10); transform: scale(1); }
    100% { filter: brightness(1);   transform: scale(1); }
}
#top-image .txt {
	width: 50%;
	position: absolute;
	top: 50%;
	left: 5%;
	transform: translate(0, -55%);
	z-index: 4;
}
#top-image .txt h1 span {
	display: block;
	padding: .2em 0;
}
#top-image .txt p {
	color: #FFF;
	font-size: 2.5vw;
	line-height: 160%;
	font-weight: 600;
	margin-top: 1.5em;
}
#top-image img {
	width: 100%;
	max-width: 100%;
	height: auto;
}

.top-contents img {
	width: 100%;
	max-width: 100%;
	height: auto;
}

.top-about {
	background-color: #f1f1f1;
	padding: min(12%, 100px) 0;
}
.top-about .inner {
	width: 90%;
	max-width: 1320px;
	position: relative;
	border-radius: clamp(8px, 4vw, 60px);
	background-color: #fff;
	background-image: url("../../images/about_bg.png");
	background-position: right center;
	background-repeat: no-repeat;
	background-size: 50%;
	box-shadow: 0 5px 5px rgba(0,0,0,0.2);
	margin: 0 auto;
	padding: min(14%, 140px) min(6%, 80px);
}
.top-about .inner .txt {
	width: 50%;
	position: relative;
	z-index: 2;
}
.top-about .inner h1 {
	width: 100%;
	text-align: left;
	color: #6d218e;
	padding: 0;
}
.top-about .inner h1 span {
	text-align: left;
}
.top-about .inner p {
	margin: 2em 0;
}
.top-about .inner .button {
	margin: 0;
}
.top-about .inner .photo {
	width: 50%;
	max-width: 650px;
	position: absolute;
	top: 50%;
	right: 3%;
	transform: translate(0, -50%);
	z-index: 1;
}
.top-about .inner .photo .opt {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}

.top-works {
	width: 100%;
	position: relative;
	z-index: 1;
}
.top-works .inner {
	width: 90%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
}
.top-works .inner h1 {
	color: #FFF;
}
.top-works .photo {
	width: 100%;
	position: relative;
	overflow: hidden;
}
.top-works .photo .photo-opt {
	width: 70%;
	position: absolute;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	left: 50%;
	bottom: 0;
	transform: translate(-50%, 0);
	z-index: 1;
}
.top-works .photo .photo-opt div {
	width: 30%;
}
.top-works img {
	width: 100%;
	max-width: 100%;
	height: auto;
}

.senior-menu {
	z-index: 2;
}

.top-message {
	width: 100%;
	position: relative;
	background-color: #ff8400;
	padding: min(12%, 120px) 0;
}
.top-message::before {
	content: " ";
	display: block;
	position: absolute;
	width: 100%;
	height: 50%;
	background-color: #fff;
	top: 0;
	left: 0;
	z-index: 1;
}
.top-message .inner {
	width: 90%;
	max-width: 1320px;
	position: relative;
	overflow: hidden;
	border-radius: clamp(8px, 4vw, 60px);
	background-color: #f2f2f2;
	margin: 0 auto;
	padding: min(8vw, 150px) 0;
	box-shadow: 0 5px 5px rgba(0,0,0,0.1);
	z-index: 2;
}
.top-message .inner .txt {
	width: 60%;
	position: relative;
	padding-left: 5%;
	z-index: 3;
}
.top-message .inner .txt h1 {
	width: 100%;
	color: #6d218e;
	text-align: left;
}
.top-message .inner .txt h1 span {
	text-align: left;
}
.top-message .inner .txt p {
	margin: 2em 0;
}
.top-message .inner .txt .button {
	margin: 0;
}
.top-message .inner .photo {
	width: 38%;
	position: absolute;
	top: 0;
	right: 0;
	transform: translate(-18%, 2%);
	z-index: 2;
}

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

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

.top-message 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 .photo .bg img,#top-image .photo .bg-cover img {
		display: block;
		width: 140%;
		max-width: 140%;
		height: auto;
		margin-left: -20%;
	}
	#top-image .mv-main {
		width: 72%;
		overflow: hidden;
	}
	#top-image .mv-main .person {
		filter: brightness(0.9);
		transform: translate(3%, 0);
	}
	#top-image .txt {
		width: 60%;
		position: absolute;
		top: initial;
		top: auto;
		left: 5%;
		bottom: 0;
		transform: translate(0, -30%);
		z-index: 4;
	}
	
	.top-about {
		background-color: #f1f1f1;
	}
	.top-about .inner {
		width: 95%;
		max-width: 1320px;
		position: relative;
		border-radius: clamp(8px, 4vw, 60px);
		background-color: #fff;
		background-image: url("../../images/about_bg.png");
		background-position: left bottom;
		background-repeat: repeat-x;
		background-size: 40%;
		box-shadow: 0 5px 5px rgba(0,0,0,0.2);
		margin: 0 auto;
		padding: min(8%, 60px) min(6%, 80px);
	}
	.top-about .inner .txt {
		width: 100%;
		position: relative;
		z-index: 2;
	}
	.top-about .inner h1 {
		width: 100%;
		text-align: center;
		color: #6d218e;
		padding: 0;
	}
	.top-about .inner h1 span {
		text-align: center;
	}
	.top-about .inner p {
		text-align: center;
		margin: 2em 0;
	}
	.top-about .inner .button {
		margin: 0 auto;
	}
	.top-about .inner .photo {
		width: 100%;
		max-width: 100%;
		position: relative;
		top: initial;
		top: auto;
		bottom: 0;
		right: 0;
		transform: translate(0, 0);
		margin: 5% auto 0;
		z-index: 1;
	}
	
	.top-works .photo .bg-photo img {
		width: 200%;
		max-width: 200%;
		height: auto;
		margin-left: -100%;
	}
	.top-works .photo .photo-opt {
		width: 100%;
		position: absolute;
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		left: 50%;
		bottom: 0;
		transform: translate(-50%, 0);
		z-index: 1;
	}
	.top-works .photo .photo-opt div {
		width: 40%;
	}
	
	.top-message {
		width: 100%;
		position: relative;
		background-color: #ff8400;
		padding: min(12%, 120px) 0;
	}
	.top-message::before {
		content: " ";
		display: block;
		position: absolute;
		width: 100%;
		height: 50%;
		background-color: #fff;
		top: 0;
		left: 0;
		z-index: 1;
	}
	.top-message .inner {
		width: 90%;
		padding: min(8vw, 150px) 0 0;
		z-index: 2;
	}
	.top-message .inner .txt {
		width: 100%;
		position: relative;
		padding: 0 5%;
		z-index: 3;
	}
	.top-message .inner .txt h1,.top-message .inner .txt h1 span {
		text-align: center;
	}
	.top-message .inner .txt p {
		text-align: center;
	}
	.top-message .inner .txt .button {
		margin: 0 auto;
	}
	.top-message .inner .photo {
		width: 45%;
		position: relative;
		top: 0;
		right: 0;
		transform: translate(0, 10%);
		margin: 0 auto;
		z-index: 2;
	}
	.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) {
	

}