@charset "utf-8";

/* ============================================================
   Side Panel
   ============================================================ */
.side-panel {position:fixed; display:none; bottom:0; top:0; padding:0; background-color: var(--white); z-index:var(--z-modal-front); box-shadow:0px 10px 20px var(--gray); overflow-y:hidden; overflow-x:hidden;}
.side-panel .side-panel-container {position:relative; padding:0px 0px 20px;}
.side-panel iframe.side-panel-container {position:absolute; padding:0; margin:0; top:0; left:0; width:100%; height:100%; z-index:var(--z-below);}
.frame .side-panel {top:45px; background-color:var(--gray-850); padding:20px; box-shadow:none; overflow-y:hidden;}
.side-panel button.btn.btn-default {color: var(--white); background-color:var(--gray);}
.side-panel button.btn.btn-default:hover {background-color:var(--text-subtle);}
.side-panel button.btn-close {right:20px; top:20px; position:absolute;}
.side-panel.googleDoc button.btn-close {width:100px; height:100px; background:var(--gray-680); right:0px; top:0px; border-radius:0 !important; border: 25px solid var(--gray-250);}
.side-panel.googleDoc button.btn-close i::before, 
.side-panel.googleDoc button.btn-close i::after {background: var(--border-strong); left:13px;}
.side-panel.googleDoc button.btn-close:hover i::before,
.side-panel.googleDoc button.btn-close:hover i::after {background: var(--white);}
.side-panel.office button.btn-close {width:45px; height:45px; background: var(--white); right:50px; top:50px; border-radius:50% !important; border:4px solid var(--text); opacity:.2;}
.side-panel.office button.btn-close:hover {opacity:1;}
.side-panel.office button.btn-close i::before, 
.side-panel.office button.btn-close i::after {background:var(--text); left:6px;}
body.open.open-side-panel {overflow:hidden;}
.side-panel h3 {text-align:center; padding:40px 0 20px; width:100%; background:transparent; margin:0; border-bottom:0px solid var(--primary-medium);}
.side-panel h3 > b {border:0px solid; border-radius:20px; font-size:.85em; padding:0.5em 1.2em 0.4em 1.3em; letter-spacing:.1em;}
.side-panel [data-simplebar] {padding:5px 20px 0;}
.side-panel table[data-simplebar] {padding:5px 10px 0;}
.side-panel .action-panel .input-block {width:100%;}
.side-panel .action-panel .input-block input[type=text] {border:solid 1px var(--gray-thin); background: var(--white);}
.side-panel .action-panel .bootstrap-select .btn.dropdown-toggle {background-color: var(--white); border-color:var(--gray-thin);}
.side-panel .action-panel u {text-decoration:none; color:var(--gray-dark);}
.side-panel .action-panel u i::before {padding-right:5px;}
.side-panel .img {width:100%; margin-top:1em; aspect-ratio:4/3; background:var(--gray-thin) url(../images/bg_image_line.png) repeat;}
.side-panel .img figure {height:100%; width:100%; background-repeat:no-repeat; background-size:contain; background-position:center;}
.side-panel [mm-scrollbar] {overflow-y:auto; overflow-x:hidden; min-height:100px; padding:0 20px; height:calc(90vh);}

/* ============================================================
   追加：リサイザー（ドラッグで幅変更）
   ============================================================ */

/* 左端のドラッグハンドル */
.side-panel .side-panel-resizer {
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    cursor: ew-resize;
    z-index: 20;                  /* btn-close より下、コンテンツより上 */
    background: transparent;
    transition: background 0.15s ease;
    /* タッチ操作時の長押し選択を防止 */
    -webkit-user-select: none;
    user-select: none;
    touch-action: none;
}

/* ホバー時・ドラッグ中の見た目 */
.side-panel .side-panel-resizer:hover,
.side-panel.is-resizing .side-panel-resizer {
    background: var(--primary-medium, rgba(0, 120, 255, 0.25));
    opacity: 0.6;
}

/* ドラッグ中は transition を切る（カクつき防止） */
.side-panel.is-resizing {
    transition: none !important;
}

/* ドラッグ中はテキスト選択・カーソルを統一 */
body.side-panel-resizing,
body.side-panel-resizing * {
    -webkit-user-select: none !important;
    user-select: none !important;
    cursor: ew-resize !important;
}

/* ドラッグ中は iframe にイベントを取られないようにする */
body.side-panel-resizing iframe {
    pointer-events: none;
}

/* googleDoc / office の閉じるボタンが大きいので、リサイザーが重ならないよう調整 */
.side-panel.googleDoc .side-panel-resizer,
.side-panel.office .side-panel-resizer {
    z-index: 5;                   /* 大型 close ボタンより下に */
}