@charset "UTF-8";

/* ========================================
   共通：サービスTOP (#service)
   ======================================== */
#service .ud-mv::before {
  display: none;
}
#service .ser-mv__txt {
  position: relative;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 24px;
  margin-left: auto;
  margin-right: 0;
  width: max-content;
}
#service .ser-mv__txt::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  width: 100%;
  background-image: linear-gradient(90deg, #010341, #0044be);
}

#service .ser-mv__txt .ttl {
  font-size: 45px;
  font-weight: var(--fw-thin);
  letter-spacing: 0.195em;
  line-height: 1.2;
}
#service .ser-mv__txt .subttl {
  letter-spacing: 0.2em;
  line-height: 1;
  font-family: var(--font-comfortaa);
  font-weight: var(--fw-medium);
}
#service .ud-mv__bg {
  transform: translateX(-10%);
  object-fit: contain;
}
@media screen and (max-width: 1100px) {
  #service .ud-mv__bg {
    transform: translateX(-25%);
    object-position: bottom;
  }
}
@media screen and (max-width: 768px) {
  #service .ser-mv__txt {
    gap: 16px;
    padding-bottom: 24px;
  }
  #service .ser-mv__txt .ttl {
    font-size: var(--fs-40);
  }
}
@media screen and (max-width: 640px) {
  #service .ud-mv {
    padding-top: 100px;
  }
  #service .ud-mv__inr {
    padding-bottom: 0;
  }
  #service .ser-mv__txt {
    flex-direction: column;
    gap: 15px;
    padding-bottom: 16px;
  }
  #service .ser-mv__txt .ttl {
    font-size: var(--fs-32);
  }
}
/* ========================================
   共通：サービスタブ (ser-tab)
   ======================================== */
.ser-tab__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 8px;
}

.ser-tab__item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  background: transparent;
  text-decoration: none;
  font-size: var(--fs-18);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: 0.1em;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
  border: 1px solid var(--c-white);
}

.ser-tab__item::after {
  content: "";
  display: block;
  width: 21px;
  height: 21px;
  background-image: url(../../img/common/icon-tab-arrow.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  mix-blend-mode: multiply;
}

.ser-tab__item:hover,
.ser-tab__item.is-active {
  background: #e3e3e3;
  border: 1px solid #d1d1d1;
  opacity: 1;
}

@media screen and (max-width: 960px) {
  .ser-tab__item {
    font-size: var(--fs-16);
    padding: 4px 12px;
  }
}

@media screen and (max-width: 768px) {
  .ser-tab__nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
  }

  .ser-tab__item {
    font-size: var(--fs-14);
    justify-content: center;
    border: 1px solid var(--c-gray-03);
  }

  .ser-tab__item::after {
    width: 16px;
    height: 16px;
  }
}

@media screen and (max-width: 600px) {
  .ser-tab__nav {
    grid-template-columns: repeat(2, 1fr);
  }

  .ser-tab__item {
    width: 100%;
    justify-content: center;
    gap: 4px;
    padding: 4px;
    letter-spacing: 0.05em;
    font-size: 13px;
  }
}

/* ========================================
   共通：intro / 見出し (ser-intro, ser-cnt)
   ======================================== */
.ser-intro {
  padding: 64px 0;
  position: relative;
}

.ser-intro::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image: url(../../img/page/service/ser-intro-bg.svg);
  background-size: 60vw;
  background-position: left;
  background-repeat: no-repeat;
  mix-blend-mode: luminosity;
}

.ser-intro__inr {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 56px;
  position: relative;
  z-index: 1;
}

.ser-intro__ttl {
  font-family: var(--font-shippori);
  font-size: var(--fs-35);
  color: var(--c-white);
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  flex-shrink: 0;
}

.ser-intro__txt {
  flex: 1;
  color: var(--c-white);
  line-height: 2;
}
.ser-cnt__ttl {
  font-size: var(--fs-35);
  color: var(--c-ser-01);
  letter-spacing: 0.2em;
  text-align: center;
  font-weight: var(--fw-black);
}
.ser-cnt__ttl.left {
  text-align: left;
}
.ser-cnt__sub-ttl {
  position: relative;
  font-size: var(--fs-22);
  font-weight: var(--fw-semibold);
  text-align: center;
  letter-spacing: 0.2em;
}
.ser-cnt__sub-ttl.white {
  color: var(--c-white);
}
.ser-cnt__sub-ttl.bg {
  padding: 12px 0;
  color: var(--c-white) !important;
}
.ser-cnt__sub-ttl.bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  right: 0;
  height: 100%;
  background: var(--c-ser-01);
  z-index: -1;
}

