@charset "UTF-8";

/**********************************************
共立電気
グローバルCSS
***********************************************/

#wrapper {
	text-align: left;
	overflow: hidden;
}


/*============================================================
  #gHeader
============================================================*/


/*  #gHeader01
----------------------------------------------------------------------*/

#gHeader01 {
	background: #333;
}

#gHeader01 .inner {
	width: 980px;
	margin: 0 auto;
	overflow: hidden;
	*zoom: 1;
}

#gHeader01 h1 {
	font-size: 10px;
	color: #fff;
	float: left;
	line-height: 27px;
}

#subNav {
	float: right;
	overflow: hidden;
	*zoom: 1;
	margin: 0;
}

#subNav li {
	float: left;
	margin: 0;
	font-size: 10px;
	line-height: 27px;
	padding-right: 1em;
}

#subNav .subNav01:after {
	content: '|';
	display: inline;
	padding: 0 0 0 1em;
	color: #fff;
}

#subNav .lang {
	padding-right: 0;
}

#subNav li a {
	color: #fff;
	text-decoration: none;
}


/*  #gHeader02
----------------------------------------------------------------------*/

#gHeader02 {
	width: 980px;
	margin: 0 auto;
}

#gHeader02 .logo {
	float: left;
	margin: 13px 0 0;
}

#gHeader02 .gNavBtn {
	display: none;
}


/*============================================================
  #gNav
============================================================*/

#gNav {
	float: right;
}

#gNav ul {
	margin: 0;
	*zoom: 1;
}

#gNav ul:before, #gNav ul:after {
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
}

#gNav ul:after {
	clear: both;
}

#gNav li {
	float: left;
	position: relative;
}

#gNav a {
	display: block;
	width: 108px;
	height: 62px;
	text-indent: -9999px;
	background: url(../images/global/gnav.jpg) 0 0 no-repeat;
}

#gNav .gNav01 a {
	background-position: 0 0;
}

#gNav .gNav02 a {
	background-position: -108px 0;
}

#gNav .gNav03 a {
	background-position: -216px 0;
}

#gNav .gNav04 a {
	background-position: -324px 0;
}

#gNav .gNav05 a {
	background-position: -432px 0;
	width: 109px;
}

#gNav .gNav06 a {
	background-position: -540px 0;
}

#gNav .gNav01 a:hover, #gNav .gNav01 .active {
	background-position: 0 -64px;
}

#gNav .gNav02 a:hover, #gNav .gNav02 .active {
	background-position: -108px -64px;
}

#gNav .gNav03 a:hover, #gNav .gNav03 .active {
	background-position: -216px -64px;
}

#gNav .gNav04 a:hover, #gNav .gNav04 .active {
	background-position: -324px -64px;
}

#gNav .gNav05 a:hover, #gNav .gNav05 .active {
	background-position: -432px -64px;
}

#gNav .gNav06 a:hover, #gNav .gNav06 .active {
	background-position: -540px -64px;
}

#gNav .sub {
	display: none;
	opacity: 0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	position: absolute;
	z-index: 100;
	top: 100px;
	left: 50%;
	margin: 0 0 0 -111px;
	padding-top: 15px;
}

#gNav .sub:before {
	display: block;
	content: '.';
	text-indent: -9999px;
	position: absolute;
	top: 4px;
	left: 50%;
	margin-left: -10px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 6px 12px 6px;
	border-color: transparent transparent #ddd transparent;
}

#gNav .sub:after {
	display: block;
	content: '.';
	text-indent: -9999px;
	position: absolute;
	top: 5px;
	left: 50%;
	margin-left: -10px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 6px 12px 6px;
	border-color: transparent transparent #fff transparent;
}

#gNav .subInner {
	/* background: rgba(255,255,255,.9); */
	background: #fff;
	border: 1px solid #ddd;
	padding: 5px 10px;
	width: 200px;
}

