@charset "UTF-8";
@import url("common.css");


.m__inner{margin: 0 auto; padding: 56px 24px; width: 1032px;}
.main__ttl{margin: 0 0 16px; font-size: var(--fontSize-Noto-h2);}
select{border-radius: 5px; border: 1px solid var(--color-lightBlue); color: var(--color-lightBlue); font-weight: bold; font-size: var(--fontSize-Yu-h4); background: url(../images/common/icon_24arrow_down_bl.svg) no-repeat; background-size: 24px; background-position: right 16px center;}

/*  パンくず
-------------------------------------------------------------*/
#breadcrumbs{margin: 0 auto; padding: 24px 24px 0; width: 1032px; font-size: var(--fontSize-Yu-text2);}
#breadcrumbs,
#breadcrumbs .flex__box{display: flex; align-items: center; gap: 2px;}
#breadcrumbs img{display: inline-block; width: 16px; margin: 0 0 0 4px;}
.breadcrumbs__link{color: var(--color-lightBlue); text-decoration: none;}

/*  カテゴリリンク
-------------------------------------------------------------*/
.category__list-container{padding: 16px; background-color: var(--color-lightGray); border-radius: 10px; overflow: hidden; transition: max-height 0.3s ease;}
.category__list{display: flex; flex-wrap: wrap; gap: 24px; max-height: 70px;}
.category__list-box a{position: relative; padding: 0 0 0 18px; font-size: var(--fontSize-Yu-h4); font-weight: bold; color: var(--color-lightBlue); text-decoration: none;}
.category__list-box a::before{content: ""; position: absolute; background: url(../images/common/icon_16arrow_right_bk.svg); width: 16px; height: 16px; top: -1px; left: 0;}
#itemListCategory .item__count{font-size: var(--fontSize-Yu-h4); color: var(--color-txt-gray);}

.category__list.expanded{max-height: none;}
.js-more-btn{position: relative; margin: 24px 0 0; padding: 16px 0; text-align: center; font-weight: bold; background-color: var(--color-lightGray); cursor: pointer; bottom: -16px;}
.js-more-btn>span{position: relative; padding: 0 20px 0 0; color: var(--color-lightBlue); font-size: var(--fontSize-Yu-text2);}
.js-more-btn>span:hover{opacity: .6; transition: .3s;}
.js-more-btn>span:after{content: ""; position: absolute; background: url(../images/common/icon_16arrow_down_bl.svg); width: 16px; height: 16px; top: 2px; right: 0;}

