/*
 * header-footer.css
 * サイトの外枠（企業/採用共通・全ページ）: ヘッダー・All menuオーバーレイ・フッター。記述順は
 * header.php / footer.php のDOM順に合わせる。
 * 目次: スキップリンク / ヘッダー（全体・ロゴ・ナビ・右側アクション）/ All menuオーバーレイ /
 * フッター / レスポンシブ
 */

/*
 * ---- スキップリンク ----
 * キーボード利用者が本文へ直接ジャンプできるようにする（WCAG 2.4.1）。普段は画面外、
 * フォーカス時だけ表示。
 */
.c-skip-link {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3000;
	padding: 0.75em 1.5em;
	text-decoration: none;
	transform: translateY(-100%);
	transition: transform 0.2s ease;
}

.c-skip-link:focus {
	transform: translateY(0);
}

/* ============================================================
* ヘッダー
* ============================================================ */

/*
 * ---- ヘッダー全体 ----
 * 配色は --header-bg / --header-fg の2トークンに集約する（内部の要素は色を直書きしない。SVGは
 * currentColor で追随）。ゾーンは body の header-{ゾーン} クラスで決まる（functions.php の
 * seki_thermal_theme_header_zone()）。
 * スクロール連動は header-scroll.js がクラスを付け外しする:
 * .is-hidden（200px超で下スクロール時に隠す）/ .is-scrolled（100px超。高さ縮小は未接続、
 * 下の該当節を参照）。z-index は All menu(2000)より低くする。
 */
.c-site-header {
	/* 既定は企業サイト（header-corporate）と Welcart系（header-welcart）の配色. */
	--header-bg: var(--color-corporate-heading);
	--header-fg: var(--color-ivory);

	color: var(--header-fg);

	/*
	 * 【position を持たせてはいけない】素のラッパーなので、position / transform / opacity / filter
	 * などスタッキングコンテキストを作る指定を足さないこと。足すと、ロゴ・ナビの mix-blend-mode
	 * が背景と混色できず、自動反転が壊れる（詳細は header.php のヘッダー直前のコメント）。
	 */
}

/*
 * ---- ヘッダーの3レイヤー ----
 * ロゴ / ナビ / バーは入れ子ではなく兄弟で、各自 position: fixed
 * で画面上部に貼り付く（上記の制約のため）。全ページ fixed 統一のため、本文側は --header-height
 * ぶんの補填が要る（style.css）。
 */
