@charset "Shift_JIS";

.cp_css {
	width: 505px;
	padding-top: 270px;
	position: relative;
	margin-top: 1em;
	margin-right: auto;
	margin-bottom: 1em;
	margin-left: auto;
	text-align: center;

}

.cp_css > img {
	position: absolute;
	left: 40px;
	top: 0;
	transition: all 0.5s;
	border-radius: 3px;
	box-shadow:0px 0px 5px 0px rgba(0,0,0,0.3);
}

.cp_css input[name='cp_switch'] {
	display: none;
}


.cp_css label {
	margin: 15px 0px 0 2px;
	border: 2px solid #ffffff;
	display: inline-block;
	cursor: pointer;
	transition: all 0.5s ease;
	opacity: 0.3;
	border-radius: 3px;
	position: relative;
	right: 30px;
}

.cp_css label:hover {
	opacity: 0.9;
}

.cp_css label img {
	display: block;
	width: 60px;
	border-top-left-radius: 2px 2px;
	border-top-right-radius: 2px 2px;
	border-bottom-right-radius: 2px 2px;
	border-bottom-left-radius: 2px 2px;

}

.slideshow {
	position: relative;
	overflow: hidden;
}
input[name="slideshow"] {
	display: none;
}

.cp_css input[name='cp_switch']:checked + label {
	border-width: 2px;
	border-style: solid;
	border-color: #27812c;
	opacity: 1;
	position: relative;
}

.cp_css input[name='cp_switch'] ~ img {
	opacity: 0;
}

.cp_css input[name='cp_switch']:checked + label + img {
	opacity: 1;
}

@media screen and (max-width: 900px) {
#open2{
	font-size:100%;
}
.cp_css {
	width: 100%;
	height: auto;
	padding-top: 75%;
	position: relative;
	margin-top: 1em;
	margin-right: auto;
	margin-bottom: 1em;
	margin-left: auto;
	text-align: center;
	padding-left: 35px;

}

.cp_css > img {
	position: absolute;
	height: auto;
	width: 100%;
	left: 3px;
	right: 3px;
	top: 0;
	transition: all 0.5s;
	border-radius: 3px;
	box-shadow:0px 0px 5px 0px rgba(0,0,0,0.3);
}

.cp_css input[name='cp_switch'] {
	display: none;
}


.cp_css label {
	margin: 15px 0px 0 0px;
	border: 2px solid #ffffff;
	display: inline-block;
	cursor: pointer;
	transition: all 0.5s ease;
	opacity: 0.3;
	border-radius: 3px;
	position: relative;
	right: 30px;
}

.cp_css label:hover {
	opacity: 0.9;
}

.cp_css label img {
	display: block;
	width: 80px;
	border-top-left-radius: 2px 2px;
	border-top-right-radius: 2px 2px;
	border-bottom-right-radius: 2px 2px;
	border-bottom-left-radius: 2px 2px;
}

.cp_css input[name='cp_switch']:checked + label {
	border-width: 2px;
	border-style: solid;
	border-color: #27812c;
	opacity: 1;
	position: relative;
}

.cp_css input[name='cp_switch'] ~ img {
	opacity: 0;
}

.cp_css input[name='cp_switch']:checked + label + img {
	opacity: 1;
}
}

@media screen and (max-width: 480px) {
#open2{
	font-size:10.5px;
}
.cp_css {
	width: 100%;
	height: auto;
	padding-top: 75%;
	position: relative;
	margin-top: 1em;
	margin-right: auto;
	margin-bottom: 1em;
	margin-left: auto;
	text-align: center;
	padding-left: 35px;

}

.cp_css > img {
	position: absolute;
	height: auto;
	width: 100%;
	left: 3px;
	right: 3px;
	top: 0;
	transition: all 0.5s;
	border-radius: 3px;
	box-shadow:0px 0px 5px 0px rgba(0,0,0,0.3);
}

.cp_css input[name='cp_switch'] {
	display: none;
}


.cp_css label {
	margin: 15px 0px 0 0px;
	border: 2px solid #ffffff;
	display: inline-block;
	cursor: pointer;
	transition: all 0.5s ease;
	opacity: 0.3;
	border-radius: 3px;
	position: relative;
	right: 30px;
}

.cp_css label:hover {
	opacity: 0.9;
}

.cp_css label img {
	display: block;
	width: 40px;
	border-top-left-radius: 2px 2px;
	border-top-right-radius: 2px 2px;
	border-bottom-right-radius: 2px 2px;
	border-bottom-left-radius: 2px 2px;
}

.cp_css input[name='cp_switch']:checked + label {
	border-width: 2px;
	border-style: solid;
	border-color: #27812c;
	opacity: 1;
	position: relative;
}

.cp_css input[name='cp_switch'] ~ img {
	opacity: 0;
}

.cp_css input[name='cp_switch']:checked + label + img {
	opacity: 1;
}
}