@charset "utf-8";

:root {
  --full-width: 750;
  --device-width: 100vw;
  --scrollbar-width: 0px;
  --bg-color-black: #0d0d0d;
  --bg-color-black-rgb: 13 13 13;
  --font-color-white: #fff;
}
@media screen and (min-width: 751px) {
  :root {
    --full-width: 1440;
    --scrollbar-width: 15px;
    --device-width: (100vw - var(--scrollbar-width));
  }
}

* {
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-size: calc(10 / var(--full-width) * var(--device-width));
}

body {
  background-color: var(--bg-color-black);
  line-height: 1.5;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 2.8rem;
  font-weight: 400;
  color: var(--font-color-white);
}
@media screen and (min-width: 751px) {
  body {
    font-size: 2rem;
  }
}

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

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

/* ========== アクセシビリティ改善 ========== */
/* アクセシビリティ改善: スクリーンリーダー用の視覚的に隠されたコンテンツ */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* アクセシビリティ改善: フォーカス管理とキーボードナビゲーション */
a:focus,
button:focus,
[tabindex]:focus {
  outline: calc(4 / var(--full-width) * var(--device-width)) solid #0088cc;
  outline-offset: calc(4 / var(--full-width) * var(--device-width));
  box-shadow: 0 0 0 calc(8 / var(--full-width) * var(--device-width)) rgb(0 136 204 / 30%);
}

/* フォーカス時の視認性向上 */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: calc(4 / var(--full-width) * var(--device-width)) solid #0088cc;
  outline-offset: calc(4 / var(--full-width) * var(--device-width));
  box-shadow: 0 0 0 calc(8 / var(--full-width) * var(--device-width)) rgb(0 136 204 / 30%);
  background-color: rgb(0 136 204 / 10%);
}

/* フォーカス時のテキストコントラスト改善 */
a:focus,
a:focus-visible {
  color: #fff;
  text-decoration: underline;
}

/* ダークテーマでのフォーカスインジケーター調整 */
@media (prefers-color-scheme: dark) {
  a:focus,
  button:focus,
  [tabindex]:focus,
  a:focus-visible,
  button:focus-visible,
  [tabindex]:focus-visible {
    outline-color: #66ccff;
    box-shadow: 0 0 0 calc(8 / var(--full-width) * var(--device-width)) rgb(102 204 255 / 30%);
  }

  a:focus-visible,
  button:focus-visible,
  [tabindex]:focus-visible {
    background-color: rgb(102 204 255 / 10%);
  }
}

/* スキップリンク（キーボードナビゲーション改善） */
.skip-link {
  position: absolute;
  top: calc(-40 / var(--full-width) * var(--device-width));
  left: calc(6 / var(--full-width) * var(--device-width));
  background: #000;
  color: #fff;
  padding: calc(8 / var(--full-width) * var(--device-width));
  text-decoration: none;
  font-size: 1.6rem;
  z-index: 10000;
  transition: top 0.3s;
}

.skip-link:focus {
  top: calc(6 / var(--full-width) * var(--device-width));
}

/* YouTube iframeのアクセシビリティ向上 */
.bestmatch-yt iframe:focus {
  outline: calc(4 / var(--full-width) * var(--device-width)) solid #0088cc;
}

button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: inherit;
  appearance: none;
  cursor: pointer;
}

/* ========== parts ========== */
/* scrolltop */
/* .scrolltop {
  position: fixed;
  z-index: 10;
  bottom: calc(50 / var(--full-width) * var(--device-width));
  left: calc(30 / var(--full-width) * var(--device-width));
  display: block;
  width: calc(80 / var(--full-width) * var(--device-width));
  height: auto;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s, translate 0.3s;
}
.scrolltop.is-view {
  pointer-events: auto;
  opacity: 1;
}
@media (hover: hover) {
  .scrolltop:hover {
    translate: 0 -10%;
  }
}

@media screen and (min-width: 751px) {
  .scrolltop {
    bottom: calc(80 / var(--full-width) * var(--device-width));
    left: calc(120 / var(--full-width) * var(--device-width));
    width: calc(50 / var(--full-width) * var(--device-width));
  }
} */

