/*common*/
@font-face {
	font-family: 'rounded';
	src: url('rounded-x-mgenplus-1c-heavy.ttf') format('truetype');
}
@font-face {
	font-family: 'source_hansans';
	src: url('SourceHanSans-Bold.otf');
}

html {
	font-family: 'rounded';
	font-size: 0.9em;
	color: #3d0000;
}
html[lang="zh-cn"] , html[lang="zh-tw"]{
	font-family: 'source_hansans';
}


a{
	color: #fff;
}
body{
	-webkit-text-size-adjust: 100%;
}
.clearfix:after {
    content:" ";
    display:block;
    clear:both;
}
.clear{
	clear: both;
}
.dnone{
	display: none!important;
}
.audiojs{
	display: none;
}
h1.ttl{
	background: url(../img/bg_ttl.png) repeat-x bottom center;
	background-size: auto 50%;
	text-align: center;
	padding-top: 0;
}
.sp{
	display: inherit;
}
.pc{
	display: none;
}
.hovimg{
	cursor: pointer;
}
.tac{
	text-align: center;
}
.hov_opa:hover{
	opacity: 0.7;
}

.hov_ani1{
	transition: all 300ms 0s ease;
}
.hov_ani1:hover{
	transform: scale(1.2) rotate(-5deg);
}

.ani_play{
	animation: playvoice 1s infinite alternate ease-in-out;
}
@keyframes playvoice {
0% {transform:rotate(-10deg);}
50% {transform:rotate(0deg);}
100% {transform:rotate(10deg);}
}

.mb40px{
	margin-bottom: 40px !important;
}

/*img*/
header .btn_menu_close img ,header .btn_menu img,header .sns li img,
#main_img h1 img,#main_img h2 img,#main_img h3 img,
.mainimg .clearfix p img , .mainimg .img_main,
h1.ttl img,.btn_pv img,
#wcampaign .camp_01 img ,#wcampaign .camp_02 img,
#point .img1 .voicebtn img,#extra .voicebtn img,
#illust30 img,
#spec h1 img , #spec h2 img , #spec h3 img ,#support h1 img,
#faq h1 img,#update h1 img{
	width: 100%;
}


/*page*/

#container{
	position: absolute;
	width: 100%;
	z-index: 10;
}
.bg_top{
	position: fixed;
	width: 100%;
	height: 100%;
	background: url(../img/bg_common_top.png) repeat-x 0 top;
	z-index: 1;
}
.bg_bt{
	position: fixed;
	width: 100%;
	height: 100%;
	background: url(../img/bg_common_bt.png) repeat-x 0 bottom;
	z-index: 1;
}
.bg_star01 , .bg_star02 , .bg_star03 , .bg_star04{
	position: fixed;
	width: 30%;
	max-width: 315px;
	z-index: 2;
}

.bg_star01{
	left: 0;
	top: 0;
}
.bg_star02{
	right: 0;
	top: 0;
}
.bg_star03{
	left: 0;
	bottom: 0;
}
.bg_star04{
	right: 0;
	bottom: 0;
}
.sp_bg{
		width: 100%;
		height: 100%;
		background: #000;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 300;
		opacity: 0.5;
	}

/*header*/

header{
	position: fixed;
	right: -80%;
	top: 0;
	background: #ff78a9; /* Old browsers */
	background: -moz-linear-gradient(top, #ff78a9 0%, #ff7eab 18%, #ffa2b5 80%, #ffaab7 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #ff78a9 0%,#ff7eab 18%,#ffa2b5 80%,#ffaab7 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #ff78a9 0%,#ff7eab 18%,#ffa2b5 80%,#ffaab7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff78a9', endColorstr='#ffaab7',GradientType=0 ); /* IE6-9 */
	width: 80%;
	height: 100%;
	z-index: 500;
}
	header .btn_menu{
		display: block;
		width: 20%;
		margin-left: -20%;
		float: left;
		z-index: 500;
}
	header .btn_menu_close{
		display: block;
		width: 20%;
		margin-left: -20%;
		float: left;
		z-index: 400;}
	header .inner{
		height: 100%;
		overflow-y: scroll ;
		overflow-x: hidden ;
		-webkit-overflow-scrolling: touch;
	}
	header .main_nav li{
		color: #fff;
		padding: 18px 10px 18px 30px;
		width: 100%;
		font-size: 1.2em;
	}
	header .main_nav li:hover{
		text-shadow: 0px 3px 1px #f25582;
		background: url(../img/icn_star.png) no-repeat left center;
		cursor: pointer;
	}

	header .sns{
		position: relative;
		right: auto;
		background: #fed2dc;
		padding: 1em 1em 0 1em;
	}
		header .sns li{
			width: 20%;
			float: left;
			margin-left: 5%;
			margin-bottom: 1em;
		}
header .lang{
	margin: 1em;
	font-size: 16px;}
header .lang h2{
	background: #ff7baa;
	color: #fff;
	padding: 1em;
	border-radius: 10px;
	cursor: pointer;
}
header .lang h2.open{
		border-radius: 10px 10px 0 0;
}
header .lang h2:hover{
	color: #672b12;
}
header .lang ul{
	border: solid #ff7baa;
	border-width:3px;
	border-radius: 0 0 10px 10px;
	display: none;
}
header .lang li{
	background: #fff;
}
header .lang li:hover{
	background: #ffd9ed;
}
header .lang li:last-child{
	border-radius: 0 0 10px 10px;}
header .lang li a{
	padding: 0.5em;
	color: #672b12;
	display: block;
}


/*main_img*/
#main_img{
	margin-top: 1em;
}

