@charset "utf-8";

#loading{
	background: #282828;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	min-width: 1170px;
	min-height: 100%;
	z-index: 9999;
	-webkit-transition: all 1.0s ease-in-out;
	transition: all 1.0s ease-in-out;
}
#loading.started {
	opacity: 0;
}
#loading .loading-img_load_01 {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 147px;
	height: 23px;
	z-index: 1;
	-webkit-animation-name: loading_txt-anime;
	animation-name: loading_txt-anime;
	-webkit-animation-duration: 2.5s;
  animation-duration: 2.5s;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
  -webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
#loading .loading-img_load_02 {
	opacity: 0;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	margin-top: auto;
	margin-bottom: auto;
	margin-left: -50%;
	min-width: 100%;
	min-height: 100%;
	z-index: 0;
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
#loading .loading-img_load_02 img {
	min-width: 100%;
	min-height: 100%;
}
#loading.finished .loading-img_load_02 {
	-webkit-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
#loading.start .loading-img_load_01 {
	display: none;
}
#loading.start .loading-img_load_02 {
	-webkit-transform: scale(3.0);
	transform: scale(3.0);
}

@keyframes loading_txt-anime {
	0% {
		opacity: 0;
	}
  50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
  }
}

/*
******************************************************************
* wrp-all
******************************************************************
*/
#wrp-all {
	min-width: 1170px;
}


/*
******************************************************************
* #header #nav
******************************************************************/
#header{
	position: fixed;
	top: 0;
	z-index: 100;
	width: 100%;
}
#nav{
	z-index: 4;
	width: 100%;
	display: table;
	transition: all 0.8s ease-out 1.9s;
	-webkit-transition: all 0.8s ease-out 1.9s;
	margin-top: -15px;
	min-width: 1141px;
}
#nav .nav_l,
#nav .nav_r{
	background-image: url(../../common/img/nav_bg.png);
	background-repeat: repeat-x;
	display: table-cell;
	height: 111px;
}
#nav .nav_l_glow,
#nav .nav_r_glow{
	background-image: url(../../common/img/nav_bg_glow_off.png);
	background-repeat: repeat-x;
	height: 111px;
}
.start #nav .nav_l_glow,
.start #nav .nav_r_glow{
	background-image: url(../../common/img/nav_bg_glow.png);
	transition: all 0.4s ease-out 0.3s;
	-webkit-transition: all 0.4s ease-out 0.3s;
}
#nav .nav_inner{
	background-image: url(../../common/img/nav_main_bg.png);
	background-repeat: no-repeat;
	display: table-cell;
	width: 1141px;
	height: 111px;
	overflow: hidden;
}
#nav .nav_inner_glow{
	background-image: url(../../common/img/nav_main_bg_glow_off.png);
	background-repeat: no-repeat;
	overflow: hidden;
	padding: 24px 67px 23px;
	box-sizing: border-box;
}
.start #nav .nav_inner_glow{
	background-image: url(../../common/img/nav_main_bg_glow.png);
	transition: all 0.4s ease-out 0.3s;
	-webkit-transition: all 0.4s ease-out 0.3s;
}

#nav li{
	float:left;
	position: relative;
	overflow: hidden;
}
#nav li a{
	display: block;
	height: 64px;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	transition: all ease 0.5s;
	position: relative;
	z-index: 2;
}
#nav .nab_list_01 a{
	background-image: url(../../common/img/nav_txt01.png);
	background-repeat: no-repeat;
	width: 167px;
}
#nav .nab_list_01 a:hover,
#nav .nab_list_01.active a{
	background-image: url(../../common/img/nav_txt01_on.png);
}
#nav .nab_list_02 a{
	background-image: url(../../common/img/nav_txt02.png);
	background-repeat: no-repeat;
	width: 166px;
}
#nav .nab_list_02 a:hover,
#nav .nab_list_02.active a{
	background-image: url(../../common/img/nav_txt02_on.png);
}
#nav .nab_list_03 a{
	background-image: url(../../common/img/nav_txt03.png);
	background-repeat: no-repeat;
	width: 167px;
}
#nav .nab_list_03 a:hover,
#nav .nab_list_03.active a{
	background-image: url(../../common/img/nav_txt03_on.png);
}
#nav .nab_list_04 a{
	background-image: url(../../common/img/nav_txt04.png);
	background-repeat: no-repeat;
	width: 166px;
}
#nav .nab_list_04 a:hover,
#nav .nab_list_04.active a{
	background-image: url(../../common/img/nav_txt04_on.png);
}
#nav .nab_list_05 a{
	background-image: url(../../common/img/nav_txt05.png);
	background-repeat: no-repeat;
	width: 167px;
}
#nav .nab_list_05 a:hover,
#nav .nab_list_05.active a{
	background-image: url(../../common/img/nav_txt05_on.png);
}
#nav .nab_list_06 a{
	background-image: url(../../common/img/nav_txt06.png);
	background-repeat: no-repeat;
	width: 167px;
}
#nav .nab_list_06 a:hover,
#nav .nab_list_06.active a{
	background-image: url(../../common/img/nav_txt06_on.png);
}
#nav li span{
	background-image: url(../../common/img/nav_hover_eff_off.png);
	background-repeat: no-repeat;
	display: block;
	background-position: center;
	background-size: 70px;
	-webkit-transition-duration: 0.14s;
	transition-duration: 0.14s;
}
#nav li.hover span{
	background-image: url(../../common/img/nav_hover_eff_on.png);
  -webkit-animation-name: nav_hover-anime;
  animation-name: nav_hover-anime;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
	background-size: 160px;
	background-position: center;
	
}
#nav li.active span{
	background-image: url(../../common/img/nav_hover_eff_on.png);
	background-size: 160px;
}