#gNav .subInner li {
	float: none;
	position: static;
	border-top: 1px dotted #ddd;
	background: url(../images/icon/arrow01.png) 10px center no-repeat;
	padding-left: 24px;
}

#gNav .subInner li:hover {
	background-color: #f0f0f0;
}

#gNav .subInner li a {
	text-decoration: none;
}

#gNav .subInner li:first-child {
	border-top: none;
}

#gNav .subInner a {
	display: block;
	width: auto;
	height: auto;
	text-indent: 0;
	background: none;
	padding: 5px 0;
}

.gNav_sp, .gNav_close {
	display: none;
}


/*  #gSearch
----------------------------------------------------------------------*/

#gSearch {
	overflow: hidden;
	*zoom: 1;
	background: #EEEEEE;
	border-bottom: 1px solid #EEEEEE;
	clear: both;
}

#gSearch .inner {
	display: block;
	width: 980px;
	margin: 0 auto;
	padding: 3px 0;
	text-align: right;
}

#gSearch .fontSize {
	display: inline-block;
	vertical-align: middle;
	overflow: hidden;
	color: #fff;
	margin: 0;
	line-height: 15px;
}

#gSearch .fontSize dt {
	border: 1px solid #333;
	font-weight: bold;
	font-size: 11px;
	float: left;
	width: 68px;
	text-align: center;
	color: #333;
}

#gSearch .fontSize dd {
	float: left;
	border-right: 1px solid #333;
	font-size: 12px;
	padding: 0 12px;
}

#gSearch .fontSize .last {
	border-right: none;
}

#gSearch .fontSize a {
	display: block;
	text-decoration: none;
	color: #333;
	/*width: 25px;*/
	padding: 0 5px;
	text-align: center;
	line-height: 16px;
}

#gSearch .fontSize a.active, #gSearch .fontSize a:hover {
	background: #898888;
	color: #fff;
}

#gSearch form {
	display: inline-block;
	vertical-align: middle;
}

#gSearchWindow {
	width: 258px;
	height: 10px;
	border: none;
	padding: 7px 10px;
	color: #888;
	line-height: 1;
	text-align: left;
}


/*============================================================
  #gFooter
============================================================*/

#gFooter {
	position: relative;
}

#gFooter .toTop {
	position: fixed;
	bottom: 20px;
	right: 20px;
	margin: 0;
	/* position: absolute;
	top: -29px;
	left: 50%;
	margin-left: 510px; */
}

#gFooter .toTop.bottomEnd {
	position: absolute !important;
	top: -29px !important;
}


/*  #gFooter01
----------------------------------------------------------------------*/

#gFooter01 {
	padding: 40px 0 45px;
	background: #ededed;
}

#gFooter01 ul {
	width: 990px;
	margin: 0 auto;
	letter-spacing: -.4em;
}

#gFooter01 ul li {
	display: inline-block;
	*display: inline;
	*zoom: 1;
	vertical-align: top;
	letter-spacing: normal;
	margin: 0 5px;
}


/*  #gFooter02
----------------------------------------------------------------------*/

#gFooter02 {
	background: #000;
	padding: 14px 0;
	border-top: 1px solid #fff;
}

#gFooter02 ul {
	width: 980px;
	margin: 0 auto;
	overflow: hidden;
	*zoom: 1;
}

#gFooter02 ul li {
	float: left;
	padding-left: 1em;
	line-height: 1;
}

#gFooter02 ul li:first-child {
	padding-left: 0;
}

#gFooter02 ul li:before {
	content: '|';
	display: inline;
	padding-right: 1em;
	color: #fff;
}

#gFooter02 ul li:first-child:before {
	content: none;
}

#gFooter02 a {
	color: #fff;
	text-decoration: none;
}


/*  #gFooter03
----------------------------------------------------------------------*/

