@charset "UTF-8";

/*for_family_box
---------------------------------------------------------*/
.for_family_box{
	border: solid 4px #e6e6e6;
	padding: 90px 4% 70px;
	box-sizing: border-box;
}
.for_family_box .inbox{
	max-width: 1060px;
	margin: 0 auto;
}
.for_family_box .bdr > li{
	padding-bottom: 60px;
	margin-bottom: 60px;
	border-bottom: 1px solid #ccc;
}
.for_family_box .bdr > li:last-child{
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: none;
}
.for_family_box .med_flt .img_r{
	max-width: 340px;
	width: 33%;
	position: relative;
	z-index: 1;
}
.for_family_box .med_flt .img_r::before{
	position: absolute;
	display: block;
	 content: "";
	background: url(../images/kids/abs1.svg) no-repeat right top;
	background-size: 100% auto;
	width: 40.3%;
	max-width: 137px;
	height:137px;
	top: 0;
  	right: 0;
	transform: translate(19%,-19%);
}
.for_family_box .med_flt .txt_l{
	max-width: 660px;
	width: 63%;
}
.for_family_box .med_flt h3{
	color: #dddddd;
	letter-spacing: 0.08em;
	line-height: 1.1em;
	margin-bottom: 0.2em;
}
.for_family_box .img_list{
	display: flex;
	font-size:min(100%,1.7vw);
	letter-spacing: 0.13em;
	line-height: 1.7em;
	text-align:center;
}
.for_family_box .img_list > li{
	width: 31%;
	margin-right: 3.5%;
	margin-top: 40px;
}
.for_family_box .img_list > li:nth-child(3n){
	margin-right: 0;
}
.for_family_box .img_list > li:nth-child(-n + 3){
	margin-top: 0;
}
.for_family_box .img_list > li div{
	max-width: 326px;
	margin: 0 auto 1.4em;
	text-align: center;
	position: relative;
	z-index: 1;
}
.for_family_box .img_list > li:first-child div::before{
	position: absolute;
	content: "";
	background: url("../images/kids/abs_illust_l.svg") no-repeat left bottom;
	background-size: 100% auto;
	max-width: 101px;
	width: 31%;
	height: 101px;
	left: 0;
	bottom: 0;
	transform: translate(-38%,22%);
	z-index: 2;
}
.for_family_box .img_list > li:last-child div::before{
	position: absolute;
	content: "";
	background: url("../images/kids/abs_illust_r.svg") no-repeat right bottom;
	background-size: 100% auto;
	max-width: 101px;
	width: 31%;
	height: 101px;
	right: 0;
	bottom: 0;
	transform: translate(32%,22%);
	z-index: 2;
}
.for_family_box .img_list > li p span{
	font-size:137.5%;
	letter-spacing: 0.13em;
	line-height: 1.7em;
	display: block;
}
/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
.for_family_box{
	padding: 8% 4% 6%;
}
.for_family_box .bdr > li{
	padding-bottom: 6%;
	margin-bottom:  6%;
}
.for_family_box .med_flt .img_r {
	margin-left: 4%;
	margin-bottom: 1em;
}
.for_family_box .med_flt .txt_l {
	max-width: 100%;
	width: 100%;
}
.for_family_box .img_list > li{
	margin-top: 4%;
}
.for_family_box .img_list > li:first-child div::before{
	transform: translate(-32%,22%);
}
.for_family_box .img_list > li:last-child div::before{
	transform: translate(26%,22%);
}
.for_family_box .img_list > li p{
	letter-spacing:0.05em;
	line-height: 1.6em;
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.for_family_box{
	padding: 10% 5% 9%;
}
.for_family_box .inbox{
	max-width: 100%;
}
.for_family_box .bdr > li{
	padding-bottom: 8%;
	margin-bottom: 8%;
}
.for_family_box .med_flt .img_r{
	width: 70%;
}
.for_family_box .med_flt .txt_l{
	max-width: 100%;
	width: 100%;
}
.for_family_box .med_flt h3{
	font-size: 285%;
    letter-spacing: 0.05em;
	text-align: center;
	margin-bottom: 12%;
}
.for_family_box .img_list{
	display: block;
	font-size:90%;
	letter-spacing: 0.1em;
}
.for_family_box .img_list > li{
	width: 100%;
	margin-right: 0;
	margin-top: 6%!important;
}
.for_family_box .img_list > li:nth-child(-n + 1){
	margin-top: 0!important;
}
.for_family_box .img_list > li div{
	width: 60%;
	margin: 0 auto 4%;
	text-align: center;
}
.for_family_box .img_list > li:first-child div::before{
	width: 40%;
	transform: translate(-40%,12%);
}
.for_family_box .img_list > li:last-child div::before{
	width: 40%;
	transform: translate(34%,12%);
}
.for_family_box .img_list > li p span{
	letter-spacing: 0.1em;
}
}



/*med_box1
---------------------------------------------------------*/
.med_box1{
	background-color: #fff4f0;
}
.med_box1 .med_flt .txt_l{
	max-width: 738px;
	width: 70%;
}
.med_box1 .med_flt .img_r{
	max-width: 285px;
	width: 27%;
}
.med_box1 .med_flt .img_r.deco::before{
	background-image: url(../images/kids/abs2.svg) ;
	width: 48.1%;
	max-width: 137px;
	height:137px;
}
/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
.med_box1 .med_flt .txt_l{
	max-width: 100%;
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.med_box1 .med_flt .txt_l{
	max-width: 100%;
}
.med_box1 .med_flt .img_r{
	width: 70%;
}
}