@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&family=M+PLUS+1:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=warning');

/*!------------------------------------*\
		Recruitment
\*!------------------------------------*/

/**********************/
/* Main
/**********************/
#recruitment {
	background-color: rgba(252,248,232,1);
}
#recruitment #page-title {
	margin-bottom: 1.125rem;
	padding-top: 5.75rem;
	padding-bottom: 5.75rem;
	text-align: center;

	clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
	background-color: rgba(255,204,0,1);
	background-image: url(../images/recruitment/bg_main.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	box-shadow: none;
}
#recruitment #page-title video {
	width: 100%;
	border: solid 20px rgba(0,0,0,1);
}

/**********************/
/* 六角形風ラベル
/**********************/
.section-label-l {
	display: block;
	position: relative;
	background-color: rgba(0,0,0,1);
	clip-path: polygon(4% 0, 98% 30%, 100% 60%, 98% 100%, 2% 100%, 1% 60%);
	padding: 10px;
	margin-bottom: 5rem;
}
.section-label-l h2 {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,1);
	padding: 2.5rem 1.5rem 1.5rem 1.5rem;
	margin-bottom: 0;
	text-align: center;
	clip-path: polygon(4% 0, 98% 30%, 100% 60%, 98% 100%, 2% 100%, 1% 60%);
}
.section-label-r {
	display: block;
	position: relative;
	background-color: rgba(0,0,0,1);
	clip-path: polygon(96% 0, 2% 30%, 0% 60%, 2% 100%, 98% 100%, 99% 60%);
	padding: 10px;
	margin-bottom: 5rem;
}
.section-label-r h2 {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,1);
	padding: 2.5rem 1.5rem 1.5rem 1.5rem;
	margin-bottom: 0;
	text-align: center;
	clip-path: polygon(96% 0, 2% 30%, 0% 60%, 2% 100%, 98% 100%, 99% 60%);
}

.section-label-l .en,
.section-label-r .en {
	display: block;
	margin-bottom: -1rem;
	font-family: "Luckiest Guy", cursive;
	font-size: 2rem;
	color: rgba(255,52,50,1);
	letter-spacing: 0.2em;
}
.section-label-l .jp,
.section-label-r .jp {
	margin-top: 0;
	font-size: 1rem;
	font-weight: bold;
}

/**********************/
/* Common Content
/**********************/
.sub-content {
	display: flex;
	gap: 80px;
}
.content-wrapper {
	width: 50%;
}

/**********************/
/* ボタン
/**********************/
.btn-more {
	margin-top: 1.875rem;
}
.btn-more a {
	display: inline-block;
	width: 100%;
	padding: 15px 40px;
	background: rgba(255,255,255,1);
	border: 10px solid rgba(0,0,0,1);
	color: rgba(0,0,0,1);
	text-align: center;
	text-decoration: none;
	font-weight: bold;
	transition: transform 0.2s;
	transition: box-shadow 0.2s ease-in-out;
}
.btn-more a:hover {
	box-shadow: 20px 20px 0 rgba(255,153,0,1);
	transform: translate(-3px, -3px);
}


