@charset "UTF-8";
/*-------------------------
*FONT STYLE
-------------------------*/

html {
	font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN",
	"Hiragino Sans",Meiryo,sans-serif;
	font-size: 62.5%;
	letter-spacing: 0.15em;
    font-feature-settings: "palt" 1;
    color: #000;
}


body {
	overflow-x: hidden !important;
}
#mainWrap {
	display:none;
}
#mainCover {

}
.blue {background: #02328f;}
/*-------------------------
*HEADER
-------------------------*/
header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	width: 100%;
	height: 130px;
	padding-top: 15px;
	background: none;
}
#headInner {
	width: 980px;
	margin: 0 auto;
}
#headInner h1 {
	display: none;
}
#global1 {display: none;}
#global2 ul {
}
#global2 ul li {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.8rem;
	font-weight: 900;
	letter-spacing: 0.01em;
	margin: 0 0 10px 30px;
	transform: rotate(0.05deg);
}
#global2 ul li span {
	font-family: 'Josefin Sans', sans-serif;
	font-size:1.4rem;
	font-weight: 500;
	color: #f76575;
	padding-top: 2px;
	display: block;
}
#global2 ul li a {
	color: #472b1e;
	text-shadow: 1px 1px 0 #FFF,-1px -1px 0 #FFF,
	-1px 1px 0 #FFF,1px -1px 0 #FFF,0px 1px 0 #FFF,
	0 -1px 0 #FFF,-1px 0 0 #FFF,1px 0 0 #FFF;
	transition: all 0.4s;
}
#global2 ul li a:hover {
	color: #f76575;
}
#global2 ul li.toggleLogo {margin-bottom: 40px;}
#shopGuide {display: none;}
#shopGuideM {
		display: block;
		font-size: 0;
		width: 222px;
		height: 72px;
		background: url(../img/common/b_shopguide_off.png) no-repeat;
	}
	#shopGuideM a {
		display: block;
		width: 100%;
		height: 100%;
		background: url(../img/common/b_shopguide_on.png) no-repeat;
		transition: all 0.5s;
		opacity: 0.0;
	}
	#shopGuideM a:hover {
		opacity: 1.0;
	}

@media screen and (min-width: 1025px) {
	header {
		width: 100%;
		height: 130px;
		background: url(../img/common/bg_global.png?v2) no-repeat center -15px;
	}
	#headInner {
		width: 980px;
		margin: 0 auto;
		display: flex;
		flex-direction: wrap;
		justify-content: center;
	}
	#headInner h1 {
		display: block;
		width: 160px;
		margin-right: 20px;
	}
	#headInner h1 a {
		transition: all 0.5s;
	}
	#headInner h1 a:hover {
		opacity: 0.5;
	}
	#global1 {
		display: block;
		/*opacity: 0;*/
	}
	#global2 {display: none;}

	#global1 ul {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
	}
	#global1 ul li {
		font-family: 'Noto Sans JP', sans-serif;
		font-size: 1.8rem;
		font-weight: 900;
		letter-spacing: 0.01em;
		margin-left: 30px;
		display: flex;
		align-items: center;
		text-align: center;
		transform: rotate(0.05deg);
	}
	#global1 ul li span {
		font-family: 'Josefin Sans', sans-serif;
		font-size:1.4rem;
		font-weight: 500;
		color: #f76575;
		padding-top: 2px;
		display: block;
	}
	#global1 ul li a {
		color: #472b1e;
		text-shadow: 1px 1px 0 #FFF,-1px -1px 0 #FFF,
		-1px 1px 0 #FFF,1px -1px 0 #FFF,0px 1px 0 #FFF,
		0 -1px 0 #FFF,-1px 0 0 #FFF,1px 0 0 #FFF;
		transition: all 0.4s;
	}
	#global1 ul li a:hover {
		color: #f76575;
	}
	#shopGuide {
		display: block;
		font-size: 0;
		position: fixed;
		top: 10px;
		right: 10px;
		z-index: 10;
		width: 222px;
		height: 72px;
		background: url(../img/common/b_shopguide_off.png) no-repeat;
	}
	#shopGuide a {
		display: block;
		width: 100%;
		height: 100%;
		background: url(../img/common/b_shopguide_on.png) no-repeat;
		transition: all 0.5s;
		opacity: 0.0;
	}
	#shopGuide a:hover {
		opacity: 1.0;
	}
	#shopGuideM {display: none;}
}

#global2 {
	width: 70%;
	display: block;
	position: fixed;
	top: 0; right: -100%;
	bottom: 0;
	z-index: 50;
	padding-top: 120px;
	background: url(../img/common/common_body.png?v2);
	-webkit-overflow-scrolling: touch;
	transition: all 0.3s;
	opacity: 0;
}
.open #global2 {
	right: 0;
	opacity: 1;
	border-left: solid 3px #7d716a;
}
/*-------------------------
*TOGGLE
-------------------------*/

.toggleBtn {
	display: block;
	position: fixed;
	top: 5px; right: 5px;
	width: 40px; height: 40px;
	cursor: pointer;
	z-index: 100;
}
.toggleBtn span {
	display: block;
	width: 40px; height: 40px;
	background: url(../img/common/b_toggle.png?v2) no-repeat;
	background-size: cover;
}
.open .toggleBtn span {
	background: url(../img/common/b_toggle_on.png?v2) no-repeat;
	background-size: cover;
}
#mask {
	display: none;
	transition: all .5s;
}
.open #mask {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: 0.8;
	z-index: 5;
	cursor: pointer;
}
@media screen and (min-width: 1025px) {
	.toggleBtn { display: none; }
}
/*-------------------------
*MAIN VISUAL
-------------------------*/

