@charset "UTF-8";
/* CSS Document */




@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400&display=swap');
/*
font-family: 'Zen Kaku Gothic New', sans-serif;
Regular 400
*/


@font-face {
font-family: "DINPro-Regular";
src: url('font/DINPro-Regular.woff2') format('woff2'), url('font/DINPro-Regular.woff') format('woff');
font-weight: 400;
}
@font-face {
font-family: "DINPro-Medium";
src: url('font/DINPro-Medium.woff2') format('woff2'), url('font/DINPro-Medium.woff') format('woff');
font-weight: 500;
}
@font-face {
font-family: "DINPro-Bold";
src: url('font/DINPro-Bold.woff2') format('woff2'), url('font/DINPro-Bold.woff') format('woff');
font-weight: 700;
}

/*
body:before{content: '';position: fixed;width: 1px;left: 50%;top: 0;bottom: 0;background: #0089FF;z-index: 1000;}
*/

/* ---------- 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, dl, dt, dd, b, u, i, center, 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, textarea, input {margin:0;padding:0;border:0;font-size: 100%;font:inherit;vertical-align: baseline;text-decoration:none;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul, li {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;}
input, textarea, button{-webkit-apparence:none;border:none;background: none;outline: none;}
input:focus, textarea:focus{-webkit-apparence:none;outline: none;border:none;}
img{border:none;outline:none;vertical-align:top;font-size:0;line-height:0;}
img a{border:none;outline: none;}
a:focus{outline:none;}
hr {height:0;margin:0;padding:0;border:0;}
h1, h2, h3, h4, h5, h6, p{margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;text-decoration:none;}
input, textarea, button{-webkit-apparence:none;border:none;background: none;outline: none;}

img{width:100%;height:auto;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translate3d(0,0,0);}

*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-box-shadow:none;box-shadow:none;   outline:none;box-sizing:border-box;margin:0;padding:0;}
/*----------------------------------*/


html,body{width: 100%;height: 100%;}

html{
	font-size: clamp(0.8vw, 14px, 1.15vw);
}

body{
	-webkit-text-size-adjust: 100%;
	font-style: normal;
	color:#000;
	line-height: 1;
	font-weight: 500;
	background: #FFF;
	font-family: "DINPro-Medium", "Zen Kaku Gothic New", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "verdana", sans-serif;
}


.bodyBk{
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url("../images/body_bk.webp") center center no-repeat;
	background-size: cover;
}

#loader-bg{
    display:block;
    position:fixed;
    width:100vw;
    height:100vh;
    top:0px;
    left:0px;
    z-index:10000;
	background: #DBDBDB;
}

.inView{
	position: relative;
	top: 2em;
	opacity: 0;
	-webkit-transition: top 1.2s cubic-bezier(0.33, 1, 0.68, 1), opacity 1.0s;
	transition: top 1.2s cubic-bezier(0.33, 1, 0.68, 1), opacity 1.0s;
}
.inView.view{opacity: 1;top: 0;}


.pcview{display: block;}
.spview{display: none;}


.photoIn{
	position: relative;
	opacity: 0;
	display: block;
	transform-origin: center;
	transition: all 1.0s cubic-bezier(0.25, 1, 0.5, 1);	
}
.photoIn.view{opacity: 1;transform:rotate(0deg);}

.inLeft{left: -2em;top: 3em;transform:rotate(3deg);}
.inLeft.view{left: 0;top:0;}
.inLeft02{left: -2em;top: 3em;}
.inLeft02.view{left: 0;top:0;}
.inLeftSide{left: -3em;transform:rotate(4deg);}
.inLeftSide.view{left: 0;}


.inRight{right: -2em;top: 3em;transform:rotate(-3deg);}
.inRight.view{right: 0;top:0;}
.inRight02{right: -2em;top: 3em;}
.inRight02.view{right: 0;top:0;}
.inRightSide{right: -3em;top: 4em;transform:rotate(-4deg);}
.inRightSide.view{right: 0;top:0;}

.inTop{top: 4em;transform:rotate(-3deg);}
.inTop.view{left: 0;top:0;}
.inTop02{top: 4em;}
.inTop02.view{left: 0;top:0;}



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


.header{
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 2;
}

.header .bk{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 1;
	background: url("../images/mainimage.webp") center center no-repeat;
	background-size: cover;
	width: 100%;
}
.header .lookTitle{
	position: absolute;
	z-index: 10;
	top: 50%;
	left: 4%;
	right: 4%;
	margin: 0 auto;
	text-align: right;
	line-height: 1.1;
	opacity: 0;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
	-webkit-transition:opacity 1.6s;
	transition: opacity 1.6s;
}
.header.start .lookTitle{opacity: 1;}

