@charset "UTF-8";

/*-------------------------
*FONT STYLE
-------------------------*/
html {
	font-family: 'Helvetica', 'Noto Sans Japanese',
	'Hiragino Kaku Gothic Pro', 'Meiryo', sans-serif;
	font-feature-settings: "palt" 1;
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	font-size: 62.5%;
}
body {
	width: 100%; height: 100%;
	background: url(../img/common/pt01.png?v3.0);
	background-attachment: fixed;
}

/*-------------------------
*INVIEW STYLE
-------------------------*/
.fadeIn {
	opacity: 0;
	padding-top: 150px;
	transition: all 1.0s;
}
.fadeIn.show {
	padding-top: 0px;
	opacity: 1;
}
#wrapper {
	display: none;
}



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

main, #visual {
	width: 100%;
	position: relative;
}

.mask1 {
	-webkit-mask-image: url(../img/top/mask02.svg?v=1.1);
	mask-image: url(../img/top/mask02.svg?v=1.1);
	-webkit-mask-size: cover;
	mask-size: cover;
}
.mainImage {
	width: 100%;
	position: absolute;
	top: 0;
	z-index: 10;
}
.vol1 .mainImage {
	width: 100%;
	background: url(../img/top/visual01_m.jpg?V=1.1) no-repeat top center;
	background-size: cover;
}
.vol2 .mainImage {
	width: 100%;
	background: url(../img/top/visual02_m.jpg?V=1.2) no-repeat top center;
	background-size: cover;
}
#visual:before, .mainImage:before {
	content: "";
	display: block;
	padding-top: 177.77777%;
}

.mainLogo {
	width: 90%;
	position: absolute;
	top: 50%; left: 50%;
	transform: translateX(-50%);
	z-index: 15;
}
.vol1 .mainLogo {
	background: url(../img/top/titlelogo01.png?V=1.1) no-repeat top center;
	background-size: cover;
}
.vol2 .mainLogo {
	background: url(../img/top/titlelogo02.png?V=1.1) no-repeat top center;
	background-size: cover;
}
.mainLogo:before {
	content: "";
	display: block;
	padding-top: 40%;
}

.mainSale {
	width: 90%;
	position: absolute;
	top: 70%; left: 50%;
	transform: translateX(-50%);
	z-index: 15;
	font-family: 'Poller One', cursive;
	font-size: 6.0vw;
	letter-spacing: -0.1em;
	color: #FFF;
	text-align: center;
	text-shadow: 0 0 5px #3d171f,0 0 5px #3d171f,0 0 5px #3d171f;
}
.mainSale span {
	font-size: 1.5em;
	color: #f04f89;
}


.pickupBana {
	width: 100%;
	position: absolute;
	bottom: 12%; left: 50%;
	transform: translateX(-50%);
	z-index: 16;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}

.pickupBana li {
	width: 30%; max-width: 320px;
	margin: 0 5px;
}
.pickupBana li img {width: 100%; height: auto;}

.coming {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}
.coming img {
	width: 70%; max-width: 312px;
}


@media screen and (min-width: 1025px) {
	.vol1 .mainImage {
		background: url(../img/top/visual01.jpg?V=1.1) no-repeat top center;
		background-size: cover;
	}
	.vol2 .mainImage {
		background: url(../img/top/visual02.jpg?V=1.2) no-repeat top center;
		background-size: cover;
	}
	#visual:before, .mainImage:before {
		padding-top: 62.5%;
	}
	.mask1 {
		-webkit-mask-image: url(../img/top/mask01.svg?v=1.2);
		mask-image: url(../img/top/mask01.svg?v=1.2);
		-webkit-mask-size: cover;
		mask-size: cover;
	}
	.mainLogo {
		width: 44.27%;
		top: 10%; right: 5%;
		transform: translateX(0%);
	}
	.mainSale {
		width: 44.27%;
		position: absolute;
		top: 37%; right: 5%;
		transform: translateX(0%);
		font-size: 3.0vw;
	}

.pickupBana {
	bottom: 30%; left: 50%;
	transform: translateX(0%);
	flex-direction: column;
}

}

/*-------------------------
*TOPICS
-------------------------*/
#topics {
	width: 100%;
	padding-top: 20px;
}

#topics ul {
	width: 90%;
	max-width: 940px;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}

#topics ul li {
	position: relative;
	margin-bottom: 1.0rem;
	background: #FFF;
}
#topics ul li.lBana {width: 100%;}
#topics ul li.sBana {width: 32%;}

#topics ul li a {
	display: block;
	width: 100%; height: 100%;
	box-shadow: 0 0 4px rgba(0,0,0,0.45);
	transition: all 0.5s;
}
#topics ul li a:hover {
	box-shadow: 0 0 4px rgba(255,125,0,1.0),0 0 4px rgba(255,125,0,1.0),
	0 0 4px rgba(255,125,0,1.0),0 0 4px rgba(255,125,0,1.0);
	opacity: 0.7;
}
#topics ul li img {
	width: 100%; height: auto;
}

@media screen and (min-width: 1025px) {

	#topics ul li {margin-bottom: 2.0rem;}
	#topics ul li.lBana {width: 940px;}
	#topics ul li.sBana {width: 300px;}
}

/*-------------------------
*INFORMATION
-------------------------*/
#information {
	width: 90%;
	max-width: 980px;
	margin: 0 auto 2.0rem;
	padding-top: 50px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}

.infoBox {
	position: relative;
	width: 100%;
	margin-bottom: 2.0rem;
}
.infoBox h4 {
	position: absolute;
	top: -10px; left: -10px;
	font-family: 'Poller One', cursive;
	font-size: 1.8rem;
	color: #FFF;
	width: 80%;
	background: #3d171f;
	padding: 10px 10px 10px 20px;
	display: block;
}
.infoBox h4 span {
	font-size: 0.8em;
	margin-left: 10px;
}
.mInfo:before {
	content: "\f5a1";
	font-family: fontawesome;
	margin-right: 5px;
	color: #f15e79;
}
.mTwitter:before {
	content: "\f099";
	font-family: fontawesome;
	margin-right: 5px;
	color: #00aeff;
}

.newsBox {
	width: 100%;
	background: rgba(255,255,255,1.0);
	padding: 50px 15px 15px;
	box-shadow: 0 0 4px rgba(0,0,0,0.45);
}
.newsBox:after {
	content: "";
	display: block;
	width: 100%;
	height: 5px;
	background: #3d171f;
}
.newsInner {
	width: 100%;
	height: 300px;
	overflow-y: auto;
}

