@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; }

.js-fade { opacity: 0; transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.js-fade.is-inview { opacity: 1; }

.js-stagger__item { opacity: 0; transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--d, 0s); }

.js-stagger.is-center .js-stagger__item { opacity: 1; }

.js-stagger__item:nth-child(1) { --d: 0s; }
.js-stagger__item:nth-child(2) { --d: .4s; }
.js-stagger__item:nth-child(3) { --d: .8s; }

.js-tilt { transform: rotate(-5.0003deg); transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }

.js-stagger.is-center .js-tilt, .js-tilt.is-center { transform: rotate(0deg); }

.is-noanim .js-fade, .is-noanim .js-stagger__item { transition: none !important; opacity: 1 !important; }
.is-noanim .js-tilt { transition: none !important; transform: rotate(0deg) !important; }
.is-noanim .leftcont__box, .is-noanim .sec01__box { transition: none !important; opacity: 1 !important; filter: none !important; }

@media (prefers-reduced-motion: reduce) {
  html:not(.is-forceanim) .js-fade,
  html:not(.is-forceanim) .js-stagger__item { transition: none !important; opacity: 1 !important; }
  html:not(.is-forceanim) .js-tilt { transition: none !important; transform: rotate(0deg) !important; }
  html:not(.is-forceanim) .leftcont__box,
  html:not(.is-forceanim) .sec01__box { transition: none !important; opacity: 1 !important; filter: none !important; }
  html:not(.is-forceanim) { scroll-behavior: auto; }
}

