@charset "utf-8";
/* CSS Document */

/* ==================================================

	ご予約

================================================== */

.contents_wrapper .contents_block {
	width: 100%;
	margin: 0 auto;
}
.contents_wrapper div + .contents_block {
	margin: 1.5rem auto 0;
}
.contents_wrapper .contents_block h3 {
	position: relative;
    font-size: 1.25rem;
	font-weight: bold;
    border-left: #BD982C solid 6px;
    padding: 0 0 0 1rem;
    margin: 0 0 1rem 0;
}
.contents_wrapper .contents_block div + h3 {
    margin: 1.5rem 0 1rem 0;
}

/* ==================================================
	カレンダー
================================================== */

.form_calendar_wrapper,
.calendar_wrap,
.calendar_wrap li table {
	width: 100%;
}
.form_calendar_wrapper {
	margin: 0 auto 40px;
}
.calendar_year {
	text-align: center;
	margin: 0 auto 28px;
}
.calendar_year p {
	position: relative;
	display: inline-block;
	font-size: 1.15rem;
	padding: 0 42px 0 48px;
}
.calendar_year p span {
	font-size: 2rem;
	padding-right: .5rem;
}
.calendar_year p:before,
.calendar_year p:after {
	content: '';
	position: absolute;
	top: 0;
	display: block;
	width: 26px;
	height: 39px;
	background: url(../img/common/logo_mark01.png) center center no-repeat;
	background-size: contain;
}
.calendar_year p:before {
	left: 0;
}
.calendar_year p:after {
	right: 0;
}
.calendar_wrap {
	display: flex;
	flex-flow: wrap;
	justify-content: space-between;
	margin: 0 auto;
}
.calendar_wrap li {
	width: calc(50% - 10px);
}
.calendar_wrap li:nth-child(n+3) {
	margin: 20px 0 0 0;
}
.calendar_wrap li table {
	table-layout: fixed;
	border-collapse:collapse;
	color: #333;
}
.calendar_wrap li table tbody {
	background: #FFF;
	border-top: solid 1px #999;
	border-left: solid 1px #999;
}
.calendar_wrap li table thead th {
	padding: 0 0 10px 0;
	font-weight: inherit;
}
.calendar_wrap li table thead th span {
	font-size: 1.5rem;
	padding: 0 .25rem 0 .5rem;
}
.calendar_wrap li table tbody th,
.calendar_wrap li table tbody td {
	text-align: center;
}
.calendar_wrap li table tbody th {
	border-bottom: solid 1px #999;
	border-right: solid 1px #999;
	font-weight: inherit;
}
.calendar_wrap li table tbody td {
	font-size: 1.25rem;
	border-right: solid 1px #999;
	border-bottom: solid 1px #999;
	padding: 10px 0;
	cursor: pointer;
}
.calendar_wrap li table tbody th:first-child,
.calendar_wrap li table tbody tr td:first-child,
.calendar_wrap li table tbody .day_holiday {
	color: #990000;
	background: #FFE3E3;
}
.calendar_wrap li table tbody th:last-child,
.calendar_wrap li table tbody tr td:last-child {
	color: #003366;
	background: #DEEFFF;
}
.calendar_wrap li table tbody td:hover,
.calendar_wrap li table tbody tr td:first-child:hover,
.calendar_wrap li table tbody tr td:last-child:hover,
.calendar_wrap li table tbody .day_holiday:hover {
	color: #BD982C;
	background: #F4EBD1;
}
.calendar_wrap li table tbody .day_check,
.calendar_wrap li table tbody tr td:first-child.day_check,
.calendar_wrap li table tbody tr td:last-child.day_check,
.calendar_wrap li table tbody .day_holiday.day_check {
	color: #FFF;
	background: #BD982C;
	background-size: contain;
}
.calendar_wrap li table tbody .day_close,
.calendar_wrap li table tbody tr td:first-child.day_close,
.calendar_wrap li table tbody tr td:last-child.day_close,
.calendar_wrap li table tbody .day_holiday.day_close {
	color: #999;
	background: #CCC;
	text-decoration: line-through;
	font-weight: normal;
}
.calendar_wrap li table tbody .day_check,
.calendar_wrap li table tbody tr td:first-child.day_check,
.calendar_wrap li table tbody tr td:last-child.day_check,
.calendar_wrap li table tbody .day_holiday.day_check,
.calendar_wrap li table tbody .day_close,
.calendar_wrap li table tbody tr td:first-child.day_close,
.calendar_wrap li table tbody tr td:last-child.day_close,
.calendar_wrap li table tbody .day_holiday.day_close,
.calendar_wrap li table tbody .day_none {
	pointer-events: none;
}

