:root {
	--transparent: rgba(255, 255, 255, 0);
	--white: #FFF;
	--text:#333;
	--shadow:#1a181865;
	--green: #1b8e42;
	--orange: #eeb033;
	--blue: #6695be;
	--light-gray:#f4f4f4;
	--gray: #cccccc;
	--dark-gray:#666666;

	--input_bg: var(--white);
	--input_bd: var(--gray);
	--input_col: var(--text);

	--input_bg_fc: var(--white);
	--input_bd_fc: var(--gray);
	--input_col_fc: var(--gray);

	--description: var(--text);
	--required_bg:#D60000;
	--required_col:#FFF;

	--button_send_bg: var(--green);
	--button_send_bd: var(--transparent);
	--button_send_col: var(--white);

	--button_send_bg_hov: var(--blue);
	--button_send_bd_hov: var(--transparent);
	--button_send_col_hov: var(--white);

	--button_back_bg: var(--transparent);
	--button_back_bd: var(--gray);
	--button_back_col: var(--dark-gray);

	/* --button_back_bg_hov:;
	--button_back_bd_hov:;
	--button_back_col_hov:; */

	--check_after: var(--blue);
	--check_before: var(--white);
	--check_bd: var(--gray);
	--check_bd_ck: var(--gray);

}

/* ========== ========== */
/* フォームプラグイン（Snow Monkey Forms）
/* ========== ========== */
::-webkit-input-placeholder {
	color: #ccc;
	opacity: 1;
}
::-moz-placeholder {
	color: #ccc;
	opacity: 1;
}
:-ms-input-placeholder {
	color: #ccc;
	opacity: 1;
}

