@charset "utf-8";

/* ------------------------------------------
	-
	-
		--
		--
		--
		--
		--
------------------------------------------ */

/* ==============================================================
	COMMON SETTING
============================================================== */
ul.page_link{
	display: flex;
	width:460px;
	margin: 0 auto 85px;
	justify-content: center;
}
@media screen and (max-width:750px){
	ul.page_link{
		width:100%;
	}
}
ul.page_link li{
	padding: 0 30px;
	border-right: solid 1px #726f6e;
	position: relative;
	text-align: center;
}
@media screen and (max-width:750px){
	ul.page_link li{
		padding: 0 5%;
	}
}
ul.page_link li a{
	font-size: 16px;
	letter-spacing: 0.4em;
	text-align: center;
}
@media screen and (max-width:750px){
	ul.page_link li a{
		font-size: 12px;
	}
}
ul.page_link li:last-child{
	border-right: none;
}
@media screen and (max-width:750px){

}

/*　SELECT & HOVER
------------------------------------------------ */

ul.page_link li.select::after,ul.page_link li:hover::after{
		position: absolute;
    content: '';
    display: block;
    background: #000;
    height: 1px;
    width: 60%;
		margin: 15px auto;
}
@media screen and (max-width:750px){

}


/* ==============================================================
	ABOUT
============================================================== */
.about h2.eng{
	font-size: 24px;
	letter-spacing: 0.4em;
	margin-bottom: 100px;
}
@media screen and (max-width:750px){
	.about h2.eng{
		font-size: 20px;
		margin-bottom: 30px;
	}
}

/*	HEADER AREA
------------------------------------------------ */
.about .headerArea{
	width:820px;
	margin: 0 auto;
}
@media screen and (max-width:750px){
	.about .headerArea{
		width:90%;
		margin: 0 auto;
	}
}
.about .headerArea img{
	margin-bottom: 85px;
}
@media screen and (max-width:750px){
	.about .headerArea img{
		margin-bottom: 45px;
	}
	.about .headerArea img:first-child{
		width:70%;
	}
}
.about .headerArea p{
	margin-bottom: 50px;
}
@media screen and (max-width:750px){
	.about .headerArea p{
		text-align: left;
		margin-bottom: 30px;
	}
}

/* ------ SLIDESHOW ----- */
#slideshow {
	position: relative;
	width:  700px; /* ボックスの横幅 */
	height: 530px; /* ボックスの高さ */
	margin: 0 auto 80px;
}
@media screen and (max-width:750px){
	#slideshow {
		position: relative;
		width:  100%; /* ボックスの横幅 */
		height: 70vw; /* ボックスの高さ */
		margin: 0 auto 50px;
	}
}
#slideshow p {
	position: absolute;
	top:  0;
	left: 0;
	z-index: 8;
	opacity: 0.0;
	margin: 0;
	background-color: white; /* ボックスの背景色(必須) */
	height: 100%; /* ボックスの高さ */
	text-align: left;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.7;
}
#slideshow p.active {
	z-index: 10;
	opacity: 1.0;
}
#slideshow p.last-active {
	z-index: 9;
}
#slideshow p img {
	width:  700px; /* 画像の横幅 */
	height: 500px; /* 画像の高さ */
	display: block;
	border: 0;
	margin-bottom: 5px; /* 画像下部の余白 */
}
@media screen and (max-width:750px){
	#slideshow p img {
		width:  100%; /* 画像の横幅 */
		height: 57vw; /* 画像の高さ */
	}
}






