/* =====================================================
   services_cargo.css（Page-only / services baseline compatible）
   - 共通（font / header / nav / dropdown / burger / reveal / underline / footer / buttons）は site.css に委譲
   - 本CSSは cargo 固有レイアウトのみ
   - 要望反映：
     ① フォントはindex同様（= site.cssのbodyに委譲）
     ② 基本はservices基調
     ③ CTA（お問い合わせフォームエリア）は削除済み（CSSも持たない）
     ④ SP画像（overview01.jpg）は帯（フルブリード）表示
     ⑤ カード配色はservices/GSA同系
===================================================== */

:root{
  --ink:#163a5c;
  --ink2:#244e7a;

  --paper1:#faf7ef;
  --paper2:#f5f1e8;

  /* servicesカード系（GSA/Services同系） */
  --svc-card-bg1:#1e3a75;
  --svc-card-bg2:#264d91;
  --svc-card-border: rgba(174,227,255,.22);
  --svc-card-border-strong: rgba(174,227,255,.28);

  /* バッジ用（GSA寄せ） */
  --glass-deep: rgba(25,90,166,.52);
}

/* servicesページ同様：背景だけ site.css 変数で差し替え */
body.services-page{
  --page-bg:
    radial-gradient(1200px 800px at 10% -10%, rgba(255,255,255,.8) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, var(--paper1) 0%, var(--paper2) 100%);
  --page-fg: var(--ink);
  color: var(--page-fg);
}

/* ===== Sub Hero（services基調） ===== */
.sub-hero{
  position:relative;
  min-height:220px;
  display:grid;
  place-items:center;
  text-align:center;
  overflow:hidden;
  margin-top:64px;
}
.sub-hero--cargo{
  background:url("../images/services01.jpg") center/cover no-repeat;
}
.sub-hero__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(22,58,92,.78) 0%, rgba(22,58,92,.72) 100%);
}
.sub-hero__inner{ position:relative; z-index:1; }
.sub-hero__title{
  margin:0;
  font-size:clamp(28px,3.2vw,40px);
  font-weight:900;
  letter-spacing:.02em;
  color:#eaf4ff;
  text-shadow:0 2px 14px rgba(0,0,0,.35);
}
.sub-hero__lead{
  margin:6px 0 0;
  font-size:13px;
  letter-spacing:.16em;
  color:#bfe2ff;
  text-transform:uppercase;
}

/* ===== Layout ===== */
.sub-main{ padding:34px 0 0; }
.sub-container{
  max-width:1100px;
  margin:0 auto;
  padding:40px 20px;
}

/* 見出し（サイズ/太さは site.css の .section-headline に委譲） */
.sec-title{
  margin:0 0 12px;
  color: var(--ink);
}
.sec-lead{
  margin:0 0 24px;
  font-size:16px;
  line-height:1.95;
  color: var(--ink2);
}

/* =====================================================
   cargo layout
===================================================== */
.cargo-subtitle{ margin-top: 34px; }

/* GLOBAL風：左テキスト / 右画像 */
.cargo-lead-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
  margin: 10px 0 26px;
}
.cargo-lead-body{ margin:0; }

/* 画像：PCは角丸＋影、縁取り無し */
.cargo-float-image{
  margin:0;
  border-radius:16px;
  overflow:hidden;
  border: 0;
  background: transparent;
  box-shadow:
    0 22px 44px rgba(0,0,0,.18),
    0 10px 24px rgba(25,90,166,.10);
}
.cargo-float-image img{
  width:100%;
  height:auto;
  display:block;
}

