@charset "UTF-8";
/* ===================================

↓ヘッドタイトルcss 

=================================== */
.head_title {
  width: 100%;
  min-width: 1000px;
  height: 500px;
  background: url(../img/features/head_main01.jpg) no-repeat center bottom;
  background-size: cover;
  /*padding-top: 200px;*/
  position: relative;
  margin-bottom: 180px;
  animation: fadeIn 3.0s 0.01s;
  animation-fill-mode: both;
  /*h1*/ }
  @media only screen and (max-width: 768px) {
    .head_title {
      min-width: 100%;
      height: 180px;
      margin-bottom: 100px;
      padding-top: 150px; } }
  .head_title:before {
    content: "";
    display: block;
    width: 1px;
    height: 100px;
    background-color: rgba(140, 158, 173, 0.9);
    position: absolute;
    bottom: -50px;
    right: 0;
    left: 0;
    margin: 0 auto; }
  .head_title:after {
    content: "";
    display: block;
    width: 1px;
    height: 30px;
    background-color: #fff;
    position: absolute;
    right: 0;
    left: 0;
    margin: 0 auto;
    animation: borderAnim 1.0s ease-in-out  infinite; }
  .head_title h1 {
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    font-size: 25px;
    letter-spacing: 0.3em;
    color: #20334d;
    background-color: #fff;
    line-height: 1.4em;
    width: 35px;
    height: 98px;
    padding: 5px 0;
    position: absolute;
    top: 200px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto; }
    @media only screen and (max-width: 768px) {
      .head_title h1 {
        font-size: 18px;
        width: 25px;
        padding: 3px 0;
        top: 150px;
        height: 72px; } }

/*.head_title*/
/*タイトルコピー　IEの游明朝ズレの対応CSS*/
@media all and (-ms-high-contrast: none) {
  .head_title h1 {
    line-height: 1.7em; } }
/* ===================================

↓タイトルコピーcss 

=================================== */
.title_copy {
  width: 1000px;
  margin: 0 auto 130px;
  text-align: center;
  color: #20334d;
  letter-spacing: 0.1em; }
  @media only screen and (max-width: 768px) {
    .title_copy {
      width: 90%;
      margin-bottom: 70px; } }
  .title_copy h2 {
    font-size: 22px;
    margin-bottom: 55px;
    letter-spacing: 0.3em;
    font-feature-settings: "palt"; }
    .title_copy h2 br {
      display: none; }
    @media only screen and (max-width: 768px) {
      .title_copy h2 {
        font-size: 18px;
        line-height: 2em;
        letter-spacing: 0.05em;
        margin-bottom: 35px; }
        .title_copy h2 br {
          display: block; } }
  .title_copy p {
    font-size: 14px;
    line-height: 2.5em;
    font-feature-settings: "palt"; }
    @media only screen and (max-width: 768px) {
      .title_copy p {
        font-size: 12px;
        text-align: left; }
        .title_copy p br {
          display: none; } }

/*.title_copy*/
/*タイトル縦棒のアニメーション*/
@keyframes borderAnim {
  0% {
    bottom: 20px; }
  100% {
    bottom: -85px; } }
@media only screen and (max-width: 768px) {
  @keyframes borderAnim {
    0% {
      bottom: 20px; }
    100% {
      bottom: -85px; } } }
