@charset "utf-8";

/* 共通 */
img{
	max-width: 100%;
	width: auto;
}
.fadein{
	bottom: -50px;
	opacity: 0;
	transition: 1s;
}
.fadein.scrollin{
	bottom: 0;
	opacity: 1;
}
.swiper-container{
	z-index: 2;
}
.eng_til{
	margin-bottom: 5px;
	font-size: 20px;
	font-weight: bold;
	color: #3333CC;
	line-height: 1.4;
	text-align: center;
	font-family: "Arial", 'ヒラギノ角ゴシック', 'Hiragino Sans', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}
.main_til{
	margin-bottom: 40px;
	font-size: 30px;
	font-weight: bold;
	color: #3333CC;
	line-height: 1.4;
	text-align: center;
}
.main_til span{
	display: inline-block;
}
a.more_btn{
	position: relative;
	display: inline-block;
	width: 100%;
	padding: 16px;
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	border-radius: 10px;
	text-align: center;
}
a.more_btn:after{
	content: "";
	display: inline-block;
	position: absolute;
	width: 8px;
	height: 8px;
	right: 20px;
	top: 0;
	bottom: 0;
	margin: auto;
	border-right: 3px solid #fff;
	border-bottom: 3px solid #fff;
	transform: rotate(-45deg);
}
/* top_main */
.top_main{
	margin-top: 69px;
}
/* top_area */
.top_area{
	position: relative;
	background: url(/shared/images/top/main_bg.jpg) top center / auto 76%;
	overflow: hidden;
}
.top_area .title_box{
	position: relative;
	transition: opacity .5s;
	bottom: 0;
}
.top_area .main_title{
	position: relative;
	left: 0;
	right: 0;
	max-width: 1540px;
	width: 75%;
	padding: 28% 0 12%;
	margin: auto;
}
.top_area .main_title img{
	position: absolute;
	top: 30px;
    bottom: 0;
    right: 0;
    margin: auto;
	opacity: 0;
}
.top_area.on_load .main_title img{
	-webkit-animation: top_til 1.5s linear;
	animation: top_til 1.5s linear;
	opacity: 1;
}
@-webkit-keyframes top_til {
	0% {
		right: -120%;
	}
	100% {
		right: 0;
	}
}
@keyframes top_til {
	0% {
		right: -120%;
	}
	100% {
		right: 0;
	}
}
.top_area .main_title:before{
	content: "";
	display: inline-block;
	position: absolute;
	width: 80px;
	height: 80px;
	top: 30px;
	left: calc( 95% - 160px);
	bottom: 0;
	margin: auto;
	background: url(/shared/images/top/mosmos_left.png) center / contain no-repeat;
	transform: rotate(180deg) translateX(-80px) rotate(-180deg) rotateY(180deg);
	z-index: 5;
	opacity: 0;
}
.top_area.on_load .main_title:before{
	-webkit-animation: top_mos 3s linear;
	animation: top_mos 3s linear;
}
@-webkit-keyframes top_mos {
	0% {
		top: 30px;
		left: 120%;
		transform: rotate(0deg) translateX(-80px) rotate(0deg) rotateY(0deg);
		background: url(/shared/images/top/walk_02s.gif) center / contain no-repeat;
		opacity: 1;
	}
	47%{
		background: url(/shared/images/top/walk_02s.gif) center / contain no-repeat;
	}
	50% {
		left: 0;
		background: url(/shared/images/top/mosmos_left.png) center / contain no-repeat;
		transform: rotate(0deg) translateX(-80px) rotate(0deg) rotateY(0deg);
	}
	56%{
		left: 0;
		transform: rotate(0deg) translateX(-80px) rotate(0deg) rotateY(180deg);
	}
	87%{
		top: 30px;
		left: calc( 100% - 160px );
		transform: rotate(180deg) translateX(-80px) rotate(-180deg) rotateY(180deg);
	}
	93%{
		top: -20px;
		opacity: 1;
	}
	100% {
		top: 20px;
		left: 100%;
		opacity: 0;
	}
}
@keyframes top_mos {
	0% {
		top: 30px;
		left: 120%;
		transform: rotate(0deg) translateX(-80px) rotate(0deg) rotateY(0deg);
		background: url(/shared/images/top/walk_02s.gif) center / contain no-repeat;
		opacity: 1;
	}
	47%{
		background: url(/shared/images/top/walk_02s.gif) center / contain no-repeat;
	}
	50% {
		left: 0;
		background: url(/shared/images/top/mosmos_left.png) center / contain no-repeat;
		transform: rotate(0deg) translateX(-80px) rotate(0deg) rotateY(0deg);
	}
	56%{
		left: 0;
		transform: rotate(0deg) translateX(-80px) rotate(0deg) rotateY(180deg);
	}
	87%{
		top: 30px;
		left: calc( 100% - 160px );
		transform: rotate(180deg) translateX(-80px) rotate(-180deg) rotateY(180deg);
	}
	93%{
		top: -20px;
		opacity: 1;
	}
	100% {
		top: 20px;
		left: 100%;
		opacity: 0;
	}
}
.top_area .main_title_tomoni{
	position: absolute;
    display: block;
    max-width: 1540px;
    width: 75%;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    margin: 0 auto;
}
.top_area .main_title_tomoni img{
	position: absolute;
	top: 30px;
    bottom: 0;
    right: 0;
    margin: auto;
	opacity: 0;
}
.top_area.on_load .main_title_tomoni img{
	-webkit-animation: top_til_tomoni 3s linear;
	animation: top_til_tomoni 3s linear;
	opacity: 1;
}
@-webkit-keyframes top_til_tomoni {
	0% {
		opacity: 0;
	}
	87%{
		opacity: 0;
	}
	89%{
		opacity: 1;
	}
}
@keyframes top_til_tomoni {
	0% {
		opacity: 0;
	}
	87%{
		opacity: 0;
	}
	89%{
		opacity: 1;
	}
}
.top_area .swip_box{
	position: relative;
	z-index: 1;
}
.top_area .swip_box:before {
	content: "";
	display: inline-block;
	position: absolute;
	width: 100%;
	height: 50%;
	bottom: 0;
	background: #EEEEEE;
	z-index: 1;
}
.top_area .swip_box:after {
	content: "";
	display: inline-block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: -50%;
	background: url(/shared/images/top/main_gray.svg) center / cover;
	z-index: 1;
}

