@charset "utf-8";

/*---

フォーム＆サンクスページの背景色や文字色の変更は、
一番下に纏めてあるので、そちらを参照

---*/

/***------------------------------------------
*
*　form
*
------------------------------------------***/
.form_area {
	position: relative;
	margin: 0 auto;
	padding: 14px;
	width: 100%;
	border-style: solid;
	border-width: 3px;
}
.form_area p.form_ttl {
	padding: 3px;
}
.form_area p.att {
	font-size: 85%;
	color: #e3040f;
}
.form_area table.form_table {
	margin: 24px auto;
	padding: 12px;
	width: 100%;
	font-size: 100%;
}
.form_area table.form_table th {
	padding: 12px 0;
	width: 35%;
	text-align: left;
}

.form_area table.form_table td {
	padding: 12px 0;
	width: 65%;
	text-align: left;
	vertical-align: middle;
}
@media screen and (max-width: 750px) {
	.form_area table.form_table {
		margin: 12px auto;
		font-size: 90%;
	}
	.form_area table.form_table th {
		padding: 6px 0;
		width: 25%;
	}
	.form_area table.form_table td {
		padding: 6px 0;
		width: 75%;
	}
}
.form_area table.form_table td ul {
	display: flex;
	justify-content: space-between;
}
@media screen and (max-width: 475px) {
	.form_area table.form_table td ul {
		flex-wrap: wrap;
	}
}
/*必須と※マークを表示*/
.form_area table.form_table th i span {
	display: none;
}
@media screen and (min-width: 751px) {
	.form_area table.form_table th i:after {
		display: inline-block;
		margin-left: 6px;
		padding: 2px 6px;
		background-color: #e3040f;
		color: #fff;
		font-size: 71.42%;
		font-style: normal;
		line-height: 1.2;
	}
	.form_area table.form_table th:nth-child(1) i:after {
		content: "必須";
	}
	.form_area table.form_table th:nth-child(1) i.discretionary:after {
		content: "任意";
		background-color: #008;
	}
}
@media screen and (max-width: 750px) {
	.form_area table.form_table th i:after {
		display: inline-block;
		margin-left: 2px;
		color: #e3040f;
		font-size: 71.42%;
		font-style: normal;
		font-weight: bold;
		line-height: 1.2;
	}
	.form_area table.form_table th:nth-child(1) i:after {
		content: "※";
	}
	.form_area table.form_table th:nth-child(1) i.discretionary:after {
		content: "";
		background-color: transparent;
	}
}
/* ==========================
/*  フォーム関係
   ========================== */
/*ラジオボタン*/
.form_area table.form_table td input[type="radio"] {
    display: none;
}
.form_area table.form_table td input[type="radio"] + label {
    display: inline-block;
	position: relative;
	margin-left: 10px;
	padding: 4px 12px;
	line-height: 1.6;
	cursor: pointer;
}
@media screen and (max-width: 414px) {
	.form_area table.form_table td input[type="radio"] + label {
		padding: 4px 4px 4px 12px;
	}
}
.form_area table.form_table input[type="radio"] + label:before {
	position: absolute;
	content: "";
	top: 50%;
	left: -10px;
	margin-top: -10px;
	width: 20px;
	height: 20px;
	border: 2px solid #b5b5b5;
	border-radius: 50%;
	background-color: #fff;
}
.form_area table.form_table input[type="radio"] + label.err:before {
	border: 2px solid #ff0000;
}
.form_area table.form_table input[type="radio"].err + label:before {
	border: 2px solid #ff0000;
}
.form_area table.form_table input[type="radio"]:checked + label:after {
	position: absolute;
	content: "";
	top: 50%;
	left: -6px;
	margin-top: -6px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
}
/*inputエリア*/
.form_area table.form_table td input[type='tel'],
.form_area table.form_table td input[type='email'],
.form_area table.form_table td input[type='text'],
.form_area table.form_table td input[type='number']{
	-webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
	margin: 3px 0;
	padding: 12px;
	border: none;
	border-radius: 8px;
	width: 100%;
	background-color: #eee;
	font-size: 100%;
}
.form_area table.form_table td input[type='tel'].err,
.form_area table.form_table td input[type='email'].err,
.form_area table.form_table td input[type='text'].err,
.form_area table.form_table td input[type='number'].err {
	border: 2px solid #f00;
}
/*テキストエリア*/
.form_area table.form_table td textarea {
	padding: 12px 6px;
	border-radius: 8px;
	width: 100%;
	background-color: #eee;
	height: 180px;
	font-size: 100%;
}
.form_area table.form_table td textarea.err {
	border: 2px solid #f00;
}
/*注意*/
.form_area p.form_privacy {
	display: inline-block;
	padding: 6px 12px;
	background-color: #eee;
	font-size: 95%;
}
.form_area p.form_privacy a {
	color: #008;
}
/*確認用チェックボックス*/
.form_area div.form_consent input[type="checkbox"] {
    display: none;
}
.form_area div.form_consent input[type="checkbox"] + label {
    display: inline-block;
	position: relative;
	margin-left: 10px;
	padding: 4px 16px;
	line-height: 1.6;
	cursor: pointer;
}
.form_area div.form_consent input[type="checkbox"] + label:before {
	position: absolute;
	content: "";
	top: 50%;
	left: -10px;
	margin-top: -10px;
	width: 20px;
	height: 20px;
	border: 2px solid #b5b5b5;
	background-color: #fff;
}
.form_area div.form_consent input[type="checkbox"]:checked + label:after {
	position: absolute;
	content: "";
	top: 50%;
	left: -6px;
	margin-top: -6px;
	width: 12px;
	height: 8px;
	border-bottom: 3px solid #0068b7;
	border-left: 3px solid #0068b7;
	transform: rotate(-45deg);
}
/* 確認ボタン用 */
.form_area div.form_transmit {
	margin: 24px auto 0;
	text-align: center;
}
.form_area div.form_transmit input.form_confirmation[type="button"] {
	-webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
	display: block;
	margin: 0 auto;
	width: 100%;
	max-width: 300px;
	height: 3em;
	background-color: #f08300;
	border: none;
	color: #fff;
	border-radius: 60px;
	outline: 0;
	font-size: 125%;
	color: #fff;
	cursor: pointer;
}
.form_area div.form_transmit button.form_confirmation[type="submit"] {
	-webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
	display: block;
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: 300px;
	height: 3em;
	border: none;
	border-radius: 60px;
	font-size: 130%;
	color: #fff;
	font-weight: bold;
	cursor: pointer;
}
.form_area div.form_transmit button.form_confirmation[type="submit"] span {
	display: inline-block;
	margin-right: 6px;
	padding: 5px;
	border-radius: 3px;
	font-weight: bold;
}
.form_area div.form_transmit button.form_confirmation[type="submit"]:hover {
	-webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    transition: 0.5s;
}


