.pc-elm{
    display: block;
}
.sp-elm{
    display: none;
}

.header ul .nav-link p.jp, .header ul a p.jp {
    margin-top: 10px;
    font-family: "游ゴシック","ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic","MS Gothic","ＭＳ ゴシック","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 1.0rem;
}

.header ul .nav-link p.en, .header ul a p.en {
    font-size: 1.7rem;
}

.header .header-inner {
    width: 83.3%;
    max-width: 1400px;
}

.header .nav-wrap {
    width: 92%;
    min-height: 160px;
 }

 .header ul {
    padding: 0 6%;
 }

 .header .btn-sp-menu {
    background-color: transparent;
}

.header .nav-wrap .nav {
    background-color: rgba(255,255,255,1);
}

.header .link-logo {
    width: 8%;
    height: 170px;
    margin-top: -20px;
}

.header .link-logo .logo {
    width: 76%;
    margin-top: 20px;
}

.header .subnav-wrap {
    width: 100%;
    padding-left: 0;
}

.header a.link-logo:hover {
    opacity: 1;
    margin-top: 0;
}

.header .nav-wrap .nav .nav-item {
    height: 80px;
 }

 .header .btn-sp-menu {
    width: 80px;
    height: 80px;
}

.header .subnav-wrap .subnav {
    padding: 0 10%;
}

a:visited {
    color:initial !important;
}

footer .btn-top {
    bottom: -80px;
    width: 80px;
    height: 80px;
}

.fixed-btn-wrap a .icon-member {
    margin-left: 9px;
    width: 45%;
}

.fixed-btn-wrap a .icon-key {
    width: 28%;
}

.fixed-btn-wrap {
    padding: 5px 0;
}

.fixed-btn-wrap a {
    width: 45px;
    position: relative;
}

.fixed-btn-wrap a:before{
    display: block;
    position: absolute;
    font-size: 1.0rem;
    font-family: futura-pt-bold,"游ゴシック","ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic","MS Gothic","ＭＳ ゴシック","Helvetica Neue",Helvetica,Arial,sans-serif;
    text-align: right;
    left: -58px;
    width: 50px;
    display: none;
}

.fixed-btn-wrap a:hover:before{
    display: block;
}

.fixed-btn-wrap a:nth-of-type(1):before{
    content:'CONTACT';
}

.fixed-btn-wrap a:nth-of-type(2):before{
    content:'CART';
}

.fixed-btn-wrap a:nth-of-type(3):before{
    content:'SIGN UP';
}

.fixed-btn-wrap a:nth-of-type(4):before{
    content:'LOG IN';
}

.modal-menu-inner .menu-wrap .nav-item.btn-box a p {
    font-size: 1.3rem;
}


.header .link-logo {
    width: 10%;
    height: 140px;
    margin-top: -20px;
}
.header .nav-wrap {
    width: 90%;
}

.modal-menu-inner .menu-wrap .nav-item.btn-box a {
    margin: 0 30px;
}

@media (min-width: 1240px)
{
    .header .link-logo {
        height: 150px;
    }
}
@media (min-width: 1480px)
{
    .header .link-logo {
        height: 170px;
    }
}
/*
@media (min-width: 1600px)
{
    .header .link-logo {
        width: 8%;
        height: 170px;
    }
    .header .nav-wrap {
        width: 92%;
    }
}
*/

@media (min-width: 1920px)
{
    .header .link-logo {
        height: 190px;
    }
}
@media (min-width: 2180px)
{
    .header .link-logo {
        height: 210px;
    }
}

a.btn {
    border: none;
    transform: scaleX(0);
    transform-origin: left top;
    transition: all .4s ease-out;
}

a.btn:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    transform: scaleX(0);
    transform-origin: right top;
    transition: transform .3s ease-out;
}

a.btn:hover:before {
    transform: scaleX(1);
    transform-origin: left top;
}



a.btn._show {
    transform: scaleX(1);
}

a.btn span{
    opacity: 0;
    transition: all .2s linear;
    transition-delay:.4s;
    z-index: 1;
}

a.btn._show span{
    opacity: 1;
}

a.btn._shown span {
    transition-delay:.0s;
}

a.btn:hover span {
    color: #FFF;
}

