/*=================================
MV
=================================*/
#mv {
	height: calc(100vh - 0.88rem);
	position: relative;
	opacity: 0;
	animation: mv_fade_in 2s forwards;
	background-color: #E8EAE5;
}

@media screen and (max-width: 599px) {
	#mv {
		height: 3.70rem;
		margin-top: 0.50rem;
	}
}

#mv::before {
	content: "";
	width: 0;
	height: 0.15rem;
	background-color: #000;
	animation: line_horizon 1.2s 1.2s forwards cubic-bezier(0.77, 0, 0.175, 1);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

@media screen and (max-width: 599px) {
	#mv::before {
		height: 0.07rem;
	}
}

#mv::after {
	content: "";
	width: 0;
	height: 0.15rem;
	background-color: #000;
	animation: line_horizon 1.2s 1.2s forwards cubic-bezier(0.77, 0, 0.175, 1);
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 1;
}

@media screen and (max-width: 599px) {
	#mv::after {
		height: 0.07rem;
	}
}

/*=================================
MV PCセット
=================================*/
/* 左上横長ボックス */
#mv .pc_only .mv_wrap01 {
	width: calc((100% / 6) * 5);
	height: calc(100% / 3);
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

/* 一番上の線 */
#mv .pc_only .mv_wrap01::after {
	content: "";
	width: 0;
	height: 0.15rem;
	background-color: #000;
	animation: line_horizon 1.2s 1.2s forwards cubic-bezier(0.77, 0, 0.175, 1);
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 1;
}

#mv .pc_only .mv_wrap01 .mv_ph01-01 {
	width: calc((100% / 5)*2);
	height: 100%;
	position: relative;
	background-image: url(../img/mv_ph01.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

#mv .pc_only .mv_wrap01 .mv_ph01-02 {
	width: calc(100% / 5);
	height: 100%;
	position: relative;
	background-image: url(../img/mv_ph02.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

#mv .pc_only .mv_wrap01 .mv_ph01-02::before {
	content: "";
	width: 0.15rem;
	height: 0;
	background-color: #000;
	animation: line_vertical 1.2s 1.2s forwards cubic-bezier(0.77, 0, 0.175, 1);
	position: absolute;
	top: 0;
	left: -0.075rem;
	z-index: 1;
}

#mv .pc_only .mv_wrap01 .mv_ph01-02::after {
	content: "";
	width: 0.15rem;
	height: 0;
	background-color: #000;
	animation: line_vertical 1.2s 1.2s forwards cubic-bezier(0.77, 0, 0.175, 1);
	position: absolute;
	top: 0;
	right: -0.075rem;
	z-index: 1;
}

