@charset "utf-8";



/*

******************************************************************

* MJP top.css

******************************************************************

*/

/* --------------------------------------------------

	reset

-------------------------------------------------- */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {

	margin: 0;

	padding: 0;

	border: 0;

	font: inherit;

	font-size: 100%;

	vertical-align: baseline

}



article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {

	display: block

}



body {

	line-height: 1

}



ol,ul {

	list-style: none

}



blockquote,q {

	quotes: none

}



blockquote:before,blockquote:after,q:before,q:after {

	content: "";

	content: none

}



table {

	border-collapse: collapse;

	border-spacing: 0

}



a:hover {

	opacity: 0.9;

}



* {

	-webkit-box-sizing: border-box;

	box-sizing: border-box

}



html {

	word-wrap: break-word;

	-webkit-text-size-adjust: none;

	-webkit-font-smoothing: antialiased;

	height: 100%;

	overflow-y: scroll;

	font-size: 62.5%;

	font-family: "Noto Sans JP", sans-serif;

	background: none;

}



html.Has-modal {

	overflow: hidden !important;

	width: auto;

}



body {

	position: relative;

	overflow-x: hidden;

	background-color: #000;

	color: #fff;

	font-size: 1.6rem;

	line-height: 1.8;

	overflow: hidden;

	color: #4b4b4b;

	line-height: 1.6;

	word-wrap: break-word;

}



a {

	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

	outline: none;

	color: initial;

	text-decoration: none;

}



img {

	max-width: 100%;

	height: auto;

	vertical-align: bottom

}



button {

	cursor: pointer;

}



body.is-nav {

  height: 100%;

  overflow: hidden;

}

.pc-only {

	display: block;

}

.sp-only {

	display: none;

}

#contents-full {

	background: url('../img/conts_bg.png') center top repeat;

	background-size: contain;

	position: relative;

	z-index: 1;

	width: 100%;

}

#contents-full .u-ancher:first-of-type .u-cts__inner {

	padding-top: 3.47vw;

}

.u-cts__inner {

	position: relative;

	/* max-width: 1440px; */

	margin: 0 auto;

}

.c-h1__title {

	line-height: 1;

}

.c-h2__title, .c-h3__title {

  margin: 0 auto;

}

.c-h2__title {

  max-width: 935px;

}

#contents-full .content {

	max-width: 1040px;

	margin: 0 auto;

}

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

	.pc-only {

		display: none;

	}

	.sp-only {

		display: block;

	}

}



/*

******************************************************************

* #loading

******************************************************************/

#loading {

	position: fixed;

	top: 0;

	left: 0;

	z-index: 99;

	display: flex;

	justify-content: center;

	align-items: center;

	width: 100%;

	height: 100%;

	background-image: url(../img/bg_video.png);

	background-color: #000;

	background-repeat: repeat;

	background-size: cover;

}

.loading-wrap {

	position: relative;

	max-width: 436px;

	width: 80%;

	width: 436px;

	background: #000;

}

.loading-message-box {

	position: relative;

	width: 100%;

	overflow: hidden;

}



/*

******************************************************************

* utility

******************************************************************/

/* 要素アクション */

*[data-sf] {

	opacity: 0;

	-webkit-transition: all 0.5s ease;

	transition: all 0.5s ease;

	-webkit-transition-delay: 0.3s;

	transition-delay: 0.3s;

}



*[data-sf="slide-top"] {

	-webkit-transform: translate(0, 100px);

	transform: translate(0, 100px);

}

*[data-sf="slide-left"] {

	-webkit-transform: translate(-300px, 0);

	transform: translate(-300px, 0);

}

*[data-sf="slide-right"] {

	-webkit-transform: translate(300px, 0);

	transform: translate(300px, 0);

}



*.animated[data-sf="fade-in"] {

	opacity: 1;

}

*.animated[data-sf="slide-top"],

*.animated[data-sf="slide-left"],

