/* * =========================================
 * 下層ページで使用するコンポーネント
 * =========================================
 */

/* * =========================================
 * FVのバナー
 * =========================================
 */
.c-fv-banner {
	width: 100%;
}

.c-fv-banner__container {
	position: relative;
	display: grid;
	grid-template-areas: 'overlap'; /* 重ね合わせエリアを定義 */
	place-items: center; /* 基本は中央（必要に応じて調整） */
	padding-top: 0;
	padding-bottom: 0;
}

.c-fv-banner__container h1,
.c-fv-banner__container picture,
.c-fv-banner__container .c-fv-banner__text {
	grid-area: overlap;
}

.c-fv-banner img {
	width: 100%;
	height: auto;
}

.c-fv-banner__text {
	z-index: 1;
	align-self: end; /* 下に配置 */
	width: 100%;
	padding: 24px;
	font-size: 14px;
}

/* * =========================================
 * 画像
 * =========================================
 */
.c-article-img {
	width: 100%;
	height: auto;
	padding: 16px 0;
}

/* * =========================================
 * 段落
 * =========================================
 */
.c-article-p {
	padding: 16px 0 8px;
	font-size: 16px;
	line-height: 192%; /* 30.72px */
	letter-spacing: 0.64px;
}
/* c-heading-3の後の場合、is-paddedクラスがJSによって付与される。 */
.c-article-p.is-padded{
	padding: 0 20px;
}

/* * =========================================
 * テキストリンク
 * =========================================
 */
.c-article-a {
	color: #bd5192;
	text-decoration: underline; /* 下線をつける */
	transition: color 0.3s;
	transition: text-decoration 0.3s;
}

.c-article-a:hover {
	color: #f875b4;
	text-decoration: none;
}

/* * =========================================
 * 記事カードの一覧
 * =========================================
 */
.c-article-list {
	padding: 40px 24px;
}

.c-article-list__inner {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px 24px;
	align-items: stretch;
}

.c-article-card {
	height: 100%;
	background-color: var(--color-white);
	box-shadow: 2px 2px 4px 0 rgb(0 0 0 / 25%);
}

.c-article-card a {
	display: flex;
	flex-direction: row;
	gap: 24px;
	align-items: center;
	width: 100%;
	height: 100%;
	padding: 0 16px;
}

.c-article-card__image {
	display: flex;
	align-items: center;
	width: 38%;
	height: 100%;
}

.c-article-card__image img {
	width: 100%;
}

.c-article-card__info {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	padding: 16px 0;
}

.c-article-card__text {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: center;
}

.c-article-card__title {
	padding-bottom: 16px;
	font-family: var(--font-family-sub1);
	font-size: 20px;
	font-style: normal;
	font-weight: var(--font-weight-medium);
	line-height: 120%;
	letter-spacing: 1.6px;
}

.c-article-card__desc {
	font-size: 14px;
	font-style: normal;
	font-feature-settings:
		'halt' on,
		'pwid' on;
	line-height: 130%;
	letter-spacing: 0.56px;
}

.c-article-card__button {
	display: flex;
	justify-content: flex-end;
}

.c-article-card__button > img {
	width: 40px;
	height: 40px;
}

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

/* 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: 16px 0;
}

.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: 40px 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-ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

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

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

.c-article-ul--number {
	padding: 0;
	margin: 0;
	list-style: none;
	counter-reset: recipe-counter;
}

.c-article-ul--number li {
	position: relative;
	padding: 16px 8px 8px 32px;
	margin-bottom: 1.5rem;
	font-size: 16px;
	line-height: 1.8;
}

.c-article-ul--number li::before {
	position: absolute;
	top: 13px;
	left: 10px;
	font-size: 20px;
	font-weight: bold;
	color: #deaaca;
	content: counter(recipe-counter);
	counter-increment: recipe-counter;
}

.c-article-ul--number .category,
.c-article-ul .category,
.c-article-ul--number .category--pink,
.c-article-ul .category--pink {
	display: inline-block;
	width: 80px;
	padding: 4px 0 2px;
	margin-left: 8px;
	font-size: 15px;
	font-style: normal;
	font-weight: 500;
	line-height: 100%; /* 15px */
	color: var(--text-color-default);
	text-align: center;
	text-decoration: none;
	letter-spacing: 0.6px;
	background-color: rgb(228 224 226 / 80%);
	border-radius: 24px;
}

.category--pink {
	background-color: rgb(248 190 225 / 80%) !important;
}

/* * =========================================
 * 区切り線
 * =========================================
 */
.c-article-hr {
	width: 100%;
	height: 0;
	padding: 24px 0;
	border: none;
}

.c-article-hr hr {
	border-top: 1px solid #b4b4b4cc;
}

/* * =========================================
 * テーブル
 * =========================================
 */
.c-article-table {
	padding: 24px 0;
}

.c-article-table table {
	width: 100%;
	padding: 24px 0;
	table-layout: fixed; /* 各列の幅を均等にする */
	border-collapse: collapse;
	border: 1px solid #cdcdcd;
}

.c-article-table caption {
	margin: 16px 0 12px;
	text-align: center;
}

.c-article-table thead {
	text-align: center;
	background-color: #ebebebcc;
}

.c-article-table th {
	padding: 8px 8px 6px;
	font-size: 0.9rem;
	background-color: #ebebebcc;
	border: 1px solid #cdcdcd;
}

.c-article-table tbody {
	text-align: center;
	background-color: #fcfcfc;
}

.c-article-table td {
	padding: 12px 8px;
	font-size: 1rem;
	border: 1px solid #cdcdcd;
}

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

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

