@charset 'utf-8';

/* ================================================================
   jtps-contact.css — Contact Form 7 を ae_form.css の見た目に合わせる

   ae_form.css は archetype のフォームが出していたマークアップ前提で書かれている。
   CF7 は自前のマークアップを出すため、その差だけをここで吸収する。
   ae_form.css 自体は書き換えない（移植元との差分を増やさないため）。
   ================================================================ */


/* CF7 が挟むラッパー。レイアウトに影響させない */
#formblock .wpcf7 {
	margin: 0;
}

#formblock .wpcf7-form-control-wrap {
	display: block;
}


/* 入力欄。ae_form.css は .inputtext input / .selectmenu select を見ている */
#formblock .form_item .inputtext input,
#formblock .form_item .inputtext textarea,
#formblock .form_item .selectmenu select {
	width: 100%;
}

/* 長い URL を貼られても入力欄からはみ出さないようにする */
#formblock .form_item .inputtext textarea {
	overflow-wrap: anywhere;
}

/* 支店を URL で指定して来たときは選択を変更させない
   （ae_form.css の .form_item .readonly が pointer-events を切る。
     操作できないことが見て分かるよう、背景を淡くしてカーソルも変える） */
#formblock .form_item .selectmenu select.readonly {
	background-color: #f2f2f2;
	color: #666;
	cursor: default;
}


/* 同意チェックボックス

   ae_form.css は「input + label.checkbox」の隣接構造を前提に、label の
   :after で箱を、:before でチェックを描いている。
   CF7 の acceptance は「label > input + span.wpcf7-list-item-label」で
   label にクラスも付かないため、そのままでは箱が描かれない。
   同じ見た目を span 側に作り直す。色・寸法は ae_form.css に合わせている。 */

#formblock #agreement .wpcf7-list-item {
	margin: 0;
}

#formblock #agreement .wpcf7-list-item label {
	display: inline-block;
	cursor: pointer;
}

#formblock #agreement .wpcf7-list-item-label {
	display: inline-block;
	box-sizing: border-box;
	padding: .5em 1.5em;
	padding-left: 3em;
	vertical-align: middle;
	transition: .2s;
	position: relative;
}

#formblock #agreement .wpcf7-list-item-label:after {
	display: block;
	content: '';
	width: 16px;
	height: 16px;
	margin-top: -10px;
	border: 2px solid #bbb;
	border-radius: 5px;
	transition: .2s;
	position: absolute;
	top: 50%;
	left: 15px;
}

#formblock #agreement .wpcf7-list-item-label:before {
	display: block;
	content: '';
	width: 5px;
	height: 9px;
	margin-top: -7px;
	border-right: 3px solid #5c5a76;
	border-bottom: 3px solid #5c5a76;
	opacity: 0;
	transition: .2s;
	transform: rotate(45deg);
	position: absolute;
	top: 50%;
	left: 21px;
	z-index: 1;
}

#formblock #agreement .wpcf7-list-item label:hover .wpcf7-list-item-label {
	background-color: #e9e3ec;
	color: #000;
}

#formblock #agreement .wpcf7-list-item label:hover .wpcf7-list-item-label:after {
	border-color: #5c5a76;
}

#formblock #agreement input[type=checkbox]:checked ~ .wpcf7-list-item-label:after {
	border-color: #5c5a76;
}

#formblock #agreement input[type=checkbox]:checked ~ .wpcf7-list-item-label:before {
	opacity: 1;
}


/* 入力エラー。CF7 の吹き出しを ae_form.css の .error に寄せる */
#formblock .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	color: #c33;
	font-size: 1.2rem;
}

#formblock .wpcf7-response-output {
	margin: 20px 0 0;
	padding: 12px 16px;
	border: 2px solid #dadada;
	border-radius: 8px;
	font-size: 1.3rem;
}


/* 入力画面と確認画面の出し分け
   ae_form.css の #formblock.confirm .form_item > div がそのまま効くよう、
   確認用の値も .form_item の直下の div として置く */
/* 確認画面に出す値。
   改行はそのまま見せ、長い URL のように切れ目の無い文字列は枠内で折り返す
   （word-break: break-all だと日本語の文章まで不自然に切れるため anywhere を使う）。 */
#formblock .form_item > .confirmvalue {
	display: none;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	word-break: normal;
}

#formblock.confirm .form_item > .confirmvalue {
	display: block;
}

#formblock.confirm .form_item > .inputarea {
	display: none;
}

/* 確認画面では同意欄と説明文は出さない */
#formblock.confirm #agreement {
	display: none;
}


/* 「訂正する」ボタン

   モックの確認画面は <input class="reset" type="submit" value="訂正する"> で、
   見た目は ae_form.css の .form_submit .reset（グレー地）が持っている。
   こちらは前の画面に戻すだけで送信しないため type="button" にしており、
   ae_form.css の下地は input[type=submit] にしか当たらない。その分だけ足す。 */
#formblock .form_submit input[type=button] {
	height: 60px;
	border: none;
	cursor: pointer;
	transition: .2s;
	-webkit-appearance: none;
	appearance: none;
}

#formblock .form_submit .reset:hover {
	background-color: #999;
	color: #fff;
}

#formblock:not(.confirm) .form_submit .jtps-back {
	display: none;
}

/* 確認画面では「訂正する」と送信ボタンを横に並べる */
#formblock.confirm .form_submit {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	align-items: stretch;
}

#formblock.confirm .form_submit .submit,
#formblock.confirm .form_submit .reset {
	flex: 1 1 200px;
	width: auto;
	max-width: 320px;
	margin: 0;
}


/* 入力内容の不備をまとめて出す枠 */
#formblock #errormsg {
	display: none;
}

#formblock #errormsg.show {
	display: block;
}