/* eeasy Customers Embed — 本体サイト（eeasy.jp #customers）の見た目をコラム側で再現。
   拡大率は --ece-scale（ショートコード scale=／設定画面）で一括制御。 */
.ece {
  --ece-scale: 1;
  --ece-per-view: 3;
  --ece-accent: #365281;
  --ece-arrow: #aaa;
  /* 矢印の内側（カード領域）を置き場所の枠より左右に広げる量。SWELL の記事一覧（.p-postList）は本文枠より 8px ずつ広いので、それに揃える */
  --ece-bleed: 0px;
  /* 矢印の幅（カード領域の外側に出す） */
  --ece-arrow-w: 40px;
  zoom: var(--ece-scale);
  margin: 0 auto;
  max-width: 1072px;
  container-type: inline-size;
}

/* ---- お客様の声スライダー ---- */
.ece-voices {
  position: relative;
  margin: 0 calc(-1 * (var(--ece-bleed) + var(--ece-arrow-w)));
  padding: 0 var(--ece-arrow-w);
}
.ece-viewport {
  overflow: hidden;
}
/* テーマ（SWELL）の本文用 ul/li/p の余白ルールを受けないよう、余白は明示的に固定する */
.ece-track {
  display: flex;
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  will-change: transform;
}
.ece-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 calc(100% / var(--ece-per-view));
  box-sizing: border-box;
  margin: 0 !important;
  /* 下 20px = 本体 div.details の margin-bottom。ボタン側の margin は SWELL の `div > :last-child { margin-bottom:0 !important }` に負けるのでカードの padding で持つ */
  padding: 0 12px 20px !important;
  text-align: center;
}
.ece-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90px;
  margin: 0 auto;
  max-width: 200px;
}
.ece-logo img {
  max-height: 35px;
  max-width: 100%;
  width: auto;
  height: auto;
}
/* 本体サイトと同じ会社別のロゴ高さ */
.ece-card.ece-k-freee .ece-logo img,
.ece-card.ece-k-konicaminolta .ece-logo img,
.ece-card.ece-k-legalon .ece-logo img { max-height: 85px; }
.ece-card.ece-k-jacr .ece-logo img { max-height: 70px; }
.ece-card.ece-k-globis .ece-logo img { max-height: 65px; }
.ece-card.ece-k-linkandmotivation .ece-logo img { max-height: 90px; }
.ece-card.ece-k-smart-hr .ece-logo img { max-height: 60px; }
.ece-card.ece-k-sansan .ece-logo img { max-height: 80px; }
.ece-card.ece-k-yahoo .ece-logo img { max-height: 50px; }
.ece-logo--text {
  flex-direction: column;
}
.ece-name {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
}
.ece-note {
  font-size: 12px;
  color: #666;
}
/* 本体: h4 { font-size:17px; line-height:1.5; min-height:54px; color:#4a4a4a } */
.ece-catch {
  display: flex;
  flex: 1 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  margin: 0 !important;
  padding: 0 !important;
  color: #4a4a4a;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
}
/* 本体: div.details { margin:22px 0 20px } の中の .button.is-bdr
   { font-size:13px; line-height:1.5; padding:.25em .75em; border:1px solid #4286d2; border-radius:4px; color:#365281 } */
