@charset 'UTF-8';

.scanbe::before {
  z-index: -2;
}
.scanbe__balance {
  position: relative;
  padding: 13vw 0 0;
}
.scanbe__balance::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #FFB4AB;
  z-index: -2;
}

/* タブボタン */
.scanbe__balance__tabBtn {
  position: fixed;
  top: 12.3vw;
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: 0 auto;
  padding: 10vw 5.5vw 0;
  background: #FFB4AB;
  z-index: 11;
}
.scanbe__balance__tabBtn--animated {
  top: 6.15vw;
}
.scanbe__balance__tabBtn li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc((100% / 2) - 0.5vw);
  height: 10vw;
  padding: 0 1.333vw;
  background: #FFD9D5;
  border-radius: 2.133vw 2.133vw 0 0;
  font-size: 3.733vw;
}
.scanbe__balance__tabBtn .scanbe__balance__tabBtn--service.active {
  background: #7EB9CE;
}
.scanbe__balance__tabBtn .scanbe__balance__tabBtn--animal.active {
  background: #F8DF8D;
}

/* タブコンテンツ */
.scanbe__balance__tabContent {
  position: absolute;
  height: 0;
  padding: 10vw 0 18vw;
  visibility: hidden;
}
.scanbe__balance__tabContent.active {
  position: relative;
  height: auto;
  visibility: visible;
}
.scanbe__balance__tabContent--animal {
  padding: 10vw 0 0;
}

/* タブごとの背景設定 */
.scanbe__balance__tabContent::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  z-index: -1;
}
.scanbe__balance__tabContent--service::before {
  background: url(../img/service/bg_balance_sp.png) no-repeat center top #7EB9CE;
  background-size: 100% auto;
}
.scanbe__balance__tabContent--animal::before {
  background: url(../img/animal/bg_yellow_sp.png) no-repeat center top;
  background-size: 100%;
}

.scanbe__balance__title {
  max-width: 89.6vw;
  margin: 0 auto 8vw;
}
.scanbe__balance__lead {
  margin-block: -10vw 0;
  padding: 10vw 9vw;
  font-size: 4.267vw;
  line-height: 1.6;
  text-align: left;
  background: url(../img/service/bg_balloon_01_sp.png) no-repeat center center;
  background-size: 200% 100%;
}

/* service */
.scanbe__balance__service {
  position: relative;
  max-width: 89.6vw;
  margin-block: 6vw 0;
  margin-inline: auto;
  padding: 16vw 6.5vw 27vw;
  text-align: center;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100%;
}
.scanbe__balance__service + .scanbe__balance__service {
  margin-block: 14vw 0;
}
.scanbe__balance__service + .scanbe__balance__service--03 {
  margin-block: 35vw 0;
}
.scanbe__balance__service--01 {
  background-image: url(../img/service/service_box_01_sp.svg);
}
.scanbe__balance__service--02 {
  background-image: url(../img/service/service_box_02_sp.svg);
}
.scanbe__balance__service--03 {
  background-image: url(../img/service/service_box_03_sp.svg);
}
.scanbe__balance__service--04 {
  background-image: url(../img/service/service_box_04_sp.svg);
}
.scanbe__balance__serviceTitle {
  max-width: 71.7vw;
  margin-block: -23.5vw 11vw;
  margin-inline: auto;
  padding-block: 6vw 7.5vw;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100%;
  font-size: 4.8vw;
  font-weight: bold;
}
.scanbe__balance__service--01 .scanbe__balance__serviceTitle {
  background-image: url(../img/service/service_title_01_sp.svg);
}
.scanbe__balance__service--02 .scanbe__balance__serviceTitle {
  background-image: url(../img/service/service_title_02_sp.svg);
}
.scanbe__balance__service--03 .scanbe__balance__serviceTitle {
  background-image: url(../img/service/service_title_03_sp.svg);
}
.scanbe__balance__service--04 .scanbe__balance__serviceTitle {
  background-image: url(../img/service/service_title_04_sp.svg);
}
.scanbe__balance__serviceText {
  margin-block: 5.4vw 0;
  font-size: 4.267vw;
  line-height: 1.6;
}
.scanbe__balance__serviceSlider {
  overflow: hidden;
}
.scanbe__balance__serviceSlider .swiper-button-next,
.scanbe__balance__serviceSlider .swiper-button-prev {
  top: 33%;
}
.scanbe__balance__animalBtn {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -13vw;
  max-width: 76.5vw;
  margin-inline: auto;
}
.scanbe__balance__serviceSlider .swiper-button-next {
  right: -3%;
}
.scanbe__balance__serviceSlider .swiper-button-prev {
  left: -3%;
}
.scanbe__balance__tabContent.active .scanbe__balance__animalBtn {
  display: block;
}
.scanbe__balance__animalBtn a {
  display: block;
  padding-block: 6.2vw;
  padding-inline: 30vw 0;
  background-color: #FFB4AB;
  border: solid 1px #000;
  border-radius: 9vw;
  font-size: 4.267vw;
  text-align: left;
}
.scanbe__balance__animalBtn a::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 28vw;
  height: 28vw;
  margin-block: auto;
  background: url(../img/service/icon_animal_btn.png) no-repeat;
  background-size: contain;
}

/* outline / secret */
.scanbe__balance__outline,
.scanbe__balance__secret {
  padding-block: 20vw;
  text-align: center;
  background: url(../img/service/bg_balloon_02_sp.png) no-repeat center top;
  background-size: 300% 100%;
}
.scanbe__balance__outlineTitle,
.scanbe__balance__secretTitle {
  max-width: 89.6vw;
  margin: 0 auto 6vw;
  padding-block: 7vw 10vw;
  background: url(../img/title_type_01.svg) no-repeat center top;
  background-size: 100%;
  font-size: 4.8vw;
  font-weight: bold;
}

