@charset "utf-8";

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



/*************************************************
 *
 * 実績一覧（ブロック用）
 *
*************************************************/
.portfolio_layout > ul {
	display: flex;
	justify-content: flex-start;
	flex-flow: row wrap;
}
.portfolio_layout li.item {
	flex: 0 0 auto;
}
.portfolio_layout li.item .item_inner {
	height: 100%;
	display: flex;
	justify-content: flex-start;
	flex-flow: column;
}
.portfolio_layout .item_details2 {
	font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.portfolio_layout .item_bottom {
	margin: auto 0 0;
}
.portfolio_layout h3 {
	font-size: inherit;
}
@media ( max-width: 767px ) {
	.portfolio_layout {
		font-size: 14px;
	}
	.portfolio_layout > ul {
		margin-top: -1px;
	}
	.portfolio_layout li.item {
		width: calc((100% - 1px) / 2);
		margin-top: 1px;
		margin-left: 1px;
	}
	.portfolio_layout li.item:nth-child(2n+1) {
		margin-left: 0;
	}
	.portfolio_layout .item_details2 {
		padding: 10px 10px 10px 0;
	}
}
@media ( min-width: 768px ) and ( max-width: 979px ) {
	.portfolio_layout {
		font-size: 15px;
	}
	.portfolio_layout > ul {
		margin-top: -15px;
	}
	.portfolio_layout li.item {
		width: calc((100% - 15px) / 2);
		margin-top: 15px;
		margin-left: 15px;
	}
	.portfolio_layout li.item:nth-child(2n+1) {
		margin-left: 0;
	}
	.portfolio_layout .item_details2 {
		padding: 10px 10px 10px 0;
	}
}
@media ( min-width: 980px ) and ( max-width: 1279px ) {
	.portfolio_layout {
		font-size: 16px;
	}
	.portfolio_layout > ul {
		margin-top: -20px;
	}
	.portfolio_layout li.item {
		width: calc((100% - 40px) / 3);
		margin-top: 20px;
		margin-left: 20px;
	}
	.portfolio_layout li.item:nth-child(4n+1) {
		margin-left: 0;
	}
	.portfolio_layout .item_details2 {
		padding: 20px;
		text-align: center;
	}
}
@media ( min-width: 1280px ) {
	.portfolio_layout {
		font-size: 16px;
	}
	.portfolio_layout > ul {
		margin-top: -20px;
	}
	.portfolio_layout li.item {
		width: calc((100% - 75px) / 4);
		margin-top: 20px;
		margin-left: 25px;
	}
	.portfolio_layout li.item:nth-child(4n+1) {
		margin-left: 0;
	}
	.portfolio_layout .item_details2 {
		padding: 20px;
		text-align: center;
	}
}



/*************************************************
 *
 * 各アイテムパーツ（共通）
 *
*************************************************/
.item {
}
.item a {
	color: inherit;
}
.item a:hover {
	text-decoration: none;
}
@media ( max-width: 767px ) {
}
@media ( min-width: 768px ) and ( max-width: 979px ) {
}
@media ( min-width: 980px ) {
}


/*************************************************
 *
 * 商品アイテムパーツ
 *
*************************************************/
.item_product_image {
}
.item_product_image a {
	display: block;
}
.item_product_image img {
	width: 100%;
}
.item_product_name h3 {
	font-weight: normal;
}

/* ==============================================
 * 商品アイテム共通指定（メインカラム）
 * ※各ブロック間において共通して指定しておきたい内容
=============================================== */
.main_column .item_product_image {}
.main_column .item_product_name h3 {}
/* 商品価格 */
.main_column .item_product_price {}
/* 商品コメント */
.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 {
	margin-left: -5px;/*li改行時にも左端liが左面に合うようこちらで調整*/
}
.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: 16px;
	height: 16px;
	padding: 0 6px;
	border-radius: 3px;
	font-size: 11px;
	background-color: #999;
	color: #fff;
	text-align: center;
}
/* 属性タグ */
.main_column .item_product_tag {
	margin-left: -5px;/*li改行時にも左端liが左面に合うようこちらで調整*/
}
.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: 20px;
	height: 20px;
	padding: 0 8px;
	border-radius: 3px;
	font-size: 11px;
	background-color: #aaa;
	color: #fff !important;
	text-align: center;
}
.main_column .item_product_tag li a:hover {
	text-decoration: none;
}
/* コーナーアイコン */
.main_column .item_corner_icon {}
/* 会員限定商品 */
.main_column .item_product_membersonly {}
/* タイムセール */
.main_column .item_product_timesale {}

/*お気に入り登録済みにバッジを表示*/
.main_column .is_favorite {
	position: relative;
}
.main_column .is_favorite:after {
	font-family: "FontAwesome";
	content: "\f058";
	display: block;
	width: 20px;
	height: 20px;
	text-align: center;
	line-height: 20px;
	position: absolute;
	top: -8px;
	right: -8px;
	font-size: 20px;
	color: #00B22D;
	/*ボタン自体に色がつけられてしまうと白抜き部分にボタン背景がかかるので塗りつぶしておく*/
	background-color: #fff;
	border-radius: 50%;
	pointer-events: none;
}
.main_column .is_favorite a {/*ボタンにも色を付ける場合*/
	background-color: #008000 !important;
	color: #fff !important;
}


