/* 固定ヘッダーにする */
.ec-layoutRole__header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    background-color: #fff !important;
}
.ec-layoutRole__contents {
    padding-top: 150px !important;
}
/* body全体にも余白を追加 */
body {
    padding-top: 250px !important;
}

/* PC画面ではハンバーガーメニューを非表示 */
@media (min-width: 768px) {
    .ec-headerRole__navSP {
        display: none !important;
    }
}

/* スマホ用の調整 */
@media (max-width: 767px) {
    .ec-layoutRole__contents {
        padding-top: 100px !important;
    }
    
    body {
        padding-top: 100px !important;
    }
    
    /* ハンバーガーアイコンを大きく */
    .ec-headerNavSP .fa-bars {
        font-size: 32px !important;
        color: #333 !important;
        display: block !important;
    }
    
    /* アイコンの下に文字を表示（疑似要素の代わりにアイコン自体の下に） */
    .ec-headerNavSP i.fa-bars {
        position: relative !important;
        padding-bottom: 20px !important;
    }
    
    .ec-headerNavSP i.fa-bars::after {
        content: "メニュー" !important;
        position: absolute !important;
        bottom: 7px !important;  /* 7px上に移動（bottomの値を大きく） */
        left: calc(50% + 6px) !important;  /* 右へ6px移動 */
        transform: translateX(-50%) !important;
        font-size: 11px !important;
        color: #333 !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
        font-style: normal !important;
    }
}