@charset 'utf-8';

header { width:100%; height:auto; background:none; margin:0; padding-bottom:10px; position:relative; z-index:2; background-color:#FFFCF8; }
.headerWrap { width:100%; max-width:1080px; margin:0 auto; display:flex; justify-content:space-between; align-items:flex-start; }
.headerLogo { width:100%; margin:10px 0 0 0; padding:0 0 0 5%; display:flex; justify-content:left; align-items:center; position:relative; }
.headerLogo img { width:40px; }
.headerLogoText { margin:10px 0 0 10px; display:flex; flex-direction:column; }
.headerLogoText span { font-size:12px; }
.headerLogoText strong { font-weight:bold; font-size:16px; line-height:1.2; }
@media screen and (min-width: 1080px) {
    header { padding-bottom:30px; }
    .headerLogo { width:auto; margin:35px 0 0 0; padding:0; }
    .headerLogo img { width:60px; display:block; }
    .headerLogoText { width:100%; margin:0 0 0 15px; }
    .headerLogoText span { font-size:14px; }
    .headerLogoText strong { font-size:20px; margin:5px 0 0 0; }
}

.mb { display:flex; width:130px; height:50px; padding:10px; position:fixed; z-index:10; right:0; top:15px; cursor:pointer; background:#584728; color:#fff; }
.mb span { display:block; width:30px; height:2px; margin:12px auto 0 auto; background:#fff; position:relative; }
.mb span:before,.mb span:after { content:""; display:block; width:30px; height:2px; background:#fff; position:absolute; transition:0.4s; }
.mb span:before { margin:-10px 0 0 0; }
.mb span:after { margin:10px 0 0 0; }
.mb__open span{ background:transparent; }
.mb__open span:before { top:6px; right:6px; transform:rotate(-45deg) translateY(8px); background:#fff; }
.mb__open span:after { top:-3px; left:6px; bottom:auto; transform: rotate(-135deg) translateX(8px); background:fff; }
@media screen and (min-width: 1080px) {
    .mb { display:flex; align-items: center;}
    .mb span { margin:0 auto; }
}

.menu { width:100%; height:100%; display:flex; flex-direction:column-reverse; opacity:0; transition:0.4s; margin:0 0 0 200%; padding:80px 0 200px 0; background:#fff; position:fixed; top:0; left:0; overflow-y:scroll; z-index:6; box-sizing:border-box; color:#000; }
.menu__open	{ opacity:1; transition:0.4s; margin:0; background:#fffcf8; }
.menuMain { width:100%; padding:0; display:flex; flex-wrap:wrap; }
.menuMain li	{ width:100%; border-top:1px solid #ccc; overflow:hidden; }
.menuMain li a	{ width:100%; padding:15px 5%; display:flex; position:relative; border-left:4px solid transparent; color:#000; box-sizing:border-box; }
.menuMain li a::before{ content:''; width:6px; height:6px; margin:-3px 0 0 0; position:absolute; top:50%; right:5%; border-top:2px solid #584728; border-right: 2px solid #584728; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.menuSub { width:100%; padding:0; display:flex; flex-wrap:wrap; }
.menuSub a { width:100%; padding:15px 5%; display:flex; flex-wrap:wrap; position:relative; border-top:1px solid #ccc; border-left:4px solid transparent; }
.menuSub a::before{ content:''; width:6px; height:6px; margin:-3px 0 0 0; position:absolute; top:50%; right:5%; border-top:2px solid #584728; border-right: 2px solid #584728; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.menuSub a.menuContact { background:#584728; color:#fff; }
.menuSub a.menuContact::before{ border-top:2px solid #fff; border-right: 2px solid #fff; }

@media screen and (min-width: 1080px) {
    /* .mb { display:none; }
    .menu	{ width:auto; height:auto; margin:20px 0 0 0; padding:0; flex-direction:column; position:relative; overflow-y:hidden; opacity:1; background:none; }
    .menuMain { width:auto; max-width:750px; margin:5px 0 0 0; height:auto; display:flex; justify-content:space-between; background:none; align-items:center; }
    .menuMain li { width:auto; height:auto; margin:0 0 0 25px; overflow:visible; border-top:none; }
    .menuMain li a	{ width:auto; padding:5px 0; display:inline-block; position:relative; border-left:none; color:#000; box-sizing:border-box; text-align:center; line-height:2; }
    .menuMain li a::before{ display:none; }
    .menuMain li a::after { content:''; width:100%; height:2px; position:absolute; left:0; bottom:0; background:#584728; transform:scale(0, 1); transform-origin: center top; transition: transform 0.3s; }
    .menuMain li a:hover::after { transform: scale(1, 1); }
    .menuSub { width:auto; align-items:center; justify-content:flex-end; }
    .menuSub a { width:auto; padding:0; border-top:none; }
    .menuSub a.menuSell{ padding:5px 30px 5px 0; }
    .menuSub a.menuSell::before{ border-top:2px solid #000; border-right: 2px solid #000; }
    .menuSub a.menuSell::after { content:''; width:100%; height:2px; position:absolute; left:0; bottom:0; background:#584728; transform:scale(0, 1); transform-origin:center top; transition:transform 0.3s; }
    .menuSub a.menuSell:hover::after { transform: scale(1, 1); }
    .menuSub a.menuContact { margin:0 0 0 20px; padding:5px 30px; border:3px solid #133E85; border-radius:5px; position:relative; z-index:0; }
    .menuSub a.menuContact::before{ display:none; }
    .menuSub a.menuContact::after { content:''; width:100%; height:100%; display:block; position:absolute; left:0; bottom:0; z-index:-1; border-radius:3px; background:#fff; transform:scale(0, 1); transform-origin:center top; transition:transform 0.3s; }
    .menuSub a.menuContact:hover { color:#133E85; transition:0.3s; }
    .menuSub a.menuContact:hover::after { transform:scale(1, 1); } */
}

@media screen and (min-width: 1080px) {
    .menu { padding: 80px 0 520px 0; }
}