/*************************************************************************
* services‚̃Aƒjƒ[ƒVƒ‡ƒ“
*************************************************************************/

@import url(https://fonts.googleapis.com/css?family=Raleway:400,500,800);
figure.snip1200 {
	position: relative;
	overflow: hidden;
	margin: 0%;
	max-width: 100%;
	width: 100%;
	background: #000000;
	color: #ffffff;
	text-align: center;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
	font-size: 10px;
	border-radius: 5px;
	opacity: 0.9;
}
figure.snip1200 * {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all 0.45s ease-in-out;
	transition: all 0.45s ease-in-out;
}
figure.snip1200 img {
	max-width: 100%;
	position: relative;
	opacity: 0.9;
}
figure.snip1200 figcaption {
	position: absolute;
	top: 45%;
	left: 7%;
	right: 7%;
	bottom: 45%;
	border: 1px solid white;
	border-width: 1px 1px 0;
}
figure.snip1200 .heading {
	overflow: hidden;
	-webkit-transform: translateY(50%);
	transform: translateY(50%);
	position: absolute;
	bottom: 0;
	width: 100%;
}
figure.snip1200 h2 {
	display: table;
	margin: 0 auto;
	padding: 0 10px;
	position: relative;
	text-align: center;
	width: auto;
	text-transform: uppercase;
	font-weight: 400;
}
figure.snip1200 h2 span {
	font-weight: 800;
	font-size: 20px;
}
figure.snip1200 h2:before,
figure.snip1200 h2:after {
	position: absolute;
	display: block;
	width: 1000%;
	height: 1px;
	content: '';
	background: white;
	top: 50%;
}
figure.snip1200 h2:before {
	left: -1000%;
}
figure.snip1200 h2:after {
	right: -1000%;
}
figure.snip1200 p {
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	position: absolute;
	width: 100%;
	padding: 0 20px;
	margin: 0;
	opacity: 0;
	color: #fff;
	line-height: 1.6em;
	font-size: 14px;
}
figure.snip1200 a {
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	position: absolute;
	z-index: 1;
}
figure.snip1200:hover img,
figure.snip1200.hover img {
	opacity: 0.25;
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}
figure.snip1200:hover figcaption,
figure.snip1200.hover figcaption {
	top: 7%;
	bottom: 7%;
}
figure.snip1200:hover p,
figure.snip1200.hover p {
	opacity: 1;
	-webkit-transition-delay: 0.35s;
	transition-delay: 0.35s;
	font-size: 1vw;
}

/*************************************************************************
* Recruit‚̃Aƒjƒ[ƒVƒ‡ƒ“
*************************************************************************/
.grid {
		position: relative;
		max-width: 100%;
		list-style: none;
		text-align: center;
}

/* Common style */
.grid figure {
		position: relative;
		float: left;
		overflow: hidden;
		max-width: 100%;
/*		background: #3085a3; */
		text-align: center;
		cursor: pointer;
}

.grid figure img {
		position: relative;
		display: block;
		min-height: 100%;
		max-width: 100%;
		opacity: 0.8;
}

.grid figure figcaption {
		padding: 2em;
		color: #fff;
		font-size: 10px;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
		pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a {
		z-index: 1000;
		text-indent: 200%;
		white-space: nowrap;
		font-size: 0;
}

.grid figure h2 {
		word-spacing: -0.15em;
		font-size: 40px;
		font-weight: normal;
}

.grid figure h2 span {
		font-weight: normal;
		font-size: 3vw;
}

.grid figure h2,
.grid figure p {
		margin: 0;
}

.grid figure p {
		letter-spacing: 1px;
		color: #fff;
		font-size: 68.5%;
}

/* Individual effects */

/*---------------*/
/***** Oscar *****/
/*---------------*/
@media screen and (min-width: 900px) {
figure.effect-oscar {
		width: 95%;
		margin-left: 0;
}

figure.effect-oscar img {
		opacity: 0.9;
		-webkit-transition: opacity 0.35s;
		transition: opacity 0.35s;
}

figure.effect-oscar figcaption {
		padding: 3em;
		background-color: rgba(0,0,0,0.0);
		-webkit-transition: background-color 0.35s;
		transition: background-color 0.35s;
}

figure.effect-oscar figcaption::before {
		position: absolute;
		top: 15px;
		right: 15px;
		bottom: 15px;
		left: 15px;
		border: 1px solid #fff;
		content: '';
}

figure.effect-oscar h2 {
		margin: 10px 0 0;
		-webkit-transition: -webkit-transform 0.35s;
		transition: transform 0.35s;
		-webkit-transform: translate3d(0,100%,0);
		transform: translate3d(0,100%,0);
}

figure.effect-oscar figcaption::before,
figure.effect-oscar p {
		opacity: 0;
		-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
		transition: opacity 0.35s, transform 0.35s;
		-webkit-transform: scale(0);
		transform: scale(0);
		font-weight: bold;
		font-size: 18px;
}

figure.effect-oscar:hover h2 {
		-webkit-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
		font-size: 3vw;
}

figure.effect-oscar:hover figcaption::before,
figure.effect-oscar:hover p {
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1);
		font-size: 1.3vw;
}

figure.effect-oscar:hover figcaption {
		background-color: rgba(58,52,42,0);
}

figure.effect-oscar:hover img {
		-webkit-filter: grayscale(100%);
		-moz-filter: grayscale(100%);
		-ms-filter: grayscale(100%);
		-o-filter: grayscale(100%);
		filter: grayscale(100%);
		opacity: 1;
}
}

@media screen and (max-width: 900px) {
		figure.effect-oscar {
				width: 95%;
				margin-left: 0;
		}
		
		figure.effect-oscar img {
				opacity: 0.9;
				-webkit-transition: opacity 0.35s;
				transition: opacity 0.35s;
		}
		
		figure.effect-oscar figcaption {
				padding: 2em;
				background-color: rgba(0,0,0,0.0);
				-webkit-transition: background-color 0.35s;
				transition: background-color 0.35s;
		}
		
		figure.effect-oscar figcaption::before {
				position: absolute;
				top: 15px;
				right: 15px;
				bottom: 15px;
				left: 15px;
				border: 1px solid #fff;
				content: '';
		}
		
		figure.effect-oscar h2 {
				margin: 10px 0 0;
				-webkit-transition: -webkit-transform 0.35s;
				transition: transform 0.35s;
				-webkit-transform: translate3d(0,100%,0);
				transform: translate3d(0,100%,0);
		}
		
		figure.effect-oscar figcaption::before,
		figure.effect-oscar p {
				opacity: 0;
				-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
				transition: opacity 0.35s, transform 0.35s;
				-webkit-transform: scale(0);
				transform: scale(0);
				font-weight: bold;
				font-size: 18px;
		}
		figure.effect-oscar h2 {
				-webkit-transform: translate3d(0,0,0);
				transform: translate3d(0,0,0);
				font-size: 3vw;
		}
		@media screen and (max-width: 900px) {
				figure.effect-oscar h2 {
						-webkit-transform: translate3d(0,20%,0);
						transform: translate3d(0,20%,0);
				}
				figure.effect-oscar p.mp-25 {margin-top: 10px;}
		}
		
		figure.effect-oscar figcaption::before,
		figure.effect-oscar p {
				opacity: 1;
				-webkit-transform: scale(1);
				transform: scale(1);
				font-size: 2.5vw;
		}
		
		figure.effect-oscar figcaption {
				background-color: rgba(58,52,42,0);
		}
		
		figure.effect-oscar img {
				-webkit-filter: grayscale(100%);
				-moz-filter: grayscale(100%);
				-ms-filter: grayscale(100%);
				-o-filter: grayscale(100%);
				filter: grayscale(100%);
				opacity: 1;
		}
		figure.effect-oscar:hover h2 {
				-webkit-transform: translate3d(0,20%,0);
				transform: translate3d(0,20%,0);
		}
		figure.effect-oscar:hover p.mp-25 {margin-top: 10px;}
}




/*************** aaa ********************/


a {
	display: inline-block;
	color: #3498db;
	text-decoration: none;
}
.button {
	border: 1px solid #eee;
	padding: 10px 40px;
	position: relative;
}
/* Effect1
 *************************************** */
/* ‹[Ž——v‘f‚Ì‹¤’ʃXƒ^ƒCƒ‹ */
.change-border01::after,
.change-border01::before,
.change-border01__inner::after,
.change-border01__inner::before {
	background-color: #3498db;
	content: '';
	display: block;
	position: absolute;
	z-index: 10;
	transition: all .3s ease;
	-webkit-transition: all .3s ease;
}
/* ¶ã‚Ö”z’u */
.change-border01::after {
		height: 1px;
		left: -1px;
		top: -1px;
		width: 0px;
}
/* ‰E‰º‚Ö”z’u */
.change-border01::before {
	bottom: -1px;
	height: 1px;
	right: -1px;
	width: 0px;
}
/* ¶‰º‚Ö”z’u */
.change-border01__inner::after {
	bottom: -1px;
	height: 0px;
	left: -1px;
	width: 1px;
}
/* ‰E‰º‚Ö”z’u */
.change-border01__inner::before {
	height: 0px;
	right: -1px;
	top: -1px;
	width: 1px;
}

/* hover */
.change-border01:hover::after,
.change-border01:hover::before {
	width: 100%;
	width: calc(100% + 1px);
}
.change-border01:hover .change-border01__inner::after,
.change-border01:hover .change-border01__inner::before {
	height: 100%;
	height: calc(100% + 1px);
}



/***********************************************************
* ƒtƒbƒ^[ƒAƒjƒ[ƒVƒ‡ƒ“
***********************************************************/

.item_text{
	animation: key1 .1s ease infinite alternate;
}

@keyframes key1{
	0% {transform: translateY(0px);}
	100% {transform: translateY(-10px);}
}

/***********************************************************
* ƒOƒƒiƒr
***********************************************************/

.is-fixed {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	color: #808080;
}

/*******
*
*/
@import 'https://fonts.googleapis.com/css?family=Raleway';

html, body
{
		margin: 0px;
}

header, footer
{
		margin: 0 auto;
	padding: 5em 3em;
	text-align: center;
/*		background: #555; */
}

header h1
{
		color: #AAA;
		font-size: 40px;
		font-weight: lighter;
		margin-bottom: 5px;
}

header span
{
		color: #fff;
}

footer span
{
	color: #AAA;
}

div.container
{
		margin: 0 auto;
}

div.container a
{
		color: #FFF;
		text-decoration: none;
		font-size: 20px;
		margin: 0 0.4%;
		padding: 14px 10px;
		position: relative;
		z-index: 0;
		cursor: pointer;
		font-family: "Yu Gothic","游ゴシック",YuGothic,"游ゴシック体","Helvetica Neue","Segoe UI","Noto Sans Japanese","ヒラギノ角ゴ ProN W3",Meiryo,sans-serif;
}
div.container a i {
	color: #333;
	font-style: normal;
	font-size: 15px;
	vertical-align: top;
}

div.container a.color_b {
	display: inline-block;
	color: #2484bf;
	padding: 0;
}
div.container a.color_b:hover {
		color: #0d11d4;
}

@media screen and (max-width: 900px) {
	div.container a.color_b {
	font-size: 14px;
	}
}
.small_ttl {
		font-weight: bold;
	}

.lime
{
/*		background: rgba(0,0,0,0.25);	*/
/*		opacity: 0.5; */
}

/* Top and Bottom borders go out */
div.topBotomBordersOut a:before, div.topBotomBordersOut a:after
{
		position: absolute;
		left: 0px;
		width: 100%;
		height: 2px;
		background: #FFF;
		content: "";
		opacity: 0;
		transition: all 0.3s;
}

div.topBotomBordersOut a:before
{
		top: 0px;
		transform: translateY(10px);
}

div.topBotomBordersOut a:after
{
		bottom: 0px;
		transform: translateY(-10px);
}

div.topBotomBordersOut a:hover:before, div.topBotomBordersOut a:hover:after
{
		opacity: 1;
		transform: translateY(0px);
}

/* Top and Bottom borders come in */
div.topBotomBordersIn a:before, div.topBotomBordersIn a:after
{
		position: absolute;
		left: 0px;
		width: 100%;
		height: 2px;
		background: #FFF;
		content: "";
		opacity: 0;
		transition: all 0.3s;
}

div.topBotomBordersIn a:before
{
		top: 0px;
		transform: translateY(-10px);
}

div.topBotomBordersIn a:after
{
		bottom: 0px;
		transform: translateY(10px);
}

div.topBotomBordersIn a:hover:before, div.topBotomBordersIn a:hover:after
{
		opacity: 1;
		transform: translateY(0px);
}

/* Top border go down and Left border appears */
div.topLeftBorders a:before
{
		position: absolute;
		top: 0px;
		left: 0px;
		width: 2px;
		height: 0px;
		background: #FFF;
		content: "";
		opacity: 1;
		transition: all 0.3s;
}

div.topLeftBorders a:after
{
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 2px;
		background: #FFF;
		content: "";
		opacity: 1;
		transition: all 0.3s;
}

div.topLeftBorders a:hover:before
{
		height: 100%;
}

div.topLeftBorders a:hover:after
{
		opacity: 0;
		top: 100%;
}

/* Circle behind */
div.circleBehind a:before, div.circleBehind a:after
{
		position: absolute;
		top: 22px;
		left: 50%;
		width: 50px;
		height: 50px;
		border: 4px solid #0277bd;
		transform: translateX(-50%) translateY(-50%) scale(0.8);
		border-radius: 50%;
		background: transparent;
		content: "";
		opacity: 0;
		transition: all 0.3s;
		z-index: -1;
}

div.circleBehind a:after
{
		border-width: 2px;
		transition: all 0.4s;
}

div.circleBehind a:hover:before
{
		opacity: 1;
		transform: translateX(-50%) translateY(-50%) scale(1);
}

div.circleBehind a:hover:after
{
		opacity: 1;
		transform: translateX(-50%) translateY(-50%) scale(1.3);
}

/* Brackets go out */
div.brackets a:before, div.brackets a:after
{
		position: absolute;
		opacity: 0;
		font-size: 35px;
		top: 0px;
		transition: all 0.3s;
}

div.brackets a:before
{
		content: '(';
		left: 0px;
		transform: translateX(10px);
}

div.brackets a:after
{
		content: ')';
		right: 0px;
		transform: translateX(-10px);
}

div.brackets a:hover:before, div.brackets a:hover:after
{
		opacity: 1;
		transform: translateX(0px);
}


/* Border from Y to X	*/
div.borderYtoX a:before, div.borderYtoX a:after
{
		position: absolute;
		opacity: 0.5;
		height: 100%;
		width: 2px;
		content: '';
		background: #FFF;
		transition: all 0.3s;
}

div.borderYtoX a:before
{
		left: 0px;
		top: 0px;
}

div.borderYtoX a:after
{
		right: 0px;
		bottom: 0px;
}

div.borderYtoX a:hover:before, div.borderYtoX a:hover:after
{
		opacity: 1;
		height: 2px;
		width: 100%;
}

/* Border X get width	*/
div.borderXwidth a:before, div.borderXwidth a:after
{
		position: absolute;
		opacity: 0;
		width: 0%;
		height: 2px;
		content: '';
		background: #FFF;
		transition: all 0.3s;
}

div.borderXwidth a:before
{
		left: 0px;
		top: 0px;
}

div.borderXwidth a:after
{
		right: 0px;
		bottom: 0px;
}

div.borderXwidth a:hover:before, div.borderXwidth a:hover:after
{
		opacity: 1;
		width: 100%;
}

/* Pull down	*/
div.pullDown a:before
{
		position: absolute;
		width: 100%;
		height: 2px;
		left: 0px;
		top: 0px;
		content: '';
		background: #FFF;
		opacity: 0.3;
		transition: all 0.3s;
}

div.pullDown a:hover:before
{
		height: 100%;
}

/* Pull up	*/
div.pullUp a:before
{
		position: absolute;
		width: 100%;
		height: 2px;
		left: 0px;
		bottom: 18px;
		content: '';
		background: #FFF;
		transition: all 0.3s;
}

div.pullUp .nav_logo02 a:before {display: none;}
div.pullUp a.navi_00:before {background: #888888;}
div.pullUp a.navi_01:before {background: #2484bf;}
div.pullUp a.navi_02:before {background: #f2e504;}
div.pullUp a.navi_03:before {background: #d6132e;}
div.pullUp a.navi_04:before {background: #eba624;}
div.pullUp a.navi_05:before {background: #45a638;}
div.pullUp a.navi_06:before {background: #000000;}
div.pullUp a.navi_07:before {background: #5f7d90;}

div.pullUp a:hover:before
{
		height: 57%;
		opacity: 0.2;
}


/* Pull up	*/
div.pullUp a.current:before
{
		position: absolute;
		width: 100%;
		height: 2px;
		left: 0px;
		bottom: 15px;
		content: '';
		background: #FFF;
		transition: all 0.3s;
}
div.pullUp a.navi_00.current:before {background: #888888;}
div.pullUp a.navi_01.current:before {background: #2484bf;}
div.pullUp a.navi_02.current:before {background: #f2e504;}
div.pullUp a.navi_03.current:before {background: #d6132e;}
div.pullUp a.navi_04.current:before {background: #eba624;}
div.pullUp a.navi_05.current:before {background: #45a638;}
div.pullUp a.navi_06.current:before {background: #000000;}
div.pullUp a.navi_07.current:before {background: #5f7d90;}

div.pullUp a.current:before
{
		height: 57%;
		opacity: 0.2;
}

/* Pull right	*/
div.pullRight a:before
{
		position: absolute;
		width: 2px;
		height: 100%;
		left: 0px;
		top: 0px;
		content: '';
		background: #FFF;
		opacity: 0.3;
		transition: all 0.3s;
}

div.pullRight a:hover:before
{
		width: 100%;
}

/* Pull left	*/
div.pullLeft a:before
{
		position: absolute;
		width: 2px;
		height: 100%;
		right: 0px;
		top: 0px;
		content: '';
		background: #FFF;
		opacity: 0.3;
		transition: all 0.3s;
}

div.pullLeft a:hover:before
{
		width: 100%;
}

/* Pull up and down	*/
div.pullUpDown a:before, div.pullUpDown a:after
{
		position: absolute;
		width: 100%;
		height: 2px;
		left: 0px;
		content: '';
		background: #FFF;
		opacity: 0.3;
		transition: all 0.3s;
}

div.pullUpDown a:before
{
		top: 0px;
} 

div.pullUpDown a:after
{
		bottom: 0px;
}

div.pullUpDown a:hover:before, div.pullUpDown a:hover:after
{
		height: 100%;
}

/* Pull right and left	*/
div.pullRightLeft a:before, div.pullRightLeft a:after
{
		position: absolute;
		width: 2px;
		height: 100%;
		top: 0px;
		content: '';
		background: #FFF;
		opacity: 0.3;
		transition: all 0.3s;
}

div.pullRightLeft a:before
{
		left: 0px;
} 

div.pullRightLeft a:after
{
		right: 0px;
}

div.pullRightLeft a:hover:before, div.pullRightLeft a:hover:after
{
		width: 100%;
}

/* Highlight text out	*/
div.highlightTextOut a
{
		color: rgba(255, 255, 255, 0.3); 
}

div.highlightTextOut a:before, div.highlightTextIn a:before
{
		position: absolute;
		color: #FFF;
		top: 0px;
		left: 0px;
		padding: 10px;
		overflow: hidden;
		content: attr(alt);
		transition: all 0.3s;
		transform: scale(0.8);
		opacity: 0;
} 

div.highlightTextOut a:hover:before, div.highlightTextIn a:hover:before
{
		transform: scale(1);
		opacity: 1;
}

/* Highlight text in	*/
div.highlightTextIn a
{
		color: rgba(0, 0, 0, 0.4); 
}

div.highlightTextIn a:before
{
		transform: scale(1.2);
} 

.bill_svg{
	top: 0;
	bottom: 0;
	width: 80%;
	height: 480px;
	position: absolute;
	right: -15%;
	z-index: 999;
}

.map_aicon {
		top: -10%;
		bottom: 0;
		height: 50%;
		position: absolute;
		left: 49%;
		z-index: 9;
		width: 51%;
}

.underline {
	position: relative;
}
.underline span {
	pointer-events: none;

}
.underline canvas {
		pointer-events: auto;
	position: absolute;
	top: 0;
	left: 0;
	/*background-color: rgba(222, 222, 222, 0.1);*/
	/*z-index: -1;*/
	-moz-user-select: none; 
	-khtml-user-select: none; 
	-webkit-user-select: none; 
	-o-user-select: none; 
	cursor: pointer;
}

@media screen and (max-width: 900px) {
	.bill_svg{
				top: -300px;
				bottom: 0;
				width: 58%;
				height: 600px;
				position: absolute;
				right: -15%;
				z-index: 999;
			}
			.map_aicon {
				top: -146px;
				bottom: 0;
				height: 300px;
				position: absolute;
				right: 10%;
				width: 35%;
				right: -18px;	
		}
		.fixed {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
		}
		nav.globalMenuSp {
			position: fixed;
			z-index: 2;
			top: 0;
			left: 0;
			background: rgba(0,0,0,.6);
			color: #000;
			text-align: center;
			transform: translateY(-100%);
			transition: all 0.6s;
			width: 100%;
	}
	 
	nav.globalMenuSp ul {
			margin: 0 auto;
			padding: 0;
			width: 100%;
	}
	 
	nav.globalMenuSp ul li {
			font-size: 1.1em;
			list-style-type: none;
			padding: 0;
			width: 100%;
			border-bottom: 1px dotted #fff;
		}
		
		nav.globalMenuSp ul li span i {font-style: normal;}
	 
	/* 最後はラインを描かない */
	nav.globalMenuSp ul li:last-child {
			padding-bottom: 0;
			border-bottom: none;
	}
	 
	nav.globalMenuSp ul li a {
			display: block;
			color: #000;
			padding: 1em 0;
	}
	 
	/* このクラスを、jQueryで付与・削除する */
	nav.globalMenuSp.active {
			transform: translateY(0%);
	}

.navToggle {
		display: block;
		position: fixed;		/* bodyに対しての絶対位置指定 */
		right: 13px;
		top: 12px;
		width: 42px;
		height: 51px;
		cursor: pointer;
		z-index: 3;
		background: #666;
		text-align: center;
		opacity: 0.6;
}
 
.navToggle span {
		display: block;
		position: absolute;		/* .navToggleに対して */
		width: 30px;
		border-bottom: solid 3px #eee;
		-webkit-transition: .35s ease-in-out;
		-moz-transition: .35s ease-in-out;
		transition: .35s ease-in-out;
		left: 6px;
}
 
.navToggle span:nth-child(1) {
		top: 9px;
}
 
.navToggle span:nth-child(2) {
		top: 18px;
}
 
.navToggle span:nth-child(3) {
		top: 27px;
}
 
.navToggle span:nth-child(4) {
		border: none;
		color: #eee;
		font-size: 9px;
		font-weight: bold;
		top: 34px;
}

/* 最初のspanをマイナス45度に */
.navToggle.active span:nth-child(1) {
		top: 18px;
		left: 6px;
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		transform: rotate(-45deg);
}
 
/* 2番目と3番目のspanを45度に */
.navToggle.active span:nth-child(2),
.navToggle.active span:nth-child(3) {
		top: 18px;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		transform: rotate(45deg);
}
		
}











html{
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}

body{
	margin:0;
	padding-top:100px;
/*	background-color:hsl(0,10%,89%)*/
} 

#holder{
		width: 800px;
		height: 500px;
		position: relative;
/*		background: hsl(0, 10%, 89%);*/
}

div#viewport {
		position: absolute;
		top: 0px;
		left: 0;
		width: 100%;
		bottom: 180px;
}


.circles {
		margin-bottom: 0;
		position: absolute;
		bottom: 0;
		width: 100%;
		word-break: normal;
		white-space: nowrap;
}
.red {
		width: 605px;
}

.expl{
		width: 800px;
}

.red .circles {
		animation: toleftR 0.96s linear infinite;
		height: 132px;
		margin-left: -132px;
}

.circle-top {
		border-radius: 50%;	display: inline-block;
		margin: 0;	padding: 0;
		box-sizing: border-box;
}

.red .circle-top {
		width: 264px;
		height: 264px;
		border: 11px solid hsl(0, 60%, 75%);
		margin-left: -10px;
}


@keyframes toleftR{
		0%{
				transform: translateX(0)
		}
		100%{
				transform: translateX(-254px)
		}
}

@keyframes toleftO{
		0%{
				transform: translateX(0)
		}
		100%{
				transform: translateX(-188px)
		}
}

@keyframes toleftG{
		0%{
				transform: translateX(0)
		}
		100%{
				transform: translateX(-130px)
		}
}

@keyframes toleftB{
		0%{
				transform: translateX(0)
		}
		100%{
				transform: translateX(-62px)
		}
}

div#explosion {
		margin-bottom: 0;	
		position: absolute;	
		bottom: 0;	
		width: 600px;		
		height: 100%;
		left: 100px;
}
div#explosion-circle {
		animation: explosion 2.88s infinite;
		animation-timing-function: cubic-bezier(0.140, 0.620, 0.405, 0.850);
		animation-direction: normal;
		width: 600px;
		height: 600px;
		border-radius: 50%;
		opacity: 0.5;
}

@keyframes explosion{
		0%{
				opacity: 0;
				transform:translateX(0px) scale(0);
				background-color: hsl(355, 95%, 53%);
		}
		75%{
				opacity: 0.8;
				transform:translateX(0px) scale(0);
				background-color: hsl(355, 95%, 53%);
		}
		81.25%{
				background-color: hsl(200, 86%, 60%);
		}
		87.5%{
				background-color: hsl(120, 65%, 55%);
		}
		93.75%{
				background-color: hsl(60, 100%, 50%);
				opacity: 0.1;
		}
		100%{
				transform:translateX(-254px) scale(1);
				opacity: 0;
		}
}


.subviewport {
		left: 0;
		position: absolute;
		top: 0;	bottom: 0;	overflow: hidden;
}

.orange .circles {
		height: 98px;
		animation: toleftO 0.72s linear infinite;
		margin-left: 17px;
}

.orange {
		width: 505px;	
}

.orange .circle-top {
		width: 200px;
		height: 200px;
		border: 10px solid hsl(43, 77%, 76%);
		margin-left: -10px;
}

.green {
		width: 425px;
}

.green .circle-top {
		width: 140px;
		height: 140px;
		border: 10px solid hsl(123, 55%, 73%);
		margin-left: -10px;
}

.green .circles {
		height: 70px;
		animation: toleftG 0.48s linear infinite;
		margin-left: -70px;
}


.blue {
		width: 365px;
}

.blue .circle-top {
		width: 70px;
		height: 70px;
		border: 8px solid hsl(200, 77%, 73%);
		margin-left: -8px;
}

.blue .circles {
		height: 35px;
		animation: toleftB 0.24s linear infinite;
		margin-left: -35px;
}



.hexagon {
		position: absolute;
		background-color: hsl(355, 95%, 53%);
		text-align: center;
		top: 263px;
		left: 594px;
		z-index: 1;
		animation-duration: 0.96s;
		animation-name: updownR;
}
.hexagon.dude, .hexagon.dude::before, .hexagon.dude::after {
		width: 32px;
		height: 53px;
		border-width: 2px 0 2px 0;
		border-style: solid;
}
.hexagon::before {
		background-color: inherit;
		content: "";
		position: absolute;
		transform: translateY(-2px) rotate(-60deg);
		z-index: 1;
		top: 0;
		left: 0;
		border-color: inherit;
}
.hexagon::after {
		background-color: inherit;
		content: "";
		position: absolute;
		transform: translateY(-2px) rotate(60deg);
		z-index: -1;
		top: 0;
		left: 0;
		border-color: inherit;
}
.box2 {
		top: 210px;	
		left: 490px;
		position: absolute;
		width: 27px;
		height: 23px;
		background-color: hsl(22, 90%, 50%);

		z-index: 0;
		border-color: hsl(0, 0%, 30%);
		animation-duration: 1.44s;
		animation-name: updownO;
}

.box2 .face {
		width: 16px;
		height: 0;
		border-bottom: 3px solid;
		position: absolute;
		z-index: 5;
		top: 11px;
		left: 32px;
		border-color: inherit;
}
.box2:before {
		width: 16px;
		height: 23px;
		position: absolute;
		content: "";
		top: -2px;
		right: -16px;
		background: inherit;
		border: inherit;
}

.box2 .face:after, .box2 .face:before {
		content: "";
		position:absolute;
		width: 0;
		height: 0;
		border-color: inherit; 
		border: 2px solid;
		border-radius: 50%;
		top: -6px;
		border-color: inherit;
}

.box2 .face:before{
		left: -4px;
}

.box2 .face:after{
		left: 3px;
}
.dude {
		position: absolute;
		border: 2px solid;	
		padding: 0;
		z-index: 2;
		border-top-color: hsl(0, 0%, 20%);
		border-bottom-color: hsl(0, 0%, 20%);
		border-right-color: hsl(0, 0%, 20%);
		border-left-color: hsl(0, 0%, 20%); 
		animation-iteration-count: infinite;
		animation-timing-function: linear;
}
.rectangle {
		left: 411px;
		top: 302px;
		width: 21px;
		height: 12px;
		background: hsl(120, 65%, 55%);
		animation-duration: .48s;
		animation-name: updownG;
}
.rectangle .face {
		position: absolute;
		top: 7px;
		left: 18px;
		border-top: 3px solid;
		height: 0;
		width: 12px;
		border-color: inherit;
}
.rectangle .face:after {
		position: absolute;
		content: "";
		border-top: 2px solid;
		border-left: 2px solid;
		width: 1px;
		height: 1px;
		border-color: inherit;
		top: -8px;
		left: -1px;
}
.circle.dude {
		top: 277px;
		left: 355px;
		width: 18px;
		height: 18px;
		border-radius: 50%;
		background: hsl(200, 86%, 60%);
		animation-duration: .24s;
		animation-name: updownB;
}
.circle .face {
		position: absolute;
		left: 16px;
		top: 8px;
		width: 17px;
		border-top: 2px solid;
		border-color: inherit;
		z-index: 7;
}
.circle .face:after {
		border-top: 2px solid;
		border-color: inherit;
		width: 17px;
		top: -1px;
		content: "";
		position: absolute;
		transform-origin: 0 0;
		transform: rotateZ(8deg);
}
.circle .face:before {
		position: absolute;
		content: "";
		border-top: 2px solid;	
		border-left: 2px solid;	
		width: 1px;	
		height: 1px;	border-color: inherit;
		top: -7px;
		left: -4px;
		border-radius: 50%;
}

.hexagon .face {
		position: absolute;
		border-top: 3px solid;
		border-color: inherit;
		left: 8px;
		top: 8px;
		width: 26px;
		z-index: 2;
}

.hexagon .face:after {
		position: absolute;
		content: "";
		border-width: 0 3px 3px 0;
		border-style: solid;
		border-color: inherit;
		width: 8px;
		height: 21px;
		left: 12px;
		transform: skewX(11deg);
}

#red-legs{
		position: absolute;
		right: 73px;
		bottom: -20px;
}

#orange-legs{
		position: absolute;
		right: 110px;
		bottom: -20px;
}

@keyframes updownR {
		0%{
				transform: translateY(0px);
				animation-timing-function: cubic-bezier(0,.50,.50,1);
		}
		50%{
				transform: translateY(-96px);
				animation-timing-function: cubic-bezier(.50,0,1,.50) ;
		}
}

@keyframes updownO {
		0%{
				transform: translateY(0px);
				animation-timing-function: cubic-bezier(0.585, 0.240, 0.865, 0.445);		 
		}
		25%{
				transform: translateY(75px) rotateZ(90deg);
				animation-timing-function: cubic-bezier(0.070, 0.405, 0.400, 0.820);
		}
		50%{
				transform: translateY(0px) rotateZ(180deg);
				animation-timing-function: cubic-bezier(0.585, 0.240, 0.865, 0.445);
		}
		75%{
				transform: translateY(75px) rotateZ(270deg);
				animation-timing-function: cubic-bezier(0.070, 0.405, 0.400, 0.820);
		}
		100%{
				transform: translateY(0px) rotateZ(360deg);
				animation-timing-function: cubic-bezier(0.585, 0.240, 0.865, 0.445);
		}
}

@keyframes updownG {
		0%{
				transform: translateY(0px) skewX(-25deg) scale(0.8,1.8);
				animation-timing-function: cubic-bezier(0,.50,.50,1);
		}
		50%{
				transform: translateY(-50px);
				animation-timing-function: cubic-bezier(.50,0,1,.50) ;
		}
		100%{
				 transform: translateY(0px) skewX(25deg) scale(0.8,1.8);
		}
}

@keyframes updownB {
		0%{
				transform: translateY(0px);
				animation-timing-function: cubic-bezier(.50,0,1,.50);
		}
		50%{
				transform: translateY(25px) scale(1.2,1);
				animation-timing-function: cubic-bezier(0,.50,.50,1);
		}
		100%{
				transform: translateY(0px);
		}
}



.ani3 {
	height: 390px;
	overflow: hidden;
	z-index: 1;
}

.svg3 {
	position: relative;
	z-index: 2;
	width: 100%;
	height: 100%;
}
.svg3 .line-ani {
	fill: none;
	/*stroke: #3a6785;*/
	stroke-width: 3px;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.svg3 .line-shadow.border_01 {
	transform: translate(1px, 1px);
	stroke: rgb(119, 184, 226);
	stroke-width: 2px;
}
.svg3 .line-shadow.border_02 {
	transform: translate(1px, 1px);
	stroke: rgba(230, 228, 149, 0.7);
	stroke-width: 2px;
}
.svg3 .line-shadow.border_03 {
	transform: translate(1px, 1px);
	stroke: rgba(224, 127, 135, 0.5);
	stroke-width: 2px;
}
.svg3 .line-shadow.border_04 {
	transform: translate(1px, 1px);
	stroke: rgba(230, 213, 150, 0.5);
	stroke-width: 2px;
}
.svg3 .line-shadow.border_05 {
	transform: translate(1px, 1px);
	stroke: rgba(108, 191, 102, 0.5);
	stroke-width: 2px;
}
.svg3 .line-shadow.border_06 {
	transform: translate(1px, 1px);
	stroke: rgba(177, 177, 177, 0.5);
	stroke-width: 2px;
}
.svg3 .line-shadow.border_07 {
	transform: translate(1px, 1px);
	stroke: rgba(107, 173, 230, 0.5);
	stroke-width: 2px;
}

.svg3 .line-shadow.border_01_02 {
	stroke: rgb(54, 128, 175);
	stroke-width: 2px;
}
.svg3 .line-shadow.border_02_02 {
	stroke: rgba(175, 170, 39, 0.7);
	stroke-width: 2px;
}
.svg3 .line-shadow.border_03_02 {
	stroke: rgba(167, 30, 42, 0.5);
	stroke-width: 2px;
}
.svg3 .line-shadow.border_04_02 {
	stroke: rgba(187, 153, 26, 0.5);
	stroke-width: 2px;
}
.svg3 .line-shadow.border_05_02 {
	stroke: rgba(53, 156, 46, 0.5);
	stroke-width: 2px;
}
.svg3 .line-shadow.border_06_02 {
	stroke: rgba(51, 51, 51, 0.5);
	stroke-width: 2px;
}
.svg3 .line-shadow.border_07_02 {
	stroke: rgba(23, 76, 121, 0.5);
	stroke-width: 2px;
}



/* Please ? this if you like it! */
@import url('https://fonts.googleapis.com/css?family=Muli:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i&subset=latin-ext,vietnamese');
@import url('https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=latin-ext');

:root {
	font-size: 20px;
	--red: #da2c4d;
	--yellow: #f8ab37;
	--green: #2ecc71;
	--white: #ffffff;
	--grey-light: #f2f7f9;
	--grey: #ecedf3;
	--black: #080808;
	--black-blue: #1f2029;
	--black-blue-light: #353746;
	--black-blue-light-2: #404255;
	--black-blue-light-3: #4b4d64;
	--black-light: #424455;
}
.navbar-brand{
	height: 55px;
	position: fixed;
	top: 50px;
	left: 70px;
	z-index: 3333;
	width: auto;
	display: inline-block;
	margin: 0;
	padding: 0;
	-webkit-transition : all 0.3s ease-out;
	transition : all 0.3s ease-out;
}
.navbar-brand::before{
	position: absolute;
	content: '';
	top: -13px;
	left: 50%;
	width: 80px;
	transform: translateX(-50%);
	height: calc(100% + 26px);
	opacity: 0;
	z-index: -1;
	background-image: linear-gradient(260deg, var(--grey), var(--grey-light));
	animation: border-transform 10s linear infinite alternate forwards;
	-webkit-transition: all 200ms linear;
		transition: all 200ms linear;
}
.navbar-brand::after{
	position: absolute;
	content: '';
	top: -13px;
	left: 50%;
	width: 80px;
	transform: translateX(-50%);
	height: calc(100% + 26px);
	opacity: 1;
	z-index: -1;
	background-image: linear-gradient(160deg, var(--black-blue-light-3), var(--black-blue-light));
	animation: border-transform 10s linear infinite alternate forwards;
	-webkit-transition: all 200ms linear;
		transition: all 200ms linear;
}
.navbar-brand img{
	padding: 7px 0;
	height: 100%;
	width: auto;
	display: block;
	-webkit-transition : all 0.3s ease-out;
	transition : all 0.3s ease-out;
}
@-webkit-keyframes border-transform{
		0%,100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; } 
	14% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; } 
	28% { border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%; } 
	42% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; } 
	56% { border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%; } 
	70% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; } 
	84% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; } 
}
@keyframes border-transform{
		0%,100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; } 
	14% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; } 
	28% { border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%; } 
	42% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; } 
	56% { border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%; } 
	70% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; } 
	84% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; } 
}

.section {
		position: relative;
	width: 100%;
	display: block;
	height: 100%;
}

/* #Progress
================================================== */

.progress-wrap {
	position: fixed;
	right: 50px;
	bottom: 50px;
	height: 46px;
	width: 46px;
	cursor: pointer;
	display: block;
	border-radius: 50px;
	box-shadow: inset	0 0 0 2px rgba(255,255,255,0.2);
	z-index: 10000;
	opacity: 0;
	visibility: hidden;
	transform: translateY(15px);
	-webkit-transition: all 200ms linear;
		transition: all 200ms linear;
}

@media screen and (max-width: 900px) {
	.progress-wrap {
	right: 10px;
	bottom: 10px;
	height: 36px;
	width: 36px;
}
	.progress-wrap::before,
	.progress-wrap::after{
		left: -4.5px !important;
		top: -4px !important;
	}
	.progress-wrap.active-progress{
		opacity: 0.5;
	}
	.progress-wrap:hover::after {
	opacity: 1;
	}
}

.progress-wrap.active-progress {
	opacity: 0.5;
	visibility: visible;
	transform: translateY(0);
}
.progress-wrap::after {
	position: absolute;
	font-family: 'unicons';
	content: '\e84b';
	text-align: center;
	line-height: 46px;
	font-size: 24px;
	color: var(--grey);
	left: 0;
	top: 0;
	height: 46px;
	width: 46px;
	cursor: pointer;
	display: block;
	z-index: 1;
	-webkit-transition: all 200ms linear;
		transition: all 200ms linear;
}
.progress-wrap:hover::after {
	opacity: 0;
}
.progress-wrap::before {
	position: absolute;
	font-family: 'unicons';
	content: '\e84b';
	text-align: center;
	line-height: 46px;
	font-size: 24px;
	opacity: 0;
	background-image: linear-gradient(298deg, var(--red), var(--yellow));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	left: 0;
	top: 0;
	height: 46px;
	width: 46px;
	cursor: pointer;
	display: block;
	z-index: 2;
	-webkit-transition: all 200ms linear;
		transition: all 200ms linear;
}
.progress-wrap:hover::before {
	opacity: 1;
}
.progress-wrap svg path { 
	fill: none; 
}
.progress-wrap svg.progress-circle path {
	stroke: var(--grey);
	stroke-width: 4;
	box-sizing:border-box;
	-webkit-transition: all 200ms linear;
		transition: all 200ms linear;
}
body.light .progress-wrap {
	box-shadow: inset	0 0 0 2px rgba(0,0,0,0.2);
}
body.light .progress-wrap::after {
	color: var(--black-blue);
}
body.light .progress-wrap svg.progress-circle path {
	stroke: var(--black-blue);
}

.line-ani {
	border-bottom: 3px;
}

.ani3 div {
	position: absolute;
	top: 0;
	width: 100%;
}

.touka01 {
	height: 440px;
}

.touka02 {
	height: 400px;
	background: -moz-linear-gradient(left, #00000000, #FFF);
	background: -webkit-linear-gradient(left, #00000000, #FFF);
	background: linear-gradient(to right, #00000000, #FFF);
}

.touka03 {
	height: 400px;
	background: -moz-linear-gradient(left, #00000000, #FFF);
	background: -webkit-linear-gradient(left, #00000000, #FFF);
	background: linear-gradient(to right, #00000000, #FFF);
}

.touka04 {
	height: 360px;
	background: -moz-linear-gradient(left, #00000000, #FFF);
	background: -webkit-linear-gradient(left, #00000000, #FFF);
	background: linear-gradient(to right, #00000000, #FFF);
}

.touka05 {
	height: 360px;
	background: -moz-linear-gradient(left, #00000000, #FFF);
	background: -webkit-linear-gradient(left, #00000000, #FFF);
	background: linear-gradient(to right, #00000000, #FFF);
}

.touka06 {
	height: 360px;
	background: -moz-linear-gradient(left, #00000000, #FFF);
	background: -webkit-linear-gradient(left, #00000000, #FFF);
	background: linear-gradient(to right, #00000000, #FFF);
}

.touka07 {
	height: 400px;
	background: -moz-linear-gradient(left, #00000000, #FFF);
	background: -webkit-linear-gradient(left, #00000000, #FFF);
	background: linear-gradient(to right, #00000000, #FFF);
}

#cars2 {
	transform: translateX(400px) translateY(-5px) rotateY(180deg);
}
#cars_stop {
	transform: translateY(5px);
}
#animal {
	transform: translateX(0px) translateY(-250px);
}
#animal2 {
	transform: translateX(400px) translateY(-250px) rotateY(180deg);
}
/*#svg2 {
	transform: translateX(-100px) translateY(100px);
	-ms-filter: blur(6px);
  filter: blur(6px);
}*/
#multiple_clouds {
	transform: translateX(0px) translateY(-200px);
}
#arupaka {
	transform: translateX(325px) translateY(-200px);
}

#kusa2 {
	transform: translateX(50px) translateY(190px);
}

#kusa3 {
	transform: translateX(0px) translateY(175px);
}


#kusa1 {
	transform: translateX(-110px) translateY(-100px);
}
#kusa2 {
	transform: translateX(-140px) translateY(-90px);
}
#kusa3 {
	transform: translateX(-170px) translateY(-100px);
}
#kusa4 {
	transform: translateX(-200px) translateY(-90px);
}
#kusa5 {
	transform: translateX(-230px) translateY(-100px);
}
#kusa6 {
	transform: translateX(-260px) translateY(-90px);
}
#kusa7 {
	transform: translateX(-290px) translateY(-100px);
}
#kusa8 {
	transform: translateX(-320px) translateY(-90px);
}
#kusa9 {
	transform: translateX(-350px) translateY(-100px);
}
#kusa10 {
	transform: translateX(-380px) translateY(-90px);
}
#kusa11 {
	transform: translateX(-420px) translateY(-100px);
}
#kusa12 {
	transform: translateX(-450px) translateY(-90px);
}
#kusa13 {
	transform: translateX(-480px) translateY(-100px);
}

#kusa21 {
	transform: translateX(-140px) translateY(-120px);
}
#kusa22 {
	transform: translateX(-200px) translateY(-120px);
}
#kusa23 {
	transform: translateX(-260px) translateY(-120px);
}
#kusa24 {
	transform: translateX(-380px) translateY(-120px);
}
#kusa25 {
	transform: translateX(-450px) translateY(-120px);
}


#doubut {
	transform: translateX(0px) translateY(-145px);
}
#doubut2 {
	transform: translateX(450px) translateY(-145px) rotateY(180deg);
}

#neko {
	transform: translateX(-340px) translateY(15px);
}
#neko2 {
	transform: translateX(-300px) translateY(10px);
}


}