:root {
  --root-font-size: 16;
  --font-ratio: 1;
  --height: 0px;
  --bg-filter: brightness(1);
}

html,
body {
  font-size: 16px;
}

@media screen and (max-width: 1424px) {
  :root {
    --font-ratio: 1;
  }
}
@media screen and (max-width: 1399px) {
  :root {
    --font-ratio: 0.9824438202;
  }
}
@media screen and (max-width: 1374px) {
  :root {
    --font-ratio: 0.9648876404;
  }
}
@media screen and (max-width: 1349px) {
  :root {
    --font-ratio: 0.9473314607;
  }
}
@media screen and (max-width: 1324px) {
  :root {
    --font-ratio: 0.9297752809;
  }
}
@media screen and (max-width: 1299px) {
  :root {
    --font-ratio: 0.9122191011;
  }
}
@media screen and (max-width: 1274px) {
  :root {
    --font-ratio: 0.8946629213;
  }
}
@media screen and (max-width: 1249px) {
  :root {
    --font-ratio: 0.8771067416;
  }
}
@media screen and (max-width: 1224px) {
  :root {
    --font-ratio: 0.8595505618;
  }
}
@media screen and (max-width: 1199px) {
  :root {
    --font-ratio: 0.841994382;
  }
}
@media screen and (max-width: 1174px) {
  :root {
    --font-ratio: 0.8244382022;
  }
}
@media screen and (max-width: 1149px) {
  :root {
    --font-ratio: 0.8068820225;
  }
}
@media screen and (max-width: 1124px) {
  :root {
    --font-ratio: 0.7893258427;
  }
}
@media screen and (max-width: 1099px) {
  :root {
    --font-ratio: 0.7717696629;
  }
}
@media screen and (max-width: 1074px) {
  :root {
    --font-ratio: 0.7542134831;
  }
}
@media screen and (max-width: 1049px) {
  :root {
    --font-ratio: 0.7366573034;
  }
}
@media screen and (max-width: 1024px) {
  :root {
    --font-ratio: 0.7191011236;
  }
}
@media screen and (max-width: 999px) {
  :root {
    --font-ratio: 0.7015449438;
  }
}
@media screen and (max-width: 974px) {
  :root {
    --font-ratio: 0.683988764;
  }
}
@media screen and (max-width: 949px) {
  :root {
    --font-ratio: 0.6664325843;
  }
}
@media screen and (max-width: 924px) {
  :root {
    --font-ratio: 0.6488764045;
  }
}
@media screen and (max-width: 899px) {
  :root {
    --font-ratio: 0.6313202247;
  }
}
@media screen and (max-width: 874px) {
  :root {
    --font-ratio: 0.6137640449;
  }
}
@media screen and (max-width: 849px) {
  :root {
    --font-ratio: 0.5962078652;
  }
}
@media screen and (max-width: 824px) {
  :root {
    --font-ratio: 0.5786516854;
  }
}
@media screen and (max-width: 799px) {
  :root {
    --font-ratio: 0.5610955056;
  }
}
@media screen and (max-width: 774px) {
  :root {
    --font-ratio: 0.5435393258;
  }
}
@media screen and (max-width: 749px) {
  :root {
    --font-ratio: 0.5259831461;
  }
}
@media screen and (max-width: 724px) {
  :root {
    --font-ratio: 0.5084269663;
  }
}
@media screen and (max-width: 699px) {
  :root {
    --font-ratio: 0.4908707865;
  }
}
@media screen and (max-width: 674px) {
  :root {
    --font-ratio: 0.4733146067;
  }
}
@media screen and (max-width: 649px) {
  :root {
    --font-ratio: 0.455758427;
  }
}
@media screen and (max-width: 624px) {
  :root {
    --font-ratio: 0.4382022472;
  }
}
@media screen and (max-width: 599px) {
  :root {
    --font-ratio: 0.4206460674;
  }
}
@media screen and (max-width: 574px) {
  :root {
    --font-ratio: 0.4030898876;
  }
}
@media screen and (max-width: 549px) {
  :root {
    --font-ratio: 0.3855337079;
  }
}
@media screen and (max-width: 524px) {
  :root {
    --font-ratio: 0.3679775281;
  }
}
@media screen and (max-width: 499px) {
  :root {
    --font-ratio: 0.3504213483;
  }
}
@media screen and (max-width: 474px) {
  :root {
    --font-ratio: 0.3328651685;
  }
}
@media screen and (width <= 769px) {
  :root {
    --font-ratio: 0.4357638889;
  }
}
@media screen and (width <= 768px) {
  :root {
    --font-ratio: 2.095890411;
  }
}
@media screen and (max-width: 765px) {
  :root {
    --font-ratio: 1.9615384615;
  }
}
@media screen and (max-width: 740px) {
  :root {
    --font-ratio: 1.8974358974;
  }
}
@media screen and (max-width: 715px) {
  :root {
    --font-ratio: 1.8333333333;
  }
}
@media screen and (max-width: 690px) {
  :root {
    --font-ratio: 1.7692307692;
  }
}
@media screen and (max-width: 665px) {
  :root {
    --font-ratio: 1.7051282051;
  }
}
@media screen and (max-width: 640px) {
  :root {
    --font-ratio: 1.641025641;
  }
}
@media screen and (max-width: 615px) {
  :root {
    --font-ratio: 1.5769230769;
  }
}
@media screen and (max-width: 590px) {
  :root {
    --font-ratio: 1.5128205128;
  }
}
@media screen and (max-width: 565px) {
  :root {
    --font-ratio: 1.4487179487;
  }
}
@media screen and (max-width: 540px) {
  :root {
    --font-ratio: 1.3846153846;
  }
}
@media screen and (max-width: 515px) {
  :root {
    --font-ratio: 1.3205128205;
  }
}
@media screen and (max-width: 490px) {
  :root {
    --font-ratio: 1.2564102564;
  }
}
@media screen and (max-width: 465px) {
  :root {
    --font-ratio: 1.1923076923;
  }
}
@media screen and (max-width: 440px) {
  :root {
    --font-ratio: 1.1282051282;
  }
}
@media screen and (max-width: 415px) {
  :root {
    --font-ratio: 1.0641025641;
  }
}
@media screen and (max-width: 390px) {
  :root {
    --font-ratio: 1;
  }
}
@media screen and (width <= 375px) {
  :root {
    --font-ratio: 0.9359;
  }
}
.u-pc-only {
  display: block !important;
}

