@media screen and (max-width: 736px) {
  .pc {
    display: none;
  }
}

@media print, screen and (min-width: 736px) {
  .sp {
    display: none;
  }
}

.mainMenu {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: rgba(0, 0, 0, 0.9);
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  left: 0;
  position: absolute;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  width: 100%;
  will-change: transform;
  z-index: 4;
}

@media print, screen and (min-width: 736px) {
  .mainMenu {
    gap: 24px;
    padding: 30px 0 40px;
  }
}

@media screen and (max-width: 736px) {
  .mainMenu {
    gap: calc(24 / 390 * 100vw);
    padding: calc(40 / 390 * 100vw) 0 calc(24 / 390 * 100vw);
  }
}

.mainMenu.is-active {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.mainMenu__handle {
  background-color: #3b3b3b;
  border-radius: 5px;
  left: 50%;
  position: absolute;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

@media print, screen and (min-width: 736px) {
  .mainMenu__handle {
    display: none;
  }
}

@media screen and (max-width: 736px) {
  .mainMenu__handle {
    height: calc(4 / 390 * 100vw);
    top: calc(12 / 390 * 100vw);
    width: calc(144 / 390 * 100vw);
  }
}

.mainMenu__main {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media print, screen and (min-width: 736px) {
  .mainMenu__main {
    gap: 72px;
  }
}

@media screen and (max-width: 736px) {
  .mainMenu__main {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: calc(16 / 390 * 100vw);
  }
}

.mainMenu__main a {
  color: #c0b898;
  display: block;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  line-height: normal;
  text-align: center;
  -webkit-transition: opacity .3s ease;
  transition: opacity .3s ease;
  white-space: nowrap;
}

@media print, screen and (min-width: 736px) {
  .mainMenu__main a {
    font-size: 28px;
    padding-top: 2px;
  }
}

@media screen and (max-width: 736px) {
  .mainMenu__main a {
    font-size: calc(26 / 390 * 100vw);
    min-width: calc(253 / 390 * 100vw);
    padding-top: calc(4 / 390 * 100vw);
  }
}

@media print, screen and (min-width: 736px) {
  .mainMenu__main a:hover {
    opacity: .6;
  }
}

@media (hover: hover) and (pointer: fine) {
  .mainMenu__main a:hover {
    opacity: .6;
  }
}

.mainMenu__main .is-off {
  opacity: .3;
  pointer-events: none;
}

.mainMenu__sub {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  width: 100%;
}

@media print, screen and (min-width: 736px) {
  .mainMenu__sub {
    gap: 24px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding-top: 16px;
  }
}

@media screen and (max-width: 736px) {
  .mainMenu__sub {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: calc(24 / 390 * 100vw);
    padding-top: calc(20 / 390 * 100vw);
  }
}

.mainMenu__sub:before {
  background-color: rgba(255, 255, 255, 0.2);
  content: '';
  height: 1px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.mainMenu__subList {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media print, screen and (min-width: 736px) {
  .mainMenu__subList {
    gap: 24px;
  }
}

@media screen and (max-width: 736px) {
  .mainMenu__subList {
    gap: calc(2 / 390 * 100vw);
  }
}

.mainMenu__subList a,
.mainMenu__subList button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  border: 0;
  color: #c0b898;
  cursor: pointer;
  display: block;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  line-height: normal;
  text-align: center;
  -webkit-transition: opacity .3s ease;
  transition: opacity .3s ease;
  white-space: nowrap;
}

@media print, screen and (min-width: 736px) {
  .mainMenu__subList a,
  .mainMenu__subList button {
    font-size: 22px;
    padding: 2px 24px 0;
  }
}

@media screen and (max-width: 736px) {
  .mainMenu__subList a,
  .mainMenu__subList button {
    font-size: calc(20 / 390 * 100vw);
    padding: 0 calc(24 / 390 * 100vw);
  }
}

@media print, screen and (min-width: 736px) {
  .mainMenu__subList a:hover,
  .mainMenu__subList button:hover {
    opacity: .6;
  }
}

@media (hover: hover) and (pointer: fine) {
  .mainMenu__subList a:hover,
  .mainMenu__subList button:hover {
    opacity: .6;
  }
}

@media screen and (max-width: 736px) {
  .mainMenu__subList li:first-child a {
    padding: 0 calc(16 / 390 * 100vw);
  }
}

.mainMenu__subList .is-off {
  opacity: .3;
  pointer-events: none;
}

.mainMenu__btns {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media print, screen and (min-width: 736px) {
  .mainMenu__btns {
    gap: 32px;
    margin-left: 24px;
  }
}

@media screen and (max-width: 736px) {
  .mainMenu__btns {
    gap: calc(12 / 390 * 100vw);
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: calc(8 / 390 * 100vw) calc(32 / 390 * 100vw);
    width: 100%;
  }
}

.mainMenu__btns .is-off {
  opacity: .3;
  pointer-events: none;
}

.mainMenu__member {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  border: 1px solid #6b6b6b;
  border-radius: 50px;
  color: #6b6b6b;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  line-height: normal;
  text-align: center;
  -webkit-transition: opacity .3s ease;
  transition: opacity .3s ease;
  white-space: nowrap;
}

@media print, screen and (min-width: 736px) {
  .mainMenu__member {
    font-size: 19px;
    padding: 0 32px;
  }
}

@media screen and (max-width: 736px) {
  .mainMenu__member {
    font-size: calc(18 / 390 * 100vw);
    padding: 0 calc(19 / 390 * 100vw);
  }
}

@media print, screen and (min-width: 736px) {
  .mainMenu__member:hover {
    opacity: .6;
  }
}

@media (hover: hover) and (pointer: fine) {
  .mainMenu__member:hover {
    opacity: .6;
  }
}

.mainMenu__entry {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: #d2c79a;
  border: 0;
  border-radius: 50px;
  color: #000000;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  line-height: normal;
  text-align: center;
  -webkit-transition: opacity .3s ease;
  transition: opacity .3s ease;
  white-space: nowrap;
}

@media print, screen and (min-width: 736px) {
  .mainMenu__entry {
    font-size: 19px;
    padding: 4px 46px;
  }
}

@media screen and (max-width: 736px) {
  .mainMenu__entry {
    font-size: calc(18 / 390 * 100vw);
    padding: calc(4 / 390 * 100vw) calc(26 / 390 * 100vw);
  }
}

@media print, screen and (min-width: 736px) {
  .mainMenu__entry:hover {
    opacity: .8;
  }
}

@media (hover: hover) and (pointer: fine) {
  .mainMenu__entry:hover {
    opacity: .8;
  }
}

.mainVisual {
  height: 300vh;
  position: relative;
  width: 100%;
  z-index: 1;
}

.mainVisual__sticky {
  height: 100vh;
  overflow: hidden;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  width: 100%;
}

.mainVisual__bg {
  -webkit-filter: brightness(2.6);
          filter: brightness(2.6);
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  -webkit-transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1), -webkit-filter 2s cubic-bezier(0.16, 1, 0.3, 1);
  transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1), -webkit-filter 2s cubic-bezier(0.16, 1, 0.3, 1);
  transition: filter 2s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1);
  transition: filter 2s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1), -webkit-filter 2s cubic-bezier(0.16, 1, 0.3, 1);
  width: 100%;
  z-index: 1;
}

.mainVisual__bg video {
  display: block;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0;
  -webkit-transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  width: 100%;
}

.mainVisual__bg iframe {
  display: block;
}

.mainVisual__bg .streamMovie {
  height: 100%;
  width: 100%;
}

.mainVisual__movie {
  height: 100%;
  opacity: 0;
  overflow: hidden;
  position: relative;
  -webkit-transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  width: 100%;
}

.mainVisual__movie .streamMovie {
  left: 50%;
  min-height: 100%;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 100vw;
}

.mainVisual__movie iframe {
  display: block;
  height: 100% !important;
  width: 100% !important;
}

@media screen and (max-width: 736px) {
  .mainVisual__movie--pc {
    display: none;
  }
}

.mainVisual__movie--pc .streamMovie {
  height: calc(100vw * 1080 / 1920);
  min-width: calc(100vh * 1920 / 1080);
}

@media print, screen and (min-width: 736px) {
  .mainVisual__movie--sp {
    display: none;
  }
}

.mainVisual__movie--sp .streamMovie {
  height: calc(100vw * 1334 / 750);
  min-width: calc(100vh * 750 / 1334);
}

.mainVisual__poster {
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  -webkit-transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1);
  width: 100%;
  z-index: 2;
}