#visual {
	width: 100%;
	position: relative;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	overflow: hidden;
}
#visual img#visual01,#visual img#visual02,
#visual img#visual03,#visual img#visual04,#visual img#visual04m {
	width: 100%;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	opacity: 0.0;
}
#visual img#visual04	{display: none;}
#visual img#visual04m	{display: block;}

#visual img#visual05 {
	width: 100%;
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}
#visual img#visual00 {
	width: 15%;
	position: absolute;
	top: 10px; left: 10px;
	z-index: 3;
}
#visual img#visual01 {z-index: 3;}
#visual img#visual02 {z-index: 3;}
#visual img#visual03 {z-index: 3;}
#visual img#visual04 {z-index: 2;}

#pTop {
	background: url(../img/top/top_bg.jpg?v2.1) no-repeat center top;
	background-size: cover;
	background-attachment: fixed;
}
#pTop #mainWrap {
	background: url(../img/common/tx01.png);
}
.init:before {
	content: "";
	display: block;
	padding-top: 95%;
}

@media screen and (min-width: 1025px) {
	#visual img#visual00 {
		width: 130px;
		position: absolute;
		top: 100px; left: 20px;
		z-index: 3;
	}
	#visual img#visual04	{display: block;}
	#visual img#visual04m	{display: none;}

	.init:before {
		padding-top: 100%;
	}
}

#global1.open {animation: openMenu1 1.0s ease-in-out 0.0s forwards;}
#headInner h1.open {animation: openMenu1 1.0s ease-in-out 0.0s forwards;}

#shopGuide.open {animation: openMenu2 0.8s ease-in-out 0.3s forwards;}
#myNintendo.open {animation: openMenu3 0.8s ease-in-out 0.3s forwards;}

#visual00.open {animation: openTop2 1.0s ease-in-out 0.0s forwards;}
#visual04.open {animation: openTop1 1.0s ease-in-out 0.0s forwards;}
#visual04m.open {animation: openTop1 1.0s ease-in-out 0.0s forwards;}
#visual01.open {animation: openTop3 1.0s ease-in-out 0.3s forwards;}
#visual03.open {animation: openTop1 1.0s ease-in-out 0.4s forwards;}
#visual02.open {animation: openTop1 1.5s ease-in-out 0.5s forwards;}



@keyframes openTop1 {
0% 		{transform: translate3d(-50%,50px,0);  opacity: 0;}
100% 	{transform: translate3d(-50%,0,0); opacity: 1.0;}
}
@keyframes openTop2 {
0% 		{opacity: 0;}
100% 	{opacity: 1.0;}
}
@keyframes openTop3 {
0% 		{transform: translate3d(-50%,-5%,0) scale(1.3); opacity: 0;}
100% 	{transform: translate3d(-50%,0,0) scale(1.0); opacity: 1.0;}
}
@keyframes openMenu1 {
0% 		{transform: translate3d(0,-50px,0);  opacity: 0;}
100% 	{transform: translate3d(0,0,0); opacity: 1.0;}
}

@keyframes openMenu2 {
0% 		{transform: translate3d(250px,0,0);  opacity: 0;}
100% 	{transform: translate3d(0,0,0); opacity: 1.0;}
}
@keyframes openMenu3 {
0% 		{transform: translate3d(300px,0,0);  opacity: 0;}
100% 	{transform: translate3d(0,0,0); opacity: 1.0;}
}


/*-------------------------
*CONTENTS TITLE
-------------------------*/
#pageHead {
	padding: 20px 0 10px;
	background: url(../img/common/common_body.png?v2);
}
.cHead {
	width: 100%;
	height: 45px;
	background: url(../img/common/common_foot.png?v2) repeat-x;
}
.cFoot {
	width: 100%;
	height: 45px;
	background: url(../img/common/common_head.png?v2) repeat-x;
}
.line1 {
	width: 100%;
	height: 14px;
	background: url(../img/common/bg_line01.png?v2) repeat-x;
}
.line2 {
	width: 100%;
	height: 14px;
	background: url(../img/common/bg_line02.png?v2) repeat-x;
}
section h2 {
	width: 60%;
	margin: 0 auto;
	opacity: 0.0;
}
article h4 {
	width: 220px;
	margin: 0 auto 20px;
}

section h2 img,article h4 img {
	width: 100%;
}

section h2.open {animation: fadeUp1 1.0s ease-in-out 0.0s forwards;}

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

@media screen and (min-width: 1025px) {
	section h2 {
		width: 300px;
	}
	#pageHead {
		padding: 80px 0 10px;
	}
}
/*-------------------------
*INFORMATION
-------------------------*/
#information {}
#infoInner {background: url(../img/common/common_body.png?v2);}

.info01 {
	width: 90%;
	max-width: 980px;
	margin: 0 auto;
	padding: 20px 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	opacity: 0.0;
}
.infoBox {
	width: 100%;
	margin-bottom: 3.0rem;
}
.infoBox h4 {
	width: 100%;
}
.infoBox h4 img {
	width: 100%;
}
.newsArea {
	width: 100%;
	height: 250px;
	overflow: auto;
	padding: 15px;
	/*background: #FFF;*/
	border-radius: 5px;
}
.newsArea dl {
	display: flex;
	flex-direction: column;
	border-bottom: dotted 3px #aea29c;
	margin-bottom: 1.0rem;
}
.newsArea dl dt {
	width: 100%;
	padding-bottom: 1.0rem;
	font-family: 'Josefin Sans', sans-serif;
	font-size:1.4rem;
	font-weight: 500;
	color: #f76575;
}
.newsArea dl dd {
	width: 100%;
	padding-bottom: 1.0rem;
	font-size: 1.2rem;
	line-height: 1.4;
	color: #390000;
}

