@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 ease var(--d, 0s); }
html.js-anim .js-reveal.is-inview { opacity: 1; }
.is-noanim .js-reveal, .is-noanim .js-anime { transition: none !important; opacity: 1 !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) { scroll-behavior: auto; }
}

.feature { box-sizing: border-box; color: #121212; margin: 0 auto; position: relative; width: 100%;
  font-family: "toppan-bunkyu-gothic-pr6n", 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: #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; }
.feature .pc { display: none; }
.feature a { color: #121212; 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: #f0eeea; }

.feature :where(.sec > *) { position: relative; }

.feature .ttl01__main, .feature .ttl04__main, .feature .ttl07__main, .feature .allbtn__txt {
  font-family: "petersburg-web", serif; font-weight: 400; font-kerning: none; }

.feature .ttl01__sub { font-family: "neue-haas-grotesk-display", sans-serif; font-weight: 300; }
.feature .credit, .feature .staff { font-family: "pragmatica", sans-serif; font-weight: 300; }
.feature .lead01 .-en { font-family: "pragmatica", sans-serif; font-weight: 400; }

.feature .photo a { display: block; }
.feature .photo img { width: 100%; }

.feature .photo.-frame::after { content: ""; position: absolute; inset: 0; border: .3rem solid #121212; z-index: 3; pointer-events: none; }

.feature .fv { display: grid; grid-template-columns: repeat(3, 1fr); width: 75rem; margin-top: 0rem; }
.feature .fv__item img { width: 100%; height: 33.3333rem; object-fit: cover; }

.feature .fv__item:nth-child(2) { --d: .4s; }
.feature .fv__item:nth-child(3) { --d: .8s; }
.feature .fv__item:nth-child(4) { --d: 1.2s; }
.feature .fv__item:nth-child(5) { --d: 1.6s; }
.feature .fv__item:nth-child(6) { --d: 2s; }
.feature .fv__item:nth-child(7) { --d: 2.4s; }
.feature .fv__item:nth-child(8) { --d: 2.8s; }
.feature .fv__item:nth-child(9) { --d: 3.2s; }
.feature .fv__item:nth-child(10) { --d: 3.6s; }

.feature .ttl01 { text-align: center; }
.feature .ttl01__main { display: block; margin-top: 7.68rem; font-size: 8rem; line-height: 8.64rem; letter-spacing: -.075em; text-indent: -.3rem; color: #121212; }
.feature .ttl01__amp { font-size: 6.8rem; margin: 0 .9rem; }

.feature .ttl01__sub { display: block; margin-top: 0.58rem; font-size: 3rem; line-height: 3rem; letter-spacing: .025em; color: #121212; }

.feature .look20 { width: 63rem; margin-top: 12.205rem; margin-left: auto; margin-right: auto; }

.feature .collab__taion { width: 47.02rem; margin-top: 8rem; margin-left: auto; margin-right: auto; }
.feature .collab__taion img { width: 100%; }
.feature .collab__wash { width: 6.2rem; margin-top: 4.41rem; margin-left: auto; margin-right: auto; }
.feature .collab__wash img { width: 100%; }

.feature .lead01 { margin-top: 3.31rem; text-align: center; font-size: 2.4rem; line-height: 4.75rem; letter-spacing: .025em; color: #121212; font-feature-settings: "palt"; }
.feature .lead02 { margin-top: 6.8rem; text-align: center; font-size: 2.4rem; line-height: 4.8rem; letter-spacing: .025em; color: #121212; font-feature-settings: "palt"; }

.feature .switcher { position: relative; }
.feature .switcher .switch-img { display: block; 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; top: 2rem; right: 2.3rem; display: flex; gap: 1.4rem; z-index: 2; }
.feature .switch-dots button { display: block; width: 1.2rem; height: 1.2rem; padding: 0; border: .2rem solid #000; border-radius: 50%; background: transparent; cursor: pointer; }
.feature .switch-dots button.is-current { background: #000; }
.feature .sw22 { width: 69rem; margin-top: 8.5rem; margin-left: auto; margin-right: auto; }
.feature .sw27 { width: 66rem; margin-top: 10rem; margin-left: auto; margin-right: auto; }
.feature .sw37 { width: 70.5rem; margin-top: 8.7rem; margin-left: auto; margin-right: auto; }

.feature .look26 { width: 75rem; margin-top: 14.901rem; }
.feature .look33 { width: 70.5rem; margin-top: 8rem; margin-left: auto; margin-right: auto; }
.feature .look34 { width: 60rem; margin-top: 14.911rem; margin-left: auto; margin-right: auto; }
.feature .look41 { width: 66rem; margin-top: 14.901rem; margin-left: auto; margin-right: auto; }
.feature .look42 { width: 61.5rem; margin-top: 8.911rem; margin-left: 13.5rem; }
.feature .look43 { width: 75rem; margin-top: 12.5rem; }
.feature .look44 { width: 66rem; margin-top: 16.05rem; }

.feature .credit { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start;
  column-gap: .66rem; margin-left: auto; margin-right: auto;
  font-size: 2.2rem; line-height: 4.598rem; letter-spacing: .05em; color: #000; }
.feature .credit .item { white-space: nowrap; color: #000; }
.feature .credit .link { color: #000; }

.feature .credit02 .item:nth-child(odd):not(:last-child)::after,
.feature .credit03 .item:nth-child(odd):not(:last-child)::after,
.feature .credit04 .item:nth-child(odd):not(:last-child)::after,
.feature .credit05 .item:nth-child(odd):not(:last-child)::after,
.feature .credit01 .item:nth-child(1)::after, .feature .credit01 .item:nth-child(4):not(:last-child)::after,
.feature .credit06 .item:nth-child(1)::after, .feature .credit06 .item:nth-child(4):not(:last-child)::after { content: "\00a0/"; }
.feature .credit .item.-noline { border-bottom: none; }
.feature .credit01 { margin-top: 2.801rem; max-width: 48.5rem; height: 13.794rem; }
.feature .credit02 { margin-top: 2.801rem; max-width: 49.3119rem; height: 9.1960rem; }
.feature .credit03 { margin-top: 2.661rem; max-width: 48.6361rem; height: 13.7940rem; }
.feature .credit04 { margin-top: 2.671rem; max-width: 49.9002rem; height: 9.1960rem; }
.feature .credit05 { margin-top: 2.801rem; max-width: 47.5666rem; height: 9.1960rem; }
.feature .credit06 { margin-top: 2.901rem; max-width: 50rem; height: 13.794rem; }

.feature .credit01 .item:nth-child(3), .feature .credit06 .item:nth-child(3) { flex-basis: 100%; text-align: center; }

.feature .js-slider .splide__track { overflow: hidden; position: relative; z-index: 0; }
.feature .js-slider .splide__list { display: flex; margin: 0; padding: 0; transition-timing-function: linear; }
.feature .js-slider .splide__slide { flex-shrink: 0; list-style-type: none; margin: 0; position: relative; width: 100%; }
.feature .js-slider .splide__slide a { display: block; }
.feature .js-slider .splide__slide img { width: 100%; }
.feature .sl31 { margin-top: 14.911rem; }
.feature .sl31 .splide__slide { width: 61.5rem; margin-right: 1.5rem; }
.feature .sl45 { margin-top: 10.1rem; }
.feature .sl45 .splide__track { padding-left: 15rem; }
.feature .sl45 .splide__slide { width: 60rem; margin-right: 1.5rem; }

.feature .ttl04 { text-align: center; }
.feature .ttl04__main { display: block; margin-top: 6rem; font-size: 9.4rem; line-height: 9.4rem; letter-spacing: -.064em; word-spacing: .029em; color: #121212; }

.feature .ttl04__badge { display: block; width: 18.6rem; margin-top: 1.804rem; margin-left: auto; margin-right: auto; }
.feature .ttl04__badge img { width: 100%; }
.feature .ttl07 { padding-left: 13.5rem; }
.feature .ttl07__main { display: block; margin-top: 3.5rem; font-size: 9.4rem; line-height: 9.4rem; letter-spacing: -.047em; word-spacing: .017em; color: #121212; }

.feature .ttl07__sub { display: flex; align-items: flex-start; margin-top: 1.294rem; margin-left: .17rem; }
.feature .ttl07__smu { width: 26.14rem; margin-top: .5rem; }
.feature .ttl07__mt { width: 12.6rem; margin-left: 1.69rem; }

.feature .allbtn { width: 60rem; margin-top: 16.901rem; margin-left: auto; margin-right: auto; }
.feature .allbtn__link { display: flex; align-items: center; justify-content: center; height: 12.6rem; border: .3rem solid #121212; }
.feature .allbtn__txt { font-size: 5.4rem; line-height: 5.4rem; letter-spacing: -.07em; word-spacing: .01em; color: #121212; }

.feature .staff { margin-top: 10.801rem; padding-bottom: 13.8rem; text-align: center; font-size: 2.2rem; line-height: 4.598rem; letter-spacing: .05em; color: #000; }

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

  html { font-size: min(calc(100vw * 490 / 1400 / 75), calc(490px / 75)); }

  .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; justify-content: center; }
  .feature .frame-main { flex: 0 0 auto; width: 75rem; }

  .feature .frame-header { width: 100%; overflow-x: clip; margin-bottom: min(calc(40 * var(--pcu)), 40px); }
  .feature .fv-pc { display: grid; grid-template-columns: repeat(5, 1fr); width: calc(100% * 1500 / 1400); margin-left: calc(100% * -50 / 1400); }

  .feature .fv-pc .fv__item img { width: 100%; height: auto; aspect-ratio: 300 / 400; object-fit: cover; }
}
@media screen and (min-width: 1401px) {
  .feature .fv-pc { width: 100%; margin-left: 0; }
}