.miainVisual {
  height: calc(100vh - 100px);
  margin-bottom: 74px;
  display: flex;
  align-items: center;
  padding-left: 9.11vw;
  box-sizing: border-box;
  position: relative;
  overflow: hidden
}

.miainVisual,
.miainVisual:after {
  width: 100%;
  background: #005695;
  background: linear-gradient(60deg, #005695, #3bd0dd);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#005695", endColorstr="#3bd0dd", GradientType=1)
}

.miainVisual:after {
  pointer-events: none;
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: scale(-1);
  transform: scale(-1);
  transition-property: opacity;
  transition-duration: .7s;
  transition-timing-function: cubic-bezier(.8, .005, .17, 1);
  transition-delay: 3.4s
}

.miainVisual--in:after {
  opacity: 0
}

.introObject {
  text-align: center;
  height: 1em;
  font-size: 2.6vw;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.03em;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 5;
  -webkit-transform: translateX(100%) rotateX(270deg) skewX(-15deg);
  transform: translateX(100%) rotateX(270deg) skewX(-15deg);
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  transition-duration: .95s;
  transition-timing-function: cubic-bezier(.8, .005, .17, 1)
}

.introObject--in {
  -webkit-transform: translateX(0) rotateX(0) skewX(-15deg);
  transform: translateX(0) rotateX(0) skewX(-15deg)
}

.introObject--out {
  -webkit-transform: translateX(-100%) rotateX(270deg) skewX(-15deg);
  transform: translateX(-100%) rotateX(270deg) skewX(-15deg)
}

.dummyIntroObject {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 5;
  width: 100%;
  height: 2.5px;
  text-align: center;
  color: #fff;
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic, sans-serif
}

.miainVisual--in .dummyIntroObject {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  transition-duration: .9s;
  transition-timing-function: ease
}

.dummyIntroObject>img {
  height: 2.5px
}

.dummyIntroObject--1 {
  transition-delay: 0s;
  top: -57%
}

.miainVisual--in .dummyIntroObject--1 {
  transition-delay: 0s
}

.dummyIntroObject--2 {
  top: 54%
}

.miainVisual--in .dummyIntroObject--2 {
  transition-delay: .03s
}

.dummyIntroObject--3 {
  top: -20%
}

.miainVisual--in .dummyIntroObject--3 {
  transition-delay: .09s
}

.dummyIntroObject--4 {
  top: 22%
}

.miainVisual--in .dummyIntroObject--4 {
  transition-delay: 1.59s
}

.dummyIntroObject--5 {
  top: -79%
}

.miainVisual--in .dummyIntroObject--5 {
  transition-delay: 1.79s
}

.dummyIntroObject--6 {
  top: 80%
}

.miainVisual--in .dummyIntroObject--6 {
  transition-delay: .16s
}

.dummyIntroObject--7 {
  top: -94%
}

.miainVisual--in .dummyIntroObject--7 {
  transition-delay: .18s
}

.dummyIntroObject--8 {
  top: 89%
}

.miainVisual--in .dummyIntroObject--8 {
  transition-delay: .2s
}

.dummyIntroObject--9 {
  top: -38%
}

.miainVisual--in .dummyIntroObject--9 {
  transition-delay: .26s
}

.dummyIntroObject--10 {
  top: 42%
}

.miainVisual--in .dummyIntroObject--10 {
  transition-delay: .29s
}

.dummyIntroObject--11 {
  top: 34%
}

.miainVisual--in .dummyIntroObject--11 {
  transition-delay: 1.5s
}

.dummyIntroObject--12 {
  top: -41%
}

.miainVisual--in .dummyIntroObject--12 {
  transition-delay: 1.51s
}

.dummyIntroObject--13 {
  top: 92%
}

.miainVisual--in .dummyIntroObject--13 {
  transition-delay: 1.59s
}

.dummyIntroObject--14 {
  top: -89%
}

.miainVisual--in .dummyIntroObject--14 {
  transition-delay: 1.64s
}

.dummyIntroObject--15 {
  top: 77%
}

.miainVisual--in .dummyIntroObject--15 {
  transition-delay: 1.68s
}

.dummyIntroObject--16 {
  top: -80%
}

.miainVisual--in .dummyIntroObject--16 {
  transition-delay: 1.7s
}

.dummyIntroObject--17 {
  top: 26%
}

.miainVisual--in .dummyIntroObject--17 {
  transition-delay: 1.77s
}

.dummyIntroObject--18 {
  top: -22.5%
}

.miainVisual--in .dummyIntroObject--18 {
  transition-delay: 1.79s
}

.dummyIntroObject--19 {
  top: 59%
}

.miainVisual--in .dummyIntroObject--19 {
  transition-delay: 1.84s
}

.dummyIntroObject--20 {
  top: -52%
}

.miainVisual--in .dummyIntroObject--20 {
  transition-delay: 1.9s
}

.miainVisual__box {
  position: relative;
  z-index: 5
}

.miainVisual__ttl {
  font-size: 8.3vw;
  color: #fff;
  line-height: 1
}

.miainVisual__ttlInner {
  display: block;
  -webkit-transform: translateX(100%) rotateX(270deg) scaleY(.01);
  transform: translateX(100%) rotateX(270deg) scaleY(.01);
  opacity: 0
}

.miainVisual--in .miainVisual__ttlInner {
  -webkit-transform: translateX(0) rotateX(0deg) scaleY(1);
  transform: translateX(0) rotateX(0deg) scaleY(1);
  opacity: 1;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  transition-duration: .95s;
  transition-timing-function: cubic-bezier(.8, .005, .17, 1)
}

.miainVisual--in .miainVisual__ttlInner:first-child {
  transition-delay: 3.3s
}

.miainVisual--in .miainVisual__ttlInner:nth-child(2) {
  transition-delay: 3.36s
}

.miainVisual--in .miainVisual__ttlInner:nth-child(3) {
  transition-delay: 3.4s
}

.miainVisual--in .miainVisual__ttlInner--dummy {
  -webkit-transform: translateX(0) rotateX(0deg) scaleY(.01);
  transform: translateX(0) rotateX(0deg) scaleY(.01);
  opacity: 1
}

.dummyObject {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  z-index: 6;
  width: 100%;
  height: 2.5px;
  text-align: center;
  color: #fff;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  transition-duration: .9s;
  transition-timing-function: ease
}

.miainVisual--in .dummyObject {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%)
}