.mainVisual__poster picture,
.mainVisual__poster img {
  display: block;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
}

.mainVisual__poster:after {
  background-color: rgba(0, 0, 0, 0.5);
  content: '';
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.mainVisual__capIn {
  bottom: 0;
  position: absolute;
  text-align: right;
  z-index: 1;
}

@media print, screen and (min-width: 736px) {
  .mainVisual__capIn {
    right: 0;
  }
}

@media screen and (max-width: 736px) {
  .mainVisual__capIn {
    left: 0;
  }
}

.mainVisual__logo {
  left: 50%;
  opacity: 0;
  position: absolute;
  -webkit-transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 3;
}

@media print, screen and (min-width: 736px) {
  .mainVisual__logo {
    top: 50%;
    -webkit-transform: translate(-50%, calc(-50% - 24px));
            transform: translate(-50%, calc(-50% - 24px));
    width: 480px;
  }
}

@media screen and (max-width: 736px) {
  .mainVisual__logo {
    top: calc(266 / 844 * 100vh);
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
    width: calc(315 / 844 * 100vh);
  }
}

.mainVisual__logo img {
  display: block;
  height: auto;
  width: 100%;
}

.mainVisual__movieBtn {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(107, 107, 107, 0.8);
  color: #c0b898;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media print, screen and (min-width: 736px) {
  .mainVisual__movieBtn {
    border-radius: 68px;
    gap: 6px;
    padding: 6px 20px;
  }
}

@media screen and (max-width: 736px) {
  .mainVisual__movieBtn {
    border-radius: calc(68 / 390 * 100vw);
    gap: calc(6 / 390 * 100vw);
    padding: calc(6 / 390 * 100vw) calc(20 / 390 * 100vw);
  }
}

.mainVisual__movieBtn .icon {
  aspect-ratio: 1 / 1;
  display: block;
}

@media print, screen and (min-width: 736px) {
  .mainVisual__movieBtn .icon {
    width: 8px;
  }
}

@media screen and (max-width: 736px) {
  .mainVisual__movieBtn .icon {
    width: calc(8 / 390 * 100vw);
  }
}

.mainVisual__movieBtn .icon svg {
  height: auto;
  width: 100%;
}

.mainVisual__movieBtn .ttl {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.25;
}

@media print, screen and (min-width: 736px) {
  .mainVisual__movieBtn .ttl {
    font-size: 14px;
  }
}

@media screen and (max-width: 736px) {
  .mainVisual__movieBtn .ttl {
    font-size: calc(14 / 390 * 100vw);
  }
}

.mainVisual__movieBtn .play,
.mainVisual__movieBtn .pause {
  display: block;
}

.mainVisual__movieBtn .pause {
  display: none;
}

.mainVisual.is-poster .mainVisual__poster,
.mainVisual.is-poster .mainVisual__logo {
  opacity: 1;
}

.mainVisual.is-movie .mainVisual__movie,
.mainVisual.is-movie .mainVisual__bg video {
  opacity: 1;
}

.mainVisual.is-movie .mainVisual__poster,
.mainVisual.is-movie .mainVisual__logo {
  opacity: 0;
}

.mainVisual.is-playing .mainVisual__movieBtn .play {
  display: none;
}

.mainVisual.is-playing .mainVisual__movieBtn .pause {
  display: block;
}

.mainVisual__bottom {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  left: 0;
  position: absolute;
  right: 0;
  z-index: 3;
}

@media print, screen and (min-width: 736px) {
  .mainVisual__bottom {
    bottom: calc(24px + var(--mv-menu-h, 175px) * var(--mv-scroll, 0));
    padding: 0 24px;
  }
}

@media screen and (max-width: 736px) {
  .mainVisual__bottom {
    bottom: calc((24 / 390 * 100vw) + var(--mv-menu-h, 82.05128vw) * var(--mv-scroll, 0));
    padding: 0 calc(16 / 390 * 100vw) 0 calc(24 / 390 * 100vw);
  }
}

.mainVisual__scroll {
  text-align: center;
}

@media print, screen and (min-width: 736px) {
  .mainVisual__scroll {
    width: 64px;
  }
}

@media screen and (max-width: 736px) {
  .mainVisual__scroll {
    width: calc(64 / 390 * 100vw);
  }
}

.mainVisual__scroll .ttl {
  color: #c0b898;
  display: block;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1.25;
}

@media print, screen and (min-width: 736px) {
  .mainVisual__scroll .ttl {
    font-size: 12px;
  }
}

@media screen and (max-width: 736px) {
  .mainVisual__scroll .ttl {
    font-size: calc(12 / 390 * 100vw);
  }
}

.mainVisual__scroll .arrow {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

@media print, screen and (min-width: 736px) {
  .mainVisual__scroll .arrow {
    margin-top: 8px;
    width: 14px;
  }
}

@media screen and (max-width: 736px) {
  .mainVisual__scroll .arrow {
    margin-top: calc(8 / 390 * 100vw);
    width: calc(14 / 390 * 100vw);
  }
}

.mainVisual__scroll .arrow svg {
  -webkit-animation: mvArrow 4.9s cubic-bezier(0.16, 1, 0.3, 1) infinite;
          animation: mvArrow 4.9s cubic-bezier(0.16, 1, 0.3, 1) infinite;
  display: block;
  fill: none;
  height: auto;
  stroke: #c0b898;
  width: 100%;
}

.mainVisual.is-start .mainVisual__bg {
  -webkit-filter: brightness(1);
          filter: brightness(1);
  opacity: 1;
}

@-webkit-keyframes mvArrow {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-40%);
            transform: translateY(-40%);
  }
  32.65% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  69.39% {
    -webkit-animation-timing-function: cubic-bezier(0.7, 0, 0.84, 0);
            animation-timing-function: cubic-bezier(0.7, 0, 0.84, 0);
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(40%);
            transform: translateY(40%);
  }
}

@keyframes mvArrow {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-40%);
            transform: translateY(-40%);
  }
  32.65% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  69.39% {
    -webkit-animation-timing-function: cubic-bezier(0.7, 0, 0.84, 0);
            animation-timing-function: cubic-bezier(0.7, 0, 0.84, 0);
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(40%);
            transform: translateY(40%);
  }
}