/* ===================================

↓エリア 1 css 

=================================== */
.area {
  width: 90%;
  position: relative;
  min-width: 1200px;
  /*.main_area*/
  /*ブロックアニメーションのブロック部分*/
  /*アニメーション、jsで.animateがついた時のCSS*/
  /*アニメーション、jsで.animateがついた時のCSS*/ }
  @media only screen and (max-width: 768px) {
    .area {
      width: 95%;
      min-width: 95%; } }
  .area .main_area, .area .main_area2, .area .main_area3 {
    position: relative;
    width: 100%;
    margin-bottom: 40%;
    overflow: hidden;
    /*.copy_box*/
    /*アニメーション、jsで.animateがついた時のCSS*/
    /*.main_image*/
    /*アニメーション、jsで.animateがついた時のCSS*/ }
    @media only screen and (max-width: 768px) {
      .area .main_area, .area .main_area2, .area .main_area3 {
        margin-bottom: 77%; } }
    .area .main_area .copy_box, .area .main_area .copy_box2, .area .main_area .copy_box3, .area .main_area2 .copy_box, .area .main_area2 .copy_box2, .area .main_area2 .copy_box3, .area .main_area3 .copy_box, .area .main_area3 .copy_box2, .area .main_area3 .copy_box3 {
      width: 45%;
      min-height: 462px;
      max-height: 580px;
      height: 34.8vw;
      float: right;
      background-color: #eff2f5;
      /*dl*/ }
      @media only screen and (max-width: 768px) {
        .area .main_area .copy_box, .area .main_area .copy_box2, .area .main_area .copy_box3, .area .main_area2 .copy_box, .area .main_area2 .copy_box2, .area .main_area2 .copy_box3, .area .main_area3 .copy_box, .area .main_area3 .copy_box2, .area .main_area3 .copy_box3 {
          width: 100%;
          min-height: inherit;
          max-height: inherit;
          height: auto;
          float: none;
          padding-top: 60px;
          padding-bottom: 40px; } }
      .area .main_area .copy_box dl, .area .main_area .copy_box2 dl, .area .main_area .copy_box3 dl, .area .main_area2 .copy_box dl, .area .main_area2 .copy_box2 dl, .area .main_area2 .copy_box3 dl, .area .main_area3 .copy_box dl, .area .main_area3 .copy_box2 dl, .area .main_area3 .copy_box3 dl {
        width: 360px;
        position: absolute;
        top: 70%;
        left: 81.8%;
        transform: translate(-64%, -83.8%);
        font-feature-settings: "palt";
        /*dt*/ }
        @media only screen and (max-width: 768px) {
          .area .main_area .copy_box dl, .area .main_area .copy_box2 dl, .area .main_area .copy_box3 dl, .area .main_area2 .copy_box dl, .area .main_area2 .copy_box2 dl, .area .main_area2 .copy_box3 dl, .area .main_area3 .copy_box dl, .area .main_area3 .copy_box2 dl, .area .main_area3 .copy_box3 dl {
            width: 80%;
            position: static;
            transform: none;
            margin: 0 auto; } }
        .area .main_area .copy_box dl dt, .area .main_area .copy_box2 dl dt, .area .main_area .copy_box3 dl dt, .area .main_area2 .copy_box dl dt, .area .main_area2 .copy_box2 dl dt, .area .main_area2 .copy_box3 dl dt, .area .main_area3 .copy_box dl dt, .area .main_area3 .copy_box2 dl dt, .area .main_area3 .copy_box3 dl dt {
          font-size: 18px;
          text-align: center;
          margin-bottom: 70px;
          position: relative;
          letter-spacing: 0.2em; }
          @media only screen and (max-width: 768px) {
            .area .main_area .copy_box dl dt, .area .main_area .copy_box2 dl dt, .area .main_area .copy_box3 dl dt, .area .main_area2 .copy_box dl dt, .area .main_area2 .copy_box2 dl dt, .area .main_area2 .copy_box3 dl dt, .area .main_area3 .copy_box dl dt, .area .main_area3 .copy_box2 dl dt, .area .main_area3 .copy_box3 dl dt {
              font-size: 4vw;
              letter-spacing: 0.1em;
              margin-bottom: 40px; } }
          .area .main_area .copy_box dl dt:before, .area .main_area .copy_box2 dl dt:before, .area .main_area .copy_box3 dl dt:before, .area .main_area2 .copy_box dl dt:before, .area .main_area2 .copy_box2 dl dt:before, .area .main_area2 .copy_box3 dl dt:before, .area .main_area3 .copy_box dl dt:before, .area .main_area3 .copy_box2 dl dt:before, .area .main_area3 .copy_box3 dl dt:before {
            content: "";
            display: block;
            width: 30px;
            height: 1px;
            background: #8792a1;
            position: absolute;
            bottom: -20px;
            left: 170px; }
            @media only screen and (max-width: 768px) {
              .area .main_area .copy_box dl dt:before, .area .main_area .copy_box2 dl dt:before, .area .main_area .copy_box3 dl dt:before, .area .main_area2 .copy_box dl dt:before, .area .main_area2 .copy_box2 dl dt:before, .area .main_area2 .copy_box3 dl dt:before, .area .main_area3 .copy_box dl dt:before, .area .main_area3 .copy_box2 dl dt:before, .area .main_area3 .copy_box3 dl dt:before {
                bottom: -15px;
                left: 50%; } }
        .area .main_area .copy_box dl dd, .area .main_area .copy_box2 dl dd, .area .main_area .copy_box3 dl dd, .area .main_area2 .copy_box dl dd, .area .main_area2 .copy_box2 dl dd, .area .main_area2 .copy_box3 dl dd, .area .main_area3 .copy_box dl dd, .area .main_area3 .copy_box2 dl dd, .area .main_area3 .copy_box3 dl dd {
          font-size: 14px;
          line-height: 2.3em;
          letter-spacing: 0.15em; }
          @media only screen and (max-width: 768px) {
            .area .main_area .copy_box dl dd, .area .main_area .copy_box2 dl dd, .area .main_area .copy_box3 dl dd, .area .main_area2 .copy_box dl dd, .area .main_area2 .copy_box2 dl dd, .area .main_area2 .copy_box3 dl dd, .area .main_area3 .copy_box dl dd, .area .main_area3 .copy_box2 dl dd, .area .main_area3 .copy_box3 dl dd {
              font-size: 12px; } }
    .area .main_area .copy_box.animate, .area .main_area2 .copy_box.animate, .area .main_area3 .copy_box.animate {
      animation: fadeIn 0s 0.6s;
      animation-fill-mode: both; }
    .area .main_area .main_image, .area .main_area .main_image2, .area .main_area .main_image3, .area .main_area2 .main_image, .area .main_area2 .main_image2, .area .main_area2 .main_image3, .area .main_area3 .main_image, .area .main_area3 .main_image2, .area .main_area3 .main_image3 {
      width: 55%;
      float: left;
      max-height: 580px;
      overflow: hidden;
      position: relative; }
      @media only screen and (max-width: 768px) {
        .area .main_area .main_image, .area .main_area .main_image2, .area .main_area .main_image3, .area .main_area2 .main_image, .area .main_area2 .main_image2, .area .main_area2 .main_image3, .area .main_area3 .main_image, .area .main_area3 .main_image2, .area .main_area3 .main_image3 {
          width: 100%;
          float: none; } }
    .area .main_area .main_image.animate img, .area .main_area2 .main_image.animate img, .area .main_area3 .main_image.animate img {
      animation: fadeIn 5.0s 0.2s, scale 8.0s 0.4s;
      animation-fill-mode: both; }
  .area .main_area:after, .area .main_area3:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background-color: #101e37; }
  .area .main_area.animate:after {
    animation: secondaryImageOverlayIn 0.6s 0s cubic-bezier(0.77, 0, 0.175, 1), secondaryImageOverlayOut 0.6s 0.6s cubic-bezier(0.77, 0, 0.175, 1);
    animation-fill-mode: both; }
  .area .number, .area .number2, .area .number3 {
    height: 60px;
    width: auto;
    position: absolute;
    top: -30px;
    right: 30px; }
    @media only screen and (max-width: 768px) {
      .area .number, .area .number2, .area .number3 {
        height: 40px;
        top: -20px; } }
  .area .number.animate {
    animation: fadeIn 3.0s 1.5s;
    animation-fill-mode: both; }
  .area .fade {
    width: 30%;
    max-height: 500px;
    height: auto;
    position: absolute;
    top: 90%;
    right: 7.2%; }
    @media only screen and (max-width: 768px) {
      .area .fade {
        width: 50%;
        top: 95%;
        z-index: 2;
        right: -5.2%; } }
  .area .fade2 {
    width: 40%;
    height: auto;
    position: absolute;
    top: 112%;
    left: 15%; }
    @media only screen and (max-width: 768px) {
      .area .fade2 {
        width: 70%;
        top: 109%;
        left: 6%; } }