.header .lookTitle h1{
	font-family: "DINPro-Bold";
	font-weight: 700;
	font-size: 5em;
	color: #FFF;
}
.header .lookTitle h2{
	font-family: "DINPro-Medium";
	font-weight: 500;
	font-size: 2.5em;
	color: #921D22;
}
.header .logo{
	position: absolute;
	z-index: 10;
	top: 2.5em;
	right: 2.5em;
	width: 7.3em;
}





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

.wrapper{
	width: 100%;
	position: relative;
	overflow: hidden;
	z-index: 2;
}

.main{
	width: 1200px;
	max-width: 100%;
	min-width: 80%;
	margin: 0 auto;
	position: relative;
}


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

.area{
	width: 100%;
	position: relative;

}


.photo{position: relative;}
.photo .column{position: relative;}
.photo figure{position: relative;}
.flexCn{display: flex;justify-content: center;}

.area .swiper{overflow: visible;position: relative;background: #0d0d0d;}


.ppA{width: 45.5%;}/*550px*/
.ppB{width: 40.5%;}/*490px*/
.ppC{width: 36.6%;}/*440px*/
.ppD{width: 33.3%;}/*400px*/



.set01{margin-top: 13%;}
.set01 .p01{left: -6%;width: 45.5%;}


.set02{margin-top: 3%;left: 25%;}
.set02 .swiper{-webkit-transform:rotate(-2deg);transform:rotate(-2deg);}
.set02 .swiper-slide.s01{width: 36%;}
.set02 .swiper-slide.s02{width: 36%;}
.set02 .swiper-slide.s03{width: 18%;}
.set02 .specSet{left: -6em;margin-top: 0.5em;}


.set03{margin-top: 10%;z-index: 5;}
.set03 .p01{width: 45.5%;-webkit-transform:rotate(4deg);transform:rotate(4deg);}


.set04{margin-top: -4%;z-index: 10;}
.set04 .p01{width: 36.6%;}
.set04 .p02{
	width: 33.3%;
	margin-left: 3.3%;
	left: 3.3%;
	top: 12em;
	-webkit-transform:rotate(-9deg);
	transform:rotate(-9deg);
}
.set04 .specSet{
/*	width: 73.2%;margin: 1em auto 0;*/
	position: absolute;
	top: calc(100% + 1.5em);
	left: 13.5%;
}


.set05{margin-top: 25%;z-index: 5;}
.set05 .p01{left: -1%;width: 45.5%;-webkit-transform:rotate(-2deg);transform:rotate(-2deg);}


.set06{margin-top: -5%; z-index: 10;}
.set06 .c01{width: 40.5%;}
.set06 .c02{width: 40.5%;padding-top: 13em;}
.set06 .p01{left: -10%;}
.set06 .p02{left:2%;-webkit-transform:rotate(6deg);transform:rotate(6deg);}
.set06 .c01 .specSet{left: -10%;margin-top: 1.5em;}
.set06 .c02 .specSet{left: -5%;}


.set07{margin-top: 12%;}
.set07 .p01{width: 45.5%;-webkit-transform:rotate(-4deg);transform:rotate(-4deg);}
.set07 .p02{
	width: 45.5%;
	padding-right: 8.9%;
	left: -3%;
	top: 24em;
	z-index: 20;
	-webkit-transform:rotate(1deg);
	transform:rotate(1deg);
}
.set07 .specSet{
	position: absolute;
	top: calc(100% + 2.5em);
	left: 6.8%;
}


.set08{margin-top: 28%;}
.set08 .p01{left: 7%;width: 45.5%;-webkit-transform:rotate(-1deg);transform:rotate(-1deg);}


.set09{margin-top: 6%;}
.set09 .cardBox{width: 40%;margin-left: 20%;padding-top: 54%;}
.set09 .specSet{width: 40%;margin: 2em 0 0 20%;}


.set10{margin-top: 12%;}
.set10 .p01{left: 5%; width: 45.5%;-webkit-transform:rotate(3deg);transform:rotate(3deg);}
.set10 .p02{
	width: 45.5%;
	padding-right: 12.2%;
	left: 2%;
	top: 30em;
	z-index: 20;
	-webkit-transform:rotate(-4deg);
	transform:rotate(-4deg);
}
.set10 .specSet{
	position: absolute;
	top: calc(100% + 0.5em);
	left: 8%;
}


.set11{margin-top: 28%;left: -16%;width: 110%/;text-align: right;}
.set11 .swiper-slide.s00{width: 20%;}
.set11 .swiper-slide.s01{width: 40%;}
.set11 .swiper-slide.s02{width: 40%;}
.set11 .specSet{margin-top: 1.5em; display: inline-block;}
.set11 .specSet .spacBox .itemList{text-align: left;}


.set12{margin-top: 8%;}
.set12 .c01{width: 40.5%;}
.set12 .c02{width: 40.5%;padding-top: 30%;z-index: 10;}
.set12 .p01{-webkit-transform:rotate(-3deg);transform:rotate(-3deg);}
.set12 .p02{left: -4%;-webkit-transform:rotate(4deg);transform:rotate(4deg);}
.set12 .c01 .specSet{margin: 2.5em 0 0 1.3em;}
.set12 .c02 .specSet{margin:0.5em 0 0 -3em;}


.set13{margin-top: 11%;}
.set13 .c01{width: 43.5%;z-index: 20;pointer-events: none;}
.set13 .c02{width: 43.5%;padding-top: 23%;z-index: 10;}
.set13 .pw01{left: -10%;-webkit-transform:rotate(1deg);transform:rotate(1deg);}
.set13 .pw02{left: 10%;width: 81%;margin-top: 12%;-webkit-transform:rotate(-6deg);transform:rotate(-6deg);z-index: 30;}
.set13 .pm01{left: 1%;-webkit-transform:rotate(-5deg);transform:rotate(-5deg);}
.set13 .pm02{left: -14%;width: 81%;margin-top: 14%;-webkit-transform:rotate(5deg);transform:rotate(5deg);z-index: 30;}
.set13 .c01 .specSet{margin: 0.5em 0 0 -0.5em;}
.set13 .c02 .specSet{margin: 0.2em 0 0 -7.2em;}


.set14{margin:11% 0 0 5%;z-index: 10;}
.set14 .p01{width: 45.5%;-webkit-transform:rotate(-3deg);transform:rotate(-3deg);}


.set15{margin: -25% 0 0 45%;z-index: 20;}
.set15 .p01{left: 0;width: 39.0%;-webkit-transform:rotate(1deg);transform:rotate(1deg);}
.set15 .specSet{margin: -1.5em 0 0 -7em;}


.set16{margin-top: 8%;}
.set16 .cardBox{width: 40%;margin-left: 20%;padding-top: 54%;}
.set16 .specSet{width: 40%;margin: 2em 0 0 20%;}


.set17{margin-top: 8%;}
.set17 .flexCn{flex-direction: row-reverse;}
.set17 .c01{width: 45.5%;text-align: right;}
.set17 .c02{width: 45.5%;padding-top: 30%;}
.set17 .p01{left: -9%;-webkit-transform:rotate(-3deg);transform:rotate(-3deg);}
.set17 .p02{-webkit-transform:rotate(4deg);transform:rotate(4deg);}
.set17 .c01 .specSet{margin-top:0.5em;left: -2.3em; display: inline-block;}
.set17 .c01 .specSet .spacBox .itemList{text-align: left;}
.set17 .c02 .specSet{margin-top: 0.5em; left: -2em;}


.set18{margin-top: 10%;margin-left: 6%; width: 110%;}
.set18 .swiper-slide.s01{width: 40%;}
.set18 .swiper-slide.s02{width: 40%;}
.set18 .swiper-slide.s03{width: 20%;}



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


.specSet{position: relative;pointer-events: all;}

.specSet .credit{
	cursor: pointer;
	padding-left: 1.2em;
	position: relative;
	display: inline-block;
	overflow: hidden;
	font-size: 1.08em;
	line-height: 1.3em;
}
.specSet .credit span{display: block;}
.specSet .credit::before{
	content: '';
	position: absolute;
	left: 0;
	top: 0.4em;
	width: 0.8em;
	height: 0.5em;
	background: #000;
	clip-path: polygon(0 0, 0% 100%, 100% 50%);
}


@media(min-width: 769px) {
.specSet .credit:hover span{animation: text-out 0.2s forwards, text-in 0.2s 0.2s forwards;}
}

@keyframes text-out {
	0% {transform: translateY(0);}
	100% {transform: translateY(-100%);}
}
@keyframes text-in {
	0% {transform: translateY(100%);}
	100% {transform: translateY(0);}
}
@keyframes line-out {
	0% {
		transform: scaleX(1);
		transform-origin: right;
	}
	100% {
		transform: scaleX(0);
		transform-origin: right;
	}
}
@keyframes line-in {
	0% {
		transform: scaleX(0);
		transform-origin: left;
	}
	100% {
		transform: scaleX(1);
		transform-origin: left;
	}
}



.specSet .spacBox{
	display: none;
	opacity: 1;
	visibility: visible;
}
.specSet .spacBox .itemList{
	margin-top: 1.3em;
	padding-top: 0.8em;
	display: inline-block;
	position: relative;
}
.specSet .spacBox .itemList::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 3em;
	height: 1px;
	background: #000;
}


