@charset "utf-8";

@import url("https://use.typekit.net/nsn8oxi.css");

$font1:fredericka-the-greatest, serif;
$font2:sofia-pro, sans-serif;
$font3:'gioviale', sans-serif;
$red:#e5004f;
$red2:#cc0014;
$pink:#e4007f;
$purple:#af80ba;
$orange:#ff820d;
$blue:#0a85ff;
$green:#0cad3f;
$yellow:#fbb900;
$brown:#a3560f;
$gold:#ab9641;
$gray:#999791;
$black:#000;
$white:#cfceca;



/*-------------MIX　IN-------------*/
@mixin giji{
	position: absolute;
	content: "";
}
@mixin font1{
    font-family: 'gioviale', sans-serif;
    line-height: 1.2em;
}
@mixin flex{
	display: inline-flex;
	display: -webkit-inline-flex;
    display: -moz-inline-flex;
    display: -ms-inline-flex;
    display: -o-inline-flex;
	box-sizing: border-box;
}

@mixin stripe_red{
	opacity:0.7;
	-webkit-background-size: 30px 30px;
-moz-background-size: 30px 30px;
background-size: 30px 30px;
background-color: #fff;
background-image: -webkit-gradient(linear, 0 0, 100% 100%,
            color-stop(.25, $red), color-stop(.25, transparent),
            color-stop(.5, transparent), color-stop(.5, $red),
            color-stop(.75, $red), color-stop(.75, transparent),
            to(transparent));
background-image: -webkit-linear-gradient(-45deg, $red 25%, transparent 25%,
          transparent 50%, $red 50%, $red 75%,
          transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, $red 25%, transparent 25%,
          transparent 50%, $red 50%, $red 75%,
          transparent 75%, transparent);
background-image: -ms-linear-gradient(-45deg, $red 25%, transparent 25%,
          transparent 50%, $red 50%, $red 75%,
          transparent 75%, transparent);
background-image: -o-linear-gradient(-45deg, $red 25%, transparent 25%,
          transparent 50%, $red 50%, $red 75%,
          transparent 75%, transparent);
background-image: linear-gradient(-45deg, $red 25%, transparent 25%,
          transparent 50%, $red 50%, $red 75%,
          transparent 75%, transparent);
}

@mixin shadow_blue{   
box-shadow:0px 0px 3px 0px #74cfea;
}

body{
	margin: 0;
	padding: 0;
	/*background:#e3fcfd;*/
	letter-spacing: 0.1em;
	line-height: 1.2;
	text-align: center;
	
}
li{list-style: none;}


