@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.46, 0.45, 0.94); }
html.js-anim .js-reveal.is-inview { opacity: 1; }

html.js-anim .js-reveal.-up { transform: translateY(100px);
  transition: opacity 1s ease, transform .5s ease; }
html.js-anim .js-reveal.-up.is-inview { transform: none; }

html.js-anim .js-reveal.-chars { opacity: 1; transition: none; }
html.js-anim .js-reveal.-chars .ch { opacity: 0; }
html.js-anim .js-reveal.-chars.is-inview .ch {
  opacity: 1;
  transition: opacity 0s linear calc(var(--i) * 70ms);
}

.is-noanim .js-reveal, .is-noanim .js-anime, .is-noanim .js-reveal .ch { transition: none !important; opacity: 1 !important; }
.is-noanim .js-reveal.-up { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  html:not(.is-forceanim) .js-reveal, html:not(.is-forceanim) .js-anime, html:not(.is-forceanim) .js-reveal .ch { transition: none !important; opacity: 1 !important; }
  html:not(.is-forceanim) .js-reveal.-up { transform: none !important; }
  html:not(.is-forceanim) .feature .switch-img { transition: none !important; }
  html:not(.is-forceanim) { scroll-behavior: auto; }
}

.feature { box-sizing: border-box; color: #2C0000; margin: 0 auto; position: relative; width: 100%;
  font-family: "fairplex-wide-1", serif;
  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 .pc { display: none; }
.feature .frame-side { display: none; }
.feature a { color: #2C0000; text-decoration: none; }
.feature button { background: none; cursor: pointer; font: inherit; color: inherit; }

@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 .switch-img img { transition: none; }

  .feature .switcher button.switch-img:hover img { opacity: .7; }
}
.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: #fff;
  padding-bottom: 8.8rem;  }

:where(.feature .frame-main__inner > *) { position: relative; }

.feature .look a, .feature .look .look__btn { display: block; width: 100%; }
.feature .look img { width: 100%; }

.feature .look :is(a, .look__btn) > img[src$=".jpg"] { aspect-ratio: 2 / 3; object-fit: cover; }
.feature .look06 :is(a, .look__btn) > img[src$=".jpg"] { aspect-ratio: 750 / 550; }

