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

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

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


	#page h1 + .cat{
		right: 16em;
	}

	.event_box .search_box .search_box_right input[type="submit"] {
	    background: #f39800 url(../images/page/icon_search.jpg) no-repeat 80% 46%;
	    max-width: 272px;
	}

	body.event.event_calendar ul.cat_select li a {
	    min-width: 0;
	    font-size: 94%;
	}

}


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

	/* イベント
	------------------------------------------------------*/
	.event_box ul.tab li a {
	    width: 24%;
	}

	.event_box .search_box .search_box_left {
	    float: none;
	    width: 100%;
	    border-right: none;
	    border-bottom: 4px solid #f5f2e9;
	}

	.event_box .search_box .search_box_right {
	    float: none;
	    width: 100%;
	    padding: 8px 32px 32px;
	    overflow: hidden;
	}

	.event_box .search_box .search_box_right input[type="submit"]{
		max-width: 272px;
	}

	body.event .result ul li a {
	    display: block;
	    background: #fff;
	    float: left;
	    margin-left: 2%;
	    width: 32%;
	}

	body.event .result ul li:nth-child(5n+1) a{
	    margin-left: 1.6675%;
		clear: none;
	}

	body.event .result ul li:nth-child(3n+1) a{
	    margin-left: 0;
		clear: both;
	}


	/* イベントカレンダー
	------------------------------------------------------*/
	body.event.event_calendar ul.cat_select li a {
	    min-width: 42px;
	    font-size: 80%;
		box-sizing: border-box;
	    margin-bottom: 8px;
	}

	body.event.event_calendar ul.cat_select li:nth-child(odd) a {
		width: 49%;
		float: left;
	}

	body.event.event_calendar ul.cat_select li:nth-child(even) a {
		width: 49%;
		float: right;
	}

	body.event.event_calendar ul.cat_select li.back_to_today a {
	    float: none;
		width: 100%;
		margin-top: 16px;
	}

	/* イベント詳細
	------------------------------------------------------*/
	body.event_detail #main_column h2 {
	    margin: 32px 0 24px;
	}

}

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

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

	#page h1 + .cat{
		right: 14em;
	}



	#page dl.update dt {
	    padding: 8px 0 0;
	    width: 100%;
	}

	#page dl.update dd{
	    padding: 8px 0;
	    margin: 0;
	}

  #page #internal_link{
  margin-right: 4%;
  margin-left: 4%;
}


	/* 文化振興活動レイアウト
	------------------------------------------------------*/
	body.pr #main_column .lead_wrap img {
	    float: left;
	    width: 48%;
	}

	body.pr #main_column .blog_wrap_main img {
	    float: left;
	    width: 48%;
	}

	/* イベント
	------------------------------------------------------*/
	.event_box ul.tab li a {
	    width: 24%;
	}

	.event_box .search_box .search_box_left {
	    float: none;
	    width: 100%;
	    border-right: none;
	    border-bottom: 4px solid #f5f2e9;
	}

	.event_box .search_box .search_box_right {
	    float: none;
	    width: 100%;
	    padding: 8px 32px 32px;
	    overflow: hidden;
	}

	.event_box .search_box .search_box_right input[type="submit"]{
		max-width: 272px;
	}

	body.event .result ul li a {
	    display: block;
	    background: #fff;
	    float: left;
	    margin-left: 2%;
	    width: 32%;
	}

	body.event .result ul li:nth-child(5n+1) a{
	    margin-left: 1.6675%;
		clear: none;
	}

	body.event .result ul li:nth-child(3n+1) a{
	    margin-left: 0;
		clear: both;
	}


	/* イベントカレンダー
	------------------------------------------------------*/
	body.event.event_calendar ul.cat_select li a {
	    min-width: 42px;
	    font-size: 80%;
		box-sizing: border-box;
	    margin-bottom: 8px;
	}

	body.event.event_calendar ul.cat_select li:nth-child(odd) a {
		width: 49%;
		float: left;
	}

	body.event.event_calendar ul.cat_select li:nth-child(even) a {
		width: 49%;
		float: right;
	}

	body.event.event_calendar ul.cat_select li.back_to_today a {
	    float: none;
		width: 100%;
		margin-top: 16px;
	}


	/* イベント詳細
	------------------------------------------------------*/
	body.event_detail #main_column h2{
		margin: 32px 0 24px;
	}

	#eventguide_wrap .img_wrap{
		float: none;
		margin-right: 0;
	}
}


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

	#main_column h1 {
	    font-size: 144%;
	}

	/* イベント
	------------------------------------------------------*/
	.event_box ul.tab li a {
	    padding: 8px 4px;
	    width: 33.333%;
	    float: left;
	    margin-right: 0;
		height: 40px;
	    line-height: 26px;
	    font-size: 64%;
	    white-space: nowrap;
	    overflow: hidden;
	    text-overflow: ellipsis;
		box-sizing: border-box;
	}

	.event_box ul.tab li a:before {
	    float: left;
		top: 0px;
	}

	.event_box .search_box .search_box_left {
	    float: none;
	    width: 100%;
	    padding: 16px 4%;
	    overflow: hidden;
	    border-right: none;
	    border-bottom: 4px solid #f5f2e9;
	}

	.event_box .search_box .search_box_left dl dt {
	    width: 100%;
	    float: none;
	}

	.event_box .search_box .search_box_right {
	    float: none;
	    width: 100%;
	    padding: 16px 4%;
	    overflow: hidden;
	}

	body.event .list_num {
	    float: none !important;
	    width: 100% !important;
	    margin-top: 0px !important;
	    text-align: center !important;
	}

	body.event .pagination {
	    float: none !important;
	    margin-top: 16px !important;
	    margin-bottom: 16px !important;
	    text-align: center !important;
	}

	body.event .result ul li a {
		clear: both;
	    display: block;
	    background: #fff;
	    float: left;
	    margin-left: 0;
	    width: 49%;
	}

	body.event .result ul li:nth-child(5n+1) a{
	    margin-left: 0;
		clear: none;
	}

	body.event .result ul li:nth-child(3n+1) a{
	    margin-left: 0;
		clear: none;
	}

	body.event .result ul li:nth-child(even) a{
	    float: right;
	    margin-left: 0;
		clear: none;
	}

	body.event .result ul li a .img_wrap,
	body.event .result ul li a .img_wrap span{
		height: auto;
	}

	.event_box .search_box .search_box_left dl dd select{
	    margin-bottom: 8px;
	}

	/* イベントカレンダー
	------------------------------------------------------*/
	body.event.event_calendar .event_calendar_wrap {
	    padding: 0 4% 8px;
	}

	body.event.event_calendar ul.month_select li a {
	    padding: 8px 40px;
	    font-size: 78%;
	}

	body.event.event_calendar ul.month_select li.prev_month a:before {
	    border-width: 18px 20px 18px 0;
	}

	body.event.event_calendar ul.month_select li.next_month a:after{
		border-width: 18px 0 18px 20px;
	}

	body.event.event_calendar ul.month_select li a {
	    padding: 8px 16px;
	}

	body.event.event_calendar ul.month_select {
	    margin-top: -48px;
	}

	body.event.event_calendar ul.cat_select li a {
	    width: 100%;
	    box-sizing: border-box;
	    margin-bottom: 8px;
	}

	body.event.event_calendar ul.cat_select li:nth-child(odd) a {
		width: 49%;
		float: left;
	}

	body.event.event_calendar ul.cat_select li:nth-child(even) a {
		width: 49%;
		float: right;
	}

	body.event.event_calendar ul.cat_select li.back_to_today a {
	    float: none;
		width: 100%;
		margin-top: 16px;
	}

	body.event.event_calendar table.calendar_list thead{
		display: none;
	}

	body.event.event_calendar table.calendar_list tbody tr{
 	   border-top: 12px solid #fff;
	}

	body.event.event_calendar table.calendar_list tbody tr.blank{
		display: none;
	}

	body.event.event_calendar table.calendar_list tbody tr td {
	    display: block;
	    width: 100%;
		border: none;
	}

	body.event.event_calendar table.calendar_list tbody tr td.day {
		background: #e6dcbe;
	    font-weight: bold;
	    text-align: center;
	}

	body.event.event_calendar table.calendar_list tbody tr td.title,
	body.event.event_calendar table.calendar_list tbody tr td.time,
	body.event.event_calendar table.calendar_list tbody tr td.price,
	body.event.event_calendar table.calendar_list tbody tr td.reserve{
		text-align: left;
	}



	body.event.event_calendar table.calendar_list tbody tr td.title,
	body.event.event_calendar table.calendar_list tbody tr td.time,
	body.event.event_calendar table.calendar_list tbody tr td.price,
	body.event.event_calendar table.calendar_list tbody tr td.room,
	body.event.event_calendar table.calendar_list tbody tr td.reserve{
		text-align: left;
		width: 100%;
		clear: both;
	}

	body.event.event_calendar table.calendar_list tbody tr td.room
	{
		text-align: center;
		font-weight: bold;
		font-size: 1.1em;
	}

	body.event.event_calendar table.calendar_list tbody tr td.day,
	body.event.event_calendar table.calendar_list tbody tr td.week
	{
		float: left;
		width: 50%;
		display: inline-block;
		background: #e6dcbe;
		font-weight: bold;
	}

	body.event.event_calendar table.calendar_list tbody tr td.day{text-align: right;}
	body.event.event_calendar table.calendar_list tbody tr td.week{text-align: left;}


	body.event.event_calendar table.calendar_list tbody tr.noevent td.room,
	body.event.event_calendar table.calendar_list tbody tr.noevent td.title,
	body.event.event_calendar table.calendar_list tbody tr.noevent td.time,
	body.event.event_calendar table.calendar_list tbody tr.noevent td.price,
	body.event.event_calendar table.calendar_list tbody tr.noevent td.reserve{
		display: none;
	}

	body.event.event_calendar table.calendar_list tbody tr.offevent td.room,
	body.event.event_calendar table.calendar_list tbody tr.offevent td.time,
	body.event.event_calendar table.calendar_list tbody tr.offevent td.price,
	body.event.event_calendar table.calendar_list tbody tr.offevent td.reserve{
		display: none;
	}


	/* イベント詳細
	------------------------------------------------------*/
	body.event_detail .left_wrap {
	    float: none;
	    width: 100%;
	    text-align: center;
	}

	body.event_detail .right_wrap {
	    float: none;
	    width: 100%;
	    margin-top: 40px;
	}

	body.event_detail #main_column h2 {
	    margin: 32px 0 24px;
	}

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



	/* 文化振興活動レイアウト
	------------------------------------------------------*/
	body.pr #main_column {
	    float: none;
	    padding: 0;
	}

	body.pr #main_column h1 {
	}

	body.pr #main_column .lead_wrap img {
	    float: none;
	    margin-right: 0;
	    margin-bottom: 8px;
		width: 100%;
		max-width: 100%;
	}

	body.pr #main_column .blog_box {
		margin: 0;
		padding: 24px 4%;
	}

	body.pr #main_column .blog_box h2{
		font-size: 116%;
	    padding: 0 0px 8px;
	}

	body.pr #main_column .blog_box .date {
	    float: none;
	}

	body.pr #main_column .blog_box ul.info {
	    display: block;
	    float: none;
	    margin-top: 0;
	}

	body.pr #main_column .blog_wrap_main {
	    margin-top: 8px;
	}

	body.pr #main_column .blog_wrap_main img {
	    float: none;
	    margin-right: 0;
	    width: 100%;
		max-width: 100%;
	}

	body.pr #main_column .blog_wrap_main p {
	    margin-top: 8px;
	}



}

