@charset "UTF-8";
/* よくあるご質問（アコーディオン）　/faq とTOP抜粋で共用 */
@media screen and (min-width: 768px),print {

/* ページ見出し画像は会社概要ページのものを流用 */
#faq .main-title{ background: url('../images/company/h2.jpg') top center no-repeat !important; }

#faq .faq-list{ margin-bottom: 60px; }
#faq .faq-item{ background: #fff; border: 1px solid #dcdddd; margin-bottom: 20px; }
#faq .faq-q{ position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 22px 60px 22px 22px; cursor: pointer; }
#faq .faq-q:hover{ background: #f8f7f5; }
#faq .faq-q-text{ font-size: 17px; line-height: 1.6; font-weight: bold; }
#faq .faq-a{ display: none; border-top: 1px dotted #ccc; }
#faq .faq-a__inner{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding: 22px; }
#faq .faq-a-text{ min-width: 0; margin-bottom: 0; font-size: 15px; line-height: 1.9; }
#faq .faq-badge{ -ms-flex-negative: 0; flex-shrink: 0; width: 34px; height: 34px; margin-right: 15px; border-radius: 50%; color: #fff; font-size: 17px; line-height: 34px; text-align: center; }
#faq .faq-badge-q{ background: #886039; }
#faq .faq-badge-a{ background: #9a8c52; }
#faq .faq-toggle{ position: absolute; top: 50%; right: 22px; width: 16px; height: 16px; margin-top: -8px; }
#faq .faq-toggle::before,
#faq .faq-toggle::after{ content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 2px; background: #886039; }
#faq .faq-toggle::after{ -webkit-transform: rotate(90deg); transform: rotate(90deg); -webkit-transition: transform 0.3s ease; transition: transform 0.3s ease; }
#faq .faq-item.is-open .faq-toggle::after{ -webkit-transform: rotate(0deg); transform: rotate(0deg); }
#faq .faq-empty{ text-align: center; font-size: 16px; padding: 60px 0; }

}

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

    /* ページ見出し画像は会社概要ページのものを流用 */
    #faq .main-title{ background: url('../images/company/sp-h2.jpg') top center no-repeat !important; }

    #faq .faq-list{ margin-bottom: 8%; }
    #faq .faq-item{ background: #fff; border: 1px solid #dcdddd; margin-bottom: 4%; }
    #faq .faq-q{ position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 4% 12% 4% 4%; cursor: pointer; }
    #faq .faq-q-text{ font-size: 3.6vw; line-height: 1.6; font-weight: bold; }
    #faq .faq-a{ display: none; border-top: 1px dotted #ccc; }
    #faq .faq-a__inner{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding: 4%; }
    #faq .faq-a-text{ min-width: 0; margin-bottom: 0; font-size: 3.382vw; line-height: 1.8; }
    #faq .faq-badge{ -ms-flex-negative: 0; flex-shrink: 0; width: 7vw; height: 7vw; margin-right: 3vw; border-radius: 50%; color: #fff; font-size: 3.6vw; line-height: 7vw; text-align: center; }
    #faq .faq-badge-q{ background: #886039; }
    #faq .faq-badge-a{ background: #9a8c52; }
    #faq .faq-toggle{ position: absolute; top: 50%; right: 4%; width: 3.6vw; height: 3.6vw; margin-top: -1.8vw; }
    #faq .faq-toggle::before,
    #faq .faq-toggle::after{ content: ""; position: absolute; left: 0; top: 1.6vw; width: 3.6vw; height: 2px; background: #886039; }
    #faq .faq-toggle::after{ -webkit-transform: rotate(90deg); transform: rotate(90deg); -webkit-transition: transform 0.3s ease; transition: transform 0.3s ease; }
    #faq .faq-item.is-open .faq-toggle::after{ -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    #faq .faq-empty{ text-align: center; font-size: 3.6vw; padding: 10% 0; }

}