:root {
  --root-font-size: 16;
  --font-ratio: 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;
}

.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.u-pb0 {
  padding-bottom: 0;
}

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

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

@media screen and (width <= 768px) {
  .u-pc-only {
    display: none !important;
  }
  .u-sp-only {
    display: block !important;
  }
  .u-pc-inlineBlock {
    display: none !important;
  }
}
*,
.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 {
    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);
  }
}

.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.u-pt-60 {
  padding-top: calc(60 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-sec01.u-pb-60 {
  padding-bottom: calc(60 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-sec01:first-child {
  padding-top: calc(120 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-sec01:last-child {
  padding-bottom: calc(184 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-sec01-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 {
  margin-top: calc(46 / var(--root-font-size) * var(--font-ratio) * 1rem);
  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 + .c5-sec01__heading-sub {
  margin-top: calc(70 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.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__subheading-label {
  display: inline-block;
  padding: calc(8 / var(--root-font-size) * var(--font-ratio) * 1rem) calc(20 / var(--root-font-size) * var(--font-ratio) * 1rem);
  margin-top: calc(30 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-size: calc(36 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-weight: 500;
  background: linear-gradient(to right, #000080 0%, #500080 49.75%, #800080 100%) no-repeat left top;
}
.c5-sec01__heading-sub {
  font-size: calc(62 / var(--root-font-size) * var(--font-ratio) * 1rem);
  line-height: 1.2;
  letter-spacing: -0.04em;
}
.c5-sec01__heading-sub.u-pt-60 {
  padding-top: calc(60 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-sec01__text {
  max-width: 1240px;
  padding: 0 calc(20 / var(--root-font-size) * var(--font-ratio) * 1rem);
  margin: calc(30 / var(--root-font-size) * var(--font-ratio) * 1rem) auto 0;
  font-size: calc(24 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-weight: 800;
  line-height: 1.8333333333;
  text-align: left;
}
.c5-sec01__image {
  margin: calc(40 / var(--root-font-size) * var(--font-ratio) * 1rem) 0 0;
}
.c5-sec01__image.u-mt-0 {
  margin-top: 0;
}
.c5-sec01__image img {
  height: auto;
}
.c5-sec01__figcaption {
  font-size: calc(20 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-weight: 800;
  line-height: 1.8333333333;
  text-align: center;
}
.c5-sec01__button {
  margin-top: calc(40 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-sec01__article .c5-sec02__image {
  max-width: 1240px;
  margin: calc(40 / var(--root-font-size) * var(--font-ratio) * 1rem) auto 0;
}
.c5-sec01__article:not(:first-child) {
  padding-top: calc(210 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-sec01__card-title {
  margin-top: calc(70 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-size: calc(62 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
}
.c5-sec01__card-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(60 / var(--root-font-size) * var(--font-ratio) * 1rem);
  margin-top: calc(40 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-sec01__card-name {
  margin-top: calc(20 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-size: calc(48 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-weight: 900;
  line-height: 1.556;
}
.c5-sec01__card-text {
  margin-top: calc(18 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-size: calc(18 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-weight: 900;
  line-height: 1.556;
  text-align: left;
}
.c5-sec01__card-item--commentary {
  width: 50%;
  margin: calc(40 / var(--root-font-size) * var(--font-ratio) * 1rem) auto 0;
}

@media screen and (width <= 768px) {
  .c5-sec01 {
    align-items: start;
    min-height: auto;
    padding-block: calc(40 / var(--root-font-size) * var(--font-ratio) * 1rem);
    padding-inline: calc(30 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-sec01:first-child {
    padding-top: calc(60 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-sec01:last-child {
    padding-bottom: 0;
  }
  .c5-sec01-inner {
    width: 100%;
    padding: 0;
    text-align: left;
  }
  .c5-sec01__heading {
    margin-top: calc(12 / var(--root-font-size) * var(--font-ratio) * 1rem);
    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 + .c5-sec01__heading-sub {
    margin-top: calc(30 / 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__subheading-label {
    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);
    line-height: 2;
  }
  .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__heading-sub {
    margin-top: 0;
    font-size: calc(36 / var(--root-font-size) * var(--font-ratio) * 1rem);
    line-height: 1.278;
  }
  .c5-sec01__heading-sub :first-child {
    margin-top: 0;
  }
  .c5-sec01__heading-sub.u-pt-60 {
    padding-top: calc(40 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-sec01__text {
    padding: 0;
    margin-top: calc(20 / var(--root-font-size) * var(--font-ratio) * 1rem);
    font-size: calc(16 / var(--root-font-size) * var(--font-ratio) * 1rem);
    font-weight: 400;
  }
  .c5-sec01__figcaption {
    font-size: calc(14 / var(--root-font-size) * var(--font-ratio) * 1rem);
    font-weight: 400;
  }
  .c5-sec01__button {
    margin-top: calc(30 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-sec01__article:not(:first-child) {
    padding-top: calc(60 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-sec01__card-title {
    margin-top: calc(20 / var(--root-font-size) * var(--font-ratio) * 1rem);
    font-size: calc(28 / var(--root-font-size) * var(--font-ratio) * 1rem);
    line-height: 1.278;
    text-align: left;
  }
  .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-name {
    font-size: calc(26 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-sec01__card-text {
    margin-top: calc(10 / var(--root-font-size) * var(--font-ratio) * 1rem);
    font-size: calc(16 / var(--root-font-size) * var(--font-ratio) * 1rem);
    font-weight: 400;
  }
  .c5-sec01__card-item--commentary {
    width: 100%;
    margin-top: calc(20 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
}
.c5-sec02__heading {
  font-size: calc(86 / var(--root-font-size) * var(--font-ratio) * 1rem);
  line-height: 1.1;
  letter-spacing: -0.04em;
}
.c5-sec02__product {
  margin-top: calc(140 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-sec02__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(60 / var(--root-font-size) * var(--font-ratio) * 1rem);
  align-items: center;
  margin-top: calc(140 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-sec02__grid:first-child {
  margin-top: 0;
}
.c5-sec02__info {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.c5-sec02__info-name img {
  height: auto;
}
.c5-sec02__info-description {
  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: 700;
  line-height: 1.583;
}
.c5-sec02__info--01 {
  margin-top: calc(40 / var(--root-font-size) * var(--font-ratio) * 1rem);
}

@media screen and (width <= 768px) {
  .c5-sec02__heading {
    font-size: calc(36 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-sec02__product {
    margin-top: calc(30 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-sec02__grid {
    grid-template-columns: 1fr;
    gap: calc(30 / var(--root-font-size) * var(--font-ratio) * 1rem);
    margin-top: calc(50 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-sec02__info-description {
    margin-top: calc(20 / var(--root-font-size) * var(--font-ratio) * 1rem);
    font-size: calc(16 / var(--root-font-size) * var(--font-ratio) * 1rem);
    font-weight: 400;
  }
  .c5-sec02__info-name--01 img {
    width: calc(225 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-sec02__info-name--02 img {
    width: calc(215 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-sec02__info--01 {
    margin-top: 0;
  }
}
.c5-sec06-button {
  display: inline-block;
  display: flex;
  place-content: center;
  align-items: center;
  justify-content: center;
  width: calc(398 / var(--root-font-size) * var(--font-ratio) * 1rem);
  height: calc(78 / var(--root-font-size) * var(--font-ratio) * 1rem);
  margin-top: calc(20 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-size: calc(32 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-weight: 400;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(to right, #000080 0%, #500080 49.75%, #800080 100%) no-repeat left top;
  transition: all 0.3s ease;
}
.c5-sec06-button:first-child {
  margin-top: 0;
}
@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%);
  }
}
.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 <= 768px) {
  .c5-sec06-button {
    box-sizing: border-box;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    height: calc(65 / var(--root-font-size) * var(--font-ratio) * 1rem);
    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);
  }
}
.c5-toppage {
  margin-top: calc(140 / var(--root-font-size) * var(--font-ratio) * 1rem);
  text-align: center;
  background: #000;
}
.c5-toppage__button {
  display: inline-flex;
  gap: calc(16 / var(--root-font-size) * var(--font-ratio) * 1rem);
  align-items: center;
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: none;
  transition: all 0.3s ease;
}
.c5-toppage__text {
  height: auto;
}
.c5-toppage__arrow {
  height: auto;
  transition: transform 0.3s ease;
}
.c5-toppage__button:hover .c5-toppage__arrow {
  transform: translateX(calc(8 / var(--root-font-size) * var(--font-ratio) * 1rem));
}

@media screen and (width <= 768px) {
  .c5-toppage {
    padding: calc(60 / var(--root-font-size) * var(--font-ratio) * 1rem) 0;
    margin-top: 0;
  }
  .c5-toppage__button {
    gap: calc(12 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-toppage__text {
    width: calc(64 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-toppage__arrow {
    width: calc(12 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
}
.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);
  }
}
.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__link--disabled {
  color: #333;
  pointer-events: none;
  cursor: default;
}
.hamburger-menu__link--disabled:hover {
  color: #333;
}
.hamburger-menu__link--disabled:hover .hamburger-menu__arrow {
  transform: none;
}
.hamburger-menu__link--disabled .hamburger-menu__arrow {
  filter: brightness(0) saturate(100%) invert(20%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(95%);
}
.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__link:hover .hamburger-menu__arrow {
    transform: translateX(calc(6 / 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);
  }
}
body[data-menu-open=true] {
  overflow: hidden;
}

@media (prefers-contrast: high) {
  .btn-trigger:focus-visible,
  .hamburger-menu__link:focus-visible {
    outline: 3px solid currentcolor;
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn-trigger,
  .btn-trigger__line,
  .hamburger-menu,
  .hamburger-menu__link,
  [data-animation=hidden],
  [data-animation=active] {
    transition: none;
  }
}