@charset "UTF-8";
/* CSS Document */

#top_block {
	width: 100%;
	min-width: 1060px;
	padding: 0 30px 30px;
	box-sizing: border-box;
}
#top_block .contents_wrap {
	width: 100%;
    position: relative;
}

#top_block .top_faces {
	position: relative;
    width: 100%;
	height: 24vw;
    min-height: 741px;
    overflow: hidden;
	background-image: url(../images/common/main_bg.jpg);
    border-radius: 10px;
}
#top_block .faces_column {
    position: relative;
    left: 50%;
	width: 100%;
    margin-left: -50%;
    height: 33.33%;
}
#top_block .face {
	float: left;
    width: 6.25%;
    height: 100%;
    text-align: center;
	position: relative;
	overflow: hidden;
}

#top_block .face img {
	position: absolute;
    bottom: 0;
	left: 50%;
    width: 83.33%;
	margin-left: -41.67%;
	-webkit-transform: translateY(100%);
	-ms-transform: translateY(100%);
	transform: translateY(100%);
}
#top_block .face.show img {
	-webkit-animation: showFace 0.6s ease-in-out;
	-ms-animation: showFace 0.6s ease-in-out;
	animation: showFace 0.6s ease-in-out;
	-webkit-animation-fill-mode: both;
	-ms-animation-fill-mode: both;
	animation-fill-mode: both;
}
@-webkit-keyframes showFace {
	0% {-webkit-transform: translateY(100%);}
	50% {-webkit-transform: translateY(-20%);}
	80% {-webkit-transform: translateY(10%);}
	100% {-webkit-transform: translateY(0%);}
}
@-ms-keyframes showFace {
	0% {-ms-transform: translateY(100%);}
	50% {-ms-transform: translateY(-20%);}
	80% {-ms-transform: translateY(10%);}
	100% {-ms-transform: translateY(0%);}
}
@keyframes showFace {
	0% {transform: translateY(100%);}
	50% {transform: translateY(-20%);}
	80% {transform: translateY(10%);}
	100% {transform: translateY(0%);}
}
#top_block .top_text {
	float:left;
	width: 25%;
	position: relative;
	height: 100%;
}
#top_block .text_wrap {
    position: absolute;
	height: 38px;
	left: 50%;
	top: 63.77%;
	-webkit-transform: translateY(68.43%);
	-ms-transform: translateY(68.43%);
	transform: translateY(68.43%);
	-webkit-transition: -webkit-transform 1.5s ease-in-out;
	-ms-transition: -ms-transform 1.5s ease-in-out;
	transition: transform 1.5s ease-in-out;
}
#top_block .text_wrap:nth-child(1) {
	margin-left: -203px;
	margin-top: -61px;
	width: 430px;
}
#top_block .text_wrap:nth-child(2) {
	margin-left: -214px;
	margin-top: 10px;
	width: 481px;
	height: 58px;
	-webkit-transition-delay: 0.5s;
	-ms-transition-delay: 0.5s;
	transition-delay: 0.5s;
}
#top_block .text_wrap:nth-child(3) {
	margin-left: -204px;
    margin-top: 40px;
    width: 426px;
	-webkit-transition-delay: 1.2s;
	-ms-transition-delay: 1.2s;
	transition-delay: 1.2s;
}
#top_block .text_wrap.end {
	-webkit-transform: translateY(0%);
	-ms-transform: translateY(0%);
	transform: translateY(0%);
}

#top_block .text_set {
	position: absolute;
	z-index: 1;
}
#top_block .text_set img {
    display: block;
    float: left;
	position: relative;
	opacity: 0;
	-webkit-transition: opacity 0.3s ease-in-out;
	-ms-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;
}

#top_block .text_set img:nth-child(9){
	left: -1px;
}

#top_block .text_set img:nth-child(10),
#top_block .text_set img:nth-child(11),
#top_block .text_set img:nth-child(12){
	left: -6px;
}

#top_block .text_set img:nth-child(13){
	left: -15px;
}


#top_block .text_set.show img {
	opacity: 1;
}
#top_block .text_line {
	position: absolute;
	opacity: 0;
	overflow: hidden;
	width: 0%;
	/*-webkit-transform: translateX(-100%);
	-ms-transform: translateX(-100%);
	transform: translateX(-100%);
	-webkit-transform-origin: left top;
	-ms-transform-origin: left top;
	transform-origin: left top;*/
	-webkit-transition: width 0.5s ease-out, opacity 0.3s ease-out;
	-ms-transition: width 0.5s ease-out, opacity 0.3s ease-out;
	transition: width 0.5s ease-out, opacity 0.3s ease-out;
}
#top_block .text_wrap:nth-child(1) .text_line.show {
	-webkit-transition-delay: 1s;
	-ms-transition-delay: 1s;
	transition-delay: 1s;
}
#top_block .text_wrap:nth-child(2) .text_line.show {
	-webkit-transition-delay: 0.8s;
	-ms-transition-delay: 0.8s;
	transition-delay: 0.8s;
}
#top_block .text_wrap:nth-child(3) .text_line.show {
	-webkit-transition-delay: 0.9s;
	-ms-transition-delay: 0.9s;
	transition-delay: 0.9s;
}
#top_block .text_line.show {
	opacity: 1;
	/*-webkit-transform: translateX(0%);
	-ms-transform: translateX(0%);
	transform: translateX(0%);*/
	width: 100%;
}

#top_block .logo {
	position: absolute;
    top: -36px;
    left: 50%;
    margin-left: -142px;
	opacity: 0;
	-webkit-transition: opacity 1s ease-out, -webkit-transform 1s ease-out;
	-ms-transition: opacity 1s ease-out, -ms-transform 1s ease-out;
	transition: opacity 1s ease-out, transform 1s ease-out;
}
#top_block .logo.show {
	opacity: 1;
	-webkit-transform: translateY(0%);
	-ms-transform: translateY(0%);
	transform: translateY(0%);
}
#top_block .logo.show.hide {
	opacity: 0;
	-webkit-transform: translateY(-250%);
	-ms-transform: translateY(-250%);
	transform: translateY(-250%);
}

