@charset "utf-8";

.week_flex{display: flex;
justify-content: space-between;
margin-bottom: 10px;}

.week_flex li{width: fit-content;}

.week_flex li a{color: var(--text-color);}

.week_flex li:first-child a::before{
font-family: "Font Awesome 6 Free";
font-weight: 900;
content: "\f100";
padding-right: .5em;

} 
.week_flex li:last-child a::after{font-family: "Font Awesome 6 Free";
font-weight: 900;
content: "\f101";
padding-left: .5em;
} 

/*================================================
 *  予約テーブル
 ================================================*/


.tb_yoyaku  {
	table-layout:fixed;
	border-spacing: 0;
	border-collapse:collapse;
	width: 100%;
	border-top-width: 1px;
	border-right-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-top-color: #CCC;
	border-right-color: #CCC;
	box-sizing: border-box;
	
	font-size: 125%;
margin-bottom: 30px;
	background-color: #ffffff;
}

.tb_yoyaku th {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #CCC;
	vertical-align: middle;
    text-align: center;
    width: 12%;
}

.tb_yoyaku th.yoyaku_time {
	width: 16%;
    font-weight: 500;
   
}

.tb_yoyaku td {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #CCC;
	vertical-align: middle;
	table-layout: fixed;
    text-align: center;
    font-size: 150%;
}

.tb_yoyaku td i {
    padding-top: 30px;
    padding-bottom: 30px;
    color: #cccccc;
}

.tb_yoyaku td a i {
display: block;
color: var(--orange);
}

.tb_yoyaku td a:hover {
background-color:  #ffffbf;
}

.yoyaku_day{line-height: 1.2;
padding-top: 10px;
padding-bottom: 10px;
font-weight: 500;}

.week{font-size: 80%;
font-weight: 400;}

/* 小さい画面用の設定-------------- */
@media (max-width:767px){
.tb_yoyaku  {
font-size: 100%;

}


.tb_yoyaku td a {
	font-size: 144%;

}

}
/* -------------end------------- */


/*================================================
 * 新規登録
 ================================================*/
.tb_shosai {
  border-collapse: collapse;
  width: 100%;
	background-color: #fff;
	margin-bottom: 30px;
	text-align: left;}


.tb_shosai th {
	padding-top: 10px;
padding-bottom: 10px;
	width: 18%;
	line-height: 1.2;
	vertical-align: middle;}

.tb_shosai td {
  padding-top: 10px;
padding-bottom: 10px;
width: 82%;
}

/* 小さい画面用の設定-------------- */
@media (max-width:767px){
.tb_shosai th,
.tb_shosai td{
    width: 100%;
    display: block;
    border-top: none;
    }

.tb_shosai th {
padding-bottom: 5px;}

.tb_shosai td {
  padding-top: 0px;
}

}
/* -------------end------------- */



