@charset "utf-8";

/*************************************************
 * Description: 共通CSS
 * Package: site
 * Author: Japan Electronic Industrial Arts Co.Ltd.
 * Notes: 
*************************************************/

/*************************************************
 *
 * レイアウトフレーム
 *
*************************************************/
/* ==============================================
 * フレーム[1階層]
=============================================== */
.frame_outer {
	width: 100%;
	min-width: 320px;/*閲覧デバイス最小幅*/
}

/* ==============================================
 * フレーム[2階層]
=============================================== */
#headertopcolumn {}
#header_wrap {}
header {}
#container {
	width: 100%;
}
#footer_wrap {}
footer {}
#footerbottomcolumn {}

/* ==============================================
 * フレーム[3階層] #containerの子要素
=============================================== */
#topcolumn {}
#middlecolumn {}
#bottomcolumn {}

/* ==============================================
 * フレーム[4階層] #middlecolumnの子要素
=============================================== */
/* 中央カラム共通class */
.main_column {
}

/* ==============================================
 * デバイスごとのフレーム構成
=============================================== */
/*
 * ※ヘッダー固定でページコンテンツによってはヘッダ被せ（HOME）とそうでないページがあるのでpadding-topで制御するが、
 * 一応、ぱんくずリストブロックを慣例にならって#topcolumnに入れてあるのですべてを包括する#containerでpadding-topを定義し、
 * ページコンテンツ下部の余白については、#middlecolumnと#bottomcolumnの余白を制御したいので下部余白については#middlecolumnにて制御する。（.main_columnでも構わないが）
 */
@media ( max-width: 767px ) {
	#container {
		padding-top: 50px;
	}
	/* ページごと */
	body.LC_Page_Index #container {
		padding-top: 50px;
	}
	
	#middlecolumn {
		padding-bottom: 50px;
	}
}
@media ( min-width: 768px ) and ( max-width: 979px ) {
	#container {
		padding-top: 50px;
	}
	/* ページごと */
	body.LC_Page_Index #container {
		padding-top: 50px;
	}
	
	#middlecolumn {
		padding-bottom: 50px;
	}
}
@media ( min-width: 980px ) {/* PCデバイス */
	#container {
		padding-top: 60px;/*ヘッダ高さ60px＋余白分を確保*/
	}
	#middlecolumn {
		padding-top: 40px;/*メインコンテンツ（ぱんくずを含まない）*/
		padding-bottom: 80px;
	}
	/* HOME */
	body.LC_Page_Index #container {
		padding-top: 0;
	}
	body.LC_Page_Index #middlecolumn {
		padding-top: 0;
	}
	/* 商品一覧 */
	body.LC_Page_Products_List #middlecolumn {
		padding-top: 0;
	}
	/* 商品詳細 */
	body.LC_Page_Products_Detail #middlecolumn {
		padding-top: 0;
	}
}



/*************************************************
 *
 * SPサイド折りたたみ
 *
*************************************************/
@media ( max-width: 979px ) {
	/* ==============================================
	 * SPコンテンツエリア
	=============================================== */
	/* shadow */
	.sp_side_enabled #sp_content:after {
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 900;
		background-color: transparent;
		visibility: hidden;
		transition: background-color 350ms;
		position: fixed;
		top:0;
	}
	.sp_side_enabled #sp_content.side-opened:after {
		visibility: visible;
		background-color: rgba(0,0,0,0.3);
	}
	/* ==============================================
	 * SPサイドエリア
	=============================================== */
	#sp_side {
		position: absolute;
		top: 0;
		left: 0;
		width: 80%;
		min-height: 100%;
		z-index: 900;
		-webkit-transition: -webkit-transform 350ms ease;
		transition: transform 350ms ease;
	}
	#sp_side.side-closed {
		-webkit-transform: translate3d(-100%,0,0);
		transform: translate3d(-100%,0,0);
	}
	#sp_side.side-opened {
		-webkit-transform: translate3d(0%,0,0);
		transform: translate3d(0%,0,0);
	}
	#sp_side.sp_side_hidden {
		visibility: hidden;
	}
	/* ==============================================
	 * SPサイドcloseエリア
	=============================================== */
	#side_dismiss {
		position: fixed;
		top: 0;
		left: 70%;
		visibility: hidden;
		width: 100%;
		min-height: 100%;
		z-index: 999;
	}
	#side_dismiss.side-opened {
		visibility: visible;
	}
}
@media ( min-width: 980px ) {
	/* ==============================================
	 * SPサイドエリア
	=============================================== */
	#sp_side {
		position: absolute;
		top: 0;
		left: 0;
		width: 300px;/*420px;*/
		min-height: 100%;
		z-index: 900;
		-webkit-transition: -webkit-transform 350ms ease;
		transition: transform 350ms ease;
	}
	#sp_side.side-closed {
		-webkit-transform: translate3d(-100%,0,0);
		transform: translate3d(-100%,0,0);
	}
	#sp_side.side-opened {
		-webkit-transform: translate3d(0%,0,0);
		transform: translate3d(0%,0,0);
	}
	#sp_side.sp_side_hidden {
		visibility: hidden;
	}
	/* ==============================================
	 * SPサイドcloseエリア
	=============================================== */
	#side_dismiss {
		display: none;
	}
}


