@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Inter:wght@300;400;500;600;700;800&family=Noto+Sans+JP:wght@300;400;500;600;700;800&display=swap");

:root {
  --bg: #f7f1e8;
  --text: #11161b;
  --muted: #6f6a61;
  --ocean: #0d6f8f;
  --ocean-dark: #083847;
  --line: rgba(17,22,27,.08);
  --soft: #f7fbfc;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #fff;
  color: var(--text);
  font-family: "Inter", "Noto Sans JP", sans-serif;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* =========================
   HEADER
========================= */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: 76px;
  padding: 0 6.2vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,250,242,.78);
  backdrop-filter: blur(22px);
  border-bottom: 1px solid rgba(17,22,27,.06);
  transition: .28s ease;
}

.site-header.is-scrolled {
  height: 68px;
  background: rgba(255,250,242,.94);
  box-shadow: 0 12px 34px rgba(20,38,46,.08);
}

.site-logo { display: flex; align-items: center; }
.site-logo img { display: block; width: auto; height: 72px; object-fit: contain; }

.site-nav {
  display: flex;
  gap: 34px;
  color: rgba(17,22,27,.62);
  font-size: .84rem;
}

.site-nav a:hover { color: var(--text); }

.header-actions { display: flex; align-items: center; gap: 18px; }
.language-switch { display: flex; gap: 10px; }
.language-switch button {
  border: 0;
  background: transparent;
  padding: 0;
  color: rgba(17,22,27,.42);
  font-size: .74rem;
  font-weight: 700;
  cursor: pointer;
}
.language-switch .is-active { color: var(--text); }

.header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2px;

  height: 44px;
  min-width: 126px;
  padding: 0 22px;

  border-radius: 999px;
  color: #fff;

  background:
    linear-gradient(
      135deg,
      #1497bc 0%,
      #0d6f8f 48%,
      #083847 100%
    );

  border: 1px solid rgba(255,255,255,.22);

  box-shadow:
    0 16px 34px rgba(13,111,143,.22),
    inset 0 1px 0 rgba(255,255,255,.26);

  font-size: 0;
  transition: 0.25s ease;
}

.header-cta span {
  font-size: .78rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .02em;
}

.header-cta small {
  margin-top: 2px;
  color: rgba(255,255,255,.72);
  font-size: .54rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .16em;
}

.menu-toggle,.mobile-menu { display: none; }

/* =========================
   HERO
========================= */
.fleet-hero {
  position: relative;

  min-height: 340px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  text-align: center;

  padding: 80px 24px;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.95) 0%,
      rgba(255,255,255,.90) 55%,
      rgba(255,255,255,.55) 100%
    ),
    url("../img/fleet/fleet-hero.jpg")
    center center / cover no-repeat;
}

.fleet-hero-inner { max-width: 780px; }
.section-kicker {
  margin: 0 0 16px;
  color: rgba(10,57,72,.54);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .24em;
}

.fleet-hero h1 {
  margin: 0;
  color: #07121a;
  font-size: clamp(2rem,4vw,3.8rem);
  line-height: 1;
  letter-spacing: -.05em;
  font-weight: 800;
}

.fleet-hero p:not(.section-kicker) {
  margin: 16px 0 0;
  max-width: 620px;
  color: rgba(17,22,27,.72);
  font-size: .98rem;
  line-height: 1.9;
}

/* =========================
   CLASS SECTION
========================= */
.fleet-section {
  background: #fff;
  padding: 0 6.2vw 86px;
}