@keyframes nav_hover-anime {
	50% {
		background-position: 13px -49px;
	}
	60% {
    background-position: 5px -54px;
  }
	70% {
    background-position: 12px -49px;
  }
	80% {
    background-position: 2px -45px;
  }
	90% {
    background-position: 12px -49px;
  }
  100% {
		background-position: center;
  }
}

/*
******************************************************************
* #contents
******************************************************************/
#contents {
	position: relative;
	padding-bottom: 422px;
	z-index: 2;
}
.main {
	position: fixed;
	top: 0;
	left: 0;
	padding-top: 74px;
	width: 100%;
	height: 840px;
	box-sizing: border-box;
	z-index: 0;
}
.chara {
	opacity: 0;
	-webkit-transform: scale(1.3);
	transform: scale(1.3);
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	-webkit-transition-delay: 1.8s;
	transition-delay: 1.8s;
}
.bg_img01 {
	-webkit-transform: scale(2.5);
	transform: scale(2.5);
	-webkit-transition: all 3.8s ease-out;
	transition: all 3.8s ease-out;
}
.bg_img02 {
	-webkit-transform: scale(2.0) translate(0, 300px);
	transform: scale(2.0) translate(0, 300px);
	-webkit-transition: all 3.8s ease-out;
	transition: all 3.8s ease-out;
}
.bg_img03 {
	opacity: 0;
	-webkit-transform: scale(5.5) translate(100px, 30px);
	transform: scale(5.5) translate(100px, 30px);
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
.bg_txt {
	opacity: 0;
	-webkit-transform: scale(5.5) translate(-100px, 30px);
	transform: scale(5.5) translate(-100px, 30px);
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	-webkit-transition-delay: 0.2s;
	transition-delay: 0.2s;
}
.bg_img03 img,
.bg_txt img{
	-webkit-transition: all 2.0s ease-in-out;
	transition: all 2.0s ease-in-out;
}
.txt01,
.txt02,
.txt03,
.txt04,
.txt05,
.txt06,
.txt07 {
	opacity: 0;
	-webkit-transform: scale(1.3);
	transform: scale(1.3);
	-webkit-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	-webkit-transition-delay: 2.4s;
	transition-delay: 2.4s;
}
.txt02 {
	-webkit-transition-delay: 2.6s;
	transition-delay: 2.6s;
}
.txt03 {
	-webkit-transition-delay: 2.8s;
	transition-delay: 2.8s;
}
.txt04 {
	-webkit-transition-delay: 2.9s;
	transition-delay: 2.9s;
}
.txt05 {
	-webkit-transition-delay: 3.0s;
	transition-delay: 3.0s;
}
.txt06 {
	-webkit-transition-delay: 3.1s;
	transition-delay: 3.1s;
}
.txt07 {
	-webkit-transition-delay: 3.2s;
	transition-delay: 3.2s;
}

body.show .bg_img01,
body.show .bg_img02 {
	-webkit-transform: scale(1.0) translate(0, 0);
	transform: scale(1.0) translate(0, 0);
}
body.show .chara {
	opacity: 1;
	-webkit-transition: all 1.0s ease-in-out;
	transition: all 1.0s ease-in-out;
	-webkit-transition-delay: 1.8s;
	transition-delay: 1.8s;
}
body.show .bg_img03,
body.show .bg_txt {
	opacity: 1;
	-webkit-transition: all 2.0s ease-in-out;
	transition: all 2.0s ease-in-out;
	-webkit-transition-delay: 0.2s;
	transition-delay: 0.2s;
}
body.show .bg_txt {
	-webkit-transition-delay: 0.5s;
	transition-delay: 0.5s;
}
body.show .bg_img03 img,
body.show .bg_txt img {
	opacity: 0;
}
body.show .txt01,
body.show .txt02,
body.show .txt03,
body.show .txt04,
body.show .txt05,
body.show .txt06,
body.show .txt07 {
	opacity: 1;
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	-webkit-transition-delay: 2.4s;
	transition-delay: 2.4s;
}
body.show .txt02 {
	-webkit-transition-delay: 2.6s;
	transition-delay: 2.6s;
}
body.show .txt03 {
	-webkit-transition-delay: 2.8s;
	transition-delay: 2.8s;
}
body.show .txt04 {
	-webkit-transition-delay: 2.9s;
	transition-delay: 2.9s;
}
body.show .txt05 {
	-webkit-transition-delay: 3.0s;
	transition-delay: 3.0s;
}
body.show .txt06 {
	-webkit-transition-delay: 3.1s;
	transition-delay: 3.1s;
}
body.show .txt07 {
	-webkit-transition-delay: 3.1s;
	transition-delay: 3.1s;
}

body.start .chara,
body.start .bg_img03,
body.start .bg_txt,
body.start .txt01,
body.start .txt02,
body.start .txt03,
body.start .txt04,
body.start .txt05,
body.start .txt06,
body.start .txt07 {
	-webkit-transform: scale(1.0) translate(0, 0);
	transform: scale(1.0) translate(0, 0);
}

body.show.retreat .bg_img01 {
	opacity: 0;
	-webkit-transform: scale(0.4) translate(0, 0);
	transform: scale(0.4) translate(0, 0);
	-webkit-transition: all 0.8s ease;
	transition: all 0.8s ease;
}
body.show.retreat .bg_img02 {
	opacity: 0;
	-webkit-transform: scale(0.4) translate(0, -1040px);
	transform: scale(0.4) translate(0, -1040px);
	-webkit-transition: all 0.8s ease;
	transition: all 0.8s ease;
}
body.show.retreat .bg_img03 {
	opacity: 0;
	-webkit-transform: scale(0.4) translate(430px, -86px);
	transform: scale(0.4) translate(430px, -86px);
	-webkit-transition: all 0.8s ease;
	transition: all 0.8s ease;
}
body.show.retreat .bg_txt {
	opacity: 0;
	-webkit-transform: scale(0.4) translate(-220px, -320px);
	transform: scale(0.4) translate(-220px, -320px);
	-webkit-transition: all 0.8s ease;
	transition: all 0.8s ease;
}
body.show.retreat .chara {
	opacity: 0;
	-webkit-transform: scale(0.4) translate(0, -370px);
	transform: scale(0.4) translate(0, -370px);
	-webkit-transition: all 0.8s ease-out;
	transition: all 0.8s ease-out;
}
body.show.retreat .txt01,
body.show.retreat .txt02,
body.show.retreat .txt03,
body.show.retreat .txt04,
body.show.retreat .txt05,
body.show.retreat .txt06,
body.show.retreat .txt07 {
	opacity: 0;
	-webkit-transition: all 0.8s ease-out;
	transition: all 0.8s ease-out;
}
body.show.retreat .txt01 {
	-webkit-transform: scale(0.4) translate(-580px, 20px);
	transform: scale(0.4) translate(-580px, 20px);
}
body.show.retreat .txt02 {
	-webkit-transform: scale(0.4) translate(-687px, -310px);
	transform: scale(0.4) translate(-687px, -310px);
}
body.show.retreat .txt03 {
	-webkit-transform: scale(0.4) translate(290px, -55px);
	transform: scale(0.4) translate(290px, -55px);
}
body.show.retreat .txt04 {
	-webkit-transform: scale(0.4) translate(445px, -280px);
	transform: scale(0.4) translate(445px, -280px);
}
body.show.retreat .txt05 {
	-webkit-transform: scale(0.4) translate(490px, -550px);
	transform: scale(0.4) translate(490px, -550px);
}
body.show.retreat .txt06 {
	-webkit-transform: scale(0.4) translate(600px, -415px);
	transform: scale(0.4) translate(600px, -415px);
}
body.show.comeback .bg_img01,
body.show.comeback .bg_img02,
body.show.comeback .bg_img03,
body.show.comeback .bg_txt,
body.show.comeback .chara,
body.show.comeback .txt01,
body.show.comeback .txt02,
body.show.comeback .txt03,
body.show.comeback .txt04,
body.show.comeback .txt05,
body.show.comeback .txt06,
body.show.comeback .txt07 {
	opacity: 1;
	-webkit-transform: scale(1.0) translate(0, 0);
	transform: scale(1.0) translate(0, 0);
	-webkit-transition: all 0.8s ease;
	transition: all 0.8s ease;
}

.main02 {
	opacity: 0;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	min-width: 1170px;
	min-height: 100%;
	z-index: 0;
	-webkit-transform: scale(2.0);
	transform: scale(2.0);
	-webkit-transition: all 0.8s ease;
	transition: all 0.8s ease;
	-webkit-transition-delay: 0.2s;
	transition-delay: 0.2s;
}
.main02 img {
	position: absolute;
	min-width: 100%;
	min-height: 100%;
	top: 0;
	left: 50%;
	margin-left: -50%;
	z-index: 0;
}
body.show.retreat .main02 {
	opacity: 1;
	-webkit-transform: scale(1.0);
	transform: scale(1.0);
}
body.show.comeback .main02 {
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}

#contents .content01,
#contents .content02,
#contents .content03{
	position:relative;
}
#contentsWrap {
	position: relative;
	margin-top: 711px;
	z-index: 2;
}
#contentsWrap h2 {
	position: relative;
	top: -70px;
	left: 0;
	width: 100%;
	text-align: center;
	z-index: 150;
}