.ser-link__ttl {
  font-size: var(--fs-32);
  font-weight: var(--fw-black);
  text-align: center;
  letter-spacing: 0.075em;
}
@media screen and (max-width: 960px) {
  .ser-intro::before {
    background-size: 60vw;
    background-position: top left;
  }
  .ser-link__ttl {
    font-size: var(--fs-24);
  }
}
#service-02 .ser-cnt__sub-ttl.bg::before {
  background: var(--c-ser-02);
}
#service-03 .ser-cnt__sub-ttl.bg::before {
  background: var(--c-ser-03);
}
#service-04 .ser-cnt__sub-ttl.bg::before {
  background: var(--c-ser-04);
}
#service-05 .ser-cnt__sub-ttl.bg::before {
  background: var(--c-ser-05);
}
.ser-cnt__ttl-serif {
  font-family: var(--font-noto-serif);
  font-size: 42px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.055em;
}
.ser-cnt__ttl-serif.white {
  color: var(--c-white);
  text-shadow: 6px 6px rgba(0, 0, 0, 0.25);
}
.ser-cnt__ttl-serif.center {
  text-align: center;
}
#service-01,
#service-02,
#service-03,
#service-04,
#service-05 {
  color: var(--c-ser-txt);
}
/* gradient-bg */
.gradient-bg {
  position: relative;
}
.gradient-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  right: 0;
  height: 100%;
  background-image: linear-gradient(0deg, #61a1f24d, #ebecff4d 50%, #ffffff4d);
  z-index: -1;
}

.gradient-bg.all::before {
  height: 100%;
  background-image: linear-gradient(0deg, #61a1f24d, #ebecff4d 50%, #61a1f24d);
}
@media screen and (max-width: 768px) {
  .ser-intro::before {
    background-size: 100vw;
    background-position: top 10px left -50px;
  }
}
/* ========================================
   各ページ（#service-01〜05 のテーマ色）
   ======================================== */

/* --- intro・ttl の色 --- */
#service-01 .ser-intro,
#service-01.ser-cnt__sub-ttl.bg::before {
  background: var(--c-ser-01);
}

#service-01 .ser-cnt__ttl,
#service-01 .ser-cnt__sub-ttl.blue,
#service-01 .ser-cnt__ttl-serif.blue,
#service-01 .ser-link__ttl {
  color: var(--c-ser-01);
}
#service-02 .ser-intro,
#service-02 .ser-cnt__sub-ttl.bg::before {
  background: var(--c-ser-02);
}
#service-02 .ser-cnt__ttl,
#service-02 .ser-cnt__sub-ttl.blue,
#service-02 .ser-cnt__ttl-serif.blue,
#service-02 .ser-link__ttl {
  color: var(--c-ser-02);
}
#service-03 .ser-intro,
#service-03.ser-cnt__sub-ttl::before {
  background: var(--c-ser-03);
}
#service-03 .ser-cnt__ttl,
#service-03 .ser-cnt__sub-ttl.blue,
#service-03 .ser-cnt__ttl-serif.blue,
#service-03 .ser-link__ttl {
  color: var(--c-ser-03);
}
#service-04 .ser-intro,
#service-04.ser-cnt__sub-ttl.bg::before {
  background: var(--c-ser-04);
}
#service-04 .ser-cnt__ttl,
#service-04 .ser-cnt__sub-ttl.blue,
#service-04 .ser-cnt__ttl-serif.blue,
#service-04 .ser-link__ttl {
  color: var(--c-ser-04);
}
#service-05 .ser-intro,
#service-05.ser-cnt__sub-ttl.bg::before {
  background: var(--c-ser-05);
}
#service-05 .ser-cnt__ttl,
#service-05 .ser-cnt__sub-ttl.blue,
#service-05 .ser-cnt__ttl-serif.blue,
#service-05 .ser-link__ttl {
  color: var(--c-ser-05);
}

@media screen and (max-width: 960px) {
  .ser-intro {
    padding: 40px 0;
  }
  .ser-intro__inr {
    flex-direction: column;
    gap: 24px;
  }

  .ser-intro__ttl,
  .ser-cnt__ttl {
    font-size: var(--fs-28);
  }
  .ser-cnt__sub-ttl {
    font-size: var(--fs-20);
  }
  .ser-cnt__ttl-serif {
    font-size: var(--fs-32);
  }
}
@media screen and (max-width: 768px) {
  .ser-cnt__ttl-serif {
    font-size: var(--fs-28);
  }
}

/* ========================================
   共通：カード (ser-cnt-card)
   ======================================== */
.ser-cnt-cards__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.ser-cnt-card {
  position: relative;
  padding: 40px 32px;
  background: var(--c-white);
}

.ser-cnt-card__icon {
  position: absolute;
  top: -4px;
  left: -4px;
  background: var(--c-white);
  padding-right: 12px;
  padding-bottom: 12px;
}

.ser-cnt-card__icon img {
  width: 32px;
  height: 32px;
  display: block;
  object-fit: contain;
}

.ser-cnt-card__ttl {
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  letter-spacing: 0.105em;
  line-height: 1.7;
  padding-bottom: 16px;
  margin-bottom: 16px;
}

.ser-cnt-card__txt {
  line-height: 2;
  letter-spacing: 0.0025em;
}

