@charset "UTF-8";
/* 南陽吉久 採用サイト タブレット／PC対応
 *
 * 【鉄則】
 * 1. assets/css/style.css（移行元のビルド済みTailwind出力）には一切手を入れない。
 *    31ページ全部の見た目があの1本で決まっているため。
 * 2. 上書きは原則 @media (min-width: 481px) 以上の中に置く。
 *    ⚠ 2026-09-10 に方針が2段変わった。
 *      ・器（.site-shell）は下層ページに続き **TOPも481pxから開く**（それまでTOPは768px）。
 *        481〜767pxで黄色い面の左右が白く空いて見えたため（米倉さん指摘）。
 *      ・**SPの見た目を変えないという条件を、意図的に2箇所だけ破った**（米倉さん指示）：
 *          - 追従CTA（下部固定バー）を全幅で出さない
 *          - 代わりにヘッダーへエントリーボタンを常設（〜767pxは小さいサイズ）
 *        この2つだけメディアクエリの外に置いてある。ほかはSPに影響させない。
 *      ・2026-10-26 に3箇所めを足した（南陽吉久様の指示）：
 *          - 求人詳細の募集要項をSPでも常時表示にする（PCは 9/1 から常時表示）
 * 3. 適用は「PC対応が済んだページ」だけに限る。目印は body の 2 クラス。
 *      body.ny-pc   … 全31ページに在る共通部（器・ヘッダー・フッター・RECRUIT帯・
 *                      エントリーボタン・追従CTAの撤去）。付与は functions.php の
 *                      ny_recruit_body_class() の $ready に列挙したページのみ。
 *      body.ny-page-<slug> … ページ個別の指定（例 body.ny-page-data）。
 *                      page-id-NN は本番で番号が変わり得るので使わない。
 *      body.home    … TOP専用の中身（FV・#message・#aboutus・INTERVIEW など）。
 *    → $ready に入れていないページは従来どおり480pxの1カラムで守られる。
 *    ⚠ 器だけ先に開けてはいけない。本文が画面幅まで伸びて、480pxのままより悪くなる
 *      （/data/ で実測：50字の段落が幅1428pxの1行になり右半分が空く）。
 *      ページ本文の組み直しと同じステップで $ready に足すこと。
 *
 * 【帯】（2026-09-10 更新）
 *   SP          〜480px    器＝画面幅。実機のSPはここ
 *   小タブレット 481〜767px  器は全幅に開くが、中身の組み方はSPのまま（1カラム）
 *   タブレット   768〜1199px 2カラム・グリッド化が入る
 *   PC          1200px〜    本文の器1080px
 *   ⚠ 481〜767pxで「2カラムにしない」ものが3つある。いずれも固定幅が理由：
 *       ・エントリーカード（キャラ300px＋padding104px＝文章列が潰れる／3290行あたり）
 *       ・INTERVIEWのカルーセル（カード内の白い面が w-[353px] 固定／410行あたり）
 *       ・ABOUT USのリンクリスト2列（5本を2列にすると狭い／115行あたり）
 *
 * 【レイアウトの根拠】
 *   南陽吉久/ワイヤー実装/index.html（PC1440ワイヤー）の実測値に合わせている。
 *     器（ヘッダー幅）1400 ／ 本文の器 1080 ／ セクション上下 100
 *     2カラム = 1fr + 400px・gap 64 ／ リンクリスト 2列・gap 48 ／ インタビュー 4列・gap 24
 *   デザイン要素（色・書体・角丸・枠線・画像）は既存サイトのものをそのまま使い、
 *   並べ方だけワイヤーに寄せる方針。
 */

/* ==========================================================================
   トークン
   ========================================================================== */

:root {
	/* SPの既定値。現状の実装と同じ値なので、SPでは何も変わらない */
	--ny-shell-max: 480px;
	--ny-inner: 100%;
	--ny-header-inner: 100%;
	--ny-gutter: 16px;
	--fv-r: 0px;
	--ny-sec-gap: 0px;
	--ny-col-side: 400px; /* 2カラムの右側（図版）の幅 */
	--ny-col-gap: 64px;
}

@media (min-width: 481px) {
	:root {
		--ny-shell-max: none;
		--ny-header-inner: 1400px;
		--ny-inner: 1080px;
		--ny-gutter: 32px;
		--ny-sec-gap: 160px;
		/* 読み物の行長の上限。ワイヤーのインタビュー詳細が本文820pxなのでそれに揃える。
		   器（1080）いっぱいにすると18pxの本文が1行60字を超えて読めなくなる */
		--ny-read: 820px;
	}
}

@media (min-width: 1200px) {
	:root {
		--ny-gutter: 40px;
	}
}

/* ==========================================================================
   器（.site-shell）
   --------------------------------------------------------------------------
   既存の max-w-[480px] は単一クラス（詳細度 0,1,0）なので、
   body.ny-pc .site-shell（0,2,0）で上書きできる。
   → 既存のTailwindクラスを削らずに済む＝未対応ページへの副作用がゼロ。
   ========================================================================== */

@media (min-width: 768px) {
	/* 対応済みページの一覧は functions.php の ny_recruit_body_class() 側（$ready）。
	   セクションの面は画面幅いっぱい。左右に下地（黄色）を見せない。 */
	body.ny-pc .site-shell {
		max-width: none;
		width: 100%;
		margin-inline: 0;
		border-inline: 0;
	}

	/* 面（オレンジ／白／黒）は器いっぱいに広げたまま、中身だけ1080に絞る。
	   ワイヤーの「ヘッダー1400・本文1080」を再現するための受け皿。 */
	body.home #message > *,
	body.home #aboutus > .bg-white > * {
		max-width: var(--ny-inner);
		margin-inline: auto;
	}
}

/* ==========================================================================
   イントロ（#message）
   ========================================================================== */

@media (min-width: 481px) {
	/* お知らせバーはFVの直下にくっつける（上の余白は持たせない） */
	body.home #message {
		padding-top: 0;
		padding-bottom: var(--ny-sec-gap);
	}
}

/* ==========================================================================
   南陽吉久について（ABOUT US）
   --------------------------------------------------------------------------
   罫線区切りの1行リンク（カードではない）を、ワイヤーどおり2列に流す。
   パーツの形は変えない＝リストのまま。
   ========================================================================== */

@media (min-width: 768px) {
	/* 5本のリンクを2列に。DOMは触らずCSSだけで段組みする */
	body.home #aboutus .bg-white > .flex.flex-col {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 48px;
	}

	/* 2列にすると上端が開くので、1行目の2本にだけ上罫線を足す（ワイヤーと同じ処理） */
	body.home #aboutus .bg-white > .flex.flex-col > a:nth-child(1),
	body.home #aboutus .bg-white > .flex.flex-col > a:nth-child(2) {
		border-top: 1px solid rgb(209 213 219); /* 既存の border-gray-300 と同色 */
	}
}

@media (min-width: 481px) {
	/* 見出し背面の弧は支給素材（pc-about-arc.png・1440×573・上部透過）に差し替える。
	   元の earth_bg は正円なので全幅にすると中央だけ膨らむため、PCでは使わない。 */
	body.home #aboutus .section-title img {
		display: none;
	}

	/* SPは弧を本文へ150px食い込ませているが、PCは逆に150px空ける。
	   #message 側の下余白（150px）がそのまま間隔になる。 */
	body.home #aboutus > .section-title {
		margin-top: 0;
	}

	/* 本文ラッパーが持つ mb-10（40px）を消し、#message の下余白150pxだけを間隔にする */
	body.home #message .flex.flex-col {
		margin-bottom: 0;
	}

	body.home #aboutus > .section-title {
		height: auto;
		aspect-ratio: 1440 / 425;
		background-image: url("../img/pc-about-arc.png");
		background-repeat: no-repeat;
		background-position: top center;
		background-size: 100% auto;
	}
}

/* ==========================================================================
   ファーストビュー（暫定）
   --------------------------------------------------------------------------
   FVの中身は top-[240px] / right-[-20px] のようにピクセル固定の絶対配置で、
   480px幅を前提に組まれている。器だけ広げると座標が散らばって崩れる。
   ここでは構図を壊さないよう 480px の座標系のまま中央に置き、
   左右はオレンジで埋めて全幅に見せる（SPと同じ絵になる）。
   ※PC専用のメインビジュアルに作り替えるのは別途。
   ========================================================================== */

@media (min-width: 481px) {
	/* 面（オレンジ）は全幅のまま。中の絶対配置だけを「中央480pxの列」基準に置き直す。
	   left:-50px  →  left: calc(50% - 240px - 50px)  のように、
	   すべて calc(50% ± n) で 480px 列の座標へ機械的に変換している。 */
	body.home main > div:first-child {
		overflow: hidden;
	}

	/* 768〜1023：SPの構図のまま中央に置く（左右に振り分けるには幅が足りない） */
	body.home .fv-circle-1 {
		left: calc(50% - 290px);
	}

	body.home .fv-circle-2 {
		right: calc(50% - 260px);
		left: auto;
	}

	body.home main > div:first-child > img[src*="live_yellow_"] {
		right: calc(50% - 40px);
	}

	body.home main > div:first-child > img[src*="live_Z"] {
		right: calc(50% - 250px);
	}

	body.home main > div:first-child > img[src*="livooo_"] {
		right: calc(50% - 375px);
	}

	body.home main > div:first-child > div:last-child {
		right: calc(50% - 230px);
	}
}

/* 1024px以上：テキストを画面左、絵柄（写真・イラスト・Live装飾）を画面右に振り分ける。
   ------------------------------------------------------------------------
   サイズ・位置はすべて vw（画面幅に比例）で置く。固定pxにすると、
   基準にした幅以外で豚やリングが画面外へはみ出す（1392pxで合わせると1050pxで破綻した）。
   clamp() の下限・上限は、狭い画面で潰れず、広い画面で大きくなりすぎないための歯止め。 */
@media (min-width: 1024px) {
	:root {
		/* 絵柄をまとめる基準：コンテンツ列の右端からの距離 */
		--fv-r: max(24px, 10.5vw);
	}

	/* 画面幅に合わせて背を決める。下で画像が見切れないように高さも比例させる */
	body.home main > div:first-child {
		/* 豚の下端は top(22vw) + 高さ(44.5vw) = 66.5vw に来る。
		   見切れないよう、それより余裕のある高さにする。 */
		height: clamp(760px, 70vw, 980px);
	}

	/* 左下の大きい円写真 */
	body.home .fv-circle-1 {
		left: max(24px, calc((100% - var(--ny-inner)) / 2 - 60px));
		right: auto;
		top: clamp(260px, 25vw, 360px);
		width: clamp(260px, 26.9vw, 375px);
		height: clamp(260px, 26.9vw, 375px);
		z-index: 5;
	}

	/* 右上の円写真 */
	body.home .fv-circle-2 {
		right: calc(var(--fv-r) - 7.5vw);
		left: auto;
		/* ご指定は clamp(80px, -5.7vw, 130px) だったが、真ん中が負だと常に80px固定になり
		   画面幅に追随しなくなるため、同じ「上へ」を正の値で表現している */
		top: clamp(40px, 5.7vw, 90px);
		width: clamp(180px, 19vw, 265px);
		height: clamp(180px, 19vw, 265px);
		z-index: 5;
	}

	/* 黄色い英字リング。白いリングと少しずらして重ね、SPと同じ2本構成にする */
	/* SPでは白リング(800px)に対して 上へ480px・内へ210px ずれた位置にある。
	   その比率（0.6 / 0.2625）を保ったまま同じサイズで重ねると、
	   白リングの奥から黄色の文字が覗く元のバランスになる。 */
	/* 黄色の英字リングは白リングより一回り大きく取り、画面の左端と上端に
	   文字が少しだけ覗く位置に置く（全体が見えると黄色が主張しすぎる）。 */
	body.home main > div:first-child > img[src*="live_yellow_"] {
		display: block;
		right: calc(var(--fv-r) - 14vw);
		top: -20%;
		width: clamp(400px, 42vw, 600px);
		height: clamp(400px, 42vw, 600px);
		min-width: 0;
	}

	/* 回転するLiveリング。円周の文字が途切れないよう大きめに取る */
	body.home main > div:first-child > img[src*="live_Z"] {
		right: calc(var(--fv-r) - 15vw);
		top: clamp(60px, 7vw, 100px);
		width: clamp(680px, 72vw, 1020px);
		height: clamp(680px, 72vw, 1020px);
		min-width: 0;
	}

	/* 豚（ライブー） */
	body.home main > div:first-child > img[src*="livooo_"] {
		right: calc(var(--fv-r) - 7.5vw);
		top: clamp(230px, 22vw, 310px);
		width: clamp(430px, 44.5vw, 620px);
		height: clamp(430px, 44.5vw, 620px);
	}

	/* キャッチコピーは画面左・上寄り */
	body.home main > div:first-child > div:last-child {
		/* ご指定は clamp(80px, -2vw, 170px)。真ん中が負だと常に80px固定になるため、
		   同じ「上へ」を幅に追随する正の値で表現している（1392pxで約77px） */
		top: clamp(60px, 5.5vw, 110px);
		right: auto;
		left: max(24px, calc((100% - var(--ny-inner)) / 2));
		z-index: 10;
		transform: none;
	}

	body.home main > div:first-child > div:last-child > div {
		text-align: left;
		font-size: clamp(40px, 4.6vw, 64px);
		line-height: 1.55;
	}

	/* SPで中央寄せのためにかけていた横ずらしを解除 */
	body.home main > div:first-child > div:last-child .-translate-x-6 {
		--tw-translate-x: 0;
		translate: 0;
	}
}

/* ==========================================================================
   2カラムの共通形（BUSINESS／OUR DATA）
   --------------------------------------------------------------------------
   ワイヤー .cols2 = grid-template-columns:1fr 400px / gap:64px / align-items:center
   左に「見出し＋リード＋ボタン」、右に「図版」。DOM順は変えずにCSSで配置し直す。
   ========================================================================== */

/* 2カラム化は1024px以上。768〜1023は1カラムのまま（器だけ広い）。
   768で2カラムにすると左が240pxしか残らず、ボタンの文字が折れて図版も切れる。 */
@media (min-width: 1024px) {
	body.home #aboutus .bg-white > section {
		display: grid;
		grid-template-columns: 1fr var(--ny-col-side);
		/* 1・2行目は内容ぴったり、余りは3行目が吸収する。
		   これをやらないと右の図版の高さが3行に分配され、左の見出し・本文の行間が間延びする */
		grid-template-rows: max-content max-content 1fr;
		column-gap: var(--ny-col-gap);
		align-items: start;
	}

	/* 見出し（h2＋英字）→ 左・1行目 */
	body.home #aboutus .bg-white > section > .mb-6:first-child {
		grid-column: 1;
		grid-row: 1;
		margin-bottom: 0;
	}

	/* リード文 → 左・2行目 */
	body.home #aboutus .bg-white > section > p {
		grid-column: 1;
		grid-row: 2;
		margin-top: 16px;
		margin-bottom: 0;
	}

	/* ボタン群（BUSINESS のピル3本）→ 左・3行目。
	   列いっぱいに伸ばさず、「数字で見る南陽吉久」のボタンと同じく内容幅にする。
	   3本は最も長いものに揃えて幅を統一。 */
	body.home #aboutus .bg-white > section > .mt-10 {
		grid-column: 1;
		grid-row: 3;
		width: var(--ny-btn-w);
		margin-top: 32px;
	}

	body.home #aboutus .bg-white > section > .mt-10 > a {
		width: 100%;
	}

	/* 図版 → 右・全行にまたがって中央 */
	body.home #aboutus .bg-white > section > img,
	body.home #aboutus .bg-white > section > .mx-auto {
		grid-column: 2;
		grid-row: 1 / span 3;
		align-self: center;
		width: 100%;
		max-width: var(--ny-col-side);
		margin: 0;
	}

	/* OUR DATA の「南陽吉久を数字で見る」ボタン → 左・3行目・内容幅 */
	/* 「数字で見る南陽吉久」も仕事紹介のボタンと同じ幅に揃える */
	body.home #aboutus .bg-white > section > a.rounded-full {
		grid-column: 1;
		grid-row: 3;
		width: var(--ny-btn-w);
		margin-top: 32px;
	}

	/* セクション間の余白。グレー面が自前で上下80pxを持つので、ここは半分にして
	   「白80px＋グレー80px＝160px」で境界が揃うようにする */
	body.home #aboutus .bg-white > section {
		margin-bottom: calc(var(--ny-sec-gap) / 2);
	}
}

/* 右カラム（図版）の幅。1024帯では400pxだと左が痩せるので少し細く */
@media (min-width: 1024px) {
	:root {
		--ny-col-side: 320px;
		/* セクション内のボタン幅（仕事紹介の3本と「数字で見る」で共通） */
		--ny-btn-w: 300px;
	}
}

@media (min-width: 1200px) {
	:root {
		--ny-col-side: 400px;
	}
}

/* 最後のセクションの下余白は白面の padding-bottom に任せる（二重で空くのを防ぐ）。
   1024帯にも効かせないと、そこだけ300pxになる。 */
@media (min-width: 481px) {
	body.home #aboutus .bg-white > section:last-child {
		margin-bottom: 0;
	}
}

/* ==========================================================================
   働く人を知る（INTERVIEW）
   --------------------------------------------------------------------------
   ワイヤー：カルーセルをやめて横4列で全件見せ。
   Splide は list/slide にインラインstyleで transform・width を書き込むため、
   !important で上書きして grid に組み替える（JSは触らない＝いつでも戻せる）。
   ========================================================================== */

/* ⚠ 下の splide→grid の一式は TOP 専用。**2026-09-10に481px始まりへ下げた**
   （器をTOPも481pxから開けたため。それまでは768始まり）。
   新卒／中途の一覧も同じ Splide を使うが、あちらはファイル末尾の archive-job 用
   ブロックで前から481pxから作り直している。
   インタビュー詳細の「他のインタビュー」も同じクラスだが、そちらは触っていない。 */
/* ⚠ カルーセル→グリッドの置き換えは 768px から。481pxへ下げてはいけない
   【2026-09-10 実測】カード内の白いテキスト面が `w-[353px]` の固定幅なので、
   列幅が353pxを下回ると面だけが列から溢れて右端で切れる
   （482px→列229px／700px→列338pxで実際に切れた。768pxで列372pxになり収まる）。
   767pxまではSPと同じカルーセル（1枚ずつ大きく見せる）のままにしている。 */
@media (min-width: 768px) {
	body.home .interview-splide .splide__track {
		overflow: visible;
	}

	body.home .interview-splide .splide__list {
		display: grid !important;
		/* タブレットは2列。4列だと1枚158pxまで痩せる。
		   1fr の最小値は min-content なので、中の画像に押し広げられないよう minmax(0,1fr) にする */
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
		transform: none !important;
		width: auto !important;
		max-width: var(--ny-inner);
		margin-inline: auto !important;
	}

	body.home .interview-splide .splide__slide {
		width: auto !important;
		margin: 0 !important;
		/* Splide は表示範囲外のスライドを visibility:hidden で隠す。
		   grid で全件並べるのでここは常に見せる。 */
		visibility: visible !important;
	}

	/* 全件見えるので矢印は不要 */
	body.home .interview-splide .splide__arrows {
		display: none;
	}
}

