@charset "utf-8";

/*----------------------------------------------------------------------------------------------------

  飲食店の方へ
  
----------------------------------------------------------------------------------------------------*/

@media print,screen and (min-width:641px) {
  .s-cont {
    padding-top:60px;
    padding-bottom:100px;
  }
}

@media screen and (max-width:640px) {
  .s-cont {
    padding-top:2em;
  }
  
  .message {
    text-align:left;
  }
}

.how {
  text-align:left;
}

.how__box {
  border-top:1px solid #d2d2d2;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:justify;
  -ms-flex-pack:justify;
  justify-content:space-between;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
}

.how__box .ttl {
  font-weight:bold;
  color:#d72323;
  padding-bottom:0.5em;
}

.how__box .icon span {
  border-radius:100%;
  border:2px dashed #d72323;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:center;
  -ms-flex-pack:center;
  justify-content:center;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
}

@media print,screen and (min-width:641px) {
  .how {
    margin-top:80px;
  }
  
  .how .how__box:last-child {
    border-bottom:1px solid #d2d2d2;
  }
  
  .how__box {
    padding:60px 4%;
  }
  
  .how__box .icon {
    width:20%;
    min-width:220px;
  }
  
  .how__box .icon span {
    width:100%;
    height:0;
    padding-top:100%;
    position:relative;
  }
  
  .how__box .icon img {
    max-width:110px;
    width:45%;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
  }
  
  .how__box .cont {
    width:80%;
    padding-left:60px
  }
}

@media screen and (max-width:640px) {
  .how {
    margin-top:2.5em;
    padding-left:0;
    padding-right:0;
  }
  
  .how__box {
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
    padding-left:5%;
    padding-right:5%;
    padding-top:2.75em;
    padding-bottom:2.5em;
  }
  
  .how__box .icon span {
    width:calc(160 / 640 * 100vw);
    height:calc(160 / 640 * 100vw);
  }
  
  .how__box .icon img {
    width:50%;
  }
  
  .how__box .ttl {
    text-align:center;
    padding-top:1em;
  }
  
  .p-mailsend {
    padding-top:0;
  }
}