/* --- ser-cnt-card の枠・ttl 色 --- */
#service-01 .ser-cnt-card {
  border: 1px solid var(--c-ser-01);
}
#service-02 .ser-cnt-card {
  border: 1px solid var(--c-ser-02);
}
#service-03 .ser-cnt-card {
  border: 1px solid var(--c-ser-03);
}
#service-04 .ser-cnt-card {
  border: 1px solid var(--c-ser-04);
}
#service-05 .ser-cnt-card {
  border: 1px solid var(--c-ser-05);
}
#service-01 .ser-cnt-card__ttl {
  color: var(--c-ser-01);
  border-bottom: 1px solid var(--c-ser-01);
}
#service-02 .ser-cnt-card__ttl {
  color: var(--c-ser-02);
  border-bottom: 1px solid var(--c-ser-02);
}
#service-03 .ser-cnt-card__ttl {
  color: var(--c-ser-03);
  border-bottom: 1px solid var(--c-ser-03);
}
#service-04 .ser-cnt-card__ttl {
  color: var(--c-ser-04);
  border-bottom: 1px solid var(--c-ser-04);
}
#service-05 .ser-cnt-card__ttl {
  color: var(--c-ser-05);
  border-bottom: 1px solid var(--c-ser-05);
}
@media screen and (max-width: 1400px) {
  .ser-cnt-card {
    padding: 32px 24px;
  }
  .ser-cnt-card__ttl {
    font-size: var(--fs-18);
  }
  .ser-cnt-card__icon img {
    width: 28px;
    height: 28px;
  }
}
@media screen and (max-width: 1200px) {
  .ser-cnt-cards__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 768px) {
  .ser-cnt-cards__grid {
    grid-template-columns: 1fr;
  }

  .ser-cnt-card {
    padding: 20px 16px;
  }
  .ser-cnt-card__hd {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 12px;
  }
  .ser-cnt-card__icon {
    position: relative;
    top: 0;
    left: 0;
    padding-right: 0;
    padding-bottom: 0;
  }
  .ser-cnt-card__icon img {
    width: 20px;
    height: 20px;
  }
  .ser-cnt-card__ttl {
    text-align: center;
    margin-bottom: 0;
    padding-bottom: 0;
  }
  #service-01 .ser-cnt-card__hd {
    border-bottom: 1px solid var(--c-ser-01);
  }
  #service-01 .ser-cnt-card__ttl {
    border-bottom: none;
  }
}

/* ========================================
   共通：強み (strength)
   ======================================== */
.strength {
  position: relative;
  background-image: url(../../img/page/service/strength-bg.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.strength__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.strength__item {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--c-white);
}

.strength__hd {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 16px 20px;
  background: #009ade;
}
.strength__hd::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(#6da2ed, #9cbeffa6 18%, #ffffffa6 29%);
  mix-blend-mode: multiply;
}
.strength__icon {
  flex-shrink: 0;
}

.strength__icon img {
  width: 30px;
  height: auto;
  display: block;
  object-fit: contain;
}

.strength__ttl {
  font-size: var(--fs-21);
  font-weight: var(--fw-bold);
  color: var(--c-white);
  letter-spacing: 0.1em;
}
.strength__txt {
  flex: 1;
  padding: 16px 40px 24px;
}

@media screen and (max-width: 1200px) {
  .strength__icon img {
    width: 24px;
  }
  .strength__ttl {
    font-size: var(--fs-18);
  }
  .strength__txt {
    padding: 16px 20px 24px;
  }
}
@media screen and (max-width: 960px) {
  .strength {
    background-image: url(../../img/page/service/strength-bg-sp.webp);
  }
}

@media screen and (max-width: 768px) {
  .strength__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .strength__hd {
    justify-content: center;
    padding: 12px 16px;
    gap: 0.5em;
  }
  .strength__ttl {
    font-size: var(--fs-17);
  }
  .strength__icon img {
    width: 20px;
    height: 20px;
  }
  .strength__txt {
    padding: 12px 16px 16px;
  }
}

/* ========================================
   共通：フロー (flow)
   ======================================== */
.flow__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.flow__card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 6px 6px 4px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  overflow: hidden;
}

.flow__head {
  position: relative;
  color: #fff;
  padding: 18px 56px 18px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 68px;
}

.flow__head::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(90% 0, 100% 50%, 90% 100%, 0 100%, 0 0);
  z-index: 0;
}

.flow__card:last-child .flow__head::before {
  clip-path: none;
}

.flow__no-img {
  display: block;
  width: auto;
  height: 30px;
  object-fit: contain;
  position: relative;
  z-index: 1;
}

.flow__title {
  position: relative;
  z-index: 1;
  font-size: var(--fs-20);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
}

.flow__text-inr {
  margin: 0;
  padding: 24px 40px 30px;
}
.flow__text-ttl {
  font-size: var(--fs-18);
  margin-bottom: 8px;
  font-weight: var(--fw-bold);
}
#service-04 .flow__head::before {
  background: var(--c-ser-04);
}
#service-05 .flow__head::before {
  background: var(--c-ser-05);
}
@media (max-width: 1200px) {
  .flow__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .flow__head::before {
    clip-path: polygon(90% 0, 100% 50%, 90% 100%, 0 100%, 0 0);
  }
  .flow__no-img {
    height: 24px;
  }
}
@media (max-width: 767.98px) {
  .flow__grid {
    grid-template-columns: 1fr;
  }
  #service-04 .flow__head::before {
    clip-path: none;
  }
  .flow__text-inr {
    padding: 16px 20px 20px;
  }
  .flow__head {
    padding: 16px 52px 16px 16px;
  }
  .flow__head::after {
    border-top-width: 28px;
    border-bottom-width: 28px;
    border-left-width: 32px;
  }
  .flow__title {
    font-size: var(--fs-18);
  }
}

