@charset "utf-8";

/* CSS Document */



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



/*

  Josh's Custom CSS Reset

  https://www.joshwcomeau.com/css/custom-css-reset/

*/

*,*::before,*::after{box-sizing:border-box}*{margin:0}html,body{height:100%}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}#root,#__next{isolation:isolate}







/**********フォント統一**********/





@font-face {

	font-family: "YuGothic-M";

	font-weight: normal;

	 src: local("YuGothic-Medium"),

		  local("Yu Gothic Medium"),

		  local("YuGothic-Regular");

}



@font-face {

	font-family: "YuGothic-M";

	font-weight: bold;

	 src: local("YoGothic-Bold"),

		  local("Yu Gothic");

}



body {

	font-family: -apple-system, blinkMacSystemFont, YuGothic-M, YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

	min-width: 900px;

}



/*********ボディベース*****************/

#BaseArea{

    background-color: #FDF5DB;

    /*min-*/

}





/*ヘルプメッセージ固定*/



.helpmessage{

	font-size: 16px;

}





/*********ヘッダー**********/



#BaseHeader{

    width: 100%;

    margin: 0 auto;

    text-align: center;

    background-color: #726256;

}



#BaseHeader h1{

    display: block;

    

    margin: 0 auto;

    padding: 20px 0;

    color: #FFFFFF;

    font-weight: bold;

	

}







/*********予約コンテンツエリアベース**********/



#NaviAndContentsFoundation{

    

    margin: 0 auto;

    display: flex;

}



#BaseContents{

    width: 100%;

    margin: 0 auto;

}





/*********予約状況エリア**********/



.ReservationArea {

    display: flex;

    flex-flow: wrap;

    margin: 0 auto 30px;

    flex-direction: row;

    justify-content: space-around;

    /* width: 50%; */

    /* margin: 0 auto; */

    flex-wrap: wrap;

    align-items: flex-start;

}







/*********予約状況カレンダーエリア**********/



.CalendarArea{

    width: 90%;

    font-size: 28px;

	margin: 0 auto;

}



/*月の項目*/

.Month {

	display: flex;

	float: inherit;

    width:calc(100%/3);

	margin: 0 auto;

	text-align: center;

    justify-content: space-around;

}



.Mon {

        text-align: center;

}





.Next_Mon{

    text-align: right;

}



.CalendarArea .Previous_Mon /*前月*/ {

    margin-top: 2px;

    margin-left: 5px;

    width: 100%;

    font-size: 28px;

    color: #000000;

    text-align: left;

}



.CalendarArea .Mon /*年月*/ {

    float: left;

    width: 100%;

    font-size: 28px;

    color: #000000;

    text-align: center;

    font-weight: bold;

}



.CalendarArea .Next_Mon /*次月*/{

    margin-top: 2px;

    width: 38px;

	width: 100%;

    font-size: 28px;

    color: #000000;

    text-align: right;

}











/******カレンダーテーブル*****/

.CalendarArea table{

    width: 100%;

	float: inherit;

    margin: 10px auto 0;

    border: none;

}





.CalendarArea table th{

		font-size: 18px;

}





.CalendarArea table td {

	padding: 16px;

    text-align: center;

	font-size: 24px;

}





.CalendarArea td, .CalendarArea th{

    border: 1px solid #4D4D4D;

    padding: 10px;

    text-align: center;

    background: #F2F2F2;

}



/*当日*/

.today{

    background-color: #E05A00  !important ; 

  color: #FFFFFF !important;

}



.CalendarArea table .today {

	color:			#000000;

	background-color:	#cacaca;

	font-weight: normal;

}



/*日曜日*/

.bgr {

    background-color: #F7C8D3  !important ; 

    color: #D10003;

}



/*土曜日*/

.bgb{

    background-color: #A3D9EA  !important ;

    color: #1C63A4;

}











/*********当日の予約状況のタイムステーブル**********/



.TimetableArea h4{

    font-size: 21px;

	margin: 40px auto 20px;

	display: block;

}





.TimetableArea {

    width:100%;

	margin: 0 auto;

}



.timetable_colum {

	width: inherit;

	margin: 0 auto;

}



/*

.Time {

    text-align: center;

    width: 60px;

     float: left; 

    display: initial;

    clear: both;

    line-height: 2.2em;

    position: relative;

    left: 16px;

    top: 6px;

    padding: 10px 22px 0;

}





.timetable_morning span {

    position: relative;

    left: 13px;

    padding: 0px 14px;

    font-size: 20px;

}





*/

.TimetableArea .Time {

    font-size: 16px;

    left: -4px;

    margin: 0px 49px 0 0;

    padding: 10px 0;

    position: relative;

    display: initial;

}

.timetable_morning span {

    position: relative;

    font-size: 16px;

	padding: 0 ;

	margin: 20px 0;

}



.TimetableArea table {

    display: flex;

	margin: 0 auto;

    border: none;

    border-spacing: 0px;

    position: relative;

	justify-content: space-evenly;

 

}





/*タイムテーブル枠組み*/









.TimetableArea tr, .TimetableArea td  {

/*

    flex-flow: column;

*/

	

 

}



