@charset "UTF-8";

/* =======================================================================
CSSの名前：item-list.css
--------------------------------------------------------------------------
1.商品一覧
======================================================================= */

/* =================================================================
1.商品一覧
=================================================================*/
main {padding-top: 0px; max-width: 1200px;}

@media screen and (max-width: 1200px) {
	main{padding: 0;}
}

/*  メインビジュアル
-------------------------------------------------------------*/
.item-list .title{margin: 0px auto 60px; display: flex; justify-content: center; align-items: center; background-image: none; background-size: cover; background-position: center;}
.item-list .title .title-text{height: 400px; color: #fff; max-width: 1090px; display: flex; justify-content: center; align-items: center; flex-direction: row;}
.item-list .title .title-text h2{font-size: 60px; width: 100%; text-align: center; line-height: 1; font-weight: 500;}
.item-list .title .title-text p{font-size: 16px; padding-top: 20px; text-align: center; border-top: 1px solid #fff; width: 100%; max-width: 900px; margin-top: 20px; }
.item-list .title img{width: 100%; display: block;}
.item-list .title .image{display: none;}

/* カテゴリ画像がない時 */
.item-list .title.not-bg{background: #F2F2F2;}
.item-list .title.not-bg .title-text{color: #222222; height: 80px;}
.item-list .title.not-bg .title-text p{border-top: 1px solid #222222;}

/* カテゴリーが選択されてない時 */
.item-list .title.not-category{height: auto; padding: 100px 0;}
.item-list .title.not-category h1{color: #2C2C2C;}
.item-list .title.not-category h2{margin-bottom: 0px;}

@media screen and (max-width: 1200px) {
	.item-list .title{margin-bottom: 30px;}
	.item-list .title .title-text{height: 150px;}
	.item-list .title .title-text h2{font-size: 30px;}
	.item-list .title .title-text p{width: 90%; padding-top: 10px; margin-top: 10px; font-size: 14px;}

	.item-list .title.not-bg .title-text{height: 150px;}
}

/*  商品検索エリア
-------------------------------------------------------------*/
.item-list .item-list-category{width: 100%; max-width: 1200px; margin: 0 auto;}
.item-list .item-list-category .box{margin-bottom: 10px;}
.item-list .item-list-category .category-box{display: none; background: #FAFAFA; padding: 20px 5px 20px 20px;}

.item-list .item-list-category .open-button{display: flex; justify-content: center; align-items: center; width: 100%; background: #222; text-align: center; color: #fff; padding: 5px 0; margin: 0 auto;}
.item-list .item-list-category .open-button:after{content: ""; display: inline-block; width: 10px; height: 5px; background-image: url(../images/arrow-down-white.svg); background-size: cover; margin-left: 10px;}
.item-list .item-list-category .open-button.active:after{transform:rotate(180deg);}

.item-list .item-list-category .category-box ul{display: flex; justify-content: flex-start; flex-wrap: wrap;}
.item-list .item-list-category .category-box ul.top-category{border: 0px; padding-bottom: 0px; margin-bottom: 0px;}
.item-list .item-list-category .category-box ul.top-category li{flex: 0 1 19%; margin: 10px 8px 0 0;}
.item-list .item-list-category .category-box ul.top-category li:nth-child(5){margin-right: 0px;}
.item-list .item-list-category .category-box ul.top-category li:nth-child(-n + 5){margin-top: 0px;}
.item-list .item-list-category .category-box ul.top-category li a{background: #fff; display: flex; align-items: center; height: 100%; padding: 5px; font-size: 14px;}
.item-list .item-list-category .category-box ul.top-category li a:hover{opacity: 1; background: #222222; color: #fff;}
.item-list .item-list-category .category-box ul.top-category li a.select{background: #222222; color: #fff;}

.item-list .item-list-category .category-box .sub ul{border: 0px; padding-bottom: 0px; margin-bottom: 0px; padding-top: 20px; border-top: 1px solid #222; margin-top: 20px;}
.item-list .item-list-category .category-box .sub ul li{flex-basis: auto;}
.item-list .item-list-category .category-box .sub ul li a{background: none; display: flex; align-items: center; height: 100%; width:160px; padding: 10px; font-size: 14px;}
.item-list .item-list-category .category-box .sub ul li a:hover{opacity: 1; background: #CCCCCC; color: #222222;}
.item-list .item-list-category .category-box .sub ul li a.select{background: #CCCCCC; color: #222222;}

@media screen and (max-width: 1200px) {
	.item-list .item-list-category{padding: 0 10px;}
	.item-list .item-list-category .category-box{padding: 10px;}

	.item-list .item-list-category .open-button{font-size: 14px;}

	.item-list .item-list-category .category-box ul.top-category li{flex: 0 1 49%; margin: 2% 2% 0 0;}
	.item-list .item-list-category .category-box ul.top-category li:nth-child(-n + 5){margin-top: 2%;}
	.item-list .item-list-category .category-box ul.top-category li:nth-child(even){margin-right: 0%;}
	.item-list .item-list-category .category-box ul.top-category li:nth-child(-n + 2){margin-top: 0px;}
	.item-list .item-list-category .category-box ul.top-category li a{padding: 10px;}

	.item-list .item-list-category .category-box .sub ul li{flex: 0 1 49%; margin: 2% 2% 0 0;}
	.item-list .item-list-category .category-box .sub ul li:nth-child(even){margin-right: 0%;}
	.item-list .item-list-category .category-box .sub ul li:nth-child(-n + 2){margin-top: 0px;}
}

/*  詳細検索
-------------------------------------------------------------*/
.item-list .detail-search-area{display: none; background: #FAFAFA; padding: 0px 40px;}

.item-list .detail-search-area dl{display: flex; align-items: center; justify-content: center; margin-bottom: 20px;}
.item-list .detail-search-area dt{padding-right: 20px;}
.item-list .detail-search-area .top-box{display: flex; flex-direction: column; align-items: center; padding-top: 40px;}
.item-list .detail-search-area input[type="text"]{height: 40px; background: #ffffff; border: 0px; box-shadow: none; padding-left: 20px;}

.item-list .detail-search-area .freeword{position: relative;}
.item-list .detail-search-area .freeword input[type="text"]{width: 400px;}
.item-list .detail-search-area .search_btn{position: absolute; right: 15.9px; top: 0px; background: none; border: 0px;}
.item-list .detail-search-area .space{font-size: 16px;}

.item-list .detail-search-area .price-area input[type="text"]{width: 200px;}
.item-list .detail-search-area .check-box-area{display: flex; align-items: center; justify-content: center;}

/* チェックボックス01 */
.item-list .detail-search-area .check-area input[type=checkbox] {display: none;}
.item-list .detail-search-area .check-area .checkbox01 {box-sizing: border-box; cursor: pointer; display: inline-block; padding: 5px 30px; position: relative; width: auto;}
.item-list .detail-search-area .check-area .checkbox01::before {background: #ffffff; border: 1px solid #E5E5E5; border-radius: 3px; content: ''; display: block; height: 16px; left: 5px; margin-top: -8px; position: absolute; top: 50%; width: 16px;}
.item-list .detail-search-area .check-area .checkbox01::after {border-right: 2px solid #fff; border-bottom: 2px solid #fff; content: ''; display: block; height: 9px; left: 10px; margin-top: -7px; opacity: 0; position: absolute; top: 52%; transform: rotate(45deg); width: 5px;}
.item-list .detail-search-area .check-area input[type=checkbox]:checked + .checkbox01::after {opacity: 1;}
.item-list .detail-search-area .check-area input[type=checkbox]:checked + .checkbox01::before{background: #222222; border: 1px solid #222222;}

.item-list .detail-search-area .button-area{width: 156px; height: 40px; margin: auto; display: flex; justify-content: center;}
.item-list .detail-search-area .button-area .button{width: 156px; height: 40px; background: #fff; border-radius: 3px; background: #222222; color: #ffffff;}
.item-list .detail-search-area .button-area:after {content: ""; display: block; width: 8px; height: 14px; background: url(../images/common/link-arrow.svg); position: absolute; right: 10px; top: 13px; background-size: cover;}
.item-list .detail-search-area .button-area .button:hover{opacity: 0.8;}
.item-list .detail-search-area .narrow-clear{text-align: center; font-size: 12px; margin-top: 20px;}

@media screen and (max-width: 1200px) {
	.item-list .detail-search-area{padding: 10px;}
	.item-list .detail-search-area dl{flex-direction: column; align-items: flex-start; font-size: 14px;}
	.item-list .detail-search-area dt{padding: 0px; font-size: 14px;}

	.item-list .detail-search-area .top-box{padding-top: 0px;}
	.item-list .detail-search-area .freeword input[type="text"]{width: 100%;}

	.item-list .detail-search-area .price-area input[type="text"]{width: 136px;}
	.item-list .detail-search-area .check-box-area{width: 100%; font-size: 14px;}
}

/*  ページャー周辺
-------------------------------------------------------------*/
.item-list .info-area{display: flex; justify-content: space-between; align-items: center; margin: 60px auto 0px; width: 100%; max-width: 1200px;}
.item-list .info-area.solo{justify-content: center;}
.item-list .info-area .pageguide{font-size: 12px; width: 30%;}
.item-list .info-area .pagelink{width: 100%; max-width: 380px; display: flex; justify-content: center;}
.item-list .info-area .sort-box{width: 30%; display: flex; justify-content: flex-end;}
.item-list .info-area .sort-box li{display: flex; align-items: center; margin-left: 20px; font-size: 12px;}
.item-list .info-area .sort-box li:first-child{margin-left: 0px;}
.item-list .info-area .sort-box li span{display: inline-block; margin-right: 5px;}
.item-list .info-area .sort-box li select{border: 1px solid #E5E5E5; border-radius: 5px; font-size: 12px; -webkit-appearance: none; -moz-appearance: none; appearance: none;}

@media screen and (max-width: 1200px) {
	.item-list .info-area{flex-direction: column;}
	.item-list .info-area .pageguide{width: 100%; text-align: center; margin-bottom: 20px;}
	.item-list .info-area .pagelink{margin-bottom: 20px;}
	.item-list .info-area .sort-box{width: 100%; justify-content: center; align-items: center;}
}

/*  商品一覧エリア
-------------------------------------------------------------*/
//.item-list .item-area{display: flex; justify-content: flex-start; flex-wrap: wrap; width: 100%; max-width: 1200px; margin: 30px auto 100px;}
.item-list .item-area{width: 100%; max-width: 1200px; margin: 30px auto 100px;}
.item-list .item-area .box{flex: 0 1 19%; margin: 10px 1px 0 0; box-sizing: border-box; align-items: flex-start; box-shadow: 0px 0px 7px #00000029; word-break: break-all; display: flex; background: #f0f6fa;}
//.item-list .item-area .box:nth-child(-n + 5){margin-top: 0px;}
.item-list .item-area .box:nth-child(-n + 1){margin-top: 0px;}
.item-list .item-area .box:nth-child(5n){margin-right: 0px;}
//.item-list .item-area .img-box{width: 182px; height: 105px; margin-bottom: 0px;}
.item-list .item-area .img-box{width: 100px; height: 80px; margin-bottom: 0px;}
.item-list .item-area .img-box img{max-width: 90%; max-height: 100%; margin-right: 10px; margin-left: 10px;}
.item-list .item-area .text-box{width: 700px; padding: 5px;}
.item-list .item-area .category-box{width: 150px; padding: 5px;}
.item-list .item-area h3{font-size: 16px; font-weight: bold; margin-bottom: 0px;}
.item-list .item-area .appeal{font-size: 11px; margin-top: 3px;}
.item-list .item-area .price{color: #666666; font-size: 12px;}
.item-list .item-area .tax{font-size: 10px;}
.item-list .item-area .sale{color: #C90D0D;}
.item-list .bottom-box{margin-top: 10px; display: flex; justify-content: space-between; align-items: center; padding-right: 5px;}

@media screen and (max-width: 1200px) {
	.item-list .item-area{padding: 0 10px;}
	.item-list .item-area .box{flex: 0 1 32%; margin: 10px 2% 0 0;}
	.item-list .item-area .box:nth-child(-n + 4){margin-top: 10px;}
	.item-list .item-area .box:nth-child(5n){margin-top: 10px; margin-right: 2%;}
	.item-list .item-area .box:nth-child(-n + 3){margin-top: 0px;}
	.item-list .item-area .box:nth-child(4n){margin-right: 2%;}
	.item-list .item-area .box:nth-child(3n){margin-right: 0px;}

	.item-list .item-area .img-box{width: 100px; margin-bottom: 10px;}
	.item-list .item-area h3{font-size: 16px; font-weight: bold;}
	.item-list .item-area .price{font-size: 12px;}
	.item-list .item-area .appeal {font-size: 11px; margin-top: 3px;}
	.item-list .bottom-box{margin-top: 10px;}
}

/* 商品一覧お気に入りリストに入った報告ポップアップ
-------------------------------------------------------------*/
.wishlistSubmitButton{position: relative;}
.wishlistSubmitButton .button{width: 20px; height: 17px; background-image: url(../images/icon-wish.svg); text-indent: -9999px; padding: 0px; background-size: cover;}
.wishlistSubmitButton.wished .button{background-image: url(../images/icon-wish-active.svg);}

.wishlistSubmitButton .wishlistMessage{position: absolute; top: -85px; left: -130px; margin-left: -122px; padding: 10px; background-color: #fff; width: 270px; z-index: 10; display: none; box-shadow: 0px 4px 4px #00000029;}
.wishlistSubmitButton .wishlistMessage:after{content: ""; display: block; position: absolute; top: 100%; left: 50%; margin-left: -3px; width: 6px; height: 5px;}
.wishlistSubmitButton .wishlistMessage .title{text-align: center; font-size: 100.0%; font-weight: bold; color: #000; margin-bottom: 0px;}
.wishlistSubmitButton .wishlistMessage .mainclose{background-color: #fff; cursor: pointer; text-align: center; margin-bottom: 0;}
.wishlistSubmitButton .wishlistMessage .link{background-color: #fff; text-align: center;}
.wishlistSubmitButton .wishlistMessage .close{position: absolute; top: 3px; right: 10px; cursor: pointer;}

.wishlistSubmitButton .wishlistDelMessage{position: absolute; top: -85px; left: -130px; margin-left: -122px; padding: 10px; background-color: #fff; width: 270px; z-index: 10; display: none; box-shadow: 0px 4px 4px #00000029;}
.wishlistSubmitButton .wishlistDelMessage:after{content: ""; display: block; position: absolute; top: 100%; left: 50%; margin-left: -3px; width: 6px; height: 5px;}
.wishlistSubmitButton .wishlistDelMessage .title{text-align: center; font-size: 100.0%; font-weight: bold; color: #000; margin-bottom: 0px;}
.wishlistSubmitButton .wishlistDelMessage .mainclose{background-color: #fff; cursor: pointer; text-align: center; margin-bottom: 0;}
.wishlistSubmitButton .wishlistDelMessage .link{background-color: #fff; text-align: center;}
.wishlistSubmitButton .wishlistDelMessage .close{position: absolute; top: 3px; right: 10px; cursor: pointer;}

@media screen and (max-width: 1200px) {
	.wishlistSubmitButton{margin-right: 5px;}
	.wishlistSubmitButton .button{width: 15px; height: 13px;}
	.wishlistSubmitButton .wishlistDelMessage{position: fixed; top: 50%; left: 50%;}
	.wishlistSubmitButton .wishlistMessage{position: fixed; top: 50%; left: 50%;}
}

/*  カテゴリーhtml
-------------------------------------------------------------*/
.category_html{margin-top: 60px;}

@media screen and (max-width: 1070px) {
	/* スマートフォン用css */
}

/* awoo AI　商品一覧
-------------------------------------------------------------*/
#awoo-classify{max-width: 1200px; margin: 10px auto 0;}
#awoo-classify .awoo-tag-wrapper{gap: 0;}
#awoo-classify .awoo-tag-wrapper a{font-size: 12px; color: #000; background: #fff; border: 1px solid #000; padding: 5px 10px; margin: 0 4px 8px;}
#awoo-classify .awoo-tag-wrapper a:hover{color: #3A3A3A; border-color: #3A3A3A; opacity: 0.7;}
@media screen and (max-width: 1200px) {
	/* スマートフォン用css */
	#awoo-classify{padding: 0 10px;}
}

/* awoo AI　ext/item_list_awoo.xhtml
-------------------------------------------------------------*/
#awoo-category-page{max-width: 1200px; margin: 10px auto 0;}
#awoo-category-page .suggestion-tag-wrapper{background: transparent; padding: 0 0 16px;}
#awoo-category-page .suggestion-tag-wrapper .page-tag-container,
#awoo-category-page .suggestion-tag-wrapper .suggestion-tag-list-container{gap: 0;}
#awoo-category-page .suggestion-tag-wrapper .suggestion-tag-title{font-weight: bold; margin: 0; padding: 20px 0 5px;}
#awoo-category-page .suggestion-tag-wrapper a{font-size: 12px; color: #000; background: #fff; border: 1px solid #000; padding: 5px 10px; margin: 0 4px 8px;}
#awoo-category-page .suggestion-tag-wrapper a:hover{color: #3A3A3A; border-color: #3A3A3A; opacity: 0.7;}
#awoo-category-page .suggestion-tag-wrapper a::before{content: "#";}
#awoo-category-page .category-page-h1{text-align: left; font-size: 24px;}
#awoo-category-page .controll-wrapper{margin:20px 0; gap:0;}
#awoo-category-page .controll-wrapper .right-block{align-items: center; flex-direction: inherit; width: 100%;}
#awoo-category-page .controll-wrapper .selector-group{width: 35%;}
#awoo-category-page .controll-wrapper .two-controll{margin-top: 0; width: 65%;}
#awoo-category-page .controll-wrapper .two-controll .selector-group{width: 50%;}
#awoo-category-page .controll-wrapper .two-controll .display-mode-wrapper{order: 2; margin-left: auto;}
#awoo-category-page .products-wrapper{padding: 0;}
#awoo-category-page .products-wrapper .product-block{box-shadow: none; border-radius: 0; border: 1px solid #D4D4D4;margin: 0 10px 10px 0;font-size: 90%;}
#awoo-category-page .products-wrapper .product-block:nth-child(4n){margin-right: 0;}
#awoo-category-page .products-wrapper .product-block .product-detail-wrapper{padding: 10px 0;}
#awoo-category-page .products-wrapper .product-block .product__name{font-weight: bold; text-decoration: underline;line-height: 16px; height: auto;}
#awoo-category-page .products-wrapper .product-block .lazyload-wrapper{height: 150px;}
#awoo-category-page .products-wrapper .product-block .product__price div {color: #333; display: flex; width: auto;}
#awoo-category-page .products-wrapper .product-block .product__price .sale-price{color: #C00; justify-content: flex-end;}
#awoo-category-page .products-wrapper.list .product-block{width: 100%;}
#awoo-category-page .products-wrapper.list .product-block .product-detail-wrapper{justify-content: center;}
#awoo-category-page .products-wrapper.list .product-block .product__name{margin-bottom: 10px;}
#awoo-category-page .products-wrapper.list .product-block .product-image{width: 120px; height: 120px; margin: 10px;}
#awoo-category-page .products-wrapper.list .product-block .lazyload-wrapper{height: auto;}

@media screen and (max-width: 1200px) {
	/* スマートフォン用css */
	#awoo-category-page{padding: 0 10px;}
	#awoo-category-page .products-wrapper .product-block .lazyload-wrapper{height: auto;}
	#awoo-category-page .controll-wrapper .right-block{align-items: initial; flex-direction: column; width: 100%;}
	#awoo-category-page .controll-wrapper .selector-label{width: auto;}
	#awoo-category-page .controll-wrapper .selector-group{width: auto;}
	#awoo-category-page .controll-wrapper .two-controll{margin-top: 0; width:auto;}
	#awoo-category-page .controll-wrapper .two-controll .selector-group{width: 50%;}
}