#gFooter03 {
	width: 980px;
	margin: 0 auto;
	padding: 40px 0;
	overflow: hidden;
	*zoom: 1;
	display: table;
}

#gFooter03 .footerColumn {
	/* width: 196px; */
	display: table-cell;
}

#gFooter03 .footerColumn.footerColumn02 {
	width: 420px;
}

#gFooter03 dl {
	letter-spacing: -.4em;
}

#gFooter03 dl dt {
	letter-spacing: normal;
	background: url(../images/icon/circle_arrow01.png) 0 center no-repeat;
	padding-left: 20px;
	margin: 0 0 10px;
}

#gFooter03 dl dd {
	display: inline-block;
	*display: inline;
	*zoom: 1;
	vertical-align: top;
	letter-spacing: normal;
	width: 146px;
	background: url(../images/icon/arrow01.png) 0 center no-repeat;
	padding: 0 5px 0 15px;
	margin: 0 0 10px 20px;
}

#gFooter03 .footerColumn.footerColumn02 dl dd {
	width: 170px;
}

#gFooter03 dl a {
	color: #000;
	text-decoration: none;
}


/*  #gFooter04
----------------------------------------------------------------------*/

#gFooter04 {
	background: #ccc;
	padding: 3px 0;
}

#gFooter04 form {
	display: block;
	width: 980px;
	margin: 0 auto;
	text-align: right;
}

#footerSearch {
	width: 258px !important;
	height: 10px !important;
	border: none !important;
	padding: 7px 10px !important;
	color: #888;
	line-height: 1;
	text-align: left;
}

#gFooter04 form input[type="submit"] {
	text-indent: -9999px;
	border: none;
	padding: 0;
	margin: 0;
	width: 26px;
	height: 24px;
	background: url(../images/btns/search.png) 0 0 no-repeat;
}


/*  #gFooter05
----------------------------------------------------------------------*/

#gFooter05 {
	width: 980px;
	margin: 0 auto;
	overflow: hidden;
	*zoom: 1;
	padding-bottom: 20px;
}

#gFooter05 .copyright {
	float: left;
	font-size: 10px;
	margin: 18px 0 0;
	color: #000;
}

#gFooter05 .footerLogo {
	float: right;
	margin: 13px 0 0;
}


/*============================================================
  #contents
============================================================*/

#contents {
	*zoom: 1;
	width: 980px;
	margin: 0 auto;
}

#contents:before, #contents:after {
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
}

#contents:after {
	clear: both;
}

#contents section {
	margin: 0 auto 30px;
	overflow: hidden;
	*zoom: 1;
}

#contents section> :last-child {
	margin-bottom: 0;
}


/*============================================================
  #main
============================================================*/

#main {
	float: left;
	width: 700px;
	margin: 0;
}

#main .editor, #noSideMain .editor {
	overflow: hidden;
	*zoom: 1;
	margin: 0;
	word-break: normal;
	word-wrap: normal;
}


/*============================================================
  #side
============================================================*/

#side {
	float: right;
	width: 240px;
	margin: 0;
}


/*============================================================
  .pageHeader
============================================================*/

.pageHeader {
	margin: 0 -50% 30px;
	background: url(../images/global/page_title_bg.jpg) center 0 repeat-x;
}

.pageHeader h2 {
	width: 980px;
	margin: 0 auto 10px;
	height: 71px;
	line-height: 71px;
	font-size: 28px;
}

.pageHeader .pankuzu {
	width: 980px;
	margin: 0 auto;
	overflow: hidden;
	*zoom: 1;
}

.pageHeader .pankuzu li {
	float: left;
	font-size: 10px;
	color: #aaa;
}

.pageHeader .pankuzu li a {
	color: #111;
}

