@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;700&display=swap');

.fontRobotoCondensed {
	font-family: "Roboto Condensed", sans-serif;
}

html {
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	-webkit-font-smoothing: antialiased;
	line-height: 1.5;
	color: var(--text-color);
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: 0.05em;
	font-size: 15px;
}

img {
	width: 100%;
}

.fcRD {
	color: #D32F29
}

/* test A */

.picSlideIn {
	overflow: hidden;
	width: fit-content;
}

.picSlideIn .picSlideIn-inner {
	opacity: 0;
}

.picSlideIn.isPlay .picSlideIn-inner,
.picSlideIn.isPlay-delay .picSlideIn-inner {
	animation: picSlideIn-play .4s cubic-bezier(.8, 0, .5, 1) forwards;
	position: relative;
	opacity: 1 !important;
}
.picSlideIn.isPlay .picSlideIn-inner:before,
.picSlideIn.isPlay-delay .picSlideIn-inner:before {
	animation: picSlideIn-maskOut .4s cubic-bezier(.8, 0, .5, 1) .4s forwards;
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	background-color: #E0E0E0;
}


@keyframes picSlideIn-play {
	from {
		transform: translateX(-100%);
	}

	to {
		transform: translateX(0);
	}
}

@keyframes picSlideIn-maskOut {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(100%);
	}
}
/* test B */

.textSlideRight {
	opacity: 0;
}

.textSlideRight.isPlay {
	animation: textSlideRight .5s ease-in-out forwards;
}

@keyframes textSlideRight {
	from {
		transform: translateX(-30px);
		opacity: 0;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

.textSlideUp {
	opacity: 0;
}

.textSlideUp.isPlay {
	animation: textSlideUp .5s ease-in-out .1s forwards;
}

@keyframes textSlideUp {
	from {
		transform: translateY(20px);
		opacity: 0;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

/*************
メディアクエリ
*************/
@media(min-width:1025px) {

	.sp,
	.tbsp,
	.tb {
		display: none;
	}
}

@media(max-width:1024px) {
	.pc {
		display: none;
	}
}

@media(min-width:769px) {
	.sp {
		display: none;
	}
}

@media(max-width:768px) {

	.pc,
	.pctb,
	.tb {
		display: none;
	}
}

@media(max-width:480px) {
	.pctbsp {
		display: none;
	}
}

/* --------------------------------------------------------------------
/* Margin , Padding
-------------------------------------------------------------------- */

.mb0 {
	margin-bottom: 0px !important;
}

.mb5 {
	margin-bottom: 5px !important;
}

.mb10 {
	margin-bottom: 10px !important;
}

.mb15 {
	margin-bottom: 15px !important;
}

.mb20 {
	margin-bottom: 20px !important;
}

.mb25 {
	margin-bottom: 25px !important;
}

.mb30 {
	margin-bottom: 30px !important;
}

.mb35 {
	margin-bottom: 35px !important;
}

.mb40 {
	margin-bottom: 40px !important;
}

.mb45 {
	margin-bottom: 45px !important;
}

.mb50 {
	margin-bottom: 50px !important;
}

.mb55 {
	margin-bottom: 55px !important;
}

.mb60 {
	margin-bottom: 60px !important;
}

.mb65 {
	margin-bottom: 65px !important;
}

.mb70 {
	margin-bottom: 70px !important;
}

.mb75 {
	margin-bottom: 75px !important;
}

.mb80 {
	margin-bottom: 80px !important;
}

.mb85 {
	margin-bottom: 85px !important;
}

.mb90 {
	margin-bottom: 90px !important;
}

.mb95 {
	margin-bottom: 95px !important;
}

.mb100 {
	margin-bottom: 100px !important;
}

.ml0 {
	margin-left: 0px !important;
}

.ml5 {
	margin-left: 5px !important;
}

.ml10 {
	margin-left: 10px !important;
}

.ml20 {
	margin-left: 20px !important;
}

.ml30 {
	margin-left: 30px !important;
}

.mr0 {
	margin-right: 0px !important;
}

.mr5 {
	margin-right: 5px !important;
}

.mr10 {
	margin-right: 10px !important;
}

.mr20 {
	margin-right: 20px !important;
}

.mr30 {
	margin-right: 30px !important;
}

.mt0 {
	margin-top: 0px !important;
}

.mt5 {
	margin-top: 5px !important;
}

.mt10 {
	margin-top: 10px !important;
}

.mt20 {
	margin-top: 20px !important;
}

.mt30 {
	margin-top: 30px !important;
}

.mt35 {
	margin-top: 35px !important;
}

.mt40 {
	margin-top: 40px !important;
}

.pb0 {
	padding-bottom: 0px !important;
}

.pb5 {
	padding-bottom: 5px !important;
}

.pb10 {
	padding-bottom: 10px !important;
}

.pb20 {
	padding-bottom: 20px !important;
}

.pb30 {
	padding-bottom: 30px !important;
}

.pb40 {
	padding-bottom: 40px !important;
}

.pt0 {
	padding-top: 0px !important;
}

.pt5 {
	padding-top: 5px !important;
}

.pt10 {
	padding-top: 10px !important;
}

.pt20 {
	padding-top: 20px !important;
}

.pt30 {
	padding-top: 30px !important;
}

/*************
recruit共通
*************/
#recruit {
	background-color: #D32F29;
	background-image: url("../img/bg-img-wr.png");
	background-repeat: repeat;
	background-position: center top;
	background-size: 128px auto;
}

.container {
	max-width: calc(1140px + 8vw);
	width: 100%;
	padding: 0 4vw;
	margin: 0 auto;
}

.topContH301 {
	color: #fff;
	margin-bottom: 30px;
}

.topContH301 .s01 {
	display: block;
	font-size: 15px;
	line-height: 1.1em;
	font-weight: bold;
	margin-bottom: 6px;
}

.topContH301 .s02 {
	display: block;
	font-size: 48px;
	line-height: 1.1em;
	font-weight: bold;
}

.mv {}

#join_us,
#voices,
#work_place,
#voices,
#details,
#faq {
	padding: 96px 0;
}

/*************
TOPに戻るボタン
*************/
#top_btn {
	display: none;
	position: fixed;
	bottom: 10px;
	right: 10px;
	height: 48px;
	width: 48px;
	background-color: rgba(0, 0, 0, 0.5);
	border-radius: 8px;
	z-index: 999;
	transition: all 0.3s;
}

#top_btn::after {
	content: "";
	position: absolute;
	top: 56%;
	left: 50%;
	height: 12px;
	width: 12px;
	border-top: 2px solid #FFF;
	border-right: 2px solid #FFF;
	transform: translate(-50%, -50%) rotate(-45deg);
}

