@charset "UTF-8";
/*
A modern CSS reset 2023 / 9 / 18
https://github.com/Andy-set-studio/modern-css-reset
*/
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
  margin: 0;
}

ul[role=list], ol[role=list] {
  list-style: none;
}

body {
  min-height: 100vh;
  line-height: 1.5;
}

h1, h2, h3, h4, button, input, label {
  line-height: 1.1;
}

h1, h2, h3, h4 {
  text-wrap: balance;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

img, picture {
  max-width: 100%;
  display: block;
}

input, button, textarea, select {
  font: inherit;
}

textarea:not([rows]) {
  min-height: 10em;
}

:target {
  scroll-margin-block: 5ex;
}

/**  base  **/
p,
ul,
ol,
h1,
h2,
h3,
figure,
dl,
dd,
button,
pre {
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}

ul,
ol {
  list-style: none;
}

img,
video {
  max-width: 100%;
  vertical-align: bottom;
  line-height: 1;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  appearance: none;
}

a {
  color: currentColor;
  text-decoration: none;
  transition: all 0.25s ease-out;
}
@media (hover: hover) {
  a:hover {
    filter: brightness(1.12);
  }
}

button {
  transition: all 0.25s ease-out;
}
@media (hover: hover) {
  button:hover {
    filter: brightness(1.12);
  }
}

[x-cloak],
[v-cloak] {
  display: none !important;
}

*:focus {
  outline: none;
}

html {
  scroll-behavior: smooth;
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
  overflow-wrap: anywhere; /* 収まらない場合に折り返す */
  word-break: normal; /* 単語の分割はデフォルトに依存 */
  line-break: strict; /* 禁則処理を厳格に適用 */
}
body.scroll_rock {
  overflow: hidden;
}

a[target=_blank]:not([data-platform])::after {
  margin: 0 3px 0 1px;
  font-family: "Hobonichi-Icons";
  content: "\e914";
  font-size: 85%;
  position: relative;
  top: -3px;
}

:root {
  --color-white: #ffffff;
  --color-black: #000000;
  --color-red: #D16F4C;
  --color-green: #016C55;
  --color-grey: #B7C0C1;
  --base: var(--color-black);
  --accent: var(--color-yellow);
  --link: var(--color-red);
  --bg: #B7C0C1;
  --paper: rgba(237, 237, 237, 0.9);
  --border: 1.5px solid var(--color-black);
}

html {
  scroll-padding: 0;
}

body {
  color: var(--base);
  font-family: "Yu Gothic Pr6N B", sans-serif;
  background-color: var(--bg);
}

.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

header pre,
footer pre {
  white-space: pre-wrap;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transform: translateY(-100%);
  transition: all 0.5s 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
  filter: drop-shadow(0 4px 13px rgba(0, 0, 0, 0.18));
}
.header.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
}
@media (min-width: 48rem) {
  .header {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
  }
}

