@charset "utf-8";

/* ==================================================
contents
================================================== */
/* タイトル
================================================== */
.heading {
	position: relative;
	font-size: 250%;
	color: #ffffff;
	margin: 42px 0 60px;
	padding: 14px 23px 12px 155px;
	border-radius: 10px;
}
.type_edit .heading {
	background-color: #ba4599;
}
.type_search .heading {
	background-color: #3d6ed1;
}
.heading:before {
	content: "";
	position: absolute;
	width: 118px;
	height: 118px;
	left: 20px;
	top: -41px;
	color: inherit;
	background-repeat: no-repeat;
	background-position: left center;
}
.type_edit .heading:before {
	background-image: url(/shared/site_yoyaku/images/contents/reservation_ttl_bg.png);
}
.type_search .heading:before {
	background-image: url(/shared/site_yoyaku/images/contents/confirm_ttl_bg.png);
}
.division {
	border-width: 4px;
	border-style: solid;
	border-radius: 40px;
	margin: 0 0 28px;
	padding: 6px 20px 4px 20px;
	font-size: 225%;
	text-align: center;
}
.type_edit .division {
	border-color: #ba4599;
}
.type_search .division {
	border-color: #3d6ed1;
}

/* フォーム・パーツ
================================================== */
::placeholder {
	color: #666666;
}
:-ms-input-placeholder {
	color: #666666;
}
::-ms-input-placeholder {
	color: #666666;
}
select.not_selected,
select option:disabled {
	color: #666666;
}
select option {
	color: #222222;
}
.buttons {
	display: flex;
	justify-content: center;
	margin: 68px 0 -34px;
	flex-wrap: wrap;
}
.submit_btn,
.reset_btn {
	display: block;
	text-decoration: none;
	text-align: center;
	font-weight: bold;
	font-size: 187.5%;
	padding: 15px 17px 13px;
	box-shadow: 0 3px 0 0 rgba(203, 203, 203, 1);
	border-radius: 10px;
	border: 3px solid transparent;
	min-width: 410px;
	width: calc(50% - 68px);
	max-width: 410px;
	margin: 0 17px 34px;
}
.type_edit .submit_btn {
	color: #ffffff;
	background-color: #ba4599;
	border-color: #ba4599;
}
.type_search .submit_btn {
	color: #ffffff;
	background-color: #3d6ed1;
	border-color: #3d6ed1;
}
.reset_btn {
	color: inherit;
	background-color: #f0f0f0;
	border-color: #f0f0f0;
}
.submit_btn:disabled,
.reset_btn:disabled {
	color: #ffffff;
	background-color: #666666;
	border-color: #666666;
}
.type_edit .submit_btn:not(:disabled):hover,
.type_edit .submit_btn:not(:disabled):active,
.type_edit .submit_btn:not(:disabled):focus {
	color: #d60590;
	border-color: #d60590;
	background-color: #ffffff;
	text-decoration: none;
}
.type_search .submit_btn:not(:disabled):hover,
.type_search .submit_btn:not(:disabled):active,
.type_search .submit_btn:not(:disabled):focus {
	color: #3d6ed1;
	background-color: #ffffff;
	text-decoration: none;
}
.reset_btn:not(:disabled):hover,
.reset_btn:not(:disabled):active,
.reset_btn:not(:disabled):focus {
	color: #555555;
	border-color: #e0e0e0;
	background-color: #ffffff;
	text-decoration: none;
}

