body {
    color: #30281b;
}

h1,
h2,
h2,
h3,
h5,
h6 {
    font-family: "Sawarabi Gothic";
}

a:hover,
a:active {
    color: #ffedd0;
    text-decoration: none;
    cursor: pointer;
}

a:visited,
a:link {
    color: #fff;
}

#mhead {
    display: none;
}

.br_pc {
    display: block;
}

.br_sp {
    display: none;
}

/*----------inline-----------*/
.inline {
    display: inline-block;
}

/*-----------------------------
            header
------------------------------*/


/*--------固定ヘッダー--------*/

.fix-header {
    background: #30281b;
    top: -90px;
    height: 70px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    position: fixed;
    opacity: 1;
    z-index: 999;
    font-size: 15px;
    filter: drop-shadow(3px 3px 10px rgba(0, 0, 0, 0.4));
    color: #fff;
}

.fix-header ul {
    padding-left: 30px;
}

.fix-header ul li {
    display: inline-block;
    padding: 0 30px;
    border-right: solid 1px #999;
    margin-top: 10px;
    vertical-align: middle;
}

.fix-header li:last-child {
    border: none;
    margin-right: 0;
}

/* micro clearfx */

.cf:before,
.cf:after {
    content: "";
    display: table
}

.cf:after {
    clear: both
}

.cf {
    zoom: 1;
    padding-top: 3px;
}




/*----------pc_nav-----------*/

.pc_nav {
    position: absolute;
    top: 20px;
    width: 100%;
    background-position: calc(25% - 1000px);
}

.pc_nav ul {
    margin: 0 auto;
    max-width: 1000px;
    width: 100%;
}

.pc_nav li {
    display: inline-block;
    padding: 0 4%;
    color: #fff;
    border-right: 1px solid #fff;
}

.pc_nav li:first-child {
    border-left: 1px solid #fff;
}

/*----------footer----------*/
#footer {
    color: #FFF;
    padding: 50px 20px;
    font-size: 12px;
    text-align: center;
    background: #30281b;
}

#footer h2 {
    color: #fff;
    font-size: 20px;
    padding-top: 10px;
}

#footer h3 {
    color: #fff;
    font-size: 20px;
    padding-top: 10px;
    margin-bottom: 0;
    padding-bottom: 0;
}

#footer li {
    list-style: none;
}

#footer h2 {
    margin-bottom: 0;
    padding-bottom: 0;
}

#footer .sec_box {
    padding-bottom: 0;
}

.footer_logo img {
    width: 62.5px;
    height: 60px;
}

/*-----page top------*/
.page-top {
    margin: 0;
    padding: 0;
    display: none;
}

.page-top p {
    margin: 0;
    padding: 0;

    position: fixed;
    right: 16px;
    bottom: 16px;
}

.move-page-top {
    display: block;
    background: #30281b;
    width: 70px;
    height: 70px;
    border-radius: 70px;
    -webkit-border-radius: 70px;
    -moz-border-radius: 70px;
    color: #fff;
    text-decoration: none;
    text-align: center;
    font-size: 12px;
    padding-top: 15px;

    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

a#move-page-top {
    color: #fff;
}

.move-page-top:hover {
    opacity: 0.85;
}

/*-----------------*/

.head_line {
    text-align: center;
    padding-top: 40px;
    font-size: 26px;
    line-height: 2.5rem;
    font-weight: 600;
    padding-bottom: 20px;
}

