/* =========================================
   Forms — Contact Form 7 / generic form elements
   Placeholder for form-specific styles.
   Populated per-project as form requirements emerge.
   ========================================= */
@charset "UTF-8";
/**
* form elements
* common initialize
*/

:root {
    --g-color-gry: var(--wp--preset--color--border);
    --g-color-gry-xxl: var( #f5f5f5);
    --g-color-accent: var(--wp--preset--color--accent-1);
    --g-color-base: var(--wp--preset--color--base, #333);
    --g-color-wh: var(--wp--preset--color--white);
}

:root {
    --element-border-size: 1px;
    --element-padding-size: 0.8em;
    --element-rad-size: 2px;
    --element-border-defaultcolor: var(--wp--preset--color--border);
    --element-border-focuscolor: var(--c-primary);
    --element-bg-color: var(--wp--preset--color--white);
    --element-bg-focuscolor: var(--wp--preset--color--white);
    --element-transition-speed: 0.3s;
    /* radio / checkbox */
    --checkd-color: var(--wp--preset--color--accent-1);
    --checkd-label-bgcolor: var(--wp--preset--color--accent-1);
    --checkd-label-color: var(--wp--preset--color--white);
}

/* initialize (%element-init を @extend していた箇所を展開) */
input[type="text"],
input[type="email"],
input[name="confirm_email"],
input[type="tel"],
input[type="date"],
input[type="number"],
input[type="password"],
select,
textarea {
    max-width: 100%;
    margin: 0;
    padding: var(--element-padding-size);
    font-size: 16px;
    border: var(--element-border-size) solid var(--element-border-defaultcolor);
    border-radius: var(--element-rad-size);
    box-shadow: 0 0 0 !important;
    background-color: var(--element-bg-color);
    transition: all var(--element-transition-speed);
    vertical-align: middle;
    appearance: none;
}

/* focus (%element-focus-init を @extend していた箇所を展開) */
input[type="text"]:focus,
input[type="email"]:focus,
input[name="confirm_email"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
    color: initial;
    border-color: var(--element-border-focuscolor);
    background-color: var(--element-bg-focuscolor);
    outline: none;
}

/* placeholder */
input::placeholder,
textarea::placeholder {
    color: var(--c-surface-2);
}

/**
* form elements
* size
*/
label,
select {
    width: 100%;
}
textarea {
    width: 100%;
    height: 10em;
}

/**
* form elements
* select
*/
.c-select {
    position: relative;
    display: flex !important;
    flex-flow: row wrap;
    align-items: center;
    overflow: hidden;
}
.c-select select {
    position: relative;
    max-width: auto;
    height: 54px;
    padding: var(--element-padding-size) 1em;
    font-size: 16px;
    line-height: 1.6;
    background: #fff;
    appearance: none;
}
.c-select select.symbol {
    font-size: 20px;
    font-weight: 700;
}
.c-select .archive-dropdown-wrapper {
    width: 100%;
}
.c-select:after {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0.5em;
    margin: auto;
    content: "\e90b";
    font-family: "camelus";
    font-size: 24px;
    color: var(--g-color-gry);
    pointer-events: none;
}
/* g.mq(md) → min-width: 768px と仮定（実際の breakpoint に合わせて調整してください） */
@media screen and (min-width: 768px) {
    .c-select {
        width: 100%;
        min-width: 180px;
    }
    .c-select select,
    .c-select .wpcf7-select {
        width: 100%;
        padding-right: 3em;
    }
}

.wpcf7-form-control-wrap:has(.wpcf7-select) {
    position: relative;
    display: flex !important;
    flex-flow: row wrap;
    align-items: center;
    overflow: hidden;
}
.wpcf7-form-control-wrap:has(.wpcf7-select) select {
    position: relative;
    font-size: 16px;
    line-height: 1.6;
    appearance: none;
}
.wpcf7-form-control-wrap:has(.wpcf7-select) select.symbol {
    font-size: 20px;
    font-weight: 700;
}
.wpcf7-form-control-wrap:has(.wpcf7-select) .archive-dropdown-wrapper {
    width: 100%;
}
.wpcf7-form-control-wrap:has(.wpcf7-select):after {
    height: 100%;
    height: 53px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0.5em;
    margin: 0;
    content: "\e90b";
    font-family: "camelus";
    font-size: 24px;
    color: var(--g-color-accent);
    pointer-events: none;
}

/**
* form elements
* checkbox
*/
.c-checkbox {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    line-height: 1.3;
    background-color: var(--g-color-gry-xxl);
    border-radius: var(--element-rad-size);
    overflow: hidden;
}
.c-checkbox_input {
    position: absolute;
    left: 0.8em;
    width: 1.3em;
    height: 1.3em;
    background-color: var(--g-color-wh);
    border: 2px solid var(--element-border-defaultcolor);
    border-radius: 2px;
    z-index: 4;
    transition: all var(--element-transition-speed);
}
.c-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    top: 0;
    bottom: 0;
    left: 0.9em;
    width: 1.1em;
    height: 1.1em;
    margin: auto;
    padding: 0;
    appearance: none;
    box-sizing: border-box;
    z-index: 10;
}
.c-checkbox input[type="checkbox"]:checked ~ .c-checkbox_input {
    border: 2px solid var(--checkd-color);
}
.c-checkbox input[type="checkbox"]:checked ~ .c-checkbox_input:after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 45%;
    height: 80%;
    border-bottom: 0.2em solid;
    border-right: 0.2em solid;
    border-color: var(--checkd-color);
    transform: translate(-50%, 0) rotate(45deg);
    border-radius: 1px;
}
.c-checkbox input[type="checkbox"]:checked ~ .c-checkbox_label {
    background-color: var(--checkd-label-bgcolor);
}
.c-checkbox input[type="checkbox"]:focus {
    opacity: 1;
}
.c-checkbox_label {
    position: relative;
    width: 100%;
    padding: 0.8em 0.8em 0.8em 2.4em;
    z-index: 3;
    transition: all var(--element-transition-speed);
}

