@charset "utf-8";

/*
 * Site Name: connetta WEB Smart5
 * File Name base_op.css
 * Description: Basic Style for Responsive
 * Version: 1.0
 * Author: DIS_ART_WORKS
 */



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

			ul#main_nav li a{
				font-size: 80%;
			}

			ul#cat_list li a {
			    display: block;
			    width: 33%;
			}

			ul#cat_list li:nth-child(3n+1) a {
				margin-left: 0;
			}

}


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

			#header_wrapper{
				padding: 0;
				box-sizing: border-box;
			}

			#header h1 + #group, #header p#title + #group{
				display: none;
			}

			#header #header_top_right{
				display: none;
			}

			#header_contact{
				display: none;
			}

			ul#main_nav li a:before{
				display: none;
			}




			ul#main_nav li:nth-child(1) a span{
				display: block;
			}

			ul#main_nav li a:hover:after,
			ul#main_nav li.current a:after{
				display: none;
			}



			#main_column {
				overflow: hidden;
			}

			#main_wrapper{
				width: 100%;
				padding: 0 4%;
				margin-top: 0;
				box-sizing:border-box;
			}


			ul#topicpath{
				padding: 12px 4% 0;
			}



			#content_wrapper{
				width: 100%;
				margin-top: 0;
				box-sizing:border-box;
			}

			#nav_home{
				display: block;
			}








			ul#cat_list li a {
			    display: block;
			    width: 33%;
			}

			ul#cat_list li:nth-child(3n+1) a {
				margin-left: 0;
			}










			/* 現在地 追加*/



			/* 開閉ナビ　ここから */

			#open_navs{
				display: block;
				position: absolute;
				top: 24px;
				right: 4%;
				width: 40px;
				height: 40px;
				display: block;
				padding: 0px;
				z-index: 40;
				background: none;
				overflow: hidden;
				color: #fff;
				width:50px\9;
				height:50px\9;
				padding: 0px\9;
			}

			#open_navs a{
				display: block;
				width: 40px;
				height: 40px;
				width: 50px\9;
				height: 50px\9;
				z-index: 41;
			}

			#open_navs a span{
				display:none;
			}

			#open_navs a:before{
				display: block;
				content: "";
				width: 24px;
				height: 28px;
				margin: 8px;
				background: -moz-linear-gradient   (top, #3eba2b, #3eba2b 50%, #fff 50%, #fff);
				background: -webkit-linear-gradient(top, #3eba2b, #3eba2b 50%, #fff 50%, #fff);
				background: linear-gradient        (top, #3eba2b, #3eba2b 50%, #fff 50%, #fff);
				background-size: 20px 10px;
			}

			#open_navs.close_icon a:before{
				display: none;
			}

			#open_navs a:hover{
				text-decoration: none;
			}

			#header h2#open_navs {
				margin: 0;
			}

			#navs{
				right: 0;
				position: absolute;
				width: 100%;
				padding: 0;
				z-index: 101;
				background-color: #fff;
			}

			#navs > *:first-child{
				padding-top: 0px;
			}

			#header .opened_menu{
				transition: all 500ms;
				padding-bottom: 0;
				max-width: 5000px;
				z-index: 101;
			}

			#navs_wrapper.close_disp{
				display: block;
				width: 100%;
				background-color: #000;
				background: rgba(0 , 0 , 0 , 0.7);
				z-index: 50;
			}

			#navs_wrapper{
				display: none;
			}

			#header #language_select{
				display: none;
			}

			#header #header_right{
				display: none;
			}

			ul#main_ex_nav{
				display: none;
			}



			#open_navs.open_disp{
				display: block !important;
			}

			#open_navs.close_disp{
				display: none !important;
			}

			ul#main_nav{
				margin:7em 1% 1em;
				float:none;
			}

			ul#fcontents_nav{
				display: block;
			}

			ul#main_nav,
			ul#sub_nav,
			ul#fcontents_nav,
			#navs ul{
				display: block;
				text-align: center;
				position: static;
				width: 100%;
				margin: 0;

			}

			.header_side_menu{
				padding-top: 0em;
			}

			.header_side_menu{
				display: block;
				box-shadow: 0px 2px 0px #000;
			}

			.header_side_menu h2 a,
			.header_side_menu h2 span{
				color: #fff !important;
			}

			#navs .header_side_menu ul{
				margin:0;
			}

			ul#main_nav li,
			ul#sub_nav li,
			ul#fcontents_nav li,
			#navs ul li {
				display: block;
				padding: 0;
				width: 100%;
				position: static;
				border-top: 1px solid #ffffff;
				text-align: left;
				overflow: hidden;
			}

			ul#main_nav li:first-child{
				border-top: 1px solid #fff;
			}

			ul#main_nav li a,
			ul#sub_nav li a,
			ul#fcontents_nav li a,
			#header_side_menu ul li a,
			#navs ul li a {
				width: 100%;
				display: block;
				line-height: 1.6;
				padding: 16px 4%;
				font-size: 88%;
				background-color: #3eba2b;
				color:#fff !important;
				position: static;
				font-weight:bold !important;
				box-sizing: border-box;
				font-family: "メイリオ", Meiryo, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif;
			}

			ul#main_nav li a .en{
				display: none;
			}

			ul#main_nav li a{
				border-right: none;
			}

			ul#main_nav li:first-child a{
				border-left: none;
			}

			ul#main_nav li:nth-child(1) a:before{
				display: none;
			}

			ul#main_nav li.current a,
			ul#sub_nav li.current a,
			ul#fcontents_nav li.current a,
			#navs ul li.current a {
				/*background-color: #002c5c;*/
			}

			ul#main_nav li a:hover{
				/*background-color: #9EA0BF;*/
			}

			#navs h2 a{
				color: #fff;
				display: block;
			}

			#navs h2 a:hover{
				text-decoration: none;
			}

			.header_side_menu ul{
				overflow: hidden;
			}

			.header_side_menu ul.current{
				max-height: 5000px;
			}

			.header_side_menu h2{
				display: block;
				width: 100%;
				padding: 8px 0;
				font-size: 88% !important;
				margin: 0;
				background-color: #0392d3;
			    border-top: 1px solid #ffffff;
			}

			.header_side_menu h2 a{
				display: block;
				padding: 0 4%;
			}

			#header_sub_menu_add{
				display: block;
			}

			ul#sub_nav{
				padding-left: 0;
			    padding-right: 0;
			}

			ul#sub_nav li:before{
				display: none;
			}

			ul#sub_nav li a{
				height: auto;
				min-width: auto;
				margin: 0;
			}

			ul#sub_nav li a:before{
				display: none;
			}

			ul#sub_nav li a:after{
				display: none;
			}

			#side_column .menu ul a{
				padding: 12px 16px 12px 32px;
			}

			#bottom_buttons{
				bottom: 0;
				right: 0;
				z-index: 1100;
			}

			.opened_bottombuttons{
				right: 400px;
			}

			#open_navs_b {
				display: none;
				position: absolute;
				top: 16px;
				right: 12px;
				z-index: 11000;
			}

			#open_navs_b.opened_icon {
				display: none !important;
				background: none;
				border: none;
			}

			#open_navs_b.opened_icon a{
				width: 40px;
				height: 40px;
				background: none;
				position:relative;
			}


			#header #navs_wrapper_p a{
				position: absolute !important;
				top: 24px;
				right: 4%;
			}

			#navs_wrapper_a{
				position: absolute;
				display: block;
				height: auto !important;
				right: 4%;
				top: 32px;
				height: 40px !important;
				width: 40px !important;
				z-index: 99999 !important;
			}

			#open_navs_b.opened_icon:before,/* メニュー×ボタン */
			#open_navs_b.opened_icon:after,
			#navs_wrapper_a:before,
			#navs_wrapper_a:after{
				display: block;
				content: "";
				position: absolute;
				top: 50%;
				left: 0;
				width: 24px;
				height: 4px;
				background: #333;
				margin-top: -2px;
				margin-left: 8px;
				z-index: 9999999;
			}

			#open_navs_b.opened_icon:before,
			#navs_wrapper_a:before{
				transform: rotate(-45deg);
				-webkit-transform: rotate(-45deg);
			}

			#open_navs_b.opened_icon:after,
			#navs_wrapper_a:after{
				transform: rotate(-135deg);
				-webkit-transform: rotate(-135deg);
			}

			/* 開閉ナビ　ここまで */


			/* 表示しないメニュー */
			ul#fcontents_nav{
				display: none;
			}

			#footer_wrapper_top #footer_top {
			    width: 100%;
			    padding: 16px 4%;
			    overflow: hidden;
			    display: block;
			    box-sizing: border-box;
			}

			#footer_wrapper_top #footer_top #footer_top_left {
 				float: none;
			}

			#footer_wrapper_top #footer_top #footer_top_right {
 				float: none;
				clear: both;
			}

			ul#main_nav_footer li {
			    display: inline;
			    margin-left: 0;
			    margin-right: 1em;
			}

			#footer {
			    padding: 16px 4% 80px;
			    text-align: center;
			}

			#footer_wrapper p{
				padding-right: 4%;
				padding-left: 4%;
			}

			#footer_wrapper_bottom {
			    padding: 8px 4%;
			}

			#footer_wrapper_bottom #footer_bottom {
			    width: 100%;
			    margin: 0 auto;
			}

			#footer_wrapper_bottom #footer_bottom #footer_bottom_left {
			    float: none;
				text-align: center;
			}

			#footer ul#footer_nav {
			    width: 100%;
			    float: none;
			    margin: 0px auto;
			}

			#footer_wrapper_bottom #footer_bottom #footer_bottom_right {
			    float: none;
				text-align: center;
			}

			#footer ul#footer_nav li a:before,
			#footer ul#footer_nav li a:before{
				left: -12px;
			}

			#footer #footer_copyright {
			    float: none;
			}

}


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

		#main_column {
			float: none;
			width: 100%;
			padding: 24px 4%;
		}

		#main_column h1 {
		    padding: 8px 0 24px 0;
		}

		#side_column{
			width: 100%;
			float: none;
			margin:0 auto;
		}


}


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

				/* header */
				#header h1,
				#header p#title{
					min-height: 0;
				}

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

				#header_mail{
				    right: calc(4% + 286px);
				}

				#header_tel{
				    right: 4%;
				}

				#header #header_right {
				    right: 4%;
				}

				ul#sub_nav li:first-child{
					display: none;
				}

				#header #header_right .google_search {
				    right: 4%;
				}

				#header #header_right #google_translate {
					right: 4%;
					margin-right: 191px;
				}

				#header_contact {
				    right: 4%;
				}

				/* nav */
				ul#main_nav {
					float: none;
				    width: 100%;
					box-sizing: border-box;
					margin: 0 auto;
				}

				ul#main_ex_nav{
					margin-right: 4%;
				}


				#navs_wrapper {
				    width: 100%;
				}



				/* mainimage */
				.main_image{
					padding: 0 4%;
					max-width: 100%;
					box-sizing: border-box;
				}

				#content_wrapper {
				    position: relative;
				    width: 100%;
					max-width: 100%;
					box-sizing: border-box;
				}




				#footer {
					padding-right: 4%;
					padding-left: 4%;
					box-sizing:border-box;
				}

				#footer_wrapper_top{
					width: 100%;
				}

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


				#footer_wrapper_top #footer_top #footer_top_right{
					width: 48%;
				}

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

}

