@charset "UTF-8";

/*-------------------------
BASE
-------------------------*/
html {
	font-family: 'Helvetica',
	'Hiragino Kaku Gothic Pro',
	'Meiryo',sans-serif;
	font-size: 62.5%;
	overflow: auto;
}

body {
	min-height: 100vh;
	font-size: 1.4rem;
	overflow: hidden;
	background: #02328f;
}

/*img {
	width: 100%;
	height: auto;
	image-rendering: crisp-edges;
	image-rendering: -webkit-optimize-contrast;
}*/

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

.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;
}
#wrap.wait {}
#wrap.start {opacity: 1.0;}

main {
	z-index: 10;
	width: 100%;
}
.common_bg {
	padding-top: 50px;
	background: url(../img/top/bg_ptn02.jpg);
}

section {
	width: 100%;
}
section > h2 {
	width: 80%;
	margin: 0 auto;
	text-align: center;
}
footer {
	padding: 50px 0;
	background: #02328f url(../img/top/bg_line01.jpg) repeat-x left top;
}
header {
	position: static;
}
@media screen and (min-width: 1025px) {
	header {
		position: fixed;
		z-index: 50;
		width: 100%; height: 75px;
		background: rgba(14,99,178,0.9);
		border-bottom: solid 2px #072555;
		box-shadow: 0 11px 20px rgba(9,81,121,0.2);
	}
	section > h2 {
		width: 800px;
	}
}
/*-------------------------
HEADER
-------------------------*/
#global {
	position: fixed;
	top: 0; bottom: 0; left: -100%;
	z-index: 50;
	width: 55%;
	padding-top: 15%;
	background: rgba(14,99,178,0.9);
	border-right: solid 2px #072555;
	box-shadow: 0 11px 20px rgba(9,81,121,0.2);
	transition: all 0.5s;
	opacity: 0;
}
.open #global {
	left: 0;
	opacity: 1;
}
#global ul {
	display: flex;
	flex-direction: column;
	width: 160px;
	margin: 0 auto;
}
#global ul li {
	background: url(../img/top/global.png?v1.2) no-repeat;
}
#global ul li.gMenu1 {
	width: 160px; height: 55px;
	background-position: 0px -10px;
}
#global ul li.gMenu2 {
	width: 160px; height: 55px;
	background-position: -160px -10px;
}
#global ul li.gMenu3 {
	width: 160px; height: 55px;
	background-position: -320px -10px;
}
#global ul li.gMenu4 {
	width: 160px; height: 55px;
	background-position: -480px -10px;
}
#global ul li.gMenu5 {
	width: 160px; height: 55px;
	background-position: -640px -10px;
}
#global ul li.gMenu6 {
	width: 160px; height: 55px;
	background-position: -800px -10px;
}
#global ul li.gMenu7 {
	width: 160px; height: 90px;
	background-position: -960px -10px;
}
#global ul li.gMenu8 {
	width: 160px; height: 90px;
	background-position: -1280px 0;
}

#global ul li a {
	display: block;
	width: 100%; height: 100%;
	background: url(../img/top/global.png?v1.2) no-repeat;
	text-indent: -9999px;
	transition: opacity 0.4s;
	opacity: 0.0;
}
#global ul li a:hover {opacity: 1.0;}

#global ul li.gMenu1 a {background-position: 0px -100px;}
#global ul li.gMenu2 a {background-position: -160px -100px;}
#global ul li.gMenu3 a {background-position: -320px -100px;}
#global ul li.gMenu4 a {background-position: -480px -100px;}
#global ul li.gMenu5 a {background-position: -640px -100px;}
#global ul li.gMenu6 a {background-position: -800px -100px;}
#global ul li.gMenu7 a {background-position: -960px -100px;}
#global ul li.gMenu8 a {background-position: -1280px -90px;}

/* 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: #02328f;
	border: solid 2px #072555;
	box-shadow: 0 0 5px rgba(85,75,64,0.5);
	cursor: pointer;
	pointer-events: auto;
	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 ul {
		display: flex;
		flex-direction: row;
		width: 1060px;
	}
	#global ul li {
		background: url(../img/top/global.png?v1.2) no-repeat;
	}
	#global ul li.gMenu1 {
		width: 70px; height: 90px;
		background-position: -46px 0;
	}
	#global ul li.gMenu2 {
		width: 140px; height: 90px;
		background-position: -167px 0;
	}
	#global ul li.gMenu3 {
		width: 150px; height: 90px;
		background-position: -326px 0;
	}
	#global ul li.gMenu4 {
		width: 140px; height: 90px;
		background-position: -492px 0;
	}
	#global ul li.gMenu5 {
		width: 120px; height: 90px;
		background-position: -662px 0;
	}
	#global ul li.gMenu6 {
		width: 140px; height: 90px;
		background-position: -808px 0;
	}
	#global ul li.gMenu7 {
		width: 150px; height: 90px;
		background-position: -970px 0;
	}
	#global ul li.gMenu8 {
		width: 150px; height: 90px;
		background-position: -1127px 0;
	}

	#global ul li.gMenu1 a {background-position: -46px -90px;}
	#global ul li.gMenu2 a {background-position: -167px -90px;}
	#global ul li.gMenu3 a {background-position: -326px -90px;}
	#global ul li.gMenu4 a {background-position: -492px -90px;}
	#global ul li.gMenu5 a {background-position: -662px -90px;}
	#global ul li.gMenu6 a {background-position: -808px -90px;}
	#global ul li.gMenu7 a {background-position: -970px -90px;}
	#global ul li.gMenu8 a {background-position: -1127px -90px;}

	.toggleBtn { display: none; }
}



/*-------------------------
MAIN VISUAL
-------------------------*/
#mainVisual {
	position: relative;
	top: 0; left: 0;
	z-index: 0;
	width: 100%;
	overflow: hidden;
	background: #FFF;
}
.pad1:before {
	content: "";
	display: block;
	padding-top: 78.90625%;
}
#mainVisual img {
	width: 100%;
	height: auto;
}
#vis01,#vis02,#vis04,#vis05,
#vis06,#vis07,#vis08,#vis09,#vis10,#award,#popBtn,#popBtn2 {
	position: absolute;
	top: 0; left: 0;
	opacity: 0;
}
#vis03 {
	position: absolute;
	bottom: 0; left: 0;
}
#mainVisual > #popBtn {
	position: absolute;
	top: 85%; left: 75%;
	/*transform: translateX(50%);*/
	z-index: 20;
	width: 11.458333%;
	opacity: 0;
}
#mainVisual > #popBtn2 {
	position: absolute;
	top: 85%; left: 13%;
	/*transform: translateX(50%);*/
	z-index: 20;
	width: 11.458333%;
	opacity: 0;
}
#vis11 {
	width: 100%; height: 100%;
	background: url(../img/top/b_ms_off.png) no-repeat;
	background-size: cover;
}
#vis12 {
	width: 100%; height: 100%;
	background: url(../img/top/b_os_off.png) no-repeat;
	background-size: cover;
}
#vis11 img,#vis12 img {
	transition: all 0.6s;
	opacity: 0;
}
#vis11 img:hover,#vis12 img:hover {opacity: 1.0;}

#vis01 {z-index: 12;}
#vis02 {z-index: 12;}
#vis03 {z-index: 10;}
#vis04 {z-index: 3;}
#vis05 {z-index: 4;}
#vis06 {z-index: 5;}
#vis07 {z-index: 6;}
#vis08 {z-index: 7;}
#vis09 {z-index: 8;}
#vis10 {z-index: 9;}
#award {z-index: 15;}

#vis05.move {animation: juli 1.5s ease-in-out 0.0s forwards;}
#vis06.move {animation: anje 1.3s ease-in-out 0.1s forwards;}
#vis07.move {animation: cret 1.2s ease-in-out 0.3s forwards;}
#vis08.move {animation: crla 1.1s ease-in-out 0.4s forwards;}
#vis04.move {animation: mavi 0.5s ease-in-out 1.5s forwards;}
#vis09.move {animation: flow 1.5s ease-in-out 0.0s forwards;}
#vis01.move {animation: logo 1.4s ease-out 1.0s forwards;}
#vis02.move {animation: date 1.2s ease-out 1.2s forwards;}
#award.move {animation: mavi 1.0s ease-out 1.8s forwards;}

#popBtn.move {animation: date 1.2s ease-out 1.2s forwards;}
#popBtn2.move {animation: date 1.2s ease-out 1.2s forwards;}

@keyframes juli {
0% 		{transform: translate3d(-1500px,2400px,0) rotate(-20deg) scale(6.0); opacity: 0;}
10% 	{opacity: 0.0;}
100% 	{transform: translate3d(0,0,0) rotate(0deg) scale(1.0); opacity: 1.0;}
}
@keyframes anje {
0% 		{transform: translate3d(-800px,-300px,0) rotate(10deg) scale(8.0); opacity: 0;}
40% 	{opacity: 0.0;}
100% 	{transform: translate3d(0,0,0) rotate(0deg) scale(1.0); opacity: 1.0;}
}
@keyframes cret {
0% 		{transform: translate3d(0,3500px,0) rotate(0deg) scale(2.0); opacity: 0;}
80% 	{transform: translate3d(0,-50px,0) rotate(0deg) scale(1.0); opacity: 1.0;}
100% 	{transform: translate3d(0,0,0) rotate(0deg) scale(1.0); opacity: 1.0;}
}
@keyframes crla {
0% 		{transform: translate3d(600px,0,0) rotate(10deg) scale(10.0); opacity: 0;}
30% 	{opacity: 0.0;}
100% 	{transform: translate3d(0,0,0) rotate(0deg) scale(1.0); opacity: 1.0;}
}
@keyframes mavi {
0% 		{opacity: 0;}
100% 	{opacity: 1.0;}
}
@keyframes logo {
0% 		{transform: translate3d(0,-300px,0) scale(2.0); opacity: 0;}
30% 	{opacity: 0.0;}
100% 	{transform: translate3d(0,0,0) scale(1.0); opacity: 1.0;}
}
@keyframes date {
0% 		{transform: translate3d(0,100px,0) scale(1.0); opacity: 0;}
100% 	{transform: translate3d(0,0,0) scale(1.0); opacity: 1.0;}
}
@keyframes flow {
0% 		{transform: translate3d(0,0,0) rotate(-60deg) scale(3.0); opacity: 0;}
30% 	{opacity: 0.0;}
100% 	{transform: translate3d(0,0,0) rotate(0deg) scale(1.0); opacity: 1.0;}
}

/*-------------------------
SALES TOPICS
-------------------------*/
#topics01 {
	position: relative;
	width: 100%;
	background: url(../img/top/mob_char.png) no-repeat top center,
	url(../img/top/mob_back.jpg) no-repeat top center;
	background-size: cover;
}
.pad2:before {
	content: "";
	display: block;
	/*バナー2列*/
	/*padding-top: 181.4634146%;*/
	/*バナー3列*/
	padding-top: 190.4634146%;
}

/*BANNER*/
#topBana {
	position: absolute;
	top: 0.5%; left: 50%;
	transform: translateX(-50%);
	z-index: 20;
	width: 90%;
}
#topBana img {
	width: 100%;
	height: auto;
}
#topBana ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
}
#topBana li {
	margin-bottom: 0.5%;
	vertical-align: bottom;
	background: #FFF;
}
#topBana li.lBana {width: 100%;}
#topBana li.hBana {width: 49%;}
#topBana li.sBana {width: 32%;}

#topBana li a {
	pointer-events: auto;
	transition: opacity 0.4s;
}
#topBana li a:hover {opacity: 0.6;}
/*.newc {animation: newFlash 3.0s ease-in-out infinite;}
@keyframes newFlash {
0% 		{box-shadow: 0 0 4px #13caff,0 0 4px #13caff,0 0 4px #13caff;}
60% 	{box-shadow: 0 0 0px #FFF,0 0 0px #FFF,0 0 0px #FFF;}
100% 	{box-shadow: 0 0 4px #13caff,0 0 4px #13caff,0 0 4px #13caff;}
}*/