.next_btn {
	position: absolute;
	bottom: 150px;
	left: 0;
	width: 100%;
	height: 276px;
	text-align: center;
	z-index: 2;
}
.next_btn a {
	background: url(../img/btn_next_bg.png) no-repeat 0 0;
	display: inline-block;
	width: 875px;
	height: 276px;
	position: relative;
}
.next_btn a .bg_img {
	background: #000;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 810px;
	height: 210px;
	overflow: hidden;
	z-index: 0;
}
.next_btn a .bg_img img {
	opacity: 0.3;
	-webkit-transition: all 0.15s ease-out;
	transition: all 0.15s ease-out;
}
.next_btn a:hover .bg_img img {
	transform: scale(1.5);
	opacity: 1;
}
.next_btn a .next_btn_txt {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 1;
}

/*
******************************************************************
* #footer
******************************************************************/
#footer{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100px;
	z-index: 3;
}
#footer .box-copy{
	display: inline-block;
	vertical-align: middle;
	float: right;
}
#footer .box-copy li {
	font-size: 10px;
	color: #fff;
	text-shadow: 2px 2px 1px #000,
               -2px 2px 1px #000,
               2px -2px 1px #000,
               -2px -2px 1px #000;
}
#footer .inner {
	position: relative;
	width: 1000px;
	margin: 0 auto;
	text-align: left;
	overflow: hidden
}


