@charset 'UTF-8';

/*

    Common

*/

/*  font size  */
#contents { font-size: 1.3rem;}
#contents h2 { font-size: 1.7rem;}
#contents h3 { font-size: 1.5rem;}
@media screen and (min-width: 768px) {
	#contents { font-size: 1.5rem;}
	#contents h2 { font-size: 2.4rem;}
	#contents h3 { font-size: 1.8rem;}
}

/*  anchor  */
#contents a {
	color: inherit;
	text-decoration: underline;
}

/*  Headings  */
#contents h2 {
	margin: 1em 0;
	text-align: center;
	font-weight: normal;
}

/*  hr  */
#contents hr {
	border-color: #eeeeee;
}

/*  table  */
#contents table {
	width: 100%;
	border: none;
	border-top: 1px #cccccc solid;
}
#contents table th,
#contents table td {
	border: none;
	border-bottom: 1px #cccccc solid;
	background-color: transparent;
}

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

/*  message  */
#contents #c_message.success p,
#contents #c_message.failure p {
	margin: 0 0 2em;
	padding: 1em;
}
#contents #c_message.success p {
	background-color: #eeeeee;
}
#contents #c_message.failure p {
	background-color: #000000;
	color: #ffffff;
}

/*  button  */
#contents a.button,
#contents input[type=submit],
#contents button {
	display: inline-block;
	margin: 1em 0;
	padding: 0.75em 2em;
	border: 1px #cccccc solid;
	border-radius: 5px;
	background-color: transparent;
	color: #333333;
	text-decoration: none;
	cursor: pointer;
}
#contents a.button.disable,
#contents input[type=submit].disable,
#contents button.disable {
	opacity: 0.3;
}
#contents a.button.small,
#contents input[type=submit].small,
#contents button.small {
	padding: 0.25em 0.75em;
}

/*  back  */
#contents p.back {
	margin-top: 2em;
	padding-top: 0.5em;
	border-top: 1px #eeeeee solid;
}





/*

    Progress

*/

/*  bar  */
div.progress {
	position: relative;
}
div.progress:before {
	content: '';
	display: block;
	position: absolute;
	top: 33px;
	left: 10%;
	width: 80%;
	border-bottom: 1px #999999 dashed;
}
div.progress ol {
	display: flex;
	margin: 0;
}
div.progress ol li {
	position: relative;
	width: 20%;
	margin: 0;
	padding: 25px 0;
	list-style: none;
	text-align: center;
	font-size: 0.8rem;
	color: #999999;
}
div.progress ol li.current {
	color: #333333;
}
div.progress ol li:before {
	content: '';
	display: block;
	width: 15px;
	height: 15px;
	margin: 0 auto 0.5em;
	border: 1px #666666 solid;
	background-color: #ffffff;
	border-radius: 10px;
}
div.progress ol li.current:before {
	background-color: #666666;
}
div.progress ol li span.step {
	display: block;
	position: absolute;
	left: 50%;
	top: 0;
	width: 4em;
	margin-left: -2em;
	font-family: 'Times New Roman', serif;
	font-size: 1.5rem;
}
@media screen and (min-width: 768px) {
	div.progress {
		margin-bottom: 1em;
	}
	div.progress ol li {
		font-size: 1.3rem;
	}
}





/*

    Form

*/

/*  common  */
#contents form input[type=text],
#contents form input[type=password],
#contents form select,
#contents form textarea {
	border-color: #dddddd;
	border-radius: 5px;
}
#contents form input[type=text],
#contents form input[type=password] {
	height: 2.5em;
	line-height: 2.5;
}
#contents form ::placeholder {
	color: #999999;
}

/*  submit area  */
#contents div.submit {
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	margin: 1em 0;
}

/*  small  */
#contents form.small label {
	display: block;
	margin-bottom: 1em;
}
#contents form.small label span.name {
	display: block;
	padding: 0 0 0.125em;
	font-family: 'Times New Roman', serif;
	color: #666666;
}
#contents form.small input[type=text],
#contents form.small input[type=password] {
	width: 100%;
}
@media screen and (min-width: 768px) {
	#contents form.small {
		max-width: 640px;
		margin: 0 auto;
	}
}

