@charset "utf-8";

/* ****************************************************
Title: index.css
---------------------------------------------------------------------------- */
#va {position: relative;}

#va .va_catch {
	position: absolute;
	top: 55%;
	left: 50%;
	transform: translateX(-50%);
}
#va .va_catch p {
	word-break: keep-all;
}
#va .va_catch .va_catch_ja {
	margin-bottom: 20px;
	font-size: 100px;
	font-weight: 600;
	color: #fff;
	line-height: 1;
	text-align: center;
	letter-spacing: .01em;
}
#va .va_catch .va_catch_ja small {
	font-size: 70%;
}
#va .va_catch .va_catch_en {
	font-size: 36px;
	font-weight: 400;
	color: #fff;
	line-height: 1;
	text-align: center;
	letter-spacing: .01em;
}

#va .entry_btn_area {
	position: absolute;
	top: 80%;
	left: 0;
	right: 0;
	margin:auto;
	width: 800px
}

#va .va_entry_btn a {
	display: block;
	width: calc(720px / 3);
	padding: 15px 70px;
	color: #fff;
	text-align: center;
	text-decoration: none;
}
#va .va_entry_btn a.bg_wh {
	color: #000;
	background-color: #fff;
}
#va .va_entry_btn a.bg_db {
  color: #fff;
	background-color: #2E1B11;
}
#va .va_entry_btn a.bg_orig {
	color: #000;
	background-color: #eee;
}
#va .va_entry_btn a.bg_gld {
	color: #000;
	background-color: #FFF7DD;
}

#va .bg_wh {
	background-color: #fff;
}

#va .va_entry_btn a.part {
	color: #000;
}

#va .va_entry_btn a:hover {
	opacity: 0.7;
}

#va .va_entry_btn a span {
	display: block;
	text-align: center;
}

#va .va_entry_btn a span.btn_en {
	font-size: 24px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: .025em;
}

#va .va_entry_btn a span.btn_ja {
	margin-top: 10px;
	font-size: 12px;
	line-height: 1;
}

@media screen and (max-width: 1080px) {
	#va .va_catch .va_catch_ja {
		font-size: calc(80 / 1080 * 100vw);
	}
	#va .va_catch .va_catch_en {
		font-size: calc(24 / 1080 * 100vw);
	}
	#va .entry_btn_area {
		top: calc(55% + 180 / 1080 * 100vw);
	}
}

@media screen and (max-width: 739px) {
	#va .va_catch {
		top: 45%;
	}
	#va .entry_btn_area {
		width: 100%;
		justify-content: center;
	}
	
	#va .va_entry_btn:not(:last-of-type) {
		margin-right: calc(20 / 750 * 100vw);
	}

	#va .va_entry_btn a{
		padding: calc(16 / 750 * 100vw) 0;
		width: calc(680 / 750 * 100vw / 3);
	}
	
	#va .va_entry_btn a span.btn_en{
		font-size: calc(30 / 750 * 100vw);
	}
	#va .va_entry_btn a span.btn_ja {
		margin-top: calc(16 / 750 * 100vw);
		font-size: calc(24 / 750 * 100vw);
	}
	#va .va_catch .va_catch_ja {
		margin-bottom: calc(20 / 1080 * 100vw);
		font-size: calc(50 / 750 * 100vw);
	}
	#va .va_catch .va_catch_en {
		font-size: calc(28 / 750 * 100vw);
	}
	#va .entry_btn_area {
		top: calc(45% + 160 / 750 * 100vw);
	}
}

@media screen and (min-width: 1441px) {
	#va .entry_btn_area {
		width: calc(800 / 1440 * 100vw);
	}
	#va .va_entry_btn a {
		width: calc(720 / 1440 * 100vw / 3);
		padding: calc(15 / 1440 * 100vw) calc(70 / 1440 * 100vw);
	}
	#va .va_entry_btn a span.btn_en {
		font-size: calc(24 / 1440 * 100vw);
	}
	#va .va_entry_btn a span.btn_ja {
		font-size: calc(12 / 1440 * 100vw);
	}
}

