@charset "utf-8";

/*------------------------------------------------------------

index

------------------------------------------------------------*/

#main .mainImg {

	margin-bottom: -0.8rem;

	aspect-ratio: 2000 / 876;

	padding: 1.7rem 4.5rem;

	background: url(../img/index/main_img02.jpg) no-repeat center top -0.8rem;

	background-size: cover;

	position: relative;

}

#main .mainImg:after {

	width: 100%;  

	height: 100%;

	background: url(../img/index/main_img.jpg) no-repeat;

	background-size: cover;

	position: absolute;  

	top: -0.8rem;

	left: 0;

	opacity: 0;

	transition: 6s;

	content: ""; 

}

#main .mainImg.on::after { 

	opacity: 1;

}

#main .mainImg h2 {

	font-size: 5.5rem;

	font-weight: 900;

	color: #fff;

	line-height: 1.3;

	position: relative;

	z-index: 1;

	text-shadow: 0 0 15px rgba(0, 0, 0, 0.35),0 0 15px rgba(0, 0, 0, 0.35),0 0 15px rgba(0, 0, 0, 0.35),0 0 15px rgba(0, 0, 0, 0.35),0 0 15px rgba(0, 0, 0, 0.35),0 0 15px rgba(0, 0, 0, 0.35),0 0 15px rgba(0, 0, 0, 0.35),0 0 15px rgba(0, 0, 0, 0.35),0 0 15px rgba(0, 0, 0, 0.35),0 0 15px rgba(0, 0, 0, 0.35),0 0 15px rgba(0, 0, 0, 0.35),0 0 15px rgba(0, 0, 0, 0.35),0 0 15px rgba(0, 0, 0, 0.35),0 0 15px rgba(0, 0, 0, 0.35),0 0 15px rgba(0, 0, 0, 0.35),0 0 15px rgba(0, 0, 0, 0.35);

}

#main .mainImg h2 span {

	display: inline-block;

	vertical-align: top;

	transform-origin: 0 0;

	backface-visibility: hidden;

}

#main .mainImg h2 small {

	display: block;

	font-size: 4rem;

}

#main .bgBox {

	padding-bottom: 15.5rem;

	background: url(../img/index/bg.png) repeat left top;

	background-size: 0.75rem auto;

}

.scroll_down{

	margin-bottom: 0.7rem;

	animation: arrowmove 1s ease-in-out infinite;

}

.scroll_down a{

	padding-top: 5.7rem;

	position: relative;

	margin: 0 auto;

	display: block;

	text-align: center;

	width: 6rem;

}

.scroll_down a:hover {

	opacity: 0.7;

}

.text img {

	width: 4.6rem;

}

.arrow {

	left: 50%;

	margin-left: -2.5rem;

	position: absolute;

	width: 5.1rem;

	height: 0.5rem;

	opacity: 0;

	top: 0;

	transform: scale3d(0.5, 0.5, 0.5);

	animation: move 3s ease-out infinite;

}

.arrow:first-child {

	animation: move 3s ease-out 1s infinite;

}

.arrow:nth-child(2) {

	animation: move 3s ease-out 2s infinite;

}

.arrow:before,

.arrow:after {

	content: ' ';

	position: absolute;

	top: 0;

	height: 100%;

	width: 51%;

	background: #BC2E1D;

}

.arrow:before {

	left: 0;

	transform: skew(0deg, 30deg);

}

.arrow:after {

	right: 0;

	width: 50%;

	transform: skew(0deg, -30deg);

}

@keyframes move {

	25% { opacity: 1; }

	33% { opacity: 1; transform: translateY(30px); }

	67% { opacity: 1; transform: translateY(40px); }

	100% { opacity: 0; transform: translateY(55px) scale3d(0.5, 0.5, 0.5); }

}

#main p {

	margin-bottom: 5rem;

	line-height: 2.214;

	letter-spacing: 0.032em;

	text-align: justify;

}

#main p:last-child {

	margin-bottom: 0;

}

#main .movieBox .movie {

	margin-bottom: 1.5rem;

	aspect-ratio: 910 / 512;

	background-color: #000;

}

#main .movieBox .movie iframe {

	width: 100% !important;

	height: 100% !important;

}

#main .movieBox p {

	margin: 0 2rem 0.8rem;

}

#main .movieBox .text {

	display: inline-flex;

	align-items: center;

}

#main .movieBox .text img {

	width: 3.2rem;

	flex-shrink: 0;

	margin-right: 0.5rem;

}

#main .movieBox .txt {

	display: flex;

	font-size: 1.2rem;

	color: #000000;

	line-height: 1.75;

}

#main .movieBox .txt .subSpan {

	display: flex;

}

