/* ----------------------------------------------------
※ お問い合わせページで使用するCSSのみが書いてあります
※ お問い合わせページのみで読み込まれます
---------------------------------------------------- */

/* contact
------------------------------------------------------------------------------*/

/* 問い合わせフォーム専用 パンくず */
.contact .form-pankuzu {
	margin-bottom: 60px;
}

.contact .form-pankuzu .body {
	text-align: center;
}

.contact .form-pankuzu .partition {
	color: #484848;
	margin: 0 9px 0 11px;
}

.contact .form-pankuzu span {
	display: inline-block;
	font-size: 12px;
	letter-spacing: 2px;
	line-height: 1;
	vertical-align: middle;
}

.contact .form-pankuzu .location {
	background: #adadad;
	border-radius: 2px;
	color: #fff;
	padding: 10px 13px 10px 15px;
}

.contact .form-pankuzu .location.here {
	background: #464646;
}

.contact .form-pankuzu .location .mb {
	display: none;
}

/* フォーム本体 */
.contact .form-body {}

.contact .form-inner-block + .form-inner-block {
	margin-top: 60px;
}

.contact .form-body .hd3 {
	width: 90%;
}

.contact-table {
	line-height: 2;
	margin: 0 auto;
	width: 90%;
}

.contact-table th {
	background: #f7f7f7;
	border-bottom: 1px solid #fff;
	color: #393939;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: 3px;
	padding: 12px 20px;
	padding-right: 80px;/* hissuアイコンぶん */
	text-align: left;
	width: 30%;
}

.contact-table td {
	background: #fff;
	border-bottom: 1px solid #eee;
	color: #333;
	font-size: 14px;
	letter-spacing: 2px;
	padding: 12px 20px;
}

/* inputエリアの体裁 */
.contact-table .sei + .mei {
	margin-left: 10px;
}

.contact-table .sei,
.contact-table .mei {
	display: inline-block;
	font-size: 13px;
	letter-spacing: 0;
	max-width: calc(50% - 10px);
}

.contact-table .sei .textarea,
.contact-table .mei .textarea {
	width: 156px;
}

.contact-table .mail-confirm .komejiru {
	display: block;
	margin: 6px 0 0;
	width: auto;
	line-height: 1.7;
}

.contact-table .tel .komejiru {
	display: inline-block;
	margin: 0;
	width: auto;
	line-height: 1.7;
}

.contact-table .color-red {
	color: #ef0005;
}

.contact-table .textarea {
	border: 1px solid #cdcdcd;
	border-radius: 3px;
	font-size: 16px;
	letter-spacing: .06em;
	padding: 8px 6px;
}

.contact-table .mail input,
.contact-table .mail-confirm input {/* 入力欄 wide */
	width: calc(100% - 14px);
}

.contact-table textarea {/* 複数行テキスト */
	resize: vertical;
	width: calc(100% - 14px);
}

/* input,textarea要素内のplaceholder属性に対するCSS */
.contact-table ::placeholder {/*default*/
	color: #aaa;
}
.contact-table :-ms-input-placeholder {/*IE*/
	color: #aaa;
}
.contact-table ::-ms-input-placeholder {/*Edge*/
	color: #aaa;
}

.contact-table :focus::placeholder {/*default*/
	color: #d6d6d6;
}

.contact-table :focus:-ms-input-placeholder {/*IE*/
	color: #d6d6d6;
}

.contact-table :focus::-ms-input-placeholder {/*Edge*/
	color: #d6d6d6;
}

/* 必須or任意のアイコン表示 */
.hissu {
	position: relative;
}

.hissu:after {
	border-radius: 2px;
	color: #fff;
	content: "";
	display: inline-block;
	font-size: 12px;
	letter-spacing: 2px;
	line-height: 20px;
	padding: 1px 6px 1px 9px;
	position: absolute;
	right: 20px;
	top: calc(50% - 11px);/*上下中央に位置させる場合*/
	width: auto;
}

.hissu.yes:after {/* 必須 */
	background: #dc080c;
	content: "必須";
}

.hissu.no:after {/* 任意 */
	background: #999;
	content: "任意";
}

/* 個人情報取り扱いの確認 */
.deal-with-personal-info {
	margin: 90px auto 0;
	width: 90%;
}

.deal-with-personal-info dl {
	margin: 0;
}

