@charset "UTF-8";
/* ==========================================================================
   ご贈答のご案内(page-mg-gift.php のときだけ、css/kodawari.css の後に読み込む)
   パッケージの並びは css/kodawari.css の .mg-kodawari-item を使い、ここでは丸の列(おすすめの場面)を足す分だけを指定する
   ========================================================================== */


/* パッケージ
   ========================================================================== */
.mg-gift-item {
	grid-template-rows: 1fr auto auto auto 1fr;
	grid-template-areas:
		"img ."
		"img title"
		"img text"
		"img tags"
		"img .";
}
.mg-gift-item:nth-of-type(even) {
	grid-template-areas:
		". img"
		"title img"
		"text img"
		"tags img"
		". img";
}

@media (max-width: 768px) {
	.mg-gift-item {
		grid-template-rows: auto auto auto;
		grid-template-areas:
			"img title"
			"text text"
			"tags tags";
	}
	.mg-gift-item:nth-of-type(even) {
		grid-template-areas:
			"title img"
			"text text"
			"tags tags";
	}
}


/* 丸(おすすめの場面)
   ========================================================================== */
.mg-gift-item__tags {
	grid-area: tags;
	display: flex;
	justify-content: center;
	gap: 12px;
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
}
.mg-gift-tag {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 1 130px;
	min-width: 0;
	aspect-ratio: 1 / 1;
	border: 1px solid var(--mg-color-main);
	border-radius: 50%;
	background: var(--mg-color-base);
	color: var(--mg-color-main);
	font-size: clamp(12px, 1.34vw, 16px);
	font-weight: 600;
	line-height: 1.8;
	text-align: center;
	white-space: nowrap;
}
.mg-gift-tag__text > span {
	display: block;
}

@media (max-width: 768px) {
	.mg-gift-item__tags {
		margin-top: 24px;
	}
	.mg-gift-tag {
		flex-basis: 106px;
		font-size: clamp(12px, 3.73vw, 14px); /* 狭い画面で文字が丸からはみ出さないよう縮める */
	}
}


/* オンラインショップ案内の上の余白
   ========================================================================== */
@media (min-width: 769px) {
	.mg-page--gift .mg-online {
		margin-top: 100px;
	}
}