/* ---------------------------------------------------------
   c-modal-sp.css: スマホ用（ボトムシート完全版・親テーマ干渉修正）
--------------------------------------------------------- */
@media screen and (max-width: 768px) {
    
    /* 背景オーバーレイのふわっとした出現 */
    .c-modal {
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .c-modal__inner {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        max-height: 90dvh; /* 画面の9割までに抑える */
        background: #fff;
        border-radius: 20px 20px 0 0;
        display: flex;
        flex-direction: column; /* ヘッダー・ボディ・フッターを縦に並べる */
        transform: translateY(100%); /* 下に隠しておく */
        transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    }

    /* オープン時に下からスッと出る */
    .c-modal.-open .c-modal__inner {
        transform: translateY(0);
    }

    /* --- ヘッダー（タイトルと×ボタン） --- */
    .c-modal__header {
        position: relative; /* 子要素の起点をここに固定 */
        padding: 15px 20px;
        text-align: center;
        border-bottom: 1px solid #eee;
        flex-shrink: 0; /* ヘッダーは潰さない */
    }

    .c-modal__title {
        font-size: 16px;
        font-weight: bold;
        margin: 0;
        color: #333;
    }

    /* ★修正ポイント：閉じるボタン（×）
       親テーマの top: 100% / left: 0 / width: 100% を強制上書き 
    */
    .c-modal .c-modal__close {
        /* 親テーマのリセット */
        top: 50% !important;           /* 100%から50%（中央）へ戻す */
        right: 10px !important;        /* 右端に配置 */
        left: auto !important;         /* 0を解除 */
        width: 44px !important;        /* 100%を解除 */
        height: 44px !important;       /* 高さを固定 */
        transform: translateY(-50%) !important; /* 垂直中央揃え */
        margin: 0 !important;          /* 余計な余白をカット */
        padding: 0 !important;         /* パディングをリセット */
        background: none !important;   /* 背景なし */
        text-shadow: none !important;  /* 親テーマの影を消す */
        display: flex !important;      /* 強制表示 */
        align-items: center;
        justify-content: center;
        border: none !important;
        cursor: pointer;
        z-index: 10 !important;
		color: #333;
    }

    /* ×ボタンの中の文字 */
    .c-modal__close span {
        font-size: 32px !important;    /* 押しやすい大きさ */
        color: #333 !important;        /* 見やすい濃い色 */
        line-height: 1 !important;
        font-weight: normal !important;
        text-indent: 0 !important;     /* 文字飛ばし設定がある場合を想定 */
    }

    /* --- ボディ（中身：エリアリストなど） --- */
    .c-modal__body {
        flex: 1; /* 余ったスペースをすべて使う */
        overflow-y: auto; /* 中身が長い場合にスクロールさせる */
        -webkit-overflow-scrolling: touch;
        padding: 20px;
    }

    /* --- フッター（アクションボタン） --- */
    .c-modal__actions {
        display: flex !important;
        flex-direction: row !important; /* 横並び */
        gap: 12px !important;
		padding: 15px 5px !important;
		background: #fff !important;
        border-top: 1px solid #eee !important;
        flex-shrink: 0; /* フッターも潰さない */
    }

    /* ボタン共通 */
    .c-modal__actions .c-btn {
        height: 50px !important;
        flex: 1; /* 基本は均等 */
        border-radius: 25px !important;
        font-size: 15px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
    }

    /* 左側：クリア */
    .c-modal__actions .c-btn.-gray {
        background: #f5f5f5 !important;
        color: #666 !important;
        border: none !important;
    }

    /* 右側：決定 */
    .c-modal__actions .c-btn.-orange {
        flex: 2 !important; /* 決定ボタンを少し長めに */
        background: #f39800 !important;
        color: #fff !important;
    }
}