@charset "UTF-8";
/* 
 style info : デザインスタイル

2019/08/


 */


/*----------------------------------------------------
	#contetnts
----------------------------------------------------*/


#contents{
	background:#fff ;
	text-align: left;
}

.box{
	padding: 60px;
	box-sizing: border-box;
}
@media screen and (max-width: 768px) {
	.box{ 
		padding: 20px;
	}
}


/*----------------------------------------------------
	共通
----------------------------------------------------*/
/*フロー*/

#contents nav {
	margin-bottom: 40px;
}
#contents nav ul{
	display:flex;
	align-items: center;
}

#contents nav li{
	position: relative;
	text-align: center;
	width: 20%;
	padding: 15px 0; 
	color: #E5E5E5;
	font-size: 1.4rem;
	line-height: 1.2;
}
#contents nav li.select{
	color:  #005083;
	border-bottom: 2px solid #005083;
}
#contents nav li.clear{
	color:  #005083;
	border-bottom:none;
}
#contents nav li:after{
position: absolute;
	top: 50%;
	right: 0;
	margin-top: -12px;
    content: "\f105";
	color:#E5E5E5;
    font-family: FontAwesome;
}
#contents nav li.select:after,#contents nav li.clear:after{
	position: absolute;
	top: 50%;
	right: 0;
	margin-top: -12px;
    content: "\f105";
	color:#005083;
    font-family: FontAwesome;
}
#contents nav li:last-child:after{
	content: none;
}
@media screen and (max-width: 768px) {
	#contents nav {
	margin-bottom: 20px;
}
	#contents nav ul{
		justify-content:center;
		flex-wrap: wrap;
}
	#contents nav li{
		font-size: 1.2rem;
	width:32%;
}
	#contents nav li:after{
position: absolute;
	top: 50%;
	right:-5px;
	margin-top: -5px;
    content: "\f105";
	color:#E5E5E5;
    font-family: FontAwesome;
}
#contents nav li.select:after{
	position: absolute;
	top: 50%;
	right:-5px;
	margin-top: -5px;
    content: "\f105";
	color:#005083;
    font-family: FontAwesome;
}
}

/*----------------------------------------------------
	各ページデザイン
----------------------------------------------------*/

section{
	width:580px;
	margin:auto;
}
section h3{
	margin-bottom: 40px;
}

table {
	border-collapse: collapse;
	width:100%;
	box-sizing: border-box;
	border:1px solid  #47c3e5;
}

table th {
	padding: 10px;
	font-weight:normal;
	border:1px solid  #47c3e5;
	box-sizing:border-box;
}
table td {
	padding: 10px;
	border:1px solid  #47c3e5;
	box-sizing:border-box;
	font-size: 1.4rem;
}

@media screen and (max-width: 768px) {
	section{
	width:100%;
	margin:auto;
}
section h3{
	margin-bottom: 20px;
}
	
}


/*シミュレーション
----------------------------------------------------*/

.simulation dl,.simulation table{
	margin-bottom:30px;
}
.simulation dt{
	margin: 0 10px;
}
.simulation dd{
	margin: 0 10px 15px;
}
.simulation dd input[type="radio"]{
}
.simulation dd label{
	padding:8px;
}
.simulation dd li{
	display:inline-block;
}

.simulation dt{
	font-weight:bold;
}
.simulation dt img,.simulation dd img{
	width:80px;
}
.simulation select {
	width: 100%;
	padding: 10px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: 1px solid #cbcbcb;
	background: #eee;
	background: url(../img/arrow.png) right 50% no-repeat, #fff;
	border-radius:0;
	font-size:1.6rem;
}

.simulation select::-ms-expand {
	display: none;
}

@media screen and (max-width: 768px) {
	input,select,textarea{/*iphone拡大防止用*/
		font-size:1.6rem;
	}
}


.simulation table {
	border-collapse: collapse;
	width:100%;
	box-sizing: border-box;
	border:1px solid  #47c3e5;
}

.simulation table th {
	padding: 10px 20px;
	vertical-align:top;
	font-weight:normal;
	border:1px solid  #47c3e5;
	text-align:left;
}
.simulation table td {
	padding: 10px 20px 10px 30px;
	text-align:right;
	border:1px solid  #47c3e5;
	white-space:nowrap;
	min-width:180px;
	box-sizing:border-box;
}
.simulation table sup{
font-size: 1.0rem;
vertical-align: top;
}

.simulation table tr.subtotal{
	background:#fff9e6;
}
.simulation table tr.total{
	background:#47c3e5;
	color:#fff;
	font-size:1.8rem;
	font-weight:bold;
}

