@charset 'UTF-8';
/*!
 * pagepiling.js 1.5.4
 *
 * https://github.com/alvarotrigo/pagePiling.js
 * @license MIT licensed
 *
 * Copyright (C) 2016 alvarotrigo.com - A project by Alvaro Trigo
 */
html, body {
	overflow:hidden;
	margin:0;
	padding:0;

	/*Avoid flicker on slides transitions for mobile phones #336 */
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.pp-section {
	height:100%;
	position:absolute;
	width:100%;
}
.pp-easing {
	-webkit-transition: all 1000ms cubic-bezier(0.550, 0.085, 0.000, 0.990);
	-moz-transition: all 1000ms cubic-bezier(0.550, 0.085, 0.000, 0.990);
	-o-transition: all 1000ms cubic-bezier(0.550, 0.085, 0.000, 0.990);
	transition: all 1000ms cubic-bezier(0.550, 0.085, 0.000, 0.990);
	/* custom */
	-webkit-transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990);
	-moz-transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990);
	-o-transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990);
	transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990);
	/* custom */
}
#pp-nav {
	position: fixed;
	z-index: 50;
	margin-top: -32px;
	top: 50%;
	opacity: 1;
}
#pp-nav.right {
	right: 40px;
}
#pp-nav.left {
	left: 17px;
}
.pp-section.pp-table{
	display: table;
}
.pp-tableCell {
	display: table-cell;
	vertical-align: middle;
	width: 100%;
	height: 100%;
}
.pp-slidesNav{
	position: absolute;
	z-index: 4;
	left: 50%;
	opacity: 1;
}
.pp-slidesNav.bottom {
	bottom: 17px;
}
.pp-slidesNav.top {
	top: 17px;
}
#pp-nav ul,
.pp-slidesNav ul {
	margin: 0;
	padding: 0;
}
#pp-nav li,
.pp-slidesNav li {
	display: block;
	width: 6px;
	height: 20px;
	margin: 3px 0;
	position:relative;
}
.pp-slidesNav li {
	display: inline-block;
}
#pp-nav li a,
.pp-slidesNav li a {
	display: block;
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	cursor: pointer;
	text-decoration: none;
}
#pp-nav li .active span,
.pp-slidesNav .active span {
	background: rgba(255, 255, 255, 1);
}
#pp-nav span,
.pp-slidesNav span {
	top: 7px;
	left: 0px;
	width: 6px;
	height: 6px;
	background: rgba(255, 255, 255, .2);
	border-radius: 50%;
	position: absolute;
	z-index: 1;
}
.pp-tooltip {
	position: absolute;
	top: 0;
	color: #fff;
	font-size:12px;
	line-height:20px;
	font-family: "Panton-Bold";
	white-space: nowrap;
	max-width: 220px;
}
.pp-tooltip.right {
	right: 15px;
}
.pp-tooltip.left {
	left: 15px;
}
.pp-scrollable{
	overflow-y: scroll;
	height: 100%;
}

#pp-menu{
	position: fixed;
	z-index: 50;
	margin-top: -32px;
	top: 50%;
	right: 40px;
	opacity: 1;
}
#pp-menu ul{
	margin: 0;
	padding: 0;
}
#pp-menu li{
	display: block;
	width: 6px;
	height: 20px;
	margin: 3px 0;
	position:relative;
}
#pp-menu li a{
	display: block;
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	cursor: pointer;
	text-decoration: none;
}
#pp-menu a:after{
	content: "";
	position: absolute;
	top: 7px;
	left: 0px;
	width: 6px;
	height: 6px;
	background: rgba(255, 255, 255, .2);
	border-radius: 50%;
	z-index: 1;
}
#pp-menu li a:hover:after,
#pp-menu li.active a:after{
	background: rgba(255, 255, 255, 1);
}
#pp-menu span{
	position: absolute;
	top: 0;
	right: 15px;
	color: #fff;
	font-size:12px;
	line-height:20px;
	font-family: "Panton-Bold";
	white-space: nowrap;
	max-width: 220px;
	display: none;
}
#pp-menu a:hover span{
	display: block;
}

