@charset "UTF-8";

/*-------------------------
BASE
-------------------------*/
html {
	font-family: 'Helvetica',
	'Hiragino Kaku Gothic Pro',
	'Meiryo',sans-serif;
	font-size: 62.5%;
	overflow: auto;
}
body {
	/*min-width: 980px;*/
	min-height: 100vh;
	font-size: 1.4rem;
	overflow: hidden;
}
/*img {
	width: 100%;
	height: auto;
	image-rendering: -webkit-optimize-contrast;
}*/
a.anchor {
	display: block;
	padding-top: 100px;
	margin-top: -100px;
}

/*#mainVisual > #plusBtn a,
#topBanner ul li a,
#footRadio a {
	transition: all 0.5s;
}
#mainVisual > #plusBtn a:hover,
#topBanner ul li a:hover,
#footRadio a:hover {
	opacity: 0.7;
}*/

.remove_cookie {
	position: absolute;
	top: 50px;
	left: 50px;
	z-index: 50;
	display: inline-block;
	padding:10px;
	background-color: #FFF;
}


/*-------------------------
LAYOUT
-------------------------*/
#wrap {
	width: 100%;
	position: relative;
	/*transition: all 0.6s;*/
}
#wrap.wait {
/*	-ms-filter: blur(6px);
	filter: blur(6px);*/
}
#wrap.start {
	/*filter: none;*/
	opacity: 1.0;
}

header {
	position: static;
}

main {
	z-index: 10;
	width: 100%;
}
footer {
	position: relative;
	text-align: center;
	padding: 80px 0;
	background: #d81b39;
	border-top: solid 2px #4d1c24;
}

@media screen and (min-width: 1025px) {
	header {
		position: fixed;
		z-index: 50;
		width: 100%; height: 75px;
		background: rgba(213,27,56,0.9);
		border-bottom: solid 2px #4d1c24;
		box-shadow: 0 11px 20px rgba(85,75,64,0.2);
	}
}
/*-------------------------
HEADER
-------------------------*/
#global {
	position: fixed;
	top: 0; bottom: 0; left: -100%;
	z-index: 70;
	width: 50%;
	padding-top: 10%;
	background: rgba(213,27,56,0.9);
	border-right: solid 2px #4d1c24;
	box-shadow: 5px 0 5px rgba(85,75,64,0.2);
	transition: all 0.5s;
	opacity: 0;
}
.open #global {
	left: 0;
	opacity: 1;
}
#global nav ul {
	width: 160px;
	margin: 0 auto;
}
#global nav ul li {
	width: 160px; height: 60px;
	transition: all 0.4s;
}
#global nav ul li.gMenu1 {
	background: url(../img/top/gmenu01.png?v1)no-repeat center top;
}
#global nav ul li.gMenu2 {
	background: url(../img/top/gmenu02.png?v1)no-repeat center top;
}
#global nav ul li.gMenu3 {
	background: url(../img/top/gmenu03.png?v1)no-repeat center top;
}
#global nav ul li.gMenu4 {
	background: url(../img/top/gmenu04.png?v1)no-repeat center top;
}
#global nav ul li.gMenu5 {
	background: url(../img/top/gmenu05.png?v1)no-repeat center top;
}
#global nav ul li.gMenu6 {
	background: url(../img/top/gmenu06.png?v1)no-repeat center top;
}
#global nav ul li.gMenu7 {
	margin-bottom: 20px;
	background: url(../img/top/gmenu07.png?v1)no-repeat center top;
}
#global nav ul li.gMenu8 {
	height: 90px;
	background: url(../img/top/b_shopguide_1.png?v1)no-repeat center bottom;
}
#global nav ul li a {
	display: block;
	width: 100%; height: 100%;
	text-indent: -9999px;
	transition: all 0.4s;
	opacity: 0.0;
}
#global nav ul li.gMenu1 a {
	background: url(../img/top/gmenu01.png?v1)no-repeat center -82px;
}
#global nav ul li.gMenu2 a {
	background: url(../img/top/gmenu02.png?v1)no-repeat center -82px;
}
#global nav ul li.gMenu3 a {
	background: url(../img/top/gmenu03.png?v1)no-repeat center -82px;
}
#global nav ul li.gMenu4 a {
	background: url(../img/top/gmenu04.png?v1)no-repeat center -82px;
}
#global nav ul li.gMenu5 a {
	background: url(../img/top/gmenu05.png?v1)no-repeat center -82px;
}
#global nav ul li.gMenu6 a {
	background: url(../img/top/gmenu06.png?v1)no-repeat center -82px;
}
#global nav ul li.gMenu7 a {
	background: url(../img/top/gmenu07.png?v1)no-repeat center -82px;
}
#global nav ul li.gMenu8 a {
	background: url(../img/top/b_shopguide_1_bg.png?v1)no-repeat center bottom;
}
#global nav ul li.gMenu1 a:hover,
#global nav ul li.gMenu2 a:hover,
#global nav ul li.gMenu3 a:hover,
#global nav ul li.gMenu4 a:hover,
#global nav ul li.gMenu5 a:hover,
#global nav ul li.gMenu6 a:hover,
#global nav ul li.gMenu7 a:hover {opacity: 1.0;}
#global nav ul li.gMenu8 a:hover {opacity:0.5;}

/* MASK */
#mask {
	width: 100%; height: 100vh;
	background: rgba(0,0,0,0.7);
	display: none;
	position: fixed;
	top: 0; left: 0;
	z-index: 50;
}
.open #mask {
	display: block;
	cursor: pointer;
}

/* TOGGLE BUTTON */
.toggleBtn {
	display: block;
	position: fixed;
	top: 5px; left: 5px;
	z-index: 100;
	width: 54px; height: 54px;
	background: #d81b39;
	border: solid 2px #4d1c24;
	box-shadow: 0 0 5px rgba(85,75,64,0.5);
	cursor: pointer;
	transition: all 0.5s;
}

.toggleBtn span {
	width: 30px; height: 2px;
	background-color: #FFF;
	border-radius: 4px;
	display: block;
	position: absolute;
	left: 10px;
	transition: all 0.5s;
}
.toggleBtn span:nth-child(1) { top: 14px; }
.toggleBtn span:nth-child(2) { top: 24px; }
.toggleBtn span:nth-child(3) { bottom: 14px; }
.open .toggleBtn span { background-color: #fff; }
.open .toggleBtn span:nth-child(1) {
	-webkit-transform: translateY(10px) rotate(-315deg);
	transform: translateY(10px) rotate(-315deg);
}
.open .toggleBtn span:nth-child(2) { opacity: 0; }
.open .toggleBtn span:nth-child(3) {
	-webkit-transform: translateY(-10px) rotate(315deg);
	transform: translateY(-10px) rotate(315deg);
}

@media screen and (min-width: 1025px) {
	#global {
		position: static;
		width: 1060px;
		margin: 0 auto;
		padding-top: 0%;
		background: none;
		border-right: none;
		box-shadow: none;
		opacity: 1.0;
	}
	#global nav ul {
		width: 1060px;
		display: flex;
		flex-wrap: wrap;
	}
	#global nav ul li {height: 82px;}
	#global nav ul li.gMenu1 {width: 85px;}
	#global nav ul li.gMenu2 {width: 115px;}
	#global nav ul li.gMenu3 {width: 165px;}
	#global nav ul li.gMenu4 {width: 125px;}
	#global nav ul li.gMenu5 {width: 135px;}
	#global nav ul li.gMenu6 {width: 135px;}
	#global nav ul li.gMenu7 {width: 140px;}
	#global nav ul li.gMenu8 {
		width: 160px;
		background: url(../img/top/b_shopguide_2.png?v1)no-repeat center bottom;
	}
	#global nav ul li.gMenu8 a {
		background: url(../img/top/b_shopguide_2_bg.png?v1)no-repeat center bottom;
	}
	.toggleBtn { display: none; }
}



/*-------------------------
MAIN VISUAL
-------------------------*/
#mainVisual {
	position: relative;
	top: 0; left: 0;
	z-index: 0;
	width: 100%;
	overflow: hidden;
	background: #FFF;
}
#mainVisual img {
	width: 100%;
	height: auto;
	image-rendering: -webkit-optimize-contrast;
}
.pad1:before {
	content: "";
	display: block;
	padding-top: 66.4062%;
}
#mainVisual > #plusBtn {
	position: absolute;
	top: 39.7%; left: 50%;
	transform: translateX(141.5%);
	z-index: 10;
	width: 9.27%;
	opacity: 0;
}
#mainVisual > #plusBtn2 {
	position: absolute;
	top: 39.7%; left: 50%;
	transform: translateX(15%);
	z-index: 15;
	width: 9.27%;
	opacity: 0;
}
#mainVisual > #plusBtn3 {
	position: absolute;
	top: 39.7%; left: 50%;
	transform: translateX(-111%);
	z-index: 15;
	width: 9.27%;
	opacity: 0;
}

#mt09 {
	background: url(../img/top/b_puls_off.png)no-repeat;
	background-size: cover;
}
#mt10 {
	background: url(../img/top/b_onsale_off.png)no-repeat;
	background-size: cover;
}
/*#mt10 {
	background: url(../img/top/b_master_off.png)no-repeat;
	background-size: cover;
}*/
/*#mt11 {
	background: url(../img/top/b_master_off.png)no-repeat;
	background-size: cover;
}*/

#plusBtn img,#plusBtn2 img {
	transition: all 0.6s;
	opacity: 0;
}
#plusBtn img:hover,#plusBtn2 img:hover {opacity: 1.0;}

#mt01,#mt02,#mt03,#mt04,#mt05,
#mt06,#mt07,#mt08 {
	position: absolute;
	top: 0; left: 0;
	opacity: 0;
}
#mt01 {z-index: 5;}
#mt02 {z-index: 4;}
#mt03 {z-index: 3;}
#mt04 {z-index: 2;}
#mt05 {z-index: 1;}
#mt06 {z-index: 6;}
#mt07 {z-index: 7;}
#mt08 {z-index: 8;}

#mt01.move {animation: chrIn 0.6s ease-in-out 0.0s forwards;}
#mt02.move {animation: chrIn 0.6s ease-in-out 0.2s forwards;}
#mt03.move {animation: chrIn 0.6s ease-in-out 0.3s forwards;}
#mt04.move {animation: chrIn 0.6s ease-in-out 0.1s forwards;}
#mt05.move {animation: chrIn 0.6s ease-in-out 0.4s forwards;}
#mt06.move {animation: minIn 0.5s ease-in-out 0.7s forwards;}
#mt07.move {animation: logoIn 0.5s ease-in-out 0.9s forwards;}
#mt08.move {animation: logoIn 0.5s ease-in-out 1.0s forwards;}
#plusBtn.move {animation: minIn 1.0s ease-in-out 1.1s forwards;}
#plusBtn2.move {animation: minIn 1.0s ease-in-out 1.1s forwards;}
#plusBtn3.move {animation: minIn 1.0s ease-in-out 1.1s forwards;}

