@charset "utf-8";

@import url("../../common/css/reset.css");
@import url("../../common/css/layout.css");


/* mainVisual
────────────────────────────────────────*/

#mainVisual{
	display:none;
	margin:0 10px;
}
#mainVisual:after{
	height:0;
	visibility:hidden;
	content:".";
	display:block;
	clear:both;
	/*モダンブラウザ隙間対策*/
	overflow:hidden;
	font-size:0.1em;
	line-height:0;
}

.flex-control-nav {
	bottom:-40px;
}

.flex-control-nav li {
	margin:0 10px;
}
.flex-control-paging li a {
	background:#CCC;
	height:20px;
	width:20px;
	transition:all ease 0.3s;
}
.flex-control-paging li a:hover,
.flex-control-paging li a.flex-active {
	background: #4ab3dd;
	background: -moz-linear-gradient(45deg, #4ab3dd 0%, #044b8f 100%);
	background: -webkit-linear-gradient(45deg, #4ab3dd 0%,#044b8f 100%);
	background: linear-gradient(45deg, #4ab3dd 0%,#044b8f 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4ab3dd', endColorstr='#044b8f',GradientType=1 );
}

@media screen and (min-width:640px) {

	#mainVisual{
		display:none;
		margin:0 30px;
	}

}

@media only screen and (min-width:1280px) {


	#mainVisual{
		width:1040px;
		height:auto;
		margin:0 auto;
	}

	.flex-control-nav li {
		margin:0 15px;
	}
	
	.flex-control-paging li a {
		background:#CCC;
		height:10px;
		width:100px;
		transition:all ease 0.3s;
	}
	
	.flex-control-paging li a:hover,
	.flex-control-paging li a.flex-active {
		background: #4ab3dd;
		background: -moz-linear-gradient(45deg, #4ab3dd 0%, #044b8f 100%);
		background: -webkit-linear-gradient(45deg, #4ab3dd 0%,#044b8f 100%);
		background: linear-gradient(45deg, #4ab3dd 0%,#044b8f 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4ab3dd', endColorstr='#044b8f',GradientType=1 );
	}

	/* メインビジュアル対応用 */
	
	header,
	footer{
		min-width:1280px;
	}

	#mainVisual{
		width:1280px;
		margin:0 auto;
	}

	#mainVisual img{}

}

/* container
────────────────────────────────────────*/

#container{
	margin:55px 10px 30px;
}

#container img{
	vertical-align:bottom;
}

@media only screen and (min-width:640px) { 
	
	#container{
		margin:55px 30px 30px;
	}
	
}

@media only screen and (min-width:1280px) { 
	
	#container{
		margin:140px auto 100px;
	}
	
}

/* 	#Results
────────────────────────────────────────*/
	
#Results ul{
	display:flex;
	flex-wrap:wrap;
	list-style:none;
	margin:calc(20px + 1em) 0 0;
}	

#Results ul li{
	margin:0 10px 20px 0;
	position:relative;
	width:calc(50% - 5px);
}

#Results ul li:nth-child(2n) {
	margin-right:0;
}

#Results span {
	display:block;
    overflow: hidden;
    width:100%;
	text-align:center;
}

#Results span img {
    -moz-transition: -moz-transform 0.3s linear;
    -webkit-transition: -webkit-transform 0.3s linear;
    -o-transition: -o-transform 0.3s linear;
    -ms-transition: -ms-transform 0.3s linear;
    transition: transform 0.3s linear;
	width:100%;
	min-height:100px;
	height:auto;
}

#Results p{
	line-height:1.6;
	padding:10px 10px 0;
}

#Results ul li.new::before {
	background: #4ab3dd;
	background: -moz-linear-gradient(45deg, #4ab3dd 0%, #044b8f 100%);
	background: -webkit-linear-gradient(45deg, #4ab3dd 0%,#044b8f 100%);
	background: linear-gradient(45deg, #4ab3dd 0%,#044b8f 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4ab3dd', endColorstr='#044b8f',GradientType=1 );
	color:#FFF;
	content:"NEW";
	font-size:80%;
	font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
	line-height:1;
	padding:0.5em 1em;
	position:absolute;
	top:-1em; right:10px;
	z-index:2;

}

#Results a{
	color:#333;
}

#Results a.more{
	border-left:1px #4ab3dd solid;
	border-right:1px #044b8f solid;
	color:#044b8f;
	margin:0 auto;
	display:table;
	padding:0.5em 2em;
	position:relative;
	text-decoration:none;
	transition:all ease 0.3s;
}