.dummyObject>img {
  height: 2.5px
}

.miainVisual--in .dummyObject {
  opacity: 1
}

.dummyObject--1 {
  top: 34%
}

.miainVisual--in .dummyObject--1 {
  transition-delay: 3.5s
}

.dummyObject--2 {
  top: -30%
}

.miainVisual--in .dummyObject--2 {
  transition-delay: 3.57s
}

.dummyObject--3 {
  top: 88%
}

.miainVisual--in .dummyObject--3 {
  transition-delay: 3.61s
}

.dummyObject--4 {
  top: -92%
}

.miainVisual--in .dummyObject--4 {
  transition-delay: 3.69s
}

.dummyObject--5 {
  top: 79%
}

.miainVisual--in .dummyObject--5 {
  transition-delay: 3.7s
}

.dummyObject--6 {
  top: -77%
}

.miainVisual--in .dummyObject--6 {
  transition-delay: 3.74s
}

.dummyObject--7 {
  top: 60%
}

.miainVisual--in .dummyObject--7 {
  transition-delay: 3.68s
}

.dummyObject--8 {
  top: -59%
}

.miainVisual--in .dummyObject--8 {
  transition-delay: 3.4s
}

.dummyObject--9 {
  top: 21%
}

.miainVisual--in .dummyObject--9 {
  transition-delay: 3.46s
}

.dummyObject--10 {
  top: -20%
}

.miainVisual--in .dummyObject--10 {
  transition-delay: 3.45s
}