#mt09 {animation: popUp 3.0s ease-in-out infinite;}
#mt10 {animation: popUp 3.0s ease-in-out infinite;}
#mt11 {animation: popUp 3.0s ease-in-out infinite;}

@keyframes chrIn {
0% 		{transform: translate3d(0,50px,0); opacity: 0;}
60% 	{transform: translate3d(0,-10px,0); opacity: 1.0;}
100% 	{transform: translate3d(0,0,0); opacity: 1.0;}
}
@keyframes minIn {
0% 		{opacity: 0;}
100% 	{opacity: 1.0;}
}
@keyframes logoIn {
0% 		{transform: translate3d(0,30px,0);	opacity: 0;}
100% 	{transform: translate3d(0,0,0);	opacity: 1.0;}
}
@keyframes popUp {
0% 		{transform: translate3d(0,0,0);}
50% 	{transform: translate3d(0,-10px,0);}
100% 	{transform: translate3d(0,0,0);}
}

/*-------------------------
MAIN
-------------------------*/

section {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	z-index: 30;
	width: 100%;
}
#topics1 {
	margin-top: -3.0%;
	padding-top: 0;
}

#plusCont {
	position: relative;
	width: 100%;
}


#topics2 {
	background: url(../img/top/bg_pt02.png?v1);
	border-top: solid 4px #4d1c24;
}
#topics3 {
	background: url(../img/top/bg_pt01.png?v1);
	border-top: solid 4px #4d1c24;
}

#storyBody {
	background: url(../img/story/bg_story.jpg?v1.1) no-repeat center top;
	background-size: cover;
}
#charaBody {
	background: url(../img/top/bg_pt01.png?v1);
	overflow: hidden;
}
#worldBody {
	background: url(../img/top/bg_pt01.png?v1);
}
#cgBody {
	background: url(../img/top/bg_pt01.png?v1);
}
#specialBody {
	background: url(../img/top/bg_pt01.png?v1);
}
#productBody {
	background: url(../img/top/bg_pt01.png?v1);
}

.topics:before {
	content: "";
	display: block;
	padding-top: 236.849%;
}
.plus:before {
	content: "";
	display: block;
	padding-top: 236.849%;
}
.movie:before {
	content: "";
	display: block;
	padding-top: 33.854%;
}
.information:before {
	content: "";
	display: block;
	padding-top: 52.083%;
}
.prologue:before {
	content: "";
	display: block;
	padding-top: 301.8867%;
}

/*BANNER SETTING*/
#topBanner {
	position: absolute;
	top: 0; left: 50%;
	z-index: 30;
	transform: translate3d(-50%,-20%,0);
	width: 90%;
}
#topBanner img {
	width: 100%;
	height: auto;
	image-rendering: -webkit-optimize-contrast;
}
#topBanner ul {
	width:100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#topBanner ul li {
	margin-bottom: 1%;
	background: #FFF;
}
#topBanner li.lBana {width: 100%;}
#topBanner li.hBana {width: 49.5%;}
#topBanner li.sBana {width: 32%;}

#topBanner ul li a {
	width: 100%; height: 100%;
	display: block;
	transition: all 0.5s;
}
#topBanner ul li a:hover {
	opacity: 0.5;
}

.newc {animation: newFlash 3.0s ease-in-out infinite;}
@keyframes newFlash {
0% 		{box-shadow: 0 0 7px #fff000,0 0 7px #fff000,0 0 7px #fff000;}
60% 	{box-shadow: 0 0 0px #FFF,0 0 0px #FFF,0 0 0px #FFF;}
100% 	{box-shadow: 0 0 7px #fff000,0 0 7px #fff000,0 0 7px #fff000;}
}


@media screen and (min-width: 1025px) {
	/*BANNER SETTING*/
	#topBanner {
		position: absolute;
		top: 0; left: 50%;
		z-index: 30;
		transform: translate3d(-50%,-27%,0);
		width: 960px;
	}
	#topBanner li.lBana {width: 960px;}
	#topBanner li.hBana {width: 475px;}
	#topBanner li.sBana {width: 310px;}
}

/*PLUS SETTING*/
#plusInner {
	position: relative;
	width: 95%;
	margin: 0 auto;
}
#plusInner img {
	width: 100%;
	height: auto;
	image-rendering: -webkit-optimize-contrast;
}
.plus:before {
	content: "";
	display: block;
	padding-top: 263.671%;
}
#slCopy01,#slCopy02,#slCopy03,
#slPict01,#slPict02-1,#slPict02-2,
#slPict03-1,#slPict03-2,#slPict03-3,
.slCaption01,.slCaption02,.slCaption03 {
	position: absolute;
	top: 0; left: 50%;
	z-index: 3;
}
#slChara {
	position: absolute;
	top: 0; left: 50%;
	z-index: 1;
}
#slPict02-3 {
	position: absolute;
	top: 0; left: 50%;
	z-index: 5;
}
#slCopy01 {
	transform: translate3d(-50%,150%,0);
	width: 100%;
}
#slCopy02 {
	transform: translate3d(-50%,620%,0);
	width: 100%;
}
#slCopy03 {
	transform: translate3d(-50%,1090%,0);
	width: 100%;
}
.slCaption01 {
	transform: translate3d(-50%,600%,0);
	width: 100%;
}
.slCaption02 {
	transform: translate3d(-50%,600%,0);
	width: 100%;
}
.slCaption03 {
	transform: translate3d(-50%,2750%,0);
	width: 100%;
}
#slPict01 {
	transform: translate3d(-50%,150%,0);
	width: 100%;
}
#slPict02-1 {
	transform: translate3d(-50%,302%,0);
	width: 100%;
}
#slPict02-2 {
	transform: translate3d(-50%,302%,0);
	width: 100%;
}
#slPict02-3 {
	transform: translate3d(-50%,302%,0);
	width: 100%;
}
#slPict03-1 {
	transform: translate3d(-50%,1530%,0);
	width: 97.641%;
}
#slPict03-2 {
	transform: translate3d(-50%,1640%,0);
	width: 97.641%;
}
#slPict03-3 {
	transform: translate3d(-50%,1750%,0);
	width: 97.641%;
}
#slChara {
	transform: translate3d(-96%,16.5%,0);
	width: 69.15%;
}
#topicsBg {
	position: absolute;
	top: 0; left: 50%;
	transform: translateX(-50%);
	width: 100%; min-width: 1920px;
}
#slPict03-1 img,#slPict03-1 img,#slPict03-1 img {
	box-shadow: 0 2px 5px rgba(85,75,64,0.2);
}

@media screen and (min-width: 1025px) {
	#plusInner {
		position: relative;
		width: 55.208%; min-width: 1060px;
		margin: 0 auto;
	}
	.plus:before {
		content: "";
		display: block;
		padding-top: 254.716%;
	}
	#slCopy01 {
		transform: translate3d(-50%,123%,0);
		width: 100%;
	}
	#slCopy02 {
		transform: translate3d(-50%,570%,0);
		width: 100%;
	}
	#slCopy03 {
		transform: translate3d(-50%,1040%,0);
		width: 100%;
	}
	.slCaption01 {
		transform: translate3d(-50%,515%,0);
		width: 100%;
	}
	.slCaption02 {
		transform: translate3d(-50%,560%,0);
		width: 100%;
	}
	.slCaption03 {
		transform: translate3d(-50%,2645%,0);
		width: 100%;
	}
	#slPict01 {
		transform: translate3d(-50%,130%,0);
		width: 100%;
	}
	#slPict02-1 {
		transform: translate3d(-50%,280%,0);
		width: 100%;
	}
	#slPict02-2 {
		transform: translate3d(-50%,280%,0);
		width: 100%;
	}
	#slPict02-3 {
		transform: translate3d(-50%,280%,0);
		width: 100%;
	}
	#slPict03-1 {
		transform: translate3d(-50%,1470%,0);
		width: 97.641%;
	}
	#slPict03-2 {
		transform: translate3d(-50%,1580%,0);
		width: 97.641%;
	}
	#slPict03-3 {
		transform: translate3d(-50%,1690%,0);
		width: 97.641%;
	}
	#slChara {
		transform: translate3d(-96%,13%,0);
		width: 69.15%;
	}

}

#slCopy01,.slCaption01,#slPict01,
#slCopy02,.slCaption02,#slPict02-1,
#slPict02-2,#slPict02-3,#slCopy03,
.slCaption03,#slPict03-1,#slPict03-2,
#slPict03-3,#slChara {
	opacity: 0.0;
}

.topicUp1 {animation: topIn1 0.8s ease-in-out forwards;}
.topicUp2 {animation: topIn2 0.8s ease-in-out forwards;}
.topicUp3 {animation: topIn2 0.8s ease-in-out forwards;}

@keyframes topIn1 {
0% 		{margin-top: 10%; opacity: 0;}
60% 	{margin-top: -3%; opacity: 1.0;}
100% 	{margin-top: 0%; opacity: 1.0;}
}
@keyframes topIn2 {
0% 		{margin-left: 20%; opacity: 0;}
100% 	{margin-top: 0%; opacity: 1.0;}
}
@keyframes topIn3 {
0% 		{transform: scale(1.5); opacity: 0;}
100% 	{transform: scale(1.0); opacity: 1.0;}
}
/*MOVIE&INFORMATION*/
/*COMMON*/
#moveInner,#infoInner {
	width: 90%;
	margin: 0 auto;
	padding: 2.6% 0 4.42%;
}
#moveInner img,#infoInner img  {
	width: 100%;
	height: auto;
	image-rendering: -webkit-optimize-contrast;
}
#moveInner > h2,#infoInner > h2 {
	width: 50%; max-width: 550px;
	margin: 0 auto 2.864%;
}
/*MOVIE*/
#movThum {
	width: 90%; max-width: 968px;
	margin: 0 auto;
	background: url(../img/top/p_op.png?v1.1) no-repeat center center;
	background-size: cover;
}
#movThum a {
	display: block;
	width: 100%; height: 100%;
	background: url(../img/top/b_movieplay.png?v1.1) no-repeat center center;
	background-size: cover;
	transition: all 0.5s;
	overflow: hidden;
}
#movThum a:hover {transform: scale(1.2);}
#movThum img {opacity: 0;}