.newsInner dl {
	width: 100%;
	margin-bottom: 15px;
	padding-bottom: 15px;
	border-bottom: dotted 2px #f15e79;
}
.newsInner dl dt {
	font-size: 1.2rem;
	letter-spacing: 0.15em;
	font-weight: bold;
	color: #FFF;
	width: 30%;
	margin-bottom: 10px;
	padding: 3px 3px 1px 4px;
	background: #f15e79;
}
.newsInner dl dd {
	font-size: 1.2rem;
	letter-spacing: 0.15em;
	line-height: 1.5;
	/*transform: rotate(0.03deg);*/
}

@media screen and (min-width: 1025px) {
	#information {margin: 0 auto 5.0rem;}
	.infoBox {
		max-width: 480px;
		margin-bottom: 0;
	}
}

/*-------------------------
*MOVIE
-------------------------*/
#moBg {
	height: auto;
	position: relative;
	background: url(../img/common/bg_product.jpg?v=1.1) no-repeat center center;
	background-size: cover;
	background-attachment: scroll;
}

.video1 {
	width: 90%; max-width: 650px;
	margin: 0 auto;
	background: #FFF;
	box-shadow: 0 0 5px rgba(0,0,0,0.35);
}

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

.video1 img {width: 100%; height: auto;}

@media screen and (min-width: 1025px) {
	#moBg {background-attachment: fixed;}
}
/*-------------------------
*STORY
-------------------------*/

#Story {
	/*background:rgba(255,175,0,0.6);*/
}

#stBg {
	height: auto;
	position: relative;
	background: url(../img/common/bg_story.jpg?v=1.1) no-repeat center center;
	background-size: cover;
	background-attachment: scroll;
}

.mainStory {
	position: initial;
	width: 90%; min-height: 900px;
	text-align: left;
	margin: 0 auto;
	padding: 65px 0px;
}
.mainStory p {
	font-family: 'M PLUS 1p', sans-serif;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.6;
	color: #FFF;
	text-shadow: 0 0 3px #8f2d00,0 0 3px #8f2d00,0 0 5px #8f2d00,0 0 5px #8f2d00;
	transform: rotate(0.03deg);
	margin-bottom: 2.0rem;
}


.strL {
	font-size: 1.5em;
	font-weight: 900;
}
.strM {
	font-size: 1.2em;
	font-weight: 900;
}
.strP01 {
	font-size: 1.2em;
	font-weight: 900;
	color: #ff3c9c;
}
.strP02 {
	font-size: 1.2em;
	font-weight: 900;
	color: #ffa2f3;
}
.strY01 {
	font-size: 1.2em;
	font-weight: 900;
	color: #ffc600;
}

.mainStory p rt {text-align: center;}
.mbr {display: none;}

.under {
	display: inline-block;
	background: linear-gradient(transparent 50%, rgba(250,45,135,0.5) 50%);
}

/*BG-CHARA*/
.stChara1 {
	display: none;
	position: absolute;
	width: 751px; height: 873;
	bottom: 0; right: 5%;
}
.stChara2 {
	display: none;
	position: absolute;
	width: 649px; height: 874;
	bottom: 0; right: 5%;
}


@media screen and (min-width: 1025px) {
	#stBg {
		height: 800px;
		background-attachment: fixed;
	}
	.mainStory {
		position: absolute;
		top: 0; left: 50%;
		transform: translateX(-50%);
		z-index: 10;
		width: 980px; height: auto;
		padding: 65px 20px;
	}

	.mbr {display: block;}

	/*BG-CHARA*/
	.stChara1 {display: block;}
	.stChara2 {display: block;}
}




/*-------------------------
*CHARACTER
-------------------------*/
#Character {
	/*background:rgba(0,255,255,0.6);*/
}

#chBg {
	position: relative;
	background: url(../img/common/bg_character.jpg?v=1.1) no-repeat center center;
	background-size: cover;
	background-attachment: scroll;
}

.chTop1,.chTop2,.chTop3 {
	width: 100%; max-width: 980px;
	margin: 0 auto;
	position: relative;
}
.chTop1:before,.chTop2:before,.chTop3:before {
	content: "";
	display: block;
	padding-top: 65%;
}
.chr01 {
	position: absolute;
	top: 0; left: -18%;
	z-index: 3;
	width: 70%; max-width: 784px;
}
.chr02 {
	position: absolute;
	top: 0; right: -10%;
	z-index: 2;
	width: 40%; max-width: 392px;
}
.chr03 {
	position: absolute;
	top: 0; right: 25%;
	z-index: 1;
	width: 35%; max-width: 343px;
}
.chr01 img,.chr02 img,.chr03 img {
	width: 100%; height: auto;
	transition: all 0.5s;
}
.chr01 img:hover,.chr02 img:hover,.chr03 img:hover {
	opacity: 0.0;
}
/*.chInner {
	position: relative;
	width: 100%; height: 100%;
}*/


.chTop1 .chr01 a {
	width: 100%; height: 100%;
	display: block;
	background: url(../img/character/kyouka_01_on.png)no-repeat;
	background-size: cover;
}
.chTop1 .chr02 a {
	width: 100%; height: 100%;
	display: block;
	background: url(../img/character/runa_02_on.png)no-repeat;
	background-size: cover;
}
.chTop1 .chr03 a {
	width: 100%; height: 100%;
	display: block;
	background: url(../img/character/shizune_02_on.png)no-repeat;
	background-size: cover;
}

.chTop2 .chr01 a {
	width: 100%; height: 100%;
	display: block;
	background: url(../img/character/runa_01_on.png)no-repeat;
	background-size: cover;
}
.chTop2 .chr02 a {
	width: 100%; height: 100%;
	display: block;
	background: url(../img/character/kyouka_02_on.png)no-repeat;
	background-size: cover;
}
.chTop2 .chr03 a {
	width: 100%; height: 100%;
	display: block;
	background: url(../img/character/shizune_02_on.png)no-repeat;
	background-size: cover;
}

/*NAME*/

.chName01,.chName02,.chName03 {
	position: absolute;
	bottom: 10%; left: 20%;
	text-align: center;
	transform: rotate(0.03deg);
}
.chTop1 .chName01 {left: 40%;}
.chTop1 .chName02 {left: 10%;}
.chTop1 .chName03 {left: 20%;}

.chTop2 .chName01 {left: 20%;}
.chTop2 .chName02 {left: 45%;}
.chTop2 .chName03 {left: 30%;}

