@charset "UTF-8";
/* =========================================================
   Recruit: Opening + MV Crossfade + Typed Catch (Full CSS)
   - 丸の拡大：100px基準 → JSで対角に合うscaleを算出してtransition
   ========================================================= */
:root{
  --opening-bg:#ffffff;
  --accent-red:#155ca7;

  /* MVクロスフェード時間と表示間隔 */
  --fade-ms:1200ms;
  --slide-interval-ms:4500ms;

  /* タイプカーソル速度（JSは70ms/文字） */
  --type-speed-ms:70ms;
}

/* ---------- Opening（赤い丸→全画面→フェード） ---------- */
#opening{
  position:fixed; inset:0; background:var(--opening-bg);
  display:grid; place-items:center; z-index:9999;
  transition:opacity 1000ms ease, transform 1000ms ease;
  will-change:opacity,transform; backface-visibility:hidden; transform:translateZ(0);
}

/* 丸：100pxを基準。scale(0)→JSで算出したscale(N)へ */
#opening .circle{
  width:100px; height:100px;
  background:var(--accent-red);
  border-radius:50%;
  transform:scale(0);
  transition:transform 1400ms cubic-bezier(.2,.7,.1,1);
  will-change:transform; backface-visibility:hidden;
}

/* ---------- Main wrapper（保険） ---------- */
main#recruit{ opacity:1; }

/* ---------- MV（背景クロスフェード + キャッチ固定） ---------- */
.mv{
  position:relative; width:100vw; height:100vh; overflow:hidden; color:#fff;
  isolation:isolate;
}

/* 背景レイヤー（黒を敷いて白フラ防止） */
.mv__bg{
  position:absolute; inset:0;
  background:#000 center / cover no-repeat;
  opacity:0;
  transition:opacity var(--fade-ms) ease;
  will-change:opacity; backface-visibility:hidden; transform:translateZ(0);
  pointer-events:none;
}
.mv__bg--base{ z-index:0; opacity:1; }
.mv__bg--top { z-index:1; }

/* キャッチ（背景と別レイヤーでちらつき防止） */
.mv__inner{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center; z-index:2;
}
.mv__catch{
  max-width:min(90vw,980px); margin:0; line-height:1.6;
  font-size:clamp(18px,3.4vw,32px); letter-spacing:.02em; opacity:0;
  transform:translateZ(0); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
	font-size: 56px;
}
.mv__catch .cursor{
  display:inline-block; width:.6ch; border-right:2px solid currentColor;
  animation:kd-blink 1s step-end infinite; vertical-align:-.1em;
}
@keyframes kd-blink{50%{border-right-color:transparent}}
@media screen and (max-width: 768px) {
	.mv__catch {
		font-size: 28px;
	}
}

/* ---------- 低モーション配慮 ---------- */
@media (prefers-reduced-motion:reduce){
  /* アニメをなくしても全面赤にできるよう保険 */
  #opening .circle{
    transition:none;
    width:150vmax; height:150vmax; transform:scale(1);
  }
  #opening{ transition:none; }
  .mv__bg{ transition:none; }
}


/*------------------------------------
#msg
------------------------------------*/
#msg {
	margin-top: 80px;
}
.msg__txt {
	font-size: 18px;
	text-align: center;
}
@media screen and (max-width: 768px) {
	#msg {
		margin-top: 50px;
	}
	.msg__txt {
		font-size: 16px;
	}
}


