/* =========================================================
   Childlife Contact Form
   THE THOR用
   ========================================================= */


/* =========================================================
   基本設定
   ========================================================= */

.cl-contact {
	--cl-primary: #333333;
	--cl-primary-hover: #555555;
	--cl-border: #d8d8d8;
	--cl-bg: #f7f7f7;
	--cl-error: #c62828;
	--cl-required: #d9534f;
	--cl-radius: 4px;

	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	box-sizing: border-box;

	/*
	 * THE THOR側
	 *
	 * .content p {
	 *     font-size: 15px;
	 *     color: #231815;
	 *     font-family: "Noto Sans JP";
	 * }
	 *
	 * と同じ基本設定
	 */
	font-family: "Noto Sans JP", sans-serif;
	font-size: 15px;
	color: #231815;
	line-height: 1.8;
}


/* =========================================================
   box-sizing統一
   ========================================================= */

.cl-contact *,
.cl-contact *::before,
.cl-contact *::after {
	box-sizing: border-box;
}


/* =========================================================
   フォーム部品のフォント統一
   ========================================================= */

.cl-contact input,
.cl-contact textarea,
.cl-contact button,
.cl-contact select {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}


/* =========================================================
   フォーム1行
   ========================================================= */

.cl-contact__row {
	display: grid;
	grid-template-columns: 230px minmax(0, 1fr);
	gap: 30px;

	padding: 25px 0;

	border-bottom: 1px solid var(--cl-border);
}


/* =========================================================
   項目名
   ========================================================= */

.cl-contact__label {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	font-weight: 600;
	line-height: 1.8;
}


/* =========================================================
   必須ラベル
   ========================================================= */

.cl-required {
	display: inline-block;

	margin-left: 6px;
	padding: 2px 7px;

	border-radius: 3px;

	background: var(--cl-required);
	color: #ffffff;

	font-family: inherit;
	font-size: 11px;
	font-weight: normal;
	line-height: 1.5;

	vertical-align: middle;
}


/* =========================================================
   入力エリア
   ========================================================= */

.cl-contact__field {
	min-width: 0;
}


/* =========================================================
   テキスト入力
   ========================================================= */

.cl-contact input[type="text"],
.cl-contact input[type="email"],
.cl-contact input[type="tel"],
.cl-contact textarea {
	display: block;

	width: 100%;
	max-width: 100%;

	margin: 0;
	padding: 12px 14px;

	border: 1px solid #bbbbbb;
	border-radius: var(--cl-radius);

	background: #ffffff;

	font-family: inherit;
	font-size: inherit;
	font-weight: 400;
	color: #231815;

	line-height: 1.6;

	box-shadow: none;

	-webkit-appearance: none;
	appearance: none;
}


/* =========================================================
   placeholder
   ========================================================= */

.cl-contact input::placeholder,
.cl-contact textarea::placeholder {
	color: #999999;
	opacity: 1;
}


/* =========================================================
   textarea
   ========================================================= */

.cl-contact textarea {
	min-height: 200px;
	resize: vertical;
}


/* =========================================================
   フォーカス
   ========================================================= */

.cl-contact input[type="text"]:focus,
.cl-contact input[type="email"]:focus,
.cl-contact input[type="tel"]:focus,
.cl-contact textarea:focus {
	border-color: #555555;

	outline: 2px solid rgba(0, 0, 0, 0.12);
	outline-offset: 1px;

	box-shadow: none;
}


/* =========================================================
   ラジオボタングループ
   ========================================================= */

.cl-contact__radio-group {
	display: flex;
	flex-direction: column;
	gap: 12px;
}


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

.cl-contact__radio {
	display: flex;
	align-items: center;
	gap: 8px;

	margin: 0;

	font-family: inherit;
	font-size: inherit;
	color: inherit;

	cursor: pointer;
}


/* =========================================================
   ラジオボタン本体
   ========================================================= */

.cl-contact__radio input[type="radio"] {
	flex: 0 0 auto;

	width: 18px;
	height: 18px;

	margin: 0;

	cursor: pointer;
}


/* =========================================================
   ラジオボタン文字
   ========================================================= */

.cl-contact__radio span {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	line-height: 1.6;
}


/* =========================================================
   個人情報保護方針
   ========================================================= */

.cl-contact__privacy {
	margin-top: 30px;
	padding: 20px;

	background: var(--cl-bg);

	font-family: inherit;
	font-size: inherit;
	color: inherit;

	text-align: center;
}


/* =========================================================
   個人情報保護方針 label
   ========================================================= */

.cl-contact__privacy label {
	display: inline-flex;
	align-items: center;
	gap: 8px;

	margin: 0;

	font-family: inherit;
	font-size: inherit;
	color: inherit;

	cursor: pointer;
}


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

.cl-contact__privacy input[type="checkbox"] {
	flex: 0 0 auto;

	width: 18px;
	height: 18px;

	margin: 0;

	cursor: pointer;
}


/* =========================================================
   エラーメッセージ
   ========================================================= */

.content .cl-contact p.cl-contact__error {
    margin: 8px 0 0;
    color: #c62828;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 500;
}


/* =========================================================
   エラー概要
   ========================================================= */

.cl-contact__error-summary,
.cl-contact__system-error {
	margin-bottom: 25px;
	padding: 15px 20px;

	border-left: 4px solid var(--cl-error);

	background: #fff5f5;

	color: var(--cl-error);
}


/* =========================================================
   エラー概要内のp
   ========================================================= */

.content .cl-contact__error-summary p,
.content .cl-contact__system-error p {
	margin: 0;

	font-family: inherit;
	font-size: inherit;
	color: inherit;
}


