@charset "UTF-8";

body { margin: 0; }

.l-container { width: 100%; }
.l-container { overflow: clip; }
.l-footer,.pc-footer { margin: 0; padding: 0; }
.l-container::after { content: ""; }
sup, sub { position: static; top: auto; }
.efs-system-notification { display: none !important; }

html { scroll-behavior: smooth; font-size: 1.3333333vw; }

html.js-anim .js-reveal { opacity: 0; transform: translateY(4rem); transition: opacity .8s ease-out, transform .8s ease-out; }
html.js-anim .js-reveal.is-inview { opacity: 1; transform: none; }
.is-noanim .js-reveal, .is-noanim .js-anime { transition: none !important; opacity: 1 !important; transform: none !important; }
.is-noanim .js-rail { transition: none !important; opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  html:not(.is-forceanim) .js-reveal, html:not(.is-forceanim) .js-anime, html:not(.is-forceanim) .js-rail { transition: none !important; opacity: 1 !important; transform: none !important; }
  html:not(.is-forceanim) { scroll-behavior: auto; }
}

.feature { box-sizing: border-box; color: #64686B; margin: 0 auto; position: relative; width: 100%;
  font-family: "Noto Sans JP", sans-serif; font-weight: 400; font-style: normal;
  font-size: 2rem;
  text-spacing-trim: space-all;
  line-break: strict;
  background: #FDFAF5; }
.feature * { margin: 0; padding: 0; border: 0; vertical-align: baseline; box-sizing: border-box; scroll-margin-top: 51px; }
.feature h1, .feature h2, .feature h3, .feature h4, .feature h5, .feature h6,
.feature strong, .feature b { font-weight: inherit; }
.feature .pc { display: none; }
.feature a { color: inherit; text-decoration: none; }
@media (hover: hover) {
  .feature a img, .feature a:not(:has(img:not([alt=""]))), .feature button { transition: opacity .3s; }
  .feature a:has(img:not([alt=""])):hover img { opacity: .7; }
  .feature a:not(:has(img:not([alt=""]))):hover, .feature button:hover { opacity: .7; text-decoration: none; }
}
.feature img { display: block; vertical-align: bottom; max-width: 100%; height: auto; }
.feature ul { list-style: none; }

.feature .frame-main__inner { display: flow-root; width: 100%; margin: auto; background: #FDFAF5; }

.feature .mv { position: relative; margin-top: 0rem; }
.feature .mv__photos { display: flex; flex-wrap: wrap; }
.feature .mv__img.-left, .feature .mv__img.-right { width: 37.5rem; }
.feature .mv__img.-bag { width: 75rem; }

.feature .mv__shade { position: absolute; top: 8.55rem; left: 0; width: 75rem; pointer-events: none; }

.feature .mv__ttl { position: absolute; top: 38.35rem; left: 0; width: 100%; text-align: center; color: #FFFFFF;
  font-family: "orpheuspro", serif; font-weight: 400; font-size: 6.5rem; line-height: 7.8rem; letter-spacing: 0; }
.feature .mv__ttl-sub { display: block; margin-top: .4rem; font-size: 4.6rem; line-height: 5.02rem; }

.feature .mv__lead { position: absolute; top: 54.98rem; left: 0; width: 100%; text-align: center; color: #FFFFFF;
  font-weight: 700; font-size: 2.6rem; line-height: 1.6; letter-spacing: .01em; }

.feature .lead { text-align: center; font-size: 2.4rem; line-height: 2; letter-spacing: .06em; color: #64686B; font-feature-settings: "halt"; }
.feature .lead__p1 { margin-top: 10.8rem; }
.feature .lead__p2 { margin-top: 3.8rem; }
.feature .lead__p3 { margin-top: 3.8rem; }
.feature .lead__p4 { margin-top: 3.8rem; }

.feature .knit { position: relative; margin-top: 13rem; }
.feature .knit__photos { display: flex; flex-wrap: wrap; }
.feature .knit__photos img { width: 37.5rem; }
.feature .knit__head { position: absolute; top: 22.36rem; left: 0; width: 100%; text-align: center; color: #FFFFFF; }
.feature .knit__ttl { font-family: "orpheuspro", serif; font-weight: 400; font-size: 8.2rem; line-height: 1.2; letter-spacing: 0; }
.feature .knit__sub { margin-top: 2.21rem; font-weight: 500; font-size: 2.6rem; line-height: 1.6; letter-spacing: 0; }

.feature .cat-ttl { text-align: center; font-family: "orpheuspro", serif; font-weight: 400; font-size: 5.8rem; line-height: 1.66; letter-spacing: .04em; color: #64686B; }
.feature .cat-ttl.-women { margin-top: 10.086rem; }
.feature .cat-ttl.-kids { margin-top: 10.186rem; }

.feature .slider { position: relative; height: 95.2rem; overflow: hidden; }
.feature .slider.-women { margin-top: 3.485rem; }
.feature .slider.-kids { margin-top: 3.485rem; }
.feature .slider .swiper-wrapper { display: flex; transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1); }
.feature .slider .swiper-slide { flex-shrink: 0; width: 49rem; height: auto; }
.feature .slider .slide__img img { width: 49rem; }

.feature .slider .credit { margin-top: 3.28rem; text-align: left; }
.feature .slider .credit .item { display: block; white-space: normal; }
.feature .slider .credit .link { display: block; color: #64686B; }

.feature .slider .credit .txt { display: block; font-feature-settings: "halt"; font-size: 2.4rem; line-height: 1.6; letter-spacing: .06em; }
.feature .slider .credit .price { display: block; margin-top: 2rem;  font-family: "effra", sans-serif; font-weight: 400; font-size: 2.4rem; line-height: 1.73; letter-spacing: .06em; }

.feature .slider .slider__arrow { position: absolute; top: 33.4rem; z-index: 2; width: 6.8rem; height: 6.8rem; padding: 0; border: 0; cursor: pointer;
  background: transparent center / contain no-repeat; }
.feature .slider .slider__arrow.-prev { left: 1.4rem; background-image: url(../img/arrow-prev.svg); }
.feature .slider .slider__arrow.-next { right: 1.4rem; background-image: url(../img/arrow-next.svg); }

.feature .slider .slider__dots { position: absolute; top: 93.6rem; left: 50%; z-index: 2; transform: translateX(-50%); display: flex; column-gap: 3.2rem; flex-wrap: nowrap; width: auto; }
.feature .slider .swiper-pagination-bullet { display: block; width: 1.6rem; height: 1.6rem; margin: 0; border-radius: 50%; background: #64686B; opacity: .4; cursor: pointer; }
.feature .slider .swiper-pagination-bullet-active { opacity: 1; }

.feature .pe { margin-top: 20rem; }
.feature .pe__link { display: block; position: relative; }
.feature .pe__link img { width: 75rem; }
.feature .pe__body { display: block; position: absolute; top: 20.91rem; left: 0; width: 100%; text-align: center; color: #FFFFFF; }
.feature .pe__ttl { display: block; font-family: "orpheuspro", serif; font-weight: 400; font-size: 8rem; line-height: 1.23; letter-spacing: 0; }

.feature .pe__txt { display: block; margin-top: 2.2rem;  font-feature-settings: "halt"; font-weight: 500; font-size: 2.6rem; line-height: 1.6; letter-spacing: 0; }

.feature .pe__btn { display: flex; align-items: center; justify-content: center; width: 23rem; height: 7rem; margin: 5.13rem auto 0; border: .2rem solid #FFFFFF;
  font-family: "effra", sans-serif; font-weight: 700; font-size: 2.6rem; line-height: 1; letter-spacing: .06em; }

.feature .goods { position: relative; height: 138.8rem; margin-top: 12rem; }
.feature .goods__row { position: absolute; left: 0; width: 100%; height: 51.6rem; }
.feature .goods__row.-r1 { top: 0; }
.feature .goods__row.-r2 { top: 43.6rem; }
.feature .goods__row.-r3 { top: 87.2rem; }
.feature .goods__photo { position: absolute; top: 0; width: 34.4rem; }
.feature .goods__photo.-p16, .feature .goods__photo.-p21 { left: 2rem; }
.feature .goods__photo.-p18 { left: 38.6rem; }
.feature .goods__item { position: absolute; width: 15.6rem; }
.feature .goods__item.-i17 { top: 8.9rem; left: 48rem; }
.feature .goods__item.-i19 { top: 12.05rem; left: 3rem; }
.feature .goods__item.-i20 { top: 11.95rem; left: 19.8rem; }
.feature .goods__item.-i22 { top: 16.9rem; left: 39.6rem; }
.feature .goods__item.-i23 { top: 16.9rem; left: 56.4rem; }

.feature .goods__thumb { display: block; background: #FDFAF5; }
.feature .goods__thumb img { width: 15.6rem; mix-blend-mode: multiply; }
.feature .goods__item .credit .item { display: block; white-space: normal; text-align: center; }
.feature .goods__item .credit .link { display: block; color: #64686B; font-family: "effra", sans-serif; font-weight: 400; font-size: 2.4rem; line-height: 1.5; letter-spacing: .06em; }
.feature .goods__item .credit .txt, .feature .goods__item .credit .price { display: block; }

.feature .goods__item .credit { position: relative; left: .1rem; }
.feature .goods__item.-i17 .credit { margin-top: 1.55rem; }
.feature .goods__item.-i19 .credit { margin-top: -.5rem; }
.feature .goods__item.-i20 .credit { margin-top: -.4rem; }
.feature .goods__item.-i22 .credit, .feature .goods__item.-i23 .credit { margin-top: .45rem; }

.feature .allitems { margin-top: 12.1rem; padding-bottom: 12.1rem; }
.feature .allitems__link { display: flex; align-items: center; justify-content: center; column-gap: 4rem;
  font-family: "orpheuspro", serif; font-weight: 400; font-size: 4rem; line-height: 1.75; letter-spacing: 0; color: #977547; }

.feature .allitems__icon { width: 2.5637rem; }

.feature .allitems__link { position: relative; left: .2rem; }

@media screen and (min-width: 751px) {

  html { font-size: min(0.4190476vw, 5.8666667px); }

  .feature .pc { display: block; }
  .feature .sp { display: none; }
  .feature .frame > .pc { display: contents; }
  .feature * { scroll-margin-top: 80px; }

  .feature { --pcu: min(0.0714286vw, 1px); --rail-top: 80px; background: #F9F2E5; }

  .feature .frame { display: flex; align-items: stretch; justify-content: center; }
  .feature .frame-main { flex: 0 0 auto; width: 75rem; }

  .feature .frame-side { position: relative; flex: 1 1 0; }
  .feature .frame-side__inner { position: sticky; top: var(--rail-top); height: calc(100vh - var(--rail-top));
    display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: calc(80 * var(--pcu)); overflow: hidden; }

  html.js-anim .feature .js-rail { opacity: 0; transition: opacity .6s ease; }
  html.js-anim .feature .js-rail.is-inview { opacity: 1; }

  .feature .rail__lead { text-align: center; color: #64686B; }
  .feature .rail__ttl { font-family: "orpheuspro", serif; font-weight: 400; font-size: calc(34 * var(--pcu)); line-height: 1.2; letter-spacing: 0; }
  .feature .rail__ttl-sub { display: block; font-size: calc(24 * var(--pcu)); line-height: calc(26.2 * var(--pcu)); }
  .feature .rail__txt { margin-top: calc(20.5 * var(--pcu)); font-weight: 500; font-size: calc(13 * var(--pcu)); line-height: 1.85; letter-spacing: 0; }

  .feature .rail__link { display: flex; align-items: center; justify-content: center; column-gap: calc(13 * var(--pcu)); height: calc(50 * var(--pcu));
    font-family: "orpheuspro", serif; font-weight: 400; font-size: calc(24 * var(--pcu)); line-height: 1; letter-spacing: 0; color: #64686B; }

  .feature .rail__icon.-down { width: calc(12.707 * var(--pcu)); }
  .feature .rail__icon.-all { width: calc(12.061 * var(--pcu)); }

  .feature .rail__icon.-down { transform: translateY(calc(5.5 * var(--pcu))); }
  .feature .rail__icon.-all { transform: translateY(calc(2 * var(--pcu))); }
}