/*-------------PC用-------------*/
@media screen and (min-width:641px) {
    .wrapper{
        margin: 30px auto;
        width: 1200px;
		padding: 10px 0 10px;
		background: #fff;
		text-align: center;
    }
	p{margin: 5px 0;
	padding: 0;
  }
/*----header----*/
    header{
        display: inline-block;
        margin: 0 auto;
        /*padding: 20px 0;*/
    }
   

/*----read----*/
    h1{
        margin: -10px 0 20px;
        padding: 0;
        color: #0071DB;
        font-weight: 600;
        font-size: 16px;
        letter-spacing: 0.1em;
        line-height: 1.5;}
    
 /*----menu----*/  
    .menu{
	@include flex;
	width: 900px;
	margin: 20px 0 50px;
	justify-content: space-between;
	li{position: relative;}
	p{@include giji;
	font-family: $font2;
	font-weight: 600;
	top:90px;
	left:0;
	right: 0;
	font-size: 1.5rem;
	span{font-size: 12px;}}
	.num{@include giji;
		font-family: $font1;
		font-size: 4rem;
		top:-5px;
		left:-20px;
		letter-spacing: 0.08em;
		z-index: 999;
		}
	}
    
	.brand_menu{
	@include flex;
	justify-content: space-between;
	width: 900px;
	margin: 0;
	flex-wrap: wrap;
	li{width: 24%;
	margin: 10px 0;
	img{width: 70%;}}
	li + li {
    border-left: 1px solid #A7A7A7;
}
li:nth-child(5) {
    border: none;
}
	}
	
.white{
width: 100%;
background: #fff;
margin: 20px 0 50px;
padding: 5px 0;
}	
     .menu_title{
	font-size: 2rem;
	font-family: $font2;} 
/*----メインコンテンツ----*/

.photo{margin: 20px auto 10px;}


.item_txt{
        margin: 10px 0;
        line-height: 1.5;
        font-size: 14px;
    }
    .item_txt_big{
        font-family: $font2;
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 20px;
    }
    .reco_item{
           margin: 10px 0 0 !important; 
        }
   
    .reco_main{
        position: relative;
           margin: 10px 0 0 !important; 
        }
   /* .reco_main:after{
            @include giji;
            background: url("../img/recommend.png")no-repeat;
            width: 150px;
            height: 182px;
        background-size: contain;
            top:-30px;
            left:-20px;
        }*/
    .recommend_box{
        @include flex;
        justify-content: space-between;
        width: 1140px;
        li{
            position: relative;
            width: 555px;
        background: #fff;
        padding: 10px;
        box-sizing: border-box;
        .title{
                font-size: 3rem;
                font-family: $font2;
            font-weight: 600;
                p{font-size: 12px;
                font-family: $font2;}
            }}
        
        .title2{
            position: relative;
            font-family: $font2;
            font-size: 1.5rem;
            font-weight: 600;
            margin: 10px 0;
            width: 100%;
            span{background: #fff;}
            text-align: left;
            overflow: hidden;
        }
        
        .title2:after{
            @include giji;
            border-top:1px dotted #000;
            width: 90%;
            top:15px;
        }
        
       
        
    }
     .point{
            @include flex;
            width: 100%;
            justify-content: space-between;
            li{width: 33%;
            padding: 0;}
        }
        
.point_txt{
            padding: 10px 10px 0;
            font-size: 14px;
            text-align: left;
            line-height: 1.5;

        }
        .colorvari{
            @include flex;
            width: 100%;
            justify-content: flex-start;
            li{width: 24%;
                padding: 0;
                margin-right: 1%;
                img{width: 100%;}}
        }

/*----ランキング----*/   

h2{
width: 1200px;
margin: 20px 0;
padding: 0;
display: inline-block;
font-family: $font1;
font-size: 3rem;
letter-spacing: 0.2em;
border-bottom: 1px solid #000;
font-weight: normal;
p{font-size: 14px;
font-family: $font2;
letter-spacing: 0.2em;}
.span{
		font-family: $font1;
		font-size: 3rem;
		letter-spacing: 0.08em;
		z-index: 999;
		}
}
.txt{
margin-top: -10px;
font-size: 14px;
line-height: 1.5;
}

h3{
display: block;
margin: 20px 0 0px;
padding: 0;
img{width:20%;}
}

h4{
display: block;
margin: 20px 0 0px;
padding: 0;
font-family: $font2;
font-size: 1.8rem;
width: 90%;
margin-left: 5%;
border-bottom:1px solid #000;
}

#ranking{
margin: 50px 0;
position: relative;
display: inline-block;
width: 100%;
height: auto;
padding: 0 0 50px;
dl {font-family: $font2;
letter-spacing: 0.2em;}
dt{font-size: 16px;}

dd{font-size: 14px;
p{
position: relative;
color:#C50003;
font-size: 16px;
font-weight: 600;
 margin: 5px 0 0 -40px;
}
p:after{
position: absolute;
content: "円(税込)";
font-size: 10px;
margin-left:3px;
margin-top: 5px;
}}


}


#ranking:before{
position: absolute;
content: "";
background: url("../img/2020_09backpack_rankbg01.jpg")no-repeat;
top:0;
left: 0;
width: 100%;
height: 599px;
background-size: cover;
z-index: -1;
opacity:0.7; 
}

#ranking:after{
position: absolute;
content: "";
background: url("../img/2020_09backpack_rankbg02.jpg")no-repeat;
bottom:0;
left: 0;
width: 100%;
height: 418px;
background-size: cover;
z-index: -1;
opacity:0.7; 
}