/* =========================================================
   確認ボタン
   ========================================================= */

.cl-contact__submit {
	margin-top: 35px;

	text-align: center;
}


/* =========================================================
   ボタン共通
   ========================================================= */

.cl-contact__submit button,
.cl-contact__actions button {
	display: inline-block;

	min-width: 220px;

	margin: 0;
	padding: 14px 30px;

	border: 0;
	border-radius: var(--cl-radius);

	background: var(--cl-primary);

	font-family: inherit;
	font-size: 15px;
	font-weight: 600;

	color: #ffffff;

	line-height: 1.5;

	text-align: center;
	text-decoration: none;

	cursor: pointer;

	transition:
		background-color 0.2s ease,
		opacity 0.2s ease;
}


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

.cl-contact__submit button:hover,
.cl-contact__actions button:hover {
	background: var(--cl-primary-hover);

	color: #ffffff;

	opacity: 1;
}


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

.cl-contact__submit button:focus-visible,
.cl-contact__actions button:focus-visible {
	outline: 2px solid #333333;
	outline-offset: 3px;
}


/* =========================================================
   Honeypot
   Bot対策用
   ========================================================= */

.cl-contact__hp {
	position: absolute !important;

	left: -9999px !important;

	width: 1px !important;
	height: 1px !important;

	overflow: hidden !important;
}


/* =========================================================
   確認画面
   ========================================================= */

.cl-contact__confirm-title {
	text-align: center;
}


/*
 * h2の
 *
 * font-size
 * font-weight
 * margin-bottom
 * padding-bottom
 *
 * についてはTHE THOR側
 *
 * .content h2
 *
 * の設定を使用するため、
 * ここでは指定しない。
 */


/* =========================================================
   確認画面リスト
   ========================================================= */

.cl-contact__confirm-list {
	margin: 0;
	padding: 0;
}


/* =========================================================
   確認画面1行
   ========================================================= */

.cl-contact__confirm-row {
	display: grid;

	grid-template-columns: 230px minmax(0, 1fr);

	gap: 30px;

	padding: 22px 0;

	border-bottom: 1px solid var(--cl-border);

	font-family: inherit;
	font-size: inherit;
	color: inherit;
}


/* =========================================================
   確認画面 項目名
   ========================================================= */

.cl-contact__confirm-row dt {
	margin: 0;
	padding: 0;

	font-family: inherit;
	font-size: inherit;
	font-weight: 600;

	color: inherit;
	line-height: 1.8;
}


/* =========================================================
   確認画面 内容
   ========================================================= */

.cl-contact__confirm-row dd {
	margin: 0;
	padding: 0;

	font-family: inherit;
	font-size: inherit;
	font-weight: 400;

	color: inherit;
	line-height: 1.8;

	overflow-wrap: anywhere;
	word-break: break-word;
}


/* =========================================================
   確認画面 ボタンエリア
   ========================================================= */

.cl-contact__actions {
	display: flex;

	justify-content: center;
	align-items: center;

	gap: 20px;

	margin-top: 35px;
}


/* =========================================================
   戻るボタン
   ========================================================= */

.cl-contact__actions .cl-contact__back {
	background: #777777;
}


/* =========================================================
   戻るボタン hover
   ========================================================= */

.cl-contact__actions .cl-contact__back:hover {
	background: #666666;
}


/* =========================================================
   完了画面
   ========================================================= */

.cl-contact__complete {
	padding: 45px 30px;

	background: var(--cl-bg);

	text-align: center;
}


/*
 * 完了画面のh2は
 * THE THOR側 .content h2 の設定を使用
 */


/* =========================================================
   完了画面本文
   ========================================================= */

.content .cl-contact__complete p {
	margin-top: 0;
	margin-bottom: 0;

	font-family: inherit;
	font-size: inherit;
	color: inherit;

	line-height: 1.8;
}

/* =========================================================
   アクセシビリティ
   ========================================================= */

.cl-contact__fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}


/*
 * スクリーンリーダー用
 *
 * 画面上には表示しないが、
 * 読み上げソフトからは認識可能。
 */
.cl-contact__sr-only {
	position: absolute !important;

	width: 1px !important;
	height: 1px !important;

	padding: 0 !important;
	margin: -1px !important;

	overflow: hidden !important;

	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;

	white-space: nowrap !important;

	border: 0 !important;
}


/* =========================================================
   スマートフォン
   ========================================================= */

@media screen and (max-width: 767px) {

	/* -----------------------------------------------------
	   基本
	   ----------------------------------------------------- */

	.cl-contact {
		width: 100%;
		max-width: 100%;
		padding: 0 15px;
	}


	/* -----------------------------------------------------
	   入力フォーム
	   ----------------------------------------------------- */

	.cl-contact__row {
		grid-template-columns: 1fr;

		gap: 10px;

		padding: 20px 0;
	}


	/* -----------------------------------------------------
	   確認画面
	   ----------------------------------------------------- */

	.cl-contact__confirm-row {
		grid-template-columns: 1fr;

		gap: 8px;

		padding: 20px 0;
	}


	/* -----------------------------------------------------
	   確認画面ボタン
	   ----------------------------------------------------- */

	.cl-contact__actions {
		flex-direction: column-reverse;

		gap: 12px;
	}


	/* -----------------------------------------------------
	   ボタン
	   ----------------------------------------------------- */

	.cl-contact__submit button,
	.cl-contact__actions button {
		width: 100%;
		min-width: 0;
	}


	/* -----------------------------------------------------
	   個人情報保護方針
	   ----------------------------------------------------- */

	.cl-contact__privacy {
		text-align: left;
	}


	.cl-contact__privacy label {
		align-items: flex-start;
	}

}