@charset "UTF-8";
/* Noto Sans JP */
@font-face {
  font-display: swap;
  font-family: "Noto Sans JP";
  src: url("../css/fonts/notosansjp-black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-display: swap;
  font-family: "Noto Sans JP";
  src: url("../css/fonts/notosansjp-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-display: swap;
  font-family: "Noto Sans JP";
  src: url("../css/fonts/notosansjp-medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}
/* Saira Extra Condensed */
@font-face {
  font-display: swap;
  font-family: "Saira Extra Condensed";
  src: url("../css/fonts/SairaExtraCondensed-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-display: swap;
  font-family: "Saira Extra Condensed";
  src: url("../css/fonts/SairaExtraCondensed-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-display: swap;
  font-family: "Saira Extra Condensed";
  src: url("../css/fonts/SairaExtraCondensed-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
}
/* SPファースト */
html {
  font-size: 16px;
}
@media (max-width: 414px) {
  html {
    font-size: 3.8647342995vw;
  }
}
@media screen and (min-width: 768px) {
  html {
    font-size: 1.0322580645vw;
  }
}
@media (min-width: 1550px) {
  html {
    font-size: 16px;
  }
}

/* フォントウェイトとフォントカラーは、使用頻度が多いものを選択する */
body {
  font-family: "Noto Sans JP", sans-serif;
  color: #000000;
  line-height: 1;
}

@media screen and (min-width: 768px) {
  a[href^="tel:"] {
    pointer-events: none;
  }
}

/* PC版Chromeで拡縮画像ぼやけ対策 */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (-webkit-min-device-pixel-ratio: 0), screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
  img {
    image-rendering: -webkit-optimize-contrast;
  }
}
/* iPhoneSafariで画像ジャギ対策 */
img {
  image-rendering: auto;
}

/* hrタグの初期値解除 ここから ---- */
hr {
  border: none;
  overflow: visible;
  margin-top: 0;
  margin-bottom: 0;
}

/* hrタグの初期値解除 ここまで ---- */
/* YouTubeのframeborder属性の変わり(HTML5の標準仕様で廃止されているため) */
iframe {
  border: none;
}

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/* Remove default padding */
ul,
ol {
  padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Set core root defaults */
/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeLegibility;
}

/* Remove list styles on ul, ol elements with a class attribute */
ul,
ol {
  list-style: none;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img {
  max-width: 100%;
  display: block;
  width: 100%;
}

/* Natural flow and rhythm in articles by default */
article > * + * {
  margin-top: 1em;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Blur images when they have no alt attribute */
img:not([alt]) {
  -webkit-filter: blur(10px);
          filter: blur(10px);
}

/* フォームリセット */
input,
button,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  font: inherit;
  outline: none;
}

textarea {
  resize: vertical;
}

input[type=checkbox],
input[type=radio] {
  display: none;
}

input[type=submit],
input[type=button],
label,
button,
select {
  cursor: pointer;
}

select::-ms-expand {
  display: none;
}

/* ホバー */
a {
  text-decoration: none;
  color: inherit;
}

.inner {
  width: 100%;
  padding-right: 1.25rem;
  padding-left: 1.25rem;
  margin-right: auto;
  margin-left: auto;
}
@media screen and (min-width: 768px) {
  .inner {
    max-width: 100rem;
    padding-right: 1.5625rem;
    padding-left: 1.5625rem;
  }
}

/* YouTubeモーダル発火時、body要素をスクロールさせない ここから -------------------------- */
/* YouTubeモーダル発火時、body要素をスクロールさせない ここまで -------------------------- */
.bg-parallax {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.bg-parallax__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
  z-index: -10;
}

.bg-parallax__img::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  background-image: url(../images/common/bg-parallax-sp.jpg);
  background-size: cover;
  background-position: top center;
  width: 100%;
  height: 100%;
  z-index: -9;
}
@media screen and (min-width: 768px) {
  .bg-parallax__img::before {
    background-image: url(../images/common/bg-parallax-pc.jpg);
  }
}

html.webp .bg-parallax__img::before {
  background-image: url(../images/common/bg-parallax-sp.webp);
}
@media screen and (min-width: 768px) {
  html.webp .bg-parallax__img::before {
    background-image: url(../images/common/bg-parallax-pc.webp);
  }
}

/* ----- ボタンタイプ共通設定 ここから ----- */
.btn {
  display: inline-block;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.btn:hover {
  -webkit-filter: brightness(1.3);
          filter: brightness(1.3);
}

/* ----- ボタンタイプ共通設定 ここまで ----- */
/* ----- 『取扱店舗一覧』ボタン ここから ----- */
.btn.btn-type-04 {
  position: relative;
  width: 100%;
  max-width: 16.875rem;
  border-radius: 100vh;
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#98a6aa));
  background: linear-gradient(180deg, #fff 0%, #98a6aa 100%);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  padding: 0.78125rem 0;
}
@media screen and (min-width: 768px) {
  .btn.btn-type-04 {
    max-width: 25.625rem;
    padding: 1.28125rem 0;
  }
}

.btn.btn-type-04::after {
  content: "";
  position: absolute;
  right: 2.75rem;
  top: 54%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-mask-image: url(../images/common/icon-link.svg);
          mask-image: url(../images/common/icon-link.svg);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: #494949;
  width: 0.875rem;
  height: 0.875rem;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

@media screen and (min-width: 768px) {
  .btn.btn-type-04::after {
      top: 50%;
      right: 4.25rem;
      width: 1.25rem;
      height: 1.25rem;
  }
}


.btn-type-04-text {
  font-size: 0.875rem;
  font-weight: 700;
  font-family: "Noto Sans JP", sans-serif;
  color: #494949;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media screen and (min-width: 768px) {
  .btn-type-04-text {
    font-size: 1.25rem;
    font-weight: 900;
  }
}

/* ----- 『取扱店舗一覧』ボタン ここまで ----- */
.deco-line {
  position: relative;
  height: 1px;
  width: 100%;
  border: none; /* hrタグの初期値解除*/
  overflow: visible; /* hrタグの初期値解除*/
  margin-top: 0.4375rem;
  margin-bottom: 0; /* hrタグの初期値解除*/
}

.deco-line.deco-line-product-features {
  max-width: 17rem;
}
@media screen and (min-width: 768px) {
  .deco-line.deco-line-product-features {
    max-width: 28.5rem;
  }
}

.deco-line-white {
  background-color: #ffffff;
}

.deco-line-black {
  background-color: #000000;
}

.deco-line-gray {
  background-color: #7f7f7f;
}

.deco-line::before,
.deco-line::after {
  content: "";
  position: absolute;
  top: -3px;
  width: 6px;
  height: 6px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.deco-line.deco-line-white::before,
.deco-line.deco-line-white::after {
  background-color: #ffffff;
}

.deco-line.deco-line-black::before,
.deco-line.deco-line-black::after {
  background-color: #000000;
}

.deco-line.deco-line-gray::before,
.deco-line.deco-line-gray::after {
  background-color: #7f7f7f;
}

.deco-line::before {
  left: -3px;
}

.deco-line::after {
  right: -3px;
}

.deco-line.deco-line-product-detail {
  margin: 1.875rem 0;
}
@media screen and (min-width: 768px) {
  .deco-line.deco-line-product-detail {
    margin: 2.5rem 0;
  }
}

.detail {
  padding-top: 3.125rem;
}
@media screen and (min-width: 768px) {
  .detail {
    padding-top: 9.5rem;
    padding-bottom: 5.3125rem;
  }
}

.detail__inner.inner {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
@media screen and (min-width: 768px) {
  .detail__inner.inner {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

.detail__container {
  position: relative;
  width: 24.625rem; /* 12/6以前のサイズ */
  height: 66.84375rem; /* 12/9以降のサイズ */
  margin: -1.5625rem auto 0;
  padding: 4.5rem 0.625rem 0;
}
@media screen and (min-width: 768px) {
  .detail__container {
    width: 68.9375rem; /* 12/6以前のサイズ */
    height: 81.6875rem; /* 12/9以降のサイズ */
    margin: -4.0625rem auto 0;
    padding: 8.4375rem 10.25rem 0;
  }
}

.detail__container::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-image: url(../images/detail/detail-bg-white-sp.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .detail__container::before {
    background-image: url(../images/detail/detail-bg-white-pc.png);
  }
}

html.webp .detail__container::before {
  background-image: url(../images/detail/detail-bg-white-sp.webp);
}
@media screen and (min-width: 768px) {
  html.webp .detail__container::before {
    background-image: url(../images/detail/detail-bg-white-pc.webp);
  }
}

.detail__bg {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-size: contain;
  background-repeat: no-repeat;
  width: 24.625rem;
  height: 66.84375rem; /* 12/9以降のサイズ */
  -webkit-filter: drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.25));
          filter: drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.25));
}
@media screen and (min-width: 768px) {
  .detail__bg {
    width: 68.9375rem;
    height: 81.6875rem; /* 12/9以降のサイズ */
  }
}

.detail__bg-blue {
  background-image: url(../images/detail/detail-bg-blue-sp.png);
  z-index: -2;
}
@media screen and (min-width: 768px) {
  .detail__bg-blue {
    background-image: url(../images/detail/detail-bg-blue-pc.png);
  }
}

html.webp .detail__bg-blue::before {
  background-image: url(../images/detail/detail-bg-blue-sp.webp);
}
@media screen and (min-width: 768px) {
  html.webp .detail__bg-blue::before {
    background-image: url(../images/detail/detail-bg-blue-pc.webp);
  }
}

.detail__bg-orange {
  background-image: url(../images/detail/detail-bg-orange-sp.png);
  z-index: -3;
}
@media screen and (min-width: 768px) {
  .detail__bg-orange {
    background-image: url(../images/detail/detail-bg-orange-pc.png);
  }
}

html.webp .detail__bg-orange::before {
  background-image: url(../images/detail/detail-bg-orange-sp.webp);
}
@media screen and (min-width: 768px) {
  html.webp .detail__bg-orange::before {
    background-image: url(../images/detail/detail-bg-orange-pc.webp);
  }
}

@media screen and (min-width: 768px) {
  .detail__item {
    display: grid;
    grid-template-columns: 12.5rem 1fr;
    -webkit-column-gap: 3.125rem;
       -moz-column-gap: 3.125rem;
            column-gap: 3.125rem; /* 左右の余白 */
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

.detail__item-product-name {
  display: inline-block;
  font-size: 1rem;
  font-weight: 900;
  font-family: "Noto Sans JP", sans-serif;
  color: #ffffff;
  line-height: 1.4375;
  padding: 0 0.625rem;
}
@media screen and (min-width: 768px) {
  .detail__item-product-name {
    font-size: 1.5rem;
    line-height: 1.4583333333;
    padding: 0 0.625rem;
  }
}

.detail__item-product-name-trial {
  background: -webkit-gradient(linear, left top, right top, from(#3eafff), to(#256999));
  background: linear-gradient(90deg, #3eafff 0%, #256999 100%);
}

.detail__item-product-name-booster {
  background: -webkit-gradient(linear, left top, right top, from(#ff713e), to(#994425));
  background: linear-gradient(90deg, #ff713e 0%, #994425 100%);
}

.detail__item-date {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 700;
  font-family: "Noto Sans JP", sans-serif;
  padding: 0.25rem 0.625rem;
  border-radius: 100dvh;
  margin-top: 0.9375rem;
}
@media screen and (min-width: 768px) {
  .detail__item-date {
    font-size: 1rem;
    padding: 0.25rem 0.625rem;
  }
}

.detail__item-date-trial {
  color: #3eafff;
  border: 1px solid #3eafff;
}

.detail__item-date-booster {
  color: #ff713e;
  border: 1px solid #ff713e;
}

.detail__item-info {
  font-size: 0.675rem;
  font-weight: 700;
  font-family: "Noto Sans JP", sans-serif;
  color: #000000;
  line-height: 1.5;
  margin-top: 0.9375rem;
}

@media screen and (min-width: 768px) {
  .detail__item-info {
    font-size: 1rem;
  }
}

.detail__item-info-line {
  height: 1px;
  width: 60%;
  background-color: #000000;
  margin: 0.9375rem 0;
}

.detail__item-detail {
  display: grid;
  grid-template-columns: 1fr 5.125rem;
  -webkit-column-gap: 1.75rem;
     -moz-column-gap: 1.75rem;
          column-gap: 1.75rem; /* 左右の余白 */
  margin-top: 0.9375rem;
}
@media screen and (min-width: 768px) {
  .detail__item-detail {
    display: block;
  }
}

@media screen and (min-width: 768px) {
  .detail__item-detail-box {
    display: grid;
    grid-template-columns: 15.625rem 1fr;
    -webkit-column-gap: 1.5625rem;
       -moz-column-gap: 1.5625rem;
            column-gap: 1.5625rem; /* 左右の余白 */
  }
}

.detail__item-detail-box:nth-child(n+2) {
  margin-top: 0.9375rem;
}

.detail__item-detail-heading {
  font-size: 0.875rem;
  font-weight: 700;
  font-family: "Noto Sans JP", sans-serif;
  color: #ffffff;
  line-height: 1.4285714286;
  padding: 0.1875rem 0.3125rem;
  width: 100%;
  background-color: #12090a;
  text-align: center;
  letter-spacing: 0.1em;
}
@media screen and (min-width: 768px) {
  .detail__item-detail-heading {
      font-size: 1rem;
      line-height: 1.4375;
      padding: 1rem 0.75rem;
  }
}

.detail__item-detail-text {
  font-size: 0.875rem;
  font-weight: 700;
  font-family: "Noto Sans JP", sans-serif;
  color: #000000;
  line-height: 1.4285714286;
  margin-top: 0.625rem;
  letter-spacing: 0.1em;
}
@media screen and (min-width: 768px) {
  .detail__item-detail-text {
    font-size: 1rem;
    line-height: 1.4375;
  }
}

.event {
  padding-top: 3.125rem;
  padding-bottom: 3.125rem; /* MOVIEセクション追加時にコメントアウト解除 */
}
@media screen and (min-width: 768px) {
  .event {
    padding-top: 8.125rem;
    padding-bottom: 8.125rem; /* MOVIEセクション追加時にコメントアウト解除 */
  }
}

.event__item-wrapper {
  max-width: 33.75rem;
  width: 100%;
  margin-top: 2.9375rem;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (min-width: 768px) {
  .event__item-wrapper {
    max-width: none;
    margin-top: 5.0625rem;
    margin-left: 0;
    margin-right: 0;
  }
}

.event__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  row-gap: 1.25rem; /* 上下の余白 */
}
@media screen and (min-width: 414px) {
  .event__items {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    row-gap: 1.25rem; /* 上下の余白 */
    -webkit-column-gap: 0.625rem;
       -moz-column-gap: 0.625rem;
            column-gap: 0.625rem; /* 左右の余白 */
  }
}
@media screen and (min-width: 768px) {
  .event__items {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    row-gap: 3.125rem; /* 上下の余白 */
    -webkit-column-gap: 3.125rem;
       -moz-column-gap: 3.125rem;
            column-gap: 3.125rem; /* 左右の余白 */
  }
}

.event__item {
  position: relative;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  border-radius: 0.1875rem;
  overflow: hidden;
  -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25);
          box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media screen and (min-width: 414px) {
  .event__item {
    max-width: calc((100% - 0.625rem) / 2);
  }
}
@media screen and (min-width: 768px) {
  .event__item {
    max-width: calc((100% - 9.375rem) / 4);
    border-radius: 0.625rem;
  }
}

.event__item-modal::before,
.event__item-link::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-image: url(../images/event/event-card-bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.event__item-modal.event__item-modal-event::after,
.event__item-modal.event__item-modal-campaign::after,
.event__item-link::after {
  content: "";
  position: absolute;
  right: 0.3125rem;
  bottom: 0.3125rem;
  background-size: cover;
  background-repeat: no-repeat;
  width: 1.25rem;
  height: 1.25rem;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .event__item-modal.event__item-modal-event::after,
  .event__item-modal.event__item-modal-campaign::after,
  .event__item-link::after {
    width: 1.75rem;
    height: 1.75rem;
  }
}

.event__item-modal.event__item-modal-event::after,
.event__item-link::after {
  background-image: url(../images/event/triangle-orange.png);
}

.event__item-modal.event__item-modal-campaign::after {
  background-image: url(../images/event/triangle-blue.png);
}

.event__item-modal,
.event__item-link {
  display: block;
  padding: 0.3125rem 0.3125rem 3rem;
}
@media screen and (min-width: 768px) {
  .event__item-modal,
  .event__item-link {
    padding: 0.9375rem 0.9375rem 2.8125rem;
  }
}

.event__item-link {
  height: 100%;
}

.event__item-hover {
  cursor: pointer;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.event__item-hover:hover {
  -webkit-filter: brightness(1.3);
          filter: brightness(1.3);
}

.event__item-img {
  position: relative;
}

.event__item-img img {
  width: 100%;
  aspect-ratio: 320/180;
  -o-object-fit: cover;
     object-fit: cover;
}

.event__item-category {
  position: absolute;
  bottom: -1px;
  left: 0;
  display: grid;
  place-items: center;
  -webkit-clip-path: polygon(0 0, 90% 0, 100% 100%, 0 100%);
          clip-path: polygon(0 0, 90% 0, 100% 100%, 0 100%);
  font-size: 0.8125rem;
  font-weight: 700;
  font-family: "Saira Extra Condensed", serif;
  color: #ffffff;
  text-transform: uppercase;
  width: 4.6875rem;
  height: 0.9375rem;
}
@media screen and (min-width: 768px) {
  .event__item-category {
    width: 6.25rem;
    height: 1.1875rem;
    font-size: 0.9375rem;
  }
}

.event__item-category.event__item-category-event {
  background-color: #ff713e;
}

.event__item-category.event__item-category-campaign {
  background-color: #3eafff;
}

.event__item-text-wrapper {
  padding: 0.3125rem 0 0;
}
@media screen and (min-width: 768px) {
  .event__item-text-wrapper {
    padding: 0.625rem 0.625rem 0;
  }
}

.event__item-text {
  font-size: 0.875rem;
  font-weight: 500;
  font-family: "Noto Sans JP", sans-serif;
  color: #333333;
  line-height: 1.5;
}

.featured {
  position: relative;
  padding-top: 3.75rem;
  padding-bottom: 6.25rem; /* カードリストボタンがない時 */
}
@media screen and (min-width: 768px) {
  .featured {
    padding-top: 6.25rem;
    padding-bottom: 8.125rem;
  }
}

.featured::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-image: url(../images/featured/featured-bg-sp.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  z-index: -5;
}
@media screen and (min-width: 768px) {
  .featured::before {
    background-image: url(../images/featured/featured-bg-pc.jpg);
  }
}

html.webp .featured::before {
  background-image: url(../images/featured/featured-bg-sp.webp);
}
@media screen and (min-width: 768px) {
  html.webp .featured::before {
    background-image: url(../images/featured/featured-bg-pc.webp);
  }
}

.featured::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 55, 95, 0.8)), to(rgba(89, 24, 0, 0.8)));
  background: linear-gradient(180deg, rgba(0, 55, 95, 0.8) 0%, rgba(89, 24, 0, 0.8) 100%);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  width: 100%;
  height: 100%;
  z-index: -4;
}
@media screen and (min-width: 768px) {
  .featured::after {
    -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
  }
}

.featured__instruction {
  position: relative;
  width: 21.5rem;
  height: 6.3125rem;
  margin: 2.1875rem auto 0;
}
@media screen and (min-width: 768px) {
  .featured__instruction {
    width: 45.625rem;
    height: 6.625rem;
    margin: 5.3125rem auto 0;
  }
}

.featured__instruction::before,
.featured__instruction::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-size: contain;
  background-repeat: no-repeat;
}

.featured__instruction::before {
  background-image: url(../images/featured/frame-bg-sp.png);
  width: 21.5rem;
  height: 6.3125rem;
  -webkit-filter: drop-shadow(0px 0px 20px rgba(255, 255, 255, 0.5));
          filter: drop-shadow(0px 0px 20px rgba(255, 255, 255, 0.5));
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .featured__instruction::before {
    background-image: url(../images/featured/frame-bg-pc.png);
    width: 45.25rem;
    height: 6.25rem;
  }
}

.featured__instruction::after {
  background-image: url(../images/featured/frame-bg-outer-sp.png);
  width: 21.875rem;
  height: 6.6875rem;
  z-index: -2;
}
@media screen and (min-width: 768px) {
  .featured__instruction::after {
    background-image: url(../images/featured/frame-bg-outer-pc.png);
    width: 45.625rem;
    height: 6.625rem;
  }
}

.featured__instruction-wrapper {
  position: relative;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media screen and (min-width: 768px) {
  .featured__instruction-wrapper {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}

.featured__instruction-btn {
  max-width: 12.5rem;
  width: 100%;
  margin: auto;
  -webkit-filter: drop-shadow(0 0 16px #000);
          filter: drop-shadow(0 0 16px #000);
}
@media screen and (min-width: 768px) {
  .featured__instruction-btn {
    margin: 0;
  }
}

.featured__instruction-text {
  font-size: 0.75rem;
  font-weight: 900;
  font-family: "Noto Sans JP", sans-serif;
  color: #ffffff;
  margin-top: 0.625rem;
}

@media screen and (min-width: 768px) {
  .featured__instruction-text {
    padding-left: 1.25rem;
    margin-top: 0;
  }
}

.featured__card-title-wrapper {
  text-align: center;
}

.featured__card-title {
  position: relative;
  display: inline-block;
  font-size: 1.25rem;
  font-weight: 900;
  font-family: "Noto Sans JP", sans-serif;
  letter-spacing: 0.3em;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#d4e3ed));
  background-image: linear-gradient(180deg, #fff 0%, #d4e3ed 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media screen and (min-width: 768px) {
  .featured__card-title {
    font-size: 2.5rem;
  }
}

.featured__card-title::before,
.featured__card-title::after {
  content: "";
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  width: 0.625rem;
  height: 0.625rem;
}
@media screen and (min-width: 768px) {
  .featured__card-title::before,
  .featured__card-title::after {
    width: 0.9375rem;
    height: 0.9375rem;
  }
}

.featured__card-title::before {
  background-image: url(../images/featured/deck-title-deco-left.png);
  left: -1.5625rem;
}

.featured__card-title::after {
  background-image: url(../images/featured/deck-title-deco-right.png);
  right: -1.25rem;
}

.featured__card-sub-title {
  font-size: 2rem;
  font-weight: 900;
  font-family: "Saira Extra Condensed", serif;
  color: #d4e2ed;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-align: center;
  margin-top: 0.4375rem;
}


@media screen and (min-width: 768px) {
  .featured__card-sub-title {
      font-size: 4rem;
      margin-top: 0.4375rem;
  }
}


.featured__card-supplement {
  font-size: 0.875rem;
  font-weight: 700;
  font-family: "Noto Sans JP", sans-serif;
  color: #d4e2ed;
  text-align: center;
  margin-top: 1.25rem;
}
@media screen and (min-width: 768px) {
  .featured__card-supplement {
    font-size: 1.25rem;
    font-weight: 900;
    margin-top: 1.875rem;
  }
}

@media screen and (min-width: 768px) {
  .featured__swiper {
    margin-top: -0.5208333333vw;
    max-width: 91.1458333333vw;
    margin-left: auto;
    margin-right: auto;
  }
}

.featured__swiper-wrapper {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.featured__slide {
  padding: 24.154589372vw 0 55.5555555556vw;
}
@media screen and (min-width: 768px) {
  .featured__slide {
    padding: 9.375vw 0 20.8333333333vw;
  }
}

.featured__slide.swiper-slide-active {
  position: relative;
}

.featured__slide-img img,
.featured__slide-img-type img {
  aspect-ratio: 380/534; /* 基本的に同じ縦横比の画像が届くが、更新時は注意する */
  -o-object-fit: contain;
     object-fit: contain;
}

.featured__slide-img-no-active {
  -webkit-filter: brightness(0.6);
          filter: brightness(0.6);
}

.featured__slide-active {
  display: none; /* 初期状態 */
}

.featured__slide-container {
  position: absolute;
  top: 57%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 48.309178744vw;
}
@media screen and (min-width: 768px) {
  .featured__slide-container {
    top: 51%;
    width: 41.6666666667vw;
  }
}

.featured__slide-wrapper {
  position: relative;
}

.featured__slide-img-active {
  width: 44.9275362319vw;
  margin: auto;
  border-radius: 2.4154589372vw;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media screen and (min-width: 768px) {
  .featured__slide-img-active {
    width: 19.8958333333vw;
  }
}

.featured__slide-img-active-trial .featured__slide-img-type,
.featured__slide-img-active-booster .featured__slide-img-type {
  position: relative;
}

.featured__slide-img-active-trial .featured__slide-img-type::before,
.featured__slide-img-active-booster .featured__slide-img-type::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  background-size: contain;
  background-repeat: no-repeat;
  width: 8.4541062802vw;
  height: 8.4541062802vw;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .featured__slide-img-active-trial .featured__slide-img-type::before,
  .featured__slide-img-active-booster .featured__slide-img-type::before {
    width: 2.6041666667vw;
    height: 2.6041666667vw;
  }
}

.featured__slide-img-active:hover {
  -webkit-filter: brightness(1.2);
          filter: brightness(1.2);
}

.featured__slide-img-active-trial .featured__slide-img-type img,
.featured__slide-img-active-booster .featured__slide-img-type img {
  position: relative;
}

.featured__slide-img-active-trial .featured__slide-img-type img {
  -webkit-filter: drop-shadow(0px 0px 7.2463768116vw #3eafff);
          filter: drop-shadow(0px 0px 7.2463768116vw #3eafff);
}
@media screen and (min-width: 768px) {
  .featured__slide-img-active-trial .featured__slide-img-type img {
    -webkit-filter: drop-shadow(0px 0px 1.5625vw #3eafff);
            filter: drop-shadow(0px 0px 1.5625vw #3eafff);
  }
}

.featured__slide-img-active-booster .featured__slide-img-type img {
  -webkit-filter: drop-shadow(0px 0px 7.2463768116vw #ff713e);
          filter: drop-shadow(0px 0px 7.2463768116vw #ff713e);
}
@media screen and (min-width: 768px) {
  .featured__slide-img-active-booster .featured__slide-img-type img {
    -webkit-filter: drop-shadow(0px 0px 1.5625vw #ff713e);
            filter: drop-shadow(0px 0px 1.5625vw #ff713e);
  }
}

.featured__slide-img-active-trial .featured__slide-img-type::before {
  background-image: url(../images/featured/icon-zoom-trial-sp.svg);
}
@media screen and (min-width: 768px) {
  .featured__slide-img-active-trial .featured__slide-img-type::before {
    background-image: url(../images/featured/icon-zoom-trial-pc.svg);
  }
}

.featured__slide-img-active-booster .featured__slide-img-type::before {
  background-image: url(../images/featured/icon-zoom-booster-sp.svg);
}
@media screen and (min-width: 768px) {
  .featured__slide-img-active-booster .featured__slide-img-type::before {
    background-image: url(../images/featured/icon-zoom-booster-pc.svg);
  }
}

.featured__slide-img-active img {
  width: 100%;
}

.featured__slide-info {
  position: relative;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 90.3381642512vw;
  height: 22.2222222222vw;
  margin-top: 19.3236714976vw;
}
@media screen and (min-width: 768px) {
  .featured__slide-info {
    width: 41.6666666667vw;
    height: 8.3333333333vw;
    margin-top: 6.25vw;
  }
}

.featured__slide-info::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.featured__slide-info.featured__slide-info-trial::before {
  background-image: url(../images/featured/deck-text-trial-bg-sp.png);
}
@media screen and (min-width: 768px) {
  .featured__slide-info.featured__slide-info-trial::before {
    background-image: url(../images/featured/deck-text-trial-bg-pc.png);
  }
}

.featured__slide-info.featured__slide-info-booster::before {
  background-image: url(../images/featured/deck-text-booster-bg-sp.png);
}
@media screen and (min-width: 768px) {
  .featured__slide-info.featured__slide-info-booster::before {
    background-image: url(../images/featured/deck-text-booster-bg-pc.png);
  }
}

.featured__slide-btn {
  position: absolute;
  top: -14.4927536232vw;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 48.309178744vw;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media screen and (min-width: 768px) {
  .featured__slide-btn {
    top: -4.4270833333vw;
    width: 13.0208333333vw;
  }
}

.featured__slide-btn.featured__slide-btn--modal {
  position: static;
  margin: auto;
  margin-top: 20px;
  -webkit-transform: none;
          transform: none;
}

.featured__btn-change,
.featured__btn-change-modal {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.featured__btn-change.featured__btn-change-trial:hover,
.featured__btn-change-modal.featured__btn-change-modal-trial:hover {
  -webkit-filter: drop-shadow(0px 0px 0.3125rem #3eafff) brightness(1.3);
          filter: drop-shadow(0px 0px 0.3125rem #3eafff) brightness(1.3);
}

.featured__btn-change.featured__btn-change-booster:hover,
.featured__btn-change-modal.featured__btn-change-modal-booster:hover {
  -webkit-filter: drop-shadow(0px 0px 0.3125rem #ff713e) brightness(1.3);
          filter: drop-shadow(0px 0px 0.3125rem #ff713e) brightness(1.3);
}

.featured__slide-btn.featured__slide-btn-modal {
  top: auto;
  bottom: 0;
}

.featured__btn-change {
  position: relative;
  z-index: 2;
  padding: 0;
}

.featured__btn-change-modal {
  padding: 0;
}

.featured__slide-info-wrapper {
  padding-top: 5.5555555556vw;
  padding-left: 3.6231884058vw;
}
@media screen and (min-width: 768px) {
  .featured__slide-info-wrapper {
    padding-top: 2.3666666667vw;
    padding-left: 4.1666666667vw;
  }
}

.featured__slide-info-number {
  font-size: 3.3816425121vw;
  font-weight: 900;
  color: #ffffff;
}
@media screen and (min-width: 768px) {
  .featured__slide-info-number {
    font-size: 0.8333333333vw;
  }
}

.featured__slide-info-number-type {
  display: inline-grid;
  place-items: center;
  font-size: 3.3816425121vw;
  font-weight: 900;
  font-family: "Noto Sans JP", sans-serif;
  color: #221815;
  width: 18.8405797101vw;
  height: 3.8647342995vw;
  background-image: linear-gradient(86deg, #d1913c 0.25%, #ffd194 100%);
  -webkit-clip-path: polygon(10% 0, 100% 0%, 90% 100%, 0% 100%);
          clip-path: polygon(10% 0, 100% 0%, 90% 100%, 0% 100%);
  text-align: center;
  margin-left: 2.4154589372vw;
}
@media screen and (min-width: 768px) {
  .featured__slide-info-number-type {
    font-size: 0.8333333333vw;
    width: 4.0625vw;
    height: 1.1458333333vw;
    margin-left: 0.5208333333vw;
  }
}

.featured__slide-info-title {
  position: relative;
  font-size: 3.8647342995vw;
  font-weight: 900;
  color: #ffffff;
  margin-top: 3.6231884058vw;
  padding-left: 1.25rem;
}
@media screen and (min-width: 768px) {
  .featured__slide-info-title {
    font-size: 1.0416666667vw;
    margin-top: 1.5625vw;
    padding-left: 1.0416666667vw;
    padding-right: 2.0833333333vw;
  }
}

.featured__slide-info-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  background-size: contain;
  background-repeat: no-repeat;
  width: 3.8647342995vw;
  height: 4.347826087vw;
}
@media screen and (min-width: 768px) {
  .featured__slide-info-title::before {
    width: 0.8333333333vw;
    height: 0.9375vw;
  }
}

.featured__slide-info-title.featured__slide-info-title-trial::before {
  background-image: url("https://dev.en.ws-tcg.com/wordpress/wp-content/uploads/20250211110619/Artboard-10-e1739243527273.png");
}

.featured__slide-info-title.featured__slide-info-title-booster::before {
  background-image: url("https://dev.en.ws-tcg.com/wordpress/wp-content/uploads/20250211110619/Artboard-10-e1739243527273.png");
}


/* ボタンでスタイルを切り替える */
.hidden {
  display: none;
}

/* ---------- カード回転アニメーション用 | ここから ---------- */
.animate-rotate-out {
  -webkit-animation: rotate-out 0.5s ease-in-out;
          animation: rotate-out 0.5s ease-in-out;
}

.animate-rotate-in {
  -webkit-animation: rotate-in 0.5s ease-in-out;
          animation: rotate-in 0.5s ease-in-out;
}

/* カード（通常ver）が回転して消える */
@-webkit-keyframes rotate-out {
  0% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
    opacity: 1;
    -webkit-filter: brightness(1);
            filter: brightness(1);
  }
  100% {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
    opacity: 0;
    -webkit-filter: brightness(5);
            filter: brightness(5);
  }
}
@keyframes rotate-out {
  0% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
    opacity: 1;
    -webkit-filter: brightness(1);
            filter: brightness(1);
  }
  100% {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
    opacity: 0;
    -webkit-filter: brightness(5);
            filter: brightness(5);
  }
}
/* カード（スペシャルver）が回転して表示される */
@-webkit-keyframes rotate-in {
  0% {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
    opacity: 0;
    -webkit-filter: brightness(5);
            filter: brightness(5);
  }
  100% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
    opacity: 1;
    -webkit-filter: brightness(1);
            filter: brightness(1);
  }
}
@keyframes rotate-in {
  0% {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
    opacity: 0;
    -webkit-filter: brightness(5);
            filter: brightness(5);
  }
  100% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
    opacity: 1;
    -webkit-filter: brightness(1);
            filter: brightness(1);
  }
}
/* ---------- カード回転アニメーション用 | ここまで ---------- */
/* ---------- カード情報アニメーション用 | ここから ---------- */
/* フェードアウトアニメーション */
.animate-fade-out {
  -webkit-animation: fade-out 0.3s ease-out;
          animation: fade-out 0.3s ease-out;
  opacity: 0;
}

/* フェードインアニメーション */
.animate-fade-in {
  -webkit-animation: fade-in 0.3s ease-in;
          animation: fade-in 0.3s ease-in;
  opacity: 1;
}

/* カード情報（通常ver）が表示されるときのフェードイン */
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
    -webkit-filter: brightness(1.3);
            filter: brightness(1.3);
  }
  100% {
    opacity: 1;
    -webkit-filter: brightness(1);
            filter: brightness(1);
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
    -webkit-filter: brightness(1.3);
            filter: brightness(1.3);
  }
  100% {
    opacity: 1;
    -webkit-filter: brightness(1);
            filter: brightness(1);
  }
}
/* カード情報（スペシャルver）が非表示になるときのフェードアウト */
@-webkit-keyframes fade-out {
  0% {
    opacity: 1;
    -webkit-filter: brightness(1);
            filter: brightness(1);
  }
  100% {
    opacity: 0;
    -webkit-filter: brightness(5);
            filter: brightness(5);
  }
}
@keyframes fade-out {
  0% {
    opacity: 1;
    -webkit-filter: brightness(1);
            filter: brightness(1);
  }
  100% {
    opacity: 0;
    -webkit-filter: brightness(5);
            filter: brightness(5);
  }
}
/* ---------- カード情報アニメーション用 | ここまで ---------- */
/* Swiperがアクティブの時 */
.swiper-slide.featured__slide.swiper-slide-active {
  z-index: 1;
}

.swiper-slide.featured__slide.swiper-slide-active > .featured__slide-active {
  display: block;
}

.swiper-slide.featured__slide.swiper-slide-active > .featured__slide-img-no-active {
  display: none;
}

.swiper-slide.featured__slide.swiper-slide-active > .featured__slide-img.featured__slide-img-active {
  -webkit-filter: brightness(1);
          filter: brightness(1);
}
@media screen and (min-width: 768px) {
  .swiper-slide.featured__slide.swiper-slide-active > .featured__slide-img.featured__slide-img-active {
    width: 23.75rem;
  }
}

.featured__btn-card-list-wrapper {
  margin-top: 18.115942029vw;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .featured__btn-card-list-wrapper {
    margin-top: 3.125vw;
  }
}

.featured__btn-card-list {
  display: inline-block;
  width: 100%;
  max-width: 17.5rem;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media screen and (min-width: 768px) {
  .featured__btn-card-list {
    max-width: 31.25rem;
  }
}

.featured__btn-card-list.featured__btn-card-list-trial img {
  -webkit-filter: drop-shadow(0px 0px 20px #3eafff);
          filter: drop-shadow(0px 0px 20px #3eafff);
  -webkit-transform: translateZ(0);
          transform: translateZ(0); /* iPhoneのSafariでfilter: drop-shadowが効かない件の対策 */
}

.featured__btn-card-list.featured__btn-card-list-trial:hover {
  -webkit-filter: brightness(1.3) drop-shadow(0px 0px 20px #3eafff);
          filter: brightness(1.3) drop-shadow(0px 0px 20px #3eafff);
}

.featured__btn-card-list.featured__btn-card-list-booster img {
  -webkit-filter: drop-shadow(0px 0px 20px #ff713e);
          filter: drop-shadow(0px 0px 20px #ff713e);
  -webkit-transform: translateZ(0);
          transform: translateZ(0); /* iPhoneのSafariでfilter: drop-shadowが効かない件の対策 */
}

.featured__btn-card-list.featured__btn-card-list-booster:hover {
  -webkit-filter: brightness(1.3) drop-shadow(0px 0px 20px #ff713e);
          filter: brightness(1.3) drop-shadow(0px 0px 20px #ff713e);
}

.featured__line {
  margin-top: 16.9082125604vw; /* カードリストボタンがないとき時 */
  margin-bottom: 9.6618357488vw; /* カードリストボタンがないとき時 */
  width: 93.75%;
  height: 1px;
  background-color: #d6d6d6;
}
@media screen and (min-width: 768px) {
  .featured__line {
    margin-top: 2.6041666667vw; /* カードリストボタンがない時 */
    margin-bottom: 4.1666666667vw; /* カードリストボタンがない時 */
  }
}

.featured__trial {
  position: relative;
  margin-top: 12.077294686vw;
}
@media screen and (min-width: 768px) {
  .featured__trial {
    margin-top: 4.4791666667vw;
  }
}

.featured__trial::before {
  content: "";
  position: absolute;
  top: 32%; /* カードリストボタンがある時 */
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-image: url(../images/featured/card-slide-bg-sp.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 100vw;
  height: 24.154589372vw;
  z-index: -1;
  mix-blend-mode: overlay;
}
@media screen and (min-width: 768px) {
  .featured__trial::before {
    top: 34%; /* カードリストボタンがある時 */
    height: 10.4166666667vw;
    background-image: url(../images/featured/card-slide-bg-pc.png);
  }
}

.featured__booster {
  position: relative;
}

.featured__booster::before {
  content: "";
  position: absolute;
  top: 41.5%; /* カードリストボタンがない時 */
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-image: url(../images/featured/card-slide-bg-sp.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 100vw;
  height: 24.154589372vw;
  z-index: -1;
  mix-blend-mode: overlay;
}
@media screen and (min-width: 768px) {
  .featured__booster::before {
    top: 40.5%; /* カードリストボタンがない時 */
    height: 10.4166666667vw;
    background-image: url(../images/featured/card-slide-bg-pc.png);
  }
}

.featured__booster.featured__booster-illust::before {
  top: 35.5%; /* カードリストボタンがある時 */
}
@media screen and (min-width: 768px) {
  .featured__booster.featured__booster-illust::before {
    top: 37%; /* カードリストボタンがある時 */
  }
}

.footer {
  position: relative;
  padding-top: 20.0483091787vw;
  padding-bottom: 3.6231884058vw;
  margin-top: 6.038647343vw;
}
@media screen and (min-width: 768px) {
  .footer {
    padding-top: 0;
    padding-bottom: 0.78125vw;
    margin-top: 10.15625vw;
  }
}

.footer::before {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  background-image: url(../images/common/footer-bg-sp.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: calc(100% + 4px);
  height: 73.4299516908vw;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .footer::before {
    background-image: url(../images/common/footer-bg-pc.png);
    height: 27.5vw;
  }
}

.footer__privacy-policy {
  margin-top: 2.4154589372vw;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .footer__privacy-policy {
    margin-top: 1.0416666667vw;
  }
}

.footer__privacy-policy-link {
  position: relative;
  font-size: 3.3816425121vw;
  font-weight: 400;
  font-family: "Noto Sans JP", sans-serif;
  color: #ffffff;
  padding-bottom: 0.9661835749vw;
  padding-right: 6.038647343vw;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media screen and (min-width: 768px) {
  .footer__privacy-policy-link {
    font-size: 0.7291666667vw;
    padding-bottom: 0.2083333333vw;
    padding-right: 1.3020833333vw;
  }
}

.footer__privacy-policy-link::before {
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: #ffffff;
}

.footer__privacy-policy-link::after {
  content: "";
  position: absolute;
  top: 44%;
  right: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  background-image: url(../images/common/icon-link.svg);
  background-size: contain;
  background-repeat: no-repeat;
  width: 3.8647342995vw;
  height: 3.8647342995vw;
}
@media screen and (min-width: 768px) {
  .footer__privacy-policy-link::after {
    width: 0.8333333333vw;
    height: 0.8333333333vw;
  }
}

.footer__privacy-policy-link:hover {
  opacity: 0.6;
}

.footer__copyright {
  margin-top: 3.6231884058vw;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .footer__copyright {
    margin-top: 1.3020833333vw;
  }
}

.footer__copyright-text {
  font-size: 2.4154589372vw;
  font-weight: 700;
  font-family: "Noto Sans JP", sans-serif;
  color: #ffffff;
  line-height: 1.4615384615;
}
@media screen and (min-width: 768px) {
  .footer__copyright-text {
    font-size: 0.8333333333vw;
  }
}

.footer__logo {
  margin-top: 1.2077294686vw;
}
@media screen and (min-width: 768px) {
  .footer__logo {
    margin-top: 0.2604166667vw;
  }
}

.footer__logo-link {
  display: block;
  max-width: 36.231884058vw;
  width: 100%;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  margin: auto;
}
@media screen and (min-width: 768px) {
  .footer__logo-link {
    max-width: 9.8958333333vw;
  }
}

.footer__logo-link:hover {
  -webkit-filter: brightness(1.3);
          filter: brightness(1.3);
}

.hamburger {
  position: absolute;
  top: 0.1875rem;
  right: 0;
  z-index: 100;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media screen and (min-width: 768px) {
  .hamburger {
    top: 1.25rem;
    right: 1.25rem;
  }
}

.hamburger:hover {
  -webkit-filter: brightness(10);
          filter: brightness(10);
}

.hamburger__wrapper {
  position: relative;
  width: 4rem;
  height: 4rem;
}
@media screen and (min-width: 768px) {
  .hamburger__wrapper {
    width: 7.5625rem;
    height: 7.5625rem;
  }
}

.hamburger__btn {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 1.40625rem;
  height: 0.9375rem;
  background-image: url(../images/common/hamburger-open.svg);
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media screen and (min-width: 768px) {
  .hamburger__btn {
    width: 1.9375rem;
    height: 1.375rem;
  }
}

.hamburger__btn.is-active {
  width: 1.3125rem;
  height: 0.5625rem;
  background-image: url(../images/common/hamburger-close.svg);
}
@media screen and (min-width: 768px) {
  .hamburger__btn.is-active {
    width: 1.875rem;
    height: 0.875rem;
  }
}

.hamburger__bg {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 4rem;
  height: 4rem;
  background-image: url(../images/common/hamburger-open-bg.svg);
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media screen and (min-width: 768px) {
  .hamburger__bg {
    width: 7.5625rem;
    height: 7.5625rem;
  }
}

.hamburger__bg.is-active {
  content: "";
  width: 4rem;
  height: 4rem;
  background-image: url(../images/common/hamburger-close-bg.svg);
}
@media screen and (min-width: 768px) {
  .hamburger__bg.is-active {
    width: 7.5625rem;
    height: 7.5625rem;
  }
}

.hamburger-wrapper:hover {
  -webkit-filter: hue-rotate(-130deg);
          filter: hue-rotate(-130deg);
}

/* 時計回りのアニメーションを指定 */
.hamburger__bg {
  -webkit-animation: rotateBtnLeft 24s linear infinite;
          animation: rotateBtnLeft 24s linear infinite;
}

@-webkit-keyframes rotateBtnLeft {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
            transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
            transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes rotateBtnLeft {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
            transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
            transform: translate(-50%, -50%) rotate(360deg);
  }
}
/* ホバーした際、回転のスピードアップ */
.hamburger:hover .hamburger__bg {
  -webkit-animation: rotateBtnLeft 6s linear infinite;
          animation: rotateBtnLeft 6s linear infinite;
}

.header {
  z-index: 100;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
}

.header__inner {
  position: relative;
}

/* ローディング画面 */
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  background: #2a2a2a;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 1000;
  -webkit-transition: opacity 1s ease;
  transition: opacity 1s ease;
}

.loading-bar {
  width: 100%;
  height: 2px;
  background-color: #888888;
  overflow: hidden;
  position: relative;
}

.loading-bar__progress {
  width: 0%;
  height: 100%;
  background-color: #d4e2ed;
  -webkit-animation: loading-animation 3s linear forwards;
          animation: loading-animation 3s linear forwards;
}

@-webkit-keyframes loading-animation {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

@keyframes loading-animation {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
/* モーダル */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  pointer-events: none;
  opacity: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}

.modal.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* モーダル背景のオーバーレイ部分 */
.modal__overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

/* モーダルのコンテンツ */
.modal__container {
  width: 70%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
@media screen and (min-width: 768px) {
  .modal__container {
    max-width: 31.25rem;
  }
}

.modal__wrapper {
  max-height: 90dvh;
  padding-bottom: 4.375rem;
}
@media screen and (min-width: 768px) {
  .modal__wrapper {
    padding-bottom: 0;
  }
}

/* モーダルを閉じるボタン */
.modal__close-btn {
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  width: 2.8125rem;
  height: 2.8125rem;
  cursor: pointer;
  z-index: 10;
  padding: 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media screen and (min-width: 768px) {
  .modal__close-btn {
    right: -6.25rem;
    width: 4.375rem;
    height: 4.375rem;
  }
}

.modal__close-btn:hover {
  -webkit-filter: brightness(1.3);
          filter: brightness(1.3);
}

.modal__swiper-slide {
  padding-top: 4.375rem;
}
@media screen and (min-width: 768px) {
  .modal__swiper-slide {
    padding-top: 0;
  }
}

.modal__slide-img img {
  aspect-ratio: 380/534; /* 基本的に同じ縦横比の画像が届くが、更新時は注意する */
  max-height: calc(90dvh - 8.75rem);
  -o-object-fit: contain;
     object-fit: contain;
}

/* モーダルと背景の指定 */
.modal-deck {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  background-color: rgba(0, 0, 0, 0.5);
  overflow: auto;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  z-index: 2000;
}

.modal-deck.is-active-modal-deck {
  opacity: 1;
  visibility: visible;
  height: 100dvh;
}

.modal-deck__inner {
  max-width: 23.4375rem;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
@media screen and (min-width: 768px) {
  .modal-deck__inner {
    max-width: 41.1875rem;
  }
}

.modal-deck__content {
  position: relative;
}

/* モーダルを閉じるボタンの指定 */
.modal-deck-close {
  position: absolute;
  top: 0rem;
  right: 0rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 2.8125rem;
  height: 2.8125rem;
  cursor: pointer;
  z-index: 1;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media screen and (min-width: 768px) {
  .modal-deck-close {
    top: -0.875rem;
    right: -2.125rem;
    width: 4.375rem;
    height: 4.375rem;
  }
}

.modal-deck-close.modal-deck-close-official-recognition {
  display: block;
  top: -3.4375rem;
  right: 0rem;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media screen and (min-width: 768px) {
  .modal-deck-close.modal-deck-close-official-recognition {
    top: -0.875rem;
    right: -2.125rem;
  }
}

.modal-deck-close.modal-deck-close-trial:hover {
  -webkit-filter: brightness(1.3) drop-shadow(0px 0px 10px #3eafff);
          filter: brightness(1.3) drop-shadow(0px 0px 10px #3eafff);
}

.modal-deck-close.modal-deck-close-booster:hover {
  -webkit-filter: brightness(1.3) drop-shadow(0px 0px 10px #ff713e);
          filter: brightness(1.3) drop-shadow(0px 0px 10px #ff713e);
}

.modal-deck-close.modal-deck-close-official-recognition:hover {
  -webkit-filter: brightness(1.3) drop-shadow(0px 0px 10px #d4e2ed);
          filter: brightness(1.3) drop-shadow(0px 0px 10px #d4e2ed);
}

/* モーダルと背景の指定 */
.modal-event {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  background-color: rgba(0, 0, 0, 0.5);
  overflow: auto;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  z-index: 2000;
}

.modal-event.is-active-modal-event {
  opacity: 1;
  visibility: visible;
  height: 100dvh;
}

.modal-event__inner {
  max-width: 23.375rem;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
@media screen and (min-width: 768px) {
  .modal-event__inner {
    max-width: 56.25rem;
  }
}

.modal-event__content {
  position: relative;
}

/* モーダルを閉じるボタンの指定 */
.modal-event-close {
  position: absolute;
  top: 0rem;
  right: 0rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 2.8125rem;
  height: 2.8125rem;
  cursor: pointer;
  z-index: 1;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media screen and (min-width: 768px) {
  .modal-event-close {
    top: -0.875rem;
    right: -2.125rem;
    width: 4.375rem;
    height: 4.375rem;
  }
}

.modal-event-close.modal-event-close-official-recognition {
  display: block;
  top: -3.4375rem;
  right: 0rem;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media screen and (min-width: 768px) {
  .modal-event-close.modal-event-close-official-recognition {
    top: -0.875rem;
    right: -2.125rem;
  }
}

.modal-event-close.modal-event-close-event:hover {
  -webkit-filter: brightness(1.3) drop-shadow(0px 0px 10px #ff713e);
          filter: brightness(1.3) drop-shadow(0px 0px 10px #ff713e);
}

.modal-event-close.modal-event-close-campaign:hover {
  -webkit-filter: brightness(1.3) drop-shadow(0px 0px 10px #3eafff);
          filter: brightness(1.3) drop-shadow(0px 0px 10px #3eafff);
}

.modal-event__container {
  padding-top: 3.125rem;
}
@media screen and (min-width: 768px) {
  .modal-event__container {
    padding-top: 3.4375rem;
  }
}

.modal-event__container.modal-event__container-event:hover {
  -webkit-filter: brightness(1.1) drop-shadow(0px 0px 10px #3eafff);
          filter: brightness(1.1) drop-shadow(0px 0px 10px #3eafff);
}

.modal-event__container.modal-event__container-booster:hover {
  -webkit-filter: brightness(1.1) drop-shadow(0px 0px 10px #ff713e);
          filter: brightness(1.1) drop-shadow(0px 0px 10px #ff713e);
}

.modal-event__container.modal-event__container-modal {
  padding-top: 3.125rem;
  height: 36.35rem;
}
@media screen and (min-width: 768px) {
  .modal-event__container.modal-event__container-modal {
    padding-top: 4.0625rem;
    height: 35.5rem;
  }
}

.modal-event__container-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: -1;
}

.modal-event__type {
  position: absolute;
  top: 0.125rem;
  font-size: 1rem;
  font-weight: 700;
  font-family: "Saira Extra Condensed", serif;
  color: #ffffff;
  text-transform: uppercase;
}
.modal-event__type.modal-event__type-event {
  left: 1.25rem;
}
@media screen and (min-width: 768px) {
  .modal-event__type.modal-event__type-event {
    left: 1.875rem;
  }
}

.modal-event__type.modal-event__type-campaign {
  left: 0.625rem;
}
@media screen and (min-width: 768px) {
  .modal-event__type.modal-event__type-campaign {
    left: 1.25rem;
  }
}

.modal-event__wrapper {
  height: 30rem;
  padding: 0 2.875rem 0 1.25rem;
  overflow-y: scroll;
  margin: auto;
}
@media screen and (min-width: 768px) {
  .modal-event__wrapper {
    height: 30.5625rem;
    padding: 0 10.375rem;
  }
}

.modal-event__modal-info {
  margin-top: 1.25rem;
}

.modal-event__modal-info-text {
  font-size: 0.875rem;
  font-weight: 500;
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.5;
}
@media screen and (min-width: 768px) {
  .modal-event__modal-info-text {
    font-size: 1rem;
  }
}

.modal-event__modal-info-text.modal-event__modal-info-text-event {
  color: #ffffff;
}

.modal-event__items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 0.875rem; /* 上下の余白 */
  -webkit-column-gap: 1rem;
     -moz-column-gap: 1rem;
          column-gap: 1rem; /* 左右の余白 */
  margin-top: 1.25rem;
}
@media screen and (min-width: 768px) {
  .modal-event__items {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 1rem; /* 上下の余白 */
  }
}

/* 『SimpleBar』プラグイン対応 ここから ------------------- */
.modal-event__wrapper {
  overflow-y: scroll; /* 縦スクロールバー */
  -ms-overflow-style: none; /* IE, Edge 対応 */
  scrollbar-width: none; /* Firefox 対応 */
}
.modal-event__wrapper::-webkit-scrollbar {
  /* Chrome, Safari 対応 */
  display: none;
}

/* スクロールバーのつまみ部分（サム）の色 */
.modal-event__wrapper.modal-event__wrapper-event .simplebar-scrollbar::before,
.modal-event__wrapper.modal-event__wrapper-campaign .simplebar-scrollbar::before {
  content: "";
  border-radius: 0.3125rem;
  width: 0.5rem;
  left: 50%;
  right: auto; /* デフォルトの初期値解除 */
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.modal-event__wrapper.modal-event__wrapper-event .simplebar-scrollbar::before {
  background-color: #ff713e;
}

.modal-event__wrapper.modal-event__wrapper-campaign .simplebar-scrollbar::before {
  background-color: #3eafff;
}

.modal-event__wrapper.modal-event__wrapper-event .simplebar-scrollbar.simplebar-visible::before {
  opacity: 1;
}

/* スクロールバーの背景（トラック） */
.modal-event__wrapper.modal-event__wrapper-event .simplebar-track {
  background-color: #d9d9d9;
  width: 0.625rem;
  right: 0.9375rem;
  height: 28.625rem;
}
@media screen and (min-width: 768px) {
  .modal-event__wrapper.modal-event__wrapper-event .simplebar-track {
    height: 26.9375rem;
  }
}

.modal-event__wrapper.modal-event__wrapper-event .simplebar-track.simplebar-vertical {
  top: 0.9375rem;
}
@media screen and (min-width: 768px) {
  .modal-event__wrapper.modal-event__wrapper-event .simplebar-track.simplebar-vertical {
    top: 0.625rem;
  }
}

/* 『SimpleBar』プラグイン対応 ここまで ------------------- */
.modal-event__heading {
  font-size: 1.25rem;
  font-weight: 900;
  font-family: "Noto Sans JP", sans-serif;
  color: #ff713e;
  padding-bottom: 0.46875rem;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  text-decoration: underline;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .modal-event__heading {
    font-size: 1.5rem;
  }
}

.modal-event__heading.modal-event__heading-event {
  color: #ff713e;
}

.modal-event__heading.modal-event__heading-campaign {
  color: #3eafff;
}

.modal-event__modal-info-text {
  font-size: 0.875rem;
  font-weight: 500;
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.5;
}
@media screen and (min-width: 768px) {
  .modal-event__modal-info-text {
    font-size: 1rem;
  }
}

.modal-event__modal-info-text.modal-event__modal-info-text-event {
  color: #000000;
}

.modal-event__notes-items {
  margin-top: 1.25rem;
}

.modal-event__notes-item {
  font-size: 0.9375rem;
  font-weight: 500;
  font-family: "Noto Sans JP", sans-serif;
  color: #000000;
  line-height: 1.5;
}

.movie {
  position: relative;
  padding-top: 3.125rem;
  padding-bottom: 5.75rem;
}
@media screen and (min-width: 768px) {
  .movie {
    padding-top: 4.6875rem;
    padding-bottom: 6.25rem;
  }
}

.movie::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-image: url(../images/movie/bg-movie-sp.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 100vw;
  height: 92.7536231884vw;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .movie::before {
    background-image: url(../images/movie/bg-movie-pc.png);
    width: 222.65625vw;
    height: 66.1458333333vw;
    left: 82%;
    top: -2.6041666667vw;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
@media screen and (min-width: 1921px) {
  .movie::before {
    top: -3.125rem;
    width: 267.1875rem;
    height: 79.375rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
@media screen and (min-width: 2560px) {
  .movie::before {
    width: 166.2890625vw;
    height: 49.609375vw;
  }
}

html.webp .movie::before {
  background-image: url(../images/movie/bg-movie-sp.webp);
}
@media screen and (min-width: 768px) {
  html.webp .movie::before {
    background-image: url(../images/movie/bg-movie-pc.webp);
  }
}

.movie__inner {
  width: 100%;
  margin: auto;
}
@media screen and (min-width: 768px) {
  .movie__inner {
    max-width: 73.875rem;
  }
}

.movie__container {
  margin-top: 2.8125rem;
}
@media screen and (min-width: 768px) {
  .movie__container {
    margin-top: 3.75rem;
  }
}

.movie__youtube {
  position: relative;
  display: block;
}

.movie__thumbnail {
  aspect-ratio: 16/9;
  -o-object-fit: cover;
     object-fit: cover;
}

.movie__youtube::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-image: url(../images/movie/youtube-play-icon.svg);
  background-size: contain;
  background-repeat: no-repeat;
  width: 8.4541062802vw;
  height: 5.9178743961vw;
  z-index: 99999;
}
@media screen and (min-width: 768px) {
  .movie__youtube::before {
    width: 6.25vw;
    height: 4.375vw;
  }
}
@media screen and (min-width: 1920px) {
  .movie__youtube::before {
    width: 4.75rem;
    height: 3.325rem;
  }
}

/* ---------- Swiperスライドが1つの時 | ここから ---------- */
/* ---------- Swiperスライドが1つの時 | ここまで ---------- */
.mv {
  position: relative;
  padding-bottom: 21.2560386473vw;
}
@media screen and (min-width: 768px) {
  .mv {
    padding-bottom: 0;
  }
}

.mv::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(54.5%, #000), to(rgba(0, 0, 0, 0)));
  background: linear-gradient(0deg, #000 54.5%, rgba(0, 0, 0, 0) 100%);
  width: 100%;
  height: 37.4396135266vw;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .mv::before {
    height: 12.03125vw;
    background: -webkit-gradient(linear, left bottom, left top, color-stop(50%, #000), to(rgba(0, 0, 0, 0)));
    background: linear-gradient(0deg, #000 50%, rgba(0, 0, 0, 0) 100%);
  }
}

.mv__img {
  -webkit-animation: sparkleAndFloat 20s infinite ease-in-out;
          animation: sparkleAndFloat 20s infinite ease-in-out;
}

/* メインビジュアルの夕焼けが輝く様子を演出 */
@-webkit-keyframes sparkleAndFloat {
  0% {
    -webkit-filter: brightness(1);
            filter: brightness(1);
  }
  10% {
    -webkit-filter: brightness(1.03);
            filter: brightness(1.03);
    opacity: 0.9;
  }
  20% {
    -webkit-filter: brightness(1.3);
            filter: brightness(1.3);
    opacity: 0.8;
  }
  30% {
    -webkit-filter: brightness(0.95);
            filter: brightness(0.95);
    opacity: 0.9;
  }
  40% {
    -webkit-filter: brightness(1);
            filter: brightness(1);
    opacity: 1;
  }
  50% {
    -webkit-filter: brightness(0.9);
            filter: brightness(0.9);
    opacity: 0.8;
  }
  60% {
    -webkit-filter: brightness(1.03);
            filter: brightness(1.03);
    opacity: 0.9;
  }
  70% {
    -webkit-filter: brightness(0.95);
            filter: brightness(0.95);
    opacity: 0.8;
  }
  80% {
    -webkit-filter: brightness(1.1);
            filter: brightness(1.1);
    opacity: 1;
  }
  90% {
    -webkit-filter: brightness(1.05);
            filter: brightness(1.05);
    opacity: 0.9;
  }
  100% {
    -webkit-filter: brightness(1);
            filter: brightness(1);
    opacity: 1;
  }
}
@keyframes sparkleAndFloat {
  0% {
    -webkit-filter: brightness(1);
            filter: brightness(1);
  }
  10% {
    -webkit-filter: brightness(1.03);
            filter: brightness(1.03);
    opacity: 0.9;
  }
  20% {
    -webkit-filter: brightness(1.3);
            filter: brightness(1.3);
    opacity: 0.8;
  }
  30% {
    -webkit-filter: brightness(0.95);
            filter: brightness(0.95);
    opacity: 0.9;
  }
  40% {
    -webkit-filter: brightness(1);
            filter: brightness(1);
    opacity: 1;
  }
  50% {
    -webkit-filter: brightness(0.9);
            filter: brightness(0.9);
    opacity: 0.8;
  }
  60% {
    -webkit-filter: brightness(1.03);
            filter: brightness(1.03);
    opacity: 0.9;
  }
  70% {
    -webkit-filter: brightness(0.95);
            filter: brightness(0.95);
    opacity: 0.8;
  }
  80% {
    -webkit-filter: brightness(1.1);
            filter: brightness(1.1);
    opacity: 1;
  }
  90% {
    -webkit-filter: brightness(1.05);
            filter: brightness(1.05);
    opacity: 0.9;
  }
  100% {
    -webkit-filter: brightness(1);
            filter: brightness(1);
    opacity: 1;
  }
}
.mv__logo {
  position: absolute;
  top: -1px;
  left: -1px;
  background-image: url(../images/mv/mv-logo-bg-sp.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 37.4396135266vw;
  height: 18.115942029vw;
}
@media screen and (min-width: 768px) {
  .mv__logo {
    width: 21.7447916667vw;
    height: 7.96875vw;
    background-image: url(../images/mv/mv-logo-bg-pc.png);
  }
}

.mv__logo img {
  width: 21.9806763285vw;
  margin-top: 0.7246376812vw;
  margin-left: 5.3140096618vw;
}
@media screen and (min-width: 768px) {
  .mv__logo img {
    width: 16.8229166667vw;
    margin-top: 0.2083333333vw;
    margin-left: 1.6666666667vw;
  }
}

.mv__logo-link {
  display: block;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.mv__logo-link:hover {
  -webkit-filter: brightness(1.3);
          filter: brightness(1.3);
}

.mv__title {
  position: absolute;
  top: 73.1884057971vw;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 83.3333333333vw;
  z-index: 2;
}
@media screen and (min-width: 768px) {
  .mv__title {
    left: 50.4%;
    top: 29.53125vw;
    width: 39.7916666667vw;
  }
}

.mv__deck-01 {
  position: absolute;
  top: 130.193236715vw;
  left: 23.1884057971vw;
  width: 22.4637681159vw;
  -webkit-filter: drop-shadow(0 0 15px #ffffff);
          filter: drop-shadow(0 0 15px #ffffff);
  z-index: 2;
}
@media screen and (min-width: 768px) {
  .mv__deck-01 {
    top: 26.1979166667vw;
    left: 12.5vw;
    width: 15.8854166667vw;
  }
}

.mv__deck-02 {
  position: absolute;
  top: 130.193236715vw;
  right: 23.4299516908vw;
  width: 19.3236714976vw;
  -webkit-filter: drop-shadow(0 0 15px #ffffff);
          filter: drop-shadow(0 0 15px #ffffff);
  z-index: 2;
}
@media screen and (min-width: 768px) {
  .mv__deck-02 {
    top: 26.1458333333vw;
    right: 13.9583333333vw;
    width: 13.8020833333vw;
  }
}

.nav {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 25.875rem;
  height: 100dvh;
  overflow-y: scroll;
  z-index: 99;
  background: rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  padding: 6.25rem 0;
}
@media screen and (min-width: 768px) {
  .nav {
    -webkit-clip-path: polygon(0% 0%, 100% 0, 100% 100%, 17% 100%, 0 94%);
            clip-path: polygon(0% 0%, 100% 0, 100% 100%, 17% 100%, 0 94%);
    max-width: 37.5rem;
    padding: 8.125rem 0;
  }
}

/* スクロールバー非表示 | ここから -------------- */
.nav {
  -ms-overflow-style: none; /* IE, Edge 対応 */
  scrollbar-width: none; /* Firefox 対応 */
}

.nav::-webkit-scrollbar {
  display: none; /* Chrome, Safari 対応 */
}

/* スクロールバー非表示 | ここまで -------------- */
.nav::before,
.nav::after {
  content: "";
  position: absolute;
  background-image: url(../images/common/drawer-menu-deco.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 2.125rem;
  height: 27.0625rem;
  z-index: 100;
}
@media screen and (min-width: 768px) {
  .nav::before,
  .nav::after {
    width: 2.125rem;
    height: 26.8125rem;
  }
}

.nav::before {
  top: 0;
  left: 1.25rem;
}
@media screen and (min-width: 768px) {
  .nav::before {
    left: 2.5rem;
  }
}

.nav::after {
  bottom: 0;
  right: 1.25rem;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
@media screen and (min-width: 768px) {
  .nav::after {
    right: 2.5rem;
  }
}

.nav.is-active {
  display: block;
}

.nav__wrapper {
  position: relative;
  display: block;
  padding: 0 5.9375rem;
}
@media screen and (min-width: 768px) {
  .nav__wrapper {
    padding: 0 9.375rem;
  }
}

.nav__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  position: relative;
  z-index: 1;
  margin: auto;
}

.nav__item:nth-child(n+2) {
  margin-top: 1.875rem;
}

.nav__item-link {
  position: relative;
  display: block;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.nav__item-link:hover {
  -webkit-filter: hue-rotate(-130deg);
          filter: hue-rotate(-130deg);
}

.nav__item-text-en {
  display: inline-block;
  font-size: 2rem;
  font-weight: 900;
  font-family: "Saira Extra Condensed", serif;
  color: #ffffff;
  letter-spacing: 0.1em;
  padding: 0.0625rem 0.625rem;
  text-transform: uppercase;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  margin: 0.5rem;
}
@media screen and (min-width: 768px) {
  .nav__item-text-en {
      font-size: 2.5rem;
  }
}


.nav__item-link:hover .nav__item-text-en {
  color: #000000;
  background-color: #ffffff;
}

.nav__item-text-ja {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.3125rem;
  margin-top: 0.3125rem;
}
@media screen and (min-width: 768px) {
  .nav__item-text-ja {
    gap: 0.625rem;
    margin-top: 0.625rem;
  }
}

.nav__item-text-ja-mt {
  margin-top: 0.3125rem;
}
@media screen and (min-width: 768px) {
  .nav__item-text-ja-mt {
    margin-top: 0.625rem;
  }
}

.nav__item-text-ja span {
  display: grid;
  place-items: center;
  font-size: 1.75rem;
  font-weight: 900;
  font-family: "Noto Sans JP", sans-serif;
  color: #000000;
  width: 2rem;
  height: 2rem;
  background-color: #ffffff;
  padding-bottom: 0.3125rem;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media screen and (min-width: 768px) {
  .nav__item-text-ja span {
    font-size: 2.25rem;
    width: 2.5rem;
    height: 2.5rem;
  }
}

.nav__item-link:hover .nav__item-text-ja span {
  color: #ffffff;
  background-color: #000000;
}

.nav__sns-btn {
  margin-top: 3.125rem;
}
@media screen and (min-width: 768px) {
  .nav__sns-btn {
    margin-top: 3.75rem;
  }
}

.official-recognition {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 10;
}

.official-recognition__wrapper {
  display: block;
  width: 5.3125rem;
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  .official-recognition__wrapper {
    width: 31.875rem;
    -webkit-filter: drop-shadow(0px 0px 15px #3eafff);
            filter: drop-shadow(0px 0px 15px #3eafff);
  }
}

.official-recognition__wrapper img {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.official-recognition__wrapper:hover img {
  -webkit-filter: brightness(1.3);
          filter: brightness(1.3);
}
@media screen and (min-width: 768px) {
  .official-recognition__wrapper:hover img {
    -webkit-filter: brightness(1.3) drop-shadow(0px 0px 15px #3eafff);
            filter: brightness(1.3) drop-shadow(0px 0px 15px #3eafff);
  }
}

.official-recognition__content {
  position: relative;
  width: 23.375rem;
  height: 9.125rem;
  padding-top: 2.1875rem;
}
@media screen and (min-width: 768px) {
  .official-recognition__content {
    width: 41.1875rem;
    height: 17.0625rem;
    padding-top: 4.6875rem;
  }
}

.official-recognition__content::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-image: url(../images/common/official-recognition-modal-bg-sp.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .official-recognition__content::before {
    background-image: url(../images/common/official-recognition-modal-bg-sp.png);
  }
}

.official-recognition__modal-text {
  font-size: 0.875rem;
  font-weight: 700;
  font-family: "Noto Sans JP", sans-serif;
  color: #ffffff;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .official-recognition__modal-text {
    font-size: 1.5rem;
    font-weight: 900;
  }
}

.official-recognition__modal-btn {
  margin-top: 1.3125rem;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .official-recognition__modal-btn {
    margin-top: 2.1875rem;
  }
}

.pageup-btn {
  position: absolute;
  top: 1.690821256vw;
  left: -2px;
  z-index: 1;
  width: 66.4251207729vw;
  height: 13.2850241546vw;
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  .pageup-btn {
    top: -26.5625vw;
    left: auto;
    right: 2px;
    width: 5.2604166667vw;
    height: 18.3333333333vw;
  }
}

.pageup-btn a {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  width: 100%;
  height: 100%;
}

.pageup-btn:hover .pageup-btn__img {
  -webkit-filter: brightness(1.3);
          filter: brightness(1.3);
}

.pageup-btn__img {
  position: absolute;
  top: 1.2077294686vw;
  left: -2px;
  width: 66.4251207729vw;
  height: 16.4251207729vw;
  z-index: -3;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media screen and (min-width: 768px) {
  .pageup-btn__img {
    top: -26.5625vw;
    left: auto;
    right: -2px;
    width: 5.2604166667vw;
    height: 18.3333333333vw;
  }
}

.pageup-btn__img img {
  -webkit-filter: drop-shadow(0px 0px 10px #3eafff);
          filter: drop-shadow(0px 0px 10px #3eafff);
}

.product-features {
  position: relative;
  padding-top: 2.1875rem;
  padding-bottom: 3.125rem;
}
@media screen and (min-width: 768px) {
  .product-features {
    padding-top: 5.75rem;
    padding-bottom: 8.125rem;
  }
}

.product-features::before,
.product-features::after {
  content: "";
  position: absolute;
  top: 0;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: -2;
}

.product-features::before {
  left: 0;
  background-image: url(../images/product-features/product-features-bg-sp-left.png);
  width: 2.75rem;
  height: 10.6875rem;
}
@media screen and (min-width: 768px) {
  .product-features::before {
    width: 6.25rem;
    height: 26.75rem;
    background-image: url(../images/product-features/product-features-bg-pc-left.png);
  }
}

.product-features::after {
  right: 0;
  background-image: url(../images/product-features/product-features-bg-sp-right.png);
  width: 2.75rem;
  height: 20.875rem;
}
@media screen and (min-width: 768px) {
  .product-features::after {
    width: 8.375rem;
    height: 53.3125rem;
    background-image: url(../images/product-features/product-features-bg-pc-right.png);
  }
}

.product-features__bg-img-01,
.product-features__bg-img-02 {
  position: absolute;
  z-index: -3;
}

.product-features__bg-img-01 {
  top: 0;
  left: 0;
  width: 13.3125rem;
}
@media screen and (min-width: 768px) {
  .product-features__bg-img-01 {
    top: -25.625rem;
    left: auto;
    right: calc(50% - 94.25rem);
    width: 185.375rem;
  }
}

.product-features__bg-img-02 {
  bottom: 0;
  right: 0;
  width: 13.3125rem;
}
@media screen and (min-width: 768px) {
  .product-features__bg-img-02 {
    display: none;
  }
}

.product-features__inner {
  position: relative;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  margin: auto;
}
@media screen and (min-width: 768px) {
  .product-features__inner {
    padding-left: 6.25rem;
    padding-right: 6.25rem;
  }
}
@media screen and (min-width: 1440px) {
  .product-features__inner {
    padding-left: 1.5625rem;
    padding-right: 1.5625rem;
  }
}

@media screen and (min-width: 768px) {
  .product-features__inner::before {
    content: "";
    position: absolute;
    top: -15rem;
    right: calc(50% - 59.375rem);
    background-image: url(../images/product-features/product-features-deco-pc.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 122.25rem;
    height: 87.5625rem;
    z-index: -4;
  }
}

.product-features__section-title {
  max-width: 23.4375rem;
  margin: auto;
}
@media screen and (min-width: 768px) {
  .product-features__section-title {
    position: relative;
    max-width: 92.25rem;
  }
}

@media screen and (min-width: 768px) {
  .product-features__section-title::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    background-image: url(../images/product-features/product-features-section-title-bg.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 41.75rem;
    height: 31.3125rem;
    z-index: -4;
    mix-blend-mode: difference;
  }
}

.product-features__wrapper {
  max-width: 23.4375rem;
  margin: 2.1875rem auto 0;
}
@media screen and (min-width: 768px) {
  .product-features__wrapper {
    margin: 3.375rem auto 0;
    max-width: 75rem;
  }
}

.product-features__items {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  row-gap: 2.1875rem; /* 上下の余白 */
}
@media screen and (min-width: 768px) {
  .product-features__items {
    grid-template-columns: repeat(2, 1fr);
    -webkit-column-gap: 6.25rem;
       -moz-column-gap: 6.25rem;
            column-gap: 6.25rem;
  }
}

.product-features__item {
  position: relative;
  height: 25.95rem;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media screen and (min-width: 768px) {
  .product-features__item {
    height: 37.125rem;
  }
}

.product-features__item:not(.product-features__item.product-features__item-modal) {
  cursor: pointer;
}

.product-features__item.product-features__item-trial:not(.product-features__item.product-features__item-trial.product-features__item-modal):hover {
  -webkit-filter: brightness(1.1) drop-shadow(0px 0px 10px #3eafff);
          filter: brightness(1.1) drop-shadow(0px 0px 10px #3eafff);
}

.product-features__item.product-features__item-booster:not(.product-features__item.product-features__item-booster.product-features__item-modal):hover {
  -webkit-filter: brightness(1.1) drop-shadow(0px 0px 10px #ff713e);
          filter: brightness(1.1) drop-shadow(0px 0px 10px #ff713e);
}

.product-features__item.product-features__item-modal {
  padding-top: 3.125rem;
  height: 36.35rem;
}
@media screen and (min-width: 768px) {
  .product-features__item.product-features__item-modal {
    padding-top: 4.0625rem;
    height: 37.0625rem;
  }
}

.product-features__item-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: -1;
}

.product-features__type {
  position: absolute;
  top: 0.125rem;
  left: 1.25rem;
  font-size: 1.25rem;
  font-weight: 900;
  font-family: "Saira Extra Condensed", serif;
  color: #ffffff;
}
.product-features__item-img {
  max-width: 8.75rem;
  width: 100%;
  margin: 3.125rem auto 0;
}
@media screen and (min-width: 768px) {
  .product-features__item-img {
    max-width: 12.5rem;
    margin: 4.375rem auto 0;
  }
}

.product-features__sub-title {
  font-size: 1rem;
  font-weight: 900;
  font-family: "Noto Sans JP", sans-serif;
  text-align: center;
  margin-top: 0.9375rem;
}
@media screen and (min-width: 768px) {
  .product-features__sub-title {
    font-size: 1.5rem;
    margin-top: 1.6875rem;
  }
}

.product-features__sub-title.product-features__sub-title-trial {
  color: #ffffff;
}

.product-features__sub-title.product-features__sub-title-booster {
  color: #000000;
}

.product-features__sub-title.product-features__modal-sub-title {
  margin-top: 0;
}

.product-features__main-title-wrapper {
  position: relative;
  height: 2.6875rem;
}
@media screen and (min-width: 768px) {
  .product-features__main-title-wrapper {
    margin-top: -0.3125rem;
    height: 4.5rem;
  }
}

.product-features__main-title {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.75rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1.5;
  text-wrap: nowrap;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content; /* safariで『text-wrap: nowrap;』が効かないため */
}
@media screen and (min-width: 768px) {
  .product-features__main-title {
    font-size: 2.5vw;
    font-size: 3rem;
  }
}

.product-features__main-title-01-trial {
  color: #00ffff;
}

.product-features__main-title-02-trial {
  top: 0.0625rem;
  left: calc(50% - 0.125rem);
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  color: #ff0000;
}

.product-features__main-title-01-booster {
  color: #00ffff;
}

.product-features__main-title-02-booster {
  top: 0.0625rem;
  left: calc(50% - 0.125rem);
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  color: #ff0000;
}

.product-features__main-title-type-01 {
  mix-blend-mode: screen;
}

.product-features__main-title-type-02 {
  mix-blend-mode: multiply;
}

.product-features__detail {
  position: absolute;
  bottom: 0.725rem;
  right: 3.75rem;
  font-size: 0.85rem;
  font-weight: 900;
  font-family: "Noto Sans JP", sans-serif;
  color: #ffffff;
}


@media screen and (min-width: 768px) {
  .product-features__detail {
      font-size: 1.5rem;
      bottom: 0.9rem;
      right: 4.5rem;
  }
}

.product-features__detail.product-features__detail-modal {
  right: 1.1rem;
}
@media screen and (min-width: 768px) {
  .product-features__detail.product-features__detail-modal {
    font-size: 1rem;
    right: 1.5rem;
  }
}

.product-features__modal-wrapper {
  padding-left: 1.25rem;
  padding-right: 2.875rem;
  height: 30rem;
  overflow-y: scroll;
}
@media screen and (min-width: 768px) {
  .product-features__modal-wrapper {
    padding-left: 5.25rem;
    padding-right: 7.4375rem;
    height: 29.3125rem;
  }
}

.product-features__modal-info {
  margin-top: 0.9375rem;
}
@media screen and (min-width: 768px) {
  .product-features__modal-info {
    max-width: 25rem;
    width: 100%;
    margin: 1.5625rem auto 0;
  }
}

.product-features__modal-info-text {
  font-size: 0.875rem;
  font-weight: 500;
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.5;
}
@media screen and (min-width: 768px) {
  .product-features__modal-info-text {
    font-size: 1rem;
  }
}

.product-features__modal-info-text.product-features__modal-info-text-trial {
  color: #ffffff;
}

.product-features__modal-info-text.product-features__modal-info-text-booster {
  color: #000000;
}

.product-features__modal-info-itmes {
  margin-top: 1.25rem;
}
@media screen and (min-width: 768px) {
  .product-features__modal-info-itmes {
    margin-top: 1.5625rem;
  }
}

.product-features__modal-info-itme {
  font-size: 0.875rem;
  font-weight: 500;
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.5;
}
@media screen and (min-width: 768px) {
  .product-features__modal-info-itme {
    font-size: 1rem;
  }
}

.product-features__modal-info-itme.product-features__modal-info-itme-trial {
  color: #ffffff;
}

.product-features__modal-info-itme.product-features__modal-info-itme-booster {
  color: #000000;
}

/* 『SimpleBar』プラグイン対応 ここから ------------------- */
.product-features__modal-wrapper {
  overflow-y: scroll; /* 縦スクロールバー */
  -ms-overflow-style: none; /* IE, Edge 対応 */
  scrollbar-width: none; /* Firefox 対応 */
}
.product-features__modal-wrapper::-webkit-scrollbar {
  /* Chrome, Safari 対応 */
  display: none;
}

/* スクロールバーのつまみ部分（サム）の色 */
.simplebar-scrollbar::before {
  content: "";
  border-radius: 0.3125rem;
  width: 0.5rem;
  left: 50%;
  right: auto; /* デフォルトの初期値解除 */
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.product-features__modal-wrapper.product-features__modal-wrapper-trial .simplebar-scrollbar::before {
  background-color: #3eafff;
}

.product-features__modal-wrapper.product-features__modal-wrapper-booster .simplebar-scrollbar::before {
  background-color: #ff713e;
}

.simplebar-scrollbar.simplebar-visible::before {
  opacity: 1;
}

/* スクロールバーの背景（トラック） */
.simplebar-track {
  background-color: #d9d9d9;
  width: 0.625rem;
  right: 0.9375rem;
  height: 28.625rem;
}
@media screen and (min-width: 768px) {
  .simplebar-track {
    height: 26.9375rem;
  }
}

.simplebar-track.simplebar-vertical {
  top: 0.9375rem;
}
@media screen and (min-width: 768px) {
  .simplebar-track.simplebar-vertical {
    top: 0.625rem;
  }
}

/* 『SimpleBar』プラグイン対応 ここまで ------------------- */
/* ---------- モーダル内の予約調整用クラス | ここから ---------- */
.product-features__modal-mt-20-25 {
  margin-top: 1.25rem;
}
@media screen and (min-width: 768px) {
  .product-features__modal-mt-20-25 {
    margin-top: 1.5625rem;
  }
}

/* ---------- モーダル内の予約調整用クラス | ここまで ---------- */
.section-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.section-title__sub-title {
  display: inline-block;
  font-size: 2rem;
  font-weight: 900;
  font-family: "Saira Extra Condensed", serif;
  letter-spacing: 0.1em;
  padding: 0.0625rem 0.625rem;
  text-transform: uppercase;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media screen and (min-width: 768px) {
  .section-title__sub-title {
      font-size: 5rem;
  }
}

.section-title__main-title-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 0.3125rem;
}
@media screen and (min-width: 768px) {
  .section-title__main-title-wrapper {
    margin-top: 0.625rem;
  }
}

.section-title__main-title-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.section-title__main-deco-left {
  margin-right: 0.625rem;
}
@media screen and (min-width: 768px) {
  .section-title__main-deco-left {
    margin-right: 1.5625rem;
  }
}

.section-title__main-deco-right {
  margin-right: 0.625rem;
}
@media screen and (min-width: 768px) {
  .section-title__main-deco-right {
    margin-left: 1.5625rem;
  }
}

.section-title__main-deco-left,
.section-title__main-deco-right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-column-gap: 0.625rem;
     -moz-column-gap: 0.625rem;
          column-gap: 0.625rem;
}

.section-title__main-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.625rem;
  padding: 0 0.625rem;
}
@media screen and (min-width: 768px) {
  .section-title__main-title {
    gap: 0.9375rem;
    padding: 0 1.25rem;
  }
}

.section-title__main-title + .section-title__main-title {
  margin-top: 0.3125rem;
}
@media screen and (min-width: 768px) {
  .section-title__main-title + .section-title__main-title {
    margin-top: 1rem;
  }
}

.section-title__main-title span {
  display: grid;
  place-items: center;
  font-size: 2rem;
  font-weight: 900;
  font-family: "Noto Sans JP", sans-serif;
  width: 2.125rem;
  height: 2.125rem;
  padding-bottom: 0.3125rem;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media screen and (min-width: 768px) {
  .section-title__main-title span {
    font-size: 4rem;
    width: 4.375rem;
    height: 4.375rem;
  }
}

/* ----------------------------------------------- */
/* セクションタイトルのプラスマーク */
/* ----------------------------------------------- */
.section-title__plus {
  position: relative;
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
}
@media screen and (min-width: 768px) {
  .section-title__plus {
    width: 1.125rem;
    height: 1.125rem;
  }
}

.section-title__plus::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-mask-image: url(../images/common/icon-plus.svg);
          mask-image: url(../images/common/icon-plus.svg);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  width: 100%;
  height: 100%;
}

.section-title__plus.section-title__plus-white::before {
  -webkit-animation: colorChangeWhite 1s infinite;
          animation: colorChangeWhite 1s infinite;
}

.section-title__plus.section-title__plus-black::before {
  -webkit-animation: colorChangeBlack 1s infinite;
          animation: colorChangeBlack 1s infinite;
}

/* ---------- プラスマーク設定（白色） | ここから ---------- */
/* 左側のプラスマーク */
.section-title__plus.section-title__plus-white.section-title__left-plus-01::before {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}

.section-title__plus.section-title__plus-white.section-title__left-plus-02::before {
  -webkit-animation-delay: 0.25s;
          animation-delay: 0.25s;
}

.section-title__plus.section-title__plus-white.section-title__left-plus-03::before {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

/* 右側のプラスマーク */
.section-title__plus.section-title__plus-white.section-title__right-plus-01::before {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

.section-title__plus.section-title__plus-white.section-title__right-plus-02::before {
  -webkit-animation-delay: 0.25s;
          animation-delay: 0.25s;
}

.section-title__plus.section-title__plus-white.section-title__right-plus-03::before {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}

@-webkit-keyframes colorChangeWhite {
  0% {
    background-color: #7f7f7f; /* 外側の色 */
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
  }
  33% {
    background-color: #404040; /* 中間の色 */
    -webkit-transform: translate(-50%, -50%) scale(1.1);
            transform: translate(-50%, -50%) scale(1.1);
  }
  66% {
    background-color: #ffffff; /* 内側の色 */
    -webkit-transform: translate(-50%, -50%) scale(1.2);
            transform: translate(-50%, -50%) scale(1.2);
  }
  100% {
    background-color: #7f7f7f; /* 外側の色に戻る */
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes colorChangeWhite {
  0% {
    background-color: #7f7f7f; /* 外側の色 */
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
  }
  33% {
    background-color: #404040; /* 中間の色 */
    -webkit-transform: translate(-50%, -50%) scale(1.1);
            transform: translate(-50%, -50%) scale(1.1);
  }
  66% {
    background-color: #ffffff; /* 内側の色 */
    -webkit-transform: translate(-50%, -50%) scale(1.2);
            transform: translate(-50%, -50%) scale(1.2);
  }
  100% {
    background-color: #7f7f7f; /* 外側の色に戻る */
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
  }
}
/* ---------- プラスマーク設定（白色） | ここまで ---------- */
/* ---------- プラスマーク設定（黒色） | ここから ---------- */
/* 左側のプラスマーク */
.section-title__plus.section-title__plus-black.section-title__left-plus-01::before {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}

.section-title__plus.section-title__plus-black.section-title__left-plus-02::before {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

.section-title__plus.section-title__plus-black.section-title__left-plus-03::before {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}

/* 右側のプラスマーク */
.section-title__plus.section-title__plus-black.section-title__right-plus-01::before {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}

.section-title__plus.section-title__plus-black.section-title__right-plus-02::before {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

.section-title__plus.section-title__plus-black.section-title__right-plus-03::before {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}

@-webkit-keyframes colorChangeBlack {
  0% {
    background-color: #888888; /* 外側の色 */
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
  }
  33% {
    background-color: #646464; /* 中間の色 */
    -webkit-transform: translate(-50%, -50%) scale(1.1);
            transform: translate(-50%, -50%) scale(1.1);
  }
  66% {
    background-color: #000000; /* 内側の色 */
    -webkit-transform: translate(-50%, -50%) scale(1.2);
            transform: translate(-50%, -50%) scale(1.2);
  }
  100% {
    background-color: #888888; /* 外側の色に戻る */
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes colorChangeBlack {
  0% {
    background-color: #888888; /* 外側の色 */
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
  }
  33% {
    background-color: #646464; /* 中間の色 */
    -webkit-transform: translate(-50%, -50%) scale(1.1);
            transform: translate(-50%, -50%) scale(1.1);
  }
  66% {
    background-color: #000000; /* 内側の色 */
    -webkit-transform: translate(-50%, -50%) scale(1.2);
            transform: translate(-50%, -50%) scale(1.2);
  }
  100% {
    background-color: #888888; /* 外側の色に戻る */
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
  }
}
/* ---------- プラスマーク設定（黒色） | ここまで ---------- */
.sns-btn__share-img {
  width: 4rem;
  text-align: center;
  margin: auto;
}
@media screen and (min-width: 768px) {
  .sns-btn__share-img {
    width: 6.4375rem;
  }
}

.sns-btn__share-img.sns-btn__share-img--footer {
  width: 15.4589371981vw;
}
@media screen and (min-width: 768px) {
  .sns-btn__share-img.sns-btn__share-img--footer {
    width: 4.6875vw;
  }
}

.sns-btn__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0.625rem auto 0;
  padding-top: 0.625rem;
  border-top: 1px solid #ffffff;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}
.sns-btn__items.sns-btn__items--footer {
  margin: 1.2077294686vw auto 0;
  padding-top: 1.2077294686vw;
}
@media screen and (min-width: 768px) {
  .sns-btn__items.sns-btn__items--footer {
    margin: 0.5208333333vw auto 0;
    padding-top: 0.5208333333vw;
  }
}

.sns-btn__item {
  display: block;
  width: 3.125rem;
  height: 3.125rem;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media screen and (min-width: 768px) {
  .sns-btn__item {
    width: 4.5rem;
    height: 4.5rem;
  }
}

.sns-btn__item.sns-btn__item--footer {
  width: 12.077294686vw;
  height: 12.077294686vw;
}
@media screen and (min-width: 768px) {
  .sns-btn__item.sns-btn__item--footer {
    width: 2.6041666667vw;
    height: 2.6041666667vw;
  }
}

.sns-btn__item:nth-child(n+2) {
  margin-left: 1.25rem;
}
@media screen and (min-width: 768px) {
  .sns-btn__item:nth-child(n+2) {
    margin-left: 1.375rem;
  }
}

.sns-btn__item.sns-btn__item--footer:nth-child(n+2) {
  margin-left: 4.8309178744vw;
}
@media screen and (min-width: 768px) {
  .sns-btn__item.sns-btn__item--footer:nth-child(n+2) {
    margin-left: 1.1458333333vw;
  }
}

.sns__link {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.sns__link::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
  border: 1px solid #ffffff;
  background-color: transparent;
  width: 2.1875rem;
  height: 2.1875rem;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media screen and (min-width: 768px) {
  .sns__link::before {
    width: 3.1875rem;
    height: 3.1875rem;
  }
}

.sns__link.sns__link--footer::before {
  width: 8.4541062802vw;
  height: 8.4541062802vw;
}
@media screen and (min-width: 768px) {
  .sns__link.sns__link--footer::before {
    width: 1.8229166667vw;
    height: 1.8229166667vw;
  }
}

.sns__link img {
  position: relative;
}

.sns__link:hover {
  -webkit-filter: brightness(1.3);
          filter: brightness(1.3);
}

.sns__link:hover::before {
  background-color: #000000;
  -webkit-transform: translate(-50%, -50%) rotate(360deg);
          transform: translate(-50%, -50%) rotate(360deg);
}

.swiper-slide img {
  height: auto;
  width: 100%;
}

/* ---------- Swiperのページャーと『次へ・前へ』ボタンの上下中央を揃える | ここから ---------- */
/* PC時にページャーと『次へ・前へ』ボタンの上下中央を揃える */
/* 注目カード */
.swiper-option {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media screen and (min-width: 768px) {
  .swiper-option {
    top: -1.5625vw;
  }
}

@media screen and (min-width: 768px) {
  .swiper-pagination.swiper-pagination-featured {
    position: static;
  }
}

.swiper-option > .swiper-horizontal > .swiper-pagination-bullets,
.swiper-option > .swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-option > .swiper-pagination-custom,
.swiper-option > .swiper-pagination-fraction {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .swiper-option > .swiper-horizontal > .swiper-pagination-bullets,
  .swiper-option > .swiper-pagination-bullets.swiper-pagination-horizontal,
  .swiper-option > .swiper-pagination-custom,
  .swiper-option > .swiper-pagination-fraction {
    width: auto;
  }
}

.swiper-pagination-bullets {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.swiper-button-prev.swiper-button-prev-featured,
.swiper-button-next.swiper-button-next-featured {
  position: absolute;
  margin-top: initial;
}

.swiper-button-prev.swiper-button-prev-featured-04,
.swiper-button-next.swiper-button-next-featured-04 {
  position: absolute;
  margin-top: initial;
}

/* ---------- Swiperのページャーと『次へ・前へ』ボタンの上下中央を揃える | ここまで ---------- */
/* スライドカスタマイズ ムービースライド ------------- */
.swiper-slide-movie {
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  padding: 8.4541062802vw 0;
}
@media screen and (min-width: 768px) {
  .swiper-slide-movie {
    padding: 4.7916666667vw 0;
  }
}

.swiper-slide-movie.swiper-slide-active {
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -webkit-transform: scale(1.65);
          transform: scale(1.65);
}
@media screen and (min-width: 768px) {
  .swiper-slide-movie.swiper-slide-active {
    -webkit-transform: scale(1.4);
            transform: scale(1.4);
  }
}
@media screen and (min-width: 1920px) {
  .swiper-slide-movie.swiper-slide-active {
    -webkit-transform: scale(1.62);
            transform: scale(1.62);
  }
}

.swiper-slide-movie.swiper-slide-active:hover {
  -webkit-filter: brightness(1.3);
          filter: brightness(1.3);
}

.swiper-slide-movie:not(.swiper-slide-active) .youtube-modal {
  pointer-events: none;
}

/* スライドカスタマイズ ムービースライド ここまで------------- */
/* 前へ次への矢印カスタマイズ 共通部分 ------------- */
.swiper-button-prev,
.swiper-button-next {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
  -webkit-filter: brightness(1.2);
          filter: brightness(1.2);
}

.swiper-button-prev::after,
.swiper-button-next::after {
  content: "";
  background-repeat: no-repeat;
  background-size: contain;
  margin: auto;
  width: 100%;
  height: 100%;
}

/* 前へ次への矢印カスタマイズ 共通部分 ここまで------------- */
/* 注目カードの矢印カスタマイズ ここから ------------- */
.swiper-button-prev.swiper-button-prev-featured,
.swiper-button-prev.swiper-button-prev-featured-04,
.swiper-button-next.swiper-button-next-featured,
.swiper-button-next.swiper-button-next-featured-04 {
  position: absolute;
  top: -77.2946859903vw;
  width: 9.6618357488vw;
  height: 9.6618357488vw;
}
@media screen and (min-width: 768px) {
  .swiper-button-prev.swiper-button-prev-featured,
  .swiper-button-prev.swiper-button-prev-featured-04,
  .swiper-button-next.swiper-button-next-featured,
  .swiper-button-next.swiper-button-next-featured-04 {
    width: 4.1666666667vw;
    height: 4.1666666667vw;
    top: -30.7291666667vw;
  }
}

.swiper-button-prev.swiper-button-prev-featured,
.swiper-button-prev.swiper-button-prev-featured-04 {
  left: auto;
  right: calc(50% + 18.115942029vw);
}
@media screen and (min-width: 768px) {
  .swiper-button-prev.swiper-button-prev-featured,
  .swiper-button-prev.swiper-button-prev-featured-04 {
    right: calc(50% + 8.3333333333vw);
  }
}

.swiper-button-next.swiper-button-next-featured,
.swiper-button-next.swiper-button-next-featured-04 {
  left: calc(50% + 18.115942029vw);
}
@media screen and (min-width: 768px) {
  .swiper-button-next.swiper-button-next-featured,
  .swiper-button-next.swiper-button-next-featured-04 {
    left: calc(50% + 8.3333333333vw);
  }
}

/* 前への矢印カスタマイズ */
.swiper-button-prev.swiper-button-prev-featured-trial::after {
  background-image: url(../images/featured/icon-arrow-trial-left.png);
}

/* 次への矢印カスタマイズ */
.swiper-button-next.swiper-button-next-featured-trial::after {
  background-image: url(../images/featured/icon-arrow-trial-right.png);
}

/* 前への矢印カスタマイズ */
.swiper-button-prev.swiper-button-prev-featured-booster::after,
.swiper-button-prev.swiper-button-prev-featured-booster-04::after {
  background-image: url(../images/featured/icon-arrow-booster-left.png);
}

/* 次への矢印カスタマイズ */
.swiper-button-next.swiper-button-next-featured-booster::after,
.swiper-button-next.swiper-button-next-featured-booster-04::after {
  background-image: url(../images/featured/icon-arrow-booster-right.png);
}

/* 注目カードの矢印カスタマイズ ここまで------------- */
/* 注目カードモーダルの矢印カスタマイズ ここから ------------- */
.swiper-button-prev.swiper-button-prev-modal-featured,
.swiper-button-next.swiper-button-next-modal-featured {
  position: absolute;
  width: 9.6618357488vw;
  height: 9.6618357488vw;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
@media screen and (min-width: 768px) {
  .swiper-button-prev.swiper-button-prev-modal-featured,
  .swiper-button-next.swiper-button-next-modal-featured {
    width: 6.25rem;
    height: 6.25rem;
  }
}

.swiper-button-prev.swiper-button-prev-modal-featured {
  left: auto;
  right: calc(50% + 30.193236715vw);
}
@media screen and (min-width: 768px) {
  .swiper-button-prev.swiper-button-prev-modal-featured {
    right: calc(50% + 21.875rem);
  }
}

.swiper-button-next.swiper-button-next-modal-featured {
  left: calc(50% + 30.193236715vw);
}
@media screen and (min-width: 768px) {
  .swiper-button-next.swiper-button-next-modal-featured {
    left: calc(50% + 21.875rem);
  }
}

/* 前への矢印カスタマイズ */
.swiper-button-prev.swiper-button-prev-modal-featured-trial::after {
  background-image: url(../images/featured/icon-arrow-trial-left.svg);
}

/* 次への矢印カスタマイズ */
.swiper-button-next.swiper-button-next-modal-featured-trial::after {
  background-image: url(../images/featured/icon-arrow-trial-right.svg);
}

/* 前への矢印カスタマイズ */
.swiper-button-prev.swiper-button-prev-modal-featured-booster::after,
.swiper-button-prev.swiper-button-prev-modal-featured-booster-04::after {
  background-image: url(../images/featured/icon-arrow-booster-left.png);
}

/* 次への矢印カスタマイズ */
.swiper-button-next.swiper-button-next-modal-featured-booster::after,
.swiper-button-next.swiper-button-next-modal-featured-booster-04::after {
  background-image: url(../images/featured/icon-arrow-booster-right.png);
}

/* 注目カードモーダルの矢印カスタマイズ ここまで------------- */
/* ムービーの矢印カスタマイズ ここから ------------- */
.swiper-button-prev.swiper-button-prev-movie,
.swiper-button-next.swiper-button-next-movie {
  width: 2.75rem;
  height: 2.75rem;
  bottom: 1.5625rem;
  top: auto;
}
@media screen and (min-width: 768px) {
  .swiper-button-prev.swiper-button-prev-movie,
  .swiper-button-next.swiper-button-next-movie {
    top: 54.5%;
    bottom: auto;
    width: 6.63125rem;
    height: 6.63125rem;
  }
}

.swiper-button-prev.swiper-button-prev-movie {
  left: auto;
  right: calc(50% + 3.9375rem);
}
@media screen and (min-width: 768px) {
  .swiper-button-prev.swiper-button-prev-movie {
    right: calc(50% + 33.75rem);
  }
}

.swiper-button-next.swiper-button-next-movie {
  left: calc(50% + 3.9375rem);
}
@media screen and (min-width: 768px) {
  .swiper-button-next.swiper-button-next-movie {
    left: calc(50% + 33.75rem);
  }
}

/* 前への矢印カスタマイズ */
.swiper-button-prev.swiper-button-prev-movie::after {
  background-image: url(../images/movie/arrow-diamond-left.svg);
}

/* 次への矢印カスタマイズ */
.swiper-button-next.swiper-button-next-movie::after {
  background-image: url(../images/movie/arrow-diamond-right.svg);
}

/* ムービーの矢印カスタマイズ ここまで------------- */
/* 注目カードのページャー ここから ------------- */
.swiper-pagination.swiper-pagination-featured {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  bottom: -9.6618357488vw;
  height: 5.5555555556vw;
}
@media screen and (min-width: 768px) {
  .swiper-pagination.swiper-pagination-featured {
    position: static;
    height: 1.5625vw;
  }
}

/* ページネーションの余白 */
.swiper-pagination.swiper-pagination-featured > .swiper-pagination-bullet,
.swiper-pagination.swiper-pagination-featured > .swiper-pagination-bullet.swiper-pagination-bullet-active {
  margin: 0 1.690821256vw;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media screen and (min-width: 768px) {
  .swiper-pagination.swiper-pagination-featured > .swiper-pagination-bullet,
  .swiper-pagination.swiper-pagination-featured > .swiper-pagination-bullet.swiper-pagination-bullet-active {
    margin: 0 0.6770833333vw;
  }
}

/* ページネーションの基本スタイル */
.swiper-pagination.swiper-pagination-featured > .swiper-pagination-bullet {
  background-color: transparent;
  border: 1px solid #d6d6d6;
  width: 1.9323671498vw;
  height: 1.9323671498vw;
  opacity: 1;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  border-radius: 50px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media screen and (min-width: 768px) {
  .swiper-pagination.swiper-pagination-featured > .swiper-pagination-bullet {
    width: 0.5208333333vw;
    height: 0.5208333333vw;
  }
}

.swiper-pagination.swiper-pagination-featured > .swiper-pagination-bullet:hover {
  -webkit-filter: drop-shadow(0px 0px 0.3125rem #d4e2ed) brightness(1.3);
          filter: drop-shadow(0px 0px 0.3125rem #d4e2ed) brightness(1.3);
}

/* 選択されているページネーション */
.swiper-pagination.swiper-pagination-featured > .swiper-pagination-bullet.swiper-pagination-bullet-active {
  height: 3.3816425121vw;
  width: 3.3816425121vw;
}
@media screen and (min-width: 768px) {
  .swiper-pagination.swiper-pagination-featured > .swiper-pagination-bullet.swiper-pagination-bullet-active {
    height: 1.0416666667vw;
    width: 1.0416666667vw;
  }
}

.swiper-pagination.swiper-pagination-featured-trial > .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #3eafff;
  border: 1px solid #3eafff;
}

.swiper-pagination.swiper-pagination-featured-booster > .swiper-pagination-bullet.swiper-pagination-bullet-active,
.swiper-pagination.swiper-pagination-featured-booster-04 > .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-image: url('https://dev.en.ws-tcg.com/wordpress/wp-content/uploads/20250211110619/Artboard-10-e1739243527273.png');
  background-size: cover;
  background-position: center;
  border: none;
}

.swiper-pagination.swiper-pagination-featured-trial > .swiper-pagination-bullet.swiper-pagination-bullet-active:hover {
  -webkit-filter: drop-shadow(0px 0px 0.3125rem #3eafff) brightness(1.3);
          filter: drop-shadow(0px 0px 0.3125rem #3eafff) brightness(1.3);
}

.swiper-pagination.swiper-pagination-featured-booster > .swiper-pagination-bullet.swiper-pagination-bullet-active:hover,
.swiper-pagination.swiper-pagination-featured-booster-04 > .swiper-pagination-bullet.swiper-pagination-bullet-active:hover {
  -webkit-filter: drop-shadow(0px 0px 0.3125rem #ff713e) brightness(1.3);
          filter: drop-shadow(0px 0px 0.3125rem #ff713e) brightness(1.3);
}

/* 注目カードのページャー ここまで------------- */
/* ムービーのページャー ここから ------------- */
.swiper-pagination.swiper-pagination-movie {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  bottom: 2.5rem;
}

/* ページネーションの余白 */
.swiper-pagination.swiper-pagination-movie > .swiper-pagination-bullet,
.swiper-pagination.swiper-pagination-movie > .swiper-pagination-bullet.swiper-pagination-bullet-active {
  margin: 0 0.8125rem;
}
@media screen and (min-width: 768px) {
  .swiper-pagination.swiper-pagination-movie > .swiper-pagination-bullet,
  .swiper-pagination.swiper-pagination-movie > .swiper-pagination-bullet.swiper-pagination-bullet-active {
    margin: 0 1.25rem;
  }
}

/* ページネーションの基本スタイル */
.swiper-pagination.swiper-pagination-movie > .swiper-pagination-bullet {
  background-color: #646464;
  width: 0.5rem;
  height: 0.5rem;
  opacity: 1;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  border-radius: 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media screen and (min-width: 768px) {
  .swiper-pagination.swiper-pagination-movie > .swiper-pagination-bullet {
    width: 0.625rem;
    height: 0.625rem;
  }
}

.swiper-pagination.swiper-pagination-movie > .swiper-pagination-bullet:hover {
  -webkit-filter: drop-shadow(0px 0px 0.3125rem #646464) brightness(1.3);
          filter: drop-shadow(0px 0px 0.3125rem #646464) brightness(1.3);
}

/* 選択されているページネーション */
.swiper-pagination.swiper-pagination-movie > .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #3eafff;
  height: 1rem;
  width: 1rem;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media screen and (min-width: 768px) {
  .swiper-pagination.swiper-pagination-movie > .swiper-pagination-bullet.swiper-pagination-bullet-active {
    height: 1.25rem;
    width: 1.25rem;
  }
}

.swiper-pagination.swiper-pagination-movie > .swiper-pagination-bullet.swiper-pagination-bullet-active:hover {
  -webkit-filter: drop-shadow(0px 0px 0.3125rem #3eafff) brightness(1.3);
          filter: drop-shadow(0px 0px 0.3125rem #3eafff) brightness(1.3);
}

/* ムービーのページャー ここまで------------- */
/* ------------------------ */
/* 固有のフォント設定 */
/* 共通パーツで設定すると不便な場合、こちらに設定する */
/* ------------------------ */
/* ---------- フォントカラーの設定 ここから ---------- */
/* 16進数カラーコードも命名する。text-light-blue、text-dark-blueで管理すると、色の判別がしにくいため。 */
.text-black-000000,
.text-black-000000-span span {
  color: #000000;
}

.text-white-ffffff,
.text-white-ffffff-span span {
  color: #ffffff;
}

/* ---------- フォントカラーの設定 ここまで ---------- */
/* ---------- 背景色の設定 ここから ---------- */
/* 16進数カラーコードも命名する。text-light-blue、text-dark-blueで管理すると、色の判別がしにくいため。 */
.bg-black-000000,
.bg-black-000000-span span {
  background-color: #000000;
}

.bg-white-ffffff,
.bg-white-ffffff-span span {
  background-color: #ffffff;
}

/* ---------- 背景色の設定 ここまで ---------- */
/* ---------- フォントの大文字・小文字の設定 ここから ---------- */
/* capitalize はspanタグで囲って使用する。「:first-letter」は使用しない。 */
/* 各単語の最初のテキストを大文字に変換 */
.text-capitalize {
  text-transform: capitalize;
}

/* 全てのテキストを大文字に変換 */
.text-uppercase {
  text-transform: uppercase;
}

/* ---------- フォントの大文字・小文字の設定 ここまで ---------- */
/* ---------- フォントウェイトの設定 ここから ---------- */
/* ---------- フォントウェイトの設定 ここまで ---------- */
/* ---------- 2行目から先頭1文字開けて表示される（※、・が先頭に記載されているときに使用） ここから ---------- */
.text-wrap {
  padding-left: 1em;
  text-indent: -1em;
}

/* ---------- 2行目から先頭1文字開けて表示される（※、・が先頭に記載されているときに使用） ここまで ---------- */
/* ------------ */
/* テキストの下線 */
/* ------------ */
.underline-red {
  padding-bottom: 0.125rem;
}

/* ------------------------ */
/* 改行用、SP・PC非表示用の設定 */
/* ------------------------ */
/* ---------- 改行 〜 more：以上、less：以下 | ここから ---------- */
/* 414px以下で改行 */
@media screen and (min-width: 414px) {
  .br-414-less {
    display: none;
  }
}

/* 500px以下で改行 */
@media screen and (min-width: 500px) {
  .br-500-less {
    display: none;
  }
}

/* 768px以下で改行 */
@media screen and (min-width: 768px) {
  .br-768-less {
    display: none;
  }
}

/* 768px以上で改行 */
.br-768-more {
  display: none;
}
@media screen and (min-width: 768px) {
  .br-768-more {
    display: block;
  }
}

/* 1000px以下で改行 */
@media screen and (min-width: 768px) {
  .br-1000-less {
    display: none;
  }
}

/* 1000px以上で改行 */
.br-1000-more {
  display: none;
}
@media screen and (min-width: 1000px) {
  .br-1000-more {
    display: block;
  }
}

/* 1480px以上で改行 */
.br-1480-more {
  display: none;
}
@media screen and (min-width: 1480px) {
  .br-1480-more {
    display: block;
  }
}

/* 1920px以上で改行 */
.br-1920-more {
  display: none;
}
@media screen and (min-width: 1920px) {
  .br-1920-more {
    display: block;
  }
}

/* ---------- 改行 | ここまで ---------- */
/* ---------- 表示・非表示 〜 more：以上、less：以下 | ここから ---------- */
/* PCのとき非表示 */
@media screen and (min-width: 768px) {
  .pc-none {
    display: none;
  }
}

/* SPのとき非表示 */
.sp-none {
  display: none;
}
@media screen and (min-width: 768px) {
  .sp-none {
    display: block;
  }
}

/* SPのとき非表示（インライン要素ver） */
.sp-none-inline-block {
  display: none;
}
@media screen and (min-width: 768px) {
  .sp-none-inline-block {
    display: inline-block;
  }
}

/* ---------- 表示・非表示 〜 more：以上、less：以下 | ここまで ---------- *//*# sourceMappingURL=style.css.map */