@charset "utf-8";
/* calendar css */

/*-------------------------------------------------
ページタイトル
-------------------------------------------------*/

#page_calendar .page_titlebox::before {
content: "CALENDAR";
}
body#page_calendar::before {
content: "";
background-image: url("../img/calendar/body_bg.jpg");
background-position: center top;
background-size: cover;
background-repeat: no-repeat;
background-color: #000;
display: block;
position: fixed;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100vh;
opacity: .25;
}


/*-------------------------------------------------
intro
-------------------------------------------------*/
.intro_txt {
font-size: 1.5rem;
line-height: 200%;
letter-spacing: 0.2em;
display: block;
text-align: center;
margin-bottom: 50px;
}
.intro_txt a {
text-decoration: underline;
color: #B29458;
}
.intro_txt a:hover {
text-decoration: none;
}
@media all and (max-width : 767px) {
.intro_txt {
font-size: 1.2rem;
line-height: 180%;
letter-spacing: 0.1em;
margin-bottom: 30px;
}
}


/*-------------------------------------------------
カレンダー
-------------------------------------------------*/

.calendar_head {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.calendar_active_month {
font-size: 2.2rem;
font-weight: 600;
color: #fff;
letter-spacing: 0.2em;
line-height: 100%;
padding: 0 20px;
}
.change_btn_box {
position: relative;
}
.change_btn_box button {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
width: 100%;
height: 100%;
border: none;
border-radius: 0;
padding: 0;
cursor: pointer;
transition-duration: 0.3s;
box-sizing: border-box;
-webkit-appearance: none;
}
.change_btn_box .change_btn {
background: #292929;
border-radius: 3px;
width: 33px;
height: 33px;
transition-duration: 0.3s;
position: relative;
}
.change_btn_box .change_btn:hover {
background: #8E7742;
transition-duration: 0.3s;
}
.change_btn_box .current_btn {
margin-left: 10px;
}
.show_calendar {
width: 100%;
border-spacing: 0;
background: rgba(0,0,0,0.6);
border-left: 1px solid #303030;
border-top: 1px solid #303030;
margin-bottom: 0;
line-height: 1.5;
border-collapse: separate;
}
.show_calendar th,
.show_calendar td {
background: transparent;
padding: 7px;
border-bottom: 1px solid #303030;
border-right: 1px solid #303030;
}
.show_calendar th {
color: #fff;
background: transparent;
vertical-align: top;
padding-top: 7px;
padding-bottom: 7px;
}
.show_calendar td {
width: 14.3%;
height: 116px;
vertical-align: top;
}

@media all and (max-width : 820px ){
.show_calendar td {
height: 105px;
}
}

.show_calendar td.calendar-holiday,
.show_calendar td.calendar-sun {
color: #F22E00;
background: transparent;
}
.show_calendar td.calendar-sat {
color: #03A3EF;
background: transparent;
}
.show_calendar td.calendar-sat .calendar-labels,
.show_calendar td.calendar-sun .calendar-labels{
color: #fff;
}
.show_calendar .calendar-day-number {
font-style: normal;
font-family: "EB Garamond", serif;
font-weight: 500;
font-size: 2.0rem;
display: block;
padding: 0 3px;
line-height: 1.2;
}
.show_calendar td.calendar-holiday .day,
.show_calendar td.calendar-sun .day {
color: #DF0D2D;
}
.show_calendar td.calendar-sat .day {
color: #2574D3;
}

/* 何もない日 */
.show_calendar td.calendar-none {
background: transparent;
}
/* today */
.show_calendar td.calendar-today {
background: #020426;
border: solid 1px #191FBF;
}
.show_calendar .calendar-labels {
display: flex;
flex-direction: column;
align-items: center;
padding: 10px 0 5px;
}
.cancel_day {
font-size: 1.8rem;
font-weight: 500;
letter-spacing: 0.2em;
color: #fff;
}
.request_icon {
font-size: 2.2rem;
display: block;
margin-bottom: 5px;
}
.request_icon a {
font-weight: 400;
text-decoration: underline;
transition-duration: 0.5s;
}
.request_icon a:hover {
color: #B29458;
font-weight: 400;
transition-duration: 0.5s;
text-decoration: none;
}
.seats {
display: flex;
align-items: center;
font-size: 1.6rem;
}
.seats dt {
line-height: 100%;
}
.seats dd {
line-height: 100%;
}
.alert_txt a {
font-size: 1.6rem;
letter-spacing: 0.2em;
text-decoration: underline;
}
.alert_txt a:hover {
text-decoration: none;
}

@media all and (max-width : 1024px ){
.cancel_day {
font-size: 1.6rem;
}
.request_icon {
font-size: 2.0rem;
}
.seats {
font-size: 1.5rem;
}
}


@media screen and (max-width: 767px) {
.calendar_wrap {
margin-bottom: 20px;
}
.calendar_head {
margin-bottom: 10px;
}
.calendar_active_month {
font-size: 1.6rem;
padding: 0 10px;
}
.change_btn_box .change_btn {
width: 30px;
height: 30px;
}
.show_calendar thead {
display: none;
}
.show_calendar th,
.show_calendar td {
display: block;
width: 100%;
padding: 0;
}
.show_calendar td {
height: auto;
display: -webkit-flex;
display: flex;
}
.show_calendar .calendar-none {
display: none
}
.show_calendar .calendar-labels {
padding: 5px;
flex-direction: row;
}

/* 日付 */
.show_calendar td .calendar-day-number {
font-weight: normal;
padding: 7px;
font-size: 18px;
display: block;
margin-bottom: 0;
width: 75px;
height: auto;
}
.cancel_day {
font-size: 1.4rem;
}
.request_icon {
font-size: 1.8rem;
margin-right: 15px;
margin-bottom: 0px;
}
.seats {
font-size: 1.4rem;
}
.alert_txt a {
font-size: 1.4rem;
}

/* モバイル用曜日を追加 */
.show_calendar td i:after {
font-size: 1.2rem;
position: relative;
left: -5px;
}
.show_calendar td:nth-child(1) i:after {
content: "（日）";
}
.show_calendar td:nth-child(2) i:after {
content: "（月）";
}
.show_calendar td:nth-child(3) i:after {
content: "（火）";
}
.show_calendar td:nth-child(4) i:after {
content: "（水）";
}
.show_calendar td:nth-child(5) i:after {
content: "（木）";
}
.show_calendar td:nth-child(6) i:after {
content: "（金）";
}
.show_calendar td:nth-child(7) i:after {
content: "（土）";
}
}