/* ==========================================================================
   Contact Form 7 用スタイル
   既存 style.css の <ul class="check-box"> / <input id="tabN"> 構造を、
   CF7 が出力する <span class="wpcf7-list-item"> 構造で再現する。
   ========================================================================== */

/* ---------- 共通: CF7 ラッパーを透過させる ---------- */
.form-content > .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}
.form-content > .wpcf7-form-control-wrap > input[type="text"],
.form-content > .wpcf7-form-control-wrap > input[type="tel"],
.form-content > .wpcf7-form-control-wrap > input[type="email"],
.form-content > .wpcf7-form-control-wrap > textarea,
.form-content > .wpcf7-form-control-wrap > select {
	width: 100%;
	box-sizing: border-box;
}

/* ==========================================================================
   ラジオボタン群（贈り物/ご自宅用、スタイル選択、画像配信サービス、お支払方法）
   既存 .form-box ul.check-box の見た目（白背景・グレー枠 / 選択時 黒背景・白文字）を
   CF7構造で再現する。
   ========================================================================== */
.form-box .check-box {
	overflow: hidden;
	padding-left: 0;
	margin: 0;
}
.form-box .check-box .wpcf7-form-control-wrap {
	display: block;
}
.form-box .check-box .wpcf7-radio {
	display: block;
	overflow: hidden;
}
.form-box .check-box .wpcf7-list-item {
	float: left;
	width: 45%;
	margin: 0 10% 12px 0;
	box-sizing: border-box;
}
.form-box .check-box .wpcf7-list-item:nth-of-type(2n) {
	margin-right: 0;
}
.form-box .check-box .wpcf7-list-item label {
	display: block;
	padding: 10px 30px;
	border: 1px solid #999;
	color: #333;
	background-color: #FFF;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.3s, color 0.3s;
}
.form-box .check-box .wpcf7-list-item label:hover {
	opacity: 0.7;
}
.form-box .check-box .wpcf7-list-item input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}
.form-box .check-box .wpcf7-list-item .wpcf7-list-item-label {
	display: block;
}
/* JS で .is-checked が付与された list-item のラベルをアクティブ表示 */
.form-box .check-box .wpcf7-list-item.is-checked label {
	background-color: #000;
	color: #FFF;
	border-color: #000;
}
/* :has() 対応ブラウザ向けフォールバック（JS無効時の保険） */
.form-box .check-box .wpcf7-list-item:has(input[type="radio"]:checked) label {
	background-color: #000;
	color: #FFF;
	border-color: #000;
}

/* ご注文カテゴリーは「贈り物 / ご自宅用」の2項目で中央寄せにする */
.form-group-1 .check-box.order {
	display: flex;
	justify-content: center;
	gap: 24px;
}
.form-group-1 .check-box.order .wpcf7-radio {
	display: flex;
	gap: 24px;
}
.form-group-1 .check-box.order .wpcf7-list-item {
	float: none;
	width: 180px;
	margin: 0;
}

/* お支払方法は3項目を横並びに */
.check-box.payment .wpcf7-list-item {
	width: calc((100% - 30px) / 3);
	margin-right: 15px;
}
.check-box.payment .wpcf7-list-item:nth-of-type(2n) {
	margin-right: 15px;
}
.check-box.payment .wpcf7-list-item:last-child {
	margin-right: 0;
}

/* スマホ表示では横長ボタンを縦に並べる（テキスト折り返しによる高さズレ防止） */
@media (max-width: 767px) {
	.form-box .check-box.payment .wpcf7-radio {
		display: block;
	}
	.form-box .check-box.payment .wpcf7-list-item,
	.form-box .check-box.payment .wpcf7-list-item:nth-of-type(2n),
	.form-box .check-box.payment .wpcf7-list-item:last-child {
		float: none;
		width: 100%;
		margin: 0 0 10px 0;
	}
}

/* 画像配信サービスは2項目を左寄せで */
.check-box.material .wpcf7-list-item {
	width: auto;
	min-width: 120px;
	margin-right: 12px;
}
.check-box.material .wpcf7-list-item:nth-of-type(2n) {
	margin-right: 0;
}

/* ==========================================================================
   タブ切替（メッセージカード / お届け先）
   既存 .tab_wrap / .tab_area / .panel_area / #tabN:checked の見た目を
   CF7構造 + JS制御で再現する。
   ========================================================================== */
