/* ============================================
   採用情報 上書きCSS
   担当: 山中 / 2026-09-02〜
   ============================================ */

/* ② 「先輩たちの声」の黒フチ(text-stroke)を除去 */
.page-recruit .page-interview .page-interview__title span {
	-webkit-text-stroke: 0;
}

/* ③ 縦書き氏名の（）を縦書きグリフに:
   親のtext-orientation:uprightだと括弧が横書き形のままになるため、
   括弧部分(span.vprn)だけmixedへ。YakuHan(約物フォント)は縦書きグリフを
   持たないためZen Kakuで描画(漢字はmixedでも正立するので見た目は括弧のみ変わる) */
.page-recruit .page-interview .employee__info .vprn {
	text-orientation: mixed;
	font-family: "Zen Kaku Gothic Antique", sans-serif;
}

/* ④ 「西松にはこんな人材が必要です。」の行間を拡大(1.25→1.6) */
.page-recruit .page-recruit-person__left h2 span {
	line-height: 1.6;
}

/* ⑤ 吹き出しの文字を中央へ: 背景画像の左しっぽの分だけ描画領域が左に広く、
   センターが左に見えるため、しっぽ分をpadding-leftで補正。
   ※SPは別レイアウト(小さい吹き出しのグリッド)のためPC限定 */
@media screen and (min-width: 769px) {
	.page-recruit .page-recruit-person .speech {
		text-align: center;
		padding-left: 75rem;
		padding-right: 45rem;
	}
}

/* WORKS AND CREWマーキーの「一瞬途切れる」対策:
   既存アニメは固定距離(-50%)だがコンテンツは3リピート構成のため、
   ループの継ぎ目で毎回ズレていた。ストライプは「アイテム15個+ギャップ14+
   右パディング(ギャップと同値)」=ちょうど3周期なので、自身の幅の-1/3を
   移動距離にすれば、フォント描画幅に関係なく厳密にシームレスになる */
.page-recruit .flow-text {
	animation-name: nmFlowTextLoop;
	/* iOS Safari: flexコンテナが親幅に制約され、子(画像・テキスト)が縮んで
	   スライドの欠け・余白の乱れが出るため、トラックは内容幅で確保し子の縮小を禁止 */
	width: -webkit-max-content;
	width: max-content;
}
.page-recruit .flow-text > * {
	flex-shrink: 0;
}
/* イラスト画像: ベースの width:max-content はiOS Safariでは「原寸幅」に解決され、
   高さ60rem+object-fit:containで中身だけ縮む=左右に大きな透明余白が出る
   (Chromeは縦横比どおりの幅になるため検証モードでは再現しない)。
   width:autoなら全ブラウザで高さ基準の縦横比どおりの幅になる(PC/SP共通) */
.page-recruit .flow-text div img {
	width: auto;
}
@keyframes nmFlowTextLoop {
	from { transform: translateX(0); }
	/* 実機iOS対策: JS(functions.php)実測のpx固定距離を優先、未設定時は-100%/3 */
	to { transform: translateX(var(--nm-rc-shift, calc(-100% / 3))); }
}

/* 電話番号まわりの文字組(クライアント指定値): 番号とアイコンの間隔5rem */
.page-recruit .sec-contact .footer__tel div {
	gap: 5rem;
}

/* ⑦ お電話でエントリーの箱: 角丸を強く+注記のウェイトを上げる */
.page-recruit .sec-contact .footer__tel {
	border-radius: 40rem;
}
.page-recruit .sec-contact .footer__tel small {
	font-weight: 700;
}

/* エントリーセクション(PC): SPと同様に左右の枠線を画面外へ出し、
   下側は線・角丸・マージンなしで下のベージュへ切れ目なく続ける */
@media screen and (min-width: 769px) {
	.page-recruit .sec-contact {
		width: calc(100% + 6rem);
		margin-left: -3rem;
		border-bottom: none;
		border-radius: 60rem; /* クライアント指定値 */
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		margin-bottom: 0;
	}
	.page-recruit {
		overflow-x: clip;
	}
	/* フォームカード: 1300px固定だと縮小画面で他コンテンツ(1300rem)より
	   大きく見えるため、rem化してコンテンツ幅に揃える */
	.page-recruit .sec-contact .sec-contact__main {
		width: 1300rem;
		max-width: 1300rem;
	}
	/* ENTRY〜ギャラリー間の白帯(ラッパーの下マージン420rem)をベージュに塗る。
	   ※このマージンはENTRYがせり上がるピン演出のはみ出しバッファのため削除不可。
	   ギャラリーの::beforeを上へ延長し、背面(z-index:-1)でベージュを敷く */
	.sec-gallery {
		position: relative;
	}
	.sec-gallery::before {
		content: "";
		position: absolute;
		bottom: 100%;
		left: 0;
		right: 0;
		height: 420rem;
		background: #fbf9f4;
		z-index: -1;
	}
}

/* ============================================
   2026-09-03 PC調整(クライアント指定)
   ============================================ */
@media screen and (min-width: 769px) {
	.page-recruit-hero .hero-title p {
		font-weight: 800;
	}
	.page-recruit .page-interview .employee__info {
		font-weight: 700;
	}
	.page-recruit .page-recruit-person .speech {
		font-weight: 800;
	}
	.page-recruit .page-recruitment__table th,
	.page-recruit .page-recruitment__table td {
		font-weight: 500;
	}
	/* エントリーフォームの行の下マージン削除(お問い合わせと同様・クライアント指定) */
	.page-recruit .sec-contact__main .contact-form__row {
		margin-bottom: 0;
	}

	/* 募集職種ラベル(現場職など): サイズ・パディング+テキストに縁。
	   縁は字を痩せさせないようpaint-orderで外側に描く */
	.page-recruit .page-recruitment__label {
		font-size: 30rem;
		padding: 0rem 55rem;
		-webkit-text-stroke: 1rem #333;
		paint-order: stroke fill;
	}
}

