/*
Theme Name: Ranking
*/

/*reset*/
html,body,dl,dt,dd,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
	padding: 0;
	margin: 0;
	line-height: 1;
}
ul,ol {
	margin: 0;
	padding: 0;
	list-style:none;
}
small {
	font-size:100%;
}

html {
	font-size: 10px;
}

body {
	font-family: 'Noto Sans JP', sans-serif;
	color: #261D16;
	font-size: 1.5rem;
	background-color: #F3F8FC;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

section {
	overflow: hidden;
}

select, input, textarea {
	font-family: 'Noto Sans JP', sans-serif;
}

a {
	-webkit-transition: opacity  .3s ease;
    -moz-transition: opacity  .3s ease;
    -ms-transition: opacity  .3s ease;
    -o-transition: opacity  .3s ease;
    transition: opacity  .3s ease;
    display: block;
}

a:link {
	text-decoration:none;
	color: #261D16;
}

a:visited {
	text-decoration:none;
	color: #261D16;
}

a:hover{
	text-decoration:none;
	opacity: 0.7;
	color: #261D16;
}

a:active {
	text-decoration:none;
	color: #261D16;
}

img {
	border:none;
	max-width: 100%;
}

.inner {
	padding: 0 60px;
	background: #fff;
	overflow: hidden;
}

.wrapper {
	width: 960px;
	max-width: 100%;
	margin: 0 auto;
	padding: 0 0 110px 0;
}

.showSp	{
	display: none;
}

/*Header*/
.mainLogo {
	width: 455px;
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}

.headerContainer {
	width: 100%;
	background-color: #005080;
	padding: 10px 0;
	border: 1px solid #000000;
	box-sizing: border-box;
}
/*End header*/

/*Footer*/
footer {
	background-color: #005080;
	color: #FFF;
}

.mainFooter {
	width: 960px;
	max-width: 100%;
	margin: 0 auto;
}

.footerContainer {
	width: 740px;
	max-width: 100%;
	padding: 25px 10px;
	display: flex;
	justify-content: space-between;
}

.footerContainer .colLeft,
.footerContainer .colRight {
	width: 42.5%;
}

footer hr {
	width: 99.6%;
	display: block;
	margin: 0 auto;
	height: 1px;
    border: 0;
    border-top: 1px solid #FFF;
}

.footerCopyR p {
	font-size: 2.155rem;
	text-align: center;
	padding: 25px 0;
}

.footerMenuTitle {
	position: relative;
	padding-left: 60px;
}

.footerContainer .colRight .footerMenuTitle:first-child{
	margin-bottom: 50px;
}

.footerMenuTitle:after {
	content: '';
	position: absolute;
	width: 52px;
	height: 52px;
	background-image: url('images/king.svg');
	background-repeat: no-repeat;
	background-size: cover;
	left: 0;
	top: 50%;
	transform: translate(0,-50%);
}

.footerMenuTitle p {
	color: #FFF;
	font-size: 2.688rem;
	line-height: 1.75;
	font-weight: 900;
	white-space: nowrap;
}

.footerContainer ul {
	padding-left: 30px;
	padding-top: 15px;
}

.footerContainer ul li a {
	color: #FFF;
	font-size: 2.155rem;
	line-height: 1.75;
	font-weight: 900;
}
/*End footer*/


/* start top banner */
.bestStore {
	position: relative;
}

.bestStore span {
	content: '';
	position: absolute;
	right: 18%;
	top: 33%;
	font-size: 6.7rem;
	font-style: italic;
	color: #E8D229;
	font-weight: 900;
	text-shadow: 2px 2px 0px #053B72;
}

.top5Banner.bestStore span {
	font-size: 11rem;
	text-shadow: 3px 3px 0px #053B72;
}

.topBanner {
	position: relative;
	padding: 35px 25px 14px 25px;
	/* background: url(images/bg.jpg); */
	/* background-size: 100%; */
	/* background-repeat: no-repeat; */
}

.topBannerImg {
	width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.topSearch, .topSearchAdv {
	width: 59.2%;
}

.topSearchAdv .advContent {
	background: rgba(255,248,221,0.83);
	padding: 25px 27px 6px 27px;
	position: relative;
}

.topSearchAdv .advContent .version {
	content: '';
	position: absolute;
	background: url(images/date.svg);
	top: -25px;
	left: 50%;
  	transform: translateX(-50%);
  	width: 78.87%;
  	height: 43px;
  	background-size: 100%;
  	background-repeat: no-repeat;
}

.versionContent {
	position: relative;
	font-size: 2.2rem;
	font-weight: 900;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	top: 5px;
	text-shadow: 1.5px 1.5px 0px #7B7146;
}

.advContent .topFive {
	width: 100%;
}

.advantages {
	display: flex;
	justify-content: space-between;
	margin-top: 12px;
}

.advantages li {
	width: 84px;
	height: 82px;
	background: #80c1ff;
	border-radius: 17.483px;
	padding: 3px;
	position: relative;
	box-sizing: border-box;
}

.advantages li span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: #1890df;
	border-radius: 13.386px;
	border: 1px solid #fff;
	font-weight: 900;
	color: #fff;
	font-size: 1.5rem;
	text-align: center;
	box-sizing: border-box;
	line-height: 1.3;
}

.advantages li:nth-child(odd) span {
	font-size: 2.2rem;
}

.advantages li:first-child:before {
	content: '';
	position: absolute;
	top: -41px;
	left: -25px;
	background: url(images/compare_tag.svg);
	width: 89.567px;
	height: 57.497px;
	background-size: 100%;
    background-repeat: no-repeat;
}

.advantages li:last-child span {
	letter-spacing: -1px;
}


.searchBox {
	padding: 10px 10px 8px 10px;
	background: rgba(255, 255, 255, 0.89);
	border: 2px solid #848484;
}

.searchBox .groupSelect {
	display: flex;
	justify-content: space-between;
}

.searchBox .customSelect{
	width: 32.3%;
	display: inline-block;
    position: relative;
}

.customSelect {
	cursor: pointer;
    height: 18.222px;
}

.customSelectWrapper {
	border: 1px solid #848484;
	border-radius: 4.5px;
}

.customSelect select {
	width: 100%;
	height: 18.222px;
	position: relative;
    border: none;
    overflow: hidden;
    outline: 0;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    color: #4d4d4d;
    background: none;
    z-index: 2;
    font-size: 0.845rem;
    text-align-last:center;
    padding-right: 23px;
    font-weight: 900;
    cursor: pointer;
}

.customSelect::after {
    content: "";
    color: #fff;
    position: absolute;
    right: 6px;
    top: 6px;
    border-top: 8px dashed;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    z-index: 1;
}

.customSelect::before {
    content: "";
    position: absolute;
    right: 0px;
    top: -1px;
	width: 22px;
	height: 20px;
	border-radius: 3.715px;
	background: #005080;
	z-index: 1;
	-webkit-box-shadow: 1.5px 1.5px 0px 0px rgba(161,184,199,1);
	-moz-box-shadow: 1.5px 1.5px 0px 0px rgba(161,184,199,1);
	box-shadow: 1.5px 1.5px 0px 0px rgba(161,184,199,1);
}

.searchBox .customSelect {
    width: 32.3%;
    display: inline-block;
    position: relative;
}

.searchBox .groupCheckbox {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 4px;
}

.searchBox .customCheckbox {
    width: 32.3%;
    display: inline-block;
    position: relative;
    margin-top: 8px;
}

.customCheckbox input[type="checkbox"] {
	display: none;
}

.customCheckbox label{
	cursor: pointer;
    display: flex;
    align-items: center;
}


.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.customCheckbox label input:checked ~ .checkmark:after {
  	display: block;
  	content: "";
	background: #a3a3a3;
	height: 4px;
	width: 4px;
	position: absolute;
	display: inline-block;
	top: 1px;
	left: 1px;
}

.customCheckbox .virContent{
    vertical-align: middle;
    font-size: 0.845rem;
    margin-left: 5px;
    font-weight: normal;
    color: #4d4d4d;
	line-height: 1;
	font-weight: 900;
	white-space: nowrap;
}


.customCheckbox .checkmark{
	width: 6px;
    height: 6px;
	border: 1px solid #a3a3a3;
	background: #ffffff;
	vertical-align: middle;
	position: relative;
	display: inline-block;
	margin-left: 4px;
}



.btnSearch button {
	font-weight: 900;
	color: #fff;
	font-size: 1.196rem;
	background: #005080;
	border-radius: 9.623px;
	outline: none;
	border: none;
	width: 185px;
	height: 27.5px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 12px auto 0 auto;
	-webkit-box-shadow: 2px 2px 0px 0px rgba(161,184,199,1);
	-moz-box-shadow: 2px 2px 0px 0px rgba(161,184,199,1);
	box-shadow: 2px 2px 0px 0px rgba(161,184,199,1);
	cursor: pointer;
}

.btnSearch button:hover {
	opacity: 0.6;
}
/* end top banner */


/* start rating star */
.c-rating {
	display: flex;
}

.c-rating span {
  display: inline-block;
  margin-right: 11px;
  width: 48.762px;
  height: 46.432px;
  border: 0;
  text-indent: -9999px;
  outline: none;
  background: url("images/empty-star.svg") center/cover no-repeat;
  background-size: 100% !important;
}

.c-rating span:last-child {
  margin-right: 0;
}

.c-rating[data-rating-value="0"] span:nth-child(-n+0) {
  background: url("images/star.svg") center/cover no-repeat;
}

.c-rating[data-rating-value="0.5"] span:nth-child(-n+1) {
  background: url("images/star.svg") center/cover no-repeat;
}
.c-rating[data-rating-value="0.5"] span:nth-child(1) {
  background: url("images/half-star.svg") center/cover no-repeat, url("images/empty-star.svg") center/cover no-repeat;
}

.c-rating[data-rating-value="1"] span:nth-child(-n+1) {
  background: url("images/star.svg") center/cover no-repeat;
}

.c-rating[data-rating-value="1.5"] span:nth-child(-n+2) {
  background: url("images/star.svg") center/cover no-repeat;
}
.c-rating[data-rating-value="1.5"] span:nth-child(2) {
  background: url("images/half-star.svg") center/cover no-repeat, url("images/empty-star.svg") center/cover no-repeat;
}

.c-rating[data-rating-value="2"] span:nth-child(-n+2) {
  background: url("images/star.svg") center/cover no-repeat;
}

.c-rating[data-rating-value="2.5"] span:nth-child(-n+3) {
  background: url("images/star.svg") center/cover no-repeat;
}
.c-rating[data-rating-value="2.5"] span:nth-child(3) {
  background: url("images/half-star.svg") center/cover no-repeat, url("images/empty-star.svg") center/cover no-repeat;
}

.c-rating[data-rating-value="3"] span:nth-child(-n+3) {
  background: url("images/star.svg") center/cover no-repeat;
}

.c-rating[data-rating-value="3.5"] span:nth-child(-n+4) {
  background: url("images/star.svg") center/cover no-repeat;
}
.c-rating[data-rating-value="3.5"] span:nth-child(4) {
  background: url("images/half-star.svg") center/cover no-repeat, url("images/empty-star.svg") center/cover no-repeat;
}

.c-rating[data-rating-value="4"] span:nth-child(-n+4) {
  background: url("images/star.svg") center/cover no-repeat;
}

.c-rating[data-rating-value="4.5"] span:nth-child(-n+5) {
  background: url("images/star.svg") center/cover no-repeat;
}
.c-rating[data-rating-value="4.5"] span:nth-child(5) {
  background: url("images/half-star.svg") center/cover no-repeat, url("images/empty-star.svg") center/cover no-repeat;
}

.c-rating[data-rating-value="5"] span:nth-child(-n+5) {
  background: url("images/star.svg") center/cover no-repeat;
}
/* end rating star */

/*Block*/
.wrapperContainer {
	width: 100%;
	display: flex;
	justify-content: space-between;
}

.mainContent {
	width: 750px;
	max-width: 78.125%;
}

.sidebarContent {
	width: 200px;
	max-width: 20.833%;
}
/*End block*/


/* start recommend block */
.recommendBlock {
	margin-top: 25px;
	position: relative;
}

.recommendBlock .mainBg {
	width: 100%;
}

.recommendBlock .recommendContent {
	position: absolute;
	top: 50%;
  	left: 50%;
  	-webkit-transform: translate(-50%,-50%);
  	transform: translate(-50%,-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	padding-bottom: 16px;
	font-size: 3.285rem;
	color: #333333;
	font-weight: 900;
	width: 100%;
	text-align: center;
	line-height: 1.5em;
}


.recommendContent img {
	width: 71px;
	height: 71px;
	margin-left: 10px;
}


.tableRanking {
	margin-top: 10px;
}

.tableRanking .tHead {
	color: #fff;
	font-size: 2.5rem;
	font-weight: bold;
	background: #005080;
	display: flex;

}

.tableRanking .headerLeft {
	width: 40.4%;
	text-align: center;
	padding: 19px 0;
	border: 1px solid #000;
	border-right: none;
	border-bottom: none;
	box-sizing: border-box;
}

.tableRanking .headerRight {
	width: 59.6%;
	text-align: center;
	padding: 19px 0;
	border: 1px solid #000;
	border-bottom: none;
	box-sizing: border-box;
}

.tableRanking .colLeft {
	width: 40.4%;
	display: flex;
	padding: 0 0 0 10px;
	align-items: center;
	box-sizing: border-box;
	border: 1px solid #000;
	border-right: none;
	border-bottom: none;
}

.tableRanking .colRight {
	width: 59.6%;
	border: 1px solid #000;
	border-bottom: none;
	padding-bottom: 16px;
}

.tableRanking .rankNumber {
	width: 93.646px;
	height: 78.827px;
	position: relative;
}

.tableRanking .rankNumber span {
	position: absolute;
	bottom: 8px;
    left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
    font-size: 4.2rem;
    color: #000;
    font-weight: bold;
}

.tableRanking .rankNumber img {
	width: 100%;
}

.tableRanking .tBody {
	border-bottom: 1px solid #000;
}

.tableRanking li {
	display: flex;
	min-height: 150px;
}

.tableRanking li:first-child {
	background: #fff8dd;
}

.tableRanking li:first-child .rankValue{
	color: #ff0000;
}

.tableRanking .rankScore {
	display: flex;
	align-items: center;
}

.tableRanking .storeName {
	font-size: 1.9rem;
	font-weight: bold;
	color: #000;
	margin-bottom: 4px;
	line-height: 1.2;
}

.tableRanking .rankText {
	font-size: 1.8rem;
	color: #000;
	font-weight: bold;
	line-height: 1.2;
}

.tableRanking .rankValue {
	font-size: 5.1rem;
	color: #000;
	font-weight: bold;
	margin-left: 9px;
}

.tableRanking .rankContent {
	margin-left: 12px;
	width: calc(100% - 106px);
}

.tableRanking .desc {
	padding-left: 15px;
}

.tableRanking .desc p {
	font-size: 2.1rem;
	color: #000;
	font-weight: bold;
	line-height: 1.4;
}

.tableRanking .desc p:first-child {
	margin-top: 18px;
}

.tableRanking .desc p span {
	color: #ff0000;
}

.tableRanking .btnDetail {
	text-align: center;
}

.tableRanking .btnDetail a {
	font-size: 1.8rem;
	font-weight: bold;
	color: #fff;
	padding: 11px 67px;
	background: #89ad79;
	display: inline-block;
	border-radius: 12px;
	margin-top: 15px;
}

.tableRanking li:first-child .btnDetail a {
	background: #dc5a24;
}

.blueArrow {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 43px 147.5px 0 147.5px;
	border-color: #004f80 transparent transparent transparent;
	margin: 24px auto;
/*	margin-top: -30px;
	margin-bottom: -1px;
*/}

.blueArrowLast {
	margin: 13px auto;
}

.top1Btn .orangeBtn span {
	font-size: 2.3rem !important;
}

.top5Banner {
	margin-top: 35px;
}

.top5Banner img {
	width: 100%;
}
/* end recommend block */


/* start list ranking */
.listRanking > li{
	padding: 15px 0 0 0;
	border: 1px solid #b7b7b7;
	background: rgba(255, 248, 221, 0.67);
	margin-bottom: 68px;
}

.listRanking > li:last-child {
	margin-bottom: 0;
}

.listRanking .storeInfo {
	display: flex;
}

.listRanking .colLeft {
	width: 69%;
}

.listRanking .colRight {
	width: 31%;
}

.listRanking .storeInfomation {
	padding: 16px 0 13px 140px;
	border: 1px solid #000;
	background: #005080;
	position: relative;
	margin-top: 23px;
}

.listRanking .storeInfomation:after {
	content: '';
	position: absolute;
	width: 7px;
	height: 100%;
	background: #fff;
	top: 0;
	right: 18px;
}

.storeInfomation .storeDesc {
	font-size: 1.559rem;
	color: #fff;
}

.storeInfomation .storeName {
	font-size: 3.275rem;
	color: #fff;
	font-weight: 900;
	margin-top: 7px;
}

.storeInfomation .storeName br {
	display: none;
}

.listRanking .rankNumber {
    width: 110.324px;
    height: 92.852px;
    position: absolute;
    left: 10px;
    bottom: 5px;
}

.listRanking .rankNumberWrapper {
	position: relative;
}


.listRanking .rankNumber span {
    position: absolute;
    bottom: 13px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    font-size: 5.4rem;
    color: #000;
    font-weight: bold;
}


.listRanking .storePoint {
	width: 122.587px;
	height: 122.587px;
	border-radius: 50%;
	background: #005080;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	flex-direction: column;
	margin: 0 auto;
}

.listRanking .storePoint .text {
	font-size: 1.352rem;
	font-weight: 900;
	color: #fff;
}

.listRanking .storePoint .point {
	font-size: 4.863rem;
	font-weight: bold;
	color: #e8d229;
    font-style: italic;
}

.listRanking .storePoint .point small {
	font-size: 1.612rem;
	position: relative;
	top: -2px;
    font-style: normal;
    margin-left: 3px;
}

.listRanking .storeContent {
	margin-top: 17px;
	padding: 0 20px;
}

.storeMainImg img {
	width: 100%;
}

.listRanking .starRating {
	margin-top: 15px;
	margin-bottom: 35px;
	overflow: hidden;
}

.storeContent .starRatingWrapper {
	display: flex;
	align-items: center;
	margin-top: 13px;
}

.starRatingWrapper .ratingText {
	width: 27%;
	text-align: center;
	position: relative;
}

.starRatingWrapper .ratingText span {
	position: relative;
	z-index: 2;
	font-size: 2.3rem;
	color: #333333;
	font-weight: 900;
}

.starRatingWrapper .ratingText:before {
	content: '';
	position: absolute;
	top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(images/blue_circle_bg.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 49px;
    height: 49px;
    z-index: 1;
}

.starRatingWrapper .rating-holder {
	width: 51%;
}

.starRatingWrapper .ratingPoint {
	width: 22%;
	font-size: 3rem;
	color: #333333;
	padding-left: 33px;
	box-sizing: border-box;
}

.starRatingWrapper .ratingPoint small {
	font-size: 2rem;
}

.storeContent .c-rating {
	display: flex;
	justify-content: space-between;
}

.storeContent .c-rating span {
	margin-right: 0;
}

.storeContent .c-rating span:last-child {
    margin-right: 0;
}

.listRanking .rankingStoreInfo table {
	margin-bottom: 0;
}

.listRanking .rankingStoreInfo {
	background: #fff;
	padding: 16px 14px 36px 14px;
	box-sizing: border-box;
}

.listRanking .rankingStoreInfo p img {
	height: auto;
}

.listRanking .rankingStoreInfo .orangeBtn span {
	font-size: 2.475rem !important;
}

.listRanking .top1BtnStoreInfo .orangeBtn span {
	font-size: 2.3rem !important;
}

.listRanking .reviewBlock {
	margin-bottom: 10px;
}

.listRanking .greenBtn {
	margin: 10px 0 30px 0 !important;
}

.recTop1 > img{
	width: calc(100% + 30px);
	margin-left: -30px;
	margin-bottom: 68px;
	max-width: initial;
}

.recTop1 .top1BtnStoreInfo .maxbutton.maxbutton-orangebtn.orangeBtn {
	margin-top: 37px !important;
	margin-bottom: 23px !important;
}

.recTop1 .listRanking li {
	margin-bottom: 63px;
}
/* end list ranking */


/* start column page */
.cardtype {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-top: 5px;
	padding-bottom: 20px;
}

.cardtype__article {
	width: 48%;
	padding: 7px;
	box-sizing: border-box;
	box-shadow: 0 0 3px 0 rgba(0,0,0,.12), 0 2px 3px 0 rgba(0,0,0,.22);
	margin-top: 20px;
	margin-bottom: 5px;
    transition: .2s;
}

.cardtype__article:hover {
	box-shadow: 0 15px 30px -5px rgba(0,0,0,.15), 0 0 5px rgba(0,0,0,.1);
    transform: translateY(-4px);
}

.cardtype__article h2 {
	font-size: 1.8rem;
	line-height: 1.6;
	margin-bottom: 10px;
}

.cardtype time {
	margin: 5px 0 10px 0;
	display: inline-block;
	font-size: 1.3rem;
	color: #b5b5b5;
	font-weight: 700;
}

.cardtype__article::after {
    flex-basis: 48%;
    content: "";
}

.cardtype__img {
	max-height: 180px;
}

.cardtype__img img {
	max-height: 180px;
    width: 100%;
    object-fit: cover;
    max-width: 100%;
}


.pagination,.wp-prev-next{
    margin:1.5em 0;
}
.pagination{
    text-align:left;
}
.pagination ul{
    display:block;
    clear:both;
    padding:1.5em 0 0;
    border-radius:3px;
    text-align:center;
}
.pagination li{
    display:inline-block;
    overflow:hidden;
    margin:3.5px;
    padding:0;
    text-align:center;
}
.pagination a,.pagination span{
    display:inline-block;
    width:46px;
    height:46px;
    margin:0;
    border-radius:50%;
    background:#fff;
    font-size:17.5px;
    font-weight:700;
    text-decoration:none;
    line-height:46px;
}
.pagination .current{
    color:#fff;
    cursor:default;
}
.page-numbers.dots{
    width:auto;
    padding:0;
    background:0 0;
}
.wp-prev-next .prev-link{
    float:left;
}
.wp-prev-next .next-link{
    float:right;
}
.pagination a,.pagination span {
	color:#005080;
}

.pagination .current {
	background-color:#005080;
}

.pagination a:hover {
    background:#005080;
    color: #fff;
}

.prev.page-numbers, .next.page-numbers {
    width: 15px;
    background: 0 0;
    position: relative;
}

.next.page-numbers:after {
	content: '';
	position: absolute;
	left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
	width: 11px;
	height: 18px;
	background: url(images/next-arrow.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.prev.page-numbers:after {
	content: '';
	position: absolute;
	left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
	width: 11px;
	height: 18px;
	background: url(images/prev-arrow.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.prev.page-numbers:hover, .next.page-numbers:hover {
    background: transparent!important;
    opacity: .7;
}
/* end column page */

@media (max-width: 991px) {
	.wrapperContainer {
		padding: 0 4px;
		box-sizing: border-box;
	}

	.inner {
	    padding: 0 8px;
	}

	.tableRanking .desc p {
		font-size: 1.8rem;
	}

	.tableRanking .rankContent {
		margin-left: 5px;
	}

	.tableRanking .rankText {
		font-size: 1.5rem;
	}
}

@media (min-width: 768.01px) and (max-width: 900px) {
	.topSearch, .topSearchAdv {
		width: 70%;
	}
}

@media (max-width: 768px) {
	body {
		background: none;
	}

	.wrapperContainer {
		margin-top: 0;
		padding: 0 8px;
		box-sizing: border-box;
		overflow: hidden;
	}

	.wrapperContainerTop {
		padding: 0;
	}

	.inner {
		padding: 0 4px;
	}

	.wrapper {
		padding: 0 0 25px 0;
	}

	.showSp {
		display: block;
	}

	.showPc {
		display: none;
	}

	.mainContent,
	.sidebarContent {
		width: 100%;
		max-width: 100%;
	}

	.mainLogo {
		width: 296px;
	}

	.headerContainer {
		padding: 9px 0;
		border: none;
	}

	.footerContainer {
		padding: 40px 0 35px 44px;
		flex-wrap: wrap;
		box-sizing: border-box;
	}


	.footerContainer .colLeft,
	.footerContainer .colRight {
		width: 100%;
	}

	.footerContainer .colLeft {
		margin-bottom: 35px;
	}

	.footerCopyR p {
		font-size: 1rem;
		padding: 14px 0;
	}

	footer hr {
		width: 100%;
	}

	.footerContainer ul {
		padding-left: 38px;
		box-sizing: border-box;
	}

	.footerContainer ul li a {
		font-size: 1.42rem;
	}

	.footerMenuTitle {
		padding-left: 50px;
	}

	.footerMenuTitle p {
		font-size: 1.772rem;
	}

	.footerMenuTitle:after {
		width: 34px;
		height: 34px;
	}

	.footerContainer .colRight .footerMenuTitle:first-child {
		margin-bottom: 25px;
	}


	/* start top banner */
	.recommendContent img {
		margin-left: 5px;
	}

	.topBanner {
		padding: 0;
		background: none;
	}

	.topSearchAdv {
		position: relative;
		width: 100%;
		padding: 30px 8px 21px 8px;
		/* background: url(images/bg_sp.jpg); */
	    /* background-size: cover; */
	    /* background-repeat: no-repeat; */
	    box-sizing: border-box;
	    /* background-position-x: 100%; */
	}

	.topSearchAdv .advContent {
		width: 57.8%;
		box-sizing: border-box;
		padding: 15px 13px 2px 13px;
	}

	.versionContent {
		font-size: 1.1rem;
		top: 2.5px;
		font-weight: 700;
	}

	.topSearch {
		width: 100%;
		padding: 0 8px;
		box-sizing: border-box;
	}

	.advantages {
		flex-wrap: wrap;
	    width: 70%;
	    margin: 0 auto;
	}

	.advantages li {
		width: 56px;
		height: 43.671px;
		margin-bottom: 5px;
		border-radius: 8.7415px;
	}

	.advantages li:first-child:before {
	    top: -15px;
	    left: -32px;
	    width: 60px;
	    height: 39px;
	}

	.advantages li span {
		font-size: 0.75rem;
		border-radius: 6.693px;
	}

	.advantages li:nth-child(odd) span {
		font-size: 1.1rem;
	}

	.topSearchAdv .advContent .version {
		height: 21.5px;
		top: -10px;
	}

	.searchBox {
		margin-top: 4px;
	}

	.searchBox .customSelect {
		width: 32%;
	}

	.customSelect {
		height: 15.8px;
	}

	.customSelect select {
		font-size: 0.732rem;
		height: 15.8px;
	}

	.customCheckbox .virContent {
		font-size: 0.732rem;
	}

	.customSelect::before {
		top: 0;
		webkit-box-shadow: 2.5px 1.5px 0px 0px rgba(161,184,199,1);
    	-moz-box-shadow: 2.5px 1.5px 0px 0px rgba(161,184,199,1);
    	box-shadow: 2.5px 1.5px 0px 0px rgba(161,184,199,1);
	}

	.btnSearch button {
		font-size: 1.036rem;
		border-radius: 4.8115px;
		width: 160px;
		height: 23.6px;
	}
	/* end top banner */


	/* start recommend block */
	.recommendBlock {
		margin-top: 20px;
	}

	.recommendBlock .recommendContent {
		font-size: 1.93rem;
	}

	.recommendContent img {
		width: 35px;
		height: 35px;
	}

	.tableRanking li {
		min-height: 90px;
	}

	.tableRanking .colLeft {
		padding: 0 0 0 5px;
	}

	.tableRanking .colRight {
		padding-bottom: 10px
	}

	.tableRanking .tHead {
		font-size: 1.469rem;
	}

	.tableRanking .rankNumber {
		width: 55px;
		height: 46.3155px;
	}

	.tableRanking .rankNumber span {
		font-size: 2.468rem;
		bottom: 5px;
	}

	.tableRanking .rankContent {
		width: calc(100% - 63px);
		margin-left: 8px;
	}

	.tableRanking .storeName {
		font-size: 1.1165rem;
	}

	.tableRanking .rankText {
		font-size: 1.058rem;
	}

	.tableRanking .rankValue {
		font-size: 2.997rem;
		margin-left: 5px;
	}

	.tableRanking .desc {
		padding-left: 10px;
	}

	.tableRanking .desc p {
		font-size: 1.2rem;
	}

	.tableRanking .desc p:first-child {
		margin-top: 13px;
	}

	.tableRanking .btnDetail a {
		font-size: 1.058rem;
		padding: 7px 38px;
		border-radius: 6px;
		margin-top: 7px;
	}

	.top1Btn .orangeBtn span {
		font-size: 1.544rem !important;
	}
	/* end recommend block */


	/* start list ranking */
	.listRanking > li {
		padding: 8px 0 15px 0;
	}

	.listRanking .starRating {
		margin-top: 10px;
	}

	.listRanking .storeInfomation {
		padding: 10px 0 8px 80px;
		margin-top: 10px;
	}

	.listRanking .storeInfomation:after {
		width: 4px;
		right: 10px;
	}

	.listRanking .colLeft {
		width: 68%;
	}

	.listRanking .colRight {
		width: 32%;
	}

	.listRanking .rankNumber {
		width: 64.3685px;
		height: 54.1745px;
		left: 5px;
    	bottom: 4px;
	}

	.listRanking .rankNumber span {
		font-size: 3.15rem;
		bottom: 7px;
	}

	.storeInfomation .storeDesc {
		font-size: 0.9095rem;
	}

	.storeInfomation .storeName {
		font-size: 1.911rem;
	}

	.listRanking .storePoint {
		width: 71.5px;
		height: 71.5px;
	}

	.listRanking .storePoint .text {
		font-size: 0.789rem;
	}

	.listRanking .storePoint .point {
		font-size: 2.8375rem;
	}

	.listRanking .storePoint .point small {
		font-size: 0.9405rem;
	}

	.starRatingWrapper .ratingText span {
		font-size: 1.343rem;
	}

	.starRatingWrapper .ratingText:before {
		width: 28.6px;
		height: 28.6px;
	}

	.storeContent .starRatingWrapper {
		margin-top: 7px;
	}

	.starRatingWrapper .ratingPoint {
		font-size: 1.7725rem;
		padding-left: 20px;
		width: 24%;
	}

	.starRatingWrapper .ratingPoint small {
		font-size: 1.1675rem;
	}

	.starRatingWrapper .rating-holder {
		width: 49%;
	}

	.listRanking .c-rating span {
		width: 28.2115px;
		height: 27px;
	}

	.listRanking .rankingStoreInfo .orangeBtn span {
		font-size: 1.444rem !important;
	}

	.listRanking .rankingStoreInfo {
		padding: 10px 10px 20px 10px;
	}

	.listRanking .rankingStoreInfo table {
		margin: 15px 0 0 0;
		width: 100%;
	}

	.listRanking .top1BtnStoreInfo .maxbutton.maxbutton-orangebtn.orangeBtn {
		margin-bottom: 0 !important;
		margin-top: 10px !important;
	}

	.listRanking .top1BtnStoreInfo .orangeBtn span {
		font-size: 1.4rem !important;
	}

	.listRanking .greenBtn {
		margin: 15px 0 5px 0 !important;
	}

	.listRanking .greenBtn:last-child {
		margin: 15px 0 5px 0 !important;
	}
	/* end list ranking */
}

@media (max-width: 480px) {
	.cardtype__article {
		width: 100%;
	}

	.bestStore span {
		font-size: 3.9rem;
	}

	.top5Banner.bestStore span {
		font-size: 7.2rem;
	}
}

@media (max-width: 375px) {
	.bestStore span {
	    font-size: 3.35rem;
	}

	.top5Banner.bestStore span {
		font-size: 6.3rem;
	}
}

@media (max-width: 360px) {
	.listRanking .top1BtnStoreInfo .orangeBtn span,
	.top1Btn .orangeBtn span {
	    font-size: 1.3rem !important;
	}
}

@media (max-width: 320px) {
	.bestStore span {
	    font-size: 2.9rem;
	}

	.top5Banner.bestStore span {
		font-size: 5.5rem;
	}

	.advantages li {
		width: 50px;
	}

	.recommendBlock .recommendContent {
		font-size: 1.53rem;
	}

	.tableRanking .rankNumber {
	    width: 40px;
	    height: 31.3155px;
	}

	.tableRanking .rankNumber span {
		font-size: 1.2rem;
	}

	.tableRanking .rankValue {
		font-size: 2rem;
	}

	.tableRanking .desc p {
		font-size: 1rem;
	}

	.boxReviews ul li.unCheck img {
		margin-left: 1px;
	}

	.listRanking .top1BtnStoreInfo .orangeBtn span,
	.top1Btn .orangeBtn span {
	    font-size: 1rem !important;
	}

	.customCheckbox .virContent {
		font-size: 0.612rem;
	}
}

.contact-btn {
	background-color: green;
	color: white;
	border-radius: 5px;
	padding: 10px 20px;
	font-size: 16px;
	border: none;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	width: 30%;
	margin-bottom: 30px;
}
.contact-btn-container {
	text-align: center;
}