@charset "UTF-8";
/*
 * Lacks Japan サイト共通UI — 支援企業ロゴ帯
 *
 * 表示は2通り。管理画面の「動き」で切り替える。
 *   .lj-lm--static … 止めて並べる（既定）。グリッドで整列し、入りきらなければ折り返す。
 *   .lj-lm--scroll … 左へゆっくり流し続ける。
 *
 * 方針
 *  - フォントは指定しない。テーマ(SWELL)の設定をそのまま継承する。
 *  - ブレークポイントはテーマと同じ 600px / 960px のみ。独自の区切りを増やさない。
 *  - width:100vw を使わない。
 *  - すべて .lj-lm 配下にスコープし、他ページ・他要素へ影響させない。
 *  - JavaScript を使わない。
 *  - CASE STUDY より目立たせない。囲み・影・色フィルターを掛けない。
 *  - テーマは .post_content li に margin、.post_content ul に padding-left を当てている
 *    （詳細度 0,1,1）。ここは .lj-lm を前置した 0,2,0 以上で上書きする。テーマ本体は変更しない。
 */

/* ------------------------------------------------------------------
 * サイズの調整はこのブロックだけを触れば済むようにしてある。
 *
 * ■ 静止（--static）
 *   --lj-lm-cell-min … 1列の最小幅。実際の列幅はここから自動で決まる。
 *      grid の auto-fit が「入るだけ列を作り、余った列は畳んで残りを広げる」ので、
 *      9社なら9列ぶんに均等配分され、左右の端が l-container にぴったり揃う。
 *      企業が増えて入りきらなくなったら自動で折り返す。列数の指定は不要。
 *
 * ■ 流す（--scroll）
 *   --lj-lm-cell-w … ロゴ1枚ぶんの固定幅。
 *   ※ PC の (cell-w + gap) は lacks-site-ui.php の LJ_SUI_ITEM_PITCH_PC と対応させること
 *     （流れている途中に空白を出さないためのセット数計算に使っている）。現在：152 + 52 = 204
 *
 * 共通
 *   --lj-lm-cell-h … ロゴの表示領域の高さ。
 *      ロゴの形が横長でも正方形でも、占める枠の高さは必ずこの値に揃う。
 *      画像は object-fit:contain で収めるので、縦横比は崩れない。
 * ------------------------------------------------------------------ */
.lj-lm {
	--lj-lm-cell-min: 88px;   /* 600px以上でだけ使う（SPは2列固定） */
	--lj-lm-cell-h: 76px;
	--lj-lm-gap: 14px;
	--lj-lm-row-gap: 14px;

	/* ロゴを囲むカード。
	   枠を消したいときは --lj-lm-card-border を transparent、
	   --lj-lm-card-bg を transparent、--lj-lm-card-pad を 0 にすればよい。
	   枠線の色は導入事例カード（lacks-case-cards）と同じ系統にそろえてある。 */
	--lj-lm-card-bg: #fff;
	--lj-lm-card-border: rgba(18, 0, 62, .10);
	--lj-lm-card-radius: 8px;
	--lj-lm-card-pad: 10px;
	--lj-lm-duration: 80s; /* PHPがインラインで実際の値を入れる（--scroll のみ） */
}

.lj-lm--scroll {
	--lj-lm-cell-w: 104px;
	--lj-lm-cell-h: 60px;
	--lj-lm-gap: 26px;
}

.lj-lm,
.lj-lm *,
.lj-lm *::before,
.lj-lm *::after {
	box-sizing: border-box;
}

/* 帯の上の小見出し。CASE STUDY の見出しより明らかに小さく、控えめに。
   l-container を併用しているので、左端は他セクションの見出しとそろう。
   margin の左右を auto のままにしないと l-container の中央寄せが効かない。 */
.lj-lm .lj-lm__label {
	margin: 0 auto 16px;
	font-size: 12px;
	line-height: 1.6;
	letter-spacing: .08em;
	color: #6d6b84;
}

.lj-lm .lj-lm__set {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* テーマ側の本文リスト装飾が入り込まないようにする（このセクション内だけ） */
.lj-lm .lj-lm__item::before,
.lj-lm .lj-lm__item::after {
	content: none;
}

/* ロゴ1枚ぶんの枠（カード）。
   padding のぶんロゴが小さくなるので、--lj-lm-cell-h はその分を見込んだ値にしてある。 */
.lj-lm .lj-lm__item {
	height: var(--lj-lm-cell-h);
	margin: 0;
	padding: var(--lj-lm-card-pad);
	display: flex;
	align-items: center;
	justify-content: center;
	list-style: none;
	background: var(--lj-lm-card-bg);
	border: 1px solid var(--lj-lm-card-border);
	border-radius: var(--lj-lm-card-radius);
}

/* 縦横比を保ったまま枠に収める。引き伸ばさない。中央に置く。 */
.lj-lm .lj-lm__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

/* ==================================================================
 * 静止（既定）
 * 器は l-container。左端がCASE STUDYの見出しと、右端が本文の右端とそろう。
 * ================================================================== */

/* スマホは2列で固定する。
   auto-fit だと 320px〜599px のあいだで列数が2にも3にもなってしまい、
   端末によって見え方が変わるため（テーマのブレークポイントは 600/960 の2点だけで増やさない方針）。 */
.lj-lm--static .lj-lm__set {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--lj-lm-row-gap) var(--lj-lm-gap);
	align-items: center;
}

