@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; }
.efs-system-notification { display: none !important; }

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(80px); transition: opacity 1.5s, transform 1.5s; }
html.js-anim .js-reveal.-up.is-inview { transform: none; }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
html.js-anim .js-reveal.-soft { opacity: 1; transition: none;
  animation: fade-in 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards paused; }
html.js-anim .js-reveal.-soft.is-inview { animation-play-state: running; }

html.js-anim .js-reveal.-soft-pc { opacity: 1; transition: none; }

.is-noanim .js-reveal, .is-noanim .js-anime { transition: none !important; opacity: 1 !important; animation: none !important; }
.is-noanim .js-reveal.-up { transform: none !important; }

.is-still .js-reveal, .is-still .js-anime { transition: none !important; opacity: 1 !important; animation: none !important; }
.is-still .js-reveal.-up { transform: none !important; }
html.is-still { scroll-behavior: auto; }

.feature { box-sizing: border-box; color: #333; margin: 0 auto; position: relative; width: 100%;
  font-family: "arial-1", Arial, sans-serif; font-weight: 400; font-style: normal;
  font-size: 2rem;
  text-spacing-trim: space-all;
  line-break: strict;
  background: #fbfbfa;  }
.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: #333; 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: #fbfbfa; }

.feature .fv { position: sticky; top: 0; height: 112rem; margin-top: 0rem; }
.feature .fv__photo, .feature .fv__photo img { width: 100%; height: 100%; }
.feature .fv__photo img { object-fit: cover; object-position: center top; }
.feature .fv__logo { position: absolute; inset: 0; }
.feature .fv__brand { position: absolute; top: 84.97rem; left: 17.457rem; width: 40rem; }
.feature .fv__brand img { width: 100%; }

.feature .fv__ttl { position: absolute; top: 93.72rem; left: 24.46rem; width: 26.3865rem; }
.feature .fv__ttl img, .feature .ending-ttl img { width: 100%; }

.feature .sheet { position: relative; display: flow-root; background: #fbfbfa; padding-bottom: 4.1rem; }

.feature .lk { display: block; position: relative; width: 69.5rem; margin-left: auto; margin-right: auto; }
.feature .lk img { width: 100%; }
.feature .look03 { margin-top: 10rem; }
.feature .look04 { margin-top: 11.057rem; }
.feature .look05 { margin-top: 1rem; }
.feature .look06 { margin-top: 20.784rem; width: 44rem; margin-left: 15.5rem; }
.feature .look07 { margin-top: 23.504rem; }
.feature .look08 { margin-top: 1.31rem; }
.feature .look09 { margin-top: 12.852rem; }
.feature .look10 { margin-top: 1.388rem; }
.feature .look11 { margin-top: 21.61rem; width: 56.75rem; margin-left: 9.125rem; }
.feature .look11 .look12 { position: absolute; top: 22.41rem; left: 17.683rem; width: 20.803rem; }
.feature .look13 { margin-top: 19.855rem; }
.feature .look14 { margin-top: 0.95rem; }
.feature .look15 { margin-top: 14.503rem; }
.feature .look16 { margin-top: 21.433rem; width: 44.056rem; margin-left: 15.055rem; }
.feature .look17 { margin-top: 23.135rem; }
.feature .look18 { margin-top: 0.94rem; }
.feature .look19 { margin-top: 15.672rem; }
.feature .look20 { margin-top: 19.939rem; width: 44.056rem; margin-left: 15.596rem; }
.feature .look21 { margin-top: 23.975rem; }
.feature .look22 { margin-top: 0.95rem; }
.feature .look23 { margin-top: 21.841rem; }

.feature .row { position: relative; width: 69.5rem; margin-left: auto; margin-right: auto;
  font-size: 1.6rem; line-height: 1.76; letter-spacing: .03em; color: #333; white-space: nowrap; }
.feature .row01 { margin-top: 0.628rem; }
.feature .row02 { margin-top: 0.679rem; }
.feature .row03 { margin-top: 0.678rem; }
.feature .row04 { margin-top: 0.729rem; }
.feature .row05 { margin-top: 0.628rem; }
.feature .row06 { margin-top: 0.698rem; }
.feature .row07 { margin-top: 0.629rem; }
.feature .row08 { margin-top: 0.629rem; }
.feature .row09 { margin-top: 0.729rem; }
.feature .row10 { margin-top: 1.222rem; }
.feature .row-s1 { margin-top: 0.918rem; width: 44rem; margin-left: 15.5rem; }
.feature .row-s2 { margin-top: 0.665rem; width: 56.75rem; margin-left: 9.125rem; }
.feature .row-s3 { margin-top: 0.679rem; width: 44.056rem; margin-left: 15.055rem; }
.feature .row-s4 { margin-top: 0.559rem; width: 44.056rem; margin-left: 15.596rem; }
.feature .row .cap.-r { position: absolute; top: 0; right: 0; }

.feature .row .credit { position: absolute; top: 0; right: 0; font-size: 0; }
.feature .credit .item { display: inline; position: relative; white-space: nowrap; line-height: inherit; font-size: 1.6rem;
  font-family: "arial-1", Arial, sans-serif; font-weight: 400; font-style: normal; color: #333; letter-spacing: .03em; }
.feature .credit .item:not(:last-child)::after { content: " / "; white-space: pre; }
.feature .credit .link { font-size: 1.6rem; color: #333; letter-spacing: .03em; }
.feature .credit .item.-noline { border-bottom: none; }

.feature .row-s3 .credit { position: static; }
.feature .row-s3 .credit .item { display: block; }
.feature .row-s3 .credit .link { display: flex; justify-content: space-between; width: 100%; }

html.js-anim .feature .lb .credit, html.js-anim .feature .lb .cap { opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s linear .4s; }
html.js-anim .feature .lb.is-credit .credit, html.js-anim .feature .lb.is-credit .cap { opacity: 1; visibility: visible; transition: opacity .4s, visibility 0s; }

.is-noanim .feature .lb .credit, .is-noanim .feature .lb .cap,
.is-still .feature .lb .credit, .is-still .feature .lb .cap { opacity: 1 !important; visibility: visible !important; transition: none !important; }

.feature .switcher { position: relative; }
.feature .switcher .switch-img { transition: opacity 1.3s linear, visibility 0s linear 1.3s; }
.feature .switcher .switch-img + .switch-img { position: absolute; inset: 0; }
.feature .switcher .switch-img + .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 1.3s linear, visibility 0s; }
.feature .switcher a.switch-img { display: block; }

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

.feature .allitems { margin-top: 37.8828rem; text-align: center; font-size: 2.132rem; line-height: 1.76; letter-spacing: .03em; }

.feature .allitems a { display: inline-block; position: relative; color: #333; border-bottom: .1rem solid transparent; padding-bottom: .06rem; }
.feature .allitems a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.8rem; height: .1rem; background: #000; }
.feature .look24 { margin-top: 4.7278rem; }
.feature .look24 img { width: 100%; }
.feature .ending-ttl { margin-top: 2.813rem; width: 22.388rem; height: 3.164rem; padding-top: .46rem; margin-left: 26.356rem; }
.feature .look25 { margin-top: 26.144rem; width: 19.913rem; margin-left: auto; margin-right: auto; }
.feature .look26 { margin-top: 5.573rem; width: 66.313rem; margin-left: auto; margin-right: auto; }
.feature .look25 img, .feature .look26 img { width: 100%; }

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

  .feature .pcfv, .feature .frame-side, .feature .pc-end { display: none; }
}

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

  html { font-size: min(calc((100vw - var(--sbw, 0px)) * .00402778), 7.7333px); }

  .feature .pc { display: block; }
  .feature .sp { display: none; }
  .feature .ending { display: none; }

  .feature .frame > .pc, .feature > .pc { display: contents; }

  .feature { --pcu: calc((100vw - var(--sbw, 0px)) / 1920);
             --rail-top: 80px;  }

  .feature .pcfv { position: sticky; top: 0; display: flex; height: calc(998.6 * var(--pcu)); }
  .feature .pcfv__photo { width: 50%; height: 100%; }
  .feature .pcfv__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
  .feature .pcfv__logo { position: absolute; top: calc(425.2 * var(--pcu)); left: calc(691.7 * var(--pcu)); width: calc(536.6 * var(--pcu)); }
  .feature .pcfv__logo img { width: 100%; }
  .feature .pcfv__ttl { position: absolute; top: calc(541.4 * var(--pcu)); left: calc(783.6 * var(--pcu)); width: calc(354 * var(--pcu)); }
  .feature .pcfv__ttl img, .feature .pc-end__ttl img { width: 100%; }

  .feature .cover { position: relative; background: #fbfbfa; }
  .feature .frame { display: flex; align-items: stretch; justify-content: center; padding-top: calc(130 * var(--pcu)); }
  .feature .frame-main { flex: 0 0 auto; width: 75rem; }
  .feature .frame-side { position: relative; flex: 1 1 0; }

  .feature .fv { position: relative; }
  .feature .fv__logo { display: none; }
  html.js-anim .feature .js-reveal.-soft-pc { animation: fade-in 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards paused; }
  html.js-anim .feature .js-reveal.-soft-pc.is-inview { animation-play-state: running; }
  .feature .sheet { padding-bottom: 0; }

  .feature .rail { position: sticky; top: calc(var(--rail-top) + 40px); height: calc(23.3 * var(--pcu));
    margin-top: calc(41 * var(--pcu)); margin-bottom: calc(638 * var(--pcu)); }
  .feature .rail__logo { position: absolute; top: 0; left: calc(59.5 * var(--pcu)); width: calc(167.7 * var(--pcu)); }
  .feature .rail__txt { position: absolute; top: calc(4.75 * var(--pcu)); left: calc(260.5 * var(--pcu));
    font-size: calc(18 * var(--pcu)); line-height: 1; letter-spacing: .03em; color: #333; white-space: nowrap; }
  .feature .rail__all { position: absolute; top: calc(-.65 * var(--pcu)); right: calc(40 * var(--pcu));
    font-size: calc(18 * var(--pcu)); line-height: 1; letter-spacing: .03em; color: #333; white-space: nowrap;
    padding-bottom: calc(14.15 * var(--pcu)); border-bottom: max(1px, calc(1 * var(--pcu))) solid #000; }

  .feature .pc-end { padding: calc(276.8 * var(--pcu)) 0 calc(196.3 * var(--pcu)); }
  .feature .pc-end__box { position: relative; height: calc(640 * var(--pcu)); }
  .feature .pc-end__photo { position: absolute; top: 0; left: calc(100 * var(--pcu)); width: calc(960 * var(--pcu)); }
  .feature .pc-end__photo img { width: 100%; }
  .feature .pc-end__ttl { position: absolute; top: calc(76.1 * var(--pcu)); left: calc(1386.6 * var(--pcu)); width: calc(201.5 * var(--pcu)); }
  .feature .pc-end__logo { position: absolute; top: calc(336.2 * var(--pcu)); left: calc(1397.5 * var(--pcu)); width: calc(179.2 * var(--pcu)); }
  .feature .pc-end__staff { position: absolute; top: calc(411.3 * var(--pcu)); left: calc(1176 * var(--pcu)); width: calc(622.2 * var(--pcu)); }
  .feature .pc-end__logo img, .feature .pc-end__staff img { width: 100%; }
  .feature .pc-end__all { position: absolute; top: calc(539.4 * var(--pcu)); left: calc(1176 * var(--pcu)); width: calc(622.2 * var(--pcu));
    text-align: center; font-size: calc(19.19 * var(--pcu)); line-height: 1; letter-spacing: .03em; }
  .feature .pc-end__all a { display: inline-block; color: #333; white-space: nowrap;
    padding-bottom: calc(14.6 * var(--pcu)); border-bottom: max(1px, calc(1 * var(--pcu))) solid #000; }
}