/*------------------------------
PC 920px
------------------------------*/
@media(max-width: 920px) {
    .fix-header ul li {
        padding: 0 15px;
    }

    /*------------------------------
            PC 900px
------------------------------*/
    @media(max-width: 900px) {
        .fix-header ul {
            padding-left: 0;
        }

        .fix-header li {
            display: inline-block;
            padding: 0 10px;
            margin-top: 25px;
        }

        li.left_fix-header {
            margin-right: 100px;
            border-right: none;
        }

        .pc_nav li {
            display: inline-block;
            padding: 0 15px;
        }
    }

    /*------------------------------
            tab 768px
------------------------------*/

    @media(max-width: 768px) {

        .bg-section,
        .bg-section02,
        .bg-section04,
        .bg-section06,
        .bg-section08 {
            height: 120vh
        }

        .fix-header,
        .pc_nav {
            font-size: 14px;
        }

        .fix-header ul li {
            padding: 0 13px;
        }

        #header .inner-el {
            padding: 0 10px;
            font-size: 3rem;
        }

        #section01,
        #section03,
        #section07 {
            padding: 40px 0;
        }
    }

    /*------------------------------
tab 640px
------------------------------*/

    @media(max-width: 640px) {

        .fix-header ul li {
            padding: 0 10px;
        }

        .pc_nav li:first-child {
            border-left: none;
        }

        .pc_nav li:last-child {
            border-right: none;
        }



        /*---none/block--*/
        .sp_navBtn,
        .sp_navMenu {
            display: block;
        }

        .pc_nav,
        .fix-header {
            display: none;
        }

        /*---sp_navBtn---*/

        #panel-btn {
            display: inline-block;
            position: relative;
            margin: 5px;
        }

        #panel-btn:hover {
            background: #fafafa;
        }

        #panel-btn-icon {
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            width: 20px;
            height: 2.3px;
            margin: -1px 0 0 -10px;
            background: #fff;
            transition: .2s;
        }

        #panel-btn-icon:before,
        #panel-btn-icon:after {
            display: block;
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            width: 20px;
            height: 2.3px;
            background: #fff;
            transition: .3s;
        }

        #panel-btn-icon:before {
            margin-top: -9px;
        }

        #panel-btn-icon:after {
            margin-top: 7px;
        }

        #panel-btn .close {
            background: transparent;
        }

        #panel-btn .close:before,
        #panel-btn .close:after {
            margin-top: 0;
        }

        #panel-btn .close:before {
            transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
        }

        #panel-btn .close:after {
            transform: rotate(-135deg);
            -webkit-transform: rotate(-135deg);
        }

        /*-------------------------*/
        .fa-2x {
            font-size: 1.3rem;
        }

        .sp_navBtn span {
            font-size: 19px;
            padding-left: 3px;
            line-height: 0;
            font-weight: 600;
            position: absolute;
            right: 12px;
            top: 32px;
        }

        .sp_navBtn span:after {
            content: attr(data-txt-menu);
        }

        .open .sp_navBtn span:after {
            content: attr(data-txt-close);
        }

        /*-------------------------*/
        #mhead {
            display: block;
            z-index: 1000;
            width: 100%;
            position: absolute;
            top: 0;
        }

        .sp_logo {
            position: absolute;
            top: 5px;
            left: 5px;
        }

        .sp_navMenu {
            width: 100%;
        }

        .sp_navBtn {
            display: inline-block;
            vertical-align: top;
            zoom: 1;
            width: 100%;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            text-align: right;
            padding: 20px 80px 3px 0;
            background: #7A6A56;
            color: #fff;
            height: 60px;
            box-shadow: 5px 0 5px 5px rgba(0, 0, 0, 0.3);
        }

        .navMenu {
            width: 100%;

        }

        .navMenu ul {
            text-align: center;
            padding: 5px 15px 0;
            background: #fff;
        }

        .navMenu li {
            border-bottom: 1.4px solid #7A6A56;
            padding: 25px 18px;
            text-align: left;
            font-size: 16px;
            list-style-type: none;

        }

        .navMenu li:last-child {
            border: none;
        }

        .navMenu li a:link,
        .navMenu li a:visited {
            color: #7A6A56;
        }

        /*--------section05------------*/

    }

    /*------------------------------
tab 420px
------------------------------*/

    @media(max-width: 420px) {}

    /*------------------------------
tab 380px
------------------------------*/

    @media(max-width: 380px) {}

    /*------------------------------
tab 320px
------------------------------*/

    @media(max-width: 320px) {}