.feature { box-sizing: border-box; color: #000; margin: 0 auto; overflow: clip; position: relative; width: 100%;

  font-family: "area-variable", hiragino-kaku-gothic-pron, "Yu Gothic", "游ゴシック", YuGothic,
    "Hiragino Kaku Gothic ProN", meiryo, sans-serif;
  font-variation-settings: 'INKT' 0, 'wght' 500, 'wdth' 100, 'slnt' 0;
  font-weight: 400; font-style: normal;
  font-size: 2rem;
  text-spacing-trim: space-all;
  line-break: strict;
  background: #fff;  }
.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 .sec02__ttl { font-variation-settings: 'INKT' 0, 'wght' 800, 'wdth' 100, 'slnt' 0; }
.feature .look-sec__label,
.feature .sec06__label,
.feature .sec13__label,
.feature .sec01__ttl,
.feature .leftcont__ttl { font-variation-settings: 'INKT' 0, 'wght' 700, 'wdth' 100, 'slnt' 0; }
.feature .pc { display: none; }
.feature a { color: #000; text-decoration: none; }

@media (hover: hover) {
  .feature a img { transition: opacity .3s; }
  .feature a:hover img { opacity: .7; }
}

.feature .sec06__cover a,
.feature .sec09__cover a { display: block;
  background: linear-gradient(#fff, #fff) center / calc(100% - 2px) calc(100% - 2px) no-repeat; }
.feature img { display: block; vertical-align: bottom; max-width: 100%; height: auto; }
.feature ul { list-style: none; }

.feature .frame-main__inner { overflow: clip; display: flow-root; width: 100%; margin: auto; background: #fff;

  padding-bottom: 20rem; }

.feature .credit { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start;
  column-gap: 1.5rem; row-gap: 0; margin-left: auto; margin-right: auto;
  position: relative; top: -1.2rem;
  text-align: center; font-size: 2rem; line-height: 2; letter-spacing: .025em; color: #7C8183; }
.feature .credit .item { white-space: nowrap; }
.feature .credit .link { color: #7C8183; }
.feature .credit .price { margin-left: .5rem; }
.feature .credit .item.-noline { border-bottom: none; }

.feature .look-sec { position: relative; }
.feature .look-sec__labels { position: absolute; inset: 0; pointer-events: none; }

.feature .look-sec__label { position: absolute; color: #fff; font-size: 3.6rem; letter-spacing: .025em;
  --ink: 2.343rem; margin-top: calc(var(--ink) * -1);
  text-transform: uppercase;  }

.feature .look-sec__label.-b { text-transform: none; }

.feature .js-slider .splide__track { overflow: hidden; }

.feature .look-fade img { width: 75rem; height: 93.75rem; }
.feature .look-fade.-narrow { margin: 0 auto; width: 66rem; }
.feature .look-fade.-narrow img { width: 66rem; height: 82.5rem; }

.feature .look-fade .splide__pagination { display: flex; justify-content: center; align-items: center;
  gap: 3rem; margin-top: 3rem; }
.feature .look-fade .splide__pagination li { line-height: 0; }
.feature .look-fade .splide__pagination__page { display: block; width: 6rem; height: .4rem;
  padding: 0; border: 0; border-radius: 0; background: #D8D8DA; opacity: 1; transform: none; cursor: pointer; }
.feature .look-fade .splide__pagination__page.is-active { background: #7C8183; transform: none; }

.feature .look-fade .splide__pagination__page { position: relative; overflow: hidden; }

.feature .look-fade .splide__pagination__page.is-active { background: #D8D8DA; }
.feature .look-fade .splide__pagination__page.is-active::after { content: ""; position: absolute;
  top: 0; left: 0; width: 0; height: 100%; background: #7C8183;
  animation: lf-timer 3s linear forwards; }
@keyframes lf-timer { from { width: 0; } to { width: 100%; } }

.is-noanim .feature .look-fade .splide__pagination__page.is-active::after {
  animation: none !important; width: 100%; }
@media (prefers-reduced-motion: reduce) {
  html:not(.is-forceanim) .feature .look-fade .splide__pagination__page.is-active::after {
    animation: none !important; width: 100%; }
}

.feature .stack { --header-h: 51px;
  --stack-h: calc(var(--under-h) + var(--over-h) - var(--v));
  --stack-top: calc((100svh + var(--header-h)) / 2 - var(--stack-h) / 2);
  --pin: calc(var(--stack-top) + var(--under-h));
  --runway: calc(100svh - var(--pin) + var(--v));
  position: relative; }
.feature .stack-stick { position: sticky; top: calc(var(--pin) - var(--stick-h, 99999px)); }
.feature .stack-runway { height: 0; }
.has-stack-js .feature .stack-runway { height: var(--runway); }

.is-noanim .feature .stack-runway { height: 0 !important; }
@media (prefers-reduced-motion: reduce) {
  html:not(.is-forceanim) .feature .stack-runway { height: 0 !important; }
}

.is-noanim .feature .sec06__cover, .is-noanim .feature .sec09__cover { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  html:not(.is-forceanim) .feature .sec06__cover,
  html:not(.is-forceanim) .feature .sec09__cover { visibility: hidden; }
}

.feature .sec01__box { position: relative; opacity: 0; transition: opacity .8s; }
.feature .sec01__box.is-inview { opacity: 1; }
.feature .sec01__thum img { width: 75rem; height: 90rem; object-fit: cover; }
.feature .sec01__ttl { position: absolute; inset: 0; font-size: 4.4rem; line-height: 1.2; letter-spacing: .025em; color: #fff; }
.feature .sec01__ttl span { position: absolute; display: block; }

.feature .sec01__ttl1 { top: 23.55rem; left: 2.8rem; width: 23.363rem; margin-top: -1.041rem; }
.feature .sec01__ttl2 { top: 48.45rem; right: 2.91rem; text-align: right; margin-top: -0.941rem; }
.feature .sec01__ttl3 { top: 75.15rem; left: 20.055rem; width: 32.915rem; margin-top: -1.041rem; }

.feature .sec01__ttl span, .feature .leftcont__ttl span,
.feature .look-sec__label, .feature .sec13__label { white-space: pre; }

.feature .sec02 { position: relative; margin-top: 16rem; padding: 18rem 0 16.5rem; }

.feature .sec02::before { content: ""; position: absolute; z-index: 0; top: 0; left: 50%;
  width: 170rem; height: 173.8rem; margin-left: -85rem; border-radius: 50%; background: #F5FAFC; }
.feature .sec02 > * { position: relative; z-index: 1; }

.feature .sec02__ttl { font-size: 5.2rem; line-height: 1.5; letter-spacing: .025em; text-align: center; color: #ED9FB0;
  top: -1.95rem; }
.feature .sec02__ttl.-sweat { margin-top: 11.9rem; color: #A5CDEF; }

.feature .sec02__rule { margin: 10.79rem auto 0; width: 68rem; height: .2rem; background: #CED2D3; }
.feature .sec02__price { margin-top: 1.4rem; font-size: 2.4rem; line-height: 1.25; letter-spacing: .025em;
  top: -0.5rem;

  font-variation-settings: 'INKT' 0, 'wght' 600, 'wdth' 100, 'slnt' 0;
  text-align: center; color: #ED9FB0; }
.feature .sec02__price.-sweat { color: #A5CDEF; }

.feature .sec02__slider { margin-top: 6rem; }
.feature .sec02__slider .splide__slide { position: relative; }

.feature .sec02__slider .splide__slide > a { position: relative; }
.feature .sec02__slider img { width: 20rem; height: 30rem; }

.feature .sec02__slider.-sweat { margin-left: -1.5rem; width: 76.5rem; }
.feature .sec02__slider.-sweat img { width: 24rem; height: 30rem; }

.feature .sec02__slider img.slide__badge { position: absolute; top: .9rem; left: -1rem; width: 10rem; height: 10rem; }

.feature .sec02__slider.-sweat img.slide__badge { top: .3rem; left: -2.9rem; }

.feature .sec02__slider .splide__slide { text-align: center; }
.feature .slide__label { margin-top: 3.41rem; font-size: 2rem; line-height: 2; letter-spacing: .025em;
  position: relative; top: -1.253rem;

  display: inline-block; padding: 0; white-space: nowrap;
  text-align: center; color: #ED9FB0; }

.feature .slide__label::after { content: ""; position: absolute; left: 0; right: 0;
  top: calc(100% - .15rem); height: .2rem;
  background-image: repeating-linear-gradient(to right, currentColor 0 .2rem, transparent .2rem .6rem); }

.feature .sec02__slider.-sweat .slide__label { margin-top: .8rem; color: #A5CDEF; }

.feature .sec03 { margin-top: 20.05rem; }

.feature .sec03 .look-sec__label.-a { top: 20.04rem; left: 4rem; }
.feature .sec03 .look-sec__label.-b { top: 51.54rem; right: 3.391rem; }
.feature .sec03 .look-sec__label.-c { top: 84.14rem; right: 8.2rem; }
.feature .sec03 .look-sec__label.-b, .feature .sec03 .look-sec__label.-c { text-align: right; }

.feature .sec04 { margin-top: 8rem; }
.feature .sec04__look { margin: 0 auto; width: 66rem; }
.feature .sec04__look img { width: 66rem; height: 82.5rem; }
.feature .sec04__credit { margin: 5rem auto 0; max-width: 57.8930rem; height: 8.0000rem; }

.feature .stack01 { margin-top: 18.4rem;
  --under-h: 93.75rem;
  --over-h: 65rem;
  --v: 79.375rem;

  --stack-h: 93.75rem; }
.feature .sec05 { margin-top: 0; }
.feature .sec05__look img { width: 75rem; height: 50rem; }

.feature .sec05 .look-sec__label.-a { top: 6.89rem; left: 60.067rem; --ink: 2.443rem; }
.feature .sec05 .look-sec__label.-b { top: 43.79rem; right: 64.024rem; text-align: right; }
.feature .sec06__under { margin-top: 1.05rem; }
.feature .sec06__look img { width: 75rem; height: 93.75rem; }

.feature .sec06__cover { position: relative; margin: -79.375rem 0 0 11.5rem; width: 52rem; }

.feature .sec06__cover img { width: 52rem; height: 65rem; outline: .4rem solid #fff; }
.feature .sec06__label { position: absolute; top: 58.02rem; left: 0; width: 52rem;
  font-size: 3.6rem; line-height: 1.2; letter-spacing: .025em; text-align: center; color: #fff;

  margin-top: -0.935rem;
  text-transform: uppercase; }
.feature .sec06__credit { margin: 19.375rem auto 0; max-width: 57.3570rem; height: 8.0000rem; }

.feature .sec07 { margin-top: 18.45rem; }

.feature .sec07 .look-sec__label.-a { top: 30.19rem; left: 2.8rem; line-height: 1.2; }
.feature .sec07 .look-sec__label.-b { top: 64.09rem; right: 4.491rem; text-align: right; }
.feature .sec07 .look-sec__label.-c { top: 73.39rem; left: 55.6rem; --ink: 2.443rem; }

.feature .stack02 { margin-top: 8rem;
  --under-h: 93.75rem;
  --over-h: 93.75rem;
  --v: 93.75rem; }
.feature .sec08 { margin-top: 0; }
.feature .sec08__look { margin: 0 auto; width: 66rem; }
.feature .sec08__look img { width: 66rem; height: 82.5rem; }
.feature .sec08__credit { margin: 5rem auto 0; max-width: 56.0133rem; height: 8.0000rem; }
.feature .sec09__under { margin-top: 18.45rem; }
.feature .sec09__look img { width: 75rem; height: 93.75rem; }
.feature .sec09__cover { position: relative; margin-top: -93.75rem; }
.feature .sec09__cover img { width: 75rem; height: 93.75rem; }

.feature .sec09__cover .look-sec__label.-a { top: 31.34rem; right: 8.1rem; text-align: right; --ink: 2.443rem; }
.feature .sec09__cover .look-sec__label.-b { top: 39.94rem; right: 3.291rem; text-align: right; }
.feature .sec09__cover .look-sec__label.-c { top: 71.44rem; left: 4.5rem; --ink: 2.443rem; }
.feature .sec09__credit { margin: 5rem auto 0; max-width: 57.3586rem; height: 8.0000rem; }

.feature .sec10 { margin-top: 18.4rem; }
.feature .sec10__look { margin: 0 auto; width: 54rem; }
.feature .sec10__look img { width: 54rem; height: 67.5rem; }
.feature .sec10__credit { margin: 5rem auto 0; max-width: 14.2563rem; height: 4.0000rem; }

.feature .sec11 { margin-top: 18.45rem; }
.feature .sec11__look img { width: 75rem; height: 93.75rem; }

.feature .sec11 .look-sec__label.-a { top: 26.29rem; left: 4rem; line-height: 1.2; }
.feature .sec11 .look-sec__label.-b { top: 44.09rem; right: 51.091rem; text-align: right; }
.feature .sec11 .look-sec__label.-c { top: 68.89rem; right: 4.09rem; text-align: right; line-height: 1.2; }

.feature .sec12 { margin-top: 8rem; }
.feature .sec12__credit { margin: 5rem auto 0; max-width: 41.3539rem; height: 8.0000rem; }

.feature .sec13 { margin-top: 18.4rem; }
.feature .sec13__box { position: relative; }
.feature .sec13__look { margin-left: 6.556rem; width: 61.888rem; transform-origin: 50% 50%; }
.feature .sec13__look img { width: 61.888rem; height: 74.614rem; }
.feature .sec13__labels { position: absolute; inset: 0; pointer-events: none; }
.feature .sec13__label { position: absolute; display: block; color: #fff; font-size: 4.4rem; line-height: 0.98;
  margin-top: -1.82rem;
  letter-spacing: .025em; text-transform: uppercase; transform: rotate(5.0003deg); transform-origin: 0 100%; }

.feature .sec13__label.-a { top: 8.29rem; left: 42.051rem; width: 13.374rem; --d: 1.2s; }
.feature .sec13__label.-b { top: 44.67rem; left: 13.14rem; width: 7.456rem; --d: 1.6s; }
.feature .sec13__label.-c { top: 63.92rem; left: 43.204rem; width: 11.923rem; --d: 2s; }

.feature .sec14 { margin-top: 19.99rem; }
.feature .sec14__staff { margin: 0 auto; width: 60rem; font-size: 2rem; line-height: 2;

  position: relative; top: -1.2rem;
  letter-spacing: .025em; text-align: center; color: #7C8183; }

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

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

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

  .feature { --pcu: 0.0714286vw; }

  .feature .frame { display: flex; align-items: stretch; }

  .feature .frame-side { position: relative; flex: 1 1 0; }
  .feature .frame-side.-mv { flex: 0 0 auto; width: 50%; }

  .feature .frame-side.-mv .frame-side__inner { --rail-h: calc(100vh - 80px);
    height: var(--rail-h); width: 100%; }
  .feature .frame-side__inner { position: sticky; top: 80px; }

  .feature .frame-main { flex: 0 0 auto; width: 75rem; margin: 0 auto; }

  .feature .frame-main { padding-top: 8.5227rem; }

  .feature { background: #E4ECEC; }

  .feature .frame-main { background: #fff; }

  .feature .sec02 { margin-top: 0; }

  .feature .leftcont__box { position: relative; opacity: 0; transition: opacity .8s; }
  .feature .leftcont__box.is-inview { opacity: 1; }

  .feature .leftcont__box.is-inview .js-stagger__item { opacity: 0; }
  html.is-fv-ready .feature .leftcont__box.is-inview .js-stagger__item { opacity: 1; }

  .feature .leftcont__thum { height: var(--rail-h); width: 100%; }
  .feature .leftcont__thum img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

  .feature .leftcont__ttl { position: absolute; inset: 0; color: #fff;
    font-size: min(calc(37 * var(--pcu)), calc(var(--rail-h) * 0.04625));
    line-height: 1.2; letter-spacing: .025em; }
  .feature .leftcont__ttl span { position: absolute; display: block; }

  .feature .leftcont__ttl1 { top: calc(var(--rail-h) * 0.2712); left: calc(30 * var(--pcu)); width: calc(197 * var(--pcu)); }
  .feature .leftcont__ttl2 { top: calc(var(--rail-h) * 0.5378); left: calc(608 * var(--pcu)); width: calc(62 * var(--pcu)); text-align: right; }
  .feature .leftcont__ttl3 { top: calc(var(--rail-h) * 0.8555); left: calc(196 * var(--pcu)); width: calc(277 * var(--pcu)); }

  .feature .stack { --header-h: 80px; }
}