.specSet .itemList .item{margin-top: 0.8em;}

.specSet .itemList .item a{
	color: #000;
	display: inline-flex;
	column-gap: 0.7em;
	position: relative;
	padding: 0.1em 0;
}
.specSet .itemList .item a.soon{
	pointer-events: none;
	opacity: 0.5;
}


.specSet.right .spacBox .itemList::before{left:auto;right: 0;}
.specSet.right .itemList .item{display: flex;justify-content: flex-end;}
.specSet.right .itemList .item a{justify-content: flex-end;}



.specSet .itemList .item .type{display: block;font-weight: 500;}
.specSet .itemList .item .name{
	display:flex;
	column-gap: 0.6em;
	justify-content:flex-start;
	ont-weight: 400
}
.specSet .itemList .item .name em{margin-left: 0.7em;}


.specSet .close{display: none;}


@media(min-width:769px) {
.specSet .credit:hover::before{background: #921D22;}
.specSet .itemList .item a::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: #000;
	transform-origin: right top;
	transform: scale(0, 1);
	transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.specSet .itemList .item a:hover::before {transform-origin: left top;transform: scale(1, 1);}
}



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


.cardBox{
	/*width:65%;*/
/*	margin-left: auto;
	margin-right: auto;*/
	transform: translate3d(0, 0, 0);
	z-index: 100;
	position: relative;
}
.card{
	position: absolute;
	z-index: 50;
	top: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 100%;
}
.card div{position: relative;}
.card span{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	/*box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .5);*/
}

.card span.front{transform:translate(0%, 0) rotate(-4deg) scale(1.0);}
.card.play span.front{
	animation: cardFront 1.4s ease-in-out normal forwards;
	transform-origin: center;
	transition: 1.4s ease-out;
}
@keyframes cardFront {
0% {transform:translate(0%, 0) rotate(-4deg);}
50% {transform:translate(-50%, 0) rotate(-4deg);}
100% {transform:translate(0%, 0) rotate(-0deg);}
}
.card span.back{transform:translate(0%, 0) rotate(0deg);}
.card.play span.back{
	animation: cardBack 1.4s ease-in-out normal forwards;
	transform-origin: center;
	transition: 1.4s ease-out;
}
@keyframes cardBack {
0% {transform:translate(0%, 0) rotate(0deg);}
50% {transform:translate(50%, 0) rotate(4deg);}
100% {transform:translate(0%, 0) rotate(-4deg);}
}



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


footer{
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

footer .footerIn{}
footer .footerIn h2{
	font-family: "DINPro-Medium";
	font-weight: 500;
	font-size: 1.7em;
	color: #921D22;
	text-align: center;
	line-height: 1.2;
}
footer .footerIn h2 em{
	font-family: "DINPro-Bold";
	font-weight: 700;
	font-size: 2em;
	color: #000;
	display: block;
}



footer .footerIn .store{
	margin-top: 1em;
	text-align: left;
	display: inline-block;
}
footer .footerIn .store .allItems{
	margin-bottom: 0.3em;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
footer .footerIn .store .allItems span{
	display: block;
	width: 0.8em;
	height: 0.5em;
	background: #000;
	margin-left: 0.5em;
	clip-path: polygon(0 0, 0% 100%, 100% 50%);
}
footer .footerIn .store a{
	display: block;
	border: 1px solid #000;
	width: 13.6em;
	font-size: 1.6em;
	letter-spacing: 0.02em;
	margin: 0 auto;
	color: #000;
	padding: 0.5em 0;
	text-align: center;
}
@media(min-width: 769px) {
footer .footerIn .store a{
	-webkit-transition:all 0.4s;transition:all 0.4s;
}
footer .footerIn .store a:hover{
	background: #921D22;color: #FFF;border-color: #921D22;
}
}

footer .footerIn .logo{
	width: 8em;
	margin: 4em auto 1.5em;
}
footer .footerIn .copyright{
	font-size: 0.9em;
	font-family: "DINPro-Regular";
	font-weight: 400;
}