/*************
スクロールで下から出現
*************/
.fadeUp {
	opacity: 0;
	visibility: hidden;
	transform: translateY(30px);
	transition: opacity 1s, visibility 1s, transform 1s;
}

.is-fadein {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/*************
header
*************/
/* -------------------- */
/* header
/* -------------------- */
.header {
	align-items: center;
	color: #fff;
	display: flex;
	justify-content: space-between;
	padding: 24px 48px;
}
.headerLogo01{
	display: flex;
	align-items: center;
}
.logo_recruit {}

.nav-list {
	/* navの横並び */
	display: flex;
	gap: 48px;
}
.nav-item a {
	font-size: 16px;
	font-weight: bold;
	display: block;
	padding-bottom: 4px;
	position: relative;
	transition: all 0.3s ;
}

  .nav-item a::after {
	background-color: #FFF;
	bottom: 0;
	content: '';
	display: block;
	height: 1px;
	left: 0;
	position: absolute;
	transition: .5s all;
	width: 0;
  }

  .nav-item a:hover::after {
	width: 100%;
  }
.burger-btn {
	display: none;
}


/* MV */
.mv {
	width: 100%;
	overflow: hidden;
	margin: 0 auto;
	position: relative;
}

/* swiper */
.swiper {
	padding: 0 0 32px;
	opacity: 0;
}
.swiper-container-initialized {
	opacity: 1;
}

.swiper-slide {}

.swiper-slide:nth-child(even) {
	padding: 64px 0 0 0 !important;
}

.swiper-slide img {
	height: auto;
	width: 100%;
	border-radius: 16px;
	padding: 0 4px;
}

/* スライドの動き等速 */
.swiper-wrapper {
	/* transition-timing-function: linear; */
}

@media(max-width:768px) {
	.swiper-slide:nth-child(even) {
		padding: 32px 0 0 0 !important;
	}

	.swiper-slide img {
		border-radius: 8px;
		padding: 0 2px;
	}

}
.h1_recruit{
    margin: 0 24px;
    color: #FFF;
    font-weight: bold;
    border: 1px solid #fff;
    background-color: #D32F29;
    padding: 0 12px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;

}
.ttl_recruit {
	position: absolute;
	bottom: 0;
	z-index: 1;
	padding: 0 48px;
}

.ttl_recruit p {
	color: #D32F29;
	background-color: #fff;
	padding: 0.1em 0.4em;
	font-size: 40px;
	font-weight: bold;
	margin: 8px 0 0;
	display: table;
}

/* 求める人材 */
.txt_join_us {
	font-size: 18px;
	font-weight: bold;
	color: #fff;
}

/* 先輩社員の声 */
#voices {
	background-color: #E0E0E0;
}

