/* loop.css — ループ別サービスページ（/loops/*）専用。style.css → sub.css の後に読み込む。 */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
section[id]{scroll-margin-top:60px}
.gray{background:var(--bg2)}

/* 工程タグ（AUTO / AI / HUMAN / DATA） */
.tg{display:inline-block;font-family:var(--en);font-size:10.5px;font-weight:600;letter-spacing:.06em;padding:3px 10px;border:1px solid var(--line-2);border-radius:999px;color:var(--mute);white-space:nowrap}
.tg.h{border-style:dashed;border-color:var(--ink);color:var(--ink)}
.tg.d{background:var(--bg2);border-color:var(--bg2);color:var(--ink)}
.tg.ai{background:var(--blue-l);border-color:var(--blue-l);color:var(--blue)}

/* ====== hero ====== */
.lh{padding:130px 0 100px}
.lh-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:50px;align-items:center}
.crumb{font-family:var(--en);font-size:12px;color:var(--mute);display:flex;gap:10px;margin-bottom:30px;flex-wrap:wrap}
.crumb a{text-decoration:none;transition:color .3s}.crumb a:hover{color:var(--ink)}
.lh h1.big{font-family:var(--en);font-size:clamp(42px,5.4vw,80px);font-weight:600;line-height:1;letter-spacing:-.045em;margin-bottom:26px}
.lh h1.big em{font-style:normal;color:var(--dim)}
.lh .lead{font-size:clamp(20px,2.2vw,28px);font-weight:500;line-height:1.5;margin-bottom:16px}
.lh .mute{max-width:32em}
.lh .row{display:flex;gap:26px;align-items:center;flex-wrap:wrap;margin-top:32px}
.lh-v{position:relative;height:calc(100vh - 190px);min-height:460px;max-height:720px}
.lh-v canvas{position:absolute;inset:0;width:100%;height:100%}

