@charset "utf-8";
/* ===================================================================
 File Name  : calendar.css
 Style Info : 客室ページの予約カレンダーに関するスタイル指定
=================================================================== */

/* ---------------------------------------------------
  #calendar_col
------------------------------------------------------ */
#calendar_col { width: 1200px; max-width: 95%; margin: 50px auto 50px; box-sizing: border-box; }
#calendar_col h3 { font-size: 34px; text-align: center; }
#calendar_col h3 + p { margin-top: 5px; text-align: center; }
#calendar_col .calendar_489ban { display: flex; justify-content: center; margin-top: 50px; }
#calendar_col .calendar_489ban_02 { display: flex; justify-content: center; margin-top: 50px; }
#calendar_col .calendar { width: 340px; }
#calendar_col .calendar + .calendar { margin-left: 30px; }
#calendar_col .calendar caption { margin-bottom: 5px; font-size: 20px; }
#calendar_col .calendar th,
#calendar_col .calendar td { padding: 5px 0; border-collapse: collapse; border: 1px solid #cfcfcf; text-align: center; line-height: 1.5em; }
#calendar_col .calendar th:first-child,
#calendar_col .calendar td:first-child,
#calendar_col .calendar th:first-child a,
#calendar_col .calendar td:first-child a { color: #c64844; }
#calendar_col .calendar th:last-child,
#calendar_col .calendar td:last-child,
#calendar_col .calendar th:last-child a,
#calendar_col .calendar td:last-child a { color: #7a7eb4; }
#calendar_col .calendar th { background: #f1f1f1; }
#calendar_col .calendar td a { color: #74a6c2; }
#calendar_col .calendar_489ban + p { max-width: 1080px; margin: 15px auto 0; text-align: right; }
#calendar_col .calendar_489ban + p a { position: relative; box-sizing: border-box; text-decoration: underline; }
#calendar_col .calendar_489ban + p a:hover { text-decoration: none; }
#calendar_col .calendar_489ban_02 + p { max-width: 1080px; margin: 15px auto 0; text-align: right; }
#calendar_col .calendar_489ban_02 + p a { position: relative; box-sizing: border-box; text-decoration: underline; }
#calendar_col .calendar_489ban_02 + p a:hover { text-decoration: none; }
#calendar_col .btn { margin-top: 70px; text-align: center; }
#calendar_col .btn a { display: inline-block; padding: 18px 120px; font-size: 16px; background: #9873ac; color: #fff; }
#calendar_col .btn a:hover { background: #B693C9; text-decoration: none; }
main > .cmn_btn{ margin: 60px auto 150px;}

.cmn_btn{ width: 400px; font-size: 16px; margin: 100px auto 150px;}

@media screen and (max-width: 600px) {
  #calendar_col { margin-top: 40px; margin-bottom: 20px; }
  #calendar_col h3 { font-size: 22px; }
  #calendar_col h3 + p { font-size: 14px; text-align: left; }
  #calendar_col .calendar_489ban { display: block; margin-top: 20px; }
  #calendar_col .calendar_489ban_02 { display: block; margin-top: 20px; }
  #calendar_col .calendar { width: 100%; }
  #calendar_col .calendar + .calendar { margin: 30px 0 0; }
  #calendar_col .calendar_489ban + p { text-align: left; }
  #calendar_col .calendar_489ban + p,
  #calendar_col .calendar_489ban_02 + p { text-align: left; }
  #calendar_col .calendar_489ban_02 + p,
  #calendar_col p:last-child { font-size: 14px; text-align: center; }
  #calendar_col .btn { margin-top: 40px; }
  #calendar_col .btn a { width: 260px; padding: 15px 0; }
  main > .cmn_btn{ margin: 30px auto 50px;}

.cmn_btn{ width: 260px; font-size: 16px; margin: 30px auto 50px;}
}

#calendar_col .calendar_489ban + p a::after {
  font-family:"Line Awesome Free","Line Awesome Brands";
  content: "\f105";
  font-weight: 600;
}

#calendar_col .calendar_489ban_02 + p a::after {
  font-family:"Line Awesome Free","Line Awesome Brands";
  content: "\f105";
  font-weight: 600;
}

.sumi_bg_none {
  border-top: solid 1px #B1AFAF;
  padding: 60px 0 80px;
}
.sumi_bg_none .sub_ttl01 {
  margin-bottom: 45px;
}
.sumi_bg_none::after {
  content: none;
}