html {
  scroll-behavior: smooth;
}

#lsf {
  background: #fef4f6;
}

#lsf .lsf-btn {
  width:32rem;
  aspect-ratio: 540/150;
  background:#e76baa;
  border-radius: 2.2rem;
  display:flex;
  justify-content: center;
  align-items: center;
  box-shadow:.4rem .4rem 0 #94536f, inset 0 0 1.2rem rgba(255,255,255,0.6);
  box-sizing: border-box;
  cursor:pointer;
}

#lsf .lsf-btn img {
  width:100%;
  height:100%;
  object-fit: contain;
}

#lsf .main {
  width:100%;
  min-width: 170rem;
  position: relative;
  z-index:1;
}

#lsf .notify-tips {
  z-index:14;
}

#lsf #lsf-nav {
  position:fixed;
  width:8rem;
  height:8rem;
  background:rgba(255, 169, 211, 0.9);
  box-shadow:inset 0 0 1.5rem rgba(255,255,255,0.6);
  border-radius:1.5rem;
  top:3rem;
  right:3rem;
  box-sizing: border-box;
  padding:1rem;
  cursor:pointer;
  z-index:10;
  overflow: hidden;
  transition:width .3s ease, height .3s ease;
}

#lsf #lsf-nav:before {
  content:'';
  position:absolute;
  left:.5rem;
  right:.5rem;
  top:.5rem;
  bottom:.5rem;
  margin:auto;
  box-sizing: border-box;
  border:.4rem dotted #fff;
  border-radius:1rem;
  background:url(../images/lsf/navi_btn_menu.png) no-repeat center/100%;
  transform:translateY(0%);
  transition:opacity .3s ease, visibility .3s ease, transform .3s ease;
}

#lsf #lsf-nav.active {
  width:28rem;
  height:28rem;
}

#lsf #lsf-nav.active:before {
  transform:translateX(-100%);
  opacity:0;
  visibility:hidden;
}

#lsf #lsf-nav.active > div {
  display: flex;
  position:absolute;
  flex-direction: column;
  left:.5rem;
  right:.5rem;
  top:.5rem;
  bottom:.5rem;
  margin:auto;
  box-sizing: border-box;
  padding:1rem;
  border-radius:1rem;
  border:.4rem dotted #fff;
}

#lsf #lsf-nav > div a {
  position:relative;
  width:100%;
  aspect-ratio: 10 / 2.5;
  border-radius:1rem;
  background-size:100%;
  background-repeat:no-repeat;
  background-position: center;
}

#lsf #lsf-nav > div a:before {
  content:'';
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  margin:auto;
  border-radius:1rem;
  background-color:#ec71b0;
  box-shadow:inset 0 0 2rem #E164A3;
  opacity:0;
  transition:opacity .3s ease;
  z-index:-1;
}

#lsf #lsf-nav > div a:hover:before {
  opacity:1;
}

#lsf #lsf-nav > div a.nav-top {
  background-image:url(../images/lsf/navi_top.png);
}
#lsf #lsf-nav > div a.nav-top:hover {
  background-image:url(../images/lsf/navi_top_over.png);
}
#lsf #lsf-nav > div a.nav-lottery {
  background-image:url(../images/lsf/navi_lottery.png);
}
#lsf #lsf-nav > div a.nav-lottery:hover {
  background-image:url(../images/lsf/navi_lottery_over.png);
}
#lsf #lsf-nav > div a.nav-vote {
  background-image:url(../images/lsf/navi_vote.png);
}
#lsf #lsf-nav > div a.nav-vote:hover {
  background-image:url(../images/lsf/navi_vote_over.png);
}
#lsf #lsf-nav > div a.nav-games {
  background-image:url(../images/lsf/navi_games.png);
}
#lsf #lsf-nav > div a.nav-games:hover {
  background-image:url(../images/lsf/navi_games_over.png);
}

@keyframes lsf-bg {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 12rem 0;
  }
}

#lsf .bg {
  position:fixed;
  top:0;
  right:0;
  width:100%;
  height:100%;
  z-index:-1;
  overflow: hidden;
}

#lsf .bg:before {
  content:'';
  position:absolute;
  top:-40%;
  left:-40%;
  right:-40%;
  bottom:-40%;
  background:url(../images/lsf/background.png) repeat;
  z-index:-1;
  transform: rotate(30deg);
  animation: lsf-bg 3s linear infinite;
}

#lsf .header {
  width:100%;
  height:100vh;
  max-height:150rem;
  min-height:90rem;
  margin:auto;
  position:relative;
}

#lsf .header .kv-bg,
#lsf .header .content-bg {
  position:fixed;
  top:0;
  width:100%;
  height:100%;
  max-height:150rem;
  min-height:90rem;
  opacity:0;
}

#lsf .header .kv-bg {
  background:url(../images/lsf/pic_kv1.png) no-repeat center/auto 100%, url(../images/lsf/pic_kv1_botm.png) no-repeat center/auto 100%;
  opacity:0;
}
#lsf .header .content-bg {
  max-width:170rem;
  height:90%;
  max-height:120rem;
  left:0;
  right:0;
  top:0;
  bottom:0;
  margin:auto;
  background:url(../images/lsf/pic_kv2.png) no-repeat;
  background-position: calc(100% - 10rem) center;
  background-size:auto 100%;
  z-index:-1;
}

#lsf .header .banner {
  height:32%;
  position: absolute;
  left:0;
  right:0;
  bottom:23%;
  margin:auto;
}

#lsf .header .slogan {
  height:9%;
  max-width: 100%;
  position:absolute;
  left:0;
  right:0;
  bottom:13.5%;
  margin:auto;
  object-fit: contain;
}

#lsf .header .steam-btn {
  position:absolute;
  height:unset;
  left:0;
  right:0;
  bottom:3.5%;
  margin:auto;
  width:unset;
  height:8%;
}