/* ticketbtn */
/* .ticketbtn {
  position: fixed;
  z-index: 10;
  bottom: calc(50 / var(--full-width) * var(--device-width));
  right: calc(12 / var(--full-width) * var(--device-width));
  display: block;
  width: calc(244 / var(--full-width) * var(--device-width));
  height: auto;
  aspect-ratio: 244 / 244;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s, scale 0.2s;
}
.ticketbtn.is-view {
  pointer-events: auto;
  opacity: 1;
}
@media (hover: hover) {
  .ticketbtn:hover {
    scale: 0.95;
  }
}

@media screen and (min-width: 751px) {
  .ticketbtn {
    bottom: calc(62 / var(--full-width) * var(--device-width));
    right: calc(42 / var(--full-width) * var(--device-width));
    width: calc(160 / var(--full-width) * var(--device-width));
  }
} */

/* ========== common ========== */
@media screen and (max-width: 750px) {
  .c-l {
    display: none;
  }
}

@media screen and (min-width: 751px) {
  .c-s {
    display: none;
  }
}

/* btn */
.c-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  width: calc(420 / var(--full-width) * var(--device-width));
  height: calc(90 / var(--full-width) * var(--device-width));
  padding-left: calc(40 / var(--full-width) * var(--device-width));
  background: center/100% 100% url(../img/contents/c-btn-bg.webp);
  font-style: italic;
  font-weight: 600;
}
.c-btn::after {
  content: '';
  display: block;
  width: calc(24 / var(--full-width) * var(--device-width));
  height: auto;
  aspect-ratio: 24 / 23;
  background: center/contain no-repeat url(../img/contents/c-btn-arrow.webp);
}

@media screen and (min-width: 751px) {
  .c-btn {
    gap: 0.8em;
    width: calc(288 / var(--full-width) * var(--device-width));
    height: calc(67 / var(--full-width) * var(--device-width));
    padding-left: calc(20 / var(--full-width) * var(--device-width));
  }
  .c-btn::after {
    width: calc(16 / var(--full-width) * var(--device-width));
  }
}

/* border */
.c-border {
  border: calc(2 / var(--full-width) * var(--device-width)) solid rgb(255 255 255 / 12%);
}

.c-border2 {
  border: calc(2 / var(--full-width) * var(--device-width)) solid rgb(255 255 255 / 50%);
}

/* hover */
.c-hover {
  opacity: 1;
  transition: opacity 0.2s;
}
@media (hover: hover) {
  .c-hover:hover {
    opacity: 0.7;
  }
}

/* ========== sec ========== */
.sec {
  position: relative;
}

.sec-inner {
  padding: 0 calc(30 / var(--full-width) * var(--device-width));
}

/* black bg */
.sec._black {
  z-index: 2;
  padding-top: calc(160 / var(--full-width) * var(--device-width));
  padding-bottom: calc(196 / var(--full-width) * var(--device-width));
}
.sec._black::before,
.sec._black::after {
  content: '';
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  display: block;
  width: 100%;
  height: auto;
  background: center/100% 100%;
}
.sec._black::before {
  top: 0;
  aspect-ratio: 750 / 160;
  background-image: url(../img/contents/sec-bg-black-top.webp);
}
.sec._black::after {
  bottom: 0;
  aspect-ratio: 750 / 196;
  background-image: url(../img/contents/sec-bg-black-bottom.webp);
}

.sec._black .sec-inner {
  background: top/100% repeat-y url(../img/contents/sec-bg-black-middle.webp);
}

/* blue bg */
.sec._blue {
  z-index: 1;
  margin-top: calc(-196 / var(--full-width) * var(--device-width));
  margin-bottom: calc(-160 / var(--full-width) * var(--device-width));
  padding-top: calc(196 / var(--full-width) * var(--device-width));
  padding-bottom: calc(160 / var(--full-width) * var(--device-width));
}

.sec-ttl {
  position: relative;
  padding-top: calc(35 / var(--full-width) * var(--device-width));
  text-align: center;
  font-size: 6.4rem;
  font-style: italic;
  font-weight: 900;
}
.sec-ttl::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  display: block;
  width: calc(690 / var(--full-width) * var(--device-width));
  height: auto;
  aspect-ratio: 690 / 85;
  background: center/contain no-repeat;
}

.sec-subttl {
  position: relative;
  padding-bottom: calc(13 / var(--full-width) * var(--device-width));
  text-align: center;
  font-size: 3.6rem;
  font-weight: 900;
}
.sec-subttl::after {
  content: '';
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
  display: block;
  width: calc(124 / var(--full-width) * var(--device-width));
  height: calc(4 / var(--full-width) * var(--device-width));
  clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
}
.sec._black .sec-subttl::after {
  background-color: #00659c;
}
.sec._blue .sec-subttl::after {
  background-color: var(--bg-color-black);
}

