@charset "utf-8";
/* CSS Document */


/***************************

	NMブランドページ

***************************/

.brand {
	font-size:18px;
	font-weight:400;
}
	
.brandTop {
	position:relative;
	overflow:hidden;
}
	
	.brandTop div {
		position:absolute;
		top:0;
		left:0;
		display:flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		width:100%;
		height:100%;
	} 
	
	.brandTop div p {
		text-align:center;
		font-weight:400;
		color:#6f5649;
		font-size:50px;
		font--weight:500;
	}
	
	.brandTop div p span {
		display:block;
	}
	
	.brand-read {
		max-width:1200px;
		margin:0 auto;
		padding:2em 0 0;
		font-size:30px;
		font-weight:400;
		color:#000;
		line-height:1.6;
	}
	
	.brand-read span{
		display:block;
		margin-top:2em;
		font-size:20px;
	}
	
/***** promise ****/	

	
	.promise > div{
		margin:0 auto 3em;
	}
	
	.promise > div div p {
	}
	
	.promise > div figure {
		position:relative;
		margin:0;
		box-shadow: 0px 0px 12px -7px #777777;
	}

	.promise > div figure img {
		border-radius: 3px;
		object-fit: cover;
		height:100%;
		
	}
	
	
	.promise > div figure::before{
		content:'';
		position:absolute;
		top:-5px;
		left:-5px;
		display:flex;
		width:100%;
		height:100%;;
		border:rgba(119, 101, 76,.3) 1px solid;
		border-radius:3px;
	}
	
/***** support ****/	

	
	.support > div{
		position:relative;
		margin:0 auto 3em;
	}
	
	.support > div picture > * {
		margin:0;
		max-width:300px;
	}

	.support > div a {
		display:inline-block;
		margin-top:1em;
		padding:.5em 1em;
		color:#6f5649;
		font-size:16px;
		border:#6f5649 1px solid;
		transition:all .5s ease;
	}
	
@media screen and (min-width:769px){
	.support > div a:hover {	
		background:#6f5649;
		color:#fff;
	}
}
	
	
	
/***********/	

.nami {
	position:relative;
	margin:151px 0 0;
	overflow: visible!important;
}
	
.nami_bottom {
	position:relative;
	margin:151px 0;
	overflow: visible!important;
}
	
.nami::before {
	content:'';
	position:absolute;
	top:-130px;
	left:0;
	width:100%;
	height:151px;
	background:url("https://naturamoon.jp/img/brand/brand-nami.png");
	background-size:cover;
	background-position:center;
	z-index:2;
}
	
.nami_bottom::after {
	content:'';
	position:absolute;
	bottom:-131px;
	left:0;
	width:100%;
	height:151px;
	background:url("https://naturamoon.jp/img/brand/brand-nami_bottom.png");
	background-size:cover;
	background-position:center;
	z-index:2;
}

	.products-cate {
		width:100%;
		max-width:1200px;
		display:flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin:0 auto;
		font-weight:400;
	}
	
	.products-cate a{
		position:relative;
		display:block;
		background:#fff;
		border-radius:10px;
		box-shadow: 0px 0px 12px -7px #777777;
	}
	
	.products-cate a img{
		border-radius:10px 10px 0 0 ;
	}
	
	.products-cate a div{
		text-align:left;
		padding:.5em 1em 70px;
	}
	
	.products-cate a div::after{
		content:'詳細ページをみる';
		position:absolute;
		bottom:.8em;
		right:.8em;
		display:inline-block;
		padding:.5em .8em;
		color:#6f5649;
		font-size:16px;
		border:#6f5649 1px solid;
		transition:all .5s ease;
	}

	.products-cate a div h4{
		text-align:center;
	}
	
	.products-cate a figure{
		margin:0;
	}

	
	