/*------------------------------------------------------------
	初期設定
------------------------------------------------------------*/
html, body{
	background-color: transparent;
}
body, .home-wrap{
	width: 100%;
	height: 100%;
}

/*------------------------------------------------------------
	ローディング アニメーション
------------------------------------------------------------*/
#home-loader-wrap{
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(11, 49, 143, 1);
	z-index: 10;
}
#home-loader {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 80px;
	height: 80px;
	margin: -40px 0 0 -40px;
	font-size: 10px;
	text-indent: -9999em;
	border-radius: 50%;
	background: #ffffff;
	background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
	background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
	background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
	background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
	background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
	-webkit-animation: load3 1.4s infinite linear;
	animation: load3 1.4s infinite linear;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
}
#home-loader:before {
	width: 50%;
	height: 50%;
	background: #ffffff;
	border-radius: 100% 0 0 0;
	position: absolute;
	top: 0;
	left: 0;
	content: '';
}
#home-loader:after {
	background: rgba(11, 49, 143, 1);
	width: 76px;
	height: 76px;
	border-radius: 50%;
	content: '';
	margin: auto;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}
@-webkit-keyframes load3 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@keyframes load3 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

/* HOME用ヘッダー＆フッター＆ページネーション
----------------------------------*/
#home-header, #home-footer, #pp-menu{
	-moz-transition: all 0.2s ease-in-out 0.9s;
	-o-transition: all 0.2s ease-in-out 0.9s;
	-webkit-transition: all 0.2s ease-in-out 0.9s;
	transition: all 0.2s ease-in-out 0.9s;
}
/*  HOME用ヘッダー */
#home-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	min-width: 1000px;
	height: 125px;
	z-index: 50;
}
	.loading #home-header{ top: -125px; }
.home-header-inner {
	position: absolute;
	left: 50%;
	top: 75px;
	margin-left: -50%;
	padding-left: 80px;
}
@media screen and (max-width:1160px) { 
	.home-header-inner {
		margin-left: -500px;
		padding-left: 0;
	}
}
.home-header-logo {
	float: left;
	padding-top: 5px;
}
#home-header #home-smp-menu-btn{
	display: none;
}
#home-header .globalnavi li {
	float: left;
	margin-left: 20px;
	font-size: 12px;
	line-height: normal;
	letter-spacing: .2em;
	color: #fff;
	font-family: "Panton-Bold";
}
#home-header .globalnavi li a {
	display: inline-block;
	padding-bottom: 5px;
	color: #fff;
	text-decoration: none;
}
#home-header .globalnavi li a:hover{
	border-bottom: 2px solid #fff;
}

/*  HOME用フッター */
#home-footer {
	position: fixed;
	bottom: 0;
	left: 50%;
	width: 100%;
	margin-left: -50%;
	z-index: 50;
	font-size: 12px;
	line-height: 12px;
}
	.loading #home-footer{ bottom: -100px; }
#home-footer .site-footer-sns {
	position: absolute;
	right: 80px;
	top: -101px;
}
#home-footer .site-footer-copyright{
	position: absolute;
	left: 80px;
	top: -93px;
}
#home-footer .site-footer-copyright .copyright{
	float: left;
	margin-right: 15px;
	padding-right: 15px;
	border-right: 1px solid #fff;
}
#home-footer .site-footer-copyright a{
	font-size: 10px;
}
@media screen and (max-width:1160px) { 
	#home-footer {
		width: 1000px;
		margin-left: -500px;
	}
	#home-footer .site-footer-copyright{
		left: 0;
	}
}
#home-footer, #home-footer a{
	color: #fff;
}
#home-footer .icon_scrolldown{
	position: absolute;
	left: 50%;
	top: -93px;
	font-size: 12px;
	line-height: 12px;
	letter-spacing: .4em;
	transform: translate(-50%,0);
}
#home-footer .icon_scrolldown:after{
	content: "";
	position: absolute;
	left: 50%;
	top: 25px;
	display: block;
	width: 15px;
	height: 66px;
	background: url(../img/home/attention_scrolldown.png) no-repeat;
	transform: translate(-50%,0);
	animation: scrolldown 1.5s steps(26) 0s forwards infinite;
}
	@keyframes scrolldown {
		from { background-position: 0 0; }
		to   { background-position: -390px 0; }
	}