#main_img h1{
	width: 70%;
	max-width: 378px;
	margin: auto;
}
#main_img h2{
	width: 100%;
	max-width: 860px;
	margin:0 auto;
}
html[lang="zh-cn"] #main_img h2, html[lang="zh-tw"] #main_img h2{
	width: 100%;
	max-width: 993px;
	margin:0 auto;
}


#main_img h3{
	width: 100%;
	max-width: 876px;
	margin:auto;
	z-index: 300;
	position: relative;
}

.mainimg{
	background: url(../img/sp/bg_main_img.png) no-repeat center top;
	background-size: 100% auto;
	margin-top: -1em;
	position: relative;
	z-index: 200;
}
	.mainimg .clearfix p:first-child{
	 margin: auto;
		width: 80%;
	}
	.mainimg .clearfix p:last-child{
		width: 75%;
		margin:-5% auto;
	}

.btn_pv{
	width: 70%;
	margin:12% auto 3em auto;
	z-index: 300;
	position: relative;

}
.btn_pv:hover{
	cursor: pointer;
}


/*wcampaign*/
#wcampaign{
	width: 100%;
	max-width: 1189px;
	margin:-15% auto 0 auto;
	z-index: 400;
	position: relative;
}

#wcampaign .wc_bg_top{
	background: url(../img/sp/bg_wcampaign_top.png) no-repeat center top;
	background-size: 100% auto;
	padding-bottom: 10%;
	padding-top: 50%;
}
#wcampaign .wc_bg_bottom{
	background: url(../img/sp/bg_wcampaign_bottom.png) no-repeat center bottom;
	background-size: 100% auto;
	padding-bottom: 5%;
}

#wcampaign .camp_01{
	background: #f6e7fc;
	border-radius: 10px;
	width: 85%;
	margin: auto;
	padding-top: 0.5em;
}
	#wcampaign .camp_01 .btn , #wcampaign .camp_02 .btn{
		display: block;
		width: 70%;
		margin:0.5em auto;
	}
	#wcampaign .camp_01 .txt ,#wcampaign .camp_02 .txt{
		border-top: 1px solid #fff;
		padding: 1em;
		font-size: 0.8em;
	}
#wcampaign .camp_02{
	background: #fdeaf0 url(../img/bg_camp2.png) no-repeat center top;
	background-size: 100% auto;
	border-radius: 10px;
	width: 85%;
	margin:1em auto;
	padding-top: 0.5em;
}
	#wcampaign .camp_02 .txt{
		background: #fdeaf0;
		border-radius:0 0 10px 10px;
	}

/*release*/
#release{
	width: 100%;
	max-width: 871px;
	margin:-10% auto ;
	z-index: 400;
	position: relative;
}
#release .wc_bg_top{
	background: url(../img/sp/img_release_top.png) no-repeat center top;
	background-size: 100% auto;
	padding-bottom: 15%;
	padding-top: 20%;
}
html[lang="zh-cn"] #release .wc_bg_top{
	background: url(../img/cn/sp/img_release_top.png) no-repeat center top;
	background-size: 100% auto;
	padding-bottom: 15%;
	padding-top: 20%;
}
html[lang="en"] #release .wc_bg_top{
	background: url(../img/en/img_release_top.png) no-repeat center top;
	background-size: 100% auto;
	padding-bottom: 15%;
	padding-top: 20%;
}

#release .wc_bg_bottom{
	background: url(../img/sp/bg_wcampaign_bottom.png) no-repeat center bottom;
	background-size: 100% auto;
	padding-bottom: 5%;
}
#release .store{
		width: 90%;
		max-width: 715px;
		margin: auto;
}
#release .store a{
		width: 45%;
		float: left;
		text-align: center;
		display: block;
	}
