@charset "UTF-8";

/* ===================================================
   【最優先】ルート要素の強制サイズリセット
   ※これをファイルの先頭に書くことで、既存の悪さを打ち消します
=================================================== */
html, body {
  min-width: 0 !important;      /* 最小幅の指定を解除 */
  width: 100% !important;       /* 幅を画面いっぱい（100%）に */
  max-width: 100% !important;   /* それ以上広げない */
  overflow-x: hidden !important;/* 横へのはみ出しを禁止 */
  margin: 0 !important;         /* 余白をゼロに */
  padding: 0 !important;
}

/* iframe（GTMなど）が悪さをしないようにする */
iframe {
  max-width: 100% !important;
}

/* =========================================================
   RESET & BASE
========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #111111;
  background-color: #ffffff;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

:root {
  --header-height: 80px;
  --color-primary: #0a3190;
  --container-width: 1200px;
}

section {
  scroll-margin-top: var(--header-height);
}

.layout-container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 32px;
  border-radius: 4px;
  background-color: var(--color-primary);
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.btn:hover {
  opacity: 0.9;
}

/* =========================================================
   HEADER
========================================================= */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-height);
  background-color: #ffffff;
  z-index: 1000;
  box-shadow: none;
  transition: box-shadow 0.2s ease;
}

.site-header--scrolled {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.site-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-header__logo {
  text-decoration: none;
  width: 170px;
}

.site-header__logo-text {
  font-weight: 800;
  font-size: 24px;
  letter-spacing: 0.04em;
  color: var(--color-primary);
}

.site-header__nav {
  margin-left: auto;
}

.site-header__nav-list {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-header__nav-link {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: #222222;
  position: relative;
}

.site-header__nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  background-color: var(--color-primary);
  transition: width 0.2s ease;
}

.site-header__nav-link:hover::after {
  width: 100%;
}

.site-header__cta {
  margin-left: 32px;
}

/* ハンバーガー（PCでは非表示） */

.site-header__toggle {
  display: none;
  position: relative;
  width: 32px;
  height: 22px;
  margin-left: 16px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.site-header__toggle-bar {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #000000;
  border-radius: 999px;
  transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease, bottom 0.2s ease;
}

.site-header__toggle-bar:nth-child(1) {
  top: 0;
}

.site-header__toggle-bar:nth-child(2) {
  top: 10px;
}

.site-header__toggle-bar:nth-child(3) {
  bottom: 0;
}

.site-header__toggle.is-open .site-header__toggle-bar:nth-child(1) {
  top: 10px;
  transform: rotate(45deg);
}

.site-header__toggle.is-open .site-header__toggle-bar:nth-child(2) {
  opacity: 0;
}

.site-header__toggle.is-open .site-header__toggle-bar:nth-child(3) {
  bottom: 10px;
  transform: rotate(-45deg);
}

/* モバイルメニュー */

.site-header__mobile-menu {
  position: fixed;
  inset: 0;
  background-color: #ffffff;
  display: none;
  z-index: 1200;
}

.site-header__mobile-menu.is-open {
  display: block;
}

.site-header__mobile-inner {
  max-width: 414px;
  margin: 0 auto;
  padding: 24px 24px 48px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.site-header__mobile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-header__mobile-logo {
  font-weight: 800;
  font-size: 24px;
  letter-spacing: 0.04em;
  color: var(--color-primary);
  text-decoration: none;
}

.site-header__mobile-close {
  position: relative;
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  cursor: pointer;
}

.site-header__mobile-close-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  border-radius: 999px;
  background-color: var(--color-primary);
}

.site-header__mobile-close-line:first-child {
  transform: translateY(-50%) rotate(45deg);
}

.site-header__mobile-close-line:last-child {
  transform: translateY(-50%) rotate(-45deg);
}

.site-header__mobile-nav {
  margin-top: 80px;
  flex: 1;
}

.site-header__mobile-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-header__mobile-nav-item + .site-header__mobile-nav-item {
  margin-top: 40px;
}

.site-header__mobile-nav-link {
  text-decoration: none;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #111111;
}

.site-header__mobile-cta {
  width: 100%;
  justify-content: center;
  margin-top: auto;
}

/* =========================================================
   HERO（MV） PC
========================================================= */

.hero {
  position: relative;
  z-index: 2;
  width: 100%;

  /* キューブ背景 */
  background-image: url("../images/mv_bg.png");
  background-size: 100% auto;
  background-position: center bottom;
  background-repeat: no-repeat;

  padding-top: calc(var(--header-height) + 80px);
  padding-bottom: 0;
  height: 720px;        /* MV 全体の高さ */
  overflow: visible;
}

.hero__inner {
  position: relative;
  z-index: 3;
}

.hero__content {
  max-width: 520px;
}

/* タイトル */

.hero__title {
  margin: 120px 0 24px;
  font-size: 0;
}

.hero__title--sp {
  display: none;
}

.hero__title-line {
  display: inline-block;
  background-color: var(--color-primary);
  color: #ffffff;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 8px 16px;
  line-height: 1.2;
}

.hero__title-line + .hero__title-line {
  margin-top: 6px;
}

/* Delivered with Professional Care. は1行表示 */
.hero__title-line--nowrap {
  white-space: nowrap;
}

.hero__lead {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: #333333;
}

/* mv_img.png を背景の上に重ねる（PC） */
.hero__illustration {
  position: absolute;
  right: -160px;
  bottom: -140px;
  width: min(960px, 100%);
  z-index: 2;
}

.hero__illustration img {
  width: 100%;
  height: auto;
}

/* =========================================================
   CORPORATE OUTLINE PC
========================================================= */

.corporate {
  position: relative;
  z-index: 1;
  width: 100%;

  /* 青背景 */
  background-image: url("../images/corporate_bg.png");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;

  /* MV の途中から青が出るようにオーバーラップさせる */
  margin-top: -220px;
  padding-top: 260px;
  padding-bottom: 160px;
}

.corporate__inner {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

.corporate__card {
  background-color: #ffffff;
  border-radius: 0;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.18);
  padding: 56px 72px 64px;
  margin-top: 50px;
}

.corporate__heading {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
  margin-top: 80px;
  margin-bottom: 40px;
}

.corporate__heading-line {
  display: inline;  /* PC は 1 行表示 */
}

.corporate__content {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr);
  column-gap: 56px;
  align-items: center;
}

.corporate__table {
  margin: 0;
}

.corporate__row {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  padding: 35px 0;
  border-bottom: 1px solid #e1e5ec;
  column-gap: 40px;
}

.corporate__row:last-child {
  border-bottom: none;
}

.corporate__label {
  margin: 0;
  font-size: 13px;
  color: #777b84;
  font-weight: bold;
}

.corporate__value {
  margin: 0;
  font-size: 14px;
  color: #222222;
}

.corporate__image img {
  border-radius: 0;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* =========================================================
   PLACEHOLDER & FOOTER
========================================================= */

.section-placeholder {
  min-height: 120px;
}

.site-footer {
  background-color: #f4f6fb;
}

/* =========================================================
   RESPONSIVE (SP)
========================================================= */

@media (max-width: 768px) {

    :root {
      --header-height: 64px;
    }
  
    .layout-container {
      padding: 0 16px;
    }
  
    .site-header {
      height: var(--header-height);
    }
    .site-header__logo {
      width: 154px;
    }
  
    .site-header__nav,
    .site-header__cta {
      display: none;
    }
  
    .site-header__toggle {
      display: block;
    }
  
    /* ================= MV（SP） ================= */
  
    .hero {
      background-image: url("../images/mv_bg_sp.png");
      background-size: cover;
      background-position: center top;
      padding-top: calc(var(--header-height) + 24px);
      padding-bottom: 32px;
      height: auto;              /* ← PC の 720px を打ち消す */
    }
  
    .hero__inner {
      position: relative;
      max-width: var(--container-width);
      margin: 0 auto;
      padding: 0 16px;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
  
    .hero__content {
      max-width: 100%;
    }
  
    .hero__title--pc {
      display: none;
    }
  
    .hero__title--sp {
      display: block;
      margin-bottom: 20px;
      margin-top: 0;
    }
  
    .hero__title-line {
      font-size: 22px;
      padding: 6px 10px;
    }
  
    .hero__lead {
      font-size: 14px;
      line-height: 1.7;
    }
  
    /* 画像はテキスト直下に来る・普通のフローで表示 */
  
    .hero__illustration {
        position: relative;
        z-index: 2;
        right: -16px;
        margin: 0 auto;
        transform: translateY(-80px);  /* ★ 赤枠分だけ上に持ち上げる */
    }

    .hero__illustration img {
      width: 100%;
      height: auto;
    }
  
    /* ================= CORPORATE（SP） ================= */
  
    .corporate {
      background-image: url("../images/corporate_bg_sp.png");
      background-size: cover;
      background-position: center top;
  
      /* ★ ここが “青背景を画像の途中から出す” 調整ポイント */
      margin-top: -240px;   /* まだ隙間があれば -260 などにしてさらに上へ */
      padding-top: 300px;   /* 上を食い込ませた分だけカードを下へ */
  
      padding-bottom: 96px;
    }
  
    .corporate__inner {
      padding: 0 16px;
    }
  
    .corporate__card {
      padding: 32px 20px 40px;
      margin-top: 0;
    }
  
    .corporate__heading {
      font-size: 26px;
      letter-spacing: 0.12em;
      text-align: center;
      margin-top: 32px;
      margin-bottom: 24px;
    }
  
    .corporate__heading-line {
      display: block;   /* SP では強制改行して 2 行に見せる */
    }
  
    .corporate__content {
      grid-template-columns: 1fr;
      row-gap: 24px;
    }
  
    .corporate__row {
      grid-template-columns: 1fr;
      row-gap: 4px;
      padding: 12px 0;
    }
  
    .corporate__label {
      font-size: 13px;
    }
  
    .corporate__value {
      font-size: 14px;
    }
  
    .corporate__image {
      max-width: 260px;
      margin: 0 auto;
    }
  }
  
  /* =========================================================
   COMMITMENT（修正版）
========================================================= */

/* --- PC --- */
.commitment {
    padding: 96px 0 140px; /* 上の余白を縮めた */
    background-color: #ffffff;
  }
  
  .commitment__inner {
    text-align: center;
  }
  
  .commitment__title {
    font-size: 48px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 0 0 32px;
    color: #111111;
  }
  
  .commitment__lead {
    max-width: 880px;
    margin: 0 auto 64px;  /* 余白詰め */
    font-size: 14px;
    line-height: 1.9;
    color: #555965;
  }
  
  .commitment__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 24px;    /* 横の間隔調整 */
    row-gap: 24px;
    max-width: 1120px;   /* グリッド幅調整でカード幅をカンプ寄せ */
    margin: 0 auto;
  }
  
  .commitment-card {
    background-color: #f3f6ff;
    padding: 40px 32px 36px; /* カードの高さをカンプ寄せ */
    text-align: center;
  }
  
  .commitment-card__icon {
    width: 40px;       /* ★ アイコンサイズ固定（PC） */
    margin: 0 auto 20px;
  }
  
  .commitment-card__icon img {
    width: 100%;
    height: auto;
  }
  
  .commitment-card__text {
    margin: 0;
    font-size: 16px;   /* 文字サイズ微調整 */
    line-height: 1.6;
    font-weight: 700;
    color: #111111;
  }
  
  /* --- CORPORATE OUTLINE（直前セクションの下余白調整）--- */
  .corporate {
    padding-bottom: 120px; /* 160 → 120 に調整 */
  }
  
  /* =========================================================
     SP（max-width: 768px）
  ========================================================= */
  @media (max-width: 768px) {
  
    .commitment {
      padding: 72px 0 80px; /* 上の余白をさらに調整 */
    }
  
    .commitment__title {
      font-size: 32px;
      letter-spacing: 0.12em;
      margin-bottom: 16px;
    }
  
    .commitment__lead {
      max-width: 100%;
      padding: 0 8px;
      margin-bottom: 32px;  /* リード余白縮小 */
      font-size: 13px;
      line-height: 1.9;
    }
  
    .commitment__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)); /* ★ SP は 3 → 2 列 */
      column-gap: 12px;
      row-gap: 12px;
    }
  
    .commitment-card {
      padding: 24px 12px 24px; /* カードの高さ調整 */
    }
  
    .commitment-card__icon {
      width: 32px; /* SP アイコン小さく */
      margin-bottom: 12px;
    }
  
    .commitment-card__text {
      font-size: 13px;
      line-height: 1.5;
    }
  }

  /* =========================================================
   SERVICES PC
========================================================= */

