/* ===== DTJ本体HP 下層（dx-pm.html / ai-kenshu.html）だけで使う分
   色・書体・ボタン・節見出し・.sub-hero は /marketing-plus/style.css と sub-service.css のまま。新しい色コードは作らない。 ===== */

/* 1画面目：サービス名を一番大きく → 看板の一文 → リード → 3つの事実 */
.sub-hero .svc-name{font-size:clamp(28px,3.2vw,44px);font-weight:900;line-height:1.3;margin-top:12px;letter-spacing:.02em}
.sub-hero .claim{font-size:clamp(18px,1.7vw,22px);font-weight:900;color:var(--navy);line-height:1.6;margin-top:14px}
.sub-hero .facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:22px;max-width:560px;border-top:1px solid var(--line)}
.sub-hero .facts li{padding:12px 12px 0 0;display:flex;flex-direction:column;gap:2px;position:relative}
.sub-hero .facts li::before{content:"";position:absolute;left:0;top:-1px;width:28px;height:3px;background:var(--navy)}
.sub-hero .facts b{font-size:15px;font-weight:900;line-height:1.4}
.sub-hero .facts span{font-size:12px;color:var(--ink2);line-height:1.5}
.sub-hero .fig .ph img{aspect-ratio:4/5;object-fit:cover;height:auto}

.sub-note{font-size:12px;color:var(--ink2);margin-top:20px;max-width:none}

/* こんな場面で（3枚）／AIの3点 */
.scene{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.scene li{background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--navy);padding:28px 26px}
.scene .en{font-size:12px;color:var(--navy);letter-spacing:.12em}
.scene b{display:block;font-size:18px;font-weight:900;line-height:1.5;margin-top:10px}
.scene p{font-size:15px;color:var(--ink2);margin-top:10px;line-height:1.8}
.sec:not(.tint) .scene li{background:var(--paper2)}

/* PM支援の4段 */
.pm-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.pm-steps li{background:var(--paper2);border-top:4px solid var(--navy);padding:26px 22px;display:flex;flex-direction:column}
.pm-steps li:last-child{background:var(--navy);color:var(--paper)}
.pm-steps .n{font-family:var(--en);font-weight:800;font-size:32px;line-height:1;color:var(--navy)}
.pm-steps li:last-child .n{color:var(--paper)}
.pm-steps b{display:block;font-size:18px;font-weight:900;margin-top:14px}
.pm-steps p{font-size:14px;margin-top:10px;color:var(--ink2);line-height:1.8}
.pm-steps li:last-child p{color:rgba(255,255,255,.9)}
.pm-steps li:last-child .mk{color:var(--ink)}