/* カード3枚（services/GSA同系の濃紺グラデ） */
.cargo-card-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 14px;
  margin: 6px 0 22px;
}
.cargo-card{
  position:relative;
  border-radius:16px;
  padding:16px 14px;
  overflow:hidden;

  background: linear-gradient(180deg, var(--svc-card-bg1) 0%, var(--svc-card-bg2) 100%);
  border:1px solid var(--svc-card-border);
  box-shadow:
    0 18px 34px rgba(0,0,0,.18),
    0 10px 24px rgba(0,0,0,.12);

  color:#f6fbff;
}
.cargo-card::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 44%);
  opacity:.65;
  pointer-events:none;
}
@media (hover:hover){
  .cargo-card:hover{ border-color: rgba(174,227,255,.34); }
}
.cargo-card-title{
  margin:0 0 8px;
  font-size:16px;
  font-weight:900;
  letter-spacing:.02em;
  position:relative;
  z-index:1;
  text-shadow:0 10px 22px rgba(0,0,0,.18);
}
.cargo-card-text{
  margin:0;
  font-size:14px;
  line-height:1.85;
  color: rgba(255,255,255,.94);
  position:relative;
  z-index:1;
}

/* 左右2エリア */
.cargo-two-col{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 10px 0 0;
}

/* “紹介/実施” 枠（淡いガラス） */
.cargo-box{
  position:relative;
  border-radius:16px;
  padding:18px 16px 16px;

  background: rgba(255,255,255,.52);
  border: 1px solid rgba(255,255,255,.62);
  box-shadow: 0 18px 40px rgba(0,0,0,.08);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
}

.cargo-tag{
  display:inline-block;
  margin:0 0 10px;
  font-size:12px;
  letter-spacing:.18em;
  font-weight:900;
  padding:6px 10px;
  border-radius:999px;
  color:#ffffff;
  background: linear-gradient(135deg, #195aa6, #7fb6ff);
  box-shadow: 0 12px 26px rgba(0,0,0,.10);
}

.cargo-box-title{
  margin:0 0 12px;
  font-size:16px;
  font-weight:900;
  color: var(--ink);
  letter-spacing:.02em;
}

/* 円形ガラスバッジ */
.cargo-badge-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
}
.cargo-badge{
  position:relative;
  width: 124px;
  height: 124px;
  border-radius:999px;
  display:grid;
  place-items:center;
  text-align:center;
  padding:10px;
  overflow:hidden;

  background: var(--glass-deep);
  border: 1px solid rgba(255,255,255,.24);
  box-shadow:
    0 16px 32px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(0,0,0,.10);

  backdrop-filter: blur(14px) saturate(145%);
  -webkit-backdrop-filter: blur(14px) saturate(145%);
  color:#ffffff;
}
.cargo-badge::before{
  content:"";
  position:absolute; inset:-40%;
  background:
    linear-gradient(135deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.18) 10%,
      rgba(255,255,255,0) 20%,
      rgba(255,255,255,.12) 32%,
      rgba(255,255,255,0) 44%,
      rgba(255,255,255,.10) 56%,
      rgba(255,255,255,0) 68%,
      rgba(255,255,255,.10) 80%,
      rgba(255,255,255,0) 100%);
  transform: rotate(-8deg);
  opacity:.55;
  pointer-events:none;
}
.cargo-badge::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 46%);
  pointer-events:none;
  opacity:.70;
}
.cargo-badge span{
  position:relative;
  z-index:1;
  font-weight:900;
  letter-spacing:.02em;
  line-height:1.25;
  font-size:14px;
  text-shadow:0 10px 26px rgba(0,0,0,.18);
}

/* 文字幅だけアンダーライン（site.cssの .section-title--textwidth を利用） */
.section-title--textwidth{
  display:inline-block;
}

/* =====================================================
   SP対応（④：画像を帯にする）
===================================================== */
@media (max-width: 1024px){
  .cargo-lead-row{ grid-template-columns: 1fr; gap: 14px; }
  .cargo-card-grid{ grid-template-columns: 1fr; }
  .cargo-two-col{ grid-template-columns: 1fr; }

  /* SP画像：帯（フルブリード） */
  .cargo-float-image{
    border-radius:0;
    border:0;
    width:100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    box-shadow: 0 18px 34px rgba(0,0,0,.18);
  }

  .cargo-badge{ width: 116px; height: 116px; }
}

@media (max-width: 640px){
  .sub-container{ padding:34px 14px; }
  .cargo-badge{ width: 110px; height: 110px; }
  .cargo-badge span{ font-size:13px; }
}