@media screen and (min-width:769px){
	.brandTop {
		width:100%;

	}
	.brandTop img{
		height:100vh;
		object-fit: cover;
		object-position: top right;
	}
	
	.promise > div , .support > div{
		display:flex;
		max-width:1200px;
		position:relative;
	}
	
	.promise > div figure , .support > div picture {
		width:40%;
		text-align:center;
	}
	
	.promise > div div , .support > div div {
		width:60%;
		padding:1.5em;
		text-align:left;
	}
	
	.support > div {
		align-items: center;
	}
	
	
	
	/* product */
	.products-cate a {
			position:relative;
			top:0;
			left:0;
			display:block;
			width:32%;
			transition: all .5s ease;
		}
		
	.products-cate a:hover {
		top:-5px;
	}
	
	.products-cate a:first-child {
		width:100%;
		display:flex;
		justify-content: space-between;
		margin-bottom:2em;
		padding-bottom:0;
	}
		
		.products-cate a:first-child figure{
			width:49%;
		}
		
		.products-cate a:first-child img {
			border-radius:10px 0 0 10px ;
		}

		.products-cate a:first-child div{
			width:49%;
			padding-top:2em;
		}
	
		.products-cate a:hover div::after{
			background:#6f5649;
			color:#fff;
		}
	
}
	
@media screen and (max-width:768px){
	
	.brand {
		font-size:16px;
	}
	
	.brandTop div p {
		font-size:32px;
		letter-spacing:0;
	}
	.brandTop img{
		width:100%;
		height:auto;
		object-fit: cover; 
		aspect-ratio: 1 / 1;
		object-position: right;
	}
	
	.promise > div , .support > div{
		padding:1em;
		position:relative;
	}
	
	.promise > div figure{
		margin-bottom:1.5em;
	}

	
	.promise > div p , .support > div p{
		text-align:left;
		padding:0 1em;
	}
	
	.support > div > div {
		margin-top:30px;
	}
	
	.supportBg{
		content:'';
		display:flex;
		align-items:center;
		width:100%;
		height:100%;
		position:absolute;
		top:10%;
		left:0;
		z-index:-1;
	}
	
	.supportBg span{
		width:100%;
		height:100%;
		border:#faf7f2 5px solid;
		border-radius:20px;
	}
	
	.products-cate{
		width:100%;
	}
	
	.products-cate a{
		margin-bottom:2em;
	}

	
}
	
@media screen and (max-width:512px){
	
	.brand {
		font-size:14px;
	}	
	
	.brandTop div p {
		font-size:25px;
		letter-spacing:0;
	}
	
	.brand-read {
		font-size:24px;
	}	
	
	
	.brand-read span{
		font-size:20px;
		text-align:left;
		letter-spacing: .125em;
		font-weight:400;
	}
	

}




