@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; transition: opacity 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
html.js-anim .js-reveal.is-inview { opacity: 1; }

.feature .js-rise__mask { display: block; overflow: hidden; }
.feature .js-rise__in { display: block; transition: transform 1s ease; }
.feature .js-rise__in.-d1 { transition-delay: .3s; }
.feature .js-rise__in.-d2 { transition-delay: .6s; }
html.js-anim .feature .js-rise .js-rise__in { transform: translateY(110%); }
html.js-anim .feature .js-rise.is-inview .js-rise__in { transform: translateY(0); }

.feature .js-line { transform-origin: top center; transition: transform .8s cubic-bezier(0.25, 1, 0.5, 1); }
html.js-anim .feature .js-line { transform: scaleY(0); }
html.js-anim .feature .js-line.is-inview { transform: scaleY(1); }

.is-noanim .js-reveal { transition: none !important; opacity: 1 !important; }
.is-noanim .feature .js-rise .js-rise__in, .is-noanim .feature .js-line { transition: none !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  html:not(.is-forceanim) .js-reveal { transition: none !important; opacity: 1 !important; }
  html:not(.is-forceanim) .feature .js-rise .js-rise__in,
  html:not(.is-forceanim) .feature .js-line { transition: none !important; transform: none !important; }
  html:not(.is-forceanim) .feature .acc__body, html:not(.is-forceanim) .feature .acc__btn { transition: none !important; }
  html:not(.is-forceanim) { scroll-behavior: auto; }
}

