@charset "UTF-8";
/* min-width: 1028px; */
/* 共通設定 */
body.is-invite {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  body:not(.is-invite) {
    overflow: initial;
    contain: paint;
  }
}
body:has(.presentCheck:checked) {
  overflow: hidden;
  contain: none;
}

#contentsArea {
  clear: both;
  overflow-x: initial;
}

#wrap {
  box-sizing: border-box;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
  font-size: 16px;
  line-height: 2;
  color: #000;
}

#wrap *,
#wrap *:before,
#wrap *:after {
  box-sizing: inherit;
}

#wrap h2,
#wrap h3,
#wrap h4,
#wrap h5,
#wrap div,
#wrap p,
#wrap ul,
#wrap ol,
#wrap li,
#wrap button {
  font-family: inherit;
  color: inherit;
  margin: 0 auto;
  padding: 0;
  line-height: 1;
  letter-spacing: normal;
  font-size: 4.2666666667vw;
}
@media only screen and (min-width: 768px) {
  #wrap h2,
  #wrap h3,
  #wrap h4,
  #wrap h5,
  #wrap div,
  #wrap p,
  #wrap ul,
  #wrap ol,
  #wrap li,
  #wrap button {
    font-size: 16px;
  }
}
#wrap img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
  width: 100%;
}

#wrap a {
  color: inherit;
}

#wrap > .contents-wrap {
  margin-bottom: 3em;
}

#wrap .--serif {
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}
#wrap .--sans {
  font-family: "Hiragino Maru Gothic ProN", "Hiragino Maru Gothic Std", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}

#wrap.base .sec a {
  text-decoration: none;
}
#wrap.base .sec a > div, #wrap.base .sec a > p, #wrap.base .sec a > span, #wrap.base .sec a > picture, #wrap.base .sec a > img {
  transition: opacity 0.3s linear;
}
@media only screen and (min-width: 768px) {
  #wrap.base .sec a:hover > div, #wrap.base .sec a:hover > p, #wrap.base .sec a:hover > span, #wrap.base .sec a:hover > picture, #wrap.base .sec a:hover > img {
    opacity: 0.6;
  }
}
#wrap.base .sec .secContents {
  color: #fff;
}
#wrap.base .sec .secContents p,
#wrap.base .sec .secContents li,
#wrap.base .sec .secContents a {
  color: #fff;
}

