/*****************************************/
/********** Style Sheet for      *********/
/********** Core Competency      *********/
/********** Accordion Display (Pop-up) ***/



        #accordionPanel {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          top: 0;
          z-index: 20000;
          width: 95%;
          max-width: 1250px;
          padding: 3rem 2rem 2rem 2rem;
          background-color: white;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
          box-sizing: border-box;
          border-radius: 20px;
          border:2px solid white;
        
          /* ✅ 初期状態（非表示） */
          opacity: 0;
          visibility: hidden;
          pointer-events: none;
        
          /* ✅ フェードトランジション */
          transition: opacity 1.5s ease-out, visibility 1s ease-out;
        
          background-image:url('/src/images/nw_contents/corecompetency/cc-jingle.png'),url('/src/images/nw_contents/corecompetency/cc-bg6.png');
          background-size: 300px,100% 100%;
          background-repeat: no-repeat,no-repeat;
          background-position:top 15px center,center;
        
          max-height: 70vh;
          filter: brightness(1.0);
          overflow-y:hidden;
        }

        #accordionPanel.visible {
          opacity: 1;
          visibility: visible;
          pointer-events: auto;
        }

        /* ✅ 画面幅が992px以上のときだけ表示幅変更を適用させる */
        @media (min-width: 992px) {#accordionPanel {width: 70%;padding:1.5rem 2.5rem 1.5rem 2.5rem}}
        @media (min-width:300px) and (max-width:576px){
          #accordionPanel {
            width: 95%;padding:1.0rem;
            background-size: 250px,100% 100%;
          }

        }

        .openAccordionBtn{
          font-size:1.5rem;
          text-transform:none;
          padding-top:3px;
          padding-bottom:3px;
          line-height:1.0;
        }

        .accordion-close-btn {
          position: absolute;
          top: -3.5%;
          right: 0;
          font-size: 3rem;
          font-weight: bold;
          color: #000;
          background: none;
          border: none;
          cursor: pointer;
          z-index: 20001;
          -webkit-text-stroke: 2px #fff;
          text-stroke: 2px #fff;
        }

        .accordion-wrapper {
          width:100%;
          background:url('/src/images/nw_contents/corecompetency/cc-bg5.png') left/130% 200% no-repeat;
          box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;border-radius:30px;
          border:1px solid black;
          position: relative;
          z-index: 10;
          border:2px grey;
          padding-top: 0.5rem;
          padding-bottom: 0.5rem;
          z-index: 300;
        }
                    
        .main-headline {
            font-size: 1.8em;
            font-weight: 700;
            color: #1a1a1a;
            margin: 1.5rem 0 25px 0;
            line-height: 1.3;
            letter-spacing: -0.02em;
            border-bottom: 8px double #e74c3c;
            padding-bottom: 12px;
        }


        .briefer-body {
          max-height:calc(70vh - 3rem);
          height:auto;
          overflow-y:auto;
          padding-right: 5.5rem;
          padding-left: 2.5rem;
          scrollbar-gutter: stable;
          padding-top:10px;
          margin: 0;
          font-weight: 500;
          text-align: justify;
          font-size: 1.1rem;
          font-family: Georgia, 'Times New Roman', serif;
          line-height: 1;
          color: #333; /*black*/
        }

        .styled-briefer {
          font-size: 1.0rem;
          line-height: 1.7;
          color: #222;
          /*color: #fff !important;*/
        }
        
        .briefer-desc{ /* briefer-title と 説明文の縦隙間  */
          margin-top: -8px;
        }

        .briefer-title {
          color:#1a1a1a !important;/* midnightblue claude*/
          /* color: silver !important; */
          font-size: 1.4rem !important;
          font-weight:500;
          margin-top: 1.5rem;
          /*color: #0056b3;  claude*/
          padding-left: 0rem;
          line-height: 1.2;
          font-family: Arial, sans-serif;
        }
        
        .styled-briefer .highlight {
          color: #007bff;
          font-weight: bold;
        }
        
        .styled-briefer .danger {
          color: #d9534f;
          font-weight: bold;
        }
        
        .styled-briefer .box {
          background-color: #f8f9fa;
          border-left: 4px solid #28a745;
          padding: 1rem;
          margin-top: 1rem;
          font-weight: 500;
        }
        
        .close-btn {
          position: absolute;
          top: 10px;
          right: 15px;
          font-size: 1.2rem;
          font-weight: bold;
          color: #007bff;
          background: none;
          border: none;
        }