@media screen and (max-width: 2592px) {

	#top_block .faces_column {
		width: 2592px;
		margin-left: -1296px;
	}
	#top_block .face {
		width: 162px;
	}
	#top_block .face img {
		width: 135px;
		margin-left: -67px;
	}

}
/*
@media screen and (max-width: 1000px) {
	#top_block .top_text img {
		position: absolute;
		left: 50%;
		margin-left: -32.4vw;
		bottom: 0;
	}
}
*/

#top_block .yellow_btn {
	display: block;
	position: absolute;
	left: 30px;
	bottom: 30px;
}
#top_block .movie_btn {
	display: block;
	position: absolute;
	right: 19px;
	bottom: 30px;
	margin-bottom: 199px;
	width: 182px;
}
#top_block .movie_btn img {
	width: 100%;
}
#top_block .movie_btn img.movie_arrow {
	position: absolute;
	right: 0;
	top: 50%;
	width: 17px;
	margin-top: -9px;
}

#top_block .movie_btn img.movie_arrow {
	-webkit-animation: arrowMove 1s ease-in-out infinite;
	animation: arrowMove 1s ease-in-out infinite;
}
@keyframes arrowMove{
	0%{transform:translateX(-3px);}
	50%{transform:translateX(6px);}
	100%{transform:translateX(-3px);}
}
@-webkit-keyframes arrowMove{
	0%{-webkit-transform:translateX(-3px);}
	50%{-webkit-transform:translateX(6px);}
	100%{-webkit-transform:translateX(-3px);}
}

.video_inactive {
    display: none;
}

.video_active {
    display: block;
    opacity: 0;
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
    top: 0;
    left: 0;
    z-index: 11;
    text-align: center;
}

.video_active div.video_fin {
    display: inline-block;
    position: fixed;
    top: 20%;
    right: 20%;
    width: 30px;
    height: 30px;
    margin: -40px 0 0 0;
    cursor: pointer;
}

.video_active a.video_fin {
    display: block;
    width: 100%;
    height: 100%;
}

.video_active .video_fin span {
    transition: all .4s;
    display: block;
    width: 100%;
    height: 2px;
    background-color: #fff;
    border-radius: 4px;
}

.video_active .video_fin span:nth-of-type(1) {
    position: relative;
    top: 0;
    -webkit-transform: translateY(12px) rotate(-315deg);
    transform: translateY(12px) rotate(-315deg);
}

.video_active .video_fin span:nth-of-type(2) {
    position: relative;
    top: 10px;
    -webkit-transform: translateY(0) rotate(315deg);
    transform: translateY(0) rotate(315deg);
}

.video_active #video_controll {
    display: block;
    position: fixed;
    top: 20%;
    left: 20%;
    width: 60%;
    z-index: 50;
    cursor: pointer;
}

.video_active #video_controll img {
    width: 100px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding-top: 32px;
    position: absolute;
    margin: auto;
    cursor: pointer;
}

#playbtn, #pausebtn {
    display: none;
}

.video_active #video {
    position: fixed;
    top: 20%;
    left: 20%;
    cursor: pointer;
}

#top_block .join_btn {
	display: block;
	position: absolute;
	right: 22px;
	bottom: 30px;
	width: 179px;
}
#top_block .join_btn.fix_top {
	position: fixed;
	bottom: auto;
	top: 87px;
	right: 52px;
	z-index: 2;
}
#top_block .join_btn img {
	width: 100%;
}


@media screen and (max-width: 1060px) {
	#top_block .join_btn.fix_top {
		right:auto;
		left: 829px;
	}
}

#top_block .btn {
	opacity: 0;
	visibility: hidden;
	-webkit-transition: opacity 0.6s ease-out;
	-ms-transition: opacity 0.6s ease-out;
	transition: opacity 0.6s ease-out;
}
#top_block .btn.show {
	opacity: 1;
	visibility: visible;
}





/*
main
*******************************/

#block01 h1{
	max-width:212px;
	width:24.09%;
}

#block02 h1{
	max-width:360px;
	width:40.9%;
}

#block03 h1{
	max-width:310px;
	width:35.22%;
}

#block04 h1{
	max-width:285px;
	width:32.38%;
}

#block05 h1{
	max-width:391px;
	width:44.43%;
}


#block01 .left_column{
	float:left;
	max-width:320px;
	width:32%;
	margin-left: 6%;
	margin-top: 2.4em;
	-webkit-transition:opacity 0.3s ease-out 0.8s;
	-ms-transition:opacity 0.3s ease-out 0.8s;
	transition:opacity 0.3s ease-out 0.8s;
	opacity:0;
}

#block01.show .left_column{
	opacity:1;
}

#block01 .left_column p{
	font-size: 1.12em;
	margin-bottom: 1em;
	line-height: 2.1;
	color:#374740;
}

#block01 .left_column .pic_2{
	background-color:#fff;
	padding: 40px 25.93%;
	box-sizing:border-box;
}

#block01 .left_column .pic_2 img{
	width:100%;
	height:auto;
}

#block01 .left_column .pic_2 .pic_text{
	font-size: 0.82em;
	margin-top: 2.6em;
}

#block01 .right_column{
	float:right;
	max-width:531px;
	margin-right:3.2%;
	margin-top: 2.8%;
	width:53.1%;
	-webkit-transition:opacity 0.3s ease-out 1.1s;
	-ms-transition:opacity 0.3s ease-out 1.1s;
	transition:opacity 0.3s ease-out 1.1s;
	opacity:0;
}

#block01.show .right_column{
	opacity:1;
}

#block01 .right_column img{
	width:100%;
	height:auto;
}

#main .contents_wrap>[id^='block']{
	overflow:hidden;
}

#main .contents_wrap>[id^='block'] .section_block h1 .mask{
	position: absolute;
	top: 0;
	right: 0;
	max-width: 1016px;
	width: 115.4%;
	-webkit-transition:-webkit-transform 0.8s ease-out;
	-ms-transition:-ms-transform 0.8s ease-out;
	transition:transform 0.8s ease-out;
}

#main .contents_wrap>[id^='block'].show .section_block h1 .mask{
	-webkit-transform: translateX(100%);
	-ms-transform: translateX(100%);
	transform: translateX(100%);
}