/*INFORMATION*/
#infoSet1,#infoSet2 {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
	padding-bottom: 2.6%;
}
#infoSet1 img,#infoSet2 img  {
	width: 100%;
	height: auto;
	image-rendering: -webkit-optimize-contrast;
}
/*#infoSet2 {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0 auto;
}*/
.infoBoxIn1 {
	width: 100%;
}
#infoSet1 h5,#infoSet2 h5 {
	width: 100%; height: 65px;
	text-indent: -9999px;
	margin-bottom: 15px;
	border-bottom: solid 2px #3c0c15;
	background-position: center top;
}
.infoT1 {background: url(../img/top/m_news.png) no-repeat;}
.infoT2 {background: url(../img/top/m_twitter.png) no-repeat;}
.infoT3 {background: url(../img/top/m_product.png) no-repeat;}

.boxInner_s {
	width: 100%; height: 400px;
	overflow: auto;
}
.padInner {
	padding: 0 5%;
}
.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
	background-color: #d81b39;
}

.boxInner_s dl{
	display: flex;
	flex-direction: column;
	margin-bottom: 1.5%;
}
.boxInner_s dt {
	width: 100%;
	padding-right: 1.5%;
}
.boxInner_s dd{
	width: 100%;
	font-size: 1.4rem;
	line-height: 1.5;
	color: #4d1c24;
	padding-top: 3px;
}
.boxInner_s dt > p {
	position: relative;
	display: inline-block;
	height: 24px;
	font-size: 1.4rem;
	line-height: 24px;
	color: #FFF;
	padding: 0 20px;
	background: #d81b39;
	/*box-shadow: 0 0 5px #ffe8cc;*/
}
.boxInner_s dt > p:after {
	content: "";
	position: absolute;
	top: 0; left: 100%;
	width: 0; height: 0;
	border-style: solid;
	border-color: transparent;
	border-left-color: #d81b39;
	border-width: 12px 10px;
}

#infoSet2 dl {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	text-align: center;
}
#infoSet2 dt {
	/*display:flex;*/
	align-items: center;
	width: 100%;
	margin-right: initial;
}
#infoSet2 dd {
	width: 100%;
	font-size: 1.6rem;
	font-weight: bold;
	color: #4d1c24;
	line-height: 1.5;
}
#infoSet2 dt,#infoSet2 dd {
	margin-bottom: 10px;
}
.infoSize img {
	width: 127px !important; height: 34px !important;
}

@media screen and (min-width: 1025px) {
	#moveInner,#infoInner {
		width: 1060px;
		margin: 0 auto;
	}
	.infoBoxIn1 {
		width: 49%;
	}
	.boxInner_s dl{
		display: flex;
		flex-direction: row;
		margin-bottom: 20px;
	}
	.boxInner_s dt {
		width: 30%;
		padding-right: 30px;
	}
	.boxInner_s dd{
		width: 70%;
		font-size: 1.2rem;
		line-height: 1.5;
		color: #4d1c24;
		padding-top: 3px;
	}

	#infoSet2 dl {
		display: flex;
		flex-wrap: wrap;
		width: 50%;
		text-align: left;
	}
	#infoSet2 dt {
		display:flex;
		align-items: center;
		width: 127px;
		margin-right: 23px;
	}
	#infoSet2 dd {
		width: calc(100% - 150px);
		font-size: 1.6rem;
		font-weight: bold;
		color: #4d1c24;
		line-height: 34px;
	}
	#infoSet2 dt,#infoSet2 dd {
		margin-bottom: 30px;
	}
}

/*-------------------------
PAGE SETTING
-------------------------*/
#pageHead {
	position: relative;
	width: 100%;
	padding-top: 30%;
	background: url(../img/top/bg_header.jpg?v1) no-repeat center top;
	background-size: cover;
	border-bottom: solid 4px #4d1c24;
}
#pageHead > h1 {
	position: absolute;
	top: 20%; left: 50%;
	transform: translateX(-50%);
	width: 100%;
	opacity: 0;
}
#pageHead img {
	width: 100%;
	height: auto;
	image-rendering: -webkit-optimize-contrast;
}
@media screen and (min-width: 1025px) {
	#pageHead {
		position: relative;
		width: 100%;
		height: 245px;
		padding-top: 125px;
		background: url(../img/top/bg_header.jpg?v1) no-repeat center top;
		background-size: cover;
		border-bottom: solid 4px #4d1c24;
	}
	#pageHead > h1 {
		position: absolute;
		top: 125px; left: 50%;
		transform: translateX(-50%);
		width: 28.645%; min-width: 550px;
		opacity: 0;
	}
}

#pageHead > h1.open {
	animation: pageIn 0.5s ease-out forwards;
}

@keyframes pageIn {
	0% {
		transform: translate3d(-50%,30px,0);
		opacity: 0;
	}
	100% {
		transform: translate3d(-50%,0,0);
		opacity: 1.0;
	}
}
/*-------------------------
STORY
-------------------------*/
#storyHead {
	position: relative;
	width: 100%;
	padding: 1.95% 0 1.46%;
	background: url(../img/top/bg_pt02.png);
	border-bottom: solid 4px #4d1c24;
}
#storyHead img {
	width: 100%;
	height: auto;
	image-rendering: -webkit-optimize-contrast;
}
#storyHead:before {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -12px;
	border: 12px solid transparent;
	border-top: 12px solid #4d1c24;
}
#storyHead nav {
	width: 90%;
	margin: 0 auto;
	background: none;
}
#storyHead nav ul {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#storyHead nav li {
	position: relative;
	width: 45%;
}
.btnPad:before {
	content: "";
	display: block;
	padding-top: 22.666%;
}
#storyHead nav li#stA {
	background: url(../img/story/b_story01_off.png?v1) no-repeat;
	background-size: cover;
}
#storyHead nav li#stB {
	background: url(../img/story/b_story02_off.png?v1) no-repeat;
	background-size: cover;
}
#storyHead nav li#stA a {
	background: url(../img/story/b_story01_on.png?v1) no-repeat;
	background-size: cover;
}
#storyHead nav li#stB a {
	background: url(../img/story/b_story02_on.png?v1) no-repeat;
	background-size: cover;
}
#storyHead nav li a {
	display: block;
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	transition: all 0.5s;
	opacity: 0.0;
}
#storyHead nav li a:hover {
	opacity: 1.0;
}
#storyHead nav li#stA a.stOn,#storyHead nav li#stB a.stOn {
	opacity: 1.0;
}

#storyInner {
	width: 90%;
	padding: 95px 0 110px;
	margin: 0 auto;
}
#storyInner img {
	width: 100%;
	height: auto;
	image-rendering: -webkit-optimize-contrast;
}
#storyInner > div > p {display: none;}
#storyInner > div {
}
#st01,#st02 {
	margin: 0 0 0.683%;
}
#st03,#st07 {
	margin: 0 0 4.589%;
}
#st04,#st05,#st06,
#st08,#st09 {
	margin: 0 0 4.199%;
}
#st10,#st11,#st12 {
	margin: 0 0 5.859%;
}
#st13 {
}
#textP01,#textP02 {
	width: 90%;
	margin: 0 auto 5.37%;
}
#textP01 img,#textP02 img {
	box-shadow: 0 2px 5px rgba(85,75,64,0.2);
}
#pstory01,#pstory02,#pstory03 {
	width: 90%;
	margin: 0 auto 1.464%;
}
@media screen and (min-width: 1025px) {
	#storyHead {
		position: relative;
		width: 100%;
		padding: 15px 0 15px;
		background: url(../img/top/bg_pt02.png);
		border-bottom: solid 4px #4d1c24;
	}

	#storyHead nav {
		width: 707px;
		margin: 0 auto;
		background: url(../img/story/bg_select.png) no-repeat;
	}

	#storyHead nav ul {
		width:100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	#storyHead nav li {
		width: 225px; height: 51px;
	}

	#storyInner {
		width: 1060px;
		padding: 95px 0 110px;
		margin: 0 auto;
	}
	#textP01,#textP02 {
		width: 1018px;
		margin: 0 auto 55px;
	}
	#pstory01,#pstory02,#pstory03 {
		width: 1026px;
		margin: 0 auto 15px;
	}

}

#st01,#st02,#st03,#st04,#st05,#st06,#st07,#st08,#st09,
#st10,#st11,#st12,#st13,#textP01,#textP02,
#pstory01,#pstory02,#pstory03 {
	opacity: 0.0;
}

#st01.prologuIn {animation: storyIn1 0.8s ease-out 1.0s forwards;}
#st02.prologuIn {animation: storyIn1 0.8s ease-out 1.3s forwards;}
#st03.prologuIn {animation: storyIn1 0.8s ease-out 1.6s forwards;}
#textP01.prologuIn	{animation: stPictIn1 0.8s ease-in-out 1.9s forwards;}
#pstory01.prologuIn {animation: stPictInL 0.6s ease-in-out 1.0s forwards;}

.textIn		{animation: storyIn1 0.8s ease-in-out forwards;}
.textIn2	{animation: storyIn2 0.8s ease-in-out forwards;}
.pictureIn	{animation: stPictIn1 0.8s ease-in-out forwards;}
.pictureInL	{animation: stPictInL 0.6s ease-in-out forwards;}
.pictureInR	{animation: stPictInR 0.6s ease-in-out forwards;}

@keyframes storyIn1 {
0% 		{transform: translate3d(0,60px,0); opacity: 0;}
100% 	{transform: translate3d(0,0,0); opacity: 1.0;}
}
@keyframes storyIn2 {
0% 		{transform: translate3d(0,0,0) scale(1.4); opacity: 0;}
60% 	{transform: translate3d(0,0,0) scale(0.95); opacity: 1.0;}
100% 	{transform: translate3d(0,0,0) scale(1.0); opacity: 1.0;}
}
@keyframes stPictIn1 {
0% 		{transform: translate3d(0,0,0) scale(1.5); opacity: 0;}
100% 	{transform: translate3d(0,0,0) scale(1.0); opacity: 1.0;}
}
@keyframes stPictInL {
0% 		{transform: translate3d(10%,0,0); opacity: 0;}
100% 	{transform: translate3d(-5%,0,0); opacity: 1.0;}
100% 	{transform: translate3d(0,0,0); opacity: 1.0;}
}
@keyframes stPictInR {
0% 		{transform: translate3d(-10%,0,0); opacity: 0;}
100% 	{transform: translate3d(5%,0,0); opacity: 1.0;}
100% 	{transform: translate3d(0,0,0); opacity: 1.0;}
}

