@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; }
.feature :where(div, p, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, blockquote, pre) { font-style: inherit; }

.page-top-button { display: none !important; }

html { scroll-behavior: smooth; font-size: 1.3333333vw; }

html.js-anim .js-reveal a { overflow: clip; }
html.js-anim .js-reveal img { opacity: 0; transform: translateY(-10%);
  transition: opacity 1s ease .2s, transform 1s ease .2s; }
html.js-anim .js-reveal :is(.vtxt, .switch-dots) { opacity: 0; transition: opacity 1s ease .2s; }
html.js-anim .js-reveal.is-inview :is(img, .vtxt, .switch-dots) { opacity: 1; transform: none; }
html.js-anim .js-anime { opacity: 0; transition: opacity .9s cubic-bezier(0.25, 0.1, 0.25, 1); }
html.js-anim .js-anime.is-inview { opacity: 1; }

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

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

  font-family: "noto-serif-jp-1", "noto-serif-jp-2", "Noto Serif JP", 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 a { color: #232323; text-decoration: none; -webkit-tap-highlight-color: transparent; }

@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 .num, .feature .hd, .feature .vtxt, .feature .btn__en, .feature .follow__en, .feature .fvttl__sub {
  font-family: "mastro-display-1", "mastro-display-2", serif; font-weight: 200; }
.feature .fvttl__main { font-family: "mastro-display-1", "mastro-display-2", serif; font-weight: 300; }

.feature .frame-main__inner { display: flow-root; width: 100%; margin: auto; background: #fff; }
.feature :where(.sec, .lk, .num, .end, .btn) { position: relative; }

.feature .lk img { width: 100%; height: 100%; object-fit: cover; }
.feature .lk a { display: block; width: 100%; height: 100%; }

.feature .mv__box { position: relative; }
.feature .look02 { margin-top: 0rem; width: 75rem; height: 120rem; }
.feature .mv__ttl { position: absolute; top: 89.01rem; left: 5.8rem; color: #fff; }
.feature .fvttl__main { display: block; font-size: 7.2rem; line-height: 1.2; letter-spacing: .06em; white-space: nowrap; }
.feature .fvttl__sub { display: block; margin-top: 2.28rem; margin-left: .1rem; font-size: 4rem; line-height: 1; letter-spacing: .06em; white-space: nowrap; }

.feature .num { width: max-content; height: 4.4rem; padding-top: .57rem; white-space: nowrap; font-size: 4.4rem; line-height: 1; letter-spacing: .06em; }
.feature .num img { height: 3.2125rem; width: auto; }
.feature .num01 img { margin-left: .364rem; }
.feature .num02 img, .feature .num03 img { margin-left: .099rem; }
.feature .num04 img { margin-left: -.051rem; }

.feature .num::after { content: ""; position: absolute; top: 5.27rem; left: .139rem; width: 4.5rem; border-top: round(.2rem, 1px) solid #232323; }
.feature .num01 { margin-top: 11.579rem; margin-left: 7.896rem; }
.feature .num01::after { left: .204rem; }

.feature .num02 { margin-top: 19.237rem; margin-left: 7.861rem; }
.feature .num03 { margin-top: 19.237rem; margin-left: 7.861rem; }
.feature .num04 { margin-top: 19.237rem; margin-left: 7.861rem; }
.feature .hd { font-size: 5rem; line-height: 1.25; letter-spacing: .06em; white-space: nowrap; }
.feature .hd01 { margin-top: 3.703rem; margin-left: 8.1rem; }
.feature .hd02 { margin-top: 3.703rem; margin-left: 8rem; }
.feature .hd03 { margin-top: 3.703rem; margin-left: 8rem; }
.feature .hd04 { margin-top: 3.703rem; margin-left: 8rem; }

.feature .lead { font-size: 2.4rem; line-height: 2; letter-spacing: .04em; white-space: nowrap; font-feature-settings: "palt"; }
.feature .lead01 { margin-top: 3.6rem; margin-left: 8.1rem; }
.feature .lead02 { margin-top: 3.6rem; margin-left: 8rem; }
.feature .lead03 { margin-top: 3.6rem; margin-left: 8rem; }
.feature .lead04 { margin-top: 3.65rem; margin-left: 8rem; }

.feature .look03 { margin-top: 6.968rem; margin-left: 2.5rem; width: 70rem; height: 87.5rem; }
.feature .look04 { margin-top: 8rem; width: 60rem; height: 75rem; }
.feature .look05 { margin-top: 3rem; width: 60rem; height: 75rem; }
.feature .look06 { margin-top: 6.968rem; margin-left: 10.5rem; width: 54rem; height: 67.5rem; }
.feature .look07 { margin-top: 8rem; width: 75rem; height: 93.8rem; }
.feature .look08 { margin-top: 8rem; margin-left: 4.5rem; width: 66rem; height: 82.5rem; }
.feature .look09 { margin-top: 6.968rem; margin-left: 5rem; width: 70rem; height: 87.5rem; }
.feature .look10 { margin-top: 8rem; width: 60rem; height: 75rem; }
.feature .look11 { margin-top: 8rem; margin-left: 16rem; width: 54rem; height: 67.5rem; }
.feature .look12 { margin-top: 6.968rem; width: 75rem; height: 93.8rem; }
.feature .look13 { margin-top: 8rem; margin-left: 5.5rem; width: 64rem; height: 80rem; }
.feature .look14 { margin-top: 3rem; margin-left: 5.5rem; width: 64rem; height: 80rem; }

.feature .vtxt { position: absolute; z-index: 2; top: 2.9rem; color: #fff; font-size: 2.8rem; line-height: 1; letter-spacing: .06em;
  writing-mode: vertical-rl; text-orientation: sideways; white-space: nowrap; pointer-events: none; }
.feature .vtxt04, .feature .vtxt11 { left: 2.429rem; }
.feature .vtxt07, .feature .vtxt14 { right: 3.07rem; }

.feature .switcher .switch-img { transition: opacity 1s ease, visibility 0s linear 1s; }
.feature .switcher .switch-img + .switch-img { position: absolute; inset: 0; }
.feature .switcher .switch-img:not(.is-current) { opacity: 0; visibility: hidden; pointer-events: none; }
.feature .switcher .switch-img.is-current { opacity: 1; transition: opacity 1s ease, visibility 0s; }

.feature .switch-dots { position: absolute; right: 2rem; bottom: 2rem; display: flex; gap: 2rem; z-index: 2; }
.feature .switch-dots button { width: 1rem; height: 1rem; padding: 0; border: 1px solid #fff; border-radius: 50%; background: transparent; cursor: pointer; }
.feature .switch-dots .is-current { background: #fff; }

.feature .credit { display: flex; flex-wrap: wrap; align-content: flex-start;
  font-family: "helvetica-neue-lt-pro-1", "helvetica-neue-lt-pro-2", "Helvetica Neue", Arial, sans-serif; font-weight: 300;
  font-size: 2rem; line-height: 3rem; letter-spacing: .04em; color: #232323; }
.feature .credit .item { white-space: nowrap; font-style: normal; }

.feature .credit .item:not(:last-child)::after { content: "/"; margin: 0 .318em; }

.feature .credit .item.-eol::after { visibility: hidden; position: absolute; }
.feature .credit .link { color: inherit; }
.feature .credit02 { margin-top: 3.5rem; margin-left: 4rem; max-width: 62.0703rem; height: 6.0000rem; }
.feature .credit03 { margin-top: 3.5rem; margin-left: auto; margin-right: auto; max-width: 43.7727rem; height: 6.0000rem; justify-content: center; }
.feature .credit04 { margin-top: 3.5rem; margin-left: 16rem; max-width: 55.2203rem; height: 3.0000rem; }
.feature .credit05 { margin-top: 3.5rem; margin-left: auto; margin-right: auto; max-width: 44.1852rem; height: 6.0000rem; justify-content: center; }

.feature .end { padding-bottom: 20.1rem; }
.feature .btn { margin-left: 9.5rem; width: 56rem; border: 1px solid #232323; text-align: center; }
.feature .btn a { display: block; height: 100%; padding-top: 2.42rem; }
.feature .btn01 { margin-top: 19.558rem; height: 8.8rem; }
.feature .btn02 { margin-top: 4rem; height: 12.8rem; }
.feature .btn__en { display: block; font-size: 3.6rem; line-height: 1.11; letter-spacing: .06em; white-space: nowrap; }

.feature .btn__ja { display: block; margin-top: 1.1rem; font-size: 2.2rem; line-height: 1; letter-spacing: .04em; white-space: nowrap; font-feature-settings: "palt"; }

.feature .btn__arw { position: absolute; top: 50%; right: 3.365rem; width: 1.77rem; height: 1.77rem;
  border-top: round(.2rem, 1px) solid #232323; border-right: round(.2rem, 1px) solid #232323; transform: translateY(-50%) rotate(45deg); }

.feature .follow { position: sticky; top: max(100svh, var(--ih, 100svh)); height: 0; z-index: 20; }
.feature .follow__bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; height: 10rem; background: #fff;
  border-top: 1px solid #232323; border-bottom: 1px solid #232323;
  opacity: 0; visibility: hidden; translate: 0 4rem;
  transition: opacity .5s ease, visibility .5s ease, translate .5s ease; }
.feature .follow__bar.is-active { opacity: 1; visibility: visible; translate: 0 0; }
.feature .follow__cell { position: relative; display: block; height: 100%; }
.feature .follow__cell.-items { flex: 0 0 auto; width: 33.05rem; border-right: 1px solid #232323; }
.feature .follow__cell.-outer { flex: 1 1 0; }

.feature .follow__cell.-items .follow__en { position: absolute; top: 3.37rem; left: 3.181rem; font-size: 2.8rem; line-height: 1.07; letter-spacing: .06em; white-space: nowrap; }
.feature .follow__txt { position: absolute; top: 1.52rem; left: 2.895rem; text-align: center; }
.feature .follow__txt .follow__en { display: block; font-size: 2.8rem; line-height: 1; letter-spacing: .06em; white-space: nowrap; }
.feature .follow__ja { display: block; margin-top: 1.53rem; font-size: 2rem; line-height: 1; letter-spacing: .04em; white-space: nowrap; font-feature-settings: "palt"; }

.feature .follow__arw { position: absolute; top: 50%; width: 1.27rem; height: 1.27rem;
  border-top: round(.2rem, 1px) solid #232323; border-right: round(.2rem, 1px) solid #232323; transform: translateY(-50%) rotate(45deg); }
.feature .follow__cell.-items .follow__arw { right: 3.363rem; }
.feature .follow__cell.-outer .follow__arw { right: 3.063rem; }

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

  html { font-size: 0.428571429vw; }

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

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

  .feature .frame-main { flex: 0 0 50%; width: 50%; }
  .feature .frame-main__inner { width: 75rem; }

  .feature .frame-side { position: relative; }
  .feature .frame-side.-mv { 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%; z-index: 2; overflow: hidden; }
  .feature .leftcont__thum { height: 100%; width: 100%; }
  .feature .leftcont__thum img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

  .feature .leftcont__ttl { position: absolute; left: calc(58 * var(--pcu)); bottom: calc(75 * var(--pcu)); color: #fff; }
  .feature .leftcont__ttl .fvttl__main { font-size: calc(72 * var(--pcu)); }
  .feature .leftcont__ttl .fvttl__sub { margin-top: calc(22.1 * var(--pcu)); margin-left: calc(1 * var(--pcu)); font-size: calc(40 * var(--pcu)); }

  .feature .follow__bar { height: calc(90 * var(--pcu)); }
  .feature .follow__cell.-items { width: calc(484 * var(--pcu)); }
  .feature .follow__cell.-items .follow__en { top: calc(31 * var(--pcu)); left: calc(121.39 * var(--pcu)); font-size: calc(25 * var(--pcu)); line-height: 1; }

  .feature .follow__txt { top: calc(11.5 * var(--pcu)); left: calc(120.2 * var(--pcu)); }
  .feature .follow__txt .follow__en { font-size: calc(25 * var(--pcu)); }
  .feature .follow__ja { margin-top: calc(16.9 * var(--pcu)); font-size: calc(18 * var(--pcu)); }
  .feature .follow__arw { width: calc(12.7 * var(--pcu)); height: calc(12.7 * var(--pcu)); }
  .feature .follow__cell.-items .follow__arw { right: calc(121.6 * var(--pcu)); }

  .feature .follow__cell.-outer .follow__arw { display: none; }
  .feature .follow__cell.-outer .follow__txt .follow__en { position: relative; display: inline-block; }
  .feature .follow__cell.-outer .follow__txt .follow__en::after { content: ""; position: absolute;
    left: calc(100% + 18 * var(--pcu)); top: calc(33.5 * var(--pcu)); width: calc(12.7 * var(--pcu)); height: calc(12.7 * var(--pcu));
    border-top: round(.2rem, 1px) solid #232323; border-right: round(.2rem, 1px) solid #232323; transform: translateY(-50%) rotate(45deg); }
}