@charset "UTF-8";

/*
 * Site Name: connetta WEB Smart5
 * File Name page.css
 * Description: Common Page Style  for Responsive
 * Version: 1.0
 * Author: DIS_ART_WORKS
 */






/*=========================================================================================
for 1001 - 1296
=========================================================================================*/
@media screen and (min-width: 1001px) and (max-width: 1609px){

	#page #header_sub_menu_wrap{
		padding: 4px 0;
	}

	#m-company_search ul#m_category01 li a {
	    display: block;
	    float: left;
	    padding: 8px 0;
	    width: 48%;
		margin-left: 4%;
	}

	#m-company_search ul#m_category01 li:nth-child(2n+1) a {
	    margin-left: 0;
	}

	#m-company_search ul#m_category03 li a{
	    width: 48%;
	    float: left;

	}

	#m-company_search ul#m_category03 li:nth-child(1) a {
	    width: 100%;
	    float: none;
	}

	#m-company_search ul#m_category03 li:nth-child(even) a{
	    float: left;
		margin-left: 0;
	}

	#m-company_search ul#m_category03 li:nth-child(odd) a{
	    float: right;
		margin-left: 4%;
	}

	#m-company_search ul#m_category04 li a{
	    width: 48%;
	    float: left;
	}

	#m-company_search ul#m_category04 li:nth-child(1) a {
	    width: 100%;
	    float: none;
	}

	#m-company_search ul#m_category04 li:nth-child(even) a{
	    float: left;
		margin-left: 0;
	}

	#m-company_search ul#m_category04 li:nth-child(odd) a{
	    float: right;
		margin-left: 4%;
	}

	#m-company_search select{
	    font-size: 16px;
	}

	#m-company_search_result #search_list li a {
	    float: left;
	}




}


/*=========================================================================================
for 769 - 1000
=========================================================================================*/
@media screen and (min-width: 769px) and (max-width: 1000px){

	#page #header_sub_menu_wrap{
		padding: 4px 0;
	}

	#page #header_sub_menu{
		width:100%;
		padding: 0 4%;
		box-sizing: border-box;
	}



	#page ul.topics li .date {
	    display: inline;
	    width: 100%;
	}

	#page ul.topics li .wrap {
	    float: none;
	    padding: 0 0 16px;
	}

	#page ul.topics li:last-child {
	    padding-bottom: 0px;
	}

	#page ul.topics{
	    padding: 0;
	}

	#page ul.topics li {
		padding: 16px 0;
	}

	#page ul.topics li a {
	    width: 100%;
		margin-left: 0;
	}

	#page ul.topics li:first-child {
	    padding-top: 0px;
	}

	#page ul.topics li:first-child a {
		margin-top: 0;
	}

	#page ul.topics li a .eyecatch{
	    width: 38%;
		max-width: 140px;
	}




	#m-company_search ul#m_category01 li a {
	    display: block;
	    float: left;
	    padding: 8px 0;
	    width: 48%;
		margin-left: 4%;
	}

	#m-company_search ul#m_category01 li:nth-child(2n+1) a {
	    margin-left: 0;
	}

	#m-company_search ul#m_category03 li a{
	    width: 48%;
	    float: left;

	}

	#m-company_search ul#m_category03 li:nth-child(1) a {
	    width: 100%;
	    float: none;
	}

	#m-company_search ul#m_category03 li:nth-child(even) a{
	    float: left;
		margin-left: 0;
	}

	#m-company_search ul#m_category03 li:nth-child(odd) a{
	    float: right;
		margin-left: 4%;
	}

	#m-company_search ul#m_category04 li a{
	    width: 48%;
	    float: left;
	}

	#m-company_search ul#m_category04 li:nth-child(1) a {
	    width: 100%;
	    float: none;
	}

	#m-company_search ul#m_category04 li:nth-child(even) a{
	    float: left;
		margin-left: 0;
	}

	#m-company_search ul#m_category04 li:nth-child(odd) a{
	    float: right;
		margin-left: 4%;
	}

	#m-company_search select{
	    font-size: 16px;
	}

	#m-company_search_result #search_list li span.m_category{
		display: none;
	}

	#m-company_search_result #search_list li a {
	    width: 100%;
	    float: left;
	}

	#m-company_search_result h2 span{
		display: none;
	}


}

