@charset "UTF-8";

/**
 * フォームの見た目（日本語 /inquiry/、English /en/contact/ のみ）
 * 管理場所：wp-content/plugins/aikoh-forms/assets/css/form-style.css（読み込みは inc/form.php）
 *
 * 今の MW WP Form のフォームと同じ見た目にするため、子テーマ（gensen_tcd050-child・-child-en、1.14）の
 * style.css の「MW WP Form Style Business」の指定を、.mw_wp_form から .aikoh-form に置き換えて写した。
 * 子テーマの指定は日英で同じ。色は子テーマのまま（必須の印 #08427C、枠 #ddd、見出しの背景 #f5f5f5）。
 * フォント（font-family）はテーマに任せ、ここでは指定しない。
 *
 * 親テーマ（gensen_tcd050 2.1.5）の css/design-plus.css に CF7 用の指定（.wpcf7 の枠と背景、.wpcf7 p の文字の大きさ、
 * .wpcf7 input.wpcf7-submit の黒いボタンなど）があり、この CSS より後に読み込まれる。そのため、セレクタの先頭に .wpcf7 を付けて
 * 詳細度で上回るようにしている。送信ボタンは .wpcf7 .aikoh-form .aikoh-form__btn（テーマは .wpcf7 input.wpcf7-submit）。
 */

/* =========================================================
   テーマの CF7 用の指定を打ち消す（design-plus.css）
========================================================= */

/* 枠・背景・内側のあきを外し、フォームを本文の幅いっぱいに広げる。margin はテーマが !important で付けているので同じく !important */
.post_content .wpcf7 {
	border: 0;
	background: none;
	font-size: inherit;
	margin: 0 0 2.5em !important;
}

.post_content .wpcf7 form {
	margin: 0;
}

/* テーマは .wpcf7 p を 12px にしている */
.wpcf7 .aikoh-form p {
	font-size: inherit;
}

/* テーマは入力欄を赤みの背景（pink）にしている。枠の色だけで示す */
.wpcf7 .aikoh-form .wpcf7-not-valid {
	background: #fff;
}

/* =========================================================
   画面の切り替え（入力・確認・完了）
========================================================= */

/* form-confirm.js が hidden 属性で切り替える。display を指定するほかのルールがあっても隠れるようにする。 */
.wpcf7 .aikoh-form__step[hidden] {
	display: none;
}

/* =========================================================
   表（入力画面・確認画面）
========================================================= */

.wpcf7 .aikoh-form {
	margin: 0 0 1em;
}

.wpcf7 .aikoh-form table {
	margin: 0 0 1em;
	table-layout: fixed;
	border-collapse: collapse;
	border: #ddd solid 1px;
	font-size: 100%;
	width: 100%;
}

.wpcf7 .aikoh-form table th,
.wpcf7 .aikoh-form table td {
	border: #ddd solid 1px;
	font-size: 100%;
	font-weight: normal;
	padding: 1.2em;
	text-align: left;
	vertical-align: top;
}

.wpcf7 .aikoh-form table th {
	background-color: #f5f5f5;
	width: 30%;
}

.wpcf7 .aikoh-form table td {
	background-color: #fff;
}

/* 確認画面の値。テキストエリアの改行をそのまま出す（値は form-confirm.js が textContent で入れる） */
.wpcf7 .aikoh-form__confirm-table td {
	white-space: pre-wrap;
	word-break: break-word;
}

@media screen and (max-width: 970px) {
	.wpcf7 .aikoh-form table,
	.wpcf7 .aikoh-form table tbody,
	.wpcf7 .aikoh-form table tr,
	.wpcf7 .aikoh-form table th,
	.wpcf7 .aikoh-form table td {
		display: block;
		width: auto;
	}

	.wpcf7 .aikoh-form table {
		border-right: none;
		border-bottom: none;
		border-left: none;
	}

	.wpcf7 .aikoh-form table th {
		border-top: none;
		padding: .5em 1em;
	}

	.wpcf7 .aikoh-form table td {
		border-top: none;
	}
}

/* =========================================================
   必須の印・補足
========================================================= */

.wpcf7 .aikoh-form__required {
	background-color: #08427C;
	border-radius: 2px;
	color: #fff;
	float: right;
	font-size: 11px;
	padding: .2em .4em;
	position: relative;
}

.wpcf7 .aikoh-form__note {
	color: #999;
	display: block;
	font-size: 12px;
	margin: 5px 0 0;
}

.wpcf7 .aikoh-form__lead {
	margin: 0 0 1em;
}

/* =========================================================
   入力欄
========================================================= */

.wpcf7 .aikoh-form input,
.wpcf7 .aikoh-form select,
.wpcf7 .aikoh-form textarea {
	box-sizing: border-box;
	max-width: 100%;
	font-size: 100%;
	margin: 0;
	vertical-align: baseline;
}

.wpcf7 .aikoh-form input[type="text"],
.wpcf7 .aikoh-form input[type="email"],
.wpcf7 .aikoh-form input[type="tel"],
.wpcf7 .aikoh-form textarea {
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: .2em .4em;
	outline: 0;
	width: 100%;
}

.wpcf7 .aikoh-form select {
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: .2em .4em;
	min-width: 12em;
}

