/* @group @variables */

[class*="m-faq-list"] {
--faq-list-gap: .5rem;
}

@media all and (min-width: 48em) {

[class*="m-faq-list"] {
--faq-list-gap: .75rem;
}

}

/* @end @variables */

/* @group @m-faq-list */

[class*="m-faq-list"] {
display: grid;
grid-auto-flow: row;
gap: var(--padding-primary);
}

[class*="m-faq-list"] :where(h3, p ,ul ,ol) {
margin-bottom: 0;
}

/* @end @m-faq-list */

/* @group @m-faq-detail */

[class*="m-faq-detail"] {
background-color: hsl(0deg 0% 100%);
border-radius: .5rem;
}

/* @end @m-faq-detail */

/* @group @variables */

[class*="a-root-faq-label"] {
--root-faq-label-grid-template-columns: auto 1fr auto;
--root-faq-label-gap: .75rem;
}

/* @end @variables */

/* @group @a-root-faq-label */

[class*="a-root-faq-label"] {
display: grid;
grid-template-columns: var(--root-faq-label-grid-template-columns);
gap: var(--root-faq-label-gap);
padding: .75rem var(--padding-primary);
color: hsl(198deg 71% 46%);
transition: var(--link-primary-transition);
cursor: pointer;
}

[class*="a-root-faq-label"]:hover,
[class*="a-root-faq-label"]:focus {
color: hsl(198deg 71% 41%);
}

[class*="a-faq-count-q"] {
align-self: start;
display: grid;
align-items: center;
font-family: var(--font-family-heading-primary);
font-size: clamp(1rem, 0.857rem + 0.71vw, 1.5rem); /* 16〜24 / 320〜1440 */
line-height: 1.5;
font-weight: 600;
font-variation-settings-strong: "wght" 600;
}

[class*="a-faq-label-text"] {
display: grid;
grid-auto-flow: row;
font-size: clamp(1rem, 0.964rem + 0.18vw, 1.125rem); /* 16〜18 / 320〜1440 */
font-family: var(--font-family-heading-primary);
line-height: 1.71428571;
font-weight: 600;
font-variation-settings-strong: "wght" 600;
}

[class*="a-faq-label-icon"] {
align-self: center;
width: .5rem;
height: auto;
color: hsl(0deg 0% 20%);
transition: var(--transform-transition);
}
input:checked ~ [class*="m-root-faq-label"] svg {
transform: scale(1, -1);
}

/* @end @a-root-faq-label */

/* @group @variables */

[class*="m-faq-answer"] {
--faq-answer-padding: 0 var(--padding-primary);
--faq-answer-max-height: 0;
--faq-answer-transition: var(--max-height-toggle-transition);
}
input:checked ~ [class*="m-faq-answer"] {
--faq-answer-padding: 0 var(--padding-primary) .75rem;
--faq-answer-max-height: 50rem;
--faq-answer-transition: var(--max-height-toggle-transition);
}

/* @end @variables */

/* @group @m-faq-answer */

[class*="m-faq-answer"] {
overflow: clip;
max-height: var(--faq-answer-max-height);
padding: var(--faq-answer-padding);
transition: var(--faq-answer-transition);
}

[class*="m-faq-answer"] {
--faq-answer-grid-template-columns: auto 1fr auto;
--faq-answer-gap: .75rem;
}

[class*="m-faq-answer"] {
display: grid;
grid-template-columns: var(--faq-answer-grid-template-columns);
grid-template-rows: var(--faq-answer-grid-template-rows);
gap: var(--faq-answer-gap);
}

[class*="a-faq-count-a"] {
align-self: start;
display: grid;
align-items: center;
font-family: var(--font-family-heading-primary);
font-size: clamp(1rem, 0.857rem + 0.71vw, 1.5rem); /* 16〜24 / 320〜1440 */
line-height: 1.5;
font-weight: 600;
font-variation-settings-strong: "wght" 600;
color: hsl(347deg 84% 64%);
}

[class*="a-faq-answer-overview"] {
padding-top: .375rem;
}

/* @end @m-faq-answer */