/* ==========================================
   1. 全体を囲む箱（バナーエリア）
========================================== */
.page-title-area {
    position: relative;
    width: 100%;
    
    /* 【変更】高さを固定(250px)から、画面幅に合わせて動的に変化させる */
    /* スマホでは150px、PCでは画面幅の20%、4Kなど大画面では最大400pxになります */
    height: clamp(150px, 20vw, 400px);
    
    display: flex;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
}


/* ==========================================
   2. 背景として扱う画像の設定（変更なし・完璧です）
========================================== */
.page-title-bg {
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    z-index: -1; 
    filter: brightness(0.7); 
}


/* ==========================================
   3. 上に乗せる文字(h1)の設定
========================================== */
.page-title-area h1 {
    /* 【微調整】スマホ画面(幅375px等)だと最小値50pxの余白は広すぎるため、20pxに下げて安全マージンを取りました */
    margin-left: clamp(20px, 5vw, 100px);
    
    color: #ffffff; 
    
    /* 【微調整】スマホ画面で最小値40pxだと文字がはみ出す危険があるため、28pxまで縮むように下げました */
    font-size: clamp(28px, 4vw, 50px);
    
    font-weight: bold;
    letter-spacing: 2px;

    text-shadow:    2px 2px 10px rgba(0, 0, 0, 0.8),
                     0 0 15px rgba(79, 174, 234, 1.0);
}