@charset "UTF-8";

* {
	padding: 0;
	margin: 0;
}
::selection {
	color: #e1ccf2;
}
@keyframes fadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
	0%{opacity:0}
	100% {opacity:1}
}
@keyframes fadein-caption {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes fadein-img {
	from {
		opacity: 0;
		transform: translateY(40px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
/*@keyframes arrow {
	0% {
		opacity: 0;
	}
	100% {
		opacity: .7;
	}
	from {
		opacity: 0;
		transform: translateX(0);
	}
	to {
		opacity: .7;
		transform: translateX(40px);
	}
}*/
a {
	text-decoration: none;
	transition: .417s ease-in-out;
	-webkit-transition: .417s ease-in-out;
	-moz-transition: .417s ease-in-out;
	-o-transition: .417s ease-in-out;
	-ms-transition: .417s ease-in-out;
	outline:none;
	color: #CBC4C9;	
}
img {
	margin: 0 auto;
	padding: 0;
	pointer-events: none;
	-webkit-touch-callout: none;
	-moz-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}
li {
	list-style-type: none;
}
@media print {
	body {
		display:none
	}
}
body {
	position: relative;
	background: #2F2F2F;
	width: 100vw;
	height: 100vh;
	margin: 0 auto;
	padding: 0;
	overflow: auto;
	color: #CBC4C9;
	font-size: 62.5%;
	font-family: UniversLTPro-45Light, sans-serif;
	font-weight: 300;
	line-height: 1.6rem;	
	letter-spacing: .14rem;
	animation: fadeIn 3s ease-in-out 0s 1 normal;
	-webkit-animation: fadeIn 3s ease-in-out 0s 1 normal;
	overscroll-behavior: none;
}
body.col-1 {
	background: #1D0607;
}
body.col-2 {
	background: #2D2C36;
}
body.col-3 {
	background: #5B5D5D;
}
body.col-4 {
	background: #5f5b5d;
}
body.col-5 {
	background: #343234;	
}
body.col-6 {
	background: #7F817F;	
} 
body.col-7 {
	background: #2F2F2F;
}
body.col-8 {
	background: #4E4D4E;
}
body.col-9 {
	background: #F7F7FA;
}
body.col-10 {
	background: #959595;
}
body.col-11 {
	background: #fff;
	color: #5f5b5d;
} 
.content {
	text-align: center;
}
.content img {
	width: ;
}
.content video {
	margin: 0 auto;
	padding: 20px 0 50px 0;/*180px 0 50px 0*/
	vertical-align: middle;
	width: 80%;
	height: auto;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none;	
}
.content video img {
	padding: 0;
	margin: 0 auto;
}
/*---------------------
#caption
-----------------------*/
#caption {
	margin: 0 auto;
	padding-top: 140px;
}
#caption .title {
	width: 50%;	
	margin: 0 auto;
	border-bottom: 1px solid #707070;
	text-align: center;	
}
#caption .title p {
	font-size: 1em;
	padding-bottom: 10px;
}
#caption .title h2 {
	font-size: .5em;
	font-weight: 300;
	padding-bottom: 20px;	
}
#caption .element {
	width: 36%;
	margin: 0 auto;
	padding-top: 20px;	
}
#caption .element p {
	margin-bottom: 8px;
}
#caption .element ul {
	position: relative;
	display: table;
	margin: 0 0 10px 28px;
	font-size: .47em;
}
#caption .element li.line {
	position: absolute;
	top: 10%;
	left: -2px;
	width: 10px;
	height: 10px;
	display: table-cell;		
	border: 1px solid #707070;
	border-width: 0 0 1px 1px;	
}
#caption .element li.type {
	display: table-cell;	
	position: relative;	
	padding-left: 20px;	
}

/*---------------------
.pc-detail
-----------------------*/
.pc-detail {
	width: 100%;
	max-width: 1366px;
	height: auto;
	margin: 200px auto 0;
	padding: 0;
	text-align: center;
	font-weight: 300;
}
.pc-detail h3 {
	font-size: .5rem;
	font-weight: 300;
	padding-bottom: 20px;
	animation: fadein-caption 4s ease backwards;
}
.pc-detail h3.artwork {
	width: 80%;
	font-size: .7em;
	margin: 0 auto;
	text-align: left;
	padding-bottom: 27%;
} 
.pc-detail img {
	width: 68%;
	height: auto;
	margin: 0 auto 100px;
	filter: drop-shadow(0 10px 40px rgba(0,0,0,0.9));
	animation: fadein-img 4s ease backwards;
}
.pc-detail img.col-3 {
	filter: drop-shadow(0 10px 40px rgba(0,0,0,0.4));
}
.pc-detail img.col-4 {
	filter: drop-shadow(0 10px 40px rgba(0,0,0,0.1));
}
.pc-detail img.col-11 {
	filter: drop-shadow(0 10px 40px rgba(80,80,130,0.6));
}
.pc-detail.col-top li img.col-artwork {
	width: 80%;
	margin: 0 auto;
	filter: none;
}

