@charset "UTF-8";
/* すべての要素のmarginとpaddingを0に設定します */
* {
  margin: 0;/* 要素の外側の余白を0にする */
  padding: 0;/* 要素の内側の余白を0にする */
}

html,
body {
  margin: 0;
  padding: 0;
  font-size: 25px;
 font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;/* フォントを指定する */
}

/* 
全てのh1 */

h1 {
  color:#333399;/* フォントの色を指定する */
  font-size: 80px;/* フォントの大きさを指定する */
  font-family: 'Lobster', cursive;
  text-align: center;/* 文字・画像を中央にそろえる */
  background-image: url(img/frame.png);/* 背景画像を指定する */
  height:400px;/* 高さを指定する */
  padding-top: 40px;
  background-repeat: no-repeat;/* 背景画像の繰り返しを指定する */
  background-position: top center;/* 背景画像の位置を指定する */
}

/*
 h2のclass title */

.title {
  font-size: 40px;
  border-left-style: solid;/* 枠線のスタイルを指定する */
  border-left-color: #99FFFF;/* 枠線の色を指定する */
  border-left-width: 10px;/* 枠線の幅を指定する */
  padding-left: 15px;
  margin-bottom: 50px;
}

/* headerはここ */

header {
  height: 400px;
  padding-top: 30px;
  background: url("./img1/wagara.png") no-repeat center;
  background-size: cover;
  position: relative;
}

/* navはここ */

nav {
  background-color: #FFFFCC;/* 背景色を指定する */
  padding-top: 10px;
  padding-bottom: 10px;
}

nav a {
  color: #ff6600;
  text-decoration: none;/* 文字の装飾を指定する */
}

nav a:hover {
  color: #663300;
}

ul {
  list-style-type: none;/* リストのマーカーを指定する */
  padding-left: 0;
}

nav ul {
  margin-top: 0px;
  margin-bottom: 0px;
  text-align: center;
}

nav li {
  display: inline-block;/* 要素の表示形式を指定する */
  margin-right: 40px;
}

/* sectionのclass shop */

.shop {
  background-color: #ffffdd;
  color: #663300;
  padding: 30px;
}

.shop p {
  font-size: 25px;
  background-color: #8AE397;
  padding: 20px;
  height:auto;
  border-radius: 30px;/* 枠線の角丸を指定する */
}

.shop img {
  float: right;/* 要素の回り込みを指定する */ max-width:100%;height:auto
}

/* sectionのclass photo */

.photo {
  padding: 30px;
  background-image: url(img/wood.jpg);
}

.photo h2 {
  color: #ffffff;
  border-color: #ffcc11;
}

.photo p {
  color: #ffffff;
  clear: left;/* 要素の回り込みを解除する */
  margin: 20px;}

.big {
  background-color: #ffffff;
  width: 470px;padding: 30px;/* 影を指定する */
  float: left;
  transform: rotate(-5deg);/* 要素の回転を指定する */
}

.small {
  background-color: #ff6600;
  width: 210px;
  padding: 30px;
  margin: 30px;
  box-shadow: 10px 10px 20px #000000;
}

.box {
  float: left;
}

/* sectionのclass access */

.access {
  background: #ffffdd;
  color: #663300;
  padding: 30px;
  height: 800px;
}

.access h3 {
  font-size: 50px;
  font-family: 'Lobster', cursive;
  margin-top: 0;
}

.access div {
  width: 95%;
  float: left;
}

/* footerはここ */

footer {
  text-align: center;
  color: #ffffff;
  background: #8AE397;
}