@charset "utf-8";

/* ============================================
   GAKUSEI RUNWAY 総合TOP (2027 Spring)
   デザインデータ: gr2027s_web_総合top.ai
   PC: 1920 x 2547.4(メイン) + 660(フッター)
   SP:  780 x 2168  (メイン) + 660(フッター) ※780 = 390 x 2
   ============================================ */

:root {
  /* デザイン上の 1px を実寸に換算する係数 */
  --u: calc(min(100vw, 1920px) / 1920);
  --fs: max(12px, calc(20 * var(--u)));
  --fs-s: max(10px, calc(18 * var(--u)));
  --font: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  color: #000;
  font-family: var(--font);
  background: #fff;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
}

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

h1,
h2,
p,
dl,
dd,
ul {
  margin: 0;
  padding: 0;
}

/* メインエリア
   ---------------------------------------- */
main {
  background: #fff;
}

.stage {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 1920px;
  aspect-ratio: 1920 / 2547.4;
  background: #fff url(../img/top/globe_pc.png) no-repeat center top / 100% auto;
  overflow: hidden;
}

/* カラフルなピクセルフレーム(ベクター) */
.stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../img/top/frames_pc.svg) no-repeat center top / 100% auto;
  pointer-events: none;
}

.stage > * {
  position: absolute;
  margin: 0;
  line-height: 0;
}

.stage a {
  display: block;
}

/* 開催地リスト : ul/li で意味付け(見た目は従来の div 配置と同一) */
.stage .venues {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
  z-index: 3;
}

.stage .venues > li {
  position: absolute;
  margin: 0;
  line-height: 0;
  pointer-events: auto;
}

/* スクリーンリーダー・検索エンジン向けの見出し(画面には表示しない) */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.footer address {
  font-style: normal;
}

.stage a img {
  transition: transform .3s ease, filter .3s ease, opacity .3s ease;
}

.btn a:hover img,
.btn a:focus-visible img {
  transform: translateY(-3%);
  filter: drop-shadow(0 .4em .6em rgba(0, 0, 0, .18));
}

.audition a:hover img,
.audition a:focus-visible img {
  opacity: .8;
}

/* 各要素の配置(PC) : デザインデータの座標を % に換算 */
.mv_ttl   { left: 23.281%; top: 3.258%;  width: 52.812%; z-index: 2; }
.mv       { left: 17.851%; top: 23.554%; width: 57.474%; z-index: 1; }
.catch    { left: 33.442%; top: 47.634%; width: 32.578%; }
.map      { left: 26.425%; top: 55.512%; width: 46.562%; }
.btn      { z-index: 3; }
.btn.osaka    { left: 24.571%; top: 54.314%; width: 14.688%; }
.btn.yokohama { left: 40.677%; top: 54.258%; width: 14.688%; }
.btn.sendai   { left: 69.488%; top: 52.688%; width: 16.146%; }
.btn.fukuoka  { left: 14.265%; top: 69.100%; width: 14.688%; }
.btn.nagoya   { left: 66.622%; top: 68.011%; width: 14.688%; }
.audition { left: 24.216%; top: 85.212%; width: 51.589%; z-index: 3; }

/* フッター
   ---------------------------------------- */
.footer {
  padding: calc(68 * var(--u)) 16px calc(64 * var(--u));
  color: #fff;
  font-size: var(--fs);
  font-weight: 500;
  text-align: center;
  background: #000;
}

.footer .info dl + dl {
  margin-top: calc(24 * var(--u));
}

.footer .info dt {
  display: inline-block;
  padding: calc(6 * var(--u)) calc(22 * var(--u));
  min-width: calc(86 * var(--u));
  color: #000;
  line-height: 1;
  font-feature-settings: "palt";
  background: #fff;
  border-radius: 100vmax;
}

.footer .info dd {
  margin-top: calc(6 * var(--u));
  line-height: 1.5;
}

.footer .info dd a {
  color: #fff;
}

.footer .info dd a:hover {
  text-decoration: underline;
}

.footer .sns {
  display: flex;
  justify-content: center;
  gap: calc(28 * var(--u));
  margin-top: calc(30 * var(--u));
  list-style: none;
}

.footer .sns li {
  width: calc(86 * var(--u));
}

.footer .sns a {
  display: block;
  border-radius: 50%;
  transition: transform .3s ease, opacity .3s ease;
}

.footer .sns a:hover,
.footer .sns a:focus-visible {
  transform: translateY(-4px);
  opacity: .85;
}

.footer .copyright {
  margin-top: calc(42 * var(--u));
  font-size: var(--fs-s);
  font-weight: 400;
  line-height: 1.5;
}

/* ============================================
   SP (〜900px) : 780px幅のデザインを基準にスケール
   ============================================ */
@media (max-width: 900px) {
  :root {
    --u: calc(100vw / 780);
    --fs: max(11px, calc(20 * var(--u)));
    --fs-s: max(10px, calc(18 * var(--u)));
  }

  .stage {
    max-width: none;
    aspect-ratio: 780 / 2168;
    background-image: url(../img/top/globe_sp.png);
  }

  .stage::before {
    background-image: url(../img/top/frames_sp.svg);
  }

  /* 各要素の配置(SP) */
  .mv_ttl   { left: 2.894%;  top: 2.742%;  width: 93.141%; }
  .mv       { left: 2.758%;  top: 20.121%; width: 93.077%; }
  .catch    { left: 16.303%; top: 39.539%; width: 66.474%; }
  .map      { left: 16.860%; top: 47.945%; width: 70.641%; }
  .btn.osaka    { left: 5.000%;  top: 45.788%; width: 28.462%; }
  .btn.yokohama { left: 66.538%; top: 69.861%; width: 28.462%; }
  .btn.sendai   { left: 34.481%; top: 45.735%; width: 31.282%; }
  .btn.fukuoka  { left: 5.000%;  top: 69.878%; width: 28.462%; }
  .btn.nagoya   { left: 35.554%; top: 69.898%; width: 28.718%; }
  .audition { left: 4.988%;  top: 88.487%; width: 90.064%; }

  .footer {
    padding-left: 12px;
    padding-right: 12px;
  }

  .footer .sns li {
    width: max(36px, calc(86 * var(--u)));
  }
}

/* 動きを抑える設定のユーザー向け */
@media (prefers-reduced-motion: reduce) {
  .stage a img,
  .footer .sns a {
    transition: none;
  }
}