@charset "UTF-8";
/* ===============================================
  * top - トップのスタイル *
=============================================== */
/* 共通レイアウト */
.global-contents {
  overflow: hidden;
  background: var(--color-white);
}
.global-contents__inner {
  width: 100%;
  padding-bottom: 0;
}

.p-product-slider__description {
  padding-inline: 1rem;
  margin-top: 1.5rem;
  z-index: 2;
}
@media screen and (min-width: 768px) {
  .p-product-slider__description {
    margin-top: 3rem;
    margin-inline: auto;
    padding-inline: 0;
    width: min(90%, 120rem);
    border-radius: 1rem;
  }
}
.p-product-slider__description p {
  font-size: 1.3rem;
  line-height: 1.75;
}
@media screen and (min-width: 768px) {
  .p-product-slider__description p {
    font-size: 1.8rem;
  }
}

.top-button {
  position: relative;
  font-size: 1.2rem;
  border-radius: 99.9rem;
  padding: 0.7rem 1rem;
  line-height: 1;
  color: inherit;
  text-decoration-line: none;
  width: 16rem;
  height: 3.6rem;
  display: grid;
  align-items: center;
  justify-items: center;
}
@media screen and (min-width: 768px) {
  .top-button {
    width: 25rem;
    height: 5rem;
    font-size: 1.6rem;
  }
}
.top-button__primary {
  grid-template-columns: 1fr;
  background-color: var(--color-uny-icon);
  border: 1px solid var(--color-uny-icon);
}
.top-button__secondary {
  background-color: var(--color-white);
  border: 1px solid var(--color-primary);
  grid-template-columns: 1fr 0.6rem;
  display: grid;
  grid-gap: 0.5rem;
}

.swiper {
  opacity: 0;
  transition: all var(--transition-default);
}

.swiper-initialized {
  opacity: 1;
}

/* MV
==================================== */
@media screen and (max-width: 767px) {
  .top-mainvisual__slider {
    --slideImageWidth: 80.9018666667vw;
    --slideWidth: var(--slideImageWidth);
  }
}
@media screen and (min-width: 768px) {
  .top-mainvisual__slider {
    --slideImageWidth: 25vw;
    --slideWidth: var(--slideImageWidth);
  }
}
.top-mainvisual__slider .top-main-slider {
  position: relative;
  padding-top: 1.2rem;
  margin-bottom: 3rem;
}
@media screen and (min-width: 768px) {
  .top-mainvisual__slider .top-main-slider {
    padding-top: 2rem;
    margin-bottom: 5rem;
  }
}
@media screen and (max-width: 767px) {
  .top-mainvisual__slider .top-main-slider .p-top-main__contents--item {
    width: var(--slideWidth) !important;
    margin: 0 0.8rem;
  }
}
@media screen and (min-width: 768px) {
  .top-mainvisual__slider .top-main-slider .p-top-main__contents--item {
    width: var(--slideWidth) !important;
    margin: 0 1rem;
  }
}
.top-mainvisual__slider .top-main-slider .top-main-slider__pagination {
  margin-top: 1rem;
  padding-block: 0.4rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
  /* 円形のプログレスバー */
}
@media screen and (min-width: 768px) {
  .top-mainvisual__slider .top-main-slider .top-main-slider__pagination {
    gap: 1.5rem;
    margin-top: 2.5rem;
  }
}
.top-mainvisual__slider .top-main-slider .top-main-slider__pagination .swiper-pagination-bullet {
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-bullet-inactive-opacity: 0.1;
  --swiper-pagination-bullet-horizontal-gap: 0;
  width: 0.6rem;
  height: 0.6rem;
  background-color: var(--color-black);
  position: relative;
}
@media screen and (min-width: 768px) {
  .top-mainvisual__slider .top-main-slider .top-main-slider__pagination .swiper-pagination-bullet {
    width: 0.8rem;
    height: 0.8rem;
  }
}
.top-mainvisual__slider .top-main-slider .top-main-slider__pagination .circle {
  position: relative;
  width: 14px;
  height: 14px;
  background: var(--color-primary);
  border-radius: 50%;
  text-align: center;
  overflow: hidden;
  z-index: 1;
  cursor: pointer;
  transform: rotate(-180deg);
}
@media screen and (min-width: 768px) {
  .top-mainvisual__slider .top-main-slider .top-main-slider__pagination .circle {
    width: 16px;
    height: 16px;
  }
}
.top-mainvisual__slider .top-main-slider .top-main-slider__pagination .circle::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: -7px;
  width: 14px;
  height: 14px;
  transform-origin: right 7px;
  background: var(--color-white);
  z-index: 2;
}
@media screen and (min-width: 768px) {
  .top-mainvisual__slider .top-main-slider .top-main-slider__pagination .circle::before {
    left: -8px;
    width: 16px;
    height: 16px;
    transform-origin: right 8px;
  }
}
.top-mainvisual__slider .top-main-slider .top-main-slider__pagination .circle::after {
  content: "";
  display: block;
  position: absolute;
  top: 0px;
  left: 7px;
  width: 14px;
  height: 14px;
  transform-origin: left 7px;
  background: var(--color-white);
  z-index: 3;
}
@media screen and (min-width: 768px) {
  .top-mainvisual__slider .top-main-slider .top-main-slider__pagination .circle::after {
    left: 8px;
    width: 16px;
    height: 16px;
    transform-origin: left 8px;
  }
}
.top-mainvisual__slider .top-main-slider .top-main-slider__pagination .circle .circle_inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
}
@media screen and (min-width: 768px) {
  .top-mainvisual__slider .top-main-slider .top-main-slider__pagination .circle .circle_inner {
    width: 14px;
    height: 14px;
  }
}
.top-mainvisual__slider .top-main-slider .top-main-slider__pagination .circle .circle_inner span {
  display: block;
  width: 6px;
  height: 6px;
  background-color: var(--color-primary);
  border-radius: 50rem;
  opacity: 1;
}
@media screen and (min-width: 768px) {
  .top-mainvisual__slider .top-main-slider .top-main-slider__pagination .circle .circle_inner span {
    width: 8px;
    height: 8px;
  }
}
.top-mainvisual__slider .top-main-slider .top-main-slider__pagination .swiper-pagination-bullet-active.circle::before {
  animation: circleBefore 5s linear forwards;
}
.top-mainvisual__slider .top-main-slider .top-main-slider__pagination .swiper-pagination-bullet-active.circle::after {
  animation: circleAfter 5s linear forwards;
}
@keyframes circleAfter {
  0% {
    transform: rotate(0deg);
    background: var(--color-white);
  }
  50% {
    transform: rotate(-180deg);
    background: var(--color-white);
  }
  50.01% {
    transform: rotate(-360deg);
    background: var(--color-primary);
  }
  100% {
    transform: rotate(-360deg);
    background: var(--color-primary);
  }
}
@keyframes circleBefore {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-180deg);
  }
}
.top-mainvisual__slider .top-main-slider .top-main-slider__control {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 50%;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
  margin: auto;
  z-index: 1;
  width: calc(100vw - 2rem);
}
@media screen and (min-width: 768px) {
  .top-mainvisual__slider .top-main-slider .top-main-slider__control {
    display: flex;
    justify-content: space-between;
    width: calc(100vw - 4rem);
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    z-index: 2;
  }
}
.top-mainvisual__slider .top-main-slider .top-main-slider__control .top-main-slider__navigation {
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  transition: var(--transition-default);
}
@media screen and (min-width: 768px) {
  .top-mainvisual__slider .top-main-slider .top-main-slider__control .top-main-slider__navigation {
    width: 5rem;
    box-shadow: none;
    border: 1px solid #E2E2E2;
  }
}
.top-mainvisual__slider .top-main-slider .top-main-slider__control .top-main-slider__navigation:hover {
  filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.1));
}