/*
.opening
*/
#wrap.base .opening.sec {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1001;
  width: 100vw;
  height: min(100svh, 100vh);
  margin: 0;
  overflow: hidden;
  background-color: #000;
  color: #fff;
}
#wrap.base .opening.is-over {
  background-color: transparent;
  pointer-events: none;
}
#wrap.base .opening.is-over .opening_0, #wrap.base .opening.is-over .opening_1, #wrap.base .opening.is-over .opening_2, #wrap.base .opening.is-over .opening_3, #wrap.base .opening.is-over .opening_4 {
  opacity: 0 !important;
}
@media only screen and (min-width: 768px) {
  #wrap.base .opening .openingContents {
    width: 100%;
  }
}
#wrap.base .opening .opening_0 {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: inherit;
  height: inherit;
  font-size: 5.6vw;
  transition: opacity 0.3s linear;
}
@media only screen and (min-width: 768px) {
  #wrap.base .opening .opening_0 {
    font-size: 3.2838154808vw;
  }
}
@media only screen and (min-width: 1279px) {
  #wrap.base .opening .opening_0 {
    font-size: 42px;
  }
}
#wrap.base .opening .opening_0.is-over {
  opacity: 0;
}
#wrap.base .opening .opening_1 {
  position: absolute;
  top: 0;
  left: 0;
  width: inherit;
  height: inherit;
  opacity: 0;
}
#wrap.base .opening .opening_1.is-current {
  animation: 2.5s hazeFadeIn forwards;
}
#wrap.base .opening .opening_2 {
  position: absolute;
  top: 0;
  left: 0;
  width: inherit;
  height: inherit;
  opacity: 0;
}
#wrap.base .opening .opening_2.is-current {
  animation: 3s 1s inviteFadeInOut forwards;
}
#wrap.base .opening .opening_2 > div {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: url(../dfs_halloween_img/invitation_bg.png) center center no-repeat;
  background-size: cover;
}
@media only screen and (min-width: 768px) {
  #wrap.base .opening .opening_2 > div {
    background-size: cover;
  }
}
#wrap.base .opening .opening_3 {
  position: absolute;
  top: 0;
  left: 0;
  width: inherit;
  height: inherit;
  opacity: 0;
}
#wrap.base .opening .opening_3.is-current {
  animation: mainVisualFadeIn 6.5s forwards;
}
#wrap.base .opening .opening_3 .openingContents {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
#wrap.base .opening .opening_3 .openingContents p {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translateX(-50%) translateY(-50%);
}
@media only screen and (min-width: 768px) {
  #wrap.base .opening .opening_3 .openingContents p {
    width: auto;
    height: min(98svh, 98vh);
  }
}
@media only screen and (min-width: 768px) {
  #wrap.base .opening .opening_3 .openingContents p img {
    max-width: none;
    width: auto;
    height: 100%;
  }
}
#wrap.base .opening .opening_5 {
  position: absolute;
  top: 0;
  left: 0;
  width: inherit;
  height: inherit;
  opacity: 0;
}
#wrap.base .opening .opening_5.is-current {
  animation: 1s 4.5s hazeAgain forwards;
}
#wrap.base .opening .opening_5.is-current .hazeImg {
  opacity: 0;
}
#wrap.base .opening .opening_5 .hazeImg {
  transition: opacity 1s 3.5s linear;
}
#wrap.base .opening .opening_5 .over {
  position: absolute;
  bottom: 0;
  left: 0;
  width: inherit;
  height: inherit;
  background-color: #000;
  transform-origin: bottom center;
  transition: transform 0.25s 1s ease-in;
}
#wrap.base .opening .opening_5 .over.is-active {
  transform: scaleY(0);
}
#wrap.base .opening .haze .hazeImg {
  position: absolute;
  top: 0;
  left: 0;
  width: inherit;
  height: inherit;
  background-size: 120% 120%;
}
@keyframes hazeFadeIn {
  0% {
    opacity: 0;
    transform: scale(1.5) rotate(2deg);
  }
  15% {
    transform: scale(1.2) rotate(0deg);
    opacity: 0.4;
  }
  35% {
    transform: scale(1.2) rotate(-2deg);
    opacity: 0.6;
  }
  70% {
    opacity: 0.75;
    transform: scale(1.1) rotate(0deg);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes inviteFadeInOut {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes mainVisualFadeIn {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  65% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes adjustSize {
  0% {
    transform: translateX(-50%) translateY(-50%);
  }
  100% {
    transform: translateX(-50%) translateY(-50%) scale(76%);
  }
}
@keyframes adjustSizeSe {
  0% {
    transform: translateX(-50%) translateY(-50%);
  }
  100% {
    transform: translateX(-50%) translateY(-40%) scale(76%);
  }
}
@keyframes adjustSizeTablet {
  0% {
    transform: translateX(-50%) translateY(-50%);
  }
  100% {
    transform: translateX(-50%) translateY(-50%) scale(73.3333333333%);
  }
}
@keyframes adjustSizePc {
  0% {
    transform: translateX(-50%) translateY(-50%);
  }
  100% {
    transform: translateX(-75%) translateY(-50%) scale(60%);
  }
}
@keyframes adjustLogo {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0%);
  }
}
@keyframes adjustLogoTablet {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0%);
  }
}
@keyframes adjustLogoPc {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes adjustPos {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(-2%);
  }
}
@keyframes adjustPosBg {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(-33%);
  }
}
@keyframes adjustPosBgPc {
  0% {
    transform: translateY(-350px);
  }
  100% {
    transform: translateY(-96px);
  }
}
@keyframes adjustPosBgTablet {
  0% {
    transform: translateY(-350px);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes hazeAgain {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*
.main
*/
#wrap.base .sec .main {
  position: relative;
  background-size: 100% auto;
}
@media only screen and (min-width: 768px) {
  #wrap.base .sec .main {
    width: 100%;
    max-width: 460px;
  }
}
#wrap.base .sec .main .mainHeader {
  padding: 1.75em 0;
  background-color: #000;
}
#wrap.base .sec .main .mainHeader h2 {
  position: relative;
}
#wrap.base .sec .main .mainHeaderBg {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: 100vw;
}
@media only screen and (min-width: 768px) {
  #wrap.base .sec .main .mainHeaderBg {
    width: 100%;
  }
}
#wrap.base .sec .main .mainHeaderBg:before {
  content: "";
  display: block;
  width: inherit;
  height: 76.2666666667vw;
  background: url(../dfs_halloween_img/title_bg.png) top left repeat-x;
  background-size: auto 100%;
  transform: translateX(-50%);
}
@media only screen and (min-width: 768px) {
  #wrap.base .sec .main .mainHeaderBg:before {
    min-height: 351px;
    height: 100%;
  }
}
#wrap.base .sec .main .mainImg {
  width: 100%;
  padding-top: 1.8125em;
}
#wrap.base .sec .main .mainLogo {
  width: 100%;
  margin-top: 3.75em;
}
#wrap.base .sec .main .mainHeaderTitle {
  position: relative;
  width: 100%;
}
#wrap.base .sec .main .mainHeaderSub {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
#wrap.base .sec .main .abstract {
  display: flex;
  flex-direction: column;
  row-gap: 2em;
  margin-top: 2em;
  font-size: 4vw;
  color: #fff;
}
@media only screen and (min-width: 768px) {
  #wrap.base .sec .main .abstract {
    font-size: 18.4px;
  }
}
#wrap.base .sec .main .abstract p {
  text-align: center;
  font-size: inherit;
  line-height: 2;
  letter-spacing: 0.02em;
}
/*
*/
#wrap.base .mainContents {
  display: block;
  background-color: #000;
}
@media only screen and (min-width: 768px) {
  #wrap.base .mainContents {
    position: relative;
    display: grid;
    grid-template-columns: 1fr max(32.8571428571%, 460px) 1fr;
    max-width: 1400px;
    width: 100%;
  }
}
@media only screen and (min-width: 768px) {
  #wrap.base .mainContents:before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    z-index: -1;
    display: block;
    width: 100vw;
    height: 100%;
    background-color: #000;
    transform: translateX(-50%);
  }
}
#wrap.base .mainContents .catch {
  display: none;
}
@media only screen and (min-width: 768px) {
  #wrap.base .mainContents .catch {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: min(100svh, 840px);
    order: 3;
  }
}
#wrap.base .mainContents .catchText {
  max-width: 345px;
}
#wrap.base .mainContents .pcNav {
  display: none;
}
@media only screen and (min-width: 768px) {
  #wrap.base .mainContents .pcNav {
    position: sticky;
    top: 0;
    display: flex;
    justify-content: center;
    height: min(100svh, 840px);
    order: 1;
  }
}
#wrap.base .mainContents .pcNav .pcNavInner {
  max-width: 385px;
  margin-right: 0;
}
#wrap.base .mainContents .pcNav .pcNavMain {
  width: 87.5324675325%;
}
#wrap.base .mainContents .pcNav .pcNavMenus {
  width: 87.5324675325%;
}
#wrap.base .mainContents .pcNav .pcNavMenus li {
  background: url(../dfs_halloween_img/2026_pc_menu_boder.png) bottom center no-repeat;
  background-size: 100% auto;
}
#wrap.base .mainContents .pcNav .pcNavBtn {
  margin-top: 0.75em;
}
@media only screen and (min-width: 768px) {
  #wrap.base .mainContents .main {
    order: 2;
  }
}
@media only screen and (min-width: 768px) {
  #wrap.base .mainContents .main:before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    display: block;
    width: 139.1304347826%;
    height: 100%;
    background: url(../dfs_halloween_img/pc_bg.png) top center repeat-y;
    background-size: 100% auto;
    transform: translateX(-50%);
    pointer-events: none;
  }
}
/*

.sec_01
*/
#wrap.base .main .sec_01 {
  background:url(../dfs_halloween_img/2026_menu_bg2.jpg) top center no-repeat;
  background-size: 100% auto, 100% auto;
  padding-bottom: 2em;
}
@media only screen and (min-width: 768px) {
  #wrap.base .main .sec_01 {
    padding-bottom: 3rem;
  }
}
#wrap.base .main .lineupList {
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.8333333333em;
  -moz-column-gap: 2.9761904762%;
       column-gap: 2.9761904762%;
  width: 89.6%;
  margin-top: 1.6666666667em;
}
#wrap.base .main .lineup {
  margin: 0;
}
#wrap.base .main .lineup > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: stretch;
  row-gap: 0.9375em;
}
#wrap.base .main .lineup > a > span:nth-of-type(2) {
  margin-top: -0.9375em;
  line-height: 1.13;
  text-align: center;
}
#wrap.base .main .lineup > a:after {
  content: "";
  display: block;
  width: 2.15625em;
  aspect-ratio: 21/11;
  background: url(../dfs_halloween_img/2026_menu_arrow.png) center center no-repeat;
  background-size: 100% auto;
}
#wrap.base .main .new_icon {
  position: relative; 
}
#wrap.base .main .new_icon::after {
  content: "";
  position: absolute;
  display: inline-block;
  top: 5%;
  left: 7%;
  background-image: url(../dfs_halloween_img/icon_new.png);
  background-size: contain;
  width: 2.5em;
  height: 2.5em;
}
#wrap.base .main .new_icon:first-child::after{
  width: 3.75em;
  height: 3.75em;
}
#wrap.base .main .lineup_1 {
  width: 84.6726190476%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2.5em;
}
#wrap.base .main .lineup_2 {
  width: 48.2142857143%;
}
#wrap.base .main .lineup_2 a > span:nth-of-type(2) {
  height: 3.2em;
}
#wrap.base .main .lineup_3 {
  width: 48.6607142857%;
}
#wrap.base .main .lineup_3 a > span:nth-of-type(2) {
  height: 3.2em;
}
#wrap.base .main .lineup_4 {
  width: 48.2142857143%;
}