@media screen and (min-width: 751px) {
  .sec-inner {
    padding: 0;
  }

  /* black bg */
  .sec._black {
    padding-top: calc(315 / var(--full-width) * var(--device-width));
    padding-bottom: calc(315 / var(--full-width) * var(--device-width));
  }
  .sec._black::before {
    aspect-ratio: 1440 / 315;
    background-image: url(../img/contents/sec-bg-black-top__l.webp);
  }
  .sec._black::after {
    aspect-ratio: 1440 / 315;
    background-image: url(../img/contents/sec-bg-black-bottom__l.webp);
  }

  .sec._black .sec-inner {
    background-image: url(../img/contents/sec-bg-black-middle__l.webp);
  }

  /* blue bg */
  .sec._blue {
    margin-top: calc(-315 / var(--full-width) * var(--device-width));
    margin-bottom: calc(-315 / var(--full-width) * var(--device-width));
    padding-top: calc(315 / var(--full-width) * var(--device-width));
    padding-bottom: calc(315 / var(--full-width) * var(--device-width));
  }

  .sec-ttl {
    padding-top: calc(23 / var(--full-width) * var(--device-width));
    font-size: 5.6rem;
  }
  .sec-ttl::before {
    width: auto;
    height: calc(73 / var(--full-width) * var(--device-width));
  }

  .sec-subttl {
    font-size: 3.2rem;
  }
  .sec-subttl::after {
    width: calc(120 / var(--full-width) * var(--device-width));
    clip-path: polygon(3% 0, 100% 0, 97% 100%, 0 100%);
  }
}

/* ========== lead ========== */
#lead {
  padding-top: 0;
}
#lead::before {
  content: none;
}

.lead-inner {
  padding-top: calc(104 / var(--full-width) * var(--device-width));
  padding-bottom: calc(100 / var(--full-width) * var(--device-width));
}

/* .lead-ttl {
  text-align: center;
  font-size: 6.4rem;
  font-style: italic;
  font-weight: 900;
} */

.lead-txt {
  /* margin-top: calc(20 / var(--full-width) * var(--device-width)); */
  line-height: 1.9;
  text-align: center;
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
}
.lead-txt + .lead-txt {
  margin-top: 1em;
}

@media screen and (min-width: 751px) {
  .lead-inner {
    padding-top: calc(81 / var(--full-width) * var(--device-width));
    padding-bottom: calc(120 / var(--full-width) * var(--device-width));
  }

  /* .lead-ttl {
    font-size: 5.6rem;
  } */

  .lead-txt {
    /* margin-top: calc(14 / var(--full-width) * var(--device-width)); */
    line-height: 1.8;
  }
}

/* ========== ranking ========== */
#ranking {
  background: top/100% 100% url(../img/contents/ranking-bg.webp);
}

.ranking-inner {
  padding-top: calc(30 / var(--full-width) * var(--device-width));
  padding-bottom: calc(50 / var(--full-width) * var(--device-width));
}

.ranking-ttl::before {
  background-image: url(../img/contents/ranking-ttl-en.webp);
}

.ranking-update {
  margin-top: calc(10 / var(--full-width) * var(--device-width));
  text-align: right;
  font-family: 'Roboto', sans-serif;
  font-size: 2rem;
  opacity: 0.8;
}
.ranking-update::after {
  content: '現在';
  font-family: 'Noto Sans JP', sans-serif;
}

.rankingClinch {
  margin-top: calc(32 / var(--full-width) * var(--device-width));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(33 / var(--full-width) * var(--device-width))
    calc(26 / var(--full-width) * var(--device-width));
  background-color: rgb(var(--bg-color-black-rgb) / 24%);
}

.rankingClinch-ttl {
  font-weight: 600;
  font-style: italic;
}

.rankingClinch-number {
  width: auto;
  height: calc(74 / var(--full-width) * var(--device-width));
}

