/* セコサポ ツールの使い方アニメ */
.sha{--ac:#0E2438;margin:22px 0 14px;border:1px solid #dfe7f1;border-radius:18px;background:#fff;box-shadow:0 8px 24px rgba(14,36,56,.12);overflow:hidden}
.sha-hd{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;background:var(--ac);color:#fff}
.sha-eye{flex:0 0 auto;background:#FFD400;color:#0E2438;font-weight:900;font-size:12px;padding:3px 11px;border-radius:99px;letter-spacing:.04em}
.sha-title{font-weight:900;font-size:17px;line-height:1.4;color:#fff}
.sha-title small{display:inline-block;margin-left:8px;font-size:12px;font-weight:700;opacity:.9}
.sha-body{padding:14px 14px 10px;background:#f4f7fb}
.sha-foot{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;justify-content:space-between;padding:10px 16px 12px;font-size:12.5px;line-height:1.6;color:#64748b;background:#fff;border-top:1px solid #eef2f7}
.sha-more{font-weight:800;color:var(--ac) !important;text-decoration:none !important;white-space:nowrap}
.sha-more:hover{text-decoration:underline !important}

.sha-text{margin:0 0 26px;border:2px solid #dfe7f1;border-radius:14px;background:#fff;overflow:hidden}
.sha-text>summary{display:flex;align-items:center;gap:10px;padding:12px 16px;cursor:pointer;list-style:none;font-weight:900;color:#1b2433;background:#f4f7fb;user-select:none}
.sha-text>summary::-webkit-details-marker{display:none}
.sha-text>summary:hover{background:#e8eef6}
.sha-sum-ic{flex:0 0 32px;height:32px;border-radius:9px;background:#0E2438;color:#fff;display:grid;place-items:center;font-size:16px}
.sha-sum-t{flex:1;font-size:15px}
.sha-sum-t small{display:block;font-size:12px;font-weight:700;color:#64748b;margin-top:1px}
.sha-sum-hint{flex:0 0 auto;font-size:12px;font-weight:800;color:#fff;background:#0E2438;border-radius:99px;padding:5px 12px}
.sha-sum-hint::after{content:"▾";margin-left:5px;display:inline-block;transition:transform .2s}
.sha-text[open]>.sha-sum-hint::after,.sha-text[open]>summary .sha-sum-hint::after{transform:rotate(180deg)}
.sha-text-in{padding:6px 16px 10px}
.sha-text-in>:first-child{margin-top:8px}

@media (max-width:640px){
  .sha{margin:16px 0 12px;border-radius:14px}
  .sha-hd{padding:10px 12px}
  .sha-title{font-size:15.5px}
  .sha-title small{display:block;margin:2px 0 0}
  .sha-body{padding:10px 8px 8px}
  .sha-foot{padding:9px 12px 11px;font-size:12px}
  .sha-text>summary{padding:10px 12px}
  .sha-text-in{padding:4px 12px 8px}
}

/* 記事の幅が狭いとき（〜900px）は図を大きく、手順は2列 */
.sha-body{container-type:inline-size}
@container (max-width:900px){
  .sha .hta-player{grid-template-columns:1fr}
  .sha .hta-steps{display:grid;grid-template-columns:1fr 1fr;gap:7px}
}