body {
  --bs-primary: #e04307;
  --bs-primary-rgb: 224, 67, 7;

  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}
body a {
  transition: all .25s ease;
}

/* Header */
.app-header {
  position: relative;
}
.app-header .app-header__logo {
  width: 100%;
  max-width: 280px;
  position: absolute;
  left: 50%;
  top: 55%;
  transform: translate(-50%, -50%);
  z-index: 100;
}
  @media (min-width: 576px) {
    .app-header .app-header__logo {
      top: 50%;
    }
  }
  @media (min-width: 768px) {
    .app-header .app-header__logo {
      max-width: 580px;
    }
  }
  @media (min-width: 1200px) {
    .app-header .app-header__logo {
      max-width: 880px;
    }
  }
.app-header .app-header__logo img {
  width: 100%;
}
.app-header .app-header__bkgd {
  position: relative;
}
.app-header .app-header__bkgd:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .6);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
}
.app-header .app-header__bkgd .slider .slide img {
  width: 100%;
}
.app-header .app-header__link {
  display: block;
  padding: .75rem 4rem .75rem 2rem;
  background: var(--bs-primary);
  color: #fff;
  font-size: 1rem;
  font-style: italic;
  text-decoration: none;
  position: absolute;
  top: 1.25rem;
  right: 0;
  z-index: 1000;
}
  @media (min-width: 768px) {
    .app-header .app-header__link {
      padding: .75rem 12rem .75rem 2rem;
      font-size: 1.125rem;
    }
  }
  @media (min-width: 1200px) {
    .app-header .app-header__link {
      top: 3.25rem;
    }
  }
.app-header .app-header__link:hover {
  padding-right: 5rem;
}
  @media (min-width: 768px) {
    .app-header .app-header__link:hover {
      padding-right: 13rem;
    }
  }

/* Main */
.app-main {
  background: #000;
  color: #868686;
  font-size: 1rem;
  font-weight: 900;
  text-align: center;
  line-height: 1.6;
}
  @media (min-width: 768px) {
    .app-main {
      font-size: 1.125rem;
    }
  }
.app-main .container {
  max-width: 910px;
}
.app-main .has-divider {
  position: relative;
}
.app-main .has-divider:after {
  content: "";
  display: block;
  width: 100%;
  max-width: 70%;
  height: 4px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 1) 80%, rgba(255, 255, 255, 0) 100%);
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
  @media (min-width: 768px) {
    .app-main .has-divider:after {
      height: 7px;
    }
  }

.app-main .intro {
  padding: 5rem 0;
}
  @media (min-width: 768px) {
    .app-main .intro {
      padding: 8rem 0;
    }
  }
.app-main .intro .container *:last-child {
  margin-bottom: 0;
}
.app-main .intro .intro__headline {
  margin: 0 0 2rem 0;
  color: #fff;
  font-size: 2rem;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.1;
}
  @media (min-width: 768px) {
    .app-main .intro .intro__headline {
      margin-bottom: 2.75rem;
      font-size: 3.25rem;
    }
  }

.app-main .brand {
  padding: 5rem 0;
}
  @media (min-width: 768px) {
    .app-main .brand {
      padding: 8rem 0;
    }
  }
.app-main .brand .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.app-main .brand *:last-child {
  margin-bottom: 0;
}

.app-main .brand .brand__logo {
  display: block;
  width: 100%;
  margin-bottom: 3rem;
  transition: all .2s ease;
}
  @media (min-width: 768px) {
    .app-main .brand .brand__logo {
      margin-bottom: 5rem;
    }
  }
.app-main .brand a.brand__logo:hover {
  transform: scale(1.05);
}
.app-main .brand .brand__logo img {
  width: 100%;
}

.app-main .brand.brand--atarashi .brand__logo {
  max-width: 250px;
}
  @media (min-width: 768px) {
    .app-main .brand.brand--atarashi .brand__logo {
      max-width: 536px;
    }
  }

.app-main .brand.brand--wushiland-boba .brand__logo {
  max-width: 180px;
}
  @media (min-width: 768px) {
    .app-main .brand.brand--wushiland-boba .brand__logo {
      max-width: 273px;
    }
  }

.app-main .brand.brand--sushi-fuku .brand__logo {
  max-width: 200px;
}
  @media (min-width: 768px) {
    .app-main .brand.brand--sushi-fuku .brand__logo {
      max-width: 300px;
    }
  }

.app-main .brand.brand--fuku-tea .brand__logo {
  max-width: 200px;
}
  @media (min-width: 768px) {
    .app-main .brand.brand--fuku-tea .brand__logo {
      max-width: 300px;
    }
  }

.app-main .brand.brand--ktaco .brand__logo {
  max-width: 200px;
}
  @media (min-width: 768px) {
    .app-main .brand.brand--ktaco .brand__logo {
      max-width: 300px;
    }
  }

/* Footer */
.app-footer {
  padding: 5rem 0;
  background: #232323;
  color: #fff;
  font-size: .9rem;
}
  @media (min-width: 768px) {
    .app-footer {
      padding: 7rem 0;
      font-size: 1.125rem;
    }
  }
.app-footer a {
  color: #fff;
  text-decoration: none;
}
.app-footer a:hover {
  color: var(--bs-primary);
}
.app-footer .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
  @media (min-width: 768px) {
    .app-footer .container {
      flex-direction: row;
      justify-content: space-between;
    }
  }
.app-footer .app-footer__info {
  order: 2;
}
  @media (min-width: 768px) {
    .app-footer .app-footer__info {
      order: 1;
    }
  }
.app-footer .app-footer__logo {
  order: 1;
  width: 183px;
  margin-bottom: 3rem;
}
  @media (min-width: 768px) {
    .app-footer .app-footer__logo {
      order: 2;
      margin-bottom: 0;
    }
  }
.app-footer .app-footer__logo img {
  max-width: 100%;
}