.yd_faq {
--ydfaq-radius: 12px;
--ydfaq-icon: 18px;
--ydfaq-gap: 10px;
--ydfaq-q: #111111;
--ydfaq-a: #374151;
--ydfaq-icon-color: #111111;
--ydfaq-icon-open: #111111;
--ydfaq-item-bg: #ffffff;
--ydfaq-item-bg-open: #ffffff;
--ydfaq-border: #e5e7eb;
--ydfaq-title-color: inherit;
--ydfaq-subtitle-color: inherit;
--ydfaq-block-bg: transparent;
--ydfaq-pad-t: 28px;
--ydfaq-pad-b: 40px;
padding-top: var(--ydfaq-pad-t);
padding-bottom: var(--ydfaq-pad-b);
margin-bottom: 40px;
}
.yd_faq.has-block-bg {
background-color: var(--ydfaq-block-bg);
}
.yd_faq.is-full-bleed {
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
box-sizing: border-box;
}
.yd_faq__inner {
max-width: 860px;
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
}
.yd_faq__head {
text-align: center;
margin: 0 auto 28px;
}
.yd_faq__title {
margin: 0 0 10px;
color: var(--ydfaq-title-color);
font-size: 28px;
font-weight: 700;
line-height: 1.25;
}
.yd_faq__subtitle {
color: var(--ydfaq-subtitle-color);
font-size: 16px;
line-height: 1.5;
}
.yd_faq__subtitle p {
margin: 0;
}
.yd_faq__list {
display: flex;
flex-direction: column;
gap: var(--ydfaq-gap);
}
.yd_faq__item {
border: 1px solid var(--ydfaq-border);
border-radius: var(--ydfaq-radius);
background: var(--ydfaq-item-bg);
overflow: hidden;
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.yd_faq.has-shadow .yd_faq__item {
box-shadow: 0 8px 22px rgba(17, 17, 17, 0.06);
}
.yd_faq__item.is-open {
background: var(--ydfaq-item-bg-open);
}
.yd_faq__q {
appearance: none;
display: flex;
align-items: center;
gap: 14px;
width: 100%;
margin: 0;
padding: 16px 18px;
border: 0;
background: transparent;
color: var(--ydfaq-q);
font: inherit;
font-size: 16px;
font-weight: 600;
line-height: 1.35;
text-align: left;
cursor: pointer;
}
.yd_faq__q:focus-visible {
outline: 2px solid var(--ydfaq-q);
outline-offset: -2px;
}
.yd_faq__qText {
flex: 1 1 auto;
min-width: 0;
}
.yd_faq.is-icon-left .yd_faq__icon {
order: -1;
}
.yd_faq__icon {
position: relative;
flex: 0 0 var(--ydfaq-icon);
width: var(--ydfaq-icon);
height: var(--ydfaq-icon);
color: var(--ydfaq-icon-color);
}
.yd_faq__item.is-open .yd_faq__icon {
color: var(--ydfaq-icon-open);
} .yd_faq.is-icon-plus .yd_faq__icon::before,
.yd_faq.is-icon-plus .yd_faq__icon::after {
content: "";
position: absolute;
background: currentColor;
border-radius: 1px;
transition: transform 0.2s ease;
}
.yd_faq.is-icon-plus .yd_faq__icon::before {
left: 0;
right: 0;
top: 50%;
height: 2px;
transform: translateY(-50%);
}
.yd_faq.is-icon-plus .yd_faq__icon::after {
top: 0;
bottom: 0;
left: 50%;
width: 2px;
transform: translateX(-50%);
}
.yd_faq.is-icon-plus .yd_faq__item.is-open .yd_faq__icon::after {
transform: translateX(-50%) rotate(90deg);
} .yd_faq.is-icon-chevron .yd_faq__icon::before {
content: "";
position: absolute;
left: 50%;
top: 42%;
width: 46%;
height: 46%;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translate(-50%, -40%) rotate(45deg);
transition: transform 0.2s ease;
}
.yd_faq.is-icon-chevron .yd_faq__item.is-open .yd_faq__icon::before {
top: 58%;
transform: translate(-50%, -60%) rotate(-135deg);
}
.yd_faq__a {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.2s ease;
}
.yd_faq__item.is-open .yd_faq__a {
grid-template-rows: 1fr;
}
.yd_faq__aInner {
overflow: hidden;
min-height: 0;
padding: 0 18px;
color: var(--ydfaq-a);
font-size: 15px;
line-height: 1.6;
}
.yd_faq__item.is-open .yd_faq__aInner {
padding-bottom: 18px;
}
.yd_faq__aInner p {
margin: 0 0 0.7em;
}
.yd_faq__aInner p:last-child {
margin-bottom: 0;
}
@media (min-width: 768px) {
.yd_faq {
--ydfaq-pad-t: 36px;
--ydfaq-pad-b: 48px;
}
.yd_faq__title {
font-size: 36px;
}
.yd_faq__subtitle {
font-size: 18px;
}
.yd_faq__q {
padding: 18px 22px;
font-size: 18px;
}
.yd_faq__aInner {
padding-left: 22px;
padding-right: 22px;
font-size: 16px;
}
.yd_faq__item.is-open .yd_faq__aInner {
padding-bottom: 22px;
}
}
@media (min-width: 1024px) {
.yd_faq__title {
font-size: 40px;
}
}