@media screen and (min-width: 1025px) {
	/*BANNER SETTING*/
	#topBana {
		position: absolute;
		top: 0.5%; left: 50%;
		z-index: 30;
		transform: translateX(-50%);
		width: 50%; min-width: 960px;
	}
	#topBana li.lBana {width: 960px;}
	#topBana li.hBana {width: 478px;}
	#topBana li.sBana {width: 310px;}
}

#topics01 > #inner {
	position: absolute;
	top: 0; left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	width: 100%;
	/*バナー2列*/
	/*padding-top: 35%;*/
	/*バナー3列*/
	padding-top: 50%;
}
#salInner {
	position: relative;
	width: 100%;
}
#salInner img {
	width: 100%;
	height: auto;
}
#salCap01,#salCap02,#salCap03,#salCap04,#salCap05,#salCap06,
#salCap07,#salCap08,#salCap09,#salCap10,#salCap11,#salCap12 {
	position: absolute;
	top: 0; left: 0;
}

#salCap01 {transform: translate3d(0%,0%,0);}
/*#salCap02 {transform: translate3d(0%,90%,0);}*/
#salCap03 {transform: translate3d(0%,240%,0);}
#salCap04 {transform: translate3d(0%,250%,0);}
/*#salCap05 {transform: translate3d(0%,560%,0);}*/
#salCap06 {transform: translate3d(0%,165%,0);}
#salCap07 {transform: translate3d(0%,630%,0);}
/*#salCap08 {transform: translate3d(0%,1340%,0);}*/
#salCap09 {transform: translate3d(0%,227%,0);}

#topics01 > #inner p {display: none;}

#salBg,#salCh {
	display: none;
}

@media screen and (min-width: 1025px) {
	#topBana {
		width: 968px;
	}
	#topBana li {
		margin-bottom: 5px;
	}
	#topBana li.lBana {width: 968px;}
	#topBana li.sBana {width: 318px;}

	#topics01 {
		width: 100%;
		/*バナー2列*/
		/*min-height: 1860px;*/
		/*バナー3列*/
		min-height: 2010px;
		background: #FFF;
	}
	.pad2:before {
		content: "";
		display: block;
		/*バナー2列*/
		/*padding-top: 96.875%;*/
		/*バナー3列*/
		padding-top: 104.6875%;
	}
	#topics01 > #inner {
		width: 1060px;
		/*バナー2列*/
		/*padding-top: 390px;*/
		/*バナー3列*/
		padding-top: 540px;
	}
	#salBg,#salCh {
		display: block;
		position: absolute;
		bottom: 0; left: 50%;
		transform: translateX(-50%);
		width: 100%; min-width: 1920px;
	}
	#salBg {z-index: 1;}
	#salCh {z-index: 2;}
}

#salCap01,#salCap02,#salCap03,#salCap04,#salCap05,#salCap06,
#salCap07,#salCap08,#salCap09,#salCap10,#salCap11,#salCap12,
#salCh {
	opacity: 0.0;
}

.slsUp1 {animation: topIn1 0.8s ease-in-out 0.1s forwards;}
.slsUp2 {animation: topIn1 0.8s ease-in-out 0.3s forwards;}
.slsUp3 {animation: topIn3 1.5s ease-in-out 0.5s forwards;}

@keyframes topIn1 {
0% 		{margin-top: 9%; opacity: 0;}
60% 	{margin-top: -5%; opacity: 1.0;}
100% 	{margin-top: 0%; opacity: 1.0;}
}
@keyframes topIn2 {
0% 		{margin-left: 4%; opacity: 0;}
60% 	{margin-left: -1%; opacity: 1.0;}
100% 	{margin-left: 0%; opacity: 1.0;}
}
@keyframes topIn3 {
0% 		{left: 30%; opacity: 0;}
100% 	{left: 50%; opacity: 1.0;}
}

/*-------------------------
MOVIE TOPICS
-------------------------*/
#topics02 {
	padding: 0 0 100px;
	background: url(../img/top/bg_line01.jpg) repeat-x left top,
	url(../img/top/bg_ptn01.jpg);
}
#topics02 h2 {
	padding-top: 10%;
	margin-bottom: 4%;
}
#topics02 h2 img {
	width: 100%;
	height: auto;
}
@media screen and (min-width: 1025px) {
	#topics02 {padding: 0 0 100px;}
	#topics02 h2 {
		padding-top: 60px;
		margin-bottom: 40px;
	}
}

/*-------------------------
SLICK SLIDE
-------------------------*/
.sliderArea {
	max-width: 100%;
	margin: 0 auto;
	padding: 0 25px;
}
.sliderArea img {
	width: 100%;
	height: auto;
}
.sliderArea.w300 {max-width: 1030px;}
.slick-slide {margin: 0 20px;}
.slick-prev, .slick-next {z-index: 1;}
.slick-prev:before, .slick-next:before {}
.slick-slide img {
	transition: all 0.3s;
	opacity: 0.6;
}
.slick-slide img:hover {
	opacity: 0.5;
}
.slick-active img {opacity: 1;}
.slick-current img {opacity: 1;}

/*-------------------------
FULL SCREEN
-------------------------*/
.full-screen .slick-list {
	overflow: visible;
}
.full-screen.slider {
	max-width: 1030px;
	margin: 0 auto;
}
.mvBack {
	background: url(../img/top/mv_thum_bg.png) no-repeat;
	background-size: cover;
}
/*-------------------------
INFORMATION TOPICS
-------------------------*/
#topics03 {
	padding-bottom: 5%;
	background: url(../img/top/bg_line01.jpg) repeat-x left top,
	url(../img/top/bg_ptn02.jpg);
}
#topics03 h2 {
	padding-top: 10%;
	margin-bottom: 6%;
}
#topics03 h2 img {
	width: 100%;
	height: auto;
}
@media screen and (min-width: 1025px) {
	#topics03 {padding-bottom: 50px;}
	#topics03 h2 {
		padding-top: 60px;
		margin-bottom: 70px;
	}
}

/*INFORMATION*/
#infoSet1,#infoSet2 {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 90%;
}
#infoSet1 {margin: 0 auto 6%;}
#infoSet2 {margin: 0 auto;}

.infoBoxIn1 {
	width: 100%;
	margin-bottom: 10%;
}

#infoSet1 h5,#infoSet2 h5 {
	width: 100%; height: 65px;
	text-indent: -9999px;
	margin-bottom: 20px;
	border-bottom: solid 1px #c0c8cf;
	background-position: center top;
}
#infoSet2 h5 {
	margin-bottom: 10%;
}
.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: 200px;
	overflow: auto;
}
.padInner {padding: 0 5%;}
.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
	background-color: #023fab;
}
.boxInner_s dl{
	display: flex;
	flex-direction: column;
}
.boxInner_s dt {
	width: 100%;
	font-size: 1.4rem;
	line-height: 1.5;
	color: #02328f;
}
.boxInner_s dd{
	width: 100%;
	font-size: 1.4rem;
	line-height: 1.5;
	color: #394258;
}
#infoSet2 dl {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	text-align: center;
}
#infoSet2 dt {
	display: block;
	width: 100%;
	margin-right: 0;
}
#infoSet2 dd {
	width: 100%;
	font-size: 1.4rem;
	line-height: 2.0;
	font-weight: bold;
	color: #394258;
}
#infoSet2 dt,#infoSet2 dd {
	margin-bottom: 10px;
}
.infoSize img {
	width: 130px !important;
	height: 40px !important;
}


@media screen and (min-width: 768px) {
	#infoSet1,#infoSet2 {
		width: 90%; max-width: 1060px;
	}
	#infoSet1 {margin: 0 auto 60px;}
	#infoSet2 {
		margin: 0 auto;
		padding-bottom: 30px;
	}
	.infoBoxIn1 {
		width: 49%;
		margin-bottom: 0%;
	}
	.boxInner_s {
		height: 400px;
	}
	.boxInner_s dl{
		display: flex;
		flex-direction: row;
		margin-bottom: 20px;
	}
	.boxInner_s dt {
		width: 30%;
	}
	.boxInner_s dd{
		width: 70%;
		font-size: 1.2rem;
	}
	#infoSet2 h5 {
		margin-bottom: 50px;
	}

	#infoSet2 dl {
		display: flex;
		flex-wrap: wrap;
		width: 50%;
		text-align: left;
	}
	#infoSet2 dt {
		display: flex;
		align-items: center;
		width: 130px;
		margin-right: 10px;
	}
	#infoSet2 dd {
		display: flex;
		align-items: center;
		width: calc(100% - 140px);
		font-size: 1.4rem;
	}
	#infoSet2 dt, #infoSet2 dd {
		margin-bottom: 30px;
	}

}
@media screen and (min-width: 1025px) {
	#infoSet2 dd {font-size: 1.6rem;}
}
/*-------------------------
PAGE SETTING
-------------------------*/
#pageHead {
	position: relative;
	width: 100%;
	background: url(../img/top/pagehead.jpg) no-repeat center top;
	background-size: cover;
}
#pageHead img {
	width: 100%;
	height: auto;
}
#pageHead:before {
	content: "";
	display: block;
	padding-top: 20%;
}
#pageHead:after {
	content: "";
	display: block;
	height: 16px;
	background: url(../img/top/bg_line01.jpg) repeat-x;
}
#pageHead > h1 {
	position: absolute;
	top: 20%; left: 50%;
	transform: translateX(-50%);
	width: 100%; max-width: 800px;
	opacity: 0;
}
@media screen and (min-width: 1025px) {
	#pageHead:before {
		padding-top: 245px;
	}
	#pageHead > h1 {
		top: 115px;
		width: 800px;
		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
-------------------------*/
.story_bg {
	padding: 5.5% 0 12%;
	background: url(../img/story/bg_story.jpg) no-repeat center top;
	background-size: cover;
}
#stInner {
	position: relative;
	width: 100%;
	margin: 0 auto;
}
#stInner img {
	width: 100%;
	height: auto;
}
.stPad:before {
	content: "";
	display: block;
	padding-top: 125%;
}
#stInner div {
	position: absolute;
	top: 0; left: 0;
	opacity: 0.0;
}
#stInner div > p {display: none;}

#st01 {margin-top: 0%;}
#st02 {margin-top: 5%;}
#st03 {margin-top: 10%;}
#st04 {margin-top: 20%;}
#st05 {margin-top: 25%;}
#st06 {margin-top: 30%;}
#st07 {margin-top: 35%;}
#st08 {margin-top: 45%;}
#st09 {margin-top: 50%;}
#st10 {margin-top: 55%;}
#st11 {margin-top: 65%;}
#st12 {margin-top: 70%;}
#st13 {margin-top: 75%;}
#st14 {margin-top: 80%;}
#st15 {margin-top: 85%;}
#st16 {margin-top: 95%;}
#st17 {margin-top: 100%;}
#st18 {margin-top: 110%;}
#st19 {margin-top: 115%;}

@media screen and (min-width: 1025px) {
	.story_bg {
		padding: 105px 0 230px;
	}
	#stInner {
		width: 1060px;
	}
}
.stOpen #st01 {animation: storyInUp 0.6s ease-in-out 0.1s forwards;}
.stOpen #st02 {animation: storyInUp 0.6s ease-in-out 0.3s forwards;}
.stOpen #st03 {animation: storyInUp 0.6s ease-in-out 0.5s forwards;}
.stOpen #st04 {animation: storyInUp 0.6s ease-in-out 0.7s forwards;}
.stOpen #st05 {animation: storyInUp 0.6s ease-in-out 0.9s forwards;}
.stOpen #st06 {animation: storyInUp 0.6s ease-in-out 1.1s forwards;}
.stOpen #st07 {animation: storyInUp 0.6s ease-in-out 1.3s forwards;}
.stOpen #st08 {animation: storyInUp 0.6s ease-in-out 1.5s forwards;}
.stOpen #st09 {animation: storyInUp 0.6s ease-in-out 1.7s forwards;}
.stOpen #st10 {animation: storyInUp 0.6s ease-in-out 1.9s forwards;}

