/* ============================================================
   小田警備保障 ｜ 鉛筆イラスト共通スタイル
   ============================================================ */

.pfig{display:block;color:var(--ink-700)}
.pfig .pcl-svg{width:100%;height:auto;display:block}
.pfig .pcl{filter:url(#pcl)}
.pfig .pcl-s{filter:url(#pcl-s)}

/* 暗い帯の上では線を明るく */
.hero .pfig,.page-hero .pfig,.band-dark .pfig,.footer .pfig{color:var(--td)}

/* ---- 描き出し ---- */
.pfig path,.pfig circle,.pfig ellipse,.pfig rect,.pfig line{
  stroke-dasharray:1;stroke-dashoffset:1;stroke-opacity:0}
.pfig.go path,.pfig.go circle,.pfig.go ellipse,.pfig.go rect,.pfig.go line{
  animation:pclDraw var(--dur,.45s) var(--ease) forwards;animation-delay:var(--d,0s)}
@keyframes pclDraw{from{stroke-opacity:1}to{stroke-dashoffset:0;stroke-opacity:1}}
.pfig .fillpart{opacity:0}
.pfig.go .fillpart{animation:pclFade .5s var(--ease) forwards;animation-delay:var(--fd,1s)}
@keyframes pclFade{to{opacity:1}}

/* ---- 描き終わったら腕が動く ---- */
.pfig .arm{transform-box:view-box;transform-origin:176px 136px}
.pfig.go .arm{animation:pclHold 3.6s ease-in-out 2.6s infinite}
.pfig.go .arm-still{animation:pclHold 3.6s ease-in-out 2.6s infinite}
.pfig.go .arm-slow{animation:pclSlow 1.15s ease-in-out 2.6s infinite}
.pfig.go .arm-go{animation:pclGo .82s ease-in-out 2.6s infinite}
@keyframes pclHold{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-3.2deg)}}
@keyframes pclSlow{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(6deg)}}
@keyframes pclGo{0%,100%{transform:rotate(-17deg)}50%{transform:rotate(14deg)}}

/* ---- 置き場所 ---- */
.pcl-row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,40px);align-items:end;margin-top:34px}
.pcl-card{background:#fff;border:1px solid var(--line);padding:20px 20px 8px;text-align:center}
.pcl-card .pfig{max-width:210px;margin:0 auto}
.pcl-card h4{font-family:var(--ff-serif);font-size:17px;font-weight:600;margin-top:6px}
.pcl-card p{font-size:13.5px;color:var(--text-soft);line-height:1.8;margin:6px 0 16px}
.pcl-lead{max-width:260px;margin-inline:auto}

/* 着る順番のステップ */
.dress-wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,52px);align-items:center;margin-top:30px}
.dress-wrap .pfig{max-width:300px;margin-inline:auto}
.pcl-steps{display:grid;gap:13px}
.pcl-steps li{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:baseline;opacity:.26}
.dress-wrap.go .pcl-steps li{animation:pclStep .4s var(--ease) forwards;animation-delay:var(--sd)}
@keyframes pclStep{to{opacity:1}}
.pcl-steps li i{width:9px;height:9px;background:var(--gold-500);display:block;margin-top:.55em}
.pcl-steps li b{font-family:var(--ff-serif);font-weight:600;font-size:16px}
.pcl-steps li span{grid-column:2;color:var(--text-soft);font-size:14px;line-height:1.7}

@media (max-width:860px){
  .pcl-row{grid-template-columns:1fr;gap:22px}
  .dress-wrap{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .pfig path,.pfig circle,.pfig ellipse,.pfig rect,.pfig line{
    stroke-dashoffset:0!important;stroke-opacity:1!important;animation:none!important}
  .pfig .fillpart{opacity:1!important;animation:none!important}
  .pfig .arm,.pfig.go .arm{animation:none!important}
  .pcl-steps li{opacity:1!important;animation:none!important}
}

/* ---- 置き場所ごとの大きさ ---- */
.gd-step .pfig{max-width:200px;margin-inline:auto}
.gd-step .pfig[data-fig="scene-pack"]{max-width:420px}
.road-anim{max-width:780px;margin-inline:auto}
.sigbox{max-width:290px;margin-inline:auto}
.sig-name{font-family:var(--ff-serif);font-size:18px;font-weight:600;color:var(--gold-400);margin-bottom:2px}
.signal{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,48px);align-items:center}
@media (max-width:860px){
  .signal{grid-template-columns:1fr}
  .sigbox{max-width:230px}
  .gd-step .pfig{max-width:160px}
}

/* ---- トップのヒーローに立つ隊員 ---- */
.hero-guard{position:absolute;right:13%;bottom:9%;width:min(21vw,258px);z-index:3;
  filter:drop-shadow(0 26px 60px rgba(0,0,0,.5))}
.hero-guard .pcl-svg{stroke-width:3.8}
@media (max-width:1180px){.hero-guard{right:5%;width:20vw;opacity:.9}}
@media (max-width:860px){.hero-guard{display:none}}

/* ---- 業務内容・会社案内の場面イラスト ---- */
.detail-visual.pfig{display:grid;place-items:center;padding:clamp(16px,2.4vw,30px)}
.detail-visual.pfig .pcl-svg{width:100%;max-width:420px}

/* ---- 実績ページ：事例・ギャラリーの枠 ---- */
.case-img.pfig,.gal.pfig{display:grid;place-items:center;overflow:hidden}
.case-img.pfig .pcl-svg,.gal.pfig .pcl-svg{width:86%;max-width:340px}
.case-img.pfig .kind,.case-img.pfig .tagline,.gal.pfig span{z-index:2}
.gal.pfig .pcl-svg{width:92%}
.case-img.pfig{align-items:start;padding-top:4px}
.case-img.pfig::after{content:'';position:absolute;left:0;right:0;bottom:0;height:58%;z-index:1;
  background:linear-gradient(transparent,rgba(238,243,243,.94) 72%)}
.case-img.pfig .pcl-svg{width:78%;max-width:300px}
.gal.pfig::after{content:'';position:absolute;left:0;right:0;bottom:0;height:44%;z-index:1;
  background:linear-gradient(transparent,rgba(238,243,243,.92) 76%)}