/* ===== ヘッダーのスタイル ===== */
/* ヘッダーの箱 */
header {
  background-image: url(img/sueyosi_bg2.png);/* 背景画像 */
  
  height: 600px;/* 高さ */
  padding-top: 150px;/* 上がわの余白 */
  background-size:cover;
}


/* ===== お店紹介のスタイル ===== */
/* セクション */
.shop {
  background-color: #ffffee;/* 背景の色 */
  color: #00008b;
  padding: 30px;
}

.shop1 {
  background-color: #ffffee;/* 背景の色 */
  color: #ffa500;
  padding: 30px;
}

.shop2 {
  background-color: #ffffee;/* 背景の色 */
  color: #006400;
  padding: 30px;
}

.shop3 {
  background-color: #ffffee;/* 背景の色 */
  color: #808080;
  padding: 30px;
}

.shop4 {
  background-color: #ffffee;/* 背景の色 */
  color: #b22222;
  padding: 30px;
}



/* h2見出し */
.title {
  font-size: 30px;
  border-left-style: solid;
  border-left-width: 10px;
  padding-left: 15px;
  margin-bottom: 50px;
}

/* 段落 */
.shop p {
  font-size: 30px;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 30px;
  height: 300px;
  position:relative;
}

.shop1 p {
  font-size: 30px;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 30px;
  height: 400px;
  position:relative;
}

.shop2 p {
  font-size: 30px;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 30px;
  height: 300px;
  position:relative;
}

.shop3 p {
  font-size: 30px;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 30px;
  height: 300px;
  position:relative;
}

.shop4 p {
  font-size: 30px;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 30px;
  height: 300px;
  position:relative;
}
/* 画像 */
.shop img {
  float: right;/* 画像や箱の回り込み */
}

.shop1 img {
  float: right;/* 画像や箱の回り込み */
}

.shop2 img {
  float: right;/* 画像や箱の回り込み */
}

.shop3 img {
  float: right;/* 画像や箱の回り込み */
}

.shop4 img {
  float: right;/* 画像や箱の回り込み */
}
/* ===== パン紹介のスタイル ===== */
.photo {
  padding: 30px;
  background-image: url(img/wood.jpg);
}

/* h2見出し */
.photo h2 {
  color: #ffffff;
  border-color: #ffcc11;
}

/* h3見出し */
.photo h3 {
  color: #663300;
}

/* 段落 */
.photo p {
  color: #ffffff;
  clear: left;/* 画像や箱の回り込みをやめる */
}

/* 大きな箱 */
.big {
  background-color: #ffffff;
  width: 500px;/* 横幅 */
  padding: 15px;
  margin: 20px;
  box-shadow: 10px 10px 20px #000000;/* 影 */
  float: left;
  transform: rotate(-5deg);/* 回転させる */
}

/* 小さな箱 */
.small {
  background-color: #ffffff;
  width: 240px;
  padding: 15px;
  margin: 20px;
  box-shadow: 10px 10px 20px #000000;
}

/* 箱 */
.box {
  float: left;
}

.button{
  text-decoration: none;
  padding: 20px;
  background-color:#000;
  color: #fff;
  position:absolute;
  bottom:20px;
  left:20px;
}

.button:hover{
  background-color: #fff;
  transition: 1s;
  color: #000;
}