@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New&display=swap');
:root {
  --header-height: 70px;
}

html {
  -webkit-text-size-adjust: none;
  scroll-behavior: smooth;
}

html body {
  background-color: #000;
}

body {
  opacity: 0;
  transition: opacity 1s;
  font-family: "Zen Kaku Gothic New", sans-serif !important;
}

body.-transition {
  opacity: 1;
}

img {
  max-width: 100%;
}

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

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

.cl-section {
  display: flex;
  align-items: center;
  position: relative;
  word-break: break-word;
}

.cl-section > .container {
  padding: 80px min(5%, 50px);
  max-width: 1220px;
}

.cl-heading02 {
  margin-bottom: 40px;
  text-align: center;
}

.cl-heading02__sub {
  display: block;
  margin-top: 6px;
  font-size: 1.4rem;
  font-weight: 400;
  color: #45433E;
}

.cl-button01 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 300px;
  min-height: 56px;
  color: #3D3129;
  background: url(/sw/onlinestore/mypage/club_lounge/assets/images/ico_arrow.svg) no-repeat right 15px top 50%,
    linear-gradient(135deg, rgba(228,219,202,1) 0%, rgba(233,227,213,1) 50%, rgba(212,202,178,1) 100%);
  transition: opacity 0.5s;
}

@media (hover: hover) {
  .cl-button01:hover {
    opacity: 0.7;
  }
}

@media (max-width: 800px) {
  .pcOnly {
    display: none;
  }

  .cl-section > .container {
    padding-block: 55px;
    zoom: normal;
    transform-origin: 50% 0;
    padding: 70px 5.3333%;
  }

  .cl-heading02 {
    margin-bottom: 30px;
  }

  .cl-heading02__sub {
    margin-top: 12px;
  }

  .cl-button01 {
    min-height: 44px;
    background-position: right 10px top 50%, 0 0;
  }
}

.cl-anchorNav {
  position: fixed;
  align-items: center;
  top: 70px;
  z-index: 10;
  width: 100%;
  min-height: 50px;
  background: #fff;
  animation: fadeIn 0.3s forwards;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1);
}

.cl-anchorNav:not(.section__specialoffer, .section__movie, .section__questionary) {
  animation: fadeOut 0.3s forwards;
}

.cl-anchorNav .container {
  position: relative;
  max-width: 1366px;
}

.cl-anchorNav__floor {
  position: relative;
  top: 0;
  left: 0;
  width: 37px;
}
.cl-anchorNav__floor > span:nth-child(1),
.cl-anchorNav__floor > span:nth-child(2),
.cl-anchorNav__floor > span:nth-child(3) {
  display: block;
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 37px;
  height: 37px;
  background: url(/sw/onlinestore/mypage/club_lounge/assets/images/img_anc_nav.png) repeat 0 0/100% auto;
}

.cl-anchorNav__floor > span:nth-child(2) {
  z-index: 2;
  top: 7px;
}

.cl-anchorNav__floor > span:nth-child(3) {
  z-index: 1;
  top: 14px;
}

.cl-anchorNav__floor > span:nth-child(4) {
  content: "";
  display: block;
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 37px;
  background: url(/sw/onlinestore/mypage/club_lounge/assets/images/img_anc_nav_ac.png) repeat 0 0/100% auto;
  transition: top 0.3s ease-in-out;
}

.section__movie .cl-anchorNav__floor > span:nth-child(4) {
  z-index: 2;
  top: 7px;
}
.section__questionary .cl-anchorNav__floor > span:nth-child(4) {
  z-index: 1;
  top: 14px;
}

.cl-anchorNav__menu > ul {
  display: flex;
  height: 50px;
  margin-left: 37px;
}

.cl-anchorNav__menu > ul > li {
  width: 100%;
  height: 100%;
}

.cl-anchorNav__menu > ul > li > a {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  height: 100%;
  white-space: nowrap;
  text-indent: -1000px;
}

.cl-anchorNav__menu > ul > li > a::after {
  content: "";
  display: block;
  overflow: hidden;
  width: 100%;
  height: 20px;
  background-position: 50% 0, 50% 20px;
  background-repeat: no-repeat, no-repeat;
  background-size: auto 20px , auto 20px;
  transition: background-position 0.3s ease-in-out;
}