@media (hover: hover) {
  .top-mainvisual__slider .p-top-main__contents--item {
    transition: var(--transition-default);
    border-radius: 1rem;
  }
  .top-mainvisual__slider .p-top-main__contents--item:hover {
    transform: scale(1.05);
    box-shadow: 0 0 2rem rgba(0, 0, 0, 0.15);
  }
}
/* 重要なお知らせ
==================================== */
[data-section=important-notice] {
  --bg-set: var(--color-bg-form);
  --text-set: var(--color-emphasis);
  --text-set: var(--color-emphasis);
  --icon-notice: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%3E%0A%20%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_52055%22%20data-name%3D%22%E3%83%91%E3%82%B9%2052055%22%20d%3D%22M12%2C22A10%2C10%2C0%2C1%2C1%2C22%2C12%2C10%2C10%2C0%2C0%2C1%2C12%2C22ZM11%2C11v6h2V11Zm0-4V9h2V7Z%22%20transform%3D%22translate(-2%20-2)%22%20fill%3D%22%23c00%22%2F%3E%0A%3C%2Fsvg%3E%0A");
  --icon-width: 2rem;
  margin-bottom: 5rem;
  display: none;
}
@media screen and (max-width: 767px) {
  [data-section=important-notice] {
    padding-inline: 1rem;
    width: 100%;
  }
}
@media screen and (min-width: 768px) {
  [data-section=important-notice] {
    margin-inline: auto;
    padding-inline: 2rem;
    width: min(90% + 0rem, 124rem);
  }
}
[data-section=important-notice]:has(.top-important-notice__list--item),
[data-section=important-notice] .top-important-notice__list:not(:empty) {
  display: grid;
}
[data-section=important-notice] .top-important-notice__inner {
  background: var(--bg-set);
  border-radius: 0.4rem;
  padding: 0.8rem 1rem;
}
@media screen and (min-width: 768px) {
  [data-section=important-notice] .top-important-notice__inner {
    padding: 1.6rem 5rem;
  }
}
[data-section=important-notice] .top-important-notice__list {
  display: grid;
  grid-gap: 1.2rem;
  margin: 0 auto;
  max-width: 100%;
  width: fit-content;
}
[data-section=important-notice] .top-important-notice__list--item a {
  display: grid;
  align-items: center;
  grid-template-columns: 2rem auto;
  grid-gap: 1rem;
  color: var(--text-set);
  text-decoration-line: none;
  font-size: var(--text-size-sp);
  line-height: 1.5;
  letter-spacing: 0.025em;
  font-weight: var(--fw-medium);
}
@media screen and (min-width: 768px) {
  [data-section=important-notice] .top-important-notice__list--item a {
    font-size: var(--text-size-pc);
    line-height: 1.7857142857;
  }
}
[data-section=important-notice] .top-important-notice__list--item a::before {
  content: "";
  width: var(--icon-width);
  height: var(--icon-width);
  display: block;
  background-image: var(--icon-notice);
  background-size: contain;
}
@media screen and (min-width: 768px) {
  [data-section=important-notice] .top-important-notice__list--item a::before {
    font-size: var(--text-size-pc);
    line-height: 1.7857142857;
  }
}