/*-------------------------
CHARACTER
-------------------------*/
#charaHead {
	position: relative;
	z-index: 10;
	width: 100%;
	padding: 1.95% 0 1.46%;
	background: url(../img/top/bg_pt02.png);
	border-bottom: solid 4px #4d1c24;
}
#charaHead img {
	width: 100%;
	height: auto;
	image-rendering: -webkit-optimize-contrast;
}
#charaHead:before {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -12px;
	border: 12px solid transparent;
	border-top: 12px solid #4d1c24;
}
#charaHead nav {
	width: 90%;
	margin: 0 auto;
}
#charaHead nav ul {
	width:100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#charaHead nav li#chrNum1,#charaHead nav li#chrNum2,
#charaHead nav li#chrNum3,#charaHead nav li#chrNum4 {
	width: 49%;
}
#charaHead nav li#chrNum5,#charaHead nav li#chrNum6,
#charaHead nav li#chrNum7,#charaHead nav li#chrNum8,
#charaHead nav li#chrNum9,#charaHead nav li#chrNum10,
#charaHead nav li#chrNum11,#charaHead nav li#chrNum12,
#charaHead nav li#chrNum13,#charaHead nav li#chrNum14,
#charaHead nav li#chrNum15,#charaHead nav li#chrNum16 {
	width: calc((100%-5px)/7);
}
#charaHead nav ul li:not(:first-child) {
	margin-left: 1px;
}
#charaHead nav ul li {
	margin-bottom: 8px;
	opacity: 0.0;
}
#charaHead nav ul li img {
	transition: all 0.5s;
}
#charaHead nav ul li img:hover {
	margin-top: -8px;
	opacity: 0.5;
}
@media screen and (min-width: 1025px) {
	#charaHead nav {
		width: 1040px;
		margin: 0 auto;
	}
	#charaHead nav li#chrNum1,#charaHead nav li#chrNum2,
	#charaHead nav li#chrNum3,#charaHead nav li#chrNum4 {
		width: 255px; height: 85px;
	}
	#charaHead nav li#chrNum5,#charaHead nav li#chrNum6,
	#charaHead nav li#chrNum7,#charaHead nav li#chrNum8,
	#charaHead nav li#chrNum9,#charaHead nav li#chrNum10,
	#charaHead nav li#chrNum11,#charaHead nav li#chrNum12,
	#charaHead nav li#chrNum13,#charaHead nav li#chrNum14,
	#charaHead nav li#chrNum15,#charaHead nav li#chrNum16 {
		width: 80px; height: 73px;
	}
}

#charaInner {
	position: relative;
	width: 90%;
	/*min-height: 1540px;*/
	margin: 0 auto;
}
#charaInner img {
	width: 100%;
	height: auto;
	image-rendering: -webkit-optimize-contrast;
}
.chrPad:before {
	content: "";
	display: block;
	padding-top: 300%;
}
#chrProfile {
	position: absolute;
	top: 20%;
	z-index: 10;
	width: 100%;
}
#chrProfile2 {
	position: absolute;
	top: 30%;
	z-index: 10;
	width: 100%;
}
/*NAME/CV*/
#chrName {
	width: 70%;
	opacity: 0.0;
}
#chrName p {display: none;}

/*SPEC*/
#chrSpec {
	margin-bottom: 2%;
}
#chrSpec dl {
	width: 60%;
	display:flex;
	flex-wrap: wrap;
}
#chrSpec dl dt {
	width: 25%;
	border-bottom: solid 1px #72555c;
	opacity: 0.0;
}
#chrSpec dl dd {
	width: 75%;
	border-bottom: solid 1px #72555c;
	opacity: 0.0;
}
#chrSpec dl dt:before,
#chrSpec dl dd:before {
	content: "";
	display: block;
	padding-top: 19.23%;
}
#chrSpec p {display: none;}

#chrSpec .csT1 {background: url(../img/character/t_spec01.png?v1)no-repeat;}
#chrSpec .csT2 {background: url(../img/character/t_spec02.png?v1)no-repeat;}
#chrSpec .csT3 {background: url(../img/character/t_spec03.png?v1)no-repeat;}
#chrSpec .csT4 {background: url(../img/character/t_spec04.png?v1)no-repeat;}

.chrSpec01 .cdT1 {background: url(../img/character/spe_minette01.png?v1)no-repeat;}
.chrSpec01 .cdT2 {background: url(../img/character/spe_minette02.png?v1)no-repeat;}
.chrSpec01 .cdT3 {background: url(../img/character/spe_minette03.png?v1)no-repeat;}
.chrSpec01 .cdT4 {background: url(../img/character/spe_minette04.png?v1)no-repeat;}

.chrSpec02 .cdT1 {background: url(../img/character/spe_carina01.png?v1)no-repeat;}
.chrSpec02 .cdT2 {background: url(../img/character/spe_carina02.png?v1)no-repeat;}
.chrSpec02 .cdT3 {background: url(../img/character/spe_carina03.png?v1)no-repeat;}
.chrSpec02 .cdT4 {background: url(../img/character/spe_carina04.png?v1)no-repeat;}

.chrSpec03 .cdT1 {background: url(../img/character/spe_chelsea01.png?v1)no-repeat;}
.chrSpec03 .cdT2 {background: url(../img/character/spe_chelsea02.png?v1)no-repeat;}
.chrSpec03 .cdT3 {background: url(../img/character/spe_chelsea03.png?v1)no-repeat;}
.chrSpec03 .cdT4 {background: url(../img/character/spe_chelsea04.png?v1)no-repeat;}

.chrSpec04 .cdT1 {background: url(../img/character/spe_agnes01.png?v1)no-repeat;}
.chrSpec04 .cdT2 {background: url(../img/character/spe_agnes02.png?v1)no-repeat;}
.chrSpec04 .cdT3 {background: url(../img/character/spe_agnes03.png?v1)no-repeat;}
.chrSpec04 .cdT4 {background: url(../img/character/spe_agnes04.png?v1)no-repeat;}

.chrSpec05 .cdT1 {background: url(../img/character/spe_nina01.png?v1)no-repeat;}
.chrSpec05 .cdT2 {background: url(../img/character/spe_nina02.png?v1)no-repeat;}
.chrSpec05 .cdT3 {background: url(../img/character/spe_nina03.png?v1)no-repeat;}
.chrSpec05 .cdT4 {background: url(../img/character/spe_nina04.png?v1)no-repeat;}

.chrSpec06 .cdT1 {background: url(../img/character/spe_nick01.png?v1)no-repeat;}
.chrSpec06 .cdT3 {background: url(../img/character/spe_nick03.png?v1)no-repeat;}
.chrSpec06 .cdT4 {background: url(../img/character/spe_nick04.png?v1)no-repeat;}

.chrSpec07 .cdT1 {background: url(../img/character/spe_salsa01.png?v1)no-repeat;}
.chrSpec07 .cdT2 {background: url(../img/character/spe_salsa02.png?v1)no-repeat;}
.chrSpec07 .cdT3 {background: url(../img/character/spe_salsa03.png?v1)no-repeat;}
.chrSpec07 .cdT4 {background: url(../img/character/spe_salsa04.png?v1)no-repeat;}

.chrSpec08 .cdT1 {background: url(../img/character/spe_ritos01.png?v1)no-repeat;}
.chrSpec08 .cdT2 {background: url(../img/character/spe_ritos02.png?v1)no-repeat;}
.chrSpec08 .cdT3 {background: url(../img/character/spe_ritos03.png?v1)no-repeat;}
.chrSpec08 .cdT4 {background: url(../img/character/spe_ritos04.png?v1)no-repeat;}

.chrSpec09 .cdT1 {background: url(../img/character/spe_aberdeen01.png?v1)no-repeat;}
.chrSpec09 .cdT3 {background: url(../img/character/spe_aberdeen03.png?v1)no-repeat;}
.chrSpec09 .cdT4 {background: url(../img/character/spe_aberdeen04.png?v1)no-repeat;}

.chrSpec10 .cdT1 {background: url(../img/character/spe_avril01.png?v1)no-repeat;}
.chrSpec10 .cdT3 {background: url(../img/character/spe_avril03.png?v1)no-repeat;}
.chrSpec10 .cdT4 {background: url(../img/character/spe_avril04.png?v1)no-repeat;}

.chrSpec11 .cdT1 {background: url(../img/character/spe_miriam01.png?v1)no-repeat;}
.chrSpec11 .cdT3 {background: url(../img/character/spe_miriam03.png?v1)no-repeat;}
.chrSpec11 .cdT4 {background: url(../img/character/spe_miriam04.png?v1)no-repeat;}

.chrSpec12 .cdT1 {background: url(../img/character/spe_garnet01.png?v1)no-repeat;}
.chrSpec12 .cdT3 {background: url(../img/character/spe_garnet03.png?v1)no-repeat;}
.chrSpec12 .cdT4 {background: url(../img/character/spe_garnet04.png?v1)no-repeat;}

.chrSpec13 .cdT1 {background: url(../img/character/spe_shelley01.png?v1)no-repeat;}
.chrSpec13 .cdT3 {background: url(../img/character/spe_shelley03.png?v1)no-repeat;}
.chrSpec13 .cdT4 {background: url(../img/character/spe_shelley04.png?v1)no-repeat;}

.chrSpec14 .cdT1 {background: url(../img/character/spe_nagan01.png?v1)no-repeat;}
.chrSpec14 .cdT3 {background: url(../img/character/spe_nagan03.png?v1)no-repeat;}
.chrSpec14 .cdT4 {background: url(../img/character/spe_nagan04.png?v1)no-repeat;}

.chrSpec15 .cdT1 {background: url(../img/character/spe_fabious01.png?v1)no-repeat;}
.chrSpec15 .cdT3 {background: url(../img/character/spe_fabious03.png?v1)no-repeat;}
.chrSpec15 .cdT4 {background: url(../img/character/spe_fabious04.png?v1)no-repeat;}

.chrSpec16 .cdT1 {background: url(../img/character/spe_fiore01.png?v1)no-repeat;}
.chrSpec16 .cdT3 {background: url(../img/character/spe_fiore03.png?v1)no-repeat;}
.chrSpec16 .cdT4 {background: url(../img/character/spe_fiore04.png?v1)no-repeat;}

.chrSpec17 .cdT1 {background: url(../img/character/spe_leicester01.png?v1)no-repeat;}
.chrSpec17 .cdT3 {background: url(../img/character/spe_leicester03.png?v1)no-repeat;}
.chrSpec17 .cdT4 {background: url(../img/character/spe_leicester04.png?v1)no-repeat;}