/***------------------------------------------
*
*　thanks
*
------------------------------------------***/
.thanks_area {
	position: relative;
	margin: 0 auto;
	padding: 14px;
	width: 100%;
}
.thanks_area h2 {
	font-size: 200%;
	font-weight: bold;
}
.thanks_area .thanks_confirmation {
	margin: 24px auto;
	padding: 24px;
	border-radius: 12px;
}
.thanks_area .thanks_confirmation p {
	margin-bottom: 8px;
}
.thanks_area .thanks_confirmation p span {
	display: inline-block;
	padding: 0 6px;
	font-size: 150%;
	font-weight: bold;
}
.thanks_area .thanks_confirmation p.thanks_confirmation {
	display: inline-block;
	margin: 0 auto;
	padding: 4px 12px;
	border-width: 2px;
	border-style: solid;
	border-radius: 8px;
	font-weight: bold;
}
.thanks_area .thanks_correction_area {
	margin-top: 24px;
	padding: 12px;
	background-color: #fff;
}
.thanks_area .thanks_correction_area p {
	color: #333;
}
.thanks_area .thanks_correction_area dl {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	color: #000;
}
.thanks_area .thanks_correction_area dt {
	width: 20%;
}
.thanks_area .thanks_correction_area dd {
	width: 80%;
}
/*inputエリア*/
.thanks_area .thanks_correction_area dd input[type='tel']{
	-webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
	margin: 3px 0;
	padding: 12px;
	border: none;
	border-radius: 8px;
	width: 100%;
	background-color: #eee;
	font-size: 100%;
}
.thanks_area .thanks_correction_area button.form_confirmation[type="submit"] {
	-webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
	display: block;
	position: relative;
	margin: 12px auto 0;
	width: 100%;
	max-width: 200px;
	height: 3em;
	border: none;
	border-radius: 60px;
	outline: 0;
	font-size: 130%;
	font-weight: bold;
	cursor: pointer;
}
.thanks_area .thanks_correction_area button.form_confirmation[type="submit"]:hover {
	-webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    transition: 0.5s;
}
@media screen and (min-width: 450px) {
	.pcNone {
		display: none;
	}
}





/* ----------------------------------------
 *   色やサイズ変更
 * ---------------------------------------- */
/* ==========================
/*  フォーム
   ========================== */
/* 外の枠＆フォーム枠のサイズ */
.form_area {
	max-width: 600px;
	border-color: #018a01;
}
/* タイトルの背景色 */
.form_area p.form_ttl {
	background-color: #cbebff;
}
/* ラジオボタンのチェックした時の色 */	
.form_area table.form_table input[type="radio"]:checked + label:after {
	background-color: #018a01;
}
/* フォームボタンの背景色と文字色 */
.form_area div.form_transmit button.form_confirmation[type="submit"] {
	background-color: #f08300;
	color: #fff;
}
/* フォームボタン【無料】の背景色と文字色 */
.form_area div.form_transmit button.form_confirmation[type="submit"] span {
	background-color: #fff283;
	color: #f50;
}
/* フォームボタンのマウスオーバー時の背景色 */
.form_area div.form_transmit button.form_confirmation[type="submit"]:hover {
	background-color: #f00;
}
/* ==========================
/*  サンクスページ
   ========================== */
/* 背景色＆ボックスサイズ＆文字色 */
.thanks_area .thanks_confirmation {
	max-width: 700px;
	background-color: #018a01;
	color: #fff;
}
/* フリーダイヤルの文字色 */
.thanks_area .thanks_confirmation p span,
.thanks_area .thanks_confirmation p span a {
	color: #ffe200;
}
/* 確認用電話番号の枠と文字色 */
.thanks_area .thanks_confirmation p.thanks_confirmation {
	border-color: #fff;
	color: #fff;
}
.thanks_area .thanks_confirmation p.thanks_confirmation a {
	color: #fff;
}
/* フォームボタンの背景色と文字色 */
.thanks_area .thanks_correction_area button.form_confirmation[type="submit"] {
	background-color: #f08300;
	color: #fff;
}
/* フォームボタンのマウスオーバー時の背景色 */
.thanks_area .thanks_correction_area button.form_confirmation[type="submit"]:hover {
	background-color: #f00;
}