@charset "UTF-8";

/*-------------------------
__hoge_style
-------------------------*/
#content .main_bg{background:url("images/search_main_img.jpg") no-repeat 50%;background-size:cover;height:240px;width:100%;position:relative;z-index:0;}
#content .main_bg::before{content:"";position:absolute;background:rgb(10 40 60 / 0.5);width:100%;height:100%;background-position:center;left:0;z-index:-1;}
#content .main_bg .main_bg_innner{max-width:1280px;padding:50px;box-sizing:border-box;margin:0 auto;}
#content .main_bg .main_bg_innner .main_ttl{font-size:36px;font-weight:700;text-align:center;color:#fff;margin-top:10px;}
#content .main_bg .main_bg_innner .topic_path li{color:#fff;}
#content .main_bg .main_bg_innner .topic_path li::before{color:#fff;}
#content .main_bg .main_bg_innner .topic_path a{color:#fff;}
#main{max-width:1280px;padding:100px 50px 50px;margin:0 auto;}
#main #search .search_flex_wrap{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;}
#main #search .search_flex_wrap .search_flex_item{width:calc(100% / 3);border:2px solid #005cba;border-radius:10px;}
#main #search .search_flex_wrap .search_flex_item .item_ttl{font-size:18px;font-weight:700;color:#fff;background:#005cba;padding:15px 0;border-radius:7px 7px 0 0;}
#main #search .search_flex_wrap .search_flex_item .item_inner{padding:10px 20px 20px;box-sizing:border-box;}
#main #search .search_flex_wrap .search_flex_item .item_inner .btn_wrap{display:flex;flex-direction:column;}
#main #search .search_flex_wrap .search_flex_item .item_inner .btn_wrap a{display:block;background:#ffad00;padding:10px;color:#fff;font-size:16px;border-radius:5px;transition:.3s;}
#main #search .search_flex_wrap .search_flex_item .item_inner .btn_wrap a:nth-child(2){background:#00a9ff;margin-top:10px;}
#main #search .search_flex_wrap .search_flex_item .item_inner .item_icon{ padding: 10px; box-sizing: border-box;}

#main #search .search_container{}
#main #search .search_container .school_wrap{ padding: 80px 0 0; box-sizing: border-box;}
#main #search .search_container .school_wrap h2{ background: var(--blue-base); padding: 10px; font-size: 21px; font-weight: 700; color: #fff; border-radius: 5px; text-align: left; margin-bottom: 20px;}
#main #search .search_container .school_wrap:nth-child(odd) h2{ background: var(--orange-base);}
#main #search .search_container .school_wrap .scool_list{ display: flex; flex-wrap: wrap; gap: 20px;}
#main #search .search_container .school_wrap .scool_list li{ width: calc((100% - 40px) / 3);}
#main #search .search_container .school_wrap .scool_list li a{ display: block; background: #efefef; font-size: 18px; font-weight: 700; color: #000; text-decoration: none; padding: 20px 10px; box-sizing: border-box; border-radius: 5px; transition: .3s;}
#main #search .search_container .school_wrap .scool_list li a .num{ color: var(--dark-blue); font-size: 24px;}
#main #search .search_container .school_wrap:nth-child(odd) .scool_list li a .num{ color: var(--dark-orange);}


@media screen and (min-width:768px){
    #main #search .search_flex_wrap .search_flex_item .item_inner .btn_wrap a:hover{background:#ff7600;}
    #main #search .search_flex_wrap .search_flex_item .item_inner .btn_wrap a:nth-child(2):hover{background:#005cba;}
	#main #search .search_container .school_wrap .scool_list li a:hover{background: var(--blue-base30);}
	#main #search .search_container .school_wrap:nth-child(odd) .scool_list li a:hover{background: var(--orange-base30);}
}
@media screen and (max-width:767px){
    #content .main_bg{height:160px;}
    #content .main_bg .main_bg_innner{padding:10px 3%;}
    #content .main_bg .main_bg_innner .main_ttl{font-size:24px;margin-top:20px;}
    #main{padding:50px 3% 0;}
    #main #search .search_flex_wrap{gap:10px;}
    #main #search .search_flex_wrap .search_flex_item{width:calc(50% - 20px);margin-bottom:10px;}
    #main #search .search_flex_wrap .search_flex_item .item_ttl{padding:10px 0;}
    #main #search .search_flex_wrap .search_flex_item .item_inner{padding:0 10px 10px;}
    #main #search .search_flex_wrap .search_flex_item .item_inner .item_icon img{width:60px;height:60px;}
	#main #search .search_flex_wrap .search_flex_item .item_inner .btn_wrap a{padding:6px 0;}
	#main #search .search_flex_wrap .search_flex_item .item_inner .btn_wrap a:nth-child(2){margin-top:6px;}

#main #search .search_container .school_wrap{ padding: 30px 0 0;}
#main #search .search_container .school_wrap h2{ font-size: 16px; margin-bottom: 10px;}
#main #search .search_container .school_wrap .scool_list{ gap: 10px;}
#main #search .search_container .school_wrap .scool_list li{ width: 100%;}
#main #search .search_container .school_wrap .scool_list li a{ font-size: 14px;padding: 15px 10px; text-align: left;}
#main #search .search_container .school_wrap .scool_list li a .num{ font-size: 16px;}
}
@media screen and (max-width:374px){
    #main #search .search_flex_wrap .search_flex_item .item_inner .item_icon img{width:40px;height:40px;}
    #main #search .search_flex_wrap .search_flex_item .item_inner .btn_wrap a{font-size:14px;}
}