.miainVisual__txt {
  color: #fff;
  line-height: 1;
  font-size: 3.2vw;
  font-style: italic;
  font-weight: 700;
  letter-spacing: -.03em;
  margin-top: 2.8vw;
  opacity: 0
}

.miainVisual--in .miainVisual__txt {
  opacity: 1;
  transition-property: opacity;
  transition-duration: .3s;
  transition-timing-function: ease;
  transition-delay: 4.5s
}

.miainVisual__img {
  width: 112vw;
  position: absolute;
  top: 49.6% !important;
  left: auto !important;
  right: -10% !important;
  bottom: auto !important;
  pointer-events: none;
  z-index: 6;
  opacity: 0
}

.miainVisual--in .miainVisual__img {
  right: -18.2% !important;
  opacity: 1;
  transition-property: right, opacity;
  transition-duration: .6s;
  transition-timing-function: ease;
  transition-delay: 3.6s
}

.miainVisual__img>img {
  width: 100%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  display: inline-block
}

.miainVisual__img--shadow {
  opacity: 0
}

.miainVisual--in .miainVisual__img--shadow {
  opacity: 1;
  transition-property: opacity;
  transition-duration: .6s;
  transition-timing-function: ease;
  transition-delay: 3.6s
}

@media screen and (max-width:1094px) {
  .miainVisual {
    margin-bottom: 38px
  }

  .introObject {
    font-size: 3.8vw
  }

  .miainVisual__ttl {
    font-size: 9.4vw;
    color: #fff;
    line-height: 1
  }

  .miainVisual__txt {
    font-size: 4vw;
    margin-top: 3vw
  }

  .miainVisual__img {
    width: 126vw;
    position: absolute;
    top: 48.5% !important;
    right: -8% !important;
    pointer-events: none
  }

  .miainVisual--in .miainVisual__img {
    right: -35% !important
  }

  .miainVisual__img>img {
    width: 100%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    display: inline-block
  }
}

@media screen and (max-width:750px) {
  .miainVisual {
    height: 34vh
  }
}

@media screen and (orientation:landscape) {
  .miainVisual {
    min-height: 300px
  }
}

.concept {
  margin: 0 0 178px
}

.m-contentsHead__ttl--concept>br {
  display: none
}

.concept__txt {
  line-height: 2.8;
  font-size: 16px;
  text-align: center;
  margin-top: 13px;
  opacity: 0;
  -webkit-transform: translateY(10px);
  transform: translateY(10px);
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  transition-duration: .6s;
  transition-timing-function: ease;
  transition-delay: .8s
}

.m-contentsHead--active+.concept__txt {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0)
}

@media screen and (max-width:1094px) {
  .concept {
    width: calc(100% - 40px);
    margin: 0 auto 82px
  }

  .concept .headDummyObject {
    display: none
  }

  .concept .m-contentsHead__ttl {
    opacity: 1;
    margin-left: 0
  }

  .concept .m-contentsHead__ttlInner--grey {
    display: none
  }

  .concept .m-contentsHead__ttlInner--gradation {
    width: 100%
  }

  .m-contentsHead__ttl--concept>br {
    display: inline
  }

  .concept__txt {
    font-size: 14px;
    margin-top: 19px;
    letter-spacing: 0;
    line-height: 2.45;
    text-align: justify;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1
  }

  .concept__txt>br {
    display: none
  }
}

.message {
  display: flex;
  align-items: flex-start;
  padding: 96px calc(50% - 600px) 0 12%;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  min-height: 654px;
  margin-bottom: 125px;
  opacity: 0;
  transition-property: opacity;
  transition-duration: .6s;
  transition-timing-function: ease
}

.message--active {
  opacity: 1
}

.message:after {
  content: "";
  display: block;
  width: calc(100% - 440px);
  height: 654px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  background: #005695;
  background: linear-gradient(60deg, #005695, #3bd0dd);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#005695", endColorstr="#3bd0dd", GradientType=1)
}

.message__img {
  width: calc(100% - 670px);
  margin: 30px 0 0 auto;
  opacity: 0;
  -webkit-transform: translateY(10px);
  transform: translateY(10px);
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  transition-duration: .6s;
  transition-timing-function: ease;
  transition-delay: 1s
}

.message--active .message__img {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0)
}

