@charset "UTF-8";


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

.nature_main_pagelink span {
	text-align: center;
}

/* コラム */

.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;
	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;
}


/* ==========================================
	ホバー、マウスポインタがサポートされている環境
=========================================== */
@media (hover:hover) and (pointer: fine) {}

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

	.nature_main_pagelink>div {
		width: 70%;
		max-width: 100%;
	}

	.nature_main_pagelink {
		flex-direction: column;
		row-gap: 2rem;
	}

	/* コラム */
	.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～1024px）
===================================== */
@media screen and (768px <=width < 1024px) {}

@media screen and (768px <=width < 1300px) {}

@media screen and (1024px <=width < 1300px) {}


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

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