:root {
  --navy: #031c31;
  --white: #fff;
  --text: #1f1817;
  --side-width: 100px;
  --footer-height: 70px;
  --heading-height: 88px;
}
* { 
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
/*body {
  margin: 0;
  color: var(--text);
  background: #fff;
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}*/
a { 
  color: inherit;
  text-decoration: none;
}
button { 
  font: inherit;
}
.site-shell { 
  min-height: 100vh;
}
main{
  padding-right: 0px;
}
.main-content {
  width: calc(100% - var(--side-width));
  max-height: 100vh;
  padding-bottom: var(--footer-height);
}
.hero-heading {
  height: var(--heading-height);
  display: flex;
  align-items: center;
  padding: 0 clamp(32px, 6.4vw, 96px);
  background: #fff;
}
.hero-heading h1 {
  margin: 0;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 500;
  letter-spacing: .22em;
}
.business-grid {
  height: calc(100vh - var(--heading-height) - var(--footer-height));
  min-height: 440px;
  display: flex;
  flex-direction: column;
}
.business-card {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  transition: flex-grow .4s ease;
}
.business-grid:hover .business-card {
  flex-grow: .68;
}
.business-grid:hover .business-card:hover {
  flex-grow: 1.64;
}
.business-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .6s ease;
}
.business-card--live img { object-position: 50% 50%; }
.business-card--property img { object-position: 53% 52%; }
.business-card--stay img { object-position: 50% 48%; }
.business-card__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.1) 36%, transparent 55%);
  z-index: 1;
  pointer-events: none;
}
.business-card__brand,
.business-card__category{
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
}
.business-card__brand{
  max-width:400px;
  width: 35%;
}
.business-card__category--right span{
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-size: clamp(12px, 1vw, 16px);
  margin-top: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid #333;
}
.business-card__category--right.white strong,
.business-card__category--right.white small,
.business-card__category--right.white span{
  color: #fff;
}
.business-card__category--right.white span{
  border-bottom: 1px solid #fff;
}
.business-card__brand--left {
  left: clamp(44px, 6.4vw, 96px);
  top: 50%;
  transform: translateY(-50%);
}
.business-card__brand small {
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  margin-bottom: 6px;
  font-size: clamp(12px, 1vw, 16px);
  font-weight: 600;
  letter-spacing: .1em;
}
.business-card__brand small em {
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  margin-left: 6px;
  font-size: .72em;
  font-style: normal;
  letter-spacing: .18em;
}
.business-card__brand strong {
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-size: clamp(43px, 4.4vw, 72px);
  font-weight: 400;
  line-height: .95;
  letter-spacing: .18em;
}
.business-card__category--right {
  right: clamp(42px, 5vw, 78px);
  top: 50%;
  align-items: flex-end;
  transform: translateY(-50%);
}
.business-card__category strong {
  font-family: Arial, sans-serif;
  font-size: clamp(26px, 2.3vw, 38px);
  font-weight: 300;
  letter-spacing: -.03em;
}
.business-card__category small {
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  margin-top: 8px;
  font-size: clamp(12px, 1vw, 16px);
  letter-spacing: .18em;
}
.business-card:hover img { 
  transform: scale(1.02);
}
@media (max-width: 768px) {
  :root { 
    --mobile-header: 64px;
  }
  .main-content { 
    width: 100%;
    max-height: max-content;
   /* padding-top: var(--mobile-header);*/
    padding-bottom: 0;
  }
  .hero-heading { 
    height: 106px;
    padding: 0 24px;
  }
  .hero-heading h1 { 
    font-size: clamp(17px, 4.6vw, 23px);
    line-height: 1.8;
    letter-spacing: .13em;
  }
  .business-grid { 
    height: auto;
    min-height: 0;
    display: block;
  }
  .business-grid:hover .business-card,
  .business-grid:hover .business-card:hover {
    flex-grow: 1;
  }
  .business-card { 
    display: block;
    height: 51vw;
    min-height: 250px;
    max-height: 420px;
    transition: none;
  }

  .business-card img {
    transition: none;
  }

  .business-card:hover img {
    transform: none;
    filter: none;
  }
  .business-card__brand--left { 
    left: 7vw;
  }
  .business-card__brand strong { 
    font-size: clamp(38px, 9vw, 60px);
    letter-spacing: .11em;
  }
  .business-card__category--right { 
    right: 5vw; 
  }
  .business-card__category strong { 
    font-size: clamp(21px, 5vw, 31px);
  }
  .business-card__brand{
    width: 50%;
  }
}
@media (max-width: 560px) {
  .hero-heading { 
    height: 96px;
  }
  .business-card { 
    height: 70vw;
    min-height: 270px;
  }
  .business-card:before {
    content: '';
    position:absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 150px;
    background: linear-gradient(180deg,transparent 0%,rgba(0,0,0,0.75) 100%);
  }
  .business-card__shade {
    background: linear-gradient(90deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.15) 52%, transparent 75%);
  }
  .business-card__brand {
    top: 42%;
  }
  .business-card__brand small { 
    font-size: 11px;
  }
  .business-card__brand strong { 
    font-size: clamp(34px, 11vw, 52px);
  }
  .business-card__category--right { 
    top: auto;
    right: 6vw;
    bottom: 22px;
    transform: none;
    align-items: flex-end;
  }
  .business-card__category strong { 
    font-size: 22px;
  }
  .business-card__category small { 
    font-size: 11px;
  }
  .business-card__category--right strong,
  .business-card__category--right small{
    color: #fff;
  }
  .business-card__category--right span{
    font-size: clamp(12px, 1vw, 16px);
    margin-top: 10px;
    padding-bottom: 5px;
    color: #fff;
    border-bottom: 1px solid #fff;
  }
}