:root {
	--color-black: #333;
	--color-orange: #ff9600;
	--color-teal: #00bebc;
	--color-white: #fff;
	--color-red: #f00;
}
.u-responsiveImg {
		width: 100%;
		height: auto;
	}
.p-container {
	padding-right: 4.2667%;
	padding-left: 4.2667%;
}
.p-article {
	padding-bottom: 78px;
}
.p-article.-ranking {
		background-color: #e6f7ff;
	}
.p-article_header {
		background: #3073bf repeat center top / 60px url('/waterserver/takujou/img/bg_h_dot_pc.png');
	}
.p-article_heading {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 6px;
		line-height: 1.3;
		color: #fff;
		color: var(--color-white);
		font-weight: bold;
		font-size: 26px;
		padding: 18px 4.2667% 12px;
		margin-bottom: 24px;
	}
.p-article_subheading {
		display: inline-block;
		font-size: 18px;
		color: #fff03a;
		padding-left: 30px;
		position: relative;
	}
.-ranking .p-article_subheading::before {
				content: '';
				display: block;
				width: 24px;
				height: 24px;
				mask-size: 24px;
				mask-repeat: no-repeat;
				mask-image: url("/waterserver/takujou/img/icn_h_ranking.svg");
				background-color: #fff03a;
				position: absolute;
				top: -4px;
				left: 0;
			}
.p-article_body {
		margin-bottom: 30px;
	}
.p-article_attention {
		margin-top: 30px;
	}
.p-article_attentionHeading {
		font-weight: bold;
		margin-bottom: 6px;
	}
.p-article_attentionList {
		font-size: 12px;
		display: flex;
		flex-direction: column;
		gap: 6px;
	}
.p-article_attentionListItem {
		padding-left: 1em;
	}
.p-article_attentionListItem::before {
			content: "・";
			display: inline-block;
			text-indent: -1em;
		}
