@charset "UTF-8";

#slider {width: 1024px; height: 80vh;margin: 0 auto;}
#slider h1 {position: absolute; z-index: 0; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 95%;}
#slider h1 img {width: 100%;}
#bo-series a:hover img, #bo-series a:active img, #bo-series a:focus img {opacity: 0.8;}
#bo-series * {	box-sizing: border-box;}
#bo-series a {	text-decoration: none;}
#bo-series img {width: 100%;}
#bo-series button {
	line-height: 1.5;
	position: relative;
	display: inline-block;
	cursor: pointer;
	user-select: none;
	transition: all 0.3s;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	letter-spacing: 0.1em;
	color: #212529;
}
#bo-series .btn-border {
	border: 1px solid #222;
	background: #fff;
}
#bo-series .syousai .btn-border {
	padding: 9px 50px;
}
#bo-series .btn-border:hover {
	color: #fff;
	background: #555555;
}
#bo-series sup {
	vertical-align: super;
	width: 50%;
}
#bo-series .title .txt01 {
	line-height: 1.8;
	text-align: center;
	margin-top: 50px;
}
#bo-series .syousai {
	border: 0;
	background-color: #ffffff;
	float: left;
}
.btn {overflow: hidden;}
#bo-series .rankakumaku { background-color: #fffcf4;}
/* SP
----------------------------------------------------------------- */
@media only screen and (max-width: 768px) {
	#slider {width: 100%; height: 70vh;}
	#slider h1 { position: absolute; z-index: 0; top: 15%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: 70%;}
	#slider .sp2{  position: absolute; bottom: 3%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: 78%;}
	.pc {
		display: none !important;
	}
	.sp {
		display: block !important;
	}
	.br-pc {
		display: none;
	}
	img {
		max-width: 100%;
	}
	#bo-series {
		margin: 0 auto 50px;
		color: #222222;
		font-size: 14px;
	}
	#bo-series img {
		border: 0;
		vertical-align: bottom;
		max-width: 100%;
		height: auto;
	}
	#bo-series span.btn-border {
		padding: 7% 10.5%;
		font-size: 12px;
	}
	#bo-series .btn-a .syousai {
		padding: 1px 5% 0 7%;	
	}
	#bo-series .btn-c .syousai {
		padding: 10px 25%;
        width: 100%;
	}
	#bo-series .syousai .btn-border {
		padding: 6% 21%;
		font-size: 12px;
	}
	#bo-series .btn-a .syousai .btn-border {
		padding: 6% 21%;
	}
	#bo-series .btn {
		margin-bottom: 20px;
	}
	section{margin-bottom: 50px; overflow: hidden;}
	.title {margin: 50px auto 80px;	}
	.details {margin-top: 50px;	}
	#bo-series h3.item-name {font-size: 18px; margin-bottom: 10px; text-align: center;line-height: 1.6;}
	#bo-series .syousai {width: 50%;padding: 10px;text-align: center;}
	#bo-series .cart {padding: 11px;width: 50%;	}
	#bo-series .title .txt01 {margin: 40px 0 0;font-size: 14px;}
	#bo-series .kome {font-size: 12px;line-height: 1.3;text-align: left;padding: 0 5% 30px;}
	#bo-series .kome1 {font-size: 12px;line-height: 1.3;text-align: left;float: right;padding: 20px;}
	#bo-series .rankakumaku { margin-top: 50px;}
	#bo-series .rankakumaku h2 {  margin: 0 auto;padding-top: 50px;}
	#bo-series .rankakumaku .ran_txt { margin: 10% 3% 0; padding: 3%; border: 1px solid #aaa; font-size: 18px;}
	#bo-series .power h2 { margin: 0 auto 50px;}
	#bo-series .power li { width: 100%; margin-bottom: 30px;}
	#bo-series .power p { padding: 2% 12%;font-size: 14px;}
	#bo-series .step h2 { margin: 80px auto 50px; font-size:36px;text-align: center;}
	#bo-series .bo_list { border-radius: 10px;font-size: 18px;padding: 20px;background-color: #000000;color: #ffffff;margin: 0 5% 80px;text-align: center;}
	#bo-series .ran_link{font-size: 16px;text-decoration: underline;text-align: center;padding: 0 50px 20px;}
}
/* PC
----------------------------------------------------------------- */
@media only screen and (min-width: 768px) {
	.pc {
		display: block !important;
	}
	.sp {
		display: none !important;
	}
	.br-sp {
		display: none;
	}
	#bo-series button {
		font-size: 18px;
		padding: 12px 0;
	}
	#bo-series .btn-border {
		padding: 12px 65px;
	}
	.syousai .btn-border {
		padding: 12px 65px;
	}
	#bo-series section {
		margin: 0 auto 80px;
		width: 1024px;
		overflow: hidden;
	}
	#bo-series .fv {
		margin: 0 auto;
		width: 1024px;
	}
#slider h1 img {width: 973px;padding-top: 100px;margin:0 auto ;}
#bo-series .details {width: 50%;text-align: center; float: left;margin-bottom: 50pxs;}
#bo-series .details .item {margin-bottom: 20px;}
#bo-series h3.item-name {font-size: 24px; line-height: 1.6; margin-bottom: 20px; height: 110px;}

#bo-series .btn-a .syousai {
	margin: 1px 27px 20px;
	padding: 1px 0;
	font-size: 18px;
}
#bo-series .btn-b .syousai {
	margin: 1px 27px 20px;
	padding: 13px 0;
	font-size: 18px;
}
#bo-series .btn-c .syousai {
	width: 100%;
	padding: 13px 0 10%;
	font-size: 18px;
}
#bo-series .btn-a .syousai .btn-border {
    padding: 12px 50px;
}
#bo-series .txt01 {font-size: 24px;}
#bo-series .kome {font-size: 12px;line-height: 1.3;text-align: left;padding: 0 30px ; height: 130px; clear: both;}
#bo-series .kome1 {font-size: 12px;line-height: 1.3;text-align: left;float: right;padding: 20px;}
#bo-series .rankakumaku h2 { width: 768px; margin: 0 auto;padding-top: 50px;}
#bo-series .rankakumaku .ran_txt { width: 570px; margin: 50px auto 0; padding:30px ; border: 1px solid #aaa; font-size: 18px;}
#bo-series .power h2 { width: 768px; margin: 50px auto;}
#bo-series .power li { width: 50%; float: left;margin-bottom: 50px;}
#bo-series .power p { padding:10px 20px 20px 60px ;}
#bo-series .takasa {height: 123px;}
#bo-series .step h2 { width: 768px; margin: 0 auto; font-size:36px;text-align: center;}
#bo-series .bo_list { border-radius: 10px;font-size: 24px;padding: 20px;background-color: #000000;width: 450px;margin: 0 auto 80px;text-align: center; line-height: 1.6;}
#bo-series .bo_list a { color: #ffffff;}
#bo-series .scroll { white-space: nowrap; overflow-x: scroll; width: 100%;height: 450px;}
#bo-series .ran_link{font-size: 18px;text-decoration: underline;text-align: right;padding: 0 20px 50px;}
#bo-series .uruoi{ width: 768px; margin: 0 auto;}
}