#main .contents_wrap>[id^='block'] .section_block .section_fuki{
	-webkit-transform-origin: right bottom;
	-ms-transform-origin: right bottom;
	transform-origin: right bottom;
	-webkit-transition:opacity 0.3s ease-out;
	-ms-transition:opacity 0.3s ease-out;
	transition:opacity 0.3s ease-out;
	opacity:0;
}

#main .contents_wrap>[id^='block'].show .section_block .section_fuki{
	opacity:1;
}

#main .contents_wrap>[id^='block'].show .section_block .section_fuki img{
	-webkit-transition:none;
	-ms-transition:none;
	transition:none;
	-webkit-animation: scenetext2 0.35s ease-out forwards 0.3s;
	animation: scenetext2 0.35s ease-out forwards 0.3s;
	-webkit-transform-origin:right bottom;
	-ms-transform-origin:right bottom;
	transform-origin:right bottom;
}


#main .contents_wrap #block02{
	padding: 6.3% 0 7.9%;
}

#block02 .pic_1{
	max-width:247px;
	float:left;
	width:26.0%;
	margin-right:5.8%;
	opacity:0;
}

#block02 .pic_2{
	max-width:294px;
	float:left;
	width:31.0%;
	opacity:0;
}

#block02 .pic_3{
	max-width:275px;
	float:right;
	width:29.0%;
	opacity:0;
}

#block02 .pic_4{
	max-width:359px;
	margin:0 auto;
	margin-top: 2.4%;
	width:35.9%;
	-webkit-transition:opacity 0.3s ease-out;
	-ms-transition:opacity 0.3s ease-out;
	transition:opacity 0.3s ease-out;
	opacity:0;
}

#block02.show .pic_1{
	-webkit-animation: scenetext 0.5s ease-out forwards 1.1s;
	animation: scenetext 0.5s ease-out forwards 1.1s;
}

#block02.show .pic_2{
	-webkit-animation: scenetext 0.5s ease-out forwards 1.3s;
	animation: scenetext 0.5s ease-out forwards 1.3s;
}

#block02.show .pic_3{
	-webkit-animation: scenetext 0.5s ease-out forwards 1.5s;
	animation: scenetext 0.5s ease-out forwards 1.5s;
}

#block02.show .pic_4{
	-webkit-animation: textstamp 0.5s ease-in forwards 0.8s;
	animation: textstamp 0.5s ease-in forwards 0.8s;
}

#block02 .third_column{
	margin-top: 7.1%;
}

#block02 p.text_4{
	color: #374740;
	-webkit-transition:opacity 0.3s ease-out 0.8s;
	-ms-transition:opacity 0.3s ease-out 0.8s;
	transition:opacity 0.3s ease-out 0.8s;
	opacity:0;
}

#block02.show p.text_4{
	opacity:1;
}

#block02 .text_area{
	max-width:880px;
	margin:0 auto;
	margin-top: 2.5em;
}

#block02 p{
	font-size: 1.12em;
}

#block02 .pic_1 img,
#block02 .pic_2 img,
#block02 .pic_3 img,
#block02 .pic_4 img{
	width:100%;
	height:auto;
}

#block03 .left_column{
	width:32%;
	max-width:320px;
	float:left;
	margin-left:6%;
	margin-top: 2.4em;
	-webkit-transition:opacity 0.3s ease-out 0.8s;
	-ms-transition:opacity 0.3s ease-out 0.8s;
	transition:opacity 0.3s ease-out 0.8s;
	opacity:0;
}

#block03 .left_column p{
	font-size: 1.12em;
	color:#374740;
	line-height: 2.1;
}

#block03 .right_column{
	max-width:500px;
	width:50%;
	float:right;
	-webkit-transition:opacity 0.3s ease-out 1.1s;
	-ms-transition:opacity 0.3s ease-out 1.1s;
	transition:opacity 0.3s ease-out 1.1s;
	opacity:0;
}

#block03 .right_column .pic_1 .sp_only{
	margin-top: 3em;
}

#block03.show .left_column,
#block03.show .right_column{
	opacity:1;
}

#block03 .right_column img{
	width:100%;
	height:auto;
}

#block04 .text_area{
	max-width:880px;
	margin:0 auto;
	margin-top: 2.5em;
}

#block04 p{
	font-size: 1.12em;
}

#block04 p.text_4{
	color: #374740;
	-webkit-transition:opacity 0.3s ease-out 0.8s;
	-ms-transition:opacity 0.3s ease-out 0.8s;
	transition:opacity 0.3s ease-out 0.8s;
	opacity:0;
}

#block04.show p.text_4{
	opacity:1;
}

#block04 ul{
	margin-top: 3.3em;
}

#block04 li{
	float: left;
	background-color: #ffe500;
	clear: both;
	width: 47.72%;
	box-sizing: border-box;
	padding: 1.8em 0;
	padding-left: 3.2%;
	margin-bottom: 2em;
	border-radius: 0.5em;
	position:relative;
	background-image:url(../images/index/block4_arrow.png);
	background-size:5%;
	background-repeat:no-repeat;
	background-position: 94.57% center;
	opacity:0;
	cursor:pointer;
}

#block04 li.double{
	padding: 1em 3.2%;
}

#block04 li:nth-child(2n){
	clear:none;
	float:right;
}

#block04 li:nth-child(1){
	-webkit-transition:opacity 0.3s ease-out 1s;
	-ms-transition:opacity 0.3s ease-out 1s;
	transition:opacity 0.3s ease-out 1s;
}

#block04 li:nth-child(2){
	-webkit-transition:opacity 0.3s ease-out 1.15s;
	-ms-transition:opacity 0.3s ease-out 1.15s;
	transition:opacity 0.3s ease-out 1.15s;
}

#block04 li:nth-child(3){
	-webkit-transition:opacity 0.3s ease-out 1.25s;
	-ms-transition:opacity 0.3s ease-out 1.25s;
	transition:opacity 0.3s ease-out 1.25s;
}