/* トップ
================================================== */
.division_select {
	font-size: ;
	line-height: 1.5;
}
.division_select .division_select_ttl {
	border-bottom: 6px solid #ba4599;
	font-size: 212.5%;
	font-weight: bold;
	padding: 0 0 18px;
	margin: 0 0 59px;
}
.division_select .division_list li:not(:last-child) {
	margin: 0 0 22px;
}
.division_select .division_list .division_item {
	border: 1px solid rgba(175,175,175, 0.35);
	border-radius: 10px;
	box-shadow: 0 0 4px 2px rgba(175,175,175, 0.35);
	padding: 19px 22px 23px;
}
.division_select .division_list .division_item .ttl {
	font-size: 150%;
	font-weight: bold;
	color: #ba4599;
	border-bottom: 3px solid #ba4599;
	padding: 0 0 7px;
	margin: 0 0 16px;
}
.division_select .division_list .division_item .ttl a {
	color: #ba4599;
	background: url(/shared/site_yoyaku/images/contents/pink_arrow.png) no-repeat 3px 0.2em;
	background-size: 25px auto;
	padding: 0 0 0 37px;
	display: inline-block;
}
.division_select .division_list .division_item .ttl a:hover,
.division_select .division_list .division_item .ttl a:active,
.division_select .division_list .division_item .ttl a:focus {
	text-decoration: underline;
}
.division_select .division_list .division_item .cnt {
	font-size: 125%;
}

/* 課
================================================== */
.yoyaku_btn {
	margin: 0 auto;
	padding: 41px 56px 88px;
	max-width: 1080px;
	border: 1px solid rgba(175,175,175, 0.35);
	border-radius: 10px;
	box-shadow: 0 0 4px 2px rgba(175,175,175, 0.35);
}
.yoyaku_btn_ttl {
	border-bottom: 6px solid #ba4599;
	font-size: 225%;
	font-weight: bold;
	padding: 0 0 8px;
	margin: 0 0 80px;
	text-align: center;
}
.yoyaku_btn_list {
	list-style: none;
}
.yoyaku_btn_list li {
	margin: 0 0 38px;
}
.yoyaku_btn_list li a {
	position: relative;
	display: block;
	margin: 0 auto;
	max-width: 670px;
	text-align: center;
	text-decoration: none;
	font-size: 212.5%;
	font-weight: bold;
	color: inherit;
	padding: 28px 133px 25px;
	border-radius: 9999px;
	box-shadow: 0 3px 0 0 rgba(203, 203, 203, 1);
	border-width: 5px;
	border-style: solid;
	background-repeat: no-repeat;
	background-position: -5px center;
}
.yoyaku_btn_list li a.reservation_link {
	border-color: #ba4599;
	background-image: url(/shared/site_yoyaku/images/contents/reservation_bg.png);
}
.yoyaku_btn_list li a.confirm_link {
	border-color: #3d6ed1;
	background-image: url(/shared/site_yoyaku/images/contents/confirm_bg.png);
}
.yoyaku_btn_list li a:after {
	content: '';
	position: absolute;
	top: 50%;
	right: 45px;
	width: 36px;
	height: 36px;
	color: inherit;
	transform: translateY(-50%);
	background-repeat: no-repeat;
	background-position: left center;
}
.yoyaku_btn_list li a.reservation_link:after {
	background-image: url(/shared/site_yoyaku/images/contents/pink_arrow.png);
}
.yoyaku_btn_list li a.confirm_link:after {
	background-image: url(/shared/site_yoyaku/images/contents/blue_arrow.png);
}
.yoyaku_btn_list li a.reservation_link:hover,
.yoyaku_btn_list li a.reservation_link:focus {
	background-color: #fff1fa;
}
.yoyaku_btn_list li a.confirm_link:hover,
.yoyaku_btn_list li a.confirm_link:focus {
	background-color: #edf3ff;
}