.textIn {animation: storyInUp 0.6s ease-in-out 0.1s forwards;}

@keyframes storyInUp {
0% 		{transform: translate3d(0,-30px,0) scale(2.0); opacity: 0;}
100% 	{transform: translate3d(0,0,0) scale(1.0); opacity: 1.0;}
}


/*-------------------------
CHARACTER
-------------------------*/
.chara_bg {
	background: url(../img/top/bg_ptn02.jpg);
}
.chara_bg img {
	width: 100%;
	height: auto;
}
#chrNavi {
	background: url(../img/top/bg_line01.jpg) repeat-x left bottom,
	url(../img/top/bg_ptn01.jpg);
	padding: 2% 0 4%;
}
#chrList {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 90%;
	margin: 0 auto;
}
#chrList li {
	vertical-align: bottom;
}
#chrList li#chrNum1,#chrList li#chrNum2,
#chrList li#chrNum3,#chrList li#chrNum4 {
	width: 48%;
	margin-bottom: 1%;
}
#chrList li#chrNum5,#chrList li#chrNum6,
#chrList li#chrNum7,#chrList li#chrNum8,#chrList li#chrNum9,
#chrList li#chrNum10,#chrList li#chrNum11 {
	width: 24%;
	margin-bottom: 1%;
}

@media screen and (min-width: 1025px) {
	#chrNavi {padding: 22px 0 30px;}
	#chrList {width: 1050px;}

	#chrList li#chrNum1,#chrList li#chrNum2,
	#chrList li#chrNum3,#chrList li#chrNum4 {
		width: 258px; height: 104px;
		margin-bottom: 14px;
	}
	#chrList li#chrNum5,#chrList li#chrNum6,
	#chrList li#chrNum7,#chrList li#chrNum9,
	#chrList li#chrNum10,#chrList li#chrNum11 {
		width: 140px; height: 70px;
	}
	#chrList li#chrNum8 {
		width: 188px; height: 70px;
		text-align: center;
		background: url(../img/chara/b_chrnavi_space.png) no-repeat center center;
	}
	#chrList li#chrNum8 img {
		width: 140px;
	}
	#chrList li img {transition: all 0.4s;}
	#chrList li img:hover {margin-top: -10px;}
	#chrList li a {transition: all 0.4s;}
	#chrList li a:hover {opacity: 0.6;}
}

#chrInner {
	position: relative;
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
}
#chrInner:before {
	content: "";
	display: block;
	padding-top: 500%;
}
#chrProt {
	position: absolute;
	top: 0%; left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	width: 95%; height: 100%;
}
/*iPad*/
@media screen and (min-width: 768px) {
	#chrInner {
		width: 100%;
		/*min-height: 1235px;*/
		min-height: 1255px;
		overflow: hidden;
	}
	#chrInner:before {padding-top: 0%;}

}
/*iPad Pro*/
@media screen and (min-width: 769px) {
	#chrInner {
		width: 100%;
		/*min-height: 1350px;*/
		min-height: 1450px;
		overflow: hidden;
	}
}
/*PC*/
@media screen and (min-width: 1025px) {
	#chrInner {
		width: 100%;
		/*min-height: 1235px;*/
		min-height: 1295px;
		overflow: hidden;
	}
	#chrInner:before {padding-top: 0%;}
	#chrProt {
		top: 0%;
		width: 1030px; height: 100%;
	}
}

/*NAME/CV*/
#chrName {
	position: absolute;
	top: 1%; left: 0;
	width: 100%;
}
#chrName p {display: none;}
#name01 {display: none;}
#name02 {display: block;}
/*SPEC*/
#chrSpec,#chrSpec2 {
	display:flex;
	flex-wrap: wrap;
	position: absolute;
	width: 100%;
}
#chrSpec {top: 60%; left: 0;}
#chrSpec2 {top: 60%; left: 0;}

#chrSpec dt,#chrSpec2 dt {
	width: 20%;
	border-bottom: solid 1px #c0c8cf;
}
#chrSpec dd,#chrSpec2 dd {
	width: 80%;
	border-bottom: solid 1px #c0c8cf;
}
#chrSpec dt:before,#chrSpec2 dt:before,
#chrSpec dd:before,#chrSpec2 dd:before {
	content: "";
	display: block;
	padding-top: 16.6%;
	/*padding-top: 12.2448979%;*/
}
#chrSpec p,#chrSpec2 p {display: none;}

.profT01 {background: url(../img/chara/prof_height.png) no-repeat;}
.profT02 {background: url(../img/chara/prof_blood.png) no-repeat;}
.profT03 {background: url(../img/chara/prof_3size.png) no-repeat;}
.profT04 {background: url(../img/chara/prof_class.png) no-repeat;}

.prof01_01 {background: url(../img/chara/chr01_height.png?v1.12)no-repeat;}
.prof01_02 {background: url(../img/chara/chr01_blood.png?v1.12)no-repeat;}
.prof01_03 {background: url(../img/chara/chr01_3size.png?v1.12)no-repeat;}
.prof01_04 {background: url(../img/chara/chr01_class.png?v1.12)no-repeat;}
.prof02_01 {background: url(../img/chara/chr02_height.png?v1.12)no-repeat;}
.prof02_02 {background: url(../img/chara/chr02_blood.png?v1.12)no-repeat;}
.prof02_03 {background: url(../img/chara/chr02_3size.png?v1.12)no-repeat;}
.prof02_04 {background: url(../img/chara/chr02_class.png?v1.12)no-repeat;}
.prof03_01 {background: url(../img/chara/chr03_height.png?v1.12)no-repeat;}
.prof03_02 {background: url(../img/chara/chr03_blood.png?v1.12)no-repeat;}
.prof03_03 {background: url(../img/chara/chr03_3size.png?v1.12)no-repeat;}
.prof03_04 {background: url(../img/chara/chr03_class.png?v1.12)no-repeat;}
.prof04_01 {background: url(../img/chara/chr04_height.png?v1.12)no-repeat;}
.prof04_02 {background: url(../img/chara/chr04_blood.png?v1.12)no-repeat;}
.prof04_03 {background: url(../img/chara/chr04_3size.png?v1.12)no-repeat;}
.prof04_04 {background: url(../img/chara/chr04_class.png?v1.12)no-repeat;}
.prof05_01 {background: url(../img/chara/chr05_height.png?v1.12)no-repeat;}
.prof05_02 {background: url(../img/chara/chr05_blood.png?v1.12)no-repeat;}
.prof05_03 {background: url(../img/chara/chr05_3size.png?v1.12)no-repeat;}
.prof05_04 {background: url(../img/chara/chr05_class.png?v1.12)no-repeat;}
.prof06_01 {background: url(../img/chara/chr06_height.png?v1.12)no-repeat;}
.prof06_02 {background: url(../img/chara/chr06_blood.png?v1.12)no-repeat;}
.prof06_03 {background: url(../img/chara/chr06_3size.png?v1.12)no-repeat;}
.prof06_04 {background: url(../img/chara/chr06_class.png?v1.12)no-repeat;}
.prof07_01 {background: url(../img/chara/chr07_height.png?v1.12)no-repeat;}
.prof07_02 {background: url(../img/chara/chr07_blood.png?v1.12)no-repeat;}
.prof07_03 {background: url(../img/chara/chr07_3size.png?v1.12)no-repeat;}
.prof07_04 {background: url(../img/chara/chr07_class.png?v1.12)no-repeat;}
.prof08_01 {background: url(../img/chara/chr08_height.png?v1.12)no-repeat;}
.prof08_02 {background: url(../img/chara/chr08_blood.png?v1.12)no-repeat;}
.prof08_04 {background: url(../img/chara/chr08_class.png?v1.12)no-repeat;}

.prof09_01 {background: url(../img/chara/chr09_height.png?v1.12)no-repeat;}
.prof09_02 {background: url(../img/chara/chr09_blood.png?v1.12)no-repeat;}
.prof09_03 {background: url(../img/chara/chr09_3size.png?v1.12)no-repeat;}
.prof09_04 {background: url(../img/chara/chr09_class.png?v1.12)no-repeat;}

.prof10_01 {background: url(../img/chara/chr10_height.png?v1.12)no-repeat;}
.prof10_02 {background: url(../img/chara/chr10_blood.png?v1.12)no-repeat;}
.prof10_03 {background: url(../img/chara/chr10_3size.png?v1.12)no-repeat;}
.prof10_04 {background: url(../img/chara/chr10_class.png?v1.12)no-repeat;}

.prof11_01 {background: url(../img/chara/chr11_height.png?v1.12)no-repeat;}
.prof11_02 {background: url(../img/chara/chr11_blood.png?v1.12)no-repeat;}
.prof11_03 {background: url(../img/chara/chr11_3size.png?v1.12)no-repeat;}
.prof11_04 {background: url(../img/chara/chr11_class.png?v1.12)no-repeat;}

.profT01,.profT02,.profT03,.profT04,
.prof01_01,.prof01_02,.prof01_03,.prof01_04,
.prof02_01,.prof02_02,.prof02_03,.prof02_04,
.prof03_01,.prof03_02,.prof03_03,.prof03_04,
.prof04_01,.prof04_02,.prof04_03,.prof04_04,
.prof05_01,.prof05_02,.prof05_03,.prof05_04,
.prof06_01,.prof06_02,.prof06_03,.prof06_04,
.prof07_01,.prof07_02,.prof07_03,.prof07_04,
.prof08_01,.prof08_02,.prof08_03,.prof08_04,
.prof09_01,.prof09_02,.prof09_03,.prof09_04,
.prof10_01,.prof10_02,.prof10_03,.prof10_04,
.prof11_01,.prof11_02,.prof11_03,.prof11_04 {
	background-position: left center;
	background-size: cover;
}

/*SAMPLE VOICE/COSTUME*/
#voiceSample {
	position: absolute;
	top: 71%; left: 0;
	width: 80%;
}

#chrVoice {
	position: absolute;
	top: 72.5%; left: 0;
	width: 100%;
	padding-bottom: 2%;
	border-bottom: solid 1px #c0c8cf;
}
#chrVoice ul {
	display: flex;
	flex-direction: row;
}
#chrVoice li {
	width: 45px; height: 45px;
	margin: 0 15px;
	/*opacity: 0.3;*/
}
#chrVoice a {
	display: block;
	position: relative;
	width: 100%; height: 100%;
	transition: all 0.5s;
}

.chBtn1 {background: url(../img/chara/voice_01_off.png)no-repeat;}
.chBtn2 {background: url(../img/chara/voice_01_off.png)no-repeat;}
.chBtn3 {background: url(../img/chara/voice_02_off.png)no-repeat;}
.chBtn4 {background: url(../img/chara/voice_02_off.png)no-repeat;}
.chBtn1,.chBtn2,.chBtn3,.chBtn4 {
	background-position: center center;
	background-size: cover;
}

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

#costume {
	position: absolute;
	top: 76%; left: 0;
	width: 80%;
}
#chrCos {
	position: absolute;
	top: 77.5%; left: 0;
	width: 100%;
	padding-bottom: 2%;
	border-bottom: solid 1px #c0c8cf;
}
#chrCos ul {
	display: flex;
	flex-direction: row;
	margin-left: 14px;
}
#chrCos li {
	width:33%;
	margin: 0 5px 0 0;
}
#chrCos li a {transition: all 0.5s;}
#chrCos li a:hover {opacity: 0.7;}

/*PROFILE*/
#chrMemo {
	position: absolute;
	top: 82.5%; left: 0;
	width: 100%;
}
#chrMemo2 {
	position: absolute;
	top: 69%; left: 0;
	width: 100%;
}
#chrMemo3 {
	position: absolute;
	top: 77%; left: 0;
	width: 100%;
}
#chrMemo:before,#chrMemo2:before,#chrMemo3:before {
	content: "";
	display: block;
	/*padding-top: 64.2857142%;*/
	padding-top: 67.1428571%;
}
#chrMemo p,#chrMemo2 p,#chrMemo3 p {display: none;}