/* ========================================
   共通：貨物テーブル (ser-cargo, ser-table)
   ======================================== */
.ser-solid__subttl {
  font-size: var(--fs-19);
  font-weight: var(--fw-semibold);
}

.ser-table-wrap {
  overflow-x: auto;
}

.ser-table {
  width: 100%;
  border-collapse: collapse;
}

.ser-table th,
.ser-table td {
  padding: 16px 24px;
  border-bottom: 1px solid #666666;
  text-align: left;
  font-size: var(--fs-15);
  letter-spacing: 0.075em;
  color: var(--c-ser-txt);
}
.ser-table th {
  font-weight: var(--fw-bold);
}
.ser-table td {
  line-height: 1.8;
}
/* --- ser-cargo / ser-table の色 --- */
#service-01 .ser-solid__subttl {
  color: var(--c-ser-01);
  border-bottom: 2px solid var(--c-ser-01);
}
#service-02 .ser-solid__subttl {
  color: var(--c-ser-02);
  border-bottom: 2px solid var(--c-ser-02);
}

#service-03 .ser-solid__subttl {
  color: var(--c-ser-03);
  border-bottom: 2px solid var(--c-ser-03);
}

#service-04 .ser-solid__subttl {
  color: var(--c-ser-04);
  border-bottom: 2px solid var(--c-ser-04);
}

#service-05 .ser-solid__subttl {
  color: var(--c-ser-05);
  border-bottom: 2px solid var(--c-ser-05);
}

@media screen and (max-width: 960px) {
  #ser01-business .ser01-box {
    padding: 24px 20px;
  }

  #ser01-business .ser01-box__item {
    flex-direction: column;
    gap: 12px;
  }

  .ser-table th,
  .ser-table td {
    padding: 12px 16px;
    font-size: var(--fs-13);
  }
}
/* ========================================
  FAQ:共通
   ======================================== */
#service-03 .faq .ser-cnt__ttl,
#service-04 .faq .ser-cnt__ttl,
#service-05 .faq .ser-cnt__ttl {
  font-weight: var(--fw-bold);
}
.faq-hd {
  gap: 12px;
  align-items: center;
}
.faq-hd__txt {
  flex: 1;
}
.faq-hd__img {
  aspect-ratio: 406 /170;
  width: 380px;
  height: auto;
}
.faq-hd__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.faq__list {
  border-top: 1px solid var(--c-ser-txt);
}

.faq__item {
  border-bottom: 1px solid var(--c-ser-txt);
  display: flex;
  gap: 40px;
  padding: 40px 0;
}

.faq__question {
  width: 40%;
}
.faq__question p {
  text-indent: -2em;
  padding-left: 2em;
}
.faq__answer {
  flex: 1;
}
.faq__answer ul {
  list-style: disc;
  list-style-position: inside;
}
.faq__answer ul li {
  text-indent: -1.5em;
  padding-left: 1.5em;
}

@media screen and (max-width: 1200px) {
  .faq-hd__img {
    width: 25vw;
  }
}
@media screen and (max-width: 1000px) {
  .faq-hd {
    flex-direction: column-reverse;
    gap: 24px;
  }
  .faq-hd__img {
    margin-left: 0;
    margin-right: auto;
  }
}
@media screen and (max-width: 960px) {
  .faq-hd__img {
    max-width: 240px;
    width: 100%;
    margin-left: auto;
  }
  .faq__item {
    flex-direction: column;
    gap: 16px;
    padding: 32px 0;
  }
  .faq__question {
    width: 100%;
  }
  .faq__question p {
    font-weight: var(--fw-bold);
  }
}

/* ========================================
   service-01
   ======================================== */
/* ser01-business */
#ser01-business .ser01-box {
  border: 1px solid var(--c-ser-01);
  padding: 32px;
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
}
#ser01-business .ser01-box__hd {
  display: flex;
  gap: 12px;
  align-items: center;
}
#ser01-business .ser01-box__ttl {
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  color: var(--c-ser-01);
}
#ser01-business .ser01-box__icon {
  flex-shrink: 0;
}

#ser01-business .ser01-box__icon img {
  width: 28px;
  height: auto;
  display: block;
  object-fit: contain;
}
@media screen and (max-width: 960px) {
  #ser01-business .ser01-box__icon img {
    width: 24px;
  }
}

/* ser01-port */
#ser01-port {
  max-width: 1400px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

#ser01-port img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  object-position: center;
}
/* ser01-slider */
#ser01-slider {
  position: relative;
}
#ser01-slider::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  right: 0;
  height: 50%;
  background: var(--c-ser-01);
  z-index: -1;
}
#ser01-slider::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  right: 0;
  height: 50%;
  background-image: linear-gradient(#ffffff, #ebecff4d 50%, #61a1f24d);
  z-index: -1;
}

#ser01-slider .ser01-slider-ttl {
  font-size: var(--fs-22);
  letter-spacing: 0.2em;
  color: var(--c-white);
  text-align: center;
  font-weight: var(--fw-semibold);
  border-bottom: 1px solid var(--c-white);
  line-height: 1;
}
#ser01-slider .swiper-wrapper {
  height: fit-content;
  align-items: stretch;
}
#ser01-slider .swiper-slide {
  height: auto;
  display: flex;
}
#ser01-slider .ser01-slider__slide-inr {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex: 1;
  gap: 8px;
}

