@charset "utf-8";

/* CSS Document */

.mainvisual-wrap{}
  .mainvisual-item__pc{display: block;}


.top-blc__ttl{margin-bottom: 25px;}
  .top-blc__ttl-en{
    margin-bottom: 20px;
    font-size: 3rem;
    font-weight: bold;
    line-height: 1;
    position: relative;
    z-index: 1000;
    }
  .top-blc__ttl-jp{
    font-size: 2rem;
    font-weight: bold;
    line-height: 1;
    position: relative;
    z-index: 1000;
    }
  .top-blc__lead{
    margin-bottom: 20px;
    font-size: 2rem;
    font-weight: bold;
    }
.about-cmn{}
  .about-cmn__inner{}
    .about-cmn__link{
      display: flex;
      transition: .3s;
      }
    .about-cmn__link:hover{opacity: .7;}
    .about-cmn__detail{
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 400px;
      padding: 120px 20px 120px 80px;
      text-align: left;
      background-color: rgba(255,255,255,1);
      position: relative;
      }
      .about-cmn__detail::before{
        content: "";
        width: 110px;
        height: 310px;
        background-color: rgba(255,255,255,1);
        position: absolute;
        right: -110px;
        bottom: 0;
        }
        .about-cmn .thin-arrow{
          position: absolute;
          top: 50%;
          right: 15px;
          transform: translateY(-50%);
          }
        .about-cmn__txt{font-size: 1.3rem;}
    .about-cmn__fig{
      width: calc(100% - 400px);
      background-image: url(../images/top/about-cmn_fig_01.jpg);
      background-position: center right;
      background-repeat: no-repeat;
      background-size: cover;
      }

.factory-cmn{}
.workflow-cmn{}
  .factory-cmn__inner{}
  .workflow-cmn__link{}
    .factory-cmn__link,
    .workflow-cmn__link{
      display: block;
      height: 500px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      position: relative;
      transition: .3s;
      }
      .factory-cmn__link{background-image: url(../images/top/factory-cmn_fig_01.jpg);}
      .workflow-cmn__link{background-image: url(../images/top/workflow-cmn_fig_01.jpg);}
      .factory-cmn__link:hover,
      .workflow-cmn__link:hover{opacity: .7;}
      .factory-cmn__detail,
      .workflow-cmn__detail{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 460px;
        height: 370px;
        text-align: center;
        background-color: rgba(255,255,255,1);
        position: absolute;
        }
        .factory-cmn__detail{
          bottom: 0;
          right: 0;
          }
        .workflow-cmn__detail{
          top: 50%;
          left: 0;
          transform: translateY(-50%);
          }

