/*
Project:『PUBG MOBILE』企業対抗戦2022 SPECIAL
*/
@import url('https://fonts.googleapis.com/earlyaccess/notosansjp.css');

body {
  background: #000;
  color: #fff;
  font-family: 'Noto Sans JP', 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  padding-top: 106px;
}

/*========== UTIL ==========*/
.pc {
  display: inline;
}

.tablet {
  display: inline;
}

.mobile {
  display: none;
}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #484848;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #000000;
}

h1 {
  padding-bottom: 60px;
}

b {
  color: #e1cd81;
}

small {
  font-size: 0.65rem;
  line-height: 1rem;
}

.mb-s {
  margin-bottom: 10px;
}

.mb-m {
  margin-bottom: 20px;
}

.pb-m {
  padding-bottom: 20px;
}

.button {
  display: block;
}

.button a {
  background: #e1cd81;
  border: 1px solid #e1cd81;
  padding: 15px 40px;
  margin-top: 20px;
  color: #000;
  font-size: 1.2rem;
  font-weight: 700;
  text-decoration: none;
}

.button a:hover {
  background: #000;
  border: 1px solid #e1cd81;
  color: #e1cd81;
}

/*========== BACK TO TOP ==========*/
#toTop {
  display: none;
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: rgba(255, 205, 129, 0.85);
  color: white;
  cursor: pointer;
  padding: 15px 20px;
  border-radius: 100px;
  font-size: 18px;
}

#toTop:hover {
  background-color: #555;
}

/*========== NAVIGATION ==========*/
.navbar-expand-lg .navbar-nav .nav-link {
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}

.navbar a:hover {
  color: #e1cd81 !important;
}

.navDropdown {
  background: rgb(0, 0, 0, 0.5);
}

.bg-dark {
  background-color: #000000 !important;
  padding: 20px;
}

/*========== MAIN ==========*/
.main {
  width: 70%;
  text-align: center;
  margin: auto;
}

/*========== ABOUT ==========*/
#About {
  padding: 100px 0 0 0;
}

#About h1 {
  width: auto;
  margin: auto;
  color: #fff;
  display: flex;
  align-items: center;
}

#About h1:before, #About h1:after {
  content: "";
  height: 2px;
  flex-grow: 1;
  background-color: #e1cd81;
}

#About h1:before {
  margin-right: 3rem;
}

#About h1:after {
  margin-left: 3rem;
}

/*========== REPORT ==========*/
#Report {
  padding: 0 0 0 0;
}

#Report h1 {
  width: auto;
  margin: auto;
  color: #fff;
  display: flex;
  align-items: center;
}

#Report h1:before, #Report h1:after {
  content: "";
  height: 2px;
  flex-grow: 1;
  background-color: #e1cd81;
}

#Report h1:before {
  margin-right: 3rem;
}

#Report h1:after {
  margin-left: 3rem;
}

.reportTXT {
  padding: 30px 0 0 0;
}

.reportIMG {
  padding: 10px 0;
}

.toprank {
  padding: 0;
  margin: auto;
  text-align: center;
  margin-top: 50px;
}

.toprank li {
  width: 25%;
  list-style: none;
  display: inline-block;
  text-align: center;
}

.toprank li img {
  width: 70%;
  background-color: #fff;
}

.toprank .rank1 img {
  width: 90%;
  background-color: #fff;
}

.toprank p {
  font-size: 0.9rem;
  padding: 10px 0 0 0;
}

/*========== MATCH RESULTS ==========*/
#MatchResults {
  padding: 100px 0 0 0;
}

#MatchResults h1 {
  width: auto;
  margin: auto;
  color: #fff;
  display: flex;
  align-items: center;
}

#MatchResults h1:before, #MatchResults h1:after {
  content: "";
  height: 2px;
  flex-grow: 1;
  background-color: #e1cd81;
}

#MatchResults h1:before {
  margin-right: 3rem;
}

#MatchResults h1:after {
  margin-left: 3rem;
}

.firstPlace {
  color: #e1cd81;
  padding: 0 0 10px 0;
}

.firstPlace h4 {
  font-size: 2rem;
}

.secondPlace {
  color: #9a9a9a;
  padding: 0 0 10px 0;
}

.secondPlace h4 {
  padding: 0 0 10px 0;
}

.thirdPlace {
  color: #884d13;
  padding: 0 0 10px 0;
}

.thirdPlace h4 {
  padding: 0 0 10px 0;
}

.txtPlace {
  margin: 10px 0 0 0;
}

.firstPlace-img {
  width: 100%;
}

.secondPlace-img {
  width: 90%;
}

.thirdPlace-img {
  width: 80%;
}

/*========== RANKING ==========*/
#Ranking {
  padding: 60px 0 0 0;
}

#Ranking h1 {
  width: auto;
  margin: auto;
  color: #fff;
  display: flex;
  align-items: center;
}

