@charset "UTF-8";

:root {
	--white:       #ffffff;
	--black:       #000000;
	--green:       #C2CABF;
	--lightgreen:  #E2EADF;
	--gray:        #666666;
	--lightgray:   #F5F5F5;
	--linegray:    #cccccc;
}

html {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 62.5%;
	color: var(--gray);
	scroll-behavior: smooth;
}
#babyzen{
	width: 100%; margin: 0 auto;
	font-size: 14px; line-height: 1.6;
	color: var(--black);
	overflow:hidden;
	position: relative;
}
#babyzen .inner{max-width: 1200px;margin: 0 auto;}
#babyzen section{
	width: 100%; margin: 0 auto;
}
#babyzen img{width: 100%; display: block;}
#babyzen strong{font-weight: bold;}
#babyzen h1{
	font-size: 24px;
	font-weight: normal;
	margin-bottom: 1rem;
	text-align: center;
	border-bottom: none;
}
#babyzen h1 sup{font-size: 40%;}
#babyzen h1 span{font-size: 12px; margin-top:.5rem; display: block;}
#babyzen h2{
	position: relative;
	font-size: 18px;
	margin-bottom: 4rem;
	text-align: center;
}
#babyzen h2:before {
  content: '';
  position: absolute;
  bottom: -15px;
  display: inline-block;
  width: 60px;
  height: 2px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: var(--green);
}
#babyzen p{ margin-bottom: 1rem;}
#babyzen .sp { display: block !important;}
#babyzen .pc { display: none !important;}

/*ボタン*/
#babyzen .btn,
#babyzen a.btn,
#babyzen button.btn {
max-width: 90%; margin: 0 auto 30px;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: var(--white);
	border-radius: 0;
  background-color: var(--gray);
}
#babyzen .btn.bg-orange{background-color: #ed7703;}
#babyzen .col2,
#babyzen .col3,
#babyzen .col4,
#babyzen .col5{
	width: 100%; margin: 0 auto; padding: 0;
	display: flex; 
	justify-content: space-around;
	align-items: stretch;
	flex-wrap: wrap;
	text-align: center;
}
#babyzen .col2 li{width: calc(100% / 2);padding: 0 2%;}
#babyzen .col3 li{width: calc(100% / 2);padding: 0 2%;}
#babyzen .col4 li{width: calc(100% / 2);padding: 0 2%;}
#babyzen .col5 li{width: calc(100% / 3);padding: 0 2%;}
#babyzen .col5 li img{margin-bottom: 1.5rem;}

				@media screen and (min-width: 769px) {
				#babyzen{font-size: 16px;}
				#babyzen h1{font-size: 50px;}
				#babyzen h1 sup{font-size: 50%;}
				#babyzen h1 span{font-size: 16px;margin-top: 1.5rem;}
				#babyzen h2{font-size: 32px; margin-bottom: 4rem;}
				#babyzen .btn,
				#babyzen a.btn,
				#babyzen button.btn {
				max-width: 300px; margin: 0 auto 30px;
				  font-size: 1.6rem;
				  line-height: 1.5;
				  padding: 1rem 4rem;
				}
					#babyzen .col2,
					#babyzen .col3{justify-content: center;}
					#babyzen .col3 li{width: calc(100% / 3);padding: 0 2%;}
					#babyzen .col5{width: 90%;}
					#babyzen .col5 li{width: calc(100% / 5);padding: 0 2%;}
				#babyzen .sp { display: none !important;}
				#babyzen .pc { display: block !important;}
				}

/*メインビジュアル*/
#babyzen .main-visual{
	position: relative;
	text-align: center;
}
#babyzen .main-visual img[src*="logo"]{
	position: absolute;
	top: -40px; left: 0; right: 0;
	display: block; width: 80px;
	margin: 0 auto 1rem;
}
#babyzen .main-visual img[src*="main"]{
	margin-top: 40px;
}
#babyzen .main-txt{padding: 0 2% 2.5%; text-align: center;}
#babyzen .main-txt p{ text-align: left;}
#babyzen .page-nav{
	width: 100%;
	margin: 0 auto 30px;
	padding: 0;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	z-index: 10;
	border-right: 1px solid var(--green);
}
#babyzen .page-nav li{
	width: calc(100% / 4);
	border-left: 1px solid var(--green);
	font-weight: bold;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}
#babyzen .page-nav li a{
	display: block; padding: 5% 15%;
	vertical-align: bottom;
}
			@media screen and (min-width: 769px) {
				/*メインビジュアル*/
				#babyzen .main-visual{
					position: relative;
					text-align: center; z-index: 1;
				}
				#babyzen .main-txt{
					text-align: center;
					padding:0 0 5%;
				}
				#babyzen .main-txt p{text-align: center;}
				#babyzen .main-visual img[src*="logo"]{
					top: -60px; width: 130px;
				}
				#babyzen .main-visual img[src*="main"]{
					margin-top: 60px;
				}
				#babyzen .page-nav{width: 80%; border-right: 2px solid var(--green);}
				#babyzen .page-nav li {border-left: 2px solid var(--green);}
				#babyzen .page-nav li a {padding: 4%;}
			}