.p-product-slider {
  background-color: #F8F8F8;
  padding-top: 4rem;
  padding-bottom: 0;
}
@media screen and (min-width: 768px) {
  .p-product-slider {
    padding-top: 8rem;
  }
}
.p-product-slider:first-of-type {
  padding-bottom: 4rem;
}
@media screen and (min-width: 768px) {
  .p-product-slider .product-slider-container, .p-product-slider .contents-slider-container {
    position: relative;
  }
}
@media screen and (max-width: 767px) {
  .p-product-slider .p-product-slider__control {
    top: 5.5rem;
  }
}
@media screen and (min-width: 768px) {
  .p-product-slider#ctl00_ContentPlaceHolder1_ctl08_rProductHistory {
    padding-bottom: 0rem;
  }
}
@media screen and (min-width: 768px) {
  .p-product-slider .contents-slider-container .p-product-slider__control {
    top: calc((100% - 4.1rem) / 2 - 2.5rem);
  }
}

/* SALE
==================================== */
[data-section=sale] {
  --bg-set: #F8F8F8;
  background: var(--bg-set);
}
@media screen and (min-width: 768px) {
  [data-section=sale] .p-product-slider__control {
    top: calc(50% + 4.1rem - 2.5rem);
  }
}
[data-section=sale] .p-product-slider__content {
  border-radius: 0;
  box-shadow: none;
}
@media screen and (min-width: 768px) {
  [data-section=sale] .p-product-slider__content {
    margin-top: 0;
    padding-inline: 2rem;
    width: min(90% + 4rem, 124rem);
    background-color: transparent;
  }
}
[data-section=sale] .swiper-wrapper {
  background-color: transparent;
  border-radius: 0;
  width: fit-content;
}
@media screen and (min-width: 768px) {
  [data-section=sale] .swiper-wrapper {
    padding: 3rem 0;
  }
}
[data-section=sale] .swiper-slide {
  border-radius: 1rem;
  overflow: hidden;
}

/* 特集 FEATURE
==================================== */
[data-section=feature] {
  background-color: var(--color-white);
}
[data-section=feature] .feature-banner-grid {
  padding-inline: 1rem;
  margin-top: 1.5rem;
  width: 100%;
}
@media screen and (min-width: 768px) {
  [data-section=feature] .feature-banner-grid {
    margin-top: 3rem;
    margin-inline: auto;
    padding-inline: 2rem;
    width: min(90% + 4rem, 124rem);
  }
}
[data-section=feature] .feature-banner-grid ul {
  display: grid;
  grid-template-columns: repeat(2, auto);
  column-gap: 1rem;
}
@media screen and (min-width: 768px) {
  [data-section=feature] .feature-banner-grid ul {
    grid-template-columns: repeat(4, auto);
    column-gap: 2.4rem;
  }
}
[data-section=feature] .feature-banner-grid ul li {
  margin-bottom: 1rem;
  overflow: hidden;
  border-radius: 0.8rem;
}
@media screen and (min-width: 768px) {
  [data-section=feature] .feature-banner-grid ul li {
    margin-bottom: 2.4rem;
    border-radius: 1rem;
  }
}
[data-section=feature] .list-item {
  opacity: 1;
  transition: var(--transition-default);
}
[data-section=feature] .list-item.is-hidden {
  opacity: 0;
  height: 0;
  margin: 0;
}
[data-section=feature] .list-btn__wrapper {
  width: fit-content;
  margin: 1rem auto 0;
}
@media screen and (min-width: 768px) {
  [data-section=feature] .list-btn__wrapper {
    margin-top: 1.6rem;
  }
}
[data-section=feature] .list-btn__wrapper .list-btn, [data-section=feature] .list-btn__wrapper .list-btn-close {
  cursor: pointer;
  outline: none;
  width: 20rem;
  position: relative;
  grid-template-columns: 1fr;
  font-size: 1.2rem;
  font-family: var(--font-main);
}
@media screen and (min-width: 768px) {
  [data-section=feature] .list-btn__wrapper .list-btn, [data-section=feature] .list-btn__wrapper .list-btn-close {
    width: 30rem;
    font-size: 1.6rem;
  }
}
[data-section=feature] .list-btn__wrapper .list-btn::after, [data-section=feature] .list-btn__wrapper .list-btn-close::after {
  content: "";
  position: absolute;
  display: block;
  width: 1.1rem;
  height: 1.1rem;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 2rem;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20id%3D%22plus%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2211%22%20height%3D%2211%22%20viewBox%3D%220%200%2011%2011%22%3E%0A%20%20%3Cpath%20id%3D%22%E7%B7%9A_861%22%20data-name%3D%22%E7%B7%9A%20861%22%20d%3D%22M10%2C.5H0A.5.5%2C0%2C0%2C1-.5%2C0%2C.5.5%2C0%2C0%2C1%2C0-.5H10a.5.5%2C0%2C0%2C1%2C.5.5A.5.5%2C0%2C0%2C1%2C10%2C.5Z%22%20transform%3D%22translate(0.5%205.5)%22%2F%3E%0A%20%20%3Cpath%20id%3D%22%E7%B7%9A_862%22%20data-name%3D%22%E7%B7%9A%20862%22%20d%3D%22M10%2C.5H0A.5.5%2C0%2C0%2C1-.5%2C0%2C.5.5%2C0%2C0%2C1%2C0-.5H10a.5.5%2C0%2C0%2C1%2C.5.5A.5.5%2C0%2C0%2C1%2C10%2C.5Z%22%20transform%3D%22translate(5.5%200.5)%20rotate(90)%22%2F%3E%0A%3C%2Fsvg%3E%0A");
  background-repeat: no-repeat;
  background-size: contain;
  transition: translate var(--animation-hover), scale var(--animation-hover);
  transform-origin: left center;
  transition-timing-function: linear;
  pointer-events: none;
  background-position: center;
}
[data-section=feature] .list-btn__wrapper .list-btn.is-btn-hidden, [data-section=feature] .list-btn__wrapper .list-btn-close.is-btn-hidden {
  display: none;
}
[data-section=feature] .list-btn__wrapper .list-btn.is-hidden, [data-section=feature] .list-btn__wrapper .list-btn-close.is-hidden {
  display: none;
}
[data-section=feature] .list-btn__wrapper .list-btn-close::after {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2211.2%22%20height%3D%2211.2%22%20viewBox%3D%220%200%2011.2%2011.2%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3CclipPath%20id%3D%22clip-path%22%3E%0A%20%20%20%20%20%20%3Crect%20id%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_6839%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%206839%22%20width%3D%2211.2%22%20height%3D%2211.2%22%20transform%3D%22translate(-13573%207323)%22%20fill%3D%22%23fff%22%20stroke%3D%22%23707070%22%20stroke-width%3D%221%22%2F%3E%0A%20%20%20%20%3C%2FclipPath%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Cg%20id%3D%22%E3%83%9E%E3%82%B9%E3%82%AF%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_9%22%20data-name%3D%22%E3%83%9E%E3%82%B9%E3%82%AF%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%209%22%20transform%3D%22translate(13573%20-7323)%22%20clip-path%3D%22url(%23clip-path)%22%3E%0A%20%20%20%20%3Cpath%20id%3D%22%E7%B7%9A_1190%22%20data-name%3D%22%E7%B7%9A%201190%22%20d%3D%22M10%2C.6H0A.6.6%2C0%2C0%2C1-.6%2C0%2C.6.6%2C0%2C0%2C1%2C0-.6H10a.6.6%2C0%2C0%2C1%2C.6.6A.6.6%2C0%2C0%2C1%2C10%2C.6Z%22%20transform%3D%22translate(-13572.4%207328.6)%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A");
}