.services {
    position: relative;
    padding: 120px 0 220px; /* 下を厚めに取って、イラストが下セクションに被れるように */
    background-color: #0a3190;
    background-image: url("../images/service_bg.png");
    background-size: cover;
    background-position: center top;
    color: #ffffff;
    overflow: visible;
  }
  
  .services__inner {
    text-align: center;
  }
  
  .services__title {
    font-size: 40px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0 0 56px;
  }
  
  .services__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 32px;
    row-gap: 32px;
  }
  
  /* カード共通 */
  .service-card {
    background-color: #ffffff;
    color: #111111;
    box-shadow: 0 24px 40px rgba(0, 0, 0, 0.25);
  }
  
  .service-card__thumb img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
  }
  
  .service-card__body {
    padding: 20px 24px 18px;
    text-align: left;
  }
  
  .service-card__title {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
  }
  
  .service-card__text {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: #555965;
  }
  
  .service-card__footer {
    margin-top: 18px;
    display: flex;
    justify-content: flex-end;
  }
  
  .service-card__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    color: #0a3190;
  }
  
  .service-card__link-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid #0a3190;
    position: relative;
  }
  
  /* 丸の中に「＞」っぽい矢印を描く */
  .service-card__link-icon::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 50%;
    width: 5px;
    height: 5px;
    border-top: 1px solid #0a3190;
    border-right: 1px solid #0a3190;
    transform: translateY(-50%) rotate(45deg);
  }
  
  /* セクション右下のイラスト：service_img.png */
  .services__illustration {
    position: absolute;
    right: 5%;
    bottom: -140px;          /* 次セクションにかぶせる */
    width: 360px;
    max-width: 40%;
    pointer-events: none;
    z-index: 2;
  }
  
  .services__illustration img {
    width: 100%;
    height: auto;
    display: block;
  }
  
/* =========================================================
   SERVICES PC
========================================================= */

.services {
    position: relative;
    padding: 120px 0 240px;
    background-color: #0a3190;
    background-image: url("../images/service_bg.png");
    background-size: auto 420px;        /* 高さ 420px に固定 → キューブ小さめ */
    background-position: center bottom; /* 画面下側に寄せて配置 */
    background-repeat: repeat-x;        /* 横方向に必要ならリピート */
    color: #ffffff;
    overflow: visible;
  }

  .services__inner {
    text-align: center;
  }
  
  .services__title {
    font-size: 40px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0 0 56px;
  }
  
  /* PC は 2 列 */
  .services__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }
  
  /* カード */
  .service-card {
    background-color: #ffffff;
    color: #111111;
    box-shadow: 0 24px 40px rgba(0, 0, 0, 0.25);
  }
  
  .service-card__thumb img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
  }
  
  .service-card__body {
    padding: 20px 24px 18px;
    text-align: left;
  }
  
  .service-card__title {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
  }
  
  .service-card__text {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: #555965;
  }
  
  .service-card__footer {
    margin-top: 18px;
    display: flex;
    justify-content: flex-end;
  }
  
/* =========================================================
   SERVICES DETAIL ボタン調整
========================================================= */

/* テキスト：やや細め・文字間隔強め */
.service-card__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 600;              /* 700 → 600 程度に */
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-decoration: none;
    color: #0a3190;
  }
  
  /* 通常：青塗り＋白い矢印 */
  .service-card__link-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #0a3190;
    background-color: #0a3190;     /* 塗りつぶし */
    position: relative;
    transition: background-color 0.2s ease,
                border-color 0.2s ease;
  }
  
  /* 円の中央に「＞」を配置 */
  .service-card__link-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 46%;
    width: 7px;
    height: 7px;
    border-top: 2px solid #ffffff;  /* 通常は白矢印 */
    border-right: 2px solid #ffffff;
    transform: translate(-50%, -50%) rotate(45deg);
    transition: border-color 0.2s ease;
  }
  
  /* hover：白背景＋青枠＋青い矢印（カラー反転） */
  .service-card__link:hover .service-card__link-icon {
    background-color: #ffffff;
    border-color: #0a3190;
  }
  
  .service-card__link:hover .service-card__link-icon::after {
    border-color: #0a3190;
  }
  
  
  /* 右下イラスト */
  .services__illustration {
    position: absolute;
    right: 4%;
    bottom: -140px;
    width: 360px;
    max-width: 40%;
    pointer-events: none;
    z-index: 2;
  }
  
  .services__illustration img {
    width: 100%;
    height: auto;
  }
  
  /* =========================================================
     Responsive
  ========================================================= */
  
  /* SP（〜768px）：1列 */
  @media (max-width: 768px) {
  
    .services {
        padding: 80px 0 180px;
        background-size: auto 260px;      /* 高さを小さめにして密度調整 */
        background-position: center bottom;
    }
  
    .services__title {
      font-size: 30px;
      margin-bottom: 32px;
    }
  
    .services__grid {
      grid-template-columns: 1fr;
      gap: 20px;
    }
  
    .service-card__body {
      padding: 16px 14px 14px;
    }
  
    .service-card__title {
      font-size: 16px;
    }
  
    .service-card__text {
      font-size: 12px;
    }
  
    .services__illustration {
      width: 260px;
      right: -20px;
      bottom: -110px;
    }
  }
  
  /* =========================================================
   AIR & SEA FREIGHT FORWARDING  PC
========================================================= */