#lsf .game-area {
  box-sizing: border-box;
  padding:0 3%;
  margin:16rem auto 8rem auto;
  width:170rem;
  min-width:170rem;
  max-width:100%;
}

#lsf .game {
  position:relative;
  display: flex;
  height:99rem;
  background:rgba(255, 169, 212, .9);
  box-shadow:inset 0 0 2.5rem rgba(255,255,255,.8);
  border-radius:3rem;
  font-weight:500;
}

#lsf .game .head {
  position:absolute;
  left:1.5%;
  top:0;
  width:46%;
  transform: translateY(-25%);
  object-fit: contain;
}

#lsf .game .head img {
  width:100%;
  height:100%;
  object-fit: contain;
}

#lsf .game .head .desc {
  color:#fff;
  font-size:2.4rem;
  background:#d82770;
  border-radius:3rem;
  width:18%;
  aspect-ratio: 10 / 3;
  display:flex;
  justify-content: center;
  align-items: center;
  right:0;
  bottom:3%;
  position:absolute;
  cursor: pointer;
}

#lsf .game .body {
  display: flex;
  justify-content: center;
  align-items: center;
  width:95%;
  margin:auto;
  height:92%;
}

#lsf .game .body .secl {
  width:53%;
  height:100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#lsf .game .test-title {
  width:100%;
  height:6%;
  margin-top:20%;
  padding:.5rem 0;
  object-fit: contain;
  background:linear-gradient(90deg, rgba(237, 102, 171, 0) 5%, rgb(237, 102, 171) 30%, rgb(237, 102, 171) 70%, rgba(237, 102, 171, 0) 95%);
}

#lsf .game .challenge-wrap {
  width:90%;
  display: flex;
  margin-top:6%;
}

#lsf .game .challenge-wrap .charal,
#lsf .game .challenge-wrap .charar {
  position:relative;
  top:0;
  width:50%;
  aspect-ratio: 600 / 800;
  background-repeat:no-repeat;
  background-size:300%;
  background-position:100% 0;
}

#lsf .game .challenge-wrap .charal {
  left:1%;
  transform: rotate(8deg);
  background-image:url(../images/lsf/xdtz/anime-1.png);
}

#lsf .game .challenge-wrap .charar {
  right:1%;
  transform: rotate(-8deg);
  background-image:url(../images/lsf/xdtz/anime-2.png);
}

#lsf .game .secl .start-challenge {
  position:relative;
  width:48%;
  margin-top:-4rem;
}

#lsf .game .secl .challenge-chance {
  color:#fff;
  font-size:3.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height:1;
  margin-top:2rem;
  flex:1;
}

#lsf .game .secl .challenge-chance .challenge-count {
  color:#d82770;
  font-size:5rem;
  margin:0 1.2rem;
}

#lsf .game .body .secr {
  height:100%;
  flex:1;
  margin-left:2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#lsf .game .body .secr > div {
  width:100%;
  border-radius:2.5rem;
  background:rgba(255,255,255,.7);
  position:relative;
  box-sizing: border-box;
  display: flex;
  padding:10% 5% 4% 5%;
}

#lsf .game .body .secr > div .subtitle {
  height:8rem;
  position:absolute;
  top:0;
  left:1rem;
  transform: translateY(-30%);
  z-index:2;
}

#lsf .game .body .secr .drop {
  height:45%;
}

#lsf .game .body .secr .drop .date {
  position:absolute;
  top:.8rem;
  left:26rem;
  font-size:2.6rem;
  color:#d82770;
}

#lsf .game .body .secr .drop .prize-list {
  width:100%;
  display: flex;
}

#lsf .game .body .secr .drop .main-prize {
  width:46%;
  height:100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#lsf .game .body .secr .drop .main-prize .sample {
  width:100%;
  aspect-ratio: 406 / 357;
  background:#ffffff;
  border-radius:2rem;
  object-fit: contain;
}

#lsf .game .body .secr .drop .main-prize .desc {
  display: flex;
  flex:1;
  justify-content: space-between;
  align-items: flex-end;
  width:90%;
  font-size:2rem;
}

#lsf .game .body .secr .drop .main-prize .desc .name {
  display: flex;
  align-items: center;
  line-height:1.3;
  flex:1;
}

#lsf .game .body .secr .drop .main-prize .desc .num {
  color:#d82770;
  margin-left:1rem;
}

#lsf .game .body .secr .drop .sub-prize {
  margin-left:5%;
  flex:1;
  display: flex;
  flex-direction: column;
}

#lsf .game .body .secr .drop .sub-prize .item {
  background:rgba(255,255,255,.9);
  border-radius:1.2rem;
  width:100%;
  height:31%;
  margin-bottom:5%;
  display: flex;
  box-sizing: border-box;
  padding:5%;
  justify-content: space-between;
  align-items: center;
}

#lsf .game .body .secr .drop .sub-prize .item .sample {
  width:32%;
  border-radius:.6rem;
  aspect-ratio: 285 / 240;
  object-fit: contain;
}

#lsf .game .body .secr .drop .sub-prize .item .desc {
  margin-left:5%;
  flex:1;
  font-size:2rem;
  line-height:1.2;
}

#lsf .game .body .secr .drop .sub-prize .item .desc .num {
  color:#d82770;
}

#lsf .game .body .secr .drop .sub-prize .btns {
  flex:1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-direction: column;
}

#lsf .game .body .secr .drop .sub-prize .btns #all-prize {
  height:5.5rem;
  width:auto;
  border-radius:1.2rem;
}

#lsf .game .body .secr .drop .sub-prize .btns .prev-result {
  font-size:2rem;
}

#lsf .game .body .secr .task {
  height:26%;
}

#lsf .game .body .secr .task .task-list {
  width:100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

#lsf .game .body .secr .task .task-list .item {
  background:rgba(255,255,255,.9);
  border-radius:30rem;
  width:100%;
  height:28%;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding:0 0 0 4%;
}

#lsf .game .body .secr .task .task-list .item .name {
  font-size:2.6rem;
  width:30%;
}

