@charset "utf-8";
/*-----------------------------
フォント設定
-----------------------------*/
@font-face {
  font-family: "Noto-Regular";
  src: url("../font/NotoSansJP-Regular.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Noto-Medium";
  src: url("../font/NotoSansJP-Medium.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Noto-Bold";
  src: url("../font/NotoSansJP-Bold.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Noto-Black";
  src: url("../font/NotoSansJP-Black.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Oswald-Regular";
  src: url("../font/Oswald-Regular.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Oswald-Medium";
  src: url("../font/Oswald-Medium.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Oswald-Bold";
  src: url("../font/Oswald-Bold.woff2") format("woff2");
  font-display: swap;
}
/*-----------------------------
リセット
-----------------------------*/
:where(:root) {
  --viewport-max: 1440; /* font-sizeが最大になるveiwport */
  --viewport-min: 360; /* font-sizeが最小になるveiwport */
  --width-inner: 1200;
  --font-size-base: 16;
  --gutter: 40;
  --text-color: #333;
  --color-orange: #ffb200;
  --color-gray-1: #acacac;
  --color-gray-2: #f2f2f2;
  --color-gray-3: #dddddd;
  --color-gray-4: #2a2f33;
  --color-gray-5: #757575;
  --color-red-1: #c44100;
  overflow-x: clip;
  @media (width < 1430px) {
    --pc: true; /* @container style(--pc: true) {} */
  }
  @media (width < 1024px) {
    --tb: true; /* @container style(--tb: true) {} */
    --gutter: 10;
  }
  @media (width < 768px) {
    --sp: true; /* @container style(--sp: true) {} */
  }
}
*,
*::before,
*::after {
  --font-size-slope: calc(
    (var(--font-size-max) - var(--font-size-min)) /
      (var(--viewport-max) - var(--viewport-min))
  );
  --font-size-intercept: calc(
    var(--font-size-min) - (var(--font-size-slope) * var(--viewport-min))
  );
  --font-size-preferred: calc(
    var(--font-size-intercept) * (1rem / var(--font-size-base)) +
      (var(--font-size-slope) * 100vw)
  );
  --font-size-responsive: clamp(
    calc(var(--font-size-min) * (1rem / var(--font-size-base))),
    var(--font-size-preferred),
    calc(var(--font-size-max) * (1rem / var(--font-size-base)))
  );
  --rem: calc(var(--value) / var(--font-size-base) * 1rem);
  box-sizing: border-box;
  font-size: var(--font-size-responsive);
}
*::before,
*::after {
  display: inline-block;
}
:where(*) {
  max-inline-size: 100%;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
}
:where(*:focus) {
  outline: none;
}
:where(*:focus-visible) {
  outline: 2px solid #005fcc; /* サイトのテーマカラー等、目立つ色に */
  outline-offset: 2px; /* 要素に被らないよう少し離す */
}
:where(html) {
  height: -webkit-fill-available;
  font-size: calc(var(--font-size-base) * 1px);
  scroll-behavior: smooth;
}
:where(html).is-open {
  body {
    overflow: hidden;
  }
  .header-nav {
    @container style(--tb: true) {
      height: 100vh;
      display: block !important;
      overflow: auto;
    }
  }
}
:where(body) {
  --font-size-min: 14;
  --font-size-max: 16;
  min-block-size: 100svb;
  background: url("/assets/img/bg.jpg") center / cover fixed;
  color: var(--text-color);
  font-family: "Noto-Medium";
  display: flex;
  flex-direction: column;
  line-break: strict;
  overflow-wrap: anywhere;
  text-size-adjust: 100%;
  word-break: normal;
  @container style(--sp: true) {
    background-image: url("/assets/img/bg-sp.jpg");
    background-position: left top;
    background-size: 100% auto;
  }
}
:where(canvas, iframe, img, picture, svg, video) {
  display: block;
}
:where(button, input, select, textarea) {
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}
:where(label, button, select, input[type="submit"]) {
  cursor: pointer;
}
:where(select) {
  color: inherit;
}
:where(textarea) {
  resize: none;
}
:where(a) {
  color: inherit;
  display: inline-block;
  transition: 0.2s;
}
:where(img) {
  height: auto;
}
:where(li) {
  list-style-type: "";
}
:where(table) {
  width: 100%;
  border-collapse: collapse;
}
:where(summary::-webkit-details-marker) {
  display: none;
}
:where(:has(> .inner)) {
  padding-inline: calc(var(--gutter) * 1px);
}
:where(.inner) {
  max-width: calc(var(--width-inner) * 1px);
  margin-inline: auto;
}
:where(:target) {
  scroll-margin-block: 5ex;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/*-----------------------------
コンポーネント
-----------------------------*/
.intro {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 0.6s ease,
    visibility 0.6s ease;
  .intro__loader,
  .intro__inner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
      opacity 0.4s ease,
      visibility 0.4s ease;
  }
  .intro__loader {
    opacity: 1;
    visibility: visible;
  }
  .intro__inner {
    opacity: 0;
    visibility: hidden;
  }
  .intro__loader__icon img {
    display: block;
    max-width: 100%;
    height: auto;
  }
}
.intro.is-showing-inner {
  .intro__loader {
    opacity: 0;
    visibility: hidden;
  }
  .intro__inner {
    opacity: 1;
    visibility: visible;
  }
}
.intro.is-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.section--slash {
  padding-bottom: 262px !important;
  position: relative;
  @container style(--tb: true) {
    padding-bottom: 152px !important;
  }
  &::before,
  &::after {
    width: 100%;
    height: 150px;
    content: "";
    position: absolute;
    left: 0;
    @container style(--tb: true) {
      height: 53px;
    }
  }
  &::before {
    bottom: 0;
    background-image: url(/assets/img/bg-2.png);
  }
  &::after {
    bottom: 60px;
    background-color: var(--color-gray-2);
    -webkit-transform: skewY(2.5deg);
    transform: skewY(2.5deg);
    @container style(--tb: true) {
      bottom: 30px;
    }
  }
  .chara {
    position: absolute;
    left: 14px;
    bottom: -46px;
    z-index: 2;
    @container style(--tb: true) {
      width: 196px;
      left: -34px;
    }
  }
}
.search-form {
  --font-size-min: 14;
  --font-size-max: 14;
  width: 200px;
  padding: 5px 10px;
  background-color: var(--color-gray-2);
  color: var(--color-gray-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  position: relative;
  .search-input {
    border: none;
    background-color: transparent;
    flex-grow: 1;
    font-family: "Oswald-Regular";
    &::placeholder {
      color: var(--color-gray-4);
    }
  }
  [data-mysuggest] {
    width: 100%;
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    ul {
      li {
        padding-inline: 10px;
        background-color: #fff;
        border: 1px solid var(--color-gray-2);
        cursor: pointer;
        line-height: 3;
        position: relative;
        &::after {
          width: 8px;
          height: 8px;
          border-top: 1px solid var(--color-gray-4);
          border-right: 1px solid var(--color-gray-4);
          content: "";
          font-size: 18px;
          position: absolute;
          top: 50%;
          right: 10px;
          translate: 0 -50%;
          rotate: 45deg;
        }
      }
      li:hover {
        background-color: var(--color-gray-2);
      }
    }
  }
  .search-button {
    width: 24px;
    height: 24px;
    border: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cg clip-path='url(%23clip0_358_3557)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M24.0067 22.4547L22.4547 24.0067L15.9987 17.5493C14.3093 18.8987 12.1973 19.74 9.86799 19.74C4.41466 19.74 -0.00534058 15.3187 -0.00534058 9.86667C-0.00534058 4.41467 4.41466 -0.00533295 9.86799 -0.00533295C15.32 -0.00533295 19.74 4.41467 19.74 9.86667C19.74 12.196 18.9 14.3093 17.5493 15.9973L24.0067 22.4547ZM9.86799 2.188C5.33066 2.188 2.18799 5.33067 2.18799 9.86667C2.18799 14.4027 5.33066 17.5453 9.86799 17.5453C14.404 17.5453 17.5467 14.4027 17.5467 9.86667C17.5467 5.33067 14.404 2.188 9.86799 2.188Z' fill='%232A2F33'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_358_3557'%3E%3Crect width='24' height='24' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")
      center / cover no-repeat;
    color: transparent;
    flex-shrink: 0;
    font-size: 0;
    line-height: 0;
    text-indent: -9999px;
    overflow: hidden;
  }
}
.news-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px 24px;
  @container style(--tb: true) {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }
  @container style(--sp: true) {
    grid-template-columns: repeat(1, 1fr);
  }
  li {
    background-color: #000;
    color: #fff;
    cursor: pointer;
    position: relative;
    a {
      width: 100%;
      height: 100%;
      padding: 10px;
      text-decoration: none;
    }
    .news-list__pickup {
      width: 80px;
      height: 80px;
      background: url(/assets/img/icon_pickup.png) center / contain no-repeat;
      pointer-events: none;
      position: absolute;
      top: 0%;
      left: 0%;
      translate: -40% -40%;
      z-index: 1;
      @container style(--sp: true) {
        width: 60px;
        height: 60px;
        translate: -10px -40%;
      }
    }
    figure {
      height: 100%;
      display: flex;
      flex-direction: column;
      .thumbnail {
        aspect-ratio: 16 / 8.4;
        background-color: var(--color-gray-2);
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
          transition: 0.2s;
        }
      }
      .thumbnail.is-movie {
        position: relative;
        &::before {
          font-size: 30px;
          width: 80px;
          height: 80px;
          content: "▲";
          border: 3px solid #fff;
          border-radius: 50%;
          color: #fff;
          display: grid;
          place-items: center;
          rotate: 90deg;
          position: absolute;
          top: 50%;
          left: 50%;
          translate: -50% -50%;
          z-index: 1;
        }
        &::after {
          width: 100%;
          height: 100%;
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          background-color: rgba(0, 0, 0, 0.5);
        }
      }
    }
    figure.video-card {
      padding: 10px;
    }
    figcaption {
      display: flex;
      flex-direction: column;
      gap: 32px;
      flex-grow: 1;
      h3 {
        margin-top: 16px;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        overflow: hidden;
        @container style(--sp: true) {
          -webkit-line-clamp: 2;
        }
      }
      .meta {
        --font-size-min: 14;
        --font-size-max: 14;
        margin-top: auto;
        display: flex;
        gap: 12px;
        justify-content: space-between;
        font-family: "Oswald-Medium";
        letter-spacing: 1.68px;
        .category {
          padding-inline: 8px;
          background-color: #fff;
          color: #000;
        }
        time {
          color: var(--color-gray-1);
          text-decoration: none !important;
        }
      }
    }
  }
  li:hover {
    color: var(--color-orange);
    figure {
      .thumbnail {
        img {
          scale: 1.1;
        }
      }
      figcaption {
        h3 {
          text-decoration: underline;
        }
      }
    }
  }
}
.news-list-home {
  grid-template-columns: repeat(6, 1fr);
  @container style(--sp: true) {
    width: 100%;
    grid-template-columns: repeat(1, 1fr);
  }
  li:nth-child(1),
  li:nth-child(2) {
    grid-column: span 3;
    @container style(--sp: true) {
      grid-column: span 1;
    }
    figcaption {
      h3 {
        -webkit-line-clamp: 2;
      }
    }
  }
  li:nth-child(n + 3) {
    grid-column: span 2;
    @container style(--sp: true) {
      grid-column: span 1;
    }
  }
}
.news-list-related {
  grid-template-columns: repeat(3, 1fr);
  @container style(--sp: true) {
    grid-template-columns: repeat(1, 1fr);
  }
}
.news-list-ranking {
  counter-reset: my-counter;
  align-items: end;
  gap: 92px 24px;
  @container style(--tb: true) {
    gap: 40px 24px;
  }
  @container style(--sp: true) {
    gap: 40px;
  }
  li {
    position: relative;
    &::before {
      --font-size-min: 32;
      --font-size-max: 52;
      width: 110px;
      height: 102px;
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      translate: -20% -50%;
      z-index: 1;
      @container style(--tb: true) {
        width: 76px;
        height: 71px;
      }
    }
    .news-list__rank {
      --font-size-min: 32;
      --font-size-max: 52;
      color: #fff;
      font-family: "Oswald-Bold";
      font-style: italic;
      line-height: 1;
      position: absolute;
      text-shadow:
        rgb(0, 0, 0) 3px 3px 1px,
        rgb(0, 0, 0) -3px 3px 1px,
        rgb(0, 0, 0) 3px -3px 1px,
        rgb(0, 0, 0) -3px -3px 1px,
        rgb(0, 0, 0) 3px 0px 1px,
        rgb(0, 0, 0) 0px 3px 1px,
        rgb(0, 0, 0) -3px 0px 1px,
        rgb(0, 0, 0) 0px -3px 1px;
      top: 0;
      left: 0;
      translate: -10% -48%;
      z-index: 1;
    }
    .thumbnail {
      img {
        width: 100%;
      }
    }
  }
  li:nth-of-type(n + 4) {
    &::before {
      background: url(/assets/img/back_rank.png) center / cover no-repeat;
    }
  }
  li:nth-of-type(-n + 3) {
    &::before {
      background: url(/assets/img/back_rank1.png) center / cover no-repeat;
    }
  }
  li:nth-child(2),
  li:nth-child(3) {
    @container style(--tb: true) {
      margin-top: 30px;
    }
    @container style(--sp: true) {
      margin-top: 0;
    }
  }
  li:nth-child(1) {
    grid-column: span 2;
    position: relative;
    @container style(--sp: true) {
      grid-column: span 1;
    }
    &::after {
      width: calc(100% - 56px);
      height: calc(100% + 56px);
      background: #fff url(/assets/img/bg_pickup.png) center / cover no-repeat;
      border: 3px solid #000;
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      translate: -50% -50%;
      z-index: -1;
      @container style(--tb: true) {
        width: calc(100% + 24px);
      }
      @container style(--tb: true) {
        height: calc(100% + 45px);
      }
    }
  }
  li:nth-child(2) {
    @container style(--sp: true) {
      margin-top: 30px;
    }
  }
}
.news-list-movie {
  grid-template-columns: repeat(2, 1fr);
  position: relative;
  z-index: 1;
  @container style(--sp: true) {
    grid-template-columns: repeat(1, 1fr);
  }
  li {
    figcaption {
      h3 {
        -webkit-line-clamp: 2;
      }
    }
  }
}
.page__title {
  padding: 62px 46px 100px;
  position: relative;
  @container style(--tb: true) {
    height: 186px;
    padding: 0;
  }
  @container style(--sp: true) {
    height: 130px;
  }
  &::before,
  &::after {
    width: 100%;
    height: 150px;
    content: "";
    position: absolute;
    left: 0;
    @container style(--tb: true) {
      height: 53px;
    }
  }
  &::before {
    top: calc(100% - 60px);
    background-image: url("/assets/img/bg-2.png");
    @container style(--tb: true) {
      top: calc(100% - 34px);
    }
  }
  &::after {
    top: calc(100%);
    background-color: var(--color-gray-2);
    -webkit-transform: skewY(2.5deg);
    transform: skewY(2.5deg);
    z-index: 1;
  }
  + * {
    margin-top: 60px;
    background-color: var(--color-gray-2);
    position: relative;
    z-index: 1;
    @container style(--tb: true) {
      margin-top: 30px;
    }
  }
  h2 {
    @container style(--tb: true) {
      position: absolute;
      top: 50%;
      left: 20px;
      translate: 0 calc(-50% + -15px);
    }
    @container style(--tb: true) {
      left: 10px;
    }
    img {
      width: auto;
      height: 87px;
      @container style(--tb: true) {
        max-width: 70%;
        max-height: 130px;
        height: auto;
      }
      @container style(--sp: true) {
        max-width: 50%;
        max-height: 130px;
      }
    }
  }
  .page__title__chara {
    max-width: 40%;
    position: absolute;
    right: 86px;
    @container style(--tb: true) {
      right: 1px;
    }
  }
  .page__title__chara--news {
    width: 291px;
    bottom: -30px;
    @container style(--sp: true) {
      width: 144px;
      bottom: -20px;
    }
  }
  .page__title__chara--ranking {
    width: 372px;
    bottom: -313px;
    right: -8px;
    @container style(--tb: true) {
      width: 147px;
      bottom: -31px;
    }
    @container style(--sp: true) {
      bottom: -90px;
    }
  }
  .page__title__chara--movie {
    width: 304px;
    bottom: 0;
    @container style(--tb: true) {
      bottom: -31px;
    }
    @container style(--sp: true) {
      bottom: 10px;
    }
  }
  .page__title__chara--game-goods {
    width: 424px;
    bottom: -30px;
    @container style(--pc: true) {
      right: 8px;
      bottom: -24px;
    }
    @container style(--sp: true) {
      bottom: -10px;
    }
  }
  .page__title__chara--about {
    width: 617px;
    bottom: -20px;
    right: 0;
    @container style(--sp: true) {
      bottom: -10px;
    }
  }
}
.buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  width: 100%;
  margin-top: 60px;
  @container style(--sp: true) {
    margin-top: 30px;
  }
  a,
  input[type="submit"] {
    --font-size-min: 14;
    --font-size-max: 18;
    padding: 12px 48px;
    font-family: "Noto-Bold";
    text-decoration: none;
    @container style(--sp: true) {
      width: 280px;
      text-align: center;
    }
  }
  .btn-primary {
    background-color: #000;
    color: var(--color-orange);
  }
  .btn-primary:hover {
    background-color: var(--color-orange);
    color: #000;
  }
}
.buttons--end {
  justify-content: flex-end;
}
.tags__list {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  @container style(--tb: true) {
    gap: 4px;
  }
  li {
    a {
      --font-size-min: 12;
      --font-size-max: 20;
      padding-inline: 22px;
      border-radius: 30px;
      border: 3px solid #000;
      background: #fff;
      font-family: "oswald-medium";
      font-weight: 700;
      text-decoration: none;
      @container style(--tb: true) {
        padding-block: 2px;
      }
    }
    a:hover {
      background-color: #000;
      color: #fff;
    }
  }
}
.title-primary {
  --font-size-min: 30;
  --font-size-max: 58;
  padding-left: 28px;
  border-left: 11px solid var(--color-orange);
  font-family: "Noto-Black";
  display: flex;
  align-items: center;
  gap: 27px;
  line-height: 1;
  position: relative;
  @container style(--tb: true) {
    padding-left: 10px;
    border-width: 5px;
    line-height: 1.4;
  }
  > span {
    --font-size-min: 12;
    --font-size-max: 29;
    margin-left: 10px;
    padding: 12px 27px;
    background-color: var(--color-orange);
    font-family: "Noto-Bold";
    display: inline-flex;
    align-items: flex-end;
    flex-shrink: 0;
    @container style(--tb: true) {
      padding: 2px 10px;
      position: absolute;
      top: calc(100% + 10px);
      left: -15px;
    }
    span {
      margin-inline: 5px;
      display: inline-block;
      font-family: "Oswald-Bold";
      font-size: 1.5862em;
    }
  }
}
.title-secondary {
  width: max-content;
  margin-inline: auto;
  padding: 10px 85px;
  background-color: #000;
  color: #fff;
  font-family: "oswald-bold";
  font-size: 24px;
  text-align: center;
}
.news-title_tertiary {
  --font-size-min: 16;
  --font-size-max: 27;
  margin-block: 60px;
  padding: 21px;
  border-block: 4px dotted #000;
  line-height: 150%;
  position: relative;
  @container style(--sp: true) {
    padding: 16px 10px;
  }
  &::before,
  &::after {
    width: 36px;
    height: 36px;
    content: "";
    background: url("/assets/img/chara-dragonball.png") no-repeat center / cover;
    display: block;
    position: absolute;
    @container style(--tb: true) {
      width: 22px;
      height: 22px;
    }
  }
  &::before {
    top: 0;
    left: 0;
    translate: 0 -50%;
  }
  &::after {
    bottom: 0;
    right: 0;
    translate: 0 50%;
  }
}
.news-title_secondary {
  --font-size-min: 16;
  --font-size-max: 22;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  line-height: 200%;
  &::before {
    content: "★";
    display: block;
    scale: 1.5;
    translate: 6px 0;
    transform: skew(-15deg);
  }
}
.news-title_secondary-triangle {
  font-family: "Noto-Bold";
  gap: 4px;
  &::before {
    content: "▼";
    scale: 1;
    translate: 0;
    transform: skew(0deg);
  }
}
.category-list-root {
  height: 130px;
  overflow-x: scroll;
  overflow-y: hidden;
  @container style(--sp: true) {
    height: 100px;
  }
  .category-list {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
    li {
      flex-shrink: 0;
      a {
        --font-size-min: 16;
        --font-size-max: 20;
        width: 117px;
        height: 117px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        font-family: "Oswald-Medium";
        line-height: 117px;
        text-align: center;
        text-decoration: none;
        @container style(--sp: true) {
          width: 88px;
          height: 88px;
          line-height: 88px;
        }
      }
    }
    li:nth-child(odd) {
      a {
        background-image: url("/assets/img/tab_odd.png");
      }
      a:hover {
        background-image: url("/assets/img/tab_odd-hv.png");
      }
    }
    li:nth-child(even) {
      a {
        background-image: url("/assets/img/tab_even.png");
      }
      a:hover {
        background-image: url("/assets/img/tab_even-hv.png");
      }
    }
    li.long {
      a {
        width: 167px;
        background-image: url("/assets/img/tab_long.png");
        letter-spacing: -0.02em;
        @container style(--sp: true) {
          width: 130px;
        }
      }
      a:hover {
        background-image: url("/assets/img/tab_long-hv.png");
      }
    }
    li.long.is-active {
      a {
        background-image: url("/assets/img/tab_active-long.png") !important;
      }
    }
    li.is-active {
      a {
        background-image: url("/assets/img/tab_active.png") !important;
        transform: rotate(5deg);
      }
    }
  }
}
.controls {
  margin-top: 45px;
  display: flex;
  align-items: center;
  gap: 48px;
  @container style(--tb: true) {
    margin-top: 10px;
    flex-direction: column;
    align-items: flex-end;
    gap: 20px;
  }
  .search-form {
    width: 490px;
    background-color: var(--color-gray-3);
    flex-grow: 0;
    @container style(--tb: true) {
      width: 100%;
    }
    .search-input {
      height: 36px;
    }
  }
  .custom-select {
    width: 215px;
    position: relative;
    @container style(--tb: true) {
      width: 100%;
    }
    .select-btn {
      width: 100%;
      padding: 13px 16px;
      background: #d7d7d7;
      border: none;
      border-radius: 30px;
      position: relative;
      text-align: center;
      .arrow {
        font-size: 12px;
        position: absolute;
        top: 50%;
        right: 16px;
        translate: 0 -50%;
      }
    }
    .select-btn[aria-expanded="true"] {
      border-radius: 24px 24px 0 0;
    }
    .select-menu {
      width: 100%;
      position: absolute;
      top: 100%;
      left: 0;
      background: #d7d7d7;
      border-radius: 0 0 24px 24px;
      padding: 10px 0;
      list-style: none;
      margin: 0;
      z-index: 10;
    }
    .select-menu li {
      cursor: pointer;
      text-align: center;
      button {
        width: 100%;
        padding: 12px 16px;
        border: none;
        background: transparent;
      }
    }
    .select-menu li.active {
      font-weight: bold;
    }
    .select-menu li:has(button:disabled) {
      color: #a0a0a0;
      cursor: not-allowed;
    }
  }
  .pickup__root {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 16px;
    .title {
      font-family: "Noto-Bold";
    }
    .pickup {
      width: 100px;
      display: flex;
      background: var(--color-gray-5);
      border-radius: 20px;
      font-family: "Oswald-Bold";
      overflow: hidden;
      label {
        flex: 1;
        text-align: center;
        padding: 6px 0;
        transition: all 0.2s ease;
      }
      label {
        color: white;
      }
      #on:focus-visible + label,
      #off:focus-visible + label {
        outline: 2px solid #005fcc;
        outline-offset: -2px;
      }
      #on:checked + label {
        background: var(--color-orange);
        color: black;
      }
      #off:checked + label {
        background: var(--color-orange);
        color: black;
      }
    }
  }
}
.pagination {
  display: flex;
  justify-content: center;
  gap: 2px;
  margin-top: 60px;
  li {
    height: 40px;
    flex-shrink: 0;
    position: relative;
    @container style(--sp: true) {
      min-width: 28px;
      height: 28px;
    }
    a,
    span {
      --font-size-min: 14;
      --font-size-max: 18;
      height: 100%;
      border: 4px solid #000;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: "Oswald-Medium";
    }
    a {
      background-color: #000;
      color: var(--color-orange);
      text-decoration: none;
    }
    a:hover,
    [aria-current="page"] {
      background-color: var(--color-orange);
      color: #000;
    }
    a:not(.first, .prev, .next, .last),
    [aria-current="page"] {
      padding-inline: 11px;
      @container style(--sp: true) {
        padding-inline: 4px;
      }
    }
    .first,
    .prev,
    .next,
    .last {
      background: transparent
        url(data:image/svg+xml;base64,PHN2ZwogICAgICAgICAgICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgICAgICAgICAgIHdpZHRoPSIyM3B4IgogICAgICAgICAgICBoZWlnaHQ9IjI1cHgiCiAgICAgICAgICAgIHZpZXdCb3g9IjAgMCAyMyAyNSIKICAgICAgICAgID4KICAgICAgICAgICAgPHBhdGgKICAgICAgICAgICAgICBmaWxsLXJ1bGU9ImV2ZW5vZGQiCiAgICAgICAgICAgICAgZmlsbD0iIzAwMDAwMCIKICAgICAgICAgICAgICBkPSJNMjMuMDEgMjUuMDMgTDEyLjM4IDI1LjAzIEwtMC4wMiAxMi41MCBMMTIuMzggLTAuMDIgTDIzLjAxIC0wLjAyIEwxMC42MSAxMi41MCBMMjMuMDEgMjUuMDMgWiIKICAgICAgICAgICAgPjwvcGF0aD4KICAgICAgICAgIDwvc3ZnPg==)
        right / 24px auto no-repeat;
      border: none;
      &:hover {
        background-color: transparent;
        background-image: url(data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2213px%22%20height%3D%2214px%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22%23ffb200%22%20d%3D%22M13.005%2C14.015%20L6.998%2C14.015%20L-0.010%2C7.002%20L6.998%2C-0.012%20L13.005%2C-0.012%20L5.997%2C7.002%20L13.005%2C14.015%20Z%22%2F%3E%3C%2Fsvg%3E);
      }
    }
    .next,
    .last {
      transform: rotate(180deg);
    }
    .first,
    .last {
      &::before {
        width: 7px;
        height: 24px;
        background: #000;
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        translate: 0 -50%;
        transition: background 0.2s;
      }
    }
    .first:hover,
    .last:hover {
      &::before {
        background: #ffb200;
      }
    }
    .pagination-ellipsis {
      width: 8px;
      height: 8px;
      border-color: transparent;
      color: #000;
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      translate: -50% -50%;
      background-color: currentColor;
      &::before,
      &::after {
        width: 8px;
        height: 8px;
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        translate: -50% -50%;
        background-color: currentColor;
      }
      &::before {
        translate: -14px -50%;
      }
      &::after {
        translate: 6px -50%;
      }
    }
  }
  li:has(.prev, .next) {
    width: 24px;
  }
  li:has(.first, .last) {
    width: 29px;
  }
  li:has(.prev) {
    margin-right: 21px;
    @container style(--sp: true) {
      margin-right: 6px;
    }
  }
  li:has(.next) {
    margin-left: 21px;
    @container style(--sp: true) {
      margin-left: 6px;
    }
  }
  li:has(.first) {
    margin-right: 6px;
    @container style(--sp: true) {
      margin-right: 1px;
    }
  }
  li:has(.last) {
    margin-left: 6px;
    @container style(--sp: true) {
      margin-left: 1px;
    }
  }
  li:has(.pagination-ellipsis) {
    width: 40px;
    @container style(--sp: true) {
      width: 30px;
    }
  }
}
#modal {
  width: 100dvw;
  height: 100dvh;
  display: grid;
  place-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  #modal_bg {
    background-color: rgba(0, 0, 0, 0.8);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  #modal_close {
    --font-size-min: 30;
    --font-size-max: 30;
    background-color: transparent;
    border: none;
    color: #fff;
    font-family: "Oswald-Bold";
    position: absolute;
    top: 20px;
    right: 20px;
  }
  .modal_content {
    width: min(790px, calc(100vw - 32px));
    max-height: calc(100vh - 160px);
    padding: 32px 40px;
    background-color: #fff;
    overflow-y: auto;
    position: relative;
    @container style(--tb: true) {
      padding: 20px 28px;
    }
    @container style(--sp: true) {
      padding: 15px 20px;
    }
    .title {
      --font-size-min: 18;
      --font-size-max: 30;
      margin-bottom: 30px;
      padding-bottom: 20px;
      border-bottom: 3px dotted #000;
      font-family: "noto-bold";
    }
    .thumb {
      width: 100%;
      img {
        width: 100%;
        height: auto;
      }
    }
    iframe {
      width: 100%;
      height: auto;
      aspect-ratio: 16/9;
    }
    time {
      --font-size-min: 14;
      --font-size-max: 20;
      display: block;
      margin-top: 16px;
      font-family: "Oswald-Medium";
    }
    > p {
      margin-top: 12px;
    }
    .modal_checkbox {
      margin-top: 20px;
      text-align: center;
      label {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        position: relative;
        line-height: 1;
        &::before {
          width: 16px;
          height: 16px;
          border: 2px solid var(--color-orange);
          content: "";
          flex: 0 0 auto;
        }
        &::after {
          content: "";
          display: none;
          position: absolute;
          top: 50%;
          left: 5px;
          width: 5px;
          height: 9px;
          border-right: 2px solid var(--color-orange);
          border-bottom: 2px solid var(--color-orange);
          transform: translateY(-65%) rotate(45deg);
          box-sizing: border-box;
        }
        .visually-hidden {
          width: calc(100% - 21px);
          height: 100%;
          right: 0;
        }
      }
      label:focus-within {
        outline: 2px solid #005fcc;
        outline-offset: 2px;
      }
      label:has(input:checked) {
        &::after {
          display: block;
        }
      }
    }
    .buttons {
      margin-top: 20px;
    }
  }
}
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* 高級感のある深いシースルー黒 */
  backdrop-filter: blur(4px); /* 背景を少しぼかすモダンブラウザのトレンド処理 */
  z-index: 9999; /* 必ず最前面に表示 */
  display: flex;
  align-items: center;
  justify-content: center;
  /* フェードイン・アウトのアニメーション用設定 */
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
  /* モーダルの中身の幅制限 */
  .modal-content {
    width: 90%;
    max-width: 1156px; /* 横幅の最大値（YouTubeが見やすいサイズ） */
    margin: auto;
    padding: 10px;
    background-color: #000;
    position: relative;
    /* 右上の「×」ボタン */
    .close-btn {
      --font-size-min: 28;
      --font-size-max: 30;
      position: absolute;
      top: -48px;
      right: 0;
      background: none;
      border: none;
      color: #ffffff;
      font-family: "Oswald-Bold";
      font-size: 32px;
      line-height: 1;
      cursor: pointer;
      padding: 0;
      transition: color 0.2s ease;
    }
    .close-btn:hover {
      color: #aaaaaa;
    }
    /* 動画（iframe）を入れる16:9のコンテナ */
    .iframe-container {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      background-color: #000000;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
      border: 1px solid #222222;
      /* iframeをコンテナいっぱいに広げる */
      iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
      }
    }
  }
  .modal-content:has(.img-container) {
    width: fit-content;
    max-width: calc(100vw - 32px);
    max-height: calc(100dvh - 32px);
    padding: 56px 20px 20px;
    background-color: transparent;
    position: relative;
    overflow: visible;
    .close-btn {
      top: 6px;
      right: 20px;
    }
    .img-container {
      display: grid;
      place-items: center;
      img {
        display: block;
        max-inline-size: calc(100vw - 72px);
        max-block-size: calc(100dvh - 120px);
        box-shadow: 0 0 10px #000;
        width: auto;
        height: auto;
        object-fit: contain;
        aspect-ratio: auto;
      }
    }
  }
}
/* JSで制御する非表示用のクラス（ふわっと消える） */
.modal-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none; /* クリックをすり抜けさせる */
}
.no-result {
  margin-block: 14vh;
  text-align: center;
}
.pc {
  display: revert;
  @container style(--tb: true) {
    display: none;
  }
}
.tb {
  display: none;
  @container style(--tb: true) {
    display: revert;
  }
  @container style(--sp: true) {
    display: none;
  }
}
.sp {
  display: none;
  @container style(--sp: true) {
    display: revert;
  }
}
.pc.tb {
  display: revert;
  @container style(--sp: true) {
    display: none;
  }
}
.tb.sp {
  display: none;
  @container style(--tb: true) {
    display: revert;
  }
}
/*-----------------------------
header
-----------------------------*/
.header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  @container style(--tb: true) {
    border-bottom: 9px solid #000;
  }
  .header-content {
    padding: 17px 40px;
    background-color: #fff;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    @container style(--tb: true) {
      padding: 5px 20px;
    }
    .header-content-left,
    .header-content-center,
    .header-content-right {
      display: flex;
      align-items: center;
    }
    .header-content-left {
      gap: 20px;
      @container style(--tb: true) {
        gap: 10px;
      }
      .logo {
        width: auto;
        height: 29px;
        @container style(--tb: true) {
          height: 17px;
        }
      }
    }
    .header-content-center {
      grid-column-start: 2;
      justify-self: center;
      img {
        width: auto;
        height: 75px;
        @container style(--tb: true) {
          height: 43px;
        }
      }
    }
    .header-content-right {
      grid-column-start: 3;
      justify-self: end;
      gap: 30px;
      #menu-toggle {
        width: 24px;
        height: 30px;
        border: 0;
        padding: 0;
        background: transparent;
        appearance: none;
        cursor: pointer;
        position: relative;
        .border {
          width: 24px;
          height: 5px;
          background: #272727;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translateX(-50%);
          transition: 0.3s;
        }
        .top {
          top: 0;
          transform-origin: top left;
        }
        .middle {
          top: 10px;
          transform-origin: top left;
        }
        .text {
          max-width: max-content;
          font-family: "Oswald-Bold";
          font-size: 10px;
          letter-spacing: 0.5px;
          position: absolute;
          bottom: -6px;
          left: 50%;
          text-align: center;
          translate: -50% 0;
          white-space: nowrap;
        }
        &.is-open {
          .top,
          .middle {
            top: 0;
          }
          .top {
            translate: 1px 5px;
            rotate: 30deg;
          }
          .middle {
            translate: -1px 5px;
            rotate: -30deg;
          }
        }
      }
      .search-form {
        @container style(--tb: true) {
          display: none;
        }
      }
      .language-button {
        --font-size-min: 18;
        --font-size-max: 18;
        border: none;
        background-color: transparent;
        font-family: "Oswald-Bold";
        display: flex;
        align-items: center;
        gap: 7px;
        @container style(--tb: true) {
          display: none;
        }
      }
    }
    .header-content-language {
      padding: 15px 20px;
      background-color: #000;
      font-family: "Oswald-Bold";
      position: absolute;
      top: 0;
      left: 100%;
      transition:
        translate 0.3s,
        display 0.3s allow-discrete;
      white-space: nowrap;
      &.is-show {
        translate: -100%;
        @starting-style {
          translate: 0;
        }
      }
      .language-menu-close {
        --font-size-min: 20;
        --font-size-max: 20;
        border: none;
        background-color: transparent;
        color: #fff;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 8px;
        svg {
          flex-shrink: 0;
        }
      }
      ul {
        margin-top: 18px;
        li {
          + li {
            margin-top: 10px;
          }
          a {
            --font-size-min: 18;
            --font-size-max: 18;
            color: var(--color-orange);
            display: flex;
            align-items: center;
            gap: 14px;
            text-decoration: none;
            svg {
              display: none;
            }
          }
          a:hover,
          a.is-active {
            svg {
              display: block;
            }
          }
        }
      }
    }
  }
  .header-nav {
    padding-block: 8px;
    padding-inline: 20px;
    background-color: #000;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    @container style(--tb: true) {
      padding: 40px 20px 90px;
      display: none;
      background: #000 url("/assets/img/bg_menu-sp.jpg") no-repeat
        center -25px / 100% auto;
      overflow-y: auto;
    }
    .nav-list {
      width: max-content;
      margin-inline: auto;
      display: flex;
      /* justify-content: center; */
      gap: 65px;
      white-space: nowrap;
      @container style(--pc: true) {
        /* gap: 20px; */
      }
      @container style(--tb: true) {
        width: auto;
        gap: 20px;
        flex-direction: column;
      }
      li {
        flex-shrink: 0;
        white-space: nowrap;
        .search-form {
          width: 100%;
        }
        a {
          color: #fff;
          font-family: "Oswald-Bold";
          font-size: 24px;
          display: flex;
          align-items: center;
          gap: 20px;
          line-height: 36px;
          text-decoration: none;
          white-space: nowrap;
          @container style(--pc: true) {
            /* gap: 10px;
            font-size: 20px; */
          }
          @container style(--tb: true) {
            gap: 20px;
            font-size: 24px;
            letter-spacing: 0.04em;
          }
          svg {
            flex-shrink: 0;
          }
        }
        a.is-current,
        a:hover {
          color: var(--color-orange);
        }
      }
      .home,
      .language,
      .links {
        @container style(--tb: true) {
          margin-top: 30px;
        }
      }
      .language {
        .title {
          color: var(--color-gray-1);
          font-family: "Oswald-Bold";
          font-size: 24px;
        }
        ul {
          display: flex;
          align-items: center;
          li {
            display: flex;
            align-items: center;
            &::after {
              margin-inline: 10px;
              content: "/";
              color: #fff;
              display: inline-block;
              font-size: 22px;
            }
          }
        }
      }
      .links {
        a {
          color: var(--color-gray-1);
          font-family: "noto-bold";
          font-size: 15px;
        }
      }
    }
  }
}
/*-----------------------------
main共通
-----------------------------*/
.main {
  padding-top: 164px;
  flex-grow: 1;
  overflow-x: clip;
  @container style(--tb: true) {
    padding-top: 65px;
  }
  #scroll-trigger {
    height: 1px; /* わずかな高さを確保 */
    width: 100%;
  }
}
/*-----------------------------
mainトップ
-----------------------------*/
.main--home {
  .sdcc-banner-wrap {
    padding: 15px 15px 30px;
    .sdcc-banner-contents {
      display: flex;
      justify-content: center;
    }
  }
  #jack {
    position: relative;
    display: block;
    width: 100%;
    z-index: 1;
    .jack-wrapper {
      position: relative;
      width: 100%;
      height: 100%;
      .jack-bg-color {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
      }
      .jack-mv {
        position: relative;
        width: 100%;
        height: 720px;
        left: 0;
        top: 0;
        background-color: #000;
        @container style(--tb: true) {
          height: 146.484375vw;
        }
        .jack-mv-bg {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          .jack-mv-bg-pc,
          .jack-mv-bg-sp {
            background-repeat: no-repeat;
            background-position: center;
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
          }
          .jack-mv-bg-pc {
            background-size: 1280px 720px;
          }
          .jack-mv-bg-sp {
            background-size: 100% auto;
          }
        }
        .jack-mv-inner {
          position: relative;
          max-width: 1280px;
          height: 100%;
          margin: 0 auto;
          pointer-events: none;
          z-index: 1;
          .jack-mv-btn {
            font-family: "noto-bold";
            position: absolute;
            width: 130px;
            height: 130px;
            pointer-events: auto;
            @container style(--tb: true) {
              width: 25.390625vw;
              height: 25.390625vw;
            }
            a {
              display: block;
              width: 100%;
              height: 100%;
              color: #fff;
              cursor: pointer;
              position: relative;
              z-index: 2;
            }
          }
          .jack-mv-btn.jack-mv-btn-type01 {
            font-size: 14px;
            font-weight: 800;
            text-align: center;
            background: #d30f1a;
            line-height: 1.2;
            @container style(--tb: true) {
              font-size: 2.8645833333vw;
              line-height: 3.3854166667vw;
            }
            &::before {
              content: "";
              width: 125px;
              height: 125px;
              border: 3px solid #fff;
              position: absolute;
              left: 50%;
              top: 50%;
              box-sizing: border-box;
              transform: translate3d(-50%, -50%, 0);
              pointer-events: none;
              z-index: 1;
              @container style(--tb: true) {
                width: 24.4791666667vw;
                height: 24.4791666667vw;
                border: 0.6510416667vw solid #fff;
              }
            }
            a {
              display: flex;
              justify-content: center;
              align-items: center;
              word-break: break-all;
              box-sizing: border-box;
              padding: 10px 10px;
              @container style(--tb: true) {
                padding: 1.8229166667vw 1.8229166667vw;
              }
            }
            p {
              height: fit-content;
              @container style(--tb: true) {
                font-size: 2.8645833333vw !important;
              }
              .jack-icon-arrow {
                width: 20px;
                height: 13px;
                margin-top: 6px;
                left: 50%;
                transform: translate3d(-50%, 0, 0);
                @container style(--tb: true) {
                  width: 3.90625vw;
                  height: 2.6041666667vw;
                  margin-top: 1.3020833333vw;
                }
              }
            }
          }
          .jack-mv-btn.jack-mv-btn-left {
            left: 40px;
            top: 200px;
            @container style(--tb: true) {
              left: 2.6041666667vw;
              top: 118.4895833333vw;
            }
          }
          .jack-mv-btn.jack-mv-btn-lefttop {
            left: 40px;
            top: 20px;
            @container style(--tb: true) {
              left: 2.6041666667vw;
              top: 2.6041666667vw;
            }
          }
          .jack-mv-btn.jack-mv-btn-center {
            left: 50%;
            top: 20px;
            transform: translate3d(-50%, 0, 0);
            @container style(--tb: true) {
              display: none;
            }
          }
          .jack-mv-btn.jack-mv-btn-right {
            right: 40px;
            top: 200px;
            @container style(--tb: true) {
              right: 2.6041666667vw;
              top: 118.4895833333vw;
            }
          }
          .jack-mv-btn.jack-mv-btn-righttop {
            right: 40px;
            top: 20px;
            @container style(--tb: true) {
              right: 2.6041666667vw;
              top: 2.6041666667vw;
            }
          }
          .jack-mv-btn.jack-mv-btn-type02 {
            display: flex;
            justify-content: center;
            align-items: center;
            a {
              width: fit-content;
              height: fit-content;
              max-width: 130px;
              max-height: 130px;
            }
          }
          .jack-mv-btn.jack-mv-btn-type01.jack-mv-btn-radius01 {
            border-radius: 130px;
            @container style(--tb: true) {
              border-radius: 25.390625vw;
            }
            &::before {
              border-radius: 24.4791666667vw;
            }
            a {
              padding: 12px;
              text-decoration: none;
            }
          }
        }
      }
      .jack-icon-arrow {
        content: "";
        position: relative;
        display: block;
        width: 20px;
        height: 13px;
        mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NCIgaGVpZ2h0PSIzMCIgdmVyc2lvbj0iMS4xIiBpZD0ic3ZnMSIgc29kaXBvZGk6ZG9jbmFtZT0iaWNvbl9hcnJvdy5zdmciIGlua3NjYXBlOnZlcnNpb249IjEuMy4yICgwOTFlMjBlLCAyMDIzLTExLTI1KSI+CiAgPGRlZnMgaWQ9ImRlZnMxIi8+CiAgPHNvZGlwb2RpOm5hbWVkdmlldyBpZD0ibmFtZWR2aWV3MSIgcGFnZWNvbG9yPSIjZmZmZmZmIiBib3JkZXJjb2xvcj0iIzAwMDAwMCIgYm9yZGVyb3BhY2l0eT0iMC4yNSIgaW5rc2NhcGU6c2hvd3BhZ2VzaGFkb3c9IjIiIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwLjAiIGlua3NjYXBlOnBhZ2VjaGVja2VyYm9hcmQ9IjAiIGlua3NjYXBlOmRlc2tjb2xvcj0iI2QxZDFkMSIgaW5rc2NhcGU6em9vbT0iNC44MTYzMjY1IiBpbmtzY2FwZTpjeD0iMjAuMDM2MDE3IiBpbmtzY2FwZTpjeT0iMTguMjcxMTg2IiBpbmtzY2FwZTp3aW5kb3ctd2lkdGg9IjE0NDAiIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjQ0OSIgaW5rc2NhcGU6d2luZG93LXg9IjAiIGlua3NjYXBlOndpbmRvdy15PSIyNSIgaW5rc2NhcGU6d2luZG93LW1heGltaXplZD0iMCIgaW5rc2NhcGU6Y3VycmVudC1sYXllcj0ic3ZnMSIvPgogIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZmlsbD0iI2ZmZmZmZiIgZD0iTSAyOS4zNTI3ODcsMzAgSCAxOC44OTAwNzYgTCAzMy41MzcyODgsMTUuMDAwNzI2IDE4Ljg5MDA3NiwwIEggMjkuMzUyNzg3IEwgNDQsMTUuMDAwNzI2IFogTSAxMC40NjI3MTIsMzAgSCAwIEwgMTQuNjQ3MjEzLDE1LjAwMDcyNiAwLDAgaCAxMC40NjI3MTIgbCAxNC42NDcyMTIsMTUuMDAwNzI2IHoiIGlkPSJwYXRoMSIgc3R5bGU9InN0cm9rZS13aWR0aDoxLjQ1NTg2Ii8+Cjwvc3ZnPg==")
          no-repeat center;
        mask-size: 100% auto;
        background: #fff;
      }
      .jack-movie-area {
        position: absolute;
        top: 0;
        width: 100%;
        height: 720px;
        max-width: 1280px;
        pointer-events: none;
        left: 50%;
        transform: translate3d(-50%, 0, 0);
        @container style(--tb: true) {
          position: relative;
          max-width: none;
          width: calc(100% - 5.2083333333vw);
          height: 53.3854166667vw;
          margin: 2.6041666667vw;
          box-sizing: border-box;
          border: 1.0416666667vw solid #000;
          left: unset;
          transform: unset;
        }
        a {
          display: block;
          width: 100%;
          height: 100%;
          pointer-events: auto;
        }
        img {
          width: 100%;
          height: auto;
        }
        iframe {
          width: 100%;
          height: 100%;
        }
        .jack-movie-next,
        .jack-movie-prev {
          display: none;
          @container style(--tb: true) {
            display: block;
            position: absolute;
            top: 50%;
            width: 10.4166666667vw;
            height: 10.4166666667vw;
            transform: translate3d(0, -50%, 0);
            background: url(/assets/img/btn_slide_arrow.jpg) no-repeat center;
            background-size: 100%;
            z-index: 3;
            pointer-events: auto;
          }
        }
        .jack-movie-next {
          right: 0;
        }
        .jack-movie-prev {
          left: 0;
          transform: translate3d(0, -50%, 0) scale(-1, 1);
        }
        .jack-movie-inner {
          position: absolute;
          width: 100%;
          height: 100%;
          left: 0;
          top: 0;
        }
        .jack-movie-main,
        .jack-movie-sub {
          .jack-movie-thumbnail {
            img {
              transition: transform 300ms;
            }
          }
        }
        .jack-movie-main:hover,
        .jack-movie-sub:hover,
        .jack-movie-sub:focus-within {
          .jack-movie-thumbnail {
            img {
              transform: scale(1.05);
            }
          }
        }
        .jack-movie-main {
          position: absolute;
          width: 320px;
          height: 180px;
          cursor: pointer;
          @container style(--tb: true) {
            position: static;
            width: 100%;
            height: 100%;
          }
          .jack-movie-thumbnail {
            pointer-events: auto;
            &::before {
              content: "";
              position: absolute;
              left: 50%;
              top: 50%;
              width: 50px;
              height: 50px;
              transform: translate3d(-50%, -50%, 0);
              background: url(/assets/img/jack/btn_play.png) no-repeat center
                top;
              background-size: 100% 100%;
              pointer-events: none;
              z-index: 1;
            }
          }
        }
        .jack-movie-main.jack-movie-main-left {
          left: 40px;
          bottom: 40px;
        }
        .jack-movie-main.jack-movie-main-top {
          left: 50%;
          bottom: 270px;
          transform: translate3d(-50%, 0, 0);
          @container style(--tb: true) {
            transform: translate3d(0, 0, 0);
          }
        }
        .jack-movie-main.jack-movie-main-bottom {
          left: 50%;
          bottom: 40px;
          transform: translate3d(-50%, 0, 0);
          @container style(--tb: true) {
            transform: translate3d(0, 0, 0);
          }
        }
        .jack-movie-main.jack-movie-main-right {
          right: 40px;
          bottom: 40px;
        }
        .jack-movie-thumbnail {
          position: absolute;
          width: 100%;
          height: 100%;
          left: 0;
          top: 0;
          overflow: hidden;
          box-sizing: border-box;
          border: 4px solid #000;
          @container style(--tb: true) {
            border: none;
          }
        }
      }
      .jack-movie-area.js-movie-sub {
        position: relative;
        width: 800px;
        height: auto;
        margin: -260px auto 0;
        padding: 0 0 20px 0;
        left: 0;
        transform: translate3d(0, 0, 0);
        pointer-events: auto;
        border: none;
        @container style(--tb: true) {
          width: calc(100% - 5.2083333333vw);
          height: auto;
          margin: 2.6041666667vw 2.6041666667vw 0;
          padding-bottom: 2.6041666667vw;
        }
        .jack-movie-main {
          position: relative;
          width: 100%;
          height: 450px;
          @container style(--tb: true) {
            height: 53.3854166667vw;
            border: 0.5208333333vw solid #000;
            box-sizing: border-box;
          }
        }
        .jack-movie-sub-area {
          display: flex;
          justify-content: center;
          margin-top: 16px;
          @container style(--tb: true) {
            margin-top: 1.5625vw;
          }
          .jack-movie-sub {
            position: relative;
            width: 190px;
            height: 107px;
            margin-left: 13px;
            cursor: pointer;
            > button {
              width: 100%;
              height: 100%;
              display: block;
              padding: 0;
              background: none;
              border: 0;
              cursor: pointer;
            }
            > button:focus-visible {
              outline: 3px solid #ffffff;
              outline-offset: 3px;
            }
            @container style(--tb: true) {
              width: 22.5260416667vw;
              height: 12.6302083333vw;
              margin-left: 1.5625vw;
              border: 0.5208333333vw solid #000;
              box-sizing: border-box;
            }
            &::before {
              content: "";
              position: absolute;
              width: 100%;
              height: 100%;
              left: 0;
              top: 0;
              z-index: 1;
              background: rgba(0, 0, 0, 0.4);
              pointer-events: none;
            }
          }
          .jack-movie-sub.is-current::before {
            background-image: url(/assets/img/jack/img_thumbnail_current.png);
            background-size: cover;
            background-color: rgba(0, 0, 0, 0.8);
          }
          .jack-movie-sub:first-of-type {
            margin-left: 0;
          }
        }
      }
      .jack-link {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        a {
          --font-size-min: 20;
          --font-size-max: 20;
          display: block;
          width: 100%;
          height: 100%;
          color: #fff;
          font-family: "noto-bold";
          @container style(--tb: true) {
            font-size: 3.3854166667vw;
          }
        }
        a:hover {
          text-decoration: none;
        }
        .jack-link-text {
          position: relative;
          width: 100%;
          .jack-link-text-inner {
            position: relative;
            width: fit-content;
            max-width: 1024px;
            height: 100%;
            min-height: 80px;
            margin: 0 auto;
            padding: 20px 0;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: opacity 300ms;
            @container style(--tb: true) {
              max-width: 76.8229166667vw;
              min-height: 15.625vw;
              padding: 3.3854166667vw 0;
            }
            .jack-icon-arrow {
              position: absolute;
              right: -60px;
              top: 50%;
              width: 22px;
              height: 15px;
              transform: translate3d(0, -50%, 0);
              @container style(--tb: true) {
                right: -7.8125vw;
                width: 5.7291666667vw;
                height: 3.90625vw;
              }
            }
          }
        }
        .jack-link-text:hover {
          .jack-link-text-inner {
            opacity: 0.7;
          }
        }
      }
    }
  }
  .splide {
    position: relative;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    .splide__slide {
      a,
      img {
        width: 100%;
      }
      img {
        aspect-ratio: 40 / 21;
        object-fit: cover;
      }
    }
    .slide__pagenation__root {
      height: 94px;
      background-color: #000;
      overflow: hidden;
      position: relative;
      top: -5px;
      @container style(--sp: true) {
        height: 34px;
      }
      &::before,
      &::after {
        content: "";
        position: absolute;
        top: 50%;
        translate: 0 -50%;
        width: 670px;
        height: 550px;
        background: url("/assets/img/slide_line.png") no-repeat center / cover;
        @container style(--tb: true) {
          width: 421px;
          height: 262px;
        }
        @container style(--sp: true) {
          width: 50%;
          height: 100%;
          background-size: auto 61.017vw;
        }
      }
      &::before {
        scale: -1 1;
        left: 0;
      }
      &::after {
        right: 0;
      }
    }
    .splide__pagination {
      display: flex;
      justify-content: center;
      gap: 18px;
      bottom: 36px;
      @container style(--sp: true) {
        bottom: 15px;
      }
      li {
        width: 24px;
        height: 24px;
        position: relative;
        @container style(--sp: true) {
          width: 2.608vw;
          height: 2.608vw;
        }
        .splide__pagination__page {
          width: 100%;
          height: 100%;
          margin: 0;
          background-color: #fff;
          opacity: 1;
          position: absolute;
          left: 0;
          top: 0;
          &.is-active {
            background-color: var(--color-orange);
            background-image: url("/assets/img/icon_star.svg");
            background-position: center;
            background-repeat: no-repeat;
            background-size: 70%;
            transform: scale(1);
          }
        }
      }
    }
  }
  .news {
    padding-block: 136px;
    position: relative;
    @container style(--pc: true) {
      padding: 210px 10px 40px;
    }
    .inner {
      width: 894px;
      max-width: calc(100vw - 460px);
      position: relative;
      @container style(--tb: true) {
        max-width: calc(100vw - 270px);
      }
      @container style(--sp: true) {
        max-width: 100%;
      }
    }
    .news-title {
      position: absolute;
      top: 0;
      left: 0;
      translate: calc(-100% - 10px) -20%;
      z-index: -2;
      @container style(--pc: true) {
        width: 120px !important;
        left: 50%;
        translate: -50% -90%;
        rotate: -90deg;
        z-index: 0;
      }
      @container style(--sp: true) {
        width: 100px !important;
      }
      &:lang(de) {
        @container style(--pc: true) {
          translate: -50% -80%;
        }
      }
      &:lang(es) {
        width: 130px;
        translate: calc(-100% - 10px) -27%;
        @container style(--pc: true) {
          translate: -50% -72%;
        }
        @container style(--sp: true) {
          width: 70px !important;
        }
      }
    }
    .news-list {
      margin-inline: auto;
    }
    .chara {
      position: absolute;
      z-index: -1;
    }
    .chara-1 {
      bottom: 0;
      left: 0;
      translate: calc(-100% + 54px) 18%;
      @container style(--pc: true) {
        /* width: 103px;
        top: 0;
        bottom: unset;
        translate: 0 -95%; */
        translate: calc(-100% + 54px) 6%;
      }
      @container style(--tb: true) {
        width: 180px;
      }
      @container style(--sp: true) {
        width: 140px;
        top: 0;
        bottom: unset;
        translate: 0 -75%;
        left: -20px;
      }
    }
    .chara-2 {
      top: 0;
      right: 0;
      translate: calc(100% - 12px) 4%;
      @container style(--pc: true) {
        /* width: 117px;
        top: 0;
        translate: 0 -62%; */
      }
      @container style(--tb: true) {
        width: 180px;
      }
      @container style(--sp: true) {
        width: 155px;
        top: 0;
        translate: 0 -50%;
        right: -50px;
      }
    }
  }
  .banner {
    padding: 70px 120px;
    background-color: #fff;
    @container style(--tb: true) {
      padding: 40px 10px;
    }
    .banner__list {
      display: grid;
      gap: 20px 24px;
      grid-template-columns: repeat(4, 1fr);
      @container style(--tb: true) {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
      }
      li {
        a,
        img {
          width: 100%;
        }
      }
    }
  }
}
/*-----------------------------
mainニュース
-----------------------------*/
.main--news {
  .popular-tags {
    padding: 36px 45px;
    background: url(/assets/img/dot_gray_sp.png);
    position: relative;
    @container style(--tb: true) {
      padding: 30px 20px 20px;
      border-block: 5px solid #000;
    }
    .popular-tags-root {
      display: flex;
      align-items: center;
      gap: 44px;
      .popular-tags__title {
        --font-size-min: 18;
        --font-size-max: 34;
        padding: 12px 15px;
        background-color: #000;
        color: #fff;
        font-family: "Noto-Black";
        flex-shrink: 0;
        white-space: nowrap;
        @container style(--tb: true) {
          padding: 3px 10px;
          position: absolute;
          top: 0;
          left: 50%;
          translate: -50% -50%;
        }
      }
      .tags__list {
        @container style(--tb: true) {
          justify-content: center;
        }
      }
    }
  }
  .news {
    padding-block: 40px;
    background-color: var(--color-gray-2);
    @container style(--tb: true) {
      padding-block: 20px;
    }
    .news-list {
      margin-top: 60px;
      @container style(--sp: true) {
        margin-top: 30px;
      }
    }
  }
}
.main--news-post {
  .news-post {
    .news-post__header {
      .news-post__meta {
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
        font-family: "Oswald-Medium";
        time {
          --font-size-min: 12;
          --font-size-max: 22;
        }
        .category {
          --font-size-min: 12;
          --font-size-max: 20;
          background-color: #000;
          color: #fff;
          padding: 5px 38px;
          @container style(--tb: true) {
            padding: 2px 20px;
          }
        }
      }
      .news-post__title {
        --font-size-min: 16;
        --font-size-max: 30;
        margin-top: 20px;
        font-family: "Noto-Bold";
      }
      .tags__list {
        margin-top: 20px;
        padding-top: 30px;
        border-top: 4px dotted #000;
        @container style(--tb: true) {
          padding-top: 20px;
        }
      }
    }
    .news-post__body {
      margin-top: 20px;
      > * {
        margin-top: 20px;
      }
      p,
      li {
        --font-size-min: 12;
        --font-size-max: 18;
        line-height: 200%;
        @container style(--tb: true) {
          line-height: 150%;
        }
      }
      ul:not([class]) {
        li {
          display: flex;
          align-items: flex-start;
          &::before {
            content: "・";
          }
        }
      }
      iframe {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
      }
      a:not([class]) {
        color: var(--color-red-1);
        font-family: "noto-bold";
      }
      a:hover {
        text-decoration: none;
      }
      img:not(a img) {
        cursor: pointer;
        transition: translate 0.2s ease;
      }
      img:not(a img):hover {
        translate: 0 -5px;
      }
      .gray-box {
        margin: 30px 0;
        padding: 40px 40px 25px;
        background: #ddd;
        @container style(--sp: true) {
          margin-bottom: 2.608vw;
          padding: 5.215vw 5.215vw 1.956vw;
        }
      }
      .section_survey {
        margin-top: 80px;
        border: none;
        p + .notice {
          margin-top: 10px;
        }
        textarea {
          --font-size-min: 14;
          --font-size-max: 18;
          margin-top: 20px;
          width: 100%;
          padding: 6px 15px;
          background-color: var(--color-gray-3);
          border: none;
          line-height: 200%;
          @container style(--sp: true) {
            line-height: 250%;
          }
          + * {
            margin-top: 10px;
          }
        }
        textarea::placeholder {
          color: var(--color-gray-4);
        }
        .news-title_survey {
          --font-size-min: 18;
          --font-size-max: 20;
          font-family: "Noto-Bold";
          line-height: 150%;
          + * {
            margin-top: 20px;
          }
        }
        .news-survey__image {
          img {
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
          }
          + * {
            margin-top: 80px;
          }
        }
        .news-survey__image--center {
          img {
            margin-inline: auto;
          }
        }
        .news-survey-list {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 60px;
          @container style(--tb: true) {
            gap: 45px;
          }
          @container style(--sp: true) {
            gap: 30px;
          }
          + .news-survey-list {
            margin-top: 60px;
          }
          li {
            label {
              --font-size-min: 16;
              --font-size-max: 20;
              display: flex;
              align-items: center;
              font-family: "Noto-Bold";
              line-height: 150%;
              position: relative;
            }
            label:focus-within {
              outline: 2px solid #005fcc;
              outline-offset: 2px;
            }
            label::before,
            label::after {
              flex-shrink: 0;
            }
            label::before {
              content: "";
              background-color: #fff;
              display: inline-block;
              width: 30px;
              height: 30px;
              margin-right: 10px;
              border: 2px solid;
              @container style(--sp: true) {
                width: 24px;
                height: 24px;
              }
            }
            label::after {
              content: "";
              width: 20px;
              height: 20px;
              background-color: #ff8400;
              position: absolute;
              left: 5px;
              top: 50%;
              display: none;
              translate: 0 -50%;
              @container style(--sp: true) {
                width: 16px;
                height: 16px;
                left: 4px;
              }
            }
            label:has(input:checked)::before {
              border-color: #ff8400;
            }
            label:has(input:checked)::after {
              display: block;
            }
            label:has(input[type="radio"])::before,
            label:has(input[type="radio"])::after {
              border-radius: 50%;
            }
            p {
              --font-size-min: 14;
              --font-size-max: 16;
              margin-top: 10px;
              line-height: 150%;
            }
            .news-survey__image {
              margin-top: 30px;
            }
          }
        }
        .news-survey-list + .notice {
          margin-top: 20px;
        }
        .news-survey-list--1col {
          li {
            grid-column: 1;
            @container style(--sp: true) {
              grid-column: span 2;
            }
            .news-survey__image {
              img {
                @container style(--sp: true) {
                  width: 100%;
                }
              }
            }
          }
        }
        .news-survey-list--2col {
          li {
            grid-column: span 2;
          }
        }
      }
      .notice {
        color: #de0000;
        font-family: "Noto-Bold";
      }
      .notice-2 {
        --font-size-min: 16;
        --font-size-max: 16;
        margin-top: 70px;
        font-family: "Noto-Bold";
      }
      .news-post__image {
        img {
          width: 100%;
        }
      }
      .news-title_primary-root {
        margin-top: 60px;
        background-color: var(--color-gray-3);
        border: #000 5px solid;
        position: relative;
        @container style(--sp: true) {
          margin-top: 30px;
          border-width: 2px;
        }
        &::before {
          content: "";
          width: 154px;
          height: 184px;
          background: url("/assets/img/chara-shenron.png") no-repeat center /
            cover;
          display: block;
          position: absolute;
          bottom: -40px;
          left: -68px;
          z-index: 1;
          @container style(--tb: true) {
            width: 65px;
            height: 78px;
            bottom: -20px;
            left: -28px;
          }
        }
        .news-title_primary {
          --font-size-min: 16;
          --font-size-max: 27;
          padding: 30px 70px;
          font-family: "Noto-Bold";
          position: relative;
          line-height: 200%;
          @container style(--tb: true) {
            padding: 20px 34px;
            line-height: 150%;
          }
          &::before,
          &::after {
            width: 72px;
            height: 35px;
            background: url("/assets/img/chara-kintoun.png") no-repeat center /
              cover;
            content: "";
            display: block;
            position: absolute;
            @container style(--tb: true) {
              width: 30px;
              height: 15px;
            }
          }
          &::before {
            top: 0;
            left: 20px;
            translate: -50% -50%;
            scale: -1 1;
            @container style(--tb: true) {
              left: 5px;
            }
          }
          &::after {
            bottom: 0;
            right: 20px;
            translate: 50% 50%;
            @container style(--tb: true) {
              right: 5px;
            }
          }
        }
        + * {
          margin-top: 60px;
          @container style(--sp: true) {
            margin-top: 40px;
          }
        }
      }
      .sns-area {
        width: 522px;
        aspect-ratio: 2.45 / 1;
        margin: 60px -23px 0 auto;
        background: url(/assets/img/bg_share_.png) no-repeat center center;
        background-size: 524px auto;
        position: relative;
        z-index: 2;
        @container style(--sp: true) {
          width: 340px;
          margin: 30px 0 0 auto;
          background-size: 340px auto;
        }
        h5 {
          font-size: 70px;
          position: absolute;
          top: 47px;
          left: -3px;
          font-family: "Oswald-Bold";
          -webkit-transform: rotate(-5deg);
          transform: rotate(-5deg);
          @container style(--sp: true) {
            font-size: 50px;
            top: 24px;
            transform: rotate(-6deg);
          }
        }
        ol {
          li {
            position: absolute;
            bottom: -20px;
            left: 129px;
            width: 100px;
            height: 100px;
            background: transparent url(/assets/img/bg_sns.png) no-repeat center
              center;
            background-size: 100px auto;
            transition: all 0.2s ease;
            @container style(--sp: true) {
              width: 68px;
              height: 68px;
              background-size: 68px auto;
              bottom: -18px;
              left: 92px;
            }
            a {
              display: block;
              width: 100%;
              height: 100%;
              overflow: hidden;
              text-indent: 100%;
              white-space: nowrap;
              background-image: url(data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20focusable%3D%22false%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20595.275%20841.891%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M493.541%2C473.562L516.923%2C321.2H370.727v-98.872c0-41.684%2C20.423-82.313%2C85.898-82.313h66.463V10.295%20c0%2C0-60.313-10.293-117.979-10.293c-120.396%2C0-199.093%2C72.975-199.093%2C205.078v116.121H72.187v152.362h133.83v368.325h164.71%20V473.562H493.541z%22%2F%3E%3C%2Fsvg%3E);
              background-size: auto 42px;
              background-repeat: no-repeat;
              background-position: center center;
              transition: -webkit-transform 0.1s ease-out;
              transition: transform 0.1s ease-out;
              transition:
                transform 0.1s ease-out,
                -webkit-transform 0.1s ease-out;
              @container style(--sp: true) {
                background-size: auto 28px;
              }
            }
          }
          li:hover {
            scale: 1.1;
          }
          li.x {
            left: 239px;
            @container style(--sp: true) {
              left: 165px;
            }
            a {
              background-image: url(/assets/img/icon_x.png);
              background-size: 34px auto;
              @container style(--sp: true) {
                background-size: auto 22px;
              }
            }
          }
        }
        + * {
          margin-top: 40px;
        }
      }
    }
    .news-post__footer {
      .buttons {
        @container style(--tb: true) {
          justify-content: center;
        }
      }
      .related {
        h5 {
          --font-size-min: 14;
          --font-size-max: 22;
          margin-top: 50px;
          padding-left: 15px;
          border-left: 4px solid #000;
          font-family: "Noto-Bold";
          line-height: 1;
          + * {
            margin-top: 15px;
          }
        }
        .box {
          padding: 20px;
          background: url(/assets/img/dot.png);
          @container style(--tb: true) {
            padding: 12px;
          }
        }
        .box:has(.news-list-related) {
          @container style(--sp: true) {
            padding: 0;
            background: none;
          }
        }
        .news-list {
          padding: 54px 116px;
          @container style(--tb: true) {
            padding: 0;
          }
        }
      }
    }
  }
}
.main--news-post--survey {
  .inner {
    --width-inner: 1100;
  }
}
.main--news-search {
  .news {
    .title-primary {
      --font-size-min: 24;
      --font-size-max: 50;
      margin-top: 60px;
      @container style(--sp: true) {
        margin-top: 48px;
      }
    }
    .news-title_secondary-triangle {
      margin-top: 40px;
      @container style(--sp: true) {
        margin-top: 32px;
      }
      + .tags__list {
        margin-top: 16px;
        @container style(--sp: true) {
          margin-top: 10px;
        }
      }
    }
    .news-list {
      margin-top: 30px;
    }
  }
}
/*-----------------------------
mainランキング
-----------------------------*/
.main--ranking {
  .page__title {
    h2 {
      img {
        @container style(--pc: true) {
          max-width: 60%;
          height: auto;
        }
      }
    }
  }
  .news-list {
    margin-top: 113px;
    @container style(--sp: true) {
      margin-top: 90px;
    }
  }
  .page__title {
    img:lang(de) {
      @container style(--sp: true) {
        max-width: 65%;
      }
    }
  }
}
/*-----------------------------
mainムービー
-----------------------------*/
.main--movie,
.main--home {
  .movie-pickup {
    .pickup {
      margin-top: 60px;
      padding: 75px 40px 50px;
      background: url(/assets/img/bg_pickup.png) no-repeat center / cover;
      border: 3px solid #000;
      position: relative;
      @container style(--tb: true) {
        margin-top: 25px;
        max-inline-size: initial;
        margin-inline: calc((100% - 100dvi) / 2);
        padding: 28px 10px;
        border-inline: none;
      }
      &::before,
      &::after {
        content: "";
        position: absolute;
      }
      &::before {
        width: 149px;
        height: 122px;
        background: url(/assets/img/pickup.png) no-repeat center / contain;
        top: -46px;
        left: 49px;
        @container style(--tb: true) {
          width: 105px;
          height: 85px;
          left: unset;
          right: -20px;
        }
      }
      &::after {
        width: 164px;
        height: 112px;
        background: url(/assets/img/pickup_chara.png) no-repeat center / contain;
        top: -40px;
        left: -10px;
        @container style(--tb: true) {
          width: 122px;
          height: 84px;
          top: -45px;
          left: unset;
          right: 10px;
        }
      }
    }
  }
  .movie {
    padding-top: 92px;
    background-color: var(--color-gray-2);
    @container style(--tb: true) {
      padding-top: 40px;
    }
    .category-list-root {
      margin-top: 18px;
    }
    .news-list {
      margin-top: 62px;
    }
  }
}
/*-----------------------------
mainゲーム＆グッズ
-----------------------------*/
.main--game-goods {
  .page__title {
    h2 {
      img {
        @container style(--pc: true) {
          max-width: 60%;
          height: auto;
        }
      }
    }
  }
  .game-goods {
    .title-secondary {
      @container style(--sp: true) {
        width: 100%;
        padding: 0;
      }
      button {
        font-size: 24px;
      }
      button:disabled {
        background: none;
        border: none;
        pointer-events: none;
      }
      button:not(:disabled) {
        width: 100%;
        background-color: #000;
        padding: 5px 16px;
        display: flex;
        gap: 20px;
        align-items: center;
        justify-content: center;
        @container style(--sp: true) {
          padding: 4px 12px;
        }
      }
      button:not(:disabled)::after {
        content: "";
        width: 12px;
        height: 12px;
        border-right: 4px solid #fff;
        border-bottom: 4px solid #fff;
        transform: rotate(45deg); /* 下矢印 */
        transition: transform 0.2s ease;
      }
      button[aria-expanded="true"]::after {
        @container style(--sp: true) {
          transform: rotate(-135deg); /* 上矢印 */
        }
      }
    }
    .game-goods__cards {
      margin-top: 40px;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 30px 24px;
      @container style(--tb: true) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
      }
      @container style(--sp: true) {
        margin-top: 30px;
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
      }
      .game-goods__card {
        .game-goods__media {
          display: grid;
          gap: 16px;
          .game-goods__main {
            position: relative;
            .game-goods__video-card {
              position: relative;
              margin: 0;
              cursor: pointer;
              outline-offset: 4px;
            }
            .game-goods__video-card:focus-visible {
              outline: 2px solid #000;
            }
            .game-goods__video-thumbnail {
              position: relative;
              overflow: hidden;
            }
            .game-goods__video-thumbnail {
              &::before {
                font-size: 30px;
                width: 80px;
                height: 80px;
                content: "▲";
                border: 3px solid #fff;
                border-radius: 50%;
                color: #fff;
                display: grid;
                place-items: center;
                rotate: 90deg;
                position: absolute;
                top: 50%;
                left: 50%;
                translate: -50% -50%;
                z-index: 1;
              }
              &::after {
                width: 100%;
                height: 100%;
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                background-color: rgba(0, 0, 0, 0.5);
              }
            }
            .game-goods__video-card img {
              transition: transform 300ms;
            }
            .game-goods__video-card:hover img,
            .game-goods__video-card:focus-within img,
            .game-goods__video-card:focus-visible img {
              transform: scale(1.05);
            }
            .splide__pagination {
              position: static;
              margin-top: 12px;
              display: flex;
              justify-content: center;
              gap: 16px;
            }
            .splide__pagination__page {
              width: 8px;
              height: 8px;
              margin: 0;
              border: 0;
              border-radius: 999px;
              background-color: #c4c4c4;
              opacity: 0.5;
            }
            .splide__pagination__page.is-active {
              width: 10px;
              height: 10px;
              background-color: #000;
              opacity: 1;
              transform: none;
            }
          }
        }
        .game-goods__body {
          margin-top: 12px;
          .game-goods__title {
            font-family: "Noto-Bold";
            font-size: 16px;
            line-height: 24px;
          }
          .game-goods__platforms {
            margin-top: 10px;
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            li {
              padding: 2px 8px;
              border: 1px solid #b9b8b8;
              border-radius: 2px;
              font-family: "Noto-Bold";
              font-size: 14px;
            }
          }
          .game-goods__release {
            margin-top: 10px;
            color: var(--color-gray-4);
            font-family: "Noto-Regular";
            display: flex;
            gap: 4px;
            align-items: center;
          }
          .game-goods__actions {
            margin-top: 16px;
            display: flex;
            justify-content: space-between;
            gap: 8px;
            a {
              padding: 8px 18px;
              border: 1px solid #000;
              background-color: #fff;
              font-family: "Noto-Bold";
              font-size: 14px;
              flex-grow: 1;
              text-align: center;
              text-decoration: none;
              transition: 0.2s;
              @container style(--sp: true) {
                padding-inline: 8px;
              }
            }
            a:hover {
              background-color: #000;
              color: #fff;
            }
          }
          .game-goods__sns {
            margin-top: 10px;
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            img {
              width: 28px;
            }
          }
        }
      }
    }
    .game-goods__cards--game {
      li:nth-child(6) {
        grid-column-start: 1;
      }
    }
    .game-goods__cards--goods {
      @container style(--tb: true) {
        grid-template-columns: repeat(8, minmax(0, 1fr));
      }
      li {
        @container style(--tb: true) {
          grid-column-end: span 4;
        }
        @container style(--sp: true) {
          grid-column-end: span 1;
        }
      }
      li:first-child {
        grid-column-start: 2;
        @container style(--tb: true) {
          grid-column-start: 3;
        }
        @container style(--sp: true) {
          grid-column-start: 1;
        }
      }
      li:nth-child(2) {
        grid-column-start: 1;
      }
    }
    .game-goods__cards[hidden] {
      display: none;
    }
    .game-goods__cards + .title-secondary {
      margin-top: 70px;
      @container style(--sp: true) {
        margin-top: 40px;
      }
    }
    .game-goods__note {
      --font-size-min: 16;
      --font-size-max: 22;
      margin-top: 60px;
      text-align: center;
    }
  }
}
/*-----------------------------
mainアバウト
-----------------------------*/
.main--about {
  .about {
    .about__list,
    .about_content_root {
      @container style(--tb: true) {
        max-inline-size: initial;
        margin-inline: calc((100% - 100dvi) / 2);
      }
    }
    .about__list {
      display: flex;
      justify-content: space-between;
      gap: 5px;
      position: relative;
      z-index: 1;
      @container style(--sp: true) {
        gap: 1px;
      }
      li {
        flex-grow: 1;
        a {
          --font-size-min: 12;
          --font-size-max: 20;
          padding: 15px;
          background-color: var(--color-gray-5);
          border-radius: 8px 8px 0 0;
          color: #fff;
          display: block;
          font-family: "Noto-Bold";
          text-align: center;
          text-decoration: none;
          @container style(--sp: true) {
            padding-inline: 0;
          }
        }
        a.is-current {
          background-color: #fff;
          border-radius: 0;
          color: #000;
          position: relative;
          &::before {
            width: 100%;
            height: 10px;
            background-color: #000;
            border-radius: 8px 8px 0 0;
            content: "";
            position: absolute;
            bottom: 100%;
            left: 0;
          }
        }
      }
    }
    .about_content_root {
      padding: 82px 42px;
      background-color: #fff;
      @container style(--tb: true) {
        padding: 10vw 10px;
      }
      .about_content {
        padding: 70px 75px;
        border: 1px solid #000;
        position: relative;
        @container style(--tb: true) {
          padding: 40px 18px;
        }
        &::before {
          width: calc(100% + 90px);
          height: 150px;
          background: url(/assets/img/chara-gokukintoun.png) center / 100% auto
            no-repeat;
          content: "";
          position: absolute;
          top: -86px;
          left: -1px;
          @container style(--tb: true) {
            width: calc(100% + 10px);
          }
        }
        > img {
          width: 100%;
          margin-inline: auto;
        }
        .about_content__chara--bounce {
          width: 80%;
          opacity: 0;
          transform-origin: center bottom;
          animation: about-chara-bounce-in 0.95s cubic-bezier(0.2, 0.9, 0.2, 1)
            1 forwards;
          animation-delay: 0.45s;
          will-change: transform;
        }
        > p {
          --font-size-min: 12;
          --font-size-max: 18;
          margin-top: 24px;
          line-height: 200%;
          @container style(--sp: true) {
            margin-top: 10px;
          }
        }
        .text-center {
          text-align: center;
        }
        .box {
          margin-top: 60px;
          padding: 68px 20px;
          background: url(/assets/img/dot.png);
          @container style(--tb: true) {
            padding: 30px;
          }
          @container style(--sp: true) {
            margin-top: 30px;
          }
        }
        .about_list {
          width: 864px;
          margin-inline: auto;
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 60px;
          @container style(--tb: true) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 60px 30px;
          }
          @container style(--sp: true) {
            grid-template-columns: repeat(1, minmax(0, 1fr));
          }
          li {
            figure {
              .thumb {
                margin-inline: auto;
                aspect-ratio: 1 / 1;
                background-color: #000;
                overflow: hidden;
                text-align: center;
                @container style(--sp: true) {
                  width: 209px;
                }
                a {
                  display: inline;
                  img {
                    transition: 0.2s scale;
                  }
                }
                a:hover {
                  img {
                    scale: 1.1;
                  }
                }
              }
              img {
                width: 100%;
                height: 100%;
                object-fit: contain;
                object-position: center;
              }
              figcaption {
                .about_title {
                  --font-size-min: 16;
                  --font-size-max: 20;
                  margin-top: 12px;
                  font-family: "noto-black";
                  text-align: center;
                }
                .buttons {
                  margin-top: 30px;
                  @container style(--sp: true) {
                    margin-top: 15px;
                  }
                  a {
                    width: 100%;
                    padding-inline: 16px;
                    text-align: center;
                    @container style(--sp: true) {
                      width: 187px;
                    }
                  }
                }
              }
            }
          }
        }
        .about_list-comic {
          width: 532px;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 92px;
          @container style(--tb: true) {
            gap: 34px;
          }
          @container style(--sp: true) {
            grid-template-columns: repeat(1, minmax(0, 1fr));
            gap: 50px;
          }
          li {
            figure {
              .thumb {
                aspect-ratio: inherit;
              }
              img {
                margin-inline: auto;
              }
            }
          }
        }
        .about_title-1 {
          --font-size-min: 16;
          --font-size-max: 30;
          margin-top: 60px;
          padding-bottom: 10px;
          border-bottom: 2px dotted #000;
          font-family: "Noto-Black";
          text-align: center;
          @container style(--sp: true) {
            margin-top: 30px;
          }
          + * {
            margin-top: 100px !important;
            @container style(--sp: true) {
              margin-top: 40px !important;
            }
          }
        }
        .about_title-2 {
          --font-size-min: 16;
          --font-size-max: 30;
          margin-top: 100px;
          padding-top: 10px;
          font-family: "Noto-Bold";
          position: relative;
          text-align: center;
          @container style(--tb: true) {
            margin-top: 80px;
          }
          &::before {
            width: 56px;
            height: 7px;
            background-color: #000;
            content: "";
            position: absolute;
            bottom: 100%;
            left: 50%;
            translate: -50% 0;
            @container style(--sp: true) {
              width: 23px;
              height: 3px;
            }
          }
          + * {
            margin-top: 60px;
            @container style(--tb: true) {
              margin-top: 30px;
            }
          }
        }
        .copyright {
          --font-size-min: 12;
          --font-size-max: 12;
          margin-top: 110px;
          line-height: 1.2;
          @container style(--tb: true) {
            margin-top: 50px;
          }
        }
      }
    }
  }
  .about-site {
    .about_content_root {
      .about_content {
        position: relative;
        .band_chara {
          width: 517px;
          position: absolute;
          top: 140px;
          left: -10px;
          z-index: 1;
          @container style(--pc: true) {
            max-width: 47%;
            top: 60px;
          }
        }
        .band {
          width: calc(100% + 150px);
          max-inline-size: initial;
          margin-left: 50%;
          transform: translateX(-50%);
          @container style(--tb: true) {
            width: calc(100% + 36px);
          }
        }
        .bant_text {
          --font-size-min: 16;
          --font-size-max: 41;
          margin-top: 0;
          font-family: "Noto-Black";
          line-height: 53px;
          position: absolute;
          color: #fff;
          top: 7%;
          left: 46%;
          rotate: -16deg;
          @container style(--pc: true) {
            top: 19vw;
            left: 47%;
            line-height: 150%;
          }
          @container style(--sp: true) {
            top: 21vw;
            left: 45%;
          }
          + * {
            margin-top: 150px;
            @container style(--pc: true) {
              margin-top: 70px;
            }
            @container style(--sp: true) {
              margin-top: 30px;
            }
          }
        }
        .bant_text:not(:lang(ja)) {
          --font-size-min: 12;
          --font-size-max: 30;
          font-family: "Noto-Bold";
          @container style(--pc: true) {
            top: 21vw;
          }
        }
      }
    }
  }
  .about-site-news {
    .about-site-news-content {
      > * {
        + * {
          margin-top: 50px;
        }
      }
      > p {
        line-height: 2;
      }
      > img {
        width: 1000px;
        margin-inline: auto;
        box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.4);
      }
      .news-title_secondary {
        + * {
          margin-top: 10px;
        }
      }
    }
  }
  .about-history {
    /* .history-list {
      + .history-list {
        margin-top: 26px;
      }
      dt {
        --font-size-min: 44;
        --font-size-max: 44;
        width: calc(100% + 156px);
        max-inline-size: initial;
        margin-left: 50%;
        padding: 4px;
        background: url(/assets/img/history.png) center / 100% auto no-repeat;
        color: #fff;
        cursor: pointer;
        font-family: "oswald-Bold";
        transform: translateX(-50%);
        text-align: center;
        .btn-open {
          width: 21px;
          height: 19px;
          background: url(/assets/img/open_timeline.png) no-repeat center /
            cover;
          border: none;
          position: absolute;
          bottom: 0;
          left: 50%;
          translate: -50% 50%;
        }
      }
      dd {
        padding: 80px 108px;
        background: url(/assets/img/bg.jpg) top left / 145% auto;
        border: 2px solid #000;
        border-top: none;
        position: relative;
        .btn-close {
          width: 90px;
          height: 90px;
          background: url(/assets/img/close_timeline.png) no-repeat center /
            cover;
          border: none;
          position: absolute;
          bottom: 0;
          left: 50%;
          translate: -50% 50%;
        }
        section {
          padding: 80px 60px 40px;
          box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
          background-color: #fff;
          position: relative;
          + section {
            margin-top: 20px;
          }
          &::before {
            padding-inline: 6px;
            color: #000;
            content: attr(data-category);
            font-family: "oswald-bold";
            position: absolute;
            top: 10px;
            left: 10px;
          }
          .about_title-2 {
            margin-top: 0 !important;
            font-family: "oswald-bold" !important;
          }
          > img {
            width: 316px;
            margin-inline: auto;
            box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.4);
          }
          h4 {
            --font-size-min: 24;
            --font-size-max: 24;
            margin-top: 30px;
            font-family: "Noto-Black";
            text-align: center;
          }
        }
        section.comic {
          &::before {
            background-color: #ff7575;
          }
        }
        section.anime {
          &::before {
            background-color: #70d9ff;
          }
        }
        section.movie {
          &::before {
            background-color: #fda82f;
          }
        }
      }
    }
    .history-list.is-open {
      + .history-list {
        margin-top: 56px;
      }
      dt {
        .btn-open {
          visibility: hidden;
        }
      }
    } */
    .history-list {
      opacity: 0;
      transform: translateY(18px) scaleX(0.96);
      transform-origin: center top;
      animation: history-list-reveal 0.72s cubic-bezier(0.2, 0.9, 0.2, 1) both;
      animation-delay: var(--history-list-delay, 0ms);
      will-change: transform, opacity;
      + .history-list {
        margin-top: 26px;
        @container style(--pc: true) {
          margin-top: 10px;
        }
      }
      &:nth-of-type(1) {
        --history-list-delay: 0ms;
      }
      &:nth-of-type(2) {
        --history-list-delay: 280ms;
      }
      &:nth-of-type(3) {
        --history-list-delay: 560ms;
      }
      &:nth-of-type(4) {
        --history-list-delay: 840ms;
      }
      &:nth-of-type(5) {
        --history-list-delay: 1120ms;
      }
      @media (prefers-reduced-motion: reduce) {
        opacity: 1;
        transform: none;
        animation: none;
      }
      dt {
        --font-size-min: 18;
        --font-size-max: 44;
        width: calc(100% + 156px);
        max-inline-size: initial;
        margin-left: 50%;
        padding-bottom: 1.7vw;
        background: url(/assets/img/history.png) top center / 100% auto
          no-repeat;
        color: #fff;
        cursor: pointer;
        font-family: "oswald-Bold";
        position: relative;
        z-index: 1;
        transform: translateX(-50%);
        text-align: center;
        @container style(--tb: true) {
          width: calc(100% + 56px);
        }
        @container style(--sp: true) {
          background-image: url(/assets/img/history-sp.png);
          padding-bottom: 5.5vw;
        }
        .btn-open {
          width: 100%;
          height: 100%;
          background: none;
          border: none;
          @container style(--sp: true) {
            translate: 0px 1vw;
          }
        }
      }
      dd {
        max-height: 0;
        padding-block: 0;
        padding-inline: 108px;
        background: url(/assets/img/bg.jpg) top left / 145% auto;
        border: 2px solid #000;
        border-top: none;
        position: relative;
        opacity: 0;
        transform: translateY(-12px);
        transition:
          max-height 0.55s cubic-bezier(0.2, 0.9, 0.2, 1),
          padding-block 0.55s cubic-bezier(0.2, 0.9, 0.2, 1),
          opacity 0.25s ease,
          transform 0.55s cubic-bezier(0.2, 0.9, 0.2, 1);
        top: -2vw;
        z-index: 0;
        @container style(--tb: true) {
          padding-inline: 18px;
          top: -5px;
        }
        @container style(--sp: true) {
          padding-inline: 18px;
          top: -4vw;
        }
        .btn-close {
          width: 90px;
          height: 90px;
          background: url(/assets/img/close_timeline.png) no-repeat center /
            cover;
          border: none;
          position: absolute;
          bottom: 0;
          left: 50%;
          translate: -50% 50%;
        }
        section {
          padding: 80px 60px 40px;
          box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
          background-color: #fff;
          position: relative;
          @container style(--sp: true) {
            padding: 50px 60px 30px;
          }
          + section {
            margin-top: 20px;
          }
          &::before {
            padding-inline: 6px;
            color: #000;
            content: attr(data-category);
            font-family: "oswald-bold";
            position: absolute;
            top: 10px;
            left: 10px;
          }
          .about_title-2 {
            margin-top: 0 !important;
            font-family: "oswald-bold" !important;
          }
          > img {
            width: 316px;
            margin-inline: auto;
            box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.4);
          }
          h4 {
            --font-size-min: 12;
            --font-size-max: 24;
            margin-top: 30px;
            font-family: "Noto-Black";
            text-align: center;
          }
        }
        section.comic {
          &::before {
            background-color: #ff7575;
          }
        }
        section.anime {
          &::before {
            background-color: #70d9ff;
          }
        }
        section.movie {
          &::before {
            background-color: #fda82f;
          }
        }
      }
      &.is-open {
        dd {
          max-height: var(--history-dd-height, 9999vh);
          padding-block: 80px;
          opacity: 1;
          transform: translateY(0);
          @container style(--tb: true) {
            padding-block: 18px 60px;
          }
          @container style(--sp: true) {
            padding-top: 5vw;
            padding-bottom: 60px;
          }
        }
      }
    }
    .history-list.is-open {
      + .history-list {
        margin-top: 56px;
      }
      dt {
        background-image: url(/assets/img/history-open.png);
        background-position: top center;
        @container style(--sp: true) {
          background-image: url(/assets/img/history-sp-open.png);
        }
      }
    }
  }
}
/*-----------------------------
mainお問い合わせ・プライバシーポリシー
-----------------------------*/
:is(.main--contact, .main--privacy, .main--accessibility) {
  background-color: #fff;
  :is(.contact, .privacy, .accessibility) {
    padding-block: 60px;
    @container style(--tb: true) {
      padding-block: 40px;
    }
    .inner {
      --width-inner: 960;
    }
    .title {
      --font-size-min: 18;
      --font-size-max: 30;
      font-family: "Noto-black";
      line-height: 160%;
      text-align: center;
      + p {
        margin-top: 48px;
        font-family: "Noto-medium";
      }
    }
    .lead-text {
      margin-top: 28px;
    }
    p,
    li,
    th,
    td {
      line-height: 200%;
    }
    a:not([class]) {
      color: var(--color-red-1);
      text-decoration: underline;
    }
    a:hover {
      text-decoration: none;
    }
    section {
      h3,
      h4 {
        font-family: "Noto-bold";
      }
      h3 {
        --font-size-min: 18;
        --font-size-max: 24;
        margin-top: 48px;
        + * {
          margin-top: 24px;
        }
      }
      h4 {
        margin-top: 24px;
      }
      p,
      ul {
        margin-top: 5px;
      }
      ul {
        counter-reset: my-list-counter;
        padding-inline-start: 24px;
        li {
          margin-top: 12px;
          &::marker {
            content: "・";
          }
        }
      }
      em {
        font-style: normal;
        font-family: "Noto-black";
      }
    }
  }
  :is(.contact, .privacy) {
    ul {
      li:lang(ja) {
        counter-increment: my-list-counter;
        &::marker {
          content: counter(my-list-counter, lower-alpha) ") ";
        }
      }
    }
  }
  :is(.privacy, .accessibility) {
    section {
      h4 {
        --font-size-min: 16;
        --font-size-max: 20;
      }
      * {
        + p {
          margin-top: 20px;
        }
      }
      table {
        margin-top: 16px;
        thead {
          background-color: var(--color-gray-3);
          font-family: "Noto-bold";
        }
        tbody {
          background-color: #fff;
        }
        th,
        td {
          padding: 6px 12px;
          border: 1px solid #000;
        }
        th:nth-child(1) {
          width: 225px;
          @container style(--sp: true) {
            width: 35%;
          }
        }
      }
    }
  }
  .contact {
    section {
      a {
        margin-top: 8px;
        background-image: linear-gradient(currentColor, currentColor);
        background-position: 0 100%;
        background-repeat: no-repeat;
        background-size: 100% 1px;
        box-decoration-break: clone;
        display: inline;
        box-sizing: border-box;
        font-family: "Noto-bold";
        text-decoration: none !important;
        &::before {
          margin-right: 3px;
          content: "";
          border: 5px solid transparent;
          border-left: 8px solid var(--color-red-1);
        }
      }
      a:hover {
        border-color: transparent;
      }
    }
  }
  .privacy {
    background-color: var(--color-gray-2);
  }
  .accessibility {
    background-color: var(--color-gray-2);
    section {
      .table_title {
        font-family: "Noto-bold";
      }
      table {
        th,
        td {
          @container style(--sp: true) {
            padding: 6px 5px;
            line-height: 150%;
          }
        }
        th {
          --font-size-min: 12;
          --font-size-max: 16;
          white-space: nowrap;
        }
        td {
          --font-size-min: 12;
          --font-size-max: 14;
        }
      }
      table:not([class]) {
        td:nth-child(2) {
          @container style(--sp: true) {
            width: 60%;
          }
        }
      }
      .checklist {
        th:first-child {
          width: 100px;
        }
        th:nth-child(2) {
          width: 380px;
        }
        th:last-child {
          width: 220px;
        }
      }
    }
  }
}
/*-----------------------------
main404
-----------------------------*/
:is(.main--not-found, .main--maintenance) {
  background-color: #fff;
  :is(.not-found, .maintenance) {
    padding-block: 74px;
    .title {
      --font-size-min: 24;
      --font-size-max: 40;
      font-family: "Noto-bold";
      text-align: center;
    }
    p {
      margin-top: 20px;
      line-height: 200%;
      text-align: center;
    }
    .lead {
      margin-top: 20px;
      font-family: "Noto-bold";
    }
    .text1 {
      margin-top: 40px;
      @container style(--sp: true) {
        margin-top: 20px;
      }
    }
    .box {
      max-width: 600px;
      margin-top: 20px;
      margin-inline: auto;
      padding: 40px;
      background-color: #000;
      color: #fff;
      @container style(--sp: true) {
        padding: 20px 20px 20px 35px;
      }
      li {
        + li {
          margin-top: 30px;
        }
        &::marker {
          content: "- ";
        }
      }
      li:lang(ja) {
        &::marker {
          content: "●";
        }
      }
    }
  }
}
/*-----------------------------
footer
-----------------------------*/
.footer {
  padding: 48px 40px;
  background-color: #000;
  color: #fff;
  font-family: "Noto-Regular";
  position: sticky;
  top: 100dvh;
  @container style(--pc: true) {
    padding-inline: 21px;
    padding-bottom: 0;
  }
  .footer_content {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    @container style(--pc: true) {
      flex-direction: column;
      align-items: center;
    }
    .footer_content_left {
      .footer_logos {
        display: flex;
        align-items: center;
        gap: 20px;
      }
      .footer_copyright {
        --font-size-min: 10;
        --font-size-max: 14;
        margin-top: 20px;
        small {
          @container style(--pc: true) {
            margin-top: 6px;
            display: block;
            text-align: center;
          }
        }
        small:nth-child(2) {
          margin-left: 32px;
          @container style(--pc: true) {
            margin-left: 0;
          }
        }
        small:nth-child(3) {
          margin-top: 6px;
          display: block;
        }
      }
    }
    .footer_content_right {
      @container style(--pc: true) {
        width: 100vw;
        max-inline-size: initial;
        margin-inline: calc((100% - 100dvi) / 2);
        padding-block: 8px;
        background-color: #fff;
      }
      .footer_links {
        display: flex;
        gap: 30px;
        @container style(--pc: true) {
          flex-wrap: wrap;
          justify-content: center;
          gap: 10px 30px;
        }
        li {
          a {
            --font-size-min: 10;
            --font-size-max: 12;
            color: var(--color-gray-1);
            text-decoration: none;
            @container style(--pc: true) {
              color: #000;
            }
          }
          a:hover {
            color: var(--color-orange);
            text-decoration: underline;
          }
        }
      }
    }
  }
}
@keyframes history-list-reveal {
  0% {
    opacity: 0;
    transform: translateY(18px) scaleX(0.96);
  }
  65% {
    opacity: 1;
    transform: translateY(0) scaleX(1.03);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scaleX(1);
  }
}
@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}
@keyframes about-chara-bounce-in {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(0.96);
  }
  35% {
    opacity: 1;
    transform: translateY(-8px) scale(1.02);
  }
  55% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  70% {
    opacity: 1;
    transform: translateY(-4px) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
#back-to-top {
  width: 109px;
  height: 107px;
  background: url(/assets/img/pagetop.png) no-repeat center / cover;
  border: none;
  position: fixed;
  bottom: 120px;
  right: 12px;
  /* opacity: 0; */
  overflow: hidden;
  text-indent: 100%;
  translate: 0 500px;
  transition: all 0.4s ease;
  white-space: nowrap;
  visibility: hidden;
  z-index: 9998;
  @container style(--sp: true) {
    width: 76px;
    height: 75px;
    bottom: 60px;
  }
  &.is-visible {
    /* opacity: 1; */
    visibility: visible;
    translate: 0 0;
    animation: bounce 1s 1;
  }
  &:lang(fr) {
    background-image: url(/assets/img/pagetop-fr.png);
  }
  &:lang(de) {
    background-image: url(/assets/img/pagetop-de.png);
  }
  &:lang(es) {
    background-image: url(/assets/img/pagetop-es.png);
  }
}