.no01{
width: 550px;
text-align: center;
margin: 30px auto;
p{font-size: 12px;
line-height: 1.5;}
.no01_cont{
@include flex;
justify-content: space-between;
width: 100%;
li{
position: relative;
width: 49%;
img{width: 100%;}}
}
li:nth-child(1):before{
@include giji;
background:url("../img/ranking_icon_01.png")no-repeat;
background-size: cover;
width: 60px;
height: 70px;
top:-15px;
left:-10px;
}
}
  
.no02{
@include flex;
width: 1000px;
justify-content: space-between;
li{
position: relative;
background: #fff;
width: 24%;
padding: 10px 0;
img{width: 100%;
margin: 5px 0;}
p{font-size: 12px;
line-height: 1.5;
padding: 0 5px;}
}
li:nth-child(1):before{
@include giji;
background:url("../img/ranking_icon_2.png")no-repeat;
background-size: cover;
width: 35px;
height: 35px;
top:5px;
left:5px;
}
li:nth-child(2):before{
@include giji;
background:url("../img/ranking_icon_3.png")no-repeat;
background-size: cover;
width: 35px;
height: 35px;
top:5px;
left:5px;
}
li:nth-child(3):before{
@include giji;
background:url("../img/ranking_icon_4.png")no-repeat;
background-size: cover;
width: 35px;
height: 35px;
top:5px;
left:5px;
}
li:nth-child(4):before{
@include giji;
background:url("../img/ranking_icon_5.png")no-repeat;
background-size: cover;
width: 35px;
height: 35px;
top:5px;
left:5px;
}
}


/*outdoor*/
#outdoor{
margin: 50px 0;
position: relative;
display: inline-block;
width: 100%;
height: auto;
padding: 0 0 30px;
}

#lady{
margin: 50px 0;
position: relative;
display: inline-block;
width: 100%;
height: auto;
background: #F4E3E3;
padding: 0 0 30px;
}

#men{
margin: 50px 0;
position: relative;
display: inline-block;
width: 100%;
height: auto;
background: #DFFBFF;
padding: 0 0 30px;
}

#outdoor:before{
position: absolute;
content: "";
background: url("../img/2020_09backpack_outbg01.jpg")no-repeat;
top:0;
left: 0;
width: 100%;
height: 568px;
background-size: cover;
z-index: -1;
opacity:0.7; 
}

#outdoor:after{
position: absolute;
content: "";
background: url("../img/2020_09backpack_outbg02.jpg")no-repeat;
bottom:0;
left: 0;
width: 100%;
height: 350px;
background-size: cover;
z-index: -1;
opacity:0.3; 
}

/*#lady:before{
position: absolute;
content: "";
background: url("../img/2020_09backpack_outbg01.jpg")no-repeat;
top:0;
left: 0;
width: 100%;
height: 568px;
background-size: cover;
z-index: -1;
opacity:0.7; 
}

#lady:after{
position: absolute;
content: "";
background: url("../img/2020_09backpack_ladybg02.jpg")no-repeat;
bottom:0;
left: 0;
width: 100%;
height: 350px;
background-size: cover;
z-index: -1;
opacity:0.3; 
}*/

  

    
/*////pickup contents////*/    
    
.pickup{
@include flex;
width: 870px;
background: #dfdfdf;
margin: 30px auto 10px;
padding: 10px;
li{text-align: left;
position: relative;
dl dt{
font-size: 1.5rem;
font-family: $font2;
border-bottom: 1px solid #000;
span{font-size: 14px;}
}
dd{font-size: 12px;
padding-top: 5px;
line-height: 1.6;
}
img{width: 100%;}

}
.price{
position: absolute;
content: "";
width: 100%;
font-size: 1rem;
bottom: 10px;
right:10px;
font-size: 1.2rem;
text-align: right;
}
.icon{
position: absolute;
z-index: 999;
content: "";
width: 90px;
top:-20px;
left:-20px;
}
li:nth-child(1){width: 32%;
}
li:nth-child(2){
width: 16%;
margin-left: 4px;}
li:nth-child(3){
padding-left: 20px;
width: 50%;}
.pick_photo{
@include flex;
justify-content: flex-start;
flex-wrap: wrap;
width: 100%;
li{width: 100%;
img{width: 100%;}}
.ww{margin: 0 0px 7px 4px;}
}
}

