/* ===========================
   COZEO About page — Corporate 基調へ刷新
   依存: cozeo-common.css + cozeo-corporate.css
   方針: corporate の hero / chap / feature-row / solutions-intro / keywords /
         cta-eyebrow / cta-headline / btn-gold をそのまま流用。
         本ファイルは about 独自の追加分のみ:
           ① 章背景の切替（chap-04 / cta）
           ② COMPANY 情報の dl 直排
           ③ LINEUP の 4 列グリッド
           ④ CTA カード
   =========================== */

/* === 章背景（corporate は 01 白 / 02 灰 / 03 白。about は 04 と cta を追加） === */
.about-corp .chap-04{background:var(--bg);}
.about-corp .chap-cta{background:#fff;}

/* アンカースクロール時、header に隠れないよう offset を確保 */
.about-corp #company{scroll-margin-top:80px;}

/* === 02 OUR WORK（序号バッジ + アイコン付き 3 列カード。corporate の feature-row と差別化する about 独自版式） === */
.about-corp .work-head{margin-bottom:48px;max-width:680px;}
.about-corp .work-head .eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--font-en);font-size:11px;font-weight:700;
  color:var(--blue);letter-spacing:.32em;margin-bottom:16px;
}
.about-corp .work-head .eyebrow::before{content:"";width:24px;height:1px;background:var(--blue);}
.about-corp .work-head .sec-title{
  font-size:clamp(26px, 3.4vw, 38px);font-weight:900;
  color:var(--navy);letter-spacing:-.015em;line-height:1.4;
}
.about-corp .work-head .sec-title .accent{color:var(--gold-deep);}

.about-corp .work-grid{
  display:grid;grid-template-columns:repeat(3, 1fr);gap:28px;
}
.about-corp .work-card{
  position:relative;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:40px 32px 36px;
  display:flex;flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.about-corp .work-card:hover{
  transform:translateY(-4px);
  border-color:transparent;
  box-shadow:0 20px 44px rgba(30,42,82,.1);
}
.about-corp .work-card .work-no{
  position:absolute;top:24px;right:28px;
  font-family:var(--font-en);font-size:46px;font-weight:800;
  line-height:1;letter-spacing:-.02em;
  color:rgba(30,42,82,.06);user-select:none;
}
.about-corp .work-card .work-icon{
  width:54px;height:54px;border-radius:14px;
  display:grid;place-items:center;margin-bottom:22px;
  background:rgba(25,118,237,.07);color:var(--blue);
  transition:background .25s ease, color .25s ease;
}
.about-corp .work-card:hover .work-icon{
  background:linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%);
  color:var(--navy-deep);
}
.about-corp .work-card .work-icon svg{width:26px;height:26px;}
.about-corp .work-card h3{
  font-size:17px;font-weight:800;color:var(--navy);
  letter-spacing:-.005em;line-height:1.5;margin-bottom:12px;
}
.about-corp .work-card p{
  font-size:13px;color:var(--text-sub);line-height:1.95;
  letter-spacing:.02em;margin:0;
}

/* === COMPANY（BaseInfo dl 直排・カードなし） === */
.about-corp .company-list{
  display:flex;flex-direction:column;
  max-width:880px;margin:0 auto;
  border-top:1px solid var(--line);
}
.about-corp .company-list dl{
  display:grid;grid-template-columns:180px 1fr;gap:24px;
  padding:22px 0;border-bottom:1px solid var(--line);
  align-items:center;margin:0;
}
.about-corp .company-list dt{
  font-size:11.5px;font-weight:700;color:var(--text-mute);
  letter-spacing:.18em;text-transform:uppercase;
  font-family:var(--font-en);line-height:1.6;
  display:flex;flex-direction:column;gap:3px;
}
.about-corp .company-list dt .jp{
  font-family:var(--font-jp);font-size:13px;font-weight:800;
  color:var(--navy);letter-spacing:.04em;text-transform:none;
}
.about-corp .company-list dd{
  font-size:14px;color:var(--text);line-height:1.9;
  margin:0;letter-spacing:.02em;
}
.about-corp .company-list dd strong{color:var(--navy);font-weight:700;}
.about-corp .company-list dd .post{
  font-family:var(--font-en);font-weight:700;color:var(--navy);
  margin-right:8px;letter-spacing:.04em;
}
.about-corp .company-list dd .kana{
  display:block;color:var(--text-mute);font-size:11.5px;
  margin-top:3px;letter-spacing:.04em;
}

/* === LINEUP（4 列グリッド・罫線区切り） === */
.about-corp .lineup-row{
  display:grid;grid-template-columns:repeat(4, 1fr);gap:0;
  border-top:1px solid var(--line);
}
.about-corp .lineup-item{
  padding:32px 24px 32px 0;border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;gap:12px;
  text-decoration:none;color:inherit;transition:background .25s;
  min-height:200px;position:relative;
}
.about-corp .lineup-item + .lineup-item{border-left:1px solid var(--line);padding-left:24px;}
.about-corp .lineup-item:hover{background:rgba(25,118,237,.03);}
.about-corp .lineup-item .num{
  font-family:var(--font-en);font-size:11px;font-weight:700;
  color:var(--text-mute);letter-spacing:.2em;
}
.about-corp .lineup-item h4{
  font-size:17px;font-weight:800;color:var(--navy);
  letter-spacing:-.005em;line-height:1.55;
}
.about-corp .lineup-item p{
  font-size:12.5px;color:var(--text-sub);line-height:1.85;
  flex:1;letter-spacing:.02em;
}
.about-corp .lineup-item .arrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-en);font-size:11px;font-weight:800;
  color:var(--blue);letter-spacing:.18em;margin-top:4px;
}
.about-corp .lineup-item .arrow::after{
  content:"";width:24px;height:1px;background:var(--blue);
  transition:width .25s;
}
.about-corp .lineup-item:hover .arrow::after{width:38px;}

/* === CTA カード（corporate の form-card と同じ明色カード地） === */
.about-corp .cta-card{
  position:relative;overflow:hidden;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:18px;
  padding:72px 64px;
  text-align:center;
  display:flex;flex-direction:column;align-items:center;
}
.about-corp .cta-card::before{
  content:"";position:absolute;top:-140px;right:-140px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle, rgba(245,184,31,.1) 0%, transparent 70%);pointer-events:none;
}
.about-corp .cta-card::after{
  content:"";position:absolute;bottom:-160px;left:-140px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle, rgba(25,118,237,.08) 0%, transparent 70%);pointer-events:none;
}
.about-corp .cta-card .cta-headline .accent{color:var(--blue);}

/* === RESPONSIVE === */
@media (max-width: 960px){
  .about-corp .work-grid{grid-template-columns:1fr;gap:20px;}
  .about-corp .work-head{margin-bottom:36px;}
  .about-corp .lineup-row{grid-template-columns:repeat(2, 1fr);}
  .about-corp .lineup-item{min-height:180px;}
  .about-corp .lineup-item:nth-child(2){border-left:1px solid var(--line);padding-left:24px;}
  .about-corp .lineup-item:nth-child(3){border-left:none;padding-left:0;}
  .about-corp .cta-card{padding:48px 32px;}
}
@media (max-width: 760px){
  .about-corp .work-card{padding:32px 26px 30px;}
  .about-corp .lineup-row{grid-template-columns:1fr;}
  .about-corp .lineup-item,
  .about-corp .lineup-item:nth-child(2){border-left:none;padding-left:0;}
  .about-corp .company-list dl{grid-template-columns:1fr;gap:6px;padding:18px 0;}
  .about-corp .cta-card{padding:36px 24px;border-radius:14px;}
}