/* さらに絞り込む */
.sub_category+.sub_category{margin: 16px 0 0;}
.js-search_trigger{position: relative; margin: 16px auto 0; width: 162px; padding: 10px 16px; font-size: var(--fontSize-Yu-h4); border-radius: 5px; background-color: var(--color-lightBlue); color: #FFF; cursor: pointer;}
.js-search_trigger::before,
.js-search_trigger::after{content: ""; position: absolute; top: 50%; transform: translateY(-50%); background-color: #FFF;}
.js-search_trigger::before{width: 18px; height: 2px; right: 21px;}
.js-search_trigger::after{width: 2px; height: 18px; right: 29px;}
.js-search_trigger.is-open::after{content: none;}

/*  カテゴリHTML
-------------------------------------------------------------*/
#category_html{margin: 16px 0 0;}

/*  切り替えタブ
-------------------------------------------------------------*/
.change__tab{display: flex; margin: 32px 0 0;}
.change__tab-ttl{position: relative; font-size: var(--fontSize-Yu-h3); font-weight: bold; cursor: pointer; border-color: var(--line-lightGray) var(--line-lightGray) transparent; border-style: solid; background-color: var(--color-lightGray); color: var(--color-txt-lightGray);}
.change__tab-ttl:first-child{border-width: 1px 0 1px 1px; border-radius: 5px 0 0 0;}
.change__tab-ttl:last-child{border-width: 1px 1px 1px 1px; border-radius: 0 5px 0 0;}
.change__tab-link{display: block; padding: 16px 40px; font-size: var(--fontSize-Yu-h3); text-decoration: none; color: #333;}
.simple_select::after,
.detail_select::after{content: ""; position: absolute; display: block; width: 100%; height: 1px; border-bottom: 3px solid #FFF; left: 0; bottom: -3px;}

/*  ページング関連
-------------------------------------------------------------*/
.pageguide{padding: 32px 0 0; border-top: 1px solid var(--line-lightGray); color: var(--color-txt-gray); font-size: var(--fontSize-Yu-h4);}
.pagelink__area{margin: 24px 0 0; display: flex; justify-content: space-between; align-items: center;}
.rearrange__box select{appearance: none; padding: 11px 16px; width: 156px;}
.paging__box{font-size: var(--fontSize-Yu-h4); font-weight: bold; color: var(--color-txt-gray);}
.paging__box a{color: var(--color-lightBlue); text-decoration: none;}
.paging__box select{appearance: none; margin: 0 0 0 4px; padding: 11px 36px 11px 12px; font-weight: normal; background-position: right 8px center;}

/*  商品カード(共通)
-------------------------------------------------------------*/
.item__maker{font-size: var(--fontSize-Yu-h5); font-weight: bold; color: var(--color-txt-gray);}
.item__link{text-decoration: none; color: #333;}
.item__name{margin: 4px 0 0; font-size: var(--fontSize-Yu-h4);}
.item__content-code,.item__zaiko{color: var(--color-txt-gray); font-size: var(--fontSize-Yu-text2);}
.item__content-code{margin: 8px 0 0;}
.item__zaiko{margin: 4px 0 0;}
.item__price-box{text-align: right;}
.item__price{color: var(--color-red); font-size: var(--fontSize-Yu-h2); font-weight: bold;}
.price__txt-small{font-size: var(--fontSize-Yu-h3);}
.price__txt-gr{margin: 8px 0 0; font-size: var(--fontSize-Yu-text2); color: var(--color-txt-lightGray);}
.order__area{display: flex; gap: 8px; padding: 8px; border-radius: 5px; background-color: var(--color-blue); align-items: center; width: 130px;}
.order__ttl{font-size: var(--fontSize-Yu-h5); font-weight: bold;}
.order__area input[type="text"]{padding: 8px; border: 1px solid var(--color-txt-lightGray); border-radius: 5px; width: 70px; height: 37px;}
.order__area input[type="text"]:disabled{background-color: var(--color-txt-lightGray);}
.login__txt{color: var(--color-red); font-size: var(--fontSize-Yu-h3); font-weight: bold;}

/* アイコン */
.icon__list{display: flex; gap: 4px;}
.icon{ margin: 0 0 8px; border: 1px solid #000; border-radius: 16px; font-size: var(--fontSize-Yu-h5); padding: 3px 12px; font-weight: bold;}
.icon__bg-r{border: 1px solid var(--color-red); background-color: var(--color-red); color: #FFF;}
.icon__r{border: 1px solid var(--color-red); color: var(--color-red);}
.icon__gr{border: 1px solid var(--color-txt-lightGray); color: var(--color-txt-lightGray);}
.icon__og{border: 1px solid #FD9C17; color: #FD9C17;}
.icon__bl{border: 1px solid var(--color-lightBlue); color: var(--color-lightBlue);}

/*  商品カード(simple)
-------------------------------------------------------------*/
.btn-cart{padding: 8px 16px; width: 126px; font-size: var(--fontSize-Yu-h4); font-weight: bold;}
.btn-cart:after{content: none;}
.item__list-box{display: flex; align-items: center; gap: 24px; padding: 16px; border: 1px solid var(--line-lightGray); border-radius: 10px;}
.item__list-box+.item__list-box{margin: 16px 0 0;}
.item__list01{width: 400px;}
.item__list02{color: var(--color-txt-gray); font-size: var(--fontSize-Yu-text2);}
.item__list03{display: flex; gap: 24px; align-items: center; margin: 0 0 0 auto;}

/*  商品カード(detail)
-------------------------------------------------------------*/
#itemListDetail .item__price-box{margin: 8px 0 0; text-align: left;}
#itemListDetail .order__area{margin: 16px 0 0; padding: 8px 12px; width: 100%;}
.item__content-sale{margin: 0 0 8px; padding: 8px; border-radius: 5px; background-color: var(--color-lightGray); font-size: var(--fontSize-Yu-text3); font-weight: bold;}
#itemListDetail .icon__list{flex-wrap: wrap;}
#itemListDetail .icon{margin: 0; height: 26px;}