mama&kidsmama&kidsmama&kids@charset "UTF-8";
/* CSS Document */

body{
	width: 100%;
	padding: 15px auto;
	margin: 0 auto;
}
.main-visual{
	background-image: url("../img/main_background.jpg");
	background-repeat: no-repeat; 
	background-size: 100%;
	height: auto;
	display:block;
	padding: 0px;		
}

.on-visual{
	padding-top: 5%;
	padding-left: 20%;

}

.main-title{
	width: 35%;
	display: block;	
}


.main-goods{
	margin-top: 3%;
	width: 40%;
	display: block;	
}

.button01{

	width: 25%;
	display: block;
	transform: translateY(-30%);
	margin: 0 auto;
}

.button01:hover{
	opacity: 0.5;
}

.exp-area{
	background-image: url("../img/exp_background.png");
	background-repeat: no-repeat;   
    background-size: 100%;
	width: 70%;
	height: auto;
	display:block;
	padding: 0px;	
	margin: 5% auto 0 auto;

}

.exp-title{
	display: block;
    margin: 0 auto;
	padding-top: 5%;
	width: 20%;
 
}

.exp-txt{
	display: block;
    margin: 3% auto;
	padding-top: 3%;
	width: 70%;
}

.exp-circle{
	display: block;
	width: 90%;
    margin: 0 auto;
	transform: translateY(20%);
}

.mom-care{

	margin: 10% auto 3% auto;
	width: 70%;
	height: auto;
}

.mom-careflex{
 display: flex;

}
.mom-care-flexitem1{
	display: block;
	background-image: url("../img/mom_background_l.png");
	background-repeat: no-repeat;
	 background-size: 90%;
	z-index: 200;
}
.mom-care-flexitem1 #mom-goods{
	width: 100%;
    transform: translate3d(-20%,-40%,0);
}
.mom-care-flexitem2{
	transform: translateX(-25%);
	display: block;
	margin-top: 10%;
    background-image: url("../img/mom_background_r.png");
	background-repeat: no-repeat;
	 background-size: 100%;
	z-index: 100;
}
.mom-care-flexitem2 #mom-txt{
	margin: 20% auto auto 15%;
	width: 70%;
}
.mom-care-flexitem2 #model{
	margin: 10% auto auto 50%;
}
.mom-hititems{
	margin:-12% auto 3% auto;
	width: 70%;
	
}
.mom-hititems-flex{
	margin-top: 5%;
	display: flex;
    justify-content:space-between;
	width: 100%;
	
}


.baby-care{
	margin: 10% auto 0 auto;
	width: 70%;
   
}
.baby-careflex{
	margin-top: 3%;
	display: flex;
}
.baby-careflexitem1{
	margin-top: 10%;
	display: block;
	background-image: url("../img/babycare_background_l.png");
	background-repeat: no-repeat;
	background-size: 100%;
	z-index: 100;
	transform: translateX(3%);
}

.baby-careflexitem1 #baby{
	margin-top: 20%;
	transform: translateX(-8%);
}

.baby-careflexitem1 #baby-txt{
	margin: 20% auto auto 15%;
	width: 70%;
}

.baby-careflexitem2{
	display: block;
	background-image: url("../img/babycare_background_r.png");
	background-repeat: no-repeat;
	background-size: 100%;
	padding-bottom: 10%;
    z-index: 200;
}

.baby-careflexitem2 #baby-goods{
	width: 70%;
	margin: 7% auto;
	transform: translateX(20%);

}

.baby_item{
	margin:0 auto 6%;
	width: 70%;

}

.babyitem-flex{
	margin: 3% auto;
	display: flex;
	width: 100%;
	justify-content: space-between;
}

.green_exp_txt{
	display: block;
	margin: 0 auto;
}

.feature{
	margin: 5% auto;
	width: 70%;
	
}
.feature_flex{
	display: flex;
	justify-content:center;
	
}

.feature_flexitem{
	margin: 1%;

}

.mamakids{
	width: 70%;
	margin: 0 auto 1%;
}

.img_center img{
	display: block;
	margin: 0 auto;
}

.button02{
	width: 35%;
	display: block;
	margin: 0 auto;
}

.button02:hover{
	opacity: 0.5;
}
.footer{
	background-image: url("../img/footer_background.png");
	background-repeat: no-repeat;
	background-size: 100%;
   background-position: bottom;
}

.footer_flex{
	display: flex;
	justify-content: center;
	vertical-align: middle;
    padding-top: 12%;
	padding-bottom: 1%;
}

.footer_flexitem{
	display:block;
	padding-left: 3%;
	padding-right: 3%;
	
}

.logo-group {
        margin: 4% auto;
        display: flex;
	justify-content: center;
	width: 256px;
}

.logo-item img {
	cursor: pointer;
	text-decoration: none;
	width: 80px;
	padding: 19%;
	
}
.logo-xiaohongshu img {
	width: 85px;
	padding: 17%;
	
}

@media only screen and (min-width:640px) and (max-width:1023px) {
/*tablet用のcssを記述*/
	
	img{
		width: 100%;
		overflow: hidden;
	}
	.button01{
		width: 40%;
	}
	.main-visual{
	background-image: url(../img/main_background.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    height: auto;
    display: block;
    padding: 0px;
	}
	.mom-hititems{
		width: 90%;
	}
	.mom-hititems img,.baby_item img,.mamakids img{
		width: 48%!important;
	}
	.green_exp_txt{
		width: 75%!important;
	}
	.mom-hititems-flex {
		display: flex;
	}
	.mom-hititems-flex img{
		width: 50%!important;
	}
	.baby_item{
		width: 90%;
	}
	.feature_flex{
		display: block;
	}
	
	.feature_flex{
		width: 100%;
	}
	.button02{
		width: 90%;
	}
	.mamakids{
		width: 90%;
	}
	
	.mamakids .img_center img{
		width: 100%!important;
	}
	.logo-item img{
		width: 70px;
	}
	
	.baby_item img.green_exp_txt{
		width: 100%!important;
		
	}
	
}