.c-site-header__bar,
.c-site-header__logo,
.c-site-header__nav {
	position: fixed;
	top: 0;
	transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.c-site-header__bar {
	left: 0;
	right: 0;
	z-index: 500;
	background: var(--header-bg);
	display: flex;
	align-items: center;
	justify-content: flex-end;
	/*
	 * 縦の余白はトークン経由（スクロール後に縮める。下の .is-scrolled 参照）。横は縮めないので
	 * padding をまとめず分けている。
	 */
	padding-block: 0;
	padding-inline: 0;
}

/*
 * ロゴ・ナビはバー(z-index:
 * 500)より上に置く（透過でないページではバーの不透明な背景の上に載る必要があるため）。
 * 高さをバーと揃えておくと、.is-hidden の translateY(-100%) が3レイヤーとも同じ距離だけ動く。
 */
.c-site-header__logo,
.c-site-header__nav {
	z-index: 501;
	height: var(--header-height, auto);
	display: flex;
	align-items: center;
}

.c-site-header__logo {
	left: clamp(0.625rem, 0.25rem + 1.67vw, 1.5rem);
}

/*
 * ナビは画面幅いっぱいに敷いて右寄せし、バー内アクション幅（--header-actions-w、header-scroll.js
 * が実測）ぶん右を空ける。透明な帯がクリックを奪わないよう pointer-events で穴を空ける。
 */
.c-site-header__nav {
	left: 0;
	right: 0;
	justify-content: flex-end;
	padding-inline-end: var(--header-actions-w, 0px);
	pointer-events: none;
}

.c-site-header__nav-list a {
	pointer-events: auto;
}

.c-site-header.is-hidden .c-site-header__bar,
.c-site-header.is-hidden .c-site-header__logo,
.c-site-header.is-hidden .c-site-header__nav {
	transform: translateY(-100%);
}

/*
 * ---- ゾーン別の配色 ----
 * header-corporate / header-welcart は上の既定値をそのまま使う。
 */
.header-crosspile .c-site-header {
	/* クロスパイルは背景色のみ差し替え、文字色は企業サイトと同じ. */
	--header-bg: var(--color-crosspile-header);
}

.header-recruit .c-site-header {
	--header-bg: var(--color-white);
	--header-fg: var(--color-recruit-accent);
}

/*
 * ---- 透過（MVに重ねる）----
 * body.header-overlay のページだけ（判定は seki_thermal_theme_header_is_overlay()）。
 * 背景は常に透明のままで、文字色だけが下のコンテンツに応じて自動反転する（下記）。本文の
 * padding-top 補填は外れ、MVが画面最上部から始まる。
 */
.header-overlay .c-site-header__bar {
	background: transparent;
}

/*
 * ---- 透過ページの文字色は自動コントラスト（mix-blend-mode）----
 * 色は白固定＋difference 合成。ブレンドは fixed にしたレイヤー自身（.c-site-header__logo / __nav）
 * に掛ける（中の要素に掛けても、混色相手が透明なレイヤー内部だけになり効かない）。All
 * menu・CTA・アイコンは自前の塗り背景があるため、.c-site-header__bar 側に置いて対象外にしている。
 */
.header-overlay .c-site-header__logo,
.header-overlay .c-site-header__nav {
	color: #fff;
}

/*
 * ---- ロゴとナビでブレンドの掛け方を分ける ----
 * ナビは常にブレンド。ロゴはMVの上では白のまま出し、
 * MVを抜けてからブレンドする（MVの上で反転すると社名ロゴが意図しない配色になるため）。
 */
.header-overlay .c-site-header__nav {
	mix-blend-mode: difference;
}

/*
 * .is-past-hero は header-scroll.js が付ける（heroの下端がヘッダー高さより上に来たか。
 * 固定pxではない）。切り替わる位置＝ヘッダーがMVからはみ出す位置なので、
 * 白い本文の上に白ロゴが出る隙間は生じない。
 */
.header-overlay .c-site-header.is-past-hero .c-site-header__logo {
	mix-blend-mode: difference;
}

/*
 * 中の文字はレイヤーから白を継承する（個別に --header-fg を持つと、
 * 採用サイトの青などゾーンの色が残り、白基準の反転にならない）。
 */
.header-overlay .c-site-header__logo a,
.header-overlay .c-site-header__nav-list a,
.header-overlay .c-site-header__nav-en {
	color: inherit;
}

/*
 * ---- スクロール後のヘッダー高さ縮小 ----
 * 縦余白を詰める方式（高さは中身で決まるため直接指定しない）。値は暫定。
 * 【未接続】--header-pad-block を消費している箇所が無く、実際には縮まない。有効にするなら
 * .c-site-header__bar の padding-block で受けること。
 */
.c-site-header.is-scrolled {
	--header-pad-block: 0.375rem;
}

/* ---- ロゴ ---- */
.c-site-header__logo a {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--header-fg);
	text-decoration: none;
	font-weight: bold;
	font-size: 1.1rem;

	.logoIcn {
		width: clamp(5.875rem, 1.063rem + 21.39vw, 14.75rem);
		height: auto;
	}
}

/* ---- グローバルナビ ---- */
/*
 * 中身は wp_nav_menu() の <ul><li><a>。カレント表示は <li> の WordPress
 * 標準クラス（.current-menu-item 等）を使ってここに追記する。
 */
.c-site-header__nav-list {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	list-style: none;
	margin: 0 3px;
	padding: 0;
	font-size: 0.875rem;
	justify-content: flex-end;
	margin-inline-end: 1.5rem;
}

.c-site-header__nav-list a {
	color: var(--header-fg);
	text-decoration: none;
	display: block;
	width: 100%;
	height: 100%;
	text-align: center;
	font-weight: 600;
}

/*
 * 日本語タイトルの下の英語表記（例: 会社案内 / Company）。<span> は functions.php の
 * seki_thermal_theme_nav_menu_item_english() が SCF から動的生成する（未入力なら出力されない）。
 * 見出しの英字ラベル .c-section-heading__en とは別物なので共通化していない（揃えるなら style.css
 * の :root にトークンを足す）。
 */
.c-site-header__nav-en {
	display: block;
	font-family: var(--font-en);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.2;
	margin-top: 0.2em;
	color: var(--header-fg);
	/* 表示は常に大文字。管理画面で小文字・先頭大文字で入力されても表示が揃う. */
	text-transform: uppercase;
}

/* ---- 右側アクション（会員/カートアイコン・CTAボタン・All menu） ---- */
.c-site-header__actions {
	display: flex;
}

.c-site-header__icon {
	margin-inline: 0.2em;
	color: var(--header-fg);
	font-size: 1.1rem;
	position: relative;
	align-self: center;
	display: grid;
	place-items: center;
	width: clamp(1.5rem, 0.546rem + 3.05vw, 40px);
	background-color: var(--color-corporate-heading);
	border-radius: 50%;
	aspect-ratio: 1;
	text-decoration: none;

	svg {
		width: clamp(10px, 0.432rem + 1.09vw, 20px);
		height: auto;
		aspect-ratio: 1 /1;
	}
}