.snow-monkey-form {
	margin-top: clamp(2.5rem, 1.5311rem + 3.9448vw, 3.75rem);
	padding: 0 clamp(0rem, -2.4234rem + 9.8664vw, 6rem);

	& .smf-form {
		display: grid;
	}
	& .smf-item__col--controls {
		width: 100%;
	}
	& input[type="submit"],
	& input[type="text"],
	& input[type="email"],
	& select,
	& textarea,
	& button {
		-moz-appearance: none;
		-webkit-appearance: none;
		border: none;
		-webkit-box-shadow: none;
		box-shadow: none;
		outline: none;
		padding: 1.125rem;
	}

	& input[type="submit"],
	& input[type="text"],
	& input[type="email"],
	& textarea {
		background: var(--input_bg);
		border: 1px solid #707070;
		border: 1px solid var(--input_bd);
		color: var(--text);
		font-size: clamp(0.9375rem, 2vw, 1rem);
		font-size: 1rem;
		padding: 18px 0.75rem;
		padding: 10px 10px;
		width: 100%;
	}
	& input[type="submit"]:focus,
	& input[type="text"]:focus,
	& input[type="email"]:focus,
	& textarea:focus {
		background: var(--input_bg_fc);
		border-color: var(--input_bd_fd);
		box-shadow: 0 0 3px var(--shadow);
	}

	& textarea[name="content"] {
		display: inline-block;
		height: 5rem;
		width: 100%;
	}

	& input,
	& textarea {
		background: #fff;
		border: 1px solid var(--input_bd);
		font-size: 1rem;
		text-box: trim-both text;
		width: 100%;
	}
	& input::placeholder,
	& textarea::placeholder {
		color: #ccc;
	}
	/* & .wp-block-snow-monkey-forms-item {
		margin-bottom: 2em;
	} */
	& .wp-block-snow-monkey-forms-item.required {
    	border-left: none !important;
	}
	& .smf-item__description {
		background: var(--description);
		border-radius: 4px;
		color: var(--text);
		display: inline-grid;
		font-size: 0.6875rem;
		line-height: 1.1875rem;
		min-width: 64px;
	}
	& .required .smf-item__description {
		background: var(--required_bg);
		border-radius: 4px;
		color: var(--required_col);
		display: inline-grid;
		font-size: 0.6875rem;
		line-height: 1.1875rem;
		min-width: 64px;
	}
	& .smf-item__col.smf-item__col--label {
		align-items: center;
		flex: 0 0 auto;
	}
	& .smf-item__col.smf-item__col--label .smf-item__label {
		display: inline-block;
		font-size: clamp(0.9375rem, 0.9123rem + 0.1028vw, 1rem);
		/* font-weight: var(--font-wei-din2014-dem); */
		line-height: clamp(1.625rem, 1.5998rem + 0.1028vw, 1.6875rem);
	}
	& .smf-item__col.smf-item__col--label .smf-item__description {
		display: inline-block;
	}

	& .smf-action {
		align-items: center;
		display: flex;
		flex-wrap: wrap;
		gap: clamp(1.25rem, 0.9976rem + 1.0277vw, 1.875rem);
		justify-content: center;
		margin-bottom: 8px;
		margin-top: 25px;
	}
	& .smf-action button {
		align-items: center;
		/* background: var(--yellow); */
		background: var(--button_send_bg);
		border: none;
		border-radius: 999px;
		color: var(--button_send_col);
		display: grid;
		font-size: 0.875rem;
		font-size: clamp(0.9375rem, 0.8618rem + 0.3083vw, 1.125rem);
		font-size: clamp(0.9375rem, 0.9123rem + 0.1028vw, 1rem);
		font-weight: 600;
		justify-items: center;
		line-height: clamp(1.625rem, 1.4988rem + 0.5139vw, 1.9375rem);
		line-height: 2.25rem;
		line-height: 2.25rem;
		margin: 1em auto;
		margin: 0 auto;
		padding: calc(18px - clamp(0rem, -0.1262rem + 0.5139vw, 0.3125rem)) 24px;
		padding: 8px 24px;
		/* padding-right: 54px; */
		position: relative;
		text-decoration: none;
		transition: 0.3s ease-out;
	}
	& .smf-action button::after {
		background: url(../images/arrow__next-white.svg?date=202505);
		background-repeat: no-repeat;
		background-size: contain;
		border-radius: 50%;
		content: "";
		height: 20px;
		position: absolute;
		right: 24px;
		top: 50%;
		transform: translateY(-50%);
		transition: 0.3s ease-out;
		width: 20px;
	}
	& .smf-action button:hover {
		background: var(--button_send_bg_hov);
		color: var(--button_send_col_hov);
		transition: 0.3s ease-out;
	}
	& .smf-action button:hover::after {
		background: url(../images/arrow__next-black.svg?date=202506);
		background-repeat: no-repeat;
		background-size: contain;
		text-align: center;
		transition: 0.3s ease-out;
	}
	& .smf-action .smf-button-control + .smf-button-control {
		margin-left: 0;
	}
	& .smf-item__col.smf-item__col--label .smf-item__description {
		display: block;
	}
	& .wp-block-snow-monkey-forms-item {
		display: block;
	}
	& .smf-item__col {
		display: block;
		text-align: left;
	}
	& .smf-action .smf-button-control__control[data-action="back"] {
		background: var(--button_back_bg);
		border: 1px solid var(--button_back_bd);
		color: var(--button_back_col);
		padding: 8px 24px;
	}
	& .smf-action .smf-button-control__control[data-action="back"] .smf-sending {
		display: none;
	}
	& .smf-action .smf-button-control__control[data-action="back"]::after {
		display: none;
	}
	& .smf-action .smf-button-control__control[data-action="back"] button::after {
		display: none;
	}
	/* ここから ===== ===== ===== */
	& .smf-text-control,
	& .smf-text-control__control,
	& .smf-textarea-control,
	& .smf-select-control {
		display: grid;
		text-box: trim-both text;
	}
	& .smf-text-control__control,
	& .smf-textarea-control__control {
		padding: 10px;
	}
	& .smf-text-control__control {
		width: 100%;
	}
	& .smf-placeholder:has(.smf-select-control) {
		display: grid;
		justify-items: start;
	}
	& input[readonly],
	& input:read-only,
	& input[readonly]:focus,
	& input:read-only:focus {
		background: #ddd;
	}

	& .wp-block-snow-monkey-forms-item {
		align-items: baseline;
		column-gap: 15px;
		display: grid;
		justify-content: unset;
		padding: 1.25rem 0;
		border-bottom: 1px dotted var(--blue);
	}

	& .smf-item__col--label {
		font-weight: 600;
		/* padding: 15px 0; */
		padding: 0 0 15px 0;
	}
	& .smf-select-control {
		display: inline-grid;
		position: relative;
	}
	& .smf-select-control__control {
		appearance: none;
		background: var(--input_bg);
		border: 1px solid var(--input_bd);
		color: var(--input_col);
		/* font-family: var(--font-norma); */
		font-size: 1rem;
		padding: 10px 10px;
		padding-right: 40px;
		z-index: 2;
	}
	& .smf-select-control__toggle {
		background: #fff;
		bottom: 0;
		display: block;
		left: 0;
		position: absolute;
		right: 0;
		top: 0;
		z-index: 0;
		z-index: 1;
	}
	& .smf-select-control__toggle::after {
		border: 6px solid transparent;
		border-top: 12px solid var(--text);
		content: "";
		position: absolute;
		right: 15px;
		top: 17px;
	}
	& input[type="checkbox"],
	& input[type="radio"] {
		appearance: none;
		display: none;
	}
	& input[type="checkbox"] + span,
	& input[type="radio"] + span {
		cursor: pointer;
		display: inline-grid;
		padding: 10px;
		position: relative;
	}
	& input[type="checkbox"] + span::after,
	& input[type="checkbox"] + span::before,
	& input[type="radio"] + span::after,
	& input[type="radio"] + span::before {
		border: 1px solid var(--check_bd);
		content: "";
		display: inline-block;
		height: 20px;
		left: 0px;
		position: absolute;
		top: 10px;
		width: 20px;
		/* left: -18px; */
	}
	& input[type="checkbox"] + span::before,
	& input[type="radio"] + span::before {
		background: var(--check_before);
	}
	& input[type="radio"] + span::after,
	& input[type="radio"] + span::before {
		border-radius: 50%;
	}
	& input[type="checkbox"] + span::after,
	& input[type="radio"] + span::after {
		background: var(--check_after);
		border: none;
		height: 16px;
		left: 3px;
		opacity: 0;
		top: 2px;
		width: 16px;
		/* left: -15px; */
        top: 13px;
	}
	& input[type="checkbox"]:checked + span::before,
	& input[type="radio"]:checked + span::before {
		border: 1px solid var(--check_bd_ck);
	}
	& input[type="checkbox"]:checked + span::after,
	& input[type="radio"]:checked + span::after {
		opacity: 1;
	}
	& .smf-radio-buttons-control__control {
		display: flex;
		flex-wrap: wrap;

		& .smf-radio-button-control__label {
			padding-left: 30px;
		}
		/* & > .smf-label {
			padding-left: 20px;
		} */
	}

	/* 個人情報保護方針に同意 */
	& .check_policy {
		align-items: center;
		border: 1px solid var(--light-gray);
		column-gap: 12px;
		display: inline-flex;
		flex-direction: row-reverse;
		margin: 0 auto;
		padding: 18px 20px;
		position: relative;
		margin-top: 20px;
	}
	/* エラーメッセージ */
	& .smf-error-messages {
		font-size: 12px;
		font-weight: 600;
		margin-top: 0;
		padding-top: 10px;
		position: absolute;
	}

	& .smf-item label {
		align-items: center;
		align-items: baseline;
		column-gap: 15px;
		cursor: pointer;
		display: grid;
		grid-template-columns: auto auto;
		height: 100%;
		justify-content: start;
	}
	& .smf-item.check_policy {
		& label {
			grid-template-columns: none;
		}
		& .smf-item__col--label {
			padding: 0;
		}
	}
	& .icon_req {
		background: var(--required_bg);
		border-radius: 4px;
		color: var(--required_col);
		font-size: 12px;
		font-weight: 600;
		line-height: 1rem;
		padding: 5.5px 6px;
	}
	& .wp-default-text {
		margin-top: 30px;
	}
}

/* ---------- ---------- ---------- ---------- ---------- ---------- */
/* ---------- ---------- レスポンシブ（1200px） ---------- ---------- */
@media screen and (min-width: 1200px) {
	/* ベース ---------- ---------- ---------- */
	.wp-block-snow-monkey-forms-item {
		display: grid;
		grid-template-columns: 200px auto;
	}
	.smf-text-control__control {
		max-width: calc(100% - clamp(11.875rem, 2.6286rem + 10.8303vw, 15.625rem));
	}
}