@charset "UTF-8";
/* ==================================================================
 *  ルービックキューブ 3D（共通パーツ）
 *  ・TOPのローディング（#ldCube）／ご挨拶（#grCube）で使用
 *  ・素のCSS3D（ライブラリ不要）。JSエンジンは footer.php の createRubik()
 * ================================================================== */
.rc-scene { --u: 52px; perspective: 2200px; width: calc(var(--u) * 3); height: calc(var(--u) * 3); }
.rc-cube { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: rcSway 9s ease-in-out infinite alternate; }
@keyframes rcSway { 0% { transform: rotateX(-26deg) rotateY(-40deg); } 100% { transform: rotateX(-18deg) rotateY(-14deg); } }

.cubie { position: absolute; left: 50%; top: 50%; width: var(--u); height: var(--u); margin: calc(var(--u) / -2) 0 0 calc(var(--u) / -2); transform-style: preserve-3d; }
.cubie .cf { position: absolute; inset: 2px; border-radius: 3px; background: linear-gradient(145deg,#1c1c20,#0e0e10); border: 1px solid rgba(255,255,255,.04); backface-visibility: hidden; }
.cubie .cf.lt { background: linear-gradient(145deg,#f4f4f1,#d6d6d9); border-color: transparent; }
.cubie .cf.dk { background: linear-gradient(145deg,#2a2a2f,#121215); border: 1px solid rgba(255,255,255,.09); }
.cubie .cf.f1 { transform: translateZ(calc(var(--u) / 2)); }
.cubie .cf.f2 { transform: rotateY(180deg) translateZ(calc(var(--u) / 2)); }
.cubie .cf.f3 { transform: rotateY(90deg)  translateZ(calc(var(--u) / 2)); }
.cubie .cf.f4 { transform: rotateY(-90deg) translateZ(calc(var(--u) / 2)); }
.cubie .cf.f5 { transform: rotateX(90deg)  translateZ(calc(var(--u) / 2)); }
.cubie .cf.f6 { transform: rotateX(-90deg) translateZ(calc(var(--u) / 2)); }