/*  confirm  */
#contents form.confirm dl dt {
	padding: 0 0 0.125em;
	font-family: 'Times New Roman', serif;
}
#contents form.confirm dl dd {
	margin: 0 0 1em;
	padding: 0 0 1em;
	border-bottom: 1px #cccccc solid;
}





/*

    Menu select

*/

/*  layout  */
@media screen and (min-width: 768px) {
	#contents div.menues {
		display: flex;
		flex-direction: row-reverse;
		justify-content: space-between;
		align-items: flex-start;
	}
	#contents div.menues div.selected {
		width: 40%;
	}
	#contents div.menues form {
		width: 55%;
	}
}

/*  selected  */
@media screen and (max-width: 767px) {
	#contents div.menues div.selected {
		border: 1px #cccccc solid;
	}
	#contents div.menues div.selected h2 {
		margin: 0;
		padding: 0.25em 0;
		border-bottom: 1px #cccccc solid;
		font-size: 1.5rem;
	}
	#contents div.menues div.selected dl {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		margin: 0;
	}
	#contents div.menues div.selected dl dt {
		order: -1;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 20%;
		min-height: 3em;
		border-left: 1px #cccccc solid;
		font-size: 1.0rem;
		font-weight: normal;
		text-align: center;
		box-sizing: border-box;
	}
	#contents div.menues div.selected dl dt:first-child {
		border: none;
	}
	#contents div.menues div.selected dl dt.current {
		background-color: #eeeeee;
	}
	#contents div.menues div.selected dl dd {
		display: none;
		width: 100%;
		margin: 0;
		padding: 0.5em;
		border-top: 1px #cccccc solid;
		box-sizing: border-box;
	}
	#contents div.menues div.selected dl dd div {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	#contents div.menues div.selected dl dd div input {
		display: none;
	}
}
@media screen and (min-width: 768px) {
	#contents div.menues div.selected {
		border: 1px #cccccc solid;
	}
	#contents div.menues div.selected h2 {
		margin: 0;
		padding: 0.5em 0;
		border-bottom: 1px #cccccc solid;
		font-size: 1.8rem;
	}
	#contents div.menues div.selected dl {
		margin: 0;
	}
	#contents div.menues div.selected dl dt {
		display: none;
	}
	#contents div.menues div.selected dl dd {
		display: block !important;
		margin: 0 0.75em;
		padding: 0.5em;
		border-top: 1px #cccccc dotted;
	}
	#contents div.menues div.selected dl dd:first-child {
		border: none;
	}
	#contents div.menues div.selected dl dd div {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	#contents div.menues div.selected dl dd div input {
		display: none;
	}
}

/*  selection  */
#contents div.menues form dl {
	border-left: 1px #cccccc solid;
	border-right: 1px #cccccc solid;
	border-top: 1px #cccccc solid;
}
#contents div.menues form dl dt {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.5em;
	border-bottom: 1px #cccccc solid;
	font-weight: normal;
}
#contents div.menues form dl dt:after {
	content: '+';
	font-size: 1.5rem;
	line-height: 1;
}
#contents div.menues form dl dd {
	display: none;
	margin: 0;
	padding: 0.75em;
	border-bottom: 1px #cccccc solid;
}
#contents div.menues form dl dd ul {
	margin: 0;
}
#contents div.menues form dl dd ul li {
	margin: 0;
	padding: 0.75em 0;
	list-style: none;
	border-bottom: 1px #cccccc dotted;
}
#contents div.menues form dl dd ul li label {
	display: flex;
	justify-content: space-between;
}
#contents div.menues form dl dd ul li label.disable {
	opacity: 0.5;
}
#contents div.menues form dl dd div.submit {
	margin: 0.5em 0 0;
	padding: 0.5em;
}
#contents div.menues form dl dd div.submit a.button {
	margin: 0;
}
@media screen and (min-width: 768px) {
	#contents div.menues form dl {
		margin: 0;
	}
}





/*

    Stylist

*/