a.btn:hover .arrow-h-d:after, a.btn:hover .arrow-h-d:before, a.btn:hover .arrow-h-l:after, a.btn:hover .arrow-h-l:before, a.btn:hover .arrow-h-r:after, a.btn:hover .arrow-h-r:before, a.btn:hover .arrow-h-u:after, a.btn:hover .arrow-h-u:before {
    background-color: #FFF;
}


a.btn.yellow:before {
    background-color: #FFF;
}

a.btn.yellow:hover span {
    color: #000;
}

a.btn.yellow:hover .arrow-h-d:after, a.btn.yellow:hover .arrow-h-d:before, a.btn.yellow:hover .arrow-h-l:after, a.btn.yellow:hover .arrow-h-l:before, a.btn.yellow:hover .arrow-h-r:after, a.btn.yellow:hover .arrow-h-r:before, a.btn.yellow:hover .arrow-h-u:after, a.btn.yellow:hover .arrow-h-u:before {
    background-color: #000;
}



@media (min-width: 768px)
{
    .header.fixed .nav-wrap {
        width: 95%;
    }
    .header.fixed .link-logo {
        width: 100px;
        height: 100px;
    }
}


.header .btn-sp-menu .sp-menu-open {
    width: 50px;
    height: 50px;
}

.header .btn-sp-menu .sp-menu-open span {
    height: 3px;
    margin: 7px 0;
}

.header .btn-sp-menu:hover .sp-menu-open span {
    margin: 10px 0;
}

.modal-inner .btn-close .icon-close {
    width: 40px;
    height: 40px;
}
.modal-inner .btn-close {
    position: fixed;
    top: 30px;
    right: 30px;
    display: block;
    width: 40px;
    height: 40px;
}




#container{
    opacity: 0;
    transition: 1s;
}

#container._show{
    opacity: 1;
}

.header {
    transform: translateY(-180px);
    transition: all .5s ease-out;
    transition-delay:.5s;
    opacity: 0;
}

.header._show {
    transform: translateY(0);
    opacity: 1;
}

.fixed-btn-wrap {
    transform: translate(50px, -50%);
    transition: all .5s ease-out;
    transition-delay:.5s;
    opacity: 0;
}

.fixed-btn-wrap._show {
    transform: translate(0, -50%);
    opacity: 1;
}

a.btn{
    border: none;
}

a.cover{
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
}








@media (max-width: 767px)
{


    .pc-elm{
        display: none;
    }
    .sp-elm{
        display: block;
    }


    .header .header-inner {
        width: 100%;
    }    
    .header .link-logo {
    width: 66px;
    height: 80px;
    margin-top: 0;
    }
    .header .link-logo .logo {
        width: 76%;
        margin-top: 0;
    }


.modal-menu-inner .menu-wrap .nav-item.btn-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-bottom: 20px;
    display: block;
    text-align: center;
}


.modal-menu-inner .menu-wrap .nav-item.btn-box a:nth-of-type(1) {
    margin: 0 0 0 -5px;
}

.modal-menu-inner .menu-wrap .nav-item.btn-box a {
    margin: 0;
    width: 40%;
}

.modal-menu-inner .menu-wrap .nav-item.btn-box a p {
    font-size: 1.3rem;
    text-align: center;
}

.modal-menu-inner .menu-wrap .nav-item.btn-box a:nth-of-type(1) {
    margin: 0;
}

.modaal-wrapper * {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-backface-visibility: hidden;
}

.modaal-wrapper * {
    font-size: 0;
}


.modal-menu-inner .menu-wrap .nav-item.btn-box a:nth-of-type(1),  .modal-menu-inner .menu-wrap .nav-item.btn-box a:nth-of-type(2){
    margin-bottom: 15px;
}

.modal-menu-inner .menu-wrap .nav-item.btn-box {
    width: 80%;
    margin: 0 auto;
}

header .btn-sp-menu .sp-menu-close, .header .btn-sp-menu .sp-menu-open {
    width: 30px;
    height: 50px;
}

.header .btn-sp-menu .sp-menu-open span {
    height: 2px;
    margin: 4px 0;
}

.header .btn-sp-menu:hover .sp-menu-open span {
    margin: 7px 0;
}

.modal-inner .btn-close .icon-close {
    top: -40px;
    left: 30px;
    width: 20px;
    height: 20px;
}

footer .btn-top {
    bottom: -80px;
    width: 50px;
    height: 50px;
}

.sns-wrap>:nth-child(1) {
    margin-right: 0;
}

}