html[lang="zh-cn"] #release .store a{
		width: 40%;
	    padding: 1% 5%;
}



#release .store a:first-child{
		text-align: left;
		padding: 2%;
	}
#release .store a:last-child{
		text-align: right;
		padding: 2%;
	}
#release .store a img{
			width: 100%;
			max-width: 290px;
		}



/*section point*/

#point .ttl img{
	width: 100%;
	max-width: 549px;
}
#point div{
	text-align: center;
}
#point .img_point{
	width: 100%;
	max-width: 947px;
}
#point .img1{
	position: relative;
}
	#point .img1 .voicebtn{
		width: 50%;
		position: absolute;
		bottom: 0.5em;
		left: 25%;
	}
html[lang="zh-cn"]	#point .img1 .voicebtn , html[lang="zh-tw"]	#point .img1 .voicebtn{
		width: 30%;
		position: absolute;
		bottom: 0.5em;
		left: 32%;
	}

/*section system*/
#system .ttl img{
	width: 100%;
	max-width: 519px;
}
#system .box{
	width: 90%;
	max-width: 956px;
	margin: auto;
}
#system .item_l{
	background: #fff;
	border-radius: 30px;
	box-shadow: 5px 5px 0 rgba(123,123,123,0.2);
	margin:20px auto;
	padding: 10px;
	position: relative;
}
#system .item_s{
	background: #fff;
	border-radius: 30px;
	box-shadow: 5px 5px 0 rgba(123,123,123,0.2);
	width: 46%;
	max-width: 440px;
	margin-bottom: 2em;
	padding: 10px 1%;
}

#system .item_s:nth-child(odd){
	margin-right:3%!important;

	float: left;
}
#system .item_s:nth-child(even){
	float: right;
}
#system h2{
	font-size: 1.2em;
	color: #fff;
	background: #f25582;
	border-radius: 22px;
	padding: 5px 10px;
	text-align: center;
}
	#system .txt{
		line-height: 1.2em;
	}
	#system .item_l .txt{
		margin: 10px 0;
	}
	#system .item_l .img{
		width: 80%;
		margin: auto;
	}
		#system .item_l .img img{
			width: 40%;
			margin:0 5%;
			max-width: 212px;
		}
	#system .item_s .txt{
		margin: 5px;
	}
	#system .item_s .img{
		text-align: center;
		width: 100%;
	}
		#system .item_s .img img{
			width: 80%;}


/*section extra*/


#extra .ttl img{
	width: 100%;
	max-width: 550px;
}
#extra h2{
	font-size: 1.3em;
	color: #fff;
	background: #f25582;
	border-radius: 22px;
	padding: 8px 20px;
	text-align: center;
}
#extra .box{
	width: 90%;
	max-width: 956px;
	margin: auto;
}
#extra .item_l{
	background: #fff;
	border-radius: 30px;
	box-shadow: 5px 5px 0 rgba(123,123,123,0.2);
	margin:10px auto 4em auto;
	padding: 10px;
	position: relative;
	border: 3px solid #fff;
}
	#extra .item_l .txt{
		margin: 10px 0;
		line-height: 1.2em;
		text-shadow: 2px 0px 0px #fff, 0px 2px 0px #fff, -2px 0px 0px #fff, 0px -2px 0px #fff;
	}
	#extra .item_l .txt_s{
		margin: 10px;
		font-size: 0.7em;
	}
	#extra .item_l .txt_p{
		width:100%;
		max-width: 606px;
	}
		#extra .item_l .txt_p img{
			width:100%;
		}

	#extra .item_l:first-child{
		background: #fff url(../img/bkg_extra01_sp.png) no-repeat center bottom;
			background-size: 100% auto;
		padding-bottom: 50%;
	}
		#extra .item_l:first-child .txt_p{
			width:100%;
			max-width: 450px;
		}
		html[lang="en"] #extra .item_l:first-child .txt_p{
			width:100%;
			max-width: 511px;
		}
		html[lang="en"] #extra .item_l:last-child .txt_p{
			width:100%;
			max-width: 468px;
		}

/*2th*/
	#extra .item_l:nth-child(2){
		background: #fff url(../img/bkg_extra02_sp.png) no-repeat center bottom;
		background-size: 100% auto;
		padding-bottom: 41%;
	}
		#extra .item_l:nth-child(2) .txt_p{
			width:100%;
			max-width: 606px;
		}
		html[lang="en"] #extra .item_l:nth-child(2) .txt_p{
			width:100%;
			max-width: 656px;
		}

		html[lang="zh-cn"] #extra .item_l:nth-child(2) .txt_p , html[lang="zh-tw"] #extra .item_l:nth-child(2) .txt_p{
			width:100%;
			max-width: 414px;
		}