#chrSpec .csT1,#chrSpec .csT2,#chrSpec .csT3,#chrSpec .csT4,
.chrSpec01 .cdT1,.chrSpec01 .cdT2,.chrSpec01 .cdT3,.chrSpec01 .cdT4,
.chrSpec02 .cdT1,.chrSpec02 .cdT2,.chrSpec02 .cdT3,.chrSpec02 .cdT4,
.chrSpec03 .cdT1,.chrSpec03 .cdT2,.chrSpec03 .cdT3,.chrSpec03 .cdT4,
.chrSpec04 .cdT1,.chrSpec04 .cdT2,.chrSpec04 .cdT3,.chrSpec04 .cdT4,
.chrSpec05 .cdT1,.chrSpec05 .cdT2,.chrSpec05 .cdT3,.chrSpec05 .cdT4,
.chrSpec06 .cdT1,.chrSpec06 .cdT2,.chrSpec06 .cdT3,.chrSpec06 .cdT4,
.chrSpec07 .cdT1,.chrSpec07 .cdT2,.chrSpec07 .cdT3,.chrSpec07 .cdT4,
.chrSpec08 .cdT1,.chrSpec08 .cdT2,.chrSpec08 .cdT3,.chrSpec08 .cdT4,
.chrSpec09 .cdT1,.chrSpec09 .cdT2,.chrSpec09 .cdT3,.chrSpec09 .cdT4,
.chrSpec10 .cdT1,.chrSpec10 .cdT2,.chrSpec10 .cdT3,.chrSpec10 .cdT4,
.chrSpec11 .cdT1,.chrSpec11 .cdT2,.chrSpec11 .cdT3,.chrSpec11 .cdT4,
.chrSpec12 .cdT1,.chrSpec12 .cdT2,.chrSpec12 .cdT3,.chrSpec12 .cdT4,
.chrSpec13 .cdT1,.chrSpec13 .cdT2,.chrSpec13 .cdT3,.chrSpec13 .cdT4,
.chrSpec14 .cdT1,.chrSpec14 .cdT2,.chrSpec14 .cdT3,.chrSpec14 .cdT4,
.chrSpec15 .cdT1,.chrSpec15 .cdT2,.chrSpec15 .cdT3,.chrSpec15 .cdT4,
.chrSpec16 .cdT1,.chrSpec16 .cdT2,.chrSpec16 .cdT3,.chrSpec16 .cdT4,
.chrSpec17 .cdT1,.chrSpec17 .cdT2,.chrSpec17 .cdT3,.chrSpec17 .cdT4 {
	background-position: center center;
	background-size: cover;
}

/*SAMPLE VOICE/COSTUME*/
#voiceSample,#costumeVari {
	width: 50%;
	margin: 0;
	opacity: 0.0;
}

#chrVoice,#chrCos {
	display: flex;
	width: 60%;
	border-bottom: solid 1px #72555c;
	margin: 0 0 2% 0;
	padding-bottom: 2%;
	opacity: 0.0;
}
#chrCos {margin: 0 0 11.538% 0;}
#chrVoice ul,#chrCos ul {
	width: 100%;
}
#chrVoice li,#chrCos li {
	display: inline-block;
	margin: 0 0.1% 0 5%;
}
#chrVoice a,#chrCos a {
	display: block;
	width: 50px; height: 54px;
	position: relative;
	transition: all 0.5s;
}

.chBtn1 {background: url(../img/character/b_chBtn01.png?v1)no-repeat;}
.chBtn2 {background: url(../img/character/b_chBtn02.png?v1)no-repeat;}
.chBtn3 {background: url(../img/character/b_chBtn03.png?v1)no-repeat;}
.chBtn4 {background: url(../img/character/b_chBtn04.png?v1)no-repeat;}
.chBtn5 {background: url(../img/character/b_chBtn05.png?v1)no-repeat;}
.chBtn1,.chBtn2,.chBtn3,.chBtn4,.chBtn5{
	background-position: center center;
	background-size: cover;
}

#chrVoice a:hover,#chrCos a:hover,
#chrVoice a.voiceon {
	opacity: 0.6;
}

/*PROFILE*/
#chrMemo {
	width: 100%;
	margin: 0 auto;
	opacity: 0.0;
}
#chrMemo:before {
	content: "";
	display: block;
	padding-top: 55.319%;
}
#chrMemo p {display: none;}

.chrMemo01 {
	background: url(../img/character/st_minette.png) no-repeat;
}
.chrMemo02 {
	background: url(../img/character/st_carina.png) no-repeat;
}
.chrMemo03 {
	background: url(../img/character/st_chelsea.png) no-repeat;
}
.chrMemo04 {
	background: url(../img/character/st_agnes.png) no-repeat;
}
.chrMemo05 {
	background: url(../img/character/st_nina.png) no-repeat;
}
.chrMemo06 {
	background: url(../img/character/st_nick.png) no-repeat;
}
.chrMemo07 {
	background: url(../img/character/st_salsa.png) no-repeat;
}
.chrMemo08 {
	background: url(../img/character/st_ritos.png) no-repeat;
}
.chrMemo09 {
	background: url(../img/character/st_aberdeen.png) no-repeat;
}
.chrMemo10 {
	background: url(../img/character/st_avril.png) no-repeat;
}
.chrMemo11 {
	background: url(../img/character/st_miriam.png) no-repeat;
}
.chrMemo12 {
	background: url(../img/character/st_garnet.png) no-repeat;
}
.chrMemo13 {
	background: url(../img/character/st_shelley.png) no-repeat;
}
.chrMemo14 {
	background: url(../img/character/st_nagan.png) no-repeat;
}
.chrMemo15 {
	background: url(../img/character/st_fabious.png) no-repeat;
}
.chrMemo16 {
	background: url(../img/character/st_fiore.png) no-repeat;
}
.chrMemo17 {
	background: url(../img/character/st_leicester.png) no-repeat;
}

.chrMemo01,.chrMemo02,.chrMemo03,.chrMemo04,.chrMemo05,
.chrMemo06,.chrMemo07,.chrMemo08,.chrMemo09,.chrMemo10,
.chrMemo11,.chrMemo12,.chrMemo13,.chrMemo14,.chrMemo15,
.chrMemo16,.chrMemo17 {
	background-size: cover;
}
/*STAND CHARA*/
#chrStand,#chrBg {
	position: absolute;
	top: 0; left: 30%;
	transform: translateX(50%);
	width: 300%; height: 1540px;
	opacity: 0;
}
#chrSign {
	position: absolute;
	top: 0; left: 50%;
	transform: translateX(50%);
	width: 300%; height: 1540px;
	opacity: 0;
}
#chrStand2 {
	position: absolute;
	top: 0; left: 40%;
	transform: translateX(50%);
	width: 300%; height: 1540px;
	opacity: 0;
}
#chrSign2 {
	position: absolute;
	top: -30%; left: 50%;
	transform: translateX(50%);
	width: 300%; height: 1540px;
	opacity: 0;
}
#chrSign,#chrSign2	{z-index: 6;}
#chrStand,#chrStand2	{z-index: 5;}
#chrBg		{
	display: none;
	z-index: 1;
}
.pos01 {margin-left: -330px;}
.pos02 {margin-left: -260px;}
.pos03 {margin-left: -220px;}

/*MOTION SETTING*/
#charaHead #chrNum1 {animation: chNaviIn 0.7s ease-in-out 0.1s forwards;}
#charaHead #chrNum2 {animation: chNaviIn 0.7s ease-in-out 0.1s forwards;}
#charaHead #chrNum3 {animation: chNaviIn 0.7s ease-in-out 0.1s forwards;}
#charaHead #chrNum4 {animation: chNaviIn 0.7s ease-in-out 0.1s forwards;}
#charaHead #chrNum5 {animation: chNaviIn 0.7s ease-in-out 0.3s forwards;}
#charaHead #chrNum6 {animation: chNaviIn 0.7s ease-in-out 0.3s forwards;}
#charaHead #chrNum7 {animation: chNaviIn 0.7s ease-in-out 0.3s forwards;}
#charaHead #chrNum8 {animation: chNaviIn 0.7s ease-in-out 0.3s forwards;}
#charaHead #chrNum9 {animation: chNaviIn 0.7s ease-in-out 0.3s forwards;}
#charaHead #chrNum10 {animation: chNaviIn 0.7s ease-in-out 0.3s forwards;}
#charaHead #chrNum11 {animation: chNaviIn 0.7s ease-in-out 0.3s forwards;}
#charaHead #chrNum12 {animation: chNaviIn 0.7s ease-in-out 0.3s forwards;}
#charaHead #chrNum13 {animation: chNaviIn 0.7s ease-in-out 0.3s forwards;}
#charaHead #chrNum14 {animation: chNaviIn 0.7s ease-in-out 0.3s forwards;}
#charaHead #chrNum15 {animation: chNaviIn 0.7s ease-in-out 0.3s forwards;}
#charaHead #chrNum16 {animation: chNaviIn 0.7s ease-in-out 0.3s forwards;}

#chrName		{animation: namIn 0.8s ease-in-out 0.4s forwards;}

#chrSpec .cs1,
#chrSpec .cd1	{animation: sttUp 0.4s ease-in-out 0.6s forwards;}
#chrSpec .cs2,
#chrSpec .cd2	{animation: sttUp 0.4s ease-in-out 0.7s forwards;}
#chrSpec .cs3,
#chrSpec .cd3	{animation: sttUp 0.4s ease-in-out 0.8s forwards;}
#chrSpec .cs4,
#chrSpec .cd4	{animation: sttUp 0.4s ease-in-out 0.9s forwards;}

#voiceSample	{animation: sttUp 0.4s ease-in-out 1.0s forwards;}
#chrVoice		{animation: sttUp 0.4s ease-in-out 1.1s forwards;}
#costumeVari	{animation: sttUp 0.4s ease-in-out 1.2s forwards;}
#chrCos			{animation: sttUp 0.4s ease-in-out 1.3s forwards;}
#chrMemo 		{animation: sttUp 0.8s ease-in-out 1.4s forwards;}

#chrStand,
#chrStand2 	{animation: chrIn1 1.2s ease-in-out 0.1s forwards;}
#chrBg	 	{animation: chrIn2 1.2s ease-in-out 0.2s forwards;}
#chrSign,
#chrSign2 	{animation: chrIn3 1.2s ease-in-out 0.3s forwards;}

