@charset "UTF-8";

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

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

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

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

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

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

/* ここまで usr/sb_base_misc.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%;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.block-header-nav #header_menu {
  position: relative;
  width: 50px;
  height: 50px;
  cursor: pointer;
  background: url(../../img/usr/common/headernav_menu.png) left center / 24px auto no-repeat;
}

.block-header-nav #header_menu span {
  font-size: 0;
}

.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: inherit;
  height: inherit;
}

.block-header-nav .block-header-logo {
  width: 120px;
  margin: auto;
  padding: 0;
  vertical-align: top;
}

.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: 50px;
  height: 50px;
  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: 50px;
  height: 50px;
  font-size: 11px;
  background: #0054A6 url(../../img/usr/common/ico_cart_sp.png) top 4px center / 28px auto no-repeat;
}

.block-header-nav .block-headernav--item-list > li.block-headernav--item-cart .block-headernav--cart-count {
  position: absolute;
  top: 2px;
  right: 2px;
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 500;
  color: #fff;
  text-align: center;
  background-color: #EA4B5D;
}

/* 検索窓 */
.block-global-search {
  position: relative;
  margin: auto 10px;
}
.block-global-search-wrap {
  display: flex;
}

.block-global-search--keyword[type="text"][disabled] {
  background: #fff url(../../img/usr/common/Icon_feather_search.png) center left 20px / 16px no-repeat;
  padding-left: 78px;
  opacity: 1;
}

.block-global-search--keyword[type="text"] {
  width: calc(100% - 80px);
  height: 38px;
  padding-left: 78px;
  background: #fff url(../../img/usr/common/Icon_feather_search.png) center left 20px / 16px no-repeat;
  border-color: #0054A6;
  color: #B2B2B2;
}

.block-global-search--keyword::placeholder {
  color: #B2B2B2;
}

.block-global-search--submit {
  width: 80px;
  height: 38px;
  background-color: #0054A6;
  border-color: #0054A6;
}

.block-global-search--submit[disabled]{
  opacity: 1;
}

/* ----ヘッドライン---- */
.block-head-line {
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  background-color: #0154A6;
}

.head-line-text {
  color: #fff;
  font-weight: bold;
  line-height: 1em;
}

.price-off {
  color: #FFD500;
}

.price-off-discount-rate {
  font-size: 18px;
}

/* ----ロゴ横の見出し---- */
.block-header-caption {
  margin:auto;
}
  
.block-header-caption .block-header-caption-text {
  display:flex;
  font-weight: bold;
  font-size: 14px;
}

/* ここまで 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-topic--items > li dd .block-top-topic--icon-image img {
  height: 100%;
  aspect-ratio: 2 / 1;
}

.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;
}
/*ヘッダーロゴ  */
/* 共通のスタイル（PCとスマホ両方に適用） */
.block-header-caption {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap; /* 要素を折り返し可能にする */
  font-family: sans-serif;
  font-size: 16px;
  gap: 8px;
}

.block-header-logo {
  margin-right: 10px;
}

.block-header-logo--link {
  display: flex;
  align-items: center;
}

.block-header-logo--img {
  width: 120px; /* デフォルトのロゴサイズ（SP向け） */
  height: auto;
}

.cic-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.cic-label {
  background-color: #1f4e91;
  color: white;
  padding: 4px 4px;
  border-radius: 2px;
  font-weight: bold;
  white-space: nowrap;
  display: inline-block;
}

.cic-text {
  color: #2c2c2c;
  font-weight: bold;
  display: inline-block;
}

/* メディアクエリ - PC表示（768px以上） */
@media (min-width: 768px) {
  .block-header-caption {
    justify-content: space-between; /* 左右に広げる */
    flex-wrap: nowrap; /* 折り返しを防ぐ */
  }

  .block-header-logo--img {
    width: 150px; /* PCでのロゴサイズ */
  }

  .cic-header {
    font-size: 16px; /* フォントサイズ調整 */
    gap: 10px; /* ラベルとテキストの間隔 */
  }

  .cic-label {
    font-size: 14px; /* ラベルのフォントサイズ */
    padding: 6px 10px; /* ラベルの内側の余白調整 */
  }

  .cic-text {
    font-size: 16px; /* テキストのフォントサイズ */
  }
}

/* メディアクエリ - スマホ表示（768px未満） */
@media (max-width: 767px) {
  .block-header-caption {
    justify-content: center; /* 中央寄せ */
    gap: 6px; /* スマホ用の間隔調整 */
  }

  .block-header-logo--img {
    width: 120px; /* スマホでのロゴサイズ */
  }

  .cic-header {
    font-size: 14px; /* スマホでのフォントサイズ */
    gap: 4px; /* ラベルとテキストの間隔 */
  }

  .cic-label {
    font-size: 12px; /* スマホ用ラベルのフォントサイズ */
    padding: 4px 6px; /* スマホ用ラベルの内側の余白調整 */
  }

  .cic-text {
    font-size: 14px; /* スマホ用テキストのフォントサイズ */
  }
}