.wp-image-carousel {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.wp-image-carousel * {
box-sizing: border-box;
}
.wp-carousel-container {
max-width: 800px;
width: 100%;
margin: 20px auto;
background: #ffffff;
border-radius: 12px;
padding: 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
border: 1px solid #e0e0e0;
}
/* ラジオボタンを隠す */
.wp-carousel-input {
display: none;
}
/* メイン画像コンテナ */
.wp-main-image-container {
position: relative;
width: 100%;
height: 400px;
margin-bottom: 20px;
border-radius: 8px;
overflow: hidden;
background: #f5f5f5;
}
/* 自動再生用のキーフレーム */
@keyframes autoSlide {
0% { opacity: 1; }
16.666% { opacity: 1; }
20% { opacity: 0; }
96.666% { opacity: 0; }
100% { opacity: 1; }
}
/* すべての画像を重ねて配置 */
.wp-main-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 0.5s ease-in-out;
animation: autoSlide 18s infinite;
}
/* 各画像の表示タイミングをずらす */
.wp-main-image:nth-child(1) { animation-delay: 0s; }
.wp-main-image:nth-child(2) { animation-delay: 3s; }
.wp-main-image:nth-child(3) { animation-delay: 6s; }
.wp-main-image:nth-child(4) { animation-delay: 9s; }
.wp-main-image:nth-child(5) { animation-delay: 12s; }
.wp-main-image:nth-child(6) { animation-delay: 15s; }
/* ホバー時に自動再生を一時停止 */
.wp-main-image-container:hover .wp-main-image {
animation-play-state: paused;
}
/* 手動操作時は自動再生を停止 */
.wp-carousel-input:checked ~ .wp-main-image-container .wp-main-image {
animation-play-state: paused;
}
/* 対応するラジオボタンがチェックされた時に画像を表示 */
.wp-carousel-input:nth-child(1):checked ~ .wp-main-image-container .wp-main-image:nth-child(1),
.wp-carousel-input:nth-child(2):checked ~ .wp-main-image-container .wp-main-image:nth-child(2),
.wp-carousel-input:nth-child(3):checked ~ .wp-main-image-container .wp-main-image:nth-child(3),
.wp-carousel-input:nth-child(4):checked ~ .wp-main-image-container .wp-main-image:nth-child(4),
.wp-carousel-input:nth-child(5):checked ~ .wp-main-image-container .wp-main-image:nth-child(5),
.wp-carousel-input:nth-child(6):checked ~ .wp-main-image-container .wp-main-image:nth-child(6) {
opacity: 1;
}
/* ナビゲーションボタン */
.wp-nav-buttons {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
}
.wp-nav-button {
background: rgba(255, 255, 255, 0.95);
border: 1px solid #ddd;
width: 44px;
height: 44px;
border-radius: 50%;
cursor: pointer;
font-size: 16px;
color: #333;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
.wp-nav-button:hover {
background: #ffffff;
transform: scale(1.1);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.wp-prev-buttons {
left: 10px;
}
.wp-next-buttons {
right: 10px;
}
/* 前へボタン */
.wp-carousel-input:nth-child(1):checked ~ .wp-main-image-container .wp-prev-buttons .wp-nav-button:nth-child(6),
.wp-carousel-input:nth-child(2):checked ~ .wp-main-image-container .wp-prev-buttons .wp-nav-button:nth-child(1),
.wp-carousel-input:nth-child(3):checked ~ .wp-main-image-container .wp-prev-buttons .wp-nav-button:nth-child(2),
.wp-carousel-input:nth-child(4):checked ~ .wp-main-image-container .wp-prev-buttons .wp-nav-button:nth-child(3),
.wp-carousel-input:nth-child(5):checked ~ .wp-main-image-container .wp-prev-buttons .wp-nav-button:nth-child(4),
.wp-carousel-input:nth-child(6):checked ~ .wp-main-image-container .wp-prev-buttons .wp-nav-button:nth-child(5) {
display: flex;
}
/* 次へボタン */
.wp-carousel-input:nth-child(1):checked ~ .wp-main-image-container .wp-next-buttons .wp-nav-button:nth-child(2),
.wp-carousel-input:nth-child(2):checked ~ .wp-main-image-container .wp-next-buttons .wp-nav-button:nth-child(3),
.wp-carousel-input:nth-child(3):checked ~ .wp-main-image-container .wp-next-buttons .wp-nav-button:nth-child(4),
.wp-carousel-input:nth-child(4):checked ~ .wp-main-image-container .wp-next-buttons .wp-nav-button:nth-child(5),
.wp-carousel-input:nth-child(5):checked ~ .wp-main-image-container .wp-next-buttons .wp-nav-button:nth-child(6),
.wp-carousel-input:nth-child(6):checked ~ .wp-main-image-container .wp-next-buttons .wp-nav-button:nth-child(1) {
display: flex;
}
/* デフォルトでボタンを非表示 */
.wp-nav-buttons .wp-nav-button {
display: none;
}
/* 画像情報 */
.wp-image-info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
color: white;
padding: 20px;
transform: translateY(100%);
opacity: 0;
transition: all 0.3s ease;
}
.wp-main-image-container:hover .wp-image-info {
transform: translateY(0);
opacity: 1;
}
.wp-image-title {
font-size: 16px;
font-weight: 600;
margin-bottom: 4px;
}
.wp-image-description {
font-size: 14px;
opacity: 0.9;
line-height: 1.4;
}
/* 画像情報の内容切り替え - 自動再生用 */
.wp-image-info > div {
display: none;
animation: autoSlideInfo 18s infinite;
}
@keyframes autoSlideInfo {
0% { display: block; opacity: 1; }
16.666% { display: block; opacity: 1; }
20% { display: none; opacity: 0; }
96.666% { display: none; opacity: 0; }
100% { display: block; opacity: 1; }
}
.wp-image-info .wp-info-1 { animation-delay: 0s; }
.wp-image-info .wp-info-2 { animation-delay: 3s; }
.wp-image-info .wp-info-3 { animation-delay: 6s; }
.wp-image-info .wp-info-4 { animation-delay: 9s; }
.wp-image-info .wp-info-5 { animation-delay: 12s; }
.wp-image-info .wp-info-6 { animation-delay: 15s; }
/* 手動操作時の画像情報 */
.wp-carousel-input:nth-child(1):checked ~ .wp-main-image-container .wp-image-info .wp-info-1,
.wp-carousel-input:nth-child(2):checked ~ .wp-main-image-container .wp-image-info .wp-info-2,
.wp-carousel-input:nth-child(3):checked ~ .wp-main-image-container .wp-image-info .wp-info-3,
.wp-carousel-input:nth-child(4):checked ~ .wp-main-image-container .wp-image-info .wp-info-4,
.wp-carousel-input:nth-child(5):checked ~ .wp-main-image-container .wp-image-info .wp-info-5,
.wp-carousel-input:nth-child(6):checked ~ .wp-main-image-container .wp-image-info .wp-info-6 {
display: block;
animation: none;
}
/* 手動操作時に他の情報を隠す */
.wp-carousel-input:checked ~ .wp-main-image-container .wp-image-info > div {
display: none;
}
/* サムネイルコンテナ */
.wp-thumbnails-container {
display: flex;
gap: 8px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 15px;
}
.wp-thumbnail-label {
cursor: pointer;
border-radius: 4px;
overflow: hidden;
transition: all 0.3s ease;
}
.wp-thumbnail {
width: 70px;
height: 50px;
object-fit: cover;
transition: all 0.3s ease;
border: 2px solid transparent;
opacity: 0.6;
display: block;
}
.wp-thumbnail-label:hover .wp-thumbnail {
opacity: 1;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
/* サムネイルの自動アクティブ化 */
.wp-thumbnail {
animation: autoThumbnailActive 18s infinite;
}
@keyframes autoThumbnailActive {
0% { border-color: #0073aa; opacity: 1; transform: scale(1.05); }
16.666% { border-color: #0073aa; opacity: 1; transform: scale(1.05); }
20% { border-color: transparent; opacity: 0.6; transform: scale(1); }
96.666% { border-color: transparent; opacity: 0.6; transform: scale(1); }
100% { border-color: #0073aa; opacity: 1; transform: scale(1.05); }
}
.wp-thumbnail:nth-child(1) { animation-delay: 0s; }
.wp-thumbnail:nth-child(2) { animation-delay: 3s; }
.wp-thumbnail:nth-child(3) { animation-delay: 6s; }
.wp-thumbnail:nth-child(4) { animation-delay: 9s; }
.wp-thumbnail:nth-child(5) { animation-delay: 12s; }
.wp-thumbnail:nth-child(6) { animation-delay: 15s; }
/* 手動操作時のサムネイル */
.wp-carousel-input:nth-child(1):checked ~ .wp-thumbnails-container .wp-thumbnail-label:nth-child(1) .wp-thumbnail,
.wp-carousel-input:nth-child(2):checked ~ .wp-thumbnails-container .wp-thumbnail-label:nth-child(2) .wp-thumbnail,
.wp-carousel-input:nth-child(3):checked ~ .wp-thumbnails-container .wp-thumbnail-label:nth-child(3) .wp-thumbnail,
.wp-carousel-input:nth-child(4):checked ~ .wp-thumbnails-container .wp-thumbnail-label:nth-child(4) .wp-thumbnail,
.wp-carousel-input:nth-child(5):checked ~ .wp-thumbnails-container .wp-thumbnail-label:nth-child(5) .wp-thumbnail,
.wp-carousel-input:nth-child(6):checked ~ .wp-thumbnails-container .wp-thumbnail-label:nth-child(6) .wp-thumbnail {
border-color: #0073aa;
opacity: 1;
transform: scale(1.05);
animation: none;
}
/* 手動操作時に他のサムネイルを通常状態に */
.wp-carousel-input:checked ~ .wp-thumbnails-container .wp-thumbnail {
border-color: transparent;
opacity: 0.6;
transform: scale(1);
animation: none;
}
/* インジケーター */
.wp-carousel-indicators {
display: flex;
justify-content: center;
gap: 6px;
}
.wp-indicator-label {
cursor: pointer;
}
.wp-indicator {
width: 10px;
height: 10px;
border-radius: 50%;
background: #ccc;
transition: all 0.3s ease;
}
.wp-indicator-label:hover .wp-indicator {
background: #999;
}
/* インジケーターの自動アクティブ化 */
.wp-indicator {
animation: autoIndicatorActive 18s infinite;
}
@keyframes autoIndicatorActive {
0% { background: #0073aa; transform: scale(1.2); }
16.666% { background: #0073aa; transform: scale(1.2); }
20% { background: #ccc; transform: scale(1); }
96.666% { background: #ccc; transform: scale(1); }
100% { background: #0073aa; transform: scale(1.2); }
}
.wp-indicator:nth-child(1) { animation-delay: 0s; }
.wp-indicator:nth-child(2) { animation-delay: 3s; }
.wp-indicator:nth-child(3) { animation-delay: 6s; }
.wp-indicator:nth-child(4) { animation-delay: 9s; }
.wp-indicator:nth-child(5) { animation-delay: 12s; }
.wp-indicator:nth-child(6) { animation-delay: 15s; }
/* 手動操作時のインジケーター */
.wp-carousel-input:nth-child(1):checked ~ .wp-carousel-indicators .wp-indicator-label:nth-child(1) .wp-indicator,
.wp-carousel-input:nth-child(2):checked ~ .wp-carousel-indicators .wp-indicator-label:nth-child(2) .wp-indicator,
.wp-carousel-input:nth-child(3):checked ~ .wp-carousel-indicators .wp-indicator-label:nth-child(3) .wp-indicator,
.wp-carousel-input:nth-child(4):checked ~ .wp-carousel-indicators .wp-indicator-label:nth-child(4) .wp-indicator,
.wp-carousel-input:nth-child(5):checked ~ .wp-carousel-indicators .wp-indicator-label:nth-child(5) .wp-indicator,
.wp-carousel-input:nth-child(6):checked ~ .wp-carousel-indicators .wp-indicator-label:nth-child(6) .wp-indicator {
background: #0073aa;
transform: scale(1.2);
animation: none;
}
/* 手動操作時に他のインジケーターを通常状態に */
.wp-carousel-input:checked ~ .wp-carousel-indicators .wp-indicator {
background: #ccc;
transform: scale(1);
animation: none;
}
/* レスポンシブ対応 */
@media (max-width: 768px) {
.wp-carousel-container {
margin: 10px;
padding: 15px;
}
.wp-main-image-container {
height: 250px;
}
.wp-thumbnail {
width: 55px;
height: 40px;
}
.wp-nav-button {
width: 36px;
height: 36px;
font-size: 14px;
}
}
@media (max-width: 480px) {
.wp-main-image-container {
height: 200px;
}
.wp-thumbnail {
width: 45px;
height: 35px;
}
} 
