/*
 * forms.css
 * 複数フォーム共通のCSS。CF7のフォーム本体（input/textarea/2カラム）と、cf7-contact-confirm.js
 * の確認画面の見た目。has_shortcode( 'contact-form-7' ) の場合に読み込む（functions.php）。
 * ルール: @layer は使わない。配色・フォントは style.css の :root トークン経由。
 * 確認画面オーバーレイは現状 JS 内のインラインstyleで、
 * CSS側は未適用（固めるときはクラスベースのCSSへ書き直す）。
 * 2カラム: フォームのDOMは CF7 内で手書きのため wpautop が <p> で1行ずつ囲む。この <p> 単位を
 * grid にしてラベル/入力欄を左右に分けている。
 */

@keyframes seki-radio-pop {
	from {
		transform: scale( 0 );
	}
	to {
		transform: scale( 1 );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.recruit-entory-form input[type="radio"]:checked::before,
	.recruit-entory-form input[type="checkbox"]:checked::before {
		animation: none;
	}
}

.cf7-form-table > p {
	display: grid;
	grid-template-columns: 232px 1fr;
	align-items: start;
	column-gap: 1.5em;
	margin-block-end: 1.875em;
	line-height: 1.4;
}

.cf7-form-table > p > label {
	display: flex;
	align-items: center;
	min-height: 50px;
}

.cf7-form-table > div {
	display: grid;
	grid-template-columns: 232px 1fr;
	align-items: start;
	column-gap: 1.5em;
	margin-block-end: 2em;
}

.cf7-form-table > div > p:first-child {
	display: flex;
	align-items: flex-start;
	padding-block-start: 0.7em;
}

.cf7-form-table > div > div p:not( :has( input ) ) {
	margin-block-start: 0.5em;
	font-size: 0.875rem;
	color: var( --color-text );
}

.cf7-form-table .labels {
	font-weight: 700;
}

.cf7-form-table .labels abbr {
	margin-inline-start: 0.2em;
	color: var( --color-accent );
	text-decoration: none;
}

.cf7-form-table input:is( [type="text"], [type="email"], [type="tel"], [type="date"] ),
.cf7-form-table select {
	box-sizing: border-box;
	width: 100%;
	height: 50px;
	padding-inline: 12px;
	border: 1px solid #d9d9d9;
	border-radius: 0;
	background-color: var( --color-white );
	color: var( --color-text );
	font: 400 1rem var( --font-jp );
	appearance: none;
	-webkit-appearance: none;
}

.cf7-form-table input[type="number"] {
	box-sizing: border-box;
	width: 4em;
	height: 40px;
	padding-inline: 12px;
	border: 1px solid #d9d9d9;
	border-radius: 0;
	background-color: var( --color-white );
	color: var( --color-text );
	font: 400 1rem var( --font-jp );
	appearance: none;
	-webkit-appearance: none;
	text-align: right;
}

.cf7-form-table textarea {
	box-sizing: border-box;
	width: 100%;
	height: 245px;
	padding: 0.9em;
	border: 1px solid #d9d9d9;
	border-radius: 0;
	background-color: var( --color-white );
	color: var( --color-text );
	font: 400 1rem var( --font-jp );
	resize: vertical;
}

.cf7-form-table ::placeholder {
	color: #a9a9a9;
	font-size: 0.85em;
}

.cf7-form-table input:is( [type="text"], [type="email"], [type="tel"] ):focus,
.cf7-form-table select:focus,
.cf7-form-table textarea:focus {
	outline: 1px solid #d9d9d9;
	outline-offset: 0;
	border-color: #ccc;
}

.cf7-form-table .wpcf7-form-control-wrap:has( select ) {
	position: relative;
	display: block;
}

.cf7-form-table .wpcf7-form-control-wrap:has( select )::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0.95em;
	width: 0;
	height: 0;
	border: 5px solid transparent;
	border-top: 7px solid #999;
	translate: 0 -50%;
	pointer-events: none;
}

.cf7-form-table .wpcf7-form-control-wrap:has( select ) select {
	padding-right: 36px;
}

.cf7-form-table input[type="file"] {
	display: block;
	margin-block-end: 0.5em;
	font-size:0.9em;
	width:100%;
}