/*概要*/
#babyzen #point {padding: 4% 0;}
#babyzen #point img[src*="yoyo_point1.jpg"]{
	max-width: 90px;
	margin: 0 auto 2.5%;
	display: block;
}
#babyzen .point-video-contents > div{
	padding: 10% 8%;
}
#babyzen .point-video-contents video{width: 100%;}
#babyzen .point-video-contents h3,
#babyzen .point-contents-box h3{
	font-size: 32px; margin-bottom: 3rem;
	font-weight: bold; padding: 0;
}
#babyzen .point-contents-box > p{margin-bottom: 3rem;}
#babyzen .point-contents-box:nth-child(even){
	padding: 10% 8%;
}
#babyzen .point-contents .point-item-info,
#babyzen .point-contents .point-support-info{
	display: flex;
	justify-content: flex-start;
	align-items:center;
	padding: 5% 0 0;
}
#babyzen .point-contents .point-item-info div p strong{display: block; font-size: 20px;}
#babyzen .point-contents .point-item-info img{width: 30%; margin-right: 20px;}
#babyzen .point-contents .point-support-info img{width: 30%; margin-left: 20px;}

#babyzen img[src*="illust-"],
#babyzen img[src*="wood"]{display: block; margin: 0 auto; padding: 2.5% 0 0;}
#babyzen img[src*="illust-1"]{width:50%;}
#babyzen img[src*="illust-2"],
#babyzen img[src*="wood"]{width:80%;}

			@media screen and (min-width: 769px) {
				#babyzen .item-contents-wrap{
					width: 90%; margin: 0 auto;
					display: flex;
					justify-content: center;
					align-items: stretch;
				}
				#babyzen #point img[src*="yoyo_point1.jpg"]{
					max-width: 114px;
					margin: 0 auto 2.5%;
				}
				#babyzen .item-contents{
					width:auto;
					padding: 4%; margin: 0 2%;
				}
				#babyzen .point-video-contents {max-width: 1200px; margin: 0 auto;}
				#babyzen .point-video-contents > div{
					padding: 4% 8%;
					margin-bottom: 5%;
					text-align: center;
				}
				#babyzen .point-contents{
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
				
				#babyzen .point-contents:nth-child(even){flex-direction: row-reverse;}
				#babyzen .point-contents .point-contents-box{width: calc(100% / 2);}
				#babyzen .point-contents-box:nth-child(even){padding: 4% 8%;}
				#babyzen .item-list-box.beech img{width: 60%;}
				#babyzen .item-list-box.oak img{width: 80%;}
				#babyzen .item-color-list li{width:47px;}
				#babyzen .color-circle {
				  width:42px;
				  height:42px;
				  line-height:42px;
				}
			}	


/*slick*/
#babyzen .slick-dots li button:before{
	content: '●';
}
#babyzen .slick-prev:before,
#babyzen .slick-prev:after{display: none;}


			@media screen and (min-width: 769px) {
			}


/* spec*/
#babyzen #spec {width: 90%;  padding: 4% 0;}
#babyzen #spec h3{
	font-size: 32px;
	border-bottom: 1px solid var(--gray); padding: .5rem 0;}
#babyzen #spec .spec-contents{margin: 5% auto;}
#babyzen #spec .spec-list{
	width: 100%; margin: 0 auto 5%; padding: 0;
	display: flex; 
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
}
#babyzen #spec .spec-list dt{width: 23%; padding: .5rem 0;}
#babyzen #spec .spec-list dd{width: 77%; padding: .5rem 0;}
				@media screen and (min-width: 769px) {
					#babyzen #spec {width: 100%;}
					#babyzen #spec .spec-contents{
						width: 90%; margin: 5% auto; padding: 0;
						display: flex; 
						justify-content: space-between;
						align-items: flex-start;
						flex-wrap: wrap;
					}
					#babyzen #spec .spec-contents-box{width: calc(100% / 2);}
					#babyzen #spec .spec-list dt{width: 30%; padding: 1rem 0;}
					#babyzen #spec .spec-list dd{width: 70%; padding: 1rem 0;}
				}

/* LINEUP */
#babyzen #lineup{
	padding: 4% 0;
}
#babyzen #lineup img[src*="3style-title.jpg"]{
	display: block; max-width: 60%; margin: 0 auto 5%;
}
#babyzen #lineup .lineup-age-contents,
#babyzen #lineup .age-img-list,
#babyzen #lineup .lineup-item-list{
	display: flex;
	justify-content: space-between;
	align-items: stretch;
}

