@charset "utf-8";
h3.subttl {
  display: block;
  font-size: 3rem;
  font-weight: bold;
  padding: 2% 0;
  position: relative;
  text-align: center;
  margin-bottom: 10px;
}

h3.subttl span,
h4.menu span {
  font-size: 1.4rem;
  margin-left: 5px;
}

h4.menu {
  background: #333;
  display: block;
  font-size: 2rem;
  padding: 6px 0 6px;
  position: relative;
  text-align: center;
  font-weight: bold;
  color: #fff;
  margin-top: 10px;
}

.systemBox {
  text-align: left;
  /*width: 96%;*/
  margin: auto;
  overflow: hidden;
}

.fullBox {
  width: 100%;
  margin-bottom: 7%;
  text-align: center;
}

.systemBox p {
  font-size: 1.6rem;
  line-height: 2;
  margin-top: 1%;
}

.systemBox .caution {
  font-size: 1.2rem;
  border: 1px solid #c22047;
  padding: 1%;
  text-align: center;
}

.leftBox {
  float: left;
  width: 49%;
}

.rightBox {
  float: right;
  width: 49%;
}

table.system {
  border: medium none;
  border-collapse: collapse;
  line-height: 1.8;
  margin-top: 5px;
  text-align: left;
  width: 100%;
  margin-bottom: 1%;
}

table.system tr {
  border-bottom: 1px dotted #999;
}

table.system th {
  font-size: 2.6rem;
  padding: 10px 0;
  width: 40%;
}

table.system td {
  font-size: 2.6rem;
  padding: 10px 2% 10px 0;
  vertical-align: top;
  width: 58%;
  text-align: right;
}

table.system th span,
table.system td span {
  font-size: 1.4rem;
}

table.pricelist {
}

table.pricelist th,
table.pricelist td {
  font-size: 1.8rem;
}

table.arealist th {
  font-size: 1.6rem;
  text-align: left;
  width: 70%;
}

table.arealist td {
  font-size: 1.8rem;
  width: 30%;
  vertical-align: middle;
}

table.arealist td .pricecolor0::after {
  display: inline-block;
  content: "■";
  color: #9de0fd;
  font-size: 2rem;
  margin-right: 0.2rem;
}

table.arealist td .pricecolor1::after {
  display: inline-block;
  content: "■";
  color: #fecfd5;
  font-size: 2rem;
  margin-right: 0.2rem;
}

table.arealist td .pricecolor2::after {
  display: inline-block;
  content: "■";
  color: #debefe;
  font-size: 2rem;
  margin-right: 0.2rem;
}

table.arealist td .pricecolor3::after {
  display: inline-block;
  content: "■";
  color: #b6ebdf;
  font-size: 2rem;
  margin-right: 0.2rem;
}

table.arealist td .pricecolor4::after {
  display: inline-block;
  content: "■";
  color: #ffcc99;
  font-size: 2rem;
  margin-right: 0.2rem;
}

.coin {
  width: 25px;
  vertical-align: middle;
}

.areamap {
  max-width: 870px;
  margin: 1% auto 2%;
}

.card {
  max-width: 520px;
  margin: 1% auto 2%;
}

.about {
  text-align: left;
}

p.shoptel {
  font-size: 3rem;
  font-weight: bold;
}

/*Agreement*/

ol.listmark {
  margin: 1em 0;
  padding: 1% 2% 1% 10%;
  text-align: left;
  border: 1px solid #c22047;
  font-weight: bold;
}

ol.listmark li {
  font-size: 1.5rem;
  padding: 1% 0;
  list-style-type: decimal;
}

@media screen and (max-width: 480px) {
  h3.subttl {
    font-size: 2rem;
  }
  h4.menu {
    font-size: 1.6rem;
  }
  .systemBox {
    margin-top: 15px;
    width: 94%;
    border: none;
    padding: 0 3%;
  }
  .leftBox {
    float: none;
    width: 100%;
  }
  .rightBox {
    float: none;
    width: 100%;
    margin-top: 20px;
  }
  .ajst {
    margin-top: 0px;
  }
  table.system th,
  table.system td {
    font-size: 1.8rem;
  }
  table.pricelist th,
  table.pricelist td {
    font-size: 1.5rem;
  }
  table.pricelist th span,
  table.pricelist td span {
    font-size: 1.2rem;
  }
  .systemBox p {
    font-size: 1.4rem;
    line-height: 1.6;
    margin-top: 15px;
  }
  p.shoptel {
    font-size: 2.4rem;
    font-weight: bold;
    text-align: center;
  }
}

@media screen and (max-width: 480px) {
  .fullBox {
    text-align: left;
    margin-bottom: 10%;
  }
}