@charset "utf-8";

@media screen and (min-width : 641px) and (max-width : 801px) {
}

@media screen and (max-width: 640px) {
/* ==================================================
contents
================================================== */
/* タイトル
================================================== */
.heading {
	font-size: 125%;
	margin: 20px 0 18px;
	padding: 9px 10px 4px 79px;
	border-radius: 5px;
}
.heading:before {
	width: 59px;
	height: 59px;
	left: 10px;
	top: -21px;
	color: inherit;
	background-size: 100% auto;
}
.division {
	border-width: 2px;
	border-style: solid;
	border-radius: 20px;
	margin: 0 0 15px;
	padding: 4px 10px 1px 10px;
	font-size: 112.5%;
}

/* フォーム・パーツ
================================================== */
.buttons {
	margin: 27px -6px -12px;
}
.submit_btn,
.reset_btn {
	font-size: 100%;
	padding: 6px 8px 5px;
	box-shadow: 0 2px 0 0 rgba(203, 203, 203, 1);
	border-radius: 5px;
	border-width: 2px;
	min-width: 144px;
	width: calc(50% - 12px);
	margin: 0 6px 12px;
}
#reserve_complete_buttons .submit_btn {
	min-width: 204px;
}

/* トップ
================================================== */
.division_select .division_select_ttl {
	border-bottom-width: 3px;
	font-size: 100%;
	padding: 0 0 9px;
	margin: 0 0 19px;
}
.division_select .division_list li:not(:last-child) {
	margin: 0 0 11px;
}
.division_select .division_list .division_item {
	border-radius: 5px;
	padding: 15px 17px 14px;
}
.division_select .division_list .division_item .ttl {
	font-size: 118.75%;
	padding: 0 0 5px;
	margin: 0 0 13px;
}
.division_select .division_list .division_item .ttl a {
	background-position: 2px 0.2em;
	background-size: 20px auto;
	padding: 0 0 0 29px;
}
.division_select .division_list .division_item .cnt {
	font-size: 100%;
}

/* 課
================================================== */
.yoyaku_btn {
	padding: 15px 14px 14px;
	border-radius: 5px;
	margin: 11px auto;
}
.yoyaku_btn_ttl {
	border-bottom-width: 3px;
	font-size: 112.5%;
	padding: 0 0 3px;
	margin: 0 0 20px;
}
.yoyaku_btn_list li {
	margin: 0 0 14px;
}
.yoyaku_btn_list li a {
	text-align: left;
	font-size: 106.25%;
	padding: 14px 44px 12px 66px;
	box-shadow: 0 2px 0 0 rgba(203, 203, 203, 1);
	border-width: 3px;
	background-size: 59px;
	background-position: -3px center;
}
.yoyaku_btn_list li a:after {
	right: 18px;
	width: 18px;
	height: 18px;
}
.yoyaku_btn_list li a.reservation_link:after,
.yoyaku_btn_list li a.confirm_link:after {
	background-size: 100% auto;
}

/* 予約
================================================== */
.reserve_table {
	font-size: 87.5%;
}
.reserve_table,
.reserve_table > tbody,
.reserve_table > tbody > tr,
.reserve_table > tbody > tr > th,
.reserve_table > tbody > tr > td {
	display: block;
	width: 100%;
}
.reserve_table > tbody > tr > th,
.reserve_table > tbody > tr > td {
	padding: 8px 10px 8px;
	font-size: 100%;
	border-width: 0;
	border-bottom-width: 1px;
}
.reserve_table > tbody > tr > th {
	width: 100% !important;
}
.reserve_table th .require,
#comaList_head .require {
	width: auto;
	min-width: 32px;
	padding: 2px 3px 0;
}
.reserve_table th .require {
	font-size: 75%;
	margin: 3px 0 0;
}
.reserve_table.input_form > tbody > tr > td {
	padding: 7px 11px;
}
.type_search .reserve_table.input_form > tbody > tr > td {
	padding-right: 11px;
}
.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 {
	padding: 2px 5px 0px;
}
.reserve_table td textarea {
	min-height: 90px;
}
.reserve_table td #create_purpose_txt {
	margin: 10px 0 0;
	line-height: 1.4;
}
#reserve_form .select_wrapper:after {
	right: 9px;
	border-left-width: 4px;
	border-right-width: 4px;
	border-top-width: 6px;
}