.airsea {
    background-color: #e6f1ff;        /* セクション全体の薄いブルー */
    padding: 120px 0 140px;
    text-align: center;
  }
  
  .airsea__inner {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 24px;
  }
  
  .airsea__header {
    margin-bottom: 56px;
  }
  
  /* タイトル共通 */
  .airsea__title {
    font-weight: 800;
    letter-spacing: 0.14em;
    color: #0a3190;
    margin: 0;
  }
  
  /* PC タイトル（1行〜2行） */
  .airsea__title--pc {
    font-size: 40px;
    line-height: 1.3;
  }
  
  /* SP 用タイトルは PC では非表示 */
  .airsea__title--sp {
    display: none;
  }
  
  /* map */
  .airsea__map {
    max-width: 1040px;
    margin: 0 auto 48px;
  }
  
  .airsea__map img {
    width: 100%;
    height: auto;
    display: block;
  }
  
  /* stats */
  .airsea__stats-wrap {
    display: inline-flex;
    align-items: center;
    gap: 32px;
    font-size: 14px;
    color: #0a3190;
  }
  
  .airsea__stats-label {
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  
  .airsea__stats-divider {
    width: 56px;
    height: 1px;
    background-color: #0a3190;
  }
  
  .airsea__stats {
    display: inline-flex;
    gap: 32px;
  }
  
  .airsea__stat {
    margin: 0;
    text-align: left;
  }
  
  .airsea__stat-num {
    margin: 0 0 2px;
    font-size: 24px;
    font-weight: 800;
  }
  
  .airsea__stat-label {
    margin: 0;
    font-size: 12px;
    letter-spacing: 0.08em;
  }
  
  /* =========================================================
     AIR & SEA  SP
  ========================================================= */
  
  @media (max-width: 768px) {
    .airsea {
      padding: 80px 0 96px;
    }
  
    .airsea__inner {
      padding: 0 16px;
    }
  
    .airsea__header {
      margin-bottom: 32px;
    }
  
    /* PC タイトルを隠して、SP 用 3 行タイトルを表示 */
    .airsea__title--pc {
      display: none;
    }
  
    .airsea__title--sp {
      display: block;
      font-size: 28px;
      line-height: 1.3;
    }
  
    .airsea__title-line {
      display: block;      /* 3 行強制改行 */
    }
  
    .airsea__map {
      margin-bottom: 32px;
    }
  
    .airsea__stats-wrap {
      flex-direction: column;
      align-items: center;
      gap: 16px;
      font-size: 13px;
    }
  
    .airsea__stats {
      gap: 20px;
    }
  
    .airsea__stat {
      text-align: center;
    }
  
    .airsea__stat-num {
      font-size: 20px;
    }
  
    .airsea__stat-label {
      font-size: 11px;
    }
  
    .airsea__stats-divider {
      width: 80px;
    }
  }
  .airsea__stat {
    text-align: center !important;   /* PC でも SP でも中央揃え */
  }
  
  .airsea__stats {
    justify-content: center;         /* 全体も中央寄せ */
  }

  /* =========================================================
   WAREHOUSE & DISTRIBUTION  PC
========================================================= */

.warehouse {
    position: relative;
    background-color: #c8d8ff; /* セクションの淡いブルー */
    padding: 120px 0 220px;
    overflow: visible;
  }
  
  .warehouse__inner {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 24px;
    text-align: center;
  }
  
  .warehouse__header {
    margin-bottom: 56px;
  }
  
  .warehouse__title {
    margin: 0 0 16px;
    font-size: 40px;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #0a3190;
  }
  
  .warehouse__lead {
    margin: 0;
    font-size: 16px;
    color: #111111;
  }
  
  .warehouse__map {
    max-width: 640px;
    margin: 0 auto 56px;
  }
  
  .warehouse__map img {
    width: 100%;
    height: auto;
    display: block;
  }
  
  /* 下部2カラム */
  
  .warehouse__bottom {
    display: flex;
    justify-content: center;
    gap: 72px;
  }
  
  .warehouse__column {
    flex: 0 0 260px;
    text-align: left;
    color: #0a3190;
  }
  
  .warehouse__column-title {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.08em;
  }
  
  .warehouse__title-br-sp {
    display: none;
  }
  
  .warehouse__column-divider {
    width: 100%;
    height: 2px;
    background-color: #0a3190;
    margin-bottom: 16px;
  }
  
  .warehouse__list {
    margin: 0 0 24px;
  }
  
  .warehouse__item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 16px;
    margin-bottom: 8px;
  }
  
  .warehouse__item:last-child {
    margin-bottom: 0;
  }
  
  .warehouse__city {
    margin: 0;
    font-weight: 700;
  }
  
  .warehouse__count {
    margin: 0;
    font-weight: 700;
  }
  
  /* MAPボタン */
  
  .warehouse__map-btn {
    width: 100%;
    padding: 14px 20px;
    border-radius: 8px;
    border: none;
    background-color: #0a3190;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
  }
  
  .warehouse__map-btn:hover {
    opacity: 0.9;
  }
  
  /* 左側のピンアイコン（疑似的に作成） */
  .warehouse__map-btn-icon {
    position: relative;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #ffffff;
  }
  
  .warehouse__map-btn-icon::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 50%;
    width: 6px;
    height: 8px;
    border-radius: 6px 6px 6px 6px;
    border: 2px solid #ffffff;
    border-bottom-left-radius: 50% 80%;
    border-bottom-right-radius: 50% 80%;
    transform: translateX(-50%);
  }
  
  /* 左下の飛行機イラスト（次セクションにかぶせる） */
  
  .warehouse__illustration {
    position: absolute;
    left: -40px;
    bottom: -160px;
    width: 360px;
    max-width: 45%;
    pointer-events: none;
    z-index: 2;
  }
  
  .warehouse__illustration img {
    width: 100%;
    height: auto;
    display: block;
  }
  
  /* =========================================================
     MAP MODAL
  ========================================================= */
  
  .map-modal {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 2000;
  }
  
  .map-modal.is-open {
    display: block;
  }
  
  .map-modal__overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
  }
  
  .map-modal__content {
    position: relative;
    max-width: 900px;
    width: calc(100% - 32px);
    margin: 80px auto;
    background-color: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  }
  
  .map-modal__body {
    padding: 16px;
  }
  
  /* 後で Google Map iframe に差し替え予定の領域 */
  .map-modal__placeholder {
    width: 100%;
    height: 480px;
    background-color: #e6f1ff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0a3190;
    font-size: 16px;
    font-weight: 600;
  }
  
  .map-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background-color: rgba(10, 49, 144, 0.9);
    cursor: pointer;
  }
  
  .map-modal__close-line {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 2px;
    background-color: #ffffff;
    border-radius: 999px;
  }
  
  .map-modal__close-line:first-child {
    transform: translate(-50%, -50%) rotate(45deg);
  }
  
  .map-modal__close-line:last-child {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  
  /* =========================================================
     WAREHOUSE & MODAL  SP
  ========================================================= */
  
  @media (max-width: 768px) {
    .warehouse {
      padding: 80px 0 180px;
    }
  
    .warehouse__inner {
      padding: 0 16px;
    }
  
    .warehouse__header {
      margin-bottom: 40px;
    }
  
    .warehouse__title {
      font-size: 32px;
    }
  
    .warehouse__lead {
      font-size: 14px;
    }
  
    .warehouse__map {
      max-width: 100%;
      margin-bottom: 40px;
    }
  
    .warehouse__bottom {
      gap: 32px;
    }
  
    .warehouse__column {
      flex: 1 1 0;
    }
  
    .warehouse__column-title {
      font-size: 18px;
    }
  
    .warehouse__item {
      font-size: 15px;
    }
  
    .warehouse__map-btn {
      font-size: 14px;
      padding: 12px 14px;
    }
  
    .warehouse__title-br-sp {
      display: inline;
    }
  
    .warehouse__illustration {
      width: 260px;
      left: -40px;
      bottom: -120px;
    }
  
    .map-modal__content {
      margin: 64px auto;
    }
  
    .map-modal__placeholder {
      height: 320px;
    }
  }
/* ==== Google Map iframe 用レイアウト ==== */

.map-modal__body {
    padding: 0; /* 余白はフレーム側で管理 */
  }
  
  .map-modal__frame {
    position: relative;
    width: 100%;
    /* アスペクト比 16:9 相当（必要なら高さはここで調整） */
    padding-top: 56.25%;
  }
  
  .map-modal__iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  
  /* SP でも同じ比率で表示 */
  @media (max-width: 768px) {
    .map-modal__content {
      margin: 56px auto;
      width: calc(100% - 24px);
    }
  }
  /* ==== WAREHOUSE MAP ボタン アイコン画像版 ==== */

.warehouse__map-btn {
    gap: 12px; /* テキストとの余白を少し広めに */
  }
  
  .warehouse__map-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
  }
  
  .warehouse__map-btn-icon img {
    display: block;
    width: 100%;
    height: auto;
  }
  
/* =========================================================
   WAREHOUSE & DISTRIBUTION 最終調整用オーバーライド
========================================================= */

/* セクション共通 */
.warehouse {
    position: relative;
    background-color: #c8d8ff;
    padding: 120px 0 220px;
    overflow: visible;
  }
  
  .warehouse__inner {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 24px;
    text-align: center;
  }
  
  .warehouse__header {
    margin-bottom: 56px;
  }
  
  .warehouse__title {
    margin: 0 0 16px;
    font-size: 40px;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #0a3190;
  }
  
  .warehouse__lead {
    margin: 0;
    font-size: 16px;
    color: #111111;
  }
  
  /* ★ PC 基本レイアウト：左カラム / 地図 / 右カラム */
  .warehouse__grid {
    display: grid;
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr) minmax(0, 280px);
    column-gap: 56px;
    align-items: flex-start;
  }
  
  /* 中央マップ */
  .warehouse__map {
    max-width: 520px;
    margin: 0 auto;
  }
  
  .warehouse__map img {
    width: 100%;
    height: auto;
    display: block;
  }
  
  /* 左右カラム共通 */
  .warehouse__column {
    text-align: left;
    color: #0a3190;
    margin-top: 0; /* 個別で調整するのでリセット */
  }
  
  .warehouse__column-title {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.08em;
  }
  
  .warehouse__title-br-sp {
    display: none;
  }
  
  .warehouse__column-divider {
    width: 100%;
    height: 2px;
    background-color: #0a3190;
    margin-bottom: 16px;
  }
  
  .warehouse__list {
    margin: 0 0 24px;
  }
  
  .warehouse__item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 15px;
    margin-bottom: 6px;
  }
  
  .warehouse__item:last-child {
    margin-bottom: 0;
  }
  
  .warehouse__city,
  .warehouse__count {
    margin: 0;
    font-weight: 700;
  }
  
  /* ★ map アイコンを 10px に固定（画像のみ） */
  .warehouse__map-btn {
    width: 100%;
    padding: 14px 20px;
    border-radius: 8px;
    border: none;
    background-color: #0a3190;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
  }
  
  .warehouse__map-btn:hover {
    opacity: 0.9;
  }
  
  .warehouse__map-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 10px;
    height: 10px;
    background: none !important;
    border: none !important;
    padding: 0;
  }
  
  .warehouse__map-btn-icon::before,
  .warehouse__map-btn-icon::after {
    content: none !important;
  }
  
  .warehouse__map-btn-icon img {
    width: 100%;
    height: auto;
    display: block;
  }
  
  /* 左下イラスト */
  .warehouse__illustration {
    position: absolute;
    left: -40px;
    bottom: -160px;
    width: 360px;
    max-width: 45%;
    pointer-events: none;
    z-index: 2;
  }
  
  .warehouse__illustration img {
    width: 100%;
    height: auto;
  }
  
  /* ---------- PC 専用微調整：左右のスタート位置をずらす ---------- */
  @media (min-width: 769px) {
    /* 左はやや上から、右は少し下からスタート（赤線イメージ） */
    .warehouse__column--west {
      margin-top: 40px;
    }
  
    .warehouse__column--east {
      margin-top: 120px;
    }
  }
  
  /* ---------- SP レイアウト（warehouse&distribution_sp.png に合わせる） ---------- */
  @media (max-width: 768px) {
    .warehouse {
      padding: 80px 0 180px;
    }
  
    .warehouse__inner {
      padding: 0 16px;
    }
  
    .warehouse__header {
      margin-bottom: 40px;
    }
  
    .warehouse__title {
      font-size: 32px;
    }
  
    .warehouse__lead {
      font-size: 14px;
    }
  
    /* 上：地図が 1 カラムで全面、下：左右 2 カラム */
    .warehouse__grid {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto auto;
      row-gap: 32px;
    }
  
    .warehouse__map {
      grid-column: 1 / 3;
      max-width: 100%;
      margin: 0 auto;
    }
  
    .warehouse__column--west,
    .warehouse__column--east {
      margin-top: 0;
    }
  
    .warehouse__column-title {
      font-size: 18px;
    }
  
    .warehouse__item {
      font-size: 15px;
    }
  
    .warehouse__map-btn {
      font-size: 14px;
      padding: 12px 10px;
    }
  
    .warehouse__title-br-sp {
      display: inline;
    }
  
    .warehouse__illustration {
      width: 260px;
      left: -40px;
      bottom: -120px;
    }
  }
  
