@charset "UTF-8";
/* ==========================================================================
   MELB TOKYO / areas.css
   AREAS一覧ページ（page-areas.php）専用
   --------------------------------------------------------------------------
   KV → エリアを1つずつ帯で並べる（背景色と左右のレイアウトを交互に入れ替え）
   ※ KV（.c-pageHero）/ CTA は common.css
   ========================================================================== */

/* ==========================================================================
   エリアの帯
   ========================================================================== */
.p-areas__item {
	padding-block: 60px;
	/* TOPのカードから飛んできたときにヘッダーへ潜り込まないようにする */
	scroll-margin-top: var(--header-h);
}

/* 偶数番目はクリーム背景 */
.p-areas__item:nth-child(even) {
	background-color: var(--color-cream);
}


/* ==========================================================================
   AREAカード（一覧版）
   ========================================================================== */
.c-areaCard--archive {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 50px;
	align-items: center;
}

/* 偶数番目はテキストを左、画像を右に */
.p-areas__item:nth-child(even) .c-areaCard__media {
	order: 2;
}


/* ---- 画像 --------------------------------------------------------------
   高さを固定して、画像の縦横比が違っても並びが崩れないようにする。
   はみ出した分は object-fit: cover で左右がトリミングされる。
   1枚目＝左の大きい画像、2枚目＝右上、3枚目＝右下。
   ------------------------------------------------------------------------ */
.c-areaCard__gallery {
	display: grid;
	gap: 6px;
	height: clamp(260px, 29vw, 414px);
}

/* 1枚だけ（ギャラリー未設定でアイキャッチを使う場合もここ） */
.c-areaCard__gallery--1 {
	grid-template-columns: 1fr;
}

/* 2枚：左大 + 右（縦いっぱい） */
.c-areaCard__gallery--2 {
	grid-template-columns: 2fr 1fr;
}

/* 3枚：左大 + 右上 + 右下 */
.c-areaCard__gallery--3 {
	grid-template-columns: 2fr 1fr;
	grid-template-rows: 1fr 1fr;
}

.c-areaCard__gallery--3 .c-areaCard__galleryItem:first-child {
	grid-row: 1 / 3;
}

.c-areaCard__galleryItem {
	overflow: hidden;
	border-radius: var(--radius);
	background-color: var(--color-line);
}

.c-areaCard__galleryItem img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* ---- テキスト ---- */
.c-areaCard--archive .c-areaCard__num {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 1.8rem;
	letter-spacing: 0.02em;
	line-height: 1;
	color: var(--color-blue);
}

.c-areaCard--archive .c-areaCard__title {
	margin-top: 18px;
	font-family: var(--font-serif);
	font-size: var(--fs-heading);
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: var(--lh-heading);
}

.c-areaCard--archive .c-areaCard__text {
	margin-top: 24px;
	font-size: var(--fs-text);
	line-height: var(--lh-text);
	color: var(--color-text);
}

.c-areaCard--archive .c-areaCard__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 28px;
}

.c-areaCard--archive .c-areaCard__tag {
	padding: 4px 12px;
	border: 1px solid var(--color-blue);
	border-radius: 4px;
	font-size: 1.6rem;
	letter-spacing: 0.02em;
	line-height: 1.4;
	font-weight: 500;
	color: var(--color-blue);
}


/* ==========================================================================
   レスポンシブ
   ========================================================================== */
@media screen and (max-width: 1024px) {
	.p-areas__item {
		padding-block: 48px;
	}

	.c-areaCard--archive {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	/* 縦並びのときは画像を上に戻す */
	.p-areas__item:nth-child(even) .c-areaCard__media {
		order: 0;
	}

	.c-areaCard__gallery {
		height: clamp(240px, 42vw, 360px);
	}
}