@charset "UTF-8";

/*----------------------------------------------------*/ 
/* structure
-----------------------------------------------------*/ 

#contents {
	width: auto;
	margin: 0;
	padding: 0;
}

/*----------------------------------------------------*/ 
/* vi
-----------------------------------------------------*/ 

#vi {
	background: #a6d4cf;
}

#vi li {
	width: 800px;
	margin: 0 10px;
	border-radius: 25px;
	overflow: hidden;
}

@media only screen and (max-width: 767px) {

#vi {
	padding-bottom: 38px;
}

#vi li {
	width: 90vw;
	margin: 0 5px;
	border-radius: 10px;
}
	
}




/*----------------------------------------------------*/ 
/* svg
-----------------------------------------------------*/ 
	.svg_bg {
 	width: 100%;
 	position: absolute;
 	top: 0;
 	left: 0;
 	z-index: -1;
 	overflow: hidden;
}

/*----------------------------------------------------*/ 
/* details
-----------------------------------------------------*/ 

.details {
	display: flex;
}

.details > * {
	width: 310px;
	position: relative;
	border-radius: 30px;
	padding: 115px 20px 85px;
	color: #fff;
	box-sizing: border-box;
	margin-left: 30px;
}

.details > *:first-child {
	margin-left: 0;
}

.details h3 {
	position: absolute;
	top: -40px;
	left: -10px;
	z-index: 1;
}

.details .lead {
	padding-top: 20px;
	background: url(/kids/lib/img/top/line_dotted.png) repeat-x;
	line-height: 1.6;
}

.details .btn {
	position: absolute;
	width: 100%;
	bottom: 30px;
	left: 0;
	text-align: center;
}

@media only screen and (max-width: 767px) {

.details {
	display: block;
	padding: 0 20px;
}

.details > * {
	width: auto;
	border-radius: 15px;
	padding: 65px 10px 20px;
	margin: 0 0 35px;
}
	
.details > *:last-child {
	margin: 0;
}

.details h3 {
	top: -25px;
	left: -5px;
}

.details h3 img {
	width: auto;
	height: 85px;
}
	
.details .lead {
	padding-top: 10px;
	background-size: 4px 2px;
	font-size: 1.3rem;
}

.details .btn {
	position: static;
	margin-top: 15px;
}
	
.details .btn img {
	width: 135px;
}
	
}

/*----------------------------------------------------*/ 
/* message
-----------------------------------------------------*/ 

#message {
	position: relative;
	background: #fdfbdc;
	height: 600px;
}

#message .svg_bg {
	height: 50px;
	top: -50px;
	z-index: 1;
}

#message .message {
	width: 1000px;
	margin: 0 auto;
	position: relative;
	padding-top: 40px;
}

#message h2 {
	margin-bottom: 20px;
}

#message .msgbox {
	width: 535px;
	position: relative;
}

#message .msgbox .face {
	position: absolute;
	right: 0;
	top: 40px;
}

#message p {
	width: 379px;
	line-height: 2;
}

#message .animal {
	position: absolute;
	top: -163px;
	left: -85px;
	z-index: 2;
}

#message .photo {
	position: absolute;
	top: -30px;
	right: -120px;
	z-index: 2;
}

@media only screen and (max-width: 767px) {

#message {
	height: auto;
	padding-bottom: 60px;
}

#message .svg_bg {
	height: 25px;
	top: -25px;
}

#message .message {
	width: auto;
	padding: 45px 20px 0;
}

#message .message:after {
	content: "";
	clear: both;
	display: block;
}

#message h2 {
	margin-bottom: 10px;
}

#message h2 img {
	width: 100px;
}

#message .msgbox {
	width: auto;
}
	
#message .msgbox p {
	width: auto;
}
	
#message .msgbox p:after {
	content: "";
	display: block;
	clear: both;
}

#message .msgbox .face {
	width: 100px;
	position: static;
	float: right;
	margin-right: -15px;
}
	
