/*--------- sp ---------*/
main{
  overflow: hidden;
}
.main_photo{
  height: calc(100vh - 70px);
  overflow: hidden;  
  position: relative;
  color: #14141E;
  
  img{
		width: 100%;
    height: 100%;
		object-fit: cover;
		object-position: 50% 50%;
	}
  .cover{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.4);
    /*backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);*/
  }
  .main_tx{
    position: absolute;
    inset: 43% auto auto 50%;
    translate: -50% -50%;
    
    h1{
      font-size: clamp(2.5rem,5vw,5rem);
      position: relative;
      font-weight: var(--SemiBold);
      letter-spacing: .2em;
      color: var(--font-color);
       text-shadow: 2px 2px 3px #fff;
      
      &:before{
        position: absolute;
        font-family: "Poppins", system-ui;
        font-style: normal;
        font-weight: var(--Regular);
        content: 'Company';
        display: inline-block;
        font-size: 56%;
        inset: 125% auto auto 50%;
        translate: -50% -50%;
        letter-spacing: 0;
      }
    }
  }
}
/*--------- ナビ sp ---------*/
.contents_nav{
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  /*position: sticky;
  top: 0;
  z-index: 1;
  padding-right: 40px;*/
  
  li{
    width: clamp(6em,30%,220px);
    position: relative;
    text-align: center;
    font-size: 1.4rem;
    font-weight: var(--Medium);
    line-height: 1.2;
    
    &:before{
      position: absolute;
      content: '';
      display: inline-block;
      width: 1px;
      height: 35px;
      top: 0;
      left: 0;
      border-left: solid 1px #cccccc;
      transform: rotate(15deg);
    }
    &:last-of-type{
      &:after{
        position: absolute;
        content: '';
        display: inline-block;
        width: 1px;
        height: 35px;
        top: 0;
        right: 0;
        border-right: solid 1px #cccccc;
        transform: rotate(15deg);
      }
    }
    
    a{
      display: block;
      width: 100%;
    }
    
    span{
      color: var(--font-color-or);
      font-weight: var(--SemiBold);
      font-size: 1.0rem;
    }
  }
}
/*--------- 会社概要 sp ---------*/
.about{
  width: min(90%,1420px);
  margin: 0 auto;
  padding: var(--px100) 0;
  
  .title{
    font-size: var(--font-size48);
    font-weight: var(--SemiBold);
    letter-spacing: .1em;
    line-height: 1.2;
    position: relative;
    padding-left: 20px;

    &:before{
        position: absolute;
        content: '';
        display: inline-block;
        width: 1px;
        height: 78%;
        bottom: -1px;
        left: 0;
        border-left: solid 2px var(--font-color-or);
      }

    span{
      color: var(--font-color-or);
      font-weight: var(--SemiBold);
      letter-spacing: 0;
      font-size: clamp(1.1rem,1.3vw,1.4rem);
    }
  }
}
.about_table{
  width: 100%;
  border-collapse: collapse;/*--trにボーダー--*/
  border-spacing: 0;
  margin-top: var(--px40);
  text-align: left;
  transition: .5s;
  
    tr{
      border-bottom: 1px solid #ccc;
      
      &:last-child{
            border-bottom: none;
          }
    }
  
    th,td{
      display: block;    
    }
    th{
      font-weight: var(--SemiBold);
      padding: 5px 0 2px;
      vertical-align: top;
    }
    td{
      padding: 2px 0 5px;
      
      table{
        width: 100%;
        border-collapse: collapse;/*--trにボーダー--*/
        border-spacing: 0;
        margin-left: 1em;
        
        tr{
          border-bottom: 1px dashed #ccc;
          
          &:last-child{
            border-bottom: none;
          }
        }

        th,td{
          display: block;    
        }
        th{
          font-weight: var(--SemiBold);
          padding: 3px 0 0px;
          
          a{
            padding: 0 5px 1px 5px;
            margin-left: 7px;
            color: #fff;
            border: 1px solid var(--font-color-or);
            background-color: var(--font-color-or);
            font-size: 80%;
          }
        }
        td{
          padding: 0px 0 3px;
          line-height: 1.4;          
        }
        
      }
    }
}
/*--------- あいさつ sp ---------*/
.greet{
  width: min(90%,1420px);
  margin: 0 auto;
  padding: var(--px100) 0;
}  
.greet_tx{
    
  .title{
    font-size: var(--font-size48);
    font-weight: var(--SemiBold);
    letter-spacing: .1em;
    line-height: 1.2;
    position: relative;
    padding-left: 20px;

    &:before{
        position: absolute;
        content: '';
        display: inline-block;
        width: 1px;
        height: 78%;
        bottom: -1px;
        left: 0;
        border-left: solid 2px var(--font-color-or);
      }

    span{
      color: var(--font-color-or);
      font-weight: var(--SemiBold);
      letter-spacing: 0;
      font-size: var(--font-size14);
    }
  }
  
  h3{
    font-size: var(--font-size36);
    padding-top: var(--px40);
    font-weight: var(--Medium);
  }
  p{
    padding-top: var(--px20);
    line-height: 1.8;
  }
}
.greet_img{
  padding-top: var(--px20);
  width: min(100%,480px);
}
/*--------- 沿革 sp ---------*/
.his{
  background-color: rgba(78, 118, 78, 0.1);
}
.history{
  width: min(90%,1420px);
  margin: 0 auto;
  padding: var(--px100) 0;
  
  .title{
    font-size: var(--font-size48);
    font-weight: var(--SemiBold);
    letter-spacing: .1em;
    line-height: 1.2;
    position: relative;
    padding-left: 20px;

    &:before{
        position: absolute;
        content: '';
        display: inline-block;
        width: 1px;
        height: 78%;
        bottom: -1px;
        left: 0;
        border-left: solid 2px var(--font-color-or);
      }

    span{
      color: var(--font-color-or);
      font-weight: var(--SemiBold);
      letter-spacing: 0;
      font-size: clamp(1.1rem,1.3vw,1.4rem);
    }
  }
}
.history_nav{
  display: none;
}
.history_table{
  width: 100%;
  border-collapse: collapse;/*--trにボーダー--*/
  border-spacing: 0;
  margin-top: var(--px40);
  text-align: left;
  transition: .5s;
  
    tr{
      position: relative;
      
      &:before{
        position: absolute;
        content: '';
        display: inline-block;
        width: 100%;
        left: 0;
        bottom: 0;
        border-bottom: solid 1px var(--font-color-or);
      }
      /*&:after{
        position: absolute;
        content: '';
        display: inline-block;
        width: 96px;
        left: 0;
        bottom: 0;
        border-bottom: solid 1px #EB3F2F;
      }*/
      
      
    }
  
    th,td{
      display: block;  
      line-height: 1.4;
    }
    th{
      font-weight: var(--SemiBold);
      padding: 7px 0 2px;
      vertical-align: top;
    }
    td{
      padding: 2px 0 7px;      
    }
}
/*--------- 営業品目 sp ---------*/
.items{
  width: min(90%,1420px);
  margin: 0 auto;
  padding: var(--px100) 0 0;
  
  .title{
    font-size: var(--font-size48);
    font-weight: var(--SemiBold);
    letter-spacing: .1em;
    line-height: 1.2;
    position: relative;
    padding-left: 20px;

    &:before{
        position: absolute;
        content: '';
        display: inline-block;
        width: 1px;
        height: 78%;
        bottom: -1px;
        left: 0;
        border-left: solid 2px var(--font-color-or);
      }

    span{
      color: var(--font-color-or);
      font-weight: var(--SemiBold);
      letter-spacing: 0;
      font-size: clamp(1.1rem,1.3vw,1.4rem);
    }
  }

.items_wrap{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: var(--px40) 0;
  
  .items_box{
    width: min(100%,340px);
    background-color: #fff;
    position: relative;
    padding: var(--px35) 0 var(--px30);
    margin-top: 20px;
    
    .item_name{
      font-weight: var(--SemiBold);
      font-size: clamp(1.7rem,2.5vw,2.4rem);
      text-align: center;
      padding-bottom: 6px;
      
      span{
        font-size: 65%;
        font-weight: var(--Regular);
        display: block;
      }
    }
    ul{
      padding: 0 10px;
      
      li{
        padding: 2px 0;
      }
    }
  }
}
  
  .btn_box{
    font-size: var(--font-size18);
    width: 200px;
    margin: 0 auto var(--px120);
    
    a:hover{
      opacity: 1;
    }
    
    .btn_01 {
      display: inline-block;
      width: 200px;
      padding-left: 2em;
      line-height: 55px;
      outline: none;
      border-radius: 60px;
      color: #fff;
      background-color: var(--font-color);
      position: relative;
      border: 1px solid var(--font-color);
      transition: color 0.3s ease;
      overflow: hidden;
    }
    .btn_01:after {
      position: absolute;
      content: "→";
      font-size: 20px;
      right: 1em;
    }
    .btn_01:hover {
      color: var(--font-color);
      border-radius: 50px;
    }
    .btn_01:hover::before {
      transform: scaleX(1);
      transform-origin: left;
    }
    .btn_01::before {
      position: absolute;
      top: 0;
      left: 0;
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background: #fff;
      transform: scaleX(0);
      transform-origin: right;
      transition: all 0.3s ease;
      transition-property: transform;
    }
    .btn_text {
      position: relative;
    }
  }
}

