@charset "UTF-8";

body { margin: 0; }

.l-container { width: 100%; }
.l-footer,.pc-footer { margin: 0; padding: 0; }
.l-container::after { content: ""; }
sup, sub { position: static; top: auto; }

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

html.js-anim .js-reveal { opacity: 0; translate: 0 3rem;
  transition: opacity .8s cubic-bezier(0.25, 0.1, 0.25, 1), translate .8s cubic-bezier(0.25, 0.1, 0.25, 1); }
html.js-anim .js-reveal.is-inview { opacity: 1; translate: 0 0; }

.is-noanim .js-reveal, .is-noanim .js-anime { transition: none !important; opacity: 1 !important; translate: none !important; }
@media (prefers-reduced-motion: reduce) {
  html:not(.is-forceanim) .js-reveal, html:not(.is-forceanim) .js-anime { transition: none !important; opacity: 1 !important; translate: none !important; }
  html:not(.is-forceanim) { scroll-behavior: auto; }
}

.feature { box-sizing: border-box; color: #fff; margin: 0 auto; position: relative; width: 100%;
  font-family: hiragino-kaku-gothic-pron, "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体",
    "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", meiryo, メイリオ, sans-serif;
  font-weight: 400; font-style: normal;
  font-size: 2rem;
  text-spacing-trim: space-all;
  line-break: strict;
  background: #000;
  --fv-top: 51px;    }
.feature * { margin: 0; padding: 0; border: 0; vertical-align: baseline; box-sizing: border-box; scroll-margin-top: 50px; }
.feature h1, .feature h2, .feature h3, .feature h4, .feature h5, .feature h6,
.feature strong, .feature b { font-weight: inherit; }
.feature .pc { display: none; }

