@charset "utf-8";
img {
	width:100%;
	max-width:100%;
}
.bold {
	font-weight:bold;
}
body {
  font-family: sans-serif;
	background:#fdfdf4;
}
html {
	font-size:3.59375vw;
	line-height:1.8;
}
#wrapper {
	width:100%;
	max-width:640px;
	margin:0 auto;
	/*overflow:hidden;*/
}
.parallax {
	width: 100%;
	height:auto;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
}
#footer .inner.parallax {
	z-index:1;
	top:unset;
	bottom:0;
}

/* header */
#header {
	text-align:center;
	background:#e9e9d9;
	margin-bottom:15.625%;
	z-index:1;
}
#header #logo {
	width:33.59375%;
	margin:7.5% auto;
}
#header video {
	width:100%;
}
#header .buttons {
	padding:6.1% 0;
}
#header .buttons img {
	width:14.4%;
	margin:0 3.28125%;
}

.is-fixed #contents .link_buttons {
	position:fixed;
	top:0;
	background:#fdfdf4;
	padding:2.5%;
	width:100%;
	z-index:10;
}

.link_buttons {
	padding:2.5% 2.5% 8.75%;
}
.link_buttons img {
	width:48.68421052631579%;
	float:left;
}
.link_buttons a:last-child img {
	float:right;
}

#contents {
	background:#fdfdf4;
	z-index:3;
}
#article01 {
	margin-bottom:9.375%;
	overflow:hidden;
}
#article01 #character01 {
	background:url(../images/bg_character01.png) top center no-repeat;
	background-size:100% auto;
	position:relative;
}
#article01 #character01 img {
	width:42.5%;
}
#article01 #character01 .img02 {
	width:52.5%;
	position:absolute;
	top:0;
	right:0;
}
#article01 #character01 .img03 {
	width:64.375%;
	position:absolute;
	top:40.973630831643%;
	right:0;
}
#article01 #character02 {
	background:url(../images/bg_character02.png) top center no-repeat;
	background-size:100% auto;
	position:relative;
}
#article01 #character02 img {
	width:42.5%;
	float:right;
}
#article01 #character02 .img02 {
	width:52.5%;
	position:absolute;
	top:0;
	left:0;
}
#article01 #character02 .img03 {
	width:64.375%;
	position:absolute;
	top:40.973630831643%;
	left:0;
}
#article01 #character03 {
	background:url(../images/bg_character03.png) top center no-repeat;
	background-size:100% auto;
	position:relative;
}
#article01 #character03 img {
	width:49.84375%;
}
#article01 #character03 .img02 {
	width:55.3125%;
	position:absolute;
	top:0;
	right:0;
}
#article01 #character03 .img03 {
	width:55.3125%;
	position:absolute;
	top:27.18052738336714%;
	right:0;
}

#article02 #rule01,
#article02 #rule02,
#article02 #rule03 {
	margin-bottom:0.78125%;
}
#article02 #ttl_rule01,
#article02 #ttl_rule02,
#article02 #ttl_rule03 {
	padding-bottom:40.625%;
	position:relative;
}
#article02 #ttl_rule01 img,
#article02 #ttl_rule02 img,
#article02 #ttl_rule03 img {
	position:absolute;
	bottom:0;
}
#article02 #ttl_rule01 {
	background:url(../images/bg_ttl_rule01.png) top center no-repeat;
	background-size:100% auto;
}
#article02 #ttl_rule02 {
	background:url(../images/bg_ttl_rule02.png) top center no-repeat;
	background-size:100% auto;
}
#article02 #ttl_rule03 {
	background:url(../images/bg_ttl_rule03.png) top center no-repeat;
	background-size:100% auto;
}

.ttl_aco img {
	width:46.25%;
	display:block;
	margin:2.34375% auto 6.45%;
}
.ttl_aco img:hover {
	cursor:pointer;
	opacity:0.8;
}
.body_aco {
	background:#ffe8e4;
	padding:18.75% 0 20.9375%;
	display:none;
}
.body_aco h3 {
	color:#d10036;
	font-size:4.21875vw;
	font-weight:bold;
	text-align:center;
	line-height:1.37;
	margin-bottom:6.40625%;
}
.body_aco div {
	padding:0 6.25%;
}
.body_aco div img {
	width:41.96428571428571%;
	margin-right:5.892857142857143%;
	float:left;
}
.body_aco div p {
	font-size:3.4375vw;
	line-height:1.4;
	width:52.14285714285714%;
	float:right;
}

#caution {
	margin-bottom:9.53125%;
	position:relative;
}
#caution p {
	color:#fff;
	font-size:3.4375vw;
	line-height:1.4;
	width:88%;
	position:absolute;
	top:58.5%;
	left:6%;
}

#article03 {
	background:#fef4f0;
	padding:7.34375% 6.09375% 8.90625%;
}
#article03 img:nth-child(odd) {
	margin-bottom:4.270462633451957%;
}
#article03 img:nth-child(even) {
	margin-bottom:8.185053380782918%;
}

#article04 {
	background:url(../images/bg_article04.png) top center repeat-y;
	background-size:100% auto;
	padding:7.96875% 0 6.71875%;
}
.loopSlider {
	margin: 0 auto;
	width: 100%;
	height:266px;
	text-align: left;
	position: relative;
	overflow: hidden;
}
.loopSlider .loopSliderWrap {
	top: 0;
	left: 0;
	overflow: hidden;
	position: absolute;
}
.loopSlider ul {
	height:266px;
	float: left;
	overflow: hidden;
}
.loopSlider ul li {
	width: 227px;
	display: inline;
	margin:0 8px;
	float:left;
}
.loopSlider ul li img {
}

#btn_replay {
	padding:2.34375% 26.875% 2.65625%;
}
#btn_replay img:hover {
	cursor:pointer;
	opacity:0.8;
}

#footer {
	text-align:center;
	z-index:2;
}
#footer .inner {
	background:#e9e9d9;
	padding:10.3125% 0 0;
}
#footer .icon_challenge {
	width:61.71875%;
	display:block;
	margin:0 auto 8.75%;
}
#footer .footer_logo {
	width:32.8125%;
	display:block;
	margin:0 auto 8.125%;
}
#footer .buttons {
	padding:2.8125% 0 9.84375%;
}
#footer .buttons img {
	width:14.4%;
	margin:0 3.28125%;
}
#footer a {
	color:#474747;
}
#footer a:hover {
	text-decoration:none;
}
#footer a {
	font-size:3.125vw;
}
#footer copyright {
	font-size:3.125vw;
	display:block;
	padding:2% 0 3.59375%;
}

@media screen and (min-width:658px) {
html {
	font-size:23px;
}
.is-fixed #contents .link_buttons {
	width:640px;
	padding:16px;
}
.body_aco h3 {
	font-size:27px;
}
.body_aco div p {
	font-size:22px;
}
#caution p {
	font-size:22px;
}
#footer a {
	font-size:20px;
}
#footer copyright {
	font-size:20px;
}
}

.inviewzoomIn,
.inviewjackInTheBox,
.inviewslideInLeft,
.inviewslideInRight,
.inviewfadeInUp,
.inviewfadeInLeft,
.inviewfadeInRight,
.inviewfadeInDown {
	opacity:0;
}