.cl-anchorNav__specialoffer > a::after {
  background-image: url('/sw/onlinestore/mypage/club_lounge/assets/images/txt_anc_nav_specialoffer1.png'), url('/sw/onlinestore/mypage/club_lounge/assets/images/txt_anc_nav_specialoffer_ac1.png');
}

.cl-anchorNav__movie > a::after {
  background-image: url('/sw/onlinestore/mypage/club_lounge/assets/images/txt_anc_nav_movie1.png'), url('/sw/onlinestore/mypage/club_lounge/assets/images/txt_anc_nav_movie_ac1.png');
}

.cl-anchorNav__questionary > a::after {
  background-image: url('/sw/onlinestore/mypage/club_lounge/assets/images/txt_anc_nav_questionary1.png'), url('/sw/onlinestore/mypage/club_lounge/assets/images/txt_anc_nav_questionary_ac1.png');
}

.section__specialoffer .cl-anchorNav__specialoffer > a::after,
.section__movie .cl-anchorNav__movie > a::after,
.section__questionary .cl-anchorNav__questionary > a::after {
  background-position: 50% -20px, 50% 0;
}

@media (max-width: 800px) {
  .cl-anchorNav .container {
    padding-inline: min(4%, 60px);
  }

  .cl-anchorNav {
    top: 50px;
  }

  .cl-anchorNav__menu .cl-anchorNav__specialoffer {
    width: 36%;
  }
  .cl-anchorNav__menu .cl-anchorNav__movie {
    width: 36%;
  }
  .cl-anchorNav__menu .cl-anchorNav__questionary {
    width: 28%;
  }
  .cl-anchorNav__menu > ul > li > a {
    background-size: auto 14px;
  }
  .cl-anchorNav__menu > ul > li > a::after {
    height: 13px;
    background-position: 50% 0, 50% 13px;
    background-repeat: no-repeat, no-repeat;
    background-size: auto 13px, auto 13px;
  }

  .section__specialoffer .cl-anchorNav__specialoffer > a::after,
  .section__movie .cl-anchorNav__movie > a::after,
  .section__questionary .cl-anchorNav__questionary > a::after {
    background-position: 50% -15px, 50% 0;
  }

  .cl-anchorNav__floor > span,
  .cl-anchorNav__floor::before,
  .cl-anchorNav__floor::after {
    left: min(4%, 60px);
  }

  .cl-anchorNav__menu > ul > li > a {
    font-size: 1.2rem;
  }
}

.cl-section__keyvisual {
  display: flex;
  align-items: flex-end;
  color: #45433E;
  background: #fff url('/sw/onlinestore/mypage/club_lounge/assets/images/bg_keyvisual_pc.jpg') 50% 0 no-repeat;
  background-size: 100% auto;
  padding-top: 14.4%;
  padding-bottom: 66px;
  position: relative;
}

.cl-section__keyvisual .container {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  padding: 70px min(4%, 60px);
}

.cl-user {
  margin-top: 50px;
  font-size: 1.7rem;
  font-weight: 500;
}

.cl-user__name {
  font-size: 1.7rem;
  font-weight: 700;
}

.cl-user__name .sm {
  font-size: 1.4rem;
}

.cl-pageDescription {
  margin-block: 22px 0;
  font-size: 1.4rem;
}

.cl-scrollBtn {
  position: absolute;
  left: 50%;
  bottom: 70px;
  transform: translateX(-50%);
}

.cl-scrollBtn img {
  width: 60px;
  height: 38px;
  animation: fluffy 2s;
  animation-delay: 5s;
  animation-iteration-count: 2;
}


@keyframes fluffy {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(10px);
  }
}

@media (max-width: 800px) {
  .cl-section__keyvisual {
    background-image: url(/sw/onlinestore/mypage/club_lounge/assets/images/bg_keyvisual_sp.jpg);
    background-position: 50% 0;
    padding-bottom: 30px;
    padding-top: 29.17vw;
  }

  .cl-section__keyvisual .container {
    padding: 16.67vw 5.3333% 60px;
  }

  .cl-user {
    margin-top: 20px;
    font-size: 1.4rem;
  }

  .cl-pageDescription {
    font-size: 1.4rem;
  }

  .cl-scrollBtn {
    bottom: 70px;
  }
}

