@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.1
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/
    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* 既存のスタイルがあればここまで */

/* スマートフォン表示時のスタイル */
@media screen and (max-width: 959px) {
    /* 通常のメニュー表示を非表示に */
    .l-header__gnav {
        display: none !important;
    }

    /* ハンバーガーメニューボタン */
    body .l-header .c-iconBtn.-menu {
        display: block !important;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 4px;
        width: 44px;
        height: 44px;
        padding: 0;
        margin-left: auto;
        position: relative;
    }

    body .l-header .c-iconBtn.-menu .c-iconBtn__icon {
        display: block;
        width: 24px;
        height: 2px;
        background: #333;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    body .l-header .c-iconBtn.-menu .c-iconBtn__icon::before,
    body .l-header .c-iconBtn.-menu .c-iconBtn__icon::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: #333;
        transition: transform 0.3s;
    }

    body .l-header .c-iconBtn.-menu .c-iconBtn__icon::before {
        transform: translateY(-8px);
    }

    body .l-header .c-iconBtn.-menu .c-iconBtn__icon::after {
        transform: translateY(8px);
    }

    /* スライドメニュー */
    body .p-spMenu {
        position: fixed;
        top: 0;
        right: 0;
        width: 80%;
        max-width: 320px;
        height: 100%;
        background: #fff;
        z-index: 999999;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        display: block !important;
    }

    body .p-spMenu.is-opened {
        transform: translateX(0);
    }

    body .p-spMenu__inner {
        padding: 20px;
        height: 100%;
        overflow-y: auto;
    }

    body .p-spMenu__closeBtn {
        text-align: right;
        margin-bottom: 20px;
    }

    body .c-widget__title.-spmenu {
        font-size: 18px;
        margin-bottom: 16px;
        text-align: center;
        padding: 10px 0;
        border-bottom: 1px solid #ddd;
    }

    /* オーバーレイ */
    body .p-spMenu__overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 999998;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s;
    }

    body .p-spMenu__overlay.is-opened {
        opacity: 1;
        visibility: visible;
    }
}