@charset "utf-8";

/*-----------------------------------------------------------
商品一覧
-----------------------------------------------------------*/

.productsMain section article {
    max-width: 100%;
}

.productsMain {
    margin-top: 75px;
}

.productsMain section {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 50px 30px;
    width: 100%;
}

.productsMain>section .webgene-pagination:nth-last-child(1) {
    grid-area: auto/auto/auto/span 1;
} 

img + .no-img {
    display: none;
}

.cate {
    background-color: #F0E7D6;
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 13px;
    letter-spacing: 0.05em;
}

.cateSet {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
}

.productTitle {
    font-size: 20px;
    letter-spacing: 0.08em;
    line-height: 1.44em;
    margin-top: 12px;
    padding-bottom: 15px;
    border-bottom: 1px solid #D7D3C9;
}

.productMoney {
    font-size: 18px;
    letter-spacing: 0.08em;
    margin-top: 10px;
    line-height: 1.467em;
}

.productEditor {
    font-size: 16px;
    letter-spacing: 0.08em;
    margin-top: 10px;
    line-height: 1.667em;
}

.productBtn {
    width: 100%;
    height: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    letter-spacing: 0.08em;
    position: relative;
    gap: 20px;
    border: 1px solid;
    border-radius: 33px;
    transition: all .5s;
    border-color: #AAA9A3;
    color: #616664;
}

.productBtn:hover {
    background-color: #5C8453;
    color: #F6EFE3;
    border-color: #5C8453;
}

.productBtn01 {
    margin-top: 15px;
}

.productBtn02 {
    margin-top: 15px;
}

/*----slider---*/

.inSliderBox .carousel-item img {
    overflow: hidden;
}

.carousel-item > img {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
}

.carousel-inner {
	padding: 0px 0 66.67%;
	overflow: hidden;
	margin: 0 auto;
	height: 0;
	background-color: #FFFFFF;
}

.carousel-item {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	max-width: 100%;
	width: auto;
	height: 100%;
}

.carousel-control-next-icon,
.carousel-control-prev-icon {
	display: inline-block;
	width: 50px;
	height: 50px;
	-webkit-background-size: 100%;
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	transition: all .5s;
}

.carousel-control-next-icon {
  	background-image: url(/system_panel/uploads/images/next-icon.svg);
}

.carousel-control-prev-icon {
	background-image: url(/system_panel/uploads/images/prev-icon.svg);
}

/*-----------------------------------------------------------
検索
-----------------------------------------------------------*/

/* チェックボックス本体のカスタマイズ */
.search-contents-wrapper input {
  /* デフォルトの見た目を消す */
  appearance: none;
  -webkit-appearance: none;
  
  /* 新しい見た目（枠線と背景） */
  min-width: 20px;
  height: 20px;
  border: 1px solid #616664; /* デフォルトの枠線色 */
  background-color: #ffffff00;
  vertical-align: middle;
  position: relative;
  cursor: pointer;
  margin-right: 10px;
}

/* チェックされた時の背景と枠線の色 */
.search-contents-wrapper input:checked {
  background-color: #5C8453; /* チェック時の背景色 */
  border-color: #5C8453;     /* チェック時の枠線色 */
}

/* チェックボックスにチェックが入っている「label」の文字色を変える */
.search-contents-wrapper label:has(input:checked) {
  color: #5C8453; /* 好きな文字色に変更してください */
}

/* チェックマーク（L字の線）を擬似要素で作成 */
.search-contents-wrapper input:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid #fff; /* チェックマーク自体の色 */
  border-width: 0 1px 1px 0;
  transform: rotate(45deg);
}

.search-contents-wrapper {
    padding-left: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.search-contents-wrapper label {
    display: flex;
    width: auto;
    margin-bottom: 0;
    align-items: center;
    font-size: 16px;
    letter-spacing: 0.05em;
}

.search-contents-wrapper label:last-child {
    margin-bottom: 0;
}

input.search-submit {
    width: 100%;
    height: 55px;
    border: 1px solid #AAA9A3;
    background-color: #ffffff00;
    border-radius: 33px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.05em;
    margin-top: 30px;
    cursor: pointer;
    color: #616664;
    transition: all .5s;
}

input.search-submit:hover {
    background-color: #5C8453;
    color: #fff;
}

.search-title {
    font-size: 16px;
    letter-spacing: 0.05em;
    padding: 5px 20px;
    border-radius: 20px;
    background-color: #F0E7D6;
    display: inline-block;
    margin-bottom: 15px;
}

.productsLeftCate {
    margin-top: 20px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #ccc;
}

.productsSidoTit {
    font-size: 30px;
    color: #616664;
    letter-spacing: 0.05em;
}

.worksBlockWr>section .webgene-pagination:nth-last-child(1) {
    grid-area: auto/auto/auto/span 2;
} 


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width:544px) {
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

/*-----------------------------------------------------------

-----------------------------------------------------------*/

.productsMain section {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 30px;
}

.productsMain>section .webgene-pagination:nth-last-child(1) {
    grid-area: auto/auto/auto/span 2;
}
    
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
}/* min-width: 544px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width:768px) {
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

/*-----------------------------------------------------------

-----------------------------------------------------------*/
	
.productsMain section {
    grid-template-columns: repeat(3, 1fr);
    gap: 100px 30px;
}

.productsMain>section .webgene-pagination:nth-last-child(1) {
    grid-area: auto/auto/auto/span 3;
}
    
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
}/* min-width: 768px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width:1024px) {
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

/*-----------------------------------------------------------

-----------------------------------------------------------*/

    
/*-----------------------------------------------------------
カテゴリー
-----------------------------------------------------------*/

.search-contents-wrapper {
    padding-left: 15px;
    display: block;
}

.search-contents-wrapper label {
    display: flex;
    width: 100%;
    margin-bottom: 10px;
    align-items: center;
    font-size: 16px;
    letter-spacing: 0.05em;
}

input.search-submit {
    font-size: 18px;
    margin-top: 20px;
}

.productsLeftCate {
    padding-bottom: 0;
    border-bottom: unset;
}

.cate {
    padding: 2px 15px;
    font-size: 16px;
}

/*-----------------------------------------------------------
ページャー
-----------------------------------------------------------*/

.worksBlockWr>section .webgene-pagination:nth-last-child(1) {
    grid-area: auto/auto/auto/span 3;
} 



/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
}/* min-width: 1024px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width:1200px) {
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

.productTitle {
    font-size: 25px;
}

.productMoney {
    font-size: 20px;
    margin-top: 15px;
}

.productEditor {
    font-size: 18px;
    margin-top: 15px;
}

.productBtn {
    height: 65px;
    font-size: 20px;
    border-radius: 33px;
}

.productBtn01 {
    margin-top: 20px;
}

.productBtn02 {
    margin-top: 20px;
}

.search-contents-wrapper label {
    margin-bottom: 20px;
    font-size: 20px;
}

.search-contents-wrapper {
    padding-left: 20px;
}

.search-title {
    font-size: 20px;
    margin-bottom: 20px;
}

.productsLeftCate {
    margin-top: 30px;
}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
}/* min-width: 1200px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */