details {
      background-color: #f9f9f9;
      border-radius: 8px;
      margin-bottom: 30px;
      margin-top: -10px;
      border: 1px solid #e0e0e0;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
      overflow: hidden; 
      transition: all 0.3s ease;
}
    
    details[open] {
      background-color: #ffffff;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    
    summary {
      padding: 15px 20px;
      cursor: pointer;
      font-weight: 600;
      position: relative;
      outline: none;
      list-style: none;
      display: flex;
      align-items: center;
      transition: background-color 0.3s ease;
    }
    
    summary::-webkit-details-marker {
      display: none;
    }
    
    summary::after {
      content: '+';
      position: absolute;
      right: 20px;
      font-size: 1.2em;
      transition: transform 0.3s ease;
    }
    
    details[open] summary::after {
      content: '−';
    }
    
    details p {
      padding: 0 20px 15px;
      margin: 0 !important;
    }
    
    details:hover {
      border-color: #ccc;
    }
    h4 {font-weight: 700 !important;}
    @media (min-width: 320px) and (max-width: 767px) {
      .sp_ul_mini li {
        font-size: 0.75em !important;
      }
      .content-section p {
        font-size: 0.75em !important;
      }
      summary {
        font-size: 0.75em !important;
      }
      details p {
        font-size: 0.75em !important;
      }
      h4 {
        font-size: .85em !important;}
    }

    .no-btn {
        background-color: unset !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        font-size: 1em !important;
        color: #000 !important;
        font-weight: 400 !important;
        text-decoration: underline !important;
        display: unset !important;
    }
    .no-btn:hover {
        text-decoration: none !important;
    }