/**
* form elements
* radio
*/
.c-radio {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    line-height: 1.3;
    background-color: var(--g-color-wh);
    border-radius: var(--element-rad-size);
    overflow: hidden;
}
.c-radio_input {
    position: absolute;
    left: 0.8em;
    width: 1.3em;
    height: 1.3em;
    background-color: var(--g-color-wh);
    border: 2px solid var(--element-border-defaultcolor);
    border-radius: 50%;
    z-index: 4;
}
.c-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    top: 0;
    bottom: 0;
    left: 0.9em;
    width: 1.1em;
    height: 1.1em;
    margin: auto;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
    z-index: 5;
}
.c-radio input[type="radio"]:checked ~ .c-radio_input {
    border: 2px solid var(--checkd-color);
    transition: all var(--element-transition-speed);
}
.c-radio input[type="radio"]:checked ~ .c-radio_input:after {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    height: 60%;
    border-radius: 50%;
    background-color: var(--checkd-color);
    transform: translate(-50%, -50%);
}
.c-radio input[type="radio"]:checked ~ .c-radio_label {
    color: var(--checkd-label-color);
    font-weight: 500;
    background-color: var(--checkd-label-bgcolor);
    border-color: var(--element-border-focuscolor);
}
.c-radio input[type="radio"]:focus {
    opacity: 1;
}
.c-radio .c-radio_label {
    position: relative;
    width: 100%;
    padding: 0.75em 1em 0.75em 1em;
    font-size: 16px;
    border: 1px solid var(--element-border-defaultcolor);
    z-index: 3;
    transition: all var(--element-transition-speed);
}
.c-radio .c-radio_label:hover {
    opacity: 0.9;
}

