@charset "UTF-8";

/* Font
------------------------------------------------------------------ */
@font-face {
	font-family: 'Akkurat-Light';
	src: url('../font/Akkurat-Light.ttf') format('truetype');
}
@font-face {
	font-family: 'Akkurat-Bold';
	src: url('../font/Akkurat-Bold.ttf') format('truetype');
}
.akkurat {
	font-family: 'Akkurat-Light';
}
.akkuratB {
	font-family: 'Akkurat-Bold';
}

/* 全体
------------------------------------------------------------------ */
body {
	animation: fadeIn 2s ease 0s 1 normal;
	-webkit-animation: fadeIn 2s ease 0s 1 normal;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.content-asset {
	font: 13px/1.5em "Hiragino Sans", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight: normal;
	animation: fadeIn 2s ease 0s 1 normal;
	-webkit-animation: fadeIn 2s ease 0s 1 normal;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin: 0 auto;
		z-index: 5;
}

/* 画像切り替え表示 */
@media screen and (min-width: 769px) {	/* PC */
	.pc {
		display: inline-block;
	}
	.sp {
		display: none;
	}
}
@media (max-width: 768px) {	/* SP */
	.pc {
		display: none;
	}
	.sp {
		display: block;
	}
}
/* hover */
@media screen and (min-width: 769px) {	/* PC */
	.linkbtn {
		opacity: 1.0;
		-webkit-transition: all .5s;
		transition: all .5s;
	}
	.linkbtn:hover {
		opacity: 0.7;
	}
}

#holiday-bfp {
	display: none;
}
#holiday-bfpload {
	width: 100%;
	height: 100vh;
	display: block;
}