@keyframes chrIn1 {
0% 		{transform: translate3d(-50%,100px,0); opacity: 0;}
100% 	{transform: translate3d(-50%,0,0); opacity: 1.0;}
}
@keyframes chrIn2 {
0% 		{transform: translate3d(-40%,0,0); opacity: 0;}
100% 	{transform: translate3d(-50%,0,0); opacity: 1.0;}
}
@keyframes chrIn3 {
0% 		{transform: translate3d(-50%,150px,0); opacity: 0;}
100% 	{transform: translate3d(-50%,0,0); opacity: 1.0;}
}
@keyframes namIn {
0% 		{transform: translate3d(0,-50px,0);	opacity: 0;}
100% 	{transform: translate3d(0,0,0);	opacity: 1.0;}
}
@keyframes sttUp {
0% 		{transform: translate3d(0,20px,0);	opacity: 0;}
100% 	{transform: translate3d(0,0,0);	opacity: 1.0;}
}
@keyframes chNaviIn {
0% 		{transform: scale(0.0);	opacity: 0;}
100% 	{transform: scale(1.0);	opacity: 1.0;}
}

@media screen and (min-width: 1025px) {
	#charaInner {
		position: relative;
		width: 1060px;
		min-height: 1540px;
		margin: 0 auto;
	}
	.chrPad:before {
		content: "";
		display: block;
		padding-top: 145.283%;
	}
	#chrBg {
		display:block;
		z-index: 1;
	}
	#chrProfile,#chrProfile2 {
		position: absolute;
		top: 175px;
		z-index: 10;
	}
	#chrName {
		width: 510px;
		opacity: 0.0;
	}
	#chrSpec dl {
		display:flex;
		flex-wrap: wrap;
		width: 390px;
		margin: 0 0 25px 0;
	}
	#chrSpec dl dt {
		width: 100px; height: 75px;
		margin: 0;
		border-bottom: solid 1px #72555c;
		text-indent: -9999px;
		opacity: 0.0;
	}
	#chrSpec dl dd {
		width: 290px; height: 75px;
		margin: 0;
		border-bottom: solid 1px #72555c;
		text-indent: -9999px;
		opacity: 0.0;
	}
	#voiceSample,#costumeVari {
		width: 390px;
		opacity: 0.0;
	}
	#chrVoice,#chrCos {
		display: flex;
		width: 390px;
		border-bottom: solid 1px #72555c;
		margin: 0 0 25px 0;
		padding-bottom: 25px;
		opacity: 0.0;
	}
	#chrCos {margin: 0 0 45px 0;}

	#chrVoice li,#chrCos li {
		display: inline-block;
		margin: 0 5px 0 20px;
	}
	#chrVoice a,#chrCos a {
		display: block;
		width: 47px; height: 50px;
		position: relative;
		transition: all 0.5s;
	}
	#chrMemo {
		width: 940px; height: 520px;
		margin: 0 0 0 20px;
		opacity: 0.0;
	}
	#chrSign,#chrStand,#chrBg,
	#chrSign2,#chrStand2 {
		position: absolute;
		top: 0; left: 50%;
		/*transform: translateX(-42%);*/
		transform: translateX(-50%);
		width: 1920px; height: 1540px;
		opacity: 0;
	}
}

/*-------------------------
WORLD
-------------------------*/

#worldInner1 {
	position: relative;
	width: 90%;
	/*min-height: 1090px;*/
	margin: 0 auto;
}
#worldInner1 img {
	width: 100%;
	height: auto;
	image-rendering: -webkit-optimize-contrast;
}
.worldPad:before {
	content: "";
	display: block;
	padding-top: 150%;
}

#worldInner2 {
	width: 100%;
	margin: 0 auto;
	padding: 55px 0;
	border-top: solid 4px #4d1c24;
}
#worldInner2 img {
	width: 100%;
	height: auto;
	image-rendering: -webkit-optimize-contrast;
}
#glossaryWrap {
	width: 90%;
	margin: 0 auto;
}
#glossaryWrap h5 {
	width: 100%; height: 95px;
	text-indent: -9999px;
	background-position: center top;
}
.glsT1 {background: url(../img/world/m_glossary.png) no-repeat;}

.glosBox {
	position: relative;
	padding-bottom: 10px;
	margin-bottom: 20px;
	border-bottom: solid 2px #4d1c24;
	opacity: 0;
}
.icatch {
	display: none;
}
#glossaryWrap h6 {
	width: 100%; height: 68px;
	margin-bottom: 15px;
	background: url(../img/world/bg_hasen.png) no-repeat center bottom;
}
#glossaryWrap h6 span {
	width: 100%; height: 100%;
	display: block;
	text-indent: -9999px;
}

.glossary1 h6 span {background: url(../img/world/title01.png) no-repeat 10px 0;}
.glossary2 h6 span {background: url(../img/world/title02.png) no-repeat 10px 0;}
.glossary3 h6 span {background: url(../img/world/title03.png) no-repeat 10px 0;}
.glossary4 h6 span {background: url(../img/world/title04.png) no-repeat 10px 0;}
.glossary5 h6 span {background: url(../img/world/title05.png) no-repeat 10px 0;}
.glossary6 h6 span {background: url(../img/world/title06.png) no-repeat 10px 0;}
.glossary7 h6 span {background: url(../img/world/title07.png) no-repeat 10px 0;}

.glPack {
	display: flex;
	flex-direction: column;
	width: 100%;
}
.glAbout {width: 100%;}
.glAbout p {display: none;}
.glPict {width: 100%;}

/*.glossary1 .glPict {
	width: 498px;
}*/

@media screen and (min-width: 1025px) {
	#worldInner1 {
		position: relative;
		width: 1060px;
		min-height: 1090px;
		margin: 0 auto;
	}
	.worldPad:before {
		content: "";
		display: block;
		padding-top: 102.83%;
	}
	#glossaryWrap {
		width: 1060px;
		margin: 0 auto;
	}
	.icatch {
		display: block;
		position: absolute;
		top: 20px; left: 500px;
		z-index: 10;
		width: 130px; height: 130px;
	}
	.glPack {
		display: flex;
		flex-direction: row;
		width: 100%;
	}
	.glAbout {width: 550px;}
	.glAbout p {display: none;}
	.glPict {width: 510px;}

	.glossary1 .glPict {
		width: 498px;
	}
}

.glosOpen1 {animation: glosInL 0.6s ease-in-out forwards;}
.glosOpen2 {animation: glosInR 0.6s ease-in-out forwards;}

@keyframes glosInL {
0% 		{transform: translate3d(20%,0,0); opacity: 0;}
100% 	{transform: translate3d(0,0,0);	opacity: 1.0;}
}
@keyframes glosInR {
0% 		{transform: translate3d(-20%,0,0); opacity: 0;}
100% 	{transform: translate3d(0,0,0);	opacity: 1.0;}
}
/*-------------------------
GALLERY
-------------------------*/

#cgInner {
	width: 100%;
	padding: 9.268% 0 10.731%;
	margin: 0 auto;
}
#cgInner img {
	width: 100%;
	height: auto;
	image-rendering: -webkit-optimize-contrast;
}
#cgInner ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 90%;
	margin: 0 auto;
}
#cgInner ul li {
	width: 48%;
	margin: 0 0 20px;
	opacity: 0.0;
}
#cgInner ul li img {
	transition: all 0.5s;
}
#cgInner ul li img:hover {
	margin-top: -10px;
	opacity: 0.5;
}
/*.vbox-container img {
	max-width: 1280px !important;
}*/
.cgOpen {animation: cgIn 0.8s ease-in-out forwards;}

@keyframes cgIn {
0% 		{transform: translate3d(0,35%,0); opacity: 0;}
100% 	{transform: translate3d(0,0,0);	opacity: 1.0;}
}

@media screen and (min-width: 1025px) {
	#cgInner {
		width: 1060px;
		padding: 95px 0 110px;
		margin: 0 auto;
	}
	#cgInner ul {
		width: 1048px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	#cgInner ul li {
		width: 250px;
		margin: 0 0 20px;
		opacity: 0.0;
	}
}
/*-------------------------
SPECIAL
-------------------------*/
#specialInner {
	width: 90%;
	padding: 3.645% 0 400px;
	margin: 0 auto;
}
#specialInner img {
	width: 100%;
	height: auto;
	image-rendering: -webkit-optimize-contrast;
}
#speList {
	width: 90%;
	margin: 0 auto;
}
#speList ul {
	width:100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#speList ul li {
	margin-bottom: 10px;
	background: #FFF;
}
#speList li.lBana {width: 100%;}
#speList li.sBana {width: 32%;}

#speList ul li a {
	width: 100%; height: 100%;
	display: block;
	transition: all 0.5s;
}
#speList ul li a:hover {
	opacity: 0.5;
}


@media screen and (min-width: 1025px) {
	#specialInner {
		width: 1060px;
		padding: 3.645% 0 400px;
		margin: 0 auto;
	}
	#speList {
		width: 960px;
		margin: 0 auto;
	}
}

/*CAMPAIGN*/

#campaign01 {
	width: 90%;
	margin: 0 auto 50px;
}
#campaign01 img {
	width: 100%;
	height: auto;
	image-rendering: -webkit-optimize-contrast;
}
.camPick01-1,.camPick01-2,.camPick01-3 {
	margin: 0 auto;
	opacity: 0.0;
}
.camPick01-1 {}
.camPick01-2 {margin-bottom: 1.0%;}
.camPick01-3 {margin-bottom: 3.5%;}

.camPack01 {
	display: flex;
	flex-direction: row;
	width: 100%;
}
.cam01About {
	width: 487px;
	margin: 0 40px 0 10px;
	opacity: 0.0;
}
.cam01Pict {
	width: 513px;
	opacity: 0.0;
}

.camPick01-1 {animation: fadeUp 0.8s ease-in-out 0.6s forwards;}
.camPick01-2 {animation: fadeUp 0.8s ease-in-out 0.7s forwards;}
.camPick01-3 {animation: fadeUp 0.8s ease-in-out 0.8s forwards;}

.cam01About {animation: fadeInL 0.8s ease-in-out 1.2s forwards;}
.cam01Pict {animation: fadeInR 0.8s ease-in-out 1.2s forwards;}

@keyframes fadeUp {
0% 		{transform: translate3d(0,50px,0);	opacity: 0;}
100% 	{transform: translate3d(0,0,0);	opacity: 1.0;}
}
@keyframes fadeInR {
0% 		{transform: translate3d(150px,0,0);	opacity: 0;}
100% 	{transform: translate3d(0,0,0);	opacity: 1.0;}
}
@keyframes fadeInL {
0% 		{transform: translate3d(-150px,0,0);	opacity: 0;}
100% 	{transform: translate3d(0,0,0);	opacity: 1.0;}
}
@keyframes zoomIn {
0% 		{transform: scale(1.3);	opacity: 0;}
100% 	{transform: scale(1.0);	opacity: 1.0;}
}