/* 予約
================================================== */
.reserve_table {
	font-size: 125%;
}
.reserve_table th,
.reserve_table td {
	vertical-align: top;
}
.reserve_table > tbody > tr > th,
.reserve_table > tbody > tr > td {
	padding: 20px 22px 18px;
	font-size: 120%;
	border: 2px solid #ffffff;
}
.reserve_table > tbody > tr > th {
	width: 293px;
	text-align: left;
	font-weight: inherit;
}
.type_edit .reserve_table > tbody > tr > th {
	background-color: #f9e1f2;
}
.type_search .reserve_table > tbody > tr > th {
	background-color: #dae6ff;
	width: 337px;
}
.reserve_table th .th,
.reserve_table th label {
	display: flex;
	flex: 1;
	align-items: flex-start;
}
.reserve_table th .ttl {
	flex: 1;
}
.reserve_table th .require,
#comaList_head .require {
	display: inline-block;
	width: 46px;
	padding: 2px 6px 0;
	color: #ffffff;
	background-color: #ba4599;
	line-height: 1.4;
	text-align: center;
	flex: none;
}
.reserve_table th .require {
	font-size: 66.7%;
	margin: 6px 0 0;
}
.type_search .reserve_table th .require {
	background-color: #c13030;
}
.reserve_table th .th .require {
	flex: none;
}
.reserve_table > tbody > tr > td {
	background-color: #ececec;
}
.reserve_table.input_form > tbody > tr > td {
	padding: 14px 80px 13px 18px;
	font-size: 100%;
}
.type_search .reserve_table.input_form > tbody > tr > td {
	padding-right: 18px;
	font-size: 100%;
}
.reserve_table > tbody > tr > td p:not(:last-child) {
	margin: 0 0 4px;
}
.reserve_table td input,
.reserve_table td textarea,
.reserve_table td select {
	width: 100%;
	border: none;
	background-color: #ffffff;
	padding: 9px 14px 8px;
}
.reserve_table td textarea {
	min-height: 90px;
	vertical-align: top;
}
.reserve_table td #create_purpose_txt {
	margin: 10px 0 0;
}
.reserve_table input[type="text"],
.reserve_table select {
	-webkit-appearance: none;
	appearance: none;
}
#reserve_form select::-ms-expand {
	display: none;
}
#reserve_form .select_wrapper {
	position: relative;
}
#reserve_form .select_wrapper:after {
	content: '';
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 11px solid #222222;
	pointer-events: none;
}
#reserve_form .select_wrapper.not_loaded:after {
	content: none;
}

/* 希望日カレンダー
============================== */
#calendar_block {
	display: flex;
	justify-content: space-between;
	padding: 9px 0 9px 10px;
	margin: 0 0 18px;
	align-items: self-start;
}
#calendar_block.hidden {
	display: none;
}
.calendar {
	border-collapse: collapse;
	width: 48%;
	background-color: #ffffff;
	line-height: 1.4;
}
.calendar caption {
	font-size: 120%;
	text-align: center;
	font-weight: bold;
	margin: 0 0 8px;
}
.calendar th,
.calendar td {
	text-align: center;
	border: solid 1px #e0dcdc;
}
.calendar thead th {
	background-color: #ddf2f1;
	font-size: 80%;
	padding: 8px 4px 6px;
}
.calendar td {
	vertical-align: top;
	padding: 4px 4px 2px;
	font-size: 90%;
}
.calendar th:first-child,
.calendar td:first-child {
	border-left: none;
}
.calendar th:last-child,
.calendar td:last-child {
	border-right: none;
}
.calendar th:first-child,
.calendar td:first-child div:first-child,
.calendar td.holiday {
	color: #a90000;
}
.calendar th:last-child,
.calendar td:last-child div:first-child {
	color: #164cc8;
}
.calendar td.ok {
	cursor: pointer;
	background-color: #eefeff;
}
.calendar td.ok:hover,
.calendar td.ok:active,
.calendar td.ok:focus {
	background-color: #5ffcf5;
}
.calendar td.now {
	/* background-color: #ffffbf; */
	background-color: #5ffcf5;
}

