@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/


/* ===== マシン紹介スライダー ===== */

/* 外側ラッパー：矢印の基準・全幅 */
.ms-outer { position: relative; }

/* 白カード・角丸・影は「枠」につける（枠自身の影は切られない） */
.machine-slider {
  max-width: calc(100% - 138px);
  margin-left: auto;
  margin-right: auto;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.08);
}
.machine-slider.swiper {
  overflow: clip;     /* 隣を隠す。clip-pathは削除でOK */
}

.machine-slider .swell-block-columns__inner {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 白カード */
.machine-slider .swell-block-column {
  flex-shrink: 0;
  margin: 0 !important;
  padding: 24px !important;
}
.machine-slider .swell-block-column .wp-block-image img { border-radius: 14px; }
.machine-slider .swell-block-column .wp-block-heading { margin-top: 21px !important; }

/* 矢印 */
.ms-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%; border: 2px solid #91c7cf;
  background: #fff; color: #2d8490; font-size: 1rem; line-height: 1; cursor: pointer; z-index: 3;
  display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s;
}
.ms-arrow:hover { background: #91c7cf; color: #fff; }
.ms-prev { left: 0; }
.ms-next { right: 0; }

/* ●ドット */
.ms-dots { display: flex; justify-content: center; gap: 8px; margin-top: 1em; }
.ms-dot { width: 10px; height: 10px; border-radius: 50%; border: none; background: #d7e7ea; cursor: pointer; padding: 0; }
.ms-dot.is-active { background: #4b9dad; }

/* タブレット・スマホ：カードは全幅、矢印は写真に重ねる */
@media (max-width: 959px) {
  .machine-slider { max-width: 100%; margin-left: 0; margin-right: 0; }
  .ms-arrow {
    width: 36px; height: 36px; font-size: .9rem;
    background: rgba(255,255,255,.85); border-color: rgba(143,201,208,.9);
  }
  .ms-prev { left: -12px; }
  .ms-next { right: -12px; }
}
@media (max-width: 599px) {
  .machine-slider .swell-block-column { padding: 1em !important; }
}