.wpcf7 .aikoh-form input[type="text"]:focus,
.wpcf7 .aikoh-form input[type="email"]:focus,
.wpcf7 .aikoh-form input[type="tel"]:focus,
.wpcf7 .aikoh-form textarea:focus,
.wpcf7 .aikoh-form select:focus {
	border: 1px solid #97c1ec;
}

.wpcf7 .aikoh-form textarea {
	overflow: auto;
	vertical-align: top;
	height: 15em;
}

/* CF7 の欄の囲み（span）は、行の中で1つずつ改行する */
.wpcf7 .aikoh-form .wpcf7-form-control-wrap {
	display: block;
}

/* チェックボックス（English の Inquiry/Request）。今の MW WP Form と同じく横に並べる */
.wpcf7 .aikoh-form .wpcf7-list-item {
	display: inline-block;
	margin: 0 1em 0 0;
}

.wpcf7 .aikoh-form .wpcf7-list-item label {
	display: inline-block;
}

.wpcf7 .aikoh-form .wpcf7-list-item input[type="checkbox"] {
	margin: 0 5px 0 0;
}

/* =========================================================
   文字数（form-confirm.js が data-count の行に足す）
========================================================= */

.wpcf7 .aikoh-form__count {
	display: block;
	margin: 5px 0 0;
	color: #999;
	font-size: 12px;
	text-align: right;
}

.wpcf7 .aikoh-form__count.is-over {
	color: #b70000;
	font-weight: bold;
}

/* =========================================================
   担当営業所（日本語のお問い合わせ。branch.js が書き換える）
========================================================= */

/* 子テーマの .post_content td p { margin: 0 } より詳細度が高いので、上のあきが効く */
.wpcf7 .aikoh-form__branch {
	margin: 12px 0 0;
}

.wpcf7 .aikoh-form__branch-name {
	display: inline-block;
	padding: .2em .6em;
	border: 1px dashed #c50018;
	color: #c50018;
}

.wpcf7 .aikoh-form__branch-name.is-selected {
	border-style: solid;
	font-weight: bold;
}

/* =========================================================
   エラー
========================================================= */

/* CF7 と form-confirm.js が出すエラーの文。色は子テーマの .mw_wp_form .error と同じ */
.wpcf7 .aikoh-form .wpcf7-not-valid-tip {
	color: #b70000;
	display: block;
	font-size: 100%;
	margin: 5px 0 0;
}

.wpcf7 .aikoh-form .wpcf7-not-valid {
	border-color: #b70000;
}

/* =========================================================
   ボタン
========================================================= */

.wpcf7 .aikoh-form__buttons {
	text-align: center;
}

.wpcf7 .aikoh-form__buttons > * {
	margin: 0 .5em;
}

.wpcf7 .aikoh-form .aikoh-form__btn {
	border: 1px solid #ccc;
	border-color: #ccc #ccc #bbb #ccc;
	border-radius: 3px;
	background: #e6e6e6;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5),
		inset 0 15px 17px rgba(255, 255, 255, 0.5),
		inset 0 -5px 12px rgba(0, 0, 0, 0.05);
	color: rgba(0, 0, 0, .8);
	cursor: pointer;
	-webkit-appearance: button;
	font-size: 100%;
	line-height: 1;
	padding: .7em 1.5em;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
	vertical-align: middle; /* 「戻る」（button）と「送信する」（CF7 の input）の上下をそろえる */
}

/* 送信ボタン（CF7 の [submit]）。テーマの .wpcf7 input.wpcf7-submit（黒い 225px のブロック）を打ち消す。
   テーマは border を !important で消しているので、枠だけ !important で付け直す */
.wpcf7 .aikoh-form input.aikoh-form__btn {
	position: static;
	display: inline-block;
	width: auto;
	height: auto;
	margin: 0 .5em;
	border: 1px solid #ccc !important;
	border-color: #ccc #ccc #bbb #ccc !important;
	vertical-align: middle;
	text-align: center;
	transition: none;
}

.wpcf7 .aikoh-form .aikoh-form__btn:hover {
	background: #e6e6e6; /* テーマの .wpcf7 input.wpcf7-submit:hover（#666）を打ち消す */
	border-color: #ccc #bbb #aaa #bbb;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8),
		inset 0 15px 17px rgba(255, 255, 255, 0.8),
		inset 0 -5px 12px rgba(0, 0, 0, 0.02);
}

.wpcf7 .aikoh-form .aikoh-form__btn:focus,
.wpcf7 .aikoh-form .aikoh-form__btn:active {
	border-color: #aaa #bbb #bbb #bbb;
	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.5),
		inset 0 2px 5px rgba(0, 0, 0, 0.15);
}

/* 送信中は CF7 が送信ボタンの後ろにスピナーを出す（CF7 の styles.css では幅 24px・左右に 24px のあきの inline-block）。
   行の中に置いたままだとボタンの並びが左にずれ、行の高さにも響くので、位置だけ取り出して送信ボタンの右に重ねる */
.wpcf7 .aikoh-form .wpcf7-spinner {
	position: absolute;
	margin: 8px 0 0 12px; /* ボタンの高さ（約40px）の中ほどに置く */
}