@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; }
.is-noanim .js-fade, .is-noanim .js-anime { transition: none !important; opacity: 1 !important; }

.is-noanim .mv__box, .is-noanim .pcfv__inner { transition: none !important; opacity: 1 !important; filter: none !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  html:not(.is-forceanim) .js-fade, html:not(.is-forceanim) .js-anime { transition: none !important; opacity: 1 !important; }
  html:not(.is-forceanim) .mv__box, html:not(.is-forceanim) .pcfv__inner { transition: none !important; opacity: 1 !important; filter: none !important; transform: 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: "toppan-bunkyu-gothic-pr6n", "Yu Mincho", "游明朝", YuMincho, serif;
  font-weight: 400; font-style: normal;
  font-size: 2.4rem;

  font-feature-settings: "palt";
  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 .pc { display: none; }
.feature .sp { display: contents; }
.feature a { color: #000; text-decoration: none; }
.feature img { display: block; vertical-align: bottom; max-width: 100%; height: auto; }
.feature ul { list-style: none; }

.feature .en { font-family: "pragmatica", "Helvetica Neue", Arial, sans-serif; font-weight: 400; font-style: normal; letter-spacing: .05em; }
.feature .en.-bold { font-weight: 700; }

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

  .feature .credit a { transition: opacity .3s; }
  .feature .credit a:hover { opacity: .7; }
}

.feature .lk > a, .feature .sec04__btn { display: block; background: linear-gradient(#fff, #fff) center / calc(100% - 2px) calc(100% - 2px) no-repeat; }

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

.feature .mv { position: sticky; top: var(--cms-header-h, 0px); z-index: 0; margin-top: 0rem; }
.feature .mv__box { position: relative; opacity: 0; filter: blur(1.2rem); transition: opacity .8s, filter .8s; }
.feature .mv__box.is-inview { opacity: 1; filter: blur(0); }
.feature .mv__thum img { width: 75rem; height: 116rem; }

.feature .fvlock { height: 0; }
.feature .fvlock.-pc { display: none; }
.js-lock .feature .fvlock { height: var(--fv-lock, 70.5svh); }
.is-noanim .feature .fvlock { height: 0 !important; }
@media (prefers-reduced-motion: reduce) {
  html:not(.is-forceanim) .feature .fvlock { height: 0 !important; }
}

.feature .cover { position: relative; z-index: 1; background: #fff; padding-bottom: 16rem; display: flow-root; }

.feature .lead { margin-top: 0rem; background: #ededed; padding: 10rem 0 11.9rem; }
.feature .lead__txt { text-align: center; font-size: 2.4rem; line-height: 4.8rem; letter-spacing: .05em; color: #000; }
.feature .lead__txt .en { font-size: 2.5rem; }

.feature .lead__txt .-s25 { font-size: 2.5rem; }
.feature .lead__txt .en.-bold { font-size: 2.7rem; }
.feature .lead__news { text-decoration: underline; text-underline-offset: .2em; }

.feature .ttlband { height: 5.4rem; line-height: 5.4rem; text-align: center; background: #000; color: #fff;
  font-weight: 600; font-size: 3.7rem; }

.feature .sec01__ttl { margin-top: 12rem; display: flex; justify-content: flex-end; padding-right: 3rem; }
.feature .sec01__ttl .ttlband { width: 40.4rem; letter-spacing: .1em; }
.feature .sec01__txt { margin-top: 1.25rem; position: relative; z-index: 1;
  text-align: right; padding-right: 3.5rem; font-size: 2.3rem; line-height: 4.8rem; letter-spacing: .1em; }
.feature .sec01__txt .-ls05 { letter-spacing: .05em; }
.feature .sec01__txt .en { font-size: 2.4rem; }

.feature .sec01__lk01 { margin-top: -4.355rem; position: relative; z-index: 0; }
.feature .sec01__lk01 > a { width: 70.5rem; margin-left: 2.25rem; }
.feature .sec01__lk01 > a img { width: 70.5rem; height: 94rem; }

.feature .sec01__lk02 { margin-top: 18rem; position: relative; z-index: 0; }
.feature .sec01__lk02 > a { width: 63rem; margin-left: 6rem; }
.feature .sec01__lk02 > a img { width: 63rem; height: 84rem; }

.feature .sec02__ttl { margin-top: 16rem; display: flex; justify-content: flex-start; padding-left: 5.5rem; }
.feature .sec02__ttl .ttlband { width: 39.3rem; letter-spacing: .1em; }
.feature .sec02__txt { margin-top: 1.25rem; position: relative; z-index: 1;
  text-align: left; padding-left: 6rem; font-size: 2.3rem; line-height: 4.8rem; letter-spacing: .1em; }
.feature .sec02__slide { margin-top: -2.245rem; position: relative; z-index: 0; }

.feature .sec03__ttl { margin-top: 16rem; display: flex; justify-content: flex-end; padding-right: 3rem; }
.feature .sec03__ttl .ttlband { width: 57.5rem; letter-spacing: .075em; }
.feature .sec03__txt { margin-top: 1.25rem; position: relative; z-index: 1;
  text-align: right; padding-right: 3.5rem; font-size: 2.3rem; line-height: 4.8rem; letter-spacing: .1em; }
.feature .sec03__slide { margin-top: -4.251rem; position: relative; z-index: 0; }

.feature .slider.-a { width: 100%; }
.feature .slider.-a .splide__slide img { width: 60rem; height: 80rem; }

.feature .slider.-b { width: 70.5rem; margin: 0 auto; }
.feature .slider.-b .splide__slide img { width: 70.5rem; height: 94rem; }

.feature .progress { margin-top: 1.5rem; display: flex; justify-content: flex-end; gap: 1.2rem; padding-right: 2.25rem; }
.feature .progress__seg { position: relative; display: block; width: 4.5rem; height: .3rem; background: #bebebe; overflow: clip; }
.feature .progress__seg::after { content: ""; position: absolute; left: 0; top: 0; width: 0; height: 100%; background: #000;
  transition: width 3s linear; }
.feature .progress__seg.is-on::after { width: 100%; }

.feature .progress__seg.is-reset::after { transition: none !important; }
.is-noanim .feature .progress__seg::after { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  html:not(.is-forceanim) .feature .progress__seg::after { transition: none !important; width: 100%; }
}

.feature .sec04__check { margin-top: 17.963rem; display: block; position: relative; z-index: 1; margin-left: 7.403rem; width: 25.704rem; }
.feature .sec04__check img { width: 25.704rem; height: 9.073rem; }
.feature .sec04__lk { margin-top: -4.836rem; display: block; position: relative; z-index: 0; }
.feature .sec04__lk > img { width: 75rem; height: 72rem; }
.feature .sec04__all { position: absolute; left: 22.468rem; top: 5.8rem; width: 19.05rem; }
.feature .sec04__all img { width: 19.05rem; height: 8.4rem; }
.feature .sec04__items { position: absolute; left: 48.24rem; top: 65.624rem; width: 21.633rem; }
.feature .sec04__items img { width: 21.633rem; height: 8.52rem; }

.feature .creditbox { position: absolute; z-index: 2; display: flex; --rot: 0deg; --rot0: calc(var(--rot) * 2); --ty0: 10rem; }
.feature .creditbox.js-fade { opacity: 1; transition: none; }

.feature .creditbox__in { display: flex; align-items: center; justify-content: center;
  width: 100%; flex: 1 1 auto;
  background: rgba(237, 237, 237, .5);
  --tx: var(--tx0);
  --ty: var(--ty0);
  --rot-in: var(--rot0);
  opacity: 0;
  transform: translate(var(--tx), var(--ty)) rotate(var(--rot-in));
  transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94); }

.feature .creditbox.is-inview > .creditbox__in { opacity: 1; --tx: 0rem; --ty: 0rem; --rot-in: var(--rot); }

.is-noanim .feature .creditbox__in { transition: none !important; opacity: 1 !important; --tx: 0rem; --ty: 0rem; --rot-in: var(--rot); }
@media (prefers-reduced-motion: reduce) {
  html:not(.is-forceanim) .feature .creditbox__in { transition: none !important; opacity: 1 !important; --tx: 0rem; --ty: 0rem; --rot-in: var(--rot); }
}

.feature .creditbox.-c01 { --rot: 3.5deg;  --tx0: -4rem; left: -4.55rem; top: 62.7rem; width: 52.1rem; min-height: 38.8rem; }
.feature .creditbox.-c02 { --rot: -4.5deg; --tx0: 4rem;  left: 29.4rem; top: 54.3rem; width: 53.2rem; min-height: 38.4rem; }
.feature .creditbox.-c03 { --rot: 5deg;    --tx0: -4rem; left: -7.9rem; top: 46.26rem; width: 51.8rem; min-height: 38.4rem; }

.feature .creditbox.-c04 { --rot: -3deg;   --rot0: calc(var(--rot) * -1);
  --tx0: -4rem; left: -5.45rem; top: 62.25rem; width: 51.9rem; min-height: 37.4rem; }

.feature .credit { margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center;
  align-content: flex-start; column-gap: 0; text-align: center; }

.feature .credit01 { max-width: 47.3972rem; min-height: 20.8320rem; }
.feature .credit02 { max-width: 43.4657rem; min-height: 20.8320rem; }
.feature .credit03 { max-width: 41.3478rem; min-height: 26.0400rem; }
.feature .credit04 { max-width: 44.0456rem; min-height: 26.0400rem; }

.feature .credit .item { display: block; position: relative; line-height: 5.208rem; letter-spacing: .05em; color: #000;
  font-family: "scotch-display-compressed", "Times New Roman", serif; font-weight: 300; font-style: normal;
  font-size: 2.8rem;
  white-space: nowrap; }

.feature .credit .item:not(:last-child)::after { content: "/"; }
.feature .credit .link { font-size: 2.8rem; color: #000;
  font-family: "scotch-display-compressed", "Times New Roman", serif; font-weight: 300; font-style: normal; letter-spacing: .05em; }
.feature .credit .brand { font-size: 2.6rem; }
.feature .credit .item.-noline { border-bottom: none; }

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

  html { font-size: min(0.4666667vw, 6.5333333px); }

  .feature .pc { display: contents; }
  .feature .sp { display: none; }

  .feature .fvlock.-pc { display: block; }
  .feature .fvlock.-sp { display: none; }

  .feature { --pcu: min(0.0714286vw, 1px); }

  .feature .frame { display: flex; align-items: stretch; justify-content: center;
    position: relative; z-index: 1; background: #ededed; }

  .feature .frame-main { flex: 0 0 auto; width: 75rem; padding-top: calc(40 * var(--pcu)); }

  .feature { --pc-header-h: 80px; }
  .feature .pcfv { position: sticky; top: var(--pc-header-h); z-index: 0;
    display: flex; align-items: center; justify-content: center;
    height: calc(100vh - var(--pc-header-h)); background: #fff; overflow: clip; }

  .feature .pcfv__inner { position: relative; margin: auto;
    width: min(100%, calc((100vh - var(--pc-header-h)) * 1400 / 840));
    aspect-ratio: 1400 / 840;
    opacity: 0; filter: blur(1.2rem); transition: opacity .8s, filter .8s; }
  .feature .pcfv__inner.is-inview { opacity: 1; filter: blur(0); }
  .feature .pcfv__thum { position: absolute; left: 4.64286%; top: 5.35714%; width: 73.57143%; height: 89.28571%; }
  .feature .pcfv__thum img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
  .feature .pcfv__ttl { position: absolute; left: 1.81714%; top: 5.48810%; width: 2.07929%; height: 28.79881%; }
  .feature .pcfv__ttl img { width: 100%; height: 100%; }
  .feature .pcfv__logo { position: absolute; left: 70.20857%; top: 77.83571%; width: 28.26357%; height: 19%; }
  .feature .pcfv__logo img { width: 100%; height: 100%; }
}