.p-rankingCard {
	counter-reset: index;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.p-rankingCard_item {
		counter-increment: index;
		position: relative;
	}
.p-rankingCard_item::before {
			content: counter(index);
			display: block;
			text-align: center;
			line-height: 48px;
			font-size: 24px;
			font-weight: bold;
			width: 48px;
			height: 48px;
			border-radius: 30px;
			position: absolute;
			top: -9px;
			left: -9px;
			background-color: #afcbd8;
			color: #fff;
			color: var(--color-white);
		}
.-ranking .p-rankingCard_item:nth-child(-n + 3)::before {
					content: '';
					width: 60px;
					height: 60px;
					top: -12px;
					left: -15px;
					background-color: #dcce21;
				}
.-ranking .p-rankingCard_item:nth-child(-n + 3)::after {
					content: '';
					display: block;
					width: 60px;
					height: 60px;
					mask-size: 60px;
					mask-repeat: no-repeat;
					mask-image: url('/waterserver/takujou/img/icn_rank.svg');
					background-color: #fff;
					background-color: var(--color-white);
					position: absolute;
					top: -12px;
					left: -15px;
				}
.-ranking .p-rankingCard_item:nth-child(2)::before {
					background-color: #bbb;
				}
.-ranking .p-rankingCard_item:nth-child(3)::before {
					background-color: #df7a21;
				}
.p-rankingCard_itemLink {
		display: flex;
		flex-direction: column;
		border: 2px solid #c3e2f0;
		height: 100%;
		border-radius: 12px;
		background-color: #fff;
		background-color: var(--color-white);
		color: #333;
		color: var(--color-black);
		text-decoration: none;
		padding-top: 18px;
		padding-bottom: 18px;
		transition: all 0.3s;
	}
.p-rankingCard_heading {
		padding-left: 42px;
		padding-right: 24px;
		font-size: 18px;
		color: #00abdf;
		font-weight: bold;
		line-height: 1.3;
		margin-bottom: 6px;
		position: relative;
	}
.-ranking .p-rankingCard_item:nth-child(-n + 3) .p-rankingCard_heading {
				font-size: 24px;
				padding-left: 48px;
			}
.p-rankingCard_heading::after {
			content: '';
			display: block;
			width: 30px;
			height: 30px;
			mask-size: 30px;
			mask-repeat: no-repeat;
			mask-image: url("/waterserver/img/icn_arrow_next.svg");
			background-color: #ff9600;
			background-color: var(--color-orange);
			position: absolute;
			top: calc(50% - 15px);
			right: 6px;
		}
.p-rankingCard_subheading {
		padding-left: 42px;
		padding-right: 12px;
		line-height: 1.3;
		margin-bottom: 12px;
	}
.-ranking .p-rankingCard_item:nth-child(-n + 3) .p-rankingCard_subheading {
				font-size: 16px;
				padding-left: 48px;
			}
.p-rankingCard_campaign {
		display: flex;
		align-items: center;
		background-color: #ffffab;
		position: relative;
		padding: 18px 12px 18px 54px;
		margin-bottom: 18px;
	}
.p-rankingCard_campaign::before {
			content: '';
			display: block;
			width: 36px;
			height: 36px;
			mask-size: 36px;
			mask-repeat: no-repeat;
			mask-image: url('/waterserver/img/icn_campaign.svg');
			background-color: #fea419;
			position: absolute;
			top: calc(50% - 18px);
			left: 12px;
		}
.p-rankingCard_container {
		padding-right: 12px;
		padding-left: 12px;
	}
.p-rankingCard_inner {
		display: flex;
		gap: 12px;
	}
.-ranking .p-rankingCard_item:nth-child(-n + 3) .p-rankingCard_inner {
				display: block;
			}
.p-rankingCard_figure {
		margin-bottom: 12px;
		width: 114px;
	}
.-ranking .p-rankingCard_item:nth-child(-n + 3) .p-rankingCard_figure {
				width: 100%;
			}
.p-rankingCard_monthlyWrapper {
		flex: 1;
	}
.p-rankingCard_monthly {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
		margin-bottom: 6px;
		line-height: 1.3;
	}
.-ranking .p-rankingCard_item:nth-child(-n + 3) .p-rankingCard_monthly {
				flex-direction: row;
				align-items: center;
			}
.p-rankingCard_monthlyHeading {
		display: inline-flex;
		line-height: 24px;
		height: 24px;
		border: 1px solid #333;
		border: 1px solid var(--color-black);
		border-radius: 12px;
		padding-right: 12px;
		padding-left: 12px;
	}
.p-rankingCard_monthlyBody {
		color: #f00;
		color: var(--color-red);
		font-weight: bold;
	}
.-ranking .p-rankingCard_item:nth-child(-n + 3) .p-rankingCard_monthlyBody {
				margin-left: auto;
			}
.p-rankingCard_price {
		font-size: 24px;
		line-height: 1;
	}
.-ranking .p-rankingCard_item:nth-child(-n + 3) .p-rankingCard_price {
				font-size: 36px;
			}
.p-rankingCard_note {
		font-size: 12px;
		line-height: 1.3;
		color: var(--color-gray-60);
		margin-bottom: 12px;
	}
.p-rankingCard_body {
		border-radius: 6px;
		background-color: #e6f7ff;
		padding: 12px;
	}
.u-text-white {
		color: #fff;
		color: var(--color-white);
	}
.u-text-black {
		color: #ff9600;
		color: var(--color-orange);
	}
.u-text-orange {
		color: #ff9600;
		color: var(--color-orange);
	}
.u-text-teal {
		color: #00bebc;
		color: var(--color-teal);
	}
.u-text-red {
		color: #f00;
		color: var(--color-red);
	}
.u-note {
	font-size: 12px;
	color: #555;
	font-weight: normal;
}
.u-font-bold {
		font-weight: bold;
	}
@media screen and (min-width: 767px) {
.u-only-mobile {
				display: none
		}
.p-article_heading {
			font-size: 40px
	}
.p-article_subheading {
			font-size: 24px
	}
.-ranking .p-article_subheading::before {
					top: 0
			}
.p-article_body {
			font-size: 16px
	}
.p-rankingCard {
		flex-flow: wrap row
}
.p-rankingCard_item {
			width: calc(50% - 9px)
	}
.-ranking .p-rankingCard_item:nth-child(-n + 3) {
					width: calc(50% - 9px)
			}
.p-rankingCard_itemLink:hover {
				background-color: #e6f7ff
		}
.p-rankingCard_heading {
			font-size: 24px
	}
.p-rankingCard_subheading {
			font-size: 16px
	}
.p-rankingCard_campaign {
			min-height: 78px
	}
.-ranking .p-rankingCard_item:nth-child(-n + 3) .p-rankingCard_campaign {
					min-height: 78px
			}
.p-rankingCard_inner {
			flex-direction: column;
			gap: 0
	}
.p-rankingCard_figure {
			width: 100%
	}
.p-rankingCard_monthly {
			flex-direction: row;
			align-items: center
	}
.p-rankingCard_monthlyBody {
			text-align: right;
			margin-left: auto
	}
.p-rankingCard_price {
			font-size: 36px
	}
}
@media screen and (min-width: 991px) {
.u-only-tablet {
				display: none
		}
.u-lower-tablet {
				display: none
		}
.p-container {
		max-width: 992px;
		padding-right: 0;
		padding-left: 0;
		margin-right: auto;
		margin-left: auto
}
.p-article_body {
			text-align: center
	}
.p-rankingCard_item {
			width: calc(25% - 13.5px)
	}
.-ranking .p-rankingCard_item:nth-child(-n + 3) {
					width: calc(33.333% - 12px)
			}
.p-rankingCard_heading {
			font-size: 18px
	}
.p-rankingCard_subheading {
			font-size: 14px
	}
.p-rankingCard_campaign {
			min-height: 99px
	}
.p-rankingCard_price {
			font-size: 24px
	}
}
@media screen and (max-width: 990px) {
.u-only-desktop {
				display: none
		}
}
@media screen and (max-width: 766px) {
.u-only-tablet {
				display: none
		}
.u-upper-tablet {
				display: none
		}
}