/*---------------------
.sp-detail
-----------------------*/
.sp-detail {
	width: 100%;
	max-width: 1366px;
	height: auto;
	margin: 0 auto;
	padding: 0;
	text-align: center;
	font-weight: 300;
}
.sp-detail h3 {
	font-size: .5em;
	font-weight: 300;
	padding-bottom: 20px;
	animation-name: fadein;
	animation-duration: 2s;
	animation: fadein-caption 8s ease backwards;	
}
.sp-detail ul {
	display: table;
	width: 78%;
	margin: 0 auto;
	padding: 0;
}
.sp-detail li {
	display: table-cell;
	padding: 5% 8%;
}
.sp-detail.col-top li {
	padding: 3% 8%;
}
.sp-detail li img {
	width: 100%;
	height: auto;
	margin: 0 auto 20px;
	filter: drop-shadow(0 10px 10px rgba(0,0,0,0.6));
	animation: fadein-img 8s ease backwards;
	display: block;
}
.sp-detail.col-top li img {
	filter: drop-shadow(0 10px 10px rgba(0,0,0,0.3));
}
.sp-detail.col-top li img.col {
	padding-bottom: 100px;
}
.sp-detail.col-top li img.col-artwork {
	padding-bottom: 300px;
	filter: none;
}
.sp-detail img.col-3 {
	filter: drop-shadow(0 10px 10px rgba(0,0,0,0.24));
}
.sp-detail img.col-4 {
	filter: drop-shadow(0 10px 10px rgba(0,0,0,0.1));
}
/*---------------------
.caption-2
-----------------------*/
.caption-2 {
	width: 52%;	
	margin: 60px auto 0;
	padding-bottom: 60px;
	font-size: .7rem;	
	/*border-bottom: 1px solid #707070;*/
	animation: fadein-caption 4s ease backwards;
}
.caption-2.list {
	border: none;
}
.caption-2 ul {
	display: table;
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 0;
	animation: fadein-caption 4s ease backwards;
}
.caption-2 li {
	list-style: none;
	display: table-cell;
	height: auto;
	padding: 0;
	vertical-align: middle;
	animation: fadein-caption 4s ease backwards;
}
.caption-2 li.btn {
	width: 2%;
	animation: fadein-caption 4s ease backwards;
}
.caption-2 li a.btn {	
	margin: 0 auto;
	display: block;
	width: 28px;
	height: auto;
	padding: 16px 18px 18px 20px;
	border-radius: 50px;
	line-height: 1.4em;
	text-align: center;
    letter-spacing: .1rem;	
	border: 1px solid rgba(203,196,201,0.7);
	text-decoration: none;
	color: #FEF4F4;
	text-shadow:  0 0 10px rgba(254, 244, 244, 0.4);
}
.caption-2 li a.btn:hover {
	color: #e8f1fd;
	border:1px solid rgba(203,196,201,0.2);/*#2F2F2F*/
	text-shadow: -2px 0 2px rgba(254, 244, 244, 0.7),
	2px 0 2px rgba(254, 244, 244, 0.7);	
}
.caption-2 li.col-3 a.btn:hover {
	border:1px solid rgba(203,196,201,0.2);	
}
.caption-2 li.col-4 a.btn:hover {
	border:1px solid rgba(203,196,201,0.2);	
}
.caption-2 li.text {
	width: 100%;
	padding-left: 40px;
	animation: text 3s ease backwards;
}
.caption-2.list li.text {
	padding-left: 60px;
}
.caption-2 li p {
	display: table-cell;
	text-align: justify; /*left*/
	height: auto;
	animation: fadein-caption 4s ease backwards;
}
/*---------------------
.next
-----------------------*/
.next {
	display: table;
	width: 40%;
	height: auto;
	margin: 0 auto;
	text-align: center;
	padding: 60px 0 120px 0;
	color: #FEF4F4;
	animation-name: fadein-caption;
	animation-duration: 4s;	
}
.next li {
	display: table-cell;
	padding: 10px;
	font-size: .7rem;	
}
.next li.arrow {
	-webkit-transition: transform .2s ease-in-out;
	-mos-transition: transform .2s ease-in-out;
	-ms-transition: transform .2s ease-in-out;
	-o-transition: transform .2s ease-in-out;
	transition: transform .2s ease-in-out;
	-webkit-transform: rotate(-90deg);
	-mos-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);
	background: url("img/arrow.png") center center no-repeat;
	background-size: 100% auto;
	width: 5px;
	margin: 20px;
}
.next li.arrow.prev {
	transform: rotate(-270deg);
}
.next a {
	padding: 20px;
}
.next li:hover{
	-webkit-transition: transform .04s ease-in-out;
	-mos-transition: transform .04s ease-in-out;
	-ms-transition: transform .04s ease-in-out;
	-o-transition: transform .04s ease-in-out;
	transition: transform .04s ease-in-out;
	transform: rotate(360deg);
	text-shadow: -2px 0 2px rgba(254, 244, 244, 0.6),
	-2px 0 2px rgba(254, 244, 244, 0.6);	
	color: #CBC4C9;
}
.next li.arrow:hover,
.next li.arrow.prev:hover {
	-webkit-transition: transform .04s ease-in-out;
	-mos-transition: transform .04s ease-in-out;
	-ms-transition: transform .04s ease-in-out;
	-o-transition: transform .04s ease-in-out;
	transition: transform .04s ease-in-out;
	transform: rotateX(-90deg);	
}
.next-sp {
	display: none;
}
footer {
	margin: 0 auto;	
	font-size: .5em;
	text-align: center;
	padding-bottom: 40px;
	letter-spacing: .1rem;	
}