/*=========================================================================================
for 481 - 768
=========================================================================================*/
@media screen and (min-width: 481px) and (max-width: 768px){

		#page dl.topics dt{
			margin: 0;
		}






		#page ul.topics li .date {
		    display: inline;
		    width: 100%;
		}

		#page ul.topics li .wrap {
		    float: none;
		    padding: 0 0 16px;
		}

		#page ul.topics li:last-child {
		    padding-bottom: 0px;
		}

		#page ul.topics{
		    padding: 0;
		}

		#page ul.topics li {
			padding: 16px 0;
		}

		#page ul.topics li a {
		    width: 100%;
			margin-left: 0;
		}

		#page ul.topics li:first-child {
		    padding-top: 0px;
		}

		#page ul.topics li:first-child a {
			margin-top: 0;
		}

		#page ul.topics li a .eyecatch{
		    width: 38%;
			max-width: 140px;
		}



		#m-company_search ul#m_category01 li a {
		    display: block;
		    float: left;
		    padding: 8px 0;
		    width: 48%;
			margin-left: 4%;
		}

		#m-company_search ul#m_category01 li:nth-child(2n+1) a {
		    margin-left: 0;
		}

		#m-company_search ul#m_category03 li a{
		    width: 48%;
		    float: left;

		}

		#m-company_search ul#m_category03 li:nth-child(1) a {
		    width: 100%;
		    float: none;
		}

		#m-company_search ul#m_category03 li:nth-child(even) a{
		    float: left;
			margin-left: 0;
		}

		#m-company_search ul#m_category03 li:nth-child(odd) a{
		    float: right;
			margin-left: 4%;
		}

		#m-company_search ul#m_category04 li a{
		    width: 48%;
		    float: left;
		}

		#m-company_search ul#m_category04 li:nth-child(1) a {
		    width: 100%;
		    float: none;
		}

		#m-company_search ul#m_category04 li:nth-child(even) a{
		    float: left;
			margin-left: 0;
		}

		#m-company_search ul#m_category04 li:nth-child(odd) a{
		    float: right;
			margin-left: 4%;
		}

		#m-company_search select{
		    font-size: 16px;
		}

		#m-company_search_result #search_list li span.m_category{
			display: none;
		}

		#m-company_search_result #search_list li a {
		    width: 100%;
		    float: left;
		}

		#m-company_search_result h2 span{
			display: none;
		}



}



/*=========================================================================================
for 480以下
=========================================================================================*/
@media only screen and (max-width: 480px){

	#header_sub_menu {
		width: 100%;
		padding: 4px 0;
		box-sizing: border-box;
	}

	#header_sub_menu_wrap li a{
		white-space: nowrap;
	}








	#page .detail_text{
		margin-left: 0px;
		margin-right: 0px;
	}

	#page .layout_line{
		padding-left: 0%;
	}

	#page .layout_left p.imagination,
	#page .layout_right p.imagination{
		width: 100%;
		text-align: center;
		padding: 0 0 1em;
	}

	#page .layout_line p.imagination{
		padding: 0 0 2em;
		width: 100%;
	}

	#page .layout_left p.imagination{
		padding-right: 0%;
	}

	#page .layout_left div.free{
		width: 100%;
	}


	#page .layout_right p.imagination{
		padding-left: 0%;
	}

	#page .layout_right div.free{
		width: 100%;
	}



	#page .eyecatch{
		width: 48%;
	}





	#internal_link, .paragraph{
		margin-left: 0;
		margin-right: 0;
	}

	#page dl.topics dt {
		line-height: 1;
		margin: 0;
		padding: 16px 0 8px;
		width: 100%;
		text-indent: 0;
	}

	#page dl.topics dd{
		padding: 0 0 8px;
		margin: 0;
		line-height: 1.6;
	}


	#page ul.topics {
	    width: 100%;
	    padding: 0;
	}

	#page ul.topics li {
	    padding: 16px 0;
	}

	#page ul.topics li:first-child {
	    padding-top: 0px;
	}

	#page ul.topics li .date{
		display: inline;
	    width: 100%;
	}

	#page ul.topics li .wrap {
		float: none;
		padding: 0 0 16px;
	}

	#page ul.topics li .status {
		display: block;
		width: 100%;
	}

	#page ul.topics li .status .cat {
	    position: relative;
	    top: -3px;
	}

	#page #page_nav{
    	margin: 2em auto 0;
	}



	#m-company_search ul#m_category01 li a {
	    display: block;
	    float: none;
	    padding: 8px 0;
	    width: 100%;
		margin-left: 0;
	}

	#m-company_search ul#m_category01 li:nth-child(2n+1) a {
	    margin-left: 0;
	}

	#m-company_search ul#m_category03 li a{
	    width: 100%;
	    float: none;
	    margin-left: 0%;
	}

	#m-company_search ul#m_category03 li:nth-child(1) a {
	    width: 100%;
	}

	#m-company_search ul#m_category04 li a{
	    width: 100%;
	    float: none;
	    margin-left: 0%;
	}

	#m-company_search ul#m_category04 li:nth-child(1) a {
	    width: 100%;
	}

	#m-company_search select{
	    font-size: 16px;
	}

	#m-company_search_result #search_list li span.m_category{
		display: none;
	}

	#m-company_search_result #search_list li a {
	    width: 100%;
	    float: none;
	}

	#m-company_search_result h2 span{
		display: none;
	}
}