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


/**********************************************************/
/* PC */
/**********************************************************/

/**********************************
/*section共通
**********************************/
section{
  position: relative;  
}
section::after {
  background: url("../images/faq/faq.png") repeat-x;
  background-size: 100% 100%;
  position: absolute;
  width: 17.3%;
  height: 170px;
  content: "";
  left: 50%;
  top: 0;
  max-width: 250px;
}
/**********************************
よくある質問
**********************************/
.details{
  margin: -60px auto 55px;
  width: 960px;
}
.details details h3,
.details details h4{
  font-size: 2.6rem;
  margin-right: 10px;
}
.details details h3{
  color: #A16F4E;
}
.details details{
  background: #fff;
  margin-bottom: 17px;
}
.details div.flex{
  align-items: center;
}
.details summary {
  display: block;
  border: solid 1px #A16F4E;
  padding: 20px 12px;
  cursor: pointer;
  position: relative;
}
.details summary::-webkit-details-marker {
  display:none;
}
details summary::after {
  content: "＋";
  color: #707070;
  font-size: 2rem;
  font-weight: 400;
  position: absolute;
  right: 28px;
  top:24px;
}
details[open] summary::after {
  content: "−";
  top:22px;
}

.answer-box{
  padding: 20px 12px;
  background: #FAE24C;
}
.answer-box p{
  line-height: 1.6;
}
.answer-box a{
  color: #000;
  text-decoration: underline;
}

/* オープン時にアニメーションを設定 */
details[open] {
  animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
  0% {
    opacity: 0; /* 透明 */
    transform: translateY(-10px); /* 上から表示 */
  }
  100% {
    opacity: 1;
    transform: none;
  }
}




/**********************************************************/
/* SP*/
/**********************************************************/
@media screen and (max-width:767px){
section {
  top: 30px;
  margin-bottom: 70px;
}
section::after {
  height: 52px;
  right: 10px;
  top: -64px;
  left:auto;
}
.details {
  margin: 30px auto 75px;
  width: 100%;
  padding: 0 10px;
}
.details details summary::after {
  right: 6px;
  font-size: 1.8rem;
}
.details details h3,
.details details h4 {
    font-size: 1.8rem;
    margin-right: 8px;
}  
.details details p {
    width: 90%;
}
  
  .details details summary p{
   line-height: 1.6; 
  }





}