:root {

  --bg: #17171c;
  --bg-deep: #111116;

  --surface: #202027;

  --text: #f6f5f2;
  --muted: #aaa8b0;

  --line: rgba(255, 255, 255, .14);

  --orange: #f59a23;
  --purple: #8c55d8;

  --max-width: 1240px;

}


/* =========================
RESET
========================= */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  font-family:
    "Noto Sans JP",
    sans-serif;

  color: var(--text);

  background:
    var(--bg);

  line-height:
    1.7;
}

body.modal-open {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
}

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


/* =========================
BACKGROUND
========================= */

.site-bg {

  position: fixed;
  inset: 0;

  z-index: -1;

  pointer-events: none;

  background:

    radial-gradient(
      circle at 95% 8%,
      rgba(140, 85, 216, .13),
      transparent 28%
    ),

    radial-gradient(
      circle at 5% 38%,
      rgba(245, 154, 35, .07),
      transparent 24%
    ),

    linear-gradient(
      180deg,
      #18181e,
      #131318
    );

}


/* =========================
HERO
========================= */

.hero {

  position: relative;

  overflow: hidden;

  padding:
    50px
    20px
    42px;

}


.hero__inner {

  position: relative;

  z-index: 2;

  width:
    min(
      100%,
      var(--max-width)
    );

  margin:
    0 auto;

}


/* =========================
UNITE STYLE GRAPHICS
========================= */

/* 紫リング */

.hero::before {

  content: "";

  position: absolute;

  width:
    360px;

  height:
    360px;

  top:
    -145px;

  right:
    -130px;

  border:
    34px solid
    rgba(
      140,
      85,
      216,
      .18
    );

  border-radius:
    50%;

  box-shadow:

    0 0 0 2px
    rgba(
      140,
      85,
      216,
      .07
    ),

    inset 0 0 0 2px
    rgba(
      140,
      85,
      216,
      .07
    );

  pointer-events:
    none;

}


/* オレンジ斜線 */

.hero::after {

  content: "";

  position: absolute;

  width:
    260px;

  height:
    34px;

  top:
    215px;

  left:
    -95px;

  background:
    var(--orange);

  opacity:
    .13;

  transform:
    rotate(-28deg);

  transform-origin:
    center;

  pointer-events:
    none;

}


/* =========================
TITLE
========================= */

.hero__title {

  position:
    relative;

  margin:
    0;

  font-family:
    "Barlow Condensed",
    sans-serif;

  font-size:
    clamp(
      50px,
      12vw,
      105px
    );

  line-height:
    .9;

  font-weight:
    800;

  letter-spacing:
    -.015em;

  text-transform:
    uppercase;

}


/* タイトル下のUNITEカラー */

.hero__title::after {

  content: "";

  display:
    block;

  width:
    90px;

  height:
    5px;

  margin-top:
    24px;

  background:
    linear-gradient(
      90deg,
      var(--orange) 0 52%,
      var(--purple) 52%
    );

}


/* =========================
INTRODUCTION
========================= */

.hero__intro {

  width:
    100%;

  max-width:
    none;

  margin:
    28px
    0
    34px;

  color:
    #d5d3d9;

  font-size:
    15px;

  line-height:
    1.9;

  font-weight:
    500;

}


/* =========================
MAIN VISUAL
========================= */

.hero__visual {

  position:
    relative;

  margin:
    0;

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

  background:
    var(--surface);

}

.hero__visual img {

  width:
    100%;

}


/* =========================
TEAM NAV
========================= */

.team-nav {

  position:
    sticky;

  top:
    0;

  z-index:
    20;

  background:
    rgba(
      20,
      20,
      26,
      .95
    );

  backdrop-filter:
    blur(12px);

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

  border-bottom:
    1px solid
    var(--line);

}


.team-nav__inner {

  width:
    min(
      100%,
      var(--max-width)
    );

  margin:
    0 auto;

  padding:
    0 20px;

  display:
    flex;

  gap:
    26px;

  overflow-x:
    auto;

  scrollbar-width:
    none;

}


.team-nav__inner::-webkit-scrollbar {
  display: none;
}


.team-nav__link {

  position:
    relative;

  flex:
    0 0 auto;

  padding:
    19px
    0
    16px;

  font-family:
    "Barlow Condensed",
    "DotGothic16",
    sans-serif;

  font-size:
    18px;

  font-weight:
    700;

  letter-spacing:
    .035em;

  color:
    #aaa8b0;

  white-space:
    nowrap;

  transition:
    color
    .18s ease;

}


.team-nav__link::after {

  content:
    "";

  position:
    absolute;

  left:
    0;

  bottom:
    0;

  width:
    100%;

  height:
    3px;

  background:
    linear-gradient(
      90deg,
      var(--orange),
      var(--purple)
    );

  transform:
    scaleX(0);

  transform-origin:
    center;

  transition:
    transform
    .18s ease;

}


.team-nav__link:hover,
.team-nav__link:focus-visible,
.team-nav__link.is-active {

  color:
    #fff;

}


.team-nav__link:hover::after,
.team-nav__link:focus-visible::after,
.team-nav__link.is-active::after {

  transform:
    scaleX(1);

}


/* =========================
MAIN
========================= */

.main-content {

  padding:
    0
    20px
    90px;

}


/* =========================
TEAM SECTION
========================= */

.team-section {

  width:
    min(
      100%,
      var(--max-width)
    );

  margin:
    0 auto;

  padding:
    78px
    0
    58px;

  scroll-margin-top:
    64px;

}


.team-section +
.team-section {

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

}


.team-section__head {

  margin-bottom:
    28px;

}


.team-section__title {

  margin:
    0;

  font-family:
    "Barlow Condensed",
    "Noto Sans JP",
    sans-serif;

  font-size:
    clamp(
      45px,
      10vw,
      80px
    );

  line-height:
    .98;

  font-weight:
    800;

  letter-spacing:
    -.01em;

  text-transform:
    uppercase;

}


/* TEAM見出し下ライン */

.team-section__line {

  width:
    100%;

  height:
    2px;

  margin-top:
    18px;

  background:

    linear-gradient(
      90deg,

      var(--orange)
      0,

      var(--orange)
      12%,

      var(--purple)
      12%,

      var(--purple)
      26%,

      rgba(
        255,
        255,
        255,
        .13
      )
      26%

    );

}


/* =========================
ART GRID
========================= */

.art-grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    30px
    12px;

}


/* =========================
ART CARD
========================= */

.art-card {

  display:
    block;

  width:
    100%;

  padding:
    0;

  border:
    0;

  background:
    transparent;

  color:
    var(--text);

  text-align:
    left;

  cursor:
    pointer;

}


.art-card__image {

  overflow:
    hidden;

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

  background:
    var(--surface);

  transition:
    border-color
    .2s ease;

}


.art-card__image img {

  width:
    100%;

  aspect-ratio:
    10 / 13;

  object-fit:
    cover;

  transition:
    transform
    .22s ease;

}


.art-card:hover
.art-card__image img,

.art-card:focus-visible
.art-card__image img {

  transform:
    scale(1.015);

}


.art-card:hover
.art-card__image,

.art-card:focus-visible
.art-card__image {

  border-color:
    rgba(
      245,
      154,
      35,
      .8
    );

}


/* =========================
CARD TEXT
========================= */

.art-card__meta {

  padding:
    11px
    0
    0;

}


.art-card__name {

  margin:
    0;

  font-family:
    "Barlow Condensed",
    "Noto Sans JP",
    sans-serif;

  font-size:
    22px;

  line-height:
    1.15;

  font-weight:
    700;

}


.art-card__artist {

  margin:
    5px
    0
    0;

  color:
    var(--muted);

  font-size:
    14px;

  line-height:
    1.5;

  font-weight:
    500;

}


/* =========================
FOOTER
========================= */

.site-footer {

  padding:
    56px
    20px
    34px;

  border-top:
    1px solid
    var(--line);

  background:
    #111116;

}


.site-footer__inner {

  width:
    min(
      100%,
      var(--max-width)
    );

  margin:
    0 auto;

}


.footer-notice {

  width:
    100%;

  max-width:
    none;

}


.footer-notice h2 {
  margin:
    0
    0
    18px;

  font-family:
    "Barlow Condensed",
    "Noto Sans JP",
    sans-serif;

  font-size:
    20px;

  font-weight:
    700;

  letter-spacing:
    .04em;

  color:
    var(--orange);
}


.footer-notice p {

  width:
    100%;

  margin:
    0;

  color:
    #96939d;

  font-size:
    12px;

  line-height:
    1.9;

}


.footer-notice p + p {

  margin-top:
    12px;

}


.footer-credit {

  margin:
    52px
    0
    0;

  color:
    #73717a;

  font-family:
    "Barlow Condensed",
    sans-serif;

  font-size:
    13px;

  letter-spacing:
    .05em;

}


/* =========================
MODAL
========================= */

