@charset "utf-8";
.subCont-title {
	width: 100%;
	height: min(calc(52 / var(--vw-min) * 100vw), 52px);
	background: url(../img/common/tit/tit_goods.svg)no-repeat center/contain;
}

/*-----------------------------------------------
* goods
-------------------------------------------------*/

.backBtn a {
	font-size: min(calc(20 / var(--vw-min) * 100vw), 20px);
	font-weight: 700;
	color: #000;
	position: relative;
	width: min(calc(270 / var(--vw-min) * 100vw), 270px);
	height: min(calc(50 / var(--vw-min) * 100vw), 50px);
	background-color: #fff;
	border-right:  min(calc(5 / var(--vw-min) * 100vw), 5px) solid #000;
	border-left:  min(calc(5 / var(--vw-min) * 100vw), 5px) solid #000;
	border-bottom:  min(calc(5 / var(--vw-min) * 100vw), 5px) solid #000;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transition: .3s ease;
}
@media screen and (max-width:768px){
	.backBtn {
		display: flex;
		justify-content: center;
	}
	.backBtn a {
		font-size: calc(20 / var(--vw-min) * 100vw);
		width: calc(340 / var(--vw-min) * 100vw);
		height: calc(60 / var(--vw-min) * 100vw);
		border-right:  calc(5 / var(--vw-min) * 100vw) solid #000;
		border-left:  calc(5 / var(--vw-min) * 100vw) solid #000;
		border-bottom:  calc(5 / var(--vw-min) * 100vw) solid #000;
	}
}
.backBtn span {
	position: relative;
	z-index: 1;
}
.backBtn .js-txtSpan span:first-child {
	color: var(--color-red);
}
.linkBtn {
	margin: min(calc(70 / var(--vw-min) * 100vw), 70px) auto 0;
}
@media screen and (max-width:768px){
	.linkBtn {
		font-size: calc(20 / var(--vw-min)* 100vw);
		width: calc(340 / var(--vw-min)* 100vw);
		height: calc(60 / var(--vw-min)* 100vw);
		margin-top: calc(70 / var(--vw-min)* 100vw);
	}
}
.linkBtn .linkA {
	font-weight: 700;
}




.itemBoxWrap{
	width: min(calc(960 / var(--vw-min)* 100vw),960px);
	max-width: 960px;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin-top: 20px;
}
@media screen and (max-width:767px){
	.itemBoxWrap{
		width: 100%;
		padding: 0 calc(30 / var(--vw-min) * 100vw);
		justify-content: space-between;
		margin-top: calc(20 / var(--vw-min)* 100vw);
	}
}


.itemBox{
	width: min(calc(300 / var(--vw-min)* 100vw),300px);
	max-width: 300px;
	margin-right: min(calc(30 / var(--vw-min)* 100vw),30px);
	margin-bottom: 30px;
}
.itemBox:nth-child(3n){
	margin-right: 0;
}

@media screen and (max-width:767px){
	.itemBox{
		width: calc((100% -  calc(24 / var(--vw-min) * 100vw) ) / 2);
		margin-right: 0;
		margin-bottom: 30px;
	}
	.itemBox:nth-child(3n){
		margin-right: 0;
	}
}
.itemBox .item__img{
	overflow: hidden;
	width: min(calc(300 / var(--vw-min)* 100vw),300px);
	height: min(calc(300 / var(--vw-min)* 100vw),300px);
	margin-bottom: 20px;
}
@media screen and (max-width:767px){
	.itemBox .item__img{
		overflow: hidden;
		width: 100%;
		height: calc(335 / var(--vw-min) * 100vw);
		margin-bottom: calc(24 / var(--vw-min) * 100vw);
	}
}
.itemBox .item__img img{
	width: 100%;
	height: 100%;
	transition: all .4s ease;
	object-fit: cover;
}
.item__ttl {
	text-align: center;
}
.item__ttl a{
	text-decoration: none;
	display: inline-block;
}

/* hover */
.itemBox:hover .item__img img{
	transform: scale(1.1);
}


