@charset "utf-8";
/* CSS information */
/* ===================================================================
  file name  : accordion_faq
  author     : honyaclub JRE MALL
  about      : FAQ　アコーディオン
  date       : 2025/02/27
  update     : 
=================================================================== */

/* ========== PC ========== */

/* ------------------------
   #faq 共通 
------------------------ */
/* --- .container --- */
.container {
  padding-bottom: 40px;
  background-color: #fff;
}
#faq {
  font-size: 14px;
  line-height: 1.5;
  padding-top: 20px;
}
#faq a {
  /* color: #0077b3; */
  color: #434343;
}
/* #faq #lead, #faq .title-faq, #faq #faq-list, #faq .accordion-area {
  width: 90%;
  margin: 0 auto;
} */
#section01, #section02, #section03 {
  margin: 0 auto 30px;
}
#faq #faq-list li.common {
  background-color: #036c57 !important;
}
#faq span.attention {
  color: #FF0004;
  /* color: #ee6677; */
  font-weight: bold;
}
/* #faq span.ranking {
  font-size: 18px;
  padding: 0 8px 0 5px;
} */
/* #faq li a span.many {
  color: #FF0004;
  font-size: 16px;
} */
#faq li div.button {
  width: 40%;
  margin: 10px 0;
  /* background-color: #eeeeee; */
  /* border: solid 2px #ccc; */
  background-color: #edf7f6; 
  border: solid 3px #7acbb7;
  border-radius: 20px;
  box-sizing: border-box;
  text-align: center;
  display: inline-block;
  font-weight: bold;
}
#faq li div.button a {
  padding: 10px !important;
  display: block;
}
#faq li div.note {
  /* width: 30%; */
  font-size: 12px;
  color: #555;
  display: inline-block;
  padding: 0;
}

/* ------------------------
   #section01 
------------------------ */
#faq #section01 {
  width: 85%;
  /* background-color: #f5f5f5; */
  padding: 10px 0;
}
#faq #section01 h2 {
  font-size: 26px;
  text-align: center;
  /* color: #6f99a4; */
  color: #434343;
  font-weight: bold;
}
/* --- #lead --- */
#faq #lead {
  padding: 20px 0;
  text-align: center;
  color: #434343;
}
#faq #lead p {
  /* padding: 0 10px; */
  font-size: 16px;
  font-weight: bold;
}
/* --- #faq-list --- */
/*#faq #faq-list {
  padding-bottom: 30px;
}*/
#faq #faq-list ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  /* width: 90%; */
  margin: 0 auto;
}
#faq #faq-list li {
  display: block;
  /* width: 31%; */
  /* -ms-flex-preferred-size: 31%;
  flex-basis: 31%; */
  /* min-width: 140px; */
  /* border: solid 2px #666; */
  margin: 1%;
  /* background-color: #ecf4f5; */
  background-color: #00a987;
  /* border: solid 3px #6f99a4; */ 
  /* border: solid 3px #7acbb7; */
  border-radius: 10px;
  box-sizing: border-box;
}
#faq #faq-list li a {
  display: block;
  /* padding: 5px 10px; */
  padding: 10px;
  font-weight: bold;
  /* color: #6f99a4; */
  /* color: #434343; */
  color: #fff;
  font-size: 16px;
}
#faq #faq-list li a:before {
  content: "〉";
  transform: rotate(90deg);
  vertical-align: middle;
  display: inline-block;
  position: relative;
  top: 3px;
  margin: 0 10px 0 0;
  /* color: #3c7d8f; */
  /* color: #7acbb7; */
  color: #fff;
}
#faq #faq-list li.common a:before {
}
/* #faq #faq-list li a span.many {
  color: #FF0004;
} */
#faq .section {
  margin-bottom: 40px;
}

/* ------------------------
   #section02
------------------------ */
#faq #section02 {
  width: 75%;
}
/* --- .title-faq --- */
#faq .title-faq {
  font-size: 18px;
  font-weight: bold;
  /* border-bottom: solid 3px #4c8795; */
  border-bottom: solid 3px #00a987;
  padding: 5px 0;
  margin-bottom: 15px;
  color: #434343;
}
/* --- .accordion-area --- */
#faq .accordion-area h3.title.question {
  background-color: #001a36;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  padding: 10px 40px;
  border-bottom: solid 1px #fff;
  position: relative;
  /* background: url(https://shopping.jreast.co.jp/html/upload/user_data/shop/S521/img/guide/ico_faq01.gif) no-repeat left 10px top 10px #6f99a4; */
  background: url(https://shopping.jreast.co.jp/html/upload/user_data/shop/S521/img/guide/ico_faq01.gif) no-repeat left 10px top 10px #00a987;
  line-height: 1.5;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
#faq .accordion-area h3.title.question span.many {
  font-size: 16px;
}
#faq .accordion-area .js-ac .title:after {
  content: '＋';
  position: absolute;
  right: 30px;
}
/* #faq .accordion-area .js-ac .toggle {
  display: none;
} */
#faq .accordion-area .js-ac .title.is-active:after {
  content: '－';
}
/* #faq .accordion-area .js-ac .toggle {
  display: block;
} */
#faq .accordion-area .toggle.answer {
  margin-bottom: 40px;
  /* border: solid 1px #ccc; */
  box-sizing: border-box;
  padding: 10px;
  background-color: #edf7f6;
}
#faq .accordion-area .toggle.answer ul {
  background: url(https://shopping.jreast.co.jp/html/upload/user_data/shop/S521/img/guide/ico_faq02.gif) no-repeat left 0 top 5px;
}
#faq .accordion-area .toggle.answer li {
  padding: 5px 30px;
}
#faq .accordion-area .toggle.answer li a {
  padding: 0;
  line-height: 1.2;
}
#faq .accordion-area .toggle.answer dt {
  margin-bottom: 5px;
}
#faq .accordion-area .toggle.answer dd {
  text-indent: 1em;
}

