/* * =========================================
 * リスト
 * =========================================
 */
.c-article-ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

.c-article-ul li {
	position: relative;
	padding: 3px 8px 3px 32px; /* ドットの分、左に余白を作る */
	line-height: 1.8; /* 行間を少しゆったりさせる */
}

/* 疑似要素でピンクの丸を作る */
.c-article-ul li::before {
	position: absolute;
	top: 0.8em; /* 文字の高さに合わせて中央寄りに調整 */
	left: 16px;
	width: 8px;
	height: 8px;
	content: '';
	background-color: #deaaca; /* 変数があれば使用 */
	border-radius: 50%; /* 正円にする */
}

/* * =========================================
 * 見出し
 * =========================================
 */

/* H1 */
.c-heading-1 {
	position: relative;
	padding: 48px 20px 24px;
}

.c-heading-1__bg {
	opacity: 0.6;
}

.c-heading-1__bg img {
	position: absolute;
	bottom: 0;
	width: auto;
	max-width: 40%;
	height: 95%;
}

.c-heading-1 h1 {
	padding: 0 32px 16px;
	font-family: var(--font-family-sub1);
	font-size: 28px;
	font-style: normal;
	font-weight: var(--font-weight-medium);
	line-height: 120%; /* 33.6px */
	letter-spacing: 2.24px;
	border-bottom: 2px solid var(--bcf-common-pale, #deaaca);
}

/* H2 */
.c-heading-2 {
	padding: 40px 0 16px;
}

.c-heading-2 h1,
.c-heading-2 h2,
.c-heading-2 h3,
.c-heading-2 h4 {
	width: 100%;
	padding: 6px 16px 8px;
	font-family: var(--font-family-sub1);
	font-size: 20px;
	font-style: normal;
	font-weight: var(--font-weight-bold);
	line-height: 100%; /* 20px */
	color: var(--bc-common-white, #fff);
	letter-spacing: 1.6px;
	background-color: rgb(173 5 107 / 44%);
	border-radius: 40px;
}

/* H3 */
.c-heading-3 {
	padding: 24px 0 8px;
}

.c-heading-3 h1,
.c-heading-3 h2,
.c-heading-3 h3,
.c-heading-3 h4 {
	padding: 0 8px 12px 16px;
	font-family: var(--font-family-sub1);
	font-size: 20px;
	font-style: normal;
	font-weight: var(--font-weight-bold);
	line-height: 100%; /* 20px */
	color: #e994c8;
	letter-spacing: 1.6px;
	border-bottom: 1.6px dashed #deaaca;
}

.c-heading-3 .date {
	width: 100%;
	padding: 8px 4px 0 0;
	font-family: var(--font-family-sub2);
	font-size: 16px;
	font-style: normal;
	font-weight: 600;
	line-height: 100%; /* 16px */
	color: #e994c8;
	text-align: end;
	letter-spacing: 1.28px;
}

/* H4 */
.c-heading-4 {
	padding: 10px 0 16px;
}

.c-heading-4 h1,
.c-heading-4 h2,
.c-heading-4 h3,
.c-heading-4 h4 {
	padding: 12px 8px 12px 16px;
	font-family: var(--font-family-sub1);
	font-size: 20px;
	font-style: normal;
	font-weight: var(--font-weight-medium);
	line-height: 100%; /* 20px */
	letter-spacing: 1.6px;
	background-color: #ff62c038;
	border-left: 10px solid #eb90c7;
}

/* * =========================================
 * レシピなどグレー背景のノート
 * =========================================
 */
.c-article-note-2 {
	padding: 5px 0;
}

.c-article-note-2 article {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 10px;
	background: rgb(235 235 235 / 80%);
	border-radius: 8px;
}

/* 色の付きテキスト */
.u-color-2 {
	color: #8091d8;
}

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

/* テーブルの調整 */
.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--12 {
	padding-top: 12px;
}

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(--link-hover-color);
}