@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-blue.webp);
  background: center/100% 100% url(../img/contents/c-btn-bg-black.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(240 240 240 / 12%);
}

.c-border2 {
  border: calc(4 / var(--full-width) * var(--device-width)) solid rgb(240 240 240 / 90%);
}

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

/* shadow */
.c-shadow {
  box-shadow: 0 0 calc(16 / var(--full-width) * var(--device-width))
    calc(4 / var(--full-width) * var(--device-width)) rgb(255 255 255 / 40%);
}

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

/* @media screen and (min-width: 751px) {
  .main {
    background-size: calc(750 / var(--full-width) * var(--device-width)) auto;
    background-repeat: repeat;
  }
} */

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

.sec-ttl {
  margin: 0 auto;
  width: calc(690 / var(--full-width) * var(--device-width));
}

.sec-subttl {
  position: relative;
  padding-bottom: calc(13 / var(--full-width) * var(--device-width));
  text-align: center;
  font-size: 3.6rem;
  font-weight: 900;
  text-shadow: 0px calc(4 / var(--full-width) * var(--device-width))
    calc(8 / var(--full-width) * var(--device-width)) rgb(89 44 43 / 72%);
}
.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%);
  background-color: #fff;
  box-shadow: 0px calc(4 / var(--full-width) * var(--device-width))
    calc(8 / var(--full-width) * var(--device-width)) rgb(89 44 43 / 72%);
}

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

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

  .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-inner {
  padding-top: calc(80 / var(--full-width) * var(--device-width));
  padding-bottom: calc(70 / var(--full-width) * var(--device-width));
}

.lead-txt {
  line-height: 1.9;
  text-align: center;
  font-size: 3.2rem;
  font-weight: 600;
  text-shadow: 0px 2px 4px rgb(89 44 43 / 30%);
}
.lead-txt + .lead-txt {
  margin-top: 1em;
}

@media screen and (min-width: 751px) {
  .lead-txt {
    font-size: 2.4rem;
  }
}

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

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

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

.scheduleInfo-card + .scheduleInfo-card {
  margin-top: calc(60 / var(--full-width) * var(--device-width));
}

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

  .scheduleInfo-list {
    display: flex;
    gap: calc(20 / var(--full-width) * var(--device-width));
  }

  .scheduleInfo-card + .scheduleInfo-card {
    margin-top: 0;
  }
}

.scheduleBroadcast {
  margin-top: calc(140 / var(--full-width) * var(--device-width));
}

.scheduleBroadcast-list {
  margin-top: calc(60 / var(--full-width) * var(--device-width));
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: rgb(0 0 0 / 60%);
}

.scheduleBroadcastCard {
  padding: calc(50 / var(--full-width) * var(--device-width)) 0;
}
.scheduleBroadcastCard + .scheduleBroadcastCard {
  position: relative;
}
.scheduleBroadcastCard + .scheduleBroadcastCard::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  display: block;
  width: 90%;
  height: calc(2 / var(--full-width) * var(--device-width));
  background-color: rgb(255 255 255 / 90%);
  box-shadow: 0 0 calc(16 / var(--full-width) * var(--device-width))
    calc(2 / var(--full-width) * var(--device-width)) rgb(255 255 255 / 40%);
}

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

.scheduleBroadcastCard-stadium {
  margin: 0 auto;
  width: calc(490 / var(--full-width) * var(--device-width));
  font-size: 2.4rem;
}

.scheduleBroadcastCard-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;
}

.scheduleBroadcastCard-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));
}
.scheduleBroadcastCard-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%);
}

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

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

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

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

@media screen and (max-width: 750px) {
  .scheduleBroadcastCard {
    border: none;
    box-shadow: none;
  }
}

@media screen and (min-width: 751px) {
  .scheduleBroadcast-list {
    margin-top: calc(40 / var(--full-width) * var(--device-width));
    flex-direction: row;
    flex-wrap: wrap;
    background: transparent;
    border: none;
    box-shadow: none;
    gap: calc(30 / var(--full-width) * var(--device-width));
  }

  .scheduleBroadcastCard {
    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));
    background-color: rgb(0 0 0 / 60%);
  }
  .scheduleBroadcastCard + .scheduleBroadcastCard::before {
    content: none;
  }

  .scheduleBroadcastCard-date {
    width: 100%;
  }

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

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

  .scheduleBroadcastCard-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));
  }
  .scheduleBroadcastCard-mediaList::before {
    width: calc(1 / var(--full-width) * var(--device-width));
  }

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

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

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

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

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

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

.pickup-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));
}

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

@media screen and (min-width: 751px) {
  .pickup-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));
  }

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

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

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

.gourmet-img {
  margin: calc(80 / var(--full-width) * var(--device-width)) auto 0;
}

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

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

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

/* ========== bestmatch ========== */
#bestmatch {
  overflow: hidden;
}

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

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