.c-site-header__cart-count {
	position: absolute;
	top: clamp(0rem, -0.596rem + 1.91vw, 10px);
	right: clamp(-2px, -0.358rem + 1.15vw, 6px);
	background: var(--color-corporate-heading);
	color: var(--header-fg);
	font-size: 7px;
	font-weight: bold;
	border-radius: 50%;
	width: clamp(10px, 0.386rem + 1.02vw, 14px);
	height: clamp(10px, 0.386rem + 1.02vw, 14px);
	display: grid;
	place-items: center;
}

/*
 * 背景色・角丸・文字色は .c-button（components/button.css）が持つ（header.php で class="c-button
 * c-site-header__cta" と併用）。ここにはヘッダー内での差分だけを書く。色を変えたい場合は
 * button.css か、--color-accent（style.css）を見ること。
 */
.c-site-header__cta {
	font-size: clamp(7.7px, -0.167rem + 1.39vw, 14px);
}

a.c-button.c-site-header__cta {
	background-color: var(--color-accent);
	padding-block-start: 0.5em;
	margin-inline-start: 10px;
	display: grid;
	justify-items: center;
	font-weight: 600;
	font-size: clamp(7.7px, -0.167rem + 1.39vw, 14px);
	transition: 0.3s linear;
	&:hover {
		background-color: var(--color-white);
		color:var(--color-accent);
	}
	.mailIcn {
		width: clamp(1.25rem, -0.417rem + 3.47vw, 35px);
		height: auto;
		aspect-ratio: 18/20;
		align-self: center;
	}
}

/* 採用サイト用 */
.site-recruit a.c-button.c-site-header__cta {
	align-items: end;
/*
	&:has(svg){
			padding-block-end:0.65em;
	} */
	svg{
		width:clamp(26px, -1.065rem + 5.6vw, 40px);
	}
	&:hover{
		border-color: var(--color-accent);
	}
}
/*
 * ENTRYボタンの紙飛行機。ホバーで浮いて揺れ（飛ぶ準備）、クリックで右上へ飛び去る
 * （.is-flying は assets/js/entry-plane.js が付け、アニメーションの長さ分だけ移動を待たせる）。
 */
@keyframes c-entry-plane-ready {
	0%,
	100% {
		translate: 0 -2px;
		rotate: 0deg;
	}

	50% {
		translate: 0 -5px;
		rotate: -6deg;
	}
}