/* ------------------------
   #section03 
------------------------ */
/* --- #store-service-area --- */
#faq #store-service-area {
  width: 70%;
  margin: 0 auto;
  border: solid 2px #ccc;
  box-sizing: border-box;
  padding: 20px;
  line-height: 1.5;
  text-align: center;
  color: #434343;
}
#faq #store-service-area ul.btn-area {
  margin: 20px 0;
}
/* #faq #store-service-area p.customer {
  margin-top: 20px;
} */

/* ------------------------
   #page-top 
------------------------ */
#page-top {
  position: fixed;
  bottom: 5%;
  right: 5%;
  z-index: 9999;
}
#page-top a {
  display: block;
  z-index: 999;
  padding: 15px 0 0 15px;
  border-radius: 25px;
  width: 50px;
  height: 50px;
  background-color: #000000;
  color: #ffffff;
  opacity: 0.4;
}
#page-top a:hover {
  opacity: 0.4;
}
.arrow {
  display: block;
  width: 10px;
  height: 10px;
  border: 6px solid;
  border-color: #ffffff #ffffff transparent transparent;
  transform: rotate(-45deg);
  margin: 7px 0 0 4px;
}


/* ========== /PC ========== */


/* ========== SP ========== */
@media screen and (max-width: 767px) {
  /* ------------------------
   #faq 共通 
------------------------ */
  /* --- .container --- */
  #faq {
    padding: 10px 0 40px;
  }
  #faq #section01, #section02, #section03 {
    margin: 0 auto 20px;
    /* width: 90% !important; */
    width: 100% !important;
  }
  #faq li div.button {
    width: 80%;
  }
  #faq li div.note {
    width: 100%;
    text-align: center;
  }
  /* ------------------------
   #section01 
------------------------ */
  #faq #section01 {
    padding: 10px 0;
  }
  #faq #section01 h2 {
    font-size: 22px;
  }
  /* --- #lead --- */
  #faq #lead {
    padding: 10px;
    /* padding-bottom: 0; */
    text-align: left;
  }
  #faq #lead p {
    font-size: 14px;
  }
  /* --- #faq-list --- */
  #faq #faq-list ul {
    /* margin-bottom: 20px; */
    width: 98%;
  }
  #faq #faq-list li {
    /* -ms-flex-preferred-size: 48%;
    flex-basis: 48%; */
    width: 48%;
  }
  #faq #faq-list li a {
    padding: 10px 0;
    font-size: 13px;
    text-align: center;
  }
  #faq #faq-list li a:before {
    display: none;
  }
  /* #faq #faq-list.pc-display {
    display: none;
  } */
  
  /* ------------------------
   #section02 
------------------------ */
  /* --- .title-faq --- */
  #faq .title-faq {
    /* padding-top: 20px; */
    margin-bottom: 10px;
  }
  /* --- .accordion-area --- */
  .accordion-area {
    width: 100%;
  }
  /*#faq .accordion-area h3.title.question {
    padding: 15px;
    line-height: 1.5;
  }*/
  #faq .accordion-area .js-ac .title:after {
    content: '＋';
    position: absolute;
    right: 20px;
  }
  /*
  #faq .accordion-area .js-ac .toggle {
    display: none;
  }
  */
  #faq .accordion-area .js-ac.is-active .title:after {
    content: '－';
  }
  #faq .accordion-area .js-ac.is-active .toggle {
    display: block;
  }
  #faq .accordion-area .toggle.answer ul {
    background: url(https://shopping.jreast.co.jp/html/upload/user_data/shop/S521/img/guide/ico_faq02.gif) no-repeat left 0 top 5px;
  }
  #faq .accordion-area .toggle.answer li {
    letter-spacing: normal;
    padding: 5px 0 5px 30px;
  }
  #faq .accordion-area .toggle li a {
    position: relative;
    display: block;
    /*padding-right: 30px;*/
    padding: 15px 30px 15px 10px;
  }
  /* #faq .accordion-area .toggle li a:after {
    content: "〉";
    vertical-align: middle;
    display: inline-block;
    position: absolute;
    right: 0;
    top: 15px;
  } */
  
  /* ------------------------
   #section03
------------------------ */
  #faq #section03 {
    margin: 0 auto 8px;
    padding-bottom: 40px;
  }
  /* --- #store-service-area --- */
  #faq #store-service-area {
    width: 90%; 
    padding: 10px;
  }
  #faq #store-service-area p {
  text-align: left;
  }
  
  /* ------------------------
   #page-top 
------------------------ */
#page-top {
  right: 2%;
}

  
}
/* ========== /SP ========== */