@charset "utf-8";

html {
  font-size: 62.5%;
  max-width: 1280px;
  margin: 0 auto;
  font-family: "Noto Sans JP", sans-serif;
}

#main-view {
  text-align: center;
  margin-top: 30px;
}

.main-photo {
  width: 90%;
}

.main-photo-year {
  font-size: clamp(20px,6vw,80px);
  font-family: "Anton SC", sans-serif;
  margin-top: -6.5%;
}

#entry-area {
  text-align: center;
  margin-top: clamp(10px, 3vw, 50px);
}

.event-day {
  font-size: clamp(20px,9.5vw,130px);
  font-family: "Anton SC", sans-serif;
}

.month {
  font-size: 0.6em;
  vertical-align: 0.53em;
}

.sat {
  font-size: 0.6em;
  margin-left: 0.8%;
}

.point {
  font-size: 0.6em;
  vertical-align: middle;
  margin: 0 1%;
}

.sun {
  font-size: 0.6em;
  margin-left: 0.8%;
}

.deadline {
  background-color: #FFD900;
  display: inline-block;
  padding: 10px 30px;
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 800;
  font-size: clamp(20px, 2.8vw, 40px);
}

.deadline-title {
  font-weight: bold;
  letter-spacing: -2px;
}

.deadline-day {
  font-size: 2em;
  font-weight: bold;
  letter-spacing: -2px;
}

.date {
  font-size: 0.7em;
  vertical-align: 3px;
}

.vertical {
  vertical-align: 5%;
}

.deadline-content {
  font-size: 1em;
  font-weight: bold;
}

.wrapper {
  position: relative;
}

.background-photo1 {
  position: absolute;
  width: 25%;
  right: 0px;
  top: -35%;
  z-index: -1;
}

.link-area {
  display: flex;
  justify-content: center;
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 900;
  font-size: clamp(20px, 4vw, 50px);
  margin-top: clamp(10px, 5vw, 50px);

}

.summary-link {
  border: solid 3px #707070;
  box-shadow: 5px 5px 5px #707070;
  width: 20%;
}

.entry-link {
  border: solid 3px #707070;
  margin-left: 4%;
  box-shadow: 5px 5px 5px #707070;
  width: 20%;
}

.award {
  width: 80%;
  margin-top: 30px;
}

#place {
  text-align: center;
  margin-top: clamp(20px,4vw,50px);
}

.kumoji {
  width: clamp(150px, 25vw, 320px);
}

.tournament-name-area {
  display: flex;
  justify-content: center;
  align-items: center;
}

.tournament-name {
  width: clamp(200px,53vw, 678px);
  height: clamp(30px, 7.9vw, 102px);
  
}

.tournament-name-year {
  font-size: clamp(32px, 8.5vw, 112px);
  font-family: "Anton SC", sans-serif;
  color: #231815;
}

.place-content {
  font-size: 2rem;
  text-align: center;
  margin-top: clamp(10px, 1vw, 15px);
}

.background-photo2 {
  position: absolute;
  width: 30%;
  top: -35%;
  left: 0;
  z-index: -1;
}

.match-venue {
  width: 90%;
  position: relative;
  z-index: -10;
  margin-top: 30px;
}

#how {
  text-align: center;
}

.how-title {
  font-size: clamp(25px, 4vw, 50px);
  font-weight: bold;
  margin-top: 50px;
  margin-top: clamp(30px,6vw,80px);
}

.how-content {
  font-size: 2rem;
  margin: 0 auto;
  margin-top: clamp(10px, 1.5vw, 20px);
  width: 60%;
  text-align: left;
}

.video{
  width: 70%;
  margin-top: clamp(20px,4vw,50px);
}

#summary {
  text-align: center;
  margin-top: clamp(20px,12vw,100px);
  position: relative;
}

.competition-summary {
  width: clamp(250px, 45vw, 600px);
}

dl {
  line-height: 1.4;
  width: 60%;
  margin: 0 auto;
}

dt {
  font-size: 2.2rem;
  text-align: left;
  margin-top: 20px;
}

dd {
  font-size: 2rem;
  text-align: left;
  margin-left: 23px;
}

.top-space {
  margin-top: 10px;
}

.left-space {
  margin-left: 50px;
}

.font-small {
  font-size: 1.6rem;
}

.font-bold {
  font-weight: bold;
}

.entry-container {
  position: relative;
  width: 30%;
  display: inline-block;
  margin-top: clamp(20px, 8vw, 100px);
}

.entry {
  width: 100%;
}

.entry-year {
  font-size: clamp(5px, 1.6vw, 21px);
  font-family: "Noto Sans JP", sans-serif;
  color: #ffffff;
  position: absolute;
  z-index: 10;
  bottom: 24.3%;
  left: 44.2%;
}

.background-photo3 {
  width: 22%;
  position: absolute;
  left: 0;
  top: 35%;
  z-index: -1;
}

footer {
  background-color: #000000;
  color: #ffffff;
  padding: 50px 0;
  margin-top: clamp(50px, 10vw, 128px);
  font-family: "Noto Sans JP", sans-serif;
}

.footer-wrapper {
  width: 60%;
  margin: 0 auto;
}

.footer-title {
  font-size: 2rem;
  margin-bottom: 20px;
  font-weight: bold;
}

.tel {
  font-size: 4rem;
  font-weight: bold;
}

.tel-content {
  font-size: 1.8rem;
  margin-bottom: 20px;
}

.mail {
  font-size: 2.4rem;
  font-weight: bold;
}


@media screen and (max-width:960px) {
  html {
    font-size: 56.3%;
  }
}

@media screen and (max-width:768px) {
  html {
    font-size: 50%;
  }

  .event-day {
    font-size: 12vw;
  }

  .deadline {
    padding: 10px 30px;
    font-size: 4vw;
  }

  .summary-link, .entry-link {
    width: 25%;
  }

  .how-content {
    width: 70%;
  }

  dl {
    width: 70%;
  }

  .entry-container {
    width: 40%;
  }

  .entry-year {
    font-size: clamp(5px, 2.2vw, 21px);
    bottom: 24.1%;
    left: 44.2%;
  }
}

@media screen and (max-width:600px) {
  .event-day {
    font-size: 12vw;
  }

  .deadline {
    padding: 10px 30px;
    font-size: 4vw;
  }

  .summary-link, .entry-link {
    width: 25%;
    box-shadow: 2px 2px 5px #707070;
  }

  .sp {
    display: none;
  }

  .place-content {
    width: 90%;
    margin: 0 auto;
    margin-top: clamp(10px, 1vw, 15px);
    text-align: left;
  }

  .background-photo2 {
    position: absolute;
    width: 30%;
    top: -30%;
  }

  .how-content {
    width: 85%;
  }

  .video {
    width: 85%;
  }

  dl {
    width: 85%;
  }

  .entry-container {
    width: 50%;
  }

  .entry-year {
    font-size: clamp(5px, 2.7vw, 21px);
    bottom: 24.1%;
    left: 44.2%;
  }
  
  .footer-wrapper {
    width: 85%;
  }
}