@charset "UTF-8";
/* ==========================================================================
   THE MODERN QUALITY-OF-LIFE CSS RESET
 ========================================================================== */
/* 1. Use a more intuitive box-sizing model for all elements */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margins so components don't leak space */
* {
  margin: 0;
  padding: 0; /* Also flattens default list/form padding */
}

/* 3. Allow percentage-based heights in the application layout */
html, body {
  height: 100%;
}

/* 4. Improve text rendering, line height, and spacing on the body */
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  margin: 0;
  overflow: hidden;
}

/* 5. Make media elements block-level and fluid to prevent overflow layouts */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto; /* Maintains proper aspect ratios */
}

/* 6. Inherit fonts for form controls to prevent fallback browser typography */
input, button, textarea, select {
  font: inherit;
}

/* 7. Avoid text overflows on long strings, links, or headings */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 8. Keep lists clean but accessible (keeps screen-readers happy) */
ol, ul {
  list-style: none;
}

/* 9. Improve interactive elements defaults */
button {
  cursor: pointer;
  background: none;
  border: none;
}

/* 10. Respect user preferences for reduced motion */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
:root {
  --design-width: 2400;
  --contents-width: 1700;
  --contents-side-padding: 350;
  --minwidth: 320;
  --fixed-header-height: 20;
  --root-fz: 16;
  --line-height: 1.5;
  --hover-opacity-ratio: 0.8;
  --hover-duration: 0.3s;
}

body {
  font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Arial", "Verdana", sans-serif;
  color: #000;
  line-height: 1.5;
  font-weight: 400;
  overflow-y: auto;
}

img {
  display: block;
}

.oshitabi__main {
  margin: auto;
}

.oshitabi__footer__button {
  text-align: center;
  margin-top: 80px;
  margin-bottom: 40px;
}
.oshitabi__footer__button a {
  display: block;
  border: 3px solid #000;
  background-color: #fff;
  max-width: 320px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
  font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Arial", "Verdana", sans-serif;
  font-size: 20px;
  font-weight: 900;
  border-radius: 20px;
  position: relative;
  text-decoration: none;
  color: #000;
  z-index: 999;
}
.oshitabi__footer__button a:hover {
  opacity: 0.8;
  transition: opacity 0.3s;
}

:root {
  --font-family: 'Noto Serif JP', sans-serif;
  --font-sans: 'Noto Sans JP', sans-serif;
  --font-inter: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-black: 900;
  --box-shadow: 0px 0.04rem 0.04rem rgba(0, 0, 0, 0.25);
  --design-width-sp: 430;
  --content-width-pc: 470;
  --content-width: calc(var(--content-width-pc) * 1px);
  --rem-ratio: 4.3;
  font-size: calc(var(--content-width-pc) * 1px / var(--rem-ratio));
}

@media screen and (max-width: 750px) {
  :root {
    --content-width: 100vw;
    font-size: calc(100vw / var(--rem-ratio));
  }
}
@media screen and (max-width: 1023px) {
  :root {
    --content-width-pc: 375;
  }
}
:root {
  --logo-width: min(calc(50vw - 235px - 50px), 412px);
  --logo-left: calc((50vw - 235px - var(--logo-width)) / 2);
  --side-width: min(calc(50vw - 235px - 100px), 341px );
  --side-right: calc((50vw - 235px - var(--side-width)) / 2);
  --decoration-width: min(calc(50vw - 235px - 50px),193px);
  --decoration-top: calc(90px + 27px);
  --decoration-bottom: 21px;
  --decoration-left: 25px;
  --decoration-right: 25px;
}

@media screen and (max-width: 1515px) {
  :root {
    --side-width: min(calc(50vw - 235px - 20px), 341px );
  }
}
@media screen and (max-width: 1023px) {
  :root {
    --logo-width: min(calc(50vw - 187.5px - 50px), 412px);
    --logo-left: calc((50vw - 187.5px - var(--logo-width)) / 2);
    --side-width: calc(50vw - 187.5px - 20px);
    --side-right: calc((50vw - 187.5px - var(--side-width)) / 2);
    --decoration-width: min(calc(50vw - 187.5px - 30px),137px);
    --decoration-top: calc(90px + 16px);
    --decoration-bottom: 11px;
    --decoration-left: 15px;
    --decoration-right: 15px;
  }
}
body {
  font-family: var(--font-family);
}

.oshitabi__main {
  background-size: contain;
  background-position: center;
  padding-top: 90px;
  overflow-y: hidden;
}
.oshitabi__main::before {
  content: "";
  position: fixed;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-color: var(--white);
  background-image: url("../images/bg-orange.webp");
  background-size: contain;
}
@media screen and (max-width: 750px) {
  .oshitabi__main {
    padding-top: 66px;
  }
}

.l-main {
  max-width: var(--content-width);
  width: 100%;
  margin: auto;
  background-size: contain;
  background-position-y: 360px;
  box-shadow: var(--box-shadow);
}

footer {
  position: relative;
  z-index: 1;
  background-color: var(--white);
  margin-top: 0 !important;
  padding-top: 40px !important;
}
@media screen and (max-width: 750px) {
  footer {
    padding-top: 20px !important;
  }
}

.copyright {
  display: block;
  width: 100%;
  text-align: center;
}
.copyright__text {
  color: var(--black);
  font-family: var(--font-inter);
  font-size: 0.1rem;
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.05em;
}