.chrMemo01 {background: url(../img/chara/chr01_story.png?v1.1) no-repeat;}
.chrMemo02 {background: url(../img/chara/chr02_story.png?v1.1) no-repeat;}
.chrMemo03 {background: url(../img/chara/chr03_story.png?v1.1) no-repeat;}
.chrMemo04 {background: url(../img/chara/chr04_story.png?v1.1) no-repeat;}
.chrMemo05 {background: url(../img/chara/chr05_story.png?v1.1) no-repeat;}
.chrMemo06 {background: url(../img/chara/chr06_story.png?v1.2) no-repeat;}
.chrMemo07 {background: url(../img/chara/chr07_story.png?v1.1) no-repeat;}
.chrMemo08 {background: url(../img/chara/chr08_story.png?v1.1) no-repeat;}
.chrMemo09 {background: url(../img/chara/chr09_story.png?v1.1) no-repeat;}
.chrMemo10 {background: url(../img/chara/chr10_story.png?v1.1) no-repeat;}
.chrMemo11 {background: url(../img/chara/chr11_story.png?v1.1) no-repeat;}

.chrMemo01,.chrMemo02,.chrMemo03,.chrMemo04,.chrMemo05,
.chrMemo06,.chrMemo07,.chrMemo08,.chrMemo09,.chrMemo10,.chrMemo11 {
	background-size: cover;
}

/*iPad*/
@media screen and (min-width: 768px) {
	#chrName {
		top: 65px; left: 0;
		width: 60%;
	}
	#name01 {display: block;}
	#name02 {display: none;}
	#chrSpec {
		top: 20%;
		width: 50%;
	}
	#chrSpec2 {
		top: 18%;
		width: 50%;
	}
	#voiceSample {
		top: 37%;
		width: 55%;
	}
	#chrVoice {
		top: 40%;
		width: 50%;
		padding-bottom: 2%;
	}
	#chrVoice li {
		width: 45px; height: 45px;
		margin: 0 23px 0 14px;
	}
	#costume {
		top: 46%;
		width: 55%;
	}
	#chrCos {
		top: 49%;
		width: 50%;
		padding-bottom: 2%;
	}
	#chrCos ul {
		margin-left: 14px;
	}
	#chrCos li {
		width: 136px;
		margin: 0 5px 0 0;
	}
	#chrMemo {
		top: 58%;
		width: 80%;
	}
	#chrMemo2 {
		top: 34%;
		width: 80%;
	}
	#chrMemo3 {
		top: 50%;
		width: 80%;
	}
}
/*iPad Pro*/
@media screen and (min-width: 769px) {
	#chrSpec {
		top: 22%;
		width: 50%;
	}
	#chrSpec2 {
		top: 13%;
		width: 50%;
	}
	#voiceSample {
		top: 41%;
		width: 55%;
	}
	#chrVoice {
		top: 44%;
		width: 50%;
		padding-bottom: 2%;
	}
	#costume {
		top: 49.5%;
		width: 55%;
	}
	#chrCos {
		top: 52.5%;
		width: 50%;
		padding-bottom: 2%;
	}
	#chrMemo {
		top: 61%;
		width: 80%;
	}
	#chrMemo2 {
		top: 30%;
		width: 80%;
	}
	#chrMemo3 {
		top: 50%;
		width: 80%;
	}
}
/*PC*/
@media screen and (min-width: 1025px) {
	#chrName {
		top: 65px; left: 0;
		width: 560px;
	}
	#chrSpec {
		top: 265px; left: 0;
		width: 450px;
	}
	#chrSpec2 {
		top: 190px; left: 0;
		width: 450px;
	}
	#voiceSample {
		top: 520px; left: 0;
		width: 450px; height: 30px;
	}
	#chrVoice {
		top: 557px; left: 0;
		width: 450px;
		padding-bottom: 17px;
	}
	#costume {
		top: 630px; left: 0;
		width: 450px; height: 30px;
	}
	#chrCos {
		top: 664px; left: 0;
		width: 450px;
		padding-bottom: 17px;
	}
	#chrMemo {
		top: 805px; left: 0;
		width: 700px;
		/*height: 450px;*/
		height: 470px;
	}
	#chrMemo2 {
		top: 395px; left: 0;
		width: 700px;
		/*height:450px;*/
		height: 470px;
	}
	#chrMemo3 {
		top: 660px; left: 0;
		width: 700px;
		/*height: 450px;*/
		height: 470px;
	}
}

/*CATCH*/
#chrCatch {
	position: absolute;
	top: 7%; right: 0;
	width: 10%;
}
/*STAND CHARA*/
#chrStand {
	position: absolute;
	top: 5%; left: 5%;
	z-index: 1;
	width: 350%;
}
#chrStand2 {
	position: absolute;
	top: 2%; left: 5%;
	z-index: 1;
	width: 350%;
}
/*iPad*/
@media screen and (min-width: 768px) {
	#chrStand {
		top: -40px; left: 40%;
		transform: translateX(-50%);
		width: 250%;
	}
	#chrStand2 {
		top: -40px; left: 40%;
		transform: translateX(-50%);
		width: 250%;
	}
	#chrCatch {
		top: 5%;
		width: 5%;
	}
}
/*iPad Pro*/
@media screen and (min-width: 769px) {
	#chrStand {
		top: -40px; left: 50%;
		transform: translateX(-50%);
		width: 1920px;
	}
	#chrStand2 {
		top: -40px; left: 50%;
		transform: translateX(-50%);
		width: 1920px;
	}
}
/*PC*/
@media screen and (min-width: 1025px) {
	#chrCatch {
		top: 70px;
		width: 55px;
	}
}

#chrNavi #chrNum1,#chrNavi #chrNum2,#chrNavi #chrNum3,#chrNavi #chrNum4,
#chrNavi #chrNum5,#chrNavi #chrNum6,#chrNavi #chrNum7,#chrNavi #chrNum8,
#chrNavi #chrNum9,#chrNavi #chrNum10,#chrNavi #chrNum11,
#chrName,#chrSpec .cs1,#chrSpec .cd1,#chrSpec .cs2,#chrSpec .cd2,
#chrSpec .cs3,#chrSpec .cd3,#chrSpec .cs4,#chrSpec .cd4,
#chrSpec2 .cs1,#chrSpec2 .cd1,#chrSpec2 .cs2,#chrSpec2 .cd2,
#chrSpec2 .cs3,#chrSpec2 .cd3,#chrSpec2 .cs4,#chrSpec2 .cd4,
#voiceSample,#chrVoice,#costume,#chrCos,#chrMemo,#chrMemo2,#chrMemo3,
#chrStand,#chrStand2,#chrCatch {
	opacity: 0.0;
}

/*MOTION SETTING*/
#chrNavi #chrNum1  {animation: chNaviIn 0.7s ease-in-out 0.1s forwards;}
#chrNavi #chrNum2  {animation: chNaviIn 0.7s ease-in-out 0.1s forwards;}
#chrNavi #chrNum3  {animation: chNaviIn 0.7s ease-in-out 0.1s forwards;}
#chrNavi #chrNum4  {animation: chNaviIn 0.7s ease-in-out 0.1s forwards;}
#chrNavi #chrNum5  {animation: chNaviIn 0.7s ease-in-out 0.2s forwards;}
#chrNavi #chrNum6  {animation: chNaviIn 0.7s ease-in-out 0.2s forwards;}
#chrNavi #chrNum7  {animation: chNaviIn 0.7s ease-in-out 0.2s forwards;}
#chrNavi #chrNum8  {animation: chNaviIn 0.7s ease-in-out 0.2s forwards;}
#chrNavi #chrNum9  {animation: chNaviIn 0.7s ease-in-out 0.2s forwards;}
#chrNavi #chrNum10 {animation: chNaviIn 0.7s ease-in-out 0.2s forwards;}
#chrNavi #chrNum11 {animation: chNaviIn 0.7s ease-in-out 0.2s forwards;}

#chrName      {animation: namIn 0.8s ease-in-out 0.4s forwards;}
#chrSpec .cs1,#chrSpec2 .cs1,
#chrSpec .cd1,#chrSpec2 .cd1 {animation: sttUp 0.4s ease-in-out 0.6s forwards;}
#chrSpec .cs2,#chrSpec2 .cs2,
#chrSpec .cd2,#chrSpec2 .cd2 {animation: sttUp 0.4s ease-in-out 0.7s forwards;}
#chrSpec .cs3,#chrSpec2 .cs4,
#chrSpec .cd3,#chrSpec2 .cd4 {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;}
#costume     {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;}
#chrMemo2 {animation: sttUp 0.8s ease-in-out 1.0s forwards;}
#chrMemo3 {animation: sttUp 0.8s ease-in-out 1.0s forwards;}

#chrCatch {animation: catchIn 0.8s ease-in-out 0.4s forwards;}
#chrStand,#chrStand2 {animation: chrIn1 1.2s ease-in-out 0.1s 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;}
}
@keyframes catchIn {
0%   {transform: translate3d(-100px,0,0); opacity: 0;}
100% {transform: translate3d(0,0,0); opacity: 1.0;}
}

/*-------------------------
WORLD
-------------------------*/
.world_bg {
	padding: 5.5% 0 0%;
	background: url(../img/top/bg_ptn02.jpg);
}
.world_bg img {
	width: 100%;
	height: auto;
}
#glossary1,#glossary2,#glossary3 {
	position: relative;
	width: 100%;
	margin: 0 auto;
}

#glossary1 {background: url(../img/world/world_bg01.png) no-repeat center top;}
#glossary2 {background: url(../img/world/world_bg02.png) no-repeat center top;}
#glossary3 {/*background: url(../img/world/world_bg03.png) no-repeat center top;*/}
#glossary1,#glossary2,#glossary3 {
	background-size: cover;
}
#glossary1:before,#glossary2:before,#glossary3:before {
	content: "";
	display: block;
	padding-top: 150%;
}

#glossary1 h2,#glossary2 h2,#glossary3 h2 {
	position: absolute;
	top: 0; left: 50%;
	transform: translateX(-50%);
	width: 80%;
}
.glInner {
	position: absolute;
	top: 10%; left: 50%;
	transform: translateX(-50%);
	width: 95%;
}
.glInner:before {
	content: "";
	display: block;
	padding-top: 82.0754716%;
}

.glInner p,.glInner h5 {display: none;}

.glossary01,.glossary02,.glossary03,.glossary04,
.glossary05,.glossary06,.glossary07 {
	position: absolute;
	width: 100%;
}
.glossary01 {top: 1%;}
.glossary02 {top: 45%;}
.glossary03 {top: 110%;}
.glossary04 {top: 5%;}
.glossary05 {top: 55%;}
.glossary06 {top: 5%;}
.glossary07 {top: 55%;}

/*iPad*/
@media screen and (min-width: 768px) {
	#glossary1,#glossary2,#glossary3 {
		width: 100%;
		background-size: cover;
	}
	#glossary1:before,#glossary2:before,#glossary3:before {
		padding-top: 85.15625%;
	}
	.glossary01,.glossary02,.glossary03,.glossary04,
	.glossary05,.glossary06,.glossary07 {
		width: 60%;
	}
	.glossary01 {top: 3%;}
	.glossary02 {top: 30%;}
	.glossary03 {top: 65%;}
	.glossary04 {top: 15%;}
	.glossary05 {top: 40%;}
	.glossary06 {top: 10%;}
	.glossary07 {top: 35%;}
	.glInner:before {
		padding-top: 88%;
	}
}
/*PC*/
@media screen and (min-width: 1025px) {
	.world_bg {padding: 105px 0 0;}
	#glossary1,#glossary2,#glossary3 {
		width: 1148px;
		background-size: cover;
	}
	#glossary1 h2,#glossary2 h2,#glossary3 h2 {
		width: 850px;
	}
	.glInner {
		top: 110px;
		width: 1060px;
	}
	.glossary01,.glossary02,.glossary03,.glossary04,
	.glossary05,.glossary06,.glossary07 {
		width: 630px;
	}
	.glossary01 {top: 30px;}
	.glossary02 {top: 270px;}
	.glossary03 {top: 600px;}
	.glossary04 {top: 130px;}
	.glossary05 {top: 360px;}
	.glossary06 {top: 90px;}
	.glossary07 {top: 330px;}

}