#lsf .game .body .secr .task .task-list .item .limit {
  color:#d82770;
  font-size:1.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex:1;
}

#lsf .game .body .secr .task .task-list .item .action {
  width:25%;
  height:100%;
  border-radius: 30rem;
  background:#d82770;
  color:#fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size:2rem;
  cursor: pointer;
  line-height:1;
}

#lsf .game .body .secr .task .task-list .item .action.disabled {
  opacity:.5;
}

#lsf .game .body .secr .bonus {
  height:21%;
  position:relative;
}

#lsf .game .body .secr .bonus .sample {
  height:95%;
  top:15%;
  object-fit: contain;
  position:absolute;
}

#lsf .game .body .secr .bonus .wrap {
  display: flex;
  width:100%;
  position:relative;
  justify-content: flex-end;
  height:100%;
}

#lsf .game .body .secr .bonus .wrap .info {
  width:40%;
  height:100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#lsf .game .body .secr .bonus .wrap .info .lsf-btn {
  height:5.5rem;
  width:auto;
  border-radius:1.2rem;
}

#lsf .game .body .secr .bonus .wrap .info .bonus-info {
  flex:1;
  font-size:2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

#lsf .game .body .secr .bonus .wrap .info #bonus-balance {
  margin:0 1rem;
  color:#d82770;
}

#lsf .main > .content {
  width:170rem;
  min-width:170rem;
  max-width:100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin:auto;
  min-height:200vh;
  position: relative;
  z-index:1;
  box-sizing: border-box;
  padding:0 3%;
}

#lsf .main > .content .vote-wrap {
  width:36%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding:0 0 5rem 0;
  height:100vh;
  min-height:100rem;
  align-self: flex-start;
}

#lsf .main > .content .vote-wrap .section {
  display: flex;
  flex-direction: column;
  align-items: center;
  position:relative;
}

#lsf .main > .content .vote-wrap .title {
  width:100%;
}

#lsf .main > .content .vote-wrap p {
  font-size:3.4rem;
  width:83%;
  line-height:1.6;
}

#lsf .main > .content .vote-wrap .vote-btn {
  margin-top:2rem;
}

#lsf .main > .content .vote-wrap .notice {
  font-size:2.6rem;
  margin-top:7rem;
}

#lsf .main > .content .works-wrap {
  width:100%;
  height:100rem;
  background:rgba(230, 123, 176, 0.85);
  box-shadow:inset 0 0 3rem rgba(255,255,255,.8);
  border-radius:3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  padding:5rem;
  margin-top:6rem;
}

#lsf .main > .content .works-wrap .title {
  height: 6rem;
}

#lsf .main > .content .works-wrap {
  height:auto;
}

#lsf .works-list {
  --slider-gap:5rem;
  width:100%;
  margin-top:4rem;
}

#lsf .slider-frame {
  width:100%;
  overflow:hidden;
  cursor:grab;
  touch-action:pan-y;
  user-select:none;
  -webkit-user-select:none;
}

#lsf .slider-frame.is-dragging {
  cursor:grabbing;
}

#lsf .slider-track {
  display:flex;
  align-items:flex-start;
  transform:translate3d(0, 0, 0);
  will-change:transform;
}

#lsf .slider-track.is-animating {
  transition:transform .3s ease-in-out;
}

#lsf .slider-page {
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:var(--slider-gap);
  width:100%;
  min-width:100%;
  flex:0 0 100%;
  box-sizing:border-box;
  padding-inline:calc(var(--slider-gap) / 2);
}

#lsf .slider-item {
  width:100%;
  aspect-ratio:460 / 215;
  display:block;
  overflow:hidden;
  background:rgba(255,255,255,.7);
  box-sizing:border-box;
}

#lsf a.slider-item {
  cursor:pointer;
}

#lsf .slider-image {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
}

#lsf .slider-nav {
  margin-top:3rem;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:3rem;
}

#lsf .slider-nav[hidden] {
  display:none;
}

#lsf .slider-prev,
#lsf .slider-next {
  position:relative;
  width:5rem;
  height:5rem;
  padding:0;
  border:0;
  border-radius:50%;
  background:#e76baa;
  box-shadow:.3rem .3rem 0 #94536f, inset 0 0 1rem rgba(255,255,255,.6);
}

#lsf .slider-prev:hover,
#lsf .slider-next:hover {
  border: .2rem solid #fbb4d3;
  background:#fff;
}

#lsf .slider-prev:after,
#lsf .slider-next:after {
  content:'';
  position:absolute;
  width: 0;
  height: 0;
  left:26%;
  top:36%;
  border-left: 1rem solid transparent;
  border-right: 1rem solid transparent;
  border-bottom: 1.6rem solid #fff;
  transform: rotate(-90deg);
}

#lsf .slider-next:after {
  left:34%;
  transform: rotate(90deg);
}

#lsf .slider-prev:hover:after,
#lsf .slider-next:hover:after {
  border-bottom-color: #e76baa;
}

#lsf .slider-prev:disabled,
#lsf .slider-next:disabled {
  cursor:default;
  opacity:.5;
  background:#e76baa;
}

#lsf .slider-prev:disabled:hover,
#lsf .slider-next:disabled:hover {
  cursor:default;
  border:none;
}

#lsf .slider-prev:disabled:hover:after,
#lsf .slider-next:disabled:hover:after {
  border-bottom-color: #fff;
}

#lsf .slider-dots {
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:.5rem;
}

#lsf .slider-dot {
  position:relative;
  width:6rem;
  min-width:6rem;
  height:6rem;
  padding:0;
  border:0;
  background:transparent;
}

#lsf .slider-dot:before {
  content:'';
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  margin:auto;
  width:30%;
  height:30%;
  border-radius:50%;
  background:rgba(255,255,255,.5);
  transition:background-color .3s ease, transform .3s ease;
}

