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

.js-wipe { transition: clip-path 1.4s cubic-bezier(0.37, 0, 0.63, 1) var(--d, 0s); }
.js-wipe.-fromLeft   { clip-path: inset(0 100% 0 0); }
.js-wipe-box.is-inview > .js-wipe { clip-path: inset(0); }
.js-wipe.is-inview   { clip-path: inset(0); }
.js-wipe-box { position: relative; }
.js-wipe-box > .js-wipe { display: block; }
.is-noanim .js-wipe { transition: none !important; clip-path: none !important; }

.is-noanim .js-reveal, .is-noanim .js-anime { transition: none !important; opacity: 1 !important; }
.is-noanim .mv__box, .is-noanim .leftcont__box { transition: none !important; opacity: 1 !important; filter: none !important; transform: 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; }
  html:not(.is-forceanim) .js-wipe { transition: none !important; clip-path: none !important; }
  html:not(.is-forceanim) .mv__box, html:not(.is-forceanim) .leftcont__box { transition: none !important; opacity: 1 !important; filter: none !important; transform: none !important; }
  html:not(.is-forceanim) .switch-img { transition: none !important; }
  html:not(.is-forceanim) { scroll-behavior: auto; }
}

.feature { box-sizing: border-box; color: #404040; margin: 0 auto; position: relative; width: 100%;
  font-family: "toppan-bunkyu-gothic-pr6n", sans-serif;
  font-weight: 400; font-style: normal;
  font-size: 2rem;
  text-spacing-trim: space-all;
  line-break: strict;
  background: #F0EEEA;  }
.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; font-size: inherit; }
.feature .pc { display: none; }

.feature .frame-side { 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; }