#glossary1,#glossary2,#glossary3,
#glossary1 h2,#glossary2 h2,#glossary3 h2,
.glossary01,.glossary02,.glossary03,.glossary04,
.glossary05,.glossary06,.glossary07 {opacity: 0.0;}

#glossary1.glosOpen1 {animation: glosInR 0.6s ease-in-out forwards;}
#glossary2.glosOpen1 {animation: glosInR 0.6s ease-in-out forwards;}
#glossary3.glosOpen1 {animation: glosInR 0.6s ease-in-out forwards;}

.glosOpen1 h2 {animation: glosInD 0.6s ease-in-out 0.2s forwards;}
.glosOpen1 h2 {animation: glosInD 0.6s ease-in-out 0.2s forwards;}
.glosOpen1 h2 {animation: glosInD 0.6s ease-in-out 0.2s forwards;}

.glosOpen1 .glossary01 {animation: glosInL 0.6s ease-in-out 0.4s forwards;}
.glosOpen1 .glossary02 {animation: glosInL 0.6s ease-in-out 0.5s forwards;}
.glosOpen1 .glossary03 {animation: glosInL 0.6s ease-in-out 0.6s forwards;}

.glosOpen1 .glossary04 {animation: glosInL 0.6s ease-in-out 0.4s forwards;}
.glosOpen1 .glossary05 {animation: glosInL 0.6s ease-in-out 0.5s forwards;}

.glosOpen1 .glossary06 {animation: glosInL 0.6s ease-in-out 0.4s forwards;}
.glosOpen1 .glossary07 {animation: glosInL 0.6s ease-in-out 0.5s forwards;}

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

@keyframes glosInL {
0% 		{transform: translate3d(50px,0,0); opacity: 0;}
100% 	{transform: translate3d(0,0,0);	opacity: 1.0;}
}
@keyframes glosInD {
0% 		{transform: translate3d(-50%,-50px,0); opacity: 0;}
100% 	{transform: translate3d(-50%,0,0);	opacity: 1.0;}
}
@keyframes glosInR {
0% 		{background-position: 0 top; opacity: 0;}
100% 	{background-position: center top;	opacity: 1.0;}
}
/*@keyframes glosInR {
0% 		{transform: translate3d(-20%,0,0); opacity: 0;}
100% 	{transform: translate3d(0,0,0);	opacity: 1.0;}
}*/

/*-------------------------
GALLERY
-------------------------*/
.cg_bg {
	padding: 5.5% 0 12%;
	background: url(../img/top/bg_ptn02.jpg);
}
#cgInner {
	position: relative;
	width: 100%;
	margin: 0 auto;
}
#cgInner img {
	width: 100%;
	height: auto;
}
#cgInner ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 90%;
	margin: 0 auto;
}
#cgInner ul li {
	width: 49%;
	margin: 0 0 1.5%;
	opacity: 0.0;
}
#cgInner ul li img {
	transition: all 0.5s;
}
#cgInner ul li img:hover {
	opacity: 0.7;
	transform: translate3d(0,0,0) scale(1.05);
}
/*.vbox-container img {
	max-width: 80% !important;
}*/
.cgOpen {animation: cgIn 0.6s ease-in-out forwards;}

@media screen and (min-width: 1025px) {
	.cg_bg {
		padding: 105px 0 230px;
	}
	#stInner {
		width: 1060px;
	}
	#cgInner ul {
		width: 1056px;
	}
	#cgInner ul li {
		width: 346px;
		margin: 0 3px 7px;
	}
}

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

/*-------------------------
SPECIAL
-------------------------*/
.spe_bg {
	padding: 5.5% 0 12%;
	background: url(../img/top/bg_ptn02.jpg);
}
#speInner {
	position: relative;
	width: 100%;
	margin: 0 auto;
}
#speInner img {
	width: 100%;
	height: auto;
}
/*BANNER*/
#speList {
	width: 90%;
	margin: 0 auto;
}
#speList ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
}
#speList li {
	margin-bottom: 0.5%;
	vertical-align: bottom;
	background: #FFF;
}
#speList li.lBana {width: 100%;}
#speList li.sBana {width: 32%;}

#speList li a {
	pointer-events: auto;
	transition: opacity 0.4s;
}
#speList li a:hover {opacity: 0.6;}

#illustCard,#holdingShop,#icInner {
	opacity: 0;
}


@media screen and (min-width: 1025px) {
	.spe_bg {padding: 105px 0 230px;}
	#speInner {width: 1060px;}
	#speList {width: 968px;}
	#speList li {margin-bottom: 5px;}
	#speList li.lBana {width: 968px;}
	#speList li.sBana {width: 318px;}
}

/*-------------------------
TRIAL
-------------------------*/
.trial_bg {
	padding: 3% 0 12%;
	background: url(../img/top/bg_ptn02.jpg);
}
#trialInner {
	width: 90%x;
	margin: 0 auto;
}
#trialInner img {
	width: 100%; height: auto;
}

#trialImage {
	width: 90%;
	margin: 0 auto 50px;
}

#trialInner h5 {
	width: 100%; height: 65px;
	text-indent: -9999px;
	/*margin-bottom: 20px;*/
	/*border-bottom: solid 1px #c0c8cf;*/
	background-position: center top;
}
.trialT1 {background: url(../img/special/m_downloadsite.png) no-repeat;}

.dlSite {
	width: 90%;
	margin: 0 auto 30px;
}
.dlSite dl{
	display:flex;
	flex-wrap: wrap;
	border-top: 1px solid #3331a3;
	border-right: 1px solid #3331a3;
	margin-bottom: 50px;
	font-size: 1.4rem;
	color: #035cd1;
	background: rgba(255,255,255,0.35);
}
.mirrorName {
	font-size: 1.4rem;
	font-weight: bold;
	border-left: 1px solid #3331a3;
}
.mirrorLink {

}
.dlSite dd{
	width: 100%;
	padding: 10px;
	text-align: center;
	border-left: 1px solid #3331a3;
	border-bottom: 1px solid #3331a3;
}
.dlSite dd.noInput {display: none;}

.dlBs a {
	display: inline-block;
	font-family: "Arial Black";
	font-size: 1.4rem;
	color: #FFF;
	padding: 5px 15px;
	background: #3331a3;
	border-radius: 2.0rem;
	margin: 0 auto;
	transition: all 0.4s;
}
.dlBs a:before {
	content: "\f019";
	font-family: fontawesome;
	margin-right: 5px;
	color: #FFF;
}
.dlBs a:hover {
	background: #ffad00;
}

#trialAtt {
	width: 90%;
	margin: 0 auto;
	padding: 1.5rem;
	border: 2px solid #3331a3;
	background: rgba(255,255,210,0.3);
	box-shadow: 0 2px 0 #c0c8cf;
}
#trialAtt img {
	width: 100%; height: auto;
}
.trialM {
	width: 100%;
	text-align: center;
	margin: 0 auto 20px;
}

.trialCap {
	width: 100%;
	margin: 0 auto 20px;
	padding: 1.5rem;
	border: 1px solid #3331a3;
	border-radius: 1.0rem;
	background: #FFF;
	box-shadow: 0 2px 0 #c0c8cf;
}
.trialCap p {
	font-size: 1.2rem;
	line-height: 1.5;
}
.trialCap p a {
	color: #3331a3;
	font-weight: bold;
	transition: all 0.4s;
}
.trialCap p a:hover {
	color: #ffad00;
}
.trialNavi span {
	font-weight: bold;
	color: #fd5d97;
}
.trialNavi {
	font-size: 1.4rem;
	line-height: 1.5;
	list-style-type: decimal;
}
.trialNavi li {
	margin-left: 3.0rem;
}
.trialNavi li span,.trialCap p span {
	font-size: 1.4rem;
	font-weight: bold;
	color: #ef5a92;
}
.trialForm {
	width: 100%;
	text-align: center;
}
.trialForm a {
	transition: all 0.5s;
}
.trialForm a:hover {
	opacity: 0.5;
}

@media screen and (min-width: 1025px) {
#trialInner {
	width: 880px;
}
#trialImage {
	width: 880px;
}
.dlSite {
	width: 100%;
}

.dlSite {width: 100%;}
.dlSite dl{font-size: 1.2rem;}
.dlSite dd{
	width: 25%;
}
.dlSite dd.noInput {display: block;}

.mirrorName {
	display: flex;
	align-items: center;
	border-left: 1px solid #3331a3;
}
.mirrorLink {

}

#trialAtt {
	width: 100%;
}
.trialCap {
	width: 100%;
}
.trialM {
	width: 520px;
}
.trialCap p {
	font-size: 1.6rem;
}
.trialNavi li span,.trialCap p span {
	font-size: 1.6rem;
}
}
/*-------------------------
ILLUST CARD
-------------------------*/
#illustCard {
	width: 90%;
	margin: 0 auto 3%;
}
#illustCard img {
	width: 100%; height: auto;
}
#holdingShop {
	width: 90%;
	margin: 0 auto 3%;
}

#holdingShop dl{
	display:flex;
	flex-wrap: wrap;
	border-top: 1px solid #CCC;
	border-right: 1px solid #CCC;
	margin-bottom: 5%;
	font-size: 1.2rem;
}
#holdingShop dt {
	width: 100%;
	display:flex;
	align-items: center;
	border-left: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
	padding: 10px;
	background: #239dac;
	color: #FFF;
}
#holdingShop dd{
	width: 100%;
	padding: 10px;
	border-left: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
	background: rgba(255,255,255,0.5);
}
.noInput {display: none;}

#icInner {
	width: 90%;
	border: solid 2px #239dac;
	border-radius: 1.0rem;
	margin: 0 auto;
	padding: 10px;
}
@media screen and (min-width: 1025px) {

	#illustCard {
		width: 968px;
	}
	#holdingShop {width: 940px;}
	#holdingShop dl{font-size: 1.4rem;}
	#holdingShop dd{width: 50%;}
	.noInput {display: block;}
	#icInner {width: 960px;}
}

.icOpen {animation: icUp 0.7s ease-in-out forwards;}

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

/*-------------------------
TRIAL CAMPAIGN
-------------------------*/
#tcamImage img, #tcamInner img {
	width: 100%; height: auto;
}

#tcamImage {
	width: 100%;
	margin: 0 auto 20px;
}

#tcamInner {
	width: 90%;
	margin: 0 auto;
}
.tcamCopy1,.tcamCopy2 {
	width: 100%;
	margin: 0 auto 15px;
}

.tcamBox {
	display: flex;
	flex-direction: column;
	margin: 0 auto 50px;
}
.tcamColumn1 {}

.tcamText {
	width: 100%;
	margin: 0 auto 15px;
}
.tcamDate {
	width: 100%;
	margin: 0 auto 20px;
}
.tcamColumn2 {
	margin-left: 0;
	text-align: center;
}

.tcamAttention {
	width: 100%; min-height: 100px;
	padding: 10px 0;
	background: none;
}

.tcamAttention ul {
	font-size: 1.4rem;
	line-height: 1.5;
	list-style-type: disc;
}
.tcamAttention ul li {
	margin-left: 3.0rem;
}
.tcamAttention ul li span {
	font-size: 1.6rem;
	font-weight: bold;
	color: #ef5a92;
}
.tcamAttention a {
	color: #3331a3;
	font-weight: bold;
	transition: all 0.4s;
}
.tcamAttention a:hover {
	color: #ffad00;
}

@media screen and (min-width: 1025px) {
#tcamImage {
	width: 1150px;
}

