/* fullscreen.css - index.html専用 */
@charset "UTF-8";

/* ================================================= */
/* 1. ベースリセット：フルスクリーンを強制 */
/* ================================================= */
/* 他のCSSによる影響を排除し、画面いっぱいに広げる設定を再確認 */
html, body, #homepage, #hpb-container, #hpb-inner, #hpb-wrapper {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
}

/* HPBの標準ヘッダー・ナビを非表示 */
#hpb-header, #hpb-nav {
    display: none !important; 
    visibility: hidden !important;
}

/* ================================================= */
/* 2. スライドショー (背景固定) */
/* ================================================= */
#fullscreen-slider {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 1 !important; 
    overflow: hidden !important;
}

/* スライド画像コンテナ（#slides）の修正（重ね合わせの基準） */
#slides {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    /* z-index: 5 !important; (sliderより高ければOK) */
}

/* スライド画像自体の設定：重ね順、透明度、フェードアニメーション */
#slides .slide-image {
    position: absolute !important; /* 絶対位置で重ねる */
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; 
    
    /* 💥 これがないとアニメーションしません 💥 */
    opacity: 0 !important; /* 非アクティブな画像を非表示 */
    transition: opacity 1.5s ease-in-out !important; /* フェード時間 */
    z-index: 1 !important; /* 非アクティブな画像は背面 */
}

/* アクティブな画像のみ表示 (JavaScriptがこのクラスを切り替えます) */
#slides .slide-image.active {
    opacity: 1 !important;
    z-index: 2 !important; /* アクティブな画像は前面 */
}

/* ================================================= */
/* 3. KOKKOロゴとブランドロゴの固定ヘッダー */
/* ================================================= */
#site-header {
    position: fixed !important; 
    top: 20px !important;
    left: 20px !important;
    width: auto !important;
    z-index: 9999 !important; /* 最前面 */
    padding: 0 !important; 
    box-sizing: border-box !important;
    text-align: left !important; /* 要素内のインラインコンテンツを左寄せ */
    display: block !important;
    visibility: visible !important;
    background-color: #ffffff00 !important; /* 必要なら背景を透過 */
}

/* KOKKOロゴ画像のスタイル */
#company-logo {
    height: 60px !important; 
    margin: 0 0 15px 0 !important; /* 修正: 左寄せマージン */
    display: block !important;
}

/* ブランドロゴコンテナのスタイル */
#brand-logos-container {
    display: block !important; /* 修正: flex (横並び) を解除し、縦並びを強制 */
    width: auto !important;
    text-align: left !important; 
}

/* 各ブランドロゴ画像のサイズを調整 */
.brand-logo-img {
    height: 140px !important; /* 現在より小さい希望の高さに変更 (例: 30px) */
    width: auto !important;  /* 幅は高さに合わせて自動調整 */
}

/* ブランドロゴのリンク要素（brand-logo-link）も縦に並ぶように */
.brand-logo-link {
    display: block !important;
    margin-bottom: 5px !important; /* ロゴ間の隙間 */
}

/* ... 他のブランドロゴのスタイルもここに含めます ... */