.smooth{
  line-height: 0; 
  
  figure{
    margin: 0;
  }
}
@media (min-width:768px){
/*--------- ナビ tab ---------*/
  .contents_nav{
    li{
      font-size: var(--font-size20);
      &:before{
        height: 45px;
        top: -5px;
      }
      &:last-of-type{
        &:after{
          height: 45px;
          top: -5px;
        }
      }
      
      span{
        font-size: 1.2rem;
      }
    }
  } 
/*--------- 会社概要 tab ---------*/
  .about_table{
      
      th,td{
        display: table-cell;    
      }
      th{
        padding: 8px 0 8px 20px;
        width: 220px;
      }
      td{
        padding: 8px 0;

        table{
          margin-left: 0;
          
          tr{
            border-bottom: 1px dashed #ccc;            
          }

          th,td{
            display: block;    
          }
          th{
            padding: 3px 0 0px;
          }
          td{
            padding: 0px 0 3px;
            line-height: 1.7;
          }
        }
      }
  }
/*--------- あいさつ tab ---------*/
.greet{
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  .greet_tx{
    width: 48%;
  }
  .greet_img{
    width: 48%;
  }
}
/*--------- 沿革 tab ---------*/
  .history_table{

      tr{
        
        &:before{
          border-bottom: solid 1px var(--font-color-or);
        }
        /*&:after{
          border-bottom: solid 2px #EB3F2F;
        }*/


      }

      th,td{
        display: table-cell;
        line-height: 1.6;
      }
      th{
        padding: 8px 0 8px 20px;
        width: 190px;
      }
      td{
        padding: 8px 0;

      }
  }
/*--------- 営業品目 tab ---------*/
.items_wrap{
  justify-content: flex-start;
  
  .items_box{
    width: min(28%,400px);
    margin: 0 5px 0 0;
    
    &:nth-child(2){
      width: min(68%,800px);
      
      ul{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        
        li{
          width: 54%;
          
          &:nth-child(even){
            width: 42%;
          }
        }

      }
    }
  }
}

}
@media (min-width:1024px){
  .main_photo{
    height: calc(100vh - 100px);    
  } 
/*--------- ナビ pc ---------*/
  .contents_nav{
    height: 100px;
    padding-right: 0;

    li{

      &:before{
        height: 64px;
        top: -10px;
      }
      &:last-of-type{
        &:after{
          height: 64px;
          top: -10px;
        }
      }

      span{
        font-size: 1.4rem;
        letter-spacing: .1em;
      }
    }
  }

  
  
  
}


