@charset "UTF-8";


/* mv
--------------------------------*/

#sec_mv {
	margin: 0 auto;
	/*	height: 100vh;*/
	height: 700px;
	overflow: hidden;
}

#sec_mv::before,
#sec_mv::after {
	content: "";
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	transform: skewX(-26deg);
	transform-origin: left bottom;
	z-index: -1;
}

#sec_mv::before {
	width: calc(50% + 780px);
	background-color: #074a97;
}

#sec_mv::after {
	width: calc(50% + 500px);
	background-image: linear-gradient(to right, rgba(65, 180, 190, 1) 0%, rgba(6, 74, 150, 1) 100%);
}

#sec_mv .wrap {
	width: 100%;
	height: 100%;
	max-width: 1300px;
	padding: 100px 0 50px;
}

#sec_mv .ttlwrap {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	margin: 0 auto;
	z-index: 10;
	padding: 16px 0;
	overflow: hidden;
}

#sec_mv .mv_ttl {
	/*	width: 920px;*/
	width: 100%;
	color: #fff;
	font-weight: 700;
	font-size: 5rem;
	line-height: 1;
	letter-spacing: 0.1em;
	transform: skewY(-5deg) translateX(-100%);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	opacity: 0;
	transition: transform .35s ease,
		opacity .1s ease;
	transition-delay: 1.5s;
}

#sec_mv.is-start .mv_ttl {
	transform: skewY(-5deg) translateX(0);
	opacity: 1;
}


#sec_mv .mv_ttl.en {
	margin-top: 10px;
}

#sec_mv .mv_ttl span {
	display: inline-block;
	padding: .138em .5em .138em .4em;
	white-space: nowrap;
	text-align: center;
	-webkit-clip-path: polygon(calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0% 100%, 0% 0%);
	clip-path: polygon(calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0% 100%, 0% 0%);
	margin-left: .6em;
	background-color: #0b318f;
}

#sec_mv .mv_ttl span + span {
	margin-top: 16px;
}

#sec_mv .mv_img .mv_item {
	width: 50%;
	height: 100%;
	position: relative;
	-webkit-clip-path: polygon(0 60px, 100% 0%, 100% calc(100% - 60px), 0% 100%);
	clip-path: polygon(0 60px, 100% 0%, 100% calc(100% - 60px), 0% 100%);
	margin: 0 -1px;
}

#sec_mv #mv_slider .mv_item img.first-img {
	opacity: 0;
	transform: scale(1.09);
	transition: 1.8s ease;
}

#sec_mv #mv_slider .mv_item.slide-start img.first-img {
	opacity: 1;
	transform: scale(1);
	transition-delay: .1s !important;
}

#sec_mv .mv_img .mv_item::before,
#sec_mv .mv_img .mv_item .mask {
	content: "";
	position: absolute;
	width: 0;
	height: 100%;
	left: 0;
	top: 0;
	/* background-image: linear-gradient(to right, rgba(6, 74, 150, 1) 0, rgba(65, 180, 190, 1) 100%); */
	background: #cd0016;
}

#sec_mv.is-start .mv_item.slide-start::before {
	animation: mvMask1 1.2s 0s none;
	z-index: 12;
}

#sec_mv.is-start .mv_item.slide-start .mask.mask-start {
	animation: mvMask1 1.2s 0s none;
	z-index: 12;
}

#mv_slider .mv_item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 8;
	opacity: 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;

	-o-object-position: center center;
	object-position: center center;
	pointer-events: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	transform: scale(1.09);
}

#mv_slider .mv_item img.active {
	z-index: 10;
	opacity: 1.0;
	transform: scale(1);
	transition: transform 5s cubic-bezier(0.39, 0.575, 0.565, 1);
}

#mv_slider .mv_item img.last-active {
	z-index: 9;
}

#sec_mv .ob {
	position: absolute;
	overflow: hidden;
	transform: rotate(-5deg) skewX(-5deg);
}

#sec_mv .ob img {
	position: absolute;
}

#sec_mv .ob01 {
	width: 187px;
	height: 47px;
	left: calc(50% - 655px);
	top: 11.6vw;
}

#sec_mv .ob01 .ob_l {
	top: 0;
}

#sec_mv .ob01 .ob_s {
	bottom: 0;
}

#sec_mv .ob02 {
	width: 157px;
	height: 61px;
	left: calc(50% - 297px);
	bottom: 2.6vw;
}

#sec_mv .ob02 .ob_l {
	top: 0;
}

#sec_mv .ob02 .ob_s {
	bottom: 0;
}

#sec_mv .ob03 {
	width: 77px;
	height: 45px;
	right: calc(50% - 622px);
	top: 8.5vw;
}

#sec_mv .ob03 .ob_l {
	right: calc(50% - 500px);
	bottom: 4vw;
}

#sec_mv .ob03 .ob_s {
	top: 0;
}

#sec_mv .ob04 {
	width: 212px;
	height: 70px;
	right: calc(50% - 640px);
	bottom: 4.5vw;
}

#sec_mv .ob04 .ob_l {
	bottom: 0;
}

#sec_mv .ob04 .ob_s {
	top: 0;
}

#sec_mv .ob img {
	animation: line-move 4s ease-out infinite;
	opacity: 0;
  transform: skewX(5deg);
}

#sec_mv .ob01 .ob_l {
	/*1*/
	animation-delay: 0s;
	right: 0;
}

