@charset "UTF-8";
/* ==========================================================================
   こだわり(page-mg-kodawari.php のときだけ、css/page.css の後に読み込む)
   ご贈答のご案内(page-mg-gift.php)も .mg-kodawari-item を使うため読み込む。変えるときは両方の表示を確認する
   縦書きの字間は「文字送り - 文字サイズ」で指定している
   ========================================================================== */


/* ３つのこだわり
   ========================================================================== */
.mg-kodawari-item {
	display: grid;
	grid-template-columns: minmax(0, 580fr) minmax(0, 440fr);
	grid-template-rows: 1fr auto auto 1fr;
	grid-template-areas:
		"img ."
		"img title"
		"img text"
		"img .";
	column-gap: clamp(40px, 9.28vw - 31.4px, 80px);
	margin-top: 80px;
}
.mg-kodawari-item:nth-of-type(even) {
	grid-template-columns: minmax(0, 440fr) minmax(0, 580fr);
	grid-template-areas:
		". img"
		"title img"
		"text img"
		". img";
}

.mg-kodawari-item__img {
	grid-area: img;
	aspect-ratio: 1 / 1;
}
.mg-page .mg-kodawari-item__img img,
.mg-kodawari-item__img .mg-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mg-kodawari-item__title {
	grid-area: title;
	justify-self: center;
	display: flex;
	flex-direction: row-reverse;
	align-items: flex-start;
	gap: 16px;
	margin: 0;
	font-weight: 600;
}
.mg-kodawari-item__num,
.mg-kodawari-item__heading {
	writing-mode: vertical-rl;
}
.mg-kodawari-item__num {
	color: var(--mg-color-main);
	font-size: 16px;
	font-weight: 500;
	line-height: 16px;
	letter-spacing: 4px;
}
.mg-kodawari-item__digits {
	text-combine-upright: all;
}
.mg-kodawari-item__heading {
	color: var(--mg-color-text);
	font-size: 30px;
	line-height: 30px;
	letter-spacing: 6px;
}

.mg-kodawari-item__text {
	grid-area: text;
	margin-top: clamp(40px, 4.64vw + 4.3px, 60px);
	color: var(--mg-color-text);
	font-size: clamp(14px, 1.34vw, 16px);
	line-height: 1.8;
	letter-spacing: var(--mg-ls);
}

@media (max-width: 768px) {
	.mg-kodawari-item {
		grid-template-columns: minmax(0, 263fr) minmax(0, 72fr);
		grid-template-rows: auto auto;
		grid-template-areas:
			"img title"
			"text text";
		column-gap: 0;
	}
	.mg-kodawari-item:nth-of-type(even) {
		grid-template-columns: minmax(0, 72fr) minmax(0, 263fr);
		grid-template-areas:
			"title img"
			"text text";
	}
	.mg-kodawari-item__title {
		justify-self: end;
		align-self: start;
		gap: 10px;
	}
	.mg-kodawari-item:nth-of-type(even) .mg-kodawari-item__title {
		justify-self: start;
	}
	.mg-kodawari-item__num {
		font-size: 14px;
		line-height: 14px;
		letter-spacing: 4px;
	}
	.mg-kodawari-item__heading {
		font-size: 24px;
		line-height: 24px;
		letter-spacing: 4px;
	}
	.mg-kodawari-item__text {
		margin-top: 24px;
		font-size: 14px;
		line-height: 25.2px;
	}
}