/* =========================================================
   wise-inc / 事業案内ページ専用スタイル (pages/business.css)
   事業の考え方、物流ネットワーク、人材派遣、車輌・拠点一覧、業務フロー
   ========================================================= */

.prose .catch {
  margin: 0 0 clamp(18px, 2.4vw, 28px);
  font-size: clamp(18px, 1.9vw, 27px);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: .06em;
  color: var(--strong);
}
.prose p {
  margin: 0 0 1.4em;
  max-width: 38em;
  font-size: clamp(13.5px, 1.05vw, 15px);
  line-height: 2.15;
  color: var(--sub);
}
.prose p:last-child { margin-bottom: 0; }

/* 2つの事業（一般貨物・人材派遣）のナビゲーションパネル */
.axes {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  margin-top: clamp(30px, 4vw, 52px);
  background: linear-gradient(120deg, var(--navy) 0%, #143257 60%, #1A4478 100%);
  border-radius: 4px;
  overflow: hidden;
  color: #fff;
}
.axis {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3.2vw, 46px);
  color: #fff;
  text-decoration: none;
  transition: background-color .45s ease;
}
.axis:hover { background: rgba(255, 255, 255, .045); }
.axis__en {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 clamp(10px, 1.3vw, 14px);
  font-family: "Barlow", sans-serif;
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: .22em;
  color: rgba(255, 255, 255, .55);
}
.axis__en i { width: 5px; height: 5px; background: var(--gold); flex: none; }
.axis__ja {
  margin: 0 0 clamp(12px, 1.5vw, 18px);
  font-size: clamp(20px, 2.1vw, 30px);
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: .07em;
}
.axis__txt {
  margin: 0 0 clamp(20px, 2.6vw, 30px);
  flex: 1;
  font-size: clamp(12.5px, .98vw, 14px);
  line-height: 2;
  color: rgba(255, 255, 255, .74);
}
.axis__go {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  letter-spacing: .1em;
  color: var(--gold);
}
.axis__go svg { width: 16px; height: 16px; transition: transform .45s var(--ease); }
.axis:hover .axis__go svg { transform: translateY(3px); }
.axes__mid { position: relative; background: rgba(255, 255, 255, .16); }
.axes__mid::after {
  content: "+";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 50%;
  background: #122C4F;
  font-family: "Barlow", sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1;
  color: rgba(255, 255, 255, .8);
}
@media (max-width: 680px) {
  .axes { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1px auto; }
}

/* 小見出し */
.sub {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: clamp(44px, 5.6vw, 72px) 0 clamp(16px, 2vw, 24px);
}
.sub h3 {
  margin: 0;
  flex: none;
  font-size: clamp(15.5px, 1.35vw, 19px);
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--strong);
}
.sub span {
  flex: none;
  font-family: "Barlow", sans-serif;
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: .2em;
  color: var(--faint);
}
.sub::after { content: ""; flex: 1; height: 1px; background: var(--hair); }

