@charset "UTF-8";

#flow main{height: 450px;background-position: center center;background-size: cover;background: url("../img/main_pc.jpg?20210417") center center / cover no-repeat;}

#flow h3.or_line + p{text-align: center;}
#flow .flow_list{margin: 35px auto 0;width: 80%; flex-wrap: wrap;}
#flow .flow_list li{width: 100%;}
#flow .flow_list li h4{display: block;text-align: center;width: 100%;background: #ffc40f;padding: 13px;line-height: 1;}
#flow .flow_list li p{padding: 20px 10px 0;margin-bottom: auto;}
#flow .flow_list li:before{content:"";border-style: solid;border-width: 15px 25px 0 25px;border-color: #000000 transparent transparent transparent;width: 0;height: 0;margin: 20px auto;display: block;}
#flow .flow_list li.half{width: 46%;display: flex;flex-direction: column;}
#flow .flow_list li.half::after{content:"";border-style: solid;border-width: 15px 25px 0 25px;border-color: #000000 transparent transparent transparent;width: 0;height: 0;margin: 20px auto;display: block;}
#flow .flow_list li.no_arrow::before{content:"";border:none;margin: 0;}
#flow .flow_list li .s_start{padding: 20px 10px 0;}
#flow .flow_list li .s_start dt{width: 58%;}
#flow .flow_list li .s_start dd{width: 40%;}


@media only screen and (max-width: 768px) {
#flow main{height: auto;background: none;}

#flow h3.or_line + p{text-align: left;}
#flow .flow_list{margin: 15px auto 0;width: 100%;}
#flow .flow_list li h4{padding: 10px;}
#flow .flow_list li p{padding: 15px 5px 0;margin-bottom: auto;}
#flow .flow_list li:before{margin: 15px auto;}
#flow .flow_list li.half{width: 48%;}
#flow .flow_list li.half::after{margin: 15px auto;}
#flow .flow_list li .s_start{padding: 15px 5px 0;flex-wrap: wrap;justify-content: center;}
#flow .flow_list li .s_start dt{width: 100%;}
#flow .flow_list li .s_start dd{width: 85%;margin-top: 15px}


}