@charset "utf-8";

@import "_variables";

//共通
.container{

  max-width: 1120px;
  margin: 0 auto;
  .contents_header_wrapper{

    margin-bottom: 50px;

    &__block{
      display: flex;
      max-height: 350px;
      overflow: hidden;
      li{
        width: 50%;
        .cont_header_img{
          display: block;
        }
      }
      .cont_bg{
        background: $color-bg03;
        display: flex;
        align-items: center;
        position: relative;
      }

    }
  }
  .cont_bg{
    .txt_box{
      margin: 0 auto 0 30px;
      padding-left: 20px;
      h3{
        color: $color01;
        font-family: $font03;
        font-weight: 500;
        font-style: italic;
        font-size: 46px;
        text-align: left;
        /* for sp iPad */
        @media screen and (max-width: 979px) {
          line-height: 1;
          margin-bottom: 4%;
          padding-right: 5%;
        }
        @media screen and (max-width: 760px) {
        /* for sp Device Only */
            margin-bottom: 0%;
        }
      }
      .txt_guide{
        font-weight: bold;
        font-size: 20px;
      }
    }
    .arrow_btn__box{
      position: absolute;
      bottom: 20px;
      right: 15%;
      transition: all .4s ease;
      &:hover{
        transition: all .4s ease;
        transform: translateX(10px);
      }
      /* for sp iPad */
      @media screen and (max-width: 979px) {
        right: 20%;
      }
      .arrow_btn{
        position: relative;
        display: inline-block;
        vertical-align: middle;
        &::before,
        &::after{
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          margin: auto;
          content: "";
          vertical-align: middle;
        }
        &::before{
          width: 55px;
          height: 1px;
          background: $color01;
        }
        &::after{
          right: -53px;
          left: auto;
          width: 20px;
          height: 13px;
          transform: rotate(28deg);
          border-top: 1px solid #e23300;
        }
      }

    }
  }

  .txt {
    font-size: 17px;
    @media screen and (max-width: 760px) {
    /* for sp Device Only */
      font-size: 3.7vw;
    }
  }
}
// font-mixin
@mixin font100 {
  font-size: 100px;
  line-height: 1.5;
  @media screen and (max-width: 760px) {
    /* for sp Device Only */
    font-size: 15vw;
  }
}
@mixin font55 {
  font-size: 55px;
  line-height: 1.5;
  @media screen and (max-width: 760px) {
    /* for sp Device Only */
    font-size: 7.2vw;
  }
}
@mixin font47 {
  font-size: 47px;
  line-height: 1.5;
  @media screen and (max-width: 760px) {
    /* for sp Device Only */
    font-size: 6.2vw;
  }
}
@mixin font36 {
  font-size: 36px;
  line-height: 1.5;
  @media screen and (max-width: 760px) {
    /* for sp Device Only */
    font-size: 5.1vw;
  }
}
@mixin font34 {
  font-size: 34px;
  line-height: 1.5;
  @media screen and (max-width: 760px) {
    /* for sp Device Only */
    font-size: 4.9vw;
  }
}
@mixin font32 {
  font-size: 32px;
  line-height: 1.5;
  @media screen and (max-width: 760px) {
    /* for sp Device Only */
    font-size: 4.6vw;
  }
}
@mixin font30 {
  font-size: 30px;
  line-height: 1.5;
  @media screen and (max-width: 760px) {
    /* for sp Device Only */
    font-size: 4.4vw;
  }
}
@mixin font28 {
  font-size: 28px;
  line-height: 1.5;
  @media screen and (max-width: 760px) {
    /* for sp Device Only */
    font-size: 4vw;
  }
}
@mixin font26 {
  font-size: 26px;
  line-height: 1.5;
  @media screen and (max-width: 760px) {
    /* for sp Device Only */
    font-size: 3.8vw;
  }
}
// entry_btn_common
.entry_form_btn{
  padding: 27px;
  background: linear-gradient(to right, $color03, $color01);
  width: 64%;
  text-align: center;
  color: #fff;
  font-weight: bold;
  position: relative;
  display: inline-block;
  @include font34();
  line-height: 1;
  margin-top: 10px;
  @media screen and (max-width: 760px) {
    /* for sp Device Only */
    width: 100%;
  }
  @media all and (-ms-high-contrast:none){
    padding: 1em 0.3em 0.1em;
  }
  span{
    font-size: 19px;
    line-height: 1;
  }
  &::before,
  &::after{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
  }
  &::before{
    box-sizing: border-box;
    width: 8px;
    height: 8px;
    border: 8px solid transparent;
    border-left: 8px solid #fff;
  }
  &::after{
    width: 20px;
    height: 20px;
  }
  &:hover{
    background: linear-gradient(to left, $color03, $color01);
  }
}



@media screen and (max-width:760px){
  .container{

    width: 100%;

    .contents_header_wrapper:last-child{
      margin-bottom: 0;
    }

    .cont_bg{
      .txt_box{
        margin: 0;
        h3{
          font-size: 7vw;
          line-height: 1.4;
        }
        .txt_guide{
          font-size: 14px;
        }
      }
      .arrow_btn__box{
        right: 75px;
        bottom: 10px;
      }
    }
  }
  .txt {
    font-size: 3.7vw;
  }
}


@media screen and (max-width:480px){
  .container{

    .contents_header_wrapper{

      &__block{
        display: block;
        max-height: auto;
        overflow: visible;
        li{
          width: 100%;
        }
        .cont_bg{
          display: block;
          padding: 20px 15px;
        }

      }

      .txt_box{
        padding-left: 0;
      }
    }

  }
}



// プロジェクト1.2.3
@mixin flex_setting {
  display: flex;
  padding: 20px;
  justify-content: space-between;
  align-items: stretch;
  margin: 40px auto;
  @media screen and (max-width: 760px) {
    /* for sp Device Only */
   display: block;
  }
}
.txt_cent{
  text-align: center;
  @media screen and (max-width: 760px) {
    /* for sp Device Only */
    text-align: left;
  }
}
.txt{
  font-family: $font01;
}



//回遊時のリンク設定
.main_projectstory{
  padding-bottom: 0;
  &.pj01{
    .section_other_contents.-col3 {
      .contents_box.-pj01 {
        pointer-events: none;
        a {
          background: rgba(0, 0, 0, 0.7);
          .sub,h3{
            opacity: 0.3;
          }
        }
      }
    }
  }
  &.pj02{
    .section_other_contents.-col3 {
      .contents_box.-pj02 {
        pointer-events: none;
        a {
          background: rgba(0, 0, 0, 0.7);
          .sub,h3{
            opacity: 0.3;
          }
        }
      }
    }
  }
  &.pj03{
    .section_other_contents.-col3 {
      .contents_box.-pj03 {
        pointer-events: none;
        a {
          background: rgba(0, 0, 0, 0.7);
          .sub,h3{
            opacity: 0.3;
          }
        }
      }
    }
  }
}


.section_projectstory{

  .projectH3{
    font-size: 70px;
    text-align: center;
    color: $color02;
    font-family: $font03;
    font-style: italic;
    font-weight: 500;
    @media screen and (max-width: 760px) {
      /* for sp Device Only */
      font-size: 9vw;
    }
    span{
      font-size: 120%;
      vertical-align: top;
      display: inline-block;
      margin-top:-7px;
      font-style: italic;
    }
  }
  .projectH4{
    font-weight: bold;
    text-align: center;
    margin: 25px auto 15px;
    @include font36();
  }
  .projectH5{
    background: $color02;
    color: #fff;
    text-align: center;
    @include font36();
    padding: 10px;
    margin: 30px auto;
    @media all and (-ms-high-contrast:none){
        padding: 1em 0.3em 0.1em;
    }
  }
  .pj_img_top{
    margin-top: 40px;
  }
  .pj_detail__box{
    @include flex_setting();
    background: $color-bg04;
    li{
      width: 50%;
      video {
        width: 100%;
      }
      @media screen and (max-width: 760px) {
        /* for sp Device Only */
       width: 100%;
      }
    }
    .pj_detail__txt{
      background: $color-bg04;
      padding: 20px 25px;
      @media screen and (max-width: 760px) {
      /* for sp Device Only */
        padding: 3% 3% 6%;
      }
      .pj_title{
        @include font30();
        font-weight: bold;
        margin-bottom: 15px;
      }
    }
    .pj_detail_img{

      img{
        display: block;
      }
    }
  }

}