#message p {
	line-height: 1.8;
	font-size: 1.2rem;
}

#message .animal {
	top: -33px;
	left: 5px;
}

#message .animal img {
	width: 110px;
}

#message .photo {
	position: relative;
	margin: -100px -20px 0 0;
	float: right;
	width: 162px;
	z-index: 2;
	top: auto;
	right: auto;
}

}

/*----------------------------------------------------*/ 
/* reason
-----------------------------------------------------*/ 

#reason {
	position: relative;
	background: #fff;
	padding-bottom: 200px;
}

#reason .svg_bg {
	height: 100px;
	top: -100px;
	z-index: 1;
}

#reason .reason {
	width: 1000px;
	margin: 0 auto;
	position: relative;
	padding-top: 95px;
}

#reason h2 {
	position: absolute;
	top: -210px;
	left: 0;
	z-index: 2;
}

#reason .forest {
	position: absolute;
	top: -120px;
	right: -100px;
	z-index: 2;
}

#reason .details > * {
	background: #fdb19d;
}

@media only screen and (max-width: 767px) {

#reason {
	padding-bottom: 30px;
}

#reason .svg_bg {
	height: 50px;
	top: -50px;
}

#reason .reason {
	width: auto;
	margin: 0 auto;
	position: relative;
	padding-top: 0;
}

#reason h2 {
	position: relative;
	top: -60px;
	left: 0;
}

#reason .forest {
	display: none;
}

#reason .details {
	margin-top: -20px;
}

#reason .details > * {
	background: #fdb19d;
}

}
/*----------------------------------------------------*/ 
/* children
-----------------------------------------------------*/ 

#children {
	position: relative;
	background: #f7efe7;
	padding-bottom: 40px;
}

#children .svg_bg {
	height: 50px;
	top: 0;
	z-index: 1;
}

#children .children {
	width: 1000px;
	margin: 0 auto;
	position: relative;
	padding-top: 185px;
}

#children h2 {
	position: absolute;
	top: -70px;
	left: -20px;
	z-index: 2;
}

#children .forest {
	position: absolute;
	top: -75px;
	right: 5px;
	z-index: 2;
}

#children .details > * {
	background: #fdb97c;
}

@media only screen and (max-width: 767px) {
	
#children {
	padding-bottom: 40px;
}

#children .svg_bg {
	height: 25px;
}

#children .children {
	width: auto;
	padding-top: 0;
}

#children h2 {
	position: relative;
	top: 0;
	left: 0;
	margin: 0 10px 35px;
}

#children .forest {
	display: none;
}

#children .details > * {
	background: #fdb97c;
}	
	
}
/*----------------------------------------------------*/ 
/* mother
-----------------------------------------------------*/ 

#mother {
	position: relative;
	background: #fff;
	padding-bottom: 150px;
}

#mother .svg_bg {
	height: 100px;
	top: 0;
	z-index: 1;
}

#mother .mother {
	width: 1000px;
	margin: 0 auto;
	position: relative;
	padding-top: 315px;
}

#mother h2 {
	position: absolute;
	top: 45px;
	left: 0;
	z-index: 2;
}

#mother .forest {
	position: absolute;
	top: 50px;
	right: 95px;
	z-index: 2;
}

#mother .details > * {
	background: #b4d2dc;
}

@media only screen and (max-width: 767px) {

#mother {
	padding-bottom: 65px;
}

#mother .svg_bg {
	height: 50px;
}

#mother .mother {
	width: auto;
	padding-top: 0;
}

#mother h2 {
	position: relative;
	top: -25px;
	margin: 0 10px 10px;
}

#mother .forest {
	display: none;
}

#mother .details {

}
	
}
/*----------------------------------------------------*/ 
/* form
-----------------------------------------------------*/ 

#form {
	position: relative;
	background: #f7efe7;
	padding-bottom: 160px;
}

#form .svg_bg {
	height: 50px;
	top: -50px;
	z-index: 1;
}

#form .form {
	width: 1000px;
	margin: 0 auto;
	position: relative;
	padding-top: 170px;
}

