/* 高松宮記念ページ固有のスタイルを記述します。 */
body.site-takamatsu {
  --site-background: url("../images/takamatsu/bg.webp");
  --site-background-sp: url("../images/takamatsu/bg.webp");
  --site-hero: url("../images/takamatsu/hero.webp");
}

.site-takamatsu .__flex {
  align-items: flex-start;
}

.site-takamatsu .side-panel {
  background: var(--takamatsu);
}

.site-takamatsu .side-nav a {
  border: 1px solid var(--takamatsu-base);
}

.site-takamatsu .side-nav a {
  color: var(--takamatsu);
  background: var(--white);
}
.site-takamatsu .side-nav a:hover,
.site-takamatsu .side-nav a:focus-visible {
  color: var(--white);
  background: var(--takamatsu);
}

.site-takamatsu .hero-stage {
  position: relative;
}

.site-takamatsu .hero {
  position: relative;
  aspect-ratio: 16 / 9;
}

.site-takamatsu .hero__image {
  position: absolute;
  inset: 0;
  background-image: var(--site-hero);
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
}

.content-section__heading--event span,
.content-section__heading--dream span {
  color: var(--takamatsu);
}

.site-takamatsu .site-footer {
  background: var(--takamatsu-base);
}
.site-takamatsu .content-section--related {
  background: var(--takamatsu-base);
}

.site-takamatsu .race-card--pickup {
  background: #fff;
  border: 5px solid var(--takamatsu-base);
  box-shadow: 8px 8px 0px var(--takamatsu);
}

@media (max-width: 900px) {
  .site-takamatsu #dream {
    scroll-margin-top: var(--mobile-header-height);
  }

  body.site-takamatsu {
    background-size: cover;
  }

  .site-takamatsu .hero {
    /* hero-sp.webp の実際の比率（750x846）に合わせる。
       デザイン共通の 750/950 のままだと画像の下に余白ができてしまう。 */
    aspect-ratio: 750 / 846;
  }

  /*
   * ピックアップレース表示時、common.cssのスマホ用 .content-shell が
   * margin-top: -15vh を直接指定しており（--hero-overlapは使われていない）、
   * 高松宮記念の絵柄（下端まで選手・艇が描かれている）に食い込みすぎるため、この枠だけ弱める。
   * 実際の見た目を見ながら数値は調整すること。
   */
  .site-takamatsu .content-shell {
    margin-top: -7vh;
  }

  .site-takamatsu .hero__image {
    background-image: url("../images/takamatsu/hero-sp.webp");
    background-position: center top;
    background-size: 100% auto;
  }

  /* .site-takamatsu .content-section {
    padding: clamp(72px, 12vw, 108px) clamp(16px, 4vw, 40px);
  } */

  .site-takamatsu .mobile-header {
    background-color: var(--takamatsu);
  }
  .site-takamatsu .mobile-header .site-logo img {
    width: 200px;
    height: auto;
  }
  .site-takamatsu .menu-button span:not(.visually-hidden) {
    background: var(--white);
  }
  .site-takamatsu .mobile-action-bar {
    background: var(--takamatsu)
  }
  .site-takamatsu .mobile-action-bar .social-links__label {
    color: var(--white);
  }
}