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


/* =========================
基本設定 */
.works-list__item + .works-list__item {
	margin-top: calc(var(--section-inner-gutter) + var(--gutter-xs));
}
@media (max-width: 959px) {
	.works-list__item + .works-list__item {
		margin-top: var(--gutter-xl);
	}
}
@media (max-width: 559px) {
	.works-list__item + .works-list__item {
		margin-top: var(--gutter-md);
	}
}
/* ------------
タイトル */
.ac__open {
	width: var(--flexible-width);
	margin-right: auto;
	margin-left: auto;

	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-sub-soft);
}
.ac__ttl {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	gap: 0 1em;
}
.ac__ttl-inner {
	font-family: var(--alphabet);
	font-size: var(--txt-5xl);
	font-weight: 700;
	color: var(--color-main);
}
.ac__ttl-inner .unit {
	font-family: var(--baseFonts);
	font-size: var(--txt-md);
	color: var(--color-bk);
}
/* 矢印 */
.ac__ttl .arrow {
	display: block;
	-webkit-transform: rotate(90deg);
	        transform: rotate(90deg);
	stroke: var(--color-sub);

	margin-left: auto;
}
/* ------------
コンテンツ */
.ac__content {
	padding-top: var(--section-inner-gutter);
	padding-bottom: var(--section-inner-gutter);
	position: relative;
}
.ac__content::before {
	content: "";
	display: inline-block;
	width: calc(100% - var(--gutter-common));
	height: 100%;
	background-color: var(--color-sub-soft);

	position: absolute;
	top: 0;
	z-index: -1;
}
.works-list__item:nth-child(odd) .ac__content::before{
	left: 0;
}
.works-list__item:nth-child(even) .ac__content::before{
	right: 0;
}
.ac__box {
	width: calc(var(--flexible-width) - var(--gutter-common));
	margin-right: auto;
	margin-left: auto;
	padding-top: 4.4em;
	padding-bottom: 4.4em;

	background-color: var(--color-base);
}
.ac__box + .ac__box {
	margin-top: 6.3em;
}
@media (max-width: 959px) {
	.ac__box {
		padding-top: 3.4em;
		padding-bottom: 3.4em;
	}
	.ac__box + .ac__box {
		margin-top: 5.3em;
	}
}
@media (max-width: 559px) {
	.ac__content::before {
		width: 100%;
	}
	.ac__box {
		padding-top: 2.4em;
		padding-bottom: 2.4em;
	}
	.ac__box + .ac__box {
		margin-top: 4.3em;
	}
}
/* .ac__inner {
	width: var(--flexible-width);
	margin-right: auto;
	margin-left: auto;
	padding-top: var(--section-inner-gutter);
	padding-bottom: var(--section-inner-gutter);

	background-color: var(--color-base);
} */
/* ------------
開閉時のアニメーション */
/* 矢印のアニメーション */
.ac__open.is-open .ac__ttl .arrow {
	-webkit-transform: rotate(-90deg);
	        transform: rotate(-90deg);
	-webkit-animation-name: ac-open-arrow;
	        animation-name: ac-open-arrow;
	-webkit-animation-duration: .2s;
	        animation-duration: .2s;
	-webkit-animation-timing-function: var(--easeInOutSine);
	        animation-timing-function: var(--easeInOutSine);
	-webkit-animation-fill-mode: backwards;
	        animation-fill-mode: backwards;
}
.ac__open.is-close .ac__ttl .arrow {
	-webkit-transform: rotate(90deg);
	        transform: rotate(90deg);
	-webkit-animation-name: ac-close-arrow;
	        animation-name: ac-close-arrow;
	-webkit-animation-duration: .2s;
	        animation-duration: .2s;
	-webkit-animation-timing-function: var(--easeInOutSine);
	        animation-timing-function: var(--easeInOutSine);
	-webkit-animation-fill-mode: backwards;
	        animation-fill-mode: backwards;
}
@-webkit-keyframes ac-open-arrow {
	from {
		-webkit-transform: rotate(90deg);
		        transform: rotate(90deg);
	}
	to {
		-webkit-transform: rotate(-90deg);
		        transform: rotate(-90deg);
	}
}
@keyframes ac-open-arrow {
	from {
		-webkit-transform: rotate(90deg);
		        transform: rotate(90deg);
	}
	to {
		-webkit-transform: rotate(-90deg);
		        transform: rotate(-90deg);
	}
}
@-webkit-keyframes ac-close-arrow {
	from {
		-webkit-transform: rotate(-90deg);
		        transform: rotate(-90deg);
	}
	to {
		-webkit-transform: rotate(90deg);
		        transform: rotate(90deg);
	}
}
@keyframes ac-close-arrow {
	from {
		-webkit-transform: rotate(-90deg);
		        transform: rotate(-90deg);
	}
	to {
		-webkit-transform: rotate(90deg);
		        transform: rotate(90deg);
	}
}
/* 下線のアニメーション */
.ac__open::before {
	-webkit-transition: -webkit-transform .3s var(--easeInOutSine);
	transition: -webkit-transform .3s var(--easeInOutSine);
	transition: transform .3s var(--easeInOutSine);
	transition: transform .3s var(--easeInOutSine), -webkit-transform .3s var(--easeInOutSine);
}
.ac__open.is-open::before {
	-webkit-transform: scaleX(0);
	        transform: scaleX(0);
}
/* コンテンツのアニメーション */
.ac__inner > *{
	opacity: 0;
	-webkit-transition: opacity .2s var(--easeInOutSine);
	transition: opacity .2s var(--easeInOutSine);
}
.ac__content {
	overflow: hidden;
	max-height: 0px;
	-webkit-transition: max-height .3s var(--easeInOutSine);
	transition: max-height .3s var(--easeInOutSine);
	-webkit-transition: max-height .3s var(--linear);
	transition: max-height .3s var(--linear);
}
.ac__inner > *.is-slide{
	opacity: 1;
	-webkit-animation-duration: .5s;
	        animation-duration: .5s;
	-webkit-animation-delay: .1s;
	        animation-delay: .1s;
	-webkit-animation-timing-function: var(--easeInSine);
	        animation-timing-function: var(--easeInSine);
	-webkit-animation-timing-function: var(--easeInOutSine);
	        animation-timing-function: var(--easeInOutSine);
	-webkit-animation-fill-mode: backwards;
	        animation-fill-mode: backwards;
}
.works-list__item:nth-child(odd) .ac__inner > *.is-slide{
	-webkit-animation-name: acc-open-left;
	        animation-name: acc-open-left;
}
.works-list__item:nth-child(even) .ac__inner > *.is-slide{
	-webkit-animation-name: acc-open-right;
	        animation-name: acc-open-right;
}
@-webkit-keyframes acc-open-left {
	from {
		opacity: 0;

		-webkit-transform: translateX(calc(0px - var(--gutter-var-2xl)));

		        transform: translateX(calc(0px - var(--gutter-var-2xl)));
	}
	70% {
		-webkit-transform: translateX(0);
		        transform: translateX(0);
	}
	to {
		opacity: 1;
	}
}
@keyframes acc-open-left {
	from {
		opacity: 0;

		-webkit-transform: translateX(calc(0px - var(--gutter-var-2xl)));

		        transform: translateX(calc(0px - var(--gutter-var-2xl)));
	}
	70% {
		-webkit-transform: translateX(0);
		        transform: translateX(0);
	}
	to {
		opacity: 1;
	}
}
@-webkit-keyframes acc-open-right {
	from {
		opacity: 0;

		-webkit-transform: translateX(var(--gutter-var-2xl));

		        transform: translateX(var(--gutter-var-2xl));
	}
	70% {
		-webkit-transform: translateX(0);
		        transform: translateX(0);
	}
	to {
		opacity: 1;
	}
}
@keyframes acc-open-right {
	from {
		opacity: 0;

		-webkit-transform: translateX(var(--gutter-var-2xl));

		        transform: translateX(var(--gutter-var-2xl));
	}
	70% {
		-webkit-transform: translateX(0);
		        transform: translateX(0);
	}
	to {
		opacity: 1;
	}
}


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