/* ------------------------------------- */
/* Offcanvas 基本スタイル */
/* ------------------------------------- */

/* メニュー本体 (#offcanvas) */
.js-offcanvas {
    /* 画面の端に固定 */
    position: fixed;
    top: 0;
    /* モバイルで見やすい幅を設定 */
    width: 300px; 
    height: 100%;
    z-index: 9999; /* 最前面に表示 */
    overflow-y: auto; /* メニューが長い場合にスクロール可能にする */
    background-color: #fff; /* メニューの背景色 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    
    /* 初期状態は画面左外に配置 */
    transform: translateX(-100%);
    /* スライドアニメーション */
    transition: transform 0.3s ease-in-out;
}

/* メニューが開いた状態 (is-activeクラスが追加された時) */
.js-offcanvas.is-active {
    transform: translateX(0); /* 画面内に移動 */
}

/* ------------------------------------- */
/* Body スクロール固定 */
/* ------------------------------------- */

/* bodyにこのクラスが追加されたら、背景のスクロールを固定し、メニューの影（オーバーレイ）を再現 */
body.acms-offcanvas-open {
    overflow: hidden; /* 背景のスクロールを禁止 */
}

/* オーバーレイ/背景の暗転 (任意: 必要に応じて追加) */
body.acms-offcanvas-open::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* 半透明の黒で背景を暗くする */
    z-index: 999; /* メニュー本体(1000)のすぐ下に配置 */
}

.acms-admin-icon-tel:before {
    content: "";
}

.c-icon-phone {
    width: 20px;
}