/*	MAIN AREA
------------------------------------------------ */
.about .mainArea{
	margin: 50px auto 0;
	width:1200px;
	justify-content: space-between;
	align-items: flex-start;
}
@media screen and (max-width:750px){
	.about .mainArea{
		margin: 30px auto 0;
		width:90%;
		flex-flow: column;
	}
}
.about .mainArea .block{
	width:550px;
}
@media screen and (max-width:750px){
	.about .mainArea .block{
		width:100%;
		margin-bottom: 55px;
	}
}
.about .mainArea table{
	width:100%;
}
.about .mainArea table th,.about .mainArea table td{
	padding: 12px 0;
	text-align: left;
	font-size: 14px;
	line-height: 1.5;
}
@media screen and (max-width:750px){
	.about .mainArea table th,.about .mainArea table td{
		font-size: 12px;
		display: block;
		width:100%;
	}
}
.about .mainArea table th{
	width:180px;
}
@media screen and (max-width:750px){
	.about .mainArea table th{
		width:100%;
		padding: 10px 0 3px;
		font-weight: bold;
	}
	.about .mainArea table td{
		padding: 0 0 10px;
		line-height: 1.8;
	}
}





/* ==============================================================
	STAFF
============================================================== */
.staff h2{
	font-size: 18px;
	line-height: 1.8;
	margin: 20px auto;
}
@media screen and (max-width:750px){
	.staff h2{
		font-size: 16px;
		line-height: 1.5;
		margin: 20px auto 10px;
	}
}
.staff h2 span{
	font-size: 14px;
}
@media screen and (max-width:750px){
	.staff h2 span{
		font-size: 12px;
	}
}
.staff p{
	text-align: left;
	margin-bottom: 20px;
	line-height: 1.8;
}
@media screen and (max-width:750px){
	.staff p{
		margin-bottom: 10px;
		line-height: 1.5;
		font-size: 12px;
	}
}


/*	HEADER AREA
------------------------------------------------ */
.staff .headerArea{
	width: 670px;
	margin: 50px auto 120px;
	justify-content: center;
	align-items: flex-start;
}
@media screen and (max-width:750px){
	.staff .headerArea{
		width: 90%;
		margin: 20px auto 50px;
		justify-content: center;
		align-items: flex-start;
	}
}
.staff .headerArea .img,.staff .headerArea .text{
	width: 300px;
	margin: 0 17.5px;
}
@media screen and (max-width:750px){
	.staff .headerArea .img,.staff .headerArea .text{
		width: 70%;
		margin: 0 auto;
	}
}
.staff .headerArea .text h2{
	text-align: left;
}
@media screen and (max-width:750px){
}

/*	MAIN AREA
------------------------------------------------ */
.staff .mainArea{
	width:1050px;
	justify-content: flex-start;
	align-items:stretch;
	flex-wrap: wrap;
	margin: 0 auto;
}
@media screen and (max-width:750px){
	.staff .mainArea{
		width:100%;
		display: flex;
	}
}
.staff .mainArea .item_block{
	width:300px;
	margin: 0 25px 60px;
}
@media screen and (max-width:750px){
	.staff .mainArea .item_block{
		width:45%;
		margin: 0 2.5% 30px;
	}
}


/* ==============================================================
	RECRUIT
============================================================== */

/*	HEADER AREA
------------------------------------------------ */
.recruit .headerArea{
	margin: 50px auto 170px;
	position: relative;
}
@media screen and (min-width:750px){
	.recruit .headerArea{
		min-width: 1200px;
		max-width: 1400px;
	}
}
@media screen and (max-width:750px){
	.recruit .headerArea{
		margin: 30px auto 50px;
		position: relative;
	}
}
.recruit .headerArea p{
	margin: 70px auto 70px 50%;
	text-align: left;
}
@media screen and (max-width:750px){
	.recruit .headerArea p{
		margin: 30px auto;
		text-align: center;
		width:80%;
	}
}
.recruit .headerArea p img{
	padding-left:40px;
}
@media screen and (max-width:750px){
	.recruit .headerArea p img{
		padding-left:0;
	}
}
.recruit .headerArea .textArea{
	width:50%;
	background: #fff;
	position: absolute;
	bottom:-100px;
	left:0;
}
@media screen and (max-width:750px){
	.recruit .headerArea .textArea{
		width:90%;
		position: relative;
		top:0;
		margin: 0 auto;
	}
}
.recruit .headerArea .textArea .inner{
	margin: 50px 60px 50px auto;
}
@media screen and (min-width:750px){
	.recruit .headerArea .textArea .inner{
		max-width:440px;
	}
}
@media screen and (max-width:750px){
	.recruit .headerArea .textArea .inner{
		width: 100%;
		margin: 30px 0;
	}
}
.recruit .headerArea .textArea .inner p{
	margin:0 auto 25px;
	text-align: left;
}
@media screen and (max-width:750px){
	.recruit .headerArea .textArea .inner p{
		width: 100%;
		margin-bottom: 15px;
		font-size: 12px;
	}
}



