@charset "UTF-8";

/*box1
---------------------------------------------------------*/
.box1 .family_box{
	background: #f7ecb7;
	padding: 75px 4% 80px;
	position: relative;
	z-index: 1;
}
.box1 .family_box::before{
	position: absolute;
	content: "";
	background: url("../images/kids/family_box_abs1.png") no-repeat left top;
	background-size: 100% auto;
	max-width: 325px;
	width: 32%;
	height: 178px;
	left: 0;
	top:0;
	z-index: -1;
	border-radius: 50px 0 0 0;
}
.box1 .family_box::after{
	position: absolute;
	content: "";
	background: url("../images/kids/family_box_abs2.svg") no-repeat right top;
	background-size: 100% auto;
	width: 136px;
	height: 136px;
	right: 3%;
	top:0;
	transform: translateY(-29%);
	z-index: 1;
}
.box1 .family_box .inbox{
	max-width: 1054px;
	margin: 0 auto;
}
.box1 .family_box .tit{
	font-size: 206%;
	letter-spacing: 0.15em;
	line-height: 1.5em;
	text-align: center;
	margin-bottom: 40px;
}
.box1 .family_box .txt{
	text-align: center;
	line-height: 2em;
	letter-spacing: 0.1em;
	margin-bottom: 45px;
}
.box1 .family_box ul{
    display: flex;
    justify-content: space-between;
}
.box1 .family_box ul li{
	max-width: 333px;
	width: 32%;
	font-size: 136%;
	letter-spacing: 0.1em;
	line-height: 1.5em;
	text-align: center;
}
.box1 .family_box ul li div{
	max-width: 333px;
	margin: 0 auto 0.25em;
 	 text-align: center;
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 1100px) {
.box1 .family_box::after{
	width: 12.4vw;
	height: 12.4vw;
	transform: translateY(-40%);
}
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
.box1 .family_box{
	padding: 6.5% 4% 7%;
}
.box1 .family_box::before{
	border-radius: 5vw 0 0 0;
}
.box1 .family_box .tit{
	font-size: 186%;
	letter-spacing: 0.1em;
	margin-bottom: 4%;
}
.box1 .family_box .txt{
	line-height: 1.8em;
	margin-bottom: 4.5%;
}
.box1 .family_box ul li{
	font-size: 126%;
}
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.box1 .family_box{
	padding: 10% 5% 8%;
}
.box1 .family_box::before{
	width: 50%;
	border-radius: 5vw 0 0 0;
}
.box1 .family_box::after{
	width: 18vw;
	height: 18vw;
	transform: translateY(-45%);
}
.box1 .family_box .inbox{
	max-width: 100%;
	margin: 0 auto;
}
.box1 .family_box .tit{
	font-size: 160%;
	letter-spacing: 0.05em;
	line-height: 1.4em;
	margin-bottom: 6%;
}
.box1 .family_box .txt{
	line-height: 1.8em;
	letter-spacing: 0.05em;
	margin-bottom: 6%;
}
.box1 .family_box ul{
    display: block;
}
.box1 .family_box ul li{
	max-width: 100%;
	width:100%;
	font-size: 126%;
	letter-spacing: 0.05em;
	line-height: 1.4em;
	margin-top: 3.5%;
}
.box1 .family_box ul li:first-child{
	margin-top: 0;
}
.box1 .family_box ul li div{
	width: 80%;
	margin: 0 auto;
 	text-align: center;
}
}