@charset "UTF-8";
@media screen and (min-width: 768px),print {

#main-bx {width: 1100px; margin: 0 auto 20px; background: #A2A2A2; padding: 50px}
#main-bx .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;}
#main-bx .list .li1{width: 530px; margin-right: 40px;}
#main-bx .list .li1 .ttl{font-size: 18px; font-weight: bold; color: #fff; text-align: center; line-height: 1.8; margin-bottom: 20px;}
#main-bx .list .li1 .ttl span{font-size: 40px;}
#main-bx .list .li1 .txt{font-size: 16px; background: #fff; padding: 25px;}
#main-bx .list .li2 {}

#main-tel {width: 1100px; margin: 0 auto 100px; border: 50px solid #D5D5D5; padding: 35px 50px; background: #F4F4F4; position: relative;}
#main-tel .ttl{text-align: center; font-size: 20px; font-weight: bold; margin-bottom: 5px;}
#main-tel .tel{text-align: center; margin-bottom: 5px;}
#main-tel .txt{text-align: center; font-size: 14px; }
#main-tel .human{position: absolute; left: 100px; top: 30px;}

#main-step {width: 1100px; margin: 0 auto 100px;}
#main-step .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;}
#main-step li{width: 350px; padding: 10px 30px 50px; margin-right: 25px; border: 1px solid #000; text-align: center; position: relative;}
#main-step li:last-child{margin-right: 0;}
#main-step li:before{ content: ""; position: absolute; top: 50%; left: 100%; margin-top: -5px; margin-left: 5px; border: 1px solid #929090; border-left: 15px solid #929090; }
#main-step li:last-child:before { content:none; }
#main-step li .ttl{font-size: 20px; font-weight: bold; color: #fff; letter-spacing: 4px; background: #525252; padding: 5px; display: block; width: 250px; margin: -30px auto 30px;}
#main-step li .ttl1{font-size: 28px; font-weight: bold; color: #5E5C5C; margin-bottom: 10px;}
#main-step li .txt{size: 16px}


}


@media screen and (max-width: 767px) {

#main-bx {width: 96vw; margin: 0 auto 3vw; background: #A2A2A2; padding: 5vw}
#main-bx .list{}
#main-bx .list .li1{}
#main-bx .list .li1 .ttl{font-size: 4vw; font-weight: bold; color: #fff; text-align: center; line-height: 1.8; margin-bottom: 3vw;}
#main-bx .list .li1 .ttl span{font-size: 7vw;}
#main-bx .list .li1 .txt{font-size: 4vw; background: #fff; padding: 3vw;}
#main-bx .list .li2 {width: 50vw; margin: 0 auto 5vw;}

#main-tel {width: 95vw; margin: 0 auto 15vw; border: 20px solid #D5D5D5; padding: 5vw 10vw; background: #F4F4F4; position: relative;}
#main-tel .ttl{text-align: center; font-size: 5vw; font-weight: bold; margin-bottom: 3vw;}
#main-tel .tel{text-align: center; margin-bottom: 3vw;}
#main-tel .txt{text-align: center; font-size: 3.6vw; }
#main-tel .human{width: 10vw; position: absolute; left: 0; top: 40vw;}

#main-step {width: 90vw; margin: 0 auto 5vw;}
#main-step .list{}
#main-step li{padding: 5vw; margin-bottom: 15vw; border: 1px solid #000; text-align: center; position: relative;}
#main-step li:last-child{}
#main-step li:before{ content: ""; position: absolute; top: 100%; left: 50%; margin-top: 3vw; border: 1px solid #929090; border-bottom: 20px solid #929090; }
#main-step li:last-child:before { content:none; }
#main-step li .ttl{font-size: 5vw; font-weight: bold; color: #fff; letter-spacing: 4px; background: #525252; padding: 1vw; display: block; width: 70vw; margin: -10vw auto 5vw;}
#main-step li .ttl1{font-size: 7vw; font-weight: bold; color: #5E5C5C; margin-bottom: 5vw;}
#main-step li .txt{size: 4vw}

}