.cover {
  position: relative;
  padding-top: 4.2rem;
}
.cover-container {
  position: relative;
  width: 89.0666666667vw;
  aspect-ratio: 334/382;
  margin-inline: auto;
}
.cover [class^=title-] {
  position: absolute;
}
.cover [class^=title-] img {
  width: 100%;
  height: auto;
}
.cover .title-1 {
  width: 99.4011976048%;
  top: 0%;
  left: 0.2994011976%;
}
.cover .title-2 {
  width: 5.6886227545%;
  bottom: 0%;
  right: 0%;
}
.cover .title-logo {
  width: 60.7784431138%;
  bottom: 0.7853403141%;
  left: 0.5988023952%;
}
.cover .arrow-1 {
  width: 4.7904191617%;
  top: 8.1151832461%;
  right: 0%;
}
.cover .arrow-2 {
  width: 25.4491017964%;
  bottom: 0%;
  right: 9.5808383234%;
}
.cover .arrow-3 {
  width: 4.7904191617%;
  bottom: 13.8743455497%;
  left: 0%;
}
.cover .magnify {
  width: 82.9341317365%;
  top: 11.5183246073%;
  left: 3.8922155689%;
}
.cover [class^=arrow-] {
  --arrow-size: 68.5333333333vw;
  position: absolute;
  background-position: 0% 0%;
}
.cover .arrow-1 {
  aspect-ratio: 16/53;
  background-image: url("../img/cover_arrow_1.svg");
  background-size: auto var(--arrow-size);
  background-repeat: no-repeat repeat;
  animation: arrow-1 20s linear infinite;
}
.cover .arrow-2 {
  aspect-ratio: 85/16;
  background-image: url("../img/cover_arrow_2.svg");
  background-size: var(--arrow-size) auto;
  background-repeat: repeat no-repeat;
  animation: arrow-2 20s linear infinite;
}
.cover .arrow-3 {
  aspect-ratio: 16/85;
  background-image: url("../img/cover_arrow_3.svg");
  background-size: auto var(--arrow-size);
  background-repeat: no-repeat repeat;
  animation: arrow-3 20s linear infinite;
}
.cover .magnify {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1.5px solid #212121;
  border-radius: 50%;
}
.cover .magnify picture {
  width: 94.1516245487%;
  height: auto;
  aspect-ratio: 1;
  overflow: hidden;
  background-color: #EDEDED;
  border: 1.5px solid #212121;
  border-radius: 50%;
}
.cover .magnify img {
  width: 72.4693251534%;
  height: auto;
  margin-inline: auto;
  transform-origin: center center;
}
.cover.in-view .magnify img {
  animation: magnify-once 1s ease-in-out forwards;
}
@media (min-width: 48rem) {
  .cover-container {
    width: min(90%, 115.3rem);
    aspect-ratio: 1153/629;
  }
  .cover .magnify {
    border-width: 2px;
  }
  .cover .magnify picture {
    width: 94.8811700183%;
    border-width: 2px;
  }
  .cover [class^=title-],
  .cover [class^=arrow-],
  .cover .magnify {
    inset: unset;
  }
  .cover .title-1 {
    width: 61.0581092801%;
    top: 0.6359300477%;
    right: 0.7805724198%;
  }
  .cover .title-2 {
    width: 2.3417172593%;
    bottom: 3.9745627981%;
    right: 0%;
  }
  .cover .title-logo {
    width: 16.4787510841%;
    top: 0%;
    left: 0%;
  }
  .cover .arrow-1 {
    width: 2.5151777971%;
    top: 8.5850556439%;
    right: 0%;
  }
  .cover .arrow-3 {
    width: 18.8204683435%;
    top: 1.2718600954%;
    left: 17.9531656548%;
  }
  .cover .magnify {
    width: 47.4414570685%;
    bottom: 0%;
    right: 10.1474414571%;
  }
  .cover .arrow-1,
  .cover .arrow-3 {
    --arrow-size: calc((403 / 1512) * 100vw);
  }
  .cover .arrow-1 {
    aspect-ratio: 29/127;
    background-image: url("../img/cover_arrow_1_lg.svg");
    background-size: auto var(--arrow-size);
    background-repeat: no-repeat repeat;
    animation: arrow-1 20s linear infinite;
  }
  .cover .arrow-2 {
    display: none;
    animation-play-state: paused;
  }
  .cover .arrow-3 {
    aspect-ratio: 217/29;
    background-image: url("../img/cover_arrow_3_lg.svg");
    background-size: var(--arrow-size) auto;
    background-repeat: repeat no-repeat;
    animation: arrow-4 20s linear infinite;
  }
}
@media (min-width: 56rem) {
  .cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: min(6.2169312169vw, 9.4rem);
  }
}

@keyframes arrow-1 {
  from {
    background-position: 0% 0%;
  }
  to {
    background-position: 0% calc(var(--arrow-size) * 2);
  }
}
@keyframes arrow-2 {
  from {
    background-position: 0% 0%;
  }
  to {
    background-position: calc(var(--arrow-size) * -2) 0%;
  }
}
@keyframes arrow-3 {
  from {
    background-position: 0% 0%;
  }
  to {
    background-position: 0% calc(var(--arrow-size) * -2);
  }
}
@keyframes arrow-4 {
  from {
    background-position: 0% 0%;
  }
  to {
    background-position: calc(var(--arrow-size) * 2) 0%;
  }
}
@keyframes magnify {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.2);
  }
  85% {
    transform: scale(1);
  }
}
@keyframes magnify-once {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.25);
  }
}
.intro {
  position: relative;
  display: grid;
  gap: 4.8rem 0;
  width: min(88.5333333333vw, 115.3rem);
  margin-inline: auto;
  padding-block: 4.8rem 3.8rem;
}
@media (min-width: 48rem) {
  .intro {
    gap: 8.6rem 0;
  }
}
@media (min-width: 56rem) {
  .intro {
    padding-block: min(27.1825396825vw, 41.1rem) 7.4rem;
  }
}