/*------------------------------------
#about
------------------------------------*/
#about {
	margin-top: 80px;
}
#about {
	margin-top: 80px;
}
.about__row {
	display: grid;
	justify-content: flex-end;
	align-items: center;
	grid-template-columns: calc(50% + 5.75em) 1fr;
}
.about__row .txt {
	max-width: calc(76.5em / 2 - 5.75em + 1.5em + 2.5em);
	padding: 0 calc(1.5em + 2.5em) 0 80px;
}
.about__row h2 {
	display: flex;
	flex-direction: column;
	gap: 16px;
	font-size: 28px;
	margin-bottom: 24px;
}
.about__row .recruit__more {
	padding-top: 50px;
}
@media screen and (max-width: 768px) {
	.about__row {
		grid-template-columns: 1fr;
	}
	.about__row .txt {
		max-width: none;
		padding: 40px 10vw 0;
	}
	.about__row h2 {
		font-size: 22px;
		margin-bottom: 16px;
	}
	.about__row .recruit__more {
		padding-top: 32px;
	}
	.about__row .recruit__more a {
		margin-inline: auto;
	}
}


/*------------------------------------
.works-list
------------------------------------*/
.works-list {
	margin-top: 120px;
}
.works-list .slick-slide {
	margin: 0 16px;
}
@media screen and (max-width: 768px) {}


/*------------------------------------
#works
------------------------------------*/
#works {
	margin-top: 120px;
}
#works .container {
	max-width: 1080px;
}
#works .ttl {
	margin-bottom: 8px;
}
.works__txt {
	font-size: 20px;
}
.works__block {
	display: flex;
	position: relative;
	background-color: #fff;
	margin-top: 80px;
	padding: 60px;
}
.works__sticky {
	margin-right: 40px;
	margin-top: -80px;
}
.works__sticky .txt {
	position: sticky;
	top: 20px;
}
.works__sticky h3 {
	letter-spacing: .05em;
	line-height: 1;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	white-space: nowrap;
}
.works__inner {
	display: flex;
	align-items: center;
	gap: 60px;
}
.works__inner .img,
.works__inner .txt {
	width: calc((100% - 60px) / 2);
}
.works__inner img {
	display: block;
	object-fit: cover;
	object-position: center center;
	aspect-ratio: 1 / 1;
}
.works__inner p {
	font-size: 20px;
}
.works__example {
	position: relative;
	background-color: #f1f1f1;
	margin-top: 24px;
	padding: 20px 32px;
}
.works__example h4 {
	position: absolute;
	top: -15px;
	left: 25px;
	font-size: 22px;
	line-height: 1;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}
.works__example .list li {
	display: flex;
	align-items: center;
	gap: 10px;
}
.works__example .list li::before {
	content: "";
	display: inline-block;
	background-color: #9fa0a0;
	border-radius: 50%;
	width: 8px;
	height: 8px;
	flex-shrink: 0;
}
#works .recruit__more {
	padding-top: 80px;
}
#works .recruit__more a {
	margin-inline: auto;
}
@media screen and (max-width: 768px) {
	#works {
		margin-top: 70px;
	}
	.works__txt {
		font-size: 14px;
	}
	.works__block {
		margin-top: 50px;
		padding: 32px 32px 32px 24px;
	}
	.works__sticky {
		margin-top: -50px;
	}
	.works__sticky h3 {
		font-size: 20px;
	}
	.works__inner {
		flex-direction: column;
		gap: 16px;
	}
	.works__inner .img,
	.works__inner .txt {
		width: 100%;
	}
	.works__inner p {
		font-size: 16px;
	}
	.works__example {
		margin-top: 16px;
	}
	.works__example h4 {
		font-size: 16px;
		-ms-writing-mode: lr-tb;
		writing-mode: horizontal-tb;
	}
	.works__example .list li::before {
		width: 6px;
		height: 6px;
		margin-right: 8px;
	}
	#works .recruit__more {
		padding-top: 40px;
	}
}


/*------------------------------------
#jobs
------------------------------------*/
#jobs {
	background-color: #fff;
	margin-top: 120px;
	padding: 120px 0;
}
#jobs .container {
	max-width: 1200px;
}
#jobs .ttl {
	margin-bottom: 8px;
}
.requirements__txt {
	font-size: 20px;
	margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
	#jobs {
		margin-top: 70px;
		padding: 70px 0;
	}
	.requirements__txt {
		font-size: 14px;
		margin-bottom: 24px;
	}
}