.message__img img {
  display: inline-block
}

.message__box {
  width: 600px;
  margin-left: 70px
}

.m-contentsHead--message {
  width: 100%;
  text-align: left
}

.m-contentsHead--message .m-contentsHead__ttl {
  transition-duration: .75s
}

.m-contentsHead--message .m-contentsHead__ttlInner--gradation .coreText {
  transition-duration: .75s;
  color: #fff;
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: #fff
}

.m-contentsHead--message .m-contentsHead__ttlInner--grey {
  opacity: .3
}

.m-contentsHead--message .headDummyObject {
  transition-duration: .75s
}

.message__txt {
  line-height: 1.5;
  color: #fff;
  margin: -4px 0 37px;
  font-size: 18px;
  letter-spacing: 0;
  text-indent: -.5em;
  opacity: 0;
  -webkit-transform: translateY(10px);
  transform: translateY(10px);
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  transition-duration: .6s;
  transition-timing-function: ease;
  transition-delay: .6s
}

.message__txt>br {
  display: none
}

.m-contentsHead--message.m-contentsHead--active~.message__txt {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0)
}

.messageCaption {
  font-size: 16px;
  color: #fff;
  line-height: 2.37;
  margin-bottom: 94px;
  opacity: 0;
  -webkit-transform: translateY(10px);
  transform: translateY(10px);
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  transition-duration: .6s;
  transition-timing-function: ease;
  transition-delay: .7s
}

.m-contentsHead--message.m-contentsHead--active~.messageCaption {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0)
}

.m-transition__btn--message {
  opacity: 0;
  -webkit-transform: translateY(10px);
  transform: translateY(10px);
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  transition-duration: .6s;
  transition-timing-function: ease;
  transition-delay: .9s
}

.m-contentsHead--message.m-contentsHead--active~.m-transition__btn--message {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0)
}

@media screen and (max-width:1094px) {
  .message {
    display: block;
    padding: 0 0 20px;
    min-height: auto;
    margin-bottom: 62px
  }

  .message:after {
    width: calc(100% - 20px);
    height: calc(100% - 30px);
    top: 30px
  }

  .message__img {
    width: calc(100% - 20px);
    margin: 0;
    opacity: 1
  }

  .message__box {
    width: 100%;
    margin: 28px 0 0;
    padding: 0 20px 0 40px;
    box-sizing: border-box
  }

  .message__ttl {
    font-size: 33px;
    margin-bottom: 16px
  }

  .message__txt {
    margin: 4px 0 32px;
    font-size: 16px;
    line-height: 1.8
  }

  .message__txt>br {
    display: inline
  }

  .messageCaption {
    font-size: 14px;
    margin-bottom: 28px;
    text-align: justify;
    line-height: 2
  }

  .messageCaption>br {
    display: none
  }

  .m-transition__btn--message {
    width: 80%;
    margin: 0 auto
  }
}

.interview {
  margin-bottom: 148px
}

.interviewKey {
  margin-top: 62px;
  opacity: 0;
  -webkit-transform: translateY(10px);
  transform: translateY(10px);
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  transition-duration: .6s;
  transition-timing-function: ease;
  transition-delay: .6s
}

.m-contentsHead--active~.interviewKey {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0)
}

.interviewKey>img {
  width: 100%
}

.interview__box {
  display: flex;
  width: 948px;
  margin: 94px auto 0;
  justify-content: space-between;
  opacity: 0;
  -webkit-transform: translateY(10px);
  transform: translateY(10px);
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  transition-duration: .6s;
  transition-timing-function: ease;
  transition-delay: .7s
}

.m-contentsHead--active~.interview__box {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0)
}

.interview__txt {
  width: 552px;
  line-height: 2.4;
  font-size: 16px;
  -webkit-transform: translateY(-.4em);
  transform: translateY(-.4em);
  text-align: justify;
  margin: 0 0 28px
}

