@charset "UTF-8";
/*---------------------
セクション名
----------------------*/

.top .mv {
  aspect-ratio: 750/1080;
  position: relative;
  background: url(https://www.jr-takashimaya.co.jp/cn/cp/2025christmas/assets/img/top/mv-bg.jpg) no-repeat center center /cover;
}

.top .mv .video-wrapper {
  width: 100%;
  aspect-ratio: 750/1080;
  transition: opacity 1s;
  position: absolute;
  left: 0;
  top: 0;
}
.top .mv .video-wrapper.is-hidden{
  opacity: 0;
  pointer-events: none;
}

.top .mv .video-wrapper .btn-volume {
  width: 100px;
  height: 100px;
  border-radius: 999rem;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(https://www.jr-takashimaya.co.jp/cn/cp/2025christmas/assets/img/top/btn-play.svg);
  cursor: pointer;
  box-shadow: 0 0 60px 10px #fff;
  transition: filter 0.2s;
  position: absolute;
  right: 30px;
  top: 25px;
  z-index: 1;
}

.top .mv .video-wrapper .btn-volume.is-muted {
  background-image: url(https://www.jr-takashimaya.co.jp/cn/cp/2025christmas/assets/img/top/btn-muted.svg);
}

.top .mv .video-wrapper #audio {
  display: none;
}

.top .mv .video-wrapper video {
  width: 100%;
  vertical-align: bottom;
  pointer-events: none;
}

.top .contents .btn01 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: -448px 0 0;
}

.top .contents .btn02 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: -230px 0 0;
}

.top .contents .btn03 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: -235px 0 0;
}

.top .contents .btn04 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: -136px 0 0;
}

.top .contents .btn05 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: -220px 0 0;
}

.top .contents .btn06 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: -198px 0 0;
}

.top .contents .btn07 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: -190px 0 0;
}

.top .contents .btn07.accordion [data-accordion="trigger"] {
  position: relative;
}
.top .contents .btn07.accordion [data-accordion="trigger"]::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 90px;
  transform: translateY(-50%);
  rotate: 0deg;
  background: url("https://www.jr-takashimaya.co.jp/cn/cp/2025christmas/assets/img/top/ic-arrow.svg") no-repeat center center / contain;
  width: 37px;
  height: 18px;
}
.top .contents .btn07.accordion .accordion-container {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease-out;
}
.top .contents .btn07.accordion.is-open [data-accordion="trigger"]::after {
  transform: translateY(50%);
  rotate: 180deg;
}
.top .contents .btn07.accordion.is-open .accordion-container {
  grid-template-rows: 1fr;
}
.top .contents .btn07.accordion .accordion-container .accordion-inner {
  overflow: hidden;
}

.top .contents .btn08 {
  position: absolute;
  margin: -560px 530px 0;
}

.top .contents .btn09 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: -133px 0 0;
}

.top .contents .btn10 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: -180px 0 0;
}

.top .contents .btn11 {
  position: absolute;
  margin: -550px 100px 0;
}

.top .contents .btn12 {
  position: absolute;
  margin: -510px 475px 0;
}

.top .contents .btn13 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: -190px 0 0;
}

.top .contents .btn14 {
  position: absolute;
  margin: -377px 411px 0;
}

.top .contents .btn15 {
  position: absolute;
  margin: -458px 408px 0;
}

.top .contents .btn16 {
  position: absolute;
  margin: -638px 408px 0;
}

.top .contents .btn17 {
  position: absolute;
  margin: -297px 408px 0;
}

.top .contents .btn18 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: -177px 0 0;
}

.top .mv .btn19 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: -337px 0 0;
}

.top .contents .btn20 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: -520px 0 0;
}

.top .contents .btn21 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: -850px 0 0;
}

.top .contents .btn22 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: -410px 0 0;
}

.top .contents .btn23 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: -720px 0 0;
}
.top .contents .btn24 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: -450px 0 0;
}
.top .contents .bt1 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: -451px 0 0;
}

aside.modal {
  width: 100%;
  height: 100%;
  position: fixed;
  inset: 0;
  margin: 0 auto;
  background: rgba(0 0 0 / 50%);
  display: flex;
  align-items: center;
  opacity: 0;
}
aside.modal.is-activated {
  z-index: 20;
  opacity: 1;
  visibility: visible;
  transition: all 0.3s;
}
aside.modal.is-hidden {
  z-index: -1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
aside.modal .inner {
  width: 100vw;
  max-width: 750px;
  max-height: calc(100svh - 200px);
  aspect-ratio: 9 / 16;
  margin: 0 auto;
  padding-top: 50px;
  background: url(https://www.jr-takashimaya.co.jp/cn/cp/2025christmas/assets/img/top/ico-close.svg) no-repeat right 10px top / 50px auto;
}
aside.modal .inner iframe {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}
aside.modal .inner .masking {
  position: absolute;
  inset: 0;
  z-index: 0;
  cursor: pointer;
}