/* 写真枠 */
.photo {
  position: relative;
  overflow: hidden;
  margin: clamp(28px, 3.6vw, 44px) 0 0;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  background: linear-gradient(118deg, #0B2242 0%, #173C69 58%, #245391 100%);
}
.photo::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg,  rgba(255, 255, 255, .045) 0 1px, transparent 1px 72px);
  -webkit-mask-image: radial-gradient(90% 120% at 80% 20%, #000 10%, transparent 75%);
  mask-image: radial-gradient(90% 120% at 80% 20%, #000 10%, transparent 75%);
}
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo figcaption {
  position: absolute;
  left: clamp(16px, 2vw, 26px);
  bottom: clamp(14px, 1.8vw, 22px);
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Barlow", sans-serif;
  font-size: 10.5px;
  letter-spacing: .2em;
  color: rgba(255, 255, 255, .62);
}
.photo figcaption::before { content: ""; width: 18px; height: 1px; background: rgba(255, 255, 255, .4); }
@media (max-width: 640px) { .photo { aspect-ratio: 4 / 3; } }

/* サービス一覧行 */
.svc { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.svc > li {
  display: grid;
  align-items: baseline;
  grid-template-columns: clamp(40px, 4.6vw, 60px) clamp(150px, 17vw, 220px) minmax(0, 1fr);
  gap: clamp(10px, 1.8vw, 26px);
  padding: clamp(18px, 2.2vw, 28px) 0;
  border-bottom: 1px solid var(--hair);
}
.svc b {
  font-family: "Barlow", sans-serif;
  font-weight: 400;
  font-size: clamp(15px, 1.4vw, 19px);
  letter-spacing: .08em;
  color: #B6C0CE;
  font-variant-numeric: tabular-nums;
}
.svc h4 {
  margin: 0;
  font-size: clamp(14.5px, 1.2vw, 17px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .07em;
  color: var(--strong);
}
.svc p { margin: 0; font-size: clamp(13px, 1.02vw, 14.5px); line-height: 2; color: var(--sub); }
@media (max-width: 640px) {
  .svc > li { grid-template-columns: clamp(34px, 9vw, 44px) minmax(0, 1fr); row-gap: 6px; }
  .svc > li > div { grid-column: 2; }
}

.svc .stat {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: clamp(12px, 1.5vw, 18px);
  padding-top: clamp(12px, 1.5vw, 16px);
  border-top: 1px dashed var(--line);
}
.stat__n {
  font-family: "Barlow", sans-serif;
  font-weight: 300;
  font-size: clamp(32px, 3.6vw, 50px);
  line-height: 1;
  letter-spacing: .01em;
  color: var(--strong);
  font-variant-numeric: tabular-nums;
}
.stat__n small {
  font-family: "Noto Sans JP", sans-serif;
  font-size: .32em;
  font-weight: 400;
  margin-inline: .25em;
  letter-spacing: .08em;
}
.stat__cap { font-size: 12px; letter-spacing: .08em; color: var(--faint); }

/* 車輌・メリット一覧 */
.spec {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
.spec li {
  display: grid; align-content: start; gap: 10px;
  padding: clamp(16px, 1.9vw, 24px) clamp(14px, 1.7vw, 22px);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: #fff;
}
.spec b {
  display: flex; align-items: center; gap: 8px;
  font-family: "Barlow", sans-serif; font-weight: 500;
  font-size: 10.5px; letter-spacing: .16em; color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.spec b::before { content: ""; width: 5px; height: 5px; background: var(--blue); flex: none; }
.spec span {
  font-size: clamp(13.5px, 1.1vw, 15.5px); font-weight: 500; line-height: 1.6;
  letter-spacing: .05em; color: var(--strong);
}
.spec__note { margin: 12px 0 0; font-size: 12px; letter-spacing: .04em; color: var(--faint); }
@media (max-width: 640px) {
  .spec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 業務フロー */
.flowbox {
  background: var(--bg2); border-radius: 4px;
  padding: clamp(24px, 3.2vw, 44px);
}
.flow {
  --node: 44px; --fgap: clamp(22px, 3vw, 44px);
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fgap);
}
.flow li { position: relative; }
.flow__node {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: var(--node); height: var(--node); margin-bottom: clamp(16px, 1.9vw, 22px);
  border: 1px solid #C3CEDD; border-radius: 50%; background: #fff;
  font-family: "Barlow", sans-serif; font-weight: 500; font-size: 12px; letter-spacing: .08em;
  color: var(--strong); font-variant-numeric: tabular-nums;
}
.flow li.is-us .flow__node { background: var(--navy); border-color: var(--navy); color: var(--gold); }
.flow__wire {
  position: absolute; top: calc(var(--node) / 2);
  left: calc(var(--node) + 10px); right: calc(var(--fgap) * -1 + 10px);
  height: 1px; background: #C3CEDD;
}
.flow__wire::before {
  content: ""; position: absolute; right: 0; top: -3px;
  width: 6px; height: 6px;
  border-top: 1px solid #9FB0C6; border-right: 1px solid #9FB0C6;
  transform: rotate(45deg);
}
.flow__wire::after {
  content: ""; position: absolute; left: 0; top: -2px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--blue); box-shadow: 0 0 0 4px rgba(47, 128, 237, .14);
  opacity: 0;
}
.flow__k {
  margin: 0 0 4px;
  font-family: "Barlow", sans-serif; font-weight: 500;
  font-size: 10.5px; letter-spacing: .2em; color: var(--blue);
}
.flow h4 {
  margin: 0 0 8px; font-size: clamp(15px, 1.3vw, 18px); font-weight: 500;
  letter-spacing: .07em; color: var(--strong);
}
.flow p:last-child { margin: 0; font-size: clamp(12.5px, .98vw, 14px); line-height: 1.95; color: var(--sub); }

@media (max-width: 760px) {
  .flow { grid-template-columns: minmax(0, 1fr); gap: clamp(26px, 6vw, 34px); }
  .flow li { display: grid; grid-template-columns: var(--node) minmax(0, 1fr); column-gap: 16px; }
  .flow__node { grid-row: 1 / span 3; margin-bottom: 0; }
  .flow__wire {
    top: calc(var(--node) + 8px); bottom: calc(clamp(26px, 6vw, 34px) * -1 + 8px);
    left: calc(var(--node) / 2); right: auto; width: 1px; height: auto;
  }
  .flow__wire::before { right: auto; top: auto; bottom: 0; left: -3px; transform: rotate(135deg); }
  .flow__wire::after { left: -2px; top: 0; }
}

/* 拠点リンクボタン一覧 */
.locs {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1vw, 12px);
}
.loc {
  display: flex; align-items: center; gap: 12px;
  height: 56px; padding-inline: 22px 18px;
  border: 1px solid var(--line); border-radius: 999px;
  text-decoration: none; color: var(--strong);
  font-size: clamp(13.5px, 1.1vw, 15px); font-weight: 500; letter-spacing: .08em;
  transition: border-color .28s ease, color .28s ease, background-color .28s ease;
}
.loc b {
  font-family: "Barlow", sans-serif; font-weight: 400; font-size: 10.5px;
  letter-spacing: .14em; color: var(--faint); transition: color .28s ease;
  font-variant-numeric: tabular-nums;
}
.loc span { flex: 1; white-space: nowrap; }
.loc svg { width: 15px; height: 15px; flex: none; color: var(--faint); transition: transform .4s var(--ease), color .28s ease; }
.loc:hover { border-color: var(--blue); color: var(--blue); background: #F2F7FE; }
.loc:hover b, .loc:hover svg { color: var(--blue); }
.loc:hover svg { transform: translateX(3px); }
@media (max-width: 1100px) { .locs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .locs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .loc { padding-inline: 18px 14px; } }