/* outline */
.scanbe__balance__outlineInfo {
  display: flex;
  justify-content: center;
  gap: 0 5.333vw;
}
.scanbe__balance__outlineInfo li {
  width: 42.1vw;
  padding-block: 3.733vw;
  background-color: #fff;
  border: solid 1px #000;
  border-radius: 8vw;
  font-size: 4.267vw;
  font-weight: bold;
}
.scanbe__balance__outlineText {
  font-size: 4.267vw;
  line-height: 1.6;
}
.scanbe__balance__outlineText a {
  text-decoration: underline;
}
.scanbe__balance__outlineFlow {
  margin-block: 9.333vw 0;
}
.scanbe__balance__flowTitle {
  margin-block: 0 9.333vw;
  font-size: 5.333vw;
  font-weight: bold;
}
.scanbe__balance__flowImg {
  position: relative;
  width: 14.4rem;
}
.scanbe__balance__flowList li:not(:last-child) .scanbe__balance__flowImg::after {
  content: '';
  position: absolute;
  top: 0;
  right: -12.8vw;
  bottom: 0;
  width: 10.667vw;
  height: 4vw;
  margin: auto;
  background: url(../img/service/img_flow_arrow.svg) no-repeat;
  background-size: contain;
}
.scanbe__balance__flowText {
  margin-top: 2.667vw;
  font-size: 4.267vw;
  font-weight: bold;
  line-height: 1.5;
}
.scanbe__balance__outlineReserve {
  max-width: 58.4vw;
  margin: 9.333vw auto 0;
  font-size: 5.333vw;
  font-weight: bold;
}
.scanbe__balance__outlineReserve a {
  display: block;
  padding-block: 5.333vw;
  background-color: #FFB4AB;
  border: solid 1px #000;
  border-radius: 8.8vw;
  filter: drop-shadow(0 6px 0);
}

/* secret */
.scanbe__balance__secretLead {
  margin-block: 0 5.867vw;
  font-size: 4.267vw;
  line-height: 1.6;
}
.scanbe__balance__secretInner {
  max-width: 85vw;
  margin-inline: auto;
}
.scanbe .scanbe__balance__secretImg {
  margin-block: 0 9.6vw;
}
.scanbe .scanbe__balance__secretImg--scanbe {
  width: 31vw;
}
.scanbe .scanbe__balance__secretImg--hsrc {
  margin-block: 9.6vw 0;
}
.scanbe__balance__secretText {
  font-size: 3.733vw;
  line-height: 1.6;
  text-align: left;
}

/* object */
.scanbe__balance__obj {
  display: none;
}

/* selfcheck */
.scanbe__balance__selfcheckTitle {
  max-width: 89.6vw;
  margin: 0 auto 7vw;
}
.scanbe__balance__selfcheckLead {
  margin-block: 0 7vw;
  font-size: 4.267vw;
  font-weight: bold;
  line-height: 1.8;
  text-align: center;
}
.scanbe__balance__selfcheckBox {
  text-align: center;
}
.scanbe__balance__selfcheckResult {
  height: 0;
  opacity: 0;
  visibility: hidden;
  max-width: 89.6vw;
  margin-inline: auto;
  background: url(../img/animal/bg_result_sp.png) no-repeat center center;
  background-size: 100% auto;
}
.scanbe__balance__selfcheckResult.show {
  height: 103vw;
  padding: 9vw 8vw;
  opacity: 1;
  visibility: visible;
}
.scanbe__balance__resultText,
.scanbe__balance__resultImg {
  text-align: center;
}
.scanbe__balance__resultText {
  font-size: 4.267vw;
  font-weight: bold;
  line-height: 1.8;
}
.scanbe__balance__resultImg img {
  width: 50%;
}
#mia .scanbe__balance__resultImg img {
  width: 15.733vw;
}
#panda .scanbe__balance__resultImg img {
  width: 21.333vw;
}
#ahiru .scanbe__balance__resultImg img {
  width: 25.867vw;
}
#ashika .scanbe__balance__resultImg img {
  width: 25.867vw;
}
#kirin .scanbe__balance__resultImg img {
  width: 27.733vw;
}
#neko .scanbe__balance__resultImg img {
  width: 22.933vw;
}
.scanbe__balance__selfcheckQNumber,
.scanbe__balance__selfcheckText {
  font-weight: bold;
}
.scanbe__balance__selfcheckQNumber {
  font-size: 8vw;
  letter-spacing: .05em;
}
.scanbe__balance__selfcheckText {
  font-size: 4.267vw;
  line-height: 1.6;
}
.scanbe__balance__selfcheckBoxA {
  display: flex;
  flex-wrap: wrap;
}
.scanbe__balance__selfcheckBox {
  max-width: 89.6vw;
  margin-inline: auto;
}
.scanbe__balance__selfcheckBoxQ {
  padding: 2.4vw;
  border: solid 1px #000;
  border-bottom: none;
}
.scanbe__balance__selfcheckBoxQ--q1,
.scanbe__balance__selfcheckBoxQ--d1 {
  background-color: #7EB9CE;
}
.scanbe__balance__selfcheckBoxQ--q2,
.scanbe__balance__selfcheckBoxQ--d2 {
  background-color: #FFB4AB;
}
.scanbe__balance__selfcheckBoxQ--q3,
.scanbe__balance__selfcheckBoxQ--d3 {
  background-color: #BADF93;
}
.scanbe__balance__selfcheckBoxQInner {
  border: solid 1px #000;
  background-repeat: no-repeat;
}
.scanbe__balance__selfcheckBoxQ--q1 .scanbe__balance__selfcheckBoxQInner,
.scanbe__balance__selfcheckBoxQ--d1 .scanbe__balance__selfcheckBoxQInner {
  background-color: #BED6E1;
}
.scanbe__balance__selfcheckBoxQ--q1 .scanbe__balance__selfcheckBoxQInner {
  background-image: url(../img/animal/q1_img.png);
  background-position: center bottom 6vw;
  background-size: 42vw;
}
.scanbe__balance__selfcheckBoxQ--d1 .scanbe__balance__selfcheckBoxQInner {
  background-image: url(../img/animal/d1_img.png);
  background-position: center bottom 6vw;
  background-size: 38vw;
}
.scanbe__balance__selfcheckBoxQ--q2 .scanbe__balance__selfcheckBoxQInner,
.scanbe__balance__selfcheckBoxQ--d2 .scanbe__balance__selfcheckBoxQInner {
  background-color: #FFD9D5;
}
.scanbe__balance__selfcheckBoxQ--q2 .scanbe__balance__selfcheckBoxQInner {
  background-image: url(../img/animal/q2_img.png);
  background-position: center bottom 8vw;
  background-size: 32vw;
}
.scanbe__balance__selfcheckBoxQ--d2 .scanbe__balance__selfcheckBoxQInner {
  background-image: url(../img/animal/d2_img.png);
  background-position: center bottom 4vw;
  background-size: 28vw;
}
.scanbe__balance__selfcheckBoxQ--q3 .scanbe__balance__selfcheckBoxQInner,
.scanbe__balance__selfcheckBoxQ--d3 .scanbe__balance__selfcheckBoxQInner {
  background-color: #DDEFC9;
}
.scanbe__balance__selfcheckBoxQ--q3 .scanbe__balance__selfcheckBoxQInner {
  background-image: url(../img/animal/q3_img.png);
  background-position: center bottom;
  background-size: 65vw;
}
.scanbe__balance__selfcheckBoxQ--d3 .scanbe__balance__selfcheckBoxQInner {
  background-image: url(../img/animal/d3_img.png);
  background-position: center bottom 6vw;
  background-size: 33vw;
}
.scanbe__balance__selfcheckBoxA button {
  width: 50%;
  padding-block: 3.5vw;
  background-color: #fff;
  border: solid 1px #000;
  font-size: 8vw;
  font-weight: bold;
  transition: background .25s;
}
.scanbe__balance__selfcheckBoxA button:hover {
  background-color: #FFBFB8;
}
.scanbe__balance__selfcheckBoxA button:nth-child(1) {
  border-right: 0;
}

