@charset "utf-8";
@import url(reset.css);
@import url(base.css);
@import url(common.css);

body {
	overflow-x:hidden;
}


.swing {
			animation: swing 5s .45s infinite;
}

@-webkit-keyframes swing {
    0%,100% { 
        -webkit-transform-origin: bottom center; 
    }
    10% { -webkit-transform: rotate(-5deg); }  
    20% { -webkit-transform: rotate(5deg); }
    30% { -webkit-transform: rotate(-5deg); }   
    40% { -webkit-transform: rotate(5deg); }    
    50% { -webkit-transform: rotate(-3deg); }

    60% { -webkit-transform: rotate(2deg); }
    70% { -webkit-transform: rotate(-2deg); }
    80% { -webkit-transform: rotate(1deg); }
    90% { -webkit-transform: rotate(-1deg); }
    100% { -webkit-transform: rotate(0deg); }
}



#container h2 ul {
	text-align:center;
}

#container h2 ul li {
	display:inline-block;
	margin-right:5px;
}

#container h2 ul li:last-child {
	margin-right:0;
}



/*-------------------------------------------------------------------
	that
-------------------------------------------------------------------*/

#that {
	position:relative;
	padding-bottom:30px;
}

#that .imgbox,
#that .imglast {
	position:relative;
}


#that .imgbox .left {
	width:540px;
	float:left;
}

#that .imgbox .right {
	width:540px;
	float:right;
}


#that .imgbox ul {
	position:relative;
}

#that .imgbox ul li {
	width:260px;
	height:260px;
	position:relative;
	float:left;
	margin:0 20px 20px 0;
}


#that .imglast li {
	width:260px;
	height:260px;
	position:relative;
	float:left;
	margin:0 20px 0 0;
}

#that .imglast li.end {
	width:260px;
	height:260px;
	position:relative;
	float:right;
	margin:0;
}


#that .imgbox ul li.big {
	width:540px;
	margin:0 0 20px
}

#that .imglast li.big {
	width:540px;
}


#that .imgbox ul li.even {
	margin-right:0;
}


#that .imgbox ul li.top dl,
#that .imgbox ul li.btm dl,
#that .imglast li dl {
	position:relative;
	display:table-cell;
	width:256px;
	height:256px;
	text-align:center;
	vertical-align:middle;
	border:2px solid #33ccff;
	color:#361d05;
	border-radius:10px;
}


#that .imgbox ul li.top .smimg,
#that .imgbox ul li.btm .smimg,
#that .imglast li .smimg {
	display:none;
}

#that .imgbox ul li.top dl:before {
	content: "";
	position: absolute;
	top: -24px;
	left: 50%;
 	margin-left: -15px;
	border-left: 12px solid transparent;
	border-right: 12px solid transparent;
	border-bottom: 26px solid #fff;
 	z-index: 12;
}

#that .imgbox ul li.top dl:after {
	content: "";
	position: absolute;
	top: -30px;
	left: 50%;
 	margin-left: -17px;
	border-left: 14px solid transparent;
	border-right: 14px solid transparent;
	border-bottom: 30px solid #33ccff;
 	z-index: 11;
}

#that .imgbox ul li.btm dl:before {
	content: "";
	position: absolute;
	bottom: -24px;
	left: 50%;
 	margin-left: -15px;
	border-left: 12px solid transparent;
	border-right: 12px solid transparent;
	border-top: 26px solid #fff;
 	z-index: 12;
}

#that .imgbox ul li.btm dl:after {
	content: "";
	position: absolute;
	bottom: -30px;
	left: 50%;
 	margin-left: -17px;
	border-left: 14px solid transparent;
	border-right: 14px solid transparent;
	border-top: 30px solid #33ccff;
 	z-index: 11;
}

#that .imglast li dl:before {
	content: "";
	position: absolute;
	top: 50%;
	left: -24px;
 	margin-top: -15px;
	border-top: 12px solid transparent;
	border-bottom: 12px solid transparent;
	border-right: 26px solid #fff;
 	z-index: 12;
}

#that .imglast li dl:after {
	content: "";
	position: absolute;
	top: 50%;
	left: -30px;
 	margin-top: -17px;
	border-top: 14px solid transparent;
	border-bottom: 14px solid transparent;
	border-right: 30px solid #33ccff;
 	z-index: 11;
}

#that .imgbox ul li dl dt,
#that .imglast li dl dt {
	font-size:1.1em;
	font-weight:500;
	margin:0 0 10px;
}


#that .imgbox ul li .vol01 {
	position:absolute;
	right:40px;
	top:-90px;
	z-index:10;
	
	/*animation: key1 .5s ease infinite alternate;*/
}

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

#that .imgbox li .vol02 {
	position:absolute;
	bottom:-60px;
	left:40px;
	z-index:10;
	animation: swing linear 2s infinite;
}

@keyframes swing {
    0% { transform: rotate(0deg) }
    25% { transform: rotate(5deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}


#that .imgbox li .vol03 {
	position:absolute;
	top:-50px;
	left:40px;
	z-index:10;
	
}

#that .imgbox li .vol04 {
	position:absolute;
	bottom:-90px;
	left:70px;
	z-index:10;
	animation: key1 .5s ease infinite alternate;
}

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


#that .imgbox li .vol05 {
	position:absolute;
	top:-140px;
	left:20px;
	z-index:10;
}

#that .imgbox li .vol06 {
	position:absolute;
	bottom:-70px;
	left:10px;
	z-index:10;
}