.bg_midashi{background-color: deepskyblue;
color: #fff;}

.tb_shosai tr th.pag_b50{padding-bottom: 50px;}
.tb_shosai tr td.pag_b50{padding-bottom: 50px;}

.pad_l10{padding-left: 10px;}

.bitrh_flex{display: flex;
justify-content: space-between;
align-items: center;}

.bitrh_flex li{width: 20%;}
.bitrh_flex li:first-child{width: 25%;}

.bitrh_flex li.bitrh_daytxt{width: 6%;
padding-left: 5px;}


.submit_wrap{display: flex;
justify-content: space-between;
align-items: center;}

.submit_wrap li{width: 48%;}



.remodal-overlay {
  background: rgba(43, 46, 56, 0.7)!important;
}

.remodal {
	border-radius: 6px!important;
}



.red{color: #c02a17;}


.tb_arrow_wrap div:last-child{display: none;}


/*　画面サイズが540px以下はここを読み込む　*/
@media screen and (max-width:540px) {
.tb_arrow_wrap{display: flex;
justify-content: space-between;
align-items: center;}



.tb_arrow_wrap div:last-child{
	width: 15%;
background-color: #eee;
	display: block;
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 150%;
	text-align: center;}



}

.sp_yoyaku_attenison{}
/* -------------end------------- */


/* PC向けレイアウトの指定：541px以上では固定レイアウト */
.sp_yoyaku_attenison { display: none; }  /* sp_yoyaku_attenisonを非表示 */


@media screen and (max-width:540px) {
.sp_yoyaku_attenison {
	display: block;
	margin-bottom: 10px;
	font-size: 80%;
} /* sp_yoyaku_attenisonを表示 */
}


/************************************
form
*************************************/

/*
reset
***********************/

button,
option,
select,
textarea,
input[type="button"],
input[type="submit"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="text"],
input[type="checkbox"]{
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    border-radius: 0;
    border: none;
    outline: 0;
    margin: 0;
    background: #fff;
}




/* デフォルトのcheckboxは非表示 */
input[type=checkbox] {
    display: none;
}

/* for firefox */

select {
    text-indent: 0.01px;
    text-overflow: '';
}

/* for ie10 ie11 ie系のプルダウンの矢印を消す ie9は非対応 */

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

/*
テキストエリアt***********************/


textarea,
input[type="number"],
input[type="text"] {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #ccc;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
	-moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
	 line-height: normal;
	font-size: 14px;
    font-size: 1.4rem;
}

textarea {
    height: 100px; /* お好みの高さに */
}

/* フォーカス時の色変更 */

textarea:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="text"]:focus {
    border: 1px solid #333;
}

input[type="text"].input_box90{
width:90%;
}


input[type="text"].input_box50{
width:50%;
}




/* チェックボックス */
.checkbox_flex{display: flex;
flex-wrap: wrap;}

.checkbox_flex li{width: 48%;}

.form-checkbox label {
    position: relative;
    display: inline-block;
    cursor: pointer;
    padding: 6px 5px 8px 30px;
}

.form-checkbox label::before,
.form-checkbox label::after {
    position: absolute;
    display: block;
    content: '';
    top: 50%;
    left: 0;
    box-sizing: border-box;
    
}

.form-checkbox label::before {
    width: 22px;
    height: 22px;
    margin-top: -12px;
    background: #FFF;
    border: 2px solid #ccc;
}

.form-checkbox input[type=checkbox]+label::after {
    width: 24px;
    height: 24px;
    top: 2px;
}

.form-checkbox input[type=checkbox]:checked+label::after {
position: absolute;
    display: block;
    content: '\f00c'; /* fa-check の Unicode */
    font-family: 'Font Awesome 5 Free'; /* 使用しているバージョン名に応じて変更 */
    font-weight: 900; /* Solid アイコン用。Regular の場合は 400 */
    color: var(--orange); /* 色はお好みで */
    font-size: 125%; /* サイズ調整 */
/*    left: -1px;
    top: -1px;*/
    left: 3px;
}






/* ボタン */


.btn_confirm{
    border-radius: 4px;
    width: 100%;
    color: #fff;
    text-align: center;
    cursor: pointer;

    background-color: var(--orange);
    font-size: 100%;
     padding: 20px;
}

.btn_confirm:hover,
.btn_confirm:focus {
  background: #FF6100;
}

.btn_cancel{
    border-radius: 4px;
    width: 100%;
    color: #fff;
    text-align: center;
    cursor: pointer;

    background-color: #cccccc;
    font-size: 100%;
     padding: 20px;
}

.btn_cancel:hover,
.btn_cancel:focus {
  background: #999;
}




input[type="reset"]{
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    border-radius: 0;
    border: none;
    outline: 0;
    margin: 0;
	background: #ccc;
    
}

    button {
        -webkit-transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
        -moz-transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
        -ms-transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
        transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    }
    


/* プレイスホルダー */
/* Google Chrome, Safari, Opera 15+, Android, iOS */

::-webkit-input-placeholder {
    color: #ccc;
	line-height: 1;
	opacity: 1;
}

/* Firefox 18- */

:-moz-placeholder {
    color: #ccc;
    opacity: 1;
	line-height: 1;
    
}

/*Firefox 19以降*/
::-moz-placeholder {
  color: #ccc;
  opacity: 1;
}





/* IE 10+ */

:-ms-input-placeholder {
    color: #ccc;
	line-height: 1;
    
}

[type=text] {
  line-height: normal; 

  
}