.m-transition__btn--interview {
  background-color: #002c8b;
  color: #fff
}

.m-transition__btn--interview:after {
  background-color: #fff
}

@media screen and (max-width:1094px) {
  .interview {
    margin-bottom: 76px
  }

  .interviewKey {
    margin-top: 31px
  }

  .interview__box {
    width: calc(100% - 40px);
    margin: 26px auto 0;
    display: block
  }

  .interview__txt {
    width: 100%;
    font-size: 14px;
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }

  .m-transition__btn--interview {
    background-color: #002c8b;
    color: #fff;
    width: 80%;
    margin: 0 auto
  }

  .m-transition__btn--interview:after {
    background-color: #fff
  }
}

.movie {
  padding: 0 12%;
  box-sizing: border-box
}

.movie__tmb {
  width: 100%;
  margin: 57px 0 160px;
  position: relative;
  cursor: pointer;
  opacity: 0;
  -webkit-transform: translateY(10px);
  transform: translateY(10px);
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  transition-duration: .4s;
  transition-timing-function: ease;
  transition-delay: 0s
}

.m-contentsHead--active~.movie__tmb {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  transition-delay: .6s
}

.movie__tmb:hover {
  opacity: .8;
  transition-delay: 0s
}

.movie__tmb:after,
.movie__tmb:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0
}

.movie__tmb:before {
  width: 98px;
  height: 98px;
  right: 0;
  bottom: 0;
  margin: auto;
  background: url(/img/top/icon_movie.png) 0 0/contain no-repeat;
  z-index: 2
}

.movie__tmb:after {
  width: 100%;
  height: 100%;
  background: url(/img/top/bg_movie.png) 0 0/3px repeat
}

.modalAreaWrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 110;
  display: none
}

.modalArea {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background: rgba(0, 0, 0, .8)
}

.modal {
  width: calc(100% - 40px);
  max-width: 888px;
  background-color: #fff;
  position: relative;
  z-index: 1
}

.modalMovie {
  width: 100%;
  vertical-align: bottom
}

.modalShadow {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer
}

@media screen and (max-width:1094px) {
  .movie {
    padding: 0
  }

  .movie__tmb {
    width: 100%;
    margin: 28px auto 80px
  }

  .movie__tmb:hover {
    opacity: 1
  }

  .movie__tmb:before {
    width: 49px;
    height: 49px
  }

  .movie__tmb:after {
    background: url(/img/top/bg_movie.png) 0 0/2px repeat
  }
}

.about__box {
  display: flex;
  flex-wrap: wrap;
  margin: 57px 0 150px;
  opacity: 0;
  -webkit-transform: translateY(10px);
  transform: translateY(10px);
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  transition-duration: .6s;
  transition-timing-function: ease;
  transition-delay: .6s
}

.m-contentsHead--active~.about__box {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0)
}

.about__item {
  width: 50%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition-property: opacity;
  transition-duration: .4s;
  transition-timing-function: ease
}

.about__item:hover {
  opacity: .85
}

.about__item>img {
  width: 100%;
  -webkit-transform: scale(1);
  transform: scale(1);
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  transition-timing-function: linear;
  transition-duration: .6s
}

.about__item:hover>img {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
  transition-duration: 3s
}

.about__item:after {
  content: "";
  display: block;
  width: 50px;
  height: 2px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  background-color: #fff;
  z-index: 2;
  opacity: 0;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transform-origin: right;
  transform-origin: right;
  transition-property: opacity, right, -webkit-transform;
  transition-property: opacity, transform, right;
  transition-property: opacity, transform, right, -webkit-transform;
  transition-timing-function: ease;
  transition-duration: .4s
}

.about__item:hover:after {
  opacity: 1;
  -webkit-transform: scaleX(1.5);
  transform: scaleX(1.5);
  right: 20px
}

.about__boxInner {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  color: #fff;
  z-index: 1
}

.about__boxInner,
.about__boxInner:after {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0
}

