.carousel-ins {
position: relative;
max-width: 1300px;
margin: 0 auto;
}
.carousel-ins-inner {
position: relative;
width:100%;
overflow: hidden;
}
.carousel-ins-items {
width:100%;
display: flex;
gap: 20px;
overflow: visible;
transition: transform 0.4s ease;
scrollbar-width: none;
padding: 0 10px;
}
.carousel-ins-items::-webkit-scrollbar {
display: none;
}
.carousel-ins-item {
width: calc((100% - 60px) / 4); 
flex: 0 0 calc((100% - 60px) / 4);
min-width: 0;
}
.instagram-media {
min-width: auto!important;
width: 100%!important;
height: 574px;
}
.carousel-ins-arrows {
position: absolute;
width: 100%;
top: calc(50% - 2.5pc);
z-index: 5;
}
.carousel-ins-arrows-inner {
position: relative;
width: 100%;
}
.carousel-ins-prev::after,
.carousel-ins-next::after {
content: "";
border-bottom: 2px solid rgb(74 93 249);
border-left: 2px solid rgb(74 93 249);
width: 1pc;
height: 1pc;
display: block;
position: absolute;
top: calc(50% - 8px);
}
.carousel-ins-prev::after {
transform: rotate(45deg);
left: 36px;
}
.carousel-ins-next::after {
transform: rotate(225deg);
right: 36px;
}
.carousel-ins-prev,
.carousel-ins-next {
position: absolute;
width: 5pc;
height: 5pc;
border-radius: 50%;
background: #fff;
box-shadow: 0 2px 10px rgb(74 93 249 / 27%);
border: none;
cursor: pointer;
}
.carousel-ins-prev {
left: -100px;
}
.carousel-ins-next {
right: -100px;
}
.carousel-ins-prev:disabled,
.carousel-ins-next:disabled {
opacity: 0.35;
cursor: not-allowed;
}
@media screen and (max-width: 1499px) {
.carousel-ins-prev {
left: 0;
opacity: .9;
}
.carousel-ins-next {
right: 0;
opacity: .9;
}
}
@media screen and (max-width: 1300px) {
.instagram-media {
height: 44.2vw;
}
}
@media screen and (max-width: 1100px) {
.carousel-ins-items {
padding-left: calc((100vw / 2) - 160px);
}
.carousel-ins-item {
width: 320px;
flex: 0 0 320px;
min-width: 0;
}
.instagram-media {
height: 590px;
}
.carousel-ins-prev,
.carousel-ins-next {
width: 4pc;
height: 4pc;
}
.carousel-ins-prev::after {
left: 25px;
}
.carousel-ins-next::after {
right: 25px;
}
}
#ins-button a::before {
background: url(https://www.aeonbank.co.jp/column/images/top/index_icon_instagram.png);
background-size: cover;
content: "";
position: absolute;
left: 18px;
top: calc((100% - 2pc) / 2);
width: 2pc;
height: 2pc;
border: none;
margin: 0;
transform: none;
}
@media screen and (max-width: 430px) {
#ins-button.cmp-button a::before {
left: 7px;
top: calc((100% - 1.5pc) / 2);
width: 1.5pc;
height: 1.5pc;
}
}