@charset "utf-8";
/* Title */
.fbnr{display: none !important;}
.title{background: #00B1A0; color: #fff; padding: 11px 0; text-align: center; font-size: 2.2rem; line-height: 1; letter-spacing: 0.05em; font-weight: 600; font-family: "Noto Serif JP", serif;}

@media screen and (max-width: 768px){
     .title{font-size: 2rem; padding: 12px 0;}
}

/* Fee */
.fee-tit{font-weight: bold; font-family: "Noto Serif JP", serif; line-height: 1; letter-spacing: 0.1em; border-bottom: 1px solid #CAA73A; padding: 0 0 15px; margin: 0 0 20px; text-align: center;}
.fee-tit span{font-size: 2.4rem; display: inline-block; letter-spacing: 0.1em;}

.fee-txt{font-size: 2.2rem; font-weight: 600; line-height: 1.4; letter-spacing: 0.05em; text-align: center; margin: 0 0 20px; font-family: "Noto Serif JP", serif;}
.fee-txt span{font-weight: bold; color: #00B1A0;}

@media screen and (max-width: 768px){
    .fee-tit{font-size: 1.4rem; padding: 0 0 8px; margin: 0 0 15px;}
    .fee-tit span{font-size: 2.2rem;}

    .fee-txt{font-size: 1.8rem; line-height: 1.66;}
    .fee-txt span{display: block; font-size: 2rem;}
}

.fee-tbl{width: 100%; margin: 0 0 45px;}
.fee-tbl th,
.fee-tbl td{text-align: center; font-family: "Noto Serif JP", serif; border: 1px solid #CAA73A;}
.fee-tbl th{background: rgba(202, 167, 58, 0.20); width: 40.4%; font-size: 2rem; line-height: 1; letter-spacing: 0.1em; padding: 20px 0; font-weight: 600;}
.fee-tbl th:nth-of-type(1){width: 19.3%;}
.fee-tbl td{font-size: 1.8rem; line-height: 1; font-weight: 500; padding: 25px 0;}
.fee-tbl td span{font-size: 2.4rem;}
.fee-tbl td:nth-of-type(1){background: rgba(202, 167, 58, 0.20);}

@media screen and (max-width: 768px){
    .fee-tbl th{width: 37%; font-size: 1.6rem;}
    .fee-tbl th:nth-of-type(1){width: 26%;}
    .fee-tbl td{font-size: 1.4rem;}
    .fee-tbl td span{font-size: 1.8rem;}
}

/* Ticket */
.ticket{margin: 0 0 55px;}
.ticket .head{border-bottom: 6px solid rgba(0, 177, 160, 0.20); padding: 0 0 17px; margin: 0 0 15px; font-family: "Noto Serif JP", serif;}

.ticket .tit{font-size: 2.4rem; letter-spacing: 0.05em; line-height: 1.25; margin: 0 1em 0 0; color: #00B1A0;}
.ticket .price{font-size: 2.4rem; letter-spacing: 0.05em; line-height: 1.25;}
.ticket .price span{font-size: 1.6rem;}

.ticket .head-left{display: flex; flex-wrap: wrap; gap:15px 0; width: calc( 100% - 200px); }
.ticket .head-left .audio-note{width: 100%;}
    .audio-note{ font-size: 1.4rem; font-family: "Noto Sans JP", sans-serif !important;}
    .audio-note span{font-weight: 700; display: inline-block; position: relative; z-index: 1; }
    .audio-note span::before{ content: ''; display: block; position: absolute; bottom: 0.15em; left: 0; width: 100%; height: 6px; background: #00B1A04d; z-index: -1; }

@media screen and (min-width: 769px){
    .ticket .head{display: flex; justify-content: space-between; align-items: center;}
    
    
}

@media screen and (max-width: 768px){
    .ticket{background: rgba(244, 246, 242, 0.80); padding: 40px 25px 35px; margin: 0 -25px 40px;}
    .ticket .head{text-align: center; border-bottom: 4px solid rgba(0, 177, 160, 0.20); margin-bottom: 0 0 20px !important;}

    .ticket .head-left{ width: 100%; justify-content: center; text-align: center; gap:0 15px;}
    .ticket .head-left .audio-note{ margin: 30px 0 0; }
    .ticket .tit{margin: 0 0 5px; font-weight: 500;}
    .ticket .price{font-size: 2.2rem;}
    .ticket .btn-ex{margin: 15px auto 0;}
    
}

/* Precaution */
@media screen and (min-width: 769px){
    .precaution{margin: 0 0 55px;}
}

@media screen and (max-width: 768px){
    .precaution{margin: 0 0 40px;}    
}

/* Online */
.online{text-align: center; margin: 0 0 55px;}
.online .txt{font-size: 1.8rem; font-weight: 600; line-height: 1.2; letter-spacing: 0.05em; padding: 17px 0; font-family: "Noto Serif JP", serif;}
.online .btn{max-width: 410px; margin: 0 auto;}
.online .btn a{display: block; transition: .3s; position: relative;}
.online .btn a:hover{transform: translateY(5px);}
.online .btn.is-soon{ pointer-events: none; }
.online .btn.is-soon a img { opacity: 0.4; }
.online .btn.is-soon a::before{content: 'Coming Soon'; width: 7em; font-size: 1.5rem; line-height: 1; letter-spacing: 0.05em; font-family: "Cormorant", serif; color: #333333; text-align: center; position: absolute; place-self: center; inset: 0;}

@media screen and (max-width: 768px){
     .online{margin: 0 0 50px;}
}

/* Guide */
.guide .title{margin: 0 0 30px;}
.guide-item{border: 1px solid #CAA73A; padding: 25px 20px 20px; text-align: center; font-family: "Noto Serif JP", serif;}
.guide-item .tit{font-size: 1.8rem; line-height: 1.2; letter-spacing: 0.05em; font-weight: 600; margin: 0 0 15px;}
.guide-item .cap{margin: 15px 0 0 0; font-weight: 600; line-height: 1.5; letter-spacing: 0.05em;}

@media screen and (min-width: 769px){    
    .guide-box{display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%; padding: 0 0 5px;}
    .guide-item{width: 48.5%; margin-bottom: 3%; min-height: 173px;}
    .guide-item .btn-ex{max-width: 200px; width: 100%;}

    .guide-item .outer{display: flex; align-items: flex-end; width: 100%; margin: 0 0 20px;}
    .guide-item .img{width: 210px; margin-right: 20px;}
    .guide-item .inner{width: 200px;}

    .guide-item1 .inner{padding-bottom: 5px;}
    .guide-item2 .inner{padding-bottom: 5px;}    
    .guide-item3 .outer{align-items: center;}
    .guide-item4 .inner{padding-bottom: 5px;}
    .guide-item7 .outer{align-items: center;}
    .guide-item8 .outer{align-items: center;}
}

@media screen and (max-width: 768px){
    .guide-item{margin: 0 0 30px;}
    .guide-item .img{max-width: 230px; margin: 0 auto 20px;}    
    .guide-item .img img{width: 100%;}
    .guide-item .btn-ex{margin: 0 auto;}
    .guide-item .cap{margin: 20px 0 0 0; line-height: 1.66;}
}