@charset "UTF-8";

.transport_bg {
  background-image:
    url(../img/common/page/bg.png), url(../img/common/page/bg-w.png),
    url(../img/common/page/bg-b.png), url(../img/common/page/bg-w.png);
  background-size:
    calc(1440 / var(--view-size) * 100vw) calc(1355 / var(--view-size) * 100vw),
    calc(1440 / var(--view-size) * 100vw) calc(572 / var(--view-size) * 100vw),
    calc(1440 / var(--view-size) * 100vw) calc(816 / var(--view-size) * 100vw),
    calc(1440 / var(--view-size) * 100vw) calc(572 / var(--view-size) * 100vw);
  background-position:
    left top,
    left calc(2768 / var(--view-size) * 100vw),
    left calc(3665 / var(--view-size) * 100vw),
    left calc(4909 / var(--view-size) * 100vw);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}

.transport_numbers_section {
  margin-top: 80px;
  margin-bottom: 0;
}
.transport_numbers_content {
  margin-top: 40px;
}
.transport_numbers_card {
  width: calc(50% - 1.5px);
  aspect-ratio: 599 / 390;
}
.transport_numbers_card:nth-child(1) .transport_numbers_card_title::before {
  background-image: url(../img/service/transport/numbers/icon-delivery.png);
}
.transport_numbers_card:nth-child(2) .transport_numbers_card_title::before {
  background-image: url(../img/service/transport/numbers/icon-claim.png);
}
.transport_numbers_card:nth-child(3) .transport_numbers_card_title::before {
  background-image: url(../img/service/transport/numbers/icon-possible.png);
}
.transport_numbers_card:nth-child(4) .transport_numbers_card_title::before {
  background-image: url(../img/service/transport/numbers/icon-vehicle.png);
}
.transport_numbers_card:nth-child(1) .about_data_card_main,
.transport_numbers_card:nth-child(3) .about_data_card_main {
  font-size: 32px;
}
.transport_numbers_card:nth-child(2) .about_data_card_main,
.transport_numbers_card:nth-child(4) .about_data_card_main {
  font-size: 27px;
}

.transport_handle_section {
  margin-top: 129px;
  margin-bottom: 0;
}
.transport_handle_card {
  width: calc((100% / 3) - 8px);
  aspect-ratio: 392 / 285;
}
.transport_handle_card_title {
  margin-bottom: 16px;
  font-size: 16px;
  line-height: calc(19 / 16);
  font-weight: 400;
}
.transport_handle_card_img {
  display: block;
  margin: 0 auto;
  width: 72px;
}
.transport_handle_card_text {
  margin-top: 16px;
  display: block;
  font-size: 14px;
  line-height: 2.4;
  padding: 0 56px;
  text-align: left;
}
.transport_handle_card_attention {
  margin-top: 20px;
  font-size: 13px;
}

.transport_service_section {
  margin-top: 126px;
  margin-bottom: 0;
}
.transport_service_processing_flow_text_jp {
  font-size: 20px;
}

.transport_network_section {
  margin-top: 72px;
}
.transport_network_box {
  position: relative;
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.12);
  background-image: url(../img/service/transport/network.png);
  background-size: 680px 575px;
  background-position: left 248px top 49px;
  background-repeat: no-repeat;
  height: 650px;
  padding: 42px 52px;
}
.transport_network_title {
  display: inline-block;
  font-size: 25px;
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: 0.02em;
  padding-bottom: 10px;
  border-bottom: solid 1px rgba(255, 255, 255, 0.6);
}
.transport_network_text {
  position: absolute;
  display: inline-block;
  padding-left: 24px;
}
.transport_network_text:nth-child(2) {
  top: 192px;
  left: 356px;
}
.transport_network_text:nth-child(3) {
  top: 291px;
  left: 64px;
}
.transport_network_text:nth-child(4) {
  top: 359px;
  right: 63px;
}
.transport_network_text:nth-child(5) {
  top: 522px;
  right: 344px;
}
.transport_network_text::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background-image: url(../img/service/transport/check.png);
  background-size: cover;
}

.transport_contact_section {
  background-image: url(../img/service/contact/transport.webp);
}