#mv .pc_only .mv_wrap01 .mv_ph01-03 {
	width: calc((100% / 5)*2);
	height: 100%;
	position: relative;
	background-image: url(../img/mv_ph03.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* 右縦長ボックス */
#mv .pc_only .mv_wrap02 {
	width: calc(100% / 6);
	height: calc((100% / 3)*2);
	position: absolute;
	top: 0;
	right: 0;
	background-image: url(../img/mv_ph04.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

#mv .pc_only .mv_wrap02::before {
	content: "";
	width: 0.15rem;
	height: 0;
	background-color: #000;
	animation: line_vertical 1.2s 1.2s forwards cubic-bezier(0.77, 0, 0.175, 1);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

/* 左縦長ボックス */
#mv .pc_only .mv_wrap03 {
	width: calc(100% / 6);
	height: calc((100% / 3)*2);
	position: absolute;
	bottom: 0;
	left: 0;
	background-image: url(../img/mv_ph05.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

#mv .pc_only .mv_wrap03::before {
	content: "";
	width: 0.15rem;
	height: 0;
	background-color: #000;
	animation: line_vertical 1.2s 1.2s forwards cubic-bezier(0.77, 0, 0.175, 1);
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 1;
}

/* 右下横長ボックス */
#mv .pc_only .mv_wrap04 {
	width: calc((100% / 6) * 5);
	height: calc(100% / 3);
	position: absolute;
	bottom: 0;
	right: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

#mv .pc_only .mv_wrap04::before {
	content: "";
	width: 0;
	height: 0.15rem;
	background-color: #000;
	animation: line_horizon 1.2s 1.2s forwards cubic-bezier(0.77, 0, 0.175, 1);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

#mv .pc_only .mv_wrap04 .mv_ph04-01 {
	width: calc((100% / 5)*2);
	height: 100%;
	position: relative;
	background-image: url(../img/mv_ph06.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

#mv .pc_only .mv_wrap04 .mv_ph04-02 {
	width: calc(100% / 5);
	height: 100%;
	position: relative;
	background-image: url(../img/mv_ph07.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

#mv .pc_only .mv_wrap04 .mv_ph04-02::before {
	content: "";
	width: 0.15rem;
	height: 0;
	background-color: #000;
	animation: line_vertical 1.2s 1.2s forwards cubic-bezier(0.77, 0, 0.175, 1);
	position: absolute;
	bottom: 0;
	left: -0.075rem;
	z-index: 1;
}

#mv .pc_only .mv_wrap04 .mv_ph04-02::after {
	content: "";
	width: 0.15rem;
	height: 0;
	background-color: #000;
	animation: line_vertical 1.2s 1.2s forwards cubic-bezier(0.77, 0, 0.175, 1);
	position: absolute;
	bottom: 0;
	right: -0.075rem;
	z-index: 1;
}

#mv .pc_only .mv_wrap04 .mv_ph04-03 {
	width: calc((100% / 5)*2);
	height: 100%;
	position: relative;
	background-image: url(../img/mv_ph08.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

/*=================================
MV SPセット
=================================*/
/* 左側縦長ボックス */
#mv .sp_only .mv_wrap01 {
	width: calc(100% / 4);
	height: calc((100% / 4)*3);
	position: absolute;
	top: 0;
	left: 0;
}

#mv .sp_only .mv_wrap01::after {
	content: "";
	width: 0.07rem;
	height: 0;
	background-color: #000;
	animation: line_vertical 1.2s 1.2s forwards cubic-bezier(0.77, 0, 0.175, 1);
	position: absolute;
	top: 0;
	right: -0.035rem;
	z-index: 1;
}

#mv .sp_only .mv_wrap01 .mv_ph01-01 {
	width: 100%;
	height: calc((100% / 3)*2);
	background-image: url(../img/mv_ph05.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}

#mv .sp_only .mv_wrap01 .mv_ph01-01::before {
	content: "";
	width: 0;
	height: 0.07rem;
	background-color: #000;
	animation: line_horizon 1.2s 1.2s forwards cubic-bezier(0.77, 0, 0.175, 1);
	position: absolute;
	bottom: -0.035rem;
	left: 0;
	z-index: 1;
}

#mv .sp_only .mv_wrap01 .mv_ph01-02 {
	width: 100%;
	height: calc(100% / 3);
	background-image: url(../img/mv_ph02.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* 上部中央ボックス */
#mv .sp_only .mv_wrap02 {
	width: calc((100% / 4)*3);
	height: calc(100% / 4);
	position: absolute;
	top: 0;
	left: calc(100% / 4);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

#mv .sp_only .mv_wrap02 .mv_ph02-01 {
	width: calc((100% / 3)*2);
	height: 100%;
	background-image: url(../img/mv_ph01.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}

#mv .sp_only .mv_wrap02 .mv_ph02-01::after {
	content: "";
	width: 0.07rem;
	height: 0;
	background-color: #000;
	animation: line_vertical 1.2s 1.2s forwards cubic-bezier(0.77, 0, 0.175, 1);
	position: absolute;
	top: 0;
	right: -0.035rem;
	z-index: 1;
}

