.card {
 display: block;
 max-width: 1120px;
 margin: 0 auto
}

.card--margin {
 margin-top: 36px
}

@media screen and (max-width: 767px) {
 .card--margin {
 margin-top: 25px
 }

}

.card__item {
 position: relative;
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 width: 100%;
 margin: 93px 0 0;
 padding: 138px 0 0
}

@media screen and (max-width: 767px) {
 .card__item {
 margin: 58px 0 0;
 padding: 144px 0 0
 }

}

.card__item:first-child {
 margin-top: 0
}

@media screen and (max-width: 767px) {
 .card__item:first-child {
 margin-top: 0
 }

}

.card__item:nth-child(odd) .card__item-bg {
  left: 0
}

@media screen and (max-width: 767px) {
  .card__item:nth-child(odd) .card__item-bg {
  left: 15px
  }

}

.card__item:nth-child(odd) .card__item-content {
  margin: 0 0 0 auto
}

.card__item:nth-child(2n) .card__item-bg {
  right: 0
}

@media screen and (max-width: 767px) {
  .card__item:nth-child(2n) .card__item-bg {
  right: 15px
  }

}

.card__item:nth-child(2n) .card__item-content {
  margin: 0 auto 0 0
}

.card__item.js-scroll-show .card__item-bg-image {
  opacity: 0;
  -webkit-transition: opacity 0s ease .5s;
  transition: opacity 0s ease .5s
}

.card__item.js-scroll-show .card__item-bg-mask {
 -webkit-transform: rotateY(90deg);
 transform: rotateY(90deg);
 -webkit-transform-origin: left;
 transform-origin: left;
 background-color: #0e192d;
 -webkit-transition: background-color 0s linear .35s, -webkit-transform .6s cubic-bezier(.935, .015, .335, .92) 0s;
 transition: background-color 0s linear .35s, -webkit-transform .6s cubic-bezier(.935, .015, .335, .92) 0s;
 transition: transform .6s cubic-bezier(.935, .015, .335, .92) 0s, background-color 0s linear .35s;
 transition: transform .6s cubic-bezier(.935, .015, .335, .92) 0s, background-color 0s linear .35s, -webkit-transform .6s cubic-bezier(.935, .015, .335, .92) 0s
}

.card__item.js-scroll-show .card__item-bg-mask i {
 -webkit-transform: rotateY(0deg);
 transform: rotateY(0deg);
 -webkit-transition: -webkit-transform .5s cubic-bezier(.935, .015, .335, .92);
 transition: -webkit-transform .5s cubic-bezier(.935, .015, .335, .92);
 transition: transform .5s cubic-bezier(.935, .015, .335, .92);
 transition: transform .5s cubic-bezier(.935, .015, .335, .92), -webkit-transform .5s cubic-bezier(.935, .015, .335, .92)
}

.card__item.js-scroll-show .card__item__bg__mask i:first-child {
 -webkit-transition-delay: .6s;
 transition-delay: .6s;
 -webkit-transform-origin: left;
 transform-origin: left
}

.card__item.js-scroll-show .card__item__bg__mask i:nth-child(2), .card__item.js-scroll-show .card__item__bg__mask i:nth-child(3) {
 -webkit-transition-delay: .6s;
 transition-delay: .6s;
 -webkit-transform-origin: right;
 transform-origin: right
}

.card__item.js-scroll-show .card__item__bg__mask i:nth-child(4) {
 -webkit-transition-delay: .6s;
 transition-delay: .6s;
 -webkit-transform-origin: left;
 transform-origin: left
}

.card__item.js-scroll-show .card__item__bg__mask i:nth-child(5), .card__item.js-scroll-show .card__item__bg__mask i:nth-child(6) {
 -webkit-transition-delay: .6s;
 transition-delay: .6s;
 -webkit-transform-origin: right;
 transform-origin: right
}

.card__item.js-scroll-show .card__item__bg__mask i:nth-child(7), .card__item.js-scroll-show .card__item__bg__mask i:nth-child(8) {
 -webkit-transition-delay: .6s;
 transition-delay: .6s;
 -webkit-transform-origin: left;
 transform-origin: left
}

.card__item.js-scroll-show .card__item__bg__mask i:nth-child(9), .card__item.js-scroll-show .card__item__bg__mask i:nth-child(10) {
 -webkit-transition-delay: .6s;
 transition-delay: .6s;
 -webkit-transform-origin: right;
 transform-origin: right
}

.card__item.js-scroll-show .card__item__bg__mask i:nth-child(11) {
 -webkit-transition-delay: .6s;
 transition-delay: .6s;
 -webkit-transform-origin: left;
 transform-origin: left
}

.card__item.js-scroll-show .card__item__bg__mask i:nth-child(12), .card__item.js-scroll-show .card__item__bg__mask i:nth-child(13) {
 -webkit-transition-delay: .6s;
 transition-delay: .6s;
 -webkit-transform-origin: right;
 transform-origin: right
}

.card__item.js-scroll-show .card__item__bg__mask i:nth-child(14), .card__item.js-scroll-show .card__item__bg__mask i:nth-child(15) {
 -webkit-transition-delay: .6s;
 transition-delay: .6s;
 -webkit-transform-origin: left;
 transform-origin: left
}

.card__item.js-scroll-show .card__item__bg__mask i:nth-child(16), .card__item.js-scroll-show .card__item__bg__mask i:nth-child(17) {
 -webkit-transition-delay: .6s;
 transition-delay: .6s;
 -webkit-transform-origin: right;
 transform-origin: right
}

