/* ************************************************************
フォーム
************************************************************ */

.form-label.form-label-birthday { margin-top: 20px; }

/* ----- 生年月日（select と年/月/日テキスト前後の間隔） -------------------- */
.form-label-birthday .wpcf7-form-control-wrap { margin-right: 10px; }
.form-label-birthday .wpcf7-form-control-wrap ~ .wpcf7-form-control-wrap { margin-left: 5px; }

/* ----- PC: ラベル左カラム / 入力右カラムの 2 カラム配置 -------------------- */
@media (min-width: 769px) {
	.contactform .input-label,
	.contactform .input-label > fieldset,
	.contactform .form-label-birthday > fieldset {
		overflow: hidden; /* clearfix + 内部 float を包む */
		padding: 0 !important;
	}
	.contactform .input-label > label,
	.contactform .input-label > fieldset > legend,
	.contactform .form-label-birthday > fieldset > legend {
		float: left;
		width: 300px;
		padding-right: 20px;
		box-sizing: border-box;
		padding-top: 8px;
	}
	.contactform .input-label > .wpcf7-form-control-wrap,
	.contactform .input-label > fieldset > .wpcf7-form-control-wrap {
		display: block;
		overflow: hidden; /* BFC: float の隣に配置 */
		padding-top: 5px;
	}
	/* メッセージ文字数カウンタも右カラムに収める */
	.contactform .input-label > .count-your-message-down {
		display: block;
		overflow: hidden; /* BFC: float の隣（下）に配置 */
	}
}

/* ----- table -------------------- */

table { width: 100%; }
table th, table td { border: 1px solid var(--color-border); background-color: var(--color-white);
	padding: 20px; vertical-align: middle; text-align: center; }

/* ----- 固定ページのプライバシーポリシーでh3を非表示にする -------------------- */

.page-plivacypolicy h3 { display: none; }

/* ----- コンタクトフォームのコーション -------------------- */

.box-atenntion { border: none; margin-top: 30px; margin-bottom: 30px; }
.box-atenntion-title { display: block; text-align:center;
	font-weight: 700; font-size: 1.5em; color:var(--color-warning); margin-top: .5em; margin-bottom: 1em;
}
.box-atenntion-content { padding: 30px; border:1px solid var(--color-warning); }
@media (max-width: 768px) {
	.box-atenntion-title { font-weight: 700; font-size: 1.2em; }
	.box-atenntion-content { padding: 20px; }
}

/* ----- コンタクトフォームのプライバシーポリシー -------------------- */

.scroll__inner {
	margin-top:20px;
	background-color: var(--color-white);
	border: 1px solid var(--color-border-image);
	height: 250px;
	overflow-y: scroll;
	-ms-overflow-style: none;
	/* IE, Edge 対応 */
	scrollbar-width: none;
	/* Firefox 対応 */
}
.scroll__inner::-webkit-scrollbar { /* Chrome, Safari 対応 */ display: none; }

.privacy-iframe { padding-left: 1em; padding-right: 2em; padding-bottom:2em; }
@media (max-width: 768px) {
	.privacy-iframe { padding-left: .5em; padding-right: 1.5em; }
}

	.privacy-iframe h3 { text-align: center; font-weight: 700; font-size: 1.2em; }
	.privacy-iframe h4 { font-size:1em; margin-bottom: 0px; }
	.privacy-iframe .privacy-contact-list { list-style: none; padding-left: 0; }
	.page-plivacypolicy .privacy-contact-list { list-style: none; padding-left: 0; }
	.privacy-date { display:block; text-align:right; }
	.privacy-iframe p, .privacy-iframe span, .privacy-iframe ul, .privacy-iframe ol {
		font-size:.9em; line-height:1.5em; 
		margin-top:.0em; margin-bottom:.0em; 
		text-align:justify;
}

.form-caution { font-size: 1em; margin-top: 10px; }
.form-caution::before { content: "※" / ""; color: var(--color-warning); font-weight: 900; }

.form-group { padding-top: 1.1rem; }

/* ----- 送信ボタンとスピナーを中央合わせにする -------------------- */

.form-send-bt { display: block; text-align: center; margin-left: auto; margin-right: auto; margin-top: 20px; }

/* PC: 送信ボタン幅を 60% に */
@media (min-width: 769px) {
	.form-send-bt input[type="submit"] { width: 60%; }
}