@keyframes c-entry-plane-fly {
	0% {
		translate: 0 0;
		rotate: 0deg;
		scale: 1;
		opacity: 1;
	}

	25% {
		translate: -4px 3px;
		rotate: 8deg;
		scale: 1;
		opacity: 1;
	}

	100% {
		translate: 70px -60px;
		rotate: -20deg;
		scale: 0.6;
		opacity: 0;
	}
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.site-recruit a.c-button.c-site-header__cta:hover svg {
		animation: c-entry-plane-ready 1.2s ease-in-out infinite;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.site-recruit a.c-button.c-site-header__cta.is-flying svg {
		animation: c-entry-plane-fly 0.45s cubic-bezier(0.55, 0, 0.75, 0.3) forwards;
	}
}

@media(1024px >= width){
/* 採用サイト用 */
.site-recruit a.c-button.c-site-header__cta {
	&:has(svg){
			padding-block-end:clamp(5px, -1.55rem + 3.88vw, 14px);
	}
}
}
/*
 * All menuトリガー／閉じるボタン／Contactボタンの高さ。.c-all-menu__body
 * の上パディングが閉じるボタンの高さに追従できるよう、別ツリーの共通の祖先 :root に置く。
 */
:root {
	--all-menu-btn-h: clamp(3rem, -1.333rem + 9.03vw, 5.438rem);
}

:where(.c-site-header__all-menu,
	.c-all-menu__close, a.c-button.c-site-header__cta) {
	display: grid;
	/*
	 * grid-template-rows: auto 1fr; … 1行目(テキスト)は内容高さに固定し、
	 * 2行目(アイコン)に残りを割り当てる。アイコンの実サイズがボタンごとに違っても、テキスト行の位置が
	 * Contact / All menu / 閉じるボタンで揃う。
	 */
	grid-template-rows: auto 1fr;
	aspect-ratio: 5.9 / 5.4;
	max-height: var(--all-menu-btn-h);
	width: clamp(3.063rem, -1.382rem + 9.26vw, 89px);
	font-family: var(--font-en);
	font-weight: 600;
	font-size: clamp(7px, -0.167rem + 1.39vw, 14px);
	cursor: pointer;
}

/*
 * 開閉（.is-open）は all-menu.js、アイコンはCSSのみの .c-hamburger。
 * 閉じるボタン(.c-all-menu__close)も同じセレクタに合流させている（同じ見た目の枠のため）。
 * **ボタンの見た目を変えたい時はこのルールだけ編集すればよい。**
 */

.c-site-header__all-menu,
.c-all-menu__close {
	/*
	 * 配色は企業/採用で固定（背景 --color-corporate-heading、文字・枠線 ivory）。
	 * 採用サイトの白いヘッダー上でもコントラストが保たれる。閉じるボタンには背景が重複するが、
	 * 1ルールで揃える設計を維持している。
	 */
	background-color: var(--color-corporate-heading);
	--btn-fg: var(--color-ivory);
	border: 1px solid var(--btn-fg);
	color: var(--btn-fg);
	/* Contact（a.c-button.c-site-header__cta）と同じ量だけテキスト行を下げ、位置を揃える. */
	padding-block-start: 0.5em;
}

/*
 * トリガーボタンと閉じるボタン両方の中の「All menu」ラベル。別々のブロックで共用するので BEM
 * の要素ではなく独立ブロック名。書体・サイズはボタン側から継承する。
 */
.c-all-menu-label {
	display: block;
	white-space: nowrap;
	letter-spacing: 0.02em;
	line-height: 1;
	padding-block-start: 0.5em;
	align-self: end;
}

/*
* ハンバーガー⇄クロス アニメーション（CSSのみ、SVGは使わない）。
* 3本線を絶対配置で重ね、.is-open時に上下の線を回転させて交差させ、中央の線は透明にする。
*/
.c-hamburger {
	/*
	 * 3本線の縦の広がり（--c-hamburger-h）はレスポンシブ。line2/line3 の top と .is-open
	 * 時の交差位置はこの変数から calc() で算出するため、ここを直すだけで追従する。
	 */
	--c-hamburger-h: clamp(14px, 4px + 1.8vw, 22px);
	position: relative;
	display: block;
	width: clamp(1.625rem, -0.708rem + 4.86vw, 2.938rem);
	height: var(--c-hamburger-h);
	justify-self: center;
	align-self: center;
}

.c-hamburger__line {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
	transition: transform 0.3s ease, opacity 0.2s ease, top 0.3s ease;
}

.c-hamburger__line:nth-child(1) {
	top: 0;
}

.c-hamburger__line:nth-child(2) {
	top: calc(var(--c-hamburger-h) / 2 - 1px);
}

.c-hamburger__line:nth-child(3) {
	top: calc(var(--c-hamburger-h) - 2px);
}

.c-site-header__all-menu.is-open .c-hamburger__line:nth-child(1) {
	top: calc(var(--c-hamburger-h) / 2 - 1px);
	transform: rotate(45deg);
}

.c-site-header__all-menu.is-open .c-hamburger__line:nth-child(2) {
	opacity: 0;
}

.c-site-header__all-menu.is-open .c-hamburger__line:nth-child(3) {
	top: calc(var(--c-hamburger-h) / 2 - 1px);
	transform: rotate(-45deg);
}

/* ============================================================
* All menuオーバーレイ
* ============================================================ */
/*
 * ヘッダー右上「All menu」で開閉する全画面オーバーレイ（企業/採用共通）。マークアップは
 * header.php の </header> 直後、開閉は all-menu.js。
 * z-index: Welcartの読み込みオーバーレイ(#welcart-overlay)が最大値(2147483647)を使うため、Popover
 * APIのトップレイヤーは使わず通常のz-indexにし、それより確実に低くする。
 * ヘッダー(500)より高くして、開いている間はヘッダーを覆う。
 */

/* ---- オーバーレイ全体 ---- */
/*
 * scrollbar-gutter の溝を計算で埋める方式（width: calc(...) / right: calc(-1 *
 * var(--scrollbar-gutter))）は採らない。.c-all-menu__panel まで巻き添えでズレ、
 * 閉じるボタンが画面外に切れたため（Safari・Chrome）。単純な inset: 0 にしている。
 */
.c-all-menu {
	position: fixed;
	inset: 0;
	z-index: 2000;
	visibility: hidden;
	pointer-events: none;
}

.c-all-menu.is-open {
	visibility: visible;
	pointer-events: auto;
}

/* ---- 背景（クリックで閉じる） ---- */
.c-all-menu__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(2px);
	border: none;
	margin: 0;
	padding: 0;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.25s ease;
}

.c-all-menu.is-open .c-all-menu__backdrop {
	opacity: 1;
}

/* ---- パネル ---- */
/*
 * パネル自身はスクロールさせず、スクロールは .c-all-menu__body だけで起こす（閉じるボタンを
 * absolute で固定でき、バーもパネル内側に入って1本に見える）。overflow-y は hidden ではなく
 * clip（hidden はスクロール可能な箱を作るため）。
 */
