@charset "utf-8";

/*
******************************************************************
* MJP top.css
******************************************************************
*/
html.Has-modal {
	overflow: hidden !important;
	width: auto;
}
html {
	background: #0097d9;
	width: 100%;
	height: 100%;
}
body {
	width: 100%;
	height: 100%;
	color: #000;
	font-size: 14px;
	line-height: 1.5;
	word-wrap: break-word;
}
a:link, a:visited {
	color: #ffffff;
	text-decoration: none;
}
a:hover, a:active {
	color: #ffffff;
}

.anime {
	-webkit-transition: all .25s ease-out;
	    -ms-transition: all .25s ease-out;
	        transition: all .25s ease-out;
}
*[data-sf] {
 opacity: 0;
}
*[data-sf="toggle"] {
 opacity: 1;
}
.fixed {
  position: fixed !important;
}


/*
******************************************************************
* #wrapper
******************************************************************/
#wrapper {
	position: relative;
	width: 100%;
	overflow: hidden;
}


/*
******************************************************************
* #header
******************************************************************/
#header {
	position: relative;
	z-index: 5;
}
/* top */
.page__top #header {}

/* page */
.page__sub #header {
	height: 950px;
	padding-top: 120px;
	text-align: center;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* .header__title */
.page__sub #header .header__title {
	display: table;
	width: 100%;
	height: 221px;
	background: url(../img/bg_tit.png) center no-repeat;
}
.page__sub #header .header__title span {
	display: table-cell;
	vertical-align: middle;
}

/* .header__logo */
.header__logo {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
}

/* .header__maker */
.header__maker {
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -490px;
}

/* .sns__btn */
#header .sns__btn {
	position: absolute;
	left: 50%;
	top: 265px;
	margin-left: 330px;
	z-index: 100;
}
#header .sns__btn li {
	display: inline-block;
	vertical-align: top;
	margin-right: 10px;
}


/*
******************************************************************
* #footer
******************************************************************/
#footer {
	position: relative;
	z-index: 2;
	width: 980px;
	padding: 40px 0 25px;
	margin: auto;
	line-height: 1;
	text-align: right;
}

/*　backtop */
#footer .backTop {
	position: absolute;
	right: -140px;
	bottom: -22px;
	display: block;
	text-decoration: none;
	width: 133px;
	height: 186px;
}
#footer .backTop:hover {
	-webkit-animation: backTop 0.2s ease-in-out 1 alternate forwards;
	animation: backTop 0.2s ease-in-out 1 alternate forwards;
}

@keyframes backTop {
	0%{bottom: -22px;}
	50%{bottom: 10px;}
	100%{bottom: -22px;}
}
@-webkit-keyframes backTop {
	0%{bottom: -22px;}
	50%{bottom: 10px;}
	100%{bottom: -22px;}
}



/*
******************************************************************
* #nav　
******************************************************************/
#nav {}

/* .nav__inner */
#nav .nav__inner {}

/* .nav__btn */
#nav .nav__btn {
	position: absolute;
	z-index: 10;
	top: -300px;
	left: 50%;
	margin-left: 330px;
}
#nav .nav__btn span {
	position: absolute;
	top: 0
	left: 0;
	vertical-align: top;
}
#nav .nav__btn .open {
	display: block;
	width: 194px;
	height: 252px;
	margin-top: 1px;
	position: absolute;
	background: url(../img/btn_nav01--bg.png) 0 0 no-repeat;
}
#nav .nav__btn .open > img {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}
#nav .nav__btn .open:before {
	content: "";
	display: block;
	position: absolute;
	z-index: 1;
	top: 10px;
	right: 0;
	width: 141px;
	height: 89px;
	background: url(../img/btn_nav01--hover.png) 0 0 no-repeat;
	opacity: 0;
	-webkit-transition: all 0.1s ease-in;
	-o-transition: all 0.1s ease-in;
	transition: all 0.1s ease-in;
}
#nav .nav__btn .open:hover:before {
	top: 0px;
	opacity: 1;
}
#nav .nav__btn .close {display: none;}
#nav.open .nav__btn .open {display: none;}
#nav.open .nav__btn .close {display: block;}

