/* ---------------
上書きCSS
-----------------*/

.wrapper {
	min-width: 100% !important;
}

.l-inner {
	overflow: inherit !important;
}
.pane-footer{
	margin-top: 0 !important;
}
#lplayout picture img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

#lplayout {
	font-family: "M PLUS 1p", sans-serif;
	font-weight: 400;
  font-style: normal;
}

/* ---------------
共通CSS
-----------------*/

.ranking-card{
	display: flex;
	flex-direction: column;
	gap:24px
}

.c-feature-rankingarea {
	padding: 80px 0;
	display: flex;
	flex-direction: column;
	gap:40px
}

.c-feature-read {
	text-align: center;
	margin-bottom: 124px
}

.c-feature-read .c-feature-category {
	background: var(--main-color);
	color: var(--main-text-color);
	display: inline-block;
	font-size: 21px;
	font-weight: 700;
	padding: 10px 46px;
	line-height: 1;
	margin-bottom: 28px
}

.c-feature-read .c-feature-title {
	font-size: 33px;
	font-weight: 700;
	color: var(--sub-text-color-2);
	margin-bottom: 36px;
}

.c-feature-read .txt {
	font-size: 16px;
	line-height: 28px;
	font-weight: 700;
}

.c-ranking-template {
	background: var(--sub-color-2);
	color: var(--sub-text-color-2)
}

.product-main-info {
	background-color: #fff;
	border: 1px solid var(--sub-color-1);
	border-radius: 20px;
	padding: 50px 33px 20px;
	position: relative;
	margin-top: 50px;
}
#c-ranking-template-other .product-main-info{
	padding-bottom: 50px
}
#c-ranking-template-best3{
	margin-bottom: 100px
}
#c-ranking-template-best3 .l-inner{
	display: flex;
	flex-direction: column;
	gap:100px
}
.rank-badge {
	width: 82px;
	position: absolute;
	left: calc(50% - 41px);
	top: -76px;
}
#c-ranking-template-other .rank-badge{
	top: -65px
}
.product-title {
	font-size: 21px;
	font-weight: 700;
	color: var(--sub-text-color-2);
	text-align: center;
	margin-bottom: 50px
}
#c-ranking-template-other .product-title{
	font-size: 18px;
	margin-bottom: 10px
}
#c-ranking-template-other .product-spec-action .product-title{
	font-size: 16px;
}
.product-visual {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
}
#c-ranking-template-other .product-visual{
	flex-direction: column;
}
.product-visual .product-img {
	width: calc(50% - 24px);
}
#c-ranking-template-other .product-visual .product-img{
	width: min(300px,100%);
	margin: 0 auto;
}
.product-spec-action {
	width: 50%;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
#c-ranking-template-other .product-spec-action {
	width: 100%
}
.product-spec-action .catch-copy {
	background-color: var(--sub-color-1);
	color: var(--sub-text-color-1);
	font-size: 18px;
	font-weight: 700;
	padding: 16px;
	width: 100%;
	border-radius: 3em;
	text-align: center;
	position: relative;
	box-sizing: border-box;
}
#c-ranking-template-other .product-spec-action .catch-copy{
	font-size: 16px
}
.product-spec-action .catch-copy::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border-style: solid;
	border-width: 14px 8px 0 8px;
	border-color: var(--sub-color-1) transparent transparent transparent;
}

.product-spec-action .product-title {
	color: #2e50be;
	text-align: left;
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 1em
}

.product-spec-action .description {
	font-size: 15px;
	line-height: 26px
}
#c-ranking-template-other .product-spec-action .description{
	font-size: 14px
}
.product-spec-action .action-area {
	display: flex;
	gap: 32px;
	align-items: anchor-center;
}
#c-ranking-template-other .product-spec-action .action-area{
	flex-direction: column;
	gap:10px
}
.product-spec-action .action-area .btn-purchase {
	background: var(--main-color);
	color: var(--main-text-color);
	display: inline-block;
	font-size: 17px;
	font-weight: 700;
	text-align: center;
	padding: 10px 46px;
	line-height: 1;
	border-radius: 3em;
	width: calc(90% - 92px);
}

.product-spec-action .action-area .btn-purchase:hover {
	text-decoration: none;
}
.product-spec-action .action-area .btn-series {
	border: 1px solid var(--main-color);
	background: #fff;
	color: var(--main-color);
	display: inline-block;
	font-size: 17px;
	font-weight: 700;
	text-align: center;
	padding: 10px 46px;
	line-height: 1;
	border-radius: 3em;
	width: calc(90% - 92px);
}

.icon-avatar {
	width: 60px
}

.customer-reviews {
	background-color: var(--sub-color-1);
	color: var(--sub-text-color-1);
	border-radius: 20px;
	padding: 50px 33px;
}

.customer-reviews .sub-title {
	font-size: 22px;
	font-weight: 700;
	color: var(--sub-text-color-2);
	text-align: center;
	margin-bottom: 20px;
}

.customer-reviews .review-list {
	display: flex;
	flex-direction: column;
	gap: 10px
}

.customer-reviews .review-list .review-item {
	background: #fff;
	border-radius: 20px;
	padding: 30px 22px;
	display: flex;
	gap: 30px;
	align-items: center;
}

.review-text {
	width: calc(100% - 90px);
	font-size: 14px;
	font-weight: 700;
}

.user-info {
	align-items: center;
	gap: 16px;
	display: flex;
	margin-bottom: 8px
}

.user-name {
	font-size: 18px;
	font-weight: 700;
}

.review-stars {
	color: #fdbd41;
	font-size: 18px
}

.buyer-recommend {
	background-color: var(--main-color);
	color: var(--main-text-color);
}

.btn-purchase {
	background-color: #79b77d;
}

