/* =========================================================
   みんなのキャリア｜フォトギャラリー v1.1
========================================================= */
.mcg-pg,
.mcg-pg * { box-sizing: border-box !important; }

.mcg-pg {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 30px 0 40px !important;
	padding: 0 !important;
	background: transparent !important;
	font-family: "Helvetica Neue","Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","YuGothic",sans-serif !important;
}

.mcg-pg__track {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 0 5px !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	scroll-behavior: smooth !important;
	scroll-snap-type: x mandatory !important;
	-webkit-overflow-scrolling: touch !important;
	scrollbar-width: none !important;
}

.mcg-pg__track::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }

.mcg-pg--single .mcg-pg__track {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 22px !important;
}

.mcg-pg--single .mcg-pg__item {
	display: block !important;
	flex: 0 0 calc((100% - 22px) / 2) !important;
	width: calc((100% - 22px) / 2) !important;
	min-width: calc((100% - 22px) / 2) !important;
	max-width: calc((100% - 22px) / 2) !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	scroll-snap-align: start !important;
}

.mcg-pg--double .mcg-pg__track {
	display: grid !important;
	grid-template-rows: repeat(2, auto) !important;
	grid-auto-flow: column !important;
	grid-auto-columns: calc((100% - 22px) / 2) !important;
	column-gap: 22px !important;
	row-gap: 28px !important;
}

.mcg-pg--double .mcg-pg__item {
	display: block !important;
	width: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	scroll-snap-align: start !important;
}

.mcg-pg__image {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	aspect-ratio: 16 / 9 !important;
	margin: 0 !important;
	padding: 0 !important;
	object-fit: cover !important;
	object-position: center !important;
	border: 0 !important;
	border-radius: 12px !important;
	box-shadow: none !important;
}

.mcg-pg__tag {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: auto !important;
	max-width: 100% !important;
	margin: 11px 0 0 !important;
	padding: 6px 13px !important;
	color: #078fe7 !important;
	background: #f3faff !important;
	border: 1px solid #b9e3ff !important;
	border-radius: 8px !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	letter-spacing: 0 !important;
	text-decoration: none !important;
	white-space: nowrap !important;
}

.mcg-pg__caption {
	display: block !important;
	margin: 10px 2px 0 !important;
	padding: 0 !important;
	color: #333 !important;
	background: transparent !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.75 !important;
	letter-spacing: 0 !important;
	border: 0 !important;
}

.mcg-pg__controls {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	width: 100% !important;
	gap: 7px !important;
	margin: 14px 0 0 !important;
	padding: 0 !important;
}

.mcg-pg__button {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 29px !important;
	height: 29px !important;
	min-width: 29px !important;
	margin: 0 !important;
	padding: 0 !important;
	background: #fff !important;
	border: 1px solid #d8efff !important;
	border-radius: 50% !important;
	box-shadow: none !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	cursor: pointer !important;
	transition: background-color .2s ease, opacity .2s ease !important;
}

.mcg-pg__button:hover { background: #f4fbff !important; }
.mcg-pg__button:disabled { opacity: .3 !important; cursor: default !important; }

.mcg-pg__button svg {
	display: block !important;
	width: 9px !important;
	height: 9px !important;
	margin: 0 !important;
	padding: 0 !important;
	fill: #1499ea !important;
}

@media screen and (max-width: 767px) {
	.mcg-pg {
		width: 100% !important;
		max-width: 100% !important;
		margin: 24px 0 34px !important;
		padding: 0 !important;
	}

	.mcg-pg--single .mcg-pg__track {
		gap: 14px !important;
		padding: 0 2px 5px 0 !important;
	}

	.mcg-pg--single .mcg-pg__item {
		flex: 0 0 92% !important;
		width: 92% !important;
		min-width: 92% !important;
		max-width: 92% !important;
	}

	.mcg-pg--double .mcg-pg__track {
		grid-template-rows: repeat(2, auto) !important;
		grid-auto-flow: column !important;
		grid-auto-columns: 92% !important;
		column-gap: 14px !important;
		row-gap: 24px !important;
		padding: 0 2px 5px 0 !important;
	}

	.mcg-pg__image {
		width: 100% !important;
		max-width: none !important;
		aspect-ratio: 16 / 10 !important;
		border-radius: 11px !important;
	}

	.mcg-pg__tag {
		margin: 9px 0 0 !important;
		padding: 5px 11px !important;
		font-size: 13px !important;
		line-height: 1.4 !important;
		border-radius: 7px !important;
	}

	.mcg-pg__caption {
		margin: 8px 1px 0 !important;
		font-size: 13px !important;
		line-height: 1.7 !important;
	}

	.mcg-pg__controls { margin: 12px 0 0 !important; }
	.mcg-pg__button { width: 28px !important; height: 28px !important; min-width: 28px !important; }
	.mcg-pg__button svg { width: 9px !important; height: 9px !important; }
}