/*===============================
***余白
*=================================*/
.hp-mb--xl {
	margin-bottom: 2.5rem !important;
}
.hp-mb--lg {
	margin-bottom: 2rem !important;
}
.hp-mb--md {
	margin-bottom: 1.5rem !important;
}
.hp-mb--sm {
	margin-bottom: 1rem !important;
}
.hp-mb--xs {
	margin-bottom: 0.5rem !important;
}

/*===============================
***幅
*=================================*/
/* 全幅 */
.hp-w--full {
	position: relative;
	left: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw !important;
}
/* 最大幅 */
.hp-w--fit {
	max-width: fit-content !important;
}
.hp-w--xl {
	max-width: 660px !important;
}
.hp-w--lg {
	max-width: 490px !important;
}
.hp-w--md {
	max-width: 300px !important;
}
.hp-w--sm {
	max-width: 220px !important;
}

/*===============================
***フォントサイズ
*=================================*/
.hp-fz--sm {
	font-size: 0.875rem !important;
}
.hp-fz--xs {
	font-size: 0.75rem !important;
}

/*===============================
***配置
*=================================*/
.hp-center {
	justify-content: center !important;
	text-align: center !important;
}
.hp-right {
	justify-content: flex-end !important;
	text-align: right !important;
}

/*===============================
* 装飾
* =================================*/
.hp-bold {
	font-weight: var(--fw-lg);
}
.hp-red {
	color: #db1919;
}
.hp-underline {
	text-decoration: underline;
}

/*===============================
* ***行の表示数
* *=================================*/
[class*="hp-txtRow--"] {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
[class~="hp-txtRow--1"] {
	-webkit-line-clamp: 1;
}
[class~="hp-txtRow--2"] {
	-webkit-line-clamp: 2;
}
[class~="hp-txtRow--3"] {
	-webkit-line-clamp: 3;
}