/* .nav__lists */
#nav .nav__lists {
	position: absolute;
	z-index: 9;
	top: -500px;
	left: 50%;
	margin-left: -490px;
	width: 924px;
	height: 416px;
	padding: 0 0 0 55px;
	background: url(../img/bg_nav01.png) 0 0 no-repeat;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#nav .nav__lists .nav__list {
	margin-top: 50px;
	float: left;
}
#nav .nav__lists .nav__list a {
	display: block;
	width: 250px;
	height: 77px;
	text-decoration: none;
	text-indent: -9999px;
	background-image: url(../img/bg_nav02.png);
	background-repeat: no-repeat
}
#nav .nav__lists .nav__list--08 a {width: 500px;}
#nav .nav__lists .nav__list--01 a {background-position:  	 0  top}
#nav .nav__lists .nav__list--02 a {background-position:  -250px top}
#nav .nav__lists .nav__list--03 a {background-position:  -500px top}
#nav .nav__lists .nav__list--04 a {background-position:  -750px top}
#nav .nav__lists .nav__list--05 a {background-position: -1000px top}
#nav .nav__lists .nav__list--06 a {background-position: -1250px top}
#nav .nav__lists .nav__list--07 a {background-position: -1500px top}
#nav .nav__lists .nav__list--08 a {background-position: -1750px top}

#nav .nav__lists .nav__list--01 a:hover {background-position:  	   0  bottom}
#nav .nav__lists .nav__list--02 a:hover {background-position:  -250px bottom}
#nav .nav__lists .nav__list--03 a:hover {background-position:  -500px bottom}
#nav .nav__lists .nav__list--04 a:hover {background-position:  -750px bottom}
#nav .nav__lists .nav__list--05 a:hover {background-position: -1000px bottom}
#nav .nav__lists .nav__list--06 a:hover {background-position: -1250px bottom}
#nav .nav__lists .nav__list--07 a:hover {background-position: -1500px bottom}
#nav .nav__lists .nav__list--08 a:hover {background-position: -1750px bottom}

/* top */
.page__top #nav .nav__lists {
	top: auto;
	bottom: -500px;
}
.page__top #nav .nav__btn {
	top: auto;
	bottom: 0px;
	left: 50%;
	margin-left: 320px;
}



/*
******************************************************************
* #container
******************************************************************/
#container {
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0 auto;
}
#container #main {
	position: relative;
	z-index: 2;
	width: 980px;
	margin: auto;
}

/* top */
.page__top #top {

}

/* page */
.page__sub #container {
	min-height: 1000px;
}
.page__sub #container {
	background: url(../img/bg_green02.png) center top #81b335 repeat-y;
}
.page__sub #container:before {
	content: "";
	display: block;
	position: absolute;
	z-index: 0;
	top: -160px;
	left: 0;
	width: 100%;
	height: 160px;
	background: url(../img/bg_green01.png) center top repeat-x;
}

/* btn__next */
.btn__next {
	width: 980px;
	margin: 30px auto 0;
}
.btn__next a {
	position: relative;
	display: block;
	-webkit-transition: all 0.1s ease-in-out;
	-o-transition: all 0.1s ease-in-out;
	transition: all 0.1s ease-in-out;
}
.btn__next a:before {
	content: url();
	display: block;
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	opacity: 0;
	-webkit-transition: all 0.1s ease-in-out;
	-o-transition: all 0.1s ease-in-out;
	transition: all 0.1s ease-in-out;
}
.btn__next a:hover {
	-webkit-transform: (10px);
	-ms-transform: translateX(10px);
	-o-transform: translateX(10px);
	transform: translateX(10px);
}
.btn__next a:hover:before {
	opacity: 0.3;
}

/* btn__more */
.btn__more {
	width: 102px;
	height: 102px;
	line-height: 1;
	text-decoration: none;
}

/* character */
.character {
	position: absolute;
	top: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
}
.character > * {
	position: absolute;
	z-index: 1;
	left: 50%;
	width: 167px;
}
.character > *[class^="character__pos"]:nth-child(odd) {
	margin-left: -730px;
}
.character > *[class^="character__pos"]:nth-child(even) {
	margin-left: 563px;
}