.bestmatch-beyond {
  position: relative;
  z-index: 2;
  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-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 {
  position: relative;
  z-index: 2;
  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;
  z-index: 2;
  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-txtWrapper {
  position: relative;
  margin-top: calc(16 / var(--full-width) * var(--device-width));
}
.bestmatchScene-txtWrapper::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -60%;
  left: -50%;
  display: block;
  width: 150%;
  height: 200%;
  border-radius: 50%;
  background-color: rgb(0 0 0 / 10%);
  filter: blur(calc(100 / var(--full-width) * var(--device-width)));
}

.bestmatchScene-txt {
  position: relative;
  z-index: 2;
  line-height: 1.9;
  /* font-family: 'Noto Serif JP', serif; */
  font-weight: 600;
  text-shadow: 0 calc(4 / var(--full-width) * var(--device-width))
      calc(8 / var(--full-width) * var(--device-width)) rgb(89 44 43 / 36%),
    0 calc(-4 / var(--full-width) * var(--device-width))
      calc(8 / var(--full-width) * var(--device-width)) rgb(89 44 43 / 36%),
    calc(4 / var(--full-width) * var(--device-width)) 0
      calc(8 / var(--full-width) * var(--device-width)) rgb(89 44 43 / 36%),
    calc(-4 / var(--full-width) * var(--device-width)) 0
      calc(8 / var(--full-width) * var(--device-width)) rgb(89 44 43 / 36%);
}

.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-txtWrapper {
  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-txtWrapper {
  padding-left: calc(40 / var(--full-width) * var(--device-width));
}
.bestmatchScene:nth-of-type(even) .bestmatchScene-txtWrapper::after {
  left: auto;
  right: -50%;
}

/* シーン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));
}

/* シーン10 */
.bestmatchScene._10 .bestmatchScene-result > img {
  width: calc(268 / var(--full-width) * var(--device-width));
}

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

/* シーン11 */
.bestmatchScene._11 .bestmatchScene-result > img {
  width: calc(268 / var(--full-width) * var(--device-width));
}

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

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

.bestmatchScene._12 .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-txtWrapper {
    align-self: center;
    margin-top: 0;
  }
  .bestmatchScene-txtWrapper::after {
    top: -40%;
    left: -20%;
  }

  .bestmatchScene-txt {
    line-height: 1.8;
    font-size: 1.9rem;
  }

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

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

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

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

  .bestmatchScene:nth-of-type(even) .bestmatchScene-txtWrapper {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    padding: 0;
  }
  .bestmatchScene:nth-of-type(even) .bestmatchScene-txtWrapper::after {
    right: -20%;
  }
}

/* ----- gallery ----- */
.bestmatchGallery {
  margin: calc(90 / var(--full-width) * var(--device-width)) auto 0;
}

.bestmatchGallery-slider .splide__arrow {
  width: calc(70 / var(--full-width) * var(--device-width));
  height: auto;
  aspect-ratio: 1 / 1;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: calc(6 / var(--full-width) * var(--device-width))
    calc(6 / var(--full-width) * var(--device-width))
    calc(10 / var(--full-width) * var(--device-width)) 0 rgb(0 0 0 / 0.16);
  opacity: 1;
  align-items: center;
}
.bestmatchGallery-slider .splide__arrow:hover:not(:disabled) {
  background-color: #fff;
}
.bestmatchGallery-slider .splide__arrow--prev {
  left: calc(-20 / var(--full-width) * var(--device-width));
}
.bestmatchGallery-slider .splide__arrow--next {
  right: calc(-20 / var(--full-width) * var(--device-width));
}
.bestmatchGallery-slider .splide__arrow::before {
  content: '';
  display: block;
  width: 40%;
  height: auto;
  aspect-ratio: 1 / 1;
  background: center/contain no-repeat url(../img/contents/c-btn-arrow-blue.webp);
}
.bestmatchGallery-slider .splide__arrow--prev::before {
  rotate: 180deg;
  translate: calc(-2 / var(--full-width) * var(--device-width))
    calc(2 / var(--full-width) * var(--device-width));
}
.bestmatchGallery-slider .splide__arrow--next::before {
  translate: calc(2 / var(--full-width) * var(--device-width)) 0;
}

.bestmatchGallery-thumbs {
  margin-top: calc(30 / var(--full-width) * var(--device-width));
  display: flex;
  flex-wrap: wrap;
  gap: calc(20 / var(--full-width) * var(--device-width)) 2.5%;
}
.bestmatchGallery-thumbs > li {
  width: calc((100% - 2.5% * 4) / 5);
  border: calc(3 / var(--full-width) * var(--device-width)) solid transparent;
  opacity: 0.7;
}
.bestmatchGallery-thumbs > li.is-active {
  border-color: #fff;
  opacity: 1;
}

@media screen and (min-width: 751px) {
  .bestmatchGallery {
    width: calc(920 / var(--full-width) * var(--device-width));
  }
}

/* ========== sponsor ========== */
#sponsor {
  background-color: #030000;
}

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

.sponsor-list {
  margin-top: calc(80 / 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 {
  margin-top: calc(10 / var(--full-width) * var(--device-width));
  text-align: center;
  font-size: 2rem;
  font-weight: 400;
}
.sponsorItem-name._fsS {
  font-size: 1.6rem;
}

@media screen and (min-width: 751px) {
  .sponsor-list {
    margin: calc(46 / var(--full-width) * var(--device-width)) auto 0;
    justify-content: flex-start;
    gap: calc(24 / var(--full-width) * var(--device-width));
    width: calc(1080 / var(--full-width) * var(--device-width));
  }

  .sponsorItem {
    width: calc((100% - (24 / var(--full-width) * var(--device-width)) * 3) / 4);
  }
  .sponsorItem:nth-child(1) {
    margin-left: calc(
      ((100% - (24 / var(--full-width) * var(--device-width)) * 3) / 4) / 2 +
        (12 / var(--full-width) * var(--device-width))
    );
  }
  .sponsorItem:nth-child(3) {
    margin-right: calc(
      ((100% - (24 / var(--full-width) * var(--device-width)) * 3) / 4) / 2 +
        (12 / var(--full-width) * var(--device-width))
    );
  }

  .sponsorItem-name {
    font-size: 1.5rem;
  }
  .sponsorItem-name._fsS {
    font-size: 1.25rem;
  }
}