@charset "UTF-8";

/**
 * 協賛企業一覧（archive-sponsor.php）
 *
 * design/協賛企業一覧.svg（SP 390）と 協賛企業一覧-pc.svg（PC 1920）準拠。
 *
 *                    SP(390)                  PC(1920)
 *   見出し            SPONSORS 19px #e83318     25px
 *                     協賛企業一覧 25px #535353  37px
 *   リード文          14px / 行送り 24px        18px
 *   大ロゴカード      110x67 白地 罫#707070     169x103（2列 / 4列）
 *   小ロゴカード      110x67 相当               169x103 相当（縮小し多列）
 *
 * ロゴは比率を保ったまま contain で白枠に収め、CLS を出さないよう
 * フレーム側で高さを予約する。
 */

/* --- 見出しブロック ----------------------------------------------------- */
/* SVG: SPONSORS 19/25px #e83318 / 協賛企業一覧 25/37px #535353 w800 ls.05em */
.sponsor-archive__header {
	width: min(100% - 40px, 1000px);
	margin: 26px auto 0;
	text-align: center;
}

/* SVG: SP 14px / PC 18px、いずれも #535353 */
.sponsor-archive__lead--inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* --- 注記 --------------------------------------------------------------- */
/* SVG: ランダム表示の旨を伝える注記。SP 12px / PC も同様の描写。*/
.sponsor-archive__note {
	margin: 20px auto 0;
	color: #535353;
	font-size: 18px;
	text-align: center;
}

/* --- カードグリッド ------------------------------------------------------ */
/* 大ロゴ（2万円）は SP 2列 / PC 4列、小ロゴ（1万円・5千円）は SP 3列 / PC 6列。*/
.sponsor-archive__grid {
	display: grid;
	max-width: 1080px;
	margin: 24px auto 0;
	padding: 0;
	list-style: none;
	gap: 12px;
}
.sponsor-archive__grid--large {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sponsor-archive__grid--small {
	margin-top: 32px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

/* --- カード -------------------------------------------------------------- */
/* SVG: 白地に 1px 罫 #707070。比率を aspect-ratio で固定し CLS を防ぐ。*/
.sponsor-card__link {
	display: flex;
	box-sizing: border-box;
	height: 100%;
	padding: 8px;
	border: 1px solid #707070;
	background-color: #ffffff;
	aspect-ratio: 110 / 67;
	justify-content: center;
	align-items: center;
	transition: opacity 0.2s ease;
}

/* SVG: 大ロゴだけ比率が異なる（PC 256x159 / SP 164x102 ＝ いずれも約 1.61）*/
.sponsor-archive__grid--large .sponsor-card__link {
	aspect-ratio: 256 / 159;
}

a.sponsor-card__link:hover,
a.sponsor-card__link:focus-visible {
	opacity: 0.75;
}

a.sponsor-card__link:focus-visible {
	outline: 3px solid rgba(11, 83, 164, 0.4);
	outline-offset: 2px;
}

.sponsor-card__img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.sponsor-card__placeholder {
	overflow: hidden;
	color: #535353;
	font-size: 12px;
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* --- レスポンシブ ------------------------------------------------------- */
@media screen and (min-width: 768px) {
	.sponsor-archive__header {
		margin-top: 56px;
	}

	.sponsor-archive__note {
		margin-top: 28px;
		font-size: 14px;
	}

	.sponsor-archive__grid {
		margin-top: 32px;
		gap: 20px;
	}

	/* SVG(PC): 大ロゴ 256x159 を 4 列、gap 20px（内容幅 1080px）*/
	.sponsor-archive__grid--large {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	/* SVG(PC): 小ロゴ 169x103 を 6 列、列 gap 13px・行 gap 14px。大ロゴ群とは 48px 空ける */
	.sponsor-archive__grid--small {
		margin-top: 48px;
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: 14px 13px;
	}
}

@media screen and (max-width: 767px) {
	.main_container.sponsor-archive {
		padding-bottom: 60px;
	}
}

/* --- モーション設定の尊重 ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.sponsor-card__link {
		transition: none;
	}
}