#tcamInner {
	width: 970px;
}
.tcamBox {
	flex-direction: row;
}
.tcamDate {
	margin: 0 auto 0px;
}
.tcamColumn2 {
	margin-left: 40px;
}
.tcamAttention {
	min-height: 100px;
	padding-left: 100px;
	background: url(../img/special/trial_att.png) no-repeat center left;
}
}

/*-------------------------
SHOP BONUS-店舗特典ガイド-
-------------------------*/
.shop_bg {
	padding: 2.5% 0 5%;
	background: url(../img/top/bg_ptn02.jpg);
}
#shopInner {
	position: relative;
	width: 100%;
	margin: 0 auto;
}
#shopInner img {
	width: 100%;
	height: auto;
}
#shopInner h5 {
	width: 100%; height: 65px;
	text-indent: -9999px;
	margin-bottom: 40px;
	border-bottom: solid 1px #c0c8cf;
	background-position: center top;
}
.bonusT1 {background: url(../img/special/m_shopbonus.png) no-repeat;}
.bonusT2 {background: url(../img/special/m_shopbonus2.png) no-repeat;}

#shopBox01,#shopBox02,#shopBox03,#shopBox04,
#shopBox05,#shopBox06,#shopBox07,#shopBox08 {
	position: relative;
	width: 90%;
	margin: 0 auto 5%;
}
#orgBonus {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 90%;
	margin: 0 auto;
}



#shopBox01 {background: url(../img/special/bns_bg01.png) no-repeat;}
#shopBox02 {background: url(../img/special/bns_bg02.png) no-repeat;}
#shopBox03 {background: url(../img/special/bns_bg03.png) no-repeat;}
#shopBox04 {background: url(../img/special/bns_bg04.png) no-repeat;}
#shopBox05 {background: url(../img/special/bns_bg05.png) no-repeat;}
#shopBox06 {background: url(../img/special/bns_bg06.png) no-repeat;}
#shopBox07 {background: url(../img/special/bns_bg07.png) no-repeat;}
#shopBox08 {background: url(../img/special/bns_bg08.png) no-repeat;}

.orgBox {
	position: relative;
	width: 100%;
	background: url(../img/special/org_bg.png) no-repeat;
	margin-bottom: 5%;
}

#shopBox01,#shopBox02,#shopBox03,#shopBox04,
#shopBox05,#shopBox06,#shopBox07,#shopBox08,.orgBox {
	background-size: cover;
}
.bnsSize1:before {
	content: "";
	display: block;
	padding-top: 83.3333333%;
}
.bnsSize2:before {
	content: "";
	display: block;
	padding-top: 73.4126984%;
}
.orgBox:before {
	content: "";
	display: block;
	padding-top: 102%;
}
.shopName,.shopLink,.goods01,.goods02,.goodsText,
.orgShop,.orgGoods,.orgText,.shopLink_s {
	position: absolute;
}
.shopName,.orgShop {
	top: 0; height: 0;
}

#shopBox01 .goods01 {
	top: 0%; left: 34.72%;
	width: 31.6468253%;
	padding-top: 10.9126984%;
}
#shopBox01 .goods02 {
	top: 0%; right: 1.5%;
	width: 31.6468253%;
	padding-top: 10.9126984%;
}
#shopBox01 .goodsText {
	top: 0%; left: 0;
	width: 100%;
	padding-top: 45.6349206%;
}

#shopBox02 .goods01 {
	top: 0%; right: 1.5%;
	width: 34.6230158%;
	padding-top: 10.9126984%;
}
#shopBox02 .goodsText {
	top: 0%; left: 0;
	width: 100%;
	padding-top: 58.531746%;
}

#shopBox03 .goods01 {
	top: 0%; right: 1.5%;
	width: 34.6230158%;
	padding-top: 10.9126984%;
}
#shopBox03 .goodsText {
	top: 0%; left: 0;
	width: 100%;
	padding-top: 58.531746%;
}

#shopBox04 .goods01 {
	top: 0%; right: 1.5%;
	width: 34.6230158%;
	padding-top: 10.9126984%;
}
#shopBox04 .goodsText {
	top: 0%; left: 0;
	width: 100%;
	padding-top: 58.531746%;
}

#shopBox05 .goods01 {
	top: 0%; right: 1.5%;
	width: 34.6230158%;
	padding-top: 10.9126984%;
}
#shopBox05 .goodsText {
	top: 0%; left: 0;
	width: 100%;
	padding-top: 58.531746%;
}

#shopBox06 .goods01 {
	top: 0%; right: 1.5%;
	width: 34.6230158%;
	padding-top: 10.9126984%;
}
#shopBox06 .goodsText {
	top: 0%; left: 0;
	width: 100%;
	padding-top: 58.531746%;
}

#shopBox07 .goods01 {
	top: 0%; right: 1.5%;
	width: 47.2222222%;
	padding-top: 14.8809523%;
}
#shopBox07 .goodsText {
	top: 0%; left: 0;
	width: 100%;
	padding-top: 52.0833333%;
}

#shopBox08 .goods01 {
	top: 0%; right: 1.5%;
	width: 47.2222222%;
	padding-top: 14.8809523%;
}
#shopBox08 .goodsText {
	top: 0%; left: 0;
	width: 100%;
	padding-top: 54.0674603%;
}
.orgBox .orgShop {
	top: 0%; left: 0%;
	width: 100%;
}
.orgBox .orgGoods {
	top: 0%; left: 50%;
	transform: translateX(-50%);
	width: 91.6%;
	padding-top: 13%;
}
.orgBox .orgText {
	top: 0%; left: 0%;
	width: 100%;
	padding-top: 65%;
}

.shopLink {
	bottom: 0; left: 0;
	width: 100%;
	background: url(../img/special/link_bt_off.png) no-repeat;
	background-size: cover;
}
.shopLink_s {
	bottom: 0; left: 0;
	width: 100%;
	background: url(../img/special/link_bt_s_off.png) no-repeat;
	background-size: cover;
}
.shopLink a,.shopLink_s a {
	transition: all 0.4s;
	opacity: 0.0;
}
.shopLink a:hover,.shopLink_s a:hover {opacity: 1.0;}

@media screen and (min-width: 1025px) {
	.shop_bg {padding: 50px 0 100px;}
	#shopInner {width: 1030px;}
	#shopBox01 {height: 840px;}
	#shopBox02,#shopBox03,#shopBox04,#shopBox05,
	#shopBox06,#shopBox07,#shopBox08, {
		height: 740px;
	}
	#shopBox01,#shopBox02,#shopBox03,#shopBox04,
	#shopBox05,#shopBox06,#shopBox07,#shopBox08 {
		width: 1008px;
		margin: 0 auto 20px;
	}

	#shopBox01 .goods01 {
		top: 110px; left: 350px;
		width: 319px;
		padding-top: 0%;
	}
	#shopBox01 .goods02 {
		top: 110px; right: 15px;
		width: 319px;
		padding-top: 0%;
	}
	#shopBox01 .goodsText {
		top: 460px; left: 0;
		width: 100%;
		padding-top: 0%;
	}

	#shopBox02 .goods01 {
		top: 110px; right: 15px;
		width: 349px;
		padding-top: 0%;
	}
	#shopBox02 .goodsText {
		top: 590px; left: 0;
		width: 100%;
		padding-top: 0%;
	}

	#shopBox03 .goods01 {
		top: 110px; right: 15px;
		width: 349px;
		padding-top: 0%;
	}
	#shopBox03 .goodsText {
		top: 590px; left: 0;
		width: 100%;
		padding-top: 0%;
	}

	#shopBox04 .goods01 {
		top: 110px; right: 15px;
		width: 349px;
		padding-top: 0%;
	}
	#shopBox04 .goodsText {
		top: 590px; left: 0;
		width: 100%;
		padding-top: 0%;
	}

	#shopBox05 .goods01 {
		top: 110px; right: 15px;
		width: 349px;
		padding-top: 0%;
	}
	#shopBox05 .goodsText {
		top: 590px; left: 0;
		width: 100%;
		padding-top: 0%;
	}

	#shopBox06 .goods01 {
		top: 110px; right: 15px;
		width: 349px;
		padding-top: 0%;
	}
	#shopBox06 .goodsText {
		top: 590px; left: 0;
		width: 100%;
		padding-top: 0%;
	}

	#shopBox07 .goods01 {
		top: 150px; right: 15px;
		width: 476px;
		padding-top: 0%;
	}
	#shopBox07 .goodsText {
		top: 525px; left: 0;
		width: 100%;
		padding-top: 0%;
	}

	#shopBox08 .goods01 {
		top: 150px; right: 15px;
		width: 476px;
		padding-top: 0%;
	}
	#shopBox08 .goodsText {
		top: 545px; left: 0;
		width: 100%;
		padding-top: 0%;
	}
	#orgBonus {width: 1030px;}
	.orgBox {width: 500px;}
	.orgBox .orgShop {width: 500px;}
	.orgBox .orgGoods {width: 458px;}
	.orgBox .orgText {width: 500px;}
}
#shopInner h5,
#shopBox01,#shopBox02,#shopBox03,#shopBox04,
#shopBox05,#shopBox06,#shopBox07,#shopBox08,
.shopName,.goods01,.goods02,.goodsText,
.orgBox
 {opacity: 0.0;}

#shopInner h5 {animation: bnsU 0.6s ease-in-out 0.6s forwards;}

#shopBox01.bnsOpen {animation: bnsOn 0.6s ease-in-out forwards;}
#shopBox02.bnsOpen {animation: bnsOn 0.6s ease-in-out forwards;}
#shopBox03.bnsOpen {animation: bnsOn 0.6s ease-in-out forwards;}
#shopBox04.bnsOpen {animation: bnsOn 0.6s ease-in-out forwards;}
#shopBox05.bnsOpen {animation: bnsOn 0.6s ease-in-out forwards;}
#shopBox06.bnsOpen {animation: bnsOn 0.6s ease-in-out forwards;}
#shopBox07.bnsOpen {animation: bnsOn 0.6s ease-in-out forwards;}
#shopBox08.bnsOpen {animation: bnsOn 0.6s ease-in-out forwards;}

.bnsOpen .shopName {animation: bnsL 0.6s ease-in-out 0.2s forwards;}
.bnsOpen .goods01 {animation: bnsR 0.6s ease-in-out 0.4s forwards;}
.bnsOpen .goods02 {animation: bnsR 0.6s ease-in-out 0.5s forwards;}
.bnsOpen .goodsText {animation: bnsU 0.6s ease-in-out 0.5s forwards;}

.orgBox.bnsOpen {animation: bnsOn 0.6s ease-in-out forwards;}

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

@keyframes bnsL {
0% 		{transform: translate3d(50px,0,0); opacity: 0;}
100% 	{transform: translate3d(0,0,0);	opacity: 1.0;}
}
@keyframes bnsR {
0% 		{transform: translate3d(-50px,0,0); opacity: 0;}
100% 	{transform: translate3d(0,0,0);	opacity: 1.0;}
}
@keyframes bnsU {
0% 		{transform: translate3d(0,30px,0); opacity: 0;}
100% 	{transform: translate3d(0,0,0);	opacity: 1.0;}
}

/*-------------------------
抱き枕＆ルート分割
-------------------------*/

.spl_bg {
	padding: 0;
	background: url(../img/special/spl_bg01.jpg) no-repeat top center;
	background-size: cover;
}

#splInner {
	width: 100%;
	margin: 0 auto;
	padding: 30px 0 50px;
	background: url(../img/special/spl_bg02.png?v1.2);
}
#splHeader {
	width: 100%;
	margin: 0 auto 15%;
	position: relative;
}
.splHead:before {
	content: "";
	display: block;
	padding-top: 132.8125%;
}