.steps {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.steps .step-1 {
  --step-pad-block: 4.2rem 3.2rem;
}
.steps .step-2 {
  --step-pad-block: 1.6rem 3.2rem;
}
.steps .step-2 .message {
  padding-inline: 6.1333333333vw 5.3333333333vw;
}
.steps .step-3 {
  --step-pad-block: 2.4rem 6.4rem;
}
@media (min-width: 48rem) {
  .steps .step-1 {
    --step-pad-block: 7.2rem 7.2rem;
  }
  .steps .step-2 {
    --step-pad-block: 3.3rem 8.5rem;
  }
  .steps .step-2 .message {
    padding-inline: 8.0239520958% 0;
  }
  .steps .step-3 {
    --step-pad-block: 3.2rem 5.3rem;
  }
}

.yodogawa {
  font-size: 1.5rem;
  line-height: 160%;
  letter-spacing: 0.02em;
}
.yodogawa p + p {
  margin-top: 2em;
}
.yodogawa br {
  display: none;
}
@media (min-width: 48rem) {
  .yodogawa br {
    display: block;
  }
}

.step {
  --h-space: 6.4vw 8.2666666667vw;
  width: min(100%, 83.5rem);
  padding-block: var(--step-pad-block);
  font-size: 1.5rem;
  line-height: 160%;
  letter-spacing: 0.02em;
}
.step:not(:first-of-type) {
  border-top: 1px solid currentColor;
}
.step-header {
  display: grid;
  grid-template-columns: 5.5rem auto;
  align-items: end;
  gap: 0 1.5rem;
  margin-bottom: 1.2rem;
  padding-inline: var(--h-space);
}
.step-header-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem 0;
  width: 100%;
}
.step .number {
  display: grid;
  align-items: center;
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid #121212;
  border-radius: 50%;
}
.step .number.one svg {
  margin-left: 31.8181818182%;
  width: 1.4rem;
  height: 3rem;
}
.step .number.two svg {
  margin-left: 29.0909090909%;
  width: 2.3rem;
  height: 3rem;
}
.step .number.three svg {
  margin-left: 29.0909090909%;
  width: 2.3rem;
  height: 3rem;
}
.step-header-text {
  padding-bottom: 0.4rem;
  font-size: 1.6rem;
  line-height: 150%;
  letter-spacing: 0.02em;
}
@media (min-width: 48rem) {
  .step:not(:first-of-type) {
    border-width: 2px;
  }
  .step-header {
    grid-template-columns: 7.7rem auto;
    gap: 0 1.8rem;
    margin-bottom: 1.7rem;
  }
  .step-header-label {
    gap: 0.7rem 0;
  }
  .step-header-label > svg {
    width: 4.5rem;
    height: 1.2rem;
  }
  .step .number {
    border-width: 1.8px;
  }
  .step .number.one svg {
    margin-left: 31.1688311688%;
    width: 2.1rem;
    height: 4.5rem;
  }
  .step .number.two svg {
    margin-left: 27.2727272727%;
    width: 3.4rem;
    height: 4.5rem;
  }
  .step .number.three svg {
    margin-left: 27.2727272727%;
    width: 3.5rem;
    height: 4.6rem;
  }
  .step-header-text {
    padding-bottom: 1.6rem;
    font-size: min(3.2vw, 3.2rem);
    line-height: 100%;
  }
  .step-header-text br {
    display: none;
  }
}
@media (min-width: 56rem) {
  .step {
    --h-space: 0;
  }
}

.step-block {
  display: grid;
  gap: 2.4rem 0;
}
.step-block p {
  padding-inline: var(--h-space);
}
.step-block p .lg-only {
  display: none;
}
@media (min-width: 48rem) {
  .step-block {
    gap: 3.2rem 0;
  }
  .step-block p .lg-only {
    display: block;
  }
}

