@charset "UTF-8";

/* ============================================================
   FAQ（よくあるご質問）一覧 archive-faq
   Q/Aバッジ・＋/−トグルはCSSのみで描画（SVGアイコン不使用）
   配色：ダーク #1C1C1C / ゴールド #FFCC00 / レッド #AB0525
   ============================================================ */

@media screen and (min-width: 768px), print {

#faq main { width: 1100px; margin: 0 auto 100px; }

.faq-list { list-style: none; padding: 0; margin: 0; }

.faq-item {
    background: #fff;
    border: 1px solid #E2E2E2;
    border-radius: 8px;
    margin-bottom: 20px;
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
}
.faq-item.is-open { border-color: #1C1C1C; box-shadow: 0 4px 14px rgba(0,0,0,.06); }

/* 質問（クリックで開閉） */
.faq-q {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 28px 30px;
    cursor: pointer;
    position: relative;
    user-select: none;
}
.faq-q-text {
    flex: 1;
    min-width: 0;
    font-size: 19px;
    line-height: 1.6;
    font-weight: 700;
    letter-spacing: .04em;
    color: #1C1C1C;
}

/* Q/Aバッジ（円） */
.faq-badge {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    font-family: "din-2014-narrow", sans-serif;
}
.faq-badge-q { background: #1C1C1C; color: #fff; }
.faq-badge-a { background: #FFCC00; color: #1C1C1C; }

/* ＋/−トグル（CSSのみ） */
.faq-toggle {
    flex-shrink: 0;
    position: relative;
    width: 22px;
    height: 22px;
}
.faq-toggle::before,
.faq-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: #1C1C1C;
    transition: transform .25s ease, opacity .25s ease;
}
.faq-toggle::before { width: 22px; height: 2px; transform: translate(-50%, -50%); }
.faq-toggle::after  { width: 2px; height: 22px; transform: translate(-50%, -50%); }
.faq-item.is-open .faq-toggle::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

/* 回答（外側＝開閉アニメ用 block⇔none） */
.faq-a { display: none; border-top: 1px dashed #D5D5D5; }
/* 回答（内側＝常時flex：slideToggleのdisplay上書きで本文が回り込むのを防ぐ） */
.faq-a__inner {
    display: flex;
    gap: 20px;
    padding: 26px 30px 30px;
    background: #FAFAFA;
}
.faq-a-text {
    min-width: 0;
    flex: 1;
    font-size: 16px;
    line-height: 1.95;
    color: #333;
}
.faq-a-text p { margin: 0 0 1em; }
.faq-a-text p:last-child { margin-bottom: 0; }
.faq-a-text a { color: #AB0525; text-decoration: underline; }

.faq-empty { text-align: center; font-size: 18px; color: #888; padding: 80px 0; }

} /* end PC */


@media screen and (max-width: 767px) {

#faq main { width: 100%; padding: 0 4%; box-sizing: border-box; margin-bottom: 60px; }

.faq-list { list-style: none; padding: 0; margin: 0; }

.faq-item {
    background: #fff;
    border: 1px solid #E2E2E2;
    border-radius: 1.6vw;
    margin-bottom: 3.5vw;
    overflow: hidden;
}
.faq-item.is-open { border-color: #1C1C1C; }

.faq-q {
    display: flex;
    align-items: center;
    gap: 3vw;
    padding: 4.5vw 4vw;
    cursor: pointer;
    position: relative;
    user-select: none;
}
.faq-q-text {
    flex: 1;
    min-width: 0;
    font-size: 4vw;
    line-height: 1.6;
    font-weight: 700;
    letter-spacing: .03em;
    color: #1C1C1C;
}

.faq-badge {
    flex-shrink: 0;
    width: 8vw;
    height: 8vw;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4.3vw;
    font-weight: 700;
    line-height: 1;
    font-family: "din-2014-narrow", sans-serif;
}
.faq-badge-q { background: #1C1C1C; color: #fff; }
.faq-badge-a { background: #FFCC00; color: #1C1C1C; }

.faq-toggle {
    flex-shrink: 0;
    position: relative;
    width: 4.5vw;
    height: 4.5vw;
}
.faq-toggle::before,
.faq-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: #1C1C1C;
    transition: transform .25s ease, opacity .25s ease;
}
.faq-toggle::before { width: 4.5vw; height: 2px; transform: translate(-50%, -50%); }
.faq-toggle::after  { width: 2px; height: 4.5vw; transform: translate(-50%, -50%); }
.faq-item.is-open .faq-toggle::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

.faq-a { display: none; border-top: 1px dashed #D5D5D5; }
.faq-a__inner {
    display: flex;
    gap: 3vw;
    padding: 4.5vw 4vw 5vw;
    background: #FAFAFA;
}
.faq-a-text {
    min-width: 0;
    flex: 1;
    font-size: 3.7vw;
    line-height: 1.9;
    color: #333;
}
.faq-a-text p { margin: 0 0 1em; }
.faq-a-text p:last-child { margin-bottom: 0; }
.faq-a-text a { color: #AB0525; text-decoration: underline; }

.faq-empty { text-align: center; font-size: 4vw; color: #888; padding: 20vw 0; }

} /* end SP */