.fleet-filter {
  position: sticky;
  top: 76px;
  z-index: 20;
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 22px 0 28px;
  background: linear-gradient(180deg,#fff 72%,rgba(255,255,255,0));
}

.fleet-filter button {
  min-width: 110px;
  border: 1px solid rgba(17,22,27,.1);
  border-radius: 999px;
  padding: 13px 20px;
  background: rgba(255,255,255,.72);
  color: rgba(17,22,27,.58);
  cursor: pointer;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .14em;
  transition: .22s ease;
}

.fleet-filter button:hover,
.fleet-filter button.is-active {
  background: #11161b;
  color: #fff;
  transform: translateY(-1px);
}

.fleet-price-notice {
  margin: -8px auto 24px;
  max-width: 920px;
  text-align: center;
  color: rgba(17,22,27,.56);
  font-size: .86rem;
}

.class-panel {
  max-width: 1500px;
  margin: 0 auto;
}

.class-detail-card {
  display: grid;
  grid-template-columns: 1.25fr 1.25fr .9fr 1.35fr 1.05fr;
  align-items: center;
  gap: 26px;
  padding: 26px;
  border-radius: 30px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(17,22,27,.08);
  box-shadow: 0 22px 64px rgba(20,38,46,.08);
}

.class-main {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 20px;
  align-items: start;
}

.class-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--ocean);
  font-size: 1.3rem;
  font-weight: 800;
}

