@charset "UTF-8";
/* ------------ colors ------------ */
/* ------------------------------- */
/* ------------ text-color ------------ */
/* ------------ border-color ------------ */
/* ------------ background-color ------------ */
/* ------------ system-color ------------ */
/* ------------ cv ------------ */
/* ------------ menu ------------ */
/* ------------ NEW ------------ */
/* ------------ slick-color ------------ */
.en {
  font-family: din-2014,  sans-serif;
  line-height: 1;
}

/*----------------------------------------
    p-visual
----------------------------------------*/
.p-visual {
  padding: 100px 40px;
}
.p-visual h2 {
  font-size: 49px;
  font-weight: bold;
  color: #007DF9;
  text-align: center;
  margin: 0 0 20px;
}
.p-visual h2 span {
  display: block;
  font-size: 3.3rem;
  font-family: din-2014,  sans-serif;
  color: #007DF9;
  opacity: 0.4;
}
.p-visual h3 {
  font-size: 34px;
  font-weight: bold;
  color: #FF2BB2;
  text-align: center;
  margin: 0 0 20px;
}
.p-visual p {
  font-size: 15px;
  text-align: center;
  line-height: 2;
}

@media screen and (max-width: 760px) {
  .p-visual {
    padding: 22vw 5vw 10vw;
  }
  .p-visual h2 {
    font-size: 8.4vw;
    margin: 0 0 5vw;
  }
  .p-visual h2 span {
    font-size: 9.2vw;
  }
  .p-visual h3 {
    font-size: 5.6vw;
    margin: 0 0 5vw;
    line-height: 1.4;
  }
  .p-visual p {
    font-size: 3.8vw;
    text-align: left;
  }
}
/*----------------------------------------
    p-story
----------------------------------------*/
.p-story {
  background: url(../vision/images/bg_story01.jpg) repeat-y center/contain;
  padding: 40px;
}
.p-story__container {
  max-width: 1200px;
  margin: auto;
}
.p-story__head {
  margin: 0 0 100px;
}
.p-story__head h2 {
  position: relative;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  padding: 0 0 50px;
}
.p-story__head h2:after, .p-story__head h2:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}
.p-story__head h2:before {
  bottom: 0;
  width: 15px;
  height: 15px;
  background: #292929;
  border: 1px solid #4F4F4F;
  border-radius: 50%;
}
.p-story__head h2:after {
  bottom: -80px;
  width: 1px;
  height: 80px;
  background: #7D7D7D;
}
.p-story__head h2 span {
  display: block;
  font-size: 84px;
  font-family: din-2014,  sans-serif;
  color: #f3f3f3;
}
.p-story__body__block {
  margin: 0 0 120px;
  border-bottom: 1px solid #606060;
}
.p-story__body__block:last-child {
  margin: 0;
  border-bottom: none;
}
.p-story__body__ttl h3 {
  height: 125px;
}
.p-story__body__ttl h3 img {
  width: auto;
  height: 100%;
}
.p-story__body__list li {
  display: flex;
  justify-content: space-between;
  padding: 80px 0;
  border-bottom: 1px solid #606060;
}
.p-story__body__list li.reverse {
  flex-direction: row-reverse;
}
.p-story__body__list li:last-child {
  border-bottom: none;
}
.p-story__body__list li .content {
  width: 62%;
}
.p-story__body__list li .content h3 {
  font-size: 34px;
  font-weight: bold;
  color: #fff;
  margin: 0 0 20px;
}
.p-story__body__list li .content p {
  font-size: 15px;
  color: #fff;
  line-height: 2;
}
.p-story__body__list li .content.half {
  width: 48%;
}
.p-story__body__list li .photo {
  width: 34%;
}
.p-story__body__list li .photo.half {
  width: 48%;
}