.chName01 .chName,.chName02 .chName,.chName03 .chName {
	font-family: 'M PLUS 1p', sans-serif;
	font-size: 4.0vw;
	font-weight: 900;
	color: #FFF;
	margin-bottom: 0.2rem;
	text-shadow: 0 0 3px #3d171f,0 0 3px #3d171f,0 0 3px #3d171f,
	0 0 3px #3d171f,0 0 3px #3d171f;
}
.chName01 .chName span,.chName02 .chName span,.chName03 .chName span {
	font-family: 'Poller One', cursive;
	font-size: 0.4em;
	font-weight: normal;
	display: block;
}
.chName01 .chName span {color: #f3607a;}
.chName02 .chName span {color: #fb9f32;}
.chName03 .chName span {color: #32cefb;}

.chName01 .chVoice,.chName02 .chVoice,.chName03 .chVoice {
	font-family: 'M PLUS 1p', sans-serif;
	font-size: 2.0vw;
	font-weight: 800;
	color: #FFF;
	background: #3d171f;
	display: inline-block;
	padding: 2px 10px;
	border-radius: 2.0rem;
}
.chName01 .chVoice span,.chName02 .chVoice span,.chName03 .chVoice span {
	font-family: 'Poller One', cursive;
	font-weight: normal;
	margin-right: 5px;
}

@media screen and (min-width: 1025px) {
	#chBg {background-attachment: fixed;}
	.chName01 .chName,.chName02 .chName,.chName03 .chName {
		font-size: 4.0rem;
		margin-bottom: 1.0rem;
		text-shadow: 0 0 3px #3d171f,0 0 3px #3d171f,0 0 3px #3d171f,
			0 0 3px #3d171f,0 0 3px #3d171f,0 0 3px #3d171f,0 0 3px #3d171f,
			0 0 3px #3d171f,0 0 3px #3d171f,0 0 3px #3d171f,0 0 3px #3d171f,
			0 0 3px #3d171f,0 0 3px #3d171f,0 0 3px #3d171f,0 0 3px #3d171f,
			0 0 3px #3d171f,0 0 3px #3d171f,0 0 3px #3d171f,0 0 3px #3d171f;
	}
	.chName01 .chVoice,.chName02 .chVoice,.chName03 .chVoice {
		font-size: 2.0rem;
	}
	.chTop1 .chName01 {left: 40%;}
	.chTop1 .chName02 {left: 20%;}
	.chTop1 .chName03 {left: 20%;}

	.chTop2 .chName01 {left: 20%;}
	.chTop2 .chName02 {left: 45%;}
	.chTop2 .chName03 {left: 40%;}


}
/*-------------------------
*CHARACTER個別
-------------------------*/
#CharacterPage {
	padding-top: 70px;
}

/*シリーズリンク*/
#seriesNavi {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	/*padding-bottom: 40px;*/
}
#seriesNavi li {
	width: 120px;
	margin: 0 5px;
	font-family: 'Poller One', cursive;
	font-size: 1.4rem;
	letter-spacing: -0.05em;
	color: #3d171f;
	text-align: center;
}
#seriesNavi li a {
	width: 100%; height: 100%;
	padding: 10px;
	display: block;
	background: #CCC;
	transition: all 0.5s;
	border-radius: 10px 10px 0 0 / 10px 10px 0 0;
}
#seriesNavi li.series1.active a {background: #f3607a;}
#seriesNavi li.series2.active a {background: #fb9f32;}
#seriesNavi li.series3.active a {background: #32cefb;}

#seriesNavi li.series1 a:hover {background: #fe4875;}
#seriesNavi li.series2 a:hover {background: #ffb714;}
#seriesNavi li.series3 a:hover {background: #14ecff;}

#chrGuide {
	padding-top: 40px;
}

#kyouka #chrGuide {
	border-top: solid 4px #f3607a;
	border-bottom: solid 10px #f3607a;
	background: url(../img/common/bg_character1.jpg) no-repeat center center;
	background-size: cover;
	background-attachment: scroll;
}
#runa #chrGuide {
	border-top: solid 4px #fb9f32;
	border-bottom: solid 10px #fb9f32;
	background: url(../img/common/bg_character2.jpg) no-repeat center center;
	background-size: cover;
	background-attachment: scroll;
}
#shizune #chrGuide {
	border-top: solid 4px #32cefb;
	border-bottom: solid 10px #32cefb;
}

/*ページインナー設定*/
#chrInner {
	position: relative;
	width: 90%; max-width: 980px;
	margin: 0 auto;
}

#chrInner:before {
	content: "";
	display: block;
	padding-top: 370%;
}

/*キャラクター背景*/
.kyouka1 #chrBox	{background: none;}
.kyouka2 #chrBox	{background: none;}
.runa1 #chrBox		{background: none;}
.runa2 #chrBox		{background: none;}
.shizune1 #chrBox	{background: none;}
.shizune2 #chrBox	{background: none;}

/*キャラクター立ち絵*/
#chrStand {
	position: absolute;
	top: 100px; right: 50%;
	transform: translateX(50%);
	width: 100%;
	z-index: 1;
}
#chrStand img {width: 100%; height: auto;}


/*汎用カテゴリー見出し*/
.cate {
	font-family: 'Poller One', cursive;
	font-size: 1.4rem;
	letter-spacing: -0.01em;
	color: #3d171f;
	margin-bottom: 5px;
}
.cate:before {
	content: "\f0da";
	font-family: fontawesome;
	color: #fa488a;
	margin-right: 5px;
}

/*項目初期設定*/
#cateP1,#chrSelect {
	position: absolute;
	z-index: 5;
}
/*ポジション設定*/
#cateP1			{top: 0; left: 0;}
#chrSelect		{top: 20px; left: 0;}

#chrAbout {
	position: absolute;
	top: 0; left: 0;
	z-index: 5;
	margin-top: 140%;
}

/*キャラクターページリンク*/
#chrSelect {
	display: flex;
	flex-direction: row;
	margin-bottom: 40px;
}
#chrSelect li {
	margin-right: 5px;
	background: #FFF;
}
#chrSelect li a {transition: all 0.5s}
#chrSelect li a:hover {opacity: 0.5;}

/*キャラクターネーム*/
#chrName {margin-bottom: 20px;}
#chrName p {
	width: 100%;
	font-family: 'M PLUS 1p', sans-serif;
	font-size: 5.0rem;
	font-weight: 800;
	color: #FFF;
	text-shadow: 0 0 3px #3d171f,0 0 3px #3d171f,0 0 3px #3d171f,
			0 0 3px #3d171f,0 0 3px #3d171f,0 0 3px #3d171f,0 0 3px #3d171f,
			0 0 3px #3d171f,0 0 3px #3d171f,0 0 3px #3d171f,0 0 3px #3d171f;
	transform: rotate(0.03deg);
}
/*ローマ字綴り*/
.kyouka1 #chrName p span,.kyouka2 #chrName p span,.kyouka3 #chrName p span,
.runa1 #chrName p span,.runa2 #chrName p span,.runa3 #chrName p span,
.shizune1 #chrName p span,.shizune2 #chrName p span,.shizune3 #chrName p span {
	font-family: 'Poller One', cursive;
	font-size: 1.8rem;
	font-weight: normal;
	display: block;
}
.kyouka1 #chrName p span,.kyouka2 #chrName p span,.kyouka3 #chrName p span {color: #f3607a;}
.runa1 #chrName p span,.runa2 #chrName p span,.runa3 #chrName p span {color: #fb9f32;}
.shizune1 #chrName p span,.shizune2 #chrName p span,.shizune3 #chrName p span {color: #32cefb;}

