#area-box {
  position: relative;
  width: 100%
}

@media screen and (min-width: 750px) {
  #area-box {
    padding-top: 4.5833rem;
    height: 75.4166rem
  }
}

@media screen and (max-width: 750px) {
  #area-box {
    padding-top: 8vw;
    overflow: hidden
  }
}

@media screen and (min-width: 750px) {
  #area-box .list-box {
    padding-left: var(--size-padding-box);
    padding-right: var(--size-padding-box);
    margin-top: 3.8333rem
  }
}

@media screen and (max-width: 750px) {
  #area-box .list-box {
    width: 100%;
    height: 67vw;
    padding: 0 6vw;
    margin: 8vw 0 12vw;
    overflow: visible
  }

  #area-box .list-box .swiper-slide {
    height: calc((100% - 10px)/2)
  }

  #area-box .list-box .swiper-pagination {
    --swiper-pagination-color: #00358f;
    bottom: -8vw
  }

  #area-box .list-box .swiper-pagination .swiper-pagination-bullet {
    -webkit-transition-duration: .3s;
    transition-duration: .3s
  }
}

#area-box .list-box .flex {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between
}

#area-box .list-box .flex:not(:first-child) {
  margin-top: 2.3333rem
}

#area-box .list-box .item {
  position: relative;
  -webkit-transition-duration: .5s;
  transition-duration: .5s;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-perspective: 1500px;
  perspective: 1500px
}

@media screen and (min-width: 750px) {
  #area-box .list-box .item {
    max-width: 26.8333rem;
    width: 24%;
    height: 20rem
  }
}

@media screen and (max-width: 750px) {
  #area-box .list-box .item {
    width: 100%;
    height: 100%
  }
}

#area-box .list-box .item:hover .front {
  -webkit-transform: rotate3d(0, 1, 0, -180deg);
  transform: rotate3d(0, 1, 0, -180deg)
}

#area-box .list-box .item:hover .back {
  -webkit-transform: rotate3d(0, 1, 0, 0deg);
  transform: rotate3d(0, 1, 0, 0deg)
}

#area-box .list-box .item>a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  height: 100%;
  line-height: 1;
  -webkit-box-shadow: 1px 1px 12px rgba(0, 0, 0, .1);
  box-shadow: 1px 1px 12px rgba(0, 0, 0, .1);
  border-radius: 16px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition-duration: .5s;
  transition-duration: .5s
}

@media screen and (max-width: 750px) {
  #area-box .list-box .item>a img {
    display: block;
    height: 28px
  }
}

#area-box .list-box .item>a div {
    font-size: 1.5rem;
    text-align: center;
    margin: 1rem 0 1rem;
}

@media screen and (max-width: 750px) {
  #area-box .list-box .item>a div {
    font-size: 1.3333rem;
    margin: 2vw 0
  }
}

#area-box .list-box .item>a p {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  width: 18.3333rem;
  line-height: 1.8;
  text-align: center;
  font-size: 1.1666rem
}

@media screen and (max-width: 750px) {
  #area-box .list-box .item>a p {
    width: 90%;
    margin: 0 auto;
    font-size: 1rem;
    line-height: 1.4
  }
}

#area-box .list-box .item>a.front {
  color: #333;
  background-color: #fff
}

#area-box .list-box .item>a.front p {
  color: #666
}

#area-box .list-box .item>a.back {
  position: absolute;
  left: 0;
  top: 0;
  background-color: #00358f;
  -webkit-transform: rotate3d(0, 1, 0, 180deg);
  transform: rotate3d(0, 1, 0, 180deg)
}

#area-box .list-box .item>a.back img {
  -webkit-filter: grayscale(1) invert(1) brightness(2);
  filter: grayscale(1) invert(1) brightness(2)
}

#area-box .list-box .item>a.back div {
  color: #fff
}

#area-box .list-box .item>a.back p {
  color: #86b3ff
}

#area-box .list-box .details {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 20rem;
  margin: 0 3rem;
  overflow: hidden;
  -webkit-box-shadow: 1px 1px 12px rgba(0, 0, 0, .1);
  box-shadow: 1px 1px 12px rgba(0, 0, 0, .1);
  background-color: var(--color-main);
  border-radius: 16px
}

#area-box .list-box .details:hover .icon {
  -webkit-transform: translateX(95%);
  -ms-transform: translateX(95%);
  transform: translateX(95%)
}

#area-box .list-box .details .item-img {
  display: block;
  width: 35.8333rem;
  height: 100%;
  margin-right: 1.3333rem
}

#area-box .list-box .details .info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  line-height: 1;
  margin-right: auto;
  color: #fff;
  text-align: left
}

#area-box .list-box .details .info .text-1 {
  font-size: 1.5rem
}

#area-box .list-box .details .info .text-2 {
  margin: 1rem 0 1.5rem;
  font-size: 1.3333rem;
  font-weight: 600
}

#area-box .list-box .details .info .text-3 {
  font-size: 2.9166rem
}

#area-box .list-box .details .info .icon {
  display: block;
  margin-top: 1.6666rem;
  -webkit-transition-duration: .3s;
  transition-duration: .3s
}

#area-box .num-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  background-color: #d5ac63;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover
}

@media screen and (min-width: 750px) {
  #area-box .num-box {
    padding-left: var(--size-padding-box);
    padding-right: var(--size-padding-box);
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 5;
    height: 12.5rem
  }
}

@media screen and (max-width: 750px) {
  #area-box .num-box {
    height: 20vw;
    padding: 0 4vw;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
  }

  #area-box .num-box .border {
    display: block;
    height: 60px
  }
}

#area-box .num-box .item {
  color: #fff;
  line-height: 1;
  text-align: center
}

@media screen and (min-width: 750px) {
  #area-box .num-box .item {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    min-width: 0
  }
}

@media screen and (max-width: 750px) {
  #area-box .num-box .item {
    width: 30%
  }
}

#area-box .num-box .item>div {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto 1.1666rem
}

@media screen and (max-width: 750px) {
  #area-box .num-box .item>div {
    margin-bottom: 2vw
  }
}

#area-box .num-box .item>div div,
#area-box .num-box .item>div span {
  position: absolute;
  z-index: 5;
  font-size: 1.5rem
}

@media screen and (max-width: 750px) {

  #area-box .num-box .item>div div,
  #area-box .num-box .item>div span {
    font-size: 1.1666rem
  }
}

#area-box .num-box .item>div span {
  position: absolute;
  right: -0.75em;
  top: -0.25em
}

#area-box .num-box .item>div div {
  position: absolute;
  bottom: 5%;
  right: -1em;
  font-size: 1.5rem
}

@media screen and (max-width: 750px) {
  #area-box .num-box .item>div div {
    font-size: 1rem
  }
}

#area-box .num-box .item>div p {
  font-weight: 600;
  font-size: 2.5rem
}

@media screen and (max-width: 750px) {
  #area-box .num-box .item>div p {
    font-size: 1.5rem
  }
}

#area-box .num-box .item>p {
  font-size: 1.5rem
}

@media screen and (max-width: 750px) {
  #area-box .num-box .item>p {
    font-size: 1.1666rem
  }
}