/* =========================================
   RESERVE PAGE ONLY
========================================= */

.reserve-page{
  background:#000;
  color:#fff;
  font-family: serif;
  line-height:1.7;
  overflow-x:hidden;
}

.reserve-page *{
  box-sizing:border-box;
}

/* ================= HERO ================= */

.reserve-page .reserve-hero{
  position:relative;
  min-height:60vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:120px 20px 35px;
  background:url('/base/mtl/img/bar21-interior.jpg') center/cover no-repeat;
}

.reserve-page .reserve-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.75), rgba(0,0,0,.9));
}

.reserve-page .hero-inner{
  position:relative;
  z-index:2;
  padding 50px 20px 15px;
}

.reserve-page h1{
  font-size:36px;
  font-weight:400;
  letter-spacing:.08em;
  margin:20px 0 18px;
}

.reserve-page .reserve-lead{
  color:#c9a24d;
  font-size:17px;
  letter-spacing:.05em;
}

.reserve-subtitle{
  font-size:12px;
  letter-spacing:.3em;
  opacity:.6;
  margin-bottom:10px;
}

/* ================= BREADCRUMB ================= */

.reserve-page .reserve-breadcrumb{
  position:absolute;
  top:15px;
  left:15px;
  z-index:3;
  font-size:12px;
  letter-spacing:.1em;
}

.reserve-page .reserve-breadcrumb a{
  color:#fff;
  text-decoration:none;
}

.reserve-page .reserve-breadcrumb span{
  margin:0 6px;
  color:#c9a24d;
}

/* ================= METHODS ================= */

.reserve-page .reserve-methods{
  max-width:1100px;
  margin:0 auto 100px;
  padding:0 20px;
  display:flex;
  justify-content:center;
  gap:40px;
  flex-wrap:wrap;
}

.reserve-page .reserve-card{
  width:320px;
  padding:40px 30px;
  border:1px solid rgba(201,162,77,.4);
  background:rgba(255,255,255,.03);
  text-align:center;
}

.reserve-page .reserve-card h2{
  font-size:18px;
  margin-bottom:15px;
}

.reserve-page .reserve-card p{
  font-size:14px;
  opacity:.85;
}

.reserve-page .reserve-btn{
  display:inline-block;
  margin-top:25px;
  padding:14px 30px;
  border:1px solid #c9a24d;
  color:#c9a24d;
  text-decoration:none;
  transition:.3s;
}

.reserve-page .reserve-btn:hover,
.reserve-page .reserve-btn:active{
  background:#c9a24d;
  color:#000;
}

/* ================= SYSTEM ================= */

.reserve-page .reserve-system{
  text-align:center;
  padding:90px 20px 50px;
  border-top:1px solid rgba(255,255,255,.08);
}

.reserve-page .reserve-system h2{
  font-size:28px;
  margin-bottom:40px;
}

.reserve-page .reserve-system-box{
  max-width:600px;
  margin:0 auto;
  font-size:15px;
}

/* ================= FAQ ================= */

.reserve-page .reserve-faq{
  padding:60px 20px 100px;
  max-width:900px;
  margin:0 auto;
}

.reserve-page .reserve-faq-title{
  text-align:center;
  font-size:28px;
  margin-bottom:60px;
}

.reserve-page .reserve-faq-item{
  margin-bottom:40px;
  border-bottom:1px solid rgba(201,162,77,.3);
  padding-bottom:25px;
}

.reserve-page .reserve-faq-q{
  font-size:18px;
  color:#c9a24d;
  margin-bottom:15px;
}

.reserve-page .reserve-faq-a{
  font-size:15px;
  opacity:.9;
}

/* ================= FIXED BAR ================= */

.reserve-page .reserve-fixed{
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  background:#000;
  border-top:1px solid #c9a24d;
  display:flex;
  justify-content:center;
  gap:20px;
  padding:12px;
  z-index:9999;
}

