/*-----------------------------------------------
 * Intro
-------------------------------------------------*/
.intro {
	position: relative;
}

/* inner */
.intro__inner {
	width: 100%;
	padding: min(19.16666vw,230px) 0 min(21.66666vw,260px);
}
@media screen and (min-width:768px){
	.intro__inner {
		-webkit-mask-image: url(../img/top/intro/mask_top.png), url(../img/top/intro/mask_bottom.png), url(../img/top/intro/s.jpg);
		mask-image: url(../img/top/intro/mask_top.png), url(../img/top/intro/mask_bottom.png), url(../img/top/intro/s.jpg);
		-webkit-mask-repeat: repeat-x, repeat-x, repeat;
		mask-repeat: repeat-x, repeat-x, repeat;
		-webkit-mask-position: center top, center bottom, center;
		mask-position: center top, center bottom, center;
		-webkit-mask-size: auto;
		mask-size: auto;
		-webkit-mask-composite: destination-out;
		mask-composite: exclude;
	}
}
@media screen and (max-width:767px){
	.intro__inner {
		margin-top: 10vw;
		padding: 6vw 0;
	}
}

/**
 * contWrap
 */
.intro__contWrap {
	width: var(--common-in-width);
	max-width: var(--common-in-maxwidth);
	margin: 0 auto;
	position: relative;
	z-index: 1;
}
@media screen and (max-width:767px){
	.intro__contWrap {
		width: 100%;
	}
}

/**
 * introTextWrap
 */
.introTextWrap {
	margin-top: min(3.33333vw,40px);
}
.introText {
	color: #fff;
	font-size: var(--fontsize-22);
	line-height: 2;
	width: 125%;
	transform: scaleX(0.8);
	transform-origin: top left;
	text-align: center;
}
@media screen and (max-width:767px){
	.introTextWrap {
		margin-top: 0;
	}
	.introText {
		font-size: 3.5vw;
		padding: 5vw;
	}
}

/**
 * introMovieArea
 */
 .introMovieArea {
	width: min(11.33333vw,136px);
	height: 100%;
	padding-bottom: 126px;
	position: absolute;
	top: 0;
	right: min(4.16666vw, 50px);
	z-index: 2;
}
.introMovieWrap {
	display: flex;
	width: 100%;
	min-height: 100vh;
	position: sticky;
	top: 0;
	bottom: 0;
}
@media screen and (max-width:767px){
	.introMovieArea {
		width: 24vw;
		height: 24vw;
		margin-top: 8vw;
		margin-right:auto;
		margin-left:auto;
		margin-bottom: 0;
		padding-bottom: 0;
		position: relative;
		top: auto;
		right: auto;
	}
	.introMovieWrap {
		display: block;
		width: 100%;
		height: 100%;
		min-height: auto;
		position: relative;
		top: auto;
		bottom: auto;
	}
}

/* introMovie */
.introMovie {
	display: block;
	width: 100%;
	height:min(11.33333vw,136px);
	margin-top: auto;
	margin-bottom: min(4.16666vw, 50px);
	position: relative;
	transition: transform .4s ease;
}
.introMovie:hover {
	transform: scale(1.15);
}
@media screen and (max-width:767px){
	.introMovie {
		height: 100%;
		margin-top: 0;
		margin-bottom: 0;
	}
}

.introMovie:before {
	content: "";
	background: url(../img/common/icon/icon_play_bg.png) no-repeat 0 0 / 100%;
	width: 100%;
	height: 100%;
	margin: auto;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	animation: rotate 18s linear infinite;
}
.introMovie:after {
	content: "";
	background-color: rgb(var(--color-gold));
	-webkit-mask: url(../img/common/icon/icon_play.svg) no-repeat 0 0 / 100%;
	mask: url(../img/common/icon/icon_play.svg) no-repeat 0 0 / 100%;
	width: min(2.66666vw,32px);
	height: min(3.25vw,39px);
	margin: auto;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 7%;
}
@media screen and (max-width:767px){
	.introMovie:after {
		width: 5.86666vw;
		height: 6.8vw;
	}
}


/**
 * introBgArea
 */
 .introBgArea {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}
.introBgWrap {
	background-color: #000;
	width: 100%;
	height: 100vh;
	position: sticky;
	top: 0;
}
.introBg {
	background: url(../img/common/bg/dot_ptn.png) repeat;
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}

/* cover */
.introBg:before {
	content: "";
	background: rgb(var(--color-blue));
    background: linear-gradient(0deg, rgba(var(--color-blue),1) 0%, rgba(var(--color-green),1) 100%);
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	mix-blend-mode: hard-light;
}
.introBg:after {
	content: "";
	background: #000;
	width: 100%;
	height: 100%;
	opacity: .7;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}
.introBg__dot {
	background: url(../img/common/bg/dot_ptn.png) repeat;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
}

/* inner */
.introBg__inner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 0;
}