@charset "utf-8";

/* mainvisual */
#mainvisual{
	text-align: center;
	position: relative;
	/*height: 22000px !important;*/
	overflow: hidden;
}
.mainvisual_container{
	width: 100%;
	max-width: 3840px;
	/*height: 22000px;*/
	margin: 0 auto;
	position: relative;
}
.pin-spacer{
	overflow: hidden;
}
.mvcontents{
	/*position: fixed;*/
	width: 100%;
  height: 100%;
	top: 0;
	opacity: 0;
	transition: 1.5s;
}
.mvcontents.on{
	opacity: 1;
}
.mvpanel{
	position: absolute;
	top: 0;
	z-index: 2;
}
.mvpanel{
	opacity: 0;
	width: 100%;
  height: 100vh;
	max-height: 100%;
	/*aspect-ratio: 16 / 9;*/
}
.mvbg_b,.mvbg_w{
	width: 100%;
	height: 100%;
}
.mvbg_b{
	background: #000;
}
.mvbg_w{
	background: #FFF;
}
.mvpanel.mv01{
	position: relative;
	opacity: 1;
	height: 100vh;
}
.mv01 .mvitem{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 58.72395833333333%;
	height: auto;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto auto;
}
.mv02,.mv03,.mv05,.mv05_02{
	display: flex;
	justify-content: center;
	align-items: center;
}
.mv02_02{
	overflow: hidden;
}
.mv02_02 .cross{
	margin: 20vh auto 0;
	width: 16.53645833333333%;
	aspect-ratio: 1 / 1;
	transform: scale(3);
}
.mv04 .mvitem{
	display: flex;
	align-items: flex-end;
	width: 31.25%;
	position: absolute;
	right: 0;
	bottom: 10%;
	left: 0;
	margin: auto auto;
}
.mv04 .mvitem img{
	width: 100%;
	height: auto;
}
.mv05,.mv05_02{
	overflow: hidden;
}
.mv05 img,.mv05_02 img{
	transition: 1s;
}
.mv05.active img{
	transform: translateX(18.55%);
}
.mv05_02.active img{
	transform: translateX(-18.55%);
}
.mv06 img{
	width: 42.96875%;
	height: auto;
	transform: translate(0px, -50px) scale(0.35);
}
.mv07 img{
	width: 42.96875%;
	height: auto;
}
.mv06,.mv07{
	display: flex;
	justify-content: center;
	align-items: center;
}
.mv06 .mvitem,.mv07 .mvitem{
	margin-top: -10%;
}
.mv08 .mvitem{
	position: absolute;
	width: 42.96875%;
	height: auto;
	left: 0;
	right: 0;
	bottom: 7%;
	margin: 0 auto;
}
.mv_movie{
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
}
.movie_mask{
	/*
	position: relative;
	z-index: 3;
	*/
}
.movie_mask {
  position: absolute;
  z-index: 2;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
.movie_mask figure,.movie_mask img{
  display: block;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  object-fit: cover;
}
.mv_movie video {
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}
.movie_t video{
	left: 35%;
}
.mv10 .mvitem,.mv12 .mvitem,.mv14 .mvitem,.mv16 .mvitem,.mv18 .mvitem{
	width: 100%;
	height: 100%;
	position: relative;
}
.mv10 .mvitem .item_front{
	position: absolute;
	width: 11%;
	left: 2.6%;
	top: 6.4%;
}
.mv10 .mvitem .item_text{
	position: absolute;
	width: 17.44791666666667%;
	left: 7.3%;
	bottom: 5%;;
}
.mv12 .mvitem .item_front{
	position: absolute;
	width: 11%;
	right: 2.6%;
	bottom: 6.4%;
}
.mv12 .mvitem .item_text{
	position: absolute;
	width: 18.09895833333333%;
	right: 12%;
	top: 12%;;
}
.mv14 .mvitem .item_front{
	position: absolute;
	width: 11%;
	right: 2.6%;
	top: 6.4%;
}
.mv14 .mvitem .item_text{
	position: absolute;
	width: 23.85%;
	left: 7.3%;
	bottom: 5.55%;
}
.mv16 .mvitem .item_front{
	position: absolute;
	width: 11%;
	right: 2.6%;
	top: 6.4%;
}
.mv16 .mvitem .item_text{
	position: absolute;
	width: 18.75%;
	right: 4.95%;
	bottom: 7.9%;
}
.mv18 .mvitem .item_front{
	position: absolute;
	width: 11%;
	right: 2.6%;
	bottom: 6.4%;
}
.mv18 .mvitem .item_text{
	position: absolute;
	width: 23.8%;
	left:2.8%;
	top: 6.9%;
	-webkit-filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, 0.8)); /* SafariなどのWebkitブラウザ用 */
	filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, 0.8)); 
}
.mv19_bg{
	background: #000;
}
.mv20 img {
  display: block;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  object-fit: cover;
}
.mv19 .mvitem{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
}
.mv19 .mvitem img{
	width: 26.19791666666667%;
}
.triggers{
	position: absolute;
  top: 0;
  width: 100%;
}
.trigger{
	width: 100%;
	height: 100vh;
  /*aspect-ratio: 16 / 9;*/
}
#mainvisual .pin-spacer{
	/*height: auto !important;*/
}
#mainvisual .mainvisual_container {
  overflow: hidden;
  width: 100%;
	/* height: 100vh; */
	/* max-height: 1330px; */
  /*aspect-ratio: 16 / 9;*/
}
/* movie */
.mvvideo{
	line-height: 0;
}
.mvvideo video{
	/* max-width: 1920px; */
	width: 100%;
}
.mvcontents .skip {
	background: #000;
	color: #fff;
  position: absolute;
  left: 15px;
  bottom: 15px;
  z-index: 2;
  padding: 5px 15px;
  cursor:pointer
}

