@charset "utf-8";

/************************************************
	Description: サイト内 共通設定
	Update: 2013/07/24
	Author: Japan Electronic Industrial Arts Co.Ltd.
	Notes: 
************************************************ */


/* ==============================================
 レイアウト
=============================================== */

.frame_outer {
	min-width: 980px;
	background-color: #fff;
}

#container {
	width: 100%;
	margin: 0 auto;
}

/* 上下カラム
----------------------------------------------- */
#topcolumn {
	width: 100%;
}

#bottomcolumn {
	width: 100%;
	margin: 0 auto;
	background-color: #000;
}

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

/* 中央カラム
----------------------------------------------- */
#middlecolumn {
	width: 980px;
	padding: 22px 0 56px 0;
	margin: 0 auto;
}

.main_column {
}

/* 1カラム設定 */
#one_maincolumn {
	width: 980px;
}

/* 2カラム設定 (メイン部が左) */
#two_maincolumn_left {
	width: 760px;
}

/* 2カラム設定 (メイン部が右) */
#two_maincolumn_right {
	width: 760px;
}

/* 3カラム設定 */
#three_maincolumn {
	width: 586px;
}

/* サイドカラム
----------------------------------------------- */
#leftcolumn {
	width: 202px;
}

#rightcolumn {
	width: 180px;
}


/* ==============================================
 フォント
=============================================== */

body {
	font-family: "Century Gothic", "Meiryo", "メイリオ", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
	font-size: 12px;
	line-height: 1.5;
}


/* ==============================================
 カラー
=============================================== */

body {
	background-color: #FFFFFF;
	color: #333333;
}

/* リンク
----------------------------------------------- */
a:link,
a:visited {
	color: #3399CC;
}

a:link:hover,
a:link:active {
	/*
	color: #FF6600;
	*/
}

/* 共通要素
----------------------------------------------- */

.attention {
	color: #cc0000;
}


/* ==============================================
 エラーヘッダー
=============================================== */
#errorHeader {
	padding: 5px;
	background-color: #FFFEEBB;
	text-align: center;
	color: #F00;
	font-size: 12px;
	font-weight: bold;
}


/* ==============================================
 ヘッダー
=============================================== */
#header_wrap {
	position: relative;
	/*
	z-index: 999;
	*/
	width: 100%;
	background-color: #141213;
}

#header_utility {
	width: 100%;
	background-color: #C40D11;
}
#headerInternalColumn {
	width: 980px;
	margin: 0 auto;
}

#header {
	position: relative;
	width: 980px;
	height: 139px;
	margin: 0 auto;
}

/* ロゴ
----------------------------------------------- */
#logo_area {
	position: absolute;
	left: 0;
	top: 14px;
	width: 135px;
	height: 108px;
}
#logo_area a {
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

/* ヘッダーツール
----------------------------------------------- */
#header_tools {
	position: absolute;
	right: 0;
	top: 16px;
}
#header_tools .header_tool {
	float: right;
}

/* 商品検索
----------------------------- */
#header_search {
	width: auto;
	height: 10px;
	padding: 0 0 0 11px;
	overflow: visible;
}
#header_search .search_wrap {
	position: relative;
	left: 0;
	top: -2px;
	/*
	top: -5px;
	width: 112px;
	height: 22px;
	*/
	width: 152px;
	height: 20px;
	/* padding: 0 28px 0 12px; */
	background: url("../../img/common/header/bg_search.png") no-repeat 0 0;
}
#header_search a {
	position: absolute;
	right: 5px;
	top: 3px;
	display: block;
	width: 16px;
	height: 14px;
	background: url("../../img/common/header/btn_search.png") no-repeat;
	text-indent: -9999px;
}
#header_search .search_input {
	padding: 0 28px 0 0;
}
#header_search .search_input input {
	display: block;
	width: 100%;
	height: 14px;
	padding: 3px 0 3px 0;
	border: 0;
	background-color: transparent;
	font-size: 12px;
	line-height: 1;
}

