@charset 'UTF-8';

/*

    Common

*/

/*  headings  */
#contents h2 {
	margin: 2em 0 1em;
	padding-left: 0.5em;
	border-left: 5px #1d66b1 solid;
	font-size: 2.4rem;
}
#contents h2:first-child {
	margin-top: 1em;
}
#contents h3 {
	margin: 2em 0 1em;
	font-size: 2.1rem;
}

/*  message  */
#contents p.success,
#contents p.failure {
	margin: 0 0 2em;
	padding: 1em;
	border-radius: 5px;
}
#contents p.success {
	background-color: #e9ffd6;
	border: 1px #669933 solid;
	color: #669933;
}
#contents p.failure {
	border: 1px #FF6666 solid;
	background-color: #ffdddd;
	color: #FF6666;
}

/*  text  */
#contents p.notes {
	font-size: smaller;
	color: #666666;
}

/*  em  */
#contents div.em {
	margin: 1em 0;
	padding: 0.5em 1em;
	background-color: #eeeeee;
}

/*  table  */
#contents table {
	width: 100%;
	margin: 0.5em 0;
}
#contents table td,
#contents table th {
	padding: 0.5em 0.5em 0.5em 0;
	background-color: transparent;
	border: none;
	border-top: 1px #cccccc solid;
	border-bottom: 1px #cccccc solid;
	vertical-align: top;
}

/*  hr  */
#contents hr {
	margin: 3em 0;
	border-color: #cccccc;
}

/*  form  */
#contents form.small dd {
	margin: 0.25em 0 1em;
}
#contents form.small dd input[type=text],
#contents form.small dd input[type=password],
#contents form.small dd textarea,
#contents form.small dd select {
	width: 100%;
	height: 2.5em;
	padding: 0 0.5em;
	font-size: 1.7rem;
	line-height: 2.5em;
}
#contents form.small dd textarea {
	height: auto;
}
#contents form.small input[type=submit] {
	display: inline-block;
	padding: 0.5em 2em;
	border: none;
	background-color: #1d66b1;
	color: #ffffff;
	font-size: 1.8rem;
	cursor: pointer;
}
#contents form.small .other a {
	color: #666666;
}

/*  confirm  */
#contents form.confirm dd {
	margin: 0.25em 0 1em;
	padding: 0.5em;
	background-color: #eeeeee;
}

/*  form large  */
#contents form.large dl dd {
	margin: 0.25em 0 1em;
	padding-bottom: 0.75em;
	border-bottom: 1px #cccccc solid;
}
#contents form.large dl dd p {
	margin: 0.5em 0;
}
#contents form.large dd input[type=text],
#contents form.large dd input[type=password],
#contents form.large dd textarea,
#contents form.large dd select {
	width: 100%;
	height: 2.5em;
	padding: 0 0.5em;
	font-size: 1.7rem;
	line-height: 2.5em;
}
#contents form.large dd textarea {
	height: auto;
	padding: 0.5em;
	line-height: 1.5;
}
#contents form.large.confirm dd {
	background-color: transparent;
}
@media screen and (min-width: 800px) {
	#contents form.large dl {
		border-top: 1px #cccccc solid;
	}
	#contents form.large dl dt {
		float: left;
		width: 30%;
		padding: 0.75em 0 0;
	}
	#contents form.large dl dd {
		min-height: 1.5em;
		margin: 0;
		padding: 0.75em 0;
		padding-left: 32%;
		border-bottom: 1px #cccccc solid;
	}
}

/*  button  */
#contents .button {
	display: inline-block;
	padding: 0.5em 2em;
	border: 1px #1d66b1 solid;
	background-color: #1d66b1;
	color: #ffffff;
	font-size: 1.8rem;
	cursor: pointer;
}
#contents .button.medium {
	padding: 0.25em 1em;
	font-size: 1.5rem;
}
#contents .button.small {
	padding: 0.25em 1em;
	font-size: 1.3rem;
}
#contents .button.type2 {
	background-color: #ffffff;
	color: #1d66b1;
}

/*  back  */
#contents .back {
	display: inline-block;
	padding: 0 1em;
	border: 1px #cccccc solid;
	background-color: #eeeeee;
	color: #666666;
	border-radius: 3px;
}

/*  tab  */
nav.tab {
	margin-bottom: 1em;
	overflow-x: auto;
}
nav.tab ul {
	display: flex;
	width: 100%;
	margin-bottom: 0;
	border-bottom: 1px #cccccc solid;
	list-style: none;
	
}
nav.tab ul li {
	margin: 0 0 -1px 10px;
	border: 1px #cccccc solid;
}
nav.tab ul li a {
	display: block;
	padding: 0.5em 1em;
	background-color: #eeeeee;
	white-space: nowrap;
	color: inherit;
	cursor: pointer;
}
nav.tab ul li.current {
	border-bottom-color: #ffffff;
}
nav.tab ul li.current a {
	background-color: #ffffff;
}





/*

    Outer

*/

