@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/
.faq-accordion { max-width: 100%; margin: 0 auto; }
.faq-item { border-bottom: 1px solid #eee; background: #fff; }

.faq-question {
    width: 100%; display: flex; align-items: center;
    padding: 20px; background: none; border: none;
    cursor: pointer; text-align: left;
}

.faq-icon-q { color: #eb6100; font-weight: bold; margin-right: 15px; font-size: 1.4rem; }
.faq-icon-a { color: #0073aa; font-weight: bold; margin-right: 15px; font-size: 1.4rem; }

.faq-title { font-size: 16px; margin: 0; flex: 1; font-weight: 600; }

.faq-arrow {
    width: 8px; height: 8px; border-top: 2px solid #ccc; border-right: 2px solid #ccc;
    transform: rotate(135deg); transition: transform 0.3s; margin-left: 10px;
}
.is-active .faq-arrow { transform: rotate(-45deg); }

.faq-answer {
    height: 0; overflow: hidden; opacity: 0;
    transition: height 0.3s ease, opacity 0.3s ease;
}

.faq-answer-inner { padding: 10px 20px 30px 20px; display: flex; }
.faq-text { flex: 1; line-height: 1.8; }

/*****/

small.c-pageTitle__subTitle {
    display: none !important;
}


/* カテゴリーナビ全体のスタイル */
.faq-category-nav {
    margin-bottom: 30px;
}

.faq-category-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding: 0;
    justify-content: center; /* 中央寄せ */
}

/* ボタンのデザイン */
.faq-category-link {
    display: block;
    padding: 8px 20px;
    border: 1px solid #0073aa; /* SWELLのメインカラーなどに合わせて調整 */
    border-radius: 50px;
    font-size: 14px;
    color: #0073aa;
    text-decoration: none;
    transition: all 0.3s ease;
    background: #fff;
}

/* ホバー時と現在のカテゴリー */
.faq-category-link:hover,
.faq-category-link.is-current {
    background-color: #0073aa;
    color: #fff;
}

/* スマホでは少し小さく */
@media screen and (max-width: 768px) {
    .faq-category-link {
        padding: 6px 15px;
        font-size: 13px;
    }
}