#ser01-slider .ser01-slider__caption {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--c-white);
}

#ser01-slider .ser01-slider__caption .ser01-slider__icon {
  flex-shrink: 0;
  margin-top: 4px;
}

#ser01-slider .ser01-slider__slide-inr .ser01-slider__icon img {
  width: 20px;
  height: auto;
  display: block;
  object-fit: contain;
}

#ser01-slider .ser01-slider__slide-inr .ser01-slider__label {
  font-size: var(--fs-18);
  letter-spacing: 0.2em;
  font-weight: var(--fw-semibold);
  text-align: left;
}

#ser01-slider .ser01-slider__slide-inr .ser01-slider__label .sub-label {
  display: block;
  font-size: var(--fs-15);
  letter-spacing: 0.2em;
}

#ser01-slider .ser01-slider__slide-inr > img {
  aspect-ratio: 1;
  margin-top: auto;
  margin-bottom: 0;
}

#ser01-slider .ser01-slider__main {
  position: relative;
}

#ser01-slider .ser01-swiper__prev,
#ser01-slider .ser01-swiper__next {
  position: absolute;
  bottom: 30%;
  width: 65px;
  height: 65px;
  border: none;
  background: url(../../img/page/service/service01/icon-slider-arrow.svg)
    center / contain no-repeat;
  cursor: pointer;
  z-index: 10;
  transition: opacity 0.3s ease;
}

#ser01-slider .ser01-swiper__prev:hover,
#ser01-slider .ser01-swiper__next:hover {
  opacity: 0.85;
}

#ser01-slider .ser01-swiper__prev {
  left: 0;
  transform: translate(-50%, 50%) rotate(180deg);
}

#ser01-slider .ser01-swiper__next {
  right: 0;
  transform: translate(50%, 50%);
}

#ser01-slider .ser01-slider__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 32px;
}

#ser01-slider .ser01-swiper__pagination {
  margin: 0;
  position: relative;
}

#ser01-slider .ser01-swiper__pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: #bfbfbf;
  opacity: 1;
  margin: 0 12px;
}

#ser01-slider .ser01-swiper__pagination .swiper-pagination-bullet-active {
  background: var(--c-ser-01);
}

#ser01-slider .ser01-slider__note {
  font-size: var(--fs-15);
}
@media screen and (max-width: 1200px) {
  #ser01-slider .ser01-slider__caption {
    gap: 8px;
  }
  #ser01-slider .ser01-slider__caption .ser01-slider__icon {
    width: 20px;
  }
  #ser01-slider .ser01-slider__slide-inr .ser01-slider__label {
    font-size: var(--fs-16);
  }
  #ser01-slider .ser01-slider__slide-inr .ser01-slider__label .sub-label {
    font-size: var(--fs-14);
    letter-spacing: 0.075em;
  }
}
@media screen and (max-width: 768px) {
  #ser01-slider .ser01-slider__caption .ser01-slider__icon {
    width: 16px;
  }
  #ser01-slider .ser01-slider__slide-inr .ser01-slider__label {
    font-size: var(--fs-14);
    letter-spacing: 0.1em;
  }
  #ser01-slider .ser01-slider__slide-inr .ser01-slider__label .sub-label {
    font-size: 10px;
    letter-spacing: 0.005em;
  }
  #ser01-slider .ser01-swiper__prev,
  #ser01-slider .ser01-swiper__next {
    width: 32px;
    height: 32px;
  }
  #ser01-slider .ser01-slider__nav {
    padding: 24px 0 0;
    gap: 16px;
  }
}
/* ser01-related */
#ser01-related .ser01-related__img-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
#ser01-related .ser01-related__img {
  aspect-ratio: 435 / 254;
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  object-position: center;
  margin-left: auto;
  margin-right: auto;
}
/* ser01-equipment */
#ser01-equipment .ser01-equipment__img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  object-position: center;
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: 900 / 660;
}
/* ========================================
   service-02
   ======================================== */
/* #ser02-cargo  */
#ser02-cargo .ser-table tr:last-child td {
  border-bottom: none;
}

/* #ser02-safety */
#ser02-safety ul li {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 16px;
}
#ser02-safety ul li img {
  width: 32px;
  height: auto;
  display: block;
  object-fit: contain;
}
#ser02-safety ul li p {
  font-size: var(--fs-20);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.105em;
  color: var(--c-ser-02);
}
/* ser02-equipment */
#ser02-equipment .ser02-equipment__img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  object-position: center;
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: 900 / 660;
}
#ser02-cargo .ser02-cargo__img-wrap:not(.c-bg-pin):not(.c-parallax-window) {
  width: 100%;
  height: auto;
  overflow: hidden;
}
#ser02-cargo .ser02-cargo__img-wrap:not(.c-bg-pin):not(.c-parallax-window) img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  object-position: center;
}
/* ========================================
 servive-03
   ======================================== */
/* ser03-storage */
#ser03-cargo .ser03-cargo__note {
  font-size: var(--fs-15);
}

#ser03-storage .ser03-flow {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: center;
  gap: 0;
}