/**********************/
/* Concept
/**********************/
.concept {
	background-image: url(../images/recruitment/bg_contents_y.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	box-shadow: none;
}
.concept .catch-copy {
	width: 50%;
	font-family: "M PLUS 1", sans-serif;
	text-shadow: 8px 8px rgba(255,204,0,1);
}
.concept .catch-copy .vertical-text {
	position: relative;
	left: 30%;
	writing-mode: vertical-rl;
	font-weight: bold;
	line-height: 1.4;
	letter-spacing: 0.1em;
}
.concept .catch-copy span {
	display: block;
	white-space: nowrap;
}
.concept .catch-copy span:nth-child(2) {
	margin-top: 6em;
}
.concept .text-body {
	margin-bottom: 5rem;
}

/**********************/
/* Concept Image
/**********************/
.concept .image-box {
	position: relative;
	filter: drop-shadow(20px 20px 0 rgba(255,153,0,1));
}
.concept .image-box figure {
	position: relative;
	background-color: rgba(0,0,0,1);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
	margin: 0;
	padding: 10px;
}
.concept .image-box img {
	width: 100%;
	display: block;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
}


/**********************/
/* About
/**********************/
.about {
	width: 100%;
	padding: 10rem 0;
	clip-path: polygon(0 0, 100% 10%, 100% 90%, 0% 100%);
	background-color: rgba(255,204,0,1);
}
.dot-o {
	background-image: url(../images/recruitment/bg_contents_o.png?v=3);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	box-shadow: none;
}
.catchphrase {
	margin-top: 0;
	font-family: "M PLUS 1", sans-serif;
	font-size: 2rem;
	color: rgba(255,255,255,1);
	line-height: 1.4;
	text-shadow: 6px 6px 0 rgba(255,153,0,1);
}

/**********************/
/* About Image
/**********************/
.about .image-frame {
	width:45%;
	position: relative;
	filter: drop-shadow(20px 20px 0 rgba(255,153,0,1));
}
.about .image-frame figure {
	position: relative;
	width: 100%;
	background-color: rgba(0,0,0,1);
	clip-path: polygon(0 0, 100% 0%, 100% 95%, 0% 100%);
	padding: 10px;
}
.about .image-frame img {
	width: 100%;
	display: block;
	clip-path: polygon(0 0, 100% 0%, 100% 95%, 0% 100%);
}


/**********************/
/* Business
/**********************/
.business .sub-content {
	margin-bottom: 3rem;
}
.business .sub-content {
	background-image: url(../images/recruitment/bg_contents_y.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	box-shadow: none;
}
.business .text-body {
	width: 60%;
}
.business .image-box {
	width: 40%;
}
.business .image-box img {
	width: 100%;
}
.business .img-left {
	display: contents
}
.business .img-left .text-body {
	order: 2;
}
.business .img-left .image-box {
	order: 1;
}
.business h3 {
	margin-bottom: 3rem;
	font-family: "M PLUS 1", sans-serif;
	font-size: 2rem;
}

/**********************/
/* Business Image
/**********************/

/* topRight */
.business .image-box.topRight {
	position: relative;
	filter: drop-shadow(20px 20px 0 rgba(255,153,0,1));
}
.business .image-box.topRight figure {
	position: relative;
	background-color: rgba(0,0,0,1);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
	margin: 0;
	padding: 10px;
}
.business .image-box.topRight img {
	width: 100%;
	display: block;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
}

/* middleLeft */
.business .image-box.middleLeft {
	position: relative;
	filter: drop-shadow(20px 20px 0 rgba(255,153,0,1));
}
.business .image-box.middleLeft figure {
	position: relative;
	background-color: rgba(0,0,0,1);
	clip-path: polygon(0 0, 100% 11%, 100% 90%, 0% 100%);
	margin: 0;
	padding: 10px;
}
.business .image-box.middleLeft img {
	width: 100%;
	display: block;
	clip-path: polygon(0 0, 100% 11%, 100% 90%, 0% 100%);
}

/* bottomRight */
.business .image-box.bottomRight {
	position: relative;
	filter: drop-shadow(20px 20px 0 rgba(255,153,0,1));
}
.business .image-box.bottomRight figure {
	position: relative;
	background-color: rgba(0,0,0,1);
	clip-path: polygon(0 10%, 100% 0, 100% 100%, 0% 100%);
	margin: 0;
	padding: 10px;
}
.business .image-box.bottomRight img {
	width: 100%;
	display: block;
	clip-path: polygon(0 10%, 100% 0, 100% 100%, 0% 100%);
}

/**********************/
/* Flow & Interview
/**********************/
.flow {
	width: 100%;
	padding: 10rem 0;
	clip-path: polygon(0 0, 100% 10%, 100% 90%, 0% 100%);
	background-color: rgba(255,204,0,1);
}
.interview {
	background-image: url(../images/recruitment/bg_contents_y.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	box-shadow: none;
}

/**********************/
/* Job Description
/**********************/
.job-desc {
	width: 100%;
	margin-bottom: 0;
	padding: 10rem 0;
	clip-path: polygon(0 0, 100% 4%, 100% 100%, 0 100%);
	background-color: rgba(255,204,0,1);
}

.job-desc .btn-more {
	width: 60%;
	margin: 0 auto 0 auto;
}

.table-content {
	width: 90%;
	margin: 0 auto 5rem auto;
	background-color: rgba(255,255,255,1);
	border: 10px solid rgba(0,0,0,1);
	padding: 3rem;
}
table {
	width: 100%;
	border: none;
	margin-bottom: 3rem;
}
table caption {
	margin-bottom: 3rem;
	font-family: "M PLUS 1", sans-serif;
	font-size: 2rem;
	font-weight: bold;
	text-align: left;
}
table tr {
	border-top: 4px solid rgba(0,0,0,1);
	border-bottom: 4px solid rgba(0,0,0,1);
}
table th,
table td {
	background: none;
	border: none;
	text-align: justify;
}


/**********************/
/* 縦動画用
/**********************/
.movie-box {
	text-align: center;
}
.movie-box .vertical-video {
	width: 100%;
	max-width: 360px; /* 動画の最大幅 */
	aspect-ratio: 9 / 16; /* 縦長アスペクト比 */
	height: auto; /* 高さを自動調整 */
	border: 10px solid rgba(0,0,0,1);
	object-fit: fill;
}

/**********************/
/* エントリーページ用
/**********************/
#entry {
	/*background-color: rgba(255,204,0,1);*/
}
#entry #page-title {
	margin-bottom: 1.125rem;
	padding-top: 5.75rem;
	padding-bottom: 5.125rem;
	text-align: center;
	background-color: rgba(255,102,0,1);
}
#entry #page-title p {
	font-family: "Luckiest Guy", cursive;
	text-transform: uppercase;
	letter-spacing: 0.5rem;
}
#entry #page-title h1 {
	font-family: "M PLUS 1", sans-serif;
	font-weight: bold;
}
#entry h2 {
	font-family: "M PLUS 1", sans-serif;
	font-size: 2rem;
	font-weight: bold;
	text-align: center;
	line-height: 1.4;
}
#entry .entry-txt {
	text-align: center;
}