#cam01Map {
	width: 90%;
	margin: 0 auto;
	padding-bottom: 20%;
}
#specialInner h5 {
	width: 100%; height: 65px;
	text-indent: -9999px;
	margin-bottom: 15px;
	background-position: center top;
	opacity: 0.0;
}
.camT1 {
	background: url(../img/special/m_shoplist.png) no-repeat;
	border-bottom: solid 2px #3c0c15;
}
.bonusT1 {background: url(../img/special/m_shopbonus.png?v1) no-repeat;}



#mapArea {opacity: 0.0;}

.camTbl dl{
	width: 90%;
	margin: 0 auto 30px;
	display:flex;
	flex-flow: column nowrap;
	border-right: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
	border-top: none;
}
.camTbl dt{
	width: 100%;
	padding: 10px;
	border-top: 1px solid #CCC;
	border-left: 1px solid #CCC;
}
.camTbl dd{
	width: 100%;
	margin: 0;
	padding: 10px;
	border-left: 1px solid #CCC;
	border-top: 1px solid #CCC;
	background: #FFF;
}
.noInput {display: none;}
.area1 dt {background: #ffd5cf;}
.area2 dt {background: #ffd3b6;}
.area3 dt {background: #fddc0a;}
.area4 dt {background: #82d40b;}
.area5 dt {background: #76dbee;}
.area6 dt {background: #e1e1e1;}
.area7 dt {background: #be9eee;}
.area8 dt {background: #e39eed;}
.area9 dt {background: #f3b7ce;}
.area10 dt {background: #cef2aa;}
.area11 dt {background: #ffa99e;}
.area12 dt {background: #ffc789;}

.areaBtn {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width:100%;
}
.areaBtn li {
	display: inline-block;
	width: 32%; height: 40px;
	font-size: 1.4rem;
	font-weight: bold;
	line-height: 38px;
	text-align: center;
	margin-bottom: 1%;
}
.areaBtn li a {
	display: inline-block;
	position: relative;
	z-index: 2;
	width: 100%; height: 100%;
	color: #472006;
	border-radius: 5px;
	border: solid 2px #472006;
	box-shadow: 0 0 4px rgba(0,0,0,0.3);
	transition: all 0.3s;
}

.areaBtn li.mapB1 a {background: #ffd5cf;}
.areaBtn li.mapB2 a {background: #ffd3b6;}
.areaBtn li.mapB3 a {background: #fddc0a;}
.areaBtn li.mapB4 a {background: #82d40b;}
.areaBtn li.mapB5 a {background: #e1e1e1;}
.areaBtn li.mapB6 a {background: #76dbee;}
.areaBtn li.mapB7 a {background: #be9eee;}
.areaBtn li.mapB8 a {background: #e39eed;}
.areaBtn li.mapB9 a {background: #f3b7ce;}
.areaBtn li.mapB10 a {background: #cef2aa;}
.areaBtn li.mapB11 a {background: #ffa99e;}
.areaBtn li.mapB12 a {background: #ffc789;}

.areaBtn li.mapB1 a:hover,.areaBtn li.mapB2 a:hover,
.areaBtn li.mapB3 a:hover,.areaBtn li.mapB4 a:hover,
.areaBtn li.mapB5 a:hover,.areaBtn li.mapB6 a:hover,
.areaBtn li.mapB7 a:hover,.areaBtn li.mapB8 a:hover,
.areaBtn li.mapB9 a:hover,.areaBtn li.mapB10 a:hover,
.areaBtn li.mapB11 a:hover,.areaBtn li.mapB12 a:hover {
	background: #FFF;
}


.area1,.area2,.area3,.area4,.area5,.area6,
.area7,.area8,.area9,.area10,.area11,.area12 {opacity: 0;}

@media screen and (min-width: 768px) {
	#cam01Map {
		width: 1060;
		margin: 0 auto;
	}
	.camTbl dl{
		display:flex;
		flex-flow: initial;
		flex-wrap: wrap;
	}
	.camTbl dt {
		width: 100%;
		display:flex;
		align-items: center;
	}
	.camTbl dd{
		width: 50%;
		border-left: 1px solid #CCC;
	}
	.noInput {display: block;}
	.areaBtn li {
		display: inline-block;
		width: 24%; height: 40px;
		font-size: 1.4rem;
		font-weight: bold;
		line-height: 38px;
		text-align: center;
		margin-bottom: 1%;
	}
}

.areaOpen {animation: shopIn 0.7s ease-in-out forwards;}

@keyframes shopIn {
0% 		{transform: translate3d(0,70px,0); opacity: 0;}
100% 	{transform: translate3d(0,0,0);	opacity: 1.0;}
}

/*SHOP BONUS*/

#bnsSet1,#bnsSet2,#bnsSet3,#bnsSet4,#bnsSet5 {
	position: relative;
	width: 100%; max-width: 1000px;
	margin: 0 auto 5%;
}
.bnsSize:before {
	content: "";
	display: block;
	padding-top: 53.6%;
}
.bnsBg {
	position: absolute;
	top: 0; left: 0;
	z-index: 1;
}
#bnsSet1 .shopName,#bnsSet2 .shopName,#bnsSet3 .shopName,
#bnsSet4 .shopName,#bnsSet5 .shopName {
	position: absolute;
	top: 6%; left: 3%;
	z-index: 5;
	width: 46%; max-width: 450px;
}
#bnsSet1 .bnsTitle,#bnsSet2 .bnsTitle,#bnsSet3 .bnsTitle,
#bnsSet4 .bnsTitle,#bnsSet5 .bnsTitle {
	position: absolute;
	top: 47%; left: 3%;
	z-index: 5;
	width: 44%; max-width: 440px;
}
.shopName p,.bnsTitle p {display: none;}


.bnsPict {
	position: absolute;
	top: 0; right: 3%;
	z-index: 5;
	width: 40.8%; max-width: 408px;
}

.orgBox {
	width: 100%;
	margin: 0 auto 5%;
}

.orgBox p {
	width: 100%;
	font-size: 1.6rem;
	font-weight: bold;
	color: #FFF;
	text-align: center;
	padding: 10px;
	margin-bottom: 2%;
	background:#4d1c24;
	border-radius: 5px;
}
.orgPict {
	position: relative;
	width: 100%;
	margin: 0 auto 2%;
}
.orgPict2 {
	position: relative;
	width: 71.4285714%;
	margin: 0 auto 2%;
}
.orgPict3 {
	position: relative;
	width: 100%;
	margin: 0 auto 2%;
}
.orgSize:before {
	content: "";
	display: block;
	width: 100%;
	padding-top: 69.591%;
}
.orgSize2:before {
	content: "";
	display: block;
	width: 100%;
	padding-top: 140%;
}
.orgPict > .pict,.orgPict2 > .pict {
	position: absolute;
	top: 0; left: 0;
	z-index: 1;
	width: 100%;
}
.orgPict > .text {
	position: absolute;
	top: 74%; left: 0;
	z-index: 5;
	width: 100%;
}
.orgPict2 > .text {
	position: absolute;
	top: 75%; left: 0;
	z-index: 5;
	width: 100%;
}
.orderL {
	position: absolute;
	top: 75.5%; left: 3%;
	z-index: 5;
	width: 50.8%; max-width: 508px;
	background: url(../img/special/b_order_l_on.png) no-repeat;
	background-size: cover;
}
.orderS {
	width: 62.857%; max-width: 308px;
	margin: 0 auto;
	background: url(../img/special/b_order_s_on.png) no-repeat;
	background-size: cover;
}
.orderL a,.orderS a {
	display: block;
	width: 100%; height: 100%;
	transition: all 0.5s;
}
.orderL a:hover,.orderS a:hover {opacity: 0.0;}

@media screen and (min-width: 768px) {
	#orgBonus {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%; max-width: 1000px;
		margin: 0 auto;
	}
	.orgBox {
		width: 49%;
		margin: 0 auto 5%;
	}
}

.bonusT1,#bnsSet1,#bnsSet2,#bnsSet3,#bnsSet4,#bnsSet5,
.shopName,.bnsTitle,.orderL,.bnsPict,.orgBox {
	opacity: 0.0;
}

.bonusT1 {animation: bnsUp 0.5s ease-in-out 0.7s forwards;}
.bnsOpen {animation: bnsUp 0.7s ease-in-out forwards;}
.bnsOpenL {animation: bnsLeft 0.7s ease-in-out forwards;}
.bnsOpenR {animation: bnsRight 0.7s ease-in-out forwards;}

@keyframes bnsUp {
0% 		{transform: translate3d(0,70px,0); opacity: 0;}
100% 	{transform: translate3d(0,0,0);	opacity: 1.0;}
}
@keyframes bnsLeft {
0% 		{transform: translate3d(70px,0,0); opacity: 0;}
100% 	{transform: translate3d(0,0,0);	opacity: 1.0;}
}
@keyframes bnsRight {
0% 		{transform: translate3d(-70px,0,0); opacity: 0;}
100% 	{transform: translate3d(0,0,0);	opacity: 1.0;}
}

/*WCAMPAIGN*/

#wcampHead {
	position: relative;
	width: 100%;
	margin: 0 auto 5%;
	background: url(../img/special/wc_head.png) no-repeat center top;
	background-size: cover;
}
#wcampHead img {
	width: 100%;
	height: auto;
	image-rendering: -webkit-optimize-contrast;
}
#wcampHead h2 {
	position: absolute;
	bottom: 0; left: 50%;
	transform: translateX(-50%);
	width: 100%;
	z-index: 5;
	/*padding-top: 19.5652173%;*/
}
#wcampHead #wcImage {
	position: absolute;
	top: 0; left: 50%;
	transform: translateX(-50%);
	width: 100%;
	z-index: 1;
}
.wcampSize:before {
	content: "";
	display: block;
	padding-top: 79.347826%;
}
#wcInner {
	width: 90%;
	margin: 0 auto;
}
#wcInner img {
	width: 100%;
	height: auto;
	image-rendering: -webkit-optimize-contrast;
}
#wcInner h5 {
	width: 100%;
	margin: 0 auto 4%;
}
#wcAbout {
	margin: 0 auto 4%;
}
.wcPlan {
	margin-bottom: 2%;
}
.wcPlanSub {
	width: 100%;
	margin: 0 auto;
	padding-bottom: 8%;
}

.wcPlanSub dl {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}
.wcPlanSub dt {
	display: block;
	width: 100%;
	text-align: center;
	background: #FFF;
}
.wcPlanSub dd {
	display: block;
	width: 100%;
	font-family: 'Helvetica';
	font-size: 1.4rem;
	font-weight: bold;
	color: #4d1c24;
	padding: 2% 0 0 0;
	text-align: center;
}
.wcPlanSub ul {
	font-size: 1.2rem;
	line-height: 1.5;
	font-weight: bold;
	color: #e26e21;
	margin-left: 1.2rem;
}
.wcPlanSub ul li {
	position: relative;
}
.wcPlanSub ul li:before {
	position: absolute;
	left: -1.4rem;
	content: "※";
}
#wcAbout p,.wcPlan p {
	display: none;
}
.wcPlanSub dt a {
	transition: all 0.5s;
}
.wcPlanSub dt a:hover {
	opacity: 0.3;
}
@media screen and (min-width: 769px) {
	#wcampHead {
		/*height: 730px;*/
		background: url(../img/special/wc_head2.png) no-repeat center top;
		background-size: cover;
		margin: 0 auto 50px;
	}
	#wcampHead h2 {
		width: 47.9166666%
		/*padding-top: 180px;*/
	}
	.wcampSize:before {
		padding-top: 38.0208333%;
	}
	#wcInner {
		width: 920px;
	}
	#wcInner h5 {
		width: 920px;
		margin: 0 auto 40px;
	}
	#wcAbout {
		margin: 0 auto 40px;
	}
	.wcPlan {
	}
	.wcPlanSub {
		width: 785px;
		margin-left: 135px;
		padding-bottom: 70px;
	}
	.wcPlanSub dt {
		display: flex;
		width: 407px;
	}
	.wcPlanSub dd {
		display: flex;
		align-items: flex-end;
		width: 378px;
		padding-left: 35px;
		text-align: left;
	}
}

#wcampHead, #wcampHead h2, #wcAbout, #wcInner h5,
.wcp {
	opacity: 0.0;
}

#wcampHead {animation: wcFade 0.5s ease-in-out 0.7s forwards;}
#wcampHead h2 {animation: wcUp 1.0s ease-in-out 0.6s forwards;}
.wcOpen {animation: wcIn 0.7s ease-in-out forwards;}

@keyframes wcFade {
0% 		{opacity: 0;}
100% 	{opacity: 1.0;}
}
@keyframes wcUp {
0% 		{transform: translate3d(-50%,-10%,0); opacity: 0;}
100% 	{transform: translate3d(-50%,0,0);	opacity: 1.0;}
}
@keyframes wcIn {
0% 		{transform: translate3d(0,70px,0); opacity: 0;}
100% 	{transform: translate3d(0,0,0);	opacity: 1.0;}
}

/*-------------------------
PRODUCT
-------------------------*/
#prdInner {
	width: 90%;
	padding: 5.853% 0 10.731%;
	margin: 0 auto;
}
#prdInner img {
	width: 100%;
	height: auto;
	image-rendering: -webkit-optimize-contrast;
}
#prdInner h5 {
	width: 100%; height: 65px;
	text-indent: -9999px;
	margin: 0 auto 15px;
	border-bottom: solid 2px #3c0c15;
	background-position: center top;
}
.prdT1 {background: url(../img/product/m_about.png) no-repeat;}
.prdT2 {background: url(../img/product/m_staff.png) no-repeat;}
.prdT3 {background: url(../img/product/m_spec.png) no-repeat;}

#prdBox1 {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding-bottom: 6.829%;
}

#prdBox1 dl {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}
#prdBox2 dl {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}
#prdBox1 dt,#prdBox2 dt {
	display: block;
	align-items: center;
	margin-bottom: 1%;
	text-align: center;
}
#prdBox1 dd,#prdBox2 dd {
	display: block;
	align-items: center;
	padding: 0 5px 0 0;
	font-size: 1.6rem;
	font-weight: bold;
	text-align: center;
	color: #4d1c24;
	line-height: 1.5;
	margin-bottom: 1%;
}
#prdBox2 dd span {
	font-size: 1.2rem;
	font-weight: normal;
	color: #e26e21;
	line-height: 1.5;
}