@media (min-width:1280px){
/*--------- 会社概要 1280 ---------*/
  .about{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    .title{
      width: 250px;
    }
  }

  .about_table{
    width: 705px;
    margin-top: 0;
    
      th{
        padding: 18px 0 18px 20px;
      }
      td{
        padding: 18px 0;
      }
  }
/*--------- あいさつ 1280 ---------*/
.greet{
  
  .greet_tx{
    width: 50%;
  }
  .greet_img{
     width: 50%;
    padding: 0 7%;
  }
} 
/*--------- 沿革 1280 ---------*/
  .history{
    display: flex;
    justify-content: space-between;
    
    
    .title{
      width: 250px;
    }
  }
  /*--- エレベータ↓ ---*/
  .history_ti{
    position: relative;
    /*background-color: red;*/
  }
  .history_nav{
    display: block;
    width: 230px;
    padding-top: 40px;
    text-align: center;
    color: var(--font-color);
    /*background-color: #333;*/
    transition: transform 0.5s ease-out, opacity 0.5s ease-out; /* 変化にアニメーションを追加 */
    transform: translateY(0); /* 初期状態 */
    
    a{
      color: var(--font-color);
    }
  }
  .fixed {
    position: fixed;
    top: 10px;
    width: 230px;
    transform: translateY(-20px); /* 固定時に少し上から滑らかに降りる */
  }
  .sticky-bottom {
    position: absolute;
    bottom: 0; /* 親要素のボトムに固定 */
    top: auto; /* 上端固定を解除 */
}
  /*--- エレベータ↑ ---*/
  
  .history_table{
    width: 705px;
    margin-top: 0;
    
      th{
        padding: 18px 0 18px 20px;
      }
      td{
        padding: 18px 0;
      }
  }
  
/*--------- 営業品目 1280 ---------*/
.items_wrap{
  
  .items_box{
    width: min(32%,400px);
    margin: 0 20px 0 0;
    
    ul{
      padding: 20px 35px 0;
    }
    
    &:nth-child(2){
      width: min(62%,800px);
      
      ul{
        justify-content: flex-start;
        
        li{
          width: 54%;
          
          &:nth-child(even){
            width: 46%;
          }
        }

      }
    }
  }
}
  
}




@media (min-width:1480px){
/*--------- 会社概要 1480 ---------*/
  .about{
    justify-content: flex-start;
    
    .title{
      width: 330px;
    }
  }
  .about_table{
    width: 890px;
    
      td{
        
        table{
                    
          tr{
            border-bottom: none;            
          }

          th,td{
            display: table-cell;     
          }
          th{
            padding: 0px 0 10px;
            width: 150px;
            font-weight: var(--Regular);
            a{
              display: block;
              margin: 5px 0 0 0;
              padding: 2px 0;
              width: 6.5em;
              text-align: center;
              line-height: 1;
            }
          }
          td{
            padding: 0px 0 10px;
            line-height: 1.4;
          }
        }
      }
  }
/*--------- 沿革 1480 ---------*/
  .history{
    justify-content: flex-start;
    
    .title{
      width: 330px;
    }
  }
  .history_table{
    width: 890px;
    
      th{
        width: 240px;
      }
      
  }
  
  
}