/* 背景にピンク色と水玉アニメーション */ .dot-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #ffe4e1; background-image: radial-gradient(circle, white 2px, transparent 2px); background-size: 50px 50px; animation: moveDots 10s linear infinite; z-index: -1; } @keyframes moveDots { 0% { background-position: 0 0; } 100% { background-position: 50px 50px; } } /* 画像アニメーション */ .animated-image img { transition: transform 0.1s ease; animation: imageZoom 6s infinite; } @keyframes imageZoom { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } /* ボタンデザイン */ .button { display: inline-block; background-color: #ff1493; color: white; padding: 12px 0; border-radius: 10px; font-size: 1.2em; font-weight: bold; text-decoration: none; display: block; width: 100%; max-width: 100%; box-sizing: border-box; position: relative; overflow: hidden; transition: transform 0.3s ease-in-out; } .button span { position: absolute; top: 0; left: -100%; width: 200%; height: 100%; background: linear-gradient(120deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 70%); transform: skewX(-30deg); animation: shine 2s infinite; } @keyframes shine { 0% { left: -100%; } 50% { left: 100%; } 100% { left: 100%; } } .button:hover { transform: scale(1.05); } /* フェードアウト効果の削除 */ .image-wrapper { position: relative; overflow: visible; } .instructor-image { display: block; width: 100%; height: auto; } /* スマホ表示時にインストラクターを縦に並べる */ @media (max-width: 768px) { .instructors-container { flex-direction: column; align-items: center; } .animated-image { width: 80%; } }
(Visited 15,544 times, 3 visits today)