/*#management*/
.management__row {
	display: grid;
	justify-content: flex-end;
	align-items: center;
	grid-template-columns: auto calc(50% + 5.75em);
}
.management__row .img {
	grid-column: 2;
}
.management__row .txt {
	grid-column: 1;
	grid-row: 1;
	max-width: calc(76.5em / 2 - 5.75em + 1.5em + 2.5em);
	padding: 0 80px 0 calc(1.5em + 2.5em);
}
.management__row h3 {
	font-size: 32px;
	margin-bottom: 24px;
}
.management__row .recruit__more {
	padding-top: 50px;
}
@media screen and (max-width: 768px) {
	.management__row {
		grid-template-columns: 1fr;
	}
	.management__row .img {
		grid-column: 1;
	}
	.management__row .txt {
		grid-column: 1;
		grid-row: 2;
		max-width: none;
		padding: 32px 10vw 0;
	}
	.management__row h3 {
		font-size: 22px;
		margin-bottom: 16px;
	}
	.management__row .recruit__more a {
		margin-inline: auto;
	}
}

/*#electrician*/
#electrician {
	margin-top: 80px;
}
.electrician__row {
	display: grid;
	justify-content: flex-end;
	align-items: center;
	grid-template-columns: calc(50% + 5.75em) 1fr;
}
.electrician__row .txt {
	max-width: calc(76.5em / 2 - 5.75em + 1.5em + 2.5em);
	padding: 0 calc(1.5em + 2.5em) 0 80px;
}
.electrician__row h3 {
	font-size: 32px;
	margin-bottom: 24px;
}
.electrician__row .recruit__more {
	padding-top: 50px;
}
@media screen and (max-width: 768px) {
	.electrician__row {
		grid-template-columns: 1fr;
	}
	.electrician__row .txt {
		max-width: none;
		padding: 32px 10vw 0;
	}
	.electrician__row h3 {
		font-size: 22px;
		margin-bottom: 16px;
	}
	.electrician__row .recruit__more a {
		margin-inline: auto;
	}
}


/*------------------------------------
#person
------------------------------------*/
#person {
	background-color: #355165;
	padding: 120px 0;
}
#person .container {
	max-width: 1200px;
}
#person .ttl {
	mix-blend-mode: normal;
	color: #fff;
}
.person__txt {
	font-size: 20px;
	color: #fff;
	margin-bottom: 40px;
}
.person-list {
	list-style: none;
	display: flex;
	gap: 20px;
	max-width: 1200px;
	width: calc(100% - 10vw);
	margin-inline: auto;
}
.person-list > li {
	width: calc((100% - 40px) / 3);
}
.person-list a:hover {
	opacity: 1;
}
.person-list .img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	aspect-ratio: 3 / 4;
}
.person-list .txt {
	display: flex;
	flex-direction: column;
	background-color: #fff;
	padding: 32px;
}
.post-tags {
	list-style: none;
	margin-bottom: 8px;
}
.post-tags > li a {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	background-color: #355165;
	height: 28px;
	font-size: 14px;
	line-height: 1;
	color: #fff;
	padding: 0 16px;
}
.person-list h3 {
	font-size: 24px;
	margin-bottom: 16px;
}
#person .recruit__more {
	margin-top: 50px;
}
#person .recruit__more a {
	border-color: #fff;
	color: #fff;
	margin-inline: auto;
}
#person .recruit__more a::after {
	background-image: url("../images/recruit/top/more-arrow_wh.svg");
}
@media screen and (max-width: 768px) {
	#person {
		padding: 70px 0;
	}
	.person__txt {
		font-size: 14px;
		margin-bottom: 24px;
	}
	.person-list {
		width: 100%;
	}
	.person-list .slick-slide {
		margin: 0 10px;
	}
	.person-list .txt {
		padding: 16px;
	}
	.person-list h3 {
		font-size: 18px;
	}
	.person-list p {
		font-size: 12px;
	}
}


