.elementor-29 .elementor-element.elementor-element-53eb13c{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--margin-top:0px;--margin-bottom:150px;--margin-left:0px;--margin-right:0px;}.elementor-29 .elementor-element.elementor-element-cb714a7{width:100%;max-width:100%;}@media(max-width:767px){.elementor-29 .elementor-element.elementor-element-53eb13c{--content-width:95%;--margin-top:0px;--margin-bottom:100px;--margin-left:0px;--margin-right:0px;}}@media(max-width:1024px) and (min-width:768px){.elementor-29 .elementor-element.elementor-element-53eb13c{--content-width:90%;}}/* Start custom CSS for html, class: .elementor-element-cb714a7 *//* --- 新しく追加・修正するスタイル --- */

/* 1. 全体を囲むラッパー（矢印の位置決めの基準） */
.slider-container {
  position: relative; /* 矢印を絶対配置するための基準点 */
  width: 100%;
  margin: 0 auto;
}

/* 2. スライダーとサムネイルのエリア */
.swiper-area {
  width: 1000px; /* スライドとサムネイルの幅を1000pxに固定 */
  margin: 0 auto; /* 中央寄せ */
}

/* 3. 矢印のスタイリング */
.slider-container .swiper-button-prev,
.slider-container .swiper-button-next {
  position: absolute;
  top: 40%; /* メインスライダーの垂直中央あたりに調整 */
  transform: translateY(-50%);
  width: 50px;
}

.slider-container .swiper-button-prev:after,
.slider-container .swiper-button-next:after {
  content: none !important;
}

/* 矢印の左右の位置 */
.slider-container .swiper-button-prev {
  left: 0;
}
.slider-container .swiper-button-next {
  right: 0;
}


/* --- 既存のスタイルから不要なものを削除・修正 --- */

/* .swiperへのpaddingは不要なので削除 */
.swiper {
  width: 100%;
}

/* サムネイルのwidth指定はすべて削除 */
.slider-thumbnail .swiper-slide {
  opacity: .5;
  transition: opacity .5s;
}
.slider-thumbnail .swiper-slide.swiper-slide-thumb-active {
  opacity: 1;
}

.swiper-slide img {
  height: auto;
  width: 100%;
}

/* --- レスポンシブ対応 --- */

@media screen and (max-width: 1024px) {
  /* スライドエリアは親要素に追従させる */
  .swiper-area {
    width: 80%;
  }
}

@media screen and (max-width: 767px) {
  /* スマホでは矢印の余白を少し狭くする */
  /* 矢印を少し小さくするなどの調整もここに書けます */
  .slider-container .swiper-button-prev,
  .slider-container .swiper-button-next {
     /* 例: display: none; で非表示にするなど */
     width: 25px;
  }
}/* End custom CSS */