@charset "utf-8";

/* -----------------共通部分----------------- */
html{
  font-size: 100%;
}

body{
  font-family: serif;
  color:darkolivegreen;
   background-image: url("../images/background.png");
	background-repeat: repeat;
	min-height: 100%;
	width: 100%;
}
h1{
	font-size: 0.6rem;
	color: #E5C1A4;
  background-color: rgba(233,162,120,1.00);
  text-shadow : 
    0 0 0.1em rgba(75,45,50,1),
    0.01em 0.02em 0.02em rgba(75,45,50,1);
  -webkit-background-clip : text;
}

a{
  text-decoration: none;
}

img{
  max-width: 100%;
}

	
/* -----------------ヘッダー部分----------------- */
header{
  
 	width: 100%;
	padding-top: 0.5rem;
	padding-bottom:0.5rem;
	align-items: flex-end;
		display: flex;
  justify-content: space-around;
}
		

.logo{
	width: 300px;
	height: auto;
}

	
#title{
	width: 300px;
	height: auto;
	text-align: center;
	}

.main-nav{
  display: flex;
    list-style: none;
 		width: 300px;
  
}

.main-nav li{
	font-size: 1.6rem;
	margin-left: 0.3rem;
	margin-right: 0.3rem;
	}

.main-nav a{
  color: #E5C1A4;
  background-color: rgba(233,162,120,1.00);
  text-shadow : 
    0 0 0.1em rgba(75,45,50,1),
    0.01em 0.02em 0.02em rgba(75,45,50,1);
-webkit-background-clip : text;
}

.main-nav a:hover{
  color: #FFFFFF;
	}

/* --------------フッターー部分--------------------- */
footer{
	background-color:darkolivegreen;
text-align: center;
padding-bottom: 30px 0;
margin-top: 2rem;
}

footer p{
	color: #fff;
	font-size: 1.5rem;
}

/* --------------スライドショー部分--------------------- */

 /*=== 画像の表示エリア ================================= */
.slide{
		position: relative;
  overflow: hidden;
                    /* 画像のサイズに合わせて変更ください */
  width:600px;
	height: 450px;
 margin-top:2%;   
	margin-right: auto;
	margin-left: auto;
	 }
 
 /*=== 画像の設定 ======================================= */
.slide img{
  display: flex;
  position: absolute;
                      /* 画像のサイズを表示エリアに合せる */
  width: auto;
  height: auto;
  opacity: 0;
  animation: slideAnime 56s ease infinite;
}
 
 /*=== スライドのアニメーションを段差で開始する ========= */
.slide img:nth-of-type(1) { animation-delay: 0s }
.slide img:nth-of-type(2) { animation-delay: 7s }
.slide img:nth-of-type(3) { animation-delay: 14s }
.slide img:nth-of-type(4) { animation-delay: 21s }
.slide img:nth-of-type(5) { animation-delay: 28s }
.slide img:nth-of-type(6) { animation-delay: 35s }
.slide img:nth-of-type(7) { animation-delay: 42s }
.slide img:nth-of-type(8) { animation-delay: 49s }
 
 /*=== スライドのアニメーション ========================= */
@keyframes slideAnime{
   0% { opacity: 0; transform: scale(.1, .1)}
   6% { opacity: 1; transform: scale(1, 1)  }
  6% { opacity: 1; transform: scale(1, 1)  }
  12% { opacity: 0; transform: scale(2, 2)  }
 100% { opacity: 0; transform: scale(2, 2)  }
}

/*infomationページの設定*/
.business_hours{
display: flex;
margin-top: 2rem;
justify-content: space-around;
}

.teikyuubi{
margin-left: 2rem;
margin-top: 2rem;
text-align: start;
}
.teikyuubi h3{
	line-height: 0.2rem
}
.profile_wrapper{
	display: flex;
	justify-content: space-around;	
	margin-top: 2rem;
}
.profile_wrapper img{
	margin-top: 1rem;
}
.profile{
	width: 50%
}
.profile h3{
	margin-top: 1rem;
}
aside{
	text-align: left;
	margin-top: 2rem;
}
.kounou{
	width: 50%;
	margin-top: 5rem;
}
.kounou_wrapper img{width: 440px;
height: 582px}
.hamamu{
	text-align: left;
	margin-top: 2rem
}
ul{
	margin-left: 1.5rem
}

.kounou_wrapper{
	display: flex;
	justify-content: space-around
}
.kounou_wrapper img{
	margin-top: 5rem;
}
.dog{
	display: flex;
	margin-top: 5rem;
	justify-content: space-around;
}
.wanko{
	width: 50%;
}
.wanko h3{
	font-size:2rem;
}
.wanko p{
	margin-top: 2rem;
}

/*priceページの設定*/
.sub-title{
	text-align: center;
	}
h1{
	margin-bottom: 0.8rem;
			font-size: 3rem;
	}

