/* ------------------------------
FAQ PAGE（よくあるFAQ）
------------------------------ */
.faq {
  & .link__list2 {
    margin-top: 40px;

    & ul {
      justify-content: flex-start;
      gap: 20px 40px;

      & li {
        &+li {
          margin: 0;
        }

        & a {
          color: var(--blue01);

          &::before {
            background: url(../img/common/icon_arrow_right_blue.svg) center center / 100% 100% no-repeat;
          }

          &.outlink {
            &::after {
              background: url(../img/common/icon_outlink_blue.svg) center center / 100% 100% no-repeat;
            }
          }
        }
      }
    }

    &.local__navi {
      margin-bottom: 72px;
      margin-top: 0;

      & ul {
        background: var(--blue03);
        padding: 24px;
      }
    }
  }

  & .section__box {
    scroll-margin: 80px;

    &+.section__box {
      margin-top: 80px;
    }
  }

  & .tel__box {
    & .box {
      padding: 0;
      overflow: hidden;
      margin-top: 40px;

      & h4 {
        background: var(--blue01);
        color: var(--white01);
        font-size: var(--px16);
        display: flex;
        height: 71px;
        justify-content: center;
        align-items: center;
      }

      & p {
        padding: 24px;
        margin: 0;
        text-align: center;
      }
    }
  }

  & .faq__list {
    margin-top: 40px;
  }

  & .search__box {
    padding: 30px;
    background: var(--blue03);
    margin-top: 40px;

    & .form__box {
      border: none;
      padding: 0;
      margin-top: 30px;
      margin-left: 0;
      margin-right: 0;

      & legend {
        padding: 0;
        margin-bottom: 16px;
      }

      & label {
        display: block;
        margin-bottom: 16px;
      }

      & select {
        min-width: 430px;
        background: var(--white01);
        border: none;
        display: flex;
        height: 43px;
        padding: 0.5em 1em;
      }

      & .input__box {
        & input {
          flex-basis: calc(100% - 140px);
          display: flex;
          flex-wrap: wrap;
          padding: 0.5em 1em;
          font-size: var(--px16);
          height: 43px;
          border: none;
        }

        & button {
          flex-basis: 130px;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          justify-content: center;
          background: var(--blue01);
          color: var(--white01);
          height: 43px;
        }
      }
    }
  }
}
@media screen and ( max-width:810px ) {
  .faq {
    & .search__box {
      & .form__box {
        & .input__box {
          gap:16px;
          & input {
            flex-basis: 100%;
            max-width: 100%;
          }

          
        }
      }
    }
  }
}
.guide__dialog {
  & .content {
    & .img__box {
      & figure {
        & img {
          display: block; margin: 0 auto;
        }
      }
    }
  }
}

.ranking__list {
  & ul {
    gap:5px; justify-content: flex-start; list-style: none;
    & li {
      flex-basis: calc( ( 100% - 20px ) / 5 );  text-decoration: none; 
      & a {
        text-decoration: none; font-size: var(--px16); padding: 1em; font-weight: 700; color: var(--black01);background: var(--orange01);display: flex; flex-wrap: wrap; align-items: center; justify-content: center; 
        &:hover {
          background: var(--gray03); color: var(--white01);
        }
        &:focus {
          background: var(--gray03); color: var(--white01); outline: auto;
        }
      }
    }
  }
}
@media screen and (max-width:810px) {
  .ranking__list {
    & ul {
      gap:4px;
      & li {
        flex-basis: calc( ( 100% - 4px ) / 2 );
      }
    }
  }
}


.category__list {
  margin-top: 40px;

  & ul {
    list-style: none;
    gap: 30px;

    & li {
      flex-basis: calc((100% - 30px) / 2);
      display: flex;
      flex-wrap: wrap;
      padding: 16px 22px;
      align-items: flex-start;
      background: var(--gray01);
      justify-content: flex-start;
      align-self: flex-start;
      border-radius: 8px;
      overflow: hidden;
      position: relative;
      & a {
        text-decoration: none; display: block; flex-basis: 100%; position: relative;
        padding: 0 2em 0 1.5em;
        &:before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%) translateX(50%);
          display: inline-block;
          width: 0.5625em;
          height: 1.125em;
          background: url(../img/common/icon_arrow_right_blue.svg) center center / 100% 100% no-repeat;
        }
        &:hover {
          color: var(--blue01);
        }
      }
      & button {
        width: 31px; height: 31px; right: 16px; top:16px; position: absolute; display: block; border-radius: 50%; background: var(--blue01); cursor: pointer;
        &:after {
          content: ''; width: 17px; height: 17px; right:7px; top:50%; transform: translateY(-50%); position: absolute; display: block; clip-path: polygon( 8px 0 , 8px 8px , 0 8px, 0 9px , 8px 9px , 8px 17px, 9px 17px, 9px 9px, 17px 9px , 17px 8px, 9px 8px, 9px 0px ); background: var(--white01);
        }
        &.active {
          &:after {
            clip-path: polygon( 0px 8px , 0px 9px , 17px 9px , 17px 8px);
          }
        }
        &:hover {
          background: var(--gray04);
        }
        &:focus {
          background: var(--gray04); outline: auto;
        }
      }
      & ul {
        display: none; margin: 16px 0 0 24px; overflow: visible;
        &.active {
          display: block;
        }
        & li {
          display: block; width: 100%; padding: 8px 0;overflow: visible;
          & a {
            padding: 0 0 0 1.5em;
          }
        }
      }
    }
  }
}

@media screen and (max-width:810px) {
  .category__list {
    & ul {
      gap: 20px;

      & li {
        flex-basis: 100%;
        & ul {
          & li {

          }
        }
      }
    }
  }
}