@charset "utf-8";

/*************************************************
 * Description: 各パーツ用
 * Package: site
 * Author: Japan Electronic Industrial Arts Co.Ltd.
 * Update: 2016/01/
 * Notes: 
*************************************************/



/*************************************************
 *
 * アイテムのカラムレイアウト
 * 
*************************************************/
/*
 * note: 「%」指定の箇所はブラウザごとの解釈に差が出るので案件ごとに「px」指定で書き直せる箇所はpx推奨。
 */
.item_wrap {
	margin-top: 15px;
}
.item_wrap:first-child {
	margin-top: 0;
}
/* 2分割 */
.item_wrap_2 .item {
	width: 49%;
	margin-left: 2%;
	float: left;
}
/* 3分割 */
.item_wrap_3 .item {
	width: 32%;
	margin-left: 2%;
	float: left;
}
/* 4分割 */
.item_wrap_4 .item {
	width: 23.5%;
	margin-left: 2%;
	float: left;
}
/* 5分割 */
.item_wrap_5 .item {
	width: 18.4%;
	margin-left: 2%;
	float: left;
}
/* 6分割 */
.item_wrap_6 .item {
	width: 15%;
	margin-left: 2%;
	float: left;
}
/* 最左item */
/*.item.leftmost {*/
.item:first-child {
	margin-left: 0;
}



/*************************************************
 *
 * 商品アイテムレイアウト（メインカラム）
 *
*************************************************/
/* ==============================================
 * ブラウザ幅に収まらない場合のみスライダー適用
=============================================== */
.main_column .product_layout_a {
	width: 100%;
	white-space: nowrap;
	overflow-x: hidden;
	overflow-y: hidden;
}
.main_column .product_layout_a ul {
	font-size: 0;
}
.main_column .product_layout_a li.item {
	width: 33.3333%;
	display: inline-block;
	vertical-align: top;
	white-space: normal;
}
.main_column .product_layout_a .item_details2 {
	padding: 10px;
}
.main_column .product_layout_a .item_product_name h3 {
	font-size: 14px;
}
.main_column .product_layout_a .item_product_price {
	font-size: 16px;
	color: #9b9e9f;
	margin-top: 10px;
}
@media ( min-width: 980px ) and  ( max-width: 1344px ) {
	.main_column .product_layout_a li.item {
		width: 25%;
	}
	.main_column .product_layout_a .item_details2 {
		padding: 15px;
	}
	.main_column .product_layout_a .item_product_name h3 {
		font-size: 16px;
	}
}
@media ( min-width: 1345px ) and ( max-width: 1680px ) {/*5つ*/
	.main_column .product_layout_a li.item {
		width: 20%;
	}
	.main_column .product_layout_a .item_details2 {
		padding: 30px 15px;
	}
	.main_column .product_layout_a .item_product_name h3 {
		font-size: 16px;
	}
}
@media ( min-width: 1681px ) {/**/
	.main_column .product_layout_a {
	}
	.main_column .product_layout_a ul {
		text-align: center;
	}
	.main_column .product_layout_a li.item {
		width: 336px;/*固定*/
	}
	.main_column .product_layout_a .item_details2 {
		padding: 30px 15px;
	}
	.main_column .product_layout_a .item_product_name h3 {
		font-size: 16px;
	}
}






/*************************************************
 *
 * 商品アイテムパーツ
 *
*************************************************/

/* ==============================================
 * 商品アイテム共通指定（メインカラム）
 * ※各ブロック間において共通して指定しておきたい内容
=============================================== */
/* 商品画像 */
.main_column .item_product_image {
}
.main_column .item_product_image a {
	display: block;
}
.main_column .item_product_image img {
	width: 100%;
}
/* 商品名称 */
.main_column .item_product_name h3 {
	font-weight: normal;
	line-height: 1.5;/*1.2;*/
	text-align: center;
}
@media ( min-width: 768px ) {
	.main_column .product_layout li.item {
		font-size: 13px;/*横並びレイアウト時にul要素に対してフォントーサイズ0を指定しているのでこちらで一括してサイズ復元*/
	}
	.main_column .item_product_name h3 {
		font-size: 14px;
	}
}
/* 商品価格 */
.main_column .item_product_price {
	text-align: center;
}
/* 商品コメント */
.main_column .item_product_comment {}
/* 商品コード */
.main_column .item_product_code {}
/* メーカー名 */
.main_column .item_product_maker_name {}
/* メーカーロゴ */
.main_column .item_product_maker_logo {}

/* 属性アイコン */
.main_column .item_product_icon {
	/*li改行時にも左端liが左面に合うようこちらで調整*/
	margin-left: -5px;
}
.main_column .item_product_icon li {
	display: inline-block;
	margin-left: 5px;
	margin-bottom: 5px;
	/*
	min-width: 70px;
	*/
}
.main_column .item_product_icon li span {
	display: block;
	line-height: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 2px;
	font-size: 10px;
	background-color: #D5D5D5;
	color: #fff;
	text-align: center;
}
/* ステータス別装飾 */
/*
.main_column .item_product_icon li.product_icon_1 span { background-color: #d00; }
.main_column .item_product_icon li.product_icon_2 span {}
.main_column .item_product_icon li.product_icon_3 span {}
*/

/* 属性タグ */
.main_column .item_product_tag {
	/*li改行時にも左端liが左面に合うようこちらで調整*/
	margin-left: -5px;
}
.main_column .item_product_tag li {
	display: inline-block;
	margin-left: 5px;
	margin-bottom: 5px;
	min-width: 80px;
}
.main_column .item_product_tag li a {
	display: block;
	line-height: 27px;
	height: 27px;
	padding: 0 8px;
	border-radius: 2px;
	font-size: 11px;
	background-color: #A0A0A0;
	color: #fff !important;
	text-align: center;
}
.main_column .item_product_tag li a:hover {
	text-decoration: none;
}
/* ステータス別装飾 */
/*
.main_column .item_product_tag li.product_tag_1001 a {}
.main_column .item_product_tag li.product_tag_1002 a {}
.main_column .item_product_tag li.product_tag_1003 a {}
*/

/* コーナーアイコン */
.main_column .item_corner_icon {}
/* 会員限定商品 */
.main_column .item_product_membersonly {}
/* タイムセール */
.main_column .item_product_timesale {}




