/* LESS Document */

/*-----------------------------------------------------------
col
------------------------------------------------------------*/
@media screen and (min-width: 641px){
	#wrap,#wrapper{
		width:100%;
		height:100%;
	}
	.wrap{
		width:100%;
		height:auto;
	}
	.inner{
		width:960px;
		margin:0 auto;
		overflow:hidden;
	}
	main{
		
		article{
			padding-bottom:100px;
		}
	}
}
@media screen and (max-width: 640px){
	#wrap{
		max-width:640px;
		height:100%;
		margin:0 auto;
	}
	#wrapper{
		width:100%;
		height:100%;
	}
	.wrap{
		max-width:640px;
		height:auto;
	}
	.inner{
		max-width:640px;
		margin:20px;
		overflow:hidden;
	}
	main{
		
		article{
			padding-bottom:50px;
		}
	}
}
/*----------------------------------------------------------*/


/*-----------------------------------------------------------
global
------------------------------------------------------------*/
@media screen and (min-width: 641px){
	/* global */
	.pc{display:block;}
	.sp{display:none;}
	.hr{
		width:100px;
		margin:20px 0 40px 0;
		border-top:3px #59c3e1 solid;
	}
	
	/* title */
	h1,h2{font-size:inherit;}
	h3 {
		font-size: 30px;
		text-align: center;
		position: relative;
		margin-bottom:60px;
	}
	h3::after {
		position: absolute;
		content: '';
		left: 45%;
		bottom: -20px;
		width: 10%;
		border-bottom: 3px solid #59c3e1;
	}
	.icon{
		color:#ffffff;
		font-size:14px;
		height:24px;
		padding:5px 20px;
		text-align:center;
		background:#59c3e1;
		border-radius:3px;
	}
	
	/* read */
	.read1{
		color:#59c3e1;
		width:240px;
		padding:20px 0;
		text-align:center;
		background:#ffffff;
		
		&:hover{
			background:#eeeeee;
		}
		
		a{
			text-decoration:none;
		}
	}
	.read2{
		color:#ffffff;
		width:240px;
		padding:20px 0;
		text-align:center;
		background:#59c3e1;
		
		&:hover{
			background:#45b4ce;
		}
		
		a{
			text-decoration:none;
		}
	}
	
	/* col */
	.col3{
		
		li{
			float: left;
			width: 300px;
			margin-right: 30px;
			margin-bottom: 30px;
			text-decoration:none;
			
			&:nth-child(3n){
				margin-right: 0;
			}
            
            img{
					width:300px;
					height:auto;
				}
			
			a{
				display:block;
				text-decoration:none;
				
				img{
					width:300px;
					height:auto;
				}
			}
		}
	}
	.col4{
		
		li{
			float: left;
			width: 230px;
			margin-right: 13px;
			text-decoration:none;
			
			&:nth-child(4n){
				margin-right: 0;
			}
			
			a{
				display:block;
				text-decoration:none;
				
				img{
					width:230px;
					height:auto;
				}
			}
		}
	}
	
	/* effect */
	.fade-mv{
		opacity: 0;
		transform: translate(0,60px); 
		-webkit-transform: translate(0,60px); 
		transition: .8s;
	}
	.mv{
		opacity: 1.0;
		transform: translate(0,0); 
		-webkit-transform: translate(0,0);
	}
}
@media screen and (max-width: 640px){
	/* global */
	.pc{display:none;}
	.sp{display:block;}
	.hr{
		width:100px;
		margin:10px 0 20px 0;
		border-top:3px #59c3e1 solid;
	}
	
	/* title */
	h1,h2{font-size:inherit;}
	h3 {
		font-size: 30px;
		position:relative;
		text-align: center;
		margin-bottom:50px;
	}
	h3::after {
		position: absolute;
		content: '';
		left: 40%;
		width: 20%;
		bottom:-10px;
		border-bottom: 3px solid #59c3e1;
	}
	.icon{
		color:#ffffff;
		font-size:14px;
		height:20px;
		padding:5px 20px;
		text-align:center;
		background:#59c3e1;
		border-radius:3px;
	}
	
	/* read */
	.read1{
		color:#59c3e1;
		width:100%;
		padding:15px 0;
		text-align:center;
		background:#ffffff;
		
		&:hover{
			background:#eeeeee;
		}
		
		a{
			text-decoration:none;
		}
	}
	.read2{
		color:#ffffff;
		width:100%;
		padding:15px 0;
		text-align:center;
		background:#59c3e1;
		
		&:hover{
			background:#45b4ce;
		}
		
		a{
			text-decoration:none;
		}
	}
	
	/* effect */
	.fade-mv{
		opacity: 0;
		transform: translate(0,60px); 
		-webkit-transform: translate(0,60px); 
		transition: .8s;
	}
	.mv{
		opacity: 1.0;
		transform: translate(0,0); 
		-webkit-transform: translate(0,0);
	}
}
/*----------------------------------------------------------*/


