/**
 * Contact Form 7 — ベーススタイル（モバイルファースト）
 * 下層の問い合わせページ用
 */

/* フォームブロック（ブロックエディタで配置したCF7フォーム）の幅. */
.wp-block-contact-form-7-contact-form-selector {
	max-width: 800px;
	margin-inline: auto;
}

/*
 * reCAPTCHA のバッジはフォームのあるページだけに表示する.
 * スクリプトは判定の精度のため全ページで読み込み（CF7 の標準のまま）、バッジだけを隠す.
 * バッジは body 直下の position: fixed.
 * SWELL の #body_wrap が z-index: 1 のスタッキングコンテキストで、
 * さらに .c-bg-gradient の mix-blend-mode が重ね順を潰すため、
 * z-index だけでは格子（#content::before）の下に残ることがある.
 * isolation と translateZ で独自の合成レイヤーにし、格子より前に出す.
 */
body:not(:has(.wpcf7)) .grecaptcha-badge {
	visibility: hidden;
}

body:has(.wpcf7) .grecaptcha-badge {
	z-index: 10000 !important;
	isolation: isolate;
	mix-blend-mode: normal;
	transform: translateZ(0);
}

/* フォームのあるページでは下部固定のお問い合わせメニューを出さない. */
body:has(.wpcf7) #fix_bottom_menu {
	display: none !important;
}

.wpcf7 {
	margin: 0;
}

.wpcf7 form {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.wpcf7 label,
.wpcf7 .wpcf7-form-control-wrap {
	display: block;
}

.wpcf7 label {
	margin-bottom: 0.35em;
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--color-text);
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 select,
.wpcf7 textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	min-height: 48px;
	padding: 0.75em 1em;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background-color: var(--color-bg);
	color: var(--color-text);
	font-size: var(--fs-md);
	line-height: 1.5;
	appearance: none;
}

.wpcf7 textarea {
	min-height: 160px;
	resize: vertical;
}

.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
	outline: 2px solid var(--color-blue-sky);
	outline-offset: 1px;
	border-color: var(--color-blue);
}

.wpcf7 input[type="submit"],
.wpcf7 .wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 300px;
	min-height: 52px;
	padding: 0.85em 1.75em;
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	background-color: var(--color-blue);
	color: var(--color-white);
	font-size: var(--fs-md);
	font-weight: 700;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: background-position 0.4s ease;
}

.wpcf7 input[type="submit"]:hover,
.wpcf7 .wpcf7-submit:hover {
	background-position: 100% 0%;
}

.wpcf7 .wpcf7-not-valid-tip,
.wpcf7 .wpcf7-response-output {
	margin: var(--space-2) 0 0;
	font-size: var(--fs-sm);
}

@media (min-width: 768px) {
	.wpcf7 label {
		font-size: var(--fs-md);
	}

	.wpcf7 input[type="submit"],
	.wpcf7 .wpcf7-submit {
		width: auto;
		min-width: 240px;
		align-self: flex-start;
	}
}

/* --------------------------------------------
 * 確認画面（assets/js/cf7-confirm.js）
 * form[data-cf7-step] が input / confirm / sent で表示を切り替える.
 * -------------------------------------------- */

/* 入力画面: 確認画面と送信ボタンを隠す. */
.wpcf7 form[data-cf7-step="input"] .p-cf7-confirm,
.wpcf7 form[data-cf7-step="input"] .p-cf7-confirm__actions {
	display: none;
}

/* 確認画面: 入力フォームと確認ボタンを隠す. */
.wpcf7 form[data-cf7-step="confirm"] .p-cf7-confirm__source,
.wpcf7 form[data-cf7-step="confirm"] .p-cf7-confirm__next {
	display: none;
}

/* 送信完了: 完了メッセージ以外を隠す. */
.wpcf7 form[data-cf7-step="sent"] > :not(.wpcf7-response-output) {
	display: none;
}

.p-cf7-confirm:focus {
	outline: none;
}

.p-cf7-confirm__lead {
	margin: 0 0 var(--space-3);
	font-size: var(--fs-sm);
	font-weight: 700;
}

.wpcf7 .p-cf7-confirm__table {
	width: 100%;
}

.wpcf7 .p-cf7-confirm__table td.is-empty {
	color: var(--color-text-muted);
}