.wpcf7-turnstile.cf-turnstile {
  margin-inline: auto;
  width: fit-content;
  margin-block-end: 3rem;
}
.cf7-form-table input[type="file"]::file-selector-button,
.cf7-form-table input[type="file"]::-webkit-file-upload-button {
	margin-inline-end: 0.5em;
	padding-inline: 0.35em;
	padding-block: 0.25em;
	border: 1px solid #d9d9d9;
	background-color: #d9d9d9;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

.cf7-form-table .wpcf7-not-valid {
	border-color: var( --color-accent ) !important;
}

.wpcf7-not-valid-tip {
	display: block;
	margin-block-start: 4px;
	color: var( --color-accent );
	font-size: 0.875rem;
}

form .wpcf7-submit {
	display: block;
	margin-inline: auto;
	padding-block: 1.25em;
	padding-inline: 2.5em;
	border: none;
	border-radius: 3em;
	background-color: var( --color-accent );
	color: var( --color-white );
	cursor: pointer;
	transition: background-color 0.3s linear, color 0.3s linear;
}

form .wpcf7-submit:not( :disabled ):hover {
	background-color: var( --color-white );
	color: var( --color-accent );
	outline: 1px solid var( --color-accent );
}

form .wpcf7-submit:disabled {
	background-color: #ccc;
	color: var( --color-white );
	cursor: not-allowed;
}

form > p:has( [type="checkbox"] ) {
	display: grid;
	gap: 0.125em 1em;
	margin-block: 2.5em;
}

@media ( min-width: 769px ) {
	form > p:has( [type="checkbox"] ) {
		grid-template-columns: repeat( 2, auto );
		justify-content: start;
	}
}

@media(600px >= width){
.cf7-form-table input[type="file"] {
	width: 100%;
	font-size: 0.8em;
}
.cf7-form-table em{
	font-size: 0.8em;
}

form .wpcf7-submit {
	max-width: unset;
	width: 100%;
	display: block;
}
}

form > p:has( [type="checkbox"] ) .wpcf7-list-item {
	margin-inline: unset;
	font-size: 1rem;
}

.fcontentblock .wpcf7-checkbox{
	display: flex;
	justify-content: start;
	flex-wrap: wrap;
	gap:0.5rem 1rem;

	.wpcf7-list-item{
		margin-inline: unset;

	}
}

form > p:has( [type="checkbox"] ) label {
	display: flex;
	align-items: center;
	gap: 0.5em;
	cursor: pointer;
	font-weight: 700;
}

form > p:has( [type="checkbox"] ) input[type="checkbox"] {
	width: 1.25rem;
	height: 1.25rem;
	accent-color: var( --color-accent );
	cursor: pointer;
}

form > p:has( [type="checkbox"] ) a {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	color: var( --color-accent );
	transition: 0.3s linear;
}

form > p:has( [type="checkbox"] ) a:hover {
	opacity: 0.7;
}

form .warning {
	margin-block: 2em;
	font-size: 1rem;
	font-weight: bold;
	color: var(--color-accent);
}

@media ( max-width: 768px ) {
	.cf7-form-table > p,
	.cf7-form-table > div {
		grid-template-columns: 1fr;
	}

	.cf7-form-table > p > label,
	.cf7-form-table > div > p:first-child {
		min-height: auto;
		padding-block: 0 0.5em;
	}
}
/* 採用エントリー用 */
.recruit-entory-form {

	> p,
	.labels,
	span.fcontentblock,
	> div,
	div.attention >p {
		display: block;
		line-height: 1.8;
		min-height: unset;
	}
	span.fcontentblock:has(input[type=radio]){
		margin-block-start: 0.5em;
	}

	abbr[title] {
		color: var(--color-white);
		font-size: 0.75rem;
		display: inline-block;
		padding-inline: 0.5em
	}

	abbr[title="必須"] {
		background-color: var(--color-corporate-accent);
	}

	abbr[title="任意"] {
		background-color: #7C7C7C;
	}

	input:is( [type="text"], [type="email"], [type="tel"], [type="date"], [type="number"] ),
	select,
	textarea {
		border: 1px solid #E1E1E1;
		border-radius: 0.325rem;
		background-color: #F4F4F5;
	}

	input:is( [type="text"], [type="email"], [type="tel"], [type="date"], [type="number"] ):not( :placeholder-shown ),
	textarea:not( :placeholder-shown ),
	input:is( [type="text"], [type="email"], [type="tel"], [type="date"], [type="number"] ):focus,
	select:focus,
	textarea:focus {
		background-color: var( --color-white );
	}

	input[type="radio"],
	input[type="checkbox"] {
		appearance: none;
		-webkit-appearance: none;
		width: 1.35rem;
		height: 1.35rem;
		margin: 0;
		border: 1px solid #999;
		background-color: #F4F4F5;
		cursor: pointer;
		flex-shrink: 0;
		position: relative;
	}

	input[type="radio"] {
		border-radius: 50%;
		transition: border-color 0.2s ease;
	}

	input[type="radio"]:checked {
		border-color: var( --color-corporate-accent );
	}

	input[type="radio"]:checked::before {
		content: "";
		position: absolute;
		inset: 1px;
		border-radius: 50%;
		background-color: var( --color-corporate-accent );
		animation: seki-radio-pop 0.25s cubic-bezier( 0.34, 1.56, 0.64, 1 );
	}

	input[type="checkbox"]:checked {
		border-color: var( --color-corporate-accent );
		background-color: var( --color-corporate-accent );
	}

	input[type="checkbox"]:checked::before {
		content: "";
		position: absolute;
		inset: 0;
		clip-path: polygon( 14% 44%, 0 65%, 38% 100%, 100% 20%, 82% 6%, 36% 72% );
		background-color: var( --color-white );
		animation: seki-radio-pop 0.25s cubic-bezier( 0.34, 1.56, 0.64, 1 );
	}

	input[type="radio"]:focus-visible,
	input[type="checkbox"]:focus-visible {
		outline: 1px solid var( --color-corporate-accent );
		outline-offset: 1px;
	}

	.wpcf7-list-item {
		display: inline-flex;
	}

	.wpcf7-list-item label {
		display: flex;
		align-items: center;
		gap: 0.5em;
		cursor: pointer;
	}

	.wpcf7-radio,
	.wpcf7-checkbox {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem 1.5rem;
	}

	p .wpcf7-submit:not([disabled]) {
		background-color: var(--color-recruit-accent-sub);
		border: 1px solid var(--color-recruit-accent-sub);
		&:hover{
			background-color: var(--color-white);
			color:var(--color-recruit-accent-sub);
			outline: 1px solid var(--color-recruit-accent-sub);
		}
	}
}

	.l-main--job-entry label:has(input[value=事務スタッフ]){
		color:#D6D6D6;
		pointer-events: none;
		cursor: not-allowed;
		&::after{
		content:"※現在は募集しておりません。";
		color:var(--color-corporate-accent);
		font-size: 0.875rem;
		display: inline;
	}
	}