/* ==============================================
 * 商品アイテムランキング表示
=============================================== */
/*
 * レスポンシブにおいてはCSSで柔軟に変化を与えたいのでできる限りHTML依存ではなくCSS依存でコーディングしたい。
 * ただし、CSSのみでランキング表示はあまり込み入ったことはできず制限されるケースもある。
 * ランキングアイコンをwebフォントにすると数字との間隔など細かい調整ができない。その場合は画像でbackgroundにするかHTML側にコードを書く。
 */
.product_layout.rank {
	counter-reset: rank;
}
.product_layout.rank .item {
	counter-increment: rank;
}
/* スマホ時（一律固定デザイン）
----------------------------------------------- */
@media ( max-width: 767px ) {
	/**/
	.product_layout.rank .item {
		position: relative;
	}
	.product_layout.rank .item:after {
		content: counter(rank);
		/*background-color: #aaa;*/
		line-height: 2;
		width: 2em;
		height: 2em;
		text-align: center;
		font-size: 17px;
		position: absolute;
		top: 0px;
		left: 0px;
	}
}
@media ( min-width: 768px ) {
	
	/* タイプ【A】
	----------------------------------------------- */
	.product_layout.rank_a h3:before {
		content: counter(rank);
		background: url(../../img/block/ecp_ranking_sales/ico_rank.png) no-repeat 0 0;
		padding-left: 28px;
		line-height: 22px;
		font-size: 17px;
		margin-right: 0.5em;
	}
	.product_layout.rank_a .item:nth-child(1) h3:before {
		background-image: url(../../img/block/ecp_ranking_sales/ico_rank_1.png);
	}
	.product_layout.rank_a .item:nth-child(2) h3:before {
		background-image: url(../../img/block/ecp_ranking_sales/ico_rank_2.png);
	}
	.product_layout.rank_a .item:nth-child(3) h3:before {
		background-image: url(../../img/block/ecp_ranking_sales/ico_rank_3.png);
	}
	
	/* タイプ【B】
	----------------------------------------------- */
	.product_layout.rank_b .item {
		position: relative;
	}
	.product_layout.rank_b .item:after {
		content: counter(rank);
		background: url(../../img/block/ecp_ranking_sales/ico_rank.png) no-repeat 0 0;
		padding-left: 28px;
		line-height: 22px;
		font-size: 17px;
		position: absolute;
		top: 5px;
		left: 5px;
	}
	.product_layout.rank_b .item:nth-child(1):after {
		background-image: url(../../img/block/ecp_ranking_sales/ico_rank_1.png);
	}
	.product_layout.rank_b .item:nth-child(2):after {
		background-image: url(../../img/block/ecp_ranking_sales/ico_rank_2.png);
	}
	.product_layout.rank_b .item:nth-child(3):after {
		background-image: url(../../img/block/ecp_ranking_sales/ico_rank_3.png);
	}
	
	/* タイプ【C】
	----------------------------------------------- */
	.product_layout.rank_c .item_details2:before {
		content: counter(rank);
		background: url(../../img/block/ecp_ranking_sales/ico_rank.png) no-repeat 0 0;
		padding-left: 28px;
		line-height: 22px;
		font-size: 17px;
	}
	.product_layout.rank_c .item:nth-child(1) .item_details2:before {
		background-image: url(../../img/block/ecp_ranking_sales/ico_rank_1.png);
	}
	.product_layout.rank_c .item:nth-child(2) .item_details2:before {
		background-image: url(../../img/block/ecp_ranking_sales/ico_rank_2.png);
	}
	.product_layout.rank_c .item:nth-child(3) .item_details2:before {
		background-image: url(../../img/block/ecp_ranking_sales/ico_rank_3.png);
	}
	
	/* タイプ【D】
	----------------------------------------------- */
	.product_layout.rank_d .item {
		position: relative;
	}
	.product_layout.rank_d .item:after {
		content: counter(rank);
		/*background-color: #aaa;*/
		line-height: 2;
		width: 2em;
		height: 2em;
		text-align: center;
		font-size: 17px;
		position: absolute;
		top: 0px;
		left: 0px;
	}
}


/* ==============================================
 * マウスオーバーで商品情報表示
=============================================== */


/* ==============================================
 * コーナーアイコン
=============================================== */
/* 商品画像の隅にステータスアイコンを表示 */
.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;
}



