@charset "utf-8";
/*-----------------------------------------------
 * Goods
-------------------------------------------------*/ 
/**
* title en
**/
.cont-titWrap {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: min(calc(80 / var(--vw-min) * 100vw),80px);
}
@media screen and (max-width:768px){
		.cont-titWrap {
				margin-bottom: calc(40 / var(--vw-min) * 100vw);
		}
}
.cont-tit-en {
		width: min(calc(400 / var(--vw-min) * 100vw),400px);
		height: min(calc(144 / var(--vw-min) * 100vw),144px);
		display: block;
		-webkit-mask: url(../img/common/tit/tit_goods-en.svg)no-repeat center/contain;
		mask: url(../img/common/tit/tit_goods-en.svg)no-repeat center/contain;
		background-color: var(--color-green9C);
}
@media screen and (max-width:768px){
		.cont-tit-en {
				width: calc(222 / var(--vw-min) * 100vw);
				height: calc(80 / var(--vw-min) * 100vw);
		}
}
.cont-tit-ja {
		width: min(calc(82 / var(--vw-min) * 100vw),82px);
		height: min(calc(20 / var(--vw-min) * 100vw),20px);
		position: absolute;
		right: 0;
		left: 0;
		bottom: min(calc(17 / var(--vw-min) * 100vw),17px);
		margin: auto;
		-webkit-mask: url(../img/common/tit/tit_goods-ja.svg)no-repeat center/contain;
		mask: url(../img/common/tit/tit_goods-ja.svg)no-repeat center/contain;
		background-color: var(--color-brown55);
}
@media screen and (max-width:768px){
		.cont-tit-ja {
				width: calc(74 / var(--vw-min) * 100vw); 
				height: calc(18 / var(--vw-min) * 100vw);
				bottom: calc(11 / var(--vw-min) * 100vw);
		}
}
.goodsWrap {
		width: min(calc(1000 / var(--vw-min) * 100vw),1000px);
		position: relative;
		margin: 0 auto;
}
@media screen and (max-width:768px){
		.goodsWrap {
			width: 100%;
			padding: 0 calc(16 / var(--vw-min) * 100vw);
		}
}
/**
* TAB
**/
.goods__tabLists {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin-bottom: min(calc(64 / var(--vw-min) * 100vw),64px);
}
@media screen and (max-width:768px){
		.goods__tabLists {
				margin-bottom: calc(32 / var(--vw-min) * 100vw);
		}
}
.goods__tabItem {
		display: inline-block;
		padding: min(calc(4 / var(--vw-min) * 100vw),4px);
}
@media screen and (max-width:768px){
		.goods__tabItem {
				padding: calc(2 / var(--vw-min) * 100vw);
		}
}
.goods__tabItemLink {
		font-size: min(calc(16 / var(--vw-min) * 100vw),16px);
		font-family: var(--main-font-family);
		color: var(--color-mainF8);
		line-height: 1;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: min(calc(100 / var(--vw-min) * 100vw),100px);
		border: min(calc(1 / var(--vw-min) * 100vw),1px) solid var(--color-brown55);
		background-color: var(--color-brown55);
		text-decoration: none;
		overflow: hidden;
		padding: min(calc(13 / var(--vw-min) * 100vw),13px) min(calc(23 / var(--vw-min) * 100vw),23px);
		transition: .6s ease-out;
		text-align: center;
}
.goods__tabItemLink span {
		position: relative;
		z-index: 1;
}
.goods__tabItemLink::after {
		content: "";
		width: 100%;
		height: 100%;
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
		border-radius: min(calc(100 / var(--vw-min) * 100vw), 100px);
		background-color: #fff;
		transform: scale(0);
		-webkit-filter: blur(5px);
		filter: blur(5px);
		transition: .6s ease-out;
}
.goods__tabItem.is-active .goods__tabItemLink{
		color: var(--color-brown55);
		background-color: #fff;
}
@media screen and (max-width:768px){
		.goods__tabItemLink {
				font-size: calc(14 / var(--vw-min) * 100vw);
				border-radius: calc(100 / var(--vw-min) * 100vw);
				border-width: calc(1 / var(--vw-min) * 100vw);
				padding: calc(10 / var(--vw-min) * 100vw) calc(15 / var(--vw-min) * 100vw);
		}
		.goods__tabItemLink::after {
				border-radius: calc(100 / var(--vw-min) * 100vw);
		}
}
@media (hover: hover) and (pointer: fine){
		.goods__tabItemLink:hover {
				color: var(--color-brown55);
		}
		.goods__tabItemLink:hover::after {
		transform: scale(150%);
	}
}
/* list good */
.goods__lists{
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: min(calc(20 / var(--vw-min) * 100vw),20px);
	row-gap:    min(calc(72 / var(--vw-min) * 100vw),72px);
	margin: 0 auto;
}
@media (max-width:768px){
	.goods__lists{
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: calc(9 / var(--vw-min) * 100vw);
		row-gap:    calc(20 / var(--vw-min) * 100vw);
	}
}