/*-----------------------------------------------------------
header
------------------------------------------------------------*/
@media screen and (min-width: 1100px){
	.drawer-button,
	#drawer{
		display:none;
	}
	
	header{
		width:100%;
		height:120px;
		
		h1{
			float:left;
			color:#ffffff;
			font-size:8px;
			line-height:1.0;
			padding-top:20px;
			padding-left:30px;
			
			img{
				width:200px;
				height:auto;
				margin-bottom:5px;
			}
		}
		
		#global-nav{
			float:right;
			
			ul{
				
				li{
					float:left;
					width:140px;
					height:80px;
					font-size:12px;
					margin-top:20px;
					line-height:1.3;
					border-left:1px #dddddd solid;
					box-sizing :border-box;
					text-align:center;
					
					&:hover{
						background:#f5f5f5;
						-webkit-transition: all 0.2s;
						-moz-transition: all 0.2s;
						-ms-transition: all 0.2s;
						-o-transition: all 0.2s;
						transition: all 0.2s;
					}
					
					img{
						width:auto;
						height:30px;
						margin-bottom:10px;
					}
					
					a{
						color:#333333;
						display:block;
						padding:5px 0;
						text-decoration:none;
					}
				}
			}
		}
	}
}
@media screen and (max-width: 1099px){
	#sub-nav,
	#global-nav{
		display:none;
	}
	
	header{
		width:100%;
		height:80px;
		background:#ffffff;
		
		h1{
			float:left;
			color:#ffffff;
			font-size:8px;
			line-height:1.0;
			padding-top:15px;
			padding-left:10px;
			
			img{
				width:140px;
				height:auto;
				margin-bottom:5px;
			}
		}
		
		.drawer-button{
			float:right;
			margin:10px;
			display:block;
		}
	}
	
	/* drawer */
	#wrapper {
		position: relative;
		-webkit-transition: all .2s;
		transition: all .2s;
		
		&.open {
			-webkit-transform: translate3d(-250px, 0, 0);
			transform: translate3d(-250px, 0, 0);
			overflow: hidden;
		}
	}
	
	#drawer {
		position: fixed;
		top: 0;
		right: -250px;
		width: 250px;
		height: 100%;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		-webkit-transition: all .2s;
		transition: all .2s;
		background-color: #222222;
		
		&.open {
			-webkit-transform: translate3d(-250px, 0, 0);
			transform: translate3d(-250px, 0, 0);
		}
		
		#button{
			float:right;
			padding:10px;
		}
		
		ul{
			clear:both;
			
			li{
				box-sizing:border-box;
				border-top:1px #555555 solid;
				
				&:last-child{
					border-bottom:1px #555555 solid;
				}
				
				a{
					display:block;
					color:#fff;
					padding:15px;
					text-decoration:none;
					
					img{
						margin-right:10px;
						position:relative;
						top:-3px;
					}
				}
			}
		}
	}
	
	#overlay {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 9999;
		background: rgba(0, 0, 0, .3);
	}
}
/*----------------------------------------------------------*/