/*3th*/
#extra .item_l:last-child{
	background: #fff url(../img/bkg_extra03_sp.png) no-repeat center bottom;
	background-size: 100% auto;
	padding-bottom: 41%;
}
#extra .item_l:last-child h2{
	font-size: 1.3em;
	color: #ffef86;
	background: #931789;
	border-radius: 22px;
	padding: 8px 20px;
	text-align: center;
}
#extra .item_l:last-child .txt_p2{
	text-align: left ;
	margin: 0px;
	max-width: 468px ;
	width: 100% ;
}

html[lang="zh-cn"] #extra .item_l:last-child .txt_p2,html[lang="zh-tw"] #extra .item_l:last-child .txt_p2{
	max-width: 290px ;
}

#extra .item_l:last-child .txt_p2 img{
	width: 100% ;
}

	#extra .voicebtn{
		width: 70%;
		position: absolute;
		bottom: -10%;
		left: 15%;
	}
	html[lang="zh-cn"] #extra .voicebtn , 	html[lang="zh-tw"] #extra .voicebtn{
		width: 45%;
		position: absolute;
		bottom: -10%;
		left: 30%;
	}

/*spec*/

#spec{
	width: 80%;
	max-width: 1000px;
	border-radius: 30px;
	background: #fff;
	margin: auto;
	padding: 2%;
	text-align: center;
}
	#spec h1 {
		text-align: center;
		margin: auto;
		width: 70%;
		max-width: 378px;
	}

	#spec h2 {
		text-align: center;
		margin: auto;
		width: 95%;
		max-width: 617px;
	}

	#spec h3 {
		text-align: center;
		margin:0.5em auto 0 auto;
		width: 90%;
		max-width: 530px;
	}
	#spec .txt{
		margin-bottom: 2em;
		line-height: 1.2em;
		display: inline-block;
		text-align: left;
	}
	#spec .store{
		width: 90%;
		max-width: 715px;
		margin: auto;
}
	#spec .store a{
		width: 45%;
		float: left;
		text-align: center;
		display: block;
	}

html[lang="zh-cn"] #spec .store a{
	width: 40%;
	padding: 2% 5%;
	text-align: center;
}


	#spec .store a:first-child{
		text-align: left;
		padding: 2%;
	}
	#spec .store a:last-child{
		text-align: right;
		padding: 2%;
	}
		#spec .store a img{
			width: 90%;
			max-width: 290px;
		}

/*support"*/

#support{
	background: #fee1f3;
	text-align: center;
	padding: 2em;
	margin-top: 3em
}
	#support h1{
		width: 50%;
		max-width: 137px;
		margin:0 auto 1em auto;
	}
#support a{
	color:#f25582 ;
}
/*footer*/

footer .company{
	background: #fabbcc;
	text-align: center;
	padding: 10px 0;
}
	footer .company a img{
		width: 35%;
		max-width: 140px;
	}

footer .copy{
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	background: #f25582;
	text-align: center;
	font-size: 0.6em;
	color: #fff;
	padding: 14px 0;
}




/*txt_info*/



.txt_info{
	background: #fff;
	border-radius: 30px;
	padding: 20px;
	width: 80%;
	max-width: 700px;
	margin:0 auto 2em auto;

}
.txt_info span{
	color: #f25582;
	font-size: 1.2em;
}



/*section faq*/
#faq {
	margin-bottom: 100px;
	margin-top: 40px;
}

@media screen and (max-width:1000px) {
#faq {
	margin-top: 20px;
}
#faq dt{
	padding: 10px 5px 10px 28px!important;
	background: url(../img/icn_q.png) no-repeat 0 10px!important;
	background-size: 20px auto!important;
	min-height: 30px!important;
}
#faq dd{
	background:#ffeff3 url(../img/icn_a.png) no-repeat 0 10px;
	background-size: 20px auto!important;
	min-height: 30px!important;
	padding: 10px 5px 10px 32px!important;
	display: none;
}
	#faq h2 {
	margin:20px 0 5px 0!important;
}

}

#faq .tac{
margin-top:1em;
	font-size: 1.2em;
	color: #f25582;
}

#faq .ttl img{
	width: 100%;
	max-width: 640px;
}
html[lang="en"] #faq .ttl img{
	width: 100%;
	max-width: 994px;
}