/* 作るものの例（見本の画面） */
.outs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.out h3{font-size:19px;font-weight:900;margin-top:20px}
.out p{font-size:15px;color:var(--ink2);margin-top:8px}
.scr .db{padding:30px 16px 16px;background:var(--paper)}
.scr .kl{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.scr .kl span{border:1px solid var(--line);padding:8px;font-size:10px;font-weight:700;color:var(--ink);position:relative}
.scr .kl span::after{content:"";display:block;height:8px;background:var(--navy);opacity:.6;width:60%;margin-top:6px}
.scr .bars{display:flex;align-items:flex-end;gap:6px;height:110px;margin-top:14px;border-bottom:1px solid var(--line)}
.scr .bars i{flex:1;height:var(--h);background:var(--navy);opacity:.75}
.scr .bars i:nth-child(odd){opacity:.35}
.scr .rows i{display:block;height:14px;width:var(--w);background:var(--navy);opacity:.7;margin:8px 0}
.scr .rows i:nth-child(n+4){opacity:.3}
.scr.mkt .db{min-height:194px}

/* 関わり方の2つ */
.forms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.forms .fm{border:1px solid var(--line);padding:32px;background:var(--paper)}
.forms .fm.main{background:var(--navy);color:var(--paper);border-color:var(--navy)}
.forms .en{font-size:12px;letter-spacing:.14em;color:var(--navy)}
.forms .fm.main .en{color:rgba(255,255,255,.8)}
.forms b{display:block;font-size:21px;font-weight:900;margin-top:8px}
.forms p{font-size:15px;margin-top:12px;color:var(--ink2);line-height:1.8}
.forms .fm.main p{color:rgba(255,255,255,.9)}

/* 経営者育成：6回 */
.prog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.prog li{background:var(--paper);border:1px solid var(--line);padding:26px 24px}
.prog .n{font-family:var(--en);font-weight:800;font-size:28px;line-height:1;color:var(--navy)}
.prog b{display:block;font-size:18px;font-weight:900;margin-top:10px}
.prog dl{margin-top:14px;border-top:1px solid var(--line)}
.prog dt{font-size:12px;font-weight:700;color:var(--navy);margin-top:12px}
.prog dd{font-size:14px;color:var(--ink2);line-height:1.75;margin-top:2px}
.prog li:last-child{border-color:var(--navy);box-shadow:inset 0 4px 0 var(--navy)}

/* 例：店長の6段 */
.ex{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;counter-reset:e}
.ex li{background:var(--paper2);padding:20px 16px;position:relative}
.ex li:not(:last-child)::after{content:"";position:absolute;right:-8px;top:28px;border:6px solid transparent;border-left-color:var(--navy);z-index:1}
.ex .n{font-family:var(--en);font-weight:800;font-size:20px;color:var(--navy)}
.ex p{font-size:14px;line-height:1.75;margin-top:8px;color:var(--ink)}
.ex li:last-child{background:var(--navy)}
.ex li:last-child .n,.ex li:last-child p{color:var(--paper)}

/* 毎回の2時間 */
.time{border-top:1px solid var(--line);max-width:900px}
.time li{display:grid;grid-template-columns:140px 220px 1fr;gap:16px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--line)}
.time .t{font-family:var(--en);font-weight:800;color:var(--navy);font-size:16px}
.time b{font-weight:900;font-size:17px}
.time p{font-size:15px;color:var(--ink2)}