.pj_blue__container{
  background: $color04;
  padding: 40px 0;
  margin: 50px auto;

  .blue_headline{
    color: $color02;
    text-align: center;
    @include font34();
    margin-bottom: 30px;
  }
  .pj_detail__box{
    background: #fff;
    .pj_detail__txt{
      background: #fff;
    }
  }
  .comment_conclusion{
    color: $color02;
    font-size: 28px;
    line-height: 1.6;
    @media screen and (max-width: 760px) {
      /* for sp Device Only */
     font-size: 4.5vw;
    }
    text-align: center;
  }
}

.pj_last-contents{
  .pj_detail__box{
      background: #fff;
    .pj_detail__txt{
      background: #fff;
      @media screen and (max-width: 760px) {
        /* for sp Device Only */
       padding: 0 0 20px;
      }
    }
  }
  .projectH6{
    border-top: 1px solid $color-base;
    border-bottom: 1px solid $color-base;
    padding: 15px 10px;
    text-align: center;
    @include font36();
    margin-bottom: 20px;
    line-height: 1.4;
    @media all and (-ms-high-contrast:none){
        padding: 1em 0.3em 0.1em;
    }
  }
  .pj_invite{
    display: flex;
    justify-content: space-between;
    margin: 30px auto;
    li{
      width: 33%;
    }
  }
  .pj_invite_sp{
    margin: 30px auto 0;
  }

  .pj_entry_area{
    margin: 50px auto;
    text-align: center;
    .entry_form_btn-title{
      @include font28();
    }
  }
}



//ファミリー（中面用）
.main_ourfamily{
  @media screen and (max-width: 760px) {
  /* for sp Device Only */
    margin-top: 16vw;
    .article_h2.article_h2-family {
      padding-top: 10%;
      font-size: 4vw;
      padding-bottom: 0;
    }
    .article_h2.article_h2-family h2 {
      font-size: 11vw;
    }
  }
  .article_h2 h2{
    font-size: 60px;
  }
}
.main_Our{
  .section_family{
    background: none;
  }
}

.article_h2-family::before{
  background: url(../img/top/family_bg.jpg) no-repeat center top;
  background-size: 100% auto;
}

.main_ourfamily.family02{
  .family-headline_area{
    @media screen and (min-width: 761px) {
      &:before{
        background: rgba(31, 31, 31, 0.15) 0;
      }
    }
  }
  .family-headline_area .family-headline .catch_area {
    .catch{
      border-bottom: solid 1px $color-base;
    }
    h3{
      color: $color-base;
    }
  }
  .message-to-family dd .message_title,
  .family-h4{
    color: $color02;
  }
  .contents_title{
    background: #DEE3F5;
  }
  .family-faq_box .faq_title .q01{
    color: $color02;
  }
}

.family-headline_area{
  position: relative;
  /* for pc */
  @media screen and (min-width: 761px) {
    &:before{
      position: absolute;
      width: 100vw;
      height: 402px;
      z-index: -1;
      content: "";
      left: 0;
      top: -40px;
      background: rgba(226, 51, 0, 0.15) 0;
    }
  }
  .family-headline{
    position: relative;
    margin-top: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 0 30px;
    @media all and (-ms-high-contrast:none){
      padding: 1em 0.3em 0.1em;
    }
    @media screen and (max-width: 760px){
      padding: 0;
      margin-top:0;

    }
    .family_ph{
      position: absolute;
      top: -100px;
      left: -1%;
      width: 100%;
      max-width: 468px;
      z-index: 100;
      @media screen and (max-width: 760px){
        left: -5%;
        top: -20px;
        width: 40%;
      }
    }
    .catch_area{
      margin-top: 30px;
      text-align: left;
      padding-left: calc(5% + 428px);
      padding-right: 5%;
      @media screen and (max-width: 760px){
        padding-left: calc(40% + 10px);
      }
      h3{
        font-size: 87px;
        color: $color01;
        font-family: $font03;
        font-style: italic;
        @media screen and (max-width: 760px){
          font-size: 9.5vw;
        }
      }
      .catch{
        font-size: 47px;
        margin-bottom: 10px;
        padding-bottom: 20px;
        border-bottom: 1px solid $color01;
        @media screen and (max-width: 760px){
          font-size: 4vw;
          padding-top: 15px;
        }
      }
      .txt_department{
        font-size: 17px;
        font-family: $font01;
        margin-top: 20px;
      }
      .txt_name{
        font-family: $font03;
        font-style: italic;
        font-size: 27px;
      }
    }
  }
}

.main_ourfamily.family02{
    .family-headline{
      position: relative;
      margin-top: 40px;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 0 30px;
      @media all and (-ms-high-contrast:none){
        padding: 1em 0.3em 0.1em;
      }
      @media screen and (max-width: 760px){
        padding: 0;
        margin-top:0;
      }
    }
  .family-headline_area .family-headline {
    .family_ph{
      left: auto;
      max-width: 531px;
      right: -1%;
    }
    .catch_area{
      padding-right: calc(5% + 338px);
      padding-left: 0;
      .catch{
        font-feature-settings: 'palt';
      }
    }
  }
}


.section_ourfamily{
  margin-top: 137px;
  @media screen and (max-width: 760px) {
  /* for sp Device Only */
    margin-top: 0;
  }
  &:nth-child(2){
    margin-top: 107px;
    @media screen and (max-width: 760px) {
    /* for sp Device Only */
      margin-top: 13%;
      margin-bottom: 10%;
    }
    .contents_title{
      margin-bottom: 40px;
      @media screen and (max-width: 760px) {
      /* for sp Device Only */
        margin-bottom: 7%;
      }
    }
  }
  .family-h4{
    font-size: 42px;
    text-align: center;
    color: $color01;
    margin: 100px auto 20px;
    font-weight: bold;
    font-family: $font02;
    @media screen and (max-width: 760px){
      font-size: 6vw;
      margin-top: 10%;
      font-feature-settings: 'palt';
      margin-bottom: 5%;
    }
  }
  .contents_title{
    font-size: 37px;
    text-align: center;
    background: $color-bg05;
    padding: 10px;
    margin-bottom: 20px;
    @media screen and (max-width: 760px){
      font-size: 5vw;
    }
  }
  .txt{
    font-size: 19px;
    line-height: 1.8;
    margin-bottom: 70px;
    letter-spacing: -0.02em;
    @media screen and (max-width: 760px) {
    /* for sp Device Only */
      font-size: 3.7vw;
      margin-bottom: 0%;
    }
  }
  .family-faq_box{
    border: 1px solid $color-pager;
    padding: 20px;
    margin-top: 40px;
    @media screen and (max-width: 760px) {
    /* for sp Device Only */
      margin-top: 8%;
    }
    .first_faq{
      display: flex;
      margin: 0;
      @media screen and (max-width: 760px){
        display: block;
      }
      dt,dd{
        width: 50%;
        @media screen and (max-width: 760px){
          width: 100%;
        }
      }
      dd{
        padding-left: 30px;
        .txt{
          margin-bottom: 0;
          line-height: 1.6;
        }
        @media screen and (max-width: 760px){
          padding: 0;
          margin-top: 15px;
        }
      }
    }
    .faq_title{
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      @media screen and (max-width: 760px) {
      /* for sp Device Only */
        margin-bottom: 4%;
      }
      .question{
        font-family: $font03;
        font-style: italic;
        font-size: 87px;
        line-height: 1.0;
        @media screen and (max-width: 760px){
          font-size: 17.5vw;
        }
      }
      .q01{
        color: $color01;
      }
      .question_jap{
        font-size: 30px;
        padding-left: 15px;
        line-height: 1.4;
        margin-top: 11px;
        @media screen and (max-width: 760px){
          font-size: 5.5vw;
          font-feature-settings: 'palt';
          padding-left: 0;
        }
      }
    }
  }
  .message-to-family{
    display: flex;
    @media screen and (max-width: 760px){
      display: block;
    }
    dt{
      width: 33%;
    }
    dd{
      width: 67%;
      padding-left: 30px;
      .message_title{
        color: $color01;
        font-size: 30px;
        margin-bottom: 15px;
      }
    }
    @media screen and (max-width: 760px){
      dt{
        width: 80%;
        margin: 0 auto;
      }
      dd{
        width: 100%;
        padding-left: 0;
        margin-top: 15px;
        .message_title{
          font-size: 6vw;
          line-height: 1.4;
          font-feature-settings: 'palt';
          margin-bottom: 2%;
          padding: 0;
        }
      }
    }
  }
}