@media screen and (min-width: 751px) {
  #ranking {
    background-image: url(../img/contents/ranking-bg__l.webp);
  }

  .ranking-inner {
    margin: 0 auto;
    width: calc(720 / var(--full-width) * var(--device-width));
    padding-top: calc(27 / var(--full-width) * var(--device-width));
    padding-bottom: calc(24 / var(--full-width) * var(--device-width));
  }

  .ranking-update {
    margin-top: calc(6 / var(--full-width) * var(--device-width));
    font-size: 1.6rem;
  }

  .rankingClinch {
    margin-top: calc(46 / var(--full-width) * var(--device-width));
    padding: calc(18 / var(--full-width) * var(--device-width))
      calc(38 / var(--full-width) * var(--device-width));
  }

  .rankingClinch-ttl {
    font-size: 2.4rem;
  }
}

.rankingTable {
  /* margin-top: calc(24 / var(--full-width) * var(--device-width)); */
  margin-top: calc(32 / var(--full-width) * var(--device-width));
  width: 100%;
  background-color: rgb(var(--bg-color-black-rgb) / 24%);
  font-size: 2rem;
}

.rankingTable thead th {
  padding: calc(16 / var(--full-width) * var(--device-width))
    calc(14 / var(--full-width) * var(--device-width));
  background-color: rgb(var(--bg-color-black-rgb) / 30%);
}

.rankingTable tbody th {
  background-color: rgb(var(--bg-color-black-rgb) / 30%);
  vertical-align: middle;
  text-align: center;
  font-family: 'Roboto', sans-serif;
  font-size: 2.4rem;
}

.rankingTable tbody td {
  vertical-align: middle;
  text-align: center;
  font-family: 'Roboto', sans-serif;
}

.rankingTable-team {
  display: flex;
  align-items: center;
}

.rankingTable-team img {
  width: calc(59 / var(--full-width) * var(--device-width));
}

.rankingTable td.rankingTable-team p {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 2.4rem;
}

.rankingTable-fighters,
.rankingTable-fighters th,
.rankingTable-fighters td {
  background-color: #0198d8;
}

@media screen and (min-width: 751px) {
  .rankingTable {
    /* margin-top: calc(20 / var(--full-width) * var(--device-width)); */
    margin-top: calc(46 / var(--full-width) * var(--device-width));
  }

  .rankingTable thead th {
    padding: calc(12 / var(--full-width) * var(--device-width))
      calc(15 / var(--full-width) * var(--device-width));
  }

  .rankingTable th {
    font-size: 1.8rem;
  }

  .rankingTable tbody td {
    font-size: 1.8rem;
  }

  .rankingTable-team {
    padding-left: calc(8 / var(--full-width) * var(--device-width));
    gap: calc(5 / var(--full-width) * var(--device-width));
  }

  .rankingTable-team img {
    width: calc(49 / var(--full-width) * var(--device-width));
  }

  .rankingTable td.rankingTable-team p {
    font-size: 2rem;
  }
}

/* ========== schedule ========== */
.schedule-inner {
  padding-top: calc(120 / var(--full-width) * var(--device-width));
  padding-bottom: calc(100 / var(--full-width) * var(--device-width));
}

.schedule-ttl::before {
  background-image: url(../img/contents/schedule-ttl-en.webp);
}

.schedule-info {
  margin-top: calc(55 / var(--full-width) * var(--device-width));
}

.schedule-list {
  margin-top: calc(48 / var(--full-width) * var(--device-width));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(40 / var(--full-width) * var(--device-width))
    calc(30 / var(--full-width) * var(--device-width));
}

.schedule-main {
  margin: calc(48 / var(--full-width) * var(--device-width)) auto 0;
}

/* .schedule-result {
  margin-top: calc(70 / var(--full-width) * var(--device-width));
}

.schedule-update {
  margin-top: calc(10 / var(--full-width) * var(--device-width));
  text-align: right;
  font-family: 'Roboto', sans-serif;
  font-size: 2rem;
  opacity: 0.8;
}
.schedule-update::after {
  content: '現在';
  font-family: 'Noto Sans JP', sans-serif;
}

.schedule-btn {
  margin: calc(40 / var(--full-width) * var(--device-width)) auto 0;
} */

