/* スライダー */
.top-work-content .purpose.swiper {
width: 100%;
height: auto;
}

.top-work-content .purpose .item.swiper-slide {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
font-size: 18px;
}

.top-work-content .purpose .item.swiper-slide dt {
display: flex;
justify-content: center;
align-items: center;
}

.top-work-content .purpose .item.swiper-slide dd {
width: 100%;
text-align: center;
margin: 0;
padding: 10px 0;
height: 50px; /* テキスト領域の固定高さ */
box-sizing: border-box;
}

.swiper-pagination {
position: relative;
bottom: 10px;
}

.swiper-button-next, .swiper-button-prev {
color: #000;
}

/* デスクトップ表示用の追加スタイル */
@media (min-width: 1024px) {
.top-work-content .purpose.swiper {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
height: auto; /* 自動で高さを調整 */
}
.top-work-content .purpose .swiper-wrapper {
display: flex;
flex-wrap: wrap;
width: 95%;
}
.top-work-content .purpose .item.swiper-slide {
width: calc(100% / 7 - 10px); 
margin: 5px;
/* margin-top: 8%; */
box-sizing: border-box;
height: auto;
}
.top-work-content .purpose .item.swiper-slide img {
width: 100%; /* 画像を要素内にフィットさせる */
}
.swiper-button-next, .swiper-button-prev, .swiper-pagination {
display: none !important;
}
.swiper-scrollbar {
display: none;
}
}
/* モバイルおよびタブレット表示用のスタイル */
@media (max-width: 1023px) {
.swiper-wrapper {
display: flex;
flex-wrap: nowrap; /* ラップを無効にして横スクロールを有効にする */
}
.top-work-content .purpose.swiper {
width: 100%;
height: auto;
user-select: none;
}
.top-work-content .purpose .item.swiper-slide {
margin: 0 !important;
flex-shrink: 0 !important;
padding: 0px 10px;
}
.top-work-content .purpose .item.swiper-slide dd {
font-size: 11px;
}
.top-work-content .purpose .swiper-slide img {
width: 100%; /* 画像を要素内にフィットさせる */
}
.swiper-container {
padding-bottom: 50px; /* ページネーションとボタンのスペースを確保 */
}
.swiper-controller {
display: flex;
gap: 1.6rem;
align-items: center;
justify-content: flex-end;
margin-top: 3.2rem;
}
.swiper-controller>div {
position: unset !important;
margin-top: 0 !important;
height: 60px;
background-size: contain;
}
.swiper-scrollbar {
flex-grow: 1;
background: #eee;
}
.swiper-scrollbar-horizontal{
background: #666 !important;
}
.swiper-nav-buttons {
display: flex;
justify-content: space-between;
align-items: center;
column-gap: 30px;
}
.swiper-button-prev,
.swiper-button-next {
height: 50px;
width: 50px;
}

.swiper-button-prev::after,
.swiper-button-next::after {
background-repeat: no-repeat;
background-size: contain;
content: "";
height: 50px;
margin: auto;
width: 50px;
}

 .insta-content .swiper-button-prev, .insta-content .swiper-button-next {
position: relative;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
margin: 0;
}

.swiper-nav-buttons>div {
position: unset !important;
margin-top: 0 !important;
width: 45px;
height: 45px;
background: url(../img/common/arrow.png) no-repeat;
background-size: contain;
}

.swiper-nav-buttons .swiper-button-next {
transform: rotate(180deg);
margin-bottom: 0;
}
.swiper-nav-buttons>div::after {
content: '';
} 
.swiper-horizontal>.swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal {
height: var(--swiper-scrollbar-size,1px) !important;
}
}