/*  stylists  */
#contents ul.stylists li {
	margin: 0;
	padding: 5px 0;
	list-style: none;
	border-bottom: 1px #cccccc dotted;
}
#contents ul.stylists li h3 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
}
#contents ul.stylists li h3 div.staff {
	display: flex;
	align-items: center;
}
#contents ul.stylists li h3 div.staff span.thumbnail {
	width: 60px;
	height: 90px;
	margin-right: 1em;
	border: 1px #cccccc solid;
	background-image: url('./images/mark.gif');
	background-size: cover;
	position: center center;
}
#contents ul.stylists li h3:after {
	content: '';
	display: block;
	width: 10px;
	height: 10px;
	margin-right: 10px;
	border-bottom: 1px #666666 solid;
	border-right: 1px #666666 solid;
	transform: rotate(45deg);
}
#contents ul.stylists li.open h3:after {
	transform: rotate(225deg);
}
@media screen and (min-width: 768px) {
	#contents ul.stylists li h3 div.staff span.thumbnail {
		width: 90px;
		height: 120px;
	}
}





/*

    Calendar

*/

/*  calendar  */
#contents div.table table tr td { display: none;}
#contents div.table table th,
#contents div.table table td {
	padding: 0.5em 0;
	border: 1px #cccccc solid;
	text-align: center;
	font-weight: normal;
}
#contents div.table table th {
	font-size: 1.1rem;
}
#contents div.table table td.sun {
	background-color: #efddd9;
	color: #b95756;
}
#contents div.table table td.sat {
	background-color: #d9e3ec;
	color: #4666bd;
}
@media screen and (min-width: 768px) {
	#contents div.table table th {
		font-size: 1.5rem;
	}
}

/*  navigation  */
#contents div.schedule div.nav {
	display: flex;
	justify-content: space-between;
	padding: 0 10px;
}





/*

    Confirm

*/

/*  layout  */
#contents div.confirm {
	margin: 0 -10px;
	border-top: 1px #cccccc solid;
}
#contents div.confirm h2 {
	margin: 10px 0 0;
}
#contents div.confirm p {
	margin: 0 0 10px;
	text-align: center;
	color: #666666;
}
#contents div.confirm dl {
	margin: 0;
	padding: 10px;
	border-top: 1px #cccccc solid;
}
@media screen and (min-width: 768px) {
	#contents div.confirm h2 {
		margin-top: 2rem;
	}
	#contents div.confirm p {
		margin-bottom: 2rem;
	}
}

/*  content  */
#contents div.confirm dl dt {
	float: left;
	width: 7em;
	padding-top: 0.75em;
	font-weight: normal;
}
#contents div.confirm dl dd {
	margin: 0;
	padding: 0.75em;
	padding-left: 8em;
	border-bottom: 1px #333333 dotted;
}
#contents div.confirm dl dd ul {
	margin: 0;
}
#contents div.confirm dl dd ul li {
	margin: 0;
	list-style: none;
}
@media screen and (min-width: 768px) {
	#contents div.confirm dl dt {
		width: 300px;
	}
	#contents div.confirm dl dd {
		padding-left: 320px;
	}
}

/*  submit  */
#contents div.confirm div.submit {
	margin: 0 30px;
}
@media screen and (min-width: 768px) {
	#contents div.confirm div.submit {
		margin: 0 210px;
	}
}





/*

    Finish

*/

/*  layout  */
#contents div.reserved h2 {
	padding-top: 10px;
	border-top: 1px #cccccc solid;
}
@media screen and (min-width: 768px) {
	#contents div.reserved h2 {
		padding-top: 1em;
	}
}





/*

    Other

*/

/*  finish  */
#contents div.finish {
	text-align: center;
}
#contents div.finish h2 {
	margin: 0 -10px 30px;
	padding-bottom: 10px;
	border-bottom: 1px #cccccc solid;
}
@media screen and (min-width: 768px) {
	#contents div.finish h2 {
		margin: 0 -30px 40px;
		padding-bottom: 30px;
	}
}

/*  login (popup)  */
#login {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.6);
}
#login div.content {
	max-width: 480px;
	margin: 3em auto;
	padding: 1em 2em 2em;
	background-color: #ffffff;
	border-radius: 5px;
}