/* ==================================================
   ヘッダー 言語スイッチャー（JP | EN）＋ サブ行型ヘッダー
   - header--classic : 従来1段ヘッダー（翻訳ボタンは単独配置）
   - header--subnav  : サブ行付き2段ヘッダー（翻訳ボタンはサブ行内）
   ※ 本体CSS(style.css)の後に読み込まれ上書きする
   ================================================== */

/* ===== 言語スイッチャー本体（共通） ===== */
.header__lang {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-family: "Jost", sans-serif;
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	line-height: 1;
	white-space: nowrap;
}
.header__lang-item {
	color: inherit;
	text-decoration: none;
	opacity: 0.55;
	transition: opacity 0.2s ease, color 0.2s ease;
}
.header__lang-item.is-active {
	opacity: 1;
	font-weight: 600;
}
a.header__lang-item:hover {
	opacity: 1;
	color: #1e2e6c;
}
.header__lang-sep {
	opacity: 0.35;
}

/* ===== サブ行付き2段ヘッダー ===== */
.header-contents3.header--subnav .header__nav {
	margin-left: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	gap: 0.4rem;
}
/* SP(767px以下)はハンバーガーメニューに切替（上のdisplay:flexが共通CSSの非表示ルールを上書きしてPCナビが出てしまうため明示的に隠す） */
@media screen and (max-width: 767px) {
	.header-contents3.header--subnav .header__nav {
		display: none;
	}
}
.header-contents3.header--subnav .header__nav-sub {
	display: flex;
	align-items: center;
	gap: 1.1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.header-contents3.header--subnav .header__nav-sub > li {
	position: relative;
	line-height: 1;
}
.header-contents3.header--subnav .header__nav-sub > li > a {
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: rgba(51, 51, 51, 0.72);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.3s ease;
}
.header-contents3.header--subnav .header__nav-sub > li > a:hover {
	color: #1e2e6c;
}
/* サブ行はJP|ENのみのため区切り線は不要（旧: 施工事例/お問い合わせとの仕切り） */
.header-contents3.header--subnav .header__nav-sub-lang {
	display: flex;
	align-items: center;
}
.header-contents3.header--subnav .header__lang--sub {
	color: rgba(51, 51, 51, 0.72);
}

/* ===== RECRUIT CTA を出さないヘッダー（英語版）の右余白 =====
   通常は右端の余白を CTA ブロック（背景色付きで画面端まで到達）が担っているため、
   CTA が無いとナビが右端に貼り付く。ロゴの padding-left と同値を補って左右を揃える。
   ※ SP(767px以下)は .header__nav 自体が非表示でハンバーガーが端まで出る意匠のため対象外 */
.header-contents3.header--no-cta .header__nav {
	padding-right: 2.5rem;
}
@media screen and (max-width: 1100px) {
	.header-contents3.header--no-cta .header__nav {
		padding-right: 1.5rem;
	}
}

/* ===== 採用ヘッダー内（ナビ行内・「数字で見る」の横にインライン配置） ===== */
#recruit-header .navi .navi-inner ul li.header__nav-lang {
	display: flex;
	align-items: center;
	padding: 0 0.6rem;
	white-space: nowrap;
}
#recruit-header .header__lang--recruit {
	color: #231815; /* PC: ヘッダー白背景に合わせ濃色 */
}
#recruit-header .header__lang--recruit a.header__lang-item:hover {
	color: #1e2e6c;
}
/* モバイルナビ（オーバーレイ・濃紺背景）では白文字・中央寄せ */
@media screen and (max-width: 1100px) {
	#recruit-header .navi .navi-inner ul li.header__nav-lang {
		padding: 1rem 0;
		justify-content: center;
	}
	#recruit-header .header__lang--recruit,
	#recruit-header .header__lang--recruit a.header__lang-item,
	#recruit-header .header__lang--recruit a.header__lang-item:hover {
		color: #fff;
	}
}

/* ===== モバイルメニュー内 =====
   オーバーレイが濃紺(#1e2e6c)なので、既定の #333 のままだと背景に沈んで見えない。
   ナビのリンクと同じ白にする（採用ヘッダーのモバイル表示と同じ考え方） */