#prdBox2 {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding-bottom: 6.829%;
}
.prdBoxIn1 {width: 100%;}
.prdBoxIn2 {
	display: none;
	width: 2%;
}

.aboutSize1 dt {width: 100%;}
.aboutSize1 dd {width: 100%;}
.aboutSize2 dt {width: 100%;}
.aboutSize2 dd {width: 100%;}
.staffSize dt {width: 100%;}
.staffSize dd {width: 100%;}
.specSize dt {width: 100%;}
.specSize dd {width: 100%;}

.prdT1,.aboutSize1,.aboutSize2,
.prdT2,.prdT3,.staffSize,.specSize {
	opacity: 0.0;
}
.staffSize {margin-bottom: 10%;}
.prdSize1 img {width: 107px !important; height: 34px !important;}
.prdSize2 img {width: 127px !important; height: 34px !important;}
.prdSize3 img {width: 92px !important; height: 34px !important;}

@media screen and (min-width: 1025px) {
	#prdInner {
		width: 1060px;
		padding: 60px 0 110px;
		margin: 0 auto;
	}
	#prdBox1 {
		display: flex;
		flex-direction: row;
		width: 100%;
		padding-bottom: 6.829%;
	}
	#prdBox2 {
		display: flex;
		flex-direction: row;
		width: 100%;
		padding-bottom: 6.829%;
	}
	#prdBox1 dl {
		display: flex;
		flex-wrap: wrap;
		width: 50%;
	}
	#prdBox2 dl {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
	}
	#prdBox1 dt,#prdBox2 dt {
		display:flex;
		align-items: center;
		margin-bottom: 4%;
		text-align: left;
	}
	#prdBox1 dd,#prdBox2 dd {
		display:flex;
		align-items: center;
		padding: 0 5px 0 0;
		font-size: 1.6rem;
		font-weight: bold;
		color: #4d1c24;
		text-align: left;
		line-height: 1.5;
		margin-bottom: 4%;
	}
	.aboutSize1 dt {width: 25%;}
	.aboutSize1 dd {width: 75%;}
	.aboutSize2 dt {width: 30%;}
	.aboutSize2 dd {width: 70%;}
	.staffSize dt {width: 25%;}
	.staffSize dd {width: 75%;}
	.specSize dt {width: 25%;}
	.specSize dd {width: 75%;}

	.prdBoxIn1 {width: 49%;}
	.prdBoxIn2 {
		display: block;
		width: 2%;
	}
	.staffSize {margin-bottom: 0%;}
}

.prdT1		{animation: specIn 0.8s ease-in-out 0.7s forwards;}
.aboutSize1 {animation: specIn 0.8s ease-in-out 0.8s forwards;}
.aboutSize2 {animation: specIn 0.8s ease-in-out 0.8s forwards;}
.prdT2		{animation: specIn 0.8s ease-in-out 1.0s forwards;}
.staffSize	{animation: specIn 0.8s ease-in-out 1.1s forwards;}
.prdT3		{animation: specIn 0.8s ease-in-out 1.0s forwards;}
.specSize	{animation: specIn 0.8s ease-in-out 1.1s forwards;}


/*.prdBoxIn3 {animation: specIn 1.0s ease-out 1.2s forwards;}*/

@keyframes specIn {
0% 		{transform: translate3d(0,70px,0); opacity: 0;}
100% 	{transform: translate3d(0,0,0);	opacity: 1.0;}
}



/*-------------------------
FOOTER
-------------------------*/
footer p small {
	font-size: 1.2rem;
	font-weight: bold;
	color: #FFF;
}
.footLogo {
	width: 145px;
	margin: 0 auto 20px;
}
#footRadio {
	position: absolute;
	top: -50px; left: 50%;
	transform: translateX(-50%);
	z-index: 30;
	width: 50%;
}
@media screen and (min-width: 1060px) {
#footRadio {
	position: absolute;
	top: -50px; left: 50%;
	transform: translateX(30%);
	z-index: 30;
	width: 415px;
}
}
/*-------------------------
*LOADING
-------------------------*/
#loadBg {
	display: none;
	position: fixed;
	width: 100%; height: 100vh;
	top: 0; left: 0;
	background: rgba(255,255,255,1.0);
	z-index: 1500;
}
#loadBg img {
	width: 100%;
	height: auto;
	image-rendering: -webkit-optimize-contrast;
}
#loader {
	display: none;
	justify-content: center;
	align-items: center;
}
#loadInner {}
#bell {
	width: 120px; height: 130px;
	margin: 0 auto 42px;
	background: url(../img/top/bell_off.png?v1);
	transform: rotate(180deg);
}
#bellOn {
	width: 120px; height: 130px;
	margin: 0 auto 42px;
	background: url(../img/top/bell_on.png?v1);
}
#loadT {
	width: 125px; height: 14px;
	margin: 0 auto;
}

/*-------------------------
*MODAL SETTING
-------------------------*/
#modal {
	display: none;
	position: fixed;
	width: 100%; height: 100vh;
	background: rgba(255,255,255,0.8);
	z-index:1000;
}
#modal img {
	width: 100%;
	height: auto;
	image-rendering: -webkit-optimize-contrast;
}
#modalLayout {
	position: relative;
	width: 80%;
	margin: 10% auto 0;
}
@media screen and (min-width: 1025px) {
	#modalLayout {
		width: 50%; max-width: 952px;
		margin: 5% auto 0;
	}
}

#modalLayout p {display: none;}
#modalLayout ul,#modalBg {
	position: absolute;
}

#modalLayout ul {
	z-index: 5;
	top: 0; left: 50%;
	transform: translateX(-50%);
	width: 58.823%; max-width: 560px;
	margin-top: 49.369%;
	display: flex;
	flex-direction: row;
}
#modalLayout ul li {
	width: 30.357%;	max-width: 170px;
	text-align: center;
	margin: 0 9.821% 0;
}
#modalBg {
	z-index: 1;
	top: 0; left: 0;
}
#modalLayout ul li a {
	cursor: pointer;
	width: 100%; height: 100%;
	display: block;
	transition: all 0.5s;
}
#modalLayout ul li a:hover {
	opacity: 0.7;
}
/*#modalLayout ul li#mBtn1 {
	background: url(../img/top/b_yes_off.png) no-repeat;
	background-size: cover;
}
#modalLayout ul li#mBtn2 {
	background: url(../img/top/b_no_off.png) no-repeat;
	background-size: cover;
}
#modalLayout ul li img {
	transition: all 0.5s;
	opacity: 0.0;
}
#modalLayout ul li img:hover {
	opacity: 1.0;
}*/