/* ===== DTJ本体HP（会社サイト）— マーケ＋ v3 の style.css に足す分だけ
   色・書体・ボタン・節見出しは /marketing-plus/style.css をそのまま使う。新しい色コードは作らない。 ===== */

/* ロゴ：DTJの四角＋社名 */
.brand .mk{min-width:44px;height:30px;padding:0 6px;background:var(--navy);color:var(--paper);display:grid;place-items:center;font-family:var(--en);font-size:13px;letter-spacing:.04em}
.brand .nm{font-family:var(--en);font-weight:800;font-size:20px;letter-spacing:.02em}

/* 1画面目：使命 */
.hero .mission{font-size:13px;color:var(--navy);letter-spacing:.2em;margin-bottom:14px}
.hero-fig .badge.biz div{font-size:13px;line-height:1.6;text-align:center}
.hero-fig .badge.biz b{font-size:14px}

/* SERVICE：マーケ＋を大きく、サブ2つを並べる */
.biz{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.biz .bz{border:1px solid var(--line);background:var(--paper);padding:32px;display:flex;flex-direction:column;position:relative}
.biz .bz .lbl{font-size:13px;font-weight:700;color:var(--ink2)}
.biz .bz h3{font-size:clamp(20px,1.9vw,26px);font-weight:900;margin-top:8px}
.biz .bz p{margin-top:14px;color:var(--ink2);font-size:15px}
.biz .bz .vm{margin-top:auto;padding-top:20px}
.biz .bz:hover{border-color:var(--navy)}
.biz .bz.main{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:0;padding:0;border:0;background:var(--navy);color:var(--paper)}
.biz .bz.main .in{padding:44px 48px;display:flex;flex-direction:column}
.biz .bz.main .lbl{color:rgba(255,255,255,.8)}
.biz .bz.main h3{font-size:clamp(26px,2.6vw,36px);display:flex;align-items:center;gap:12px}
.biz .bz.main h3 i{width:28px;height:28px;background:var(--paper);display:inline-block;position:relative;flex:none}
.biz .bz.main h3 i::before,.biz .bz.main h3 i::after{content:"";position:absolute;background:var(--navy)}
.biz .bz.main h3 i::before{left:12px;top:6px;width:4px;height:16px}
.biz .bz.main h3 i::after{left:6px;top:12px;width:16px;height:4px}
.biz .bz.main .kc{font-size:clamp(20px,1.8vw,24px);font-weight:900;margin-top:18px;color:var(--paper)}
.biz .bz.main p{color:rgba(255,255,255,.9)}
.biz .bz.main .acts{margin-top:28px}
.biz .bz.main .ph{position:relative;overflow:hidden;min-height:280px}
.biz .bz.main .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.biz .bz.main .tag{display:inline-block;align-self:flex-start;font-family:var(--en);font-size:12px;letter-spacing:.12em;border:1px solid rgba(255,255,255,.6);padding:2px 10px;margin-bottom:16px}

/* APPROACH：4つの情報 → 4つの段 */
.appr{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:stretch}
.appr .info{background:var(--paper);border:1px solid var(--line);padding:28px}
.appr .info .k{font-size:13px;font-weight:700;color:var(--navy);letter-spacing:.06em}
.appr .info .k+ul{margin-top:10px}
.appr .info ul+.k{margin-top:24px}
.appr .info li{padding:12px 0;border-top:1px solid var(--line);line-height:1.6}
.appr .info li b{display:block;font-weight:700}
.appr .info li span{font-size:14px;color:var(--ink2)}
.appr .flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;counter-reset:st}
.appr .flow li{background:var(--paper);border-top:4px solid var(--navy);padding:24px 20px;display:flex;flex-direction:column}
.appr .flow li:last-child{background:var(--navy);color:var(--paper)}
.appr .flow .n{font-family:var(--en);font-weight:800;font-size:32px;line-height:1;color:var(--navy)}
.appr .flow li:last-child .n{color:var(--paper)}
.appr .flow b{display:block;font-size:17px;font-weight:900;margin-top:14px;line-height:1.4}
.appr .flow p{font-size:14px;margin-top:10px;color:var(--ink2);line-height:1.7}
.appr .flow li:last-child p{color:rgba(255,255,255,.9)}
.appr .note{grid-column:1 / -1;font-size:12px;color:var(--ink2);margin-top:4px;max-width:none}