@media screen and (max-width: 768px) {
.simulation table th {
		padding:10px;
	}
.simulation table td {
		padding:10px;
		min-width:100px;
	}
	.simulation table tr.total{
	font-size:1.6rem;
}
}

.simulation .notice{
	font-size:1.4rem; ;
}
.simulation .notice li{
	text-indent: -1em;
	margin-left:1em;
}

/*店舗選択
----------------------------------------------------*/

.store table th{
	background:#47C3E5;
	color: #fff;	
}
.store table td{
	line-height: 1.8;
}
.store table td:first-child{
	vertical-align: top;
}
.store table td .tel{
	background: url("../img/icon_tel_01.png") no-repeat left center;
	background-size:30px;
	padding-left: 35px;
}

@media screen and (min-width: 769px) {
.store table td:nth-child(2){
	border-right: none;
}
.store table td:last-child{
	text-align: center;
	border-left: none;
}
.store table td:last-child a{
	background:#AACB57;
	padding: 15px 40px;
	border-radius: 6px;
	color: #fff;
}
}

@media screen and (max-width: 768px) {
	.store table,.store tbody,.store tr,.store th,.store td {
display: block;
}
	.store table th{
	display: none;
	}
	.store table td{
		border: none;
	}
	.store table td:first-child{
	background:#47C3E5;
	color: #fff;	
}
	/*.store table td:nth-child(2){
	border-bottom: none;
}*/
	.store table td:last-child{
		text-align: center;
		/*border-top: none;*/
	}
	.store table td:last-child a{
	display: block;
	background:#AACB57;
	height: 40px;
	line-height: 40px;
	border-radius: 6px;
	color: #fff;
		margin-bottom: 10px;
}
}

/*日時選択
----------------------------------------------------*/
section.schedule{
	width: 800px;
}
.schedule h3 + p{
	margin-bottom: 15px;
}
/*2020.2追加*/
.schedule h3 {
	margin-bottom: 5px;
}
.schedule h3 span {
	font-size: 2.7rem;
}
/*2020.2追加ここまで*/
.week{
	padding-bottom: 10px;
	margin-bottom: 30px;
	clear: all;
}
.week span a{
	background:#AACB57;
	border-radius: 6px;
	padding: 10px 10px;
	color: #fff;
}
.week .beforeweek{
	float: left;
}
.week .beforeweek span{
	background:#B2B2B2;
}
.week .nextweek{
	float: right;
}

.schedule table th,.schedule table td{
	text-align: center;
}
.schedule table th{
	background:#47C3E5;
	color: #fff;
	padding:10px 0;
	border-right:1px solid #fff;
}
.schedule table th:last-of-type{
	border-right:none ;
}
.schedule table td:first-child{
	white-space: nowrap;
}
.schedule table td{
	padding: 0;
line-height: 2.5em;
	font-weight: bold;
}
.schedule table td a{
	display: block;
	height: 100%;
	width: 100%;
}
.schedule table td.sat{
	background:#DCF5FF;
}
.schedule table td.sun{
	background:#FFE3F0;
}
.schedule table td.open a{
	background:#FFF9E6;
}
.schedule table td.open_few a{
	background:#FFFF64;
}
.close{
	background:#B2B2B2;
}
@media screen and (max-width: 768px) {
	section.schedule{
	width:100%;
}
	.schedule table{
		/*width: 800px;
		width: 100%;*/
		table-layout: fixed;
	}
	.table_wrap {
		width: 100%;
		height: 100%;
		margin: auto;
		overflow: auto;
		box-sizing:border-box;
		left: initial!important;
	}

	.schedule table th,.schedule table td{
		font-size: 1.2rem;
	}
	.schedule table th:nth-of-type(n+2){
		/*padding: 8px 10px;*/
	}
	.schedule table td:first-child,.schedule table th:first-child{
		width: 15%;
		
}
}

/*お客様情報入力
----------------------------------------------------*/

section.customer{
	width:650px;
}

