body {

  .is-sp {
    display: none;
  }
#accordion_area {
  display: inline-block;
  width: 100%;
  margin-top: 60px;
  summary {
    text-align: center;
    font-size: 1.75rem;
    font-weight: bold;
    padding: 60px 0;
    background: #eeeeee;
    position: relative;
    transition: 0.1s ease-in-out;
    #accordion_items {
      display: inline-block;
      width: 100%;
      overflow: hidden;
      .content_inner {
         /* padding: 24px 48px; */
      }
    }
    .click_icon {
      transform-origin: center center;
      position: absolute;
      display: block;
      width: 50px;
      height: 50px;
      border: 1px solid #333; /* 枠の調整 */
      border-radius: 50%;  /* 丸みの度合い */
      background: #eeeeee; /* ボタンの背景色 */
      top: 50%;
      transform: translateY(-50%) translateX(-50%) rotate(45deg);
      -webkit-transform: translateY(-50%) translateX(-50%) rotate(45deg);
      right: 5%;
      transition: 0.2s ease-in-out;
      &:hover {
        opacity: 0.8;
      }
    }
    .click_icon::before, .click_icon::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 3px; /* 棒の幅（太さ） */
      height: 25px; /* 棒の高さ */
      background: #333; /* バツ印の色 */
      transition: 0.2s ease-in-out;
    }
    .click_icon::before {
      transform: translateY(-50%) translateX(-50%) rotate(45deg);
    }
    
    .click_icon::after {
      transform: translateY(-50%) translateX(-50%) rotate(-45deg);
    }
    &:hover {
      opacity: 0.75;
    }
  }
  &.is-opened {
    summary {
      .click_icon {
        transform-origin: center center;
        transform: translateY(-50%) translateX(-50%) rotate(-135deg);
      }
      .click_icon::after {
      opacity : 0;
      }
    }
  }

}

}



@media screen and (max-width: 768px) {

  body {
    .is-sp {
      display: block;
    }
    #accordion_area {
      margin-top: 60px;
      summary {
        font-size: 1.75rem;
        padding-bottom: 74px;
        #accordion_items {
          .content_inner {
          }
        }
        .click_icon {
          width: 36px;
          height: 36px;
          border: 2px solid #333; /* 枠の調整 */
          top: 50%;
          transform: translateY(-50%) translateX(-50%) rotate(45deg);
          -webkit-transform: translateY(-50%) translateX(-50%) rotate(45deg);
          right: 5%;
          top: auto;
          left: 50%;
          bottom: 2px;
          &:hover {
          }
        }
        .click_icon::before, .click_icon::after {
          width: 3px; /* 棒の幅（太さ） */
          height: 18px; /* 棒の高さ */
        }
        .click_icon::before {
        }
        
        .click_icon::after {
        }
        &:hover {
        }
      }
      &.is-opened {
        summary {
          .click_icon {
          }
          .click_icon::after {
          }
        }
      }

    }
  }

}