/*------------------------------------
#workstyle
------------------------------------*/
#workstyle {
	padding: 120px 0;
}
#workstyle .container {
	max-width: 1600px;
}
.workstyle__txt {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 64px;
}
.workstyle__txt p {
	font-size: 20px;
	line-height: 1.5;
}
.workstyle-list {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
}
.workstyle-list li {
	width: calc((100% - 80px) / 3);
}
.workstyle-list a {
	display: flex;
	justify-content: space-between;
	position: relative;
	background-color: #fff;
	/*border-radius: 28px;*/
	width: 100%;
	height: 180px;
	padding-right: 90px;
}
.workstyle-list a::before {
	content: "";
	position: absolute;
	top: 0;
	/*background-image: url("../images/recruit/rounded-bg.svg");*/
	background-position: right bottom;
	background-repeat: no-repeat;
	background-size: contain;
	width: 100%;
	height: 100%;
	z-index: 0;
}
.workstyle-list .img {
	flex: 0 0 40%;
	min-width: 0;
}
.workstyle-list .img img {
	/*border-radius: 28px 0 0 28px;*/
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.workstyle-list .arrow {
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 1 1 auto;
	min-width: 0;
	position: absolute;
	right: 20px;
	bottom: 20px;
	background-color: #155ca7;
	border-radius: 50%;
	width: 63px;
	height: 63px;
	transition: .3s cubic-bezier(.4,.4,0,1);
	z-index: 2;
}
.workstyle-list a:hover .arrow {
	background-color: transparent;
	border: 1px solid #155ca7;
	transform: scale(1.1, 1.1);
}
.workstyle-list .arrow::before {
	content: "";
	background-image: url("../images/recruit/rounded-arrow.svg");
	background-position: 50%;
	background-size: cover;
	width: 14px;
	height: 14px;
}
.workstyle-list a:hover .arrow::before {
	background-image: url("../images/recruit/rounded-arrow_bl.svg");
}
.workstyle-list h3 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
	width: calc(60% - 24px);
	font-size: 28px;
	line-height: 1;
	z-index: 1;
}
.workstyle-list h3 .en {
	font-size: 16px;
	letter-spacing: .08em;
	color: #155ca7;
}
@media screen and (max-width: 1200px) {
  .workstyle-list li {
    width: calc((100% - 40px) / 2);
  }
}
@media screen and (max-width: 768px) {
	#workstyle {
		padding: 70px 0;
	}
	.workstyle__txt {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
		margin-bottom: 40px;
	}
	.workstyle__txt p {
		font-size: 14px;
	}
	.workstyle-list {
		gap: 28px;
	}
	.workstyle-list li {
		width: 100%;
	}
	.workstyle-list a {
		/*border-radius: 20px;*/
		height: 120px;
		padding-right: 60px;
	}
	.workstyle-list .img img {
		/*border-radius: 20px 0 0 20px;*/
	}
	.workstyle-list .arrow {
		right: 15px;
		bottom: 15px;
		width: 40px;
		height: 40px;
	}
	.workstyle-list .arrow::before {
		width: 10px;
		height: 10px;
	}
	.workstyle-list h3 {
		font-size: 20px;
	}
	.workstyle-list h3 .en {
		font-size: 14px;
	}
}


/*------------------------------------
#faq
------------------------------------*/
#faq {
	margin-top: 120px;
}
#faq .container {
	max-width: 800px;
}
#faq .ttl {
	margin-bottom: 8px;
}
.faq__txt {
	font-size: 20px;
	margin-bottom: 40px;
}
#faq .recruit__more {
	padding-top: 80px;
}
#faq .recruit__more a {
	margin-inline: auto;
}
@media screen and (max-width: 768px) {
	#faq {
		margin-top: 70px;
	}
	.faq__txt {
		font-size: 14px;
	}
	#faq .recruit__more {
		padding-top: 40px;
	}
}