//other_family--回遊

.main_ourfamily.family01 {
  .box_family.famly01 {
    opacity: 0.3;
    a{
      pointer-events: none;
    }
  }
}

.main_ourfamily.family02 {
  .box_family.famly02 {
    opacity: 0.3;
    a{
      pointer-events: none;
    }
  }
}

.main_ourfamily{
  .section_family {
    background: none;
    /* for pc */
    @media screen and (min-width: 761px) {
      display:flex;
      max-width: 1060px;
      margin:0 auto;
      justify-content: space-between;
      .box_family {
        width: 49%;
        max-width: 534px;
        a {
          padding-bottom: 0;
          margin-bottom: 20px;
        }
      }
    }
    @media screen and (max-width: 760px) {
    /* for sp Device Only */
      width: 90%;
      margin: 0 auto;
      a{
        padding-bottom: 0;
      }
    }
  }
}


.family_area_other{
  h6{
    text-align: center;
    font-size: 30px;
    margin-top: 70px;
    em{
      color: $color01;
    }

  }
}

@media screen and (max-width: 760px) {
/* for sp Device Only */
  .family_area_other h6 {
    font-size: 5vw;
    margin-top: 0;
  }
}







// ビジョン
.main_ourfutureandvision{
  @media screen and (max-width: 760px) {
  /* for sp Device Only */
    .article_h2{
      padding-top: 8%;
      h2{
        margin-top: -18%;
        font-size: 12vw;
      }
    }
  }

  .article_h2-vision::before{
    background: url(../img/company/vision/mv_vision.jpg) bottom center no-repeat;
    background-size: 100% auto;
    height: 25vh;
    max-height: 380px;
    @media screen and (max-width: 760px) {
      /* for sp Device Only */
      background: url(../img/company/vision/mv_vision_sp.jpg) top center no-repeat;
      background-size: 100% auto;
    }
  }
  // 沿革ピンブロック
  .future-vision_container{
    background: $color-base;
    text-align: center;
    color: #fff;
    padding-bottom: 70px;
    .history_pins{
      .history_area{
        @media screen and (max-width: 760px) {
        /* for sp Device Only */
          background: none;
          height: 87vw;

          .inner{
            overflow-x: scroll;
            .ph {
              width: 315%;
            }

          }
        }
          position: relative;
          max-width: 1130px;
          max-height: 260px;
          height: 23vw;
          margin: 0 auto 30px;
          background: url(../img/top/history_area_bg.png) no-repeat bottom center;
          background-size: 100% auto;
        .pin{
          position: absolute;
          top: 13%;
          max-width: 115px;
          width: 9%;
          z-index: 1000;
          &.pin01 {
            left: 0;
            &.open{
              animation: 0.5s ease 1.0s normal bounceInDown both;
            }
          }
          &.pin02 {
            left: 19%;
            &.open{
              animation: 1.0s ease 1.0s normal bounceInDown both;
            }
          }
          &.pin03 {
            right: 38%;
            &.open{
              animation: 1.5s ease 1.0s normal bounceInDown both;
            }
          }
          &.pin04 {
            right: 0px;
            &.open{
              animation: 2s ease 1.0s normal bounceInDown both;
            }
          }
        }
      }
      .vision_mv-copy{
        @include font30();
        span{
          color: $color01;
        }
      }
      .vision_mv-copy_pha02{
        @include font26();
        margin-top: 40px;
        span{
          color: $color01;
          font-size: 150%;
        }
      }
      @media screen and (max-width: 760px){
        .wh_bg{
          width: 80%;
          margin: 10% auto 8%;
          padding: 9px;
          background: #fff;
          color: $color-base;
          padding-right: 50px;
          position: relative;
          font-size: 14px;
        }
        .wh_bg:before {
          width: 35px;
          height: 1px;
          background: $color-base;
          position: absolute;
          top: 0;
          bottom: 0;
          right: 9px;
          margin: auto;
          vertical-align: middle;
          content: "";
        }

        .wh_bg:after {
          right: -53px;
          position: absolute;
          content: "";
          right: 10px;
          width: 13px;
          top: 39%;
          height: 13px;
          transform: rotate(28deg);
          border-top: 1px solid $color-base;
        }
      }
    }
  }

  //フェーズ
  .phase_container{

    background: transparent;
    padding: 50px 0 120px;
    &::before {
      content:"";
      display:block;
      position:fixed;
      top:0;
      left:0;
      z-index:-2;
      width:100%;
      height:100vh;
      background:url(../img/company/vision/co_vision_bg_pc.jpg) center no-repeat;
      background-size:cover;
    }

    .phase-title{
      text-align: center;
      &_eng{
        font-family: $font03;
        font-style: italic;
        color: $color02;
        @include font47();
        padding: 0 0 20px;
      }
      &_jap{
        @include font55();
        span{
          color: $color01;
        }
      }
    }

    .phase-detail-title{
      margin: 10% auto 20px;
      text-align: center;
      .revol_title{
        background: $color-base;
        padding:10px 15px;
        vertical-align: top;
        display: inline-block;
        margin-top: 5px;
        text-align: center;
        color: #fff;
        font-size: 25px;
        position: relative;
        &::before,
        &::after{
          top: 0;
          bottom: 0;
          margin: auto;
          content: "";
          vertical-align: middle;
        }
        &::after{
          position: absolute;
          right: -45px;
          border: 31px solid transparent;
          border-left: 14px solid $color-base;
        }
        @media screen and (max-width: 480px){
          font-size: 14px;
          padding: 10px;
          &::after{
            right: -33px;
            border: 21px solid transparent;
            border-left: 12px solid #1f1f1f;
          }
        }
      }
      .phase-num{
        margin-left: 30px;
        @include font100();
        font-family: $font03;
        display: inline-block;
        line-height: 0.6;
        &-red{
          color: $color01;
        }
        &-blue{
          color: $color02;
        }
      }
    }

    .chronogical-box{
      padding: 10px 15px;
      text-align: center;
      color: #fff;
      @include font28();
      span{
        font-size: 70%;
      }
      &-red{
        background: $color01;
      }
      &-blue{
        background: $color02;
      }
    }

    .chrono-headline{
      @include font47();
      text-align: center;
      margin: 20px auto;
      font-family: $font02;
    }
    .chrono-photo{
      display: flex;
      flex-wrap: wrap;
      margin: 40px auto;
      li{
        width: 25%;
        margin: 0 auto;
        @media screen and (max-width: 760px){
          width: 50%;
        }
      }
    }

    .chrono-comment_box{
      background: $color-bg06;
      border: 1px solid $color-bd01;
      padding: 40px;
      @media screen and (max-width: 760px){
        padding: 15px 20px;
      }
      .comment-title{
        @include font28();
        text-align: center;
        margin-bottom: 20px;
        &-red{
          color: $color01;
        }
        &-blue{
          color: $color02;
        }
      }
    }

    .phase-conclusion{
      margin: 50px auto;
      @include font28();
      text-align: center;
      span.red{
        color: $color01;
      }
      span.blue{
        color: $color02;
      }
    }
    .conclusion-img{
      margin: 40px auto 0;
    }

    .icon_list{
      display: flex;
      flex-flow: row wrap;
      justify-content: center;
      margin: 40px auto;
      width: 100%;
      .icon{
        width: calc(25% - 30px);
        padding: 20px;
        @media screen and (max-width:760px){
          width: 50%;
        }
      }
    }

    .last-lead_box{
      text-align: center;
      font-feature-settings: 'palt';
      @include font28();
      .middle-sentence{
        margin: 30px auto;
      }
      .middle-red{
        color: $color01;
        font-size: 150%;
      }
      .last-conclusion{
        @include font47();
        color: $color01;
        margin: 20px auto 40px;
      }
    }

  }

}



