@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
*/

/* ====================================
   SWELL リッチカラム 無限カルーセル版
   編集画面では8枚だけ並べる想定
   クラス名: loop-slider
   ==================================== */
.loop-slider {
  --speed: 35s;           /* 動く速さ。数字を大きくするとゆっくり */
  --gap: 1.5rem;          /* 画像と画像のあいだの余白 */
  --item-width: 300px;    /* 1アイテムの横幅＝これを大きくすると画像も大きくなる */
  --img-h: 240px;         /* 画像の高さ。ここを好みで150～180にしてもOK */
  --extra-shift: 0rem;    /* 継ぎ目でわずかに空いたらここを 0.5rem とかにする */
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-inline: auto;    /* 真ん中寄せ */
}

/* PHPで差し込んだトラックを横に流す */
.loop-slider .loop-slider__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: loop-slider-scroll var(--speed) linear infinite;
  will-change: transform;
}

/* ←ここが今回のポイント！
   リッチカラムが出す「1周ぶんのラッパー(div)」を
   強制的に1本の横並びにして余白を揃える */
.loop-slider .loop-slider__track > div {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: var(--gap);
  margin: 0 !important;
  padding: 0 !important;
}

/* 画像を大きくしたいので、1アイテムの幅を固定しておく */
.loop-slider .loop-slider__track > div > * {
  flex: 0 0 var(--item-width);
  max-width: none;
}

/* 画像の見た目をそろえる */
.loop-slider img {
  display: block;
  width: 100%;
  height: var(--img-h);
  object-fit: contain;
  margin: 0 auto;
}

/* 2周ぶんあるので「半分＋ちょっと」だけ動かす。
   `--extra-shift` で微妙な空きを吸収できます。 */
@keyframes loop-slider-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-50% - var(--extra-shift)));
  }
}

/* スマホ用のちょい縮小 */
@media (max-width: 768px) {
  .loop-slider {
    --item-width: 140px;
    --img-h: 100px;
    --gap: 1rem;
  }
}

/* ① 画面いっぱいに広げる（親テーマのコンテンツ幅を無視する） */
.loop-slider {
  --speed: 35s;
  --gap: 1.5rem;
  --item-width: 180px;
  --img-h: 140px;
  --extra-shift: 0rem;
  position: relative;
  overflow: hidden;

  /* ←ここが重要：表示位置をページの両端に合わせる */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ② PHPで差し込んだトラックを横に流す */
.loop-slider .loop-slider__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: loop-slider-scroll var(--speed) linear infinite;
  will-change: transform;
}

/* ③ SWELLのリッチカラムが持ってる「中の余白・左右パディング」を打ち消す */
.loop-slider .p-rich-columns,
.loop-slider .p-rich-columns__inner,
.loop-slider .p-rich-columns__contents {
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}

/* ④ 2グループ（1周め＋2周め）をフレックス1本にして、こっちでgapを付ける */
.loop-slider .loop-slider__track > div {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: var(--gap);
}

/* ⑤ 各アイテムの幅を固定して、画像を大きめに */
.loop-slider .loop-slider__track > div > * {
  flex: 0 0 var(--item-width);
}

.loop-slider img {
  display: block;
  width: 100%;
  height: var(--img-h);
  object-fit: contain;
  margin: 0 auto;
}

/* ⑥ 無限スクロール。50%＋ちょいズラしで継ぎ目を消す */
@keyframes loop-slider-scroll {
  from {
    transform: translateX(0);
  }
  to {
    /* 必要なら --extra-shift を 0.5rem とかにして微調整 */
    transform: translateX(calc(-50% - var(--extra-shift)));
  }
}

/* ===== スマホで1周後に消えるのを防ぐ・強制横並び版 ===== */
@media (max-width: 768px) {

  /* まずこのカルーセル自体のアイテムサイズをスマホ用に */
  .loop-slider {
    --speed: 18s;          /* ちょっと短くして“間”を感じさせない */
    --item-width: 160px;   /* ここを増やすと画像が大きくなる */
    --img-h: 110px;
    --gap: 1rem;
  }

  /* 1) トラックも中身のdivも、とにかく横1列・折り返しなしにする */
  .loop-slider .loop-slider__track,
  .loop-slider .loop-slider__track > div,
  .loop-slider .loop-slider__track > div > div,
  .loop-slider .p-rich-columns,
  .loop-slider .p-rich-columns__inner,
  .loop-slider .p-rich-columns__contents {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: var(--gap) !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 2) SWELLがSPで付ける「幅100%で縦に積む」やつを打ち消す */
  .loop-slider .p-rich-columns__col,
  .loop-slider .p-rich-columns__item,
  .loop-slider .wp-block-image {
    flex: 0 0 var(--item-width) !important;
    width: var(--item-width) !important;
    max-width: none !important;
    margin: 0 !important;
  }

  /* カラムの中にさらにラッパーがある場合も横に伸ばす */
  .loop-slider .p-rich-columns__col > * {
    width: 100% !important;
  }

  /* 3) スマホ用アニメを“無限”で上書きする（Safari対策で -webkit- も） */
  .loop-slider .loop-slider__track {
    animation: loop-slider-scroll-sp var(--speed) linear infinite !important;
    -webkit-animation: loop-slider-scroll-sp var(--speed) linear infinite !important;
    will-change: transform;
  }
}

/* ← SP用のキーフレームは外に出しておく（iOSで1回で止まらないように） */
@keyframes loop-slider-scroll-sp {
  from {
    transform: translateX(0);
  }
  to {
    /* ここはまず -50% で試す。まだ途中で空くなら -45% に下げる */
    transform: translateX(-45%);
  }
}
@-webkit-keyframes loop-slider-scroll-sp {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}