#Ranking h1:before, #Ranking h1:after {
  content: "";
  height: 2px;
  flex-grow: 1;
  background-color: #e1cd81;
}

#Ranking h1:before {
  margin-right: 3rem;
}

#Ranking h1:after {
  margin-left: 3rem;
}

#Ranking .title {
  margin: 80px 0 0 0;
}

.carousel-control-prev-icon {
  margin-left: -200px;
}

.carousel-control-next-icon {
  margin-right: -200px;
}

/*========== COMPETITION SUMMARY ==========*/
#Competition {
  padding: 60px 0 0 0;
}

#Competition h1 {
  width: auto;
  margin: auto;
  color: #fff;
  display: flex;
  align-items: center;
}

#Competition h1:before, #Competition h1:after {
  content: "";
  height: 2px;
  flex-grow: 1;
  background-color: #e1cd81;
}

#Competition h1:before {
  margin-right: 3rem;
}

#Competition h1:after {
  margin-left: 3rem;
}

#Competition a {
  color: #f2a900;
  text-decoration: none;
  border-bottom: 1px dotted;
  padding-bottom: 2px;
}

#Competition a:hover {
  color: #a96529;
}

#Competition table {
  line-height: 1.5rem;
}

#Competition table .last {
  padding-bottom: 20px;
}

#Competition table th {
  color: #e1cd81;
  margin-bottom: 20px;
  text-align: right;
  vertical-align: top;
}

#Competition table td {
  margin: 0;
  display: block;
  padding-left: 30px;
}

#Competition table p {
  margin: 0;
  text-align: left;
}

/*========== TEAMS ==========*/
#Teams {
  padding: 60px 0 100px 0;
}

#Teams h1 {
  width: auto;
  margin: auto;
  color: #fff;
  display: flex;
  align-items: center;
}

#Teams h1:before, #Teams h1:after {
  content: "";
  height: 2px;
  flex-grow: 1;
  background-color: #e1cd81;
}

#Teams h1:before {
  margin-right: 3rem;
}

#Teams h1:after {
  margin-left: 3rem;
}

#Teams #teamGroups img {
  padding-bottom: 10px;
}

#teamGroups .row {
  margin: 10px 0;
}

.accordion {
  --bs-accordion-color: #fff;
  --bs-accordion-bg: #262626;
  --bs-accordion-border-color: #000;
  --bs-accordion-btn-focus-border-color: #e1cd81;
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgb(225, 205, 129, 0.25);
  --bs-accordion-active-color: #e1cd81;
  --bs-accordion-active-bg: #262626;
}

.accordion p {
  color: #e1cd81;
  font-size: 0.8rem;
  padding: 10px 0 0 0;
  line-height: 1.3rem;
}

.accordion a {
  color: #e1cd81;
  text-decoration: none;
  border-bottom: 1px dotted;
  padding-bottom: 2px;
  font-size: 0.8rem;
  line-height: 0.5rem;
}

.accordion a:hover {
  color: #fff;
}

.accordion-button {
  color: #fff;
  background-color: #262626;
}

.accordion-button:not(.collapsed)::after {
  content: "\f107";
  font-family: "Font Awesome 6 Pro";
  color: #e1cd81;
  background-image: none;
}

.accordion-button.collapsed::after {
  content: "\f107";
  color: #fff;
  font-weight: 400;
  font-family: "Font Awesome 6 Pro";
}

/*========== PRIZE ==========*/
#Prize {
  background-color: #121212;
  padding: 100px 0;
}

#Prize h1 {
  width: auto;
  margin: auto;
  color: #fff;
  display: flex;
  align-items: center;
}

#Prize h1:before, #Prize h1:after {
  content: "";
  height: 2px;
  flex-grow: 1;
  background-color: #e1cd81;
}

#Prize h1:before {
  margin-right: 3rem;
}

#Prize h1:after {
  margin-left: 3rem;
}

#Prize h2 {
  padding-bottom: 20px;
  line-height: 3rem;
}

#Prize h3 {
  padding-bottom: 20px;
  line-height: 3rem;
}

#Prize h5 {
  padding-top: 20px;
  line-height: 2rem;
}

#Prize h5 b {
  color: #e1cd81;
}

.underline {
  font-weight: 700;
  background: linear-gradient(transparent 80%, #e1cd81 80%);
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.56);
  padding: 0 10px;
}

.prizeTxt {
  color: #e1cd81;
  font-weight: 700;
  padding: 10px 0 20px 0;
}

/*========== TIMETABLE ==========*/
#Timetable {
  padding: 100px 0;
}

#Timetable h1 {
  width: auto;
  margin: auto;
  color: #fff;
  display: flex;
  align-items: center;
}

#Timetable h1:before, #Timetable h1:after {
  content: "";
  height: 2px;
  flex-grow: 1;
  background-color: #e1cd81;
}