/*************************************************
 *
 * 新着情報アイテムパーツ
 *
*************************************************/
.news_layout {
}
.news_layout ul {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
}
.news_layout .item {
}
.news_layout .item_inner {
	display: flex;
}
.news_layout .item .item_details1 {
	flex: 0 0 auto;
}
.news_layout .item .item_news_image {
}
.news_layout .item .item_news_image img {
	max-width: 100%;
	height: auto;
}
.news_layout .item .item_details2 {
	flex: 1 1 auto;
}
.news_layout .item date {
	display: block;
	font-family: Georgia;
	margin-bottom: 0.5em;
	line-height: 1;
}
.news_layout .item .item_news_title {
	font-weight: normal;
	font-size: 13px;
	line-height: 1.8;
}
.news_layout .item .item_news_title h3 {
	font-weight: inherit;
	font-size: inherit;
}
@media ( max-width: 767px ) {
	.news_layout {
		margin-top: -20px;
	}
	.news_layout .item {
		width: 100%;
	}
	.news_layout .item + .item {
		margin-top: 20px;
	}
	.news_layout .item .item_news_image {
		width: 70px;
	}
	.news_layout .item .item_details2 {
		padding: 0 0 0 10px;
	}
	.news_layout .item date {
		font-size: 20px;
		margin-bottom: 8px;
	}
}
@media ( min-width: 768px ) and ( max-width: 979px ) {
	.news_layout {
	}
	.news_layout ul {
		margin-top: -30px;
	}
	.news_layout .item {
		width: calc(100% / 2);
		margin-top: 30px;
	}
	.news_layout .item .item_news_image {
		width: 80px;
	}
	.news_layout .item .item_details2 {
		padding: 0 20px;
	}
	.news_layout .item date {
		font-size: 22px;
		margin-bottom: 8px;
	}
}
@media ( min-width: 980px ) {
	.news_layout {
		margin-top: -40px;
	}
	.news_layout .item {
		width: calc(100% / 2);
		margin-top: 40px;
	}
	.news_layout .item .item_news_image {
		width: 90px;
	}
	.news_layout .item .item_details2 {
		padding: 0 20px;
	}
	.news_layout .item date {
		font-size: 25px;
	}
}
@media ( min-width: 1280px ) {
	.news_layout {
		margin-top: -60px;
	}
	.news_layout .item {
		width: calc(100% / 3);
		margin-top: 60px;
	}
	.news_layout .item .item_news_image {
		width: 100px;
	}
	.news_layout .item .item_details2 {
		padding: 0 20px;
	}
	.news_layout .item date {
		font-size: 30px;
	}
}




/*************************************************
 *
 * ecp scroll slider (ecp_scroll_slider.js)
 *
*************************************************/
/* スマホ表示時（一律スタイル）
----------------------------------------------- */
@media ( max-width: 767px ) {
	.ecp_scroll_slider {
		position: relative;
	}
	.ecp_scroll_slider .scroll_btn {
		position: absolute;
		top: 0;/*上下位置はjs算出*/
		width: 35px;
		height: 35px;
		z-index: 1;
	}
	.ecp_scroll_slider .scroll_btn.btn_prev {
		left: 0;
	}
	.ecp_scroll_slider .scroll_btn.btn_next {
		right: 0;
	}
}
/* PC・タブレット表示時
----------------------------------------------- */
@media ( min-width: 768px ) {
	/* スクロールボタン タイプ【B】
	----------------------------------------------- */
	.ecp_scroll_slider_b {
		position: relative;
		padding-top: 40px;
	}
	.ecp_scroll_slider_b .scroll_btn {
		position: absolute;
		top: 0;
		width: 30px;
		height: 30px;
		z-index: 1;
	}
	.ecp_scroll_slider_b .scroll_btn.btn_prev {
		right: 40px;
	}
	.ecp_scroll_slider_b .scroll_btn.btn_next {
		right: 0;
	}
	
	/* スクロールボタン タイプ【C】
	----------------------------------------------- */
	.ecp_scroll_slider_c {
		position: relative;
	}
	.ecp_scroll_slider_c .scroll_btn {
		position: absolute;
		top: 0;/*上下位置はjs算出*/
		width: 35px;
		height: 35px;
		z-index: 1;
	}
	.ecp_scroll_slider_c .scroll_btn.btn_prev {
		left: 0;
	}
	.ecp_scroll_slider_c .scroll_btn.btn_next {
		right: 0;
	}
}



/*************************************************
 *
 * テーブル
 *
*************************************************/
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_formの中に含まれた通常tableには影響がないように変更 */
	.table_form,
	.table_form > thead,
	.table_form > tbody,
	.table_form > tr,
	.table_form > thead > tr,
	.table_form > tbody > tr,
	.table_form > thead > tr > th,
	.table_form > tbody > tr > th,
	.table_form > thead > tr > td,
	.table_form > tbody > tr > td,
	.table_form > tr > th,
	.table_form > tr > td {
		display: block;
		width: 100%;
		border: none;
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	.table_form > colgroup,
	.table_form > colgroup > col,
	.table_form > col {
		width: auto;
	}
	.table_form {
		border-top: solid 1px #ccc;
		border-bottom: solid 1px #ccc;
	}
	.table_form > thead > tr > th,
	.table_form > tbody > tr > th,
	.table_form > tr > th {
		padding: 8px 10px;
	}
	.table_form > thead > tr > td,
	.table_form > tbody > tr > td,
	.table_form > tr > 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;
	padding: 15px;
}
.switch_btn_area label {
	display: block;
	width: 100%;
	cursor: pointer;
}

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

