@charset "utf-8";

/* CSS Document */



/*******************

カレンダーテーブル

******************/





.reservation_cont{

	width: 1000px;

	margin: 0 auto;

	

}





/*前月・当月・次月*/



.calendar_month{

	display: flex;

	width: 100%;

	margin: 0 auto;

	

}



.calendar_month p{

	width: calc(100% / 3);

	

}



.calendar_month p:nth-child(2){

	text-align: center;

}



.calendar_month p:nth-child(3){

	text-align: right;

}





/*カレンダーdesign*/

.calendar_table{

	width: 100%;

	margin: 0 auto;	

}

.calendar_table table{	

	width: 100%;

	margin: 0 auto 100px;

}

.calendar_table td {

	text-align: center;

	padding: 0;

}

.calendar_table td:not(:has(a)){

	text-align: center;

	padding: 10px 0;

}



.calendar_table td a{

	text-align: center;

/*	padding: 10px 60px;*/

	display: flex;

	padding: 10px 0;

    justify-content: center;

	text-decoration: underline!important;

}

.calendar_table td a:hover{

opacity: 0.6;

}



/*通常日*/

.calendar_table tr th,

.calendar_table tr td a

{

	color:#535353;

}



/*選択日*/

#selectday{

	background-color: #FFA600;

	

}



#selectday a,#selectday{

	color: #FFFFFF;

	font-weight: 700;

}



/*今日*/

#today{

	background-color:#FFA600;

}



#today a,#today{

	color:#FFFFFF;

	font-weight: 700;

	border:1px solid #000000;

}



/*日曜日*/

.calendar_table tr th:nth-child(1),

.calendar_table tr td:nth-child(1),

.calendar_table tr td:nth-child(1) a

{

	color: #C1070A;



}



.calendar_table tr th:nth-child(1),

.calendar_table tr td:nth-child(1)

{

	border-color: #EF5759;

	background:  #FFDCDD;

}





/*土曜日*/



.calendar_table tr th:nth-child(7),

.calendar_table tr td:nth-child(7),

.calendar_table tr td:nth-child(7) a

{

	color: #0061A8;

}



.calendar_table tr th:nth-child(7),

.calendar_table tr td:nth-child(7)

{

	border-color: #5990FF;

	background: #C6E2FF;

}







/*記号共通設定*/

.calendar_table .maru::after,.calendar_table .limited::after,.calendar_table .out::after{

	content: ""; /* contentは空にする */

 	display: flex;

	width: 30px;

	height: 30px;

	margin: 0 auto;

	background-size: contain; /* または cover, auto など */

}







/*******************

タイムテーブル

******************/



.reservation_cont_time ul{

	width: 100%;

	margin: 0 auto;

	display: flex;

	flex-wrap: wrap;

}





.reservation_cont_time li{

	width: calc(100% / 6);

	display: flex;

    flex-direction: column;

	margin: 0 0 20px 0;

}



.reservation_cont_time li span{



	margin: 0 0 0 -22px;

}



.reservation_cont_time li div{

	border: #000000 1px solid;

	margin: 0 -1px 0 0;

	

	height: 60px;

	width: 100%;

}



/*予約あり色変え*/

.reservation_cont_time .check_time{

	background-color: #FF5255;

}



/*記号共通設定*/

.reservation_cont_time .check_maru,.reservation_cont_time .check_out,.reservation_cont_time .check_limited{

 	display: flex;

	width: 100%;

	margin: 0 auto;

	background-size: contain; /* または cover, auto など */

	background-repeat: no-repeat;

	background-position: center;

	background-size: 30%;



}





/*各記号画像*/

.reservation_cont_time .check_maru{

	background-image: url("img/maru.png");

	background-color:#FFCFDE;

}

.reservation_cont_time .check_out{

	background-image: url("img/out.png");

	background-color: #5B5B5B;

}

.reservation_cont_time .check_limited{

	background-image: url("img/limited.png");

	background-color: #BCBCBC;

}





/*各時間最後尾*/

.reservation_cont_time .time_last {

	display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    justify-content: space-between;

}



.reservation_cont_time .time_last span/*:nth-child(2)*/{

	width: calc(100% / 2);

	display: flex;

}



.reservation_cont_time .time_last span:nth-child(2){

	text-align: right;

   position: relative;

    left: 60px;

}

/*仮予約フォーム*/



.reservation_form_are{

	

}



