@charset "UTF-8";

/*--------------
　フォーム
--------------*/
html {
	font-size: 62.5%;
}
body {
	margin: 0;
	padding: 0;
	font-family: "Noto Sans JP", sans-serif;
	color: #2d3d50;
	font-size: 2.8rem;
}
img {
	max-width: 100%;
	max-height: 100%;
}
header {
display: none;
/*height: 100px;
	padding: 0.6rem 0;
	background: #fff;
	position: fixed;
	width: 100%;
	z-index: 999;*/
}
	.header_inner {
		max-width: 750px;
		margin: 0 auto;
		display: flex;
		align-items: center;
	}
	.header_inner .logo {
		height: 60px;
		width: auto;
		margin-right: auto;
	}
	.header_inner .tel {
		width: 270px;
	}
.mv {
	max-width: 750px;
	margin: 0 auto;
	/*padding-top: 120px;*/
}
#wrapper {
	max-width: 750px;
	margin: 0px auto;
	padding: 0;
	background: #fff;
}
#form {
	margin-right: 20px;
	margin-left: 20px;
}
#form h2 {
	font-size: 20px;
	font-weight: bold;
	padding-bottom: 4px;
	border-bottom: 1px solid #286bbe;
	color: #4c4c4c;
}
	#form h2.no-border {
		border-bottom: none;
		padding-bottom: 0;
		margin-bottom: 10px;
	}
	#form h2.pt3 {
		padding-top: 3%;
	}
	#form h2.pt5 {
		padding-top: 5%;
	}

#form h3 {
	margin-bottom: 1rem;
	margin-top: 3rem;
	/*font-size: 100%;*/
	font-size: 20px;
	font-weight: bold;
	color: #000;
}
#form h4 {
	font-size: 16px;
	padding: 10px;
}
p.small {
	font-size: 12px;
	color: #918e8e;
}
/* 院選択アコーディオン */
.acc_clinic {
	padding: 10px 15px;
	color: #286bbe;
	border-top: 1px solid #286bbe;
/*	border-bottom: 1px solid #286bbe;*/
	font-weight: normal;
	font-size: 20px;
	position: relative;
	cursor: pointer;
}
	.acc_clinic::after {
		content: '+';
		font-size: 30px;
		font-weight: normal;
		position: absolute;
		right: 20px;
		top: 0px;
	}
.acc_clinic.active {
	border-bottom: 1px solid #286bbe;
}
.acc_clinic#select_area_kyushu {
	border-bottom: 1px solid #286bbe;
}
	.acc_clinic.active::after {
		content: 'ー';
		font-size: 22px;
		font-weight: normal;
		top: 10px;
	}
.clinic_list {
	display: none;
}
/* 院選択アコーディオンここまで */

/* 院選択ラジオボタン */
#form .clinic_list_box {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	margin: 10px 0;
}
#form input[type="radio"] {
	position: absolute;
	white-space: nowrap;
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	overflow: hidden;
	height: 1px;
	width: 1px;
	margin: -1px;
	padding: 0;
}
label {
  position: relative;
  cursor: pointer;
  padding: 5px 10px;
  border: 1px solid #286bbe;
  border-radius: 10px;
  text-align: center;
  color: #286bbe;
  font-size: 20px;
}
label:hover {
	background: #286bbe;
	color: #fff;
	transition: .3s;
}
input:checked + label {
  background: #286bbe;
  color: #fff;
}
/* 院選択ラジオボタン ここまで */




#form .select_box {
	margin-top: 3rem;
	border-radius: 5px;
	border: 1px solid #d7d7d7;
	background: #fdfdfd;
	position: relative;
	z-index: 1;
}
#form .select_box.age {
	display: inline-block;
	width: 36rem;
	margin-right: 2vw;
}
	#form .select_box::after {
		content: '';
		position: absolute;
		width: 8px;
		height: 8px;
		right: 10px;
		top: 50%;
		transform: translateY(-50%) rotate(45deg);
		border-bottom: 2px solid #2d3d50;
		border-right: 2px solid #2d3d50;
		z-index: -1;
	}
#form select,
#form input {
	font-size: 3.4rem;
}
#form select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	color: #2d3d50;
	padding: 0 2rem;
	border: none;
	background: none;
	width: 100%;
	height: 7.4rem;
	border-radius: 5px;
	text-align: center;
	cursor: pointer;
	text-align-last: center;
	font-size: 20px;
}
	#form .select_box.age select {
		text-align: left;
		text-align-last: left;
	}