/***************************

	naturamoon  x dydo
	
****************************/
	.dydo h2 {
		color:#f57491;
		border-top:#f57491 1px solid;
		border-bottom:#f57491 1px solid;
		max-width:1000px;
		margin:0 auto;
		padding:15px 0!important;
	}

	.dydo figure {
		width:100%;
		padding:0;
		margin:0;
	}

	.dydo section > div {
		margin:0 1em;
	}
	
	.dydo section > div > div{
		max-width:1000px;
		margin:0 auto;
		padding: 0 1em;
	}
	
	
	.shadow {
		box-shadow: 0px 0px 12px -7px #333!important;
	}
	
	.kadomaru {
		border-radius:20px!important;
	}
	
	
	.dydo p {
		text-align:left;
		padding:0 1em;
	}

	
	.dydo_read h3 {
		color:#000;
		max-width:1200px;
		margin:0 auto;
		border-top:#000 1px solid;
		border-bottom:#000 1px solid;
	}	
	
	.dydo_read figure {
		max-width:1000px;
		margin:0 auto;
		padding:1em;
	}
	
	.dydo_point ul li {
		background:#fff;
		padding:1em;		
	}
	
	.merit1 picture > * {
		max-width:260px;
	}
	
	.merit1 ul {
		padding:1em;
	}
	
	.merit1 ul li{
		margin-bottom:1em;
		text-align:left;
		border-radius:10px;
	}
	
	.merit1 ul li{
		position:relative;
		margin-bottom:3em;
		text-align:left;
	}
	
	.merit1 ul li div {
		position:absolute;
		top:-35px;
		left:-35px;
		width:100%;
	}
	
	.dydo_point > div ul li div span {
		display:flex;
		justify-content: center;
		align-items:flex-end;
		color:#fff;
		font-weight:500;
		font-family:"Zen Maru Gothic", sans-serif;
		font-size:30px;
		line-height:1.8;
		width:60px;
		height:60px;
		background:#f57491;
		border-radius:50%;
		letter-spacing:1px;		
	}
	
	.dydo_point > div ul li div span::before {
		content:'POINT';
		font-size:10px;
		position:absolute;
		top:5px;
		left:13px;
		width:100%;
		text-align:left;
	}
	
	.dydo_point > div ul li strong {
		display:block;
		margin-bottom:.5em;
		color:#f57491;
		font-weight:700;
		font-size:20px;
	}
	
	.problemCheck {
		padding:1em;
		max-width:700px!important;
		margin:0 auto;
	}	
	
	.problemCheck p {
		font-size:30px;
		font-weight:500;
		text-align:center;
	}
	
	.problemCheck ul {
		display:block;
		margin:0 auto;
		padding:2em 5em 2em 1em;
		background:url("https://naturamoon.jp/img/dydo/dydo_03.jpg") no-repeat;
		background-size:contain;
		background-position:right;	
	}
	
	.problemCheck ul li {
		font-size:20px;
		font-weight:700;
	}
	
	.problemCheck ul li{
		position:relative;
		text-align:left;
		padding-left:2em;
		margin-bottom:1em;
	}
	
	.problemCheck ul li::before {
		content:'';
		position:absolute;
		top:4px;
		left:0;
		width:1.5em;
		height:1.5em;
		background: url("https://naturamoon.jp/img/dydo/dydo-check.png");
		background-size:cover;
	}
	
	
	.install li {
		padding:1em 0;
		background:#fff;
	}
	
	.install strong {
		color:#f57491;
		font-weight:700;
		margin-bottom:.5em;
		font-size:20px;
	}
	
	.install p {
		padding:0;
		text-align:center;
		letter-spacing:0;
	}
	
	.install li figure {
		max-width:200px;
		margin:0 auto;
	}
	
	.install li div {
		text-align:left;
		padding:1em;
	}
	
	.usage-flow {
		display:block!important;
		margin:0 auto!important;
		padding:1em 0!important;
	}
	
	.usage-flow > h4 {
		font-size:22px;
		font-weight:700;
	}
	
	.usage-flow div {
		position:relative;
		display:flex;
		justify-content: flex-start;
		align-items:center;
		width:100%!important;
		max-width:860px;
		margin:0 auto!important;
		line-height:1.5;
		padding:1em;
	}
	
	.usage-flow div span {
		position:absolute;
		top:40px;
		left:auto;
		display:flex;
		align-items:center;
		justify-content: center;
		width:50px;
		height:50px;
		border-radius:25px;
		background:#8d6449;
		font-weight:700;
		color:#fff;
		font-size:22px;
	}
	
	
	.usage-flow div figure{
		margin:0 1em;
		padding-left:60px;
		width:30%;
	}
	
	.usage-flow div figure img {
		width:100px;
	}
	
	.usage-flow div p {
		font-size:16px;
		width:70%;
	}
	
	.usage-flow div p strong {
		display:block;
		font-weight:700;
		margin-bottom:.3em;
		font-size:22px;
		color:#8d6449;
	}
	
	.dydo-contact a {
		position:relative;
		display:block;
		background:#f8b500;
		color:#fff;
		text-align:center;
		border-radius:10px;
	}
	
	.dydo-contact a p {
		width:100%;
		padding:1em 0;
		text-align:center;
		font-size:14px;
	}
	
	.dydo-contact a strong {
		display:block;
		font-weight:700;
		font-size:22px;
	}
	
	.dydo-product {
		padding:1em!important;
	}

	.dydo-product a{
		display:block;
		width:100%;
		background:#fff;
	}
	
	.dydo-product a figure {
		margin:0;
		width:100%;
	}
	
	.dydo-product a figure img {
		object-fit: cover;
		height:100%!important;
	}

	.dydo-product a div{
		padding:1em;
	}

	.dydo-product h4 {
		font-size:20px;
		font-weight:700;
		line-height:1.6;
	}

	.dydo-product span {
		text-align:left;
	}


	