/* news_pb */
.news_area{
	padding-top: 40px;
	background: #EEE;
}
.news_area .news{
	max-width: 1200px;
	width: 90%;
	margin: 0 auto;
}
.news_area .m_til{
	margin-bottom: 10px;
	font-size: 30px;
	font-weight: bold;
	line-height: 1.6;
	text-align: center;
	color: #3333CC;
}
.news_area .pic_box{
	position: relative;
	padding: 7%;
	border: 5px solid;
	background: #FFF;
	z-index: 1;
}
.news_area .pic_box.news_pb{
	border-color: #F0F0FC;
}
.news_area .news_pb .group{
	margin-bottom: 30px;
}
.news_area .news_pb li{
	width: 100%;
}
.news_area .news_pb li a{
	position: relative;
	display: inline-block;
	width: 100%;
	padding: 15px 30px 15px 0;
	border-bottom: 1px solid #DDDDDD;
	color: #333;
}
.news_area .news_pb li a:after{
	content: "";
	display: inline-block;
	position: absolute;
	width: 10px;
	height: 10px;
	top: 0;
	right: 8px;
	bottom: 0;
	margin: auto;
	border-right: 2px solid #CCCCCC;
	border-bottom: 2px solid #CCCCCC;
	transform: rotate(-45deg);
}
.news_area .news_pb li a:hover:after{
	border-color: #3333CC;
}
.news_area .news_pb .news_flx .txt{
	flex: 1 1 auto;
}
.news_area .news_pb .news_flx .txt .day{
	margin-bottom: 6px;
	font-size: 14px;
	line-height: 1.4;
}
.news_area .news_pb .news_flx .txt .til{
	margin-bottom: 6px;
	font-size: 16px;
	font-weight: bold;
	color: #3333CC;
}
.news_area .news_pb .news_flx .img{
	position: relative;
}
.news_area .news_pb .news_flx .img img{
	max-width: 300px;
	width: 100%;
	margin-top: 15px;
}
.news_area .news_pb .more_btn{
	display: block;
	max-width: 360px;
	margin: 0 auto;
	background: #3333CC;
}
/* movie_area */
.movie_area{
	position: relative;
	padding: 70px 0 60px;
	background: #EEE;
}
.movie_area_in{
	position: relative;
	max-width: 1200px;
	width: 90%;
	margin: 0 auto;
	z-index: 1;
}
.movie_area .flx_box ul:before{
	content: "";
	display: inline-block;
	position: absolute;
	width: 105px;
	height: 105px;
	left: 20px;
	top: 0;
	background: url(/shared/images/top/mosmos01.png) center / contain no-repeat;
	transition: .3s;
}
.movie_area .flx_box ul.scrollin:before{
	top: -58px;
}
.movie_area .bk_ball li{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	opacity: 0.3;
	pointer-events: none;
}
.movie_area .bk_ball .bk_ball01{
	background: url(/shared/images/top/sphere100.png) top 20px left 1% / 100px 100px no-repeat,
	url(/shared/images/top/sphere100.png) bottom 90px right -2% / 100px 100px no-repeat;
}
.movie_area .bk_ball .bk_ball02{
	background: url(/shared/images/top/sphere150.png) top 370px right -1% / 150px 150px no-repeat,
	url(/shared/images/top/sphere150.png) bottom 0px left -2% / 150px 150px no-repeat;
}
.movie_area .bk_ball .bk_ball03{
	background: url(/shared/images/top/sphere200.png) top 177px left 11% / 180px 180px no-repeat,
	url(/shared/images/top/sphere200.png) bottom 100px right 12% / 180px 180px no-repeat;
}