*.animated[data-sf="slide-right"] {

	opacity: 1;

	-webkit-transform: translate(0, 0);

	transform: translate(0, 0);

}



/*

******************************************************************

* #wrp-all

******************************************************************/

/* ヘッダー */

.l-header {

	width: 100%;

	background-color: #000000;

	position: fixed;

	top: 0;

	left: 0;

	z-index: 98;

}

.l-headerInr {

	height: 108px;

	display: flex;

	align-items: center;

	justify-content: space-between;

	padding: 0 20px;

}

.l-headerLogo {

	max-width: 244px;

}

.l-headerNav-toggle {

	display: none;

	-webkit-appearance: none;

	-moz-appearance: none;

	appearance: none;

	border: none;

	width: 26px;

	height: 18px;

	position: relative;

	background-color: transparent;

}

.l-headerNav-toggle::before, .l-headerNav-toggle::after {

	content: "";

	display: block;

	width: 100%;

	height: 2px;

	background-color: #ffffff;

	transition: all 0.2s;

	position: absolute;

	left: 0;

}

.l-headerNav-toggle::before {

	top: 0;

}

.l-headerNav-toggle::after {

	bottom: 0;

}

.l-headerNav-toggle span {

	display: block;

	width: 100%;

	height: 2px;

	position: absolute;

	top: 0;

	left: 0;

	right: 0;

	bottom: 0;

	margin: auto;

	background-color: #ffffff;

	transition: all 0.1s;

}

.l-headerNav .l-navList {

	display: flex;

	justify-content: space-between;

}

.l-headerNav .l-navList li {

	padding: 0 12px;

}

.l-headerNav .l-navList li a {

	font-size: 1.6rem;

	color: #ffffff;

	position: relative;

	display: block;

}

.l-navList li a:hover:before {

	top: -41px;

}

.l-navList li a::before {

	content: "";

	position: absolute;

	top: -45px;

	left: 0;

	width: 100%;

	height: 4px;

	background-color: #ffffff;

	pointer-events: none;

	transition: top .3s ease;

}

.l-navList li .current {

	pointer-events: none;

}

.l-navList li .current::before {

	content: "";

	position: absolute;

	top: -41px;

	left: 0;

	width: 100%;

	height: 4px;

	background-color: #ffffff;

	pointer-events: none;

	transition: top .3s ease;

}

.l-headerNav-toggle.is-nav + .l-headerNav {

	display: block;

	height: 100vh;

}

.l-headerNav-toggle.is-nav::before {

	transform: rotate(45deg);

	top: 45%;

}

.l-headerNav-toggle.is-nav span {

	opacity: 0;

}

.l-headerNav-toggle.is-nav::after {

	transform: rotate(-45deg);

	bottom: 45%;

}

.l-title {

	height: 40px;

	padding: 10px 0;

	background: rgb(140,5,23);

	background: linear-gradient(90deg, rgba(140,5,23,1) 0%, rgba(98,0,15,1) 100%);

	color: #ffffff;

	position: relative;

}

.l-title::before {

	content: '';

	width: calc((100vw - 1040px) * 0.5);

	height: 14px;

	background-image: url(../img/line.png);

	background-position: right;

	position: absolute;

	top: 50%;

	transform: translateY(-50%);

}

.l-title .u-cts__inner {

	max-width: 1040px;

	padding: 0 20px;

}



/* キービジュアル */

#contents {

	position: relative;

	max-width: 1920px;

	width: 100%;

	height: 100%;

	margin: 0 auto;

}

.contents-kv {

	position: relative;

	height: 100%;

	max-height: 1080px;

	background: #000;

	margin-top: 148px;

}

.contents-kv::after {

	content: "";

	display: block;

	z-index: 1;

	position: absolute;

	bottom: -40px;

	left: 0;

	width: 100%;

	height: 155px;

	background: url('../img/conts_head.png') center top repeat-x;

	background-size: cover;

}

.kv-header {

	position: relative;

}