/**
* form elements
* search
*/
.c-text_search,
.c-search_form {
    display: flex;
    gap: 0;
    width: 100%;
}
.c-text_search input,
.c-search_form input {
    width: 100%;
    padding-left: 1em;
    line-height: 1.8;
    border-radius: 2px 0px 0px 2px;
    border: 1px solid var(--g-color-base);
}
.c-text_search button,
.c-search_form button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 75px;
    padding: 0;
    line-height: 1;
    color: var(--g-color-wh);
    font-weight: 500;
    border-radius: 0 var(--element-rad-size) var(--element-rad-size) 0;
    background-color: var(--g-color-base);
    transition: all var(--element-transition-speed);
    border: 1px solid var(--g-color-base);
}
.c-text_search button i,
.c-search_form button i {
    margin-right: 0em;
    font-size: 20px;
}
.c-text_search button:hover,
.c-search_form button:hover {
    opacity: 0.9;
}
@media (width >= 800px) {
    .c-text_search,
    .c-search_form {
        width: 60%;
        min-width: 260px;
    }
    .c-text_search input,
    .c-search_form input {
        flex: 1;
    }
}

/**
* form elements
* cf7
*/
:root {
    --cf7-bg-submit: var(--wp--preset--color--contrast);
}
.wpcf7 {
    padding: 0;
    border-width: 0px !important;
    background-color: #fff !important;
    border-radius: 8px;
}
.wpcf7 form {
    margin: 0 !important;
}
.wpcf7 select,
.wpcf7 textarea,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[name="confirm_email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="date"],
.wpcf7 input[type="number"],
.wpcf7 input[type="password"] {
    width: 100% !important;
}



/**
* form elements
* cf7 confirm button
*/
.wpcf7 input.wpcf7-submit,
.wpcf7-previous,
.wpcf7cp-cfm-edit-btn,
.wpcf7cp-cfm-submit-btn {
    position: relative;
    display: block;
    width: 225px !important;
    height: 56px;
    margin: 0;
    background-color: var(--c-alert);
    cursor: pointer;
    border: none !important;
    color: var(--wp--preset--color--white);
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    outline: none;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    border-radius: 2px;
}
.wpcf7 input.wpcf7-submit:hover,
.wpcf7-previous:hover,
.wpcf7cp-cfm-edit-btn:hover,
.wpcf7cp-cfm-submit-btn:hover {
    opacity: 0.9;
    /* background-color: var(--wp--preset--color--primary); */
}
.wpcf7cp-cfm-edit-btn {
    background-color: var(--wp--preset--color--border);
    color: var(--wp--preset--color--text-muted);
}

.btn-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1em;
}
.wpcf7 fieldset {
   padding: 0.8em 0;
	border: none;
}
.wpcf7-not-valid-tip {
    padding-top: 0.5em;
    font-size: 80%;
}
.wpcf7-not-valid-tip::before {
    content: "!";
    margin-right: 0.5em;
}
.wpcf7cp-btns {
    display: flex;
    justify-content: center;
    gap: 1em;
    margin-top: 1em !important;
}
button.wpcf7cp-cfm-edit-btn {
    margin: 0;
}

.wpcf7 form.sent .wpcf7-response-output {
    padding: 1em;
    color: #3a87ad;
    background-color: #d9edf7;
    border: 1px solid #bce8f1;
}
.wpcf7 .wpcf7-validation-errors,
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
    padding: 1em;
    color: #b94a48;
    background-color: #f2dede;
    border: 1px solid #eed3d7;
}
.wpcf7 .wpcf7-submit:disabled {
    background-color: var(--wp--preset--color--border);
    color: var(--wp--preset--color--text-muted);
}
.wpcf7 .wpcf7-submit:disabled:hover {
    background-color: var(--wp--preset--color--border);
    color: var(--wp--preset--color--text-muted);
}

/**
* form elements
* cf7 checkbox
*/
.wpcf7-list-item {
    line-height: 1;
	margin: 0 1em 0 0;
}
input[type="checkbox"]:checked + .wpcf7-list-item-label::after {
    content: "";
    display: block;
    width: 12px;
    height: 8px;
    border-top: 3px solid var(--wp--preset--color--accent-2);
    border-right: 3px solid var(--wp--preset--color--accent-2);
    transform: rotate(135deg);
    position: absolute;
    left: 4px;
    top: 4px;
}