.pankuzu {
  margin-bottom: 0 !important;
  padding-bottom: 10px !important;
}
.pankuzu__list {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pankuzu__item {
  display: flex;
  align-items: center;
}
.pankuzu__item:not(:last-child)::after {
  content: ">";
  margin-left: 0.2rem;
}

.oshitabi__footer__button {
  text-align: center;
  margin-top: 80px;
  margin-bottom: 40px;
}
.oshitabi__footer__button a {
  display: block;
  border: 3px solid #000;
  background-color: #fff;
  max-width: 320px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 20px;
  font-weight: 900;
  border-radius: 20px;
  position: relative;
  text-decoration: none;
  color: #000;
}

.l-sidebar {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 90px;
  left: auto;
  right: var(--side-right);
  height: calc(100% - 90px);
  width: var(--side-width);
  max-width: 423px;
}
@media screen and (max-width: 750px) {
  .l-sidebar {
    display: none;
  }
}
.l-sidebar__inner {
  width: 100%;
}

.l-logo {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 90px;
  bottom: 0;
  left: var(--logo-left);
  right: auto;
  margin: auto;
  width: var(--logo-width);
  height: calc(100% - 90px);
}
@media screen and (max-width: 750px) {
  .l-logo {
    display: none;
  }
}

.l-page_background {
  padding-top: 90px;
  overflow-y: hidden;
}
.l-page_background::before {
  content: "";
  position: fixed;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-image: url("../images/main-bg.webp");
  background-size: contain;
  background-color: var(--white);
}
@media screen and (max-width: 750px) {
  .l-page_background {
    padding-top: 66px;
  }
}

.l-decoration__item {
  position: fixed;
  margin: auto;
  width: var(--decoration-width);
  aspect-ratio: 1/1;
  background-image: url("../images/l-decoration-item.svg");
  background-size: cover;
}
.l-decoration__item.l-decoration__item--1 {
  top: var(--decoration-top);
  left: var(--decoration-left);
}
.l-decoration__item.l-decoration__item--2 {
  top: var(--decoration-top);
  right: var(--decoration-right);
  transform: scale(-1, 1);
}
.l-decoration__item.l-decoration__item--3 {
  bottom: var(--decoration-bottom);
  left: var(--decoration-left);
  transform: scale(1, -1);
}
.l-decoration__item.l-decoration__item--4 {
  bottom: var(--decoration-bottom);
  right: var(--decoration-right);
  transform: scale(-1, -1);
}
@media screen and (max-width: 750px) {
  .l-decoration {
    display: none;
  }
}

.u-ls-n20 {
  letter-spacing: -0.2em;
}

.u-ls-n19 {
  letter-spacing: -0.19em;
}

.u-ls-n18 {
  letter-spacing: -0.18em;
}

.u-ls-n17 {
  letter-spacing: -0.17em;
}

.u-ls-n16 {
  letter-spacing: -0.16em;
}

.u-ls-n15 {
  letter-spacing: -0.15em;
}

.u-ls-n14 {
  letter-spacing: -0.14em;
}

.u-ls-n13 {
  letter-spacing: -0.13em;
}

.u-ls-n12 {
  letter-spacing: -0.12em;
}

.u-ls-n11 {
  letter-spacing: -0.11em;
}

.u-ls-n10 {
  letter-spacing: -0.1em;
}

.u-ls-n9 {
  letter-spacing: -0.09em;
}

.u-ls-n8 {
  letter-spacing: -0.08em;
}

.u-ls-n7 {
  letter-spacing: -0.07em;
}

.u-ls-n6 {
  letter-spacing: -0.06em;
}

.u-ls-n5 {
  letter-spacing: -0.05em;
}

.u-ls-n4 {
  letter-spacing: -0.04em;
}

.u-ls-n3 {
  letter-spacing: -0.03em;
}

.u-ls-n2 {
  letter-spacing: -0.02em;
}

.u-ls-n1 {
  letter-spacing: -0.01em;
}

.u-ls-0 {
  letter-spacing: 0em;
}

.u-ls-1 {
  letter-spacing: 0.01em;
}

.u-ls-2 {
  letter-spacing: 0.02em;
}

.u-ls-3 {
  letter-spacing: 0.03em;
}

.u-ls-4 {
  letter-spacing: 0.04em;
}

.u-ls-5 {
  letter-spacing: 0.05em;
}

.u-ls-6 {
  letter-spacing: 0.06em;
}

.u-ls-7 {
  letter-spacing: 0.07em;
}

.u-ls-8 {
  letter-spacing: 0.08em;
}

.u-ls-9 {
  letter-spacing: 0.09em;
}

.u-ls-10 {
  letter-spacing: 0.1em;
}

.u-ls-11 {
  letter-spacing: 0.11em;
}

.u-ls-12 {
  letter-spacing: 0.12em;
}

.u-ls-13 {
  letter-spacing: 0.13em;
}

.u-ls-14 {
  letter-spacing: 0.14em;
}

.u-ls-15 {
  letter-spacing: 0.15em;
}

.u-ls-16 {
  letter-spacing: 0.16em;
}

.u-ls-17 {
  letter-spacing: 0.17em;
}

.u-ls-18 {
  letter-spacing: 0.18em;
}

.u-ls-19 {
  letter-spacing: 0.19em;
}

.u-ls-20 {
  letter-spacing: 0.2em;
}

.u-pb-0 {
  padding-bottom: 0rem !important;
}

.u-pb-1 {
  padding-bottom: 0.01rem !important;
}

.u-pb-2 {
  padding-bottom: 0.02rem !important;
}

.u-pb-3 {
  padding-bottom: 0.03rem !important;
}

.u-pb-4 {
  padding-bottom: 0.04rem !important;
}

.u-pb-5 {
  padding-bottom: 0.05rem !important;
}

.u-pb-6 {
  padding-bottom: 0.06rem !important;
}

.u-pb-7 {
  padding-bottom: 0.07rem !important;
}

.u-pb-8 {
  padding-bottom: 0.08rem !important;
}

.u-pb-9 {
  padding-bottom: 0.09rem !important;
}

.u-pb-10 {
  padding-bottom: 0.1rem !important;
}

.u-pb-11 {
  padding-bottom: 0.11rem !important;
}

.u-pb-12 {
  padding-bottom: 0.12rem !important;
}

.u-pb-13 {
  padding-bottom: 0.13rem !important;
}

.u-pb-14 {
  padding-bottom: 0.14rem !important;
}

.u-pb-15 {
  padding-bottom: 0.15rem !important;
}

.u-pb-16 {
  padding-bottom: 0.16rem !important;
}

.u-pb-17 {
  padding-bottom: 0.17rem !important;
}

.u-pb-18 {
  padding-bottom: 0.18rem !important;
}

.u-pb-19 {
  padding-bottom: 0.19rem !important;
}

.u-pb-20 {
  padding-bottom: 0.2rem !important;
}

.u-pb-21 {
  padding-bottom: 0.21rem !important;
}

.u-pb-22 {
  padding-bottom: 0.22rem !important;
}

.u-pb-23 {
  padding-bottom: 0.23rem !important;
}

.u-pb-24 {
  padding-bottom: 0.24rem !important;
}

.u-pb-25 {
  padding-bottom: 0.25rem !important;
}

.u-pb-26 {
  padding-bottom: 0.26rem !important;
}

.u-pb-27 {
  padding-bottom: 0.27rem !important;
}

.u-pb-28 {
  padding-bottom: 0.28rem !important;
}

.u-pb-29 {
  padding-bottom: 0.29rem !important;
}

.u-pb-30 {
  padding-bottom: 0.3rem !important;
}

.u-pb-31 {
  padding-bottom: 0.31rem !important;
}

.u-pb-32 {
  padding-bottom: 0.32rem !important;
}

.u-pb-33 {
  padding-bottom: 0.33rem !important;
}

.u-pb-34 {
  padding-bottom: 0.34rem !important;
}

.u-pb-35 {
  padding-bottom: 0.35rem !important;
}

.u-pb-36 {
  padding-bottom: 0.36rem !important;
}

.u-pb-37 {
  padding-bottom: 0.37rem !important;
}

.u-pb-38 {
  padding-bottom: 0.38rem !important;
}

.u-pb-39 {
  padding-bottom: 0.39rem !important;
}

.u-pb-40 {
  padding-bottom: 0.4rem !important;
}

.u-pb-41 {
  padding-bottom: 0.41rem !important;
}

.u-pb-42 {
  padding-bottom: 0.42rem !important;
}

.u-pb-43 {
  padding-bottom: 0.43rem !important;
}

.u-pb-44 {
  padding-bottom: 0.44rem !important;
}

.u-pb-45 {
  padding-bottom: 0.45rem !important;
}

.u-pb-46 {
  padding-bottom: 0.46rem !important;
}

.u-pb-47 {
  padding-bottom: 0.47rem !important;
}

.u-pb-48 {
  padding-bottom: 0.48rem !important;
}

.u-pb-49 {
  padding-bottom: 0.49rem !important;
}

.u-pb-50 {
  padding-bottom: 0.5rem !important;
}

.u-pb-51 {
  padding-bottom: 0.51rem !important;
}

.u-pb-52 {
  padding-bottom: 0.52rem !important;
}

.u-pb-53 {
  padding-bottom: 0.53rem !important;
}

.u-pb-54 {
  padding-bottom: 0.54rem !important;
}

.u-pb-55 {
  padding-bottom: 0.55rem !important;
}

.u-pb-56 {
  padding-bottom: 0.56rem !important;
}

.u-pb-57 {
  padding-bottom: 0.57rem !important;
}

.u-pb-58 {
  padding-bottom: 0.58rem !important;
}

.u-pb-59 {
  padding-bottom: 0.59rem !important;
}

.u-pb-60 {
  padding-bottom: 0.6rem !important;
}

.u-pb-61 {
  padding-bottom: 0.61rem !important;
}

.u-pb-62 {
  padding-bottom: 0.62rem !important;
}

.u-pb-63 {
  padding-bottom: 0.63rem !important;
}

.u-pb-64 {
  padding-bottom: 0.64rem !important;
}

.u-pb-65 {
  padding-bottom: 0.65rem !important;
}

.u-pb-66 {
  padding-bottom: 0.66rem !important;
}

.u-pb-67 {
  padding-bottom: 0.67rem !important;
}

.u-pb-68 {
  padding-bottom: 0.68rem !important;
}

.u-pb-69 {
  padding-bottom: 0.69rem !important;
}

.u-pb-70 {
  padding-bottom: 0.7rem !important;
}

.u-pb-71 {
  padding-bottom: 0.71rem !important;
}

.u-pb-72 {
  padding-bottom: 0.72rem !important;
}

.u-pb-73 {
  padding-bottom: 0.73rem !important;
}

.u-pb-74 {
  padding-bottom: 0.74rem !important;
}

.u-pb-75 {
  padding-bottom: 0.75rem !important;
}

.u-pb-76 {
  padding-bottom: 0.76rem !important;
}

.u-pb-77 {
  padding-bottom: 0.77rem !important;
}

.u-pb-78 {
  padding-bottom: 0.78rem !important;
}

.u-pb-79 {
  padding-bottom: 0.79rem !important;
}

.u-pb-80 {
  padding-bottom: 0.8rem !important;
}

.u-pb-81 {
  padding-bottom: 0.81rem !important;
}

.u-pb-82 {
  padding-bottom: 0.82rem !important;
}

.u-pb-83 {
  padding-bottom: 0.83rem !important;
}

.u-pb-84 {
  padding-bottom: 0.84rem !important;
}

.u-pb-85 {
  padding-bottom: 0.85rem !important;
}

.u-pb-86 {
  padding-bottom: 0.86rem !important;
}

.u-pb-87 {
  padding-bottom: 0.87rem !important;
}

.u-pb-88 {
  padding-bottom: 0.88rem !important;
}

.u-pb-89 {
  padding-bottom: 0.89rem !important;
}

.u-pb-90 {
  padding-bottom: 0.9rem !important;
}

.u-pb-91 {
  padding-bottom: 0.91rem !important;
}

.u-pb-92 {
  padding-bottom: 0.92rem !important;
}

.u-pb-93 {
  padding-bottom: 0.93rem !important;
}

.u-pb-94 {
  padding-bottom: 0.94rem !important;
}

.u-pb-95 {
  padding-bottom: 0.95rem !important;
}

.u-pb-96 {
  padding-bottom: 0.96rem !important;
}

.u-pb-97 {
  padding-bottom: 0.97rem !important;
}

.u-pb-98 {
  padding-bottom: 0.98rem !important;
}

.u-pb-99 {
  padding-bottom: 0.99rem !important;
}

.u-pb-100 {
  padding-bottom: 1rem !important;
}

.u-wd-0 {
  width: 0rem !important;
}

.u-wd-1 {
  width: 0.01rem !important;
}

.u-wd-2 {
  width: 0.02rem !important;
}

.u-wd-3 {
  width: 0.03rem !important;
}

.u-wd-4 {
  width: 0.04rem !important;
}

.u-wd-5 {
  width: 0.05rem !important;
}

.u-wd-6 {
  width: 0.06rem !important;
}

.u-wd-7 {
  width: 0.07rem !important;
}

.u-wd-8 {
  width: 0.08rem !important;
}

.u-wd-9 {
  width: 0.09rem !important;
}

.u-wd-10 {
  width: 0.1rem !important;
}

.u-wd-11 {
  width: 0.11rem !important;
}

.u-wd-12 {
  width: 0.12rem !important;
}

.u-wd-13 {
  width: 0.13rem !important;
}

.u-wd-14 {
  width: 0.14rem !important;
}

.u-wd-15 {
  width: 0.15rem !important;
}

.u-wd-16 {
  width: 0.16rem !important;
}

.u-wd-17 {
  width: 0.17rem !important;
}

.u-wd-18 {
  width: 0.18rem !important;
}

.u-wd-19 {
  width: 0.19rem !important;
}

.u-wd-20 {
  width: 0.2rem !important;
}

.u-wd-21 {
  width: 0.21rem !important;
}

.u-wd-22 {
  width: 0.22rem !important;
}

.u-wd-23 {
  width: 0.23rem !important;
}

.u-wd-24 {
  width: 0.24rem !important;
}

.u-wd-25 {
  width: 0.25rem !important;
}

.u-wd-26 {
  width: 0.26rem !important;
}

.u-wd-27 {
  width: 0.27rem !important;
}

.u-wd-28 {
  width: 0.28rem !important;
}

.u-wd-29 {
  width: 0.29rem !important;
}

.u-wd-30 {
  width: 0.3rem !important;
}

.u-wd-31 {
  width: 0.31rem !important;
}

.u-wd-32 {
  width: 0.32rem !important;
}

.u-wd-33 {
  width: 0.33rem !important;
}

.u-wd-34 {
  width: 0.34rem !important;
}

.u-wd-35 {
  width: 0.35rem !important;
}

.u-wd-36 {
  width: 0.36rem !important;
}

.u-wd-37 {
  width: 0.37rem !important;
}

.u-wd-38 {
  width: 0.38rem !important;
}

.u-wd-39 {
  width: 0.39rem !important;
}

.u-wd-40 {
  width: 0.4rem !important;
}

.u-wd-41 {
  width: 0.41rem !important;
}

.u-wd-42 {
  width: 0.42rem !important;
}

.u-wd-43 {
  width: 0.43rem !important;
}

.u-wd-44 {
  width: 0.44rem !important;
}

.u-wd-45 {
  width: 0.45rem !important;
}

.u-wd-46 {
  width: 0.46rem !important;
}

.u-wd-47 {
  width: 0.47rem !important;
}

.u-wd-48 {
  width: 0.48rem !important;
}

.u-wd-49 {
  width: 0.49rem !important;
}

.u-wd-50 {
  width: 0.5rem !important;
}

.u-wd-51 {
  width: 0.51rem !important;
}

.u-wd-52 {
  width: 0.52rem !important;
}

.u-wd-53 {
  width: 0.53rem !important;
}

.u-wd-54 {
  width: 0.54rem !important;
}

.u-wd-55 {
  width: 0.55rem !important;
}

.u-wd-56 {
  width: 0.56rem !important;
}

.u-wd-57 {
  width: 0.57rem !important;
}

.u-wd-58 {
  width: 0.58rem !important;
}

.u-wd-59 {
  width: 0.59rem !important;
}

.u-wd-60 {
  width: 0.6rem !important;
}

.u-wd-61 {
  width: 0.61rem !important;
}

.u-wd-62 {
  width: 0.62rem !important;
}

.u-wd-63 {
  width: 0.63rem !important;
}

.u-wd-64 {
  width: 0.64rem !important;
}

.u-wd-65 {
  width: 0.65rem !important;
}

.u-wd-66 {
  width: 0.66rem !important;
}

.u-wd-67 {
  width: 0.67rem !important;
}

.u-wd-68 {
  width: 0.68rem !important;
}

.u-wd-69 {
  width: 0.69rem !important;
}

.u-wd-70 {
  width: 0.7rem !important;
}

.u-wd-71 {
  width: 0.71rem !important;
}

.u-wd-72 {
  width: 0.72rem !important;
}

.u-wd-73 {
  width: 0.73rem !important;
}

.u-wd-74 {
  width: 0.74rem !important;
}

.u-wd-75 {
  width: 0.75rem !important;
}

.u-wd-76 {
  width: 0.76rem !important;
}

.u-wd-77 {
  width: 0.77rem !important;
}

.u-wd-78 {
  width: 0.78rem !important;
}

.u-wd-79 {
  width: 0.79rem !important;
}

.u-wd-80 {
  width: 0.8rem !important;
}

.u-wd-81 {
  width: 0.81rem !important;
}

.u-wd-82 {
  width: 0.82rem !important;
}

.u-wd-83 {
  width: 0.83rem !important;
}

.u-wd-84 {
  width: 0.84rem !important;
}

.u-wd-85 {
  width: 0.85rem !important;
}

.u-wd-86 {
  width: 0.86rem !important;
}

.u-wd-87 {
  width: 0.87rem !important;
}

.u-wd-88 {
  width: 0.88rem !important;
}

.u-wd-89 {
  width: 0.89rem !important;
}

.u-wd-90 {
  width: 0.9rem !important;
}

.u-wd-91 {
  width: 0.91rem !important;
}

.u-wd-92 {
  width: 0.92rem !important;
}

.u-wd-93 {
  width: 0.93rem !important;
}

.u-wd-94 {
  width: 0.94rem !important;
}

.u-wd-95 {
  width: 0.95rem !important;
}

.u-wd-96 {
  width: 0.96rem !important;
}

.u-wd-97 {
  width: 0.97rem !important;
}

.u-wd-98 {
  width: 0.98rem !important;
}

.u-wd-99 {
  width: 0.99rem !important;
}

.u-wd-100 {
  width: 1rem !important;
}

.u-wd-101 {
  width: 1.01rem !important;
}

.u-wd-102 {
  width: 1.02rem !important;
}

.u-wd-103 {
  width: 1.03rem !important;
}

.u-wd-104 {
  width: 1.04rem !important;
}

.u-wd-105 {
  width: 1.05rem !important;
}

.u-wd-106 {
  width: 1.06rem !important;
}

.u-wd-107 {
  width: 1.07rem !important;
}

.u-wd-108 {
  width: 1.08rem !important;
}

.u-wd-109 {
  width: 1.09rem !important;
}

.u-wd-110 {
  width: 1.1rem !important;
}

.u-wd-111 {
  width: 1.11rem !important;
}

.u-wd-112 {
  width: 1.12rem !important;
}

.u-wd-113 {
  width: 1.13rem !important;
}

.u-wd-114 {
  width: 1.14rem !important;
}

.u-wd-115 {
  width: 1.15rem !important;
}

.u-wd-116 {
  width: 1.16rem !important;
}

.u-wd-117 {
  width: 1.17rem !important;
}

.u-wd-118 {
  width: 1.18rem !important;
}

.u-wd-119 {
  width: 1.19rem !important;
}

.u-wd-120 {
  width: 1.2rem !important;
}

.u-wd-121 {
  width: 1.21rem !important;
}

.u-wd-122 {
  width: 1.22rem !important;
}

.u-wd-123 {
  width: 1.23rem !important;
}

.u-wd-124 {
  width: 1.24rem !important;
}

.u-wd-125 {
  width: 1.25rem !important;
}

.u-wd-126 {
  width: 1.26rem !important;
}

.u-wd-127 {
  width: 1.27rem !important;
}

.u-wd-128 {
  width: 1.28rem !important;
}

.u-wd-129 {
  width: 1.29rem !important;
}

.u-wd-130 {
  width: 1.3rem !important;
}

.u-wd-131 {
  width: 1.31rem !important;
}

.u-wd-132 {
  width: 1.32rem !important;
}

.u-wd-133 {
  width: 1.33rem !important;
}

.u-wd-134 {
  width: 1.34rem !important;
}

.u-wd-135 {
  width: 1.35rem !important;
}

.u-wd-136 {
  width: 1.36rem !important;
}

.u-wd-137 {
  width: 1.37rem !important;
}

.u-wd-138 {
  width: 1.38rem !important;
}

.u-wd-139 {
  width: 1.39rem !important;
}

.u-wd-140 {
  width: 1.4rem !important;
}

.u-wd-141 {
  width: 1.41rem !important;
}

.u-wd-142 {
  width: 1.42rem !important;
}

.u-wd-143 {
  width: 1.43rem !important;
}

.u-wd-144 {
  width: 1.44rem !important;
}

.u-wd-145 {
  width: 1.45rem !important;
}

.u-wd-146 {
  width: 1.46rem !important;
}

.u-wd-147 {
  width: 1.47rem !important;
}

.u-wd-148 {
  width: 1.48rem !important;
}

.u-wd-149 {
  width: 1.49rem !important;
}

.u-wd-150 {
  width: 1.5rem !important;
}

.u-wd-151 {
  width: 1.51rem !important;
}

.u-wd-152 {
  width: 1.52rem !important;
}

.u-wd-153 {
  width: 1.53rem !important;
}

.u-wd-154 {
  width: 1.54rem !important;
}

.u-wd-155 {
  width: 1.55rem !important;
}

.u-wd-156 {
  width: 1.56rem !important;
}

.u-wd-157 {
  width: 1.57rem !important;
}

.u-wd-158 {
  width: 1.58rem !important;
}

.u-wd-159 {
  width: 1.59rem !important;
}

.u-wd-160 {
  width: 1.6rem !important;
}

.u-wd-161 {
  width: 1.61rem !important;
}

.u-wd-162 {
  width: 1.62rem !important;
}

.u-wd-163 {
  width: 1.63rem !important;
}

.u-wd-164 {
  width: 1.64rem !important;
}

.u-wd-165 {
  width: 1.65rem !important;
}

.u-wd-166 {
  width: 1.66rem !important;
}

.u-wd-167 {
  width: 1.67rem !important;
}

.u-wd-168 {
  width: 1.68rem !important;
}

.u-wd-169 {
  width: 1.69rem !important;
}

.u-wd-170 {
  width: 1.7rem !important;
}

.u-wd-171 {
  width: 1.71rem !important;
}

.u-wd-172 {
  width: 1.72rem !important;
}

.u-wd-173 {
  width: 1.73rem !important;
}

.u-wd-174 {
  width: 1.74rem !important;
}

.u-wd-175 {
  width: 1.75rem !important;
}

.u-wd-176 {
  width: 1.76rem !important;
}

.u-wd-177 {
  width: 1.77rem !important;
}

.u-wd-178 {
  width: 1.78rem !important;
}

.u-wd-179 {
  width: 1.79rem !important;
}

.u-wd-180 {
  width: 1.8rem !important;
}

.u-wd-181 {
  width: 1.81rem !important;
}

.u-wd-182 {
  width: 1.82rem !important;
}

.u-wd-183 {
  width: 1.83rem !important;
}

.u-wd-184 {
  width: 1.84rem !important;
}

.u-wd-185 {
  width: 1.85rem !important;
}

.u-wd-186 {
  width: 1.86rem !important;
}

.u-wd-187 {
  width: 1.87rem !important;
}

.u-wd-188 {
  width: 1.88rem !important;
}

.u-wd-189 {
  width: 1.89rem !important;
}

.u-wd-190 {
  width: 1.9rem !important;
}

.u-wd-191 {
  width: 1.91rem !important;
}

.u-wd-192 {
  width: 1.92rem !important;
}

.u-wd-193 {
  width: 1.93rem !important;
}

.u-wd-194 {
  width: 1.94rem !important;
}

.u-wd-195 {
  width: 1.95rem !important;
}

.u-wd-196 {
  width: 1.96rem !important;
}

.u-wd-197 {
  width: 1.97rem !important;
}

.u-wd-198 {
  width: 1.98rem !important;
}

.u-wd-199 {
  width: 1.99rem !important;
}

.u-wd-200 {
  width: 2rem !important;
}

.u-wd-201 {
  width: 2.01rem !important;
}

.u-wd-202 {
  width: 2.02rem !important;
}

.u-wd-203 {
  width: 2.03rem !important;
}

.u-wd-204 {
  width: 2.04rem !important;
}

.u-wd-205 {
  width: 2.05rem !important;
}

.u-wd-206 {
  width: 2.06rem !important;
}

.u-wd-207 {
  width: 2.07rem !important;
}

.u-wd-208 {
  width: 2.08rem !important;
}

.u-wd-209 {
  width: 2.09rem !important;
}

.u-wd-210 {
  width: 2.1rem !important;
}

.u-wd-211 {
  width: 2.11rem !important;
}

.u-wd-212 {
  width: 2.12rem !important;
}

.u-wd-213 {
  width: 2.13rem !important;
}

.u-wd-214 {
  width: 2.14rem !important;
}

.u-wd-215 {
  width: 2.15rem !important;
}

.u-wd-216 {
  width: 2.16rem !important;
}

.u-wd-217 {
  width: 2.17rem !important;
}

.u-wd-218 {
  width: 2.18rem !important;
}

.u-wd-219 {
  width: 2.19rem !important;
}

.u-wd-220 {
  width: 2.2rem !important;
}

.u-wd-221 {
  width: 2.21rem !important;
}

.u-wd-222 {
  width: 2.22rem !important;
}

.u-wd-223 {
  width: 2.23rem !important;
}

.u-wd-224 {
  width: 2.24rem !important;
}

.u-wd-225 {
  width: 2.25rem !important;
}

.u-wd-226 {
  width: 2.26rem !important;
}

.u-wd-227 {
  width: 2.27rem !important;
}

.u-wd-228 {
  width: 2.28rem !important;
}

.u-wd-229 {
  width: 2.29rem !important;
}

.u-wd-230 {
  width: 2.3rem !important;
}

.u-wd-231 {
  width: 2.31rem !important;
}

.u-wd-232 {
  width: 2.32rem !important;
}

.u-wd-233 {
  width: 2.33rem !important;
}

.u-wd-234 {
  width: 2.34rem !important;
}

.u-wd-235 {
  width: 2.35rem !important;
}

.u-wd-236 {
  width: 2.36rem !important;
}

.u-wd-237 {
  width: 2.37rem !important;
}

.u-wd-238 {
  width: 2.38rem !important;
}

.u-wd-239 {
  width: 2.39rem !important;
}

.u-wd-240 {
  width: 2.4rem !important;
}

.u-wd-241 {
  width: 2.41rem !important;
}

.u-wd-242 {
  width: 2.42rem !important;
}

.u-wd-243 {
  width: 2.43rem !important;
}

.u-wd-244 {
  width: 2.44rem !important;
}

.u-wd-245 {
  width: 2.45rem !important;
}

.u-wd-246 {
  width: 2.46rem !important;
}

.u-wd-247 {
  width: 2.47rem !important;
}

.u-wd-248 {
  width: 2.48rem !important;
}

.u-wd-249 {
  width: 2.49rem !important;
}

.u-wd-250 {
  width: 2.5rem !important;
}

.u-wd-251 {
  width: 2.51rem !important;
}

.u-wd-252 {
  width: 2.52rem !important;
}

.u-wd-253 {
  width: 2.53rem !important;
}

.u-wd-254 {
  width: 2.54rem !important;
}

.u-wd-255 {
  width: 2.55rem !important;
}

.u-wd-256 {
  width: 2.56rem !important;
}

.u-wd-257 {
  width: 2.57rem !important;
}

.u-wd-258 {
  width: 2.58rem !important;
}

.u-wd-259 {
  width: 2.59rem !important;
}

.u-wd-260 {
  width: 2.6rem !important;
}

.u-wd-261 {
  width: 2.61rem !important;
}

.u-wd-262 {
  width: 2.62rem !important;
}

.u-wd-263 {
  width: 2.63rem !important;
}

.u-wd-264 {
  width: 2.64rem !important;
}

.u-wd-265 {
  width: 2.65rem !important;
}

.u-wd-266 {
  width: 2.66rem !important;
}

.u-wd-267 {
  width: 2.67rem !important;
}

.u-wd-268 {
  width: 2.68rem !important;
}

.u-wd-269 {
  width: 2.69rem !important;
}

.u-wd-270 {
  width: 2.7rem !important;
}

.u-wd-271 {
  width: 2.71rem !important;
}

.u-wd-272 {
  width: 2.72rem !important;
}

.u-wd-273 {
  width: 2.73rem !important;
}

.u-wd-274 {
  width: 2.74rem !important;
}

.u-wd-275 {
  width: 2.75rem !important;
}

.u-wd-276 {
  width: 2.76rem !important;
}

.u-wd-277 {
  width: 2.77rem !important;
}

.u-wd-278 {
  width: 2.78rem !important;
}

.u-wd-279 {
  width: 2.79rem !important;
}

.u-wd-280 {
  width: 2.8rem !important;
}

.u-wd-281 {
  width: 2.81rem !important;
}

.u-wd-282 {
  width: 2.82rem !important;
}

.u-wd-283 {
  width: 2.83rem !important;
}

.u-wd-284 {
  width: 2.84rem !important;
}

.u-wd-285 {
  width: 2.85rem !important;
}

.u-wd-286 {
  width: 2.86rem !important;
}

.u-wd-287 {
  width: 2.87rem !important;
}

.u-wd-288 {
  width: 2.88rem !important;
}

.u-wd-289 {
  width: 2.89rem !important;
}

.u-wd-290 {
  width: 2.9rem !important;
}

.u-wd-291 {
  width: 2.91rem !important;
}

.u-wd-292 {
  width: 2.92rem !important;
}

.u-wd-293 {
  width: 2.93rem !important;
}

.u-wd-294 {
  width: 2.94rem !important;
}

.u-wd-295 {
  width: 2.95rem !important;
}

.u-wd-296 {
  width: 2.96rem !important;
}

.u-wd-297 {
  width: 2.97rem !important;
}

.u-wd-298 {
  width: 2.98rem !important;
}

.u-wd-299 {
  width: 2.99rem !important;
}

.u-wd-300 {
  width: 3rem !important;
}

.u-mb-0 {
  margin-bottom: 0rem !important;
}

.u-mb-1 {
  margin-bottom: 0.01rem !important;
}

.u-mb-2 {
  margin-bottom: 0.02rem !important;
}

.u-mb-3 {
  margin-bottom: 0.03rem !important;
}

.u-mb-4 {
  margin-bottom: 0.04rem !important;
}

.u-mb-5 {
  margin-bottom: 0.05rem !important;
}

.u-mb-6 {
  margin-bottom: 0.06rem !important;
}

.u-mb-7 {
  margin-bottom: 0.07rem !important;
}

.u-mb-8 {
  margin-bottom: 0.08rem !important;
}

.u-mb-9 {
  margin-bottom: 0.09rem !important;
}

.u-mb-10 {
  margin-bottom: 0.1rem !important;
}

.u-mb-11 {
  margin-bottom: 0.11rem !important;
}

.u-mb-12 {
  margin-bottom: 0.12rem !important;
}

.u-mb-13 {
  margin-bottom: 0.13rem !important;
}

.u-mb-14 {
  margin-bottom: 0.14rem !important;
}

.u-mb-15 {
  margin-bottom: 0.15rem !important;
}

.u-mb-16 {
  margin-bottom: 0.16rem !important;
}

.u-mb-17 {
  margin-bottom: 0.17rem !important;
}

.u-mb-18 {
  margin-bottom: 0.18rem !important;
}

.u-mb-19 {
  margin-bottom: 0.19rem !important;
}

.u-mb-20 {
  margin-bottom: 0.2rem !important;
}

.u-mb-21 {
  margin-bottom: 0.21rem !important;
}

.u-mb-22 {
  margin-bottom: 0.22rem !important;
}

.u-mb-23 {
  margin-bottom: 0.23rem !important;
}

.u-mb-24 {
  margin-bottom: 0.24rem !important;
}

.u-mb-25 {
  margin-bottom: 0.25rem !important;
}

.u-mb-26 {
  margin-bottom: 0.26rem !important;
}

.u-mb-27 {
  margin-bottom: 0.27rem !important;
}

.u-mb-28 {
  margin-bottom: 0.28rem !important;
}

.u-mb-29 {
  margin-bottom: 0.29rem !important;
}

.u-mb-30 {
  margin-bottom: 0.3rem !important;
}

.u-mb-31 {
  margin-bottom: 0.31rem !important;
}

.u-mb-32 {
  margin-bottom: 0.32rem !important;
}

.u-mb-33 {
  margin-bottom: 0.33rem !important;
}

.u-mb-34 {
  margin-bottom: 0.34rem !important;
}

.u-mb-35 {
  margin-bottom: 0.35rem !important;
}

.u-mb-36 {
  margin-bottom: 0.36rem !important;
}

.u-mb-37 {
  margin-bottom: 0.37rem !important;
}

.u-mb-38 {
  margin-bottom: 0.38rem !important;
}

.u-mb-39 {
  margin-bottom: 0.39rem !important;
}

.u-mb-40 {
  margin-bottom: 0.4rem !important;
}

.u-mb-41 {
  margin-bottom: 0.41rem !important;
}

.u-mb-42 {
  margin-bottom: 0.42rem !important;
}

.u-mb-43 {
  margin-bottom: 0.43rem !important;
}

.u-mb-44 {
  margin-bottom: 0.44rem !important;
}

.u-mb-45 {
  margin-bottom: 0.45rem !important;
}

.u-mb-46 {
  margin-bottom: 0.46rem !important;
}

.u-mb-47 {
  margin-bottom: 0.47rem !important;
}

.u-mb-48 {
  margin-bottom: 0.48rem !important;
}

.u-mb-49 {
  margin-bottom: 0.49rem !important;
}

.u-mb-50 {
  margin-bottom: 0.5rem !important;
}

.u-mb-51 {
  margin-bottom: 0.51rem !important;
}

.u-mb-52 {
  margin-bottom: 0.52rem !important;
}

.u-mb-53 {
  margin-bottom: 0.53rem !important;
}

.u-mb-54 {
  margin-bottom: 0.54rem !important;
}

.u-mb-55 {
  margin-bottom: 0.55rem !important;
}

.u-mb-56 {
  margin-bottom: 0.56rem !important;
}

.u-mb-57 {
  margin-bottom: 0.57rem !important;
}

.u-mb-58 {
  margin-bottom: 0.58rem !important;
}

.u-mb-59 {
  margin-bottom: 0.59rem !important;
}

.u-mb-60 {
  margin-bottom: 0.6rem !important;
}

.u-mb-61 {
  margin-bottom: 0.61rem !important;
}

.u-mb-62 {
  margin-bottom: 0.62rem !important;
}

.u-mb-63 {
  margin-bottom: 0.63rem !important;
}

.u-mb-64 {
  margin-bottom: 0.64rem !important;
}

.u-mb-65 {
  margin-bottom: 0.65rem !important;
}

.u-mb-66 {
  margin-bottom: 0.66rem !important;
}

.u-mb-67 {
  margin-bottom: 0.67rem !important;
}

.u-mb-68 {
  margin-bottom: 0.68rem !important;
}

.u-mb-69 {
  margin-bottom: 0.69rem !important;
}

.u-mb-70 {
  margin-bottom: 0.7rem !important;
}

.u-mb-71 {
  margin-bottom: 0.71rem !important;
}

.u-mb-72 {
  margin-bottom: 0.72rem !important;
}

.u-mb-73 {
  margin-bottom: 0.73rem !important;
}

.u-mb-74 {
  margin-bottom: 0.74rem !important;
}

.u-mb-75 {
  margin-bottom: 0.75rem !important;
}

.u-mb-76 {
  margin-bottom: 0.76rem !important;
}

.u-mb-77 {
  margin-bottom: 0.77rem !important;
}

.u-mb-78 {
  margin-bottom: 0.78rem !important;
}

.u-mb-79 {
  margin-bottom: 0.79rem !important;
}

.u-mb-80 {
  margin-bottom: 0.8rem !important;
}

.u-mb-81 {
  margin-bottom: 0.81rem !important;
}

.u-mb-82 {
  margin-bottom: 0.82rem !important;
}

.u-mb-83 {
  margin-bottom: 0.83rem !important;
}

.u-mb-84 {
  margin-bottom: 0.84rem !important;
}

.u-mb-85 {
  margin-bottom: 0.85rem !important;
}

.u-mb-86 {
  margin-bottom: 0.86rem !important;
}

.u-mb-87 {
  margin-bottom: 0.87rem !important;
}

.u-mb-88 {
  margin-bottom: 0.88rem !important;
}

.u-mb-89 {
  margin-bottom: 0.89rem !important;
}

.u-mb-90 {
  margin-bottom: 0.9rem !important;
}

.u-mb-91 {
  margin-bottom: 0.91rem !important;
}

.u-mb-92 {
  margin-bottom: 0.92rem !important;
}

.u-mb-93 {
  margin-bottom: 0.93rem !important;
}

.u-mb-94 {
  margin-bottom: 0.94rem !important;
}

.u-mb-95 {
  margin-bottom: 0.95rem !important;
}

.u-mb-96 {
  margin-bottom: 0.96rem !important;
}

.u-mb-97 {
  margin-bottom: 0.97rem !important;
}

.u-mb-98 {
  margin-bottom: 0.98rem !important;
}

.u-mb-99 {
  margin-bottom: 0.99rem !important;
}

.u-mb-100 {
  margin-bottom: 1rem !important;
}

:root {
  --white: #ffffff;
  --black: #000000;
  --text-color: #464646;
  --dark-red-color: #8E0909;
  --maomao-color: #22A67E;
  --jinshi-color: #6B2792;
  --gold-color: #D2B211;
}

.c-annotation {
  color: var(--black);
  font-family: var(--font-sans);
  font-size: 0.1rem;
  font-weight: var(--font-weight-regular);
  line-height: 0.18rem;
  letter-spacing: 0.05em;
}

.c-info-box {
  --theme-color: var(--maomao-color);
  position: relative;
  width: 4rem;
  margin-inline: auto;
  background-color: var(--white);
  background-repeat: repeat-x, repeat-x;
  background-position: left top 0.0773rem, left bottom 0.0774rem;
  color: var(--black);
}
.c-info-box--green {
  padding: 0.36rem 0.17rem 0.54rem 0.16rem;
  --theme-color: var(--maomao-color);
  background-image: url("../images/info-box-frame-green.svg"), url("../images/info-box-frame-green.svg");
}
.c-info-box--green .c-info-box__title {
  width: 1.6rem;
}
.c-info-box--purple {
  padding: 0.3417rem 0.2rem 0.3rem 0.2rem;
  --theme-color: var(--jinshi-color);
  background-image: url("../images/info-box-frame-purple.svg"), url("../images/info-box-frame-purple.svg");
}
.c-info-box--purple .c-info-box__title {
  width: 0.99rem;
}
.c-info-box__title {
  display: block;
  height: auto;
  margin-inline: auto;
}
.c-info-box__steps {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.c-info-box__step {
  display: flex;
  align-items: center;
  gap: 0.16rem;
}
.c-info-box__step-label {
  display: block;
  width: 0.7464rem;
  height: auto;
  flex-shrink: 0;
}
.c-info-box__step-text {
  color: var(--black);
  font-family: var(--font-family);
  font-size: 0.17rem;
  font-weight: var(--font-weight-medium);
  line-height: 0.3165rem;
}
.c-info-box__text {
  margin: 0 0 0.1rem 0.13rem;
  font-size: 0.17rem;
  font-weight: var(--font-weight-medium);
  line-height: 0.3165rem;
  text-align: left;
}
.c-info-box__link {
  display: block;
  color: var(--theme-color);
  font-family: var(--font-sans);
  font-size: 0.1669rem;
  font-weight: var(--font-weight-regular);
  text-align: center;
  text-decoration: underline;
  line-height: 0.2302rem;
  letter-spacing: 0.02em;
  text-underline-offset: 0.02rem;
}
.c-info-box__annotation {
  display: block;
  width: 3.61rem;
  color: var(--black);
  font-family: var(--font-sans);
  font-size: 0.1245rem;
  font-weight: var(--font-weight-regular);
  line-height: 0.2002rem;
  letter-spacing: 0.02em;
  text-align: left;
}

.c-framed-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  background-repeat: no-repeat;
  background-position: center;
  text-decoration: none;
}
.c-framed-box--green {
  background-color: var(--maomao-color);
}
.c-framed-box--purple {
  background-color: var(--jinshi-color);
}
.c-framed-box--nav {
  width: 1.9rem;
  height: 1rem;
  background-image: url("../images/gold-frame.svg");
  background-size: 100% 95%;
  cursor: pointer;
  transition: opacity 0.3s;
}
.c-framed-box--nav:hover {
  opacity: 0.8;
}
.c-framed-box--nav-1 .c-framed-box__title {
  width: 1.35rem;
  padding-bottom: 0.1rem;
}
.c-framed-box--nav-1 .c-framed-box__arrow {
  left: 50%;
  bottom: 0.1715rem;
  transform: translateX(-50%) rotate(45deg);
}
.c-framed-box--nav-2 .c-framed-box__title {
  width: 1.23rem;
  padding-bottom: 0.06rem;
}
.c-framed-box--nav-2 .c-framed-box__arrow {
  left: 50%;
  bottom: 0.1806rem;
  transform: translateX(-50%) rotate(45deg);
}
.c-framed-box--part-1 {
  width: 3.9rem;
  height: 0.98rem;
  background-image: url("../images/gold-frame-part-1.svg");
  background-size: 100% 97%;
}
.c-framed-box--part-1 .c-framed-box__title {
  width: 3rem;
}
.c-framed-box--part-1 .c-framed-box__label {
  width: 0.6982rem;
  top: -0.13rem;
}
.c-framed-box--part-2 {
  width: 3.9rem;
  height: 0.78rem;
  background-image: url("../images/gold-frame-part-2.svg");
  background-size: 100% 96%;
}
.c-framed-box--part-2 .c-framed-box__title {
  width: 2.8rem;
}
.c-framed-box--part-2 .c-framed-box__label {
  width: 0.6982rem;
  top: -0.13rem;
}
.c-framed-box__title {
  display: block;
  height: auto;
  margin-inline: auto;
}
.c-framed-box__label {
  position: absolute;
  left: 50%;
  display: block;
  height: auto;
  transform: translateX(-50%);
}
.c-framed-box__arrow {
  position: absolute;
  display: block;
  width: 0.076rem;
  height: 0.076rem;
  border-right: 0.019rem solid var(--white);
  border-bottom: 0.019rem solid var(--white);
  transform: rotate(45deg);
}
.c-framed-box--sidebar-nav {
  width: var(--side-width);
  height: auto;
  aspect-ratio: 341/72;
  background-image: url("../images/gold-frame-wide.svg");
  background-size: 100% 92%;
  transition: opacity 0.3s;
}
.c-framed-box--sidebar-nav:hover {
  opacity: 0.8;
}
.c-framed-box--sidebar-nav .c-framed-box__arrow {
  top: 50%;
  right: calc(var(--side-width) * 32.16 / 341);
  width: calc(var(--side-width) * 7.6 / 341);
  height: calc(var(--side-width) * 7.6 / 341);
  border-right: calc(var(--side-width) * 1.9 / 341) solid var(--white);
  border-bottom: calc(var(--side-width) * 1.9 / 341) solid var(--white);
  transform: translateY(-60%) rotate(45deg);
}
.c-framed-box__sidebar-text {
  display: block;
  height: auto;
}
.c-framed-box__sidebar-text--1 {
  width: calc(var(--side-width) * 241 / 341);
}
.c-framed-box__sidebar-text--2 {
  width: calc(var(--side-width) * 185 / 341);
}

.p-intro__inner {
  background-image: url("../images/bg-orange.webp");
  background-repeat: repeat;
  background-position: top left;
  background-size: auto;
}
.p-intro__text {
  padding: 0.23rem 0.35rem 0;
  color: var(--black);
  font-family: var(--font-family);
  font-size: 0.16rem;
  font-weight: var(--font-weight-bold);
  line-height: 0.28rem;
  letter-spacing: 0.02em;
  text-align: center;
}
.p-intro__highlight {
  color: var(--dark-red-color);
  font-weight: var(--font-weight-black);
}
.p-intro__nav {
  display: flex;
  gap: 0.2rem;
  padding-inline: 0.15rem;
}

.p-in-train-content__inner {
  background-image: url("../images/bg-green.webp");
  background-repeat: repeat;
  background-position: top left;
  background-size: auto;
}
.p-in-train-content__header {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 0.44rem;
  background-image: url("../images/in-train-content-header-bg.webp");
  background-repeat: round;
  background-position: top left;
  background-size: auto;
}
.p-in-train-content__header-text {
  display: block;
  width: 2.6rem;
  height: auto;
}
.p-in-train-content__description {
  margin-inline: auto;
  color: var(--black);
  font-family: var(--font-family);
  font-weight: var(--font-weight-bold);
  line-height: 0.28rem;
  letter-spacing: 0.03em;
  text-align: center;
}
.p-in-train-content__description--narrow {
  width: 2.31rem;
}
.p-in-train-content__description--wide {
  width: 3.18rem;
}
.p-in-train-content__text {
  font-size: 0.16rem;
}
.p-in-train-content__subtext {
  font-size: 0.14rem;
}
.p-in-train-content__box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 3.9206rem;
  height: 4.5855rem;
  margin-inline: auto;
  background-color: var(--white);
}
.p-in-train-content__corner {
  position: absolute;
  display: block;
  width: 0.26rem;
  height: auto;
  pointer-events: none;
}
.p-in-train-content__corner--tr {
  top: 0.08rem;
  right: 0.08rem;
}
.p-in-train-content__corner--tl {
  top: 0.08rem;
  left: 0.08rem;
  transform: scaleX(-1);
}
.p-in-train-content__corner--br {
  bottom: 0.08rem;
  right: 0.08rem;
  transform: scaleY(-1);
}
.p-in-train-content__corner--bl {
  bottom: 0.08rem;
  left: 0.08rem;
  transform: scale(-1, -1);
}
.p-in-train-content__box-title {
  display: block;
  width: 2.96rem;
  height: auto;
  padding-top: 0.1rem;
}
.p-in-train-content__box-subtitle {
  display: block;
  width: 1.91rem;
  height: auto;
}
.p-in-train-content__box-image-sections {
  display: flex;
  gap: 0.1196rem;
  margin-inline: auto;
}
.p-in-train-content__box-image-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1524rem;
}
.p-in-train-content__box-img {
  display: block;
  width: 1.76rem;
  height: auto;
}
.p-in-train-content__box-img-text {
  display: block;
  width: 0.95rem;
  height: auto;
}
.p-in-train-content__extra-notes {
  color: var(--black);
  font-family: var(--font-sans);
  font-weight: var(--font-weight-regular);
  text-align: center;
}
.p-in-train-content__extra-notes--short {
  font-size: 0.1362rem;
  line-height: 0.2599rem;
}
.p-in-train-content__extra-notes--long {
  display: block;
  width: 3.5rem;
  margin-inline: auto;
  font-size: 0.11rem;
  line-height: 0.18rem;
  letter-spacing: 0.03em;
}
.p-in-train-content__extra-notes-annotation {
  width: 3.6rem;
  margin-left: 0.2rem;
}
.p-in-train-content__all-vol {
  display: block;
  width: 3.64rem;
  height: auto;
  margin-inline: auto;
}
.p-in-train-content__coming-soon-btn {
  display: block;
  width: 3.9rem;
  height: auto;
  margin-inline: auto;
}
.p-in-train-content__coming-soon-annotation {
  display: block;
  width: 3.88rem;
  margin-left: 0.23rem;
}
.p-in-train-content__general-annotation {
  width: 3.88rem;
  margin-left: 0.23rem;
}
.p-in-train-content .p-annotation-toggle {
  width: 3.88rem;
  margin-left: 0.23rem;
}
.p-in-train-content .p-annotation-toggle__content {
  margin-bottom: 0.15rem;
  color: var(--black);
  font-family: var(--font-sans);
  font-size: 0.1rem;
  line-height: 0.18rem;
  letter-spacing: 0.05em;
}
.p-in-train-content .p-annotation-toggle__button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.12rem;
  width: 100%;
  padding: 0;
  color: var(--black);
  font: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.p-in-train-content .p-annotation-toggle__label {
  font-family: var(--font-sans);
  font-size: 0.13rem;
  font-weight: var(--font-weight-bold);
  line-height: 0.01rem;
}
.p-in-train-content .p-annotation-toggle__icon {
  position: relative;
  display: block;
  width: 0.15rem;
  height: 0.15rem;
  background-color: var(--black);
  border-radius: 50%;
}
.p-in-train-content .p-annotation-toggle__icon::before, .p-in-train-content .p-annotation-toggle__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.1rem;
  height: 0.02rem;
  background-color: var(--white);
  border-radius: 999px;
  transform: translate(-50%, -50%);
}
.p-in-train-content .p-annotation-toggle__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.p-in-train-content .p-annotation-toggle.is-open .p-annotation-toggle__icon::after {
  display: none;
}
.p-in-train-content .p-annotation-toggle:not(.is-open) .p-annotation-toggle__content {
  display: none;
}