/*
******************************************************************
* utility
******************************************************************/

/* 要素アクション */
*[data-sf] {
	opacity: 0;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
	-webkit-transition-delay: 0.3s;
	transition-delay: 0.3s;
}
*.animated[data-sf="toggle"] {
	opacity: 1;
}

*[data-sf="slide-top"] {
	-webkit-transform: translate(0, 100px);
	transform: translate(0, 100px);
}
*[data-sf="slide-left"] {
	-webkit-transform: translate(-300px, 0);
	transform: translate(-300px, 0);
}
*[data-sf="slide-right"] {
	-webkit-transform: translate(300px, 0);
	transform: translate(300px, 0);
}
*.animated[data-sf="slide-top"],
*.animated[data-sf="slide-left"],
*.animated[data-sf="slide-right"] {
	-webkit-transform: translate(0, 0);
	transform: translate(0, 0);
	opacity: 1;
}

/*
******************************************************************
* sns_btn
******************************************************************/
.sns_btn {
    overflow: hidden;
	position: relative;
    z-index: 5;
    transition: all 0.5s ease-in-out 1.0s;
    -webkit-transition: all 0.5s ease-in-out 1.0s;
    width: 1000px;
    margin: 0 auto;
}
.sns_btn ul {
    float: right;
}
.sns_btn li {
    display: inline-block;
    vertical-align: top;
    margin-left: 10px;
}
.sns_btn li:first-child {
    margin: 0;
}