/* CSS Document */
@import url("reset.css");
@import url("swiper-bundle.min.css");
@import url("common.css");
@import url("styles.css");


/* accordion
---------------------------------------------------------- */
.accordion{ margin: 30px 0;}
.accordion h3{
	position: relative;
	margin: 0 0 20px;
	padding: 15px 110px 15px 2rem;
	border: none;
	color: var(--main-color);
	background-color: var(--main-color);
	border-radius: 10px;
	color: #fff;
	font-size: 1.2rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	transition: var(--transition02s);
}
.accordion h3::before { content: none;}

/* ::after にテキストを表示 */
.accordion h3::after {
	content: 'read more'; /* 閉じている時の文字 */
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
	font-size: 0.9rem;
	font-weight: bold;
	transition: all 0.3s ease;
}

.accordion h3:hover,
.accordion h3.open{ background-color: hsl(var(--main-hue), var(--main-saturation), 30%);}
.accordion h3.open::after { content: 'close';}
.accordion h3.open::before { display: none;}

.accordion section{ display: none;}
.accordion section .wp-block-columns{
	padding: 30px;
	margin-bottom: 20px;
	border-radius: 10px;
	background-color: var(--bg-color);
}
.accordion section .is-layout-flow p:first-child{ margin-top: 0;}

@media screen and (max-width: 768px) and (orientation: portrait) {
	.accordion h3 {
		padding-right: 90px; /* スマホ用に調整 */
		font-size: 1rem;
	}
	.accordion h3::after {
		font-size: 0.8rem;
	}
	.accordion section{ padding: 15px;}
}