.u-sp-only {
  display: none !important;
}

.u-tar {
  text-align: right;
}

@media screen and (width <= 768px) {
  .u-pc-only {
    display: none !important;
  }
  .u-sp-only {
    display: block !important;
  }
  .u-pc-inlineBlock {
    display: none !important;
  }
}
.u-ff-sst {
  font-family: "SST W20 Roman", sans-serif;
}

.u-ws-nowrap {
  white-space: nowrap;
}

.u-bg-gradient {
  background: linear-gradient(180deg, black 0%, rgb(26, 26, 26) 100%);
}

.u-pb0 {
  padding-bottom: 0;
}

.u-pt0 {
  padding-top: 0;
}

.u-ffs-palt {
  font-feature-settings: "palt";
}

*,
.c5-main {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  line-height: 1;
}

a {
  text-decoration: none;
  cursor: pointer;
}

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

ul,
ol {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

.c5-main,
.footer-sns {
  overflow-x: clip;
  font-family: "Noto Sans JP", sans-serif;
  color: #fff;
}

.s5-breadcrumbs {
  display: none;
}

.s5-returnToTop {
  margin: 0 !important;
}

.s5-returnToTop__inner2 {
  max-width: none;
}

.s5-returnToTop__button {
  top: auto;
  right: 45px;
  bottom: 20px;
  width: calc(75 / var(--root-font-size) * var(--font-ratio) * 1rem);
  height: calc(75 / var(--root-font-size) * var(--font-ratio) * 1rem);
  background: url("../img/button_page-top.svg") no-repeat center center/contain !important;
  opacity: 1;
}
.s5-returnToTop__button img {
  opacity: 0 !important;
}

@media screen and (width <= 768px) {
  .s5-returnToTop__button {
    top: auto;
    right: calc(12 / var(--root-font-size) * var(--font-ratio) * 1rem);
    bottom: calc(20 / var(--root-font-size) * var(--font-ratio) * 1rem);
    width: calc(30 / var(--root-font-size) * var(--font-ratio) * 1rem);
    height: calc(30 / var(--root-font-size) * var(--font-ratio) * 1rem);
    background: url("../img/button_page-top.svg") no-repeat center center/contain;
    opacity: 1;
  }
}
.pin-sec {
  height: 100vh;
}

.c5-sec-header {
  text-align: center;
}
.c5-sec-header__heading {
  font-size: calc(86 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-weight: 900;
  line-height: 1.2325581395;
}
.c5-sec-header__heading img {
  display: block;
  margin-bottom: calc(18 / 1400 * 100vw);
  margin-inline: auto;
}

@media screen and (width <= 768px) {
  .c5-sec-header__heading {
    font-size: calc(36 / var(--root-font-size) * var(--font-ratio) * 1rem);
    letter-spacing: -0.05em;
  }
  .c5-sec-header__heading img {
    margin-bottom: calc(8 / 390 * 100vw);
    margin-inline: auto;
  }
}
.c5-sec01 {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  min-height: calc(100vh - 70 / var(--root-font-size) * var(--font-ratio) * 1rem);
  padding-block: calc(210 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-sec01-inner,
.c5-sec01 .c5-sec01__aside-inner {
  max-width: 1440px;
  padding: 0 calc(20 / var(--root-font-size) * var(--font-ratio) * 1rem);
  margin-inline: auto;
  text-align: center;
}
.c5-sec01__heading {
  font-size: calc(86 / var(--root-font-size) * var(--font-ratio) * 1rem);
  line-height: 1.2;
  letter-spacing: -0.04em;
}
.c5-sec01__heading + .c5-sec01__image {
  margin-top: calc(60 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-sec01__heading-subtext {
  margin-top: calc(10 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-size: calc(48 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-weight: 900;
}
.c5-sec01__subheading {
  height: calc(70 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-sec01__subheading > img {
  height: 100%;
}
.c5-sec01__subheading + .c5-sec01__heading {
  margin-top: calc(40 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-sec01__text {
  margin-top: calc(48 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-size: calc(24 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-weight: 800;
  line-height: 1.8333333333;
}
.c5-sec01__text.--medium {
  font-size: calc(36 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-sec01__text.--p-narrow {
  margin-top: calc(20 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-sec01__image {
  margin-top: calc(40 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-sec01__image img {
  height: auto;
}
.c5-sec01__button {
  margin-top: calc(70 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-sec01__button .c5-sec06-button {
  display: inline-block;
  min-width: calc(398 / var(--root-font-size) * var(--font-ratio) * 1rem);
  min-height: calc(78 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-sec01__aside {
  padding-block: calc(50 / var(--root-font-size) * var(--font-ratio) * 1rem) calc(70 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-sec01__scroll-down {
  position: absolute;
  right: calc(70 / var(--root-font-size) * var(--font-ratio) * 1rem);
  bottom: calc(60 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-sec01.--hero .c5-sec01__heading {
  padding-inline: calc(10 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-sec01.--hero .c5-sec01__heading img {
  height: auto;
}
.c5-sec01.--hero .c5-sec01__text {
  margin-top: calc(20 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-size: calc(24 / var(--root-font-size) * var(--font-ratio) * 1rem);
  line-height: 1.83;
}
.c5-sec01.--hero .c5-sec01__logo {
  margin-top: calc(50 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-sec01__info {
  max-width: 1400px;
  padding: calc(20 / var(--root-font-size) * var(--font-ratio) * 1rem) calc(20 / var(--root-font-size) * var(--font-ratio) * 1rem) 0;
  margin-top: calc(40 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-sec01__info-inner {
  position: relative;
  padding-block: calc(70 / var(--root-font-size) * var(--font-ratio) * 1rem);
  border: 3px solid #fff;
  border-radius: 10px;
}
.c5-sec01__info-subheading {
  position: absolute;
  top: calc(-30 / var(--root-font-size) * var(--font-ratio) * 1rem);
  left: 50%;
  display: inline-block;
  padding: calc(10 / var(--root-font-size) * var(--font-ratio) * 1rem) calc(15 / var(--root-font-size) * var(--font-ratio) * 1rem);
  background-color: #121212;
  transform: translateX(-50%);
}
.c5-sec01__info-list {
  display: flex;
  gap: calc(160 / var(--root-font-size) * var(--font-ratio) * 1rem);
  justify-content: center;
}
.c5-sec01__info p {
  line-height: 1.5;
  text-align: left;
}
.c5-sec01__info-large {
  font-size: calc(48 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-weight: 900;
}
.c5-sec01__info-small {
  font-size: calc(24 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-weight: 400;
}
.c5-sec01__info-date {
  font-size: calc(24 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-weight: 900;
}
.c5-sec01__card-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(50 / var(--root-font-size) * var(--font-ratio) * 1rem);
  margin-top: calc(70 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-sec01__card:hover {
  opacity: 0.8;
  transition: 0.3s;
}
.c5-sec01__card-label {
  width: calc(164 / var(--root-font-size) * var(--font-ratio) * 1rem);
  padding: calc(10 / var(--root-font-size) * var(--font-ratio) * 1rem);
  margin-top: calc(18 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-size: calc(16 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-weight: 500;
  color: #fff;
  text-align: left;
  background: linear-gradient(to right, #000080 0%, #500080 49.75%, #800080 100%) no-repeat left top;
}
.c5-sec01__card-text {
  margin-top: calc(18 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-size: calc(24 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-weight: 900;
  color: #fff;
  text-align: left;
}
.c5-sec01__product-flex {
  display: flex;
  gap: calc(20 / var(--root-font-size) * var(--font-ratio) * 1rem);
  justify-content: center;
  margin-top: calc(50 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-sec01__product-flex .c5-sec01__button {
  margin-top: 0;
}

@media screen and (width <= 768px) {
  .c5-sec01 {
    align-items: start;
    min-height: auto;
    padding-block: calc(60 / var(--root-font-size) * var(--font-ratio) * 1rem);
    padding-inline: calc(30 / var(--root-font-size) * var(--font-ratio) * 1rem);
    white-space: normal !important;
  }
  .c5-sec01-inner {
    width: 100%;
    padding: 0;
    text-align: left;
  }
  .c5-sec01__heading {
    font-size: calc(36 / var(--root-font-size) * var(--font-ratio) * 1rem);
    line-height: 1.278;
  }
  .c5-sec01__heading + .c5-sec01__image {
    margin-top: calc(32 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-sec01__heading-small {
    font-size: calc(26 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-sec01__heading-subtext {
    font-size: calc(20 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-sec01__subheading {
    height: calc(28 / var(--root-font-size) * var(--font-ratio) * 1rem);
    text-align: left;
  }
  .c5-sec01__subheading > img {
    width: auto;
  }
  .c5-sec01__subheading + .c5-sec01__heading {
    margin-top: calc(16 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-sec01__text {
    margin-top: calc(35 / var(--root-font-size) * var(--font-ratio) * 1rem);
    font-size: calc(16 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-sec01__text.--medium {
    font-size: calc(20 / var(--root-font-size) * var(--font-ratio) * 1rem);
    line-height: 1.3;
  }
  .c5-sec01__text.--p-narrow {
    margin-top: calc(20 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-sec01__text.--notes {
    font-size: calc(14 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-sec01__button {
    margin-top: calc(30 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-sec01__button .c5-sec06-button {
    min-width: 100%;
    min-height: calc(65 / var(--root-font-size) * var(--font-ratio) * 1rem);
    text-align: center;
  }
  .c5-sec01__aside {
    width: 100vw;
    padding-block: 0 calc(30 / var(--root-font-size) * var(--font-ratio) * 1rem);
    padding-inline: calc(30 / var(--root-font-size) * var(--font-ratio) * 1rem);
    margin-left: calc(-30 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-sec01__aside-inner {
    text-align: left !important;
  }
  .c5-sec01__scroll-down {
    right: calc(15 / var(--root-font-size) * var(--font-ratio) * 1rem);
    bottom: calc(30 / var(--root-font-size) * var(--font-ratio) * 1rem);
    width: calc(15 / var(--root-font-size) * var(--font-ratio) * 1rem);
    height: calc(50 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-sec01.--hero {
    padding-bottom: calc(124 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-sec01.--hero .c5-sec01__heading {
    padding-inline: 0;
    font-size: calc(38 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-sec01.--hero .c5-sec01__heading-sub {
    width: calc(300 / var(--root-font-size) * var(--font-ratio) * 1rem);
    margin: calc(-10 / var(--root-font-size) * var(--font-ratio) * 1rem) 0 calc(-10 / var(--root-font-size) * var(--font-ratio) * 1rem) calc(-20 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-sec01.--hero .c5-sec01__text {
    margin-top: calc(14 / var(--root-font-size) * var(--font-ratio) * 1rem);
    font-size: calc(16 / var(--root-font-size) * var(--font-ratio) * 1rem);
    line-height: 1.625;
    text-align: left;
  }
  .c5-sec01.--hero .c5-sec01__logo {
    width: calc(116 / var(--root-font-size) * var(--font-ratio) * 1rem);
    height: calc(28 / var(--root-font-size) * var(--font-ratio) * 1rem);
    margin-top: calc(25 / var(--root-font-size) * var(--font-ratio) * 1rem);
    text-align: left;
  }
  .c5-sec01.--hero .c5-sec01__logo img {
    height: 100%;
  }
  .c5-sec01__info {
    padding: calc(50 / var(--root-font-size) * var(--font-ratio) * 1rem) 0 0;
    margin-top: 0;
  }
  .c5-sec01__info-inner {
    padding: calc(40 / var(--root-font-size) * var(--font-ratio) * 1rem) calc(20 / var(--root-font-size) * var(--font-ratio) * 1rem) calc(20 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-sec01__info-subheading {
    top: calc(-20 / var(--root-font-size) * var(--font-ratio) * 1rem);
    padding: 0 calc(10 / var(--root-font-size) * var(--font-ratio) * 1rem);
    margin-bottom: calc(30 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-sec01__info-list {
    flex-direction: column;
    gap: calc(30 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-sec01__info p {
    line-height: 1.7;
  }
  .c5-sec01__info-large {
    font-size: calc(36 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-sec01__info-small {
    font-size: calc(16 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-sec01__info-date {
    font-size: calc(24 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-sec01__card-list {
    grid-template-columns: 1fr;
    gap: calc(30 / var(--root-font-size) * var(--font-ratio) * 1rem);
    margin-top: calc(20 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-sec01__card-label {
    width: calc(146 / var(--root-font-size) * var(--font-ratio) * 1rem);
    padding: calc(4 / var(--root-font-size) * var(--font-ratio) * 1rem) calc(10 / var(--root-font-size) * var(--font-ratio) * 1rem);
    margin-top: calc(10 / var(--root-font-size) * var(--font-ratio) * 1rem);
    font-size: calc(14 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-sec01__card-text {
    margin-top: calc(6 / var(--root-font-size) * var(--font-ratio) * 1rem);
    font-size: calc(16 / var(--root-font-size) * var(--font-ratio) * 1rem);
    line-height: 1.75;
  }
  .c5-sec01__product-flex {
    flex-direction: column;
    gap: calc(16 / var(--root-font-size) * var(--font-ratio) * 1rem);
    margin-top: calc(30 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
}
.c5-sec__voice {
  background: url("../img/bg_voice.webp") no-repeat center center/cover;
}

.footer-sns {
  padding-block: calc(63 / var(--root-font-size) * var(--font-ratio) * 1rem);
  background: #1a1a1a;
}
.footer-sns__list {
  display: flex;
  gap: calc(26 / var(--root-font-size) * var(--font-ratio) * 1rem);
  justify-content: center;
}
.footer-sns__anchor img {
  transition: opacity 0.2s ease-out;
}
@media (any-hover: hover) and (any-pointer: fine) {
  .footer-sns__anchor:hover img {
    opacity: 0.7;
  }
}
.footer-sns__copyright {
  margin-top: calc(40 / var(--root-font-size) * var(--font-ratio) * 1rem);
  color: white;
  text-align: center;
}
.footer-sns__copyright small {
  font-size: calc(16 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-weight: 400;
}
@media screen and (width <= 768px) {
  .footer-sns {
    padding-block: calc(35 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .footer-sns__list {
    gap: calc(20 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .footer-sns__item {
    width: calc(40 / var(--root-font-size) * var(--font-ratio) * 1rem);
    height: calc(40 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .footer-sns__copyright {
    margin-top: calc(30 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .footer-sns__copyright small {
    font-size: calc(12 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
}

.c5-sec04 {
  position: relative;
  min-height: calc(1080 / var(--root-font-size) * var(--font-ratio) * 1rem);
  padding-block: calc(210 / var(--root-font-size) * var(--font-ratio) * 1rem);
  background-color: #000;
}
.c5-sec04-wrapper {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
}
.c5-sec04-header__heading {
  margin: calc(18 / var(--root-font-size) * var(--font-ratio) * 1rem) 0 calc(50 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-size: calc(86 / var(--root-font-size) * var(--font-ratio) * 1rem);
  line-height: 1.2325581395;
}

@media screen and (width <= 768px) {
  .c5-sec04 {
    min-height: auto;
    padding-block: calc(60 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-sec04-wrapper {
    position: static;
    width: 100%;
    min-height: auto;
  }
  .c5-sec04-header {
    padding-inline: calc(30 / var(--root-font-size) * var(--font-ratio) * 1rem);
    text-align: left;
  }
  .c5-sec04-header__subheading {
    width: calc(180 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-sec04-header__heading {
    margin: calc(18 / var(--root-font-size) * var(--font-ratio) * 1rem) 0 calc(20 / var(--root-font-size) * var(--font-ratio) * 1rem);
    font-size: calc(36 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
}
.fnatic-slider {
  width: 95vw;
  max-width: 1400px;
  margin-inline: auto;
}
.fnatic-slider-item {
  position: relative;
  transition: 0.3s;
}
.fnatic-slider-item img {
  border-radius: 20px;
}
.fnatic-slider-item .item {
  color: #fff;
}
.fnatic-slider-item .item .text {
  width: 100%;
  padding: calc(10 / var(--root-font-size) * var(--font-ratio) * 1rem) calc(24 / var(--root-font-size) * var(--font-ratio) * 1rem) calc(0 / var(--root-font-size) * var(--font-ratio) * 1rem);
  text-align: left;
}
.fnatic-slider-item .item .text .catch {
  font-size: 21px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: -0.05em;
}
.fnatic-slider-item .item .text .type {
  margin-top: calc(10 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: -0.05em;
}
.fnatic-slider-item .item .text .name {
  display: inline;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}
.fnatic-slider-item[data-slide-number="1"] .item {
  transition-delay: 0.1s;
}
.fnatic-slider-item[data-slide-number="2"] .item {
  transition-delay: 0.3s;
}
.fnatic-slider-item[data-slide-number="3"] .item {
  transition-delay: 0.5s;
}
.fnatic-slider-item[data-slide-number="4"] .item {
  transition-delay: 0.7s;
}
.fnatic-slider .swiper-controls {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
  margin: calc(24 / var(--root-font-size) * var(--font-ratio) * 1rem) auto 0;
}
.fnatic-slider .swiper-pagination.fnatic-slider-pagination {
  position: static;
  width: 880px;
  height: 5px;
  margin: 0;
  background-color: #707070;
  box-shadow: inset 0 2px 0 0 #000, inset 0 -2px 0 0 #000;
}
.fnatic-slider .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: linear-gradient(to right, #000080 0%, #500080 49.75%, #800080 100%) no-repeat left top;
}
.fnatic-slider .swiper-wrapper {
  align-items: stretch !important;
  height: auto;
}
.fnatic-slider .swiper-button {
  top: auto;
  bottom: 0;
}
.fnatic-slider .swiper-button-prev, .fnatic-slider .swiper-button-next {
  position: static;
  width: 60px;
  height: 60px;
  margin-top: 0;
}
.fnatic-slider .swiper-button-prev::after, .fnatic-slider .swiper-button-next::after {
  content: none;
}
.fnatic-slider .swiper-slide {
  height: auto;
}

.fnatic-slider-pagination {
  top: auto;
  bottom: 40px;
  width: 80%;
  margin-inline: auto;
}

@media screen and (width <= 768px) {
  .fnatic-slider-item .item .text {
    padding: calc(12 / var(--root-font-size) * var(--font-ratio) * 1rem) calc(12 / var(--root-font-size) * var(--font-ratio) * 1rem) calc(0 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .fnatic-slider-item .item .text .catch {
    font-size: calc(14 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .fnatic-slider-item .item .text .type {
    margin-top: calc(12 / var(--root-font-size) * var(--font-ratio) * 1rem);
    font-size: calc(14 / var(--root-font-size) * var(--font-ratio) * 1rem);
    font-weight: 400;
    line-height: 1.35;
  }
  .fnatic-slider-item .item .text .name {
    font-size: calc(14 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .fnatic-slider .swiper-controls {
    gap: 4px;
    margin: calc(28 / var(--root-font-size) * var(--font-ratio) * 1rem) auto 0;
  }
  .fnatic-slider .swiper-pagination.fnatic-slider-pagination {
    width: calc(100% - 120px);
    height: 1px;
    box-shadow: inset 0 0 0 0 #000, inset 0 0 0 0 #000;
  }
  .fnatic-slider .swiper-button-prev, .fnatic-slider .swiper-button-next {
    width: 40px;
    height: 40px;
  }
  .fnatic-slider .swiper-button-prev svg, .fnatic-slider .swiper-button-next svg {
    width: 40px;
    height: 40px;
  }
}
.c5-sec-pin.c5-sec-sticky {
  position: relative;
}
.c5-sec-pin.c5-sec-sticky .c5-sec-pin__target {
  display: grid;
  align-content: start;
  min-height: 200vh;
}

.c5-sec05 {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  padding-top: calc(100 / var(--root-font-size) * var(--font-ratio) * 1rem);
  padding-bottom: calc(130 / var(--root-font-size) * var(--font-ratio) * 1rem);
  background: url("../img/bg_sec01.webp") no-repeat center center/100% auto;
}
.c5-sec05-inner {
  width: 90%;
  max-width: 1400px;
  margin-inline: auto;
  text-align: center;
}
.c5-sec05__heading {
  font-size: calc(86 / var(--root-font-size) * var(--font-ratio) * 1rem);
  line-height: 1.1;
  letter-spacing: -0.04em;
}
.c5-sec05__subheading {
  font-size: calc(42 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-weight: 900;
  line-height: 1.5555555556;
}
.c5-sec05__text {
  margin-top: calc(48 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-size: calc(36 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-weight: 900;
  line-height: 1.7083333333;
}
.c5-sec05.--voice {
  position: sticky;
  top: 0;
  align-items: center;
  justify-content: center;
  height: 100vh;
  padding: 0;
  font-weight: 900;
  background: url("../img/bg_voice.webp") no-repeat center bottom/cover;
}
.c5-sec05.--voice .c5-sec05-inner {
  width: 97%;
  max-width: none;
}
.c5-sec05.--voice .c5-sec05__heading {
  font-size: calc(86 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-sec05.--voice .c5-sec05__subheading {
  margin-top: calc(48 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-size: calc(42 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-sec05.--voice .c5-sec05__voice {
  position: relative;
  height: calc(450 / var(--root-font-size) * var(--font-ratio) * 1rem);
  padding-block: calc(40 / var(--root-font-size) * var(--font-ratio) * 1rem);
  margin-top: calc(24 / var(--root-font-size) * var(--font-ratio) * 1rem);
  overflow: hidden scroll;
  scrollbar-width: none;
  -webkit-mask: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent) center/cover no-repeat;
          mask: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent) center/cover no-repeat;
}
.c5-sec05.--voice .c5-sec05__voice .voice-list {
  width: calc(1200 / var(--root-font-size) * var(--font-ratio) * 1rem);
  margin-inline: auto;
}
.c5-sec05.--voice .c5-sec05__voice .voice-item {
  display: grid;
  grid-template-columns: calc(60 / var(--root-font-size) * var(--font-ratio) * 1rem) 1fr;
  gap: calc(24 / var(--root-font-size) * var(--font-ratio) * 1rem);
  align-items: center;
}
.c5-sec05.--voice .c5-sec05__voice .voice-item:not(:last-child) {
  margin-bottom: calc(20 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-sec05.--voice .c5-sec05__voice .voice-text {
  font-size: calc(21 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
}
.c5-sec05.--voice .c5-sec05__notes {
  margin-top: calc(56 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-size: calc(16 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-weight: 700;
}

@media screen and (width <= 768px) {
  .c5-sec-pin.c5-sec-sticky .c5-sec-pin__target {
    min-height: 200vh;
  }
  .c5-sec05 {
    padding-top: calc(60 / var(--root-font-size) * var(--font-ratio) * 1rem);
    padding-bottom: calc(20 / var(--root-font-size) * var(--font-ratio) * 1rem);
    background-size: contain;
  }
  .c5-sec05__heading {
    font-size: calc(36 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-sec05__subheading {
    margin-top: calc(40 / var(--root-font-size) * var(--font-ratio) * 1rem);
    font-size: calc(20 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-sec05__text {
    margin-top: calc(32 / var(--root-font-size) * var(--font-ratio) * 1rem);
    font-size: calc(16 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-sec05.--voice .c5-sec05__heading {
    font-size: calc(42 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-sec05.--voice .c5-sec05__subheading {
    padding-inline: calc(20 / var(--root-font-size) * var(--font-ratio) * 1rem);
    margin-top: calc(24 / var(--root-font-size) * var(--font-ratio) * 1rem);
    font-size: calc(16 / var(--root-font-size) * var(--font-ratio) * 1rem);
    text-align: left;
  }
  .c5-sec05.--voice .c5-sec05__voice {
    height: calc(350 / var(--root-font-size) * var(--font-ratio) * 1rem);
    padding-top: calc(36 / var(--root-font-size) * var(--font-ratio) * 1rem);
    padding-bottom: calc(40 / var(--root-font-size) * var(--font-ratio) * 1rem);
    margin-top: 0;
  }
  .c5-sec05.--voice .c5-sec05__voice .voice-list {
    width: 100%;
    padding-inline: calc(24 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-sec05.--voice .c5-sec05__voice .voice-item {
    grid-template-columns: calc(40 / var(--root-font-size) * var(--font-ratio) * 1rem) 1fr;
    gap: calc(16 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-sec05.--voice .c5-sec05__voice .voice-item:not(:last-child) {
    margin-bottom: calc(14 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-sec05.--voice .c5-sec05__voice .voice-icon {
    width: calc(40 / var(--root-font-size) * var(--font-ratio) * 1rem);
    height: calc(40 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-sec05.--voice .c5-sec05__voice .voice-text {
    font-size: calc(14 / var(--root-font-size) * var(--font-ratio) * 1rem);
    font-weight: 500;
  }
  .c5-sec05.--voice .c5-sec05__notes {
    padding-inline: calc(24 / var(--root-font-size) * var(--font-ratio) * 1rem);
    margin-top: calc(32 / var(--root-font-size) * var(--font-ratio) * 1rem);
    font-size: calc(12 / var(--root-font-size) * var(--font-ratio) * 1rem);
    font-weight: 500;
    line-height: 1.5;
    text-align: left;
  }
}
.c5-sec06 {
  position: relative;
  padding-top: calc(168 / 1400 * 100vw);
  padding-bottom: calc(120 / 1400 * 100vw);
  background-color: #000;
}
.c5-sec06-inner {
  width: 90%;
  max-width: 1400px;
  margin-inline: auto;
  text-align: center;
}
.c5-sec06-header {
  padding-top: calc(60 / 1400 * 100vw);
  padding-bottom: calc(87 / 1400 * 100vw);
}
.c5-sec06-header__heading img {
  width: calc(693 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-sec06-catch {
  margin-top: calc(80 / 1400 * 100vw);
  font-size: calc(42 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-weight: 900;
  line-height: 1.5;
}
.c5-sec06-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(40 / 1400 * 100vw);
  margin-top: calc(70 / 1400 * 100vw);
}
.c5-sec06-button {
  min-width: calc(398 / 1400 * 100vw);
  display: grid;
  place-content: center;
  min-height: 78px;
  font-size: calc(32 / var(--root-font-size) * var(--font-ratio) * 1rem);
  color: #fff;
  background: linear-gradient(to right, #000080 0%, #500080 49.75%, #800080 100%) no-repeat left top;
}
.c5-sec06-button[target=_blank]::after {
  display: inline-block;
  width: calc(15 / var(--root-font-size) * var(--font-ratio) * 1rem);
  height: calc(15 / var(--root-font-size) * var(--font-ratio) * 1rem);
  margin-left: calc(8 / var(--root-font-size) * var(--font-ratio) * 1rem);
  vertical-align: super;
  content: "";
  background: url("../img/ico_blank_01.svg") no-repeat 0 0;
  background-size: contain;
}

@media screen and (width >= 769px) {
  .c5-sec06-button {
    position: relative;
    z-index: 1;
  }
  .c5-sec06-button::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: "";
    background: #881fc3 url("../img/bg_button.webp") no-repeat left center/cover;
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    transition: 0.3s;
  }
  .c5-sec06-button:hover::before {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}
@media screen and (width <= 768px) {
  .c5-sec06 {
    padding-top: calc(20 / 390 * 100vw);
    padding-bottom: calc(80 / 390 * 100vw);
  }
  .c5-sec06-inner {
    width: 100%;
    padding-left: calc(16 / 390 * 100vw);
    padding-right: calc(16 / 390 * 100vw);
  }
  .c5-sec06-header__heading {
    padding-top: calc(0 / 390 * 100vw);
    padding-bottom: calc(40 / 390 * 100vw);
  }
  .c5-sec06-header__heading img {
    width: calc(222 / 390 * 100vw);
  }
  .c5-sec06-catch {
    margin-top: calc(24 / 390 * 100vw);
    font-size: calc(20 / var(--root-font-size) * var(--font-ratio) * 1rem);
    letter-spacing: -0.05em;
  }
  .c5-sec06-buttons {
    gap: calc(28 / 390 * 100vw);
    margin-top: calc(32 / 390 * 100vw);
  }
  .c5-sec06-button {
    min-width: calc(280 / 390 * 100vw);
    min-height: 58px;
    font-size: calc(18 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-sec06-button[target=_blank]::after {
    width: calc(10 / var(--root-font-size) * var(--font-ratio) * 1rem);
    height: calc(10 / var(--root-font-size) * var(--font-ratio) * 1rem);
    margin-left: calc(4 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
}
.simplebar-track::before {
  position: absolute;
  left: 50%;
  display: block;
  width: 1px;
  height: 100%;
  content: "";
  background: #707070;
  translate: -50% 0;
}

.simplebar-scrollbar::before {
  width: 5px;
  background: linear-gradient(to bottom, #000080 0%, #500080 49.75%, #800080 100%) no-repeat left top;
  opacity: 1 !important;
}

.c5-sec07 .c5-sec01__heading-subtext {
  margin-top: calc(70 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-size: calc(62 / var(--root-font-size) * var(--font-ratio) * 1rem);
  line-height: 1.2;
}

@media screen and (width <= 768px) {
  .c5-sec07 .c5-sec01__heading-subtext {
    margin-top: calc(30 / var(--root-font-size) * var(--font-ratio) * 1rem);
    font-size: calc(36 / var(--root-font-size) * var(--font-ratio) * 1rem);
    line-height: 1.278;
  }
}
.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: url("../img/bg_top-kv.webp") no-repeat top center/cover;
}
.modal-wrapper {
  width: 530px;
  max-height: 90vh;
  overflow-y: auto;
  background-color: #000;
  border: 1px solid #f00;
}
.modal-wrapper:has(.modal-player-block) {
  display: grid;
  align-items: center;
  width: 90%;
  max-width: 1258px;
  margin: auto;
  overflow-y: auto;
  background-color: transparent;
  border: 0;
}
.modal-content {
  padding: 20px 16px 13px 20px;
}
.modal-content .flex {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.modal-content .text .name {
  font-size: 36px;
  line-height: 1.5;
  color: #fff;
}
.modal-content .text .type {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
}
.modal-content .text .type small {
  display: block;
  font-size: 16px;
}
.modal-content .close-button {
  position: absolute;
  top: 50px;
  right: 50px;
  width: 75px;
  height: 75px;
}
.modal-content .close-button svg .circle {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  transition: 0.3s;
}
.modal-content .close-button svg .line {
  fill: #fff;
}
.modal-player-block {
  position: relative;
  padding: calc(26 / var(--root-font-size) * var(--font-ratio) * 1rem) calc(50 / var(--root-font-size) * var(--font-ratio) * 1rem);
  text-align: center;
}
.modal-player-block::before, .modal-player-block::after {
  position: absolute;
  display: block;
  width: calc(46 / var(--root-font-size) * var(--font-ratio) * 1rem);
  height: calc(75 / var(--root-font-size) * var(--font-ratio) * 1rem);
  content: "";
}
.modal-player-block::before {
  top: 0;
  left: 0;
  border-top: 6px solid #f00;
  border-left: 6px solid #f00;
}
.modal-player-block::after {
  right: 0;
  bottom: 0;
  border-right: 6px solid #f00;
  border-bottom: 6px solid #f00;
}
.modal-player-image img {
  width: calc(360 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.modal-player-name {
  margin-top: calc(30 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-size: calc(48 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-weight: 600;
  line-height: 1.5;
}
.modal-player-pos {
  margin-top: calc(15 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-size: calc(24 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-weight: 600;
  line-height: 1.5;
}
.modal-player-text {
  margin-top: calc(18 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-size: calc(24 / var(--root-font-size) * var(--font-ratio) * 1rem);
  line-height: 1.5;
}
.modal-player-sns {
  display: flex;
  gap: calc(22 / var(--root-font-size) * var(--font-ratio) * 1rem);
  justify-content: center;
  margin-top: calc(36 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.modal-player-sns img {
  width: calc(73 / var(--root-font-size) * var(--font-ratio) * 1rem);
}

@media screen and (width >= 769px) {
  .modal-content .close-button:hover {
    width: 75px;
    height: 75px;
  }
  .modal-content .close-button:hover svg .circle {
    fill: #f00;
    stroke: #f00;
  }
}
.modal.active {
  display: flex;
  animation: fadeIn 0.4s ease 0s forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.modal.inactive.active {
  transition: 0.4s;
  animation: fadeOut 0.4s ease 0s forwards;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@media screen and (width <= 768px) {
  .modal {
    width: 100%;
    height: 100%;
  }
  .modal-overlay {
    background: url("../img/bg_top-kv_sp.webp") no-repeat top center/cover;
  }
  .modal-wrapper {
    width: 92%;
    height: auto;
    max-height: calc(100vh - 108 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .modal-wrapper:has(.modal-player-block) {
    width: 92%;
    max-height: 100svh;
  }
  .modal-content {
    padding: calc(20 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .modal-content .text .name {
    font-size: calc(28 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .modal-content .text .type {
    font-size: calc(18 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .modal-content .text .type small {
    font-size: calc(14 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .modal-content .close-button {
    top: 20px;
    right: 4%;
    width: calc(40 / var(--root-font-size) * var(--font-ratio) * 1rem);
    height: calc(40 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .modal-content .close-button svg {
    width: 100%;
    height: auto;
  }
  .modal-player-block {
    padding: calc(32 / var(--root-font-size) * var(--font-ratio) * 1rem) calc(40 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .modal-player-block::before, .modal-player-block::after {
    width: calc(38 / var(--root-font-size) * var(--font-ratio) * 1rem);
    height: calc(74 / var(--root-font-size) * var(--font-ratio) * 1rem);
    border-width: 3px;
  }
  .modal-player-image img {
    width: calc(200 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .modal-player-name {
    margin-top: calc(25 / var(--root-font-size) * var(--font-ratio) * 1rem);
    font-size: calc(32 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .modal-player-pos {
    margin-top: calc(6 / var(--root-font-size) * var(--font-ratio) * 1rem);
    font-size: calc(14 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .modal-player-text {
    margin-top: calc(22 / var(--root-font-size) * var(--font-ratio) * 1rem);
    font-size: calc(14 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .modal-player-sns {
    gap: calc(22 / var(--root-font-size) * var(--font-ratio) * 1rem);
    margin-top: calc(38 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .modal-player-sns img {
    width: calc(60 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
}
.header-nav {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1001;
  width: 100%;
  height: calc(60 / var(--root-font-size) * var(--font-ratio) * 1rem);
  opacity: 0;
  transform: translateY(-100%);
  transition: all 0.3s ease;
}
.header-nav.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.btn-trigger {
  position: absolute;
  top: 50%;
  right: calc(20 / var(--root-font-size) * var(--font-ratio) * 1rem);
  width: calc(44 / var(--root-font-size) * var(--font-ratio) * 1rem);
  height: calc(44 / var(--root-font-size) * var(--font-ratio) * 1rem);
  padding: calc(11 / var(--root-font-size) * var(--font-ratio) * 1rem) calc(7 / var(--root-font-size) * var(--font-ratio) * 1rem);
  cursor: pointer;
  background: transparent;
  background-color: #fff;
  border-radius: 4px;
  transform: translateY(-50%);
  transition: all 0.3s ease;
}
.btn-trigger:focus-visible {
  outline: calc(2 / var(--root-font-size) * var(--font-ratio) * 1rem) solid #fff;
  outline-offset: calc(2 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.btn-trigger__line {
  position: absolute;
  right: calc(7 / var(--root-font-size) * var(--font-ratio) * 1rem);
  left: calc(7 / var(--root-font-size) * var(--font-ratio) * 1rem);
  height: 4px;
  background-color: #000;
  border-radius: 4px;
  transition: all 0.3s ease;
}
.btn-trigger__line:nth-child(1) {
  top: calc(11 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.btn-trigger__line:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}
.btn-trigger__line:nth-child(3) {
  bottom: calc(11 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.btn-trigger[aria-expanded=true] .btn-trigger__line:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
.btn-trigger[aria-expanded=true] .btn-trigger__line:nth-child(2) {
  opacity: 0;
}
.btn-trigger[aria-expanded=true] .btn-trigger__line:nth-child(3) {
  bottom: 50%;
  transform: translateY(50%) rotate(-45deg);
}

.hamburger-menu {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1000;
  width: calc(390 / var(--root-font-size) * var(--font-ratio) * 1rem);
  height: 100vh;
  overflow-y: auto;
  background-color: #000;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}
.hamburger-menu[aria-hidden=false] {
  transform: translateX(0);
}
.hamburger-menu__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: calc(120 / var(--root-font-size) * var(--font-ratio) * 1rem) calc(30 / var(--root-font-size) * var(--font-ratio) * 1rem) calc(40 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.hamburger-menu__nav {
  width: 100%;
}
.hamburger-menu__list {
  padding: 0;
  margin: 0;
  list-style: none;
}
.hamburger-menu__item:not(:first-child) {
  border-top: 1px solid #707070;
}
.hamburger-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-block: calc(20 / var(--root-font-size) * var(--font-ratio) * 1rem);
  padding-inline: 0;
  font-size: calc(18 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-weight: bold;
  color: #d3d3d3;
  text-align: left;
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: color 0.3s ease;
}
.hamburger-menu__link:hover {
  color: #fff;
}
.hamburger-menu__link:hover .hamburger-menu__arrow {
  transform: translateX(calc(8 / var(--root-font-size) * var(--font-ratio) * 1rem));
}
.hamburger-menu__link:focus-visible {
  outline: calc(2 / var(--root-font-size) * var(--font-ratio) * 1rem) solid #fff;
  outline-offset: calc(2 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.hamburger-menu__text {
  flex: 1;
  line-height: 1.556;
  text-align: left;
}
.hamburger-menu__arrow {
  width: calc(16 / var(--root-font-size) * var(--font-ratio) * 1rem);
  height: calc(16 / var(--root-font-size) * var(--font-ratio) * 1rem);
  margin-left: calc(12 / var(--root-font-size) * var(--font-ratio) * 1rem);
  transition: transform 0.3s ease;
}

@media screen and (width <= 768px) {
  .header-nav {
    height: calc(50 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .btn-trigger {
    right: calc(15 / var(--root-font-size) * var(--font-ratio) * 1rem);
    width: calc(36 / var(--root-font-size) * var(--font-ratio) * 1rem);
    height: calc(36 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .btn-trigger__line:nth-child(1) {
    top: calc(10 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .btn-trigger__line:nth-child(3) {
    bottom: calc(10 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .hamburger-menu__link {
    font-size: calc(20 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .hamburger-menu__arrow {
    width: calc(14 / var(--root-font-size) * var(--font-ratio) * 1rem);
    height: calc(14 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
}
[data-animation=hidden] {
  clip-path: polygon(0 0, 0 0, 0 0);
  transition: clip-path 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s, transform 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
}

[data-animation=active] {
  clip-path: polygon(0 0, 200% 0, 0% 400%);
  transition: clip-path 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s, transform 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
  animation: translateSkew 1.5s forwards;
}

@keyframes translateSkew {
  0% {
    transform: translateX(0) scale(1) skew(4deg);
  }
  1% {
    transform: translateX(0) scale(1) skew(4deg);
  }
  100% {
    transform: translateX(0) scale(1) skew(0);
  }
}
[data-hover=orange] {
  transition: color 0.5s, clip-path 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s, transform 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
}

[data-hover=orange]:hover {
  color: #ff5900;
}

[data-animation=mask] .mask-item {
  -webkit-mask-image: linear-gradient(135deg, rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0.4) 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 100%);
          mask-image: linear-gradient(135deg, rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0.4) 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 130% 130%;
          mask-position: 130% 130%;
  -webkit-mask-size: 250% 250%;
          mask-size: 250% 250%;
}
[data-animation=mask] .mask-text {
  opacity: 0;
  transform: translateY(10%);
  transition: opacity 2s ease, transform 1s linear;
}
[data-animation=mask] .mask-img {
  opacity: 0;
  transform: translateY(20%);
  transition: opacity 5s ease, transform 5s linear;
}

[data-animation=mask-active] .mask-item {
  -webkit-mask-image: linear-gradient(135deg, rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0.4) 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 100%);
          mask-image: linear-gradient(135deg, rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0.4) 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 0 0%;
          mask-position: 0 0%;
  -webkit-mask-size: 250% 250%;
          mask-size: 250% 250%;
  transition-duration: 1s;
}
[data-animation=mask-active] .shadow {
  transition-delay: 0s;
}
[data-animation=mask-active] .main {
  transition-delay: 0.4s;
}
[data-animation=mask-active] .mask-text {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 2s ease, transform 0.6s linear;
}
[data-animation=mask-active] .mask-img {
  opacity: 1;
  transform: translateY(0);
  transition-duration: 1s;
}