.info01.open {animation: infoIn 0.6s ease-in-out 0.0s forwards;}
.info02.open {animation: infoIn 0.6s ease-in-out 0.0s forwards;}

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

@media screen and (min-width: 1025px) {
	.infoBox {
		width: 470px;
		margin-bottom: 0.0rem;
	}
	.infoBox h4 {
		width: 470px;
	}
	.newsArea dl dt {
		width: 100%;
		padding-bottom: 0.5rem;
	}
	.newsArea dl dd {
		width: 100%;
	}
}

/*-------------------------
*CONCEPT
-------------------------*/
#concept {
	width: 100%;
	background: url(../img/common/bg_concept.jpg)no-repeat center top;
	background-size: cover;
	background-attachment: local;
}
#conceptBg {
	width: 100%;
	background: none;
	padding: 30px 0;
	opacity: 0.0;
}
#conceptInner {
	width: 90%;
	margin: 0 auto;
	padding-top: 50px;
}
#conceptInner p {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.2rem;
	line-height: 2.0;
	font-weight: 500;
	color: #390000;
	text-align: center;
	margin: 0 0 4.0rem;
	text-shadow: 0 0 4px #FFF,0 0 4px #FFF,0 0 4px #FFF,
	0 0 4px #FFF,0 0 4px #FFF,0 0 4px #FFF,0 0 4px #FFF;
	transform: rotate(0.05deg);
	opacity: 0.0;
}
#conceptInner p span {
	font-size: 1.2em;
	font-weight: 900;
}
#conceptBg.open  {animation: openFade 2.0s ease-in-out 0.0s forwards;}
#conceptInner p.open {animation: fadeUp1 1.0s ease-in-out 0.0s forwards;}

@keyframes openFade {
0% 		{opacity: 0;}
100% 	{opacity: 1.0;}
}

@media screen and (min-width: 1025px) {
	#concept {
		background-attachment: fixed;
	}
	#conceptBg {
		width: 100%;
		background: url(../img/top/con_chr_bg.png?v2) no-repeat center center;
	}
	#conceptInner {
		width: 980px;
	}
	#conceptInner p {
		font-size: 1.6rem;
		transform: rotate(0.05deg);
	}
}
/*-------------------------
*MOVIE
-------------------------*/
#movie {background: url(../img/common/common_body.png?v2);}
#movie h2 {margin-bottom: 20px;}
#movieP {
	width: 80%;
	background: #FFF;
	margin: 0 auto;
	opacity: 0.0;
}
#movieP img {
	width: 100%;
	box-shadow: 0 0 5px rgba(0,0,0,0.3);
}
#movie p {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.8rem;
	font-weight: 900;
	letter-spacing: 0.0em;
	color: #390000;
	padding: 10px 0;
	text-align: center;
	text-shadow: 0 0 4px #FFF,0 0 4px #FFF,0 0 4px #FFF,
	0 0 4px #FFF,0 0 4px #FFF,0 0 4px #FFF,0 0 4px #FFF;
	transform: rotate(0.05deg);
	opacity: 0.0;
}
#movie p span {
	font-size: 0.8em;
	font-weight: 500;
}
#movieP a img {transition: all 0.5s;}
#movieP a:hover img {
	opacity: 0.5;
}

#movieP.open {animation: fadeUp1 1.0s ease-in-out 0.0s forwards;}
#movie p.open {animation: fadeUp1 1.0s ease-in-out 0.2s forwards;}

@media screen and (min-width: 1025px) {
	#movieP {
		width: 750px;
	}
}
/*-------------------------
*STORY
-------------------------*/

#pStr {
	background: url(../img/common/bg_story.jpg?v1.1) no-repeat top center;
	background-attachment: fixed;
	background-size: cover;
}
#story {
}
#pStr #mainWrap {
	background: url(../img/common/tx01.png);
}
#strBody {
	margin-top: 50px;
}
#strBody article {
	width: 100%;
}
#strBody article p {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.0rem;
	font-weight: 500;
	line-height: 1.4;
	color: #390000;
	text-align: center;
	padding: 15px 0;
	text-shadow: 0 0 5px rgba(235,195,145,0.6);
	transform: rotate(0.05deg);
	opacity: 0.0;
}
#strBody article p span {
	font-size: 1.2em;
	font-weight: 900;
}
.mb {display: block;}
.strP {
	width: 80%;
	margin: 0 auto;
	padding: 15px 0;
	opacity: 0.0;
}
.strP img {width: 100%;}

#strBody p.open {animation: fadeUp1 1.0s ease-in-out 0.2s forwards;}
#strBody div.open {animation: fadeUp1 1.0s ease-in-out 0.2s forwards;}

@media screen and (min-width: 1025px) {
	#strBody article p {
		font-size: 1.6rem;
	}
	.strP {
		width: 848px;
	}
	.mb {display: none;}
}