#block04 li:nth-child(4){
	-webkit-transition:opacity 0.3s ease-out 1.35s;
	-ms-transition:opacity 0.3s ease-out 1.35s;
	transition:opacity 0.3s ease-out 1.35s;
}

#block04 li:nth-child(5){
	-webkit-transition:opacity 0.3s ease-out 1.45s;
	-ms-transition:opacity 0.3s ease-out 1.45s;
	transition:opacity 0.3s ease-out 1.45s;
}

#block04 li:nth-child(6){
	-webkit-transition:opacity 0.3s ease-out 1.55s;
	-ms-transition:opacity 0.3s ease-out 1.55s;
	transition:opacity 0.3s ease-out 1.55s;
}

#block04.show li{
	opacity:1;
}

#block04 li p{
	text-decoration:none;
	color:#000;
	text-align:left;
	font-size: 1em;
}

#block04 li .number{
	width: 8.57%;
	max-width: 36px;
	position: absolute;
	left: 4.7%;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	height: auto;
	display: inline-grid;
}

#block04 li .number img{
	width:100%;
	height:auto;
}

#main .contents_wrap #block05{
	padding: 6.3% 0 9.7%;
}

#block05 .text_area{
	max-width:880px;
	margin:0 auto;
	margin-top: 2.8em;
}

#block05 p{
	font-size: 1.12em;
}

#block05 p.text_5{
	-webkit-transition:opacity 0.3s ease-out 0.8s;
	-ms-transition:opacity 0.3s ease-out 0.8s;
	transition:opacity 0.3s ease-out 0.8s;
	opacity:0;
	color: #374740;
	line-height: 2.1;
}

#block05.show p.text_5{
	opacity:1;
}

#block05 ul{
	margin-top: 3.2em;
}

#block05 li{
	max-width:168px;
	width:19.9%;
	float:left;
	position:relative;
	margin-right:1.1%;
	background-repeat:no-repeat;
	background-size:cover;
	opacity:0;
	cursor:pointer;
}

#block05 li:nth-child(1){
	background-image:url(../images/index/block5_pic1_over.png);
	-webkit-transition:opacity 0.3s ease-out 1s;
	-ms-transition:opacity 0.3s ease-out 1s;
	transition:opacity 0.3s ease-out 1s;
}

#block05 li:nth-child(2){
	background-image:url(../images/index/block5_pic2_over.png);
	-webkit-transition:opacity 0.3s ease-out 1.15s;
	-ms-transition:opacity 0.3s ease-out 1.15s;
	transition:opacity 0.3s ease-out 1.15s;
}

#block05 li:nth-child(3){
	background-image:url(../images/index/block5_pic3_over.png);
	-webkit-transition:opacity 0.3s ease-out 1.25s;
	-ms-transition:opacity 0.3s ease-out 1.25s;
	transition:opacity 0.3s ease-out 1.25s;
}

#block05 li:nth-child(4){
	background-image:url(../images/index/block5_pic4_over.png);
	-webkit-transition:opacity 0.3s ease-out 1.35s;
	-ms-transition:opacity 0.3s ease-out 1.35s;
	transition:opacity 0.3s ease-out 1.35s;
}

#block05 li:last-child{
	margin-right:0;
	background-image:url(../images/index/block5_pic5_over.png);
	-webkit-transition:opacity 0.3s ease-out 1.35s;
	-ms-transition:opacity 0.3s ease-out 1.35s;
	transition:opacity 0.3s ease-out 1.35s;
}

#block05.show li{
	opacity:1;
}

#block05 li img{
	width:100%;
	height:auto;
	-webkit-transition:opacity 0.3s ease-out;
	-ms-transition:opacity 0.3s ease-out;
	transition:opacity 0.3s ease-out;
	-webkit-transform:translate3d(0,0,0);
	-ms-transform:translate3d(0,0,0);
	transform:translate3d(0,0,0);
}

#block05 li:hover img{
	opacity:0;
}

#block05 li p{
	text-align: center;
	position: absolute;
	left:0;top: 2.6em;
	width: 100%;
}

#block05 li p.double{
	line-height: 1.2;
	top: 2.05em;
}

#block05 li p span{
	font-size: 0.65em;
}

#block05 li a p,
#block05 li a:link p,
#block05 li a:visited p{
	color:#13201a;
	text-decoration:none;
}


@-webkit-keyframes textstamp {
 0% {-webkit-transform:scale(2);opacity:0;}
 55% {-webkit-transform:scale(0.97);opacity:1;}
 60% {-webkit-transform:scale(1.02);opacity:1;}
 65% {-webkit-transform:scale(0.98);opacity:1;}
 70% {-webkit-transform:scale(1.015);opacity:1;}
 75% {-webkit-transform:scale(0.985);opacity:1;}
 80% {-webkit-transform:scale(1.01);opacity:1;}
 85% {-webkit-transform:scale(0.99);opacity:1;}
 90% {-webkit-transform:scale(1.005);opacity:1;}
 95% {-webkit-transform:scale(0.995);opacity:1;}
 100% {-webkit-transform:scale(1);opacity:1;}
}

@keyframes textstamp {
 0% {transform:scale(2);opacity:0;}
 55% {transform:scale(0.97);opacity:1;}
 60% {transform:scale(1.02);opacity:1;}
 65% {transform:scale(0.98);opacity:1;}
 70% {transform:scale(1.015);opacity:1;}
 75% {transform:scale(0.985);opacity:1;}
 80% {transform:scale(1.01);opacity:1;}
 85% {transform:scale(0.99);opacity:1;}
 90% {transform:scale(1.005);opacity:1;}
 95% {transform:scale(0.995);opacity:1;}
 100% {transform:scale(1);opacity:1;}
}


@-webkit-keyframes scenetext{
	0%{-webkit-transform: scale(0.1); opacity:0;}
 33%{-webkit-transform: scale(1.1); opacity:1;}
 66%{-webkit-transform: scale(0.98); opacity:1;}
100%{-webkit-transform: scale(1); opacity:1;}
}

@keyframes scenetext{
	0%{transform: scale(0.1); opacity:0;}
 33%{transform: scale(1.1); opacity:1;}
 66%{transform: scale(0.98); opacity:1;}
100%{transform: scale(1); opacity:1;}
}


