@charset "UTF-8";


/*
■ 共通
■ キービジュアル
■ メッセージ
■ フッター
*/




/* ■ 共通 ==================================================================================== */

body {
background-color: #f6f3f1;
}

#Contents {
position: relative;
z-index: 1000;
}

.MovieWrap {
position: relative;
padding-bottom: 56.25%;
overflow: hidden;
}

.MovieWrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}


/* ■ キービジュアル ==================================================================================== */

#KeyVisual {
display: flex;
justify-content: center;
align-items: center;
position: sticky;
top: 0.1px;
width: 100%;
background-color: #fff;
}

.Effect_KV {
animation-name: fadeInAnime;
animation-duration: 6s;
animation-fill-mode: forwards;
opacity: 0;
}

@keyframes fadeInAnime {
	from {
	opacity: 0;
	}
	to {
	opacity: 1;
	}
}

.KevVisual_Scroll {
position: absolute;
}

@media only screen and (max-width: 767px) {

	#KeyVisual {
	min-height: 100vh; /* Fallback */
	min-height: calc(var(--vh, 1vh) * 100);
	}

	.KeyVisual_Logo {
	width: 20rem;
	}

	.KevVisual_Scroll {
	right: 2rem;
	bottom: 2rem;
	width: 0.8rem;
	}

}

@media print, screen and (min-width: 768px) {

	#KeyVisual {
	height: 100vh;
	}

	.KeyVisual_Logo {
	width: 38rem;
	}

	.KevVisual_Scroll {
	right: 4rem;
	bottom: 4rem;
	width: 1.2rem;
	}

}

@media print, screen and (min-width: 1090px) {

}



/* ■ メッセージ ==================================================================================== */

#Message {
background-color: #eae8e1;
}

.Marker {
display: inline;
padding: 0 2px 0px;
background: linear-gradient(transparent 60%, #fff 0%);
}

.Effect1_Target {
color: #000;
opacity: 0.2;
transition: all 1.0s ease 0.1s;
}

.Effect1 {
opacity: 1.0;
}

.Message_Lead {
font-weight: 400;
letter-spacing: 0.01em;
text-align: justify;
}

@media only screen and (max-width: 767px) {

	#Message {
	padding: 0.5rem 4.5rem 4rem;
	}

	.Message_Mds {
	margin-top: 5rem;
	margin-bottom: 3rem;
	font-size: 2rem;
	line-height: 1.5;
	}

	.Message_Lead {
	margin-top: 2rem;
	font-size: 1.4rem;
	line-height: 2.2;
	}

}

@media print, screen and (min-width: 768px) {

	#Message {
	padding: 2rem 4rem 10rem;
	}

	.Message_Mds {
	margin-top: 10rem;
	margin-bottom: 6rem;
	font-size: 2.8rem;
	text-align: center;
	}

	.Message_Lead {
	margin-top: 4rem;
	font-size: 1.5rem;
	line-height: 2.5;
	text-align: center;
	}

}



/* ■ 動画 ==================================================================================== */

#Movie {
width: 100%;
color: #fff;
background: #151515;
}

.Movie_Lead {
text-align: center;
}

#ytPlayerWrap {
position: relative;
width: 100%;
overflow: hidden;
}

#ytPlayer {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}

#ytPlayerWrap::after {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 100;
background-color: rgba(0,0,0,0.6);
content: '';
}

.Movie_Play {
position: absolute;
left: 50%;
top: 50%;
z-index: 200;
}

.MovieUnit {
position: relative;
}

/* 閉じるボタン */
.mfp-close {
top: -50px !important;
right: -50px !important;
background-image: url(../img/common/Icon_Close.png) !important;
background-size: cover !important;
text-indent: -9999px !important;
opacity: 1 !important;
}

