/* 予約カレンダー用CSS */
main {
	padding-top: 0px;
	& > h1 {
		text-align: left;
		width: 100%;
/* 		height: 400px; */
		aspect-ratio: 10 / 8;
		margin: 0 auto;
		padding-top: 100px;
		/* background: url(../jobs_img/jobs_mv.webp) no-repeat; */
		background:  url(/top_img/mv_back_sp.webp) no-repeat,url(/reserve_app_img/reserve_mv_sp.webp) no-repeat, var(--color-sub4);
		background-size: contain, 150%;
		background-position:top left, -30vw 100%;
		display: flex;
		justify-content: center;
		align-content: center;
		flex-wrap: wrap;
		color: var(--color-base);


		& .tit {
			display: block;
			width: 70%;
			height: 2em;
			line-height: 1em;
			font-size: 2.0rem;
			font-family: var(--font-go);
			font-weight: bold;
			
		}
		& .subtitle {
			display: block;
			width: 70%;
			height: 2em;
			line-height: 2em;
			font-size: var(--font-sizeM);
			font-family: var(--font-go);
			font-weight: normal;

		}

	}

}


.reserve-calendar-month-head {
  margin: 2em auto 1em;
  font-family: var(--font-titg);
}

.reserve-calendar-table {
  border-collapse: collapse;
  width: calc(100% - 50px);
  max-width: 600px;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  color: var(--color-accent1);

}

.reserve-calendar-table th {
  border-bottom: 2px dotted #fff;
  padding: 4px;
  background: var(--color-sub1);
  color: var(--color-base);
}
.reserve-calendar-table th:nth-of-type(1) {
  background: var(--color-accent2);
  color: var(--color-base);
}
.reserve-calendar-table th:nth-last-of-type(1) {
   background: var(--color-accent1);
}
.reserve-calendar-table td {
  border: none;
  border-right: 2px dotted #fff;
  padding: 4px;
  vertical-align: top;
  background: #fff;
  border-bottom:  2px dotted var(--color-sub1);
}
.reserve-calendar-table td:nth-of-type(1) {
  border-bottom:  2px dotted var(--color-base);
  background: #FDE0CC;
}
.reserve-calendar-table .sunday {
    background: #FDE0CC;
}
.reserve-calendar-table .saturday {
    background: var(--color-sub3);
}
.reserve-calendar-table .holiday {
  background: #FDE0CC;
  border-bottom:  2px dotted var(--color-base);
}
.reserve-calendar-table .empty-cell {
  background: #f9f9f9;
}
.reserve-calendar-table tr:nth-last-of-type(1) td {
   border-bottom:  none;
}


.reserve-calendar-date {
  font-weight: bold;
}
.reserve-calendar-holiday-label {
  color: var(--color-accent2);
  font-size: 90%;
}
.reserve-calendar-status {
  font-weight: bold;
}
.reserve-calendar-status.clickable {
  cursor: pointer;
  color:  var(--color-accent1);
}
.reserve-calendar-count {
  color: #333;
  font-size: 90%;
}
.reserve-calendar-dialog {
  background: #fff;
  border: 1px solid #ccc;
  padding: 20px;
  max-width: 350px;
  width: 90%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  box-shadow: 0 4px 24px rgba(0,0,0,0.18);
  border-radius: 12px;
}
.google-login-tit {
  font-family: var(--font-titg);
  font-weight: bold;
  font-size: var(--font-sizeM);
}
.reserve-calendar-success {
  color: green;
  margin-top: 10px;
}
.reserve-calendar-error {
  color: red;
  margin-top: 10px;
}
.reserve-calendar-day {
  font-weight: bold;
  margin-bottom: 10px;
  font-family: var(--font-titg);
}
.reserve-calendar-timelist {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}
.reserve-calendar-timelist label {
  border-right: 2px dotted var(--color-base);
  background: var(--color-sub3);
  gap: 0;
  margin: 0;
  padding: 1em .5em;
  color: var(--color-accent1);
  font-weight: bold;
  transition: .3s;
}
.reserve-calendar-timelist label:hover,
.reserve-calendar-timelist label:active {
  background: var(--color-sub1);
}
.reserve-calendar-timelist label:first-child {
  border-radius: 10px 0 0 10px;
}
.reserve-calendar-timelist label:last-child {
  border-right: none;
  border-radius: 0 10px 10px 0;
}
.reserve-calendar-btnsubmit {
background: var(--color-accent1);
  border: none;
  color: var(--color-base);
  padding: 1em 3em;
  border-radius: 10px;
  margin-right: 10px;
  transition: .3s;
}
.reserve-calendar-btnsubmit:hover,
.reserve-calendar-btnsubmit:active {
  background: var(--color-accent2);
}
.reserve-calendar-btncansel {
  background: var(--color-sub4);
  border: none;
  color: var(--color-accent1);
  padding: 1em 3em;
  border-radius: 10px;
  transition: .3s;
}
.reserve-calendar-btncansel:hover,
.reserve-calendar-btncansel:active {
  background: var(--color-sub3);
  border: none;
  color: var(--color-accent1);
  padding: 1em 3em;
  border-radius: 10px;
}