.reservation_form_are table{

	margin: 50px auto 100px;

	border:#e4677e 1px solid;

}



.reservation_form_are tr{

	

}





.reservation_form_are th{

	width: 200px;

	padding: 20px 0;

	color: #e4677e;



	background-color: #FFE0E9;

	font-weight: 400;

	text-align: center;

	

}



  /*入力項目*/

.reservation_form_are tr:nth-child(1) td input,

.reservation_form_are tr:nth-child(2) td input,

.reservation_form_are tr:nth-child(3) td input

{

	width: 90%;

	margin: 0 auto 20px;

	

}



/*送信項目*/

.kakunin_submit input{

/*	margin:20px auto 0;*/

	margin: 20px 0 0 0;

	display: block;

	width: 280px;

	height: 50px;

}



.kakunin_submit form{



}





.kakunin_submit {

    display: flex;

    flex-direction: row;

    border: none!important;

    align-items: center;

    align-content: flex-start;

    flex-wrap: wrap;

    justify-content: space-around;

}







.reservation_form_are th,.reservation_form_are td{

	border: #e4677e 1px solid;	

}



.reservation_form_are th{

	width: 250px;

}



.reservation_form_are td{

	width: 700px;

}



.select_day_area {

	display: flex;

	margin: 20px auto;

	align-items: center;

}

.select_day_area p{

	line-height: 0;

	margin: 0 0 0 10px;

}

.select_day_area select{

    width: 180px;

 }





 /*施術course*/



.itemcategory{

	width: 96%;

	margin: 0 auto;

	

}







.itemcategory strong{

	margin: 10px auto;

	display: block;

	color: #e4677e;

	

}



.itemcategory ul{

	width: 95%;

    margin: 0 auto 40px;

    display: flex;

    flex-wrap: wrap;

}



.itemcategory li{

	width:calc(100% / 3);

	margin: 10px 0;

	display: flex;

	

}





.itemcategory p{

	margin: 10px auto;

	display: block;

	color: #e4677e;

	font-size: 16px;

}





/*特典*/



.tokuten,.vip{

	display: flex;

}



/*



.reservation_form_are tr:nth-child(5) td .itemcategory:nth-child(4){

	width: calc(100% / 3);

	display: flex;

}





*/





/*予約完了*/

.reservation_cont_end{

	width: 1000px;

	margin: 100px auto 300px;

	

}







/************SP用**************/

