@charset "UTF-8";

/* ===================================================
	Baby & Maternity CSS
====================================================== */

@media screen and (max-width: 600px) {
#main_img .ja { letter-spacing: 0.15em; }
}

/* ---------------------------------------------------
List Local Navigation
------------------------------------------------------ */
.list_lnav{ display: flex; align-items: center; justify-content: space-between; padding: 0 0 120px;}
.list_lnav li{ width: 31.66%; overflow: hidden;}
.list_lnav li a{ position: relative; display: block;}
.list_lnav li a::before,
.list_lnav li a::after{ content: ""; position: absolute; left: 50%;}
.list_lnav li a::before{ background: rgba(250,250,250,0.2); width: 22px; height: 22px; border-radius: 22px; margin: 0 0 0 -11px; bottom: 24px;}
.list_lnav li a::after{ width: 7px; height: 7px; border-top: solid 1px #fff; border-right: solid 1px #fff; transform: rotate(135deg); margin: 0 0 0 -4px; bottom: 32px;}
.list_lnav li .circle{ position: absolute; z-index: 3; top: 68px; left: 50%; margin: 0 0 0 -40px; width: 80px; height: 80px; color: #fff; border-radius: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.list_lnav li.list_01 .circle{ background: #7bb3bd;}
.list_lnav li.list_02 .circle{ background: #dc968e;}
.list_lnav li.list_03 .circle{ background: #70a36a;}
.list_lnav li .circle span{ font-size: 10px; line-height: 1; display: block; text-align: center; letter-spacing: 0.15em;}
.list_lnav li .circle span.num{ font-size: 20px; padding: 5px 0 0;}
.list_lnav li .txt{ position: absolute; z-index: 2; bottom: 76px; width: 100%; text-align: center; color: #fff; font-size: 17px; line-height: 1.4;}
.list_lnav li .txt em{ font-size: 22px; font-style: normal;}
.list_lnav li img{ width: 100%; height: 300px; border-radius: 20px;}

@media screen and (max-width: 600px) {
.list_lnav{ flex-wrap: wrap; padding: 0 0 40px;}
.list_lnav li{ width: 48%; margin: 0 0 4%;}
.list_lnav li.list_01{ width: 100%;}
.list_lnav li a::before{ bottom: 10px;}
.list_lnav li a::after{ bottom: 18px;}
.list_lnav li .circle{ top: 20px; left: 50%; margin: 0 0 0 -25px; width: 50px; height: 50px; border-radius: 40px;}
.list_lnav li .circle span{ font-size: 8px; letter-spacing: 0.15em;}
.list_lnav li .circle span.num{ font-size: 16px; padding: 5px 0 0;}
.list_lnav li .txt{ bottom: 40px; font-size: 11px; line-height: 1.4;}
.list_lnav li .txt em{ font-size: 16px;}
.list_lnav li img{ height: 160px;}
}

/* ---------------------------------------------------
Section Point
------------------------------------------------------ */
.sec_point{ padding: 70px 0 140px;}
.sec_point .circle{ margin: 0 auto; width: 110px; height: 110px; color: #fff; border-radius: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.sec_point .circle span{ font-size: 12px; line-height: 1; display: block; text-align: center; letter-spacing: 0.15em;}
.sec_point .circle span.num{ font-size: 28px; padding: 5px 0 0;}
.sec_point .tit_01{ font-size: 30px; text-align: center; padding: 15px 0 30px;}
.sec_point .txt_01{ text-align: center;}
.sec_point .txt_02{ display: inline-block; border: solid 1px #ccc; background: #fff; padding: 3px 20px; border-radius: 20px;}
.sec_point .tit_02{ font-size: 24px; padding: 10px 0 20px;}
.sec_point .txt_04{ padding: 10px 0 0; color: rgba(35,35,35,0.7);}
.sec_point .txt_05{ font-size: 24px; text-align: center;}
.sec_point .btn_01{ background: #dc968e; display: inline-block; margin: 30px 0 0; padding: 20px 60px; font-size: 16px; line-height: 1; color: #fff; border-radius: 30px;}
.sec_point .btn_02{ display: inline-block; margin: 30px 0 0; font-size: 16px; line-height: 1; border-bottom: solid 1px #000; padding: 5px 0 10px 24px; background: url("../../access/img/ico_map.svg") no-repeat 0 3px; background-size: 18px;}
.sec_point .list_01{ margin: 30px 0 0; width: 100%; border-top: solid 1px #c0cccf;}
.sec_point .list_01 > div{ display: table; width: 100%; border-bottom: solid 1px #c0cccf;}
.sec_point .list_01 dt,
.sec_point .list_01 dd{ display: table-cell; padding: 10px 20px; vertical-align: middle; text-align: left; font-size: 14px;}
.sec_point .list_01 dt{ width: 25%; background: rgba(255,255,255,0.5);}
.sec_point .list_01 dd{ width: 75%;}
.sec_point .sec_in{ background: #ccc; border-radius: 20px; margin: 60px auto 0; padding: 60px; display: flex; justify-content: space-between; align-items: flex-start; flex-direction: row-reverse;}
.sec_point .sec_in .box_txt{ width: 600px; padding: 30px 0 0;}
.sec_point .sec_in .box_img{ width: 400px;}
.sec_point .sec_in .box_img img{ width: 100%; height: auto; border-radius: 20px;}
.sec_point .list_02{ display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; margin: 40px auto 0; max-width: 100%;}
.sec_point .list_02 li{ width: 23.3%; margin: 0 2.26% 40px 0;}
.sec_point .list_02 li:nth-child(4n){ margin: 0 0 40px 0;}
.sec_point .list_02 li span{ font-size: 18px; line-height: 1.4; padding: 10px 0 0 18px; position: relative; display: inline-block;}
.sec_point .list_02 li span::before{ content: ""; background: #dc968e; width: 10px; height: 10px; border-radius: 10px; position: absolute; top: 18px; left: 0;}
.sec_point .list_02 img{ border-radius: 20px;}
.sec_point .list_03{ display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; margin: 40px auto 0; max-width: 100%;}
.sec_point .list_03 li{ width: 31.6%; margin: 0 2.6% 40px 0;}
.sec_point .list_03 li:nth-child(3n){ margin: 0 0 40px 0;}
.sec_point .list_03 li img{ width: 100%; height: auto; border-radius: 20px; }
.sec_point .list_03 li h4{ font-size: 18px; line-height: 1.4; padding: 15px 0 10px 18px; position: relative; display: inline-block;}
.sec_point .list_03 li h4::before{ content: ""; background: #70a36a; width: 10px; height: 10px; border-radius: 10px; position: absolute; top: 23px; left: 0;}
.sec_point .list_03 li p{ opacity: 0.7;}

@media screen and (max-width: 600px) {
.sec_point{ padding: 30px 0 40px;}
.sec_point .circle{ width: 65px; height: 65px;}
.sec_point .circle span{ font-size: 10px;}
.sec_point .circle span.num{ font-size: 22px;}
.sec_point .tit_01{ font-size: 18px; text-align: center; padding: 10px 0 20px;}
.sec_point .txt_01{ text-align: left;}
.sec_point .txt_02{ padding: 3px 15px; border-radius: 20px; font-size: 12px;}
.sec_point .tit_02{ font-size: 18px; padding: 10px 0;}
.sec_point .txt_04{ padding: 5px 0 0;}
.sec_point .txt_05{ font-size: 18px; text-align: center;}
.sec_point .btn_01{ margin: 20px 0 0; padding: 20px 30px; font-size: 14px; width: 100%; text-align: center;}
.sec_point .btn_02{ margin: 15px 0 0; font-size: 14px; padding: 5px 0 10px 24px;}
.sec_point .list_01{ margin: 15px 0 0;}
.sec_point .list_01 > div{ display: block;}
.sec_point .list_01 dt,
.sec_point .list_01 dd{ display: block; padding: 5px 10px; font-size: 12px;}
.sec_point .list_01 dt{ width: 100%;}
.sec_point .list_01 dd{ width: 100%;}
.sec_point .sec_in{ margin: 20px auto 0; padding: 10%; flex-direction: column;}
.sec_point .sec_in .box_txt{ width: 100%; padding: 0 0 20px;}
.sec_point .sec_in .box_img{ width: 100%;}
.sec_point .list_02{ margin: 20px auto 0; max-width: 100%; width: 100%;}
.sec_point .list_02 li{ width: 48%; margin: 0 4% 20px 0;}
.sec_point .list_02 li:nth-child(4n){ margin: 0 0 20px 0;}
.sec_point .list_02 li:nth-child(2n){ margin: 0 0 20px 0;}
.sec_point .list_02 li span{ font-size: 14px; line-height: 1.4; padding: 10px 0 0 16px;}
.sec_point .list_02 li span::before{ top: 15px;}
.sec_point .list_03{ flex-direction: column; margin: 20px auto 0; max-width: 100%; width: 100%;}
.sec_point .list_03 li{ width: 100%; margin: 0 0 40px 0;}
.sec_point .list_03 li:nth-child(3n){ margin: 0 0 40px 0;}
.sec_point .list_03 li h4{ font-size: 16px; line-height: 1.4; padding: 15px 0 5px 16px; position: relative; display: inline-block;}
.sec_point .list_03 li h4::before{ top: 21px;}
}

/* ---------------------------------------------------
Point 01
------------------------------------------------------ */
.sec_point#point_01{ background: url("../../baby/img/point1_bg_01.webp") no-repeat center top; background-size: 100%;}
.sec_point#point_01 .circle{ background: #7bb3bd;}
.sec_point#point_01 .img_01{ padding: 0 0 40px;}
.sec_point#point_01 .sec_in{ background: #dceaed; margin: 100px auto 0;}
.sec_point#point_01 .txt_02{ color: #429cac; border: solid 1px #7bb3bd;}

@media screen and (max-width: 600px) {
.sec_point#point_01 .img_01{ padding: 0 0 20px;}
.sec_point#point_01 .sec_in{ margin: 30px auto 0;}
}

/* ---------------------------------------------------
Point 02
------------------------------------------------------ */
.sec_point#point_02{ background: url("../../baby/img/point2_bg_01.webp") no-repeat center top; background-size: 100%;}
.sec_point#point_02 .circle{ background: #dc968e;}
.sec_point#point_02 .txt_05{ color: #da857b; padding: 0 0 10px;}
.sec_point#point_02 .txt_01{ padding: 0 0 110px;}
.sec_point#point_02 .txt_02{ color: #da857b; border: solid 1px #dc968e;}
.sec_point#point_02 .sec_in{ background: #f8eae8;}

@media screen and (max-width: 600px) {
.sec_point#point_02 .txt_01{ padding: 0 0 40px;}
.sec_point#point_02 .tit_02{ padding: 15px 0 10px;}
}

/* ---------------------------------------------------
Point 03
------------------------------------------------------ */
.sec_point#point_03{ background: url("../../baby/img/point3_bg_01.webp") no-repeat center top; background-size: 100%;}
.sec_point#point_03 .circle{ background: #70a36a;}
.sec_point#point_03 .txt_05{ color: #70a36a; padding: 0 0 10px;}
.sec_point#point_03 .txt_01{ padding: 0 0 110px;}
.sec_point#point_03 .txt_02{ color: #70a36a; border: solid 1px #70a36a;}
.sec_point#point_03 .sec_in{ background: #e2ede1;}

@media screen and (max-width: 600px) {
.sec_point#point_03 .txt_05{ padding: 0 0 10px;}
.sec_point#point_03 .txt_01{ padding: 0 0 40px;}
.sec_point#point_03 .sec_in{ margin: 0 auto;}
.sec_point#point_03 .tit_02{ padding: 15px 0 10px;}
}