#tel,
#nav-drawer {
    display: none;
}

@media screen and (max-width: 800px) {

    #tel {
        width: 64px;
        height: 64px;
        display: block;
        position: fixed;
        top: 0;
        right: 64px;
    }

    #tel a {
        display: block;
        color: #ffffff;
        background-color: #213a7d;
        height: 64px;
        line-height: 64px;
        padding: 10px;
        box-sizing: border-box;
        text-align: center;
    }

    #tel i {
        position: relative;
        top: -5px;
    }

    #nav-drawer {
        width: 64px;
        height: 64px;
        line-height: 64px;
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 9999;
        background-color: #3d3d3e;
        text-align: center;
    }

    /*チェックボックス等は非表示に*/
    .nav-unshown {
        display:none;
    }

    /*アイコンのスペース*/
    #nav-open {
        display: inline-block;
        width: 23px; /* 30px */
        height: 22px;
        margin: 0; /* -5px 0 0 */
        padding: 0 0 0 2px;
        vertical-align: middle;
    }

    /*ハンバーガーアイコンをCSSだけで表現*/
    #nav-open span, #nav-open span:before, #nav-open span:after {
        position: absolute;
        height: 3px;/*線の太さ*/
        width: 24px;/*長さ*/
        border-radius: 3px;
        background: #ffffff;
        display: block;
        content: '';
        cursor: pointer;
    }

    #nav-open span:before {
        bottom: -8px;
    }

    #nav-open span:after {
        bottom: -16px;
    }

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

    /*中身*/
    #nav-content {
        position: fixed;
        overflow-y: scroll;
        top: 0;
        left: 0;
        z-index: 99999;
        width: 80%; /* 84% */ /*右側に隙間を作る（閉じるカバーを表示）*/
        max-width: 296px; /* 330px *//*最大幅（調整してください）*/
        height: 100%;
        background: url(../images/bg1.jpg) repeat;
        transition: .3s ease-in-out;/*滑らかに表示*/
        -webkit-transform: translateX(-105%);
        transform: translateX(-105%);/*左に隠しておく*/
        line-height: normal;
    }

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

    #nav-input:checked ~ #nav-content {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);/*中身を表示（右へスライド）*/
        box-shadow: 6px 0 25px rgba(0,0,0,.15);
    }

    #nav-content h1 {
        position: static;
        width: 190px;
        margin: 7px auto !important;
        transform: translateY(0);
    }

    #nav-content h1 a {
        display: block;
    }

    #nav-content h1 a img {
        width: 100%;
        height: auto;
    }

    /***** メニュー *****/
    #nav-content nav {
        position: static;
        display: block;
        width: 96%;
        text-align: left;
        margin: -4px 2% 0; /* 0 2% */
        padding: 0;
        overflow: hidden;
    }

    #nav-content nav ul {
        width: 100%;
        margin: 0 0 15px;
        overflow: hidden;
    }

    /*
    #nav-content nav ul li:first-child {
        list-style: none;
        width: calc(100% - 2px);
        float: none;
        margin: 0;
        padding: 0;
        border-top: 1px solid #4a3f38;
        border-left: 1px solid #4a3f38;
        border-right: 1px solid #4a3f38;
        box-sizing: border-box;
    }

    #nav-content nav ul li.last {
        list-style: none;
        width: calc(100% - 2px) !important;
        margin: 0;
        padding: 0;
        border-bottom: 1px solid #4a3f38;
        border-left: 1px solid #4a3f38;
        border-right: 1px solid #4a3f38;
        box-sizing: border-box;
    }
    */

    /*
    #nav-content nav ul li:nth-child(1),
    #nav-content nav ul li:nth-child(2) {
        border-top: 1px dashed #4a3f38;
    }
    */

    /*
    #nav-content nav ul li:nth-child(1) {
        list-style: none;
        width: 98.9%;
        float: none;
        margin: 0;
        padding: 0;
        border-top: 1px dashed #4a3f38;
        border-left: 1px dashed #4a3f38;
        border-right: 1px dashed #4a3f38;
        box-sizing: border-box;
    }
    */

    #nav-content nav ul li:nth-child(1),
    #nav-content nav ul li:nth-child(2) {
        border-top: 1px dashed #4a3f38;
        box-sizing: border-box;
    }

    #nav-content nav ul li {
        list-style: none;
        width: calc(50% - 1px);
        float: left;
        margin: 0;
        padding: 0;
        border-left: 1px dashed #4a3f38;
        border-bottom: 1px dashed #4a3f38;
        box-sizing: border-box;
    }

    #nav-content nav ul li:nth-child(even) {
        list-style: none;
        width: calc(50% - 1px);
        float: left;
        margin: 0;
        padding: 0;
        border-right: 1px dashed #4a3f38;
        border-bottom: 1px dashed #4a3f38;
        box-sizing: border-box;
    }

    #nav-content nav ul li::after {
        display: none;
    }

    #nav-content nav ul li a {
        width: 100%;
        float: none;
        text-align: center;
        font-size: 90% !important;
        padding: 10px 0;
        display: block;
        color: #3d3d3e;
        /*background-color: #ffffff;*/
        box-sizing: border-box;
    }

    nav ul li a:hover {
        color: #213a7d;
    }

    nav ul li:nth-child(1) a span.text,
    nav ul li:nth-child(2) a span.text,
    nav ul li:nth-child(3) a span.text,
    nav ul li:nth-child(5) a span.text,
    nav ul li:nth-child(6) a span.text,
    nav ul li:nth-child(7) a span.text,
    nav ul li:nth-child(8) a span.text,
    nav ul li:nth-child(9) a span.text,
    nav ul li:nth-child(10) a span.text,
    nav ul li:nth-child(11) a span.text,
    nav ul li:nth-child(12) a span.text {
        background-image: none;
    }

    nav ul li:nth-child(1) a span.img {
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        display: block;
        width: 40px;
        height: 40px;
        margin: 0 auto;
        background: url(../images/ico_home.png) no-repeat;
        background-size: 100% auto;
    }

    nav ul li:nth-child(1) a:hover span.img {
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        display: block;
        width: 40px;
        height: 40px;
        margin: 0 auto;
        background: url(../images/ico_home_hover.png) no-repeat;
        background-size: 100% auto;
    }

    nav ul li:nth-child(2) a span.img {
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        display: block;
        width: 40px;
        height: 40px;
        margin: 0 auto;
        background: url(../images/ico_news.png) no-repeat;
        background-size: 100% auto;
    }

    nav ul li:nth-child(2) a:hover span.img {
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        display: block;
        width: 40px;
        height: 40px;
        margin: 0 auto;
        background: url(../images/ico_news_hover.png) no-repeat;
        background-size: 100% auto;
    }

    nav ul li:nth-child(3) a span.img {
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        display: block;
        width: 40px;
        height: 40px;
        margin: 0 auto;
        background: url(../images/ico_pre.png) no-repeat;
        background-size: 100% auto;
    }

    nav ul li:nth-child(3) a:hover span.img {
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        display: block;
        width: 40px;
        height: 40px;
        margin: 0 auto;
        background: url(../images/ico_pre_hover.png) no-repeat;
        background-size: 100% auto;
    }

    nav ul li:nth-child(4) a span.img {
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        display: block;
        width: 40px;
        height: 40px;
        margin: 0 auto;
        background: url(../images/ico_member.png) no-repeat;
        background-size: 100% auto;
    }

    nav ul li:nth-child(4) a:hover span.img {
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        display: block;
        width: 40px;
        height: 40px;
        margin: 0 auto;
        background: url(../images/ico_member_hover.png) no-repeat;
        background-size: 100% auto;
    }

    nav ul li:nth-child(5) a span.img {
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        display: block;
        width: 40px;
        height: 40px;
        margin: 0 auto;
        background: url(../images/ico_disclosure.png) no-repeat;
        background-size: 100% auto;
    }

    nav ul li:nth-child(5) a:hover span.img {
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        display: block;
        width: 40px;
        height: 40px;
        margin: 0 auto;
        background: url(../images/ico_disclosure_hover.png) no-repeat;
        background-size: 100% auto;
    }

    nav ul li:nth-child(6) a span.img {
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        display: block;
        width: 40px;
        height: 40px;
        margin: 0 auto;
        background: url(../images/ico_letter.png) no-repeat;
        background-size: 100% auto;
    }

    nav ul li:nth-child(6) a:hover span.img {
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        display: block;
        width: 40px;
        height: 40px;
        margin: 0 auto;
        background: url(../images/ico_letter_hover.png) no-repeat;
        background-size: 100% auto;
    }

    nav ul li:nth-child(7) a span.img {
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        display: block;
        width: 40px;
        height: 40px;
        margin: 0 auto;
        background: url(../images/ico_blog.png) no-repeat;
        background-size: 100% auto;
    }

    nav ul li:nth-child(7) a:hover span.img {
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        display: block;
        width: 40px;
        height: 40px;
        margin: 0 auto;
        background: url(../images/ico_blog_hover.png) no-repeat;
        background-size: 100% auto;
    }

    nav ul li:nth-child(8) a span.img {
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        display: block;
        width: 40px;
        height: 40px;
        margin: 0 auto;
        background: url(../images/ico_recruit.png) no-repeat;
        background-size: 100% auto;
    }

    nav ul li:nth-child(8) a:hover span.img {
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        display: block;
        width: 40px;
        height: 40px;
        margin: 0 auto;
        background: url(../images/ico_recruit_hover.png) no-repeat;
        background-size: 100% auto;
    }

    nav ul li:nth-child(9) a span.img {
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        display: block;
        width: 40px;
        height: 40px;
        margin: 0 auto;
        background: url(../images/ico_privacy.png) no-repeat;
        background-size: 100% auto;
    }

    nav ul li:nth-child(9) a:hover span.img {
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        display: block;
        width: 40px;
        height: 40px;
        margin: 0 auto;
        background: url(../images/ico_privacy_hover.png) no-repeat;
        background-size: 100% auto;
    }

    nav ul li:nth-child(10) a span.img {
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        display: block;
        width: 40px;
        height: 40px;
        margin: 0 auto;
        background: url(../images/ico_mail.png) no-repeat;
        background-size: 100% auto;
    }

    nav ul li:nth-child(10) a:hover span.img {
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        display: block;
        width: 40px;
        height: 40px;
        margin: 0 auto;
        background: url(../images/ico_mail_hover.png) no-repeat;
        background-size: 100% auto;
    }

    nav ul li:nth-child(11) a span.img {
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        display: block;
        width: 40px;
        height: 40px;
        margin: 0 auto;
        background: url(../images/ico_mail.png) no-repeat;
        background-size: 100% auto;
    }

    nav ul li:nth-child(11) a:hover span.img {
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        display: block;
        width: 40px;
        height: 40px;
        margin: 0 auto;
        background: url(../images/ico_mail_hover.png) no-repeat;
        background-size: 100% auto;
    }

    nav ul li:nth-child(12) a span.img {
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        display: block;
        width: 40px;
        height: 40px;
        margin: 0 auto;
        background: url(../images/ico_access.png) no-repeat;
        background-size: 100% auto;
    }

    nav ul li:nth-child(12) a:hover span.img {
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        display: block;
        width: 40px;
        height: 40px;
        margin: 0 auto;
        background: url(../images/ico_access_hover.png) no-repeat;
        background-size: 100% auto;
    }

    #nav-content .box p {
        font-size: 110%;
        font-weight: bold;
        margin: 0 0 5px;
    }

    #nav-content .box span {
        display: block;
    }

    #nav-content .box {
        width: calc(96% - 2px);
        margin: 0 2% 15px;
        padding: 10px;
        border: 1px dashed #4a3f38;
        /*background-color: #ffffff;*/
        box-sizing: border-box;
    }

    #nav-content .box dl {
        overflow: hidden;
        text-align: left;
    }

    #nav-content .box dl dt {
        font-size: 110%;
        font-weight: bold;
    }

    #nav-content .box dl dd {
        line-height: 1.5;
        font-size: 90%;
    }

    #nav-content .box ul {
        text-align: left;
    }

    #nav-content .box p {
        line-height: 1.5;
    }

    #nav-content .box ul li {
        line-height: 1.5;
        font-size: 90%;
    }

    #nav-content .box ul li a {
        padding: 15px 0;
        display: block;
    }

    #nav-content .box ul li:nth-child(2) a {
        border-top: 1px dashed #4a3f38; /* #404040 */
        border-bottom: 1px dashed #4a3f38; /* #404040 */
    }

    #nav-content .box ul li span {
        display: block;
    }

}


@media screen and (max-width: 360px) {

    #tel {
        display: none;
    }

    #nav-content nav {
        margin: -4px 2% 0;
    }

    #nav-content .box p {
        font-size: 100%;
    }

}