#form input[type="text"] {
	margin: 0;
	margin-top: 1rem;
	width: calc(100% - 4rem);
	height: 7.4rem;
	padding: 0 2rem;
	border: 1px solid #d7d7d7;
	border-radius: 5px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
	#form input[type="text"].calendar::placeholder {
		color: #4c4c4c;
	}
	#form input[type="text"]::placeholder {
		color: #918e8e;
	}

#form input[type="text"].calendar {
	text-align: center;
	border: none;
	margin: 0;
	padding: 0 2rem;
	width: calc(100% - 20px);
	background: none;
	cursor: pointer;
	font-size: 20px;
}
	#form input[type="text"].calendar::placeholder {
		color: #2d3d50;
	}

#form .policy_text {
	font-size: 16px;
}
#form .policy {
	height: 15rem;
	overflow: scroll;
	padding: 10px;
	border: 1px solid #d7d7d7;
	border-radius: 5px;
}
	#form .policy p {
		font-size: 100%;
	}
#form .agree {
	text-align: center;
}
	#form .agree label {
		border: none;
	}

#form .error_msg {
	margin: 20px;
}
	#form .error_msg p {
		margin-top: 0;
		margin-bottom: 8px;
		font-weight: bold;
		color: #ff3b96;
	}

#form input[type="text"].empty,
#form div.empty {
	background: #ffe9ef;
}


#form input[type="checkbox"] {
	position: relative;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid #d7d7d7;
	border-radius: 5px;
	vertical-align: -5px;
	background: #fff;
	margin-right: 10px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

	input[type="checkbox"]:checked:before {
		position: absolute;
		top: -4px;
		left: 1rem;
		transform: rotate(50deg);
		width: 1rem;
		height: 2rem;
		border-right: 2px solid #2d3d50;
		border-bottom: 2px solid #2d3d50;
		content: '';
	}

#form .btn_entry {
	position: relative;
}

#form .btn_entry input[type='submit'] {
	display: block;
	width: 100%;
	padding: 15px;
	background: #b8b9ba;
	color: #fff;
	text-align: center;
	margin: 20px auto;
	transition: .3s;
	border: none;
	border-radius: 50px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

#form .btn_entry input[type='submit'].active {
	background: #286bbe;
	cursor: pointer;
}
	#form .btn_entry input[type='submit']:hover {
	}


/***************
カレンダースタイル
***************/
#ui-datepicker-div {
	border: none;
	border-radius: 0;
	padding: 5px;
	background: #dceff6;
}
#ui-datepicker-div .ui-datepicker-header {
	border-radius: 0;
	background: #fff;
	border: none;
}
.ui-datepicker table.ui-datepicker-calendar td {
	padding: 0;
	border-collapse: collapse;
	border: 1px solid #2d3d50;

}
.ui-datepicker table.ui-datepicker-calendar td span,
.ui-datepicker table.ui-datepicker-calendar td a {
	padding: 0.5em 0.2em;
}
#ui-datepicker-div .ui-state-default,
#ui-datepicker-div .ui-state-highlight,
#ui-datepicker-div .ui-widget-content .ui-state-highlight,
#ui-datepicker-div .ui-widget-header .ui-state-highlight {
	border: none;
	background: #fff;
}
#ui-datepicker-div td.custom-calendar-saturday .ui-state-default {
	background: #bbe2f1;
}
#ui-datepicker-div td.custom-calendar-sunday .ui-state-default {
	background: #f7ddec;
}


/***************
レスポンシブ
***************/

@media (max-width: 700px) {
html {
	font-size: 1.33333vw;
}
header {
	height: auto;
}
header .header_inner {
	padding: 0 2rem;
}
.header_inner .logo {
	height: 50px;
}
.header_inner .tel {
	height: 60px;
	width: auto;
}
.header_inner .tel a.tel_btn .number_area .number {
	font-size: 20px;
}
.header_inner .tel a.tel_btn .number_area .number_icon {
	width: 30px;
}
.mv {
	/*padding-top: 75px;*/
}
#wrapper {
}
#form h3 {
	font-size: 16px;
}
#form h3 span.must,
#form h3 span.notmust {
	font-size: 16px;
}
#form .dayselect_area #hope_date,
#form .dayselect_area #hope_date2,
#form .dayselect_area .ui-datepicker {
	width: 98%;
}
.header_inner .tel a.tel_btn .opentime {
	font-size: 12px;
}

label {
  padding: 5px 10px;
  font-size: 3.5rem;
}

}