.character__pos01 {top: 370px;}
.character__pos02 {top: 800px;}
.character__pos03 {top: 1170px;}
.character__pos04 {top: 1700px;}
.character__pos05 {top: 2150px;}
.character__pos06 {top: 2645px;}
.character__pos07 {top: 3050px;}
.character__pos08 {top: 3500px;}
.character__pos09 {top: 3900px;}


.character > * > span {
	display: block;
	position: absolute;
	z-index: 2;
	bottom: 0;
	left: 0;
	width: 167px;
	height: 70px;
	background: url(../img/bg_green04.png) 0 0 no-repeat;
}
.character > *:nth-child(even) span {
	background: url(../img/bg_green03.png) 0 0 no-repeat;
}
.character i {
	display: block;
	position: absolute;
	z-index: 1;
	left: 0;
	right: 0;
	bottom: 2px;
	margin: auto;
	-webkit-transform: scaleY(0.1);
	-ms-transform: scaleY(0.1);
	-o-transform: scaleY(0.1);
	transform: scaleY(0.1);
	-webkit-transform-origin: center bottom;
	-moz-transform-origin: center bottom;
	-ms-transform-origin: center bottom;
	-o-transform-origin: center bottom;
	transform-origin: center bottom;
}
.character i.character__01  {
	width: 130px;
	height: 165px;
	background: url(../img/img_hyoi01.png) 0 0 no-repeat;
	-webkit-animation:
		hyoi 10s ease-in-out 1,
		moveChara01 10s ease-in-out 1;
	animation:
		hyoi 10s ease-in-out 1,
		moveChara01 10s ease-in-out 1;
}
.character i.character__02  {
	bottom: 100px;
	width: 102px;
	height: 118px;
	background: url(../img/img_hyoi02.png) 0 0 no-repeat;
	-webkit-animation:
		hyoi 10s ease-in-out 1,
		moveChara02 10s ease-in-out 1;
	animation:
		hyoi 10s ease-in-out 1,
		moveChara02 10s ease-in-out 1;
}
.character i.character__03  {
	width: 138px;
	height: 150px;
	background: url(../img/img_hyoi03.png) 0 0 no-repeat;
	-webkit-animation:
		hyoi 10s ease-in-out 1,
		moveChara03 10s ease-in-out 1;
	animation:
		hyoi 10s ease-in-out 1,
		moveChara03 10s ease-in-out 1;
}
.character i.character__04  {
	width: 166px;
	height: 180px;
	background: url(../img/img_hyoi04.png) 0 0 no-repeat;
	-webkit-animation:
		hyoi 10s ease-in-out 1,
		moveChara04 10s ease-in-out 1;
	animation:
		hyoi 10s ease-in-out 1,
		moveChara04 10s ease-in-out 1;
}

@keyframes hyoi {
	0% {
		-webkit-transform: scaleY(0.1);
		-ms-transform: scaleY(0.1);
		-o-transform: scaleY(0.1);
		transform: scaleY(0.1);
	}
	5% {
		-webkit-transform: scaleY(0.1);
		-ms-transform: scaleY(0.1);
		-o-transform: scaleY(0.1);
		transform: scaleY(0.1);
	}
	9% {
		-webkit-transform: scaleY(1);
		-ms-transform: scaleY(1);
		-o-transform: scaleY(1);
		transform: scaleY(1);
	}
	60% {
		-webkit-transform: scaleY(1);
		-ms-transform: scaleY(1);
		-o-transform: scaleY(1);
		transform: scaleY(1);
	}
	62% {
		-webkit-transform: scaleY(0.95);
		-ms-transform: scaleY(0.95);
		-o-transform: scaleY(0.95);
		transform: scaleY(0.95);
	}
	63% {
		-webkit-transform: scaleY(1.1);
		-ms-transform: scaleY(1.1);
		-o-transform: scaleY(1.1);
		transform: scaleY(1.1);
	}
	65% {
		-webkit-transform: scaleY(0.1);
		-ms-transform: scaleY(0.1);
		-o-transform: scaleY(0.1);
		transform: scaleY(0.1);
	}
	100% {
		-webkit-transform: scaleY(0.1);
		-ms-transform: scaleY(0.1);
		-o-transform: scaleY(0.1);
		transform: scaleY(0.1);
	}
}
@-webkit-keyframes hyoi {
	0% {
		-webkit-transform: scaleY(0.1);
		-ms-transform: scaleY(0.1);
		-o-transform: scaleY(0.1);
		transform: scaleY(0.1);
	}
	5% {
		-webkit-transform: scaleY(0.1);
		-ms-transform: scaleY(0.1);
		-o-transform: scaleY(0.1);
		transform: scaleY(0.1);
	}
	9% {
		-webkit-transform: scaleY(1);
		-ms-transform: scaleY(1);
		-o-transform: scaleY(1);
		transform: scaleY(1);
	}
	60% {
		-webkit-transform: scaleY(1);
		-ms-transform: scaleY(1);
		-o-transform: scaleY(1);
		transform: scaleY(1);
	}
	62% {
		-webkit-transform: scaleY(0.95);
		-ms-transform: scaleY(0.95);
		-o-transform: scaleY(0.95);
		transform: scaleY(0.95);
	}
	63% {
		-webkit-transform: scaleY(1.1);
		-ms-transform: scaleY(1.1);
		-o-transform: scaleY(1.1);
		transform: scaleY(1.1);
	}
	65% {
		-webkit-transform: scaleY(0.1);
		-ms-transform: scaleY(0.1);
		-o-transform: scaleY(0.1);
		transform: scaleY(0.1);
	}
	100% {
		-webkit-transform: scaleY(0.1);
		-ms-transform: scaleY(0.1);
		-o-transform: scaleY(0.1);
		transform: scaleY(0.1);
	}
}