@media screen and (min-width: 751px) {
  .schedule-inner {
    padding: calc(84 / var(--full-width) * var(--device-width))
      calc(120 / var(--full-width) * var(--device-width))
      calc(45 / var(--full-width) * var(--device-width));
  }

  .schedule-info {
    margin-top: calc(58 / var(--full-width) * var(--device-width));
  }

  .schedule-list {
    margin-top: calc(40 / var(--full-width) * var(--device-width));
    flex-direction: row;
    flex-wrap: wrap;
  }

  .schedule-main {
    margin-top: calc(40 / var(--full-width) * var(--device-width));
    width: calc(800 / var(--full-width) * var(--device-width));
  }

  /* .schedule-result {
    margin: calc(72 / var(--full-width) * var(--device-width)) auto 0;
    width: calc(720 / var(--full-width) * var(--device-width));
  }

  .schedule-update {
    margin-top: calc(8 / var(--full-width) * var(--device-width));
    font-size: 1.6rem;
  }

  .schedule-btn {
    margin-top: calc(56 / var(--full-width) * var(--device-width));
  } */
}

.scheduleCard {
  padding: calc(47 / var(--full-width) * var(--device-width)) 0
    calc(40 / var(--full-width) * var(--device-width));
  background-color: rgb(var(--bg-color-black-rgb) / 34%);
}

.scheduleCard-date {
  margin: 0 auto;
  width: calc(588 / var(--full-width) * var(--device-width));
}

.scheduleCard-stadium {
  margin: 0 auto;
  width: calc(375 / var(--full-width) * var(--device-width));
}

.scheduleCard-broadcast {
  margin-top: calc(30 / var(--full-width) * var(--device-width));
  background: center/100% 100% url(../img/contents/schedule-card-broadcast-bg.webp);
  line-height: 2;
  text-align: center;
  font-size: 2.4rem;
}

.scheduleCard-mediaList {
  position: relative;
  margin-top: calc(36 / var(--full-width) * var(--device-width));
  display: flex;
  gap: calc(50 / var(--full-width) * var(--device-width));
  padding: 0 calc(50 / var(--full-width) * var(--device-width));
}
.scheduleCard-mediaList::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 0;
  left: 50%;
  translate: -50% 0;
  display: block;
  width: calc(2 / var(--full-width) * var(--device-width));
  height: 100%;
  background-color: rgb(255 255 255 / 50%);
}

.scheduleCardMedia {
  width: calc((100% - (50 / var(--full-width) * var(--device-width))) / 2);
}

.scheduleCardMedia-ttl {
  padding: 0.2em;
  border: 1px solid #fff;
  text-align: center;
  font-weight: 600;
}

.scheduleCardMedia-list {
  margin-top: calc(10 / var(--full-width) * var(--device-width));
}

.scheduleCardMedia-list > li {
  font-size: 2.4rem;
}
.scheduleCardMedia-list > li + li {
  margin-top: 0.15em;
}

@media screen and (min-width: 751px) {
  .scheduleCard {
    width: calc((100% - (30 / var(--full-width) * var(--device-width)) * 2) / 3);
    padding: calc(34 / var(--full-width) * var(--device-width)) 0
      calc(31 / var(--full-width) * var(--device-width));
  }

  .scheduleCard-date {
    width: 100%;
  }

  .scheduleCard-stadium {
    width: calc(240 / var(--full-width) * var(--device-width));
    font-size: 1.6rem;
  }

  .scheduleCard-broadcast {
    margin-top: calc(24 / var(--full-width) * var(--device-width));
    line-height: 2.15;
    font-size: 2rem;
  }

  .scheduleCard-mediaList {
    margin-top: calc(24 / var(--full-width) * var(--device-width));
    gap: calc(33 / var(--full-width) * var(--device-width));
    padding: 0 calc(20 / var(--full-width) * var(--device-width));
  }
  .scheduleCard-mediaList::before {
    width: calc(1 / var(--full-width) * var(--device-width));
  }

  .scheduleCardMedia {
    width: calc((100% - (33 / var(--full-width) * var(--device-width))) / 2);
  }

  .scheduleCardMedia-ttl {
    padding: 0.25em;
    font-weight: 400;
  }

  .scheduleCardMedia-list {
    margin-top: calc(7 / var(--full-width) * var(--device-width));
  }

  .scheduleCardMedia-list > li {
    font-size: 2rem;
  }
  .scheduleCardMedia-list > li + li {
    margin-top: 0.1em;
  }
}