.main_Project{

  .section_story{
    background: none;
    /* for sp iPad */
    @media screen and (max-width: 979px) {
      padding-top:0;
    }
    @media screen and (max-width: 760px) {
    /* for sp Device Only */
      padding: 5% 0 0;
    }
  }
}


//フィロソフィ
.main_philosophy{
  @media screen and (max-width: 760px) {
  /* for sp Device Only */
    .article_h2{
      padding: calc(75px + 0%) 0 10%;
    }
  }
  .section_catch_ph{
    max-width: 660px;
    margin: 0 auto 100px;
    @media screen and (max-width: 760px) {
    /* for sp Device Only */
      margin: 0 auto 17%;
    }
  }
  .section_other_ttl{
    .sub{
      margin-top: 5px;
      font-size: 19px;
    }
    .catch {
      font-size: 33px;
      margin-top: 19px;
      line-height: 1.3;
      @media screen and (max-width: 760px) {
      /* for sp Device Only */
        font-size: 6vw;
        margin-bottom: 5%;
      }
    }
  }
  .box h4 {
    text-align: center;
    font-size: 22px;
    background: $color02;
    font-family: $font-base;
    font-weight: 900;
    color: #fff;
    padding: 10px;
    margin-bottom: 15px;
    @media all and (-ms-high-contrast:none){
      padding: 1.3em 0.3em 0.1em;
    }
  }
  .tbl_rec{
    display: flex;
    max-width: 1120px;
    margin: 0 auto;
    border: none;
    flex-wrap: wrap;
    font-family: $font01;
    font-weight: 400;
    font-size: 17px;
    dt {
      display: flex;
      box-sizing: border-box;
      width: 30%;
      padding: 20px;
      text-align: center;
      color: $color-base;
      border-top: 8px solid #fff;
      background: #c7c7c7;
      justify-content: center;
      align-items: center;
    }
      dd {
      box-sizing: border-box;
      width: 70%;
      margin: 0;
      padding: 20px;

      border-top: 8px solid #fff;
      border-left: 8px solid #fff;
      background: #ededed;
    }
  }
  @media screen and (max-width: 760px) {
  /* for sp Device Only */
      .tbl_rec{
        display: flex;
        max-width: 100%;
        margin: 0 auto;
        border: none;
        flex-wrap: wrap;
        font-family: $font01;
        font-weight: 400;
        font-size: 4vw;
        dt {
          display: flex;
          box-sizing: border-box;
          width: 100%;
          padding: 3%;
          text-align: left!important;
          color: $color-base;
          border-top: 4px solid #fff;
          background: #c7c7c7;
          justify-content: center;
          align-items: center;
        }
        dd {
          box-sizing: border-box;
          width: 100%;
          margin: 0;
          padding: 3%;
          text-align: center;
          border-top: 4px solid #fff;
          border-left: none;
          background: #ededed;
        }
      }
  }
}


//数字で見る 共通
.main_number{
  padding-bottom: 140px;
  @media screen and (max-width: 760px) {
  /* for sp Device Only */
    padding-bottom: 10%;
  }
  .icon_circle {
    border-radius: 50px;
    background: $color-base;
    width: 100px;
    height: 100px;
    color: #fff;
    justify-content: center;
    display: flex;
    align-items: center;
    font-size: 22px;
    @media screen and (max-width: 760px) {
    /* for sp Device Only */
      width: 90px;
      height: 90px;
      font-size: 5vw;
    }
  }
}

.main_number{
  h4 {
    color: #fff;
    text-align: center;
    padding: 11px;
    font-size: 29px;
    font-family: $font-base;
    font-weight: 900;
    margin-bottom: 30px;
    &.red{
      background: $color01;
    }
    &.blue{
      background: $color02;
    }
    @media screen and (max-width: 760px) {
    /* for sp Device Only */
      font-size: 5vw;
    }
  }
  @media all and (-ms-high-contrast:none){
    h4 {
      padding: 1.3em 0.3em 0.1em;
    }
  }

  .view_area {
    margin-bottom: 40px;
    position: relative;
    height: 628px;
    margin-bottom: 70px;
    /* for sp iPad */
    @media screen and (max-width: 979px) {
      height: 50vw;
    }
    @media screen and (max-width: 760px) {
    /* for sp Device Only */
      height: 117vw;
      margin-bottom: 15%;
    }
    .ph{
      position: absolute;
      top: 0;
      left: 0;
      z-index: 100;
      opacity: 0;
    }
    .ph01.open{
      opacity: 1;
      animation: 2.2s ease 1.0s normal rubberBand both;
    }
    .ph02.open{
      opacity: 1;
      animation: 2.8s ease 1.0s normal rubberBand both;
    }
    .ph03.open{
      opacity: 1;
      animation: 3s ease 1.0s normal rubberBand both;
    }
  }
  .number{
    span{
      font-family: $font03;
      font-weight: 500;
      font-style: italic;
    }
  }
}


//数字で見る section01
.main_number{
  .section01 {
    /* for pc */
    @media screen and (min-width: 761px) {
      display: flex;
      justify-content: space-between;
      margin-bottom: 70px;
    }
    .num_box {
      border: solid 1px $color-base;
      background: #fff;
      padding: 20px 20px 40px;
      text-align: center;
      position: relative;
      width: 31%;
      @media screen and (max-width: 760px) {
      /* for sp Device Only */
        width: 100%;
        margin-bottom: 10%;
      }
    }
  }
}


.main_number{
  .section01 {
    .num_box .average {
      position: absolute;
      top: -40px;
      background: $color01;
      color: #fff;
      border-radius: 70px;
      width: 90px;
      height: 90px;
      padding: 18px 10px;
      right: -30px;
      z-index: 100;
      .ave_txt {
        display: block;
      }
      @media screen and (max-width: 760px) {
      /* for sp Device Only */
        top: -8%;
        right: 2%;
        padding: 5% 2%;
      }
      .en {
        font-size: 30px;
        font-family: $font03;
        font-style: italic;
        font-weight: 500;
        letter-spacing: -0.03em;
      }
    }
  }
}

