@charset "utf-8";
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);
*{
    box-sizing: border-box;
}
body {
    font-family: 'Noto Sans JP', sans-serif;
}
h1,h2,h3,p,ul,li,a,span,div{
    font-family: 'Noto Sans JP', sans-serif;
}
img{
    width: 100%;
    height: auto;
}
main{
    display: block;
}
#wrap{
    overflow: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
#wrap::-webkit-scrollbar{
    display: none;
}

.flex01 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
a{
    transition-duration: 0.6s;
}

a:hover{
    opacity: 0.6;
    transition-duration: 0.6s;

}

.pc_on{
    display: block;
}
.sp_on{
    display: none;
}
.btm_cap{
    font-size: 12px;
    text-align: left;
    max-width: 1040px;
    width: 100%;
    padding: 0 20px;
    margin: 0 auto 40px;
    line-height: 1.5;
}

        /* scroll */
        .scroll {
            position: absolute;
            transform: rotate(90deg);
            bottom: 23px;
            letter-spacing: 2px;
            color: #666;
            /* right: 1.5%; */
            left: 50%;
            transform: translateX(-50%);
            font-size: 14px;
            padding: 0;
            z-index: 100;
        }
        .pg_inner{
            margin: 0 0 25px;
        }
        .scroll a {
        /* display: flex;
        justify-content: center;
        align-items: center;
        position: relative; */
        }
        .scroll span {
            display: block;
            position: relative;
            display: block;
            width: 45px;
            height: 1px;
            overflow: hidden;
            margin: 0px 0px 0px 8px;
            background: #d6d6d6;
            transform: rotate(90deg);
        }
        
        .scroll span::before,
        .scroll span::after {
        content:"";
        display: block;
        background: #838383;
        position: absolute;
        transition: 0.3s;
        width: 30%;
        height: 100%;
        }
        .scroll span::before {
        
        display: none;
        }
        .scroll span::after {
        top: 0;
        right: -120%;
        -webkit-animation: afterMove 2s ease-in-out 0s infinite;
        animation: afterMove 2s ease-in-out 0s infinite;
        }
        
        @keyframes afterMove {
        0% {right:100%;}
        100% {right:-100%;}
        }



/* header */

header{
    position: fixed;
    top: 0;
    width: 100%;
    height: 80px;
    z-index: 100;
    display: flex;
    align-items: center;
    /* padding: 0 2vw;
    box-sizing: border-box; */
}

.header_bar{
    display: flex;
    align-items: center;
}
.header_logo{
    max-width: 200px;
    width: 13vw;
    margin: 0 0 0 20px;
}

.header_nav {position: fixed;width: 100%;max-width: initial;height: 100vh;top: 0;/* padding: 30px 0; */background: rgba(231, 236, 249, 0.6);transition: 0.6s ease;z-index: 2;transform: translateX(100%);}

.header_nav.open {
transform: translateX(0);
}

    .menu_icon_wrap {
        display: flex;
align-items: end;
justify-content: space-between;
position: absolute;
right: -40px;
top: 20%;
transform: translateY(-50%);
}



