/* ============================================================
   MUKIAI v2 追加の区画（2026-09-30 代表決定）。top.css → space.css（→ pages.css → pages-space.css）のあとに読む。
   1. 自社での実践（#practice）…トップと会社概要。お客さまの実績ではなく、自分たちで作って使っている仕組み
   2. お預かりした情報の扱い（#trust）…トップ、サービス、会社概要。約束は2つだけ。鍵や錠前の絵は使わず、静かな面と線
   3. LINE で資料を受け取る…ボタンの言葉が長くなったぶんの調整と、フッターの一言
   規律は space.css と同じ（空は黒、光るのは線だけ、面は半透明）。
   ============================================================ */

/* ---------------- 1. 自社での実践 ---------------- */
.prac-list{display:grid;gap:18px;margin-top:clamp(40px,5vw,72px)}
.prac{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(20px,3.4vw,56px);align-items:center;padding:clamp(16px,2vw,28px);border-radius:var(--r);
  background:linear-gradient(160deg,var(--glass-hi),rgba(255,255,255,.015)),var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:inset 0 0 0 1px var(--hair),inset 0 1px 0 rgba(255,255,255,.07)}
/* イラストは白地の線画なので、明暗だけ反転して（色みは保つ）、暗い面の上の光る線として見せる */
.prac-fig{border-radius:16px;overflow:hidden;background:#060B1C;box-shadow:inset 0 0 0 1px var(--hair-2);padding:clamp(12px,1.8vw,26px)}
.prac-fig img{width:100%;height:auto;filter:invert(1) hue-rotate(180deg);mix-blend-mode:screen}
.prac-k{font-family:var(--font-en);font-weight:800;font-size:13px;letter-spacing:.14em;color:var(--soft)}
.prac h3{margin-top:6px;font-size:clamp(20px,2vw,30px);font-weight:900;line-height:1.4;letter-spacing:-.01em;color:#fff}
.prac p:not(.prac-k){margin-top:10px;font-size:15px;line-height:1.85;color:var(--txt-2)}
.prac-more{margin-top:clamp(40px,5vw,72px);display:grid;grid-template-columns:.75fr 1.6fr;gap:clamp(24px,4vw,64px);align-items:start}
.prac-more-h{font-size:clamp(20px,2vw,28px);font-weight:900;line-height:1.4;color:#fff}
.prac-more-h+p{margin-top:12px;font-size:14px;line-height:1.85;color:var(--txt-3)}
.prac-more .arrow-link{margin-top:18px}
.prac-areas{display:grid;border-top:1px solid var(--hair-2)}
.prac-areas li{display:grid;grid-template-columns:12em 3.4em 1fr;gap:16px;align-items:baseline;padding:15px 4px;border-bottom:1px solid var(--hair);font-size:15px;line-height:1.7}
.prac-areas b{font-weight:900;color:#fff}
.prac-areas .n{font-family:var(--font-en);font-weight:800;font-size:22px;line-height:1;color:#fff}
.prac-areas .n small{font-family:var(--font-ja);font-size:12px;font-weight:700;margin-left:2px;color:var(--txt-3)}
.prac-areas li>span:last-child{color:var(--txt-2)}

/* ---------------- 2. お預かりした情報の扱い（動かさない） ---------------- */
.space .trust-sec{padding-block:clamp(40px,5vw,80px)}
.trust{display:grid;grid-template-columns:.85fr 1.4fr;gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(26px,3.4vw,52px);border-radius:var(--r);
  background:rgba(6,11,28,.84);box-shadow:inset 0 0 0 1px var(--hair)}
.trust h2{font-size:clamp(22px,2.2vw,32px);font-weight:900;line-height:1.35;letter-spacing:-.01em;color:#fff}
.trust-head p{margin-top:10px;font-size:15px;line-height:1.85;color:var(--txt-2)}
.trust-items{display:grid}
.trust-items li{display:flex;gap:20px;align-items:baseline;padding:20px 2px;border-top:1px solid var(--hair-2);font-weight:700;font-size:clamp(16px,1.4vw,20px);line-height:1.6;color:#fff}
.trust-items li:last-child{border-bottom:1px solid var(--hair-2)}
.trust-k{flex:none;font-family:var(--font-en);font-weight:800;font-size:13px;letter-spacing:.14em;color:var(--soft)}

/* ---------------- 3. LINE で資料を受け取る ---------------- */
.foot-line-note{margin-top:12px;font-size:12.5px;line-height:1.7;color:var(--txt-3)}
@media (max-width:760px){
  .space .fixed-bar{grid-template-columns:1.22fr 1fr}
  .space .fixed-bar .btn{font-size:13px;letter-spacing:0;padding:10px 8px}
}
@media (min-width:761px) and (max-width:900px){.space .header-cta .btn{padding:10px 14px;font-size:13px}}

/* ---------------- レスポンシブ ---------------- */
@media (max-width:1080px){.prac-more{grid-template-columns:1fr}}
@media (max-width:860px){
  .prac{grid-template-columns:1fr;gap:14px;-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(10,17,38,.86)}
  .trust{grid-template-columns:1fr}
  .prac-areas li{grid-template-columns:1fr auto;gap:2px 12px}
  .prac-areas li>span:last-child{grid-column:1/-1;font-size:14px}
}