@charset "UTF-8";

body {
  background: linear-gradient(#8ec5fc, #e0c3fc);　
  width:100%;
}
@media screen and (min-width:640px) {
  body{
    width:640px;
    margin: auto;
  }
}

.container{
  width: 100%;
  margin: 0 auto;
}

header{
  width: 100%;
  padding-top: 3vh;
  position: relative;
  text-align: center;
}
header img{
  width:40vw;
}

@media screen and (min-width:640px) {
  header img{
    width: 257px;
  }
}

main{
  margin:2vh 0 ;
}
.campaign{
  position: relative;
}

.pop{
  text-align: center;
}
.pop img{
  width: 95vw;
  height: auto;
  margin: 0 auto;
  display: inline;
}

@media screen and (min-width:640px) {
  .pop img{
    width: 608px;
  }

}

.sns{
  padding-top: 40px;
  text-align: center;
}

.official{
  text-align: center;
  padding-top: 30px;
}

.sns img{
  display: inline;
  width: 60%;
  padding: 5px;
}

/*.sns a{
  display: block;
  margin:0 auto;
}*/

.official img{
  display: inline;
  width: 75%;
  padding: 10px;
  margin: 0 auto;
}


.buttom a{
  display: block;
  margin: 0 auto;
  width: 50%;

}

.buttom img{
  width: 50%;
  height:auto;
  padding: 0;
  display: block;
  position: absolute;
  top:77%;
  margin: 0 auto;
}


footer{
  padding: 50px 0 10px 0;
  color: #453327;
  text-align: center;
}