/*-----------------------------------------------------------
index
------------------------------------------------------------*/
.bx-wrapper .bx-pager,
.bx-wrapper .bx-prev,
.bx-wrapper .bx-next{
	display:none;
}
@media screen and (min-width: 641px){
	#slider-wrap{
		clear:both;
		height:700px;
		overflow:hidden;
		pointer-events:none;
		border-bottom:5px #ffffff solid;
		
		#slider{
			
			#slider1{
				height:700px;
				background: url(../images/index-top-image1.jpg) 50% 0 no-repeat;
			}
			#slider2{
				height:700px;
				background: url(../images/index-top-image2.jpg) 50% 0 no-repeat;
			}
			#slider3{
				height:700px;
				background: url(../images/index-top-image3.jpg) 50% 0 no-repeat;
			}
		}
	}
	
	#index-work{
		width:100%;
		height:640px;
			
		.image{
			float:left;
			width:50%;
			height:640px;
			background: url(../images/index-works-image.jpg) 50% 0 no-repeat;
		}
			
		.box-wrap{
			float:right;
			width:50%;
			height:640px;
			background:#59c3e1;
			overflow:hidden;
			
			.box{
				width:auto;
				height:620px;
				margin:10px;
				border:1px #ffffff solid;
				box-sizing:border-box;
				
				.text{
					max-width:440px;
					margin:0 auto;
					color:#ffffff;
					
					h2,p{margin-top:50px;}
					.read1{margin:20px 0;}
				}
			}
		}
	}
	
	#index-company{
		width:100%;
		height:640px;
			
		.image{
			float:right;
			width:50%;
			height:640px;
			background: url(../images/index-company-image.jpg) 50% 0 no-repeat;
		}
			
		.box-wrap{
			float:left;
			width:50%;
			height:640px;
			background:#59c3e1;
			overflow:hidden;
			
			.box{
				width:auto;
				height:620px;
				margin:10px;
				border:1px #ffffff solid;
				box-sizing:border-box;
				
				.text{
					max-width:440px;
					margin:0 auto;
					color:#ffffff;
					
					h2{margin-top:100px;}
					p,.read1{margin-top:50px;}
				}
			}
		}
	}
	
	#index-message{
		width:100%;
		height:560px;
		background: url(../images/index-message-image.jpg) 50% 0 no-repeat;
		
		.text{
			float:right;
			max-width:480px;
					
			h2{margin-top:70px;}
			p{margin-top:50px;}
			div{margin-top:20px;}
		}
	}
	
	#index-recruit{
		width:100%;
		height:450px;
		color:#ffffff;
		text-align:center;
		background: url(../images/index-recruit-image.jpg) 50% 0 no-repeat;
        background-position-y: -30px;
        background-size: cover;
					
		h2,p{margin-top:50px;}
		.read1{
			margin:20px auto;
		}
		#index-recruit-voice{
			float:left;
		}
	}
}
@media screen and (max-width: 640px){
	#slider-wrap{
		clear:both;
		overflow:hidden;
		pointer-events:none;
		
		#slider{
			
			#slider1,
			#slider2,
			#slider3{
				background:none;
			}
		}
	}
	
	#index-work{
		width:100%;
		height:auto;
		color:#ffffff;
		background:#59c3e1;
		overflow:hidden;
			
		.image{
			display:none;
		}
		
		.box-wrap{
			
			.box{
				
				.text{
					margin:5px;
					padding:20px 15px;
					border:1px #ffffff solid;
					box-sizing:border-box;
					
					h2{
						text-align:center;
						
						img{
							width:220px;
							height:auto;
							margin-bottom:20px;
						}
					}
					
					p{
						margin-top:10px;
					}
					
					.read1{
						float:none;
						margin:10px auto;
					}
				}
			}
		}
	}
	
	#index-company{
		width:100%;
		height:auto;
		color:#ffffff;
		background:#59c3e1;
		overflow:hidden;
			
		.image{
			display:none;
		}
		
		.box-wrap{
			
			.box{
				
				.text{
					margin:5px;
					padding:20px 15px;
					border:1px #ffffff solid;
					box-sizing:border-box;
					
					h2{
						text-align:center;
						
						img{
							width:220px;
							height:auto;
							margin-bottom:20px;
						}
					}
					
					p{
						margin-top:10px;
					}
					
					.read1{
						float:none;
						margin:10px auto;
					}
				}
			}
		}
	}
	
	#index-message{
		width:100%;
		height:auto;
		overflow:hidden;
		
		.inner{
			margin:0 !important;
		}
		
		.text{
					
			h2{
				padding:20px;
				text-align:center;
				
				img{
					width:220px;
					height:auto;
				}
			}
			
			p{
				padding:20px;
			}
		}
	}
	
	#index-recruit{
		width:100%;
		height:auto;
		color:#ffffff;
		padding:20px 0;
		background: url(../images/sp/index-recruit-image.jpg) 50% 0 no-repeat;
		background-size:auto 100%;
					
		h2{
			padding:20px;
			text-align:center;
			
			img{
				width:220px;
				height:auto;
			}
		}
		
		.read1{
			float:none;
			margin:0 auto 20px auto;
		}
	}
}
/*----------------------------------------------------------*/


