@charset "UTF-8";

/* productpageTop__categoryList → ec-common-nav__categoryList
 * productpageTop__productpageNav__hoge →　ec-common-nav__hoge
  ----------------------------------------------------------*/
 .ec-common-nav__categoryList {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 20px;
	row-gap: 40px;
}
.ec-common-nav__categoryItem:not(header .ec-common-nav__categoryItem) {
	background-color: #f9f7f3;
}
.ec-common-nav__button {
	display: none;
}

.ec-common-nav__linkItem {
	font-size: 1.111em;
	font-weight: bold;
	line-height: 1;

	margin-bottom: 25px; /* unique */
	padding-bottom: 15px; /* unique */
	border-bottom: 1px solid #e6e6e6;
}
.ec-common-nav__link {
	width: 100%;
	position: relative;
	display: flex;
	align-items: center;
	height: 65px;
	margin-top: 0;
	padding-left: 100px; /* unique */
	&::before {
		content: "";
		position: absolute;
		right: -12px;
		display: inline-block;
		width: 7px;
		height: 7px;
		margin-right: 15px;
		border-top: solid 2px #c95981;
		border-right: solid 2px #c95981;
		transform: rotate(45deg);
		will-change: transform;
	}
	&::after {
		content: "";
		position: absolute;
		left: 0;
		/* unique */
		top: 0;
		width: 100px;
		/* unique */
		height: 100%;
		background-repeat: no-repeat;
		background-position: center center;
	}
}
.ec-common-nav__categoryItem[data-cat-name="仏具"] {
	.ec-common-nav__button::before, .ec-common-nav__link::after {
		background-image: url(https://gigaplus.makeshop.jp/kuratomoec/images/image-nav-butsugu.png);
		background-size: 50px;
	}
}
.ec-common-nav__categoryItem[data-cat-name="手元供養"] {
	.ec-common-nav__button::before,
	.ec-common-nav__link::after {
		background-image: url(https://gigaplus.makeshop.jp/kuratomoec/images/image-nav-kuyou.png);
		background-size: 40px;
	}
}
.ec-common-nav__categoryItem[data-cat-name="その他"] {
	.ec-common-nav__button::before,
	.ec-common-nav__link::after {
		background-image: url(https://gigaplus.makeshop.jp/kuratomoec/images/image-nav-other.png);
		background-size: 50px;
	}
}
.ec-common-nav__categoryItem[data-cat-name="香典返し"] {
	.ec-common-nav__button::before,
	.ec-common-nav__link::after {
		background-image: url(https://gigaplus.makeshop.jp/kuratomoec/images/image-nav-return_gift.png);
		background-size: 45px;
	}
}
.ec-common-nav__categoryItem[data-cat-name="ペット供養"] {
	.ec-common-nav__button::before,
	.ec-common-nav__link::after {
		background-image: url(https://gigaplus.makeshop.jp/kuratomoec/images/image-nav-pet.png);
		background-size: 40px;
	}
}
.ec-common-nav__linkChildList {
	display: grid;
	gap: 20px;
}
.ec-common-nav__linkChild {
	display: flex;
	align-items: center;
	&::before {
		content: "";
		position: relative;
		left: -3px;
		display: inline-block;
		width: 5px;
		height: 5px;
		transform: rotate(45deg) translateY(-50%);
		margin-right: 7px; /* unique */
		border-top: solid 2px #b4b4b4;
		border-right: solid 2px #b4b4b4;
		transform: rotate(45deg);
		will-change: transform;
	}
}
.ec-common-nav__linkChildItem {
	line-height: 1;
}
[data-cat-name="ペット供養"] {
	.ec-common-nav__linkChildList {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 68.7rem) {
	.ec-common-nav__categoryItem:not(header .ec-common-nav__categoryItem) {
		padding: 20px calc(53 / 1920 * 100vw) 40px; /* unique */
		border-radius: 6px;
	}
	.ec-common-nav__categoryItem a:hover {
		color: #c95981;
		&::before {
			left: auto;
			right: -14px;
		}
	}
	.ec-common-nav__categoryItem .ec-common-nav__linkChild:hover {
		&::before {
			left: -1px;
			border-color: #c95981;
		}
	}
}
@media (max-width: 1536px) {
	.ec-common-nav__link {
		padding-left: calc(110 / 1920 * 100vw);
		&::after {
			width: calc(110 / 1920 * 100vw);
			/* unique */
		}
	}
	.ec-common-nav__categoryItem[data-cat-name="仏具"] {
		.ec-common-nav__link::after {
			left: -0.5vw;
		}
	}
}
@media (max-width: 68.7rem) {
	.ec-common-nav__button {
		display: block;
	}
	.ec-common-nav__categoryList {
		grid-template-columns: repeat(2, 1fr);
		/* width: calc(100% + 40px);
      margin-left: -20px; */
		gap: 0;
		width: 100vw;
		margin-inline: calc(50% - 50vw);

	}
	.ec-common-nav__categoryItem {
		margin-top: -1px;
		padding: 0;
		background-color: #ffffff;
		border-radius: 0;
		border-top: 1px solid #d1d1d1;
	}
	.ec-common-nav__button {
		position: relative;
		display: flex;
		align-items: center;
		width: 100%;
		height: 60px;
		margin: 0;
		border-bottom: 2px solid #ffffff;
		color: #474645;
		font-size: 1.111em;
		font-weight: bold;

		z-index: 1;
		padding: 0;
		background-color: #f9f7f3;
		border-color: #d1d1d1;
		border-width: 1px;
		&::before {
			content: "";
			display: inline-block;
			width: 50px;
			height: 100%;
			background-repeat: no-repeat;
			background-position: center center;
		}
		&::after {
			content: "";
			position: absolute;
			right: 0;
			width: 7px;
			height: 7px;
			margin-right: 15px;
			margin-left: -5px;
			border-top: solid 2px #c95981;
			border-right: solid 2px #c95981;
			transform: rotate(135deg);
			transition: .2s ease-in-out;
		}
	}

	.ec-common-nav__categoryItem:nth-child(odd) {
		.ec-common-nav__button {
			border-right: 1px solid #d1d1d1;
		}
	}
	.ec-common-nav__categoryItem:last-of-type {
		.ec-common-nav__button {
			border-bottom: 1px solid #d1d1d1;
		}
	}

	.accordion-content-inner {
		overflow: hidden;
		background-color: #ffffff;
		margin-top: -1px;
		border-top: 1px solid #d1d1d1;
	}
	.ec-common-nav__categoryItem:nth-child(2n+1) {
		.accordion-content-inner {
			width: 200%;
		}
	}
	.ec-common-nav__categoryItem:nth-child(2n) {
		.accordion-content-inner {
			width: 200%;
			margin-left: -100%;
		}
	}

	.ec-common-nav__linkChildList {
		grid-template-columns: repeat(2, 1fr);
		gap: 0;
		padding-left: 0;
	}
	.ec-common-nav__linkItem {
		margin: 0;
		padding: 0;
	}
	.ec-common-nav__link, .ec-common-nav__linkChild {
		position: relative;
		height: 50px;
		padding: 0 18px;
		font-size: 0.9375em;
		&::before {
			position: absolute;
			right: 3px;
			top: calc(50% - 3px);
			left: auto;
			width: 7px;
			height: 7px;
			margin-right: 15px;
			border-color: #c95981;
			transform: rotate(45deg);
		}
	}
	.ec-common-nav__link {
		&::after {
			display: none;
		}
	}
	.ec-common-nav__linkChildItem {
		border-bottom: 1px solid #d1d1d1;
	}
	.ec-common-nav__linkChildItem:nth-child(odd) {
		border-right: 1px solid #d1d1d1;
	}

	.ec-common-nav__categoryItem[data-cat-name="仏具"] {
		.ec-common-nav__button::before {
			background-size: 30px;
		}
	}
	.ec-common-nav__categoryItem[data-cat-name="手元供養"] {
		.ec-common-nav__button::before {
			background-size: 24px;
		}
	}
	.ec-common-nav__categoryItem[data-cat-name="その他"] {
		.ec-common-nav__button::before {
			background-size: 30px;
		}
	}
	.ec-common-nav__categoryItem[data-cat-name="香典返し"] {
		.ec-common-nav__button::before {
			background-size: 30px;
		}
	}
	.ec-common-nav__categoryItem[data-cat-name="ペット供養"] {
		.ec-common-nav__button::before {
			background-size: 18px;
		}
	}
}
/*  */
@media (max-width: 68.7rem) {
	.js-accordion-content {
		opacity: 0;
		display: grid;
		grid-template-rows: 0fr;
		transform: translateY(-45px);
		/* -45px*/
		transition: .3s ease-in-out;
	}
	.ec-common-nav__button.is-active {
		&::after {
			transform: rotate(-45deg);
			/* top: 28px; */
		}
	}
	.js-accordion-content.is-visible {
		opacity: 1;
		transform: translateY(0);
		grid-template-rows: 1fr;
	}
}