/*
 * CLIENT WORKS マーキー（横1列・右→左）
 * PROD-20261015-002 項目3 / 2026-10-15
 *
 * 出典：先方支給 dist/assets/client-marquee.css を無改変で使用（下記1〜14行目相当）。
 *       加えて dist/assets/site-consistency.css から
 *       「.client-view-tabs（スライド／一覧 切替）」と
 *       「.client-marquee.is-list（一覧表示）」の定義のみを転記している。
 *
 * 支給 client-marquee.css から意図的に省いたもの：
 *   - .client-motion-toggle（停止ボタン）… RYO指示「停止ボタンは設けない」のため不要。
 *     JS（client-grid.js）も生成しないので、あっても当たらないデッドCSSになる。
 *
 * 支給 site-consistency.css から持ち込んでいないもの：
 *   - .contact-preview 一式（支給 contact は onsubmit="return false" の静的モック専用）
 *   - body header/footer .logo-window の寸法変更（今回の指示9項目に無いため不実施）
 */

/* ---- 支給 client-marquee.css（転記） ---- */
.client-marquee{overflow:hidden;width:100%;margin-top:22px;padding:4px 0;touch-action:pan-y}
#client-grid{display:flex;flex-wrap:nowrap;width:max-content;gap:0;margin:0;will-change:transform}
#client-grid .client-marquee-group{display:flex;flex:none;gap:24px;padding-right:24px}
#client-grid .client-card{box-sizing:border-box;flex:0 0 auto;width:var(--marquee-card-width,310px);max-width:70vw;padding:24px 18px;gap:16px}
#client-grid .client-logo{height:var(--client-logo-size,165px)}
#client-grid .client-logo img{max-width:100%;max-height:100%;height:var(--client-logo-size,165px);width:auto;object-fit:contain}
#client-grid .uniform-next .client-logo img{width:100%;height:auto}
#client-grid .client-card>span{font-size:14px;line-height:1.6}
#client-grid .client-card:focus-visible{outline:3px solid #3158db;outline-offset:-3px}
#services .service-en{overflow-wrap:anywhere}
@media(prefers-reduced-motion:reduce){.client-marquee{overflow-x:auto}#client-grid{transform:none!important;will-change:auto}#client-grid .client-marquee-group[aria-hidden]{display:none}}

/* ---- 支給 site-consistency.css より：表示切替タブ ＋ 一覧表示 ---- */
.client-view-tabs{display:flex;justify-content:flex-end;gap:8px;margin-top:22px}
.client-view-tabs button{font:inherit;font-size:13px;background:white;border:1px solid #bbb;border-radius:99px;padding:10px 24px;cursor:pointer;color:#151515}
.client-view-tabs button[aria-pressed="true"]{background:#151515;border-color:#151515;color:white}
.client-view-tabs button:focus-visible{outline:3px solid #3158db;outline-offset:3px}
.client-marquee.is-list{overflow:visible;touch-action:auto}
.client-marquee.is-list #client-grid{width:100%;display:block;transform:none!important;will-change:auto}
.client-marquee.is-list #client-grid .client-marquee-group{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:24px;padding:0;width:100%}
.client-marquee.is-list #client-grid .client-card{width:100%;max-width:none}
@media(max-width:760px){.client-marquee.is-list #client-grid .client-marquee-group{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.client-marquee.is-list #client-grid .client-card{padding:18px 10px}.client-marquee.is-list #client-grid .client-card>span{font-size:12px}}
@media(max-width:360px){.client-marquee.is-list #client-grid .client-marquee-group{grid-template-columns:1fr}}