/* ========================================
   Variables
======================================== */
/* ========================================
   Mixins
======================================== */
@keyframes shutter_landscape {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}
@keyframes shutter_landscape_reverse {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
/* ========================================
   Page Specific Styles
======================================== */
html {
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
  color: #4b4b4b;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", sans-serif;
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

:target {
  scroll-margin-top: 90px;
}

a,
button {
  transition: all 0.3s ease;
}

@media (any-hover: hover) {
  a:hover,
  button:hover {
    opacity: 0.6;
  }
}
img {
  display: block;
  width: 100%;
  height: auto;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

/* ========================================
     Utility Classes
  ======================================== */
.sp {
  display: none;
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .sp {
    display: block !important;
  }
}

@media screen and (min-width: 375px) and (max-width: 750px) {
  .pc {
    display: none !important;
  }
}

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s, transform 1s;
}
.fade-in.is-show {
  opacity: 1;
  transform: translateY(0);
  transition-delay: var(--delay, 0s);
}

/* ========================================
     Layout
  ======================================== */
#wrapper {
  max-width: 1400px;
  width: 100%;
  height: auto;
  margin: 0 auto;
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  #wrapper {
    max-width: 750px;
    width: 100%;
    height: auto;
    margin: 0 auto;
  }
}

/* ========================================
     Components
  ======================================== */
.hero {
  position: relative;
}
.hero__image {
  display: block;
  aspect-ratio: 1400/615;
  clip-path: inset(0 50% 0 50%);
  transition: clip-path 0.6s cubic-bezier(0.37, 0, 0.63, 1);
  transition-delay: var(--delay, 0s);
  will-change: clip-path;
}
.hero__image.is-animated {
  clip-path: inset(0);
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .hero__image {
    aspect-ratio: 750/1000;
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.6s cubic-bezier(0.37, 0, 0.63, 1);
    transition-delay: var(--delay, 0s);
    will-change: clip-path;
  }
  .hero__image.is-animated {
    clip-path: inset(0);
  }
}
.hero__title--label {
  position: absolute;
  top: min(15.9285714286vw, 223px);
  right: min(20.2857142857vw, 284px);
  width: min(26.1428571429vw, 366px);
  transform: rotate(-5deg);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.6s cubic-bezier(0.37, 0, 0.63, 1);
  transition-delay: var(--delay, 0s);
  will-change: clip-path;
}
.hero__title--label.is-animated {
  clip-path: inset(0);
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .hero__title--label {
    top: auto;
    bottom: min(21.8666666667vw, 164px);
    left: min(0vw, 0px);
    width: min(66.2666666667vw, 497px);
    transform: rotate(0deg);
  }
}
.hero__title--01 {
  position: absolute;
  top: min(20.4285714286vw, 286px);
  right: min(12.3571428571vw, 173px);
  width: min(24.9285714286vw, 349px);
  clip-path: inset(0 0 0 100%);
  transition: clip-path 0.6s cubic-bezier(0.37, 0, 0.63, 1);
  transition-delay: var(--delay, 0s);
  will-change: clip-path;
}
.hero__title--01.is-animated {
  clip-path: inset(0);
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .hero__title--01 {
    top: auto;
    bottom: min(19.6vw, 147px);
    left: min(16.9333333333vw, 127px);
    width: min(58.1333333333vw, 436px);
  }
}
.hero__title--02 {
  position: absolute;
  top: min(23.6428571429vw, 331px);
  right: min(8.7142857143vw, 122px);
  width: min(32.2142857143vw, 451px);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.6s cubic-bezier(0.37, 0, 0.63, 1);
  transition-delay: var(--delay, 0s);
  will-change: clip-path;
}
.hero__title--02.is-animated {
  clip-path: inset(0);
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .hero__title--02 {
    top: auto;
    left: min(16.9333333333vw, 127px);
    width: min(75.2vw, 564px);
    bottom: min(8.1333333333vw, 61px);
  }
}