/*-------------------------
*CHARACTER
-------------------------*/
#pChr1 {
	background: url(../img/common/bg_chara1.jpg?v1.1) no-repeat top center;
	background-attachment: scroll;
	background-size: cover;
}
#pChr2 {
	background: url(../img/common/bg_chara2.jpg?v1.1) no-repeat top center;
	background-attachment: scroll;
	background-size: cover;
}
#pChr3 {
	background: url(../img/common/bg_chara3.jpg?v1.1) no-repeat top center;
	background-attachment: scroll;
	background-size: cover;
}
#pChr1 #mainWrap,#pChr2 #mainWrap,#pChr3 #mainWrap {
	background: url(../img/common/tx01.png);
}
#character {}
#chrBody {margin-top: 50px;}
#chrNavi {
	width: 100%;
	background: #413229;
	box-shadow: 0 0 5px rgba(0,0,0,0.5);
	margin-bottom: 20px;
}
#chrNavi ul {
	width: 90%;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}
#chrNavi ul li {
	width: 30%;
	margin: 0 5px;
}
#chrP1 {
	background: url(../img/chara/b_chr01_o.png) no-repeat center center;
	background-size: cover;
}
#chrP2 {
	background: url(../img/chara/b_chr02_o.png) no-repeat center center;
	background-size: cover;
}
#chrP3 {
	background: url(../img/chara/b_chr03_o.png) no-repeat center center;
	background-size: cover;
}
#chrNavi ul li a img {
	width: 100%;
	transition: all 0.5s;
}
#chrNavi ul li a:hover img,
#chrNavi ul .act img {
	opacity: 0.0;
}


#chrBody article {
	width: 90%;
	height: 1500px;
	margin: 0 auto;
	position: relative;
}

#chrAbout,#chrCopy,#chrPict {
	position: absolute;
}
#chrAbout {
	top: 0;
	left: 0;
	z-index: 5;
	padding-top: 70%;
}
#chrCopy {
	width: 20%;
	top: 0;
	right: 0;
	z-index: 3;
	opacity: 0.0;
}
#chrPict {
	width: 100%;
	top: 0;
	left: 50%;
	z-index: 1;
	transform: translateX(-65%);
}
#chrPict img {width: 100%;}
#chrCopy img {width: 100%;}

.chrCatch,.chrName,.chrCv,
.chrCon p,.chrSta,.chrPro p {
	font-family: 'Noto Sans JP', sans-serif;
	color: #FFF;
	transform: rotate(0.05deg);
}
.chrEng,.chrCat {
	font-family: 'Josefin Sans', sans-serif;
}
.chrCatch {
	font-size: 1.2rem;
	font-weight: 900;
	margin-bottom: 5px;
	opacity: 0.0;
}
.chrName {
	font-size: 3.0rem;
	font-weight: 900;
	margin-bottom: 10px;
	letter-spacing: 0.15em;
	opacity: 0.0;
}
.chrName span {letter-spacing: 0.0em;}
.chrEng {
	font-size: 1.2rem;
	font-weight: 900;
	margin-bottom: 15px;
	opacity: 0.0;
}
#pChr1 .chrEng {color: #abd9ff;}
#pChr2 .chrEng {color: #c9ffab;}
#pChr3 .chrEng {color: #ffb08d;}

.chrCv {
	font-size: 1.8rem;
	font-weight: 900;
	margin-bottom: 5px;
	letter-spacing: 0.15em;
	opacity: 0.0;
}

.chrCv:before {
	content:"CV";
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 900;
	margin-right: 10px;
}

.chrCon,.chrPro {
	width: 100%;
	margin-bottom: 25px;
	opacity: 0.0;
}

#pChr1 .chrCon,#pChr1 .chrPro {
	padding: 10px;
	border-radius: 5px;
	background: rgba(10,95,165,0.75);
}
#pChr2 .chrCon,#pChr2 .chrPro {
	padding: 10px;
	border-radius: 10px;
	background: rgba(86,166,8,0.75);
}
#pChr3 .chrCon,#pChr3 .chrPro {
	padding: 10px;
	border-radius: 10px;
	background: rgba(217,100,6,0.75);
}

.chrCon p,.chrPro p {
	font-size: 1.0rem;
	font-weight: 500;
	line-height: 1.5;
}

.chrSta {
	margin-bottom: 25px;
	opacity: 0.0;
}
.chrSta dl {
	font-size: 1.0rem;
	font-weight: 500;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-between;
}
.chrSta dl dt {
	width: 30%;
	padding: 3px;
	margin-bottom: 5px;
	text-align: center;
}
.chrSta dl dd {
	width: 70%;
	padding: 3px 3px 3px 13px;
	margin-bottom: 5px;
	text-align: left;
}

#pChr1 .chrSta dl dt {background: #085ea6;}
#pChr2 .chrSta dl dt {background: #56a608;}
#pChr3 .chrSta dl dt {background: #d96406;}

.chrCat {
	font-size: 1.4rem;
	font-weight: 900;
	margin-bottom: 5px;
	letter-spacing: 0;
	text-shadow: 0 0 2px #FFF,0 0 2px #FFF,0 0 2px #FFF;
	opacity: 0.0;
}
#pChr1 .chrCat {color: #085ea6;}
#pChr2 .chrCat {color: #56a608;}
#pChr3 .chrCat {color: #d96406;}

