@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 PC 980以下
=========================================================================================*/

@media only screen and (max-width: 980px){






}


/*=========================================================================================
for PC 768以下
=========================================================================================*/

@media only screen and (max-width: 768px){



	/*
	 * layout
	 */

	#header_wrapper{
		padding-bottom: 0;
		padding: 0 0 1em;
	}

	#content_wrapper{
		padding-bottom: 0;
	}

	#main_column {
	}

	/*
	 * main
	 */
	#main_column table{
		width: 100% !important;
		min-width: 350px;

		overflow: scroll;
	}

	#main_column table tbody{
		overflow: scroll;
	}



	#main_column {
		float: none;
		width: 100%;
		padding: 1em 0 0;
	}

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

	#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 -1% 0;
		padding: 0;
		width: 102%;
	}

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

	ul#side_banner{

	}

	/*
	 * head
	 */
	.header_side_menu{
		display: block;
	}

	#header{

	}

	#header h1{
		padding: 0 2%;
	}
	#header #open_navs{
		display: block;
		position: absolute;

	}

	#navs{
		right: 0;
		position: absolute;
		width: 0;
		height: 99%;
		padding: 0;
		max-width: 0px;

		z-index: 101;
		background-color: #fff;
		overflow-y: scroll;
		overflow-x: hidden;
		transform: translateZ(0);
		width: 0;
		transition: all 0.5s;
    -ms-overflow-style:none;
		-webkit-overflow-scrolling: touch
	}



	#navs::-webkit-scrollbar{
	    display:none;
	}


	#navs ul,
	#navs ul li,
	#navs h2{

		white-space: nowrap;
		background: none;
	}


#navs h2#navs_head {

	   margin: 1em 0 0;
		padding: 0;
		text-align: center;
		color: #f39700;
		display: block;
		font-weight: bold;
		text-decoration: underline;:

	}

	#navs.close_disp{

		width: 80%;
		max-width: 80%;

	}

	#navs_wrapper{
		position: fixed;
		width: 100%;
		height: 100%;
		max-width: 100%;
		transition: all 500ms;
		top: 0;
		right: 0;
		z-index: -10;
	}

	#header #navs_wrapper_a.opened_menu{
		display: block;
		width: 100%;
		height: 100%;
	}

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

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


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

	ul#fcontents_nav{
		display: block;
	}


	ul#main_nav,
	ul#sub_nav,
	ul#fcontents_nav,
	#navs ul{
		display: block;
		text-align: center;
		position: static;
		width: 98%;
		margin:1em 6% 1em;

	}

	#navs .header_side_menu ul{
		margin:0 6% 2em;
	}

	#close_wrapper {

    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    margin: 0;
    background-color: rgba(0, 0, 0 , 0.7);
    z-index: 97;
    top: 0;
    left: 0;

}

	ul#main_nav li,
	ul#sub_nav li,
	ul#fcontents_nav li,
	#navs ul li {
		display: block;
		padding: 1px;
		width: 100%;
		position: static;
		text-align: left;
		margin: 1em 0;
	}



	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.4em;
		padding: 0.5em 0  0.25em 1.5em;
		margin-bottom: 0.25em;
		color: #999;
		background: none;
		position: relative;
		font-size: 15px;
	}

	ul#main_nav li.current a,
	ul#sub_nav li.current a,
	ul#fcontents_nav li.current a,
	#navs ul li.current a {
		background: none;
		color: #333;
		font-weight: bold;
	}



	ul#sub_nav li.current a:hover, ul#sub_nav li a:hover{
		background: none;
		color: #999;
	}



	/* #navs ul li a::before{
		content: '';
		display: block;
		position: absolute;
		width: 5px;
		height: 5px;
		border-top: 3px solid #f39700;
		border-right: 3px solid #f39700;
		transform: rotate(45deg);
		top: 0.85em;
		left: 0;
	} */

	#navs ul#fcontents_nav li.current a,,
	#navs ul#sub_nav li.current a,
	#navs ul#main_nav li.current a{
		border-bottom: 1px solid #f39700;
	}



	ul#main_nav li a:hover{
		background: none;
	}

	#navs h2 a,
	#navs h2 a span
	{
		color: #f39700;
		display: block;
		font-weight: bold;
		font-size: 16px;
	}

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

	.header_side_menu ul{
		/*max-height: 0;*/
		overflow: hidden;
	}

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

	.header_side_menu h2{
		display: block;
		width: 98%;
		padding: 0 0;
		margin: 0 auto 0;
	}

	.header_side_menu h2 a{
		display: block;
		padding: 0 6%;
		font-size: 18px;
		font-weight: bold;
	}


	ul#main_nav li a:hover,
	ul#sub_nav li a:hover,
	ul#fcontents_nav li a:hover,
	#navs ul li a:hover {
		transition: all 300ms;
		color: #eee;
		text-decoration: none;
	}

	#header #navs_wrapper{

	}

	#header #open_navs{
		display: none;
		/*
		position: absolute;
		top: 20px;
		right: 20px;
		background-color: #e2e2e2;
		width: 30px;
		height: 30px;
		display: block;
		padding: 10px;
		border: 2px solid #fff;
		border-radius:5px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		z-index: 40;
		overflow: hidden;
		color: #fff;
		border: 2px solid #a9a9a9;
		opacity: 0.9;
		width:50px\9;
		height:50px\9;
		padding: 0px\9;
		*/
	}

/*
	#header #open_navs a{
		display: block;
		background-color: #e2e2e2;
		background: -moz-linear-gradient(top, #fff, #fff 50%, #e2e2e2 50%, #e2e2e2);
		background: -webkit-linear-gradient(top, #fff, #fff 50%, #e2e2e2 50%, #e2e2e2);
		background: linear-gradient(top, #fff, #fff 50%, #e2e2e2 50%, #e2e2e2);
		background-size: 12px 12px;
		width:30px;
		height:30px;
		width:50px\9;
		height:50px\9;
		z-index: 41;
	}

	#header #open_navs a span{
		display: none;
		display: block\9;
		width:100%;
		height:30px;
		width:50px\9;
		height:50px\9;
		line-height: 50px;
		font-weight: bold;
		color: #fff;
		font-size: 13px;
		text-align: center;
	}

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

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

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

	}


	/*
	 * bottom
	 */
	#bottom_buttons{
		position: fixed;
		bottom: 0;
		right: 0;
		z-index: 1100;
	}

	.opened_bottombuttons{
		right: 400px;
	}

	#open_navs_b {
		display: block;
		position: absolute;
		bottom: 20px;
		right: 20px;
		z-index: 11000;
	}

	#footer ul#footer_nav {
		display: none;
	}


	/*
	 * other parts
	 */
	#go_to_top{
		position: fixed;
		bottom: 20px;
		right: 74px;
		z-index: 10;
		padding:0;
	}

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



}


/*=========================================================================================
for Smart Phone 480以下
=========================================================================================*/

@media only screen and (max-width: 480px){



	#site_lead{
		display: none;
	}

	#header{
		padding: 1em 0 0;
	}

	#home h1,
	p.title{
		min-height: 45px;
	}

	#header #open_navs{
		top: 10px;
	}

	#home h1 img,
	p.title img{
		width: 75%;

	}




	ul#side_banner li,
	ul#side_banner li:first-child,
	ul#bottom_banner li,
	ul#bottom_banner li:first-child{
		line-height: 2.4em;
		padding: 1em 0 1em 0.5em;
		margin:0 1% 1em;
		padding:0;
		width: 48%;
	}

	#page_nav .end{
		display: none;
	}



}