.class-detail-card.is-gold .class-icon { background: linear-gradient(135deg,#c5a35a,#8c6a2d); }
.class-detail-card.is-blue .class-icon { background: linear-gradient(135deg,#22a0ca,#0d6f8f); }
.class-detail-card.is-orange .class-icon { background: linear-gradient(135deg,#ff8f45,#df6830); }
.class-detail-card.is-green .class-icon { background: linear-gradient(135deg,#64b86a,#3f9149); }
.class-detail-card.is-purple .class-icon { background: linear-gradient(135deg,#9a70d8,#6a48a8); }

.class-copy h2 {
  margin: 0 0 10px;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.1rem,2.7vw,3.1rem);
  font-weight: 500;
  line-height: .92;
  letter-spacing: -.04em;
}

.class-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.class-tags span {
  padding: 6px 10px;
  border-radius: 7px;
  color: #fff;
  background: rgba(13,111,143,.76);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .08em;
}
/* FAMILY */

.class-detail-card.is-blue .class-icon{
  font-size: .9rem;
  letter-spacing: 2px;
  font-weight: 800;
}

/* VALUE */

.class-detail-card.is-orange .class-icon{
  font-size: 2rem;
}

/* COMPACT */

.class-detail-card.is-green .class-icon{
  font-size: 2rem;
}

/* LOCAL */

.class-detail-card.is-purple .class-icon{
  font-size: 2rem;
}
.class-detail-card.is-gold .class-tags span { background:#c5a35a; }
.class-detail-card.is-orange .class-tags span { background:#f0783f; }
.class-detail-card.is-green .class-tags span { background:#4ca856; }
.class-detail-card.is-purple .class-tags span { background:#7c55b9; }

.class-copy p {
  margin: 0;
  color: rgba(17,22,27,.68);
  font-size: .92rem;
  line-height: 1.8;
}

.class-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
  color: rgba(17,22,27,.62);
  font-size: .82rem;
  font-weight: 700;
}

.class-visual {
  min-height: 155px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.class-visual img {
  width: min(220px,52%);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 20px 18px rgba(20,38,46,.12));
}

.class-visual img:only-child { width: min(290px,88%); }

.class-rates {
  display: grid;
  gap: 14px;
}

.class-rates div {
  padding: 0;
  background: transparent;
}

.class-rates span {
  display: block;
  margin-bottom: 5px;
  color: rgba(10,57,72,.62);
  font-size: .67rem;
  font-weight: 900;
  letter-spacing: .18em;
}

.class-rates strong {
  display: block;
  color: #11161b;
  font-size: clamp(1.02rem,1.3vw,1.35rem);
  font-weight: 900;
  letter-spacing: -.03em;
}

.class-rates small {
  display: block;
  margin-top: 5px;
  color: rgba(17,22,27,.48);
  font-size: .72rem;
  line-height: 1.5;
}

.class-vehicles h3 {
  margin: 0 0 12px;
  color: rgba(17,22,27,.82);
  font-size: .86rem;
  font-weight: 900;
}

.class-vehicle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}

.class-vehicle-grid:has(.class-vehicle-card:only-child) {
  grid-template-columns: 1fr;
}

.class-vehicle-card {
  min-height: 112px;
  padding: 14px;
  display: grid;
  grid-template-columns: 45% 1fr;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(17,22,27,.08);
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  text-align: left;
  cursor: pointer;
  transition: .24s ease;
}

.class-vehicle-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 38px rgba(20,38,46,.12);
}

.class-vehicle-card img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.class-vehicle-card strong {
  display: block;
  margin-bottom: 5px;
  font-size: .94rem;
  font-weight: 900;
}

.class-vehicle-card span {
  display: block;
  color: rgba(17,22,27,.58);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.45;
}

.class-reserve {
  display: grid;
  gap: 20px;
  align-items: center;
}

.class-reserve p {
  position: relative;
  margin: 0;
  padding-left: 22px;
  color: rgba(17,22,27,.68);
  font-size: .9rem;
  line-height: 1.75;
}

.class-reserve p::before {
  content: "i";
  position: absolute;
  left: 0;
  top: 2px;
  width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(13,111,143,.5);
  color: var(--ocean);
  font-size: .68rem;
  font-weight: 900;
}

.class-reserve a {
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg,#1497bc,#0d6f8f,#083847);
  font-size: .9rem;
  font-weight: 900;
  box-shadow: 0 18px 38px rgba(13,111,143,.22);
}

.fleet-bottom-note {
  max-width: 1500px;
  margin: 18px auto 0;
  padding: 13px 18px;
  border-radius: 999px;
  background: rgba(13,111,143,.07);
  color: rgba(17,22,27,.64);
  text-align: center;
  font-size: .82rem;
  line-height: 1.7;
}

/* =========================
   DRAWER
========================= */
.fleet-overlay {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: rgba(5,10,15,.38);
  opacity: 0;
  pointer-events: none;
  transition: .3s ease;
}
.fleet-overlay.is-open { opacity: 1; pointer-events: auto; }

.car-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 200;
  width: min(520px,92vw);
  height: 100svh;
  background: #fffaf2;
  box-shadow: -30px 0 80px rgba(0,0,0,.18);
  transform: translateX(105%);
  transition: transform .36s ease;
  overflow-y: auto;
}
.car-drawer.is-open { transform: translateX(0); }

.drawer-close {
  position: fixed;
  top: 22px;
  right: 22px;
  z-index: 3;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(17,22,27,.1);
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  cursor: pointer;
  font-size: 1.4rem;
}

.drawer-image {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}
.drawer-image img { width: 100%; height: auto; display: block; object-fit: contain; }
.drawer-content { padding: 38px 42px 48px; }
.drawer-category {
  margin: 0 0 16px;
  color: rgba(10,57,72,.5);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .22em;
}
.drawer-content h2 {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: 4.2rem;
  line-height: .86;
  font-weight: 500;
  letter-spacing: -.055em;
}
.drawer-price { margin: 24px 0 28px; display: grid; gap: 14px; }
.season-rate {
  padding: 18px 20px;
  border-radius: 20px;
  background: rgba(13,111,143,.06);
  border: 1px solid rgba(13,111,143,.08);
}
.season-rate span {
  display: block;
  margin-bottom: 8px;
  color: rgba(10,57,72,.52);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .18em;
}
.season-rate strong { display: block; font-size: 1.25rem; font-weight: 900; }
.season-rate small { display: block; margin-top: 6px; color: rgba(17,22,27,.45); font-size: .78rem; line-height:1.6; }
.drawer-info { display: grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:24px; }
.drawer-info div { padding:18px; border-radius:20px; background:rgba(255,255,255,.78); border:1px solid rgba(17,22,27,.07); }
.drawer-info span { display:block; margin-bottom:8px; color:rgba(17,22,27,.44); font-size:.72rem; }
.drawer-info strong { font-size:.95rem; }
.drawer-equipment { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:24px; }
.drawer-equipment span { padding:10px 13px; border-radius:999px; background:rgba(13,111,143,.1); color:rgba(10,57,72,.82); font-size:.78rem; font-weight:700; }
.drawer-description { margin:0 0 30px; color:var(--muted); line-height:1.9; }
.drawer-cta { min-height:62px; display:flex; align-items:center; justify-content:center; border-radius:999px; color:#fff; background:linear-gradient(135deg,#1497bc,#0d6f8f,#083847); font-weight:800; }

/* =========================
   SUPPORT / FINAL / FOOTER
========================= */
.fleet-support {
  position: relative;
  overflow: hidden;
  padding: 110px 6.2vw;
  background: linear-gradient(180deg,rgba(255,250,242,.52),rgba(247,241,232,.62)), url("../img/fleet/support-bg.png") center / cover no-repeat;
}
.support-heading { max-width:760px; margin:0 auto 64px; text-align:center; }
.support-heading h2 { margin:0; font-size:clamp(2rem,4vw,4rem); line-height:1.15; letter-spacing:-.05em; font-family:"Cormorant Garamond",serif; font-weight:500; }
.support-heading p:last-child { margin:22px auto 0; max-width:560px; color:var(--muted); line-height:1.9; }
.support-grid { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.support-card { padding:34px; border-radius:34px; background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.85); box-shadow:0 18px 48px rgba(20,38,46,.08); backdrop-filter:blur(18px); }
.support-card span { display:inline-flex; margin-bottom:22px; color:rgba(10,57,72,.5); font-size:.72rem; font-weight:800; letter-spacing:.2em; }
.support-card h3 { margin:0 0 14px; font-size:1.25rem; line-height:1.35; letter-spacing:-.03em; }
.support-card p { margin:0; color:var(--muted); font-size:.92rem; line-height:1.9; }

.fleet-final { padding:110px 6.2vw; text-align:center; color:#fff; background:linear-gradient(180deg,rgba(5,14,20,.32),rgba(5,14,20,.78)), url("../img/hero/final-cta.png"), linear-gradient(135deg,#071017,#0b3a4a); background-size:cover; background-position:center; }
.fleet-final .section-kicker { color:rgba(255,255,255,.65); }
.fleet-final h2 { margin:0 0 38px; font-size:clamp(2rem,4vw,4.2rem); line-height:1.18; letter-spacing:-.05em; }
.primary-cta { width:min(330px,100%); min-height:72px; margin:0 auto; display:inline-flex; flex-direction:column; align-items:center; justify-content:center; border-radius:999px; color:#fff; background:linear-gradient(135deg,#1497bc,#0d6f8f,#083847); }
.primary-cta span { font-weight:800; }
.primary-cta small { margin-top:4px; color:rgba(255,255,255,.72); font-size:.68rem; letter-spacing:.18em; }

.site-footer { padding:90px 6.2vw; display:flex; justify-content:space-between; align-items:flex-end; gap:60px; background:linear-gradient(180deg,#08121a 0%,#050b10 100%); }
.footer-brand { max-width:520px; }
.footer-logo { width:120px; height:auto; display:block; }
.footer-copy { margin:28px 0 14px; color:#fff; font-size:clamp(1.3rem,2vw,1.8rem); font-weight:600; }
.footer-description { margin:0; color:rgba(255,255,255,.56); line-height:1.9; }
.footer-nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:26px; }
.footer-nav a { color:rgba(255,255,255,.72); font-size:.95rem; letter-spacing:.08em; }

/* =========================
   RESPONSIVE
========================= */
@media (max-width:1180px) {
  .class-detail-card { grid-template-columns: 1fr 1fr; }
  .class-reserve { grid-column: 1 / -1; grid-template-columns: 1fr auto; }
  .support-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width:640px) {
  .site-header { padding:0 18px; }
  .site-logo img { height:54px; }
  .language-switch,.site-nav,.header-cta { display:none; }
  .menu-toggle { display:inline-flex; position:relative; align-items:center; justify-content:center; width:48px; height:48px; border:1px solid rgba(17,22,27,.12); border-radius:999px; background:rgba(255,255,255,.72); backdrop-filter:blur(18px); cursor:pointer; }
  .menu-toggle span { position:absolute; width:18px; height:1.8px; border-radius:999px; background:#11161b; transition:.28s ease; }
  .menu-toggle span:nth-child(1){ transform:translateY(-6px); }
  .menu-toggle span:nth-child(2){ transform:translateY(0); }
  .menu-toggle span:nth-child(3){ transform:translateY(6px); }
  .menu-toggle.is-open span:nth-child(1){ transform:rotate(45deg); }
  .menu-toggle.is-open span:nth-child(2){ opacity:0; }
  .menu-toggle.is-open span:nth-child(3){ transform:rotate(-45deg); }
  .mobile-menu { position:fixed; top:78px; left:12px; right:12px; z-index:999; display:none; flex-direction:column; gap:20px; min-height:460px; padding:34px 26px 28px; border-radius:34px; background:rgba(255,250,242,.96); backdrop-filter:blur(26px); box-shadow:0 30px 90px rgba(20,38,46,.18); }
  .mobile-menu.is-open { display:flex; }
  .mobile-menu-close { position:absolute; top:18px; right:18px; width:42px; height:42px; border:1px solid rgba(17,22,27,.1); border-radius:999px; background:rgba(255,255,255,.72); font-size:1.35rem; cursor:pointer; }
  .mobile-menu a { color:#11161b; font-size:1.18rem; font-weight:600; }
  .mobile-instagram { color:#e1306c !important; }
  .mobile-lang { display:flex; gap:14px; margin-top:8px; padding-top:14px; border-top:1px solid rgba(17,22,27,.08); }
  .mobile-lang button { border:0; background:transparent; padding:0; color:rgba(17,22,27,.48); font-weight:700; }
  .mobile-lang .is-active { color:#11161b; }
  .mobile-reserve { display:flex; justify-content:center; align-items:center; margin-top:auto; min-height:58px; padding:16px 20px; border-radius:999px; background:linear-gradient(135deg,#1c9bc0,#0b3a4a); color:#fff !important; font-weight:800; }

  .fleet-hero { padding:108px 22px 34px; }
  .fleet-hero h1 { font-size:2.4rem; }
  .fleet-hero p:not(.section-kicker) { font-size:.88rem; }
  .fleet-section { padding:0 16px 72px; }
  .fleet-filter { top:68px; justify-content:flex-start; overflow-x:auto; padding:14px 0 22px; }
  .fleet-filter button { min-width:auto; white-space:nowrap; padding:11px 16px; }
  .fleet-price-notice { margin:0 auto 18px; font-size:.78rem; }
  .class-detail-card { grid-template-columns:1fr; gap:20px; padding:22px; border-radius:28px; }
  .class-main { grid-template-columns:48px 1fr; gap:14px; }
  .class-icon { width:48px; height:48px; }
  .class-copy h2 { font-size:2.05rem; }
  .class-visual { min-height:auto; gap:0; }
  .class-visual img { width:52%; }
  .class-rates { grid-template-columns:1fr 1fr; gap:10px; }
  .class-rates strong { font-size:.98rem; }
  .class-rates small { font-size:.66rem; }
  .class-vehicle-grid { grid-template-columns:1fr; }
  .class-vehicle-card { min-height:96px; }
  .class-reserve { grid-template-columns:1fr; }
  .fleet-bottom-note { border-radius:22px; font-size:.74rem; }
  .car-drawer { top:auto; bottom:0; width:100%; height:86svh; border-radius:34px 34px 0 0; transform:translateY(105%); }
  .car-drawer.is-open { transform:translateY(0); }
  .drawer-content { padding:30px 24px 38px; }
  .drawer-content h2 { font-size:3.2rem; }
  .drawer-info { grid-template-columns:1fr; }
  .support-grid { grid-template-columns:1fr; }
  .fleet-support { padding:84px 24px; }
  .site-footer { padding:56px 24px; flex-direction:column; align-items:center; text-align:center; gap:40px; }
  .footer-logo { margin:0 auto; width:96px; }
  .footer-nav { justify-content:center; gap:18px; }
}
/* PCだけ：クラス内の車種カードをすっきり表示 */
@media (min-width: 901px) {
  .class-vehicle-card {
    min-width: 140px;
    min-height: 140px;
    padding: 18px 14px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;

    text-align: center;
  }

  .class-vehicle-card img {
    width: 112px;
    max-width: 100%;
    height: 58px;
    object-fit: contain;
  }

  .class-vehicle-card strong {
    font-size: 1rem;
    line-height: 1.1;
    white-space: nowrap;
  }

  .class-vehicle-card span {
    display: none;
  }
}
.mobile-menu {
  position: fixed;
  top: 78px;
  left: 14px;
  right: 14px;
  z-index: 999;

  display: none;
  flex-direction: column;
  gap: 0;

  min-height: auto;
  padding: 30px 24px 24px;

  border-radius: 34px;
  background: linear-gradient(180deg,rgba(255,250,242,.98),rgba(255,255,255,.92));
  border: 1px solid rgba(255,255,255,.72);

  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);

  box-shadow:
    0 30px 90px rgba(20,38,46,.18),
    inset 0 1px 0 rgba(255,255,255,.76);
}

.mobile-menu.is-open {
  display: flex;
}

.mobile-menu::before {
  content: "BOSS RENTAL CAR";
  display: block;
  margin: 0 50px 22px 0;
  color: rgba(17,22,27,.42);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .28em;
}

.mobile-menu a:not(.mobile-reserve) {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  border-bottom: 1px solid rgba(17,22,27,.07);

  color: #11161b;
  font-size: 1.05rem;
  font-weight: 650;
}

.mobile-menu a:not(.mobile-reserve)::after {
  content: "→";
  color: rgba(17,22,27,.28);
  font-size: .9rem;
}

.mobile-reserve {
  min-height: 60px;
  margin-top: 22px;
}
.class-reserve a,
.drawer-cta {
  min-height: 62px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;

  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg,#1497bc,#0d6f8f,#083847);

  box-shadow: 0 18px 42px rgba(13,111,143,.24);
}

.class-reserve a span,
.drawer-cta span {
  font-size: .92rem;
  font-weight: 900;
  letter-spacing: .02em;
}

.class-reserve a small,
.drawer-cta small {
  color: rgba(255,255,255,.72);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .18em;
}
.class-reserve a,
.drawer-cta,
.header-cta,
.mobile-reserve {
  position: relative;
  overflow: hidden;
}

.class-reserve a::before,
.drawer-cta::before,
.header-cta::before,
.mobile-reserve::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;

  width: 80%;
  height: 100%;

  background:
    linear-gradient(
      110deg,
      transparent 0%,
      rgba(255,255,255,.24) 45%,
      transparent 72%
    );

  transform: skewX(-18deg);
  transition: left .7s ease;
}

.class-reserve a:hover,
.drawer-cta:hover,
.header-cta:hover,
.mobile-reserve:hover {
  transform: translateY(-3px);

  box-shadow:
    0 32px 68px rgba(13,111,143,.34),
    inset 0 1px 0 rgba(255,255,255,.34);
}

.class-reserve a:hover::before,
.drawer-cta:hover::before,
.header-cta:hover::before,
.mobile-reserve:hover::before {
  left: 130%;
}

.class-reserve a span,
.class-reserve a small,
.drawer-cta span,
.drawer-cta small,
.header-cta span,
.header-cta small,
.mobile-reserve span,
.mobile-reserve small {
  position: relative;
  z-index: 2;
}