@keyframes moveChara01 {
	0% {bottom: 2px;}
	6% {bottom: 2px;}
	9% {bottom: 35px;}
	63% {bottom: 35px;}
	65% {bottom: 2px;}
	100% {bottom: 2px;}
}
@-webkit-keyframes moveChara01 {
	0% {bottom: 2px;}
	6% {bottom: 2px;}
	9% {bottom: 35px;}
	63% {bottom: 35px;}
	65% {bottom: 2px;}
	100% {bottom: 2px;}
}

@keyframes moveChara02 {
	0% {bottom: 2px;}
	6% {bottom: 2px;}
	9% {bottom: 85px;}
	63% {bottom: 85px;}
	65% {bottom: 2px;}
	100% {bottom: 2px;}
}
@-webkit-keyframes moveChara02 {
	0% {bottom: 2px;}
	6% {bottom: 2px;}
	9% {bottom: 85px;}
	63% {bottom: 85px;}
	65% {bottom: 2px;}
	100% {bottom: 2px;}
}

@keyframes moveChara03 {
	0% {bottom: 2px;}
	6% {bottom: 2px;}
	9% {bottom: 55px;}
	63% {bottom: 55px;}
	65% {bottom: 2px;}
	100% {bottom: 2px;}
}
@-webkit-keyframes moveChara03 {
	0% {bottom: 2px;}
	6% {bottom: 2px;}
	9% {bottom: 55px;}
	63% {bottom: 55px;}
	65% {bottom: 2px;}
	100% {bottom: 2px;}
}

@keyframes moveChara04 {
	0% {bottom: 2px;}
	6% {bottom: 2px;}
	9% {bottom: 60px;}
	63% {bottom: 60px;}
	65% {bottom: 2px;}
	100% {bottom: 2px;}
}
@-webkit-keyframes moveChara04 {
	0% {bottom: 2px;}
	6% {bottom: 2px;}
	9% {bottom: 60px;}
	63% {bottom: 60px;}
	65% {bottom: 2px;}
	100% {bottom: 2px;}
}


/*
******************************************************************
* #loader
******************************************************************/
#loader {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	height: 100%;
	background: #0097d9;
}
#loader .loader__wrap {
	opacity: 1;
}
#loader .loader__wrap > * {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	margin: auto;
}

