@charset "UTF-8";

body {
  margin:0;
  padding:0;
  color: #fff;
  background-color: #fff;
  line-height: 1.7;
  font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN",  Osaka, sans-serif;
  font-size: 82%;
  text-align: center;
}

/* ヘッダー */
.head{
  height: 12vh;
  width: 100%;
  background: url(../common/back-pattern-01.png) repeat-x;
}

.logo{
  width: 20vw;
  padding: 2.5% 0 0 2.5%;
  float: left;
}

.logo img{
  width: 20vw;
}

.call{
  margin-left: 55vw;
  width: 30vw;
  text-align: right;
  padding-top: 2.5%;

}

.call span{
  font-size: 162%;
}



/* メイン */
.main{
  height: 80vh;
  width: 100%;
  box-shadow: inset 0 5px 10px 0 rgba(0, 0, 0, .3);
  background-color: #e8d5c2;
  overflow: hidden;
}

.main img{
  display: block;
  height: 100%;
  margin: 0 auto;
  box-shadow: inset 0 5px 10px 0 rgba(0, 0, 0, .3);
}

/* フッター */
.foot{
  height: 8vh;
  width: 100%;
  background: url(../common/back-pattern-01.png) repeat-x;
  text-align: center;
  padding-top: 2vh;
}


@media (max-width: 767px) {

body {
  font-size: 42%;
}

.head{
  height: 16vh;

}

.logo{
  width: 100vw;
  padding: 5% 0 0 0;
  float: none;
}

.logo img{
  width: 50vw;
}

.call{
  margin-left: 0;
  width: 100vw;
  text-align: center;
  padding-top: 2.5%;

}

/* メイン */
.main{
  height: 76vh;
}

/* フッター */
.foot{
  height: 8vh;
}



}