@charset "UTF-8";

:root {
  --usr-scrollbar-width: 0;
  --cl-bk: #333333;
  --cl-gy: #666666;
  --cl-lgy: #aaaaaa;
  --cl-bl: #4a91cd;
  --cl-rd: #e05979;
  --cl-gr: #12a7cd;
  --cl-or: #f8af49;
  --cl-pgr: #8ab7c3;
  --cl-lpgr: #f0f4f6;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-family: "Noto Sans JP", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  color: var(--cl-bk);
  line-height: 1.6;
  letter-spacing: 0.04em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.cl-rd {
  color: var(--cl-rd);
}

.cl-bl {
  color: var(--cl-bl);
}

a {
  color: var(--cl-bk);
}

a:hover,
a:focus {
  text-decoration: underline;
}

a:focus {
  outline: none;
  outline-offset: -2px;
}

h1,
.h1 {
  margin: 0 0 12px;
  padding: 12px 10px;
  font-size: 22px;
  font-weight: bold;
  color: var(--cl-bk);
  border: 0;
  background: none;
}

h2,
.h2 {
  margin: 0 0 8px;
  padding: 8px 10px;
  font-size: 20px;
  font-weight: bold;
  color: var(--cl-bk);
  border-bottom: 1px solid #111;
  background: none;
}

h3,
.h3 {
  margin: 0 0 8px;
  padding: 8px 10px;
  font-size: 18px;
  font-weight: bold;
  color: var(--cl-bk);
  border-bottom: 1px solid #dedede;
  background: none;
}

h4,
.h4 {
  margin: 0;
  padding: 8px 10px;
  font-size: 16px;
  font-weight: bold;
  color: var(--cl-bk);
  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: var(--cl-bk);
}

.price::after,
.default-price::after {
  content: "（税込）";
}

.net::after,
.price.net::after,
.net-price::after,
.default-net::after {
  content: "（税抜）";
}

.pager-count span {
  font-weight: normal;
}

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

.btn-default {
  border: 1px solid var(--cl-pgr);
  color: #ffffff;
  background: var(--cl-pgr);
}

.btn-primary {
  border: 1px solid #d53100;
  color: #fff;
  background: #d53100;
}

.btn-secondary {
  border: 1px solid #9d9896;
  color: #fff;
  background: #9d9896;
}

.btn-danger {
  border: 1px solid #d53100;
  color: #d53100;
  background: #ffebe8;
}

/* ----タグ---- */

img {
  max-width: 100%;
  vertical-align: bottom;
}

hr {
  border: 0;
  border-bottom: 1px dotted #ccc;
}

address {
  font-style: normal;
}

/* ----入力フォーム共通---- */

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="search"],
input[type="password"],
input[type="url"],
input[type="number"],
input[type="date"],
select,
textarea {
  min-height: 32px;
  padding: 0 9px;
  border: 1px solid #cccccc;
  background-color: #fff;
  max-width: 100%;
  font-family: "Noto Sans JP", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

select {
  min-height: 28px;
  padding-right: 31px;
  border-color: #ccdce7;
  border-radius: 4px;
  background-image: url(../../img/usr/common/sp/select_arw.png);
  background-position: center right 7px;
  background-repeat: no-repeat;
  background-size: 8px 6px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-size: 1.4rem;
}

textarea {
  padding: 9px;
}

label input[type="radio"],
label input[type="checkbox"],
input[type="radio"]:has(+ label),
input[type="checkbox"]:has(+ label) {
  display: none;
}

label:has(input[type="radio"]),
label:has(input[type="checkbox"]),
input[type="radio"] + label,
input[type="checkbox"] + label {
  display: block;
  position: relative;
  padding-left: 24px;
  cursor: pointer;
}

label:has(input[type="checkbox"]),
input[type="checkbox"] + label {
  padding-left: 28px;
}

label:has(input[type="radio"]),
input[type="radio"] + label {
  &::before {
    content: "";
    display: block;
    position: absolute;
    top: 4px;
    left: 0;
    width: 16px;
    height: 16px;
    border: 1px solid #cccccc;
    border-radius: 16px;
  }

  &::after {
    content: "";
    display: block;
    position: absolute;
    top: 7px;
    left: 3px;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    background-color: var(--cl-pgr);
    opacity: 0;
  }
}

label:has(input[type="radio"]:checked),
input[type="radio"]:checked + label {
  &::after {
    opacity: 1;
  }
}

label:has(input[type="checkbox"]),
input[type="checkbox"] + label {
  &::before {
    content: "";
    display: block;
    position: absolute;
    top: 4px;
    left: 0;
    width: 20px;
    height: 20px;
    border: 1px solid #cccccc;
    background-color: #ffffff;
  }

  &::after {
    content: "";
    display: block;
    position: absolute;
    top: 8px;
    left: 3px;
    width: 14px;
    height: 11px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxMSI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBmaWxsPSIjZmZmIiBkPSJtMS45MDQgMy4xMiA0LjQ3OSA1LjQ4OS0xLjQxMiAxLjQxNS00LjQ4LTUuNDg5eiIvPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZmlsbD0iI2ZmZiIgZD0ibTMuNDg3IDguNjA5IDguNDc0LTguNDkgMS40MTMgMS40MTUtOC40NzQgOC40OXoiLz48L3N2Zz4=");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0;
  }
}

label:has(input[type="checkbox"]:checked),
input[type="checkbox"]:checked + label {
  &::before {
    background-color: var(--cl-pgr);
  }

  &::after {
    opacity: 1;
  }
}

.block-login--display-password.block-login--display-password::before {
  top: 50%;
  transform: translateY(-50%);
}

.block-login--display-password.block-login--display-password::after {
  top: 50%;
  transform: translateY(-50%);
}

.block-login--login-state-saving .form-control label::before {
  top: 50%;
  transform: translateY(-50%);
}

.block-login--login-state-saving .form-control label::after {
  top: 50%;
  transform: translateY(-50%);
}