/* * =========================================
 * Utility
 * =========================================
 */

/* マウスオーバーで2px上にホップ */
.u-hover-up {
	transition: transform 0.3s;
}

.u-hover-up:hover {
	transform: translateY(-2px);
}

/* マウスオーバーで文字色をピンク */
.u-hover-text-pink {
	transition: color 0.3s;
}

.u-hover-text-pink:hover {
	color: var(--color-pink-macaron);
}

/* フェードインするアニメーション */
.u-anim-fade-in-up {
	animation-name: showanime;
	animation-duration: 3s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

@keyframes showanime {
	0% {
		opacity: 0;
		transform: translateY(10px); /* 下からふわっと出す */
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ぶら下げインデント */
.u-hanging-indent {
	padding-left: 1em; /* 全体を1文字分右に寄せる */
	text-indent: -1em; /* 1行目だけ1文字分左に戻す */
}

/* SP/PC時のみ表示(メディアクエリで記述) */

/*  .u-sp-only {}
    .u-pc-only {} */

/* backgraoudで設定した色・画像を親の背景に乗算させる */
.u-bg-overlay {
	/* ※ 親要素がposition:relative;である事が前提 */
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-size: cover;
	mix-blend-mode: multiply;
}

/* 非表示にするが、要素は残す。labalに使用を想定 */
.u-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* * =========================================
 * 下層ページで使用
 * =========================================
 */

/* テーブルの調整 */
.u-align-left {
	text-align: left;
}

.u-align-right {
	text-align: right;
}

.u-align-center {
	text-align: center;
}

.u-width-10p {
	width: 10%;
}

.u-width-20p {
	width: 20%;
}

.u-width-30p {
	width: 30%;
}

.u-width-40p {
	width: 40%;
}

.u-width-50p {
	width: 50%;
}

.u-width-60p {
	width: 60%;
}

.u-width-70p {
	width: 70%;
}

.u-width-80p {
	width: 80%;
}

.u-width-90p {
	width: 90%;
}

/* 画像とテキストのセット（pc時は最初に表示した要素に使用） */
.u-first-item--pc {
	order: -1;
}

/* フォントサイズ大きめ */
.u-large {
	font-size: 18px;
	font-feature-settings:
		'halt' on,
		'pwid' on;
	line-height: 192%;
	letter-spacing: 0.72px;
}

/* フォントサイズ小さめ */
.u-small {
	font-size: 14px;
	font-feature-settings:
		'halt' on,
		'pwid' on;
	line-height: 140%;
	letter-spacing: 0.56px;
}

/* 太文字 */
.u-bold {
	font-weight: var(--font-weight-bold);
}

/* 色の付きテキスト */
.u-color-1 {
	color: #ac347d;
}

/* 余白（空のdivに使用） */
div.u-spacer--24 {
	padding-top: 24px;
}

div.u-spacer--56 {
	padding-top: 56px;
}

div.u-spacer--80 {
	padding-top: 80px;
}

/* ボタンのスタイル */
.u-btn-style {
	color: var(--color-white);
	text-align: center;
	background: #bd5192;
}

/* サイドバー：ナビのaに使用。
文字色をhover時に「link-hover-color」に変更
*/
.u-link-hover-color,
.u-link-hover-color > * {
	transition: color 0.3s;
}

.u-link-hover-color:hover,
.u-link-hover-color:hover > * {
	color: var(--color-pink-macaron);
}

/* * =========================================
 * レスポンシブ対応 (767px以下)
 * =========================================
 */
@media (width <= 767px) {
	.u-first-item--pc {
		order: 0;
	}

	.u-small {
		line-height: 150%;
	}

	/* PC時のみ表示 */
	.u-pc-only {
		display: none !important;
	}
}

/* * =========================================
 * レスポンシブ対応 (768px以上)
 * =========================================
 */
@media screen and (width >= 768px) {
	/* SP時のみ表示 */
	.u-sp-only {
		display: none !important;
	}
}