@media screen and (max-width: 736px) {
	#wrapper {
		padding-top: 50px;
	}
	#gHeader {
		z-index: 100;
	}
	#gHeader01 {
		display: none;
	}
	#gHeader01 .inner {
		width: auto;
	}
	#gHeader02 {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background: #fff;
		padding: 10px;
		-webkit-box-shadow: 0 0 5px #888;
		box-shadow: 0 0 5px #888;
		z-index: 100;
	}
	#gHeader02> :first-child {
		margin-top: 0;
	}
	#gHeader02 .logo {
		float: none;
		text-align: center;
		height: 30px;
	}
	#gHeader02 .gNavOverlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		background: rgba(255, 255, 255, 0.8);
		display: none;
		z-index: 101;
	}
	#gHeader02 .gNavOverlay-isOpen {
		display: block;
	}
	#gHeader02 .gNavBtn {
		display: block;
		position: absolute;
		top: 50%;
		right: 10px;
		margin: -17px 0 0;
	}
	#gHeader02 .gNavBtn a {
		display: block;
		width: 34px;
		height: 34px;
		text-decoration: none;
		color: #fff;
		background: #29a9f4;
		text-align: center;
		line-height: 36px;
		font-size: 26px;
		border-radius: 4px;
	}
	#gHeader02 .gNavBtn a:before {
		content: "";
		font: normal normal normal 14px/1 FontAwesome;
		font-size: inherit;
		text-rendering: auto;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
	#gNav {
		float: none;
		position: fixed;
		top: 0;
		left: -80%;
		bottom: 0;
		background: #fff;
		width: 80%;
		padding: 10px;
		z-index: 102;
		-webkit-transition: left .4s;
		transition: left .4s;
	}
	#gNav> :first-child {
		margin-top: 0;
	}
	#gNav.gNav-isOpen {
		left: 0;
		-webkit-box-shadow: 0 0 5px #888;
		box-shadow: 0 0 5px #888;
	}
	.gNav_inner {
		height: 100%;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	#gNav ul> :first-child {
		margin-top: 0;
	}
	#gNav li {
		float: none;
		margin: 10px 0 0;
	}
	#gNav a {
		background: none;
		text-indent: 0;
		text-decoration: none;
		display: block;
		width: auto;
		height: auto;
		background: #29a9f4 url(../images/icon/arrow02.png) 10px center no-repeat;
		color: #fff;
		padding: 5px 5px 5px 24px;
	}
	#gNav .gNav01 a, #gNav .gNav02 a, #gNav .gNav03 a, #gNav .gNav04 a, #gNav .gNav05 a, #gNav .gNav06 a, #gNav .gNav01 a:hover, #gNav .gNav01 .active, #gNav .gNav02 a:hover, #gNav .gNav02 .active, #gNav .gNav03 a:hover, #gNav .gNav03 .active, #gNav .gNav04 a:hover, #gNav .gNav04 .active, #gNav .gNav05 a:hover, #gNav .gNav05 .active, #gNav .gNav06 a:hover, #gNav .gNav06 .active {
		background-position: 10px center;
	}
	#gNav .gNav06 a {
		width: auto;
	}
	#gNav .sub {
		display: block !important;
		position: static;
		margin: 5px 0 0;
		padding: 0;
		opacity: 1 !important;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	}
	#gNav .sub:before, #gNav .sub:after {
		content: none;
	}
	#gNav .subInner {
		width: auto;
		border: none;
		padding: 0;
		background: none;
	}
	#gNav .subInner li {
		margin: 0;
	}
	#gNav .subInner li a {
		color: #333;
		padding: 8px 8px 8px 0;
	}
	#gNav .gNav_sp {
		display: block;
		margin: 10px 0 0;
	}
	#gNav .gNav_sp> :first-child {
		margin-top: 0;
		border-top: none;
	}
	#gNav .gNav_sp li {
		border-top: 1px dotted #ddd;
		background: url(../images/icon/arrow01.png) 10px center no-repeat;
		padding-left: 24px;
		margin: 0;
	}
	#gNav .gNav_sp li a {
		background: none;
		color: #333;
		padding: 8px 8px 8px 0;
	}
	#gNav .gNav_close {
		display: block;
		margin: 20px 0 0;
	}
	#gNav .gNav_close a {
		display: block;
		background: #29a9f4;
		color: #fff;
		text-decoration: none;
		text-align: center;
		padding: 8px;
		border-radius: 4px;
	}
	#gNav .gNav_close a:before {
		content: "";
		font: normal normal normal 14px/1 FontAwesome;
		font-size: inherit;
		text-rendering: auto;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		margin: 0 .5em 0 0;
	}
	#gSearch .inner {
		width: auto;
	}
	#gSearch .fontSize {
		display: none;
	}
	#gSearch .fontSize dt {
		border: 1px solid #94d4fa;
		font-weight: bold;
		font-size: 11px;
		float: left;
		width: 68px;
		text-align: center;
	}
	#gSearch .fontSize dd {
		float: left;
		border-right: 1px solid #94d4fa;
		font-size: 12px;
		padding: 0 12px;
	}
	#gSearch .fontSize .last {
		border-right: none;
	}
	#gSearch .fontSize a {
		display: block;
		text-decoration: none;
		color: #fff;
		width: 25px;
		text-align: center;
		line-height: 16px;
	}
	#gSearch .fontSize a.active, #gSearch .fontSize a:hover {
		background: #fff;
		color: #29a9f4;
	}
	#gSearch form {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		padding: 5px 10px;
	}
	#gSearch form button {
		height: 31px;
		width: 60px;
		background: #0073C6;
		display: block;
	}
	#gSearch form button:before {
		content: "";
		font: normal normal normal 14px/1 FontAwesome;
		font-size: inherit;
		text-rendering: auto;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		color: #fff;
	}
	#gSearch form button img {
		display: none;
	}
	#gSearchWindow {
		-webkit-box-flex: 1;
		-webkit-flex-grow: 1;
		-ms-flex-positive: 1;
		flex-grow: 1;
		width: auto;
		height: auto;
		border: none;
		padding: 7px 10px;
		color: #888;
		line-height: 1;
		text-align: left;
		border: 1px solid #29a9f4;
		border-right: none;
	}
	#gFooter01 {
		padding: 10px 0;
	}
	#gFooter01 ul {
		width: auto;
	}
	#gFooter01 ul li {
		display: block;
		margin: 0 10px;
	}
	#gFooter02 {
		display: none;
	}
	#gFooter02 ul {
		width: auto;
	}
	#gFooter03 {
		display: none;
		width: auto;
	}
	#gFooter03 .footerColumn {
		display: block;
	}
	#gFooter03 .footerColumn.footerColumn02 {
		width: auto;
	}
	#gFooter03 .footerColumn.footerColumn02 dl dd {
		width: auto;
	}
	#gFooter04 {
		padding: 10px;
	}
	#gFooter04 form {
		width: auto;
	}
	#gFooter05 {
		width: auto;
		padding: 10px 0;
	}
	#gFooter05 .copyright {
		float: none;
		text-align: center;
		margin: 0;
		font-size: 8px;
	}
	#gFooter05 .footerLogo {
		float: none;
		display: none;
	}
	#contents {
		width: auto;
		padding: 0 10px 20px;
	}
	#contents section {
		margin: 30px 0 0;
		overflow: visible;
	}
	#contents section:after {
		content: '';
		display: block;
		clear: both;
		height: 0;
		visibility: hidden;
	}
	#main {
		width: auto;
		float: none;
	}
	#side {
		width: auto;
		float: none;
		margin: 30px 0 0;
	}
	.pageHeader {
		margin: 0 -10px;
		padding: 0 10px;
	}
	.pageHeader h2 {
		width: auto;
		margin: 0 auto 10px;
		font-size: 20px;
	}
	.pageHeader .pankuzu {
		width: auto;
	}
}