/* ===== MAP モーダル：中央配置＋高さ確保 ===== */

.map-modal {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 2000;
  }
  
  .map-modal.is-open {
    display: flex;
    align-items: center;       /* 天地センター */
    justify-content: center;   /* 左右センター */
  }
  
  .map-modal__overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
  }
  
  .map-modal__content {
    position: relative;
    max-width: 900px;
    width: calc(100% - 32px);
    max-height: 90vh;
    background-color: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    z-index: 1;
    display: flex;
    flex-direction: column;
  }
  
  /* iframe をシンプルに 60vh の高さで表示 */
  .map-modal__body {
    padding: 0;
  }
  
  .map-modal__frame {
    width: 100%;
    height: 60vh;
  }
  
  .map-modal__iframe {
    width: 100%;
    height: 100%;
    border: 0;
  }
  
  /* 閉じるボタンを常に前面に */
  .map-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background-color: rgba(10, 49, 144, 0.9);
    cursor: pointer;
    z-index: 3;
  }
  
  .map-modal__close-line {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 2px;
    background-color: #ffffff;
    border-radius: 999px;
  }
  
  .map-modal__close-line:first-child {
    transform: translate(-50%, -50%) rotate(45deg);
  }
  
  .map-modal__close-line:last-child {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  
  @media (max-width: 768px) {
    .map-modal__content {
      width: calc(100% - 24px);
    }
  
    .map-modal__frame {
      height: 55vh; /* ちょっと低めにして SP でも見やすく */
    }
  }
  
/* ===== WAREHOUSE SP レイアウト上書き ===== */
@media (max-width: 768px) {
    /* セクションの余白はそのまま or お好みで */
    .warehouse {
      padding: 80px 0 180px;
    }
  
    .warehouse__inner {
      padding: 0 16px;
    }
  
    .warehouse__header {
      margin-bottom: 40px;
    }
  
    .warehouse__title {
      font-size: 32px;
    }
  
    .warehouse__lead {
      font-size: 14px;
    }
  
    /* ★ 上段：地図が全面、下段：左右２カラム */
    .warehouse__grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto auto; /* 1行目 = map / 2行目 = west & east */
      column-gap: 32px;
      row-gap: 32px;
      align-items: flex-start;
    }
  
    /* map は 1 行目で 2 カラムぶち抜き */
    .warehouse__map {
      grid-column: 1 / 3;
      grid-row: 1;
      max-width: 100%;
      margin: 0 auto;
    }
  
    /* 左右のカラムは 2 行目で左右に並ぶ */
    .warehouse__column--west {
      grid-column: 1 / 2;
      grid-row: 2;
      margin-top: 0;
    }
  
    .warehouse__column--east {
      grid-column: 2 / 3;
      grid-row: 2;
      margin-top: 0;
    }
  
    .warehouse__column-title {
      font-size: 18px;
    }
  
    .warehouse__item {
      font-size: 15px;
    }
  
    .warehouse__map-btn {
      font-size: 14px;
      padding: 12px 10px;
    }
  
    .warehouse__title-br-sp {
      display: inline;
    }
  
    /* 下のイラスト位置だけ少し持ち上げ */
    .warehouse__illustration {
      width: 260px;
      left: -40px;
      bottom: -120px;
    }
  }
/* =========================================
   Air & Sea : 左下の固定イラスト(map_img.png)
   （添付スクショの位置に近づける）
========================================= */

.airsea {
    position: relative;
    overflow: visible; /* 次セクションにかぶせるため */
  }
  
  .airsea__illustration {
    position: absolute;
    left: -40px;       /* かぶり具合はここで微調整可 */
    bottom: -160px;    /* Domestic に少しかぶるように */
    width: 340px;
    max-width: 45%;
    pointer-events: none;
    z-index: 2;
  }
  
  .airsea__illustration img {
    display: block;
    width: 100%;
    height: auto;
  }
  
  /* SP レイアウト用（warehouse&distribution_sp.png に合わせて少し小さめ） */
  @media (max-width: 768px) {
    .airsea__illustration {
      left: -32px;
      bottom: -120px;
      width: 260px;
      max-width: 60%;
    }
  }
/* =========================================================
   SERVICES：右下イラスト（service_img.png）
   → PC/SPともにもっと下へ配置する
========================================================= */

.services {
    position: relative;
    overflow: visible;
  }
  
  .services__illustration {
    position: absolute;
    right: 24px;
    bottom: -80px;     /* ★ さらに下へ移動（重要） */
    width: 220px;       /* サイズは同じ */
    z-index: 2;
    pointer-events: none;
  }
  
  .services__illustration img {
    width: 100%;
    height: auto;
  }
  
  /* SP */
  @media (max-width: 768px) {
    .services__illustration {
      right: 12px;
      bottom: -50px;    /* ★ SPも下方向へ移動 */
      width: 150px;
    }
  }
  
/* =========================================================
   AIR & SEA：左下イラスト（map_img.png）
========================================================= */

.airsea {
    position: relative;
    overflow: visible;
  }
  
  .airsea__illustration {
    position: absolute;
    left: 24px;       /* ← マイナス値をやめて内側に */
    bottom: -80px;    /* 次のセクションに少しかぶせる程度 */
    width: 260px;     /* PC用サイズ */
    z-index: 2;
    pointer-events: none;
  }
  
  .airsea__illustration img {
    width: 100%;
    height: auto;
  }
  
  /* SP */
  @media (max-width: 768px) {
    .airsea__illustration {
      left: 12px;
      bottom: -60px;
      width: 170px;   /* SP用にさらに縮小 */
    }
  }
  
  
/* =========================================================
   DOMESTIC TRANSPORTATION
========================================================= */

.domestic {
    padding: 96px 0;
  }
  
  .domestic__inner {
    max-width: 1100px;
    margin: 0 auto;
  }
  
  .domestic__header {
    text-align: center;
    margin-bottom: 32px;
  }
  
  .domestic__title {
    font-size: 36px;
    line-height: 1.3;
    font-weight: 700;
    color: #111111;
    margin: 0 0 12px;
  }
  
  .domestic__lead {
    font-size: 13px;
    line-height: 1.7;
    color: #555555;
    margin: 0;
  }
  
  /* ---------- メイン白カード ---------- */
  
  .domestic__card {
    background-color: #ffffff;
    box-shadow: 0 18px 40px rgba(17, 40, 83, 0.12);
    padding: 48px 56px 40px;
  }
  
  /* =================================================
     上段 3 カラム
  ================================================= */
  
  .domestic__flow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 80px;          /* ★ 左右カラムの間隔を広げる */
    align-items: flex-start;
  }
  
  .domestic-block__title {
    font-size: 15px;
    line-height: 1.5;
    font-weight: 700;
    color: #0046ad;
    text-align: center;
    margin: 0 0 20px;
  }
  
  /* =================================================
     リスト共通（ボックス）
  ================================================= */
  
  .domestic-list {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
  }
  
  .domestic-item {
    position: relative;
    border: 2px solid #0046ad;
    border-radius: 6px;
    background-color: #ffffff;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    font-size: 13px;
    line-height: 1.5;
    color: #002057;
    margin-bottom: 8px;
  }
  
  .domestic-item:last-child {
    margin-bottom: 0;
  }
  
  /* =================================================
     左列 A〜D
  ================================================= */
  
  .domestic-list--customers .domestic-item__label {
    width: 40px;
    text-align: left;
    font-weight: 700;
    padding-left: 6px;
    padding-right: 10px;
    border-right: 1px solid #0046ad;
  }
  
  .domestic-list--customers .domestic-item__text {
    padding-left: 14px;
    text-align: left;
  }
  
  /* A〜D 横棒（右側・枠には食い込まない） */
  .domestic-list--customers .domestic-item::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    width: 18px;
    height: 2px;
    background: #0046ad;
    transform: translateY(-50%);
  }
  
  /* A〜D 縦棒：横棒の端とピタッと接続・一本だけ */
  .domestic-list--customers::after {
    content: "";
    position: absolute;
    left: calc(100% + 18px);
    top: 26px;
    bottom: 26px;
    width: 2px;
    background: #0046ad;
  }
  
  /* =================================================
     中央列 Tokyo 〜 Network
  ================================================= */
  
  .domestic-list--centers .domestic-item {
    justify-content: center;
    font-weight: 600;
  }
  
  /* 中央列 横棒（左側） */
  .domestic-list--centers .domestic-item::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    width: 18px;
    height: 2px;
    background: #0046ad;
    transform: translateY(-50%);
  }
  
  /* 中央列 縦棒：こちらも一本だけで横線と接続 */
  .domestic-list--centers::before {
    content: "";
    position: absolute;
    right: calc(100% + 18px);
    top: 26px;
    bottom: 26px;
    width: 2px;
    background: #0046ad;
  }
  
  /* =================================================
     右列 Prefectures
  ================================================= */
  
  .domestic-pref {
    background-color: #e4edff;
    border-radius: 10px;
    padding: 24px 22px;
  }
  
  .domestic-pref__row {
    border-radius: 6px;
    background-color: #ffffff;
    border: 1px solid #aac1ec;
    padding: 12px;
    font-size: 13px;
    line-height: 1.5;
    color: #002057;
    text-align: center;
    margin-bottom: 10px;
  }
  
  .domestic-pref__row:last-child {
    margin-bottom: 0;
  }
  
  /* =================================================
     中央の青い丸矢印
  ================================================= */
  
  /* flow と同じくらいの幅で、左右のカラム間に 1 個ずつ来るように */
  .domestic__arrows {
    display: flex;
    justify-content: space-between; /* ★ 左右の矢印を列の間に配置 */
    max-width: 640px;              /* ★ カード幅より少し狭めに */
    margin: 32px auto 32px;        /* ★ 上下中央付近に来るように */
  }
  
  .domestic__arrow {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #0046ad;
    position: relative;
  }
  
  /* 真ん中の「＞」 右向き＆天地センター */
  .domestic__arrow::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 22px;
    border-top: 4px solid #ffffff;
    border-right: 4px solid #ffffff;
    transform: translate(-50%, -50%) rotate(45deg);
  }
  