.cont_voices {
	margin: 32px 0 0 0;
}

.block_voices {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #fff;
	padding: 48px;
	border-radius: 16px;
	gap: 32px;
}

.block_voices+.block_voices {
	margin: 16px 0 0;
}

.img_voices {
	width: 34%;
}

.info_voices {
	width: auto;
	flex: 1;
}

.info_voices_hd {
	font-size: 20px;
	font-weight: bold;
	margin: 0 0 16px;
}

/* 働く環境 */
.cont_work {
	display: flex;
	justify-content: space-between;
	background-color: #fff;
	padding: 48px;
	border-radius: 16px;
	gap:48px;
}
.block_work{
width: 31%;
}
.info_work_hd {
	font-size: 20px;
	font-weight: bold;
	margin: 12px 0 8px;
}

/* 募集要項 */
#details {
	background-color: #E0E0E0;
}
.cont_details {
	background-color: #fff;
	padding: 48px;
	border-radius: 16px;
}
.dl_details{
	display: flex;
	justify-content: space-between;
	font-size: 16px;
}
.dl_details + .dl_details{
	padding: 32px 0 0 ;
}
.dt_details{
	width: 152px;
	border-bottom: #D32F29 1px solid;
	padding: 0 0 32px 16px;
	font-weight: 400;
}
.dd_details{
	flex: 1;
	border-bottom: #CACACA 1px solid;
	padding: 0 0 32px 16px;
}


/*************
btn
*************/
.recruit_btn_wrap {
	margin: 80px auto 16px;
}
.recruit_btn {
	display: block;
	border-radius: 8px;
	background-color: #D32F29;
	border: 1px solid #D32F29;
	color: #FFF;
	padding: 24px 0;
	padding-right: 16px;
	max-width: 320px;
	width: 100%;
	margin: 0 auto;
	position: relative;
	font-weight: bold;
	text-align: center;
	font-size: 16px;
	text-decoration: none;
	transition: all 0.3s ease-in-out;
}
.recruit_btn::after {
	content: "";
	position: absolute;
	background-image: url(../img/arrow_right_wh.svg);
	width: 14px;
	height: 14px;
	background-repeat: no-repeat;
	background-size: cover;
	top: 50%;
	right: 24px;
	transform: translateY(-50%);
	transition: all 0.3s ease-in-out;

}
.recruit_btn:hover {
	background-color: #FFF;
	color: #D32F29;

}
.recruit_btn:hover::after {
	background-image: url(../img/arrow_right_rd.svg);
	animation: recruitBtnArrowShake 1s ease-in-out infinite;
}
@keyframes recruitBtnArrowShake {
	0% {
		transform: translate(0,-50%);
	}

	15% {
		transform: translate(5px,-50%);
	}

	30% {
		transform: translate(0,-50%);
	}

	45% {
		transform: translate(5px,-50%);
	}

	60% {
		transform: translate(0,-50%);
	}
}

/* よくある質問 */
.cont_faq{
	background-color: #fff;
	padding: 48px;
	border-radius: 16px;
}
.dl_faq + .dl_faq{
	padding: 32px 0 0 ;
	margin: 32px 0 0 ;
	border-top: 1px solid #CACACA;
}
.dt_faq{
	display: flex;
    align-items: center;
	margin: 0 0 4px;
	font-size: 18px;
}
.dt_faq span{
font-size: 24px;
font-weight: bold;
font-family: "Roboto Condensed", sans-serif;
color: #D32F29;
margin-right: 16px;
}
/* footer */
footer{
	background-color: #E0E0E0;
	color: #000;
	padding: 96px 0;
}
.footer-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;

}
.footer-nav-wrapper {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 40px;
}


.footer-nav-wrapper .nav-item a:hover {
	color: #D32F29;
}
.footer-nav-wrapper .nav-item a::after {
	background-color: #D32F29;
}

.credit {
	font-size: 11px;
	font-weight: 300;
	margin-top: 24px;
}