/*-----------------------------------------------------------
page
------------------------------------------------------------*/
@media screen and (min-width: 641px){
	.top-image{
		margin-bottom:50px;
	}
	
	/* work */
	#work{
		
		.top-image{
			width:100%;
			height:550px;
			background: url(../images/work-h2-bg.jpg) 50% 0 no-repeat;
			
			h2{
				text-align:center;
				padding-top:180px;
			}
		}
		
		#flow{
			
			.step{
				color:#ffffff;
				font-size:30px;
				padding:10px 0;
				text-align:center;
				background:#59c3e1;
			}
			
			.image{
				float:left;
				width:320px;
				height:200px;
			}
			
			.flow-text{
				float:right;
				width:600px;
				height:180px;
				padding:10px 20px;
				background:#f5f5f5;
			}
				
			h4{
				font-size:24px;
				margin-bottom:5px;
			}
			
			.point{
				width:60px;
				height:auto;
				position:relative;
				left:-40px;
				margin-right:-45px;
				margin-top:10px;
			}
			
			.point2{
				width:60px;
				height:auto;
				margin-top:20px;
			}
			
			.arrow{
				clear:both;
				padding-top:10px;
				margin-bottom:10px;
				text-align:center;
			}
			
			#last-flow{
				text-align:center;
			}
		}
		
		/* bt */
		.over-bt{	
		
			a{
				display:block;
					
				figure {
					position: relative;
					overflow: hidden;
					
					figcaption {
						position: absolute;
						padding:5px;
						top: 0;
						left: 0;
						z-index: 2;
						width: 100%;
						height: 100%;
						background: rgba(0,0,0,.8);
						-webkit-transition: .3s;
						transition: .3s;
						opacity: 0;
						
						p {
							position:relative;
							top:15%;
							width:240px;
							margin:0 auto;
							font-size:12px;
							text-align:center;
						}
						
						.zoom{
							position:relative;
							top:20%;
							text-align:center;
							
							img{
								width:25px;
								height:auto;
								opacity:0.5;
							}
						}
					}
					&:hover figcaption {
						opacity: 1;
					}
					.transform01 {
						-webkit-transform: scale(1);
						transform: scale(1);
						-webkit-transition: all .3s ease-in-out;
						transition: all .3s ease-in-out;
					}
					&:hover .transform01 {
						-webkit-transform: scale(1.2);
						transform: scale(1.2);
					}
				}
			}
		}
	}
	
	/* staff */
	#staff{
		width:100%;
		height:auto;
		overflow:hidden;
		
		.top-image{
			width:100%;
			height:300px;
			background:#59c3e1;
			
			h2{
				text-align:center;
				padding-top:60px;
			}
		}
		
		.profile{
			width:450px;
			padding:10px;
			background:#ffffff;
			margin-bottom:20px;
			
			img{
				width:100%;
				height:auto;
				margin-bottom:10px;
			}
			
			.name{
				font-size:20px;
				font-weight:bold;
				
				span{
					font-size:36px;
				}
			}
			
			p{
				margin-bottom:10px;
			}
			
			.comment{
				
				th{
					width:68px;
					margin:0;
					padding:0;
				}
				
				td{
					margin:0;
					padding:0 0 0 10px;
				}
			}
		}
			
		#first{
			margin-left:auto;
			margin-right:auto;
		}
		
		#omoi{
			width:100%;
			height:650px;
			color:#ffffff;
			background: url(../images/staff-omoi-bg.jpg) 50% 0 no-repeat;
			
			#trapezoid {
				width: 540px;
				height:650px;
				margin:0 auto;
				background:rgba(0,0,0,0.5);
				-moz-transform-origin:0 100%;
				-webkit-transform-origin:0 100%;
				transform-origin:0 100%;
				-moz-transform:skewX(-3deg);
				-webkit-transform:skewX(-3deg);
				transform:skewX(-3deg);
				
				h2{
					padding-top:100px;
					text-align:center;
					margin-bottom:40px;
					-moz-transform-origin:0 100%;
					-webkit-transform-origin:0 100%;
					transform-origin:0 100%;
					-moz-transform:skewX(3deg);
					-webkit-transform:skewX(3deg);
					transform:skewX(3deg);
				}
				
				p{
					padding:0 20px;
					-moz-transform-origin:0 100%;
					-webkit-transform-origin:0 100%;
					transform-origin:0 100%;
					-moz-transform:skewX(1deg);
					-webkit-transform:skewX(1deg);
					transform:skewX(1deg);
				}
			}
		}
        
        #interview{
        
        background-color: white;
			
			.strong-icon{
				width:150px;
				color:#ffffff;
				font-size:24px;
				padding:5px 0;
				text-align:center;
				background:#59c3e1;
			}
			
			.interviewimage{
				width:450px;
				height:auto;
			}
            
            .interviewimage img{
				width:99%;
                border: 1px solid #707070;
			}
            
            .interviewimage h4 {
				width: 208px;
				padding: 0 0 10px;
				text-align: center;
			}
            
			.interviewtext{
				width:450px;
				}
            
             .interviewtext h4{
					font-size:16px;
					margin-bottom:10px;
				}
			}
		}
	
	/* company */
	#company{
		
		.top-image{
			width:100%;
			height:550px;
			background: url(../images/company-h2-bg.jpg) 50% 0 no-repeat;
			
			h2{
				text-align:center;
				padding-top:180px;
			}
		}
		
		table{
			width:100%;
			
			tr{
				width:100%;
				
				th{
					padding:10px;
					width:180px;
					text-align:left;
					font-weight:normal;
					vertical-align:middle;
					border-bottom:1px #dddddd dotted;
				}
				td{
					padding:10px;
					vertical-align:middle;
					border-bottom:1px #dddddd dotted;
				}
			}
		}
		
		#history{
			
			#history-title{
				width:100%;
				height:240px;
				margin-bottom:50px;
				background: url(../images/company-enkaku-bg.jpg) 50% 0 no-repeat;
				
				h3{
					padding-top:80px;
					text-align:left;
				}
				h3::after {
					left:0;
				}
			}
		}
	}
	
	/* recruit */
    
    
        .worklist p {
           color: #707070;
           font-size: 39px;
           text-align: center;
           margin: 10px 0px;
        }
        
    .worklist .workbutton {
           color: #707070;
           border: solid 1px #707070;
           padding: 2px;
           width: 120px;
           text-align: center;
           margin: 0 0 0 174px;
        }
    
    .worklist .workbutton:hover {
           color: #BABABA;
           border: solid 1px #BABABA;
           padding: 2px;
           width: 120px;
           text-align: center;
           margin: 0 0 0 174px;
        }
    
    .popup{
        background-color: white;
        text-align: center;
        overflow-y: overlay;
        }
    
    .popup h2{
        color: #707070;
        font-size: 32px; 
        font-weight: inherit;
        margin-top: 5px;
        }
    
    .popup p{
        color: #707070;
        font-size: 14px; 
        }
    
    .popup a {
    text-decoration: none;
    }
    
    .popup .workbutton {
    color: #707070;
    border: solid 1px #707070;
    padding: 2px;
    width: 160px;
    text-align: center;
    margin: 30px auto 0px;
    }
    
    .popup .workbutton:hover {
    color: #C1C1C1;
    }
    
    .popup img{
        width: 50%;
        margin: 30px 0px;
        }
    
    #popupinfo{
			text-align:center;
			padding:50px 0 15px;
			color:#999999;
			font-size:12px;
    }
    
    
	/* recruit */
	#recruit{
		
		.top-image{
			width:100%;
			height:550px;
			background: url(../images/recruit-h2-bg.jpg) 50% 0 no-repeat;
			
			h2{
				text-align:center;
				padding-top:180px;
			}
		}
		
		#strong{
			
			.strong-icon{
				width:150px;
				color:#ffffff;
				font-size:24px;
				padding:5px 0;
				text-align:center;
				background:#59c3e1;
			}
			
			.strong-image{
				float:left;
				width:470px;
				height:auto;
			}
			
			.strong-text{
				float:right;
				width:470px;
				
				h4{
					font-size:22px;
					margin-bottom:10px;
				}
			}
		}
		
		table{
			width:100%;
			
			tr{
				width:100%;
				
				th{
					padding:15px;
					width:180px;
					text-align:left;
					font-weight:normal;
					vertical-align:middle;
					border:1px #dddddd solid;
					box-sizing:border-box;
					background:#f5f5f5;
				}
				td{
					padding:15px;
					vertical-align:middle;
					border:1px #dddddd solid;
					box-sizing:border-box;
					background:#ffffff;
				}
			}
		}
		
		/* bt */
		.over-bt{	
		
			a{
				display:block;
					
				figure {
					position: relative;
					overflow: hidden;
					
					figcaption {
						position: absolute;
						padding:5px;
						top: 0;
						left: 0;
						z-index: 2;
						width: 100%;
						height: 100%;
						background: rgba(0,0,0,.8);
						-webkit-transition: .3s;
						transition: .3s;
						opacity: 0;
						
						p {
							position:relative;
							top:30%;
							width:200px;
							margin:0 auto;
							font-size:12px;
							text-align:center;
						}
						
						.zoom{
							position:relative;
							top:35%;
							text-align:center;
							
							img{
								width:25px;
								height:auto;
								opacity:0.5;
							}
						}
					}
					&:hover figcaption {
						opacity: 1;
					}
					.transform01 {
						-webkit-transform: scale(1);
						transform: scale(1);
						-webkit-transition: all .3s ease-in-out;
						transition: all .3s ease-in-out;
					}
					&:hover .transform01 {
						-webkit-transform: scale(1.2);
						transform: scale(1.2);
					}
				}
			}
		}
		
		#recruit-entry{
			width:100%;
			height:700px;
			padding-top:70px;
			background: url(../images/recruit-entry-bg.jpg) 50% 0 no-repeat;
			
			#recruit-entry-text{
				width:600px;
				height:auto;
				padding:50px;
				margin:0 auto;
				background:rgba(255,255,255,0.8);
			}
			
			#entry-bt{
				margin-top:30px;
				text-align:center;
			}
		}
	}
	
	/* ba */
	#ba{
		
		.top-image{
			width:100%;
			height:375px;
			background: url(../images/ba-h2-bg.jpg) 50% 0 no-repeat;
			
			h2{
				text-align:center;
				padding-top:70px;
			}
		}
		
		ul{
			
			li{
				float:left;
				width:470px;
				overflow:hidden;
				margin-bottom:50px;
				
				&:nth-child(2n){
					float:right;
				}
				
				img{
					width:100%;
					height:auto;
				}
			}
		}
		#ba-works{
			position:relative;
			top:-20px;
			padding:40px 20px 20px 20px;
			background:#fffecf;
			z-index:-9999;
		}
	}
	
	/* contact,entry */
	#contact,
	#entry{
		width:100%;
		height:auto;
		overflow:hidden;
		
		.top-image{
			width:100%;
			height:300px;
			background:#59c3e1;
			
			h2{
				text-align:center;
				padding-top:60px;
			}
		}
	}
}
@media screen and (max-width: 640px){
	/* work */
	#work{
		
		.top-image{
			width:100%;
			height:auto;
			overflow:hidden;
		}
		
		#flow{
			
			.step{
				color:#ffffff;
				font-size:30px;
				padding:10px 0;
				text-align:center;
				background:#59c3e1;
			}
			
			.image{
				width:100%;
				height:auto;
			}
			
			.flow-text{
				padding:10px;
				background:#f5f5f5;
			}
			
			h4{
				font-size:24px;
				margin-bottom:5px;
			}
			
			.point,
			.point2{
				width:70px;
				height:auto;
				display:block;
				margin-top:20px;
			}
			
			.arrow{
				clear:both;
				padding-top:10px;
				margin-bottom:10px;
				text-align:center;
				
				img{
					width:80px;
					height:auto;
				}
			}
			
			#last-flow div{
				text-align:center;
			}
		}
		
		.acd {
			margin-bottom:10px;
		}
		.acd dt {
			color:#ffffff;
			font-size:14px;
			position:relative;
			cursor:pointer;
			padding:5px;
			background-color:#59c3e1;
			
			span{
				position:absolute;
				top:20px;
				margin-left:5px;
			}
			
			img{
				width:80px;
				height:48px;
			}
		}
        
        
        .setsubi .acd {
            
            dt {
			    color: #ffffff;
				font-size: 14px;
				position: relative;
				cursor: pointer;
				padding: 8px 5px;
				background-color: #59c3e1;
            }
            
            span{
				position: absolute;
				top: 7px;
                line-height: 17px;
				margin-left: 5px;
			}
            }
        
		.acd dt::before {
			color:#ffffff;
			content: '▼';
			position:absolute;
			font-size:20px;
			top:25%;
			right:10px;
		}
		.acd .open::before {
			color:#ffffff;
			content: '▲';
			position:absolute;
			font-size:20px;
			top:25%;
			right:10px;
		}
		.acd dd{
			padding:10px;
			background-color:#f5f5f5;
			border:1px #59c3e1 solid;
			box-sizing:border-box;
			
			img{
				width:100%;
				height:auto;
				margin-bottom:5px;
			}
		}
	}
	
	/* staff */
	#staff{
		width:100%;
		height:auto;
		overflow:hidden;
		
		.top-image{
			width:100%;
			height:auto;
			overflow:hidden;
		}
        
         #interview{
        
        background-color: white;
			
			.strong-icon{
				width:150px;
				color:#ffffff;
				font-size:24px;
				padding:5px 0;
				text-align:center;
				background:#59c3e1;
			}
			
			.interviewimage{
				width:100%;
				height:auto;
			}
            
            .interviewimage img{
				width:99%;
                border: 1px solid #707070;
			}
             
             .interviewimage h4 {
				width: 100%;
				padding: 0 0 10px;
				text-align: left;
			}
			
			.interviewtext{
				width:100%;
                margin: 30px 0px 0px;
				}
            
             .interviewtext h4{
					font-size:16px;
					margin-bottom:10px;
				}
			}
        
        .profile{
			float:none !important;
			width:100%;
			background:#ffffff;
			margin-bottom:20px;
			
			img{
				width:100%;
				height:auto;
				margin-bottom:10px;
			}
			
			.name{
				font-size:16px;
				font-weight:bold;
				
				span{
					font-size:24px;
				}
			}
			
			p{
				padding:0 10px 10px 10px;
			}
			
			.comment{
				
				th{
					width:68px;
					margin:0;
					padding:10px;
					display:block;
				}
				
				td{
					margin:0;
					padding:0 10px 10px 10px;
					display:block;
				}
		
		#omoi{
			width:100%;
			height:auto;
			overflow:hidden;
		}
                
	}
            
			}
		}
        
         
	
	/* company */
	#company{
		
		.top-image{
			width:100%;
			height:auto;
			overflow:hidden;
		}
		
		table{
			width:100%;
			border-top:1px #dddddd dotted;
			
			tr{
				width:100%;
				
				th{
					padding:10px 10px 0 10px;
					text-align:left;
					vertical-align:middle;
					display:block;
				}
				td{
					padding:0 10px 10px 10px;
					vertical-align:middle;
					border-bottom:1px #dddddd dotted;
					display:block;
				}
			}
		}
		
		#history{
			
			#history-title{
				width:100%;
				height:120px;
				background: url(../images/company-enkaku-bg.jpg) 50% 0 no-repeat;
				background-size:auto 100%;
				
				h3{
					padding-top:30px;
					text-align:left;
				}
				h3::after {
					left:0;
				}
			}
		}
	}
	
	/* recruit */
	#recruit{
		
		.top-image{
			width:100%;
			height:auto;
			overflow:hidden;
		}
		
		#strong{
			
			.strong-icon{
				width:150px;
				color:#ffffff;
				font-size:24px;
				padding:5px 0;
				text-align:center;
				background:#59c3e1;
			}
			
			.strong-image{
				width:100%;
				height:auto;
					margin-bottom:10px;
			}
			
			.strong-text{
				
				h4{
					font-size:22px;
					margin-bottom:5px;
				}
			}
		}
		
		table{
			width:100%;
			
			tr{
				width:100%;
				
				th{
					padding:15px;
					text-align:left;
					font-weight:normal;
					vertical-align:middle;
					border:1px #dddddd solid;
					box-sizing:border-box;
					background:#f5f5f5;
					display:block;
				}
				td{
					padding:15px;
					vertical-align:middle;
					border:1px #dddddd solid;
					box-sizing:border-box;
					background:#ffffff;
					display:block;
				}
			}
		}
		
		#recruit-entry{
			width:100%;
			height:auto;
			overflow:hidden;
			
			#entry-bt{
				margin-top:20px;
				text-align:center;
				
				img{
					width:200px;
					height:auto;
				}
			}
		}
	}
	
	/* ba */
	#ba{
		
		.top-image{
			width:100%;
			height:auto;
			overflow:hidden;
		}
		
		ul{
			
			li{
				width:100%;
				overflow:hidden;
				margin-bottom:20px;
				
				img{
					width:100%;
					height:auto;
				}
			}
		}
		
		#ba-works-title{
			width:220px;
			height:auto;
		}
		
		#ba-works{
			position:relative;
			top:-20px;
			padding:40px 20px 20px 20px;
			background:#fffecf;
			z-index:-9999;
		}
	}
	
	/* contact,entry */
	#contact,
	#entry{
		width:100%;
		height:auto;
		overflow:hidden;
		
		.top-image{
			width:100%;
			height:auto;
			overflow:hidden;
		}
	}
}
/*----------------------------------------------------------*/


