@charset "utf-8";

/* -----------------------------------------------------------
	main_visual
----------------------------------------------------------- */

.main_visual {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background-color: var(--color-brown-02);
}

.main_visual::before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 10;
	pointer-events: none;
}

/* 画像共通設定 */
.slider_item {
	position: absolute;
	top: 0;
	left: -15%; /* 右に動かすための「のりしろ」 */
	width: 120%;
	height: 100%;
	opacity: 0; /* 初期状態はすべて非表示 */
	z-index: 1; /* 重なり順一番下 */
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* JSで「active」ついた画像が右に動きながらフェードイン・ドアウト */
.slider_item.active {
	z-index: 2; /* 動いている画像を前面に出す */
	animation: fadeMoveAnimation 12s linear forwards;/* 1枚12秒間で動かす */
}

/* 背景スライドのアニメーション */
@keyframes fadeMoveAnimation {
	0% {
		opacity: 0;
		transform: translateX(0);
	}
	/* 2秒（全体の25%）かけてフェードイン */
	20% {
		opacity: 1;
	}
	/* 6秒（全体の75%）まで表示キープ */
	75% {
		opacity: 1;
	}
	/* 2秒でフェードアウトしながら右へ移動 */
	100% {
		opacity: 0;
		transform: translateX(5%);
	}
}

.main_visual_ttl {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: var(--color-white);
	text-align: center;
	width: 100%;
	z-index: 20;
}

.main_visual_ttl01, .main_visual_ttl02 {
	font-family: var(--font-family-02);
	display: block;
	font-size: 2.2rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	opacity: 0; /* 最初は透明 */
	backface-visibility: hidden;
	/* 3秒かけて動くforwardsで繰り返さない */
	animation: textFadeMove 3s forwards;
}

.main_visual_ttl01 {
	margin-bottom: 15px;
	animation-delay: 2.0s; /* 2.0秒後にスタート */
}
.main_visual_ttl02 {
	animation-delay: 5.0s;
}

@keyframes textFadeMove {
	0% {
		opacity: 0;
		transform: translateX(-3%); /* スタート位置少し左側 */
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

/* SP */

@media (max-width: 767px) {

	.slider_item {
		left: -15%;
		width: 130%;
	}

	@keyframes fadeMoveAnimation {
		0% {
			opacity: 0;
			transform: translateX(0);
		}
		20% {
			opacity: 1;
		}
		75% {
			opacity: 1;
		}
		100% {
			opacity: 0;
			transform: translateX(8%);
		}
	}

	.main_visual_ttl01, .main_visual_ttl02 {
		font-size: 1.3rem;
		letter-spacing: 0.08em;
		line-height: 1.5;
	}
	.main_visual_ttl01 {
		margin-bottom: 12px;
	}
}

/* -----------------------------------------------------------
	scrolldown
----------------------------------------------------------- */

.scrolldown {
	position:absolute;
	left: 50%;
	bottom: 50px;
	height: 70px;
	text-orientation: mixed;
	z-index: 99;
}

/*Scrollテキストの描写*/
.scrolldown span{
	position: absolute;
	left: -25px;
	top: -35px;
	/*テキストの形状*/
	color: var(--color-white);
	font-size: 0.9rem;
	letter-spacing: 0.2rem;
}

/* 線の描写 */
.scrolldown::after{
	content: "";
	position: absolute;
	top: 0;
	width: 1px;
	height: 50px;
	background: var(--color-white);
	/*線の動き1.4秒かけて動く。永遠にループ*/
	animation: pathmove 1.5s ease-in-out infinite;
	opacity:0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
	0%{
		height:0;
		top:0;
		opacity: 0;
	}
	30%{
		height: 50px;
		opacity: 1;
	}
	100%{
		height:0;
		top: 70px;
		opacity: 0;
	}
}