#babyzen #lineup .lineup-item-list{
	padding: 2%;
	flex-wrap: wrap;
	background-color: var(--lightgreen);
}
#babyzen #lineup .lineup-item-list li{
	width: calc(92% / 2); margin: 2%;
	color: var(--black);
}
#babyzen #lineup .lineup-item-list li img{margin-bottom: 1rem;}
#babyzen #lineup .lineup-item-contents,
#babyzen #lineup .lineup-age-contents{margin-bottom: 5%;}
#babyzen #lineup .lineup-subtit{
	font-weight: bold;
	font-size: 24px;
	color: var(--black);
	margin-bottom: 2.5%;
	text-align: center;
}
#babyzen #lineup h3.lineup-tit img{width: 60%; margin: 0 auto;}
#babyzen #lineup .btn.buy{
	font-size: 20px;
	padding: 2rem 4rem;
	margin-bottom: 15%;
}
#babyzen #lineup .age{
	width: 96%;
	color: var(--black);
	border-radius: 4px;
	padding: .5rem 2%;
	margin: 0 1%;
	text-align: center;
	font-weight: bold;
}
#babyzen #lineup .age-contents-box.age1{width: 66%;}
#babyzen #lineup .age-contents-box.age2{width: 33%;}
#babyzen #lineup .age1 .age{background-color: var(--lightgreen);}
#babyzen #lineup .age2 .age{background-color: var(--green);}
#babyzen #lineup .age-img{width: 100%; margin: 0 auto;}
#babyzen #lineup .age1 .age-img-list div{width: 40%; margin: 0 auto;}
#babyzen #lineup .age-txt{
	padding: 4%;
	color: var(--blue);
	font-weight: bold;
	text-align: center;
}
			@media screen and (min-width: 769px) {
				#babyzen #lineup img[src*="3style-title.jpg"]{
					max-width: 440px; margin-bottom: 2.5%;
				}
				#babyzen #lineup .lineup-item-contents{
					display: flex;
					justify-content: space-between;
					align-items: stretch;
				}
				#babyzen #lineup .lineup-item-img,
				#babyzen #lineup .lineup-item-box{width: 50%;}
				#babyzen #lineup .age-img{width: 80%;}
				#babyzen #lineup .lineup-subtit{
					font-weight: bold;
					font-size: 28px;
					color: var(--black);
					margin-bottom: 2.5%;
					text-align: left;
				}
				#babyzen #lineup h3.lineup-tit{
					position: relative;
					display: inline-block;
					padding: 0 900px 0 0;
					width: 100%;
				}
				#babyzen #lineup h3.lineup-tit img{width: 100%; max-width: 280px;margin: 0;}
				#babyzen #lineup h3.lineup-tit:after {
				  content: '';
				  position: absolute;
				  top: 50%;
				  display: inline-block;
				  width: 900px;
				  height: 2px;
				  background-color: black;
				}
				#babyzen #lineup h3.lineup-tit:after {
				  right: 0;
				}
				#babyzen #lineup .btn.buy{
					font-size: 20px;
					padding: 2rem 4rem;
					margin-bottom: 5%;
				}
			}
			@media screen and (max-width: 480px) {
				#babyzen #lineup .lineup-age-contents{overflow-x: auto;}
				#babyzen #lineup .age-contents-box{margin: 0 1%;}
				#babyzen #lineup .age-contents-box .btn{width: 100%; padding: 2%; }
				
				#babyzen #lineup .age-img,
				#babyzen #lineup .age-img-list div{flex: 0 0 auto;}
				#babyzen #lineup .age1 .age-img-list div{width: 50%;}
				#babyzen #lineup .age-txt{text-align: left;}
			}


/* アクセサリー*/
#babyzen #accessary{
	padding: 4% 0;
}
#babyzen #accessary .col5 li{text-align: left; margin-bottom: 2.5%;position: relative;}
#babyzen #accessary .col5 li a{
	position: absolute;
	width: 100%; height: 100%;
	top: 0;left: 0;right: 0;bottom: 0;
}
#babyzen #accessary .col5 li img{margin-bottom: 1.5rem;}
#babyzen #accessary .col5 li p.a-item-name{font-weight: bold; margin-bottom:1rem;}
#babyzen #accessary .col5 li p.a-item-txt{font-size: 12px;}

			@media screen and (min-width: 769px) {
				#babyzen #accessary .col5 li p.a-item-txt{font-size: 14px;}
			}

#babyzen .yoyo3-contents{background-color: #e4f2e7;}
#babyzen .yoyo3-contents-box{text-align: center; padding: 2%; margin-bottom: 2%;}
#babyzen .yoyo3-contents-box img[src*="yoyo3-logo.png"]{display: block;  margin: 0 auto 2rem; width: 50%;}
			@media screen and (min-width: 769px) {
				#babyzen .yoyo3-contents{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
#babyzen .yoyo3-contents-box{width: 50%; margin-bottom: 0;}
}