#pChr1 .chrCatch,#pChr1 .chrName,#pChr1 .chrEng,#pChr1 .chrCv,
#pChr1 .chrCon p,#pChr1 .chrSta,#pChr1 .chrPro p {
	text-shadow: 0 0 5px #085ea6,0 0 5px #085ea6,0 0 5px #085ea6;
}
#pChr2 .chrCatch,#pChr2 .chrName,#pChr2 .chrEng,#pChr2 .chrCv,
#pChr2 .chrCon p,#pChr2 .chrSta,#pChr2 .chrPro p {
	text-shadow: 0 0 5px #56a608,0 0 5px #56a608,0 0 5px #56a608;
}
#pChr3 .chrCatch,#pChr3 .chrName,#pChr3 .chrEng,#pChr3 .chrCv,
#pChr3 .chrCon p,#pChr3 .chrSta,#pChr3 .chrPro p {
	text-shadow: 0 0 5px #d96406,0 0 5px #d96406,0 0 5px #d96406;
}

#chrVoice {
	padding-bottom: 25px;
	opacity: 0.0;
}

#chrVoice ul {
	display: flex;
	flex-direction: row;
}
#chrVoice li {
	width: 40px; height: 40px;
	margin: 0 15px 0 0;
}
#chrVoice a {
	display: block;
	position: relative;
	width: 100%; height: 100%;
	transition: all 0.5s;
}
#chrCos a,#chrGra a {
	transition: all 0.5s;
}
.chBtn1 {background: url(../img/chara/b_voice01.png)no-repeat;}
.chBtn2 {background: url(../img/chara/b_voice02.png)no-repeat;}
.chBtn3 {background: url(../img/chara/b_voice03.png)no-repeat;}
.chBtn1,.chBtn2,.chBtn3 {
	background-position: center center;
	background-size: cover;
}

#chrVoice a:hover,#chrCos a:hover,#chrGra a:hover,
#chrVoice a.voiceon {
	opacity: 0.6;
}
#chrCos,#chrGra {
	margin-bottom: 25px;
	opacity: 0.0;
}
#chrCos ul,#chrGra ul {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
#chrCos ul li,#chrGra ul li {
	width: 100px;
	background: #FFF;
	margin-right: 5px;
}

#chrAbout.open .chrCatch {animation: fadeRight1 0.7s ease-in-out 0.0s forwards;}
#chrAbout.open .chrName {animation: fadeRight1 0.7s ease-in-out 0.1s forwards;}
#chrAbout.open .chrEng {animation: fadeRight1 0.7s ease-in-out 0.2s forwards;}

#chrAbout.open .chrCv {animation: fadeRight1 0.7s ease-in-out 0.3s forwards;}
#chrAbout.open .chrCon {animation: fadeRight1 0.7s ease-in-out 0.4s forwards;}
#chrAbout.open .chrSta {animation: fadeRight1 0.7s ease-in-out 0.5s forwards;}

#chrAbout.open .chrCat {animation: fadeRight1 0.7s ease-in-out 0.6s forwards;}
#chrAbout.open #chrVoice {animation: fadeRight1 0.7s ease-in-out 0.6s forwards;}
#chrAbout.open #chrCos {animation: fadeRight1 0.7s ease-in-out 0.6s forwards;}
#chrAbout.open #chrGra {animation: fadeRight1 0.7s ease-in-out 0.6s forwards;}

#chrAbout.open .chrPro {animation: fadeRight1 0.7s ease-in-out 0.7s forwards;}
#chrCopy.open {animation: fadeDown1 0.7s ease-in-out 0.3s forwards;}


@keyframes fadeDown1 {
0% 		{transform: translate3d(0,-20px,0);  opacity: 0;}
100% 	{transform: translate3d(0,0,0); opacity: 1.0;}
}


@media screen and (min-width: 1025px) {
	#pChr1 {background-attachment: fixed;}
	#pChr2 {background-attachment: fixed;}
	#pChr3 {background-attachment: fixed;}

	#chrNavi ul {width: 980px;}
	#chrNavi ul li {width: 298px;}

	#chrBody article {
		width: 980px;
		height: 1500px;
	}
	#chrPict {
		width: 1380px;
		height: 1500px;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
	}
	#chrCopy {
		width: 130px;
		height: 620px;
	}
	#chrAbout {
		top: 0;
		left: 0;
		padding-top: 75px;
	}
	.chrCon,.chrPro {
		width: 470px;
		margin-bottom: 25px;
	}
	.chrSta dl {
		font-size: 1.2rem;
		width: 400px;
	}
	.chrSta dl dt {
		width: 150px;
	}
	.chrSta dl dd {
		width: 240px;
	}

	.chrName {
		font-size: 6.0rem;
		margin-bottom: 15px;
	}
	.chrEng {
		font-size: 1.6rem;
		margin-bottom: 25px;
	}
	.chrCv {
		font-size: 1.8rem;
		margin-bottom: 15px;
	}
	.chrCon p,.chrPro p {
		font-size: 1.4rem;
	}
}

/*-------------------------
*SYSTEM
-------------------------*/
#pSys {
	background: url(../img/common/bg_system.jpg?v1.1) no-repeat top center;
	background-attachment: scroll;
	background-size: cover;
}
#pSys #mainWrap {
	background: url(../img/common/tx01.png);
}
#system {}
#sysBody {
	margin-top: 50px;
}