#mv .sp_only .mv_wrap02 .mv_ph02-02 {
	width: calc(100% / 3);
	height: 100%;
	background-image: url(../img/mv_ph07.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

#mv .sp_only .mv_wrap02::before {
	content: "";
	width: 0;
	height: 0.07rem;
	background-color: #000;
	animation: line_horizon 1.2s 1.2s forwards cubic-bezier(0.77, 0, 0.175, 1);
	position: absolute;
	bottom: -0.035rem;
	left: 0;
	z-index: 1;
}

/* 右側縦長ボックス */
#mv .sp_only .mv_wrap03 {
	width: calc(100% / 4);
	height: calc((100% / 4)*3);
	position: absolute;
	bottom: 0;
	right: 0;
}

#mv .sp_only .mv_wrap03::after {
	content: "";
	width: 0.07rem;
	height: 0;
	background-color: #000;
	animation: line_vertical 1.2s 1.2s forwards cubic-bezier(0.77, 0, 0.175, 1);
	position: absolute;
	bottom: 0;
	left: -0.035rem;
	z-index: 1;
}

#mv .sp_only .mv_wrap03 .mv_ph03-01 {
	width: 100%;
	height: calc(100% / 3);
	background-image: url(../img/mv_ph06.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}

#mv .sp_only .mv_wrap03 .mv_ph03-01::before {
	content: "";
	width: 0;
	height: 0.07rem;
	background-color: #000;
	animation: line_horizon 1.2s 1.2s forwards cubic-bezier(0.77, 0, 0.175, 1);
	position: absolute;
	bottom: -0.035rem;
	right: 0;
	z-index: 1;
}

#mv .sp_only .mv_wrap03 .mv_ph03-02 {
	width: 100%;
	height: calc((100% / 3)*2);
	background-image: url(../img/mv_ph04.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}


/* 下部中央ボックス */
#mv .sp_only .mv_wrap04 {
	width: calc((100% / 4)*3);
	height: calc(100% / 4);
	position: absolute;
	bottom: 0;
	left: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

#mv .sp_only .mv_wrap04::before {
	content: "";
	width: 0;
	height: 0.07rem;
	background-color: #000;
	animation: line_horizon 1.2s 1.2s forwards cubic-bezier(0.77, 0, 0.175, 1);
	position: absolute;
	top: -0.035rem;
	left: 0;
	z-index: 1;
}

#mv .sp_only .mv_wrap04 .mv_ph04-01 {
	width: calc(100% / 3);
	height: 100%;
	background-image: url(../img/mv_ph08.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}

#mv .sp_only .mv_wrap04 .mv_ph04-01::after {
	content: "";
	width: 0.07rem;
	height: 0;
	background-color: #000;
	animation: line_vertical 1.2s 1.2s forwards cubic-bezier(0.77, 0, 0.175, 1);
	position: absolute;
	bottom: 0;
	right: -0.035rem;
	z-index: 1;
}

#mv .sp_only .mv_wrap04 .mv_ph04-02 {
	width: calc((100% / 3)*2);
	height: 100%;
	background-image: url(../img/mv_ph03.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

/*=================================
線アニメーション
=================================*/
/* フェードイン */
@keyframes mv_fade_in {
	0% {
		opacity: 0 !important;
	}

	100% {
		opacity: 1;
	}
}

/* 横線アニメ */
@keyframes line_horizon {
	0% {
		width: 0;
	}

	100% {
		width: 100%;
	}
}

/* 縦線アニメ */
@keyframes line_vertical {
	0% {
		height: 0;
	}

	100% {
		height: 100%;
	}
}


/*=================================
固定表示のロゴ
=================================*/
#fixed_title {
	position: fixed;
	width: 5.30rem;
	height: 0.88rem;
	top: calc(50% + 0.44rem);
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	animation: mv_fade_in 5s 0.6s forwards;
	z-index: 1;
}

@media screen and (max-width: 599px) {
	#fixed_title {
		max-width: 1.468rem;
		width: 100%;
		height: auto;
		top: 2.2rem;
		transform: translateX(-50%);
	}
}

#fixed_title img {
	display: block;
}