/*	MAIN AREA
------------------------------------------------ */
.recruit .mainArea{
	width:1000px;
	margin:0 auto;
}
@media screen and (max-width:750px){
	.recruit .mainArea{
		width:100%;
		margin:0 auto;
	}
}
.recruit .mainArea h2{
	margin-bottom: 30px;
	text-align:left;
}
@media screen and (max-width:750px){
	.recruit .mainArea h2{
		margin-bottom: 20px;
		height:15px;
	}
	.recruit .mainArea h2 img{
		height: 100%;
	}
}
.recruit .mainArea .block{
	margin-bottom: 100px;
}
@media screen and (max-width:750px){
	.recruit .mainArea .block{
		width:90%;
		margin: 0 auto 50px;
	}
}
.recruit .mainArea .item_block{
	display: flex;
}
@media screen and (max-width:750px){
	.recruit .mainArea .item_block{
		display: block;
	}
}
.recruit .mainArea .item_block .img{
	width:500px;
}
@media screen and (max-width:750px){
	.recruit .mainArea .item_block .img{
		width:100%;
	}
}
.recruit .mainArea .item_block .text{
	padding-left: 30px;
	width:470px;
	text-align: left;
}
@media screen and (max-width:750px){
	.recruit .mainArea .item_block .text{
		padding-left: 0;
		width:100%;
	}
}
.recruit .mainArea h3{
	font-size: 18px;
	line-height: 1.3;
	margin-bottom: 30px;
}
@media screen and (max-width:750px){
	.recruit .mainArea h3{
		font-size: 16px;
		margin: 20px auto;
	}
}
.recruit .mainArea .item_block .text p{
	margin-bottom: 30px;
	line-height: 1.7;
}
@media screen and (max-width:750px){
	.recruit .mainArea .item_block .text p{
		font-size: 12px;
		margin-bottom: 20px;
	}
}
.recruit .mainArea .item_block .text p:last-child{
	margin-bottom: 0;
}
@media screen and (max-width:750px){
}

/*	FOOTER AREA
------------------------------------------------ */
.recruit .footerArea .btnArea{
	margin-bottom: 75px;
}
@media screen and (max-width:750px){
	.recruit .footerArea .btnArea{
		width:90%;
		margin: 75px auto 40px;
	}
}
.recruit .footerArea p{
	font-size: 16px;
	margin-bottom: 30px;
	line-height: 1.7;
}
@media screen and (max-width:750px){
	.recruit .footerArea p{
		font-size: 14px;
		margin-bottom: 20px;
		line-height: 1.5;
	}
}
.recruit .footerArea .btnArea p,
.recruit .footerArea p strong{
	font-size: 14px;
}
@media screen and (max-width:750px){
	.recruit .footerArea .btnArea p,
	.recruit .footerArea p strong{
		font-size: 12px;
	}
}
.recruit .footerArea p span{
	font-size: 18px;
}
@media screen and (max-width:750px){
	.recruit .footerArea p span{
		font-size: 16px;
	}
}
.recruit .footerArea p.btn{
	width: 450px;
	margin-bottom: 25px;
}
@media screen and (max-width:750px){
	.recruit .footerArea p.btn{
		width: 80%;
		margin-bottom: 25px;
	}
}
.recruit .footerArea p.btn a{
	padding: 15px 0;
}
@media screen and (max-width:750px){
	.recruit .footerArea p.btn a{
		padding: 5px 0;
	}
}
.recruit .footerArea p.btn a img{
	vertical-align: middle;
}
@media screen and (max-width:750px){
	.recruit .footerArea p.btn a img{
		width:70%;
	}
}