@charset "UTF-8";
/* color
=================================================================== */
/* common
=================================================================== */
/* layout
=================================================================== */
/* background
=================================================================== */
/* flex
=================================================================== */
/* animation delay
=================================================================== */
/* 3d
=================================================================== */
/* font
=================================================================== */
/* vw
=================================================================== */
/* form
=================================================================== */
/* vw
================================================*/
/* vh
================================================*/
/* ========================================================================================================= service TOP */
/*ーーーーーーーーーーーーーーーーーーーー grid*/
.faq .faq__list > li:before {
  z-index: 2; }
.faq .faq__list > li:after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  height: 1px;
  top: auto;
  bottom: 0;
  left: auto;
  right: 0;
  background-color: #000;
  background-color: var(--colorB);
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.5s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  　-moz-transition-duration: 0.5s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  width: 0;
  z-index: 3; }
.faq .faq__list > li > dl {
  position: relative;
  z-index: 1; }
  .faq .faq__list > li > dl > dt, .faq .faq__list > li > dl > dd {
    position: relative;
    font-size: 17px; }
    .faq .faq__list > li > dl > dt:before, .faq .faq__list > li > dl > dd:before {
      content: "";
      position: absolute;
      width: auto;
      height: auto;
      top: 35px;
      left: 0;
      font-size: 26px;
      line-height: 1;
      font-family: 'Heebo', sans-serif;
      font-weight: 500;
      letter-spacing: 0.05em; }
  .faq .faq__list > li > dl > dt {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding: 30px 50px 30px 55px;
    cursor: pointer; }
    .faq .faq__list > li > dl > dt:before {
      content: "Q."; }
    .faq .faq__list > li > dl > dt:after {
      content: " ";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      height: 1px;
      top: auto;
      bottom: -1px;
      border-top: 1px dotted #000;
      border-top: 1px dotted var(--colorB);
      opacity: 0;
      z-index: 2; }
    .faq .faq__list > li > dl > dt .faq__list--category {
      width: 160px;
      align-self: self-start; }
    .faq .faq__list > li > dl > dt > p {
      width: calc(100% - 160px); }
    .faq .faq__list > li > dl > dt .faq__list--arrow {
      position: absolute;
      top: 33px;
      right: 10px;
      width: 8px;
      height: 8px;
      border: 1px solid;
      border-color: transparent transparent #000 #000;
      border-color: transparent transparent var(--colorB) var(--colorB);
      transform: rotate(-45deg);
      -webkit-transform: rotate(-45deg);
      transition-duration: 0.5s;
      transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
      -ms-transition-duration: 0.5s;
      -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
      -webkit-transition-duration: 0.5s;
      -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
      　-moz-transition-duration: 0.5s;
      -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); }
  .faq .faq__list > li > dl > dd {
    display: none;
    padding: 30px 30px 30px 85px; }
    .faq .faq__list > li > dl > dd:before {
      content: "A.";
      left: 35px; }
.faq .faq__list > li:hover:after, .faq .faq__list > li:active:after {
  width: 100%;
  right: auto;
  left: 0; }
.faq .faq__list > li.selected > dl > dt .faq__list--arrow {
  top: 40px;
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg); }
.faq .faq__list > li.selected > dl > dt:after {
  opacity: .2; }
.faq .joinus {
  margin-bottom: 0; }