@charset "utf-8";
@charset "utf-8";

/*========================================================================================================================


  ◇◆◇ Web予約 ◇◆◇
  
  
========================================================================================================================*/

@media print,screen and (min-width:641px) {
  #webrsv {
    padding-top:120px;
    padding-bottom:100px;
  }
}

@media screen and (max-width:640px) {
  #webrsv {
    padding-top:3.5rem;
    padding-bottom:3rem;
  }
}


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

  予約について
  
----------------------------------------------------------------------------------------------------*/

.h24 {
  display:inline-block;
  margin-left:auto;
  margin-right:auto;
  position:relative;
}

.h24 span {
  display:inline-block;
  margin-right:0.25rem;
}

.h24:before,
.h24:after {
  content:"";
  position:absolute;
  background-position:center center;
  background-repeat:no-repeat;
  background-size:contain;
}

.h24:before {
  background-image:url(../image/ic_sp.gif);
}

.h24:after {
  background-image:url(../image/ic_pc.gif);
}

.rsv_txt {
  line-height:2.4;
}

.rsv_txt .ka {
  display:inline-block;
  line-height:1.6;
  background:linear-gradient(transparent 55%, #fbdf8f 0);
  margin-right:0.5rem;
  padding:0 0.5rem;
  font-weight:500;
  font-size:118.8%;
}

@media print,screen and (min-width:641px) {
  .rsv {
    padding-bottom:40px;
  }
  
  .h24:before,
  .h24:after {
    width:160px;
    height:160px;
    top:50%;
  }
  
  .h24:before { left:-160px; transform:translate(-1.5em,-50%); }
  .h24:after { right:-160px; transform:translate(1.5em,-50%); }
  
  .rsv_txt {
    padding-top:40px;
    font-size:118.8%;
  }
}

@media screen and (max-width:640px) {
  .rsv {
    padding-top:120px;
    padding-bottom:1.5rem;
    margin-top:1rem;
  }
  
  .h24:before,
  .h24:after {
    width:120px;
    height:120px;
    top:-120px;
    margin-top:-1.5rem;
  }
  
  .h24:before { right:50%; margin-right:0.5em; }
  .h24:after { left:50%; margin-left:0.5em; }
  
  .rsv_txt {
    padding-top:1.5rem;
  }
}


#webrsv .mk {
    font-family: "mplus-1c";
    font-weight: 400;
    display: inline;
    line-height: 1.6;
    background: linear-gradient(transparent 55%, #fbdf8f 0);
    font-weight: 500;
    font-size: 112.5%;
	color: #503c32;
}


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

  QRコード
  
----------------------------------------------------------------------------------------------------*/

.qr_btn {
  overflow:hidden;
  padding-top:1.75rem;
}

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

@media screen and (max-width:640px) {
  .qr {
    padding-bottom:2.25rem;
  }
  
  .qr_btn .responBlock {
    min-width:580px;
  }
}


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

  注釈
  
----------------------------------------------------------------------------------------------------*/

.annot {
  background:url(../../image/lbg_pink.png) repeat left top;
  box-sizing:border-box;
  border-radius:8px;
  padding:6px;
}

.annot ul {
  list-style:none;
  background-color:#fff9fb;
  box-sizing:border-box;
  border-radius:6px;
  overflow:hidden;
  text-align:left;
}

.annot li {
  padding-left:1.25em;
  padding-top:0.5rem;
}

.annot li:first-child { padding-top:0; }

.annot li:before {
  content:"※";
  margin-left:-1.25em;
  margin-right:0.25em;
}

@media print,screen and (min-width:641px) {
  .annot {
    display:inline-block;
    margin-left:auto;
    margin-right:auto;
    vertical-align:top;
  }
  
  .annot ul {
    padding:2rem 2rem 0;
  }
}

@media screen and (max-width:640px) {
  .annot ul {
    padding:1.5rem 1.5rem 0;
  }
}