#ser03-storage .ser03-flow__step {
  flex: 1;
  min-width: 0;
  position: relative;
  padding: 40px 40px 40px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  gap: 24px;
}
#ser03-storage .ser03-flow__step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(90deg, #ffffff 1%, #ffffff80 30%, #8fb9ff);
  clip-path: polygon(85% 0, 100% 50%, 85% 100%, 0 100%, 0 0);
  z-index: -1;
}

#ser03-storage .ser03-flow__num {
  display: block;
  height: 59px;
}
#ser03-storage .ser03-flow__num img {
  width: auto;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

#ser03-storage .ser03-flow__ttl {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: var(--fs-22);
  font-weight: var(--fw-bold);
  letter-spacing: 0.2em;
  color: #2e6eef;
  line-height: 1.6;
}

#ser03-storage .ser03-flow__txt {
  font-weight: var(--fw-medium);
  line-height: 2;
}
@media screen and (max-width: 960px) {
  #ser03-storage .ser03-flow__step {
    gap: 16px;
    padding: 32px 32px 32px 0;
  }
  #ser03-storage .ser03-flow__num {
    height: 40px;
  }
  #ser03-storage .ser03-flow__ttl {
    font-size: var(--fs-18);
  }
  #ser03-storage .ser03-flow__txt {
    font-size: var(--fs-14);
  }
}
@media screen and (max-width: 768px) {
  #ser03-storage .ser03-flow {
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
    gap: 16px;
    max-width: 500px;
  }
  #ser03-storage .ser03-flow__step {
    padding: 12px 16px 32px;
    flex-direction: row;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    gap: 12px;
  }
  #ser03-storage .ser03-flow__num {
    height: 32px;
  }
  #ser03-storage .ser03-flow__txt {
    -webkit-flex: 0 0 100%;
    flex: 0 0 100%;
    text-align: center;
  }
  #ser03-storage .ser03-flow__step::before {
    clip-path: polygon(100% 0, 100% 85%, 50% 100%, 0 85%, 0 0);
    background-image: linear-gradient(#ffffff 1%, #ffffff80 30%, #8fb9ff);
  }
  #ser03-storage .ser03-flow__ttl {
    writing-mode: horizontal-tb;
    text-orientation: unset;
    font-size: var(--fs-17);
  }
  #ser03-storage .ser03-flow__txt br {
    display: none;
  }
}

/* ser03-transport */
#ser03-transport .ser03-transport__bubbles {
  position: relative;
  min-height: 1011px;
}

#ser03-transport .ser03-transport__bubble {
  position: absolute;
  max-width: 523px;
  aspect-ratio: 1;
  padding: 120px 100px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  mix-blend-mode: multiply;
}

#ser03-transport .ser03-transport__bubble-inr {
  text-align: center;
  max-width: 100%;
}

#ser03-transport .ser03-transport__bubble--01 {
  top: 0;
  left: 0;
  transform: translateX(-10%);
  background-image: linear-gradient(159deg, #ffffff 1%, #ffffff80 19%, #7eb4ed);
}

#ser03-transport .ser03-transport__bubble--02 {
  top: 10%;
  right: 0;
  transform: translateX(10%);
  left: auto;
  background-image: linear-gradient(212deg, #ffffff, #ffffff80 19%, #79d6e7);
}

#ser03-transport .ser03-transport__bubble--03 {
  bottom: 2%;
  left: 10%;
  background: linear-gradient(159deg, #87acff, #ffffff80 80%, #ffffff);
}

#ser03-transport .ser03-transport__bubble-icon {
  display: inline-block;
  margin-bottom: 12px;
}
#ser03-transport .ser03-transport__bubble-icon img {
  width: 27px;
  height: 26px;
  display: block;
  margin: 0 auto;
}
#ser03-transport .ser03-transport__bubble-hd {
  display: flex;
  gap: 0.8em;
  align-items: center;
}
#ser03-transport .ser03-transport__bubble-ttl {
  font-size: var(--fs-26);
  font-weight: var(--fw-bold);
  color: var(--c-ser-03);
  margin: 0 0 12px;
  letter-spacing: 0.2em;
}
#ser03-transport .ser03-transport__map {
  position: absolute;
  bottom: 0;
  left: 20%;
  transform: translateY(10%);
}
#ser03-transport .ser03-transport__map-img {
  max-width: 630px;
  width: 100%;
  aspect-ratio: 630 /329;
  height: auto;
  display: block;
}
@media screen and (max-width: 1000px) {
  #ser03-transport .ser03-transport__bubbles {
    min-height: calc(90vw * 0.46 * 2);
  }
  #ser03-transport .ser03-transport__bubble {
    max-width: 100%;
    width: 52%;
    padding: 24px 64px;
  }
  #ser03-transport .ser03-transport__bubble--01,
  #ser03-transport .ser03-transport__bubble--02 {
    transform: none;
  }
  #ser03-transport .ser03-transport__bubble--03 {
    bottom: 3%;
    left: 15%;
  }
  #ser03-transport .ser03-transport__bubble-icon img {
    width: 20px;
    height: 19px;
  }
  #ser03-transport .ser03-transport__bubble-ttl {
    font-size: var(--fs-20);
  }
  #ser03-transport .ser03-transport__bubble-txt {
    font-size: var(--fs-14);
  }
  #ser03-transport .ser03-transport__map-img {
    max-width: 100%;
    width: 60vw;
  }
}
@media screen and (max-width: 900px) {
  #ser03-transport .ser03-transport__bubbles {
    min-height: calc(90vw * 0.5 * 2);
  }
}
@media screen and (max-width: 800px) {
  #ser03-transport .ser03-transport__bubbles {
    min-height: initial;
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: center;
    margin-bottom: 40px;
  }
  #ser03-transport .ser03-transport__bubble {
    width: 100%;
    max-width: 400px;
    position: sticky;
    top: initial;
    left: initial;
    right: initial;
    bottom: initial;
    transform: none;
    padding: 24px 40px;
  }
  #ser03-transport .ser03-transport__bubble:nth-child(2) {
    margin-top: -32px;
  }
  #ser03-transport .ser03-transport__bubble:nth-child(3) {
    margin-top: -32px;
  }
  #ser03-transport .ser03-transport__bubble-hd {
    justify-content: center;
  }
  #ser03-transport .ser03-transport__map {
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
    width: 100%;
    max-width: 320px;
  }
  #ser03-transport .ser03-transport__map-img {
    width: 100%;
    max-width: 100%;
  }
}
@media screen and (max-width: 600px) {
  #ser03-transport .ser03-transport__map-img {
    max-width: 400px;
    width: 100%;
  }
}

