@charset "utf-8";
/* CSS Document */
/*:root {
--light-brown: #c5b8b2;
--brown: #6f4d3e;
--light-gray: #eee;
--white: #ffffff;
--black: #000000;
--overlay-color: rgb(0 0 0 / 0.8);
--crimson-font: "Crimson Text", serif;
--noto-serif-font: "Noto Serif JP", serif;
--noto-sans-font: "Noto Sans JP", sans-serif;
--zen-maru-font: "Zen Maru Gothic", serif;
--kiwi-maru-font: "Kiwi Maru", serif;
}
*/

.genre{
margin-top: 32px;
font-size: 20px;
}
.accordion-wrapper {
width: 100%;
max-width: 800px;
margin: 0 auto;
padding: 0 16px;
}

.accordion-item {
margin-bottom: 15px;
border-radius: 8px;
overflow: hidden;
box-shadow: 2px 2px 5px rgb(0 0 0 / 0.05);
}

.accordion-header {
display: flex;
align-items: center;
cursor: pointer;
transition: background-color 0.3s ease;
}

.accordion-q {
background-color: #eeeeee;
padding: 15px;
display: flex;
align-items: center;
gap: 10px;
justify-content: space-between;
}

.accordion-a {
background-color: #f2f2f2;
padding: 15px;
display: flex;
align-items: center;
gap: 10px;
}

.qa-icon, .toggle-icon {
width: 30px;
height: 30px;
}

.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease;
}

.accordion-content.active {
max-height: 1000px;
}

.accordion-text-box {
padding: 15px;
line-height: 1.6;
display: flex;
flex-direction: row;
gap: 10px;
}
.accordion-text {
padding: 0 15px;
line-height: 1.6;

}