.step-note {
  display: grid;
  gap: 1.2rem 2.1rem;
  padding: 3.2rem 5.0666666667vw 4rem 5.3333333333vw;
}
.step-note p {
  --arrow-size: 9.1rem;
  display: flex;
  align-items: center;
  gap: 1.2rem 1.6rem;
  width: fit-content;
  margin-left: auto;
  font-size: 1.3rem;
  line-height: 184.615%;
}
.step-note p::before {
  content: "";
  display: block;
  width: 1.5rem;
  height: 8.4rem;
  background-image: url("../img/step_note_arrow.svg");
  background-size: 100% var(--arrow-size);
  background-repeat: no-repeat repeat;
}
@media (min-width: 48rem) {
  .step-note {
    grid-template-columns: auto 58.4431137725%;
    align-items: end;
    padding-block: 4.9rem 7.4rem;
  }
  .step-note p {
    --arrow-size: 13.1rem;
    flex-direction: column;
    align-items: flex-start;
  }
  .step-note p::before {
    width: 12.9rem;
    height: 2.7rem;
    background-image: url("../img/step_note_arrow_lg.svg");
    background-size: var(--arrow-size) 100%;
    background-repeat: repeat no-repeat;
  }
}
@media (min-width: 56rem) {
  .step-note {
    padding-inline: 0;
  }
  .step-note p {
    font-size: 1.5rem;
    line-height: 160%;
  }
}

@keyframes arrow-to-bottom {
  from {
    background-position: 0 0%;
  }
  to {
    background-position: 0 calc(var(--arrow-size) * 2);
  }
}
@keyframes arrow-to-right {
  from {
    background-position: 0 0;
  }
  to {
    background-position: calc(var(--arrow-size) * 2) 0;
  }
}
.step .gif {
  display: flex;
  justify-content: center;
  width: 100%;
}
.step .gif picture {
  position: relative;
  width: min(100%, 33rem);
}
.step .gif picture::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--base);
}
.step .gif img {
  width: 100%;
  height: auto;
}
@media (min-width: 48rem) {
  .step .gif picture {
    width: fit-content;
  }
}

.step-buttons {
  display: grid;
  justify-content: center;
  gap: 2.2rem 0;
  padding-top: 3rem;
}
@media (min-width: 48rem) {
  .step-buttons {
    gap: 3.8rem 0;
    padding-top: 16.2rem;
  }
}

.step-3 .message {
  padding-top: 1.6rem;
}
.step-3 .message h3 {
  margin-inline: var(--h-space);
}
@media (min-width: 48rem) {
  .step-3 .message {
    padding-top: 1.5rem;
  }
}

.compare {
  display: grid;
  gap: 4.8rem 0;
  width: min(93.3333333333vw, 83.5rem);
  margin-inline: auto;
  padding-block: 5rem 3.3rem;
}
@media (min-width: 48rem) {
  .compare {
    gap: 4rem 0;
    padding-block: 3.7rem 5rem;
  }
}

