/*---------ごあいさつ sp ---------*/
.greetings{
  background-image: url("../images/company/img_02_sp.jpg");
  background-position: top right;
  background-size: cover;
  background-repeat: no-repeat;
  aspect-ratio: 192 / 108;
  position: relative;
  margin-bottom: 850px;/*※同じ数値*/
  transition: .5s;
  
  .message{
    position: absolute;
    width: 100%;
    left: 0;
    bottom: -850px;/*※同じ数値*/
    height: 850px;/*※同じ数値*/
    padding: var(--px60) 5%;
    transition: .5s;
    background-color: rgba(255,255,255,.8);
    
    h3{
      font-size: var(--font-size48);
      font-weight: var(--ExtraBold);
      line-height: 1.5;
    }
    h4{
      font-size: var(--font-size18);
      font-weight: var(--Bold);
      line-height: 1.5;
      position: relative;
      padding-bottom: var(--px40);
      
      &:after{
        position: absolute;
        content: '';
        display: inline-block;
        width: 5.5em;
        bottom: 0;
        left: 0;
        border-bottom: solid clamp(1px,0.2vw,2px) var(--font-color);
      }
    }
    p{
      padding-top: var(--px40);
      &.name{
        padding-top: var(--px30);
        font-weight: var(--Bold);
        font-size: var(--font-size20);
        text-align: right;
      }
    }
  }
  
}
/*---------会社沿革 sp ---------*/
.inner{
  padding: var(--px85) 0 0;
  width: min(90%,1740px);
  margin: 0 auto;
  
  &:last-child{/*--- 会社概要 ----*/
    padding: var(--px60) 0;
  }
  
  .titles{
    color: #fff;
    
    h3{
      font-size: var(--font-size48);
      font-weight: var(--ExtraBold);
      line-height: 1.5;
    }
    h4{
      font-size: var(--font-size18);
      font-weight: var(--Bold);
      line-height: 1.5;
      position: relative;
      padding-bottom: var(--px40);
      
      &:after{
        position: absolute;
        content: '';
        display: inline-block;
        width: 5.5em;
        bottom: 0;
        left: 0;
        border-bottom: solid clamp(1px,0.2vw,2px) #fff;
      }
    }
  }
  .table{
    border-radius: var(--px20);
    margin-top: var(--px60);
    padding: var(--px40);
    backdrop-filter: blur(9px);
    background-color: rgba(94,144,229,1);
    
    table{
      width: 100%;
      border-collapse: collapse;
      
      tr{        
        /*ドットを調整*/
        background-image : linear-gradient(to right, #707070 4px, transparent 1px);
        background-size: 6px 1px;
        background-repeat: repeat-x;
        background-position: left bottom;
      }
      
      th{
        font-size: var(--font-size20);
        font-weight: var(--Bold); 
        padding: var(--px20) var(--px20) 0 var(--px20);
        display: block;
        text-align: left;
      }
      td{
        padding: 0 var(--px20) var(--px20) var(--px20);
        display: block;
        
        table{
          tr{
            background-image : none;
            border-bottom: 1px dashed #848282;
            &:last-child{
              border-bottom:none;
            }
          }
          th{
            padding: var(--px10) 0 0 var(--px10);
            font-size: var(--font-size16);
            font-weight: var(--SemiBold);
            width: 12em;
          }
          td{
            padding: 0 0 var(--px10) var(--px10);
          }
        }
      }
    }
    .history_img{
      padding-top: 20px;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      grid-gap: 20px;
    }
    .about_img{
      padding-top: 20px;
      width: max(100%,200px);
      max-width: 540px;
      margin: 0 auto;
    }
  }
}
/*---------アクセス sp ---------*/
.access_inner{
  width: min(90%,1740px);
  margin: 0 auto;
  padding: var(--px50) 0;  
  
  .titles{
    
    h3{
      font-size: var(--font-size48);
      font-weight: var(--ExtraBold);
      line-height: 1.5;
    }
    h4{
      font-size: var(--font-size18);
      font-weight: var(--Bold);
      line-height: 1.5;
      position: relative;
      padding-bottom: var(--px40);
      
      &:after{
        position: absolute;
        content: '';
        display: inline-block;
        width: 5.5em;
        bottom: 0;
        left: 0;
        border-bottom: solid clamp(1px,0.2vw,2px) var(--font-color);
      }
    }
    p{
      padding-top: var(--px30);
    }
  }
  .map{
    margin-top: var(--px40);
    aspect-ratio: 779 / 394;
  }
}
@media (min-width:540px){
/*---------ごあいさつ tab ---------*/
.greetings{
  margin-bottom: 680px;/*※同じ数値*/  
  .message{
    bottom: -680px;/*※同じ数値*/
    height: 680px;/*※同じ数値*/
  }
}
  
}
@media (min-width:768px){
/*---------会社沿革 tab ---------*/
.inner{
  .table{
    table{  
      th{ 
        padding: var(--px20);
        display: table-cell;
        
        &.yakuin{
          vertical-align: top;
          padding-top: clamp(15px,2vw,25px);
        }
      }
      td{
        padding: var(--px20);
        display: table-cell;
        
        table{
          th{
            padding: var(--px10) 0;
          }
          td{
            padding: var(--px10) 0;
          }
        }
      }
    }
  }
}
/*---------アクセス tab ---------*/
.access_inner{
  display: flex;
  justify-content: space-between;
  
  .titles{
    padding: var(--px50) 0 var(--px120);
    width: 280px;
  }
  .map{
    margin-top: 0;
    aspect-ratio: initial;
    width: calc(100% - 280px);
  }
}
  
  
}
@media (min-width:1024px){
/*---------ごあいさつ pc ---------*/
.greetings{
  margin-bottom: 750px;/*※同じ数値*/  
  .message{
    bottom: -750px;/*※同じ数値*/
    height: 750px;/*※同じ数値*/    
  }
}
/*---------会社沿革 pc ---------*/
.inner{
  display: flex;
  justify-content: space-between;
  
  .titles{
    width: 25%;
  }
  
  .table{
    margin-top: 0;
    width: 75%;
    
    table{  
      th{ 
        padding: var(--px20);
        display: table-cell;
      }
      td{
        padding: var(--px20);
        display: table-cell;
      }
    }
  }
}  
  
  
}
@media (min-width:1280px){
/*-----ごあいさつ 1280 -----*/
.greetings{
  background-image: url("../images/company/img_02.jpg");
  margin-bottom: 0;
  .message{
    position: static;
    width: min(53%,756px);
    height: auto;
    text-shadow: 1px 1px 1px #fff;
    background-color: transparent;
  } 
}
/*---------アクセス 1280 ---------*/
.access_inner{
  justify-content: flex-start;
  
  .titles{
    width: 25%;
  }
  .map{
    width: 75%;
  }
}
  
}

@media (min-width:1580px){  
/*---------会社沿革 pc ---------*/
.inner{
  justify-content: flex-start;
  
  .titles{
    width: 18%;
  }
  .table{
    width: 64%;
    padding: 50px 48px;
    
    table{  
      th{ 
        padding: 20px 30px;
      }
      td{
        padding: 20px 30px;
      }
    }
  }
} 
/*---------アクセス 1580 ---------*/
.access_inner{
  margin-left: 18%;
  width: 64%;
  padding-left: 48px;
  padding-right: 48px;
  
  .titles{
    width: 30%;
  }
  .map{
    width: 70%;
  }
}
  
}