#wrap.base .main .lineup_4 a > span:nth-of-type(2) {
  height: 3.2em;
}

#wrap.base .main .lineup_7 {
  width: 48.2142857143%;
}

#wrap.base .main .lineup_7 a > span:nth-of-type(2) {
  height: 3.2em;
}

/*
.sec_02
*/
#wrap.base .main .sec_02 {
  background: url(../dfs_halloween_img/2026_01_bg.jpg) top center no-repeat;
  background-size: cover;
  padding-bottom: 4.5em;
  padding-top: 3em;
}
#wrap.base .main .sec_02 .presents {
  position: relative;
  display: flex;
  flex-direction: column;
  row-gap: 3.125em;
  width: 84%;
  margin-top: 2.3125em;
}
#wrap.base .main .sec_02 .present {
  position: relative;
  padding: 2em 0 1.1875em;
  background: url(../dfs_halloween_img/03_01_bg_top.png) top center no-repeat, url(../dfs_halloween_img/03_01_bg_bottom.png) bottom center no-repeat, url(../dfs_halloween_img/03_01_bg.jpg) top center repeat-y;
  background-size: 100% auto, 100% auto, 100% auto;
}
#wrap.base .main .sec_02 .present h4 {
  width: 46.9841269841%;
  aspect-ratio: 296/95;
  margin-top: -3.125em;
  background: url(../dfs_halloween_img/2026_01_1_sub_h_bg.png) center center no-repeat;
  background-size: 100% auto;
}
#wrap.base .main .sec_02 .present .presentCatch {
  margin-top: 0.9375em;
}
#wrap.base .main .sec_02 .present .presentThumb {
  position: relative;
  width: 85.7142857143%;
  margin-top: 1.25em;
}
#wrap.base .main .sec_02 .present .presentThumb > span {
  position: absolute;
  right: -2.2222222222%;
  bottom: -0.8125em;
  display: block;
  width: 31.8518518519%;
}
@media only screen and (min-width: 768px) {
  #wrap.base .main .sec_02 .present .presentThumb > span {
    bottom: -1.625em;
  }
}
#wrap.base .main .sec_02 .present .presentText {
  text-align: center;
  color: #000;
  margin-top: 1.3333333333em;
  font-size: 0.90625em;
  line-height: 1.67;
  letter-spacing: 0.02em;
}
@media only screen and (min-width: 768px) {
  #wrap.base .main .sec_02 .present .presentText {
    font-size: 1.25rem;
  }
}
#wrap.base .main .sec_02 .present .presentText > strong {
  position: relative;
  display: inline-block;
}
#wrap.base .main .sec_02 .present .presentText > strong > span {
  position: relative;
  z-index: 1;
}
#wrap.base .main .sec_02 .present .presentText > strong:before {
  content: "";
  position: absolute;
  bottom: 0.25em;
  left: 0;
  z-index: 0;
  display: inline-block;
  width: 100%;
  height: 0.5em;
  background-color: #87823f;
  opacity: 0.5;
}
#wrap.base .main .sec_02 .present .presentNote {
  margin-top: 1.6363636364em;
  line-height: 1.67;
  font-size: 0.90625em;
  text-align: center;
  color: #a10000;
}
@media only screen and (min-width: 768px) {
  #wrap.base .main .sec_02 .present .presentNote {
    font-size: 1.25rem;
  }
}
#wrap.base .main .sec_02 .present .presentNotice {
  margin-top: 0.5454545455em;
  text-align: center;
  font-size: 0.6875em;
}
@media only screen and (min-width: 768px) {
  #wrap.base .main .sec_02 .present .presentNotice {
    font-size: 1rem;
  }
}
#wrap.base .main .sec_02 .present .presentNotice li {
  font-size: inherit;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: #000;
}
#wrap.base .main .sec_02 .present .presentNotice li strong {
  font-weight: normal;
  color: #a10000;
}
#wrap.base .main .sec_02 .present .btn {
  width: 100%;
  margin-top: 0.46875em;
}
#wrap.base .main .sec_02 .present .btnLink {
  background-image: url(../dfs_halloween_img/2026_btn_present_bg.png);
}