.header__mobile-menu .header__lang--mobile {
	margin-top: 1.5rem;
	font-size: 1rem;
	color: #fff;
}
/* 濃淡（現在の言語=不透明／もう一方=薄く）は共通指定のまま。ここではタップ領域だけ広げる */
.header__mobile-menu .header__lang--mobile .header__lang-item {
	padding: 0.5rem 0.6rem;
}
/* 共通のホバー色 #1e2e6c はオーバーレイと同色で消えるため、白のままにする */
.header__mobile-menu .header__lang--mobile a.header__lang-item:hover {
	color: #fff;
	opacity: 1;
}

/* ===== 英語ページ個別調整 ===== */
/* 英語トップ(/en/)は日本語トップと同じ全画面FVだが、body の id が #top ではなく #page-en のため
   下層ページ用の `body:not(#top) { padding-top: 80px / SP 60px }` が効いてしまい、
   FV全体がその分だけ下へずれる → 高さ 100svh のFVが画面からはみ出し、
   右下（SPは下部）のお知らせバナーが切れていた。
   ヘッダーは position:fixed で内容に重ねる意匠なので、日本語トップと同じく余白を0にする */
body#page-en {
	padding-top: 0;
}

/* トップFV(SP): 英文はローテーション本文が最大4〜5行になる（日本語は2行想定）。
   元の作りは items が position:absolute で、親の min-height:8.8em に収まる前提だったため、
   はみ出した分がそのまま下のお知らせバナーに潜り込んでいた。
   英語のときだけ「絶対配置＋固定の高さ」をやめ、グリッドで3枚を同じセルに重ねる。
   こうすると親の高さが一番長い項目に自動で合うので、英文を差し替えても崩れない。
   ※ 元ルールの詳細度が (2,5,1) と高いので、同じセレクタに body.lang-en を足して上書きしている */
@media screen and (max-width: 767px) {
	body.lang-en section#top-firstview #firstview.firstview-contents03-2 .section__container .firstview__text .firstview__text-title .firstview__rotating-text {
		display: grid;
		min-height: 0;
	}
	body.lang-en section#top-firstview #firstview.firstview-contents03-2 .section__container .firstview__text .firstview__text-title .firstview__rotating-item {
		position: static;
		grid-area: 1 / 1;
	}
	/* 本文とお知らせバナーの間に余白を確保（既定 2rem では詰まって見える） */
	body.lang-en section#top-firstview #firstview.firstview-contents03-2 .section__container .firstview__text:has(~ .fv-notice-banner) {
		padding-bottom: 3rem;
	}
}

/* 採用トップ: 英語はボタン文言が長いため max-width 解除 */
body.lang-en button.recruit-button02 a {
	max-width: none;
}

/* 採用トップ #recruit-data: 英語タイトルが長くアイコン・円グラフと重なるため調整（Win150%確認時に対応） */
/* 列幅を均等化（英語の nowrap な数値でmin-contentが膨らみ4列目が潰れるのを防ぐ） */
@media (min-width: 1101px) {
	body.lang-en section#recruit-data .bg-image .content .items {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
@media (max-width: 1100px) {
	body.lang-en section#recruit-data .bg-image .content .items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
/* item3(有給): タイトルを2行に収めて傘アイコンとの重なり回避 */
body.lang-en section#recruit-data .bg-image .content .items .item.item3 .title {
	font-size: 1.5rem;
	padding-right: 4rem;
}
/* item4(男女比率): タイトルを1行に収めて円グラフとの重なり回避 */
body.lang-en section#recruit-data .bg-image .content .items .item.item4 .title {
	font-size: 1.6rem;
}
/* item2(平均勤続): "11.3years" のはみ出し防止 */
body.lang-en section#recruit-data .bg-image .content .items .item.item2 .date {
	font-size: 3.4rem;
}
body.lang-en section#recruit-data .bg-image .content .items .item.item2 .date .unit {
	font-size: 2rem;
}
@media (max-width: 767px) {
	body.lang-en section#recruit-data .bg-image .content .items .item.item3 .title {
		font-size: 1.1rem;
		padding-right: 2.8rem;
	}
	body.lang-en section#recruit-data .bg-image .content .items .item.item4 .title {
		font-size: 1.1rem;
	}
	body.lang-en section#recruit-data .bg-image .content .items .item.item2 .date {
		font-size: 2.4rem;
	}
	body.lang-en section#recruit-data .bg-image .content .items .item.item2 .date .unit {
		font-size: 1.4rem;
	}
}

