@charset "utf-8";
/* お問い合わせフォーム（既存 #detailCts table のスタイルを土台にする） */

/* ステップ表示（矢印型）
   各ステップを clip-path で矢羽根形に切り抜き、隣と少し重ねて白い隙間の区切りを作る */
#detailCts ol.contact-steps {
	display: flex;
	width: 740px;
	margin: 10px auto 25px;
	padding: 0;
	list-style: none;
}
#detailCts ol.contact-steps li {
	flex: 1 1 0;
	height: 40px;
	margin: 0;
	padding: 0 14px;
	line-height: 40px;
	text-align: center;
	font-weight: bold;
	color: #777;
	background: #e6e6e6;
	box-sizing: border-box;
	list-style: none;
	/* 左：切り欠き / 右：矢印の先端 */
	clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%);
}
#detailCts ol.contact-steps li + li {
	margin-left: -10px; /* 矢印14px − 隙間4px */
}
#detailCts ol.contact-steps li:first-child {
	clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
}
#detailCts ol.contact-steps li:last-child {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 14px 50%);
}
#detailCts ol.contact-steps li.is-current {
	color: #fff;
	background: #2d9928;
}

/* テーブル */
#detailCts table.contact-table th {
	width: 170px;
	vertical-align: top;
	white-space: nowrap;
}
#detailCts table.contact-table td {
	vertical-align: top;
}
#detailCts .contact-required {
	margin-left: 6px;
	font-size: 11px;
	font-weight: normal;
	color: #d00;
}

/* 入力欄 */
#detailCts .contact-input {
	width: 100%;
	padding: 5px 6px;
	font-size: 14px;
	font-family: inherit;
	border: 1px solid #aaa;
	border-radius: 2px;
	background: #fff;
	box-sizing: border-box;
}
#detailCts .contact-input:focus {
	border-color: #2d9928;
	outline: 2px solid #ade3ab;
}
#detailCts .contact-input-short {
	width: 10em;
}
#detailCts .contact-input-middle {
	width: 16em;
}
#detailCts .contact-input-confirm {
	margin-top: 6px;
}
#detailCts .contact-textarea {
	height: 14em;
	line-height: 1.5;
	resize: vertical;
}
#detailCts .contact-note {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: #666;
}

/* 添付 */
#detailCts table.contact-table p.contact-attached {
	margin: 0 0 8px;
}

/* エラー */
#detailCts table.contact-table p.contact-error {
	margin: 4px 0 0;
	color: #d00;
	font-size: 13px;
}
#detailCts p.contact-form-error {
	width: 710px;
	margin: 0 auto 15px;
	padding: 10px 15px;
	color: #d00;
	background: #fff0f0;
	border: 1px solid #e5a0a0;
}

/* ボタン */
#detailCts p.contact-buttons {
	margin: 40px auto 20px;
	text-align: center;
}
#detailCts .contact-btn {
	display: inline-block;
	min-width: 220px;
	padding: 9px 24px;
	font-size: 15px;
	font-family: inherit;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	border: 1px solid;
	border-radius: 2px;
	cursor: pointer;
	box-sizing: border-box;
}
#detailCts .contact-btn-primary,
#detailCts a.contact-btn-primary[href^="http"] {
	color: #fff;
	background: #2d9928; /* フッターと同色 */
	border-color: #0b7007;
	padding: 9px 24px;
}
#detailCts .contact-btn-primary:hover {
	background: #0b7007;
	text-decoration: none;
}
#detailCts .contact-btn-secondary {
	color: #333;
	background: #ddd;
	border-color: #999;
}
#detailCts .contact-btn-secondary:hover {
	background: #ccc;
}
#detailCts .contact-btn[disabled] {
	opacity: 0.6;
	cursor: default;
}
/* 確認画面で縦に並ぶ「送信」「入力内容修正」の間隔 */
#detailCts p.contact-buttons + p.contact-buttons {
	margin-top: 15px;
}

/* 完了画面 */
#detailCts .contact-complete {
	padding: 30px 0 10px;
	text-align: center;
}
#detailCts .contact-complete p {
	margin: 0 auto 20px;
	line-height: 2;
}