/* DO NOT fix element width – let grid manage */
.goods__item{ 
		width:100%;
		height: auto;
		border-radius: min(calc(8 / var(--vw-min) * 100vw),8px);
		-webkit-filter:drop-shadow(0 4px 20px rgba(0,0,0,.08)); 
		filter:drop-shadow(0 4px 20px rgba(0,0,0,.08)); 
}
@media (max-width:768px){
	.goods__item{
		height: calc(245 / var(--vw-min) * 100vw);
	}
}
.goods__link{
	color: var(--color-brown55);
	height: 100%;
	display: flex;
	flex-direction: column;
	position: relative;
	text-decoration: none;
	padding: min(calc(27 / var(--vw-min) * 100vw),27px) min(calc(22 / var(--vw-min) * 100vw),22px) min(calc(48 / var(--vw-min) * 100vw),48px) min(calc(28 / var(--vw-min) * 100vw),28px);
	background-color: #FCFBF9;
	border-radius: min(calc(8 / var(--vw-min) * 100vw),8px);
	box-sizing: border-box;
	cursor: pointer;
	pointer-events: auto;
}
@media (max-width:768px){
	.goods__link{
		padding: calc(10 / var(--vw-min) * 100vw) calc(10 / var(--vw-min) * 100vw) calc(15 / var(--vw-min) * 100vw) calc(13 / var(--vw-min) * 100vw);
		border-radius: calc(8 / var(--vw-min) * 100vw);
	}
}

.goods__link::before{
	content:"";
	width: min(calc(6 / var(--vw-min) * 100vw),6px);
	height: 100%;
	position: absolute;
	top:0; left:0;
}
@media (max-width:768px){
	.goods__link::before{ width: calc(6 / var(--vw-min) * 100vw); }
}
.goods__item:nth-child(4n+1) .goods__link::before{ 
	background: var(--color-greenC0); 
}
.goods__item:nth-child(4n+2) .goods__link::before{ 
	background: var(--color-pinkF2); 
}
.goods__item:nth-child(4n+3) .goods__link::before{ 
	background: var(--color-blueC2); 
}
.goods__item:nth-child(4n)   .goods__link::before{ 
	background: var(--color-yellowFF); 
}

.goods__thumbImg{
	width: 100%;
	aspect-ratio: 1 / 1;
	position: relative;
	overflow: hidden;
	border-radius: min(calc(8 / var(--vw-min) * 100vw),8px);
	background: #f7f7f7;
	padding-top: 100%;
}

.goods__thumbImg img{
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	pointer-events: none;
	transition: transform .4s ease-out;
}

/*Fallback for browsers that do not support aspect-ratio*/
.goods__thumbImg {
	position: relative;
}
.goods__thumbImg > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
@media (hover:hover) and (pointer:fine){
	.goods__link:hover .goods__thumbImg img{ 
		transform: scale(1.03); 
	}
}

