@charset "utf-8";
/* CSS Document */



/* ========================================================
   画面全体の左側の縦帯　PC表示（画面幅が768px以上）のときだけ適用
   ======================================================== */
@media screen and (min-width: 768px) {

    /* 画面全体の左側の縦帯 */
    body::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 50px;
        height: 100vh;
        background: #3A75C4; /* もっと明るい青色に変更（お好みで変更可能） */
        z-index: 9999;
    }

    /* 帯の分だけサイト全体を右へ */
    #cms_contents_area {
        margin-left: 50px;
    }

}


/* ヘッダーを画面上部に固定する場合 */
.cparts-header-block {
   position: fixed;
   top: 0; 
   left: 50px; /* 左の縦帯の幅(50px)の分だけ右にずらす */
   width: calc(100% - 50px); /* 画面幅から帯の分を引く */
   z-index: 9998; /* 縦帯（9999）より下、コンテンツより上に調整 */

/* ここを追加 */
   background-color: #fff !important;
   overflow: hidden;
   backface-visibility: hidden;
   transform: translateZ(0);

}  


/* TOP画面の画像を完全に透明化する */
 .siteblock-upper .dec-bg--primary, .siteblock-upper .dec-bg-pe--primary::before,.siteblock-upper .dec-bg-pe--primary::after {
    background-color: transparent !important; 
    color: #fff;
} 


/* TOP画像の鮮明化②。写真の上の半透明フィルターをなくして鮮明にする場合 */
.siteblock-upper .dec-bg--primary {
    background-color: transparent !important;
    opacity: 1 !important; /* 不透明度を最大（くっきり）にする */
} 


/* ヘッダー部の背景を白色にする */
.siteblock-header {
    background-color: #ffffff; 
    color: #333;
}