.feature .sec { display: flow-root; position: relative; background: var(--bg); }
.feature .sec01 { --bg: #F0EEEA; }
.feature .sec02 { --bg: #E1E1D8; }
.feature .sec03 { --bg: #F0EEEA; }
.feature .sec04 { --bg: #E1E1D8; }
.feature .sec05 { --bg: #F0EEEA; }
.feature .col { display: flow-root; width: 75rem; margin: 0 auto; }

.feature .end { display: flow-root; height: 0; }
.feature .end01 { margin-top: 10.4rem; }
.feature .end02 { margin-top: 10.911rem; }
.feature .end03 { margin-top: 10.901rem; }
.feature .end04 { margin-top: 10.911rem; }
.feature .end05 { margin-top: 18rem; }

.feature .mv__box { position: relative; opacity: 0; transition: opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1); }
.feature .mv__box.is-inview { opacity: 1; }
.feature .look03 { width: 75rem; margin-top: 0rem; }
.feature .mv__thum { position: relative; }
.feature .look03 .mv__photo { width: 75rem; height: 96rem; object-fit: cover; }
.feature .mv__frame, .feature .mv__title { position: absolute; }
.feature .mv__frame { top: 1.425rem; left: 0; width: 75rem; height: 93.15rem; }
.feature .mv__title { top: 27.75rem; left: 10.5rem; width: 54rem; height: 40.5rem; }

.feature .intro { margin-top: 9rem; white-space: nowrap; text-align: center; color: #121212;
  font-size: 2.4rem; line-height: 2.005; letter-spacing: .025em;
  font-feature-settings: "palt";  }
.feature .intro .en { font-family: "pragmatica", sans-serif; font-weight: 400; }

.feature .intro .release { position: relative; top: -.3rem; font-family: "pragmatica", sans-serif; font-weight: 700;
  text-decoration: underline; text-underline-offset: .2rem; }

.feature .who { text-align: center; }
.feature .who__rule { position: absolute; left: 0; right: 0; top: 2.454rem; height: .2rem; background: #404040; }
.feature .who__rule.js-wipe { transition: clip-path 1s ease; }
.feature .who__ttl { position: relative; z-index: 1; font-family: "the-seasons", serif; font-weight: 300;
  font-size: 5.6rem; line-height: .93; letter-spacing: .005em; text-transform: uppercase; color: #404040; white-space: nowrap; }
.feature .who__ttl span { position: relative; z-index: 1; display: inline-block; }

.feature .who__ttl span::before { content: ""; position: absolute; z-index: -1; left: 50%; top: -.196rem;
  width: var(--mask-w); height: 5.5rem; transform: translateX(-50%); background: var(--bg); }
.feature .who-hinano { --mask-w: 23.6rem; margin-top: 4.696rem; }
.feature .who-azusa { --mask-w: 50.5rem; margin-top: 6.9rem; }
.feature .who-chie { --mask-w: 30.9rem; margin-top: 4.696rem; }
.feature .who-komi { --mask-w: 16.1rem; margin-top: 6.9rem; }
.feature .who__id { text-align: center; font-family: "classico-urw", sans-serif; font-weight: 400;
  font-size: 2.2rem; line-height: 1; letter-spacing: -.005em; color: #404040; }
.feature .id-hinano { margin-top: 1.793rem; }

.feature .id-hinano .who__us { display: inline-block; transform: scaleX(1.0909); transform-origin: left center; margin-right: .6rem; }
.feature .id-azusa { margin-top: 1.793rem; }
.feature .id-chie { margin-top: 1.793rem; }
.feature .id-komi { margin-top: 1.793rem; }

.feature .ph { position: relative; }

.feature .ph a, .feature .splide__slide a { display: block; width: 100%; height: 100%;
  background: linear-gradient(#fff, #fff) center / calc(100% - 2px) calc(100% - 2px) no-repeat; }
.feature .ph img, .feature .splide__slide img { width: 100%; height: 100%; object-fit: cover; }
.feature .look04 { width: 55.5rem; height: 74rem; margin-top: 6.6rem; }
.feature .look05 { width: 66rem; height: 88rem; margin-top: 6.7rem; margin-left: 9rem; }
.feature .look06 { width: 70.5rem; height: 94rem; margin-top: 13.2rem; margin-left: 2.25rem; }
.feature .look07 { width: 63rem; height: 84rem; margin-top: 6.4rem; margin-left: 12rem; }
.feature .look10 { width: 51rem; height: 68rem; margin-top: 6.7rem; }
.feature .look17 { width: 52.5rem; height: 70rem; margin-top: 10.5rem; margin-left: 11.25rem; }
.feature .look18 { width: 69rem; height: 92rem; margin-top: 6.5rem; margin-left: 3rem; }
.feature .look21 { width: 60rem; height: 80rem; margin-top: 10.2rem; margin-left: 15rem; }
.feature .look24 { width: 52.5rem; height: 70rem; margin-top: 6.7rem; }
.feature .look25 { width: 64.5rem; height: 86rem; margin-top: 13.4rem; margin-left: 5.25rem; }
.feature .look28 { width: 64.5rem; height: 86rem; margin-top: 1.5rem; margin-left: 5.25rem; }
.feature .look36 { width: 66rem; height: 88rem; margin-top: 11rem; margin-left: 9rem; }
.feature .look39 { width: 66rem; height: 88rem; margin-top: 10.4rem; }
.feature .look40 { width: 51rem; height: 68rem; margin-top: 4.75rem; margin-left: 24rem; }

.feature .snap { position: relative; }
.feature .snap::before { content: ""; position: absolute; inset: 0; border: .2rem solid #404040; }
.feature .snap .ph, .feature .snap__label { position: absolute; z-index: 1; }

.feature .snap__label { background: var(--bg); }
.feature .snap01 { width: 55rem; height: 72.2rem; margin-top: 11.1rem; margin-left: 10rem; }
.feature .look12 { top: 2rem; left: 2rem; width: 51rem; height: 68rem; }
.feature .snap .look13 { top: 2rem; left: 53.5rem; width: 3rem; height: 13.2rem; }
.feature .snap .look14 { top: 56.8rem; left: -1.5rem; width: 3rem; height: 13.2rem; }
.feature .snap02 { width: 53rem; height: 70rem; margin-top: 12.2rem; }

.feature .snap02::before { border-top-width: 0; border-left-width: 0; }
.feature .look33 { top: 0; left: 0; width: 51rem; height: 68rem; }
.feature .snap .look35 { top: 0; left: 51.5rem; width: 3rem; height: 13.2rem; }

.feature .switcher { position: relative; }
.feature .switcher .switch-img { transition: opacity 1.2s ease; }
.feature .switcher .switch-img + .switch-img { position: absolute; inset: 0; }

.feature .switcher .switch-img:not(.is-current) { opacity: 0; pointer-events: none; }
.feature .switcher .switch-img.is-current { opacity: 1; }
.feature .switch-dots { position: absolute; z-index: 2; display: flex; gap: var(--dot-gap, 1.4rem); }
.feature .switch-dots button { display: block; width: var(--dot-size, 1.2rem); height: var(--dot-size, 1.2rem); padding: 0;
  border: .2rem solid #fff; border-radius: 50%; background: transparent; cursor: pointer; }
.feature .switch-dots .is-current { background: #fff; }

.feature .look07 .switch-dots { top: 2rem; right: 2.3rem; }
.feature .look18 .switch-dots { top: 2rem; left: 2.3rem; }
.feature .look21 .switch-dots { --dot-size: 1.263rem; --dot-gap: 1.474rem; top: 2.1rem; right: 2.421rem; }
.feature .look25 .switch-dots { top: 2rem; left: 2.3rem; }
.feature .look28 .switch-dots { top: 2rem; right: 2.3rem; }
.feature .look36 .switch-dots { top: 2rem; right: 2.3rem; }

.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; }
.feature .slide01 { margin-top: 14rem; }
.feature .slide01 .splide__slide { width: 57rem; height: 76rem; }
.feature .slide02 { margin-top: 6.6rem; }
.feature .slide02 .splide__slide { width: 63rem; height: 84rem; }

.feature .credit { display: flex; flex-wrap: wrap; align-content: flex-start; column-gap: .9em; font-size: 2.2rem; line-height: 2.09; }
.feature .credit.-left { justify-content: flex-start; }
.feature .credit.-center { justify-content: center; margin-left: auto; margin-right: auto; }
.feature .credit .item { display: inline-block; position: relative; line-height: 2.0788; white-space: nowrap; }
.feature .credit .link { font-family: "pragmatica", sans-serif; font-weight: 300; font-style: normal;
  font-size: 2.2rem; letter-spacing: .043em; color: #404040; }
.feature .credit01 { margin-top: 2.801rem; margin-left: 9rem; max-width: 56.6909rem; height: 13.7940rem; }
.feature .credit02 { margin-top: 2.801rem; max-width: 52.6691rem; height: 18.3920rem; }
.feature .credit03 { margin-top: 2.801rem; margin-left: 3rem; max-width: 66.5020rem; height: 13.7940rem; }
.feature .credit04 { margin-top: 2.801rem; max-width: 55.4948rem; height: 18.3920rem; }
.feature .credit05 { margin-top: 2.801rem; margin-left: 3rem; max-width: 55.8595rem; height: 13.7940rem; }
.feature .credit06 { margin-top: 2.801rem; max-width: 62.9083rem; height: 13.7940rem; }
.feature .credit07 { margin-top: 2.801rem; margin-left: 3rem; max-width: 54.1798rem; height: 18.3920rem; }
.feature .credit.credit07 .item { line-height: 2.0786; }
.feature .credit08 { margin-top: 2.801rem; margin-left: 24rem; max-width: 51rem; height: 13.7940rem; }

.feature .btn01 { margin-top: 13.911rem; margin-left: 7.5rem; width: 60rem; height: 12.6rem; }
.feature .allitems a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  border: .2rem solid #404040; }
.feature .allitems__txt { font-family: "the-seasons", serif; font-weight: 300; font-size: 6rem; line-height: .87;
  letter-spacing: -.005em; text-transform: uppercase; color: #404040; white-space: nowrap; }

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

  html { font-size: min(0.4380958vw, 6.13334px); }

  .feature .pc { display: block; }
  .feature .sp, .feature .sp-fv { display: none; }
  .feature .frame > .pc { display: contents; }
  .feature { --pcu: 0.0714286vw; --rail-top: 80px;  }

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

  .feature .frame-main { flex: 1 1 0; min-width: 0; }
  .feature .frame-side { display: block; position: relative; flex: 1 1 0; }
  .feature .who__rule { height: 1px; }
  .feature .frame-side__inner { position: sticky; top: var(--rail-top); margin-bottom: calc(80 * var(--pcu)); }

  .feature .frame-side.-mv { flex: 0 0 auto; width: 50%; }
  .feature .frame-side.-mv .frame-side__inner { --rail-h: calc(100vh - var(--rail-top));
    height: var(--rail-h); width: 100%; margin-bottom: 0; overflow: hidden; }
  .feature .leftcont__box { opacity: 0; transition: opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1); }
  .feature .leftcont__box.is-inview { opacity: 1; }
  .feature .leftcont__thum { position: relative; height: var(--rail-h); width: 100%; overflow: hidden; }

  .feature .leftcont__thum > img, .feature .leftcont__stage { position: absolute; left: 50%; }
  .feature .leftcont__photo { top: 0; width: max(100%, calc(var(--rail-h) * 700 / 896)); aspect-ratio: 700 / 896; height: auto;
    max-width: none; transform: translateX(-50%); }

  .feature .leftcont__thum { container-type: size; }

  .feature .leftcont__frame { position: absolute; inset: 0; pointer-events: none;
    --s: min(calc(100cqw / 700), calc(100cqh / 896)); --in: calc(13.25 * var(--s)); }
  .feature .leftcont__line { position: absolute; background: #fff; }
  .feature .leftcont__line.-top, .feature .leftcont__line.-bottom { left: var(--in); right: var(--in); height: 1px; }
  .feature .leftcont__line.-top { top: var(--in); }
  .feature .leftcont__line.-bottom { bottom: var(--in); }
  .feature .leftcont__line.-r1, .feature .leftcont__line.-r2, .feature .leftcont__line.-l1, .feature .leftcont__line.-l2 { width: 1px; }
  .feature .leftcont__line.-r1, .feature .leftcont__line.-r2 { right: var(--in); }
  .feature .leftcont__line.-l1, .feature .leftcont__line.-l2 { left: var(--in); }
  .feature .leftcont__line.-r1 { top: var(--in); height: calc(19.417 * var(--s)); }
  .feature .leftcont__line.-r2 { top: calc(155.867 * var(--s)); bottom: var(--in); }
  .feature .leftcont__line.-l1 { top: var(--in); bottom: calc(156.867 * var(--s)); }
  .feature .leftcont__line.-l2 { bottom: var(--in); height: calc(19.417 * var(--s)); }
  .feature .leftcont__snap { position: absolute; writing-mode: vertical-rl; white-space: nowrap; color: #fff;
    font-family: "classico-urw", sans-serif; font-weight: 400; font-size: calc(28 * var(--s)); line-height: 1; letter-spacing: -0.005em; }

  .feature .leftcont__snap.-right { right: calc(11 * var(--s)); top: calc(96.267 * var(--s)); transform: translate(50%, -50%); }
  .feature .leftcont__snap.-left { left: calc(11 * var(--s)); bottom: calc(95.267 * var(--s)); transform: translate(-50%, 50%) rotate(180deg); }

  .feature .leftcont__stage { top: 50%; width: min(100%, 700px); aspect-ratio: 700 / 896;
    transform: translate(-50%, -50%); }
  .feature .leftcont__title { position: absolute; left: 14%; top: 28.9063%; width: 72%; height: 42.1875%; }
}