@media screen and (max-width: 450px){
  .faq_pc {
    display: none;
  }
  .faq_top {
    padding-top: 19vw;
  }
  .faq_sp {
    display: flex;
    margin-bottom: 10%;
    flex-direction: column;
    align-items: center;
    font-size: 2.3vw;
  }
  .faq_tab {
    width: 100%;
    position: sticky;
    top: 0%;
    z-index: 2;
    transition: top 0.8s ease;
  }
  .tabs {
    display: flex;
    justify-content: center;
  }
  .tabs li {
    text-align: center;
    align-content: center;
  }
  /*
  * @parts：FAQタブ
  * @design：タブのデザイン
  */
  .faq_tab ul li {
      list-style-type: none;
      background: rgb(52, 52, 52);
      margin: 0;
      color: #fff;
      font-weight: 50;
      cursor: pointer;
      border: 1px solid #ccc;
      width: 30%;
      height: 7vh;
  }
  /*
  * @parts：FAQタブ
  * @design：選択中のタブのデザイン
  */
  .faq_sp ul li.active {
      color: rgb(52, 52, 52);
      background: #fff;
  }
  /*
  * @parts：FAQメイン
  * @design：メインのデザイン
  */
  .panel {
    display:none;
    background: white;
    color: black;
    padding: 1.5em;
    border: 1px solid #ccc;
  }
  .faq_sp .panel.active {
  display:block;
  width: 100%;
  }
  .panels {
    margin: 0 5%;
  }
  /* .faq_sp_content {
    display: flex;
    justify-content: center;
  } */
  .faq_faq_1 {
    width: 100%;
  }
  .faq_faq_title {
    font-size: 5vw;
    padding: 5%;
  }
  .faq {
    margin-bottom: 5px;
    border-bottom: 2px solid #d6dde3;
  }
  .faq summary {
    display: flex;
    align-items: center;
    position: relative;
    padding: 1em 2em 1em 3em;
    color: #333333;
    font-weight: 600;
    cursor: pointer;
  }
  .faq summary::before,
  .faq p::before {
    position: absolute;
    left: 1em;
    font-weight: 600;
  }
  .faq summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-bottom: 3px solid #333333b3;
    border-right: 3px solid #333333b3;
    content: '';
    transition: transform .5s;
  }
  .faq[open] summary::after {
    transform: rotate(225deg);
  }
  .faq p {
    position: relative;
    transform: translateY(-10px);
    margin: 0;
    color: #333;
    transition: transform .5s, opacity .5s;
  }
  .faq[open] p {
    transform: none;
    opacity: 1;
  }
  .faq_f {
    margin-right: 5vw;
  }
  .faq_a {
    display: flex;
    padding: .3em 3em 1.5em;
  }
  .faq_link {
    padding: 0.3em 7.5em 1.5em;
    text-decoration: underline;
  }

  .faq_link div{
    margin-top: 4px;
    margin-left: 6px;
  }
  .faq_img2 {
    margin-bottom: 10px;
    width: auto;
  }
  .faq_space {
    height: 5vh;
  }
}
@media screen and (min-width: 451px){
  .faq_sp {
    display: none;
  }
  .faq_top {
    padding-top: 6vw;
  }
  .faq_pc {
    margin-bottom: 10%;
  }
  /*
   * @parts：FAQ基本
   * @design：左右のスペース
  */
  .row {
    margin: 0 8.3% 0 8.3%;
  }
  /*
   * @parts：FAQ基本
   * @design：タブとメインを横並び
  */
  .tab-panels {
    display: flex;
    justify-content: center;
  }
  .faq_tab {
    width: 20%;
    position: relative;
  }
  .faq_tabs {
    position: sticky;
    top: 0;
    transition: top 0.8s ease;
  }
  /*
   * @parts：FAQタブ
   * @design：タブのデザイン
  */
  .faq_tab ul li {
    list-style-type: none;
    background: rgb(52, 52, 52);
    margin: 0;
    padding: .8vw 1.5vw;
    color: #fff;
    font-weight: 50;
    cursor: pointer;
    border: 1px solid #fff;
    font-size: 1.3vw;
  }
  /*
   * @parts：FAQタブ
   * @design：タブホバー時文字カラー変化
  */
  .tab-panels li:hover {
    color: rgb(210, 210, 210);
  }
  /*
   * @parts：FAQタブ
   * @design：選択中のタブのデザイン
  */
  .tab-panels ul li.active {
    color: rgb(52, 52, 52);
    background: #fff;
    border-color: #ccc;
    border-right: none;
    width: 101%;
  }
  /*
   * @parts：FAQメイン
   * @design：メインのデザイン
  */
  .panel_pc {
    display:none;
    background: white;
    color: black;
    padding: 1.5em;
    border-radius: 0 .8em .8em .8em;
    border: 1px solid #cccccc;
  }
  .tab-panels .panel_pc.active {
    display:block;
    width: 100%;
    font-size: 1.3vw;
  }
  .panels_pc {
    width: 70%;
  }
  .faq_faq {
    display: flex;
    justify-content: center;
  }
  .faq_faq_1 {
    width: 100%;
  }
  .faq {
    margin-bottom: 5px;
    border-bottom: 2px solid #d6dde3;
  }
  .faq summary {
    display: flex;
    align-items: center;
    position: relative;
    padding: 1em 2em 1em 3em;
    color: #333333;
    font-weight: 600;
    cursor: pointer;
  }
  .faq summary::before,
  .faq p::before {
    position: absolute;
    left: 1em;
    font-weight: 600;
    font-size: 1.3em;
  }
  .faq summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-bottom: 3px solid #333333b3;
    border-right: 3px solid #333333b3;
    content: '';
    transition: transform .5s;
  }
  .faq[open] summary::after {
    transform: rotate(225deg);
  }
  .faq p {
    position: relative;
    transform: translateY(-10px);
    margin: 0;
    color: #333;
    transition: transform .5s, opacity .5s;
  }
  .faq[open] p {
    transform: none;
    opacity: 1;
  }
  .faq_a {
    display: flex;
    padding: .3em 3em 1.5em;
  }
  .faq_f {
    margin-right: 2vw;
  }
  .faq_link {
    padding: 0.3em 6em 1.5em;
    text-decoration: underline;
  }
  .faq_link div {
    margin-top: 12px;
    margin-left: 6px;
  }
  .maru1 {
    border-top-left-radius: .8em;
  }
  .maru2 {
    border-bottom-left-radius: .8em;
  }
  .faq_img2 {
    margin-bottom: 10px;
    width: 9vw;
    height: auto;
  }
}