@import url(common.css);

/* ========== hero ========== */

.hero {
  background: url(../img/fv/bg.jpg) center/cover;
  position: relative;
  padding: 120px 13.54vw 3.81vw 13.54vw;

  .hero-inner {
    aspect-ratio: 965 / 750;
    position: relative;
    width: calc(965 / 1366 * 100vw);
  }

  .hero-logo {
    position: absolute;
    width: calc(288 / 1366 * 100vw);
    height: auto;
    top: 0;
    right: 2%;
    z-index: 2;
  }

  .hero-players {
    position: absolute;
    width: calc(771 / 1366 * 100vw);
    height: auto;
    top: -5%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    /* max-width: 926px; */
  }

  .hero-info {
    position: absolute;
    width: calc(517 / 1366 * 100vw);
    height: auto;
    bottom: 7%;
    left: 38%;
    transform: translateX(-50%);
    z-index: 4;
  }

  img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  /* Animation */
  .hero-inner.anime {
    .hero-logo {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.8s, transform 0.8s;
    }

    .hero-players,
    .hero-info {
      opacity: 0;
      transform: translate(-50%, 20px);
      transition: opacity 0.8s, transform 0.8s;
    }

    &.show {
      .hero-logo {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0s;
      }

      .hero-players {
        opacity: 1;
        transform: translate(-50%, 0);
        transition-delay: 0.3s;
      }

      .hero-info {
        opacity: 1;
        transform: translate(-50%, 0);
        transition-delay: 0.6s;
      }
    }
  }
}

/* ========== news ========== */

.news-sec {
  background: url(../img/bg/1.png) center top/cover no-repeat;
  /* background-color: #000000; */
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: max(8vw, 60px);
  gap: max(8vw, 60px);
  position: relative;

  &::before {
    position: absolute;
    inset: 0;
    content: "";
  }

  >* {
    isolation: isolate;
  }

  h2 {
    width: max(14vw, 120px);

    &::before {
      background-image: url(../img/symbols/logo.webp);
    }

    img {
      width: 100%;
    }
  }
}

.news,
.schedule {
  width: min(100%, 800px);
  margin-inline: auto;

  h3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-bottom: 1px solid;
    padding-bottom: 1em;
    margin-bottom: 2em;

    .en {
      font: 300 max(5vw, 3em) var(--en-ff);
      text-transform: uppercase;
      line-height: 1;
    }
  }

  ul {
    height: max(16vw, 10em);
    display: flex;
    flex-direction: column;
    gap: 1em;
    overflow-y: scroll;
    padding-inline: 2vw;
  }

  li {
    display: flex;
    gap: 1em;

    p {
      flex: 1;
    }
  }

  time {
    padding: 0.2em 0.4em;
    background-color: #000;
    font-family: "DIN", sans-serif;
  }

  .coming-soon {
    text-transform: uppercase;
    text-align: center;
    font-size: max(1.8vw, 1.4em);
  }
}