.cl-section__menu {
  background: url(/sw/onlinestore/mypage/club_lounge/assets/images/bg_menu_pc.png) 50% 0 no-repeat;
  background-size: cover;
  scroll-margin-top: 80px;
}

.cl-menuList > ul {
  display: grid;
  grid-template-columns: repeat(3, 340px);
  justify-content: center;
  gap: 40px;
}

.cl-menuList > ul > li {
  width: 100%;
}

.cl-menuList > ul > li > a {
  display: block;
  position: relative;
  width: 100%;
  transition: opacity 0.5s;
}

.cl-menuList > ul > li > a::before {
  content: '';
  display: inline-block;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  position: absolute;
  right: 20px;
  top: 50%;
  background: url('/sw/onlinestore/mypage/club_lounge/assets/images/ico_arrow_01.png') top center / contain no-repeat;
  width: 15px;
  height: 11px;
}

.cl-menuList__image {
  display: none;
}

.cl-menuList__titleWrap {
  width: 100%;
  max-width: 353px;
  padding: 47px 21px 35px;
  background: url('/sw/onlinestore/mypage/club_lounge/assets/images/bg_menu_item_pc.png') top center / 100% 100% no-repeat;
  box-shadow: 2px 4px 6px 0 rgba(231, 229, 221, 0.8);
}

.cl-menuList__subTitle {
  margin-top: 8px;
  font-size: 1.4rem;
  color: #45433E;
}

@media (hover: hover) {
  .cl-menuList > ul > li > a:hover {
    opacity: 0.7;
  }
}

@media (min-width: 801px) and (max-width: 1100px) {
  .cl-menuList > ul {
    grid-template-columns: repeat(3, 230px);
    gap: 10px;
  }

  .cl-menuList__titleWrap {
    padding: 20px;
  }

  .cl-menuList > ul > li > a::before {
    padding: 6px;
  }
}

@media (max-width: 800px) {
  .cl-section__menu {
    background-image: url(/sw/onlinestore/mypage/club_lounge/assets/images/bg_menu_sp.png);
    scroll-margin-top: 50px;
  }

  .cl-menuList > ul {
    display: block;
  }

  .cl-menuList > ul > li {
    width: auto;
  }

  .cl-menuList > ul > li:nth-child(n+2) {
    margin-top: 25px;
  }

  .cl-menuList__titleWrap {
    padding: 47px 22px 34px;
    background: url('/sw/onlinestore/mypage/club_lounge/assets/images/bg_menu_item_sp.png') top center / 100% 100% no-repeat;
    max-width: 100%;
  }

  .cl-menuList > ul > li:nth-child(2n) .cl-menuList__titleWrap {
    left: auto;
    right: 0;
  }

  .cl-menuList__subTitle {
    margin-top: 12px;
    font-size: 1.4rem;
  }
}

.cl-section__specialoffer {
  background: url('/sw/onlinestore/mypage/club_lounge/assets/images/bg_specialoffer_pc.png') 50% 0 no-repeat;
  background-size: cover;
  scroll-margin-top: 120px;
}

.cl-offerList01 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: center;
  gap: 40px;
}

.cl-offerList02 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 248px));
  gap: 36px;
  margin-top: 40px;
}

.cl-offerCard01,
.cl-offerCard04 {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  position: relative;
  width: 100%;
  padding: 28px 30px;
}

.cl-offerList01 > div {
  background: url('/sw/onlinestore/mypage/club_lounge/assets/images/bg_specialoffer_01.png') no-repeat left top;
  background-size: 100% 100%;
}

.cl-offerCard01.is-center {
  align-items: center;
}

.cl-offerList01 > div::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: url('/sw/onlinestore/mypage/club_lounge/assets/images/bg_specialoffer_03.png') no-repeat 10px 10px / 10px auto, url('/sw/onlinestore/mypage/club_lounge/assets/images/bg_specialoffer_04.png') no-repeat right 10px top 10px / 10px auto, url('/sw/onlinestore/mypage/club_lounge/assets/images/bg_specialoffer_05.png') no-repeat left 10px bottom 10px / 10px auto, url('/sw/onlinestore/mypage/club_lounge/assets/images/bg_specialoffer_06.png') no-repeat right 10px bottom 10px / 10px auto;
}

