/* ══════════════════════════════════════
   BUSINESS PAGE — ARIS / VEXUM academy
══════════════════════════════════════ */
.bp-section{padding:7rem 2rem;}
.bp-section.alt{background:var(--bg2);}
.bp-inner{max-width:1120px;margin:0 auto;}

/* ── 見出しブロック ── */
.bp-num{
  font-family:var(--ff);font-size:.6rem;font-weight:700;letter-spacing:.2em;
  color:var(--blue);display:flex;align-items:center;gap:.6rem;margin-bottom:1rem;
}
.bp-num::after{content:'';display:block;width:36px;height:1px;background:var(--blue);opacity:.4;}
.bp-cat{
  display:inline-block;font-family:var(--ffj);font-size:.78rem;font-weight:700;
  letter-spacing:.08em;line-height:1.4;color:#fff;
  background:var(--blue);border:1px solid var(--blue);border-radius:3px;
  padding:.48rem 1.1rem;margin-bottom:1.2rem;
  box-shadow:0 2px 10px rgba(0,188,212,.25);
}
.bp-name{
  font-family:var(--ff);font-size:clamp(2rem,4vw,3rem);font-weight:800;
  letter-spacing:.02em;color:var(--ink-dark);line-height:1.1;margin-bottom:1.2rem;
}
.bp-catch{
  font-family:var(--ffj);font-weight:700;font-size:clamp(1.05rem,1.9vw,1.5rem);
  line-height:1.75;color:var(--ink-dark);margin-bottom:.6rem;
}
.bp-subcatch{
  font-family:var(--ffj);font-size:.85rem;font-weight:500;line-height:1.9;
  color:var(--blue);margin-bottom:1.6rem;
}
.bp-note{
  font-family:var(--ffj);font-size:.78rem;line-height:1.9;
  color:rgba(26,26,26,.55);margin-bottom:1.6rem;
}

/* ── リード（画像＋本文） ── */
.bp-lead{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;margin-bottom:5rem;}
.bp-visual{overflow:hidden;border-radius:4px;background:var(--bg3);aspect-ratio:4/3;}
.bp-visual img{width:100%;height:100%;object-fit:cover;display:block;}
.bp-desc{
  font-family:var(--ffj);font-size:.88rem;line-height:2.1;
  color:rgba(26,26,26,.62);margin-bottom:1.8rem;
}
.bp-metrics{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 2rem;padding:0;}
.bp-metrics li{
  font-family:var(--ffj);font-size:.72rem;font-weight:600;line-height:1.6;
  color:rgba(26,26,26,.75);background:#fff;
  border:1px solid var(--border);border-radius:3px;padding:.45rem .8rem;
}
.bp-section.alt .bp-metrics li{background:var(--bg2);}
.bp-btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--ff);font-size:.7rem;font-weight:700;letter-spacing:.1em;
  color:#fff;background:var(--ink-dark);text-decoration:none;
  padding:1rem 2.2rem;border-radius:3px;transition:gap .25s,background .25s;
}
.bp-btn:hover{gap:1rem;background:var(--blue);}
.bp-btn-ext{
  font-family:var(--ffj);font-size:.66rem;font-weight:600;letter-spacing:.04em;
  opacity:.7;margin-left:-.2rem;
}

/* ── Why / What / How ── */
.bp-wwh{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;}
.bp-wwh-item{
  background:#fff;border:1px solid var(--border);border-radius:4px;padding:2.2rem 1.8rem;
}
.bp-section.alt .bp-wwh-item{background:var(--bg2);}
.bp-wwh-label{
  font-family:var(--ff);font-size:1.5rem;font-weight:800;color:var(--blue);
  line-height:1;margin-bottom:.9rem;
}
.bp-wwh-title{
  font-family:var(--ffj);font-size:.8rem;font-weight:700;line-height:1.7;
  letter-spacing:.04em;color:rgba(26,26,26,.45);margin-bottom:.9rem;
}
.bp-wwh-item p{
  font-family:var(--ffj);font-size:.82rem;line-height:2;color:rgba(26,26,26,.6);
  max-width:42em; /* 1カラム時に1行40字程度で折り返す */
}
/* 強調1行 */
.bp-wwh-item p.bp-wwh-key{
  font-size:1rem;font-weight:700;line-height:1.75;
  color:var(--ink-dark);margin-bottom:1rem;
  padding-left:.8rem;border-left:3px solid var(--blue);
}

