@charset "UTF-8";
/* CSS Document */

html{
	font-size:100%;
}
body{

	margin: 0 auto;

	padding-top: 170px;
	color: #24292e24;
}

a{
	text-decoration: none;
}

p{font-size:1.3rem;

}



.site-title{
    white-space: nowrap;
	line-height: 1px;
	font-weight:600;
	font-size:2.4rem;
}

.site-title a{
	color:#561819;
}


#header{
	align-items: center;
	justify-content:center;
	max-width: 100%;
    margin: auto;
	background-color: white;
	display:flex;
	height: 170px;
	

}

#header {
position: fixed;
  width: 100%;
  top: 0;
  z-index: 10000;
}
#container {
max-width:960px;
	margin: auto;
	padding-top: 170px;
}


#header ul li a {
		color:black;
		transition: all 0.3s
		 }

#header ul li a {
transform: scale(1.2, 1.2);
  opacity: 0.7;
	}

#header ul {
	display:flex;
	padding: 10px 0;
	align-items: flex-start;
	
}



#header ul li {
	font-size: 0.9rem;
margin-left: 10px;
	margin-right: 10px;
	opacity: 0.5;
}

#header ul li a{
	color: "#24292e";
	}
#header .icon{
		width:120px;
}


}


.wrapper{
    max-width: 960;
	margin:0 auto;
	font-size: 0.9rem;
	}

section {
	color: black;
	}
	
.sec-title{
	line-height: 1px;
	text-align: center;
	color: black;
	font-size: 1.5rem;
  text-align: center;
	
 
	}

.third-title{
	line-height: 1px;
	text-align: center;
	color: black;
	font-size: 1.5rem;
  text-align: center;
	 margin-bottom:  5px;
	
 
	}



.ruby{
margin-top:  20px;
	
	text-align: center;
	
	}
#about{
	margin-top: 0 auto;
	
}

#about ul{
	padding: 30px;

}
#Shop{
	margin-top: 10px:
}


#Shop li {
	text-align: center;
	margin-top: auto;
}
	
#main img{
	width: 100%;
	max-width: 100%;
	margin: auto;
      }

#main picture{
	margin: auto;
	}


#main{
   
	margin-bottom: 20px;
	
}

/*====================
スマホを基本設計にする
 - 〜479px：スマートフォン縦
 - 480px〜599px：スマートフォン横
 - 600px〜959px：タブレット
 - 960px〜1279px：小型PC
 - 1280px〜：大型PC
====================*/

html {
  font-size: 100%;
  scroll-behavior: smooth;
}

body {
  color: #24292e;
  font-family: "Sawarabi Gothic";
}

a {
  text-decoration: none;
}

p {
  font-size: 1.3rem;
}

img {
  max-width: 100%; /* スマホサイズでも画像が縮小される。 */
}

li {
  list-style: none;
  font-size: 1.2rem;
}

/* wrapperは共通 */
.wrapper {
  max-width: 960px;
  margin: 170px auto 60px auto;
  font-size: 0.9rem; /* root em 最上位階層のHTML要素であるHTMLの文字サイズを基準とした相対値。HTMLの文字サイズを変更することで全体の文字サイズも変更できる */
  padding: 0 4%;
}

.site-title {
  line-height: 1px;
  font-weight: 600;
  font-size: 2.4rem;
}

.site-title a {
  display: block;
  color: #24292e;
}

.sec-title {
  font-size: 1.5rem;
  text-align: center;
  margin-bottom: 65px;
}

/*-------------------------------------------
Mainvisual
-------------------------------------------*/
#mainvisual {
  margin-bottom: 80px;
}

#mainvisual img {
  width: 100%;
  max-width: 1920px;
  height: 400px;
  object-fit: cover;
}




.contents {
	padding-top: 200px;
}

.wrapper  {
    padding-top: 200px;
    margin-top:-200px;
}

/*-------------------------------------------
Shop
-------------------------------------------*/


#Shop ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 50px;
}

#Shop ul li {
  width: 31%;
  margin-bottom: 23px;
}

#Shop ul li img {
  cursor: pointer;
  width: 640px;
  max-height: 417px;
  transition: all 0.3s;
}

#Shop ul li img:hover {
  transform: scale(1.2, 1.2);
  opacity: 0.7;
}

#Shop li {
	text-align: center;
	margin-top: auto;
}
	
#map iframe {
	
	margin:auto;
}


/*sp*/

@media screen and (max-width:700px){
	/*header*/
	#header {
	flex-direction: column;
		height:auto;
		line-height:20px;
		
		}
	
	
	
	.site-title{
		white-space: nowrap;
		padding-top: 30px;
	}
	#header ul li {
	
	padding-top: 20px;
	
    }
	
	#header ul li a {
		color:black;
		transition: all 0.3s
		 }
			
	#header li {
		font-size: 0.8rem;
		margin: 0 10 0 10;
		 }
	
	#header .icon{
		width:60px;
		padding-top: 20px;
		
       }
	
	
	#header ul {
		margin:auto;
		}
	
	#main img{
	width: 100%;
		margin: auto;
      }
 
 /* works */
  #Shop ul {
    flex-direction: column;
  }

  #Shop ul li {
    width: 100%;
  }

  /* news */
  #news dl {
    flex-direction: column;
  }

  #news dt {
    width: 100%;
    border-bottom: none;
    padding-bottom: 0;
  }

  #news dd {
    width: 100%;
    padding-top: 0;
  }

	
	}