/* ===============================================================
    * reserve
=============================================================== */
.reserve .reserve-go {text-align: center; margin: 40px auto;}
.reserve .reserve-go__btn {margin: 0 20px; display: inline-block; padding: 30px 50px 40px; border: 1px solid #e0e0e0; border-radius: 15px; box-shadow: 0px 0px 10px 5px rgba(153, 153, 153, 0.2);}
.reserve .reserve-go__btn a {display: block; width: 100%; height: 100%;}
.reserve .reserve-go__btn p.icon {position: relative; display: inline-block; width: 80px; height: 80px; line-height: 80px; background: #9e0016; text-align: center; border-radius: 50%; color: #fff; font-size: 30px;}
.reserve .reserve-go__btn p.icon:after {content: ''; position: absolute; width: 85%; height: 85%; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%,-50%); border: 1px solid rgba(255,255,255,0.6); z-index: 1;}
.reserve .reserve-go__btn h2 {font-size: 30px; color: #555; margin: 30px 0 0;}
.reserve .reserve-go__btn .line {display: inline-block; width: 1px; height: 30px; background: #9e0016; margin: 30px auto;}
.reserve .reserve-go__btn .btn {height: 70px; line-height: 70px; color: #fff; background: #9e0016; padding: 0 60px; border-radius: 12px; font-size: 24px; text-align: center;}

.info-box__wrap {width: 100%; background: #fff; border: 1px solid #e0e0e0; border-top: 2px solid #9e0016; padding: 30px 20px 60px;}
.info-box__wrap h2 {font-size: 18px; margin-bottom: 30px;}
.info-box__wrap .txtFont, .info-box__wrap .txtFont p {font-size: 13px; line-height: 30px; color: #555; padding: 0 10px;}
.room-info__inner {padding: 0 10px;}
.room-usage {background: #fff; padding: 30px 20px 40px; margin-bottom: 20px;}
.room-usage__wrap {display: flex; justify-content: space-between;}
.room-usage__box {width: calc(50% - 10px); margin-right: 20px;}
.room-usage__box:last-of-type {margin-right: 0;}
.room-inner__tit {width: 100%; height: 50px; line-height: 50px; text-align: center; color: #fff; font-size: 14px; background: #4f6f8c;}
.room-usage__box:last-of-type .room-inner__tit {background: #be8e62;}
.room-inner__txt {background: #f5f5f5; padding: 20px; font-size: 13px; line-height: 24px; color: #555;}

.reserve-info {display: flex; justify-content: space-between; align-items: flex-start; margin-top: 40px;}
.reserve-info .tit {font-size: 16px; color: #9e0016; margin-bottom: 20px;}
.reserve-info .tit i {font-size: 20px;}
.reserve-info > div {width: 33%; text-align: center;}
.reserve-info__box1 a {font-size: 18px; color: #555;}
.reserve-info__box2 .fontR {font-size: 13px; line-height: 24px; color: #555;}
.reserve-info__box2 .fontB {font-size: 18px; color: #555;}
.reserve-info__box3 p {font-size: 13px; line-height: 24px; color: #555;}
.reserve-info__box3 .cred {color: #f00;}
@media (max-width: 750px){
    .reservation > .width-max {padding: 0;}
    .reserve .reserve-go {margin: 5.33vw 0;}
    .reserve .reserve-go__btn {display: block; width: 80%; margin: 0 auto 5.33vw; padding: 4.00vw 6.67vw 5.33vw}
    .reserve .reserve-go__btn p.icon {width: 12.00vw; height: 12.00vw; line-height: 12.00vw; font-size: 5.33vw;}
    .reserve .reserve-go__btn h2 {font-size: 5.33vw; margin: 4.00vw 0 0;}
    .reserve .reserve-go__btn .line {height: 4.67vw; margin: 4.00vw 0;}
    .reserve .reserve-go__btn .btn {height: 10.67vw; line-height: 10.67vw; padding: 0; font-size: 3.20vw;}

    .info-box__wrap {padding: 4.00vw 4.00vw 8.00vw;}
    .info-box__wrap h3 {font-size: 2.40vw;}
    .info-box__wrap h2 {font-size: 3.20vw; margin: 2.00vw 0 4.00vw;}
    .info-box__wrap .txtFont, .info-box__wrap .txtFont p {font-size: 2.67vw; line-height: 4.00vw; padding: 0;}
    .room-info__inner {padding: 0;}
    .room-usage {padding: 4.00vw 2.67vw 5.33vw; margin-bottom: 2.667vw;}
    .room-usage__wrap {display: block;}
    .room-usage__box {width: 100%; margin-right: 0; margin-bottom: 1.33vw;}
    .room-inner__tit {height: 8.00vw; line-height: 8.00vw; font-size: 2.667vw;}
    .room-inner__txt {padding: 2.667vw; font-size: 2.67vw; line-height: 5.33vw;}

    .reserve-info {display: block; margin-top: 5.33vw;}
    .reserve-info .tit {font-size: 3.47vw; margin-bottom: 2vw;}
    .reserve-info .tit i {font-size: 3.47vw;}
    .reserve-info > div {width: 100%;}
    .reserve-info__box1 a {font-size: 3.47vw;}
    .reserve-info__box2 .fontR {font-size: 2.67vw; line-height: 4.00vw;}
    .reserve-info__box2 .fontB {font-size: 3.47vw;}
    .reserve-info__box3 p {font-size: 2.67vw; line-height: 4.00vw;}
    .reserve-info__box1, .reserve-info__box2 {margin-bottom: 6vw;}
}


/* ===============================================================
    * reserve-guide
=============================================================== */
.reserve-guide .room-info__inner div {color: #999; font-size: 13px; line-height: 24px; margin-bottom: 20px;}
.reserve-guide .color3 {color: #333;}
.reserve-guide .color5 {color: #555; padding-left: 20px;}
.reserve-guide .cred {color: #f00;}
.excess-table {width: 100%;}
.excess-table thead tr {background: #9e0016; color: #fff; height: 50px; line-height: 50px; text-align: center; font-size: 14px;}
.excess-table tbody tr {background: #f5f5f5; height: 50px; line-height: 50px; text-align: center; font-size: 13px; color: #333;}
@media (max-width: 750px){
    .reserve-guide .room-info__inner div {font-size: 2.67vw; line-height: 5.33vw; margin-bottom: 2.67vw;}
    .reserve-guide .color5 {padding-left: 5px;}
    .excess-table thead tr, .excess-table tbody tr {height: 8.00vw; line-height: 8.00vw; font-size: 2.67vw;}
}


/* ===============================================================
    * use-guide
=============================================================== */
.use-guide .room-info__inner div {color: #999; font-size: 13px; line-height: 24px; margin-bottom: 20px;}
.use-guide .color3 {color: #333;}
.use-guide .color5 {color: #555;}
.use-guide .cred {color: #f00;}
.use-guide .mt10 {margin-top: 10px;}
.use-guide .time {display: flex; justify-content: flex-start; align-items: flex-start;}
@media (max-width: 750px){
    .use-guide .room-info__inner div {font-size: 2.67vw; line-height: 5.33vw; margin-bottom: 2.67vw;}
    .use-guide .time span:first-of-type {width: 27vw;}
}

/* ===============================================================
    * fee
=============================================================== */
.fee, .reserve-guide, .use-guide, .refund-guide {margin-top: 40px;}
.fee-tab {margin: 20px 0; display: flex; justify-content: center; align-items: center;}
.fee-item {width: 140px; height: 40px; line-height: 40px; border: 1px solid #999; border-radius: 4px; text-align: center; color: #666; margin: 0 5px; cursor: pointer; transition: .3s;}
.fee-item:hover, .fee-item.active {background: #9e0016; color: #fff; border-color: #9e0016;}
.table-wrap {padding: 0 10px;}
.table-wrap table th:nth-of-type(1) {width: auto;}
.table-wrap table th:nth-of-type(2) {width: 15%;}
.table-wrap table th:nth-of-type(3) {width: 20%;}
.table-wrap table th:nth-of-type(4) {width: 10%;}
.table-wrap table th:nth-of-type(5) {width: 10%;}
.table-wrap table th:nth-of-type(6) {width: 10%;}
.table-wrap table th:nth-of-type(7) {width: 10%;}


.table-wrap table {width: 100%;}
.table-wrap table thead tr {background: #9e0016; color: #fff; height: 50px; line-height: 50px; font-size: 14px;}
.table-wrap table tr.table-group {height: 50px; line-height: 50px; border: 1px solid #9e0016; border-left: none; border-right: none; background: #fff; text-align: center;}
.table-wrap table tr.table-group td {font-size: 14px; color: #9e0016;}
.table-wrap table tr {height: 50px; line-height: 50px; background: #e0e0e0;} 
.table-wrap table tr:nth-of-type(even) {background: #f5f5f5;}
.table-wrap table td {font-size: 13px; color: #555; text-align: center;}
.table-wrap .caption {font-size: 12px; text-align: right; padding-top: 10px;}
@media (max-width: 750px){
    .fee, .reserve-guide, .use-guide, .refund-guide {margin-top: 5.33vw;}
    .fee-tab {margin: 20px 0;}
    .fee-item {width: 18.67vw; height: 8.00vw; line-height: 8.00vw; font-size: 2.67vw;}
    .table-wrap {padding: 0;}

    .table-wrap table thead tr {height: 10.67vw; line-height: 10.67vw; font-size: 2.67vw; line-height: 3.20vw;}
    .table-wrap table th {vertical-align: middle;}
    .table-wrap table tr.table-group {height: 8.00vw; line-height: 8.00vw;}
    .table-wrap table tr.table-group td {font-size: 2.67vw;}
    .table-wrap table tr {height: auto; line-height: 1; border-bottom: 1px solid #e0e0e0;}
    .table-wrap table td {font-size: 2.67vw; line-height: 3.20vw; vertical-align: middle; padding: 10px 3px; border-right: 1px solid #e0e0e0;}

    .table-wrap table tr th:nth-of-type(2),
    .table-wrap table tr th:nth-of-type(3),
    .table-wrap table tr td:nth-of-type(2),
    .table-wrap table tr td:nth-of-type(3) {display: none;}
    /* width */
    .table-wrap table tr th:nth-of-type(1) {width: auto;}
    .table-wrap table tr th:nth-of-type(4) {width: 15%;}
    .table-wrap table tr th:nth-of-type(5) {width: 20%;}
    .table-wrap table tr th:nth-of-type(6) {width: 20%;}
    .table-wrap table tr th:nth-of-type(7) {width: 20%;}
    /* bg */
    .table-wrap tr td:not(:first-of-type) {background: #fff;}
    .table-wrap .caption {font-size: 2.40vw; line-height: 3.20vw;}
}


/* ===============================================================
    * use-guide
=============================================================== */
.refund-guide .refund-info {font-size: 13px; line-height: 24px; color: #999;}
.refund-guide .refund-info .cred {color: #f00;}
.refund-guide .refund-info .cdark {color: #555;}

.refund-guide .refund-info p {font-size: 13px; color: #555; margin: 35px 0 10px;}
.refund-table {width: 100%;}
.refund-table tr {height: 50px; text-align: center;}
.refund-table thead tr {vertical-align: middle; background: #9e0016; color: #fff; text-align: center;}
.refund-table thead th {line-height: 50px;}
.refund-table tbody tr {background: #f5f5f5;}
.refund-table tbody tr:nth-of-type(even) {background: #e0e0e0;}
.refund-table tbody td {font-size: 13px; color: #333; text-align: center; vertical-align: middle;}
@media (max-width: 750px){
    .refund-guide .refund-info {font-size: 2.67vw; line-height: 4.00vw;}
    .refund-guide .refund-info p {font-size: 2.67vw; margin: 4.67vw 0 1.33vw;}
    .refund-table tr {height: 8.00vw;}
    .refund-table thead th {line-height: 8vw;}
    .refund-table tbody td {font-size: 2.67vw; padding: 5px 0;}
}


/* ===============================================================
    * anchor
=============================================================== */
.reserve, .fee, .reserve-guide, .use-guide, .refund-guide {position: relative;}
#reserve, #fee, #reserve-guide, #use-guide, #refund-guide {position: absolute; top: -200px;}