/*----- FAQ ------*/

.faq-list{margin:0 auto; margin-bottom:70px; max-width:1000px;}
.faq-item {
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 2rem;
  border:var(--border);
  transition:all .4s;
}

.faq-question:focus{
  outline: 3px solid #000;
  outline-offset: 4px;
}
.faq-question:focus:not(:focus-visible){outline: none;}
.faq-item:hover{opacity:.8; cursor: pointer;}

.faq-icon{font-family:"Noto Sans"; width:80px; height:80px; border-radius:40px; background:#fff; color:var(--new-green); font-size:40px; line-height:80px; font-weight:700; text-align:center;}
.faq-icon.answer{width:80px; height:80px; border-radius:40px; background:var(--pale-bg); color:#EA5504; font-size:40px; line-height:80px; font-weight:700;}

.faq-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--q-bg);
  border: none;
  padding: 20px;
  cursor: pointer;
  gap:40px;
}
.faq-toggle:hover{cursor: pointer;}
.faq-toggle:focus{
  outline: 5px solid #000;
  outline-offset: -3px;
}
.faq-toggle:focus:not(:focus-visible){outline: none;}
.question-text{
  display:flex;
  flex-direction: column;
  gap:10px;
  flex-grow:4;
  width:calc(100% - 160px - 30px);
  font-family:"Noto Sans","BIZ UDGothic",sans-serif;
  line-height:1.5;
  font-size: var(--h5);
}
.question-text .faq-meta{width:fit-content; background:#fff; font-size:var(--sss-text); color:var(--new-green); padding:6px 10px; border-radius: 8px; font-weight:700;}
.question-text .faq-text{font-size:var(--h5); font-weight:600; text-align:left; color:#444;}
.faq-plus{font-size:40px; font-weight:700; color:var(--new-green)}
.faq-answer {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: all 0.4s ease;
  background: #fff;
  
}

.faq-answer-inner{
  padding: 20px;
  display:flex;
  gap:40px;
  align-items: center;
}
.answer-text{font-size:var(--text); font-weight:600; width:calc(100% - 120px); line-height:1.7;}

@media (max-width:768px){
.faq-list{margin-bottom:50px;}
.faq-toggle {gap:16px}
.faq-icon{width:50px; height:50px; border-radius:25px; font-size:28px; line-height:50px; text-align:center;}
.faq-icon.answer{width:50px; height:50px; border-radius:25px; font-size:28px; line-height:50px;}
.question-text{width:calc(100% - 70px - 30px);  gap:6px;}
.question-text .faq-meta{padding:3px 6px; border-radius: 5px;}
.answer-text{width:calc(100% - 70px);}
.faq-answer-inner{gap:16px; padding:18px 12px;}
.faq-toggle {padding:18px 12px;}
.faq-plus{font-size:30px;}
}