/* ほかの事業 */
.others{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.ocard{border:1px solid var(--line);background:var(--paper);padding:28px 30px;display:flex;flex-direction:column;gap:6px}
.ocard:hover{border-color:var(--navy)}
.ocard .lbl{font-size:13px;font-weight:700;color:var(--ink2)}
.ocard b{font-size:21px;font-weight:900}
.ocard .d{font-size:15px;color:var(--ink2)}
.ocard .vm{margin-top:12px}

@media (max-width:1024px){
  .pm-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prog{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ex{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:16px}
  .ex li:nth-child(3)::after{display:none}
}
@media (max-width:768px){
  .scene,.outs,.forms,.others,.prog{grid-template-columns:1fr}
  .sub-hero .facts{max-width:none;text-align:left}
  .time li{grid-template-columns:1fr;gap:4px}
  .ex{grid-template-columns:1fr}
  .ex li::after{display:none}
  .forms .fm{padding:26px 22px}
}
@media (max-width:480px){
  .pm-steps{grid-template-columns:1fr}
  .sub-hero .facts{grid-template-columns:1fr}
  .sub-hero .facts li{padding:10px 0;border-bottom:1px solid var(--line)}
}

/* ===== イベント一覧 ===== */
.ev-hero{padding-bottom:48px}
.evlist{display:grid;gap:24px}
.evc{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);background:var(--paper);border:1px solid var(--line)}
.evc:hover{border-color:var(--navy)}
.evc .pic{display:block;background:var(--paper2);overflow:hidden}
.evc .pic{align-self:start}
.evc .pic img{width:100%;height:auto;display:block}
.evc .bd{padding:28px 32px;display:flex;flex-direction:column;align-items:flex-start}
.evc .tags{display:flex;gap:8px;flex-wrap:wrap}
.evc .cat,.evc .st{font-size:12px;font-weight:700;padding:2px 10px;letter-spacing:.04em}
.evc .cat{background:var(--navy);color:var(--paper)}
.evc .st{border:1px solid var(--navy);color:var(--navy)}
.evc .st.done{border-color:var(--line);color:var(--ink2);background:var(--paper2)}
.evc .meta{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:14px;font-size:13px;color:var(--ink2)}
.evc .meta b{color:var(--navy);margin-right:6px}
.evc h3{font-size:clamp(17px,1.6vw,20px);font-weight:900;line-height:1.6;margin-top:12px}
.evc .sub{font-size:14px;font-weight:700;color:var(--navy);margin-top:4px}
.evc .desc{font-size:14px;color:var(--ink2);line-height:1.85;margin-top:10px}
.evc .host{font-size:12px;color:var(--ink2);margin-top:12px;padding-top:10px;border-top:1px solid var(--line);align-self:stretch}
.evc .btn{margin-top:16px}

/* ===== 無料スライド ===== */
.slides{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}
.sl .frame{border:1px solid var(--line);box-shadow:var(--sh);background:var(--paper)}
.sl .frame img{width:100%;display:block}
.sl figcaption{font-size:14px;color:var(--ink2);margin-top:14px;line-height:1.8}
.sl figcaption b{display:block;font-size:17px;font-weight:900;color:var(--ink);margin-bottom:4px}
.lm{max-width:720px}
.lm .card{background:var(--paper);border:1px solid var(--line);padding:clamp(24px,4vw,44px)}
.lm .fld{margin-bottom:24px}
.lm label.lb{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;margin-bottom:8px}
.lm .req,.lm .opt{font-size:11px;font-weight:700;padding:1px 8px;letter-spacing:.08em;line-height:1.7}
.lm .req{background:var(--navy);color:var(--paper)}
.lm .opt{background:var(--paper2);color:var(--ink2);border:1px solid var(--line)}
.lm input[type=text],.lm input[type=email],.lm select{width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--paper);border:1px solid #9CA3AF;padding:12px 14px;line-height:1.7}
.lm input:focus,.lm select:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 2px var(--navy)}
.lm .hint{font-size:12px;color:var(--ink2);margin-top:6px;line-height:1.6}
.lm .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lm .agree{display:flex;gap:12px;align-items:flex-start;background:var(--paper2);border:1px solid var(--line);padding:14px 16px;font-size:14px;color:var(--ink2);margin:28px 0}
.lm .agree input{width:20px;height:20px;margin-top:4px;accent-color:var(--navy);flex:none}
.lm .agree a{color:var(--navy);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.lm .submit .btn{width:100%;max-width:none}
.lm .note{font-size:12px;color:var(--ink2);margin-top:10px;text-align:center;max-width:none}
.lm .err{display:none;background:#FEF3F2;border:1px solid #B42318;color:#B42318;padding:12px 16px;font-size:14px;font-weight:700;margin-bottom:20px}
.lm .err.show{display:block}
.lm .done{display:none;text-align:center}
.lm .done.show{display:block}
.lm .done:focus{outline:none}
.lm .done .ic{width:64px;height:64px;background:var(--navy);display:grid;place-items:center;margin:0 auto 20px}
.lm .done .ic svg{width:30px;height:30px}
.lm .done h2{font-size:clamp(20px,2.4vw,24px);font-weight:700}
.lm .done p{color:var(--ink2);font-size:15px;margin:12px auto 28px;max-width:32em}

@media (max-width:768px){
  .evc{grid-template-columns:1fr}
  .evc .bd{padding:22px 20px}
  .slides{grid-template-columns:1fr}
}
.out .shot{border:1px solid var(--line);box-shadow:var(--sh);background:var(--paper)}
.out .shot img{width:100%;height:auto;display:block}
.out figcaption{margin-top:4px}