.company-cmn{
  width: 100%;
  position: relative;
  }
  .company-cmn__link{
    display: block;
    height: 500px;
    background-image: url(../images/top/company-cmn_fig_01.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: .3s;
    }
    .company-cmn__link:hover{opacity: .7;}
    .company-cmn__inner{
      overflow: hidden;
      width: 780px;
      height: 100%;
      padding-top: 50px;
      padding-left: 50px;
      position: relative;
      }  
      .company-cmn__inner::before{
        content: "";
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 255px 780px 0 0;
        border-color: rgba(0,101,164,1) transparent transparent transparent;
        position: absolute;
        top: 0;
        right: 0;
        }
      .company-cmn__ttl{
        display: inline-block;
        position: relative;
        }
      .company-cmn__ttl .thin-arrow{
        position: absolute;
        top: 50%;
        right: -90px;
        transform: translateY(-50%);
        }
      .company-cmn__ttl .top-blc__ttl-en{margin-bottom: 10px;}

.recruit-cmn{
  width: 100%;
  position: relative;
  }
  .recruit-cmn__link{
    display: block;
    height: 650px;
    background-image: url(../images/top/recruit-cmn_fig_01.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: .3s;
    }
    .recruit-cmn__link:hover{opacity: .7;}
    .recruit-cmn__detail{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 300px;
      height: 100%;
      text-align: center;
      background-color: rgba(255,255,255,.8);
      position: absolute;
      right: 0;
      z-index: 100;
      }
      .recruit-cmn__detail::before{
        content: "";
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 0 650px 190px;
        border-color: transparent transparent rgba(255,255,255,.8) transparent;
        position: absolute;
        top: 0;
        left: -190px;
        }
      .recruit-cmn .top-blc__ttl{margin-left: -50px;}
      .recruit-cmn .top-blc__lead{
        font-size: 2.7rem;
        margin-left: -50px;
        position: relative;
        z-index: 100;
        }
      .recruit-cmn .thin-arrow{margin-left: -50px;}

.voice-cmn{}
  .voice-cmn__inner{}
    .voice-cmn__link{
      overflow: hidden;
      display: block;
      width: 100%;
      height: 450px;
      padding-top: 50px;
      background-color: rgba(234,246,253,1);
      background-image: url(../images/top/voice-cmn_fig_05.png);
      background-size: cover;
      background-repeat: no-repeat;
      position: relative;
      transition: .3s;
      }
      .voice-cmn__link:hover{opacity: .7;}
      .voice-cmn__detail{
        margin-bottom: 20px;
        position: relative;
        z-index: 1;
        }
        .voice-cmn__ttl{
          margin-bottom: 15px;
          text-align: center;
          }
      .voice-cmn__list{padding: 0 20px;}
        .voice-cmn__list-inner{
          display: flex;
          justify-content: center;
          max-width: 765px;
          margin: 0 auto;
          position: relative;
          z-index: 1;
          }
          .voice-cmn .top-blc__ttl-en{margin-bottom: 10px;}
          .voice-cmn .thin-arrow{margin: 0 auto;}
          .voice-cmn__list-item{
            display: flex;
            flex-direction: column;
            width: calc((100% - 60px) /4);
            }
            .voice-cmn__list-item:not(:last-of-type){margin-right: 20px;}
            .voice-cmn__list-fig{
              order: 0;
              min-height: 0%;
              }
            .voice-cmn__list-detail{
              order: 1;
              padding: 10px 15px;
              background-color: rgba(255,255,255,1);
              }
            .voice-cmn__list-dept{
              margin-bottom: 5px;
              font-size: 1.3rem;
              line-height: 1;
              }
            .voice-cmn__list-jpname{
              margin-bottom: 5px;
              font-size: 1.7rem;
              font-weight: bold;
              line-height: 1;
              }
            .voice-cmn__list-enname{
              font-size: 1.2rem;
              line-height: 1;
              }

.info-cmn{
  padding: 75px 20px 55px;
  background-color: rgba(242,242,242,1);
  }
  .info-cmn__inner{}       
    .info-cmn__ttl{text-align: center;}
      .info-cmn__ttl.top-blc__ttl{margin-bottom: 35px;}
      .info-cmn__ttl .top-blc__ttl-en{font-size: 5rem;}
    .info-list{
      width: 100%;
      max-width: 550px;
      margin: 0 auto 30px;
      }
      .info-list__item{
        display: flex;
        padding-bottom: 20px;
        border-bottom: 1px dashed rgba(0,101,164,1);
        }
        .info-list__item:not(:last-of-type){margin-bottom: 20px;}
        .info-list__date{
          width: 75px;
          font-size: 1.4rem;
          line-height: 1.4;
          }
        .info-list__ttl{width: calc(100% - 75px);}
          .info-list__link{
            display: block;
            font-size: 1.4rem;
            line-height: 1.4;
            }
          .info-list__link:hover{text-decoration: underline;}

    .info-cmn__btn{
      width: 170px;
      margin: 0 auto;
      }

@media screen and (min-width: 1401px) {

.about-cmn__detail{height: 550px;}
.factory-cmn__link,
.workflow-cmn__link{
  height: 700px;
  }
.company-cmn__link{height: 700px;}

}/* min-width: 1401px */  

@media screen and (max-width: 1000px) {

.about-cmn__detail{padding: 100px 20px 100px 30px;}
  .about-cmn__detail::before{
    width: 70px;
    height: 250px;
    right: -70px;
    }
  .top-blc__ttl{margin-bottom: 20px;}
    .top-blc__ttl-en{
      margin-bottom: 15px;
      font-size: 2.4rem;
      }
    .top-blc__ttl-jp{font-size: 1.8rem;}
    .top-blc__lead{
      margin-bottom: 15px;
      font-size: 1.8rem;
      }
      .about-cmn .thin-arrow{right: 35px;}

.factory-cmn__link,
.workflow-cmn__link{
  height: 400px;
  }
  .factory-cmn__detail,
  .workflow-cmn__detail{
    width: 430px;
    height: 280px;
    }

.company-cmn__link{height: 400px;}
  .company-cmn__inner{
    width: 580px;
    padding-top: 35px;
    padding-left: 35px;
    }  
    .company-cmn__ttl .thin-arrow{right: -80px;}

.recruit-cmn__link{height: 450px;}
  .recruit-cmn__detail{width: 250px;}
    .recruit-cmn__detail::before{
      border-width: 0 0 450px 140px;
      border-color: transparent transparent rgba(255,255,255,.8) transparent;
      left: -140px;
      }
    .recruit-cmn .top-blc__ttl{margin-left: -30px;}
    .recruit-cmn .top-blc__lead{
      font-size: 2.2rem;
      margin-left: -30px;
      }
    .recruit-cmn .thin-arrow{margin-left: -30px;}

.info-cmn{padding: 50px 20px 40px;}
  .info-cmn__ttl .top-blc__ttl-en{font-size: 4rem;}

}/* max-width: 1000px */  

@media screen and (min-width: 769px) {

.mainvisual-item__sp{display: none;}

}/* min-width: 769px */  

@media screen and (max-width: 768px) {

.mainvisual-item__pc{display: none;}
.mainvisual-item__sp{display: block;}

.about-cmn__detail{
  width: 350px;
  padding: 80px 20px;
  }
  .about-cmn__detail::before{
    width: 50px;
    height: 230px;
    right: -50px;
    }
    .top-blc__ttl-en{font-size: 2.2rem;}
    .top-blc__ttl-jp{font-size: 1.6rem;}
    .top-blc__lead{
      margin-bottom: 15px;
      font-size: 1.5rem;
      }
      .about-cmn .thin-arrow{right: 75px;}
      .about-cmn__fig{width: calc(100% - 350px);}

.factory-cmn__link,
.workflow-cmn__link{
  height: 350px;
  }
  .factory-cmn__detail,
  .workflow-cmn__detail{
    width: 350px;
    height: 250px;
    }

.company-cmn__link{height: 350px;}
  .company-cmn__inner{
    width: 500px;
    padding-top: 30px;
    padding-left: 30px;
    }  
    .company-cmn__ttl .thin-arrow{right: -70px;}

.recruit-cmn__link{height: 350px;}
  .recruit-cmn__detail{width: 200px;}
    .recruit-cmn__detail::before{
      border-width: 0 0 350px 110px;
      left: -110px;
      }
    .recruit-cmn .top-blc__lead{font-size: 2rem;}

.voice-cmn__link{
  height: auto;
  padding: 50px 0;
  }
  .voice-cmn__list-inner{
    flex-wrap: wrap;
    max-width: 450px;
    }
    .voice-cmn__list-item{width: calc((100% - 20px) /2);}
      .voice-cmn__list-item:not(:last-of-type){margin-right: 0;}
      .voice-cmn__list-item:nth-of-type(2n+1){margin-right: 20px;}
      .voice-cmn__list-item:nth-of-type(-n+2){margin-bottom: 20px;}

.info-cmn__ttl .top-blc__ttl-en{font-size: 3rem;}

}/* max-width: 768px */  

@media screen and (max-width: 600px) {

.about-cmn__detail{
  width: 300px;
  padding: 60px 20px;
  }
  .about-cmn__detail::before{
    width: 40px;
    height: 200px;
    right: -40px;
    }
      .about-cmn .thin-arrow{right: 30px;}
      .about-cmn__fig{width: calc(100% - 300px);}

.factory-cmn__link,
.workflow-cmn__link{
  height: 300px;
  }
  .factory-cmn__detail,
  .workflow-cmn__detail{
    width: 320px;
    height: 220px;
    }

.company-cmn__link{height: 300px;}
  .company-cmn__inner{
    width: 400px;
    padding-top: 20px;
    padding-left: 20px;
    }  
    .company-cmn__ttl .thin-arrow{right: -60px;}

.recruit-cmn__link{height: 300px;}
  .recruit-cmn__detail::before{
    border-width: 0 0 300px 100px;
    left: -100px;
    }
  .recruit-cmn .top-blc__lead{font-size: 1.8rem;}

.info-list__item{
  flex-wrap: wrap;
  padding-bottom: 15px;
  }
  .info-list__item:not(:last-of-type){margin-bottom: 15px;}
  .info-list__date{
    width: 100%;
    font-weight: bold;
    }
  .info-list__ttl{width: 100%;}

}/* max-width: 600px */    

@media screen and (max-width: 450px) {

.about-cmn__detail{
  width: 260px;
  padding: 50px 20px;
  }
  .about-cmn .thin-arrow{right: 0px;}
  .about-cmn__fig{width: calc(100% - 260px);}

.company-cmn__link{height: 300px;}
  .company-cmn__inner{
    width: 100%;
    padding-top: 15px;
    padding-left: 15px;
    }  
    .company-cmn__ttl .thin-arrow{right: -50px;}

}/* max-width: 450px */