@charset "UTF-8";

/* m_img
---------------------------------------------------------*/
.contentpage .m_img_area .m_img{
    background-image: url("../images/kids/m_img@2x.jpg");}


/* kids_box1
---------------------------------------------------------*/
.kids_box1{
    position: relative;
    background: #F5AF2E;
    border-radius:200px 200px 0 0;
    padding: 175px 4% 120px;
    box-sizing: border-box;
    text-align: center;
}
.kids_box1::before{
    position: absolute;
    display: block;
    content: "";
    background: url("../images/kids/abs01@2x.png")no-repeat top center;
    background-size: 100% auto;
    width: 226px;
    height: 141px;
    top:-20px;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.kids_box1 .kids_box1_index{
    margin-bottom: 85px;
    color: #fff;
}
.kids_box1 .kids_box1_index .ft_min{
    font-size: min(200%,3.2vw);
    letter-spacing: 0.05em;
    line-height: 1.5em;
}
.kids_box1 .kids_box1_index .ft_ad,
.kids_box2 .kids_box2_index1{
    display: inline-block;
    font-size: min(120%,2vw);
    letter-spacing: 0.1em;
    line-height: 1em;
}

.kids_box1 .kids_box1_index .ft_ad{
    margin-top: 1.5em;
    padding-bottom: 1.5em;
    background: url("../images/kids/abs02@2x.png")no-repeat bottom left;
    background-size: 100% auto;
}
.kids_box1 ul{
    position: relative;
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: space-between;
}
.kids_box1 ul::before{
    position: absolute;
    display: block;
    content: "";
    background: url("../images/kids/abs07@2x.png")no-repeat top right;
    background-size: 100% auto;
    width:25%;
    height: 300px;
    top:-170px;
    right: 0;
}
.kids_box1 ul::after{
    position: absolute;
    display: block;
    content: "";
    background: url("../images/kids/abs07@2x.png")no-repeat bottom left;
    background-size: 100% auto;
    width:25%;
    height: 300px;
    bottom:-135px;
    left: 1%;
}
.kids_box1 ul li{
    position: relative;
    z-index: 2;
    width: 23.5%;
    max-width: 260px;
}
.kids_box1 ul li .img{
    position: relative;
}
.kids_box1 ul li .img .sub{
    position: absolute;
    width: 57%;   
    right: -1em; 
}
.kids_box1 ul li:nth-child(odd) .img .sub{
    top: -1em;
}
.kids_box1 ul li:nth-child(even) .img .sub{
    bottom: -1em;
}
.kids_box1 ul li .com_style1{
    margin-top: 1.2em;
    color: #fff;
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) { 
.kids_box1{
    border-radius:100px 100px 0 0;
    padding:13vw 3% 13%;
}
.kids_box1::before{
    width: 18vw;
    top:-1.5vw;
}
.kids_box1 .kids_box1_index{
    margin-bottom: 5%;
}
.kids_box1 .kids_box1_index .ft_ad{
    margin-top: 1em;
}
.kids_box1 ul::before{
    top:-14vw;
}
.kids_box1 ul::after{
    bottom:-12vw;
}
.kids_box1 ul li .img .sub{ 
    right: -1vw; 
}
.kids_box1 ul li:nth-child(odd) .img .sub{
    top: -1vw;
}
.kids_box1 ul li:nth-child(even) .img .sub{
    bottom: -1vw;
}
.kids_box1 ul li .com_style1{
    margin-top: .5em;
    letter-spacing: normal;
    font-size:2.3vw;
}
}

/* Mobile (Portrait) 
------------------------------------------*/ 
@media only screen and (max-width: 767px) { 
.kids_box1{
    border-radius: 80px 80px 0 0;
    padding: 19vw 3% 15vw;
}
.kids_box1::before{
    width: 27vw;
    top:-2vw;
}
.kids_box1 .kids_box1_index{
    position: relative;
    z-index: 2;
    margin-bottom: 10%;
}
.kids_box1 .kids_box1_index .ft_min{
    font-size: 120%;
    letter-spacing: normal;
}
.kids_box1 .kids_box1_index .ft_ad,
.kids_box2 .kids_box2_index1{
    font-size: 75%;
}
.kids_box1 .kids_box1_index .ft_ad{
    margin-top: 1em;
    padding-bottom: 1.2em;
}
.kids_box1 ul{
    position: relative;
    z-index: 2;
    flex-wrap: wrap;
}
.kids_box1 ul::before{
    width:25%;
    top:-10vw;
}
.kids_box1 ul::after{
    width:25%;
    bottom:-10vw;
}
.kids_box1 ul li:nth-child(-n+2){
    margin-top: 0;
}
.kids_box1 ul li{
    width: 47%;
    margin-top: 8%;
}
.kids_box1 ul li .img .sub{
    width:60%;   
    right: -1vw; 
}
.kids_box1 ul li:nth-child(odd) .img .sub{
    top: -1vw;
}
.kids_box1 ul li:nth-child(even) .img .sub{
    bottom: -1vw;
}
.kids_box1 ul li .com_style1{
    margin-top: .4em;
    font-size:100%;
    letter-spacing: normal;
}
.kids_box1 .com_btn1{
    position: relative;
    z-index: 2;
}
}





/* kids_box2
---------------------------------------------------------*/
.kids_box2{
    position: relative;
    background: #FFFFCF;
    padding: 0 4% 100px;
    box-sizing: border-box;
    text-align: center;
}
.kids_box2::before{
    position: absolute;
    display: block;
    content: "";
    background: #FFFFCF;
    background-size: 100% auto;
    width: 60%;
    max-width: 539px;
    height: 3.5em;
    bottom: 100%;
    left: 0;
    right: 0;
    margin: 0 auto;
    border-radius: 40px 40px 0 0;
}
.kids_box2 .kids_box2_index1{
    position: relative;
    color: #F5AF2E;
    margin-bottom: 25px;
}
.kids_box2 .kids_box2_index2{
    width: 60%;
    max-width: 474px;
    margin: 0 auto 30px;
}
.kids_box2 .kids_box2_index3{
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 952px;
    padding: 0 10.5%;
    box-sizing: border-box;
    margin: 0 auto 30px;
}
.kids_box2 .kids_box2_index3::before{
    position: absolute;
    display: block;
    content: "";
    background: url("../images/kids/abs08@2x.png")no-repeat top left;
    background-size: 100% auto;
    width:7%;
    height: 300px;
    top:0;
    left: 0;
}
.kids_box2 .kids_box2_index3::after{
    position: absolute;
    display: block;
    content: "";
    background: url("../images/kids/abs08@2x.png")no-repeat top right;
    background-size: 100% auto;
    width:7%;
    height: 300px;
    top:0;
    right: 0;
}
.kids_box2 .flexbox{
    max-width: 1050px;
    margin: 50px auto 0;
}
.kids_box2 .flexbox .flex_l{
    width:40%;
}
.kids_box2 .flexbox .flex_l .txt{
    font-size: min(120%,2vw);
    letter-spacing: 0.1em;
    line-height: 2em;
    font-weight: bold;
    margin: 1em 0 2em;
}
.kids_box2 .flexbox .flex_r{
    width: 57%;
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) { 
.kids_box2{
    padding: 0 4% 6%;
}
.kids_box2::before{
    height: 2em;
    border-radius: 20px 20px 0 0;
}
.kids_box2 .kids_box2_index1{
    margin-bottom: 2.5%;
}
.kids_box2 .kids_box2_index2{
    margin: 0 auto 2%;
}
.kids_box2 .kids_box2_index3{
    padding: 0 12%;
    margin: 0 auto 2%;
}
.kids_box2 .flexbox{
    margin: 4% auto 0;
}
.kids_box2 .flexbox .flex_l{
    width:40%;
}
.kids_box2 .flexbox .flex_l .txt{
    line-height: 1.8em;
    margin: .3em 0 1em;
}
}

/* Mobile (Portrait) 
------------------------------------------*/ 
@media only screen and (max-width: 767px) { 
.kids_box2{
    padding: 0 4% 5%;
}
.kids_box2::before{
    width: 70%;
    height:5vw;
    border-radius:20px 20px 0 0;
}
.kids_box2 .kids_box2_index1{
    margin-bottom: 5%;
}
.kids_box2 .kids_box2_index2{
    width: 75%;
    margin: 0 auto 5%;
}
.kids_box2 .kids_box2_index3{
    padding: 0 14%;
    margin: 0 auto 3%;
}
.kids_box2 .kids_box2_index3::before{
    width: 9%;
}
.kids_box2 .kids_box2_index3::after{
    width:9%;
}
.kids_box2 .flexbox{
    display: block;
    margin: 8% auto 0;
}
.kids_box2 .flexbox .flex_l{
    width: 100%;
    margin-bottom: 8%;
}
.kids_box2 .flexbox .flex_l .txt{
    font-size:90%;
    line-height: 1.6em;
    margin: .3em 0 1.2em;
}
.kids_box2 .flexbox .flex_r{
    width: 100%;
}
}