#sysBody article {
	width: 90%;
	padding: 15px;
	margin: 20px auto 0;
}
#sysBody > article h3 {
	margin: 0 auto 15px;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.2rem;
	line-height: 1.5;
	font-weight: 900;
	color: #390000;
	text-shadow: 0 0 2px #FFF,0 0 2px #FFF,0 0 2px #FFF,
	0 0 2px #FFF,0 0 2px #FFF,0 0 2px #FFF,0 0 2px #FFF;
	letter-spacing: 0.0em;
	text-indent: 10px;
	transform: rotate(0.05deg);
	border-bottom: dotted 3px #390000;
	opacity: 0.0;
}
#sysBody > article h3 span {
	font-size: 1.2em;
	color: #eb6877;
}
#sysBox1,#sysBox3,#sysBox4,#sysBox5 {
	width: 100%;
	margin: 0 auto 30px;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-between;
	opacity: 0.0;
}
#sysBox2 {
	width: 100%;
	margin: 0 auto 30px;
	opacity: 0.0;
}
.sysAbout1 {
	width: 100%;
}
.sysAbout2 {
	width: 100%;
	margin: 0 auto 30px;
}
.sysAbout3 {
	width: 100%;
}
.sysAbout1 p,.sysAbout2 p,.sysAbout3 p {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.0rem;
	line-height: 1.5;
	font-weight: 900;
	color: #390000;
	text-shadow: 0 0 2px #FFF,0 0 2px #FFF,0 0 2px #FFF,
	0 0 2px #FFF,0 0 2px #FFF,0 0 2px #FFF,0 0 2px #FFF;
	letter-spacing: 0.0em;
	padding-bottom: 15px;
	transform: rotate(0.05deg);
}

.sysAbout3 h5 {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.4rem;
	line-height: 1.5;
	font-weight: 900;
	text-shadow: 0 0 2px #FFF,0 0 2px #FFF,0 0 2px #FFF,
	0 0 2px #FFF,0 0 2px #FFF,0 0 2px #FFF,0 0 2px #FFF;
	letter-spacing: 0.0em;
	padding-bottom: 15px;
	transform: rotate(0.05deg);
}
.col1 {color: #eb6776;}
.col2 {color: #ff7f0e;}

.sysPict1 {width: 100%;}
.sysPict2 {width: 100%;}
.sysPict3 {width: 100%;}

#sysImg1 {
	width: 100%;
	margin: 0 auto 40px;
	text-align: center;
	opacity: 0.0;
}
#sysImg2 {
	width: 100%;
	margin: 0 auto;
	text-align: center;
	border-radius: 5px;
	background: #FFF;
	box-shadow: 0 0 5px rgba(235,195,145,0.8);
	opacity: 0.0;
}

.sysPict1 img,.sysPict2 img,.sysPict3 img,.sysImg1 img {
	width: 100%;
}
#sysImg2 img {
	width: 84%;
}

#sysBody > article h3.open {animation: fadeRight1 0.9s ease-in-out 0.0s forwards;}
#sysBox1.open {animation: fadeUp1 0.9s ease-in-out 0.0s forwards;}
#sysBox2.open {animation: fadeUp1 0.9s ease-in-out 0.0s forwards;}
#sysBox3.open {animation: fadeUp1 0.9s ease-in-out 0.0s forwards;}
#sysBox4.open {animation: fadeUp1 0.9s ease-in-out 0.0s forwards;}
#sysBox5.open {animation: fadeUp1 0.9s ease-in-out 0.0s forwards;}
#sysImg1.open {animation: openFade 0.4s ease-in-out 0.0s forwards;}
#sysImg2.open {animation: openFade 0.4s ease-in-out 0.0s forwards;}

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

@media screen and (min-width: 1025px) {
	#pSys {
		background-attachment: fixed;
	}
	#sysBody article {
		width: 980px;
	}
	#sysBody > article h3 {
		font-size: 2.5rem;
	}
	.sysAbout1 p,.sysAbout2 p,.sysAbout3 p {
		font-size: 1.5rem;
	}
	#sysBox1,#sysBox3,#sysBox4,#sysBox5 {
		width: 900px;
		flex-direction: row;
		justify-content: space-between;
	}
	#sysBox2 {
		width: 900px;
	}
	.sysAbout1 {
		width: 490px;
	}
	.sysAbout2 {
		width: 900px;
	}
	.sysAbout3 {
		width: 400px;
	}
	.sysPict1 {width: 404px;}
	.sysPict2 {width: 884px;}
	.sysPict3 {width: 487px;}
	#sysImg1 {width: 624px;}
	#sysImg2 {width: 900px;}
	.sysAbout3 h5 {
		font-size: 1.8rem;
	}
}
/*-------------------------
*STAGE
-------------------------*/
#pStg {
	background: url(../img/common/bg_stage.jpg?v1.1) no-repeat top center;
	background-attachment: fixed;
	background-size: cover;
}
#pStg #mainWrap {
	background: url(../img/common/tx01.png);
}
#stage {}
#stgBody {}