/* ===== 改行制御（全ページ共通） ===== */
/* 段落末尾の1〜2文字だけのぶら下がり改行を防ぐ（対応ブラウザのみ有効・非対応は従来通り） */
p,
dd,
li {
	text-wrap: pretty;
}

/* 複数行になる見出し・カードタイトルは行のバランスを取り、末尾1〜2文字の折り返しを防ぐ */
/* word-break: auto-phrase で「トラス構造/梁」のような単語途中の分断も防ぐ（Chrome/Edge・非対応は従来通り） */
.contents-column__title,
.contents-column__text-title,
.contents__item--title {
	text-wrap: balance;
	word-break: auto-phrase;
}

/* 文節単位の改行制御用ユーティリティ（テンプレート側で文節を span.u-phrase で括って使用） */
.u-phrase {
	display: inline-block;
}

/* 幅の狭いカード説明文（キャリアパス等）は行を均等化してぶら下がりを防ぐ */
.contents-column__excerpt {
	text-wrap: balance;
}

/* 強みページの説明文は長文段落のため balance だと行が早く折り返され右に大きな空きが出る */
/* → pretty＋文節改行(auto-phrase)で「北海/道」のような単語途中の分断も防ぐ */
section#strength-content .contents-column__excerpt {
	text-wrap: pretty;
	word-break: auto-phrase;
}

/* 送信完了ページ（/contact-complete/・/recruit/entry-complete/ とEN版の共通スタイル） */
#contact-complete-intro .contact-complete__text + .contact-complete__text {
	margin-top: 2.4rem;
}
#contact-complete-intro .button__area {
	margin-top: 4.8rem;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 20px;
}
/* ボタンを横並びにできるよう、button04 の width:100% を打ち消す */
#contact-complete-intro .button__area button.button04 {
	width: auto;
}
@media screen and (max-width: 767px) {
	#contact-complete-intro .button__area {
		flex-direction: column;
		align-items: center;
		gap: 16px;
	}
	#contact-complete-intro .button__area button.button04 {
		width: 100%;
		max-width: 32rem;
	}
}

/* 送信内容の確認ページ（/contact-confirm/・/recruit/entry-confirm/ とEN版の共通スタイル）
   確認リスト自体は js/common.js が生成する */
section#contact-confirm-contents {
	padding: 180px 0 140px;
}
/* ページヘッダー（recruit-contents-header等）がある確認ページは上余白を詰める */
section#contact-confirm-contents.is-under-header {
	padding-top: 60px;
}
section#contact-confirm-contents .form-confirmation {
	max-width: 900px;
	margin: 0 auto;
	background: #eee;
	padding: 40px 30px;
	border-radius: 8px;
}
section#contact-confirm-contents .form-confirmation h3 {
	margin-bottom: 20px;
	text-align: center;
	color: #1e2e6c;
	font-size: 1.2rem;
	font-weight: 500;
}
section#contact-confirm-contents .form-confirmation dl {
	display: grid;
	grid-template-columns: 25% 75%;
	gap: 20px 0;
	margin-bottom: 30px;
}
section#contact-confirm-contents .form-confirmation dt {
	font-weight: bold;
}
section#contact-confirm-contents .form-confirmation dd {
	white-space: normal;
	line-height: 1.8;
	word-break: break-word;
	overflow-wrap: anywhere;
}
section#contact-confirm-contents .confirmation-buttons {
	display: flex;
	justify-content: center;
	gap: 20px;
}
section#contact-confirm-contents .back-button,
section#contact-confirm-contents .send-button {
	padding: 12px 30px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}
section#contact-confirm-contents .back-button {
	background: #ccc;
}
section#contact-confirm-contents .send-button {
	background: #1e2e6c;
	color: #fff;
}
section#contact-confirm-contents .send-button:disabled {
	opacity: 0.6;
	cursor: default;
}
section#contact-confirm-contents .confirm-error {
	margin-top: 16px;
	text-align: center;
	color: #d24646;
}
@media screen and (max-width: 767px) {
	section#contact-confirm-contents {
		padding: 120px 0 80px;
	}
	section#contact-confirm-contents.is-under-header {
		padding-top: 40px;
	}
	section#contact-confirm-contents .form-confirmation {
		padding: 30px 20px;
	}
	section#contact-confirm-contents .form-confirmation dl {
		grid-template-columns: repeat(1, 1fr);
		gap: 0;
	}
	section#contact-confirm-contents .form-confirmation dt {
		margin-top: 20px;
	}
}