/*  HOME用ページネーション */
.loading #pp-menu{ right: -100px; }

/*------------------------------------------------------------
	HOME レイアウト
------------------------------------------------------------*/
.panel{
	width: 100%;
	height: 100%;
	color: #fff;
	text-align: left;
	transform: translate3d(0px, 0px, 0px) !important;
}
	.panel.al-l{ text-align: left; }
	.panel.al-r{ text-align: right; }

.panel-wrap {
	position: absolute;
	top :50%;
	width: 100%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
.panel-inner {
	width: 100%;
	padding: 0 80px;
	margin: 0 auto;
	position: relative;
}
@media screen and (max-width:1160px) { 
	.panel-inner {
		width: 1000px;
		padding: 0;
	}
}
.panel-inner .lead{
	letter-spacing: 0.18em;
}
.panel-inner a.btn-w{
	margin-top: 37px;
}
.panel-inner .photo{
	position: absolute;
	top: 0;
}
.panel-inner .photo img{
	position: relative;
	z-index: 10;
}
.panel-inner .photo:after{
	content: "";
	position: absolute;
	left: 20px;
	top: 20px;
	display: block;
	width: 100%;
	height: 100%;
	background-color: rgba(11, 49, 143, .9);
}
.al-l .panel-inner .photo{ right: 80px; }
.al-r .panel-inner .photo{ left: 80px; }

.section-header{
	margin-bottom: 32px;
}
h1.section-title{
	padding-bottom: 34px;
	background: url(../img/home/icon_hometitle_bg_l.png) no-repeat left bottom;
	color: #fff;
}
.panel.al-l h1.section-title{
	background: url(../img/home/icon_hometitle_bg_l.png) no-repeat left bottom;
}
.panel.al-r h1.section-title{
	background: url(../img/home/icon_hometitle_bg_r.png) no-repeat right bottom;
}

h1.section-title span.title-en{
	display: block;
	margin-left: -0.05em;
	margin-bottom: 23px;
	letter-spacing: 0.065em;
	font-size: 80px;
	line-height: 62px;
	font-family: 'Panton-Bold';
}
h1.section-title span.title-ja {
	display: block;
	letter-spacing: 0.15em;
	font-size: 16px;
	font-family: "noto_sans_cjk_jp_r";
}

body.scene1 #top,
body.scene2 #product,
body.scene2 #company.en_mode,
body.scene3 #recruit,
body.scene4 #company{
	z-index: 10 !important;
}

/* 背景 動画
----------------------------------*/
#home-bg{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	z-index: -1;
	background-color: #0b318f;
}
#home-bg video{
	width: auto;
	height: auto;
	min-width: 100%;
	min-height: 100%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}
/* 背景 座布団
----------------------------------*/
#bgbox{
	position: absolute;
	top: 0;
	width: 0;
	height: 100%;
	background-color: rgba(11, 49, 143, .5);
	z-index: 10;
}

/* HOME-TOP
----------------------------------*/
#top .section-header{
	margin-bottom: 37px;
}
#top #sign{
	display: block;
	width: 870px;
	height: 113px;
	background-image: url(../img/home/home_sign.png);
	background-repeat: no-repeat;
	background-position: 0 bottom;
	text-indent: -9999px;
}

#top #sign_en{
	display: block;
	width: 676px;
	height: 113px;
	background-image: url(../img/home/home_sign_en.png);
	background-repeat: no-repeat;
	background-position: 0 bottom;
	text-indent: -9999px;
}