.about__boxInner:after {
  content: "";
  display: block;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: -1;
  opacity: 0;
  -webkit-transform: scale(1);
  transform: scale(1);
  background: linear-gradient(60deg, #005695, #3bd0dd);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#005695", endColorstr="#3bd0dd", GradientType=1);
  transition-property: opacity, width, height;
  transition-timing-function: ease;
  transition-duration: .4s
}

.about__item:hover .about__boxInner:after {
  opacity: .8;
  width: calc(100% - 40px);
  height: calc(100% - 40px)
}

.about__ttl {
  line-height: 1;
  font-size: 58px;
  margin-bottom: 32px
}

.about__txt {
  line-height: 1;
  font-size: 26px;
  text-shadow: 0 -11px 18px rgba(0, 0, 0, .15), -25px 0 18px rgba(0, 0, 0, .15), 0 9px 18px rgba(0, 0, 0, .15), -10px 0 18px rgba(0, 0, 0, .15)
}

.about__txt>br {
  display: none
}

@media screen and (max-width:1094px) {
  .about__box {
    margin: 28px 0 36px
  }

  .about__item:hover {
    opacity: 1
  }

  .about__item:hover:after {
    opacity: 0
  }

  .about__ttl {
    font-size: 4.35vw;
    margin-bottom: 10px
  }

  .about__txt {
    font-size: 12px;
    line-height: 1.2;
    text-align: center
  }

  .about__txt>br {
    display: inline-block
  }
}

.data {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-flow: column;
  background: url(/img/top/bg_data.jpg) 50%/cover no-repeat;
  width: 76%;
  height: 388px;
  margin: 0 auto 109px;
  line-height: 1;
  color: #fff;
  transition-property: opacity;
  transition-timing-function: ease;
  transition-duration: .4s
}

.data:hover {
  opacity: .85
}

.data__ttl {
  font-size: 64px;
  margin-bottom: 21px
}

.data__txt {
  font-size: 22px;
  margin-bottom: 38px
}

.m-transition__btn--data {
  background-color: #002c8b;
  color: #fff
}

.m-transition__btn--data:after {
  background-color: #fff
}

.data:hover .m-transition__btn--data:after {
  -webkit-transform: scaleX(1.25);
  transform: scaleX(1.25)
}

@media screen and (max-width:1094px) {
  .data {
    width: calc(100% - 40px);
    height: 228px;
    margin: 0 auto 16px
  }

  .data:hover {
    opacity: 1
  }

  .data__ttl {
    font-size: 32px;
    margin-bottom: 10px
  }

  .data__txt {
    font-size: 12px;
    margin-bottom: 19px
  }

  .m-transition__btn--data {
    width: 80%
  }
}

.linkArea {
  display: flex;
  justify-content: space-between;
  width: 76%;
  margin: 0 auto;
  padding-bottom: 87px
}

.m-transition__btn--linkArea {
  width: calc(50% - 19px);
  height: 130px;
  font-size: 26px
}

.m-transition__btn--newGraduate {
  background-color: #f9fb3c;
  color: #02ace4
}

.m-transition__btn--newGraduate:after {
  background-color: #02ace4
}

.m-transition__btn--career {
  background-color: #02ace4;
  color: #fff
}

.m-transition__btn--career:after {
  background-color: #fff
}

@media screen and (max-width:1094px) {
  .linkArea {
    display: block;
    width: calc(100% - 40px);
    margin: 0 auto;
    padding-bottom: 40px
  }

  .m-transition__btn--linkArea {
    width: 100%;
    height: 58px;
    font-size: 16px
  }

  .m-transition__btn--linkArea:before {
    left: 17px;
    width: 15px;
    height: 15px
  }

  .m-transition__btn--linkArea+.m-transition__btn--linkArea {
    margin-top: 16px
  }
}

.crossTalk {
  padding: 96px 0 0;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  min-height: 554px;
  margin-bottom: 125px;
  opacity: 0;
  transition-property: opacity;
  transition-duration: .6s;
  transition-timing-function: ease
}

.crossTalk--active {
  opacity: 1
}

.crossTalk:after {
  content: "";
  display: block;
  width: calc(50% + 200px);
  height: 458px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background: #005695;
  background: linear-gradient(60deg, #005695, #3bd0dd);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#005695", endColorstr="#3bd0dd", GradientType=1)
}

.crossTalk__img {
  position: absolute;
  top: 130px;
  left: calc(50% - 120px);
  width: 46.875vw;
  max-width: 900px;
  opacity: 0;
  -webkit-transform: translateY(10px);
  transform: translateY(10px);
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  transition-duration: .6s;
  transition-timing-function: ease;
  transition-delay: 1s
}

@media screen and (max-width:1280px) {
  .crossTalk__img {
    left: 520px;
  }
}

.crossTalk--active .crossTalk__img {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0)
}

.crossTalk__img img {
  display: inline-block
}

.crossTalk__box {
  width: 100%;
  max-width: 1200px;
  padding: 0 40px;
  margin: 0 auto;
}

.m-contentsHead--crossTalk {
  width: 100%;
  text-align: left
}

.m-contentsHead--crossTalk .m-contentsHead__ttl {
  transition-duration: .75s
}

.m-contentsHead--crossTalk .m-contentsHead__ttlInner--gradation .coreText {
  transition-duration: .75s;
  color: #fff;
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: #fff
}

.m-contentsHead--crossTalk .m-contentsHead__ttlInner--grey {
  opacity: .3
}

.m-contentsHead--crossTalk .headDummyObject {
  transition-duration: .75s
}

.crossTalk__txt {
  line-height: 1.5;
  color: #fff;
  margin: -4px 0 37px;
  font-size: 18px;
  letter-spacing: 0;
  opacity: 0;
  -webkit-transform: translateY(10px);
  transform: translateY(10px);
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  transition-duration: .6s;
  transition-timing-function: ease;
  transition-delay: .6s
}

.crossTalk__txt>br {
  display: none
}

.m-contentsHead--crossTalk.m-contentsHead--active~.crossTalk__txt {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0)
}