.TimetableArea table td {

    width: 90px;

	     

}



.TimetableArea td {

 

    /* margin: 0 10px; */

    border: 1px solid #4D4D4D !important;

    border-spacing: 0px;

    margin-bottom: -1px;

    padding: 5px 0;

}



#clear_td{

    border-color: #FDF5DB;

}





#blank_box{

	border: 1px solid #eee5d3 !important;

}







/*********パスワード追加ページ**********/

.BasePasswordArea{

    width: 1000px ;

    margin: 40px auto;

    

}



.FormArea {

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

}



.PasswordArea {

    width: 360px;

    padding: 40px 20px;

}



.helpmessage {

    width: 100%;

    margin: 0px auto 30px;

	font-size: 16px !important;

	line-height: 1.5em;

}



.FormArea .helpmessage {

    margin: 0 auto 30px !important;

    padding-left: 10px;

    width: 600px;

    color: #787878;

    font-size: small;

}





/*********予約の追加・削除**********/



.FormArea{

  

}





.reservation_form_area h3{

	font-size: 21px;

	margin: 20px auto 0;

}





select {

    width: inherit;

    padding: 0;

    margin: 0;

}



input[type="submit"] {

    /*width: 100px;*/

    padding: 8px 4px;

}



input{

    font: inherit;

    width: 100px;

    padding: 8px 4px;



}



.FormArea table tr .formhelp {

	margin: 0 auto;

	padding: 8px;

    text-align: left;

    color: #787878;

    font-size:16px;

    text-indent: 0;

	border: none;

    background-color: inherit;

	line-height: 1.5em;

}



.FormArea table td .item {

    float: left;

    width: 234px;

    font-size: 14px;

	

}





.FormArea table td {

    text-align: left;

    padding-bottom:0;

    padding-left: 0;

    width: 445px;

    color: #575757;

    border: 1px solid #6f5441;

	    padding: 8px;

}



.FormArea table td .itemcategory {

	float: inherit;

	margin-top: 3px;

    margin-bottom: 3px;

    width: 470px;

}







/*********フッター**********/









/*******仮予約フォーム************/





.reservation_form_area{

	

	width: 100%;

	line-height: 1.8em;

	margin: 0 auto;



}



.FormArea select {

    margin-right: 15px;

	background-color: white;

}



#kakukoumoku input{

	background-color: white;

    margin: 10px auto;

    position: relative;

    display: block;

}

.reservation_form_area h2{

width: 654px;

    height: 51px;

    margin: 0 0 15px 0;



}



.reservation_form_area h3{

	display: block;

	width: 100%;

	text-align: center;

	line-height: 1.5em;

	padding: 0 0 20px;

}



.FormArea table {

    margin-top: 10px;

    margin-left: 10px;

    width: inherit;

    border-collapse: collapse;

    border: 1px solid #6f5441;

}







.reservation_form_area .helpmessage{

	text-align: left;

	

}



.yoyaku_start {

	text-align: center;

	width: 100%;

	margin: 0 auto;

	font-size: 24px;

	padding: 0 0 20px 0;

	font-weight: bold;

}





.formhelp{

    text-align: left;

    font-size: 14px;

    display: block;

    width: 95%;

    margin: 0 auto;

}



.select_day_area{

	text-align: left;

	 display: block;

    width: 95%;

    margin: 0 auto;

}



.form_yoyaku{

	width: 100%;

	margin: 0 auto;

}





.form_yoyaku th {

	width: 25%;

	color: #5C3132;

}



.form_yoyaku td {

	text-align: center;

	padding: 10px 0;



}







#cmdSubmitForJS {

    width: 250px;

    margin: 20px auto;

    display: block;

	border: 1px solid #000000;

	background: #DDDDDD;

}



.select_day_area div {

    display: flex;

    align-items: center;

    margin: 10px auto;

}



.select_day_area select{

	width: 280px;

	padding: 8px;

	    -webkit-appearance: auto;

	border: 1px solid #000000;

}







.select_day_area span{

	width: 80px;

}





.FormArea table th {

	padding: 4px;

    text-align: center;

    width: 180px;

    font-size: small;

    color: #575757;

    background-color: #cacaca;

    border: 1px solid #6f5441;

}









/*施術コース*/



#course_area input{

	width: 24px;

    padding: 8px 4px;



}

.itemcategory p{

	display: block;

	width: 98%;

	border-bottom: 1px solid #CCCCCC;

	text-align: left;

	clear: both;

	padding:20px 8px 8px 8px  ;

	margin: 0 auto 10px ;

	font-weight: 900;

	color: #5C3132;

}



.item{

	float: left;

	margin: 4px 0;

}

 

/**********確認画面****************/



.correction{

	width: 250px;

    margin: 20px auto;

    display: block;

}



input.textfield {

    display: block;

    margin: 10px auto;

}











/************member用CSS*******************/



.Time_table_m_area{

	

}



.Time_table_m_area table{

	width: 530px;

	

}



.Time_table_m_area .Time {

    font-size: 16px;

    left: 44px;

    margin: 0px 48px 0 0;

    padding: 10px 0;

    position: relative;

    display: initial;

    width: 40px;

    position: relative;

    display: inline-block;

}