.menu_icon {width: 110px;height: 35px;position: relative;cursor: pointer;/* right: -20px; */transform: rotate(-40deg);filter: drop-shadow(1px 1px 2px #aaa);}

.menu_icon span {
display: block;
background: #fff;
width: 100%;
height: 4px;
position: absolute;
border-radius: 10px;
transition: 0.3s;
}

.menu_icon span:nth-child(2) {
top: 50%;
transform: translateY(-50%);
}

.menu_icon span:nth-child(3) {
bottom: 0;
}

.btn_shop{
position: absolute;
top: 40px;
right: 110px;
max-width: 110px;
min-width: 90px;
width: 7vw;
}

.nav_logo{
position: absolute;
left: -28vw;
width: 80vw;
/* min-width: 540px; */
bottom: 36vw;
transform: rotate(-90deg);
}

.close_icon{
position: absolute;
height: 70px;
right: 0;
cursor: pointer;
}
.close_icon span{
width: 80px;
height: 4px;
position: relative;
cursor: pointer;
display: block;
background: #fff;
right: -10px;
top: 25px;
border-radius: 20px;
transform: rotate(30deg);
cursor: pointer;
}

.gnav ul li a{
position: fixed;
right: -70px;
background: #fff;
color: #000;
transform: rotate(-40deg);
display: flex;
align-items: center;
letter-spacing: 3px;
width: 250px;
height: 40px;
z-index: 1;
padding: 0 0px 0 30px;
border-radius: 30px;
}
.gnav ul li:nth-of-type(1) a{
top:140px;
}
.gnav ul li:nth-of-type(2) a{
top:210px;
}
.gnav ul li:nth-of-type(3) a{
top:280px;
}
.gnav ul li:nth-of-type(4) a{
top:350px;
}
.gnav ul li:nth-of-type(5) a{
top:420px;
}
.gnav ul li:nth-of-type(6) a{
top:490px;
}
.gnav ul li:nth-of-type(7) a{
top:560px;
}


@media screen and (min-width: 1400px) {
.nav_logo{
    width: 900px;
    left: -310px;
    bottom: 370px;
}
} 

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

.header_logo {
min-width: 110px;
width: 13vw;
margin: 0 0 0 30px;
}
.close_icon span {
right: -20px;
}

.btn_shop {
top: 20px;
right: 70px;
min-width: 70px;
width: 7vw;
}

.menu_icon_wrap {
right: -50px;
top: 10%;
}

.gnav ul li a{
width: 250px;
right: -80px;
padding: 0 0px 0 20px;
letter-spacing: 2px;
font-size: 14px;

}

}




/* footer */

.h2_02 img{
    max-height: 50px;
    margin: 5vw auto 3vw;
}

.shop_list {
    max-width: 50vw;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin: 0 auto;
    border-left: 1px solid #707070;
    border-right: 1px solid #707070;
    position: relative;

}

.shop_list::before{
    content: "";
background: #707070;
height: 100%;
position: absolute;
width: 1px;
left: 50%;
opacity: 0.6;

}



.shop_list ul{
    width: 48%;
    text-align: center;
}
.shop_list ul li{
    line-height: 3.5;
       font-size: 1.2vw;
}

@media screen and (max-width: 900px) {
    .h2_02 img {
        max-height: 8vw;
        margin: 10vw auto 7vw;
    }
    
    .shop_list{
        max-width: 90vw;
        max-height: 73vw;
        overflow-y: scroll;
    }

    .shop_list ul li {
        line-height: 5;
        font-size: 2.2vw;
    }
    .shop_list::before{
        content: none;
    }
    .shop_l{
        position: relative;
    }

    .shop_l:before{

    content: "";
background: #707070;
height: 100%;
position: absolute;
width: 1px;
right: 0;
opacity: 0.6;
}

}

.cap01{
    text-align: center;
    font-size: 16px;
    margin: 5vw auto;
    border-bottom: 1px solid #707070;
    width: 90%;
    max-width: 50vw;
    padding: 0 0 4vw;
}

.ft_icn_box{
    width: 200px;
    margin: 5vw auto;
}
.ft_icn_box a{
    width: 35%;
    max-width: 62px;
}

.ft_company{
    text-align: center;
}
.ft_com01{
    font-size: 1.7vw;
    font-weight: 500;
    letter-spacing: 0.1em;
    margin: 0 0 1.5vw;
}
.ft_com02{
    font-size: 1.2vw;
    line-height: 1.5;
    letter-spacing: 0.1em;
    font-weight: 500;
}
.ft_com02 span{
    font-size: 0.8vw;
}

.ft_pri{
    display: block;
    text-align: center;
    font-size: 1vw;
    margin: 5vw auto;
}

.copyright{
    text-align: center;
    font-size: 1.2vw;
    font-weight: 500;
    margin: 5vw auto 7vw;

}


.bg_gray,footer{
    background: #b2b2b2;
}
footer{
    padding: 10px 0;
}

@media screen and (min-width: 1400px) {
    .shop_list ul li {
        font-size: 16px;
    }
    .ft_pri{
        font-size: 14px;
    }

    .copyright{
        font-size: 15px;
    }
    
}
@media screen and (max-width: 1400px) {
.cap01{
    font-size: 1.2vw;
}
}
@media screen and (max-width: 900px) {
    .cap01{
        max-width: 90vw;
        font-size: 2.2vw;
    }
    .ft_icn_box {
        width: 30vw;
        margin: 7vw auto 5vw;
    }
    .ft_com01 {
        font-size: 18px;
        margin: 0 0 20px;
    }
    .ft_com02 {
        font-size: 12px;
        line-height: 1.4;
        letter-spacing: 0.1em;
    }
    .ft_com02 span{
        font-size: 10px;
    }
    .ft_pri {
        font-size: 11px;
        margin: 50px auto;
    }
    .copyright{
        font-size: 10px;
    }

}

.req_box{
    position: fixed;
    bottom: 100px;
    right: -70px;
    background: #fff;
    color: #000;
    transform: rotate(-40deg);
    display: flex;
    align-items: center;
    letter-spacing: 3px;
    width: 250px;
    height: 40px;
    z-index: 1;
    padding: 0 0px 0 30px;
    border-radius: 30px;
    filter: drop-shadow(1px 1px 1px #aaa);
    opacity: 1;
}
.req_box.click_none{
    opacity: 0;
}

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


.req_box {
    bottom: 100px;
    right: -70px;
    letter-spacing: 3px;
    width: 200px;
    height: 40px;
    padding: 0 0px 0 20px;
    font-size: 14px;
}

}




@media screen and (max-width: 900px) {
    .pc_on{
        display: none;
    }
    .sp_on{
        display: block;
    }

}