.cl-offerCard04 {
  padding: 0;
  background: url('/sw/onlinestore/mypage/club_lounge/assets/images/bg_specialoffer_02.png') no-repeat center top/ auto 100%;
  aspect-ratio: 1;
}

.cl-offerCard04 > a,
.cl-offerCard04 > button,
.cl-offerCard04 .cl-modalBtn {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 25px;
  color: #fff;
  flex-direction: column;
  cursor: pointer;
}

.cl-offerCard02 {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  position: relative;
  width: 100%;
  padding: 28px 30px;
}

.cl-offerCard01__inner,
.cl-offerCard02__inner {
  position: relative;
  z-index: 2;
  height: 100%;
}
.cl-offerCard01.is-center .cl-offerCard01__inner {
  display:flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.cl-offerCard__icons {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin-bottom: 15px;
}

.cl-offerCard__image {
  margin: 10px auto;
  max-width: 230px;
}

.cl-offerCard01.is-center .cl-offerCard__icons {
  margin-top:auto;
}

.cl-offerCard__icons li {
  display: flex;
  align-items: flex-start;
}

.cl-offerCard01__new {
  display: block;
  padding: 0.25rem 0.452rem 0.35rem;
  font-size: 1rem;
  color: #FFF;
  background-color: #45433E;
  line-height: 1;
  min-width: 32px;
}

.cl-modalBox__body .cl-offerCard01__new {
  color: #fff;
  background-color: #45433E;
}

.cl-offerCard01__icon {
  display: block;
  padding: 0.2rem 0.3rem;
  font-size: 1rem;
  color: #45433E;
  background-color: #fff;
  border: 1px solid #707070;
  line-height: 1;
}

.cl-modalBox__body .cl-offerCard01__icon {
  background-color: transparent;
  border: 1px solid #45433E;
  color: #45433E;
}

.cl-offerCard01__unread {
  color: #45433E;
  padding-left: 15px;
  position: relative;
  min-width: 41px;
  display: inline-block;
  font-size: 1rem;
  line-height: 1.6;
}

.cl-offerCard01__unread::before {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #C80421;
  position: absolute;
  left: 0;
  top: 2px;
  border: 1px solid #D3D2CF;
}

.cl-offerCard__text {
  font-size: 1.4rem;
  color: #45433E;
  word-break: break-word;
}

.cl-offerList02 .cl-offerCard__text {
  -webkit-line-clamp: 3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cl-offerCard01.is-center .cl-offerCard__text {
  margin-bottom:auto;
}

.cl-offerCard__button {
  text-align: center;
  z-index: 10;
}

.cl-offerCard01 .cl-button01,
.cl-offerCard02 .cl-button01 {
  max-width: 240px;
  min-height: 46px;
}

.cl-offerCard03 img,
.cl-offerCard__image > img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
}

.cl-offerList01 .cl-button01 {
  background: #45433E url('/sw/onlinestore/mypage/club_lounge/assets/images/ico_zoom.png') no-repeat right 15px top 50%;
  color: #fff;
  padding: 5px 30px;
}

@media (min-width: 801px) {
  .cl-offerCard01__inner,
  .cl-offerCard02__inner {
    padding-bottom: 56px;
  }

  .cl-offerCard__button {
    position: absolute;
    max-width: 240px;
    min-height: 46px;
    width: 100%;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  .cl-offerList02 > div:nth-child(n+5) {
    margin-top: 4px;
  }
}

@media (max-width: 1220px) and (min-width: 801px) {
  .cl-offerCard__icons {
    flex-wrap: wrap;
  }

  .cl-offerCard01 .cl-button01,
  .cl-offerCard02 .cl-button01 {
    padding: 5px 20px;
  }

  .cl-offerList02 {
    display: flex;
    flex-wrap: wrap;
    gap: 4%;
  }

  .cl-offerList02 > div {
    width: 22%;
  }

  .cl-offerList02 > div:nth-child(n+5) {
    margin-top: 4%;
  }

  .cl-offerCard04 > a,
  .cl-offerCard04 > button,
  .cl-offerCard04 .cl-modalBtn {
    padding: 20px;
  }
}

@media (max-width: 800px) {
  .cl-section__specialoffer {
    background-image: url('/sw/onlinestore/mypage/club_lounge/assets/images/bg_specialoffer_sp.png');
    scroll-margin-top: 100px;
  }

  .cl-offerList01 {
    display: block;
  }

  .cl-offerList02 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 30px;
  }

  .cl-offerList01 > *:nth-child(n+2) {
    margin-top: 30px;
  }

  .cl-offerCard01 {
    padding: 30px 20px;
    aspect-ratio: auto;
  }

  .cl-offerCard01 .cl-offerCard01__unread::before,
  .cl-offerCard02 .cl-offerCard01__unread::before,
  .cl-offerCard04 .cl-offerCard01__unread::before {
    animation: ripple 3s linear infinite;
  }

  @keyframes ripple {
    0% {
      scale: 1;
    }
    50% {
      opacity: 1;
    }
    100% {
      scale: 1.5;
      opacity: 0;
    }
  }

  .cl-offerCard04 {
    padding: 0;
  }

  .cl-offerCard04 > a,
  .cl-offerCard04 > button,
  .cl-offerCard04 .cl-modalBtn {
    padding: 10px;
  }

  .cl-offerCard02 {
    padding: 32px 20px;
  }

  .cl-offerCard__icons {
    gap: 5px;
    margin-bottom: 10px;
  }

  .cl-offerList02 .cl-offerCard__icons {
    flex-wrap: wrap;
  }

  .cl-offerCard__icons > li > img {
    height: 20px;
  }

  .cl-offerCard__text {
    font-size: 1.4rem;
  }

  .cl-offerCard__button {
    margin-top: 20px;
  }

  .cl-offerCard01 .cl-offerCard__icons {
    justify-content: flex-start;
  }

  .cl-offerCard01 .cl-offerCard__icons,
  .cl-offerCard01 .cl-offerCard__text {
    margin-inline: 0;
  }

  .cl-offerCard01 .cl-button01,
  .cl-offerCard02 .cl-button01 {
    font-size: 1.2rem;
  }

  .cl-offerCard__image {
    margin: 7px auto;
    max-width: 100%;
  }
}

.cl-section__movie {
  background: url('/sw/onlinestore/mypage/club_lounge/assets/images/bg_movie_pc.png') 50% 0 no-repeat;
  background-size: cover;
  scroll-margin-top: 120px;
}

.cl-section__movie .cl-heading02__sub {
  color: #45433E;
}

.needsclick {
  height: calc((100dvh - var(--header-height) - (390px * var(--zoom)))/ var(--zoom)) !important;
  width: auto !important;
  aspect-ratio: 397 / 700;
  margin-inline: auto;
}

@media (max-width: 800px) {
  .cl-section__movie {
    background-image: url('/sw/onlinestore/mypage/club_lounge/assets/images/bg_movie_sp.png');
    scroll-margin-top: 100px;
  }

  .needsclick, .fwn-o41tep {
    height: calc((100dvh - var(--header-height) - (315px * var(--zoom-sp)))/ var(--zoom-sp)) !important;
    width: auto !important;
    aspect-ratio: 397 / 700;
    margin-inline: auto;
  }
}

.cl-section__questionary {
  background: url('/sw/onlinestore/mypage/club_lounge/assets/images/bg_survey_pc.png') 50% 50% no-repeat;
  background-size: cover;
  scroll-margin-top: 120px;
}

.cl-section__questionary > .container {
  position: relative;
  max-width: 520px;
  padding: 70px 0 40px;
  margin: 80px auto;
  border: 2px solid #A18B4E;
  background-color: #fff;
}

.cl-section__questionary .cl-heading02 {
  position: relative;
  z-index: 2;
  margin: 0 auto 40px;
  max-width: 400px;
}

.cl-section__questionary .cl-heading02 .cl-heading02__sub {
  margin-top: 16px;
}

.cl-section__questionary .cl-questionaryWrap {
  position: relative;
  z-index: 2;
  max-width: 400px;
  margin: 0 auto;
}

.cl-questionaryWrap__02 {
  margin-top: 40px;
  padding-top: 40px;
  position: relative;
}

.cl-questionaryWrap__02::before {
  content: '';
  width: max(30%, 400px);
  height: 1px;
  background-color: #A18B4E;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

.cl-questionaryText {
  font-size: 1.4rem;
  color: #45433E;
}

.cl-questionaryText > p + p {
  margin-top: 40px;
}

.cl-questionaryBtn {
  margin-top: 20px;
  text-align: center;
}

.cl-questionaryBtn .cl-button01 {
  background: #45433E;
  color: #fff;
  max-width: 240px;
  min-height: 46px;
}

.cl-section__questionary > .container::before {
  content: '';
  width: 510px;
  height: calc(100% - 6px);
  display: block;
  position: absolute;
  left: 50%;
  top: 3px;
  transform: translateX(-50%);
  z-index: 2;
  border: 1px solid #A18B4E;
}

.cl-section__questionary > .container::after {
  content: '';
  width: 520px;
  height: calc(100% + 28px);
  display: block;
  position: absolute;
  left: 50%;
  top: -14px;
  transform: translateX(-50%);
  background: url('/sw/onlinestore/mypage/club_lounge/assets/images/bg_survey_01_pc.png') top 0 center/79px 14px no-repeat,url('/sw/onlinestore/mypage/club_lounge/assets/images/bg_survey_02_pc.png') bottom 0 center/79px 14px no-repeat;
  z-index: 1;
}

@media (max-width: 800px) {
  .cl-section__questionary {
    background-image: url('/sw/onlinestore/mypage/club_lounge/assets/images/bg_survey_sp.png');
    scroll-margin-top: 100px;
  }

  .cl-section__questionary .container {
    max-width: calc(320 / 360 * 100%);
    padding: 40px 0;
    margin: 70px auto;
  }

  .cl-section__survey-content {
    padding: 30px;
  }

  .cl-section__questionary .cl-heading02__sub {
    color: #45433E;
  }

  .cl-questionaryText {
    font-size: 1.4rem;
    line-height: 1.5;
  }

  .cl-questionaryWrap {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .cl-questionaryWrap__01 .cl-questionaryText {
    color: #3D3129;
  }

  .cl-questionaryWrap__02::before {
    width: max(109.62%, 250px);
  }

  .cl-section__questionary > .container::before {
    width: calc(100% - 6px);
  }

  .cl-section__questionary .cl-heading02 {
    margin: 0 auto 30px;
    max-width: 81.25%;
  }

  .cl-section__questionary .cl-questionaryWrap {
    max-width: 80.84%;
  }

  .cl-questionaryBtn {
    margin-top: 16px;
  }
}

.footer {
  scroll-snap-align: end;
}

.cl-movieWrap {
  margin-inline:auto;
  max-width:466px;
  width:100%;
}
.cl-movieWrap > iframe {
  width:100%;
  height:auto;
  aspect-ratio:16/9;
}

/* modal
-------------------------------------------------------------------- */
.cl-modalBox {
  visibility: hidden;
  position: fixed;
  left: 50%;
  top: 50%;
  transition: opacity .5s;
  z-index: 10000;
  word-break: break-word;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  max-width: 800px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
}

.cl-modalBox__content {
  position: relative;
  width: 100%;
  padding: 70px;
  background-color: #fff;
  color: #45433E;
  overflow-y: auto;
  max-height: 90vh;
  align-self: center;
}

.cl-modalBox__close {
  position: absolute;
  right: 20px;
  top: 20px;
  width: 30px;
  height: 30px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  transform: rotate(45deg);
}

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

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

#cl-modalOverlay {
  visibility: hidden;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.8);
  transition: opacity .5s;
  z-index: 9999;
}

.-modal-show body {
  overflow: hidden;
}

.-modal-show .cl-modalBox:not([inert]),
.-modal-show #cl-modalOverlay {
  opacity: 1;
}