/* ==============================================
 * 基本ボタン
=============================================== */
.btn {
	display: inline-block;
	text-align: center;
	font-size: inherit;
	line-height: 1.5;
	padding: 4px 1em;
	background-color: #666;
	color: #fff !important;
	transition: background-color .3s;
	box-sizing: border-box;
	/* for Mobile */
	-webkit-appearance: none;
	border-radius: 0;
}
.btn:hover {
	text-decoration: none;
	background-color: #333;
}
@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-radius: 4px;
	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;
	background-color: #000;
}
@media ( max-width: 979px ) {
	.btn_paging {
		padding-top: 10px !important;
		padding-bottom: 10px !important;
		border-radius: 5px;
	}
}

/* ==============================================
 * 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;
}


/* ==============================================
 * 手続きボタンエリア
=============================================== */
.process_btn_area {
	padding: 10px;
	box-sizing: border-box;
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
}
.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: 10px;
	padding-bottom: 10px;
	*/
	margin-top: 10px;
}
.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;
		padding-top: 10px;
	}
	.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: flex;
	justify-content: center;
	align-items: center;
	height: 45px;
	padding: 0 10px;
	border-radius: 4px;
	background-color: #B90F0F;
	color: #fff !important;
	line-height: 1;
	transition: .3s;
}
.btn_cartin:hover {
	background-color: #d00;
	text-decoration: none;
}
.btn_cartin i {
	font-size: 22px;
	margin-right: 8px;
}
.btn_cartin span {
	font-size: 14px;
	font-weight: bold;
}

/* ==============================================
 * 数量指定ユニット
=============================================== */
/* マルチ型
----------------------------------------------- */
@media ( max-width: 979px ) {
	/* [-][1][+]の形 */
	.unit_quantity_multi  {
		display: flex;
		justify-content: flex-start;
		height: 45px;
	}
	.unit_quantity_multi input,
	.unit_quantity_multi a {
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		border-radius: 3px;
		line-height: 1;
	}
	.unit_quantity_multi input {
		width: 40px;
		padding: 0;
		margin: 0 5px;
		color: #666;
		font-size: 24px;
		box-sizing: border-box;
	}
	.unit_quantity_multi a {
		width: 40px;
		background-color: #c3c3c3;
		font-size: 16px;
		color: #000;
		transition: .3s;
	}
	.unit_quantity_multi a:hover {
		text-decoration: none;
		background-color: #aaa;
	}
}
@media ( min-width: 980px ) {
	/* [1][▲/▼]の形 */
	.unit_quantity_multi  {
		position: relative;
		width: 80px;
		height: 45px;
		border: solid 1px #ccc;
		border-radius: 4px;
		overflow: hidden;
	}
	.unit_quantity_multi input,
	.unit_quantity_multi a {
		display: block;
		box-sizing: border-box;
		position: absolute;
	}
	.unit_quantity_multi 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;
	}
	.unit_quantity_multi a {
		right: 0;
		width: 26px;
		height: 50%;
		overflow: hidden;
		background-color: #eee;
		transition: .3s;
	}
	.unit_quantity_multi a.btn_plus {
		top: 0;
	}
	.unit_quantity_multi a.btn_minus {
		bottom: 0;
	}
	.unit_quantity_multi 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);
	}
	.unit_quantity_multi a.btn_plus:before {
		content: "▲";
		border-bottom: solid 1px #ccc;
	}
	.unit_quantity_multi a.btn_minus:before {
		content: "▼";
	}
	.unit_quantity_multi a span {
		display: inline-block;
		text-indent: -9999px;
	}
	.unit_quantity_multi a:hover {
		text-decoration: none;
		background-color: #ccc;
	}
	.unit_quantity_multi a:hover:before {
		color: #eee;
	}
}

/* ベーシック型（※商品一覧theme-2でのみ使用）
----------------------------------------------- */
/* [-][1][+]の形 */
.unit_quantity_basic  {
	display: flex;
	justify-content: flex-start;
	height: 40px;
}
.unit_quantity_basic input,
.unit_quantity_basic a {
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	border-radius: 3px;
	line-height: 1;
}
.unit_quantity_basic input {
	width: 40px;
	padding: 0;
	margin: 0 5px;
	color: #666;
	font-size: 24px;
	box-sizing: border-box;
}
.unit_quantity_basic a {
	width: 40px;
	background-color: #c3c3c3;
	font-size: 16px;
	color: #000;
	transition: .3s;
}
.unit_quantity_basic a:hover {
	text-decoration: none;
	background-color: #aaa;
}


/* ==============================================
 * ページャー（ページネーション）
=============================================== */
.pager {
	text-align: center;
	font-size: 0;
	margin: 0;
}
.pager.upper {
}
.pager.lower {
}
.pager strong,
.pager a {
	display: inline-block;
	font-size: 15px;
	min-width: 40px;
	height: 40px;
	line-height: 40px;
	margin: 2px;/*改行時の上下marginも含めて*/
	padding: 0 3px;
	box-sizing: border-box;
	text-align: center;
	color: inherit;
	background-color: #eee;
}
.pager strong {
	font-weight: normal;
	background-color: #000;
	color: #fff;
}
.pager a:hover {
	text-decoration: none;
}