/* 言語選択
----------------------------- */
#header_lang {
	position: relative;
	width: auto;
	height: 17px;
	padding: 0 1px 0 0;
	background: url("../../img/common/header/bg_tool_split.gif") no-repeat right center;
	/*
	overflow: visible;
	*/
}
#header_lang label {
	position: relative;
	display: block;
	width: 28px;
	height: 16px;
	padding: 0 7px 0 9px;
	overflow: hidden;
	background: url("../../img/common/header/ico_lang.png") no-repeat 8px 0;
	text-indent: -9999px;
	color: #999999;
	font-size: 12px;
	line-height: 1;
}
#header_lang:hover label {
	background-color: #222222;
}
#header_lang label span {
	display: block;
	padding: 0 18px 0 0;
	background: url("../../img/common/header/arrow_lang.png") no-repeat right 6px;
}
#header_lang .lang_wrap {
	position: absolute;
	left: 0;
	top: 16px;
	z-index: 99;
	display: none;
}
#header_lang:hover .lang_wrap {
	display: block;
	padding: 12px 8px 8px 8px;
	background-color: #222222;
}
#header_lang:hover .lang_wrap .inner {
	width: 210px;
}
#header_lang:hover .lang_wrap .inner:after {
	clear: both;
	display: block;
	content: "";
}
#header_lang:hover .lang_wrap .inner .list {
	float: left;
	width: 64px;
}
#header_lang:hover .lang_wrap .inner .list ul {
	font-size: 12px;
}
#header_lang:hover .lang_wrap .inner .list ul li {
	display: block;
	padding: 0;
	border-left: 0;
}
#header_lang:hover .lang_wrap .inner .list ul li a {
	display: block;
	padding: 4px 0 4px 16px;
	background: url("../../img/common/header/dot_lang.png") no-repeat 4px 10px;
	color: #ffffff;
}
#header_lang:hover .lang_wrap .inner .others {
	float: left;
	width: 120px;
	margin: 0 0 0 26px;
}
#header_lang:hover .lang_wrap .inner .others h3 {
	display: block;
	margin: 0 0 8px 0;
	color: #999999;
	font-size: 12px;
	font-weight: normal;
}

/* 送料無料
----------------------------- */
#header_delivfee {
	padding: 0 10px 0 0;
	background: url("../../img/common/header/bg_tool_split.gif") no-repeat right center;
}
#header_delivfee p {
	color: #ffffff;
	font-size: 11px;
}



/* ヘッダーナビ
----------------------------------------------- */
#header_navi {
	position: absolute;
	right: 0;
	bottom: 0;
	/* サブナビ位置決めのため幅100%としておく */
	width: 100%;
	text-align: right;
	pointer-events: none;/*ヘッダーロゴの邪魔にならないよう*/
}
#header_navi ul.parent {
	display: inline-flex;
	pointer-events: auto;
}
#header_navi ul.parent > li {
	flex: 1 1 auto;
	transition: .3s;
}
#header_navi ul.parent > li:hover {
	background-color: #c40d11;
}
#header_navi ul.parent > li + li {
	border-left: solid 1px transparent;
	border-image-width: 0 0 0 1px;
	border-image: linear-gradient(to top, transparent 20%, #555 20%, #555 75%, transparent 75%);
	border-image-slice: 1;
	transition: .3s;
}
#header_navi ul.parent > li:hover,
#header_navi ul.parent > li:hover + li {
	/* hover時に罫線消去（自身と右隣） */
	border-image-slice: 0 !important;
}
#header_navi ul.parent > li > a {
	display: block;
	padding: 15px 20px;/*15px 13px;*/
	color: #fff;
	text-align: center;
	line-height: 1.2;
}
#header_navi ul.parent > li > a:hover {
	text-decoration: none;
}
#header_navi ul.parent > li .main {
	display: block;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
	font-size: 18px;/*20px;*/
	letter-spacing: 0.03em;
}
#header_navi ul.parent > li .sub {
	display: block;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
	font-size: 10px;/*9px;*/
	margin-top: 2px;
}