.menu-feature {
  padding-top: min(5.7142857143vw, 80px);
  padding-bottom: min(14.2857142857vw, 200px);
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .menu-feature {
    padding-top: min(8vw, 60px);
    padding-bottom: min(26.6666666667vw, 200px);
  }
}
.menu-feature__heading {
  width: min(34.1428571429vw, 478px);
  margin: 0 auto;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.6s cubic-bezier(0.37, 0, 0.63, 1);
  transition-delay: var(--delay, 0s);
  will-change: clip-path;
}
.menu-feature__heading.is-animated {
  clip-path: inset(0);
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .menu-feature__heading {
    width: min(70.9333333333vw, 532px);
  }
}
.menu-feature__lead {
  margin-top: min(1.9285714286vw, 27px);
  font-size: min(1.1428571429vw, 16px);
  text-align: center;
  line-height: 1.875;
  letter-spacing: 0.05em;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", sans-serif;
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .menu-feature__lead {
    margin-top: min(5.4666666667vw, 41px);
    font-size: min(3.4666666667vw, 26px);
    line-height: 1.69;
    letter-spacing: 0;
  }
}
.menu-feature__list {
  margin-top: min(5.6428571429vw, 79px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: min(0.7142857143vw, 10px);
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .menu-feature__list {
    margin-top: min(10.4vw, 78px);
    display: flex;
    justify-content: center;
    -moz-column-gap: min(2vw, 15px);
         column-gap: min(2vw, 15px);
    row-gap: min(3.8666666667vw, 29px);
  }
}
.menu-feature__item {
  width: min(13.7857142857vw, 193px);
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .menu-feature__item {
    width: min(40vw, 300px);
  }
}

.necklace-feature {
  padding-bottom: min(13.5714285714vw, 190px);
}
.necklace-feature__heading {
  position: relative;
  height: min(10.4285714286vw, 146px);
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .necklace-feature__heading {
    height: min(29.6vw, 222px);
  }
}
.necklace-feature__heading-image {
  position: absolute;
  display: block;
}
.necklace-feature__heading-image img {
  width: 100%;
  height: auto;
}
.necklace-feature__heading-image--01 {
  left: min(31.8571428571vw, 446px);
  width: min(7.4285714286vw, 104px);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.6s cubic-bezier(0.37, 0, 0.63, 1);
  transition-delay: var(--delay, 0s);
  will-change: clip-path;
}
.necklace-feature__heading-image--01.is-animated {
  clip-path: inset(0);
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .necklace-feature__heading-image--01 {
    left: min(6.1333333333vw, 46px);
    width: min(17.3333333333vw, 130px);
  }
}
.necklace-feature__heading-image--02 {
  top: min(3.8571428571vw, 54px);
  left: min(40.2142857143vw, 563px);
  width: min(27.9285714286vw, 391px);
  clip-path: inset(0 0 0 100%);
  transition: clip-path 0.6s cubic-bezier(0.37, 0, 0.63, 1);
  transition-delay: var(--delay, 0s);
  will-change: clip-path;
}
.necklace-feature__heading-image--02.is-animated {
  clip-path: inset(0);
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .necklace-feature__heading-image--02 {
    top: min(18.6666666667vw, 140px);
    left: min(6vw, 45px);
    width: min(65.0666666667vw, 488px);
  }
}
.necklace-feature__heading-image--03 {
  top: min(1.2142857143vw, 17px);
  right: min(28.5714285714vw, 400px);
  width: min(3.5714285714vw, 50px);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.6s cubic-bezier(0.37, 0, 0.63, 1);
  transition-delay: var(--delay, 0s);
  will-change: clip-path;
}
.necklace-feature__heading-image--03.is-animated {
  clip-path: inset(0);
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .necklace-feature__heading-image--03 {
    top: min(12.5333333333vw, 94px);
    right: min(20.6666666667vw, 155px);
    width: min(8.2666666667vw, 62px);
  }
}
.necklace-feature__text {
  position: relative;
  width: min(42.8571428571vw, 600px);
  margin: 0 auto;
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .necklace-feature__text {
    width: min(90.6666666667vw, 680px);
  }
}
.necklace-feature__text-image {
  display: block;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.6s cubic-bezier(0.37, 0, 0.63, 1);
  transition-delay: var(--delay, 0s);
  will-change: clip-path;
}
.necklace-feature__text-image.is-animated {
  clip-path: inset(0);
}
.necklace-feature__text--01 {
  display: block;
  position: absolute;
  width: min(2vw, 28px);
  right: max(-6.2857142857vw, -88px);
  top: min(17.7142857143vw, 248px);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.6s cubic-bezier(0.37, 0, 0.63, 1);
  transition-delay: var(--delay, 0s);
  will-change: clip-path;
}
.necklace-feature__text--01.is-animated {
  clip-path: inset(0);
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .necklace-feature__text--01 {
    top: auto;
    bottom: max(-37.8666666667vw, -284px);
    right: min(6.8vw, 51px);
    width: min(4.6666666667vw, 35px);
  }
}
.necklace-feature__text--02 {
  display: block;
  position: absolute;
  width: min(2vw, 28px);
  right: max(-3.4285714286vw, -48px);
  top: min(17.7142857143vw, 248px);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.6s cubic-bezier(0.37, 0, 0.63, 1);
  transition-delay: var(--delay, 0s);
  will-change: clip-path;
}
.necklace-feature__text--02.is-animated {
  clip-path: inset(0);
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .necklace-feature__text--02 {
    top: auto;
    bottom: max(-26.1333333333vw, -196px);
    right: min(13.4666666667vw, 101px);
    width: min(4.6666666667vw, 35px);
  }
}
.necklace-feature__text--03 {
  display: block;
  position: absolute;
  width: min(2vw, 28px);
  right: max(-0.5714285714vw, -8px);
  top: min(17.7142857143vw, 248px);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.6s cubic-bezier(0.37, 0, 0.63, 1);
  transition-delay: var(--delay, 0s);
  will-change: clip-path;
}
.necklace-feature__text--03.is-animated {
  clip-path: inset(0);
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .necklace-feature__text--03 {
    top: auto;
    bottom: max(-45.6vw, -342px);
    right: min(20.1333333333vw, 151px);
    width: min(4.6666666667vw, 35px);
  }
}
.necklace-feature__overview {
  display: flex;
  width: min(57.1428571429vw, 800px);
  gap: min(3.5714285714vw, 50px);
  margin: 0 auto;
  margin-top: min(7.1428571429vw, 100px);
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .necklace-feature__overview {
    display: block;
    width: min(100vw, 750px);
    margin-top: min(4vw, 30px);
  }
}
.necklace-feature__overview-image img {
  width: min(25vw, 350px);
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .necklace-feature__overview-image img {
    width: min(64vw, 480px);
    margin: 0;
  }
}
.necklace-feature__overview-body {
  width: min(28.5714285714vw, 400px);
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .necklace-feature__overview-body {
    width: min(82.6666666667vw, 620px);
    margin: 0 auto;
    margin-top: min(5.3333333333vw, 40px);
  }
}
.necklace-feature__overview-items {
  margin-top: min(2.8571428571vw, 40px);
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .necklace-feature__overview-items {
    margin-top: min(5.3333333333vw, 40px);
  }
}
.necklace-feature__overview-item {
  padding-top: min(0.5714285714vw, 8px);
  padding-bottom: min(1.4285714286vw, 20px);
  border-top: min(0.0714285714vw, 1px) solid #4b4b4b;
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .necklace-feature__overview-item {
    padding-top: min(1.0666666667vw, 8px);
    padding-bottom: min(2.6666666667vw, 20px);
    border-top: min(0.1333333333vw, 1px) solid #4b4b4b;
  }
}
.necklace-feature__overview-name {
  font-size: min(1vw, 14px);
  font-family: "Hiragino Sans";
  font-weight: 300;
  text-decoration: none;
  color: inherit;
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .necklace-feature__overview-name {
    font-size: min(2.6666666667vw, 20px);
  }
}
.necklace-feature__overview-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(6.4285714286vw, 90px);
  height: min(1.3571428571vw, 19px);
  margin-top: min(0.6428571429vw, 9px);
  padding-top: min(0.1428571429vw, 2px);
  background: #5a5a5a;
  color: #fff;
  font-size: min(1vw, 14px);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", sans-serif;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .necklace-feature__overview-link {
    width: min(15.3333333333vw, 115px);
    height: min(3.2vw, 24px);
    margin-top: min(1.0666666667vw, 8px);
    padding-top: min(0.2666666667vw, 2px);
    font-size: min(2.2666666667vw, 17px);
    letter-spacing: 0.05em;
    font-weight: 600;
  }
}
.necklace-feature__lineup {
  display: flex;
  flex-direction: row-reverse;
  width: min(57.1428571429vw, 800px);
  padding-top: min(7.1428571429vw, 100px);
  margin: 0 auto;
  justify-content: space-between;
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .necklace-feature__lineup {
    display: block;
    width: min(80vw, 600px);
    padding-top: min(8.8vw, 66px);
  }
}
.necklace-feature__lineup-items {
  width: min(25vw, 350px);
  margin-top: min(5vw, 70px);
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .necklace-feature__lineup-items {
    width: min(72vw, 540px);
    margin: 0 auto;
    margin-top: min(5.3333333333vw, 40px);
  }
}
.necklace-feature__lineup-item {
  border-top: min(0.0714285714vw, 1px) solid #7d7d7d;
  padding-top: min(0.5vw, 7px);
  padding-bottom: min(1.5714285714vw, 22px);
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .necklace-feature__lineup-item {
    border-top: min(0.1333333333vw, 1px) solid #7d7d7d;
    padding-top: min(0.9333333333vw, 7px);
    padding-bottom: min(4.6666666667vw, 35px);
  }
}
.necklace-feature__lineup-name {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: inherit;
  font-size: min(1.1428571429vw, 16px);
  width: min(25vw, 350px);
  line-height: min(1.7142857143vw, 24px);
  font-family: "Hiragino Sans", sans-serif;
  font-weight: 300;
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .necklace-feature__lineup-name {
    font-size: min(2.6666666667vw, 20px);
    width: min(72vw, 540px);
    line-height: min(5.0666666667vw, 38px);
  }
}
.necklace-feature__lineup-name--pick::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: min(3.1428571429vw, 44px);
  height: min(3.1428571429vw, 44px);
  background: url("../images/necklace-feature__lineup-badge.svg") center/contain no-repeat;
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .necklace-feature__lineup-name--pick::after {
    width: min(8.4vw, 63px);
    height: min(8.4vw, 63px);
  }
}
.necklace-feature__lineup-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(5.2857142857vw, 74px);
  height: min(1.4285714286vw, 20px);
  margin-top: min(0.5714285714vw, 8px);
  padding-top: min(0.1428571429vw, 2px);
  background: #4b4b4b;
  color: #fff;
  font-size: min(0.8571428571vw, 12px);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", sans-serif;
  font-weight: 400;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .necklace-feature__lineup-link {
    width: min(15.3333333333vw, 115px);
    height: min(3.2vw, 24px);
    margin-top: 0;
    padding-top: min(0.2666666667vw, 2px);
    font-size: min(2.2666666667vw, 17px);
    letter-spacing: 0.05em;
    font-weight: 600;
  }
}
.necklace-feature__lineup-description {
  margin-top: min(1.0714285714vw, 15px);
  font-size: min(0.8571428571vw, 12px);
  font-family: "Hiragino Sans", sans-serif;
  line-height: min(1.4285714286vw, 20px);
  font-weight: 300;
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .necklace-feature__lineup-description {
    margin-top: min(2.6666666667vw, 20px);
    font-size: min(2.6666666667vw, 20px);
    line-height: min(4vw, 30px);
  }
}
.necklace-feature__lineup-catch {
  margin-bottom: min(1.2857142857vw, 18px);
  font-size: min(1.1428571429vw, 16px);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", sans-serif;
  line-height: min(1.8571428571vw, 26px);
  text-align: center;
  clip-path: inset(0 50% 0 50%);
  transition: clip-path 1s cubic-bezier(0.37, 0, 0.63, 1);
  transition-delay: var(--delay, 0s);
  will-change: clip-path;
}
.necklace-feature__lineup-catch.is-animated {
  clip-path: inset(0);
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .necklace-feature__lineup-catch {
    margin-bottom: min(3.8666666667vw, 29px);
    font-size: min(3.2vw, 24px);
    line-height: min(4.5333333333vw, 34px);
  }
}
.necklace-feature__lineup-visual {
  position: relative;
}
.necklace-feature__lineup-visual img {
  width: min(28.5714285714vw, 400px);
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .necklace-feature__lineup-visual img {
    width: min(80vw, 600px);
    margin: 0 auto;
  }
}

