/*===============================
***余白
*=================================*/
.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: .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: var(--fz-14) !important;
}
.hp-fz--xs {
	font-size: var(--fz-12) !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;
}

/*===============================
* ***アニメーション
* *=================================*/
[class*="hp-ani--"] {
	transition: var(--ani-t--normal) ease-out;
}
/* 透過 */
.hp-ani--alpha:is(:hover, :focus) {
	opacity: 0.7;
}

/* 影 */
.hp-ani--shdw {
	box-shadow: var(--shdw) rgb(0, 0, 0, 25%);
}
.hp-ani--shdw:is(:hover, :focus) {
	box-shadow: none;
	transform: translateY(4px);
}

/* 色変更 */
.hp-ani--color:is(:hover, :focus) {
	color: var(--c-main);
	opacity: 0.7;
}

/* 拡大 */
.hp-ani--scale:is(:hover, :focus) {
	transform: scale(1.05);
	opacity: 0.9;
}