@charset "UTF-8";

:root {
  --usr-scrollbar-width: 0;
}

body {
  width: 100%;
  font-family: "Noto Sans JP", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  color: #000;
}

a {
  color: #000;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: #333;
}

.required::after {
  background-color: #C10230;
}

h1,
.h1 {
  margin: 0 0 30px;
  padding: 30px 0 0;
  font-size: 28px;
  font-weight: bold;
  color: #000;
  border: 0;
  background: none;
}

h2,
.h2 {
  margin: 0 0 8px;
  padding: 8px 0;
  font-size: 20px;
  font-weight: bold;
  color: #0A0A0A;
  background: none;
}

h3,
.h3 {
  margin: 0 0 8px;
  padding: 8px 0;
  font-size: 18px;
  font-weight: bold;
  color: #0A0A0A;
  background: none;
}

h4,
.h4 {
  margin: 0;
  padding: 8px 0;
  font-size: 16px;
  font-weight: bold;
  color: #0A0A0A;
  border-bottom: 0;
  background: none;
}

h5,
.h5 {
  font-size: 14px;
  font-weight: bold;
  background: none;
}

h6,
.h6 {
  font-size: 14px;
  font-weight: 500;
  background: none;
}

.price {
  color: #000;
}

.price::after,
.default-price::after {
  content: "";
}

.net::after,
.price.net::after,
.net-price::after,
.default-net::after {
  content: "";
}

.pagination-frame {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0 90px;
}

.pagination-frame .pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.pagination-frame .pagination.pager-num {
  position: static;
  gap: 5px;
}

.pagination-frame .pagination li {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.pagination-frame .pagination li span {
  display: block;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  line-height: 28px;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  color: #FFF;
  background: #333333;
}

.pagination-frame .pagination li a {
  display: block;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  line-height: 28px;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  color: #000;
  background: none;
}

.pagination-frame .pagination li a > div {
  display: none;
}

.pagination-frame .pagination li.pager-first a {
  background: url(../../img/usr/common/pager_first.png) center center / 14px auto no-repeat;
}

.pagination-frame .pagination li.pager-previous a {
  background: url(../../img/usr/common/pager_prev.png) center center / 8px auto no-repeat;
}

.pagination-frame .pagination li.pager-next a {
  background: url(../../img/usr/common/pager_next.png) center center / 8px auto no-repeat;
}

.pagination-frame .pagination li.pager-last a {
  background: url(../../img/usr/common/pager_last.png) center center / 14px auto no-repeat;
}

.action .btn {
  border-bottom-width: 1px;
}

.btn-default {
  border: 1px solid #333;
  color: #333;
  background: #FFF;
}

.btn-primary {
  border: 1px solid #333;
  font-weight: bold;
  color: #FFF;
  background: #333;
}

.btn-secondary {
  border: 1px solid #333;
  font-weight: bold;
  color: #333;
  background: #FFF;
}

.btn-danger {
  border: 1px solid #DCDCDC;
  color: #333;
  background: #DCDCDC;
}

.pager-scope {
  display: none;
}

.modal-content {
  padding-top: 45px;
  background: #F5F5F5;
}

.modal-content .modal-header {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin: 0 20px 15px;
  padding: 10px 0;
  border-bottom: 1px solid #000;
  background: none;
}

.modal-body h1 {
  margin: 0 0 20px;
  padding: 0;
  font-size: 24px;
}

.modal-content .modal-close {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  background: #333333;
}

.modal-content .modal-close::before {
  position: absolute;
  top: 6px;
  left: 16px;
  width: 2px;
  height: 22px;
  border-radius: 1px;
  transform: rotate(45deg);
  background: #fff;
  content: "";
}

.modal-content .modal-close::after {
  position: absolute;
  top: 6px;
  left: 16px;
  width: 2px;
  height: 22px;
  border-radius: 1px;
  transform: rotate(-45deg);
  background: #fff;
  content: "";
}

.modal-body li a,
.modal-wrapper .modal-body li a {
  color: #333;
}

.balloontip {
	z-index: 100000;
}