@charset "UTF-8";
/* よくあるご質問（/faq・詳細・TOP抜粋 共通） */
@media screen and (min-width: 768px),print {

.faq-list{width: 1000px; margin: 0 auto 60px;}
.faq-list .faq-item{border: 1px solid #CCCCCC; background: #fff; margin-bottom: 20px;}
.faq-list .faq-q{display: flex; align-items: center; padding: 22px 60px 22px 25px; cursor: pointer; position: relative;}
.faq-list .faq-q:hover{opacity: 0.7;}
.faq-list .faq-q-text{font-size: 18px; letter-spacing: 1px; color: #111; font-weight: 500; line-height: 1.6;}
.faq-list .faq-badge{width: 40px; height: 40px; min-width: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; margin-right: 20px;}
.faq-list .faq-badge-q{background: #213864;}
.faq-list .faq-badge-a{background: #A98A50;}
.faq-list .faq-toggle{position: absolute; right: 25px; top: 50%; width: 18px; height: 18px; margin-top: -9px;}
.faq-list .faq-toggle::before{content: ""; position: absolute; left: 0; top: 8px; width: 18px; height: 2px; background: #213864;}
.faq-list .faq-toggle::after{content: ""; position: absolute; left: 8px; top: 0; width: 2px; height: 18px; background: #213864; transition: transform 0.3s;}
.faq-list .faq-item.is-open .faq-toggle::after{transform: scaleY(0);}
.faq-list .faq-a{display: none; border-top: 1px dashed #CCCCCC; background: #f0eee9;}
.faq-list .faq-a__inner{display: flex; align-items: flex-start; padding: 22px 25px;}
.faq-list .faq-a-text{font-size: 16px; letter-spacing: 0.5px; line-height: 1.8; color: #333; min-width: 0; padding-top: 7px; margin-bottom: 0;}
.faq-none{width: 1000px; margin: 0 auto 60px; font-size: 16px;}

/* 詳細ページ（常時開いた状態） */
.faq-list.faq-detail .faq-q{cursor: default;}
.faq-list.faq-detail .faq-q:hover{opacity: 1;}
.faq-list.faq-detail .faq-a{display: block;}
.faq-back-btn{text-align: center; margin: 0 auto 80px;}
.faq-back-btn a{display: inline-block; background: #213864; color: #fff; font-size: 16px; letter-spacing: 1px; padding: 15px 50px;}
.faq-back-btn a:hover{opacity: 0.7;}

/* TOP抜粋（#faq.faq-top） */
#faq.faq-top{width: 100%; padding: 80px 0 40px; background: #f0eee9;}
#faq.faq-top .faq-top-ttl{text-align: center; font-size: 42px; letter-spacing: 4px; line-height: 1.2; margin-bottom: 40px;}
#faq.faq-top .faq-top-ttl .span-jp{display: block; font-size: 18px; letter-spacing: 2px; margin-top: 10px;}
#faq.faq-top .faq-list .faq-a{background: #faf9f6;}
#faq.faq-top .faq-btn{text-align: center; margin: 0 auto;}
#faq.faq-top .faq-btn a{display: inline-block; background: #213864; color: #fff; font-size: 16px; letter-spacing: 1px; padding: 15px 50px;}
#faq.faq-top .faq-btn a:hover{opacity: 0.7;}

}


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

.faq-list{width: 94%; margin: 0 auto 12vw;}
.faq-list .faq-item{border: 1px solid #CCCCCC; background: #fff; margin-bottom: 4vw;}
.faq-list .faq-q{display: flex; align-items: center; padding: 4vw 11vw 4vw 4vw; cursor: pointer; position: relative;}
.faq-list .faq-q-text{font-size: 4vw; letter-spacing: 0.5px; color: #111; font-weight: 500; line-height: 1.6;}
.faq-list .faq-badge{width: 8.5vw; height: 8.5vw; min-width: 8.5vw; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 4.5vw; color: #fff; margin-right: 3.5vw;}
.faq-list .faq-badge-q{background: #213864;}
.faq-list .faq-badge-a{background: #A98A50;}
.faq-list .faq-toggle{position: absolute; right: 4vw; top: 50%; width: 4vw; height: 4vw; margin-top: -2vw;}
.faq-list .faq-toggle::before{content: ""; position: absolute; left: 0; top: 1.8vw; width: 4vw; height: 2px; background: #213864;}
.faq-list .faq-toggle::after{content: ""; position: absolute; left: 1.8vw; top: 0; width: 2px; height: 4vw; background: #213864; transition: transform 0.3s;}
.faq-list .faq-item.is-open .faq-toggle::after{transform: scaleY(0);}
.faq-list .faq-a{display: none; border-top: 1px dashed #CCCCCC; background: #f0eee9;}
.faq-list .faq-a__inner{display: flex; align-items: flex-start; padding: 4vw;}
.faq-list .faq-a-text{font-size: 3.8vw; letter-spacing: 0.5px; line-height: 1.8; color: #333; min-width: 0; padding-top: 1.6vw; margin-bottom: 0;}
.faq-none{width: 94%; margin: 0 auto 12vw; font-size: 3.8vw;}

/* 詳細ページ（常時開いた状態） */
.faq-list.faq-detail .faq-q{cursor: default;}
.faq-list.faq-detail .faq-a{display: block;}
.faq-back-btn{text-align: center; margin: 0 auto 15vw;}
.faq-back-btn a{display: inline-block; background: #213864; color: #fff; font-size: 3.8vw; letter-spacing: 1px; padding: 3.5vw 10vw;}

/* TOP抜粋（#faq.faq-top） */
#faq.faq-top{width: 100%; padding: 12vw 0 8vw; background: #f0eee9;}
#faq.faq-top .faq-top-ttl{text-align: center; font-size: 9vw; letter-spacing: 1vw; line-height: 1.2; margin-bottom: 7vw;}
#faq.faq-top .faq-top-ttl .span-jp{display: block; font-size: 4vw; letter-spacing: 0.5vw; margin-top: 2vw;}
#faq.faq-top .faq-list .faq-a{background: #faf9f6;}
#faq.faq-top .faq-btn{text-align: center; margin: 0 auto;}
#faq.faq-top .faq-btn a{display: inline-block; background: #213864; color: #fff; font-size: 3.8vw; letter-spacing: 1px; padding: 3.5vw 10vw;}

}