/* ==== TITLE ==== */
.goods__tit{
	font-size: min(calc(16 / var(--vw-min) * 100vw),16px);
	font-family: var(--main-font-family);
	color: var(--color-brown55);
	font-weight: 700;
	line-height: 2.125;
	min-height: min(calc(64 / var(--vw-min) * 100vw),64px);
	position: relative;
	margin-top: min(calc(18 / var(--vw-min) * 100vw),18px);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.goods__tit::before{
	content:"";
	width:100%;
	height: min(calc(37 / var(--vw-min) * 100vw),37px);
	position:absolute;
	top: min(calc(28 / var(--vw-min) * 100vw),28px);
	background:url(../img/common/deco/deco_news-dashed.svg) no-repeat top left/contain;
}
@media (max-width:768px){
	.goods__tit{
		font-size: calc(12 / var(--vw-min) * 100vw);
		margin-top: 0;
		padding-top: calc(10 / var(--vw-min) * 100vw);
		line-height: 1.5;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}
	.goods__tit::before{ 
		height: calc(33 / var(--vw-min) * 100vw); 
		background: none;
	}
}

.goods__tit span{
		display: inline;
		background-repeat: no-repeat;
		background-position: right bottom;
		background-size: 0% 100%;
		transition: background-size .6s ease;
		background-image: linear-gradient(transparent 50%, rgba(192,222,170,.7) 50%);
}
@media (hover: hover) and (pointer: fine){
		.goods__link:hover .goods__tit span{
			background-position: left bottom;
			background-size: 100% 100%;
		}
}

.goods__link{ 
	position: relative; 
}

/* PC + Mobile: draw the + sign using the same proportional formula*/
.goods__deco{
	position:absolute;
	right:0; bottom:0;
	z-index:2;
	--deco: min(calc(36 / var(--vw-min) * 100vw), 36px);
	width:  var(--deco);
	height: var(--deco);
	background: var(--color-yellowFF, #F6C64E);
	clip-path: polygon(100% 0, 0 100%, 100% 100%);
}

.goods__item:nth-child(4n+1) .goods__deco{ background: var(--color-greenC0); }
.goods__item:nth-child(4n+2) .goods__deco{ background: var(--color-pinkF2);  }
.goods__item:nth-child(4n+3) .goods__deco{ background: var(--color-blueC2);  }
.goods__item:nth-child(4n)   .goods__deco{ background: var(--color-yellowFF); }

.goods__deco::before,
.goods__deco::after{
	content:"";
	position:absolute;
	left:72%; 
	top:72%;
	transform: translate(-50%,-50%) translateZ(0);
	background:#fff;
	border-radius: max(1px, calc(var(--deco) * 0.02778));
}

.goods__deco::after{
	width:  calc(var(--deco) * 0.33333);  /* 12/36 */
	height: calc(var(--deco) * 0.05556);  /*  2/36 */
}

.goods__deco::before{
	width:  calc(var(--deco) * 0.05556);
	height: calc(var(--deco) * 0.33333);
}

.goods__deco::before {
	transition: 0.3s ease;
}
.goods__deco::after {
	transition: 0.3s ease;
}

@media (max-width:768px){
	.goods__deco{
		--deco: 36px;
		--arm : 12px;
		--stroke: 3px;

		width:  var(--deco);
		height: var(--deco);
		right: 0; bottom: 0;
		clip-path: polygon(100% 0, 0 100%, 100% 100%);
	}

	.goods__deco::before,
	.goods__deco::after{
		content:"";
		position:absolute;
		left:72%;
		top:72%;
		transform: translate(-50%,-50%) translateZ(0);
		background:#fff;
		border-radius: calc(var(--stroke) / 2);
	}

	.goods__deco::after{
		width:  var(--arm);
		height: var(--stroke);
	}
	.goods__deco::before{
		width:  var(--stroke);
		height: var(--arm);
	}
}

@media (hover:hover) and (pointer:fine){
	.goods__link:hover .goods__deco::before{
		opacity: 0;
		transform: translate(-50%, -10%);
	}
}

.goods__link:focus-visible .goods__deco::before{
	opacity: 0;
	transform: scaleY(0);
}

.goods__link:active .goods__deco::before{
	opacity: 0;
	transform: scaleY(0);
}


/* Modal-Detail */
.goodsDetail { 
	color: var(--color-brown55); 
}
.goodsDetail__title{
	border-bottom:2px dashed var(--color-brown55);
	font-size: min(calc(22/var(--vw-min)*100vw),22px);
	font-family: var(--main-font-family);
	color: var(--color-brown55);
	font-weight: 800;
	margin: min(calc(8/var(--vw-min)*100vw),8px) 0 min(calc(50/var(--vw-min)*100vw),50px);
	padding-bottom: min(calc(8/var(--vw-min)*100vw),8px);
}

.goodsDetail__thumb{
	overflow: hidden;
}
.goodsDetail__thumb--img{
	/* width: min(calc(361 / var(--vw-min)*100vw),361px);
	height: min(calc(361 / var(--vw-min)*100vw),361px); */
	width: 100%;
	padding-top: 100%;
	background-color: #fff;
	position: relative;
}
.goodsDetail__thumb img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	display:block;
}
.goodsDetail__body{ 
	margin: 0 0 1em;
	font-size: min(calc(15/var(--vw-min)*100vw),15px);
	font-family: var(--main-font-family);
	color: var(--color-brown55);
}
.goodsDetail__list {
	margin: 0 0 1em;
	font-size: min(calc(15/var(--vw-min)*100vw),15px);
	font-family: var(--main-font-family);
	color: var(--color-brown55);
}
@media (max-width:768px){
	.goodsDetail__body{
		font-size: calc(14/var(--vw-min)*100vw);
	}
	.goodsDetail__list {
		font-size: calc(14/var(--vw-min)*100vw);
	}
}
.goodsDetail__loading, .goodsDetail__error{ 
	padding: 24px; 
	text-align:center; 
}
.goodsDetail__loading,.goodsDetail__error{ 
	padding:24px; 
	text-align:center; 
}
.goodsDetail__grid{ 
	display:grid; 
	grid-template-columns:1fr 1fr; 
	gap:min(calc(70/var(--vw-min)*100vw),70px);
	align-items: start;
}

@media (max-width:768px){
	.goodsDetail__grid{
		display: grid;
		grid-template-columns: 1fr;
		gap: calc(16 / var(--vw-min) * 100vw);
		align-items: start;
		padding: calc(16 / var(--vw-min) * 100vw) 0 0 0;
	}

	.goodsDetail__thumb{
		margin: 0 0 calc(20 / var(--vw-min) * 100vw);
	}
	.goodsDetail__thumb img{
		width: 100%;
		max-width: none;
		display: block;
	}

	.goodsDetail__thumb .swiper{
		width: 100%;
	}

	.goodsDetail__body{
		padding: calc(4 / var(--vw-min) * 100vw)
						 calc(8 / var(--vw-min) * 100vw) 0
						 calc(8 / var(--vw-min) * 100vw);
	}

	.goodsDetail__title{
		font-size: calc(18 / var(--vw-min) * 100vw);
		line-height: 1.6;
		margin: calc(16 / var(--vw-min) * 100vw) 0 calc(16 / var(--vw-min) * 100vw);
		padding-bottom: calc(8 / var(--vw-min) * 100vw);
		border-bottom: calc(1 / var(--vw-min) * 100vw) dashed var(--color-brown55);
		word-break: break-word;
		overflow-wrap: anywhere;
	}
}


#goodsModal .oneModalIn{
	width: min(calc(1000 / var(--vw-min) * 100vw),1000px);
	max-height: unset;
}
.goodsModalBody,
.js-goodsModalBody{
	width: 100%;
}

