@charset "UTF-8";

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

main {
	position: relative;
	overflow: hidden;
}

/* メインビジュアル */
.mainvisual {
	position: relative;
	width: 100vw;
	height: 75.333vw;
	overflow: visible;
}

.mainvisual_txt {
	width: 100vw;
	height: 48.333vw;
	padding: 5vw;
	font-family: "Noto Sans JP", sans-serif;
	font-style: normal;
	background: url("/nature/assets/index/images/mv-wave01.svg") no-repeat top left;
	background-size: contain;
}

.mainvisual_txt h1 img {
	width: 20vw;
	height: auto;
}

.mainvisual_txt h1 em {
	display: block;
	font-size: 9.3vw;
	line-height: 1;
	font-weight: 800;
	color: var(--color-nature);
	letter-spacing: -0.025em;
}

.mainvisual_txt h1 span {
	display: block;
	margin-top: 1em;
	font-weight: 700;
	font-size: clamp(1.4rem, 1.8vw, 14rem);
}

/* メインビジュアル */
.mainvisual_img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.mainvisual_img div {
	position: absolute;
	z-index: 2;
	/* アニメーション */
	opacity: 0;
}

/* てんとう虫 */
.mainvisual_img div.mv_img01 {
	width: 7.8vw;
	top: 10vw;
	left: 39vw;
	transform: scale(.7) translateX(100px) translateY(100px) rotate(30deg);
}
/* シロクマ */
.mainvisual_img div.mv_img02 {
	width: 65vw;
	top: 2.2vw;
	left: 47vw;
	transform: scale(1) translateX(300px) translateY(0) rotate(0);
}
/* エアコン */
.mainvisual_img div.mv_img03 {
	width: 31vw;
	top: 39.8vw;
	left: 67vw;
	transform: scale(0.2) translateX(100px) translateY(100px) rotate(0);
}
/* 掃除機 */
.mainvisual_img div.mv_img04 {
	width: 26.06vw;
	top: 51.66vw;
	left: 73vw;
	transform: scale(0.8) translateX(100px) translateY(0) rotate(-30deg);
}
/* ホタテ */
.mainvisual_img div.mv_img05 {
	width: 10.4vw;
	top: 68vw;
	left: 87.6vw;
	transform: scale(1) translateX(0) translateY(0) rotate(180deg);
}
/* ラッコ */
.mainvisual_img div.mv_img06 {
	width: 25vw;
	top: 51vw;
	left: 58vw;
	transform: scale(1) translateX(100px) translateY(100px) rotate(230deg);
}
/* ヒマワリ */
.mainvisual_img div.mv_img07 {
	width: 9.8vw;
	top: 40.8vw;
	left: 57vw;
	transform: scale(1) translateX(0) translateY(100px) rotate(0);
}
/* 洗濯機 */
.mainvisual_img div.mv_img08 {
	width: 15.6vw;
	top: 41vw;
	left: 40vw;
	transform: scale(0.2) translateX(100px) translateY(100px) rotate(0);
}
/* アホウドリ */
.mainvisual_img div.mv_img09 {
	width: 31vw;
	top: 68.4vw;
	left: 40.4vw;
	transform: scale(1) translateX(100px) translateY(100px) rotate(20deg);
}
/* 扇風機 */
.mainvisual_img div.mv_img10 {
	width: 12.73vw;
	top: 53.2vw;
	left: 25.6vw;
	transform: scale(1) translateX(0) translateY(100px) rotate(0);
}
/* アサギマダラ */
.mainvisual_img div.mv_img11 {
	width: 10vw;
	top: 45.2vw;
	left: 29vw;
	transform: scale(.7) translateX(100px) translateY(100px) rotate(10deg);
}
/* イルカ */
.mainvisual_img div.mv_img12 {
	width: 32vw;
	top: 41.6vw;
	left: -1.6vw;
	transform: scale(1) translateX(-100px) translateY(100px) rotate(-50deg);
}
/* ドライヤー */
.mainvisual_img div.mv_img13 {
	width: 10vw;
	top: 56.4vw;
	left: 13vw;
	transform: scale(.2) translateX(100px) translateY(100px) rotate(-120deg);
}
/* ブラシ */
.mainvisual_img div.mv_img14 {
	width: 7.4vw;
	top: 64.4vw;
	left: 4.6vw;
	transform: scale(.2) translateX(100px) translateY(100px) rotate(100deg);
}
/* モモンガ */
.mainvisual_img div.mv_img15 {
	width: 27vw;
	top: 73.2vw;
	left: 0.6vw;
	transform: scale(1) translateX(-100px) translateY(-100px) rotate(0);
}