.p-cf7-confirm__value {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.p-cf7-confirm__actions {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.p-cf7-confirm__actions > p {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
}

@media (min-width: 768px) {
	.p-cf7-confirm__actions > p {
		flex-direction: row;
	}
}

.p-cf7-confirm__next,
.p-cf7-confirm__back {
	display: inline-flex;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 300px;
	margin-inline: auto;
	line-height: 1.2;
	min-height: 52px;
	padding: 0.85em 1.75em;
	border-radius: var(--radius-pill);
	font-size: var(--fs-md);
	font-weight: 700;
	letter-spacing: 0.04em;
	cursor: pointer;
}

.p-cf7-confirm__next {
	border: 1px solid transparent;
	background-color: var(--color-blue);
	color: var(--color-white);
	transition: background-position 0.4s ease;
}

.p-cf7-confirm__next:hover {
	background-position: 100% 0%;
}

/* 必須項目が未入力の間は押せない. */
.p-cf7-confirm__next:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.p-cf7-confirm__next:disabled:hover {
	background-position: 0% 0%;
}

.p-cf7-confirm__back {
	border: 2px solid var(--color-blue-sky);
	background-color: var(--color-bg);
	color: var(--color-text);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.p-cf7-confirm__back:hover,
.p-cf7-confirm__back:focus-visible {
	background-color: var(--color-blue-sky);
	color: var(--color-white);
}

@media (min-width: 768px) {
	.p-cf7-confirm__next,
	.p-cf7-confirm__back {
		width: auto;
		min-width: 240px;
	}

	.p-cf7-confirm__next {
		align-self: center;
	}

	.p-cf7-confirm__actions {
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
}

/* ============================================
 * Contact Form 7
============================================ */
.note {
	color: #f61f44;
}

.wpcf7 table,
.wpcf7 form input {
	font-size: 100% !important;
	line-height: 100% !important;
}

.wpcf7 form textarea {
	font-size: 14px !important;
	line-height: 100% !important;
}

.wpcf7 table {
	width: 100%;
}

.wpcf7 table th {
	font-weight: 700 !important;
}

.wpcf7 table th em {
	display: inline-flex;
	align-items: center;
	background-color: #f61f44;
	color: #ffffff;
	padding: 4px 1em;
	margin-left: 1em;
	border-radius: var(--radius-pill);
	font-style: normal;
	font-weight: bold;
	font-size: 0.75rem !important;
	line-height: 1;
}

.wpcf7 table th em.factory-hissu {
	background-color: #335daa;
}

.wpcf7 table td span.row {
	display: flex;
	align-items: center;
}

input::placeholder,
textarea::placeholder {
	color: #aaaaaa;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[name="postal-code"],
.wpcf7 textarea {
	width: 100%;
}

.wpcf7 select[name="pref"],
.wpcf7 select[name="subject"],
.wpcf7 select[name="time"],
.wpcf7 select[name="person"],
.wpcf7 select[name="kakou"]{
	width: 100%;
}

/* 見積フォーム */
.wpcf7 input[name="accuracy"],
.wpcf7 input[name="lot-max"],
.wpcf7 input[name="price-min"],
.wpcf7 input[name="price-max"] {
	width: 10em !important;
}
 
/* display: block;　解除 */
span.wpcf7-form-control-wrap.kibou-month,
span.wpcf7-form-control-wrap.kibou-day,
span.wpcf7-form-control-wrap.lot-max,
span.wpcf7-form-control-wrap.accuracy,
span.wpcf7-form-control-wrap.size-x,
span.wpcf7-form-control-wrap.size-y,
span.wpcf7-form-control-wrap.size-z,
span.wpcf7-form-control-wrap.size-x-max,
span.wpcf7-form-control-wrap.size-y-max,
span.wpcf7-form-control-wrap.size-z-max,
span.wpcf7-form-control-wrap.price-min,
span.wpcf7-form-control-wrap.price-max {
 display: inline;
}

/* 送信完了メッセージ */
div.wpcf7-mail-sent-ok {
	border: 6px solid #f61f44;
	padding: 6px;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
}

/* エラーで表示される吹き出し */
div.wpcf7-validation-errors,
span.wpcf7-not-valid-tip {
	margin-bottom: 20px;
}

div.wpcf7-validation-errors, div.wpcf7-acceptance-missing {/* 191226更新 */
	border: 2px solid #f61f44 !important;
}

@media (min-width: 960px) { 

.wpcf7 table th {
	width: 38% !important;
	padding-top: 22px;
}
 
.wpcf7 input[type="text"],
.wpcf7 input[type="email"]{
	height: 20px !important;
}
 
.wpcf7 input[name="postal-code"] {
	width: 50% !important;
	height: 20px !important;
}
 
.wpcf7 select[name="pref"],
.wpcf7 select[name="kakou"],
.wpcf7 select[name="material-select"] {
	height: 40px !important;
}
 
.wpcf7 select[name="person"] {
	width: 20%;
	height: 40px !important;
}

.wpcf7 select[name="time"]{
	width: 40%;
	height: 40px !important;
}

.wpcf7 select[name="subject"]{
	height: 40px !important;
}

.wpcf7 textarea {
	height: 200px !important;
}
}

/* スマホ: フォームの表は見出し（th）と入力欄（td）を縦に並べる. */
@media (max-width: 767.98px) {
	.wpcf7 table,
	.wpcf7 table tbody,
	.wpcf7 table tr,
	.wpcf7 table th,
	.wpcf7 table td {
		display: block;
		width: 100%;
	}

	.wpcf7 table th {
		padding-bottom: 0.25em;
	}

	.wpcf7 table td {
		padding-top: 0.25em;
	}
}

/* --------------------------------------------
 * 日付入力のカレンダー（jQuery UI Datepicker. assets/js/cf7-datepicker.js）
 * jQuery UI のテーマCSSは読み込まず、ここでサイトに合わせて最小限のスタイルをつける.
 * -------------------------------------------- */
.wpcf7 input.js-datepicker {
	width: 100%;
	padding-right: 2.75em;
	cursor: pointer;
	/* 右端にカレンダーアイコンを表示する（入力欄のどこを押してもカレンダーが開く）. */
	background: var(--color-white) url(../img/icon-calendar.svg) no-repeat right 0.9em center / 20px 20px;
}

#ui-datepicker-div {
	display: none;
	z-index: 1000 !important;
	width: 18em;
	padding: 0.75em;
	border: 1px solid var(--color-border, #ddd);
	border-radius: 8px;
	background-color: var(--color-white);
	box-shadow: 0 4px 16px rgb(0 0 0 / 12%);
	font-size: 14px;
	color: var(--color-text);
}

#ui-datepicker-div .ui-datepicker-header {
	position: relative;
	padding: 0.25em 2.25em 0.75em;
	text-align: center;
	font-weight: 700;
}

#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next {
	position: absolute;
	top: 0;
	width: 2em;
	height: 1.75em;
	overflow: hidden;
	border-radius: 4px;
	cursor: pointer;
	text-indent: -9999px;
}

#ui-datepicker-div .ui-datepicker-prev {
	left: 0;
}

#ui-datepicker-div .ui-datepicker-next {
	right: 0;
}

/* 前月・次月の矢印 */
#ui-datepicker-div .ui-datepicker-prev::before,
#ui-datepicker-div .ui-datepicker-next::before {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.5em;
	height: 0.5em;
	border-top: 2px solid var(--color-blue);
	border-right: 2px solid var(--color-blue);
	content: "";
}

