@charset "utf-8";
/*-----資料請求ボタン sp-----*/
.request{
  position: fixed;
  width: 100px;
  right: 10px;
  bottom: 90px;
  z-index: 1;
}

/*-----ファーストビュー sp-----*/
.first_view{
  min-height: 100vh;
  
  .inner{
    padding: 25vh 5% 20vh 0;
    text-align: center;
    
    img{
      width: min(80%,380px);
      transition: .5s;
    }
  }
}
/*-----見出しタイトル-----*/
  .title{
    /*position: absolute;
    top: 0;
    left: 0;*/
    background-color: #333;
    color: #fff;
    font-size: var(--font-size30);
    font-weight: var(--Bold);
    padding: 4px 0 4px 1em;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    z-index: 1;
  }
/*-----job sp-----*/
.job{
  position: relative;
  
  .title{
    width: 16em;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  .job_inner{
    width: min(90%,900px);
    margin: 0 auto;
    padding-top: 50px;

    .job_img{
      text-align: center;
      margin-bottom: 20px; 

      img{
        width: min(100%,480px);
      }
    }
    .job_tx{
      
      padding-bottom: var(--px100);

      h1{
        font-size: var(--font-size36);
        line-height: 1.6;
        padding-bottom: var(--px10);
      }
      .more_title{
        font-size: var(--font-size36);
        font-weight: var(--Bold);
        line-height: 1.6;
        padding-bottom: var(--px10);
      }
      p{
        padding-top: var(--px20);
        line-height: 1.8;
      }
      .sub_ti{
        font-weight: var(--Medium);
        font-size: var(--font-size18);
      }
      
      .text-wrap{
        overflow: hidden;
        
        /* 隠す部分 */
        .more-content {
          max-height: 0; /* 最初は隠す */
          overflow: hidden;
          opacity: 0; /* ← 最初は非表示 */
          
          transition: 
            max-height 0.5s ease,/* 閉じる時の速さ */
            opacity 0.5s ease 0s; /* opacityのtransitionも追加 */
        }

        &.open .more-content {
          max-height: 1100px; /* 十分大きな値を指定（中身が収まるくらい） */
          opacity: 1; /* ← 開いたらフェードイン */
          transition: 
            max-height 1s ease,/* 開く時の速さ */
            opacity 0.8s ease 0.2s; /* 少し遅れてふわっと表示 */
        }
        &.open h1 {
          display: none;
        }
        &.open .sub_ti {
          display: none;
        }
      }
    }

  }
}

/* もっとみるボタンsp */
.more-btn {
  display: inline-block;
  margin-top: var(--px30);
  cursor: pointer;
  color: #fff;
  box-shadow: 1px 1px 5px #ddd;
  padding: 9px 1.9em 9px 1em;
  border-radius: 25px;
  border: 1px solid #ddd;
  font-size: 1.2rem;
  width: auto;
  font-weight: var(--Medium);
  background-color: #333;
  transition: .5s;
  position: relative;
  line-height: 1.3;
}
.more-btn::after {
  content: "〉";
  display: inline-block; /* ← transformを効かせるため */
  
  transform: rotate(90deg); /* ← 下向きに */
  transition: transform 0.3s;
  position: absolute;
  right: 9px;
  top: 14px;
  font-size: 9px;
}
/* open クラスが付いたら上向きに（逆回転） */
.text-wrap.open .more-btn::after {
  transform: rotate(-90deg); /* ↑を向く */
  top: 8px;
}
/*-----OMSbiの導入で変わること sp-----*/
.change{
  position: relative;
  
  .title{
    width: 16em;
  }
  
  .change_inner{
    width: min(90%,900px);
    margin: 0 auto;
    padding: var(--px80) 0;

    .change_img{
      text-align: center;
      margin-bottom: var(--px40); 

      img{
        width: min(100%,1280px);
        transition: top 0.2s cubic-bezier(0,0,.58,1);
      }
    }
    .change_tx{
            
      h1{
        font-size: var(--font-size36);
        line-height: 1.6;
        padding-bottom: var(--px10);
      }
      .more_title{
        font-size: var(--font-size36);
        font-weight: var(--Bold);
        line-height: 1.6;
        padding-bottom: var(--px10);
      }
      p{
        padding-top: var(--px20);
        font-size: var(--font-size18);
        line-height: 1.8;
        
        .bold{
          font-weight: var(--Bold);
        }
      }
      .sub_ti{
        font-weight: var(--Medium);
        font-size: var(--font-size18);
      }
      
      
      .text-wrap{
        overflow: hidden;
        
        /* 隠す部分 */
        .more-content {
          max-height: 0; /* 最初は隠す */
          overflow: hidden;
          opacity: 0; /* ← 最初は非表示 */
          
          transition: 
            max-height 0.5s ease,/* 閉じる時の速さ */
            opacity 0.5s ease 0s; /* opacityのtransitionも追加 */
        }

        &.open .more-content {
          max-height: 1800px; /* 十分大きな値を指定（中身が収まるくらい） */
          opacity: 1; /* ← 開いたらフェードイン */
          transition: 
            max-height 1s ease,/* 開く時の速さ */
            opacity 0.8s ease 0.2s; /* 少し遅れてふわっと表示 */
        }
        &.open h1 {
          display: none;
        }
        &.open .sub_ti {
          display: none;
        }
      }
    }

  }
}
/*-----開発経緯 sp-----*/
.second{
  position: relative;
  
  .title{
    width: 8em;
  }
  
  .second_inner{
    width: min(90%,900px);
    margin: 0 auto;
    padding: var(--px80) 0;

    .second_img{
      text-align: center;
      margin-bottom: var(--px40); 

      img{
        width: min(100%,480px);
        border-radius: var(--px40);
        transition: top 0.2s cubic-bezier(0,0,.58,1);
      }
    }
    .second_tx{
            
      h1{
        font-size: var(--font-size36);
        line-height: 1.6;
        padding-bottom: var(--px10);
      }
      .more_title{
        font-size: var(--font-size36);
        font-weight: var(--Bold);
        line-height: 1.6;
        padding-bottom: var(--px10);
      }
      p{
        padding-top: var(--px20);
        line-height: 1.8;
      }
      .sub_ti{
        font-weight: var(--Medium);
        font-size: var(--font-size18);
      }
      
      
      .text-wrap{
        overflow: hidden;
        
        /* 隠す部分 */
        .more-content {
          max-height: 0; /* 最初は隠す */
          overflow: hidden;
          opacity: 0; /* ← 最初は非表示 */
          
          transition: 
            max-height 0.5s ease,/* 閉じる時の速さ */
            opacity 0.5s ease 0s; /* opacityのtransitionも追加 */
        }

        &.open .more-content {
          max-height: 1800px; /* 十分大きな値を指定（中身が収まるくらい） */
          opacity: 1; /* ← 開いたらフェードイン */
          transition: 
            max-height 1s ease,/* 開く時の速さ */
            opacity 0.8s ease 0.2s; /* 少し遅れてふわっと表示 */
        }
        &.open h1 {
          display: none;
        }
        &.open .sub_ti {
          display: none;
        }
      }
    }

  }
}
/*-----メッセージ sp-----*/
.message { 
  position: relative;
  background: linear-gradient(180deg, #e0e0e0 0%, #e0e0e0 20%, #e0e0e0 20%, #fff 50%, #fff 60%, transparent 100%);

  .title{
    width: 8em;
    position: absolute;
    top: 0;
    left: 0;
  }
  .message_img {
    width: min(90%,1050px);
    margin: 0 auto;
    padding-top: var(--px100);
    
  }
  ul{
    padding: var(--px20) 0 var(--px60);
    width: min(90%,1000px);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    
    li{
      text-align: center;
      width: 100%;
      padding: var(--px20) 0;
      
      .yaku{
        font-size: var(--font-size20);
        font-weight: var(--Bold);
      }
      .name{
        font-size: var(--font-size36);
        font-weight: var(--Bold);
      }
      .md_btn{
        background-color: #333;
        color: #fff;
        width: min(80%,200px);
        margin: var(--px40) auto 0;
        border-radius: 50px;
        
        a{
          display: inline-block;
          width: 100%;
          padding: 5px 0;
          position: relative;
          
          &::after {
            content: "〉";
            display: inline-block; /* ← transformを効かせるため */

            transform: rotate(90deg); /* ← 下向きに */
            transition: transform 0.3s;
            position: absolute;
            right: 18px;
            top: 14px;
            font-size: 9px;
          }
        }
      }
      img{
        width: 30px;
      }
    }
  }

}

/*-----システム sp-----*/
.system{
  position: relative;
  background-color: var(--sub-color);
  padding-bottom: var(--px100);
  
  .title{
    width: 8em;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  h2{
    width: min(98%,1000px);
    padding: var(--px180) 4% 0;
  }
  h3{
    font-size: var(--font-size60);
    padding-top: var(--px120);
    font-weight: var(--Bold);
    margin-left: 8%;
    
    span{
      display: block;
      font-size: var(--font-size24);
      position: relative;
      padding-left: 1.5em;
      
    }
    span:after{
      position: absolute;
      content: '';
      display: inline-block;
      width: 1.1em;
      top: 48%;
      left: 0;
      border-bottom: solid 2px #003E6F;
    }    
  }
  h4{
    font-size: var(--font-size24);
    padding-top: var(--px80);
    font-weight: var(--Bold);
    margin-left: 8%;    
  }
  .technology_wrap{
    padding: 0 5% var(--px100);
    
    .technology_box{
      padding: var(--px50) 0 var(--px60);
      width: min(100%,480px);
      margin: 0 auto;
      transition: .3s;
    }
    .technology_img{
      aspect-ratio: 48 / 29;
      overflow: hidden;
      margin: 0 auto;
    }
    .technology_img img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 50% 50%;
      border-radius: var(--px20);
    }
    .technology_title{
      font-size: var(--font-size24);
      font-weight: var(--Bold);
      padding: var(--px30) var(--px20) 0;
      text-align: center;
      
      span{
        font-size: 70%;
      }
    }
    .technology_tx{
      padding: var(--px20) var(--px20) 0;
    }
    .technology_memo{
      padding: var(--px10) var(--px20) 0;
      font-size: var(--font-size14);
      font-weight: var(--Bold);
    }
    /*動画再生ボタン*/
    .hp_btn{
      width: min(95%,180px);
      margin: var(--px30) auto 0;
      color: #fff;
      background: var(--font-color);
      font-weight: var(--Medium);
      border-radius: 50px;
      text-align: center;
      
      img{
        width: 11px;
        margin: 6px 0 0 15px;
      }
    }
    .hp_btn a{
      display: block;
      width: 100%;
      padding: 5px 0;
      color: #fff;
    }
  }
  /*-----モーダル動画-----*/
  .video-modal {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.7);
    z-index: 9999;
  }

  .video-modal-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
  }

  .video-modal-content {
    position: relative;
    background: #000;
    border-radius: var(--px10);
    overflow: hidden;
    width: min(90%,1280px);
    z-index: 10000;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
  }

  .video-modal video {
    width: 100%;
    height: auto;
    display: block;
  }

  .video-close {
    position: absolute;
    top: 8px; right: 8px;
    background: rgba(0,0,0,0.8);
    color: #fff;
    border: none;
    font-size: 30px;
    cursor: pointer;
    line-height: 1;
    padding: 2px 0 0 0;
    z-index: 10001;
    width: 40px;
    height: 40px;
    border-radius: 50px;
  }
  .video-close:hover {
    background: rgba(0,0,0,1.0);
  }
  

  .sys02_wrap{
    width: min(90%, 1110px);
    padding: var(--px40) 0;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 540px));
    gap: var(--px20);
    justify-content: center;
    
    .sys{
      width: 100%;
      max-width: 540px; /* 最大540pxまで */
      justify-self: center;
      
    }
  }
}