.bracelet-feature .necklace-feature__heading {
  height: min(13.0714285714vw, 183px);
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .bracelet-feature .necklace-feature__heading {
    height: min(36.8vw, 276px);
  }
}
.bracelet-feature .necklace-feature__heading-image--01 {
  top: min(2.6428571429vw, 37px);
  left: min(29vw, 406px);
  width: min(9.1428571429vw, 128px);
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .bracelet-feature .necklace-feature__heading-image--01 {
    top: 0;
    left: min(6vw, 45px);
    width: min(21.3333333333vw, 160px);
  }
}
.bracelet-feature .necklace-feature__heading-image--02 {
  top: min(3.1428571429vw, 44px);
  left: min(39.9285714286vw, 559px);
  width: min(31.0714285714vw, 435px);
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .bracelet-feature .necklace-feature__heading-image--02 {
    top: auto;
    bottom: min(4vw, 30px);
    left: min(6vw, 45px);
    width: min(72.4vw, 543px);
  }
}
.bracelet-feature .necklace-feature__heading-image--03 {
  top: min(0vw, 0px);
  right: min(26.3571428571vw, 369px);
  width: min(7.5714285714vw, 106px);
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .bracelet-feature .necklace-feature__heading-image--03 {
    top: auto;
    bottom: min(18.9333333333vw, 142px);
    right: min(15.6vw, 117px);
    width: min(17.7333333333vw, 133px);
  }
}
.bracelet-feature .necklace-feature__text--01 {
  left: max(-6.2857142857vw, -88px);
  top: min(15.5vw, 217px);
  transition-delay: 0.6s;
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .bracelet-feature .necklace-feature__text--01 {
    top: auto;
    bottom: max(-35.6vw, -267px);
    left: min(18.2666666667vw, 137px);
    transition-delay: 0s;
  }
}
.bracelet-feature .necklace-feature__text--02 {
  left: max(-3.4285714286vw, -48px);
  top: min(15.5vw, 217px);
  transition-delay: 0.3s;
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .bracelet-feature .necklace-feature__text--02 {
    top: auto;
    bottom: max(-32vw, -240px);
    left: min(11.6vw, 87px);
  }
}
.bracelet-feature .necklace-feature__text--03 {
  left: max(-0.5714285714vw, -8px);
  top: min(15.5vw, 217px);
  transition-delay: 0s;
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .bracelet-feature .necklace-feature__text--03 {
    top: auto;
    bottom: max(-43.7333333333vw, -328px);
    left: min(4.9333333333vw, 37px);
    transition-delay: 0.6s;
  }
}
.bracelet-feature .necklace-feature__overview {
  flex-direction: row-reverse;
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .bracelet-feature .necklace-feature__overview-image img {
    margin-left: auto;
  }
}
.bracelet-feature .necklace-feature__lineup {
  flex-direction: row;
}
.bracelet-feature .necklace-feature__lineup-name--pick::after {
  background: url("../images/bracelet-feature__lineup-badge.svg") center/contain no-repeat;
}