#wrap.base .main .sec_02 .items {
  margin-top: 5.3125em;
}
#wrap.base .main .sec_02 .itemList {
  margin-top: 2.875em;
}
#wrap.base .main .sec_02 .characters {
  width: 72.8%;
}
#wrap.base .main .sec_02 .characters .villain {
  position: relative;
  padding-bottom: 6em;
  font-size: 4vw;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  #wrap.base .main .sec_02 .characters .villain {
    font-size: 18.4px;
  }
}
#wrap.base .main .sec_02 .characters .villain.slick-slide .villainsAbstract {
  opacity: 0;
  transition: opacity 0.3s 0.3s linear;
}
#wrap.base .main .sec_02 .characters .villain.slick-slide.slick-current .villainsAbstract {
  opacity: 1;
}
#wrap.base .main .sec_02 .characters .villain .villainInner {
  width: 80.5860805861%;
}
#wrap.base .main .sec_02 .characters .villain .villainsName {
  margin-top: 1.25em;
  padding-bottom: 1.425em;
  background: url(../dfs_halloween_img/02_slide_bg.png) center bottom no-repeat;
  background-size: 56.1363636364% auto;
  font-size: 5.3333333333vw;
  font-weight: bold;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: #9d9857;
}
@media only screen and (min-width: 768px) {
  #wrap.base .main .sec_02 .characters .villain .villainsName {
    font-size: 24.5px;
  }
}
#wrap.base .main .sec_02 .characters .villain .villainsAbstract {
  position: absolute;
  top: 24.6em;
  left: 50%;
  width: 170.4545454545%;
  padding-top: 1em;
  font-size: 3.7333333333vw;
  line-height: 1.67;
  letter-spacing: 0.02em;
  transform: translateX(-50%);
}
@media only screen and (min-width: 768px) {
  #wrap.base .main .sec_02 .characters .villain .villainsAbstract {
    font-size: 18px;
  }
}
#wrap.base .main .sec_02 .characters .slick-list {
  overflow: visible;
}
#wrap.base .main .sec_02 .characters .slick-arrow {
  top: 8.75em;
}
@media only screen and (min-width: 768px) {
  #wrap.base .main .sec_02 .characters .slick-arrow {
    top: 11.25em;
  }
}
#wrap.base .main .sec_02 .characters .slick-prev {
  left: 0;
  transform: translateX(-50%) translateY(-50%);
}
#wrap.base .main .sec_02 .characters .slick-next {
  right: 0;
  transform: translateX(50%) translateY(-50%);
}
#wrap.base .main .newArrivals {
  margin-top: 2.875em;
}
#wrap.base .main .newArrivals .newArrivalHeader {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  aspect-ratio: 150/19;
  background: url(../dfs_halloween_img/2026_01_2_1_sub_bg.png) center center no-repeat;
  background-size: 100% auto;
}
#wrap.base .main .newArrivals .newArrivalHeader > span {
  width: 39.4666666667%;
}
#wrap.base .main .newArrivals .arrivalItemsText {
  margin-top: 1.125em;
}
#wrap.base .main .newArrivals .arrivalSlide {
  width: 84%;
  margin-top: 1.4375em;
}
#wrap.base .main .newArrivals .arrivalItem {
  box-shadow: inset 0px 5px 15px 0 rgba(0, 0, 0, 0.5);
}
#wrap.base .main .slick-dots {
  position: initial;
}
#wrap.base .main .slick-dots li {
  margin: 0;
  width: 0.9375em;
  height: auto;
  aspect-ratio: 1/1;
}
#wrap.base .main .slick-dots li > button {
  white-space: pre;
  overflow: hidden;
  text-indent: 100%;
}
#wrap.base .main .slick-dots li > button:before {
  content: none;
}
#wrap.base .main .slick-arrow {
  max-width: none;
  width: 1.71875em;
  height: 3em;
  border: none;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  white-space: pre;
  overflow: hidden;
  text-indent: 100%;
  cursor: pointer;
  transition: opacity 0.3s linear;
}
@media only screen and (min-width: 768px) {
  #wrap.base .main .slick-arrow:hover {
    opacity: 0.6;
  }
}
#wrap.base .main .slick-arrow:before {
  content: none;
}
#wrap.base .main .slick-prev {
  background-image: url(../dfs_halloween_img/03_arrow_l.png);
}
#wrap.base .main .slick-next {
  background-image: url(../dfs_halloween_img/03_arrow_r.png);
}
#wrap.base .main .pickupList .slick-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  -moz-column-gap: 0.9375em;
       column-gap: 0.9375em;
  margin-top: 0.625em;
}
#wrap.base .main .pickupList .slick-dots li.slick-active > button {
  background-image: url(../dfs_halloween_img/2026_pict_pager_current.png);
}
#wrap.base .main .pickupList .slick-dots li > button {
  width: 0.9375em;
  height: 0.9375em;
  background: url(../dfs_halloween_img/2026_pict_pager.png) center center no-repeat;
  background-size: cover;
}
#wrap.base .main .pickupList .slick-prev {
  left: 0;
  transform: translateX(-50%) translateY(-50%);
}
#wrap.base .main .pickupList .slick-next {
  right: 0;
  transform: translateX(50%) translateY(-50%);
}
#wrap.base .main .pickupName {
  margin-top: 0.9333333333em;
  text-align: center;
  font-size: 4vw;
  line-height: 1.67;
  letter-spacing: 0.02em;
}
@media only screen and (min-width: 768px) {
  #wrap.base .main .pickupName {
    font-size: 18.4px;
  }
}
#wrap.base .main .arrivalVillains {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  -moz-column-gap: 3.7333333333%;
       column-gap: 3.7333333333%;
  row-gap: 1.6875em;
  margin-top: 3em;
}
#wrap.base .main .arrivalVillains li {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 0.90625em;
  width: 25.6%;
  margin: 0;
  text-align: center;
}
#wrap.base .main .arrivalVillains li > span:nth-of-type(2) {
  font-size: 0.8125em;
  line-height: 1.29;
}