/* タイトルエリア
------------------------------------------------------------------ */
@media screen and (min-width: 769px) {	/* PC */
	#title {
		width: 100%;
		height: 680px;
		display: block;
		margin: 0px auto;
		padding: 0px;
		background: linear-gradient(#f5f7fb, #ebedf4);
		position: relative;
		overflow: hidden;
	}
	#title .title_inner2 {
		width: 100%;
		height: 680px;
		display: block;
		margin: auto;
		padding: 0px;
		background: url(../img/title_bg_1029.jpg);
		-webkit-background-position: center center;
		background-position: center center;
		-webkit-background-repeat: no-repeat;
		background-repeat: no-repeat;
		-webkit-background-size: 1200px auto;
		background-size: 1200px auto;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		animation-name: titleanim2;
		-webkit-animation-name: titleanim2;
		animation-duration: 5s;
		-webkit-animation-duration: 5s;
		animation-iteration-count: 1;
		-webkit-animation-iteration-count: 1;
		animation-delay: 0.3s;
		-webkit-animation-delay: 0.3s;
		animation-fill-mode: forwards;
		opacity: 0;
		z-index: 2;
	}
	@keyframes titleanim2 {
		0% {
			transform: scale(1.2);
			opacity: 0;
		}
		80% {
			transform: scale(1.0);
			opacity: 1;
		}
		100% {
			transform: scale(1.0);
			opacity: 1;
		}
	}
	#title h1 {
		width: 100%;
		height: auto;
		margin: 0px auto 0px;
		padding: 0px;
		display: block;
		font-size: 36px;
		line-height: 2em;
		letter-spacing: 0.125em;
		color: #5d308d;
		text-align: center;
		position: absolute;
		top: 30px;
		left: 0;
		right: 0;
		z-index: 5;
	}
}
h1 span {
	color: transparent;
	animation: blur 10s ease-out forwards;
}
h1 span:nth-child(1) { animation-delay: 0.1s; }
h1 span:nth-child(2) { animation-delay: 0.2s; }
h1 span:nth-child(3) { animation-delay: 0.3s; }
h1 span:nth-child(4) { animation-delay: 0.4s; }
h1 span:nth-child(5) { animation-delay: 0.5s; }
h1 span:nth-child(6) { animation-delay: 0.6s; }
h1 span:nth-child(7) { animation-delay: 0.7s; }
h1 span:nth-child(8) { animation-delay: 0.8s; }
h1 span:nth-child(9) { animation-delay: 0.9s; }
h1 span:nth-child(10) { animation-delay: 1.0s; }
h1 span:nth-child(11) { animation-delay: 1.1s; }
h1 span:nth-child(12) { animation-delay: 1.2s; }
h1 span:nth-child(13) { animation-delay: 1.3s; }
h1 span:nth-child(14) { animation-delay: 1.4s; }
@keyframes blur {
	0% {text-shadow: 0 0 100px #5d308d; opacity:0;}
	5% {text-shadow: 0 0 90px #5d308d;}
	15% {opacity: 1;}
	20% {text-shadow: 0 0 0px #5d308d;}
	80% {text-shadow: 0 0 0px #5d308d;}
	85% {text-shadow: 0 0 0px #5d308d; opacity: 1;}
	100% {text-shadow: 0 0 0px #5d308d; opacity: 1;}
}

@media (max-width: 768px) {	/* SP */
	#title {
		width: 100%;
		height: 0;
		display: block;
		margin: 0px auto;
		padding-top: calc(990 / 750 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
		position: relative;
		overflow: hidden;
	}
	#title .title_inner2 {
		width: 100%;
		height: 100%;
		display: block;
		margin: auto;
		padding: 0px;
		background: url(../img/title_bg_1029_sp.jpg) center center no-repeat;
		-webkit-background-size: 100% auto;
		background-size: 100% auto;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		animation-name: titleanim2;
		-webkit-animation-name: titleanim2;
		animation-duration: 3s;
		-webkit-animation-duration: 3s;
		animation-iteration-count: 1;
		-webkit-animation-iteration-count: 1;
		animation-delay: 0.3s;
		-webkit-animation-delay: 0.3s;
		animation-fill-mode: forwards;
		opacity: 0;
	}
	@keyframes titleanim2 {
		0% {
			transform: scale(1.2);
			opacity: 0;
		}
		70% {
			transform: scale(1.0);
			opacity: 1;
		}
		100% {
			transform: scale(1.0);
			opacity: 1;
		}
	}
	#title h1 {
		width: 100%;
		height: auto;
		margin: 0px auto 0px;
		padding: 0px 0px 0px 10px;
		display: block;
		font-size: 23px;
		line-height: 2em;
		letter-spacing: 0.1em;
		color: #5d308d;
		text-align: center;
		position: absolute;
		top: 50px;
		left: 0;
		right: 0;
		z-index: 5;
	}
}

/* リードエリア
------------------------------------------------------------------ */
@media screen and (min-width: 769px) {	/* PC */
	#read
	{
		width: 100%;
		max-width: 1000px;
		height: auto;
		margin: 50px auto 70px;
		padding: 0px;
		display: block;
		font-size: 0;
		text-align: center;
	}
	#read p
	{
		width: 100%;
		height: auto;
		margin: 0px auto 45px;
		padding: 0px;
		display: block;
		font-size: 13px;
		line-height: 3em;
		color: #4d4442;
	}
	#read .logo
	{
		width: 100%;
		height: auto;
		margin: 0px auto 70px;
		padding: 0px;
		display: block;
	}
	#read .logo img
	{
		width: 350px;
		height: auto;
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
	}
	#read .logo .cap
	{
		width: 100%;
		height: auto;
		margin: 15px auto 0px;
		padding: 0px;
		display: block;
		font-size: 11px;
		line-height: 2em;
		color: #4d4442;
	}
	#read ul
	{
		width: auto;
		height: auto;
		margin: 0px auto 0px;
		padding: 0px;
		display: block;
		font-size: 0;
		text-align: center;
	}
	#read ul li:nth-child(1)
	{
		width: 241px;
		height: auto;
		margin: 0px auto;
		padding: 0px;
		display: inline-block;
		list-style: none;
	}
	#read ul li:nth-child(1) img
	{
		width: 241px;
		height: auto;
		vertical-align: middle;
	}
	#read ul li:nth-child(2)
	{
		width: 274px;
		height: auto;
		margin: 0px auto;
		padding: 0px;
		display: inline-block;
		list-style: none;
	}
	#read ul li:nth-child(2) img
	{
		width: 274px;
		height: auto;
		vertical-align: middle;
	}
	#read ul li:nth-child(3)
	{
		width: 250px;
		height: auto;
		margin: 0px auto;
		padding: 0px;
		display: inline-block;
		list-style: none;
	}
	#read ul li:nth-child(3) img
	{
		width: 250px;
		height: auto;
		vertical-align: middle;
	}
}
@media (max-width: 768px) {	/* SP */
	#read
	{
		width: 100%;
		height: auto;
		margin: 30px auto 50px;
		padding: 0px;
		display: block;
		font-size: 0;
		text-align: center;
	}
	#read p
	{
		width: 86%;
		height: auto;
		margin: 0px auto 30px;
		padding: 0px;
		display: block;
		font-size: 12px;
		line-height: 2.5em;
		color: #4d4442;
		text-align: left;
	}
	#read .logo
	{
		width: 80%;
		height: auto;
		margin: 0px auto 50px;
		padding: 0px;
		display: block;
	}
	#read .logo img
	{
		width: 100%;
		height: auto;
	}
	#read .logo .cap
	{
		width: 100%;
		height: auto;
		margin: 7px auto 0px;
		padding: 0px;
		display: block;
		font-size: 10px;
		line-height: 2em;
		color: #4d4442;
	}
	#read ul
	{
		width: 100%;
		height: auto;
		margin: 0px auto 0px;
		padding: 0px;
		display: block;
		font-size: 0;
		text-align: center;
	}
	#read ul li:nth-child(1)
	{
		width: calc(140px*0.90);
		height: auto;
		margin: 0px auto;
		padding: 0px;
		display: inline-block;
		list-style: none;
	}
	#read ul li:nth-child(1) img
	{
		width: 100%;
		height: auto;
		vertical-align: middle;
	}
	#read ul li:nth-child(2)
	{
		width: calc(97px*0.90);
		height: auto;
		margin: 0px auto;
		padding: 0px;
		display: inline-block;
		list-style: none;
	}
	#read ul li:nth-child(2) img
	{
		width: 100%;
		height: auto;
		vertical-align: middle;
	}
	#read ul li:nth-child(3)
	{
		width: calc(140px*0.90);
		height: auto;
		margin: 0px auto;
		padding: 0px;
		display: inline-block;
		list-style: none;
	}
	#read ul li:nth-child(3) img
	{
		width: 100%;
		height: auto;
		vertical-align: middle;
	}
}
/* はじまりエリア
------------------------------------------------------------------ */
@media screen and (min-width: 769px) {	/* PC */
	#story
	{
		width: 100%;
		height: 700px;
		margin: 0px auto;
		padding: 0px;
		display: block;
		text-align: center;
		background: rgba(175,177,185,1.0);
		position: relative;
		z-index: 5;
		-webkit-transform: translate3d(0, 0, 100px);
		transform: translate3d(0, 0, 100px);
	}
	#story .inner
	{
		width: 90%;
		max-width: 1000px;
		height: 601px;
		padding: 0px;
		text-align: center;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom :0;
		margin:  auto;
		font-size: 0;
		display:-webkit-box;	/* 中のdiv高さ揃える */
		display:-moz-box;
		display:-ms-box;
		display:-webkit-flexbox;
		display:-moz-flexbox;
		display:-ms-flexbox;
		display:-webkit-flex;
		display:-moz-flex;
		display:-ms-flex;
		display:flex;
		-webkit-box-lines:multiple;
		-moz-box-lines:multiple;
		-webkit-flex-wrap:wrap;
		-moz-flex-wrap:wrap;
		-ms-flex-wrap:wrap;
		flex-wrap:wrap;
		overflow: hidden;
	}
	#story .inner .pic
	{
		width: 481px;
		height: auto;
		margin: 0px auto;
		padding: 0px;
		display: inline-block;
		vertical-align: bottom;
		align-items: center;
	}
	#story .inner .pic img
	{
		width: 100%;
		height: auto;
	}
	#story .inner .text
	{
		width: calc(100% - 491px);
		max-width: 510px;
		height: 601px;
		margin: 0px 0px 0px 10px;
		padding: 0px;
		display: inline-block;
		background: #fff;
		vertical-align: bottom;
		align-items: center;
	}
	#story .inner .text h2
	{
		width: 100%;
		height: auto;
		margin: 50px auto 20px;
		padding: 0px;
		display: block;
		font-size: 24px;
		line-height: 2em;
		color: #231815;
	}
	#story .inner .text p
	{
		width: 100%;
		height: auto;
		margin: 0px auto;
		padding: 0px;
		display: block;
		font-size: 13px;
		line-height: 2.75em;
		color: #4d4442;
	}
	#story .inner .text a
	{
		width: auto;
		height: auto;
		margin: 30px auto 0px;
		padding: 7px 7px;
		display: inline-block;
		font-size: 12px;
		line-height: 1em;
		color: #5d308d;
		border: 1px solid #5d308d;
		background: #fff;
		-webkit-transition: all .3s;
		transition: all .3s;
	}
	#story .inner .text a:hover
	{
		color: #fff;
		border: 1px solid #5d308d;
		background: #5d308d;
	}
}
@media (max-width: 768px) {	/* SP */
	#story
	{
		width: 90%;
		height: auto;
		margin: 0px auto;
		padding: 6% 5%;
		display: block;
		text-align: center;
		background: rgba(175,177,185,0.15);
		position: relative;
		z-index: 5;
		-webkit-transform: translate3d(0, 0, 100px);
		transform: translate3d(0, 0, 100px);
	}
	#story .inner
	{
		width: auto;
		height: auto;
		margin: 0px auto;
		padding: 0px;
		text-align: center;
		font-size: 0;
		display: block;
		overflow: hidden;
		background: #fff;
	}
	#story .inner .pic
	{
		width: 100%;
		height: auto;
		margin: 0px auto 0px;
		padding: 0px;
		display: block;
	}
	#story .inner .pic img
	{
		width: 100%;
		height: auto;
	}
	#story .inner .text
	{
		width: 100%;
		height: auto;
		margin: 0px auto;
		padding: 0px;
		display: block;
	}
	#story .inner .text h2
	{
		width: 100%;
		height: auto;
		margin: 15px auto 15px;
		padding: 0px;
		display: block;
		font-size: 16px;
		line-height: 2em;
		letter-spacing: 0.1em;
		color: #231815;
	}
	#story .inner .text p
	{
		width: 86%;
		height: auto;
		margin: 0px auto 0px;
		padding: 0px;
		display: block;
		font-size: 12px;
		line-height: 2.25em;
		letter-spacing: 0.05em;
		color: #4d4442;
		text-align: left;
	}
	#story .inner .text a
	{
		width: auto;
		height: auto;
		margin: 20px auto 30px;
		padding: 7px 7px;
		display: inline-block;
		font-size: 12px;
		line-height: 1em;
		color: #5d308d;
		border: 1px solid #5d308d;
		background: #fff;
		-webkit-transition: all .3s;
		transition: all .3s;
	}
	#story .inner .text a:hover
	{
		color: #fff;
		border: 1px solid #5d308d;
		background: #5d308d;
	}
}
/* Lineupエリア
------------------------------------------------------------------ */
/* XmasLimited　見出し animation */
@-webkit-keyframes passing-bar{
	0% {
		left: 0;
		right: auto;
		width: 0;
	}
	50% {
		left: 0;
		right: auto;
		width: 100%;
	}
	51% {
		left: auto;
		right: 0;
		width: 100%;
	}
	100% {
		left: auto;
		right: 0;
		width: 0;
	}
}
@keyframes passing-bar{
	0% {
		left: 0;
		width: 0;
	}
	50% {
		left: 0;
		width: 100%;
	}
	51% {
		left: 0;
		width: 100%;
	}
	100% {
		left: 100%;
		width: 0;
	}
}
@-webkit-keyframes passing-txt{
	0% { opacity: 0; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes passing-txt{
	0% { opacity:0; }
	50% { opacity:0; }
	100% { opacity:1; }
}
/* XmasLimited　見出し css */
.passing .passing-box {
	display: block;
	text-align: center;
}
.passing .passing-bar {
	position: relative;
	display: inline-block;
	-webkit-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.passing .passing-bar:before {
	content: '';
	display: inline-block;
	width: 0;
	height: 70%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	background: #5d308d;
}
.passing .passing-txt {
	opacity: 0;
	-webkit-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.effect-slidein.effect-scroll .passing.move .passing-bar:before {
	-webkit-animation: passing-bar 1s ease 0.5s 1 normal forwards;
	animation: passing-bar 1s ease 0.5s 1 normal forwards;
}
.effect-slidein.effect-scroll .passing.move .passing-txt {
	-webkit-animation: passing-txt 0s ease 1.0s 1 normal forwards;
	animation:passing-txt 0s ease 1.0s 1 normal forwards;
}

@media screen and (min-width: 769px) {	/* PC */
	#lineup
	{
		width: 100%;
		max-width: 1000px;
		height: auto;
		margin: 80px auto 0px;
		padding: 0px;
		display: block;
		text-align: center;
		font-size: 0;
	}
	#lineup h2.xmaslimited
	{
		width: 100%;
		height: auto;
		display: block;
		margin: 0px auto 50px;
		padding: 0px;
		font-size: 36px;
		line-height: 1.75em;
		letter-spacing: 0.05em;
		color: #5d308d;
	}
	#lineup h2.items
	{
		width: 100%;
		height: auto;
		display: block;
		margin: 0px auto 50px;
		padding: 0px;
		font-size: 26px;
		line-height: 1em;
		letter-spacing: 0.05em;
		color: #5d308d;
	}
	#lineup h2.xmaslimited .cap
	{
		width: 100%;
		height: auto;
		display: block;
		margin: 0px auto 0px;
		padding: 0px;
		font-size: 20px;
		line-height: normal;
		letter-spacing: 0.125em;
	}
	#lineup .collection
	{
		width: 496px;
		height: 500px;
		margin: 0px auto 2px;
		padding: 0px;
		display: inline-block;
		position: relative;
		z-index: 5;
		-webkit-transform: translate3d(0, 0, 100px);
		transform: translate3d(0, 0, 100px);
		overflow:hidden;
		vertical-align: bottom;
	}
	#lineup .collection.collection1030
	{
		width: 1000px;
		height: 600px;
		margin: 0px auto 2px;
		padding: 0px;
		display: inline-block;
		position: relative;
		z-index: 5;
		-webkit-transform: translate3d(0, 0, 100px);
		transform: translate3d(0, 0, 100px);
		overflow:hidden;
		vertical-align: bottom;
	}
	#lineup .collection img.pic
	{
		width: 100%;
		height: auto;
		 transition:1s all;
	}
	#lineup .collection img.pic:hover
	{
		transform:scale(1.1,1.1);
		transition:1s all;
	}
	#lineup .collection .detail
	{
		width: 100%;
		height: auto;
		display: block;
		position: absolute;
		bottom: 25px;
		left: 0;
		right: 0;
		margin: auto;
		padding: 0px;
	}
	#lineup .collection.collection1030 .detail
	{
		width: 200px;
		height: 100px;
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 17%;
		right: auto;
		margin: auto;
		padding: 15px 0px 0px;
	}
	#lineup .collection .detail-yoko
	{
		width: 230px;
		height: 110px;
		display: block;
		position: absolute;
		bottom: 25px;
		left: auto;
		right: 10px;
		margin: auto;
		padding: 0px;
	}
	#lineup .collection .detail .name	/* name */
	{
		width: 100%;
		height: auto;
		display: block;
		margin: 0px auto 18px;
		padding: 0px;
		font-size: 18px;
		line-height: normal;
		color: #333;
	}
	#lineup .collection .detail .name.textwhite	/* name */
	{
		color: #fff;
	}
	#lineup .collection .detail .name .cap2	/* name */
	{
		width: 100%;
		height: auto;
		display: block;
		margin: 0px auto;
		padding: 0px;
		font-size: 11px;
		line-height: 1.5em;
		letter-spacing: 0.125em;
		color: #333;
	}
	#lineup .collection .detail .btn {
		width: 100%;
		height: 22px;
		margin: 0px auto 0px;
		padding: 0px;
		display: block;
		position: relative;
	}
	#lineup .collection .detail .btninner {
		width: 100%;
		height: auto;
		margin: auto;
		padding: 0px;
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
	}
	#lineup .collection .detail .btn-sn_bl {
		width: 120px;
		height: 22px;
		font-size: 11px;
		line-height: 1.75em;
		color: #333;
		text-decoration: none;
		text-transform: uppercase;
		margin: 0px auto;
		padding: 0px 0px 2px;
		display: inline-block;
		cursor: pointer;
		vertical-align: middle;
		border: 1px solid rgba(51, 51, 51, 0.75);
		box-shadow: inset 0 0 20px rgba(51, 51, 51, 0);
		-webkit-transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1);
		transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1);
	}
	#lineup .collection .detail .btn-sim_bl {
		width: 200px;
		height: 22px;
		font-size: 11px;
		line-height: 1.75em;
		color: #333;
		text-decoration: none;
		text-transform: uppercase;
		margin: 0px auto;
		padding: 0px 0px 2px;
		display: inline-block;
		cursor: pointer;
		vertical-align: middle;
		border: 1px solid rgba(51, 51, 51, 0.75);
		box-shadow: inset 0 0 20px rgba(51, 51, 51, 0);
		-webkit-transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1);
		transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1);
	}
	#lineup .collection .detail.detail-yoko .btn-sn_bl {
		width: 140px;
		height: 22px;
		margin: 0px auto;
		display: block;
	}
	#lineup .collection .detail.detail-yoko .btn-sim_bl {
		width: 140px;
		height: 22px;
		margin: -10px auto 0px;
		display: block;
		letter-spacing: 0.1em;
	}
	#lineup .collection .detail .btn-sn_bl:hover,
	#lineup .collection .detail .btn-sim_bl:hover {
		color: #5d308d;
		border: 1px solid rgba(93,48,141, 1.0);
		box-shadow: inset 0 0 20px rgba(93,48,141, 0.5), 0 0 20px rgba(93,48,141, 0.2);
		opacity: 1.0;
	}
	#lineup .collection .detail .btn-sn {
		width: 120px;
		height: 22px;
		font-size: 11px;
		line-height: 1.75em;
		color: #fff;
		text-decoration: none;
		text-transform: uppercase;
		margin: 0px auto;
		padding: 0px 0px 2px;
		display: inline-block;
		cursor: pointer;
		vertical-align: middle;
		border: 1px solid rgba(255, 255, 255, 0.75);
		box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
		-webkit-transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1);
		transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1);
		margin: auto;
	}
	#lineup .collection .detail .btn-sim {
		width: 200px;
		height: 22px;
		font-size: 11px;
		line-height: 1.75em;
		color: #fff;
		text-decoration: none;
		text-transform: uppercase;
		margin: 0px auto;
		padding: 0px 0px 2px;
		display: inline-block;
		cursor: pointer;
		vertical-align: middle;
		border: 1px solid rgba(255, 255, 255, 0.75);
		box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
		-webkit-transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1);
		transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1);
		margin: auto;
	}
	#lineup .collection .detail .btn-sn:hover,
	#lineup .collection .detail .btn-sim:hover {
		color: #5d308d;
		border: 1px solid rgba(93,48,141, 1.0);
		box-shadow: inset 0 0 20px rgba(93,48,141, 0.5), 0 0 20px rgba(93,48,141, 0.2);
		background: rgba(255,255,255,0.5);
		opacity: 1.0;
	}
}
@media (max-width: 768px) {	/* SP */
	#lineup
	{
		width: 100%;
		height: auto;
		margin: 40px auto 0px;
		padding: 0px;
		display: block;
		text-align: center;
		font-size: 0;
		position: relative;
		z-index: 5;
		-webkit-transform: translate3d(0, 0, 100px);
		transform: translate3d(0, 0, 100px);
	}
	#lineup h2.xmaslimited
	{
		width: 100%;
		height: auto;
		display: block;
		margin: 0px auto 50px;
		padding: 0px;
		font-size: 24px;
		line-height: 1.75em;
		letter-spacing: 0.05em;
		color: #5d308d;
	}
	#lineup h2.items
	{
		width: 100%;
		height: auto;
		display: block;
		margin: 0px auto 50px;
		padding: 0px;
		font-size: 22px;
		line-height: 1em;
		letter-spacing: 0.05em;
		color: #5d308d;
	}
	#lineup h2.xmaslimited .cap
	{
		width: 100%;
		height: auto;
		display: block;
		margin: 0px auto 0px;
		padding: 0px;
		font-size: 14px;
		line-height: normal;
		letter-spacing: 0.1em;
	}
	#lineup .collection
	{
		width: 100%;
		height: calc( 756 / 750 *100%);
		margin: 0px auto -9px;
		padding: 0px;
		display: block;
		position: relative;
		z-index: 5;
		-webkit-transform: translate3d(0, 0, 100px);
		transform: translate3d(0, 0, 100px);
		overflow: hidden;
	}
	#lineup .collection img.pic
	{
		width: 100%;
		height: auto;
		 transition:1s all;
	}
	#lineup .collection img.pic:hover
	{
		transform:scale(1.1,1.1);
		transition:1s all;
	}
	#lineup .collection .detail
	{
		width: 100%;
		height: auto;
		display: block;
		position: absolute;
		bottom: 25px;
		left: 0;
		right: 0;
		margin: auto;
		padding: 0px;
	}
	#lineup .collection .detail-yoko
	{
		width: 210px;
		height: 110px;
		display: block;
		position: absolute;
		bottom: 25px;
		left: auto;
		right: 0px;
		margin: auto;
		padding: 0px;
	}
	#lineup .collection .detail .name	/* name */
	{
		width: 100%;
		height: auto;
		display: block;
		margin: 0px auto 10px;
		padding: 0px;
		font-size: 14px;
		line-height: normal;
		color: #333;
	}
	#lineup .collection .detail .name.textwhite	/* name */
	{
		color: #fff;
	}
	#lineup .collection .detail .name .cap2	/* name */
	{
		width: 100%;
		height: auto;
		display: block;
		margin: 0px auto;
		padding: 0px;
		font-size: 10px;
		line-height: 2em;
		letter-spacing: 0.125em;
		color: #333;
	}
	#lineup .collection .detail .btn {
		width: 100%;
		height: 22px;
		margin: 0px auto 0px;
		padding: 0px;
		display: block;
		position: relative;
	}
	#lineup .collection .detail .btninner {
		width: 100%;
		height: auto;
		margin: auto;
		padding: 0px;
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
	}
	#lineup .collection .detail .btn-sn_bl {
		width: 120px;
		height: 22px;
		font-size: 10px;
		line-height: 2em;
		color: #333;
		text-decoration: none;
		text-transform: uppercase;
		margin: 0px auto;
		padding: 0px 0px 2px;
		display: inline-block;
		cursor: pointer;
		vertical-align: middle;
		border: 1px solid rgba(51, 51, 51, 0.75);
		box-shadow: inset 0 0 20px rgba(51, 51, 51, 0);
		-webkit-transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1);
		transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1);
	}
	#lineup .collection .detail .btn-sim_bl {
		width: 200px;
		height: 22px;
		font-size: 10px;
		line-height: 2em;
		color: #333;
		text-decoration: none;
		text-transform: uppercase;
		margin: 0px auto;
		padding: 0px 0px 2px;
		display: inline-block;
		cursor: pointer;
		vertical-align: middle;
		border: 1px solid rgba(51, 51, 51, 0.75);
		box-shadow: inset 0 0 20px rgba(51, 51, 51, 0);
		-webkit-transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1);
		transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1);
	}
	#lineup .collection .detail .mgn {
		width: 10px;
		height: auto;
		margin: 0px auto;
		padding: 0px 0px 2px;
		display: inline-block;
	}
	#lineup .collection .detail.detail-yoko .btn-sn_bl {
		width: 140px;
		height: 22px;
		margin: 0px auto;
		display: block;
	}
	#lineup .collection .detail.detail-yoko .btn-sim_bl {
		width: 140px;
		height: 22px;
		margin: -10px auto 0px;
		display: block;
		letter-spacing: 0.1em;
	}
	#lineup .collection .detail .btn-sn_bl:hover,
	#lineup .collection .detail .btn-sim_bl:hover {
		color: #5d308d;
		border: 1px solid rgba(93,48,141, 1.0);
		box-shadow: inset 0 0 20px rgba(93,48,141, 0.5), 0 0 20px rgba(93,48,141, 0.2);
		opacity: 1.0;
	}
	#lineup .collection .detail .btn-sn {
		width: 120px;
		height: 22px;
		font-size: 10px;
		line-height: 2em;
		color: #fff;
		text-decoration: none;
		text-transform: uppercase;
		margin: 0px auto;
		padding: 0px 0px 2px;
		display: inline-block;
		cursor: pointer;
		vertical-align: middle;
		border: 1px solid rgba(255, 255, 255, 0.75);
		box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
		-webkit-transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1);
		transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1);
		margin: auto;
	}
	#lineup .collection .detail .btn-sim {
		width: 200px;
		height: 22px;
		font-size: 10px;
		line-height: 2em;
		color: #fff;
		text-decoration: none;
		text-transform: uppercase;
		margin: 0px auto;
		padding: 0px 0px 2px;
		display: inline-block;
		cursor: pointer;
		vertical-align: middle;
		border: 1px solid rgba(255, 255, 255, 0.75);
		box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
		-webkit-transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1);
		transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1);
		margin: auto;
	}
	#lineup .collection .detail .btn-sn:hover,
	#lineup .collection .detail .btn-sim:hover {
		color: #5d308d;
		border: 1px solid rgba(93,48,141, 1.0);
		box-shadow: inset 0 0 20px rgba(93,48,141, 0.5), 0 0 20px rgba(93,48,141, 0.2);
		background: rgba(255,255,255,0.5);
		opacity: 1.0;
	}
}
@keyframes reflect {
	0% { transform: scale(0) rotate(45deg); opacity: 0; }
	10% { transform: scale(0) rotate(45deg); opacity: 0.5; }
	11% { transform: scale(4) rotate(45deg); opacity: 1; }
	50% { transform: scale(50) rotate(45deg); opacity: 0; }
	100% { transform: scale(50) rotate(45deg); opacity: 0; }
}
/* スクロール時のフェードイン
------------------------------------------------------------------ */
@media screen and (min-width: 769px) {	/* PC */
	#read .effect-fade:nth-of-type(2) {
		transition-delay:0.7s;
	}
	#read li.effect-fade:nth-of-type(3) {
		transition-delay:1.1s;
	}
	#read li.effect-fade:nth-of-type(1) {
		transition-delay:0.5s;
	}
	#read li.effect-fade:nth-of-type(2) {
		transition-delay:0.8s;
	}
	#read li.effect-fade:nth-of-type(3) {
		transition-delay:1.1s;
	}
	#story div.effect-fade:nth-of-type(2) {
		transition-delay:0.7s;
	}
	.effect-fade.right-fade {
		transition-delay:0.7s;
	}
}
@media (max-width: 768px) {	/* SP */
	#read .effect-fade:nth-of-type(2) {
		transition-delay:0.7s;
	}
	#read li.effect-fade:nth-of-type(3) {
		transition-delay:1.1s;
	}
	#read li.effect-fade:nth-of-type(1) {
		transition-delay:0.5s;
	}
	#read li.effect-fade:nth-of-type(2) {
		transition-delay:0.8s;
	}
	#read li.effect-fade:nth-of-type(3) {
		transition-delay:1.1s;
	}
}
.effect-fade {
	opacity : 0;
	transform : translate(0, 45px);
	transition : all 1000ms;
	transition-delay: 300ms;
}
.effect-fade.effect-scroll {
	opacity : 1;
	transform : translate(0, 0);
}