/*=========================================================================================
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 #internal_link{
		margin-right: 4%;
		margin-left: 4%;
	}






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

	#page ul.topics li .date{
		display: block;
		width: 100%;
		padding: 0;
	}

	#page ul.topics li .wrap {
	    float: none;
	    width: 100%;
	    padding: 0;
	}







	#topicses dd span,
	#page p.news_date span{
		position: absolute;
	    top: -1px;
	    left: 8em;
	}

	#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 #topicsTray .cat,
	#topics dd span.cat{
	    position: absolute;
	    top: -2.2em;
	    left: 11.5em;
	}




	/* 事業一覧 */
	body.service .child_wrap {
		display: block;
	    float: none;
	    width: 100%;
		margin-left: 0;
		margin-bottom: 16px;
	}



	/* 文化振興活動レイアウト
	------------------------------------------------------*/
	body.pr #main_column {
	    float: none;
	    padding: 0;
	}

	body.pr #main_column h1 {
	}

	body.pr #main_column .lead_wrap img {
	    float: none;
	    margin-right: 0;
	    margin-bottom: 8px;
		width: 100%;
	}

	body.pr #main_column .blog_box {
		margin: 0;
		padding: 16px 4%;
	}

	body.pr #main_column .blog_box h2{
		font-size: 116%;
	    padding: 0 0px 8px;
	}

	body.pr #main_column .blog_box .date {
	    float: none;
	}

	body.pr #main_column .blog_box ul.info {
	    display: block;
	    float: none;
	    margin-top: 0;
	}

	body.pr #main_column .blog_wrap_main {
	    margin-top: 8px;
	}

	body.pr #main_column .blog_wrap_main img {
	    float: none;
	    margin-right: 0;
	    width: 100%;
	}

	body.pr #main_column .blog_wrap_main p {
	    margin-top: 8px;
	}


	/* イベント
	------------------------------------------------------*/
	.event_box ul.tab li a {
	    padding: 8px 4px;
	    width: 33.333%;
	    float: left;
	    margin-right: 0;
		height: 40px;
	    line-height: 26px;
	    font-size: 64%;
	    white-space: nowrap;
	    overflow: hidden;
	    text-overflow: ellipsis;
		box-sizing: border-box;
	}

	.event_box ul.tab li a:before {
	    float: left;
		top: 0px;
	}

	.event_box .search_box .search_box_left {
	    float: none;
	    width: 100%;
	    padding: 16px 4%;
	    overflow: hidden;
	    border-right: none;
	    border-bottom: 4px solid #f5f2e9;
	}

	.event_box .search_box .search_box_left dl dt {
	    width: 100%;
	    float: none;
	}

	.event_box .search_box .search_box_right {
	    float: none;
	    width: 100%;
	    padding: 16px 4%;
	    overflow: hidden;
	}

	.event_box .search_box .search_box_right input[type="submit"] {
	    background: #f39800 url(../images/page/icon_search.jpg) no-repeat 73% 46%;
	    max-width: 272px;
	}

	body.event .list_num {
	    float: none !important;
	    width: 100% !important;
	    margin-top: 0px !important;
	    text-align: center !important;
	}

	body.event .pagination {
	    float: none !important;
	    margin-top: 16px !important;
	    margin-bottom: 16px !important;
	    text-align: center !important;
	}

	body.event .result ul li a {
	    float: none;
	    margin-left: 0;
	    width: 100%;
	    padding: 16px;
	    margin-bottom: 24px;
	}

	.event_box .search_box .search_box_left dl dd select{
	    margin-bottom: 8px;
	}

	/* イベントカレンダー
	------------------------------------------------------*/
	body.event.event_calendar .event_calendar_wrap {
	    padding: 40px 4%;
	}

	body.event.event_calendar ul.month_select li a {
	    padding: 8px 40px;
	    font-size: 78%;
	}

	body.event.event_calendar ul.month_select li.prev_month a:before {
	    border-width: 18px 20px 18px 0;
	}

	body.event.event_calendar ul.month_select li.next_month a:after{
		border-width: 18px 0 18px 20px;
	}

	body.event.event_calendar ul.month_select li a {
	    padding: 8px 16px;
	}

	body.event.event_calendar ul.month_select {
	    margin-top: -48px;
	}

	body.event.event_calendar ul.cat_select li a {
	    width: 100%;
	    box-sizing: border-box;
	    margin-bottom: 8px;
		padding: 8px 0;
		font-size: 80%;
	}

	body.event.event_calendar ul.cat_select li:nth-child(odd) a {
		width: 49%;
		float: left;
	}

	body.event.event_calendar ul.cat_select li:nth-child(even) a {
		width: 49%;
		float: right;
	}

	body.event.event_calendar ul.cat_select li.back_to_today a {
	    float: none;
		width: 100%;
		margin-top: 16px;
	}

	body.event.event_calendar table.calendar_list thead{
		display: none;
	}

	body.event.event_calendar table.calendar_list tbody tr{
 	   border-top: 12px solid #fff;
	}

	body.event.event_calendar table.calendar_list tbody tr.blank{
		display: none;
	}

	body.event.event_calendar table.calendar_list tbody tr td {
	    display: block;
	    width: 100%;
		border: none;

	}

	body.event.event_calendar table.calendar_list tbody tr td.room {
		text-align: center;
		font-weight: bold;
	}


	body.event.event_calendar table.calendar_list tbody tr td.day {
		background: #e6dcbe;
		font-weight: bold;
		text-align: center;
	}

	body.event.event_calendar table.calendar_list tbody tr td.title,
	body.event.event_calendar table.calendar_list tbody tr td.time,
	body.event.event_calendar table.calendar_list tbody tr td.price,
	body.event.event_calendar table.calendar_list tbody tr td.reserve{
		text-align: left;
		width: 100%;
		clear: both;
		display: inline-block;
	}

	body.event.event_calendar table.calendar_list tbody tr td.day,
	body.event.event_calendar table.calendar_list tbody tr td.week
	{
		float: left;
		width: 50%;
		display: inline-block;
		background: #e6dcbe;
	}

	body.event.event_calendar table.calendar_list tbody tr td.day{text-align: right;}
	body.event.event_calendar table.calendar_list tbody tr td.week{text-align: left;}

	body.event.event_calendar table.calendar_list tbody tr.noevent td.room,
	body.event.event_calendar table.calendar_list tbody tr.noevent td.title,
	body.event.event_calendar table.calendar_list tbody tr.noevent td.time,
	body.event.event_calendar table.calendar_list tbody tr.noevent td.price,
	body.event.event_calendar table.calendar_list tbody tr.noevent td.reserve{
		display: none;
	}

	body.event.event_calendar table.calendar_list tbody tr.offevent td.room,
	body.event.event_calendar table.calendar_list tbody tr.offevent td.time,
	body.event.event_calendar table.calendar_list tbody tr.offevent td.price,
	body.event.event_calendar table.calendar_list tbody tr.offevent td.reserve{
		display: none;
	}



	/* イベント詳細
	------------------------------------------------------*/
	body.event_detail .left_wrap {
	    float: none;
	    width: 100%;
	    text-align: center;
	}

	body.event_detail .right_wrap {
	    float: none;
	    width: 100%;
	    margin-top: 40px;
	}

	body.event_detail #main_column h2 {
	    margin: 32px 0 24px;
	}



	#guide_list li a{
	    display: block;
	}

	#eventguide_wrap .img_wrap{
		float: none;
		margin-right: 0;
	}

	#eventguide_wrap .img_wrap img{
		max-width: 276px !important;
	}

	#guide_list li:first-child{
		padding-top: 0;
	}

	#guide_list li:last-child{
		padding-bottom: 0;
	}

}

/*=========================================================================================
for - 1000
=========================================================================================*/
@media screen and (max-width: 1000px){
	body.content #content_container{
		margin-top: 0;
	}
}