@media screen and (min-width: 375px) and (max-width: 750px) {
  .ring-feature .necklace-feature__heading {
    height: min(28.6666666667vw, 215px);
  }
}
.ring-feature .necklace-feature__heading-image--01 {
  left: min(38.1428571429vw, 534px);
  width: min(8.7142857143vw, 122px);
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .ring-feature .necklace-feature__heading-image--01 {
    top: 0;
    left: min(5.7333333333vw, 43px);
    width: min(20.2666666667vw, 152px);
  }
}
.ring-feature .necklace-feature__heading-image--02 {
  top: min(3.8571428571vw, 54px);
  left: min(48.3571428571vw, 677px);
  width: min(13.4285714286vw, 188px);
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .ring-feature .necklace-feature__heading-image--02 {
    top: auto;
    bottom: min(4vw, 30px);
    left: min(6vw, 45px);
    width: min(31.3333333333vw, 235px);
  }
}
.ring-feature .necklace-feature__heading-image--03 {
  top: min(1.3571428571vw, 19px);
  right: min(28.6428571429vw, 401px);
  width: min(11.3571428571vw, 159px);
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .ring-feature .necklace-feature__heading-image--03 {
    top: auto;
    bottom: min(10.9333333333vw, 82px);
    left: min(36.9333333333vw, 277px);
    width: min(26.4vw, 198px);
  }
}
.ring-feature .necklace-feature__text--01 {
  top: min(17.0714285714vw, 239px);
  transition-delay: 0s;
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .ring-feature .necklace-feature__text--01 {
    top: auto;
    bottom: max(-40.8vw, -306px);
    right: min(6.8vw, 51px);
  }
}
.ring-feature .necklace-feature__text--02 {
  top: min(17.0714285714vw, 239px);
  transition-delay: 0.3s;
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .ring-feature .necklace-feature__text--02 {
    top: auto;
    bottom: max(-28.8vw, -216px);
    right: min(13.4666666667vw, 101px);
  }
}
.ring-feature .necklace-feature__text--03 {
  top: min(17.0714285714vw, 239px);
  transition-delay: 0.6s;
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .ring-feature .necklace-feature__text--03 {
    top: auto;
    bottom: max(-37.0666666667vw, -278px);
    right: min(20.1333333333vw, 151px);
  }
}
.ring-feature .necklace-feature__lineup-name--pick::after {
  background: url("../images/ring-feature__lineup-badge.svg") center/contain no-repeat;
}