/* 弧と見出しは481pxから（器が481pxで開くので、SPの円画像を伸ばすと崩れる） */
@media (min-width: 481px) {
	/* 見出し背面のオレンジの弧は支給素材（pc-interview-arc.png・1440×446・上部透過）。
	   LIVE!の文字も弧も1枚に入っているので、円画像とCSSの楕円は使わない。
	   （文字は動かさない方針＝静止画像で足りる） */
	body.home img[src*="yellow-circle_"],
	body.home img[src*="live3_"] {
		display: none;
	}

	body.home main [class~="mt-[200px]"] {
		background-image: url("../img/pc-interview-arc.png");
		background-repeat: no-repeat;
		background-position: top center;
		background-size: 100% auto;
		/* 弧のぶんの高さを確保する（素材は 1440×307 ＝ 幅の21.32%） */
		padding-top: 21.32%;
	}

	/* 見出しは弧の内側（下寄り）へ引き上げる。
	   引き上げたぶんは margin-bottom で戻し、オレンジ面が弧の下端から始まるようにする。 */
	body.home main div.font-outfit.z-20 {
		z-index: 30;
		/* 見出しの下端が弧の下端に来るように引き上げる。
		   SPで使っている -translate-y-6 は打ち消して、間隔をCSSだけで決める。 */
		margin-top: -64px;
		margin-bottom: 0;
		translate: 0;
	}

	/* オレンジ面は弧の下端から。角丸は素材側が担う */
	body.home main div.bg-o-orange.z-20 {
		margin-top: 0;
		padding-top: 50px; /* 見出しとカードの間隔 */
		border-radius: 0;
	}

	/* ABOUT US のリード文はセンター揃え */
	body.home #aboutus > .bg-white > p {
		text-align: center;
	}
}

/* ==========================================================================
   RECRUIT
   --------------------------------------------------------------------------
   ワイヤー：新卒／中途の正方形バナーは流用のまま、PCでは横2枚並び。
   ========================================================================== */

@media (min-width: 768px) {
	body.ny-pc #recruit > div {
		padding-block: var(--ny-sec-gap);
	}

	/* 黒い面は器いっぱい、中身は1080に絞る */
	body.ny-pc #recruit > div > * {
		max-width: var(--ny-inner);
		margin-inline: auto;
	}

	/* 新卒・中途バナーを横並びに */
	body.ny-pc #recruit .flex.flex-col.gap-4 {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 24px;
	}
}

@media (min-width: 1200px) {
	body.ny-pc #recruit > div {
		padding-block: var(--ny-sec-gap);
	}
}

/* インタビューはPCで4列（ワイヤーどおり全件横並び） */
@media (min-width: 1024px) {
	body.home .interview-splide .splide__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ==========================================================================
   追従CTA は全幅で出さない【2026-09-10 米倉さん指示】
   --------------------------------------------------------------------------
   下部固定バー（SP）と右上の固定ボックス（PC）の2つ。もとはPC（768px以上）だけ
   撤去していたが、**SPでも消して、代わりにヘッダーへエントリーボタンを常設する**
   方針に変わったため、メディアクエリの外へ出した。
   ⚠ これは「SPの見た目を変えない」という当初の鉄則を意図的に破る唯一の箇所。
     マークアップは footer.php の <aside class="fixed … z-30"> 2つ（残してある）。
   ========================================================================== */

body.ny-pc [class~="fixed"][class~="z-30"] {
	display: none;
}

/* 下部固定バーのための逃げ余白も不要になる */
body.ny-pc [class~="pb-[112px]"] {
	padding-bottom: 0;
}

/* ==========================================================================
   共通：エントリーのピルボタン（ヘッダー／フッター／RECRUIT）
   --------------------------------------------------------------------------
   形は既存サイトのピル（border 3px・rounded-full・右に黒丸矢印）に合わせている。
   ========================================================================== */

/* SP（〜767px）のヘッダーにもエントリーを出す【2026-09-10 米倉さん指示】。
   追従CTAを消したぶんの導線をここで受ける。ロゴ＋ピル＋ハンバーガーが
   320pxでも収まるサイズにしてある（実測）。フッターとRECRUIT帯のボタンは
   SPでは従来どおり出さない（RECRUIT帯にはSP用のバナー2枚があるため）。 */
body.ny-pc .ny-pc-entry {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 5px 5px 14px;
	border: 3px solid var(--color-o-black);
	border-radius: 999px;
	background-color: var(--color-o-red);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1;
	white-space: nowrap;
}

body.ny-pc .ny-pc-entry__arw {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background-color: var(--color-o-black);
}

body.ny-pc .ny-pc-entry__arw svg {
	width: 12px;
	height: 12px;
}

/* ヘッダー右側の間隔。SPは gap-4（16px）だとハンバーガーが押し出されるので詰める */
body.ny-pc .site-shell > header > div[class~="flex"] {
	gap: 10px;
}

/* RECRUIT帯のエントリーも SP で出す【2026-09-10 米倉さん指示】。
   新卒／中途のバナー2枚の下に、同じ幅で3つめとして並ぶ（親が flex-col gap-4）。
   見た目はバナーSVGに合わせて「赤い面＋外側に白い縁」。縁は影で作る
   （枠線だと角丸の内側に入って、隣のバナーの縁と太さが揃わない）。
   マークアップは17ファイルのRECRUIT帯すべてに入っているのでCSSだけで足りる。 */
body.ny-pc .ny-recruit-entry {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 18px 20px;
	border-radius: 999px;
	background-color: var(--color-o-red);
	box-shadow: 0 0 0 4px #fff;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1;
	text-align: center;
}

/* 375px未満（iPhone SE 等）はもう一段小さく */
@media (max-width: 374px) {
	body.ny-pc .ny-pc-entry {
		padding: 4px 4px 4px 10px;
		font-size: 13px;
		gap: 6px;
	}

	body.ny-pc .ny-pc-entry__arw {
		width: 22px;
		height: 22px;
	}
}

@media (min-width: 768px) {
	body.ny-pc .ny-pc-entry,
	body.ny-pc .ny-footer-entry,
	body.ny-pc .ny-recruit-entry {
		display: inline-flex;
		align-items: center;
		gap: 12px;
		padding: 7px 7px 7px 24px;
		border: 3px solid var(--color-o-black);
		border-radius: 999px;
		background-color: var(--color-o-red);
		color: #fff;
		font-size: 16px;
		font-weight: 700;
		letter-spacing: 0.04em;
		line-height: 1;
		white-space: nowrap;
		transition: filter 0.2s;
	}

	body.ny-pc .ny-pc-entry:hover,
	body.ny-pc .ny-footer-entry:hover,
	body.ny-pc .ny-recruit-entry:hover {
		filter: brightness(0.97);
	}

	body.ny-pc .ny-pc-entry__arw {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: none;
		width: 34px;
		height: 34px;
		border-radius: 50%;
		background-color: var(--color-o-black);
	}

	body.ny-pc .ny-pc-entry__arw svg {
		width: 14px;
		height: 14px;
	}
}

/* ==========================================================================
   ヘッダー（PCは全項目展開・ハンバーガーなし）
   ========================================================================== */

@media (min-width: 768px) {
	body.ny-pc .site-shell > header {
		height: 88px;
		/* 面は全幅、中身はワイヤーのヘッダー幅（1400）に揃える */
		padding-inline: max(24px, calc((100% - var(--ny-header-inner)) / 2));
	}

	/* 横並びナビは1024px以上。768〜1023では項目が折り返すのでハンバーガーのまま。
	   その帯でも導線が切れないよう、エントリーのピルだけは出しておく。 */
	/* ナビ最後の項目とエントリーボタンの間隔（親の gap-4=16px を上書き） */
	body.ny-pc .site-shell > header > div.flex {
		gap: 30px;
	}

	body.ny-pc .ny-pc-nav a {
		display: block;
		text-align: center;
		white-space: nowrap;
		transition: color 0.2s;
	}

	/* SPのドロワー項目と同じ字組み（text-18px / text-14px・英字はオレンジ）。
	   PCで別デザインにせず、並びだけ横に変える。 */
	body.ny-pc .ny-pc-nav__ja {
		display: block;
		font-size: 18px;
		font-weight: 700;
		letter-spacing: 0.04em;
		line-height: 1.4;
		color: var(--color-o-black);
	}

	body.ny-pc .ny-pc-nav__en {
		display: block;
		margin-top: 2px;
		font-family: var(--font-outfit);
		font-size: 14px;
		font-weight: 700;
		letter-spacing: 0.04em;
		line-height: 1;
		color: var(--color-o-orange);
	}

	body.ny-pc .ny-pc-nav a:hover .ny-pc-nav__ja {
		color: var(--color-o-orange);
	}

}

@media (min-width: 1024px) {
	body.ny-pc .ny-pc-nav {
		display: flex;
		align-items: center;
		gap: 28px;
	}

	/* 横並びナビが出る帯だけ、ハンバーガーとドロワーを使わない */
	body.ny-pc .hamburger,
	body.ny-pc #slide-menu,
	body.ny-pc #menu-overlay {
		display: none;
	}
}

@media (min-width: 1200px) {
	body.ny-pc .ny-pc-nav {
		gap: 44px;
	}
}

/* ==========================================================================
   お知らせバー（#message の先頭・器いっぱいの帯）
   ========================================================================== */

@media (min-width: 768px) {
	/* PCは画面幅いっぱいの帯。中の文字だけ本文と同じ1080の列に揃える。 */
	body.home #message > .ny-newsbar {
		max-width: none;
		margin-inline: -1rem;
		margin-top: 0;
		margin-bottom: var(--ny-sec-gap);
		border-radius: 0;
		padding: 12px max(24px, calc((100% - var(--ny-inner)) / 2));
		gap: 14px;
	}
}

@media (min-width: 1200px) {
	body.home #message > .ny-newsbar {
		margin-bottom: var(--ny-sec-gap);
	}
}

/* ==========================================================================
   RECRUIT（ワイヤー：見出し・本文は中央、バナー2枚、下にエントリー）
   ========================================================================== */

@media (min-width: 768px) {
	body.ny-pc #recruit .flex.flex-col.gap-y-6 {
		text-align: center;
		margin-bottom: 56px;
	}

	body.ny-pc .ny-recruit-entry {
		display: inline-flex;
		margin-top: 48px;
		margin-inline: auto;
		padding: 11px 11px 11px 32px;
		font-size: 18px;
	}

	/* margin-inline:auto を効かせるため、包む側をブロック中央に */
	body.ny-pc #recruit > div > .ny-recruit-entry {
		display: flex;
		width: max-content;
	}
}

/* ==========================================================================
   フッター（ワイヤー：ロゴ＋エントリーの上段／4カラムのナビ／下段リンク）
   ========================================================================== */

/* SPでは列のラッパーを透明にして、従来どおり9項目が縦に並ぶ状態を保つ。
   display:contents はラッパー自身をレイアウトから消すので、SPの見た目は変わらない。 */
.ny-fcol {
	display: contents;
}

@media (min-width: 768px) {
	body.ny-pc .site-shell footer {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		column-gap: 32px;
		padding-block: 64px;
		/* 面は全幅、中身は本文と同じ1080の列に揃える */
		padding-inline: max(24px, calc((100% - var(--ny-inner)) / 2));
	}

	/* 上段：ロゴ（左）とエントリー（右） */
	body.ny-pc .site-shell footer > a:first-child {
		grid-column: 1;
		grid-row: 1;
	}

	body.ny-pc .ny-footer-entry {
		grid-column: 2;
		grid-row: 1;
		justify-self: end;
	}

	/* ナビ：4カラム。DOM順のままCSSで列に割り当てる */
	body.ny-pc .site-shell footer > nav {
		grid-column: 1 / -1;
		grid-row: 2;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		column-gap: 40px;
		align-content: start;
		margin-top: 40px;
		margin-bottom: 0;
	}

	/* 列は独立して積む。グリッドの行を共有すると、サブリストのある「会社を知る」に
	   引きずられて隣の列の「オフィス」が下へ落ちるため。 */
	/* 列は独立して積む。項目の下線はSPと同じものをそのまま使う（デザインは変えない）。 */
	body.ny-pc .site-shell footer .ny-fcol {
		display: flex;
		flex-direction: column;
	}

	/* 4列目はワイヤーの並びに合わせて新卒→中途（DOMは中途が先） */
	body.ny-pc .site-shell footer > nav > .ny-fcol:nth-child(4) > div:nth-child(1) {
		order: 2;
	}

	/* 下段：左にリンク、右にコピーライト */
	body.ny-pc .site-shell footer > div[class*="text-12px"] {
		grid-column: 1;
		grid-row: 3;
		justify-content: flex-start;
		margin-top: 28px;
		margin-bottom: 0;
	}

	body.ny-pc .site-shell footer > p[class*="text-12px"] {
		grid-column: 2;
		grid-row: 3;
		margin-top: 28px;
		text-align: right;
		white-space: nowrap;
	}
}

@media (min-width: 1200px) {
	body.ny-pc .site-shell footer {
		padding-block: 80px;
	}
}

/* インタビューカードの中身がトラック幅を超えないようにする */
@media (min-width: 768px) {
	body.home .interview-splide .splide__slide img {
		max-width: 100%;
		height: auto;
	}
}

/* カード内の白いテキスト面が w-[353px] 固定で、列幅（252px）を越えて隣に重なるので
   列幅に追従させる */
@media (min-width: 768px) {
	body.home .interview-splide .splide__slide a[class*="w-[353px]"] {
		width: 100%;
	}
}

/* ==========================================================================
   セクション間隔の統一（150px）と INTERVIEW まわり
   ========================================================================== */

@media (min-width: 768px) {
	/* ABOUT US 本文 → リンクリスト → 仕事紹介 の間隔 */
	body.home #aboutus .bg-white > .flex.flex-col {
		margin-top: 40px;
		margin-bottom: calc(var(--ny-sec-gap) / 2);
	}

	/* ABOUT US の白面。見出し（弧）とリード文の間隔は50px、下は通常のセクション間隔 */
	body.home #aboutus > .bg-white {
		padding-top: 50px; /* 見出し（弧の下端）からリード文までの間隔 */
		padding-bottom: var(--ny-sec-gap);
	}

	/* 見出しは弧の下端ではなく、白いドームの内側（弧の高さの約8割の位置）に置く。
	   pb-4（16px）は消して、続く本文との間隔をCSSだけで決める。 */
	body.home #aboutus .section-title > div {
		padding-bottom: 0;
	}

	body.home #aboutus {
		margin-bottom: 0;
	}

	/* INTERVIEW ブロックの上。#aboutus の白面が下に150px持っているので、ここは0にする
	   （両方に150pxを入れると300pxの空きになる） */
	body.home main [class~="mt-[200px]"] {
		margin-top: 0;
	}

	/* INTERVIEW の下（RECRUIT との間） */
	body.home .interview-splide {
		padding-bottom: var(--ny-sec-gap);
	}
}

/* ==========================================================================
   RECRUIT のPC最適化
   --------------------------------------------------------------------------
   本文はSPの改行位置（<br>）で組まれているため、PCでは改行を解いて流す。
   ========================================================================== */

@media (min-width: 768px) {
	/* SP用の強制改行はPCでは無視して、読みやすい行長で折り返させる */
	body.ny-pc #recruit .flex.flex-col.gap-y-6 br {
		display: none;
	}

	/* 920px は実測で決めた値【2026-09-10】。880pxだと3段落目
	   「…私たちは未来を創っていきます。」が1行に54字＝約915px必要で入りきらず、
	   「す。」だけが次行に落ちる。920pxにすると1024px以上で必ず1行に収まる
	   （行長は最長51字→54字になるだけ）。 */
	body.ny-pc #recruit .flex.flex-col.gap-y-6 {
		max-width: 920px;
		margin-inline: auto;
		margin-bottom: 64px;
		text-align: center;
	}

	/* 器に入りきらない幅（実測では860px前後）では、1文字だけ落ちるのを避けて
	   文節で折り返す。auto-phrase 非対応のブラウザでは従来どおりの折返しに戻るだけ。 */
	body.ny-pc #recruit .flex.flex-col.gap-y-6 p {
		line-height: 2;
		word-break: auto-phrase;
		line-break: strict;
	}

	/* 見出しはPCの画面に対して大きく。
	   親の 1080 幅指定に飲まれて左寄りになるので、内容幅に戻して中央へ。 */
	body.ny-pc #recruit h2 {
		max-width: max-content;
		font-size: 56px;
		margin-bottom: 40px;
	}

	/* バナー2枚の間隔 */
	body.ny-pc #recruit .flex.flex-col.gap-4 {
		gap: 32px;
		max-width: 880px;
	}
}

/* Splide はループ用にスライドを複製する（4枚 → クローン8枚で計12枚）。
   grid に組み替えたうえで visibility を戻すと、その複製まで並んでしまう。
   PCでは全件を横並びで見せるのでクローンは不要。 */
@media (min-width: 768px) {
	body.home .interview-splide .splide__slide--clone {
		display: none !important;
	}
}

/* ==========================================================================
   セクションの面を薄いグレーにする（仕事紹介／募集職種）
   --------------------------------------------------------------------------
   中身は1080の列のまま、背景だけ画面幅いっぱいに敷く。
   祖先に overflow:hidden があるので、左右のはみ出しは器の内側で止まる。
   ========================================================================== */

/* SP・PC共通。背景だけ画面幅いっぱいに敷き、中身の器はそのまま。
   上下のはみ出し量は帯ごとに変える（SPは40px、PCはセクション間隔の半分）。 */
body.home .ny-sec-gray {
	position: relative;
	--ny-gray-pad: 40px;
	/* 面の上下の余白は自前で持つ。負のはみ出しにすると、
	   前のセクションとの間隔がその分だけ削られてしまうため。 */
	padding-block: var(--ny-gray-pad);
}

body.home .ny-sec-gray::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(50% - 50vw);
	right: calc(50% - 50vw);
	background-color: #f4f4f4;
	z-index: 0;
}

body.home .ny-sec-gray > * {
	position: relative;
	z-index: 1;
}

@media (min-width: 768px) {
	body.home .ny-sec-gray {
		--ny-gray-pad: calc(var(--ny-sec-gap) / 2);
	}
}

/* ==========================================================================
   キャリアパス（PC専用の新設セクション）
   --------------------------------------------------------------------------
   図版＝キャリアパスページの carrier_01（LEARN／学ぶ）から4枚カードの帯だけを切り出して流用。
   SVGは見出し・本文まで1枚に入っているので、器で切って必要な部分だけ見せる。
   1024px以上では「数字で見る南陽吉久」と横並びの【左カラム】になるので、中身は1列に積む
   （見出し → リード → 図版 → ボタン）。横並びそのものの指定はこのファイルの末尾。
   ========================================================================== */