.crossTalkCaption {
  font-size: 16px;
  color: #fff;
  line-height: 2.37;
  margin-bottom: 94px;
  opacity: 0;
  -webkit-transform: translateY(10px);
  transform: translateY(10px);
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  transition-duration: .6s;
  transition-timing-function: ease;
  transition-delay: .7s
}

.m-contentsHead--crossTalk.m-contentsHead--active~.crossTalkCaption {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0)
}

.m-transition__btn--crossTalk {
  opacity: 0;
  -webkit-transform: translateY(10px);
  transform: translateY(10px);
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  transition-duration: .6s;
  transition-timing-function: ease;
  transition-delay: .9s
}

.m-contentsHead--crossTalk.m-contentsHead--active~.m-transition__btn--crossTalk {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0)
}

@media screen and (max-width:1094px) {
  .crossTalk {
    display: block;
    padding: 0 0 20px;
    min-height: auto;
    margin-bottom: 62px
  }

  .crossTalk:after {
    width: calc(100% - 20px);
    height: calc(100% - 30px);
    top: 30px
  }

  .crossTalk__img {
    position: static;
    width: calc(100% - 20px);
    max-width: none;
    margin: 0;
    margin-left: 20px;
    opacity: 1
  }

  .crossTalk__box {
    width: 100%;
    margin: 28px 0 0;
    padding: 0 20px 0 40px;
    box-sizing: border-box
  }

  .crossTalk__ttl {
    font-size: 33px;
    margin-bottom: 16px
  }

  .crossTalk__txt {
    margin: 4px 0 32px;
    font-size: 16px;
    line-height: 1.8
  }

  .crossTalk__txt>br {
    display: inline
  }

  .crossTalkCaption {
    font-size: 14px;
    margin-bottom: 28px;
    text-align: justify;
    line-height: 2
  }

  .crossTalkCaption>br {
    display: none
  }

  .m-transition__btn--crossTalk {
    width: 80%;
    margin: 0 auto
  }
}