/*************************************************
 *
 * テキスト
 *
*************************************************/
body {
	color: #000;
	font-size: 13px;
	line-height: 1.5;
	/*
	font-family: Helvetica, Arial, Roboto, 'Hiragino Kaku Gothic ProN', "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", Meiryo, sans-serif;
	↑ 游ゴシックはあまりよろしくない？
	*/
	font-family: Helvetica, Arial, Roboto, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}

/* リンクテキスト
----------------------------------------------- */
a:link {
	color: #39c;
	text-decoration: none;
	outline: none;
}
a:visited {
	color: #39c;
	text-decoration: none;
}
a:hover,
a:active {
	text-decoration: underline;
}

/* 他テキスト
----------------------------------------------- */
/* 注意 */
.attention {
	color: #c00;/*赤文字*/
}
.attention2 {
	color: #235282;/*エラーの印象を促す赤文字以外を使いたい場面*/
}
/* 強調1 */
.st {
	font-weight: bold;
}
/* 強調2 */
.big {
	font-size: 15px;
}
/* 小文字 */
.mini {
	font-size: 12px;
}
/* ポイント */
.point {
	color: #c00;
	font-weight: normal;
}
/* 会員氏名 */
.user_name {
	font-weight: bold;
}

/* フォント
----------------------------------------------- */
.eisuu {/*英数字用*/
	font-family: 'Arial';
}
.minchou {/*明朝系*/
	font-family: "Times New Roman", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.en {
	font-family: "Georgia";
}


/*************************************************
 *
 * フォーム部品
 *
*************************************************/
input,
select,
textarea {
	/* EFOインフォ（ecp_form_valid.js）ハイライト表示時に要素の大きさが変化しないようにあらかじめ */
	box-sizing: border-box;
	background-color: #fff;/*枠内に背景を付けるのでフォーム内は白に*/
	border: solid 1px #c0c0c8;
	outline: none;
}

/* フォーカス時 */
input:focus,
select:focus,
textarea:focus {
	border-color: #69c !important;
	box-shadow: 0 0 4px rgba(102,153,204,0.3) !important;
	background-color: #fff !important;
}
input[type="radio"]:focus,
input[type="checkbox"]:focus {
}

/* ==============================================
 * form_basic
=============================================== */
.form_basic input,
.form_basic select,
.form_basic textarea {
	font-size: 13px;/*15px;*/
	border-radius: 4px;
	padding: 5px;
}
.form_basic label {
	font-size: 13px;/*15px;*/
}
.form_basic textarea {
	width: 100%;
	min-width: 200px;
	max-width: 500px;
	height: 6em;
}

/* 必須要素ハイライト表示（ecp_form_valid.js用）
----------------------------------------------- */
.ecp_form_valid input,
.ecp_form_valid select,
.ecp_form_valid textarea {
	transition: 0.3s;
}
.ecp_form_valid input.highlight,
.ecp_form_valid select.highlight,
.ecp_form_valid textarea.highlight {
	background-color: #fffffc;
	border-color: #f3a000;
	box-shadow: 0 0 4px #fca;
}
.ecp_form_valid input[type="radio"].highlight,
.ecp_form_valid input[type="checkbox"].highlight {
	outline: solid 1px #f3a000 !important;
	box-shadow: 0 0 4px 2px #fca;
}

/* 送信ボタン */
input[type="submit"],
input[type="image"] {
	border: none;
	outline: none;
}

/* プレースホルダー文字色 */
::-moz-placeholder {
	color: #444;
}
::-webkit-input-placeholder {
	color: #aaa;
}
:-ms-input-placeholder {
	color: #aaa;
}



/*************************************************
 *
 * その他
 *
*************************************************/
.inline {
	display: inline-block;
	vertical-align: middle;
	margin-right: 10px;
}