#Timetable h1:before {
  margin-right: 3rem;
}

#Timetable h1:after {
  margin-left: 3rem;
}

#Timetable .content {
  width: 70%;
  margin: 0 auto;
}

#Timetable table th {
  color: #e1cd81 !important;
  margin-bottom: 20px;
}

#Timetable table {
  text-align: center;
  margin: auto;
}

/*========== ENTRY ==========*/
#Entry {
  background-color: #121212;
  padding: 100px 0 50px 0;
}

#Entry h1 {
  width: auto;
  margin: auto;
  color: #fff;
  display: flex;
  align-items: center;
}

#Entry h1:before, #Entry h1:after {
  content: "";
  height: 2px;
  flex-grow: 1;
  background-color: #e1cd81;
}

#Entry h1:before {
  margin-right: 3rem;
}

#Entry h1:after {
  margin-left: 3rem;
}

#Entry table {
  line-height: 1.5rem;
}

#Entry table .last {
  padding-bottom: 20px;
}

#Entry table th {
  color: #e1cd81;
  margin-bottom: 20px;
  text-align: right;
  vertical-align: top;
}

#Entry table td {
  margin: 0;
  display: block;
  padding-left: 30px;
}

#Entry table p {
  margin: 0;
  text-align: left;
}

/*========== CAMPAING ==========*/
#Campaing {
  background-color: #121212;
  padding: 100px 0 50px 0;
}

#Campaing h1 {
  width: auto;
  margin: auto;
  color: #fff;
  display: flex;
  align-items: center;
}

#Campaing h1:before, #Campaing h1:after {
  content: "";
  height: 2px;
  flex-grow: 1;
  background-color: #e1cd81;
}

#Campaing h1:before {
  margin-right: 3rem;
}

#Campaing h1:after {
  margin-left: 3rem;
}

/*========== PERFORMER ==========*/
#Performer {
  background-color: #121212;
  padding: 100px 0;
}

#Performer h1 {
  width: auto;
  margin: auto;
  color: #fff;
  display: flex;
  align-items: center;
}

#Performer h1:before, #Performer h1:after {
  content: "";
  height: 2px;
  flex-grow: 1;
  background-color: #e1cd81;
}

#Performer h1:before {
  margin-right: 3rem;
}

#Performer h1:after {
  margin-left: 3rem;
}

.performer {
  padding: 20px 0;
}

.performerTitle {
  color: #9ea2a2;
  font-weight: 500;
  padding: 5px 0;
}

.performerName {
  font-size: 1.5rem;
  font-weight: 600;
  padding: 10px 0;
}

.performerSNS a {
  font-size: 1rem;
  color: #1DA1F2;
  padding: 10px 0;
}

.performerSNS ins {
  font-size: 1rem;
  color: #1DA1F2;
}

.performerSNS a:hover {
  color: #0e77b7;
}

/*========== CHANNEL ==========*/
#Channel {
  padding: 100px 0 50px 0;
}

#Channel h1 {
  width: auto;
  margin: auto;
  color: #fff;
  display: flex;
  align-items: center;
}

#Channel h1:before, #Channel h1:after {
  content: "";
  height: 2px;
  flex-grow: 1;
  background-color: #e1cd81;
}

#Channel h1:before {
  margin-right: 3rem;
}

#Channel h1:after {
  margin-left: 3rem;
}

/*========== SPONSOR ==========*/
#Sponsor {
  padding: 100px 0 120px 0;
}

#Sponsor h1 {
  width: auto;
  margin: auto;
  color: #fff;
  display: flex;
  align-items: center;
}

#Sponsor h1:before, #Sponsor h1:after {
  content: "";
  height: 2px;
  flex-grow: 1;
  background-color: #e1cd81;
}

#Sponsor h1:before {
  margin-right: 3rem;
}

#Sponsor h1:after {
  margin-left: 3rem;
}

#Sponsor h3 {
  padding: 0 10px 0 0;
  display: inline-block;
}

#Sponsor .subtitle {
  margin-bottom: 30px;
}

#Sponsor small {
  text-align: right;
  color: #9ea2a2;
}

#Sponsor img {
  padding-bottom: 20px;
}

.sponsorTXT {
  margin: 0 0 30px 0;
}

.sponsorDetail {
  margin: 0 0 70px 0;
}

.sponsorsLogo {
  margin-bottom: 40px;
}

/*========== FOOTER ==========*/
footer {
  background: #222223;
  color: #7a7a7b;
  font-size: 12px;
  text-align: center;
  padding: 30px 0 10px 0;
}

footer a {
  color: #cccccc;
  text-decoration: none;
}

footer a:hover {
  color: #f2a900;
  text-decoration: none;
}

footer a:active {
  color: #b88000;
  text-decoration: none;
}

.footerSNS {
  font-size: 1.375rem;
}