/*=========================================================================================
for 1001 - 1147
=========================================================================================*/
@media screen and (min-width: 1001px) and (max-width: 1182px){
	#header h1 + #group, #header p#title + #group{
		display: none;
	}
}


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

			#header{
				padding: 0;
				width: 100%;
				box-sizing: border-box;
			}

			/* header */
			#header #site_lead{
			    width: 50%;
				padding: 0.8em 4%;
			}

			#header h1,
			#header p#title{
				min-height: 0;
				padding: 24px 0 24px 4%;
			}

			#header h1 img,
			#header p#title img{
				vertical-align: middle;
				width: 280px;
			}


			#header #header_right{
				margin-right: 4%;
			}

			#header #header_top_right #h_sub_menu{
				display: none;
			}

			#header #header_top_right .google_search{
				right: 4%;
			}







			#header #header_top_right ul#h_sub_menu_btn{
				display: none;
			}

			#header #header_top_right .google_search{
				display: none;
			}




			#content_wrapper {
			    position: relative;
			    width: 100%;
				max-width: 100%;
				padding: 0 4%;
				box-sizing: border-box;
			}



			ul#main_nav li a {
			    border-bottom: none;
			}

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





			ul#sub_nav{
				padding-right: 0;
			}




			#main_wrapper{
				width: 100%;
				padding: 0;
				margin-top: 0;
				box-sizing:border-box;
			}

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





			#main_column {
				min-height: auto;
			}



			#footer_wrapper_top #footer_top {
			    width: 100%;
			    padding: 8px 4%;
			    text-align: center;
				box-sizing: border-box;
			}

			#footer #logo_footer {
			    float: none;
			}

			#footer #logo_footer img {
			    top: 0;
			    margin-right: 0;
			}

			ul#footer_tel {
			    float: none;
				position: static;
				margin-top: 14px;
				line-height: 1.6;
			}

			#footer_wrapper_top #footer_top #footer_top_right {
			    float: none;
			}

			#footer #footer_copyright{
				text-align: center;
			}

			ul#main_nav_footer{
				position: static;
				margin-top: 15px;
			}

			ul#main_nav_footer li {
			    white-space: nowrap;
			}

			#footer ul#footer_nav {
			    width: 100%;
			    float: none;
			    margin: 0px auto 4px;
			}

			#footer ul#footer_nav li {
			    float: none;
			    margin-left: 0;
			    text-align: center;
			}

			#footer ul#footer_nav li a {
			    padding: 8px 0 0;
			}

			#footer ul#footer_nav li:first-child a {
			}

			#footer_wrapper_bottom {
			    padding: 8px 4%;
			}

			#footer_wrapper_bottom #footer_bottom {
			    width: 100%;
				text-align: center;
			}

			#footer_wrapper_bottom #footer_bottom #footer_bottom_right {
			    float: none;
			}

			#footer #footer_lead {
			    float: none;
			    width: 100%;
				margin-top: 8px;
			    text-align: center;
			}



}

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

		#header{
			padding: 0;
			width: 100%;
			box-sizing: border-box;
		}

		#header h1 img,
		#header p#title img{
			vertical-align: middle;
			width: 280px;
		}

		#content_wrapper{
			padding-bottom: 0;
		}



		ul#main_nav li a {
		    border-bottom: none;
		}

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

		/*
		 * main
		 */
		#main_column table{
			width: 100% !important;
			box-sizing: border-box;
		}

		#main_column table tbody{
		}

		ul#sub_nav{
			padding-right: 0;
		}


		/*
		 * side
		 */

		#side_column .menu{
			display: none;
		}

		#side_column .menu h2 a{
			display: block;
			height: 100%;
			color: #fff;
			text-align: left;
		}

		#side_column .menu h2 span{
			display: none;
		}

		#side_column .menu ul{
			transition: all 500ms;
			/*max-height: 0;*/for open effect
			overflow: hidden;
			display: block;
		}


		#side_column .menu ul.opened_menu{
			transition: all 500ms;
			max-height: 500px;

		}


		#side_column .menu ul a{
			float: none;
			margin:0 auto 0;
			/*padding: 0;*/
		}

		ul#side_banner,
		ul#bottom_banner{
			margin: 0;
			width: 100%;
		}



		/*
		 * head
		 */
		#header #site_lead{
			display: none;
		}

		#header #header_top_right .google_search{
			display: none;
		}


		#open_navs{
			top: 24px;
			right: 4%;
		}

		#navs_wrapper{
		    width: 100%;
		}




		#header #navs_wrapper_p a.navs_wrapper_a{
			position: absolute !important;
			top: 24px;
			right: 4%;
		}





		ul#cat_list li a#cat_all:after{
			display: none;
		}



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


		/*
		 * other parts
		 */
		#go_to_top a{
			position: static;
			bottom: 12px;
			right: 12px;
			z-index: 10;
		}


		.header_side_menu ul.open_menu{
			max-height: 50000px;
		}

		#footer_nav_wrapper li:first-child{
			border-left:none;
		}

		#footer #footer_copyright{
		}

		#footer #footer_lead {
		    padding: 8px 0 0;
		    box-sizing: border-box;
		    text-align: center;
		}

		#header h1,
		#header p#title{
			min-height: 0;
			padding: 24px 0 24px 4%;
			width: 80%;
		}

		#header h1 img#logo_sub,
		#header p#title img#logo_sub{
			margin-top: 4px;
			margin-left: 0;
		}





		#main_column {
			min-height: auto;
		}


		ul#side_banner,
		ul#bottom_banner{
			padding: 1em 4%;
			box-sizing: border-box;
		}

		ul#side_banner li,
		ul#bottom_banner li{
			display: inline-block;
			margin: 1em 0 0 2%;
			padding: 0;
			width: 32%;
		}

		ul#side_banner li:nth-child(3n+1),
		ul#bottom_banner li:nth-child(3n+1){
			margin-left: 0;
		}

		ul#side_banner li:nth-child(1),
		ul#bottom_banner li:nth-child(1),
		ul#side_banner li:nth-child(2),
		ul#bottom_banner li:nth-child(2),
		ul#side_banner li:nth-child(3),
		ul#bottom_banner li:nth-child(3){
			margin-top: 0;
		}




		#side_column .menu .parent a:hover{
			background-color: #fff !important;
		}




		#footer_wrapper_top #footer_top {
		    width: 100%;
		    padding: 8px 4%;
		    text-align: center;
			box-sizing: border-box;
		}

		#footer #logo_footer {
		    float: none;
		}

		#footer #logo_footer img {
		    top: 0;
		    margin-right: 0;
		}

		ul#footer_tel {
		    float: none;
			position: static;
			margin-top: 14px;
			line-height: 1.6;
		}

		#footer_wrapper_top #footer_top #footer_top_right {
		    float: none;
		}

		#footer #footer_copyright{
			text-align: center;
		}

		ul#main_nav_footer{
			position: static;
			margin-top: 15px;
		}

		ul#main_nav_footer li {
		    white-space: nowrap;
		}

		#footer ul#footer_nav {
		    width: 100%;
		    float: none;
		    margin: 0px auto 4px;
		}

		#footer ul#footer_nav li {
		    float: none;
		    margin-left: 0;
		    text-align: center;
		}

		#footer ul#footer_nav li a {
		    padding: 8px 0 0;
		}

		#footer ul#footer_nav li:first-child a {
		}

		#footer_wrapper_bottom {
		    padding: 8px 4%;
		}

		#footer_wrapper_bottom #footer_bottom {
		    width: 100%;
			text-align: center;
		}

		#footer_wrapper_bottom #footer_bottom #footer_bottom_right {
		    float: none;
		}

		#footer #footer_lead {
		    float: none;
		    width: 100%;
			margin-top: 8px;
			text-align: center;
		}

}


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

	#header_wrapper{
		padding: 0;
		border-bottom: 1px solid #ccc;
	}

	#site_lead{
		display: none;
	}

	#header{
		padding: 0;
		width: 100%;
		box-sizing: border-box;
	}

	#header #site_lead{
	    padding: 0 4%;
		width: 56%;
	}

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

	#header h1 img#logo_sub,
	#header p#title img#logo_sub{
		margin-top: 4px;
		margin-left: 0;
	}

	#header h1 img,
	#header p#title img{
		vertical-align: middle;
		width: 172px;
	}



	#header #header_top_right{
		display: none;
	}

	#header #header_right{
		display: none;
	}


	#open_navs{
		top: 16px;
	}

	#navs_wrapper_p a{
		top: 12px;
	}

	#open_navs_b {
		top: 0;
	}

	ul#main_ex_nav{
		display: none;
	}

	ul#main_nav li a {
	    border-bottom: none;
	}

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


	ul#topicpath li{
	    font-size: 0.8em;
	}


	#main_column {
		min-height: auto;
	}


	#main_column h1{
		padding: 0 0 16px;
		font-size: 144%;
	}





	ul#cat_list li a {
		font-size: 72%;
	}

	ul#cat_list li a#cat_all:after{
		display: none;
	}


	ul#side_banner,
	ul#bottom_banner {
	    margin: 0 auto;
		padding: 1em 4%;
	    box-sizing: border-box;
	}

	ul#side_banner li,
	ul#bottom_banner li{
		line-height: 1;
		margin: 8px 0 0;
		padding: 0;
		width: 48%;
	}

	ul#side_banner li:first-child,
	ul#bottom_banner li:first-child{
		margin: 0;
	}

	#side_column .menu dd a:before,
	#side_column .menu li a:before{
	}

	#page_nav .end{
		display: none;
	}

	.go_to_top{
		bottom: 2%;
		right: 2%;
	}

	ul#side_banner li,
	ul#side_banner li:first-child,
	ul#bottom_banner li,
	ul#bottom_banner li:first-child{
		text-align: center;
		width: 100%;
	}



	#side_column .menu .parent a:hover{
		background-color: #fff !important;
	}






	#footer_wrapper_top #footer_top {
	    width: 100%;
	    padding: 8px 4%;
	    text-align: center;
		box-sizing: border-box;
	}

	#footer #logo_footer {
	    float: none;
	}

	#footer #logo_footer img {
	    top: 0;
	    margin-right: 0;
	}

	ul#footer_tel {
	    float: none;
		position: static;
		margin-top: 14px;
		line-height: 1.6;
	}

	#footer_wrapper_top #footer_top #footer_top_right {
	    float: none;
	}

	#footer #footer_copyright{
		text-align: center;
	}

	ul#main_nav_footer{
		position: static;
		margin-top: 15px;
	}

	ul#main_nav_footer li {
	    white-space: nowrap;
	}

	#footer ul#footer_nav {
	    width: 100%;
	    float: none;
	    margin: 0px auto 4px;
	}

	#footer ul#footer_nav li {
	    float: none;
	    margin-left: 0;
	    text-align: center;
	}

	#footer ul#footer_nav li a {
	    padding: 8px 0 0;
	}

	#footer ul#footer_nav li:first-child a {
	}

	#footer_wrapper_bottom {
	    padding: 8px 4%;
	}

	#footer_wrapper_bottom #footer_bottom {
	    width: 100%;
		text-align: center;
	}

	#footer_wrapper_bottom #footer_bottom #footer_bottom_right {
	    float: none;
	}

	#footer #footer_lead {
	    float: none;
	    width: 100%;
		margin-top: 8px;
	    text-align: center;
	}




	#page_lead{
		margin-top: 0px;
	}

	#page h2 {
	    font-size: 1.1em;
	}

	#page h3 {
	    font-size: 1.1em;
		padding: 4px 0px;
	}


}