/*.area*/
/* ----------------------二個目のエリアCSS----------------------- */
.area:nth-of-type(2) {
  float: right;
  /*アニメーション、jsで.animateがついた時のCSS*/
  /*.copy_box2*/
  /*アニメーション、jsで.animateがついた時のCSS*/
  /*アニメーション、jsで.animateがついた時のCSS*/
  /*アニメーション、jsで.animateがついた時のCSS*/ }
  .area:nth-of-type(2) .main_area2 {
    margin-bottom: 40%; }
    @media only screen and (max-width: 768px) {
      .area:nth-of-type(2) .main_area2 {
        margin-bottom: 77%; } }
    .area:nth-of-type(2) .main_area2:after {
      content: "";
      position: absolute;
      right: 0;
      top: 0;
      height: 100%;
      background-color: #101e37; }
  .area:nth-of-type(2) .main_area2.animate:after {
    animation: secondaryImageOverlayIn 0.6s 0s cubic-bezier(0.77, 0, 0.175, 1), secondaryImageOverlayOut2 0.6s 0.6s cubic-bezier(0.77, 0, 0.175, 1);
    animation-fill-mode: both; }
  .area:nth-of-type(2) .copy_box2 {
    float: left;
    height: 35vw;
    min-height: 468px;
    /*dl*/
    /*.page_link*/ }
    @media only screen and (max-width: 768px) {
      .area:nth-of-type(2) .copy_box2 {
        float: none;
        height: auto;
        min-height: inherit; } }
    .area:nth-of-type(2) .copy_box2 dl {
      top: 40%;
      left: 23%;
      transform: translate(-50%, -50%);
      /*dt*/ }
      @media only screen and (max-width: 768px) {
        .area:nth-of-type(2) .copy_box2 dl {
          width: 80%;
          position: static;
          transform: none;
          margin: 0 auto; } }
      .area:nth-of-type(2) .copy_box2 dl dt:before {
        bottom: -20px;
        left: 170px; }
        @media only screen and (max-width: 768px) {
          .area:nth-of-type(2) .copy_box2 dl dt:before {
            bottom: -15px;
            left: 50%; } }
    .area:nth-of-type(2) .copy_box2 .page_link {
      position: absolute;
      top: 70%;
      left: 23%;
      transform: translate(-50%, -50%);
      /*p a*/ }
      @media only screen and (max-width: 768px) {
        .area:nth-of-type(2) .copy_box2 .page_link {
          position: static;
          transform: none;
          margin: 0 auto; } }
      .area:nth-of-type(2) .copy_box2 .page_link p a {
        background: #20334d;
        color: #fff;
        display: block;
        font-size: 16px;
        font-weight: bold;
        height: 40px;
        line-height: 40px;
        overflow: hidden;
        position: relative;
        text-align: center;
        letter-spacing: 0.1em;
        text-decoration: none;
        width: 180px; }
        @media only screen and (max-width: 768px) {
          .area:nth-of-type(2) .copy_box2 .page_link p a {
            font-size: 14px;
            margin: 20px auto 0; } }
        .area:nth-of-type(2) .copy_box2 .page_link p a:after {
          content: '';
          position: absolute;
          top: 11px;
          right: 0;
          display: block;
          width: 30px;
          height: 10px;
          border-bottom: 1px solid #7794B4;
          transition: 0.3s; }
        .area:nth-of-type(2) .copy_box2 .page_link p a:before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          transform: scaleX(0);
          transform-origin: right;
          transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1);
          background: #2e4c75; }
        .area:nth-of-type(2) .copy_box2 .page_link p a:hover:after {
          width: 20px; }
        .area:nth-of-type(2) .copy_box2 .page_link p a:hover:before {
          transform: scaleX(1);
          transform-origin: left; }
        .area:nth-of-type(2) .copy_box2 .page_link p a .inner-text {
          position: relative;
          top: 0;
          left: 0;
          display: block;
          width: 100%; }
  .area:nth-of-type(2) .copy_box2.animate {
    animation: fadeIn 0s 0.6s;
    animation-fill-mode: both; }
  .area:nth-of-type(2) .number2 {
    left: 30px; }
  .area:nth-of-type(2) .number2.animate {
    animation: fadeIn 3.0s 1.5s;
    animation-fill-mode: both; }
  .area:nth-of-type(2) .main_image2 {
    float: right; }
    @media only screen and (max-width: 768px) {
      .area:nth-of-type(2) .main_image2 {
        float: none; } }
  .area:nth-of-type(2) .main_image2.animate img {
    animation: fadeIn 5.0s 0.2s, scale 8.0s 0.4s;
    animation-fill-mode: both; }
  .area:nth-of-type(2) .fade {
    top: 45%;
    right: 16%; }
    @media only screen and (max-width: 768px) {
      .area:nth-of-type(2) .fade {
        width: 50%;
        top: 65%;
        z-index: 2;
        right: 6%; } }
  .area:nth-of-type(2) .fade2 {
    width: 40%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 5%; }
    @media only screen and (max-width: 768px) {
      .area:nth-of-type(2) .fade2 {
        width: 70%;
        top: 75%;
        left: -5.2%; } }