/*!------------------------------------*\
		Entry Flow
\*!------------------------------------*/
.step-list {
	display: flex;
	margin: 0 0 3.125rem 0;
	padding: 10px;
	gap: 10px;
	background: rgba(0,0,0,1);
}
.step-list__item {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 64px;
	padding: 0 28px;
	flex: 1;
	list-style: none;
	background-color: #e0e0e0;
	text-align: center;
	clip-path: polygon(0% 0%, calc(100% - 28px) 0%, 100% 50%, calc(100% - 28px) 100%, 0% 100%, 28px 50% );
	margin: 0 -14px;
}
.step-list__item:first-child {
	clip-path: polygon(0% 0%, calc(100% - 28px) 0%, 100% 50%, calc(100% - 28px) 100%, 0% 100% );
	margin-left: 0;
	padding-left: 0;
}
.step-list__item:last-child {
	 clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 28px 50% );
	margin-right: 0;
	padding-right: 0;
}
.step-list__item--current {
	background-color: rgba(255,100,89,1);;
	color: rgba(255,255,255,1);;
}
.step-list__inner {
	line-height: 1.4;
}
.step-text {
	display: block;
	font-size: 1rem;
	font-family: "Luckiest Guy", cursive;
	text-transform: uppercase;
	letter-spacing: 0.5rem;
}
.step-text2 {
	display: block;
	font-size: 1rem;
	font-weight: bold;
	font-family: "M PLUS 1", sans-serif;
}


/*!------------------------------------*\
		Error
\*!------------------------------------*/
.err-message li {
	list-style: none;
}

/*!------------------------------------*\
		Entry Main
\*!------------------------------------*/
.page #entry #main-content {
	width: 100%;
	padding: 5rem 0 0 0;
	margin-bottom: 0;
	/*clip-path: polygon(0 0, 100% 4%, 100% 100%, 0% 100%);*/
	background-color: rgba(255,204,0,1);
}

/*!------------------------------------*\
		Finish
\*!------------------------------------*/
.page #entry .finish {
	text-align: center;
}
.page #entry .finish h3 {
	font-size: 2rem;
	color: rgba(255,255,255,1);
}

/*!------------------------------------*\
		レスポンシブ対応
\*!------------------------------------*/
@media (orientation: portrait) and (max-width: 767px) {

	.recruitment .container {
		padding-left: 1.125rem;
		padding-right: 1.125rem;
	}

	.sub-content {
		display: block;
		width: 100%;
	}

	/* Concept */
	.concept .catch-copy {
		width: 100%;
		text-align: center;
	}
	.concept .catch-copy h2.vertical-text {
		position: relative;
		left: auto;
		display: inline-block;
		margin-left: 0;
		font-size: 2rem;
	}
	.concept .catch-copy span:nth-child(2) {
		margin-top: 3em;
	}
	.concept .content-wrapper {
		width: 100%;
		display: flex;
		flex-wrap: wrap; 
	}
	.concept .text-body {
		margin-bottom: 0;
		order: 2;
	}
	.concept .image-box {
		margin-bottom: 5rem;
		order: 1;
	}

	/* About */
	.about {
		padding: 5rem 0;
		clip-path: polygon(0 0, 100% 4%, 100% 96%, 0% 100%);
	}
	.about .sub-content {
		display: flex;
		flex-wrap: wrap; 
	}
	.about .image-frame {
		width: 100%;
		order: 1;
	}
	.about .image-frame figure {
		margin: 0;
	}
	.about .content-wrapper {
		width: 100%;
		order: 2;
	}

	/* Business */
	.business h3 {
		text-align: center;
	}
	.business .text-body {
		width: 100%;
	}
	.business .image-box {
		width: 100%;
	}

	/* Flow */
	.flow {
		padding: 5rem 0;
		clip-path: polygon(0 0, 100% 4%, 100% 96%, 0% 100%);
	}

	/* Table */
	.table-content {
		width: 100%;
		padding: 2rem 2rem 0 2rem;
	}
	.table caption {
		margin-bottom: 2rem;
	}
	.table-content th,
	.table-content td {
		display: block;
		width: 100%;
		padding: 1.125rem 0;
	}
	.table-content th {
		padding-bottom: 0;
	}

	.job-desc {
		padding: 5rem 0;
		clip-path: polygon(0 0, 100% 2%, 100% 100%, 0 100%);
	}

	.job-desc .btn-more {
		width: 100%;
	}
	.contact {
		margin-top: 0;
		padding-top: 0;
	}



}