.reserve-page .reserve-fixed a{
  padding:12px 25px;
  border:1px solid #c9a24d;
  color:#c9a24d;
  text-decoration:none;
  transition:.3s;
}

.reserve-page .reserve-fixed a:hover,
.reserve-page .reserve-fixed a:active{
  background:#c9a24d;
  color:#000;
}

/* ================= FOOTER BUTTON FIX ================= */

.reserve-page .footer-links .btn-label{
  color:#fff;
}


.reserve-page .footer-links .btn:hover .btn-label,
.reserve-page .footer-links .btn:active .btn-label{
  color:#000;
}

/* ================= MOBILE ================= */

@media(max-width:768px){

  .reserve-page .reserve-methods{
    flex-direction:column;
    gap:30px;
  }

  .reserve-page .reserve-card{
    width:100%;
  }

  .reserve-page .reserve-hero{
    padding:90px 20px 50px;
  }

  .reserve-page h1{
    font-size:30px;
  }

  /* mobile-footer-links */

  .reserve-page .mobile-footer-links a{
    color:#fff;
  }

  .reserve-page .mobile-footer-links a:active,
  .reserve-page .mobile-footer-links a:hover{
    background:#c9a24d;
    color:#000;
  }

}
/* =========================
   FOOTER LINK COLOR FIX
========================= */

/* PC / SP 共通：常に白 */
.reserve-page .footer-links a,
.reserve-page .footer-links a:link,
.reserve-page .footer-links a:visited,
.reserve-page .footer-links a:hover,
.reserve-page .footer-links a:active,
.reserve-page .footer-links a:focus{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  text-decoration:none !important;
}
/* =========================
   RESERVE LOGO SIZE FIX
========================= */

/* PCのみ */
@media (min-width:769px){
  .reserve-page .reserve-logo img{
    width:220px !important;
    max-width:none !important;
  }
}

/* スマホは少し小さく */
@media (max-width:768px){
  .reserve-page .reserve-logo img{
    width:170px !important;
  }
}
/* =========================
   RESERVE PAGE LINK COLOR FIX
   紫リンク完全防止
========================= */

.reserve-page a,
.reserve-page a:link,
.reserve-page a:visited,
.reserve-page a:hover,
.reserve-page a:active,
.reserve-page a:focus{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  text-decoration:none !important;
}

/* ゴールドボタンは例外 */
.reserve-page .reserve-btn{
  color:#c9a24d !important;
}

.reserve-page .reserve-btn:hover,
.reserve-page .reserve-btn:active{
  color:#000 !important;
}
/* ================= SYSTEM UPGRADE ================= */

.reserve-page .reserve-system{
  padding:120px 20px;
  background:linear-gradient(to bottom,#000,#0b0b0b);
}

.reserve-page .reserve-system-box{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(201,162,77,.3);
  padding:50px 40px;
}

.reserve-page .reserve-system-box p{
  margin:12px 0;
}

.reserve-page .reserve-system h2{
  letter-spacing:.1em;
  color:#c9a24d;
}
/* ================= FAQ UPGRADE ================= */

.reserve-page .reserve-faq{
  background:#0a0a0a;
  padding:120px 20px;
}

.reserve-page .reserve-faq-item{
  background:rgba(255,255,255,.02);
  padding:30px;
  margin-bottom:25px;
  border:1px solid rgba(201,162,77,.25);
  transition:.3s;
}

.reserve-page .reserve-faq-item:hover{
  background:rgba(201,162,77,.05);
}

.reserve-page .reserve-faq-q{
  font-weight:500;
  letter-spacing:.05em;
}

.reserve-page .reserve-faq-title{
  color:#c9a24d;
  letter-spacing:.15em;
}
.reserve-page .reserve-system{
  padding:110px 20px 60px;
}

.reserve-page .reserve-faq{
  padding:70px 20px 120px;
}







/* =========================
   FOOTER 強制ボタン化（完全版）
========================= */

.reserve-page #footer .footer-links a{

  display:inline-block !important;

  padding:14px 20px !important;

  border:1px solid rgba(201,162,77,.5) !important;
  border-radius:6px !important;

  background:linear-gradient(145deg,#0b0b0b,#000) !important;

  color:#fff !important;
  text-decoration:none !important;

  font-size:14px;
  line-height:1.4;

}

/* hover */
.reserve-page #footer .footer-links a:hover{
  border-color:#c9a24d !important;
  color:#c9a24d !important;
  box-shadow:0 0 12px rgba(201,162,77,.3);
}

