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

html.js-anim .feature .up-list > .up-item { opacity: 0; transform: translateY(20px);
  transition: opacity .5s cubic-bezier(0.33, 1, 0.68, 1) var(--d, 0s), transform .5s cubic-bezier(0.33, 1, 0.68, 1) var(--d, 0s); }
html.js-anim .feature .up-list.is-inview > .up-item { opacity: 1; transform: none; }
.feature .up-list > .up-item:nth-child(2) { --d: .3s; }
.feature .up-list > .up-item:nth-child(3) { --d: .6s; }
.feature .up-list > .up-item:nth-child(4) { --d: .9s; }

.is-noanim .js-reveal, .is-noanim .js-anime { transition: none !important; opacity: 1 !important; }
.is-noanim .mv__box { transition: none !important; opacity: 1 !important; }
.is-noanim .up-list > .up-item { transition: none !important; opacity: 1 !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) .mv__box { transition: none !important; opacity: 1 !important; }
  html:not(.is-forceanim) .up-list > .up-item { transition: none !important; opacity: 1 !important; transform: none !important; }
  html:not(.is-forceanim) { scroll-behavior: auto; }
}

.feature { box-sizing: border-box; color: #1e1d1c; margin: 0 auto; position: relative; width: 100%;

  font-family: yu-gothic-pr6n, "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: #f7f7f7;  }
.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: #1e1d1c; 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: #f7f7f7; }

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

.feature .mv__box { margin-top: 0rem; position: relative; }

html.js-anim .feature .mv__box { opacity: 0; transition: opacity 1s cubic-bezier(0.39, 0.575, 0.565, 1) 0s; }
html.js-anim .feature .mv__box.is-inview { opacity: 1; }
.feature .mv__thum img { width: 100%; }

.feature .mv__ttl { position: absolute; inset: 0; opacity: 1; transition: none; }
.feature .mv__ttl img { position: absolute; }
.feature .mv__ttl01 { top: 36.675rem; left: 1.5795rem; width: 36.768rem; }
.feature .mv__ttl02 { top: 36.6825rem; left: 54.644rem; width: 19.08rem; }
.feature .mv__ttl03 { top: 44.7rem; left: 1.7025rem; width: 26.376rem; }
.feature .mv__lead { position: absolute; top: 78.86rem; left: 4rem; font-size: 2.2rem; line-height: 2.6rem; letter-spacing: .015em; font-feature-settings: "palt";
  color: #fff; white-space: nowrap; text-shadow: 0 0 1.8rem rgba(0, 0, 0, .25); }

.feature .mv__txt.-release .mv__lead { top: 82.598rem; }
.feature .mv__date { position: absolute; top: 79.9065rem; left: 1.361rem; width: 48.192rem; }

.feature .intro { position: relative; margin-top:12.33rem; height: 65.27rem; }
.feature .intro__ttl { position: absolute; top: 0; left: 13.52rem; width: 48.547rem; }
.feature .intro__box { position: absolute; top: 45.27rem; left: 19.1rem; width: 36.8rem; }
.feature .intro__items { position: absolute; top: 12.67rem; left: 0; width: 75rem; height: 37.1rem; }
.feature .up-list > .up-item { position: absolute; }
.feature .intro__items .-i08 { top: 20.1rem; left: 10.4rem; width: 11.4rem; }
.feature .intro__items .-i05 { top: 0;      left: 16rem;   width: 21.2rem; }
.feature .intro__items .-i07 { top: 13.1rem; left: 30.6rem; width: 20.6rem; }
.feature .intro__items .-i06 { top: 1.1rem; left: 48.6rem; width: 15.4rem; }

.feature .credit { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; }
.feature .credit .item { display: inline-block; position: relative; line-height: 1; white-space: nowrap; }
.feature .credit .item.-noline { border-bottom: none; }
.feature .credit .link { display: inline; font-family: tt-commons-pro, "Helvetica Neue", Arial, sans-serif; font-weight: 300; font-style: normal;
  font-size: 2.2rem; line-height: 3.96rem; letter-spacing: .05em; color: #1e1d1c; }
.feature .intro__credit { margin-top: 3.142rem; }

.feature .intro__txt { margin-top: 6.182rem; text-align: center; font-size: 2.2rem; line-height: 4.4rem; letter-spacing: .05em; font-feature-settings: "palt"; }

.feature .st-head { position: relative; }
.feature .st-head::before { content: ""; position: absolute; left: 0; right: 0; top: var(--line-top); height: .15rem; background: #5e1515; }
.feature .st-head__plate { position: absolute; left: 30rem; width: 15rem; }
.feature .st-head__num { position: absolute; top: 0; }
.feature .st-head01 { margin-top: 15.194rem; height: 6.28rem; --line-top: 2.355rem; }
.feature .st-head01 .st-head__plate { top: 1.98rem; }
.feature .st-head01 .st-head__num { left: 32.11rem; width: 11.11rem; }
.feature .st-head02 { margin-top: 15.298rem; height: 5.23rem; --line-top: 2.755rem; }
.feature .st-head02 .st-head__plate { top: .93rem; }
.feature .st-head02 .st-head__num { left: 31.728rem; width: 11.647rem; }
.feature .st-head03 { margin-top: 14.622rem; height: 4.55rem; --line-top: 2.325rem; }
.feature .st-head03 .st-head__plate { top: .25rem; }
.feature .st-head03 .st-head__num { left: 31.627rem; width: 11.607rem; }
.feature .st-head04 { margin-top: 15.219rem; height: 4.55rem; --line-top: 2.325rem; }
.feature .st-head04 .st-head__plate { top: .25rem; }
.feature .st-head04 .st-head__num { left: 31.6rem; width: 11.726rem; }

.feature .st-ttl01 { margin-top: 3.06rem; margin-left: 26.739rem; width: 21.552rem; }
.feature .st-ttl02 { margin-top: 4.636rem; margin-left: 18.801rem; width: 37.488rem; }
.feature .st-ttl03 { margin-top: 5rem; margin-left: 17.226rem; width: 40.469rem; }
.feature .st-ttl04 { margin-top: 5rem; margin-left: 19.215rem; width: 36.444rem; }

.feature .st-items { position: relative; height: 16.8rem; }
.feature .st-items01 { margin-top: 4.132rem; }
.feature .st-items01 .-i13 { top: 0; left: 11.6rem; width: 14rem; }
.feature .st-items01 .-i14 { top: 0; left: 26.9rem; width: 14rem; }
.feature .st-items01 .-i15 { top: 0; left: 42.1rem; width: 8.4rem; }
.feature .st-items01 .-i16 { top: 0; left: 51.7rem; width: 9.4rem; }
.feature .st-items02 { margin-top: 3.932rem; }
.feature .st-items02 .-i22 { top: 0; left: 24.3rem; width: 14rem; }
.feature .st-items02 .-i23 { top: 0; left: 39.5rem; width: 9.4rem; }
.feature .st-items03 { margin-top: 3.042rem; }
.feature .st-items03 .-i29 { top: 0; left: 30.5rem; width: 14rem; }
.feature .st-items04 { margin-top: 3.7rem; }
.feature .st-items04 .-i35 { top: 0; left: 33.3rem; width: 8.4rem; }

.feature .st-photo img { width: 100%; }
.feature .st-photo01a { margin-top: 3.2rem; margin-left: 11rem; width: 64rem; }
.feature .st-photo01b { margin-top: 3rem; margin-left: 0; width: 54rem; }
.feature .st-photo02a { margin-top: 3.5rem; margin-left: 5.5rem; width: 64rem; }
.feature .st-photo02b { margin-top: 3rem; margin-left: 21rem; width: 54rem; }
.feature .st-photo03a { margin-top: 3rem; margin-left: 11rem; width: 64rem; }
.feature .st-photo03b { margin-top: 3rem; margin-left: 0; width: 54rem; }
.feature .st-photo04a { margin-top: 3.3rem; margin-left: 0; width: 64rem; }
.feature .st-photo04b { margin-top: 3rem; margin-left: 21rem; width: 54rem; }

.feature .st-txt { margin-left: 5.3rem; width: 64rem; font-size: 2.2rem; line-height: 4.4rem; letter-spacing: .05em; font-feature-settings: "palt"; }
.feature .st-txt01 { margin-top: 5.079rem; }
.feature .st-txt02 { margin-top: 5rem; }
.feature .st-txt03 { margin-top: 5rem; }
.feature .st-txt04 { margin-top: 5.179rem; }

.feature .allitems { margin-top: 14.895rem; height: 53.7rem; padding-top: 12.143rem; background: #fff; }

.feature .allitems__btn a { position: relative; width: 50rem; height: 10rem; margin: 0 auto; border: .15rem solid #5e1515; }
.feature .allitems__btn img { position: absolute; top: 2.841rem; left: 12.406rem; width: 24.8924rem; }

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

  html { font-size: min(0.4857143vw, 6.8px); }

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

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

  .feature .frame { display: grid; grid-template-columns: minmax(0, 1fr) 75rem minmax(0, 1fr); align-items: stretch; }
  .feature .frame-main { width: 75rem; }
  .feature .frame-side { display: block; position: relative; }

  .feature .frame-side__inner { position: sticky; top: var(--rail-top); height: calc(100vh - var(--rail-top));
    display: grid; place-items: center; overflow: hidden; z-index: auto; margin-bottom: calc(80 * var(--pcu)); }
  .feature .rail-logo img { width: calc(293.408 * var(--pcu)); }
  .feature .rail-btn a { display: grid; place-items: center; width: calc(256 * var(--pcu)); height: calc(51.2 * var(--pcu));
    border: calc(1.25 * var(--pcu)) solid #5e1515; }
  .feature .rail-btn img { width: calc(125.708 * var(--pcu)); }
}