/* CF7 カスタムスピナー（プログレスバー型） */
div.wpcf7 .wpcf7-spinner {
	display: block;
	width: 120px;
	height: 20px;
	background-color: #ddd;
	background-image: linear-gradient(var(--color-primary), var(--color-primary));
	background-repeat: no-repeat;
	background-size: 0% 100%;
	background-position: 0 0;
	animation: loader-progress 2s infinite linear;
	border-radius: 0;
	opacity: 1;
	margin: 12px auto 0;
}
div.wpcf7 .wpcf7-spinner::before { display: none; }
@keyframes loader-progress {
	100% { background-size: 100% 100%; }
}

/* スピナー出現時（送信中）のみ上下に余白を確保 */
.wpcf7-form.submitting .wpcf7-spinner { margin-top: 20px; margin-bottom: 20px; }

/* ----- 全体調整 -------------------- */
fieldset { padding: 0 !important; border: none !important; }

/* ----- 「メッセージ」文字数カウントダウン -------------------- */
.count-your-message-down { margin-top: 5px; font-size: .9em; text-align: right; }
/* ----- フォームのフィールド内のフォントを合わせる -------------------- */

button, input, select, text, textarea {
	font-family: "Noto Sans JP", "BIZ UDPGothic", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}
text, textarea { font-size: 1em !important; line-height: 1.6em !important; padding-left: .5em !important; }
@media (max-width: 768px) {
	button, input, select, text, textarea {
	font-size:1.1rem;
	}
}

input[type="file"],
input[type="text"], input[type="url"], input[type="password"], input[type="email"], input[type="search"], input[type="tel"], input[type="select"], input[type="number"], input[type="date"] textarea { 
	background-color:var(--color-bg-subtle); background-image:none; 
	border:none;
	box-shadow:0 0px 0px rgba(0, 0, 0, 0.075) inset; color: var(--color-text-muted);
	display:block; font-size:1.1rem; line-height:1.42857; padding:6px 12px; 
	transition:border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; 
	box-sizing:border-box; margin-top:5px; margin-bottom:5px; 
}

.wpcf7-select { 
	background-color:var(--color-white); background-image:none; 
	border: 1px solid var(--color-form-border);
	box-shadow:0 0px 0px rgba(0, 0, 0, 0.075) inset; color: var(--color-text-muted);
	display:inline-block; font-size:1.1rem; line-height:1.42857; padding:6px 12px; 
	transition:border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; 
	box-sizing:border-box; margin-top:5px; margin-bottom:5px; 
}

/* ----- フォームのインプットの赤影色の変更 -------------------- */

input[type="text"], input[type="password"], input[type="email"], input[type="search"], input[type="url"], input[type="tel"], input[type="number"], textarea { 
	background:var(--color-white); 
	border:1px solid var(--color-form-border); 
}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="search"]:focus, input[type="url"]:focus, input[type="tel"]:focus, textarea:focus { 
	background:var(--color-bg-subtle); border:1px solid var(--color-black); box-shadow:0 0 0px rgba(105, 105, 105 , 1); color:var(--color-black); outline:0; 
}

/* ----- 入力項目の長さ -------------------- */

.wpcf7 input[name="your-postalcode"],.wpcf7 input[name="number-of-copies"]
{ width:30%; height:35px !important; }

.wpcf7 input[name="your-name"], 
.wpcf7 input[name="your-title"], 
.wpcf7 input[name="your-name-kana"], 
.wpcf7 input[name="your-phone"], 
.wpcf7 input[name="your-fax"], 
.wpcf7 input[name="your-email"], .wpcf7 input[name="your-email_confirm"],
.wpcf7 input[name="your-occupation"],
.wpcf7 input[name="receipt-address"],
.wpcf7 input[name="election-place"],
.wpcf7 input[name="destination"] { 
	width:50%; 
	height:35px !important; 
}
.wpcf7 input[name="zipcode"] { width:30%; height:35px !important; }
.wpcf7 input[name="your-address"], .wpcf7 input[name="your-address1"], .wpcf7 input[name="your-address2"] { 
	width:100%; 
	height:35px !important; 
}
.wpcf7 textarea[name="your-message"] {margin-top:10px; width:100%; height:250px }
.wpcf7 textarea[name="your-message1"] {margin-top:10px; width:100%; height:250px }
.wpcf7 textarea[name="your-message2"] {margin-top:10px; width:100%; height:250px }