/* .scheduleResultTable {
  margin-top: calc(48 / var(--full-width) * var(--device-width));
  width: 100%;
  font-family: 'Roboto', sans-serif;
  font-size: 2rem;
}

.scheduleResultTable thead td {
  padding: 0 calc(24 / var(--full-width) * var(--device-width));
  background-color: var(--bg-color-black);
  border: calc(2 / var(--full-width) * var(--device-width)) solid rgb(255 255 255 / 50%);
}

.scheduleResultTable img {
  width: calc(55 / var(--full-width) * var(--device-width));
}

.scheduleResultTable tbody th {
  background-color: var(--bg-color-black);
  border: calc(2 / var(--full-width) * var(--device-width)) solid rgb(255 255 255 / 50%);
}

.scheduleResultTable tbody td {
  background-color: rgb(1 152 216 / 20%);
  border: calc(2 / var(--full-width) * var(--device-width)) solid rgb(255 255 255 / 50%);
  vertical-align: middle;
  text-align: center;
}

.scheduleResultTable-fighters,
tbody .scheduleResultTable-fighters th,
tbody .scheduleResultTable-fighters td {
  background-color: #0198d8;
}

@media screen and (min-width: 751px) {
  .scheduleResultTable {
    margin-top: calc(40 / var(--full-width) * var(--device-width));
    font-size: 1.8rem;
  }
  
  .scheduleResultTable thead td {
    padding: 0 calc(27 / var(--full-width) * var(--device-width));
    border-width: calc(1 / var(--full-width) * var(--device-width));
  }
  
  .scheduleResultTable img {
    margin: 0 auto;
    width: calc(52 / var(--full-width) * var(--device-width));
  }
  
  .scheduleResultTable tbody th {
    padding: 0 calc(12 / var(--full-width) * var(--device-width));
    border-width: calc(1 / var(--full-width) * var(--device-width));
  }
  
  .scheduleResultTable tbody td {
    border-width: calc(1 / var(--full-width) * var(--device-width));
  }
} */

/* ========== bestmatch ========== */
#bestmatch {
  background: top/100% 100% url(../img/contents/bestmatch-bg.webp);
}
#bestmatch::before,
#bestmatch::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  display: block;
  width: 100%;
  height: auto;
}
#bestmatch::before {
  top: 0;
  aspect-ratio: 750 / 673;
  background: top/100% 100% url(../img/contents/bestmatch-bg-top.webp);
}
#bestmatch::after {
  bottom: 0;
  aspect-ratio: 750 / 1171;
  background: bottom/100% 100% url(../img/contents/bestmatch-bg-bottom.webp);
  opacity: 0.5;
}

.bestmatch-inner {
  padding-bottom: calc(90 / var(--full-width) * var(--device-width));
}

.bestmatch-ttl::before {
  background-image: url(../img/contents/bestmatch-ttl-en.webp);
}

.bestmatch-list {
  margin-top: calc(90 / var(--full-width) * var(--device-width));
}

.bestmatch-beyond {
  margin-top: calc(80 / var(--full-width) * var(--device-width));
}

.bestmatch-yt {
  margin-top: calc(60 / var(--full-width) * var(--device-width));
}

.bestmatch-yt iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

@media screen and (min-width: 751px) {
  #bestmatch {
    background-image: url(../img/contents/bestmatch-bg__l.webp);
  }
  #bestmatch::before {
    aspect-ratio: 1440 / 986;
    background-image: url(../img/contents/bestmatch-bg-top__l.webp);
    mask: linear-gradient(to bottom, black 70%, transparent 100%);
    -webkit-mask: linear-gradient(to bottom, black 70%, transparent 100%);
  }
  #bestmatch::after {
    aspect-ratio: 1440 / 1159;
    background-image: url(../img/contents/bestmatch-bg-bottom__l.webp);
  }

  .bestmatch-inner {
    margin: 0 auto;
    width: calc(1080 / var(--full-width) * var(--device-width));
    padding-top: calc(30 / var(--full-width) * var(--device-width));
    padding-bottom: calc(80 / var(--full-width) * var(--device-width));
  }

  .bestmatch-list {
    margin-top: calc(105 / var(--full-width) * var(--device-width));
  }

  .bestmatch-beyond {
    margin-top: calc(170 / var(--full-width) * var(--device-width));
  }

  .bestmatch-yt {
    margin: calc(40 / var(--full-width) * var(--device-width)) auto 0;
    width: calc(920 / var(--full-width) * var(--device-width));
  }
}

.bestmatchScene + .bestmatchScene {
  margin-top: calc(86 / var(--full-width) * var(--device-width));
}

