<div class="cp_modal05">
	<label for="cp_controller" class="cp_btn">open modal</label>
	<div class="cp_modal">
		<input type="checkbox" id="cp_controller" class="cp_open" hidden>
		<div class="cp_modal_wrap">
			<label for="cp_controller" class="cp_overlay"></label>
			<div class="cp_modal_cont">
				<label for="cp_controller" class="cp_close"></label>
				<input type="radio" name="nav" id="cp_slide-1" class="cp_radio" checked hidden/>
				<input type="radio" name="nav" id="cp_slide-2" class="cp_radio" hidden/>
				<input type="radio" name="nav" id="cp_slide-3" class="cp_radio" hidden/>
				<div class="cp_modal_slide content-1">
					<div class="cp_modal_item">
						<h2>テキスト - Slide 1</h2>
						<p>テキスト</p>
						<div class="cp_nav">
							<label for="cp_slide-2" class="cp_next"></label>
						</div>
					</div>
				</div>
				<div class="cp_modal_slide content-2">
					<div class="cp_modal_item">
						<h2>テキスト - Slide 2</h2>
						<p>テキスト</p>
						<div class="cp_nav">
							<label for="cp_slide-1" class="cp_prev"></label>
							<label for="cp_slide-3" class="cp_next"></label>
						</div>
					</div>
				</div>
				<div class="cp_modal_slide content-3">
					<div class="cp_modal_item">
						<h2>テキスト - Slide 3</h2>
						<p>テキスト</p>
						<p class="citation">テキスト</p>
						<div class="cp_nav">
							<label for="cp_slide-2" class="cp_prev"></label>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

.cp_modal05 {
	font-size: 1rem;
	box-sizing: border-box;
	width: 100%;
	height: 100vh;
	display: flex;
	margin: 0;
	padding: 0;
	text-align: center;
	color: #333333;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: center;
	justify-content: center;
}
.cp_modal05 #cp_controller {
	position: absolute;
	left: -999em;
	opacity: 0;
}
.cp_modal05 .cp_open:checked ~ .cp_modal_wrap {
	display: block;
}
.cp_modal05 .cp_open:checked ~ .cp_modal_wrap:before,
.cp_modal05 .cp_open:checked ~ .cp_modal_wrap .cp_overlay {
	display: block;
}
.cp_modal05 .cp_close {
	font-size: 1.5em;
	position: absolute;
	z-index: 100;
	top: 0;
	right: 0.5em;
	cursor: pointer;
}
.cp_modal05 .cp_close::before {
	font-family: 'FontAwesome';
	content: '\f00d';
}
.cp_modal05 .cp_close:hover::before {
	color: #00bcd4;
}
.cp_modal05 .cp_modal_wrap {
	display: none;
}
.cp_modal05 .cp_modal_wrap:before {
	position: fixed;
	z-index: 101;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: none;
	content: '';
	background: rgba(27,37,56,0.8);
}
.cp_modal05 .cp_overlay {
	position: fixed;
	z-index: 102;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: none;
}
.cp_modal05 .cp_modal_cont {
	position: absolute;
	z-index: 103;
	top: 50%;
	left: 50%;
	overflow: hidden;
	width: 80%;
	max-width: 90%;
	max-height: 90%;
	padding: 15px 0;
	transform: translate(-50%, -50%);
	text-align: center;
	border-radius: 0.25em;
	background: #ffffff;
}
.cp_modal05 .cp_modal_cont p {
	margin: 0;
	line-height: 1.8;
	text-indent: 1em;
	text-align: left;
	padding: 0 2.5em;
}
.cp_modal05 .cp_modal_cont p.citation {
	text-align: right;
}
.cp_modal05 .cp_modal_cont p.citation::before {
	content: '00'
}
.cp_modal05 .cp_modal_cont p:not(.citation) {
	margin-bottom: 1.5rem;
}
.cp_modal05 .cp_modal_item {
	position: relative;
	margin: 0 1em;
	padding: 3em 0 1em 0;
}
.cp_modal05 .cp_modal_slide {
	position: absolute;
	display: flex;
	width: 100%;
	transition: all 0.4s ease-in;
}
.cp_modal05 .cp_slide-2 {
	left: 100%;
}
.cp_modal05 .cp_slide-3 {
	left: 200%;
}
.cp_modal05 #cp_slide-1:checked ~ .content-1 {
	position: relative;
	left: 0;
	overflow: auto;
}
.cp_modal05 #cp_slide-1:checked ~ .content-2 {
	left: 100%;
}
.cp_modal05 #cp_slide-2:checked ~ .content-1 {
	left: -100%;
}
.cp_modal05 #cp_slide-2:checked ~ .content-2 {
	position: relative;
	left: 0;
	overflow: auto;
}
.cp_modal05 #cp_slide-2:checked ~ .content-3 {
	left: 100%;
}
.cp_modal05 #cp_slide-3:checked ~ .content-1 {
	left: -200%;
}
.cp_modal05 #cp_slide-3:checked ~ .content-2 {
	left: -100%;
}
.cp_modal05 #cp_slide-3:checked ~ .content-3 {
	position: relative;
	left: 0;
	overflow: auto;
}
.cp_modal05 .cp_nav {
	position: absolute;
	top: 50%;
	width: 100%;
}
.cp_modal05 .cp_nav label {
	line-height: 0.5em;
	position: absolute;
	display: inline-block;
	width: 10px;
	height: 10px;
	padding: 0.5em;
	cursor: pointer;
	color: #ffffff;
	border-radius: 0.3em;
	background: #00bcd4;
}
.cp_modal05 .cp_nav label.cp_prev {
	left: 0;
}
.cp_modal05 .cp_nav label.cp_prev::before {
	font-family: 'FontAwesome';
	content: '\f100';
}
.cp_modal05 .cp_nav label.cp_next {
	right: 0;
}
.cp_modal05 .cp_nav label.cp_next::before {
	font-family: 'FontAwesome';
	content: '\f101';
}
.cp_modal05 .cp_btn {
	position: relative;
	display: inline-block;
	min-width: 60px;
	padding: 8px 15px;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	border: #da3c41 solid 1px;
	border-radius: 3px;
	background: #ffffff;
}
@media only screen and (max-width: 767px) {
	.cp_modal05 .cp_modal_cont {
		width: 100%;
		max-width: 100%;
		border-radius: 0;
	}
}