.card__item.js-scroll-show .card__item__bg__mask i:nth-child(18) {
 -webkit-transition-delay: .6s;
 transition-delay: .6s;
 -webkit-transform-origin: left;
 transform-origin: left
}

.card__item.js-scroll-show .card__item__bg__mask i:nth-child(19), .card__item.js-scroll-show .card__item__bg__mask i:nth-child(20) {
 -webkit-transition-delay: .6s;
 transition-delay: .6s;
 -webkit-transform-origin: right;
 transform-origin: right
}

.card__item.js-scroll-show .card__item__bg__mask i:nth-child(21), .card__item.js-scroll-show .card__item__bg__mask i:nth-child(22) {
 -webkit-transition-delay: .6s;
 transition-delay: .6s;
 -webkit-transform-origin: left;
 transform-origin: left
}

.card__item.js-scroll-show .card__item__bg__mask i:nth-child(23), .card__item.js-scroll-show .card__item__bg__mask i:nth-child(24) {
 -webkit-transition-delay: .6s;
 transition-delay: .6s;
 -webkit-transform-origin: right;
 transform-origin: right
}

.card__item.js-scroll-show .card__item__bg__mask i:nth-child(25) {
 -webkit-transition-delay: .6s;
 transition-delay: .6s;
 -webkit-transform-origin: left;
 transform-origin: left
}

.card__item.js-scroll-show .card__item-content {
  opacity: 0;
  -webkit-transform: translateY(25px);
  transform: translateY(25px);
  -webkit-transition: all 1s ease 1.5s;
  transition: all 1s ease 1.5s
}

.card__item.js-scroll-show .card__item-status {
  opacity: 0;
  -webkit-transform: translateY(25px);
  transform: translateY(25px);
  -webkit-transition: all 1s ease 1.75s;
  transition: all 1s ease 1.75s
}

.card__item.js-scroll-show .card__item-title {
  opacity: 0;
  -webkit-transform: translateY(25px);
  transform: translateY(25px);
  -webkit-transition: all 1s ease 2s;
  transition: all 1s ease 2s
}

.card__item.js-scroll-show .card__item-message {
  opacity: 0;
  -webkit-transform: translateY(25px);
  transform: translateY(25px);
  -webkit-transition: all 1s ease 2.25s;
  transition: all 1s ease 2.25s
}

.card__item.js-scroll-show .card__item-button {
  opacity: 0;
  -webkit-transform: translateY(25px);
  transform: translateY(25px);
  -webkit-transition: all 1s ease 2.5s;
  transition: all 1s ease 2.5s
}

.card__item.is-show .card__item-bg-image {
  opacity: 1
}

.card__item.is-show .card__item-bg-mask {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
  background-color: rgba(14, 25, 45, 0)
}

.card__item.is-show .card__item-bg-mask i {
  -webkit-transform: rotateY(90deg);
  transform: rotateY(90deg)
}

.card__item.is-show .card__item-button, .card__item.is-show .card__item-content, .card__item.is-show .card__item-message, .card__item.is-show .card__item-status, .card__item.is-show .card__item-title {
  opacity: 1;
  -webkit-transform: translate(0);
  transform: translate(0)
}

.card__item-bg {
  position: absolute;
  top: 0;
  width: calc(100% - 354px);
  height: 404px
}

@media screen and (max-width: 767px) {
  .card__item-bg {
  width: calc(100% - 45px);
  height: 201px
  }

}

.card__item-bg-inner {
  position: relative;
  width: 100%;
  height: 100%
}

.card__item-bg-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: 50%
}

.card__item-bg-mask {
  position: absolute;
  top: 0;
  left: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  background-color: #0e192d;
  font-size: 0
}

.card__item-bg-mask i {
  display: block;
  width: 153px;
  height: 81px;
  background-color: #0e192d;
  font-size: 0
}

@media screen and (max-width: 767px) {
  .card__item-bg-mask i {
  width: 20%;
  height: 41px
  }

}

.card__item-content {
  position: relative;
  z-index: 1;
  display: block;
  width: 560px;
  min-height: 350px;
  padding: 33px 36px;
  background-color: #f5f5f5;
  box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, .2)
}

@media screen and (max-width: 767px) {
  .card__item-content {
  width: calc(100% - 45px);
  min-height: 0;
  padding: 24px 30px 23px 27px
  }

}

.card__item-status {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.57;
  will-change: transform
}

@media screen and (max-width: 767px) {
  .card__item-status {
  font-size: 11px
  }

}

.card__item-status-number {
  display: block
}

.card__item-status-number:before {
  content: "-";
  display: inline-block
}

.card__item-status-name {
  display: block
}

.card__item-title {
  display: block;
  margin: 1px 0 0;
  font-size: 56px;
  font-family: YakuHanJP, Montserrat, sans-serif;
  font-weight: 700;
  line-height: 1.5;
  will-change: transform
}

@media screen and (max-width: 767px) {
  .card__item-title {
  font-size: 34px;
  line-height: 1.3;
  margin: 12px 0 0
  }

}

.card__item-message {
  display: block;
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 2;
  will-change: transform
}

@media screen and (max-width: 767px) {
  .card__item-message {
  margin: 8px 0 0;
  font-size: 10px
  }

}

.card__item-button {
  margin: 37px 0 0
}

@media screen and (max-width: 767px) {
  .card__item-button {
  margin: 11px 0 0
  }

}