#stgBody article {
	width: 90%;
	padding: 15px;
	margin: 20px auto 0;
}
#stgBody article h3 {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.2rem;
	line-height: 1.5;
	font-weight: 900;
	color: #390000;
	text-align: center;
	letter-spacing: 0.015em;
	text-shadow: 0 0 5px #FFF,0 0 5px #FFF,0 0 5px #FFF,0 0 5px #FFF,
	0 0 5px #FFF,0 0 5px #FFF,0 0 5px #FFF,0 0 5px #FFF,0 0 5px #FFF;
	margin-bottom: 2.0rem;
	transform: rotate(0.05deg);
	opacity: 0.0;
}
#stgBody article h3 span {
	color: #f76575;
}
#stgBody article ul {
	width: 100%;
	margin: 0 auto;
}
#stgBody article ul li {
	margin-bottom: 7.0rem;
}
#stgBody article ul div {
	width: 100%;
	margin: 0 auto 1.0rem;
	opacity: 0.0;
}
#stgBody article ul div img {width: 100%;}
#stgBody article ul p {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.2rem;
	line-height: 1.5;
	font-weight: 500;
	color: #FFF;
	letter-spacing: 0.015em;
	background: #1c0101 url(../img/common/snow.png) no-repeat center right;
	border-radius: 10px;
	padding: 1.5rem;
	margin: 0 auto;
	transform: rotate(0.05deg);
	opacity: 0.0;
}
#stgBody article ul p a {
	color: #ff5a00;
}

#stgBody h3.open {animation: fadeUp1 0.9s ease-in-out 0.0s forwards;}
#stgBody div.open  {animation: openFade 0.8s ease-in-out 0.0s forwards;}
#stgBody p.open  {animation: fadeUp1 1.0s ease-in-out 0.1s forwards;}

@media screen and (min-width: 1025px) {
	#stgBody article {
		width: 980px;
	}
	#stgBody article h3 {
		font-size: 2.4rem;
	}
	#stgBody article ul {
		width: 888px;
	}
	#stgBody article ul div {
		width: 888px;
		margin: 0 auto 1.0rem;
	}
	#stgBody article ul p {
		font-size: 1.4rem;
	}
}
/*-------------------------
*PRODUCT
-------------------------*/
#pPrd {
	background: url(../img/common/bg_product.jpg?v1.1) no-repeat top center;
	background-attachment: scroll;
	background-size: cover;
}
#pPrd #mainWrap {
	background: url(../img/common/tx01.png);
}

#product {}
#prdBody {
	margin-top: 50px;
	background: url(../img/common/bg_ptn01.png?v2);
	/*background: rgba(255,255,255,0.4);*/
	box-shadow: 0 0 5px rgba(235,195,145,0.8);
	border-top: solid 5px #7d716a;
	border-bottom: solid 5px #7d716a;
}

#prdBody article {
	width: 90%;
	padding: 15px;
	margin: 20px auto 0;
}
.prd01 {
	width: 100%;
	margin: 0 auto;
	padding: 20px 0;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-between;
	align-items: stretch;
}
.specBox {
	width: 100%;
	margin-bottom: 0.0rem;
	padding: 1.4rem 0 0;
	opacity: 0.0;
}

.specBox dl {
	width: 100%;
	font-family: 'Noto Sans JP', sans-serif;
	letter-spacing: 0.015em;
	transform: rotate(0.05deg);
}
.specBox dl dt {
	width: 100%;
	padding-bottom: 0.5rem;
	font-size: 1.2rem;
	line-height: 1.5;
	font-weight: 900;
	color: #f76575;
	text-align: center;
}
.specBox dl dd {
	width: 100%;
	padding-bottom: 2.5rem;
	font-size: 1.4rem;
	line-height: 1.5;
	font-weight: 500;
	color: #390000;
	text-align: center;
	text-shadow: 0 0 5px rgba(235,195,145,0.6);
}
.specBox dl dd span a {
	margin-left: 5px;
	color: #2f9bf0;
	transition: all 0.5s;
}
.specBox dl dd span a:hover {
	color: #7dc6ff;
}
#prdBody.open .specBox {animation: fadeUp1 0.9s ease-in-out 0.0s forwards;}

@media screen and (min-width: 1025px) {
	#pPrd {background-attachment: fixed;}
	#prdBody article {width: 980px;}
	.specBox {width: 450px;}
	.specBox dl dd {font-size: 1.6rem;}
}

/*-------------------------
*SHOP BONUS
-------------------------*/
#pBns {
	background: url(../img/common/bg_bonus.jpg?v1.1) no-repeat top center;
	background-attachment: scroll;
	background-size: cover;
}
#pBns #mainWrap {
	background: url(../img/common/tx01.png);
}

#bonus {}
#bnsBody {
	margin-top: 5.0rem;
	background: url(../img/common/bg_ptn01.png?v2);
	box-shadow: 0 0 5px rgba(235,195,145,0.8);
	border-top: solid 5px #7d716a;
	border-bottom: solid 5px #7d716a;
	padding: 3.0rem 0;
}

#bnsBody article {
	width: 90%;
	margin: 0 auto 5.0rem;
	box-shadow: 0 0 3px #7d716a;
	padding: 6.0rem 2.0rem 2.0rem;
	border-radius: 10px;
	background: url(../img/common/bns_head.png?v1.1) repeat-x center top,#FFF;
}
#bnsBody article h3 {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 2.4rem;
	line-height: 1.5;
	font-weight: 900;
	color: #390000;
	text-align: center;
	text-shadow: 0 0 5px rgba(235,195,145,0.6);
	letter-spacing: 0.015em;
	padding-bottom: 10px;
	margin-bottom: 20px;
	border-bottom: dotted 8px #b8a6ae;
}