#main .movieBox .txt .subSpan .spSpan {

	flex-shrink: 0;

}

#main .movieBox .txt .txtSpan {

	flex-shrink: 0;

}

#main .about {

	padding: 6.8rem 0 7.5rem;

}

#main .about h2 {

	min-width: 22rem;

	cursor: pointer;

	width: fit-content;

	margin: 0 auto;

	font-size: 2.5rem;

	letter-spacing: 0.032em;

	font-weight: 500;

	text-align: center;

	padding: 0 5.0rem 0 1rem;

	position: relative;

	border-bottom: 1px solid #323232;

}

#main .about h2 span {

	margin-bottom: 0;

	display: block;

}

#main .about h2 .scroll_down {

	position: absolute;

	top: -1.5rem;

	right: 1.5rem;

	/* 【add】click  */

    padding-top: 3.8rem; /* arrow space */

    width: 4.6rem;       /* align center */

    text-align: center;  /* text align center */

}

#main .about h2 .arrow {

    height: 2px;

    width: 3rem;

    animation: move02 4s ease-out infinite;

	/* 【add】click  */

    margin-left: -1.5rem; /* 3rem half to over -2.5rem */	

}

#main .about h2 .arrow:first-child {

    animation: move02 4s ease-out 1.3s infinite;

}

#main .about h2 .arrow:nth-child(2) {

    animation: move02 4s ease-out 2.7s infinite;

}

@keyframes move02 {

    25% { opacity: 1; }

    33% { opacity: 1; transform: translateY(20px); }

    67% { opacity: 1; transform: translateY(27px); }

    100% { opacity: 0; transform: translateY(37px) scale3d(0.5, 0.5, 0.5); }

}

#main .aboutBox {

	display: none;

	padding: 4rem 0 4.4rem;

	margin-top: 2.5rem;

	background-color: #C6C2AC;

}

#main .aboutBox .list {

	margin-bottom: 2.7rem;

}

#main .aboutBox .list li {

	padding-left: 2.5rem;

	margin-bottom: 0.7rem;

	font-size: 1.2rem;

	color: #4A4A4A;

	letter-spacing: 0.032em;

	line-height: 1.5;

	position: relative;

}

#main .aboutBox .list li::before {

	font-size: 1.2rem;

	color: #4A4A4A;

	position: absolute;  

	top: 0;

	left: 0;

	content: "・"; 

}

#main .aboutBox .list li:last-child {

	margin-bottom: 0;

}

#main .aboutBox .sub {

	margin: 0 -0.2rem;

	padding: 3rem 4.2rem 1.5rem 4.4rem;

	background-color: #E8E2CF;

}

#main .aboutBox .sub .list li {

	padding-left: 0;

	display: flex;

}

#main .aboutBox .sub .list li .ico {

	flex-shrink: 0;

	margin-right: 1rem;

}

#main .aboutBox .sub .list li::before {

	display: none;

}

#main .aboutBox .infoList {

	margin-top: -0.1rem;

	display: flex;

	flex-wrap: wrap;

	gap: 13.7rem;

}

#main .aboutBox .infoList li {

	width: calc((100% - (13.7rem * 2 + 0.1rem)) / 3);

}

#main .aboutBox .infoList .txtSpan {

	margin-inline: -1rem;

	display: block;

	text-align: center;

	font-size: 1rem;

	letter-spacing: 0.032em;

	margin-top: 0.9rem;

}