/*
.sec_03
*/
#wrap.base .main .sec_03 {
  padding-bottom: 8.1875em;
  background: url(../dfs_halloween_img/03_bg_bottom.png) bottom center no-repeat, url(../dfs_halloween_img/03_bg.jpg) top center repeat-y;
  background-size: 100% auto, 100% auto;
}
#wrap.base .main .sec_03 h3 {
  background: url(../dfs_halloween_img/03_bg_top.png) top center no-repeat;
  background-size: 100% auto;
}
#wrap.base .main .sec_03 .secInner {
  margin-top: 2.3125em;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  #wrap.base .main .sec_03 .secInner {
    max-width: 460px;
  }
}
#wrap.base .main .presentCheck:checked + .presentBox {
  height: 100%;
}
#wrap.base .main .presentBox {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 0;
  overflow: hidden;
}
#wrap.base .main .presentOverlay {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.9;
}
#wrap.base .main .presentBtn {
  display: block;
  cursor: pointer;
  transition: opacity 0.3s linear;
}
@media only screen and (min-width: 768px) {
  #wrap.base .main .presentBtn:not(.presentOverlay):hover {
    opacity: 0.6;
  }
}
#wrap.base .main .presentBtn.btnClose {
  width: 46.3768115942%;
  margin: 0 auto;
}
#wrap.base .main .presentBoxInner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  overflow-y: auto;
}
@media only screen and (min-width: 768px) {
  #wrap.base .main .presentBoxInner {
    max-width: 460px;
  }
}
#wrap.base .main .presentSample {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  row-gap: 1.875em;
  width: 92%;
  padding: 1.875em 0;
  overflow-y: auto;
}
#wrap.base .main .presentFrame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 2.8125em 0;
  background-color: #fff;
  overflow-y: auto;
}
@media only screen and (min-width: 768px) {
  #wrap.base .main .present_01 .presentSample {
    aspect-ratio: 9/14;
    max-height: 96vh;
    width: auto;
  }
}
#wrap.base .main .present_01 .presentFig {
  width: 90.4761904762%;
}
@media only screen and (min-width: 768px) {
  #wrap.base .main .present_01 .presentFig {
    width: 72%;
  }
}
@media only screen and (min-width: 768px) {
  #wrap.base .main .present_02 .presentSample {
    aspect-ratio: 423/733;
    max-height: 96vh;
    width: auto;
  }
}
#wrap.base .main .present_02 .presentFig {
  width: 82.6086956522%;
}
@media only screen and (min-width: 768px) {
  #wrap.base .main .present_02 .presentFig {
    width: 66%;
  }
}
#wrap.base .main .campaignItem {
  position: relative;
  width: 100%;
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  #wrap.base .main .campaignItem {
    max-width: 460px;
  }
}
#wrap.base .main .campaignItem .villainsTagList {
  -moz-column-gap: 0.5454545455em;
       column-gap: 0.5454545455em;
}
#wrap.base .main .campaignItem .itemList {
  margin-top: 2.5625em;
}
#wrap.base .main .itemList {
  display: grid;
  grid-template-columns: repeat(2, 46.0317460317%);
  -moz-column-gap: 7.9365079365%;
       column-gap: 7.9365079365%;
  row-gap: 2.5em;
  width: 84%;
}
#wrap.base .main .itemList .itemName {
  margin-top: 0.7692307692em;
  font-size: 3.0666666667vw;
  line-height: 1.38;
  letter-spacing: 0.02em;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  #wrap.base .main .itemList .itemName {
    font-size: 14px;
  }
}
#wrap.base .main .itemList .itemNotice {
  margin-top: 1.6363636364em;
  text-align: center;
  font-size: 2.9333333333vw;
}
@media only screen and (min-width: 768px) {
  #wrap.base .main .itemList .itemNotice {
    font-size: 13.49px;
  }
}
#wrap.base .main .itemList .itemNotice li {
  font-size: inherit;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: #000;
}
#wrap.base .main .itemList .itemNotice li strong {
  font-weight: normal;
  color: #a10000;
}
#wrap.base .main .villainsTagList {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  -moz-column-gap: 0.4545454545em;
       column-gap: 0.4545454545em;
  row-gap: 0.4545454545em;
  margin-top: 0.9090909091em;
  font-size: 2.9333333333vw;
}
@media only screen and (min-width: 768px) {
  #wrap.base .main .villainsTagList {
    font-size: 13.49px;
  }
}
#wrap.base .main .villainsTagList li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 2em;
  padding: 0 0.9090909091em;
  margin: 0;
  border: 1px solid #fff;
  font-size: inherit;
}
#wrap.base .main .series {
  margin-top: 5.3125em;
}
#wrap.base .main .series .itemList {
  margin-top: 1.3125em;
}
#wrap.base .main .series .item.is-hidden {
  display: none;
}
#wrap.base .main .btnMore {
  position: relative;
}
#wrap.base .main .btnMore:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -140%;
  display: block;
  width: 100%;
  aspect-ratio: 750/502;
  background: url(../dfs_halloween_img/2026_01_3_more_bg.png) center center no-repeat;
  background-size: 100% auto;
}
#wrap.base .main .btnMore label {
  position: relative;
  display: block;
  width: 44.6666666667%;
  margin: 0 auto;
  cursor: pointer;
  transition: opacity 0.3s linear;
}
@media only screen and (min-width: 768px) {
  #wrap.base .main .btnMore label:hover {
    opacity: 0.6;
  }
}
#wrap.base .main .btnMore label > span:nth-of-type(2) {
  display: none;
}
#wrap.base .main:has(.moreList:checked) .btnMore {
  margin-top: 2.5em;
}
#wrap.base .main:has(.moreList:checked) .btnMore:before {
  content: none;
}
#wrap.base .main:has(.moreList:checked) .btnMore label > span:nth-of-type(1) {
  display: none;
}
#wrap.base .main:has(.moreList:checked) .btnMore label > span:nth-of-type(2) {
  display: block;
}
#wrap.base .main:has(.moreList:checked) .item.is-hidden {
  display: initial;
}