#lsf .slider-dot:after {
  content:'';
  position:absolute;
  width:60%;
  height:60%;
  left:0;
  right:0;
  top:0;
  bottom:0;
  margin:auto;
  background:url(../images/lsf/btn_page_heart.png) no-repeat center/contain;
  transform:scale(1);
  opacity:0;
  transition:opacity .3s ease, transform .3s ease;
}

#lsf .slider-dot:hover:before,
#lsf .slider-dot.current:before {
  background:transparent;
}

#lsf .slider-dot:hover:after,
#lsf .slider-dot.current:after {
  opacity:1;
  transform:scale(1.5);
}

#lsf .content .partners-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top:10rem;
  background:rgba(255,255,255,.8);
  border-radius:3rem;
  box-sizing: border-box;
  padding:5rem;
}

#lsf .content .partners-wrap .title {
  height: 5.6rem;
  margin:0 auto 3rem auto;
}

#lsf .content .partners-wrap .partners-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap:5%;
}

#lsf .content .partners-wrap .partners-list .partner {
  margin-top:0rem;
  aspect-ratio: 460 / 215;
  max-width:16%;
}

#lsf .content .partners-wrap .partners-list .partner img {
  width:100%;
  height:100%;
  object-fit: contain;
}

#lsf .works-wrap.is-compact .slider-page {
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

#lsf .footer {
  margin-top:18rem;
  margin-bottom:8rem;
  display: grid;
  grid-template-columns: 45% minmax(0, 1fr);
  grid-template-areas:
      "left top"
      "left bottom";
  gap:2%;
  line-height: 1;
}

#lsf .footer .orgs {
  display: flex;
  grid-area: left;
  justify-content: space-between;
  width:100%;
  height:10rem;
  align-items: center;
}

#lsf .footer .orgs .org {
  display: flex;
  align-items: center;
  height:3rem;
}

#lsf .footer .orgs .org .text {
  font-size:2rem;
  color:#e366a6;
  margin-right:4rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

#lsf .footer .orgs .org .text:after {
  content:'';
  position:absolute;
  width:.2rem;
  height:2.5rem;
  right:-1.9rem;
  top:0;
  bottom:0;
  margin:auto;
  background:#e366a6
}

#lsf .footer .orgs .org .logo {
  height:8rem;
  margin-right:3rem;
}

#lsf .footer .orgs .org .logo img {
  width:100%;
  height:100%;
  object-fit: contain;
}

#lsf .footer .links {
  display: flex;
  align-items: center;
  grid-area: top;
  width:100%;
  font-weight:500;
  font-size:2.4rem;
}

#lsf .footer .links > a {
  margin-right:4rem;
  color:#e366a6;
  position: relative;
  display: flex;
  align-items: center;
}

#lsf .footer .links > a:last-child {
  margin-right:0;
}

#lsf .footer .links > a:after {
  content:'';
  position:absolute;
  width:.2rem;
  height:2.5rem;
  right:-2.1rem;
  top:0;
  bottom:0;
  margin:auto;
  background:#e366a6;
}

#lsf .footer .links > a:last-child:after {
  display:none;
}

#lsf .footer .links > a img {
  height:2.5rem;
  margin-left:.5rem;
}

#lsf .footer .copyright {
  grid-area: bottom;
  font-size:1.6rem;
  width:100%;
  display: flex;
  align-items: center;
  line-height: 1.3;
}

#lsf #prize-list-modal {
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  top:0;
  background:rgba(0,0,0,.7);
  z-index:11;
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
  opacity:0;
  transition:opacity .3s ease, visibility .3s ease;
}

#lsf #prize-list-modal .wrap {
  position:relative;
  width:60rem;
  aspect-ratio: 7 / 8.5;
  background:#fff;
  z-index:9;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding:2rem;
}

#lsf #prize-list-modal .modal-close {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  right:2rem;
  top:3rem;
  background: url(../images/lsf/close_btn.png) no-repeat center/contain;
  width:3rem;
  height:3rem;
  color: #999;
  cursor: pointer;
}

#lsf #prize-list-modal.active {
  opacity:1;
  visibility:visible;
}

#lsf #prize-list-modal .title {
  font-size:3.6rem;
  font-weight:500;
  margin-bottom:2rem;
}

#lsf #prize-list-modal .modal-content {
  flex:1;
  overflow:auto;
  box-sizing: border-box;
  padding-right:2rem;
}

#lsf #prize-list-modal .modal-content .subevent {
  margin-bottom:4rem;
}

#lsf #prize-list-modal .modal-content .subevent .name {
  font-size:2.6rem;
  font-weight:500;
}

#lsf #prize-list-modal .modal-content .subevent .prize {
  width:100%;
  display: flex;
  margin-top:1.5rem;
}

#lsf #prize-list-modal .modal-content .subevent .prize .sample {
  width:38%;
  aspect-ratio: 16 / 10;
  background:#dedede;
  object-fit: contain;
}

#lsf #prize-list-modal .modal-content .subevent .prize .desc {
  display: flex;
  flex-direction: column;
  font-size:2.2rem;
  flex:1;
  margin-left:1.5rem;
}

#lsf #prize-list-modal .modal-content .subevent .prize .desc .num {
  flex:1;
  margin-top:1rem;
  align-items: center;
}

#lsf #prize-list-modal .modal-content .subevent .prize .desc .result-btn {
  background:#d82770;
  height:4rem;
  color:#fff;
  width:11rem;
  font-size:2rem;
  font-weight:500;
  border-radius: 30rem;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: flex-end;
  cursor: pointer;
  line-height:1;
}

#lsf #event-desc-modal {
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  top:0;
  background:rgba(0,0,0,.7);
  z-index:11;
  display:flex;
  justify-content:center;
  align-items:center;
  visibility:hidden;
  opacity:0;
  transition:opacity .3s ease, visibility .3s ease;
}

#lsf #event-desc-modal.active {
  visibility:visible;
  opacity:1;
}