#sec_mv .ob01 .ob_s {
	/*5*/
	animation-delay: 2s;
}

#sec_mv .ob02 .ob_l {
	/*8*/
	animation-delay: 3.5s;
}

#sec_mv .ob02 .ob_s {
	/*4*/
	animation-delay: 1.5s;
	right: 0;
}

#sec_mv .ob03 .ob_l {
	/*6*/
	animation-delay: 2.5s;
}

#sec_mv .ob03 .ob_s {
	/*2*/
	animation-delay: .5s;
}

#sec_mv .ob04 .ob_l {
	/*3*/
	animation-delay: 1s;
}

#sec_mv .ob04 .ob_s {
	/*7*/
	animation-delay: 3s;
	right: 0;
}

@keyframes line-move {
	0% {
		left: -100%;
		opacity: 1;
	}

	20% {
		left: 105%;
		opacity: 1;
	}

	50% {
		left: 105%;
		opacity: 0;
	}

	100% {
		left: -100%;
		opacity: 0
	}
}

@media screen and (max-width: 768px) {
	#sec_mv {
		height: 163vw;
		min-height: inherit;
	}

	#sec_mv::before {
		width: 142vw;
	}

	#sec_mv::after {
		width: 118vw;
	}

	#sec_mv .wrap {
		width: 100%;
		height: 100%;
		max-width: inherit;
		padding: 19vw 0 12vw;
	}

	#sec_mv .mv_ttl {
    font-size: 6.4vw;
    top: 64vw;
	}

	#sec_mv .mv_ttl.en {
		margin-top: 10.5vw;
	}

	#sec_mv .mv_ttl span {
		-webkit-clip-path: polygon(calc(100% - 3.2vw) 0, 100% 50%, calc(100% - 3.2vw) 100%, 0% 100%, 0% 0%);
		clip-path: polygon(calc(100% - 3.2vw) 0, 100% 50%, calc(100% - 3.2vw) 100%, 0% 100%, 0% 0%);
		width: auto;
		margin-left: auto;
	}


	#sec_mv .mv_ttl span + span {
		margin-top: 1.2vw;
	}

	#sec_mv .mv_ttl span:first-of-type {
		margin-left: 0;
	}

	#sec_mv .mv_ttl span:last-of-type {
		margin-right: 0;
	}

	#sec_mv .ttlwrap {
    width: 84%;
    padding: 3.2vw 0;
    top: 48%;
	}

	#sec_mv .mv_img .mv_item {
		-webkit-clip-path: polygon(0 8vw, 100% 0%, 100% calc(100% - 8vw), 0% 100%);
		clip-path: polygon(0 8vw, 100% 0%, 100% calc(100% - 8vw), 0% 100%);
		width: 84vw;
	}

	#sec_mv .ob01 {
		width: 23.5vw;
		height: 6vw;
		left: 7.5vw;
		top: 32vw;
	}

	#sec_mv .ob01 .ob_l {
		width: 19.73vw;
		top: 0;
	}

	#sec_mv .ob01 .ob_s {
		width: 4.33vw;
		bottom: 0;
	}

	#sec_mv .ob02 {
		width: 19.4vw;
		height: 8vw;
		right: 7.2vw;
		top: 64vw;
		left: auto;
	}

	#sec_mv .ob02 .ob_l {
		width: 16.47vw;
		top: 0;
	}

	#sec_mv .ob02 .ob_s {
		width: 11.8vw;
		bottom: 0;
	}

	#sec_mv .ob03 {
		width: 11vw;
    height: 6vw;
    left: 8vw;
    top: 94.5vw;
	}

	#sec_mv .ob03 .ob_l {
		width: 6.53vw;
		bottom: 0;
	}

	#sec_mv .ob03 .ob_s {
		width: 9.8vw;
		top: 0;
	}

	#sec_mv .ob04 {
		width: 28vw;
		height: 9.4vw;
		right: 7vw;
		bottom: 11vw;
	}

	#sec_mv .ob04 .ob_l {
		width: 25.33vw;
		bottom: 0;
	}

	#sec_mv .ob04 .ob_s {
		width: 6.4vw;
		top: 0;
	}
}



/* mv2
--------------------------------*/

#sec_mv2 {
	padding: 90px 0 160px;
	height: 1032px;
	background: url(../img/index/mv2_img_pc.jpg) no-repeat center / cover;
}

#sec_mv2 .ttl {
	margin: 0 auto 520px;
}

#sec_mv2 .txt {
	font-weight: 700;
	font-size: 2.2rem;
	line-height: 1.8;
	letter-spacing: 0.2em;
}

#sec_mv2 .txt + .txt {
	margin-top: 1em;
}

@media screen and (min-width: 1800px) {
	#sec_mv2 {
		padding: 5vw 0 8vw;
		height: 57.31333vw;
	}

	#sec_mv2 .ttl {
		width: 23vw;
		margin-bottom: 29vw;
	}

	#sec_mv2 .txt {
		font-size: 1.22vw;
	}
}


@media screen and (max-width: 768px) {
	#sec_mv2 {
		padding: 19.7vw 0 16vw;
		height: 179.46vw;
		background: url(../img/index/mv2_img_sp.jpg) no-repeat center / cover;
	}

	#sec_mv2 .ttl {
		width: 66.66vw;
		margin: 0 auto 72vw;
	}

	#sec_mv2 .txt {
		font-size: 4.4vw;
	}

	#sec_mv2 .txt + .txt {
		margin-top: 1em;
	}
}