@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; }
.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; }

  html:not(.is-forceanim) .look-scroll, html:not(.is-forceanim) .look-menu, html:not(.is-forceanim) .look-panel,
  html:not(.is-forceanim) .look-menu__line, html:not(.is-forceanim) .look-panel__line,
  html:not(.is-forceanim) .staff-modal, html:not(.is-forceanim) .look-viewall { transition: none !important; }
}
.is-noanim .look-scroll, .is-noanim .look-menu, .is-noanim .look-panel,
.is-noanim .look-menu__line, .is-noanim .look-panel__line, .is-noanim .look-viewall { transition: none !important; }
.is-noanim .look-track { transform: none !important; }

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

  font-family: "adobe-garamond-pro", Garamond, "Times New Roman", serif;
  font-weight: 400; font-style: normal; font-size: 2rem;
  text-spacing-trim: space-all; line-break: strict;
  background: #282019;
  --hdr: 51px;
  --vh: calc(100svh - var(--hdr));
  --vp-h: min(105rem, calc(var(--vh) - 28.4rem));
  --band-h: calc(var(--vh) - var(--vp-h));
  --bg: #282019; --fg: #e2e2e2;
}
.feature * { margin: 0; padding: 0; border: 0; vertical-align: baseline; box-sizing: border-box; }
.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: inherit; text-decoration: none; }
.feature button { font: inherit; color: inherit; background: none; cursor: pointer; }
.feature ul, .feature ol { list-style: 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 .credit { font-style: italic; }

.feature .credit .item { display: inline; white-space: nowrap; border: 0; padding: 0; font-style: italic; }
.feature .credit .item:last-child { margin-right: 0; }
.feature .credit .link { color: inherit; font: inherit; }

.feature .look-menu .credit .item, .feature .look-panel .credit .item { margin-right: .25em; }
.feature .look-menu .credit .item:last-child, .feature .look-panel .credit .item:last-child { margin-right: 0; }

.feature .-yr { position: relative; top: .036em; font-size: .953em; }

.feature .hero { position: sticky; top: var(--hdr); z-index: 10; height: var(--vh); overflow: hidden; background: #000; }
.feature .hero__video { display: block; width: 100%; height: var(--vh); object-fit: cover; }

.feature .hero__play { position: absolute; left: 50%; top: 51%; width: 19.54rem; transform: translate(-50%, -50%); }
.feature .hero__play img { width: 100%; }
.feature .hero.is-playing .hero__play { opacity: 0; visibility: hidden; }

.feature .hero__sound { --hit: max(0px, calc((44px - 4rem) / 2)); position: absolute; right: 2.2rem; bottom: max(2.1rem, 70px);
  width: calc(4rem + var(--hit) * 2); height: calc(4rem + var(--hit) * 2); padding: var(--hit); margin: calc(var(--hit) * -1);
  transition: opacity .3s ease; }
.feature .hero__sound img { width: 100%; }
.feature .hero__sound[data-state="off"] .hero__sound-on,
.feature .hero__sound[data-state="on"] .hero__sound-off { display: none; }

.feature .look-scroll { position: relative; z-index: 20; background-color: var(--bg); transition: background-color .3s ease; }

.feature .look-frame { height: 100%; }
.feature .look-viewer { position: sticky; top: var(--hdr); height: var(--vh); overflow: hidden; display: flex; flex-direction: column; }
.feature .look-viewport { position: relative; flex: 0 0 auto; height: var(--vp-h); overflow: hidden; }

.feature .look-track { --n: 37; display: flex; width: calc(var(--n) * 100%); height: 100%; will-change: transform; }
.feature .look-slide { flex: 0 0 calc(100% / var(--n)); height: 100%; }
.feature .look-slide > a { display: block; height: 100%; }
.feature .look-slide img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center top; }

@media screen and (max-width: 750px) { .feature .look-slide.-up4 img { transform: translateY(-.4rem); } }

.feature .look-viewall { position: absolute; top: 0; left: 68.6rem; width: 6rem; height: 11rem; color: #271f18;
  transition: opacity .3s ease, visibility .3s ease; }
.feature .look-viewall__txt { position: absolute; top: 1.46rem; left: 1.57rem; writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 1.801rem; line-height: 1.06; white-space: nowrap; }
.feature .look-viewall::after { content: ""; position: absolute; left: 3.72rem; top: -.1rem; width: 1px; height: 10rem; background: currentColor; }
.feature .look-scroll[data-active="0"] .look-viewall { opacity: 0; visibility: hidden; }

@media screen and (max-width: 750px) { .feature .look-viewer > .sp { display: contents; } }
.feature .look-menu { position: relative; flex: 1 1 auto; min-height: 0; background-color: var(--bg); transition: background-color .3s ease; }
.feature .look-menu__scroll { position: relative; height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.feature .look-menu__scroll::-webkit-scrollbar { display: none; }
.feature .look-menu__item { height: var(--band-h); padding: 6.34rem 5.7rem 0 6.1rem; background: var(--ibg); color: var(--ifg); cursor: pointer; overflow: hidden; }
.feature .-g1 { --ibg: #282019; --ifg: #e2e2e2; }
.feature .-g2 { --ibg: #f7f1df; --ifg: #000000; }
.feature .-g3 { --ibg: #ededed; --ifg: #000000; }
.feature .-g4 { --ibg: #894c1f; --ifg: #000000; }
.feature .-g5 { --ibg: #000000; --ifg: #e2e2e2; }
.feature .-g6 { --ibg: #66241b; --ifg: #e2e2e2; }
.feature .look-menu__ttl { font-size: 3.118rem; line-height: 1.44; }

.feature .look-menu__line { display: block; width: 0; height: 1px; margin: .7rem 0 0 -.3rem; background: currentColor; transition: width .4s ease; }
.feature .look-menu__item.is-active .look-menu__line { width: 63.5rem; transition: width .4s ease .2s; }

.feature .look-menu .credit { margin-top: 1.3rem; font-size: 2.616rem; line-height: 1.38; }

.feature .look-menu__item.-right .credit { width: 62.7rem; text-align: right; }
.feature .look-menu__item.-title { padding: 9.3rem 4rem 0 4.75rem; }
.feature .look-menu__brand { font-size: 3.88rem; line-height: 1.27; }
.feature .look-menu__sub { font-style: italic; font-size: 3.569rem; position: relative; top: -.3rem; }

.feature .staff { position: relative; z-index: 30; min-height: var(--vh); padding: 8.8rem 3rem 26rem; background: #66241b; color: #e2e2e2; }
html.js-look .feature .staff { margin-top: calc(var(--vh) * -1); }
.feature .staff__ttl { font-size: 3.4rem; line-height: 1.32; text-align: center; }
.feature .staff__list { margin-top: 1.5rem; padding: 3.8rem 2.3rem 5.2rem; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor;
  font-size: 2.835rem; line-height: 1.3; }
.feature .staff__row + .staff__row { margin-top: 3.69rem; }
.feature .staff__list dd { font-style: italic; }
.feature .staff__all { position: absolute; left: 0; right: 0; bottom: 16.8rem; text-align: center; }
.feature .staff__all a { display: inline-block; }
.feature .staff__all-sub { display: block; font-size: 2.868rem; line-height: 4.785rem; font-style: italic; position: relative; top: .6rem; }
.feature .staff__all-main { display: block; font-size: 3.402rem; line-height: 1.32; }

@media screen and (min-width: 751px) {
  html { font-size: 0.438095vw; }
  .feature .pc { display: block; }
  .feature .sp { display: none; }

  .feature { --hdr: 80px; --pcu: calc(100vw / 1500); }

  .feature .hero__play { width: calc(130 * var(--pcu)); }
  .feature .hero__sound { --hit: 0px; right: calc(20 * var(--pcu)); bottom: calc(20 * var(--pcu)); width: 40px; height: 40px; }

  .feature .look-frame { display: flex; align-items: stretch; }
  .feature .look-viewer { flex: 0 0 auto; align-self: flex-start; width: calc(615 * var(--pcu)); }
  .feature .look-viewport { height: 100%; }
  .feature .look-viewall { display: none; }
  .feature .look-frame > .pc { display: contents; }
  .feature .look-panel-wrap { flex: 1 1 auto; }
  .feature .look-panel { position: sticky; top: var(--hdr); height: var(--vh); overflow-y: auto; scrollbar-width: none;
    background-color: var(--bg); color: var(--fg); transition: background-color .3s ease, color .3s ease; }
  .feature .look-panel::-webkit-scrollbar { display: none; }
  .feature .look-panel__brand { position: absolute; left: calc(53.7 * var(--pcu)); top: calc(29 * var(--pcu));
    font-size: calc(25.86 * var(--pcu)); line-height: 1.15; }
  .feature .look-panel__sub { font-style: italic; font-size: calc(23.78 * var(--pcu)); position: relative; top: calc(-2 * var(--pcu)); }
  .feature .look-panel__nav { position: absolute; right: calc(33.4 * var(--pcu)); top: calc(28 * var(--pcu)); z-index: 2; text-align: right;
    font-size: calc(23.78 * var(--pcu)); line-height: 1.25; font-style: italic; }
  .feature .look-panel__all, .feature .look-panel__staff { display: block; margin-left: auto; }
  .feature .look-panel__staff { margin-right: calc(8 * var(--pcu)); font-style: italic; line-height: 1.25; }

  .feature .look-panel__list { width: calc(688.3 * var(--pcu)); margin-left: calc(59.5 * var(--pcu)); padding: calc(113.7 * var(--pcu)) 0 calc(30 * var(--pcu));
    column-count: 2; column-gap: calc(91.5 * var(--pcu)); }
  .feature .look-panel__item { position: relative; break-inside: avoid; margin-bottom: calc(23.6 * var(--pcu)); cursor: pointer; }
  .feature .look-panel__item.-col2 { break-before: column; margin-top: calc(6.2 * var(--pcu)); }
  .feature .look-panel__ttl { font-size: calc(14.63 * var(--pcu)); line-height: 1.44; }
  .feature .look-panel__line { position: absolute; left: calc(-1.9 * var(--pcu)); top: calc(23.3 * var(--pcu)); width: 0; height: 1px;
    background: currentColor; transition: width .4s ease; }
  .feature .look-panel__item.is-active .look-panel__line { width: calc(298.4 * var(--pcu)); }
  .feature .look-panel .credit { margin-top: calc(9.2 * var(--pcu)); font-size: calc(12.28 * var(--pcu)); line-height: 1.38; }

  .feature .look-panel__item.-inline { margin-bottom: calc(29.2 * var(--pcu)); }
  .feature .look-panel__item.-inline .look-panel__ttl, .feature .look-panel__item.-inline .credit { display: inline-block; vertical-align: baseline; }
  .feature .look-panel__item.-inline .credit { margin: 0 0 0 calc(14.7 * var(--pcu)); }

  .feature .look-panel__item.-inline[data-item="15"] { margin-bottom: calc(20.3 * var(--pcu)); }

  .feature .staff-modal { position: absolute; right: calc(33.4 * var(--pcu)); top: calc(57 * var(--pcu)); z-index: 100;
    width: calc(326 * var(--pcu)); height: calc(449 * var(--pcu)); padding: calc(23.75 * var(--pcu)) calc(23 * var(--pcu)) 0 0;
    background: #282019; color: #e1e1e1; text-align: right;
    transform-origin: top right; transform: scale(0); opacity: 0; visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease, transform .3s ease; }
  .feature .staff-modal.is-open { transform: scale(1); opacity: 1; visibility: visible; }
  .feature .staff-modal__list { font-size: calc(17.2 * var(--pcu)); line-height: 1.3; }
  .feature .staff-modal__list .staff__row + .staff__row { margin-top: calc(22.36 * var(--pcu)); }
  .feature .staff-modal__list dd { font-style: italic; }

  .feature .staff-modal__close { position: absolute; left: calc(23.9 * var(--pcu) - 22px); top: calc(425.5 * var(--pcu) - 22px); width: 44px; height: 44px; }
  .feature .staff-modal__close::before, .feature .staff-modal__close::after { content: ""; position: absolute; left: 50%; top: 50%;
    width: calc(24 * var(--pcu)); height: 1px; background: #f3ede3; }
  .feature .staff-modal__close::before { transform: translate(-50%, -50%) rotate(45deg); }
  .feature .staff-modal__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
}