.feature .look01 { margin-top: 0rem; width: 75rem; }
.feature .look02 { margin-top: 5rem; width: 65rem; margin-left: 5rem; }
.feature .ttl01 { margin-top: 3.9rem; width: 30.6126rem; margin-left: 22.3rem; }
.feature .look03 { margin-top: 7.7rem; width: 75rem; }
.feature .look04 { margin-top: 15rem; width: 45rem; margin-left: 15rem; }
.feature .look05 { margin-top: 1rem; width: 45rem; margin-left: 15rem; }
.feature .look06 { margin-top: 14.85rem; width: 75rem; }
.feature .look07 { margin-top: 2rem; width: 75rem; }
.feature .copy01 { margin-top: 2.4rem; width: 47.5585rem; margin-left: 13.7rem; }
.feature .look08 { margin-top: 19.52rem; width: 37.5rem; margin-left: 10rem; }
.feature .look09 { margin-top: 1rem; width: 37.5rem; margin-left: 10rem; }
.feature .look10 { margin-top: 29.8rem; width: 55rem; margin-left: 10rem; }
.feature .panel01 { margin-top: 10.003rem; display: flex; height: 56.25rem; }
.feature .look12 { margin-top: 9.997rem; width: 75rem; }
.feature .copy02 { margin-top: 2.333rem; width: 31.8437rem; margin-left: 20.9rem; }
.feature .look13 { margin-top: 16.237rem; width: 37.5rem; margin-left: 18.75rem; }
.feature .look14 { margin-top: 0.999rem; width: 37.5rem; margin-left: 18.75rem; }
.feature .look15 { margin-top: 14.8rem; width: 75rem; }
.feature .look16 { margin-top: 1rem; width: 75rem; }
.feature .look17 { margin-top: 15rem; width: 37.5rem; margin-left: 18.75rem; }
.feature .look18 { margin-top: 15rem; width: 75rem; }
.feature .look19 { margin-top: 9.8rem; width: 55rem; margin-left: 10rem; }
.feature .copy03 { margin-top: 2.35rem; width: 42.8496rem; margin-left: 15.9rem; }
.feature .row01 { margin-top: 17.54rem; display: flex; }
.feature .row02 { margin-top: 5rem; display: flex; }
.feature .panel02 { margin-top: 4.9rem; display: flex; height: 56.25rem; }
.feature .row03 { margin-top: 5rem; display: flex; }
.feature .look27 { margin-top: 10rem; width: 37.5rem; margin-left: 18.75rem; }
.feature .ttl04 { margin-top: 2.483rem; width: 30.6126rem; margin-left: 22.3rem; }
.feature .btn01 { margin-top: 10.72rem; width: 20.03rem; margin-left: 27.4rem; }
.feature .staff { margin-top: 10.7759rem; font-size: 1.763rem; line-height: 3.08525rem; letter-spacing: .02em; text-align: center; color: #2C0000; }

.feature .staff .zen { font-family: "kozuka-gothic-pr6n-1", sans-serif; line-height: 1; }

.feature .staff .zen.-end { margin-right: -.5em; }

.feature .row01 > .look, .feature .row02 > .look, .feature .row03 > .look { width: 37.5rem; }

.feature .fv__logo { position: absolute; top: 89.52rem; left: 14.588rem; width: 45.824rem; pointer-events: none; }
.feature .fv__logo img { width: 100%; }

.feature .-edge { overflow: hidden; }
.feature .-edge img { transform: scale(1.008); }

.feature .panel01__color { position: relative; width: 37.5rem; height: 100%; background: #D4C3AD; }
.feature .panel01__ttl { position: absolute; top: 2.38rem; left: 6.1rem; width: 25.3773rem; }
.feature .panel01 .look11 { width: 37.5rem; }
.feature .panel02 .look24 { width: 37.5rem; }
.feature .panel02__color { position: relative; width: 37.5rem; height: 100%; background: #740011; }
.feature .panel02__sub { position: absolute; top: 2.3rem; left: 11.27rem; width: 14.959rem; }
.feature .panel02__ttl { position: absolute; top: 21.15rem; left: 6.1rem; width: 25.3773rem; }
.feature .panel01__ttl img, .feature .panel02__sub img, .feature .panel02__ttl img { width: 100%; }

.feature .ttl01 img, .feature .ttl04 img, .feature .copy01 img, .feature .copy02 img,
.feature .copy03 img, .feature .btn01 img { width: 100%; }
.feature .chars { display: block; width: 100%; height: auto; }
.feature .btn01 a { display: block; }

.feature .movie__video { display: block; width: 100%; aspect-ratio: 375 / 666.67; height: auto; object-fit: cover; background: #ddd; }

.feature .switcher { position: relative; aspect-ratio: 550 / 825; }
.feature .switcher .switch-img { display: block; position: absolute; inset: 0;
  transition: opacity 2s cubic-bezier(0.25, 1, 0.5, 1), visibility 0s linear 2s; }
.feature .switcher .switch-img img { width: 100%; height: 100%; object-fit: cover; }
.feature .switcher .switch-img:not(.is-current) { opacity: 0; visibility: hidden; pointer-events: none; }
.feature .switcher .switch-img.is-current { opacity: 1; transition: opacity 2s cubic-bezier(0.25, 1, 0.5, 1), visibility 0s; }

.feature .switch-dots { display: flex; gap: .7rem; gap: round(.7rem, 1px); }

.feature .switch-dots button { width: 1.5rem; height: 1.5rem; width: round(1.5rem, 1px); height: round(1.5rem, 1px); flex: 0 0 auto;
  border: 0; border-radius: 0; background: center / contain no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7.5' fill='%232C0000' stroke='%232C0000' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }
.feature .switch-dots button.is-current { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7.5' fill='none' stroke='%232C0000' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }
.feature .switch-dots.-in { position: absolute; right: 2rem; bottom: 2rem; z-index: 2; }
.feature .switch-dots.-in button { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7.5' fill='%23fff' stroke='%23fff' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }
.feature .switch-dots.-in button.is-current { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7.5' fill='none' stroke='%23fff' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }

.feature .crpage { position: fixed; inset: 0; z-index: 10000; overflow-y: auto; overscroll-behavior: contain; background: #EEECEC; }
.feature .crpage[hidden] { display: none; }
.feature .crpage:focus { outline: none; }
html.is-crpage-open body { overflow: hidden; }
.feature .crpage__inner { width: 75rem; margin: 0 auto; padding-bottom: 5.24rem;  }

.feature .crpage__head { position: sticky; top: 0; height: 0; z-index: 3; }
.feature .crpage__close { --hit: calc((8.8rem - 4rem) / 2);
  position: absolute; top: 2.98rem; right: 3rem; width: 8.8rem; height: 8.8rem;
  padding: var(--hit); margin: calc(var(--hit) * -1); }
.feature .crpage__close img { width: 100%; }
.feature .crsec { position: relative; }
.feature .crphoto a { display: block; }
.feature .crphoto img { width: 100%; }

.feature .look28 { margin-top: 9.95rem; width: 55rem; margin-left: 10rem; }
.feature .dots06 { margin-top: 1rem; justify-content: center; }
.feature .credit01 { margin-top: 1.5328rem; max-width: 44.6992rem; height: 5.7826rem; }
.feature .look29 { margin-top: 20.2158rem; width: 55rem; margin-left: 10rem; }
.feature .dots07 { margin-top: 0.975rem; justify-content: center; }
.feature .credit02 { margin-top: 1.5078rem; max-width: 42.3391rem; height: 5.7826rem; }
.feature .look30 { margin-top: 20.2158rem; width: 55rem; margin-left: 10rem; }
.feature .dots08 { margin-top: 1rem; justify-content: center; }
.feature .credit03 { margin-top: 1.5328rem; max-width: 46.5141rem; height: 5.7826rem; }
.feature .look31 { margin-top: 20.2158rem; width: 55rem; margin-left: 10rem; }
.feature .credit04 { margin-top: 1.5328rem; max-width: 54.7680rem; height: 5.7826rem; }
.feature .look32 { margin-top: 24.7158rem; width: 55rem; margin-left: 10rem; }
.feature .dots09 { margin-top: 1rem; justify-content: center; }
.feature .credit05 { margin-top: 1.5328rem; max-width: 42.8961rem; height: 5.7826rem; }
.feature .look33 { margin-top: 20.2158rem; width: 55rem; margin-left: 10rem; }
.feature .credit06 { margin-top: 1.5328rem; max-width: 45.6961rem; height: 5.7826rem; }
.feature .look34 { margin-top: 22.7158rem; width: 55rem; margin-left: 10rem; }
.feature .credit07 { margin-top: 1.5328rem; max-width: 14.0484rem; height: 2.8913rem; }
.feature .look35 { margin-top: 25.6018rem; width: 55rem; margin-left: 10rem; }
.feature .dots10 { margin-top: 1rem; justify-content: center; }
.feature .credit08 { margin-top: 1.5328rem; max-width: 43.3945rem; height: 5.7826rem; }
.feature .look36 { margin-top: 20.2158rem; width: 55rem; margin-left: 10rem; }
.feature .credit09 { margin-top: 1.5328rem; max-width: 12.7359rem; height: 2.8913rem; }
.feature .look37 { margin-top: 25.6018rem; width: 55rem; margin-left: 10rem; }
.feature .dots11 { margin-top: 1rem; justify-content: center; }
.feature .credit10 { margin-top: 1.5328rem; max-width: 44.6469rem; height: 5.7826rem; }
.feature .look38 { margin-top: 20.1658rem; width: 55rem; margin-left: 10rem; }
.feature .dots12 { margin-top: 1rem; justify-content: center; }
.feature .credit11 { margin-top: 1.5328rem; max-width: 43.4500rem; height: 5.7826rem; }
.feature .look39 { margin-top: 20.2158rem; width: 55rem; margin-left: 10rem; }
.feature .dots13 { margin-top: 1rem; justify-content: center; }
.feature .credit12 { margin-top: 1.5328rem; max-width: 50.8461rem; height: 5.7826rem; }
.feature .look40 { margin-top: 20.2158rem; width: 55rem; margin-left: 10rem; }
.feature .credit13 { margin-top: 1.5328rem; max-width: 40.4281rem; height: 2.8913rem; }
.feature .look41 { margin-top: 25.6018rem; width: 55rem; margin-left: 10rem; }
.feature .dots14 { margin-top: 1rem; justify-content: center; }
.feature .credit14 { margin-top: 1.5328rem; max-width: 48.3781rem; height: 5.7826rem; }

.feature .crsec { display: flow-root; height: 112.5rem; }
.feature .crsec#cr-look04 { height: 114.5rem; }
.feature .crsec:last-of-type { height: auto; }
.feature .crsec > :first-child { margin-top: 9.95rem; }

.feature .credit { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; line-height: 2.8913rem; column-gap: .9rem; margin-left: auto; margin-right: auto; }
.feature .credit .item { position: relative; line-height: 2.8913rem; letter-spacing: .02em; color: #2C0000;
  font-family: "fairplex-wide-1", serif; font-weight: 400; font-style: normal;
  white-space: nowrap; }
.feature .credit .link { display: block; font-size: 1.763rem; color: #2C0000; }
.feature .credit .item.-noline { border-bottom: none; }

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

  html { font-size: 0.514286vw; }

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

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

  .feature .frame { display: flex; align-items: stretch; justify-content: center; }
  .feature .frame-main { flex: 0 0 auto; width: 75rem; }
  .feature .frame-side { display: block; position: relative; flex: 1 1 0; }

  .feature .frame-side__inner { position: sticky; top: var(--rail-top); height: calc(100vh - var(--rail-top));
    margin-bottom: calc(65 * var(--pcu));  }
  .feature .side__body { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; }

  .feature .side__logo { width: calc(262.81 * var(--pcu)); margin: 0 auto; }
  .feature .side__all { width: calc(207.72 * var(--pcu)); margin: 0 auto; }
  .feature .side__logo img, .feature .side__all img { width: 100%; }
  .feature .side__all a { display: block; }

  html.js-rail .feature .frame-side { align-self: flex-start; }
  html.js-rail .feature .frame-side__inner { margin-bottom: 0; }

  .feature .side__body { opacity: 0; visibility: hidden;
    transition: opacity .8s, visibility .8s, translate .8s cubic-bezier(.22, .61, .36, 1); }
  .feature .frame-side.-left .side__body { translate: 60px 0; }
  .feature .frame-side.-right .side__body { translate: -60px 0; }
  .feature .frame.is-rail-on .side__body { opacity: 1; visibility: visible; translate: 0 0; }

  .feature .side__logo, .feature .side__all a { position: relative; }
  .feature .side__logo .side__red, .feature .side__all .side__red { position: absolute; inset: 0; opacity: 0; transition: opacity .6s; }
  .feature .frame.is-rail-red .side__red { opacity: 1; }

  @media (hover: hover) {
    .feature .side__all a:hover .side__red { opacity: 0; }
    .feature .frame.is-rail-red .side__all a:hover .side__red { opacity: .7; }
  }
  .is-noanim .feature .side__body, .is-noanim .feature .side__red { transition: none !important; }
  .is-noanim .feature .side__body { translate: 0 0 !important; }

  .feature .look03 { margin-top: 7.82rem; }
  .feature .look06 { margin-top: 15rem; }
  .feature .look10 { margin-top: 30rem; }
  .feature .look15 { margin-top: 15.017rem; }
  .feature .look19 { margin-top: 10rem; }
  .feature .panel02 { margin-top: 5rem; }

}

@media screen and (max-width: 750px) {
  .feature .pc, .feature .frame > .pc { display: none; }

  .feature .staff { margin-top: 10.9759rem; }
  .feature .frame-main__inner { padding-bottom: 8.6rem; }
}