@charset "UTF-8";
@media screen and (min-width: 768px),print {
h1.main-title {background: url(../images/family/h1.png) no-repeat top center;}

#main-bx{text-align: center; margin: 50px auto 0;}

#con1-main{width: 1100px; margin: 0 auto 100px; position: relative;}
#con1-main .bx1{padding-top: 50px; }
#con1-main .bx1 .icon1{position: absolute; left: 100px; top: 250px}
#con1-main .bx1 .icon2{position: absolute; right: 50px; top: 30px}
#con1-main .bx1 .ttl{font-size: 24px; font-weight: bold; letter-spacing: 3px; text-align: center; margin-bottom: 30px; line-height: 2;}
#con1-main .bx1 .ttl .span1{background: url(../images/family/con1-main-icon.png) no-repeat top center; padding-top: 10px}
#con1-main .bx1 .ttl .span2{font-size: 30px;}
#con1-main .bx1 .txt{font-size: 16px; font-weight: bold; letter-spacing: 1px; text-align: center; margin-bottom: 30px; line-height: 2;}

#con1 {}
#con1 .bx1{width: 100%; margin: 0 auto; background: #F5F5F5; }
#con1 .bx1 .inner1{width: 1280px; margin: 0 auto; position: relative; padding: 100px 0}
#con1 .bx1 .inner1 .icon1{position: absolute; right: -200px; top: 0}
#con1 .bx1 .inner1 .icon2{position: absolute; left: -200px; bottom: 0}
#con1 .bx1 .inner1 .list{display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;-webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;-webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center;-webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center;}
#con1 .bx1 .inner1 .list .li1{width: 510px; margin-right: 50px}
#con1 .bx1 .inner1 .list .li1 .ttl{margin-bottom: 30px}
#con1 .bx1 .inner1 .list .li1 .txt{font-size: 16px; margin-bottom: 30px; letter-spacing: 1px; position: relative;}
#con1 .bx1 .inner1 .list .li2 {position: relative;}

#con1 .bx2{width: 100%; margin: 0 auto;}
#con1 .bx2 .inner1{width: 1280px; margin: 0 auto; position: relative; padding: 100px 0}
#con1 .bx2 .inner1 .list{margin-bottom: 50px; flex-flow: row-reverse; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;-webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;-webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center;-webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center;}
#con1 .bx2 .inner1 .list .li1{width: 510px; margin-left: 50px}
#con1 .bx2 .inner1 .list .li1 .ttl{margin-bottom: 30px}
#con1 .bx2 .inner1 .list .li1 .txt{font-size: 16px; margin-bottom: 30px; letter-spacing: 1px; position: relative;}
#con1 .bx2 .inner1 .list .li2 {position: relative;}
#con1 .bx2 .inner1 .list1{flex-flow: row-reverse; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;-webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;-webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center;-webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center;}
#con1 .bx2 .inner1 .list1 .li1{width: 500px; margin-right: 50px}
#con1 .bx2 .inner1 .list1 .li1 .txt{font-size: 16px; margin-bottom: 30px; letter-spacing: 1px; position: relative;}
#con1 .bx2 .inner1 .list1 .li2 {margin-right: -50px;}

#con2 {}
#con2 .bx{width: 1280px; margin: 0 auto 250px; position: relative;}
#con2 .bx .img{text-align: center; position: relative; top: 0px;}
#con2 .bx .inner{position: absolute; top: 250px; left: 250px; width: 800px; margin: 0 auto; background: url(../images/family/con2-bg2.png) no-repeat top center; padding: 50px 80px;}
#con2 .bx .inner1{position: relative;}
#con2 .bx .inner1 .txt{text-align: center; font-size: 16px; font-weight: bold; letter-spacing: 1px; margin-bottom: 20px}
#con2 .bx .inner1 .btn{text-align: center; }
#con2 .bx .inner1 .human{position: absolute; right: 20px; bottom: -41px; }

#con3 .bx1{width: 100%; margin: 0 auto; background: #F5F5F5; padding-bottom: 100px}
#con3 .bx1 .inner1{width: 1280px; margin: 0 auto; position: relative; padding: 100px 0 50px}
#con3 .bx1 .inner1 .icon1{position: absolute; right: -200px; top: 0}
#con3 .bx1 .inner1 .icon2{position: absolute; left: -130px; bottom: 50px}
#con3 .bx1 .inner1 .list{margin-bottom: 50px; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;-webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;-webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center;-webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center;}
#con3 .bx1 .inner1 .list .li1{width: 495px; margin-right: 50px; margin-left: -30px}
#con3 .bx1 .inner1 .list .li1 .ttl{margin-bottom: 30px}
#con3 .bx1 .inner1 .list .li1 .txt{font-size: 16px; margin-bottom: 30px; letter-spacing: 1px; position: relative;}
#con3 .bx1 .inner1 .list .li2 {position: relative;}
#con3 .bx1 .inner1 .list1{display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;-webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;-webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center;-webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center;}
#con3 .bx1 .inner1 .list1 .li1{width: 500px; margin-left: 50px}
#con3 .bx1 .inner1 .list1 .li1 .txt{font-size: 16px; margin-top: -100px; letter-spacing: 1px; position: relative;}
#con3 .bx1 .inner1 .list1 .li2 {position: relative; margin-left: -30px}

#con3 .bx1 .inner2{width: 1100px; margin: 0 auto; position: relative; padding: 50px 0; background: url(../images/family/con3-bg.png) repeat;}
#con3 .bx1 .inner2 .ttl1{text-align: center; font-size: 24px; font-weight: bold; letter-spacing: 3px; margin-bottom: 30px}
#con3 .bx1 .inner2 .ttl1 .span1{background: url(../images/family/con3-icon3.png) no-repeat left top; padding: 20px 20px 20px 40px;}
#con3 .bx1 .inner2 .ttl1 .span2{background: url(../images/family/con3-icon4.png) no-repeat center top; padding-top: 10px}
#con3 .bx1 .inner2 .list{display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;-webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;-webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center;-webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center;}
#con3 .bx1 .inner2 .list .li1{width: 320px; margin-right: 10px;}
#con3 .bx1 .inner2 .list .li1:last-child{margin-right: 0px;}
#con3 .bx1 .inner2 .list .li1 .in-ttl{font-size: 18px; font-weight: bold; text-align: center; letter-spacing: 2px; padding: 15px; background: #50566A; color: #fff}
#con3 .bx1 .inner2 .list .li1 .bx2{border: 1px solid #000; padding: 25px 30px; background: #fff}
#con3 .bx1 .inner2 .list .li1 .bx2 .in-img{margin-bottom: 20px;}
#con3 .bx1 .inner2 .list .li1 .bx2 .in-txt{font-size: 16px; letter-spacing: 2px}

#con4{width: 100%; margin: 0 auto; background: url(../images/family/con4-bg.png) no-repeat top center; padding: 100px 0; }
#con4 .bx{width: 1100px; margin: 0 auto;}
#con4 .bx .txt1{text-align: center; margin-bottom: 20px}
#con4 .bx .txt2{font-size: 20px; font-weight: 500; letter-spacing: 1px; text-align: center; color: #fff; margin-bottom: 30px}



}


