@charset "utf-8";

.tab_list {
    border-bottom: 1px solid #DDD;
}
.tab_list li {
	display: inline-block;
	list-style: none;
	padding-bottom: 2.941vw;
	position: relative;
}
.tab_list li a {
	letter-spacing: 0.08em;
	font-weight: bold;
	line-height: 1;
	color: #222222;
	padding-bottom: 2.941vw;
}
.tab_list li + li {
	margin-left: 3.603vw;
}

/* アクティブな時だけ下線を表示 */
.tab_list li.active::after {
  content: "";
  position: absolute;
  bottom: -0.147vw;
  left: 50%;
  transform: translateX(-50%);
  
  width: 100%;
  height: 0.221vw;
  background-color: #000000;
}
@media screen and (min-width: 1360px) {
	.tab_list li {
		padding-bottom: 40px;
	}
	.tab_list li a {
		padding-bottom: 40px;
	}
	.tab_list li + li {
		margin-left: 49px;
	}

	/* アクティブな時だけ下線を表示 */
	.tab_list li.active::after {
	  bottom: -2px;
	  height: 3px;
	}
}

@media screen and (max-width: 750px) {

	.tab-wrap {
        position: relative;
    }
    
    /* 現在の選択ラベル */
    .tab-current-label {
        display: block;
        padding: 23.5px 0;
        border-top: 1px solid #EBEBEB;
        border-bottom: 1px solid #EBEBEB;
        background: #fff;
        cursor: pointer;
        position: relative;
    }

    .tab-current-label::after {
        content: "";
        width: 6.5px;
        height: 12.99px;
        top: 31.5px;
        right: 20px;
        background: url(../common/img/icon_arrow_simple-black.svg) no-repeat;
	    background-size: cover;
        display: block;
        transform: rotate(90deg);
        position: absolute;
    }

    /* リスト本体（初期状態は非表示） */
    .tab_list {
        display: none; 
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        z-index: 10;
        /*border: 1px solid #333;*/
        border-top: none;
        background: #fff;
    }

    /* JSでクラスを付け替えて表示 */
    .tab_list.is-open {
        display: block;
    }

    .tab_list li {
        display: block;
    }
   	.tab_list li a {
		font-size: 4.267vw;
	}
	.tab_list li + li {
		margin-left: 0;
	}
	.tab_list li.active::after {
		content: none;
	}
}

/* PCではラベルを隠す */
@media screen and (min-width: 769px) {
    .tab-current-label { display: none; }
}


/*   products_list   */
.products_list {
	margin-top: 5.257vw;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: 1fr;
	grid-column-gap: 2.206vw;
	grid-row-gap: 5.147vw;
}
.product_item {
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.product_item.is-hide {
    display: none; /* または非表示にする処理 */
    opacity: 0;
    transform: scale(0.9);
}
.product_item .tags {
	margin-top: 0.956vw;
}
.product_item .tags li {
	display: inline-block;
	border: 1px solid #000000;
	border-radius: 0.956vw;

	font-size: 0.882vw;
	font-style: var(--font-Montserrat);
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1;

	padding: 0.221vw 1.103vw 0.147vw;
}
.product_item .tags li.new-tag {
	color: #FF0000;
	font-weight: bold;
	border-color: #FF0000;
}
.product_item .name {
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1.25;

	margin-top: 0.515vw;
}

@media screen and (min-width: 1360px) {
	.products_list {
		margin-top: 71.5px;
		grid-column-gap: 30px;
		grid-row-gap: 70px;
	}
	.product_item .tags {
		margin-top: 13px;
	}
	.product_item .tags li {
		border-radius: 13px;

		font-size: 12px;

		padding: 3px 15px 2px;
	}
	.product_item .name {
		margin-top: 7px;
	}
}

@media screen and (max-width: 750px) {
	.products_list {
		margin-top: 8vw;
		grid-template-columns: repeat(2, 1fr);
		grid-column-gap: 4vw;
		grid-row-gap: 7.2vw;
	}
	.product_item .tags {
		margin-top: 0;
	}
	.product_item .tags li {
		border-radius: 3.467vw;

		font-size: 2.667vw;

		padding: 0.8vw 2.933vw 0.533vw;
	}
	.product_item .name {
		font-size: 3.733vw;
		margin-top: 0.8vw;
	}
}