/* =================================================
   下段グレー帯（2 カラム）
================================================= */

/* =================================================
   下段 グレー帯 2 カラム（左右分離・間に余白）
================================================= */

.domestic-notes {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 左右等幅 */
  gap: 32px;                 /* ★ ここで真ん中の余白（隙間）を作ります */
  margin-top: 40px;
  background: none;          /* 親要素の背景はなし */
  padding: 0;                /* 親要素の余白もなし */
}

/* 各ボックス（背景色をつけるのはここ） */
.domestic-note {
  background-color: #f9f9f9; /* 薄いグレーの背景 */
  padding: 40px 48px;        /* ボックス内の余白 */
  border-radius: 4px;        /* 角丸 */
  display: flex;             /* 中身の配置用 */
  flex-direction: column;
  justify-content: center;   /* タテ方向中央揃え */
}

.domestic-note__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: #111111;
  margin: 0;                 /* 余計なマージン削除（必要なら下に追加） */
}

/* 右側のリストがある場合のマージン調整 */
.domestic-note:last-child .domestic-note__title {
  margin-bottom: 16px;
}

.domestic-note__list {
  margin: 0;
  padding-left: 24px;
  line-height: 1.7;
  font-size: 14px;
  color: #333333;
}

/* SP時は縦積み */
@media (max-width: 768px) {
  .domestic-notes {
    grid-template-columns: 1fr;
    gap: 20px;       /* 縦積み時の隙間 */
    margin-top: 32px;
  }

  .domestic-note {
    padding: 32px 24px;
  }

  .domestic-note__title {
    font-size: 16px;
  }
}

  
  /* =================================================
     SP レスポンシブ（DOMESTIC & CUSTOMS）
  ================================================= */
  
  @media (max-width: 768px) {
    .domestic {
      padding: 64px 0;
    }
  
    .domestic__card {
      padding: 32px 20px 28px;
    }
  
    .domestic__flow {
      grid-template-columns: 1fr;
      column-gap: 0;
      row-gap: 32px;
    }
  
    .domestic__arrows {
      flex-direction: column;
      max-width: 200px;
      gap: 20px;
      margin: 24px auto 24px;
    }
  
    .domestic-notes {
      grid-template-columns: 1fr;
    }
  
    .domestic-note + .domestic-note {
      border-left: none;
    }
  
    .customs__card {
      padding: 32px 20px 32px;
    }
  
    .customs__features {
      grid-template-columns: 1fr;
    }
  
    .customs__details {
      grid-template-columns: 1fr;
    }
  }
  /* === DOMESTIC：縦線と横線を完全に接続（0px隙間） === */

/* ▼ 左カラム（A〜D） --------------------------------------- */

/* 横線（A〜D の右）を縦線に届かせる */
.domestic-list--customers .domestic-item::after {
    width: 22px; /* 横線をさらに+2px延ばす */
  }
  
  /* 縦線の位置を横線側に食い込ませる（マイナス方向へ寄せる） */
  .domestic-list--customers::after {
    left: calc(100% + 18px); /* ← さらに -2px 近づけて “完全密着” */
  }
  
  
  /* ▼ 中央カラム（Tokyo〜Network） ----------------------------- */
  
  /* 横線（東京などの左）を縦線に届かせる */
  .domestic-list--centers .domestic-item::after {
    width: 22px; /* 同じく少し延長 */
  }
  
  /* 縦線の位置：こちらも横線側へ押し込む */
  .domestic-list--centers::before {
    right: calc(100% + 18px);
  }
  /* ===== DOMESTIC：縦線 高さの最終調整 ===== */

/* 左カラム A〜D 縦線：上下を +2px だけ延長 */
.domestic-list--customers::after {
    top: 24px;     /* 26px → 24px */
    bottom: 33px;  /* 26px → 24px */
  }
  
  /* 中央カラム Tokyo〜Network 縦線：同じく +2px 延長 */
  .domestic-list--centers::before {
    top: 24px;     /* 26px → 24px */
    bottom: 24px;  /* 26px → 24px */
  }
  
  /* ----------------------------------------------
   Domestic：中央の青い矢印ボタン（＞）
---------------------------------------------- */

/* ===== DOMESTIC：中央の青い丸矢印（MVと同じテイスト） ===== */

.domestic__card {
    position: relative; /* ★ 矢印の基準にする */
  }
  
/* ----------------------------------------------
   Domestic：中央の矢印ボタン（デザイン準拠）
---------------------------------------------- */

/* 矢印をカードの上に重ねるため */
.domestic__card {
    position: relative;
  }
  
/* =========================================================
   DOMESTIC – 中央の丸い「＞」矢印
========================================================= */

/* 上段3カラム */
.domestic__flow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 100px;
    align-items: flex-start;
    position: relative; /* ★ 矢印の絶対配置の基準にする */
  }
  
/* ===== DOMESTIC：中央の丸い「＞」矢印（PC） ===== */

/* いったん既存の .domestic__arrows / .domestic__arrow 定義はこのブロックで上書き */

.domestic__arrows {
    position: absolute;
    top: 30%;                /* 上段3カラムのちょうど中央 */
    left: 14%;
    width: 100%;
    transform: translateY(-50%);
    pointer-events: none;
  }
  
  /* 左右の座標：3カラムの「間」の中央に来るよう微調整 */
  .domestic__arrow {
    position: absolute;
    width: 30px;             /* カンプと同じ直径 */
    height: 30px;
    border-radius: 50%;
    background: #0046af;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .domestic__arrow--left {
    left: calc(33.333% - 23px); /* 3カラム中、左と中央の間の中心 − 半径 */
  }
  
  .domestic__arrow--right {
    left: calc(66.666% + 110px); /* 中央と右の間の中心 − 半径 */
  }
  
  /* 中の「＞」は枠に対してちょうど真ん中に */
  .domestic__arrow::before {
    content: "";
    width: 10px;
    height: 10px;
    border-top: 3px solid #ffffff;
    border-right: 3px solid #ffffff;
    transform: rotate(45deg);
    margin-left: -6px; /* ほんの少し右寄せしてカンプ寄せ */
    margin-top: -5px;
  }

  @media (max-width: 768px) {
    .domestic__arrows {
      position: static;
      transform: none;
      width: auto;
      margin: 24px auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
    }
  
    .domestic__arrow {
      position: static;
    }
  }
   
      

/* =========================================================
   DOMESTIC – connector & arrow responsive overrides
   （どのウィンドウ幅でもレイアウトが崩れないように調整）
========================================================= */

/* ---- 左カラム A〜D：横線と縦線 ---- */

/* 横線：カード右端から一定長さだけ伸ばす */
.domestic-list--customers .domestic-item::after {
  left: 100%;
  width: 18px;
}

/* 縦線：リスト全体の上から下までをカバー（高さ固定にしない） */
.domestic-list--customers::after {
  top: 0;
  bottom: 0;
  left: calc(100% + 18px);
}

/* ---- 中央カラム Tokyo〜Network：横線と縦線 ---- */

.domestic-list--centers .domestic-item::after {
  right: 100%;
  width: 18px;
}

.domestic-list--centers::before {
  top: 0;
  bottom: 0;
  right: calc(100% + 18px);
}

/* ---- 中央の丸い「＞」矢印（PC幅） ---- */

/* 上段3カラムを基準に絶対配置。高さも常に中央に来るようにする */
.domestic__flow {
  position: relative;
}

.domestic__arrows {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  pointer-events: none;
}