.wpcf7-form-control-wrap:has(.wpcf7-select) {
    position: relative;
    display: flex !important;
    flex-flow: row wrap;
    align-items: center;
    overflow: hidden;
}
.wpcf7-form-control-wrap:has(.wpcf7-select) select {
    position: relative;
    font-size: 16px;
    line-height: 1.6;
    appearance: none;
}
.wpcf7-form-control-wrap:has(.wpcf7-select) select.symbol {
    font-size: 20px;
    font-weight: 700;
}
.wpcf7-form-control-wrap:has(.wpcf7-select) .archive-dropdown-wrapper {
    width: 100%;
}
.wpcf7-form-control-wrap:has(.wpcf7-select):after {
    height: 100%;
    height: 53px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0.5em;
    margin: 0;
    content: "\e90b";
    font-family: "camelus";
    font-size: 24px;
    color: var(--g-color-gry);
    pointer-events: none;
}

.c-table {
   width: 100%;
   border-collapse: collapse;
   margin-bottom: 2rem;
	/* tr {
		&:not(:last-of-type) {
			th,
			td {
				border-bottom: 1px solid var(--c-surface-2);
			}
		}
	} */
	th,
	td {
		padding: 0.8em;
		line-height: 1.5;
		border: 1px solid var(--c-surface-2);
	}
	th {
      background-color: var(--c-surface);
	  text-align: left;
	}
	td {
		a {
			word-break: break-all;
		}
	}
}
.c-table_variable,
#wpcf7cpcnf table {
   width: 100%;
   border-collapse: collapse;
   margin-bottom: 2rem;

	tr {
		th {
			background-color: var(--c-surface);
			text-align: left;
			width: 100%;
		}
		td {
			a {
				word-break: break-all;
			}
		}
		th,
		td {
			padding: 0.8em;
			line-height: 1.5;
			border: 1px solid var(--c-surface-2);
			border-width: 1px 1px 0px 1px;
		}
		th {
			width: 100%;
			text-align: left;
		}
		td {
			a {
				word-break: break-all;
			}
		}
	}
	
	
	tr {
		&:last-of-type {
			th {
				/* border-bottom: 1px solid; */
			}
			td {
				border-bottom-width: 1px;
			}
		}
	}
	th,
	td {
		margin: 0;
		display: list-item;
		list-style: none;
	}
	@media(width > 768px) {
		tr {
			th,
			td {
				display: table-cell;
			}
			th {
				width:33.333%;
			}
		}
	}
}

/* cf7 */
:root {
	--cf7-color-required: var(--wp--preset--color--vivid-red);
	--cf7-color-optional: var(--wp--preset--color--vivid-cyan-blue);
}
.wpcf7-form table {
	th {
		line-height: 1.2;
	}
}

th span.required,th span.optional {
	float: left;
	display: flex;
	align-items: center;
	width: fit-content;
	font-size: 11px;
	padding: 5px;
	border-radius: 2px;
	margin-right: 0.8em;

}
th span.required {
	background: var(--cf7-color-required);
	color: var(--wp--preset--color--white);
}
th span.optional {
	background: var(--cf7-color-optional);
	color: var(--wp--preset--color--white);
}

.wpcf7 p {
	font-size: 16px !important;
}
.wpcf7 .title-wrap {
	display: flex;
	flex-direction: column;
}


/**
* form elements
* cf7 confirm
*/
div#wpcf7cpcnf {
    left: 0;
    top: 0;
    width: calc(100%);
}
div#wpcf7cpcnf p {
    display: inline;
}
@media screen and (min-width: 768px) {
    div#wpcf7cpcnf {
        left: 0;
        top: 0;
        width: calc(100%);
    }
}

/**
* form elements
* cf7 confirm table
*/
/* #wpcf7cpcnf table tr:not(:last-of-type) td {
	border-bottom-width: 0px !important;
} */
#wpcf7cpcnf table th {
	padding: 0.8em;
	background-color: var(--wp--preset--color--border-light-2);
}
#wpcf7cpcnf table td {
	padding: 0.8em;
}