.main_number{
  .num_box h3 {
    font-size: 42px;
    line-height: 1.2;
    font-family: $font03;
    font-weight: 500;
    font-style: italic;
    small {
      display: block;
      color: $color-base;
      font-size: 14px;
      font-family: $font-tit;
      font-weight: 500;
      margin-bottom: 10px;
    }
  }

  .graph {
    position: relative;
    .num_graph {
      position: absolute;
      color: #fff;
      font-size: 40px;
      font-family: $font03;
      line-height: 1;
      font-weight: 500;
      font-style: italic;
      z-index: 1000;
      &.graph01{
        top: 22%;
        left: 24%;
        /* for sp iPad */
        @media screen and (min-width: 761px)  and (max-width: 979px) {
          top: 25%;
          left: 7%;
        }
      }
      &.graph02{
        top: 42%;
        right: 27%;
        /* for sp iPad */
        @media screen and (min-width: 761px)  and (max-width: 979px) {
          right: 10%;
        }
      }
      small {
        font-weight: bold;
        display: block;
        font-size: 18px;
        line-height: 1.3;
        font-family: $font-tit;
      }
      .number01{
        font-size: 45px;
      }
      .per{
        font-family: $font03;
        font-style: italic;
        font-weight: 500;
        font-size: 26px;
        font-weight: 900;
      }
    }
  }
}



//数字で見る number03
.main_number{
  .section03{
    color: $color01;
    .human_box {
      max-width: 436px;
      width: 48%;
      position: relative;
      height: 266px;
      @media screen and (max-width: 760px) {
      /* for sp Device Only */
        height: 37vw;
        overflow: hidden;
        margin-top: 7%;
        width: 100%;
      }
      .ph {
        position: absolute;
        z-index: 1000;
        opacity: 0;
      }
      .ph04.open{
        opacity: 1;
        animation: 0.5s ease 1.0s normal bounceInDown both;
      }
      .ph05.open{
        opacity: 1;
        animation: 0.8s ease 1.0s normal bounceInDown both;
      }
      .ph06.open{
        opacity: 1;
        animation: 1s ease 1.0s normal bounceInDown both;
      }

    }

  }
}

.main_number{
  .section03{
    h4.red{
      margin-bottom: 50px;
      @media screen and (max-width: 760px) {
      /* for sp Device Only */
        line-height: 1.4;
        margin-bottom: 5%;
      }
    }
    .connection_area {
      max-width: 512px;
      width: 50%;
      @media screen and (max-width: 760px) {
      /* for sp Device Only */
        width: 100%;

      }
    }

    .num_area {
      /* for pc */
      @media screen and (min-width: 761px) {
        display: flex;
        flex-wrap: wrap;
        max-width: 980px;
        margin: 0px auto 30px;
        align-items: center;
        justify-content: space-between;
      }
      @media screen and (max-width: 760px) {
      /* for sp Device Only */
        width: 100%;
        margin: 0 auto 10%;
      }
      &.num02{
        margin-bottom: 100px;
        max-width: 880px;
        @media screen and (max-width: 760px) {
        /* for sp Device Only */
          margin-bottom: 15%;
        }
      }
    }



    .icon_connection {
      position: absolute;
      top: 0;
      left: -50px;
      /* for sp iPad */
      @media screen and (min-width: 761px)  and (max-width: 979px) {
        top: -11%;
        left: 0;
      }
      @media screen and (max-width: 760px) {
      /* for sp Device Only */
        left: 0;
      }
    }

    .first_box {
      position: relative;
      padding-top: 29px;
      .number {
        font-size: 47px;
        position: relative;
        @media screen and (max-width: 760px) {
        /* for sp Device Only */
          font-size: 10vw;
          text-align: center;
        }
        span {
          font-size: 100px;
          font-family: $font03;
          font-style: italic;
          letter-spacing: -0.04em;
          font-weight: 500;
          /* for sp iPad */
          @media screen and (min-width: 761px)  and (max-width: 979px) {
            font-size: 9vw;
          }
          @media screen and (max-width: 760px) {
          /* for sp Device Only */
            font-size: 19vw;
            margin: 0 auto;
          }
        }
      }
    }
  }
}

.main_number{
  .section03{
    .map_box {
      width: 30%;
      max-width: 254px;
      position: relative;
      @media screen and (max-width: 760px) {
      /* for sp Device Only */
        width: 100%;
        max-width: 77%;
        margin: 0 auto;
      }
      .icon_circle.icon_area {
        position: absolute;
        right: -112px;
        top: 19px;
        z-index: 1000;
        @media screen and (max-width: 760px) {
        /* for sp Device Only */
          right: -11%;
        }
      }
      .num_box {
        width: 60%;
        display: flex;
        align-items: center;
        @media screen and (max-width: 760px) {
        /* for sp Device Only */
          width: 100%;
        }
        .number {
          width: 60%;
          font-size: 26px;
          align-items: center;
          span {
            font-size: 100px;
            line-height: 1;
          }
        }
      }

      .number_contents {
        width: 100%;
        li {
          display: inline-block;
          width: 48%;
          .number span {
            font-size: 38px;
          }
        }
      }
    }
  }
}

.main_number{
  .section03{
    .num_box {
      display: flex;
      align-items: center;
      width: 70%;
      @media screen and (max-width: 760px) {
      /* for sp Device Only */
        width: 100%;
      }
      .number{
        font-size: 26px;
        @media screen and (max-width: 760px) {
        /* for sp Device Only */
          font-size: 4vw;
        }
        span{
          font-size: 100px;
          font-family: $font03;
          font-style: italic;
          font-weight: 500;
          vertical-align: middle;
          @media screen and (max-width: 760px) {
          /* for sp Device Only */
            font-size: 17vw;
          }
          &.per{
            font-size: 70px;
            vertical-align: text-top;
            line-height: 0.8;
            @media screen and (max-width: 760px) {
            /* for sp Device Only */
              font-size: 12vw;
            }
          }
        }
      }
      .number_contents {
        width: 40%;
        max-width: 252px;
        margin-left: 30px;
        @media screen and (max-width: 760px) {
        /* for sp Device Only */
          width: 52%;
          margin-left: 2%;
          max-width: 100%;
        }
      }
    }
  }
}

//数字で見る number04
.main_number{
  .section04{
    /* for pc */
    @media screen and (min-width: 761px) {
      display: flex;
      justify-content: space-between;
    }
    .contents_box{
      padding: 20px 28px;
      text-align: center;
      position: relative;
      width: 31%;
      /* for sp iPad */
      @media screen and (min-width: 761px)  and (max-width: 979px) {
        padding: 2% 2%;
      }
      @media screen and (max-width: 760px) {
      /* for sp Device Only */
        width: 100%;
        margin-bottom: 5%;
        padding: 6% 7% 10%;
        margin-bottom: 15%;
      }
      background: #FCEAE5;
      h3{
        color: $color01;
        font-size: 42px;
        font-family: $font03;
        font-style: italic;
        font-weight: 500;
        line-height: 1.3;
        margin-bottom: 15px;
        small{
          display: block;
          font-size: 14px;
          color: $color-base;
        }
      }
      .icon_box {
        position: absolute;
        width: 100px;
        height: 100px;
        right: -24px;
        top: -40px;
        border-radius: 70px;
        z-index: 1000;
        @media screen and (max-width: 760px) {
        /* for sp Device Only */
          right: 4%;
        }
      }
    .txt_list li {
      border-bottom: dotted 3px #F1997F;
      padding-bottom: 6px;
      margin-bottom: 4px;
      font-size: 18px;
      @media all and (-ms-high-contrast:none){
          padding: 1.3em 0.3em 0.1em;
      }
      &:last-child {
        margin-bottom:0;
        border-bottom:none;
      }
      }
      &:nth-child(odd){
        background: #E8ECF8;
        h3{
          color: $color02;
          small{
            color: $color-base;
          }
        }
        .txt_list li {
          border-bottom: dotted 3px #8FA2DC;
          &:last-child {
            margin-bottom:0;
            border-bottom:none;
          }
        }
      }
    }
  }
}