@media screen and (min-width:769px){	
	.merit1{
		display:flex;
		justify-content: space-between;
		align-items: center;
		max-width:1200px;
		margin:0 auto;
	}

	
	.merit1 picture {
		width:40%;
	}

	.merit1 ul {
		width:59%;
	}
	
	.merit2 ul {
		display:flex;
		justify-content: space-between;
		max-width:1200px;
		margin:0 auto;
	}
	
	.merit2 ul li{
		width:32%;
	}	
	
	.problemCheck ul {
		padding:2em 5em 2em 1em;
	}
	
	
	.install strong {
		display:block;
		text-align:center;
	}
	
	.dydo-product a{
		display:flex;	
	}
	
	
	.dydo-product a figure {
		width:40%;
	}

	.dydo-product a div{
		width:60%;
		text-align:left;
		padding:1em;
	}
	
	
	.dydo-contact {
		display:flex;
		justify-content: space-around;
	}
	
	.dydo-contact a {
		width:45%;
	}

}
	
@media screen and (max-width:768px){

	.dydo p {
		text-align:left;
	}
	
	.merit1 ul li div {
		top:10px;
		left:10px;
		width:auto;
	}
	
	.merit1 ul li div span {
		margin:0 auto;
	}

	.dydo_point > div.merit2 ul {
		padding:1em;
	}	
	
	.dydo_point > div.merit2 ul li {
		max-width:800px;
		margin:0 auto;
		margin-bottom:10px;
	}
	
	.dydo_point > div.merit2 ul li figure {
		width:30%;
	}
	
	.dydo_point > div.merit2 ul li div {
		text-align:left;
		width:68%;
	}
	
	
	.problemCheck ul {
		padding:2em 8em 2em 1em;
	}
	
	.merit1 ul{
		padding: 4em 1em 1em;
	}
	
	.merit1 ul li strong , .merit1 ul li p {
		padding-left:70px;
	}
	
	.install li {
		display:flex;
		align-items:center;
		padding:.5em;
		margin-bottom:.5em;
	}
	
	.install li p {
		padding:0!important;
	}
	
	
	.install li figure {
		width:25%;
	}
	
	.install li div {
		width:75%;
	}
	
	.usage-flow div figure{
		padding-left:0;
	}
	
	
	.usage-flow div span {
		top:20px;
		left:auto;
	}
	
	.usage-flow div p strong {
		font-size:16px;
	}
	
	.usage-flow div p {
		padding:0 0 0 1em;
		font-size:14px;
	}
	

	.dydo-product .dydo-price {
		text-align:center;
	}
	
	.dydo-contact a {
		margin-bottom:.5em;
	}
	
}
	
@media screen and (max-width:480px){

	.problemCheck p {
		font-size:18px;
	}	
	
	.problemCheck ul {
		background-size:26%;
		background-position:right bottom;
	}
	
	.problemCheck ul li {
		font-size:14px;
	}
	
	.dydo_point > div ul li strong {
		font-size:16px;
	}
	
	.usage-flow div span {
		width:40px;
		height:40px;
	}
		
}