.domestic__arrow {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #0046af;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 左矢印：1/3 の位置（左と中央カラムのちょうど間） */
.domestic__arrow--left {
  top: 50%;
  left: 33.333%;
  transform: translate(-50%, -50%);
}

/* 右矢印：2/3 の位置（中央と右カラムのちょうど間） */
.domestic__arrow--right {
  top: 50%;
  left: 66.666%;
  transform: translate(-50%, -50%);
}

/* 矢印の「＞」 */
.domestic__arrow::before {
  content: "";
  width: 10px;
  height: 10px;
  border-top: 3px solid #ffffff;
  border-right: 3px solid #ffffff;
  transform: rotate(45deg);
}

/* ---- SP幅（〜768px）：従来どおり下に2つ縦並びで表示 ---- */
@media (max-width: 768px) {
  .domestic__arrows {
    position: static;
    transform: none;
    width: auto;
    margin: 24px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    pointer-events: auto;
  }

  .domestic__arrow {
    position: static;
  }
}


/* =========================================================
   DOMESTIC TRANSPORTATION – FINAL PC FIX
   （可変高さでも線と矢印が崩れないように調整）
========================================================= */
@media (min-width: 769px) {

  /* 3カラムレイアウトを維持 */
  .domestic__flow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 80px;
    align-items: flex-start;
    position: relative;
  }

  /* 既存の丸矢印コンテナは PC では使わない */
  .domestic__arrows {
    display: none;
  }

  /* 横線：カードの高さが変わっても OK なように単純な長さに */
  .domestic-list--customers .domestic-item::after,
  .domestic-list--centers .domestic-item::after {
    width: 18px;
  }

  /* 縦線：リスト全体の上から下までを素直に結ぶ */
  .domestic-list--customers::after,
  .domestic-list--centers::before {
    content: "";
    position: absolute;
    top: 24px;
    bottom: 24px;
    width: 2px;
    background: #0046ad;
  }

  .domestic-list--customers {
    position: relative;
  }

  .domestic-list--customers::after {
    left: calc(100% + 18px);
  }

  .domestic-list--centers {
    position: relative;
  }

  .domestic-list--centers::before {
    right: calc(100% + 18px);
  }

  /* 丸矢印を縦線の中央に結ぶ */
  .domestic-list--customers::before,
  .domestic-list--centers::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    border-radius: 50%;
    background: #0046ad;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
  }

  /* 左側（A〜D → 中央） */
  .domestic-list--customers::before {
    left: calc(100% + 18px - 15px);
  }

  /* 右側（中央 → Prefectures） */
  .domestic-list--centers::after {
    right: calc(100% + 18px - 15px);
  }

  /* 中の「＞」マーク */
  .domestic-list--customers::before,
  .domestic-list--centers::after {
    display: flex;
    align-items: center;
    justify-content: center;
  }

}

/* SP 側では擬似要素の矢印は消して、従来の .domestic__arrows を使用 */
@media (max-width: 768px) {
  .domestic-list--customers::before,
  .domestic-list--centers::after {
    content: none;
  }

  .domestic__arrows {
    display: flex;
  }
}


/* =========================================================
   DOMESTIC: tree connectors & arrow re‑layout (final)
   - Make vertical lines follow card height
   - Keep layout stable at any width
========================================================= */

/* --- Common list base (left & center columns) --- */
.domestic-list--customers,
.domestic-list--centers {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Each row in the tree */
.domestic-item {
  position: relative;
  padding-right: 40px; /* space for right-side connector (left col) */
  margin-bottom: 8px;  /* this value is used in calc() below */
}

/* Last item: no extra gap */
.domestic-item:last-child {
  margin-bottom: 0;
}

/* ===== Left column (A–D) connectors ===== */

.domestic-list--customers .domestic-item::before,
.domestic-list--customers .domestic-item::after {
  content: "";
  position: absolute;
  background-color: #0046ad;
}

/* Horizontal line: card edge → vertical line */
.domestic-list--customers .domestic-item::before {
  height: 2px;
  width: 18px;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
}

/* Vertical segment for each item (default: middle items) */
.domestic-list--customers .domestic-item::after {
  width: 2px;
  left: calc(100% + 18px);
  top: 0;
  height: calc(100% + 8px); /* 8px = margin-bottom of .domestic-item */
}

/* First item: vertical line from its middle downward */
.domestic-list--customers .domestic-item:first-child::after {
  top: 50%;
  height: calc(50% + 8px);
}

/* Last item: vertical line from above to its middle */
.domestic-list--customers .domestic-item:last-child::after {
  top: auto;
  bottom: 50%;
  height: calc(50% + 8px);
}

/* Single item case: hide vertical line */
.domestic-list--customers .domestic-item:only-child::after {
  display: none;
}

/* ===== Center column (Tokyo–Network) connectors ===== */

.domestic-list--centers .domestic-item {
  padding-left: 40px;   /* space for left-side connector */
  padding-right: 0;
}

.domestic-list--centers .domestic-item::before,
.domestic-list--centers .domestic-item::after {
  content: "";
  position: absolute;
  background-color: #0046ad;
}

/* Horizontal line: vertical line → card edge (to the right) */
.domestic-list--centers .domestic-item::before {
  height: 2px;
  width: 18px;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
}

/* Vertical segment (default: middle items) */
.domestic-list--centers .domestic-item::after {
  width: 2px;
  right: calc(100% + 18px);
  top: 0;
  height: calc(100% + 8px);
}

/* First item: from middle downward */
.domestic-list--centers .domestic-item:first-child::after {
  top: 50%;
  height: calc(50% + 8px);
}

/* Last item: from above to middle */
.domestic-list--centers .domestic-item:last-child::after {
  top: auto;
  bottom: 50%;
  height: calc(50% + 8px);
}

/* Single item */
.domestic-list--centers .domestic-item:only-child::after {
  display: none;
}

/* ===== Arrows between columns – simple, fluid layout ===== */

.domestic__flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 80px;
  align-items: flex-start;
}

/* Two arrow buttons between the 3 columns */
.domestic__arrows {
  margin: 32px auto;
  max-width: 640px;
  display: flex;
  justify-content: space-between;
}

.domestic__arrow {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #0046ad;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}

.domestic__arrow::before {
  content: "";
  width: 14px;
  height: 14px;
  border-top: 3px solid #ffffff;
  border-right: 3px solid #ffffff;
  transform: rotate(45deg);
}

/* On SP, the arrows simply stack between blocks */
@media (max-width: 768px) {
  .domestic__flow {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }

  .domestic__arrows {
    max-width: 200px;
    flex-direction: column;
    gap: 20px;
  }
}


/* =========================================================
   DOMESTIC TRANSPORTATION – tree layout rebuild (Gemini‑based)
   ※ 左「customers」と中央「centers」の縦線・横線を
     カードの高さに追従するように全面作り直し
========================================================= */

/* 旧レイアウト用の ::before / ::after は無効化 */
.domestic-list--customers::before,
.domestic-list--customers::after,
.domestic-list--centers::before,
.domestic-list--centers::after {
  content: none !important;
}

/* 共通：リスト自体 */
.domestic-list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

/* 共通：行（カードの外側コンテナ） */
.domestic-list--customers .domestic-item,
.domestic-list--centers .domestic-item {
  position: relative;
  margin-bottom: 16px;          /* 行間＝縦線の継ぎ目計算に使用 */
  padding: 0;                   /* 実際の余白は内側要素で管理 */
}

/* 最後の行だけ余白なし */
.domestic-list--customers .domestic-item:last-child,
.domestic-list--centers .domestic-item:last-child {
  margin-bottom: 0;
}

/* カード本体（左・中央共通） */
.domestic-item {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border: 2px solid #0046ad;
  border-radius: 6px;
  padding: 12px 20px;
  box-sizing: border-box;
  z-index: 1;                   /* 線より手前に出す */
}

/* ラベル A/B/C/D */
.domestic-item__label {
  font-size: 14px;
  font-weight: 800;
  color: #0046ad;
  min-width: 28px;
  text-align: center;
}

/* 区切りの縦線 */
.domestic-item__divider {
  width: 2px;
  height: 24px;
  background-color: #0046ad;
  margin: 0 18px;
}

/* テキスト */
.domestic-item__text {
  font-size: 14px;
  font-weight: 700;
  color: #002057;
  line-height: 1.4;
}

/* ---------------------------------------------------------
   左列：Distribution centers of customers
   （右側に縦線＋各カードから右へ水平線）
--------------------------------------------------------- */

.domestic-list--customers .domestic-item {
  padding-right: 32px;    /* 右側の線用スペース */
}

/* 共通：右に伸びる水平線 ＋ 右側の縦線 */
.domestic-list--customers .domestic-item::before,
.domestic-list--customers .domestic-item::after {
  content: "";
  position: absolute;
  background-color: #0046ad;
}

/* 水平線（カード中央 → 右） */
.domestic-list--customers .domestic-item::before {
  height: 2px;
  width: 24px;
  top: 50%;
  right: -24px;
  transform: translateY(-50%);
}

/* 縦線（右端に一本） */
.domestic-list--customers .domestic-item::after {
  width: 2px;
  right: -24px;
  top: 0;
  height: calc(100% + 16px);  /* 自分の高さ＋行間（margin-bottom） */
}

/* 最上段：縦線は中央から下だけ */
.domestic-list--customers .domestic-item:first-child::after {
  top: 50%;
  height: calc(50% + 16px);
}

/* 最下段：縦線は中央から上だけ */
.domestic-list--customers .domestic-item:last-child::after {
  top: auto;
  bottom: 50%;
  height: calc(50% + 16px);
}

/* 要素が1つだけなら縦線は不要 */
.domestic-list--customers .domestic-item:only-child::after {
  display: none;
}

/* ---------------------------------------------------------
   中央列：co‑load delivery centers
   （左側に縦線＋各カードから左へ水平線）
--------------------------------------------------------- */

.domestic-list--centers .domestic-item {
  padding-left: 32px;     /* 左側の線用スペース */
}

/* 共通：左に伸びる水平線 ＋ 左側の縦線 */
.domestic-list--centers .domestic-item::before,
.domestic-list--centers .domestic-item::after {
  content: "";
  position: absolute;
  background-color: #0046ad;
}

/* 水平線（左へ） */
.domestic-list--centers .domestic-item::before {
  height: 2px;
  width: 24px;
  top: 50%;
  left: -24px;
  transform: translateY(-50%);
}

/* 縦線（左端に一本） */
.domestic-list--centers .domestic-item::after {
  width: 2px;
  left: -24px;
  top: 0;
  height: calc(100% + 16px);
}

/* 最上段：中央から下だけ */
.domestic-list--centers .domestic-item:first-child::after {
  top: 50%;
  height: calc(50% + 16px);
}

/* 最下段：中央から上だけ */
.domestic-list--centers .domestic-item:last-child::after {
  top: auto;
  bottom: 50%;
  height: calc(50% + 16px);
}

/* 要素が1つだけなら縦線は不要 */
.domestic-list--centers .domestic-item:only-child::after {
  display: none;
}

/* ---------------------------------------------------------
   スマホ幅（〜768px）
   → テキストサイズなどだけ微調整
--------------------------------------------------------- */

@media (max-width: 768px) {
  .domestic-item {
    padding: 10px 14px;
  }

  .domestic-item__label {
    font-size: 13px;
    min-width: 24px;
  }

  .domestic-item__text {
    font-size: 13px;
  }

  .domestic-item__divider {
    margin: 0 12px;
  }
}

/* =========================================================
   DOMESTIC TREE CHART (Fixed)
   Prefix: .dt-
========================================================= */

/* --- 1. グリッドレイアウト（大枠） --- */
.domestic__flow-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr; /* PC: 3カラム + 矢印 */
  align-items: center; /* 垂直方向中央揃え */
  gap: 0;
  width: 100%;
  margin-bottom: 32px;
}