/* サブナビ */
#header_navi ul > li .child_navi {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	box-sizing: border-box;
	padding: 15px;
	background-color: #000000;
	border: solid 2px #c40d11;
	z-index: 99;
	visibility: hidden;
	opacity: 0;
	transition: .3s;
}
#header_navi ul > li:hover .child_navi {
	visibility: visible;
	opacity: 1;
}
#header_navi .child_navi li {
	width: 25%;
	float: left;
}
#header_navi .child_navi li:nth-child(4n+1) {
	clear: both;
}
#header_navi .child_navi li a {
	display: block;
	border: solid 1px transparent;
	transition: .3s;
}
#header_navi .child_navi li a:hover {
	border-color: #555;
	filter: brightness(1.5);
}
#header_navi .child_navi li a img {
	max-width: 100%;
	height: auto;
}
#header_navi .child_navi li a:hover img {
	opacity: 1;
}



/* ==============================================
 フッター
=============================================== */
#footer_wrap {
	padding-top: 72px;/*上余白*/
	padding-bottom: 12px;/*ページ下部余白*/
	background-color: #000;
}

#footer {
	position: relative;
	width: 980px;
	height: 18px;
	margin: 0 auto;
	font-family: "FOT-筑紫ゴシック Pr5 M";
}

/* コピーライト
----------------------------------------------- */
#footer .copyright {
	float: left;
	padding: 4px 0 0 0;
}
#footer .copyright p {
	color: #ffffff;
	font-size: 12px;
	line-height: 1;
}

/* ソーシャルリンク
----------------------------------------------- */
#footer_sns {
	float: left;
	margin: 0 0 0 16px;
}
#footer_sns ul {
	overflow: hidden;
}
#footer_sns ul:after {
	clear: both;
	display: block;
	content: "";
}
#footer_sns ul li {
	float: left;
	margin: 0 0 0 8px;
}
#footer_sns ul li:first-child {
	margin: 0;
}
#footer_sns ul li a {
	display: block;
	width: 18px;
	height: 18px;
	overflow: hidden;
	text-indent: -9999px;
}
#footer_sns ul li.sns_f a {
	background: url("../../img/common/footer/ico_footer_sns_f.png") no-repeat;
}
#footer_sns ul li.sns_t a {
	background: url("../../img/common/footer/ico_footer_sns_t.png") no-repeat;
}
#footer_sns ul li.sns_y a {
	background: url("../../img/common/footer/ico_footer_sns_y.png") no-repeat;
}
#footer_sns ul li a:hover {
	opacity: 0.7;
}


/* フッターナビ
----------------------------------------------- */
#footer_navi {
	float: right;
	padding: 4px 0 0 0;
}
#footer_navi ul {
	font-family: 12px;
	line-height: 1.4;
}
#footer_navi ul li {
	float: right;
	padding: 0 12px;
	border-right: 1px solid #ffffff;
}
#footer_navi ul li:first-child {
	padding-right: 0;
	border-right: 0;
}
#footer_navi ul li a {
	color: #fff;
}


/* ==============================================
 パーツ
=============================================== */

/* タイトル
----------------------------------------------- */
.page_title {
}

.sub_title {
}

.section_title {
}

.block_title {
}

.side_title {
	color: #2C5472;
	font-size: 16px;
	font-weight: bold;
	font-style: italic;
	line-height: 1;
}

/* フォーム
----------------------------------------------- */
input[type='text'],
input[type='password'],
.select {
	border: solid 1px #ccc;
	padding: 2px;
}

/* ラジオボタン */
.ui-radio {
}
.ui-radio label {
	position: relative;
	padding: 2px 0 2px 22px;
}
.ui-radio label:before {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 18px;
	height: 18px;
	background: url("../../img/ui/ui_radio/bg_radio.png") no-repeat 0 0;
	content: "";
}
.ui-radio input[type="radio"] {
	display: none;
}
.ui-radio input[type="radio"]:checked + label:before {
	background-position: 0 -18px;
}


/* UI Slider
----------------------------------------------- */
.ecp_ui_slider {
}

.ecp_ui_slider .ecp_ui_slider_container {
	position: relative;
	width: 100%;
	height: 1em; /* default */
	overflow: hidden;
}
.ecp_ui_slider .ecp_ui_slider_container .section {
	position: absolute;
	left: -9999px; /* default */
	top: -9999px; /* default */
	width: 100%;
}

