@charset "utf-8";

/* ------------------------------------------
	- COMMON SETTING
	- MAIN
		--
		--
	- FOOTER
------------------------------------------ */

/* ==============================================================
	HEADER
============================================================== */

header{
	height:700px;
	background: url(../img/header_bg.jpg) no-repeat;
	background-size: cover;
	background-position: center;
	position: relative;
}

a img.header_logo{
	position: absolute;
	top:30px;
	left:50px;
}
.main_title{
	position: absolute;
	top:250px;
	left: 150px;
}
.main_title img{
	display: block;
	margin-bottom:25px;

}
@media screen and (max-width:751px){
	header{
		height:80vw;
		width:100%;
		margin-top: 60px;
		background-position: right;
	}
	.main_title{
		width:90%;
		position: relative;
		left:0;
		right:0;
		top:85vw;
		margin:auto;
	}

}

/* ==============================================================
	MAIN
============================================================== */

main{padding-top: 80px; }
span.tag{
	display: inline-block;
	color: #fff;
	padding:2px 15px;
	margin-right:8px;;
}
@media screen and (max-width:751px){

}

/* ==============================================================
	SWIPER SLIDER
============================================================== */
.information{
	width:80%;
	display: block;
	margin:29vw auto 20px;
	position: relative;
	border-radius: 10px;
}
@media screen and (min-width:751px){
	.information{
		width: 1100px;
		height: 230px;
		margin:-140px auto 50px;
		background-size: auto auto;
		background-color: rgba(248, 185, 18, 1);
		background-image: repeating-linear-gradient(135deg, transparent, transparent 12px, rgba(247, 180, 0, 1) 12px, rgba(247, 180, 0, 1) 24px );
	}
}