/*-----------------------------------------------------------
form
------------------------------------------------------------*/
@media screen and (min-width: 641px){
	#contact,
	#entry{
		
		table{
		
			th{
				background:#f5f5f5;
				padding:20px 10px;
				width:200px;
				vertical-align:middle;
			
				img{
					position:relative;
					top:-4px;
					margin-left:5px;
				}
			}
			
			td{
				padding:20px 10px;
			}
		}
		
		input[type="text"],
		input[type="password"],
		input[type="search"],
		input[type="tel"],
		input[type="url"],
		input[type="email"],
		input[type="nomber"],
		input[type="date"],
		select,
		textarea{
			padding:10px 5px;
			border:2px #ddd solid;
			box-sizing:border-box;
			border-radius:4px;
			-webkit-appearance:none;
			-moz-appearance:none;
			-ms-appearance:none;
			-o-appearance:none;
			appearance:none;
		}
		
		.formError {
			font-size:12px;
			color:#f00;
		}
		
		#privacy{
			padding:20px;
			border:1px #ddd solid;
			box-sizing:border-box;
			background:#ffffff;
			
			.roll{
				width:880px;
				font-size:14px;
				height:240px;
				padding:20px;
				margin:20px;
				overflow:scroll;
				border:1px #ddd solid;
				box-sizing:border-box;
			}
		}
	}
}
@media screen and (max-width: 641px){
	#contact,
	#entry{
		max-width:640px;
		
		form{
			max-width:640px;
			overflow: hidden;
			
			dt{
				position:relative;
				padding:10px 0;
				
				img{
					position:absolute;
					top:14px;
					right:-40px;
				}
			}
			
			dd{
				padding:10px 0;
				
				img{
					float:right;
					position:relative;
					z-index:999;
					right:10px;
					top:-32px;
				}
			}
			
			input[type="text"],
			input[type="password"],
			input[type="search"],
			input[type="tel"],
			input[type="url"],
			input[type="email"],
			input[type="nomber"],
			input[type="date"],
			select,
			textarea{
				-webkit-appearance:none;
				-moz-appearance:none;
				-ms-appearance:none;
				-o-appearance:none;
				appearance:none;
			}
			input[type="text"],
			input[type="email"],
			input[type="password"],
			input[type="number"],
			input[type="tel"],
			select,
			textarea{
				width:100%;
				font-size:16px;
				padding:15px 5px;
				border:1px #ddd solid;
				box-sizing:border-box;
				border-radius:4px;
			}
			#birthday select{
				width: 33%;
				height: 50px;
				padding:0 5px;
				font-size:16px;
				-moz-box-sizing: border-box;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				border:2px #ddd solid;
			}
			
			#send_confirm_label{
				clear:both;
				display:block;
				padding:10px;
				border:1px #dddddd solid;
				box-sizing:border-box;
				border-radius:3px;
				background:#f9f9f9;
			}
			
			/* ラジオ
			.radio-bt input {
				display: none;
			}
			.radio-bt label{
				display: table-cell !important;
				cursor: pointer;
				padding: 15px 10px !important;
				border-top:1px #ddd solid;
				border-bottom:1px #ddd solid;
				border-left:1px #ddd solid;
				background: linear-gradient(#fff, #ddd);
				font-size: 12px;
				text-align: center;
				vertical-align:middle;
				border-radius: 0 !important;
			}
			.radio-bt1 label{
				width: 10% !important;
			}
			.radio-bt2 label{
				width: 10% !important;
			}
			.radio-bt3 label{
				width: 20% !important;
			}
			.radio-bt label:first-of-type{
				border-radius: 5px 0 0 5px !important;
			}
			.radio-bt label:last-of-type{
				border-right:1px #ddd solid;
				border-radius: 0 5px 5px 0 !important;
			}
			.radio-bt input[type="radio"]:checked + .switch-on {
				background: #a1b91d !important;
				color: #fff !important;
			}
			.radio-bt input[type="radio"]:checked + .switch-off {
				background: #e67168 !important;
				color: #fff !important;
			}
			.check-bt label{
				padding:20px 10px !important;
				border:1px #ddd solid !important;
			}
			*/
		}
		
		#privacy{
			color:#333;
			padding:10px;
			margin-top:10px;
			border: 1px solid #CCC;
			font-size: 0.9em;
			
			.roll{
				margin:5px;
				padding:5px;
				height: 150px;
				overflow: auto;
				border: 1px solid #CCC;
				line-height: 130%;
			}
		}
	}
}
/*----------------------------------------------------------*/