.ecp_ui_slider .ecp_ui_slider_navi {
	text-align: center;
}
.ecp_ui_slider .ecp_ui_slider_navi ul,
.ecp_ui_slider .ecp_ui_slider_navi ul li,
.ecp_ui_slider .ecp_ui_slider_navi p {
	vertical-align: top;
}
.ecp_ui_slider .ecp_ui_slider_navi ul {
	display: inline-block;
	margin: 0 2px;
}
*:first-child+html .ecp_ui_slider .ecp_ui_slider_navi ul {
	display: inline;
}
.ecp_ui_slider .ecp_ui_slider_navi ul li {
	display: inline-block;
	margin: 0 2px;
}
*:first-child+html .ecp_ui_slider .ecp_ui_slider_navi ul li {
	display: inline;
}
.ecp_ui_slider .ecp_ui_slider_navi ul li a {
	display: block;
	width: 15px;
	height: 15px;
	outline: 0;
	overflow: hidden;
	text-indent: -9999px;
}
.ecp_ui_slider .ecp_ui_slider_navi ul li a.selected {
}
.ecp_ui_slider .ecp_ui_slider_navi .prev,
.ecp_ui_slider .ecp_ui_slider_navi .next {
	display: inline-block;
	width: 15px;
	height: 15px;
}
*:first-child+html .ecp_ui_slider .ecp_ui_slider_navi .prev {
	display: inline;
}
*:first-child+html .ecp_ui_slider .ecp_ui_slider_navi .next {
	display: inline;
}
.ecp_ui_slider .ecp_ui_slider_navi .prev a,
.ecp_ui_slider .ecp_ui_slider_navi .next a {
	display: block;
	width: 100%;
	height: 100%;
	outline: 0;
	overflow: hidden;
	text-indent: -9999px;
}
.ecp_ui_slider .ecp_ui_slider_navi .prev a:hover,
.ecp_ui_slider .ecp_ui_slider_navi .next a:hover {
	opacity: 0.65;
}

/* transparent */
.ecp_ui_slider_transparent .ecp_ui_slider_navi {
}
.ecp_ui_slider_transparent .ecp_ui_slider_navi ul li a {
	background: url("../../img/ui/ecp_ui_slider_transparent/btn_navi.png") no-repeat center center;
}
.ecp_ui_slider_transparent .ecp_ui_slider_navi ul li a.selected {
	background: url("../../img/ui/ecp_ui_slider_transparent/btn_navi_selected.png") no-repeat center center;
}
.ecp_ui_slider_transparent .ecp_ui_slider_navi .prev a {
	background: url("../../img/ui/ecp_ui_slider_transparent/btn_prev.png") no-repeat 5px 1px;
}
.ecp_ui_slider_transparent .ecp_ui_slider_navi .next a {
	background: url("../../img/ui/ecp_ui_slider_transparent/btn_next.png") no-repeat 3px 1px;
}


/* black */
.ecp_ui_slider_black .ecp_ui_slider_navi {
	padding: 16px 0;
	background-color: #000000;
}
.ecp_ui_slider_black .ecp_ui_slider_navi ul li a {
	background: url("../../img/ui/ecp_ui_slider_black/btn_navi.png") no-repeat center center;
}
.ecp_ui_slider_black .ecp_ui_slider_navi ul li a.selected {
	background: url("../../img/ui/ecp_ui_slider_black/btn_navi_selected.png") no-repeat center center;
}
.ecp_ui_slider_black .ecp_ui_slider_navi .prev a {
	background: url("../../img/ui/ecp_ui_slider_black/btn_prev.png") no-repeat;
}
.ecp_ui_slider_black .ecp_ui_slider_navi .next a {
	background: url("../../img/ui/ecp_ui_slider_black/btn_next.png") no-repeat;
}


/* テーブル
----------------------------------------------- */

/* テーブルデザイン1 */
table.design1 {
	margin: 0;
	width: 100%;
	border-collapse: collapse;
	border-top: 1px solid #000;
	border-left: 1px solid #000;
}
table.design1 th,
table.design1 td {
	border-bottom: 1px solid #000;
	border-right: 1px solid #000;
	padding: 5px;
}
table.design1 th {
	width: 33%;
	background-color: #e4e4e4;
	text-align: left;
}
table.design1 td {
	text-align: left;
}