@media ( min-width: 980px ) {/*for PC*/
	.pager {
		padding: 20px 0;
	}
	.pager strong,
	.pager a {
		min-width: 30px;
		height: 30px;
		line-height: 30px;
		background-color: transparent;
		margin: 0;
	}
	.pager strong {
		background-color: #000;
	}
	.pager a {
		transition: .3s;
	}
	.pager a:hover {
		background-color: #eee;
	}
}

/* ==============================================
 * .big_btn
=============================================== */
.big_btn {
	text-align: center;
}
.big_btn a {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	height: 45px;
	box-sizing: border-box;
	border: solid 1px #000;
	color: inherit;
	padding: 0 10px;
	line-height: 1.2;
}
.big_btn.black a {
	border-color: #fff;
}
@media ( max-width: 767px ) {
	.big_btn a {
		width: 100%;
		font-size: 16px;
	}
}
@media ( min-width: 768px ) and ( max-width: 979px ) {
	.big_btn a {
		min-width: 300px;
		width: auto;
		font-size: 17px;
	}
}
@media ( min-width: 980px ) {
	.big_btn a {
		min-width: 300px;
		width: auto;
		font-size: 18px;
		transition: .3s;
	}
	.big_btn a:hover {
		text-decoration: none;
		background-color: #000;
		color: #fff;
	}
	.big_btn.black a:hover {
		background-color: #fff;
		color: #000;
	}
}


/*************************************************
 *
 * ボタンアイコン
 * 
*************************************************/
/* ログイン系 */
.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;
	}
}
*/


/*************************************************
 *
 * パスフロー .pathflow
 * 
*************************************************/
.pathflow {
}
@media ( max-width: 767px ) {
	.pathflow {
		padding: 0 10px 10px;/*適宜調整*/
	}
	.pathflow ul {
		display: flex;
		height: 34px;
		box-sizing: border-box;
		border: solid 1px #ccc;
	}
	.pathflow li {
		flex: 1 1 auto;
		display: flex;
		height: 100%;
		align-items: center;
		justify-content: center;
		position: relative;
	}
	.pathflow li img {
		display: none;
	}
	.pathflow li span {
		font-size: 11px;
		opacity: 0.5;
	}
	/* 区切りマーク */
	.pathflow li:nth-child(n+2) {
		padding-left: 8px;/* 2つ目以降に区切りマーク幅と同幅の余白を確保 */
	}
	.pathflow li:after {
		content: "";
		border-top: solid 17px transparent;
		border-bottom: solid 17px transparent;
		border-left: solid 8px #fff;
		position: absolute;
		top: -1px;
		left: 100%;
		margin-left: -1px;
		z-index: 2;
	}
	.pathflow li:before {
		content: "";
		border-top: solid 17px transparent;
		border-bottom: solid 17px transparent;
		border-left: solid 8px #ccc;
		position: absolute;
		top: -1px;
		left: 100%;
		margin-left: 0;
		z-index: 1;
	}
	.pathflow li:last-child:before,
	.pathflow li:last-child:after {
		display: none;
	}
	.pathflow li.active {
		background-color: #eee;
	}
	.pathflow li.active:after {
		border-left-color: #eee;
	}
	.pathflow li.active span {
		opacity: 1;
	}
}
@media ( min-width: 768px ) {
	.pathflow {
		padding: 0 0 20px;/*適宜調整*/
		text-align: center;
	}
	.pathflow ul {
		display: inline-flex;
		margin: 0 auto;
		position: relative;
	}
	.pathflow ul:before {
		content: "";
		display: block;
		width: 100%;
		height: 1px;
		background-color: #aaa;
		position: absolute;
		left: 0;
	}
	.pathflow li {
		position: relative;
		z-index:2;
	}
	.pathflow li + li {
		margin-left: 80px;
	}
	.pathflow li span {
		display: block;
		font-size: 12px;
		white-space: nowrap;
		color: #999;
	}
	.pathflow li.active span {
		display: block;
		color: #000;
	}
	
	/* タイプ：〇ドットを描画 */
	.pathflow.pathflow-dot {
	}
	.pathflow.pathflow-dot ul:before {
		top: 8px;/*ドットに合わせて適宜調整*/
	}
	.pathflow.pathflow-dot li:first-child {
		background: linear-gradient(to right, rgba(255,255,255,1) 49%, rgba(255,255,255,0) 50%);/* 横棒をマスクするための半分背景 */
	}
	.pathflow.pathflow-dot li:last-child {
		background: linear-gradient(to left, rgba(255,255,255,1) 49%, rgba(255,255,255,0) 50%);/* 横棒をマスクするための半分背景 */
	}
	.pathflow.pathflow-dot li span:before {
		content: "";
		display: block;
		width: 15px;
		height: 15px;
		border-radius: 50%;
		background-color: #fff;
		border: solid 1px #aaa;
		margin: 0 auto 5px;
	}
	.pathflow.pathflow-dot li.active span:before {
		background-color: #c00;
	}
	
	/* タイプ：画像を使用 */
	.pathflow.pathflow-pic {
	}
	.pathflow.pathflow-pic ul:before {
		top: 20px;/*画像に合わせて適宜調整*/
	}
	.pathflow.pathflow-pic li {
		background-color: #fff;/* 横棒をマスクするための全背景 */
	}
	.pathflow.pathflow-pic li img {
		opacity: 0.5;
	}
	.pathflow.pathflow-pic li.active img {
		opacity: 1;
	}
}
@media ( min-width: 980px ) {
	.pathflow {
		padding: 0 0 20px;/*適宜調整*/
	}
}