.main_number{
  .section04{
    .num_list {
      display: flex;
      flex-wrap: wrap;
      li {
        text-align: left;
        font-size: 16px;
        width: 47%;
        margin-right: 3%;
        margin-bottom: -7px;
        &:nth-child(even){
          margin-right: 0;
        }
        span {
          text-align: right;
          font-size: 37px;
          color: $color02;
          &.list_name {
            color: $color-base;
            font-size: 15px;
            width: 47%;
            font-weight: 600;
            display: inline-block;
            text-align: left;
            margin-left: 0;
            font-style: initial;
            /* for sp iPad */
            @media screen and (min-width: 761px)  and (max-width: 979px) {
              font-size: 1.2vw;
            }
          }
          &.per{
            font-size: 29px;
          }
        }
      }
    }
    .icon_ph {
      width: 154px;
      margin: 0 auto;
    }
  }
}


//福利厚生
.main_welfare{
  padding-bottom: 0;

  //回遊時のバナー非表示
  .section_other_contents{
    .-welfare{
      display: none;
    }
  }
}


.main_welfare .section_strong_welfare {
  border: solid 1px $color-base;
  padding: 20px;
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 60px;

  .ph {
    width: 40%;
    max-width: 436px;
  }

  .txt_box {
    width: 58%;
    h3 {
      font-size: 27px;
      margin-bottom: 10px;
      line-height: 1.4;
      /* for sp iPad */
      @media screen and (max-width: 979px) {
          font-size: 3vw;
      }
    }
  }
  //sp
  @media screen and (max-width: 760px) {
  /* for sp Device Only */
    display: block;
    padding:3% 3% 10% 3%;
    margin-bottom: 10%;
    .ph,
    .txt_box{
      width:100%;
    }
    .ph{
      margin-bottom: 5%;
    }
    .txt_box h3{
      font-size: 4.7vw;
      margin-bottom: 2%;
    }
  }
}

//福利厚生 --リストコンテンツ
.main_welfare{
  .list_welfare {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 70px;
    @media screen and (max-width: 760px) {
    /* for sp Device Only */
      margin-bottom: 15%;
    }
    li {
      width: 22.5%;
      max-width: 254px;
      margin-right: 3%;
      margin-bottom: 70px;
      @media screen and (max-width: 760px) {
      /* for sp Device Only */
        width: 47%;
        margin-right: 6%;
        margin-bottom: 13%;
        &:nth-child(2n){
          margin-right: 0;
        }
      }
      /* for pc */
      @media screen and (min-width: 761px) {
        &.long_txt {
          width: 48%;
          max-width: 540px;
          .txt{
            width: 67%;
            margin: 0 auto;
          }
        }
        &:last-child,
        &:nth-child(4) ,
        &:nth-child(7) {
          margin-right: 0;
        }
        &:nth-child(5),
        &:nth-child(6){
          text-align: center;
        }
        &:nth-child(5),
        &:nth-child(6),
        &:nth-child(7) {
          width: 31%;
          max-width: 350px;
        }
      }
      .icon {
        width: 80%;
        max-width: 115px;
        margin: 0 auto 20px;
        display: block;
      }
      h4 {
        text-align: center;
        font-size: 27px;
        font-weight: 900;
        margin-bottom: 10px;
        font-family: $font-base;
        @media screen and (max-width: 979px) {
          font-size: 2.3vw;
        }
        @media screen and (max-width: 760px) {
        /* for sp Device Only */
          font-size: 4.8vw;
        }
      }
      .txt{
        font-feature-settings: 'palt';
      }
    }
  }
}

//福利厚生
.main_event{
  padding-bottom: 0;

  //回遊時のバナー非表示
  .section_other_contents{
    .-event{
      display: none;
    }
  }
  h3{
    background: $color02;
    color: #fff;
    text-align: center;
    font-size: 23px;
    padding: 10px;
    margin: 30px auto;
    @media screen and (max-width: 760px) {
    /* for sp Device Only */
      font-size: 5.5vw;
      margin: 0 auto 8%;
    }
    @media all and (-ms-high-contrast:none){
      padding: 1em 0.3em 0.1em;
    }
  }
}

//イベント --リストコンテンツ
.main_event{
  .list_events {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 70px;
    @media screen and (max-width: 760px) {
    /* for sp Device Only */
      margin-bottom: 15%;
    }
    li {
      width: 31%;
      max-width: 350px;
      margin-right: 3%;
      margin-bottom: 70px;
      /* for pc */
      @media screen and (min-width: 761px) {
        &:nth-child(3n){
          margin-right: 0;
        }
      }
      @media screen and (max-width: 760px) {
      /* for sp Device Only */
        width: 47%;
        margin-right: 6%;
        margin-bottom: 13%;
        &:nth-child(2n){
          margin-right: 0;
        }
      }
      .ph {
        width: 100%;
        margin: 0 auto 20px;
        display: block;
      }
      h4 {
        text-align: center;
        font-size: 27px;
        font-weight: 900;
        margin-bottom: 10px;
        font-family: $font-base;
        @media screen and (max-width: 979px) {
          font-size: 2.3vw;
        }
        @media screen and (max-width: 760px) {
        /* for sp Device Only */
          font-size: 4.7vw;
          line-height: 1.3;
        }
      }
      .txt{
        font-feature-settings: 'palt';
      }
    }
  }
}



//代表メッセージ
.main_feature{
  h4 {
    font-size: 34px;
    text-align: center;
    margin-bottom: 30px;
    @media screen and (max-width: 760px) {
    /* for sp Device Only */
      font-size: 6.5vw;
      line-height: 1.4;
      margin-bottom: 4%;
      font-feature-settings: 'palt';
    }
  }

  .section_feature_inner .ph {
    max-width: 570px;
    margin: 0 auto 50px;
    @media screen and (max-width: 760px) {
    /* for sp Device Only */
      width: 92%;
    }
  }

  .txt {
    text-align: center;
    line-height: 1.8;
    margin-bottom: 50px;
    @media screen and (max-width: 760px) {
    /* for sp Device Only */
      width: 90%;
      margin: 0 auto 10%;
      text-align: left;
      line-height: 1.6;
    }
  }
}

//FEATURE 3つの特徴 --基本
.main_feature{
  .catch_area{
    margin-bottom: 110px;
    @media screen and (max-width: 760px) {
    /* for sp Device Only */
      margin-bottom: 20%;
    }
    h4 {
      margin-bottom: 10px;
    }
    h5 {
      font-size: 26px;
      text-align: center;
      margin-bottom: 10px;
      @media screen and (max-width: 760px) {
      /* for sp Device Only */
        font-size: 5.5vw;
        margin-bottom: 6%;
      }
    }
    .chart_area{
      .ph {
        max-width: 740px;
        margin-bottom: 100px;
        @media screen and (max-width: 760px) {
        /* for sp Device Only */
          width: 87%;
          margin-bottom: 10%;
        }
      }
    }
  }
}
//FEATURE 3つの特徴 --各種リンクボタン
.main_feature{
  .links_area a {
    border: solid 1px $color-base;
    /* for pc */
    @media screen and (min-width: 761px) {
      display: flex;
      max-width: 1120px;
      margin: 0 auto 40px;
      width: 90%;
      padding: 25px;
      justify-content: space-between;
      .ph{
        width: 55%;
        max-width: 564px;
        margin: 0;
      }
      .txt_box{
        width: 42%;
        max-width: 542px;
      }
    }
    .txt_box{
      .icon_catch {
        font-size: 28px;
        font-style: italic;
        font-family: $font03;
        font-weight: 500;
        color: rgba($color01, 0.5);
      }
      h6{
        font-size: 33px;
        line-height: 1.4;
        margin-bottom: 5px;
        /* for sp iPad */
        @media screen and (max-width: 979px) {
          font-size: 3vw;
        }
        @media screen and (max-width: 760px) {
        /* for sp Device Only */
          font-size: 6vw;
          text-align: center;
        }
      }
      .txt{
        text-align: left;
        margin-bottom: 20px;
        /* for sp iPad */
        @media screen and (max-width: 979px) {
          font-size: 1.4vw;
        }
        @media screen and (max-width: 760px) {
        /* for sp Device Only */
          width: 100%;
          font-size: 3.7vw;
        }
      }
      .btn.red_btn {
        margin: 0;
        font-style: initial;
        font-size: 14px;
        height: 52px;
        max-width: 220px;
        @media screen and (max-width: 760px) {
        /* for sp Device Only */
          max-width: 56%;
          height: 39px;
          margin: 0 auto 8%;
        }
      }
    }
    @media screen and (max-width: 760px) {
    /* for sp Device Only */
      width: 90%;
      display: block;
      margin: 0 auto 7%;
      padding: 3%;
      .ph{
        width: 100%;
        margin-bottom: 5%;
      }
      .txt_box{
        .icon_catch{
          text-align: center;
          font-size: 6vw;
        }
      }
    }
  }
}