/* ser03-flexibility */
#ser03-flexibility {
  background-image: url(../../img/page/service/service03/flexibility-bg.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--c-white);
}
#ser03-flexibility .ser03-flexibility__txt {
  flex: 1;
}
#ser03-flexibility .ser03-flexibility__subttl {
  font-size: var(--fs-23);
  letter-spacing: 0.1em;
  padding-bottom: 8px;
}
#ser03-flexibility h2 {
  font-size: var(--fs-33);
  font-weight: var(--fw-bold);
  padding-bottom: 16px;
}
#ser03-flexibility ul {
  padding-top: 80px;
}
#ser03-flexibility ul li {
  display: flex;
  gap: 0.5em;
  align-items: center;
}
#ser03-flexibility ul li span img {
  width: 25px;
  height: 24px;
  object-fit: contain;
}
#ser03-flexibility ul li p {
  font-size: var(--fs-21);
  font-weight: var(--fw-bold);
}
#ser03-flexibility .ser03-flexibility__img {
  width: 544px;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: 550 / 485;
}
#ser03-flexibility .ser03-flexibility__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media screen and (max-width: 1400px) {
  #ser03-flexibility .ser03-flexibility__img {
    width: 40%;
  }
}

@media screen and (max-width: 960px) {
  #ser03-flexibility .ser03-flexibility__inr {
    flex-direction: column;
    gap: 40px;
  }
  #ser03-flexibility .ser03-flexibility__subttl {
    font-size: var(--fs-20);
  }
  #ser03-flexibility h2 {
    font-size: var(--fs-28);
  }
  #ser03-flexibility ul {
    padding-top: 40px;
  }
  #ser03-flexibility ul li span img {
    width: 20px;
    height: 19px;
  }
  #ser03-flexibility ul li p {
    font-size: var(--fs-18);
  }
  #ser03-flexibility .ser03-flexibility__img {
    width: 100%;
    max-width: 540px;
  }
}
@media screen and (max-width: 768px) {
  #ser03-flexibility {
    background-image: url(../../img/page/service/service03/flexibility-bg-sp.webp);
    background-position: left;
  }
}

/* ========================================
   service-04
   ======================================== */
/* ser04-transport-intro */
#ser04-transport-intro.ser-intro::before {
  display: none;
}
#ser04-transport-intro .ser-intro__inr {
  align-items: flex-start;
}

/* flow-tab */
.flow-tab__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.flow-tab__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 211px;
  padding: 16px 32px;
  text-decoration: none;
  font-weight: var(--fw-semibold);
  line-height: 1;
  border: 1px solid var(--c-ser-04);
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}
#service-04 .flow-tab__btn {
  background: var(--c-white);
  color: var(--c-ser-04);
}
#service-04 .flow-tab__btn:hover {
  background: #e8f4fc;
}
#service-04 .flow-tab__btn.is-active {
  background: var(--c-ser-04);
  color: var(--c-white);
  border-color: var(--c-ser-04);
}
#service-04 .flow-tab__btn.is-active:hover {
  background: var(--c-ser-04);
  color: var(--c-white);
}
.flow-content {
  display: block;
}
.flow-content:not(.is-active) {
  display: none;
}
.flow-content[hidden] {
  display: none !important;
}
@media screen and (max-width: 768px) {
  .flow-tab__btn {
    min-width: auto;
    width: calc(50% - 8px);
    padding: 12px 16px;
    font-size: var(--fs-16);
  }
}
#service-04 #flow-export {
  border-top: 10px solid var(--c-ser-04);
}
/* import */
#service-04 #flow-import {
  border-top: 10px solid #0068da;
}
#service-04 #flow-import .ser-cnt__ttl-serif {
  color: #0068da;
}
#service-04 #flow-import .flow__head::before {
  background-color: #0068da;
}