@media screen and (max-width:500px) {



	

	



/*******************

カレンダーテーブル

******************/





.reservation_cont{

	width: 95%;

	margin: 0 auto;

	

}





/*前月・当月・次月*/



.calendar_month{

	display: flex;

	width: 100%;

	margin: 0 auto;

	

}



.calendar_month p{

	width: calc(100% / 3);

	

}



.calendar_month p:nth-child(2){

	text-align: center;

}



.calendar_month p:nth-child(3){

	text-align: right;

}





/*カレンダーdesign*/

.calendar_table{

	width: 100%;

	margin: 0 auto;	

}

.calendar_table table{	

	width: 100%;

	margin: 0 auto 10vw;

}

.calendar_table td {

	text-align: center;

	/*padding: 1vw 0;

	padding:4vw 2vw;*/

}



.calendar_table td a{

	text-align: center;

	padding: 1vw 6vw;

}





/*通常日*/

.calendar_table tr th,

.calendar_table tr td a

{

	color:#535353;

	padding:3vw 1vw;

}



/*日曜日*/

.calendar_table tr th:nth-child(1),

.calendar_table tr td:nth-child(1) a

{

	color: #C1070A;

	padding:3vw 1vw;



}



.calendar_table tr th:nth-child(1),

.calendar_table tr td:nth-child(1)

{

	border-color: #EF5759;

	background:  #FFDCDD;

}





/*土曜日*/



.calendar_table tr th:nth-child(7),

.calendar_table tr td:nth-child(7) a

{

	color: #0061A8;

}



.calendar_table tr th:nth-child(7),

.calendar_table tr td:nth-child(7)

{

	border-color: #5990FF;

	background: #C6E2FF;

}







/*記号共通設定*/

.calendar_table .maru::after,.calendar_table .limited::after,.calendar_table .out::after{

	content: ""; /* contentは空にする */

 	display: flex;

	width: 30px;

	height: 30px;

	margin: 0 auto;

	background-size: contain; /* または cover, auto など */

}





	



/*******************

タイムテーブル

******************/



.reservation_cont_time {

    width: 90%;

    margin: 0 auto;

}	

	

.reservation_cont_time ul{

	width: 100%;

	margin: 0 auto;

	display: flex;

	flex-wrap: wrap;

}



	



.reservation_cont_time li{

	width: calc(100% /6);

	display: flex;

    flex-direction: column;

	margin: 0 0 3vw 0;

}



.reservation_cont_time li span{

	font-size: 3.5vw;

	margin: 0 0 0 -4vw;

}



.reservation_cont_time li div{

	border: #000000 1px solid;

	margin: 0 -1px 0 0;

	

	height: 10vw;

	width: 100%;

}



/*予約あり色変え*/

.reservation_cont_time .check_time{

	background-color: #FF5255;

}



/*記号共通設定*/

.reservation_cont_time .check_maru,.reservation_cont_time .check_out,.reservation_cont_time .check_limited{

 	display: flex;

	width: 100%;

	margin: 0 auto;

	background-size: contain; /* または cover, auto など */

	background-repeat: no-repeat;

	background-position: center;

	background-size: 30%;



}







/*各時間最後尾*/

.reservation_cont_time .time_last {

	display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    justify-content: space-between;

}



.reservation_cont_time .time_last span/*:nth-child(2)*/{

	width: calc(100% / 2);

	display: flex;



}



.reservation_cont_time .time_last span:nth-child(2){

	text-align: right;

   position: relative;

    left: 2vw;

}

	

/*仮予約フォーム*/



.reservation_form_are{

	

}



.reservation_form_are table{

	width: 100%;

	margin: 50px auto 100px;

	border: none;

}



.reservation_form_are tbody{

	width: 100%;

}



    .reservation_form_are tr {

        display: flex;

        flex-direction: column;

    }





.reservation_form_are th{

	width: 200px;

	padding: 20px 0;

	color: #e4677e;



	background-color: #FFE0E9;

	font-weight: 400;

	text-align: center;

}





	.reservation_form_are th,.reservation_form_are td{

		width: 100%;

		padding: 2vw;

		display: flex;

		        flex-direction: column;

   

	}

		

	

  /*入力項目*/

.reservation_form_are tr:nth-child(1) td input,

.reservation_form_are tr:nth-child(2) td input,

.reservation_form_are tr:nth-child(3) td input

{

	width: 90%;

	margin: 0 auto 20px;

	

}



.reservation_form_are tr:nth-child(6) td input{

	margin: 5vw auto;

	display: block;

	width: 100%;

	height: 12vw;

}

	

.tokuten input{

	display: inherit!important;

	margin: 0 2vw!important;

	width: inherit!important;

	height:inherit!important;



	/*

	margin: 5vw auto;

	width: 100%;

	height: 12vw;

*/

}

	



.reservation_form_are th,.reservation_form_are td{

	border: #e4677e 1px solid;	

}

	



.reservation_form_are th{

	width: 100%;

}



.reservation_form_are td{

	width: 100%;

}

	

	

	



/*送信項目*/

.kakunin_submit input{

	margin:6vw auto 0;

	display: block;

	width: 90%;

	height: 14vw;

}



.kakunin_submit form{

		margin:0 auto 6vw ;

	display: block;

	width: 100%;

	height: 14vw;

}





.kakunin_submit{



	border: #e4677e 1px solid!important;

}





.select_day_area {

	display: flex;

	margin: 20px auto;

	align-items: center;

	        flex-direction: row;

        flex-wrap: wrap;

}

.select_day_area p{

	line-height: 0;

	margin: 0 0 0 10px;

	    width: 20vw;

}

.select_day_area select{

    width: 48vw;

 }





 /*施術course*/



.itemcategory{

	width: 96%;

	margin: 0 auto;

	

}







.itemcategory strong{

	margin: 10px auto;

	display: block;

	color: #e4677e;

	

}



.itemcategory ul{

	width: 95%;

	margin: 0 auto 40px;

	display: flex;

	flex-wrap: wrap;

	flex-direction: column;

}



.itemcategory li{

	width: 100%;

	margin: 2vw 0;

	display: flex;

}





.itemcategory p{

	margin: 10px auto;

	display: block;

	color: #e4677e;

	font-size: 5vw;

}



	

	

/*予約完了*/

.reservation_cont_end{

	width: 90%;

	margin: 15vw auto 30vw;

	

}







	

	

}/*SPここまで*/