@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 1001 - 1296px
=========================================================================================*/
@media screen and (min-width: 1001px) and (max-width: 1296px){

				#home #header_wrapper {
				    top: 0;
				}

				#home #main_images_wrapper{
					width: 100%;
				}

				#recommend_event_wrapper ul{
					width: 100%;
				}

				#button_large_wrapper ul{
					width: 100%;
				}

				#button_large_wrapper ul li a{
					width: 236px;
				}

				#button_middle_wrapper ul {
					width: 100%;
				}

				#home #news_wrapper{
					right: 4%;
				}

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

				#field_list li a:hover:before{
					display: none;
				}

				#field_list li a:hover{
					opacity: 0.8;
				}

}


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

	.slick-dots{
		display: none;
	}

	.slick-dots li{
		display: none;
	}
	.slick-dots li button{
		display: none;
	}

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

		#home #navs{
			position: absolute;
		}

		#home #navs.fixed{
			position: absolute !important;
			top: 0 !important;
			z-index: 101;
		}

		#home #main_images{
			width: 100%;
			height: auto;
		}

		#home #home_main_button{
			width: 100%;
		}

		#main_images > div{
			width: 100%;
		}

		#button_large_wrapper ul{
			width: 100%;
		}

		#main_images_wrapper{
			width: 100%;
			height: auto;
		}


		#recommend_event_wrapper{
			background-size: 192% 64%;
		}

		#recommend_event_wrapper ul{
			width: 100%;
		}

		#button_middle_wrapper ul{
			width: 100%;
		}

		#bottom_wrapper ul{
			width: 100%;
		}
}


/*=========================================================================================
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;
			}

			#pick_up {
			    width: 432px;
				height: 335px;
				margin-bottom: 0;
			    overflow-y: auto;
			}

			#pick_up .slick-slide{
				height: 335px !important;
			}

			#pick_up li:not(.cnt) .img img{
			    max-width: 100%;
			    max-height: 335px;
				margin: 0 auto;
			}

			#home #button_large_wrapper ul li a{
				width: 272px;
				margin-left: 8px;
				margin-right: 8px;
			}

			#button_large_wrapper ul li:nth-child(3) a{
				margin-top: 16px;
			}

			#home #news_wrapper{
				right: 4%;
			}



			#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%;
			}



			#home ul.topicses li .date {
			    display: block;
			    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 #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 #navs.fixed{
			position: absolute !important;
			top: 0 !important;
		}


		#event_today.summarys {
		    width: 92%;
		}



		#pick_up{
			float: none;
			width: 92%;
			height: auto;
			padding: 0;
			margin: 4%;
			font-size: 88%;
			height: 298px;
		    overflow-y: scroll;
		}

		#pick_up .slick-slide{
			height: 298px !important;
		}

		#pick_up li .img{
		    width: 100%;
		}

		#pick_up li:not(.cnt) .img img{
		    max-width: 100%;
		    max-height: 298px;
			margin: 0 auto;
		}

		#pick_up li.cnt .img {
		    width: 26.834%;
		}

		#pick_up ul li.detail a {
		    margin-top: 8px;
		}

		#event_today {
		    float: none;
		    width: 92%;
		    margin: 4%;
			font-size: 80%;
			padding: 16px;
		    height: 220px;
		    overflow-y: scroll;
		}



		#button_large_wrapper ul li a{
			width: 272px;
			margin: 8px 8px 0;
		}

		#button_large_wrapper ul li:nth-child(3) a{
			margin-top: 8px;
		}

		#home #news_wrapper{
			right: 4%;
		}


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

		#home #side_column{
			clear: both;
			margin: 24px 0;
			float: none;
			overflow: hidden;
			width: 100% !important;
		}

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

		#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: 2.32%;
		}

		#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 .layout_left .free,
		#home .layout_right .free,
		#home .layout_left img,
		#home .layout_right img{
			width: 48%;
		}



		#home h2.lists{
			font-size: 124%;
		}

		#home #news_wrapper,
		#home #event_wrapper {
		    width: 100%;
		}

		#news_wrapper h2 a#list_of_news,
		#event_wrapper h2 a#list_of_event{
			top: 32px;
		}

		#home ul.topicses li .date {
		    display: block;
		    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 {
		    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;
		}


}



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

	#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 #mainElement{
		min-height: 0;
		width: 100%;
	}

	#main_images{
		height: auto;
	}

	#main_images img{
		width: 100%;
	}



	#event_today.summarys {
			width: 92%;
	}


	#pick_up{
		float: none;
		width: 92%;
		height: auto;
		padding: 0;
		margin: 4%;
		font-size: 88%;
		height: 298px;
	    overflow-y: scroll;
	}

	#pick_up .slick-slide{
		height: 298px !important;
	}

	#pick_up li:not(.cnt) .img img{
	    max-width: 100%;
	    max-height: 298px;
		margin: 0 auto;
	}

	#pick_up li.cnt .img {
	    width: 37.62%;
	}

	#pick_up li.cnt .img {
	    padding: 16px 0px 16px 4%;
	}

	#pick_up li.cnt .img + ul {
	    padding: 16px 4%;
	}



	#pick_up ul li.detail a {
	    margin-top: 8px;
	}

	#event_today {
	    float: none;
	    width: 92%;
	    margin: 4%;
		font-size: 80%;
		padding: 16px;
	    height: 220px;
	    overflow-y: scroll;
	}





	#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: 8px 0 0;
	}


	#home #side_column {
	    margin: 8px 0 0;
	    width: 100% !important;
	    float: none;
	    clear: both;
	}






	#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.buttons8 li{
		width: 48.75%;
		margin-bottom: 4px;
	}

	#home ul.buttons8 li:nth-child(odd){
		float: left;
		padding-left: 0;
		margin-left: 0;
	}

	#home ul.buttons8 li:nth-child(even){
		float: right;
		padding-left: 2.5%;
		margin-left: 0;
	}





	table {
		width: 100%;
	}



	#button_large_wrapper{
	    padding: 24px 12%;
	}

	#button_large_wrapper ul li a{
		display: block;
		width: 246px;
	    margin: 8px auto 0;
	    font-size: 108%;
	    padding: 16px 0;
	    box-sizing: border-box;
	}

	#button_large_wrapper ul li:first-child a{
	    margin: 0 auto;
	}

	#button_middle_wrapper {
	    padding: 24px 0;
	}

	#button_middle_wrapper ul li a {
		display: block;
		padding: 16px 0;
		width: 246px;
		margin: 8px auto 0;
		box-sizing: border-box;
	}

	#button_middle_wrapper ul li:first-child a{
		margin: 0 auto 0;
	}

	#home #news_wrapper,
	#home #event_wrapper{
	    width: 100%;
	    margin-bottom: 20px;
	}

	#home #news_wrapper{
		padding-left: 0;
		padding-right: 0;
	}

	#home h2.lists {
	    padding: 12px 4%;
	    font-size: 132%;
	    text-align: center;
		border-top: none;
		margin: 0;
	}

	#news_wrapper h2 a#list_of_news,
	#event_wrapper h2 a#list_of_event {
	    top: 22px;
	    right: 0;
	    font-size: 52%;
	}

	#news_wrapper h2 a#list_of_news{
		padding-right: 8px;
	}

	#home ul.topicses li .date {
	    display: block;
	    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 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 + img{
		display: none;
	}








	#home ul.topicses li a {
	    width: 100%;
		margin-left: 0;
		margin-top: 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%;
	}
}