/*
.sec_04
*/
#wrap.base .main .sec_04 {
  padding-bottom: 4.375em;
  background: url(../dfs_halloween_img/2026_02_bg.jpg) top center no-repeat;
  background-size: 100% auto;
}
#wrap.base .main .sec_04 .newArrivals {
  margin-top: 0;
}
#wrap.base .main .sec_04 .itemList {
  margin-top: 2.875em;
}

/*
.sec_05
*/
#wrap.base .main .sec_05 {
  padding-bottom: 3.75em;
  background: url(../dfs_halloween_img/2026_03_bg.jpg) top center no-repeat;
  background-size: cover;
}
#wrap.base .main .sec_05 .newArrivals {
  margin-top: 0.3125em;
}
#wrap.base .main .btn {
  width: 91.7333333333%;
  margin-top: 1.875em;
}
#wrap.base .main .btn:has(.-pre) {
  width: 76.1333333333%;
}
#wrap.base .main .btn .btnLink {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 7.6em;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(../dfs_halloween_img/2026_btn_bg.png);
  font-size: 4vw;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-align: center;
  transition: opacity 0.3s linear;
}
@media only screen and (min-width: 768px) {
  #wrap.base .main .btn .btnLink:hover {
    opacity: 0.6;
  }
}
@media only screen and (min-width: 768px) {
  #wrap.base .main .btn .btnLink:hover > span {
    opacity: 1;
  }
}
@media only screen and (min-width: 768px) {
  #wrap.base .main .btn .btnLink {
    font-size: 18.4px;
  }
}
#wrap.base .main .btn .btnLink.-pre {
  height: 5.3666666667em;
  background-image: url(../dfs_halloween_img/2026_btn_pre_bg.png);
  color: #000;
  pointer-events: none;
}
#wrap.base .main .btn .btnLink.-white {
  height: 7.6em;
  background-image: url(../dfs_halloween_img/2026_btn_bg_white2.png);
  color: #6B642C;
}