/* 製品説明文（一覧・トップの製品パネル）: 行を均等化し「〜で/す。」等の不自然な折り返しを防ぐ */
/* SPでは行数が多くなり balance が上限(6行)超えで無効になるため pretty、PCのみ balance */
/* ※製品詳細本文(.contents-column__article p)は text-align: justify のため balance 禁止 */
/*   （行が短く折り返され両端揃えで字間が伸びる）→ pretty＋文節改行(auto-phrase)を適用 */
.column-text__excerpt,
.contents-column__article p,
.products-tab__desc {
	text-wrap: pretty;
}
.contents-column__article p {
	word-break: auto-phrase;
}
@media (min-width: 768px) {
	.column-text__excerpt,
	.products-tab__desc {
		text-wrap: balance;
	}
}

/* ============================================
   採用トップ 数字帯：カードを1枚画像化
   （数値の更新は images/recruit/number-band/ の
     同名ファイル差し替え。操作マニュアル8章参照）
   ============================================ */
section#recruit-data .bg-image .content .items .item.is-image {
	padding: 0;
	background: none;
	aspect-ratio: auto;
}
section#recruit-data .bg-image .content .items .item.is-image img {
	display: block;
	width: 100%;
	height: auto;
}

/* ============================================
   投稿詳細のテーブル：外枠線を常に表示
   （テーマ側が最終列の border-right を消す設計
     ＋コアCSSの currentColor 枠線が混在し、
     右側だけ枠線が消えて見えていた件の修正）
   ============================================ */
section#single-post .section__container .wp-block-table table {
	border: 1px solid #ddd;
}
section#single-post .section__container .wp-block-table tbody td {
	border: 1px solid #eee;
}
section#single-post .section__container .wp-block-table thead th {
	border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ============================================
   施工事例 詳細（英語）：本文にJA版相当のスタイル
   （.case-detail__body は素のままだったため、
     画像が左寄せ・余白なしで小さく見えていた）
   ============================================ */
#case-detail .case-detail__body img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 40px auto;
}
#case-detail .case-detail__body p {
	line-height: 1.9;
}
/* 英語本文の仕様表（JA本文と同じ wp-block-table を使う）。
   枠線の指定が section#single-post スコープなので、EN側(#case-detail)にも同じ見え方を与える */
#case-detail .case-detail__body .wp-block-table {
	margin: 0 0 40px;
	overflow-x: auto;
}
#case-detail .case-detail__body .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid #ddd;
}
#case-detail .case-detail__body .wp-block-table td {
	border: 1px solid #eee;
	padding: 1rem 1.2rem;
	line-height: 1.9;
	vertical-align: top;
}
/* 1列目＝項目名（Details / Application）は幅を抑えて中央寄せ */
#case-detail .case-detail__body .wp-block-table td:first-child {
	width: 9rem;
	white-space: nowrap;
	text-align: center;
	font-weight: 700;
}
@media screen and (max-width: 767px) {
	#case-detail .case-detail__body .wp-block-table td {
		padding: 0.8rem;
	}
	#case-detail .case-detail__body .wp-block-table td:first-child {
		width: 6rem;
	}
}
/* 施工事例 詳細（英語）ヘッダーの英語タイトル：
   既存の .contents-title__main は line-height:1 のため
   長いタイトルが折り返すと行が詰まる → EN施工事例のみ調整 */
#contents-header .case-title-en .contents-title__main {
	line-height: 1.7;
}

/* ============================================
   英語版ヘッダー：ロゴ下の英語社名
   ロゴ画像は日本語ワードマークなので、英語版だけ下に社名を添える。
   ※ 透過ヘッダー（FV表示中）ではロゴ画像が filter で白くなるが、
     テキストは別指定が必要なのでここで白に切り替える
   ============================================ */
/* 既存の header.header-contents3 .header__logo a（詳細度 0,2,2）に align-items:center があるため、
   同等以上の詳細度で上書きしないと中央寄せのままになる */