/* flow__img */
#service-04 #flow-import .flow__img,
#service-04 #flow-export .flow__img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1105px;
  aspect-ratio: 1105 / 750;
  height: 750px;
  margin-top: -80px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
#service-04 #flow-import .flow__img .flow__img-img,
#service-04 #flow-export .flow__img .flow__img-img {
  width: 100%;
  min-width: 1105px;
  max-width: none;
  height: 100%;
  object-fit: contain;
  display: block;
}
.scrollbar__wrapper {
  display: none;
  position: sticky;
  left: 0;
  bottom: 0;
  height: 12px;
  width: 100%;
  pointer-events: none;
}
.scrollbar__txt {
  position: absolute;
  right: calc(108px + 16px);
  top: 50%;
  transform: translateY(-50%);
  width: 45px;
  height: 10px;
}
.scrollbar__txt img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.scrollbar {
  --bar-h: 0.5px;
  --bar-w: 108px;
  position: absolute;
  right: 10px;
  top: 50%;
  width: var(--bar-w);
  height: var(--bar-h);
  overflow: visible;
  transform: translateY(50%);
}
.scrollbar::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--c-blue-01);
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left;
  animation: history-scrollbar-line 2.4s ease-in-out infinite;
}
/* 線の先端の矢印 */
.scrollbar::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0, 50%);
  width: 0;
  height: 0;
  border-left: 6px solid var(--c-blue-01);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  pointer-events: none;
  opacity: 0;
  animation: history-scrollbar-arrow 2.4s ease-in-out infinite;
}

@keyframes history-scrollbar-line {
  0% {
    transform: scaleX(0);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  66% {
    transform: scaleX(1);
    opacity: 1;
  }
  100% {
    transform: scaleX(1);
    opacity: 0;
  }
}

@keyframes history-scrollbar-arrow {
  0% {
    transform: translate(0, -50%);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  66% {
    transform: translate(var(--bar-w), -50%);
    opacity: 1;
  }
  100% {
    transform: translate(var(--bar-w), -50%);
    opacity: 0;
  }
}
@media screen and (max-width: 1100px) {
  #service-04 #flow-import .flow__img,
  #service-04 #flow-export .flow__img {
    max-width: 900px;
    height: 660px;
    aspect-ratio: 900 / 640;
  }
  #service-04 #flow-import .flow__img .flow__img-img,
  #service-04 #flow-export .flow__img .flow__img-img {
    width: 900px;
    min-width: 900px;
    height: 610px;
  }
}
@media screen and (max-width: 916px) {
  .scrollbar__wrapper {
    display: block;
  }
}

@media screen and (max-width: 600px) {
  #service-04 #flow-import .flow__img,
  #service-04 #flow-export .flow__img {
    max-width: 640px;
    height: 500px;
    aspect-ratio: 640 / 480;
  }
  #service-04 #flow-import .flow__img .flow__img-img,
  #service-04 #flow-export .flow__img .flow__img-img {
    width: 640px;
    min-width: 640px;
    height: 480px;
  }
}
/* flow-ud-img */
#service-04 .flow-ud-img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1300px;
  height: auto;
  aspect-ratio: 1300 / 428;
}
#service-04 .flow-ud-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ========================================
   service-05
   ======================================== */
/* ser-05-img */
#service-05 .ser-05-img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100vw;
  height: auto;
  object-fit: cover;
  object-position: center;
  aspect-ratio: 1300 / 490;
}
#service-05 .ser-05-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ser05-flow */
#service-05 #ser05-flow {
  border-top: 10px solid var(--c-ser-05);
}

/* ser05-support */
#ser05-support {
  position: relative;
  background-image: url(../../img/page/service/strength-bg.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#ser05-support .ser05-support__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
#ser05-support .ser05-support__item {
  display: flex;
  align-items: stretch;
  background: var(--c-white);
  overflow: hidden;
}
#ser05-support .ser05-support__icon {
  flex-shrink: 0;
  width: 132px;
  min-height: 102px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-ser-05);
}
#ser05-support .ser05-support__icon img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}
#ser05-support .ser05-support__txt {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 20px;
  font-size: var(--fs-22);
  font-weight: var(--fw-semibold);
}
@media screen and (max-width: 1000px) {
  #ser05-support .ser05-support__icon {
    width: 80px;
    min-height: 72px;
  }
  #ser05-support .ser05-support__icon img {
    width: 40px;
    height: 40px;
  }
  #ser05-support .ser05-support__txt {
    font-size: var(--fs-18);
  }
}
@media screen and (max-width: 768px) {
  #ser05-support {
    background-image: url(../../img/page/service/strength-bg-sp.webp);
  }
  #ser05-support .ser05-support__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  #ser05-support .ser05-support__item {
    min-width: 450px;
    margin-left: auto;
    margin-right: auto;
  }
  #ser05-support .ser05-support__icon img {
    width: 44px;
    height: 44px;
  }
  #ser05-support .ser05-support__txt {
    font-size: var(--fs-20);
  }
}
@media screen and (max-width: 600px) {
  #ser05-support .ser05-support__item {
    min-width: auto;
    width: 100%;
  }
  #ser05-support .ser05-support__icon img {
    width: 40px;
    height: 40px;
  }
  #ser05-support .ser05-support__txt {
    padding: 0 12px;
  }
}