@charset "utf-8";

/*　フォームのプルダウンメニュー　*/
.pulldown {
    -moz-appearance: none;
    -webkit-appearance: none;
    background: transparent url(../image/icon-arrow-down.svg) no-repeat center right 7px/13px 13px;
    height: 30px;
    border: 1px solid #CCC;
    border-radius: 3px;
    color: inherit;
    cursor: pointer;
    padding: 0.4em 0.8em;
}

    .pulldown::-ms-expand {
        display: none;
    }

    .pulldown:focus {
        border: 1px solid rgba(0, 0, 0, 0.32);
        box-shadow: none;
        outline: none;
    }

/*　ヘッダー右のドロップダウンメニュー　*/
.dropdown-menu.dropdown-menu-header {
    margin: 0;
    padding: 5px;
    width: 130px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-shadow: 1px 1px 3px 1px #ccc;
    position: absolute;
    font-size: 14px;
    top: 40px;
    right: 20px;
    left: auto;
    display: none;
}

    .dropdown-menu-header a {
        padding: 5px 10px;
        display: block;
    }

        .dropdown-menu-header a:hover {
            background-color: #eee;
        }

/* モーダルウィンドウ */
.modal-info {
    padding: 20px;
}

    .modal-info table {
        margin-bottom: 30px;
        width: 100%;
    }

    .modal-info th {
        width: 120px;
        padding: 20px;
        font-weight: normal;
        text-align: left;
        font-size: 14px;
        transform: rotate(0.001deg);
    }

    .modal-info td {
        padding: 20px;
        font-size: 14px;
        transform: rotate(0.001deg);
    }

/* ツールチップ */
    .help img {
        margin-left: -0.95rem;
        vertical-align: -1px;
    }

        .help img:hover {
            opacity: .8;
        }

/*　サイドバーの開閉　*/
/*　トグルスイッチ　*/
.toggle-switch {
    width: 40px;
    display: block;
    position: absolute;
    top: 52px;
    left: 10px;
}

.lbl-checkbox {
    width: 46px;
    height: 40px;
    display: block;
    position: absolute;
    top: -10px;
    left: -10px;
    cursor: pointer;
}

#side-menu-toggle {
    display: none;
}
    /* チェック時の.menu-list */
    #side-menu-toggle:checked ~ .menu-list {
        flex-basis: 46px;
    }

    #side-menu-toggle:checked ~ article {
        flex-basis: calc(100% - 46px);
    }
    /* 非チェック時の.menu-list */
    #side-menu-toggle:not(:checked) ~ .menu-list {
        flex-basis: 200px;
    }

@media all and (-ms-high-contrast:none) {
    #side-menu-toggle:not(:checked) ~ .menu-list {
        flex-basis: 215px;
    }
}

    #side-menu-toggle:not(:checked) ~ article {
        flex-basis: calc(100% - 200px);
    }

.menu-list {
    padding: 40px 0 0 0;
    overflow: hidden;
    /* menu表示時のアニメーション */
    transition: 0.3s;
}

article {
    /* menu表示時のアニメーション */
    transition: 0.3s;
}

/* トグルアニメーション */
.menu-trigger,
.menu-trigger span {
    display: inline-block;
    transition: all .4s;
    box-sizing: border-box;
}

.menu-trigger {
    position: relative;
    width: 24px;
    height: 20px;
    cursor: pointer;
}

    .menu-trigger span {
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #fff;
        border-radius: 1px;
    }

        .menu-trigger span:nth-of-type(1) {
            top: 0;
        }

        .menu-trigger span:nth-of-type(2) {
            top: 9px;
        }

        .menu-trigger span:nth-of-type(3) {
            bottom: 0;
        }

input[type="checkbox"]:not(:checked) + script + .toggle-switch .lbl-checkbox {
    width: 200px;
}

input[type="checkbox"]:not(:checked) + script + .toggle-switch span:nth-of-type(1),
input[type="checkbox"]:not(:checked) + script + .toggle-switch span:nth-of-type(3) {
    width: 14px;
}

input[type="checkbox"]:not(:checked) + script + .toggle-switch span:nth-of-type(1) {
    -webkit-transform: translate(-2px,4px) rotate(-45deg);
    transform: translate(-2px,4px) rotate(-45deg);
}

input[type="checkbox"]:not(:checked) + script + .toggle-switch span:nth-of-type(3) {
    -webkit-transform: translate(-2px,-4px) rotate(45deg);
    transform: translate(-2px,-4px) rotate(45deg);
}