.tab_wrap.js-tabs {
	margin: 80px auto;
}
.message .tab_wrap.js-tabs {
	margin: 30px auto;
}
.tab_wrap.js-tabs .tab_area {
	font-size: 0;
	display: block;
	overflow: hidden;
}
.tab_wrap.js-tabs .tab_area .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}
.tab_wrap.js-tabs .tab_area .wpcf7-radio {
	display: flex;
	width: 100%;
}
.tab_wrap.js-tabs .tab_area .wpcf7-list-item {
	flex: 1 1 33.33%;
	margin: 0;
	float: none;
	width: 33.33%;
}
.tab_wrap.js-tabs .tab_area .wpcf7-list-item input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}
.tab_wrap.js-tabs .tab_area .wpcf7-list-item label {
	display: block;
	width: 100%;
	padding: 15px 0;
	color: #999;
	background: #fff;
	text-align: center;
	font-size: 18px;
	cursor: pointer;
	transition: opacity 0.2s;
	box-sizing: border-box;
}
.tab_wrap.js-tabs .tab_area .wpcf7-list-item label:hover {
	opacity: 0.7;
}
.tab_wrap.js-tabs .tab_area .wpcf7-list-item.is-checked label {
	background: #333;
	color: #fff;
}
.tab_wrap.js-tabs .tab_area .wpcf7-list-item:has(input[type="radio"]:checked) label {
	background: #333;
	color: #fff;
}

/* メッセージカードのタブ（2項目）も均等幅に */
.message .tab_wrap.js-tabs .tab_area .wpcf7-list-item {
	flex: 1 1 50%;
	width: 50%;
}

/* タブパネル */
.tab_wrap.js-tabs .panel_area {
	background: #f1f1f1;
	padding: 10px 30px;
}
.tab_wrap.js-tabs .tab_panel {
	width: 100%;
	padding: 80px 0;
	display: none;
}
.tab_wrap.js-tabs .tab_panel.is-active {
	display: block;
}
.tab_wrap.js-tabs .tab_panel p {
	font-size: 14px;
	letter-spacing: 1px;
	text-align: center;
}
.tab_wrap.js-tabs .tab_panel p.text-right {
	text-align: right;
}

/* ==========================================================================
   テキスト系入力欄の調整
   ========================================================================== */
.wpcf7 input[type="text"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="email"],
.wpcf7 textarea,
.wpcf7 select {
	box-sizing: border-box;
}

/* カレンダー入力 */
.js-calendar {
	cursor: pointer;
	background-color: #fff;
}

/* ==========================================================================
   バリデーション・送信中表示
   ========================================================================== */
.wpcf7 .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	padding: 6px 10px;
	font-size: 14px;
	font-weight: bold;
	color: #fff;
	background: #d33;
	border-radius: 3px;
	animation: fh-shake 0.3s ease-in-out 0s 2;
}
@keyframes fh-shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-4px); }
	75% { transform: translateX(4px); }
}

/* エラーフィールド本体 */
.wpcf7 .wpcf7-not-valid {
	border: 2px solid #d33 !important;
	background-color: #fff5f5 !important;
}
.wpcf7 .wpcf7-form-control-wrap:has(.wpcf7-not-valid) {
	display: block;
}

/* レスポンス通知エリア（送信ボタン下） */
.wpcf7 .wpcf7-response-output {
	margin: 24px 0 0;
	padding: 16px 20px;
	border-width: 2px;
	font-weight: bold;
	font-size: 15px;
}
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7-form.payment-required .wpcf7-response-output {
	background: #fff5f5;
	border-color: #d33;
	color: #d33;
}
.wpcf7-form.sent .wpcf7-response-output {
	background: #f5fff5;
	border-color: #383;
	color: #383;
}

/* form-label のラベル本体にもエラー時に赤マーカーを付ける（必須項目を分かりやすく） */
.form-group:has(.wpcf7-not-valid) dt.form-label,
.form-group:has(.wpcf7-not-valid) .form-label {
	color: #d33;
}

.wpcf7 form .wpcf7-spinner {
	vertical-align: middle;
	margin-left: 12px;
}

/* 送信ボタン（既存テーマの .form-box .button input スタイルに合わせ、
   黒背景・白文字／ホバーでダークグレーに） */
.form-box .button input[type="submit"],
.wpcf7 input[type="submit"] {
	background-color: #000;
	border: 1px solid #000;
	color: #fff;
	width: 300px;
	margin: 0 auto;
	display: block;
	padding: 16px 10px;
	box-sizing: border-box;
	font-size: 18px;
	cursor: pointer;
	transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.form-box .button input[type="submit"]:hover,
.wpcf7 input[type="submit"]:hover {
	background-color: #333;
	color: #fff;
	border-color: #333;
	opacity: 1;
}
.form-box .button input[type="submit"]:disabled,
.wpcf7 input[type="submit"]:disabled {
	background-color: #888;
	border-color: #888;
	cursor: not-allowed;
}