@-webkit-keyframes scenetext2{
	0%{-webkit-transform:rotate(0deg);}
 33%{-webkit-transform:rotate(10deg);}
 66%{-webkit-transform:rotate(-4deg);}
100%{-webkit-transform:rotate(0deg);}
}

@keyframes scenetext2{
	0%{-webkit-transform:rotate(0deg);}
 33%{-webkit-transform:rotate(10deg);}
 66%{-webkit-transform:rotate(-4deg);}
100%{-webkit-transform:rotate(0deg);}
}


/*
anime
*******************************/

.animation_area{
	position:relative;
	width: 1060px;height:295px;
	margin:0 auto;
	overflow: hidden;
	top: -95px;
}

.animation_area .ship{
	width:321px;height:256px;
	position:absolute;
	left: 740px;top:10px;
	-webkit-animation:ship 20s linear infinite;
	animation:ship 20s linear infinite;
}

.animation_area .ship .inner{
	-webkit-animation:ship2 0.5s ease-out infinite;
	animation:ship2 0.5s ease-out infinite;
}

.animation_area .wave1{
	width:702px;height:147px;
	position:absolute;
	right: -76px;bottom: -11px;
	-webkit-animation:wave2 10s linear infinite;
	animation:wave2 10s linear infinite;
}

.animation_area .wave2{
	width:702px;height:147px;
	position:absolute;
	bottom: -11px;left: 5px;
	-webkit-animation:wave1 8s linear infinite;
	animation:wave1 8s linear infinite;
}

/*@-webkit-keyframes ship{
	0%{-webkit-transform:translateX(0);}
 25%{-webkit-transform:translateX(125px);}
 50%{-webkit-transform:translateX(0);}
 75%{-webkit-transform:translateX(-125px);}
100%{-webkit-transform:translateX(0);}
}*/

@-webkit-keyframes ship{
    0%{-webkit-transform:translateX(0);
        opacity:0;}
    10%{-webkit-transform:translateX(0);
        opacity:0;}
	20%{-webkit-transform:translateX(-92.5px);
        opacity:1;}
    80%{-webkit-transform:translateX(-647.5px);
        opacity:1;}
    90%{-webkit-transform:translateX(-740px);
        opacity:0;}
    100%{-webkit-transform:translateX(-740px);
        opacity:0;}
}

/*@keyframes ship{
	0%{transform:translateX(0);}
 25%{transform:translateX(125px);}
 50%{transform:translateX(0);}
 75%{transform:translateX(-125px);}
100%{transform:translateX(0);}
}*/

@keyframes ship{
    0%{transform:translateX(0);
        opacity:0;}
	10%{transform:translateX(0);
        opacity:0;}
    20%{transform:translateX(-92.5px);
        opacity:1;}
    80%{transform:translateX(-647.5px);
        opacity:1;}
    90%{transform:translateX(-740px);
        opacity:0;}
    100%{transform:translateX(-740px);
        opacity:0;}
}

@-webkit-keyframes ship2{
	0%{-webkit-transform:translateY(0);}
 33%{-webkit-transform:translateY(-4px);}
 66%{-webkit-transform:translateY(6px);}
100%{-webkit-transform:translateY(0);}
}

@keyframes ship2{
	0%{transform:translateY(0);}
 33%{transform:translateY(-4px);}
 66%{transform:translateY(6px);}
100%{transform:translateY(0);}
}

@-webkit-keyframes wave1{
	0%{-webkit-transform:translateX(0);}
 50%{-webkit-transform:translateX(55px);}
100%{-webkit-transform:translateX(0);}
}

@keyframes wave1{
	0%{transform:translateX(0);}
 50%{transform:translateX(55px);}
100%{transform:translateX(0);}
}


@-webkit-keyframes wave2{
	0%{-webkit-transform:translateX(0);}
 50%{-webkit-transform:translateX(45px);}
100%{-webkit-transform:translateX(0);}
}

@keyframes wave2{
	0%{transform:translateX(0);}
 50%{transform:translateX(45px);}
100%{transform:translateX(0);}
}

@media screen and (max-width: 750px) {
	.animation_area{
		width: 100%;
		top: 0;
		height: 48vw;
		margin-bottom: 3.5vw;
	}

	.animation_area .ship{
		width:42.8%;
		height:auto;
		left: 50%;
        top: 3vw;
		-webkit-animation:sp_ship 15s linear infinite;
		animation:sp_ship 15s linear infinite;
	}

	.animation_area .ship .inner{
		-webkit-animation:sp_ship2 0.5s ease-out infinite;
		animation:sp_ship2 0.5s ease-out infinite;
	}

	.animation_area .ship img{
		width:100%;
		height:auto;
	}

	.animation_area .wave1{
		width:120%;
		height:auto;
		right: -10%;bottom: 4vw;
		-webkit-animation:wave2 15s linear infinite;
		animation:wave2 15s linear infinite;
	}

	.animation_area .wave1 img{
		width:100%;
		height:auto;
	}


}

/*@-webkit-keyframes sp_ship{
	0%{-webkit-transform:translateX(0);}
 25%{-webkit-transform:translateX(30%);}
 50%{-webkit-transform:translateX(0);}
 75%{-webkit-transform:translateX(-30%);}
100%{-webkit-transform:translateX(0);}
}*/

@-webkit-keyframes sp_ship{
	0%{-webkit-transform:translateX(0);
        opacity:0;}
    10%{-webkit-transform:translateX(0);
        opacity:0;}
    20%{-webkit-transform:translateX(-12.5%);
        opacity:1;}
    80%{-webkit-transform:translateX(-87.5%);
        opacity:1;}
    90%{-webkit-transform:translateX(-100%);
        opacity:0;}
    100%{-webkit-transform:translateX(-100%);
        opacity:0;}
}

/*@keyframes sp_ship{
	0%{transform:translateX(0);}
 25%{transform:translateX(30%);}
 50%{transform:translateX(0);}
 75%{transform:translateX(-30%);}
100%{transform:translateX(0);}
}*/

