@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');

.roboto {
  font-family: "Roboto", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
@media screen and (min-width: 1025px) {
  .top__header .header__nav_pc_list>li>a {
    color: #333;
  }
}
@media screen and (min-width: 1025px) {
  .top__header .header__main_ttl>a img {
    display: block;
  }
}
@media screen and (min-width: 1025px) {
  .top__header {
    background-color: white;
  }
}

body {
/*  background: url("../Sp.png") no-repeat top 0px center / 100%;*/
}
.header {
  position: sticky;
}
.mv {
  display: flex;
  justify-content: center;
  position: relative;
  overflow: hidden;
  margin: 0 !important;
  .mv__img {
    display: flex;
    justify-content: center;
    overflow: hidden;
    height: 440px;
    width: 100%;
    @media screen and (max-width: 768px){
      height: 300px;
    }
    .main_bg {
      content: "";
      background: url("../img/work-system-reform/main_bg.png") center bottom;
      width: 100%;
      animation: bgiLoop 180s linear infinite;
      height: 100%;
      position: absolute;
      @media screen and (max-width: 768px){
        background-size: cover;
      }
    }
    .main_light {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      margin: auto;
      width: 1423px;
      height: 440px;
      transition: 1s ;
      @media screen and (max-width: 768px){
        margin: 0;
        top: 0;
        width: 866px;
        height: 359px;
      }
      body.visited & img{
        animation: anime_light 1s infinite steps(2);
      }
      body:not(.visited) & {
        opacity: 0;
        transition: 1s 2s;
      }
    }
  }
  .mv__ttl {
    position: absolute;
    inset: 0;
    margin: auto;
    max-width: fit-content;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    font-size: 62px;
    font-weight: 700;
    width: 100%;
    line-height: 1.5;
    padding-top: 110px;
    color: #10104B;
    @media screen and (max-width: 768px){
      padding-top: 45px;
    }
    .cmn_mv__img {
      position: absolute;
      top: 23px;
      left: -136px;
      height: fit-content;
      @media screen and (max-width: 768px){
        top: 68px;
        left: -38px;
        width: 116px;
      }
      body:not(.visited) & {
        opacity: 0;
        transition: 1s;
      }
    }
    .mv__ttl_txt {
      body:not(.visited) & {
        opacity: 0;
        transition: 1s 1s;
      }
    }
    .mv_sub_ttl {
      font-size: 29px;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      @media screen and (max-width: 768px){
        max-width: 285px;
      }
    }
  }
  &.show {
    .main_light,
    .cmn_mv__img,
    .mv__ttl_txt {
      body:not(.visited) &{
      opacity: 1;
      }
      
    }
    .main_light {
      img {
        animation: anime_light 1s 4s infinite steps(2);
      }
    }
  }
}
@keyframes bgiLoop {
    0% { background-position: 0 0;}
  100% { background-position: 1920px 0;}
}
@keyframes anime_light {
  0% {
    transform: rotate(5deg)
  }

  100% {
    transform: rotate(0deg)
  }
}
.work-system-reform-history {
  background: #90F0FC;
  position: relative;
  padding-bottom: 150px;
  @media screen and (max-width: 768px){
    padding-bottom: 5px;
    overflow: hidden;
  }
  &:before,&:after {
    content: "";
    background: url("../img/work-system-reform/icon_bg.svg") top / 100%;
    width: 393px;
    top: 125px;
    bottom: 0;
    position: absolute;
    @media screen and (max-width: 768px){
      width: 116px;
    }
  }
  &:before {
    left: 0;
  }
  &:after {
    right: 0;
    transform: scale(-1,1);
  }
  .inner {
    max-width: 1160px;
    margin: auto;
    padding: 0 10px;
  }
  ul.history_list {
    position: relative;
    @media screen and (max-width: 768px) {
      padding-top: 140px;
      max-width: 355px;
      margin: auto;
    }
    &:before {
      content: "";
      width: 0;
      position: absolute;
      top: 500px;
      left: 0;
      right: 0;
      bottom: 400px;
      border-left: 1px solid #10104B;
      margin: auto;
      z-index: 1;
      @media screen and (max-width: 768px){
        top: 400px;
        bottom: 100px;
      }
    }
    li {
      display:flex;
      justify-content: center;
      @media screen and (max-width: 768px){
        margin-bottom: 55px;
      }
      >div {
        width: 50%;
      }
      &:nth-child(even) {
        .history_list_txt_bg {
          top: -150px;
          left: -120px;
          @media screen and (max-width: 768px){
            top: -10px;
            left: -20px;
          }
        }
        .year {
            transform-origin: left center;
        }
      }
      &:nth-child(odd) {
        flex-direction: row-reverse;
        .history_list_txt {
          @media screen and (min-width: 768px){
          padding: 0 0 0 140px;
          }
          
          @media screen and (max-width: 768px){
            padding: 0 0 0 ;
          }
        }
        .year {
          padding: 0 0 10px 2px;
          max-width: 385px;
          transform-origin: right center;
          @media screen and (max-width: 768px){
            padding: 0 0 7px 10px;
            max-width: 160px;
          }
          &:before {
            left: -3px;
          }
          &:after {
            left: 100%;
            transform: rotate(47deg);
          }
          span{
            @media screen and (min-width: 768px){
            padding: 0 0 0 23px;
            }
          }
        }
        .history_list_bg {
          text-align: left;
          padding: 0 0px 0 25px;
        }
        @media screen and (max-width: 768px){
          .history_list_txt_ttl,p{
            padding-left: 10px;
          }
          .history_list_txt_bg {
            top: -30px;
            left: 0;
            right: -40px;
          }
        }
      }
      &.first {
        position: relative;
        padding-bottom: 450px;
        margin-bottom: 80px;
        @media screen and (max-width: 768px){
          padding-bottom: 193px;
          margin-bottom: 25px;
        }
        .history_list_txt {
          @media screen and (min-width: 768px){
          padding: 135px 0 0 140px;
          }
          @media screen and (max-width: 768px){
            width: 100%;
          }
        }
        .history_list_img {
          img  {
            position: absolute;
            right: 0;
            left: 0;
            bottom: 0;
            margin: auto;
            z-index: 1;
            opacity: 0;
            transform: scale(1.1);
            transition: .5s .5s;
            @media screen and (max-width: 768px){
              width: 152px;
            }
          }
        }
        .history_list_txt_bg {
          top: 0;
          left: 0 ;
          @media screen and (max-width: 768px){
            top: -30px;
            left: 0;
            width: 210px;
          }
        }
        .year {
          @media screen and (min-width: 768px){
          padding: 0 0 0px 2px;
          }
        }
        .history_list_txt_ttl{
          @media screen and (max-width: 768px){
            white-space: nowrap;
          }
        }
        &.show {
          .history_list_img {
            img {
              opacity: 1;
              transform: scale(1);
            }
          }
        }
      }
      &:nth-child(2) {
        .history_list_bg {
          @media screen and (min-width: 768px){
          padding: 30px 40px 0;
          }
        }
      }
      @media screen and (min-width: 768px){
      &:nth-child(3) {
        margin-bottom: 82px;
        .history_list_bg {
          @media screen and (min-width: 768px){
          padding: 8px 40px 0;
          }
        }
        .history_list_txt_bg {
          top: -55px;
          left: 10px;
        }
        .history_list_txt {
          @media screen and (min-width: 768px){
          padding-top: 77px;
          }
        }
      }
      &:nth-child(4) {
        margin-bottom: 50px;
        .history_list_bg {
          margin-top: -20px;
        }
      }
      &:nth-child(5) {
        margin-bottom: 80px;
        .history_list_txt {
          @media screen and (min-width: 768px){
          padding-top: 28px;
          }
        }
        .history_list_txt_bg {
          top: -108px;
          left: 10px;
        }
      }
      &:nth-child(6) {
        margin-bottom: 80px;
        .history_list_bg {
          margin-top: -20px;
        }
      }
      &:nth-child(7) {
        margin-bottom: 80px;
        .history_list_txt_bg {
          top: -140px;
          left: 10px;
        }
        .history_list_bg {
          margin-top: -30px;
        }
      }
      &:nth-child(8) {
        margin-bottom: 85px;
        .history_list_bg {
          margin-top: -25px;
        }
      }
      &:nth-child(9) {
        margin-bottom: 80px;
        .history_list_txt_bg {
          top: -140px;
          left: 10px;
        }
        .history_list_bg {
          margin-top: -30px;
        }
      }
      &:nth-child(10) {
        margin-bottom: 60px;
      }
      &:nth-child(11) {
        margin-bottom: 80px;
        .history_list_txt_bg {
          top: -140px;
          left: 10px;
        }
        .history_list_bg {
          margin-top: -30px;
        }
      }
      &:nth-child(12) {
        margin-bottom: 90px;
        .history_list_bg {
          margin-top: -25px;
        }
      }
      }
      &:last-child {
        position: relative;
        z-index: 1;
        transform: scale(1.1);
        opacity: 0;
        transition: .5s;
        @media screen and (max-width: 768px){
          img {
            width: 152px;
          }
        }
        &.show {
          opacity: 1;
          transform: scale(1);
        }
      }
      .history_list_txt_bg {
        position: absolute;
        top: 0;
        left: 0;
        right: inherit;
        padding: 0;
      }

      .history_list_txt {
        position: relative;
        font-size: 18px;
        font-weight: 700;
        line-height:  calc(32 / 18);
        @media screen and (min-width: 768px){
        padding: 0 0 0px 48px;
        }
        @media screen and (max-width: 768px){
          font-size: 12px;
          padding: 0 0 0 18px;
          line-height: calc(17 / 12);
        }
        p {
          position: relative;
        }
      }

      .year {
        font-size:40px;
        position: relative;
        margin-bottom: 14px;
        padding: 0 0 10px 2px;
        letter-spacing: -3px;
        line-height: 1.1;
        max-width: 257px;
        border-bottom: 1px solid;
        color: #10104B;
        opacity: 0;
        transform: scale(0, 1);
        transform-origin: left center;
        transition:  0.5s ;
        @media screen and (max-width: 768px){
          font-size:14px;
          margin-bottom: 17px;
        }
        &:before {
          content: "";
          display: block;
          width: 12px;
          height: 12px;
          bottom: -6px;
          background: #000;
          border-radius: 50%;
          position: absolute;
          right: 0
        }
        &:after {
          content: "";
          position: absolute;
          bottom: 0;
          left: 0;
          transform-origin: left bottom;
          height: 1px;
          width: 65px;
          background: #000;
          transform: rotate(138deg);
          @media screen and (max-width: 768px){
            width: 25px;
          }
        }
        span {
          font-size: 62px;
          font-family: "Roboto", serif;
          font-optical-sizing: auto;
          font-weight: 700;
          font-style: normal;
          font-variation-settings:
          "wdth" 100;
          letter-spacing: -3px;
          @media screen and (max-width: 768px) {
            font-size:24px;
            letter-spacing: 0;
          }
        }
      }

      .history_list_txt_ttl {
        font-size: 30px;
        color: #DE0000;
        line-height:  calc(45 / 30);
        position: relative;
        opacity: 0;
        transform: scale(1.1);
        transition: 0.5s 0.5s;
        display: inline-block;
        @media screen and (max-width: 768px){
          font-size:15px;
          margin-bottom: 4px;
          display: inline-block;
        }
        
      }
      p {
        opacity: 0;
        transform: scale(1.1);
        transition: 0.5s 0.5s;
      }
      .history_list_bg {
        text-align: right;
        padding: 0 25px 0 0;
        z-index: 1;
        opacity: 0;
        transition: 0.5s 0.5s;
        transform: scale(1.1);
        @media screen and (min-width: 768px){
        padding: 0px 40px;
        }
      }
      &.show {
        .year {
          transform: scale(1);
          opacity: 1;
        }
        .history_list_txt_ttl,
        .history_list_bg,p {
          opacity: 1;
          transform: scale(1);
          z-index: 1;
        }
      }
    }
  }
  .cmn_btn {
    display: inline-block;
    max-width: 100%;
    font-size: inherit;
    a {
      width: 100%;
    }
  }
}

.bnr_area {
  padding: 57px 0;
  background: #F2F2F2;
  ul {
    display:flex;
    justify-content:center;
    gap:30px;
    flex-wrap: wrap;
    a {
      position:relative;
      .txt {
        position: absolute;
        height: fit-content;
        top: 0;
        bottom: 0;
        left: 30px;
        margin: auto;
        font-size: 23px;
        font-weight: 700;
        color: white;
        line-height: initial;
        span {
          font-size:14px;
          display:block;
          text-align: left;
        }
      }
    }
  }
}