@charset "shift_jis";
/* system */
.system .inner {padding: 0 1.5%;}
/* pricelist */
.pricelist {
  width: 100%;
  border: solid 1px #b5b5b6;
  vertical-align: middle;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(1px);
}
@media screen and (min-width: 1000px){
}
.pricelist th {
  width: 12%;
  padding: .8em 1em;
  border-right: solid 1px #b5b5b6;border-bottom: solid 1px #b5b5b6;
  text-align: center;vertical-align: middle;color: var(--color-white);
}
.pricelist tr:first-of-type th:not(first-of-type) {padding:.2em 1em;}
.pricelist th.odd {background:#b7a7c4; color:#000;}
.pricelist th.even {background:#f6eb95; color:#000;}
.pricelist td {
  padding: .5em;
  border-right: solid 1px #b5b5b6;border-bottom: solid 1px #b5b5b6;
  text-align: center;vertical-align: middle;
}
.pricelist td span {font-size: 10px;letter-spacing: -.2px}
.system a{color: var(--color-logo-b);}
.note {
  margin-top: 1em;
}
.system h3 {
  margin: 1em 0;padding: .6em 1em;
  background:#baaac9;
  color: #000;

  position: relative;
  overflow: hidden;
}
.system h3 span {
  position: relative;z-index: 2;
}
/*.system h3::after {
  content: '';
  width: 100%;height: 600px;
  background-color: var(--color-logo-b);
  transform: rotate(-65deg);
}*/
@media screen and (max-width: 999px){
  .system h3::after {position: absolute;bottom: -300px;right: -400px;}
}
@media screen and (min-width: 1000px){
  .system h3::after {position: absolute;bottom: -300px;right: -45%;}
}
.cardlist {
  margin-top: 1em;
  gap: 1em;
}
.cardlist li {width: 4em;}
.attention {margin: .6em 0 1em;}
.attention li {
  list-style: inside disc;
  font-size: 85.75%;
}