@keyframes sp_ship{
	0%{transform:translateX(0);
        opacity:0;}
    10%{transform:translateX(0);
        opacity:0;}
    20%{transform:translateX(-12.5%);
        opacity:1;}
    80%{transform:translateX(-87.5%);
        opacity:1;}
    90%{transform:translateX(-100%);
        opacity:0;}
    100%{transform:translateX(-100%);
        opacity:0;}
}

@-webkit-keyframes sp_ship2{
	0%{-webkit-transform:translateY(0);}
 33%{-webkit-transform:translateY(0.8vw);}
 66%{-webkit-transform:translateY(-1vw);}
100%{-webkit-transform:translateY(0);}
}

@keyframes sp_ship2{
	0%{transform:translateY(0);}
 33%{transform:translateY(0.8vw);}
 66%{transform:translateY(-1vw);}
100%{transform:translateY(0);}
}

@-webkit-keyframes sp_wave1{
	0%{-webkit-transform:translateX(0);}
 50%{-webkit-transform: translateX(7%);}
100%{-webkit-transform:translateX(0);}
}

@keyframes sp_wave1{
	0%{transform:translateX(0);}
 50%{transform: translateX(7%);}
100%{transform:translateX(0);}
}


/*
modal
*******************************/

#modal{
	width: 100%;
	height:100.1%;
	position:fixed;
	top:0;left:0;
	overflow: scroll;
	display:none;
	z-index: 10;
	-webkit-transition:opacity 0.3s ease-out,background-color 0.3s ease-out;
	-ms-transition:opacity 0.3s ease-out,background-color 0.3s ease-out;
	transition:opacity 0.3s ease-out,background-color 0.3s ease-out;
	opacity:0;
}

#modal.job_1{
	background-color:#95c855;
}

#modal.job_2{
	background-color:#f39c39;
}

#modal.job_3{
	background-color:#00b8ee;
}

#modal.job_4{
	background-color:#bc97c4;
}

#modal.job_5{
	background-color:#f19ca6;
}

#modal.member_1,
#modal.member_2,
#modal.member_3,
#modal.member_4,
#modal.member_5,
#modal.member_6{
	background-color: #ffe500;
}

#modal.show{
	opacity:1;
}

#modal.hide{
	opacity:0;
}

body.modal_mode #modal{
	display:block;

}
#modal .inner{
	width: 1000px;
	height: 100%;
	margin:0 auto;


}

@media screen and (max-width: 1160px) {
	#block02 .third_column{
		margin: 0 auto;
		margin-top: 7.1%;
		max-width: 1000px;
		width: 94.7%;
	}
}


