@charset "UTF-8";
/*
  /rakurakucloud/asset/css/object/module/m-logo-marquee.css
  流れるロゴモジュール用CSS
*/
/* ==========================================================================
   m-logo-marquee：ロゴが横に流れ続けるモジュール
   HTML：m-logo-marquee.php（クラス付与のルールはPHP側のコメントを参照）
   ========================================================================== */

.m-logo-marquee {
  overflow: hidden;
  --marquee-scale: 1;      /* 全体の倍率（スマホで小さくする） */
  --marquee-duration-rate: 1; /* 流れる時間の倍率（小さいほど速い。スマホで速くする） */
  padding: calc(40px * var(--marquee-scale)) 0 0;

  /* スマホ：ロゴの大きさ・余白を等倍で小さくし、流れる時間を短くする */
  @media screen and (max-width: 840px) {
    --marquee-scale: 0.7;
    --marquee-duration-rate: 0.7;
  }
}

/* 流れる部分。リストを複数セット横に並べ、1セット分だけ動かしてループさせる */
.m-logo-marquee__track {
  --marquee-set-count: 3;  /* セット数（PHPのインラインstyleで上書きされる） */
  --marquee-duration: 30s; /* 1セット流れる時間（PHPのインラインstyleで、ロゴの数に応じて上書きされる） */
  display: flex;
  width: max-content;
  animation: m-logo-marquee calc(var(--marquee-duration) * var(--marquee-duration-rate)) linear infinite;
}

/* ul */
.m-logo-marquee-list {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* li
   ロゴの枠サイズ：標準は最大140×45px
   --logo-max-w / --logo-max-h：形のクラスで上書き
   --logo-scale：補正のクラスで上書き（形と組み合わせ可） */
.m-logo-marquee-item {
  --logo-max-w: 140px;
  --logo-max-h: 45px;
  --logo-scale: 1;
  flex-shrink: 0;
  margin: 0 calc(60px * var(--marquee-scale)) 0 0;
}

.m-logo-marquee-item__logo {
  display: block;
  width: auto;
  height: auto;
  max-width: calc(var(--logo-max-w) * var(--logo-scale) * var(--marquee-scale));
  max-height: calc(var(--logo-max-h) * var(--logo-scale) * var(--marquee-scale));
}

/* 形：枠の縦横を変える */

/* 縦積み・正方形に近いロゴ */
.m-logo-marquee-item--square {
  --logo-max-h: 55px;
}

/* 補正：枠全体を拡大・縮小する（形と組み合わせ可） */

/* アイソレーションを含む画像 */
.m-logo-marquee-item--padded {
  --logo-scale: 1.3;
  margin: 0 calc(50px * var(--marquee-scale)) 0 calc(-10px * var(--marquee-scale)); /* 画像自体に余白があるため、左右とも10pxずつ詰める */
}

/* 大きく見えすぎるロゴ */
.m-logo-marquee-item--sm {
  --logo-scale: 0.8;
}

/* 1セット分（全体を「セット数」で割った幅）だけ左へ動かす */
@keyframes m-logo-marquee {
  to {
    transform: translateX(calc(-100% / var(--marquee-set-count)));
  }
}