.p-bonus-content__inner {
  background-image: url("../images/bg-purple.webp");
  background-repeat: repeat;
  background-position: top left;
  background-size: auto;
}
.p-bonus-content__header {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 0.44rem;
  background-image: url("../images/bonus-content-header-bg.webp");
  background-repeat: round;
  background-position: top left;
  background-size: auto;
}
.p-bonus-content__header-text {
  display: block;
  width: 2.06rem;
  height: auto;
}
.p-bonus-content__description {
  margin-inline: auto;
  color: var(--black);
  font-family: var(--font-family);
  font-size: 0.16rem;
  font-weight: var(--font-weight-bold);
  line-height: 0.28rem;
  letter-spacing: 0.03em;
  text-align: center;
}
.p-bonus-content__content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.p-bonus-content__content--horizontal .p-bonus-content__img {
  width: 2.94rem;
}
.p-bonus-content__content--vertical .p-bonus-content__img {
  width: 2.06rem;
}
.p-bonus-content__title {
  display: block;
  margin-bottom: 0.09rem;
  color: var(--black);
  font-family: var(--font-family);
  font-size: 0.16rem;
  font-weight: var(--font-weight-bold);
  text-align: center;
}
.p-bonus-content__img {
  display: block;
  height: auto;
}
.p-bonus-content__main-annotation {
  text-align: center;
}
.p-bonus-content__print-period {
  display: block;
  color: var(--black);
  font-family: var(--font-sans);
  font-size: 0.1445rem;
  font-weight: var(--font-weight-regular);
  line-height: 0.2002rem;
  letter-spacing: 0.02em;
  text-align: left;
  margin-left: 0.18rem;
}
.p-bonus-content__toggle {
  width: 3.69rem;
  margin-inline: auto;
}
.p-bonus-content__toggle-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.06rem 0.3rem 0.06rem 0;
  color: var(--white);
  background-color: var(--jinshi-color);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.p-bonus-content__toggle-label {
  font-family: var(--font-family-serif);
  font-size: 0.1929rem;
  font-weight: var(--font-weight-bold);
  line-height: 0.3547rem;
  letter-spacing: 0.02em;
  text-align: center;
}
.p-bonus-content__toggle-icon {
  position: absolute;
  top: 50%;
  right: 0.18rem;
  display: block;
  width: 0.1805rem;
  height: 0.1805rem;
  background-color: var(--white);
  border-radius: 50%;
  transform: translateY(-50%);
}
.p-bonus-content__toggle-icon::before, .p-bonus-content__toggle-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.12rem;
  height: 0.02rem;
  background-color: var(--jinshi-color);
  border-radius: 999px;
  transform: translate(-50%, -50%);
}
.p-bonus-content__toggle-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.p-bonus-content__toggle.is-open .p-bonus-content__toggle-icon::after {
  display: none;
}
.p-bonus-content__toggle:not(.is-open) .p-bonus-content__toggle-content {
  display: none;
}
.p-bonus-content__how-to-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.p-bonus-content__how-to-group + .p-bonus-content__how-to-group {
  margin-top: 0.491rem;
}
.p-bonus-content__how-to-heading-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 0.2396rem;
}
.p-bonus-content__how-to-heading {
  display: block;
  color: var(--jinshi-color);
  font-family: var(--font-family-serif);
  font-size: 0.2295rem;
  font-weight: var(--font-weight-bold);
  line-height: 0.2754rem;
  text-align: center;
  white-space: nowrap;
}
.p-bonus-content__how-to-heading--train {
  letter-spacing: 0.08em;
}
.p-bonus-content__how-to-heading--store {
  letter-spacing: -0.01em;
}
.p-bonus-content__how-to-heading-line {
  display: block;
  height: auto;
  margin-top: 0.02rem;
}
.p-bonus-content__how-to-heading-line--short {
  width: 2.43rem;
}
.p-bonus-content__how-to-heading-line--long {
  width: 3.39rem;
}
.p-bonus-content__step {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.p-bonus-content__step-label {
  display: block;
  width: 1.15rem;
  height: auto;
}
.p-bonus-content__step-text {
  display: block;
  margin-top: 0.05rem;
  color: var(--black);
  font-family: var(--font-family-serif);
  font-size: 0.17rem;
  font-weight: var(--font-weight-bold);
  line-height: 0.2754rem;
  letter-spacing: 0.02em;
  text-align: center;
}
.p-bonus-content__step-text--strong {
  font-size: 0.1721rem;
}
.p-bonus-content__step-note {
  display: block;
  width: 3.87rem;
  color: var(--jinshi-color);
  font-family: var(--font-sans);
  font-size: 0.1492rem;
  font-weight: var(--font-weight-bold);
  line-height: 0.2754rem;
  letter-spacing: 0.02em;
  text-align: center;
}
.p-bonus-content__step-img {
  display: block;
  width: 3.4711rem;
  height: auto;
}
.p-bonus-content__how-to-notes {
  display: block;
  width: 3.5807rem;
  margin-left: 0.05rem;
  color: var(--black);
  font-family: var(--font-sans);
  font-size: 0.1148rem;
  font-weight: var(--font-weight-regular);
  line-height: 0.2123rem;
  letter-spacing: 0.02em;
}
.p-bonus-content__how-to-notes a {
  text-decoration: underline;
  text-underline-offset: 0.02rem;
}

.p-movie-content__inner {
  background-image: url("../images/bg-gold.webp");
  background-repeat: repeat;
  background-position: top left;
  background-size: auto;
}
.p-movie-content__header {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 0.61rem;
  background-image: url("../images/movie-content-header-bg.webp");
  background-repeat: round;
  background-position: top left;
  background-size: auto;
}
.p-movie-content__header-text {
  display: block;
  width: 3.22rem;
  height: auto;
}
.p-movie-content__image {
  display: block;
  width: 4rem;
  height: auto;
  margin-inline: auto;
}
.p-movie-content__annotation {
  margin: 0.06rem 0 0 0.15rem;
}

.p-sidemenu {
  width: 100%;
}
.p-sidemenu__inner {
  width: var(--side-width);
}
.p-sidemenu__sidebar-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: calc(var(--side-width) * 8.8 / 341);
  white-space: nowrap;
}
.p-sidemenu__sidebar-heading-text {
  display: block;
  width: calc(var(--side-width) * 125 / 341);
  height: auto;
  margin-inline: calc(var(--side-width) * 5.2 / 341);
}
.p-sidemenu__sidebar-heading-decoration {
  color: var(--gold-color);
  font-size: 0.08rem;
  line-height: 1;
}
.p-sidemenu__sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: calc(var(--side-width) * 14.3 / 341);
}