.feature .lp-nav, .feature .frame-side, .feature .lead__foot.-pc { display: none; }
.feature a { color: #fff; 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: #000; }

.feature .mv { position: sticky; top: var(--fv-top); z-index: 1; }
.feature .mv__photo img { width: 100%; }

.feature .lp-rise { display: flow-root; position: relative; z-index: 2; background: #000; }

.feature :where(.lp-rise > *, .lead > *) { position: relative; }

.feature .lead__logo { margin-top: 10.041rem; margin-left: 14.03rem; width: 46.94rem; }
.feature .lead__photo { margin-top: 10.231rem; margin-left: 18.622rem; width: 37.756rem; }
.feature .lead__body { margin-top: 11.537rem; margin-left: 10.231rem; width: 54.382rem; }
.feature .lead__foot { margin-top: 9.583rem; margin-left: 28.91rem; width: 17.78rem; }
.feature .lead__photo img, .feature .lead__logo img, .feature .lead__body img, .feature .lead__foot img { width: 100%; }

.feature .look { position: relative; }
.feature .look a { display: block; }
.feature .look img { width: 100%; }

.feature .look__veil { position: absolute; inset: 0; z-index: 1; background-color: #808080; mix-blend-mode: multiply;
  pointer-events: none; opacity: 0; transition: opacity .4s cubic-bezier(0.25, 0.1, 0.25, 1); }
.feature .look.is-open .look__veil { opacity: 1; }

.feature .credit { position: absolute; top: 50%; left: 0; right: 0; z-index: 2; translate: 0 -50%;
  text-align: center; color: #fff; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .4s cubic-bezier(0.25, 0.1, 0.25, 1), visibility .4s cubic-bezier(0.25, 0.1, 0.25, 1); }
.feature .credit05, .feature .credit07 { top: 47.8%; }
.feature .look.is-open .credit { opacity: 1; visibility: visible; pointer-events: auto; }
.feature .credit .item { display: block; line-height: 1.62; white-space: nowrap; }
.feature .credit .link { font-family: "kepler-3-variable", serif; font-style: italic;
  font-variation-settings: 'opsz' 18, 'wdth' 90, 'wght' 500; font-weight: 500;
  font-size: 3rem; letter-spacing: .012em; color: #fff; }
.feature .credit .price { margin-left: .5em; }

.feature .js-slider .look { margin: 0; width: 100%; }

.feature .js-slider .splide__track { overflow: hidden; position: relative; z-index: 0; }
.feature .js-slider .splide__list { display: flex; margin: 0; padding: 0; }
.feature .js-slider .splide__slide { flex-shrink: 0; list-style-type: none; margin: 0; position: relative; width: 100%; }

.feature .splide__pagination { position: absolute; top: 1.6rem; left: 1.6rem; z-index: 3; display: flex; gap: .4rem; }
.feature .splide__pagination li { line-height: 1; }
.feature .splide__pagination .splide__pagination__page { display: block; width: 1rem; height: 1rem; border: 1px solid #cfb469; border-radius: 50%;
  background: none; opacity: 1; cursor: pointer; }
.feature .splide__pagination .splide__pagination__page.is-active { background: #cfb469; }

.feature .look-slider01 { margin-top: 12.093rem; }
.feature .look-group04 { margin-top: 4rem; }
.feature .look04 { margin-left: 4rem; width: 67rem; }
.feature .caption04 { margin-top: 2.929rem; margin-left: 20.641rem; width: 33.705rem; }
.feature .look-slider02 { margin-top: 14.731rem; }
.feature .look-group06 { margin-top: 14.95rem; }
.feature .look06 { width: 55.6rem; }

.feature .caption06 { position: absolute; top: 22.34rem; left: 69.964rem; width: 2.208rem; }
.feature .look-slider03 { margin-top: 15rem; }
.feature .look-group08 { margin-top: 18.95rem; }
.feature .look08 { margin-left: 12.5rem; width: 50rem; }
.feature .caption08 { margin-top: 3.932rem; margin-left: 19.341rem; width: 36.609rem; }

.feature .look09 { margin-top: 14.86rem; }
.feature .look10 { margin-top: 4.05rem; margin-left: 4rem; width: 67rem; }
.feature .caption04 img, .feature .caption06 img, .feature .caption08 img { width: 100%; }

.feature .allitems { margin-top: 9.476rem; margin-left: 33.055rem; width: 8.756rem; }
.feature .allitems img { width: 100%; }
.feature .lp-rise { padding-bottom: 8.406rem; }

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

  html { font-size: 0.4166667vw; }

  .feature .pc { display: block; }
  .feature .sp { display: none; }
  .feature .frame > .pc { display: contents; }

  .feature > .pc { display: contents; }
  .feature .lp-nav, .feature .frame-side, .feature .lead__foot.-pc { display: block; }
  .feature .lead__logo, .feature .lead__body, .feature .lead__foot.-sp { display: none; }

  .feature {
    --pcu: 0.078125vw;
    --rail-top: 80px;
    --nav-h: calc(45 * var(--pcu));
    --fv-top: calc(var(--rail-top) + var(--nav-h)); }

  .feature .lp-nav { position: sticky; top: var(--rail-top); z-index: 4; height: var(--nav-h);
    background: #000; border-bottom: 1px solid #CFB469; }
  .feature .lp-nav__link { position: absolute; display: block; }
  .feature .lp-nav__link img { width: 100%; }
  .feature .lp-nav__link.-top { top: calc(28.18 * var(--pcu)); left: calc(824 * var(--pcu)); width: calc(50.49 * var(--pcu)); }
  .feature .lp-nav__link.-all { top: calc(28.18 * var(--pcu)); left: calc(1162.5 * var(--pcu)); width: calc(60.29 * var(--pcu)); }

  .feature .frame { display: flex; align-items: stretch; }
  .feature .frame-main { flex: 0 0 auto; width: 75rem; position: relative; }

  .feature .frame-main::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
    border-left: 1px solid #CFB469; border-right: 1px solid #CFB469; }
  .feature .frame-side { position: relative; }
  .feature .frame-side.-rail { flex: 0 0 auto; width: calc(823 * var(--pcu)); }
  .feature .frame-side.-right { flex: 1 1 0; min-width: 0; }

  .feature .frame-side.-rail .frame-side__inner { --rail-h: calc(100vh - var(--rail-top) - var(--nav-h));
    position: sticky; top: calc(var(--rail-top) + var(--nav-h)); height: var(--rail-h);
    margin-bottom: calc(40 * var(--pcu)); }
  .feature .rail__logo, .feature .rail__lead1, .feature .rail__lead2, .feature .rail__script { position: absolute; }
  .feature .rail__logo img, .feature .rail__lead1 img, .feature .rail__lead2 img, .feature .rail__script img { width: 100%; }

  .feature .rail__logo { top: calc(49.97 * var(--pcu)); left: calc(44 * var(--pcu)); width: calc(288.4 * var(--pcu)); }
  .feature .rail__lead1 { top: calc(118.52 * var(--pcu)); left: calc(43.52 * var(--pcu)); width: calc(237.63 * var(--pcu)); }
  .feature .rail__lead2 { top: calc(174.88 * var(--pcu)); left: calc(44.49 * var(--pcu)); width: calc(370.5 * var(--pcu)); }

  .feature .rail__script { bottom: calc(112.7 * var(--pcu)); left: calc(38 * var(--pcu)); width: calc(509 * var(--pcu)); }

  .feature .lead__photo { margin-top: 23.156rem; margin-left: 18.75rem; width: 37.5rem; }
  .feature .lead__foot { margin-top: 8.738rem; margin-left: 19.68rem; width: 35.644rem; }
  .feature .look-slider01 { margin-top: 21.834rem; }
  .feature .look-group04 { margin-top: 3.469rem; }
  .feature .look04 { margin-left: 3.752rem; width: 67.5rem; }
  .feature .caption04 { margin-top: 4.35rem; }
  .feature .look-slider02 { margin-top: 14.149rem; }
  .feature .look-group06 { margin-top: 14.775rem; }
  .feature .look-slider03 { margin-top: 14.663rem; }
  .feature .look-group08 { margin-top: 18.469rem; }
  .feature .look08 { margin-left: 12.1875rem; width: 50.625rem; }

  .feature .caption08 { margin-top: 3.87rem; }
  .feature .look09 { margin-top: 16.71rem; }
  .feature .look10 { margin-top: 3.488rem; margin-left: 3.752rem; width: 67.5rem; }
  .feature .allitems { margin-top: 6.937rem; }
  .feature .lp-rise { padding-bottom: 7.506rem; }
}