/*-----会社概要 sp-----*/
.profile{
  position: relative;
  
  .title{
    width: 8em;
    position: absolute;
    top: 0;
    left: 0;
  }
  .logo{
    width: min(20%,100px);
    margin: 0 auto;
    padding-top: var(--px120);
  }
  .info_table{
    width: min(90%,1000px);
    margin: 0 auto;
    padding-top: var(--px80);
    
      table{
        width: 100%;
        border-collapse: collapse;/*--trにボーダー--*/
        border-spacing: 0;
        line-height: 1.4;	
      }
      tr {
        /*ドットを調整*/
        background-image: linear-gradient(to right, #707070 4px, transparent 2px);
        background-size: 8px 1px; /* 横幅8px、高さ1pxで繰り返し */
        background-repeat: repeat-x;
        background-position: left bottom;
      }
      th {
        padding: 12px 0 5px;
        font-weight: var(--Bold);
        text-align: left;
        display: block;
        
        span{
          background-color: var(--font-color);
          color: #fff;
          width: 120px;
          display: inline-block;
          border-radius: var(--px10);
          padding: 5px 0;
          text-align: center;
          font-size: var(--font-size18);
        }
      }
      td {
        padding: 2px 0 12px;
        display: block;
      }
  }

}
@media (min-width:768px){
/* もっとみるボタンtab */
.more-btn {
  font-size: 1.5rem;
  padding: 7px 3em 7px 2.5em;
  text-align: center;
  border-radius: 50px;
}
.more-btn::after {
  right: 12px;
  top: 14px;
}
/* open クラスが付いたら上向きに（逆回転） */
.text-wrap.open .more-btn::after {
  top: 8px;
}
/*-----ファーストビュー tab-----*/
.first_view{
  
  .inner{
    
    img{
      width: min(58%,500px);
    }
  }
}
/*-----job tab-----*/
.job{
  
  .job_inner{

    .job_tx{
      width: 75%;
      margin: 0 auto;
    }
  }
}
/*-----OMSbiの導入で変わること tab-----*/
.change{
  
  .change_inner{

    .change_tx{
      width: 75%;
      margin: 0 auto;
    }
  }
}
/*-----開発経緯 tab-----*/
.second{
  
  .second_inner{

    .second_tx{
      width: 75%;
      margin: 0 auto;
    }
  }
}
/*-----メッセージ tab-----*/
.message { 

  ul{
    flex-wrap: nowrap;
    align-items: center;
    
    li{
      width: 25%;
      
      &:nth-child(2),&:nth-child(4){
        width: 12.5%;
      }

      .md_btn{
        width: min(100%,200px);

      }
      img{
        width: min(60%,100px);
      }
    }
  }

}
/*-----システム tab-----*/
.system{
  
  h2{
    width: min(70%,1000px);
  }
  h3{
    margin-left: min(17%,250px);
    
    span:after{
      border-bottom: solid 3px #003E6F;
    }
  }
  h4{
    margin-left: min(17%,250px);
  }

  .technology_wrap{
    width: min(100%,1480px);
    padding: 0 30px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    
    .technology_box{
      width: min(48%,480px);
      margin: 0;
    }
  }
  /*-----モーダル動画-----*/
  .video-close {
    top: 18px; right: 18px;
    font-size: 50px;
    width: 55px;
    height: 55px;
    padding: 2px 0 0 1px;
  }
  

}

/*-----会社概要 tab-----*/
.profile{ 
  
  .info_table{
    
    th {
      padding: var(--px20) 10px;
      display: table-cell;
      vertical-align:top;
    }
    td {
      padding: var(--px20) 10px;
      display: table-cell;
    }
  }
}
	
}
@media (min-width:1024px){
/*-----資料請求ボタン pc-----*/
.request{
  width: 150px;
  right: 17px;
  bottom: 125px;
}
/*-----ファーストビュー pc-----*/
.first_view{
  
  .inner{
    padding: 25vh 5% 15vh min(6%,106px);
    text-align: left;
    
    img{
      width: min(60%,600px);
    }
  }
}
/*-----システム pc-----*/
.system{
  .technology_wrap{
    padding: 0 40px;
    
    .technology_box{
      width: min(32%,480px);
    }
  }
}


}

@media (min-width:1280px){
  section{
    min-height: 100vh;
  }
/*-----ファーストビュー 1280-----*/
.first_view{
  
  .inner{
    
    img{
      width: min(65%,755px);
    }
  }
}
  
/*-----job 1280-----*/
.job{
  display: flex;
  align-items: center;
  
  .job_inner{
    padding: 10vh 0;
    width: min(94%,1480px);
    display: flex;
    align-items: center;
    
    .job_img{
      width: 52%;
      margin-bottom: 0; 

      img{
        width: min(100%,760px);
      }
    }
    .job_tx{
      width: 44%;
      padding-bottom: 0;
      margin: 0;

      p{
        width: min(100%,560px);
      }
      
    }
  }
}
/*-----OMSbiの導入で変わること 1280-----*/
.change{
  
  .change_inner{
    width: min(94%,1480px);
    display: flex;
    justify-content: space-between;
    position: relative;
    padding: var(--px100) 0;

    .change_img{
      width: 47%; 
      margin-bottom: 0;
      position: relative;

        img{
          width: min(100%,860px);
          position: absolute;
          top: 0;
          left: 0;
        }
      }
    .change_tx{
      width: 50%;
      margin: 0;
      padding: 0 0 var(--px60);

        p{
          width: min(100%,680px);
        }
        .text-wrap {
          padding-top: 0px;
        }
        .text-wrap.open {
          padding-top: 12px;          
        }
      }
  }
}
/*-----開発経緯 1280-----*/
.second{
  
  .second_inner{
    width: min(94%,1480px);
    display: flex;
    justify-content: space-between;
    padding: var(--px100) 0;

    .second_img{
      width: 44%;
      margin-bottom: 0;
      position: relative;
      order: 2;

        img{
          width: min(100%,640px);
          position: absolute;
          top: 30px;
          left: 0;
        }
      }
    .second_tx{
      width: 52%;
      margin: 0;
      padding: 0 0 var(--px100);

        p{
          width: min(100%,725px);
        }
        .text-wrap {
          padding-top: 140px;
        }
        .text-wrap.open {
          padding-top: 20px;          
        }
      }
  }
}
/*-----メッセージ 1280-----*/
.message{
  .message_img {
    padding-top: 0;
  }
}
/*-----システム 1280-----*/
.system{
  .technology_wrap{
    
    .technology_box{
      width: min(31%,480px);
    }
  }
}


  
  
}

@media (min-width:1560px){
/*-----job 1580-----*/
.job{
  .job_inner{

    .job_img{
      width: 50%;
    }
    .job_tx{
      width: 50%;
    }  
  }
}
/*-----OMSbiの導入で変わること 1560-----*/ 
.change{
  .change_inner{
    justify-content: center;
  
    .change_img{
      width: 50%;
      text-align: left;      
      
      img{
        top: 0;
        left: auto;
        right: 0;
      }
    }
    .change_tx{
      width: 50%;
      padding-left: 80px;
      
      .text-wrap {
        padding-top: 25px;
      }
      .text-wrap.open {
        padding-top: 20px;          
      }
    }  
  }  
  
}
/*-----開発経緯 1560-----*/  
.second{
  .second_inner{
    justify-content: center;
  
    .second_img{
      width: 50%;
      
      img{
        left: auto;
        right: 0;
      }
    }
    .second_tx{
      width: 50%;  
      
      .text-wrap {
        padding-top: 180px;
      }
      .text-wrap.open {
        padding-top: 15px;          
      }
    }  
  }  
  
}
  
  
  
  
@media (min-width:1720px){ 
/*-----OMSbiの導入で変わること 1720-----*/ 
.change{
  .change_inner{
  
    .change_img{
      
      img{
        width: min(45vw,860px);
      }
    }
    .change_tx{
      
      .text-wrap {
        padding-top: 65px;
      }
      .text-wrap.open {
        padding-top: 20px;          
      }
    } 
  }  
  
}
  
}