.bestmatchScene-ttl {
  display: flex;
  gap: calc(20 / var(--full-width) * var(--device-width));
  height: calc(48 / var(--full-width) * var(--device-width));
}
.bestmatchScene-ttl::before {
  content: '';
  display: block;
  width: calc(48 / var(--full-width) * var(--device-width));
  height: auto;
  aspect-ratio: 48 / 48;
  background: center/contain no-repeat url(../img/contents/bestmatch-day-deco.webp);
}

.bestmatchScene-day {
  width: auto;
  height: 100%;
}

.bestmatchScene-result {
  margin-left: calc(5 / var(--full-width) * var(--device-width));
  display: block;
  height: 100%;
}

.bestmatchScene-result > img {
  position: relative;
  top: 50%;
  translate: 0 -50%;
}

.bestmatchScene-visual {
  position: relative;
  margin-top: calc(16 / var(--full-width) * var(--device-width));
}

.bestmatchScene-img {
  width: calc(600 / var(--full-width) * var(--device-width));
}

.bestmatchScene-band {
  position: absolute;
  bottom: -16%;
  width: calc(107 / var(--full-width) * var(--device-width));
}

.bestmatchScene-txt {
  margin-top: calc(16 / var(--full-width) * var(--device-width));
  line-height: 1.9;
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
}

.bestmatchScene-txt .-vs {
  display: block;
}
.bestmatchScene-txt .-vs._taR {
  text-align: right;
}

/* 奇数番目 */
.bestmatchScene:nth-of-type(odd) .bestmatchScene-band {
  right: 4%;
}

.bestmatchScene:nth-of-type(odd) .bestmatchScene-txt {
  padding-right: calc(40 / var(--full-width) * var(--device-width));
}

/* 偶数番目 */
.bestmatchScene:nth-of-type(even) .bestmatchScene-ttl {
  justify-content: flex-end;
}

.bestmatchScene:nth-of-type(even) .bestmatchScene-img {
  margin-left: auto;
}

.bestmatchScene:nth-of-type(even) .bestmatchScene-band {
  left: 4%;
}

.bestmatchScene:nth-of-type(even) .bestmatchScene-txt {
  padding-left: calc(40 / var(--full-width) * var(--device-width));
}

/* シーン1 */
.bestmatchScene._01 .bestmatchScene-result > img {
  width: calc(264 / var(--full-width) * var(--device-width));
}

.bestmatchScene._01 .bestmatchScene-band {
  width: calc(106 / var(--full-width) * var(--device-width));
}

/* シーン2 */
.bestmatchScene._02 .bestmatchScene-result > img {
  width: calc(275 / var(--full-width) * var(--device-width));
}

/* シーン3 */
.bestmatchScene._03 .bestmatchScene-result > img {
  width: calc(273 / var(--full-width) * var(--device-width));
}

.bestmatchScene._03 .bestmatchScene-band {
  width: calc(102 / var(--full-width) * var(--device-width));
}

/* シーン4 */
.bestmatchScene._04 .bestmatchScene-result > img {
  width: calc(277 / var(--full-width) * var(--device-width));
}

.bestmatchScene._04 .bestmatchScene-band {
  width: calc(106 / var(--full-width) * var(--device-width));
}

/* シーン5 */
.bestmatchScene._05 .bestmatchScene-result > img {
  width: calc(251 / var(--full-width) * var(--device-width));
}

/* シーン6 */
.bestmatchScene._06 .bestmatchScene-result > img {
  width: calc(255 / var(--full-width) * var(--device-width));
}

.bestmatchScene._06 .bestmatchScene-band {
  width: calc(105 / var(--full-width) * var(--device-width));
}

/* シーン7 */
.bestmatchScene._07 .bestmatchScene-result > img {
  width: calc(259 / var(--full-width) * var(--device-width));
}

.bestmatchScene._07 .bestmatchScene-band {
  width: calc(108 / var(--full-width) * var(--device-width));
}

/* シーン8 */
.bestmatchScene._08 .bestmatchScene-result > img {
  width: calc(274 / var(--full-width) * var(--device-width));
}

.bestmatchScene._08 .bestmatchScene-band {
  width: calc(106 / var(--full-width) * var(--device-width));
}

/* シーン9 */
.bestmatchScene._09 .bestmatchScene-result > img {
  width: calc(271 / var(--full-width) * var(--device-width));
}