.goodsModalPaper{
	padding: min(calc(28 / var(--vw-min) * 100vw), 28px);
}

@media (max-width:768px){
	#goodsModal .oneModalIn{
		width: 100%;
	}

	.goodsModalPaper{
		padding: calc(20 / var(--vw-min) * 100vw);
		padding-top: calc(100 / var(--vw-min) * 100vw);
	}

	.goodsDetail__title{
		margin-top: 0;
		margin-bottom: calc(16 / var(--vw-min) * 100vw);
		padding-bottom: calc(8 / var(--vw-min) * 100vw);
		border-bottom: calc(1 / var(--vw-min) * 100vw) dashed var(--color-brown55);
		line-height: 1.6;
	}
}

.wp-pagenavi .pages {
	display: none;
}

.cont-tit-en{
	opacity: 70%;
}

#goodsModal .goodsModalPaper{
	position: relative;
}

#goodsModal .goodsModalPaper::before{
	content:"";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

#goodsModal .goodsModalPaper > *{
	position: relative;
	z-index: 1;
}

body.is-modal-open {
	overflow: hidden;
	overscroll-behavior: none;
	touch-action: none;
}

.modal__deco1,
.modal__deco2{
 opacity:80%;
}

.goodsSwiper--hero {
	width: 100%;
	/* height: min(70vh, 80vw); */
	overflow: hidden;
}