@media (min-width: 1024px) {
	body.home #aboutus .bg-white > section.ny-career {
		display: grid;
		/* 1カラム。共通の2カラム指定（1fr ＋ --ny-col-side）を打ち消す */
		grid-template-columns: minmax(0, 1fr);
		/* 4行目（ボタン）を 1fr にして、右の「数字で見る」との高さ差を
		   ボタンの上の余白で吸収する＝2つのボタンの下端が揃う。
		   図版の行を伸ばすと、切り出し用の height:174% が一緒に伸びて絵が縦に潰れる */
		grid-template-rows: max-content max-content max-content 1fr;
		column-gap: 0;
		align-items: start;
		margin-bottom: calc(var(--ny-sec-gap) / 2);
	}

	/* __body の箱を外して、中の3つ（見出し／リード／ボタン）をセクションのグリッドへ
	   直に並べる。こうすると図版をリードとボタンの間に挟める
	   （DOMは 図版 → 見出し → リード → ボタン の順のまま＝HTMLは触らない） */
	body.home #aboutus section.ny-career > .ny-career__body {
		display: contents;
	}

	/* ⚠ リード文の <p> にも mb-6 が付いているので :first-child で見出しだけに絞る。
	   絞らないと詳細度でリード文の grid-row:2 に勝ってしまい、リード文が
	   見出しと同じ1行目＝右の列へ回り込む（実際に踏んだ） */
	body.home #aboutus section.ny-career > .ny-career__body > .mb-6:first-child {
		grid-row: 1;
		margin-bottom: 0;
	}

	body.home #aboutus section.ny-career > .ny-career__body > p {
		grid-row: 2;
		margin-top: 16px;
		margin-bottom: 0;
	}

	/* carrier_01 は 354×614。4枚カードは上から約15%〜61%の帯にある */
	body.home #aboutus section.ny-career > .ny-career__fig {
		grid-row: 3;
		margin-top: 32px;
		width: var(--ny-col-side);
	}

	/* カード画像（1200×1183）をそのまま出す。切り出しは不要になった（上の注記参照） */
	body.home #aboutus section.ny-career > .ny-career__fig img {
		display: block;
		width: 100%;
		height: auto;
	}

	body.home #aboutus section.ny-career .ny-career__body a {
		grid-row: 4;
		align-self: end;
		width: var(--ny-btn-w);
		margin-top: 32px;
	}
}

/* ==========================================================================
   募集職種（PC専用の新設セクション・求人=job投稿から生成）
   --------------------------------------------------------------------------
   カードは求人一覧（archive-job.php）の .job-card をそのまま流用。
   ========================================================================== */

@media (min-width: 1024px) {
	/* 共通の2カラム指定（body.home #aboutus .bg-white > section）に負けないよう
	   section.ny-jobs で詳細度を上げる。ここは1カラムで使う。 */
	body.home #aboutus .bg-white > section.ny-jobs {
		display: block;
		max-width: var(--ny-inner);
		margin-inline: auto;
		margin-bottom: calc(var(--ny-sec-gap) / 2);
	}

	body.home #aboutus section.ny-jobs > .ny-jobs__head {
		margin-bottom: 40px;
	}

	body.home #aboutus section.ny-jobs > .ny-jobs__grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}

	body.home #aboutus section.ny-jobs .job-card {
		background-color: #fff;
	}
}

/* ==========================================================================
   キャリアパス／募集職種を SP でも表示する
   --------------------------------------------------------------------------
   PC専用にするため hidden を付けていたが、SPにも出す方針になったので解除する。
   SPは1カラム。PC側の指定（1024px以上）はそのまま効く。
   ========================================================================== */

/* SPは「文字が上・画像が下」。DOMは図版が先なので column-reverse で入れ替える
   （PCは1024px以上で grid になるため、この指定は無視される） */
.ny-career {
	display: flex;
	flex-direction: column-reverse;
	margin-bottom: 4rem;
}

.ny-jobs {
	display: block;
	margin-bottom: 4rem;
}

/* 2026-09-10：キャリアパスページと同じ「テキスト＋カード画像」へ統一した。
   旧 carrier_01_ZEijWr.svg は見出し・カード・本文が1枚に焼き込まれた縦長(354×614)で、
   器で y=102〜449 の帯だけを切り出して使っていた（top:-29% / height:174% の細工）。
   いまは支給のカード画像（career-cards-learn.png・1200×1183・カード4枚だけ）なので
   切り出しは不要。素材も 643KB → 157KB になった。 */
.ny-career__fig {
	width: 100%;
	margin-top: 1.5rem;
}

.ny-career__fig img {
	display: block;
	width: 100%;
	height: auto;
}

.ny-jobs__head {
	margin-bottom: 1.5rem;
}

.ny-jobs__grid {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.ny-jobs .job-card {
	background-color: #fff;
}

/* ==========================================================================
   キャリアパス ＋ 数字で見る南陽吉久 を横並びにする（1024px以上）
   --------------------------------------------------------------------------
   ワイヤー：左＝キャリアパス／右＝数字で見る南陽吉久。どちらも中身は1列で
   「見出し → リード → 図版 →（注記）→ ボタン」。

   DOM順は front-page.php で キャリアパス → 数字で見る → 募集職種 に直してある
   （SP・タブレットもこの順で1カラムに積む＝全幅で並び順が揃う）。
   白面（#aboutus > .bg-white）を「1080を2分割」のグリッドにして、
   先頭2つを同じ行の左右へ置き直す。
     ・他の子（リード文2本・リンクリスト・仕事紹介・募集職種）は 1 / -1 で全幅のまま
     ・行番号は書かない。DOM順どおりに自動配置されるので、前のセクションが
       増減しても追従する
     ・全部 @media (min-width:1024px) の中なので、SP・タブレット（〜1023px）と
       未対応の他30ページは一切変わらない
   ========================================================================== */

@media (min-width: 1024px) {
	:root {
		/* 横並びの列幅。左45：右55（ワイヤーの比率）。
		   右を広く取るのは、リード文「南陽吉久が大切にする…お伝えします。」が
		   1行に必要な530pxを確保するため（等分の508pxだと「す。」だけが次行に落ちる）。
		   図版は左右とも --ny-duo-l（＝左列の幅）に揃える＝2つの図版が同じ大きさになる。 */
		--ny-duo-l: calc((var(--ny-inner) - var(--ny-col-gap)) * 0.45);
		--ny-duo-r: calc((var(--ny-inner) - var(--ny-col-gap)) * 0.55);
	}

	body.home #aboutus > .bg-white {
		display: grid;
		grid-template-columns: minmax(0, var(--ny-duo-l)) minmax(0, var(--ny-duo-r));
		column-gap: var(--ny-col-gap);
		/* 列の合計（1080）を中央に置く＝従来の max-width:1080 + margin-inline:auto と同じ位置 */
		justify-content: center;
		/* 行の高さに引き伸ばさない。伸ばすと短いキャリアパス側が縦中央に寄る */
		align-items: start;
	}

	/* 横並びにする2つ以外は、これまでどおり全幅（1080）で1行ずつ。
	   ⚠ margin-inline:auto（768px以上で全子要素に入っている）を0に戻すこと。
	   grid では auto マージンが残ると stretch が無効になり、箱が「中身の幅」に
	   縮んで列いっぱいに広がらない（実際に踏んだ）。
	   列の合計が1080なので max-width の1080キャップはもう要らない。 */
	body.home #aboutus > .bg-white > * {
		grid-column: 1 / -1;
		max-width: none;
		margin-inline: 0;
	}

	/* 募集職種は自前で max-width:1080 + margin-inline:auto を持っているので個別に戻す */
	body.home #aboutus .bg-white > section.ny-jobs {
		margin-inline: 0;
	}

	/* 左＝キャリアパス。右（数字で見る）のほうが背が高いので、こちらだけ行の高さに
	   合わせて伸ばす。伸びた分はボタンの上の余白が吸収し、下端が右と揃う */
	body.home #aboutus > .bg-white > section.ny-career {
		grid-column: 1;
		align-self: stretch;
	}

	/* 右＝数字で見る南陽吉久（class は mb-20 だけなので、それで指す） */
	body.home #aboutus > .bg-white > section.mb-20 {
		grid-column: 2;
		/* 共通の2カラム指定（1fr ＋ 図版400px）をやめて1列に積む。
		   子（見出し・リード・図版・ボタン）に付いている grid-column/grid-row は
		   これで効かなくなり、幅と余白の指定だけが残る */
		display: block;
		/* 次に来る募集職種（グレー面）との境界。こちらが半分の80pxを持ち、
		   グレー面の上パディング80pxと合わせて160pxで揃う */
		margin-bottom: calc(var(--ny-sec-gap) / 2);
	}

	/* 図版は左右で同じ大きさに揃える（どちらも左列の幅）。
	   右列（559px）に合わせて広げると、数字カードがキャリアパスのカードより
	   一段大きく見えてしまうため、狭い側に合わせる。
	   共通指定の max-width:400px と margin:0 を打ち消している */
	body.home #aboutus > .bg-white > section.mb-20 > .mx-auto {
		max-width: var(--ny-duo-l);
		margin-top: 32px;
	}

	body.home #aboutus > .bg-white > section.ny-career > .ny-career__fig {
		width: var(--ny-duo-l);
	}

	/* 列が狭くなる1024〜1047pxではリード文が2行になる。
	   均等に折る（「す。」だけが next line に落ちるのを防ぐ）。
	   未対応ブラウザでは単に無視される。 */
	body.home #aboutus > .bg-white > section.ny-career > .ny-career__body > p,
	body.home #aboutus > .bg-white > section.mb-20 > p {
		text-wrap: balance;
	}

	/* 募集職種が最後のセクションになったので、下余白は白面の padding-bottom に
	   任せる（二重で空くのを防ぐ）。:last-child の指定より詳細度が同じで
	   後ろにあるので、ここで上書きする必要がある */
	body.home #aboutus .bg-white > section.ny-jobs {
		margin-bottom: 0;
	}
}

/* ==========================================================================
   並べ替えに伴う余白の据え置き（SPのみ・〜767px）
   --------------------------------------------------------------------------
   front-page.php で「数字で見る」と「募集職種」を入れ替えたため、SPでは
   最後のセクションが 数字で見る（mb-20＝80px）から 募集職種（4rem＝64px）に変わる。
   もとの並びの余白リズム（64 → 64 → 80）をそのまま保つために、2つの値を入れ替える。
   ※このファイルの鉄則は「上書きはすべて min-width の中」だが、ここは
     並べ替えで生じたSPの差分を"元に戻す"ためだけの例外。見た目は従来と同じになる。
   ========================================================================== */

@media (max-width: 767px) {
	body.home #aboutus .bg-white > section.mb-20 {
		margin-bottom: 4rem;
	}

	body.home #aboutus .bg-white > section.ny-jobs {
		margin-bottom: 5rem;
	}
}

/* ==========================================================================
   下層ページの共通の型（body.ny-sub）
   --------------------------------------------------------------------------
   /data/ を見本に決めた、下層30ページで使い回す枠。内容は一切変えず、
   幅と並べ方だけを変える。
     ・パンくず … 本文と同じ1080の器に載せ、左端を本文と揃える
     ・本文の器 … main 直下の div.px-5 を1080に絞る
                  （下層は7ページ中6ページがこの構造。/about/ だけ例外）
     ・行長 …… 読み物は --ny-read（820px）で止める
   ny-sub は front page 以外に付く（functions.php）。ただし実際に効くのは
   ny-pc も付いているページだけ＝$ready に入れた分だけ。
   ========================================================================== */

@media (min-width: 481px) {
	/* 本文の器とパンくず。中身は1080で、その外側に左右の余白（--ny-gutter）を持たせる。
	   パディングを0にすると、768〜1120pxの帯で文字が画面の端に付いてしまう。 */
	body.ny-pc.ny-sub nav > ol[class~="text-12px"],
	body.ny-pc.ny-sub main > div.px-5 {
		max-width: calc(var(--ny-inner) + var(--ny-gutter) * 2);
		margin-inline: auto;
		padding-inline: var(--ny-gutter);
	}

	/* 右上の回転バッジは、下のタイトル帯のブロックで帯の中に置き直す
	   （下層13ページすべてに同じパーツが入っている。TOPには無い） */
}

/* ==========================================================================
   数字で見る南陽吉久（/data/）
   --------------------------------------------------------------------------
   ⚠ 図版 number1_Z2gQb3X.svg は 353×763 の縦長で、文字まで全部パスで持っている
   （782KB・path 1271本・埋め込み画像53枚）。CSSでは中身を組み替えられないので、
   PCでもSPと同じ見え方（幅440px）のまま中央に置く。
   横並びの図版にしたい場合は素材の作り直しが必要。
   ========================================================================== */

@media (min-width: 481px) {
	/* 見出し・キャッチ・リードは行長で止める */
	body.ny-pc.ny-page-data main > div.px-5 > p,
	body.ny-pc.ny-page-data main > div.px-5 > div.flex-col {
		max-width: var(--ny-read);
	}

	/* 図版はSPと同じ幅のまま中央へ（器いっぱいだと 1361×2992 まで伸びる） */
	body.ny-pc.ny-page-data main > div.px-5 > img {
		width: 440px;
		margin-inline: auto;
	}

	/* セクションの上下余白は他ページと同じリズムに */
	body.ny-pc.ny-page-data main section[class~="py-[50px]"] {
		padding-block: calc(var(--ny-sec-gap) / 2);
	}

	/* 教育・研修制度の本文と一覧も行長で止める。
	   中央寄せにはしない＝パンくず・見出し・カードと同じ左端に揃える */
	body.ny-pc.ny-page-data main section > div.gap-y-6,
	body.ny-pc.ny-page-data main section > dl {
		max-width: var(--ny-read);
	}
}

@media (min-width: 1024px) {
	/* 福利厚生の3枚（休暇／待遇／各種手当）は横3列に。並列の内容なので
	   横に並べたほうが比べやすい。カードの形（白面・角丸20px・中の dl）は変えない */
	body.ny-pc.ny-page-data main section > div.gap-y-10 {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px;
		/* align-items は既定の stretch のまま＝3枚の高さが揃う */
	}
}

/* ==========================================================================
   下層ページのタイトルエリア（PC・ny-sub）
   --------------------------------------------------------------------------
   PCは「黄色の帯にページ名 → その下にパンくず → 本文」の順にする。
   帯の高さ200px・ページ名36px/900 はワイヤーの .page-mv と同じ値。

   DOMは【パンくず → バッジ → main（中に h1）】の順で、h1 だけが main の内側にある。
   HTMLを触らずに順番を入れ替えるため、
     ・器（.site-shell 直下のラッパー）に帯の高さぶんの padding-top を持たせ、
       ::before で全幅の黄色面を敷く
     ・h1 だけを絶対配置で帯の中へ持ち上げる
   とした。これでパンくずは帯の下から自然に流れる。
   SPは対象外（〜767pxは従来どおり）。
   ========================================================================== */

@media (min-width: 481px) {
	:root {
		--ny-mv-h: 200px;              /* タイトル帯の高さ */
		--ny-orange: rgb(252, 200, 0); /* 既存の bg-o-orange と同じ値 */
		--ny-black: rgb(40, 40, 40);   /* 既存の border-o-black と同じ値 */
		--ny-gray-face: #f4f4f4;       /* 面のグレー（TOPの .ny-sec-gray と同じ） */
	}

	/* 器に帯のぶんの余白を作る。この要素は元から position:relative + overflow:hidden。
	   ⚠ h1が無いページ（インタビュー詳細など）は帯が空になるので出さない */
	body.ny-pc.ny-sub .site-shell > div[class~="overflow-hidden"]:has(main h1) {
		padding-top: var(--ny-mv-h);
	}

	body.ny-pc.ny-sub .site-shell > div[class~="overflow-hidden"]:has(main h1)::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: var(--ny-mv-h);
		background: var(--ny-orange);
		z-index: 0;
	}

	/* ページ名を帯の中へ。列の左端に合わせて縦中央。
	   ⚠ セレクタは main 直下に限定しない。/about/ のように h1 が1階層深い
	   ページがあり、限定すると帯だけ出てページ名が本文に残る（実際に踏んだ）。
	   下層は全ページ h1 がちょうど1つなので main h1 で拾って問題ない。 */
	body.ny-pc.ny-sub main h1 {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		z-index: 2;
		display: flex;
		align-items: center;
		width: min(var(--ny-inner), 100% - var(--ny-gutter) * 2);
		height: var(--ny-mv-h);
		margin: 0;
		font-size: 36px;
		line-height: 1.3;
		letter-spacing: 0.05em;
	}

	/* 回転バッジは帯の右端へ。器の overflow:hidden で右と上が切れる見え方にする。
	   ⚠ 帯を出さないページ（404・お知らせ詳細）は除外する。これは帯を埋める装飾なので、
	   帯が無いまま270pxに拡大すると白地に大きな黄色い円が浮いて見える */
	body.ny-pc.ny-sub:not(.ny-page-404):not([class*="ny-page-news-"]) .site-shell > div[class~="overflow-hidden"]:has(main h1) img[class~="animate-spin-slow-reverse"][class~="-right-12"] {
		/* 円の下端が帯の下端とちょうど揃う位置・大きさ（回転しても円なので外に出ない） */
		top: calc(var(--ny-mv-h) - 270px);
		right: -50px;
		z-index: 1;
		width: 270px;
		height: 270px;
		/* ⚠ バッジのSVGは #FCC800 で帯の色とまったく同じ＝そのままだと完全に同化する。
		   少しだけ明るくして、帯の中で透かしのように見せる */
		filter: brightness(1.15);
	}

	/* パンくずは帯の下。帯との間隔をとる */
	body.ny-pc.ny-sub nav[aria-label="パンくずリスト"] > ol[class~="text-12px"] {
		padding-top: 24px;
	}

	/* 本文の始まり（h1が絶対配置になったぶん、ここで上の余白を作る） */
	body.ny-pc.ny-sub main > div.px-5 {
		padding-top: 72px;
	}
}

/* ==========================================================================
   数字で見る南陽吉久（/data/）— PCの見せ方
   --------------------------------------------------------------------------
   ・改行：SPの <br> はPCでは解いて、読める行長で自然に折り返す
   ・福利厚生／教育・研修：面をグレーにして白いカードを立たせる
     （白地に白カードだと境目が見えず、PCでは間延びして見えるため）
   ・教育・研修の4制度：一覧のままだと4つあることが伝わらないのでカードに
   SPは対象外（〜767pxは従来どおり）。
   ========================================================================== */

@media (min-width: 481px) {
	/* --- 改行 ------------------------------------------------------------ */
	/* SP用の強制改行を解く。RECRUIT帯で既にやっているのと同じ処置 */
	/* ⚠ 対象は「読み物の段落」だけ。カードの中の <br> は
	   「産前・産後休業／育児休業／家族手当」のような項目の区切りなので消さない
	   （消すと1本につながって読めなくなる。実際に踏んだ） */
	body.ny-pc.ny-page-data main > div.px-5 > p br,
	body.ny-pc.ny-page-data main > div.px-5 > div.gap-y-6 p br,
	body.ny-pc.ny-page-data main section > div.gap-y-6 p br {
		display: none;
	}

	/* <br> の直後に入っている半角スペースが、改行を解くと語間の隙間として残る
	   （「成長が、␣会社の未来を…」）。実測 0.227em なので word-spacing で詰める。
	   この段落に他のスペースは無いので副作用はない */
	body.ny-pc.ny-page-data main > div.px-5 > p,
	body.ny-pc.ny-page-data main > div.px-5 > div.gap-y-6 p,
	body.ny-pc.ny-page-data main section > div.gap-y-6 p {
		word-spacing: -0.25em;
	}

	/* 「思います。」のように最終行が数文字だけ残るのを避け、行の長さを揃える。
	   対象はいずれも2〜3行の短い段落なので balance が効く */
	body.ny-pc.ny-page-data main > div.px-5 > p,
	body.ny-pc.ny-page-data main > div.px-5 > div.gap-y-6 p,
	body.ny-pc.ny-page-data main section > div.gap-y-6 p,
	body.ny-pc.ny-page-data main section > div.gap-y-6 p {
		text-wrap: balance;
	}

	/* --- 制度のセクション（福利厚生＋教育・研修）を面で分ける ------------- */
	body.ny-pc.ny-page-data main section[class~="py-[50px]"] {
		position: relative;
		padding-block: 80px;
		margin-top: 80px;
	}

	/* 面は画面幅いっぱい。祖先に overflow:hidden があるので横スクロールは出ない */
	body.ny-pc.ny-page-data main section[class~="py-[50px]"]::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: calc(50% - 50vw);
		right: calc(50% - 50vw);
		background: var(--ny-gray-face);
		z-index: 0;
	}

	body.ny-pc.ny-page-data main section[class~="py-[50px]"] > * {
		position: relative;
		z-index: 1;
	}

	/* セクション見出しと中身の間は40px */
	body.ny-pc.ny-page-data main section > div[class~="text-center"] {
		margin-bottom: 40px;
	}

	/* --- カード（福利厚生3枚／教育・研修4枚で共通の見た目） -------------- */
	body.ny-pc.ny-page-data main section [class~="rounded-[20px]"],
	body.ny-pc.ny-page-data main section > dl > div {
		background: #fff;
		border: 2px solid var(--ny-black);
		border-radius: 20px;
		padding: 28px 24px;
	}

	body.ny-pc.ny-page-data main section > dl dt {
		margin-bottom: 8px;
	}

	body.ny-pc.ny-page-data main section > dl {
		max-width: none;
	}
}