.c-all-menu__panel {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 694px;
	height: 100dvh;
	overflow-y: clip;
	background: var(--color-corporate-heading);
	color: var(--color-white);
	padding-inline-end: 1.5rem;
	opacity: 0;
	transition: opacity 0.3s ease;
}


/*
 * 実際のスクロール担当（閉じるボタン以外の中身を括る）。min-height: 0 は必須（無いと flex
 * アイテムが縮まずスクロールしない）。中身の高さはメニュー項目数で変わるため、
 * 高さのメディアクエリで出し分けず overflow-y: auto のままにする。
 */
.c-all-menu__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	width: 100%;
	max-width: 524px;
	margin-inline: auto;
	/*
	 * 閉じるボタン(.c-all-menu__close、position: absolute; top:0; right:0;)が --all-menu-btn-h
	 * の高さで右上に重なるため、同じ変数を基準に上パディングを確保して、
	 * 中身の先頭（.c-all-menu__back）が隠れないようにする。+1remはボタンとの間隔（実機で調整可）。
	 */
	padding-top: calc(var(--all-menu-btn-h) + 1rem);
	/* 端まで来たスクロールが背後のページへ連鎖するのを防ぐ. */
	overscroll-behavior: contain;
}

.c-all-menu.is-open .c-all-menu__panel {
	opacity: 1;
}



/* ---- 閉じるボタン ---- */
/*
 * 見た目は .c-site-header__all-menu と共通のルールが持つ。ここには「パネル右上に固定する」
 * 位置の差分だけ（パネルが position: absolute なので、その基準で absolute 固定できる）。
 */
.c-all-menu__close {
	position: absolute;
	/* スクロールする中身の上に必ず重ねる. */
	z-index: 1;
	top: 0;
	right: 0;
}

/* 静止した×（開閉アニメーションはしない、ヘッダー側の .c-hamburger とは別物）。SVGは使わずCSSのみ。 */
/*
 * .c-hamburger と交差位置・サイズを揃える。幅は同じ clamp() を共有し、高さも --c-hamburger-h
 * と同じ値を複製している（別要素で変数を参照できないため。変えるときは両方直す）。
 * 角度は45度ではなく24度/-25度の浅い交差（デザイン上の好み）。
 */
.c-all-menu__close-icon {
	position: relative;
	display: block;
	width: clamp(1.625rem, -0.708rem + 4.86vw, 2.938rem);
	height: clamp(14px, 4px + 1.8vw, 22px);
	justify-self: center;
	align-self: center;
}

.c-all-menu__close-icon::before,
.c-all-menu__close-icon::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
}

.c-all-menu__close-icon::before {
	transform: translateY(-50%) rotate(24deg);
}

.c-all-menu__close-icon::after {
	transform: translateY(-50%) rotate(-25deg);
}

/* ---- 中身（トップへもどる・グループ・アクション・ポリシー） ---- */
.c-all-menu__back {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	color: var(--color-white);
	text-decoration: none;
	font-weight: bold;
	margin-block-end: 72px;
}

.c-all-menu__group {
	margin: 0 0 2em;
}

.c-all-menu__group-title {
	display: flex;
	align-items: center;
	gap: 1rem;
	font-size: 1.25rem;
	font-weight: bold;
	line-height: 1.4;
	margin: 0 0 1em;

	a {
		text-decoration: none;
	}
}

.c-all-menu__group-title::before {
	content: '';
	display: inline-block;
	width: 2rem;
	height: 1px;
	background: currentColor;
	flex: none;
}

.c-all-menu__group-links {
	list-style: none;
	margin: 0;
	padding: 0;
	column-count: 2;
	column-gap: 1.25em;
	font-size: 0.875rem;
	font-weight: bold;
	width: fit-content;

	li {
		break-inside: avoid;
		margin: 0 0 1em;
	}

	a {
		color: var(--color-white);
		text-decoration: none;
		display: block;
		width: 100%;
		min-width: 7em;
		height: 100%;
	}
}

.c-all-menu__group-links,
.c-all-menu__actions {
	margin-inline-start: 3rem;
}





/* .c-button は白背景+アクセントカラーの枠線が既定だが、ここでは紺背景の上に置くため
白抜き（透明背景+白枠+白文字）の見た目をそのまま流用する（button.cssの既定スタイル）. */
.c-all-menu__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	margin-block: 56px 98px;

	.c-button {
		flex: 1 1 auto;
		text-align: center;
		width: 200px
	}
}

.c-all-menu__divider {
	border: none;
	border-top: 1px solid var(--color-ivory);
	margin-block: 100px 22px;
}