.earrings-feature .necklace-feature {
  padding-bottom: min(7.1428571429vw, 100px);
}
.earrings-feature .necklace-feature__heading {
  height: min(13.6428571429vw, 191px);
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .earrings-feature .necklace-feature__heading {
    height: min(45.6vw, 342px);
  }
}
.earrings-feature .necklace-feature__heading-image--01 {
  left: min(31.0714285714vw, 435px);
  width: min(9.7142857143vw, 136px);
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .earrings-feature .necklace-feature__heading-image--01 {
    top: 0;
    left: min(6vw, 45px);
    width: min(22.8vw, 171px);
  }
}
.earrings-feature .necklace-feature__heading-image--02 {
  top: min(0.3571428571vw, 5px);
  left: min(41.8571428571vw, 586px);
  width: min(31.1428571429vw, 436px);
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .earrings-feature .necklace-feature__heading-image--02 {
    top: auto;
    bottom: min(4vw, 30px);
    left: min(5.4666666667vw, 41px);
    width: min(72.6666666667vw, 545px);
  }
}
.earrings-feature .necklace-feature__heading-image--03 {
  top: min(0.8571428571vw, 12px);
  right: min(27.8571428571vw, 390px);
  width: min(4.2857142857vw, 60px);
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .earrings-feature .necklace-feature__heading-image--03 {
    top: auto;
    bottom: min(18.5333333333vw, 139px);
    right: min(22vw, 165px);
    width: min(10vw, 75px);
  }
}
.earrings-feature .necklace-feature__text--01 {
  left: max(-6.2857142857vw, -88px);
  top: min(13.0714285714vw, 183px);
  transition-delay: 0.6s;
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .earrings-feature .necklace-feature__text--01 {
    top: auto;
    bottom: max(-43.8666666667vw, -329px);
    left: min(18.8vw, 141px);
    transition-delay: 0s;
  }
}
.earrings-feature .necklace-feature__text--02 {
  left: max(-3.4285714286vw, -48px);
  top: min(13.0714285714vw, 183px);
  transition-delay: 0.3s;
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .earrings-feature .necklace-feature__text--02 {
    top: auto;
    bottom: max(-31.8666666667vw, -239px);
    left: min(12.1333333333vw, 91px);
  }
}
.earrings-feature .necklace-feature__text--03 {
  left: max(-0.5714285714vw, -8px);
  top: min(13.0714285714vw, 183px);
  transition-delay: 0s;
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .earrings-feature .necklace-feature__text--03 {
    top: auto;
    bottom: max(-43.8666666667vw, -329px);
    left: min(5.4666666667vw, 41px);
    transition-delay: 0.6s;
  }
}
.earrings-feature .necklace-feature__overview {
  flex-direction: row-reverse;
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .earrings-feature .necklace-feature__overview-image img {
    margin-left: auto;
  }
}
.earrings-feature .necklace-feature__lineup {
  flex-direction: row;
}
.earrings-feature .necklace-feature__lineup-name--pick::after {
  background: url("../images/bracelet-feature__lineup-badge.svg") center/contain no-repeat;
}