/* RESULTS：6つの数字 */
.res{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.res li{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:28px 28px 24px;display:flex;flex-direction:column;gap:6px}
.res .v{font-family:var(--en);font-weight:800;font-size:clamp(44px,4.4vw,60px);line-height:1;color:var(--navy)}
.res .v small{font-family:var(--sans);font-size:16px;font-weight:700;margin-left:4px;color:var(--ink)}
.res .t{font-weight:700;line-height:1.5}
.res-note{font-size:12px;color:var(--ink2);margin-top:16px;max-width:none}

/* TEAM：4名 */
.crew{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 24px}
.crew li{display:flex;flex-direction:column}
.crew .pic{position:relative;width:100%;max-width:200px}
.crew .pic img{width:100%;aspect-ratio:1;object-fit:cover}
.crew .pic::after{content:"";position:absolute;width:32px;height:32px;background:var(--navy);right:-10px;bottom:-10px}
.crew .role{font-size:12px;font-weight:700;color:var(--navy);margin-top:24px;letter-spacing:.04em}
.crew .nm{font-size:20px;font-weight:900;line-height:1.3;margin-top:4px}
.crew p{font-size:14px;color:var(--ink2);margin-top:12px;line-height:1.8}
.crew-note{font-size:12px;color:var(--ink2);margin-top:28px;max-width:none}

/* 会社概要 */
.co-wrap .co-tbl{max-width:none}

@media (max-width:1024px){
  .appr{grid-template-columns:1fr}
  .crew{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:768px){
  .biz{grid-template-columns:1fr}
  .biz .bz.main{grid-template-columns:1fr}
  .biz .bz.main .in{padding:32px 24px}
  .biz .bz.main .ph{min-height:200px;order:-1}
  .biz .bz{padding:28px 24px}
  .appr .flow{grid-template-columns:1fr 1fr}
  .res{grid-template-columns:1fr 1fr}
  .res li{padding:20px 16px}
  .brand .nm{font-size:16px}
}
@media (max-width:480px){
  .crew{grid-template-columns:1fr}
  .crew .pic{max-width:160px}
  .appr .flow{grid-template-columns:1fr}
}

/* 1画面目の3つの入口 */
.hbiz{margin-top:24px;max-width:440px;border-top:1px solid var(--line)}
.hbiz a{display:flex;align-items:center;gap:10px;min-height:48px;border-bottom:1px solid var(--line);font-weight:700;font-size:15px;color:var(--ink);padding-right:4px}
.hbiz a .arw{width:14px;height:14px;margin-left:auto;color:var(--navy)}
.hbiz a:hover{color:var(--navy)}
.hbiz .m a{font-size:17px;font-weight:900;color:var(--navy)}
.hbiz .l{font-family:var(--en);font-size:11px;letter-spacing:.1em;background:var(--navy);color:var(--paper);padding:2px 8px}
@media (max-width:768px){.hbiz{max-width:none;text-align:left}}

/* フッターのロゴ：.gf .cols a の「—」と縦積みを外す */
.gf .cols a.brand{display:inline-flex;align-items:center;gap:10px;padding:0;font-size:inherit;color:var(--ink)}
.gf .cols a.brand::before{display:none}
.gf .cols a.brand .mk{width:auto;flex:none}

/* 改行の位置（10/9 独立点検の指摘）：見出しは行をそろえ、本文は最後の1〜2文字だけ落ちないようにする */
.sec h2,.sec h3,.sub-hero h1,.sub-hero .claim,.close h2,.evc h3,.evc .sub,.ocard b,.appr .flow b,.crew .nm{text-wrap:balance}
.appr .flow p,.scene p,.pm-steps p,.prog dd,.ex p,.evc .desc,.sl figcaption,.out p,.forms p,.time p,.crew p,.lead{text-wrap:pretty}
.gf .brand .nm{white-space:nowrap}
/* 下層の1画面目：英字はラベル、サービス名を一番大きく（マーケ＋の下層と同じ階層） */
.sub-hero .shead .en{font-size:13px;letter-spacing:.2em;color:var(--navy);line-height:1.6}
/* 会社概要：スマホでは見出しの下に値を置く */
@media (max-width:768px){
  .co-wrap .co-tbl th,.co-wrap .co-tbl td{display:block;width:auto;border:0}
  .co-wrap .co-tbl th{padding:16px 0 2px 16px}
  .co-wrap .co-tbl th::before{top:26px}
  .co-wrap .co-tbl td{padding:0 0 16px;border-bottom:1px solid var(--line)}
}