.goodsSwiper--hero .swiper-slide {
	display: flex;
	align-items: center;
	justify-content: center;
}

.goodsSwiper--hero .swiper-slide img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	display: block;
}

.goodsSwiper--hero .swiper-pagination {
	bottom: min(calc(14 / var(--vw-min) * 100vw),14px) !important;
}
.goodsSwiper--hero .swiper-pagination-bullet {
	width: min(calc(8 / var(--vw-min) * 100vw),8px); 
	height: min(calc(8 / var(--vw-min) * 100vw),8px);
	opacity: 70%;
}
.goodsSwiper--hero .swiper-pagination-bullet-active {
	opacity: 1;
}

#goodsModal .oneModalIn{
	overflow-y: auto;
}

.goodsDetail__thumb .swiper{ 
	width:100%; 
}
.goodsDetail__thumb .swiper-wrapper{ 
	align-items:center; 
}
.goodsDetail__thumb .swiper-slide{
	display:flex; 
	align-items:center; 
	justify-content:center;
}
.goodsDetail__thumb .swiper-slide img{
	max-width:100%; 
	object-fit:contain; 
	display:block;
}

/* detail single good */
@media (max-width: 768px){
	#goodsModal .goodsSwiper--hero,
	#goodsModal .goodsDetail__thumb .swiper{
		width: 100%;
		height: auto;
		border-radius: 8px;
		overflow: hidden;
		background: #f7f7f7;
		position: relative;
	}

	#goodsModal .goodsSwiper--hero .swiper-slide{
		display: flex; align-items: center; justify-content: center;
		background: #f7f7f7;
	}
	#goodsModal .goodsSwiper--hero .swiper-slide img{
		width: 100%; 
		object-fit: contain; 
		display: block;
	}

	/* Pagination display at footer */
	#goodsModal .goodsSwiper--hero .swiper-pagination{
		position: absolute !important;
		left: 0; right: 0;
		bottom: calc(12 / var(--vw-min) * 100vw) !important;
		display: flex !important; justify-content: center;
		z-index: 5;
	}

	/*clear bullets on light background */
	#goodsModal .goodsSwiper--hero{
		--swiper-theme-color: rgba(0,0,0,.8);          /* active */
		--swiper-pagination-bullet-inactive-color: rgba(0,0,0,.35);
		--swiper-pagination-bullet-inactive-opacity: 1;
	}
}