/* ==============================================
 * ショッピングフロー用微調整（適宜調整）
=============================================== */
@media ( max-width: 767px ) {
	.page_cart .pathflow {
		padding-bottom: 0;
	}
}
@media ( min-width: 768px ) and ( max-width: 979px ) {
	.page_cart .pathflow {
		padding-bottom: 0;
	}
	.page_cart .pathflow li + li {
		margin-left: 50px;
	}
}
@media ( min-width: 980px ) {
	.page_cart .pathflow {
		padding-bottom: 30px;
	}
	.page_cart .pathflow li + li {
		margin-left: 50px;
	}
}



/*************************************************
 *
 * メンバーエリア（ログインエリア＆会員登録ボタン）
 * 
*************************************************/
.member_area {
	width: 100%;
	padding: 0;
	box-sizing: border-box;
}
.member_area .member_section + .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;
	}
}

/* 部品
----------------------------------------------- */
.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;
}
*/
.login_area label.ecp_checkbox {
	display: block;
	margin-top: 5px;
}
@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: 500px;
	}
	.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
 *
*************************************************/
/*
 * note: mb-10等のOOCSSは不変的なCSSとして「base/common.css」側に記述している。
 */

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


/* ==============================================
 * ボックスシャドウ
=============================================== */
.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%;
}



/*************************************************
 *
 * pagetop btn
 *
*************************************************/
#pagetop {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 45px;
	height: 45px;
	background-color: #444;
	border-radius: 50%;
	position: fixed;
	bottom: 15px;
	right: 15px;
	cursor: pointer;
	z-index: 99;
	visibility: hidden;
	opacity: 0;
	transition: .5s;
}
#pagetop:before {
	font-family: "FontAwesome";
	content: "\f106";
	font-size: 32px;
	color: #fff;
	transform: translateY(-2px);/*微調整*/
}
#pagetop.appear {
	visibility: visible;
	opacity: 0.9;
}
@media ( max-width: 979px ) {
	#pagetop.appear {
	}
}
@media ( min-width: 980px ) {
	#pagetop {
		width: 50px;
		height: 50px;
	}
	#pagetop:before {
		font-size: 36px;
	}
	#pagetop.appear {
		opacity: 0.8;
	}
	#pagetop.appear:hover {
		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 {
}
.orderflow_area li:not(:last-child):after {
	font-family: "FontAwesome";
	content: "";
	display: block;
	font-size: 20px;
	line-height: 1;
	color: #999;
}
.orderflow_area .flow_pic img {
	width: 100%;
	height: auto;
}
@media ( max-width: 767px ) {
	.orderflow_area {
	}
	.orderflow_area ul {
		padding-top: 10px;
	}
	.orderflow_area li {
		display: flex;
		flex-flow: row wrap;
	}
	.orderflow_area li:not(:last-child):after {
		content: "\f078";
		flex: 0 0 100%;
		text-align: center;
		padding: 5px 0;
	}
	.orderflow_area .flow_pic {
		flex: 0 0 25%;
	}
	.orderflow_area .flow_text {
		flex: 0 0 75%;
		box-sizing: border-box;
		padding-left: 10px;
	}
}
@media ( min-width: 768px ) {
	.orderflow_area {
		border: solid 1px #ccc;
		border-radius: 10px;
		padding: 20px;
	}
	.orderflow_area ul {
		display: flex;
		justify-content: space-between;
	}
	.orderflow_area li {
		flex: 1 1 auto;
		width: calc((100% - 90px) / 4);/*li要素が4つで30pxずつ間隔をとる場合*/
		box-sizing: border-box;
		position: relative;
	}
	.orderflow_area li:not(:last-child) {
		margin-right: 30px;
	}
	.orderflow_area li:not(:last-child):after {
		content: "\f054";
		width: 30px;
		font-size: 20px;
		position: absolute;
		top: 50%;
		margin-top: -0.5em;
		left: 100%;
		text-align: center;
	}
	.orderflow_area .flow_pic {
		text-align: left;
	}
	.orderflow_area .flow_text {
		padding-top: 0.5em;
	}
}
@media ( min-width: 980px ) {
	.orderflow_area {
		padding: 30px;
	}
	.orderflow_area li {
		width: calc((100% - 150px) / 4);/*li要素が4つで50pxずつ間隔をとる場合*/
	}
	.orderflow_area li:not(:last-child) {
		margin-right: 50px;
	}
	.orderflow_area li:not(:last-child):after {
		width: 50px;
	}
}