.ece-detail {
  display: inline-block;
  margin: 22px 0 0 !important;
  padding: .25em .75em;
  border: 1px solid #4286d2;
  border-radius: 4px;
  color: var(--ece-accent);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  text-decoration: none;
  transition: background-color .2s, color .2s;
}
.ece-detail:hover {
  background: var(--ece-accent);
  color: #fff;
}
.ece-arrow {
  position: absolute;
  top: 90px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.ece-arrow::before {
  content: "";
  position: absolute;
  top: 2px;
  width: 16px;
  height: 16px;
  border-top: 2px solid var(--ece-arrow);
  border-right: 2px solid var(--ece-arrow);
}
.ece-arrow--prev { left: 0; }
.ece-arrow--prev::before { left: 8px; transform: rotate(-135deg); }
.ece-arrow--next { right: 0; }
.ece-arrow--next::before { right: 8px; transform: rotate(45deg); }

/* ---- 導入企業ロゴ帯 ---- */
/* ロゴ帯はスライダーの矢印の外端まで広げる。
   本体: .customer-logos.details { margin-top:145px }（ボタン下端から約150px）。段は 40px、段の間 25px。
   ここではカード幅が本体の約 2/3 なので、間隔も同じ比率の 100px にしている（--ece-logos-gap で調整可） */
.ece-logos {
  --ece-logos-gap: 100px;
  /* 40px の段より背の高いロゴ（freee 等）が上下にはみ出すぶんを内側の余白で確保する */
  margin: calc(var(--ece-logos-gap) - 12px) calc(-1 * (var(--ece-bleed) + var(--ece-arrow-w))) 0;
  padding: 12px 0;
  overflow: hidden;
}
.ece-logo-row {
  display: flex;
  width: 100%;
  height: 40px;
  overflow: visible;
}
.ece-logo-row + .ece-logo-row {
  margin-top: 25px;
}
.ece-logo-strip {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  animation: ece-marquee 30s linear infinite;
}
.ece-logo-row--2 .ece-logo-strip {
  animation-delay: -9s;
}
.ece-logos:hover .ece-logo-strip {
  animation-play-state: paused;
}
/* 本体: .customer { flex-basis:20% }（実測 195px）, figure { height:40px }, img { height:100%; transform:scale(.8) } */
.ece-logo-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 195px;
  height: 40px;
  padding: 0 12px;
  box-sizing: border-box;
}
.ece-logo-item a {
  display: inline-flex;
  align-items: center;
  height: 100%;
}
.ece-logo img,
.ece-logo-item img {
  margin: 0 !important;
  box-shadow: none !important;
}
.ece-logo-item img {
  display: block;
  max-width: 100%;
  width: auto;
  height: 40px;
  transform: scale(.8);
}
/* 本体サイトと同じ会社別のロゴ高さ */
.ece-logo-item.ece-k-ashita img,
.ece-logo-item.ece-k-bengo4 img { height: 27px; }
.ece-logo-item.ece-k-freee img { height: 80px; }
.ece-logo-item.ece-k-jacr img { height: 75px; margin-top: -8px; }
.ece-logo-item.ece-k-globis img,
.ece-logo-item.ece-k-smart-hr img { height: 50px; }
.ece-logo-item.ece-k-konicaminolta img { height: 65px; }
.ece-logo-item.ece-k-legalon img { height: 60px; }
.ece-logo-item.ece-k-leverages img { height: 28px; }
.ece-logo-item.ece-k-levtech img { margin-top: -8px; }
.ece-logo-item.ece-k-linkandmotivation img { height: 65px; }
.ece-logo-item.ece-k-plaid img { height: 30px; }
.ece-logo-item.ece-k-sansan img { height: 60px; }

@keyframes ece-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}


/* コラム本文幅（約 720px）に 3 枚並べるときの縮小 */
@container (max-width: 820px) {
  .ece-voices, .ece-logos { --ece-bleed: 8px; --ece-arrow-w: 28px; }
  .ece-card { padding: 0 4px 20px !important; }
  .ece-logo { height: 90px; max-width: 170px; }
  .ece-logo img { max-height: 30px; }
  .ece-card.ece-k-freee .ece-logo img,
  .ece-card.ece-k-konicaminolta .ece-logo img,
  .ece-card.ece-k-legalon .ece-logo img,
  .ece-card.ece-k-linkandmotivation .ece-logo img { max-height: 72px; }
  .ece-card.ece-k-jacr .ece-logo img,
  .ece-card.ece-k-sansan .ece-logo img { max-height: 60px; }
  .ece-card.ece-k-globis .ece-logo img,
  .ece-card.ece-k-smart-hr .ece-logo img { max-height: 52px; }
  .ece-card.ece-k-yahoo .ece-logo img { max-height: 42px; }
  .ece-name { font-size: 20px; }
  .ece-catch { font-size: 13.5px; letter-spacing: 0; min-height: 54px; }
  .ece-arrow { top: 90px; width: 20px; }
  .ece-arrow::before { width: 14px; height: 14px; }
  .ece-arrow--prev::before { left: 6px; }
  .ece-arrow--next::before { right: 6px; }
  .ece-logo-item { width: 160px; }
}

@media (max-width: 600px) {
  .ece-voices, .ece-logos { --ece-bleed: 0px; --ece-arrow-w: 28px; }
  .ece-voices { margin: 0; }
  .ece-logos { --ece-logos-gap: 60px; margin-left: 0; margin-right: 0; }
  .ece-logo-item { width: 140px; }
  .ece-logo-item img { transform: scale(.7); }
}