@charset "UTF-8";

/* ===============================
	変数定義
=============================== */

/* ===============================
	共通スタイル
=============================== */

/* コラム */

.nature_feature_column {
	margin-top: 5rem;
	padding: 30px;
	background: url(/nature/assets/products/images/pg-green.jpg) no-repeat center center / cover;
	/* background-attachment: fixed; */
	border-radius: 30px;
}

.nature_feature_column-title {
	inline-size: fit-content;
	margin-inline: auto;
}

.nature_feature_column-title span {
	padding-block: 0.7em;
	display: inline;
	text-align: center;
	font-size: 2.4rem;
	line-height: 2;
	color: #fff;
	background-image: linear-gradient(#FFD951, #FFD951);
	background-repeat: no-repeat;
	background-position: 0 95%;
	background-size: 100% 3px;
}

.nature_feature_column-contents {
	display: grid;
	grid-template-columns: 53% 43%;
	grid-template-rows: auto;
	gap: 30px;
	margin-top: 30px;
}

.nature_feature_column-item.right p {
	color: #fff;
}

.nature_feature_column-item.right .nature_feature_column-img {
	margin-top: 20px;
}


/* ====================================
	スマートフォン専用スタイル（～768px）
===================================== */
@media screen and (width <768px) {


	/* コラム */
	.nature_feature_column {
		padding: 20px;
	}

	.nature_feature_column-title span {
		padding-block: 0.5em;
		font-size: 1.8rem;
	}

	.nature_feature_column-contents {
		grid-template-columns: 1fr;
		grid-template-rows: repeat(3, auto);
		gap: 20px;
	}

	.nature_feature_column-item.right {
		display: contents;
	}

	.nature_feature_column-item.right p {
		grid-row: 1;
		font-size: 1.4rem;
	}

	.nature_feature_column-item.right .nature_feature_column-img {
		margin-top: 0;
	}
}

/* ====================================
	TAB、PC、印刷専用スタイル（768px～）
===================================== */
@media print,
screen and (width >=768px) {}

/* ====================================
	タブレット専用スタイル（768px～1079px）
===================================== */
@media screen and (768px <=width < 1080px) {}

/* ====================================
	PC専用スタイル（1080px～）
===================================== */
@media print,
screen and (1080px <=width) {}