.footerSNS a {
  padding: 0 7px;
}

.footerSNS a:hover {
  color: #AFB0B0;
}

/* ======================= Media Queries ======================*/
/*=========== XXL devices (large desktops, 1200px and up) ===========*/
@media screen and (min-width: 1401px) {
  .d-full {
    width: 100%;
  }
}

/*=========== XL devices (large desktops, 1200px and up) ===========*/
@media screen and (min-width: 1200) and (max-width: 1400px) {}

/*============== Large devices (desktops, 992px and up) ==============*/
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .pc {
    display: inline;
  }

  .tablet {
    display: inline;
  }

  .mobile {
    display: none;
  }

  /*========== LG device NAVIGATION ==========*/
  .navbar-expand-lg .navbar-nav .nav-link {
    font-size: 0.8rem;
    font-weight: 500;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
}

/*============== Medium devices (tablets, 768px and up) ==============*/
@media screen and (min-width: 768px) and (max-width: 991px) {

  /*========== Tablet UTIL ==========*/
  .pc {
    display: none;
  }

  .tablet {
    display: inline;
  }

  .mobile {
    display: none;
  }

  .button {
    display: inline-flex;
  }

  .button a {
    margin-top: 0;
  }

  /*========== Tablet NAVIGATION ==========*/
  .bg-dark {
    background-color: #000000 !important;
  }

  .navbar {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  .navbar-expand-lg .navbar-nav .nav-link {
    font-size: 2rem;
    line-height: initial;
  }

  .navbar-light .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Noto Sans JP', 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', sans-serif;
    font-size: 0.9rem;
    line-height: 4rem;
    font-weight: 600;
  }

  .navbar-light .navbar-nav .nav-link:hover {
    color: #e1cd81;
  }

  .navDropdown {
    background: rgb(0, 0, 0, 0.5);
  }

  .navbar .navbar-toggler {
    z-index: 1000;
  }

  .navbar-dark .navbar-toggler {
    color: rgba(0, 0, 0, 0.85));
    background-color: rgba(0, 0, 0, .5);
    border-color: rgba(0, 0, 0, 0.85);
  }

  .navbar .navbar-collapse {
    background: rgba(0, 0, 0, 0.85);
  }

  .navbar-toggler {
    padding: 0.6rem 0.6rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    transition: box-shadow .15s ease-in-out;
  }

  .navbar-toggler-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%;
  }

  @media (max-width: 991.98px) {
    .navbar .navbar-collapse {
      background: rgba(0, 0, 0, 0.85);
      opacity: 0;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      transition: opacity 0.35s ease;
      display: flex;
      flex-direction: column;
      align-content: center;
      text-align: center !important;
    }

    .navbar .navbar-collapse.collapse {
      display: flex;
      opacity: 0;
      pointer-events: none;
    }

    .navbar .navbar-collapse.collapsing[style*="height"] {
      opacity: 1;
      height: 100vh !important;
    }

    .navbar .navbar-collapse.collapsing {
      opacity: 0;
      height: 100vh;
    }

    .navbar .navbar-collapse.collapse.show {
      opacity: 1;
      pointer-events: auto;
    }

    .navbar .navbar-collapse .navbar-nav {
      margin-right: initial !important;
      margin-top: auto;
      margin-bottom: auto;
    }
  }

  @media (max-width: 991.98px) {
    .navbar-nav {
      margin-left: initial !important;
    }
  }

  /*========== Tablet MAIN ==========*/
  .main {
    width: 90%;
  }

  /*========== Tablet ABOUT ==========*/
  #About {
    padding: 80px 0 50px 0;
  }

  #About h1:before {
    margin-right: 2rem;
  }

  #About h1:after {
    margin-left: 2rem;
  }

  /*========== REPORT TABLET ==========*/
  #Report {
    padding: 60px 0 0 0;
  }

  #Report h1 {
    padding-bottom: 30px;
  }

  #Report h1:before {
    margin-right: 2rem;
  }

  #Report h1:after {
    margin-left: 2rem;
  }

  .reportTXT {
    padding: 30px 0 0 0;
  }

  .reportIMG {
    padding: 10px 0;
  }

  .toprank {
    padding: 0;
    margin: auto;
    text-align: center;
    margin-top: 50px;
  }

  .toprank li {
    width: 25%;
    list-style: none;
    display: inline-block;
    text-align: center;
  }

  .toprank li img {
    width: 70%;
    background-color: #fff;
  }

  .toprank .rank1 img {
    width: 90%;
    background-color: #fff;
  }

  .toprank p {
    font-size: 0.5rem;
    line-height: initial;
  }

  /*========== MATCH RESULTS TABLET ==========*/
  #MatchResults {
    padding: 100px 0 0 0;
  }

  #MatchResults h1 {
    padding-bottom: 30px;
  }

  #MatchResults h1:before {
    margin-right: 2rem;
  }

  #MatchResults h1:after {
    margin-left: 2rem;
  }

  .firstPlace {
    color: #e1cd81;
    padding: 0 0 10px 0;
  }

  .firstPlace h4 {
    font-size: 2rem;
  }

  .secondPlace {
    color: #9a9a9a;
    padding: 0 0 10px 0;
  }

  .secondPlace h4 {
    padding: 0 0 10px 0;
  }

  .thirdPlace {
    color: #884d13;
    padding: 0 0 10px 0;
  }

  .thirdPlace h4 {
    padding: 0 0 10px 0;
  }

  .txtPlace {
    margin: 10px 0 0 0;
  }

  .firstPlace-img {
    width: 100%;
  }

  .secondPlace-img {
    width: 90%;
  }

  .thirdPlace-img {
    width: 80%;
  }

  /*========== RANKING TABLET ==========*/
  #Ranking {
    padding: 0;
  }

  #Ranking h1:before {
    margin-right: 2rem;
  }

  #Ranking h1:after {
    margin-left: 2rem;
  }

  #Ranking .title {
    margin: 80px 0 0 0;
  }

  .carousel-control-prev-icon {
    margin-left: -150px;
  }

  .carousel-control-next-icon {
    margin-right: -150px;
  }

  .finalRanking {
    width: 85%;
    margin: auto;
  }

  #semifinalsRanking {
    width: 85%;
    margin: auto;
  }

  #qualifyingRanking {
    width: 85%;
    margin: auto;
  }

  /*========== COMPETITION TABLET ==========*/
  #Competition h1:before {
    margin-right: 2rem;
  }

  #Competition h1:after {
    margin-left: 2rem;
  }

  #Competition img {
    padding-bottom: 30px;
  }

  /*========== PRIZE TABLET ==========*/
  #Prize {
    padding: 80px 0;
  }

  #Prize h1:before {
    margin-right: 2rem;
  }

  #Prize h1:after {
    margin-left: 2rem;
  }

  #Prize h3 {
    font-size: 2rem;
  }

  /*========== Tablet TIMETABLE ==========*/
  #Timetable {
    padding: 80px 0;
  }

  #Timetable h1:before {
    margin-right: 2rem;
  }

  #Timetable h1:after {
    margin-left: 2rem;
  }

  #Timetable .content {
    width: 90%;
  }

  /*========== Tablet ENTRY ==========*/
  #Entry {
    padding: 80px 0 50px 0;
  }

  #Entry h1:before {
    margin-right: 2rem;
  }

  #Entry h1:after {
    margin-left: 2rem;
  }

  #Entry .button a {
    margin-top: 10px;
  }

  /*========== Tablet CAMPAING ==========*/
  #Campaing {
    background-color: #121212;
    padding: 80px 0 50px 0;
  }

  #Campaing h1:before {
    margin-right: 2rem;
  }

  #Campaing h1:after {
    margin-left: 2rem;
  }

  /*========== Tablet PERFORMER ==========*/
  #Performer {
    background-color: #121212;
    padding: 80px 0;
  }

  #Performer h1:before {
    margin-right: 2rem;
  }

  #Performer h1:after {
    margin-left: 2rem;
  }

  /*========== Tablet CHANNEL ==========*/
  #Channel {
    padding: 80px 0 50px 0;
  }

  #Channel h1:before {
    margin-right: 2rem;
  }

  #Channel h1:after {
    margin-left: 2rem;
  }

  /*========== Tablet SPONSOR ==========*/
  #Sponsor {
    padding: 80px 0;
  }

  #Sponsor h1:before {
    margin-right: 2rem;
  }

  #Sponsor h1:after {
    margin-left: 2rem;
  }

  #Sponsor .button a {
    margin-top: 10px;
  }

  .sponsorTXT {
    margin: 20px 0;
  }

  /*========== Tablet FOOTER ==========*/
  .footerInfo {
    padding: 0 30px 10px 30px;
  }
}