#that .imgbox li .vol07 {
	position:absolute;
	top:-85px;
	left:30px;
	z-index:10;
}

#that .imgbox li .vol08 {
	position:absolute;
	bottom:-70px;
	left:30px;
	z-index:10;
	animation: swing linear 2s infinite;
}

#that .imglast li .vol09 {
	position:absolute;
	bottom:-70px;
	right:-45px;
	z-index:10;
}


/*-------------------------------------------------------------------
	recruit human
-------------------------------------------------------------------*/

#that .human01 {
	position:absolute;
	top:470px;
	right:0;
}

#that .human02 {
	position:absolute;
	top:620px;
	left:0;
}

#that .human03 {
	position:absolute;
	top:1050px;
	right:0;
}

#that .human04 {
	position:absolute;
	top:1700px;
	left:-30px;
}



@media screen and (max-width: 1080px) {
	#that .human03 {
		left:-50px;
	}
}


/*===============================================
  画面の横幅が1080px以下に適用
===============================================*/
@media screen and (max-width: 1080px){
	


}

/*===============================================
  画面の横幅が768px以下に適用
===============================================*/
@media screen and (max-width: 768px){
}

/*===============================================
  画面の横幅が640px以下に適用
===============================================*/
@media screen and (max-width: 640px){
	
	
	#container h2 ul li {
		margin-bottom:10px;
	}
	
	#container h2 ul li img {
		max-width:40px;
	}

	

	#that {
		position:relative;
		padding-bottom:30px;
	}
	
	#that .imgbox .left {
		width:100%;
		float:none;
	}

	#that .imgbox .right {
		width:100%;
		float:none;
	}

	#that .imgbox ul li {
		width:48%;
		height:auto;
		position:relative;
		float:left;
		margin:0 1% 20px 0;
	}
	

	#that .imglast li {
		width:48%;
		height:auto;
		position:relative;
		float:left;
		margin:0 1% 20px 0;
	}

	#that .imglast li.end {
		width:48%;
		height:auto;
		position:relative;
		float:right;
		margin:0;
	}


	#that .imgbox ul li.big {
		width:100%;
		margin:0 0 20px
	}

	#that .imglast li.big {
		width:100%;
	}


	#that .imgbox ul li.even {
		margin-right:0;
		float:right;
	}
	
	
	#that .imgbox ul li.top dl,
	#that .imgbox ul li.btm dl,
	#that .imglast li dl {
		position:relative;
		display:block;
		width:auto;
		height:auto;
		text-align:center;
		vertical-align:middle;
		border:2px solid #33ccff;
		color:#361d05;
		border-radius:10px;
		padding:7% 5% 10%;
	}
	
	#that .imgbox ul li.top dl.pc,
	#that .imgbox ul li.btm dl.pc,
	#that .imglast li dl.pc {
		display:none;
	}
	
	#that .imgbox ul li.top .smimg,
	#that .imgbox ul li.btm .smimg,
	#that .imglast li .smimg  {
		display:block;
	}
	
	#that .imgbox ul li.top .smimg .smi01,
	#that .imgbox ul li.btm .smimg .smi02,
	#that .imglast li .smimg .smi01 {
		position:absolute;
		bottom:0;
		left:0;
		z-index:9;
	}
	
	#that .imgbox ul li.top .smimg .smi02,
	#that .imgbox ul li.btm .smimg .smi02 {
		position:absolute;
		top:0;
		left:0;
		z-index:9;
	}

	
	
	#that .imglast li dl:before {
		content: "";
		position: absolute;
		top: -24px;
		left: 50%;
		margin:-14px 0 0 -15px;
		border-left: 12px solid transparent;
		border-right: 12px solid transparent;
		border-bottom: 26px solid #fff;
		border-top::none;
		z-index: 12;
	}
	
	#that .imglast li dl:after {
		content: "";
		position: absolute;
		top: -30px;
		left: 50%;
		margin:-16px 0 0 -17px;
		border-left: 14px solid transparent;
		border-right: 14px solid transparent;
		border-bottom: 30px solid #33ccff;
		border-top::none;
		z-index: 11;
	}

	#that .imgbox ul li .vol01 {
		right:20px;
		top:-50px;
	}
	
	#that .imgbox ul li .vol01 img {
		max-width:80%;
	}


	#that .imgbox li .vol02 {
		bottom:-50px;
		left:auto;
		right:10px;
	}

	#that .imgbox li .vol03 {
		top:-30px;
		left:30px;
	}

	#that .imgbox li .vol04 {
		bottom:-50px;
		left:30px;
	}
	
	#that .imgbox li .vol04 img {
		max-width:90%;
	}

	#that .imgbox li .vol05 {
		top:-50px;
		left:-10px;
	}

	#that .imgbox li .vol06 {
		bottom:-50px;
		left:-10px;
	}

	#that .imgbox li .vol07 {
		position:absolute;
		top:-70px;
		left:20px;
		z-index:10;
	}
	
	#that .imgbox li .vol07 img {
		max-width:90%;
	}

	#that .imgbox li .vol08 {
		bottom:-50px;
		left:10px;
	}
	
	#that .imgbox li .vol08 img {
		max-width:190px;
	}

	#that .imglast li .vol09 {
		position:absolute;
		bottom:0;
		right:-18px;
		z-index:10;
	}
	
	#that .imglast li .vol09 img {
		max-width:80%;
	}
	
	
	#that .human01,
	#that .human02,
	#that .human03,
	#that .human04 {
		display:none;
	}

}