header.header-contents3 .header__logo--en a {
	flex-direction: column;
	align-items: flex-start;
	/* rem のままだと 767px 直下で root が 27px 近くまで膨らみ 60px ヘッダーからはみ出すため px で上限を付ける */
	gap: clamp(2px, 0.28rem, 4px);
}
.header-contents3 .header__logo-en {
	display: block;
	font-family: "Jost", sans-serif;
	font-size: clamp(9px, 0.6rem, 11px);
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1;
	white-space: nowrap;
	color: #1e2e6c;
	transition: color 0.35s ease;
}
body:not(.is-menu-open) .header-contents3.is-transparent .header__logo-en {
	color: #ffffff;
}
/* 767px直下はロゴ画像だけで44px近くになり60pxヘッダーの余裕が乏しいので、さらに詰める */
@media screen and (max-width: 767px) {
	header.header-contents3 .header__logo--en a {
		gap: 2px;
	}
	.header-contents3 .header__logo-en {
		font-size: clamp(8px, 0.5rem, 9px);
		letter-spacing: 0.06em;
	}
}

/* 英語版フッター：ロゴ下の英語社名（ヘッダーと同じ表記・濃紺背景なので白）
   ※ .footer__left :nth-child(n+2) が効いてしまうためサイズは明示する */
footer.footer-contents2 .footer__img--en .footer__logo-en {
	display: block;
	margin-top: 0.6em;
	font-family: "Jost", sans-serif;
	font-size: clamp(9px, 0.6rem, 12px);
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1;
	color: #ffffff;
}
@media screen and (max-width: 767px) {
	footer.footer-contents2 .footer__img--en .footer__logo-en {
		font-size: clamp(9px, 0.5rem, 11px);
		letter-spacing: 0.06em;
	}
}

/* ============================================
   見出し構造まわり（日英共通）
   ============================================ */
/* 視覚的に隠す見出し（トップのh1など）。WPコアにも同名クラスはあるが、
   コアCSSの読み込みに依存しないようテーマ側にも定義しておく */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* 英語版のページ見出しは sub（Our Strengths）と main（Strength）が重複するため main を非表示に。
   JAは main が装飾英字なので従来どおり表示する */
/* __sub がある場合のみ（＝重複しているときだけ）隠す。
   施工事例詳解のENは __sub が無く __main がタイトル本体なので対象外にする */
body.is-en #contents-header .contents-title__sub ~ .contents-title__main {
	display: none;
}

/* フッターCTAの見出しは h3 → h2 に変更したが、素のタグ由来のサイズが 24px→32px に変わる。
   中の div が表示サイズを持つため文字は変わらないが、余白計算に影響しないよう従来値(h3相当)に固定する */
.cta-contents__title h2 {
	font-size: 24px;
}
@media screen and (max-width: 1100px) {
	.cta-contents__title h2 {
		font-size: clamp(24px, 24px + clamp(13.5px, 3.6vw, 999px) * 2, 28.8px);
	}
}

/* 英語版ローディング：ロゴ下の英語社名（背景が白なのでヘッダーと同じ紺）
   初期 opacity:0 は loader.js（GSAP）がロゴ画像と一緒にフェードインさせる */
#loader-container .loader-content .loader-logo-en {
	display: block;
	margin-top: 0.8rem;
	font-family: "Jost", sans-serif;
	font-size: clamp(11px, 1.05vw, 20px);
	font-weight: 500;
	letter-spacing: 0.12em;
	line-height: 1;
	text-align: center;
	color: #1e2e6c;
	opacity: 0;
}

/* SP：フッター左側（住所ブロック）を左寄せにする
   SPは footer__left 自体が text-align:center（ロゴを中央に置くため）なので、
   2番目以降の子＝住所まわりだけ左寄せに戻す。日英・全ページ共通 */
@media screen and (max-width: 767px) {
	footer.footer-contents2 .footer__left :nth-child(n+2) {
		font-size: clamp(12px, 0.7rem, 14px);
		line-height: 1.7 !important;
		letter-spacing: 1.08px;
		font-style: normal;
		text-align: left;
	}

	/* 英語版のロゴ下の社名はロゴ画像の2番目の子なので上の指定に巻き込まれる。
	   ロゴ画像は中央のままなので、こちらも中央に戻して縦に揃える */
	footer.footer-contents2 .footer__img--en .footer__logo-en {
		text-align: center;
	}
}