@charset "UTF-8";

:root {
  --usr-scrollbar-width: 0;
  /* フォント */
  --ff-helve: Helvetica, "Open Sans", sans-serif;
  --ff-hiragino: "Hiragino UD Sans Std", "Noto Sans JP", serif;
  --ff-base: var(--ff-hiragino);
  --fw-base: 500;
  /* カラー */
  --color-main: #000;
  --color-base: #FFF;
}

/* ホバーとフォーカス */
:where(:any-link, :enabled, summary, div.btn-primary) {
  --default: initial;
  --hover: ;
}

:where(:any-link, :enabled, summary, div.btn-primary):focus-visible {
  --default: ;
  --hover: initial;
}
a {
  color: #000;
}

@media (any-hover: hover) {
  :where(:any-link, :enabled, summary, div.btn-primary):hover {
    --default: ;
    --hover: initial;
  }
}
.header-warning {
  border: 1px solid #DC6225;
  background: rgba(220, 98, 37, .15);
}

/* 使い方 */
/* .button {
  color: var(--default, #246A92) var(--hover, #FFF);
  background-color: var(--hover, #246A92);
  border: 2px solid var(--hover, #246A92);
} */
/* 参考↓ */
/* https://x.com/tak_dcxi/status/1799279720431026359 */

html {
  scroll-padding-top: 98px;
}

body {
  background-color: var(--color-base);
  color: var(--color-main);
  font-family: var(--ff-base);
  font-weight: var(--fw-base);
}

:where(img) {
  font-style: italic;
}

:where(:focus):not(:where(:focus-visible)) {
  outline: none;
}

:where(:focus-visible) {
  outline: 2px solid #005FCC;
  outline-offset: -2px;
}

:where(a, button) {
  transition: background-color .3s, border-color .3s, color .3s, opacity .3s;
}


.header-warning-contents {
  color: #DC6225;
}

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

h2,
.h2 {
  margin: 0 0 8px;
  padding: 8px 0;
  font-size: 14px;
  font-weight: 600;
  color: #000;
  border-bottom: 1px solid #000;
  background: none;
}

h3,
.h3 {
  margin: 0 0 8px;
  padding: 9px 8px;
  font-size: 14px;
  font-weight: 600;
  color: #000;
  background: #EBEBEB;
}