/* loader__kemuri */
#loader .loader__kemuri i {
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -150px 0 0 -39px;
	-webkit-animation: kemuriIdle 2s ease-in-out 0s infinite alternate;
	animation: kemuriIdle 2s ease-in-out 0s infinite alternate;
}
#loader .loader__kemuri i span {
	display: block;
	width: 78px;
	height: 61px;
	opacity: 0;
	background: url(../img/loader/img_01.png) center no-repeat;
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
}
#loader .loader__kemuri .loader__kemuri--1 span {
	animation: kemuriFade 3s linear 0s infinite, kemuriMove1 3s linear 0s infinite;
	-webkit-animation: kemuriFade 3s linear 0s infinite, kemuriMove1 3s linear 0s infinite;
}
#loader .loader__kemuri .loader__kemuri--2 span {
	animation: kemuriFade 4s linear 0.5s infinite, kemuriMove2 4s linear 0.5s infinite;
	-webkit-animation: kemuriFade 4s linear 0.5s infinite, kemuriMove2 4s linear 0.5s infinite;
}
#loader .loader__kemuri .loader__kemuri--3 span {
	animation: kemuriFade 2.5s linear 0.7s infinite, kemuriMove3 2.5s linear 0.7s infinite;
	-webkit-animation: kemuriFade 2.5s linear 0.7s infinite, kemuriMove3 2.5s linear 0.7s infinite;
}
#loader .loader__kemuri .loader__kemuri--4 span {
	width: 40px;
	height: 29px;
	background: url(../img/loader/img_02.png) center no-repeat;
	animation: kemuriFade 2s linear 0.4s infinite, kemuriMove4 2s linear 0.4s infinite;
	-webkit-animation: kemuriFade 2s linear 0.4s infinite, kemuriMove4 2s linear 0.4s infinite;
}
#loader .loader__kemuri .loader__kemuri--5 span {
	width: 40px;
	height: 29px;
	background: url(../img/loader/img_02.png) center no-repeat;
	animation: kemuriFade 1.5s linear 1s infinite, kemuriMove5 1.5s linear 1s infinite;
	-webkit-animation: kemuriFade 1.5s linear 1s infinite, kemuriMove5 1.5s linear 1s infinite;
}

/* loader__tubo */
#loader .loader__tubo {margin: -110px auto 0;}
#loader .loader__tubo span {
	position: relative;
	display: block;
	width: 120px;
	height: 130px;
	margin: auto;
	background: url(../img/loader/img_03.png) center bottom no-repeat;
	-webkit-transform-origin: center bottom;
	-moz-transform-origin: center bottom;
	-ms-transform-origin: center bottom;
	-o-transform-origin: center bottom;
	transform-origin: center bottom;
	animation: tuboIdle 2s ease-out 0s infinite alternate;
	-webkit-animation: tuboIdle 2s ease-out 0s infinite alternate;
}
#loader .loader__tubo:before,
#loader .loader__tubo:after {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	z-index: -1;
	margin: auto;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}
#loader .loader__tubo:before {
	top: -30px;
	width: 180px;
	height: 180px;
	background: #fff;
}
#loader .loader__tubo:after {
	top: 120px;
	background: #bfc0c0;
	width: 78px;
	height: 15px;
	animation: tuboShadow 2s ease-in-out 0s infinite alternate;
	-webkit-animation: tuboShadow 2s ease-in-out 0s infinite alternate;
}

/* loader__txt */
#loader .loader__txt {
	width: 250px;
	height: 250px;
	margin-top: -170px;
	background: url(../img/loader/txt_01.png) center bottom no-repeat;
	-webkit-animation: rotation 4s linear 0s infinite;
	animation: rotation 4s linear 0s infinite;
}

/* loader__logo */
#loader .loader__logo {
	width: 279px;
	height: 74px;
	margin-top: 88px;
	background: url(../img/loader/logo_01.png) center no-repeat;
	-webkit-animation: jajajajan 1s ease .5s 1 forwards;
	animation: jajajajan 1s ease .5s 1 forwards;
	-webkit-transform: scale(0);
	-ms-transform: scale(0);
	-o-transform: scale(0);
	transform: scale(0);
	opacity: 0;

}