/* * =========================================
 * 画像とテキストのセット
 * =========================================
 */
.c-media-block {
	padding: 24px 0;
}

.c-media-block article {
	display: flex;
	flex-direction: row;
	gap: 24px;
	justify-content: space-between;
}

.c-media-block__item--text {
	flex: 1;
}

.c-media-block__item--image {
	width: 40%;
}

.c-media-block__item--image img {
	width: 100%;
}

/* * =========================================
 * 動画(youtube)
 * =========================================
 */
.c-article-video {
	width: 100%;
	padding: 24px 0;
}

.c-article-video iframe {
	width: 100%;
}

/* * =========================================
 * リンクなどの横並び
 * =========================================
 */
.c-article-flex {
	display: flex;
	flex-flow: row wrap;
	padding: 8px 0;
}

.c-article-flex .c-article-flex__item {
	padding: 16px;
}

/* * =========================================
 * ボタンなどの横並び
 * =========================================
 */
.c-article-flex--btn {
	display: flex;
	flex-flow: row wrap;
	gap: 16px;
	padding: 8px 16px;
}

.c-article-flex--btn .c-article-flex__item {
	width: 120px;
	padding: 15px 0 13px;
	font-size: 18px;
	font-style: normal;
	font-weight: var(--font-weight-medium);
	font-feature-settings:
		'halt' on,
		'pwid' on;
	line-height: 100%; /* 18px */
	letter-spacing: 0.72px;
	border: none;
	border-radius: 4px;
}

/* * =========================================
 * ボタン
 * =========================================
 */
.c-article-btn {
	width: 100%;
	padding: 16px;
}

.c-article-btn a {
	padding: 8px 24px 12px;
	font-family: var(--font-family-sub1);
	font-size: 24px;
	font-style: normal;
	font-weight: var(--font-weight-medium);
	line-height: 120%; /* 28.8px */
	letter-spacing: 1.92px;
}

/* * =========================================
 * サイドバーのタイトル
 * =========================================
 */
.c-sidebar-title {
	padding: 14px 0;
}

.c-sidebar-title__inner {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: center;
	padding: 24px 0;
	border: solid #e6acba;

	/* border-width: 2px 0; */
	border-width: 0 0 1px;
}

.c-sidebar-title__text {
	font-family: var(--font-family-sub1);
	font-size: 24px;
	font-style: normal;
	font-weight: var(--font-weight-bold);
	font-feature-settings:
		'halt' on,
		'pwid' on;
	line-height: normal;
	color: #f07e89;
	text-align: center;
	letter-spacing: 0.96px;
}

/* * =========================================
 * サイドバーのナビ
 * =========================================
 */
.c-sidebar-nav {
	position: relative;
	padding-top: 16px;
	padding-bottom: 64px;
	list-style: none;
}

.c-sidebar-nav li {
	padding: 24px 10px 20px 16px;
	border-bottom: 2px dotted #e6acba;
}

.c-sidebar-nav a {
	font-size: 20px;
	font-style: normal;
	font-weight: var(--font-weight-medium);
	line-height: 140%; /* 28px */
	color: #f07e89;
}

/* * =========================================
 * サイドバーのバナー
 * =========================================
 */
.c-sidebar-banner {
	position: relative;
	padding-top: 16px;
	padding-bottom: 64px;
	list-style: none;
}

.c-sidebar-banner li {
	padding: 0 50px;
	margin-top: 32px;
}

.c-sidebar-banner a {
	width: 100%;
}

.c-sidebar-banner img {
	width: 100%;
}

/* * =========================================
 * 垂直方向の画像ギャラリー
 * =========================================
 */
.c-booklet,
.c-booklet--vertical {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: center;
	width: 100%;
}

.c-booklet img,
.c-booklet--vertical img {
	border: 1px solid black;
}

.c-booklet--vertical img {
	max-width: 70%;
}

/* * =========================================
 * レスポンシブ対応 (767px以下)
 * =========================================
 */
@media (width <= 767px) {
	/* FVのバナー */
	.c-fv-banner__container {
		display: block;
		padding-right: 0;
		padding-left: 0;
	}

	.c-fv-banner h1,
	.c-fv-banner picture {
		width: 100%;
	}

	/* h1 */
	.c-heading-1 {
		padding: 48px 0 16px;
	}

	.c-heading-1 h1 {
		padding: 0 0 8px;
		font-size: 24px;
		letter-spacing: 1.92px;
	}

	.c-heading-1__bg img {
		bottom: 8px;
		max-width: 65%;
		height: auto;
		max-height: 80%;
	}

	.c-heading-3 h1,
	.c-heading-3 h2,
	.c-heading-3 h3,
	.c-heading-3 h4 {
		padding: 0 8px 8px;
		font-size: 18px;
		line-height: 140%; /* 25.2px */
		letter-spacing: 1.44px;
	}

	.c-article-list {
		padding: 40px 0;
	}

	.c-article-list__inner {
		grid-template-columns: repeat(1, 1fr);
		grid-auto-rows: 1fr;
		gap: 32px;
	}

	.c-article-card a {
		padding-left: 0;
	}

	.c-article-card,
	.c-article-card a {
		width: 100%;
	}

	.c-article-card__button > img {
		width: 30px;
		height: 30px;
	}

	.c-media-block article {
		flex-direction: column;
	}

	.c-media-block__item {
		width: 100%;
	}

	.c-booklet img,
	.c-booklet--vertical img {
		width: 100%;
		max-width: none;
	}
}