h4,
.h4 {
  margin: 0;
  padding: 8px 10px;
  font-size: 16px;
  font-weight: bold;
  color: #000;
  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::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 {
  font-weight: 400;
  border-radius: calc(infinity * 1px);
}

input[type="submit"],
input[type="button"],
button {
  border-radius: calc(infinity * 1px);
}

.btn-default {
  border: 1px solid #000;
  color: #0A0909;
  background: #fff;
  border-radius: calc(infinity * 1px);
  font-weight: 400;
}

.btn-primary {
  border: 1px solid #000;
  background: #000;
}

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

.btn-danger {
  border: 1px solid #DC6225;
  color: #DC6225;
  background: rgba(220, 98, 37, .15)
}

.btn:has(.block-icon-image-double-small) {
  padding: 9px;
}

.btn:has(.block-icon-image--shopping-cart) {
  padding: 7px;
}

.block-icon-image--shopping-cart {
  width: 18px;
  padding-top: 18px;
  background-size: 18px auto;
  background-image: url(../../img/usr/common/ico-shopping-basket.png);
}

.btn:has(.block-icon-image--heart) {
  padding: 9px 8px;
}

.block-icon-image--heart {
  width: 17px;
  background-size: 17px auto;
}

.btn:has(.block-icon-image--search) {
  padding: 7px;
}

.block-icon-image--search {
  width: 19px;
  padding-top: 19px;
  background-size: 19px auto;
  background-image: url(../../img/usr/common/ico_search.png);
}


.btn:active,
.btn.active {
  box-shadow: none;
}

.btn.disabled,
.btn[disabled],
.btn.disabled:hover,
.btn[disabled]:hover,
.btn.disabled:active,
.btn[disabled]:active {
  opacity: .3;
}

.badge {
  padding: 2px 5px 2px;
  background-color: #585858;
}

.text-muted {
  color: #000;
  opacity: .3;
}

.text-warning {
  color: #FDDA7F;
}

.text-danger {
  color: #DC6225;
}

.price,
.default-price,
.net-price,
.exchange-price {
  color: #000;
}

.pager-first,
.pager-last {
  display: none;
}

.pager .pagination .pager-previous,
.pager .pagination .pager-next {
  border: none;
  background: transparent;
  min-width: auto;
}

.pager .pagination .pager-previous {
  margin-left: 0;
}

.pager .pagination .pager-next {
  margin-right: 0;
}

.pager .block-icon-image-page-navigation {
  width: 14px;
  background-size: 14px auto;
}

.pager .pagination li {
  padding: 0;
  height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #000;
  color: #000;
  margin: 0 6px;
}

.pager .pagination li:nth-last-child(2) {
  background: url(../../img/usr/lineup/ico_ellipsis.png) no-repeat;
  background-size: 50% auto;
  background-position: center;
}

.pager .pagination li a {
  color: #000;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #fff;
  transition: opacity .3s;
}

.pager .pagination li a:hover {
  opacity: .7;
}

.pager .pagination li.pager-current {
  background-color: #000;
  color: #fff;
}

.pager .pagination .pager-current span {
  font-weight: 400;
}

.pager .block-icon-image--next {
  background-image: url(../../img/usr/lineup/ico_arrow_right_black.png);
}

.pager .block-icon-image--prev {
  background-image: url(../../img/usr/lineup/ico_arrow_left_black.png);
}

input[data-tooltip] {
  display: inline-block;
  padding: 2px 6px 3px;
  width: 112px;
  text-align: center;
  border: 1px solid #000;
  background: none;
  border-radius: 0;
}

.balloontip {
  border-radius: 4px;
  font-size: 14px;
  padding: 3px 8px;
  box-shadow: none;
  background: #999;
  border: none;
}

.balloontip > div {
  display: none;
}

#ShowDropDown.btn {
  border-radius: 0;
  text-align: left;
  padding: 4px 26px 4px 15px;
  position: relative;
  background: url(../../img/usr/common/ico_triangle_downward.png), url(../../img/usr/common/ico_triangle_upward.png);
  background-repeat: no-repeat no-repeat;
  background-position: center right 16px;
  background-size: 11px auto, 0 0;
}

#ShowDropDown.is-dropdown-active {
  background-image: url(../../img/usr/common/ico_triangle_upward.png), url(../../img/usr/common/ico_triangle_downward.png);
  background-size: 10px auto, 0 0;
}

.dropdown {
  border: 1px solid #999;
  border-top: none;
}

#ShowDropDown,
.dropdown {
  width: 155px;
  color: #0A0909;
}

.dropdown li {
  background: #fff;
}

.dropdown li span {
  color: #0A0909;
  padding: 9px 15px;
}

.dropdown li span:hover {
  background: rgba(0, 0, 0, .1);
}

.modal-dialog .modal-title,
.modal-alert .modal-title {
  letter-spacing: .1em;
}

.modal-dialog .modal-content,
.modal-alert .modal-content {
  background: #EBEBEB;
}

.modal-dialog .modal-header,
.modal-alert .modal-header {
  background-color: #2D2D2D;
  font-weight: 600;
}

.modal-dialog .modal-body p,
.modal-alert .modal-body p {
  letter-spacing: .1em;
  line-height: calc(20 / 14);
}

.modal-dialog .panel {
  border: 1px solid rgba(0, 0, 0, .15);
}

.modal-dialog .panel input {
  border: 1px solid #4D4D4D;
  -webkit-appearance: none;
  border-radius: 0;
}

.modal-dialog .modal-footer {
  display: grid;
  place-content: stretch;
  grid-template-columns: auto auto;
  gap: 8px;
}

.modal-alert .modal-footer {
  text-align: center;
}

.modal-dialog .modal-footer .btn,
.modal-alert .modal-footer .btn {
  min-width: 106px;
  padding: 4px 8px;
  width: auto;
}

.block-search-suggest--keyword:hover,
.block-search-suggest--goods:hover {
  background-color: #EBEBEB;
}

.block-search-suggest--keyword-entry {
  letter-spacing: .05em;
  color: #0A0909;
}

.block-search-suggest--keyword-entry:hover,
.block-search-suggest--goods-name:hover {
  text-decoration: none;
}

.block-search-suggest--goods {
  display: grid;
  grid-template-columns: auto auto;
  margin-top: 10px;
}