.-modal-active .cl-modalBox:not([inert]),
.-modal-active #cl-modalOverlay {
  visibility: visible;
}

.cl-section__anc {
  position: absolute;
  top: -160px;
}

@media(max-width: 800px) {
  .cl-modalBox {
    max-width: 95vw;
  }

  .cl-modalBox__content {
    width: 100%;
    padding: 20px;
  }

  .cl-modalBox__close {
    right: 10px;
    top: 10px;
    width: 28px;
    height: 28px;
  }

  .cl-modalBox__content .cl-offerCard__icons {
    padding-right: 20px;
  }
}

.cl-offerDetail {
  display: grid;
  grid-template-columns: calc(390 / 1116 * 100%) 1fr;
  grid-template-rows: auto auto auto auto auto 1fr;
  grid-column-gap: 40px;
  grid-auto-flow: dense;
}

.cl-offerDetail__image img {
  object-fit: cover;
  aspect-ratio: 1 / 1;
}

.cl-offerCard__icons { grid-area: 1 / 2 / 1 / 3; }
.cl-offerDetail__title { grid-area: 2 / 2 / 2 / 3; }
.cl-offerDetail__image { grid-area: 1 / 1 / 7 / 2; }
.cl-offerDetail__expiration { grid-area: 3 / 2 / 3 / 3; }
.cl-offerDetail__description { grid-area: 4 / 2 / 4 / 3; }
.cl-offerDetail__link { grid-area: 5 / 2 / 5 / 3; }
.cl-offerDetail__button { grid-area: 6 / 2 / 6 / 3; }