/*--------------------
sp：
----------------------*/
@media screen and (max-width:800px) {
body {
		animation: fadeIn 4s ease-in-out 0s 1 normal;
	-webkit-animation: fadeIn 4s ease-in-out 0s 1 normal;
}
.content video {
	padding: 20px 0 30px 0;/*120px 0 30px 0*/
	width: 78%;
}
#caption {
	padding-top: 90px;
}
#caption .title {
	width: 74%;
}
#caption .element {
	width: 64%;
}
#caption .element p {
	margin-bottom: 12px;
}
#caption .element ul {
	margin: 0 0 12px 28px;
	font-size: .64rem;
}
.pc-detail {
	margin: 80px auto;
}
.pc-detail img {
	width: 75%;
	margin: 0 auto 40px;
filter: drop-shadow(0 10px 10px rgba(0,0,0,0.2));
}
.pc-detail img.col-3 {
}
.pc-detail img.col-4 {
}
.sp-detail img {
	filter: drop-shadow(0 4px 6px rgba(0,0,0,0.05));
}
.sp-detail ul li {
	display: block;
	width: 100%;/* 78% 62% */
	margin: 0 auto;
	padding: 0;
}
.sp-detail.col-top li {
	padding: 0;
}
.sp-detail.col-top li img {
	margin: 0 auto;
	filter: drop-shadow(0 7px 7px rgba(0,0,0,0.4));
}
.sp-detail.col-top li img.first {
	padding-bottom: 80px;
}
.caption-2 {
	width: 74%;
}
.next {
	display: none;
}
.next-sp {
	display: table;
	width: 80%;
	height: auto;
	margin: 0 auto;
	text-align: center;
	padding: 0 0 120px 0;
	color: #FEF4F4;
	animation: fadein-caption 4s ease backwards;
}
.next-sp li {
	display: table-cell;
	padding: 10px;
	font-size: .84rem;
}
.next-sp li.arrow {
	-webkit-transition: transform .2s ease-in-out;
	-mos-transition: transform .2s ease-in-out;
	-ms-transition: transform .2s ease-in-out;
	-o-transition: transform .2s ease-in-out;
	transition: transform .2s ease-in-out;
	background: url("img/arrow-sp.png") center center no-repeat;
	background-size: 92% auto;
	margin: 20px;
	animation: arrow 2s linear infinite;
}
.next-sp li.arrow.prev {
	transform: rotate(-180deg);
}
.next-sp li:hover {
	color: #CBC4C9;
}
.next-sp a {
	padding: 20px;
}
.caption-2 li a.btn {
	font-size: 1.2em;
	width: 32px;
}
.caption-2 li.text {
	padding-left: 35px;
}
.caption-2.list li.text {
	padding-left: 0;
}
}