.ready #top .anim1{
	opacity: 1 !important;
	-webkit-transform: translate(0, 0) !important;
	transform: translate(0, 0) !important;
	-moz-transition: none;
	-o-transition: none;
	-webkit-transition: none;
	transition: none;
}
.ready h1.section-title{
	background: none 0 bottom !important;
}
.ready #sign{
	background-position: 0 0 !important;
	-webkit-animation: sign 1s steps(49) .5s forwards;
	animation: sign 1s steps(49) .5s forwards;
}
	@keyframes sign {
		from { background-position: 0 0; }
		to   { background-position: 0 -5537px; }
	}
.ready #sign_en{
	background-position: 0 0 !important;
	-webkit-animation: sign_en 1s steps(49) .5s forwards;
	animation: sign_en 1s steps(49) .5s forwards;
}
	@keyframes sign_en {
		from { background-position: 0 0; }
		to   { background-position: 0 -5537px; }
	}
#top h2{
	margin-bottom: 5px;
	color: #fff;
	font-size: 26px;
	font-family: "noto_sans_cjk_jp_m";
	font-weight:  normal;
}

/* HOME-NEWS＆クリーチャーズガレージ
----------------------------------*/
.panel#news{
	color: inherit;
	background-color: #fff;
}
#news{
	position: relative;
	padding-top: 120px;
	z-index: 90 !important;
}
#news.en_mode_news{
	padding-top: 0px;
}
#news .inner{
	width: 100%;
	max-width: 1366px;
	margin: 0 auto;
	padding: 0 80px;
}
@media screen and (max-width:1160px) { 
	#news .inner{
		width: 1000px;;
		margin: 0 auto;
		padding: 0;
	}
}
#news .section-header{
	position: relative;
	margin-bottom: 32px;
}
#news .section-header .btn-va{
	position: absolute;
	right: 0;
	bottom: 0;
}
#news .section-header h1{
	color: #0b318f;
	font-size: 48px;
	line-height: 1;
	font-family: 'Panton-Bold';
	padding-bottom: 35px;
	background: url(../img/icon_hometitle_bg2.png) no-repeat left bottom;
	letter-spacing: 0.08em;
	margin-bottom: 32px;
}
#news .section-header h1 span.title-ja{
	display: inline-block;
	margin-left: 20px;
	font-size: 16px;
	vertical-align: baseline;
	font-family: "noto_sans_cjk_jp_r";
	letter-spacing: 0.1em;
}

/* News */
#home-news{
	padding-bottom: 80px;
}

/* クリーチャーズガレージ Styles */
#creatures-garage{
	padding: 70px 0;
	background: url(../img/home/home_gg_bg.png) repeat center top;
}
#creatures-garage .section-header p{
	margin-right: 200px;
}

.gg-list{
	overflow: hidden;
}
.gg-list .gg-item{
	float: left;
	width: 23.5%;
	margin-left: 2%;
	color: #1d2a4d;
	font-size: 12px;
	line-height: 1.6;
}
.gg-list .gg-item:first-child{
	margin-left: 0%;
}
.gg-item a{
	display: block;
	padding-bottom: 25px;
	background-image: url(../img/icon_link_arrow_view.png);
	background-repeat: no-repeat;
	background-position: -40px bottom;
	-moz-transition: all 0.2s;
	-o-transition: all 0.2s;
	-webkit-transition: all 0.2s;
	transition: all 0.2s;
	text-decoration: none;
	color: inherit;
}
.gg-item a:hover{
	background-position: 0 bottom;
}
.gg-item .gg-img{
	position: relative;
	width: 100%;
	margin-bottom: 15px;
	padding-top: 48%;
	background-color: #fff;
	overflow: hidden;
}
.gg-item .gg-img:after{
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(11, 49, 143, 0);
	border: 4px solid  rgba(11, 49, 143, 0);
	box-sizing: border-box;
	-moz-transition: all 0.2s;
	-o-transition: all 0.2s;
	-webkit-transition: all 0.2s;
	transition: all 0.2s;
}
.gg-item a:hover .gg-img:after{
	background-color: rgba(11, 49, 143, .3);
	border: 4px solid rgba(11, 49, 143, 1);
}
.gg-item .gg-img img{
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100%;
	height: auto;
	-moz-transform: translate3d(-50%, -50%, 0);
	-webkit-transform: translate3d(-50%, -50%, 0);
	-o-transform: translate3d(-50%, -50%, 0);
	-ms-transform: translate(-50%, -50%);
	transform: translate3d(-50%, -50%, 0);
}
.gg-item .gg-date{
	display: inline-block;
}
.gg-item .gg-title{
	margin-top: 10px;
	min-height: 3.2em;
	font-size: 14px;
	line-height: 1.6;
}
.gg-item a:hover .gg-title span{
	background: linear-gradient(transparent 10%, rgba(11, 49, 143, .1) 10%, rgba(11, 49, 143, .1) 90%, transparent 90%);
}