/*声優名称*/
#chrVoice {
	background: #3d171f;
	border-radius: 0 2.0rem 2.0rem 0;
	display: inline-block;
	padding: 5px 20px 5px 10px;
	margin-bottom: 10px;
}
#chrVoice p {
	font-family: 'M PLUS 1p', sans-serif;
	font-size: 1.8rem;
	font-weight: 500;
	color: #FFF;
	transform: rotate(0.03deg);
}
#chrVoice p:before {
	content: "CV";
	font-family: 'Poller One', cursive;
	font-weight: normal;
	margin-right: 5px;
}

/*サンプルボイス・服装選択ボタン*/
#sampleVoice {
	display: flex;
	flex-direction: row;
	/*margin-bottom: 10px;*/
}
.maiC {margin-bottom: 10px;}
.subC {margin-bottom: 10px;}

#sampleVoice2,#costumeSelect {
	display: flex;
	flex-direction: row;
	margin-bottom: 20px;
}
#sampleVoice li,#sampleVoice2 li,#costumeSelect li {
	margin-right: 2px;
}
#sampleVoice li a,#sampleVoice2 li a,#costumeSelect li a {
	width: 50px;
	height: 50px;
	display: block;
	position: relative;
	margin-right: 5px;
}
#sampleVoice li a:hover,#sampleVoice2 li a:hover,#costumeSelect li a:hover {
	opacity: 0.7;
}
#sampleVoice li a {
	background: rgba(61,23,31,1.0);
	border: solid 2px #6e5157;
}
#sampleVoice2 li a {
	background: rgba(250,70,140,1.0);
	border: solid 2px #fa96be;
}
#costumeSelect li a {
	background: rgba(27,173,241,1.0);
	border: solid 2px #8cd7fa;
	font-family: 'Poller One', cursive;
	font-size: 2.0rem;
	line-height: 50px;
	color: #FFF;
	text-align: center;
}
#sampleVoice li a:before,#sampleVoice2 li a:before {
	content: "\f028";
	font-family: fontawesome;
	font-size: 2.4rem;
	line-height: 46px;
	position: absolute;
	left: 50%;
	margin-left: -1.4rem;
	color: #FFF;
}
#sampleVoice li a:before {content: "\f028";}
#sampleVoice2 li a:before {content: "\f004";}
#sampleVoice li a.voiceon {
	background: #f15e79;
	border: solid 2px #FFF;
	box-shadow: 0 0 5px #f15e79;
}
#sampleVoice2 li a.voiceon {
	background: #ffa528;
	border: solid 2px #FFF;
	box-shadow: 0 0 5px #ffa528;
}
#costumeSelect li a.over {
	background: #ffa528;
	border: solid 2px #FFF;
	box-shadow: 0 0 5px #ffa528;
}

/*プロフィール設定*/
#chrProfile p {
	font-family: 'M PLUS 1p', sans-serif;
	font-size: 1.6rem;
	line-height: 1.5;
	font-weight: 500;
	color: #FFF;
	text-shadow: 0 0 3px #3d171f,0 0 3px #3d171f,0 0 3px #3d171f,
			0 0 3px #3d171f,0 0 3px #3d171f,0 0 3px #3d171f,0 0 3px #3d171f,
			0 0 3px #3d171f,0 0 3px #3d171f,0 0 3px #3d171f,0 0 3px #3d171f;
	transform: rotate(0.03deg);
	margin-bottom: 2.0rem;
}

/*#touchMode {
	position: absolute;
	top: -40px; right: -20px;
	z-index: 10;
}
#touchMode li a {
	width: 100px;
	display: block;
	font-family: 'Poller One', cursive;
	font-size: 1.2rem;
	letter-spacing: -0.1em;
	line-height: 1.0;
	color: #FFF;
	text-align: center;
	transform: rotate(0.03deg);
	padding: 10px;
	background: rgba(61,23,31,1.0);
	border: solid 2px #6e5157;
}
#touchMode li.active {display: none;}*/


@media screen and (min-width: 768px) {

	#CharacterPage {padding-top: 100px;}

	/*ページインナー設定*/
	#chrInner {
		position: relative;
		width: 90%; max-width: 980px;
		margin: 0 auto;
	}
	.subC {margin-bottom: 100px;}
	#kyouka #chrGuide {
		background-attachment: fixed;
	}
	#runa #chrGuide {
		background-attachment: fixed;
	}
	#chrInner:before {
		content: "";
		display: block;
		padding-top: 85%;
	}

	#chrInner.kyouka1	{background: url(../img/character/bg_kyouka01.png?v=1.1) no-repeat center top;}
	#chrInner.kyouka2	{background: url(../img/character/bg_kyouka02.png?v=1.1) no-repeat center top;}
	#chrInner.runa1		{background: url(../img/character/bg_runa01.png?v=1.1) no-repeat center top;}
	#chrInner.runa2		{background: url(../img/character/bg_runa02.png?v=1.1) no-repeat center top;}
	#chrInner.shizune1	{background: url(../img/character/bg_shizune01.png?v=1.1) no-repeat center top;}
	#chrInner.shizune2	{background: url(../img/character/bg_shizune02.png?v=1.1) no-repeat center top;}

	/*ポジション設定*/
	#cateP1			{top: 0; left: 0;}
	#chrSelect		{top: 20px; left: 0;}
	#chrAbout		{top: 135px; left: 0; margin-top: 0%;}

	#chrStand {
		position: absolute;
		top: -30px; right: 50%;
		transform: translateX(95%);
		width: 70%; max-width: 686px;
		z-index: 1;
	}
}
/*-------------------------
*CONCEPT
-------------------------*/
#Concept {
	/*background:rgba(255,175,0,0.6);*/
}
#coBg {
	position: relative;
	background: url(../img/common/bg_concept.jpg?v=1.1) no-repeat center center;
	background-size: cover;
	background-attachment: scroll;
}
.coBox {
	width: 100%; max-width: 980px;
	height: 500px;
	margin: 0 auto;
	padding: 65px 20px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	overflow: auto;
}