.bestmatchScene._09 .bestmatchScene-band {
  width: calc(104 / var(--full-width) * var(--device-width));
}

@media screen and (min-width: 751px) {
  .bestmatchScene {
    display: grid;
    grid-template-columns: 70fr 31fr;
    align-items: flex-start;
    gap: calc(16 / var(--full-width) * var(--device-width))
      calc(70 / var(--full-width) * var(--device-width));
  }
  .bestmatchScene + .bestmatchScene {
    margin-top: calc(100 / var(--full-width) * var(--device-width));
  }

  .bestmatchScene-ttl {
    grid-column: 1 / 3;
    gap: calc(15 / var(--full-width) * var(--device-width));
    height: calc(44 / var(--full-width) * var(--device-width));
  }
  .bestmatchScene-ttl::before {
    width: calc(44 / var(--full-width) * var(--device-width));
  }

  .bestmatchScene-result {
    margin-left: 0;
  }

  .bestmatchScene-visual {
    margin-top: 0;
  }

  .bestmatchScene-img {
    width: calc(700 / var(--full-width) * var(--device-width));
  }

  .bestmatchScene-band {
    bottom: -17%;
  }

  .bestmatchScene-txt {
    align-self: center;
    margin-top: 0;
    line-height: 1.8;
  }

  .bestmatchScene-txt .-vs._taR {
    text-align: left;
  }

  /* 奇数番目 */
  .bestmatchScene:nth-of-type(odd) .bestmatchScene-band {
    right: -8.5%;
  }

  .bestmatchScene:nth-of-type(odd) .bestmatchScene-txt {
    padding-right: 0;
  }

  /* 偶数番目 */
  .bestmatchScene:nth-of-type(even) .bestmatchScene-band {
    left: -8.5%;
  }

  .bestmatchScene:nth-of-type(even) .bestmatchScene-txt {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    padding: 0;
  }
}

/* ========== event ========== */
.event-inner {
  padding-top: calc(100 / var(--full-width) * var(--device-width));
  padding-bottom: calc(80 / var(--full-width) * var(--device-width));
}

.event-ttl::before {
  background-image: url(../img/contents/event-ttl-en.webp);
}

.event-list {
  margin-top: calc(60 / var(--full-width) * var(--device-width));
  display: flex;
  flex-direction: column;
  gap: calc(80 / var(--full-width) * var(--device-width))
    calc(40 / var(--full-width) * var(--device-width));
}

.event-btn {
  margin: calc(57 / var(--full-width) * var(--device-width)) auto 0;
}

@media screen and (min-width: 751px) {
  .event-inner {
    padding: calc(84 / var(--full-width) * var(--device-width))
      calc(180 / var(--full-width) * var(--device-width))
      calc(45 / var(--full-width) * var(--device-width));
  }

  .event-list {
    margin-top: calc(66 / var(--full-width) * var(--device-width));
    flex-direction: row;
  }

  .event-btn {
    margin: calc(40 / var(--full-width) * var(--device-width)) auto 0;
  }
}

/* ========== sponsor ========== */
#sponsor {
  margin-bottom: 0;
  padding-bottom: calc(142 / var(--full-width) * var(--device-width));
  background: top/100% 100% url(../img/contents/sponsor-bg.webp);
}

.sponsor-ttl::before {
  background-image: url(../img/contents/sponsor-ttl-en.webp);
}

.sponsor-list {
  margin-top: calc(64 / var(--full-width) * var(--device-width));
  display: flex;
  flex-wrap: wrap;
  gap: calc(30 / var(--full-width) * var(--device-width));
}

.sponsorItem {
  width: calc((100% - (30 / var(--full-width) * var(--device-width))) / 2);
}

.sponsorItem-name {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 400;
}

@media screen and (min-width: 751px) {
  #sponsor {
    background-image: url(../img/contents/sponsor-bg__l.webp);
  }

  .sponsor-inner {
    margin: 0 auto;
    width: calc(1080 / var(--full-width) * var(--device-width));
  }

  .sponsor-list {
    margin-top: calc(46 / var(--full-width) * var(--device-width));
    justify-content: center;
    gap: calc(24 / var(--full-width) * var(--device-width));
  }

  .sponsorItem {
    width: calc((100% - (24 / var(--full-width) * var(--device-width)) * 3) / 4);
  }

  .sponsorItem-name {
    font-size: 1.8rem;
  }
}