@media screen and (max-width: 767px) {
h1.main-title {background: url(../images/family/sp-h1.png) no-repeat top center;}

#main-bx{width: 95vw; margin: 10vw auto;}

#con1-main{width: 80vw; margin: 0 auto 10vw; position: relative;}
#con1-main .bx1{padding-top: 1vw; }
#con1-main .bx1 .icon1{width: 20vw; position: absolute; left: -10vw; top: 13vw}
#con1-main .bx1 .icon2{width: 20vw; position: absolute; right: -8vw; top: 8vw}
#con1-main .bx1 .ttl{font-size: 4.2vw; font-weight: bold; letter-spacing: 1px; text-align: center; margin-bottom: 5vw; line-height: 2;}
#con1-main .bx1 .ttl .span1{background: url(../images/family/sp-con1-main-icon.png) no-repeat top center; background-size: 50%; padding-top: 1vw}
#con1-main .bx1 .ttl .span2{font-size: 4.2vw;}
#con1-main .bx1 .txt{font-size: 3.73vw; font-weight: bold; letter-spacing: 1px; text-align: left; margin-bottom: 3vw; line-height: 2;}

#con1 {}
#con1 .bx1{width: 100vw; margin: 0 auto; background: #F5F5F5; }
#con1 .bx1 .inner1{width: 85vw; margin: 0 auto; position: relative; padding: 10vw 0}
#con1 .bx1 .inner1 .icon1{width: 50vw; position: absolute; right: -10vw; top: 0}
#con1 .bx1 .inner1 .icon2{width: 50vw; position: absolute; left: -10vw; bottom: 0}
#con1 .bx1 .inner1 .list{}
#con1 .bx1 .inner1 .list .li1{}
#con1 .bx1 .inner1 .list .li1 .ttl{width: 65vw; margin-bottom: 5vw; position: relative;}
#con1 .bx1 .inner1 .list .li1 .txt{font-size: 3.73vw; margin-bottom: 3vw; letter-spacing: 1px; position: relative;}
#con1 .bx1 .inner1 .list .li2 {position: relative; margin-bottom: 3vw}

#con1 .bx2{width: 100vw; margin: 0 auto 10vw;}
#con1 .bx2 .inner1{width: 85vw; margin: 0 auto; position: relative; padding: 10vw 0}
#con1 .bx2 .inner1 .list{}
#con1 .bx2 .inner1 .list .li1{}
#con1 .bx2 .inner1 .list .li1 .ttl{width: 70vw; margin-bottom: 5vw; position: relative;}
#con1 .bx2 .inner1 .list .li1 .txt{font-size: 3.73vw; margin-bottom: 3vw; letter-spacing: 1px; position: relative;}
#con1 .bx2 .inner1 .list .li2 {position: relative; margin-bottom: 3vw}
#con1 .bx2 .inner1 .list1{}
#con1 .bx2 .inner1 .list1 .li1{}
#con1 .bx2 .inner1 .list1 .li1 .txt{font-size: 3.73vw; margin-bottom: 3vw; letter-spacing: 1px; position: relative;}
#con1 .bx2 .inner1 .list1 .li2 {position: relative; margin-bottom: 3vw}


#con2 {width: 100vw; margin: 0 auto; background: url(../images/family/con2-bg1.png) no-repeat top center; padding-bottom: 10vw}
#con2 .bx{width: 90vw;margin: 0 auto;position: relative;margin-bottom: 6vw;}
#con2 .bx .img{text-align: center; position: relative; top: -20vw;}
#con2 .bx .inner{width: 89vw;margin: -28vw auto 0;position: relative;background: url(../images/lifedesign/sp-con2-bg2.png) no-repeat top center;background-size: 100%;padding: 6vw 6vw;}
#con2 .bx .inner1{position: relative;}
#con2 .bx .inner1 .txt{text-align: left;font-size: 3.2vw;font-weight: bold;letter-spacing: 1px;margin-bottom: 10vw;}
#con2 .bx .inner1 .btn{width: 80vw;margin: 0 auto;position: relative;left: -4vw;}
#con2 .bx .inner1 .human{width: 19vw;position: absolute;right: -10vw;bottom: -3vw;}
#con2 .con2-bg-bx{width: 100%; display: block; text-align: center}
#con2 .con2-bg-bx img{width: 100%; }
#con2 .bx1{width: 90vw; margin: 0 auto; background: #fff; padding: 8vw 5vw; position: relative; top: -3vw;}
#con2 .bx1 .bx1-txt{width: 30vw; margin: 0 auto 3vw;}
#con2 .bx1 .bx1-ttl{text-align: center; font-size: 4.2vw; font-weight: bold; letter-spacing: 1px; margin-bottom: 3vw}
#con2 .bx1 .bx1-ttl span{color: #237574; }
#con2 .bx1 .bx1-txt1 {font-size: 3.73vw; width: 75vw; margin: 0 auto 3vw;}
#con2 .bx1 .bx1-txt1:last-child{margin-bottom: 0}


#con3 .bx1{width: 100vw; margin: 0 auto; background: #F5F5F5; padding-bottom: 10vw}
#con3 .bx1 .inner1{width: 85vw; margin: 0 auto; position: relative; padding: 10vw 0}
#con3 .bx1 .inner1 .icon1{width: 50vw; position: absolute; right: -10vw; top: 0}
#con3 .bx1 .inner1 .icon2{width: 50vw; position: absolute; left: -10vw; bottom: 5vw}
#con3 .bx1 .inner1 .list{}
#con3 .bx1 .inner1 .list .li1{}
#con3 .bx1 .inner1 .list .li1 .ttl{width: 70vw; margin-bottom: 5vw; position: relative;}
#con3 .bx1 .inner1 .list .li1 .txt{font-size: 3.73vw; margin-bottom: 3vw; letter-spacing: 1px; position: relative;}
#con3 .bx1 .inner1 .list .li2 {position: relative; margin-bottom: 3vw}
#con3 .bx1 .inner1 .list1{}
#con3 .bx1 .inner1 .list1 .li1{}
#con3 .bx1 .inner1 .list1 .li1 .txt{font-size: 3.73vw; margin-bottom: 3vw; letter-spacing: 1px; position: relative;}
#con3 .bx1 .inner1 .list1 .li2 {position: relative; margin-bottom: 3vw}

#con3 .bx1 .inner2{width: 90vw; margin: 0 auto; position: relative; padding: 10vw 5vw; background: url(../images/family/con3-bg.png) repeat;}
#con3 .bx1 .inner2 .ttl1{text-align: center; font-size: 4.2vw; font-weight: bold; letter-spacing: 3px; margin-bottom: 5vw}
#con3 .bx1 .inner2 .ttl1 .span1{background: url(../images/family/sp-con3-icon3.png) no-repeat left top; background-size: 100%; padding: 2vw 4vw;}
#con3 .bx1 .inner2 .ttl1 .span2{background: url(../images/family/sp-con3-icon4.png) no-repeat center top;  background-size: 70%; padding-top: 1vw}
#con3 .bx1 .inner2 .list{}
#con3 .bx1 .inner2 .list .li1{margin-bottom: 3vw}
#con3 .bx1 .inner2 .list .li1:last-child{margin-bottom: 0}
#con3 .bx1 .inner2 .list .li1 .in-ttl{font-size: 4.2vw; font-weight: bold; text-align: center; letter-spacing: 2px; padding: 3vw 0; background: #50566A; color: #fff}
#con3 .bx1 .inner2 .list .li1 .bx2{border: 1px solid #000; padding: 5vw; background: #fff}
#con3 .bx1 .inner2 .list .li1 .bx2 .in-img{margin-bottom: 3vw;}
#con3 .bx1 .inner2 .list .li1 .bx2 .in-txt{font-size: 3.73vw; letter-spacing: 1px}

#con4{width: 100vw; margin: 0 auto; background: url(../images/family/sp-con4-bg.png) no-repeat top center; padding: 10vw 0; background-size: 100%;}
#con4 .bx{width: 90vw; margin: 0 auto;}
#con4 .bx .txt1{width: 50vw; margin: 0 auto 3vw;}
#con4 .bx .txt2{font-size: 3.73vw; font-weight: 500; letter-spacing: 1px; text-align: center; color: #fff; margin-bottom: 3vw}


}