@charset "utf-8";

/*
 * Site Name: connetta WEB Smart5
 * File Name home_op.css
 * Description: index.php Style for Responsive
 * Version: 1.0
 * Author: DIS_ART_WORKS
 */

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

		#home #news_wrapper,
		#home #sponsor_wrapper,
		#home #specials,
		#home #member_wrapper{
			padding: 40px 4%;
		    box-sizing: border-box;
		}

		#home #mainElement{
			min-height: 0;
		}

		#home #main_images{
			width: 100%;
		}

		#home #home_main_button{
			width: 100%;
		}

		#main_images > div{
			width: 100%;
		}

		#home #content_wrapper{
			padding: 0;
		}

		#home #content_wrapper > *{
			width: 100%;
		}

		#home #specials,
		#home #specials > *{
			width: 100%;
		}

		#home #news_wrapper > *{
			width: 100%;
		}

		#home #sponsor_wrapper > *{
			width: 100%;
		}

		#home #member_wrapper > *{
			width: 100%;
		}

		#footer_wrapper_top{
			width: 100%;
		}


}


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

				#home #header_wrapper {
				    top: 0;
				}


				#home #content_wrapper > *{
					width: 100%;
				    box-sizing: border-box;
				}

				#home #content_wrapper{
					padding: 0;
				}

				#home_main_wrap{
					width: 100%;
					padding-right: 4%;
					padding-left: 4%;
					box-sizing: border-box;
				}

				#home #sponsor_wrapper > * {
				    width: 100%;
				    padding: 0 4%;
				    box-sizing: border-box;
				}

				#sponsor_wrapper #list_of_sponcer {
				    text-align: center;
				}

				#sponsor_wrapper #list_of_sponcer a{
					clear: both;
					position: static;
					margin-top: 16px;
				}

				#home dl#topics dd img{
					position: static;
				}





}

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


			#home #header_wrapper{
			    position: static;
			    z-index: 10;
			    top: 0;
			}



			#home ul#main_nav li a:hover, #home ul#main_nav li.current a{
				border-bottom: none;
			}


			#home ul#bottom_banner{
				width: 100%;
			    padding-left: 4%;
			    padding-right: 4%;
			    box-sizing: border-box;
			}


			#home_main_wrap{
				width: 100%;
			}






			#home #home_main_button > div img{
				width: 40%;
			}

			#home #home_main_button > div > ul{
 			   overflow: hidden;
			}


			#home .layout_left .free,
			#home .layout_right .free,
			#home .layout_left img,
			#home .layout_right img{
				width: 48%;
			}




			#sponsor_wrapper #sponsor_banner li {
			    width: 24%;
			    margin-left: 1%;
			    text-align: center;
			}

			#sponsor_wrapper #sponsor_banner li:nth-child(4n+1){
			    clear: both;
			    margin-left: 0;
			}

			#sponsor_wrapper #list_of_sponcer {
			    clear: both;
			    text-align: center;
			}

			#sponsor_wrapper #list_of_sponcer a{
				clear: both;
				position: static;
				margin-top: 16px;
			}





			#home #side_column {
			    margin: 24px 0;
			}

			#home h2.lists{
				margin-bottom: 0;
			}

			#home ul#topicses {
			    padding: 16px;
			}

			#home ul#topicses li .date {
			    display: inline;
			    width: 100%;
			}

			#home ul#topicses li .wrap {
			    float: none;
			    padding: 0 0 16px;
			}

			#home ul#topicses li {
				padding: 0;
			}

			#home ul#topicses li:first-child {
			    padding-top: 0px;
			}

			#home ul#topicses li:last-child {
			    padding-bottom: 0px;
			}

			#home ul#topicses li a .eyecatch {
			    width: 40%;
			}




}


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

		#home #news_wrapper,
		#home #sponsor_wrapper,
		#home #member_wrapper{
			padding: 40px 4%;
		    box-sizing: border-box;
		}

		#home #header_wrapper{
		    position: static;
		    z-index: 10;
		    top: 0;
		}




		#home ul#main_nav li a:hover, #home ul#main_nav li.current a{
			border-bottom: none;
		}





		#home #main_wrapper{
		    width: 100%;
		    padding: 0;
		}

		#home_main_wrap{
		    margin: 44px auto 0;
		    width: 100%;
			padding: 0 4% 12px;
		    box-sizing: border-box;
		}


		#home_main_wrap > #service_wrap,
		#home_main_wrap > #banner_wrap {
		    width: 100%;
			float: none;
		}


		#home_main_wrap > #service_wrap h2 img{
			width: 120px;
		}

		#home_main_wrap > #service_wrap ul li a{
		}

		#home_main_wrap > #service_wrap ul li a img{
		    width: 100%;
		}


		#home #main_column{
			float: none;
			width: 100%;
			clear: both;
		}

		#home #side_column{
			margin: 24px 0;
			float: none;
			overflow: hidden;
		}

		#home ul#buttons,
		#home ul#buttons_str{
			margin: 1em 0;
		}

		#home ul.buttons3 li,
		#home ul.buttons4 li{
			width: 31.5%;
			margin-left: 2.5%;
		}
		
		#home ul.buttons2 li{
			width: 48.5%;
			margin-left: 3%;
		}

		#home ul.buttons3 li{
			width: 31.5%;
			padding-left: 0;
		}

		#home ul.buttons2 li:nth-child(4),
		#home ul.buttons3 li:nth-child(4),
		#home ul.buttons4 li:nth-child(4){
			padding-left: 0;
		}

		#home ul.buttons3 li:first-child{
			padding-left: 0;
		}




		#home h2.lists{
			padding: 0.65em 4% 0;
			text-align: left;
			margin-bottom: 0;
		}

		#home a#list_of_news{
			top: 8px;
			right: 2%;
		}

		#home .layout_left .free,
		#home .layout_right .free,
		#home .layout_left img,
		#home .layout_right img{
			width: 48%;
		}


		#home #main_column h2{
		    padding: 32px 0;
			letter-spacing: 0;
		}



		#sponsor_wrapper #sponsor_banner li {
		    width: 24%;
		    margin-left: 1%;
		}

		#sponsor_wrapper #sponsor_banner li:nth-child(4n+1){
		    clear: both;
		    margin-left: 0;
		}

		#sponsor_wrapper #list_of_sponcer {
		    clear: both;
		    text-align: center;
		}

		#sponsor_wrapper #list_of_sponcer a{
			clear: both;
			position: static;
			margin-top: 16px;
		}


		#home ul#topicses li .date {
		    display: inline;
		    width: 100%;
		}

		#home ul#topicses li .wrap {
		    float: none;
		    padding: 0 0 16px;
		}

		#home ul#topicses li {
			padding: 0;
		}

		#home ul#topicses li:first-child {
		    padding-top: 0px;
		}

		#home ul#topicses li:last-child {
		    padding-bottom: 0px;
		}





		#home ul#topicses{
		    padding: 24px 4%;
		}

		#home ul#topicses li a {
		    width: 100%;
			margin-left: 0;
		}

		#home ul#topicses li:first-child a {
			margin-top: 0;
		}

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

		.box dt {
		    margin-bottom: 8px;
		}

		.box.gairai_jikan .button {
		    float: none;
		}
}



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

	#home #news_wrapper,
	#home #sponsor_wrapper,
	#home #member_wrapper{
		padding: 24px 4%;
	    box-sizing: border-box;
	}

	#home #header_wrapper{
	    position: static;
	    z-index: 10;
	    top: 0;
	}

	#home #header h1, #home #header p#title{
		padding: 24px 4%;
	}



	#home #main_wrapper{
	    width: 100%;
	    padding: 0;
	}

	#home ul#main_nav li a:hover, #home ul#main_nav li.current a{
		border-bottom: none;
	}

	#home #mainElement{
		min-height: 0;
		width: 100%;
	}

	#home_main_wrap{
	    margin: 12px auto 0;
	    width: 100%;
		padding: 0 4% 12px;
	    box-sizing: border-box;
	}



	#home_main_wrap > #service_wrap,
	#home_main_wrap > #banner_wrap {
	    width: 100%;
		float: none;
	}


	#home_main_wrap > #service_wrap h2 img{
		width: 120px;
	}

	#home_main_wrap > #service_wrap ul li a{
		width: 48%;
	}

	#home_main_wrap > #service_wrap ul li a img{
	    width: 100%;
	}

	#home_main_wrap > #service_wrap ul li:nth-child(odd) a{
		margin-left: 0;
	}

	#home_main_wrap > #service_wrap ul li:nth-child(even) a{
		float: right;
	}



	#home_main_wrap > #banner_wrap{
	    margin-top: 16px;
		overflow: hidden;
	}

	#home_main_wrap > #banner_wrap #home_banner li a{
		width: 48%;
	}

	#home_main_wrap > #banner_wrap #home_banner li:nth-child(even) a{
		float: right;
		margin-left: 0;
	}





	#home .layout_left .free,
	#home .layout_right .free,
	#home .layout_left img,
	#home .layout_right img{
		width: 48%;
	}

	#home .layout_left img{
		max-width: 140px;
		margin-right: 16px;
		float: left;
	}



	#home #main_column{
		width: 100%;
		margin-top: 16px !important;
	}

	#home #main_column h2{
		font-size: 160%;
	    padding: 24px 0 24px;
		letter-spacing: 0;
	}





	#sponsor_wrapper #sponsor_banner li {
	    width: 32%;
	    margin-left: 2%;
	}

	#sponsor_wrapper #sponsor_banner li:nth-child(3n+1){
	    clear: both;
	    margin-left: 0;
	}

	#sponsor_wrapper #list_of_sponcer {
	    clear: both;
	    text-align: center;
	}

	#sponsor_wrapper #list_of_sponcer a{
		clear: both;
		position: static;
		margin-top: 16px;
	}



	#member_wrapper ul li{
		margin-top: 16px;
	}

	#member_wrapper ul li:first-child{
		margin-top: 0;
	}



	#home #side_column {
	    margin: 24px 0;
	}






	#home ul#buttons,
	#home ul#buttons_str{
		margin: 0;
	}

	#home ul#buttons li,
	#home ul#buttons_str li{
	}

	#home ul.buttons2 li:first-child{
		margin-top: 1em !important;
	}

	#home ul.buttons2 li{
		width: 100%;
		margin-left: 0;
		margin-bottom: 1em !important;
	}

	#home ul.buttons3 li,
	#home ul.buttons4 li{
		width: 48.75%;
		padding-left: 2.5%;
		margin-bottom: 1em;
	}
	
	#home ul.buttons2 li:nth-child(3),
	#home ul.buttons3 li:nth-child(3),
	#home ul.buttons4 li:nth-child(3){
		margin-left: 0;
	}
	
	#home ul.buttons2 li:nth-child(4),
	#home ul.buttons3 li:nth-child(4),
	#home ul.buttons4 li:nth-child(4){
		margin-left: 2.5%;
	}

	#home ul.buttons3 li{
		width: 100%;
		margin-left: 0;
		padding-left: 0;
	}

	#home ul.buttons3 li:first-child{
		margin-top: 1em;
	}







	table {
		width: 100%;
	}

	#home h2.lists{
	    padding: 0.65em 4% 0;
	    text-align: left;
		margin-bottom: 0;
		font-size: 128%;
	}


	#home a#list_of_news{
		top: 8px;
	}

	#home ul#topicses li .date {
		display: inline;
	    width: 100%;
	}

	#home ul#topicses li .wrap {
	    float: none;
	    padding: 0 0 16px;
	}

	#home ul#topicses li {
		padding: 0;
	}

	#home ul#topicses li:first-child {
	    padding-top: 0px;
	}

	#home ul#topicses li:last-child {
	    padding-bottom: 0px;
	}

	#home ul#topicses li .status {
	    display: block;
	    width: 100%;
	}





	#home dl#topics{
		padding: 0 16px;
		box-sizing: border-box;
	}

	#home dl#topics dt:first-child + dd{
		border-top:none;
	}

	#home dl#topics dd {
		padding: 0 0 8px;
		margin: 0;
		line-height: 1.6;
		border-top:none;
		border-bottom: 1px dotted #D8D8D8;
	}





	#home a#list_of_topics{
	    left: auto;
	    right: 0;
	}

	#home a#list_of_topics:after{
		margin-right: 0;
	}

	#home h2.lists img{
		width: 172px;
	}

	#home h2.lists img + img{
		display: none;
	}






	#home ul#topicses{
	    padding: 8px 0;
	}

	#home ul#topicses li a {
	    width: 100%;
		padding: 12px 0;
	}

	#home ul#topicses li:first-child a {
		margin-top: 0;
	}

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






	#footer_wrapper > img{
		width: 80%;
	}
}