/* ⑬ インタビュー吹き出し本文(SP): 行間が2.2倍と広すぎて読みにくいため詰める */
@media screen and (max-width: 768px) {
	/* WORKS AND CREWマーキー(SP): テキスト↔イラスト間の余白を詰め(20→10rem、
	   PC比率相当)、スライド速度を上げる(40s→25s)。
	   ※右パディングは周期計算(トラック幅÷3)の一部のためgapと同値にすること */
	.page-recruit .flow-text {
		gap: 10rem;
		padding-right: 10rem;
		animation-duration: 25s;
	}

	.page-recruit .page-infrastructure .interview__balloon p {
		line-height: 1.75;
	}

	/* ⑩ 吹き出しの左右アキ統一(SP): 1・3枚目がpadding 30rem 10remで
	   2枚目(入社24年目=30rem)と不揃いだったため、全カード30remに統一 */
	.page-recruit .page-infrastructure .interview__balloon {
		padding: 30rem;
		border-radius: 60rem; /* クライアント指定 */
	}

	/* インタビューカード本文の行間(クライアント指定) */
	.page-recruit .page-interview .page-interview-card p {
		line-height: 1.5;
	}

	/* 資格取得支援の箱(SPのみ・クライアント指定) */
	.page-recruit .page-infrastructure .license {
		min-width: 100%;
	}

	/* メッセージ下部(page-message_bottom)のイラストを2%ずつ上へ(クライアント依頼。
	   各要素はbottom基準のためbottomに+2%) */
	.page-recruit .page-message .truck-2 {
		bottom: 25%; /* 元23% */
	}
	.page-recruit .page-message .truck-3 {
		bottom: 23.7%; /* 元21.7% */
	}
	.page-recruit .page-message .person03 {
		bottom: 29%; /* 元27% */
	}
	.page-recruit .page-message .person04 {
		bottom: 27%; /* 元25% */
	}

	/* FVの高さ(クライアント指定) */
	.page-recruit-hero {
		height: 750rem;
	}

	/* FVの鳥: 写真(photo-4)の背面に隠れていたため前面へ。位置はクライアント指定 */
	.page-recruit-hero .bird {
		z-index: 1;
		top: 36%;
		width: 100rem;
	}

	/* ⑧ FV写真: 画面端からの余白を確保(photo-4は右に211pxはみ出していた) */
	.page-recruit-hero .photo-1 {
		left: 15rem;
	}
	.page-recruit-hero .photo-2 {
		left: 5rem; /* クライアント指定(元15rem) */
		top: 57%;
	}
	.page-recruit-hero .photo-3 {
		width: 300rem;
		left: 45rem;
		top: 72%; /* クライアント指定 */
	}
	.page-recruit-hero .photo-4 {
		/* クライアント指定値(2026-09-03変更。topは元スタイルに戻す) */
		width: 500rem;
		left: auto;
		right: -300rem;
	}

	/* ⑦(SP) 角丸はSPは少し控えめに */
	.page-recruit .sec-contact .footer__tel {
		border-radius: 24rem;
	}
	/* 電話番号のサイズ(SP・クライアント指定値) */
	.page-recruit .sec-contact .footer__tel div strong {
		font-size: 31rem;
	}
	/* ⑪(SP) 注記が1行に収まるサイズへ */
	.page-recruit .sec-contact .footer__tel small {
		font-size: 10.5rem;
		letter-spacing: 0;
	}

	/* エントリーセクションの左右の線: セクションの枠線(1px #333)が全幅のため
	   画面端に縦線として見えていた。ボーダーを消すと角丸の弧が薄くなるため、
	   枠線は保ったままセクションを左右3remずつ画面外へ広げて縦線だけ隠す
	   (横はみ出しはbodyのoverflow-x:clipが抑止) */
	.page-recruit .sec-contact {
		/* width:100%指定があるため、幅も広げないと右端が内側に残る */
		width: calc(100% + 6rem);
		margin-left: -3rem;
		/* 下側は線・角丸なし、上角はクライアント指定の60rem */
		border-bottom: none;
		border-radius: 60rem;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		/* セクション下のマージン(100rem)を除去し、次のセクションと密着させる */
		margin-bottom: 0;
	}
	/* 広げた6rem分でモバイルのレイアウト幅が拡張されないよう、ラッパーで横クリップ */
	.page-recruit {
		overflow-x: clip;
	}

	/* ⑫ ENTRYのベージュをフッターまで連続させる:
	   間の写真帯(sec-gallery)とフッターマップ背景がSPで白のため、
	   ページ背景と同じベージュを敷く(waste-dictionaryと同対応・このページのみ) */
	.sec-gallery {
		background: #fbf9f4;
	}
	.sec-footer-map .back_map {
		width: 150vw;
		max-width: none;
		transform: translateX(-40vw);
		background-color: #fbf9f4;
	}
}

/* 同意チェック行: ベースCSSがpx指定のため画面幅に追従せず、端末幅によって
   相対的に大小が変わって見える。remに揃えてズーム設計に追従させる(PC/SP共通) */
.sec-contact__main .contact-form .contact-check {
	gap: 12rem;
}
.sec-contact__main .contact-form .contact-check .checkmark {
	width: 24rem;
	height: 24rem;
	border-width: 2rem;
}
.sec-contact__main .contact-form .contact-check .checkmark::after {
	left: 7rem;
	top: 3rem;
	width: 6rem;
	height: 12rem;
	border-width: 0 3rem 3rem 0;
}
.sec-contact__main .contact-form .contact-check .text {
	font-size: 16rem;
}