.c-pnNav {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: space-between;
	margin: 1rem 0;
}

.c-pnNav__item {
	position: relative;
	flex: 1 0 auto;
	max-width: 100%;
	font-size: .8rem;

	@include tab {
		width: 50%;
	}

	.c-pnNav__svg {
		position: absolute;
		top: 50%;
		display: block;
		transform: translateY(-50%);
	}

	&.-prev {

		.c-pnNav__link {
			padding-left: 1.5em;
		}

		.c-pnNav__svg {
			left: 0;
		}
	}

	&.-next {

		.c-pnNav__link {
			justify-content: flex-end;
			padding-right: 1.5em;
		}

		.c-pnNav__svg {
			right: 0;
		}

	}
}

.c-pnNav__link {
	position: relative;
	width: 100%;
	height: 100%;
	padding: .5rem .75rem;
	color: inherit;
	line-height: 1.5;
	text-decoration: none;
	transition: .25s;

	&:hover {
		opacity: .75;
	}
}

.c-pnNav__title {
	// hover時に動くように relative
	position: relative;
	left: 0;
	transition: all .25s;
}