.cl-offerDetail .cl-offerCard__icons {
  justify-content: flex-start;
}

.cl-offerDetail__title {
  font-size: 1.4rem;
  color: #45433E;
}

.cl-offerDetail__expiration {
  margin-top: 10px;
  font-size: 1.4rem;
}

.cl-offerDetail__expiration dd {
  margin-top: 0;
}

.cl-offerDetail__expiration dd + dd {
  margin-top: 10px;
  font-size: 1.2rem;
}

.cl-offerDetail__description {
  margin-top: 20px;
  font-size: 1.2rem;
}

.cl-offerDetail__link {
  margin-top: 10px;
  font-size: 1rem;
}

.cl-offerDetail__link a{
  color: #45433E;
  text-decoration: underline;
  word-break: break-word;
}

.cl-offerDetail__button {
  margin-top: 20px;
}

.cl-offerDetail__button .cl-button01 {
  max-width: 240px;
  margin-left: 0;
  padding: 10px 30px;
  background: #45433E;
  color: #fff;
  word-break: break-word;
}

.cl-modalBox__body .cl-offerCard01__unread {
  color: #45433E;
}

@media (max-width: 800px) {
  .cl-offerDetail {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, auto);
    grid-column-gap: 12px;
  }

  .cl-offerCard__icons { grid-area: 1 / 1 / 2 / 3; }
  .cl-offerDetail__title { grid-area: 2 / 1 / 3 / 3; }
  .cl-offerDetail__image { grid-area: 3 / 1 / 4 / 2; }
  .cl-offerDetail__expiration { grid-area: 3 / 2 / 4 / 3; }
  .cl-offerDetail__description { grid-area: 4 / 1 / 5 / 3; }
  .cl-offerDetail__link { grid-area: 5 / 1 / 6 / 3; }
  .cl-offerDetail__button { grid-area: 6 / 1 / 6 / 3; }

  .cl-offerDetail:not(:has(> .cl-offerDetail__image)) .cl-offerDetail__expiration {
    grid-area: 3 / 1 / 4 / 3;
  }

  .cl-offerDetail__title {
    margin-bottom: 10px;
    font-size: 1.4rem;
  }

  .cl-offerDetail__expiration {
    margin-top: 0;
  }

  .cl-offerDetail__expiration dd {
    margin-top: 0;
  }

  .cl-offerDetail__expiration dd + dd {
    margin-top: 10px;
    font-size: 1.2rem;
  }

  .cl-offerDetail__description {
    margin-top: 30px;
    font-size: 1.2rem;
  }

  .cl-offerDetail__link {
    margin-top: 10px;
    font-size: 1rem;
  }

  .cl-offerDetail__button {
    margin-top: 30px;
    text-align: center;
  }

  .cl-offerDetail__button .cl-button01 {
    max-width: 240px;
    min-height: 46px;
  }
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; display: none; }
}


.cl-textArea {
  max-width: 580px;
  margin: 0 auto;
}

.cl-textArea .cl-questionaryText > p + p {
  margin-top: 20px;
}

.cl-textArea h1 img,
.cl-heading02 img,
.cl-menuList__title img {
  zoom: 0.5;
}
@media (max-width: 800px) {
  .cl-textArea h1 img {
    zoom: 0.45;
  }

  .cl-textArea .cl-questionaryText > p:last-child {
    margin-bottom: 60px;
  }
}

@media(min-width: 801px) {
  .cl-offerDetail:not(:has(> .cl-offerDetail__image)) {
    grid-template-columns: max-content;
  }
}