.c-all-menu__policy-list {
	list-style: none;
	margin-block: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 3em;
	font-size: 0.75rem;

	a {
		color: var(--color-ivory);
		text-decoration: none;
		display: block;
	}
}
/* SEサイズ調整 */
@media(720px >= width){
	.c-all-menu__panel {
	padding-inline:1.5rem;
	}
	.c-all-menu__body {
		padding-top: calc((var(--all-menu-btn-h) / 2) + 1rem);
	}
	.c-all-menu__group{
		margin-block-end:1rem;
	}
	.c-all-menu__actions{
		margin-block: 1.5rem 3rem;
	}
	.c-all-menu__back {
		margin-block-end: 3rem;
	}
	.c-all-menu__divider{
		margin-block:3.5rem 0.5rem
	}
	.c-all-menu.is-open .c-button:not( .wp-block-button ){
		padding-block:0.5rem
	}
	.c-all-menu__policy{
		padding-inline-end: 0.5rem;
	}
}

/* ============================================================
* フッター
* ============================================================ */
/* ---- フッター全体 ---- */
.c-site-footer {
	background: var(--color-corporate-heading);
	color: var(--color-ivory);
	padding-block: 0 0.5em;
}

/* ---- フッター直上の会社情報帯 ---- */
.c-site-footer__company {
	background: var(--color-ivory);
	color: var(--color-text);
	text-align: center;
	padding-block: clamp(4.063rem, 1.618rem + 5.09vw, 5.438rem) clamp(4.063rem, 2.84rem + 2.55vw, 4.75rem);
	font-weight: 700;
	--ad-hi: clamp(1.125rem, -1.305rem + 5.06vw, 3.125rem);

	address {
		font-style: normal;
		display: grid;
		gap: var(--ad-hi);
	}

	svg {
		margin-inline: auto;width:clamp(19.125rem, 5.236rem + 26.85vw, 25.375rem);height: auto;aspect-ratio: 1 / 0.093;
	}
}

.c-site-footer__company-lead {
	letter-spacing: 0.05em;
	font-size:clamp(16px, 0.392rem + 1.27vw, 1.5rem)
}

.c-site-footer__company-cert {
	margin-inline: auto;
	width: 100%;
	height: auto;
	max-width: 150px;
	display: block;
	margin-block-start: calc(var(--ad-hi) * 1.5);
}

/* リクルートと企業で表示が異なるブロック */
/* 採用用 */
:where(.site-recruit .c-site-contact) {
	color:var(--color-white);
	width: 100%;

	.c-site-contact__inner{
		height: clamp(39rem, 37.785rem + 2.53vw, 40rem);
		background-image: url(../../images/recruit_pattern02.webp);
		--radius-r:clamp(20rem, -13.397rem + 106.87vw, 55rem);
		border-top-left-radius: var(--radius-r);
		border-top-right-radius: var(--radius-r);
		transition: all 0.5s linear 0.25s;
		text-align: center;
		padding-block: 2em;
	}
	 .c-site-contact__inner.is-in-view{
			--radius-r:clamp(3.1rem, -0.728rem + 7.97vw, 6.25rem);
		border-top-left-radius: var(--radius-r);
		border-top-right-radius: var(--radius-r);
		}
}
/* 採用：仕事を知る、　ページ下部表示対応 */
.l-main--work,.l-main--tour {
	& + .c-site-contact {
		background-color: var(--color-recruit-accent-sub);
		text-align: center;
	}
}
.c-site-contact__lead{
	padding-block: 2em;
}
/* 企業用 */
:where(.site-corporate .c-site-contact) {
	position: relative;
	background-image: url(../../images/contact_footer-bg.webp);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 40% bottom;
	width: 100%;
	display: grid;
	align-items: end;
	justify-content: end;
	padding-block: clamp(11.25rem, 18.865rem + -8.7vw, 15.688rem) clamp(4.25rem, -4.256rem + 17.72vw, 11.25rem);
	color: var(--color-white);
	font-size: clamp(16px, 0.392rem + 1.27vw, 1.5rem);

	.c-site-contact__bg {
		position: relative;
		z-index: 2;
		width: clamp(21.375rem, -52.536rem + 151.9vw, 80.375rem);
		padding: clamp(2.8rem, 0.127rem + 5.57vw, 5rem) clamp(2.8rem, 0.127rem + 5.57vw, 5rem) clamp(2.8rem, -0.937rem + 7.78vw, 5.875rem);
		display: grid;
		gap: 2em clamp(1rem, -1.723rem + 4.26vw, 2rem);
		padding-inline: clamp(2.1rem, -3.663rem + 12.51vw, 7.28rem);

		&::before {
			content: "";
			position: absolute;
			width: 100%;
			height: 100%;
			top: clamp(1rem, -0.215rem + 2.53vw, 2rem);
			left: calc(clamp(1.1rem, 0.249rem + 1.77vw, 1.8rem) * -1);
			background-color: var(--color-crosspile-blue-1);
			z-index: -2;
		}

		&::after {
			content: "";
			position: absolute;
			inset: 0;
			background-color: var(--color-navy);
			z-index: -1;
		}
	}

	.c-site-contact__message {
		margin-block-start: clamp(1.75rem, -2.078rem + 7.97vw, 4.2rem);
	}

	.c-site-contact__en {
		font-size: clamp(36px, -0.723rem + 4.26vw, 3rem);
		font-weight: 600;
		letter-spacing: 0.051em;
		line-height: 0.9;
		margin-block-end:clamp(1rem, 0.076rem + 1.92vw, 1.76rem);
	}
		.c-site-contact__en + .l_underLine{font-weight: 700;}

	.c-site-contact__actions {
		display: grid;
		row-gap: 1.25rem;

		a {
			text-decoration: none;
			display: block;
			justify-self: center;
			&:nth-child(1){
				max-width: 403px;
				min-width: 270px;
				font-size: clamp(1rem, 0.392rem + 1.27vw, 1.5rem);
				border: 2px solid transparent;
				background-color: var(--color-accent);
				text-align: center;
				padding: 0.65em 2em;
				border-radius: 2.42rem;
				transition: 0.3s linear;
				font-weight: 600;
			}
			&:hover:nth-child(1){
				background-color: var(--color-white);
				border-color: var(--color-accent);
				color:var(--color-accent);
				font-weight: 500;
			}
		}
		a[href^="tel"]{
			display: flex;
			align-items:center;
			gap:0.25em;
			font-size: clamp(1.625rem, 0.41rem + 2.53vw, 2.625rem);
			line-height: 0.9;
			letter-spacing: 0.1rem;
			font-weight: 500;
			svg{width:clamp(1.5rem, 0.589rem + 1.9vw, 2.25rem);aspect-ratio: 1/1;}
		}
	}
}
@media (768px >=width) {
	:where(.site-corporate .c-site-contact) {
		.c-site-contact__bg {
			row-gap: 2.75rem;
		}

		.c-site-contact__actions {
			row-gap: 1.75rem;
		}
	}
}
/*
 * 上段の横並び。直下の子は footer.php の3ブロック: __top（トップ・お問い合わせ）/
 * __groups（会社情報・採用情報）/ __crosspile（クロスパイル誘導）。
 */