.reservebox {
	width: 580px;
	margin: auto;
	margin-bottom: 40px;
}
.reservebox table th{
	background:#DCF5FF;
}
.loginbox{
	border: 1px solid #ccc;
	padding: 40px;
	margin-bottom: 40px;
}
.loginbox p{
	margin-bottom: 15px;
}
.loginbox table,.loginbox table th,.loginbox table td{
	border: none;
}
.loginbox table th{
	width:20%;
}
table.form{
	margin-bottom: 50px;
}
table.form,table.form th,table.form td{
	border: none;
}
table.form th{
	padding:20px 0 10px;
}
table.form td{
	padding:0 0 30px;
}
@media screen and (min-width: 769px) {
	.reservebox table td br{
		display: none;
	}
}
@media screen and (max-width: 768px) {
	section.customer{
	width:100%;
	}
	.reservebox {
		width: 100%;
	}
	.reservebox table th{
		white-space: nowrap;
	}
	.loginbox{
	padding:20px;
	margin-bottom:20px;
}
	.loginbox table th,.loginbox table td{
		display: block;
		width: 100%;
		padding: 0;
}
	table.form{
		width: 95%;
		margin:0 auto 40px;
	}
	table.form td{
	padding:0 0 20px;
}
}
/*入力フォーム*/	
.inputbox{
	border:1px solid #ccc;
}

input,select,textarea{
	margin:8px 0;
	box-sizing: border-box;
	padding:5px 0;
}
select{
	margin: 10px 5px;
}
input[type="radio"]{
	height:initial;
}

input[type="text"],input[type="password"],input[type="file"],textarea{
	width:100%;
	}

input.serial,input.keyword,input.name,input.tel{
	width:40%;
}

input.name{
	margin-left:5px;
	margin-right:5px;
}
input.zipcode{
	width:100px;
	margin-left:8px;
	margin-right:8px;
}
input.zipauto{
	width:30%;
	margin-left:5px;
	margin-right:5px;
	border:1px solid #ccc;
	background:#DADADA;
	cursor:pointer;
	color:#000;
	border-radius: 4px;
}
input[type="checkbox"]{
	margin-right:5px;
}
@media screen and (max-width: 768px) {
	/*input[type="submit"].btn,input[type="button"].btn{
		width:100%;
	}*/
	input,select,textarea{
	margin:8px auto;
	}
	input,select,textarea{/*iphone拡大防止用*/
		font-size:16px;
	}
	input[type="submit"],input[type="button"]  { /*iphone調整用*/
   -webkit-appearance: none;
}
	input.zipcode{
	width:30%;
	}
	select,input.zipauto,input.mail,input.serial,input.keyword,input.name,input.tel{
	width:100%;
}
	input.name{
	margin-left:0;
	margin-right:0;
}
}

/* フォーカス・チェック*/
input[type="password"]:focus,input[type="text"]:focus,input[type="tel"]:focus,input[type="email"]:focus,
textarea:focus,input[type="number"]:focus{
	background-color:#FFFFCC;
	outline: none;
}


/* エラー*/
.ex-comment{
	color:#666;
}
.error-comment{
	color:#F00;
	padding:5px 20px;
	box-sizing: border-box;
	border:1px solid #F00;
	margin-bottom:8px;
}
th.error-bg{
	background-color:#FCC;
}

.error-box{
	background:#FFF;
	color:#F00;
	border:1px solid #F00;
	padding:5px 20px;
	text-align:center;
	margin:15px auto;
	box-sizing: border-box;
}


/* 必須マーク*/
.required{
	background:#ffe6ea;
	color:#E51A21;
	/*border:1px solid #E51A21;*/
	border-radius:3px;
	text-align:center;
	padding:4px 8px;	
	margin:0 0 3px 8px;
	font-size:1.4rem;
	display:inline-block;
}

@media screen and (max-width: 768px) {
	.required{
		padding:2px 8px;
	}
}


/*個人情報同意*/
.agreetxt{
	text-align:center;
	margin:0 0 20px; 
}
.agreetxt p{
	margin-bottom: 10px;
}

@media screen and (max-width: 768px) {
	.agreetxt{
	margin:30px 0 10px; 
}
}

/*予約完了
----------------------------------------------------*/

.end h3{
	text-align:center;
	font-size:3.0rem;
	color:#FF4323;
	margin:30px 0 15px;

}
.end h3 i{
	color:#FFD9D3;
	font-size:4.0rem;
}
.end h3 + p{
	text-align:left;
	margin:20px auto 40px;
}
.end .reservebox{
	margin-bottom: 70px;
}

 @media screen and (max-width: 768px) {
	 .end h3{
		 font-size:2.5rem;
	 }
	.end h3 i{
	color:#FFD9D3;
	font-size:3.5rem;
}
 }


/*パスワード再発行
----------------------------------------------------*/
.pwreset h3{
	text-align: center;
	background: #FFF9E6;
	padding: 10px 0;
	
}
.pwreset h3 + p{
	margin:0 auto 40px;
}
.pwreset h3 + p.endcopy{
	margin-bottom: 210px;
}