/* ==============================================
 * マウスオーバーで商品情報表示
=============================================== */
/* PCデバイスのみ有効 */
@media ( min-width: 980px ) {
	/* リンク要素を領域全体に覆う 
	.mo_overlay {
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
	}
	*/

	/* 詳細オーバーレイ黒白共通
	----------------------------------------------- */
	.item.mo_detail_1,
	.item.mo_detail_2 {
		position: relative;
		overflow: hidden;
	}
	.item.mo_detail_1 .item_details2,
	.item.mo_detail_2 .item_details2 {
		position: absolute;
		top: 50%;
		left: 0;
		margin-top: -1em;
		width: 100%;
		box-sizing: border-box;
		padding: 0 10px;
		opacity: 0;
		transition: .2s;
		z-index: 2;
		pointer-events: none;
	}
	/* テキスト背景 */
	.item.mo_detail_1 .item_details1:after,
	.item.mo_detail_2 .item_details1:after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		opacity: 0;
		transition: 0.5s;
		z-index: 1;
	}
	/* マウスオーバーで詳細データを表示させる */
	.item.mo_detail_1:hover .item_details2,
	.item.mo_detail_1:hover .item_details1:after,
	.item.mo_detail_2:hover .item_details2,
	.item.mo_detail_2:hover .item_details1:after {
		opacity: 1;
	}
	.item.mo_detail_1:hover .item_details2 a {
		text-decoration: none;
	}
	
	/* .mo_detail下の.moは機能オフ */
	.item.mo_detail_1 .mo:hover,
	.item.mo_detail_2 .mo:hover {
		opacity: 1 !important;
	}
	
	/* マウスオーバー時に背景に動きを与える 
	.item.mo_detail_1 .item_details1:after,
	.item.mo_detail_2 .item_details1:after {
		transform-origin: 0% 100% 0;
		transform: rotate(10deg);
	}
	.item.mo_detail_1:hover .item_details1:after {
		transform: rotate(0);
	}
	*/

	/* 詳細オーバーレイ黒用(mo_detail=1)
	----------------------------------------------- */
	.item.mo_detail_1 .item_details1:after {
		background-color: rgba(0,0,0,0.7);
	}
	.item.mo_detail_1 .item_details2 {
		color: #fff;
	}

	/* 詳細オーバーレイ白用(mo_detail=2)
	----------------------------------------------- */
	.item.mo_detail_2 .item_details1:after {
		background-color: rgba(255,255,255,0.8);
	}
	.item.mo_detail_2 .item_details2 {
		color: #000;
	}

	/* 詳細オーバーレイスライドダウン(mo_detail=3)
	----------------------------------------------- */
	.item.mo_detail_3 {
		position: relative;
		overflow: hidden;
	}
	.item.mo_detail_3 .item_details2 {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-color: rgba(0,0,0,0.8);
		color: #fff;
		box-sizing: border-box;
		padding: 50% 10px 10px;
		opacity: 0;
		transform: translateY(-100%);
		transition: .3s;
	}
	.item.mo_detail_3:hover .item_details2 {
		opacity: 1;
		transform: translateY(0);
	}
}


/* ==============================================
 * コーナーアイコン
=============================================== */
/* 商品画像の隅にステータスアイコンを表示 */
.item.corner_icon {
	position: relative;
}
.item.corner_icon .item_corner_icon {
	position: absolute;
	top: 0;
	left: 0;
	padding: 0px;/*位置微調整*/
	pointer-events: none;
	z-index: 9;
}
.item.corner_icon .item_corner_icon img {
	margin-right: 1px;
}



/*************************************************
 *
 * ecp scroll slider (ecp_scroll_slider.js)
 *
*************************************************/
.ecp_scroll_slider {
	position: relative;
}
.ecp_scroll_slider .scroll_btn {
	position: absolute;
	top: 0;/*上下位置はjs算出*/
	width: 32px;
	height: 32px;
	z-index: 1;
}
.ecp_scroll_slider .scroll_btn.btn_prev {
	left: 10px;
}
.ecp_scroll_slider .scroll_btn.btn_next {
	right: 10px;
}



/*************************************************
 *
 * テーブル
 *
*************************************************/
table {
}
caption {
}
thead {
}
tbody {
}
colgroup,
col {
}
th {
	white-space: nowrap;
	word-break: keep-all;
}

table + table {
	margin-top: 10px;
}

/* ==============================================
 * 基本テーブル（table_basic）
=============================================== */
.table_basic {
	width: 100%;
}
.table_basic th,
.table_basic td {
	padding: 10px;
	border: solid 1px #ccc;
}
.table_basic th {
	background-color: #f0f0f0;
}
/*thead*/
.table_basic thead th {
	text-align: center;
}
/*tfoot*/
.table_basic tfoot th {
	text-align: right;
	background-color: #efefef;
}
.table_basic tfoot td {
	text-align: right;
}

/* ==============================================
 * フォーム用テーブル（table_form）
=============================================== */
/*
 * tr内にthとtdが1対になっている場合のみ有効
 */