/* 希望日時モーダル
============================== */
#comaList {
	display: none;
	opacity: 0;
	position: fixed;
	z-index: 10011;
	top: 5%;
	bottom: 5%;
	left: 0;
	right: 0;
	transition: 0.5s;
}
#comaList_box {
	background: #ffffff;
	max-width: 1080px;
	margin: 0 auto;
}
#comaList_head {
	background-color: #f9e1f2;
	display: flex;
	align-items: flex-start;
	padding: 15px 12px 13px 35px;
	flex: none;
}
#comaList_head .th {
	flex: 1;
	display: flex;
	align-items: flex-start;
}
#comaList_head .ttl {
	font-size: 175%;
	font-weight: bold;
}
#comaList_head .require {
	margin: 9px 0 0 25px;
}
#comaList_head #comaList_button_row {
	margin: -3px 0 0 25px;
}
#comaList_head #comaList_close_button {
	font-size: 112.5%;
	background-color: #ffffff;
	padding: 10px 18px 8px;
	border-radius: 30px;
	border: none;
	text-decoration: none;
	width: 134px;
	vertical-align: top;
}
#comaList_cnt {
	padding: 47px 56px 51px 57px;
}
#comaList_back {
	display: none;
	opacity: 0;
	position: fixed;
	z-index: 10010;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.5);
	transition: 0.5s;
}
#comaList table {
	width: 100%;
}
#comaList table caption,
#comaList .caption {
	text-align: left;
	margin: 0 0 11px;
	flex: none;
}
#comaList .caption .date,
#comaList .caption .availability {
	display: block;
}
#comaList .caption .date {
	font-size: 175%;
	font-weight: bold;
	float: left;
	margin: 0 24px 0 0;
}
#comaList .caption .availability {
	font-size: 112.5%;
	float: right;
	margin: 11px 0 0 0;
}
#comaList table th,
#comaList table td {
	font-size: 150%;
	vertical-align: middle;
	border: 2px solid #e0dcdc;
}
#comaList label {
	display: block;
	padding: 20px 30px 18px;
}
#comaList table th {
	text-align: center;
	font-weight: inherit;
	padding: 20px 20px 18px;
	background-color: #f0f0f0;
}
#comaList table th:first-child,
#comaList table td:first-child {
	width: 13%;
	border-left: none;
	text-align: center;
}
#comaList table th:last-child,
#comaList table td:last-child {
	border-right: none;
	width: 15%;
	text-align: center;
}
#comaList input[type="radio"] {
	-webkit-appearance: none;
	appearance: none;
	width: 0;
	height: 0;
	opacity: 0;
	position: absolute;
	display: none;
}
#comaList input[type="radio"] + label {
	display: inline-block;
	position: relative;
	width: 24px;
	height: 24px;
	/* cursor: pointer; */
	outline: 0;
	padding: 0;
	vertical-align: middle;
}
#comaList input[type="radio"] + label {
	display: inline-block;
	vertical-align: middle;
	border: 2px solid #acacac;
	border-radius: 50%;
	text-align: center;
	cursor: pointer;
}
#comaList input[type="radio"]:focus + label,
#comaList input[type="radio"]:checked + label {
	border-color: #ba4599 !important;
}
#comaList input[type="radio"]:focus + label:before,
#comaList input[type="radio"]:checked + label:before {
	border-color: #ba4599 !important;
}
#comaList input[type="radio"]:checked + label:before {
	content: "";
	position: absolute;
	left: 3px;
	top: 3px;
	border: 7px solid #ba4599;
	border-radius: 50%;
}
#comaList input[type="radio"]:disabled + label {
	background-color: #f8f8f8;
	border-color: #d1d1d1 !important;
	cursor: default;
}
/* スクロール対応 */
#comaList_box,
#comaList_cnt {
	display: flex;
	flex-direction: column;
}
#comaList_box {
	height: 100%;
}
#comaList_cnt {
	overflow: auto;
}
#comaList_cnt_table {
	overflow: auto;
}