/* recruit_area */
.recruit_area{
	padding-top: 50px;
}
.recruit_area .eng_til,
.recruit_area .main_til{
	color: #0055FF;
}
.recruit_area .recruit_area_in{
	padding-bottom: 80px;
	background: linear-gradient(180deg, rgba(275,275,275,1) 5%, rgba(237,243,255,1) 5%);
}
.recruit_area .flx_box{
	position: relative;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	flex-flow: wrap-reverse;
	max-width: 1760px;
	width: 90%;
	margin: 0 auto 40px;
}
.recruit_area .flx_box:before,
.recruit_area .flx_box:after{
	content: "";
	display: inline-block;
	position: absolute;
	width: 90px;
	height: 90px;
}
.recruit_area .flx_box:before{
	top: 0;
	left: 0;
	background: url(/shared/images/top/mosmos02.png) center / contain no-repeat;
	z-index: 0;
	opacity: 0;
	transition: top .3s, opacity .3s;
}
.recruit_area .flx_box.scrollin:before{
	top: -35px;
	opacity: 1;
}
.recruit_area .flx_box:after{
	bottom: 0;
	right: 16%;
	background: url(/shared/images/top/mosmos03.png) center / contain no-repeat;
	z-index: 1;
	opacity: 0;
	transition: bottom .3s, opacity .3s;
}
.recruit_area .flx_box.scrollin:after{
	bottom: -30px;
	opacity: 1;
}
.recruit_area .flx_box li{
	position: relative;
	flex: 0 0 30%;
	max-width: 320px;
	font-size: 0;
	box-shadow: 15px 15px 15px rgb(0 0 0 / 10%);
	border-radius: 10px;
	overflow: hidden;
	margin-right: 3%;
	margin-bottom: 15px;
}
.recruit_area .flx_box li:first-child{order: 4;background: #FF7800;}
.recruit_area .flx_box li:nth-child(2){order: 5;background: #11C29F;}
.recruit_area .flx_box li:nth-child(3){order: 1;background: #EC254C;}
.recruit_area .flx_box li:nth-child(4){order: 2;background: #A2C94D;}
.recruit_area .flx_box li:last-child{order: 3;background: #45BCD6;}

.recruit_area .flx_box li:nth-child(2),
.recruit_area .flx_box li:last-child{
	margin-right: 0;
}
.recruit_area .flx_box li:hover:first-child{background: #FF9232;}
.recruit_area .flx_box li:hover:nth-child(2){background: #40CEB2;}
.recruit_area .flx_box li:hover:nth-child(3){background: #EF506F;}
.recruit_area .flx_box li:hover:nth-child(4){background: #B4D370;}
.recruit_area .flx_box li:hover:last-child{background: #69C9DD;}
.recruit_area .flx_box li a:hover{
	opacity: 1;
}
.recruit_area .flx_box li a{
	display: block;
    position: relative;
    padding-top: 133%;
}
.recruit_area .flx_box li a img{
	position: absolute;
    top: 0;
	left: 0;
}
.recruit_area .txt_box{
	max-width: 480px;
	width: 90%;
	margin: 0 auto;
}
.recruit_area .txt_box .exp{
	margin-bottom: 20px;
	line-height: 2;
}
.recruit_area .txt_box .more_btn{
	background: #0055FF;
}

/* nc_area */
.ncmachine_area{
	padding: 80px 0 60px;
	background-image: url(/images/2dnc_bg_sp.jpg);
	background-size: cover;
	background-position: top center;
}
.ncmachine_area .ncmachine_box{
	width: 90%;
	margin: 0 auto;
	padding: 0 calc(5px + 6.3%);
	background-color: #FFFFFF;
}
.ncmachine_area .ncmachine_box .img_box{
	max-width: 480px;
	margin: 0 auto;
	padding-bottom: 20px;
}
.ncmachine_area .ncmachine_box .img_box img{
	margin-top: -35px;
}
.ncmachine_area .ncmachine_box .txt_box{
	max-width: 480px;
	margin: 0 auto;
	padding-bottom: 50px;
}
.ncmachine_area .ncmachine_box .txt_box .ncmachine_til{
	margin-bottom: 15px;
	color: #11C29F;
	font-size: 22px;
	font-weight: bold;
	text-align: center;
}
.ncmachine_area .ncmachine_box .txt_box .ncmachine_txt{
	margin-bottom: 20px;
	font-size: 16px;
	line-height: 2;
}
.ncmachine_area .ncmachine_box .txt_box .contact_btn{
	position: relative;
    display: inline-block;
	width: 100%;
    padding: 16px;
	background-color: #11C29F;
	color: #FFFFFF;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	border-radius: 10px;
}
.ncmachine_area .ncmachine_box .txt_box .contact_btn:after{
	content: "";
	display: inline-block;
	position: absolute;
	width: 10px;
	height: 10px;
	top: 0;
	right: 20px;
	bottom: 0;
	margin: auto;
	border-right: 3px solid #FFFFFF;
	border-bottom: 3px solid #FFFFFF;
	transform: rotate(-45deg);
}

/* mosmos_area */
.mosmos_area{
	padding: 60px 0 0;
}
.mosmos_area_in{
	position: relative;
	overflow: hidden;
}
.mosmos_area_in:before{
	content: "";
	display: inline-block;
	position: absolute;
	top: -50%;
	bottom: 0;
	height:	83px;
	width: 100%;
	min-width: 1099px;
	margin: auto;
	background: url(/shared/images/top/bk_mosmos.png) center / contain repeat-x;
	-webkit-animation: bgroop 25s linear infinite;
	animation: bgroop 25s linear infinite;
	z-index: -1;
}
.mosmos_area .eng_til,
.mosmos_area .main_til{
	width: 90%;
	margin:	0 auto;
	color: #44BCD5;
}
.mosmos_area .flx_box{
	max-width: 1150px;
	width: 90%;
	margin: 0 auto;
	padding: 0 0 30px;
}
.mosmos_area .flx_box .img_box{
	position: relative;
	max-width: 480px;
	width: 70%;
	margin: 0 auto;
	top: 0;
	padding-top: 69%;
}
.mosmos_area .flx_box .img_box img{
	position: absolute;
	top: 0;
	-webkit-animation: mosroop 3s linear infinite;
	animation: mosroop 3s linear infinite;
}

.mosmos_area .flx_box .txt_box{
	flex: 0 0 40%;
	max-width: 480px;
	margin: 0 auto;
}
.mosmos_area .txt_box .sub_til{
	margin-bottom: 5px;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.4;
	color: #44BCD5;
}
.mosmos_area .txt_box .name{
	margin-bottom: 5px;
	color: #44BCD5;
}
.mosmos_area .txt_box .name svg{
	height: 47px;
    width: 197px;
	fill: #44BCD5;
}
.mosmos_area .txt_box .exp{
	margin-bottom: 20px;
	line-height: 2;
}
.mosmos_area .txt_box .exp span{
	display: inline-block;
}
.mosmos_area .txt_box .more_btn{
	background: #44BCD5;
}

/* insta_area */
.insta_area{
	padding: 60px 0 10px;
}
.insta_area .m_til{
	margin-bottom: 10px;
	font-size: 30px;
	font-weight: bold;
	line-height: 1.6;
	text-align: center;
	color: #EC254C;
}
.insta_area .insta{
	width: 90%;
	max-width: 1200px;
	margin: 0 auto 60px;
}
.insta_area .pic_box{
	padding: 7%;
	border: 5px solid;
	border-color: #FEEFF2;
}
.insta_area .group{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	max-width: 720px;
	margin: 0 auto 40px;
}
.insta_area .group li{
	flex: 0 0 48%;
	margin-bottom: 8%;
}
.insta_area .group li:nth-child(3),
.insta_area .group li:nth-child(4){
	margin-bottom: 0;
}
.insta_area .group li:last-child,
.insta_area .group li:nth-child(5){
	display: none;
}
.insta_area .group li a{
	display: block;
	position: relative;
	padding-top: 100%;
	overflow: hidden;
	border-radius: 10px;
	box-shadow: 5px 5px #feeff2;
}
.insta_area .group li img{
	position: absolute;
	top: -100%;
	right: -100%;
	left: -100%;
	bottom: -100%;
	margin: auto;
	height: 100%;
	max-width: initial;
}
.insta_area .group li.y_pic img{
	max-width: 100%;
	height: auto;
}
.insta_area .more_btn{
	display: block;
	max-width: 360px;
	margin: 0 auto;
	background: #EC254C;
}
/* mosmos_walk */
.mosmos_walk{
	position: relative;
	padding-top: 58px;
	margin-bottom: -9px;
	z-index: 100;
	overflow: hidden;
	z-index: 1;
}
.mosmos_walk img{
	position: absolute;
	bottom: -4.5px;
	right: -50px;
	max-width: 70px;
	-webkit-animation: moswalk 30s linear infinite;
	animation: moswalk 30s linear infinite;
}
@-webkit-keyframes moswalk {
	0% {
		right: -25px;
	}
	49%{
		transform: rotateY(0deg);
		bottom: -4.5px;
	}
	49.9%{
		transform: rotateY(180deg);
		bottom: 0;
	}
	50%{
		bottom: -4.5px;
		right: calc( 100% - 40px);
	}
	99.9% {
		transform: rotateY(180deg);
		bottom: -4.5px;
	}
	100% {
		transform: rotateY(0deg);
		right: -25px;
		bottom: 0;
	}
}
@keyframes moswalk {
	0% {
		right: -25px;
	}
	49%{
		transform: rotateY(0deg);
		bottom: -4.5px;
	}
	49.9%{
		transform: rotateY(180deg);
		bottom: 0;
	}
	50%{
		bottom: -4.5px;
		right: calc( 100% - 40px);
	}
	99.9% {
		transform: rotateY(180deg);
		bottom: -4.5px;
	}
	100% {
		transform: rotateY(0deg);
		right: -25px;
		bottom: 0;
	}
}

@media screen and (min-width:480px) {
	/* top_area */
	.top_area{
		background: url(/shared/images/top/main_bg.jpg) top center / auto 84%;
	}
	.top_area .main_title:before{
		top: 0px;
	}
	@-webkit-keyframes top_mos {
		0% {
			top: 0;
			left: 120%;
			transform: rotate(0deg) translateX(-80px) rotate(0deg) rotateY(0deg);
			background: url(/shared/images/top/walk_02s.gif) center / contain no-repeat;
			opacity: 1;
		}
		47%{
			background: url(/shared/images/top/walk_02s.gif) center / contain no-repeat;
		}
		50% {
			left: 0;
			background: url(/shared/images/top/mosmos_left.png) center / contain no-repeat;
			transform: rotate(0deg) translateX(-80px) rotate(0deg) rotateY(0deg);
		}
		56% {
			left: 0;
			transform: rotate(0deg) translateX(-80px) rotate(0deg) rotateY(180deg);
		}
		87%{
			top: 0;
			left: calc( 100% - 160px );
			transform: rotate(180deg) translateX(-80px) rotate(-180deg) rotateY(180deg);
		}
		93%{
			top: -50px;
			opacity: 1;
		}
		100% {
			top: -10px;
			left: 100%;
			opacity: 0;
		}
	}
	@keyframes top_mos {
		0% {
			top: 0;
			left: 120%;
			transform: rotate(0deg) translateX(-80px) rotate(0deg) rotateY(0deg);
			background: url(/shared/images/top/walk_02s.gif) center / contain no-repeat;
			opacity: 1;
		}
		47%{
			background: url(/shared/images/top/walk_02s.gif) center / contain no-repeat;
		}
		50% {
			left: 0;
			background: url(/shared/images/top/mosmos_left.png) center / contain no-repeat;
			transform: rotate(0deg) translateX(-80px) rotate(0deg) rotateY(0deg);
		}
		56% {
			left: 0;
			transform: rotate(0deg) translateX(-80px) rotate(0deg) rotateY(180deg);
		}
		87%{
			top: 0;
			left: calc( 100% - 160px );
			transform: rotate(180deg) translateX(-80px) rotate(-180deg) rotateY(180deg);
		}
		93%{
			top: -50px;
			opacity: 1;
		}
		100% {
			top: -10px;
			left: 100%;
			opacity: 0;
		}
	}
	.top_area .main_title img,
	.top_area .main_title_tomoni img{
		top: 0;
	}
	.top_area .mos_img:after{
		content: "";
		display: inline-block;
		position: absolute;
		width: 33%;
		height: 101%;
		right: 0;
		bottom: 40%;
		background: url(/shared/images/top/main_mosmos.png) center / contain no-repeat;
		transform: rotateZ(0deg);
		z-index: 0;
		opacity: 0;
	}
	.top_area.on_load .mos_img:after{
		-webkit-animation: main_mos 4s linear;
		animation: main_mos 4s linear;
		opacity: 1;
	}
	@-webkit-keyframes main_mos {
		0% {
			right: -100%;
			bottom: 0%;
			transform: rotateZ(90deg);
		}
		85%{
			right: -100%;
			bottom: 0%;
			transform: rotateZ(90deg);
		}
		100% {
			right: 0;
			bottom: 40%;
			transform: rotateZ(0deg);
		}
	}
	@keyframes main_mos {
		0% {
			right: -100%;
			bottom: 0%;
			transform: rotateZ(90deg);
		}
		85%{
			right: -100%;
			bottom: 0%;
			transform: rotateZ(90deg);
		}
		100% {
			right: 0;
			bottom: 40%;
			transform: rotateZ(0deg);
		}
	}
	/* mosmos_area */
	.mosmos_area .flx_box .img_box{
		min-height: 300px;
		padding-top: 59%;
	}
}
@media screen and (min-width:960px) {
	/* 共通 */
	.eng_til{
		margin-bottom: 15px;
		font-size: 24px;
	}
	.main_til{
		margin-bottom: 75px;
		font-size: 56px;
	}
	/* top_main */
	.top_main{
		margin-top: 0;
		height: 114%;
	}
	.top_area .main_title{
		padding: 20% 0 14%;
	}
	.top_area .mos_img:after{
		width: 30%;
		height: 120%;
	}
	.top_area.on_load .mos_img:after{
		-webkit-animation: main_mos 6s linear;
		animation: main_mos 6s linear;
	}
	.top_area.on_load .main_title img{
		-webkit-animation: top_til 2.5s linear;
		animation: top_til 2.5s linear;
	}
	.top_area .main_title:before{
		width: 150px;
		height: 150px;
		top: -150px;
		transform: rotate(230deg) translateX(-100px) rotate(-230deg) rotateY(180deg);
	}
	.top_area.on_load .main_title:before{
		-webkit-animation: top_mos 5s linear;
		animation: top_mos 5s linear;
	}
	@-webkit-keyframes top_mos {
		0% {
			top: -150px;
			left: calc( 120% - 100px);
			transform: rotate(-50deg) translateX(-100px) rotate(50deg) rotateY(0deg);
			background: url(/shared/images/top/walk_02s.gif) center / contain no-repeat;
			opacity: 1;
		}
		47%{
			background: url(/shared/images/top/walk_02s.gif) center / contain no-repeat;
		}
		50%{
			left: calc( 0% - 100px);
			background: url(/shared/images/top/mosmos_left.png) center / contain no-repeat;
			transform: rotate(-50deg) translateX(-100px) rotate(50deg) rotateY(0deg);
		}
		56% {
			left: calc( 0% - 100px);
			transform: rotate(-50deg) translateX(-100px) rotate(50deg) rotateY(180deg);
		}
		87%{
			top: -150px;
			left: calc(100% - 200px);
			transform: rotate(230deg) translateX(-100px) rotate(-230deg) rotateY(180deg);
		}
		93%{
			top: -200px;
			opacity: 1;
		}
		100% {
			top: -140px;
			left: 120%;
			opacity: 0;
		}
	}
	@keyframes top_mos {
		0% {
			top: -150px;
			left: calc( 120% - 100px);
			transform: rotate(-50deg) translateX(-100px) rotate(50deg) rotateY(0deg);
			background: url(/shared/images/top/walk_02s.gif) center / contain no-repeat;
			opacity: 1;
		}
		47%{
			background: url(/shared/images/top/walk_02s.gif) center / contain no-repeat;
		}
		50%{
			left: calc( 0% - 100px);
			background: url(/shared/images/top/mosmos_left.png) center / contain no-repeat;
			transform: rotate(-50deg) translateX(-100px) rotate(50deg) rotateY(0deg);
		}
		56% {
			left: calc( 0% - 100px);
			transform: rotate(-50deg) translateX(-100px) rotate(50deg) rotateY(180deg);
		}
		87%{
			top: -150px;
			left: calc(100% - 200px);
			transform: rotate(230deg) translateX(-100px) rotate(-230deg) rotateY(180deg);
		}
		93%{
			top: -200px;
			opacity: 1;
		}
		100% {
			top: -140px;
			left: 120%;
			opacity: 0;
		}
	}
	.top_area.on_load .main_title_tomoni img{
		-webkit-animation: top_til_tomoni 5s linear;
		animation: top_til_tomoni 5s linear;
	}
	
	/* news_area */
	.news_area{
		padding-top: 70px;
	}
	.news_area .m_til{
		margin-bottom: 20px;
		font-size: 40px;
	}
	.news_area .pic_box{
		padding: 50px 5% 60px;
	}
	.news_area .news_pb .news_flx{
		display: flex;
	}
	.news_area .news_pb li a{
		padding: 15px 70px 15px 10px;
	}
	.news_area .news_pb li a:after{
		width: 16px;
		height: 16px;
		right: 23px;
		border-right: 6px solid #CCCCCC;
		border-bottom: 6px solid #CCCCCC;
	}
	.news_area .news_pb .news_flx .img{
		flex: 0 0 100px;
		margin-left: 15px;
		margin-top: 0;
		padding-top: 100px;
		height: 100px;
		overflow: hidden;
		background: #EEE;
	}
	.news_area .news_pb .news_flx .img img{
		position: absolute;
		top: -100%;
		right: -100%;
		left: -100%;
		bottom: -100%;
		margin: auto;
		max-width: initial;
		width: auto;
		height: 100%;
	}
	/* movie_area */
	.movie_area{
		padding: 125px 0 160px;
		background: linear-gradient(180deg, rgba(238,238,238,1) 45%, rgba(275,275,275,1) 45%);
	}
	.movie_area .flx_box ul:before{
		width: 175px;
		height: 175px;
		left: 40px;
		top: 0;
	}
	.movie_area .flx_box ul.scrollin:before{
		top: -110px;
	}
	
	.movie_area .bk_ball .bk_ball01{
		background: url(/shared/images/top/sphere100.png) top 180px left 1% / 100px 100px no-repeat,
		url(/shared/images/top/sphere100.png) bottom 220px right -2% / 100px 100px no-repeat;
	}
	.movie_area .bk_ball .bk_ball02{
		background: url(/shared/images/top/sphere150.png) top 110px right -1% / 150px 150px no-repeat,
		url(/shared/images/top/sphere150.png) bottom 140px left -2% / 150px 150px no-repeat;
	}
	.movie_area .bk_ball .bk_ball03{
		background: url(/shared/images/top/sphere200.png) top 327px left 11% / 200px 200px no-repeat,
		url(/shared/images/top/sphere200.png) top 385px right 12% / 200px 200px no-repeat;
	}
	
	/* recruit_area */
	.recruit_area{
		padding: 0;
	}
	.recruit_area .recruit_area_in{
		padding-bottom: 120px;
	}
	.recruit_area .flx_box{
		justify-content: space-between;
	}
	.recruit_area .flx_box li{
		flex: 0 0 19%;
		margin: 0;
	}
	.recruit_area .flx_box{
		margin: 0 auto 80px;
	}
	.recruit_area .flx_box:before{
		left: 15%;
	}
	.recruit_area .flx_box:before,
	.recruit_area .flx_box:after{
		width: 180px;
		height: 180px;
	}
	.recruit_area .flx_box.scrollin:after{
		bottom: -70px;
	}
	.recruit_area .flx_box.scrollin:before{
		top: -125px;
	}
	.recruit_area .txt_box .exp{
		margin-bottom: 40px;
		text-align: center;
	}
	.recruit_area .flx_box li:first-child{order: 1;}
	.recruit_area .flx_box li:nth-child(2){order: 2;}
	.recruit_area .flx_box li:nth-child(3){order: 3;}
	.recruit_area .flx_box li:nth-child(4){order: 4;}
	.recruit_area .flx_box li:last-child{order: 5;}

	/* ncmachine_area */
	.ncmachine_area{
		padding: 120px 0;
		background-image: url(/images/2dnc_bg.jpg);
	}
	.ncmachine_area .ncmachine_box{
		display: flex;
		max-width: 1120px;
		padding: 0;
	}
	.ncmachine_area .ncmachine_box .img_box{
		position: relative;
		max-width: none;
		width: 50%;
		margin: 0px 40px 40px 40px;
		padding-bottom: 0;
	}
	.ncmachine_area .ncmachine_box .img_box img{
		position: absolute;
		bottom: 50%;
		transform: translateY(45%);
	}
	.ncmachine_area .ncmachine_box .txt_box{
		max-width: none;
		width: 50%;
		margin: 60px 40px 50px 40px;
		padding-bottom: 0;
	}
	.ncmachine_area .ncmachine_box .txt_box .ncmachine_til{
		text-align: left;
	}
	/* mosmos_area */
	.mosmos_area{
		padding: 160px 0 0;
	}
	.mosmos_area_in:before{
		top: 0;
		height:	143px;
		min-width: 1892.5px;
	}
	.mosmos_area_in{
		margin: 30px 0;
	}
	.mosmos_area .flx_box{
		display: flex;
		justify-content: space-between;
		flex-flow: row-reverse;
		margin: 0 auto;
		padding: 65px 0 45px;
	}
	.mosmos_area_in:after{
		content: "";
		display: inline-block;
		position: absolute;
		height: 100%;
		width: 67%;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		background: rgba(236,248,251,.6);
		border-radius: 60px 0 0 60px;
		z-index: -1;
	}
	.mosmos_area .flx_box .img_box{
		flex: 0 0 50%;
		max-width: 100%;
		margin-right: 0;
		padding-top: 47%;
	}
	.mosmos_area .flx_box .img_box img{
		-webkit-animation: mosroop 5s linear infinite;
		animation: mosroop 5s linear infinite;
	}
	.mosmos_area .flx_box .txt_box{
		flex: 0 0 40%;
		margin: 0;
	}
	.mosmos_area .txt_box .sub_til{
		margin-bottom: 15px;
		font-size: 20px;
	}
	.mosmos_area .txt_box .name{
		margin-bottom: 15px;
	}
	.mosmos_area .txt_box .name svg{
		height: 72px;
		width: 252px;
	}
	.mosmos_area .txt_box .exp{
		margin-bottom: 40px;
	}
	/* insta_area */
	.insta_area{
		padding: 120px 0 20px;
	}
	.insta_area .m_til{
		margin-bottom: 20px;
		font-size: 40px;
	}
	.insta_area .pic_box {
		padding: 60px;
		border-width: 10px;
	}
	.insta_area .group li{
		flex: 0 0 30%;
		margin-bottom: 8%;
	}
	.insta_area .group li a{
		box-shadow: 10px 10px #feeff2;
	}
	.insta_area .group li:last-child,
	.insta_area .group li:nth-child(5){
		display: block;
	}
	.insta_area .group li:nth-child(4){
		margin-bottom: 0;
	}
	/* mosmos_walk */
	.mosmos_walk{
		padding-top: 116px;
	}
	.mosmos_walk img{
		bottom: -9px;
		max-width: 140px;
		-webkit-animation: moswalk 60s linear infinite;
		animation: moswalk 60s linear infinite;
	}
	@-webkit-keyframes moswalk {
		0% {
			right: -50px;
		}
		49%{
			transform: rotateY(0deg);
			bottom: -9px;
		}
		49.5%{
			transform: rotateY(180deg);
			bottom: 0;
		}
		50%{
			bottom: -9px;
			right: calc( 100% - 80px);
		}
		99.5% {
			transform: rotateY(180deg);
			bottom: -9px;
		}
		100% {
			transform: rotateY(0deg);
			right: -50px;
			bottom: 0;
		}
	}
	@keyframes moswalk {
		0% {
			right: -50px;
		}
		49%{
			transform: rotateY(0deg);
			bottom: -9px;
		}
		49.5%{
			transform: rotateY(180deg);
			bottom: 0;
		}
		50%{
			bottom: -9px;
			right: calc( 100% - 80px);
		}
		99.5% {
			transform: rotateY(180deg);
			bottom: -9px;
		}
		100% {
			transform: rotateY(0deg);
			right: -50px;
			bottom: 0;
		}
	}
}
@media screen and (min-width:1200px) {
	.top_area .mos_img:after{
		width: 27%;
		height: 139%;
	}
}