@charset "UTF-8";
/* CSS Document */



section {padding-bottom: 100px;}

/* CSS部分 */
/* --- Q & A アイコンの共通設定 --- */
.icon-q, .icon-a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  margin-right: 12px;
  font-size: 14px;
  font-weight: bold;
  flex-shrink: 0; /* アイコンが潰れないように固定 */
}

/* Qのアイコン色 */
.icon-q {
  background-color: #3182ce;
  color: white;
}

/* Aのアイコン色 */
.icon-a {
  background-color: #e53e3e;
  color: white;
}

/* --- レイアウトの調整 --- */
.faq-question {
  display: flex; /* アイコンとテキストを横並びに */
  align-items: center;
  padding: 15px 45px 15px 15px;
  cursor: pointer;
  list-style: none;
  position: relative;
  background: #f8f9fa;

}

.faq-answer {
  display: flex; /* Aアイコンと回答を横並びに */
  padding: 5px 5px 5px 15px;
  background: #fff;
  border-top: 1px solid #eee;
}

.faq-item{margin-bottom: 35px;}

.answer-content p {line-height: 1.4;
}

/* --- ふわっと表示されるアニメーション --- */
.faq-item[open] .faq-answer {
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(-10px); /* 少し上から落ちてくる動き */
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 前回の矢印の設定もここに合わせて調整（共通） */
.faq-question::after {
  content: '';
  position: absolute;
  right: 20px;
  width: 8px;
  height: 8px;
  border-top: 2px solid #333;
  border-right: 2px solid #333;
  transform: rotate(135deg);
  transition: 0.3s;
}

.faq-item[open] .faq-question::after {
  transform: rotate(-45deg);
}

/* デフォルトの矢印を消す（Safari/Chrome対策） */
.faq-question::-webkit-details-marker { display: none; }

/*スマホ対応*/

@media screen and (max-width: 959px) {
	
	.faq-item{margin-bottom: 20px;}
	}