/* 選択日時、受付番号
============================== */
#reserve_date,
#reserve_number {
	margin: 78px 0 68px;
}
#reserve_number {
	margin: 63px auto 87px;
	display: flex;
	justify-content: center;
}
#reserve_date .reserve_date_box,
#reserve_number .reserve_number_box {
	background-color: #fdf8df;
	border: 3px dashed #ba4599;
	padding: 24px 24px 20px 16px;
	display: flex;
	line-height: 1.2;
}
#reserve_number .reserve_number_box {
	display: inline-flex;
	padding-left: 25px;
	padding-right: 61px;
}
#reserve_date .ttl,
#reserve_date .date,
#reserve_number .ttl,
#reserve_number .number {
	font-weight: bold;
}
#reserve_date .ttl,
#reserve_number .ttl {
	flex: none;
	min-width: 246px;
	max-width: 50%;
	font-size: 187.5%;
	padding: 12px 27px 0 98px;
	background: url(/shared/site_yoyaku/images/contents/calendar_icon.png) no-repeat left -3px;
	border: 1px solid #acacac;
	border-top: none;
	border-left: none;
	border-bottom-width: 0;
	min-height: 62px;
}
#reserve_number .ttl {
	padding-left: 108px;
	min-width: 256px;
}
#reserve_date .date,
#reserve_number .number  {
	font-size: 154.4%;
	align-self: center;
	padding: 0 0 0 31px;
}
#reserve_number .number  {
	font-size: 275%;
}
#reserve_date span br {
	display: none;
}

/* 新規予約、予約確認／取り消し
================================================== */
.caution,
.notes {
	margin: 37px auto 36px;
}
.caution p,
.notes p {
	font-size: 175%;
	text-align: center;
	margin: 0 0 20px;
	line-height: 1.7;
	font-weight: bold;
}
.caution p:first-child,
.notes p:first-child {
	font-weight: bold;
}
.caution p:first-child {
	color: #da2722;
}
.caution p br.pcbr,
.notes p br.pcbr {
}

/* 予約確認／取り消し
============================== */
#inquiry_form .reservation_number_inputs {
	display: flex;
	align-items: flex-start;
}
#inquiry_form .reservation_number_inputs input {
	flex: 1;
}
#inquiry_form .reservation_number_inputs span {
	flex: none;
	margin: 0 10px;
	line-height: 1;
	align-self: center;
}
#inquiry_form .reservation_number_inputs span:before {
	content: "";
	display: block;
	width: 16px;
	border-bottom: 3px solid #000000;
}

/* ==================================================
clearfix
================================================== */
#comaList table caption:after,
#comaList .caption:after {
	content: '';
	display: table;
	clear: both;
}

/* ==================================================
accessibility style change:color
================================================== */
.color_blue ::placeholder,
.color_black ::placeholder {
	color: #FFFF00 !important;
}
.color_yellow ::placeholder {
	color: #000000 !important;
}
.color_blue :-ms-input-placeholder,
.color_black :-ms-input-placeholder {
	color: #FFFF00 !important;
}
.color_yellow :-ms-input-placeholder {
	color: #000000 !important;
}
.color_blue ::-ms-input-placeholder,
.color_black ::-ms-input-placeholder {
	color: #FFFF00 !important;
}
.color_yellow ::-ms-input-placeholder {
	color: #000000 !important;
}
.color_blue #reserve_form .select_wrapper:after,
.color_black #reserve_form .select_wrapper:after {
	border-top-color: #FFFF00 !important;
}
.color_yellow #reserve_form .select_wrapper:after {
	border-top-color: #000000 !important;
}
.color_blue #comaList_box,
.color_yellow #comaList_box,
.color_black #comaList_box {
	border: 2px solid transparent;
}
/*
.color_blue #comaList input[type="radio"]:checked + label:before {
	border-color: #FFFF00 !important;

}
.color_black #comaList input[type="radio"]:checked + label:before {
	border-color: #FFFF00 !important;

}
.color_yellow #comaList input[type="radio"]:checked + label:before {
	border-color: #000000 !important;
}
*/

/* ==================================================
accessibility style change:font-size
================================================== */