.block-search-suggest--goods-img {
  width: 70px;
  grid-area: 1 / 1 / 4 / 2;
  margin-right: 8px;
}

.block-search-suggest--goods-name {
  grid-area: 1 / 2 / 2 / 3;
  margin-top: -4px;
}

.block-search-suggest--goods-comment {
  grid-area: 2 / 2 / 3 / 3;
}

.block-search-suggest--goods-price-items {
  grid-area: 4 / 1 / 5 / 3;
  margin-top: 4px;
}

.block-search-suggest--goods-name,
.block-search-suggest--goods-comment,
.block-search-suggest--goods-price-items {
  color: #0A0909;
  line-height: calc(20 / 14);
  letter-spacing: .05em;
}

.block-search-suggest--goods .price::after,
.block-search-suggest--goods .default-price::after {
  content: "(税込)";
}

.panel:has(.block-jscart) {
  border: 1px solid #D7D7D7;
}

.panel .block-jscart {
  margin-bottom: 0;
}

.block-jscart h2 {
  margin-bottom: 28px;
}

.block-jscart h2 a {
  font-weight: 600;
  font-size: 24px;
}

.block-jscart--items {
  border-bottom: 1px solid #EBEBEB;
  margin-bottom: 5px;
  padding-bottom: 5px;
}

.block-jscart--items dt {
  display: flex;
  justify-content: space-between;
}

.block-jscart--name {
  padding-right: 10px;
}

.block-jscart--delete {
  margin-top: 10px;
}

.block-jscart--delete-btn {
  padding: 2px 11px;
}

.block-jscart--price {
  margin-top: 10px;
}

.block-jscart--total {
  display: flex;
}

.block-jscart--total dt {
  margin-right: 5px;
}

.block-jscart--total dd {
  word-break: break-all;
}

.block-jscart--alert {
  background-color: rgba(220, 98, 37, .15);
  border: 1px solid #DC6225;
  color: #DC6225;
  background-image: url(../../img/usr/common/ico-alert.png);
  background-size: 16px auto;
  padding: 7px 10px 7px 35px;
}

.block-jscart--error-messages.form-error {
  color: #DC6225;
}

.block--cart-to-order {
  margin-top: 8px;
}

.block--cart-to-order .btn {
  padding: 2px 21px;
}

.block-common-alert {
  border: none;
  background-color: rgba(220, 98, 37, .15);
  color: #DC6225;
  padding: 16px;
  margin: 10px 0;
  letter-spacing: .05em;
}

.block-common-alert-list {
  padding: 16px;
  border: 1px solid #000;
}

.block-common-alert-list--items {
  color: #DC6225;
}

.status-progresbar .status-progresbar-list {
  height: 14px;
}

.status-progresbar .status-progresbar-item {
  padding: 0;
  background: none;
}

.status-progresbar .status-progresbar-description {
  font-size: 14px;
  color: #0A0909;
  letter-spacing: .05em;
  line-height: calc(16 / 14);
  font-weight: 400;
}

[class^="status-progress"] {
  border: 1px solid #000;
  overflow: hidden;
  background: #F3F0E9;
}

[class^="status-progress"]:before {
  content: "";
  display: block;
  width: 25%;
  position: absolute;
  top: 0;
  left: 0;
  height: 14px;
  border-right: 1px solid #000;
  border-left: 1px solid #000;
  background: none;
}

[class^="status-progress"]:before {
  left: 50%;
}

[class^="status-progress"]:after,
.status-reserve [class^="status-progress"]:after,
.status-return [class^="status-progress"]:after {
  border-right: 1px solid #000;
  background: none;
  width: 25%;
}