@media (min-width: 1024px) {
	/* 教育・研修の4制度をカードで2列に。横並びにするのは福利厚生の3列と同じ
	   1024px以上に揃える（768〜1023はどちらも1列） */
	body.ny-pc.ny-page-data main section > dl {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}
}

/* ==========================================================================
   /data/ の調整（2026-08-29 のレビュー反映）
   ========================================================================== */

@media (min-width: 481px) {
	/* ② 教育・研修制度の紹介文はセンター揃え。
	   ⚠ text-align だけでは足りない。この段落の箱は行長820pxで左端に置いてあるため、
	   箱の中で中央寄せしても、見出し（列1080の中央）より左にずれる。
	   箱ごと列の中央に置くこと（margin-inline:auto）。 */
	body.ny-pc.ny-page-data main section > div.gap-y-6 {
		text-align: center;
		margin-inline: auto;
	}

	/* ③ 教育・研修制度の見出しの上は100px空ける
	   （福利厚生のカード群が持つ下余白でつくる） */
	body.ny-pc.ny-page-data main section > div.gap-y-10 {
		margin-bottom: 100px;
	}

	/* ④ 「だからこそ、"数字"という…お伝えしたいと思います。」を1行に。
	   1行に必要なのは約910pxで、読み物の既定（820px）だと収まらないため、
	   この2段落だけ器の幅（1080px）まで許す。折り返しの均等化も外す */
	body.ny-pc.ny-page-data main > div.px-5 > div.gap-y-6 {
		max-width: none;
	}

	body.ny-pc.ny-page-data main > div.px-5 > div.gap-y-6 p {
		text-wrap: wrap;
	}

	/* ⑤ グレー面とRECRUIT帯のあいだの白い余白を消す。
	   SPは器の下に64px（pb-16）持っているが、PCはグレー面を黒帯に直付けする */
	body.ny-pc.ny-page-data main > div.px-5 {
		padding-bottom: 0;
	}

	body.ny-pc.ny-page-data main section[class~="py-[50px]"] {
		margin-bottom: 0;
	}
}

/* ==========================================================================
   下層ページだけ、器を481pxから開く
   --------------------------------------------------------------------------
   480pxを超えた瞬間に器の左右へ白い余白と縦罫線が出て、768pxでいきなり
   PCレイアウトに変わる段差をなくすため。下層はこの下の「型」も481pxから
   効くので、481〜1023pxは1カラムのまま幅だけが伸びる連続した変化になる。

   【2026-09-10】TOPも対象にした（`body.ny-sub` の限定を外した）。
   481〜767pxで器が480pxのまま中央に置かれ、**黄色い面の左右が白く空いて見えた**ため
   （米倉さん指摘）。同時に、前提だった3か所の座標指定も481pxへ下ろしてある：
     ・FV（`calc(50% ± n)` で480pxの座標系を中央に置く／159行あたり）
     ・ABOUT US の弧（支給素材 pc-about-arc.png に差し替え／109行あたり）
     ・INTERVIEW の弧（支給素材 pc-interview-arc.png に差し替え／399行あたり）
   この3つを768pxのままにすると、器だけ開いて絵柄が左へ寄り見切れる（実際に崩れた）。
   （480px以下は器＝画面幅なので、実機のSPでは何も変わらない）
   ========================================================================== */

@media (min-width: 481px) {
	body.ny-pc .site-shell {
		max-width: none;
		width: 100%;
		margin-inline: 0;
		border-inline: 0;
	}
}

/* ==========================================================================
   キャリアパス（/career-path/）
   --------------------------------------------------------------------------
   ⚠ このページは中身のほとんどが「354px幅前提のSVG画像」で、文字も画像に
   焼き込まれている（LEARN/学ぶ の3段階、職種ごとの説明4本とも）。
   器を開けると 1080px まで引き伸ばされて約3倍になるので、
     ・画像は原寸相当（最大440px）で止める
     ・3段階の図は1024px以上で横3列。1枚あたり約344pxで原寸(354px)とほぼ同じ
     ・職種4つは1024px以上で2列
   組み替えはできないので、並べ方と拡大率だけで対応している。
   ========================================================================== */

@media (min-width: 481px) {
	/* 画像は引き伸ばさない。原寸354px前後で置く */
	body.ny-pc.ny-page-career-path main img {
		max-width: 440px;
		margin-inline: auto;
	}

	/* 読み物は行長で止め、SPの<br>は解く（/data/ と同じ処置） */
	body.ny-pc.ny-page-career-path main > div.px-5 > div > p,
	body.ny-pc.ny-page-career-path main > div.px-5 > div > div.gap-y-6 {
		max-width: var(--ny-read);
	}

	body.ny-pc.ny-page-career-path main > div.px-5 > div > p br,
	body.ny-pc.ny-page-career-path main > div.px-5 > div > div.gap-y-6 p br {
		display: none;
	}

	body.ny-pc.ny-page-career-path main > div.px-5 > div > p,
	body.ny-pc.ny-page-career-path main > div.px-5 > div > div.gap-y-6 p {
		word-spacing: -0.25em;
		text-wrap: balance;
	}

	/* セクション見出しと中身の間は40px（/data/ と揃える） */
	body.ny-pc.ny-page-career-path main > div.px-5 > div[class~="mb-10"] {
		margin-bottom: 40px;
	}
}

/* ==========================================================================
   キャリアの3段階（LEARN／TRY／LEAD）【2026-09-08 米倉さん指示で作り替え】
   --------------------------------------------------------------------------
   もとは1段階=SVG1枚（見出し・カードの文字・本文まで全部パス化・3枚で2.0MB）で
   1024px以上は横3列に並べていた。**縦3ブロック・左テキスト／右カード4枚**に変更。
   カード4枚だけ支給画像（1200×1183・背景透過PNG）で、文字はすべてテキスト。
   完成イメージ（870px・現行PCと同スケール）からの実測値:
     英字 cap49px ／ 和36px ／ 重なり12px ／ サブ ink17px(=20px) ／ 本文16px・行送り25px
     左テキスト336px ／ 列間47px ／ カード342px（1080の器では 508 / 64 / 508 に拡大）
     ブロック間80px
   ⚠ 英字は Outfit で 700 までしか読み込んでいない（style.css の @font-face が500と700のみ）
   ========================================================================== */

.ny-step3 {
	display: flex;
	flex-direction: column;
	gap: 80px;
}

.ny-step3__head {
	margin-bottom: 13px;
}

.ny-step3__en {
	display: block;
	font-size: 70px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
	color: var(--color-o-yellow);
}

/* 黄色の英字に和見出しを12px重ねる（完成イメージの実測） */
.ny-step3__ja {
	display: block;
	margin-top: -27px;
	font-size: 36px;
	font-weight: 900;
	line-height: 1.2;
	letter-spacing: 0.05em;
}

.ny-step3__sub {
	margin-bottom: 20px;
	font-size: 20px;
	font-weight: 900;
	line-height: 1.6;
	letter-spacing: 0.05em;
	/* 375px幅だと「できることを、自分の手で広げる。」が3px足りず2行になる。
	   文節の途中で切れないようにしておく（現行デザインもここは2行） */
	word-break: auto-phrase;
	line-break: strict;
	text-wrap: balance;
}

.ny-step3__body p {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 0.04em;
}

.ny-step3__cards {
	display: block;
	width: 100%;
	height: auto;
	margin: 40px auto 0;
}

@media (min-width: 481px) {
	/* 1024pxまでは1列。508pxの塊で中央に置く */
	body.ny-pc.ny-page-career-path .ny-step3__item {
		max-width: 508px;
		margin-inline: auto;
	}

	/* このページ共通の `main img { max-width: 440px }`(0,3,2) はカードには効かせない */
	body.ny-pc.ny-page-career-path main img.ny-step3__cards {
		max-width: none;
	}
}

@media (min-width: 1024px) {
	/* 完成イメージの並び＝左テキスト／右カード4枚 */
	body.ny-pc.ny-page-career-path .ny-step3__item {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 64px;
		align-items: start;
		max-width: none;
	}

	body.ny-pc.ny-page-career-path .ny-step3__cards {
		margin-top: 0;
	}

	/* PCは器が1080まで開いてカードが508pxになるので、見出しもその比率まで上げる
	   【2026-09-08 米倉さん指示：英字はもっと大きく／和はもう少し大きく】
	   英字100px＝ink幅327px・cap70px（旧SVGの見え方＝幅321px・cap64pxとほぼ同じ）
	   和44px。重なりは和のink高に対して同じ比率（約0.35）になる15pxに合わせている */
	body.ny-pc.ny-page-career-path .ny-step3__en {
		font-size: 100px;
	}

	body.ny-pc.ny-page-career-path .ny-step3__ja {
		margin-top: -35px;
		font-size: 44px;
	}
}

@media (min-width: 1024px) {

	/* 職種ごとのキャリアパス4本を2列に。
	   キャリア図の高さが職種ごとに違うので、行の高さを揃えて（stretch）
	   募集要項ボタンをカードの下端に寄せる＝左右でボタンの位置がそろう
	   （2026-09-08 米倉さん指示。align-items:start だと202pxずれていた） */
	body.ny-pc.ny-page-career-path main div[class~="gap-[60px]"] {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 60px 24px;
		align-items: stretch;
	}

	body.ny-pc.ny-page-career-path main div[class~="gap-[60px]"] > div {
		display: flex;
		flex-direction: column;
	}

	body.ny-pc.ny-page-career-path main div[class~="gap-[60px]"] > div > div[class~="gap-2"] {
		margin-top: auto;
	}

	/* カードを flex にすると mx-auto の箱が fit-content に縮み、
	   中のキャリア図が 440px → 352px（原寸）まで小さくなる。幅を戻す。 */
	body.ny-pc.ny-page-career-path main div[class~="gap-[60px]"] > div > div[class~="mx-auto"] {
		width: 100%;
	}
}

/* ==========================================================================
   オフィス（/office/）
   --------------------------------------------------------------------------
   写真主体のページ。メイン写真は 824×824、各部屋の写真は 706×740。
   器いっぱいに引き伸ばすと粗くなるので原寸で止め、部屋は1024px以上で2列。
   ========================================================================== */

@media (min-width: 481px) {
	/* 読み物は行長で止め、SPの <br> を解く。
	   ⚠ 対象は gap-6 の段落ブロックだけ。flex-col で拾うと、同じく flex-col の
	   部屋一覧（gap-10）まで820pxに縮んで2列が痩せる（実際に踏んだ） */
	body.ny-pc.ny-page-office main > div.px-5 > p,
	body.ny-pc.ny-page-office main > div.px-5 > div[class~="gap-6"] {
		max-width: var(--ny-read);
	}

	body.ny-pc.ny-page-office main > div.px-5 > p br,
	body.ny-pc.ny-page-office main > div.px-5 > div[class~="gap-6"] > p br {
		display: none;
	}

	body.ny-pc.ny-page-office main > div.px-5 > p,
	body.ny-pc.ny-page-office main > div.px-5 > div[class~="gap-6"] > p {
		word-spacing: -0.25em;
		text-wrap: balance;
	}

	/* メイン写真（824×824）は原寸で止めて中央に */
	body.ny-pc.ny-page-office main > div.px-5 > div[class~="relative"][class~="mb-20"] {
		max-width: 824px;
		margin-inline: auto;
	}

	/* 見出しと中身の間は40px */
	body.ny-pc.ny-page-office main div[class~="mb-4"] {
		margin-bottom: 40px;
	}
}

@media (min-width: 1024px) {
	/* 部屋5つ（会議室・ワークスペース…）を2列に。写真706×740なので
	   1列あたり528pxでも原寸より小さく、画質は落ちない */
	body.ny-pc.ny-page-office main div[class~="mb-16"][class~="gap-10"] {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 56px 24px;
		align-items: start;
	}
}

/* ==========================================================================
   プライバシーポリシー（/privacy-policy/）
   --------------------------------------------------------------------------
   本文だけのページ。器は1080でも、読むのは行長820pxで止める。
   ========================================================================== */

@media (min-width: 481px) {
	body.ny-pc.ny-page-privacy-policy main > div.px-5 > div[class~="text-14px"] {
		max-width: var(--ny-read);
		/* 文字は左揃えのまま、820pxの塊ごと器の中央に置く
		   （左端に寄せると1080の器の中で左に偏って見えるため） */
		margin-inline: auto;
	}
}

/* ==========================================================================
   お知らせ 一覧（/news/）
   --------------------------------------------------------------------------
   1件が「日付＋カテゴリ」「タイトル」の2段積みになっている。1080pxでは
   間延びするので、PCは1行（左＝日付とカテゴリ／右＝タイトル）にする。
   現行サイトの罫線リンクリストと同じ見え方。下罫線は既存のものをそのまま使う。
   一覧はJSで描画されるが、当てているのは li と a の並べ方だけなのでJSは触らない。
   ========================================================================== */

@media (min-width: 768px) {
	body.ny-pc.ny-page-news main ul[class~="news-list"] > li > a {
		flex-direction: row;
		align-items: center;
		gap: 24px;
	}

	/* 日付＋カテゴリの塊は縮めない。幅を揃えて、各行のタイトルの先頭を揃える
	   （カテゴリ名の長さで開始位置がバラつくため） */
	body.ny-pc.ny-page-news main ul[class~="news-list"] > li > a > div:first-child {
		flex: 0 0 auto;
		min-width: 300px;
	}

	body.ny-pc.ny-page-news main ul[class~="news-list"] > li > a > p {
		flex: 1 1 auto;
		margin: 0;
	}
}

/* ==========================================================================
   /news/・/office/ の調整（2026-08-30 のレビュー反映）
   ========================================================================== */

@media (min-width: 768px) {
	/* ② お知らせの絞り込み：「お知らせ種別」と「対象」を2カラムにし、間に縦線 */
	body.ny-pc.ny-page-news main [data-filter-buttons] {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 32px;
	}

	body.ny-pc.ny-page-news main [data-filter-buttons] > div:nth-child(2) {
		border-left: 1px solid var(--ny-black);
		padding-left: 32px;
	}
}

@media (min-width: 1024px) {
	/* ③ オフィス：キャッチ＋リードを左、メイン写真を右の2カラムに。
	   DOM順は［写真 → キャッチ → リード］なので、写真だけ右列へ置き直す。
	   以降（部屋一覧・live2・最後の文章）は全幅のまま */
	body.ny-pc.ny-page-office main > div.px-5 {
		display: grid;
		grid-template-columns: minmax(0, 1fr) var(--ny-col-side);
		column-gap: var(--ny-col-gap);
		align-items: start;
	}

	body.ny-pc.ny-page-office main > div.px-5 > * {
		grid-column: 1 / -1;
	}

	body.ny-pc.ny-page-office main > div.px-5 > div[class~="mb-20"] {
		grid-column: 2;
		grid-row: 1 / span 2;
		margin-bottom: 0;
		max-width: none;
	}

	body.ny-pc.ny-page-office main > div.px-5 > p {
		grid-column: 1;
		grid-row: 1;
	}

	body.ny-pc.ny-page-office main > div.px-5 > div[class~="mb-8"][class~="gap-6"] {
		grid-column: 1;
		grid-row: 2;
	}
}

@media (min-width: 481px) {
	/* ④ オフィスの締めの文章はセンター揃え。
	   文字だけでなく820pxの塊ごと中央に置かないと、見出しの中心とズレる */
	body.ny-pc.ny-page-office main > div.px-5 > div[class~="gap-6"]:last-child {
		text-align: center;
		margin-inline: auto;
	}
}

@media (min-width: 481px) {
	/* オフィス：セクションの間隔を100pxで揃える。
	   SPの余白のままだと、リード下端→「会議室」の上が32pxしかなく詰まって見える
	   （実測：リード下32 / 部屋下64 / live2下40）。
	   100pxはワイヤーの --sec-pad と同じ値。 */
	body.ny-pc.ny-page-office main > div.px-5 > div[class~="mb-8"][class~="gap-6"],
	body.ny-pc.ny-page-office main > div.px-5 > div[class~="mb-16"][class~="gap-10"],
	body.ny-pc.ny-page-office main > div.px-5 > img {
		margin-bottom: 100px;
	}

	/* 締めの LIVE! イラスト【2026-09-08 米倉さん指示】。
	   SPの .max-w-[240px](0,1,0) を同じ形のセレクタで上書きする。
	   素材を office-live.png（1000×593・支給）に差し替え、あわせて 360→480px に。
	   原寸1000pxなので480pxは48%＝粗くならない */
	body.ny-pc.ny-page-office main > div.px-5 > img {
		max-width: 480px;
	}
}

/* ==========================================================================
   事業紹介（/about/business/）
   --------------------------------------------------------------------------
   3つの事業（木材・プレカット／住宅設備機器・建築資材／環境リノベーション）は
   並列の内容なので1024px以上で横3列。画像は706pxが原寸なので引き伸ばさない。
   ========================================================================== */

@media (min-width: 481px) {
	body.ny-pc.ny-page-about-business main img {
		max-width: 706px;
		margin-inline: auto;
	}

	body.ny-pc.ny-page-about-business main div[class~="gap-y-6"] {
		max-width: var(--ny-read);
	}

	body.ny-pc.ny-page-about-business main div[class~="gap-y-6"] p br {
		display: none;
	}

	body.ny-pc.ny-page-about-business main div[class~="gap-y-6"] p {
		word-spacing: -0.25em;
		text-wrap: balance;
	}
}

@media (min-width: 1024px) {
	body.ny-pc.ny-page-about-business main div[class~="gap-16"] {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px;
		align-items: start;
	}

	/* 3列のときは画像を列いっぱいに（344pxで原寸706pxより小さい＝画質は落ちない） */
	body.ny-pc.ny-page-about-business main div[class~="gap-16"] img {
		max-width: 100%;
	}
}

/* ==========================================================================
   会社の沿革（/about/history/）
   --------------------------------------------------------------------------
   縦線＋年表の1カラム。1080pxいっぱいだと1行が長すぎるので、
   820pxの塊ごと器の中央に置く（文字は左揃えのまま）。
   ========================================================================== */

