@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-anchor {
	from {
		opacity: 0;
		transform: translateY(-74px);
	}
	to {
		opacity: .74;
		transform: translateY(0);
	}
}
@keyframes fadein-caption {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes fadein-img {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes text {
	from {
		opacity: 0;
		transform: translateX(-500px);
	}
	to {
		opacity: 1;
		transform: translate(0);
	}
}
/*@keyframes arrow {
	0% {
		opacity: 0;
	}
	100% {
		opacity: .7;
	}
}*/
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 {
	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-11 {
	background: #908fb0;
}
body.col-12 {
	background: #252845;
}
body.col-13 {
	background: #1d1a20;
	box-shadow: none;

}

/*---------------------
.top
-----------------------*/
.top {
	position: relative;
	background: cover;
	width: 100%;
	height: 280px;
	padding: 0;
	margin: 0 auto;
	overflow-x: hidden;
}
.top .title {
	position: absolute;
	left: 60%;
	bottom: 0;
	transform: translate(-48%, -60%);
	width: 100%;
	line-height: 1.6em;
}
.top .title p {
	font-size: .7rem;
	letter-spacing: .11rem;
}
.top .title h1 {
	font-size: .8rem;
	font-weight: 300;
	letter-spacing: .2rem;
}
.top .title span {
	font-size: .8rem;
	letter-spacing: .19rem;
}
.top .sub  {
	position: absolute;
	left: 12%;
	top: 40%;	
	padding: 0;
}
.top .sub p {
	font-size: .5rem;
	text-align: left;
}

/*---------------------
.sp-detail
-----------------------*/
.sp-detail {
	width: 100%;
	max-width: 1366px;
	height: auto;
	margin: 40px auto 0;
	padding: 0;
	text-align: center;
	font-weight: 300;
	animation: fadein-caption 2s ease backwards;
}
.sp-detail ul {
	display: table;
	width: 84%;
	margin: 0 auto;
	padding: 0;
}
.sp-detail li {
	display: table-cell;
	padding: 5%;
	animation: fadein-caption 2s ease backwards;
}
.sp-detail img {
	width: 100%;
	height: auto;
	margin: 0 auto 20px;
	filter: drop-shadow(0 10px 10px rgba(0,0,0,0.4));
	animation: fadein-img 2s ease backwards;
}
body.col-13 .sp-detail img {
	filter: none;	
}
.sp-detail li p {
	font-size: .6rem;
	text-align: left;
	letter-spacing: .1rem;
}
/*---------------------
.caption-2
-----------------------*/
.caption-2 {
	width: 52%;	
	margin: 60px auto 0;
	padding-bottom: 60px;
	font-size: .7rem;
	text-align: justify;
	/*border-bottom: 1px solid #707070; */
	animation: fadein-caption 4s ease backwards;
}
.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;
	text-align: justify; /*left*/
}
/*---------------------
.next
-----------------------*/
.next {
	display: table;
	width: 40%;
	height: auto;
	margin: 0 auto;
	text-align: center;
	padding: 60px 0 120px 0;
	color: #FEF4F4;
	animation: fadein-caption 4s ease backwards;
}
.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: .5rem;
	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;
}
.top {
	height: 200px;
}
.top .sub {
	top: 32%;
}	
.top .sub p {
	font-size: .7rem;
}
.top .title h1 {
	font-size: .84rem;
}
.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 {
}
.pc-detail img.col-11 {
	filter: drop-shadow(0 10px 10px rgba(80,80,130,0.6));
}
.sp-detail {
	margin: 74px auto 0;
}
.sp-detail ul {
	width: 100%;
}
.sp-detail li {
	display: block;
	width: 74%;
	margin: 0 auto;
	padding: 0;
}
.sp-detail  img {
	bottom: 0;
	margin: 0 auto 40px;
	filter: drop-shadow(0 4px 6px rgba(0,0,0,0.05));
}
.sp-detail img.col-11 {
	filter: drop-shadow(0 4px 6px rgba(80,80,130,0.6));
}
.caption-2 {
	width: 74%;
}
.next {
	display: none;
}
.next-sp {
	display: table;
	width: 80%;
	height: auto;
	margin: 0 auto;
	text-align: center;
	padding: 40px 0 120px 0;
	color: #FEF4F4;
	animation: fadein-caption 4s ease backwards;
}
.next-sp li {
	display: table-cell;
	padding: 10px;
	font-size: .8rem;
}
.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 2.4s ease-in-out infinite;
}
.next-sp li.arrow.prev {
	transform: rotate(-180deg);
}
.next-sp li:hover {
	color: #CBC4C9;
}
.next-sp a {
	padding: 20px;
}
}