.c-site-footer__inner {
	padding-block-start: clamp(3.563rem, 0.525rem + 6.33vw, 6.063rem);
	display: grid;
	align-items: start;
	gap: 4rem 4.5rem;
	margin-block-end: clamp(3.688rem, 0.021rem + 7.64vw, 5.75rem);


	@media (1024px > width) {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * style.css の共有ルールが1140px未満で margin-inline を auto → 1rem に切り替えると、width:100%
	 * のフッターが「100% + 左右1rem」ぶん右にはみ出す。親 <footer> は左右パディングを持たないので、
	 * その1remをここで打ち消す。
	 */
	@media (1140px > width) {
		margin-inline: 0;
	}
}

:where(.c-site-footer__top, .c-site-footer-title, .c-site-footer__group-links) {
	margin-block-end: 2.25rem;
	/* ★行間調整 */
}

/*
 * 【要調整】.c-site-footer-title は footer.php の2箇所（トップリンクとグループ見出しの <h2>）
 * で共有している。ここを直すと両方に影響するので、片方だけ変えるならクラスを分けること。
 */
.c-site-footer-title {
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 2.25rem;
	display: flex;
	gap: 10px;
	align-items: center;

	&::before {
		content: "";
		display: inline-block;
		width: 2rem;
		height: 1px;
		background-color: currentColor;
	}
}

/* ---- 上: トップ・お問い合わせ ---- */
.c-site-footer__top {
	display: grid;
	column-gap: 1rem;
	margin-block-end: 1rem;

	/* 行間調整 */
	a {
		display: block;
	}

	.c-site-footer-title {
		display: flex;
	}
}

:where(.c-site-footer-title, .c-site-footer__contact) {
	color: var(--color-ivory);
	text-decoration: none;
}

/* 【注意】.c-button と併用。ここは「枠線＋背景透明」の打ち消し差分のみ. */
.c-site-footer__contact {
	border: 1px solid var(--color-ivory);
	background: transparent;
	text-align: center;
	line-height: 1;
	transition: 0.3s ease-out;
	&:hover{
		border-color: transparent;
		background-color: var(--color-ivory);
		color:var(--color-corporate-heading);
	}
}

/* ---- 上段: ナビグループ（会社情報 / 採用情報） ---- */
/*
 * 構造は「グループ（見出し + リンク一覧）」が縦に並ぶ。グループ自体は1列で、
 * 2列になっているのは各グループ内のリンク（.c-site-footer__group-links）の方。
 * グループを横2列にしたい場合は grid-template-columns: repeat( 2, 1fr ); を足す。
 */
.c-site-footer__groups {
	display: grid;
	gap: 0.5rem 1.5rem;
	font-size: 0.875rem;
}

/*
 * 縦並びに2列（1,2,3が左列→4,5,6が右列）。
 * grid-auto-flow:column + 行数指定でも実現できるが、行数がメニュー項目数（管理画面で増減）
 * に依存するため、項目数を数えずに列を作れる column-count を採用している。
 * 【落とし穴】以前ここを display:grid + grid-template-columns にしていたことがあり、
 * その場合は grid-auto-flow の既定値 row のせいで行優先（1,2 / 3,4 / 5,6）になってしまう。
 */
.c-site-footer__group-links {
	list-style: none;
	width: fit-content;
	margin-inline-start: 0;
	padding-inline-start: 1.9rem;
	column-count: 2;
	column-gap: 1.5rem;

	li {
		break-inside: avoid;
	}

	/*
	 * ホバーでテキストが右へスライドする演出。.c-underline-reveal は padding
	 * で広げたこのリンクだと下線が文字幅より長く見えるため不採用(translateX は幅に依存しない)。
	 */
	a {
		color: var(--color-ivory);
		text-decoration: none;
		padding-inline: 1rem;
		font-size: 0.875rem;
		font-weight: 550;
		display: block;
		line-height: 2.5;
		min-width: 8em;
		transition: transform 0.2s ease;

		&:hover {
			transform: translateX(0.25em);
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.c-site-footer__group-links a {
		transition: none;
	}
}

/* ---- クロスパイル誘導バナー ---- */
.c-site-footer__crosspile {
	a {
		display: block;
		text-decoration: none;

		img {
			width: auto;
			height: auto;
			max-width: 100%;
		}
	}
}

/* ---- 下段: 著作権・ポリシーリンク ---- */
/*
* 著作権表示の文言はテーマではなく Welcart 管理画面
* 「Welcart Shop設定 > 著作権表示」の値（usces_copyright()）。
*/
.c-site-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.2);

	:where(p, a) {
		font-size: 0.75rem;
		font-weight: 500;
		line-height: 2;
		color: var(--color-ivory);
		text-align: center;
	}

	> div {
		max-width: 1400px;
		margin-inline: auto;
		margin-block-start: 1em;
		display: grid;
		row-gap: 1.75em;

		@media(1440px > width) {
			padding-inline: 1em;
		}
	}
}

.c-site-footer__policy-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	column-gap: 1em;
	grid-template-columns: repeat(3, auto);
	padding-inline: 2em;

	a {
		display: block;
		color: inherit;
		text-decoration: none;
	}
}