/* Single page: SP */
@media (max-width:768px){
	body[data-page="goods-single"] .goodsSwiper--hero{
		width: 100%;
		height: clamp(260px, 72vw, 420px);
		border-radius: 8px;
		overflow: hidden;
		background: #f7f7f7;
		position: relative;
		--swiper-theme-color: rgba(0,0,0,.8);
		--swiper-pagination-bullet-inactive-color: rgba(0,0,0,.35);
		--swiper-pagination-bullet-inactive-opacity: 1;
	}
	body[data-page="goods-single"] .goodsSwiper--hero .swiper-slide{
		display:flex; align-items:center; 
		justify-content:center;
		background:#f7f7f7;
	}
	body[data-page="goods-single"] .goodsSwiper--hero .swiper-slide img{
		width:100%; 
		object-fit:contain; 
		display:block;
	}
	body[data-page="goods-single"] .goodsSwiper--hero .swiper-pagination{
		position: absolute !important;
		left:0; right:0;
		bottom: calc(12 / var(--vw-min) * 100vw) !important;
		display:flex !important; justify-content:center;
		z-index:5;
	}
	body[data-page="goods-single"] .goodsSwiper--hero .swiper-pagination-bullet{
		width: calc(8 / var(--vw-min) * 100vw);
		height: calc(8 / var(--vw-min) * 100vw);
	}
}

@media (min-width:769px){
	.goodsSwiper[data-slides="1"] .swiper-pagination{
		display:none !important;
	}
}

.goodsDetail__body { 
	min-width: 0;
}

.goodsDetail__link a{
	display: inline-block;
	max-width: 100%;
	overflow-wrap: anywhere;
	word-break: break-all;
}

.gdl__row{
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0 0 10px;
}
.gdl__row.-desc{
	padding: 1em 0;
}

.gdl__label{
	flex-shrink: 0;
	white-space: nowrap;
	font-weight: 700;
	color: var(--color-brown55);
	min-width: 4.25em;
}

.gdl__value{
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
	word-break: break-word;
	color: var(--color-brown55);
}
.gdl__value a{
	color: var(--color-redEF);
}
.gdl__value a[target="_blank"]{
	display: inline;
	align-items: center;
}
.gdl__value a[target="_blank"]:after{
	content: "";
	width: min(calc(12 / var(--vw-min) * 100vw), 12px);
	height: min(calc(12 / var(--vw-min) * 100vw), 12px);
	display: inline-block;
	margin-left: min(calc(8 / var(--vw-min) * 100vw), 8px);
	-webkit-mask: url(../img/common/deco/icon_link.svg) no-repeat center / contain;
	mask: url(../img/common/deco/icon_link.svg) no-repeat center / contain;
	background-color: var(--color-redEF);
}
@media screen and (max-width:768px){
	.gdl__value a[target="_blank"]:after{
		width: calc(10 / var(--vw-min) * 100vw);
		height: calc(10 / var(--vw-min) * 100vw);
		margin-left: calc(4 / var(--vw-min) * 100vw);
	}
}



/**
* BackToLists
**/
.backToWrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: min(calc(80 / var(--vw-min) * 100vw),80px);
}
@media screen and (max-width:768px){
    .backToWrap {
        margin-top: calc(56 / var(--vw-min) * 100vw);
    }
}
.backToBtnLink {
    font-size: min(calc(23 / var(--vw-min) * 100vw),23px);
    font-weight: 600;
    position: relative;
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: .3s ease-out;
}
@media screen and (max-width:768px){
    .backToBtnLink {
        font-size: calc(17 / var(--vw-min) * 100vw);
    }
}
.backToBtnLink::before {
    content: "";
    width: min(calc(18 / var(--vw-min) * 100vw),18px);
    height: min(calc(14 / var(--vw-min) * 100vw),14px);
    display: block;
    margin-right: min(calc(16 / var(--vw-min) * 100vw),16px);
    -webkit-mask: url(../img/common/deco/icon_back.svg)no-repeat center/contain;
    mask: url(../img/common/deco/icon_back.svg)no-repeat center/contain;
    background-color: var(--color-brown55);
    transition: .3s ease-out;
}
@media screen and (max-width:768px){
    .backToBtnLink::before {
        width: calc(13 / var(--vw-min) * 100vw);
        height: calc(10 / var(--vw-min) * 100vw);
        margin-right: calc(12 / var(--vw-min) * 100vw);
    }
}
@media (hover: hover) and (pointer: fine){
    .backToBtnLink:hover {
        color: var(--color-greenC0);
    }
    .backToBtnLink:hover::before {
        background-color: var(--color-greenC0);
    }
}