@charset "utf-8";

/*************************************************
 * Description: ネットショッピングをより快適に
 * Package: bottombanner
 * Author: Japan Electronic Industrial Arts Co.Ltd.
 * Update: 2018/01/
 * Notes: 
*************************************************/
#block_bottombanner {
	max-width: 1920px;
	margin: 0 auto;
}
#block_bottombanner .section_head {
}
#block_bottombanner .section_body {
}
#block_bottombanner .section_foot {
}

/* ==============================================
 * .section_head
=============================================== */
#block_bottombanner .section_head {
	text-align: center;
}
#block_bottombanner .section_head h2 {
	font-weight: normal;
}
#block_bottombanner .section_head p {
}

/* ==============================================
 * .banner_list
=============================================== */
#block_bottombanner .banner_list {
}
#block_bottombanner .banner_list li {
}
#block_bottombanner .banner_list li .pic {
	border: solid 1px #ccc;
}
#block_bottombanner .banner_list li .pic img {
	max-width: 100%;
	height: auto;
}
/* added 20180124 */
#block_bottombanner .banner_list li .box {
	height: 100%;
	border: 1px solid #937E59;
	/* [disabled]display: flex;*/
	flex-flow: column; 
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}
#block_bottombanner .banner_list li .box .inner {
	padding: 3vw;/*60px;*/
}
/* IE11用
 * ※これに加えてAmazonロゴ画像がサイズが大きすぎるからか.inner高さが大きくなってしまう不具合があった。これはロゴ画像を縮小して作り直したら回避できた。
 */
@media all and (-ms-high-contrast:none){
	*::-ms-backdrop,
	#block_bottombanner .banner_list li .box .inner {
		max-width: 100%;
		box-sizing: border-box;
	}
}
#block_bottombanner .banner_list li .box img {
	max-width: 100%;
	height: auto;
}
#block_bottombanner .banner_list li .box .logo {
	text-align: center;
}
#block_bottombanner .banner_list li .box .text {
	color: #000;
	text-align: center;
	margin-top: 1em;
}
@media ( max-width: 767px ) {
	#block_bottombanner {
	}
	#block_bottombanner .section_head h2 {
		font-size: 20px;
		background-color: #DAD2BE;
		color: #000;
		padding: 10px 10px;
	}
	#block_bottombanner .section_head p {
		font-size: 14px;
		margin-top: 1em;
		text-align: left;
		padding: 0 10px;
	}
	#block_bottombanner .section_body {
		padding: 10px;
	}
	#block_bottombanner .banner_list {
		max-width: 350px;
		margin: 0 auto;
	}
	#block_bottombanner .banner_list li {
	}
	#block_bottombanner .banner_list li + li {
		margin-top: 10px;
	}
	#block_bottombanner .banner_list li .box {
		height: auto;
	}
	#block_bottombanner .banner_list li .box .inner {
		padding: 10px;
	}
	#block_bottombanner .banner_list li .box .text {
		font-size: 12px;
		font-weight: normal;
	}
}
@media ( min-width: 768px ) and ( max-width: 979px ) {
	#block_bottombanner {
		padding: 30px;
	}
	#block_bottombanner .section_head h2 {
		font-size: 24px;
	}
	#block_bottombanner .section_head p {
		font-size: 14px;
		margin-top: 1em;
	}
	#block_bottombanner .section_body {
		padding-top: 30px;
	}
	/*
	#block_bottombanner .banner_list {
		overflow: hidden;
	}
	#block_bottombanner .banner_list li {
		float: left;
		width: calc((99.9% - 40px) / 3);
		margin-left: 20px;
	}
	#block_bottombanner .banner_list li:nth-child(3n+1) {
		margin-left: 0;
		clear: both;
	}
	*/
	#block_bottombanner .banner_list {
		display: flex;
		justify-content: space-between;
	}
	#block_bottombanner .banner_list li {
		float: 0 0 auto;
		width: calc((99.9% - 40px) / 3);
		margin-left: 20px;
	}
	#block_bottombanner .banner_list li:nth-child(3n+1) {
		margin-left: 0;
	}
	#block_bottombanner .banner_list li .box .inner {
		padding: 15px;
	}
	#block_bottombanner .banner_list li .box .text {
		font-size: 12px;
		font-weight: normal;
	}
}
@media ( min-width: 980px ) {
	#block_bottombanner {
		padding: 40px 50px 40px;
	}
	#block_bottombanner .section_head h2 {
		font-size: 30px;
	}
	#block_bottombanner .section_head p {
		font-size: 14px;
		line-height: 1.67;
		margin-top: 1.5em;
	}
	#block_bottombanner .section_body {
		padding-top: 40px;
	}
	/*
	#block_bottombanner .banner_list {
		overflow: hidden;
	}
	#block_bottombanner .banner_list li {
		float: left;
		width: calc((99.9% - 60px) / 3);
		margin-left: 30px;
	}
	#block_bottombanner .banner_list li:nth-child(3n+1) {
		margin-left: 0;
		clear: both;
	}
	*/
	#block_bottombanner .banner_list {
		display: flex;
		justify-content: space-between;
	}
	#block_bottombanner .banner_list li {
		float: 0 0 auto;
		width: calc((99.9% - 60px) / 3);
		margin-left: 30px;
	}
	#block_bottombanner .banner_list li:nth-child(3n+1) {
		margin-left: 0;
	}
	#block_bottombanner .banner_list li .box .text {
		font-size: 16px;
		font-weight: bold;
	}
}
@media ( min-width: 1280px ) {
	#block_bottombanner {
		padding-top: 70px;
		padding-bottom: 100px;
	}
	#block_bottombanner .section_body {
		padding-top: 70px;
	}
}