#ui-datepicker-div .ui-datepicker-prev::before {
	transform: translate(-30%, -50%) rotate(-135deg);
}

#ui-datepicker-div .ui-datepicker-next::before {
	transform: translate(-70%, -50%) rotate(45deg);
}

#ui-datepicker-div .ui-state-disabled.ui-datepicker-prev,
#ui-datepicker-div .ui-state-disabled.ui-datepicker-next {
	opacity: 0.3;
	cursor: default;
}

#ui-datepicker-div .ui-datepicker-calendar {
	width: 100%;
	max-width: none;
	margin: 0;
	border-collapse: collapse;
	table-layout: fixed;
}

#ui-datepicker-div .ui-datepicker-calendar th,
#ui-datepicker-div .ui-datepicker-calendar td {
	display: table-cell;
	width: auto;
	padding: 2px;
	border: none;
	background: none;
	text-align: center;
}

#ui-datepicker-div .ui-datepicker-calendar th {
	font-size: 12px;
	font-weight: 700;
	color: var(--color-text-muted);
}

#ui-datepicker-div .ui-datepicker-calendar td a,
#ui-datepicker-div .ui-datepicker-calendar td span {
	display: block;
	padding: 0.35em 0;
	border-radius: 4px;
	color: var(--color-text);
	text-decoration: none;
}

#ui-datepicker-div .ui-datepicker-calendar td a:hover {
	background-color: #e5f3fb;
}

#ui-datepicker-div .ui-datepicker-calendar .ui-datepicker-today a {
	font-weight: 700;
	color: var(--color-blue);
}

#ui-datepicker-div .ui-datepicker-calendar .ui-state-active {
	background-color: var(--color-blue);
	color: var(--color-white);
}

/* 選べない日（土日・今日より前） */
#ui-datepicker-div .ui-datepicker-calendar .ui-state-disabled span {
	color: #c4c4c4;
	cursor: not-allowed;
}

/* 前後の月の日付は表示しない */
#ui-datepicker-div .ui-datepicker-other-month {
	visibility: hidden;
}

@media (min-width: 960px) {
	.wpcf7 input.js-datepicker {
		width: 60%;
	}
}