@media screen and (max-width: 750px) {

	#main .contents_wrap>[id^='block']{
		overflow:visible;
	}

	#top_block {
		min-width: 0;
		padding: 0;
		padding-top: 15.5%;
	}
	#top_block .contents_wrap {
		background-image: url(../images/common/main_bg.jpg);
		padding-bottom: 9.3vw;
	}
	#top_block .top_faces {
		min-width: 0;
		border-radius: 0;
		height: auto;
		min-height: 0;
		background-image: none;
	}
	#top_block .faces_column {
		width: 100%;
		margin: 0;
		left: 0;
		height: 31.07vw;
	}
	#top_block .face {
		width: 16%;
		margin-right: 5%;
	}
	#top_block .face:last-child {
		float:right;
		margin-right: 0;
		margin-left: -4px;
	}
	#top_block .face img {
		width: 112%;
		margin-left: -6%;
		left: 0;
	}
	#top_block .top_text {
		float: none;
		position: absolute;
		width: 100%;
		height: auto;
		top: 37.07vw;
    	left: 0;
	}
	#top_block .text_wrap {
		position: relative;
		height: 5.6vw;
		top: 0;
		-webkit-transform: translateY(248%);
		-ms-transform: translateY(248%);
		transform: translateY(248%);
	}
	#top_block .text_wrap:nth-child(1) {
		width: 70.8%;
		margin-left: -30.8%;
		margin-top: 2.4vw;
	}
	#top_block .text_wrap:nth-child(2) {
		width: 63.73%;height: 7.8vw;
		margin-left: -31.33%;
		margin-top: 8.87vw;
	}
	#top_block .text_wrap:nth-child(3) {
		width: 60.67%;
		margin-left: -30%;
		margin-top: 3.73vw;
	}

	#top_block .text_set img:last-child {
		float: right;
		margin-left: -2px;
	}
	#top_block .text_wrap:nth-child(1) .text_set img:nth-child(1) {width: 9.84%;}
	#top_block .text_wrap:nth-child(1) .text_set img:nth-child(2) {width: 6.26%;}
	#top_block .text_wrap:nth-child(1) .text_set img:nth-child(3) {width: 7.48%;}
	#top_block .text_wrap:nth-child(1) .text_set img:nth-child(4) {width: 6.89%;}
	#top_block .text_wrap:nth-child(1) .text_set img:nth-child(5) {width: 5.68%;}
	#top_block .text_wrap:nth-child(1) .text_set img:nth-child(6) {width: 4.9%;}
	#top_block .text_wrap:nth-child(1) .text_set img:nth-child(7) {width: 8.03%;}
	#top_block .text_wrap:nth-child(1) .text_set img:nth-child(8) {width: 7.06%;}
	#top_block .text_wrap:nth-child(1) .text_set img:nth-child(9) {width: 5.7%;}
	#top_block .text_wrap:nth-child(1) .text_set img:nth-child(10) {width: 7.87%;left: -1%;}
	#top_block .text_wrap:nth-child(1) .text_set img:nth-child(11) {width: 5.68%;left: -0.5%;}
	#top_block .text_wrap:nth-child(1) .text_set img:nth-child(12) {width: 8.45%;left: 0%;}
	#top_block .text_wrap:nth-child(1) .text_set img:nth-child(13) {width: 5.65%;left: -1%;float:left;}

	#top_block .text_wrap:nth-child(2) .text_set img:nth-child(1) {width: 15.39%;margin-left: 1.1%;}
	#top_block .text_wrap:nth-child(2) .text_set img:nth-child(2) {width: 16.52%;margin-left: -1%;}
	#top_block .text_wrap:nth-child(2) .text_set img:nth-child(3) {width: 17.61%;margin-left: -1.1%;}
	#top_block .text_wrap:nth-child(2) .text_set img:nth-child(4) {width: 17.15%;margin-left: -1%;}
	#top_block .text_wrap:nth-child(2) .text_set img:nth-child(5) {width: 16.86%;margin-left: -1%;}
	#top_block .text_wrap:nth-child(2) .text_set img:nth-child(6) {width: 17.73%;left: -2%;}

	#top_block .text_wrap:nth-child(3) .text_set img:nth-child(1) { width:10.33%; }
	#top_block .text_wrap:nth-child(3) .text_set img:nth-child(2) { width:9.15%; }
	#top_block .text_wrap:nth-child(3) .text_set img:nth-child(3) { width:8.22%; }
	#top_block .text_wrap:nth-child(3) .text_set img:nth-child(4) { width:8.92%; }
	#top_block .text_wrap:nth-child(3) .text_set img:nth-child(5) { width:10.09%; }
	#top_block .text_wrap:nth-child(3) .text_set img:nth-child(6) { width:9.62%; }
	#top_block .text_wrap:nth-child(3) .text_set img:nth-child(7) { width:7.98%; }
	#top_block .text_wrap:nth-child(3) .text_set img:nth-child(8) { width:8.45%; }
	#top_block .text_wrap:nth-child(3) .text_set img:nth-child(9) { width:9.15%; }
	#top_block .text_wrap:nth-child(3) .text_set img:nth-child(10) { width:8.45%; }
	#top_block .text_wrap:nth-child(3) .text_set img:nth-child(11) { width:9.62%; }

	#top_block .text_wrap:nth-child(1) .text_line img {width: 63vw;}
	#top_block .text_wrap:nth-child(2) .text_line img {width: 63.73vw;}
	#top_block .text_wrap:nth-child(3) .text_line img { width: 60.67vw; }

	#top_block .logo {
		width: 50%;
		margin-left: -25%;
		top: -20%;
	}

	#top_block .yellow_btn {
		width: 78.67%;
		height: 13.33vw;
		left: 10.67%;
		line-height: 1;
		background-image:url(../images/index/top_yellowbtn_sp.png);
		background-repeat: no-repeat;
		background-size: 5.59%;
		background-position: 94.9% center;
		background-color: #ffe500;
		font-size: 3.2vw;
		color: #13201a;
		text-align: center;
		border-radius: 5px;
	}
	#top_block .yellow_btn span {
		position: relative;
		top: 50%;
		-webkit-transform:translateY(-50%);
		-ms-transform:translateY(-50%);
		transform:translateY(-50%);
	}
	#top_block .movie_btn {
		right: auto;
		left: 10.67%;
		bottom: 0;
		margin-bottom: 25.6%;
		width: 38%;
	}
	#top_block .movie_btn img.movie_arrow {
		width: 9.82%;
		margin-top: -5%;
	}
    
    .video_active #video {
        top: 30%;
        left: 10%;
        width: 80%;
    }
    
    .video_active #video_controll {
        display: none;/*
        position: fixed;
        top: 30%;
        left: 10%;
        width: 80%;
        z-index: 50;
        cursor: pointer;*/
    }

    /*.video_active #video_controll img {
        width: 50px;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        position: absolute;
        margin: auto;
    }*/
    
    .video_active div.video_fin {
        top: 30%;
        right: 10%;
    }
    
    .video_active .video_fin span {
        display: block;
    }
    
    .video_active .video_fin span:nth-of-type(1) {
        top: 0;
        -webkit-transform: translateY(12px) rotate(-315deg);
        transform: translateY(12px) rotate(-315deg);
    }
    
    .video_active .video_fin span:nth-of-type(2) {
        top: 10px;
        -webkit-transform: translateY(0) rotate(315deg);
        transform: translateY(0) rotate(315deg);
}
    
    
/*
.video_active .video_fin span:nth-of-type(1) {
    position: relative;
    top: 0;
}

.video_active .video_fin span:nth-of-type(2) {
    position: relative;
    top: -10px;
}

.video_active .video_fin:hover span:nth-of-type(1) {
    -webkit-transform: translateY(7.5px) rotate(-315deg);
    transform: translateY(7.5px) rotate(-315deg);
}

.video_active .video_fin:hover span:nth-of-type(2) {
    -webkit-transform: translateY(-7.5px) rotate(315deg);
    transform: translateY(-7.5px) rotate(315deg);
}
*/

    
	#top_block .join_btn {
		right: 10.67%;
		bottom: 0;
		margin-bottom: 26.27%;
		width: 37.33%;
	}
	#top_block .btn {
		-webkit-transition: opacity 1s ease-in-out 0.3s;
		-ms-transition: opacity 1s ease-in-out 0.3s;
		transition: opacity 1s ease-in-out 0.3s;
	}
	#top_block .join_btn.fix_top{
		right: 10.67%;
		left:auto;top: auto;
		position:absolute;
	}



	#block01 .left_column{
		float:none;
		width:100%;
		max-width:inherit;
		margin:0 auto;
	}
	#block01 .left_column p{
		font-size: 1.6em;
	}

	#block01 .left_column .pic_2{
		padding: 3.8em 25.42%;
		margin-top: 3.5em;
		clear: both;
	}

	#block01 .left_column .pic_2 .pic_text{
		font-size: 1.3em;
		margin-top: 1.9em;
		text-align: center;
	}

	#block01 .right_column{
		float: none;
		max-width: inherit;
		position: relative;
		width: 90%;
	}

	#block01 .right_column .fuki{
		width: 36.34%;
		position: absolute;
		right: -12%;
		top: 8%;
	}

	#main .contents_wrap #block02,
	#main .contents_wrap #block05{
		padding: 4.8em 6.6%;
	}

	#block02 .third_column{
		width:100%;
	}

	#block02 .pic_1,
	#block02 .pic_2,
	#block02 .pic_3{
		max-width:inherit;
		float: none;
		width:100%;
		margin:0 auto;
		position:relative;
	}

	#block02 .pic_1{
		margin-bottom: 1em;
	}

	#block02 .pic_2{
		margin-bottom: 4.5em;
	}

	#block02 .pic_1 .left_column{
		width:38.3%;
	}

	#block02 .pic_1 .left_column h2{
		width: 45.6%;
		margin-top: 1.1em;
		margin-bottom: 0.8em;
	}

	#block02 .pic_1 .left_column{
		font-size: 1.8em;
		position: absolute;
		left: 10%;
		top: 0;
	}

	#block02 .pic_1 .right_column{
		width:42.7%;
		float:right;
		margin-right: 12.1%;
	}

	#block02 .pic_2 .left_column{
		width: 65.25%;
		position: absolute;
		left: 4%;
		top: 0em;
	}

	#block02 .pic_2 .right_column{
		width:32.2%;
		float:right;
		font-size: 1.8em;
		margin-right: 8.4%;
		position: relative;
	}

	#block02 .pic_2 .right_column h2{
		width: 55.2%;
		margin-top: 0.5em;
		margin-bottom: 0.8em;
		float:right;
	}

	#block02 p{
		font-size: 1em;
	}

	#block02 p.text_4{
		font-size: 1.6em;
	}

	#block02 .pic_2 .right_column p{
		text-align:right;
		clear: both;
	}

	#block02 .pic_3 .left_column{
		width:27.96%;
		font-size: 1.8em;
		position: absolute;
		left: 10%;
		top: 1.7em;
	}

	#block02 .pic_3 .left_column h2{
		width: 63.4%;
		margin-top: 1.1em;
		margin-bottom: 0.8em;
	}

	#block02 .pic_3 .right_column{
		width:59.32%;
		float:right;
		margin-right: 8.1%;
	}

	#block02 .pic_4{
		width: 72.88%;
		max-width: inherit;
	}

	#block02 .pic_1{
		-webkit-transition: opacity 0.3s ease-out 1.15s;
		-ms-transition: opacity 0.3s ease-out 1.15s;
		transition: opacity 0.3s ease-out 1.15s;
	}

	#block02 .pic_2{
		-webkit-transition: opacity 0.3s ease-out 1.35s;
		-ms-transition: opacity 0.3s ease-out 1.35s;
		transition: opacity 0.3s ease-out 1.35s;
	}

	#block02 .pic_3{
		-webkit-transition: opacity 0.3s ease-out 1.55s;
		-ms-transition: opacity 0.3s ease-out 1.55s;
		transition: opacity 0.3s ease-out 1.55s;
	}

	#block02 .pic_4{
		-webkit-transition: opacity 0.3s ease-out 1s;
		-ms-transition: opacity 0.3s ease-out 1s;
		transition: opacity 0.3s ease-out 1s;
	}

	#block02.show .pic_1,
	#block02.show .pic_2,
	#block02.show .pic_3,
	#block02.show .pic_4{
		-webkit-animation:none;
		animation:none;
		opacity:1;
	}

	#block03 .left_column p{
		font-size: 1.6em;
	}

	#block03 .left_column,
	#block03 .right_column{
		width: 100%;
		float: none;
		max-width: inherit;
		margin: 0 auto;
	}

	#block04 ul {
		margin-top: 4.5em;
	}

	#block04 li{
		float: none;
		width: 100%;
		font-size: 1.5em;
		padding: 1.3em 4.7%;
		padding-left: 6.7%;
		margin-bottom: 0.8em;
	}

	#block04 li .number{
		max-width: inherit;
		width: 7.55%;
	}

	#block04 p{
		font-size: 1.6em;
	}

	#block05 ul {
		margin-top: 4.4em;
	}

	#block05 li{
		max-width: inherit;
		width: 100%;
		float: none;
		margin: 0 auto;
		margin-bottom: 1.9em;

	}

	#block05 li:nth-child(1),
	#block05 li:nth-child(2),
	#block05 li:nth-child(3),
	#block05 li:nth-child(4),
	#block05 li:nth-child(5){
		background-image:none;
	}

	#block05 li:hover img{
		opacity:1;
	}

	#block05 p{
		font-size: 1.6em;
	}

	#block05 li p{
		width: 52.54%;
		left: 5%;top: 50%;
		font-size: 1.8em;
		letter-spacing: 0.1em;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}

	#block04 li.double{
		padding-left: 6.7%;
	}

	#block05 li p span {
		font-size: 0.5em;
	}

	#block05 li p.double{
		line-height: 1.5;
		top: 48%;
	}

	#modal{
		z-index:5;
	}

	#modal .inner{
		width: 100%;
		padding: 0 4.67%;
		box-sizing:border-box;
		-webkit-overflow-scrolling: touch;
		overflow-scrolling: touch;
		height: 100%;
		overflow: scroll ;
	}

	#modal.job_1 .inner{
		background-color: #95c855;
	}

	#modal.job_2 .inner{
		background-color: #f39c39;
	}

	#modal.job_3 .inner{
		background-color: #00b8ee;
	}

	#modal.job_4 .inner{
		background-color: #bc97c4;
	}

	#modal.job_5 .inner{
		background-color: #f19ca6;
	}

	#modal.member_1 .inner,
	#modal.member_2 .inner,
	#modal.member_3 .inner,
	#modal.member_4 .inner,
	#modal.member_5 .inner,
	#modal.member_6 .inner{
		background-color: #ffe500;
	}

	.btn_set{
		width: 100%;
		padding: 0 4.9%;
		box-sizing: border-box;
		margin: 0 auto;
	}
	.btn_set .btn{
		width: 100%;
		background-color: #ff4676;
		font-size: 3vw;
		letter-spacing: 0.3em;
		margin-bottom: 2.4vw;
		border-radius: 1vw;
	}

	.btn_set .btn:last-child{
		margin-bottom: 0;
	}

	.btn_set .btn a,
	.btn_set .btn a:link,
	.btn_set .btn a:visited{
		display:block;
		color:#fff;
		text-align:center;
		padding: 4.5vw 0;
		background-image:url(../images/index/sp_btn_pink.png);
		background-repeat:no-repeat;
		background-position:96% center;
		background-size:5%;
	}

	footer{
		padding-top: 10.5vw;
	}




}