.coBox > h4 {
	width: 100%;
	font-family: 'Poller One', cursive;
	font-size: 1.6rem;
	color: #FFF;
	padding: 10px;
	margin-bottom: 20px;
	transform: skew(-25deg);
	box-shadow: 3px 3px 0 rgba(0,0,0,0.5);
}
.coBox > h4 span {
	display: inline-block;
	transform: skew(25deg);
	padding-left: 15px;
}
.coBox > h4.concept1 {background: #7ddf00;}
.coBox > h4.concept2 {
	background: #1ac2ff;
	margin-top: 50px;
}
.coBox > h4.concept3 {
	background: #ff349d;
	margin-top: 50px;
}

.coBox p {
	width: 100%;
	font-family: 'M PLUS 1p', sans-serif;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.6;
	color: #3d171f;
	padding: 0 15px;
	letter-spacing: -0.01em;
	transform: rotate(0.03deg);
	text-shadow: 0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,
	0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,
	0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,
	0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,
	0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF;
	margin-bottom: 2.0rem;
}
.coM1 {
	font-size: 1.2em;
	font-weight: 900;
	line-height: 1.8;
	border-bottom: solid 5px #7ddf00;
}
.coM2 {
	font-size: 1.2em;
	font-weight: 900;
	line-height: 1.8;
	border-bottom: solid 5px #1ac2ff;
}
.coM3 {
	font-size: 1.2em;
	font-weight: 900;
	line-height: 1.8;
	border-bottom: solid 5px #ff349d;
}
.conL {
	font-size: 1.5em;
	font-weight: 900;
}
.conM {
	font-size: 1.2em;
	font-weight: 900;
}
.conP01 {
	font-size: 1.2em;
	font-weight: 900;
	color: #ff3c9c;
}
.conP02 {
	font-size: 1.2em;
	font-weight: 900;
	color: #ffa2f3;
}
.conB01 {
	font-size: 1.2em;
	font-weight: 900;
	color: #18e1ff;
}
.conO01 {
	font-size: 1.2em;
	font-weight: 900;
	color: #fb9f32;
}

.conceptMemo {width: 100%;}
.conceptImage {
		width: 100%;
		text-align: center;
	}
.conceptImage img {width: 100%; height: auto;}

@media screen and (min-width: 1025px) {
	#coBg {background-attachment: fixed;}
	.conceptMemo {width: 540px;}
	.conceptImage {width: 400px;}
	.coBox {
		height: auto;
	}
}

/*.cosomos {
	width: 400px;
	padding-left: 15px;
	margin-bottom: 1.8rem;
}
.cosomos img {
	width: 100%; height: auto;
}*/



/*-------------------------
*SYSTEM
-------------------------*/
#System {
	/*background:rgba(255,175,0,0.6);*/
}
#syBg {
	position: relative;
	background: url(../img/common/bg_minigame.jpg?v=1.1) no-repeat center center;
	background-size: cover;
	background-attachment: scroll;
}
.syBox {
	width: 100%; max-width: 980px;
	height: 500px;
	overflow: auto;
	margin: 0 auto;
	padding: 65px 20px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.syBox p {
	width: 100%;
	font-family: 'M PLUS 1p', sans-serif;
	letter-spacing: -0.01em;
	transform: rotate(0.03deg);
}
.syBox > h4 {
	width: 100%;
	font-family: 'M PLUS 1p', sans-serif;
	font-size: 3.0rem;
	font-weight: 900;
	color: #FFF;
	margin-bottom: 20px;
	letter-spacing: -0.01em;
	transform: rotate(0.03deg);
	display: inline-block;
	background: none;
	text-shadow: 0 0 3px #ff78b4,0 0 3px #ff78b4,0 0 3px #ff78b4,
	0 0 3px #ff78b4,0 0 3px #ff78b4,0 0 3px #ff78b4,0 0 3px #ff78b4,
	0 0 3px #ff78b4,0 0 3px #ff78b4,0 0 3px #ff78b4,0 0 3px #ff78b4,
	0 0 3px #ff78b4,0 0 3px #ff78b4,0 0 3px #ff78b4,0 0 3px #ff78b4,
	0 0 3px #ff78b4,0 0 3px #ff78b4,0 0 3px #ff78b4,0 0 3px #ff78b4;
}
.sysM01-1 {
	font-size: 2.6rem;
	font-weight: 900;
	color: #ff378b;
	margin-bottom: 1.0rem;
	text-shadow: 0 0 3px #3d171f,0 0 3px #3d171f,0 0 3px #3d171f,
	0 0 3px #3d171f,0 0 3px #3d171f,0 0 3px #3d171f,0 0 3px #3d171f,
	0 0 3px #3d171f,0 0 3px #3d171f,0 0 3px #3d171f,0 0 3px #3d171f,
	0 2px 3px #3d171f,0 2px 3px #3d171f,0 2px 3px #3d171f,0 2px 3px #3d171f,
	0 2px 3px #3d171f,0 2px 3px #3d171f,0 2px 3px #3d171f,0 2px 3px #3d171f;
}
.sysCap01 {
	font-size: 1.6rem;
	line-height: 1.5;
	font-weight: 800;
	color: #FFF;
	margin-bottom: 2.0rem;
	letter-spacing: 0em;
	text-shadow: 0 0 2px #3d171f,0 0 2px #3d171f,0 0 2px #3d171f,
	0 0 2px #3d171f,0 0 2px #3d171f,0 0 2px #3d171f,0 0 2px #3d171f,
	0 0 2px #3d171f,0 0 2px #3d171f,0 0 2px #3d171f,0 0 2px #3d171f,
	0 2px 2px #3d171f,0 2px 2px #3d171f,0 2px 2px #3d171f,0 2px 2px #3d171f,
	0 2px 2px #3d171f,0 2px 2px #3d171f,0 2px 2px #3d171f,0 2px 2px #3d171f;
}
.sysImage01 {
	width: 100%; max-width: 930px;
	text-align: center;
}
.sysImage02 {
	width: 100%; max-width: 450px;
	margin: 0 auto;
	text-align: center;
}

.sysImage01 img,.sysImage02 img,.sysPict img {width: 100%; height: auto;}

.sysBlock {
	width: 100%; max-width: 930px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-bottom: 3.0rem;
}
.sysMemo{
	width: 100%;
	margin: 0 auto;
}
.sysPict {
	width: 100%;
	margin: 0 auto 15px;
}


.coNum1-1 {order:2;}
.coNum2-2{order:1;}
.coNum1-2 {order:1;}
.coNum2-2 {order:2;}

.caution {
	font-size: 1.2rem;
	line-height: 1.5;
	text-align: right;
	color: #FFF;
	padding: 5px 0px;
	text-shadow: 0 0 2px #3d171f,0 0 2px #3d171f,0 0 2px #3d171f,
	0 0 2px #3d171f,0 0 2px #3d171f,0 0 2px #3d171f,0 0 2px #3d171f,
	0 0 2px #3d171f,0 0 2px #3d171f,0 0 2px #3d171f,0 0 2px #3d171f,
	0 2px 2px #3d171f,0 2px 2px #3d171f,0 2px 2px #3d171f,0 2px 2px #3d171f;
}

.sysA1 {
	font-size: 2.0rem;
	font-weight: 900;
	color: #3afffd;
}
.sysA2 {
	font-size: 2.0rem;
	font-weight: 900;
	color: #ff378b;
}

.syBox > h5 {
	width: 100%;
	font-family: 'M PLUS 1p', sans-serif;
	font-size: 1.6rem;
	font-weight: 800;
	color: #FFF;
	padding: 10px;
	margin-bottom: 20px;
	transform: skew(-25deg);
	background: #3d171f;
	box-shadow: 3px 3px 0 rgba(0,0,0,0.5);
}
.syBox > h5 span {
	display: inline-block;
	transform: skew(25deg) rotate(0.03deg);
	padding-left: 15px;
}
.sysCap {
	font-family: 'M PLUS 1p', sans-serif;
	font-size: 1.4rem;
	line-height: 1.5;
	font-weight: 500;
	color: #3d171f;
	padding: 10px;
	margin-bottom: 2.0rem;
	background: rgba(255,225,170,0.8);
	border: solid 2px #c2b295;
	border-radius: 5px;
	box-shadow: 0 0 5px rgba(0,0,0,0.45);
}

@media screen and (min-width: 1025px) {
	.sysMemo{width: 460px;}
	.sysPict {width: 430px;}

	.coNum1-1 {order:1;}
	.coNum2-2{order:2;}
	.coNum1-2 {order:1;}
	.coNum2-2 {order:2;}
	#syBg {background-attachment: fixed;}
	.syBox {height: auto;}
	.syBox > h4 {background: linear-gradient(transparent 50%, rgba(255,120,180,0.9) 50%);}
}




/*-------------------------
*GRAPHIC
-------------------------*/
#Graphic {
	/*background:rgba(255,175,0,0.6);*/
}
#grBg {
	position: relative;
	background: url(../img/common/bg_graphic.jpg?v=1.1) no-repeat center center;
	background-size: cover;
	background-attachment: scroll;
}
.cgBox {
	width:90%; max-width: 980px;
	margin: 0 auto;
	padding: 65px 0px;
}
.cgBox ul {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}
.cgBox ul li {
	width: 48%;
	margin-bottom: 1.0rem;
	background: #FFF;
	box-shadow: 0 0 5px rgba(0,0,0,0.35);
	position: relative;
}
.gnew {
	width: 50px; height: 20px;
	background: url(../img/top/new.png) no-repeat;
	position: absolute;
	top: -10px; left: -10px;
}
.cgBox ul li img {
	width: 100%; height: auto;
}
.cgBox ul li a {
	width: 100%; height: 100%;
	overflow: hidden;
	display: block;
}
.cgBox ul li a img {
	transition: all 0.4s;
	opacity: 1.0;
}
.cgBox ul li a img:hover {
	transform:scale(1.2);
	opacity: 0.5;
}


