@charset "UTF-8";
/* =========================
アコーディオンの初期設定をリセットする */
/* --------------------
デフォルトの矢印を消す */
summary {
	display: block;
}
summary::-webkit-details-marker {
	display: none;
}


/* =========================
基本設定 */
.ac + .ac {
	margin-top: var(--gutter-sm);
}
/* ------------
タイトル */
.ac__open {
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	padding-right: var(--gutter-var-xs);

	background-color: var(--color-base);
	border-radius: 4px;

	cursor: pointer;

	position: relative;
}
.ac__open::before,
.ac__open::after {
	content: "";
	display: inline-block;
	height: 2px;
	position: absolute;
	left: 0;
	bottom: 0;
}
.ac__open::before {
	width: 100%;
	background-color: var(--color-main-soft);
}
.ac__open::after {
	width: calc(var(--txt-lg) * 2);
	background-color: var(--color-accent);
}
.ac__ttl {
	font-size: var(--txt-lg);

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0 1em;
}
.ac__ttl > span::first-letter {
	color: var(--color-accent);
}
/* 矢印 */
.ac__ttl .arrow {
	display: block;
	transform: rotate(90deg);
	stroke: var(--color-main-pale);

	margin-left: auto;
}
/* ------------
コンテンツ */
.ac__inner {
	margin-top: var(--gutter-md);
	padding-bottom: calc(var(--gutter-2xl) - var(--gutter-md));
	background-color: var(--color-base);
	border-radius: 4px;
}
/* ------------
開閉時のアニメーション */
/* 矢印のアニメーション */
.ac__open.is-open .ac__ttl .arrow {
	transform: rotate(-90deg);
	animation-name: ac-open-arrow;
	animation-duration: .2s;
	animation-timing-function: var(--easeInOutSine);
	animation-fill-mode: backwards;
}
.ac__open.is-close .ac__ttl .arrow {
	transform: rotate(90deg);
	animation-name: ac-close-arrow;
	animation-duration: .2s;
	animation-timing-function: var(--easeInOutSine);
	animation-fill-mode: backwards;
}
@keyframes ac-open-arrow {
	from {
		transform: rotate(90deg);
	}
	to {
		transform: rotate(-90deg);
	}
}
@keyframes ac-close-arrow {
	from {
		transform: rotate(-90deg);
	}
	to {
		transform: rotate(90deg);
	}
}
/* 下線のアニメーション */
.ac__open::before {
	transition: transform .3s var(--easeInOutSine);
	transform-origin: left top;
}
.ac__open.is-open::before {
	transform: scaleX(0);
}
/* コンテンツのアニメーション */
.ac__inner > *{
	opacity: 0;
	transition: opacity .2s var(--easeInOutSine);
}
.ac__content {
	overflow: hidden;
	max-height: 0px;
	transition: max-height .3s var(--easeInOutSine);
}
.ac__inner > *.is-slide{
	opacity: 1;
	animation-name: acc-open;
	animation-duration: .2s;
	animation-delay: .1s;
	animation-timing-function: var(--easeInSine);
	animation-fill-mode: backwards;
}
@keyframes acc-open {
	from {
		opacity: 0;

		transform: translateY(-10px);
	}
	to {
		opacity: 1;

		transform: translateY(0);
	}
}


/* =========================
コンテンツの設定 */
/* container-works.css参照 */