@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&display=swap");
.header {
  top: 0;
  left: 0;
  z-index: 999;
  transition: 0.3s;
}
@media only screen and (max-width: 768px) {
  .header {
    width: 100%;
    position: relative;
  }
  .header.js-fixed {
    position: fixed;
  }
}
@media only screen and (min-width: 768px) {
  .header {
    height: 100%;
    min-height: 757px;
    position: fixed;
    transition: none;
  }
  .header.js-absolute {
    position: absolute;
    height: 100vh;
    top: auto;
    bottom: 0;
    overflow: hidden;
  }
}
.header--inner {
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: 0 0;
  background-color: #000;
}
@media only screen and (max-width: 768px) {
  .header--inner {
    background-image: url("/wp-content/themes/danjon/assets/data/webp/common/header/bg.png.webp");
    width: 100%;
    height: 13.3333333333vw;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }
}
@media only screen and (min-width: 768px) {
  .header--inner {
    background-image: url("/wp-content/themes/danjon/assets/data/webp/common/header/bg_pc.png.webp");
    width: 420px;
    height: 100%;
  }
  .header--inner:before {
    display: block;
    content: "";
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 0 0;
    background-image: url("/wp-content/themes/danjon/assets/data/webp/common/header/parts.png.webp");
    width: 206px;
    height: 211px;
    position: absolute;
    left: 0;
    bottom: 0;
  }
}
.header--logo {
  width: 25.2vw;
  margin: 0 auto;
}
@media only screen and (min-width: 768px) {
  .header--logo {
    width: 314px;
    padding: 40px 0 24px;
  }
}
.header--logo a {
  display: block;
}
@media only screen and (max-width: 768px) {
  .header--btn {
    border: #fff solid 0.8vw;
    background-color: #000;
    width: 9.0666666667vw;
    height: 9.0666666667vw;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 2vw;
  }
  .header--btn-inner {
    width: 7.4666666667vw;
    height: 7.4666666667vw;
    position: relative;
  }
  .header--btn-inner:before {
    display: block;
    content: "";
    content: "MENU";
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 900;
    letter-spacing: 0.04em;
    font-size: 1.6vw;
    letter-spacing: 0.14em;
    color: #fff;
    text-align: center;
    margin-left: 0.14em;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0.5333333333vw;
  }
  .header--btn-inner span {
    background-color: #fff;
    width: 2.4vw;
    display: block;
    position: absolute;
    transition: 0.3s;
  }
  .header--btn-inner span:first-child {
    height: 1.3333333333vw;
    top: 1.0666666667vw;
    left: 1.0666666667vw;
  }
  .header--btn-inner span:nth-child(2) {
    height: 1.8666666667vw;
    top: 1.0666666667vw;
    right: 1.0666666667vw;
  }
  .header--btn-inner span:nth-child(3) {
    height: 1.8666666667vw;
    left: 1.0666666667vw;
    bottom: 2.8vw;
  }
  .header--btn-inner span:nth-child(4) {
    height: 1.3333333333vw;
    right: 1.0666666667vw;
    bottom: 2.8vw;
  }
  .header--btn.open .header--btn-inner:before {
    display: block;
    content: "";
    content: "CLOSE";
  }
  .header--btn.open .header--btn-inner span {
    width: 2.6666666667vw;
  }
  .header--btn.open .header--btn-inner span:first-child {
    height: 1.4666666667vw;
  }
  .header--btn.open .header--btn-inner span:nth-child(2) {
    height: 1.4666666667vw;
  }
  .header--btn.open .header--btn-inner span:nth-child(3) {
    height: 1.4666666667vw;
  }
  .header--btn.open .header--btn-inner span:nth-child(4) {
    height: 1.4666666667vw;
  }
}
@media only screen and (min-width: 768px) {
  .header--btn {
    display: none;
  }
}
.header--bnr {
  display: none;
}
@media only screen and (min-width: 768px) {
  .header--bnr {
    background-color: #000;
    width: 341px;
    margin: 0 auto;
    display: block;
    position: relative;
    z-index: 2;
  }
  .header--bnr a {
    display: block;
    cursor: pointer;
    transition: 0.3s all;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .header--bnr a:hover {
    opacity: 0.8;
  }
}
@media only screen and (max-width: 768px) {
  .header--navi {
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: 0 0;
    background-image: url("/wp-content/themes/danjon/assets/data/webp/common/header/bg_navi.png.webp");
    width: 100vw;
    height: 100dvh;
    pointer-events: none;
    position: absolute;
    top: 13.3333333333vw;
    left: 0;
    opacity: 0;
    transition: 0.3s all;
  }
  .header--navi.open {
    opacity: 1;
    pointer-events: auto;
  }
}
@media only screen and (min-width: 768px) {
  .header--navi {
    background-color: #282828;
    padding: 97.5px 37px 60px;
    margin: -70px 0 0;
    display: block;
  }
}
@media only screen and (max-width: 768px) {
  .header--navi-scroll {
    height: 100%;
    padding: 8.6666666667vw 0 13.3333333333vw;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }
}
.header--navi-list {
  position: relative;
}
@media only screen and (min-width: 768px) {
  .header--navi-list {
    display: flex;
    flex-wrap: wrap;
  }
}
.header--navi-list__item {
  width: 69.3333333333vw;
  margin: 0.6666666667vw auto;
}
@media only screen and (min-width: 768px) {
  .header--navi-list__item {
    width: 169px;
    flex-basis: 169px;
    margin: 2px 2px;
  }
}
.header--navi-list__item-link {
  background-color: #fff;
  clip-path: polygon(1.5% 0%, 98.5% 0%, 100% 14%, 100% 90%, 98.5% 100%, 1.5% 100%, 0 90%, 0 14%);
  width: 100%;
  height: 10.2666666667vw;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.header--navi-list__item-link.no-link {
  background-color: #ccc;
  pointer-events: none;
}
.header--navi-list__item-link.no-link .header--navi-list__item-text {
  color: #787878;
  opacity: 0.8;
}
@media only screen and (min-width: 768px) {
  .header--navi-list__item-link {
    clip-path: polygon(3% 1%, 97% 1%, 100% 15%, 100% 85%, 97% 100%, 3% 100%, 0 86%, 0 14%);
    height: 53px;
    transition: 0.3s;
  }
  .header--navi-list__item-link:hover {
    background-color: #b79345;
  }
  .header--navi-list__item-link:hover .header--navi-list__item-text {
    color: #fff;
  }
}
.header--navi-list__item-text {
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 900;
  letter-spacing: 0.04em;
  font-size: 4vw;
}
@media only screen and (min-width: 768px) {
  .header--navi-list__item-text {
    font-size: 18px;
  }
}
.header--sns {
  margin: 6.9333333333vw 0 0;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .header--sns {
    margin: 12.5px 0 0;
    display: flex;
  }
}
.header--sns-official {
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: 0 0;
  background-size: cover;
  background-image: url("/wp-content/themes/danjon/assets/data/webp/common/header/official_sns.png.webp");
  width: 52.6666666667vw;
  height: 10.2666666667vw;
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
}
@media only screen and (min-width: 768px) {
  .header--sns-official {
    background-image: url("/wp-content/themes/danjon/assets/data/webp/common/header/official_sns_pc.png.webp");
    width: 270px;
    height: 55px;
  }
}
.header--sns-official__item {
  flex-basis: 10.2666666667vw;
  height: 10.2666666667vw;
  margin-left: 4.8vw;
}
@media only screen and (min-width: 768px) {
  .header--sns-official__item {
    flex-basis: 55px;
    height: 55px;
    margin-left: 25.5px;
  }
}
.header--sns-official__item a {
  background-color: #000;
  display: block;
  cursor: pointer;
  transition: 0.3s all;
}
@media only screen and (min-width: 768px) {
  .header--sns-official__item a {
    background-color: #fff;
  }
  .header--sns-official__item a:hover {
    background-color: #b79345;
  }
}
@media only screen and (max-width: 768px) {
  .header--sns-share {
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: 0 0;
    background-image: url("/wp-content/themes/danjon/assets/data/webp/common/header/share_sns.png.webp");
    width: 68.4vw;
    height: 10.2666666667vw;
    margin: 4.6666666667vw auto 0;
    display: flex;
    justify-content: flex-end;
  }
}
@media only screen and (min-width: 768px) {
  .header--sns-share {
    display: none;
  }
}
@media only screen and (max-width: 768px) {
  .header--sns-share__item {
    flex-basis: 10.2666666667vw;
    height: 10.2666666667vw;
    margin-left: 4.8vw;
  }
  .header--sns-share__item a {
    background-color: #000;
    display: block;
    cursor: pointer;
    transition: 0.3s all;
  }
}
@media only screen and (min-width: 768px) {
  .header.top {
    display: none;
  }
}

.footer {
  position: relative;
}
.footer-pagetop {
  position: relative;
  z-index: 10;
}
@media only screen and (min-width: 768px) {
  .footer-pagetop {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 0 0;
    background-image: url("/wp-content/themes/danjon/assets/data/webp/common/footer/bg_pagetop_pc.png.webp");
    width: 135px;
    height: 135px;
    padding: 24px 0 0 45px;
    position: absolute;
    right: 0;
    bottom: 0;
  }
}
.footer-pagetop--link {
  text-align: center;
  display: block;
}
@media only screen and (min-width: 768px) {
  .footer-pagetop--link {
    text-align: left;
  }
  .footer-pagetop--link:hover .footer-pagetop--link-icon {
    background-color: #b79345;
  }
}
.footer-pagetop--link-text {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #000;
  font-size: 3.2vw;
  line-height: 1;
  display: block;
}
@media only screen and (min-width: 768px) {
  .footer-pagetop--link-text {
    font-size: 10px;
    color: #fff;
  }
}
.footer-pagetop--link-icon {
  border: #000 solid 1.0666666667vw;
  background-color: #fff;
  width: 15.4666666667vw;
  margin: 1.0666666667vw auto 0;
  display: block;
  transition: 0.3s all;
}
@media only screen and (min-width: 768px) {
  .footer-pagetop--link-icon {
    border: none;
    background-color: #fff;
    width: 50px;
    margin: 6.5px 0 0;
  }
}
.footer-container {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0 0;
  background-image: url("/wp-content/themes/danjon/assets/data/webp/common/footer/bg.png.webp");
  background-color: #000;
  margin: -8vw 0 0;
}
@media only screen and (min-width: 768px) {
  .footer-container {
    background-image: url("/wp-content/themes/danjon/assets/data/webp/common/footer/bg_pc.png.webp");
    margin: 0;
  }
}
.footer-inner {
  padding: 13.3333333333vw 0 8.6666666667vw;
}
@media only screen and (min-width: 768px) {
  .footer-inner {
    width: 1100px;
    padding: 85px 0 100px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }
}
.footer-logo {
  width: 68vw;
  margin: 0 auto;
  display: block;
  cursor: pointer;
  transition: 0.3s all;
}
@media only screen and (min-width: 768px) {
  .footer-logo:hover {
    opacity: 0.8;
  }
}
@media only screen and (min-width: 768px) {
  .footer-logo {
    width: 432px;
    flex-basis: 432px;
    margin: 0;
  }
}
.footer-navi {
  margin: 8vw 0 0;
}
@media only screen and (min-width: 768px) {
  .footer-navi {
    flex-basis: 575px;
    margin: 0;
  }
}
@media only screen and (max-width: 768px) {
  .footer-navi--list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }
}
@media only screen and (min-width: 768px) {
  .footer-navi--list {
    display: flex;
    flex-wrap: wrap;
  }
}
.footer-navi--list-item {
  margin: 0.3333333333vw;
}
@media only screen and (max-width: 768px) {
  .footer-navi--list-item {
    flex-basis: 29.3333333333vw;
  }
}
@media only screen and (min-width: 768px) {
  .footer-navi--list-item {
    margin: 0 0 13px 14px;
  }
}
.footer-navi--list-item__link {
  color: #fff;
  transition: 0.3s all;
}
@media only screen and (max-width: 768px) {
  .footer-navi--list-item__link {
    background-color: rgba(255, 255, 255, 0.15);
    width: 100%;
    height: 9.3333333333vw;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }
}
@media only screen and (min-width: 768px) {
  .footer-navi--list-item__link:hover {
    color: #b79345;
  }
}
.footer-navi--list-item__text {
  font-size: 3.2vw;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 900;
  letter-spacing: 0.04em;
}
@media only screen and (min-width: 768px) {
  .footer-navi--list-item__text {
    font-size: 16px;
    line-height: 1;
  }
}
.footer-sns {
  margin: 8.2666666667vw 0 0;
}
@media only screen and (min-width: 768px) {
  .footer-sns {
    margin: 21px 0 0 14px;
    display: flex;
  }
}
.footer-sns--official {
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: 0 0;
  background-size: cover;
  background-image: url("/wp-content/themes/danjon/assets/data/webp/common/footer/official_sns.png.webp");
  width: 48.6666666667vw;
  height: 9.3333333333vw;
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
}
@media only screen and (min-width: 768px) {
  .footer-sns--official {
    background-image: url("/wp-content/themes/danjon/assets/data/webp/common/footer/official_sns_pc.png.webp");
    width: 130px;
    height: 42px;
    margin: 0;
  }
}
.footer-sns--official-item {
  flex-basis: 9.3333333333vw;
  height: 9.3333333333vw;
  margin-left: 3.7333333333vw;
}
@media only screen and (min-width: 768px) {
  .footer-sns--official-item {
    flex-basis: 42px;
    height: 42px;
    margin-left: 20px;
  }
}
.footer-sns--official-item a {
  background-color: #e1e0dc;
  display: block;
  cursor: pointer;
  transition: 0.3s all;
}
.footer-sns--official-item a:hover {
  background-color: #b79345;
}
.footer-sns--share {
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: 0 0;
  background-image: url("/wp-content/themes/danjon/assets/data/webp/common/footer/share_sns.png.webp");
  width: 62.2666666667vw;
  height: 9.3333333333vw;
  margin: 4vw auto 0;
  display: flex;
  justify-content: flex-end;
}
@media only screen and (min-width: 768px) {
  .footer-sns--share {
    background-image: url("/wp-content/themes/danjon/assets/data/webp/common/footer/share_sns_pc.png.webp");
    width: 284px;
    height: 42px;
    margin: 0 0 0 25px;
  }
}
.footer-sns--share-item {
  flex-basis: 9.3333333333vw;
  height: 9.3333333333vw;
  margin-left: 3.7333333333vw;
}
@media only screen and (min-width: 768px) {
  .footer-sns--share-item {
    flex-basis: 42px;
    height: 42px;
    margin-left: 20px;
  }
}
.footer-sns--share-item a {
  background-color: #e1e0dc;
  display: block;
  cursor: pointer;
  transition: 0.3s all;
}
.footer-sns--share-item a:hover {
  background-color: #b79345;
}
.footer-privacy {
  text-align: center;
  margin: 9.6vw 0 0;
}
@media only screen and (min-width: 768px) {
  .footer-privacy {
    text-align: left;
    display: inline-block;
    margin: 25px 0 0 14px;
  }
}
.footer-privacy a {
  border-bottom: #fff 1px solid;
  color: #e1e0dc;
  font-size: 2.9333333333vw;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  letter-spacing: 0.04em;
  padding: 0 5.0666666667vw 2vw 0;
  display: inline-block;
  position: relative;
  transition: 0.3s;
}
@media only screen and (min-width: 768px) {
  .footer-privacy a {
    font-size: 14px;
    padding: 0 27px 7px 0;
  }
  .footer-privacy a:hover {
    border-bottom: #b79345 1px solid;
    color: #b79345;
  }
  .footer-privacy a:hover:after {
    display: block;
    content: "";
    background-image: url("/wp-content/themes/danjon/assets/data/webp/icon/icon_link_blank_o.png.webp");
  }
}
.footer-privacy a:after {
  display: block;
  content: "";
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/wp-content/themes/danjon/assets/data/webp/icon/icon_link_blank_w.png.webp");
  width: 3.4666666667vw;
  height: 3.4666666667vw;
  position: absolute;
  top: 0;
  right: 0;
  transition: 0.3s;
}
@media only screen and (min-width: 768px) {
  .footer-privacy a:after {
    width: 12px;
    height: 12px;
    right: 2.5px;
  }
}
.footer-copyright {
  color: #e1e0dc;
  font-size: 2.6666666667vw;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-align: center;
  margin: 7.3333333333vw 0 0;
}
@media only screen and (min-width: 768px) {
  .footer-copyright {
    display: inline;
    text-align: left;
    font-size: 12px;
    margin: 34px 0 0 140px;
  }
}
@media only screen and (min-width: 768px) {
  .footer.top .footer-pagetop {
    width: 9.8828696925vw;
    height: 9.8828696925vw;
    padding: 1.756954612vw 0 0 3.2942898975vw;
  }
}
@media only screen and (min-width: 768px) {
  .footer.top .footer-pagetop--link-text {
    font-size: 0.7320644217vw;
  }
}
@media only screen and (min-width: 768px) {
  .footer.top .footer-pagetop--link-icon {
    width: 3.6603221083vw;
    margin: 0.4758418741vw 0 0;
  }
}
@media only screen and (min-width: 768px) {
  .footer.top .footer-inner {
    width: auto;
    padding: 6.2225475842vw 10.980966325vw 7.3206442167vw;
  }
}
@media only screen and (min-width: 768px) {
  .footer.top .footer-logo {
    width: 31.6251830161vw;
    flex-basis: 31.6251830161vw;
  }
}
@media only screen and (min-width: 768px) {
  .footer.top .footer-navi {
    flex-basis: 42.093704246vw;
  }
}
@media only screen and (min-width: 768px) {
  .footer.top .footer-navi--list-item {
    margin: 0 0 0.9516837482vw 1.0248901903vw;
  }
}
@media only screen and (min-width: 768px) {
  .footer.top .footer-navi--list-item__text {
    font-size: 1.1713030747vw;
    line-height: 1;
  }
}
@media only screen and (min-width: 768px) {
  .footer.top .footer-sns {
    margin: 1.5373352855vw 0 0 1.0248901903vw;
    display: flex;
  }
}
@media only screen and (min-width: 768px) {
  .footer.top .footer-sns--official {
    width: 9.5168374817vw;
    height: 3.074670571vw;
  }
}
@media only screen and (min-width: 768px) {
  .footer.top .footer-sns--official-item {
    flex-basis: 3.074670571vw;
    height: 3.074670571vw;
    margin-left: 1.4641288433vw;
  }
}
@media only screen and (min-width: 768px) {
  .footer.top .footer-sns--share {
    width: 20.7906295754vw;
    height: 3.074670571vw;
    margin: 0 0 0 1.8301610542vw;
  }
}
@media only screen and (min-width: 768px) {
  .footer.top .footer-sns--share-item {
    flex-basis: 3.074670571vw;
    height: 3.074670571vw;
    margin-left: 1.4641288433vw;
  }
}
@media only screen and (min-width: 768px) {
  .footer.top .footer-privacy {
    margin: 1.8301610542vw 0 0 1.0248901903vw;
  }
}
@media only screen and (min-width: 768px) {
  .footer.top .footer-privacy a {
    font-size: 1.0248901903vw;
    padding: 0 1.9765739385vw 0.5124450952vw 0;
  }
}
.footer.top .footer-privacy a:after {
  display: block;
  content: "";
}
@media only screen and (min-width: 768px) {
  .footer.top .footer-privacy a:after {
    width: 0.878477306vw;
    height: 0.878477306vw;
    right: 0.1830161054vw;
  }
}
@media only screen and (min-width: 768px) {
  .footer.top .footer-copyright {
    font-size: 0.878477306vw;
    margin: 2.4890190337vw 0 0 10.2489019034vw;
  }
}

.top-mv--container {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0 0;
  background-image: url("/wp-content/themes/danjon/assets/data/webp/top/mv/bg.png.webp");
  height: 189.3333333333vw;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .top-mv--container {
    background-image: url("/wp-content/themes/danjon/assets/data/webp/top/mv/bg_pc.png.webp");
    height: 87.4816983895vw;
    display: flex;
  }
  .top-mv--container:before {
    display: block;
    content: "";
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 0 0;
    background-image: url("/wp-content/themes/danjon/assets/data/webp/top/mv/parts2_pc.png.webp");
    width: 100vw;
    height: 112.1522693997vw;
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
  }
}
.top-mv--container:after {
  display: block;
  content: "";
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/wp-content/themes/danjon/assets/data/webp/top/mv/parts.png.webp");
  width: 57.6vw;
  height: 58.1333333333vw;
  position: absolute;
  left: 0;
  bottom: -31.3333333333vw;
  z-index: 2;
  pointer-events: none;
}
@media only screen and (min-width: 768px) {
  .top-mv--container:after {
    background-image: url("/wp-content/themes/danjon/assets/data/webp/top/mv/parts_pc.png.webp");
    width: 65.8857979502vw;
    height: 55.4172767204vw;
    bottom: -27.0863836018vw;
  }
}
@media only screen and (min-width: 768px) {
  .top-mv--container-ui {
    flex-basis: 37.262079063vw;
  }
}
.top-mv--container-kv {
  position: relative;
}
@media only screen and (max-width: 768px) {
  .top-mv--logo {
    background-color: #fff;
    border-right: #000 0.5333333333vw solid;
    border-bottom: #000 0.5333333333vw solid;
    width: 76vw;
    height: 34.6666666667vw;
    padding: 5.6vw 5.6vw 6.1333333333vw 5.3333333333vw;
    position: absolute;
    left: 0;
    bottom: 16.6666666667vw;
    z-index: 2;
  }
}
@media only screen and (min-width: 768px) {
  .top-mv--logo {
    width: 30.4538799414vw;
    margin: 3.9165446559vw auto 0;
    position: relative;
  }
}
.top-mv--bnr {
  background-color: #000;
  position: relative;
  z-index: 2;
  margin: 0 0 6vw;
}
@media only screen and (max-width: 768px) {
  .top-mv--bnr a {
    display: block;
  }
}
@media only screen and (min-width: 768px) {
  .top-mv--bnr {
    width: 29.0995607613vw;
    margin: 3.1478770132vw auto 0;
  }
  .top-mv--bnr a {
    display: block;
    cursor: pointer;
    transition: 0.3s all;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .top-mv--bnr a:hover {
    opacity: 0.8;
  }
}
.top-mv--navi {
  display: none;
}
@media only screen and (min-width: 768px) {
  .top-mv--navi {
    background-color: #282828;
    padding: 5.8565153734vw 3.953147877vw 4.0263543192vw;
    margin: -3.8067349927vw 0 0;
    display: block;
    position: relative;
  }
}
@media only screen and (min-width: 768px) {
  .top-mv--navi-list {
    display: flex;
    flex-wrap: wrap;
  }
}
@media only screen and (min-width: 768px) {
  .top-mv--navi-list__item {
    flex-basis: 14.3850658858vw;
    margin: 0.1464128843vw 0.1464128843vw;
  }
}
@media only screen and (min-width: 768px) {
  .top-mv--navi-list__item-link {
    background-color: #fff;
    clip-path: polygon(3% 1%, 97% 1%, 100% 15%, 100% 85%, 97% 100%, 3% 100%, 0 86%, 0 14%);
    width: 100%;
    height: 3.8799414348vw;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
  }
  .top-mv--navi-list__item-link:hover {
    background-color: #b79345;
  }
}
.top-mv--navi-list__item-link.no-link {
  background-color: #ccc;
  pointer-events: none;
}
.top-mv--navi-list__item-link.no-link .top-mv--navi-list__item-text {
  color: #787878;
  opacity: 0.8;
}
@media only screen and (min-width: 768px) {
  .top-mv--navi-list__item-text {
    color: #000;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 900;
    letter-spacing: 0.04em;
    font-size: 1.4641288433vw;
  }
}
.top-mv--sns {
  display: none;
}
@media only screen and (min-width: 768px) {
  .top-mv--sns {
    margin: 2.3792093704vw 0 0;
    display: flex;
  }
}
@media only screen and (min-width: 768px) {
  .top-mv--sns-official {
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: 0 0;
    background-size: cover;
    background-image: url("/wp-content/themes/danjon/assets/data/webp/top/mv/official_sns_pc.png.webp");
    width: 19.7657393851vw;
    height: 4.0263543192vw;
    margin: 0 auto;
    display: flex;
    justify-content: flex-end;
  }
}
@media only screen and (min-width: 768px) {
  .top-mv--sns-official__item {
    flex-basis: 4.0263543192vw;
    height: 4.0263543192vw;
    margin-left: 1.8667642753vw;
  }
  .top-mv--sns-official__item:hover a {
    background-color: #b79345;
  }
}
.top-mv--sns-official__item a {
  background-color: #fff;
  display: block;
  cursor: pointer;
  transition: 0.3s all;
}
.top-mv--slide {
  width: 90.9333333333vw;
  height: 128.5333333333vw;
  box-sizing: content-box;
  overflow: visible;
}
@media only screen and (min-width: 768px) {
  .top-mv--slide {
    width: 59.8096632504vw;
    height: 84.0409956076vw;
  }
}
.top-mv--slide:before {
  display: block;
  content: "";
  background-color: #000;
  width: 90.9333333333vw;
  height: 128.5333333333vw;
  position: absolute;
  top: 0;
  left: 0;
}
@media only screen and (min-width: 768px) {
  .top-mv--slide:before {
    width: 59.8096632504vw;
    height: 84.0409956076vw;
    top: 0.0732064422vw;
  }
}
.top-mv--slide__item {
  border: #000 0.2666666667vw solid;
  width: 90.4vw !important;
  height: 127.7333333333vw !important;
  overflow: hidden;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .top-mv--slide__item {
    border-top: none;
    border-right: #000 1, 2732 solid;
    border-bottom: #000 1, 2732 solid;
    border-left: #000 1, 2732 solid;
    width: 59.5168374817vw !important;
    height: 83.6017569546vw !important;
  }
}
.top-mv--slide__item img {
  object-fit: cover;
}
.top-mv--slide__change {
  position: absolute;
}
@media only screen and (max-width: 768px) {
  .top-mv--slide__change {
    display: flex;
    justify-content: end;
    right: -4.2666666667vw;
    bottom: -34.6666666667vw;
  }
}
@media only screen and (min-width: 768px) {
  .top-mv--slide__change {
    left: -19.7657393851vw;
    bottom: 10.505124451vw;
  }
}
.top-mv--slide__change-tit {
  padding: 0 0 2.6666666667vw;
  margin: 0 0 0 2.1333333333vw;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .top-mv--slide__change-tit {
    order: 2;
  }
}
@media only screen and (min-width: 768px) {
  .top-mv--slide__change-tit {
    padding: 0 0 1.2811127379vw;
    margin: 0 0 1.2445095168vw;
  }
}
.top-mv--slide__change-tit-bar {
  background: #000;
  width: 100%;
  height: 1.0666666667vw;
  position: absolute;
  bottom: 0;
}
@media only screen and (min-width: 768px) {
  .top-mv--slide__change-tit-bar {
    width: 15.9224011713vw;
    height: 0.2562225476vw;
    right: 0;
  }
}
.top-mv--slide__change-tit-progress {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: #b79345;
}
.top-mv--slide__change-tit span {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #282828;
  font-size: 3.2vw;
  padding: 0 1.6vw 0 5.3333333333vw;
  display: inline-block;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .top-mv--slide__change-tit span {
    font-size: 1.756954612vw;
    padding: 0 1.0980966325vw 0 3.8433382138vw;
  }
}
.top-mv--slide__change-tit span:before {
  display: block;
  content: "";
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/wp-content/themes/danjon/assets/data/webp/icon/icon_change.png.webp");
  width: 3.6vw;
  height: 3.6vw;
  position: absolute;
  top: 0.2666666667vw;
  left: 0;
}
@media only screen and (min-width: 768px) {
  .top-mv--slide__change-tit span:before {
    width: 2.5622254758vw;
    height: 2.5622254758vw;
    top: 0.1464128843vw;
  }
}
.top-mv--slide__change-pagenation {
  position: static;
}
@media only screen and (max-width: 768px) {
  .top-mv--slide__change-pagenation {
    order: 1;
  }
}
@media only screen and (min-width: 768px) {
  .top-mv--slide__change-pagenation {
    text-align: right;
    padding: 0 1.4641288433vw 0 0;
  }
}

.top-mv + .top-news .top-news--heading {
  margin: -13.3333333333vw 0 0;
}
@media only screen and (min-width: 768px) {
  .top-mv + .top-news .top-news--heading {
    margin: -2.9282576867vw 0 0;
  }
}

.top-movie--slide {
  background-color: #282828;
  padding: 0.2666666667vw 0 12.2666666667vw;
  position: relative;
  z-index: 2;
}
@media only screen and (min-width: 768px) {
  .top-movie--slide {
    padding: 0.1464128843vw 0 4.2459736457vw;
  }
}
.top-movie--slide-wrap {
  overflow: visible;
}
.top-movie--slide-item {
  height: 56.2666666667vw !important;
}
@media only screen and (min-width: 768px) {
  .top-movie--slide-item {
    height: 23.1332357247vw !important;
  }
}
.top-movie--slide-item__link {
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: 0 0;
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  transition: 0.3s all;
}
.top-movie--slide-item__link:before {
  display: block;
  content: "";
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-size: 0.8vw;
  background-repeat: repeat;
  background-image: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: 0.3s all;
}
@media only screen and (min-width: 768px) {
  .top-movie--slide-item__link:before {
    background-size: 6px;
    background-color: rgba(0, 0, 0, 0.15);
  }
}
.top-movie--slide-item__link:after {
  display: block;
  content: "";
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/wp-content/themes/danjon/assets/data/webp/ui/btn_play.png.webp");
  width: 16.8vw;
  height: 16.8vw;
  position: absolute;
  right: 3.7333333333vw;
  bottom: 5.3333333333vw;
}
@media only screen and (min-width: 768px) {
  .top-movie--slide-item__link:after {
    width: 5.4904831625vw;
    height: 5.4904831625vw;
    right: 1.6837481698vw;
    bottom: 1.4641288433vw;
  }
}
.top-movie--slide-item__title {
  width: 78.1333333333vw;
  padding: 0 0 0 5.3333333333vw;
  position: absolute;
  bottom: 5.3333333333vw;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  .top-movie--slide-item__title {
    width: 28.5505124451vw;
    padding: 0 0 0 2.196193265vw;
    bottom: 1.4641288433vw;
  }
}
.top-movie--slide-item__title-ver {
  background-color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 900;
  letter-spacing: 0.04em;
  font-size: 4vw;
  color: #fff;
  text-align: center;
  height: 5.6vw;
  padding: 0 2vw;
  margin-right: 1.6vw;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
@media only screen and (min-width: 768px) {
  .top-movie--slide-item__title-ver {
    font-size: 1.5373352855vw;
    height: 2.9282576867vw;
    padding: 0 0.5490483163vw;
    margin-right: 0.7320644217vw;
  }
}
.top-movie--slide-item__title-text {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 900;
  letter-spacing: 0.04em;
  font-size: 4vw;
  text-shadow: 0px 0px 1.3333333333vw white;
  color: #000;
}
@media only screen and (min-width: 768px) {
  .top-movie--slide-item__title-text {
    font-size: 1.8301610542vw;
    text-shadow: 0px 0px 0.7320644217vw white;
  }
}
@media only screen and (min-width: 768px) {
  .top-movie--slide-item.swiper-slide-active .top-movie--slide-item__link:before {
    display: block;
    content: "";
    background-color: transparent;
  }
  .top-movie--slide-item.swiper-slide-active .top-movie--slide-item__link:hover:before {
    background-image: url("/wp-content/themes/danjon/assets/data/webp/movie/filter_hov.png.webp");
  }
}
@media only screen and (max-width: 768px) {
  .top-movie--slide-ui {
    width: calc(100% - 36.2666666667vw);
    position: absolute;
    left: 1.3333333333vw;
    bottom: 1.0666666667vw;
  }
}
@media only screen and (max-width: 768px) {
  .top-movie--slide-ui__inner {
    display: flex;
    align-items: center;
  }
}
.top-movie--slide-btn {
  width: 37.6vw;
  height: 10.4vw;
  padding: 0 0 0 7.3333333333vw;
  background-color: #fff;
  position: relative;
  overflow: hidden;
  display: block;
  transition: 0.3s all;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 0.9333333333vw;
  bottom: 0.9333333333vw;
  z-index: 11;
}
.top-movie--slide-btn span {
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 3.7333333333vw;
}
@media only screen and (min-width: 768px) {
  .top-movie--slide-btn span {
    font-size: 1.4641288433vw;
  }
}
.top-movie--slide-btn:before {
  display: block;
  content: "";
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0 0;
  background-image: url("/wp-content/themes/danjon/assets/data/webp/common/btn_parts1.png.webp");
  width: 7.6vw;
  height: 7.4666666667vw;
  position: absolute;
  top: -1px;
  left: -1px;
}
@media only screen and (min-width: 768px) {
  .top-movie--slide-btn:before {
    background-image: url("/wp-content/themes/danjon/assets/data/webp/common/btn_parts1_pc.png.webp");
    width: 2.196193265vw;
    height: 2.1229868228vw;
  }
}
@media only screen and (min-width: 768px) {
  .top-movie--slide-btn:hover {
    background-color: #b79345;
  }
  .top-movie--slide-btn:hover span {
    color: #fff;
  }
}
@media only screen and (min-width: 768px) {
  .top-movie--slide-btn {
    width: 14.494875549vw;
    height: 2.8550512445vw;
    padding: 0 0 0 2.196193265vw;
    right: 0.5856515373vw;
    bottom: 0.7320644217vw;
  }
}

.top-news--heading {
  text-align: center;
  padding: 9.6vw 0 8.2666666667vw;
  position: relative;
  z-index: 2;
}
@media only screen and (min-width: 768px) {
  .top-news--heading {
    padding: 4.39238653vw 0 4.39238653vw;
  }
}
.top-news--heading-main {
  text-align: center;
  height: 10vw;
}
@media only screen and (min-width: 768px) {
  .top-news--heading-main {
    height: 4.7584187408vw;
  }
}
.top-news--heading-main img {
  width: auto;
  max-width: none;
  height: 100%;
  max-height: 100%;
}
.top-news--heading-sub {
  text-align: center;
  height: 5.0666666667vw;
  margin: 0.6666666667vw 0 0;
}
@media only screen and (min-width: 768px) {
  .top-news--heading-sub {
    height: 2.0497803807vw;
    margin: 0.439238653vw 0 0;
  }
}
.top-news--heading-sub img {
  width: auto;
  max-width: none;
  height: 100%;
  max-height: 100%;
}
.top-news--contents {
  padding: 0 0 10.6666666667vw;
  position: relative;
  z-index: 2;
}
@media only screen and (min-width: 768px) {
  .top-news--contents {
    padding: 0 0 4.2093704246vw;
  }
}
.top-news--contents:before {
  display: block;
  content: "";
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: 0 0;
  background-position: center;
  background-image: url("/wp-content/themes/danjon/assets/data/webp/top/news/bg.png.webp");
  width: 100%;
  height: 76.8vw;
  position: absolute;
  top: 10.6666666667vw;
  left: 0;
}
@media only screen and (min-width: 768px) {
  .top-news--contents:before {
    background-image: url("/wp-content/themes/danjon/assets/data/webp/top/news/bg_pc.png.webp");
    height: 22.9868228404vw;
    top: 2.635431918vw;
  }
}
.top-news--contents-btn {
  width: 52vw;
  height: 12.5333333333vw;
  margin: 6.2666666667vw auto 0;
  position: relative;
}
.top-news--contents-btn:before {
  display: block;
  content: "";
  background-color: #000;
  position: absolute;
  top: 0;
  left: 0;
}
.top-news--contents-btn a {
  background-color: #838383;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: 0.3s all;
}
.top-news--contents-btn a:before, .top-news--contents-btn a:after {
  display: block;
  content: "";
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: 0 0;
  position: absolute;
  top: 0;
  transition: 0.3s all;
}
.top-news--contents-btn a:before {
  display: block;
  content: "";
  background-image: url("/wp-content/themes/danjon/assets/data/webp/common/btn_parts2_l.png.webp");
  left: 0;
}
@media only screen and (min-width: 768px) {
  .top-news--contents-btn a:before {
    background-image: url("/wp-content/themes/danjon/assets/data/webp/common/btn_parts2_l_pc.png.webp");
  }
}
.top-news--contents-btn a:after {
  display: block;
  content: "";
  background-image: url("/wp-content/themes/danjon/assets/data/webp/common/btn_parts2_r.png.webp");
  right: 0;
}
@media only screen and (min-width: 768px) {
  .top-news--contents-btn a:after {
    background-image: url("/wp-content/themes/danjon/assets/data/webp/common/btn_parts2_r_pc.png.webp");
  }
}
@media only screen and (min-width: 768px) {
  .top-news--contents-btn a:hover {
    background-color: #b79345;
  }
  .top-news--contents-btn a:hover:before {
    display: block;
    content: "";
    background-image: url("/wp-content/themes/danjon/assets/data/webp/common/btn_parts2_l_pc_hov.png.webp");
  }
  .top-news--contents-btn a:hover:after {
    display: block;
    content: "";
    background-image: url("/wp-content/themes/danjon/assets/data/webp/common/btn_parts2_r_pc_hov.png.webp");
  }
}
.top-news--contents-btn span {
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 900;
  letter-spacing: 0.04em;
  position: relative;
}
.top-news--contents-btn span:after {
  display: block;
  content: "";
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/wp-content/themes/danjon/assets/data/webp/icon/icon_arw_right.png.webp");
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
}
@media only screen and (min-width: 768px) {
  .top-news--contents-btn {
    width: 19.2532942899vw;
    height: 4.5387994143vw;
    margin: 1.8301610542vw auto 0;
  }
}
.top-news--contents-btn:before {
  display: block;
  content: "";
  width: 52vw;
  height: 12.5333333333vw;
}
@media only screen and (min-width: 768px) {
  .top-news--contents-btn:before {
    width: 19.2532942899vw;
    height: 4.5387994143vw;
  }
}
.top-news--contents-btn__link {
  width: 51.0666666667vw;
  height: 11.6vw;
}
@media only screen and (min-width: 768px) {
  .top-news--contents-btn__link {
    width: 18.9604685212vw;
    height: 4.2459736457vw;
  }
}
.top-news--contents-btn__link:before, .top-news--contents-btn__link:after {
  display: block;
  content: "";
  width: 12vw;
  height: 11.6vw;
}
@media only screen and (min-width: 768px) {
  .top-news--contents-btn__link:before, .top-news--contents-btn__link:after {
    width: 4.39238653vw;
    height: 4.2459736457vw;
  }
}
.top-news--contents-btn__text {
  font-size: 3.6vw;
  padding: 0 6.6666666667vw 0 3.6vw;
}
@media only screen and (min-width: 768px) {
  .top-news--contents-btn__text {
    font-size: 1.317715959vw;
    padding: 0 2.2693997072vw 0 1.0980966325vw;
  }
}
.top-news--contents-btn__text:after {
  display: block;
  content: "";
  width: 3.0666666667vw;
  height: 3.4666666667vw;
}
@media only screen and (min-width: 768px) {
  .top-news--contents-btn__text:after {
    width: 1.1713030747vw;
    height: 1.317715959vw;
  }
}
.top-news--list {
  width: 89.3333333333vw;
  margin: 0 auto;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .top-news--list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }
}
.top-news--list-item {
  position: relative;
}
@media only screen and (max-width: 768px) {
  .top-news--list-item:not(:first-child) {
    margin-top: 3.3333333333vw;
  }
}
@media only screen and (min-width: 768px) {
  .top-news--list-item {
    flex-basis: 20.1317715959vw;
    margin: 0 0.9150805271vw;
  }
}
.top-news--list-item:before {
  display: block;
  content: "";
  background-color: #000;
  width: 88.6666666667vw;
  height: 22vw;
  position: absolute;
  top: 0.6666666667vw;
  left: 0.6666666667vw;
}
@media only screen and (min-width: 768px) {
  .top-news--list-item:before {
    width: 19.9487554905vw;
    height: 21.2298682284vw;
    position: absolute;
    top: 0.1830161054vw;
    left: 0.1830161054vw;
  }
}
.top-news--list-item__link {
  background-color: #f0f0f0;
  width: 88.6666666667vw;
  height: 22vw;
  display: block;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .top-news--list-item__link {
    display: flex;
  }
}
@media only screen and (min-width: 768px) {
  .top-news--list-item__link {
    width: 19.9487554905vw;
    height: 21.2298682284vw;
  }
  .top-news--list-item__link:hover .top-news--list-item__thumb:after {
    display: block;
    content: "";
    opacity: 1;
  }
}
.top-news--list-item__thumb {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0 0;
  background-position: center;
  background-image: url("/wp-content/themes/danjon/assets/data/webp/news/thumb.png.webp");
  transition: 0.3s;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .top-news--list-item__thumb {
    width: 38.9333333333vw;
    flex-basis: 38.9333333333vw;
    height: 22vw;
  }
}
@media only screen and (min-width: 768px) {
  .top-news--list-item__thumb {
    width: 19.9487554905vw;
    height: 11.2005856515vw;
  }
  .top-news--list-item__thumb:after {
    display: block;
    content: "";
    background-color: rgba(255, 255, 255, 0.5);
    width: 100%;
    height: 100%;
    transition: 0.3s;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
  }
}
.top-news--list-item__detail {
  padding: 2.6666666667vw 2.6666666667vw;
}
@media only screen and (max-width: 768px) {
  .top-news--list-item__detail {
    flex-basis: calc(100% - 38.9333333333vw);
  }
}
@media only screen and (min-width: 768px) {
  .top-news--list-item__detail {
    padding: 0.9150805271vw 1.0980966325vw 1.6471449488vw;
  }
}
.top-news--list-item__detail-date {
  color: #b79345;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 3.2vw;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 0.9333333333vw;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .top-news--list-item__detail-date {
    font-size: 1.4641288433vw;
    margin: 0 0 0.3660322108vw;
  }
}
.top-news--list-item__detail-date.new:after {
  display: block;
  content: "";
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/wp-content/themes/danjon/assets/data/webp/icon/icon_new.png.webp");
  width: 8vw;
  height: 3.2vw;
  margin-left: 2.6666666667vw;
}
@media only screen and (min-width: 768px) {
  .top-news--list-item__detail-date.new:after {
    width: 3.6603221083vw;
    height: 1.4641288433vw;
    margin-left: 0.7320644217vw;
  }
}
.top-news--list-item__detail-text {
  color: #282828;
  font-size: 3.2vw;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  .top-news--list-item__detail-text {
    font-size: 1.1713030747vw;
    line-height: 1.5;
  }
}

.top-parallax {
  margin: -1px 0;
}
.top-parallax--inner {
  width: 100%;
  position: relative;
  overflow: hidden;
}
@media only screen and (max-width: 768px) {
  .top-parallax--inner {
    height: -webkit-fill-available;
    height: 100vh;
  }
}
@media only screen and (min-width: 768px) {
  .top-parallax--inner {
    height: 100vh;
  }
}
.top-parallax--parts {
  background-repeat: repeat-x;
  background-position: center 0;
  background-size: auto 34.6666666667vw;
  width: 100%;
  height: 34.6666666667vw;
  position: absolute;
  left: 0;
  z-index: 5;
}
@media only screen and (min-width: 768px) {
  .top-parallax--parts {
    background-size: auto 12.8111273792vw;
    height: 12.8111273792vw;
  }
}
.top-parallax--parts-top {
  background-image: url("/wp-content/themes/danjon/assets/data/webp/top/contents_mask_top.png.webp");
  top: 0;
}
@media only screen and (min-width: 768px) {
  .top-parallax--parts-top {
    background-image: url("/wp-content/themes/danjon/assets/data/webp/top/contents_mask_top_pc.png.webp");
  }
}
.top-parallax--parts-bottom {
  background-image: url("/wp-content/themes/danjon/assets/data/webp/top/contents_mask_bottom.png.webp");
  bottom: 0;
  pointer-events: none;
}
@media only screen and (min-width: 768px) {
  .top-parallax--parts-bottom {
    background-image: url("/wp-content/themes/danjon/assets/data/webp/top/contents_mask_bottom_pc.png.webp");
  }
}
.top-parallax--status {
  background-color: rgba(0, 0, 0, 0.75);
  width: 100%;
  padding: 4.2666666667vw 14.4vw;
  position: absolute;
  bottom: 7.5%;
  left: 0;
  z-index: 6;
}
@media only screen and (min-width: 768px) {
  .top-parallax--status {
    border-radius: 2.196193265vw;
    width: 4.39238653vw;
    height: 16.1054172767vw;
    padding: 2.7818448023vw 1.317715959vw;
    top: 50%;
    right: 3.4773060029vw;
    bottom: auto;
    left: auto;
    transform: translateY(-50%);
  }
}
.top-parallax--status:has(.top-parallax--status-list__pos:nth-of-type(2)):has(.top-parallax--status-list__pos.js--current:nth-of-type(2)) .top-parallax--status-bar span {
  transform: scale(1, 1.5);
}
@media only screen and (min-width: 768px) {
  .top-parallax--status:has(.top-parallax--status-list__pos:nth-of-type(2)):has(.top-parallax--status-list__pos.js--current:nth-of-type(2)) .top-parallax--status-bar span {
    transform: scale(1.5, 1);
  }
}
.top-parallax--status:has(.top-parallax--status-list__pos:nth-of-type(3)):has(.top-parallax--status-list__pos.js--current:nth-of-type(2)) .top-parallax--status-bar span {
  transform: scale(0.5, 1.5);
}
@media only screen and (min-width: 768px) {
  .top-parallax--status:has(.top-parallax--status-list__pos:nth-of-type(3)):has(.top-parallax--status-list__pos.js--current:nth-of-type(2)) .top-parallax--status-bar span {
    transform: scale(1.5, 0.5);
  }
}
.top-parallax--status:has(.top-parallax--status-list__pos:nth-of-type(3)):has(.top-parallax--status-list__pos.js--current:nth-of-type(3)) .top-parallax--status-bar span {
  transform: scale(1, 1.5);
}
@media only screen and (min-width: 768px) {
  .top-parallax--status:has(.top-parallax--status-list__pos:nth-of-type(3)):has(.top-parallax--status-list__pos.js--current:nth-of-type(3)) .top-parallax--status-bar span {
    transform: scale(1.5, 1);
  }
}
.top-parallax--status-bar {
  background-color: #fff;
  width: calc(100% - 28.8vw);
  height: 1.3333333333vw;
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media only screen and (min-width: 768px) {
  .top-parallax--status-bar {
    width: 0.2928257687vw;
    height: calc(100% - 5.5636896047vw);
  }
}
.top-parallax--status-bar span {
  background-color: #b79345;
  width: 100%;
  height: 100%;
  display: block;
  transition: transform 200ms;
  will-change: transform;
  transform: scale(0.1, 1.5);
  transform-origin: 0% 50%;
}
@media only screen and (min-width: 768px) {
  .top-parallax--status-bar span {
    transform-origin: 50% 0%;
    transform: scale(1.5, 0.15);
  }
}
.top-parallax--status-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media only screen and (min-width: 768px) {
  .top-parallax--status-list {
    height: 100%;
    flex-direction: column;
  }
}
.top-parallax--status-list__pos {
  border: 0.9333333333vw solid #fff;
  background-color: transparent;
  width: 9.0666666667vw;
  flex-basis: 9.0666666667vw;
  height: 9.0666666667vw;
  position: relative;
  z-index: 2;
  cursor: pointer;
}
.top-parallax--status-list__pos.js--current {
  transition: all 150ms;
  transition-delay: 100ms;
  border-color: #b79345;
}
.top-parallax--status-list__pos.js--current:before {
  display: block;
  content: "";
  transition: all 150ms;
  transition-delay: 100ms;
  background-color: #b79345;
}
@media only screen and (min-width: 768px) {
  .top-parallax--status-list__pos {
    border: 0.1464128843vw solid #fff;
    width: 1.9033674963vw;
    flex-basis: 1.9033674963vw;
    height: 1.9033674963vw;
  }
}
.top-parallax--status-list__pos:before {
  display: block;
  content: "";
  background-color: #fff;
  width: 6.1333333333vw;
  height: 6.1333333333vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media only screen and (min-width: 768px) {
  .top-parallax--status-list__pos:before {
    width: 1.1713030747vw;
    height: 1.1713030747vw;
  }
}

.top-intro {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 3;
  pointer-events: none;
}
.top-intro--inner {
  width: 100%;
  height: 100%;
  position: relative;
}
.top-intro--layer1 {
  background-image: url("/wp-content/themes/danjon/assets/data/webp/top/intro/bg_layer_1.png.webp");
  background-repeat: no-repeat;
  background-position: center 48%;
  background-size: 100% 100vh;
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  will-change: background-size, opacity;
}
@media only screen and (min-width: 768px) {
  .top-intro--layer1 {
    background-image: url("/wp-content/themes/danjon/assets/data/webp/top/intro/bg_layer_1_pc.png.webp");
    background-size: auto 100vh;
  }
  .top-intro--layer1:before {
    display: block;
    content: "";
    background-color: #908879;
    width: calc(50vw - 82.5vh);
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
  }
  .top-intro--layer1:after {
    display: block;
    content: "";
    background-color: #908879;
    width: calc(50vw - 82.5vh);
    height: 100vh;
    position: absolute;
    top: 0;
    right: 0;
  }
}
.top-intro--layer2 {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  will-change: opacity;
  z-index: 2;
}
@media only screen and (min-width: 768px) {
  .top-intro--layer2 {
    height: calc(100vh - (9.8828696925vw * 2));
    max-height: 500px;
    top: 50%;
    transform: translateY(-50%);
  }
}
.top-intro--layer2-contents {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media only screen and (min-width: 768px) {
  .top-intro--layer2-contents {
    top: 47.5%;
  }
}
.top-intro--layer2-contents__tit {
  height: 9.6vw;
  text-align: center;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
@media only screen and (min-width: 768px) {
  .top-intro--layer2-contents__tit {
    height: 3.6603221083vw;
  }
}
.top-intro--layer2-contents__tit img {
  width: auto;
  max-width: none;
  height: 100%;
  max-height: 100%;
}
.top-intro--layer2-contents__detail {
  border-top: 0.8vw solid #000;
  border-bottom: 0.8vw solid #000;
  background-color: rgba(255, 255, 255, 0.9);
  width: 100%;
  padding: 10.6666666667vw 8.6666666667vw 13.3333333333vw;
  margin: -4.6666666667vw 0 0;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .top-intro--layer2-contents__detail {
    border: 0.2928257687vw solid #000;
    width: 50%;
    max-height: calc(100% - 2.0131771596vw);
    padding: 5.3074670571vh 4.39238653vh 8.4187408492vh;
    margin: -1.6471449488vw auto 0;
  }
}
.top-intro--layer2-contents__detail:after {
  display: block;
  content: "";
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-size: auto 100%;
  background-image: url("/wp-content/themes/danjon/assets/data/webp/top/intro/deco_parts.png.webp");
  width: 29.8666666667vw;
  height: 11.4666666667vw;
  position: absolute;
  right: 5.3333333333vw;
  bottom: -0.2666666667vw;
}
@media only screen and (min-width: 768px) {
  .top-intro--layer2-contents__detail:after {
    width: 12.298682284vw;
    height: 4.7584187408vw;
    right: 0.9150805271vw;
    bottom: -0.0732064422vw;
  }
}
.top-intro--layer2-contents__detail-text {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #000;
  font-size: 3.7333333333vw;
  line-height: 1.4285714286;
}
@media only screen and (min-width: 768px) {
  .top-intro--layer2-contents__detail-text {
    text-align: center;
    font-size: 2.3426061493vh;
    line-height: 1.625;
  }
}
.top-intro--layer2-contents__detail-lead {
  text-align: center;
  margin: 4vw auto 0;
  position: relative;
  z-index: 2;
}
@media only screen and (min-width: 768px) {
  .top-intro--layer2-contents__detail-lead {
    max-height: 200px;
    padding: 0 2.5622254758vh;
    margin: 1.8301610542vh 0 0;
  }
}
.top-intro--layer3 {
  background-image: url("/wp-content/themes/danjon/assets/data/webp/top/intro/bg_layer_3.png.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 160%;
  height: 100vh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  will-change: background-size, opacity;
}
@media only screen and (min-width: 768px) {
  .top-intro--layer3 {
    background-image: url("/wp-content/themes/danjon/assets/data/webp/top/intro/bg_layer_3_pc.png.webp");
    background-size: contain;
    width: 100%;
  }
}

.top-chara {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 2;
  pointer-events: auto;
}
.top-chara--inner {
  width: 100%;
  height: 100%;
  position: relative;
}
.top-chara--bg {
  background-color: #e5e8d3;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}
@media only screen and (max-width: 768px) {
  .top-chara--detail-on {
    display: none;
  }
}
@media only screen and (min-width: 768px) {
  .top-chara--detail-on {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    opacity: 0;
    pointer-events: auto;
  }
  .top-chara--detail-on:hover {
    opacity: 1;
    transition: opacity 300ms;
  }
}
.top-chara--layer1 {
  background-image: url("/wp-content/themes/danjon/assets/data/webp/top/chara/bg_layer_1.png.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100vh;
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  will-change: background-size;
}
@media only screen and (min-width: 768px) {
  .top-chara--layer1 {
    background-image: url("/wp-content/themes/danjon/assets/data/webp/top/chara/bg_layer_1_pc.png.webp");
    background-size: auto 100vh;
  }
}
.top-chara--layer2 {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}
.top-chara--layer2-contents {
  width: 100%;
  height: 100%;
  text-align: center;
  position: relative;
}
.top-chara--layer2-contents__detail {
  width: 100%;
  height: calc(100% - (34.6666666667vw * 2));
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 55.5%;
}
@media only screen and (min-width: 768px) {
  .top-chara--layer2-contents__detail {
    height: calc(100% - 25.6222547584vh);
  }
}
.top-chara--layer2-contents__detail-heading {
  position: relative;
  z-index: 2;
  pointer-events: none;
}
.top-chara--layer2-contents__detail-heading-main {
  text-align: center;
  display: inline-block;
  margin: 0 auto;
  height: 10.5333333333vw;
}
@media only screen and (min-width: 768px) {
  .top-chara--layer2-contents__detail-heading-main {
    height: 4.7584187408vw;
  }
}
.top-chara--layer2-contents__detail-heading-main img {
  width: auto;
  max-width: none;
  height: 100%;
  max-height: 100%;
}
.top-chara--layer2-contents__detail-heading-sub {
  text-align: center;
  height: 5.3333333333vw;
  margin: 0;
}
@media only screen and (min-width: 768px) {
  .top-chara--layer2-contents__detail-heading-sub {
    height: 2.0497803807vw;
    margin: 0.439238653vw 0 0;
  }
}
.top-chara--layer2-contents__detail-heading-sub img {
  width: auto;
  max-width: none;
  height: 100%;
  max-height: 100%;
}
.top-chara--layer2-contents__detail-hidden {
  width: 70.6666666667vw;
  height: 68.5333333333vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 48.5%;
  pointer-events: none;
}
@media only screen and (min-width: 768px) {
  .top-chara--layer2-contents__detail-hidden {
    width: 38.7994143485vh;
    height: 38.2503660322vh;
    top: 44.5%;
    left: 50%;
    transform: translate3d(-50%, -20.4978038067vh, 0);
  }
}
.top-chara--layer2-contents__detail-hidden-on {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
.top-chara--layer2-contents__detail-hidden-wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}
@media only screen and (min-width: 768px) {
  .top-chara--layer2-contents__detail-hidden-wrap {
    top: 7.3206442167vh;
  }
}
.top-chara--layer2-contents__detail-hidden-inner {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  transform-origin: 50% 27vh;
  will-change: transform, filter;
  pointer-events: none;
}
@media only screen and (min-width: 768px) {
  .top-chara--layer2-contents__detail-hidden-inner {
    transform-origin: 50% 27vh;
  }
}
.top-chara--layer2-contents__detail-btn {
  width: 52vw;
  height: 12.5333333333vw;
  position: relative;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 82.5%;
}
.top-chara--layer2-contents__detail-btn:before {
  display: block;
  content: "";
  background-color: #000;
  position: absolute;
  top: 0;
  left: 0;
}
.top-chara--layer2-contents__detail-btn a {
  background-color: #838383;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: 0.3s all;
}
.top-chara--layer2-contents__detail-btn a:before, .top-chara--layer2-contents__detail-btn a:after {
  display: block;
  content: "";
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: 0 0;
  position: absolute;
  top: 0;
  transition: 0.3s all;
}
.top-chara--layer2-contents__detail-btn a:before {
  display: block;
  content: "";
  background-image: url("/wp-content/themes/danjon/assets/data/webp/common/btn_parts2_l.png.webp");
  left: 0;
}
@media only screen and (min-width: 768px) {
  .top-chara--layer2-contents__detail-btn a:before {
    background-image: url("/wp-content/themes/danjon/assets/data/webp/common/btn_parts2_l_pc.png.webp");
  }
}
.top-chara--layer2-contents__detail-btn a:after {
  display: block;
  content: "";
  background-image: url("/wp-content/themes/danjon/assets/data/webp/common/btn_parts2_r.png.webp");
  right: 0;
}
@media only screen and (min-width: 768px) {
  .top-chara--layer2-contents__detail-btn a:after {
    background-image: url("/wp-content/themes/danjon/assets/data/webp/common/btn_parts2_r_pc.png.webp");
  }
}
@media only screen and (min-width: 768px) {
  .top-chara--layer2-contents__detail-btn a:hover {
    background-color: #b79345;
  }
  .top-chara--layer2-contents__detail-btn a:hover:before {
    display: block;
    content: "";
    background-image: url("/wp-content/themes/danjon/assets/data/webp/common/btn_parts2_l_pc_hov.png.webp");
  }
  .top-chara--layer2-contents__detail-btn a:hover:after {
    display: block;
    content: "";
    background-image: url("/wp-content/themes/danjon/assets/data/webp/common/btn_parts2_r_pc_hov.png.webp");
  }
}
.top-chara--layer2-contents__detail-btn span {
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 900;
  letter-spacing: 0.04em;
  position: relative;
}
.top-chara--layer2-contents__detail-btn span:after {
  display: block;
  content: "";
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/wp-content/themes/danjon/assets/data/webp/icon/icon_arw_right.png.webp");
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
}
@media only screen and (min-width: 768px) {
  .top-chara--layer2-contents__detail-btn {
    width: 19.2532942899vw;
    height: 4.5387994143vw;
    top: 72.5%;
  }
}
.top-chara--layer2-contents__detail-btn:before {
  display: block;
  content: "";
  width: 52vw;
  height: 12.5333333333vw;
}
@media only screen and (min-width: 768px) {
  .top-chara--layer2-contents__detail-btn:before {
    width: 19.2532942899vw;
    height: 4.5387994143vw;
  }
}
.top-chara--layer2-contents__detail-btn-link {
  width: 51.0666666667vw;
  height: 11.6vw;
}
@media only screen and (min-width: 768px) {
  .top-chara--layer2-contents__detail-btn-link {
    width: 18.9604685212vw;
    height: 4.2459736457vw;
  }
}
.top-chara--layer2-contents__detail-btn-link:before, .top-chara--layer2-contents__detail-btn-link:after {
  display: block;
  content: "";
  width: 12vw;
  height: 11.6vw;
}
@media only screen and (min-width: 768px) {
  .top-chara--layer2-contents__detail-btn-link:before, .top-chara--layer2-contents__detail-btn-link:after {
    width: 4.39238653vw;
    height: 4.2459736457vw;
  }
}
.top-chara--layer2-contents__detail-btn-text {
  font-size: 3.6vw;
  padding: 0 6.6666666667vw 0 3.6vw;
}
@media only screen and (min-width: 768px) {
  .top-chara--layer2-contents__detail-btn-text {
    font-size: 1.317715959vw;
    padding: 0 2.2693997072vw 0 1.0980966325vw;
  }
}
.top-chara--layer2-contents__detail-btn-text:after {
  display: block;
  content: "";
  width: 3.0666666667vw;
  height: 3.4666666667vw;
}
@media only screen and (min-width: 768px) {
  .top-chara--layer2-contents__detail-btn-text:after {
    width: 1.1713030747vw;
    height: 1.317715959vw;
  }
}
.top-chara--layer2-contents__detail-hidden {
  width: 70.6666666667vw;
  height: 68.5333333333vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 48.5%;
  pointer-events: none;
}
@media only screen and (min-width: 768px) {
  .top-chara--layer2-contents__detail-hidden {
    width: 38.7994143485vh;
    height: 38.2503660322vh;
    top: 44.5%;
    left: 50%;
    transform: translate3d(-50%, -20.4978038067vh, 0);
  }
}
.top-chara--layer2-contents__detail-hidden img {
  transform: translate3d(0, 0, 0);
}
.top-chara--layer2-contents__detail-hidden-on {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
.top-chara--layer2-contents__detail-hidden-wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}
@media only screen and (min-width: 768px) {
  .top-chara--layer2-contents__detail-hidden-wrap {
    top: 7.3206442167vh;
  }
}
.top-chara--layer2-contents__detail-hidden-inner {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  transform-origin: 50% 27vh;
  will-change: transform, filter;
  pointer-events: none;
}
@media only screen and (min-width: 768px) {
  .top-chara--layer2-contents__detail-hidden-inner {
    transform-origin: 50% 27vh;
  }
}
.top-chara--layer2-contents__detail-btn {
  width: 52vw;
  height: 12.5333333333vw;
  position: relative;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 82.5%;
}
.top-chara--layer2-contents__detail-btn:before {
  display: block;
  content: "";
  background-color: #000;
  position: absolute;
  top: 0;
  left: 0;
}
.top-chara--layer2-contents__detail-btn a {
  background-color: #838383;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: 0.3s all;
}
.top-chara--layer2-contents__detail-btn a:before, .top-chara--layer2-contents__detail-btn a:after {
  display: block;
  content: "";
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: 0 0;
  position: absolute;
  top: 0;
  transition: 0.3s all;
}
.top-chara--layer2-contents__detail-btn a:before {
  display: block;
  content: "";
  background-image: url("/wp-content/themes/danjon/assets/data/webp/common/btn_parts2_l.png.webp");
  left: 0;
}
@media only screen and (min-width: 768px) {
  .top-chara--layer2-contents__detail-btn a:before {
    background-image: url("/wp-content/themes/danjon/assets/data/webp/common/btn_parts2_l_pc.png.webp");
  }
}
.top-chara--layer2-contents__detail-btn a:after {
  display: block;
  content: "";
  background-image: url("/wp-content/themes/danjon/assets/data/webp/common/btn_parts2_r.png.webp");
  right: 0;
}
@media only screen and (min-width: 768px) {
  .top-chara--layer2-contents__detail-btn a:after {
    background-image: url("/wp-content/themes/danjon/assets/data/webp/common/btn_parts2_r_pc.png.webp");
  }
}
@media only screen and (min-width: 768px) {
  .top-chara--layer2-contents__detail-btn a:hover {
    background-color: #b79345;
  }
  .top-chara--layer2-contents__detail-btn a:hover:before {
    display: block;
    content: "";
    background-image: url("/wp-content/themes/danjon/assets/data/webp/common/btn_parts2_l_pc_hov.png.webp");
  }
  .top-chara--layer2-contents__detail-btn a:hover:after {
    display: block;
    content: "";
    background-image: url("/wp-content/themes/danjon/assets/data/webp/common/btn_parts2_r_pc_hov.png.webp");
  }
}
.top-chara--layer2-contents__detail-btn span {
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 900;
  letter-spacing: 0.04em;
  position: relative;
}
.top-chara--layer2-contents__detail-btn span:after {
  display: block;
  content: "";
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/wp-content/themes/danjon/assets/data/webp/icon/icon_arw_right.png.webp");
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
}
@media only screen and (min-width: 768px) {
  .top-chara--layer2-contents__detail-btn {
    width: 19.2532942899vw;
    height: 4.5387994143vw;
    top: 72.5%;
  }
}
.top-chara--layer2-contents__detail-btn:before {
  display: block;
  content: "";
  width: 52vw;
  height: 12.5333333333vw;
}
@media only screen and (min-width: 768px) {
  .top-chara--layer2-contents__detail-btn:before {
    width: 19.2532942899vw;
    height: 4.5387994143vw;
  }
}
.top-chara--layer2-contents__detail-btn-link {
  width: 51.0666666667vw;
  height: 11.6vw;
}
@media only screen and (min-width: 768px) {
  .top-chara--layer2-contents__detail-btn-link {
    width: 18.9604685212vw;
    height: 4.2459736457vw;
  }
}
.top-chara--layer2-contents__detail-btn-link:before, .top-chara--layer2-contents__detail-btn-link:after {
  display: block;
  content: "";
  width: 12vw;
  height: 11.6vw;
}
@media only screen and (min-width: 768px) {
  .top-chara--layer2-contents__detail-btn-link:before, .top-chara--layer2-contents__detail-btn-link:after {
    width: 4.39238653vw;
    height: 4.2459736457vw;
  }
}
.top-chara--layer2-contents__detail-btn-text {
  font-size: 3.6vw;
  padding: 0 6.6666666667vw 0 3.6vw;
}
@media only screen and (min-width: 768px) {
  .top-chara--layer2-contents__detail-btn-text {
    font-size: 1.317715959vw;
    padding: 0 2.2693997072vw 0 1.0980966325vw;
  }
}
.top-chara--layer2-contents__detail-btn-text:after {
  display: block;
  content: "";
  width: 3.0666666667vw;
  height: 3.4666666667vw;
}
@media only screen and (min-width: 768px) {
  .top-chara--layer2-contents__detail-btn-text:after {
    width: 1.1713030747vw;
    height: 1.317715959vw;
  }
}
.top-chara--layer2-contents__detail-main {
  width: 57.6vw;
  height: 88.8vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 48.5%;
  left: 50.5%;
  pointer-events: none;
}
@media only screen and (min-width: 768px) {
  .top-chara--layer2-contents__detail-main {
    width: 30.0146412884vh;
    height: 44.4729136164vh;
    top: 50%;
    left: 50%;
    transform: translate3d(-16.1054172767vh, -27.8184480234vh, 0);
  }
}
.top-chara--layer2-contents__detail-main img {
  transform: translate3d(0, 0, 0);
}
.top-chara--layer2-contents__detail-main-on {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
.top-chara--layer2-contents__detail-main-wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}
@media only screen and (min-width: 768px) {
  .top-chara--layer2-contents__detail-main-wrap {
    will-change: transform, filter;
    transform-origin: 50% 27vh;
    top: 7.3206442167vh;
  }
}
.top-chara--layer2-contents__detail-main-wrap.js--hide {
  pointer-events: none;
}
.top-chara--layer2-contents__detail-main-wrap.js--hide a,
.top-chara--layer2-contents__detail-main-wrap.js--hide a * {
  pointer-events: none !important;
}
.top-chara--layer2-contents__detail-main-inner {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  transform-origin: 50% 27vh;
  will-change: transform, filter;
}
.top-chara--layer2-contents__detail-link {
  width: 18.6666666667vw;
  height: 14.2666666667vw;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 52.5%;
}
@media only screen and (min-width: 768px) {
  .top-chara--layer2-contents__detail-link {
    width: 10.1756954612vh;
    height: 6.6617862372vh;
  }
}
.top-chara--layer2-contents__detail-link img {
  transform: translate3d(0, 0, 0);
}
.top-chara--layer2-contents__detail-link.link-1 {
  left: 84.5%;
}
@media only screen and (min-width: 768px) {
  .top-chara--layer2-contents__detail-link.link-1 {
    top: 50%;
    left: 50%;
    transform: translate3d(12.8111273792vh, -18.1551976574vh, 0);
  }
}
.top-chara--layer2-contents__detail-link.link-2 {
  left: 15.5%;
}
@media only screen and (min-width: 768px) {
  .top-chara--layer2-contents__detail-link.link-2 {
    left: 50%;
    transform: translate3d(-24.5241581259vh, -9.4436310395vh, 0);
  }
}

.top-staff--heading {
  text-align: center;
  padding: 9.6vw 0 8vw;
}
@media only screen and (min-width: 768px) {
  .top-staff--heading {
    padding: 4.0995607613vw 0 3.6603221083vw;
  }
}
.top-staff--heading-main {
  text-align: center;
  height: 10vw;
}
@media only screen and (min-width: 768px) {
  .top-staff--heading-main {
    height: 4.7584187408vw;
  }
}
.top-staff--heading-main img {
  width: auto;
  max-width: none;
  height: 100%;
  max-height: 100%;
}
.top-staff--heading-sub {
  text-align: center;
  height: 5.0666666667vw;
  margin: 0.6666666667vw 0 0;
}
@media only screen and (min-width: 768px) {
  .top-staff--heading-sub {
    height: 2.0497803807vw;
    margin: 0.439238653vw 0 0;
  }
}
.top-staff--heading-sub img {
  width: auto;
  max-width: none;
  height: 100%;
  max-height: 100%;
}
.top-staff--contents {
  padding: 0 0 10vw;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .top-staff--contents {
    padding: 0 0 8.0527086384vw;
  }
}
.top-staff--contents:before {
  display: block;
  content: "";
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0 0;
  background-image: url("/wp-content/themes/danjon/assets/webp/top/staff_cast/bg.png.webp");
  width: 100%;
  height: 113.3333333333vw;
  position: absolute;
  top: 0;
  left: 0;
}
@media only screen and (min-width: 768px) {
  .top-staff--contents:before {
    background-size: 100% auto;
    background-image: url("/wp-content/themes/danjon/assets/data/webp/top/staff_cast/bg_pc.png.webp");
    height: 23.7188872621vw;
  }
}
.top-staff--contents-btn {
  width: 52vw;
  height: 12.5333333333vw;
  margin: 12.6666666667vw auto 0;
  position: relative;
}
.top-staff--contents-btn:before {
  display: block;
  content: "";
  background-color: #000;
  position: absolute;
  top: 0;
  left: 0;
}
.top-staff--contents-btn a {
  background-color: #838383;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: 0.3s all;
}
.top-staff--contents-btn a:before, .top-staff--contents-btn a:after {
  display: block;
  content: "";
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: 0 0;
  position: absolute;
  top: 0;
  transition: 0.3s all;
}
.top-staff--contents-btn a:before {
  display: block;
  content: "";
  background-image: url("/wp-content/themes/danjon/assets/data/webp/common/btn_parts2_l.png.webp");
  left: 0;
}
@media only screen and (min-width: 768px) {
  .top-staff--contents-btn a:before {
    background-image: url("/wp-content/themes/danjon/assets/data/webp/common/btn_parts2_l_pc.png.webp");
  }
}
.top-staff--contents-btn a:after {
  display: block;
  content: "";
  background-image: url("/wp-content/themes/danjon/assets/data/webp/common/btn_parts2_r.png.webp");
  right: 0;
}
@media only screen and (min-width: 768px) {
  .top-staff--contents-btn a:after {
    background-image: url("/wp-content/themes/danjon/assets/data/webp/common/btn_parts2_r_pc.png.webp");
  }
}
@media only screen and (min-width: 768px) {
  .top-staff--contents-btn a:hover {
    background-color: #b79345;
  }
  .top-staff--contents-btn a:hover:before {
    display: block;
    content: "";
    background-image: url("/wp-content/themes/danjon/assets/data/webp/common/btn_parts2_l_pc_hov.png.webp");
  }
  .top-staff--contents-btn a:hover:after {
    display: block;
    content: "";
    background-image: url("/wp-content/themes/danjon/assets/data/webp/common/btn_parts2_r_pc_hov.png.webp");
  }
}
.top-staff--contents-btn span {
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 900;
  letter-spacing: 0.04em;
  position: relative;
}
.top-staff--contents-btn span:after {
  display: block;
  content: "";
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url("/wp-content/themes/danjon/assets/data/webp/icon/icon_arw_right.png.webp");
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
}
@media only screen and (min-width: 768px) {
  .top-staff--contents-btn {
    width: 19.2532942899vw;
    height: 4.5387994143vw;
    margin: 2.4890190337vw auto 0;
  }
}
.top-staff--contents-btn:before {
  display: block;
  content: "";
  width: 52vw;
  height: 12.5333333333vw;
}
@media only screen and (min-width: 768px) {
  .top-staff--contents-btn:before {
    width: 19.2532942899vw;
    height: 4.5387994143vw;
  }
}
.top-staff--contents-btn__link {
  width: 51.0666666667vw;
  height: 11.6vw;
}
@media only screen and (min-width: 768px) {
  .top-staff--contents-btn__link {
    width: 18.9604685212vw;
    height: 4.2459736457vw;
  }
}
.top-staff--contents-btn__link:before, .top-staff--contents-btn__link:after {
  display: block;
  content: "";
  width: 12vw;
  height: 11.6vw;
}
@media only screen and (min-width: 768px) {
  .top-staff--contents-btn__link:before, .top-staff--contents-btn__link:after {
    width: 4.39238653vw;
    height: 4.2459736457vw;
  }
}
.top-staff--contents-btn__text {
  font-size: 3.6vw;
  padding: 0 6.6666666667vw 0 3.6vw;
}
@media only screen and (min-width: 768px) {
  .top-staff--contents-btn__text {
    font-size: 1.317715959vw;
    padding: 0 2.2693997072vw 0 1.0980966325vw;
  }
}
.top-staff--contents-btn__text:after {
  display: block;
  content: "";
  width: 3.0666666667vw;
  height: 3.4666666667vw;
}
@media only screen and (min-width: 768px) {
  .top-staff--contents-btn__text:after {
    width: 1.1713030747vw;
    height: 1.317715959vw;
  }
}
.top-staff--list {
  width: 89.3333333333vw;
  padding: 6.9333333333vw 0 0;
  margin: 0 auto;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .top-staff--list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 2.4524158126vw 0 0;
  }
}
.top-staff--list-item {
  background-color: #fff;
}
@media only screen and (max-width: 768px) {
  .top-staff--list-item:not(:first-child) {
    margin-top: 6vw;
  }
}
@media only screen and (min-width: 768px) {
  .top-staff--list-item {
    height: 16.4714494876vw;
    margin: 0 1.0980966325vw;
  }
  .top-staff--list-item:first-child {
    flex-basis: 53.8067349927vw;
  }
  .top-staff--list-item:last-child {
    flex-basis: 32.2108345534vw;
  }
}
@media only screen and (min-width: 768px) {
  .top-staff--list-item__contents {
    height: 100%;
    display: flex;
  }
}
.top-staff--list-item__contents-sub {
  background-color: #000;
  width: 100%;
  height: 8vw;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .top-staff--list-item__contents-sub {
    width: 4.39238653vw;
    flex-basis: 4.39238653vw;
    flex-shrink: 0;
    height: auto;
  }
}
.top-staff--list-item__contents-detail {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
@media only screen and (min-width: 768px) {
  .top-staff--list-item__contents-detail {
    justify-content: start;
  }
}
.top-staff--list-item__contents-name {
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .top-staff--list-item__contents-name {
    text-align: left;
    position: relative;
  }
}
.top-staff--list-item__contents-name > small {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #b79345;
  font-size: 2.6666666667vw;
}
@media only screen and (min-width: 768px) {
  .top-staff--list-item__contents-name > small {
    font-size: 1.317715959vw;
    display: block;
  }
}
.top-staff--list-item__contents-name p {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 4.5333333333vw;
  margin: 1.0666666667vw 0 0;
}
@media only screen and (min-width: 768px) {
  .top-staff--list-item__contents-name p {
    font-size: 2.196193265vw;
    margin: 0;
    display: inline-block;
  }
}
.top-staff--list-item__contents-name > span {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  letter-spacing: 0.04em;
  font-size: 3.2vw;
  display: block;
  margin: 1.3333333333vw 0 0;
}
@media only screen and (min-width: 768px) {
  .top-staff--list-item__contents-name > span {
    font-size: 1.4641288433vw;
    margin: 0 0 0 0.3660322108vw;
    display: inline-block;
  }
}
@media only screen and (min-width: 768px) {
  .top-staff--list-item__contents-name > div {
    margin: 0.8052708638vw 0 0 0.3660322108vw;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
}
.top-staff--list-item__contents-btn {
  width: 24.4vw;
  height: 6vw;
  margin: 1.0666666667vw auto 0 !important;
  position: relative;
}
.top-staff--list-item__contents-btn:before {
  display: block;
  content: "";
  background-color: #000;
  position: absolute;
  top: 0;
  left: 0;
}
.top-staff--list-item__contents-btn a {
  background-color: #baa371;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: 0.3s all;
}
.top-staff--list-item__contents-btn a:before {
  display: block;
  content: "";
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: 0 0;
  position: absolute;
  top: 0;
  transition: 0.3s all;
  background-image: url("/wp-content/themes/danjon/assets/data/webp/icon/icon_comment.png.webp");
  left: 0;
}
@media only screen and (min-width: 768px) {
  .top-staff--list-item__contents-btn a:hover {
    background-color: #282828;
  }
  .top-staff--list-item__contents-btn a:hover span {
    color: #b79345;
  }
  .top-staff--list-item__contents-btn a:hover:before {
    display: block;
    content: "";
    background-image: url("/wp-content/themes/danjon/assets/data/webp/icon/icon_comment_on.png.webp");
  }
}
.top-staff--list-item__contents-btn span {
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 900;
  letter-spacing: 0.04em;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .top-staff--list-item__contents-btn {
    width: 9.224011713vw;
    height: 2.196193265vw;
    margin: 0 0 0 1.3909224012vw !important;
  }
}
.top-staff--list-item__contents-btn:before {
  display: block;
  content: "";
  width: 24.5333333333vw;
  height: 6.1333333333vw;
}
@media only screen and (min-width: 768px) {
  .top-staff--list-item__contents-btn:before {
    width: 9.2972181552vw;
    height: 2.2693997072vw;
  }
}
.top-staff--list-item__contents-btn__link {
  width: 24vw;
  height: 5.6vw;
}
@media only screen and (min-width: 768px) {
  .top-staff--list-item__contents-btn__link {
    width: 9.1508052709vw;
    height: 2.1229868228vw;
  }
}
.top-staff--list-item__contents-btn__link:before {
  display: block;
  content: "";
  width: 5.7333333333vw;
  height: 5.7333333333vw;
}
@media only screen and (min-width: 768px) {
  .top-staff--list-item__contents-btn__link:before {
    width: 2.1229868228vw;
    height: 2.1229868228vw;
  }
}
.top-staff--list-item__contents-btn__text {
  font-size: 3.0666666667vw;
}
@media only screen and (min-width: 768px) {
  .top-staff--list-item__contents-btn__text {
    font-size: 1.1713030747vw;
  }
}
.top-staff--list-item__contents.contents_staff .top-staff--list-item__contents-detail {
  padding: 4vw 2.6666666667vw 7.3333333333vw;
}
@media only screen and (min-width: 768px) {
  .top-staff--list-item__contents.contents_staff .top-staff--list-item__contents-detail {
    padding: 1.8301610542vw 0 3.0014641288vw 1.4641288433vw;
  }
}
.top-staff--list-item__contents.contents_staff .top-staff--list-item__contents-name:first-of-type {
  width: 100%;
}
@media only screen and (max-width: 768px) {
  .top-staff--list-item__contents.contents_staff .top-staff--list-item__contents-name:not(:first-of-type) {
    margin: 4vw 2.1333333333vw 0;
  }
  .top-staff--list-item__contents.contents_staff .top-staff--list-item__contents-name:nth-of-type(2) {
    margin: 4vw 2.1333333333vw 0 4.6666666667vw;
  }
}
@media only screen and (min-width: 768px) {
  .top-staff--list-item__contents.contents_staff .top-staff--list-item__contents-name:not(:first-of-type) {
    margin: 2.196193265vw 2.196193265vw 0 0;
  }
  .top-staff--list-item__contents.contents_staff .top-staff--list-item__contents-name:not(:first-of-type) small {
    font-size: 1.0980966325vw;
  }
  .top-staff--list-item__contents.contents_staff .top-staff--list-item__contents-name:not(:first-of-type) p {
    font-size: 1.756954612vw;
  }
  .top-staff--list-item__contents.contents_staff .top-staff--list-item__contents-name p {
    margin: 0.8052708638vw 0 0;
  }
}
.top-staff--list-item__contents.contents_cast .top-staff--list-item__contents-detail {
  padding: 4vw 0 4.6666666667vw;
}
@media only screen and (min-width: 768px) {
  .top-staff--list-item__contents.contents_cast .top-staff--list-item__contents-detail {
    flex-direction: column;
    padding: 1.8301610542vw 0.7320644217vw 2.196193265vw 1.4641288433vw;
  }
}
.top-staff--list-item__contents.contents_cast .top-staff--list-item__contents-name {
  margin: 0 5.3333333333vw;
}
@media only screen and (min-width: 768px) {
  .top-staff--list-item__contents.contents_cast .top-staff--list-item__contents-name {
    margin: 0;
  }
  .top-staff--list-item__contents.contents_cast .top-staff--list-item__contents-name:not(:first-of-type) {
    margin: 1.4641288433vw 0 0;
  }
}

.top-common--h2 p {
  overflow: hidden;
}
.top-common--h2 p img {
  transform: translate3d(0, 101%, 0);
  will-change: transform;
}
.top-common--h2.js--anime p img {
  transform: translate3d(0, 0, 0);
  transition: transform 600ms;
}
.top-common--h2.js--anime p:not(:first-of-type) img {
  transition-delay: 120ms;
}

.js--anime .top-common--h2 p img {
  transform: translate3d(0, 0, 0);
  transition: transform 600ms;
}
.js--anime .top-common--h2 p:not(:first-of-type) img {
  transition-delay: 120ms;
}

@keyframes slide-progress {
  0% {
    transform: scale(0, 1);
  }
  100% {
    transform: scale(1, 1);
  }
}
.top-mv--slide__change-tit-progress {
  transform: scale(0, 1);
  transform-origin: 0% 50%;
}
.top-mv--slide__change-tit-progress.js--anime {
  animation: slide-progress 5000ms linear;
}

.top-mv--slide.js--click .swiper-slide-prev,
.top-mv--slide.js--click .swiper-slide-next {
  transition-delay: 0ms !important;
}
.top-mv--slide.js--click .swiper-slide-active {
  transition-delay: 300ms !important;
  z-index: 10;
}
.top-mv--slide .swiper-slide-prev,
.top-mv--slide .swiper-slide-next {
  transition-delay: 300ms !important;
}
.top-mv--slide .swiper-slide-active {
  transition-delay: 0ms !important;
  z-index: 10;
}

.isIos .top-mv--slide .swiper-slide,
.isSafariPc .top-mv--slide .swiper-slide {
  transition-delay: 300ms !important;
}
.isIos .top-mv--slide .swiper-slide-active,
.isSafariPc .top-mv--slide .swiper-slide-active {
  transition-delay: 0ms !important;
  z-index: 10;
}

@media only screen and (min-width: 768px) {
  .top-chara--layer2-contents__detail-heading-main img, .top-chara--layer2-contents__detail-heading-sub img {
    transition-delay: 300ms !important;
  }
}

.top-news--list, .top-news--contents-btn {
  opacity: 0;
  will-change: opacity;
}

.js--anime .top-news--list, .js--anime .top-news--contents-btn {
  opacity: 1;
  transition: opacity 800ms;
}

.top-staff--contents {
  opacity: 0;
  will-change: opacity;
}

.js--anime .top-staff--contents {
  opacity: 1;
  transition: opacity 800ms;
}

.top-parallax {
  position: relative;
  height: 1200vh;
}
@media only screen and (max-width: 768px) {
  .top-parallax.js--non-other {
    height: 500vh;
  }
}
@media only screen and (max-width: 768px) {
  .top-parallax {
    height: 1000vh;
  }
}
.top-parallax.js--fix .top-parallax--inner {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  z-index: 3;
  transform: translate3d(0, 0, 0);
}
.top-parallax.js--fix.js--end .top-parallax--inner {
  position: relative;
  top: 1100vh;
}
@media only screen and (max-width: 768px) {
  .top-parallax.js--fix.js--end .top-parallax--inner {
    top: 900vh;
  }
}
@media only screen and (max-width: 768px) {
  .top-parallax.js--fix.js--end.js--non-other .top-parallax--inner {
    top: 400vh;
  }
}
/*# sourceMappingURL=../maps/top.css.map */