.compare-block {
  --arrow-outline: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="29" height="37" viewBox="0 0 29 37" fill="none"><path d="M14.5 36L1.00003 21L9.00003 21L9.00003 1L20 0.999999L20 21L28 21L14.5 36Z" stroke="%23D16F4C" stroke-width="2" stroke-linejoin="round"/></svg>');
  --arrow-fill: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="29" height="37" viewBox="0 0 29 37" fill="none"><path d="M14.5 36L1.00003 21L9.00003 21L9.00003 1L20 0.999999L20 21L28 21L14.5 36Z" fill="%23D16F4C" stroke="%23D16F4C" stroke-width="2" stroke-linejoin="round"/></svg>');
  display: grid;
  padding: 2.2rem 2.4rem 4.9rem 2rem;
  background-color: #D9D9D9;
  border: 2px solid var(--color-black);
  border-radius: 3rem;
}
.compare-block h3 {
  display: grid;
  grid-template-columns: 2.9rem auto;
  gap: 3.6rem 1.8rem;
  padding-left: 2rem;
  letter-spacing: 0.02em;
  line-height: 100%;
  font-size: 2.4rem;
}
.compare-block h3 span {
  align-self: end;
}
.compare-block h3 small {
  display: block;
  margin-bottom: 1.2rem;
  font-size: 0.75em;
  line-height: 133.333%;
}
.compare-block h3 br {
  display: none;
}
.compare-block h3::before {
  content: "";
  display: block;
  width: 100%;
  height: 13.1rem;
  background-image: var(--arrow-fill), var(--arrow-outline);
  background-size: 2.9rem 3.7rem;
  background-repeat: no-repeat, no-repeat space;
  background-position: center bottom, center top;
}
.compare-block p {
  margin-block: 2.4rem;
  font-size: 1.5rem;
  line-height: 160%;
  letter-spacing: 0.02em;
}
.compare-block p br {
  display: none;
}
@media (min-width: 32.5rem) {
  .compare-block {
    --arrow-outline: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="37" height="29" viewBox="0 0 37 29" fill="none"><path d="M36 14.5L21 28L21 20L0.999999 20L0.999998 9L21 9L21 0.999997L36 14.5Z" stroke="%23D16F4C" stroke-width="2" stroke-linejoin="round"/></svg>');
    --arrow-fill: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="37" height="29" viewBox="0 0 37 29" fill="none"><path d="M36 14.5L21 28L21 20L0.999999 20L0.999998 9L21 9L21 0.999997L36 14.5Z" fill="%23D16F4C" stroke="%23D16F4C" stroke-width="2" stroke-linejoin="round"/></svg>');
  }
  .compare-block h3 {
    grid-template-columns: unset;
    padding-left: 0;
  }
  .compare-block h3 br {
    display: block;
  }
  .compare-block h3::before {
    width: 17.8rem;
    height: 2.9rem;
    background-size: 3.7rem 2.9rem;
    background-repeat: no-repeat, space no-repeat;
    background-position: right center, left center;
  }
}
@media (min-width: 48rem) {
  .compare-block {
    grid-template-columns: auto 66.8587896254%;
    padding: 4.6rem 8.2634730539% 5.1rem 8.1437125749%;
  }
  .compare-block p {
    margin-block: 3.4rem;
  }
  .compare-block p br {
    display: block;
  }
}

.compare-table {
  --gap-x: 1.3rem;
  --gap-y: 1.2rem;
  --table-mar: 6.8rem;
  width: min(100%, 46.4rem);
  margin-inline: auto;
  border-collapse: collapse;
}
.compare-table + .compare-table {
  margin-top: var(--table-mar);
}
.compare-table th:first-of-type,
.compare-table td:first-of-type {
  padding-right: var(--gap-x);
}
.compare-table th:last-of-type,
.compare-table td:last-of-type {
  padding-left: var(--gap-x);
}
.compare-table th,
.compare-table td {
  vertical-align: top;
  text-align: left;
}
.compare-table th {
  padding-bottom: 0.7rem;
  font-size: 1.2rem;
  line-height: 141.667%;
  letter-spacing: 0.02em;
  font-weight: normal;
}
.compare-table th span {
  display: block;
}
.compare-table img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
}
.compare-table img + img {
  margin-top: var(--gap-y);
}
@media (min-width: 48rem) {
  .compare-table {
    --gap-x: 0.8rem;
    --gap-y: 1.6rem;
    --table-mar: 4rem;
  }
  .compare-table th {
    padding-bottom: 1.6rem;
    font-size: 1.5rem;
    line-height: 160%;
  }
  .compare-table th span {
    font-size: 0.8em;
  }
}

.message {
  color: var(--color-green);
}
.message h2,
.message h3 {
  width: min(85.3333333333vw, 32rem);
  margin-bottom: 1.7rem;
}
.message h2 img,
.message h3 img {
  width: 100%;
  height: auto;
}
.message .para {
  font-size: 1.5rem;
  line-height: 160%;
  letter-spacing: 0.02em;
}
.message .para br {
  display: none;
}
@media (min-width: 48rem) {
  .message h2,
  .message h3 {
    width: 61.4rem;
    margin-bottom: 3.3rem;
  }
  .message .para br {
    display: block;
  }
}

.button {
  display: flex;
  align-items: center;
  gap: 0 0.75rem;
  width: min(72vw, 27rem);
  padding: 1.4rem 0 1.1rem 1.9rem;
  color: var(--color-black);
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: 0.02em;
  background-color: var(--color-red);
  border: 1.5px solid var(--color-black);
}
.button::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 1rem;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 14" fill="none"><path d="M27 12.6606H0" stroke="black" stroke-width="2"/><path d="M31 13.1606L20 0.660645" stroke="black" stroke-width="2"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
}
@media (min-width: 48rem) {
  .button {
    gap: 0 0.6rem;
    width: 34.5rem;
    padding: 1.7rem 0 1.6rem 2.5rem;
    font-size: 2rem;
  }
  .button::after {
    width: 3.2rem;
    height: 1.3rem;
  }
}