.bnsImg {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.bnsBtn {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.bnsPict {
	box-shadow: 0 0 3px #7d716a;
	margin-bottom: 1.0rem;
}
.bnsImg > div {
	margin: 0 1.0rem;
	position: relative;
}
.bnsImg > div > img {width: 100%;}
.bnsNum {
	position: absolute;
	top: -30px;
	left: -30px;
}
.bnsImg > div p {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.4rem;
	font-weight: 500;
	color: #FFF;
	text-align: center;
	text-shadow: 0 0 5px #7d716a;
	letter-spacing: 0.015em;
	background: #b8a6ae;
	padding: 10px;
	margin-bottom: 20px;
	border-radius: 5px;
}

.bnsBtn div a {
	width: 80%;
	display: block;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 2.4rem;
	line-height: 1.5;
	font-weight: 500;
	color: #FFF;
	text-align: center;
	text-shadow: 0 0 5px #7d716a;
	letter-spacing: 0.015em;
	background: #765651;
	padding: 1.0rem;
	margin: 0 auto 2.0rem;
	border: solid 2px #af8983;
	box-shadow: 0 0 3px #7d716a;
	transition: all 0.5s;
}
.bnsBtn div a:hover {
	color: #FFF;
	background: #af8983;
	border: solid 2px #FFF;
	box-shadow: 0 0 3px #ffb400;
}

.bnsBtn div p {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.4rem;
	font-weight: 500;
	color: #390000;
	text-align: center;
	text-shadow: 0 0 5px rgba(235,195,145,0.6);
	letter-spacing: 0.015em;
	margin-bottom: 10px;
}

@media screen and (min-width: 1025px) {
	#bnsBody article {
		width: 900px;
	}
	.bnsBtn div a {
		width: 600px;
	}
	.bnsImg {
		flex-direction: row;
	}
}
/*-------------------------
*FOOTER
-------------------------*/
footer {
	width: 100%;
	background: url(../img/common/bg_foot.png?v2) repeat-x;
	padding: 25px 0;
	letter-spacing: 0.0em;
}
#footLine {
	background: #765651;
	padding: 2px 0;
}
#footLogo {
	width: 100%;
	margin: 0 auto 10px;
	padding-top: 20px;
	display: flex;
	justify-content: center;
	flex-direction: row;
	flex-wrap: wrap;
}
#footLogo div {
	display:flex;
	justify-content: center;
	align-items: center;
	margin: 0 20px;
}
.bra01 {
	width: 120px;
	font-size: 0;
}
.bra02 {
	width: 145px; height: 52px;
	font-size: 0;
	background: url(../img/common/switch.svg) no-repeat center center;
	margin: 0 auto;
}

.bra01 a {
	transition: all 0.5s;
}
.bra01 a:hover {
	opacity: 0.6;
}

footer .copyright {
	font-size: 1.2rem;
	font-weight: 500;
	letter-spacing: 0.0em;
	color: #390000;
	text-align: center;
	padding: 5px 0;
}
@media screen and (min-width: 1025px) {

}
/*-------------------------
*STORE
-------------------------*/
#myNintendo {
	position: fixed;
	z-index: 100;
	width: 100%; height: 70px;
	bottom: 0;
	opacity: 0;
}
#myNintendo a {
	font-size:0;
	display: block;
	width: 100%; height: 100%;
	background: url(../img/common/store_nintendo.png?v1.1) no-repeat center center,#da0023;
	transition: all 0.5s;
}
#myNintendo a:hover {
	background: url(../img/common/store_nintendo.png?v1.1) no-repeat center center,#ff7800;
}

@media screen and (min-width: 1025px) {
	#myNintendo {
		width: 270px; height: 70px;
		bottom: 20px; right: 0;
		border-top: solid 2px #FFF;
		border-left: solid 2px #FFF;
		border-bottom: solid 2px #FFF;
		box-shadow: 0 0 5px rgba(0,0,0,0.75);
}
}

/*-------------------------
*SHARE
-------------------------*/

#shareArea {
	display: flex;
	justify-content: center;
}

#shareArea div a {
	width: 50px; height: 50px;
	text-align: center;
	display: block;
	margin: 40px 5px 20px;
	text-decoration: none;
	transition: all 0.6s;
}
#shareArea div a:hover {
	opacity: 0.3;
}

.shareTw {
	background: url(../img/common/icon_twitter.svg?v1.1) no-repeat center center #765651;
	background-size: 80%;
}
.shareFb {
	background: url(../img/common/icon_facebook.svg?v1.1) no-repeat center center #765651;
	background-size: 80%;
}
.shareLi {
	background: url(../img/common/icon_line.svg?v1.1) no-repeat center center #765651;
	background-size: 80%;
}


/*-------------------------
*LOADING
-------------------------*/
#loadBg {
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	z-index: 1000;
	background: url(../img/common/common_body.png?v2);
}

.loader,
.loader:before,
.loader:after {
	background: #FFF;
	-webkit-animation: load1 1s infinite ease-in-out;
	animation: load1 1s infinite ease-in-out;
	width: 1em;
	height: 4em;
}
.loader {
	color: #765651;
	text-indent: -9999em;
	margin: 88px auto;
	position: relative;
	font-size: 10px;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
}
.loader:before,
.loader:after {
	position: absolute;
	top: 0;
	content: '';
}
.loader:before {
	left: -1.5em;
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
}
.loader:after {
	left: 1.5em;
}
@-webkit-keyframes load1 {
	0%,
	80%,
	100% {
		box-shadow: 0 0;
		height: 4em;
	}
	40% {
		box-shadow: 0 -2em;
		height: 5em;
	}
}
@keyframes load1 {
	0%,
	80%,
	100% {
		box-shadow: 0 0;
		height: 4em;
	}
	40% {
		box-shadow: 0 -2em;
		height: 5em;
	}
}