@charset "UTF-8";

/*---------------------------------------------
	sideContents サイドメニュー
  ---------------------------------------------*/
.sideContents {
	font-size: 14px;
	line-height: 1.3;

	& section + section {
		margin-top: 3em;
	}

	& h2 {
		&.filter {
			display: none;
			& span {
				display: flex;
				align-items: baseline;
				gap: 0.5em;
				padding-bottom: 1.5em;
				&::before {
					content: "";
					background: url(../images/icon/icon_filter.svg) no-repeat center center / contain;
					display: block;
					height: 12px;
					width: 17px;
				}
			}
		}
	}

	& h3 {
		font-size: 1.14em;
		padding: 0.5em;
		background-color: var(--color-background-gray2);
	}

	& a {
		border-bottom: none;
	}

	& .category_top {
		& a {
			display: flex;
			align-items: baseline;
			gap: 0.5em;
			padding-bottom: 1.5em;
			& span {
				flex: 1 0 0%;
			}
			&::before {
				content: "";
				background: url(../images/icon/icon_return.svg) no-repeat center center / contain;
				display: block;
				height: 11px;
				width: 11px;
			}
		}
	}

	& .accordionWrap {
		& > li {
			border-bottom: var(--border);
			& a {
				display: block;
				padding: 12px 0;
			}
			.toggle-btn {
				display: block;
				background: url(../images/icon/icon_arrow_bottom.svg) no-repeat center center / 9px 9px;
				width: 30px;
				height: 2em;
				margin-left: auto;
				transition: var(--transition);
				&.open {
					transform: rotate(180deg);
				}
			}

			& .toggleTitle {
				display: flex;
				justify-content: space-between;
				align-items: center;
				cursor: pointer;
				& a {
					padding-left: 1em;
					flex: 1;
				}
			}

			.child,
			.grandchild {
				max-height: 0;
				overflow: hidden;
				transition: var(--transition);
				padding-left: 1em;
				&.open {
					max-height: 1000px;
					padding-bottom: .5em;
				}
				.grandChildTitle {
					position: relative;
					display: flex;
					align-items: center;
					gap: 0.5em;
					a {
						padding-block: 8px;
					}
					&::before {
						content: "";
						display: block;
						width: 0.5em;
						height: 1px;
						background-color: var(--color-border);
					}
				}
			}
			.grandchild-icon {
				display: block;
				background: url(../images/icon/icon_arrow_right.svg) no-repeat center center / 9px 9px;
				width: 30px;
				height: 2em;
				margin-left: auto;
			}
		}
	}
}

@media screen and (max-width: 960px){
	.sideContents {
		background-color: var(--color-background-pink);
		box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.2);
		width: calc(100% - 20px);		
		inset: 0;
		margin: auto;
		height: calc(100vh - 20px);		
		padding: 20px;
		position: fixed;
		overflow: auto;
		z-index: 100;
		display: none;

		& .closeBtn {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 55px;
			width: 55px;
			position: fixed;
			right: 10px;
			top: 10px;
			z-index: 10;
			&::before {
				content: "×";
				font-family: sans-serif;
				font-size: 24px;
				font-weight: 100;
				line-height: 0;				
			}
		}

		& h2 {
			&.filter {
				display: block;
			}
		}
	}
}