#Results a.more:hover {
	background: #4ab3dd;
	background: -moz-linear-gradient(45deg, #4ab3dd 0%, #044b8f 100%);
	background: -webkit-linear-gradient(45deg, #4ab3dd 0%,#044b8f 100%);
	background: linear-gradient(45deg, #4ab3dd 0%,#044b8f 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4ab3dd', endColorstr='#044b8f',GradientType=1 );
	color:#FFF;
}

#Results a.more::before,
#Results a.more::after {
	background: #4ab3dd;
	background: -moz-linear-gradient(45deg, #4ab3dd 0%, #044b8f 100%);
	background: -webkit-linear-gradient(45deg, #4ab3dd 0%,#044b8f 100%);
	background: linear-gradient(45deg, #4ab3dd 0%,#044b8f 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4ab3dd', endColorstr='#044b8f',GradientType=1 );
	content:"";
	display:block;
	height:1px;
	width:100%;
	position:absolute;
	left:0;
}

#Results a.more::before{
	top:0;
}

#Results a.more::after{
	bottom:0;
}

@media only screen and (min-width:640px) { 
		
	#Results ul li{
		margin:0;
		width:calc(25% - 15px);
	}
	
	#Results ul li + li{
		margin-left:20px;
	}

	#Results a.more{
		margin:20px auto 0;
	}


}

@media only screen and (min-width:1280px) { 
	
	#Results{
		margin:0 auto;
		width:1040px;
	}
		
	#Results ul{
		display:flex;
		flex-wrap:no-wrap;
		list-style:none;
		margin:40px 0 0;
	}	
	
	#Results ul li{
		margin:0;
		width:245px;
	}
		
	#Results ul li + li{
		margin:0 0 0 20px;
	}
	
	#Results ul li.new::before {
		right:20px;
	}
	
	#Results span img {
		-moz-transition: -moz-transform 0.3s linear;
		-webkit-transition: -webkit-transform 0.3s linear;
		-o-transition: -o-transform 0.3s linear;
		-ms-transition: -ms-transform 0.3s linear;
		transition: transform 0.3s linear;
		width:100%;
		min-height:175px;
		height:auto;
	}
	
	#Results span img:hover {
		-webkit-transform: scale(1.2);
		-moz-transform: scale(1.2);
		-o-transform: scale(1.2);
		-ms-transform: scale(1.2);
		transform: scale(1.2);
	}

	#Results a.more{
		margin:60px auto 0;
		padding:0.5em 4em;
	}

}

/* #News
────────────────────────────────────────*/

#News{
	margin:30px 0 0;
}

#News dl{
	border-top:1px #CCC solid;
	margin:30px 0 20px;
	line-height:1.6;
}

#News dl dt{
	font-weight:bold;
	padding:0.5em 1em 0;
}

#News dl dd{
	border-bottom:1px #CCC solid;
	padding:0 1em 0.5em;
}

#News dl a{
	color:#333;
}

#News a{
	color:#333;
}

#News a.more{
	border-left:1px #4ab3dd solid;
	border-right:1px #044b8f solid;
	color:#044b8f;
	margin:0 auto;
	display:table;
	padding:0.5em 2em;
	position:relative;
	text-decoration:none;
	transition:all ease 0.3s;
}

#News a.more:hover {
	background: #4ab3dd;
	background: -moz-linear-gradient(45deg, #4ab3dd 0%, #044b8f 100%);
	background: -webkit-linear-gradient(45deg, #4ab3dd 0%,#044b8f 100%);
	background: linear-gradient(45deg, #4ab3dd 0%,#044b8f 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4ab3dd', endColorstr='#044b8f',GradientType=1 );
	color:#FFF;
}

#News a.more::before,
#News a.more::after {
	background: #4ab3dd;
	background: -moz-linear-gradient(45deg, #4ab3dd 0%, #044b8f 100%);
	background: -webkit-linear-gradient(45deg, #4ab3dd 0%,#044b8f 100%);
	background: linear-gradient(45deg, #4ab3dd 0%,#044b8f 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4ab3dd', endColorstr='#044b8f',GradientType=1 );
	content:"";
	display:block;
	height:1px;
	width:100%;
	position:absolute;
	left:0;
}

#News a.more::before{
	top:0;
}

#News a.more::after{
	bottom:0;
}
	
@media only screen and (min-width:1280px) { 
	
	#News{
		margin:100px auto 0;
		width:1040px;
	}
	
	#News dl{
		margin:40px 0 0;
	}
		
	#News dt{
		float:left;
		clear:left;
		width:10em;
		padding:30px 40px 0 !important;
	}
		
	#News dd{
		padding:30px 40px !important;
		padding-left:calc(10em + 80px) !important;
	}
	
	#News dd a{
		background:url(../../common/img/arrow/grad_line_R.svg) no-repeat right center;
		display:block;
		padding-right:30px;
		text-decoration:none;
	}

	#News a.more{
		margin:60px auto 0;
		padding:0.5em 4em;
	}

}