@media screen and (min-width: 1025px) {
	#grBg {background-attachment: fixed;}
	.cgBox ul li {
		width: 300px;
		margin-bottom: 2.0rem;
	}
}
/*-------------------------
*SPECIAL
-------------------------*/
#Special {
	/*background:rgba(255,175,0,0.6);*/
}
#spBg {
	position: relative;
	background: url(../img/common/bg_special.jpg?v=1.1) no-repeat center center;
	background-size: cover;
	background-attachment: scroll;
}
.spBox {
	width: 90%; max-width: 980px;
	margin: 0 auto;
	padding: 65px 0px;
}
.spBox ul {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}
.spBox ul li {
	width: 100%; max-width: 450px;
	margin: 0 10px 1.0rem;
	background: #FFF;
	box-shadow: 0 0 5px rgba(0,0,0,0.35);
	position: relative;
}
.spBox ul li img {
	width: 100%; height: auto;
}
.spBox ul li a {
	width: 100%; height: 100%;
	display: block;
	transition: all 0.4s;
}
.spBox ul li a:hover {
	opacity: 0.5;
}

@media screen and (min-width: 1025px) {
	#spBg {background-attachment: fixed;}
	.spBox ul li {
		width: 450px;
		margin-bottom: 2.0rem;
	}
}