.kv-header-inner {

	position: absolute;

	top: 0;

	display: flex;

	justify-content: space-between;

	align-items: center;

	width: 100%;

	padding: 2% 2.5%;

	z-index: 5;

	opacity: 0;

}

.detail .kv-header-inner {

	opacity: 1;

}

.main-logo {

	width: 20%;

	max-width: 152px;

}

.main-banner {

	max-width: 500px;

}



.main-bg-movie-box {

	width: 100%;

	transition: .2s !important;

}

.main-bg-movie-inner {

	position: relative;

	display: block;

	aspect-ratio: 1920/1080;

	margin-right: auto;

	margin-left: auto;

	padding-top: 56.25%

}

.main-bg-movie-box video {

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	opacity: 0;

}

.main-bg-movie-box .main-bg-movie-content {

	opacity: 0;

}

.detail .main-bg-movie-box .main-bg-movie-content {

	opacity: 1;

}

.main-bg-kv-title {

	position: absolute;

	bottom: 20%;

	right: 5%;

	width: calc(1019 / 1920 *100%);

	max-width: 1019px;

	z-index: 1;

}

.main-bg-movie-box .main-bg-img img {

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

}



.js-target {

	opacity: 0;

	transition: all 0.5s ease;

}

.js-target.slideIn img{

	transform: translate(0, 200px);

	transition: all 0.5s ease;

}

.js-target.slideIn-right {

	transform: translate(200px, 0);

	transition: all 0.5s ease;

}

.js-target.slideIn-left {

	transform: translate(-200px, 0);

	transition: all 0.5s ease;

}



.js-target.is-active {

	opacity: 1;

	transform: translate(0, 0);

}

.js-target.is-active.slideIn img{

	opacity: 1;

	transform: translate(0, 0);

}





/**kv animation settings**/

.kv-header.is-active .kv-header-inner,

.main-bg-movie-box .main-bg-movie-content.is-active {

	animation: fadeIn 5s linear;

	animation-fill-mode: both;

}

@keyframes fadeIn{

	0%{

		opacity: 0;

	}

	90%{

		opacity: 0;

	}

	100%{

		opacity: 1;

	}

}



/**flame-movie animation settings**/

.action .main-bg-movie-cont {

	animation: flame-baibe .1s linear .55s forwards;

}

@media screen and (min-width: 769px),

(orientation: landscape) {

	.action .main-bg-movie-cont {

		animation: flame-baibe-pc .1s linear .55s forwards;

	}

}

@keyframes flame-baibe {

	0% {

		top: calc(-3px + 2%);

		left: 2px;

	}

	20% {

		top: calc(-5px + 2%);

		left: -2px;

	}

	40% {

		top: calc(-10px + 2%);

		left: 1px;

	}

	60% {

		top: calc(3px + 2%);

		left: -7px;

	}

	80% {

		top: calc(-4px + 2%);

		left: 3px;

	}

	100% {

		top: 2%;

		left: 0;

	}

}

@keyframes flame-baibe-pc {

	0% {

		top: calc(-3px - 5%);

		left: 2px;

	}

	20% {

		top: calc(-5px - 5%);

		left: -2px;

	}

	40% {

		top: calc(-10px - 5%);

		left: 1px;

	}

	60% {

		top: calc(3px - 5%);

		left: -7px;

	}

	80% {

		top: calc(-4px - 5%);

		left: 3px;

	}

	100% {

		top: -5%;

		left: 0;

	}

}



.action .main-bg-movie-box video {

	animation: imageBlur 1s linear .5s forwards;

}

@keyframes imageBlur {

	from {

		opacity: 0;

		-webkit-filter: blur(20px);

		-moz-filter: blur(20px);

		-ms-filter: blur(20px);

		-o-filter: blur(20px);

		filter: blur(20px);

	}

	to {

		opacity: 1;

		-webkit-filter: blur(0px);

		-moz-filter: blur(0px);

		-ms-filter: blur(0px);

		-o-filter: blur(0px);

		filter: blur(0px);

	}

}



