@charset "UTF-8";
body.modal-open {
  overflow: hidden; /* スクロールを禁止 */
}

main.banio {
  overflow-x: hidden;
  font-family: "sicrusk", sans-serif;
  background: #FFFBDF;
  color: #28546F;
}
main.banio h2 {
  margin: 0 auto;
}
main.banio button {
  font-family: "sicrusk", sans-serif;
  color: #28546F;
  padding: 0;
}
main.banio .kv {
  margin-bottom: 0 !important;
}
main.banio .characters {
  margin-top: min(5vw, 80px);
}
main.banio .characters h2 {
  width: min(23.875vw, 382px);
}
main.banio .characters .character-map-container {
  max-width: min(75vw, 1200px);
  margin: max(-1.875vw, -30px) auto 0;
  line-height: 0;
}
main.banio .characters .character-map-container .modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #FFFBDF;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  z-index: 1000;
}
main.banio .characters .character-map-container .modal-overlay.is-active {
  opacity: 1;
  visibility: visible;
}
main.banio .characters .character-map-container .modal-overlay .modal-close2 {
  font-size: min(3.375vw, 54px);
  position: absolute;
  top: min(0.8125vw, 13px);
  right: min(1.8125vw, 29px);
  z-index: 2;
  background: none;
}
main.banio .characters .character-map-container .modal-overlay .modal-content {
  background: #FFE27A;
  border: min(0.3125vw, 5px) solid #28546F;
  border-radius: min(3.75vw, 60px);
  padding: min(3.4375vw, 55px) min(10.9375vw, 175px) min(8.5vw, 136px);
  width: min(67.5vw, 1080px);
  position: relative;
}
main.banio .characters .character-map-container .modal-overlay .modal-content .modal-prev, main.banio .characters .character-map-container .modal-overlay .modal-content .modal-next {
  position: absolute;
  background: none;
  font-size: min(3.75vw, 60px);
  top: min(16.5vw, 264px);
}
main.banio .characters .character-map-container .modal-overlay .modal-content .modal-prev {
  left: min(4.1875vw, 67px);
}
main.banio .characters .character-map-container .modal-overlay .modal-content .modal-next {
  right: min(4.1875vw, 67px);
}
main.banio .characters .character-map-container .modal-overlay .modal-content .modal-body {
  display: none;
}
main.banio .characters .character-map-container .modal-overlay .modal-content .modal-body.is-active {
  display: block;
}
main.banio .characters .character-map-container .modal-overlay .modal-content .modal-body h3 {
  font-size: min(2.375vw, 38px);
  line-height: 170%;
  letter-spacing: 0.02em;
  text-align: center;
}
main.banio .characters .character-map-container .modal-overlay .modal-content .modal-body h3 span {
  font-size: min(1vw, 16px);
  letter-spacing: 0.03em;
}
main.banio .characters .character-map-container .modal-overlay .modal-content .modal-body img {
  width: 141%;
  margin: max(-11.375vw, -182px) 0 max(-6.0625vw, -97px) max(-9.375vw, -150px);
}
main.banio .characters .character-map-container .modal-overlay .modal-content .modal-body .chara-introduction {
  text-align: left;
  margin-top: min(0.75vw, 12px);
}
main.banio .characters .character-map-container .modal-overlay .modal-content .modal-body .chara-introduction p {
  font-size: min(1vw, 16px);
  line-height: 165%;
  letter-spacing: 0.02em;
}
main.banio .characters .character-map-container .modal-overlay .modal-content #char2 img {
  margin-top: max(-4.875vw, -78px);
}
main.banio .characters .character-map-container .modal-overlay .modal-content #char3 img {
  margin-top: max(-10vw, -160px);
}
main.banio .characters .character-map-container .modal-overlay .modal-content #char4 img {
  margin-top: max(-10vw, -160px);
  margin-bottom: max(-2.875vw, -46px);
}
main.banio .characters .character-map-container .modal-overlay .modal-content #char5 img {
  margin-top: max(-10vw, -160px);
  margin-bottom: max(-2.875vw, -46px);
}
main.banio .characters .character-map-container .modal-overlay .modal-content #char5 img {
  margin-top: max(-11.375vw, -160px);
  margin-bottom: max(-6.0625vw, -97px);
}
main.banio .characters .character-map-container .modal-overlay .modal-content .modal-close {
  font-size: min(0.8125vw, 13px);
  line-height: min(2.25vw, 36px);
  width: min(8.5vw, 136px);
  border: 1px solid #28546F;
  border-radius: min(62.4375vw, 999px);
  background: #FFFBDF;
  cursor: pointer;
  position: absolute;
  bottom: min(3.75vw, 60px);
  left: 50%;
  transform: translateX(-50%);
}
main.banio .illust {
  margin-top: min(0.5vw, 8px);
  z-index: 0;
  padding-top: min(5vw, 80px);
  background: url(../img/back.png) repeat-x;
  background-size: 100%;
}
main.banio .illust h2 {
  width: min(26.125vw, 418px);
}
main.banio .illust .illust-container {
  display: flex;
  gap: 0 min(2.5vw, 40px);
  width: min(75vw, 1200px);
  margin: min(2.5vw, 40px) auto 0;
  height: min(38.75vw, 620px);
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
main.banio .illust .illust-container::-webkit-scrollbar {
  display: none;
}
main.banio .illust .illust-container .main-img {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
main.banio .illust .illust-container .main-img img {
  width: min(30.0625vw, 481px);
  height: min(30.0625vw, 481px);
  object-fit: contain;
  display: none;
}
main.banio .illust .illust-container .main-img img.active {
  display: block;
}
main.banio .illust .illust-container .thumbnail {
  width: min(42.4375vw, 679px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: min(2.5vw, 40px) min(1.5625vw, 25px);
}
main.banio .illust .illust-container .thumbnail .thumbnail-item {
  width: min(9.4375vw, 151px);
  cursor: pointer;
  position: relative;
  transition: 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
}
main.banio .illust .illust-container .thumbnail .thumbnail-item:hover::after, main.banio .illust .illust-container .thumbnail .thumbnail-item.current::after {
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  border: min(0.1875vw, 3px) solid #28546F;
  position: absolute;
  top: 0;
  left: 0;
}
main.banio .new-item {
  width: min(75vw, 1200px);
  margin: min(5vw, 80px) auto 0 !important;
  font-family: "Noto Sans CJK JP";
}
main.banio .new-item h2 {
  width: min(24.625vw, 394px);
  margin-bottom: min(7vw, 112px);
}
main.banio .new-item .btn.more {
  top: min(8.875vw, 142px) !important;
}
main.banio .swiper-slide {
  background: none !important;
}
main.banio .btn.more {
  background: #FFF !important;
}
main.banio .swiper-button-prev, main.banio .swiper-button-next {
  top: min(20.4375vw, 327px) !important;
}
main.banio .news {
  margin: min(5vw, 80px) auto 0;
}
main.banio .news h2 {
  width: min(26.625vw, 426px);
}
main.banio .news .news-container {
  width: min(75vw, 1200px);
  margin: min(2.5vw, 40px) auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: min(1.875vw, 30px);
  justify-content: center;
}
main.banio .news .news-container .news-item {
  width: min(36.5625vw, 585px);
  border-radius: min(1vw, 16px);
  border: 2px solid #28546F;
  overflow: hidden;
}
main.banio .news .news-container .news-item a {
  display: flex;
}
main.banio .news .news-container .news-item a .news-img img {
  width: min(16.875vw, 270px);
  height: min(16.625vw, 266px);
  object-fit: cover;
}
main.banio .news .news-container .news-item a .news-txt {
  background: #FFF;
  padding: min(1.3125vw, 21px) min(1.4375vw, 23px) min(1.4375vw, 23px) min(1.25vw, 20px);
  font-family: "M PLUS Rounded 1c", sans-serif;
  width: min(19.6875vw, 315px);
}
main.banio .news .news-container .news-item a .news-txt .date {
  display: flex;
  align-items: center;
  gap: 0 min(0.75vw, 12px);
}
main.banio .news .news-container .news-item a .news-txt .date span {
  letter-spacing: 0.03em;
}
main.banio .news .news-container .news-item a .news-txt .date span:nth-of-type(1) {
  font-size: min(1.25vw, 20px);
  color: #28546F;
}
main.banio .news .news-container .news-item a .news-txt .date span:nth-of-type(2) {
  font-size: min(1.3125vw, 21px);
  color: #C24543;
  font-weight: 500;
}
main.banio .news .news-container .news-item a .news-txt p {
  margin-top: min(0.5vw, 8px);
  font-size: min(1.375vw, 22px);
  letter-spacing: 0.03em;
  font-weight: 500;
  color: #28546F;
}
main.banio .sns-link {
  width: min(75vw, 1200px);
  margin: min(5vw, 80px) auto 0;
  background: #FFE27A;
  border-radius: min(1.5vw, 24px);
  padding: min(3.5625vw, 57px) 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: min(2vw, 32px);
}
main.banio .sns-link img {
  width: min(8vw, 128px);
}
main.banio .sns-link .sns-link-txt {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: min(1vw, 16px) min(1.5vw, 24px);
  width: min(23.3125vw, 373px);
  font-size: min(0.875vw, 14px);
}
main.banio .sns-link .sns-link-txt a {
  display: flex;
  align-items: center;
  gap: 0 min(0.5vw, 8px);
}
main.banio .sns-link .sns-link-txt a div {
  width: min(2.25vw, 36px);
  height: min(2.25vw, 36px);
  background: #FFF;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
main.banio .sns-link .sns-link-txt a p {
  letter-spacing: 0.05em;
}
main.banio .sns-link .sns-link-txt a:nth-of-type(1) div img {
  width: min(1.25vw, 20px);
}
main.banio .sns-link .sns-link-txt a:nth-of-type(2) div img {
  width: min(1vw, 16px);
}
main.banio .sns-link .sns-link-txt p {
  letter-spacing: 0.07em;
}
main.banio .watch-list {
  margin-top: min(9.8125vw, 157px) !important;
  font-family: "Noto Sans CJK JP";
  color: #222;
}
main.banio .breadclumb {
  margin-top: min(6.8125vw, 109px);
  padding-bottom: min(3.0625vw, 49px);
}
main.banio .breadclumb .breadclumb-inner {
  width: min(75vw, 1200px);
  margin: 0 auto;
}
main.banio .breadclumb .breadclumb-inner ul {
  display: flex;
  gap: 0 min(2.125vw, 34px);
}
main.banio .breadclumb .breadclumb-inner ul li {
  font-family: "Noto Sans CJK JP";
  font-size: min(0.875vw, 14px);
  line-height: 100%;
  letter-spacing: 0.1em;
  color: #AAA;
  position: relative;
}
main.banio .breadclumb .breadclumb-inner ul li:not(:has(a))::before {
  display: block;
  content: "";
  width: min(0.25vw, 4px);
  height: min(0.25vw, 4px);
  background: #D9D9D9;
  border-radius: 50%;
  position: absolute;
  left: max(-1.1875vw, -19px);
  top: 50%;
  transform: translateY(-50%);
}
main.banio .breadclumb .breadclumb-inner ul li a {
  color: #222;
}

@media (max-width: 768px) {
  main.banio .characters {
    margin-top: 9.6vw;
  }
  main.banio .characters h2 {
    width: 50.6666666667vw;
  }
  main.banio .characters .character-map-container {
    max-width: 100%;
    margin-top: 3.2vw;
  }
  main.banio .characters .character-map-container .modal-overlay .modal-close2 {
    font-size: 10.6666666667vw;
    top: 2.4vw;
    right: 5.6vw;
  }
  main.banio .characters .character-map-container .modal-overlay .modal-content {
    border: 0.8vw solid #28546F;
    border-radius: 8vw;
    padding: 5.3333333333vw 4.8vw 25.8666666667vw;
    width: 89.3333333333vw;
  }
  main.banio .characters .character-map-container .modal-overlay .modal-content .modal-prev, main.banio .characters .character-map-container .modal-overlay .modal-content .modal-next {
    font-size: 5.8666666667vw;
    top: 36.5333333333vw;
  }
  main.banio .characters .character-map-container .modal-overlay .modal-content .modal-prev {
    left: 5.8666666667vw;
  }
  main.banio .characters .character-map-container .modal-overlay .modal-content .modal-next {
    right: 5.8666666667vw;
  }
  main.banio .characters .character-map-container .modal-overlay .modal-content .modal-body h3 {
    font-size: 5.8666666667vw;
    letter-spacing: 0.03em;
  }
  main.banio .characters .character-map-container .modal-overlay .modal-content .modal-body h3 span {
    font-size: 3.2vw;
    display: block;
    margin-top: -3.2vw;
  }
  main.banio .characters .character-map-container .modal-overlay .modal-content .modal-body img {
    width: 196%;
    margin: -25.3333333333vw 0 -14.1333333333vw -38.6666666667vw;
  }
  main.banio .characters .character-map-container .modal-overlay .modal-content .modal-body .chara-introduction {
    margin-top: 5.3333333333vw;
  }
  main.banio .characters .character-map-container .modal-overlay .modal-content .modal-body .chara-introduction p {
    font-size: 3.2vw;
    line-height: 150%;
    letter-spacing: 0.05em;
  }
  main.banio .characters .character-map-container .modal-overlay .modal-content #char2 img {
    margin-top: -8.5333333333vw;
  }
  main.banio .characters .character-map-container .modal-overlay .modal-content #char3 img {
    margin-top: -24.5333333333vw;
  }
  main.banio .characters .character-map-container .modal-overlay .modal-content #char4 img {
    margin-top: -20.2666666667vw;
    margin-bottom: -7.4666666667vw;
  }
  main.banio .characters .character-map-container .modal-overlay .modal-content #char5 img {
    margin-top: -22.1333333333vw;
    margin-bottom: -13.6vw;
  }
  main.banio .characters .character-map-container .modal-overlay .modal-content #char5 img {
    margin-top: -22.6666666667vw;
    margin-bottom: -14.4vw;
  }
  main.banio .characters .character-map-container .modal-overlay .modal-content .modal-close {
    font-size: 2.9333333333vw;
    line-height: 9.6vw;
    width: 36.2666666667vw;
    border-radius: 266.4vw;
    bottom: 9.6vw;
  }
  main.banio .illust {
    margin-top: 16vw;
    padding: 8.5333333333vw 0 10.6666666667vw;
    background: url(../img/back_sp.png) repeat-x;
    background-size: 100%;
  }
  main.banio .illust h2 {
    width: 55.7333333333vw;
  }
  main.banio .illust .illust-container {
    flex-direction: column;
    gap: 3.2vw 0;
    width: 100%;
    margin-top: 6.4vw;
    height: auto;
    overflow-y: scroll;
  }
  main.banio .illust .illust-container .main-img {
    position: static;
  }
  main.banio .illust .illust-container .main-img img {
    width: 89.3333333333vw;
    height: 89.3333333333vw;
  }
  main.banio .illust .illust-container .thumbnail {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll;
    padding-left: 5.3333333333vw;
    gap: 0 3.2vw;
  }
  main.banio .illust .illust-container .thumbnail .thumbnail-item {
    width: 21.8666666667vw;
    flex-shrink: 0;
  }
  main.banio .illust .illust-container .thumbnail .thumbnail-item img {
    width: 21.8666666667vw;
    height: 21.8666666667vw;
    object-fit: contain;
  }
  main.banio .illust .illust-container .thumbnail .thumbnail-item:hover::after, main.banio .illust .illust-container .thumbnail .thumbnail-item.current::after {
    border: 0.5333333333vw solid #28546F;
  }
  main.banio .illust .illust-container .thumbnail .thumbnail-item:last-of-type {
    margin-right: 5.3333333333vw;
  }
  main.banio .new-item {
    width: 100%;
    margin-top: 16vw !important;
  }
  main.banio .new-item h2 {
    width: 52.5333333333vw;
    margin-bottom: 6.4vw;
  }
  main.banio .new-item .btn.more {
    top: unset !important;
  }
  main.banio .news {
    margin-top: 16vw;
  }
  main.banio .news h2 {
    width: 66.4vw;
  }
  main.banio .news .news-container {
    width: 89.3333333333vw;
    margin-top: 6.4vw;
    gap: 4vw;
  }
  main.banio .news .news-container .news-item {
    width: 42.6666666667vw;
    border-radius: 1.8666666667vw;
    border: 1px solid #28546F;
  }
  main.banio .news .news-container .news-item a {
    flex-direction: column;
  }
  main.banio .news .news-container .news-item a .news-img img {
    width: 42.1333333333vw;
    height: 42.6666666667vw;
  }
  main.banio .news .news-container .news-item a .news-txt {
    padding: 2.6666666667vw 2.6666666667vw 13.6vw;
    width: 100%;
  }
  main.banio .news .news-container .news-item a .news-txt .date {
    gap: 0 2.1333333333vw;
  }
  main.banio .news .news-container .news-item a .news-txt .date span {
    letter-spacing: 0;
  }
  main.banio .news .news-container .news-item a .news-txt .date span:nth-of-type(1) {
    font-size: 2.6666666667vw;
  }
  main.banio .news .news-container .news-item a .news-txt .date span:nth-of-type(2) {
    font-size: 2.6666666667vw;
  }
  main.banio .news .news-container .news-item a .news-txt p {
    margin-top: 2.4vw;
    font-size: 3.2vw;
    letter-spacing: 0.02em;
  }
  main.banio .sns-link {
    width: 89.3333333333vw;
    margin-top: 16vw;
    border-radius: 4.2666666667vw;
    padding: 12.2666666667vw 0 15.2vw;
    flex-direction: column;
    gap: 3.2vw 0;
  }
  main.banio .sns-link img {
    width: 22.4vw;
  }
  main.banio .sns-link .sns-link-txt {
    gap: 8.5333333333vw 4.2666666667vw;
    width: 100%;
    font-size: 2.6666666667vw;
  }
  main.banio .sns-link .sns-link-txt a {
    gap: 0 2.1333333333vw;
  }
  main.banio .sns-link .sns-link-txt a div {
    width: 9.6vw;
    height: 9.6vw;
  }
  main.banio .sns-link .sns-link-txt a p {
    font-size: 2.9333333333vw;
    letter-spacing: 0;
  }
  main.banio .sns-link .sns-link-txt a:nth-of-type(1) div img {
    width: 5.3333333333vw;
  }
  main.banio .sns-link .sns-link-txt a:nth-of-type(2) div img {
    width: 4.2666666667vw;
  }
  main.banio .sns-link .sns-link-txt p {
    font-size: 3.4666666667vw;
  }
  main.banio .watch-list {
    margin-top: 41.8666666667vw !important;
  }
  main.banio .breadclumb {
    margin-top: 28.8vw;
    padding-bottom: 13.0666666667vw;
  }
  main.banio .breadclumb .breadclumb-inner {
    width: 89.3333333333vw;
  }
  main.banio .breadclumb .breadclumb-inner ul {
    display: flex;
    gap: 0 6.6666666667vw;
  }
  main.banio .breadclumb .breadclumb-inner ul li {
    font-size: 2.9333333333vw;
    letter-spacing: 0.1em;
  }
  main.banio .breadclumb .breadclumb-inner ul li:not(:has(a))::before {
    width: 0.8vw;
    height: 0.8vw;
    left: -4vw;
  }
  main.banio .breadclumb .breadclumb-inner ul li a {
    font-size: 3.2vw;
  }
}/*# sourceMappingURL=style.css.map */