.form_wrapper .form_contents_wrapper {
	background: #FFF;
	border: #BD982C solid 1px;
	padding: 2rem 1rem;
}
.form_wrapper .form_contents_wrapper > div {
	width: 100%;
	max-width: 815px;
	margin: 0 auto;
}
.form_wrapper .form_contents_wrapper > div + div,
.form_contents div + .fee_block,
.form_contents.reserve_meal .form_contents_about + .form_contents_about,
.form_contents.reserve_meal .form_contents_about > div + div {
	margin-top: 1rem;
}
.form_wrapper .form_contents_wrapper .submit {
	margin-top: 1.5rem
}
/* 入力フォーム内の料金表記 */
.form_contents .fee_block {
	display: flex;
	flex-flow: column;
	/*align-items: flex-end;*/
	align-items: flex-start;
	background: #DEDEDE;
	padding: 1rem;
}
/* 宿泊人数 */
.form_contents.reserve_people .count_01 p + p {
	border-left: #666 solid 1px;
	padding-left: 1rem;
	margin-left: 1rem;
}
/* ご用意する数 */
.form_contents.reserve_meal .form_contents_about .count_01 {
	border: #DDD solid 1px;
	padding: 1rem;
}
/*.form_contents.reserve_meal .form_contents_about .count_01 p span:nth-of-type(2) {
	position: relative;
    padding-right: 3.05rem;
}
.form_contents.reserve_meal .form_contents_about .count_01 p span:nth-of-type(2):after {
	content: '×';
    display: block;
	position: absolute;
	top: -.25rem;
    right: .5rem;
    font-size: 2.75rem;
    font-weight: lighter;
}*/
.form_contents.reserve_meal .form_contents_about .count_01 p + p {
	padding-top: 1rem;
}
#meal_count01 p,
#meal_count02 p {
	display: block;
}
#meal_count01,
#meal_count02 {
	display: none;
}

/* ==================================================
	ご予約内容の入力
	お客様情報の入力
================================================== */

#container .main .form_wrapper .contents_wrapper + .contents_title {
	margin: 40px auto 0;
}

.reserve_fee_wrapper,
.total_amount,
.total_amount dl,
.reserve_fee_wrapper .breakdown,
.reserve_about_list {
	width: 100%;
}
.total_amount dl,
.reserve_fee_wrapper .breakdown > div > p {
	padding: 0 1rem;
}
.reserve_fee_wrapper,
.total_amount,
.total_amount dl,
.reserve_fee_wrapper .breakdown,
.reserve_fee_wrapper .breakdown > div > p,
.reserve_fee_wrapper .breakdown > ul {
	margin: 0 auto;
}
.reserve_fee_wrapper .breakdown > div,
.reserve_fee_wrapper .breakdown > ul {
	font-size: 1.15rem;
}
.total_amount dl dd {
	font-size: 1.75rem;
}
.total_amount dl dt,
.reserve_fee_wrapper .breakdown > ul > li > dl > dd {
	font-size: 1.25rem;
}
.reserve_fee_wrapper {
	background: #FFF;
	border: #BD982C solid 1px;
}
.total_amount {
	background: #F4EBD1;
	border-bottom: #BD982C solid 1px;
	padding: 1rem
}
/*
.total_amount dl,
.reserve_fee_wrapper .breakdown,
.reserve_fee_wrapper .breakdown > div > p,
.reserve_fee_wrapper .breakdown > ul,
.reserve_about_list {
	max-width: 480px;
}
*/
.total_amount dl {
    display: flex;
    justify-content: space-between;
	align-items: baseline;
}
.total_amount dl dt,
.total_amount dl dd {
	font-weight: bold;
}
.reserve_fee_wrapper .breakdown {
	padding: 1.25rem 1rem 1.5rem;
}
.reserve_fee_wrapper .breakdown > div {
	border-bottom: #BD982C solid 1px;
	padding: 0 0 .25rem;
}
.reserve_fee_wrapper .breakdown > ul {
	padding: 1rem 1rem 0;
}
.reserve_fee_wrapper .breakdown > ul > li + li {
	padding-top: .5rem;
}
.reserve_fee_wrapper .breakdown > ul > li > dl {
    display: flex;
    justify-content: space-between;
	align-items: baseline;
}
.reserve_fee_wrapper + div {
	margin: 1.5rem auto 0;
}


