/**
 * theme.json preset ユーティリティ（has-primary-color / has-xl-font-size 等）
 * global-styles が読み込まれない環境向け。通常段落のエディタ設定反映用。
 * theme.json の palette / fontSizes と同期すること。
 */
:root {
	--wp--preset--color--primary: #307eea;
	--wp--preset--color--light-blue: #00cbdb;
	--wp--preset--color--light-blue-2: #1ac8ed;
	--wp--preset--color--green: #92d267;
	--wp--preset--color--yellow: #fde74c;
	--wp--preset--color--red: #fe5f55;
	--wp--preset--color--text: #0f1020;
	--wp--preset--color--white: #ffffff;
	--wp--preset--color--gray: #f5f5f5;
	--wp--preset--color--black: #000000;
	--wp--preset--font-size--xs: 1.2rem;
	--wp--preset--font-size--sm: 1.4rem;
	--wp--preset--font-size--base: 1.6rem;
	--wp--preset--font-size--md: 1.8rem;
	--wp--preset--font-size--lg: 2.4rem;
	--wp--preset--font-size--xl: 3.2rem;
	--wp--preset--font-size--2xl: 4rem;
	--wp--preset--font-family--zen-kaku-gothic-new: "Zen Kaku Gothic New", "Noto Sans JP", "Noto Sans CJK JP", sans-serif;
	--wp--preset--font-family--noto-sans-jp: "Noto Sans JP", "Noto Sans CJK JP", sans-serif;
	--wp--preset--font-family--montserrat: "Montserrat", "Noto Sans JP", sans-serif;
}

.has-primary-color {
	color: var(--wp--preset--color--primary) !important;
}

.has-light-blue-color {
	color: var(--wp--preset--color--light-blue) !important;
}

.has-light-blue-2-color {
	color: var(--wp--preset--color--light-blue-2) !important;
}

.has-green-color {
	color: var(--wp--preset--color--green) !important;
}

.has-yellow-color {
	color: var(--wp--preset--color--yellow) !important;
}

.has-red-color {
	color: var(--wp--preset--color--red) !important;
}

.has-white-color {
	color: var(--wp--preset--color--white) !important;
}

.has-gray-color {
	color: var(--wp--preset--color--gray) !important;
}

.has-black-color {
	color: var(--wp--preset--color--black) !important;
}

.has-xs-font-size {
	font-size: var(--wp--preset--font-size--xs) !important;
}

.has-sm-font-size {
	font-size: var(--wp--preset--font-size--sm) !important;
}

.has-base-font-size {
	font-size: var(--wp--preset--font-size--base) !important;
}

.has-md-font-size {
	font-size: var(--wp--preset--font-size--md) !important;
}

.has-lg-font-size {
	font-size: var(--wp--preset--font-size--lg) !important;
}

.has-xl-font-size {
	font-size: var(--wp--preset--font-size--xl) !important;
}

.has-2-xl-font-size {
	font-size: var(--wp--preset--font-size--2xl) !important;
}

.has-zen-kaku-gothic-new-font-family {
	font-family: var(--wp--preset--font-family--zen-kaku-gothic-new) !important;
}

.has-noto-sans-jp-font-family {
	font-family: var(--wp--preset--font-family--noto-sans-jp) !important;
}

.has-montserrat-font-family {
	font-family: var(--wp--preset--font-family--montserrat) !important;
}

/**
 * テキスト配置ユーティリティ
 * ブロック設定 > 詳細設定 > 追加 CSS クラス に指定
 *
 * recruit-u-text-center … 左右中央寄せ
 * recruit-u-text-left   … 左寄せ
 * recruit-u-text-right  … 右寄せ
 */
:is(.recruit-wp__inner, .editor-styles-wrapper) .recruit-u-text-center {
	text-align: center !important;
}

:is(.recruit-wp__inner, .editor-styles-wrapper) .recruit-u-text-left {
	text-align: left !important;
}

:is(.recruit-wp__inner, .editor-styles-wrapper) .recruit-u-text-right {
	text-align: right !important;
}

/**
 * 可変フォントサイズユーティリティ（clamp）
 * ブロック設定 > 詳細設定 > 追加 CSS クラス に指定
 * recruit-blocks.css の clamp 値と同期
 *
 * recruit-u-fluid-xs   … 1.2rem 〜 1.4rem
 * recruit-u-fluid-sm   … 1.4rem 〜 1.6rem
 * recruit-u-fluid-base … 1.6rem 〜 1.8rem
 * recruit-u-fluid-md   … 1.8rem 〜 2rem
 * recruit-u-fluid-lg   … 2rem 〜 2.4rem
 * recruit-u-fluid-xl   … 2rem 〜 3.2rem
 * recruit-u-fluid-2xl  … 2.4rem 〜 3.6rem
 */
:root {
	--recruit-u-fluid-xs: clamp(1.2rem, 1.07vw, 1.4rem);
	--recruit-u-fluid-sm: clamp(1.4rem, 1.29vw, 1.6rem);
	--recruit-u-fluid-base: clamp(1.6rem, 1.43vw, 1.8rem);
	--recruit-u-fluid-md: clamp(1.8rem, 1.43vw, 2rem);
	--recruit-u-fluid-lg: clamp(2rem, 1.71vw, 2.4rem);
	--recruit-u-fluid-xl: clamp(2rem, 2.29vw, 3.2rem);
	--recruit-u-fluid-2xl: clamp(2.4rem, 3vw, 3.6rem);
}

:is(.recruit-wp__inner, .editor-styles-wrapper) .recruit-u-fluid-xs {
	font-size: var(--recruit-u-fluid-xs) !important;
}

:is(.recruit-wp__inner, .editor-styles-wrapper) .recruit-u-fluid-sm {
	font-size: var(--recruit-u-fluid-sm) !important;
}

:is(.recruit-wp__inner, .editor-styles-wrapper) .recruit-u-fluid-base {
	font-size: var(--recruit-u-fluid-base) !important;
}

:is(.recruit-wp__inner, .editor-styles-wrapper) .recruit-u-fluid-md {
	font-size: var(--recruit-u-fluid-md) !important;
}

:is(.recruit-wp__inner, .editor-styles-wrapper) .recruit-u-fluid-lg {
	font-size: var(--recruit-u-fluid-lg) !important;
}

:is(.recruit-wp__inner, .editor-styles-wrapper) .recruit-u-fluid-xl {
	font-size: var(--recruit-u-fluid-xl) !important;
}

:is(.recruit-wp__inner, .editor-styles-wrapper) .recruit-u-fluid-2xl {
	font-size: var(--recruit-u-fluid-2xl) !important;
}

.flow-sp-view {
	display: none;

	@media screen and (max-width: 768px) {
		display: block;
		margin: 0px auto;
		max-width: 300px;
	}
}

.flow-pc-view {
	display: block;

	@media screen and (max-width: 768px) {
		display: none;
	}
}