/* service
────────────────────────────────────────*/

#service{
	margin:30px 0 0;
	position:relative;
}

#service h2{
	margin:0 auto 250px;
}

#service::before {
	content:"";
	display:block;
	height:200px;
	width:100%;
	background:url(../img/service/bg_photo.jpg) no-repeat center;
	background-size:auto 100%;
	position:absolute;
	top:53px; left:0;
}

#service ul {
	border-top:1px #CCC solid;
}

#service li{
	border-bottom:1px #CCC solid;
	box-sizing:border-box;
	margin-bottom:10px;
	padding:10px;
	display:block;
}

#service ul h3,
#service ul p{
	display:inline-block;
}

#service ul p::before {
	content:"…";
}



@media only screen and (min-width:640px) { 
	
	#service::before {
		background-size:100% auto;
	}	

	#service ul{
		border:none;
		display:flex;
		flex-wrap:wrap;
	}
	
	#service li{
		border-bottom:none;
		margin:0 0 30px;
		padding:0;
		width:50%;
	}

	#service ul h3,
	#service ul p{
		display:block;
	}
	
	#service li:nth-child(odd) {
		padding-right:40px;
	}
	
	#service li:nth-child(even) {
		border-left:1px #CCC solid;
		padding-left:40px;
	}
	
	#service ul + p{
		text-align:center;
	}
	
}


@media only screen and (min-width:1280px) { 
	
	#service{
		margin:100px 0 0;
	}
	
	#service h2{
		margin:0 auto 280px;
		position:relative;
		width:1040px;
	}
	
	#service::before {
		position:absolute;
		top:73px;
	}
	
	#service ul h3,
	#service ul p{
		display:inline-block;
	}
	
	#service ul{
		margin:0 auto;
		width:1040px;
	}
	
	#service li{
		border-left:1px #CCC solid;
		margin:0 0 40px;
		padding-left:40px;
		width:33% !important;
	}

	#service li:nth-child(1),
	#service li:nth-child(3n + 1) {
		border:none;
		padding-left:0;
	}
				
	#service ul + p{
		margin:0 auto;
		width:1040px;
	}
	
}

/* recruit
────────────────────────────────────────*/

#recruit{
	border-top:1px #CCC solid;
	margin:30px 0 0;
	padding:30px 0 0;
}

#recruit section{
	color:#FFF;
	padding:20px;
	height:100%;
	margin:30px 0 0;
	position:relative;
}

#recruit section + section{
	margin:10px 0 0;
}

#recruit section::before {
	background:rgba(0,0,0,0.75);
	content:"";
	display:block;
	height:100%;
	position:absolute;
	top:0; left:0;
	width:100%;
	z-index:0;
}
	
#recruit section h3{
	font-size:24px;
	text-shadow:0 0 5px rgba(0,0,0,1.00);
	margin-top:20px;
	position:relative;
}

#recruit section p{
	text-shadow:0 0 5px rgba(0,0,0,1.00);
	line-height:1.6;
	position:relative;
}

#recruit span {
	display:block;
    overflow: hidden;
    width:100%;
	text-align:center;
	position:relative;
}

#recruit span img {
    -moz-transition: -moz-transform 0.3s linear;
    -webkit-transition: -webkit-transform 0.3s linear;
    -o-transition: -o-transform 0.3s linear;
    -ms-transition: -ms-transform 0.3s linear;
    transition: transform 0.3s linear;
	width:auto;
	height:auto;
	max-height:240px;
}

#recruit span img:hover {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}

#recruit section nav{
	margin-top:20px;
	position:relative;
	text-align:center;
}

