@charset "UTF-8";

/* ヘッダ（スマートフォン） ファーストビュー用 */

/* usr/sb_base_misc.css のコピー ここから */

.hidden-sb {
  display: none !important;
}

/* ここまで usr/sb_base_misc.css のコピー */

/* ----ヘッダー---- */
.block-header-top--text {
  font-size: 11px;
  text-align: center;
  background: #FFEBBE;
  padding: 5px 0;
}
.block-header-top--text span {
  font-weight: bold;
}
.block-header-top--customer {
  width: 100%;
  font-size: 12px;
  padding: 7px 15px 3px;
}
.block-header--main .block-common-inner {
  display: flex;
  flex-wrap: wrap;
  background: #FFF;
  padding: 0 5px 10px 15px;
}
.block-header-logo {
  padding: 0;
  width: 120px;
  margin: 0 15px 0 0;
}
.block-header-nav {
  display: flex;
  gap: 5px;
  margin: 0 0 0 auto;
}
.block-header-nav li {
  position: relative;
  min-width: 40px;
}
.block-header-nav li a {
  display: block;
  font-size: 9px;
  font-weight: 500;
  text-align: center;
  padding: 22px 0 0;
}
.block-header--main:not(.fixed) .block-header-nav li.block-header-nav--search {
  display: none;
}
.block-header-nav li.block-header-nav--reorder a {
  background: url(../../img/usr/common/icon_reorder.png) no-repeat center top 2px / 20px;
}
.block-header-nav li.block-header-nav--bookmark a {
  background: url(../../img/usr/common/icon_bookmark03.png) no-repeat center top 3px / 18px;
}
.block-header-nav li.block-header-nav--login a {
  background: url(../../img/usr/common/icon_login.png) no-repeat center top 1px / 18px;
}
.block-header-nav li.block-header-nav--cart a {
  background: url(../../img/usr/common/icon_cart.png) no-repeat 9px 2px / 20px;
}
.block-header-nav--cart-count {
  position: absolute;
  top: -6px;
  right: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  background: var(--color-orange);
}
.block-header-nav--cart-count:empty {
  display: none;
}
.block-header-menu-btn {
  position: relative;
  width: 36px;
  height: 36px;
  margin-left: 3px;
}
.block-header-menu-btn span {
  display: block;
  text-indent: -9999px;
  white-space: nowrap;
  overflow: hidden;
}
.block-header-menu-btn:before,
.block-header-menu-btn:after,
.block-header-menu-btn span:before {
  content: '';
  position: absolute;
  top: 12px;
  left: 10px;
  width: 16px;
  height: 2px;
  background: #333;
  transition: .3s ease;
}
.block-header-menu-btn:after {
  top: 24px;
}
.block-header-menu-btn span:before {
  top: 18px;
}
.block-header-search-modal {
  display: none;
}
.block-globalnav-items {
  display: flex;
  justify-content: space-around;
  background: var(--color-brown);
}
.block-globalnav-items a {
  display: block;
  color: #FFF;
  font-weight: 500;
  padding: 10px 0;
}
.block-globalnav-search {
  padding: 10px 15px;
  background: var(--color-gray);
}
.block-globalnav-search form {
  position: relative;
  border: 1px solid #D5D5D5;
  border-radius: 3px;
  background: #FFF;
  overflow: hidden;
  padding: 7px 36px 7px 8px;
}
.block-globalnav-search input.block-globalnav-search--keyword {
  border: 0;
  outline: 0;
  padding: 0;
}
.block-globalnav-search--submit {
  position: absolute;
  top: 0;
  right: 0;
  width: 36px;
  height: 38px;
  background: url(../../img/usr/common/icon_search.png) no-repeat center / 15px;
  border: 0;
  padding: 0;
  -webkit-appearance: none;
}
.block-menu {
  position: fixed;
  right: -100%;
  top: 51px;
  width: 100%;
  height: 100svh;
  z-index: 12;
  transition: .3s ease;
}
body:has(.block-header--main:not(.fixed)) .block-menu {
  top: 101px;
}

/* usr/sb_user.css のコピー ここから */

.lazyload {
  opacity: 0;
}

.lazyloading {
  opacity: 1;
}

.lazyloaded {
  opacity: 1;
  transition: opacity 200ms;
}

/* ここまで usr/sb_user.css のコピー */

.block-icon img {
  height: 19px;
}

ul.block-topic--items > li dd .block-top-topic--icon-image img {
  height: 100%;
  aspect-ratio: 2 / 1;
}

.block-top-separate-banner--list img {
  width: 100%;
  aspect-ratio: 5 / 4;
}

.block-top-instagram .block-top-title img {
  height: 100%;
  aspect-ratio: 1 / 1;
}

ul.block-footer-sns--list > li > a > img {
  height: 90%;
  aspect-ratio: 1 / 1;
}

body:not(.page-top) main.pane-main > div:first-child:not(.block-common-alert) {
  padding: 25px 15px 40px;
}
body:not(.page-top) main.pane-main:has(.block-topic-path) > div:first-child {
  padding-bottom: 0;
}