/* FAQ Section styling */
/* FAQ Section styling */
.faq{
    margin-top: 50px;
}

.faq__inner {
    max-width: 1244px;
    margin: 0 auto;
    padding-left: 25px;
    padding-right: 25px;
}

.faq__item {
    margin-bottom: 20px;
    position: relative;
}

.faq__question {
    color: #333;
    padding: 15px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #fff;
    border-radius: 4px;
    background-color: white;
}

/* Pseudo-elements for the three lines */
.faq__question::before{
    content: '';
    position: absolute;
    right: 22px;
    width: 5px;
    height: 1px;
    background-color: #333;
    transition: transform 0.3s ease;
}
.faq__question::after {
    content: '';
    position: absolute;
   right: 24px;
    width: 1px;
    height: 5px;
    background-color: #333;
    transition: transform 0.3s ease;
}

.faq__question::before {
    top: 50%; /* Line 1 */
}

.faq__question::after {
    top: 50%;
    transform: translateY(-35%);
}

.faq__question span {
    content: '';
    position: absolute;
    right: 15px;
    width: 20px;
    height: 1px;
    background-color: white;
    top: 12px; /* Line 2 (middle) */
    display: block;
    transition: transform 0.3s ease;
}

/* Transform lines to X on click */
.faq__question.active::before {
    transform: rotate(135deg) translate(0, 0);
}

.faq__question.active::after {
    transform: rotate(-45deg) translate(2px, -1px);
}

.faq__question.active span {
    transform: scale(0); /* Hide the middle line */
}

/* Answer initially hidden */
.faq__answer {
    min-height: 0; /* 初期状態では隠す */
    overflow: hidden;
    transition: height 0.3s ease;
    background-color: #F4F4F4;
    border: 1px solid #ddd;
    border-radius: 5px;
    color: #333;
    height: 0;
}
.faq__answer-text{
    padding: 1rem;
    font-size: 15px;
     font-family: "Prompt", sans-serif;
     font-weight:400;
     display: flex;
}
.faq__answer-text span{
    display:inline-block;
    margin-right: clamp(1rem,2vw,27px);
}
.faq__question-title{
    padding-right: 20px;
     font-family: "Prompt", sans-serif;
     font-weight:400;
     font-size: clamp(15px,2vw,18px);
}
.faq__question-title::first-letter{
    color:#878787;
    margin-right: 6px;
}
.faq__answer-text::first-letter{
    margin-right: 20px;
}
.faq-family__wrapper{
    margin-top: 25px;
}
.p-faq__title{
    justify-content: flex-start !important;
    flex-direction: column  !important;
}
@media (min-width: 768px) {
    .faq{
        margin-top: 100px;
    }
    .p-faq__title{
        justify-content: flex-start !important;
    }
    .faq-family__wrapper{
        margin-top: 108px;
    }
    .faq__answer-text{
        font-size: 18px;
    }
}