@charset "UTF-8";
.diagnosis_form_area_wrap {
	padding: 150px 15px 80px;
}
.diagnosis_form_area_wrap .content_container {
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
}
.diagnosis_form_area_wrap .con_box {
	position: relative;
	border: 4px solid #14A291;
	padding: 60px;
	border-radius: 20px;
	background: linear-gradient(#FFFFF0, #FFF);
	text-align: center;
}
.diagnosis_form_area_wrap .con_box .ttl_img {
	position: absolute;
	top: -100px;
	left: 50%;
	transform: translateX(-50%);
}
.diagnosis_form_area_wrap .con_box .btn_wrap {
	display: flex;
	justify-content: center;
	gap: 60px;
	margin-top: 45px;
}
.diagnosis_form_area_wrap .con_box .btn_wrap button {
	width: 320px;
	display: block;
	background: linear-gradient(#FFF4D1, #FDEBB1);
	border-radius: 60px;
	text-align: center;
	padding: 20px;
	position: relative;
	z-index: 9;
	border-bottom: 5px solid #E6B066;
	border-top: none;
	border-left: none;
	border-right: none;
	transition: .4s;
	box-sizing: initial;
}
.diagnosis_form_area_wrap .con_box .btn_wrap button:hover {
	background: linear-gradient(#FFBA40, #FFCE64);
	opacity: 1;
}
.diagnosis_form_area_wrap .con_box .pic_img {
	position: absolute;
	bottom: 0;
	right: 10px;
}
@media (max-width: 768px) {
	.diagnosis_form_area_wrap {
padding: 70px 15px 50px;
}
	.diagnosis_form_area_wrap .con_box {
		padding: 30px 20px;
	}
	.diagnosis_form_area_wrap .con_box .btn_wrap {
		display: block;
		margin-top: 35px;
	}
	.diagnosis_form_area_wrap .con_box .btn_wrap button {
		width: 220px;
		margin-inline: auto;
		margin-top: 10px;
		padding: 15px;
	}
	.diagnosis_form_area_wrap .con_box .btn_wrap button img {
		height: 25px;
	}
	.diagnosis_form_area_wrap .con_box .ttl_img {
		width: 190px;
		top: -45px;
	}
	.diagnosis_form_area_wrap .con_box .pic_img {
display: none;
}
}
/** フォームスタイル **/
.visually-hidden {
	position: absolute;
	white-space: nowrap;
	width: 1px;
	height: 1px;
	overflow: hidden;
	border: 0;
	padding: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	margin: -1px;
}
/** モーダル style **/
.is-fixed {
	overflow: hidden;
}
.modal_type01 {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	background: rgba(0, 0, 0, 50%);
	padding: 40px 20px;
	overflow: auto;
	opacity: 0;
	visibility: hidden;
	transition: .3s;
	box-sizing: border-box;
	z-index: 99999;
}
.modal_type01:before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	height: 100%;
	margin-left: -0.2em;
}
.modal_type01.is-active {
	opacity: 1;
	visibility: visible;
}
.modal_type01 .modal-container {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	max-width: 1100px;
	width: 98%;
}
.modal_type01 .modal-close_pop {
	position: absolute;
	top: 18px;
	right: 20px;
	color: #000;
	font-size: 30px;
	cursor: pointer;
	z-index: 9;
	background-color: initial;
	border: none;
}
.modal_type01 .modal-content {
	position: relative;
	background: linear-gradient(#FFFFF0, #FFF);
	border-radius: 20px;
	text-align: left;
	line-height: 1.8;
	padding: 30px 60px;
	z-index: 1;
}
.modal_type01 .modal-content .modal-logo {
	width: 300px;
	margin-bottom: 16px;
}
.modal_type01 .modal-content .form_area .q_ttl_wrap {
	display: grid;
	grid-template-columns: 150px 1fr 150px;
	gap: 20px;
	place-content: center;
	place-items: center;
}
.modal_type01 .modal-content .form_area .txt_area {
	grid-column-start: 2;
	margin-bottom: 45px;
}
.modal_type01 .modal-content .form_area .q_ttl {
	text-align: center;
	font-size: 28px;
	font-weight: bold;
}
.modal_type01 .modal-content .form_area .q_ttl span {
	font-size: 17px;
	line-height: 1.3;
	display: inline-block;
}
.modal_type01 .modal-content .form_area .modal-pic {
	grid-column-start: 3;
}
.modal_type01 .modal-content .form_area .progressImg {
	text-align: center;
}
.modal_type01 .modal-content .form_area .btn_wrap {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 13px;
	z-index: 99;
	margin-bottom: 30px;
	margin-top: -15px;
}
.modal_type01 .modal-content .form_area .btn_wrap label {
	display: block;
	background: linear-gradient(#FFF4D1, #FDEBB1);
	border-radius: 15px;
	text-align: center;
	padding: 20px 15px;
	position: relative;
	z-index: 9;
	border-bottom: 5px solid #E6B066;
	transition: .4s;
	box-sizing: initial;
	font-size: 24px;
}
.modal_type01 .modal-content .form_area .btn_wrap label.sm {
	font-size: 20px;
}
.modal_type01 .modal-content .form_area .btn_wrap label:hover {
	background: linear-gradient(#FFBA40, #FFCE64);
	opacity: 1;
}
.modal_type01 .modal-content .form_area .btn_wrap label .radio_icon {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 10px;
	max-width: 25%;
}
.modal_type01 .modal-content .prev_btn a {
	display: table;
	position: relative;
	padding-left: 20px;
	color: #1200AA;
	border-collapse: initial;
}
.modal_type01 .modal-content .prev_btn a::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 8px;
	height: 8px;
	border-top: 2px solid #1200AA;
	border-right: 2px solid #1200AA;
	-webkit-transform: translateY(-50%) rotate(225deg);
	transform: translateY(-50%) rotate(225deg);
}
.modal_type01 .modal-content .form_area .input_wrap {
	margin-bottom: 40px;
}
.modal_type01 .modal-content .form_area .input_wrap p.input_q_ttl {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 15px;
}
.modal_type01 .modal-content .form_area .input_wrap p.input_q_ttl span {
	font-size: 14px;
	color: #fff;
	display: inline-block;
	background-color: #FF0000;
	padding: 5px 10px;
	margin-left: 15px;
	line-height: 1;
	font-weight: lighter;
}
.modal_type01 .modal-content .form_area .input_wrap p.term_txt {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 15px;
	text-align: center;
}
.modal_type01 .modal-content .form_area .input_wrap p.term_txt {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 15px;
	text-align: center;
}
.modal_type01 .modal-content .form_area .input_wrap p.term_txt a {
	display: inline-block;
	padding: 0 5px;
	color: #1200AA;
}
.modal_type01 .modal-content .form_area .input_wrap p.term_txt .orange {
	display: inline-block;
	padding: 0 5px;
	color: #fd8d38;
	font-size: 120%;
}

.modal_type01 .modal-content .input_wrap input {
	border: 1px solid #ADADAD;
	padding: 15px;
	width: 100%;
	display: block;
	border-radius: 5px;
	margin-bottom: 50px;
}
.modal_type01 .modal-content button.next-btn, .cancel_btn_wrap .cancel_confirm, .cancel_btn_wrap .cancel_cancel {
	border-bottom: 4px solid #053409;
	background: linear-gradient(#0D830D, #006900);
	border-right: none;
	border-left: none;
	border-top: none;
	display: block;
	border-radius: 100px;
	width: 100%;
	color: #fff;
	padding: 15px;
	box-sizing: initial;
	text-align: center;
	font-size: 24px;
	font-weight: bold;
	cursor: pointer;
}
.modal_type01 .modal-content button.next-btn.enableVal, .cancel_btn_wrap .cancel_confirm.enableVal, .cancel_btn_wrap .cancel_cancel.enableVal {
	border-bottom: 4px solid #707070;
	background: #BFBFBF;
	pointer-events: none;
}
.modal_type01 .modal-content .thanks_txt_wrap {
	margin-bottom: 80px;
}
.modal_type01 .modal-content .thanks_txt_wrap .dtl_txt {
	font-size: 18px;
	text-align: center;
	font-weight: bold;
	margin-bottom: 40px;
}
.modal_type01 .modal-content .thanks_txt_wrap .tel_txt {
	font-size: 24px;
	text-align: center;
	font-weight: bold;
}
.modal_type01 .modal-content .thanks_txt_wrap .tel_txt.red {
	margin-bottom: 25px;
	color: #FF0000;
	font-size: 32px;
}
.modal_type01 .modal-content .thanks_txt_wrap .tel_txt a {
	display: inline-block;
	margin-top: 20px;
}
.modal_type01 .modal-content .copy_txt {
	font-size: 12px;
	text-align: center;
}
.modal_type01 .modal-content .cancel_btn_wrap  {
	 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 30px;
}
.modal_type01 .modal-content .cancel_btn_wrap button.next-btn, .cancel_btn_wrap .cancel_confirm, .cancel_btn_wrap .cancel_cancel{ 
width: auto;
}
.modal_type01 .modal-content .cancel_btn_wrap button.next-btn.enableVal, .cancel_btn_wrap .cancel_confirm.enableVal, .cancel_btn_wrap .cancel_cancel.enableVa {
pointer-events: all;
}
.modal_type01 .modal-content .form_area .s_link{
	border: solid 1px #e66900;
background-color: #e66900;
	display: block;
	color: #fff;
font-size: 18px;
	text-align: center;
	width: 80%;
	max-width: 350px;
margin-inline: auto;
margin-top: 50px;
	padding: 15px;
	border-radius: 80px;
}
@media (max-width: 768px) {
	.modal_type01 .modal-content {
		position: relative;
		background: linear-gradient(#FFFFF0, #FFF);
		border-radius: 20px;
		text-align: left;
		line-height: 1.8;
		padding: 30px 20px;
		z-index: 1;
	}
	.modal_type01 .modal-content .modal-logo {
		width: 200px;
	}
	.modal_type01 .modal-content .form_area .q_ttl_wrap {
		grid-template-columns: 1fr;
	}
	.modal_type01 .modal-content .form_area .txt_area {
		grid-column-start: 1;
	}
	.modal_type01 .modal-content .form_area .modal-pic {
		display: none;
	}
	.modal_type01 .modal-content .form_area .q_ttl {
		font-size: 18px;
	}
	.modal_type01 .modal-content .form_area .btn_wrap {
		grid-template-columns: repeat(2, 1fr);
		gap: 5px;
	}
	.modal_type01 .modal-content .form_area .btn_wrap label {
		padding: 10px 15px;
		font-size: 16px;
	}
	.modal_type01 .modal-content .form_area .btn_wrap label.sm {
		padding: 10px 5px;
		font-size: 14px;
	}
	.modal_type01 .modal-content .form_area .q_ttl span {
		font-size: 14px;
	}
	.modal_type01 .modal-content button.next-btn {
		font-size: 16px;
		width: 85%;
		color: #fff;
		padding: 10px;
		margin-inline: auto;
	}
	.modal_type01 .modal-content .form_area .input_wrap p.term_txt {
		font-size: 14px;
	}
	.modal_type01 .modal-content .thanks_txt_wrap .dtl_txt {
		font-size: 14px;
		margin-bottom: 30px;
	}
	.modal_type01 .modal-content .thanks_txt_wrap .tel_txt {
		font-size: 18px;
	}
.modal_type01 .modal-content .thanks_txt_wrap .tel_txt.red {
	font-size: 18px;
}
	.modal_type01 .modal-content .thanks_txt_wrap .tel_txt a {
		margin-top: 15px;
	}
	.modal_type01 .modal-content .thanks_txt_wrap {
margin-bottom: 40px;
}
.modal_type01 .modal-content .cancel_btn_wrap  {
 grid-template-columns: repeat(1, 1fr);
 gap: 15px;
}
	.modal_type01 .modal-content .cancel_btn_wrap button.next-btn {
width: 85%;
margin-inline: auto;
}
}


/** コンテンツ幅狭いエリア用 **/
.narrow_con .diagnosis_form_area_wrap .con_box {
padding: 60px 20px;
}
.narrow_con .diagnosis_form_area_wrap .con_box .pic_img {
display: none;
}
.narrow_con .diagnosis_form_area_wrap .con_box .btn_wrap {
display: flex;
justify-content: center;
gap: 20px;
}
.narrow_con .diagnosis_form_area_wrap .con_box .btn_wrap button {
width: 175px;
}
.narrow_con .diagnosis_form_area_wrap .con_box .btn_wrap > *:first-child{
	margin-bottom: 20px;
}
@media (max-width: 768px) {
.narrow_con .diagnosis_form_area_wrap .con_box .btn_wrap button {
width: 200px;
}
.narrow_con .diagnosis_form_area_wrap .con_box .btn_wrap {
display: block;
justify-content: center;
gap: 20px;
}
}



/* 同意チェックボックス全体のコンテナ設定 */
.agreement-container {
    display: flex;          /* Flexboxを使用して中央揃えを実現 */
    flex-direction: column; /* 子要素を縦に並べる */
    justify-content: center;/* 水平方向の中央揃え */
    align-items: center;    /* 垂直方向の中央揃え */
    margin: 25px 0;         /* 上下の余白 */
}

/* 元のチェックボックスを非表示にする */
#agreement {
    display: none;
}

/* チェックボックスとラベルを横並びにするためのラベル設定 */
#agreement + label {
    display: flex;          /* 中の要素を横並びにする */
    align-items: center;    /* 要素の縦位置を中央に揃える */
    cursor: pointer;
    font-size: 14px;
}

/* リンクのスタイル（任意で調整してください） */
#agreement + label a {
    color: #007bff;
    text-decoration: underline;
}
#agreement + label a:hover {
    color: #0056b3;
}

/* カスタムチェックボックス（四角いボックス部分）のスタイル */
#agreement + label::before {
    content: '';            /* 疑似要素には必須 */
    display: block;
    width: 22px;            /* 少し大きめのサイズ */
    height: 22px;
    border: 2px solid #555; /* 視認性の高い枠線 */
    border-radius: 4px;     /* 少し角を丸める */
    margin-right: 10px;     /* テキストとの間隔 */
    background-color: #fff;
    transition: all 0.2s ease; /* アニメーション効果 */
}

/* チェックが入った時のカスタムチェックボックスのスタイル */
#agreement:checked + label::before {
    background-color: #f17b37; /* テーマカラー */
    border-color: #f17b37;
    /* SVGを使ったチェックマーク */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M2 8l4 4 8-8'/%3e%3c/svg%3e");
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
}

/* エラーメッセージのスタイル */
#agreement-error {
    color: red;
    font-size: 12px;
    margin-top: 8px; /* チェックボックスとの間隔 */
    text-align: left;
}