@media (min-width: 481px) {
	body.ny-pc.ny-page-about-history main > div.px-5 > div[class~="relative"] {
		max-width: var(--ny-read);
		margin-inline: auto;
	}

	/* 年表の級数（2026-09-28 太田さん指示）。年月 18px／内容 16px（会社概要の表と同じ）。
	   各pに .text-16px / .text-14px(0,1,0) が直接当たっているので、p まで指定して上書きする。 */
	body.ny-pc.ny-page-about-history main > div.px-5 > div[class~="relative"] li p[class~="text-16px"] {
		font-size: 18px;
	}

	body.ny-pc.ny-page-about-history main > div.px-5 > div[class~="relative"] li p[class~="text-14px"] {
		font-size: 16px;
	}
}

/* ==========================================================================
   会社案内（/about/company/）
   --------------------------------------------------------------------------
   会社概要は SP では「項目名の下に内容」の縦積み。PCは「項目名｜内容」の
   2カラムにする（現行の罫線はそのまま使う）。読み物と同じく820pxで中央。
   ========================================================================== */

@media (min-width: 481px) {
	body.ny-pc.ny-page-about-company main > div.px-5 > dl,
	body.ny-pc.ny-page-about-company main > div.px-5 > section {
		max-width: var(--ny-read);
		margin-inline: auto;
	}
}

@media (min-width: 768px) {
	body.ny-pc.ny-page-about-company main > div.px-5 > dl > div {
		display: grid;
		grid-template-columns: 200px minmax(0, 1fr);
		column-gap: 32px;
		align-items: baseline;
	}

	body.ny-pc.ny-page-about-company main > div.px-5 > dl dt {
		margin-bottom: 0;
	}
}

/* 会社概要の表の級数（2026-09-08 米倉さん指示）
   項目名 18px／内容 16px に揃える。内容は既存の .text-14px(0,1,0) が
   直接当たっている要素があるので、p・li・a まで指定して上書きする。 */
@media (min-width: 481px) {
	body.ny-pc.ny-page-about-company main > div.px-5 > dl dt {
		font-size: 18px;
	}

	body.ny-pc.ny-page-about-company main > div.px-5 > dl dd,
	body.ny-pc.ny-page-about-company main > div.px-5 > dl dd p,
	body.ny-pc.ny-page-about-company main > div.px-5 > dl dd li,
	body.ny-pc.ny-page-about-company main > div.px-5 > dl dd a {
		font-size: 16px;
	}
}

/* ==========================================================================
   /about/business/・/about/company/ の調整（2026-08-30 のレビュー反映）
   ========================================================================== */

@media (min-width: 768px) {
	/* 会社案内：拠点案内（支店のアコーディオン）を2列に */
	body.ny-pc.ny-page-about-company main > div.px-5 > section[class~="mb-16"] > div[class~="gap-4"] {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
		align-items: start;
	}
}

@media (min-width: 1024px) {
	/* 事業紹介：キャッチ＋リードを左、メイン画像を右の2カラムに。
	   DOM は［画像 → div.pb-16（キャッチ・リード・3事業）］なので、
	   div.pb-16 の箱を display:contents で外して中の3つを直接並べる。
	   3事業だけは全幅に戻して横3列にする。 */
	body.ny-pc.ny-page-about-business main > div.px-5 {
		display: grid;
		grid-template-columns: minmax(0, 1fr) var(--ny-col-side);
		column-gap: var(--ny-col-gap);
		align-items: start;
	}

	body.ny-pc.ny-page-about-business main > div.px-5 > div[class~="pb-16"] {
		display: contents;
	}

	body.ny-pc.ny-page-about-business main > div.px-5 > img {
		grid-column: 2;
		grid-row: 1 / span 2;
		margin-bottom: 0;
	}

	body.ny-pc.ny-page-about-business main > div.px-5 > div[class~="pb-16"] > p {
		grid-column: 1;
		grid-row: 1;
	}

	/* リードの下＝「木材・プレカット事業」までは、セクションの余白と同じ100px */
	body.ny-pc.ny-page-about-business main > div.px-5 > div[class~="pb-16"] > div[class~="gap-y-6"] {
		grid-column: 1;
		grid-row: 2;
		margin-bottom: 100px;
	}

	body.ny-pc.ny-page-about-business main > div.px-5 > div[class~="pb-16"] > div[class~="gap-16"] {
		grid-column: 1 / -1;
		grid-row: 3;
		/* 共通の「最後の要素の下マージンを落とす」指定は、親の div.pb-16 が
		   display:contents なので効かない。実体のこちらで落とす */
		margin-bottom: 0;
	}
}

/* ==========================================================================
   本文の終わり → RECRUIT帯 のあいだ（下層共通・150px）
   --------------------------------------------------------------------------
   SPは器の下が pb-16（64px）などまちまちで、PCだと詰まって見える。
   main の最後の箱に150pxを持たせて全ページで揃える。
   ⚠ /data/ だけは例外。グレー面が黒帯に直付けになる作りなので、
     器ではなくグレー面の下パディングで150pxを確保する（白い余白を作らない）。
   ========================================================================== */

@media (min-width: 481px) {
	body.ny-pc.ny-sub main > div:last-child {
		padding-bottom: 150px;
	}

	/* 最後の要素が持つ下マージン（mb-16など）を落とす。
	   残すと150pxに上乗せされてページごとに余白がバラつく
	   （事業紹介とキャリアパスで214pxになっていた） */
	body.ny-pc.ny-sub main > div:last-child > *:last-child {
		margin-bottom: 0;
	}

	/* /data/：器の150pxは打ち消し（同じ詳細度で後ろに書かないと、上の共通指定に
	   負けてグレー面と黒帯のあいだに白い余白が戻る。実際に踏んだ）。
	   150pxはグレー面の中で確保する */
	body.ny-pc.ny-page-data main > div:last-child {
		padding-bottom: 0;
	}

	body.ny-pc.ny-page-data main section[class~="py-[50px]"] {
		padding-bottom: 150px;
	}
}

/* ==========================================================================
   会社を知る（/about/）
   --------------------------------------------------------------------------
   このページだけ本文の器が1階層深い（main > div > div.px-5）。
   末尾にTOPと同じINTERVIEW帯が入っている。
   ========================================================================== */

@media (min-width: 481px) {
	/* 本文の器（型の main > div.px-5 では届かない） */
	body.ny-pc.ny-page-about main > div > div[class~="px-5"] {
		max-width: calc(var(--ny-inner) + var(--ny-gutter) * 2);
		margin-inline: auto;
		padding-inline: var(--ny-gutter);
	}

	/* 読み物は行長で止め、SPの <br> を解く */
	body.ny-pc.ny-page-about main > div > div[class~="px-5"] > p,
	body.ny-pc.ny-page-about main > div > div[class~="px-5"] > div[class~="gap-y-6"] {
		max-width: var(--ny-read);
	}

	body.ny-pc.ny-page-about main > div > div[class~="px-5"] > p br,
	body.ny-pc.ny-page-about main > div > div[class~="px-5"] > div[class~="gap-y-6"] p br {
		display: none;
	}

	body.ny-pc.ny-page-about main > div > div[class~="px-5"] > p,
	body.ny-pc.ny-page-about main > div > div[class~="px-5"] > div[class~="gap-y-6"] p {
		word-spacing: -0.25em;
		text-wrap: balance;
	}
}

@media (min-width: 1024px) {
	/* キャッチ＋リードを左、社長メッセージのバナー（706×1018の縦長）を右に。
	   事業紹介／数字で見る の2ブロックは全幅に戻して2列 */
	body.ny-pc.ny-page-about main > div > div[class~="px-5"] {
		display: grid;
		grid-template-columns: minmax(0, 1fr) var(--ny-col-side);
		column-gap: var(--ny-col-gap);
		align-items: start;
	}

	body.ny-pc.ny-page-about main > div > div[class~="px-5"] > * {
		grid-column: 1 / -1;
	}

	body.ny-pc.ny-page-about main > div > div[class~="px-5"] > p {
		grid-column: 1;
		grid-row: 1;
	}

	body.ny-pc.ny-page-about main > div > div[class~="px-5"] > div[class~="gap-y-6"] {
		grid-column: 1;
		grid-row: 2;
		margin-bottom: 100px;
	}

	body.ny-pc.ny-page-about main > div > div[class~="px-5"] > a {
		grid-column: 2;
		grid-row: 1 / span 2;
	}

	body.ny-pc.ny-page-about main > div > div[class~="px-5"] > div[class~="gap-y-16"] {
		grid-column: 1 / -1;
		grid-row: 3;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 48px 24px;
		align-items: start;
	}
}

@media (min-width: 481px) {
	/* 末尾のグループ紹介：オレンジ面は全幅のまま、中身は1080に絞る。
	   ⚠ 面のクラスが /about/ は px-4、/about/message/ は px-3 と違うので、
	   両方が持つ z-20 で拾う */
	body.ny-pc.ny-page-about main div[class~="bg-o-orange"][class~="z-20"] > div {
		max-width: var(--ny-inner);
		margin-inline: auto;
	}

	/* /about/message/ の末尾は「社是・経営理念」の中央揃えの文章。
	   1080pxだと1行が長くなりすぎるので読み物と同じ820pxで止める */
	body.ny-pc.ny-page-about-message main div[class~="bg-o-orange"][class~="z-20"] > div {
		max-width: var(--ny-read);
		margin-inline: auto;
	}
}

@media (min-width: 1024px) {
	/* グループ会社10社は2列に（カードの形は変えない） */
	body.ny-pc.ny-page-about main div[class~="bg-o-orange"][class~="z-20"] > div[class~="gap-y-4"],
	body.ny-pc.ny-page-about-message main div[class~="bg-o-orange"][class~="z-20"] > div[class~="gap-y-4"] {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
		align-items: start;
	}
}

/* ==========================================================================
   社長メッセージ（/about/message/）
   --------------------------------------------------------------------------
   長文が主体のページ。器は1080でも、読むのは820pxで止める。
   ビジュアル帯（社長写真＋地球のSVG）は現行のまま全幅で置く。
   ========================================================================== */

@media (min-width: 481px) {
	body.ny-pc.ny-page-about-message main > div[class~="px-5"] > p,
	body.ny-pc.ny-page-about-message main > div[class~="px-5"] > div[class~="gap-6"] {
		max-width: var(--ny-read);
	}

	body.ny-pc.ny-page-about-message main > div[class~="px-5"] > p br,
	body.ny-pc.ny-page-about-message main > div[class~="px-5"] > div[class~="gap-6"] p br {
		display: none;
	}

	body.ny-pc.ny-page-about-message main > div[class~="px-5"] > p,
	body.ny-pc.ny-page-about-message main > div[class~="px-5"] > div[class~="gap-6"] p {
		word-spacing: -0.25em;
		text-wrap: pretty;
	}
}

/* ==========================================================================
   /about/・/about/message/ 末尾の「弧つきオレンジ面」（2026-08-30 レビュー反映）
   --------------------------------------------------------------------------
   TOPのINTERVIEWブロックと同じ部品（live3のリング＋yellow-circleの円）。
   器を開けると円が画面幅まで膨らんで見出しやRECRUIT帯に重なるため、
   TOPと同じ処置＝円は消してPC用の弧画像（pc-interview-arc.png）に差し替える。
   ========================================================================== */

@media (min-width: 481px) {
	body.ny-pc.ny-sub img[src*="yellow-circle_"],
	body.ny-pc.ny-sub img[src*="live3_"] {
		display: none;
	}

	body.ny-pc.ny-sub main div[class~="after:h-[521px]"] {
		background-image: url("../img/pc-interview-arc.png");
		background-repeat: no-repeat;
		background-position: top center;
		background-size: 100% auto;
		/* 弧のぶんの高さ（素材は 1440×307 ＝ 幅の21.32%） */
		padding-top: 21.32%;
	}

	/* 見出しは弧の内側（下寄り）へ。SPの -translate-y-10 は打ち消す */
	body.ny-pc.ny-sub main div.font-outfit.z-20 {
		z-index: 30;
		margin-top: -64px;
		margin-bottom: 0;
		translate: 0;
	}

	/* オレンジ面は弧の下端から。角丸は素材側が担う。
	   面の下に150pxを持たせ、黒帯へ白い余白なしでつなぐ（/data/ と同じ考え方） */
	body.ny-pc.ny-sub main div.bg-o-orange.z-20 {
		margin-top: 0;
		padding-top: 50px;
		padding-bottom: 150px;
		border-radius: 0;
	}

	/* 器側の150pxは打ち消す（オレンジ面が黒帯に直付けになるページ）。
	   新卒／中途の一覧も末尾がINTERVIEWのオレンジ面なので同じ扱いにする */
	body.ny-pc.ny-page-about main > div:last-child,
	body.ny-pc.ny-page-about-message main > div:last-child,
	body.ny-pc.post-type-archive-job main > div:last-child {
		padding-bottom: 0;
	}

	/* 社是の3項目は inline-block で、820pxでは1行に並んでしまう。
	   内容幅のブロックにして1項目1行に戻す（黄色の下線は内容幅のまま） */
	body.ny-pc.ny-page-about-message main [class~="paragraph--underline"] {
		display: block;
		width: max-content;
		max-width: 100%;
		margin-inline: auto;
	}

	/* SPIRITS OF FOUNDATION の上をもう少し空ける（80px → 140px） */
	body.ny-pc.ny-page-about-message main div[class~="mt-20"] {
		margin-top: 140px;
	}
}

@media (min-width: 1024px) {
	/* 社長メッセージ：本文を左、社長の画像を右に。
	   main を「余白｜本文｜間隔｜画像｜余白」の5列にして、
	   末尾の弧つきオレンジ面だけ全幅（1 / -1）で通す */
	body.ny-pc.ny-page-about-message main {
		display: grid;
		grid-template-columns:
			minmax(var(--ny-gutter), 1fr)
			minmax(0, calc(var(--ny-inner) - var(--ny-col-side) - var(--ny-col-gap)))
			var(--ny-col-gap)
			var(--ny-col-side)
			minmax(var(--ny-gutter), 1fr);
		align-items: start;
	}

	body.ny-pc.ny-page-about-message main > * {
		grid-column: 1 / -1;
	}

	body.ny-pc.ny-page-about-message main > div:has(> div[class~="gap-6"]) {
		grid-column: 2;
		grid-row: 2;
		padding-inline: 0;
	}

	body.ny-pc.ny-page-about-message main > div[class~="h-[400px]"] {
		grid-column: 4;
		grid-row: 2;
		margin-top: 0;
	}
}

@media (min-width: 481px) {
	/* 見出しの引き上げ量は「見出し自身の高さ」と同じにする（弧の下端＝面の上端）。
	   /about/message/ は「PHILOSOPHY／企業理念」で64px、
	   /about/ は「SUNNY LIVEGROUP」が2行になるため100px。
	   合わないと弧と面のあいだに白い帯が残る（実測36px）。 */
	body.ny-pc.ny-page-about main div.font-outfit.z-20 {
		margin-top: -100px;
	}
}

/* ==========================================================================
   インタビュー 一覧（/interview/）
   --------------------------------------------------------------------------
   記事カードはSPで1列。PCは2列にする（サムネは470pxが原寸）。
   ========================================================================== */

@media (min-width: 481px) {
	body.ny-pc.ny-page-interview main section[class~="interview-list-container"] {
		max-width: calc(var(--ny-inner) + var(--ny-gutter) * 2);
		margin-inline: auto;
		padding-inline: var(--ny-gutter);
	}
}

@media (min-width: 1024px) {
	body.ny-pc.ny-page-interview main ul[class~="interview-list"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 48px 24px;
		/* 絞り込みとカードのあいだ */
		margin-top: 50px;
		/* align-items は既定の stretch のまま＝行内のカードの高さが揃う */
	}

	/* カードの中身を高さいっぱいに伸ばす（li だけ伸びても中の白いカードが伸びない） */
	body.ny-pc.ny-page-interview main ul[class~="interview-list"] > li,
	body.ny-pc.ny-page-interview main ul[class~="interview-list"] > li > div {
		height: 100%;
	}

	/* カードの見出しは16px（20pxだとPCで大きすぎ、2行になって高さもばらつく） */
	body.ny-pc.ny-page-interview main ul[class~="interview-list"] p[class~="text-20px"] {
		font-size: 16px;
	}
}

/* ==========================================================================
   インタビュー 詳細（/interview/<id>/）
   --------------------------------------------------------------------------
   ⚠ このページには h1 が無いので、型のタイトル帯は出さない（型側で :has(main h1) 判定）。
   ワイヤーどおり本文は1カラム820pxで読ませる。
   ========================================================================== */

@media (min-width: 481px) {
	/* 本文（Q&Aの各セクション）と冒頭のリードを820pxで中央に */
	body.ny-pc[class*="ny-page-interview-"] main > div[class~="px-5"] > section,
	body.ny-pc[class*="ny-page-interview-"] main > div[class~="bg-white"] p {
		max-width: var(--ny-read);
		margin-inline: auto;
	}
}

@media (min-width: 481px) {
	/* ⚠ /interview/ はヒーロー（section.relative）の中に h1 がある。
	   そのままだと型の「h1を帯へ絶対配置」がヒーロー基準になり、帯が空になる。
	   ヒーローの position を外して h1 を器基準（＝帯）へ届かせ、
	   ヒーロー基準で置かれていた装飾テキストは消して高さも詰める。 */
	body.ny-pc.ny-page-interview main > section:first-child {
		position: static;
		padding-top: 0;
		padding-bottom: 0;
	}

	body.ny-pc.ny-page-interview main > section:first-child > div[class~="absolute"] {
		display: none;
	}

	body.ny-pc.ny-page-interview main > section:first-child > div[class~="px-5"] {
		max-width: calc(var(--ny-inner) + var(--ny-gutter) * 2);
		margin-inline: auto;
		padding-inline: var(--ny-gutter);
		padding-top: 0;
	}
}

@media (min-width: 1024px) {
	/* インタビュー詳細の冒頭：記事タイトルを左、写真（353px＋肩書きバッジ）を右に */
	body.ny-pc[class*="ny-page-interview-"] main > div[class~="bg-white"] > div[class~="relative"] {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 353px;
		column-gap: var(--ny-col-gap);
		align-items: center;
		max-width: calc(var(--ny-inner) + var(--ny-gutter) * 2);
		margin-inline: auto;
		padding-inline: var(--ny-gutter);
	}

	body.ny-pc[class*="ny-page-interview-"] main > div[class~="bg-white"] > div[class~="relative"] > div[class~="mx-auto"] {
		grid-column: 2;
		grid-row: 1;
		margin-inline: 0;
	}

	body.ny-pc[class*="ny-page-interview-"] main > div[class~="bg-white"] > div[class~="relative"] > p {
		grid-column: 1;
		grid-row: 1;
		max-width: none;
		margin-inline: 0;
		padding-inline: 0;
	}
}

/* ==========================================================================
   お知らせ詳細（/news/<id>/）と 404
   --------------------------------------------------------------------------
   どちらも記事／メッセージのページで、ページ名を帯に出す作りではない。
   （お知らせ詳細のh1は記事タイトル、404のh1は画像）。帯は出さず、
   h1は元の位置に戻す。セレクタは .ny-sub を足して型より詳細度を上げている。
   ========================================================================== */