section {
	padding-top: 40px;
}

section h3 {
	margin-bottom: 30px;
}

/* =============================
 .section1
==============================*/
.sec01 {
	padding-bottom: 75px;
	margin-top: -1px;
}
.sec01 .center li{
	margin: 0 20px;
}

.sec01 .center li a:hover {
	opacity: 0.7;
}


.sec01 .center li img {
	width: 100%;
}

@media screen and (max-width: 739px) {
	.sec01 .fadein {
		opacity: 1;
		visibility: visible;
		transform: translate(0, 0);
	}
}


/* =============================
 .section2
==============================*/
.sec02 {
	padding: 40px 40px 50px;
}

.sec02 .ivlists {
	margin: 0 auto;
	max-width: 1200px;
}

.ivlist {
	width:31.7%;
	height:253px;
	overflow:hidden;
	position:relative;
	margin-bottom: 30px;
}

.ivlist img {
	width: 100%;
}

.ivlist dl dt {
	font-size:		80%;
	text-align: 	center;
	color:			#fff;
	margin-bottom: 5px;
}
.ivlist dl dd {
	text-align: 	center;
	color:			#fff;
	font-weight: bold;
}

.ivlist dl dd.catch {
	margin-top: 20px;
	font-size: 120%;
	clear: both;
}

.ivlist .mask {
	width:			100%;
	height:			100%;
	position:		absolute;
	top:			0;
	left:			0;
	opacity:		0;	/* マスクを表示しない */
	background-color:	rgba(0,0,0,0.4);
	-webkit-transition:	all 0.6s ease;
	transition:		all 0.6s ease;
}
.ivlist:hover .mask {
	opacity:		1;	/* マスクを表示する */
	padding-top:		80px;	/* ホバーで下にずらす */
}


