@charset "UTF-8";

/*----------------------------------------------------*/ 
/* margin
-----------------------------------------------------*/ 

.mb0 {	margin-bottom:0 !important;}
.mb10 {	margin-bottom:10px !important;}
.mb20 {	margin-bottom:20px !important;}
.mb30 {	margin-bottom:30px !important;}
.mb40 {	margin-bottom:40px !important;}
.mb50 {	margin-bottom:50px !important;}
.mb60 {	margin-bottom:60px !important;}
.mb70 {	margin-bottom:70px !important;}
.mb80 {	margin-bottom:80px !important;}
.mb90 {	margin-bottom:90px !important;}
.mb100 {	margin-bottom:100px !important;}

.mt10 {	margin-top:10px !important;}
.mt20 {	margin-top:20px !important;}
.mt30 {	margin-top:30px !important;}
.mt40 {	margin-top:40px !important;}
.mt50 {	margin-top:50px !important;}
.mt60 {	margin-top:60px !important;}
.mt70 {	margin-top:70px !important;}
.mt80 {	margin-top:80px !important;}
.mt90 {	margin-top:90px !important;}
.mt100 {	margin-top:100px !important;}

/*----------------------------------------------------*/ 
/* text
-----------------------------------------------------*/ 

p {
	line-height: 1.8;
}

.txt_bold {
	font-weight: bold;
}

.txt_center {
	text-align: center;
}

.txt_right {
	text-align: right;
}

.red {
	color: #ff0000;
}

.redBold {
	color: #ff0000;
	font-weight: bold;
}

/*----------------------------------------------------*/ 
/* img
-----------------------------------------------------*/ 

.img_full {
	margin-bottom: 20px;
}

.img_full img {
	width: 100%;
}

/*----------------------------------------------------*/ 
/* link
-----------------------------------------------------*/ 

a.underline {
	text-decoration: underline;
}

.linklist01 li {
	margin-bottom: 5px;
}

.linklist01 li a {
	display: inline-block;
	padding-left: 30px;
	position: relative;
	color: #55a2f9;
	text-decoration: underline;
}

.linklist01 li a:before {
	content: "";
	width: 18px;
	height: 18px;
	background: url(/kids/lib/img/cmn/icon_arrow_01.png) no-repeat;
	position: absolute;
	left: 0;
	top: 2px;
}

/*----------------------------------------------------*/ 
/* btn
-----------------------------------------------------*/ 

input[type=submit],
a[class^="btn"],
*[class^="btn"] a{
	cursor: pointer;
	-webkit-appearance: none;
	transition: all .3s;
}

input[type=submit]:hover,
a[class^="btn"]:hover,
*[class^="btn"]:hover a {
	text-decoration: none !important;
	opacity: .7;
}

/*----------------------------------------------------*/ 
/* vi
-----------------------------------------------------*/ 

#vi {
	background: #a6d4cf;
	text-align: center;
}

#vi img {
	border-radius: 30px;
}

@media only screen and (max-width: 767px) {

#vi {
	padding: 0 15px 15px;
}

#vi img {
	border-radius: 15px;
}
	
}
/*----------------------------------------------------*/ 
/* svg
-----------------------------------------------------*/ 
	.svg_bg {
 	width: 100%;
 	position: absolute;
 	top: 0;
 	left: 0;
 	z-index: -1;
 	overflow: hidden;
}

@media only screen and (max-width: 767px) {

	article > section {
		margin: 0 15px;
	}
	
}
/*----------------------------------------------------*/ 
/* column
-----------------------------------------------------*/ 

.column {
	width: 1000px;
	margin: 0 auto;
}

.column_title {
	background: #fff;
	padding: 18px 0;
}

.column_title .column {
	display: flex;
	align-items: center;
}

.column_title h2 {
	margin-right: 70px;
	position: relative;
}

.column_title h2 span {
	position: absolute;
	top: 0;
	left: 0;
	visibility: hidden;
}

.column_title .lead {
	font-size: 2.0rem;
	font-weight: bold;
}

.column > section {
	margin-top: 60px;
	position: relative;
	min-height: 350px;
}

.column > section.photoL {
	padding-left: 400px;
}

.column h3 {
	margin-bottom: 25px;
	position: relative;
}

.column h3 span,
.h_cat span {
	position: absolute;
	visibility: hidden;
	top: 0;
	left: 0;
}

.column .photo {
	position: absolute;
}

.column .photo.right {
	right: 0;
	top: 0;
}

.column .photo.left {
	left: 0;
	top: 0;
}

@media only screen and (max-width: 767px) {

.column {
	width: auto;
}

.column_title {
	background: #fff;
	padding: 18px 0;
	margin: 0 -15px;
}

.column_title .column {
	display: block;
	text-align: center;
	padding: 0;
}

.column_title h2 {
	margin: 0 0 10px 0;
}

.column_title h2 img {
	display: none;
}

.column_title h2 span {
	position: relative;
	visibility: visible;
	display: inline-block;
	padding: 0 30px;
	font-size: 1.5rem;
}
	
.column_title h2 span:before,
.column_title h2 span:after {
	content: "";
	width: 19px;
	height: 21px;
	background: url(/kids/lib/img/cmn/sp/icon_leaf_02.png) no-repeat;
	background-size: 19px auto;
	position: absolute;
	left: 0;
	top: -2px;
}

.column_title h2 span:after {
	left: auto;
	right: 0;
	transform: scale(-1,1);
}

.column_title .lead {
	font-size: 1.2rem;
}

.column > section {
	margin-top: 15px;
	min-height: 0;
	overflow: hidden;
}

.column > section.photoL {
	padding-left: 0;
}

.column h3,
.h_cat {
	margin-bottom: 15px;
	text-align: center;
	border-radius: 24px;
	background: #fdb97c;
	padding: 5px 0;
}

.column h3 img,
.h_cat img {
	display: none;
}

.column h3 span,
.h_cat span {
	position: static;
	color: #fff;
	font-size: 1.5rem;
	visibility: visible;
}

.column .photo {
	position: static;
	width: 45vw;
}

.column .photo.right,
.column .photo.left {
	float: right;
	padding: 0 0 0 10px;
}

	
}

/*----------------------------------------------------*/ 
/* heading
-----------------------------------------------------*/ 

.h_leaf {
	font-size: 1.8rem;
	font-weight: bold;
	padding-left: 60px;
	margin-bottom: 25px;
	position: relative;
}

.h_leaf:before {
	content: "";
	width: 46px;
	height: 28px;
	background: url(/kids/lib/img/cmn/icon_leaf.png) no-repeat;
	position: absolute;
	left: 0;
	top: 1px;
}

.h_box {
	margin-bottom: 15px;
}

.h_box span {
	display: inline-block;
	background: #fff;
	border-radius: 14px;
	box-sizing: border-box;
	height: 28px;
	padding: 5px 18px 0 18px;
}

@media only screen and (max-width: 767px) {

.h_leaf {
	font-size: 1.4rem;
	padding-left: 45px;
	margin-bottom: 15px;
}

.h_leaf:before {
	content: "";
	width: 36px;
	height: 28px;
	background-size: 36px auto;
	top: 1px;
}

}