/* アマツバメ */
.mainvisual_img div.mv_img16 {
	display: none;
}

/* トップ_about */

.mainvisual_about {
	background: var(--color-bg-w);
	position: relative;
	margin-block: 11.333vw 18.4vw;
	height: 150px;
}

.mainvisual_about::before {
	content: "";
	display: block;
	width: 100vw;
	height: 11.333vw;
	position: absolute;
	top: -11.2vw;
	z-index: -1;
	background: url(/nature/assets/index/images/mv-wave02.svg) no-repeat bottom left / cover;
}

.mainvisual_about::after {
	content: "";
	display: block;
	width: 100vw;
	height: calc(18.4vw + 4px);
	position: absolute;
	bottom: calc(-18.4vw - 2px);
	z-index: -1;
	background: url(/nature/assets/index/images/mv-wave03.svg) no-repeat bottom left / cover;
}


.mainvisual_about div {
	position: relative;
	width: 58%;
	margin-inline: auto 0;
}

.mainvisual_about div h2 {
	position: relative;
	font-weight: 700;
}

.mainvisual_about div h2 em {

	display: block;
	font-size: clamp(3.4rem, 4.666vw, 7rem);
	color: var(--color-nature);
	line-height: 0;
	margin-block-end: .6em;
}

.mainvisual_about div h2 img {
	width: 140px;
	height: auto;
	position: absolute;
	left: 30%;
	bottom: 20px;
}

.mainvisual_about div h2 span {
	font-size: clamp(1.4rem, 1.333vw, 2rem);
}

.mainvisual_about div p {
	margin-block-start: 1em;
	margin-inline: auto;
	line-height: 2;
	font-weight: 700;
}

.mainvisual_about div p small {
	display: block;
	margin-block-start: 1rem;
	font-weight: normal;
	font-size: 1.2rem;
}

/* ウェーブ */

.top_cat_wrapper.cat_sora {
	padding-bottom: calc(100px + 8.53333vw);
}

.top_cat_wrapper.cat_riku::before {
	content: "";
	display: block;
	width: 100vw;
	height: 8.53333vw;
	position: absolute;
	top: -8.53333vw;
	z-index: 1;
	background: url(/nature/assets/index/images/sec-wave01.svg) no-repeat bottom left / cover;
}

.top_cat_wrapper.cat_riku {
	padding-bottom: calc(100px + 10vw);
}

.top_cat_wrapper.cat_umi::before {
	content: "";
	display: block;
	width: 100vw;
	height: 10vw;
	position: absolute;
	top: -10vw;
	z-index: 1;
	background: url(/nature/assets/index/images/sec-wave02.svg) no-repeat bottom left / cover;
}

.top_cat_wrapper.cat_umi {
	padding-bottom: calc(100px + 5vw);
}

.top_cat_wrapper.cat_plant::before {
	content: "";
	display: block;
	width: 100vw;
	height: 5vw;
	position: absolute;
	top: -5vw;
	z-index: 1;
	background: url(/nature/assets/index/images/sec-wave03.svg) no-repeat bottom left / cover;
}

.top_cat_wrapper.cat_plant {
	padding-bottom: calc(200px + 10vw);
}

/* 猫ちゃん */
.nekochan {
	width: clamp(200px, 60vw, 1200px);
	aspect-ratio: 10 / 3.473;
	position: absolute;
	left: 0;
	bottom: 0;
}