/* =============================
 .section3
==============================*/
.comlist{position: relative;width: 33.3333333%;}
.comlist a {color: #fff;text-decoration: none;}
.comlist a img{
	width: 100%;
}
.comlist a:hover {
	opacity: 0.7;
}

.comlist dl{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 80%;
  height: 3.2rem;
  text-align: center;
}

.sec03 .comlist dt {
	font-size: 26px;
	letter-spacing: .01em;
}
.sec03 .comlist dd {
	font-size: 15px;
}




@media screen and (max-width: 739px) {


#va{height: auto;}


section {
	padding-top: 20px;
}
.sec02 {
	padding: 20px 0 50px;
}
.sec02 .ivlist a.ivimg {text-decoration: none;}

.sec02 .ivlist .mask{position: inherit;
opacity: 1;
top: auto;
left: auto;
color: #Fff;
background-color: #2E1B11;
}

.sec02 .ivlist .mask dl{padding: 10px;}
.sec02 .ivlist .mask dl dt{color: #fff;}
.sec02 .ivlist .mask dl dd{color: #fff;}
.sec02 .ivlist .mask dl dd.name{font-size: 90%;}
.sec02 .ivlist .mask dl dd.catch{margin-top: 10px;font-size: 90%;}
.ivlist:hover .mask {
	opacity:1;	/* マスクを表示する */
	padding-top:0px;	/* ホバーで下にずらす */
}

section h3 {
    margin-bottom: 20px;
}

.ivlists {width: 95%;}
.ivlist {
    width: 48%;
    height: auto;
}

.comlist {
    width: 50%;
}
.comlist dl{

}

.sec03 .comlist dt{
	font-size: 17px;
}
.sec03 .comlist dd {
	font-size: 15px;
}

.sec03 .comlist .cl_ls dt{
	letter-spacing: .01em;
}


/***/}


/*2024*/
#p-navi{
	background: #2E1B11;
	padding: 66px 40px;
}
.page-navi{
	max-width: 1200px;
	margin: auto;
}
.page-navi li{
	background: #fff;
}
.page-navi .page-navi-works a{
	background: url("../img/top/top-works.jpg") no-repeat center center;
	background-size: cover;
}
.page-navi .page-navi-interview a{
	background: url("../img/top/top-interview.jpg") no-repeat center center;
	background-size: cover;
}
.page-navi .page-navi-fresh a{
	background: url("../img/top/top-fresh.jpg") no-repeat center center;
	background-size: cover;
}
.page-navi li a{
	display: block;
	padding: 35px 0;
}
.page-navi li a:hover{
	opacity: .7;
}
.page-navi-ttl{
	background: rgba(46,27,17,.5);
	color: #fff;
	display: inline-block;
	padding: 40px 20px;
	max-width: 461px;
	width: 45%;
	position: relative;
}
.page-navi-ttl::after{
	content: "";
	width: 254px;
	height: 14px;
	background: url("../img/common/arrow.svg") no-repeat center center;
	background-size: contain;
	position: absolute;
	bottom: 30px;
	left: 10px;
}
.page-navi-ttl span{
	display: block;
	font-weight: 400;
}
.page-navi-ttl .enb{
	font-size: 34px;
}
.page-navi-ttl .jpn{
	font-size: 18px;
}
@media screen and (max-width: 739px) {
#p-navi {
    background: #2E1B11;
    padding: 40px 20px;
}
.page-navi .page-navi-works a{
	background: url("../img/top/top-works-sp.jpg") no-repeat center center;
	background-size: cover;
}
.page-navi .page-navi-interview a{
	background: url("../img/top/top-interview-sp.jpg") no-repeat center center;
	background-size: cover;
}
.page-navi .page-navi-fresh a{
	background: url("../img/top/top-fresh-sp.jpg") no-repeat center center;
	background-size: cover;
}
.page-navi-ttl{
	padding: 20px 10px;
	max-width: 461px;
	width: 60%;
	position: relative;
}
.page-navi-ttl::after{
	content: "";
	background: url("../img/common/arrow-sp.svg") no-repeat center center;
	background-size: contain;
	position: absolute;
	width: 82px;
	height: 7px;
	bottom: 12px;
	left: 10px;
}
.page-navi-ttl .enb{
	font-size: 18px;
}
.page-navi-ttl .jpn{
	font-size: 10px;
}
}

/*採用ボタン追加*/
#va .entry_btn_area.orig {
    position: absolute;
    top: 80%;
    left: 0;
    right: 0;
    margin: auto;
	width: 80%;
    max-width: 1400px;
	gap: 20px;
}
.va_entry_btn{
	width: 100%;
}
#va .va_entry_btn a {
    width: 100% !important;
}
@media screen and (max-width: 1440px) {
#va .entry_btn_area.orig {
    max-width: 1000px;
}
}
@media screen and (max-width: 1240px) {

	#va .va_entry_btn a {
    width: calc(720px / 4);
    padding: 15px 20px;
}
}
@media screen and (max-width: 1000px) {
#va .entry_btn_area.orig {
	width: 90%;
}
	#va .va_entry_btn a {
    width: calc(720px / 4);
    padding: 15px 20px;
}
}

@media screen and (max-width: 739px) {
	#va .entry_btn_area.orig {
    top: 76%;
		gap: 0;
		width: 94%;
}
	    #va .va_entry_btn:not(:last-of-type) {
        margin-right: calc(10 / 750* 100vw);
    }
    #va .va_entry_btn a {
        padding: calc(16 / 750* 100vw) 0;
        width: calc(680 / 750* 100vw / 4);
    }
	#va .va_entry_btn a span.btn_en {
        font-size: calc(30 / 750* 100vw);
    }
	    #va .va_entry_btn a span.btn_ja {
        margin-top: calc(16 / 750* 100vw);
        font-size: calc(22 / 750* 100vw);
    }
}