@media (min-width: 481px) {
	body.ny-pc.ny-sub[class*="ny-page-news-"] .site-shell > div[class~="overflow-hidden"],
	body.ny-pc.ny-sub.ny-page-404 .site-shell > div[class~="overflow-hidden"] {
		padding-top: 0;
	}

	body.ny-pc.ny-sub[class*="ny-page-news-"] .site-shell > div[class~="overflow-hidden"]::before,
	body.ny-pc.ny-sub.ny-page-404 .site-shell > div[class~="overflow-hidden"]::before {
		display: none;
	}

	body.ny-pc.ny-sub[class*="ny-page-news-"] main h1,
	body.ny-pc.ny-sub.ny-page-404 main h1 {
		position: static;
		display: block;
		width: auto;
		height: auto;
		margin: 0;
		/* ⚠ 型は translateX(-50%) で中央に寄せている。position を戻しても
		   transform は効き続けるので、ここで打ち消さないと左にずれる（実際に踏んだ） */
		transform: none;
	}

	/* お知らせ詳細：記事は読み物なので820pxで中央 */
	body.ny-pc.ny-sub[class*="ny-page-news-"] main article > * {
		max-width: var(--ny-read);
		margin-inline: auto;
	}

	/* 記事タイトルはPCで少し大きく（SPの級数のままだと本文と差がつかない） */
	body.ny-pc.ny-sub[class*="ny-page-news-"] main article h1 {
		font-size: 28px;
		line-height: 1.5;
	}

	/* 404：中身は画面の中央に、余白を確保して置く */
	/* 戻るボタンは SP で w-full。PCでそのまま伸ばすと1080pxの帯になるので、
	   TOPのピル（300px）に近い幅で中央に置く */
	body.ny-pc.ny-sub[class*="ny-page-news-"] main article > a[class*="rounded-full"],
	body.ny-pc.ny-sub.ny-page-404 main a[class*="rounded-full"] {
		max-width: 320px;
		margin-inline: auto;
	}

	body.ny-pc.ny-sub.ny-page-404 main > div {
		max-width: calc(var(--ny-inner) + var(--ny-gutter) * 2);
		margin-inline: auto;
		padding-inline: var(--ny-gutter);
		padding-block: 100px;
	}
}

/* ==========================================================================
   求人詳細（/new-graduate/<id>/ ・ /mid-career/<id>/）
   --------------------------------------------------------------------------
   8URLあるが実体は4記事（同じ投稿を新卒URLと中途URLの両方で出している）。
   テンプレートは single-job.php の1本なので、WPが付ける .single-job で束ねる。
   ワイヤーの job-detail.html に寄せて、リードと本文を2カラム、
   仕事内容を2列、他の募集要項を3列にする。
   ⚠ アコーディオンの廃止・1職種1ページへの統合はURL設計（301）と一体なので、
     ここではレイアウトだけを直し、中身は現行のまま触らない。
   ========================================================================== */

@media (min-width: 481px) {
	/* ⚠ /interview/ と同じ罠。ヒーローが section.relative なので、そのままだと
	   型の「h1を帯へ絶対配置」がヒーロー基準になり、帯が空のまま h1 が下に残る。
	   position を外して器基準（＝帯）へ届かせ、ヒーロー基準の縦書き装飾は消す */
	body.ny-pc.single-job main > section:first-child {
		position: static;
		/* ヒーロー写真と本文の間隔。SPの pb-8 のままだと写真に本文が張り付く */
		padding-bottom: 64px;
	}

	body.ny-pc.single-job main > section:first-child > div[class~="absolute"] {
		display: none;
	}

	/* 各セクションの中身を 1080 の器に収める */
	body.ny-pc.single-job main div[class~="px-5"] {
		max-width: calc(var(--ny-inner) + var(--ny-gutter) * 2);
		margin-inline: auto;
		padding-inline: var(--ny-gutter);
	}

	/* ヒーロー写真は 1080 幅のままだと高さ721pxの巨大な面になる。切り直す
	   （img は object-cover なので比率だけ変えればよい）。
	   16:9【2026-09-02 米倉さん指示。以前は 1080/420＝2.57:1 で横長すぎた】 */
	body.ny-pc.single-job main > section:first-child img[class*="aspect-"] {
		aspect-ratio: 16 / 9;
	}

	/* エントリーの帯画像も同じ理由で幅なりに伸びる。上限を付ける。
	   **820px（--ny-read）では大きすぎたので半分の410pxへ**【2026-09-02 米倉さん指示】。
	   素材は686×120なので410pxなら原寸より小さく、荒れない */
	body.ny-pc.single-job main img[src*="entry"] {
		max-width: 410px;
		margin-inline: auto;
	}
}

/* --- 募集要項は常時表示（アコーディオンを畳まない）【2026-09-01 米倉さん指示】 -----
   ワイヤー job-detail.html の「アコーディオンを廃止し、要項とエントリーを常時表示」。
   基本給220,000円・年間休日123日という一番強い材料が閉じた中にあるのを解く。
   はじめはPC（481px以上）だけ開き、SPは開閉のまま残していた。
   **SPも常時表示にする**【2026-10-26 南陽吉久様の指示】ため、メディアクエリの外へ出した。
   .entry-content は Tailwind の grid-rows-[0fr]（0,1,0）なので、
   body.ny-pc.single-job .entry-content（0,3,0）で !important なしに上書きできる。
   JSが付け外しする grid-rows-[1fr]/[0fr] にも勝つので、押しても閉じない。 */
body.ny-pc.single-job .entry-content {
	grid-template-rows: 1fr;
}

/* 開閉しないので、開閉のサイン（∨アイコン）と押せる見た目を消す。
   見出しの右肩にいるブタは残す（あちらは装飾で、開閉アイコンではない） */
body.ny-pc.single-job .entry-icon {
	display: none;
}

body.ny-pc.single-job .entry-toggle {
	cursor: default;
	pointer-events: none;
}

@media (min-width: 1024px) {
	/* リード（24px）は文節で折る。PCで「人の暮らしそのも／の」のように割れるため */
	body.ny-pc.single-job main div[class~="text-24px"] p {
		word-break: auto-phrase;
		line-break: strict;
	}

	/* 本文と「主な仕事内容」の間隔は40px【2026-09-01 米倉さん指示】。
	   SPの mb-8（32px）＋prose の下マージンで間延びして見えるため、実測して詰める */
	body.ny-pc.single-job main > section:nth-of-type(2) > div[class~="px-5"] > div[class~="text-16px"] {
		margin-bottom: 40px;
	}

	/* リードと本文は縦並び【2026-09-01 米倉さん指示】。
	   以前は cols2（左=リード／右=本文）にしていたが、リードが2行で終わるため
	   左カラムの下が大きく空いて間が抜ける。器は1080のまま、読み物の行長だけ止める。 */
	body.ny-pc.single-job main > section:nth-of-type(2) > div[class~="px-5"] > div[class~="prose"] {
		max-width: var(--ny-read);
	}

	/* 主な仕事内容のリストは1行が短いので2列に */
	body.ny-pc.single-job main ul[class~="flex-col"] {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 32px;
	}

	/* 他の募集要項は3枚あるので3列（ワイヤーの c3） */
	body.ny-pc.single-job main > section:last-of-type div[class~="flex-col"][class~="gap-5"] {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px;
	}
}

/* ==========================================================================
   新卒採用／中途採用の一覧（/new-graduate/ ・ /mid-career/）
   --------------------------------------------------------------------------
   テンプレートは archive-job.php の1本。WPが付ける .post-type-archive-job で束ねる。
   ワイヤー（new-graduate.html / mid-career.html）の cols2 は「文章が左・画像が右400px」。
   ⚠ 役割そのものの作り替え（選考の流れ・教育制度の新設など）は中身の入れ替えなので
     ここでは扱わない。レイアウトだけをPCに合わせる。
   ========================================================================== */

@media (min-width: 481px) {
	/* NEWSバナーの見出しは style.css で 20秒かけて左へ流れる（marquee）。
	   SPは文字がバーより長いので電光掲示板として成立するが、PCではバーが1003pxあり
	   文字が収まりきるため、流れて画面から消える時間のほうが長い＝壊れて見える。
	   PCでは止める（TOP側は同じマークアップでも astro のスコープ属性が無く元から静止） */
	body.ny-pc.post-type-archive-job .news-marquee,
	body.ny-pc.ny-page-entry .news-marquee {
		animation: none;
	}

	/* 各ブロックの中身を 1080 の器に収める。
	   ⚠ max-width で絞ると .px-5.bg-white の「白い面」まで一緒に縮んで
	   左右に地の黄色が出てしまう（実際に踏んだ）。面は全幅のまま、
	   padding で中身だけを中央1080に寄せる。 */
	body.ny-pc.post-type-archive-job main div[class~="px-5"] {
		padding-inline: max(var(--ny-gutter), calc((100% - var(--ny-inner)) / 2));
	}

	/* イントロのリード文（黄色地の3ブロック）を22pxに【2026-09-08 米倉さん指示】。
	   各pに .text-16px(0,1,0) が直接当たっているので、同じ形のセレクタで上書きする。
	   新卒・中途は archive-job.php の1本なので、この指定で両ページに効く。 */
	body.ny-pc.post-type-archive-job main > div > div[class~="pb-16"] > div[class~="gap-6"] p {
		font-size: 22px;
		/* 新卒は1文=1行で収まるが、中途は原稿が長く1行698px必要で収まらない
		   （文章列は648px）。折り返すとき文節の途中で切れないようにしておく。
		   ⚠ 中途のリード文は先方確認待ちのダミー（確認事項#6）＝原稿確定で行数が変わる */
		word-break: auto-phrase;
		line-break: strict;
	}
}

@media (min-width: 1024px) {
	/* イントロ：キャッチ＋本文を左、イラストを右400pxに（ワイヤーの cols2）
	   ⚠ 列間は共通の --ny-col-gap(64px) ではなく32px。リード文を22pxにすると
	     1行の最大が636px必要で、64pxのままだと文章列が616pxしかなく
	     「そのサイクルが、〜」と「南陽吉久は、〜」が途中で折り返す。
	     イラストの400pxは変えずに列間だけ詰めて648pxを確保している。
	     （2026-09-08。折返しを許すなら var(--ny-col-gap) に戻す） */
	body.ny-pc.post-type-archive-job main > div > div[class~="pb-16"] {
		display: grid;
		grid-template-columns: minmax(0, 1fr) var(--ny-col-side);
		column-gap: 32px;
		align-items: start;
	}

	/* NEWSバナーは全幅 */
	body.ny-pc.post-type-archive-job main > div > div[class~="pb-16"] > a {
		grid-column: 1 / -1;
	}

	/* イラストは右カラム。SPの w-[60%] と mx-auto は外す */
	body.ny-pc.post-type-archive-job main > div > div[class~="pb-16"] > img {
		grid-column: 2;
		grid-row: 2 / span 2;
		align-self: center;
		width: 100%;
		margin: 0;
	}

	/* キャッチと本文は左カラムに縦に積む */
	body.ny-pc.post-type-archive-job main > div > div[class~="pb-16"] > p {
		grid-column: 1;
		grid-row: 2;
	}

	body.ny-pc.post-type-archive-job main > div > div[class~="pb-16"] > div {
		grid-column: 1;
		grid-row: 3;
	}

	/* 求人カードは2列（TOPの募集職種と同じ） */
	body.ny-pc.post-type-archive-job main div[class~="flex-col"][class~="gap-5"] {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}

	/* 「数字で見る南陽吉久」の黒いパネルは1枚画像（1080×1040のほぼ正方形）。
	   幅なりに伸ばすと高さ1040pxの巨大な面になるので、カードとして扱える幅で中央に置く。
	   TOPでは同じ画像を457px（--ny-duo-l）で使っているが、ここは単独で置かれるので
	   少し大きめにして、重ねてある「詳しく見る」ボタン（312px）が窮屈にならないようにする */
	body.ny-pc.post-type-archive-job main div[class~="block"][class~="relative"] {
		max-width: 640px;
		margin-inline: auto;
	}
}

/* 弧まわりは 481px から。このページの器は .ny-sub として481pxで開くので、
   768pxまで正円のままにすると 481〜767px で高さ767pxの黄色い面が残る（実測） */
@media (min-width: 481px) {
	/* 「募集要項」見出しの背面の弧。元は正円なので全幅にすると縦1362pxの黄色い面になる。
	   TOPの ABOUT US と同じ支給素材（pc-about-arc.png・1440×425・上部透過）に差し替える。 */
	body.ny-pc.post-type-archive-job main .section-title img {
		display: none;
	}

	body.ny-pc.post-type-archive-job main .section-title {
		height: auto;
		aspect-ratio: 1440 / 425;
		/* SPは弧を本文へ150px食い込ませているが、PCではその引き上げをやめる */
		margin-top: 0;
		background-image: url("../img/pc-about-arc.png");
		background-repeat: no-repeat;
		background-position: top center;
		background-size: 100% auto;
	}
}

@media (min-width: 481px) {
	/* INTERVIEW の弧そのものは、下層共通の指定（body.ny-pc.ny-sub の
	   div[class~="after:h-[521px]"] ＝ /about/ 用に書いたもの）がすでに効いている。
	   ここで足すのは、SPで弧の上に取っていた200pxの余白を詰めることだけ */
	body.ny-pc.post-type-archive-job main [class~="mt-[200px]"] {
		margin-top: 0;
	}

	/* カルーセルは全件を並べる。TOP側の同じ指定は768px始まり（器が768で開くため）なので、
	   481pxから開くこのページ用にここで作り直している */
	body.ny-pc.post-type-archive-job .interview-splide .splide__track {
		overflow: visible;
	}

	body.ny-pc.post-type-archive-job .interview-splide .splide__list {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
		transform: none !important;
		width: auto !important;
		max-width: var(--ny-inner);
		margin-inline: auto !important;
	}

	body.ny-pc.post-type-archive-job .interview-splide .splide__slide {
		width: auto !important;
		margin: 0 !important;
		visibility: visible !important;
	}

	/* ループ用の複製は並べない */
	body.ny-pc.post-type-archive-job .interview-splide .splide__slide--clone {
		display: none !important;
	}

	body.ny-pc.post-type-archive-job .interview-splide .splide__arrows {
		display: none;
	}

	/* スライド内の画像は列幅に収める */
	body.ny-pc.post-type-archive-job .interview-splide .splide__slide img {
		max-width: 100%;
		height: auto;
	}

	/* カード内の白いテキスト面は w-[353px] 固定なので列幅に追従させる */
	body.ny-pc.post-type-archive-job .interview-splide .splide__slide a[class*="w-[353px]"] {
		width: 100%;
	}

	/* TOP用に入れた「カルーセルの下に160px」は、このページでは要らない。
	   下層共通の指定でオレンジ面が自前の下150pxを持っており、合計310pxの
	   オレンジの空きになるため（実測） */
	body.ny-pc.post-type-archive-job .interview-splide {
		padding-bottom: 0;
	}
}

@media (min-width: 1024px) {
	body.ny-pc.post-type-archive-job .interview-splide .splide__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	/* 中途は「転職して入社した先輩の話」2名だけ出すので2列にする
	   【2026-09-02】。4列のままだと1枚が半分の幅になって右に2列空く */
	body.ny-pc.ny-page-mid-career .interview-splide .splide__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-width: 720px;
		margin-inline: auto;
	}
}

/* ==========================================================================
   新卒／中途の一覧に足したセクション（選考の流れ・応募の流れ／教育制度）
   --------------------------------------------------------------------------
   ワイヤー new-graduate.html / mid-career.html の FLOW・EDUCATION。
   マークアップは archive-job.php で新しく起こしたものなので、style.css に
   受け皿が無い。**SPでも素のままにならないよう、土台はメディアクエリの外に書く**
   （TOPの .ny-jobs／.ny-career と同じ扱い）。
   ⚠ :root の --ny-black / --ny-orange は 481px 以上でしか定義されていないので、
     土台では実値（#282828 / #fcc800）で書くこと。
   ========================================================================== */

.ny-flow,
.ny-edu,
.ny-joblist {
	margin-bottom: 48px;
}

