/*---------近海まき網事業 sp ---------*/
.inner{
  padding: var(--px85) 0;
  width: min(90%,1740px);
  margin: 0 auto;  
  
  .titles{
    color: #fff;
    
    h3{
      font-size: var(--font-size48);
      font-weight: var(--ExtraBold);
      position: relative;
      padding-bottom: var(--px40);
      
      &:after{
        position: absolute;
        content: '';
        display: inline-block;
        width: 2.1em;
        bottom: 0;
        left: 0;
        border-bottom: solid clamp(1px,0.2vw,2px) #fff;
      }
    }
    h4{
      font-size: var(--font-size24);
      font-weight: var(--Bold);
      padding-top: var(--px40);
    }
    p{
      padding-top: var(--px35);
      width: min(100%,740px);
      font-size: var(--font-size18);
      line-height: 1.7;
    }
    .titles_img{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(1, auto);
      grid-gap: clamp(15px,2vw,24px);
      padding-top: var(--px40);
    }
  }
  .image{
    padding-top: var(--px30);
    aspect-ratio: 824 / 310;
	  overflow: hidden;
    
    img{
      height: 100%;
      object-fit: cover;
      object-position: 50% 50%;
    }
  }
 
}


@media (min-width:768px){
/*---------tab ---------*/


  
  
}
@media (min-width:1024px){
/*---------近海まき網事業 pc ---------*/
.inner{
  display: flex;
  justify-content: space-between;
  
  .titles{
    width: 56%;
  }
  .image{
    width: 40%;
    padding-top: 0;
    aspect-ratio: 830 / 898;
    
    img{
      object-position: 50% 50%;
    }
  }
}  
.even {
  .titles{
    order: 2;
  }
}

@media (min-width:1280px){
/*----- 1280 -----*/


  
}

@media (min-width:1480px){  
/*---------近海まき網事業 1480 ---------*/
.inner{
  align-items: flex-end;
  
  .titles{
    width: 48%;
  }
  .image{
    width: min(48%,830px);
    
    img{
      object-position: 50% 50%;
    }
  }
}

  
}