/*  layout  */
@media screen and (min-width: 800px) {
	#contents div.outer {
		overflow: hidden;
	}
	#contents div.outer div h2 {
		margin-top: 0em;
	}
	#contents div.outer div.main {
		float: left;
		width: 64%;
		padding-right: 3%;
		border-right: 1px #cccccc solid;
	}
	#contents div.outer div.description {
		float: right;
		width: 30%;
	}
}





/*

    Reserve

*/

/*  progress  */
#contents nav.progress ol {
	display: flex;
	justify-content: center;
}
#contents nav.progress ol li {
	flex: 1;
	margin: 0;
	padding: 0.5em;
	list-style: none;
	background-color: #f7f4ef;
	border-left: 1px #ffffff solid;
	color: #cccccc;
	font-size: 0.8rem;
	text-align: center;
	box-sizing: border-box;
}
#contents nav.progress ol li.current {
	background-color: #1d66b1;
	color: #ffffff;
}
@media screen and (min-width: 350px) { #contents nav.progress ol li { font-size: 1.0rem;}}
@media screen and (min-width: 400px) { #contents nav.progress ol li { font-size: 1.2rem;}}
@media screen and (min-width: 600px) { #contents nav.progress ol li { font-size: 1.4rem;}}
@media screen and (min-width: 800px) { #contents nav.progress ol li { font-size: 1.6rem;}}

/*  reserve  */
#contents div.reserve {
	margin: 1em 0;
	padding: 0 1em;
	border: 1px #cccccc solid;
	border-radius: 5px;
}
#contents div.reserve table tr:first-child th,
#contents div.reserve table tr:first-child td {
	border-top: none;
}
#contents div.reserve table tr:last-child th,
#contents div.reserve table tr:last-child td {
	border-bottom: none;
}

/*  calendar  */
#contents div.calendars {
	display: flex;
	flex-wrap: wrap;
}
#contents div.calendars div.calendar {
	width: 100%;
	padding-bottom: 1em;
	box-sizing: border-box;
}
#contents div.calendars div.calendar div.item {
	margin: 0.5em;
	padding: 0.5em 1em;
	border: 1px #cccccc solid;
}
#contents div.calendars div.calendar table caption {
	padding: 0 0 0.5em;
	font-size: larger;
}
#contents div.calendars div.calendar table th,
#contents div.calendars div.calendar table td {
	text-align: center;
}
#contents div.calendars div.calendar table tr:last-child td {
	border-bottom: none;
}
#contents div.calendars div.calendar table td a {
	display: block;
	width: 2em;
	line-height: 2em;
	color: inherit;
	border-radius: 5em;
}
#contents div.calendars div.calendar table td.open a {
	background-color: #1d66b1;
	color: #ffffff;
}
#contents div.calendars div.calendar table td .sun,
#contents div.calendars div.calendar table td .hol {
	color: #CC3333;
}
@media screen and (min-width: 800px) {
	#contents div.calendars div.calendar {
		width: 33.3%;
	}
	#contents div.calendars div.calendar div.item {
		margin: 0.5em 1em 0.5em 0;
	}
	#contents div.calendars div.calendar table td a,
	#contents div.calendars div.calendar table td span {
		width: 1.75em;
		line-height: 1.75em;
	}
}

/*  menues  */
#contents ul.menues {
	border-top: 1px #cccccc solid;
}
#contents ul.menues li {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin: 0;
	padding: 0.5em 0;
	border-bottom: 1px #cccccc solid;
}
#contents ul.menues li span.price {
	display: block;
	padding: 0.25em 0 0;
}
#contents ul.menues li span.description {
	color: #666666;
	font-size: smaller;
}
#contents ul.menues li a.button {
	flex-shrink: 0;
	margin-left: 0.5em;
	white-space: nowrap;
}
#contents ul.menues li.beauty a.button {
	background-color: #c68add;
	border-color: #c68add;
}



/*

    Reservations

*/

/*  reservations  */
#contents div.reservations {
	border-top: 1px #cccccc solid;
}
#contents div.reservations div.reservation {
	position: relative;
	padding: 1em 0;
	border-bottom: 1px #cccccc solid;
}
#contents div.reservations div.reservation span.label {
	display: inline-block;
	width: 6em;
	margin: 0.25em 0;
	padding: 0 0.5em;
	background-color: #eeeeee;
	font-size: smaller;
	text-align: center;
}
#contents div.reservations div.reservation div.edit {
	margin-top: 0.5em;
}



/*

    Top

*/

/*  navigation  */
#contents nav.top ul {
	display: flex;
	flex-wrap: wrap;
}
#contents nav.top ul li {
	width: 50%;
	margin: 0;
	padding: 10px;
	list-style: none;
	box-sizing: border-box;
}
#contents nav.top ul li a {
	display: block;
	padding: 1em 0;
	border: 5px #1d66b1 solid;
	text-align: center;
}
#contents nav.top ul li a i {
	font-size: 4.2rem;
}
#contents nav.top ul li a span {
	display: block;
	margin-top: 0.5em;
}
@media screen and (min-width: 800px) {
	#contents nav.top ul li {
		width: 25%;
		padding: 15px 15px 15px 0;
	}
}