.pickup2{
@include flex;
margin: 20px auto 10px;
justify-content: space-between;
width: 500px;
flex-wrap: wrap;
li{
position: relative;
width: 48%;
font-family: $font2;
font-size: 1.2rem;
img{width: 90%;}}
.icon{
position: absolute;
content: "";
width: 90px;
top:-20px;
left:-20px;
}
}
.txt{
width: 500px;
font-size: 12px;
letter-spacing: 0.08em;
margin: 10px auto 0;
}
 
/*----ボタン----*/
.button {
	margin:20px 0;
	font-family: $font2;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  outline: none;
	padding: 5px 20px;
	font-size: 1.5rem;
	letter-spacing: 0.1em;
		.small{font-size: 12px;}
}
.button::before,
.button::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.button,
.button::before,
.button::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.button {
  background-color:$black;
  border: 2px solid $black;
  color: #fff !important;
}
.button:hover {
  background-color: #fff;
  border-color: $black;
  color: $black !important;
}

/*----右メニュー----*/
.rightnav{
@include flex;
position: fixed;
top:100px;
right:0px;
width: 130px;
flex-wrap: wrap;
z-index: 9999;
li{width: 160px;
padding: 5px;
color: #fff;
font-size: 12px;
font-weight: 400;
margin: 1px 0;
text-align: left;
a{color: #fff;}
p{font-family: $font1;
margin: 0 3px;
font-size: 1rem;
color: #FFF;
display: inline-block;}}
li:nth-child(1){background: #aca765;}
li:nth-child(2){background: #6ac894;}
li:nth-child(3){background: #f8b2b2;}
li:nth-child(4){background: #66cccc;}
li:nth-child(5){background: #404040;}
}

}

/*-------------SP用-------------*/
@media screen and (max-width:640px) {
    .wrapper{
        margin: 30px auto;
        width: 100%;
		padding: 10px 0 10px;
		background: #fff;
		text-align: center;
    }
	p{margin: 5px 0;
	padding: 0;
  }
/*----header----*/
    header{
        display: inline-block;
        margin: 50px auto 0;
        /*padding: 20px 0;*/
    }
   

/*----read----*/
    h1{
        margin: 5px 0 20px;
        padding: 0;
        color: #0071DB;
        font-weight: 600;
        font-size: 16px;
        letter-spacing: 0.1em;
        line-height: 1.5;}
    
 /*----menu----*/  
    .menu{
	@include flex;
	width: 98%;
	margin: 20px 0 50px;
	justify-content: space-between;
	flex-wrap: wrap;
	li{
	position: relative;
	width: 48%;
	}
	p{@include giji;
	font-family: $font2;
	font-weight: 600;
	top:90px;
	left:0;
	right: 0;
	font-size: 1.5rem;
	span{font-size: 12px;}}
	.num{@include giji;
		font-family: $font1;
		font-size: 2rem;
		top:15px;
		left:17px;
		letter-spacing: 0.08em;
		z-index: 999;
		}
	}
    
	.brand_menu{
	@include flex;
	justify-content: space-between;
	width: 98%;
	margin: 0;
	flex-wrap: wrap;
	li{width: 24.5%;
	margin: 10px 0;
	img{width: 100%;}}
	li + li {
    border-left: 1px solid #A7A7A7;
}
li:nth-child(5) {
    border: none;
}
	}
	
	
	
	
.white{
width: 100%;
background: #fff;
margin: 20px 0 50px;
padding: 5px 0;
}	
  
/*----メインコンテンツ----*/
   .item_txt{
        margin: 10px 0;
        line-height: 1.5;
        font-size: 14px;
    }
    .item_txt_big{
        font-family: $font2;
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 20px;
    }
    .reco_main{
        position: relative;
           margin: 10px  0 0 10%!important; 
        width: 80%;
        
        }
    
    .reco_item{
           margin: 10px  0 0 10%!important; 
        width: 80%;
        img{width:50%;}
        }
    
    .recommend_box{
        @include flex;
        justify-content: space-between;
        width: 100%;
        flex-wrap: wrap;
        li{width: 98%;
        background: #fff;
            padding: 10px;
            margin-top: 10px;
            box-sizing: border-box;
        .title{
                font-size: 2rem;
                font-family: $font2;
            font-weight: 600;
                p{font-size: 12px;
                font-family: $font2;}
            }}
        .title2{
            position: relative;
            font-family: $font2;
            font-size: 1.5rem;
            font-weight: 600;
            margin: 10px 0;
            width: 100%;
            span{background: #fff;}
            text-align: left;
            overflow: hidden;
        }
        .title2:after{
            @include giji;
            border-top:1px dotted #000;
            width: 90%;
            top:15px;
        }
        
        .point{
            @include flex;
            width: 100%;
            justify-content: space-between;
            li{width: 33%;
            padding: 0;}
        }
        .point_txt{
            padding: 10px 10px 0;
            font-size: 14px;
            text-align: left;
            line-height: 1.5;

        }
        .colorvari{
            @include flex;
            width: 100%;
            justify-content: flex-start;
            li{width: 24%;
                padding: 0;
                margin-right: 1%;
                img{width: 100%;}}
        }
        
    }

.photo{margin: 20px auto 10px;}

/*----ランキング----*/   

h2{
width: 98%;
margin: 20px 0;
padding: 0;
display: inline-block;
font-family: $font1;
font-size: 3rem;
letter-spacing: 0.2em;
border-bottom: 1px solid #000;
font-weight: normal;
p{font-size: 14px;
font-family: $font2;
letter-spacing: 0.2em;}
.span{
		font-family: $font1;
		font-size: 3rem;
		letter-spacing: 0.08em;
		z-index: 999;
		}
}
.txt{
margin-top: -10px;
font-size: 14px;
line-height: 1.5;
}

h3{
display: block;
margin: 20px 0 0px;
padding: 0;
img{width:45%;}
}

h4{
display: block;
margin: 20px 0 0px;
padding: 0;
font-family: $font2;
font-size: 1.8rem;
width: 90%;
margin-left: 5%;
border-bottom:1px solid #000;
}

#ranking{
margin: 50px 0;
position: relative;
display: inline-block;
width: 100%;
height: auto;
padding: 0 0 50px;
dl {font-family: $font2;
letter-spacing: 0.2em;}
dt{font-size: 16px;}

dd{font-size: 14px;
p{
position: relative;
color:#C50003;
font-size: 16px;
font-weight: 600;
 margin: 5px 0 0 -40px;
}
p:after{
position: absolute;
content: "円(税込)";
font-size: 10px;
margin-left:3px;
margin-top: 5px;
}}


}


#ranking:before{
position: absolute;
content: "";
background: url("../img/2020_09backpack_rankbg01.jpg")no-repeat;
top:0;
left: 0;
width: 100%;
height: 599px;
background-size: cover;
z-index: -1;
opacity:0.7; 
}

#ranking:after{
position: absolute;
content: "";
background: url("../img/2020_09backpack_rankbg02.jpg")no-repeat;
bottom:0;
left: 0;
width: 100%;
height: 418px;
background-size: cover;
z-index: -1;
opacity:0.7; 
}


.no01{
width: 90%;
text-align: center;
margin: 30px auto;
p{font-size: 12px;
line-height: 1.5;}
.no01_cont{
@include flex;
justify-content: space-between;
width: 100%;
li{
position: relative;
width: 49%;
img{width: 100%;}}
}
li:nth-child(1):before{
@include giji;
background:url("../img/ranking_icon_01.png")no-repeat;
background-size: cover;
width: 60px;
height: 70px;
top:-15px;
left:-10px;
}
}
  
.no02{
@include flex;
width: 98%;
flex-wrap: wrap;
justify-content: space-between;
li{
position: relative;
background: #fff;
width: 48%;
padding: 10px 0;
img{width: 100%;
margin: 5px 0;}
p{font-size: 12px;
line-height: 1.5;
padding: 0 5px;}
}
li:nth-child(1):before{
@include giji;
background:url("../img/ranking_icon_2.png")no-repeat;
background-size: cover;
width: 35px;
height: 35px;
top:5px;
left:5px;
}
li:nth-child(2):before{
@include giji;
background:url("../img/ranking_icon_3.png")no-repeat;
background-size: cover;
width: 35px;
height: 35px;
top:5px;
left:5px;
}
li:nth-child(3):before{
@include giji;
background:url("../img/ranking_icon_4.png")no-repeat;
background-size: cover;
width: 35px;
height: 35px;
top:5px;
left:5px;
}
li:nth-child(4):before{
@include giji;
background:url("../img/ranking_icon_5.png")no-repeat;
background-size: cover;
width: 35px;
height: 35px;
top:5px;
left:5px;
}
}


/*outdoor*/
#outdoor{
margin: 50px 0;
position: relative;
display: inline-block;
width: 100%;
height: auto;
padding: 0 0 30px;
}

#lady{
margin: 50px 0;
position: relative;
display: inline-block;
width: 100%;
height: auto;
background: #F4E3E3;
padding: 0 0 30px;
}

#men{
margin: 50px 0;
position: relative;
display: inline-block;
width: 100%;
height: auto;
background: #DFFBFF;
padding: 0 0 30px;
}

#outdoor:before{
position: absolute;
content: "";
background: url("../img/2020_09backpack_outbg01.jpg")no-repeat;
top:0;
left: 0;
width: 100%;
height: 568px;
background-size: cover;
z-index: -1;
opacity:0.7; 
}