#form h2 {
	position: absolute;
	top: -100px;
	left: 0;
	z-index: 2;
}

#form .forest {
	position: absolute;
	top: -110px;
	right: 0;
	z-index: 2;
}

#form .details > * {
	background: #fcd156;
	width: 100%;
}

@media only screen and (max-width: 767px) {

#form {
	padding-bottom: 75px;
}

#form .svg_bg {
	height: 25px;
	top: -25px;
}

#form .form {
	width: auto;
	padding-top: 0;
}

#form h2 {
	position: relative;
	top: -50px;
}

#form .forest {
	display: none;
}

#form .details {
	margin-top: -20px;
}

}
/*----------------------------------------------------*/ 
/* blog
-----------------------------------------------------*/ 

#blog {
	position: relative;
	background: #fff;
	padding-bottom: 100px;
}

#blog .svg_bg {
	height: 100px;
	top: -100px;
	z-index: 1;
}

#blog .blog {
	width: 1000px;
	margin: 0 auto;
	position: relative;
	padding-top: 55px;
}

#blog .blogBox {
	box-sizing: border-box;
	position: relative;
	background: #fdfbdc;
	border-radius: 30px;
	padding: 40px 115px 40px 83px;
}

#blog .blogBox:before,
#blog .blogBox:after {
	content: "";
	width: 309px;
	height: 225px;
	position: absolute;
	background-repeat: no-repeat;
}

#blog .blogBox:before {
	background-image: url(/kids/lib/img/top/blog_01.png);
	top: -27px;
	left: -18px;
}

#blog .blogBox:after {
	background-image: url(/kids/lib/img/top/blog_02.png);
	bottom: -27px;
	right: -18px;
}

#blog .blogBox h2 {
	text-align: center;
	margin-bottom: 35px;
}

#blog .blogBox h3 {
	font-size: 1.6rem;
	margin-bottom: 15px;
}

#blog .blogBox .entryBody {
	position: relative;
	z-index: 1;
	overflow: hidden;
}

#blog .blogBox .entryBody .image {
	width: 300px;
	float: left;
	margin-right: 30px;
}

#blog .blogBox .entryBody .image img {
	width: 100%;
}

#blog .blogBox .entryBody .detail {
	overflow: hidden;
}

#blog .blogBox .entryBody .detail .more {
	margin-top: 20px;
	text-align: right;
	font-weight: bold;
}

#blog .blogBox .entryBody .detail .more a {
	text-decoration: underline;
}

#blog .blogBox .btn {
	text-align: center;
	margin-top: 30px;
}

@media only screen and (max-width: 767px) {

#blog {
	padding-bottom: 15px;
}

#blog .svg_bg {
	height: 25px;
	top: -25px;
}

#blog .blog {
	width: auto;
	padding: 30px 20px;
}

#blog .blogBox {
	border-radius: 15px;
	padding: 30px 20px;
}

#blog .blogBox:before,
#blog .blogBox:after {
	width: 155px;
	height: 112px;
	background-size: 155px auto;
}

#blog .blogBox:before {
	top: -15px;
	left: -9px;
}

#blog .blogBox:after {
	bottom: -13px;
	right: -9px;
}

#blog .blogBox h2 {
	margin-bottom: 25px;
}

#blog .blogBox h2 img {
	width: 200px;
}

#blog .blogBox h3 {
	font-size: 1.4rem;
	margin-bottom: 15px;
	text-align: center;
}

#blog .blogBox .entryBody {
	display: block;
}

#blog .blogBox .entryBody .image {
	width: auto;
	text-align: center;
	float: none;
	margin: 0;
}

#blog .blogBox .entryBody .detail {
	margin-top: 10px;
}

#blog .blogBox .entryBody .detail .more {
	margin: 10px 10px 0 0;
}
	
#blog .blogBox .btn {
	margin-top: 10px;
}
	
#blog .blogBox .btn img {
	width: 135px;
}

	
}