/* 希望日カレンダー
============================== */
#calendar_block {
	display: block;
	padding: 12px 4px 11px;
	margin: 0;
}
#calendar_block.hidden {
	display: none;
}
.calendar {
	width: 100%;
}
.calendar:not(:last-child) {
	margin: 0 0 18px;
}
.calendar caption {
	font-size: 174%;
	margin: 0 0 8px;
}
.calendar thead th {
	font-size: 128.6%;
	padding: 6px 4px 5px;
}
.calendar td {
	vertical-align: top;
	padding: 4px 4px 2px;
	font-size: 128.6%;
}

/* 希望日時モーダル
============================== */
#comaList {
	top: 14%;
	bottom: 14%;
	left: 10px;
	right: 10px;
}
#comaList_head {
	padding: 8px 9px 6px 9px;
}
#comaList_head .ttl {
	font-size: 87.5%;
	font-weight: bold;
}
#comaList_head .require {
	margin: 2px 0 0 9px;
	font-size: 68.75%;
	padding: 1px 3px 0;
}
#comaList_head #comaList_button_row {
	margin: -2px 0 0 8px;
}
#comaList_head #comaList_close_button {
	font-size: 56.25%;
	padding: 4px 6px 3px;
	border-radius: 12px;
	width: 67px;
}
#comaList_cnt {
	padding: 13px 9px 21px 9px;
}
#comaList table {
	width: 100%;
}
#comaList table caption,
#comaList .caption {
	margin: 0;
}
#comaList .caption .date {
	font-size: 100%;
	float: none;
	margin: 0;
}
#comaList .caption .availability {
	font-size: 75%;
	float: none;
	margin: 0;
}
#comaList table th,
#comaList table td {
	font-size: 87.5%;
	border-width: 1px;
}
#comaList label {
	display: block;
	padding: 8px 10px 7px;
}
#comaList table th {
	padding: 2px 4px 2px;
	line-height: 1.2;
}
#comaList table th:first-child,
#comaList table td:first-child {
	width: 14%;
}
#comaList table th:last-child,
#comaList table td:last-child {
	width: 16%;
}
#comaList input[type="radio"] + label {
	width: 12px;
	height: 12px;
}
#comaList input[type="radio"] + label {
	border-width: 1px;
}
#comaList input[type="radio"]:checked + label:before {
	left: 2px;
	top: 2px;
	border-width: 3px;
}

/* 選択日時
============================== */
#reserve_date {
	margin: 24px 0 27px;
}
#reserve_number {
	margin: 29px auto 30px;
}
#reserve_date .reserve_date_box,
#reserve_number .reserve_number_box {
	border-width: 2px;
	padding: 11px 12px 8px 12px;
}
#reserve_date .reserve_date_box {
	display: block;
	padding-bottom: 14px;
}
#reserve_number .reserve_number_box {
	width: 100%;
}
#reserve_date .ttl,
#reserve_number .ttl {
	min-width: auto;
	max-width: none;
	background-size: auto 33px;
	background-position: left top;
	min-height: 33px;
}
#reserve_date .ttl {
	width: 100%;
	font-size: 100%;
	padding: 6px 0 15px 50px;
	margin: 0 0 4px;
	border-bottom-width: 1px;
	border-right: none;
}
#reserve_number .ttl {
	width: auto;
	max-width: 128px;
	padding: 7px 14px 0 53px;
	margin: 0 15px 0 0;
	font-size: 93.75%;
}
#reserve_date .date {
	font-size: 87.5%;
	line-height: 1.6;
	padding: 0;
}
#reserve_number .number {
	font-size: 156.25%;
	margin: -8px 0 0;
	padding: 10px 0 0;
}
/*
#reserve_date span br {
	display: inline-block;
}
*/

/* 新規予約、予約確認／取り消し
================================================== */
.caution,
.notes {
	margin: 16px auto 14px;
}
.caution p,
.notes p {
	font-size: 100%;
	text-align: left;
	margin: 0 0 10px;
	line-height: 1.5;
}
.caution p br.pcbr,
.notes p br.pcbr {
	display: none;
}

/* 予約確認／取り消し
============================== */
#inquiry_form .reservation_number_inputs span {
	margin: 0 6px;
}
#inquiry_form .reservation_number_inputs span:before {
	width: 8px;
	border-bottom-width: 2px;
}

/* ==================================================
accessibility style change:color
================================================== */
.color_blue #comaList_box,
.color_yellow #comaList_box,
.color_black #comaList_box {
	border-width: 1px;
}

/* ==================================================
accessibility style change:fsize
================================================== */

}