/* ==================================

    Q&A - よくある質問

================================== */

.qa-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 24px;
}

@media (max-width: 1024px) {

    .qa-container {
        width: 90%;
    }

}

@media (max-width: 768px) {

    .qa-container {
        width: calc(100% - 24px);
        padding: 8px;
    }
    
}

.qa-item {
    border-bottom: 1px solid #ccc;
    margin-bottom: 24px;
}

.qa-question {
    display: flex;
    justify-content: space-between; /* 左側と右端に分ける */
    align-items: flex-start;        /* 左右の高さを上揃え */
    cursor: pointer;
    padding: 16px 24px;
}

.qa-left {
    display: flex;
    align-items: flex-start; /* Qラベルをテキスト上揃え */
    gap: 10px;
}

.q-label, .a-label {
    font-weight: bold;
    line-height: 1;       /* ラベル高さを小さくして上揃え */
    padding-top: 5px;
}

.q-label, .a-label {
    color: #5E5E5E;
}

.a-label, .a-text {
    color: #ff1a56;
}

.q-text, .a-text {
    line-height: 1.5;     /* テキストは少し行間をつける */
    padding-right: 24px;
}

.toggle-btn {
    transition: transform 0.4s;
}

.qa-item.active .toggle-btn {
    transform: rotate(180deg);
}

.qa-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background-color: rgba(255, 26, 136, 0.3); /* #ff1a88 の30%透過 */
}

.qa-answer-inner {
    padding: 24px 28px; /* padding を inner に移動 */
}

.qa-item.active .qa-answer {
    max-height: 500px;
}

/* リンクボタン */
.btn-home-wrapper {
    text-align: center;
    margin: 80px auto;
}

.btn-home {
    display: inline-flex;
    align-items: center;
    justify-content: space-between; /* テキストと矢印を左右に配置 */
    padding: 12px 20px;
    background-color: #00abe7;
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    transition: background 0.4s, transform 0.4s;
}

.btn-home .arrow {
    margin-left: 10px;
    font-weight: bold;
    transition: transform 0.4s;
}

.btn-home:hover {
    background-color: #D3B680;
    color: #FFFFFF;
    transform: translateY(-2px);
}

.btn-home:hover .arrow {
    transform: translateX(4px);
}