.head-border {
	display: flex;
	align-items: center;
	font-size: 21px;
	font-weight: 700;
}

.head-border:before,
.head-border:after {
	content: "";
	height: 2px;
	flex-grow: 1;
	background-color: var(--main-color);
}

.head-border:before {
	margin-right: 1rem;
}

.head-border:after {
	margin-left: 1rem;
}
.series-carousel-layout .title{
	margin-bottom: 22px
}
.series-slider {
	margin: 0 -15px;
}

.series-slider li {
	margin: 0 15px;
}

.series-slider li img {
	border-radius: 5px
}

.series-slider li p {
	margin-top: 10px;
	font-size: 16px;
	line-height: 1.2;
}

.series-slider .slick-arrow {
	box-shadow: none;
	cursor: pointer
}

.series-slider .slick-prev:before,
.series-slider .slick-next:before {
	display: none !important;
}

.series-slider .slick-arrow::after {
	content: '';
	position: absolute;
	top: 50%;
	width: 32px;
	height: 32px;
	border-top: 2px solid var(--sub-text-color-1);
	border-right: 2px solid var(--sub-text-color-1);
	transition: opacity 0.3s;
}

.series-slider .slick-prev::after {
	left: 15px;
	transform: translateY(-50%) rotate(-135deg);
}

.series-slider .slick-next::after {
	right: 15px;
	transform: translateY(-50%) rotate(45deg);
}

.series-slider .slick-arrow:hover::after {
	opacity: 0.6;
}
.buyer-recommend{
	display: flex;
	border: 2px solid var(--main-color);
	border-radius: 20px;
}
.buyer-recommend .titlearea{
	width: 300px;
	display: flex;
justify-content: center;
	align-items: center;
	flex-direction: column;
	text-align: center;
	font-size: 22px;
	font-weight: 700;
	padding: 40px 0;
	line-height: 1.2;
	border-radius: 20px 0 0 20px
}
.buyer-recommend .titlearea .star{
	font-size: 16px;
	color: #fdee41;
	margin-top: 8px
}
.buyer-recommend .check-list{
	background: #fff;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5%;
	border-radius: 0 20px 20px 0
}
.buyer-recommend .check-list li{
	position: relative;
  padding-left: 32px;
  margin-bottom: 15px;
  line-height: 1.6;
  color: var(--main-color);
	font-weight: 700;
	font-size: 15px
}
.buyer-recommend .check-list li:last-child {
  margin-bottom: 0;
}

.buyer-recommend .check-list li::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 0;
  width: 24px;
  height: 24px;
  
  background-color: var(--main-color); 
  border-radius: 50%;
}

.buyer-recommend .check-list li::after {
  content: '';
  position: absolute;
  top: 10px;
  left: 7px;
  width: 10px;
  height: 5px;
  border-left: 2px solid #fff; 
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg); 
}
.ranking-grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px 20px; 
    padding: 20px 0;
}
.c-banner-title{
	font-size: 33px;
	font-weight: 700;
	text-align: center;
	line-height: 1.3;
	margin-bottom: 40px
}
.c-banner{
	display: flex;
	flex-direction: column;
	gap:20px;
	align-items: center
}

@media (max-width: 768px) {
	.c-feature-rankingarea {
		padding: 40px 0;
		gap:20px
	}
	.c-feature-read{
		margin-bottom: 80px
	}
	.c-feature-read .c-feature-category {
		font-size: 15px;
		padding: 8px 32px;
		margin-bottom: 16px;
	}

	.c-feature-read .c-feature-title {
		font-size: 24px;
	}

	.c-feature-read .txt {
		font-size: 14px;
		line-height: 25px;
		padding: 0 5%;
		text-align: left
	}

	.ranking-layout {
		padding: 0 5%;
	}

	.product-main-info,
	.customer-reviews {
		padding: 20px 5% 20px;
		border-radius: 10px;
	}

	.product-title {
		font-size: 18px;
		margin-bottom: 24px
	}

	.product-visual .product-img {
		width: min(240px, 100%);
		margin: 0 auto;
	}

	.product-spec-action {
		width: 100%
	}

	.product-spec-action .catch-copy {
		font-size: 14px;
		padding: 10px;
	}

	.product-spec-action .product-title,
	.head-border {
		font-size: 16px;
	}

	.product-spec-action .description,
	.user-name {
		font-size: 14px
	}

	.product-spec-action .action-area {
		gap: 8px;
	}

	.product-spec-action .action-area .btn-purchase,
	.product-spec-action .action-area .btn-series{
		width: calc(90% - 38px);
	}

	.customer-reviews .sub-title {
		font-size: 18px;
		margin-bottom: 10px
	}

	.customer-reviews .review-list .review-item {
		flex-direction: column;
		gap: 8px;
		padding: 20px 5%
	}

	.review-text {
		width: 100%;
	}

	.user-info {
		justify-content: center;
		gap: 10px
	}

	.series-slider {
		margin: 0 -5px;
	}

	.series-slider li {
		margin: 0 5px;
	}
.slick-prev {
	left: -5%;
}

.slick-next {
	right: -5%;
}

.series-slider li p {
	font-size: 12px
}
.buyer-recommend{
	display: block;
	border-radius: 10px;
}
.buyer-recommend .titlearea{
	width: 100%
}
.buyer-recommend .titlearea{
	font-size: 16px;
	padding: 20px 0;
	border-radius: 10px 0 0 10px;
}
.buyer-recommend .check-list{
	border-radius: 0 0 10px 10px
}
	.ranking-grid-container {
        grid-template-columns: 1fr;
        gap: 80px;
    }
	.c-banner-title{
		font-size: 24px;
		margin-bottom: 24px
	}
	.c-banner{
		padding: 0 5%
	}
}