@charset "utf-8";

body{
	
	background-color: #e8e4d8;
	margin: 0 auto;
	width: 100%;
	font-family: 'Noto Sans JP', sans-serif; 
	font-size: 13px;	

}


/*背景画像設定のための指示*/

body::before { 
	
	position: absolute;/*絶対位置指定*/
	width: 100%;
	height: 100%;
	background-image: url(photo/back1.jpg);
	background-repeat:no-repeat;
	opacity: 0.5; /* 透明度調整 */
	z-index: -1; /* 他の要素より後ろに配置（背景として扱う）*/
	content: ""; /* 擬似要素に必要 */
	background-position: center ; /* 画像を中央配置 */
	background-size: cover; 
}


/*ヘッダー部分*/

header{
	
	display: flex; /*横並び*/
	color: #6f4f32;
	padding: 20px 0px; 
	width: 90%;
	margin: 0 auto;
}


.logo{
	
	flex-shrink: 0; /* 画像が小さくならないよう固定*/
	margin: 0 auto;
}

.logo img {

	vertical-align: bottom; /* 画像をテキストと同じラインに揃える */
}

.introduction{
	
	text-align: center;
	display: flex; /* フレックスボックスを有効化　下揃えにするため */
	align-items: flex-end; /* 画像と下揃え */
	margin: 0 auto;
	letter-spacing: -2px;
	font-size: 13px;
	font-weight: normal;
}

/*メニュー部分*/

.menu{
	
	background-color: #745343;	
	text-align: center;
	padding: 15px 15px 20px 15px;
	margin: 0px auto 20px auto;/*menuとmediaの間に20pxの余白を入れる*/
	width: 90%;
	
}

/*メニュー　画像配置の仕方など指示*/

 .menu-images{

	 display: grid; /* グリッドレイアウト */
	 grid-template-columns: repeat(2,1fr); /* 2列に設定 等間隔で配置 */
	 gap: 30px; /* 画像間の隙間を設定 */
	 justify-items: center; /* 画像を中央揃え*/

	 }

/*メニュー画像の装飾指示*/

.images-decoration{
	
	border: 2px solid #dbd5c5;
	box-shadow: 5px 5px 0px #ab8668;
	
}

/*メニュー画像のサイズ*/

  .menu-images img {
	  
      width: 120px; 
      height: 120px;
      object-fit: cover; /* 画像のアスペクト比を維持しながら収める*/
	  
    }

/*sns hpの部分*/

.media{
	
	background-color: #DBD5C5;	
	text-align: center;
	width: 90%;
	color: #6f4f32;
	margin: 0 auto 20px auto;/*sns hpとsalon informationの間に20px*/
	font-size: 14px;
	padding: 15px ; 
	
}

.media-images{

	width: 100%;
	margin: 20px auto 0px auto;

}


  .media-images img {
	  
      width: 30%;
	  padding: 0px 2px;
	  
  }

  
  .media-images a {
	
    width: 30%; /* 画像の幅と揃える */
    text-align: center;
}

  


/*店舗案内*/

	
footer{
	
	background-color: #745343;	
	text-align: center;
	width: 90%;
	padding: 15px;
	margin: 0 auto 20px auto;
	
}

table{
	
	border-collapse: collapse;
	color: #6f4f32;
	margin: 0 auto;
	
	/*文章を揃える*/
    justify-content: center; /* 水平方向の中央揃え */
    align-items: center; /* 垂直方向の中央揃え */
}

th{
	
	background-color: #dbd5c5;
	border: 2px solid #6f4f32;
	padding: 10px;
	width: 70px;
	text-align: center;
}

td{
	
	background-color: #e8e4d8;
	border: 2px solid #6f4f32;
	padding: 10px;
	text-align: left;
}


/*タイトルの指示　共通部分の指示*/
h2{
	
	margin: 0;
	padding: 0;
	font-family: "Times New Roman", Times, "serif";
	color: #e8e4d8;
	
}

h2.sub-title{
	
	margin: 0 0 10px 0;
	padding: 0;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: normal;
	color: #e8e4d8;
	
}

/*メニュータイトル　　サイズ調整*/

.menu h2{

	font-size: 20px;
}

.menu h2.sub-title{

	font-size: 15px;
}

/*店舗案内タイトル　サイズ調整*/

footer h2.sub-title{
	
	font-size: 14px;
}

/*sns hp部分タイトル 文字の太さ等調整*/

.sns{
	
	font-weight: 700;
	font-size: 21px;
	font-family: "Times New Roman", Times, "serif";

}


.hp{
	
	font-weight: 550;	/*文字の太さ調整*/
	font-size: 21px;
	font-family: "Times New Roman", Times, "serif";
	color: #6d441f;
}