#lsf #event-desc-modal .wrap {
  position:relative;
  width:60rem;
  aspect-ratio:7 / 8.5;
  background:#fff;
  z-index:9;
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
  padding:2rem;
}

#lsf #event-desc-modal .modal-close {
  position:absolute;
  margin:0;
  padding:0;
  border:0;
  right:2rem;
  top:3rem;
  background:url(../images/lsf/close_btn.png) no-repeat center/contain;
  width:3rem;
  height:3rem;
  color:#999;
  cursor:pointer;
}

#lsf #event-desc-modal .title {
  font-size:3.6rem;
  font-weight:500;
  margin-bottom:2rem;
}

#lsf #event-desc-modal .modal-content {
  flex:1;
  overflow:auto;
  box-sizing:border-box;
  padding-right:2rem;
}

#lsf #event-desc-modal .section {
  margin-bottom:3rem;
}

#lsf #event-desc-modal .section:last-child {
  margin-bottom:0;
}

#lsf #event-desc-modal .subtitle {
  font-size:2.6rem;
  font-weight:500;
  margin-bottom:1rem;
}

#lsf #event-desc-modal p {
  margin:0;
  font-size:2rem;
  line-height:1.6;
}

#lsf #result-modal {
  position:fixed;
  left:0;
  right:0;
  top:0;
  bottom:0;
  z-index:13;
  visibility: hidden;
  opacity:0;
  display: flex;
  justify-content: center;
  align-items: center;
  transition:opacity .3s ease, visibility .3s ease;
}

#lsf #result-modal .wrap {
  width:48rem;
  aspect-ratio: 7 / 6.5;
  background:rgba(0,0,0,.8);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding:2.5rem;
  color:#fff;
  background:rgba(0,0,0,.8);
}

#lsf #result-modal.active {
  visibility:visible;
  opacity: 1;
}

#lsf #result-modal .title {
  font-size:3rem;
  font-weight:500;
  margin-bottom:3rem;
}

#lsf #result-modal .modal-content {
  flex:1;
  overflow:auto;
  box-sizing: border-box;
  padding-right:2rem;
}

#lsf #result-modal .value-result {
  font-size:2.4rem;
  margin-bottom:3rem;
}

#lsf #result-modal .value-result > div {
  margin-top:.5rem;
}

#lsf #result-modal .value-result #win-value {
  color:#d82770;
}

#lsf #result-modal .desc {
  font-size:1.6rem;
  margin-bottom:2rem;
}

#lsf #result-modal .subtitle {
  font-size:2.2rem;
  margin-top:4rem;
  margin-bottom:2rem;
}

#lsf #result-modal .winners {
  font-size:1.6rem;
  margin-bottom:2rem;
}

#lsf #result-modal .count {
  margin-top:1rem;
  font-size:2.2rem;
}

#lsf #challenge-modal {
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background:rgba(0,0,0,.7);
  z-index:11;
  color:#fff;
  display: flex;
  justify-content: center;
  align-items: center;
  visibility:hidden;
  opacity:0;
  transition:opacity .3s ease, visibility .3s ease;
}

#lsf #challenge-modal.active {
  visibility:visible;
  opacity: 1;
}

#lsf #challenge-modal .modal-close {
  position:fixed;
  right:3%;
  top:3%;
  height:6rem;
  width:6rem;
  background:#000 url(../images/lsf/close_btn.png) no-repeat center/60%;
  box-sizing: border-box;
  border:.1rem solid rgba(255,255,255,.5);
  cursor:pointer;
}

#lsf #challenge-modal .wrap {
  width:75rem;
  max-width:95%;
  max-height:95%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#lsf #challenge-modal .head {
  font-size:3rem;
  font-weight:500;
  transition: opacity .3s ease, visibility .3s ease;
}

#lsf #challenge-modal.rolling .head {
  opacity:0;
  visibility:hidden;
}

#lsf #challenge-modal.rolling #roll {
  opacity:0;
  visibility:hidden;
}

#lsf #challenge-modal .animate {
  width:100%;
  aspect-ratio: 1/.8;
  position:relative;
}

#lsf #challenge-modal #roll-result {
  position:absolute;
  top:40%;
  width:100%;
  font-size:9rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight:bold;
  visibility:hidden;
  opacity:0;
  transition:opacity .3s ease, visibility .3s ease;
}

#lsf #challenge-modal .roll-notice {
  position:absolute;
  top:60%;
  width:100%;
  font-size:1.6rem;
  display: flex;
  flex-direction: column;
  text-align: center;
  line-height:1.3;
  font-weight:500;
  visibility:hidden;
  opacity:0;
  transition:opacity .3s ease, visibility .3s ease;
}

#lsf #challenge-modal.rolled #roll-result {
  visibility:visible;
  opacity:1;
}

#lsf #challenge-modal.rolled .roll-notice {
  visibility:visible;
  opacity:1;
}

@keyframes heart-beat-1 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.05);
  }
}

@keyframes heart-beat-2 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}

#lsf #challenge-modal .animate .heart {
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:100%;
  background:url(../images/lsf/xdtz/heart_botm.png) no-repeat center/contain;
  animation: heart-beat-1 .5s infinite alternate;
}

#lsf #challenge-modal .animate .heart .liquid {
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:100%;
  mask-image: url(../images/lsf/xdtz/heart_mask.png);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

#lsf #challenge-modal .animate .heart:after {
  content:'';
  position:absolute;
  width:100%;
  height:100%;
  background:url(../images/lsf/xdtz/heart_shine.png) no-repeat center/contain;
}

#lsf #challenge-modal .animate .heart .liquid:before {
  content:'';
  position:absolute;
  width:100%;
  height:100%;
  background:url(../images/lsf/xdtz/heart_liquid.png) repeat-x left top/30% 100%;
  transform: translateY(65%);
  animation: heart-liquid 1s linear infinite;
}

@keyframes heart-liquid {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 42.857142857% 0;
  }
}