@media all and (max-width: 768px) {

	#main .mainImg {

		margin-bottom: -1.5rem;

		padding: 1.2rem 1.2rem 0;

		aspect-ratio: 748 / 1138;

		background-image: url(../img/index/main_img02_sp.jpg);

	}

	#main .mainImg::after {

		background-image: url(../img/index/main_img_sp.jpg);

	}

	#main .mainImg h2 {

		font-size: 3.6rem;

	}

	#main .mainImg h2 small {

		font-size: 3rem;

	}

	.text img {

		width: 4rem;

	}

	.arrow {

		width: 4.5rem;

		margin-left: -2.2rem;

	}

	.scroll_down {

		margin-bottom: 2.5rem;

	}

	#main p {

		margin-bottom: 5.2rem;

		letter-spacing: 0.025em;

	}

	#main .movieBox .movie {

		aspect-ratio: 16 / 9;

		margin-bottom: 0.5rem;

	}

	#main .movieBox p {

		font-size: 1.2rem;

		line-height: 1.75;

		margin: 0 0 0.5rem;

	}

	#main .movieBox .txt {

		display: block;

	}

	#main .movieBox .txt .txtSpan {

		display: block;

	}

	#main .movieBox .txt .subSpan span {

		flex-shrink: 0;

	}

	#main .about {

		padding: 2.7rem 0 5.8rem;

	}

	#main .about h2 {

		min-width: 14.5rem;

		font-size: 1.7rem;

		padding: 0 3rem 0 0.6rem;

	}

	#main .about h2 .arrow {

		width: 2rem;

		margin-left: -1rem;

	}

	#main .about h2 .scroll_down {

		top: -2.1rem;

		right: 0.0rem;

		/* 【add】click */

		width: 3.6rem; 

		

		/* 【add】click  */

		padding-top: 3.5rem;		

	}

	#main .aboutBox {

		margin-top: 1.5rem;

		padding: 2rem 0 2.5rem;

	}

	#main .aboutBox .list {

		margin-bottom: 1.5rem;

	}

	#main .aboutBox .sub {

		margin: 0;

		padding: 1.5rem 2.5rem 2.3rem;

	}

	#main .aboutBox .infoList {

		margin-top: 0;

		padding: 0.5rem 5.7rem 0;

		flex-direction: column;

		gap: 2.2rem;

	}

	#main .aboutBox .infoList li {

		width: 100%;

	}

	#main .aboutBox .infoList .txtSpan {

		margin-top: 0.4rem;

	}

	#main .aboutBox .infoList li img {

		width: 100%;

	}

	#main .bgBox {

		padding-bottom: 13.5rem;

	}

}



/* when h2  class="on"  */

#main .about h2.on .arrow {

    animation-name: moveUp;

    /* 初期状態：位置をさらに下(40px)にし、Clickの文字に密着した位置から開始させる */

    transform: translateY(40px) scale3d(0.5, 0.5, 0.5) rotate(180deg);

}



/* アニメーション定義 */

@keyframes moveUp {

    /* 0%: 初期状態 - 下の文字に密着(40px)、小サイズ、透明 */

    0% { 

        opacity: 0; 

        transform: translateY(40px) scale3d(0.5, 0.5, 0.5) rotate(180deg); 

    }

    

    /* 30%: 出現完了 - 一定距離を急速に上昇(20pxまで)、通常サイズに拡大 */

    /* この区間の移動距離が長くなり(40->20)、「出現過程の距離を大きくする」要件を満たす */

    30% { 

        opacity: 1; 

        transform: translateY(20px) scale3d(1.0, 1.0, 1.0) rotate(180deg); 

    }



    /* 75%: 維持フェーズ - ゆっくりと上昇(5pxまで)、通常サイズを維持 */

    /* この45%に及ぶ長い時間帯で opacity:1 と scale:1.0 を維持する */

    /* これにより、1つ目の矢印が消える前に2つ目の矢印が30%の状態に入り、「二重矢印」を実現する */

    75% {

        opacity: 1;

        transform: translateY(5px) scale3d(1.0, 1.0, 1.0) rotate(180deg);

    }

    

    /* 100%: 終了 - 上昇を続けながら縮小して消失 */

    100% { 

        opacity: 0; 

        transform: translateY(-5px) scale3d(0.5, 0.5, 0.5) rotate(180deg); 

    }

}

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

   スマホ用：矢印の間隔を5px狭くする設定

   Mobile: Reduce the distance between arrows by 5px

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



/* スマホ (768px以下) の場合のみ、専用のアニメーション(moveUpSP)を適用 */

@media all and (max-width: 768px) {

    #main .about h2.on .arrow {

        animation-name: moveUpSP;

        /* 初期状態もSP用に合わせる (40px -> 35px) */

        transform: translateY(35px) scale3d(0.5, 0.5, 0.5) rotate(180deg);

    }

}



/* スマホ用アニメーション定義 (全体的に数値を5px減らす) */

/* アニメーション定義 */

@keyframes moveUpSP {

    /* 0%: 初期状態 - 35px (PCは40px) */

    0% { 

        opacity: 0; 

        transform: translateY(35px) scale3d(0.5, 0.5, 0.5) rotate(180deg); 

    }

    

    /* 30%: 出現完了 - 20px (PCは20px) */

    30% { 

        opacity: 1; 

        transform: translateY(20px) scale3d(1.0, 1.0, 1.0) rotate(180deg); 

    }



    /* 75%: 維持フェーズ - 10px (PCは5px) */

    75% {

        opacity: 1;

        transform: translateY(10px) scale3d(1.0, 1.0, 1.0) rotate(180deg);

    }

    

    /* 100%: 終了 - 0px (PCは-5px) */

    100% { 

        opacity: 0; 

        transform: translateY(0px) scale3d(0.5, 0.5, 0.5) rotate(180deg); 

    }

}