/* トップカテゴリー */

.top_cat_wrapper {
	position: relative;
	text-align: center;
	padding: 100px 0;
}

.top_cat_wrapper.cat_sora,
.top_cat_wrapper.cat_umi {
	background-color: var(--color-bg-dark);
}

.top_cat_wrapper.cat_riku,
.top_cat_wrapper.cat_plant {
	background-color: var(--color-bg-pale);
}


/* 見出し */
.top_cat_wrapper h2 img {
	width: 340px;
}

.top_cat_wrapper.cat_plant h2 img {
	width: 455px;
}

/* 動物リンクボックス */
.box_top_tech {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items:stretch;
	gap: 100px 30px;
	padding-block: 80px 100px;
	margin-inline: auto;
}

.cat_riku .box_top_tech {
	max-width: 900px;
}

.box_top_tech li {
	position: relative;
	/* width: 22%; */
	width: 277px;
	padding: 0 0 60px;
	background-color: var(--color-bg-w);
	border-radius: var(--round);
	box-shadow: 0px 20px 20px 0px #ACA9A038;
	transition: box-shadow 0.5s;
}

.box_top_tech li a {
	display: block;
	width: 100%;
	height: 100%;
}

.box_top_tech li h3 {
	position: relative;
	font-size: clamp(1.6rem, 2.12vw, 3.2rem);
	font-weight: 700;
	line-height: 1.4;
}

.box_top_tech li h3:before {
	content: "";
	display: block;
	width: 70px;
	height: 5px;
	margin-block: 20px 10px;
	margin-inline: auto;
	border-radius: 3px;
	background: var(--color-theme-light);
	transition: width 0.2s ease, background-color 0.3s ease;

}

.box_top_tech li h3:after {
	content: "";
	display: block;
	width: 1px;
	height: 30px;
	position: absolute;
	left: 50%;
	bottom: -35px;
	background: var(--color-font);
}

.box_top_tech li h3 small {
	display: block;
	font-size: clamp(1.2rem, 1.333vw, 2rem);
}

.box_top_tech li .box_top_tech_animal {
	padding : 5px;
	margin-block: 10px 0;
	margin-inline: auto;
	position: relative;
	z-index: 1;
}

.box_top_tech li .box_top_tech_pro {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
	position: absolute;
	width: 100%;
	left: 50%;
	bottom: 0;
	transform: translate(-50%, 50%);
}

.box_top_tech li div.box_top_tech_pro span {
	display: block;
	width: 40%;
	aspect-ratio: 1 / 1;
	border: 6px solid var(--color-bg-w);
	border-radius: 50%;
	background: var(--color-theme-light);
}

.box_top_tech li p {
	position: relative;
	z-index: 2;
	font-weight: 500;
	font-size: 1.5rem;
	padding-inline: 3%;
}

.footer_note {
	color: var(--color-font);
}