@media screen and (max-width: 1601px){
	.mv02_02 .cross{
		margin: 22vh auto 0;
	}
}
@media screen and (max-width: 1401px){
	.mv02_02 .cross{
		margin: 24vh auto 0;
	}
}
@media screen and (max-width: 1201px){
	.mv02_02 .cross{
		margin: 27vh auto 0;
	}
}
@media screen and (max-width: 1001px){
	.mv02_02 .cross{
		margin:30vh auto 0;
	}
}
@media screen and (max-width: 767px){
	.mvpanel{
		width: 100%;
		height: auto;
		aspect-ratio: unset;
	}
	#mainvisual .mainvisual_container {
		overflow: hidden;
		width: 100%;
		height: auto;
		aspect-ratio: unset;
	}
	.trigger {
		width: 100%;
		height: 100vh;
		aspect-ratio: unset;
	}
	.movie_mask img,.mv20 img{
		display: block;
		width: 100vw;
		height: 100vh;
		object-fit: cover;
	}
	.mv02,.mv02_02,.mv03,.mv05,.mv05_02{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.mv02_02 .cross {
		margin: auto 0;
		width: 25%;
		aspect-ratio: 1 / 1;
		transform: scale(5);
	}
	.mv04 .mvitem {
		display: flex;
		align-items: flex-end;
		width: 60%;
		position: absolute;
		right: 0;
		bottom: 20%;
		left: 0;
		margin: auto auto;
	}
	.mv05.active img{
		transform: translateX(30.2%);
	}
	.mv05_02.active img{
		transform: translateX(-30.2%);
	}
	.mv06 .mvitem, .mv07 .mvitem {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		margin-top: 0;
	}
	.mv06 img{
		width: 85%;
		height: auto;
		transform: translate(0px, 0px) scale(0.35);
	}
	.mv07 img{
		width: 85%;
		height: auto;
	}
	.mv08 .mvitem {
		position: absolute;
		width: 60%;
		height: auto;
		left: 0;
		right: 0;
		bottom: 15%;
		margin: 0 auto;
	}
	.mv10 .mvitem .item_front {
		position: absolute;
		width: 26%;
		left: 4%;
		top: 9%;
	}
	.mv10 .mvitem .item_text {
		position: absolute;
		width: 35.15625%;
		left: 4%;
		bottom: 9%;
	}
	.mv12 .mvitem .item_front {
		position: absolute;
		width: 26%;
		right: 4%;
		bottom: 3%;
	}
	.mv12 .mvitem .item_text {
		position: absolute;
		width: 37%;
		right: 4%;
		top:15.83%;
	}
	.mv14 .mvitem .item_front {
		position: absolute;
		width: 26%;
		left: 4%;
		top: 9%;
	}
	.mv14 .mvitem .item_text {
		position: absolute;
		width: 44.27%;
		left: 4%;
		bottom: 15.83%;
	}
	.mv16 .mvitem .item_front {
		position: absolute;
		width: 26%;
		right: 4%;
		top: 9%;
	}
	.mv16 .mvitem .item_text {
		position: absolute;
		width: 37.76%;
		left: 4%;
		top: 16.6666%;
	}
	.mv18 .mvitem .item_front {
		position: absolute;
		width: 26%;
		right: 4%;
		bottom: 3%;
	}
	.mv18 .mvitem .item_text {
		position: absolute;
		width: 48.828125%;
		left: 4%;
		top: 16.6666%;
	}
	.mv19 .mvitem{
		margin-top: -30%;
	}
	.mv19 .mvitem img {
		width: 50%;
		transition: 1s;
	}
	.mv19.active .mvitem img {
		width: 50%;
		margin-left: 30%;
	}
	.movie_t video{
		left: 0%;
	}
}