/*--------------------------------------------------------------
  TRANSPORTATION
--------------------------------------------------------------*/
.p-transportation .l-main {
  overflow: hidden;
}
.p-transportation .trunk {
  position: relative;
  z-index: -1;
}
.p-transportation .trunk .bg-container {
  width: 26.6666666667%;
  position: absolute;
  top: max(-40px, -2.5rem, -10.6666666667vw);
  right: 0;
}
.p-transportation .trunk .inner {
  display: flex;
  flex-direction: column-reverse;
  row-gap: min(55px, 3.4375rem, 14.6666666667vw);
  width: 92%;
  margin-inline: auto;
  padding-top: min(50px, 3.125rem, 13.3333333333vw);
}
.p-transportation .trunk .title-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  row-gap: min(5px, 0.3125rem, 1.3333333333vw);
  padding-left: min(22px, 1.375rem, 5.8666666667vw);
  position: relative;
  z-index: 0;
}
.p-transportation .trunk .title-container::before {
  content: "";
  display: block;
  background-image: linear-gradient(to top, #00C85B, #00ADAC);
  width: min(5px, 0.3125rem, 1.3333333333vw);
  height: min(52px, 3.25rem, 13.8666666667vw);
  position: absolute;
  top: 0;
  left: 0;
}
.p-transportation .trunk .lead {
  font-family: sofia-pro, sans-serif;
  font-size: min(11px, 0.6875rem, 2.9333333333vw);
  font-weight: 600;
  line-height: 1.2727272727;
  color: #00C85B;
}
.p-transportation .trunk .title {
  font-size: min(20px, 1.25rem, 5.3333333333vw);
  line-height: 1.45;
}
.p-transportation .trunk .number {
  font-family: "Oswald", sans-serif;
  font-size: min(95px, 5.9375rem, 25.3333333333vw);
  font-weight: 500;
  line-height: 1.4736842105;
  letter-spacing: 0.05em;
  color: #E7F7EE;
  position: absolute;
  top: max(-55px, -3.4375rem, -14.6666666667vw);
  left: min(167px, 10.4375rem, 44.5333333333vw);
  z-index: -1;
}
.p-transportation .trunk .text {
  /* 9/24 */
  /* font-size: min(14px, 0.875rem, 3.7333333333vw); */
  /* line-height: 1.8571428571; */
  font-size: min(18px, 1.125rem, 4.8vw);
  line-height: calc(38/18);
  /* ------------------ 9/24 */
  font-weight: 500;
  width: 95.652173913%;
  margin-top: min(16px, 1rem, 4.2666666667vw);
}
.p-transportation .regional .inner {
  display: flex;
  flex-direction: column-reverse;
  row-gap: min(55px, 3.4375rem, 14.6666666667vw);
  width: 92%;
  margin-inline: auto;
  padding-top: min(80px, 5rem, 21.3333333333vw);
}
.p-transportation .regional .title-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  row-gap: min(5px, 0.3125rem, 1.3333333333vw);
  padding-left: min(22px, 1.375rem, 5.8666666667vw);
  position: relative;
  z-index: 0;
}
.p-transportation .regional .title-container::before {
  content: "";
  display: block;
  background-image: linear-gradient(to top, #00C85B, #00ADAC);
  width: min(5px, 0.3125rem, 1.3333333333vw);
  height: min(52px, 3.25rem, 13.8666666667vw);
  position: absolute;
  top: 0;
  left: 0;
}
.p-transportation .regional .lead {
  font-family: sofia-pro, sans-serif;
  font-size: min(11px, 0.6875rem, 2.9333333333vw);
  font-weight: 600;
  line-height: 1.2727272727;
  color: #00C85B;
}
.p-transportation .regional .title {
  font-size: min(20px, 1.25rem, 5.3333333333vw);
  line-height: 1.45;
}
.p-transportation .regional .number {
  font-family: "Oswald", sans-serif;
  font-size: min(95px, 5.9375rem, 25.3333333333vw);
  font-weight: 500;
  line-height: 1.4736842105;
  letter-spacing: 0.05em;
  color: #E7F7EE;
  position: absolute;
  top: max(-55px, -3.4375rem, -14.6666666667vw);
  left: min(151px, 9.4375rem, 40.2666666667vw);
  z-index: -1;
}
.p-transportation .regional .text {
  /* 9/24 */
  /* font-size: min(14px, 0.875rem, 3.7333333333vw); */
  /* line-height: 1.8571428571; */
  font-size: min(18px, 1.125rem, 4.8vw);
  line-height: calc(38/18);
  /* ------------------ 9/24 */
  font-weight: 500;
  width: 95.652173913%;
  margin-top: min(16px, 1rem, 4.2666666667vw);
}
.p-transportation .example {
  padding-top: min(66px, 4.125rem, 17.6vw);
  padding-bottom: min(65px, 4.0625rem, 17.3333333333vw);
}
.p-transportation .example .inner {
  background-color: #F5F5F5;
  border-radius: min(10px, 0.625rem, 2.6666666667vw) 0 0 min(10px, 0.625rem, 2.6666666667vw);
  width: 96%;
  margin-right: 0;
  margin-left: auto;
  padding-top: min(33px, 2.0625rem, 8.8vw);
  padding-bottom: min(100px, 6.25rem, 26.6666666667vw);
  position: relative;
  z-index: 0;
}
.p-transportation .example .title-container {
  display: flex;
  justify-content: center;
}
.p-transportation .example .title {
  font-size: min(20px, 1.25rem, 5.3333333333vw);
  line-height: 1.45;
  text-align: center;
  padding-left: min(16px, 1rem, 4.2666666667vw);
  padding-bottom: min(8px, 0.5rem, 2.1333333333vw);
  position: relative;
}
.p-transportation .example .title::before {
  content: "";
  display: block;
  background-image: linear-gradient(1.83deg, #2ED0FA, #0051CA);
  width: min(64px, 4rem, 17.0666666667vw);
  height: min(3px, 0.1875rem, 0.8vw);
  position: absolute;
  right: 0;
  bottom: 0;
}
.p-transportation .example .list-container {
  margin-left: min(30px, 1.875rem, 8vw);
  padding-top: min(120px, 7.5rem, 32vw);
  position: relative;
}
.p-transportation .example .slick-arrow {
  font-size: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: min(45px, 2.8125rem, 12vw);
  height: min(45px, 2.8125rem, 12vw);
  cursor: pointer;
  position: absolute;
  top: min(38px, 2.375rem, 10.1333333333vw);
}
.p-transportation .example .slick-prev {
  background-image: url("../img/transportation-pre-button.png"), linear-gradient(34deg, #2ED0FA, #0051CA);
  right: min(66px, 4.125rem, 17.6vw);
}
.p-transportation .example .slick-prev.slick-disabled {
  background-image: url("../img/transportation-pre-button-da.png");
}
.p-transportation .example .slick-next {
  background-image: url("../img/transportation-next-button.png");
  right: min(15px, 0.9375rem, 4vw);
}
.p-transportation .example .slick-next.slick-disabled {
  background-image: url("../img/transportation-next-button-da.png");
}
.p-transportation .example .item:not(:last-of-type) {
  padding-right: 1.5228426396%;
}
.p-transportation .example .item img {
  border-radius: min(10px, 0.625rem, 2.6666666667vw);
  aspect-ratio: 282/191;
}
.p-transportation .example .text-container {
  margin-top: min(10px, 0.625rem, 2.6666666667vw);
}
.p-transportation .example .head {
  font-size: min(20px, 1.25rem, 5.3333333333vw);
  line-height: 1.5;
}
.p-transportation .example .text {
  font-size: min(18px, 1.125rem, 4.8vw);
  line-height: calc(38/18);
  font-weight: 500;
  margin-top: min(20px, 1.25rem, 5.3333333333vw);
}
.p-transportation .example .bg-text {
  font-family: sofia-pro, sans-serif;
  font-size: min(79px, 4.9375rem, 21.0666666667vw);
  line-height: 1.253164557;
  letter-spacing: 0em;
  color: #FAFAFA;
  position: absolute;
  left: max(-15px, -0.9375rem, -4vw);
  bottom: max(-22px, -1.375rem, -5.8666666667vw);
  z-index: -1;
}
.p-transportation .c-contact {
  background-color: transparent;
}

@media (768px <= width) {
  .p-transportation .trunk {
    margin-inline: auto;
  }
  .p-transportation .trunk .bg-container {
    width: min(344px, 21.5rem, 23.8888888889vw);
    top: 0;
  }
  .p-transportation .trunk .inner {
    flex-direction: row;
    justify-content: space-between;
    width: min(1200px, 75rem, 83.3333333333vw);
    padding-top: min(95px, 5.9375rem, 6.5972222222vw);
  }
  .p-transportation .trunk .image-container {
    width: min(560px, 35rem, 38.8888888889vw);
  }
  .p-transportation .trunk .text-container {
    width: min(546px, 34.125rem, 37.9166666667vw);
    margin-top: min(46px, 2.875rem, 3.1944444444vw);
  }
  .p-transportation .trunk .title-container {
    row-gap: 0;
    padding-left: min(53px, 3.3125rem, 3.6805555556vw);
  }
  .p-transportation .trunk .title-container::before {
    background-image: linear-gradient(81.504deg, #00C85B, #00ADAC);
    width: min(10px, 0.625rem, 0.6944444444vw);
    height: min(97px, 6.0625rem, 6.7361111111vw);
  }
  .p-transportation .trunk .lead {
    font-size: min(17px, 1.0625rem, 1.1805555556vw);
    line-height: 1.2352941176;
  }
  .p-transportation .trunk .title {
    font-size: min(38px, 2.375rem, 2.6388888889vw);
    line-height: 1.4473684211;
  }
  .p-transportation .trunk .number {
    font-size: min(128px, 8rem, 8.8888888889vw);
    line-height: 1.484375;
    top: max(-56px, -3.5rem, -3.8888888889vw);
    left: min(328px, 20.5rem, 22.7777777778vw);
  }
  .p-transportation .trunk .text {
    font-size: min(18px, 1.125rem, 1.25vw);
    line-height: 1.7777777778;
    width: 100%;
    margin-top: min(50px, 3.125rem, 3.4722222222vw);
  }
  .p-transportation .regional {
    margin-inline: auto;
  }
  .p-transportation .regional .inner {
    flex-direction: row;
    justify-content: space-between;
    width: min(1200px, 75rem, 83.3333333333vw);
    padding-top: min(60px, 3.75rem, 4.1666666667vw);
  }
  .p-transportation .regional .image-container {
    width: min(560px, 35rem, 38.8888888889vw);
  }
  .p-transportation .regional .text-container {
    width: min(546px, 34.125rem, 37.9166666667vw);
    margin-top: min(46px, 2.875rem, 3.1944444444vw);
  }
  .p-transportation .regional .title-container {
    row-gap: 0;
    padding-left: min(53px, 3.3125rem, 3.6805555556vw);
  }
  .p-transportation .regional .title-container::before {
    background-image: linear-gradient(81.504deg, #00C85B, #00ADAC);
    width: min(10px, 0.625rem, 0.6944444444vw);
    height: min(97px, 6.0625rem, 6.7361111111vw);
  }
  .p-transportation .regional .lead {
    font-size: min(17px, 1.0625rem, 1.1805555556vw);
    line-height: 1.2352941176;
  }
  .p-transportation .regional .title {
    font-size: min(38px, 2.375rem, 2.6388888889vw);
    line-height: 1.4473684211;
  }
  .p-transportation .regional .number {
    font-size: min(128px, 8rem, 8.8888888889vw);
    line-height: 1.484375;
    top: max(-55px, -3.4375rem, -3.8194444444vw);
    left: min(328px, 20.5rem, 22.7777777778vw);
  }
  .p-transportation .regional .text {
    font-size: min(18px, 1.125rem, 1.25vw);
    line-height: 1.7777777778;
    width: 100%;
    margin-top: min(50px, 3.125rem, 3.4722222222vw);
  }
  .p-transportation .example {
    margin-inline: auto;
    padding-top: min(90px, 5.625rem, 6.25vw);
    padding-bottom: min(98px, 6.125rem, 6.8055555556vw);
  }
  .p-transportation .example .wrap {
    max-width: 1440px;
    margin: 0 auto;
  }
  .p-transportation .example .inner {
    border-radius: min(20px, 1.25rem, 1.3888888889vw) 0 0 min(20px, 1.25rem, 1.3888888889vw);
    width: min(1320px, 82.5rem, 91.6666666667vw);
    padding-top: min(93px, 5.8125rem, 6.4583333333vw);
    padding-bottom: min(128px, 8rem, 8.8888888889vw);
    position: relative;
  }
  .p-transportation .example .title-container {
    display: flex;
    justify-content: normal;
    padding-left: min(120px, 7.5rem, 8.3333333333vw);
  }
  .p-transportation .example .title {
    font-size: min(32px, 2rem, 2.2222222222vw);
    line-height: 1.4375;
    text-align: normal;
    padding-left: 0;
    padding-bottom: min(10px, 0.625rem, 0.6944444444vw);
  }
  .p-transportation .example .title::before {
    background-image: linear-gradient(1.566deg, #2ED0FA, #0051CA);
    width: min(101px, 6.3125rem, 7.0138888889vw);
    height: min(4px, 0.25rem, 0.2777777778vw);
  }
  .p-transportation .example .list-container {
    margin-left: min(107px, 6.6875rem, 7.4305555556vw);
    padding-top: min(64px, 4rem, 4.4444444444vw);
  }
  .p-transportation .example .slick-arrow {
    width: min(60px, 3.75rem, 4.1666666667vw);
    height: min(60px, 3.75rem, 4.1666666667vw);
    top: max(-43px, -2.6875rem, -2.9861111111vw);
  }
  .p-transportation .example .slick-prev {
    right: min(188px, 11.75rem, 13.0555555556vw);
  }
  .p-transportation .example .slick-next {
    right: min(120px, 7.5rem, 8.3333333333vw);
  }
  .p-transportation .example .list {
    width: min(1093px, 68.3125rem, 75.9027777778vw);
  }
  .p-transportation .example .item:not(:last-of-type) {
    padding-right: min(30px, 1.875rem, 2.0833333333vw);
  }
  .p-transportation .example .item img {
    border-radius: min(10px, 0.625rem, 0.6944444444vw);
    aspect-ratio: 340/230;
  }
  .p-transportation .example .text-container {
    margin-top: min(38px, 2.375rem, 2.6388888889vw);
  }
  .p-transportation .example .head {
    font-size: min(24px, 1.5rem, 1.6666666667vw);
    line-height: 1.4583333333;
  }
  .p-transportation .example .text {
    font-size: min(17px, 1.0625rem, 1.1805555556vw);
    line-height: 1.7058823529;
    margin-top: min(24px, 1.5rem, 1.6666666667vw);
  }
  .p-transportation .example .bg-text {
    font-size: min(205px, 12.8125rem, 14.2361111111vw);
    line-height: 1.2487804878;
    left: 0;
    bottom: max(-40px, -2.5rem, -2.7777777778vw);
  }
}

@media (1441px <= width) {
  .p-transportation .example .inner::after {
    content: "";
    display: block;
    width: 100%;
    background-color: #F5F5F5;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 1px;
    transform: translateX(100%);
  }
  .p-transportation .trunk .bg-container {
    width: 23.889%;
  }
}