.deal-with-personal-info dt {
	border-bottom: 2px solid #eee;
	color: #393939;/* hd3のテキスト色に合わせる */
	font-family: 'Noto Serif JP', "Yu Mincho", serif;
	font-size: 17px;
	font-weight: 500;
	letter-spacing: 2px;
	line-height: 1.3;
	margin-bottom: 30px;
	padding-bottom: 20px;
	text-align: center;
}

.deal-with-personal-info dd {
	background: #f7f7f7;
	font-size: 13px;
	line-height: 2;
	margin: 0;
	padding: 20px;
}

.deal-with-personal-info dd a {
	margin: 0 3px;
	text-decoration: underline;
}

.deal-with-personal-info dd a:hover {
	text-decoration: none;
}

.deal-with-personal-info .check-agree-wrap {
	margin-top: 15px;
	padding: 20px;
	text-align: center;
}

.deal-with-personal-info .checkbox {
	vertical-align: middle;
}

.deal-with-personal-info .check-agree {
	border-bottom: 2px dotted #dc080c;
	display: inline-block;
	font-size: 15px;
	font-weight: bold;
	vertical-align: middle;
}

/* フォーム下のアクションボタン */
.contact .form-next-button-wrap {
	margin: 90px auto 60px;
	text-align: center;
	width: 90%;
}

.contact .form-next-button-wrap .button {
	background: #484848;
	border: none;
	color: #fff;
	font-size: 1rem;
	font-weight: inherit;
	letter-spacing: 2px;
	min-width: 260px;
	padding: 12px 28px 12px 30px;
}

.contact .form-next-button-wrap .button:hover {
	background-color: #666;
	color: #fff;
}

.contact .form-next-button-wrap .button.form-reset-button {/* resetボタン用 */
	background: #fff;
	border: 2px solid #ef0005;
	color: #ef0005;
	font-size: 1rem;
	font-weight: inherit;
	letter-spacing: 2px;
	padding: 10px 20px 10px 22px;
}

.contact .form-next-button-wrap .button.form-reset-button:hover {
	background-color: #fff5f5;
}

.contact .form-next-button-wrap > span {
	display: inline-block;
	margin: 0 20px;
}


/* error
----------------------------------------*/

.error-msg-txt {
/*	display: none;*/
	margin: 0 auto;
	width: 90%;
}

.error-msg-txt p {
	background: #fff6f6;
	border: 1px solid #f98183;
	color: #dc080c;
	font-size: 16px;
	font-weight: bold;
	padding: 10px;
	text-align: center;
}

/* エラー時のフォームパーツ系見た目 */
.contact-table input[type=text].error,
.contact-table input[type=tel].error,
.contact-table input[type=email].error,
.contact-table textarea.error,
.check-agree-wrap.error,
.complete-txt.fail {
	background: #fff6f6;
	border: 1px solid #f98183;
}


/* confirm --- 入力内容確認画面
----------------------------------------*/

.contact.confirm {}

.confirm-form .contact-table p {
	color: #323232;
	font-size: 15px;
}

/* 個人情報取り扱いの確認 */
.confirm-form .deal-with-personal-info .fa-check {
	color: #4caf50;
	font-size: 21px;
	margin-right: 6px;
	vertical-align: middle;
}

/* フォーム下のアクションボタン */
.contact .form-next-button-wrap .button.form-prev-button {/* prevボタン用 */
	background: #fff;
	border: 2px solid #ef0005;
	color: #ef0005;
	font-size: 1rem;
	font-weight: inherit;
	letter-spacing: 2px;
	padding: 10px 20px 10px 22px;
}

.contact .form-next-button-wrap .button.form-prev-button:hover {
	background-color: #fff5f5;
}


/* complete --- 送信完了画面
----------------------------------------*/

.contact.complete {}

.contact .complete {
	min-height: 300px;
}

.contact .complete .hd2 {
	margin-top: 90px;
}

.contact .complete-inner-block {
	margin: 60px auto 0;
	width: 90%;
}

.contact .complete-txt {
	font-size: 17px;
	line-height: 1.8;
	text-align: center;
}

.contact .complete-txt.fail {
	color: #dc080c;
	font-weight: bold;
	padding: 20px;
}

.contact .complete-txt .timestamp {
	display: inline-block;
	font-size: 18px;
	font-weight: bold;
	margin: 0 6px;
}