/* type */
.scanbe__balance__typeTitle {
  margin: 0 auto 6vw;
}
.scanbe__balance__typeText {
  font-size: 4.267vw;
  font-weight: bold;
  line-height: 2;
  text-align: center;
}
.scanbe__balance__typeSlider {
  position: relative;
  max-width: 88.8vw;
  margin-block: 40vw 0;
}
.scanbe .scanbe__balance__typeSec {
  height: 173vw;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.scanbe__balance__typeSec--mia {
  background-image: url(../img/animal/animal_bg01_sp.png);
}
.scanbe__balance__typeSec--panda {
  background-image: url(../img/animal/animal_bg02_sp.png);
}
.scanbe__balance__typeSec--ahiru {
  background-image: url(../img/animal/animal_bg03_sp.png);
}
.scanbe__balance__typeSec--ashika {
  background-image: url(../img/animal/animal_bg04_sp.png);
}
.scanbe__balance__typeSec--kirin {
  background-image: url(../img/animal/animal_bg05_sp.png);
}
.scanbe__balance__typeSec--neko {
  background-image: url(../img/animal/animal_bg06_sp.png);
}
.scanbe__balance__typeSecTitle {
  max-width: 63vw;
  margin: -9vw auto 9.067vw;
  padding-block: 16.5vw 6.5vw;
  font-size: 4.267vw;
  font-weight: bold;
  background: url(../img/animal/animal_title_sp.png) no-repeat center center;
  background-size: 100%;
  text-align: center;
}
.scanbe__balance__typeFeature {
  text-align: center;
}
.scanbe__balance__typeSec--mia .scanbe__balance__typeFeatureImg img {
  width: 19vw;
}
.scanbe__balance__typeSec--panda .scanbe__balance__typeFeatureImg img {
  width: 27vw;
}
.scanbe__balance__typeSec--ahiru .scanbe__balance__typeFeatureImg img {
  width: 32.8vw;
}
.scanbe__balance__typeSec--ashika .scanbe__balance__typeFeatureImg img {
  width: 31.733vw;
}
.scanbe__balance__typeSec--kirin .scanbe__balance__typeFeatureImg img {
  width: 35.467vw;
}
.scanbe__balance__typeSec--neko .scanbe__balance__typeFeatureImg img {
  width: 29.6vw;
}
.scanbe__balance__typeFeatureText {
  font-size: 4vw;
  font-weight: bold;
  line-height: 1.8;
}
.scanbe__balance__typeProfile {
  position: relative;
  max-width: 76vw;
  height: 85.5vw;
  padding: 9.5vw 7.5vw 0;
  background: url(../img/animal/animal_profile_img_sp.png) no-repeat center top;
  background-size: 100%;
}
.scanbe__balance__typeProfile dt {
  margin-block: 0 4vw;
  text-align: center;
}
.scanbe__balance__typeProfile dt img {
  width: 22.133vw;
}
.scanbe__balance__profileText {
  font-size: 4vw;
  line-height: 1.8;
}
.scanbe__balance__profileImg {
  height: 38vw;
  margin-block: 8vw 0;
  margin-left: 4.8vw;
}
.scanbe__balance__typeSec--mia .scanbe__balance__profileImg {
  width: 27vw;
}
.scanbe__balance__typeSec--panda .scanbe__balance__profileImg {
  width: 28vw;
}
.scanbe__balance__typeSec--ahiru .scanbe__balance__profileImg {
  width: 30.133vw;
}
.scanbe__balance__typeSec--ashika .scanbe__balance__profileImg {
  width: 30.133vw;
}
.scanbe__balance__typeSec--kirin .scanbe__balance__profileImg {
  width: 28.267vw;
}
.scanbe__balance__typeSec--neko .scanbe__balance__profileImg {
  width: 30.667vw;
}
.scanbe__balance__profileRatio {
  position: absolute;
  right: -5.5vw;
  bottom: 14.5vw;
  width: 34.5vw;
}
.scanbe__balance__typeSlider .swiper-button-next,
.scanbe__balance__typeSlider .swiper-button-prev {
  top: 42%;
}
.scanbe__balance__typeSlider .swiper-button-next {
  right: -15px;
}
.scanbe__balance__typeSlider .swiper-button-prev {
  left: -15px;
}
.scanbe__balance__typeSlider .swiper-pagination {
  top: -32vw;
  bottom: auto;
}
.scanbe .scanbe__balance__typeSlider .swiper-pagination span {
  height: 20vw;
  margin: 0 2vw;
  background-color: unset;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 100%;
  border-radius: 0;
  opacity: 1;
  transform-origin: bottom;
  transition: scale .25s;
}
.scanbe__balance__typeSlider .swiper-pagination span:nth-of-type(1) {
  width: 7vw;
  background-image: url(../img/animal/select_mia.png);
}
.scanbe__balance__typeSlider .swiper-pagination .swiper-pagination-bullet {
  scale: 1;
}
.scanbe__balance__typeSlider .swiper-pagination .swiper-pagination-bullet-active {
  scale: 1.4;
}
.scanbe__balance__typeSlider .swiper-pagination .swiper-pagination-bullet-active:nth-of-type(1) {
  background-image: url(../img/animal/select_mia_active.png);
}
.scanbe__balance__typeSlider .swiper-pagination span:nth-of-type(2) {
  width: 9vw;
  background-image: url(../img/animal/select_panda.png);
}
.scanbe__balance__typeSlider .swiper-pagination .swiper-pagination-bullet-active:nth-of-type(2) {
  background-image: url(../img/animal/select_panda_active.png);
}
.scanbe__balance__typeSlider .swiper-pagination span:nth-of-type(3) {
  width: 11.5vw;
  background-image: url(../img/animal/select_ahiru.png);
}
.scanbe__balance__typeSlider .swiper-pagination .swiper-pagination-bullet-active:nth-of-type(3) {
  background-image: url(../img/animal/select_ahiru_active.png);
}
.scanbe__balance__typeSlider .swiper-pagination span:nth-of-type(4) {
  width: 12vw;
  background-image: url(../img/animal/select_ashika.png);
}
.scanbe__balance__typeSlider .swiper-pagination .swiper-pagination-bullet-active:nth-of-type(4) {
  background-image: url(../img/animal/select_ashika_active.png);
}
.scanbe__balance__typeSlider .swiper-pagination span:nth-of-type(5) {
  width: 13vw;
  background-image: url(../img/animal/select_kirin.png);
}
.scanbe__balance__typeSlider .swiper-pagination .swiper-pagination-bullet-active:nth-of-type(5) {
  background-image: url(../img/animal/select_kirin_active.png);
}
.scanbe__balance__typeSlider .swiper-pagination span:nth-of-type(6) {
  width: 11vw;
  background-image: url(../img/animal/select_neko.png);
}
.scanbe__balance__typeSlider .swiper-pagination .swiper-pagination-bullet-active:nth-of-type(6) {
  background-image: url(../img/animal/select_neko_active.png);
}

/* encounter / areamap */
.scanbe__balance__encounter,
.scanbe__balance__areamap {
  position: relative;
  text-align: center;
}
.scanbe__balance__encounter::before,
.scanbe__balance__areamap::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  z-index: -1;
}
.scanbe__balance__encounterTitle,
.scanbe__balance__areamapTitle {
  max-width: 89.6vw;
  margin: 0 auto 8.5vw;
  padding-block: 7.5vw 10.5vw;
  font-size: 4.8vw;
  font-weight: bold;
  background: url(../img/title_type_01.svg) no-repeat center top;
  background-size: 100%;
}
.scanbe__balance__encounterText,
.scanbe__balance__areamapText {
  margin-block: 0 12vw;
  font-size: 4.267vw;
  font-weight: bold;
}
.scanbe__balance__encounterImg,
.scanbe__balance__areamapImg {
  margin-inline: auto;
}