/*============== Small devices (landscape phones, 576px and up) ==============*/
@media screen and (min-width: 425px) and (max-width: 767px) {
  body {
    padding-top: 85px;
  }

  .button {
    display: inline-flex;
  }

  .button a {
    margin-top: 0;
  }

  /*========== Small UTIL ==========*/
  .pc {
    display: none;
  }

  .tablet {
    display: none;
  }

  .mobile {
    display: inline;
  }

  h1 {
    padding-bottom: 50px;
  }

  /*========== Small NAVIGATION ==========*/
  .bg-dark {
    background-color: #000000 !important;
  }

  .navbar {
    padding-top: 0.6rem !important;
    padding-bottom: 0.6rem !important;
  }

  .navbar-light .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Noto Sans JP', 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', sans-serif;
    font-size: 0.9rem;
    line-height: 4rem;
    font-weight: 600;
  }

  .navbar-light .navbar-nav .nav-link:hover {
    color: #e1cd81;
  }

  .navDropdown {
    background: rgb(0, 0, 0, 0.5);
  }

  .navbar .navbar-toggler {
    z-index: 1000;
  }

  .navbar-dark .navbar-toggler {
    color: rgba(0, 0, 0, 0.85));
    background-color: rgba(0, 0, 0, .5);
    border-color: rgba(0, 0, 0, 0.85);
  }

  .navbar .navbar-collapse {
    background: rgba(0, 0, 0, 0.85);
  }

  .navbar-toggler {
    padding: 0.6rem 0.6rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    transition: box-shadow .15s ease-in-out;
  }

  .navbar-toggler-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%;
  }

  @media (max-width: 991.98px) {
    .navbar .navbar-collapse {
      background: rgba(0, 0, 0, 0.85);
      opacity: 0;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      transition: opacity 0.35s ease;
      display: flex;
      flex-direction: column;
      align-content: center;
      text-align: center !important;
    }

    .navbar .navbar-collapse.collapse {
      display: flex;
      opacity: 0;
      pointer-events: none;
    }

    .navbar .navbar-collapse.collapsing[style*="height"] {
      opacity: 1;
      height: 100vh !important;
    }

    .navbar .navbar-collapse.collapsing {
      opacity: 0;
      height: 100vh;
    }

    .navbar .navbar-collapse.collapse.show {
      opacity: 1;
      pointer-events: auto;
    }

    .navbar .navbar-collapse .navbar-nav {
      margin-right: initial !important;
      margin-top: auto;
      margin-bottom: auto;
    }
  }

  @media (max-width: 991.98px) {
    .navbar-nav {
      margin-left: initial !important;
    }
  }

  /*========== Small MAIN ==========*/
  .main {
    width: 90%;
  }

  /*========== Small ABOUT ==========*/
  #About {
    padding: 50px 0;
  }

  #About h1:before {
    margin-right: 1.5rem;
  }

  #About h1:after {
    margin-left: 1.5rem;
  }

  /*========== REPORT SMALL ==========*/
  #Report {
    padding: 50px 0 0 0;
  }

  #Report h1 {
    padding-bottom: 30px;
  }

  #Report h1:before {
    margin-right: 2rem;
  }

  #Report h1:after {
    margin-left: 2rem;
  }

  .reportTXT {
    padding: 30px 0 0 0;
  }

  .reportIMG {
    padding: 10px 0;
  }

  /*========== MATCH RESULTS SMALL ==========*/
  #MatchResults {
    padding: 50px 0 0 0;
  }

  #MatchResults h1 {
    padding-bottom: 30px;
  }

  #MatchResults h1:before {
    margin-right: 2rem;
  }

  #MatchResults h1:after {
    margin-left: 2rem;
  }

  p {
    margin: 10px 0 25px 0;
  }

  /*========== RANKING SMALL ==========*/
  #Ranking {
    padding: 0;
  }

  #Ranking h1:before {
    margin-right: 2rem;
  }

  #Ranking h1:after {
    margin-left: 2rem;
  }

  #Ranking .title {
    margin: 80px 0 0 0;
  }

  .carousel-control-prev-icon {
    margin-left: -100px;
  }

  .carousel-control-next-icon {
    margin-right: -100px;
  }

  .finalRanking {
    width: 85%;
    margin: auto;
  }

  #semifinalsRanking {
    width: 85%;
    margin: auto;
  }

  #qualifyingRanking {
    width: 85%;
    margin: auto;
  }

  /*========== COMPETITION SMALL ==========*/
  #Competition {
    padding: 50px 0 0 0;
  }

  #Competition img {
    padding-bottom: 30px;
  }

  /*========== TEAMS SMALL ==========*/
  #Teams #teamGroups p {
    font-size: 0.5rem;
    line-height: 0.8rem;
  }

  .accordion-body {
    padding: 10px 0;
  }

  #teamGroups .row {
    margin: 10px 0 20px 0;
  }

  .accordion a {
    font-size: 12px;
    line-height: 0;
  }

  /*========== Small PRIZE ==========*/
  #Prize {
    padding: 50px 0;
  }

  #Prize h1:before {
    margin-right: 1.5rem;
  }

  #Prize h1:after {
    margin-left: 1.5rem;
  }

  #Prize h3 {
    font-size: 2rem;
  }

  /*========== Small TIMETABLE ==========*/
  #Timetable {
    padding: 50px 0;
  }

  #Timetable h1:before {
    margin-right: 1.5rem;
  }

  #Timetable h1:after {
    margin-left: 1.5rem;
  }

  #Timetable .content {
    width: auto;
  }

  th {
    font-size: 0.9rem;
  }

  td {
    font-size: 0.9rem;
  }

  /*========== Small ENTRY ==========*/
  #Entry {
    padding: 50px 0;
  }

  #Entry h1:before {
    margin-right: 1.5rem;
  }

  #Entry h1:after {
    margin-left: 1.5rem;
  }

  #Entry .button a {
    margin-top: 10px;
  }

  /*========== Small CAMPAING ==========*/
  #Campaing {
    background-color: #121212;
    padding: 50px 0;
  }

  #Campaing h1:before {
    margin-right: 1.5rem;
  }

  #Campaing h1:after {
    margin-left: 1.5rem;
  }

  /*========== Small PERFORMER ==========*/
  #Performer {
    background-color: #121212;
    padding: 50px 0;
  }

  #Performer h1:before {
    margin-right: 1.5rem;
  }

  #Performer h1:after {
    margin-left: 1.5rem;
  }

  .MC {
    padding: 20px 5px 0 5px;
  }

  /*========== Small CHANNEL ==========*/
  #Channel {
    padding: 50px 0;
  }

  #Channel h1:before {
    margin-right: 1.5rem;
  }

  #Channel h1:after {
    margin-left: 1.5rem;
  }

  #Channel .button a {
    padding: 15px 10px;
  }

  /*========== Small SPONSOR ==========*/
  #Sponsor {
    padding: 50px 0 50px 0;
  }

  #Sponsor h1:before {
    margin-right: 1.5rem;
  }

  #Sponsor h1:after {
    margin-left: 1.5rem;
  }

  #Sponsor h3 {
    padding: 0;
    display: inherit;
  }

  #Sponsor .subtitle {
    margin-bottom: 30px;
  }

  .sponsorTXT {
    margin: 20px 0;
  }

  .sponsorDetail {
    margin: 0 0 40px 0;
  }

  /*========== Small FOOTER ==========*/
  .footerInfo {
    padding: 0 30px 10px 30px;
  }
}