/*
.sec_06
*/
#wrap.base .main .sec_06 {
  background: url(../dfs_halloween_img/2026_04_bg.jpg) bottom center repeat-y;
  background-size: 100% auto;
  padding-top: 3em;
}
@media only screen and (min-width: 768px) {
  #wrap.base .main .sec_06 {
    padding-bottom: 0.875em;
  }
}
#wrap.base .main .sec_06 .secInner {
  margin-top: 0.625em;
}
#wrap.base .main .sec_06 .btnLink {
  background-image: url(../dfs_halloween_img/06_btn.png);
  color: #c52a4e;
}

/*
.sec_07
*/
#wrap.base .main .sec_07 {
  padding-bottom: 1.5625em;
  background: url(../dfs_halloween_img/2026_05_bg.jpg) top center no-repeat;
  background-size: cover;
}
#wrap.base .main .sec_07 .btnLink {
  background-image: url(../dfs_halloween_img/07_btn.png);
}

/*
.sec_08
*/
#wrap.base .main .sec_08 {
  padding-top: 5.3125em;
  padding-bottom: 2.9375em;
  background: url(../dfs_halloween_img/2026_end_bg.jpg) top center no-repeat;
  background-size: 100% auto;
}
#wrap.base .main .sec_08 .btnLink {
  justify-content: flex-end;
  padding-right: 3.25em;
  background-image: url(../dfs_halloween_img/2026_btn_dfs.png);
  color: #fff;
}
#wrap.base .main .sec_08 .btn {
  margin-top: 1em;
}
#wrap.base .main .sec_08 .copyRights {
  margin-top: 1.5em;
}
#wrap.base .main .bnrList {
  display: flex;
  flex-direction: column;
  row-gap: 0.9375em;
  width: 84%;
}
#wrap.base .main .copyRights {
  width: 84%;
  font-size: 2.4vw;
  letter-spacing: 0.03em;
}
@media only screen and (min-width: 768px) {
  #wrap.base .main .copyRights {
    font-size: 11px;
  }
}
#wrap.base .main .copyRights li {
  font-size: inherit;
  line-height: 1.67;
}