/*-----------------------------------------------
 * Modal
-------------------------------------------------*/
body#goodsItemBody {
	background: transparent;
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	flex-direction: column;
}
body#goodsItemBody:before {
	content: none;
}
 #goodsItemFull {
	padding: 80px 0 0;
	position: relative;
}
.goodsItem {
	display: flex;
	width:min(calc(1029 / var(--vw-min)* 100vw), 1029px);
	flex-direction: column;
	border: 5px solid #000;
	background-color: #FFF;
}
.goodsItem_detailWrap{
	display: flex;
	padding: 42px;
}
@media screen and (max-width:767px){
	#goodsItemFull {
		width: 100%;
		padding:  calc(48 / var(--vw-min) * 100vw) 0 0;
	}
	.goodsItem {
		flex-direction: column;
		padding: 0;
		width: 100%;
	}
	.goodsItem_detailWrap{
		flex-direction: column;
		padding: calc(24 / var(--vw-min) * 100vw) calc(24 / var(--vw-min) * 100vw) calc(120 / var(--vw-min) * 100vw);
	}
}




/* goodsItem__imgWrap */
.goodsItem__imgWrap {
	flex: none;
	width: 33.33333vw;
	max-width: 400px;
}
.goodsItem__imgWrap__mainImg__img {
	aspect-ratio: 1/1;
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.goodsItem__imgWrap__mainImg__img img {
	width: 100%;
}
@media screen and (max-width:767px){
	.goodsItem__imgWrap {
		width: 100%;
		max-width: 400px;
		margin: 0 auto;
	}
}

/* caption */
.goodsItem__imgWrap__mainImg__caption {
	color: #fff;
	font-size: min(1.33333vw, 16px);
}
@media screen and (max-width:767px){
	.goodsItem__imgWrap__mainImg__caption {
		font-size: 3.2vw;
	}
}

/* lists */
.goodsItem__tLists {
	display: flex;
	flex-wrap: wrap;
}
.goodsItem__tLists__item {
	width: calc((100% - 24px) / 3);
	margin-right: 12px;
	margin-top: 12px;
}
.goodsItem__tLists__item:nth-child(3n) {
	margin-right: 0;
}
@media screen and (max-width:767px){
	.goodsItem__tLists {
		gap: unset;
		margin-top: calc(24 / var(--vw-min) * 100vw);
		flex-direction: row;
	}
	.goodsItem__tLists__item {
		width: calc((100% - calc(48 / var(--vw-min) * 100vw)) / 3);
		margin-right: calc(24 / var(--vw-min) * 100vw);
	}
	.goodsItem__tLists__item:nth-child(3n) {
		margin-right: 0;
	}
}

.goodsItem__tLists__item__photo {
	aspect-ratio: 1/1;
	cursor: pointer;
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	opacity: .6;
	transition: opacity .3s ease;
}
.goodsItem__tLists__item__photo:hover,
.goodsItem__tLists__item.is-active .goodsItem__tLists__item__photo {
	opacity: 1;
}

.goodsItem__tLists__item__photo img {
	cursor: pointer;
	width: 100%;
	opacity: .6;
	transition: opacity .3s ease;
}
.goodsItem__tLists__item__photo img:hover,
.goodsItem__tLists__item.is-active img {
	opacity: 1;
}

/* goodsItem__textWrap */
.goodsItem__textWrap {
	padding-left: 40px;
}
.goodsItem__text__title {
	background-color:#000;
	color: var(--color-yellow);
	font-size: 24px;
	padding: 30px 0;
	text-align: center;
}
.goodsItem__text__text {
	font-size: 16px;
}
.goodsItem__text__text>a{
  color: #000;
}
@media screen and (max-width:767px){
	.goodsItem__textWrap {
		margin-top: 8vw;
		padding-left: 0;
	}
	.goodsItem__text__title {
		padding-left: 0;
	}
	.goodsItem__text__title {
		font-size: calc(24 / var(--vw-min) * 100vw);
		padding: 8px 10px;
	}
	.goodsItem__text__text {
		font-size: calc(20 / var(--vw-min) * 100vw);
	}
}

/* goodsItem__text__shop */
.goodsItem__text__shop {
	color: rgb(var(--color-gold));
	font-size: min(1.33333vw, 16px);
	margin-top: 30px;
	margin-bottom: 10px;
}
@media screen and (max-width:767px){
	.goodsItem__text__shop {
		font-size: 3.73333vw;
	}
}

/* img */
.goodsItem__textWrap img {
	max-width: 100%;
}

/**
 * goodsItem__text__shopLists
 */
.goodsItem__text__shopLists {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}
.goodsItem__text__shopLists img {
	max-width: 100%;
}
@media screen and (max-width:767px){
	.goodsItem__text__shopLists__item {
		width: calc((100% - 10px) / 3);
	}
}

.goodsArea{
	border-top: 5px solid #000;
	padding: 80px 0;
	margin-top: 20px;
}
@media screen and (max-width:767px){
	.goodsArea{
		margin-top: calc(20 / var(--vw-min)* 100vw);
		padding: calc(20 / var(--vw-min)* 100vw) 0 calc(40 / var(--vw-min)* 100vw);
	}
}
.groupTtl{
	color: #e82a31;
	font-weight: bold;
	text-align: center;
	margin-bottom: 40px;
	font-size: 38px;
	padding: 0 40px;
}
@media screen and (max-width:767px){
	.groupTtl{
		font-size: calc(38 / var(--vw-min)* 100vw);
		padding: 0 calc(40 / var(--vw-min)* 100vw);
		margin-bottom: 0;
	}
	.item__ttl a{
		font-size:  calc(20 / var(--vw-min)* 100vw);
	}
}
.item__ttl a{
	color: #e82a31;
	text-align: center;
	font-size: 21px;
	line-height: 1.3;
	font-weight: bold;
}
@media screen and (max-width:767px){
	.item__ttl a{
		font-size:  calc(20 / var(--vw-min)* 100vw);
	}
}
.item__ttl .item__link{
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	position: relative;
	padding-right:calc(60 / var(--vw-min) * 100vw);
}


/** ICON **/
.comment__contItem__icon {
	width: calc(28 / var(--vw-min) * 100vw);
	height: calc(34 / var(--vw-min) * 100vw);		
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	background-image: url(../img/common/deco/deco_c-btn1.svg);
	transition: all .3s cubic-bezier(0.25, 1, 0.5, 1);
	transform:rotate(0deg);
}
@media screen and (max-width:768px){
	.comment__contItem__icon {
		width: calc(28 / var(--vw-min) * 100vw);
		height: calc(34 / var(--vw-min) * 100vw);		
	}
}
.comment__contItem__deco {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	position: absolute;
	right: 0;
}
.comment__contItem__arrow {
	width: min(calc(19 / var(--vw-min)* 100vw), 19px);
	height: min(calc(13 / var(--vw-min)* 100vw), 13px);
	margin-left: min(calc(5 / var(--vw-min) * 100vw), 5px);
	-webkit-mask: url(../img/common/deco/deco_arrow.svg) no-repeat center / contain;
	mask: url(../img/common/deco/deco_arrow.svg) no-repeat center / contain;
	background-color: #000;
	transform: rotate(90deg);
	transition: .3s ease;
}
.itemBox:hover .comment__contItem__icon {
	transform: rotate(360deg);
}
.itemBox:hover .comment__contItem__arrow {
	transform: rotate(90deg) translateY(-3px);
}

/* closeBtn */
.backLink{
	position: relative;
	max-width:  min(calc(1029 / var(--vw-min) * 100vw), 1029px);
	width: 100%;
	margin: -5px auto 0;
	padding-bottom: 80px;
}

.backLink a{
	text-decoration: none;
	width: 270px;
	height: 50px;
	font-size: 20px;
	font-weight: 600;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #000;
	position: relative;
	background-color: #FFF;
	border: 5px solid #000;
	transition: all .4s ease;
}
@media screen and (max-width:767px){
	.backLink{
		position: relative;
		width: 100%;
		margin: -5px auto 0;
		padding-bottom: 80px;
	}

	.backLink a{
		text-decoration: none;
		width: calc(340 / var(--vw-min)* 100vw);
		height: calc(60 / var(--vw-min)* 100vw);
		font-size: calc(20 / var(--vw-min)* 100vw);
		border: 5px solid #000;
		margin: 0 auto;
	}
}
.backLink a:hover{
	color: #FFF;
	background-color: #000;
}
.c_red{
	color: var(--color-red);
}

.btmTxt{
	width: min(calc(960 / var(--vw-min) * 100vw), 960px);
	max-width: 960px;
	margin: 0 auto;
}


/**
* goodsDl
**/
.goodsDlist > dl{
	display: flex;
}
.goodsDlist > dl > dt{
	min-width: 12em;
	padding-right: 1em;
}