.status-order .status-progresbar-list {
  background: linear-gradient(90deg, #DC6225 0%, #DC6225 20%, #F3F0E9 20%, #F3F0E9 100%);
}

.status-verify .status-progresbar-list {
  background: linear-gradient(90deg, #DC6225 0%, #DC6225 40%, #F3F0E9 40%, #F3F0E9 100%);
}

.status-income .status-progresbar-list{
  background: linear-gradient(90deg, #DC6225 0%, #DC6225 60%, #F3F0E9 60%, #F3F0E9 100%);
}

.status-rship .status-progresbar-list {
  background: linear-gradient(90deg, #DC6225 0%, #DC6225 80%, #F3F0E9 80%, #F3F0E9 100%);
}

.status-ship .status-progresbar-list,
.status-status_1 .status-progress-100,
.status-status_1 .status-progresbar-list,
.status-status_3 .status-progress-100,
.status-status_3 .status-progresbar-list,
.status-status_4 .status-progress-100,
.status-status_4 .status-progresbar-list {
  background: #DC6225;
}

.status-reserve .status-progress-100,
.status-return .status-progress-100,
.status-reserve .status-progresbar-list,
.status-return .status-progresbar-list {
  background: #E4C256;
}

.status-cancel .status-progress-0,
.status-cancel .status-progresbar-list,
.status-status_2 .status-progress-0,
.status-status_2 .status-progresbar-list {
  background: #F3F0E9;
}

.status-percentage {
  font-size: 20px;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: #0A0909;
}

.status-message {
  font-size: 14px;
  color: #0A0909;
  letter-spacing: 0.05em;
}

.status-status_1,
.status-status_2,
.status-status_3,
.status-status_4 {
  padding: 5px 0 16px;
}

.status-order,
.status-cancel,
.status-income,
.status-reserve,
.status-rship,
.status-ship,
.status-verify,
.status-return,
.status-status_,
.status-status_1,
.status-status_2,
.status-status_3,
.status-status_4 {
  border: 1px solid rgba(0, 0, 0, .2);
}

.table,
.table td,
.table th {
  border: 1px solid #c8c8c8;
}

/* .table thead th:nth-child(2) {
  width: 44px;
} */

/* table tr :nth-child(2) {
  text-align: center;
} */

.table th {
  font-weight: 600;
  background: #EBEBEB;
}

.table td {
  padding: 5px 7px;
}

.table thead th {
  width: 43%;
  padding: 11px 7px;
  background: #EBEBEB;
}

.table tbody th {
  width: 40%;
  padding: 9px 7px;
  background: #EBEBEB;
}

.table td:nth-of-type(2) {
  text-align: center;
}

.panel {
  border: 1px solid rgba(0, 0, 0, .2);
}

.panel h4 {
  padding: 0 0 8px;
  font-size: 14px;
}

.fieldset-vertical .form-group {
  display: grid;
  grid-template-columns: 186px auto;
  /* margin: 5px 0 22px 0; */
}

.fieldset-vertical .form-label {
  grid-area: 1 / 1 / 3 / 2;
  font-size: 20px;
  font-weight: 600;
}

.fieldset-vertical .form-control {
  grid-area: 1 / 2 / 2 / 3;
}

.fieldset-vertical .form-control input[type="text"],
.fieldset-vertical .form-control input[type="tel"],
.fieldset-vertical .form-control input[type="email"],
.fieldset-vertical .form-control input[type="search"],
.fieldset-vertical .form-control input[type="password"],
.fieldset-vertical .form-control input[type="url"],
.fieldset-vertical .form-control input[type="number"],
.fieldset-vertical .form-control select,
.fieldset-vertical .form-control textarea {
  width: 100%;
  border: 1px solid rgba(0, 0, 0, .2);
  -webkit-appearance: none;
  border-radius: 0;
  padding: 9px 13px;
}

.fieldset-vertical .form-control input::placeholder {
  color: rgba(0, 0, 0, .5);
}

.form-control .checkbox input[type=checkbox],
.form-group .block-login--display-password input[type=checkbox] {
  appearance: none;
  margin-inline-end: unset;
  border: 1px solid #000;
  border-radius: unset;
  display: grid;
  place-content: center;
  padding-block-end: 1px;
  width: 20px;
  height: 20px;
}

.form-control:has(.checkbox) > ul,
.form-control:has(.radio) > ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.form-control .checkbox,
.form-control .radio,
.form-group .block-login--display-password {
  display: flex;
  gap: 4px;
  margin-right: 0;
  align-items: center;
}

.form-control .checkbox input[type=checkbox]:checked,
.form-group .block-login--display-password input[type=checkbox]:checked {
  background-color: #E0BF55;
  border-color: #E0BF55;
}

.form-control .checkbox input[type=checkbox]:checked::before,
.form-group .block-login--display-password input[type=checkbox]:checked::before {
  content: "";
  inline-size: 10px;
  block-size: 5px;
  border-inline-start: 2px solid #fff;
  border-block-end: 2px solid #fff;
  rotate: -45deg;
}

.form-control .radio input[type="radio"] {
  appearance: none;
  border: 1px solid;
  display: grid;
  place-content: center;
  border-radius: 50%;
  margin-right: 0;
  width: 20px;
  height: 20px;
}

.form-control .radio input[type="radio"]:checked::before {
  content: '';
  inline-size: 12px;
  block-size: 12px;
  background-color: #E0BF55;
  border-radius: 50%;
}

.form-control input[type="file"] {
  font-size: 14px;
  display: block;
}

.form-control input[type="file"]::file-selector-button {
  display: block;
  margin-bottom: 2px;
  font-size: 14px;
  padding: 2px 4px;
}

.fieldset-vertical .form-control select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url(../../img/usr/common/ico_triangle_downward.png);
  background-repeat: no-repeat;
  background-size: 8px auto;
  background-position: right 10px center;
  background-color: #EBEBEB;
  border: none;
  padding: 10px 13px;
}

.fieldset-vertical .form-control select.is-select-open {
  background-image: url(../../img/usr/common/ico_triangle_upward.png);
  background-size: 7px auto;
  background-position: right 11px center;
}

.fieldset-vertical .form-control select option {
  background: #fff;
}

.fieldset-vertical .form-control textarea {
  padding: 6px 8px;
  color: #0A0909;
  letter-spacing: .1em;
  box-sizing: border-box;
  overflow: auto;
}

.fieldset-vertical .form-control textarea::-webkit-scrollbar {
  width: 12px;
}

.fieldset-vertical .form-control textarea::-webkit-scrollbar-track {
  background: transparent;
  border-left: 8px solid transparent;
  border-radius: 6px;
}

.fieldset-vertical .form-control textarea::-webkit-scrollbar-thumb {
  background-color: #D9D9D9;
  border-radius: calc(infinity * 1px);
  border: 4px solid #fff;
}

.alert {
  padding: 7px 10px 7px 30px;
  margin-bottom: 5px;
  border: 1px solid #DC6225;
  color: #DC6225;
  background-color: rgba(220, 98, 37, .15);
  background-size: 12px auto;
  background-image: url(../../img/usr/common/ico-alert.png);
}

.success {
  padding: 7px 10px 7px 30px;
  border: 1px solid #5E5E5E;
  color: #5E5E5E;
  background-color: #EBEBEB;
  background-size: 13px auto;
  background-image: url(../../img/usr/common/ico-success.png);
}

.required:after {
  background-color: #DC6225;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .05em;
  padding: 2px 6px;
  border-radius: calc(infinity * 1px);
}

.fieldset-vertical:has(.js-efo) .form-group {
  justify-content: left;
  row-gap: 8px;
  display: flex;
  flex-wrap: wrap;
}

.fieldset-vertical:has(.js-efo) .form-group .constraint {
  /* margin-top: auto; */
  margin-bottom: 0;
}

.fieldset-vertical:has(.js-efo) .form-group .constraint .required {
  position: relative;
  top: -2px;
}

.fieldset-vertical:has(.js-efo) .form-group .form-control {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}

.fieldset-vertical .form-group .form-error {
  color: #DC6225;
}

.fieldset-vertical:has(.js-efo) .form-group .form-control .checktype_kana {
  width: 48.5%;
}

.fieldset-vertical:has(.js-efo) .form-group .form-control span {
  width: 100%;
}

.fieldset-vertical .form-group .form-control .checktype_kana input,
.fieldset-vertical .form-group .form-control .checktype_comp input,
.fieldset-vertical .form-group .form-control .checktype_pref select,
.fieldset-vertical .form-group .form-control .checktype_comp textarea {
  border: none;
  background-color: #EBEBEB;
  padding: 9px 13px;
  width: 100%;
}
.fieldset-vertical .form-group .form-control .checktype_kana input,
.fieldset-vertical .form-group .form-control .checktype_comp input {
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, .2);
}

.fieldset-vertical:has(.js-efo) .form-group .form-label label {
  font-size: 14px;
  display: flex;
}

.fieldset-vertical .form-control .checktype_comp textarea::-webkit-scrollbar-thumb {
  background-color: #5A5A5A;
  border: 4px solid #EBEBEB;
}

.block-search-goods--header {
      margin-block: 50px 0;
}