@media screen and (max-width: 760px) {
  .p-story {
    padding: 10vw 5vw;
  }
  .p-story__head {
    margin: 0 0 25vw;
  }
  .p-story__head h2 {
    font-size: 4.8vw;
    padding: 0 0 5vw;
  }
  .p-story__head h2 span {
    font-size: 18vw;
    line-height: 1;
  }
  .p-story__body__block {
    margin: 0 0 22vw;
  }
  .p-story__body__ttl h3 {
    height: 21vw;
  }
  .p-story__body__list li {
    display: block;
    padding: 10vw 0;
  }
  .p-story__body__list li .content {
    width: 100%;
    margin: 0 0 5vw;
  }
  .p-story__body__list li .content h3 {
    font-size: 6.4vw;
    margin: 0 0 5vw;
  }
  .p-story__body__list li .content p {
    font-size: 3.8vw;
  }
  .p-story__body__list li .content.half {
    width: 100%;
  }
  .p-story__body__list li .photo {
    width: 100%;
  }
  .p-story__body__list li .photo.half {
    width: 100%;
  }
}
/*----------------------------------------
    p-vision
----------------------------------------*/
.p-vision {
  position: relative;
}
.p-vision:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 350px;
  background: url(../images/cmn/bg_message01.jpg);
  opacity: 0.2;
  z-index: -2;
  background-size: cover;
}
.p-vision:after {
  content: "";
  position: absolute;
  top: 250px;
  left: 0;
  width: 100%;
  height: 100px;
  z-index: -1;
  transform: rotate(180deg);
  background: -moz-linear-gradient(top, white 0%, rgba(255, 255, 255, 0) 100%);
  background: -webkit-linear-gradient(top, white 0%, rgba(255, 255, 255, 0) 100%);
  background: linear-gradient(to bottom, white 0%, rgba(255, 255, 255, 0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#ffffff", endColorstr="#00ffffff",GradientType=0 );
}
.p-vision__container {
  max-width: 1200px;
  padding: 200px 40px;
  margin: auto;
}
.p-vision__head {
  margin: 0 0 50px;
}
.p-vision__head h2 {
  font-size: 49px;
  font-weight: bold;
  color: #007DF9;
  text-align: center;
}
.p-vision__head h2 span {
  display: block;
  font-size: 33px;
  color: #007DF9;
  opacity: 0.4;
}
.p-vision__body__block {
  margin: 0 0 100px;
}
.p-vision__body__block:last-child {
  margin: 0;
}
.p-vision__body__ttl {
  margin: 0 0 20px;
}
.p-vision__body__ttl h2 {
  font-size: 34px;
  font-weight: bold;
  color: #FF2BB2;
  text-align: center;
  margin: -50px 0 0;
}
.p-vision__body__ttl h2 span {
  display: block;
  font-size: 99px;
  font-weight: bold;
  font-family: din-2014,  sans-serif;
  color: #FF2BB2;
  line-height: 1;
}
.p-vision__body__content p {
  font-size: 15px;
  line-height: 2;
}

@media screen and (max-width: 760px) {
  .p-vision:before {
    background-image: url(../images/cmn/bg_message01_sp.jpg);
    background-position: top center;
    opacity: 1;
    height: 50vw;
  }
  .p-vision:after {
    top: 40vw;
    height: 10vw;
  }
  .p-vision__container {
    padding: 10vw 5vw;
  }
  .p-vision__head {
    margin: 0 0 10vw;
  }
  .p-vision__head h2 {
    font-size: 9.2vw;
    line-height: 1.2;
  }
  .p-vision__head h2 span {
    font-size: 8.4vw;
    padding-bottom: 2vw;
  }
  .p-vision__body__block {
    margin: 0 0 20vw;
  }
  .p-vision__body__ttl {
    margin: 0 0 5vw;
  }
  .p-vision__body__ttl h2 {
    font-size: 7.5vw;
    margin: -10vw 0 0;
    line-height: 1.4;
  }
  .p-vision__body__ttl h2 span {
    font-size: 24vw;
  }
  .p-vision__body__ttl.-mod h2 {
    margin: 0;
  }
  .p-vision__body__ttl.-mod p {
    margin: 0 -5vw;
  }
  .p-vision__body__content p {
    font-size: 3.8vw;
  }
}

/*# sourceMappingURL=vision.css.map */