.craft-feature__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: min(4.8571428571vw, 68px);
  padding: min(3.2142857143vw, 45px) 0;
  overflow: hidden;
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .craft-feature__inner {
    display: block;
    padding: min(5.0666666667vw, 38px) min(10vw, 75px) min(4.8vw, 36px);
  }
}
.craft-feature__bg {
  position: absolute;
  inset: 0;
  background-color: rgba(181, 216, 218, 0.3);
  pointer-events: none;
  z-index: 0;
  clip-path: inset(0 0 0 100%);
  transition: clip-path 0.6s cubic-bezier(0.37, 0, 0.63, 1);
  transition-delay: var(--delay, 0s);
  will-change: clip-path;
}
.craft-feature__bg.is-animated {
  clip-path: inset(0);
}
.craft-feature__body {
  position: relative;
  z-index: 1;
  width: min(25.6428571429vw, 359px);
  text-align: center;
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .craft-feature__body {
    width: min(72.8vw, 546px);
    margin: 0 auto;
  }
}
.craft-feature__heading {
  width: min(25.6428571429vw, 359px);
  clip-path: inset(0 0 0 100%);
  transition: clip-path 0.6s cubic-bezier(0.37, 0, 0.63, 1);
  transition-delay: var(--delay, 0s);
  will-change: clip-path;
}
.craft-feature__heading.is-animated {
  clip-path: inset(0);
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .craft-feature__heading {
    width: min(59.7333333333vw, 448px);
    margin: 0 auto;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.6s cubic-bezier(0.37, 0, 0.63, 1);
    transition-delay: var(--delay, 0s);
    will-change: clip-path;
  }
  .craft-feature__heading.is-animated {
    clip-path: inset(0);
  }
}
.craft-feature__subheading {
  margin-top: min(0.7142857143vw, 10px);
  font-size: min(1.4285714286vw, 20px);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", sans-serif;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.6s cubic-bezier(0.37, 0, 0.63, 1);
  transition-delay: var(--delay, 0s);
  will-change: clip-path;
}
.craft-feature__subheading.is-animated {
  clip-path: inset(0);
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .craft-feature__subheading {
    margin-top: min(3.4666666667vw, 26px);
    font-size: min(4vw, 30px);
    clip-path: inset(0 0 0 100%);
    transition: clip-path 0.6s cubic-bezier(0.37, 0, 0.63, 1);
    transition-delay: var(--delay, 0s);
    will-change: clip-path;
  }
  .craft-feature__subheading.is-animated {
    clip-path: inset(0);
  }
}
.craft-feature__text {
  margin-top: min(1.9285714286vw, 27px);
  font-size: min(1vw, 14px);
  line-height: min(1.7142857143vw, 24px);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", sans-serif;
  clip-path: inset(0 0 0 100%);
  transition: clip-path 0.6s cubic-bezier(0.37, 0, 0.63, 1);
  transition-delay: var(--delay, 0s);
  will-change: clip-path;
}
.craft-feature__text.is-animated {
  clip-path: inset(0);
}
.craft-feature__text {
  letter-spacing: -0.01em;
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .craft-feature__text {
    margin-top: min(4vw, 30px);
    font-size: min(2.6666666667vw, 20px);
    line-height: min(4.5333333333vw, 34px);
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.6s cubic-bezier(0.37, 0, 0.63, 1);
    transition-delay: var(--delay, 0s);
    will-change: clip-path;
  }
  .craft-feature__text.is-animated {
    clip-path: inset(0);
  }
  .craft-feature__text {
    letter-spacing: 0;
  }
}
.craft-feature__image {
  position: relative;
  z-index: 1;
  width: min(21.4285714286vw, 300px);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.6s cubic-bezier(0.37, 0, 0.63, 1);
  transition-delay: var(--delay, 0s);
  will-change: clip-path;
}
.craft-feature__image.is-animated {
  clip-path: inset(0);
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .craft-feature__image {
    width: min(62.6666666667vw, 470px);
    margin: 0 auto;
    margin-top: min(3.8666666667vw, 29px);
  }
}

.credit-feature {
  margin: min(5.5714285714vw, 78px) auto min(6.5vw, 91px);
}
.credit-feature__image img {
  margin: 0 auto;
  width: min(18.8571428571vw, 264px);
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .credit-feature__image img {
    width: min(40.6666666667vw, 305px);
  }
}

.page-top {
  position: fixed;
  right: min(1.4285714286vw, 20px);
  bottom: min(1.4285714286vw, 20px);
  width: min(1.2857142857vw, 18px);
}
@media screen and (min-width: 375px) and (max-width: 750px) {
  .page-top {
    bottom: min(5.3333333333vw, 40px);
    right: min(2.6666666667vw, 20px);
    bottom: min(2.6666666667vw, 20px);
    width: min(2.4vw, 18px);
  }
}
.page-top {
  z-index: 100;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.page-top.is-show {
  opacity: 1;
  visibility: visible;
}/*# sourceMappingURL=base.css.map */