/* -------------------------------------------------------- */

/* @group @m-comfirm */

[class*="m-comfirm"] {
box-sizing: border-box;
display: grid;
grid-auto-flow: row;
align-content: start;
align-items: start;
gap: 1.5rem;
width: 90vw;
height: fit-content;
max-width: 40rem;
max-height: calc(100vh - 1.5rem);
margin: auto;
padding: 2.25rem;
background-color: var(--color-white);
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
transform: translate(-50%, -50%);
transition: opacity var(--transition-time) 0s var(--transition-cubic-bezier), visibility 0s var(--transition-time) var(--transition-cubic-bezier);
}

@supports (min-height: 100dvh) {
[class*="m-comfirm"] {
max-height: calc(100dvh - 1.5rem);
}

}

[class*="a-comfirm-overlay"] {
position: fixed;
z-index: 100;
visibility: var(--comfirm-visibility);
inset: 0;
opacity: var(--comfirm-opacity);
background-color: hsl(220deg 20% 20% / 50%);
pointer-events: var(--comfirm-pointer-events);
-webkit-backdrop-filter: blur(.125rem);
backdrop-filter: blur(.125rem);
transition: opacity var(--transition-time) 0s var(--transition-cubic-bezier), visibility 0s var(--transition-time) var(--transition-cubic-bezier);
}

/* @end @m-comfirm */

/* --------------------------------------------------------*/

/* @group @variables - transition */

:root {
/* background-color & border-color & color */
--form-input-transition: background-color var(--transition-time) 0s cubic-bezier(.6, .5, .5, .75), border-color var(--transition-time) 0s cubic-bezier(.6, .5, .5, .75), box-shadow var(--transition-time) 0s var(--transition-cubic-bezier), color var(--transition-time) 0s var(--transition-cubic-bezier);
--form-check-block-transition: background-color var(--transition-time) 0s cubic-bezier(.6, .5, .5, .75), border-color var(--transition-time) 0s cubic-bezier(.6, .5, .5, .75), box-shadow var(--transition-time) 0s var(--transition-cubic-bezier), color var(--transition-time) 0s var(--transition-cubic-bezier);
--form-check-icon-transition: background-image var(--transition-time) 0s cubic-bezier(.6, .5, .5, .75),background-color var(--transition-time) 0s cubic-bezier(.6, .5, .5, .75), color var(--transition-time) 0s var(--transition-cubic-bezier);
}

/* @end @variables - transition */

/* @group @variables - form color */

:root {
--color-input-disabled: hsl(220deg 5% 60% .5);
--color-form-checked: hsl(198deg 75% 47.5%);
--color-form-error: hsl(0deg 75% 47.5%);
--color-form-success: hsl(150deg 75% 47.5%);
--color-form-icon: hsl(242.5deg 5% 85%);
--color-autofill-primary: hsl(52deg 64% 45%);
--color-autofill-secondary: hsl(52deg 64% 97.5%);
--color-success-primary: hsl(120deg 55% 45%);
--color-success-secondary: hsl(120deg 60% 97.5%);
--color-error-primary: hsl(355deg 55% 55%);
--color-error-secondary: hsl(355deg 60% 97.5%);
--color-warning-primary: hsl(50deg 97.5% 47.5%);
--color-warning-secondary:hsl(50deg 100% 97.5%);
--color-focus-primary: hsl(205deg 55% 55%);
--color-focus-secondary: hsl(205deg 90% 97.5%);
--color-focus-tertiary: hsl(205deg 55% 75%);
}

/* @end @variables - form color */

/* -------------------------------------------------------- */

/* @group @form-btn-submit */
#form-btn-submit:disabled {
opacity: 0.5; /* 無効な入力がある場合、送信ボタンを半透明に */
pointer-events: none; /* 無効な場合、送信ボタンをクリック不可に */
}

/* @end @form-btn-submit */

/* @group @a-form-btn-close */

[class*="a-form-btn-close"] {
display: grid;
place-content: center;
}

/* @end @a-form-btn-close */

/* -------------------------------------------------------- */

/* @group @m-form-list */

[class*="m-form-list"] {
display: grid;
align-content: start;
grid-auto-flow: row;
grid-auto-columns: 1fr;
gap: 1.875rem;
}

/* @end @m-form-list */

/* -------------------------------------------------------- */

/* @group @variables */

[class*="a-validate-message"] {
--validate-message-background-color: var(--color-error-secondary);
--validate-message-color: var(--color-error-primary);
--font-weight: 500;
}

[class*="has-validation-valid"] {
--validate-message-background-color: var(--background-color);
--validate-message-color: var(--color-form-checked);
}

/* @end @variables */

/* @group @a-validate-message */

[class*="a-validate-message"] {
min-height: 1.5rem;
padding: .75rem;
background-color: var(--validate-message-background-color);
color: var(--validate-message-color);
text-align: center;
}

/* @end @a-validate-message */

/* -------------------------------------------------------- */

/* @group @m-form-footer */

[class*="m-form-footer"] {
box-sizing: border-box;
display: grid;
grid-auto-columns: 1fr;
gap: 1.5rem;
}

/* @end @m-form-footer */

/* -------------------------------------------------------- */

/* @group @a-recaptcha-message */

[class*="a-recaptcha-message"] {
min-height: 1.5rem;
padding: .75rem;
background-color: var(--background-color);
font-size: .75rem;
}

/* @end @a-recaptcha-message */

/* @group @grecaptcha-badge */
/*.grecaptcha-badge {visibility: hidden;}*/

/* @end @grecaptcha-badge */