/* バナーエリア
------------------------------------------------------------------ */
@media screen and (min-width: 769px) {	/* PC */
	#banner {
		width: 995px;
		height: 360px;
		margin: 80px auto 0px;
		padding: 0;
		display: block;
		text-align: center;
		position: relative;
	}
	#banner a {
		width: 100%;
		height: auto;
		margin: 0px auto;
		box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.1);
		margin: auto;
		position: absolute;
		top:0;
		left:0;
		right0;
		transition : all 0.3s;
	}
	#banner a:hover {
		top:6px;
		box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
	}
	#banner a img {
		width: 100%;
		height: auto;
		vertical-align: bottom;
	}
}
@media (max-width: 768px) {	/* SP */
	#banner {
		width: 95%;
		height: 0;
		margin: 40px auto 30px;
		padding-top: calc( 360 / 750 * 100%);
		display: block;
		text-align: center;
		position: relative;
	}
	#banner a {
		width: 100%;
		height: auto;
		margin: 0px auto;
		box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2);
		margin: auto;
		position: absolute;
		top:0;
		left:0;
		right0;
		transition : all 0.1s;
	}
	#banner a:hover {
		top:6px;
		box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
	}
	#banner a img {
		width: 100%;
		height: auto;
		vertical-align: bottom;
	}
}

