/* ============================================
   opus renewal (2026-07-06)
   Top / Services 用のアニメーション + レスポンシブヘルパー
   写経元: build/index.html <style> + <style id="opus-responsive">
           build/services.html FAQ .opus-faq
============================================ */

@keyframes opusDrift1 { 0% { transform: translate(0,0); } 50% { transform: translate(6%,-5%); } 100% { transform: translate(0,0); } }
@keyframes opusDrift2 { 0% { transform: translate(0,0); } 50% { transform: translate(-7%,6%); } 100% { transform: translate(0,0); } }
@keyframes opusDrift3 { 0% { transform: translate(0,0); } 50% { transform: translate(5%,7%); } 100% { transform: translate(0,0); } }
@media (prefers-reduced-motion: reduce) { .opus-blob { animation: none !important; } }

/* --- opus renewal: responsive helpers (attribute-selector, markup無改変で効く) --- */
@media (max-width: 860px){
  header > div{height:auto !important;flex-wrap:wrap;gap:14px 20px !important;padding-top:14px !important;padding-bottom:14px !important}
  header nav{gap:12px 16px !important;justify-content:flex-start !important;flex-wrap:wrap}
  [style*="minmax(0,1fr) 320px"]{grid-template-columns:1fr !important}
  [style*="minmax(0,1fr) minmax(0,0.9fr)"]{grid-template-columns:1fr !important}
  [style*="220px minmax(0,1fr) 24px"]{grid-template-columns:1fr !important;gap:6px !important;padding-right:0 !important}
  [style*="140px minmax(0,1fr) 24px"]{grid-template-columns:1fr !important;gap:4px !important}
  [style*="64px minmax(0,1fr)"]{grid-template-columns:1fr !important;gap:8px !important}
  a[style*="220px minmax(0,1fr) 24px"] > span:last-child,
  a[style*="140px minmax(0,1fr) 24px"] > span:last-child{display:none !important}
}
@media (max-width: 520px){
  h1[style*="clamp(34px"]{font-size:30px !important}
}

/* --- Services FAQ (写経元: build/services.html) --- */
.opus-faq details{border-bottom:1px solid #E2E8F0}
.opus-faq details:first-of-type{border-top:1px solid #111827}
.opus-faq summary{list-style:none;cursor:pointer;padding:24px 8px;display:flex;justify-content:space-between;align-items:center;gap:24px;font-size:17px;font-weight:500;color:#111827;transition:color 140ms ease}
.opus-faq summary:hover{color:#D97065}
.opus-faq summary::-webkit-details-marker{display:none}
.opus-faq summary::after{content:"+";font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:22px;color:#D97065;flex:none;line-height:1}
.opus-faq details[open] summary::after{content:"\2013"}
.opus-faq .opus-faq-a{padding:0 8px 28px;font-size:15px;line-height:1.9;color:#334155;max-width:46em;margin:0}