@charset "UTF-8";

html body {
  color: #fff;
}

img {
  max-width: 100%;
}

a:link, a:visited {
  color: #fff;
}

@media(min-width: 801px) {
  .spOnly {
    display: none;
  }
}

.is-breadcrumb, .breadcrumb {
  display: none;
}

.wrapper {
  background: #fff;
}

.cl-door-setcion {
  position: relative;
  background: #EDEDEB url('/sw/onlinestore/mypage/club_lounge/assets/images/door_bg_main_pc.png') 50% 97px no-repeat;
  background-size: auto;
  transition: opacity 1s 1s ease-in;
  min-height: 100vh;
}

@media(max-width: 800px) {
  .cl-door-setcion {
    background-color: #EDEDEB;
    background-image: url('/sw/onlinestore/mypage/club_lounge/assets/images/door_bg_main_sp.png');
    background-position: 50% 25.28vw;
    background-size: 100% auto;
  }
}

.cl-door-setcion > .container {
  position: relative;
  z-index: 1;
  transition: opacity 1s;
}

.cl-door-setcion.-transition {
  opacity: 0;
}

.cl-door-setcion.-transition > .container {
  opacity: 0;
}

.cl-heading01 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-top: 57px;
}

.cl-heading01__jp {
  font-size: 1.4rem;
  font-weight: 500;
  color: #A18B4E;
  margin-top: 10px;
}

@media(min-width: 801px) {
  .cl-heading01__en img {
    zoom: 0.936;
  }
}

@media(max-width: 800px) {
  .cl-heading01 {
    flex-direction: column;
    height: auto;
    padding-top: 17.78vw;
  }
  .cl-heading01__jp {
    margin-top: 10px;
  }
}

.cl-contents {
  text-align: center;
  font-size: 1.6rem;
  margin-top: 298px;
  color: #45433E;
}

.cl-backIcon {
  position: absolute;
  z-index: 2;
  right: 27%;
  top: 30px;
  width: 23px;
  height: 23px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  transform: rotate(45deg);
}

.cl-backIcon::before,
.cl-backIcon::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #45433E;
}

.cl-backIcon::after {
  transform: rotate(90deg);
}

.cl-pageDiscription {
  font-size: 1.2rem;
}

.cl-pageDiscription__caption {
  display: block;
  margin-bottom: 13px;
  font-size: 0;
  height: 15px;
  background: url('/sw/onlinestore/mypage/club_lounge/assets/images/door_ttl_01.png') center top/ contain no-repeat;
}

.cl-contents:has([data-inc-text="door_sorry"]) .cl-pageDiscription__caption {
  background: url('/sw/onlinestore/mypage/club_lounge/assets/images/door_ttl_03.png') center top/ contain no-repeat;
}

.cl-contents:has([data-inc-text="door_sorry"]) .only_main {
  display: none;
}

.cl-dynamicArea {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 11px;
}

.cl-dynamicArea__inner {
  width: 100%;
}

.cl-dynamicArea__text[data-inc-text="door_enter"] {
  font-size: 0;
  height: 10px;
  background: url('/sw/onlinestore/mypage/club_lounge/assets/images/door_ttl_02.png') center top/ contain no-repeat;
}

.cl-dynamicArea__text[data-inc-text="door_sorry"] {
  font-size: 1.2rem;
}

.cl-dynamicArea__button > button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 155px;
  min-height: 32px;
  margin-top: 15px;
  color: #fff;
  background: #45433E;
  transition: opacity 0.5s;
  font-size: 1.2rem;
  position: relative;
}

.cl-dynamicArea__button > button::after {
  content: '';
  border: solid #fff;
  border-width: 0 1px 1px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(-45deg) translateY(-50%);
  position: absolute;
  right: 17px;
  top: 46%;
}

@media (hover: hover) {
  .cl-dynamicArea__button > button:hover {
    opacity: 0.7;
  }
}

.cl-backText {
  margin-top: 5px;
}

.cl-backText > a {
  text-decoration: underline;
  font-size: 1rem;
  color: #45433E;
}

@media (hover: hover) {
  .cl-backText > a:hover {
    text-decoration: none;
  }
}

@media(max-width: 800px) {
  .cl-contents {
    font-size: 1.4rem;
    margin-top: 78.33vw;
  }

  .cl-pageDiscription__caption {
    margin-bottom: 17px;
  }

  .cl-dynamicArea {
    margin-top: 17px;
  }

  .cl-backIcon {
    right: 10px;
    top: 10px;
  }

  .cl-backText {
    margin-top: 10px;
  }
}

@media(orientation: landscape) and (max-width: 800px) {
  .cl-contents {
    margin-top: 84.33vw;
  }
}

#bgVideo {
  object-fit: cover;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}