/* ====================================
	ホバーが有効な環境のみ
===================================== */
@media (hover:hover) and (pointer: fine) {
	
	/* 動物リンクボックス */
	.box_top_tech li:hover .box_top_tech_animal img {
		filter: drop-shadow(0px 0 4px #c4bfb1d1);
		scale: 1.1;
	}

	.box_top_tech li:hover h3 {
		color: var(--color-theme-light);
	}

	.box_top_tech li:hover small {
		color: var(--color-theme-light);
	}

	.box_top_tech li:hover a {
		text-decoration: none;
	}

}




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

	/* メインビジュアル */
	.mainvisual {
		height: 163vw;
	}

	.mainvisual_txt {
		width: 100vw;
		height: auto;
		aspect-ratio: 1 / 1;
		padding: 0;
		background: url("/nature/assets/index/images/mv-wave01_sp.svg") no-repeat top left;
		background-size: 97%;
	}

	.mainvisual_txt h1 {
		position: absolute;
		left: 3vw;
		top: 7vw;
		z-index: 99;
		text-shadow: 0 0 10px var(--color-bg-w);
	}

	.mainvisual_txt h1 img {
		width: 40vw;
	}

	.mainvisual_txt h1 em {
		font-size: clamp(4rem, 16vw, 14rem);
		line-height: 1;
		color: var(--color-nature);
		letter-spacing: -0.025em;
	}
	
	.mainvisual_txt h1 span {
		margin-top: 1em;
		font-weight: 700;
		font-size: clamp(1.4rem, 3.8vw, 14rem);
	}
	
	/* てんとう虫 */
	.mainvisual_img div.mv_img01 {
		width: 15.8vw;
		top: 111.2vw;
		left: 1.7vw;
		transform: scale(.7) translateX(100px) translateY(100px) rotate(30deg);
	}
	/* シロクマ */
	.mainvisual_img div.mv_img02 {
		width: 104vw;
		top: 2vw;
		left: 46vw;
		transform: scale(1) translateX(300px) translateY(0) rotate(0);
	}
	/* エアコン */
	.mainvisual_img div.mv_img03 {
		width: 44vw;
		top: 82vw;
		left: 53vw;
		transform: scale(0.2) translateX(100px) translateY(100px) rotate(0);
	}
	/* 掃除機 */
	.mainvisual_img div.mv_img04 {
		width: 43vw;
		top: 125vw;
		left: 56vw;
		transform: scale(0.8) translateX(100px) translateY(0) rotate(-30deg);
	}
	/* ホタテ */
	.mainvisual_img div.mv_img05 {
		width: 16vw;
		top: 118.6vw;
		left: 67vw;
		transform: scale(1) translateX(0) translateY(0) rotate(180deg);
	}
	/* ラッコ */
	.mainvisual_img div.mv_img06 {
		display: none;
	}
	/* ヒマワリ */
	.mainvisual_img div.mv_img07 {
		width: 20vw;
		top: 99vw;
		left: 16vw;
		transform: scale(1) translateX(0) translateY(100px) rotate(0);
	}
	/* 洗濯機 */
	.mainvisual_img div.mv_img08 {
		width: 27vw;
		top: 100.4vw;
		left: 38.2vw;
		transform: scale(0.2) translateX(100px) translateY(100px) rotate(0);
	}
	/* アホウドリ */
	.mainvisual_img div.mv_img09 {
		width: 48vw;
		top: 63.4vw;
		left: 56vw;
		transform: scale(1) translateX(100px) translateY(100px) rotate(20deg);
	}
	/* 扇風機 */
	.mainvisual_img div.mv_img10 {
		width: 21vw;
		top: 129.8vw;
		left: 1vw;
		transform: scale(1) translateX(0) translateY(100px) rotate(0);
	}
	/* アサギマダラ */
	.mainvisual_img div.mv_img11 {
		display: none;
	}
	/* イルカ */
	.mainvisual_img div.mv_img12 {
		width: 54vw;
		top: 74vw;
		left: -3.4vw;
		transform: scale(1) translateX(-100px) translateY(100px) rotate(-50deg);
	}
	/* ドライヤー */
	.mainvisual_img div.mv_img13 {
		width: 11.6vw;
		top: 134vw;
		left: 24.2vw;
		transform: scale(.2) translateX(100px) translateY(100px) rotate(-120deg);
	}
	/* ブラシ */
	.mainvisual_img div.mv_img14 {
		display: none;
	}
	/* モモンガ */
	.mainvisual_img div.mv_img15 {
		width: 36vw;
		top: 153vw;
		left: 17vw;
		transform: scale(1) translateX(-100px) translateY(-100px) rotate(0);
	}

	/* アマツバメ */
	.mainvisual_img div.mv_img16 {
		display: block;
		width: 27.6vw;
		top: 99vw;
		left: 71vw;
		transform: scale(1) translateX(150px) translateY(100px) rotate(-20deg);
	}

	/* トップ_about */

	.mainvisual_about {
		margin-block: 29vw 19.2vw;
		padding-block: 0rem 4rem;
		height: auto;
	}

	.mainvisual_about::before {
		height: 38.66vw;
		top: -38.5vw;
		background: url(/nature/assets/index/images/mv-wave02_sp.svg) no-repeat bottom left / cover;
	}

	.mainvisual_about::after {
		height: 19.3vw;
		bottom: -19.25vw;
		background: url(/nature/assets/index/images/mv-wave03_sp.svg) no-repeat bottom left / cover;
	}

	.mainvisual_about div {
		width: 100%;
	}

	.mainvisual_about div h2 em {
		margin-bottom: .6em;
	}

	.mainvisual_about div h2 img {
		width: 110px;
		left: 160px;
		bottom: 26px;
	}

	.mainvisual_about div p {
		margin: 1em auto 0;
		line-height: 1.6;
		font-size: 1.4rem;
		font-weight: 500;
	}

	/* ウェーブ */

	.top_cat_wrapper.cat_sora {
		padding-bottom: calc(50px + 8.53333vw);
	}

	.top_cat_wrapper.cat_riku::before {
		height: 20.8vw;
		top: -20.7vw;
		background: url(/nature/assets/index/images/sec-wave01_sp.svg) no-repeat bottom left / cover;
	}

	.top_cat_wrapper.cat_riku {
		padding-bottom: calc(50px + 10vw);
	}

	.top_cat_wrapper.cat_umi::before {
		height: 20.8vw;
		top: -20.7vw;
		background: url(/nature/assets/index/images/sec-wave02_sp.svg) no-repeat bottom left / cover;
	}

	.top_cat_wrapper.cat_umi {
		padding-bottom: calc(50px + 5vw);
	}

	.top_cat_wrapper.cat_plant::before {
		height: 9.6vw;
		top: -9.5vw;
		background: url(/nature/assets/index/images/sec-wave03_sp.svg) no-repeat bottom left / cover;
	}

	.top_cat_wrapper.cat_plant {
		padding-bottom: calc(150px + 10vw);
	}

	/* 猫ちゃん */
	.nekochan {
		width: 100%;
	}

	/* トップカテゴリー */
	.top_cat_wrapper {
		padding: 5rem 0;
	}

	/* 見出し */
	.top_cat_wrapper h2 img {
		width: 210px;
	}

	.top_cat_wrapper.cat_plant h2 img {
		width: 242px;
	}

	/* 動物リンクボックス */
	.box_top_tech {
		gap: 50px 5%;
		padding-block: 50px;
	}
	.box_top_tech li {
		width: min(220px, 47.5%);
		padding-block: 0 3rem;
	}


	.box_top_tech li h3 {
		font-size: clamp(1.9rem, 3.2vw, 3.2rem);
	}

	.box_top_tech li h3:before {
		width: 45px;
		margin-block: 15px 10px;
	}

	.box_top_tech li h3:after {
		height: 20px;
		bottom: -30px;
	}

	.box_top_tech li .box_top_tech_animal {
		margin-block: 10px 0;
	}

	.box_top_tech li .box_top_tech_pro {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: center;
		position: absolute;
		width: 100%;
		left: 50%;
		bottom: 0;
		transform: translate(-50%, 50%);
	}

	.box_top_tech li div.box_top_tech_pro span {
		width: 34%;
		border: 3px solid var(--color-bg-w);
	}

	.box_top_tech li p {
		font-size: 1.2rem;
		margin-block: 1em 0.5em;
	}

	.box_top_tech li p br {
		display: none;
	}

}

/* ====================================
	PC&タブレット、印刷専用スタイル
===================================== */
@media print,
screen and (width >=768px) {
}

/* ====================================
	タブレット専用スタイル（768px～1024px）
===================================== */
@media screen and (768px <=width < 1024px) {
	.mainvisual_about {
		height: 200px;
	}
		.mainvisual_about div {
			width: 65%;
		}
		.mainvisual_about div h2 img {
			width: 150px;
		}
		
}

/* ====================================
	大画面スタイル（1200px～）
===================================== */
@media screen and (1300px <=width) {

}