@charset "UTF-8";

/*設定の初期化*/
body
{
    width: 100%;
    margin:0;
    padding:0;
    background-color:#ffffff;
    color:#333333;
    font-size:15px;
    line-height:2;
}
/*リストのぽっちが消える*/
ul
{
    margin:0;
    padding:0;
}

/*ブラウザの規定スタイルを解除*/
p,h1,h2,h3,h4,h5,h6
{
    margin-top:0;
}

/*ブラウザによって画像の下に意図しない余白が入ることがあるから*/
img
{
    vertical-align:bottom;
}

a{
    text-decoration: none;
}

header,nav,a,div,ul,li{
    margin: 0;
    padding: 0;
}

/*初期設定完了*/



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

header{
    width: 100%;
    height: auto;
    background-color: #ffffff;
    font-size: 15px;
    margin: 30px 0 10px 0;
    overflow: hidden;
}


#nav{
    margin: 0 0 0 5%;
    display: inline-block;
    width: 90%;
    background-color: #ffffff;
}

#logo-img{
    width: 160px;
    height: auto;
    margin: 0 0 0 5%;
}

#nav-btn li{
    margin: 2px;
    padding: 0;
    display: inline-block;
}
#nav-btn a{
    display: inline-block;
    color: #050000;
    width: 120px;
    height: 30px;
    text-align: center;
    background-color: #ffffff;
    border: 2px solid #48a873;
}
#nav-btn a:hover{
    display: inline-block;
    color: #000000;
    background-color: #dfe09d;
    border: 2px solid #dfe09d;
    width: 120px;
    height: 30px;
    text-align: center;
}


/*top-image-------------------------------------------------------*/
#top{
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
}
#top-image{
    width: 100%;
    height: auto;
}

/*about-------------------------------------------------------*/

#about-h1{
    width: 90%;
    height: auto;
    margin: 5% 5% 0 5%;
}
#about{
    width: 79%;
    height: auto;
    background-color: #ffffff;
    border: 6px solid #dfe09d;
    margin: 0 5% 5% 5%;
    padding: 5%;
}
#about h3{
    width: auto;
    padding: 0;
    margin: 0 0 0 0;
    color: #6b6b6b;
}
#about h2{
    width: auto;
    padding: 0;
    margin: 5% 0 0 0;
    color: #ff6e0e;
}


/*stylist-------------------------------------------------------*/

#stylist{
    width: 100%;
    height: auto;
    margin: 0;
    background-color: #48a873;
    padding: 5% 0 5% 0;
}

#stylist h1{
    margin: 0 5% 0 5%;
    color: #ffffff;
}
#stylist img{
    width: 360px;
    height: auto;
    margin: 0 5% 0 5%;
}
#stylist h4{
    width: 360px;
    display: inline-block;
    color: #ffffff;
    margin: 0 5% 0 5%;
}

/*access-------------------------------------------------------*/

#access{
    width: 100%;
    height: 300px;
    margin: 0;
    background-color: #ffffff;
    padding-top: 5%;
}

#access h1{
    margin: 0 5% 0 5%;
    color: #000000;
}
#access h4{
    width: 60%;
    display: inline-block;
    color: #000000;
    margin: 5% 5% 0 5%;
}

#map{
    margin: 5%;
    padding: 0;
}



/*catalog-------------------------------------------------------*/

#catalog-title{
    background-color: #dfe09d;
    margin: 0;
    padding: 60px 5% 0 5%;
}
#catalog-title h1{
    margin: 0;
}
#catalog-title h5{
    margin: 0;
}

#catalog{
    width: 100%;
    height: 600px;
    background-color: #dfe09d;
    overflow: hidden;
}

.slider {
    width: 800%;
    height: 100%;
    overflow: hidden;
  
  }
  .slider-inner {
    width: 100%;
    height: 100%;
    animation: slider 25s infinite ease;
  }
  .slider-item {
    display: inline-block;
    width: 12.4%;
    height: 100%;
  }
  .slider-item img{
    height: 480px;
    width: auto;
    margin: 40px auto 60px 5%;
  }
  
  @keyframes slider {
	0% {
	transform: translateX(0%);
	}
    12.5% {
        transform: translateX(0%);
    }
	25% {
	transform: translateX(-12.5%);
	}
	37.5% {
	transform: translateX(-25%);
	}
	50% {
	transform: translateX(-37.5%);
	}
    62.5% {
        transform: translateX(-37.5%);
    }
    75% {
        transform: translateX(-25%);
    }
    87.5% {
        transform: translateX(-12.5%);
    }
    100% {
        transform: translateX(0%);
    }
}

/*menu-------------------------------------------------------*/

#menu{
    width: 100%;
    height: auto;
}

#menu img{
    color: #ffffff;
    width: 100%;
    height: auto;
    margin: 0;
    padding-bottom: 60px;
}



/*contact-------------------------------------------------------*/

#contact{
    width: 100%;
    height: 100px;
    margin: 0;
    background-color: #ffffff;
}

#contact h3{
    background-color: #ff6e0e;
    text-align: center;
}

#contact a{
    display: inline-block;
    width: 100%;
    color: #ffffff;
}


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

footer{
    text-align: center;
}
/*-------------------------------------------------------*/

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