@charset 'UTF-8';
/*フロントページ*/
.loadInit {
	opacity: 0;
	animation: introAnimationInit 5.5s linear 0.1s forwards;
}
@keyframes introAnimationInit {
	0% {
		opacity: 0;
	}
	5% {
		opacity: 0;
	}
	6% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}
.reloaded .loadInit {
	opacity: 1!important;
	animation: inherit!important;
}

/*mainVisual*/
#mainVisual {
	position: relative;
	width: 100%;
	overflow: hidden;
}
#mainVisual .mainSlider {
	width: 100%;
}
#mainVisual .mainSlider li {
	width: 1200px;
	height: 682px;
}
#mainVisual .mainSlider li a {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
}

#mainVisual .mainSlider li a img,
#mainVisual .mainSlider li a > div {
	width: 100%;
	height: 100%;
}
#mainVisual .mainSlider li a > div {
	position: relative;
	display: block;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	z-index: -1;
}
@media screen and (max-width: 1200px){
	#mainVisual .mainSlider li {
		width: 100vw;
		height: 56.834vw;
	}
	#mainVisual .mainSlider li a > div {
		background-size: contain;
	}
}
#mainVisual .mainSlider li a > div > .caption {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 34.375%;
	padding: 0.4em 50px 0;
	/*
	background-color: rgba(35, 35, 35, 0.52);
	*/
	background-color: rgba(0, 0, 0, 0.52);
	box-sizing: border-box;
	z-index: 1;
}
#mainVisual .mainSlider li a > div > .caption .logo {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
}
@media screen and (min-width: 801px) and (max-width: 1500px) {
	#mainVisual .mainSlider li a > div > .caption {
		padding: 0.4em 3.33333333vw 0;
	}
}
@media screen and (max-width: 800px) {
	#mainVisual .mainSlider li a > div {
		background-position: center top;
	}
	#mainVisual .mainSlider li a > div > .caption {
		height: 53vw;
		padding: 4.5vw 5vw 0;
		background-color: #232323;
	}
	#mainVisual .mainSlider li a > div > .caption .flexBlock {
		flex-direction: column;
	}
}
/*キャプションなしバナーのスタイル：ここから*/
#mainVisual .mainSlider li a > div.noCaption > .caption {
	background-color: rgba(0,0,0,0);
}
#mainVisual .mainSlider li a > div.noCaption > .caption .flexBlock > p {
	color: rgba(0,0,0,0);
}
/*キャプションなしバナーのスタイル：ここまで*/
#introAnimation {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	animation: introAnimationFade 5.5s linear 0.1s forwards;
}
.reloaded #introAnimation {
	opacity: 0!important;
	z-index: -1!important;
	animation: inherit!important;
}
@keyframes introAnimationFade {
	0% {
		opacity: 1;
		z-index: 1000;
	}
	75% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		z-index: -1;
	}
}
#introAnimation #introLogo {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	padding-top: 60%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translate(-50%, -50%);
	opacity: 0;
	animation: introAnimationLogoPc 5s linear 0.1s forwards;
}
@keyframes introAnimationLogoPc {
	0% {
		padding-top: 54%;
		opacity: 0;
	}
	25% {
		padding-top: 51.5%;
		opacity: 1;
	}
	100% {
		padding-top: 40%;
		opacity: 0.5;
	}
}
#introAnimation #introCatch {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: auto;
	transform: translate(-50%, -50%);
}
#introAnimation #introCatch span {
	display: none;
	width: 0;
	margin: 0 0.05em;
	line-height: 200%;
	overflow: hidden;
}
#introAnimation #introCatch span:nth-child(1) {
	display: inline-block;
	white-space: nowrap;
	animation: introAnimationCatchPc 8s linear 0.75s forwards;
}
@keyframes introAnimationCatchPc {
	0% {
		width: 0;
		letter-spacing: 0em;
	}
	0.99999% {
		width: 0;
	}
	1% {
		width: 0.9em;
	}
	1.99999% {
		width: 0.9em;
	}
	2% {
		width: 1.37em;
	}
	2.99999% {
		width: 1.37em;
	}
	3% {
		width: 1.56em;
	}
	3.99999% {
		width: 1.56em;
	}
	4% {
		width: 1.85em;
	}
	4.99999% {
		width: 1.85em;
	}
	5% {
		width: 2.5em;
	}
	5.99999% {
		width: 2.5em;
	}
	6% {
		width: 3.2em;
	}
	6.99999% {
		width: 3.2em;
	}
	7% {
		width: 3.35em;
	}
	7.99999% {
		width: 3.35em;
	}
	8% {
		width: 4.15em;
	}
	8.99999% {
		width: 4.15em;
	}
	9% {
		width: 4.64em;
	}
	9.99999% {
		width: 4.64em;
	}
	10% {
		width: 5.15em;
	}
	10.99999% {
		width: 5.15em;
	}
	11% {
		width: 5.9em;
	}
	11.99999% {
		width: 5.9em;
	}
	12% {
		width: 6.7em;
	}
	12.99999% {
		width: 6.7em;
	}
	13% {
		width: 6.85em;
	}
	13.99999% {
		width: 6.85em;
	}
	14% {
		width: 7.2em;
	}
	14.99999% {
		width: 7.2em;
	}
	15% {
		width: 8em;
	}
	15.99999% {
		width: 8em;
	}
	16% {
		width: 8.6em;
	}
	16.99999% {
		width: 8.6em;
	}
	17% {
		width: 9.2em;
	}
	17.99999% {
		width: 9.2em;
	}
	18% {
		width: 9.7em;
	}
	18.99999% {
		width: 9.7em;
	}
	19% {
		width: 10.3em;
	}
	19.99999% {
		width: 10.3em;
	}
	20% {
		width: 10.9em;
	}
	20.99999% {
		width: 10.9em;
	}
	21% {
		width: 11.75em;
	}
	21.99999% {
		width: 11.75em;
	}
	22% {
		width: 100%;
		letter-spacing: 0em;
	}
	100% {
		width: 100%;
		letter-spacing: 0.2em;
	}
}
@media screen and (max-width: 800px) {
	#introAnimation #introLogo {
		top: 42.5%;
		animation: introAnimationLogoSp 5s linear 0.5s forwards;
	}
	#introAnimation #introCatch {
		top: 42.5%;
	}
	#introAnimation #introCatch span {
		display: block;
		margin: 0 auto;
		box-sizing: border-box;
	}
	#introAnimation #introCatch span:nth-child(1) {
		display: none;
	}
	#introAnimation #introCatch span:nth-child(2) {
		animation: introAnimationCatch1sp 8s linear 0.5s forwards;
	}
	#introAnimation #introCatch span:nth-child(3) {
		animation: introAnimationCatch2sp 8s linear 0.5s forwards;
	}
	#introAnimation #introCatch span:nth-child(4) {
		animation: introAnimationCatch3sp 8s linear 0.5s forwards;
	}
	#introAnimation #introCatch span:nth-child(5) {
		animation: introAnimationCatch4sp 8s linear 0.5s forwards;
	}
}
@keyframes introAnimationLogoSp {
	0% {
		padding-top: 100%;
		opacity: 0;
	}
	25% {
		padding-top: 95%;
		opacity: 1;
	}
	100% {
		padding-top: 80%;
		opacity: 0.5;
	}
}
@keyframes introAnimationCatch1sp {
	0% {
		width: 0;
		letter-spacing: 0em;
	}
	0.99999% {
		width: 0;
	}
	1% {
		width: 0.9em;
	}
	1.99999% {
		width: 0.9em;
	}
	2% {
		width: 1.37em;
	}
	2.99999% {
		width: 1.37em;
	}
	3% {
		width: 1.56em;
	}
	3.99999% {
		width: 1.56em;
	}
	4% {
		width: 1.85em;
	}
	4.99999% {
		width: 1.85em;
	}
	5% {
		width: 2.5em;
	}
	5.99999% {
		width: 2.5em;
	}
	6% {
	  width: 100%;
	}
	22% {
		width: 100%;
		letter-spacing: 0em;
	}
	100% {
	  width: 100%;
		letter-spacing: 0.2em;
	}
}
@keyframes introAnimationCatch2sp {
	0% {
		width: 0;
		letter-spacing: 0em;
	}
	5.99999% {
		width: 0;
	}
	6% {
		width: 0.5em;
	}
	6.99999% {
		width: 0.5em;
	}
	7% {
		width: 0.7em;
	}
	7.99999% {
		width: 0.7em;
	}
	8% {
		width: 1.5em;
	}
	8.99999% {
		width: 1.5em;
	}
	9% {
		width: 2em;
	}
	9.99999% {
		width: 2em;
	}
	10% {
		width: 2.5em;
	}
	10.99999% {
		width: 2.5em;
	}
	11% {
		width: 100%;
	}
	22% {
		width: 100%;
		letter-spacing: 0em;
	}
	100% {
		width: 100%;
		letter-spacing: 0.2em;
	}
}
@keyframes introAnimationCatch3sp {
	0% {
		width: 0;
		letter-spacing: 0em;
	}
	11.99999% {
		width: 0;
	}
	12% {
		width: 0.8em;
	}
	12.99999% {
		width: 0.8em;
	}
	13% {
		width: 0.95em;
	}
	13.99999% {
		width: 0.95em;
	}
	14% {
		width: 1.25em;
	}
	14.99999% {
		width: 1.25em;
	}
	15% {
		width: 100%;
	}
	22% {
		width: 100%;
		letter-spacing: 0em;
	}
	100% {
		width: 100%;
		letter-spacing: 0.2em;
	}
}
@keyframes introAnimationCatch4sp {
	0% {
		width: 0;
		letter-spacing: 0em;
	}
	15.99999% {
		width: 0;
	}
	16% {
		width: 0.7em;
	}
	16.99999% {
		width: 0.7em;
	}
	17% {
		width: 1.2em;
	}
	17.99999% {
		width: 1.2em;
	}
	18% {
		width: 1.8em;
	}
	18.99999% {
		width: 1.8em;
	}
	19% {
		width: 2.3em;
	}
	19.99999% {
		width: 2.3em;
	}
	20% {
		width: 2.9em;
	}
	20.99999% {
		width: 2.9em;
	}
	21% {
		width: 3.8em;
	}
	21.99999% {
		width: 3.8em;
	}
	22% {
		width: 100%;
		letter-spacing: 0em;
	}
	100% {
		width: 100%;
		letter-spacing: 0.2em;
	}
}
#introAnimation #btnSkip {
	position: absolute;
	top: 0;
	right: 0;
}
#introAnimation #btnSkip a {
	padding: 1em;
}
/*concept*/
#concept {
	margin-top: 1.25em;
	overflow: hidden;
}
#concept .obj {
	top: 50%;
	width: 50vw;
	padding-top: 45%;
	background-position: center center;
	background-size: 100% auto;
	opacity: 0;
}
#concept .objL {
	left: 0;
	background-image: url('../images/_concept/objL.jpg');
	opacity: 0;
}
#concept .objR {
	right: 0;
	background-image: url('../images/_concept/objR.jpg');
	opacity: 0;
}
#concept.reload .objL {
	opacity: 1;
	transform: translateY(-50%);
	animation: fadeAndSlideInPcLre 0.5s ease 0s forwards;
}
#concept.reload .objR {
	opacity: 1;
	transform: translateY(-50%);
	animation: fadeAndSlideInPcRre 0.5s ease 0s forwards;
}
#concept.action .objL {
	transform: translateY(-45%);
	animation: fadeAndSlideInPcL 0.5s ease 0s forwards;
}
#concept.action .objR {
	transform: translateY(-55%);
	animation: fadeAndSlideInPcR 0.5s ease 0s forwards;
}
#concept .objMain {
	width: 40vw;
	max-width: 600px;
	margin: 0 auto;
	padding: 2.5em;
	box-sizing: border-box;
	background-color: rgba(0, 0, 0, 0.7);
	opacity: 0;
}
#concept .objMain p {
	letter-spacing: 0;
}
#concept.reload .objMain {
	opacity: 1;
	transform: translateY(0);
	animation: fadeAndSlideInPcMainRe 0.5s ease 0s forwards;
}
#concept.action .objMain {
	transform: translateY(5%);
	animation: fadeAndSlideInPcMain 0.5s ease 0s forwards;
}
@media screen and (max-width: 800px) {
	#concept .obj {
		top: 50%;
		width: 50vw;
		height: 100%;
		padding-top: 0;
		background-position: center center;
		background-size: cover;
		opacity: 0;
	}
	#concept .objMain {
		width: 90vw;
		max-width: inherit;
		padding: 2.5em 5vw;
		background-color: rgba(0, 0, 0, 0.5);
	}
	#concept .objMain .lineHeight300 {
		line-height: 240%;
	}
}
@keyframes fadeAndSlideInPcL {
	0% {
		opacity: 0;
		transform: translateY(-45%);
	}
	100% {
		opacity: 1;
		transform: translateY(-50%);
	}
}
@keyframes fadeAndSlideInPcLre {
	0% {
		opacity: 1;
		transform: translateY(-50%);
	}
	100% {
		opacity: 0;
		transform: translateY(-45%);
	}
}
@keyframes fadeAndSlideInPcR {
	0% {
		opacity: 0;
		transform: translateY(-55%);
	}
	100% {
		opacity: 1;
		transform: translateY(-50%);
	}
}
@keyframes fadeAndSlideInPcRre {
	0% {
		opacity: 1;
		transform: translateY(-50%);
	}
	100% {
		opacity: 0;
		transform: translateY(-55%);
	}
}
@keyframes fadeAndSlideInPcMain {
	0% {
		opacity: 0;
		transform: translateY(5%);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes fadeAndSlideInPcMainRe {
	0% {
		opacity: 1;
		transform: translateY(0);
	}
	100% {
		opacity: 0;
		transform: translateY(5%);
	}
}
/*news*/
#news .flexList4 li:nth-child(n + 5) {
	display: none;
}
/*brands*/
#brands .flexBrand li {
	position: relative;
	width: calc(100%/3);
	width: 50%;
	padding-top: 20%;
	/*
	width: 33.333333%;
	padding-top: 13.333333%;
	*/
	padding-top: calc(40%/3);
	background-position-x: center;
	background-repeat: no-repeat;
	background-size: 100% auto;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
#brands .flexBrand li.hover {
	background-size: 105% auto;
	-webkit-transition: all 0.15s ease;
	transition: all 0.15s ease;
}
#brands .flexBrand li span {
	display: block;
	position: absolute;
	bottom: 1em;
	right: 2em;
	margin: 0;
	padding: 0 0 0.8em;
	pointer-events: none;
	z-index: 1;
}
#brands .flexBrand li span::before {
	display: block;
	position: absolute;
	left: 0;
	bottom: 0.4em;
	content: "";
	width: 1.5em;
	height: 1px;
	background-color: #fff;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
#brands .flexBrand li.hover span::before {
	width: 2.25em;
	-webkit-transition: all 0.15s ease;
	transition: all 0.15s ease;
}
#brands .flexBrand li a {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.3);
	background-position: left 2em center;
	background-repeat: no-repeat;
	background-size: auto 60%;
}
#brands .flexBrand li.hover a {
	background-color: rgba(0,0,0,0.15);
}
@media screen and (max-width: 800px) {
	#brands .flexBrand li {
		width: 100%;
		padding-top: 40%;
	}
	#brands .flexBrand li + li {
		margin-top: 1em;
	}
	#brands .flexBrand li span {
		bottom: 1em;
		right: 1em;
	}
	#brands .flexBrand li a {
		background-position: left 1em center;
		background-repeat: no-repeat;
		background-size: 22% auto;
	}
}


.movieWrapper {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding-top: 56.25%;
	overflow: hidden;
}
.movieWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}