.feature { box-sizing: border-box; color: #000; margin: 0 auto; position: relative; width: 100%;
  font-family: "shippori-mincho-1", serif;
  font-weight: 400; font-style: normal; font-size: 2rem;
  text-spacing-trim: space-all; line-break: strict;
  background: #dde6e8;  }
.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 a { color: #000; 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 :where(.mv, .intro, .look, .item-sec, .all) { position: relative; }

.feature .mv__ttl, .feature .leftcont__ttl, .feature .intro__ttl, .feature .sec__ttl, .feature .acc__btn, .feature .all__btn {
  font-family: "cofo-raffine-1", serif; font-weight: 400; }
.feature .mv__feat, .feature .mv__season, .feature .leftcont__feat, .feature .leftcont__season, .feature .credit, .feature .staff {
  font-family: "neue-haas-grotesk-display-1", Arial, sans-serif; font-weight: 300; }
.feature .sec__tag { font-family: "helvetica-lt-pro-1", Arial, sans-serif; font-weight: 300; }
.feature .intro__txt, .feature .acc__body { font-family: "Shippori Mincho", serif; font-weight: 400; }

.feature .intro__txt, .feature .acc__body { letter-spacing: -.12em; }

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

.feature .frame-side.-mv { display: none; }
.feature .mv { margin-top: 0rem; }

.feature :is(.mv__thum, .leftcont__thum) a { display: block; height: 100%; }
.feature .mv__thum img { width: 75rem; height: 100rem; object-fit: cover; }
.feature .mv__copy { position: absolute; inset: 0; color: #fff; text-align: center; pointer-events: none; }
.feature .mv__ttl { position: absolute; left: 0; right: 0; top: 45.23rem; font-size: 11.2rem; line-height: 1.1; letter-spacing: 0; }
.feature .mv__feat { position: absolute; left: 0; right: 0; top: 56.36rem; font-size: 3rem; line-height: 1.2; letter-spacing: .05em; }
.feature .mv__season { position: absolute; left: 0; right: 0; top: 92.56rem; font-size: 2.4rem; line-height: 1.2; letter-spacing: .05em; }

.feature .intro__ttl { margin-top: 15.636rem; text-align: center; font-size: 10rem; line-height: 1.2; letter-spacing: 0; }
.feature .intro__line { margin-top: 0.867rem; margin-left: auto; margin-right: auto; width: max(1px, .1rem); height: 12rem; background: #1c1816; }
.feature .intro__txt { margin-top: 3.8rem; text-align: center; font-size: 2.4rem; line-height: 4.8rem; }

.feature .sw01 { margin-top: 19.15rem; }
.feature .sw02 { margin-top: 20.05rem; }
.feature .sw03 { margin-top: 19.147rem; }
.feature .sw04 { margin-top: 19.011rem; width: 70rem; margin-left: 5rem; }
.feature .sw05 { margin-top: 4rem; width: 64rem; margin-left: 5.5rem; }
.feature .sw06 { margin-top: 20.26rem; }

.feature .js-swiper { overflow: hidden; position: relative; z-index: 0; }
.feature .js-swiper .swiper-wrapper { display: flex; margin: 0; padding: 0; position: relative; z-index: 1; transition-property: transform; box-sizing: content-box; }
.feature .js-swiper .swiper-slide { flex-shrink: 0; list-style-type: none; margin: 0; position: relative; width: 100%; }
.feature .swiper-slide a { display: block; }
.feature .swiper-slide img { width: 100%; height: 112.5rem; object-fit: cover; }
.feature .sw04 .swiper-slide img { height: 105rem; }
.feature .sw05 .swiper-slide img { height: 96rem; }
.feature .ph01 { margin-top: 3.45rem; width: 68rem; margin-left: auto; margin-right: auto; }
.feature .ph02 { margin-top: 0.754rem; width: 54rem; margin-left: auto; margin-right: auto; }
.feature .ph03 { margin-top: 3.45rem; width: 68rem; margin-left: auto; margin-right: auto; }
.feature .ph04 { margin-top: -1.21rem; width: 54rem; margin-left: auto; margin-right: auto; }
.feature .ph05 { margin-top: 3.45rem; width: 68rem; margin-left: auto; margin-right: auto; }
.feature .ph06 { margin-top: -0.995rem; width: 54rem; margin-left: auto; margin-right: auto; }
.feature .ph07 { margin-top: 3.45rem; width: 68rem; margin-left: auto; margin-right: auto; }
.feature :is(.ph01, .ph02, .ph03, .ph04, .ph05, .ph06, .ph07) a { display: block; }
.feature :is(.ph01, .ph03, .ph05, .ph07) img { width: 100%; height: 102rem; object-fit: cover; }
.feature .ph02 img { width: 100%; height: 81rem; object-fit: cover; }
.feature .ph04 img { width: 100%; height: 64rem; object-fit: cover; }
.feature .ph06 img { width: 100%; height: 72rem; object-fit: cover; }

.feature .sec__ttl { text-align: center; font-size: 7rem; line-height: 1.3; }
.feature .ttl01 { margin-top: 12.937rem; letter-spacing: .025em; }
.feature .ttl02 { margin-top: 19.31rem; letter-spacing: .015em; }
.feature .ttl03 { margin-top: 1.107rem; letter-spacing: .025em; }
.feature .ttl04 { margin-top: 13.062rem; letter-spacing: .025em; }
.feature .sec__tag { font-size: 2.2rem; letter-spacing: 0; }

.feature :is(.mv__ttl, .leftcont__ttl, .intro__ttl, .sec__ttl) { display: flow-root; }
.feature .ttl-svg { display: block; position: relative; max-width: none; height: auto; margin: 0 auto; }

.feature .mv__ttl .js-rise__mask { margin: .125rem 0 2.744rem; }
.feature .mv__ttl .ttl-svg { width: 62.592rem; left: .796rem; margin: -2.325rem auto -3.729rem; }
.feature :is(.mv__ttl, .leftcont__ttl) .js-rise__mask.is-risen, .is-noanim .feature :is(.mv__ttl, .leftcont__ttl) .js-rise__mask { overflow: visible; }

.feature :is(.mv__feat, .leftcont__feat) .js-rise__in.-d1 { transition-delay: .5s; }

.feature .mv__feat .js-rise__mask { height: 2.85rem; }
.feature .intro__ttl .ttl-svg { width: 50.504rem; left: .102rem; margin-top: .725rem; margin-bottom: 2.817rem; }
.feature .ttl01 .js-rise__mask { margin: .887rem 0 1.5rem; }
.feature .ttl01 .ttl-svg { width: 43.788rem; left: -.206rem; }
.feature .ttl02 .js-rise__mask { margin: 1.1rem 0 2.986rem; }
.feature .ttl02 .ttl-svg { width: 31.332rem; left: .203rem; }
.feature .ttl03 .js-rise__mask { margin: .887rem 0 1.5rem; }
.feature .ttl03 .ttl-svg { width: 29.839rem; left: .144rem; }
.feature .ttl04 .js-rise__mask { margin: .863rem 0 3.275rem; }
.feature .ttl04 .ttl-svg { width: 51.879rem; left: -.098rem; }
.feature .tag01 { margin-top: 1.129rem; text-align: center; line-height: 1.8; }
.feature .row01 { margin-top: 0.858rem; display: flex; justify-content: space-between; align-items: baseline; width: 54rem; margin-left: auto; margin-right: auto; }
.feature .row01__tag { line-height: 1.45; }

.feature .credit { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; column-gap: 1rem; margin-left: auto; margin-right: auto;
  font-size: 2.2rem; line-height: 4.4rem; letter-spacing: .05em; }
.feature .credit .item { position: relative; white-space: nowrap; line-height: 4.4rem; }
.feature .credit .link { color: #000; }
.feature .credit .item.-noline { border-bottom: none; }
.feature .cr01 { margin-top: 1.813rem; max-width: 47.6906rem; height: 8.8000rem; }
.feature .cr02 { margin-top: 2.168rem; max-width: 37.1063rem; height: 4.4000rem; }
.feature .cr03 { margin-top: 1.804rem; max-width: 62.9906rem; height: 4.4000rem; }
.feature .cr04 { margin-top: 1.29rem; max-width: 28.1797rem; height: 4.4000rem; }
.feature .cr05 { margin-top: 1.792rem; max-width: 60.4141rem; height: 4.4000rem; }
.feature .cr06 { margin-top: 1.837rem; max-width: 64.9562rem; height: 4.4000rem; }
.feature .row01 .cr07 { margin: 0; justify-content: flex-end; }
.feature .credit07 { max-width: 19.0406rem; height: 4.4000rem; }
.feature .cr08 { margin-top: 1.755rem; max-width: 65.9031rem; height: 8.8000rem; }

.feature .acc01 { margin-top: 5.945rem; }
.feature .acc02 { margin-top: 5.93rem; }
.feature .acc__body { position: relative; height: 8.1rem; overflow: hidden; text-align: center; font-size: 2.4rem; line-height: 4.8rem;
  transition: height .5s cubic-bezier(0.25, 0.1, 0.25, 1); }
.feature .acc__body::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(221, 230, 232, .45) 0%, rgba(221, 230, 232, 1) 100%);
  transition: opacity .5s cubic-bezier(0.25, 0.1, 0.25, 1); }
.feature .acc.is-open .acc__body { height: 19.2rem; }
.feature .acc.is-open .acc__body::after { opacity: 0; }

.feature .acc__btn { display: flex; align-items: center; justify-content: center; margin: 2.3rem auto 0; padding: 1.2rem 4rem;
  background: none; color: #000; cursor: pointer; font-size: 3.6rem; line-height: 1; letter-spacing: .05em;
  transition: margin-top .5s cubic-bezier(0.25, 0.1, 0.25, 1); }
.feature .acc.is-open .acc__btn { margin-top: 5rem; }

.feature .acc__label { position: relative; top: .5rem; }
.feature .acc__icon { position: relative; flex: 0 0 auto; width: 2.1rem; height: 2.1rem; margin-left: 1.9rem; }
.feature .acc__icon::before, .feature .acc__icon::after { content: ""; position: absolute; background: #000; }
.feature .acc__icon::before { left: 0; top: 50%; width: 100%; height: .2rem; margin-top: -.1rem; }
.feature .acc__icon::after { top: 0; left: 50%; width: .2rem; height: 100%; margin-left: -.1rem; }
.feature .acc.is-open .acc__icon::after { display: none; }

.feature .all { margin-top: 15.248rem; display: flow-root; padding-bottom: 16.2rem; background: #fff; }
.feature .all__btn { margin-top: 16.2rem; }
.feature .all__btn a { display: flex; align-items: center; justify-content: center; width: 48rem; height: 11.1rem; margin: 0 auto;
  border: max(1px, .225rem) solid #1c1816; color: #1c1816;    font-size: 5.8rem; line-height: 1; letter-spacing: .05em;

  padding: 1.9rem 0 0 .4rem; }
.feature .staff { margin-top: 4.82rem; text-align: center; font-size: 2.2rem; line-height: 4.4rem; letter-spacing: .05em; }

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

  html { font-size: min(0.438095vw, 6.13333px); }

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

  .feature { --pcu: 0.0714286vw; --rail-top: 80px; }

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

  .feature .frame-main { flex: 0 0 50%; width: 50%; background: #dde6e8; overflow-x: clip; }

  .feature .frame-main__inner { width: min(32.857143vw, 460px); }
  .feature .mv-wrap { display: none; }

  .feature .all { box-shadow: 0 0 0 100vmax #fff; clip-path: inset(0 -100vmax); }

  .feature .frame-side { position: relative; }
  .feature .frame-side.-mv { display: block; flex: 0 0 50%; width: 50%; }
  .feature .frame-side__inner { position: sticky; top: var(--rail-top); }
  .feature .frame-side.-mv .frame-side__inner { --rail-h: calc(100vh - var(--rail-top)); height: var(--rail-h); width: 100%; overflow: hidden; }
  .feature .leftcont__box { position: relative; height: 100%; }
  .feature .leftcont__thum { height: var(--rail-h); width: 100%; }
  .feature .leftcont__thum img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }

  .feature .leftcont__copy { position: absolute; inset: 0; color: #fff; text-align: center; pointer-events: none; }

  .feature .leftcont__center { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); }
  .feature .leftcont__ttl { font-size: calc(86 * var(--pcu)); line-height: 1.1; letter-spacing: 0; }

  .feature .leftcont__ttl .js-rise__mask { margin: calc(-0.375 * var(--pcu)) 0 calc(22.215 * var(--pcu)); }
  .feature .leftcont__ttl .ttl-svg { width: calc(495 * var(--pcu)); left: calc(6.75 * var(--pcu)); margin: calc(-23.5 * var(--pcu)) auto calc(-37 * var(--pcu)); }

  .feature .leftcont__feat .js-rise__mask { height: calc(20.5 * var(--pcu)); margin-bottom: calc(5.9 * var(--pcu)); }
  .feature .leftcont__feat { margin-top: calc(-9.6 * var(--pcu)); font-size: calc(22 * var(--pcu)); line-height: 1.2; letter-spacing: .05em; }
  .feature .leftcont__season { position: absolute; left: 0; right: 0; top: calc(var(--rail-h) * 0.92206 - 3.5 * var(--pcu));
    font-size: calc(20 * var(--pcu)); line-height: 1.2; letter-spacing: .05em; }
}