//FEATURE 3つの特徴 --各種リンクボタン
.main_feature{
  .links_area:nth-child(odd) a{
    .ph{
      order: 1;
    }
    .txt_box{
      order: 2;
    }
  }
  .links_area:nth-child(even) a{
    .ph{
      order: 2;
    }
    .txt_box{
      order: 1;
    }
  }
}

//代表メッセージ
.main_message{
  .section_message {
    display: flex;
    max-width: 1100px;
    width: 95%;
    flex-wrap: wrap;
    margin: 0 auto 30px;
    justify-content: space-between;
    @media screen and (max-width: 760px) {
    /* for sp Device Only */
      padding: 3%;
    }
  }
}

.main_message{
  .message_box {
    width: 57%;
    max-width: 636px;
    @media screen and (max-width: 760px) {
    /* for sp Device Only */
      width: 100%;
      order: 2;
    }
    h4 {
      color: $color01;
      border-bottom: solid 1px $color-base;
      padding-bottom: 14px;
      margin-bottom: 20px;
      font-family: $font03;
      font-size: 48px;
      font-style: italic;
      font-weight: 500;
      small{
        font-size: 24px;
        font-family: $font-base;
        color: $color-base;
      }
      @media screen and (max-width: 760px) {
      /* for sp Device Only */
        font-size: 9vw;
        margin-bottom: 6%;
        padding-bottom: 4%;
        small{
          font-size: 5vw;
        }
      }
    }
    .txt_box {
      /* for pc */
      @media screen and (min-width: 761px) {
        padding: 10px;
      }
      h5 {
        color: $color01;
        font-size: 24px;
        margin-bottom: 12px;
        @media screen and (max-width: 760px) {
        /* for sp Device Only */
          font-size: 5.6vw;
          margin-bottom: 2%;
          line-height: 1.4;
        }
      }
      .txt{
        @media screen and (max-width: 760px) {
        /* for sp Device Only */
          margin-bottom: 7%;
        }
      }
    }
  }
  .ph_box {
    width: 40%;
    max-width: 410px;
    @media screen and (max-width: 760px) {
    /* for sp Device Only */
      order: 1;
      width: 100%;
      margin-bottom: 5%;
    }
  }
}
.main_message{
  .section_hqcc{
    width: 100%;
  }
  .area_hqcc {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .hqcc_box {
      text-align: center;
      width: 48%;
      margin-bottom: 30px;
      @media screen and (max-width: 760px) {
      /* for sp Device Only */
        width: 100%;
      }
      h6 {
        font-size: 48px;
        line-height: 1;
        margin-bottom: 10px;

        em {
          font-size: 120px;
          font-family: $font03;
          font-weight: 500;
          font-style: italic;
        }
        @media screen and (max-width: 760px) {
        /* for sp Device Only */
          font-size: 8vw;
          em{
            font-size: 23vw;

          }
        }
      }
    }
  }
}

.main_message{
  .area_hqcc .hqcc_box {
    .catch {
      color: #fff;
      padding: 7px;
      margin-bottom: 10px;
      position: relative;
      font-size: 25px;
      @media screen and (max-width: 760px) {
      /* for sp Device Only */
        font-size: 6vw;
        padding: 0%;
        font-feature-settings: 'palt';
      }
      &:after{
        content: "";
        position: absolute;
        z-index: 100;
        top: 50%;
        transform: translateY(-50%);
        width: 200px;
        height: 270px;
        @media screen and (max-width: 760px) {
        /* for sp Device Only */
          width: 34%;
          height: 40vw;
        }
      }

    }
    h6{
      font-family: $font03;
      font-weight: 500;
      font-style: italic;
    }
  }
  .area_hqcc .hqcc_box{
    &.box01{
      h6{
        color: #F30712;
      }
      .catch{
        background: #F30712;
        &::after{
          background: url(../company/message/img/hqcc01.png)no-repeat top center;
          background-size: 100% auto;
          left: -80px;
          top: -200%;
          animation: horizontal 1s ease-in-out infinite alternate;
          @media screen and (max-width: 760px) {
          /* for sp Device Only */
            left: -7%;
            top: -170%;
          }
        }
      }
    }
    &.box02{
      h6{
        color: #149C1B;
      }
      .catch{
        background: #149C1B;
        &::after{
          animation: squash 1s ease-in-out infinite;
          background: url(../company/message/img/hqcc03.png)no-repeat top center;
          background-size: 100% auto;
          right: -80px;
          top: -220%;
          @media screen and (max-width: 760px) {
          /* for sp Device Only */
            right: -8%;
          }
        }
      }
    }
    &.box03{
      h6{
        color: #013EBD;
      }
      .catch{
        background: #013EBD;
        &::after{
          top: -285%;
          background: url(../company/message/img/hqcc02.png)no-repeat top center;
          background-size: 100% auto;
          left: -80px;
          animation: wrench_4444 2.875s ease infinite;
          @media screen and (max-width: 760px) {
          /* for sp Device Only */
            left: -5%;
          }
        }
      }
    }
    &.box04{
      h6{
        color: #EFD100;
      }
      .catch{
        background: #EFD100;
        &::after{
          top: -270%;
          background: url(../company/message/img/hqcc04.png)no-repeat top center;
          background-size: 100% auto;
          animation: swing linear 5s infinite;
          right: -110px;
          @media screen and (max-width: 760px) {
          /* for sp Device Only */
            right: -7%;
            top: -55%;
            width: 29%;
          }
        }
      }
    }
  }
}

//メッセージ：ボタン上テキスト
.main_message{
  padding-bottom: 30px;
  @media screen and (max-width: 760px) {
  /* for sp Device Only */
    padding-bottom: 2%;
  }
  .catch_about {
    text-align: center;
    margin: 30px auto 60px;
    font-size: 30px;
    font-feature-settings: 'palt';
    @media screen and (max-width: 760px) {
    /* for sp Device Only */
      font-size: 6.3vw;
      margin-bottom: 5%;
    }
    em{
      color: $color01;
    }
  }
  .bnr_area{
    max-width: 1440px;
    margin: 0 auto;
  }
}
@keyframes horizontal {
    0% { transform:translateX( -3px); }
  100% { transform:translateX(  0px); }
}

@keyframes squash {
  0% {transform: scale(1) translate(0, 0);}
  50% {transform: scale(0.8) translate(0, 0px);}
  100% {transform: scale(1) translate(0, 0);}
}