/*************************************************
 *
 * お問合せ欄
 *
*************************************************/
.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 {
	/*
	 * W×Hサイズが指定された要素の中で使う事を前提とするのでこちらはサイズを100%としている。
	 * アイコン自体の枠サイズと中の「<」のバランスはpaddingで制御する形。
	 * 例）<p class="btn_prev"><a class="icon-arrow" href=""><span>PREV</span></a></p>
	 */
	display: block;
	width: 100%;
	height: 100%;
	padding: 20%;/*「<」サイズをここで調整*/
	box-sizing: border-box;
	overflow: hidden;
	outline: none;
}
.icon-arrow:before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	margin-left: 30%;/*「<」位置を微調整*/
	transform: rotate(-45deg);
	box-sizing: border-box;
	border: solid 2px #aaa;/* 「<」の線の太さ・色 */
	border-right: none;
	border-bottom: none;
	transition: .3s;
	/*box-shadow: -1px -1px 0px 1px hsla(0, 0%, 100%, 0.5);*/
}
.icon-arrow:hover:before {
	border-color: #666;
}
.icon-arrow > span {
	display: inline-block;
	text-indent: -9999px;
}

/* OOCSS: 丸ボタン */
.icon-arrow-circle {
	border: solid 1px #aaa;
	border-radius: 50%;
	padding: 30%;/*「<」サイズをここで調整*/
}
.icon-arrow-circle:before {
	margin-left: 25%;
}
.icon-arrow-circle:hover:before {
}

/* OOCSS: 角ボタン */
.icon-arrow-square {
	padding: 30%;/*「<」サイズをここで調整*/
	border: solid 1px #aaa;
}
.icon-arrow-black:before {
}
.icon-arrow-black:hover:before {
}


/* ==============================================
 * 矢アイコン「<」
 * aタグにclass「icon-arrow」を指定。
 * 必要に応じてOOCSSを併せて指定
 *
 * 2017/08/ .icon-arrowは↑上記の形に変更。旧アイコンはコメントアウト削除しているがもし「<」角度が90度でないデザインだったりアニメーションさせたりしたい場合は復旧して調整。
=============================================== */
/*
.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);
}
*/

/* ==============================================
 * 矢アイコン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 #aaa;
	background-color: #fff;
	transition: background-color .3s;
}
.icon-arrow2:hover {
	background-color: #eee;
}
.icon-arrow2 > span {
	display: block;
	width: 80%;
	margin-left: 10%;
	height: 2px;
	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: 2px;
	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-black {
	background-color: rgba(0,0,0,0.7);
	border: none;
}
.icon-arrow2-black:hover {
	background-color: rgba(0,0,0,1);
}
.icon-arrow2-black span,
.icon-arrow2-black span:before,
.icon-arrow2-black span:after {
	background-color: #fff;
}

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


/* ==============================================
 * ドットアイコン「●」
 * aタグにclass「icon-dot」を指定。
 * 必要に応じてOOCSSを併せて指定
=============================================== */
.icon-dot {
	/*
	 * W×Hサイズが指定された要素の中で使う事を前提とするのでこちらはサイズを100%としている。（※案件下では全体をpx指定で固定してもいいかもしれない）
	 * 例）<li class="dot_item"><a class="icon-dot" href="">1</a></li>
	 */
	display: block;
	width: 100%;
	height: 100%;
	text-indent: -9999px;
	outline: 0;
	position: relative;
}
.icon-dot:before {
	content: "";
	display: block;
	/* ↓%指定だと微妙にずれることがあったのでcalcでpx減算としてみた。
	width: 70%;
	height: 70%;
	top: 15%;
	left: 15%;
	*/
	width: calc(100% - 6px);
	height: calc(100% - 6px);
	position: absolute;
	top: 3px;
	left: 3px;
	background-color: #aaa;
	border-radius: 50%;
	transition: .3s;
}
.icon-dot:hover:before {
	background-color: #555;
}
.is-active .icon-dot:before,
.icon-dot.is-active:before {
	background-color: #555;
}
/* 外丸 */
.icon-dot:after {
	transition: .3s;
}
.is-active .icon-dot:after,
.icon-dot.is-active:after {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	border: solid 1px #555;
	border-radius: 50%;
	box-sizing: border-box;
	position: absolute;
	top: 0;
	left: 0;
}

