@charset "UTF-8";
html,body,span,iframe,p,pre,img,strong,b,i,dl,dt,dd,ol,ul,li,form,label,video,h1,h2,h3 {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:1em;
	vertical-align:baseline;
	background:transparent;
	background-attachment: fixed;
	font-weight: normal;
	box-sizing: border-box;
}
body {
	min-height: 100%;
	min-height:100vh;
	min-height:100dvh;
	height:auto;
}
div { box-sizing: border-box; }
h1,h2,h3,h1>a,h2>a,h3>a { display:inline-block; }
.container {
	height: auto;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	height: 100vh;
	width: 100vw;
	height: 100dvh;
	width: 100dvw;
}
a {
	display:inline-block;
}
.header {
	width: 100%;
	height: 64px;
	background-color: #FBB5CA;
	padding: 7px 10px;
	display: flex;
	box-sizing: border-box;
}
.header>a {
	display: inline-block;
	height:auto;
	width:auto;
	margin: 0px 7px 0px 0px;

}
.header>a>img {
	height:50px;
	width:auto;

}
.header>.lang {
	height: auto;
	width: 169px;
	display: block;
	margin-left:auto;
}
.header>.lang select {
	font-size: 1em;
	width: 169px;
	height: auto;
	font-weight: normal;
	line-height: 1em;
	min-height: 0px;
	padding: 2px 0px 2px 6px;
	display: block;
}
/*MAIN CONTENTS*/
.main{
	width: 100%;
	overflow-y: scroll;
	flex:1;
}
.main_top {
	width: 100%;
	height: auto;
	clear: none;
	padding:10px 0;
	text-align:center;
}
.main_top>h1 {
	display: block;
	font-size: 1.5em;
	width: 700px;
	height: auto;
	text-align: center;
	font-weight: 800;
	line-height: 1.5em;
	margin: 0px auto;
	min-height: 33px;
	text-shadow: #FFF 1px 1px 0px;
}
.mama {
	width:800px;
	height:auto;
}
.store1 {
	height: auto;
	margin: 15px auto;
	display:block ;
	font-size: 0;
}
.store_ap {
	float: none;
	width: auto;
	height: 84px;
	margin: 0 auto;
	clear: none;
}
.main_howto {
	display: inline-block;
	width: 100%;
	height: auto;
	margin: 0px;
	padding-bottom:10px;
	clear: both;
	min-width: 0px;
	position: relative;
}
.main_howto>h3 {
	font-size: 1.8em;
	width: 100%;
	height: auto;
	text-align: center;
	font-weight: 800;
	line-height: 2em;
	margin: 20px auto;
	background-image:url("../img/boad.png");
	background-attachment: inherit;
	-webkit-background-size: contain;
	background-size: contain;
	color: rgb(255, 255, 255);
	text-shadow: rgba(132,0,47,1.00) 2px 2px;
	background-position: 50% 50%;
	background-repeat: no-repeat no-repeat;
}
.howto {
	display:flex;
	width:640px;
	margin: 0 auto;
	justify-content:space-between;
	flex-wrap: wrap;
}

.playimg {
	width: auto;
	max-width: 49%;
	height: auto;
	border-radius:5px;
	background-color: #FFF;
	border: 4px solid rgb(255, 255, 255);
}
.playtext {
	display: inline-block;
	line-height: 1.3em;
	width: 100%;
	height: auto;
	margin: 10px auto;
	padding:10px 10%;
	background-color: #FFF;
	opacity: 0.8;
	border-radius: 10px;
}
.playtext>h4 {
	font-weight: 600;
	font-size: 1.2em;
	width: 100%;
	text-align: center;
	margin:0 auto 10px;
}
.playtext>p {
	font-size: 1em;
	font-weight: 600;
	width: 100%;
	text-align: center;
}
.message {
	display: flex;
	margin: 20px auto;
	width: 710px;
	height: 240px;
	background-image:url(../img/ac_mama.png),url(../img/ac_mama_text.png);
	-webkit-background-size: 240px auto, 400px auto;
	background-size: 240px auto, 470px auto;
	background-position: 0px 0px, 240px 0px;
	background-repeat: no-repeat, no-repeat;
	padding: 50px 60px 65px 310px;
	justify-content: center;
	align-items: center;
}
.message>p {
	margin: 0px;
	font-size: 1.2em;
	font-weight: 900;
}
.app_info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 720px;
	height: auto;
	margin:0px auto 30px;
	border-radius:30px;
	background-color: rgba(255,255,255,0.8);
	padding:1%;
}
.app_info a{ display: inline-block; }
.app_info a img{
	width:128px;
	height:auto;
}
.app_info>dl {
	display: flex;
	flex-wrap: wrap;
	width: 82%;
}
.app_info>dl>dt {
	width: 25%;
	padding-right:10px;
	text-align:right;
}
.app_info>dl>dd {
	width: 75%;
}
.app_info>dl>dt,.app_info>dl>dd {
	font-size: 110%;
	font-weight: 600;
	line-height: 1.2em;
}
.footer {
	font-size: 0.9em;
	line-hight:1.5em;
	width: 100%;
	height: 156px;
	padding: 10px 0;
}
.footer>.linker {
	width: 768px;
	margin:20px auto;
	display: flex;
	justify-content:space-between
}
.footer>.linker a { display:inline-block; }
.footer>.linker>a>img {
	height:80px;
	width:auto;
}
.footer>.linker>div {
	display:inline-block;
	width:auto;
}
.footer>.linker>div>a {
	display:block;
	font-weight:normal;
	margin-bottom:0.2em;
}
.copyrights {
	width: 100%;
	height: auto;
	text-align: center;
	line-height: 1em;
	margin: 0 auto;
}