#splTitle,#splCatch1,#splCatch2,#splCatch3 {
	width: 100%;
	position: absolute;
}
#splCatch4,#splAtt {
	width: 90%;
	position: absolute;
}
#splHeader img {
	width: 100%; height: auto;
}
#splTitle {
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}
#splCatch1 {
	top: 33%;
	left: 50%;
	transform: translateX(-50%);
}
#splCatch2 {
	top: 46.5%;
	left: 50%;
	transform: translateX(-50%);
}
#splCatch3 {
	top: 65%;
	left: 50%;
	transform: translateX(-50%);
}
#splCatch4 {
	top: 75%;
	left: 50%;
	transform: translateX(-50%);
}
#splAtt {
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
}

#splContents {
	width: 90%;
	margin: 0 auto 30px;
}

#splNavi {
	display:flex;
	justify-content: center;
	width: 100%;
	margin: 0 auto 20px;
}
#splNavi li {
	width: 24%;
	margin: 0 1px;
	position: relative;
}
.newItem {
	width: 40px; height: 20px;
	background: url(../img/special/p_new.png)no-repeat;
	position: absolute;
	left: 0; top: -15px;
}

.splC01 {
	background: url(../img/special/b_tab01_on.png?v=3.1) no-repeat;
	background-size: cover;
}
.splC02 {
	background: url(../img/special/b_tab02_on.png?v=3.1) no-repeat;
	background-size: cover;
}
.splC03 {
	background: url(../img/special/b_tab03_on.png?v=3.1) no-repeat;
	background-size: cover;
}
.splC04 {
	background: url(../img/special/b_tab04_on.png?v=3.1) no-repeat;
	background-size: cover;
}

#splNavi li a {
	width: 100%;
	height: 100%;
	display: block;
}
#splNavi li a img {
	transition: all 0.6s;
}
#splNavi li a img:hover {
	opacity: 0.0;
}


#splNavi li.active a img,
#splNavi li.active a img:hover {
	opacity: 0.0;
}
#splNavi li img {
	width: 100%;
	height: auto;
}


.tabbox {display: none;}

.splSheet {
	width: 100%;
	padding: 2.0rem;
	margin-bottom: 4.0rem;
	border-radius: 1.0rem;
	background: #FFF;
	box-shadow: 0 0 5px rgba(0,0,0,0.35);
}
.splItem {
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
}
.splItem2 {
	width: 80%;
	margin: 0 auto;
	padding-bottom: 20px;
	margin-bottom: 20px;
}
.splItemData {
	width: 100%;
	margin: 0 auto;
	display: block;
}
.splFooter {
	padding-bottom: 50px;
	margin-bottom: 50px;
	border-bottom: dotted 10px #adadad;
}
.splBox1 {
	width: 100%;
	margin-right: 0px;
	padding-bottom: 1.0rem;
}
.splBox2 {
	width: 80%;
	text-align: center;
	margin: 0 auto;
	padding-bottom: 1.0rem;
}
.splItem2 img,.splBox2 img {
	width: 100%;
	height: auto;
}

.setBg01,.setBg02,.setBg03,.setBg04 {
	background: none;
}
.splTitle {
	font-size: 2.0rem;
	font-weight: bold;
	line-height: 1.5;
	color: #231c1e;
}
.splTitle:before {
	content: "\f14a";
	font-family: fontawesome;
	font-weight: normal;
	color: #f22699;
	margin-right: 5px;
}
.splPrice {
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 1.5;
	color: #FFF;
	background: #f22699;
	display: inline-block;
	padding: 0 1.5rem;
	margin-bottom: 2.0rem;
	border-radius: 2.0rem;
}
.splCap {
	width: 100%;
	background: #231c1e;
	border-radius: 1.0rem;
	padding: 1.5rem;
}

.splCap p {
	font-size: 1.4rem;
	line-height: 1.5;
	color: #FFF;
}

.splAt01,.splAt02 { font-weight: bold;}
.splAt01:before {
	content: "\f14a";
	font-family: fontawesome;
	font-weight: normal;
	color: #f22699;
	margin-right: 5px;
}
.splAt02:before {
	content: "\f06a";
	font-family: fontawesome;
	font-weight: normal;
	color: #f22699;
	margin-right: 5px;
}

.splCg {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.splCg li {
	width: 24%;
	margin-bottom: 10px;
}
.splCg li img {
	width: 100%;
	height: auto;
}

.splShoplink {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
.splShoplink li {
	width: 48%;
	margin: 0 5px;
}
.splShoplink li a {
	width: 100%;
	height: 100%;
	display: block;
}
.splShoplink li img {
	width: 100%;
	height: auto;
}

.splLink1 a {
	background: url(../img/special/spl_b_fanza_on.png) no-repeat;
	background-size: cover;
}
.splLink2 a {
	background: url(../img/special/spl_b_dlsite_on.png) no-repeat;
	background-size: cover;
}
.splShoplink li a img { transition: all 0.6s; }
.splShoplink li a img:hover { opacity: 0.0; }


@media screen and (min-width: 1025px) {
#splHeader {
	width: 1060px;
	height: 1360px;
	margin: 0 auto 30px;
}

#splTitle {
	top: 0;
}
#splCatch1 {
	top: 450px;
}
#splCatch2 {
	top: 640px;
}
#splCatch3 {
	top: 850px;
}
#splCatch4 {
	top: 950px;
}
#splAtt {
	width: 760px;
	top: 1280px;
}

#splContents {
	width: 1060px;
	margin: 0 auto 30px;
}

#splNavi {
	display:flex;
	width: 980px;
	margin: 0 auto 20px;
}
#splNavi li {
	width: 243px;
	margin: 0 1px;
}

.splTitle { font-size: 3.0rem;}
.splPrice { font-size: 2.0rem;}

.splItem {
	width: 960px;
	flex-direction: row;
}
.splItem2 {
	width: 732px;
}
.splItemData {
	width: 960px;
	display: block;
}

.splBox1 {
	width: 430px;
	margin-right: 20px;
}
.splBox2 {
	width: 510px;
}
.setBg01 {
	background: url(../img/special/spl_cle_sd.png) no-repeat center bottom;
}
.setBg02 {
	background: url(../img/special/spl_ang_sd.png) no-repeat center bottom;
}
.setBg03 {
	background: url(../img/special/spl_jul_sd.png) no-repeat center bottom;
}
.setBg04 {
	background: url(../img/special/spl_col_sd.png) no-repeat center bottom;
}

.splCg li {
	width: 210px;
	margin-bottom: 10px;
}

.splShoplink {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
.splShoplink li {
	width: 350px;
	margin: 0 5px;
}

}

.splOpen {animation: splInU 0.7s ease-in-out forwards;}
.splOpen2 {animation: splInU2 0.7s ease-in-out forwards;}


/*#splTitle,#splCatch1,#splCatch2,#splCatch3,#splCatch4,#splAtt,
#splNavi,.splSheet {
	opacity: 0.0;
}*/

#splTitle,#splCatch1,#splCatch2,#splCatch3,#splCatch4,#splAtt {
	opacity: 0.0;
}


@keyframes splInL {
0% 		{transform: translate3d(50px,0,0); opacity: 0;}
100% 	{transform: translate3d(0,0,0);	opacity: 1.0;}
}
@keyframes splInU {
0% 		{transform: translate3d(-50%,50px,0); opacity: 0;}
100% 	{transform: translate3d(-50%,0,0);	opacity: 1.0;}
}
@keyframes splInU2 {
0% 		{transform: translate3d(0,50px,0); opacity: 0;}
100% 	{transform: translate3d(0,0px,0);	opacity: 1.0;}
}
@keyframes splInR {
0% 		{background-position: 0 top; opacity: 0;}
100% 	{background-position: center top;	opacity: 1.0;}
}


/*-------------------------
TWITTER ITEM-ツイッターアイテム-
-------------------------*/
.item_bg {
	padding: 2.5% 0 5%;
	background: url(../img/top/bg_ptn02.jpg);
}
#itemInner {
	position: relative;
	width: 100%;
	margin: 0 auto;
}
#itemInner img {
	width: 100%;
	height: auto;
}
#itemInner h2 {
	width: 100%;
	margin: 0 auto 10%;
}
#itemInner h5 {
	width: 100%; height: 65px;
	text-indent: -9999px;
	margin-bottom: 20px;
	border-bottom: solid 1px #c0c8cf;
	background-position: center top;
}
.itemT1 {background: url(../img/special/m_icon.png) no-repeat;}
.itemT2 {background: url(../img/special/m_header.png) no-repeat;}

#twIcon {
	text-align: center;
	width: 100%;
	padding-bottom: 10%;
}
#twIcon li {
	display: inline-block;
	vertical-align: bottom;
	width: 20%;
	margin: 0 1% 2%;
	background: #FFF;
	box-shadow: 0 2px 0 rgba(255,241,23,0.9);
}
#twHead {
	text-align: center;
	width: 100%;
	margin: 0 0 2%;
	padding-bottom: 10%;
}
#twHead li {
	vertical-align: bottom;
	width: 100%;
	margin: 0 0 2%;
	background: #FFF;
	box-shadow: 0 2px 0 rgba(255,241,23,0.9);
}

@media screen and (min-width: 1025px) {
	.item_bg {padding: 50px 0 100px;}
	#itemInner {width: 1030px;}
}

.itemOn {opacity: 0.0;}

.itemOpen.itemOn {animation: bnsU 0.6s ease-in-out forwards;}

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

/*-------------------------
CAMPAIGN-予約キャンペーン-
-------------------------*/
#campaign01 {
	width: 90%;
	margin: 0 auto 10%;
}
#campaign01 img {
	width: 100%;
	height: auto;
}
#cam01Catch01 {margin-bottom:0.5%;}
#cam01Catch02 {margin-bottom:0.5%;}
#cam01Catch03 {margin-bottom:3%;}

#campaign01 p {display: none;}
#cam01Box {
	display: flex;
	flex-direction: row;
}
#cam01About,#cam01Pict {
	width: 50%;
}

#cam01Catch01,#cam01Catch02,#cam01Catch03,
#cam01About,#cam01Pict {opacity: 0.0;}

.move #cam01Catch01 {animation: fadeUp 0.8s ease-in-out 0.0s forwards;}
.move #cam01Catch02 {animation: fadeUp 0.8s ease-in-out 0.1s forwards;}
.move #cam01Catch03 {animation: fadeUp 0.8s ease-in-out 0.2s forwards;}
.move #cam01About {animation: fadeInL 0.8s ease-in-out 0.4s forwards;}
.move #cam01Pict {animation: fadeInR 0.8s ease-in-out 0.5s 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;}
}


#speInner h5 {
	width: 100%; height: 65px;
	text-indent: -9999px;
	margin-bottom: 20px;
	border-bottom: solid 1px #c0c8cf;
	background-position: center top;
}
.camT1 {background: url(../img/special/m_shoplist.png) no-repeat;}

#cam01Map {
	width: 90%;
	margin: 0 auto 100px;
}

/*.noInput {display: block;}*/
.areaBtn {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
}
.areaBtn li {
	width: 33%; height: 40px;
	font-size: 1.4rem;
	font-weight: bold;
	line-height: 38px;
	text-align: center;
	margin-bottom: 1%;
}
.areaBtn li a {
	display: block;
	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;
}

.camTbl {
	width: 90%;
	margin: 0 auto;
}

.camTbl dl{
	display:flex;
	flex-wrap: wrap;
	border-top: 1px solid #CCC;
	border-right: 1px solid #CCC;
	margin-bottom: 10%;
	font-size: 1.2rem;
}
.camTbl dt {
	width: 100%;
	display:flex;
	align-items: center;
	border-left: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
	padding: 10px;
}
.camTbl dd{
	width: 100%;
	padding: 10px;
	border-left: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
	background: rgba(255,255,255,0.5);
}
.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;}

@media screen and (min-width: 1025px) {
	#campaign01 {width: 1060px;}
	#cam01Map {width: 1060px;}
	.areaBtn li {width: 24%;}
	.camTbl {width: 980px;}
	.camTbl dl{font-size: 1.2rem;}
	.camTbl dd{width: 50%;}
	.noInput {display: block;}
}

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

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