.modal {

  position:
    fixed;

  inset:
    0;

  z-index:
    100;

  display:
    none;

}


.modal.is-open {
  display: block;
}


.modal__backdrop {

  position:
    absolute;

  inset:
    0;

  background:
    rgba(
      5,
      5,
      9,
      .9
    );

}


.modal__content {

  position:
    relative;

  z-index:
    1;

  width:
    min(
      94vw,
      960px
    );

  max-height:
    92vh;

  margin:
    4vh auto;

  overflow:
    hidden;

  background:
    #111116;

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

}


.modal__close {

  position:
    absolute;

  top:
    0;

  right:
    0;

  z-index:
    2;

  width:
    50px;

  height:
    50px;

  border:
    0;

  background:
    #111116;

  color:
    #fff;

  font-size:
    30px;

  font-weight:
    300;

  cursor:
    pointer;

}


.modal__image-wrap {

  display:
    flex;

  justify-content:
    center;

  align-items:
    center;

  padding:
    16px;

  background:
    #09090d;

}


.modal__image-wrap img {

  max-height:
    72vh;

  width:
    auto;

  max-width:
    100%;

}


.modal__meta {

  padding:
    20px
    20px
    24px;

  border-top:
    1px solid
    var(--line);

}


/* モーダル チーム名 */

.modal__team {

  margin:
    0
    0
    6px;

  font-family:
    "Barlow Condensed",
    "Noto Sans JP",
    sans-serif;

  font-size:
    17px;

  font-weight:
    700;

  letter-spacing:
    .03em;

  color:
    var(--orange);

}


/* モーダル 選手名 */

.modal__name {

  margin:
    0;

  font-family:
    "Barlow Condensed",
    "Noto Sans JP",
    sans-serif;

  font-size:
    34px;

  line-height:
    1.1;

  font-weight:
    700;

}


/* モーダル 作者名 */

.modal__artist {

  margin:
    8px
    0
    0;

  color:
    var(--muted);

  font-size:
    15px;

  line-height:
    1.5;

  font-weight:
    500;

}


/* =========================
TABLET
========================= */

@media (min-width: 640px) {

  .hero {

    padding:
      72px
      28px
      55px;

  }


  .main-content,
  .site-footer {

    padding-left:
      28px;

    padding-right:
      28px;

  }


  .team-nav__inner {

    padding-left:
      28px;

    padding-right:
      28px;

  }


  .art-grid {

    gap:
      36px
      20px;

  }


  .art-card__name {

    font-size:
      23px;

  }


  .art-card__artist {

    font-size:
      15px;

  }

}


/* =========================
PC
========================= */

@media (min-width: 900px) {

  .hero {

    padding-top:
      90px;

  }


  /* 紫リング大型化 */

  .hero::before {

    width:
      520px;

    height:
      520px;

    top:
      -235px;

    right:
      -170px;

    border-width:
      48px;

  }


  /* オレンジライン大型化 */

  .hero::after {

    width:
      410px;

    height:
      48px;

    top:
      275px;

    left:
      -145px;

    opacity:
      .11;

  }


  .hero__visual {

    margin-top:
      45px;

  }


  .team-nav__link {

    font-size:
      19px;

  }


  .art-grid {

    grid-template-columns:
      repeat(
        4,
        minmax(
          0,
          1fr
        )
      );

    gap:
      42px
      22px;

  }


  .art-card__name {

    font-size:
      24px;

  }


  .art-card__artist {

    font-size:
      15px;

  }


  .modal__content {

    display:
      grid;

    grid-template-columns:
      minmax(
        0,
        1fr
      )
      300px;

  }


  .modal__meta {

    padding:
      30px
      26px;

    border-top:
      0;

    border-left:
      1px solid
      var(--line);

    display:
      flex;

    flex-direction:
      column;

    justify-content:
      flex-end;

  }


  .modal__team {

    font-size:
      18px;

  }


  .modal__name {

    font-size:
      38px;

  }


  .modal__artist {

    font-size:
      16px;

  }

}/* =========================
IMAGE PROTECTION
========================= */

.art-card__image img,
.hero__visual img,
.modal__image-wrap img {

  /* iPhone / iPad の長押しメニューを抑制 */
  -webkit-touch-callout: none;

  /* テキスト・画像選択を抑制 */
  -webkit-user-select: none;
  user-select: none;

  /* Safariの画像ドラッグを抑制 */
  -webkit-user-drag: none;

  /* 画像自体ではなく親要素でタップを受ける */
  pointer-events: none;
}