@keyframes heart-liquid-rise {
  0% {
    transform: translateY(100%);
  }
  25% {
    transform: translateY(70%);
  }
  50% {
    transform: translateY(50%);
  }
  75% {
    transform: translateY(30%);
  }
  100% {
    transform: translateY(0%);
  }
}

#lsf #challenge-modal.rolled .animate .heart .liquid:before {
  transform: translateY(0%);
}

#lsf #challenge-modal.rolling .animate .heart {
  animation: heart-beat-2 .2s infinite alternate;
}

#lsf #challenge-modal.rolling .animate .heart .liquid:before {
  animation: heart-liquid 1s linear infinite, heart-liquid-rise 2s ease forwards;
}

#lsf #challenge-modal .info {
  margin-top:2rem;
  font-size:2.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap:1rem;
  transition:opacity .3s ease, visibility .3s ease;
}

#lsf #challenge-modal.rolling .info {
  opacity:0;
  visibility:hidden;
}

#lsf #challenge-modal .info .challenge-count {
  color:#d82770;
  font-weight:500;
  text-shadow: 0 0 .5rem #000;
}

#lsf #challenge-modal .info .record {
  font-size:2.8rem;
  margin-top:1rem;
}

#lsf #challenge-modal .info .record span {
  font-weight:500;
}

#lsf #challenge-modal .info .tips {
  font-size:2.8rem;
}

#lsf #challenge-modal .animate .charal,
#lsf #challenge-modal .animate .charar {
  position:absolute;
  bottom:10%;
  width:32%;
  aspect-ratio: 600 / 800;
  background-repeat:no-repeat;
  background-size:300%;
  background-position:0 0;
}

#lsf #challenge-modal.rolled .animate .charal,
#lsf #challenge-modal.rolled .animate .charar {
  background-position: 100% 0;
}

#lsf #challenge-modal.rolling .animate .charal,
#lsf #challenge-modal.rolling .animate .charar {
  animation: chara-anime 1.5s steps(1) forwards;
}

@keyframes chara-anime {
  0% {
    background-position:0 0;
  }
  33% {
    background-position:50% 0;
  }
  66% {
    background-position:0 0;
  }
  100% {
    background-position:100% 0;
  }
}

#lsf #challenge-modal .animate .charal {
  left:0;
  background-image: url(../images/lsf/xdtz/anime-1.png);
}

#lsf #challenge-modal .animate .charar {
  right:0;
  background-image: url(../images/lsf/xdtz/anime-2.png);
}

#lsf #challenge-modal #roll {
  position:relative;
  margin:-10% auto 0 auto;
  z-index:2;
  transition:opacity .3s ease, visibility .3s ease;
}

#lsf #lsf-share-window {
  width:46rem;
  height:44rem;
  display: flex;
  flex-direction: column;
}

#lsf #lsf-share-window .title:before {
  content:'';
  width:2rem;
  height:2rem;
  flex:0 0 auto;
  background:url(../images/icon_point.png) no-repeat center/100%;
  margin-right:.8rem;
}

#lsf #lsf-share-window .content {
  padding-top:1rem;
}

#lsf #lsf-share-window .share-result {
  color:#d82770;
  font-size:1.8rem;
  font-weight:500;
  line-height:1.5;
  margin-bottom:3rem;
}

#lsf #lsf-share-window .key-wrap {
  height:12rem;
  flex-direction:column;
  margin-bottom:2rem;
}

#lsf #lsf-share-window .key-wrap .name {
  position:absolute;
  top:-1.8rem;
  left:0;
  margin:0;
  overflow:hidden;
}

#lsf #lsf-share-window .key-wrap .fix {
  display:flex;
  width:100%;
  height:100%;
  box-sizing:border-box;
  padding:1.2rem 4.5rem 1.2rem 1.5rem;
}

#lsf #lsf-share-window .key-wrap .text {
  white-space:normal;
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
  overflow-wrap:anywhere;
  line-height:1.5;
}

#lsf #lsf-share-window .key-wrap .copy {
  position:absolute;
  right:.8rem;
  bottom:.8rem;
  margin:0;
}

#lsf #lsf-share-window .notice {
  font-size:1.4rem;
  line-height:1.6;
}

