#products ul { overflow: hidden; }
#products ul li { margin: 10px 1%; float: left; width: 23%; }
#products ul li a.photo { background-size: 100% auto; }
#products ul li:hover a.photo { background-size: 120% auto; }
#products ul li h3 { overflow: hidden; margin-top: 15px; height: 23px; font-size: 18px; text-align: center; text-overflow: ellipsis; }
#products ul li h3 a { color: #9e2631; font-size: 14px; }

.main-pro-img { overflow: hidden; width: 42%; background: no-repeat 50% / auto 100%; display: inline-block; vertical-align: top; }

.content-wrap .content-main .article-info { margin-top: 2%; }

.main-pro-img img { width: 100%; }

.sub-pro-img { margin-left: 4%; width: 25%; display: inline-block; vertical-align: top; }

.txt-set { float: right; width: 50%; }
#products-content { clear: both; }
.txt-set .product-txt { padding: 40px; }
.txt-set .product-txt h2 { position: relative; margin: 10px 0 30px; padding-bottom: 30px; line-height: 100%; font-size: 20px; color: #000; }
.txt-set .product-txt h2:after { position: absolute; width: 30px; height: 2px; background: #9f2531; display: block; bottom: 0; left: 0; content: ''; }
.txt-set .product-txt h3 { overflow: hidden; font-size: 15px; line-height: 150%; }
.txt-set .product-txt .price { margin-top: 30px; }
.txt-set .product-txt .price p { margin-top: 5px; }
.txt-set .product-txt .price p span { font-size: 13px; }
.txt-set .product-txt .price p span b { margin-left: 15px; font-family: 'Josefin Sans', sans-serif; font-size: 24px; }
.txt-set .product-txt .price p .money-sale { text-decoration: line-through; color: #a9a9a9; }

.sub-pro-img ul li { margin: 10px 1%; width: 47%; display: inline-block; }
.sub-pro-img ul li:first-child { display: none; }

.orderfunction { margin: 30px 0; padding: 15px; background: #e4dbd0; }
.orderfunction p { width: 32%; display: inline-block; }
.orderfunction p label { vertical-align: top; }
.orderfunction p strong { color: #F1070B; }
.orderfunction p input[type="tel"] { padding: 5px; width: 40px; }
.orderfunction p input[type="button"] { margin-left: 5px; padding: 5px; background: #000; display: inline-block; color: #fff; }

.pro-article ul li { margin: 5px 10px 5px 0; padding: 10px 15px; background: #5078d3; border-bottom: 4px solid #e0d5ac; display: inline-block; }
.pro-article ul li.active { background: #f5f5f5; border-bottom: 4px solid #275cbf; }
.pro-article ul li a { color: #222; }

.tab_container { margin: 10px 0 40px; padding: 20px; background: #e2e1e1; border-bottom: 4px solid #b1afaf; }

/* ask */
.ask { overflow: hidden; margin: 30px 0; text-align: right; }
.ask a { padding: 10px 20px; display: inline-block; vertical-align: middle; background: #9f2531; color: #fff; font-size: 18px; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; padding-right: 2.2em; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -ms-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; }
.ask a:before { content: url(/images/ask.png); position: absolute; right: 1em; padding: 1px 1px 0; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); }
.ask a:hover:before , .ask a:focus:before , .ask a:active:before { animation: askIcon 1s infinite alternate ease-in-out; -webkit-animation: askIcon 1s ease-in-out; -moz-animation: askIcon 1s ease-in-out; -ms-animation: askIcon 1s ease-in-out; -o-animation: askIcon 1s ease-in-out; }

@-webkit-keyframes askIcon { 16.65% { -webkit-transform: translateX(6px); } 33.3% { -webkit-transform: translateX(-5px); } 49.95% { -webkit-transform: translateX(4px); } 66.6% { -webkit-transform: translateX(-2px); } 83.25% { -webkit-transform: translateX(1px); } 100% { -webkit-transform: translateX(0); } }
@-moz-keyframes askIcon { 16.65% { -moz-transform: translateX(6px); } 33.3% { -moz-transform: translateX(-5px); } 49.95% { -moz-transform: translateX(4px); } 66.6% { -moz-transform: translateX(-2px); } 83.25% { -moz-transform: translateX(1px); } 100% { -moz-transform: translateX(0); } }
@-ms-keyframes askIcon { 16.65% { -ms-transform: translateX(6px); } 33.3% { -ms-transform: translateX(-5px); } 49.95% { -ms-transform: translateX(4px); } 66.6% { -ms-transform: translateX(-2px); } 83.25% { -ms-transform: translateX(1px); } 100% { -ms-transform: translateX(0); } }
@-o-keyframes askIcon { 16.65% { -o-transform: translateX(6px); } 33.3% { -o-transform: translateX(-5px); } 49.95% { -o-transform: translateX(4px); } 66.6% { -o-transform: translateX(-2px); } 83.25% { -o-transform: translateX(1px); } 100% { -o-transform: translateX(0); } }
@keyframes askIcon { 16.65% { transform: translateX(6px); } 33.3% { transform: translateX(-5px); } 49.95% { transform: translateX(4px); } 66.6% { transform: translateX(-2px); } 83.25% { transform: translateX(1px); } 100% { transform: translateX(0); } }

@media screen and (max-width: 980px) {
	.txt-set , .sub-pro-img { width: 100%; margin-bottom: 30px; }
	.main-pro-img { width: 100%; }
}
@media screen and (max-width: 768px) {
	#products ul li { width: 48%; }
	.main-pro-img , .sub-pro-img , .orderfunction p:last-child { margin: 10px 0; margin-left: 0; width: 100%; display: block; }
	.sub-pro-img ul li { width: 22%; }
}
@media screen and (max-width: 640px) {
	.txt-set .product-txt { padding: 20px; }
	#products .pro-list .p-box { margin: 5px; }
}
@media screen and (max-width: 480px) {
	.sub-pro-img ul li { width: 47%; }
}
@media screen and (max-width: 450px) {
	#products ul li , .orderfunction p { width: 98%; display: block; }
	.orderfunction p { margin: 10px 0; }
}
@media screen and (max-width: 320px) {
	.sub-pro-img ul li { width: 98%; display: block; }
}