/* フッター */

.l-footerTop {

	background: url('../img/footer_bg.png') center no-repeat;

	background-size: cover;

	padding: 89px;

}

.c-footer--banner {

	text-align: center;

	margin-bottom: 32px;

}

.c-footer--banner-cpbnr {

	text-align: center;

	margin-bottom: 32px;

	}



.c-footer--items {

	width: 100%;

	max-width: 444px;

	display: flex;

	align-items: center;

	justify-content: center;

	column-gap: 16px;

	margin: 0 auto;

}

.c-blandLogo {

	display: flex;

	align-items: center;

	column-gap: 16px;

}

.c-copyright {

	color: #ffffff;

}

.c-copyright span {

	font-size: 2.4rem;

}

.c-blandLogo--fields {

	margin-bottom: 10px;

}

.c-blandLogo--bisty {

	margin-top: 10px;

}

.l-footerBottom {

	background: rgb(0,1,2);

	background: linear-gradient(90deg, rgba(0,1,2,1) 0%, rgba(1,66,109,1) 100%);

	text-align: center;

	padding: 30px;

}





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

/* ヘッダー */

	.l-headerInr {

		height: 65px;

		justify-content: center;

		position: relative;

		padding: 0 1.39vw;

	}



	.l-headerNav-toggle {

		display: block;

		position: absolute;

		right: 1.39vw;

	}

	.l-headerNav {

		width: 100%;

		height: 0;

		background-color: #000000;

		position: absolute;

		top: 65px;

		left: 0;

		z-index: 100;

		display: none;

		transition: all 0.2s;

	}

	.l-headerNav .l-navList {

    flex-direction: column;

	}

	.l-headerNav .l-navList li {

		padding: 0;

	}

	.l-headerNav .l-navList li a {

		padding: 4.24vw 3.71vw;

		border-top: 1px solid #b1b1b1;

	}

	.l-headerNav .l-navList li:last-of-type a {

		border-bottom: 1px solid #b1b1b1;

	}

	.l-headerNav .l-navList li a::before {

		display: none;

	}

	.l-headerNav .l-navList li a:active {

		background: rgb(46,0,7);

		background: linear-gradient(90deg, rgba(46,0,7,1) 30%, rgba(4,0,1,1) 100%);

	}

	.l-navList li .current {

		background: rgb(46,0,7);

		background: linear-gradient(90deg, rgba(46,0,7,1) 30%, rgba(4,0,1,1) 100%);

	}

	.l-title {

		display: flex;

		align-items: center;

		padding: 0;

	}

	.l-title .u-cts__inner {

    padding: 0 1.39vw;

		margin: 0;

	}



/* キービジュアル */

	#contents {

		max-width: 1366px;

	}

	.contents-kv {

		margin-top: 105px;

	}

	.contents-kv::after {

		bottom: -10px;

		height: 10vw;

	}

	.main-bg-movie-inner {

		padding-top: 0;

	}

	.main-bg-movie-box .main-bg-img img {

		position: unset;

	}



/* フッター */

	.l-footerTop {

		padding: 12vw;

	}

	.c-footer--banner {

		margin: 0 auto;

		max-width: 150px;

	}

	.c-footer--banner-cpbnr {

		margin: 15px auto;

		max-width: 900px;

	}



	.c-footer--items {

		column-gap: 8px;

	}

	.c-copyright span {

		font-size: 1.6rem;

	}

	.c-blandLogo {

		max-width: 200px;

		column-gap: 8px;

	}

	.l-footerBottom {

		padding: 2.08vw;

	}

}





.l-footer-company {

	/*display: inline-block;*/

	letter-spacing: -0.4em;

	text-align:right;

	vertical-align: middle;

	color: #ffffff;

	margin-left: 10px;

}	



.l-footer-company li {

	display: inline-block;

	letter-spacing: 0;

	margin-left: 15px;

}

.l-footer-companyt li + li {

	margin-left: 15px;

}