/*------------------------------------------------------------
	HOME アニメーション
------------------------------------------------------------*/
.anim0{
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	
	opacity: 0;
}
#top .anim0, #recruit .anim0{
	-webkit-transform: translate(200px, 0);
	transform: translate(200px, 0);
}
#product .anim0, #company .anim0{
	-webkit-transform: translate(-200px, 0);
	transform: translate(-200px, 0);
}

.anim1, .anim2, .anim3{
}
.anim1{
	-moz-transition-delay:0.2s;
	-webkit-transition-delay:0.2s;
	-o-transition-delay:0.2s;
	-ms-transition-delay:0.2s;
}
.anim2{
	-moz-transition-delay:0.3s;
	-webkit-transition-delay:0.3s;
	-o-transition-delay:0.3s;
	-ms-transition-delay:0.3s;
}
.anim3{
	-moz-transition-delay:0.4s;
	-webkit-transition-delay:0.4s;
	-o-transition-delay:0.4s;
	-ms-transition-delay:0.4s;
}
.anim4{
	-moz-transition-delay:0.5s;
	-webkit-transition-delay:0.5s;
	-o-transition-delay:0.5s;
	-ms-transition-delay:0.5s;
}
.anim5{
	-moz-transition-delay:0.8s;
	-webkit-transition-delay:0.8s;
	-o-transition-delay:0.8s;
	-ms-transition-delay:0.8s;
}
.anim6{
	-moz-transition-delay:1s;
	-webkit-transition-delay:1s;
	-o-transition-delay:1s;
	-ms-transition-delay:1s;
}

.scene1 #top .anim0{
	opacity: 1;
	-webkit-transform: translate(0, 0);
	transform: translate(0, 0);
}

.scene2 #product .anim0{
	opacity: 1;
	-webkit-transform: translate(0, 0);
	transform: translate(0, 0);
}

.scene3 #recruit .anim0{
	opacity: 1;
	-webkit-transform: translate(0, 0);
	transform: translate(0, 0);
}

.scene4 #company .anim0{
	opacity: 1;
	-webkit-transform: translate(0, 0);
	transform: translate(0, 0);
}
.scene2 #company.en_mode .anim0{
	opacity: 1;
	-webkit-transform: translate(0, 0);
	transform: translate(0, 0);
}

#news{
	position: absolute;
	top: 100%;
}
.scene-news #news{
	top:0;
	
}
#site-header{
	-webkit-transform: translate(0,-100%);
	transform: translate(0,-100%);
}
.scene5 #site-header{
	-webkit-transform: translate(0,0);
	transform: translate(0,0);
	height: 65px;
}
.scene5 #site-header .site-header-inner{
	top: 15px;
}
.scene5  #site-header .globalnavi{
		top: 26px;
	}

.pp-section.pp-table,
.pp-tableCell{
	background: url(../img/spacer.gif) no-repeat 0 0 /cover rgba(255, 255, 255, .01);
}

.clearfix:{ clear: both; }