@media (max-width: 768px) { 
.wpcf7 input[name="your-postalcode"], .wpcf7 input[name="number-of-copies"],
.wpcf7 input[name="your-name"], 
.wpcf7 input[name="your-title"], 
.wpcf7 input[name="your-name-kana"], 
.wpcf7 input[name="your-phone"], 
.wpcf7 input[name="your-fax"], 
.wpcf7 input[name="your-email"], .wpcf7 input[name="your-email_confirm"],
.wpcf7 input[name="your-address"], .wpcf7 input[name="your-address1"], .wpcf7 input[name="your-address2"], 
.wpcf7 input[name="your-occupation"], 
.wpcf7 input[name="receipt-address"], 	
.wpcf7 textarea[name="your-message"],
.wpcf7 input[name="election-place"],
.wpcf7 input[name="destination"], 
.wpcf7 input[name="zipcode"],
.wpcf7 input[name="your-constituency"] { width:100%; }
}

/* ----- 送信ボタン /入力内容を編集するボタンのアレンジ -------------------- */

.wpcf7-submit { font-size: 1em; }

/* フォーム送信ボタン等の基本スタイルは style.css の .more 系ボタンと統合 */

.wpcf7-form-control.wpcf7-back.wpcf7c-elm-step2.wpcf7c-btn-back { 
	width: 50%; font-size:1.2rem; color: var(--color-primary); background-color: var(--color-white); 
	border: 1px solid var(--color-primary); padding: 20px 10px;
}

.wpcf7-form-control.wpcf7-back.wpcf7c-elm-step2.wpcf7c-btn-back:hover { 
	color:var(--color-white); background-color: var(--color-primary); cursor: hand; cursor:pointer;
}

/* ----- ファイルアップロードボタンのアレンジ -------------------- */

input[type="file"] {
	width: 30%; padding: 0; background: none;
}
input[type="file"]::file-selector-button {
	width: 4em;
	font-size:1.2rem; 
	font-weight: 700; 
	color: var(--color-primary); 
	background-color: var(--color-white); 
	border: 1px solid var(--color-primary);
	padding: .25em;
	margin-right: .5em;
    cursor: pointer;
}

@media (max-width: 768px) { 
input[type="file"] {
	width: 100%; 
	padding: 0; 
	background: none;
}
input[type="file"]::file-selector-button {
	width: 8em;
	font-size:1.2rem; 
	font-weight: 700; 
	color: var(--color-primary); 
	background-color: var(--color-white); 
	border: 1px solid var(--color-primary);
	padding: .25em;
	margin-right: .5em;
    cursor: pointer;
}
}

/* ----- 入力項目表示のアレンジ -------------------- */
.input-label { margin-top:20px; margin-bottom:10px; }
.input-label-bold { font-size: 1em; background: linear-gradient(transparent 80%, var(--color-policy-num) 20%); }

/* ----- 必須ラベル -------------------- */
.form-input-must { 
	display: inline-block; margin-left: 0.5em; height: 1.6em; padding: 0.3em 0.3em 0.5em 0.3em;
	font-size:0.8rem; line-height:110%; color:var(--color-white); font-weight: bold; background: var(--color-warning);;
}

/* ----- 確認画面状態での入力フィールドの色変更 -------------------- */
#main .wpcf7c-conf { background-color:var(--color-bg-subtle); color:black; border:2px solid var(--color-bg-subtle); box-shadow:none; }

/* ----- 警告文言の色変更 -------------------- */
.wpcf7 span.wpcf7-not-valid-tip { color:var(--color-warning); font-weight: bold;  }

/* ----- 警告のあるフィールドのハイライト -------------------- */
.wpcf7 .wpcf7-not-valid { background:var(--color-white); }

/* ----- レスポンスメッセージのアレンジ -------------------- */
.wpcf7 form.sent .wpcf7-response-output { margin: 2em 0em; border-color: var(--color-primary); background-color: var(--color-primary); color: var(--color-white); }
.wpcf7 .wpcf7-response-output { margin:10px 0 0; padding:8px 35px 8px 14px; text-shadow:0 1px 0 rgba(255, 255, 255, 0.5); }

/* ----- 送信ボタン押下後のバリデーションエラー表示のアレンジ -------------------- */
.wpcf7 .wpcf7-validation-errors { color:var(--color-warning); background-color:var(--color-white); border:2px solid var(--color-warning); }
.wpcf7 .wpcf7-spam-blocked { color:var(--color-warning); background-color:var(--color-white); border:2px solid var(--color-warning); }
.wpcf7 .wpcf7-response-output { color:var(--color-warning); background-color:var(--color-white); border:2px solid var(--color-warning); }

.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output {
	border-color: var(--color-warning); background-color: var(--color-warning); color: var(--color-white); margin: 2em 0em;
}

