@charset "utf-8";

/* CSS Document */


/* ============================================================================================================
	求人 / index
	recruit/index.php
============================================================================================================ */
.recruit.index
{
	--w						: 255 255 255;
}


.recruit.index body
{
	background-color: rgb(var(--w));
}


.recruit.index .Harea
{
	margin-top: calc((0em - var(--padding)) + (var(--gap) / 2));
}


/* ------------------------------------------------------------------------------------------------------------
	[求人 / index]
	<header>
------------------------------------------------------------------------------------------------------------ */
.recruit.index header
{
	background-color: rgb(var(--w));
}


.recruit.index .Harea .page_head
{
	display: block;
}

.recruit.index .page_head .img
{
	order: unset;

	display: grid;
	grid-template-columns: repeat(2, 1fr);
	align-items: center;

	background-color: transparent;
}
.recruit.index .page_head .img img
{
	aspect-ratio: 1;
	filter: unset;
	object-position: left;
}

.recruit.index .page_head p
{
	position: relative;
	left: initial;
	right: initial;
	top: initial;
	bottom: initial;

	text-align: right;
}


.recruit.index .page_head .lead
{
	order: unset;

	position: absolute;
	right: 0;
	bottom: 0;
}


/* ------------------------------------------------------------------------------------------------------------
	[求人 / index]
	<footer>
------------------------------------------------------------------------------------------------------------ */
.recruit.index footer .Get_in_Touch::before
{
	filter: brightness(0) invert(1);
}


.recruit.index footer>*[class*="wrap"]
{
	padding-top: var(--padding);
}

.recruit.index footer>*[class*="wrap"]::before
{
	content: "";
	display: block;

	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;

	width: 100svw;
	height: 100%;

	background-color: rgb(var(--theme_light));
}


/* ------------------------------------------------------------------------------------------------------------
	[求人 / index]
	<main>
------------------------------------------------------------------------------------------------------------ */
.recruit.index main
{
}


.recruit.index main .ct
{
}


.recruit.index main .ct>*[class*="wrap"]
{
	display: grid;
	gap: var(--gap);
}


.recruit.index main .ct .main
{
	display: grid;
	gap: var(--gap);
}


/* ------------------------------------------------------
	[求人 / index]　「技術」よりも先に、大切にしたいことがあります。
*/
.recruit.index main .ct1
{
}

.recruit.index main .ct1 .main
{
}

.recruit.index main .ct1 table
{
}

.recruit.index main .ct1 table :where(th, td)
{
}
.recruit.index main .ct1 table :where(th, td):has(img)
{
	width: 21em;
	padding-left: 0;
}
.recruit.index main .ct1 table :where(th, td):has(img) img
{
	aspect-ratio: 329 / 214;
}

.recruit.index main .ct1 table td>*
{
	display: grid;
	gap: var(--gap);
}

.recruit.index main .ct1 table td>* b
{
	font-size: 1.25em;
	font-weight: inherit;
}


/* ------------------------------------------------------
	[求人 / index]　私たちが大切にしている働き方
	[求人 / index]　守るべきは「安全」、磨くべきは「一生の腕」。
*/
.recruit.index main .ct2
{
	--txt_w						: 35em;
}
.recruit.index main .ct3
{
	--txt_w						: 50em;
}
/*
.recruit.index main :is(.ct2, .ct3)
{
	--txt_w						: 35em;
}
*/

.recruit.index main :is(.ct2>*, .ct3)>img
{
	position: absolute;
	top: 0;

	width: calc(
		(
			(100svw - 70em) / 2
		)
		 + 
		(
			70em - ((var(--gap) * 2) + var(--txt_w))
		)
	);
	height: 100%;
}


.recruit.index main :is(.ct2, .ct3) .body
{
	display: grid;
	gap: var(--gap);

	width: var(--txt_w);
}


.recruit.index main :is(.ct2) h2
{
	justify-self: center;
}

.recruit.index main :is(.ct2)>img
{
	left: 0;
}
.recruit.index main :is(.ct2) .body
{
	margin-left: auto;
	margin-right: 0;
}

.recruit.index main :is(.ct2) .main
{
}
.recruit.index main :is(.ct2) .main table
{
}
.recruit.index main :is(.ct2) .main table th
{
	width: 7em;
}


.recruit.index main :is(.ct3)>img
{
	right: 0;
}


/* ------------------------------------------------------
	[求人 / index]　スタッフの1日
*/
.recruit.index main .ct4
{
}

.recruit.index main .ct4 table
{
}

.recruit.index main .ct4 table th
{
	width: auto;
}
.recruit.index main .ct4 table th>*
{
	display: flex;
	align-items: center;
	gap: 0.5em;

	width: max-content;
}


/* ------------------------------------------------------
	[求人 / index]　この街を、この仲間と。
*/
.recruit.index main .ct5
{
}


.recruit.index main .ct5 .body
{
	display: grid;
	gap: var(--padding);
}


.recruit.index main .ct5 .body .item
{
	display: grid;
	grid-template-columns: 17.38em 1fr;
	align-items: start;
	gap: var(--gap);
}


.recruit.index main .ct5 .body .num
{
	grid-column: span 2;

	border-bottom-width: 1px;
	border-bottom-color: rgb(var(--theme_light));

	font-size: 6em;
	text-align: right;
	line-height: 0.7;

	color: rgb(var(--theme_light));
}


.recruit.index main .ct5 .body .item .head
{
	display: grid;
	gap: 1em;

	text-align: center;
}

.recruit.index main .ct5 .body .item .head img
{
	width: 100%;
}


.recruit.index main .ct5 .body .item .head .data
{
	font-size: smaller;

	display: flex;
	justify-content: center;
}


.recruit.index main .ct5 .body .item .main
{
	display: grid;
	gap: calc(var(--gap) / 2);
}

.recruit.index main .ct5 .body .item .main .title
{
}
.recruit.index main .ct5 .body .item .main .title>b
{
}

.recruit.index main .ct5 .body .item .main .list
{
	display: grid;
	gap: calc(var(--gap) / 2);
}
.recruit.index main .ct5 .body .item .main .list .qa_Q
{
}
.recruit.index main .ct5 .body .item .main .list .qa_A
{
	margin-top: calc(0em - (var(--gap) / 2));
}


/* ------------------------------------------------------
	[求人 / index]　募集要項
*/
.recruit.index main .ct6
{
	gap: var(--padding);
	
	padding-top: var(--padding);
	padding-bottom: var(--padding);

	background-color: rgb(var(--theme_light));
}


/* ------------------------------------------------------------------------------------------------------------
	[求人]　エントリーフォーム
	recruit/form.php
------------------------------------------------------------------------------------------------------------ */
.recruit.form
{
}


.recruit.form .page_head p
{
	top: -0.15em;
	bottom: initial;
}