@charset "utf-8";

* {
    margin: 0;
    padding: 0;
}
html {
    font-size: 62.5%;
}
body {
    background-color: #fff;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1em;
}

img {
    border: 0;
}

.main {
    text-align: center;
    margin: 0 auto;
    padding: 20px 0px;
}

.main h1 {
    font-size: 2em;
    padding: 3px 15px;
    margin: 10px auto;
    width: 500px;
    border-left: #ccaaaa 5px solid;
    border-bottom: #ccaaaa 1px solid;
    border-right: #ccaaaa 5px solid;
    border-top: #ccaaaa 1px solid;
}

.sub {
    background-color: #81c778;
}

.sub h1 {
    border-color: #93813f;
}

ul.banner {
    list-style: none;
    display: flex;
    gap: 10px;

    width: 920px;
    margin: 10px auto;
}

ul.banner li {
    width: 300px;

}

ul.banner img {
    width: 300px;
}

.display-none {
    display: none;
}

span {
    display: inline-block;
}

#sp-fixed-menu {
    display: none;
}

/** モバイルフッターメニュー用 */
@media (max-width: 767px) {

    /*メニューをページ下部に固定*/
    #sp-fixed-menu {
        display: none;
        position: fixed;
        width: 100%;
        bottom: 60px;
        font-size: 1em;
        opacity: 0.9;
        z-index: 99;
    }

    /*メニューを横並びにする*/
    #sp-fixed-menu ul.mobile-footer-menu {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        list-style: none;
        margin-left: 0;
        padding-left: 0;
        width: 100%;
        background-color: #508d48;
    }

    #sp-fixed-menu li.menu-button {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        margin: 0;
        font-size: 0.8em;
        border: 1px solid #ffffff;
        color: #fff;
        height: 80px;
    }


    /*ボタンを調整*/
    #sp-fixed-menu li.menu-button>a {
        flex-grow: 1;
        color: #ffffff;
        text-align: center;
        display: block;
        width: 100%;
        padding: 20px 0px;
        text-decoration: none;
    }

    #navi-menu-open, #special-menu-open {
        display: block;
        text-align: center;
    }

    .navi-menu-icon {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .navi-menu-caption {
        display: block;
        width: 100%;
        margin: 10px 0px 0px;
        padding: 0;
    }

    /** ドロワーメニュー用 */
    .mobile-menu-buttons .menu-button:hover .menu-button-in {
        opacity: 0.8;
    }

    label {
        cursor: pointer;
    }

    /*閉じる用の薄黒カバー*/
    #navi-menu-close,
    #special-menu-close {
        display: none;
        /*はじめは隠しておく*/
        position: fixed;
        z-index: 99;
        top: 0;
        /*全体に広がるように*/
        left: 0;
        width: 100%;
        height: 100%;
        background: black;
        transition: .3s ease-in-out;
    }

    .navi-menu-content, .menu-drawer a, .menu-drawer a:hover {
        color: #484848;
        background: #fff;
    }

    .navi-menu-content {
        left: 0;
        -webkit-transform: translateX(-105%);
        transform: translateX(-105%);
    }

    .special-menu-content, .special-menu-drawer a, .special-menu-drawer a:hover {
        color: #484848;
        background: #fff;
    }

    .special-menu-content {
        right: 0;
        -webkit-transform: translateX(-105%);
        transform: translateX(-105%);
    }

    /*中身*/
    .menu-content {
        overflow: auto;
        position: fixed;
        /* top: 0; */
        bottom: 80px;/*ボトムメニューの高さ分だけ空ける*/
        z-index: 9999;
        /*最前面に*/
        width: 100%;
        /*右側に隙間を作る（閉じるカバーを表示）*/
        max-width: 400px;
        /*最大幅（調整してください）*/
        /* height: 100%; */
        background: #fff;
        /*背景色*/
        transition: .3s ease-in-out;
        /*滑らかに表示*/
        opacity: 1;
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
    }

    .menu-content .menu-drawer {
        padding: 0 1em 30px;
    }

    .menu-content .sidebar {
        width: 100%;
        display: block;
        margin: 0;
    }

    .navi-menu-content {
        left: 0;
        -webkit-transform: translateX(-105%);
        transform: translateX(-105%);
    }

    .special-menu-content {
        right: 0;
        -webkit-transform: translateX(105%);
        transform: translateX(105%);
    }

    #slide-in-sidebar {
        display: block;
        margin: 0;
    }


    /*チェックが入ったらもろもろ表示*/
    #navi-menu-input:checked~#navi-menu-close,
    #special-menu-input:checked~#special-menu-close {
        display: block;
        /*カバーを表示*/
        opacity: .5;
    }

    #navi-menu-input:checked~#navi-menu-content,
    #special-menu-input:checked~#special-menu-content {
        transition: .3s ease-in-out;
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
        opacity: 1;
    }

    .menu-drawer ul {
        list-style: none;
    }

    .menu-drawer li {
        display: block;
    }

    .menu-drawer a {
        color: var(--cocoon-text-color);
        text-decoration: none;
        padding: 6px;
        display: block;
    }

    .menu-drawer a:hover {
        background-color: #f5f8fa;
        transition: all 0.3s ease-in-out;
        color: var(--cocoon-text-color);
    }

    .menu-drawer .sub-menu {
        padding-left: 20px;
    }

    .menu-close-button {
        display: block;
        cursor: pointer;
        text-align: center;
        font-size: 2em;
    }

}

@media screen and (max-width: 480px) {
    .menu-content {
        max-width: 84%;
    }
}