/* encounter */
.scanbe__balance__encounter {
  margin-block: 20vw 0;
  padding-block: 15vw 18vw;
}
.scanbe__balance__encounter::before {
  background: url(../img/animal/bg_blue_sp.png) no-repeat center top;
  background-size: 100%;
}
.scanbe__balance__encounterImg {
  max-width: 80vw;
}
.scanbe__balance__encounterNote {
  display: block;
  margin-block: 8vw 0;
  font-size: 3.733vw;
}

/* areamap */
.scanbe__balance__areamap {
  margin-block: -10vw 0;
  padding-block: 25vw;
}
.scanbe__balance__areamap::before {
  background: url(../img/animal/bg_green_sp.png) no-repeat center top;
  background-size: 100%;
}
.scanbe__balance__areamapImg {
  max-width: 91vw;
}

@media screen and (max-width: 767px) {
  
  /* outline */
  .scanbe__balance__outlineText {
    max-width: 85vw;
    margin: 7.2vw auto 0;
    text-align: left;
  }
  .scanbe__balance__flowList {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 0 30.5vw;
    overflow-x: scroll;
    white-space: nowrap;
  }
  .scanbe__balance__flowList::-webkit-scrollbar {
    display: none;
  }
  .scanbe__balance__flowList li {
    display: inline-flex;
    justify-content: center;
  }
  .scanbe__balance__flowList li + li {
    margin: 0 0 0 14.667vw;
  }

  /* secret */
  .scanbe__balance__secretLead {
    text-align: left;
  }

  /* selfcheck */
  .scanbe__balance__selfcheckLead {
    max-width: 80vw;
    margin-inline: auto;
  }
  .scanbe__balance__selfcheckBoxQInner {
    padding: 3vw 4vw 53.5vw;
  }
  .scanbe__balance__selfcheckQNumber,
  .scanbe__balance__selfcheckText {
    display: inline-block;
    vertical-align: top;
  }
  .scanbe__balance__selfcheckQNumber {
    margin-right: 4vw;
  }
  .scanbe__balance__selfcheckText {
    width: 59vw;
    text-align: left;
  }
  .scanbe__balance__resultImg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    height: 42vw;
    padding-block: 4vw 0;
  }
  .scanbe__balance__resultText {
    padding-block: 4vw 0;
  }
  
  /* type */
  .scanbe__balance__type {
    max-width: 89.6vw;
    margin: 14vw auto 0;
  }
  .scanbe__balance__typeSec--kirin .scanbe__balance__typeSecTitle {
    margin: -9vw auto 4.8vw;
  }
  .scanbe__balance__typeFeature {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
  }
  .scanbe__balance__typeFeatureImg,
  .scanbe__balance__typeFeatureText {
    width: 40%;
  }
  .scanbe__balance__typeProfile {
    margin: 7vw auto 0;
  }
  .scanbe__balance__typeSec--panda .scanbe__balance__typeProfile {
    margin: 9.5vw auto 0;
  }
  .scanbe__balance__typeSec--neko .scanbe__balance__typeProfile {
    margin: 9vw auto 0;
  }
  .scanbe__balance__typeSec--kirin .scanbe__balance__profileImg {
    margin-block: 6.667vw 0;
    margin-left: 2.667vw;
  }
  .scanbe__balance__typeSec--neko .scanbe__balance__profileImg {
    margin-block: 2.133vw 0;
    margin-left: 2.667vw;
  }

  /* areamap */
  .scanbe__balance__areamapText {
    max-width: 85vw;
    margin-inline: auto;
    line-height: 1.6;
  }

}