/*WCAMPAIGN*/
.wcamp_bg {
	padding: 0 0 12%;
	background: url(../img/top/bg_ptn02.jpg);
}
.wcamp_bg img {
	width: 100%;
	height: auto;
}
#wcampHead {
	position: relative;
	width: 100%;
	margin: 0 auto 3%;
	background: url(../img/special/wc_head.png) no-repeat center top;
	background-size: cover;
}
#wcampHead h2 {
	position: absolute;
	bottom: 0; left: 50%;
	transform: translateX(-50%);
	width: 100%;
	z-index: 5;
	/*padding-top: 11.3207547%;*/
}
#wcampHead #wcImage {
	position: absolute;
	top: 0; left: 50%;
	transform: translateX(-50%);
	width: 100%;
	z-index: 1;
	/*padding-top: 11.3207547%;*/
}
.wcampSize:before {
	content: "";
	display: block;
	/*padding-top: 38.0208333%;*/
	padding-top: 67.9245283%;
}
#wcInner {
	width: 90%;
	margin: 0 auto;
}
#wcInner > h4 {
	width: 100%;
	margin: 0 auto 4%;
}
#wcAbout {
	margin: 0 auto 4%;
}
.wcPlan {
	margin-bottom: 1%;
}
.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: #394258;
	padding: 2% 0 0 0;
	text-align: center;
}
.wcPlanSub ul {
	font-size: 1.2rem;
	line-height: 1.5;
	font-weight: bold;
	color: #ff5400;
	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: 1025px) {
	#wcampHead {
		/*height: 730px;*/
		margin: 0 auto 50px;
		background: url(../img/special/wc_head2.png) no-repeat center top;
		background-size: cover;
	}
	#wcampHead h2 {
		width: 55.2083333%;
	}
	.wcampSize:before {
		content: "";
		display: block;
		padding-top: 38.0208333%;
		/*padding-top: 67.9245283%;*/
	}
	#wcInner {
		width: 1060px;
	}
	#wcInner h4 {
		width: 1060px;
		margin: 0 auto 40px;
	}
	#wcAbout {
		margin: 0 auto 40px;
	}
	.wcPlan {
	}
	.wcPlanSub {
		width: 902px;
		margin-left: 158px;
		padding-bottom: 70px;
	}
	.wcPlanSub dt {
		display: flex;
		width: 407px;
	}
	.wcPlanSub dd {
		display: flex;
		align-items: flex-end;
		width: 495px;
		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
-------------------------*/
.prd_bg {
	padding: 5.5% 0 0;
	background: url(../img/top/bg_ptn02.jpg);
}
#prdInner {
    position: relative;
    width: 80%;
    margin: 0 auto;
}
#prdInner img {
	width: 100%;
	height: auto;
}
#prdInner h5 {
	width: 100%; height: 65px;
	text-indent: -9999px;
	margin-bottom: 30px;
	border-bottom: solid 1px #c0c8cf;
	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;}

#aboutBox {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0 auto;
	padding-bottom: 5%;
}
dl.size1,dl.size2,dl.size3,dl.size4 {
	display: flex;
	flex-wrap: wrap;
}
dl.size1 {width: 100%;}
dl.size2 {width: 100%;}
dl.size3 {width: 100%;}
dl.size4 {width: 100%;}

dl.size1 dt, dl.size2 dt, dl.size3 dt, dl.size4 dt {
	display: flex;
	align-items: center;
	text-align: left;
}
dl.size1 dd, dl.size2 dd, dl.size3 dd, dl.size4 dd {
	display: flex;
	align-items: center;
	font-size: 1.8rem;
	line-height: 2.0;
	font-weight: bold;
	color: #394258;
	text-align: left;
}
dl.size1 dt.bnSizeM {width: 120px;}
dl.size1 dd {width: calc(100% - 120px);}
dl.size2 dt {width: 140px;}
dl.size2 dd {width: calc(100% - 140px);}
dl.size3 dt {width: 140px;}
dl.size3 dd {width: calc(100% - 140px);}
dl.size4 dt {width: 110px;}
dl.size4 dd {width: calc(100% - 110px);}

#aboutBox dt,#aboutBox dd,
#specBox dt,#specBox dd {margin-bottom: 30px;}

#specBox {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
	margin: 0 auto;
	padding-bottom: 5%;
}
#spec1 { width: 100%;}
#spec2 { width: 100%;}

#spec2 dd span {
	font-size: 1.2rem;
	font-weight: normal;
	color: #ff5400;
	line-height: 1.5;
}

.bnSizeS img {width: 92px !important; height: 35px !important;}
.bnSizeM img {width: 107px !important; height: 35px !important;}
.bnSizeL img {width: 127px !important; height: 35px !important;}


@media screen and (min-width: 1025px) {
	.prd_bg {
		padding: 105px 0 0;
	}
	#prdInner {
		width: 1030px;
	}
	#aboutBox {
		flex-direction: row;
		justify-content: space-between;
		width: 100%;
		padding-bottom: 100px;
	}
	#specBox {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 100%;
		padding-bottom: 100px;
	}
	#spec1 { width: 40%;}
	#spec2 { width: 57%;}

	dl.size1 {width: 43%;}
	dl.size2 {width: 55%;}
	dl.size3 {width: 100%;}
	dl.size4 {width: 100%;}
}

@media screen and (max-width: 767px) {

	#prdInner {width: 90%;}

	dl.size1 dd {width: 100%;}
	dl.size2 dt {width: 100%;}
	dl.size2 dd {width: 100%;}
	dl.size3 dt {width: 100%;}
	dl.size3 dd {width: 100%;}
	dl.size4 dt {width: 100%;}
	dl.size4 dd {width: 100%;}

	dl.size1 dd, dl.size2 dd,
	dl.size3 dd, dl.size4 dd {
		font-size: 1.4rem;
		line-height: 1.2;
	}
	#aboutBox dt,#specBox dt {margin-bottom: 15px;}
	#aboutBox dd,#specBox dd {margin-bottom: 25px;}
}

.prdT1,.prdT2,.prdT3,
.size1,.size2,.size3,.size4 {
	opacity: 0.0;
}

.prdT1 {animation: specIn 0.8s ease-in-out 0.7s forwards;}
.size1 {animation: specIn 0.8s ease-in-out 0.8s forwards;}
.size2 {animation: specIn 0.8s ease-in-out 0.8s forwards;}
.prdT2 {animation: specIn 0.8s ease-in-out 1.0s forwards;}
.size3 {animation: specIn 0.8s ease-in-out 1.1s forwards;}
.prdT3 {animation: specIn 0.8s ease-in-out 1.0s forwards;}
.size4 {animation: specIn 0.8s ease-in-out 1.1s forwards;}

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



/*-------------------------
FOOTER
-------------------------*/
#fInner {
	width: 90%;
	margin: 0 auto;
}
#fInner #brand {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0 auto;
	text-align: center;
}
#fInner #brand dt {
	display: block;
	align-items: normal;
	width: 100%;
}
#fInner #brand dd {
	display: block;
	align-items: normal;
	width: 100%;
	font-size: 1.2rem;
	font-weight: bold;
	color: #FFF;
	padding: 5px 0 0 0;
}
#fInner #brand dt img {width: 145px;}

/*TOP用*/
#fInnerTop {
	display: flex;
	flex-direction: column-reverse;
	width: 90%;
	margin: 0 auto;
}
#fColumn1 {
	position: relative;
	width: 100%; height: auto;
}
#fColumn2 {
	position: relative;
	width: 100%; height: auto;
}
#fColumn2 img {
	width: 100%;
	height: auto;
}
.fPad1:before {
	content: "";
	display: block;
	padding-top: 10%;
}
.fPad2:before {
	content: "";
	display: block;
	padding-top: 37.0639534%;
}
#footBase {
	position: absolute;
	top: 0; left: 0;
	z-index: 1;
	width: 100%; height: auto;
}
#footRadio {
	position: absolute;
	top: 0; left: 27.616279%;
	z-index: 2;
	width: 37.5362318%;
	margin-top: 5.9420289%;
	background: url(../img/top/youtube_thum_bg.png) no-repeat;
	background-size: cover;
}
#footRadio a {transition: all 0.4s;}
#footRadio a:hover {opacity: 0.6;}

#fColumn1 #brand {
	position: initial;
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0 auto;
	text-align: center;
}
#fColumn1 #brand dt {
	display: block;
	align-items: normal;
	width: 100%;
}
#fColumn1 #brand dd {
	display: block;
	align-items: normal;
	width: 100%;
	padding: 5px 0 0 0;
	font-size: 1.2rem;
	font-weight: bold;
	color: #FFF;
}
#fColumn1 #brand dt img {width: 145px;}

@media screen and (min-width: 1025px) {
	#fInnerTop {
		display: flex;
		flex-direction: row;
		width: 1060px;
	}
	#fColumn1 {
		position: relative;
		width: 370px; height: 255px;
	}
	#fColumn2 {
		position: relative;
		width: 688px; height: 255px;
	}
	.fPad1:before,.fPad2:before {
		padding-top: 0%;
	}
	#footBase {
		position: absolute;
		top: 0; left: 0;
		z-index: 1;
		width: 688px; height: 255px;
	}
	#fColumn1 #brand {
		position: absolute;
		bottom: 10px; left: 0;
		display: flex;
		flex-direction: row;
		width: 355px;
		text-align: left;
		margin: 0 0 0 15px;
	}
	#fColumn1 #brand dt {
		display: flex;
		align-items: flex-end;
		width: 145px;
	}
	#fColumn1 #brand dd {
		display: flex;
		align-items: flex-end;
		width: 210px;
		padding: 0 0 0 10px;
		font-size: 1.2rem;
		font-weight: bold;
		color: #FFF;
	}
}
/*-------------------------
*SHARE
-------------------------*/
#fInner #shareArea {
	display: block;
	text-align: center;
}
#fColumn1 #shareArea {
	position: initial;
	display: block;
	text-align: center;
}
#shareArea div {display: inline-block}
#fInner #shareArea div a {
	display: block;
	width: 50px; height: 50px;
	margin: 20px 10px 10px;
	transition: all 0.6s;
}
#fColumn1 #shareArea div a {
	display: block;
	width: 50px; height: 50px;
	margin: 20px 10px 10px;
	transition: all 0.6s;
}
#shareArea div a:hover {opacity: 0.5;}

.shareTw {background: url(../img/top/sns_twi.png) no-repeat;}
.shareFb {background: url(../img/top/sns_fb.png) no-repeat;}
.shareLi {background: url(../img/top/sns_line.png) no-repeat;}

@media screen and (min-width: 1025px) {
	#fColumn1 #shareArea {
		position: absolute;
		bottom: 70px;
		text-align: left;
	}
	#fColumn1 #shareArea div a {
		margin: 0px 20px 10px;
	}
}
/*-------------------------
*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;
}
#loader {
	display: none;
	justify-content: center;
	align-items: center;
}
#loadInner {
	position: relative;
}

#loadOut {
	width: 200px; height: 200px;
	margin: 0 auto 42px;
	background: url(../img/top/load_out.png?v1.0);
	background-size: cover;
	transform: rotate(-120deg);
}
#loadIn {
	width: 200px; height: 200px;
	margin: 0 auto 42px;
	background: url(../img/top/load_in.png?v1.0);
	background-size: cover;
}
#loadT {
	position: absolute;
	top: 165px; left: 50%;
	transform: translateX(-50%);
	width: 125px; height: 14px;
}

@media screen and (min-width: 1025px) {
	#loadOut {
		width: 450px; height: 450px;
		margin: 0 auto 42px;
	}
	#loadIn {
		width: 450px; height: 450px;
		margin: 0 auto 42px;
	}
	#loadT {
		top: 315px; left: 50%;
		transform: translateX(-50%);
		width: 125px; height: 14px;
	}

}
/*-------------------------
*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;
}

#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 {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	z-index: 5;
	top: 0px; left: 50%;
	transform: translateX(-50%);
	width: 45.8333333%;
	padding-top: 48.9583333%;
}
#modalLayout ul li {
	width: 38.6363636%;
}
#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;
}