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

/* ----------------------------------------------------------------------
 MW WP Form
---------------------------------------------------------------------- */
/**
 * 必須
 */
.mw_wp_form .require {
    background-color: #08427C;
    border-radius: 2px;
    color: #fff;
    float: right;
    font-size: 11px;
    padding: .2em .4em;
    position: relative;
    line-height: 1.5;
}

/**

/* ----------------------------------------------------------------------
follow-banner
---------------------------------------------------------------------- */
/* フォローバナーのスタイル */
.follow-banner-right {
  position: fixed;
  top: 50%; /* ページの中央に垂直配置 */
  right: 0; /* 右端に固定 */
  transform: translateY(-50%); /* バナーを縦中央に揃える */
  z-index: 20; /* 他の要素の上に表示 */
}

/* リストのスタイル */
ul.follow-banner-right-ul {
  list-style: none; /* リストマークを消す */
}

/* リンクのスタイル */
.follow-banner-right a {
  display: flex;
  align-items: center; /* アイコンとテキストを縦中央に揃える */
  gap: 0.5em; /* アイコンとテキストの間のスペース */
  writing-mode: vertical-rl; /* テキストを縦書きに設定 */
  font-size: 13px; /* フォントサイズ */
  font-weight: 500; /* フォントの太さ */
  letter-spacing: 0.1em; /* 文字間隔 */
  padding: 1.5em 0.5em; /* 内側の余白 */
  transition: opacity 0.25s; /* ホバー時の透明度の遷移 */
}

/* ホバー時の透明度変更 */
.follow-banner-right a:hover {
  opacity: 0.7;
}

/* アイコンの中央揃え */
.follow-banner-right .swl-inline-icon::after {
  left: 50%;
  transform: translateX(-50%);
}

/* スマホでは非表示 */
@media screen and (max-width: 599px) {
  .follow-banner-right {
    display: none;
  }
}

/* ボタンごとのスタイル設定 */
.follow-banner-right-01 a {
  color: #fff;
  background-color: #b0c4de; /* lavender */
}

.follow-banner-right-02 a {
  color: #fff;
  background-color: #778899; /* lightslategray */
  text-orientation: upright; /* アルファベットを縦書きに */
}

.follow-banner-right-03 a {
  color: #fff;
  background-color: #b0c4de; /* lavender */
}

.follow-banner-right-04 a {
  color: #fff;
  background-color: #778899; /* lightslategray */
  text-orientation: upright; /* アルファベットを縦書きに */
}

.follow-banner-right-05 a {
  color: #fff;
  background-color: #b0c4de; /* lavender */
}

.follow-banner-right-06 a {
  color: #fff;
  background-color: #778899; /* lightslategray */
  text-orientation: upright; /* アルファベットを縦書きに */
}

.follow-banner-right-07 a {
  color: #fff;
  background-color: #b0c4de; /* lavender */
}

/* リストアイテムの間隔設定 */
ul.follow-banner-right-ul li {
  margin: 0em 0; /* 縦のマージンをゼロに設定 */
}

}

/* ----------------------------------------------------------------------
auto slide
---------------------------------------------------------------------- */
function easeInOutQuad(t) {
  return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
}
function setUpSlider(slider) {
  const columns = slider.querySelectorAll('.swell-block-column');
  const columnWidth = columns[0].getBoundingClientRect().width;
  const columnGap = 24; // 左右の余白の値
  const sliderWidth = (columnWidth + columnGap) * columns.length;
  columns.forEach(column => {
    const columnClone = column.cloneNode(true);
    slider.appendChild(columnClone);
  });
  let scrollPosition = 0;
  slider.scrollLeft = scrollPosition;
  const scrollDuration = 2000; //スクロールする速度
  const pauseDuration = 2000; //スクロールで一時停止する秒数
  let startTime;
  function autoScroll(timestamp) {
    if (!startTime) startTime = timestamp;
    const elapsed = timestamp - startTime;
    const progress = Math.min(elapsed / scrollDuration, 1);
    const easedProgress = easeInOutQuad(progress);
    const targetPosition = scrollPosition + columnWidth + columnGap;
    slider.scrollLeft = scrollPosition + (targetPosition - scrollPosition) * easedProgress;
    if (progress === 1) {
      scrollPosition = targetPosition;
      if (scrollPosition >= sliderWidth) {
        scrollPosition = 0;
        slider.scrollLeft = scrollPosition;
      }
      startTime = null;
      setTimeout(() => {
        requestAnimationFrame(autoScroll);
      }, pauseDuration);
    } else {
      requestAnimationFrame(autoScroll);
    }
  }
  autoScroll();
}
document.addEventListener('DOMContentLoaded', () => {
  const sliders = document.querySelectorAll('.auto-slide .swell-block-columns__inner');
  sliders.forEach(setUpSlider);
});