@media screen and (min-width: 768px) {

  .scanbe__balance {
    padding: 2rem 0 0;
  }

  /* タブボタン */
  .scanbe__balance__tabBtn {
    top: 6.4rem;
    justify-content: center;
    gap: 0 1rem;
    padding: 4rem 0 0;
  }
  .scanbe__balance__tabBtn--animated {
    top: 4rem;
  }
  .scanbe__balance__tabBtn li {
    width: 24rem;
    height: 5rem;
    border-radius: .8rem .8rem 0 0;
    font-size: 1.4rem;
  }
  .scanbe__balance__tabBtn li:not(.active) {
    cursor: pointer;
  }
  .scanbe__balance__tabBtn--service:not(.active):hover {
    background: #7EB9CE;
  }
  .scanbe__balance__tabBtn--animal:not(.active):hover {
    background: #F8DF8D;
  }

  /* タブコンテンツ */
  .scanbe__balance__tabContent {
    padding: 13rem 0;
  }
  .scanbe__balance__tabContent--animal {
    padding: 13rem 0 0;
  }
  .scanbe__balance__title {
    max-width: 62.2rem;
    margin: 0 auto 2.5rem;
  }
  .scanbe__balance__lead {
    max-width: 74.2rem;
    margin-inline: auto;
    padding: 14rem 0;
    margin-block: -14rem 0;
    background: url(../img/service/bg_balloon_01_pc.png) no-repeat center center;
    background-size: contain;
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 2;
    text-align: center;
  }

  /* タブごとの背景設定 */
  .scanbe__balance__tabContent--service::before {
    background: url(../img/service/bg_balance_pc.png) no-repeat center top #7EB9CE;
    background-size: cover;
  }
  .scanbe__balance__tabContent--animal::before {
    background: url(../img/animal/bg_yellow_pc.png) no-repeat center top -7rem;
    background-size: 2560px;
  }

  /* service */
  .scanbe__balance__service {
    max-width: 74.2rem;
    margin-block: -8rem 0;
    padding: 8.5rem 7.5rem;
  }
  .scanbe__balance__service + .scanbe__balance__service {
    margin-block: 9.5rem 0;
  }
  .scanbe__balance__service + .scanbe__balance__service--03 {
    margin-block: 15rem 0;
  }
  .scanbe__balance__service--01 {
    background-image: url(../img/service/service_box_01_pc.svg);
  }
  .scanbe__balance__service--02 {
    background-image: url(../img/service/service_box_02_pc.svg);
  }
  .scanbe__balance__service--03 {
    background-image: url(../img/service/service_box_03_pc.svg);
  }
  .scanbe__balance__service--04 {
    background-image: url(../img/service/service_box_04_pc.svg);
  }
  .scanbe__balance__serviceTitle {
    max-width: 39.5rem;
    margin-block: -11.5rem 4.5rem;
    padding-block: 1.9rem 2.5rem;
    font-size: 2.4rem;
  }
  .scanbe__balance__service--01 .scanbe__balance__serviceTitle {
    background-image: url(../img/service/service_title_01_pc.svg);
  }
  .scanbe__balance__service--02 .scanbe__balance__serviceTitle {
    background-image: url(../img/service/service_title_02_pc.svg);
  }
  .scanbe__balance__service--03 .scanbe__balance__serviceTitle {
    background-image: url(../img/service/service_title_03_pc.svg);
  }
  .scanbe__balance__service--04 .scanbe__balance__serviceTitle {
    background-image: url(../img/service/service_title_04_pc.svg);
  }
  .scanbe__balance__serviceText {
    margin-block: 3rem 0;
    font-size: 1.6rem;
  }
  .scanbe__balance__serviceSlider .swiper-button-next,
  .scanbe__balance__serviceSlider .swiper-button-prev {
    top: 43%;
  }
  .scanbe__balance__serviceSlider .swiper-button-next {
    right: 57px;
  }
  .scanbe__balance__serviceSlider .swiper-button-prev {
    left: 57px;
  }
  .scanbe__balance__animalBtn {
    max-width: 30.4rem;
    bottom: -3.3rem;
  }
  .scanbe__balance__animalBtn a {
    padding-block: 3rem;
    padding-inline: 8rem 0;
    border: solid 2px #000;
    border-radius: 5rem;
    font-size: 2.2rem;
  }
  .scanbe__balance__animalBtn a:hover {
    background-color: #fff;
    opacity: 1;
  }
  .scanbe__balance__animalBtn a::before {
    left: -7rem;
    width: 14.2rem;
    height: 14.2rem;
  }

  /* outline / secret */
  .scanbe__balance__outline,
  .scanbe__balance__secret {
    max-width: 128rem;
    margin-inline: auto;
    background: url(../img/service/bg_balloon_02_pc.png) no-repeat center top;
    background-size: 130rem;
  }
  .scanbe__balance__outlineTitle,
  .scanbe__balance__secretTitle {
    max-width: 32.2rem;
    padding-block: 2.4rem 3.4rem;
    font-size: 2.4rem;
  }

  /* outline */
  .scanbe__balance__outline {
    margin-block: 7.5rem 0;
    padding-block: 4rem 5.5rem;
  }
  .scanbe__balance__outlineTitle {
    margin: 0 auto 3rem;
  }
  .scanbe__balance__outlineInfo {
    gap: 0 2rem;
  }
  .scanbe__balance__outlineInfo li {
    width: 15.8rem;
    padding-block: 1.5rem;
    border-radius: 3rem;
    font-size: 1.6rem;
  }
  .scanbe__balance__outlineText {
    margin-block: 2rem 0;
    font-size: 1.6rem;
    font-weight: bold;
  }
  .scanbe__balance__outlineFlow {
    margin-block: 2rem 0;
  }
  .scanbe__balance__flowTitle {
    margin-block: 0 2rem;
    font-size: 2.0rem;
  }
  .scanbe__balance__flowList {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    max-width: 74.2rem;
    margin: 1.8rem auto 0;
  }
  .scanbe__balance__flowList li {
    width: 14.4rem;
  }
  .scanbe__balance__flowList li:not(:last-child) .scanbe__balance__flowImg::after {
    right: -4.7rem;
    width: 4rem;
    height: 1.5rem;
  }
  .scanbe__balance__flowText {
    margin-top: 1.5rem;
    font-size: 1.6rem;
  }
  .scanbe__balance__outlineReserve {
    max-width: 21.9rem;
    margin-block: 2.5rem 0;
    font-size: 2.0rem;
  }
  .scanbe__balance__outlineReserve a {
    padding-block: 2rem;
    border-radius: 3.5rem;
  }
  .scanbe__balance__outlineReserve a:hover {
    background-color: #fff;
    opacity: 1;
  }

  /* secret */
  .scanbe__balance__secret {
    padding-block: 6rem 14rem;
  }
  .scanbe__balance__secretTitle {
    margin: 0 auto 4rem;
  }
  .scanbe__balance__secretInner {
    max-width: 62rem;
  }
  .scanbe__balance__secretLead {
    margin-block: 0 4rem;
    font-size: 1.6rem;
    line-height: 1.8;
  }
  .scanbe .scanbe__balance__secretImg {
    display: flex;
    flex-wrap: wrap;
    gap: 0 6rem;
    justify-content: center;
    margin-block: 0 4rem;
  }
  .scanbe .scanbe__balance__secretImg--scanbe {
    width: 11.6rem;
  }
  .scanbe .scanbe__balance__secretImg--hsrc {
    width: 41.5rem;
    margin-block: 0;
  }
  .scanbe__balance__secretText {
    font-size: 1.4rem;
    line-height: 1.8;
  }

  /* object */
  .scanbe__balance__obj {
    display: block;
    position: absolute;
    left: 50%;
  }
  .scanbe__balance__obj--01 {
    top: 14rem;
    width: 21rem;
    transform: translateX(-64rem);
  }
  .scanbe__balance__obj--02 {
    top: 47rem;
    width: 11.5rem;
    transform: translateX(48.8rem);
  }
  .scanbe__balance__obj--03 {
    top: 64rem;
    width: 11.5rem;
    transform: translateX(-48.6rem);
  }
  .scanbe__balance__obj--04 {
    top: 94rem;
    width: 8.3rem;
    transform: translateX(40.5rem);
  }
  .scanbe__balance__obj--05 {
    top: 104rem;
    width: 12.2rem;
    transform: translateX(-57rem);
  }
  .scanbe__balance__obj--06 {
    top: 124rem;
    width: 11.5rem;
    transform: translateX(48.7rem);
  }
  .scanbe__balance__obj--07 {
    top: 144rem;
    width: 15.6rem;
    transform: translateX(-57rem);
  }
  .scanbe__balance__obj--08 {
    top: 166rem;
    width: 16.5rem;
    transform: translateX(48.1rem);
  }
  .scanbe__balance__obj--09 {
    top: 208rem;
    width: 6.5rem;
    transform: translateX(-53.5rem);
  }
  .scanbe__balance__obj--10 {
    top: 200rem;
    width: 13.2rem;
    transform: translateX(36rem);
  }
  .scanbe__balance__obj--11 {
    top: 254rem;
    width: 11.5rem;
    transform: translateX(-56.9rem);
  }
  .scanbe__balance__obj--12 {
    top: 257rem;
    width: 12.3rem;
    transform: translateX(52rem);
  }
  .scanbe__balance__obj--13 {
    top: 297rem;
    width: 11.5rem;
    transform: translateX(42rem);
  }
  .scanbe__balance__obj--14 {
    top: 312rem;
    width: 11rem;
    transform: translateX(-51.1rem);
  }
  .scanbe__balance__obj--15 {
    top: 347rem;
    width: 12.2rem;
    transform: translateX(39.6rem);
  }
  .scanbe__balance__obj--16 {
    top: 375rem;
    width: 15rem;
    transform: translateX(-60.3rem);
  }
  .scanbe__balance__obj--17 {
    top: 395rem;
    width: 16.5rem;
    transform: translateX(47.5rem);
  }
  .scanbe__balance__obj--18 {
    top: 425rem;
    width: 7.9rem;
    transform: translateX(-65rem);
  }
  .scanbe__balance__obj--19 {
    top: 457rem;
    width: 4.5rem;
    transform: translateX(41.2rem);
  }

  /* selfcheck */
  .scanbe__balance__selfcheckTitle {
    max-width: 73.6rem;
    margin: 0 auto 2rem;
  }
  .scanbe__balance__selfcheckLead {
    margin-block: 0 2.5rem;
    font-size: 1.6rem;
  }
  .scanbe__balance__selfcheckBox {
    max-width: 74.2rem;
  }
  .scanbe__balance__selfcheckQNumber {
    margin-block: 0 2rem;
    font-size: 3.6rem;
  }
  .scanbe__balance__selfcheckText {
    font-size: 1.6rem;
  }
  .scanbe__balance__selfcheckBoxQ {
    padding: 2.3rem;
    border: solid 2px #000;
    border-bottom: none;
  }
  .scanbe__balance__selfcheckBoxQInner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 26rem;
    padding-right: 50%;
    border: solid 2px #000;
  }
  .scanbe__balance__selfcheckBoxQ--q1 .scanbe__balance__selfcheckBoxQInner {
    background-position: right 7.5rem center;
    background-size: 20rem;
  }
  .scanbe__balance__selfcheckBoxQ--d1 .scanbe__balance__selfcheckBoxQInner {
    background-position: right 7.5rem center;
    background-size: 17rem;
  }
  .scanbe__balance__selfcheckBoxQ--d2 .scanbe__balance__selfcheckBoxQInner {
    background-position: right 10.5rem center;
    background-size: 13.4rem;
  }
  .scanbe__balance__selfcheckBoxQ--q2 .scanbe__balance__selfcheckBoxQInner {
    background-position: right 10.5rem center;
    background-size: 16.4rem;
  }
  .scanbe__balance__selfcheckBoxQ--q3 .scanbe__balance__selfcheckBoxQInner {
    background-position: right 3rem center;
    background-size: 31.7rem;
  }
  .scanbe__balance__selfcheckBoxQ--d3 .scanbe__balance__selfcheckBoxQInner {
    background-position: right 10.5rem center;
    background-size: 15.7rem;
  }
  .scanbe__balance__selfcheckBoxA button {
    padding-block: 3.5rem;
    border: solid 2px #000;
    font-size: 3.6rem;
  }
  .scanbe__balance__selfcheckResult {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    max-width: 74.4rem;
    background: url(../img/animal/bg_result_pc.png) no-repeat center center;
    background-size: 100% auto;
  }
  .scanbe__balance__selfcheckResult.show {
    height: auto;
    padding: 4rem;
  }
  .scanbe__balance__resultText,
  .scanbe__balance__resultImg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 50%;
    height: 33.4rem;
  }
  .scanbe__balance__resultText {
    font-size: 1.6rem;
  }
  #ashika .scanbe__balance__resultImg {
    padding-right: 4rem;
  }
  #mia .scanbe__balance__resultImg img {
    width: 9.2rem;
  }
  #panda .scanbe__balance__resultImg img {
    width: 12rem;
  }
  #ahiru .scanbe__balance__resultImg img {
    width: 15.4rem;
  }
  #ashika .scanbe__balance__resultImg img {
    width: 15.8rem;
  }
  #kirin .scanbe__balance__resultImg img {
    width: 15.4rem;
  }
  #neko .scanbe__balance__resultImg img {
    width: 15.4rem;
  }

  /* type */
  .scanbe__balance__type {
    margin-block: 16rem 0;
  }
  .scanbe__balance__typeTitle {
    max-width: 80.6rem;
    margin: 0 auto 6rem;
  }
  .scanbe__balance__typeText {
    font-size: 1.6rem;
  }
  .scanbe__balance__typeSlider {
    max-width: 74.4rem;
    margin: 31rem auto 0;
  }
  .scanbe .scanbe__balance__typeSec {
    height: 57.7rem;
  }
  .scanbe__balance__typeSec--mia {
    background-image: url(../img/animal/animal_bg01_pc.png);
  }
  .scanbe__balance__typeSec--panda {
    background-image: url(../img/animal/animal_bg02_pc.png);
  }
  .scanbe__balance__typeSec--ahiru {
    background-image: url(../img/animal/animal_bg03_pc.png);
  }
  .scanbe__balance__typeSec--ashika {
    background-image: url(../img/animal/animal_bg04_pc.png);
  }
  .scanbe__balance__typeSec--kirin {
    background-image: url(../img/animal/animal_bg05_pc.png);
  }
  .scanbe__balance__typeSec--neko {
    background-image: url(../img/animal/animal_bg06_pc.png);
  }
  .scanbe__balance__typeSecTitle {
    max-width: 34.4rem;
    margin: -5.5rem auto 4.8rem;
    padding-block: 9rem 3.5rem;
    font-size: 2.4rem;
    background: url(../img/animal/animal_title_pc.png) no-repeat center center;
    background-size: 100%;
  }
  .scanbe__balance__typeSecInner {
    display: flex;
    flex-wrap: wrap;
  }
  .scanbe__balance__typeFeature {
    width: 50%;
  }
  .scanbe__balance__typeSec--mia .scanbe__balance__typeFeatureImg img {
    width: 10.9rem;
  }
  .scanbe__balance__typeSec--panda .scanbe__balance__typeFeatureImg img {
    width: 14.6rem;
  }
  .scanbe__balance__typeSec--ahiru .scanbe__balance__typeFeatureImg img {
    width: 17.5rem;
  }
  .scanbe__balance__typeSec--ashika .scanbe__balance__typeFeatureImg img {
    width: 18.3rem;
  }
  .scanbe__balance__typeSec--kirin .scanbe__balance__typeFeatureImg img {
    width: 23rem;
  }
  .scanbe__balance__typeSec--neko .scanbe__balance__typeFeatureImg img {
    width: 17rem;
  }
  .scanbe__balance__typeFeatureText {
    margin-block: 4.5rem 0;
    font-size: 1.6rem;
  }
  .scanbe__balance__typeSec--kirin .scanbe__balance__typeFeatureText {
    margin-block: 2rem 0;
  }
  .scanbe__balance__typeProfile {
    max-width: 32rem;
    height: 36.4rem;
    padding: 4.5rem 4.5rem 0;
    background: url(../img/animal/animal_profile_img_pc.png) no-repeat center top;
    background-size: 100%;
  }
  .scanbe__balance__typeProfile dt {
    margin-block: 0 2.5rem;
  }
  .scanbe__balance__typeProfile dt img {
    width: 8.3rem;
  }
  .scanbe__balance__profileText {
    font-size: 1.6rem;
  }
  .scanbe__balance__profileImg {
    height: auto;
    margin: 3rem 0 0;
  }
  .scanbe__balance__typeSec--mia .scanbe__balance__profileImg {
    width: 11.5rem;
  }
  .scanbe__balance__typeSec--panda .scanbe__balance__profileImg {
    width: 11.8rem;
  }
  .scanbe__balance__typeSec--ahiru .scanbe__balance__profileImg {
    width: 12.5rem;
  }
  .scanbe__balance__typeSec--ashika .scanbe__balance__profileImg {
    width: 12.5rem;
  }
  .scanbe__balance__typeSec--kirin .scanbe__balance__profileImg {
    width: 12.5rem;
  }
  .scanbe__balance__typeSec--neko .scanbe__balance__profileImg {
    width: 11.5rem;
    margin: 2rem 0 0;
  }
  .scanbe__balance__profileRatio {
    right: -2.5rem;
    bottom: -1rem;
    width: 12.9rem;
  }
  .scanbe__balance__typeSlider .swiper-button-next,
  .scanbe__balance__typeSlider .swiper-button-prev {
    display: none;
  }
  .scanbe__balance__typeSlider .swiper-pagination {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
    top: -26rem;
  }
  .scanbe .scanbe__balance__typeSlider .swiper-pagination span {
    height: 14.8rem;
    margin: 0 2.8rem;
  }
  .scanbe__balance__typeSlider .swiper-pagination .swiper-pagination-bullet-active {
    scale: 1.3;
  }
  .scanbe__balance__typeSlider .swiper-pagination span:nth-of-type(1) {
    width: 5.1rem;
  }
  .scanbe__balance__typeSlider .swiper-pagination span:nth-of-type(1):hover {
    background-image: url(../img/animal/select_mia_active.png);
  }
  .scanbe__balance__typeSlider .swiper-pagination span:nth-of-type(2) {
    width: 6.9rem;
  }
  .scanbe__balance__typeSlider .swiper-pagination span:nth-of-type(2):hover {
    background-image: url(../img/animal/select_panda_active.png);
  }
  .scanbe__balance__typeSlider .swiper-pagination span:nth-of-type(3) {
    width: 8.3rem;
  }
  .scanbe__balance__typeSlider .swiper-pagination span:nth-of-type(3):hover {
    background-image: url(../img/animal/select_ahiru_active.png);
  }
  .scanbe__balance__typeSlider .swiper-pagination span:nth-of-type(4) {
    width: 8.7rem;
  }
  .scanbe__balance__typeSlider .swiper-pagination span:nth-of-type(4):hover {
    background-image: url(../img/animal/select_ashika_active.png);
  }
  .scanbe__balance__typeSlider .swiper-pagination span:nth-of-type(5) {
    width: 10.1rem;
  }
  .scanbe__balance__typeSlider .swiper-pagination span:nth-of-type(5):hover {
    background-image: url(../img/animal/select_kirin_active.png);
  }
  .scanbe__balance__typeSlider .swiper-pagination span:nth-of-type(6) {
    width: 8.1rem;
  }
  .scanbe__balance__typeSlider .swiper-pagination span:nth-of-type(6):hover {
    background-image: url(../img/animal/select_neko_active.png);
  }

  /* encounter / areamap */
  .scanbe__balance__encounterTitle,
  .scanbe__balance__areamapTitle {
    max-width: 32.2rem;
    margin: 0 auto 3.5rem;
    padding-block: 2.4rem 3.4rem;
    font-size: 2.4rem;
  }
  .scanbe__balance__encounterText,
  .scanbe__balance__areamapText {
    margin-block: 0 4rem;
    font-size: 1.6rem;
  }

  /* encounter */
  .scanbe__balance__encounter {
    margin-block: 23.5rem 0;
    padding-block: 10.5rem 12rem;
  }
  .scanbe__balance__encounter::before {
    background: url(../img/animal/bg_blue_pc.png) no-repeat center top;
    background-size: 2560px;
  }
  .scanbe__balance__encounterImg {
    max-width: 57.8rem;
  }
  .scanbe__balance__encounterNote {
    margin-block: 5.5rem 0;
    font-size: 1.4rem;
  }

  /* areamap */
  .scanbe__balance__areamap {
    margin-block: -3.5rem 0;
    padding-block: 10.5rem 12rem;
  }
  .scanbe__balance__areamap::before {
    background: url(../img/animal/bg_green_pc.png) no-repeat center top;
    background-size: 2560px;
  }
  .scanbe__balance__areamapImg {
    max-width: 75.2rem;
  }

}