/* ====== service ====== */
.area{margin-top:90px}
.area:first-of-type{margin-top:64px}
.ah{display:grid;grid-template-columns:90px 1fr;gap:20px;align-items:start}
.ah .no{font-family:var(--en);font-size:44px;font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--dim)}
.ah .en{font-family:var(--en);font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--blue);margin-bottom:8px}
.ah h3{font-size:clamp(20px,2.2vw,26px);letter-spacing:-.01em;margin-bottom:8px}
.ah p{color:var(--mute);font-size:14px}
.feats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:30px}
.ft{background:#fff;border:1px solid var(--line);border-radius:4px;padding:24px 22px 26px;transition:border-color .4s,transform .6s var(--ease),box-shadow .6s var(--ease)}
.ft:hover{border-color:var(--ink);transform:translateY(-4px);box-shadow:0 18px 40px -26px rgba(17,17,17,.35)}
.ft h4{font-size:16px;font-weight:600;line-height:1.45;margin:16px 0 8px}
.ft p{font-size:13.5px;color:var(--mute);line-height:1.8}

/* ====== difference (dark) ====== */
.dk{background:var(--ink);color:#fff}
.dk .cat{color:#9aa0a6}.dk h2.big em{color:#5b5f66}
.dtbl{margin-top:56px;border-top:1px solid #fff}
.dr{display:grid;grid-template-columns:170px 1fr 1fr;gap:28px;padding:22px 0;border-bottom:1px solid #2a2d31;font-size:15px;align-items:baseline}
.dr>span:first-child{font-size:12.5px;color:#9aa0a6}
.dr>span:nth-child(2){color:#8a9096}
.dr .us{color:#fff}
.dr.hd{padding:14px 0;font-family:var(--en);font-size:11px;letter-spacing:.08em}
.dr.hd>span{font-size:11px;color:#6b7075}.dr.hd .us{color:var(--blue)}

/* ====== the loop ====== */
.lp-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:80px;margin-top:56px;align-items:start}
.lchain{list-style:none;border-top:1px solid var(--ink)}
.lchain li{display:grid;grid-template-columns:36px 1fr auto;gap:16px;align-items:center;padding:15px 0;border-bottom:1px solid var(--line);font-size:15px;transition:color .5s,padding-left .5s var(--ease)}
.lchain li .n{font-family:var(--en);font-size:12px;color:var(--dim)}
.lchain li.act{color:var(--blue);padding-left:10px}.lchain li.act .n{color:var(--blue)}.lchain li.act .tg{border-color:var(--blue);color:var(--blue)}
.rets{display:grid;gap:36px}
.ret{border-top:1px solid var(--ink);padding-top:20px}
.ret .n{font-family:var(--en);font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--blue);margin-bottom:10px}
.ret h3{font-size:20px;margin-bottom:8px}
.ret p{font-size:14px;color:var(--mute)}

/* ====== function ====== */
.fn{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:56px}
.fn>div{position:relative;padding-top:22px}
.fn .draw{position:absolute;left:0;right:0;top:0;height:1px;background:var(--ink)}
.fn h3{font-size:18px;margin-bottom:14px}
.fn ul{list-style:none}
.fn li{padding:11px 0 11px 18px;border-top:1px solid var(--line-2);font-size:14px;position:relative}
.fn li::before{content:"";position:absolute;left:0;top:50%;width:8px;height:1px;background:var(--blue)}
.tools{margin-top:64px}
.tools .n{font-family:var(--en);font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--mute);margin-bottom:14px}
.tools ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.tools li{font-size:13px;padding:7px 14px;background:#fff;border:1px solid var(--line);border-radius:999px}

/* ====== mid CTA ====== */
.mcta{padding:120px 0}
.mcta .pcta{margin-top:0}
.mcta .pcta h2{font-family:var(--jp);font-size:clamp(24px,3vw,38px);letter-spacing:-.02em;line-height:1.35}

/* ====== governance ====== */
.gov{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:56px}
.gov>div{position:relative;padding-top:22px}
.gov .draw{position:absolute;left:0;right:0;top:0;height:1px;background:var(--ink)}
.gov .n{font-family:var(--en);font-size:12px;color:var(--mute);margin-bottom:14px;letter-spacing:.04em}
.gov h3{margin-bottom:10px;line-height:1.45}.gov p{font-size:14px;color:var(--mute)}

/* ====== faq ====== */
#faq .faq{margin-top:48px;max-width:880px}
#faq .faq p{max-width:none}

/* ====== other loops ====== */
.ol{margin-top:48px;border-top:1px solid var(--ink)}
.ol a{display:grid;grid-template-columns:36px 200px 1fr auto;gap:20px;align-items:center;padding:20px 0;border-bottom:1px solid var(--line);text-decoration:none;transition:color .3s,padding-left .5s var(--ease)}
.ol .n{font-family:var(--en);font-size:12px;color:var(--dim)}
.ol .t{font-size:16px;font-weight:600}
.ol .t small{font-family:var(--en);font-size:12px;font-weight:400;color:var(--dim);margin-left:8px}
.ol .s{font-size:13px;color:var(--mute)}
.ol .a{font-family:var(--en);color:var(--dim);transition:transform .5s var(--ease),color .3s}
.ol a:hover{color:var(--blue);padding-left:8px}.ol a:hover .a{color:var(--blue);transform:translateX(6px)}

@media (max-width:1000px){
  .feats{grid-template-columns:1fr 1fr}
  .gov{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  section{padding:100px 0}
  .lh{padding:110px 0 70px}
  .lh-grid{grid-template-columns:1fr;gap:10px}
  .lh h1.big{font-size:12vw}
  .lh-v{height:96vw;max-height:540px;min-height:0}
  .lp-grid{grid-template-columns:1fr;gap:48px}
  .fn{grid-template-columns:1fr;gap:28px}
  .dr{grid-template-columns:1fr;gap:6px;padding:18px 0}
  .dr.hd{display:none}
  .dr>span:nth-child(2)::before{content:"TYPICAL　";font-family:var(--en);font-size:10.5px;letter-spacing:.06em;color:#6b7075}
  .dr .us::before{content:"WOOP　";font-family:var(--en);font-size:10.5px;letter-spacing:.06em;color:var(--blue)}
  .ol a{grid-template-columns:36px 1fr auto;gap:4px 16px}
  .ol .s{grid-column:2;grid-row:2}
  .ol .a{grid-row:1/3;grid-column:3}
  .mcta{padding:80px 0}
}
@media (max-width:640px){
  .feats,.gov{grid-template-columns:1fr}
  .ah{grid-template-columns:1fr;gap:10px}
  .ah .no{font-size:32px}
}