/*
Theme Name: Yamatai Manufacturer 2026
Author: knet
Description: 山泰製作所様サイトのテーマ　FSE対応
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 8.3
Version: 0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
/* ==========================================
Oswald セルフホスティング（プリロード対応）
========================================== */
/* latin-ext */
@font-face {
	font-family: 'Oswald';
	font-style: normal;
	font-weight: 200 700;
	font-display: block;
	src: url('assets/fonts/oswald-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
	font-family: 'Oswald';
	font-style: normal;
	font-weight: 200 700;
	font-display: block;
	src: url('assets/fonts/oswald-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@property --grad-start {
	syntax: '<color>';
	inherits: false;
	initial-value: oklch(66.693% 0.14274 235.625 / 0.683);
}

@property --grad-end {
	syntax: '<color>';
	inherits: false;
	initial-value: oklch(66.693% 0.14274 235.625 / 0.683);
}
/* ==========================================
ページ遷移
========================================== */
@view-transition {
	navigation: auto;
}

/* ==========================================
カスタムプロパティ
========================================== */
@property --100vw {
	syntax: "<length>";
	initial-value: 0;
	inherits: false;
}

:root {
	/* カラー */
	--color-corporate-primary: #003063;
	--color-recruit-primary: #002fa3;
	--color-recruit-secondary: #00123d;
	--color-text-white: #f6f6f6;
	--color-text-gray: #898989;
	--color-bg-dark: #1e1e1e;
	--color-bg-blue: #00a3ff;
	/* fluid typography */
	--minWidth: 320;
	--maxWidth: 1600;
	--100vw: 100vw;
	--font-size-min: 15px;
	/* 0.9375rem = 15px。:root内でremを使うと循環参照になるためpxで指定 */
	--font-size-max: 16px;
	/* 1rem = 16px。:root内でremを使うと循環参照になるためpxで指定 */
	--currentWidth: tan(atan2(var(--100vw), 1px));
	--x: clamp(0, calc((var(--currentWidth) - var(--minWidth)) / (var(--maxWidth) - var(--minWidth))), 1);
	--easeOutSine: sin(var(--x) * pi / 2);
	--fluid-font-size: clamp(var(--font-size-min), calc(var(--font-size-min) + var(--easeOutSine) * (var(--font-size-max) - var(--font-size-min))), var(--font-size-max));
	/* その他 */
	--admin-bar-height: 0px;
	--seisakusyo_yamatai_r-gradient: linear-gradient(90deg, #012371, #00a0f7);
}

/* ==========================================
リセット・基本設定
========================================== */
html {
	scroll-behavior: smooth;
	font-size: var(--fluid-font-size);
	scrollbar-gutter: stable;
	interpolate-size: allow-keywords;
}

body {
	font-family: var(--wp--preset--font-family--noto-sans-jp), var(--wp--preset--font-family--system-font);
	font-size: var(--fluid-font-size);
	font-optical-sizing: auto;
	font-weight: 400;
	line-height: 1.875;
	letter-spacing: 0;
	color: var(--wp--preset--color--ymf-text);
	padding: 0;
	margin: 0;
	overflow-x: clip;
	--header-height: 95px;
	/* 初期値（JSで上書き） */
	position: relative;
	font-feature-settings: "palt";
}

/* アンカーリンク スクロールオフセット
固定ヘッダー分 + 余白を確保
--header-height は scroll-behaviors.js で body に設定 */
[id] {
	scroll-margin-top: calc(var(--header-height) + 20px);
}

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* フォーム要素 - フォント継承・カーソル
リセット用途のため :where() で詳細度ゼロに保つ */
:where(input, button, textarea, select) {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
}

:where(button) {
	all: unset;
}

:where(button, label, select, summary, [role="button"]) {
	cursor: pointer;
}

:where(:disabled, label:has(> :disabled, + :disabled)) {
	cursor: not-allowed;
}

:where(textarea) {
	resize: block;
}

/* メディア要素 - ブロック化・レスポンシブ対応 */
:where(img, svg, video, canvas, audio, iframe, embed, object) {
	display: block;
}

:where(img, picture, svg, video) {
	max-inline-size: 100%;
	block-size: auto;
}

/* テキスト */
:where(p, h1, h2, h3, h4, h5, h6) {
	overflow-wrap: break-word;
	text-align: justify;
}

/* ==========================================
アクセシビリティ
========================================== */
.skip-link {
	position: absolute;
	top: -999px;
	left: -999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
	z-index: 9999;
}

.skip-link:focus {
	position: fixed;
	top: 10px;
	left: 10px;
	width: auto;
	height: auto;
	padding: 10px 20px;
	background-color: #000;
	color: #fff;
	text-decoration: none;
	border-radius: 4px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
	font-weight: bold;
	z-index: 9999;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto;
	clip-path: none;
	color: #21759b;
	display: block;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* ==========================================
WordPress標準クラス
========================================== */
.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.alignleft {
	float: left;
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {
	float: right;
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.alignwide {
	max-width: var(--wp--style--global--wide-size, 1400px);
	margin-left: auto;
	margin-right: auto;
}

/* 全幅表示画面 */
.alignfull {
	max-width: 100%;
	width: 100vw;
	margin-left: calc(50% - 50dvw);
	margin-right: calc(50% - 50dvw);
}

/* 全幅表示画面 100vw */
.widefull-block {
	width: 100vw;
	margin-left: calc(50% - 50dvw);
	margin-right: calc(50% - 50dvw);
}

/* ==========================================
タイポグラフィ
ベースfont-sizeのみ easeOutSine カーブで制御。
h1〜h6 は em で比率固定 → ベースに追従して自動スケール。
320px時: 1em=16px  /  1600px時: 1em=24px
========================================== */
/* h1: 2.5em → 40px〜60px */
:where(h1) {
	font-family: var(--wp--preset--font-family--noto-sans-jp), var(--wp--preset--font-family--system-font);
	font-size: 2.5em;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0;
}

/* h2: 2em → 32px〜48px */
:where(h2) {
	font-family: var(--wp--preset--font-family--noto-sans-jp), var(--wp--preset--font-family--system-font);
	font-size: 2em;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0;
}

/* h3: 1.5em → 24px〜36px */
:where(h3) {
	font-family: var(--wp--preset--font-family--noto-sans-jp), var(--wp--preset--font-family--system-font);
	font-size: 1.5em;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0;

	&[data-text] {
		font-size: clamp(1.25em, 0.934em + 0.65vw, 1.5em);
	}
}

/* h4: 1.25em → 20px〜30px */
:where(h4) {
	font-family: var(--wp--preset--font-family--noto-sans-jp), var(--wp--preset--font-family--system-font);
	font-size: 1.25em;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0;
}

/* h5: 1.125em → 18px〜27px */
:where(h5) {
	font-family: var(--wp--preset--font-family--noto-sans-jp), var(--wp--preset--font-family--system-font);
	font-size: 1.125em;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0;
}

/* h6: 1em → bodyと同サイズ */
:where(h6) {
	font-family: var(--wp--preset--font-family--noto-sans-jp), var(--wp--preset--font-family--system-font);
	font-size: 1em;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0;
}

:where(h1, h2, h3, h4, h5, h6, p) {
	&[data-text] {
		position: relative;

		&::before {
			content: attr(data-text);
			font-family: var(--wp--preset--font-family--oswald);
			text-box-trim: trim-both;
			text-box-edge: cap text;
			top: 0;
			left: 0;
			pointer-events: none;
			margin-block-end: 0.5em;
			display: block;
			line-height: 1.1;
			padding-block-start: 0.1em;
		}
	}
}

/* 英字ディスプレイ見出し: 3.5em → 56px〜84px */
:where(.hero-title, .top-heading) {
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 3.5em;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	text-box-trim: trim-start;
}

h3.header-title::before {
	content: attr(data-entitle);
	display: block;
	font-weight: 700;
	line-height: 1;
}

.leadcopy {
	font-size: clamp(1.5rem, 0.551rem + 1.94vw, 2.25rem);
	line-height: 1.6;
	margin-block: 1.8rem clamp(1.45rem, 0.058rem + 2.85vw, 2.55rem);
	font-weight: 700;

	/* スマホ用 */
	@media (width < 600px) {
		font-feature-settings: normal;
	}
}

/* 改行調整用のクラス　スマホ以上の時 */
@media (width > 600px) {
	.desktopnone {
		display: none;
	}
}

/* ==========================================
基本要素
========================================== */
.en-face {
	font-family: var(--wp--preset--font-family--oswald);
	line-height: 0.9;
}

@supports (text-box-edge: cap text) {
	.en-face {
		text-box-edge: cap text;
		text-box-trim: trim-both;
		line-height: 1.2;
	}
}

.seifjp {
	font-family: "Noto Serif JP", serif;
}

svg {
	line-height: 1;
}

:where(a, address, b, em, span, mark, strong, dd, dt, dl, li, table, caption, tr, th, td, input, button, textarea, select, summary, address) {
	font-size: inherit;
	font-family: inherit;
	font-style: normal;
	font-weight: inherit;
}

p:empty {
	display: none;
}

a {
	text-decoration: none;
	color: var(--wp--preset--color--ymf-text);
}

.wide-size_img,
.wide-size_img img {
	min-height: 600px;
	object-fit: cover;
	width: 100%;
	display: block;
}

.onepoint {
	margin-block-end: 1.225em;
	padding-block-end: 0.5em;
	border-bottom: 2px solid;
	border-image: linear-gradient(90deg, #012371 -6.98%, #00A0F7 100%) 1;

	&::before {
		content: "";
		display: inline-block;
		width: 2.25rem;
		height: 1.5rem;
		background: linear-gradient(90deg, #012371 -6.98%, #00A0F7 100%);
		clip-path: polygon(50% 0, 0 100%, 50% 100%, 100% 0);
		margin-inline-end: 0.25em;
	}
}

/* パンくず */
div.breadcrumbs {
	width: min(1100px, calc(100% - 3rem));
	margin-inline: auto;

	@media (768px < width < 1200px) {
		padding-inline: 1.5em;
		width: 100%;
		max-width: 1100px;
	}

	color: #A9A9A9;
	margin-block-start: 0.5em;

	a {
		color: inherit;
		transition: 0.3s ease;

		&:hover {
			color: #8a8a8a;
		}
	}

	nav {
		margin-inline: auto 0;
		width: fit-content;
		font-size: 0.813rem;
	}
}

:where(.attention_color, .required) {
	color: #EE1317;
}

/* ==========================================
レイアウト
========================================== */
.page-content {
	display: block;
	max-width: var(--wp--custom--bkpoint--xl);
	margin-inline: auto;
}

.page-content .image-text-section {
	max-width: var(--wp--custom--bkpoint--xl);
	margin-inline: auto;

	figure {
		width: 100%;
		height: 100%;

		img {
			width: 100%;
			height: auto;
			object-fit: cover;
		}
	}

	&.is-layout-flex {
		&:nth-child(odd) {
			figure img {
				margin-inline: 0 auto;
			}
		}

		&.reverse-even {
			&:nth-child(even) {
				flex-direction: row-reverse;

				figure img {
					margin-inline: auto 0;
				}
			}
		}
	}

	&.is-layout-grid {
		gap: 1.5rem;
	}

	.image-text-content {
		container-type: inline-size;
		container-name: text-content;
		align-self: center;
		width: 100%;
	}

	@container text-content (min-width: 500px) {
		.image-text-content>* {
			max-width: 480px;
		}
	}
}

@media (width < 1024px) {
	.page-content .image-text-section {
		&.is-layout-flex {
			&:nth-child(2n+1) {
				figure img {
					margin-inline: auto;
				}
			}
		}
	}
}

.full-bleed-gridcontents {
	display: grid;
	grid-template-columns:
		[full-start] minmax(2rem, 1fr) [content-start] minmax(0, 1400px) [content-end] minmax(2rem, 1fr) [full-end];
}

.full-bleed {
	grid-column: content-start / full-end;
}

.page-content .image-text-section--l {
	display: grid;
	grid-template-columns: 1fr;

	>div {
		width: min(528px, 100%);
		margin-inline: auto;
	}

	@media (width > 1024px) {
		grid-template-columns: repeat(2, 1fr);

		>div:nth-child(1) {
			margin-inline: auto 0;
		}

		>div:nth-child(2) {
			margin-inline-start: 0;
		}

		&:nth-child(odd) {
			>div:nth-child(1) {
				grid-column: 2/3;
				grid-row: 1/2;
				margin-inline: 0 auto;
			}

			>div:nth-child(2) {
				grid-column: 1/2;
				grid-row: 1/2;
				margin-inline: auto 0;
			}
		}
	}
}

.floowdescription {
	container-type: inline-size;
	container-name: floow;

	>.is-layout-grid {
		padding: clamp(1rem, -2rem + 8vw, 4rem);
		grid-template-columns: minmax(110px, 7vw) 1fr 300px;

		>div {
			display: grid;
		}

		img {
			display: block;
			aspect-ratio: 300 / 210;
			object-fit: cover;
			width: 300px;
		}
	}
}

.footer-info {
	margin-block-start: 3rem;

	>p {
		margin-block-end: 1em;
		font-weight: 700;
	}
}

/* ==========================================
ヘッダー
========================================== */
header.site-header {
	padding-inline-start: 1em;
	width: 100%;
	background-color: #003063cc;
	position: fixed;
	top: 0;
	z-index: 1000;
	color: var(--wp--preset--color--white);
	transition: transform 0.8s ease;

	&.header-top {
		transform: translateY(0);
	}

	&.header-hidden {
		transform: translateY(-100%);
		background-color: #003063d6;
		backdrop-filter: blur(5px);
		transition: transform 0.8s ease 0.3s;
	}

	&.header-visible {
		transform: translateY(0);
		background-color: #003063d6;
		backdrop-filter: blur(5px);
	}

	a {
		color: var(--wp--preset--color--white);
		display: block;
		transition: ease 0.3s;
		font-size: clamp(0.97em, 0.566em + 0.63vw, 1em);

		&:hover {
			color: #ffffffbb;
		}
	}
}

.site-header-inner {
	display: grid;
	row-gap: 0.5em;
	column-gap: clamp(0.5rem, -2rem + 6.67vw, 4rem);
	grid-template-columns: auto 1fr auto;
	grid-template-rows: 1.25em auto;
	align-items: center;
	align-content: center;
	margin-inline: auto;
	grid-template-areas:
		"txt txt menu"
		"logo nav menu";

	.header-text {
		grid-area: txt;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-block: 0;
		font-size: clamp(0.4em, 0.017em + 0.65vw, 0.6em);
		color: #b7b7b7;
		padding-block: 0.5em 0;
		line-height: 1;
		align-self: end;
	}

	.site-logo {
		grid-area: logo;
		display: grid;
		justify-content: start;
		justify-items: start;
		align-self: start;
		/* width: clamp(120px, 2.411rem + 6.7vw, 135px); */
		width: clamp(120px, 5.74rem + 3.6vw, 135px);
	}

	.site-logo:has(a[href$="/recruit/"]) {
		width: 100%;

		>a {
			display: flex;
			align-items: flex-end;
			gap: 0.5rem
		}

		svg {
			/* width: clamp(5.625rem, 2.411rem + 6.7vw, 135px); */
			width:clamp(120px, 5.74rem + 3.6vw, 135px);
		}

		small {
			font-size: clamp(0.5rem, -0.071rem + 0.91vw,12px);
			margin-block-end: 0.25rem
		}
	}

	.yamataLogoName {
		width: 100%;
		height: auto;
		object-fit: cover;
		margin-block-end: 9px;

		@media (width < 600px) {
			margin-block-end: 6px;
		}
	}

	svg {
		display: block;
	}

	.header-global-ui {
		grid-area: nav;
		width: fit-content;
		margin-inline: auto;
		align-self: start;
		padding-block-start: 0.5em;

		&.nav-recruit {
			a {
				font-size: clamp(0.875em, 0.417rem + 0.67vw, 1em);
			}
		}
	}

	ul {
		display: flex;
		gap: clamp(0.55rem, -2.037rem + 4.04vw, 1.5rem);
		list-style: none;
		margin-block: 0;
	}

	ul,
	li {
		margin-inline-start: 0;
		padding-inline-start: 0;
	}

	a {
		display: block;
		font-weight: 600;
		text-decoration: none;
	}

	li a,
	.wide-menublock-inner ul a {
		position: relative;

		&::after {
			content: "";
			position: absolute;
			bottom: -3px;
			left: 0;
			width: 100%;
			height: 1px;
			background-color: var(--color-text-white);
			transform: scaleX(0);
			transform-origin: center;
			transition: transform 0.3s ease;
		}

		&:hover::after {
			transform: scaleX(1);
		}
	}

	.wide-menublock-inner ul a::after {
		background-color: var(--wp--preset--color--ymf-text);
		transform-origin: left;
	}

	.menu-toggle,
	.close-menu {
		grid-area: menu;
		display: grid;
		border: 1px solid var(--wp--preset--color--white);
		cursor: pointer;
		width: clamp(4.219rem, 2.427rem + 4.78vw, 6.011rem);
		height: 100%;
		align-self: end;
		place-content: center;
		overflow: hidden;
		font-weight: 700;
		font-size: clamp(0.75em, 0.607em + 0.3vw, 14px);
		letter-spacing: 0.05em;
		position: relative;
		z-index: 10004;
	}

	/* テキストロールアニメーション */
	.menu-toggle-clip {
		display: block;
		overflow: hidden;
		line-height: 1.2;
	}

	.menu-toggle-text {
		display: block;
		position: relative;
		font-weight: 700;
		color: var(--wp--preset--color--white);
		transition: transform 0.4s cubic-bezier(0.76, 0, 0.24, 1);
	}

	.menu-toggle-text::after {
		content: attr(data-text);
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		text-align: center;
	}

	.menu-toggle:hover .menu-toggle-text,
	.menu-toggle:focus-visible .menu-toggle-text,
	.close-menu:hover .menu-toggle-text,
	.close-menu:focus-visible .menu-toggle-text {
		transform: translateY(-100%);
	}

	/* チェックボックスを視覚的に隠す（sr-only）: ラベル操作は維持 */
	.mobile-menu-toggle-checkbox {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
		left: -9999px;
		top: auto;
		pointer-events: none;
	}

	.mobile-menu-toggle-checkbox:checked~.wide-menublock {
		visibility: visible;
		opacity: 1;
	}

	.mobile-menu-toggle-checkbox:checked~.menu-toggle {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 0.2s ease, visibility 0.2s ease;
	}

	.wide-menublock {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100vh;
		background-color: var(--color-bg-dark);
		background-image: url(./images/svg/mar_full.svg);
		background-repeat: no-repeat;
		background-position: right 0 bottom -1rem;
		background-size: calc(clamp(64rem, 35.385rem + 44.71vw, 1210px) * 0.52);
		z-index: 10000;
		visibility: hidden;
		opacity: 0;
		transition: opacity 0.3s ease, visibility 0.3s ease;
		display: grid;
		overflow-y: auto;
	}

	.wide-menublock-inner {
		position: relative;
		min-width: 78%;
		max-width: 930px;
		margin-inline: auto;
		display: grid;
		align-content: center;
	}

	.close-menu {
		position: absolute;
		right: 0;
		top: 0;
	}
}

/* JSでbodyにmenu-openクラスを追加した場合、スクロールをロック */
body.menu-open {
	overflow: hidden;
}

.wide-menublock-inner :is(.wide-menu-corporate, .wide-menu-recruit) {
	padding-inline-start: clamp(1rem, -7.375rem + 22.33vw, 9.375rem);
	padding-inline-end: 0;
	min-width: 78%;
	max-width: 930px;
	display: grid;
	row-gap: 3rem;
	line-height: 1.56;

	ul {
		display: grid;
		grid-auto-flow: column;
		grid-template-rows: repeat(3, auto);
		justify-content: start;
		gap: 1.18rem clamp(1em, 0.5em + 3vw, 3.2rem);

		a {
			display: block;
			min-width: clamp(7rem, 4rem + 8vw, 10rem);
			padding-inline: 5px;
		}
	}
}

.inner-menublock {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	cursor: pointer;
	background: none;
	border: none;
	height: var(--header-height);
	width: auto;
}

.wide-menu-corporate {
	border-bottom: 1px solid #fff;
	padding-block-end: 4.125rem;
}

.wide-menu-recruit {
	padding-block-start: 4.125rem;
}

/* 採用ページ：採用メニューを上・企業メニューを下に入れ替え */
body.site-recruit .wide-menu-recruit {
	order: -1;
	border-bottom: 1px solid #fff;
	padding-block-end: 4.125rem;
	padding-block-start: 0;
}

body.site-recruit .wide-menu-corporate {
	border-bottom: none;
	padding-block-end: 0;
	padding-block-start: 4.125rem;
}

.mobile-menu-toggle-checkbox:checked~.menu-toggle {
	background-color: transparent;
}

.close-menu {
	z-index: 10005;
}

header:has(.mobile-menu-toggle-checkbox:checked) {
	transform: translateY(0);
}

/* :has() 非対応ブラウザ向けフォールバック: JSでクラス追加を推奨 */
header.menu-is-open {
	transform: translateY(0);
}

/* 全面メニュー */
.wide-menublock.white {
	background-color: var(--wp--preset--color--white);
	background-image: url(./images/svg/b_mar_full.svg);

	a,
	.menu-toggle-text {
		color: var(--wp--preset--color--ymf-text);

		&:hover {
			color: #8f8f8f;
		}
	}

	.close-menu {
		border-color: var(--wp--preset--color--ymf-text);
	}
}

body.site-corporate .wide-menu-corporate {
	border-color: var(--wp--preset--color--ymf-text);
}

body.site-recruit .wide-menu-recruit {
	border-color: var(--wp--preset--color--ymf-text);
}

/* ページごとのヘッダースタイル */
.main-content {
	container-type: inline-size;

	.content-header_block:has(h1) {
		position: relative;
		align-content: end;
		padding-block-end: clamp(2.875rem, -5.982rem + 13.84vw, 10.625rem);
		background-color: var(--color-bg-dark);
		color: var(--wp--preset--color--white);
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		width: 100vw;
		max-width: 100vw;
		max-height: 550px;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		box-sizing: border-box;
		aspect-ratio: 1 / 0.278125;
		gap: 0;

		@container (width < 768px) {
			aspect-ratio: 1 / 0.6277;
		}

		@media (width < 1264px) {
			padding-inline: 1.5rem;
		}

		p,
		h1 {
			width: 100%;
			max-width: 1200px;
			margin-inline: auto;
			position: relative;
			z-index: 2;
		}
		p {
			font-size: clamp(2.625em, 1.054rem + 2.46vw, 4em);
			font-weight: 700;
			padding-block-start: 2px;
			span{margin-block-end:0.25em;}
		}
		@supports (text-box-edge: cap text) {
			p {
				span{margin-block-end:unset;}
			}
		}

		h1 {
			font-size: clamp(0.875rem, 0.406rem + 1.25vw, 1.5rem);
		}
		&::after{
			content:"";
			background-image: none;
			width: 100%;
			height: 100%;
			position: absolute;
			top:0;
			z-index: 1;
		}
	}
}
@media	(width < 768px) {
	.main-content .content-header_block:has(h1) {
		&::after{
			background-image: linear-gradient(90deg, rgba(0, 11, 39, 0.80) 20%, rgba(0, 11, 39, 0.00) 100%);
		}
	}
}

/* ==========================================
フッター
========================================== */
.site-footer {
	container-type: inline-size;
	container-name: site-footer;
	padding: clamp(5.65em, 1.854em + 7.77vw, 8.65em) 1em 7.625em;
	background-color: var(--color-bg-dark);
	color: var(--color-text-white);
	background-image: url(./images/svg/mar_full.svg);
	background-repeat: no-repeat;
	background-position: right 0 bottom -1rem;
	min-height: 667px;
	display: grid;

	a {
		color: var(--color-text-white);
		text-decoration: none;
	}

	ul {
		list-style: none;
	}

	:where(ul, li) {
		margin-inline-start: 0;
		padding-inline-start: 0;
	}

	li a {
		font-weight: 700;
		display: block;
		min-width: 8rem;
		padding: 0.5rem 0.25rem;
		font-size: 0.9375rem;
	}
}

.site-recruit .site-footer {
	background-color: #00123D;
	background-image: url(./images/svg/mar_full.svg), linear-gradient(90deg, #002FA3 0%, #00123D 100%);
	background-repeat: no-repeat, no-repeat;
	background-position: left 0 bottom -1rem, left 0 top 0;
}

.wide-section-title,
.footer-section-title {
	font-size: 1.125rem;
	font-weight: 800;
	color: var(--color-text-gray);
	margin-block-end: 0;
	line-height: 1;
	white-space: nowrap;
}

.footer-logo svg.yamataLogoName {
	width: clamp(18.75rem, 14.145rem + 12.28vw, 24.875rem);
}

.site-footer-inner {
	max-width: 1920px;
	display: grid;
	align-items: start;
	gap: 1rem;

	.footer-column:nth-child(1) {
		display: grid;
		row-gap: clamp(1.8em, -3.578em + 11vw, 6.05em);
		margin-block-start: 6em;
	}

}

.footer-cta {
	display: grid;
	row-gap: clamp(1.5em, 0.643em + 1.79vw, 2.25em);
	max-width: 317px;
	a {
		display: block;
	}
}
@media(1024px > width){
.footer-cta {
	margin-block-start: 0.75em;
}
}

.footer-column--menus {
	display: grid;
	gap: clamp(1em, -0.898em + 3.88vw, 2.5em);
	transition: color 0.3s ease;

	&:hover {
		a {
			color: #f6f6f699;
			transition: color 0.3s ease;

			&:hover {
				color: var(--color-text-white);
				transition: color 0.3s ease;
			}
		}
	}
}

:where(.footer-menu-corporate, .footer-menu-recruit) {
	padding-block-end: 2.5em;
}

.footer-menu-corporate,
.footer-menu-recruit {
	border-bottom: 1px solid var(--color-text-gray);
	max-width: 650px;
	display: grid;

	p {
		font-size: inherit;
		padding-block-start: 0.5rem;
	}

	.footer-menu-list {
		display: grid;
		grid-auto-flow: column;
		gap: 0 1em;
		justify-content: start;
		align-items: start;
		grid-template-rows: repeat(3, auto);
	}
}

.footer-links ul {
	grid-column: 2 / 3;
}

:where(.footer-menu-corporate, .footer-menu-recruit),
.footer-links nav {
	display: grid;
	gap: 0.75em;
}
	@media (1024px > width){
	:where(.footer-menu-corporate, .footer-menu-recruit),
.footer-links nav {
	display: grid;
	gap: 1.85em;
}	
	}

.footer-copyright {
	text-align: right;
	padding-inline-end: clamp(1em, -0.028rem + 2.25vw, 2rem);
	padding-block: clamp(1em, 0.429em + 1.19vw, 1.5em);
	position: absolute;
	bottom: 0;
	right: 0;
	color: #505050;
	font-family: var(--wp--preset--font-family--oswald);
	font-size: clamp(0.625em, -0.375em + 2.08vw, 1.5em);
	font-weight: 700;
	overflow-x: clip;
}

.footer-appeal-block {
	container-type: inline-size;
	container-name: footer-appeal;
}

/* ==========================================
コンポーネント
========================================== */
:where(.main-content .content-header_block:has(h1)) {
	/* aspect-ratio: 1 / 0.277; */
	width: 100%;
	display: grid;
}

@keyframes btn-arrow-reenter {
	0% {
		transform: translateY(-50%) translateX(0);
		opacity: 1;
	}

	40% {
		transform: translateY(-50%) translateX(50px);
		opacity: 1;
	}

	45% {
		transform: translateY(-50%) translateX(60px);
		opacity: 0;
	}

	55% {
		transform: translateY(-50%) translateX(-60px);
		opacity: 0;
	}

	100% {
		transform: translateY(-50%) translateX(0);
		opacity: 1;
	}
}

a.btn {
	position: relative;
	display: block;
	justify-content: space-between;
	font-size: clamp(1rem, 0.85rem + 0.4vw, 1.25rem);
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	letter-spacing: 0.0625em;
	padding-block: 14px;
	overflow: hidden;
	transition: color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	max-width: 317px;
	width: 100%;
	text-align: center;

	&::before {
		content: '';
		position: absolute;
		inset: 0;
		transform: translateX(-101%);
		transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
		z-index: 0;
	}

	span {
		display: block;
		margin-inline: auto;
		text-align: center;
		position: relative;
		z-index: 1;
	}

	svg {
		width: 1.35em;
		@media (1024px > width) {
			width: 1.75em;
		}
		display: inline-block;
		position: absolute;
		top: 50%;
		right: 25px;
		transform: translateY(-50%);
		z-index: 1;
	}

	&:hover svg {
		animation: btn-arrow-reenter 0.6s ease 0.1s both;
	}

	&.btn-contact {
		color: var(--color-text-white);
		background-color: var(--color-bg-blue);

		&::before {
			background-color: var(--color-text-white);
		}

		&:hover {
			color: var(--color-bg-blue);

			&::before {
				transform: translateX(0);
			}
		}
	}

	&.btn-recruit {
		color: var(--color-bg-blue);
		background-color: var(--color-text-white);

		&::before {
			background-color: var(--color-bg-blue);
		}

		&:hover {
			color: var(--color-text-white);

			&::before {
				transform: translateX(0);
			}
		}
	}
}

.site-main a.btn {
	margin-inline: auto;
	max-width: unset;
	width: clamp(16.5em, 10.303rem + 12.68vw, 19.813em);
	padding-block: 12px;

	&.btn-contact {
		display: block;
		border: 1px solid var(--color-bg-blue);

		&::before {
			background-color: var(--wp--preset--color--white);
		}

		&:hover svg {
			animation: unset;
		}
	}

	&.btn-recruit {
		border: 1px solid transparent;
		display: block;

		&::before {
			background-color: var(--wp--preset--color--white);
		}

		&:hover svg {
			animation: unset;
		}
	}
}

.site-recruit .site-main a.btn {
	width: 296px;
	padding-block: 0.57em;
}

.site-recruit {
	.site-main .btn {
		&.btn-recruit {
			color: var(--color-bg-blue);
			border-color: var(--color-bg-blue);
			background-color: var(--wp--preset--color--white);
			border: 1px solid transparent;

			&::before {
				background-color: var(--color-bg-blue);
			}

			&:hover {
				color: var(--wp--preset--color--white);
				border-color: var(--wp--preset--color--white);

				&::before {
					transform: translateX(0);
				}
			}
		}
	}
}

.corporate-appeal {
	font-weight: 700;

	h3 {
		font-family: var(--wp--preset--font-family--noto-sans-jp), var(--wp--preset--font-family--system-font);
		font-size: 1.5rem;
		font-weight: 700;
		margin-block-end: clamp(1.75rem, -1.056rem + 5.74vw, 3.25rem);

		&:before {
			font-family: var(--wp--preset--font-family--oswald);
			text-box: cap alphabetic;
			font-size: clamp(4rem, 2.313rem + 4.5vw, 6.25rem);
			margin-block-end: 0.25em;
		}
	}

	>div {
		color: var(--color-text-white);
		display: grid;
		align-content: start;
		background-repeat: no-repeat;
		background-size: cover;
		padding-block: clamp(5em, 3.129rem + 3.83vw, 6em);
		height: clamp(39.688rem, 38.295rem + 4.45vw, 42.75rem);
		padding-inline: 7.25vw;

		p {
			font-size: 1.125rem;
			line-height: 1.667;

			&.footer-info-text {
				font-size: 0.875rem;
				line-height: 1.875;
				text-align: center;
			}
		}

		>div {
			width: fit-content;

			>div {
				background-color: var(--wp--preset--color--white);
				border-radius: 17px;
				width: clamp(min(99%, 21.563rem), 15.938rem + 15vw, 29.063rem);
				color: var(--color-recruit-primary);
				display: grid;
				justify-content: center;
				align-content: center;
				padding-block: clamp(1.5rem, 0.565rem + 1.91vw, 2rem);
				margin-block-start: clamp(2.8em, 2.286em + 1.07vw, 3.25em);
				row-gap: 0.5rem;

				a {
					margin-block-start: 0.75rem;
				}
			}
		}
	}

	>div:nth-child(1) {
		background-image: url(./images/contact_bg_pc.webp);
	}

	>div:nth-child(2) {
		background-image: url(./images/recruit_bg_pc.webp);
	}

	.en-face {
		font-size: clamp(2.5rem, 1.565rem + 1.91vw, 3rem);
		display: inline-flex;
		gap: 0.5rem;
		text-box-edge: auto;
		line-height: 1;
	}

	.phone-icon {
		width: 2.25rem;
		aspect-ratio: 1 / 1;
	}

	.btn.btn-contact {
		border: 1px solid var(--color-recruit-primary);
		background-color: var(--color-recruit-primary);
		color: var(--color-text-white);
		padding-block: 12px;
		margin-block-start: 5px;
		width: clamp(273px, 12.097em + 10.29vw, 317px);

		span {
			margin-inline-end: 2rem;
		}

		&::before {
			background-color: var(--wp--preset--color--white);
		}

		&:hover {
			color: var(--color-recruit-primary);
		}

		svg {
			animation: unset;
		}
	}

	.btn-recruit {
		margin-block-start: clamp(3.688rem, -0.016rem + 9.88vw, 8.625rem);
	}
}


.pagination.page-content {
	margin-block: 4em 5em;

	.navigation.pagination {
		.nav-links {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			gap: 0.5rem;
		}

		.page-numbers {
			display: grid;
			place-items: center;
			min-width: 2.5rem;
			height: 2.5rem;
			padding-inline: 0.75rem;
			border: 1px solid currentColor;
			text-decoration: none;

			&.current {
				background-color: var(--color-bg-dark);
				border-color: var(--color-bg-dark);
				color: var(--color-text-white);
				transition: 0.3s ease;
			}

			&:is(a):hover {
				background-color: var(--color-bg-dark);
				border-color: var(--color-bg-dark);
				color: var(--color-text-white);
				transition: 0.3s ease;
			}

			&.dots {
				border-color: transparent;
			}
		}
	}
}

.recruit-appeal {
	place-content: center;
	text-align: center;

	a {
		position: relative;
		background-color: var(--color-bg-blue);
		background-image: url(./images/recruit_footer.webp);
		background-repeat: no-repeat;
		background-position: center top;
		background-size: cover;
		padding-block: 5.75em 5em;
		display: grid;
		gap: 2.5rem;
		color: var(--color-text-white);
		transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

		&::before {
			position: absolute;
			content: "";
			background-color: transparent;
			inset: 0;
			z-index: 1;
			transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
		}

		.en-face {
			font-size: clamp(6.25em, 1.505em + 9.71vw, 10em);
			font-weight: bold;
			text-align: center;
		}

		.seifjp {
			font-size: clamp(1.375em, 0.268em + 2.27vw, 2.25em);
			text-align: center;
			width: fit-content;
			margin-inline: auto;
			padding-block-end: 0.75rem;
			border-bottom: 2px solid var(--color-text-white);
			transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
		}

		span.btn {
			display: block;
			position: relative;
			display: block;
			justify-content: space-between;
			font-size: clamp(1rem, 0.85rem + 0.4vw, 1.25rem);
			font-style: normal;
			font-weight: 700;
			line-height: normal;
			letter-spacing: 0.0625em;
			padding-block: 14px;
			overflow: hidden;
			transition: color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
			max-width: 296px;
			width: 100%;
			text-align: center;
			border: 1px solid var(--color-text-white);
			margin-inline: auto;

			&:hover {
				border-color: #f6f6f682;
			}

			&::before {
				content: '';
				position: absolute;
				inset: 0;
				transform: translateX(-101%);
				transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
				z-index: 0;
			}

			span {
				display: block;
				margin-inline: auto;
				text-align: center;
				position: relative;
				z-index: 1;
			}

			svg {
				width: 1.35em;
				display: inline-block;
				position: absolute;
				top: 50%;
				right: 25px;
				transform: translateY(-50%);
				z-index: 1;
			}

			&.btn-recruit {
				color: var(--color-bg-blue);
				background-color: var(--color-text-white);

				&::before {
					background-color: var(--color-recruit-primary);
				}
			}
		}

		.seifjp,
		.en-face,
		span.btn {
			position: relative;
			z-index: 2;
		}

		&:hover {
			color: #f6f6f6af;
			border-color: #f6f6f6af;
			background-color: #00a2ff00;

			.seifjp {
				border-color: #f6f6f682;
			}

			svg {
				animation: btn-arrow-reenter 0.6s ease 0.1s both;
			}

			.btn.btn-recruit {
				color: var(--color-text-white);

				&::before {
					transform: translateX(0);
				}
			}

			&::before {
				backdrop-filter: brightness(20%);
			}
		}
	}
}

/* カルーセル */
.carousel {
	margin-inline: auto;
	width: 100%;
	display: flex;
	overflow-x: auto;
	gap: 30px;
	scrollbar-width: none;
	margin-block: clamp(4.7em, 2.802em + 3.88vw, 6.2em);

	&::-webkit-scrollbar {
		display: none;
	}
}

.carouselgroup {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 30px;
	animation: spin 60s linear infinite;
	margin-block: 0;
}

.card {
	/* width: clamp(15.563em, 2.83em + 26.05vw, 25.625em); */
	width: clamp(250px, 4.196em + 23.81vw, 25.625em);
	display: block;
	aspect-ratio: 1 / 0.72;
	text-align: center;
	align-content: center;
	margin-block: 0;

	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}
}

@keyframes spin {
	from {
		translate: 0 0;
	}

	to {
		translate: -100% 0;
	}
}

/* テーブル */
.page-content {
	figure table {
		max-width: 977px;
		margin-inline: auto;
		border: 1px solid #D9D9D9;

		tr th,
		tr td {
			padding: 1.575em 0.5em;
			border: none;
			border-bottom: 1px solid #D9D9D9;
			vertical-align: middle;
			text-align: center;
		}

		tr th {
			background-color: #EFF0F5;
			font-weight: 700;
		}

		thead th {
			background-color: var(--color-recruit-primary);
			color: var(--color-text-white);
			font-weight: 700;
			text-align: center;
			padding-block: 1em;
		}
	}

	figure table,
	tr th,
	tr td {
		border: none;
	}

	tr th {
		font-weight: 700;
		text-align: start;
		width: unset;
		max-width: unset;
		min-width: 13.5em;
		background-color: unset;
	}

	tr {
		border-bottom: 1px solid #D9D9D9;

		th,
		td {
			padding-block: 1.65em;
		}
	}

	figure.normalcolor {
		table {
			border: none;

			tr th,
			tr td {
				border: none;
				text-align: start;
			}

			th {
				background-color: var(--wp--preset--color--white);
				color: #A9A9A9;
				width: unset;
			}

			th[scope="row"] {
				padding-inline-start: 0;
			}
		}
	}

	figure.history-table {
		padding-block-end: 0;

		table {
			border: none;

			tr th,
			tr td {
				border: none;
			}

			tbody {
				tr th {
					min-width: unset;
					background-color: var(--wp--preset--color--white);
					padding-inline-start: 0;
					color: #A9A9A9;
				}

				tr th,
				tr td {
					padding-block: 1.6em;
					text-align: start;
				}
			}
		}
	}
}

.page-in-link {
	a {
		display: block;
		width: fit-content;
		padding-inline-end: 0.5em;
		border-bottom: 1px solid var(--color-text-gray);
		transition: 0.3s ease;

		&:hover {
			border-color: var(--color-recruit-primary);
		}
	}
}

.selectedblock {
	counter-reset: future;

	p.en-face {
		font-weight: 700;
		font-size: clamp(1.5em, 0.551em + 1.94vw, 2.25em);
		background: radial-gradient(circle at 35% 50%, var(--grad-start), var(--grad-end));
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		transition: --grad-start 0.9s ease, --grad-end 1.2s ease;
		text-box: unset;
		text-box-trim: trim-both;

		&::after {
			content: " " counter(future, decimal-leading-zero);
			font-size: inherit;
		}
		&.an-move.an-content {
			--grad-start:oklch(65% 0.17 228);
			--grad-end: oklch(0.3% 0.15 262.8);
			/* --grad-end:oklch(0.3 0.14 262.48); */
		}
	}

	.leadcopy {
		margin-block: 1.45rem;
	}
}

/* ==========================================
スクロール・アニメーション
========================================== */
.an-move.scroll-y {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.an-move.scroll-y.an-content {
	opacity: 1;
	transform: translateY(0);
}
.an-move.scroll-y[data-rootmargin] {
	/* transform: translateX(3em); */
	transform: scale(1.2);
	transition: 0.3s linear;
}

.an-move.scroll-y[data-rootmargin].an-content {
	/* transform: translateX(0); */
	transform: scale(1);
}

.an-move.slidein {
	opacity: 1;
	overflow: clip;
	transform: unset;
}
/* .an-move.slidein.stretch.an-content  {
	opacity: 1;
	overflow: clip;
	transform: unset;
} */

.an-move.slidein.slideup {
	span {
		display: block;
		transform: translateY(1.5em);
		transition: 0.6s ease 0.5s;
	}
}

.an-move.slidein.slideup.an-content {
	span {
		display: block;
		transform: translateY(0);
		transition: 0.6s ease 0.5s;
	}
}

.an-move.path::before {
	clip-path: inset(0 100% 0 0);
	/* clip-path: inset(100% 0 0 0); */
	transition: 2s ease;
}
.an-move.path.an-content::before {
	clip-path: inset(0);
}

.an-move.path_center::before {
	clip-path: inset(0 49.9999% 0);
	transition: 2s linear;
}
.an-move.path_center.an-content::before {
	clip-path: inset(0);
}


.an-move.path.fast::before {
	clip-path: inset(0 100% 0 0);
	transition: 0.9s ease;
}

.an-move.path.fast.an-content::before {
	clip-path: inset(0);
}
.an-parallax {
	will-change: transform;
	transition: transform 0.1s ease-out;
}

.an-parallax:has(img) {
	will-change: auto;
	transition: none;
	overflow: clip;

	img {
		will-change: transform;
		transition: transform 0.1s ease-out;
	}
}


@media (prefers-reduced-motion: reduce) {
	.an-move {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.an-parallax {
		will-change: auto;
		transition: none;
	}

	header.site-header {
		transition: none;
	}

	.wide-menublock {
		transition: none;
	}
}

/* ==========================================
レスポンシブ
========================================== */
@media (width <=768px) {
	.site-main:not(.index, .recruit) {
		padding-inline: 1.1rem;
	}
}

@media (width <=1024px) {
	.site-header-inner {
		grid-template-columns: 1fr auto;
		grid-template-rows: auto auto;
		align-items: center;
		grid-template-areas:
			"txt txt menu"
			"logo logo menu";

		.header-global-ui {
			grid-area: unset;
			display: none;
		}
	}

	.site-footer {
		background-position: left -50px bottom 2rem;
		background-size: clamp(22.688rem, 15.338rem + 29.4vw, 41.063rem);

		.site-footer-inner {
			grid-template-rows: 1fr auto;
			margin-block-end: 3em;

			.footer-column {
				margin-inline: auto;
			}
		}

		.footer-column--menus {
			grid-row: 1 / 2;
		}
	}

	div:is(.footer-menu-corporate, .footer-menu-recruit, .footer-links) {
		padding-inline: 1.5em;

		li a {
			font-size: 0.8125rem;
		}
	}

	address {
		font-size: 0.8125rem;
	}

	.footer-links nav {
		display: block;
		margin-block-start: 0.75em;

		li,
		li a {
			line-height: 1;
			/* padding-block: 4px; */
		}
	}

	.footer-info p {
		font-size: 1rem;
	}
}

@media (width > 1024px) {
	.site-header-inner .wide-menublock {
		width: clamp(64rem, 35.385rem + 44.71vw, 1210px);
		left: unset;
	}

	.site-footer {
		background-position: left 9% bottom 0;
	}

	.site-recruit .site-footer {
		background-position: left 9% bottom 0, left 0 top 0;
	}

	div :is(.footer-menu-corporate, .footer-menu-recruit, .footer-links, .footer-info) {
		padding-inline-start: 3em;
	}

	:where(.footer-menu-corporate, .footer-menu-recruit),
	.footer-links nav {
		grid-template-columns: min(5.5em, 100px) 1fr;
		gap: 5em clamp(0em, -3.75em + 10vw, 5em);
	}

	.corporate-appeal {
		>div:nth-child(1) {
			background-image: url(./images/contact_bg_pc.webp);
		}

		>div:nth-child(2) {
			background-image: url(./images/recruit_bg_pc.webp);
		}
	}
}

@container footer-appeal (width > 1024px) {
	.corporate-appeal {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (width <=600px) {
	.corporate-appeal {
		h3::before {
			margin-block-end: 0.5em;
		}

		>div {
			p {
				line-height: 1.8;
			}
		}

		>div:nth-child(1) {
			background-image: url(./images/contact_bg_sp.webp);
			background-position: right center;
		}

		>div:nth-child(2) {
			h3 {
				margin-block-end: 3.65em;
			}

			background-image: url(./images/recruit_bg_sp.webp);
			background-position: right top;
		}
	}
}

/* 幅1024px以上の画面 */
@container site-footer (width > 1024px) {
	.site-footer-inner {
		grid-template-columns: repeat(2, 1fr);
		width: 100%;
		justify-self: center;
		column-gap: 4em;

		.footer-column:nth-child(1) {
			margin-inline: auto 21%;
		}
	}
}

@container floow (max-width: 840px) {
	.floowdescription>.is-layout-grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================
パララックス: CSS scroll-driven animations（animation-timeline: view()）
- .parallax-img: <figure> など画像を包む親要素に付与 → 内側の <img> が動く - .information-company::before : position: fixed の背景画像 → view-timeline で連動 - 非対応ブラウザは通常表示（@supports でガード済み）- prefers-reduced-motion 対応済み
========================================== */
@keyframes parallax-scale {
	from {
		translate: 0 -15%;
	}

	to {
		translate: 0 15%;
	}
}

@keyframes parallax-fixed-bg {
	from {
		translate: 0 -8vh;
	}

	to {
		translate: 0 8vh;
	}
}

@supports (animation-timeline: view()) {

	/* .parallax-img: 親要素に付与 / overflow: clip を使用（hidden はスクロールコンテナを作成し view() がビューポートを参照できなくなるため） */
	.parallax-img {
		overflow: clip;

		img {
			scale: 1.2;
			animation: parallax-scale linear both;
			animation-timeline: view();
			animation-range: entry 0% exit 100%;
		}
	}

	/* .information-company::before の背景画像パララックス / position: fixed + background-size: cover では background-position に可動域がないため */
	/* ::before 自体を上下20%拡張して translate で動作 / 親に view-timeline を定義して ::before のアニメーションに連動させる */
	.information-company {
		view-timeline: --information-company-bg block;

		&::before {
			animation: parallax-fixed-bg linear both;
			animation-timeline: --information-company-bg;
			animation-range: cover 0% cover 100%;
		}
	}

	/* モーション低減 */
	@media (prefers-reduced-motion: reduce) {

		.parallax-img img,
		.information-company::before {
			animation: none;
			scale: 1;
		}
	}
}