@charset "UTF-8";
@import url("reset.css");

body {
	background: #000f;
	font-family: 'Zen Maru Gothic', sans-serif;
}

img {
	max-width: 100%;;
}

#wrap,
#footer-inner {
	margin-left:auto;
	margin-right:auto;
	padding-bottom:300px;
}

header {
	width:100%;
	background:#DF5286;
	color:#fff;
	font-size:0.8em;
	padding-top:10px;
	padding-bottom:10px;
	position: fixed;
	top:0;
	text-align: center;
}

h2 {
	text-align: center;
	margin-bottom:45px;
	font-weight: bold;
	font-size:48px;
}

h2.h2-inner {
	margin-top:30px;
	margin-bottom:60px;
}

h2.yellow {
	color:yellow;
	margin-bottom:120px;
}

p,
li {
	line-height: 1.7em;
	margin-bottom:1em;
}

#eyecatch {
	display: block;
	background: #FAF8BE;
	margin-top:180px;
}

#eyecatch-lead {
	width:100%;
	text-align: center;
	margin-top:100px;
}

#logo {
	text-align: center;
}

#logo img {
	margin-top:-65px;
}

#youtube {
	background-color: #fff;
	padding-bottom:150px;
}

#youtube h2 {
	margin-top:30px;
}

#main-movie {
	position: fixed;
	width:100%;
	height:590px;
	top:0;
	overflow: hidden;
	z-index: -1;
}

#movie-front {
	position: absolute;
	z-index:-2;	
	width:100%;
	height:100%;
}

#main-movie video {
	position: absolute;
	z-index: -3;
	margin-top:-21px;
	width:100%;
	overflow: hidden;
}

#movie-front img {
	width:100%;
	height:100%;
}

#lead {
	padding:70px;
	margin-bottom:360px;
	border-top:rgb(231 219 188) 2px solid;
	background-image: repeating-linear-gradient(90deg, rgb(231 219 188) 4% 8%, rgb(250 248 190) 8% 12%);
}

#howto {
	background: #3b8b85;
	padding:70px;
	color:#fff;
}

#features {
	background:url(../images/bg-feature.png);
	background-size:100% 100%;
	padding-bottom:75px;
}

#features h2 img {
	margin-top:-45px;
}

footer {
	width:100%;
	position: fixed;
	bottom:0;
	height:190px;
	background: url(../images/bg-footer.png) center top no-repeat;
}

#footer-inner {
	position: relative;
}

#footer-icon-apple {
	position: absolute;
	right:20px;
	top:30px;
}

#poweredby {
	position: absolute;
	bottom:20px;
	text-align: center;
	width:100%;
}

#poweredby nav ul {
	max-width:370px;
	width:auto;
	margin-left:auto;
	margin-right:auto;
	display: flex;
	justify-content: space-around;
}

#poweredby nav ul li {
	margin-right:1em;
	padding-right:1em;
	border-right:#333 1px solid;

}

#poweredby nav ul li:last-child {
	margin-right:0;
	padding-right:0;
	border:0;
}

.border-white {
}

.border-white img {
	margin-top:-30px;
	width:100%;
}

#toys {
	background: #fff;
	text-align: center;
	padding-bottom:150px;
}

#caution {
	background:#e1315b;
	color:#fff;
	padding:70px 35px;
}

#faq {
	background:#5CC5ef;
	color:#fff;
	margin-top:360px;
	padding:70px 35px;
}

#sns {
	background:#FAF8BE;
	margin-bottom:360px;
	padding:70px 35px;
}

p.lead {
	font-weight: bold;
	font-size:1.2em;
	margin-top:1em;
	margin-bottom:1em;
}

.note {
	font-size:0.7em;
	margin-top:1em;
	margin-bottom:1em;
}

.ar {
	text-align: right;
}

.ac {
	text-align: center;
}

.img-button {
	margin:1em;
}

#foripad,
#bugs {
	background:#E38256;
	color:#fff;
	margin:120px 70px;
	border-radius: 20px;
	padding:3em 2em;
}

#bugs {
	background:#3f0182;
}

#foripad h2,
#bugs h2 {
	margin-top:-85px;
}

.QA-elm {
	margin-bottom:5em;
}

