@charset "UTF-8";

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

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

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

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

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

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

/* ----ヘッダー---- */

.pane-header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 53px;
  border-bottom: 1px solid #ededed;
  background: #fff;
  z-index: 999;

  .container {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
}

.pane-order-header {
  display: block;
  width: 100%;
  height: 53px;
  border-bottom: 1px solid #ededed;

  .container {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding-top: 4px;
  }
}

.block-header-info-frame {
  background: #f8e5de;
}

.block-header-info {
  width: 100%;
  padding: 9px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.block-header-logo {
  margin: 0;
  padding: 0;

  a {
    display: block;
  }

  img {
    display: block;
    height: auto;
  }
}

.block-header-nav-sb,
.block-header-nav {
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  gap: 20px;
  height: 100%;
}

.block-header-nav-sb {
  left: 20px;

  #header_menu {
    position: relative;
    width: 24px;
    height: 20px;
    text-indent: -999999px;
    cursor: pointer;

    &::before,
    &::after {
      content: "";
      display: block;
      position: absolute;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: var(--cl-pgr);
    }

    &::before {
      top: 0;
    }

    &::after {
      bottom: 0;
    }

    span {
      display: block;
      position: absolute;
      top: 50%;
      width: 100%;
      height: 2px;
      margin-top: -1px;
      background-color: var(--cl-pgr);
    }
  }

  #header_search {
    width: 28px;
    height: 28px;
    background-image: url(../../img/usr/common/sp/header_search.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    text-indent: -999999px;
    cursor: pointer;
  }
}

.block-header-nav {
  right: 20px;

  > li {
    a {
      display: block;
      position: relative;
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      text-indent: -999999px;
    }

    &.item-user {
      a {
        width: 27px;
        height: 27px;
        background-image: url(../../img/usr/common/sp/header_user.png);
      }
    }

    &.item-cart {
      a {
        width: 32px;
        height: 30px;
        background-image: url(../../img/usr/common/sp/header_cart.png);

        .block-headernav--cart-count {
          display: none;
          position: absolute;
          top: -9px;
          right: -8px;
          width: 18px;
          height: 18px;
          border-radius: 18px;
          background-color: #f8af49;
          color: #ffffff;
          font-size: 1rem;
          font-weight: 700;
          text-align: center;
          text-indent: 0;
          line-height: 18px;
          letter-spacing: 0;
        }
      }
    }
  }
}

.block-sp-menu {
  position: relative;
  z-index: 9999;

  .block-sp-menu-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background-color: rgba(51, 51, 51, 0.6);
    opacity: 0;
    visibility: hidden;
  }

  .block-sp-menu-body {
    position: fixed;
    top: 0;
    left: -340px;
    width: 300px;
    height: 100vh;
    height: 100dvh;
    background-color: #ffffff;
    transition: left 0.3s;
  }

  &.is-open {
    .block-sp-menu-bg {
      opacity: 1;
      visibility: visible;
    }

    .block-sp-menu-body {
      left: 0;
    }
  }
}

.block-search_box {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 9999;

  .block-search_box-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(51, 51, 51, 0.6);
  }

  .block-search_box-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 100%;
  }

  .block-search_box-body {
    position: relative;
    width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    padding: 18px 14px 14px;
    border: 2px solid #ededed;
    background-color: #ffffff;
  }
}

.block-search-form {
  display: flex;
  width: 100%;

  .block-search--keyword {
    width: calc(100% - 48px);
    height: 48px;
    border: 2px solid var(--cl-pgr);
    border-right: none;
    background-color: #ffffff;
    padding: 0 12px;
    font-size: 1.4rem;

    &::placeholder {
      color: #aaaaaa;
    }
  }

  .block-search--submit {
    width: 48px;
    height: 48px;
    border: none;
    background-color: var(--cl-pgr);
    background-image: url(../../img/usr/common/sp/searchbox_search.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 24px;
    cursor: pointer;
  }
}

/* ----フッター---- */

.pane-order-footer {
  border-top: 1px solid #b9d5dc;
}

.block-footer-icon-nav {
  margin-top: 20px;

  .list-item {
    border-bottom: 1px solid var(--cl-pgr);

    a {
      display: block;
      position: relative;
      padding: 20px 30px 16px 58px;

      .list-ttl {
        font-size: 1.2rem;
        font-weight: 700;
      }

      .list-comment {
        margin-top: 12px;
        color: var(--cl-gy);
        font-size: 1rem;
      }

      &::before {
        content: "";
        display: block;
        position: absolute;
        top: 25px;
        left: 20px;
        width: 26px;
        height: 26px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
      }

      &::after {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        right: 20px;
        width: 6px;
        height: 8px;
        margin-top: -4px;
        background-color: var(--cl-pgr);
        clip-path: polygon(6px 50%, 0% 0%, 0% 8px);
      }

      &.icon-guide {
        &::before {
          background-image: url(../../img/usr/common/sp/footer_guide.png);
        }
      }

      &.icon-qa {
        &::before {
          background-image: url(../../img/usr/common/sp/footer_qa.png);
        }
      }

      &.icon-contact {
        &::before {
          width: 27px;
          height: 27px;
          background-image: url(../../img/usr/common/sp/footer_contact.png);
        }
      }
    }
  }
}

.block-footer-txt-nav {
  li {
    border-bottom: 1px solid var(--cl-pgr);

    a {
      display: block;
      position: relative;
      padding: 16px 40px 16px 20px;
      font-size: 1.2rem;

      &::after {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        right: 20px;
        width: 6px;
        height: 8px;
        margin-top: -4px;
        background-color: var(--cl-pgr);
        clip-path: polygon(6px 50%, 0% 0%, 0% 8px);
      }
    }
  }
}

.block-footer-bot {
  padding: 20px;
}

.block-footer-bot-nav {
  display: flex;
  align-items: center;
  justify-content: center;

  li {
    padding: 0 8px;
    font-size: 1rem;
  }

  li:not(:first-child) {
    position: relative;

    &::before {
      content: "｜";
      position: absolute;
      top: 0;
      left: -0.5em;
      color: var(--cl-pgr);
    }
  }
}

.block-footer-sns {
  margin-top: 20px;

  a {
    display: block;
    width: 24px;
    height: 24px;
    margin: 0 auto;
    background-image: url(../../img/usr/common/sp/footer_sns_x.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    text-indent: -999999px;
  }
}

.block-footer-copyright {
  margin-top: 20px;
  color: var(--cl-gy);
  font-size: 1rem;
  font-weight: 700;
  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 のコピー */

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;
}

.block-list-annotation {
  li {
    position: relative;
    padding-left: 1em;

    &::before {
      content: "※";
      position: absolute;
      top: 0;
      left: 0;
    }

    & + li {
      margin-top: 0.8em;
    }
  }
}