/* ----- 送信されましたメッセージ表示のアレンジ -------------------- */
.wpcf7 .wpcf7-mail-sent-ok { border-color: var(--color-primary); background-color: var(--color-primary); color: var(--color-white); }

/* ********** ラジオボタンとチェックボックス ********** */
.form-item-number .wpcf7-item { display:inline-block; margin:0em 1em 0 0; }

/* ----- ラジオボタン -------------------- */

.form-item-radio .wpcf7-list-item { display:inline-block; margin:.5em 1.5em 0 0; }
/* .form-item-radio .wpcf7-list-item:last-of-type { margin-top:10px; margin-right:0; } */
.form-item-radio label { cursor:pointer; display:inline-block; }
/* .form-item-radio label input { display:none; } */
/* 元の display: none; をこれに書き換える */
.form-item-radio label input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
/* Tabキーで選択されたときに、隣のラベル（文字など）に枠線を出す例 */
.form-item-radio label input:focus + span {
  outline: 2px solid #0073aa; /* 青い枠線など */
  outline-offset: 2px;
}
.form-item-radio label input:checked + span:after, .form-item-radio label input:checked + .wpcf7c-conf-hidden + span:after { 
	display:block;
}
.form-item-radio label > span { display:block; position:relative; }

@media (min-width: 769px) { 
.form-item-radio label > span { font-size:1.1rem; line-height:24px; padding-left:30px; }
}
@media (max-width: 768px) { .form-item-radio label > span { font-size:1.1rem; line-height: 3.5vw; padding-left: 4.5vw; }
}
@media (max-width: 600px) { .form-item-radio label > span { font-size:1.1rem; line-height: 5.5vw; padding-left: 6vw; }
}
.form-item-radio label > span:before, .form-item-radio label > span:after {
	border:1px solid var(--color-form-border); border-radius:50%; content:""; display:block; position:absolute;
}
.form-item-radio label > span:before { background-color:var(--color-white); left:0; top:0; }

@media (min-width: 769px) { .form-item-radio label > span:before { height:24px; width:24px; }}
@media (max-width: 768px) { .form-item-radio label > span:before { height: 3.6vw; width: 3.6vw; }}
@media (max-width: 600px) { .form-item-radio label > span:before { height: 4.6vw; width: 4.6vw; }}
.form-item-radio label > span:after { background-color:var(--color-form-check); border: 1px solid var(--color-form-check); display:none; }
@media (min-width: 769px) { .form-item-radio label > span:after { height:16px; left:4px; top:4px; width:16px; }}
@media (max-width: 768px) { .form-item-radio label > span:after { height: 2.4vw; left: 0.6vw; top: 0.6vw; width: 2.4vw; }}
@media (max-width: 600px) { .form-item-radio label > span:after { height: 3vw; left: 0.8vw; top: 0.8vw; width: 3vw;}}

/* ----- チェックボックス -------------------- */

.form-item-checkbox { margin-top:20px; }
.form-item-checkbox .wpcf7-list-item { display:block; margin:0.5em 1em 0.5em 0; }
.form-item-checkbox .wpcf7-list-item:last-of-type { margin-right:0; }
.form-item-checkbox label { cursor:pointer; display:inline-block; }
.form-item-checkbox label input { display:none; }
.form-item-checkbox label input:checked + span:after, .form-item-checkbox label input:checked + .wpcf7c-conf-hidden + span:after { display:block; }
.form-item-checkbox label > span { display:block; position:relative; }

@media (min-width: 769px) { .form-item-checkbox label > span { font-size:1.1rem; line-height:34px; padding-left:36px; }}
@media (max-width: 768px) { .form-item-checkbox label > span { font-size:1.1rem; line-height:160%; padding-left:6.4vw; }}
.form-item-checkbox label > span:before, .form-item-checkbox label > span:after { content:""; display:block; position:absolute; margin-top: 5px;}
.form-item-checkbox label > span:before { border: 1px solid var(--color-form-border); background-color:var(--color-white); left:0; top:0; }
@media (min-width: 769px) { .form-item-checkbox label > span:before { height:24px; width:24px; }}
@media (max-width: 768px) { .form-item-checkbox label > span:before { height:4.26667vw; width:4.26667vw; }}
.form-item-checkbox label > span:after { background-color:var(--color-form-check); display:none; }
@media (min-width: 769px) { .form-item-checkbox label > span:after { height:16px; left:4px; top:4px; width:16px; }}
@media (max-width: 768px) { .form-item-checkbox label > span:after { height:3.2vw; left:0.53333vw; top:0.53333vw; width:3.2vw; }}