/*
.sec_09
*/
#wrap.base .sec.pageNav {
  background-color: #000;
  opacity: 0;
  transition: opacity 0.3s 0.2s linear;
}
@media only screen and (min-width: 768px) {
  #wrap.base .sec.pageNav {
    display: none;
  }
}
#wrap.base .sec.pageNav.is-fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  opacity: 1;
}
@media only screen and (min-width: 768px) {
  #wrap.base .sec.pageNav.is-fixed {
    position: sticky;
  }
}
#wrap.base .sec.pageNav.is-fixed.is-end {
  position: initial;
}
@media only screen and (min-width: 768px) {
  #wrap.base .sec.pageNav.is-fixed.is-end {
    position: sticky;
  }
}
#wrap.base .sec.pageNav .pageNavInner {
  position: relative;
  width: 100%;
  background: url(../dfs_halloween_img/menu_bg.jpg) center center no-repeat;
  background-size: cover;
  background-color: #000;
}
@media only screen and (min-width: 768px) {
  #wrap.base .sec.pageNav .pageNavInner {
    max-width: 460px;
  }
}
#wrap.base .sec.pageNav .pageNavInner:before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 0;
  display: block;
  width: 100%;
  height: 7.375em;
  background: url(../dfs_halloween_img/menu_bg_top.png) center bottom repeat-x;
  background-size: auto 100%;
  pointer-events: none;
}
#wrap.base .sec.pageNav .pageNavContents {
  width: 84%;
}
#wrap.base .sec.pageNav .pageNavCheck:checked + .menuHeader:before {
  transform: translateY(-50%) rotate(180deg);
}
#wrap.base .sec.pageNav .pageNavCheck:checked + .menuHeader + .pageNavList {
  height: auto;
}
#wrap.base .sec.pageNav .menuHeader {
  position: relative;
  display: block;
  cursor: pointer;
  transition: opacity 0.3s linear;
}
@media only screen and (min-width: 768px) {
  #wrap.base .sec.pageNav .menuHeader:hover {
    opacity: 0.6;
  }
}
#wrap.base .sec.pageNav .menuHeader:before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  display: block;
  width: 4.1875em;
  height: 3.5em;
  background: url(../dfs_halloween_img/menu_arrow_up.png) center center no-repeat;
  background-size: cover;
  transform: translateY(-50%) rotate(0deg);
  transition: transform 0.3s linear;
}
#wrap.base .sec.pageNav .pageNavList {
  height: 0;
  overflow: hidden;
}
#wrap.base .sec.pageNav .pageNavMenus {
  width: 100%;
  padding-bottom: 2.25em;
}
#wrap.base .sec.pageNav .pageNavMenus li {
  position: relative;
}
#wrap.base .sec.pageNav .pageNavMenus li:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 1px;
  background-color: #d9dbb3;
  opacity: 0.3;
}
#wrap.base .sec input[type=checkbox] {
  display: none;
  margin: 0;
}

/*
.sec_10
*/
#wrap.base .main .sec_10 {
  background: url(../dfs_halloween_img/07_bg.jpg) bottom center repeat-y;
  background-size: 100% auto;
  padding-bottom: 4.5em;
  padding-top: 3em;
}
@media only screen and (min-width: 768px) {
  #wrap.base .main .sec_10 {
    padding-bottom: 6em;
  }
}
#wrap.base .main .sec_10 .secInner {
  margin-top: 0.625em;
}
#wrap.base .main .sec_10 .btnLink {
  background-image: url(../dfs_halloween_img/06_btn.png);
  color: #c52a4e;
}
/*
.cp
*/
#wrap.base .sec .cp {
  width: 100%;
  background: url(../dfs_halloween_img/2026_cp_bg.png) center center no-repeat;
  background-size: cover;
}
#wrap.base .sec .cp a {
  display: inline-flex;
  align-items: center;
  width: 100%;
  aspect-ratio: 375/38;
  color: #fff;
  font-family: serif;
}
#wrap.base .sec .cp a > span {
  line-height: 1;
}
#wrap.base .sec .cp a > span:nth-of-type(1) {
  margin-left: 8%;
  font-size: 0.84375em;
  transform: translateY(-2px);
}
@media only screen and (min-width: 768px) {
  #wrap.base .sec .cp a > span:nth-of-type(1) {
    font-size: 1.2142857143rem;
    transform: translateY(0);
  }
}
#wrap.base .sec .cp a > span:nth-of-type(1) > span {
  font-size: 1.1875em;
}
#wrap.base .sec .cp a > span:nth-of-type(2) {
  margin-left: 7.7333333333%;
  font-size: 1em;
}
@media only screen and (min-width: 768px) {
  #wrap.base .sec .cp a > span:nth-of-type(2) {
    font-size: 1.43rem;
  }
}

/*
.halloweenMain
*/
#wrap.base .sec .halloweenMain {
  background: url(../dfs_halloween_img/2026_main_bg.jpg) top center no-repeat;
  background-size: 100% auto;
  padding-bottom: 5.5625em;
}
/*
.cp
*/
/*
.cp
*/
/*
.cp
*/
/*
.cp
*/