/*-----------------------------------------------------------
footer
------------------------------------------------------------*/
@media screen and (min-width: 641px){
	footer{
		width:100%;
		
		#footer-nav{
			width:100%;
			height:50px;
			background:#59c3e1;
			
			ul{
				width:910px;
				margin:0 auto;
				padding-top:13px;
			
				li{
					float:left;
					width:130px;
					border-right:1px #ffffff solid;
					box-sizing:border-box;
					text-align:center;
					
					&:first-child{
						border-left:1px #ffffff solid;
					}
					
					a{
						color:#ffffff;
						font-size:14px;
						padding:2px 5px;
						text-decoration:none;
						
						&:hover{
							background:#45b4ce;
							border-radius:5px;
						}
					}
				}
			}
		}
		
		#info{
			text-align:center;
			padding:50px 0;
			color:#999999;
			font-size:12px;
			
			img{
				width:200px;
				height:auto;
				margin-bottom:5px;
			}
			
			address{
				margin-top:5px;
			}
		}
	}
	
	#page-top{
		z-index:100;
		position: fixed;
		bottom: 0;
		right: 30px;
		font-size: 14px;
		
		a{
			color: #fff;
			width: 80px;
			display: block;
			padding: 15px 0;
			text-align: center;
			background: #45b4ce;
			
			&:hover{
				background:#FF4700;
				-webkit-transition: all 0.2s;
				-moz-transition: all 0.2s;
				-ms-transition: all 0.2s;
				-o-transition: all 0.2s;
				transition: all 0.2s;
			}
		}
	}
}
@media screen and (max-width: 640px){
	footer{
		width:100%;
		
		#footer-nav{
			width:100%;
			height:auto;
			background:#59c3e1;
			overflow:hidden;
			
			ul{
				margin:0 20px;
			
				li{
					clear:both;
					width:100%;
					border-bottom:1px #ffffff solid;
					box-sizing:border-box;
					
					&:last-child{
						border-bottom:0;
					}				
				
					a{
						display:block;
						color:#ffffff;
						font-size:14px;
						padding:15px 0;
						text-decoration:none;
						
						&:after{
							content:">";
							float:right;
							color:#ffffff;
						}
					}
				}
			}
		}
		
		#info{
			text-align:center;
			padding:20px 0;
			color:#999999;
			font-size:12px;
			
			img{
				width:140px;
				height:auto;
				margin-bottom:5px;
			}
			
			address{
				margin-top:5px;
			}
		}
	}
	
	#page-top{
		z-index:9999;
		position: fixed;
		bottom: 0;
		right: 15px;
		font-size: 12px;
		
		a{
			color: #fff;
			width: 70px;
			display: block;
			padding: 10px 0;
			text-align: center;
			background: #45b4ce;
		}
	}
}
/*----------------------------------------------------------*/