/* 
 * ページヘッダー共通コンポーネント
 * 最新情報、採用情報、会社情報ページで共通して使用
 */

/* ページヘッダーコンテナ */
.page-header {
    position: relative;
    width: 100%;
    height: 60vh; /* ビューポート高さの60%に設定（トップページ以外用） */
    min-height: 300px; /* 最小高さを設定 */
    overflow: hidden;
}

/* ページヘッダー共通クラス - 全ページのヘッダーに適用可能 */
.standard-page-header {
    height: 60vh; /* ビューポート高さの60%に統一 */
    min-height: 300px;
}

/* 背景動画コンテナ */
.page-header-bg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 0; /* -1から0に変更 */
    overflow: hidden;
}

/* 背景動画・背景画像共通スタイル */
.page-header-video,
.page-header-image {
    position: absolute;
    height: 100%; /* 縦幅をページヘッダー高さの100%に合わせる */
    width: auto; /* 横幅は縦横比率を維持するため自動調整 */
    min-width: 100%; /* 最低でも横幅いっぱいに（横は見切れてもOK） */
    top: 0;
    left: 50%;
    transform: translateX(-50%); /* 中央揃え */
    /* フィルターとOpacityはheeader.phpで動的に設定するため削除 */
}

/* タイトルコンテナ */
.page-header-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10; /* z-indexを1から10に引き上げ */
    background-color: rgba(255, 255, 255, 0);
}

/* ロゴ */
.page-header-logo {
    width: 240px;
    max-width: 240px;
    margin-bottom: 20px;
    filter: drop-shadow(0 0 20px white) drop-shadow(0 0 30px white);
}

/* タイトル */
.page-header-title {
    font-family: YuMincho, '游明朝体', 'YuMincho', '游明朝', 'Yu Mincho', 'Hiragino Mincho ProN', 'ヒラギノ明朝 Pro W3';
    font-size: 36px;
    color: rgb(164, 11, 94);
    text-align: center;
    margin: 20px 0 0;
    text-shadow: 0 0 10px white, 0 0 20px white;
}

/* 説明文 */
.page-header-description {
    font-size: 18pt;
    line-height: 1.8;
    color: #333;
    text-align: center;
    margin-top: 20px;
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.8), 0 0 4px rgba(255, 255, 255, 0.6);
    font-weight: bold;
}

/* アニメーション */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fadeInUp {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0;
}

.delay-100 {
    animation-delay: 0.1s;
}

.delay-300 {
    animation-delay: 0.3s;
}

.delay-500 {
    animation-delay: 0.5s;
}