.lj-lm--static .lj-lm__item {
	width: 100%;
}

/* ==================================================================
 * 流す
 * ================================================================== */

/* はみ出しを隠すのはここ。
   端でロゴが切れて見えるのは自然な見え方なので、フェードやマスクは掛けない。 */
.lj-lm--scroll .lj-lm__rail {
	overflow: hidden;
}

/* 連結したロゴ列。これ全体を左へ動かす。 */
.lj-lm--scroll .lj-lm__track {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	/* 等速で流し続けるための linear。
	   「ずっと流れている」ことを示すのが目的なので、加減速させない。 */
	animation: lj-lm-scroll var(--lj-lm-duration) linear infinite;
}

.lj-lm--scroll .lj-lm__set {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
}

/* 余白を gap ではなく右マージンで持たせている理由：
   gap にすると「セットとセットの継ぎ目」だけ余白が半端になり、
   -50% 動かした位置で並びがズレて継ぎ目が見えてしまうため。
   右マージンなら 1枚 = cell-w + gap がどこまでも均一に続く。 */
.lj-lm--scroll .lj-lm__item {
	flex: 0 0 auto;
	width: var(--lj-lm-cell-w);
	margin: 0 var(--lj-lm-gap) 0 0;
	/* 流している最中に枠が動くと煩いので、カードにはしない */
	padding: 0;
	background: none;
	border: 0;
}

@keyframes lj-lm-scroll {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		/* セットの数は必ず偶数。-50% はちょうど整数セット分なので、
		   1周した瞬間の並びが開始時と完全に一致する＝継ぎ目が出ない。 */
		transform: translate3d(-50%, 0, 0);
	}
}

/* ==================================================================
 * レスポンシブ（テーマと同じ 600 / 960 の2点のみ）
 * ================================================================== */

@media (min-width: 600px) {
	.lj-lm {
		--lj-lm-cell-min: 104px;
		--lj-lm-cell-h: 78px;
		--lj-lm-gap: 16px;
		--lj-lm-row-gap: 16px;
		--lj-lm-card-pad: 8px;
	}

	.lj-lm--scroll {
		--lj-lm-cell-w: 128px;
		--lj-lm-cell-h: 74px;
		--lj-lm-gap: 34px;
	}

	.lj-lm .lj-lm__label {
		font-size: 13px;
		margin-bottom: 20px;
	}

	/* タブレット以上は、入るだけ列を作って左右の端を器にそろえる */
	.lj-lm--static .lj-lm__set {
		grid-template-columns: repeat(auto-fit, minmax(var(--lj-lm-cell-min), 1fr));
	}
}

@media (min-width: 960px) {
	.lj-lm {
		--lj-lm-cell-min: 100px;
		--lj-lm-cell-h: 84px;
		--lj-lm-gap: 16px;
		--lj-lm-row-gap: 16px;
		--lj-lm-card-pad: 8px;
	}

	.lj-lm--scroll {
		--lj-lm-cell-w: 152px;
		--lj-lm-cell-h: 88px;
		--lj-lm-gap: 52px;
	}

	.lj-lm .lj-lm__label {
		margin-bottom: 24px;
	}
}

/* ==================================================================
 * 動きを減らす設定のとき
 * 「流す」を選んでいても完全に止め、静止と同じ並べ方に切り替える。
 * 止めた状態でも全ロゴが読めるようにする（横スクロールを強いない）。
 * ================================================================== */

@media (prefers-reduced-motion: reduce) {
	.lj-lm--scroll .lj-lm__rail {
		overflow: visible;
		padding-left: var(--swl-pad_container, 4vw);
		padding-right: var(--swl-pad_container, 4vw);
	}

	.lj-lm--scroll .lj-lm__track {
		animation: none;
		display: block;
		width: 100%;
	}

	.lj-lm--scroll .lj-lm__set[aria-hidden="true"] {
		display: none;
	}

	.lj-lm--scroll .lj-lm__set {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--lj-lm-row-gap) var(--lj-lm-gap);
		align-items: center;
		width: 100%;
	}

	@media (min-width: 600px) {
		.lj-lm--scroll .lj-lm__set {
			grid-template-columns: repeat(auto-fit, minmax(var(--lj-lm-cell-min), 1fr));
		}
	}

	.lj-lm--scroll .lj-lm__item {
		width: 100%;
		margin: 0;
	}
}