/*-------------------------
*PRODUCT
-------------------------*/
#Product {
	/*background:rgba(255,175,0,0.6);*/
}
#prBg {
	position: relative;
	background: rgba(255,255,255,0.5);
}
.prBox {
	width:90%; max-width: 980px;
	margin: 0 auto;
	padding: 65px 0px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.prInfo,.prSpec {
	width: 100%;
	padding: 0;
}
.prInfo {
	border-right: none;
	margin-bottom: 8.0rem;
}

.prInfo h5,.prSpec h5 {
	font-family: 'Poller One', cursive;
	font-size: 1.8rem;
	color: #3d171f;
	text-align: center;
	margin-bottom: 50px;
}
.kyouka .prInfo h5 span,.kyouka .prSpec h5 span {
	border-bottom: solid 5px #f3607a;
}
.runa .prInfo h5 span,.runa .prSpec h5 span {
	border-bottom: solid 5px #fb9f32;
}


.prBox dl {
	width: 100%;
	display:flex;
	flex-wrap: wrap;
	font-family: 'M PLUS 1p', sans-serif;
	font-size: 1.4rem;
	line-height: 1.5;
	font-weight: 500;
	letter-spacing: 0.05em;
	transform: rotate(0.03deg);
}
.prBox dl dt {
	width: 25%;
	padding: 10px 5px;
	color: #f15e79;
}
.kyouka .prBox dl dt { color: #f3607a; }
.runa .prBox dl dt { color: #fb9f32; }

.prBox dl dd {
	width: 75%;
	padding: 10px;
	color: #3d171f;
}
.attention {
	font-size: 0.9em;
	line-height: 1.2;
	color: #876032;
	margin-left: 2rem;
	padding-top: 10px;
}
.attention li {
	position: relative;
	margin-bottom: 5px;
}
.attention li:before {
	position: absolute;
	top: 1px;
	left: -20px;
	content: "※";
}

@media screen and (min-width: 1025px) {
	.prInfo,.prSpec {
		width: 50%;
		padding: 0 10px;
	}
	.prInfo {
		border-right: dotted 2px #3d171f;
		margin-bottom: 0rem;
	}

}

/*-------------------------
*SECTION
-------------------------*/
body section {
	width: 100%;
	margin: 0 auto 100px;
	padding: 30px 0 0 0;
	overflow: hidden;
}
body section > h2 {
	font-family: 'Poller One', cursive;
	font-size: 4.0rem;
	text-align: center;
	color: #3d171f;
	background: url(../img/common/bg_midashi.png) no-repeat center 4.4rem ;
	margin-bottom: 30px;
}
body section > h2:first-letter{
	color: #fa488a;
}

body section > h2 span {
	font-family: 'M PLUS 1p', sans-serif;
	font-size: 2.0rem;
	font-weight: 500;
	color: #ff3c9c;
	display: block;
	padding: 1.5rem 0 0 0;
	transform: rotate(0.03deg);
}
.innerBg {
	width: 100%; height: 100%;
	background: url(../img/common/pt_line01.png?v=1.2);
}
/*-------------------------
*TAB BOX
-------------------------*/

.plate {display: none;}

.tab.active{
  background:#F00;
  color:#FFF;
  transition: all 0.2s ease-out;
}
.plate.show{
  display:block;
}



.tabBox {
	display: none;
}

#lineUp {
	width: 100%;
	position: absolute;
	bottom: 5%;
}
#lineUp p {
	font-family: 'Poller One', cursive;
	font-size: 1.4rem;
	letter-spacing: -0.1em;
	color: #FFF;
	text-align: center;
	margin-bottom: 5px;
	text-shadow: 0 0 3px #3d171f,0 0 3px #3d171f,0 0 3px #3d171f,
			0 0 3px #3d171f,0 0 3px #3d171f,0 0 3px #3d171f,0 0 3px #3d171f,
			0 0 3px #3d171f,0 0 3px #3d171f,0 0 3px #3d171f,0 0 3px #3d171f;
}



main .verList {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
}
section .verList {
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	margin-left: 5%;
}

main .verList li {
	width: 30%; max-width: 204px;
	margin: 0 5px;
}
main .verList li img {width: 100%; height: auto;}

section .verList li {
	width: 140px;
	margin: 0 5px;
	font-family: 'Poller One', cursive;
	font-size: 1.4rem;
	letter-spacing: -0.05em;
	color: #3d171f;
	text-align: center;
}
main .verList li a {
	width: 100%;
	height: 100%;
	background: #FFF;
	display: block;
}

main .verList li.ch1.active a img {border: solid 2px #fe4875;}
main .verList li.ch2.active a img {border: solid 2px #fe4875;}
main .verList li.ch3.active a img {border: solid 2px #fe4875;}

@media screen and (min-width: 1025px) {
	#lineUp {bottom: 5%;}
	main .verList li {width: 204px; height: 64px;}
	main .verList li a img {transition: all 0.5s;}
	main .verList li a:hover img { opacity: 0.5; }
}


section .verList li a {
	width: 100%;
	height: 100%;
	display: block;
	transition: all 0.5s;
}
section .verList li a {
	padding: 10px;
	border-radius: 10px 10px 0 0 / 10px 10px 0 0;
}
section .verList li.ch1 a:hover {background: #fe4875;}
section .verList li.ch2 a:hover {background: #ffb714;}
section .verList li.ch3 a:hover {background: #14ecff;}

main .verList li.ch1 a img,main .verList li.ch2 a img,main .verList li.ch3 a img {
	transition: all 0.6s;
	border: solid 2px #FFF;
}

section .verList li.ch1 a,section .verList li.ch2 a,section .verList li.ch3 a {
	background: #CCC;
}

/*main .verList li.ch1.active a { background: #000; }
main .verList li.ch2.active a { background: #000; }
main .verList li.ch3.active a { background: #000; }*/

section .verList li.ch1.active a {background: #f3607a;}
section .verList li.ch2.active a {background: #fb9f32;}
section .verList li.ch3.active a {background: #32cefb;}

section .vol1 {
	border-top: solid 4px #f3607a;
	border-bottom: solid 10px #f3607a;
}
section .vol2 {
	border-top: solid 4px #fb9f32;
	border-bottom: solid 10px #fb9f32;
}
section .vol3 {
	border-top: solid 4px #32cefb;
	border-bottom: solid 10px #32cefb;
}

/*-------------------------
*GLOBAL MENU
-------------------------*/
/* TOGGLE BUTTON */

.toggleBtn {
	display: block;
	position: fixed;
	top: 0px; left: 0px;
	width: 50px; height: 50px;
	transition: all .5s;
	cursor: pointer;
	z-index: 300;
	background: #3d171f;
	border-radius: 0 0 10px 0;
	border-right: solid 2px #6e5157;
	border-bottom: solid 2px #6e5157;
}
.toggleBtn span {
	display: block;
	position: absolute;
	left: 8px;
	width: 30px;
	height: 2px;
	background-color: #6e5157;
	border-radius: 4px;
	transition: all 0.5s;
}
.toggleBtn span:nth-child(1) { top: 14px; }
.toggleBtn span:nth-child(2) { top: 24px; }
.toggleBtn span:nth-child(3) { bottom: 12px; }
.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);
}

/* mask */

#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;
}

/* navigation */

#global {
	width: 70%;
	display: block;
	position: fixed;
	top: 0; left: -100%;
	bottom: 0;
	z-index: 50;
	padding-top: 100px;
	background: rgba(30,15,5,0.9);
	overflow-x: hidden; overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	transition: all 0.3s;
	opacity: 0;
}
.open #global {
	left: 0;
	opacity: 1;
}
#global > h1 {
	width: 50%;
	margin: 0 auto 50px;
}
#global > h1 img {
	width: 100%; height: auto;
}
#global ul {
	font-family: 'Poller One', cursive;
	font-size: 1.6rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
}

#global ul li {
	text-align: center;
	margin-bottom: 20px;
}
#global ul li a {
	color: #FFF;
	text-shadow: 2px 2px 3px #2e221c;
	transition: all 0.5s;
}
#global ul#in li a {
	color: #FFF;
	text-shadow: 1px 1px 2px rgba(46,34,28,0.5);
	transition: all 0.5s;
}
#global ul li a span,#global ul#in li a span {
	font-family: 'M PLUS 1p', sans-serif;
	font-size: 1.2rem;
	font-weight: 500;
	color: #ff3c9c;
	display: block;
	transform: rotate(0.03deg);
	transition: all 0.5s;
}
#global ul li a:hover,#global ul#in li a:hover {
	color: #ffcc00;
	text-shadow: 0 0 3px #f15e7a,0 0 3px #f15e7a,
	0 0 3px #f15e7a,0 0 3px #f15e7a;
}
#global ul li a:hover span,#global ul#in li a:hover span {
	color: #ffcc00;
	text-shadow: 0 0 3px #f15e7a,0 0 3px #f15e7a,
	0 0 3px #f15e7a,0 0 3px #f15e7a;
}


