body {
  background-color: #00C46F;
  position: relative; }

/************************/
.faq_box {
  width: 100%;
  max-width: 302px;
  padding: 0 0 110px;
  position: relative;
  margin: 0 auto;
  /* &:before{
     position: absolute;
     content: "";
     display: block;
     width: 70px;
     height: 2px;
     background-color: $main;
     top:auto;
     bottom: 0;
     left: 50%;
     transform: translate(-50%,0%);
   }*/ }
  .faq_box h2 {
    font: 2rem/1.8em "Noto Sans JP", sans-serif;
    font-weight: 500;
    margin: 0 0 10px; }
  .faq_box .faq_cat {
    margin-bottom: 50px; }
    .faq_box .faq_cat:last-of-type {
      margin-bottom: 0; }

.faq_item {
  margin: 0 auto 25px;
  background-color: #fff;
  border: 1px solid #707070;
  border-radius: 15px;
  padding: 15px 15px 5px;
  position: relative; }
  .faq_item:before, .faq_item:after {
    position: absolute;
    content: "";
    display: block;
    width: 47px;
    height: 46px;
    top: 15px;
    left: 15px;
    transition: .3s; }
  .faq_item:before {
    background: url("../images/faq/icon_q.svg") top 0 left 0 no-repeat;
    background-size: 47px 46px; }
  .faq_item:after {
    opacity: 0;
    background: url("../images/faq/icon_q_orange.svg") top 0 left 0 no-repeat;
    background-size: 47px 46px; }
  .faq_item h3 {
    padding: 13px 44px 20px 18px;
    font: 1.4rem/1.8em "Noto Sans JP", sans-serif;
    font-weight: 500;
    text-align: justify;
    text-justify: inter-ideograph;
    position: relative;
    z-index: 1; }
    .faq_item h3:before {
      position: absolute;
      content: "+";
      font: 3rem/1em "Noto Sans JP", sans-serif;
      font-weight: 500;
      color: #00C46F;
      top: 46%;
      transform: translateY(-50%);
      right: 10px;
      transition: 0.3s; }
    .faq_item h3:after {
      position: absolute;
      content: "";
      background-color: #00C46F;
      width: 15px;
      height: 2.5px;
      display: block;
      top: 48%;
      transform: translateY(-50%);
      right: 11px;
      opacity: 0;
      transition: 0.3s; }
  .faq_item .answer {
    height: 0;
    overflow: hidden;
    transition: height .4s ease; }
  .faq_item .inner {
    border-top: 1px solid transparent;
    position: relative;
    z-index: 1;
    border-top-color: #A8A8A8;
    padding: 20px 18px 20px; }
    .faq_item .inner:before {
      background: url("../images/faq/icon_a.svg") center center no-repeat;
      background-size: contain;
      width: 42px;
      height: 43px;
      position: absolute;
      content: "";
      left: 0;
      top: 8px;
      z-index: -1; }
    .faq_item .inner a {
      color: #00C46F !important;
      text-decoration: underline; }
  .faq_item p {
    font: 1.4rem/1.8em "Noto Sans JP", sans-serif;
    font-weight: 500;
    text-align: justify;
    text-justify: inter-ideograph;
    position: relative;
    position: relative;
    z-index: 1;
    margin-bottom: 15px; }
    .faq_item p:last-of-type {
      margin-bottom: 0; }
  .faq_item:last-of-type {
    margin-bottom: 0; }
  .faq_item.open:before {
    opacity: 0; }
  .faq_item.open:after {
    opacity: 1; }
  .faq_item.open h3:before {
    opacity: 0; }
  .faq_item.open h3:after {
    opacity: 1; }

@media (hover: hover) {
  .faq_item h3:hover {
    cursor: pointer !important;
    color: #00C46F; } }