@charset "UTF-8";
div.intro{
  width: min(1120px,100%);
  padding: 0 16px;
  margin-inline: auto;
  margin-bottom: 40px;

  div.textContent{
    width: min(720px,100%);
    padding: 0 16px;
    padding-top: 48px;
    margin-inline: auto;

    p.heading{
      margin-bottom: 24px;

      font-size: 21px;
      font-family: 'LINE Seed JP_OTF Bold';
      color: #1359E8;
      text-align: center;
      line-height: 2;
    }
    p.text{
      line-height: 1.6;
    }
  }
}
#service{
  position: relative;
  padding-top: min(11dvw,200px);
  margin-bottom: 80px;

  .inner{
    position: relative;
    background: linear-gradient(transparent 0%,transparent 72px, #1359E8 72px, #1359E8 calc(100% - 72px),transparent calc(100% - 72px), transparent 100%);
  }
  .service-wrap{
    display: grid;
    align-items: center;
    column-gap: 6.5dvw;

    div.textContent{
      color: #fff;

      p.heading{
        margin-bottom: 24px;
        font-size: 34px;
        font-family: 'LINE Seed JP_OTF Bold';
      }
      p.text{
        font-size: 16px;
        line-height: 2;
      }
    }
    picture,img{
      width: 100%;
    }
  }
  #Logistics{
    grid-template-columns: 600px 40dvw;
    justify-content: right;
  }
  #Transport{
    grid-template-columns: 40dvw 600px;
    justify-content: left;

    margin-top: -6.4dvw;
  }

  picture.cross{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);

    width: 8dvw;
  }
  .float{
    position: absolute;
    z-index: 0;
    top: 0.5dvw;
    left: -3.4dvw;
  }
}
.swiper{
  margin-bottom: 80px;
}
@media (min-width : 1200px){
}
@media (max-width : 1200px){
  div.intro{
    padding: 0 3.2dvw;
    margin-bottom: 8dvw;
  
    div.textContent{
      padding: 0 3.2dvw;
      padding-top: 9.6dvw;
  
      p.heading{
        margin-bottom: 4.8dvw;
  
        font-size: 4.8dvw;
      }
    }
  }
  #service{
    padding-top: min(11dvw,200px);
    margin-bottom: 16dvw;
  
    .inner{
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 24px;
      padding: 40px min(16px,3.2dvw);

      background: #1359E8;
    }
    .service-wrap{
      position: relative;
      z-index: 1;
      column-gap: 24px;
    }
    #Logistics{
      grid-template-columns: 1fr 40dvw;
    }
    #Transport{
      grid-template-columns: 40dvw 1fr;
  
      margin-top: 0;
    }
  
    picture.cross{
      position: static;
      top: auto;
      left: auto;
      transform: none;
  
      width: 8dvw;
    }
    .float{
      position: absolute;
      z-index: 0;
      top: 0.5dvw;
      left: -3.4dvw;
    }
  }
}
@media (max-width : 599px){
}