@charset "utf-8";
body {
/* ソースのような背景を作成 */
  background-color: #f0f5f7; /* ベースの色 */
  background-image: radial-gradient(circle, #f3efe9 10%, rgba(16, 66, 172, 0) 60%), /* ソースの色と広がり */
                    radial-gradient(circle, #270164 5%, rgba(244, 67, 36, 0) 50%); /* 別のソースの色と広がり */
  background-size: 200% 300%; /* グラデーションのサイズを大きくする */
}


.mainimg {
    /* リボンの背景画像 */
    background-image: url(../images/takeout-2.webp);
    background-repeat: repeat-y;
background-size: cover;
height: auto;
}	

img {
    max-width: 300px;
    /* border: 1px solid #f00; */
  
}

h2 {
  font-size: 40px;
  text-align: center;
   padding: 2vw;
}


input {
  padding: 20px;
  /* border: 1px solid #f00; */
}
.counter {
  padding: 10px;
  background-color: #f5eee1;
  color: #622727;
  font-size: 20px;
 
}
p.buy {margin-bottom: 20px;
  padding: 20px;
  background-image: url(../images/back.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position:right;
 width: 200px;
 margin: 0 auto;
 margin-top: 20px;
 margin-bottom: 20px;
 border: 1px solid #690a0a;
}
.payment {
  background-color:#29a031;
  color: #fff;
  padding: 5px;
  margin: 20px 0 20px 0;

}
.useradress {
  display: block;
 width: 40%;

 margin: 0 auto;
 text-align: center;
}
form {
  height:auto;
  width: 100%;
  margin: 0 auto;
}
.useradress {
  background-color: #f5eee1e1;
  padding: 10px;
  width: 30%;
  margin: 0 auto;
 
}
 .back-rigth {
  background-image: url(../images/back.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center right;
} 
.back-left {
   background-image: url(../images/back.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center left;
}
.adress input {
  width: 90%;
  border: 3px solid transparent;
 border-image: url(../images/autumn.png) 30 round;
  height: 10px;
  text-align: left;
}

@media screen and (max-width:680px) {
  .sride {
    width: 60%;
    
  }
#top {
  height: auto;
 }
 .mainimg {
  height:auto;
 }
 .useradress {
  width: 70%;
}
 header img {
  width: 20vh;
  height: 20vh;
 }
}