.schedule-sec {
  background: linear-gradient(180deg, transparent 0%, #000 20%, #000 100%);
  padding: 200px 0;
  position: relative;
  margin-top: -150px;
  margin-bottom: -5px;
  color: #fff;
  /* padding-block: max(8vw, 60px); */
}

/* ========== players ========== */
.players-sec {
  width: 100%;
  background-color: #000000;
  padding: 0;

  .players-inner {
    background: url(../img/bg/2.png) center bottom/contain no-repeat;
    padding-bottom: 15vw;
  }

  .players-block {
    width: 93.7%;
    margin-bottom: 75px;
    display: block;

    &.left {
      margin-left: auto;
    }

    &.anime {
      transition: clip-path 1.5s ease;

      &.ritght {
        clip-path: inset(0 100% 0 0);
      }

      &.left {
        clip-path: inset(0 0 0 100%);
      }

      &.show {
        clip-path: inset(0 0 0 0);
      }
    }
  }

  .players-title {
    max-width: 897px;
    width: 65.67%;
    margin-bottom: 100px;
    margin-inline: auto;

    &.anime {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 1.0s, transform 1.0s;

      &.show {
        opacity: 1;
        transform: translateY(0);
      }
    }
  }

  img,
  source {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}




/* ========== team(boys, girls) ========== */
.team-sec {
  display: flex;
  justify-content: center;
  padding: 0;
  padding: 55px 40;

  .boys,
  .girls {
    width: 50%;
  }

  .boys {
    background: url(../img/team/boys/thumbnail-bg.png) center / cover;
  }

  .girls {
    background: url(../img/team/girls/thumbnail-bg.png) center / cover;
  }

  .team-card {
    padding: 4% 3%;

    .card-thumbnail {
      width: 100%;

      img {
        width: 100%;
      }
    }

    .card-info {
      padding: 0 10px;
      margin-top: -15px;

      .card-title {
        color: #fff;
        width: 50%;

        span {
          display: block;
          margin-top: 10px;
        }
      }
    }

    .more {
      color: #fff;
      background-color: #000;
      text-transform: uppercase;
      display: flex;
      padding: 0.6em 1em;
      gap: 1em;
      width: fit-content;
      align-items: center;
      position: relative;
      margin-top: 15px;

      &::before,
      &::after {
        height: 1px;
        scale: 0 1;
        transition: scale 0.2s;
      }

      &::before {
        inset: 0 0 auto;
        transform-origin: right;
      }

      &::after {
        inset: auto 0 0;
        transition-delay: 0.3s;
        transform-origin: left;
      }

      &:hover {

        &::before,
        &::after,
        .line::before,
        .line::after {
          scale: 1;
        }

        &::before {
          transform-origin: left;
        }

        &::after {
          transform-origin: right;
        }

        .line::before {
          transform-origin: top;
        }

        .line::after {
          transform-origin: bottom;
        }
      }
    }

    .arrow {
      width: 2em;
      height: 0.5em;
      position: relative;

      &::before,
      &::after {
        position: absolute;
        content: "";
        inset: auto 0 0;
        height: 1px;
        background-color: #fff;
      }

      &::before {
        inset: auto 0 0;
      }

      &::after {
        inset: auto 0 0 auto;
        width: 0.8em;
        transform-origin: right bottom;
        rotate: 45deg;
      }
    }

    .more::before,
    .more::after,
    .line::before,
    .line::after {
      position: absolute;
      content: "";
      pointer-events: none;
      background-color: #fff;
      transition-timing-function: linear;
    }

    .line {

      &::before,
      &::after {
        width: 1px;
        scale: 1 0;
        transition: scale 0.1s;
      }

      &::before {
        inset: 0 0 0 auto;
        transition-delay: 0.2s;
        transform-origin: bottom;
      }

      &::after {
        inset: 0 auto 0 0;
        transition-delay: 0.5s;
        transform-origin: top;
      }
    }

    /* Animation */
    &.anime {
      .card-thumbnail {
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 1.0s ease, transform 1.0s ease;
      }

      .card-info {
        clip-path: inset(0 100% 0 0);
        transition: clip-path 1.0s ease;
        transition-delay: 0.5s;
      }

      &.show {
        .card-thumbnail {
          opacity: 1;
          transform: translateY(0);
        }

        .card-info {
          clip-path: inset(0 0 0 0);
        }
      }
    }
  }
}

/* ========== result ========== */
.result {
  background: url(../img/bg/3.png) center/cover no-repeat;

  h2.title {
    width: max(10.1vw, 90px);
    margin-inline: auto;

    img {
      width: 100%;
    }
  }

  /* Animation */
  .title.anime,
  .result-block-title.anime,
  .result-item.anime {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.0s ease, transform 1.0s ease;

    &.show {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .result-block-wrp {
    .result-block {
      .result-block-title {
        text-align: center;
        padding-bottom: 15px;
        border-bottom: 4px solid #000;

        img {
          width: max(25vw, 170px);
        }
      }
    }

    .result-block+.result-block {
      margin-top: 130px;
    }

    .result-item-wrp {
      display: flex;
      gap: max(5vw, 30px);
      margin-top: 60px;

      .result-item {
        .result-item-img {
          aspect-ratio: 16 / 9;

          img {
            width: 100%;
            object-fit: cover;
          }
        }

        .result-item-caption {
          text-align: center;
          margin-top: 1em;
          font-weight: 500;
          font-size: max(1.6vw, 1.1em);

          .result-item-label {
            text-transform: uppercase;
            display: block;
            font-size: 1rem;
          }
        }
      }
    }
  }
}

/* ========== access ========== */

.access {
  background: url(../img/bg/4.jpg) center/contain repeat;
  padding-block: max(8vw, 60px);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: max(5vw, 50px);

  .deco {
    position: sticky;
    overflow: hidden;
    top: 0;
    margin-block: -5vw auto;
    font: 300 max(10vw, 3em) / 1 var(--en-ff);
    width: 0.7em;
    writing-mode: vertical-lr;

    span {
      display: block;
      margin-left: -0.25em;
      color: #fff;
      text-transform: uppercase;
    }

    ~* {
      isolation: isolate;
    }
  }

  h2.title {
    width: max(10.61vw, 95px);

    img {
      width: 100%;
    }
  }

  .name {
    display: flex;
    flex-direction: column;
    width: min(100%, 900px);
    background: url(../img/bg/title-bg.jpg) center / cover;

    h3 {
      font: 300 max(3vw, 1.8em) var(--en-ff);
      line-height: 1;
      text-transform: uppercase;
      text-align: center;
      border-bottom: 6px solid #ffffff;
    }
  }

  .tie {
    font-weight: 500;
    padding: 1rem 1rem 0.5rem;
    color: #fff;
    font-size: max(2vw, 1em);

    p {
      text-align: center;
    }
  }

  .date {
    font-size: 1rem;
    display: flex;
    gap: 0.2em;
    align-items: baseline;
    justify-content: center;
    font-family: "Noto Sans JP", serif;
    padding-bottom: 0.5rem;

    .num {
      font-size: max(2.6vw, 1.96em);
    }
  }

  .map {
    display: flex;
    width: min(100%, 900px);
    align-items: center;

    ol {
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      gap: 1.6em 0;
      counter-reset: num 0;
    }

    li {
      counter-increment: num 1;
      width: 50%;
      display: flex;
      flex-direction: column;
      color: #002F7B;
      font-weight: 500;
      font-size: 1.2em;
      position: relative;

      &::before {
        content: "VENUE." counter(num);
        font-family: "Montserrat", "Noto Sans JP", serif;
        font: 300 1em/1.3 var(--en-ff);
        color: #fff;
        transform: skew(-10deg);
        padding: 0 0.4em;
        margin-bottom: 0.2em;
        position: relative;
        z-index: 1;
      }

      &::after {
        content: "";
        position: absolute;
        inset: 0 auto auto 0;
        transform: skew(-10deg);
        background-color: #002F7B;
        width: 3em;
        height: 1.2em;
        transform: skew(-10deg);
      }
    }

    figure {
      width: 60%;
      margin-right: -10vw;
      position: relative;

      @media (width < 1160px) {
        margin-right: -5vw;
        width: 55%;
      }

      img {
        width: 100%;
      }
    }

    figcaption {
      position: absolute;
      inset: auto 0.2em 0.4em auto;
      color: #002F7B;
      transform: skew(-10deg);
      font: 300 clamp(60px, 6vw, 84px) var(--en-ff);
      text-transform: uppercase;
    }
  }

  .maps {
    width: min(100%, 1160px);
    display: grid;
    grid-template-columns: repeat(auto-fit, max(46%, 336px));
    justify-content: center;
    gap: max(5vw, 36px);
    counter-reset: num 0;

    @media (width > 1500px) {
      width: 86%;
    }

    li {
      counter-increment: num 1;
      position: relative;

      h3 {
        color: #002F7B;
        font-weight: 500;
        font-size: max(2vw, 1.6em);
        padding-block: 0.2em;
      }

      &::before {
        display: inline-block;
        content: "VENUE." counter(num);
        font: 300 1.5em/1.3 var(--en-ff);
        color: #fff;
        transform: skew(-10deg);
        padding: 0 0.4em;
        position: relative;
        z-index: 1;
      }

      &::after {
        content: "";
        position: absolute;
        inset: 0 auto auto 0;
        transform: skew(-10deg);
        background-color: #002F7B;
        width: 4.3em;
        height: 1.7em;
        transform: skew(-10deg);
      }
    }

    dl {
      margin-bottom: 1em;
      font-size: clamp(13px, 1.1vw, 20px);
    }

    dt {
      font-weight: normal;
      width: 3.4em;
      display: flex;
      justify-content: space-between;
      gap: 0.2em;

      &::after {
        content: "：";
      }
    }

    dd {
      flex: 1;

      span {
        display: inline-block;
      }
    }

    .row {
      display: flex;
    }

    iframe {
      width: 100%;
      height: auto;
      aspect-ratio: 16/9;
      border: 2px solid #000 !important;
    }
  }

  /* Animation */
  .title.anime,
  .name.anime,
  .map.anime,
  li.anime {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.0s ease, transform 1.0s ease;

    &.show {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* ========== footer area ========== */
footer {
  padding: 0;
  position: relative;

  .footer-bg {
    line-height: 0;

    img {
      width: 100%;
      height: auto;
    }
  }

  .footer-pic {
    position: absolute;
    line-height: 0;

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

  .footer-pic.shinning::before {
    background-color: #fff;
    mix-blend-mode: hard-light;
  }


  .footer-pic.anime {
    opacity: 0;
    transition: opacity 0.5s ease;
  }

  .footer-pic.anime.show {
    opacity: 1;
  }

  .footer-pic-01 {
    top: 10%;
    right: 31%;
    width: 10.18%;
    transition-delay: 0.1s;
  }

  .footer-pic-01::before {
    animation-delay: 0.1s;
  }

  .footer-pic-02 {
    top: 16%;
    left: 34%;
    width: 10.61%;
    transition-delay: 0.2s;
  }

  .footer-pic-02::before {
    animation-delay: 0.2s;
  }

  .footer-pic-03 {
    top: 16%;
    right: 0;
    width: 27.45%;
    transition-delay: 0.3s;
  }

  .footer-pic-03::before {
    animation-delay: 0.3s;
  }

  .footer-pic-04 {
    top: 20%;
    left: 12%;
    width: 19.47%;
    transition-delay: 0.4s;
  }

  .footer-pic-04::before {
    animation-delay: 0.4s;
  }

  .footer-pic-05 {
    top: 20%;
    right: 39%;
    width: 7.76%;
    transition-delay: 0.5s;
  }

  .footer-pic-05::before {
    animation-delay: 0.5s;
  }

  .footer-pic-06 {
    top: 36%;
    left: 6%;
    width: 10.91%;
    transition-delay: 0.6s;
  }

  .footer-pic-06::before {
    animation-delay: 0.6s;
  }

  .footer-pic-07 {
    top: 41%;
    left: 19%;
    width: 8.49%;
    transition-delay: 0.7s;
  }

  .footer-pic-07::before {
    animation-delay: 0.7s;
  }

  .footer-pic-08 {
    top: 44%;
    right: 19%;
    width: 15.01%;
    transition-delay: 0.8s;
  }

  .footer-pic-08::before {
    animation-delay: 0.8s;
  }

  .footer-pic-09 {
    top: 53%;
    right: 4%;
    width: 10.76%;
    transition-delay: 0.9s;
  }

  .footer-pic-09::before {
    animation-delay: 0.9s;
  }

  .footer-pic-10 {
    bottom: 25%;
    left: 0;
    width: 26.35%;
    transition-delay: 1.0s;
  }

  .footer-pic-10::before {
    animation-delay: 1.0s;
  }

  .footer-pic-11 {
    bottom: 23%;
    right: 10%;
    width: 19.33%;
    transition-delay: 1.1s;
  }

  .footer-pic-11::before {
    animation-delay: 1.1s;
  }

  .footer-pic-12 {
    bottom: 24%;
    left: 40%;
    width: 9%;
    transition-delay: 1.2s;
  }

  .footer-pic-12::before {
    animation-delay: 1.2s;
  }

  .footer-pic-13 {
    bottom: 20%;
    right: 34%;
    width: 8.57%;
    transition-delay: 1.3s;
  }

  .footer-pic-13::before {
    animation-delay: 1.3s;
  }

  .footer-pic-14 {
    bottom: 17%;
    left: 28%;
    width: 10.61%;
    transition-delay: 1.4s;
  }

  .footer-pic-14::before {
    animation-delay: 1.4s;
  }

  .footer-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 23.06%;
    transform: translate(-50%, -50%);

    img {
      width: 100%;
      height: auto;
      object-fit: cover;
    }
  }

  .footer-info {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: fit-content;
    text-align: center;

    p {
      text-align: center;
      font: 300 max(5vw, 3em) var(--en-ff);
      line-height: 1;
    }

    small {
      font-size: 0.4em;
      margin-top: 0.2em;
    }
  }
}

/* ========== responsive ========== */
@media (width > 1023px) {
  .pc_none {
    display: none;
  }
}

@media (width < 1024px) {
  .hero {
    background: url(../img/fv/bg_sp.png) center / cover;
    overflow: hidden;
    padding: 150px 0 30px;

    .hero-inner {
      aspect-ratio: 750 / 1333;
      margin-inline: auto;
    }

    .hero-logo {
      width: calc(635/750 * 100vw);
      right: 48%;
      transform: translateX(50%);
    }

    .hero-players {
      width: calc(859 / 750 * 100vw);
      left: 53%;
      transform: translateX(-45%);
      top: 10%;
    }

    .hero-info {
      width: calc(517 / 750 * 100vw);
      bottom: 7%;
      left: 43%;
    }

    .hero-inner.anime.show .hero-logo {
      transform: translate(50%, 0);
    }
  }

  .news-sec {
    background-size: 300% 100%;
    background-position: center -20px;
  }

  .players-sec {
    .players-block {
      margin-bottom: 30px;
    }

    .players-title {
      width: 75%;
      margin-bottom: 30px;
    }
  }

  .team-sec {
    flex-direction: column;

    .boys,
    .girls {
      width: 100%;
    }

    .team-card {
      padding: 7% 9% 15%;
    }
  }

  .result {
    .result-block-wrp {
      .result-block {
        .result-item-wrp {
          flex-direction: column;
          margin-top: 30px;
        }
      }

      .result-block+.result-block {
        margin-top: 60px;
      }
    }
  }

  footer {
    height: 246.67vw;
    background-image: url(../img/bg/5.png);
    background-size: cover;
    background-position: center;
  }

  footer .footer-info {
    width: 100%;
  }
  footer .footer-info p {
    font-size: 2rem;
  }

  .footer-bg {
    display: none;
  }

  footer .sp_none {
      display: none;
    } 

    footer .pc_none {
      display: block;
    } 
    .pc_none figure {
      position: absolute;
      width: 100%;
      z-index: 2;
    }
    .pc_none figure img {
      width: 100%;
      display: block;
    }
    .pc_none figure:nth-child(1) {
      top: 70px;
    }
    .pc_none figure:nth-child(2) {
      bottom: 140px;
    }

  footer .footer-logo {
    width: calc(300 / 740 * 100vw);
    top: 48%;
  }
}

@media (width < 1024px) {}

@media (width < 768px) {

  .schedule-sec {
    padding: 200px 8vw;
    /* padding-block: max(8vw, 60px); */
  }

  .news,
  .schedule {
    ul {
      padding-inline: 0;
    }

    li {
      flex-direction: column;
      align-items: start;
      gap: 0.3em;
    }

    time {
      padding: 0 0.4em;
      font-size: 13px;
    }
  }

  .boys,
  .girls {
    flex-direction: column;
    padding: 70px 5vw 50px;

    .body,
    .inner {
      display: contents;
    }

    h2 {
      width: 80%;
    }

    .more {
      order: 1;
    }

    .players {
      inset: auto auto 137.4px 8%;
      width: 74%;
    }
  }

  .ball {
    margin: -30px -5vw 50px auto;
    width: 56%;
  }

  .boys {
    background: url(../img/bg/boys.jpg) center/cover;
  }

  .girls {
    background: url(../img/bg/girls.jpg) center/cover;

    h2 {
      align-self: end;
    }

    .ball {
      order: 0;
      margin-inline: -5vw auto;
    }

    .players {
      left: 16%;
      width: 70%;
    }
  }

  .result {
    &:has(.coming-soon) .gradient~* {
      display: none;
    }

    .sp {
      display: block;
    }

    .bg {
      overflow: hidden;

      .gradient {
        scale: 1.5 -1.5;
        transform-origin: left;
      }

      >img {
        scale: 1.7;
        transform-origin: bottom;
      }
    }

    .body {
      flex-direction: column;
    }

    .label {
      font-size: 0.9rem;
    }
  }

  .access {
    overflow: hidden;

    .deco {
      display: none;
    }

    h2 {
      margin-top: 0;
    }

    .date {
      font-size: 12px;
    }

    .map {
      flex-direction: column;
      gap: 2em;

      li {
        font-size: 1em;

        &::after {
          height: 1.1em;
        }
      }

      figure {
        --w: 460px;
        width: var(--w);
        margin-inline: auto;
      }
    }
  }

  .footer-gallery {
    row-gap: 1em;

    .cover-off {
      width: calc(100% / 2);
    }
  }

  .players-sec .players-block {
    width: 100%;
  }

  
  
}

@media (width < 540px) {
  .access .map {
    figure {
      margin-inline: calc((90vw - var(--w)) * -1) 0;
    }

    figcaption {
      inset: auto auto 30% -6%;
      writing-mode: vertical-rl;
      transform: skew(0, 10deg);
    }
  }
}

@media (width < 450px) {
  .result:has(.coming-soon) {
    padding-bottom: 180px;

    .bg>img {
      display: block;
    }
  }
}