#outdoor:after{
position: absolute;
content: "";
background: url("../img/2020_09backpack_outbg02.jpg")no-repeat;
bottom:0;
left: 0;
width: 100%;
height: 350px;
background-size: cover;
z-index: -1;
opacity:0.3; 
}

/*#lady:before{
position: absolute;
content: "";
background: url("../img/2020_09backpack_outbg01.jpg")no-repeat;
top:0;
left: 0;
width: 100%;
height: 568px;
background-size: cover;
z-index: -1;
opacity:0.7; 
}

#lady:after{
position: absolute;
content: "";
background: url("../img/2020_09backpack_ladybg02.jpg")no-repeat;
bottom:0;
left: 0;
width: 100%;
height: 350px;
background-size: cover;
z-index: -1;
opacity:0.3; 
}*/

  

    
/*////pickup contents////*/    
    
.pickup{
@include flex;
width: 98%;
background: #dfdfdf;
margin: 30px auto 10px;
padding: 10px 10px 30px;
flex-wrap: wrap;
li{text-align: left;
position: relative;
dl{margin-bottom: 10px;}
dl dt{
font-size: 1.2rem;
font-family: $font2;
border-bottom: 1px solid #000;
span{font-size: 14px;}
}
dd{font-size: 12px;
padding-top: 5px;
line-height: 1.6;
}
img{width: 100%;}

}
.price{
position: absolute;
content: "";
width: 100%;
font-size: 1rem;
bottom: -20px;
right:10px;
font-size: 1.2rem;
text-align: right;
}
.icon{
position: absolute;
z-index: 999;
content: "";
width: 90px;
top:-20px;
left:-20px;
}
li:nth-child(1){width: 100%;
}
li:nth-child(2){
width: 100%;
}
li:nth-child(3){

width: 100%;}
.pick_photo{
@include flex;
justify-content: flex-start;
flex-wrap: wrap;
width: 100%;
li{width: 49%;
margin: 5px 0 0;
img{width: 100%;}}
.ww{margin: 5px 5px 7px 0px;}
}
}

.pickup2{
@include flex;
margin: 20px auto 10px;
justify-content: space-between;
width: 98%;
flex-wrap: wrap;
li{
position: relative;
width: 48%;
font-family: $font2;
font-size: 16px;
img{width: 90%;}}
.icon{
position: absolute;
content: "";
width: 90px;
top:-20px;
left:-20px;
}
}
.txt{

font-size: 12px;
letter-spacing: 0.08em;
margin: 10px auto 0;
}
 
/*----ボタン----*/
.button {
	margin:20px 0;
	font-family: $font2;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  outline: none;
	padding: 5px 20px;
	font-size: 1.5rem;
	letter-spacing: 0.1em;
		.small{font-size: 12px;}
}
.button::before,
.button::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.button,
.button::before,
.button::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.button {
  background-color:$black;
  border: 2px solid $black;
  color: #fff !important;
}
.button:hover {
  background-color: #fff;
  border-color: $black;
  color: $black !important;
}

}