#faq .box {
    width: 90%;
    max-width: 956px;
    margin: auto;
}
#faq h2 {
    font-size: 1.3em;
    color: #fff;
    background: #f25582;
    border-radius: 22px;
    padding: 5px 10px;
    text-align: center;
	margin: 20px 0;
}
#faq dt{
	color: #f25582;
	font-size: 1.2em;
	padding: 20px 5px 0px 55px;
	background: url(../img/icn_q.png) no-repeat 10px center;
	min-height: 45px;
	border-top: 1px solid #f25582;
	cursor: pointer;
	line-height: 1.2em;
}
#faq dt:first-child{
	border-top:none;
}



#faq dd{
	background:#ffeff3 url(../img/icn_a.png) no-repeat 10px 10px;
	padding: 15px 5px 15px 55px;
	line-height: 1.3em;
	margin-bottom: 0.5em;
	font-size: 1em;
	border-radius: 20px;
	display: none;
}
html[lang="en"]  #faq dd{
	font-size: 1.2em;
}

.txt_agree{
	background: #fff;
	text-align: center;
	padding: 10px;
	font-size: 0 ;
}
.txt_agree a{
color: #f25582;
}

.txt_agree li{
	display: inline-block ;
	font-size: 18px ;
	border-right: 2px solid #f25582;
	padding-right:15px;
	margin-right:15px;
}

@media screen and (max-width: 768px) {
	.txt_agree li {
		font-size: 13px ;
	}
}

.txt_agree li.last{
	border-right: none ;
	padding-right:0px;
	margin-right:0px;
}


/*170925*/
.camp_03{
	position: relative;
	max-width: 1105px;
	margin: auto;

}
.camp_03 a{
	position: absolute;
	left: 15%;
	top: 65%;
}
.camp_03.sp{
	position: relative;
	width: 100%;
	margin: auto;

}
.camp_03.sp img{
	width: 100%;
}
.camp_03.sp a{
	position: absolute;
	width: 70%;
	margin: auto;
	bottom: 0;
	height: auto!important;
	top: auto;
	bottom: 11%;
}

/*180703*/
#newpack{
	position: relative;
	text-align: center;
	width: 100%;
	max-width: 802px;
	margin:-5% auto 10% auto;
	z-index: 230;
}
html[lang="zh-cn"] #newpack,html[lang="zh-tw"] #newpack{
	max-width: 933px ;
}
#newpack img{
	width: 100%;
}

#newpack_cont .main_img{
	width: 100%;
	max-width: 1300px ;
	margin: 0 auto ;
}

#newpack_cont {
	padding-top: 5%;
}

#newpack_cont .top_main {
	position: relative ;
    width: 100%;
	max-width: 1100px;
	margin: 0 auto ;
}

#newpack_cont .top_main img{
    width: 100%;
}

#newpack_cont h1.ttl {
	width: 67%;
    max-width: 885px;
    position: absolute;
    bottom: 8%;
    left: 17%;
    background: none;
}

html[lang="zh-cn"] #newpack_cont h1.ttl{
    width: 58%;
	max-width: 782px;
    left: 20%;
}

html[lang="zh-tw"] #newpack_cont h1.ttl{
	width: 53%;
    max-width: 525px;
    left: 25%;
}

@media screen and (max-width:1000px) {
	#newpack_cont h1.ttl {
		width: 86%;
		max-width: 1117px;
		position: static ;
		background: none ;
		margin: 0 auto ;
	}
}
#newpack_cont .box {
	text-align: center;
}

#newpack_cont .box img{
    width: 100%;
    max-width: 939px;
    display: block;
    margin: 0 auto;
}
#newpack_cont .btn{
	display: block;
	width: 10em;
	border-radius: 10px;
	background: #f25582;
	color: #fff;
	text-align: center;
	padding: 0.5em;
	margin: 2em auto;
	font-size: 1.5em;
}


.bg_popup{
	background: rgba(0,0,0,0.8);
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 600;
	text-align: center;

}
.bg_popup .box_linknewpack{
width: 95%;
max-width: 774px;
margin:5em auto;
position: relative;}

.bg_popup .box_linknewpack img{
	width: 100%;
}
.bg_popup .box_linknewpack a {
	position:absolute;
	bottom: 3em;
	width: 100%;
	display: block;
}
.bg_popup .box_linknewpack a img{
	width: 50%;
	max-width: 327px;
}
.bg_popup .btn_close{
	position: absolute;
	right: 0;
	top: 0;
	width: 10%;
	max-width: 100px;
}
.bg_popup .btn_close img{
	width: 100%;
}
.bg_popup .btn_close img:hover{
	cursor: pointer;
}