.table_form {
	width: 100%;
}
.table_form th,
.table_form td {
	padding: 15px;
	border: solid 1px #ccc;
}
.table_form th {
	background-color: #f0f0f0;
}
@media ( max-width: 767px ) {/*moblie last*/
	.table_form,
	.table_form thead,
	.table_form tbody,
	.table_form tr,
	.table_form th,
	.table_form td {
		display: block;
		width: 100%;
		border: none;
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	.table_form colgroup,
	.table_form col {
		width: auto;
	}
	.table_form {
		border-top: solid 1px #ccc;
		border-bottom: solid 1px #ccc;
	}
	.table_form th {
		padding: 10px;
	}
	.table_form td {
		padding: 15px 10px;
	}
}

/* ==============================================
 * カート用table(table_cart)
=============================================== */
.table_cart {
	width: 100%;
	/*
	margin: 10px 0;
	*/
}
.table_cart th,
.table_cart td {
	border: solid 1px #ccc;
	padding: 15px;
}
/*thead*/
.table_cart thead th {
	background-color: #424242;
	text-align: center;
	color: #fff;
	border: solid 1px #333;
	border-bottom-color: #fff;/*見た目がすっきり*/
}
/*tfoot*/
.table_cart tfoot th {
	text-align: right;
	background-color: #efefef;
}
.table_cart tfoot td {
	text-align: right;
}

/* テーブルコンテンツ(cart,shopping,mypage) */
table .col_product {
	width: auto;
	text-align: left;
}
table .col_total {
	max-width: 18%;
	word-break: keep-all;
	text-align: right;
}

/* ==============================================
 * table用OOCSS
=============================================== */
th.cell-impact {
	background-color: #d8d8d8;
}

/* cellを大きくする
----------------------------------------------- */
/*
 * 行ごとにセルを大きくするならtbody、tr等にclassを付す。table全体で共通に大きくするならtableに付す。セル単独には使用不可（無効）
 */
@media ( min-width: 980px ) {/*for PC*/
	.bigcell th,
	.bigcell td {
		padding-top: 16px;
		padding-bottom: 16px;
	}
	.bigcell2 th,
	.bigcell2 td {
		/*
		padding-top: 28px;
		padding-bottom: 28px;
		*/
		box-shadow: 0 0 0 5px #00c;/*排除*/
	}
}

/* cellを左右をややシームレスに
----------------------------------------------- */
/*
 * joint_cellを指定したセルの右borderを調整（隣り合わせの右セルの左borderも連携させている）
 */
table .joint_cell {
	/*border-right: none;*/
	border-right: dotted 1px #eee;
}
table .joint_cell + td {
	/*border-left: none;*/
	border-left: dotted 1px #eee;
}

/* ==============================================
 * レスポンシブテーブルOOCSS
=============================================== */
/*
 * tr内にthとtdが1対になっている場合のみ有効
 * table_formと内容は同じであるが（現段階）、table_formはフォーム用にthとtdが対になっている前提であり込みでCSS定義してあるのに対し、
 * こちらはその他のtr・td対tableに付する目的。もう少し整理できればいいが。
 */
@media ( max-width: 767px ) {
	.table-rwd,
	.table-rwd thead,
	.table-rwd tbody,
	.table-rwd tr,
	.table-rwd th,
	.table-rwd td {
		display: block;
		width: 100%;
		border: none;
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	.table_form colgroup,
	.table-rwd col {
		width: auto;
	}
	.table-rwd {
		border-top: solid 1px #ccc;
		border-bottom: solid 1px #ccc;
	}
	.table-rwd th {
		padding: 10px;
	}
	.table-rwd td {
		padding: 15px 10px;
	}
}

/* ==============================================
 * フォームエリア開閉ボタン部
=============================================== */
.switch_btn_area {
	background-color: #d8d8d8;
	display: table;
	width: 100%;
}
/* labelのクリッカブルエリアを大きくとるためのレイアウト */
.switch_btn_area > span {
	display: table-cell;
	vertical-align: middle;
}
.switch_btn_area > span.sw_input {
	width: 45px;/*適当な値でOK*/
	box-sizing: border-box;
	padding: 15px;
}
.switch_btn_area > span.sw_label {
	width: auto;
}
.switch_btn_area > span.sw_label label {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 15px 0;
	cursor: pointer;
}



/*************************************************
 *
 * ボタン
 *
*************************************************/

/* ==============================================
 * 基本ボタン
=============================================== */
.btn {
	display: inline-block;
	text-align: center;
	font-size: inherit;
	line-height: 1;
	padding: 10px 1em;
	background-color: transparent;
	color: #000 !important;
	border: solid 1px #000;
	transition: .3s;
	box-sizing: border-box;
	/*pointer-events: auto;*/
	/* for Mobile */
	-webkit-appearance: none;
	border-radius: 0;
}
.btn:hover {
	text-decoration: none;
	/*
	background-color: rgba(0,0,0,0.8);
	color: #fff !important;
	*/
}
@media ( max-width: 979px ) {
	.btn {
		/*
		padding-top: 10px !important;
		padding-bottom: 10px !important;
		border-radius: 5px;
		*/
	}
}

/* ==============================================
 * 手続きボタン
=============================================== */
.btn_process {
	display: inline-block;
	text-align: center;
	font-size: 15px;
	font-weight: bold;
	letter-spacing: 0.12em;
	line-height: 1.5;
	padding: 11px 1em;
	border-radius: 4px;
	background-color: #000;
	color: #fff !important;
	box-sizing: border-box;
	position: relative;
	transition: background .3s;
}
.btn_process:hover {
	text-decoration: none;
	background-color: #333;
}
/*
.btn_process i {
	margin-right: 7px;
}
*/

/* ==============================================
 * ページングボタン（一覧ボタン等）
=============================================== */
.btn_paging {
	display: inline-block;
	text-align: center;
	font-size: 14px;
	padding: 7px 20px;
	/*
	color: #fff !important;
	background-color: #666;
	*/
	border: solid 2px #000;
	color: #000 !important;
	transition: background-color .3s;
	box-sizing: border-box;
	position: relative;
}
.btn_paging:before {
	font-family: 'FontAwesome';
	content:     '\f0da';
	display: block;
	font-size: 9px;
	line-height: 1;
	position: absolute;
	top: 50%;
	margin-top: -0.5em;
	left: 8px;
}
.btn_paging:hover {
	text-decoration: none;
}
@media ( max-width: 979px ) {
	.btn_paging {
		padding-top: 10px !important;
		padding-bottom: 10px !important;
	}
}

/* ==============================================
 * utilボタン
=============================================== */
.btn_util {
	display: inline-block;
	width: 100%;
	text-align: center;
	border-radius: 3px;
	box-sizing: border-box;
	padding: 7px 15px;
	background-color: #666;
	color: #fff !important;
	font-size: 13px;
	text-shadow: 0 0 1px rgba(0,0,0,0.5);
	transition: background-color .3s;
}
.btn_util:hover {
	text-decoration: none;
	background-color: #333;
}

@media ( min-width:768px ) {
	.btn_util {
		min-width: 120px;
		width: auto;
	}
}

/* ==============================================
 * ボタンOOCSS
=============================================== */
/* ボタン幅 */
.btn-fit {
	width: 100%;
}
.btn-harf {
	width: 50%;
}
/* ボタン高 */
.btn-big {
	padding-top: 10px;
	padding-bottom: 10px;
}
/* ボタン小 */
.btn-mini {
	font-size: 11px;
	padding: 5px;
	min-width: auto;
}
/* ボタン装飾 */
.btn-deco {
	border-radius: 3px;
	background-image: linear-gradient(180deg, rgb(166,166,166) 0%, rgb(133,133,133) 25%, rgb(79,79,79) 95%, rgb(79,79,79) 98%);
}
/* 色:primary */
.btn-primary { background-color: #c00; }
.btn-primary:hover { background-color: #d00; }
/* 色:コーポレートカラー */
.btn-corp { background-color: #454A5D; }
.btn-corp:hover { background-color: #555B71; }
/* 色:バックボタンカラー */
.btn-back { background-color: #666; }
.btn-back:hover { background-color: #999; }

/* ボタン上下margin */
.btn-mtb {
	margin: 10px 0;
}
/* ボタン無効 */
.btn-disabled {
	background-color: #ccc;
	color: #fff;
	pointer-events: none;
}
/* ==============================================
 * ボタン
=============================================== */
/* 詳細ボタン 
------------------------------------------------*/
.btn_detail {
	display: inline-block;
	text-align: center;
	line-height: 1;
	background-color: transparent;
	color: inherit;
	border: solid 1px transparent;
	transition: .3s;
	box-sizing: border-box;
	/* for Mobile */
	-webkit-appearance: none;
	border-radius: 0;
	/**/
	font-family: "Georgia";
	font-size: 13px;
	font-style: italic;
	width: 106px;
	height: 25px;
	padding: 6.5px 0;
}
.btn_detail:hover {
	text-decoration: none;
}
/* ↑hoverにおいてはかかる部位がデザインごとに違うので各ブロックごとに定義 */

/* Moreボタン 
------------------------------------------------*/
.btn_more {
	display: inline-block;
	text-align: center;
	line-height: 1;
	background-color: transparent;
	color: inherit;
	border: solid 2px #fff;
	box-sizing: border-box;
	min-width: 270px;
	transition: .3s;
	/**/
	font-family: "Georgia";
	font-size: 18px;
	font-style: italic;
	padding: 15px;
	position: relative;
	/* for Mobile */
	-webkit-appearance: none;
	border-radius: 0;
}
.btn_more span {
	display: inline-block;
	vertical-align: middle;
	position: relative;
}
.btn_more .icon-arrow {
	display: inline-block;
	width: 15px;
	height: 15px;
	margin-left: 12px;
}
.btn_more .icon-arrow:before,
.btn_more .icon-arrow:after {
	background-color: #fff;
}
.btn_more:hover {
	text-decoration: none;
	/*
	background-color: #fff;
	color: #000 !important;
	*/
	background-color: #B7A948;
	border-color: #B7A948;
}
/*
.btn_more:hover .icon-arrow:before,
.btn_more:hover .icon-arrow:after {
	background-color: #000;
}
*/
@media ( max-width: 979px ) {
	.btn_more {
		font-size: 14px;
		min-width: 180px;
		padding: 15px;
	}
	.btn_more .icon-arrow {
		width: 14px;
		height: 14px;
		margin-left: 8px;
	}
}



/* ==============================================
 * 手続きボタンエリア
=============================================== */
.process_btn_area {
	padding: 10px;
}
.process_btn_area li {
	display: block;
}
.process_btn_area li + li {
	margin-top: 10px;
}
.process_btn_area .btn_process {
	width: 100%;
}

/* message_area付き */
.process_btn_area .message_area {
	background-color: transparent;
	padding: 0;
}
.process_btn_area .message_area + ul {
	margin-top: 10px;
}

@media ( min-width: 768px ) {
	.process_btn_area {
		margin-top: 40px;
		margin-bottom: 20px;
	}
	.process_btn_area ul {
		font-size: 0;/*不要な余白対策。ボタンの文字サイズは.btn_processにて指定*/
		text-align: center;
	}
	.process_btn_area li {
		display: inline-block;
		vertical-align: middle;
	}
	.process_btn_area li + li {
		margin-top: 0;
		margin-left: 20px;
	}
	.process_btn_area .btn_process {
		width: auto;
		min-width: 220px;
	}
	/* message_area付き */
	.process_btn_area .message_area {
		text-align: center;
	}
	.process_btn_area .message_area + ul {
		margin-top: 30px;
	}
}


/* ==============================================
 * ページングボタンエリア
=============================================== */
.paging_btn_area {
	padding-top: 20px;
	padding-bottom: 20px;
}
.paging_btn_area li {
	display: block;
}
.paging_btn_area li + li {
	margin-top: 10px;
}
.paging_btn_area .btn_paging {
	width: 100%;
}

@media ( min-width: 768px ) {
	.paging_btn_area {
		border-top: dotted 1px #ccc;
	}
	.paging_btn_area ul {
		text-align: right;
	}
	.paging_btn_area li {
		display: inline-block;
		vertical-align: middle;
	}
	.paging_btn_area li + li {
		margin-top: 0;
		margin-left: 20px;
	}
	.paging_btn_area .btn_paging {
		width: auto;
	}
}


/* ==============================================
 * カートインボタン
=============================================== */
.btn_cartin {
	display: block;
	padding: 0 10px;
	background-color: #B20000;
	color: #fff !important;
	text-align: center;
	text-decoration: none;
	transition: .3s;
	box-sizing: border-box;
}
/*
.btn_cartin i {
	display: inline-block;
	vertical-align: middle;
	font-size: 24px;
	color: #ddd;
	line-height: 50px;/*ボタン高さ*--/
	margin-right: 30px;
	transition: .3s;
}
*/
.btn_cartin span {
	display: inline-block;
	vertical-align: middle;
	font-size: 16px;
	font-weight: normal;
}
.btn_cartin:hover {
	text-decoration: none;
	background-color: #d00;
}
/*
.btn_cartin:hover i {
	color: #000;
}
*/

/* ==============================================
 * 数量指定ユニット
=============================================== */
/* セパレート型（basic）
----------------------------------------------- */
.quantity_basic .unit_quantity  {
	overflow: hidden;
}
.quantity_basic .unit_quantity input,
.quantity_basic .unit_quantity a {
	display: block;
	float: left;
	height: 40px;
	line-height: 40px;
	text-align: center;
	border-radius: 3px;
}
.quantity_basic .unit_quantity input {
	width: 60px;
	padding: 0;
	margin: 0 5px;
	color: #666;
	font-size: 24px;
	box-sizing: border-box;
}
.quantity_basic .unit_quantity a {
	width: 40px;
	background-color: #c3c3c3;
	font-size: 15px;
	color: #000;
	transition: .3s;
}
.quantity_basic .unit_quantity a:hover {
	text-decoration: none;
	background-color: #aaa;
}
/* コンパクト型
----------------------------------------------- */
.quantity_compact .unit_quantity  {
	position: relative;
	width: 80px;
	height: 45px;
	border: solid 1px #ccc;
	border-radius: 4px;
	overflow: hidden;
}
.quantity_compact .unit_quantity input,
.quantity_compact .unit_quantity a {
	display: block;
	box-sizing: border-box;
	position: absolute;
}
.quantity_compact .unit_quantity input {
	top: 0;
	left: 0;
	width: 54px;
	height: 100%;
	padding: 0;
	border: 0;
	text-align: center;
	color: #666;
	font-size: 26px;
	line-height: 45px;
	border-right: solid 1px #ccc;
	/* for Apple device */
	-webkit-appearance: none;
	border-radius: 0;
}
.quantity_compact .unit_quantity a {
	right: 0;
	width: 26px;
	height: 50%;
	overflow: hidden;
	background-color: #eee;
	transition: .3s;
}
.quantity_compact .unit_quantity a.btn_plus {
	top: 0;
}
.quantity_compact .unit_quantity a.btn_minus {
	bottom: 0;
}
.quantity_compact .unit_quantity a:before {
	display: block;
	width: 100%;
	font-size: 10px;
	line-height: 23px;
	text-align: center;
	color: #aaa;
	text-shadow: 0px -1px 0px rgba(0,0,0,0.4), 0 1px 0px rgba(255,255,255,1);
	box-shadow: inset 0 -5px 10px rgba(70%,70%,70%,0.2);
}
.quantity_compact .unit_quantity a.btn_plus:before {
	content: "▲";
	border-bottom: solid 1px #ccc;
}
.quantity_compact .unit_quantity a.btn_minus:before {
	content: "▼";
}
.quantity_compact .unit_quantity a span {
	display: inline-block;
	text-indent: -9999px;
}
.quantity_compact .unit_quantity a:hover {
	text-decoration: none;
	background-color: #ccc;
}
.quantity_compact .unit_quantity a:hover:before {
	color: #eee;
}


/* ==============================================
 * ページャー（ページネーション）
=============================================== */
.pager {
	text-align: center;
	font-size: 0;
	margin: 0;
	/*padding: 30px;商品一覧カテゴリ名称とのバランス*/
}
.pager.upper {
	padding-top: 0 !important;
}
.pager.lower {
	margin-top: 30px;
}
.pager strong,
.pager a {
	display: inline-block;
	vertical-align: middle;
	font-size: 18px;
	min-width: 32px;
	height: 32px;
	line-height: 32px;
	margin: 4px;/*改行時の上下marginも含めて*/
	padding: 0 3px;
	box-sizing: border-box;
	text-align: center;
	color: inherit;
	transition: background-color .3s;
}
.pager strong {
	font-weight: normal;
	background-color: #000;
	color: #fff;
}
.pager a:hover {
	text-decoration: none;
	background-color: #eee;
}
.pager a.icon-arrow2 {
	width: 32px;
	height: 32px;
	padding: 0;
}

@media ( max-width: 979px ) {
	.pager strong,
	.pager a {
		font-size: 16px;
		min-width: 28px;
		height: 28px;
	}
	.pager a.icon-arrow2 {
		width: 28px;
		height: 28px;
		padding: 0;
	}
}
@media ( min-width: 980px ) {
	.pager.lower {
		margin-top: 80px;
	}
}


/*************************************************
 *
 * ボタンアイコン
 * 
*************************************************/
/* ログイン系 */
.icon-login:before {
	font-family: "FontAwesome";
	content: "\f090";
	font-size: 120%;
	font-style: normal;
	display: inline-block;
	vertical-align: middle;
	margin-right: 5px;
}
.icon-logout:before {
	font-family: "FontAwesome";
	content: "\f08b";
	font-size: 120%;
	font-style: normal;
	display: inline-block;
	vertical-align: middle;
	margin-right: 5px;
}
/* メンバーユーザ系 */
.icon-member:before {
	font-family: "FontAwesome";
	content: "\f007";
	font-size: 120%;
	font-style: normal;
	display: inline-block;
	vertical-align: middle;
	margin-right: 5px;
}
/* 検索系 */
.icon-search:before {
	font-family: "FontAwesome";
	content: "\f002";
	font-size: 120%;
	font-style: normal;
	display: inline-block;
	vertical-align: middle;
	margin-right: 5px;
}
/* 追加系 */
.icon-add:before {
	font-family: "FontAwesome";
	content: "\f067";
	font-size: 120%;
	font-style: normal;
	display: inline-block;
	vertical-align: middle;
	margin-right: 5px;
}
/* ショッピング */
.icon-shopping:before {
	font-family: "FontAwesome";
	content: "\f07a";
	font-size: 120%;
	font-style: normal;
	display: inline-block;
	vertical-align: middle;
	margin-right: 5px;
}
/* 配送系 */
.icon-delivery:before {
	font-family: "FontAwesome";
	content: "\f0d1";
	font-size: 120%;
	font-style: normal;
	display: inline-block;
	vertical-align: middle;
	margin-right: 5px;
}

/*  */

/* ※そのほかのアイコンはページごと（page.css）に適宜定義するか、あるいはSmartyテンプレート内にiタグの形で埋め込む*/



/*************************************************
 *
 * トグルナビ
 * 
*************************************************/
.toggle {
}
/* トグルボタン配置場所 */
.toggle .toggle_btn_area {
	position: relative;
}
.toggle .toggle_btn_area h2 {
	padding-right: 50px !important;
}
/* トグルボタン */
.toggle .btn_toggle {
	display: block;
	width: 40px;
	height: 30px;
	text-indent: -9999px;
	background: url(../../img/common/etc/btn_menu2.png) 0 0 no-repeat;
	background-size: 100%;
	position: absolute;
	top: 50%;
	margin-top: -15px;
	right: 10px;
}
/* トグルナビ */
.toggle .toggle_nav {
	font-size: 14px;
	display: none;
	position: relative;/*下記装飾用*/
}
.toggle .toggle_nav:after {/*影を付けて凹んだようにみせる装飾*/
	content: "";
	pointer-events: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-shadow:
		inset 0 2px 2px rgba(0,0,0,.3),
		inset 0 6px 6px rgba(0,0,0,.15),
		inset 0 -2px 2px rgba(0,0,0,.3),
		inset 0 -6px 6px rgba(0,0,0,.15)
		;
	opacity: 0.7;
}
.toggle .toggle_nav li {
	background-color: #f2f3f4;
	border-bottom: solid 1px #ccc;
}
.toggle .toggle_nav li a {
	display: block;
	padding: 10px;
	color: inherit;
	transition: background-color .3s;
}
.toggle .toggle_nav li a:after {
	font-family: "FontAwesome";
	content: "\f105";
	display: inline-block;
	position: absolute;
	right: 10px;
}
/* hover*/
.toggle .toggle_nav li a:hover {
	text-decoration: none;
	background-color: #e8e8e8;
}
/* is-active */
.toggle .toggle_nav li.is-active a {
	background-color: #e0e0e0;
	/*pointer-events: none;*/
}

@media (min-width:768px) {
	.toggle .toggle_nav:after {
		display: none;
		position: static;
	}
	.toggle .toggle_nav li a:after {
		display: none;
	}
}


/*************************************************
 *
 * メッセージエリア
 * 
*************************************************/
/* メッセージエリア基本 */
.message_area {
	margin: 10px 0;
}
/* infoメッセージ */
.message-info {
	border: solid 1px #ccc;
	text-align: center;
	padding: 1em;
}
/* 警告メッセージ */
.message-caution {
	border: solid 1px #c00;
	text-align: center;
	padding: 1em;
	color: #c00;
}
/* 完了メッセージ */
.message-complete {
}
.message-complete h3 {
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 1em;
}

@media ( min-width: 768px ) {
	.message_area {
	}
	.message-info {
	}
	.message-complete {
	}
}



/*************************************************
 *
 * 店舗情報表記エリア（完了ページ）
 * 
*************************************************/
.shop_information_area {
}
.shop_information_area .shop_name {
}
.shop_information_area dl {
}
.shop_information_area dd:before {
	font-family: "FontAwesome";
	display: inline-block;
	vertical-align: middle;
	margin-right: 6px;
}
.shop_information_area dl.shop_tel dd:before {
	content: "\f095";
}
.shop_information_area dl.shop_email dd:before {
	content: "\f0e0";
}
@media ( max-width: 767px ) {
	.shop_information_area {
		background-color: #f0f0f0;
		padding: 10px;
	}
	.shop_information_area hr {
		display: none;
	}
	.shop_information_area .shop_name {
		font-weight: bold;
		font-size: 120%;
		margin-bottom: 0.5em;
	}
	.shop_information_area dl {
		background-color: #333;
		color: #fff;
		text-align: center;
		padding: 10px;
		border-radius: 4px;
	}
	.shop_information_area dl a {
		color: inherit;
	}
	.shop_information_area dt {
		display: none;
	}
	.shop_information_area dd {
		display: inline-block;
		font-size: 120%;
	}
	.shop_information_area dd:before {
		font-size: 120%;
	}
	.shop_information_area dl + p {
		text-align: center;
		margin: 6px 0;
	}
}
@media ( min-width: 768px ) {
	.shop_information_area {
	}
	.shop_information_area hr {/*spacer*/
		padding-top: 30px;
		border: none;
		border-bottom: solid 1px #aaa;
		margin-bottom: 1em;
	}
	.shop_information_area .shop_name {
		font-weight: bold;
		font-size: 18px;
	}
	.shop_information_area dl {
	}
	.shop_information_area dt,
	.shop_information_area dd {
		display: inline-block;
	}
	.shop_information_area dt:after {
		content: ":";
		margin-right: 0.5em;
	}
	.shop_information_area dd:before {
		font-size: 100%;
	}
	.shop_information_area dl.shop_tel {
		display: inline;
	}
	.shop_information_area dl + p {
		display: inline;
	}
}



/*************************************************
 *
 * フローガイドエリア
 * 
*************************************************/
/*
 * note: カートフローや新規会員登録フロー等のフロー画像配置エリア
 * 画像をアルファチャンネル化できたらモバイル時は背景色を入れたい。
 */
.flow_guide_area {
	padding: 10px 0;
	text-align: center;
}
.flow_guide_area img {
	max-width: 100%;
}
@media ( min-width: 980px ) {
	.flow_guide_area {
		padding: 20px 0;
	}
}


/*************************************************
 *
 * メンバーエリア（ログインエリア＆会員登録ボタン）
 * 
*************************************************/
.member_area {
	width: 100%;
	padding: 0 10px;
	box-sizing: border-box;
}
.member_area .member_section {
	margin-top: 20px;
}
.member_area .btn_process {
	margin: 10px 0;
}

/* メディアクエリ */
@media ( min-width: 768px ) {
	.member_area {
		width: 100%;
		display: table;
		table-layout: fixed;
	}
	.member_area .member_section {
		margin-top: 0;
		display: table-cell;
	}
	.member_area .for_member {
		padding-right: 30px;
	}
	.member_area .for_nonmember {
		padding-left: 30px;
		border-left: dotted 1px #ccc;
	}
	.member_area .btn_process {
		margin: 20px 0;
	}
	
	/* 980px以上 */
	@media ( min-width: 980px ) {
		.member_area {
			padding: 0;
		}
	}
}

/* 部品
----------------------------------------------- */
.member_area .member_section h3 {
	margin-bottom: 15px;
	font-size: 16px;
}
.member_area .member_section h3:before {
	display: inline-block;
	width: 26px;
	height: 26px;
	text-align: center;
	line-height: 26px;
	margin-right: .5em;
	font-family: "FontAwesome";
	font-size: 120%;
	background-color: #666;
	color: #fff;
	border-radius: 3px;
}
.member_area .for_member h3:before {
	content: "\f023";
}
.member_area .for_nonmember h3:before {
	content: "\f007";
}
.member_area .notes {
	margin: .5em 0;
}

/* ==============================================
 * ログインエリア
=============================================== */
.login_area {
	width: 100%;
}
.login_area dl {
	width: 100%;
	margin-top: 10px;
}
.login_area dt {
	background-color: #e0e0e0;
	padding: 8px 5px;
}
.login_area dd {
	padding-top: 10px;
}
.login_area dl input[type="text"],
.login_area dl input[type="password"] {
	width: 100%;
}
.login_area input[type="checkbox"] {
	margin-top: 10px;
	display: inline-block;
}
.login_area input[type="checkbox"] + label {
	font-size: 11px;
	position: relative;
	top: -3px;
}

@media ( min-width: 768px ) {
	.login_area dl {
		display: table;
	}
	.login_area dl dt {
		display: table-cell;
		width: 110px;
		background-color: transparent;
	}
	.login_area dl dd {
		display: table-cell;
		width: auto;
		padding-top: 0;
	}
}



/*************************************************
 *
 * 規約エリア
 * 
*************************************************/
.kiyaku_area {
	margin: 10px 0;
	border: solid 1px #ccc;
	padding: 1em;
	max-height: 300px;
	overflow: auto;
}
.kiyaku_area .article {
}
.kiyaku_area .article + .article {
	margin-top: 1em;
}
.kiyaku_area .article dt {
	font-weight: bold;
	font-size: 1.1em;
	margin-bottom: 0.5em;
}
.kiyaku_area .article dl {
}

@media ( min-width: 768px ) {
	.kiyaku_area {
		max-height: 200px;
	}
	.kiyaku_area .article {
	}
	.kiyaku_area .article dt {
	}
	.kiyaku_area .article dl {
	}
}




/*************************************************
 *
 * カートイン商品情報（cart,shopping,mypage共有）
 * 
*************************************************/
.cartin_product .product_photo_area {
	width: 70px;
	margin-bottom: 10px;
}
.cartin_product .product_data_area {
}
/* メディアクエリ */
@media ( min-width: 414px ) {
	.cartin_product {
		overflow: hidden;
	}
	.cartin_product .product_photo_area {
		float: left;
		margin-bottom: 0;
	}
	.cartin_product .product_data_area {
		width: auto;
		float: none;
		margin-left: 80px;
	}
}
/* 商品画像 */
.cartin_product .product_photo {
}
.cartin_product .product_photo a {
	display: block;
}
.cartin_product .product_photo img {
	width: 100%;
}
/* 商品コード */
.cartin_product .product_code {
}
/* 商品名称 */
.cartin_product .product_name {
	display: inline-block;
	vertical-align: top;
}
.cartin_product .product_name a {
	color: inherit;
}
/* 規格 */
.cartin_product .product_class {
	display: inline-block;
	vertical-align: top;
}
.cartin_product .product_class:before {
	content: "[";
}
.cartin_product .product_class:after {
	content: "]";
}
.cartin_product .product_class dt,
.cartin_product .product_class dd {
	display: inline;
}
.cartin_product .product_class dd+dt:before {/*2つ目のdt*/
	content: " / ";
}
.cartin_product .product_class dt:after {
	content: "：";
}
/* 価格 */
.cartin_product .product_price {
	display: block;
}
/* 数量変更・削除 */
.cartin_product .quantity_change {
	display: block;
	white-space: nowrap;
	text-align: right;
	margin-top: 5px;
}
.cartin_product .quantity_change input[type="tel"] {
	display: inline-block;
	vertical-align: middle;
	margin-left: 5px;
	text-align: center;
	width: 3em;
}
.cartin_product .quantity_change a {
	display: inline-block;
	vertical-align: middle;
	background-color: #666;
	border: solid 1px #666;
	color: #fff;
	font-size: 12px;
	text-align: center;
	padding-left: 10px;
	padding-right: 10px;
	margin-left: 5px;
	transition: .3s;
}
.cartin_product .quantity_change a.change {
}
.cartin_product .quantity_change a.delete {
}
/*.cartin_product .quantity_change input[type="tel"],*/
.cartin_product .quantity_change a {
	line-height: 1;
	padding-top: 6px;/*上下paddingで高さを決定*/
	padding-bottom: 6px;
}
.cartin_product .quantity_change a:hover {
	background-color: #000;
	text-decoration: none;
}
/* 数量表示 */
.cartin_product .product_quantity {
}



/*************************************************
 *
 * カレンダー
 * 
*************************************************/
/* ==============================================
 * カレンダーbasic
=============================================== */
.calendar_basic {
	width: 100%;/*なにかしらの要素に包含されているとして100%*/
	border: solid 1px #ccc;
}
/* caption */
.calendar_basic caption {
}
/*thead*/
.calendar_basic thead {
	background-color: #eee;
}
.calendar_basic thead .sunday {
	background-color: #ecc;
}
.calendar_basic thead .saturday {
	background-color: #cde;
}
/* cell */
.calendar_basic th,
.calendar_basic td {
	font-size: 12px;
	text-align: center;
	padding: 3px 0;
	border: dotted 1px #ccc;
}
/* 休日 */
.calendar_basic td.off {
	background-color: #fff6f6;
	color: #c00;
}
/* 今日 */
.calendar_basic td.today {
	border: solid 1px #000;
	background-color: #000;
	color: #fff;
	font-weight: bold;
}
/* 赤字は */
.calendar_basic_area .info {
}
.calendar_basic_area .info .off {
	background-color: #fff6f6;
	color: #c00;
}



/*************************************************
 *
 * OOCSS的に使用する付加CSS
 *
*************************************************/

/* ==============================================
 * 画像マウスオーバー
=============================================== */
.mo {
	transition: .3s;
}
.mo:hover {
	-ms-filter: "alpha( opacity=70 )";
	filter: alpha( opacity=70 );
	opacity: 0.7;
	background-color: #fff;/*Firefoxぺこぺこ対策*/
}

/* ==============================================
 * 画像マウスオーバー: mo_zoom
=============================================== */
.mo_zoom {
	overflow: hidden;
	background-color: #000;
}
.mo_zoom img {
	transition: .6s;
}
.mo_zoom:hover img {
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
	opacity: 0.8;
}

/* ==============================================
 * 画像マウスオーバー: mo_zoom2（黒背景込みの商品一覧）
=============================================== */
@media ( min-width: 980px ) {
	/* 上下にタイトルやMoreボタンがある場合は被らないように逐次z-index:10を付す */
	.product_layout_zoom2 li.item:hover {
		/* 画像を隣接する画像の上に被さるようにli要素自体を上位に */
		z-index: 9;
	}
	.product_layout_zoom2 li.item .item_details1 {
	}
	.product_layout_zoom2 li.item .item_details2 {
		/* hoverした画像が隣接した画像の上に被さっても商品データには被せないようさらに上位に */
		z-index: 10;
	}
	.product_layout_zoom2  li.item .item_details1 {
		/* 画像のデフォルトサイズを90%に縮小しているが画像背景にわずかにグラデーションかかっているため背景黒が顔を出すのでうめるため同様のグラデーション画像を敷いておく */
		background-image: url(../../img/common/etc/bg_mo_product.jpg);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 100% 90%;/*バランスを合わせるため高さは画像縮小率と同じ値*/
	}
	.product_layout_zoom2 .mo_zoom2 {
		display: block;
		/* zoom時の拡大率を稼ぐためデフォルト時は少し縮小しておく */
		-webkit-transform: scale(0.9);
		transform: scale(0.9);
		transition: .5s;
	}
	.product_layout_zoom2 .mo_zoom2:hover {
		/* 画像の黒い背景部分が隣接する画像を隠さない程度の拡大率 */
		-webkit-transform: scale(1.1);
		transform: scale(1.1);
	}
}


/* ==============================================
 * ボックスシャドウ
=============================================== */
.shadow {
	-webkit-box-shadow: 0px 0px 3px 0px #ddd;
	-moz-box-shadow:    0px 0px 3px 0px #ddd;
	box-shadow:         0px 0px 5px 0px #ddd;
}


/* ==============================================
 * 罫線・区切線
=============================================== */
hr.line_dotted {
	border: none;
	border-top: dotted 1px #ccc;
	color: #fff;
	height: 1px;
	margin: 0;
}
hr.line_solid {
	border: none;
	border-top: solid 1px #ccc;
	color: #fff;
	height: 1px;
	margin: 0;
}



/*************************************************
 *
 * その他
 *
*************************************************/

/* ==============================================
 * リンクオーバーレイ（領域全体をリンクボタン化）
=============================================== */
.link_overlay {
	position: relative;
	transition: box-shadow .3s;/*背景変化は即でシャドウだけ遅延*/
}
.link_overlay:hover {
	background-color: #eee;
	box-shadow: 0 2px 4px 2px rgba(0,0,0,.3);
}
/* 領域を覆うaタグ */
.link_overlay a.link_overlay_anchor {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
}



/*************************************************
 *
 * ecp_form_valid.js用
 *
*************************************************/
.ecp_form_valid {
}

.ecp_form_valid .elements_wrap {
	display: inline;
}

/* エラー背景色 */
.ecp_form_valid .error_area {
	background-color: #fff4f4 !important;
}

/* バルーン（基本）
----------------------------------------------- */
.ecp_form_valid .ecp_balloon {
	position: relative;
	display: inline-block;
	background-color: #ccc;
	font-size: 14px;
	line-height: 1.5;
	padding: 0.5em 15px 0.25em;/*8px 28px 4px 15px;*/
	border-radius: 15px;
	cursor: pointer;
	box-shadow: 0px 5px 6px rgba(0,0,0,0.1), 0 2px 2px rgba(0,0,0,0.2);
	visibility: hidden;
	transition: transform .5s ease;
	z-index: 1;
	/*テキスト選択不可*/
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* バルーン吹き出し */
.ecp_form_valid .ecp_balloon:after,
.ecp_form_valid .ecp_balloon:before {
	content: "";
	position: absolute;
	top: 100%;
	left: 13px;
	width: 0;
	height: 0;
}
.ecp_form_valid .ecp_balloon:after {
	border: solid 5px transparent;
	border-top: solid 5px #ccc;
}
.ecp_form_valid .ecp_balloon:before {/*吹き出しに付ける影*/
	border: solid 6px transparent;
	border-top: solid 6px rgba(0,0,0,0.3);
}

/* hover */
.ecp_form_valid .ecp_balloon:hover {
	z-index: 2;
	/*transform: translateY(-2px) scale(1.02);*/
}

/* closeボタン */
.ecp_form_valid .btn_balloon_close {
	display: block;
	position: absolute;
	top: 8px;
	right: 8px;
	width: 15px;
	height: 15px;
	background: url(../../img/common/etc/btn_close.png) 0 0 no-repeat;
	text-indent: -9999px;
}

/* ヘルプバルーン
----------------------------------------------- */
.ecp_form_valid .ecp_balloon_help {
	/*background-color: #ffd800;*/
	background-color: #235282;
	color: #fff;
	
}
.ecp_form_valid .ecp_balloon_help:after {
	/*border-top-color: #ffd800;*/
	border-top-color: #235282;
}

/* エラーバルーン
----------------------------------------------- */
.ecp_form_valid .ecp_balloon_error {
	background-color: #d00;
	color: #fff;
}
.ecp_form_valid .ecp_balloon_error:after {
	border-top-color: #d00;
}
.ecp_form_valid .errballoon {
	display: none;
}

/* ==============================================
 * EFOインフォバルーン
=============================================== */
/* EFOインフォバルーンデザイン */
.efo_info_area {
	position: absolute;
	top: -200px;
	right: 0px;
	box-sizing: border-box;
	padding: 0;
	width: 90px;
	height: 90px;
	border-radius: 45px;
	background-color: #222;
	color: #fff;
	box-shadow: 0 0 7px 2px rgba(0,0,0,0.2), 0 6px 3px -2px rgba(0,0,0,0.2);
	transition: .3s;
	cursor: pointer;
	/*テキスト選択不可*/
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
/* EFOインフォ */
.efo_info_area .efo_info {
	position: absolute;
	top: 28px;
	width: 100%;
}
.efo_info_area .efo_info p {
	margin-bottom: 5px;
	text-align: center;
	line-height: 1;
	color: inherit;
}
/* 「残り○項」 */
.efo_info_area .efo_info span {
	display: inline-block;
	padding: 0 2px;
	vertical-align: middle;
	font-size: 20px;
	color: #f60;
}
/* 必須入力完了時デザイン */
.efo_info_area.efo_info_complete {
	background-color: #0b0;
	color: #fff;
	pointer-events: none;
	cursor: default;
	/*transform: rotateY(180deg);*/
}
.efo_info_area.efo_info_complete .efo_info {
	/*transform: rotateY(-180deg);*/
}
.efo_info_area.efo_info_complete .efo_info span {
	color: inherit;
}
/* EFOエラーインフォ */
.efo_info_area .efo_err_info {
	width: 100%;
	position: absolute;
	bottom: -13px;
}
.efo_info_area .efo_err_info span {
	display: block;
	margin: 0 auto;
	width: 26px;
	height: 26px;
	line-height: 26px;
	border-radius: 13px;
	background-color: #d00;
	color: #fff;
	font-size: 12px;
	text-align: center;
	box-shadow: 0 5px 3px -1px rgba(0,0,0,0.2);
}
/* 必須要素ハイライト表示 */
/* → トータルバランスを見る必要があるのでcommon.css側に記述した） */


/* スマホ用（暫定的） */
@media ( max-width: 767px ) {
	.efo_info_area {
		position: fixed;
		top: -100px;
		left: 0;
		right: 0;
		width: 100%;
		height: 40px;
		border-radius: 0;
		background-color: #222;
		color: #fff;
		box-shadow: 0 0 7px 2px rgba(0,0,0,0.2), 0 6px 3px -2px rgba(0,0,0,0.2);
	}
	/* EFOインフォ */
	.efo_info_area .efo_info {
		position: absolute;
		top: 10px;
		text-align: center;
	}
	.efo_info_area .efo_info p {
		display: inline-block;
	}
}






/*************************************************
 *
 * pagetop btn
 *
*************************************************/
#pagetop {
	display: block;
	width: 50px;
	height: 50px;
	position: fixed;
	bottom: 25px;
	right: 25px;
	cursor: pointer;
	pointer-events: none;
	opacity: 0;
	z-index: 99;
	transition: .5s;
}
#pagetop.appear {
	background-color: rgba(0,0,0,1);
	pointer-events: auto;
	opacity: 0.5;
}
#pagetop.icon-arrow {
	border: solid 3px #fff;
}
#pagetop.icon-arrow:before,
#pagetop.icon-arrow:after {
	background-color: #fff;
	transition: .5s;
}
#pagetop.appear:hover {
	background-color: rgba(183,169,72,1);
	opacity: 1;
}


/*************************************************
 *
 * 動画コンテナ
 *
*************************************************/
.movie_container {
	width: 100%;
	height: 0;
	padding-top: 56.25%;
	overflow: hidden;
	position: relative;
}
.movie_container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* thumb */
.movie_container .thumb {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
}
.movie_container .thumb img {
	width: 100%;
	height: auto;
	transition: 1s;
}
.movie_container .thumb:hover img {
	transform: scale(1.03);
}
/*movie btn*/
.movie_container .thumb:after {
	content: url(../../img/common/etc/btn_movie.png);
	display: block;
	width: 68px;
	height: 47px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -34px;
	margin-top: -24px;
	pointer-events: none;
	opacity: 0.7;
	transition: 1s;
}
.movie_container .thumb:hover:after {
	opacity: 1;
}



/*************************************************
 *
 * お申込みの流れ
 *
*************************************************/
.orderflow_area {
}
@media ( max-width: 767px ) {
	.orderflow_area {
	}
	.orderflow_area ul {
		padding-top: 10px;
	}
	.orderflow_area li {
		overflow: hidden;
		padding: 0 10px;
		padding-bottom: 30px;
		position: relative;
	}
	.orderflow_area li:after {
		font-family: "FontAwesome";
		content: "\f078";
		display: block;
		font-size: 20px;
		line-height: 1;
		color: #999;
		position: absolute;
		bottom: 0.5em;
		left: 50%;
		margin-left: -0.5em;
	}
	.orderflow_area .flow_pic {
		width: 25%;
		float: left;
	}
	.orderflow_area .flow_pic img {
		width: 100%;
	}
	.orderflow_area .flow_text {
		width: auto;
		float: none;
		margin-left: 28%;
	}
	/*lastchild*/
	.orderflow_area li:last-child {
		padding-bottom: 0;
	}
	.orderflow_area li:last-child:after {
		content: "";
	}
}
@media ( min-width: 768px ) {
	.orderflow_area {
		border: solid 1px #ccc;
		border-radius: 10px;
		padding: 20px;
	}
	.orderflow_area ul {
		display: table;
		width: 100%;
		table-layout: fixed;
	}
	.orderflow_area li {
		display: table-cell;
		position: relative;
	}
	.orderflow_area li:after {
		font-family: "FontAwesome";
		content: "\f054";
		display: block;
		font-size: 30px;
		line-height: 1;
		color: #999;
		position: absolute;
		top: 50%;
		margin-top: -0.5em;
		right: 7%;
	}
	.orderflow_area .flow_pic {
		text-align: left;
	}
	.orderflow_area .flow_pic img {
	}
	.orderflow_area .flow_text {
		padding-right: 2em;
	}
	/*lastchild*/
	.orderflow_area li:last-child:after {
		content: "";
	}
	.orderflow_area li:last-child .flow_text {
		padding-right: 0;
	}
}


/*************************************************
 *
 * お問合せ欄
 *
*************************************************/
.contactus_area {
	border: solid 1px #ccc;
	border-radius: 10px;
	margin: 10px 0;
	padding: 15px 20px;
}
.contactus_area dl {
}
.contactus_area dt,
.contactus_area dd {
	display: inline-block;
	vertical-align: middle;
}
.contactus_area dt {
	margin-right: 1em;
}
.contactus_area dd {
	font-size: 180%;
	line-height: 1;
}
.contactus_area dd a {
	color: inherit;
}
.contactus_area dd:before {
	font-family: "FontAwesome";
	content: "\f095";/*default: phone*/
	display: inline-block;
	vertical-align: middle;
	margin-right: 5px;
	font-size: 120%;
}
/* dd.email */
.contactus_area dd.email:before {
	content: "\f0e0";
}
/* dd.fax */
.contactus_area dd.fax:before {
	content: "\f1ac";
}


/*************************************************
 *
 * 評価★
 *
*************************************************/
.recommend_star {
	color: #FCB330;
	line-height: 1.5;
	font-size: 18px;
	vertical-align: middle;
	letter-spacing: -0.1em;
}
.recommend_nostar {
	font-size: 14px;
	line-height: 2;/* ★付きとの行高バランスを取る */
	color: #999;
}



/*************************************************
 *
 * CSS icon
 *
*************************************************/

/* ==============================================
 * 矢アイコン「<」
 * aタグにclass「icon-arrow」を指定。
 * 必要に応じてOOCSSを併せて指定
=============================================== */
.icon-arrow {
	display: block;
	width: 50px;/*default*/
	height: 50px;/*default*/
	text-indent: -9999px;
	overflow: hidden;
	position: relative;
	/* 装飾 */
	border: solid 1px #aaa;
	border-radius: 50%;
	background-color: #fff;
	transition: background-color .3s;
}
.icon-arrow:hover {
	background-color: #eee;
}
.icon-arrow:before,
.icon-arrow:after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 30%; margin-left: -14%;/*ほんの少しだけ右寄りにしたほうがバランス良い*/
	height: 2px; margin-top: -1px;
	background-color: #aaa;/*線色*/
}
.icon-arrow:before {
	-webkit-transform-origin: 0 bottom;
	transform-origin: 0 bottom;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.icon-arrow:after {
	-webkit-transform-origin: 0 top;
	transform-origin: 0 top;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

/* OOCSS: 黒ボタン */
.icon-arrow-black {
	background-color: rgba(0,0,0,0.5);
	border: none;
}
.icon-arrow-black:hover {
	background-color: rgba(0,0,0,1);
}
.icon-arrow-black:before,
.icon-arrow-black:after {
	background-color: #fff;
}

/* OOCSS: 四角ボタン */
.icon-arrow-square {
	border-radius: 0;
}

/* OOCSS: 枠なしの素（矢の大きさをエリアにフィット） */
.icon-arrow-natural {
	background-color: transparent;
	border: none;
	border-radius: 0;
}
.icon-arrow-natural:before,
.icon-arrow-natural:after {
	top: 50%;
	left: 0;
	width: 70%; margin-left: 25%;/*半径50%を45度持ち上げてジャストサイズ→50% × √2*/
	height: 2px; margin-top: -1px;
	transition: background-color .3s;
}
.icon-arrow-natural:hover {
	background-color: transparent;
}
.icon-arrow-natural:hover:before,
.icon-arrow-natural:hover:after {
	background-color: #333;
}


/* ==============================================
 * 矢アイコン2「←」
 * aタグにclass「icon-arrow2」を指定しその中にspanタグを入れておく必要あり。
 * 必要に応じてOOCSSを併せて指定
=============================================== */
.icon-arrow2 {
	display: block;
	width: 50px;/*default*/
	height: 50px;/*default*/
	text-indent: -9999px;
	overflow: hidden;
	/*border:solid 1px #ccc;*/
	background-color: transparent;
	transition: background-color .3s;
}
.icon-arrow2:hover {
	background-color: #eee;
}
.icon-arrow2 > span {
	display: block;
	width: 80%;
	margin-left: 10%;
	height: 1px;
	margin-top: 50%;
	background-color: #666;/*線色*/
	position: relative;
}
.icon-arrow2 > span:before,
.icon-arrow2 > span:after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 70%;
	height: 1px;
	background-color: #666;/*線色*/
}
.icon-arrow2 > span:before {
	-webkit-transform-origin: 0;
	transform-origin: 0;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.icon-arrow2 > span:after {
	-webkit-transform-origin: 0;
	transform-origin: 0;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

/* OOCSS: 丸ボタン */
.icon-arrow2-circle {
	border: solid 1px #aaa;
	border-radius: 50%;
}


/* ==============================================
 * ドットアイコン「●」
 * aタグにclass「icon-dot」を指定。
 * 必要に応じてOOCSSを併せて指定
=============================================== */
.icon-dot {
	display: block;
	width: 50px;/*default*/
	height: 50px;/*default*/
	text-indent: -9999px;
	position: relative;
}
.icon-dot:before {
	content: "";
	display: block;
	width: 70%;
	height: 70%;
	background-color: #999;
	border-radius: 50%;
	position: absolute;
	top: 15%;
	left: 15%;
	transition: background-color .3s;
}
.icon-dot:hover:before {
	background-color: #ddd;
}
.is-active .icon-dot:before,
.icon-dot.is-active:before {
	background-color: #B7A948;
}


/* ==============================================
 * CLOSEアイコン「×」
 * aタグにclass「icon-dot」を指定。
 * 必要に応じてOOCSSを併せて指定
=============================================== */
.icon-close {
	display: block;
	width: 50px;/*default*/
	height: 50px;/*default*/
	text-indent: -9999px;
	position: relative;
	/* 装飾 */
	border: solid 1px #aaa;
	border-radius: 50%;
	background-color: #fff;
	transition: background-color .3s;
}
.icon-close:hover {
	background-color: #eee;
}
.icon-close:before,
.icon-close:after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 0;
	width: 70%; margin-left: 15%;
	height: 2px; margin-top: -1px;
	background-color: #aaa;/*線色*/
}
.icon-close:before {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.icon-close:after {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

/* OOCSS: 黒ボタン */
.icon-close-black {
	background-color: rgba(0,0,0,0.7);
	border: none;
}
.icon-close-black:before,
.icon-close-black:after {
	background-color: #fff;
}
.icon-close-black:hover {
	background-color: rgba(0,0,0,1);
}

/* OOCSS: 枠なしの素（×の大きさをエリアにある程度フィット） */
.icon-close-natural {
	border: none;
	border-radius: 0;
	background-color: transparent;
}
.icon-close-natural:before,
.icon-close-natural:after {
	/*width: 140%; margin-left: -20%;*//*100%フィット*/
	width: 100%; margin-left: 0;
	transition: background-color .3s;
}
.icon-close-natural:hover {
	background-color: transparent;
}
.icon-close-natural:hover:before,
.icon-close-natural:hover:after {
	background-color: #333;
}