@media screen and (min-width: 1025px) {

	header {
		width: 100%;
		padding: 10px;
		border-bottom: solid 1px rgba(0,0,0,0.0);
		position: fixed;
		top: 0;
		z-index: 100;
		/*opacity: 0.0;*/
		transition: all 0.2s;
	}
	header.scrollNav {
		background: rgba(61,23,31,0.9);
		border-bottom: solid 1px rgba(255,255,255,0.5);
		box-shadow: 0 0 5px rgba(0,0,0,0.6);
	}
	#global {
		padding: 0;
		display: block;
		position: static;
		opacity: 1.0;
		width: 100%;
		background: none;
		overflow-x: hidden; overflow-y: hidden;
	}
	#global ul {
		font-size: 1.6rem;
		flex-direction: row;
		justify-content: center;
	}
	#global ul li {
		margin: 0 15px;
	}
	#global ul li:last-child {
		margin-bottom: 0px;
	}
	#global > h1 {display: none;}

	/* TOGGLE BUTTON */
	.toggleBtn { display: none; }

	header.move {animation: gmenu 0.6s ease-in-out 0.0s forwards;}

	header#in {
		background: rgba(61,23,31,0.9);
		border-bottom: solid 1px rgba(255,255,255,0.5);
		box-shadow: 0 0 5px rgba(0,0,0,0.6);
	}
}

@keyframes gmenu {
0% 		{margin-top: -200px; opacity: 0.0;}
100% 	{margin-top: 0px; opacity: 1.0;}
}


/*-------------------------
*LOADING
-------------------------*/
#loadBg {
	display: none;
	position: fixed;
	width: 100%; height: 100vh;
	top: 0px; left: 0px;
	background: url(../img/common/pt01.png);
	z-index: 1000;
}
#loader {
	display: none;
	justify-content: center;
	align-items: center;
	font-family: 'Poller One', cursive;
	font-size: 1.8rem;
	letter-spacing: 0;
	color: #3d171f;
	text-shadow: 3px 3px 0 rgba(61,23,31,0.2);
}
#loadChr {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%,-180px);
	width: 129px; height: 169px;
	animation: loadSd 2s linear infinite;
}
@keyframes loadSd {
    0%		{transform: translate(-50%,-180px);}
    50%		{transform: translate(-50%,-200px);}
    100%	{transform: translate(-50%,-180px);}
}


/*-------------------------
*MODAL SETTING
-------------------------*/
#modal {
	display: none;
	position: fixed;
	width: 100%; height: 100vh;
	z-index:800;
	background: url(../img/common/pt01.png);
}
#modalLayout {
	width: 90%;
	text-align: center;
	position: absolute;
	top: 50%; left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit- transform: translateY(-50%) translateX(-50%);
}
#modalLogo {
	width: 80%;
	max-width: 586px;
	margin: 0 auto 20px;
}
#modalLogo img {
	width: 100%;
	height: auto;
}
#modalEnter ul {
	width: 80%;
	margin: 0 auto 100px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
#modalEnter li {
	width: 100%;
	margin: 0 0 10px;
}
#modalEnter ul li a {
	width: 100%; height: 100%;
	display: block;
	background: #3d171f;
	padding: 10px 80px;
	font-family: 'Poller One', cursive;
	font-size: 2.0rem;
	color: #FFF;
	cursor: pointer;
	box-shadow: 0 0 6px #d2c6c9;
	transition: all 0.5s;
}
#modalEnter ul li a:hover {background: #f15e79;}

#att {
	font-size: 1.4rem;
	font-weight: bold;
	color: #3d171f;
	letter-spacing: 0.05em;
	margin-bottom: 15px;
}
#attSub {
	font-size: 1.4rem;
	color: #905f6a;
	letter-spacing: 0.05em;
	margin-bottom: 15px;
}
#ques {
	font-size: 1.8rem;
	font-weight: 900;
	color: #FFF;
	letter-spacing: 0.05em;
	background: #ef558d;
	border-radius: 2.0rem;
	display: inline-block;
	margin-bottom: 30px;
	padding: 4px 20px 2px;
}
#modalFoot {
	font-size: 1.2rem;
	color: #3d171f;
}
#modalFoot img {
	width: 114px;
	margin-bottom: 15px;
}

@media screen and (min-width: 1025px) {
	#modalEnter ul {
		width: 600px;
		margin: 0 auto 30px;
		flex-direction: row;
	}
	#modalEnter li {
		width: 250px;
		margin: 0 10px;
	}
}


/*-------------------------
*FOOTER
-------------------------*/

footer {
	width: 100%;
	padding: 25px 0 10px;
	text-align: center;
	background: #3d171f;
}
footer img {margin-bottom: 10px;}
footer a {transition: all 0.6s;}
footer a:hover {opacity: 0.6;}
address {
	font-size: 1.2rem;
	color: #FFF;
}
/*-------------------------
*SHARE
-------------------------*/

#shareArea {
	display: flex;
	flex-direction: row;
	justify-content: center;
	/*position: fixed;*/
	/*bottom: 80px; right: 20px;*/
	/*z-index: 80;*/
}

#shareArea div a {
	color: #FFF;
	width: 50px; height: 50px;
	text-align: center;
	display: block;
	margin: 0 5px 10px;
	text-decoration: none;
	border: solid 2px #6e5157;
	transition: all 0.6s;
}
#shareArea div a:hover {
	opacity: 0.5;
}

.shareTw {
	background: url(../img/common/icon_twitter.svg?v1.1) no-repeat center center rgba(61,23,31,1.0);
	background-size: cover;
}
.shareFb {
	background: url(../img/common/icon_facebook.svg?v1.1) no-repeat center center rgba(61,23,31,1.0);
	background-size: cover;
}
.shareLi {
	background: url(../img/common/icon_line.svg?v1.1) no-repeat center center rgba(61,23,31,1.0);
	background-size: cover;
}

/*.shareTw:before {
	content: "\f099";
	font-family: fontawesome;
	font-size: 2rem;
	line-height: 40px;
}
.shareFb:before {
	content: "\f09a";
	font-family: fontawesome;
	font-size: 2rem;
	line-height: 40px;
}
.shareLi:before {
	content: "\f3c0";
	font-family: fontawesome;
	font-size: 2rem;
	line-height: 40px;
}*/

.shareTw,.shareFb,.shareGo,.shareLi {}

/*-------------------------
*PAGE TOP
-------------------------*/

#pageTop {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 1000;
	width: 50px;
	height: 50px;
	display: block;
}

#pageTop a {
	font-size: 2.0rem;
	line-height: 45px;
	color: #6e5157;
	text-align: center;
	width: 100%; height: 100%;
	background: rgba(61,23,31,1.0);
	/*border-radius: 10px;*/
	border: solid 2px #6e5157;
	display: block;
	text-decoration: none;
	transition: all 0.6s;
}

#pageTop a:hover {
	color: #FFF;
	background: rgba(61,23,31,0.75);
}


a.anchor {
	display: block;
	padding-top: 50px;
	margin-top: -50px;
}