@media (max-width: 1439px) {
  .transport_numbers_section {
    margin-top: calc(80 / var(--view-size) * 100vw);
  }
  .transport_numbers_content {
    margin-top: calc(40 / var(--view-size) * 100vw);
  }
  .transport_numbers_card {
    width: calc(50% - (1.5 / var(--view-size) * 100vw));
  }
  .transport_numbers_card:nth-child(1) .about_data_card_main,
  .transport_numbers_card:nth-child(3) .about_data_card_main {
    font-size: calc(32 / var(--view-size) * 100vw);
  }
  .transport_numbers_card:nth-child(2) .about_data_card_main,
  .transport_numbers_card:nth-child(4) .about_data_card_main {
    font-size: calc(27 / var(--view-size) * 100vw);
  }

  .transport_handle_section {
    margin-top: calc(129 / var(--view-size) * 100vw);
  }
  .transport_handle_card {
    width: calc((100% / 3) - (8 / var(--view-size) * 100vw));
  }
  .transport_handle_card_title {
    margin-bottom: calc(16 / var(--view-size) * 100vw);
    font-size: calc(16 / var(--view-size) * 100vw);
  }
  .transport_handle_card_img {
    width: calc(72 / var(--view-size) * 100vw);
  }
  .transport_handle_card_text {
    margin-top: calc(16 / var(--view-size) * 100vw);
    font-size: calc(14 / var(--view-size) * 100vw);
    padding: 0 calc(56 / var(--view-size) * 100vw);
  }
  .transport_handle_card_attention {
    margin-top: calc(20 / var(--view-size) * 100vw);
    font-size: calc(13 / var(--view-size) * 100vw);
  }

  .transport_service_section {
    margin-top: calc(126 / var(--view-size) * 100vw);
  }
  .transport_service_processing_flow_text_jp {
    font-size: calc(20 / var(--view-size) * 100vw);
  }

  .transport_network_section {
    margin-top: calc(72 / var(--view-size) * 100vw);
  }
  .transport_network_box {
    background-size: calc(680 / var(--view-size) * 100vw)
      calc(575 / var(--view-size) * 100vw);
    background-position: left calc(248 / var(--view-size) * 100vw) top
      calc(49 / var(--view-size) * 100vw);
    height: calc(650 / var(--view-size) * 100vw);
    padding: calc(42 / var(--view-size) * 100vw)
      calc(52 / var(--view-size) * 100vw);
  }
  .transport_network_title {
    font-size: calc(25 / var(--view-size) * 100vw);
    padding-bottom: calc(10 / var(--view-size) * 100vw);
  }
  .transport_network_text {
    padding-left: calc(24 / var(--view-size) * 100vw);
  }
  .transport_network_text:nth-child(2) {
    top: calc(192 / var(--view-size) * 100vw);
    left: calc(356 / var(--view-size) * 100vw);
  }
  .transport_network_text:nth-child(3) {
    top: calc(291 / var(--view-size) * 100vw);
    left: calc(64 / var(--view-size) * 100vw);
  }
  .transport_network_text:nth-child(4) {
    top: calc(359 / var(--view-size) * 100vw);
    right: calc(63 / var(--view-size) * 100vw);
  }
  .transport_network_text:nth-child(5) {
    top: calc(522 / var(--view-size) * 100vw);
    right: calc(344 / var(--view-size) * 100vw);
  }
  .transport_network_text::before {
    width: calc(24 / var(--view-size) * 100vw);
    height: calc(24 / var(--view-size) * 100vw);
  }
}

@media (max-width: 768px) {
  .transport_bg {
    background-image:
      url(../img/common/page/bg-sp.png), url(../img/common/page/bg-w-sp.png);
    background-size: 100% auto;
    background-position:
      left top,
      left calc(5053 / var(--view-size) * 100vw);
    background-repeat: no-repeat, no-repeat;
  }

  .transport_numbers_section {
    margin-top: calc(40 / var(--view-size) * 100vw);
  }
  .transport_numbers_card {
    aspect-ratio: 350 / 240;
  }

  .transport_handle_section {
    margin-top: calc(100 / var(--view-size) * 100vw);
  }
  .transport_handle_card {
    width: 100%;
    aspect-ratio: initial;
    padding-bottom: calc(30 / var(--view-size) * 100vw);
  }
  .transport_handle_card_text {
    font-size: calc(13 / var(--view-size) * 100vw);
    padding: 0 calc(35 / var(--view-size) * 100vw);
  }
  .transport_handle_card_attention {
    margin-top: calc(10 / var(--view-size) * 100vw);
    line-height: 2.4;
    font-size: calc(12 / var(--view-size) * 100vw);
  }

  .transport_service_section {
    margin-top: calc(100 / var(--view-size) * 100vw);
  }
  .transport_service_processing_flow_text_jp {
    font-size: calc(12 / var(--view-size) * 100vw);
  }
  .transport_service_processing_flow_text_jp span {
    display: none;
  }

  .transport_network_box {
    background-size: calc(350 / var(--view-size) * 100vw)
      calc(295 / var(--view-size) * 100vw);
    background-position: left 0 top calc(93 / var(--view-size) * 100vw);
    height: calc(480 / var(--view-size) * 100vw);
    padding: calc(20 / var(--view-size) * 100vw)
      calc(19 / var(--view-size) * 100vw) calc(30 / var(--view-size) * 100vw);
  }
  .transport_network_title {
    font-size: calc(20 / var(--view-size) * 100vw);
    line-height: calc(30 / 20);
    padding-bottom: calc(4 / var(--view-size) * 100vw);
  }
  .transport_network_text {
    padding-left: calc(22 / var(--view-size) * 100vw);
  }
  .transport_network_text:nth-child(2) {
    top: calc(118 / var(--view-size) * 100vw);
    left: calc(17 / var(--view-size) * 100vw);
    font-size: calc(13 / var(--view-size) * 100vw);
  }
  .transport_network_text:nth-child(3) {
    top: calc(151 / var(--view-size) * 100vw);
    left: calc(17 / var(--view-size) * 100vw);
    font-size: calc(13 / var(--view-size) * 100vw);
  }
  .transport_network_text:nth-child(4) {
    top: calc(380 / var(--view-size) * 100vw);
    right: calc(22 / var(--view-size) * 100vw);
    font-size: calc(14 / var(--view-size) * 100vw);
  }
  .transport_network_text:nth-child(5) {
    top: calc(419 / var(--view-size) * 100vw);
    right: calc(22 / var(--view-size) * 100vw);
    font-size: calc(14 / var(--view-size) * 100vw);
  }

  .transport_contact_section {
    background-image: url(../img/service/contact/transport-sp.webp);
  }
}