@media (max-width: 800px) {
  #lsf nav {
    zoom:.8;
  }

  #lsf .lsf-btn {
    width:22rem;
    border-radius:1.2rem;
  }

  #lsf .main {
    min-width:100%;
    overflow-x: hidden;
  }

  #lsf .header {
    min-height: 100vh;
  }

  #lsf .header .kv-bg {
    min-height: 100vh;
    background-size:auto 95%;
  }
  #lsf .header .content-bg {
    height:95%;
    max-height:unset;
    min-height:unset;
    background-size:auto 95%;
    background-position: 28% center;
  }

  #lsf .header .banner {
    height:26%;
  }

  #lsf .header .slogan {
    max-width:unset;
    height:4.3%;
    left:50%;
    bottom:15.5%;
    transform: translateX(-53%);
  }

  #lsf .header .steam-btn {
    width:22rem;
    height:auto;
  }

  #lsf .game-area {
    min-width:unset;
    box-sizing: border-box;
  }

  #lsf .game .head {
    left:0;
    right:0;
    transform: translateY(-30%);
    margin:auto;
    width:90%;
  }

  #lsf .game .head .desc {
    font-size:1.4rem;
    width:20%;
  }

  #lsf .game {
    height:auto;
    padding-bottom:3rem;
    border-radius:2rem;
  }

  #lsf .game .body {
    flex-direction: column;
    height:auto;
  }

  #lsf .game .body .secl {
    width:100%;
  }

  #lsf .game .test-title {
    margin-top:25%;
    max-width:100%;
    height:3rem;
  }

  #lsf .game .secl .start-challenge {
    margin-top:-2rem;
  }

  #lsf .game .secl .challenge-chance {
    font-size:2.2rem;
    margin-top:1rem;
  }

  #lsf .game .secl .challenge-chance .challenge-count {
    font-size:3rem;
  }

  #lsf .game .body .secr {
    width:100%;
    min-width:0;
    height:auto;
    flex:none;
    margin-left:0;
    gap:3rem;
    justify-content:flex-start;
    margin-top:10%;
  }

  #lsf .game .body .secr > div {
    border-radius:2rem;
  }

  #lsf .game .body .secr > div .subtitle {
    height:4rem;
  }

  #lsf .game .body .secr .drop {
    height:auto;
  }

  #lsf .game .body .secr .drop .date {
    top:.8rem;
    right:1.5rem;
    left:auto;
    font-size:1.4rem;
  }

  #lsf .game .body .secr .drop .prize-list {
    min-width:0;
    height:100%;
  }

  #lsf .game .body .secr .drop .main-prize {
    width:45%;
    max-width:20rem;
    height:21rem;
  }

  #lsf .game .body .secr .drop .main-prize .sample {
    border-radius:1rem;
    min-height:16rem;
  }

  #lsf .game .body .secr .drop .main-prize .desc {
    width:100%;
    min-width:0;
    font-size:1.4rem;
  }

  #lsf .game .body .secr .drop .main-prize .desc .num {
    flex:0 0 auto;
    margin-left:.5rem;
    white-space:nowrap;
  }

  #lsf .game .body .secr .drop .sub-prize {
    min-width:0;
    flex:1 1 0;
    margin-left:1.2rem;
  }

  #lsf .game .body .secr .drop .sub-prize .item {
    height:7rem;
    flex:0 0 7rem;
    margin-bottom:1rem;
    padding:.7rem;
    border-radius:.8rem;
  }

  #lsf .game .body .secr .drop .sub-prize .item .sample {
    width:5.2rem;
    min-width:5.2rem;
  }

  #lsf .game .body .secr .drop .sub-prize .item .desc {
    min-width:0;
    margin-left:.7rem;
    font-size:1.2rem;
    line-height:1.2;
    overflow-wrap:anywhere;
  }

  #lsf .game .body .secr .drop .sub-prize .item .desc .num {
    white-space:nowrap;
  }

  #lsf .game .body .secr .drop .sub-prize .btns {
    min-height:0;
  }

  #lsf .game .body .secr .drop .sub-prize .btns #all-prize {
    width:11rem;
    height:3.1rem;
    border-radius:.8rem;
  }

  #lsf .game .body .secr .drop .sub-prize .btns .prev-result {
    font-size:1.2rem;
    line-height:1;
    white-space:nowrap;
  }

  #lsf .game .body .secr .task {
    height:auto;
  }

  #lsf .game .body .secr .task .task-list {
    min-width:0;
    height:100%;
    gap:.8rem;
    justify-content:flex-start;
  }

  #lsf .game .body .secr .task .task-list .item {
    height:3.2rem;
    min-width:0;
    padding:0 0 0 1rem;
  }

  #lsf .game .body .secr .task .task-list .item .name {
    width:32%;
    font-size:1.5rem;
  }

  #lsf .game .body .secr .task .task-list .item .limit {
    font-size:1.2rem;
  }

  #lsf .game .body .secr .task .task-list .item .action {
    width:23%;
    min-width:6.5rem;
    font-size:1.3rem;
  }

  #lsf .game .body .secr .bonus {
    height:auto;
  }

  #lsf .game .body .secr .bonus .wrap {
    min-width:0;
    padding-left:18.5rem;
    box-sizing:border-box;
  }

  #lsf .game .body .secr .bonus .wrap .info {
    width:auto;
    align-items: flex-end;
    min-width:0;
  }

  #lsf .game .body .secr .bonus .wrap .info .lsf-btn {
    width:11rem;
    height:3.1rem;
    border-radius:.8rem;
  }

  #lsf .game .body .secr .bonus .wrap .info .bonus-info {
    min-width:0;
    font-size:1.2rem;
    flex:none;
    margin-top:1rem;
  }

  #lsf .game .body .secr .bonus .wrap .info #bonus-balance {
    margin:0 0 0 .4rem;
    white-space:nowrap;
  }

  #lsf .main > .content {
    min-width:unset;
    width:100%;
    padding:0;
  }

  #lsf .main > .content .mask {
    background:rgba(255,255,255,.8);
    width:100%;
    height:100%;
    padding:0 3%;
    box-sizing: border-box;
  }

  #lsf .main > .content .vote-wrap {
    width:100%;
    padding-top:5rem;
    padding-bottom:0;
    justify-content: space-between;
  }

  #lsf .main > .content .vote-wrap .title {
    height:15rem;
    width:auto;
  }

  #lsf .main > .content .vote-wrap p {
    font-size:1.6rem;
  }

  #lsf .main > .content .vote-wrap .section {
    background:rgba(255,255,255,0.8);
    padding-bottom:5rem;
  }

  #lsf .main > .content .vote-wrap .section:before {
    content:'';
    position:absolute;
    left:0;
    right:0;
    top:-10rem;
    width:100%;
    height:10rem;
    background:linear-gradient(to top, rgba(255,255,255,0.8), rgba(255,255,255,0));
  }

  #lsf .main > .content .vote-wrap .vote-btn {
    margin-top:1rem;
  }

  #lsf .main > .content .vote-wrap .notice {
    font-size:1.4rem;
    margin-top:3rem;
  }

  #lsf .main > .content .works-wrap {
    padding:3rem;
  }

  #lsf .main > .content .works-wrap .title {
    height:3.5rem;
  }

  #lsf .slider-nav {
    gap:1rem;
  }

  #lsf .works-list {
    --slider-gap:3rem;
  }

  #lsf .slider-prev,
  #lsf .slider-next {
    width:3rem;
    height:3rem;
    box-shadow:.3rem .3rem 0 #94536f, inset 0 0 .6rem rgba(255,255,255,0.8);
  }

  #lsf .slider-prev:after,
  #lsf .slider-next:after {
    border-left: .7rem solid transparent;
    border-right: .7rem solid transparent;
    border-bottom: 1rem solid #fff;
  }

  #lsf .slider-dot {
    position:relative;
    width:1.3rem;
    min-width:1.3rem;
    height:1.3rem;
  }

  #lsf .slider-dot:before {
    width:50%;
    height:50%;
  }

  #lsf .slider-dot:after {
    width:100%;
    height:100%;
  }

  #lsf .main > .content .partners-wrap {
    background:none;
    padding:0;
  }

  #lsf .main > .content .partners-wrap .title {
    height:3.6rem;
  }

  #lsf .main > .content .partners-wrap .partners-list .partner {
    max-width:30%;
  }

  #lsf .footer {
    margin-top:8rem;
  }

  #lsf .footer {
    grid-template-columns: 54% minmax(0, 1fr);
    grid-template-areas:
      "left top"
      "bottom bottom";
    gap:1rem;
    margin-bottom:4rem;
  }

  #lsf .footer .orgs {
    height:3rem;
    justify-content: space-between;
  }

  #lsf .footer .orgs .org {
    margin-right:1rem;
  }

  #lsf .footer .orgs .org:last-child {
    margin-right:0;
  }

  #lsf .footer .orgs .org .text {
    margin-right:1rem;
  }

  #lsf .footer .orgs .org .text:after {
    display:none;
  }

  #lsf .footer .orgs .org .logo {
    height:2.5rem;
    margin-right:0;
    flex:1;
  }

  #lsf .footer .orgs .org .text,
  #lsf .footer .links,
  #lsf .footer .copyright {
    font-size:1.2rem;
  }

  #lsf .footer .links > a {
    margin-right:1rem;
  }

  #lsf .footer .links > a:after {
    display:none;
  }

  #lsf .footer .links > a img {
    height:1.5rem;
  }

  #lsf #prize-list-modal .wrap {
    width:90%;
    height:80%;
    padding:1.4rem;
  }

  #lsf #prize-list-modal .modal-close {
    top: 1.5rem;
    right: 1.5rem;
  }

  #lsf #prize-list-modal .title {
    font-size:2.4rem;
    margin-bottom:1.4rem;
  }

  #lsf #prize-list-modal .modal-content {
    padding-right:1rem;
  }

  #lsf #prize-list-modal .modal-content .subevent {
    margin-bottom:2.6rem;
  }

  #lsf #prize-list-modal .modal-content .subevent .name {
    font-size:1.8rem;
  }

  #lsf #prize-list-modal .modal-content .subevent .prize {
    margin-top:1rem;
  }

  #lsf #prize-list-modal .modal-content .subevent .prize .desc {
    font-size:1.8rem;
    margin-left:1rem;
  }

  #lsf #prize-list-modal .modal-content .subevent .prize .desc .result-btn {
    width:8rem;
    height:3rem;
    font-size:1.4rem;
  }

  #lsf #event-desc-modal .wrap {
    width:90%;
    height:80%;
    padding:1.4rem;
  }

  #lsf #event-desc-modal .modal-close {
    top:1.5rem;
    right:1.5rem;
  }

  #lsf #event-desc-modal .title {
    font-size:2.4rem;
    margin-bottom:1.4rem;
  }

  #lsf #event-desc-modal .modal-content {
    padding-right:1rem;
  }

  #lsf #event-desc-modal .section {
    margin-bottom:2.6rem;
  }

  #lsf #event-desc-modal .subtitle {
    font-size:1.8rem;
  }

  #lsf #event-desc-modal p {
    font-size:1.6rem;
  }

  #lsf #result-modal .wrap {
    width:80%;
    height:50%;
    min-height:50rem;
    padding:3rem;
  }

  #lsf #result-modal .title {
    font-size:2.4rem;
  }

  #lsf #result-modal .value-result {
    font-size:2rem;
  }

  #lsf #result-modal .desc {
    font-size:1.6rem;
  }

  #lsf #challenge-modal #roll-result {
    font-size:4.8rem;
    top:40%;
  }

  #lsf #challenge-modal .roll-notice {
    font-size:1.4rem;
    top:58%;
  }

  #lsf #result-modal .subtitle {
    font-size:2rem;
  }

  #lsf #result-modal .count {
    font-size:2rem;
  }

  #lsf #challenge-modal .modal-close {
    width:4rem;
    height:4rem;
  }

  #lsf #challenge-modal .head {
    font-size:2.4rem;
  }

  #lsf #challenge-modal .info {
    font-size:2rem;
  }

  #lsf #challenge-modal .info .record {
    font-size:1.4rem;
    gap:2rem;
  }

  #lsf #lsf-share-window {
    width:calc(100% - 3rem);
    height:min(52rem, calc(100vh - 3rem));
    max-width:none;
    max-height:none;
  }

  #lsf #lsf-share-window .main-wrap {
    padding:2.2rem;
  }

  #lsf #lsf-share-window .title {
    font-size:2.2rem;
    margin-bottom:1.5rem;
    padding-right:2.5rem;
  }

  #lsf #lsf-share-window .share-result {
    font-size:1.6rem;
    margin-bottom:2.8rem;
  }

  #lsf #lsf-share-window .key-wrap {
    height:16rem;
  }

  #lsf #lsf-share-window .key-wrap .fix {
    padding:1.2rem 4.8rem 1.2rem 1.2rem;
  }

  #lsf #lsf-share-window .key-wrap .text {
    -webkit-line-clamp:6;
    font-size:1.4rem;
  }

  #lsf #lsf-share-window .key-wrap .copy {
    width:4rem;
    height:4rem;
    right:.6rem;
    bottom:.6rem;
  }

  #lsf #lsf-share-window .notice {
    font-size:1.3rem;
  }

  #lsf #lsf-share-window .actions {
    margin-top:1.5rem;
  }

  #lsf #lsf-share-window .actions button {
    min-height:4.4rem;
  }

  #lsf #lsf-share-window .close-btn {
    width:5rem;
    height:5rem;
  }
}