/* .area:nth-of-type(2)*/
/* ----------------------三個目のエリアCSS----------------------- */
.area:nth-of-type(3) {
  clear: right;
  /*アニメーション、jsで.animateがついた時のCSS*/
  /*.copy_box3*/
  /*アニメーション、jsで.animateがついた時のCSS*/
  /*アニメーション、jsで.animateがついた時のCSS*/
  /*アニメーション、jsで.animateがついた時のCSS*/ }
  .area:nth-of-type(3) .main_area3 {
    margin-bottom: 35%; }
    @media only screen and (max-width: 768px) {
      .area:nth-of-type(3) .main_area3 {
        margin-bottom: 77%; } }
  .area:nth-of-type(3) .main_area3.animate:after {
    animation: secondaryImageOverlayIn 0.6s 0s cubic-bezier(0.77, 0, 0.175, 1), secondaryImageOverlayOut 0.6s 0.6s cubic-bezier(0.77, 0, 0.175, 1);
    animation-fill-mode: both; }
  .area:nth-of-type(3) .copy_box3 {
    height: 34.7vw;
    min-height: 468px;
    /*.page_link*/ }
    @media only screen and (max-width: 768px) {
      .area:nth-of-type(3) .copy_box3 {
        height: auto;
        min-height: inherit; } }
    .area:nth-of-type(3) .copy_box3 dl {
      top: 53%; }
    .area:nth-of-type(3) .copy_box3 .page_link {
      position: absolute;
      top: 70%;
      left: 79%;
      transform: translate(-50%, -50%);
      /*p a*/ }
      @media only screen and (max-width: 768px) {
        .area:nth-of-type(3) .copy_box3 .page_link {
          position: static;
          transform: none; } }
      .area:nth-of-type(3) .copy_box3 .page_link p a {
        background: #20334d;
        color: #fff;
        display: block;
        font-size: 16px;
        font-weight: bold;
        height: 40px;
        line-height: 40px;
        overflow: hidden;
        position: relative;
        text-align: center;
        letter-spacing: 0.1em;
        text-decoration: none;
        width: 180px; }
        @media only screen and (max-width: 768px) {
          .area:nth-of-type(3) .copy_box3 .page_link p a {
            font-size: 14px;
            margin: 20px auto 0; } }
        .area:nth-of-type(3) .copy_box3 .page_link p a:after {
          content: '';
          position: absolute;
          top: 11px;
          right: 0;
          display: block;
          width: 30px;
          height: 10px;
          border-bottom: 1px solid #7794B4;
          transition: 0.3s; }
        .area:nth-of-type(3) .copy_box3 .page_link p a:before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          transform: scaleX(0);
          transform-origin: right;
          transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1);
          background: #2e4c75; }
        .area:nth-of-type(3) .copy_box3 .page_link p a:hover:after {
          width: 20px; }
        .area:nth-of-type(3) .copy_box3 .page_link p a:hover:before {
          transform: scaleX(1);
          transform-origin: left; }
        .area:nth-of-type(3) .copy_box3 .page_link p a .inner-text {
          position: relative;
          top: 0;
          left: 0;
          display: block;
          width: 100%; }
  .area:nth-of-type(3) .copy_box3.animate {
    animation: fadeIn 0s 0.6s;
    animation-fill-mode: both; }
  .area:nth-of-type(3) .number3 {
    right: 1 30px; }
  .area:nth-of-type(3) .number3.animate {
    animation: fadeIn 3.0s 1.5s;
    animation-fill-mode: both; }
  .area:nth-of-type(3) .main_image3.animate img {
    animation: fadeIn 5.0s 0.2s, scale 8.0s 0.4s;
    animation-fill-mode: both; }
  .area:nth-of-type(3) .fade {
    width: 30%;
    max-height: 500px;
    height: auto;
    position: absolute;
    top: 90%;
    left: 15%; }
    @media only screen and (max-width: 768px) {
      .area:nth-of-type(3) .fade {
        width: 50%;
        top: 100%;
        left: 6%; } }
  .area:nth-of-type(3) .fade2 {
    width: 40%;
    height: auto;
    position: absolute;
    top: 110%;
    left: 55%; }
    @media only screen and (max-width: 768px) {
      .area:nth-of-type(3) .fade2 {
        width: 70%;
        top: 110%;
        left: inherit;
        right: -5.2%; } }

/* .area:nth-of-type(3)*/
/*消えている状態から現れるアニメーション*/
@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
/*じわっと拡大するアニメーション*/
@keyframes scale {
  0% {
    transform: scale(1); }
  100% {
    transform: scale(1.07); } }
/*はじめにブロックを伸ばすアニメーション*/
@keyframes secondaryImageOverlayIn {
  0% {
    width: 0; }
  100% {
    width: 100%; } }
/*のびたブロックを横に追いやるアニメーション*/
@keyframes secondaryImageOverlayOut {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(102%); } }
/*のびたブロックを横に追いやるアニメーション（左へ）*/
@keyframes secondaryImageOverlayOut2 {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-102%); } }
/*footer　IEの游明朝ズレの対応CSS*/
@media all and (-ms-high-contrast: none) {
  .area:nth-of-type(2) .copy_box2 .page_link p a {
    line-height: 45px; }

  .area:nth-of-type(3) .copy_box3 .page_link p a {
    line-height: 45px; } }