/* タブレットサイズ（960px以下） */
@media all and (max-width: 960px) {
.calendar_wrap {
	justify-content: center;
	max-width: 640px;
}
.calendar_wrap li {
	width: 100%;
}
.calendar_wrap li + li {
	margin: 20px 0 0 0;
}

.total_amount dl,
.reserve_fee_wrapper .breakdown > div > p {
    padding: 0;
}
.reserve_fee_wrapper .breakdown > ul {
    padding: 1rem 0 0;
}
}

/* スマホサイズ（600px以下） */
@media all and (max-width: 600px) {
.form_calendar_wrapper {
    margin: 0 auto 20px;
}
.form_wrapper .form_contents_wrapper {
    padding: 1rem .5rem;
}
.form_contents.reserve_people .count_01 p,
.form_contents.reserve_meal .form_contents_about .count_01 p span:nth-of-type(1) {
	width: 100%;
}
.form_contents.reserve_meal .form_contents_about .count_01 p span:nth-of-type(1) {
	padding-bottom: .5rem;
}
.form_contents.reserve_people .count_01 p input {
	/*max-width: 100%;*/
}
.form_contents.reserve_people .count_01 p + p {
	border-top: #666 solid 1px;
    border-left: none;
	padding-top: 1rem;
    padding-left: 0;
	margin-top: 1rem;
    margin-left: 0;
}
.form_contents.reserve_meal .form_contents_about .count_01 {
    padding: .5rem .5rem .75rem;
}
.form_contents.reserve_meal .form_contents_about .count_01 p {
	flex-flow: wrap;
}
.form_contents.reserve_meal .form_contents_about .count_01 p input {
	/*width: calc(100% - 60px);
	max-width: 100%;*/
}
.form_contents.reserve_meal .form_contents_about .count_01 p input:first-of-type {
	margin-left: 0;
}
.form_contents.reserve_meal .form_contents_about .count_01 p span:nth-of-type(2) {
    position: static;
    padding-right: 0;
}
.form_contents.reserve_meal .form_contents_about .count_01 p span:nth-of-type(2):after {
	display: none;
}
.form_contents .fee_block {
	align-items: flex-start;
    padding: .5rem;
}
.form_contents .fee_block p + p {
	padding-top: .5rem;
}

#container .main .form_wrapper .contents_wrapper + .contents_title {
	margin: 32px auto 0;
}
.total_amount {
	padding: .5rem .5rem .75rem;
}
.total_amount dl dt,
.reserve_fee_wrapper .breakdown > div,
.reserve_fee_wrapper .breakdown > ul {
    font-size: 1.05rem;
}
.total_amount dl,
.reserve_fee_wrapper .breakdown > ul > li > dl {
    flex-flow: column;
}
.total_amount dl {
    align-items: center;
}
.total_amount dl dt {
	font-weight: normal;
}
.reserve_fee_wrapper .reserve_about_list > dd {
    padding-left: 0;
}
.reserve_fee_wrapper .breakdown {
    padding: 1rem .5rem 1.25rem;
}
}