/* ============================================================
 * レスポンシブ
 *
 * 768px は style.css の html { font-size } の切替（スマホ15px）と揃えた値。
 * ============================================================ */

/* ---- ヘッダー: モバイル/タブレットはナビを非表示 ----
 * 〜1200pxではナビを隠し、ロゴと右側アクションだけにする（1200px超で復帰）。
 * ここだけ他の768px基準と別に1200pxを使う（ヘッダーナビ用の指定値）。 */
.c-site-header__nav {
	display: none;
}

@media (1024px < width) {
	.c-site-header__nav {
		display: flex;
	}
}

@media (768px < width) {
	.c-site-footer__bottom {
		> div {
			display: flex;
			justify-content: space-between;
			flex-direction: row-reverse;
		}
	}

	.c-site-footer__policy-list {
		padding-inline: unset;
	}

}

@media (1024px <=width) {
	.c-site-footer__inner {
		column-gap: unset;
		> .c-site-footer__top {
			grid-column: 1 / 2;
			width: 178px;
		}

		> .c-site-footer__groups {
			grid-column: 2 / 3;
			grid-template-columns: repeat(2, auto);
		}

		> .c-site-footer__crosspile {
			grid-column: 1 / 3;
		}
	}

	.site-corporate .c-site-contact {
		.c-site-contact__bg {
			grid-template-columns: repeat(2, minmax(0, 1fr));
			align-items: center
		}

		.c-site-contact__actions {
			row-gap:60px;
		}
	}
}
.entry-header,
.skuform {
	color: var(--color-corporate-heading);
	font-weight: 700;
	margin-block-end: 1rem;
}


.error404 .entry-header{
	.entry-title-en{display: block;justify-self: center;}
	h1.entry-title{
		margin-block-start: unset;
		font-size:18px;
	}
}
a.c-site-header__icon span.c-site-header__icon{display: unset;}