/* =========================
   FOOTER FINAL TUNE
========================= */

/* ボタン高さ統一 */
.reserve-page #footer .footer-links a{
  height:48px;
  display:flex !important;
  align-items:center;
  justify-content:center;

  padding:0 20px !important;

  min-width:220px;
}

/* レイアウト美化 */
.reserve-page #footer .footer-links{
  display:flex !important;
  flex-wrap:wrap;
  justify-content:center;
  gap:16px;
  max-width:1100px;
  margin:0 auto;
}

/* CTAだけ強く */
.reserve-page #footer .footer-links a.cta{
  min-width:260px;
  box-shadow:0 0 18px rgba(201,162,77,.5);
}

/* hover微調整（高級感） */
.reserve-page #footer .footer-links a:hover{
  transform:translateY(-2px);
}


/* =========================
   FINAL POLISH
========================= */

/* CTAを少し落ち着かせる */
.reserve-page #footer .footer-links a.cta{
  box-shadow:0 0 12px rgba(201,162,77,.35);
}

/* 全体の高級感UP */
.reserve-page #footer .footer-links a{
  letter-spacing:.08em;
}

/* 下段を中央揃えに補正 */
.reserve-page #footer .footer-links{
  align-items:center;
}

/* 最下段だけ少し広く */
.reserve-page #footer .footer-links a:nth-last-child(-n+2){
  min-width:260px;
}



@media (max-width:768px){

  .reserve-page #footer .footer-links{
    grid-template-columns: 1fr;
  }

  .reserve-page #footer .footer-links a.cta{
    grid-column: span 1;
  }

}

/* =========================
   FOOTER BUTTON FINAL（安定版）
========================= */

#footer .footer-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:16px;
  max-width:1100px;
  margin:60px auto 40px;
}

/* 通常ボタン */
#footer .footer-links a{
  display:flex;
  align-items:center;
  justify-content:center;

  height:48px;
  min-width:220px;

  padding:0 20px;

  border:1px solid rgba(201,162,77,.5);
  border-radius:6px;

  background:linear-gradient(145deg,#0b0b0b,#000);

  color:#fff;
  text-decoration:none;

  font-size:14px;
  letter-spacing:.08em;

  transition:.25s;
}

/* hover */
#footer .footer-links a:hover{
  border-color:#c9a24d;
  color:#c9a24d;
  box-shadow:0 0 12px rgba(201,162,77,.3);
  transform:translateY(-2px);
}

/* =========================
   予約ボタン（最重要）
========================= */

#footer .footer-links a.cta{
  background:linear-gradient(135deg,#d6b25e,#f5e6b3);
  color:#000;
  border:none;
  box-shadow:0 0 18px rgba(201,162,77,.5);
  font-weight:bold;
}

/* hover */
#footer .footer-links a.cta:hover{
  background:linear-gradient(135deg,#e0c36a,#fff2c7);
  transform:translateY(-2px);
}

/* =========================
   English（弱め）
========================= */

#footer .footer-links a.sub{
  opacity:.6;
}

/* =========================
   スマホ最適化
========================= */

@media (max-width:768px){

  #footer .footer-links{
    flex-direction:column;
    align-items:center;
  }

  #footer .footer-links a{
    width:90%;
    max-width:320px;
  }

  #footer .footer-links a.cta{
    max-width:340px;
  }

}