.info_img img{	bottom:0;	position: absolute;	right:20px;}
.slider{
	position:relative;
	margin: 0 auto;
	width:90%;
	height:100%;
	background: #000;
	padding:30px 5%;
	border-radius: 5px;
}
.slider .swiper-container{ width:90%;	height:100%;	color: #fff; margin:0 auto;}
.slider .swiper-wrapper{	color: #fff;}
.slider .swiper-slide{
	width:90%;
	height:100%;
	flex-direction: column;
	justify-content: center;
	text-align: left;
}
@media screen and (min-width:751px){
	.slider{
		position:absolute;
		left:0;
		width: 650px;
		background: url(../img/black_bg.png) no-repeat;
		background-position: right;
		background-size: cover;
		padding: 0;
		border-radius: 10px 0 0 10px;
	}
	.slider .swiper-container{	width: 530px;}
	.slider .swiper-slide{	width: 500px;}
}

.slider .swiper-slide h2{	font-size: 20px;	margin:15px 0;}
.slider .swiper-slide p{	font-size: 14px;}
span.info_tag{	background: #6fb92c;}
span.new_mark{	color:#ff0000;	margin-left:8px;}
p.entry_btn{	display: flex;	align-items: center;	margin-top:15px;}
p.entry_btn img{	margin-right: 8px;}

@media screen and (max-width:751px){
	.slider .swiper-slide h2{	font-size: 18px; line-height: 1.5;}
	.slider .swiper-slide p{	font-size: 12px;}
}


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

/*  SEMINAR
------------------------------------------------ */
.recruit{
	padding:40px 20px 50px;
	/*padding:40px 20px 100px;*/
	margin:0 5%;
	border-radius: 20px 20px 0 0;
	background: url(../img/recruit_bg.png) no-repeat;
	background-size: cover;
	background-position: bottom;
	position: relative;
	z-index: 1;
}
.seminar{
	padding:20px;
	text-align: left;
	border-top: 6px solid #000;
	border-bottom: 6px solid #000;
	position: relative;
}
@media screen and (min-width:751px){
	.recruit{	max-width:1350px;	padding:20px 0 150px; 	margin:0 auto;}
	.seminar{	width:800px;	padding:20px 0;	margin:50px auto 0;}
}

.update{	font-size: 14px;}
.update span.recruit_tag{	background: #005ca1;}
.callout{
	position: absolute;
	display: block;
	left:-100px;
	top:-10px;
	z-index: 1;
}
.callout .img{	position: relative;	width:209px;}

@media screen and (max-width:751px){
	.update{	font-size: 10px;}
	.callout{	left:0;	top:25%;	z-index: 1;}
	.callout .img{	width:48%;}
}

.callout .date{
	position: absolute;
	display: block;
	right:0;
	left:0;
	top:0;
	bottom:0;
	margin: auto;
	z-index: 1;
	padding-right:25px;
}
.callout .date > .text{
	height:100%;
	justify-content: center;
	align-items: center;
	flex-direction:column;
}
.callout .date p{
	text-align: center;
	font-family: 'Montserrat', sans-serif;
	font-size: 52px;
	line-height: 1.2;
	font-weight: bold;
}
.callout .date p.year,.callout .date p.week{	font-size: 14px;}
.callout .date p.week{
	display: inline-block;
	background: #000;
	color: #fff;
	padding:3px 25px;
}
@media screen and (max-width:751px){
	.callout .date{	padding-right:15px;}
	.callout .date > .text{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction:column;
	}
	.callout .date p{	font-size: 24px;}
	.callout .date p.year,.callout .date p.week{	font-size: 10px;}
	.callout .date p.week{
		display: inline-block;
		background: #000;
		color: #fff;
		padding:3px 15px;
	}
}
.seminar > .text{	padding-left:130px;}
.seminar > .text p.title{	font-size: 30px;	line-height: normal;}
.details_btn{  display: flex; align-items: center; margin-top:10px;}
.details_btn img{ padding-right: 10px;}

@media screen and (max-width:751px){
	.seminar > .text{	padding-left:40%;}
	.seminar > .text p.title{	font-size: 16px;	line-height: normal;	margin-top:10px;}
	.details_btn a{  font-size: 12px;}
}

img.recruit_title{	margin: 50px auto;}
@media screen and (max-width:751px){
	img.recruit_title{	margin: 20px auto;}
}

.recruit .contents{	padding-bottom: 0;}
.recruit .contents h2{	color: #fff;}
.recruit .btn_flex{	justify-content: center;	margin:0 auto 40px;}
.recruit p.guide{	margin:0 auto;	color: #fff;}
.recruit .btn{	margin:40px auto;	justify-content: center;}
.recruit .btn a{
	display: block;
	width:100%;
	max-width: 320px;
	padding:30px 0;
	font-size: 18px;
	color: #fff;
	border-radius: 10px;
}
.recruit .btn a:first-child{	background: #6fb92c;}
.recruit .btn a:last-child{	background: #1b1b1b;}
@media screen and (min-width:751px){
	.recruit .btn_flex{	max-width:1200px;}
	.recruit .btn_flex a:first-child{	margin-right:30px;}
	.recruit p.guide{	width: 1000px;}
	.recruit .btn{	width: 1000px;}
	.recruit .btn a{	width:350px;}
	.recruit .btn a:first-child{	margin-right:30px;}
}
@media screen and (max-width:751px){
	.recruit .btn_flex a{	max-width: 502px;}
	.recruit .btn_flex a:first-child img{	margin-bottom:20px;}
	.recruit .btn a{	margin:20px auto;	font-size: 16px;}
}


/* ==============================================================
	VOICE
============================================================== */
.voice{
	background: url(../img/voice_bg.png) no-repeat;
	background-size: cover;
	background-position: top;
	position: relative;
	margin-top:-200px;
	height:900px;
}
@media screen and (max-width:751px){
	.voice{
		height:130vw;
		background: url(../img/sp/voice_bg.png) no-repeat;
		background-position: center top;
		background-size: cover;
		margin-top:-22%;
	}
}
.voice h2{
	position:relative;
	z-index: 5;
	padding-top:70px;
	color: #fff;
}
@media screen and (max-width:751px){
	.voice h2{	padding-top:8%;}
}
.voice .textArea{
	width:900px;
	margin:100px auto 0;
}
.voice .textArea .btn a{
	display: block;
	width:100%;
	max-width: 320px;
	padding:25px 0;
	font-size: 18px;
	color: #fff;
	border-radius: 10px;
	background: #6fb92c;
	margin:50px auto;
}
@media screen and (max-width:751px){
	.voice .textArea{
		width:90%;
		margin:5% auto 0;
	}
	.voice .textArea .btn a{	margin:20px auto 50px;	font-size: 16px;}
}

/* ==============================================================
	COMPANY
============================================================== */
.company h2{	margin-top:30px;	color: #f7b400;}
.company img{ margin-top: 40px;}
.company p{ margin:40px auto;}
.company .btn a{
	display: inline-block;
	padding:15px 60px;
	background: #6fb92c;
	border:5px solid #fff;
	border-radius: 10px;
	color: #fff;
}

@media screen and (max-width:751px){
.company{	/*margin-top: 230px;*/ margin-top: 50px;}
	.company img.main_logo{	width:40%;	margin:40px auto 0;}
}

/* ==============================================================
	MESSAGE
============================================================== */
.message{
	padding-bottom:380px;
	background: url(../img/message_bg.jpg) no-repeat;
	background-size: cover;
	background-position:bottom;
	text-align: left;
}
.message h2{ color: #f7b400;}
.message_inner{
	background: url(../img/message_img.jpg) no-repeat;
	background-size: cover;
	background-position: top;
}
.message img{	margin-top:40px;}
.message .btn{	margin-top:40px;}
.message .btn a{
	border: #f7b400 solid 3px;
	border-radius: 10px;
	color: #f7b400;
	padding:15px 40px;
}

@media screen and (max-width:751px){
	img.message_img{	margin-top:0; margin-bottom:-5px;}
	.message{
		padding-bottom:250px;
		background: url(../img/sp/message_bg.jpg) no-repeat;
		background-size: cover;
		background-position:bottom center;
	}
	.message_inner{
		background: none;
	}
	.message_inner .contents{
		text-align: center;
		margin-top:0;
		padding-top: 40px;
	}
	.message_inner .contents img{
		width:65%;
	}
	.message_inner .contents img.ceo_name{
		width:40%;
		margin:20px auto 0;
	}
}
.callout .date .multi .days {
	font-size: 32px;
	margin: 0 0 0.25em;
}
.callout .date .multi .week {
	text-transform: uppercase;
}
@media screen and (max-width:751px){
	.callout .date .multi .days {
		font-size: 14px;;
	}
	.callout .date p.week {
		padding: 3px 5px;
	}

}

.home #wrap {
	opacity: 0;
}