/*****************************************/
/*********** Style Sheet for  ************/
/*********** Page Title Display **********/
/*********** Responsive setups  **********/
/*****************************************/

        .page-title {
          padding-left: 0 !important;
          padding-right: 0 !important;
          padding-top: 0.5rem !important;
          font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif !important;
          color: #000000 !important;
          font-size: calc(20px + (80 - 20) * (100vw - 280px)/1500) !important;
          font-weight: 700 !important;
          text-align: center !important;
          text-shadow: 2px 2px 0 #fff,-2px 2px 0 #fff,2px -2px 0 #fff,-2px -2px 0 #fff, 4px 4px 4px black !important;
          letter-spacing: 0px !important;
          line-height: 1.1 !important;
          margin: 0 !important;
        }

        .title-banner {
          background-image: url('/src/images/nw_contents/utility/titlebannerblue04.png');
          background-size: 100% 120% !important;
          background-repeat: no-repeat;
          background-position: right !important;
          box-shadow: 2px 2px 2px black;
          filter: brightness(1.0);

          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          text-align: center;
          width: 90%;
          max-width: 1100px;
          margin: 1rem auto;
          padding: 0.1rem 0.5rem 1.2rem 0.5rem !important;
          height: auto;
          min-height: 60px;
          position: relative; /* ← sub-message を重ねるために追加 */
        }

        .title-text .page-title {
          margin: 0;
          padding: 0;
          font-size: 2.5rem;
          color: #000;
          text-shadow: 2px 2px 4px white;
        }

        .sub-message {
          position: absolute !important;
          bottom: -1.4rem !important;
          left: 50% !important;
          transform: translateX(-50%) !important;
          z-index: 10;
          width: 75% !important; /* 横幅を広げる */
          display: flex;
          justify-content: center;          
        }

        .sub-message p {
          width: 100%;
          text-align: center;
          background-color: rgba(255, 255, 255, 0.9);
          color: black;
          font-weight: bold;
          font-size: 1.2rem;
          padding: 0.3rem 0.5rem;
          margin: 0;
          /* border: 0.5px solid black; */
          border-radius: 0.4rem;
          box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
        }

        /* スマホ対応 */
        /* === 小画面：412px など、スマホ最小クラス (〜484px) === */
        @media (max-width: 350px) {
          .sub-message p {
            font-size: 0.35rem;
          }  
  
        }  

        @media (max-width: 484px) {
          .title-banner {
            padding: 0.1rem 0.5rem 0.2rem 0.5rem !important;
            min-height: 50px !important;
          }

          .page-title {
            font-size: calc(24px + (50 - 16) * (100vw - 280px) / 1200) !important;
            padding-top: 0.5rem !important;
          }

          .title-text .page-title{
            padding: 0.5rem;
          }

          .sub-message {
            position: absolute !important;
            bottom: -0.6rem !important;
            left: 50% !important;
            transform: translateX(-50%) !important;
            z-index: 10;
            width: 90% !important;
            display: flex;
            justify-content: center;
          }

          .sub-message p {
            width: 100%;
            font-size: 0.60rem;
            padding: 0.25rem 0.5rem;
            text-align: center;
          }
        }

        /* === 中画面：485px〜767px === */
        @media (min-width: 485px) and (max-width: 767px) {
          .title-banner {
            padding: 0.2rem 0.8rem 0.3rem 0.8rem !important;
            min-height: 60px !important;
            width: 80%;
          }
          .title-text .page-title{
            padding: 0.5rem;
          }


          .page-title {
            font-size: calc(18px + (65 - 18) * (100vw - 280px) / 1400) !important;
            /*padding-top: 1.2rem !important;*/
          }

          .sub-message {
            position: absolute !important;
            bottom: -1.0rem !important;
            left: 50% !important;
            transform: translateX(-50%) !important;
            z-index: 10;
          }

          .sub-message p {
            font-size: 0.7rem !important;
            padding: 0.15rem 0.6rem !important;
            margin: 0 !important;
          }
        }