/* ==============================================
 * CLOSEアイコン「×」
 * aタグにclass「icon-dot」を指定。
 * 必要に応じてOOCSSを併せて指定
=============================================== */
.icon-close {
	/*
	 * W×Hサイズが指定された要素の中で使う事を前提とするのでこちらはサイズを100%としている。
	 * 例）<p class="close_btn"><a class="icon-close" href="">CLOSE</a></p>
	 */
	display: block;
	width: 100%;
	height: 100%;
	text-indent: -9999px;
	position: relative;
	transition: background-color .3s;
}
.icon-close:before,
.icon-close:after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 0;
	/*width: 70%; margin-left: 15%;*/
	width: 100%;
	height: 2px; margin-top: -1px;
	background-color: #aaa;/*線色*/
	transition: .3s;
}
.icon-close:before {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.icon-close:after {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.icon-close:hover:before,
.icon-close:hover:after {
	background-color: #666;
}

/* OOCSS: 丸ボタン */
.icon-close-circle {
	border: solid 1px #aaa;
	border-radius: 50%;
	transition: .3s;
}
.icon-close-circle:before,
.icon-close-circle:after {
	width: 70%; margin-left: 15%;
}
.icon-close-circle:hover {
	border-color: #666;
}



/*************************************************
 *
 * ソーシャルボタン
 *
*************************************************/
.social_btn {
}
.social_btn ul {
}
.social_btn li {
}
.social_btn li a {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 12px;
	box-sizing: border-box;
	padding: 5px 10px;
	cursor: pointer;
	transition: .3s;
}
.social_btn li i {
	font-size: 130%;
	margin-right: 7px;
}
.social_btn li a:hover {
	text-decoration: none;
	opacity: 0.8;
}
/* Facebook */
.social_btn li a.fb {
	background-color: #3B5999;
	color: #fff;
}
/* Twitter */
.social_btn li a.tw {
	background-color: #1B95E0;
	color: #fff;
}
/* Google+ */
.social_btn li a.gp {
	background-color: #db4a39;
	color: #fff;
}
/* Pinterest */
.social_btn li a.pi {
	background-color: #cb2027;
	color: #fff;
}
@media ( max-width: 767px ) {
	.social_btn ul {
	}
	.social_btn li + li {
		margin-top: 10px;
	}
	.social_btn li a {
		width: 100%;
		min-height: 40px;
	}
}
@media ( min-width: 768px ) and ( max-width: 979px ) {
	.social_btn ul {
	}
	.social_btn li + li {
		margin-top: 10px;
	}
	.social_btn li a {
		width: 100%;
		min-height: 40px;
	}
}
@media ( min-width: 980px ) {
	.social_btn ul {
		display: flex;
		justify-content: center;
	}
	.social_btn li + li {
		margin-left: 10px;
	}
	.social_btn li a {
		/*min-width: 120px; ←横並び1行で収まらない場合は調整、もしくはコメントアウト*/
		min-height: 30px;
		height: 100%;
	}
}
@media ( min-width: 1280px ) {
	.social_btn li {
		width: calc((100% - 30px) / 4);/* ボタン4個、間隔10pxの場合のジャスト幅 */
	}
}


/*************************************************
 *
 * コンテンツスクロール読み込み ecp_fadein
 *
*************************************************/
.ecp_fadein {
	opacity: 0;
	transform: translateY(80px);
	transition: opacity 0.8s, transform 0.8s;
}
.ecp_fadein.ecp_fadein_active {
	opacity: 1;
	transform: translateY(0);
}


/*************************************************
 *
 * ecp_appear エフェクト出現
 *
*************************************************/
/*
 * .ecp_appear_itemはimg画像タグの親要素（img画像と同等のボックス要素であれば先祖要素でOK）に設置。
 * 背景画像で実装する場合は枠に「.ecp_appear_item」を指定しその要素の中にspanを入れて、spanに背景画像を入れる。
 */
.ecp_appear_item {
	position: relative;
	overflow: hidden;
	visibility: hidden;
}
.ecp_appear_item.ecp_appear_active {
	visibility: visible;
}
.ecp_appear_item img,
.ecp_appear_item span {
	transform: translateX(-100%);
	opacity: 0;
}
/* パーツ1: 商品画像本体 */
.ecp_appear_item.ecp_appear_active img,
.ecp_appear_item.ecp_appear_active span {
	animation-duration: 0.7s;
	animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
	animation-delay: 0.4s;/*長くとると動きが増える。((delayとduration合計=1.1s) - マスクduration=0.8s)=0.3sがINする動き*/
	animation-name: ecp_appear_kf1;
}
@keyframes ecp_appear_kf1 {
	0% {
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}
/* パーツ2: マスク */
.ecp_appear_item:before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-color: #eee;
	position: absolute;
	top: 0;
	right: 100%;
	z-index: 3;
	transform: translateX(0);
}
.ecp_appear_item.ecp_appear_active:before {
	animation-duration: 0.8s;
	animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035);
	animation-name: ecp_appear_kf2;
}
@keyframes ecp_appear_kf2 {
	30% {/* IN */
		transform: translateX(100%);
	}
	70% {/* STAY 30% - 70%  */
		transform: translateX(100%);
	}
	100% {/* AWAY */
		transform: translateX(200%);
	}
}
/* パーツ3: ロゴ */
.ecp_appear_item:after {
	content: "";
	display: block;
	background: url(../../img/common/logo_w.svg) no-repeat center center;
	background-size: contain;
	width: 60%;
	height: 60%;
	font-size: 20px;
	position: absolute;
	top: 20%;
	left: 20%;
	z-index: 3;
	pointer-events: none;
}
.ecp_appear_item.ecp_appear_active:after {
	animation-duration: 0.8s;/*マスクdurationと同じ値*/
	animation-fill-mode: forwards;
	animation-name: ecp_appear_kf3;
}
@keyframes ecp_appear_kf3 {
	0% {opacity: 0;}
	10% {opacity: 1;}
	20% {opacity: 0;}
	30% {opacity: 1;}
	40% {opacity: 0;}
	50% {opacity: 1;}
	60% {opacity: 0;}
	70% {opacity: 1;}
	80% {opacity: 0;}
	90% {opacity: 1;}
	100% {opacity: 0;}
}