.ny-step {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ny-step > li {
	position: relative;
	border: 2px solid #282828;
	border-radius: 12px;
	background: #fff;
	padding: 18px 16px;
}

/* 選考の流れ・応募の流れは「流れ」に見せたいので、カードの間に黄色い三角を置く。
   矢印のぶん間隔を広げる（縦積みのときは上下36px、横並びのときは左右40px） */
.ny-flow .ny-step {
	gap: 36px;
}

/* 三角は実体のSVG（PHP側で2枚目以降にだけ出している）。
   ⚠ CSSのborder三角にしないこと。Figmaキャプチャで落ちる（memory: capture.jsはCSS三角を落とす） */
.ny-step__arrow {
	position: absolute;
	z-index: 1;
	display: block;
	line-height: 0;
	/* 縦積みのあいだ（〜767px）はカードの上・下向き */
	top: -18px;
	left: 50%;
	transform: translate(-50%, -50%) rotate(90deg);
}

/* 番号は英字なので font-outfit（サイトの英字サブ見出しと同じ扱い）。
   色も英字サブ見出しと同じ #fcc800 に合わせる */
.ny-step__num {
	display: block;
	margin-bottom: 6px;
	font-size: 24px;
	line-height: 1;
	letter-spacing: 0.05em;
}

@media (min-width: 481px) {
	/* 面の中の間隔は下層の型（150px）ほど大きくしない。読み物の連続なので100px */
	body.ny-pc .ny-flow,
	body.ny-pc .ny-edu {
		margin-bottom: 100px;
	}

	body.ny-pc .ny-joblist {
		margin-bottom: 40px;
	}

	/* 教育制度は「流れ」ではないので矢印なしの2列。
	   ⚠ 選考の流れはここでは2列にしない。3枚を2列にすると3枚目だけ次の行の左に落ち、
	     矢印の向き（右→）と実際の並びが食い違う。**横に3つ並ぶ768px以上でだけ横並びにする** */
	body.ny-pc .ny-edu .ny-step {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}

	body.ny-pc .ny-step > li {
		padding: 24px;
	}

	body.ny-pc .ny-step__num {
		font-size: 28px;
		margin-bottom: 10px;
	}

	/* リードは読み物なので行長で止める（下層の他ページと同じ処置） */
	body.ny-pc .ny-flow > p,
	body.ny-pc .ny-edu > p,
	body.ny-pc .ny-joblist > p {
		max-width: var(--ny-read);
	}

	/* 選考の流れ・応募の流れのリードと、教育制度の見出し＋リードはセンター揃え
	   【2026-09-01 米倉さん指示】。アーチの見出しが中央なので流れも中央で受ける。
	   ⚠ text-align だけでは足りない。この段落の箱は行長820pxで列の左端に置いてあるため、
	     箱の中で中央寄せしても見出し（列1080の中央）より左にずれる。**箱ごと列の中央に置く** */
	body.ny-pc .ny-flow > p,
	body.ny-pc .ny-edu > p {
		margin-inline: auto;
		text-align: center;
	}

	body.ny-pc .ny-edu > div {
		text-align: center;
	}
}

@media (min-width: 768px) {
	/* 選考の流れ・応募の流れは3ステップなので横に3つ並べて「流れ」に見せる。
	   ⚠ セレクタは .ny-flow 配下に限定する。`.ny-step` で書くと後勝ちで
	     教育制度（5項目・本文が長い）まで3列になり、1枚が細くなりすぎる */
	body.ny-pc .ny-flow .ny-step {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 40px;
	}

	/* 横並びになったら三角も横向き（→）に。左右の間隔40pxのまん中に置く */
	body.ny-pc .ny-flow .ny-step__arrow {
		top: 50%;
		left: -20px;
		transform: translate(-50%, -50%);
	}
}

/* ==========================================================================
   新規2ページ（/jobs/ 募集職種一覧 ・ /entry/ エントリー）
   --------------------------------------------------------------------------
   ⚠ 2026-09-01 時点では**静的HTML**（`_work/newpages/`）でデザインだけ先に固めている。
     WPへの組み込み（固定ページ or リライト）は太田さんの調整待ち。
     body に ny-page-jobs / ny-page-entry と ny-sub ny-pc を付けてあるので、
     下層共通の型（タイトル帯・1080の器・下150px）はそのまま効く。
   ========================================================================== */

@media (min-width: 481px) {
	/* 求人カードは他ページと同じ2列（TOPの募集職種・新卒／中途の一覧と揃える） */
	body.ny-pc .ny-joblist-cards > div {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}

	/* 読み物の連続なのでセクション間は100px（下層共通の150pxは面の切れ目用） */
	body.ny-pc .ny-entryblock,
	body.ny-pc .ny-entrylead {
		margin-bottom: 100px;
	}

	body.ny-pc .ny-entryblock:last-of-type,
	body.ny-pc .ny-entrylead:last-of-type {
		margin-bottom: 0;
	}

	/* 外部へ出る前の注記。本文より一段落として、ボタンの直下に添える */
	body.ny-pc .ny-entryblock .text-o-dark-gray,
	body.ny-pc .ny-entrylead .text-o-dark-gray {
		max-width: var(--ny-read);
	}

	/* リード（30px）と説明文は読み物なので行長で止める */
	body.ny-pc.ny-page-jobs main > div > div[class~="pb-10"],
	body.ny-pc.ny-page-entry main > div > div[class~="pb-10"] {
		max-width: var(--ny-read);
	}
}

/* ==========================================================================
   新卒／中途の一覧：NEWSバーと導入見出しの間隔【2026-09-02 米倉さん指示】
   --------------------------------------------------------------------------
   SPは NEWSバーの my-6（24px）がそのまま間隔になっている。PCでは60pxに開ける。
   ========================================================================== */

@media (min-width: 481px) {
	body.ny-pc.post-type-archive-job main a[class~="my-6"][class~="rounded-full"] {
		margin-bottom: 60px;
	}
}

/* ==========================================================================
   代表メッセージ：PHILOSOPHY と SPIRITS OF FOUNDATION を横並びに
   【2026-09-02 米倉さん指示】
   --------------------------------------------------------------------------
   SPは「キャラ画像 → 本文」の縦積み・中央揃え。PCは**画像を左・本文を右**に置き、
   本文は左揃えにして、SP用の <br> を解いてPCの行長で折り返させる。

   DOMはこうなっている（HTMLは触らない）:
     div.bg-o-orange.px-3.z-20          ← オレンジの面（全幅）
       [0] svg.message-character        ← PHILOSOPHY のキャラ
       [1] div                          ← PHILOSOPHY の本文（pが5〜6本）
       [2] div.pb-16.text-center.mt-20  ← SPIRITS まるごと（見出し＋画像＋本文）
             div.flex.flex-col          ← 見出し（SPIRITS OF FOUNDATION／創業スピリッツ）
             div.max-w-max              ← 創破のSVG
             p × 4                      ← 本文

   ⚠ 面（オレンジ）は全幅のまま。中身だけ1080の器に収める
     （max-width で絞ると面まで縮んで左右に地の色が出る＝下層で踏んだのと同じ罠）。
   ========================================================================== */

@media (min-width: 1024px) {
	body.ny-pc.ny-page-about-message main div[class~="bg-o-orange"][class~="z-20"] {
		display: grid;
		/* 画像の列。360→420pxへ（2026-09-02 米倉さん「もう少し大きくてOK」） */
		grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
		column-gap: var(--ny-col-gap);
		align-items: center;
		padding-inline: max(var(--ny-gutter), (100% - var(--ny-inner)) / 2);
	}

	/* PHILOSOPHY のキャラは左の列いっぱい（原寸281pxより少し大きくなる） */
	body.ny-pc.ny-page-about-message main div[class~="bg-o-orange"][class~="z-20"] > svg[class~="message-character"] {
		grid-column: 1;
		grid-row: 1;
		width: 100%;
		height: auto;
	}

	/* PHILOSOPHY の本文は右の列。左揃えにして 820px の行長止めも解く */
	body.ny-pc.ny-page-about-message main div[class~="bg-o-orange"][class~="z-20"] > div:nth-of-type(1) {
		grid-column: 2;
		grid-row: 1;
		max-width: none;
		margin-inline: 0;
		text-align: left;
	}

	/* SPIRITS は面の全幅を使う（中で自分の2カラムを組む） */
	body.ny-pc.ny-page-about-message main div[class~="bg-o-orange"][class~="z-20"] > div:nth-of-type(2) {
		grid-column: 1 / -1;
		grid-row: 2;
		max-width: none;
		margin-inline: 0;
		display: grid;
		grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
		column-gap: var(--ny-col-gap);
		text-align: left;
	}

	/* 見出しは2列にまたがせて上に置く。
	   ⚠ 本文のラッパーも flex-col を持っているので `justify-center` まで見て区別する
	     （flex-col だけで拾うと本文まで全幅になり、横並びにならない＝実際に踏んだ） */
	body.ny-pc.ny-page-about-message main div[class~="bg-o-orange"][class~="z-20"] > div:nth-of-type(2) > div[class~="flex-col"][class~="justify-center"] {
		grid-column: 1 / -1;
	}

	/* 創破のSVGは左の列。本文の行数ぶん縦にまたがせて縦中央に置く。
	   ⚠ grid-row を指定しないと、pが1本ずつ行を作るので画像と本文の高さが合わない */
	body.ny-pc.ny-page-about-message main div[class~="bg-o-orange"][class~="z-20"] > div:nth-of-type(2) > div[class~="max-w-max"] {
		grid-column: 1;
		/* ⚠ `grid-row: 2 / -1` は効かない。grid-template-rows を書いていないので
		   -1 が「明示グリッドの最後」＝1行目を指してしまう（実際に踏んだ）。
		   本文のpは1本ずつ行を作るので、span で足りるだけまたがせる */
		grid-row: 2 / span 20;
		align-self: center;
		max-width: none;
		margin: 0;
	}

	/* 本文は右の列。⚠ pは直接の子ではなく div.flex-col.gap-y-6 にまとまっている */
	body.ny-pc.ny-page-about-message main div[class~="bg-o-orange"][class~="z-20"] > div:nth-of-type(2) > div[class~="gap-y-6"] {
		grid-column: 2;
		grid-row: 2;
		align-self: center;
		text-align: left;
	}

	/* --- 改行をPC用に。SPの <br> と whitespace-nowrap を解いて行長で折らせる --- */
	body.ny-pc.ny-page-about-message main div[class~="bg-o-orange"][class~="z-20"] p br {
		display: none;
	}

	body.ny-pc.ny-page-about-message main div[class~="bg-o-orange"][class~="z-20"] p span[class~="whitespace-nowrap"] {
		white-space: normal;
	}

	body.ny-pc.ny-page-about-message main div[class~="bg-o-orange"][class~="z-20"] p {
		text-align: left;
		text-wrap: pretty;
		word-break: auto-phrase;
		line-break: strict;
	}

	/* ⚠ 社是の3行（1.社員の生活の向上と幸福 …）は `.paragraph--underline` が
	     `display:inline-block` なので、**親の text-align** で位置が決まる。
	     pに text-align を書いても中身しか揃わないため、入れ子のdivまで左揃えにする */
	body.ny-pc.ny-page-about-message main div[class~="bg-o-orange"][class~="z-20"] > div:nth-of-type(1) div,
	body.ny-pc.ny-page-about-message main div[class~="bg-o-orange"][class~="z-20"] > div:nth-of-type(2) > div[class~="gap-y-6"] div {
		text-align: left;
	}

	/* 社是の3行は少し大きく（16→20px）。黄色いマーカーは :after で追従する */
	body.ny-pc.ny-page-about-message main div[class~="bg-o-orange"][class~="z-20"] p[class~="paragraph--underline"] {
		font-size: 20px;
		/* ⚠ 上の方（2100行あたり）で `display:block; width:max-content; margin-inline:auto` に
		     していたので中央に寄っていた。横並びにした今は左揃えにする */
		margin-inline: 0;
	}
}

/* ==========================================================================
   新卒／中途の一覧：エントリーCTA【2026-09-02 米倉さん指示】
   --------------------------------------------------------------------------
   職種カードの下に置く全幅のCTA。ボタンは赤（ヘッダー／フッターのエントリーと同じ
   `--color-o-red`）。面の色はサイトで既に使っているグレー（--ny-gray-face と同じ値）
   にしている。⚠ 面は全幅のまま、中身だけ器に収める。
   ========================================================================== */

.ny-entrycta {
	background: #f4f4f4;
	padding: 48px 16px;
	text-align: center;
}

.ny-entrycta__ttl {
	font-size: 22px;
	font-weight: 900;
	letter-spacing: 0.04em;
	line-height: 1.6;
	margin-bottom: 16px;
}

.ny-entrycta__lead {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.9;
	margin-bottom: 28px;
}

/* 赤いピル。形はヘッダーのエントリーと同じ（3px黒枠・角丸999・右に黒丸矢印） */
.ny-entrycta__btn {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 9px 9px 9px 28px;
	border: 3px solid #282828;
	border-radius: 999px;
	background-color: #f43500;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1;
	white-space: nowrap;
	transition: filter 0.2s;
}

.ny-entrycta__btn:hover {
	filter: brightness(0.97);
}

/* 黄色いピル。「仕事内容・募集要項を見る」側に使う（赤はエントリー専用にしておく）。
   面は #fcc800（--color-o-orange／新卒バナーと同じ金色）で、文字は黒。 */
.ny-entrycta__btn--jobs {
	background-color: #fcc800;
	color: #282828;
}

/* インタビュー詳細のCTA：「ひとこと」との間の白い余白を広げる
   【2026-09-10 米倉さん指示】。もとは ひとこと節の mb-8（32px）だけで
   実測34pxしかなく、グレー面が本文に付いて見えた。
   値はサイトの刻みに合わせた（CTA自身の下余白80px／SPは内側の余白48px と同じ）。
   ⚠ .ny-entrycta 全体ではなく .ny-ivcta だけに当てる。/jobs/ と新卒・中途の
     CTAは前の要素が違うので、そちらの余白は変えない。 */
.ny-ivcta {
	margin-top: 48px;
}

@media (min-width: 481px) {
	body.ny-pc .ny-ivcta {
		margin-top: 80px;
	}
}

/* ボタンが2本になるとき。SPは縦、481px以上は横に並べる
   【2026-09-10 インタビュー詳細の職種CTAで追加】 */
.ny-entrycta__btns {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

@media (min-width: 481px) {
	body.ny-pc .ny-entrycta__btns {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: 20px;
	}
}

.ny-entrycta__arw {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background-color: #282828;
}

@media (min-width: 481px) {
	body.ny-pc .ny-entrycta {
		position: relative;
		/* 面（グレー）は画面幅いっぱいに敷く。
		   ⚠ このCTAは px-5 の器の中にいるので、そのままだと面が器の幅で止まる。
		     ::before を100vwで敷く（/data/ のグレー面と同じ手）。祖先に overflow:hidden が
		     あるので横スクロールは出ない */
		background: transparent;
		padding-block: 80px;
		padding-inline: 0;
	}

	body.ny-pc .ny-entrycta::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 100vw;
		background: #f4f4f4;
		z-index: 0;
	}

	body.ny-pc .ny-entrycta > * {
		position: relative;
		z-index: 1;
	}

	/* CTAの面と、下の「数字で見る」バナーの間隔【2026-09-02 米倉さん指示】 */
	body.ny-pc .ny-entrycta {
		margin-bottom: 80px;
	}

	body.ny-pc .ny-entrycta__ttl {
		font-size: 28px;
		margin-bottom: 24px;
	}

	body.ny-pc .ny-entrycta__lead {
		font-size: 16px;
		margin-bottom: 40px;
	}

	body.ny-pc .ny-entrycta__btn {
		gap: 16px;
		padding: 11px 11px 11px 32px;
		font-size: 18px;
	}

	body.ny-pc .ny-entrycta__arw {
		width: 40px;
		height: 40px;
	}
}

/* ==========================================================================
   インタビュー詳細：Q&Aの間隔【2026-09-02 米倉さん指示】
   --------------------------------------------------------------------------
   1項目の作りは
     div.mb-8                                    ← 項目
       div.border-b-2.mb-4                       ← 質問（マイク＋質問文＋下罫線）
       div.text-16px.leading-[1.6]               ← 回答
         p > strong                              ← 太字見出し
         p …                                     ← 本文
   太字見出しと本文がぴったり付いているので10px開け、項目どうしの間隔も広げる。
   ========================================================================== */

@media (min-width: 481px) {
	/* 太字見出しの下を10px */
	body.ny-pc.single-interview main div[class~="text-16px"][class~="leading-[1.6]"] > p:first-child {
		margin-bottom: 10px;
	}

	/* 項目どうしの間隔（SPの mb-8＝32px では詰まって次の質問と地続きに見える） */
	body.ny-pc.single-interview main div[class~="mb-8"]:has(> div[class~="border-b-2"]) {
		margin-bottom: 56px;
	}
}

/* ==========================================================================
   募集職種一覧（/jobs/）：リードとENTRYブロックをセンター揃えに
   【2026-09-02 米倉さん指示】
   --------------------------------------------------------------------------
   ⚠ text-align だけでは足りない。行長820pxの箱が列の左端に置いてあるので
     margin-inline: auto で箱ごと列の中央に置く（/data/ で踏んだのと同じ罠）。
     ボタンは max-width 付きの flex なので、これも margin-inline: auto で中央へ。
   ========================================================================== */

@media (min-width: 481px) {
	body.ny-pc.ny-page-jobs main > div > div[class~="pb-10"],
	body.ny-pc.ny-page-jobs .ny-entrylead > p {
		margin-inline: auto;
		text-align: center;
	}

	body.ny-pc.ny-page-jobs .ny-entrylead {
		text-align: center;
	}

	body.ny-pc.ny-page-jobs .ny-entrylead > a {
		margin-inline: auto;
		/* ピルの中は「文字＋右端に丸矢印」なので、中央寄せにしても中身の並びは変えない */
		justify-content: flex-start;
	}
}

/* ==========================================================================
   エントリー（/entry/）：新卒・中途を背景色つきのカードに
   【2026-09-02 米倉さん指示】
   --------------------------------------------------------------------------
   ・お知らせバーとリードはセンター揃え／お知らせバーに縁線
   ・新卒＝#fff711（bg-o-yellow）／中途＝#FCC800（bg-o-orange）の面に、
     左に見出し＋文＋赤ボタン、右に新卒／中途ページのキャラSVGを置く
   ・英字サブは「相手のカードの黄色」を当てて、面の中で沈ませる
   ・中途カードの下に応募の流れ3枚（白カード）を入れる
   ⚠ このページは静的HTML（_work/newpages/entry.html）。WP組み込みは太田さん待ち。
   ========================================================================== */

.ny-entrycard {
	position: relative;
	border: 3px solid #282828;
	border-radius: 20px;
	padding: 28px 20px;
	margin-bottom: 32px;
	overflow: hidden;
}

.ny-entrycard--fresh { background: #fff711; }
.ny-entrycard--mid { background: #fcc800; }

.ny-entrycard__head { margin-bottom: 20px; }

.ny-entrycard__ttl {
	font-size: 24px;
	font-weight: 900;
	letter-spacing: 0.04em;
	line-height: 1.4;
}

.ny-entrycard__en {
	display: block;
	font-family: var(--font-outfit, "Outfit", sans-serif);
	font-size: 20px;
	font-weight: 800;
	letter-spacing: 0.05em;
	line-height: 1.2;
}

/* 英字は相手のカードの黄色（面に沈ませる） */
.ny-entrycard--fresh .ny-entrycard__en { color: #fcc800; }
.ny-entrycard--mid .ny-entrycard__en { color: #fff711; }

.ny-entrycard__lead {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.9;
	margin-bottom: 24px;
}

.ny-entrycard__fig { margin-top: 16px; text-align: center; }
.ny-entrycard__fig img { width: 200px; height: auto; }
.ny-entrycard__flow { margin-top: 28px; }

/* 🔴 2カラムは 768px から当てる。481pxで当てると壊れる【2026-09-10 実測】
   このカードは固定ぶんが 300px（キャラ）＋40px（gap）＋104px（左右padding）＝444px ある。
   カードが「444px＋文章列」に届かない幅では左の文章列が 0〜66px まで潰れ、
   見出しが1文字ずつ縦に落ちる（482〜640pxで実際に発生していた）。
   768pxなら文章列に254px残る。それ未満はSPと同じ縦積み（キャラは文章の下）のままにする。 */
@media (min-width: 768px) {
	body.ny-pc .ny-entrycard {
		display: grid;
		/* 左＝文章／右＝キャラ */
		grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
		column-gap: 40px;
		align-items: center;
		border-radius: 24px;
		padding: 48px 48px 48px 56px;
		margin-bottom: 40px;
	}

	body.ny-pc .ny-entrycard__body { grid-column: 1; grid-row: 1; }
	body.ny-pc .ny-entrycard__fig { grid-column: 2; grid-row: 1; margin-top: 0; }
	body.ny-pc .ny-entrycard__fig img { width: 100%; }

	/* 応募の流れは2列ぶんにまたがせてカードの下段へ */
	body.ny-pc .ny-entrycard__flow {
		grid-column: 1 / -1;
		grid-row: 2;
		margin-top: 40px;
	}

	body.ny-pc .ny-entrycard__ttl { font-size: 30px; }
	body.ny-pc .ny-entrycard__en { font-size: 22px; }
	body.ny-pc .ny-entrycard__lead { font-size: 16px; margin-bottom: 28px; }
}

/* 768〜1023px は文章列が254pxしか残らず、見出し「新卒採用エントリー」が2行に割れる。
   左右のpaddingだけ詰めて294pxを確保する（1行に必要なのは実測286px）。
   1024px以上は元の padding のまま＝Figmaに出したPCの見た目は変わらない。 */
@media (min-width: 768px) and (max-width: 1023px) {
	body.ny-pc .ny-entrycard {
		padding-right: 32px;
		padding-left: 32px;
	}
}

/* こちらは器の幅に依存しないので 481px のまま */
@media (min-width: 481px) {
	/* お知らせバーとリードをセンター揃えに */
	body.ny-pc.ny-page-entry main > div > div[class~="pb-10"] {
		margin-inline: auto;
		text-align: center;
	}

	/* お知らせバーに縁線（サイトの他のパーツと同じ黒2px） */
	body.ny-pc.ny-page-entry main a[class~="rounded-full"][class~="bg-white"] {
		border: 2px solid #282828;
		margin-inline: auto;
		max-width: 720px;
	}
}

/* カード内の注記。#999（text-o-dark-gray）は黄色い面の上で読めないので黒に寄せる */
.ny-entrycard .text-o-dark-gray {
	color: #282828;
	opacity: 0.72;
}

/* 募集職種（/jobs/）：CTAの面をRECRUIT帯に直付けする【2026-09-02 米倉さん指示】
   下層共通の型で器に padding-bottom:150px があり、グレー面と黒帯の間が白く空くため。
   （/data/ でグレー面を黒帯に直付けしたのと同じ処置） */
@media (min-width: 481px) {
	body.ny-pc.ny-page-jobs main > div[class~="px-5"] {
		padding-bottom: 0;
	}
}

/* エントリー：新卒エリアのボタン2つ（2026卒／2027卒）【2026-09-02 米倉さん指示】
   ⚠ 文字・リンク先・表示ON/OFFはWPで編集できる仕様にする（実装は太田さん・仕様書は
     リポジトリ直下の エントリーページ_ボタン仕様_20260902.md）。
     ボタンが1つになっても2つのままでも崩れないよう flex + wrap で組む */
.ny-entrycard__btns {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
}

/* 横並びも 768px から。文章列が潰れる幅（〜767px）では2つのボタンが縦のまま */
@media (min-width: 768px) {
	body.ny-pc .ny-entrycard__btns {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 16px;
	}
}

/* ==========================================================================
   インタビュー詳細：FVを「写真左・テキスト右」に【2026-09-02 米倉さん指示】
   --------------------------------------------------------------------------
   DOMは
     div.mb-16.bg-white.pt-6
       div.relative                      ← ヒーロー
         div.relative.mx-auto.max-w-max  ← 写真のラッパー
           img.max-w-[353px]             ← 写真
           div.-mt-7.ml-auto             ← タグ帯（職種／入社年／名前）
         p.text-20px                     ← タイトル
   タグ帯は写真ラッパーの中にいるので、そのままでは右カラムへ動かせない。
   **ラッパーを display:contents で解いて**、写真・タグ帯・タイトルを直接
   グリッドに並べる（HTMLは触らない）。
   ⚠ ラッパーを解くと `-mt-7`（写真に食い込ませる指定）と `ml-auto` が
     そのまま残るので打ち消すこと。
   ========================================================================== */

@media (min-width: 768px) {
	body.ny-pc.single-interview main > div[class~="mb-16"] > div[class~="relative"] {
		display: grid;
		grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
		column-gap: 40px;
		align-items: center;
		/* ⚠ 幅は本文（「入社前について」の見出し）と同じ 820px＝--ny-read に合わせる。
		     1080（--ny-inner）にすると写真が本文より左へ出て、はみ出して見える
		     （2026-09-02 米倉さん指摘。実測で本文 left=310／ヒーロー left=180 だった） */
		max-width: calc(var(--ny-read) + var(--ny-gutter) * 2);
		margin-inline: auto;
		padding-inline: var(--ny-gutter);
	}

	body.ny-pc.single-interview main > div[class~="mb-16"] > div[class~="relative"] > div[class~="max-w-max"] {
		display: contents;
	}

	/* 写真は左。2行ぶんまたがせて縦中央 */
	body.ny-pc.single-interview main > div[class~="mb-16"] img[class~="max-w-[353px]"] {
		grid-column: 1;
		grid-row: 1 / span 2;
		align-self: center;
		max-width: 100%;
		width: 100%;
	}

	/* タグ帯は右カラムの上。写真への食い込みと右寄せを解く */
	body.ny-pc.single-interview main > div[class~="mb-16"] div[class~="-mt-7"] {
		grid-column: 2;
		grid-row: 1;
		margin: 0 auto 20px 0;
		align-self: end;
	}

	/* タイトルは右カラムの下。20→28pxに上げ、日本語は文節で折る
	   （balance だけだと文節の途中で割れる。auto-phrase ＋ line-break:strict が要る） */
	body.ny-pc.single-interview main > div[class~="mb-16"] > div[class~="relative"] > p[class~="text-20px"] {
		grid-column: 2;
		grid-row: 2;
		align-self: start;
		margin-top: 0;
		padding-inline: 0;
		font-size: 28px;
		line-height: 1.6;
		word-break: auto-phrase;
		line-break: strict;
	}
}

/* ==========================================================================
   RECRUIT帯：バナー2枚＋赤いエントリーで3列に【2026-09-02 米倉さん指示】
   --------------------------------------------------------------------------
   ・ボタンを小さくして3列に並べる（880pxの中に3つ＝1枚あたり約280px）
   ・3列目は赤いエントリーボタン。バナーと同じピル形（白い外縁＋黒枠）に寄せる
   ⚠ エントリーボタンは front-page.php にしか無かったので、
     **RECRUIT帯を持つ15ファイル全部のバナーの器の中へ入れた**（2026-09-02）。
     器の中に入れたことで、器のグリッドがそのまま3列を面倒みる。
   ⚠ ボタンは `hidden` を持っていてSPでは出ない（PCだけ3列になる）。
   ========================================================================== */

@media (min-width: 768px) {
	/* ⚠ 上の方（496行あたり）に `body.ny-pc #recruit .flex.flex-col.gap-4` で
	     `1fr 1fr` を書いてある。あちらは詳細度(1,4,1)で、`div[class~="gap-4"]` 形の
	     (1,2,2) では**後ろに書いても勝てない**。同じ形のセレクタで書くこと（実際に踏んだ） */
	body.ny-pc #recruit .flex.flex-col.gap-4 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 20px;
		align-items: stretch;
	}

	/* 3列目の赤いエントリー。器の中に入れたので、単独置きのときの指定を打ち消す */
	body.ny-pc #recruit .flex.flex-col.gap-4 > .ny-recruit-entry {
		display: flex;
		width: 100%;
		height: 100%;
		margin: 0;
		justify-content: center;
		gap: 12px;
		padding: 0 20px;
		border-radius: 999px;
		/* 黒い枠は無しでOK【2026-09-02 米倉さん指示】。
		   バナーSVGと同じ「外側の白い縁」だけ影で作る */
		border: none;
		box-shadow: 0 0 0 4px #fff;
		font-size: 18px;
		text-align: center;
	}

	body.ny-pc #recruit .flex.flex-col.gap-4 > .ny-recruit-entry .ny-pc-entry__arw {
		width: 30px;
		height: 30px;
	}
}

/* ==========================================================================
   職種詳細：ページ内リンク（主な仕事内容／新卒の募集要項／中途の募集要項）
   【2026-09-02 米倉さん指示】
   --------------------------------------------------------------------------
   形はサイトのピル（3px黒枠・角丸999・右に黒丸＋白矢印）に合わせる。面は薄グレー。
   ⚠ サイト全体が scroll-behavior: smooth なので、アンカーは滑って移動する。
   ========================================================================== */

.ny-jumpnav {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 40px;
}

.ny-jumpnav__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 10px 10px 20px;
	border: 3px solid #282828;
	border-radius: 999px;
	background: #f4f4f4;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.4;
	transition: filter 0.2s;
}

.ny-jumpnav__item:hover { filter: brightness(0.97); }

.ny-jumpnav__arw {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #282828;
}

@media (min-width: 768px) {
	body.ny-pc.single-job .ny-jumpnav {
		flex-direction: row;
		gap: 16px;
		margin-bottom: 56px;
	}

	body.ny-pc.single-job .ny-jumpnav__item {
		flex: 1 1 0;
		font-size: 15px;
		padding: 12px 12px 12px 24px;
	}

	body.ny-pc.single-job .ny-jumpnav__arw {
		width: 32px;
		height: 32px;
	}
}

/* 職種詳細：教育制度と他の募集要項の面をグレーに【2026-09-02 米倉さん指示】
   ⚠ 面は全幅のまま。中身は元から div.px-5 が1080に収めているので触らない */
@media (min-width: 481px) {
	body.ny-pc.single-job main > section#education,
	body.ny-pc.single-job main > section:last-of-type {
		background: #f4f4f4;
	}

	/* グレーの面に上下の余白を持たせる（教育制度は元から余白なし・他の募集要項は pb-16 だけ） */
	body.ny-pc.single-job main > section#education {
		padding-top: 100px;
	}

	body.ny-pc.single-job main > section:last-of-type {
		padding-top: 100px;
		padding-bottom: 100px;
	}

	/* 教育制度と他の募集要項が続くと灰色が2枚に見えるので、間の余白を詰めて1枚の面にする */
	body.ny-pc.single-job main > section#education .ny-edu {
		margin-bottom: 0;
	}

	body.ny-pc.single-job main > section#education + section {
		padding-top: 100px;
	}
}