#recruit section nav a{
	text-shadow:0 0 5px rgba(0,0,0,1.00);
	box-shadow:0 0 5px 0 rgba(0,0,0,1.00);
	border:1px #FFF solid;
	color:#FFF;
	padding:0.5em 2em;
}

#message{
	background:url(../img/recruit/message/photo_gray.jpg) no-repeat center;
	background-size:auto 100%;
}

#outline{
	background:url(../img/recruit/outline/photo_gray.jpg) no-repeat center;
	background-size:auto 100%;
}

@media only screen and (min-width:480px) {
		
	#recruit section{
		align-items:flex-start;
		display:flex;
		justify-content:flex-start;
		padding:30px;
	}
	
	#recruit span {
		display:block;
		overflow: hidden;
		width:50%;
		text-align:center;
		position:relative;
	}
	
	#recruit span img {
		height:auto;
		min-height:80px;
	}
	
	#recruit div{
		width:75%;
		padding:0 0 0 30px;
	}
	
	#recruit section h3{
		font-size:36px;
		margin-top:0;
	}
	
	#recruit section p{
		line-height:1.8;
		margin-top:1rem;
	}
	
	#message{
		background-size:100% auto;
	}
	
	#outline{
		background-size:100% auto;
	}
	
	#outline div{
		order:1;
		padding:0 30px 0 0;
	}
	
	#outline span{
		order:2;
	}
	
}

@media only screen and (min-width:1280px) { 
	
	#recruit{
		align-items:flex-start;
		margin:100px 0 0;
		display:flex;
		flex-wrap:wrap;
		justify-content:space-between;
		padding:40px 0 0;
	}
	
	#recruit header{
		width:100%;
	}
	
	#recruit h2{
		margin:0 auto;
		width:1040px;
	}
	
	#recruit section{
		margin:40px 0 0 !important;
		box-sizing:border-box;
		width:50%;
		width:calc(50% - 5px);
		padding:100px 40px;
	}
	
	#recruit span {
		min-width:120px;
	}
	
	#recruit span img {
		max-height:200px;
	}
	
	#recruit div{
		width:auto;
	}
	
	#recruit section nav a{
		padding:0.5em 4em;
	}
	
}

@media only screen and (min-width:1280px) { 

	#recruit span {
		width:300px;
	}
	#recruit span img {
		min-height:200px;
	}

}

/* contact
────────────────────────────────────────*/

#contact{
	border-left:1px #4ab3dd solid;
	border-right:1px #044b8f solid;
	margin:30px 0 0;
	position:relative;
}

#contact::before,
#contact::after {
	background: #4ab3dd;
	background: -moz-linear-gradient(45deg, #4ab3dd 0%, #044b8f 100%);
	background: -webkit-linear-gradient(45deg, #4ab3dd 0%,#044b8f 100%);
	background: linear-gradient(45deg, #4ab3dd 0%,#044b8f 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4ab3dd', endColorstr='#044b8f',GradientType=1 );
	content:"";
	display:block;
	height:1px;
	position:absolute;
	min-width:100%;
	left:0;
}

#contact::after {
	bottom:0;
}

#contact h2{
	padding:20px;
}

#contact p{
	padding:0 20px;
}

#contact p.contact{
	color:#4ab3dd;
	font-size:24px;
}

#contact p.contact a,
#contact p.contact span{
	color:#333;
}

#contact p:last-of-type {
	font-size:14px;
	padding-bottom:20px;
}


@media only screen and (min-width:640px) { 

	#contact{
		display:flex;
		flex-wrap:wrap;
	}
	
	#contact h2{
		box-sizing:border-box;
		width:100%;
	}
	
	#contact p.contact br{
		display:none;
	}
	
	#contact p:last-of-type {
		width:100%;
		margin:1em 0 0;
	}

}

@media only screen and (min-width:1280px) { 

#contact{
	width:1040px;
	margin:100px auto 0;
}

#contact h2{
	padding:40px 40px 20px;
}

#contact p{
	box-sizing:border-box;
	padding:0 40px;
}

#contact p.contact a,
#contact p.contact span{
	font-size:36px;
	text-decoration:none;
}

#contact p:last-of-type {
	padding-bottom:40px;
}

}

/*
────────────────────────────────────────*/

@media only screen and (min-width:375px) { 

}

@media only screen and (min-width:640px) { 
}

@media only screen and (min-width:1280px) { 
}