/* ── 機能カード（4つ） ── */
.bp-sub-title{
  font-family:var(--ffj);font-size:clamp(1.15rem,2vw,1.55rem);font-weight:700;
  color:var(--ink-dark);line-height:1.6;margin:0 0 .8rem;
}
.bp-sub-lead{
  font-family:var(--ffj);font-size:.84rem;line-height:2;
  color:rgba(26,26,26,.6);max-width:680px;margin-bottom:2.4rem;
}
/* ── 学習領域タグ ── */
.bp-domains{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:5rem;}
.bp-domain{
  font-family:var(--ff);font-size:.72rem;font-weight:700;letter-spacing:.06em;
  color:var(--ink-dark);background:#fff;border:1px solid var(--border);
  border-radius:100px;padding:.6rem 1.3rem;
}
.bp-section.alt .bp-domain{background:var(--bg2);}

/* 循環STEP01の中に置く学習領域タグ（濃い背景用） */
.bp-cycle-step .bp-domains{gap:.4rem;margin:1rem 0 0;}
.bp-section.alt .bp-cycle-step .bp-domain,
.bp-cycle-step .bp-domain{
  font-size:.62rem;padding:.3rem .7rem;
  color:#fff;background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.3);
}

/* ── 循環図 ── */
.bp-cycle{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.8rem;}
.bp-cycle-step{
  position:relative;background:var(--ink-dark);color:#fff;border-radius:4px;
  padding:1.6rem 1.3rem;
}
.bp-cycle-step:nth-child(even){background:var(--blue);}
.bp-cycle-num{
  font-family:var(--ff);font-size:.62rem;font-weight:800;letter-spacing:.14em;
  opacity:.6;margin-bottom:.7rem;
}
.bp-cycle-step p{font-family:var(--ffj);font-size:.82rem;font-weight:600;line-height:1.85;}
.bp-cycle-step::after{
  content:'→';position:absolute;right:-1rem;top:50%;transform:translateY(-50%);
  font-size:.9rem;color:rgba(26,26,26,.3);z-index:2;
}
.bp-cycle-step:last-child::after{content:'↩';}
.bp-cycle-back{
  font-family:var(--ffj);font-size:.76rem;line-height:1.9;
  color:rgba(26,26,26,.55);border-left:2px solid var(--blue);padding-left:1rem;margin-bottom:2.4rem;
}

@media(max-width:1024px){
  .bp-wwh{grid-template-columns:1fr;gap:1.2rem;}
  .bp-cycle{grid-template-columns:repeat(2,1fr);gap:1.4rem;}
  .bp-cycle-step:nth-child(2)::after{content:'↓';right:auto;left:50%;top:auto;bottom:-1.5rem;transform:translateX(-50%);}
}
@media(max-width:768px){
  .bp-section{padding:3.5rem 1.4rem;}
  /* スマホは画面幅が狭いので、PC向けの強制改行は無効化 */
  .bp-desc br,
  .page-hero-sub br{display:none;}
  .bp-cat{font-size:.72rem;padding:.4rem .9rem;}
  .bp-btn{padding:1rem 1.2rem;gap:.4rem;}
  .bp-btn-ext{font-size:.6rem;}
  .bp-lead{grid-template-columns:1fr;gap:1.8rem;margin-bottom:3rem;}
  .bp-visual{aspect-ratio:16/10;}
  .bp-domains{margin-bottom:3rem;}
  .bp-cycle{grid-template-columns:1fr;gap:1.6rem;}
  .bp-cycle-step::after{content:'↓';right:auto;left:50%;top:auto;bottom:-1.35rem;transform:translateX(-50%);}
  .bp-cycle-step:last-child::after{content:'↩';}
  .bp-btn{width:100%;justify-content:center;}
  .bp-wwh-item{padding:1.6rem 1.3rem;}
}