/* アンカーリンクが4つになったので幅の当て方を変える【2026-09-02】。
   ⚠ `flex: 1 1 0` で4等分（1枚250px）にすると「…エントリー」が2行に割れて
     2行目に「ー」だけが残る（実際にそうなった）。
     **中身の幅で並べて（flex: 0 1 auto）nowrapにし、入らないときだけ行を折る**。
     15pxでも4つで約860px＝器の1080pxに収まる（実測） */
@media (min-width: 768px) {
	body.ny-pc.single-job .ny-jumpnav {
		flex-wrap: wrap;
	}

	body.ny-pc.single-job .ny-jumpnav__item {
		flex: 0 1 auto;
		white-space: nowrap;
		font-size: 15px;
		padding: 12px 12px 12px 22px;
		gap: 12px;
	}
}

/* ==========================================================================
   会社を知る（/about/）：事業紹介と数字で見るを左右交互の2カラムに
   【2026-09-02 米倉さん指示】
   --------------------------------------------------------------------------
   いまは2ブロックが横に並んで、それぞれ「図→見出し→文→ボタン」の縦積み。
   これを **1ブロック＝1行の2カラム**（図とテキストを左右）に組み替え、
   2つ目は左右を入れ替えて交互にする。背景はこの2ブロックの範囲だけグレー。

   1ブロックの中身:
     div.mb-7    ← 図（3円図／数字の円）
     div.mb-2.5  ← 見出し（h2＋英字）
     p           ← 説明文
     a           ← ボタン

   ⚠ 上（1987行あたり）に同じ要素へ `repeat(2, …)` を当てているルールがある。
     詳細度が同じ形（body.ny-pc.ny-page-about main > div > div[class~="px-5"] > …）
     でないと勝てないので、同じ形で書く。
   ⚠ `grid-row: 1 / -1` は使わない（grid-template-rows が無いと -1 が1行目になる）。
   ========================================================================== */

@media (min-width: 1024px) {
	body.ny-pc.ny-page-about main > div > div[class~="px-5"] > div[class~="gap-y-16"] {
		grid-template-columns: minmax(0, 1fr);
		gap: 120px;
		position: relative;
		padding-block: 100px;
	}

	/* グレーの面は画面幅いっぱい（祖先に overflow:hidden があるので横スクロールは出ない） */
	body.ny-pc.ny-page-about main > div > div[class~="px-5"] > div[class~="gap-y-16"]::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 100vw;
		background: #f4f4f4;
		z-index: 0;
	}

	body.ny-pc.ny-page-about main > div > div[class~="px-5"] > div[class~="gap-y-16"] > div {
		position: relative;
		z-index: 1;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		/* 上下に 1fr の空き行を作って、見出し・文・ボタンの3行を縦中央に置く。
		   ⚠ align-items:center だけでは効かない。図が全行にまたがっているので
		     行そのものが伸びて、テキストは上に張り付いて見える（実際にそうなった） */
		grid-template-rows: 1fr min-content min-content min-content 1fr;
		column-gap: var(--ny-col-gap);
	}

	/* 図は左の列。テキスト3行ぶんまたがせて縦中央 */
	body.ny-pc.ny-page-about main > div > div[class~="px-5"] > div[class~="gap-y-16"] > div > div[class~="mb-7"] {
		grid-column: 1;
		grid-row: 1 / span 5;
		align-self: center;
		margin-bottom: 0;
	}

	body.ny-pc.ny-page-about main > div > div[class~="px-5"] > div[class~="gap-y-16"] > div > div[class~="mb-2.5"] {
		grid-column: 2;
		grid-row: 2;
	}

	body.ny-pc.ny-page-about main > div > div[class~="px-5"] > div[class~="gap-y-16"] > div > p {
		grid-column: 2;
		grid-row: 3;
	}

	body.ny-pc.ny-page-about main > div > div[class~="px-5"] > div[class~="gap-y-16"] > div > a {
		grid-column: 2;
		grid-row: 4;
		align-self: start;
		margin-top: 24px;
	}

	/* 2つ目（数字で見る南陽吉久）は左右を入れ替える */
	body.ny-pc.ny-page-about main > div > div[class~="px-5"] > div[class~="gap-y-16"] > div:nth-of-type(2) > div[class~="mb-7"] {
		grid-column: 2;
	}

	body.ny-pc.ny-page-about main > div > div[class~="px-5"] > div[class~="gap-y-16"] > div:nth-of-type(2) > div[class~="mb-2.5"],
	body.ny-pc.ny-page-about main > div > div[class~="px-5"] > div[class~="gap-y-16"] > div:nth-of-type(2) > p,
	body.ny-pc.ny-page-about main > div > div[class~="px-5"] > div[class~="gap-y-16"] > div:nth-of-type(2) > a {
		grid-column: 1;
	}
}

/* ==========================================================================
   新卒／中途：「数字で見る南陽吉久」バナーをPC用の横長素材に差し替え
   【2026-09-02 米倉さん支給】
   --------------------------------------------------------------------------
   SP＝従来の縦長（706×680）／PC＝新しい横長（800×300）。
   imgのsrcはCSSで替えられないので実体を2枚置き、表示を切り替える。
   「詳しく見る」ボタンは素材に入っていないのでHTML側のまま使い、
   横長のレイアウトに合わせて左下（文章の下）へ置き直す。
   ========================================================================== */

.ny-numbanner__pc { display: none; }

@media (min-width: 481px) {
	body.ny-pc .ny-numbanner {
		max-width: 800px;
		margin-inline: auto;
	}

	body.ny-pc .ny-numbanner__sp { display: none; }

	body.ny-pc .ny-numbanner__pc {
		display: block;
		width: 100%;
		height: auto;
	}

	/* 支給素材（800×300の横長）にボタンは入っていないので、HTML側のボタンを
	   文章の下・左寄せに置き直す。SPの inset-x-0 / mx-auto を打ち消す */
	body.ny-pc .ny-numbanner > a {
		right: auto;
		left: 9%;
		bottom: 11%;
		margin: 0;
		max-width: 232px;
		width: auto;
		padding-block: 10px;
		font-size: 16px;
	}
}

/* 会社を知る：パンくずと本文の間隔を他ページと揃える【2026-09-02 米倉さん指摘】
   ⚠ 下層共通の `body.ny-pc.ny-sub main > div.px-5 { padding-top: 72px }` は
     `main > div.px-5` を見ている。/about/ は `main > div > div.px-5` と1階層深いので
     当たっておらず、パンくずと見出しがくっついていた。 */
@media (min-width: 481px) {
	body.ny-pc.ny-page-about main > div > div[class~="px-5"] {
		padding-top: 72px;
	}
}

/* 数字で見るバナー：PC素材(800×300)の幅を実際に800pxにする【2026-09-02】
   ⚠ 上（2494行あたり）に `max-width: 640px` があり、詳細度(0,4,2)。
     `.ny-numbanner`(0,2,1)では勝てないので、同じ形＋クラスで書いて上書きする
     （640pxのままだと素材が縮み、重ねたボタンが本文に被る＝実際に被った）。 */
@media (min-width: 481px) {
	body.ny-pc.post-type-archive-job main div[class~="block"][class~="relative"].ny-numbanner {
		max-width: 800px;
	}
}

/* 会社を知る：グレーの面を「グループ紹介」の弧の手前まで伸ばす
   【2026-09-02 米倉さん指示】
   ⚠ 弧のブロックは mt-[200px]（マージン）で間隔をとっているのでマージンは塗れない。
     マージンを0にして同じ量をパディングへ移し、そこへグレーを敷く。 */
@media (min-width: 481px) {
	body.ny-pc.ny-page-about main > div > div[class~="px-5"] {
		margin-bottom: 0;
	}

	/* ⚠ padding-top は弧の画像（background-position: top center）の置き場所を
	     決めているので**足してはいけない**。足すと弧だけ上に取り残されて崩れる（実際に崩れた）。
	     白く残っていた 200px の余白はマージンなので塗れない → マージンを0にして、
	     その分はグレーの面（上の gap-y-16）の下パディングで作る。 */
	body.ny-pc.ny-page-about main div[class~="after:h-[521px]"][class~="mt-[200px]"] {
		margin-top: 0;
		background-color: #f4f4f4;
	}

	body.ny-pc.ny-page-about main > div > div[class~="px-5"] > div[class~="gap-y-16"] {
		padding-bottom: 200px;
	}
}

/* 数字で見る（/data/）：メインの図版をPC用の横長パネルに差し替え
   【2026-09-02 米倉さん支給】SP＝縦長(706×1526)／PC＝横長(711×429) */
.ny-datapanel__pc { display: none; }
.ny-datapanel__note { display: none; }

@media (min-width: 481px) {
	body.ny-pc.ny-page-data main .ny-datapanel__sp { display: none; }

	/* ⚠ 上（1240行あたり）に `body.ny-pc.ny-page-data main > div.px-5 > img { width: 440px }`
	     があり詳細度(0,3,3)。`.ny-datapanel__pc`(0,3,2)では勝てないので、
	     同じ形＋クラスで書いて上書きする（440pxのままだと横長パネルが小さく出る） */
	body.ny-pc.ny-page-data main > div.px-5 > img.ny-datapanel__pc {
		display: block;
		width: 100%;
		max-width: 1080px;
		height: auto;
		margin-inline: auto;
		padding-bottom: 0;
	}

	/* パネルの注釈は右下＝パネルと同じ1080pxの幅で右寄せ。
	   パネルが持っていた下の50pxは注釈の下に移す（間隔は元のまま） */
	body.ny-pc.ny-page-data main > div.px-5 > p.ny-datapanel__note {
		display: block;
		max-width: 1080px;
		margin: 8px auto 50px;
		text-align: right;
		font-size: 14px;
		line-height: 1.6;
	}
}

/* ==========================================================================
   職種詳細：教育・研修制度【2026-09-02 米倉さん支給の内容】
   --------------------------------------------------------------------------
   見出しとリードはセンター揃え、白いカード4枚を2列。
   ⚠ センター揃えは text-align だけでなく margin-inline: auto も要る
     （箱が行長で左に置かれるため。/data/ で踏んだのと同じ罠）
   ========================================================================== */

.ny-trainlist {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ny-trainlist > li {
	border: 2px solid #282828;
	border-radius: 12px;
	background: #fff;
	padding: 18px 16px;
}

.ny-trainlist__ttl {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.6;
	margin-bottom: 8px;
}

.ny-trainlist__txt {
	font-size: 14px;
	line-height: 1.7;
	letter-spacing: 0.04em;
}

@media (min-width: 481px) {
	body.ny-pc.single-job .ny-edu--training > div,
	body.ny-pc.single-job .ny-edu--training > p {
		text-align: center;
		margin-inline: auto;
	}

	body.ny-pc.single-job .ny-edu--training > p {
		max-width: var(--ny-read);
		margin-bottom: 40px;
	}

	body.ny-pc.single-job .ny-trainlist {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}

	body.ny-pc.single-job .ny-trainlist > li {
		padding: 24px;
	}

	body.ny-pc.single-job .ny-trainlist__ttl { font-size: 17px; }
	body.ny-pc.single-job .ny-trainlist__txt { font-size: 15px; }
}