/* シェアボタンエリア
------------------------------------------------------------------ */
@media screen and (min-width: 769px) {	/* PC */
	#share
	{
		width: 100%;
		margin: 120px auto 0px;
		padding: 0px 0px 0px;
		overflow: hidden;
	}
	#share ul
	{
		margin: 0px auto 0px;
		padding: 0px;
		list-style: none;
		font-size: 0;
		text-align: center;
	}
	#share ul li
	{
		width: 40px;
		height: 40px;
		margin: 0px 10px 0px 0px;
		padding: 0px;
		display: inline-block;
	}
	#share ul li.mds {
		width: 100%;
		height: 30px;
		margin: 0px auto;
		padding: 0px;
		display: block;
		font-size: 14px;
		line-height: 1em;
		letter-spacing: 0.125em;
		color: #5d308d;
		text-align: center;
	}
	#share ul li a img
	{
		width: 30px;
		height: auto;
	}
	#share ul li:last-child a
	{
		padding: 30px 0px 0px;
		overflow: hidden;
		height: 0px !important;
		height /**/:30px;
		background: url(../img/icon_sns_line.png) no-repeat left top;
		-webkit-background-size: 100% auto;
		background-size: 100% auto;
		margin: 0px auto;
		width: 30px;
		display: block;
	}
}
@media (max-width: 768px) {	/* SP */
	#share
	{
		width: 100%;
		margin: 60px auto 0px;
		padding: 0px 0px 0px;
		overflow: hidden;
	}
	#share ul
	{
		margin: 0px auto 0px;
		padding: 0px;
		list-style: none;
		font-size: 0;
		text-align: center;
	}
	#share ul li
	{
		width: 40px;
		height: 40px;
		margin: 0px 10px 0px 0px;
		padding: 0px;
		display: inline-block;
	}
	#share ul li.mds {
		width: 100%;
		height: 30px;
		margin: 0px auto;
		padding: 0px;
		display: block;
		font-size: 14px;
		line-height: 1em;
		letter-spacing: 0.125em;
		color: #5d308d;
		text-align: center;
	}
	#share ul li a img
	{
		width: 30px;
		height: auto;
	}
	#share ul li:last-child a
	{
		padding: 30px 0px 0px;
		overflow: hidden;
		height: 0px !important;
		height /**/:30px;
		background: url(../img/icon_sns_line.png) no-repeat left top;
		-webkit-background-size: 100% auto;
		background-size: 100% auto;
		margin: 0px auto;
		width: 30px;
		display: block;
	}
}