/* animation */
/* -- tubo */
@keyframes tuboIdle {
	0% {
		-webkit-transform: scale(1, 1);
		-ms-transform: scale(1, 1);
		-o-transform: scale(1, 1);
		transform: scale(1, 1);
	}
	50% {
		-webkit-transform: scale(0.85, 1.2);
		-ms-transform: scale(0.85, 1.2);
		-o-transform: scale(0.85, 1.2);
		transform: scale(0.85, 1.2);
	}
	100% {
		-webkit-transform: scale(1.1, 0.9);
		-ms-transform: scale(1.1, 0.9);
		-o-transform: scale(1.1, 0.9);
		transform: scale(1.1, 0.9);
	}
}
@-webkit-keyframes tuboIdle {
	0% {
		-webkit-transform: scale(1, 1);
		-ms-transform: scale(1, 1);
		-o-transform: scale(1, 1);
		transform: scale(1, 1);
	}
	50% {
		-webkit-transform: scale(0.85, 1.2);
		-ms-transform: scale(0.85, 1.2);
		-o-transform: scale(0.85, 1.2);
		transform: scale(0.85, 1.2);
	}
	100% {
		-webkit-transform: scale(1.1, 0.9);
		-ms-transform: scale(1.1, 0.9);
		-o-transform: scale(1.1, 0.9);
		transform: scale(1.1, 0.9);
	}
}

@keyframes tuboShadow {
	0% {
		-webkit-transform: scale(1, 1);
		-ms-transform: scale(1, 1);
		-o-transform: scale(1, 1);
		transform: scale(1, 1);
	}
	50% {
		-webkit-transform: scale(0.85, 0.95);
		-ms-transform: scale(0.85, 0.95);
		-o-transform: scale(0.85, 0.95);
		transform: scale(0.85, 0.95);
		background: #d1d1d1;
	}
	100% {
		-webkit-transform: scale(1.2, 1);
		-ms-transform: scale(1.2, 1);
		-o-transform: scale(1.2, 1);
		transform: scale(1.2, 1);
		background: #a7a7a7;
	}
}
@-webkit-keyframes tuboShadow {
	0% {
		-webkit-transform: scale(1, 1);
		-ms-transform: scale(1, 1);
		-o-transform: scale(1, 1);
		transform: scale(1, 1);
	}
	50% {
		-webkit-transform: scale(0.85, 0.95);
		-ms-transform: scale(0.85, 0.95);
		-o-transform: scale(0.85, 0.95);
		transform: scale(0.85, 0.95);
		background: #d1d1d1;
	}
	100% {
		-webkit-transform: scale(1.2, 1);
		-ms-transform: scale(1.2, 1);
		-o-transform: scale(1.2, 1);
		transform: scale(1.2, 1);
		background: #a7a7a7;
	}
}