@media(max-width:1024px) {
	.nav-list {
		gap: 24px;
	}
	.nav-item a {
		font-size: 12px;
	}
	.logo_recruit {
		width: 160px;
		height: auto;
	}
	.cont_work {
		flex-direction: column;
	}
	.block_work {
		display: flex;
		gap: 24px;
		width: 100%;
		align-items: center;
	}
	.info_work_hd{
		margin: 0 0 8px;
	}
		.img_work {
		width: 200px;
	}
	.info_work {
		flex: 1;
	}
}
@media(max-width:768px) {

	/* ------------------ */
	/* humberger-menu */
	/* ------------------ */
	.header {
		padding: 4%;
	}

	.logo_recruit {
		width: 128px;
		height: auto;
	}

	/* 以下、ハンバーガーボタン */
	.burger-btn {
		display: block;
		height: 39px;
		position: relative;
		width: 39px;
		z-index: 3;
		/* codepenの挙動のため */
		background-color: transparent;
		border: none;
	}

	.bar {
		background-color: #fff;
		display: block;
		height: 1px;
		left: 50%;
		position: absolute;
		transform: translateX(-50%);
		width: 20px;
	}

	.bar_top {
		top: 10px;
	}

	.bar_mid {
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.bar_bottom {
		bottom: 10px;
	}

	.burger-btn.close .bar_top {
		transform: translate(-50%, 10px) rotate(45deg);
		transition: transform .3s;
	}

	.burger-btn.close .bar_mid {
		opacity: 0;
		transition: opacity .3s;
	}

	.burger-btn.close .bar_bottom {
		transform: translate(-50%, -8px) rotate(-45deg);
		transition: transform .3s;
	}

	/* スクロール制御 */
	.noscroll {
		overflow: hidden;
	}

	/* 以下、ハンバーガーメニュー */
	header .nav-wrapper {
		visibility: hidden;
		height: 100vh;
		left: 0;
		position: fixed;
		top: 0;
		width: 100vw;
		opacity: 0;
		transition: opacity .5s;
		z-index: 2;
		/*キービジュアルと.btn_triggerとの重なりの前後関係を調整*/
	}

	.header-nav {
		background-color: rgba(0, 0, 0, 0.8);
		backdrop-filter: blur(42px);
		-webkit-backdrop-filter: blur(42px);
		height: 100%;
		width: 100%;
		z-index: 2;
	}

	header  .nav-list {
		display: block;
		left: 50%;
		position: absolute;
		text-align: center;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	header  .nav-item {
		margin-bottom: 40px;
		margin-right: 0;
		margin-left: 0;
	}

	/* メニューオープン時 */
	header .nav-wrapper.fade {
		opacity: 1;
		visibility: visible;
	}

	#join_us,
	#voices,
	#work_place,
	#voices,
	#details,
	#faq {
		padding: 32px 0;
	}

/* mv */

.h1_recruit{
	margin: 0 16px;
    font-size: 10px;
    padding: 0 8px;
    height: 23px;
}
.ttl_recruit {
	padding: 0 24px;
}
.ttl_recruit p {
	font-size: 18px;
}
.txt_join_us {
	font-size: 16px;
}
/* voices */
.block_voices {
	flex-direction: column;
	padding: 24px;
}
.img_voices {
	width: 100%;
	max-width: 300px;
}
/* work place */
.cont_work {
	flex-direction: column;
	padding: 24px;
}
.block_work {
	width: 100%;
	flex-direction: column;
	gap: 16px;
}
.img_work {
	width: 100%;
	max-width: 300px;
}
/* detail */
.cont_details {
	padding: 24px;
}
.dl_details {
	flex-direction: column;
	font-size: 15px;
}
.dt_details {
    width: 100%;
    padding: 8px 0;
	font-weight: bold;
}
.dd_details {
	padding: 8px 0;
	border: 0;
}
.recruit_btn_wrap {
    margin: 32px auto 16px;
}
.cont_faq {
	padding: 24px;
}
.dt_faq {
	margin: 0 0 16px;
}
	/* footer */
	.footer {
		padding: 64px 15vw;
	}
	.footer-wrapper {
		flex-direction: column;
		align-items: flex-start;
		gap: 40px;
	}
	.footer-nav-wrapper {
		align-items: flex-start;
	}
	.footer-nav .nav-list {
		flex-direction: column;
		gap: 24px;
		align-items: flex-start;
	}

}

.bn_line {
	height: 70px;
    max-width: 320px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 4px;
    transition: all 0.3s;
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 8px;
    margin-top: 32px;
}

.bn_line a img {
	max-width: 170px;
	height: auto;
}

.bn_line_txt {
	color: #333333;
	text-align: center;
	font-size: 13px;
	font-weight: bold;
	line-height: 1.4;
	margin: 0 auto;
}



/*************
メディアクエリ
*************/


/*************
*************/
@media(max-width:1024px) {}

@media(max-width:768px) {}

/*************

*************/
@media(max-width:768px) {}

/*************
*************/
@media(max-width:1024px) {}

@media(max-width:768px) {}

@media all and (max-width: 480px) {}

/*************
*************/
@media(max-width:1024px) {}

@media(max-width:768px) {}