.related-product-section {
  width: 100%;
  padding-block: 0 min(14.9333333333vw, 9.6rem);
  padding-left: 2.8rem;
  background-color: var(--color-grey);
}
.related-product-section h3 {
  margin-bottom: 3rem;
  padding-bottom: 0.4rem;
  font-size: 2.4rem;
  font-family: "bebas-neue", sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0.03em;
  border-bottom: 1.5px solid #000;
}
@media (min-width: 67rem) {
  .related-product-section {
    padding-inline: calc((100% - 102rem) / 2);
  }
}

.related-product {
  margin-inline: auto;
}
.related-product a {
  color: var(--color-black);
  transition: filter 0.1s ease;
}
@media (hover: hover) {
  .related-product a:hover {
    opacity: 1;
    filter: brightness(1.12);
  }
}
.related-product .swiper-wrapper {
  padding: 0;
}
.related-product .swiper .brand,
.related-product .swiper .name,
.related-product .swiper .price small {
  font-family: "Yu Gothic Pr6N B", sans-serif;
  letter-spacing: 0.02em;
}
.related-product .swiper .brand {
  font-size: 1rem;
  line-height: 160%;
}
.related-product .swiper .name {
  font-size: 1.2rem;
  line-height: leading(16, 12);
}
.related-product .swiper .price {
  font-family: "bebas-neue", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.5rem;
  line-height: 200%;
  letter-spacing: 0.03em;
}
.related-product .swiper .price:last-child {
  margin-top: 0.8rem;
}
@media (min-width: 67rem) {
  .related-product .swiper .price {
    font-size: 1.2rem;
  }
}
.related-product figure {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  margin-bottom: 0.8rem;
  border: 1px solid var(--color-black);
}
.related-product figure figcaption {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-family: "helvetica-neue-lt-pro-cond", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 8.5333333333vw;
  background-color: rgba(0, 0, 0, 0.4);
}
.related-product img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.related-product .price-wrap {
  margin-top: 0.8rem;
}
.related-product .price-wrap small {
  font-size: 1rem;
}
.related-product .swiper-button-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2rem;
  margin-top: 1.5rem;
}
.related-product .swiper-button-next,
.related-product .swiper-button-prev {
  position: relative;
  width: 3.2rem;
  height: 2rem;
}
.related-product .swiper-button-next::after,
.related-product .swiper-button-prev::after {
  content: "";
  width: 100%;
  height: 100%;
  background-image: url('data:image/svg+xml,%3Csvg width="21" height="10" viewBox="0 0 21 10" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M17.0076 8.5592H0" stroke="black" stroke-width="1.5"/%3E%3Cpath d="M19.5277 8.87402L12.5986 1" stroke="black" stroke-width="1.5"/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-size: contain;
}
.related-product .swiper-button-next {
  --swiper-navigation-sides-offset: 2.8rem;
  animation: arrow-tap-next 2s reverse infinite;
}
.related-product .swiper-button-prev {
  --swiper-navigation-sides-offset: calc(3.2rem * 0.32);
  animation: arrow-tap-prev 2s reverse infinite;
}
.related-product .swiper-button-prev::after {
  transform: scale(-1, 1);
}
.related-product .swiper-button-disabled {
  opacity: 0;
}
@media (min-width: 37.5rem) {
  .related-product figure figcaption {
    font-size: min(3vw, 2rem);
  }
}
@media (min-width: 67rem) {
  .related-product .swiper-button-next {
    --swiper-navigation-sides-offset: calc(3.2rem * 0.32);
  }
}

@keyframes arrow-tap-next {
  0% {
    transform: translateX(0);
  }
  60% {
    transform: translateX(0);
  }
  68% {
    transform: translateX(32%);
  }
  76% {
    transform: translateX(0);
  }
  84% {
    transform: translateX(24%);
  }
  92% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes arrow-tap-prev {
  0% {
    transform: translateX(0);
  }
  60% {
    transform: translateX(0);
  }
  68% {
    transform: translateX(-32%);
  }
  76% {
    transform: translateX(0);
  }
  84% {
    transform: translateX(-24%);
  }
  92% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(0);
  }
}