/* -- txt */
@keyframes rotation {
	0% {
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@-webkit-keyframes rotation {
	0% {
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

/* -- logo */
@-webkit-keyframes jajajajan {
	0% {
		opacity: 1;
		-webkit-transform: scale(0.5);
		-ms-transform: scale(0.5);
		-o-transform: scale(0.5);
		transform: scale(0.5);
	}
	25% {
		-webkit-transform: scale(1.15);
		-ms-transform: scale(1.15);
		-o-transform: scale(1.15);
		transform: scale(1.15);
	}
	40% {
		-webkit-transform: scale(0.86);
		-ms-transform: scale(0.86);
		-o-transform: scale(0.86);
		transform: scale(0.86);
	}
	60% {
		-webkit-transform: scale(1.1);
		-ms-transform: scale(1.1);
		-o-transform: scale(1.1);
		transform: scale(1.1);
	}
	75% {
		-webkit-transform: scale(0.95);
		-ms-transform: scale(0.95);
		-o-transform: scale(0.95);
		transform: scale(0.95);
	}
	90% {
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	}
	100% {
		opacity: 1;
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	}
}
@keyframes jajajajan {
	0% {
		opacity: 1;
		-webkit-transform: scale(0.5);
		-ms-transform: scale(0.5);
		-o-transform: scale(0.5);
		transform: scale(0.5);
	}
	25% {
		-webkit-transform: scale(1.15);
		-ms-transform: scale(1.15);
		-o-transform: scale(1.15);
		transform: scale(1.15);
	}
	40% {
		-webkit-transform: scale(0.86);
		-ms-transform: scale(0.86);
		-o-transform: scale(0.86);
		transform: scale(0.86);
	}
	60% {
		-webkit-transform: scale(1.1);
		-ms-transform: scale(1.1);
		-o-transform: scale(1.1);
		transform: scale(1.1);
	}
	75% {
		-webkit-transform: scale(0.95);
		-ms-transform: scale(0.95);
		-o-transform: scale(0.95);
		transform: scale(0.95);
	}
	90% {
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	}
	100% {
		opacity: 1;
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	}
}

/* -- kemuri */
@-webkit-keyframes kemuriIdle {
	0% {
		-webkit-transform: scale(1) rotate(0deg);
		-ms-transform: scale(1) rotate(0deg);
		-o-transform: scale(1) rotate(0deg);
		transform: scale(1) rotate(0deg);
	}
	30% {
		-webkit-transform: scale(1.2, 1) rotate(0deg);
		-ms-transform: scale(1.2, 1) rotate(0deg);
		-o-transform: scale(1.2, 1) rotate(0deg);
		transform: scale(1.2, 1) rotate(0deg);
	}
	70% {
		-webkit-transform: scale(1, 1.2) rotate(0deg);
		-ms-transform: scale(1, 1.2) rotate(0deg);
		-o-transform: scale(1, 1.2) rotate(0deg);
		transform: scale(1, 1.2) rotate(0deg);
	}
	100% {
		-webkit-transform: scale(0.9, 1.1) rotate(0deg);
		-ms-transform: scale(0.9, 1.1) rotate(0deg);
		-o-transform: scale(0.9, 1.1) rotate(0deg);
		transform: scale(0.9, 1.1) rotate(0deg);
	}
}
@keyframes kemuriIdle {
	0% {
		-webkit-transform: scale(1) rotate(0deg);
		-ms-transform: scale(1) rotate(0deg);
		-o-transform: scale(1) rotate(0deg);
		transform: scale(1) rotate(0deg);
	}
	30% {
		-webkit-transform: scale(1.2, 1) rotate(0deg);
		-ms-transform: scale(1.2, 1) rotate(0deg);
		-o-transform: scale(1.2, 1) rotate(0deg);
		transform: scale(1.2, 1) rotate(0deg);
	}
	70% {
		-webkit-transform: scale(1, 1.2) rotate(0deg);
		-ms-transform: scale(1, 1.2) rotate(0deg);
		-o-transform: scale(1, 1.2) rotate(0deg);
		transform: scale(1, 1.2) rotate(0deg);
	}
	100% {
		-webkit-transform: scale(0.9, 1.1) rotate(0deg);
		-ms-transform: scale(0.9, 1.1) rotate(0deg);
		-o-transform: scale(0.9, 1.1) rotate(0deg);
		transform: scale(0.9, 1.1) rotate(0deg);
	}
}

@-webkit-keyframes kemuriFade {
	0% {opacity: 0;}
	5% {opacity: 0;}
	20% {
		-webkit-transform: translateY(-50px) scale(1);
		-ms-transform: translateY(-50px) scale(1);
		-o-transform: translateY(-50px) scale(1);
		transform: translateY(-50px) scale(1);
		opacity: 1;
	}
	85% {
		-webkit-transform: translateY(-250px) scale(1.6);
		-ms-transform: translateY(-250px) scale(1.6);
		-o-transform: translateY(-250px) scale(1.6);
		transform: translateY(-250px) scale(1.6);
		opacity: 0;
	}
	100% {}
}
@-webkit-keyframes kemuriMove1 {
	0% {margin-left: 0px;}
	100% {margin-left: 10px;}
}
@-webkit-keyframes kemuriMove2 {
	0% {margin-left: 0px;}
	100% {margin-left: 30px;}
}
@-webkit-keyframes kemuriMove3 {
	0% {margin-left: 0px;}
	100% {margin-left: -20px;}
}
@-webkit-keyframes kemuriMove4 {
	0% {margin-left: 0px;}
	100% {margin-left: 40px;}
}
@-webkit-keyframes kemuriMove5 {
	0% {margin-left: 0px;}
	100% {margin-left: -24px;}
}

@keyframes kemuriFade {
	0% {opacity: 0;}
	5% {opacity: 0;}
	20% {
		-webkit-transform: translateY(-50px) scale(1);
		-ms-transform: translateY(-50px) scale(1);
		-o-transform: translateY(-50px) scale(1);
		transform: translateY(-50px) scale(1);
		opacity: 1;
	}
	85% {
		opacity: 0;
		-webkit-transform: translateY(-250px) scale(1.6);
		-ms-transform: translateY(-250px) scale(1.6);
		-o-transform: translateY(-250px) scale(1.6);
		transform: translateY(-250px) scale(1.6);
	}
	100% {}
}
@keyframes kemuriMove1 {
	0% {margin-left: 0px;}
	100% {margin-left: 10px;}
}
@keyframes kemuriMove2 {
	0% {margin-left: 0px;}
	100% {margin-left: 30px;}
}
@keyframes kemuriMove3 {
	0% {margin-left: 0px;}
	100% {margin-left: -20px;}
}
@keyframes kemuriMove4 {
	0% {margin-left: 0px;}
	100% {margin-left: 40px;}
}
@keyframes kemuriMove5 {
	0% {margin-left: 0px;}
	100% {margin-left: -24px;}
}


/*
******************************************************************
* cloud
******************************************************************/
.clouds {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	overflow: hidden;
}
.clouds__inner {
	position: relative;
	top: 0;
	left: 0;
	z-index: 0;
	width: 100%;
	height: 100px;
}
.cloud {
	position: absolute;
	z-index: 0;
	/*opacity: 0;*/
}
/* 雲の種類 */
.cloud--1 {
	width: 334px;
	height: 83px;
	background: url(../img/img_cloud01.png) 0 no-repeat;
}
.cloud--2 {
	width: 201px;
	height: 50px;
	background: url(../img/img_cloud02.png) 0 no-repeat;
}
/* 雲の動き */
.float--1 {
	-webkit-animation: mokumoku 3s ease-in-out 0s infinite alternate;
	animation: mokumoku 3s ease-in-out 0s infinite alternate;
}
.float--2 {
	-webkit-animation: mokumoku 4s ease-in-out 0s infinite alternate;
	animation: mokumoku 4s ease-in-out 0s infinite alternate;
}
.float--3 {
	-webkit-animation: mokumoku2 5s ease-in-out 0s infinite alternate;
	animation: mokumoku2 5s ease-in-out 0s infinite alternate;
}
.float--4 {
	-webkit-animation: mokumoku2 8s ease-in-out 0s infinite alternate;
	animation: mokumoku2 8s ease-in-out 0s infinite alternate;
}
.float--5 {
	-webkit-animation: mokumoku 10s ease-in-out 0s infinite alternate;
	animation: mokumoku 10s ease-in-out 0s infinite alternate;
}
/* 雲のサイズ */
.size--1 {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
}
.size--2 {
	-webkit-transform: scale(0.85);
	-ms-transform: scale(0.85);
	-o-transform: scale(0.85);
	transform: scale(0.85);
}
.size--3 {
	-webkit-transform: scale(0.6);
	-ms-transform: scale(0.6);
	-o-transform: scale(0.6);
	transform: scale(0.6);
}
.size--4 {
	-webkit-transform: scale(0.78);
	-ms-transform: scale(0.78);
	-o-transform: scale(0.78);
	transform: scale(0.78);
}
.size--5 {
	-webkit-transform: scale(1.05);
	-ms-transform: scale(1.05);
	-o-transform: scale(1.05);
	transform: scale(1.05);
}
-webkit-@keyframes mokumoku {
	0% {margin-top:  -10px;}
	50% {margin-top: 0px;}
	100% {margin-top: 10px;}
}
@keyframes mokumoku {
	0% {margin-top:  -10px;}
	50% {margin-top: 0px;}
	100% {margin-top: 10px;}
}
-webkit-@keyframes mokumoku2 {
	0% {margin-top:  -5px;}
	50% {margin-top: 0px;}
	100% {margin-top: 5px;}
}
@keyframes mokumoku2 {
	0% {margin-top:  -5px;}
	50% {margin-top: 0px;}
	100% {margin-top: 5px;}
}



/*
******************************************************************
* #modal
******************************************************************/
/* モーダル用 */
#lean_overlay{
	position: fixed;
	z-index:100;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	background: #000;
	display: none;
}
.popup {
	width: 884px;
	height: 590px;
	top: 0;
	bottom: 0;
	margin: auto;
}
.modal_close {
	display: block;
	position: absolute;
	top: 0px;
	right: 30px;
	z-index: 2;
}