@media (hover: hover) {
  [data-section=feature] .feature-banner-grid ul li {
    transition: var(--transition-default);
  }
  [data-section=feature] .feature-banner-grid ul li:hover {
    transform: scale(1.05);
    box-shadow: 0 0 2rem rgba(0, 0, 0, 0.15);
  }
}
/* 定期購入
==================================== */
[data-section=regular-purchase] {
  background-color: var(--color-white);
  margin-bottom: 4rem;
}
@media screen and (min-width: 768px) {
  [data-section=regular-purchase] {
    margin-bottom: 8rem;
  }
}
[data-section=regular-purchase] .p-product-slider__content {
  border-radius: 0;
  box-shadow: none;
}
@media screen and (min-width: 768px) {
  [data-section=regular-purchase] .p-product-slider__content {
    margin-top: 0;
    padding-inline: 2rem;
    width: min(90% + 4rem, 124rem);
  }
}
[data-section=regular-purchase] .swiper-wrapper {
  background-color: transparent;
  border-radius: 0;
  width: fit-content;
}
@media screen and (min-width: 768px) {
  [data-section=regular-purchase] .swiper-wrapper {
    padding: 3rem 0;
  }
}
[data-section=regular-purchase] .swiper-slide {
  border-radius: 1rem;
  overflow: hidden;
}

@media (hover: hover) {
  [data-section=sale] .p-product-slider__item,
  [data-section=regular-purchase] .p-product-slider__item {
    transition: var(--transition-default);
  }
  [data-section=sale] .p-product-slider__item:hover,
  [data-section=regular-purchase] .p-product-slider__item:hover {
    transform: scale(1.05);
    box-shadow: 0 0 2rem rgba(0, 0, 0, 0.15);
  }
  [data-section=sale] .p-product-slider__item a,
  [data-section=regular-purchase] .p-product-slider__item a {
    transition: opacity var(--transition-default);
  }
  [data-section=sale] .p-product-slider__item a:hover,
  [data-section=regular-purchase] .p-product-slider__item a:hover {
    opacity: 1;
  }
}
/* 人気ランキング
==================================== */
@media screen and (min-width: 768px) {
  [data-section=rank] .p-product-slider .p-product-slider__content {
    border-radius: 0px 1rem 1rem 1rem;
  }
}
[data-section=rank] .swiper-wrapper {
  border-radius: 0px 1rem 1rem 1rem;
}
[data-section=rank] .p-product__rank {
  position: absolute;
  z-index: 1;
  background-color: var(--color-primary);
  width: 3.2rem;
  height: 3.2rem;
}
@media screen and (min-width: 768px) {
  [data-section=rank] .p-product__rank {
    width: 4rem;
    height: 4rem;
  }
}
[data-section=rank] .p-product__rank--text-wrapper {
  margin-top: 0.4rem;
  display: grid;
  align-items: center;
  justify-content: center;
  justify-items: center;
  grid-gap: 0.1rem;
  height: 2.3rem;
  color: var(--color-white);
  font-size: 0.8rem;
  line-height: 1;
}
@media screen and (min-width: 768px) {
  [data-section=rank] .p-product__rank--text-wrapper {
    margin-top: 0.5rem;
    grid-gap: 0.3rem;
    height: 3.1rem;
    font-size: 1rem;
  }
}
[data-section=rank] .p-product__rank--text-wrapper .number {
  font-size: 1.4rem;
}
@media screen and (min-width: 768px) {
  [data-section=rank] .p-product__rank--text-wrapper .number {
    font-size: 1.8rem;
  }
}
[data-section=rank] .p-product__rank.rank-1, [data-section=rank] .p-product__rank.rank-2, [data-section=rank] .p-product__rank.rank-3 {
  clip-path: polygon(100% 0%, 100% 100%, 50% 80%, 0 100%, 0 0);
  width: 3.2rem;
  height: 4rem;
}
@media screen and (min-width: 768px) {
  [data-section=rank] .p-product__rank.rank-1, [data-section=rank] .p-product__rank.rank-2, [data-section=rank] .p-product__rank.rank-3 {
    width: 4rem;
    height: 5rem;
  }
}
[data-section=rank] .p-product__rank.rank-1 {
  background-color: #E19E2E;
}
[data-section=rank] .p-product__rank.rank-2 {
  background-color: #7E7E7E;
}
[data-section=rank] .p-product__rank.rank-3 {
  background-color: #8D6016;
}

