@charset "utf-8";

#top #main_bottom .corona01{border: 2px solid #ffc000;}
#top #main_bottom .corona01 h2{text-align: center;background: #ffc000;font-size: 18px;padding: 5px 0;}
#top #main_bottom .corona01 ul{padding: 17px 10px;flex-wrap: wrap;}
#top #main_bottom .corona01 li{width: 33%;display: flex;align-items: center;}
#top #main_bottom .corona01 li img{margin-right: 0.7em;}
#top #main_bottom .corona01 li:nth-of-type(n+4){margin-top: 10px;}

#top #main_bottom .corona02{border: 2px solid #b20000;margin-top: 20px;}
#top #main_bottom .corona02 h2{text-align: center;background: #b20000;font-size: 18px;padding: 5px 0;color: #fff;}
#top #main_bottom .corona02 ul{padding: 17px 10px;flex-wrap: wrap;}
#top #main_bottom .corona02 li{width: 33%;display: flex;align-items: center;}
#top #main_bottom .corona02 li:nth-of-type(even){width: 66%;}
#top #main_bottom .corona02 li img{margin-right: 0.7em;}
#top #main_bottom .corona02 li:nth-of-type(n+3){margin-top: 10px;}

@media screen and (max-width: 768px) {
#top #main_bottom .corona01 h2{font-size: 15px;padding: 3px 0;}
#top #main_bottom .corona01 ul{padding: 10px 7px;}
#top #main_bottom .corona01 li{width: 49%;display: flex;align-items: center;font-size: 12px;}
#top #main_bottom .corona01 li:nth-of-type(-n+2){width: 100%;}
#top #main_bottom .corona01 li img{margin-right: 0.7em;width: 40px;}
#top #main_bottom .corona01 li:nth-of-type(n+2){margin-top: 10px;}

#top #main_bottom .corona02{margin-top: 15px;}
#top #main_bottom .corona02 h2{font-size: 15px;padding: 3px 0;}
#top #main_bottom .corona02 ul{padding: 10px 7px;}
#top #main_bottom .corona02 li{width: 100%;}
#top #main_bottom .corona02 li:nth-of-type(even){width: 100%;}
#top #main_bottom .corona02 li img{margin-right: 0.7em;width: 40px;}
#top #main_bottom .corona02 li:nth-of-type(n+2){margin-top: 10px;}
}


#top #feature{background: url("../img/feature_bk.jpg");background-position: center center;background-size: cover;padding: 50px 0;}
#top #feature h2{text-align: center;}
#top #feature h3{text-align: center;font-size: 18px;margin-top: 30px;}
#top #feature dl{margin-top: 30px;align-items: flex-end;}
#top #feature dt{width: 49%;}
#top #feature dd{width: 51%;background: rgba(255,255,255,0.6);padding: 20px;margin-bottom: 30px;}
#top #feature dd h4{text-align: center;font-size: 18px;}
#top #feature dd h4 + p{margin-top: 15px;padding: 0 30px;}

@media screen and (max-width: 768px) {
#top #feature{padding: 30px 0;}
#top #feature h2 img{width: 120px;}
#top #feature h3{font-size: 16px;margin-top: 20px;}
#top #feature dl{margin-top: 20px;justify-content: flex-end;}
#top #feature dt{width: 100%;order: 1;}
#top #feature dt img{width: 80%;}
#top #feature dd{width: 90%;padding: 10px;margin-bottom: 0;z-index: 1;top:-10vw;order: 2;}
#top #feature dd h4{font-size: 15px;}
#top #feature dd h4 + p{margin-top: 10px;}
#top #feature dl:nth-of-type(2){margin-top: -2vw;justify-content: flex-start;}
#top #feature dl:nth-of-type(2) dt{text-align: right;}
}

#top #menu .menu_list{display: flex;margin-top: 50px;flex-wrap: wrap;}
#top #menu .menu_list a{width: 32%;color: #000;border-bottom: 1px dashed #ffc40f;margin-right: 2%;}
#top #menu .menu_list a:nth-of-type(n+4){margin-top: 30px;}
#top #menu .menu_list a:nth-of-type(3n){margin-right: 0;}
#top #menu .menu_list a span{overflow: hidden;display: block;}
#top #menu .menu_list a span img{transition: all 0.2s;width: 100%;}
#top #menu .menu_list a h4{font-size: 16px;background: #ffc40f;padding: 5px 0 3px;text-align: center;}
#top #menu .menu_list a h4::before{content: "";border-top:2px solid #000;border-right:2px solid #000;width: 9px;height: 9px;display: block;position: absolute;transform: rotate(45deg) translateY(-69%);top:50%;left: 10px;transition: all 0.2s;}
#top #menu .menu_list a h4::after{content: "";width: 17px;height: 2px;display: block;position: absolute;transform: translateY(-50%);top:50%;left: 10px;background: #000;transition: all 0.2s;}
#top #menu .menu_list a p{padding: 10px;}
#top #menu .menu_list a:hover span img{transform: scale(1.1)}
#top #menu .menu_list a:hover h4::before{left: 20px;}
#top #menu .menu_list a:hover h4::after{left: 20px;}

@media screen and (max-width: 768px) {
#top #menu .menu_list{margin-top: 30px;}
#top #menu .menu_list a{width: 49%;margin-right: 2%;}
#top #menu .menu_list a:nth-of-type(n+3){margin-top: 20px;}
#top #menu .menu_list a:nth-of-type(3n){margin-right: 2%;}
#top #menu .menu_list a:nth-of-type(even){margin-right: 0;}
#top #menu .menu_list a h4{font-size: 15px;padding: 5px 0 3px 15px;}
#top #menu .menu_list a h4::before{content: "";width: 7px;height: 7px;left: 7px;transition: all 0.2s;}
#top #menu .menu_list a h4::after{content: "";width: 13px;height: 2px;display: block;position: absolute;transform: translateY(-50%);top:50%;left: 7px;}
#top #menu .menu_list a p{padding: 10px 5px;}
#top #menu .menu_list a:hover h4::before{left: 7px;}
#top #menu .menu_list a:hover h4::after{left: 7px;}
}