@keyframes wrench_4444 {
  0% { transform:rotate(-10deg) }
  6.95652% { transform:rotate(10deg) }
  8.69565% { transform:rotate(10deg) }
  15.65217% { transform:rotate(-10deg) }
  17.39131% { transform:rotate(-10deg) }
  24.34782% { transform:rotate(10deg) }
  26.08696% { transform:rotate(10deg) }
  33.04348% { transform:rotate(-10deg) }
  34.78261% { transform:rotate(-10deg) }
  41.73913% { transform:rotate(10deg) }
  43.47826% { transform:rotate(10deg) }
  50.43478% { transform:rotate(-10deg) }
  52.17391% { transform:rotate(-10deg) }
  59.13044% { transform:rotate(10deg) }
  65.21739% { transform:rotate(0deg) }
  100% { transform:rotate(0deg) }
}

@keyframes swing {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

//プロジェクトストーリー
.section_story .inner .box_story.story01 .project_contents{
  padding-top: 10px;
  &:before{
    top: -12%;
  }
}

.main_top.main_Our.family{
  padding-bottom: 0;
}

//Other 3カラムの共通パーツ
.section_other_ttl{
  .article_h2::before{
    display: none;
  }
  .article_h2{
    padding: 0px 0 50px;
    @media screen and (max-width: 760px) {
    /* for sp Device Only */
      padding-top: 0;
      width: 90%;
      margin: 0 auto;
      padding-bottom: 5%;
    }
  }
}



/*section_other_contents*/
.section_other_contents{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  .contents_box{
    width: 100%;
    a{
      padding: 9% 5% 8%;
      text-align: center;
      width: 100%;
      display: block;
      height: 100%;
      color: #fff;
      display: inline-block;
      vertical-align: middle;
      position: relative;
      h3{
        display: inline-block;
        margin-right: 20px;
        vertical-align: middle;
        /* 共通font */
        font-size: 60px;
        font-family: $font03;
        font-weight: 500;
        font-style: italic;
        @media screen and (max-width: 760px) {
        /* for sp Device Only */
          font-size: 11vw;
        }
      }
      .sub{
        font-size: 22px;
        display: inline-block;
        vertical-align: middle;
        font-family: $font01;
        position: relative;
        @media screen and (max-width: 760px) {
        /* for sp Device Only */
          font-size: 3.9vw;
          display: block;
        }
        &:after{
          content: "";
          background: url(../img/cmn/arrow.png)no-repeat top center;
          background-size: 100% auto;
          top: auto;
          @media screen and (max-width: 760px) {
            /* for sp Device Only */
            left: 50%;
            transform: translateX(-50%) translateY(0);
            bottom: -18px;
            right: 0;
          }
          /* for pc */
          @media screen and (min-width: 761px) {
            right: -80px;
            top: 50%;
            transform: translateY(-50%);
          }
          width: 58px;
          height: 7px;
          position: absolute;
          z-index: 1000;
        }
      }
    }
    &.-message_area{
      /* for pc */
      &.open{
        animation: 1.0s ease 1.0s normal fadeInLeft both;
      }

      @media screen and (min-width: 761px) {
        width: 50%;
      }
      a{
        padding: 18%;
        background:url(../img/top/message_bg.jpg)no-repeat top center;
        background-size: cover;
      }
    }
    &.-message_area,
    &.-feature_area{
      .sub:after{
        left: 50%;
        transform: translateX(-50%) translateY(0);
        bottom: -30px;
        right: 0;
        top: auto;
        @media screen and (max-width: 760px) {
        /* for sp Device Only */
          bottom: -18px;
        }
      }
    }
    &.-feature_area{
      &.open{
        animation: 1.0s ease 1.0s normal fadeInRight both;
      }

      /* for pc */
      @media screen and (min-width: 761px) {
        width: 50%;
      }
      a{
        padding: 18%;
        background:url(../img/top/aoubt_bg.jpg)no-repeat top center;
        background-size: cover;

      }
    }

  &.-number_area{
    width: 100%;
    &.open{
      animation: 1.0s ease 1.0s normal fadeInUp both;
    }

    a{
      background:url(../img/top/number_bg.jpg)no-repeat top center;
      background-size: cover;
      @media screen and (max-width: 760px) {
      /* for sp Device Only */
        background:url(../img/top/number_bg_sp.jpg)no-repeat top center;
        background-size: cover;
        padding: 21% 0;
      }
      h3{
        font-size: 68px;
        font-family: $font03;
        font-style: italic;
        font-weight: 500;

        @media screen and (max-width: 760px) {
        /* for sp Device Only */
          font-size: 9.5vw;
          margin-right: 0;
          margin-bottom: 1%;
         }
       }
     }
   }
  }
}

.section_other_contents{
  @media screen and (max-width: 760px) {
  /* for sp Device Only */
    width: 100%;
  }
  a{
    width: 100%;
    height: 100%;
    padding: 10% 5% 15%;
    background: rgba(0,0,0,0.5);

    .sub{
      text-align: center;
      width: 100%;
      /* for sp iPad */
      @media screen and (max-width: 979px) {
        font-size: 2vw;
      }
      @media screen and (max-width: 760px) {
      /* for sp Device Only */
        font-size: 3.9vw;
      }
    }
  }

}

//2カラム
.section_other_contents{
  &.-col2 {
    .contents_box {
      width: 50%;
      position: relative;
      @media screen and (max-width: 760px) {
      /* for sp Device Only */
        width: 100%;
      }
      a{
        padding: 13% 5% 16%;
        .sub:after{
          top: 170%;
          left: 47%;
          right: auto;
          @media screen and (max-width: 760px) {
          /* for sp Device Only */
            left: 50%;
          }
        }
      }
      &.-number{
        background: url(../img/top/number_bg.jpg)no-repeat top center;
        background-size: cover;
      }
      &.-event{
        background: url(../img/top/other_event.jpg)no-repeat top center;
        background-size: cover;
      }
      &.-welfare{
        background: url(../img/top/other_welfare.jpg)no-repeat top center;
        background-size: cover;
      }
    }
  }
}

//３カラム
.section_other_contents{
  &.-col3 {
    .contents_box {
      width: 33.3%;
      position: relative;
      a{
        padding: 11% 5% 14%;
        h3{
          margin-right: 0;
          font-size: 45px;
          display: block;
          @media screen and (max-width: 760px) {
          /* for sp Device Only */
            font-size: 11vw;
            margin-bottom: 3%;
          }
        }
        .sub:after{
          bottom: -30px;
          top: auto;
          right: auto;
          left: 44%;
          transform: translateY(-50%);
        }
      }
      &.-pj01{
        background: url(../img/top/story01.jpg)no-repeat top center;
        background-size: cover;
      }
      &.-pj02{
        background: url(../img/top/story02.jpg)no-repeat top center;
        background-size: cover;
      }
      &.-pj03{
        background: url(../img/top/story03.jpg)no-repeat top center;
        background-size: cover;
      }
      &.-number{
        background: url(../feature/img/number_bg.jpg)no-repeat top center;
        background-size: cover;
      }
      &.-environment{
        background: url(../feature/img/environment_bg.jpg)no-repeat top center;
        background-size: cover;
      }
      &.-welfare{
        background: url(../feature/img/welfare_bg.jpg)no-repeat top center;
        background-size: cover;
      }
      @media screen and (max-width: 760px) {
      /* for sp Device Only */
        width: 100%;
      }
    }
  }
}

.main_feature .section_other_contents.-col3{
  .contents_box a{
    padding: 19% 5% 20%;
  }
}


//共通画像はこちら

.section_img {
  width: 90%;
  max-width: 1138px;
  margin: 0 auto;
}


.main_feature{

  padding-bottom: 0px;
}