/* カテゴリー
==================================== */
[data-section=category] {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
@media screen and (min-width: 768px) {
  [data-section=category] {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
}
@media screen and (min-width: 768px) {
  [data-section=category] .mega-menu__content .mega-menu__content-inner {
    padding-inline: 2rem;
    width: min(90% + 4rem, 124rem);
    margin: 0 auto;
  }
}
[data-section=category] .global-content__fluid-wrapper {
  padding: 0 2rem !important;
}
@media screen and (min-width: 768px) {
  [data-section=category] .global-content__fluid-wrapper {
    margin-inline: auto;
    padding-inline: 0;
    padding: 0 !important;
  }
}
[data-section=category] .global-nav__content-list {
  display: block;
}
[data-section=category] .global-nav__content-list .global-nav__text--link,
[data-section=category] .global-nav__content-list .hamburger-category__toggle-button {
  display: none;
}
[data-section=category] .p-product-slider__heading {
  margin-bottom: 1.5rem;
}
@media screen and (min-width: 768px) {
  [data-section=category] .p-product-slider__heading {
    margin-bottom: 3rem;
  }
}
[data-section=category] .category-list .tab__menu {
  margin-bottom: 3rem;
  position: relative;
}
@media screen and (min-width: 768px) {
  [data-section=category] .category-list .tab__menu {
    padding: 0 2rem;
    width: min(90% + 4rem, 124rem);
    margin: 0 auto 5rem;
  }
}
[data-section=category] .category-list .tab__menu .tab__wrap {
  background-color: var(--color-white);
}
@media screen and (max-width: 767px) {
  [data-section=category] .category-list .tab__menu .tab__wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    z-index: 1;
    padding: 1rem;
  }
}
@media screen and (min-width: 768px) {
  [data-section=category] .category-list .tab__menu .tab__wrap {
    margin-inline: auto;
    padding: 1.5rem;
    border-radius: 1rem;
  }
}
@media screen and (max-width: 767px) {
  [data-section=category] .category-list .tab__menu .tab-arrow-container {
    position: absolute;
    top: -4rem;
    right: 1rem;
    display: grid;
    grid-template-columns: repeat(2, 3rem);
    gap: 0.8rem;
  }
}
@media screen and (max-width: 767px) {
  [data-section=category] .category-list .tab__menu .m-tab-arrow {
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
    border-radius: 50%;
  }
}
@media screen and (max-width: 767px) {
  [data-section=category] .category-list .tab__menu .tab__menu__inner {
    width: max-content;
    transition: transform 0.3s ease;
    transform: translateX(0);
  }
}
[data-section=category] .category-list .tab__menu .c-tab__list {
  display: flex;
  flex-wrap: wrap;
}
@media screen and (max-width: 767px) {
  [data-section=category] .category-list .tab__menu .c-tab__list {
    width: 154vw;
    row-gap: 0.3rem;
  }
}
@media screen and (min-width: 768px) {
  [data-section=category] .category-list .tab__menu .c-tab__list {
    width: 100%;
    row-gap: 0.5rem;
  }
}
[data-section=category] .category-list .tab__menu .c-tab__item--button {
  color: var(--color-primary);
  font-family: var(--font-main);
  grid-template-columns: 1fr;
  padding: 0.6rem 1.5rem;
  font-size: 1.4rem;
  color: var(--color-black);
  letter-spacing: 0.025em;
  border-radius: 1.6rem;
}
@media screen and (min-width: 768px) {
  [data-section=category] .category-list .tab__menu .c-tab__item--button {
    border-radius: 5rem;
  }
}
[data-section=category] .category-list .tab__menu .c-tab__item--button a {
  color: inherit;
  text-decoration-line: none;
}
[data-section=category] .category-list .tab__menu .c-tab__item[data-state=active] .c-tab__item--button {
  color: var(--color-white);
  background-color: var(--color-primary);
}

/* キャンペーン
==================================== */
[data-section=campaign] {
  background-color: var(--color-white);
  padding-top: 4rem;
}
@media screen and (min-width: 768px) {
  [data-section=campaign] {
    padding-top: 10rem;
  }
}
[data-section=campaign] .campaign-banner-grid {
  margin-top: 1.6rem;
  padding-inline: 1rem;
  width: 100%;
}
@media screen and (min-width: 768px) {
  [data-section=campaign] .campaign-banner-grid {
    margin-top: 1rem;
    margin-inline: auto;
    padding: 2rem 0;
    padding-inline: 2rem;
    width: min(90% + 4rem, 124rem);
  }
}
[data-section=campaign] .campaign-banner-grid ul {
  display: grid;
  grid-gap: 0.8rem;
}
@media screen and (min-width: 768px) {
  [data-section=campaign] .campaign-banner-grid ul {
    grid-template-columns: repeat(3, auto);
    grid-gap: 2.5rem;
  }
}
@media (hover: hover) {
  [data-section=campaign] .campaign-banner-grid ul li a img {
    transition: var(--transition-default);
  }
  [data-section=campaign] .campaign-banner-grid ul li a:hover img {
    transform: scale(1.05);
    box-shadow: 0 0 2rem rgba(0, 0, 0, 0.15);
  }
}
/* お知らせ
==================================== */
[data-section=news] {
  background-color: var(--color-white);
  padding-top: 4rem;
}
@media screen and (min-width: 768px) {
  [data-section=news] {
    padding-top: 10rem;
  }
}
[data-section=news] .p-top-news__article--inner {
  margin-inline: auto;
  padding-inline: 1rem;
  width: 100%;
}
@media screen and (min-width: 768px) {
  [data-section=news] .p-top-news__article--inner {
    margin-inline: auto;
    padding-inline: 2rem;
    width: min(90% + 4rem, 124rem);
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 5rem;
  }
}
[data-section=news] .p-product-slider__heading {
  margin-inline: auto;
  padding-inline: 0;
  width: 100%;
}
[data-section=news] .p-product-slider__heading--wrapper {
  display: grid;
}
@media screen and (max-width: 767px) {
  [data-section=news] .p-product-slider__heading--wrapper {
    grid-template-columns: auto 16rem;
    align-items: end;
  }
}
@media screen and (min-width: 768px) {
  [data-section=news] .p-product-slider__heading--wrapper {
    align-content: center;
    gap: 3rem;
  }
}
[data-section=news] .p-top-news__article-wrapper {
  margin-top: 1.6rem;
  display: grid;
  grid-gap: 1.5rem;
}
@media screen and (min-width: 768px) {
  [data-section=news] .p-top-news__article-wrapper {
    margin-top: 0;
    grid-gap: 3rem;
  }
}
[data-section=news] .p-top-news__article-wrapper .p-top-news__article-details .p-top-news__article-link-wrapper {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #EFEFEF;
  cursor: pointer;
  display: grid;
  grid-gap: 0.8rem;
}
@media screen and (min-width: 768px) {
  [data-section=news] .p-top-news__article-wrapper .p-top-news__article-details .p-top-news__article-link-wrapper {
    padding-bottom: 3rem;
    padding-left: 4rem;
    padding-right: 4.4rem;
    grid-template-columns: auto 1fr 0.6rem;
    grid-gap: 2rem;
    align-items: center;
  }
}
@media screen and (min-width: 768px) {
  [data-section=news] .p-top-news__article-wrapper .p-top-news__article-details .p-top-news__article-link-wrapper::after {
    content: "";
    display: block;
    width: 0.6rem;
    height: 1.1rem;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%226%22%20height%3D%2211%22%20viewBox%3D%220%200%206%2011%22%3E%0A%20%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_52083%22%20data-name%3D%22%E3%83%91%E3%82%B9%2052083%22%20d%3D%22M-16971.59%2C8076.5a.5.5%2C0%2C0%2C1-.354-.146.5.5%2C0%2C0%2C1%2C0-.707l4.646-4.646-4.646-4.647a.5.5%2C0%2C0%2C1%2C0-.707.5.5%2C0%2C0%2C1%2C.707%2C0l5%2C5a.5.5%2C0%2C0%2C1%2C.146.354.5.5%2C0%2C0%2C1-.146.354l-5%2C5A.5.5%2C0%2C0%2C1-16971.59%2C8076.5Z%22%20transform%3D%22translate(16972.09%20-8065.5)%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    background-size: 0.6rem;
  }
}
[data-section=news] .p-top-news__article-wrapper .p-top-news__article-details .p-top-news__article-link-wrapper .p-top-news__date {
  font-size: 1.3rem;
  letter-spacing: 0.1em;
}
@media screen and (min-width: 768px) {
  [data-section=news] .p-top-news__article-wrapper .p-top-news__article-details .p-top-news__article-link-wrapper .p-top-news__date {
    width: 12rem;
    font-size: 1.6rem;
  }
}
[data-section=news] .p-top-news__article-wrapper .p-top-news__article-details .p-top-news__article-link-wrapper .p-top-news__text {
  font-size: 1.3rem;
  letter-spacing: 0.025em;
  line-height: 1.5;
}
@media screen and (min-width: 768px) {
  [data-section=news] .p-top-news__article-wrapper .p-top-news__article-details .p-top-news__article-link-wrapper .p-top-news__text {
    padding-right: 2rem;
    font-size: 1.5rem;
  }
}
[data-section=news] .p-top-news__article-wrapper .p-top-news__article-details:first-of-type .p-top-news__article-link-wrapper {
  padding-top: 1.5rem;
  border-top: 1px solid #EFEFEF;
}
@media screen and (min-width: 768px) {
  [data-section=news] .p-top-news__article-wrapper .p-top-news__article-details:first-of-type .p-top-news__article-link-wrapper {
    padding-top: 3rem;
  }
}

/* オンラインショップの便利な使い方
==================================== */
[data-section=howto] {
  background-color: var(--color-uny-bg-1);
  padding-top: 4rem;
  padding-bottom: 5rem;
  margin-top: 4rem;
}
@media screen and (min-width: 768px) {
  [data-section=howto] {
    padding-top: 8rem;
    padding-bottom: 8rem;
    margin-top: 10rem;
  }
}
[data-section=howto] .top-section-howto__heading .heading-ja {
  display: block;
  width: fit-content;
  position: relative;
  margin: 0 auto;
  font-size: 1.8rem;
  letter-spacing: 0.1em;
}
@media screen and (min-width: 768px) {
  [data-section=howto] .top-section-howto__heading .heading-ja {
    font-size: 3rem;
  }
}
[data-section=howto] .top-section-howto__heading .heading-ja::after {
  content: "";
  display: block;
  height: 0.3rem;
  width: 100%;
  background: radial-gradient(circle farthest-side, #aaa, #aaa 50%, transparent 50%, transparent);
  background-size: 0.6rem 0.3rem;
  margin-top: 0.6rem;
  position: absolute;
  bottom: -0.9rem;
}
@media screen and (min-width: 768px) {
  [data-section=howto] .top-section-howto__heading .heading-ja::after {
    bottom: -1.4rem;
  }
}
[data-section=howto] .howto-section-contents {
  margin-top: 3rem;
  padding-inline: 1rem;
  width: 100%;
}
@media screen and (min-width: 768px) {
  [data-section=howto] .howto-section-contents {
    margin-top: 4.5rem;
    margin-inline: auto;
    padding-inline: 0;
    width: min(90%, 120rem);
  }
}
[data-section=howto] .howto-section-contents .howto-section-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 2.5rem;
}
@media screen and (min-width: 768px) {
  [data-section=howto] .howto-section-contents .howto-section-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: min(2.638vw, 3.8rem) min(1.666vw, 2.4rem);
  }
}
[data-section=howto] .howto-section-contents .howto-section-list__title {
  text-align: center;
}
[data-section=howto] .howto-section-contents .howto-section-list__title .title-point {
  margin-bottom: 0.5rem;
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  display: flex;
  gap: 1rem;
  align-items: baseline;
  justify-content: center;
  font-weight: var(--fw-bold);
}
@media screen and (min-width: 768px) {
  [data-section=howto] .howto-section-contents .howto-section-list__title .title-point {
    margin-bottom: 0.8rem;
    font-size: 1.6rem;
  }
}
[data-section=howto] .howto-section-contents .howto-section-list__title .title-point .number {
  font-size: 2.5rem;
  letter-spacing: 0.1em;
}
@media screen and (min-width: 768px) {
  [data-section=howto] .howto-section-contents .howto-section-list__title .title-point .number {
    font-size: 3.2rem;
  }
}
[data-section=howto] .howto-section-contents .howto-section-list__title .title-main {
  font-size: 1.4rem;
  letter-spacing: 0.025em;
  line-height: 1.8;
  text-align: center;
  font-weight: var(--fw-medium);
}
@media screen and (min-width: 768px) {
  [data-section=howto] .howto-section-contents .howto-section-list__title .title-main {
    line-height: 1.8;
    font-size: min(1.25vw, 1.8rem);
  }
}
[data-section=howto] .howto-section-contents .howto-section-list__title .title-lead {
  font-size: 1.1rem;
  letter-spacing: 0.025em;
  line-height: 1.8;
  color: var(--color-text-default-sub);
  margin-top: 0.6rem;
}
@media screen and (min-width: 768px) {
  [data-section=howto] .howto-section-contents .howto-section-list__title .title-lead {
    line-height: 2;
    font-size: 1.3rem;
  }
}
[data-section=howto] .howto-section-contents .howto-section-list__description {
  font-size: 1.2rem;
  letter-spacing: 0.025em;
  line-height: 1.75;
  background-color: var(--color-white);
  border-radius: 1rem;
  padding: 1rem 1rem 2rem;
  height: -webkit-fill-available;
}
@media screen and (min-width: 768px) {
  [data-section=howto] .howto-section-contents .howto-section-list__description {
    font-size: 1.5rem;
    height: min(29.609375vw, 37.9rem);
    padding: min(1.7361vw, 2.5rem);
  }
}
[data-section=howto] .howto-section-contents .howto-section-list__description .description-link {
  display: block;
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  line-height: 1.5;
  color: var(--color-textlink);
  text-decoration-line: underline;
  margin-top: 0.5rem;
}
@media screen and (min-width: 768px) {
  [data-section=howto] .howto-section-contents .howto-section-list__description .description-link {
    font-size: min(0.833vw, 1.2rem);
  }
}
[data-section=howto] .howto-section-contents .howto-section-list__description .description-link::after {
  content: "";
  display: inline-block;
  width: 0.6rem;
  height: 1.1rem;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%226%22%20height%3D%2211%22%20viewBox%3D%220%200%206%2011%22%3E%0A%20%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_52154%22%20data-name%3D%22%E3%83%91%E3%82%B9%2052154%22%20d%3D%22M-16971.59%2C8076.5a.5.5%2C0%2C0%2C1-.354-.146.5.5%2C0%2C0%2C1%2C0-.707l4.646-4.646-4.646-4.647a.5.5%2C0%2C0%2C1%2C0-.707.5.5%2C0%2C0%2C1%2C.707%2C0l5%2C5a.5.5%2C0%2C0%2C1%2C.146.354.5.5%2C0%2C0%2C1-.146.354l-5%2C5A.5.5%2C0%2C0%2C1-16971.59%2C8076.5Z%22%20transform%3D%22translate(16972.09%20-8065.5)%22%20fill%3D%22%2323abdd%22%2F%3E%0A%3C%2Fsvg%3E%0A");
  background-repeat: no-repeat;
  background-size: contain;
  left: 0.5rem;
  position: relative;
  top: min(0.243vw, 0.2rem);
}
[data-section=howto] .howto-section-contents .howto-section-list__description .description-text {
  font-weight: var(--fw-bold);
  letter-spacing: 0.025em;
  display: grid;
  grid-gap: 0;
  justify-items: center;
  justify-items: center;
}
[data-section=howto] .howto-section-contents .howto-section-list__description .description-text .strong {
  font-size: 1.3rem;
  line-height: 2;
  width: fit-content;
  position: relative;
}
@media screen and (min-width: 768px) {
  [data-section=howto] .howto-section-contents .howto-section-list__description .description-text .strong {
    font-size: min(1.3281vw, 1.7rem);
  }
}
[data-section=howto] .howto-section-contents .howto-section-list__description .description-text .strong::after {
  content: "";
  display: block;
  height: 0.2rem;
  width: 100%;
  background: radial-gradient(circle farthest-side, var(--color-primary), var(--color-primary) 50%, transparent 50%, transparent);
  background-size: 0.4rem 0.2rem;
  position: absolute;
  bottom: 0.2rem;
}
[data-section=howto] .howto-section-contents .howto-section-list__description .description-text .emphasis {
  font-size: 2rem;
  color: var(--color-emphasis);
  width: fit-content;
  position: relative;
}
@media screen and (min-width: 768px) {
  [data-section=howto] .howto-section-contents .howto-section-list__description .description-text .emphasis {
    font-size: min(2.109vw, 2.7rem);
  }
}
[data-section=howto] .howto-section-contents .howto-section-list__description .description-text .emphasis::after {
  content: "";
  display: block;
  height: 0.2rem;
  width: 100%;
  background: radial-gradient(circle farthest-side, var(--color-primary), var(--color-primary) 50%, transparent 50%, transparent);
  background-size: 0.4rem 0.2rem;
  position: absolute;
  bottom: 0.2rem;
}
@media screen and (max-width: 767px) {
  [data-section=howto] .howto-section-contents .howto-section-list__block {
    width: 100%;
    display: flex;
    gap: 1.5rem;
    flex-direction: column;
  }
}
@media screen and (min-width: 768px) {
  [data-section=howto] .howto-section-contents .howto-section-list__block {
    display: grid;
    align-content: space-between;
    grid-gap: min(18.055vw, 2.6rem);
  }
}
[data-section=howto] .howto-section-contents .howto-section-list__block .description-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 2.8rem;
}
@media screen and (min-width: 768px) {
  [data-section=howto] .howto-section-contents .howto-section-list__block .description-list {
    grid-gap: min(4.0625vw, 5.2rem);
  }
}
@media screen and (min-width: 768px) {
  [data-section=howto] .howto-section-contents .howto-section-list__block .description-list__title {
    margin-bottom: 1rem;
  }
}
[data-section=howto] .howto-section-contents .howto-section-list__block .description-list__title .title-main {
  display: grid;
  grid-gap: 1rem;
  justify-items: center;
  justify-content: center;
  text-align: center;
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-align: center;
  font-weight: var(--fw-bold);
}
@media screen and (min-width: 768px) {
  [data-section=howto] .howto-section-contents .howto-section-list__block .description-list__title .title-main {
    font-size: min(1.46vw, 1.9rem);
  }
}
[data-section=howto] .howto-section-contents .howto-section-list__block .description-list__title .title-main img {
  width: 12rem;
}
@media screen and (min-width: 768px) {
  [data-section=howto] .howto-section-contents .howto-section-list__block .description-list__title .title-main img {
    width: min(16.406vw, 21rem);
  }
}
[data-section=howto] .howto-section-contents .howto-section-list__block .description-list__description {
  letter-spacing: 0.025em;
  font-size: 1.2rem;
}
@media screen and (min-width: 768px) {
  [data-section=howto] .howto-section-contents .howto-section-list__block .description-list__description {
    width: fit-content;
    margin: 0 auto;
    font-size: min(1.09vw, 1.4rem);
  }
}
[data-section=howto] .howto-section-contents .howto-section-list__block:nth-of-type(1) .description-list .description-list__block:first-of-type, [data-section=howto] .howto-section-contents .howto-section-list__block:nth-of-type(2) .description-list .description-list__block:first-of-type {
  position: relative;
}
[data-section=howto] .howto-section-contents .howto-section-list__block:nth-of-type(1) .description-list .description-list__block:first-of-type::after, [data-section=howto] .howto-section-contents .howto-section-list__block:nth-of-type(2) .description-list .description-list__block:first-of-type::after {
  content: "";
  position: absolute;
  display: block;
  width: 1px;
  top: 0;
  background-color: var(--color-uny-border);
}
@media screen and (max-width: 767px) {
  [data-section=howto] .howto-section-contents .howto-section-list__block:nth-of-type(1) .description-list .description-list__block:first-of-type::after, [data-section=howto] .howto-section-contents .howto-section-list__block:nth-of-type(2) .description-list .description-list__block:first-of-type::after {
    right: -1.4rem;
    height: 100%;
  }
}
@media screen and (min-width: 768px) {
  [data-section=howto] .howto-section-contents .howto-section-list__block:nth-of-type(1) .description-list .description-list__block:first-of-type::after, [data-section=howto] .howto-section-contents .howto-section-list__block:nth-of-type(2) .description-list .description-list__block:first-of-type::after {
    right: -2.5rem;
    height: min(25.7038vw, 32.9rem);
  }
}
@media screen and (max-width: 767px) {
  [data-section=howto] .howto-section-contents .howto-section-list__block:nth-of-type(3), [data-section=howto] .howto-section-contents .howto-section-list__block:nth-of-type(4) {
    width: calc((100% - 1rem) / 2);
  }
}
[data-section=howto] .howto-section-contents .howto-section-list__block:nth-of-type(3) .description-list, [data-section=howto] .howto-section-contents .howto-section-list__block:nth-of-type(4) .description-list {
  display: grid;
  grid-template-columns: repeat(1, 100%);
}
@media screen and (max-width: 767px) {
  [data-section=howto] .howto-section-contents .howto-section-list__block:nth-of-type(3) .howto-section-list__description, [data-section=howto] .howto-section-contents .howto-section-list__block:nth-of-type(4) .howto-section-list__description {
    height: 22.6rem;
  }
}
@media screen and (min-width: 768px) {
  [data-section=howto] .howto-section-contents .howto-section-list__block:nth-of-type(3) .howto-section-list__description, [data-section=howto] .howto-section-contents .howto-section-list__block:nth-of-type(4) .howto-section-list__description {
    height: min(20.625vw, 26.4rem);
  }
}

/*# sourceMappingURL=top.css.map */