@charset "UTF-8";

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

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

.pane-header + .pane-main {
  padding-top: 112px;
}
.pane-header.pane-order-header + .pane-main {
  padding-top: 50px;
}
.pane-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  width: 100%;
  height: 112px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
  background: #fff;
}

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


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

/* ----ヘッダー---- */
.block-header-info-frame {
  padding: 11px 5px;
  background: #f8e5de;
}

.block-header-info-frame .block-header-info {
  white-space: nowrap;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  color: #4e2110;
}

.block-header-nav {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.block-header-nav #header_menu {
  position: relative;
  width: 40px;
  height: 40px;
  cursor: pointer;
}

.block-header-nav #header_menu::before {
  position: absolute;
  top: calc(50% - 7px);
  left: 6px;
  width: 28px;
  height: 2px;
  background: #222;
  transition: all 0.3s;
  content: "";
}

.block-header-nav #header_menu::after {
  position: absolute;
  top: calc(50% + 5px);
  left: 6px;
  width: 28px;
  height: 2px;
  background: #222;
  transition: all 0.3s;
  content: "";
}

.block-header-nav #header_menu span {
  position: absolute;
  top: calc(50% - 1px);
  left: 6px;
  display: block;
  width: 28px;
  height: 2px;
  font-size: 0;
  background: #222;
}

.block-header-nav #header_menu.active::before {
  top: calc(50% - 1px);
  transform: rotate(45deg);
}

.block-header-nav #header_menu.active::after {
  top: calc(50% - 1px);
  transform: rotate(-45deg);
}

.block-header-nav #header_menu.active span {
  display: none;
}

.block-header-nav .block-headernav--item-list {
  display: flex;
  margin-right: auto;
}

.block-header-nav .block-headernav--item-list.right-list {
  margin-left: auto;
  margin-right: 0;
}

.block-header-nav .block-headernav--item-list > li {
  width: 40px;
  height: 40px;
}

.block-header-nav #header_search {
  width: 40px;
  height: 40px;
  font-size: 0;
  cursor: pointer;
  background: url(../../img/usr/common/ico_search_sp.png) center center / 23px auto no-repeat;
}

.block-header-nav .block-header-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 190px;
  height: 50px;
  margin: 0;
  padding: 0;
  background-color: #008803;
}
.block-header-logo--link{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.block-header-logo--img{
  width: 150px;
}

.block-header-nav .block-headernav--item-list > li.block-headernav--item-login a,
.block-header-nav .block-headernav--item-list > li.block-headernav--item-mypage a {
  display: block;
  width: 40px;
  height: 40px;
  font-size: 0;
  background: url(../../img/usr/common/ico_mypage_sp.png) center center / 24px auto no-repeat;
}

.block-header-nav .block-headernav--item-list > li.block-headernav--item-cart a {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  font-size: 0;
  background: url(../../img/usr/common/ico_cart_sp.png) center center / 21px auto no-repeat;
}

.block-header-nav .block-headernav--item-list > li.block-headernav--item-cart .block-headernav--cart-count {
  position: absolute;
  top: calc(50% - 6px);
  left: calc(50% - 1.5em);
  display: block;
  width: 3.0em;
  font-size: 10px;
  font-weight: 500;
  color: #fff;
  text-align: center;
}

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


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

.lazyload {
  opacity: 0;
}

.lazyloading {
  opacity: 1;
}

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

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

.page-top .block-thumbnail-t--items > li {
  width: 45.25vw;
  margin: 0 1.5vw 4vw 0;
  padding: 0;
}

.block-icon img {
  height: 20px;
  aspect-ratio: 32 / 11;
}

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

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

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

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

.block-src-1--image {
  width: calc(100vw - 40px);
  aspect-ratio: 1 / 1;
}