hr{
	widows: 100vw;
	height: 0;
  margin: 0;
  padding: 0;
  border: 0;
   border-top: 0.5px solid darkolivegreen;
  border-bottom: 1.5px solid #fff;
}
.main_menu{
	display: flex;
	margin-top: 1.5rem;
	justify-content: space-around;
}

	
.item{
	position: relative;
  margin: 2.5em auto;
	width: 28rem;
	height: 28rem;
	padding-top: 1.5rem;
	padding-left: 4rem;
	padding-right: 4rem;
	line-height: 2.6rem;
	word-break: break-all;
	text-align: center;
	background-color: linen;
	 box-shadow: inset 0 0 40px rgba(204, 186, 136,1), 0 2px 2px #ccc;
	
}
.item::before{
 display: block;
 position: absolute;
 content: "";
 width: 140px;
 height: 35px;
 left: 35%;
 top: -16px;
 background-color: rgba(204, 186, 136,0.3);/*テープ色*/
 box-shadow: 0 0 3px rgba(0,0,0,0.1);
 transform: rotate( -3deg ); /*テープ角度*/
}
	
h3{
	margin-bottom: 2rem;
	font-weight:bold;
}	
	
	
.sub_menu{
	display: flex;
	margin-top: 5rem;
	justify-content: space-around;
	margin-bottom: 3rem;
}
	
	
	.sub_item{
		position: relative;
  margin: 2.5em auto;
	width: 18rem;
	height: 20rem;
	padding-top: 1.5rem;
	padding-left: 4rem;
	padding-right: 4rem;
	line-height: 2rem;
	word-break: break-all;
	text-align: center;
	background-color: linen;
	 box-shadow: inset 0 0 40px rgba(204, 186, 136,1), 0 2px 2px #ccc;
			}
.sub_item::before{
 display: block;
 position: absolute;
 content: "";
 width: 100px;
 height: 35px;
 left: 30%;
 top: -16px;
 background-color: rgba(204, 186, 136,0.3);/*テープ色*/
 box-shadow: 0 0 3px rgba(0,0,0,0.1);
 transform: rotate( -3deg ); /*テープ角度*/
}
.sub_menu h2{
	font-size: 0.8rem;
}
.sub_menu h3{
	margin-bottom: 1rem
}
	
.sonota{
	text-align: center;
	font-size: 1.2rem;
	font-weight: bold;
	}
	
	
	
	
	

/* Contactページのみの設定
============================== */

/* 店舗情報の設定 */
#location{
	padding: 4% 0;
}
#location .wrapper{
	display: flex;
	justify-content: space-around;
}
.location-info{ /* 住所等 */
		width: 400px;
	}
.location-info h3{
	font-weight: bold;
	align-items: flex-end;
	}
.location-info p{padding-top: 0.4rem;
}

.location-map{
	width: 600px;
}
iframe{/*地図*/
	width: 600px;
}



/* メディアクエリーの設定
============================== */
@media screen and (max-width:767px){
	
/*ヘッダー==============*/
		.page-header.wrapper{
    flex-direction: column;
		align-items: center;
}
	.logo{
	text-align: center;
		width: 15rem;
	}
	
	.main-nav li{
	font-size: 1.5rem;
	}
	
	/*トップページ======*/
	.slide{
		width: auto;
		justify-content: center;
	}
	
/*価格表==============*/	
.main_menu{
	widows: 100%;
   flex-direction: column;
		margin: auto;
}
	
	.sub_menu{
		widows: 100%;
    flex-direction: column;
		margin: auto;
	}
	.sonota{
		width: 75%;
		margin: auto;
	}
	
	/*infomation==============*/
	.business_hours{
		widows: 100%;
		flex-direction: column;
		margin:auto;
		align-items: center;
		line-height: 1.2rem;
				}
	.teikyuubi{
		width: 85%;
	}
	.teikyuubi h3{
			line-height: 1.5rem;
		margin-top: 0.5rem;
		margin-bottom: 0.5rem;
	}
	.wrapper{widows: 100%;
		flex-direction: column;
	}
	.profile_wrapper{widows: 100%;
		flex-direction: column;
		align-items: center;
	}
	.profile{
		width: 75%;
		margin:auto;	
	}
	.kounou_wrapper{widows: 100%;
		flex-direction: column;
		align-items: center;
	}
	.kounou{
		width: 75%
	}
	.dog{widows:100%;
		flex-direction: column;
		align-items: center;	
	}
	.wanko{
		width: 75%
	}
	
	
	/*contact=================*/
	.location-info{
		width: 75%;
			margin: auto;
	}
	.location-map{
		width:100%;
		margin: 0,auto;
	}

	/*フッター====================*/
	footer{
		widows: 100%;
		align-items: center;
		margin-top: 2rem;
	}
	
}