/* --- 2. 各カラムの設定 --- */
.dt-col {
  width: 100%;
  position: relative;
}

/* カラムごとのタイトル */
.dt-col__title {
  font-size: 1.5rem; /* 既存サイトのバランスに合わせて調整 */
  line-height: 1.4;
  font-weight: 700;
  color: #0046ad;
  text-align: center;
  min-height: 44px; /* タイトルの高さ揃え */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin: 0 0 24px;
}

/* --- 3. 矢印エリア (カラムの間) --- */
.dt-arrow-area {
  display: flex;
  justify-content: center;
  width: 60px; /* 矢印エリアの幅 */
  padding-top: 60px; /* タイトルの分だけ下にずらす */
}

.dt-arrow {
  width: 32px;
  height: 32px;
  background-color: #0046ad;
  border-radius: 50%;
  position: relative;
}

.dt-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translate(-60%, -50%) rotate(45deg);
}

/* --- 4. ツリーリスト（ul/li） --- */
.dt-tree {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dt-tree__item {
  position: relative;
  margin-bottom: 12px;
}

.dt-tree__item:last-child {
  margin-bottom: 0;
}

/* --- 5. カードのデザイン --- */
.dt-card {
  display: flex;
  align-items: center;
  background: #fff;
  border: 2px solid #0046ad;
  border-radius: 6px;
  padding: 12px 14px;
  box-sizing: border-box;
  position: relative;
  z-index: 2; /* 線の上に表示 */
  min-height: 54px;
}

.dt-card--center {
  justify-content: center;
  text-align: center;
}

.dt-card__label {
  font-weight: 800;
  color: #0046ad;
  font-size: 16px;
  min-width: 24px;
  text-align: center;
}

.dt-card__sep {
  width: 1px;
  height: 20px;
  background-color: #0046ad;
  margin: 0 12px;
}

.dt-card__text {
  font-weight: 700;
  color: #002057;
  font-size: 13px;
  line-height: 1.3;
}

/* --- 6. 線の描画 (PCのみ) --- */

/* 線のベース */
.dt-tree--right .dt-tree__item::before,
.dt-tree--right .dt-tree__item::after,
.dt-tree--left .dt-tree__item::before,
.dt-tree--left .dt-tree__item::after {
  content: '';
  position: absolute;
  background-color: #0046ad;
}

/* === パターンA: 右へ繋ぐ (左側のカラム) === */
.dt-tree--right .dt-tree__item {
  padding-right: 30px; /* 右側に線のスペース */
}
/* 横線 */
.dt-tree--right .dt-tree__item::before {
  height: 2px; width: 30px;
  top: 50%; right: 0;
  transform: translateY(-50%);
}
/* 縦線 */
.dt-tree--right .dt-tree__item::after {
  width: 2px;
  right: 0; top: 0;
  height: calc(100% + 12px); /* 下の要素へ繋ぐ */
}
/* 先頭と末尾の縦線調整 */
.dt-tree--right .dt-tree__item:first-child::after {
  top: 50%; height: calc(50% + 12px);
}
.dt-tree--right .dt-tree__item:last-child::after {
  top: auto; bottom: 50%; height: calc(50% + 12px);
}

/* === パターンB: 左へ繋ぐ (中央のカラム) === */
.dt-tree--left .dt-tree__item {
  padding-left: 30px; /* 左側に線のスペース */
}
/* 横線 */
.dt-tree--left .dt-tree__item::before {
  height: 2px; width: 30px;
  top: 50%; left: 0;
  transform: translateY(-50%);
}
/* 縦線 */
.dt-tree--left .dt-tree__item::after {
  width: 2px;
  left: 0; top: 0;
  height: calc(100% + 12px);
}
/* 先頭と末尾の縦線調整 */
.dt-tree--left .dt-tree__item:first-child::after {
  top: 50%; height: calc(50% + 12px);
}
.dt-tree--left .dt-tree__item:last-child::after {
  top: auto; bottom: 50%; height: calc(50% + 12px);
}

/* --- 7. 右カラムのパネル (Prefectures) --- */
.dt-panel {
  background-color: #e4edff;
  border-radius: 10px;
  padding: 24px 20px;
  height: 100%; /* 高さを親に合わせる */
  box-sizing: border-box;
}

.dt-panel__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dt-panel__item {
  background: #fff;
  border: 1px solid #aac1ec;
  border-radius: 6px;
  padding: 12px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: #002057;
  line-height: 1.3;
}

/* --- 8. SP (モバイル) レスポンシブ --- */
@media (max-width: 768px) {
  /* 1カラムにする */
  .domestic__flow-grid {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  /* 線を非表示にする */
  .dt-tree--right .dt-tree__item::before,
  .dt-tree--right .dt-tree__item::after,
  .dt-tree--left .dt-tree__item::before,
  .dt-tree--left .dt-tree__item::after {
    display: none;
  }

  /* 余白リセット */
  .dt-tree--right .dt-tree__item { padding-right: 0; }
  .dt-tree--left .dt-tree__item  { padding-left: 0; }

  /* 矢印を下向きにする */
  .dt-arrow-area {
    width: 100%;
    height: 30px;
    padding: 0;
    align-items: center;
  }
  .dt-arrow {
    transform: rotate(90deg); /* 90度回転 */
  }

  
  /* タイトルの文字サイズ調整 */
  .dt-col__title {
    font-size: 1.2rem;
    min-height: auto;
    margin-bottom: 16px;
  }
}

/* =========================================================
   CUSTOMS CLEARANCE (アイコン飛び出し・下部グレー背景)
========================================================= */

.customs {
  background-color: #ffffff;
  padding: 80px 0 96px;
}

.customs__inner {
  max-width: 1100px;
  margin: 0 auto;
}

/* メインの白いコンテナ */
.customs__card {
  background-color: #ffffff;
  box-shadow: 0 18px 40px rgba(17, 40, 83, 0.12);
  padding: 56px 64px 64px;
}

/* --- タイトルエリア --- */
.customs__header {
  text-align: center;
  margin-bottom: 80px; /* ★アイコンが飛び出す分、余白を広げました */
  border-bottom: 2px solid #0046ad;
  padding-bottom: 24px;
}

.customs__title {
  font-size: 32px;
  font-weight: 800;
  color: #111111;
  margin: 0;
}

/* --- 上段：機能エリア (Prompt / AEO / Capable) --- */
.customs__features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin-bottom: 64px;
  margin-top: 40px; /* ★アイコンが上に飛び出すスペースを確保 */
}

/* ★修正: ここにグレー背景をつけるが、アイコンを上にずらす */
.customs-feature {
  background-color: #f9f9f9; /* グレー背景 */
  padding: 0 24px 40px;      /* 上のpaddingは0にしてアイコンで調整 */
  border-radius: 4px;
  text-align: center;
  position: relative;        /* 重なり順の基準 */
}

/* ★修正: アイコンをグレーボックスから上に半分飛び出させる */
.customs-feature__icon {
  width: 100px;              /* サイズ固定 */
  height: 100px;             /* サイズ固定 */
  margin: -50px auto 24px;   /* 上に50px引っ張り上げる (ネガティブマージン) */
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;   /* アイコン自体の背景はなし */
}

.customs-feature__icon img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
}

.customs-feature__title {
  font-size: 18px;
  font-weight: 700;
  color: #002057;
  margin: 0 0 16px;
  line-height: 1.4;
  padding-top: 10px; /* アイコンとのバランス調整 */
}

.customs-feature__text {
  font-size: 13px;
  line-height: 1.7;
  color: #444444;
  margin: 0;
}

/* --- 下段：詳細エリア (Capability / Handles) --- */
.customs__details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  margin-top: 0;
}

/* 下段は背景なし（白） */
.customs-detail {
  background-color: transparent;
  padding: 0;
  border-radius: 0;
}

/* 各カラムの見出し */
.customs-detail__title {
  font-size: 18px;
  font-weight: 700;
  color: #0046ad;
  margin: 0 0 24px;
  text-align: center;
  border-bottom: 1px solid #0046ad;
  padding-bottom: 12px;
}

/* 左カラム：数字 */
.customs-detail dl.customs-detail__list {
  text-align: center;
  margin: 0;
}

.customs-detail__row {
  margin-bottom: 24px;
}

.customs-detail__row:last-child {
  margin-bottom: 0;
}

.customs-detail__row dt {
  font-size: 13px;
  font-weight: 700;
  color: #111111;
  margin-bottom: 4px;
  display: block;
}

.customs-detail__number {
  font-size: 36px;
  font-weight: 800;
  color: #0046ad;
  line-height: 1.2;
  margin: 0;
}