@media only screen and (max-width: 767px) {

	#Movie {
	padding-top: 6rem;
	}

	.Movie_Mds {
	max-width: 16rem;
	margin: 0 auto;
	}

	.Movie_Lead {
	margin-top: 4rem;
	font-size: 1.3rem;
	line-height: 2;
	}

	#ytPlayerWrap {
	margin-top: 5rem;
	padding-top: 56.25%;
	}

	.Movie_Play {
	width: 5rem;
	margin-left: -2.5rem;
	margin-top: -2.5rem;
	}

	/* 動画表示領域 */
	.MovieUnit {
	max-width: 95%;
	margin: 0 auto;
	}

	/* 閉じるボタン */
	.mfp-close {
	top: -40px !important;
	right: 10px !important;
	width: 20px;
	height: 20px;
	}

}

@media print, screen and (min-width: 768px) {

	#Movie {
	padding-top: 8rem;
	}

	.Movie_Mds {
	max-width: 24rem;
	margin: 0 auto;
	}

	.Movie_Lead {
	margin-top: 6rem;
	font-size: 1.5rem;
	line-height: 2.2;
	}

	#ytPlayerWrap {
	margin-top: 8rem;
	padding-top: 46.25%;
	}

	.Movie_Play {
	width: 7rem;
	margin-left: -3.5rem;
	margin-top: -3.8rem;
	}

	/* 動画表示領域 */
	.MovieUnit {
	max-width: 70%;
	margin: 0 auto;
	}

	/* 閉じるボタン */
	.mfp-close {
	top: -50px !important;
	right: 10px !important;
	width: 20px;
	height: 20px;
	}

}



/* ■ フッター ==================================================================================== */

/*
フッターセクション
SNSシェアボタン
ロゴ
オフィシャルSNS
Footer
ページの先頭へ
*/


/* フッターセクション --------------------------------------------------- */

.FooterWrap {
background-color: #eae8e1;
}

@media only screen and (max-width: 767px) {

	.FooterWrap {
	padding-top: 6rem;
	padding-bottom: 6rem;
	}
		
}

@media print, screen and (min-width: 768px) {

	.FooterWrap {
	padding-top: 8rem;
	padding-bottom: 8rem;
	}
		
}


/* ロゴ --------------------------------------------------- */

#Logo {
text-align: center;
}

#Logo img {
display: inline-block;
}

@media only screen and (max-width: 767px) {

	#Logo {
	margin-bottom: 30px;
	}

	#Logo img {
	width: 120px;
	height: auto;
	}
	
}

@media print, screen and (min-width: 768px) {

	#Logo {
	margin-bottom: 30px;
	}

	#Logo img {
	width: 140px;
	height: auto;
	}
	
}


/* オフィシャルSNS --------------------------------------------------- */

#OfficialSNS {
text-align: center;
}

#OfficialSNS img {
display: inline-block;
}

@media only screen and (max-width: 767px) {

	#OfficialSNS {
	margin-bottom: 20px;
	}
	
	#OfficialSNS ul li {
	display: inline;
	margin: 0 10px;
	}
	
	#OfficialSNS ul li img {
	width: 30px;
	height: auto;
	}

}

@media print, screen and (min-width: 768px) {

	#OfficialSNS {
	margin-bottom: 30px;
	}
	
	#OfficialSNS li {
	display: inline;
	margin: 0 15px;
	}
	
	#OfficialSNS li img {
	width: 26px;
	height: auto;
	}

}


/* Footer --------------------------------------------------- */

#Footer .Copyright {
font-size: 67%;
text-align: center;
}

@media only screen and (max-width: 767px) {

}

@media print, screen and (min-width: 768px) {

}


/* ページの先頭へ --------------------------------------------------- */

#PageTop {
display: none;
position: fixed;
z-index: 10000;
opacity: 0.7;
}

@media only screen and (max-width: 767px) {

	#PageTop {
	bottom: 10px;
	right: 10px;
	}

	#PageTop {
	width: 40px;
	}

}

@media print, screen and (min-width: 768px) {

	#PageTop {
	bottom: 20px;
	right: 20px;
	}
	
}