.QA-Q,
.QA-A {
	padding-left:5em;
	min-height: 3em;
}

.QA-Q {
	background: url(../images/icon-q.png) no-repeat;
}

.QA-A {
	background: url(../images/icon-a.png) no-repeat;
}
/*
.fl {
	float:left;
}

.fr {
	float:right;
}
*/

.img-screenshot {
	width:200px;
}

.cols2 {
	display: flex;
}

.howto-lead {
	text-align: center;
	font-size:1.2em;
	font-weight: bold;
	margin-top:2.5em;
	margin-bottom:0.5em;
}

.howto-lead::first-letter {
	font-size:32px;
}

#howto-note {
	background: #0a5550;
	padding:70px;
	margin-bottom:360px;
	color:#fff;
}

#inq {
	background: #fff;
	padding:70px;
	color:#000;
}

#howto-note a,
#copyright a {
	color:rgb(246, 254, 12);
}

#copyright {
	background: #002a28;
	padding:70px;
	margin-bottom:360px;
	color:#fff;
}



#updates {
	position: fixed;
	z-index: -4;
	color:#fff;
	padding-left:40px;
	padding-right:40px;
	zoom:0.8;
	margin-top:-40px;
}

footer a {
	text-decoration: none;
	color:#0a95cd;
}

@media (min-width: 1024px) {
	.sp {
		display: none;;
	}

	header,
	#wrap,
	#footer-inner,
	#main-movie {
		/* width:1024px; */
		width:100%;
	}

	.pc-cols2 {
		display: flex;
	}

	#feature-01 {
		margin-left:-20px;
	}

	#feature-02 {
		margin-left:20px;
	}

	#feature-03 {
		margin-top:35px;
		margin-left:-35px;
	}

	#feature-04-pc {
		margin-top:30px;
		margin-left:75px;
	}

	#youtube-box {
		margin-top:50px;
		width:961px;
		height:541px;
		margin-left:auto;
		margin-right:auto;
		background: #666;
	}

	#toys .elm {
		width:800px;
		margin-left:auto;
		margin-right:auto;
		margin-bottom:35px;
	}

	.box-center {
		max-width:1024px;
		margin-left:auto;
		margin-right:auto;
	}

	#howto .cols2,
	#howto .box
	{
		width:800px;
		margin-left:auto;
		margin-right:auto;
		text-align: center;
	}

	#howto .cols2 .elm:first-child {
		width:100px;
		margin-right:40px;
	}

	#howto .cols2 .elm:last-child {
		width:600px;
		text-align: left;
	}
}

@media (max-width: 1023px) {
	.pc {
		display: none;
	}

	body {
		width:100%;
		overflow-x: hidden;
	}
	img {
		max-width: 100%;
	}

	#features .elm {
		margin-bottom:30px;
	}

	#feature-lead {
		margin-top:-40px;
	}

	#feature-03 {
		margin-left:45px;
		margin-right:-45px;
	}

	#feature-04-sp {
		margin-right:-45px;
	}

	.box-center {
		overflow-x:hidden;
	}

	#main-movie {
		height:177px;
	}
	#eyecatch {
		margin-top:43px;
	}

	#eyecatch-lead {
		margin-top:45px;
	}

	#lead {
		padding:60px 1em;
	}

	#lead .ac {
		text-align: left;
	}

	#foripad,
	#bugs {
		margin-left:1em;
		margin-right:1em;
	}

	#bugs h2 {
		font-size:28px;
	}

	#features h2 img {
		margin-top:30px;
	}

	#howto {
		padding:70px 1em;
	}

	.img-button {
		width:100px;
	}

	#howto .elm p {
		margin-left:3em;
	}

	.img-screenshot {
		margin-left:80px;
	}

	.h2-inner {
		width:70%;
		margin-left:auto;
		margin-right:auto;
	}

	#toys .elm {
		width:90%;
		margin-left:auto;
		margin-right:auto;
		margin-bottom:30px;
	}

	#howto-note {
		padding:1em;
	}

	#howto-note li {
		margin-bottom:3em;
	}

	h2 {
		font-size:36px;
	}

	#updates {
		margin-top:5px;
	}
}