/*============= XSmall devices (landscape phones, 320px and up) =============*/
@media screen and (min-width: 320px) and (max-width: 424px) {
  body {
    padding-top: 85px;
  }

  /*========== XS UTIL ==========*/
  .pc {
    display: none;
  }

  .tablet {
    display: none;
  }

  .mobile {
    display: inline;
  }

  h1 {
    padding-bottom: 40px;
  }

  .button a {
    padding: 15px 20px;
    font-size: 0.9rem;
  }

  /*========== XS NAVIGATION ==========*/
  .bg-dark {
    background-color: #000000 !important;
  }

  .navbar {
    padding-top: 0.6rem !important;
    padding-bottom: 0.6rem !important;
  }

  .navbar-light .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Noto Sans JP', 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', sans-serif;
    font-size: 0.9rem;
    line-height: 4rem;
    font-weight: 600;
  }

  .navbar-light .navbar-nav .nav-link:hover {
    color: #e1cd81;
  }

  .navDropdown {
    background: rgb(0, 0, 0, 0.5);
  }

  .navbar .navbar-toggler {
    z-index: 1000;
  }

  .navbar-dark .navbar-toggler {
    color: rgba(0, 0, 0, 0.85));
    background-color: rgba(0, 0, 0, .5);
    border-color: rgba(0, 0, 0, 0.85);
  }

  .navbar .navbar-collapse {
    background: rgba(0, 0, 0, 0.85);
  }

  .navbar-toggler {
    padding: 0.6rem 0.6rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    transition: box-shadow .15s ease-in-out;
  }

  .navbar-toggler-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%;
  }

  @media (max-width: 991.98px) {
    .navbar .navbar-collapse {
      background: rgba(0, 0, 0, 0.85);
      opacity: 0;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      transition: opacity 0.35s ease;
      display: flex;
      flex-direction: column;
      align-content: center;
      text-align: center !important;
    }

    .navbar .navbar-collapse.collapse {
      display: flex;
      opacity: 0;
      pointer-events: none;
    }

    .navbar .navbar-collapse.collapsing[style*="height"] {
      opacity: 1;
      height: 100vh !important;
    }

    .navbar .navbar-collapse.collapsing {
      opacity: 0;
      height: 100vh;
    }

    .navbar .navbar-collapse.collapse.show {
      opacity: 1;
      pointer-events: auto;
    }

    .navbar .navbar-collapse .navbar-nav {
      margin-right: initial !important;
      margin-top: auto;
      margin-bottom: auto;
    }
  }

  @media (max-width: 991.98px) {
    .navbar-nav {
      margin-left: initial !important;
    }
  }

  /*========== XS MAIN ==========*/
  .main {
    width: 90%;
  }

  /*========== XS ABOUT ==========*/
  #About {
    padding: 50px 0;
  }

  #About h1:before {
    margin-right: 1.5rem;
  }

  #About h1:after {
    margin-left: 1.5rem;
  }

  /*========== REPORT XS ==========*/
  #Report {
    padding: 50px 0 0 0;
  }

  #Report h1 {
    padding-bottom: 20px;
  }

  #Report h1:before {
    margin-right: 1.5rem;
  }

  #Report h1:after {
    margin-left: 1.5rem;
  }

  .reportTXT {
    padding: 20px 0 0 0;
  }

  .reportIMG {
    padding: 10px 0;
  }

  /*========== MATCH RESULTS XS ==========*/
  #MatchResults {
    padding: 50px 0 0 0;
  }

  #MatchResults h1 {
    padding-bottom: 30px;
  }

  #MatchResults h1:before {
    margin-right: 1.5rem;
  }

  #MatchResults h1:after {
    margin-left: 1.5rem;
  }

  p {
    margin: 10px 0 25px 0;
  }

  /*========== RANKING SMALL ==========*/
  #Ranking {
    padding: 0;
  }

  #Ranking h1:before {
    margin-right: 1.5rem;
  }

  #Ranking h1:after {
    margin-left: 1.5rem;
  }

  #Ranking .title {
    margin: 80px 0 0 0;
  }

  .carousel-control-prev-icon {
    margin-left: -90px;
  }

  .carousel-control-next-icon {
    margin-right: -90px;
  }

  .finalRanking {
    width: 85%;
    margin: auto;
  }

  #semifinalsRanking {
    width: 85%;
    margin: auto;
  }

  #qualifyingRanking {
    width: 85%;
    margin: auto;
  }

  /*========== COMPETITION XS ==========*/
  #Competition {
    padding: 50px 0 0 0;
  }

  #Competition img {
    padding-bottom: 30px;
  }

  /*========== TEAM XS ==========*/
  #Teams {
    padding: 60px 0;
  }

  #Teams #teamGroups p {
    font-size: 0.5rem;
    line-height: 0.8rem;
  }

  .accordion-body {
    padding: 10px 0;
  }

  #teamGroups .row {
    margin: 10px 0 20px 0;
  }

  .accordion a {
    font-size: 12px;
    line-height: 0;
  }

  /*========== XS PRIZE ==========*/
  #Prize {
    padding: 50px 0;
  }

  #Prize h1:before {
    margin-right: 1.5rem;
  }

  #Prize h1:after {
    margin-left: 1.5rem;
  }

  #Prize h3 {
    font-size: 1.7rem;
  }

  /*========== XS TIMETABLE ==========*/
  #Timetable {
    padding: 50px 0;
  }

  #Timetable h1:before {
    margin-right: 1.5rem;
  }

  #Timetable h1:after {
    margin-left: 1.5rem;
  }

  #Timetable .content {
    width: auto;
  }

  th {
    font-size: 0.9rem;
  }

  td {
    font-size: 0.9rem;
  }

  /*========== XS ENTRY ==========*/
  #Entry {
    padding: 50px 0;
  }

  #Entry h1:before {
    margin-right: 1.5rem;
  }

  #Entry h1:after {
    margin-left: 1.5rem;
  }

  #Entry .button {
    display: inline-flex;
  }

  /*========== XS CAMPAING ==========*/
  #Campaing {
    background-color: #121212;
    padding: 50px 0;
  }

  #Campaing h1:before {
    margin-right: 1.5rem;
  }

  #Campaing h1:after {
    margin-left: 1.5rem;
  }

  /*========== XS PERFORMER ==========*/
  #Performer {
    background-color: #121212;
    padding: 50px 0;
  }

  #Performer h1:before {
    margin-right: 1.5rem;
  }

  #Performer h1:after {
    margin-left: 1.5rem;
  }

  .MC {
    padding: 20px 0 0 0;
  }

  .performerTitle {
    font-size: 0.85rem;
    padding: 5px 20px;
  }

  .performerName {
    font-size: 1.2rem;
  }

  .performerSNS a {
    font-size: 0.8rem;
  }

  /*========== XS CHANNEL ==========*/
  #Channel {
    padding: 50px 0;
  }

  #Channel h1:before {
    margin-right: 1.5rem;
  }

  #Channel h1:after {
    margin-left: 1.5rem;
  }

  #Channel .button a {
    padding: 15px 10px;
    font-size: 0.9rem;
  }

  /*========== XS SPONSOR ==========*/
  #Sponsor {
    padding: 50px 0 50px 0;
  }

  #Sponsor h1:before {
    margin-right: 1.5rem;
  }

  #Sponsor h1:after {
    margin-left: 1.5rem;
  }

  #Sponsor h3 {
    padding: 0;
    display: inherit;
  }

  #Sponsor .subtitle {
    margin-bottom: 30px;
  }

  .sponsorDetail {
    margin: 0 0 40px 0;
  }

  /*========== XS FOOTER ==========*/
  .footerInfo {
    padding: 0 30px 10px 30px;
  }
}