@media only screen and (max-width: 768px) {
	.header {
		height: 58px;
		padding: 5px 10px;
	}
	.header>a {
		margin: 0px 5px 0px 0px;
	}
	.header>a>img {
		height:48px;

	}
	.header>.lang {
		width: 155px;
	}
	.header>.lang select {
		font-size: 0.9em;
		width: 155px;
		line-height: 1em;
		padding: 2px 0px 2px 5px;
	}
	.main_top .logo {
		width:59%;
		height:auto;
	}
	.main_top>h1 {
		font-size: 1.1em;
		font-weight: 600;
		width: 80%;
	}
	.mama {
		width:95%;
	}
	.store_ap {
		width:35%;
		height:auto;
	}
	.howto {
		flex-direction: column;
		width:80%;
	}
	.playimg {
		max-width: 100%;
		margin: 0 auto 10px;
	}
	.playtext {
		margin: 0px auto 10px;
	}
	.message {
		margin: 10px auto;
		width: 100%;
		height: auto;
		-webkit-background-size: 30% auto, 70% auto;
		background-size: 30% auto, 70% auto;
		background-position: left top, 100% 0px;
		background-repeat: no-repeat, no-repeat;
		padding: 17% 13% 17% 42%;
		justify-content: center;
		align-items: center;
		position:relative;
	}
	.message > p {
		font-size: 1em;
		font-weight: 600;
		width: auto;
		height: auto;
		display: inline-block;
		position: absolute;
	}
	.app_info {
		width: 90%;
		margin: 0px auto 10px;
		border-radius: 10px;
		padding:1%;
	}
	.app_info a img{
		height:100px;
		width:auto;
	}
	.app_info>dl>dt { padding-right:5px; }
	.app_info>dl>dt,.app_info>dl>dd {
		line-height:1.1em;
		font-size:0.9em;
	}
	.footer {
		font-size: 0.8em;
		line-hight:1.2em;
		padding: 8px 0;
	}
	.footer>.linker {
		width: 90%;
		margin:20px auto;
	}
	.footer > .linker > a > img {
		height: 70px;
	}
	.store1>a {
		display: block;
	}
}

@media only screen and (max-width: 480px) {
	.header>.lang {
		width: 125px;
	}
	.header>.lang select {
		font-size: 0.8em;
		width: 125px;
		line-height: 0.9em;
		padding: 1px 0px 1px 3px;
	}
	.main_top .logo { width:100%; }
	.mama {
		width:100%;
	}
	.store1 { margin: 0px auto; }
	.store_ap { width:40%; }
	.main_howto {
		-webkit-background-size: 60%, 100%, 100%,100%, auto;
		background-size: 60%, 50%, 50%, 50%, 300px;
		background-position: -5% -20px, 0% 80%, 0% 48%, 0% 28%, 0% bottom;
	}
	.howto {
		width:90%;
	}
	.playtext {
		line-height: 1.2em;
		margin: 0px auto 10px;
		padding: 10px 4%;
	}
	.playtext > h4 {
		font-size: 1em;
		margin: 0 auto 5px;
	}
	.playtext>p {
		font-size:0.9em;
		font-weight:600;
	}
	.message { margin: 5px auto; }
	.message > p {
		font-size: 0.8em;
		width: 236px;
		height: auto;
	}
	.app_info {
		width: 90%;
		padding:2%;
	}
	.app_info>dl { width: 82%; }
	.app_info a img{ height:70px; }
	.app_info>dl>dt,.app_info>dl>dd {
		line-height:1.3em;
		font-size:0.7em;
	}
	.footer {
		font-size: 0.7em;
		line-hight:1.1em;
		padding: 8px 0;
	}
	.footer>.linker {
		width: 100%;
		margin:30px auto;
		padding: 0 10px;
	}
	.footer > .linker > a > img {
		height: 50px;
	}
	.copyrights {
		margin-top: 10px;
		font-size: 0.8em;
	}
}