/* 中・右カラム：リスト */
.customs-detail ul.customs-detail__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.customs-detail ul.customs-detail__list li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: #333333;
}

/* リストマーカー (>) */
.customs-detail ul.customs-detail__list li::before {
  content: "›";
  position: absolute;
  left: 0;
  top: -1px;
  color: #0046ad;
  font-weight: bold;
  font-size: 18px;
  line-height: 1.6;
}

/* --- SP レスポンシブ --- */
@media (max-width: 768px) {
  .customs__card {
    padding: 32px 20px 32px;
  }

  .customs__header {
    margin-bottom: 60px; /* SPでも飛び出し分の余白確保 */
    padding-bottom: 16px;
  }
  
  .customs__title {
    font-size: 24px;
  }

  .customs__features {
    grid-template-columns: 1fr;
    gap: 60px; /* カード間の縦余白を広げる（飛び出し対応） */
    margin-bottom: 48px;
    margin-top: 20px;
  }

  /* SPでのアイコンサイズ調整 */
  .customs-feature__icon {
    width: 80px;
    height: 80px;
    margin: -40px auto 20px; /* 飛び出し量を調整 */
  }

  .customs__details {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* =========================================================
   INTERNATIONAL MOVING (下線幅修正版)
========================================================= */

.moving {
  background-color: #f6f8fb;
  padding: 100px 0 120px;
}

.moving__inner {
  max-width: 1100px;
  margin: 0 auto;
}

/* --- ヘッダー --- */
.moving__header {
  text-align: center;
  margin-bottom: 64px;
}

.moving__title {
  font-size: 40px;
  font-weight: 800;
  color: #111111;
  margin: 0 0 16px;
}

.moving__lead {
  font-size: 13px;
  color: #555555;
  margin: 0;
}

/* --- 丸いアイコンエリア --- */
.moving__circles {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-bottom: 80px;
  flex-wrap: wrap;
}

.moving-circle {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background-color: #ffffff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative; /* 線の基準のために念のため */
}

/* 英語部分 */
.moving-circle__en {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 12px;
  position: relative;
  width: 100%; /* 親の幅（円の内部）いっぱいを使う */
}

/* ★修正: 下線の幅をデザイン通り広くする */
.moving-circle__en::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;         /* ★ここを修正：円の幅の70%程度に広げる */
  height: 3px;
}

/* 各色設定 */
.moving-circle__en--blue { color: #0068b7; }
.moving-circle__en--blue::after { background-color: #0068b7; }

.moving-circle__en--red { color: #e60012; }
.moving-circle__en--red::after { background-color: #e60012; }

.moving-circle__en--yellow { color: #f39800; }
.moving-circle__en--yellow::after { background-color: #f39800; }

.moving-circle__en--black { color: #111111; }
.moving-circle__en--black::after { background-color: #111111; }

.moving-circle__en--brown { color: #9e2a2b; }
.moving-circle__en--brown::after { background-color: #9e2a2b; }

/* 日本語部分 */
.moving-circle__jp {
  font-size: 13px;
  font-weight: 700;
  color: #111111;
  margin-top: 4px;
}

/* --- 2カラムカードエリア --- */
.moving__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.moving-card {
  background-color: #ffffff;
  padding: 56px 48px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.03); 
}

.moving-card__title {
  font-size: 24px;
  font-weight: 800;
  color: #111111;
  line-height: 1.3;
  margin: 0 0 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid #002057;
}

.moving-card__badge-wrap {
  margin-bottom: 24px;
}

.moving-card__badge {
  display: inline-block;
  background-color: #003380;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 24px;
  border-radius: 4px;
}

.moving-card__buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
}

.moving-card__btn {
  background-color: #003380;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 4px;
  text-align: center;
  max-width: 280px;
}

.moving-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.moving-card__list li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 12px;
  font-size: 15px;
  font-weight: 700;
  color: #111111;
}

.moving-card__list li::before {
  content: "›";
  position: absolute;
  left: 0;
  top: 0;
  color: #003380;
  font-size: 18px;
  line-height: 1.5;
  font-weight: bold;
}

/* --- SP レスポンシブ --- */
@media (max-width: 768px) {
  .moving {
    padding: 64px 0 80px;
  }

  .moving__title {
    font-size: 32px;
  }

  /* SPレイアウト (3個・2個) */
  .moving__circles {
    gap: 16px;
    margin-bottom: 48px;
    justify-content: center;
    max-width: 360px; /* 折り返し誘導用 */
    margin-left: auto;
    margin-right: auto;
  }

  .moving-circle {
    width: 100px;
    height: 100px;
  }

  @media (max-width: 374px) {
    .moving-circle {
      width: 90px;
      height: 90px;
    }
  }
  
  .moving-circle__en {
    font-size: 14px;
    margin-bottom: 8px;
  }
  
  /* SPでも線の幅は比率で維持される */
  
  .moving-circle__jp {
    font-size: 11px;
    margin-top: 2px;
  }

  .moving__cards {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .moving-card {
    padding: 32px 24px;
  }

  .moving-card__btn {
    max-width: 100%;
  }
}

/* =========================================================
   FOOTER
========================================================= */

.site-footer {
  width: 100%;
}

/* --- 青色エリア (Years of experience) --- */
.site-footer__top {
  background-color: #0a3190; /* メインカラー */
  /* 背景画像がある場合はここに指定 (例: footer_bg.png) */
  background-image: url("../images/footer_bg.png"); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  padding: 100px 0;
  color: #ffffff;
  text-align: center;
}

.site-footer__inner {
  max-width: 1000px;
  margin: 0 auto;
}

/* "Years of experience" */
.site-footer__head {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 16px;
  letter-spacing: 0.02em;
}

/* "over 30 years" */
.site-footer__main {
  display: flex;
  align-items: baseline; /* ベースラインで揃える */
  justify-content: center;
  gap: 20px;
  margin-bottom: 24px;
  line-height: 1;
}

.site-footer__label {
  font-size: 32px;
  font-weight: 700;
}

.site-footer__number {
  font-size: 100px; /* 数字を特大に */
  font-weight: 700;
  line-height: 1;
}

/* "SUPPORTED BY..." */
.site-footer__sub {
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase; /* 大文字変換 */
  letter-spacing: 0.05em;
  margin: 0;
}

/* --- 白色エリア (Copyright) --- */
.site-footer__bottom {
  background-color: #ffffff;
  padding: 32px 0;
  text-align: center;
}

.site-footer__copyright {
  font-size: 12px;
  color: #111111;
  font-weight: 500;
}

/* --- SP レスポンシブ --- */
@media (max-width: 768px) {
  .site-footer__top {
    padding: 80px 0;
  }

  .site-footer__head {
    font-size: 22px;
  }

  .site-footer__main {
    gap: 12px;
    margin-bottom: 20px;
  }

  .site-footer__label {
    font-size: 20px;
  }

  .site-footer__number {
    font-size: 72px;
  }

  .site-footer__sub {
    font-size: 16px;
    padding: 0 16px;
    line-height: 1.5;
  }
  
  .site-footer__bottom {
    padding: 24px 0;
  }
  
  .site-footer__copyright {
    font-size: 11px;
  }
}


/* =========================================================
   Google Maps API 表示用修正
   （iframe用の余白設定をリセットし、高さを固定する）
========================================================= */

.map-modal__frame {
  width: 100%;
  height: 60vh;      /* 地図の高さを画面の高さの60%に固定 */
  padding-top: 0;    /* ★ここが重要：iframe用の余白を削除 */
  position: relative;
}

/* 地図を表示するコンテナ */
#google-map {
  width: 100%;
  height: 100%;
}

/* SP（スマホ）用調整 */
@media (max-width: 768px) {
  .map-modal__frame {
    height: 50vh;    /* スマホでは少し高さを抑える */
  }
}

/* --- AIR & SEA Terminals List (修正版) --- */
.airsea__terminals {
  /* ▼ ここを変更しました */
  display: flex;             /* ブロック要素として扱い、改行させる */
  flex-direction: column;    /* 縦並び */
  width: fit-content;        /* コンテンツの幅に合わせる（これがないと左端に寄ってしまう） */
  margin: 56px auto 0;       /* 上に56px、左右はautoで中央寄せ */
  
  text-align: left;
  gap: 12px;
}

.airsea__terminal-row {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
}

.airsea__terminal-label {
  margin: 0 16px 0 0;
  color: #0a3190;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.05em;
  min-width: 40px;
  text-align: left;
}

.airsea__terminal-text {
  margin: 0;
  color: #111111;
  font-weight: 500;
}

/* --- SP (Mobile) --- */
@media (max-width: 768px) {
  .airsea__terminals {
    margin-top: 40px;
    width: 100%;       /* SPでは幅いっぱい使う */
    padding: 0 16px;   /* 画面端の余白 */
    box-sizing: border-box;
  }

  .airsea__terminal-row {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }

  .airsea__terminal-label {
    margin: 0 0 4px 0;
    font-size: 16px;
  }

  .airsea__terminal-text {
    font-size: 14px;
    line-height: 1.5;
  }
}

/* --- 見出しのスタイル（下線付き） --- */
.airsea__terminals-heading {
  font-size: 16px;
  font-weight: 800;
  color: #0a3190;
  
  /* ▼ 下線を追加するための記述 */
  border-bottom: 2px solid #0a3190; /* 2pxの青い実線 */
  padding-bottom: 10px;             /* 文字と線の隙間 */
  margin: 0 0 20px 0;               /* 線と下のリストの隙間 */
  width: 100%;                      /* 横幅いっぱいに線を引く */
  
  letter-spacing: 0.05em;
  line-height: 1.4;
}

/* --- SP (Mobile) --- */
@media (max-width: 768px) {
  .airsea__terminals-heading {
    font-size: 15px;
    margin-bottom: 16px;
    text-align: center; /* SPでも中央揃えのままにする場合 */
  }
}