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

@media screen and (max-width: 767px) {
  .top__section--wrapper {
    overflow: hidden;
  }
}
.top__section--wrapper figure {
  margin: 0;
  padding: 0;
}
@media screen and (max-width: 767px) {
  .top__section--inner {
    padding: 0 1rem;
  }
}
@media screen and (min-width: 768px) {
  .top__section--inner {
    width: var(--container-default);
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    padding-right: var(--padding-horizontal-global);
    padding-left: var(--padding-horizontal-global);
  }
}
.top__section--inner > .c-title,
.top__section--inner > .c-title--container {
  padding-top: 4rem;
  padding-bottom: 2rem;
}
@media screen and (min-width: 768px) {
  .top__section--inner > .c-title,
  .top__section--inner > .c-title--container {
    padding-top: 8rem;
    padding-bottom: 5rem;
  }
}
.top__section--inner .c-title {
  font-size: 2.2rem;
  letter-spacing: 0.15em;
  line-height: 1.5;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .top__section--inner .c-title {
    font-size: 3.6rem;
  }
}
.top__section--inner .p-top-title {
  display: grid;
  align-items: center;
  grid-template-columns: 0.3rem auto;
  grid-gap: 1rem;
  margin-bottom: 1.8rem;
  font-size: 1.6rem;
  line-height: 2.25;
  letter-spacing: 0.055em;
  color: var(--color-primary);
  background-color: #F4F8FD;
}
@media screen and (min-width: 768px) {
  .top__section--inner .p-top-title {
    align-items: baseline;
    grid-template-columns: 0.5rem auto;
    grid-gap: 2rem;
    margin-bottom: 3.3rem;
    font-size: 2.1rem;
  }
}
.top__section--inner .p-top-title--icon {
  background-color: transparent;
  grid-template-columns: 2.6rem auto;
  line-height: 1;
  font-size: 1.9rem;
}
@media screen and (min-width: 768px) {
  .top__section--inner .p-top-title--icon {
    grid-template-columns: 3rem auto;
    font-size: 2.3rem;
  }
}
.top__section--inner .p-top-title--icon-wrapper {
  width: 100%;
  height: auto;
  display: inline-block;
  position: relative;
  top: -0.2rem;
}
@media screen and (min-width: 768px) {
  .top__section--inner .p-top-title--icon-wrapper {
    top: 0.4rem;
  }
}
.top__section--inner .p-top-title--bar {
  background-color: var(--color-primary);
  width: 100%;
  height: 100%;
  display: inline-block;
}
.top__section--inner .p-top-title[data-color=green] {
  color: var(--color-white);
  background-color: var(--color-green);
}
.top__section--inner .p-top-title[data-color=green] .p-top-title--bar {
  background-color: #0C7E39;
}
.top__section--inner .c-button__top {
  display: grid;
  grid-template-columns: var(--arrow-width) 1fr var(--arrow-width);
  align-items: center;
  --arrow-width: .8rem;
}
.top__section--inner .c-button__top::before, .top__section--inner .c-button__top::after {
  content: "";
  width: 100%;
  aspect-ratio: 8/14;
  background-repeat: no-repeat;
  background-size: contain;
}
.top__section--inner .c-button__top--default {
  --adjust-position: .6rem;
  --arrow-width: .75rem;
  margin: 0 auto;
  display: grid;
  min-width: 33.5rem;
  width: 89.3333vw;
  height: 4.9rem;
  padding-block: 1.1rem;
  padding-inline: 1.5rem;
  column-gap: 0.5rem;
  border-radius: 0.3rem;
  box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, 0.06);
  background-color: var(--color-white);
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  font-weight: var(--fw-bold);
  font-size: 1.4rem;
  text-decoration: none;
  letter-spacing: 0.055em;
  text-align: center;
  transition: background-color var(--transition-default);
}
@media screen and (min-width: 768px) {
  .top__section--inner .c-button__top--default {
    --adjust-position: 1rem;
    min-width: 70rem;
    width: 70rem;
    height: 5.7rem;
    max-height: 8rem;
    padding-block: 1.3rem;
    padding-inline: 1.8rem;
    font-size: 1.6rem;
  }
}
.top__section--inner .c-button__top--default::after {
  background-image: var(--arrow-blue);
}
.top__section--inner .c-button__top--default:hover {
  background-color: #F7FAFD;
}
.top__section--inner .c-button__top--default[data-color=green] {
  border: 1px solid var(--color-green);
  color: var(--color-green);
}
.top__section--inner .c-button__top--default[data-color=green]::after {
  background-image: var(--arrow-green);
}
.top__section--inner .c-button__top--default[data-color=green]:hover {
  background-color: #EDFAF2;
}
.top__section--inner .c-button__top--min {
  --adjust-position: .6rem;
  --arrow-width: .75rem;
  margin: 0 auto;
  display: grid;
  min-width: 17rem;
  width: 45.33vw;
  height: 3.7rem;
  padding-block: 0;
  padding-inline: 1.5rem;
  column-gap: 0.5rem;
  border-radius: 0.3rem;
  box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, 0.06);
  background-color: var(--color-white);
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  background-color: var(--color-white);
  font-weight: var(--fw-bold);
  font-size: 1.2rem;
  text-decoration: none;
  letter-spacing: 0;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .top__section--inner .c-button__top--min {
    --adjust-position: 1rem;
    width: 17rem;
    height: 3.9rem;
    padding-block: 0;
    padding-inline: 1.8rem;
    font-size: 1.3rem;
  }
}
.top__section--inner .c-button__top--min::after {
  background-image: var(--arrow-blue);
}
.top__section--inner .c-button__top--detail {
  --adjust-position: .6rem;
  --arrow-width: .5rem;
  margin: 0 auto;
  display: grid;
  width: 100%;
  height: 3.7rem;
  padding-block: 0;
  padding-inline: 1rem;
  border-radius: 0.3rem;
  box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--color-btn-yellow);
  background-color: var(--color-btn-yellow);
  column-gap: 0.5rem;
  font-weight: var(--fw-bold);
  font-size: 1.2rem;
  text-decoration: none;
  letter-spacing: 0;
  text-align: center;
  color: var(--color-text-default);
}
@media screen and (min-width: 768px) {
  .top__section--inner .c-button__top--detail {
    --adjust-position: 1rem;
    min-width: 100%;
    width: 100%;
    height: 4.3rem;
    max-height: 8rem;
    padding-block: 0;
    padding-inline: 1.8rem;
    font-size: 1.4rem;
  }
}
.top__section--inner .c-button__top--detail::after {
  background-image: var(--arrow-black);
}
@media screen and (min-width: 768px) {
  .top__section--inner .section__container {
    padding: 0 0.6rem;
  }
}

/* MV
==================================== */
.top-mv {
  --slideWidth: var(--slideImageWidth);
  margin-bottom: 3.4rem;
  position: relative;
}
@media screen and (max-width: 767px) {
  .top-mv {
    --slideImageWidth: 100vw;
  }
}
@media screen and (min-width: 768px) {
  .top-mv {
    --slideImageWidth: 48rem;
    margin-bottom: 5rem;
  }
}
.top-mv .top-mv__inner {
  opacity: 0;
  transition: opacity var(--transition-default);
}
.top-mv .top-mv__inner.slick-initialized {
  opacity: 1;
}
.top-mv .top-mv__slide {
  width: var(--slideWidth);
}
@media screen and (min-width: 768px) {
  .top-mv .top-mv__slide {
    margin: 0 1rem;
    overflow: hidden;
  }
}
.top-mv .top-mv__slide a:not([href^="https://"]) {
  pointer-events: none;
  display: block;
}
.top-mv .slick-dotted.slick-slider {
  margin-bottom: 0;
  padding-bottom: 5rem;
}
@media screen and (min-width: 768px) {
  .top-mv .slick-dotted.slick-slider {
    padding-bottom: 8.2rem;
  }
}
.top-mv .top-mv__slide-image img {
  width: 100%;
  height: auto;
  display: block;
}
.top-mv .slick-arrow {
  z-index: calc(var(--zindex-front) + 1);
  top: auto;
  bottom: 0;
  margin: auto;
  width: 3.2rem;
  height: 3.5rem;
  aspect-ratio: 1;
  background-color: var(--color-primary);
  background-image: var(--link-arrow);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 0.7rem;
  border-radius: 0 5rem 5rem 0;
  transition: background-color var(--transition-default);
}
@media screen and (min-width: 768px) {
  .top-mv .slick-arrow {
    width: 5.2rem;
    height: 5.8rem;
    aspect-ratio: 1;
    background-size: 0.8rem;
    border-radius: 0 5rem 5rem 0;
  }
}
.top-mv .slick-arrow:hover {
  background-color: #5797DB;
}
.top-mv .slick-arrow::before {
  content: none;
}
.top-mv .slick-arrow img {
  width: 100%;
  height: auto;
  display: block;
}
.top-mv .slick-prev {
  transform: scaleX(-1) translate(50%, 0);
  z-index: 1;
  left: 4rem;
}
@media screen and (min-width: 768px) {
  .top-mv .slick-prev {
    transform: scaleX(-1) translate(0, 0);
    left: -30rem;
    margin-left: 50%;
  }
}
.top-mv .slick-next {
  transform: translate(50%, 0);
  z-index: 1;
  right: 4rem;
}
@media screen and (min-width: 768px) {
  .top-mv .slick-next {
    transform: translate(0, 0);
    right: -30rem;
    margin-right: 50%;
  }
}
.top-mv .slick-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 65%;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 1.5rem;
  gap: 0.5rem 2.2rem;
  translate: 0 calc(50% - 0.2rem);
}
@media screen and (min-width: 768px) {
  .top-mv .slick-dots {
    bottom: 2.2rem;
    gap: 0.5rem 2.6rem;
    width: 36%;
    translate: 0 calc(50% - 1rem);
  }
}
.top-mv .slick-dots li {
  overflow: hidden;
  position: static;
  display: block;
  height: unset;
  margin: 0;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 10rem;
}
.top-mv .slick-dots li button {
  width: 100%;
  height: 100%;
  padding: 0;
  background-color: var(--color-primary);
  opacity: 0.3;
  transition: background-color var(--transition-default);
}
.top-mv .slick-dots li button::before {
  content: none;
}
.top-mv .slick-dots li.slick-active button {
  background-color: var(--color-primary);
  opacity: 1;
}

.grid-contents {
  display: grid;
  justify-content: space-between;
  padding-bottom: 1rem;
}
@media screen and (max-width: 767px) {
  .grid-contents[data-grid-sp="3"] {
    width: max-content;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1.5rem;
  }
  .grid-contents[data-grid-sp="2"] {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 3.4rem 1.3rem;
  }
}
@media screen and (min-width: 768px) {
  .grid-contents[data-grid-pc="2"] {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 3rem;
  }
  .grid-contents[data-grid-pc="3"] {
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 3rem;
  }
  .grid-contents[data-grid-pc="4"] {
    grid-template-columns: repeat(4, 1fr);
    grid-gap: min(2.8125vw, 3.6rem);
  }
  .grid-contents[data-grid-pc="5"] {
    grid-template-columns: repeat(5, 1fr);
  }
}
.grid-contents.product__container {
  padding-bottom: 3rem;
}
@media screen and (min-width: 768px) {
  .grid-contents.product__container {
    padding-bottom: 4.4rem;
  }
}
.grid-contents__item {
  background-color: var(--color-white);
  border-radius: 1.5rem;
  box-shadow: 0px 0px 1.8rem 0px rgba(29, 24, 26, 0.1);
  border-radius: 1.5rem;
}
@media screen and (min-width: 768px) {
  .grid-contents__item {
    border-radius: 1.5rem;
  }
}
.grid-contents__item--image {
  margin: 0;
  padding: 0;
}
.grid-contents__item--image img {
  object-fit: cover;
}
.grid-contents__item--text {
  border-radius: 0 0 1.5rem 1.5rem;
  padding: 1.5rem 2rem;
  display: grid;
  grid-gap: 1.5rem;
}
@media screen and (min-width: 768px) {
  .grid-contents__item--text {
    border-radius: 0 0 1.5rem 1.5rem;
  }
}
.grid-contents__item--lead {
  letter-spacing: 0.15em;
  display: block;
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.5;
  font-size: 1.5rem;
}
@media screen and (min-width: 768px) {
  .grid-contents__item--lead {
    font-size: 1.8rem;
  }
}

.c-product__item {
  position: relative;
  padding-bottom: 4.6rem;
  width: 100%;
  display: block;
  text-decoration: none;
  height: 100%;
  overflow: hidden;
  color: var(--color-text-default);
}
@media screen and (min-width: 768px) {
  .c-product__item {
    padding: 2.4rem 2.4rem 6.2rem;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
  }
}
.c-product__item a {
  color: var(--color-text-default);
}
.c-product__item .c-product-item__image {
  position: relative;
}
.c-product__item .c-product-item__image img {
  width: 100%;
  aspect-ratio: 1;
}
.c-product__item .soldout {
  display: block;
  padding-block: 0.4rem;
  font-size: 1.2rem;
  letter-spacing: 0.025em;
  line-height: 1;
  width: 100%;
  height: 1.9rem;
  background-color: var(--color-gray-400);
  color: var(--color-white);
  text-align: center;
}
.c-product__item .c-button__top--detail {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 0;
  min-width: auto;
}
@media screen and (min-width: 768px) {
  .c-product__item .c-button__top--detail {
    bottom: 2.5rem;
    width: calc(100% - 4.8rem);
    min-width: calc(100% - 4.8rem);
  }
}

.c-product-item__details {
  display: grid;
  row-gap: 1rem;
  padding: 1.5rem 0 1.8rem;
}
@media screen and (min-width: 768px) {
  .c-product-item__details {
    padding: 1.5rem 0;
  }
}
.c-product-item__details--product-name {
  color: var(--color-text-default);
  font-family: var(--font-main);
  font-weight: var(--fw-bold);
  letter-spacing: 0.025em;
  font-size: 1.4rem;
  line-height: 1.3;
}
@media screen and (min-width: 768px) {
  .c-product-item__details--product-name {
    font-size: 1.8rem;
  }
}
.c-product-item__details--product-catch {
  color: var(--color-gray-400);
  font-family: var(--font-main);
  font-weight: var(--fw-regular);
  letter-spacing: 0.025em;
  font-size: 1.3rem;
  line-height: 1.25;
}
@media screen and (min-width: 768px) {
  .c-product-item__details--product-catch {
    font-size: 1.6rem;
    line-height: 1.4;
  }
}
.c-product-item__details--price-discount {
  font-size: 1.9rem;
}
@media screen and (min-width: 768px) {
  .c-product-item__details--price-discount {
    font-size: 2.3rem;
  }
}
.c-product-item__details--price-subscription-firsttime {
  font-size: 1.9rem;
}
@media screen and (min-width: 768px) {
  .c-product-item__details--price-subscription-firsttime {
    font-size: 2.3rem;
  }
}

.c-product-item__details--price {
  display: grid;
  grid-gap: 1rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.08em;
  font-family: var(--font-main);
  color: var(--color-text-default);
  font-size: 1.8rem;
}
@media screen and (min-width: 768px) {
  .c-product-item__details--price {
    font-size: 2rem;
    line-height: 1.5;
  }
}
.c-product-item__details--price-discount {
  color: var(--color-emphasis);
}
.c-product-item__details--price-discount + .tax {
  color: var(--color-emphasis);
}
.c-product-item__details--price .label {
  position: relative;
  top: -0.2rem;
  display: inline-block;
  width: 5.2rem;
  font-size: 1.2rem;
  letter-spacing: 0.03em;
  font-family: var(--font-ja);
  font-weight: var(--fw-bold);
}
@media screen and (min-width: 768px) {
  .c-product-item__details--price .label {
    width: 7.6rem;
    font-size: 1.4rem;
  }
}
.c-product-item__details--price .label.emphasis {
  color: var(--color-emphasis);
}
.c-product-item__details--price .price-wrap .tax {
  font-size: 1.1rem;
  letter-spacing: 0.025em;
  font-weight: var(--fw-regular);
}
@media screen and (min-width: 768px) {
  .c-product-item__details--price .price-wrap .tax {
    font-size: 1.3rem;
  }
}
.c-product-item__details--price .discount-price-wrap {
  color: var(--color-emphasis);
}
@media screen and (max-width: 767px) {
  .c-product-item__details--price .discount-price-wrap {
    display: inline;
  }
}
.c-product-item__details--price .subscription-firsttime-price-wrap {
  color: var(--color-emphasis);
}

.product__price {
  font-size: 1.8rem;
  font-family: var(--font-en);
  display: grid;
  grid-template-columns: 5.7rem 1fr;
  align-items: baseline;
  font-weight: var(--fw-bold);
  letter-spacing: 0.025em;
}
@media screen and (min-width: 768px) {
  .product__price {
    grid-template-columns: 7.6rem 1fr;
    font-size: 2.1rem;
  }
}
.product__price:not(:last-of-type) {
  position: relative;
  padding-bottom: 1rem;
}
@media screen and (min-width: 768px) {
  .product__price:not(:last-of-type) {
    padding-bottom: 1.1rem;
  }
}
.product__price:not(:last-of-type)::after {
  content: "";
  background: radial-gradient(circle farthest-side, var(--color-border), var(--color-border) 50%, transparent 50%, transparent);
  background-size: 0.4rem 0.2rem;
  display: block;
  height: 0.2rem;
  width: 100%;
  grid-column: 1/3;
  position: absolute;
  bottom: 0;
}
.product__price--discountrate {
  border: 1px solid var(--color-emphasis);
  background-color: var(--color-white);
  color: var(--color-emphasis);
  padding: 0.2rem 0.5rem;
  font-size: 1.2rem;
  border-radius: 0;
  letter-spacing: 0.05em;
  display: inline-block;
  line-height: 1;
}
@media screen and (min-width: 768px) {
  .product__price--discountrate {
    position: relative;
    top: -0.3rem;
    padding: 0.3rem 0.6rem;
    font-size: 1.4rem;
  }
}
.product__price--subscription [visible=False] {
  display: none;
}

[data-section-name=new] .top__section--inner {
  padding-bottom: 5.8rem;
}
@media screen and (min-width: 768px) {
  [data-section-name=new] .top__section--inner {
    padding-bottom: 8.6rem;
  }
}

[data-section-name=sale] .top__section--inner {
  padding-bottom: 5.8rem;
}
@media screen and (min-width: 768px) {
  [data-section-name=sale] .top__section--inner {
    padding-bottom: 8.6rem;
  }
}

[data-section-name=wagon] .top__section--inner {
  padding-bottom: 5.8rem;
}
@media screen and (min-width: 768px) {
  [data-section-name=wagon] .top__section--inner {
    padding-bottom: 8.6rem;
  }
}

[data-section-name=vitamin] .top__section--inner {
  padding-bottom: 5.8rem;
}
@media screen and (min-width: 768px) {
  [data-section-name=vitamin] .top__section--inner {
    padding-bottom: 8.6rem;
  }
}

[data-section-name=newinfo] {
  --slideWidth: var(--slideImageWidth);
  margin-bottom: 3.4rem;
  position: relative;
  margin-bottom: 5.8em;
}
@media screen and (max-width: 767px) {
  [data-section-name=newinfo] {
    border-radius: 2.4rem;
    background-color: var(--color-bg);
    --slideImageWidth: 60vw;
  }
}
@media screen and (min-width: 768px) {
  [data-section-name=newinfo] {
    --slideImageWidth: min(19.8vw, 26rem);
    margin-bottom: 8.6rem;
  }
}
[data-section-name=newinfo] .top__section--inner {
  padding: 3.6rem 2rem 5.8rem;
}
@media screen and (min-width: 768px) {
  [data-section-name=newinfo] .top__section--inner {
    padding: 5rem 8rem 5.5rem;
    background-color: var(--color-bg);
    width: min(100%, 128rem);
  }
}
[data-section-name=newinfo] .top-newinfo .top-newinfo__inner {
  opacity: 0;
  transition: opacity var(--transition-default);
}
[data-section-name=newinfo] .top-newinfo .top-newinfo__inner.slick-initialized {
  opacity: 1;
}
[data-section-name=newinfo] .top-newinfo .top-newinfo__slide {
  width: var(--slideWidth);
  margin: 0 1rem;
}
@media screen and (min-width: 768px) {
  [data-section-name=newinfo] .top-newinfo .top-newinfo__slide {
    margin: 0 min(1.015625vw, 1.3rem);
    overflow: hidden;
  }
}
[data-section-name=newinfo] .top-newinfo .top-newinfo__slide a:not([href^="https://"]) {
  pointer-events: none;
  display: block;
}
[data-section-name=newinfo] .top-newinfo .slick-dotted.slick-slider {
  margin-bottom: 0;
  padding-bottom: 5rem;
}
@media screen and (min-width: 768px) {
  [data-section-name=newinfo] .top-newinfo .slick-dotted.slick-slider {
    padding-bottom: 4.2rem;
    width: min(100%, 111.8rem);
    margin: 0 auto;
  }
}
[data-section-name=newinfo] .top-newinfo .top-newinfo__slide-image img {
  width: 100%;
  height: auto;
  display: block;
}
[data-section-name=newinfo] .top-newinfo .slick-arrow {
  z-index: calc(var(--zindex-front) + 1);
  top: 0;
  bottom: 0;
  margin: auto;
  width: 3.6rem;
  height: 3.6rem;
  aspect-ratio: 1;
  background-color: var(--color-white);
  border: 1px solid var(--color-primary);
  background-image: var(--arrow-blue-slide);
  background-position: center left 54%;
  background-repeat: no-repeat;
  background-size: 0.7rem;
  border-radius: 10rem;
  transition: background-color var(--transition-default);
}
@media screen and (min-width: 768px) {
  [data-section-name=newinfo] .top-newinfo .slick-arrow {
    width: 5rem;
    height: 5rem;
    aspect-ratio: 1;
    background-size: 0.8rem;
  }
}
[data-section-name=newinfo] .top-newinfo .slick-arrow:hover {
  background-color: #5797DB;
}
[data-section-name=newinfo] .top-newinfo .slick-arrow::before {
  content: none;
}
[data-section-name=newinfo] .top-newinfo .slick-arrow img {
  width: 100%;
  height: auto;
  display: block;
}
[data-section-name=newinfo] .top-newinfo .slick-prev {
  transform: scaleX(-1) translate(0, -2rem);
  z-index: 1;
  left: -1rem;
}
@media screen and (min-width: 768px) {
  [data-section-name=newinfo] .top-newinfo .slick-prev {
    transform: scaleX(-1) translate(0, -2.5rem);
    left: -6.2rem;
  }
}
[data-section-name=newinfo] .top-newinfo .slick-next {
  transform: translate(0, -2rem);
  z-index: 1;
  right: -1rem;
}
@media screen and (min-width: 768px) {
  [data-section-name=newinfo] .top-newinfo .slick-next {
    transform: translate(0, -2.5rem);
    right: -6.2rem;
  }
}
[data-section-name=newinfo] .top-newinfo .slick-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 1.5rem;
  gap: 2.2rem;
}
@media screen and (min-width: 768px) {
  [data-section-name=newinfo] .top-newinfo .slick-dots {
    bottom: 0;
    gap: 2.9rem;
  }
}
[data-section-name=newinfo] .top-newinfo .slick-dots li {
  overflow: hidden;
  position: static;
  display: block;
  height: unset;
  margin: 0;
  width: 1rem;
  height: 1rem;
  border-radius: 10rem;
}
[data-section-name=newinfo] .top-newinfo .slick-dots li button {
  width: 100%;
  height: 100%;
  padding: 0;
  background-color: var(--color-primary);
  opacity: 0.3;
  transition: background-color var(--transition-default);
}
[data-section-name=newinfo] .top-newinfo .slick-dots li button::before {
  content: none;
}
[data-section-name=newinfo] .top-newinfo .slick-dots li.slick-active button {
  background-color: var(--color-primary);
  opacity: 1;
}

[data-section-name=ranking] {
  margin-bottom: 5.8em;
}
@media screen and (max-width: 767px) {
  [data-section-name=ranking] {
    border-radius: 2.4rem;
    background-color: var(--color-bg-1);
  }
}
@media screen and (min-width: 768px) {
  [data-section-name=ranking] {
    margin-bottom: 10.5em;
  }
}
[data-section-name=ranking] .top__section--inner {
  padding: 3.6rem 2rem 5.8rem;
}
@media screen and (min-width: 768px) {
  [data-section-name=ranking] .top__section--inner {
    padding: 6.6rem 5.5rem 8.6rem;
    background-color: var(--color-bg-1);
    width: min(100%, 128rem);
  }
}
[data-section-name=ranking] .top__section--inner .p-itemlist__tab-contents .c-tab .tab__menu {
  margin-bottom: 1.5rem;
}
@media screen and (min-width: 768px) {
  [data-section-name=ranking] .top__section--inner .p-itemlist__tab-contents .c-tab .tab__menu {
    margin-bottom: 1.7rem;
  }
}
[data-section-name=ranking] .top__section--inner .p-itemlist__tab-contents .c-tab .tab__menu__inner {
  display: grid;
  grid-template-columns: repeat(2, calc((100% - 0.7rem) / 2));
  grid-gap: 0.7rem;
}
@media screen and (min-width: 768px) {
  [data-section-name=ranking] .top__section--inner .p-itemlist__tab-contents .c-tab .tab__menu__inner {
    grid-template-columns: repeat(4, calc((100% - 3rem) / 4));
    grid-gap: 1rem;
    position: relative;
  }
}
@media screen and (min-width: 768px) {
  [data-section-name=ranking] .top__section--inner .p-itemlist__tab-contents .c-tab .tab__menu__inner::before {
    content: "";
    position: absolute;
    bottom: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 2px;
    background-color: #F8E5BE;
  }
}
[data-section-name=ranking] .top__section--inner .p-itemlist__tab-contents .c-tab__item {
  position: relative;
  z-index: 1;
  border-radius: 0.4rem;
  overflow: hidden;
  text-align: center;
}
@media screen and (min-width: 768px) {
  [data-section-name=ranking] .top__section--inner .p-itemlist__tab-contents .c-tab__item {
    border-radius: 0.8rem 0.8rem 0 0;
  }
}
[data-section-name=ranking] .top__section--inner .p-itemlist__tab-contents .c-tab__item--button {
  width: 100%;
  height: 4.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F8E5BE;
  line-height: 1.1;
  font-weight: var(--fw-bold);
  color: #848C93;
  letter-spacing: 0.055em;
  font-size: 1.5rem;
}
@media screen and (min-width: 768px) {
  [data-section-name=ranking] .top__section--inner .p-itemlist__tab-contents .c-tab__item--button {
    height: 5.3rem;
    font-size: 1.7rem;
  }
}
[data-section-name=ranking] .top__section--inner .p-itemlist__tab-contents .c-tab__item[data-state=active] .c-tab__item--button {
  background-color: var(--color-primary);
  color: var(--color-white);
}
[data-section-name=ranking] .top__section--inner .p-itemlist__intro {
  display: grid;
  grid-gap: 1.9rem;
}
@media screen and (min-width: 768px) {
  [data-section-name=ranking] .top__section--inner .p-itemlist__intro {
    align-items: center;
    grid-template-columns: 55.5rem auto;
    grid-gap: 0;
  }
}
@media screen and (min-width: 768px) {
  [data-section-name=ranking] .top__section--inner .p-itemlist__intro--text {
    padding: 0.3rem 6.7rem 0;
  }
}
[data-section-name=ranking] .top__section--inner .p-itemlist__intro--text .p-itemlist-title {
  display: grid;
  grid-gap: 0.3rem;
  margin-bottom: 1.5rem;
  line-height: 1;
}
@media screen and (min-width: 768px) {
  [data-section-name=ranking] .top__section--inner .p-itemlist__intro--text .p-itemlist-title {
    text-align: center;
    grid-gap: 1rem;
  }
}
[data-section-name=ranking] .top__section--inner .p-itemlist__intro--text .p-itemlist-title .p-itemlist-title__text--ja {
  font-size: 2.4rem;
  letter-spacing: 0.055em;
  font-weight: var(--fw-bold);
}
@media screen and (min-width: 768px) {
  [data-section-name=ranking] .top__section--inner .p-itemlist__intro--text .p-itemlist-title .p-itemlist-title__text--ja {
    font-size: 3rem;
  }
}
[data-section-name=ranking] .top__section--inner .p-itemlist__intro--text .p-itemlist-title .p-itemlist-title__text--en {
  font-size: 1.2rem;
  letter-spacing: 0.055em;
  font-weight: var(--fw-medium);
  color: var(--color-gray-400);
}
@media screen and (min-width: 768px) {
  [data-section-name=ranking] .top__section--inner .p-itemlist__intro--text .p-itemlist-title .p-itemlist-title__text--en {
    font-size: 1.4rem;
  }
}
[data-section-name=ranking] .top__section--inner .p-itemlist__intro--description {
  font-size: 1.4rem;
  letter-spacing: 0.055em;
  line-height: 1.5;
  font-weight: var(--fw-regular);
  margin-bottom: 2rem;
}
@media screen and (min-width: 768px) {
  [data-section-name=ranking] .top__section--inner .p-itemlist__intro--description {
    font-size: 1.4rem;
  }
}
[data-section-name=ranking] .product__container {
  padding-bottom: 0;
  margin-top: 3.7rem;
}
@media screen and (min-width: 768px) {
  [data-section-name=ranking] .product__container {
    margin-top: 4rem;
    padding: 0;
  }
}
[data-section-name=ranking] .product__container .c-product__item {
  overflow: visible;
  padding-bottom: 0;
  border: none;
}
@media screen and (min-width: 768px) {
  [data-section-name=ranking] .product__container .c-product__item {
    padding: 0 1.7rem;
  }
}
[data-section-name=ranking] .product__container .c-product__item .c-product__item--rank {
  position: absolute;
  top: -0.1rem;
  left: 1rem;
  z-index: 1;
  width: 3rem;
  height: 3.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  letter-spacing: 0.025em;
  color: var(--color-white);
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236%22%20height%3D%2239%22%20viewBox%3D%220%200%2036%2039%22%3E%0A%20%20%3Cpath%20id%3D%22%E5%90%88%E4%BD%93_4%22%20data-name%3D%22%E5%90%88%E4%BD%93%204%22%20d%3D%22M14%2C36.858V5H32V44ZM-4%2C5H14V36.858L-4%2C44Z%22%20transform%3D%22translate(4.001%20-5)%22%20fill%3D%22%23a1bad1%22%2F%3E%0A%3C%2Fsvg%3E%0A");
  background-size: contain;
  background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
  [data-section-name=ranking] .product__container .c-product__item .c-product__item--rank {
    top: -0.2rem;
    left: 1rem;
    width: 3.6rem;
    height: 3.9rem;
    font-size: 1.9rem;
  }
}
[data-section-name=ranking] .product__container .c-product__item .c-product__item--rank span {
  position: relative;
  top: -0.3rem;
}
@media screen and (max-width: 767px) {
  [data-section-name=ranking] .product__container .c-product__item:first-of-type {
    grid-column: 1/3;
    width: 66.666vw;
    margin: auto;
  }
}
[data-section-name=ranking] .product__container .c-product__item:first-of-type .c-product__item--rank {
  width: 3.6rem;
  height: 3.9rem;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236%22%20height%3D%2239%22%20viewBox%3D%220%200%2036%2039%22%3E%0A%20%20%3Cpath%20id%3D%22%E5%90%88%E4%BD%93_4%22%20data-name%3D%22%E5%90%88%E4%BD%93%204%22%20d%3D%22M14%2C36.858V5H32V44ZM-4%2C5H14V36.858L-4%2C44Z%22%20transform%3D%22translate(4.001%20-5)%22%20fill%3D%22%23e5bd49%22%2F%3E%0A%3C%2Fsvg%3E%0A");
}
@media screen and (max-width: 767px) {
  [data-section-name=ranking] .product__container .c-product__item:first-of-type .c-product__item--rank {
    font-size: 2rem;
    left: 2rem;
  }
}
[data-section-name=ranking] .product__container .c-product__item:nth-of-type(2) .c-product__item--rank {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236%22%20height%3D%2239%22%20viewBox%3D%220%200%2036%2039%22%3E%0A%20%20%3Cpath%20id%3D%22%E5%90%88%E4%BD%93_4%22%20data-name%3D%22%E5%90%88%E4%BD%93%204%22%20d%3D%22M14%2C36.858V5H32V44ZM-4%2C5H14V36.858L-4%2C44Z%22%20transform%3D%22translate(4.001%20-5)%22%20fill%3D%22%23c3c2bf%22%2F%3E%0A%3C%2Fsvg%3E%0A");
}
[data-section-name=ranking] .product__container .c-product__item:nth-of-type(3) .c-product__item--rank {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236%22%20height%3D%2239%22%20viewBox%3D%220%200%2036%2039%22%3E%0A%20%20%3Cpath%20id%3D%22%E5%90%88%E4%BD%93_4%22%20data-name%3D%22%E5%90%88%E4%BD%93%204%22%20d%3D%22M14%2C36.858V5H32V44ZM-4%2C5H14V36.858L-4%2C44Z%22%20transform%3D%22translate(4.001%20-5)%22%20fill%3D%22%23b78663%22%2F%3E%0A%3C%2Fsvg%3E%0A");
}
@media screen and (min-width: 768px) {
  [data-section-name=ranking] .product__container .c-product-item__details--product-name {
    font-size: 1.6rem;
  }
}
@media screen and (min-width: 768px) {
  [data-section-name=ranking] .product__container .c-product-item__details--price .price-wrap {
    font-size: 2rem;
  }
}
@media screen and (min-width: 768px) {
  [data-section-name=ranking] .product__container .c-product-item__details--price .price-wrap .tax {
    font-size: 1.2rem;
  }
}

[data-section-name=service] {
  border-top: 2px solid var(--color-border);
  background-color: var(--color-bg-2);
}
[data-section-name=service] .top__section--inner {
  padding: 5rem 2rem 7rem;
}
@media screen and (min-width: 768px) {
  [data-section-name=service] .top__section--inner {
    padding: 8rem var(--padding-horizontal-global) 7rem;
    width: min(100%, 117rem + var(--padding-horizontal-global) * 2);
  }
}
[data-section-name=service] .p-top-title__service {
  margin-bottom: 3rem;
  font-size: 2.3rem;
  letter-spacing: 0.055em;
  color: var(--color-primary);
  text-align: center;
}
@media screen and (min-width: 768px) {
  [data-section-name=service] .p-top-title__service {
    margin-bottom: 5rem;
    font-size: 3.1rem;
  }
}
[data-section-name=service] .p-servicelist {
  background-color: var(--color-white);
  border-radius: 1rem;
  box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.1);
}
[data-section-name=service] .p-servicelist:not(:last-of-type) {
  margin-bottom: 3rem;
}
@media screen and (min-width: 768px) {
  [data-section-name=service] .p-servicelist:not(:last-of-type) {
    margin-bottom: 4.2rem;
  }
}
[data-section-name=service] .p-servicelist__wrapper {
  display: grid;
  grid-gap: 2rem;
  padding: 3.5rem 0;
  margin: 0 auto;
  width: 30rem;
}
@media screen and (min-width: 768px) {
  [data-section-name=service] .p-servicelist__wrapper {
    padding: 3.5rem 0;
    grid-template-columns: 36rem 1fr;
    align-items: center;
    grid-gap: 6rem;
    width: 100%;
  }
}
@media screen and (min-width: 768px) {
  [data-section-name=service] .p-servicelist__title {
    padding-left: 6rem;
  }
}
[data-section-name=service] .p-servicelist__title--text {
  text-align: center;
  font-weight: var(--fw-bold);
  font-size: 1.9rem;
  letter-spacing: 0.055em;
  line-height: 1.5789473684;
}
@media screen and (min-width: 768px) {
  [data-section-name=service] .p-servicelist__title--text {
    display: grid;
    grid-gap: 3rem;
    font-size: 2.4rem;
    line-height: 1.5;
  }
}
[data-section-name=service] .p-servicelist__description--list {
  display: grid;
  grid-gap: 1rem;
  padding-bottom: 0;
  justify-content: center;
}
@media screen and (min-width: 768px) {
  [data-section-name=service] .p-servicelist__description--list {
    grid-template-columns: repeat(3, 21rem);
    justify-content: center;
    grid-gap: 2rem;
  }
}
[data-section-name=service] .p-servicelist__description--list-item {
  display: grid;
  grid-template-columns: 9rem auto;
  align-items: center;
  grid-gap: 0.8rem;
}
@media screen and (min-width: 768px) {
  [data-section-name=service] .p-servicelist__description--list-item {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 11.8rem auto;
    justify-items: center;
    align-items: start;
    text-align: center;
  }
}
@media screen and (min-width: 768px) {
  [data-section-name=service] .p-servicelist__description--list[data-grid-sp="2"] {
    grid-template-columns: repeat(2, 21rem);
    grid-gap: 11rem;
  }
}
[data-section-name=service] .p-servicelist__description--list[data-grid-sp="2"] .p-servicelist__description--list-item {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 8.2rem auto;
  justify-items: center;
  align-items: start;
  text-align: center;
}
@media screen and (min-width: 768px) {
  [data-section-name=service] .p-servicelist__description--list[data-grid-sp="2"] .p-servicelist__description--list-item {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 11.8rem auto;
    justify-items: center;
    align-items: start;
    text-align: center;
  }
}
[data-section-name=service] .p-servicelist__description--icon {
  width: 9rem;
}
@media screen and (min-width: 768px) {
  [data-section-name=service] .p-servicelist__description--icon {
    width: 13rem;
  }
}
[data-section-name=service] .p-servicelist__description--text {
  font-size: 1.4rem;
  font-weight: var(--fw-medium);
}
@media screen and (min-width: 768px) {
  [data-section-name=service] .p-servicelist__description--text {
    font-size: 1.7rem;
  }
}
[data-section-name=service] .p-servicelist__description--text .emphasis {
  color: var(--color-primary);
  font-weight: var(--fw-bold);
}
[data-section-name=service] .p-servicelist__description--text .annotation {
  font-size: 1.2rem;
  color: var(--color-gray-400);
}
@media screen and (min-width: 768px) {
  [data-section-name=service] .p-servicelist__description--text .annotation {
    font-size: 1.3rem;
  }
}
[data-section-name=service] .p-servicelist__description--tool {
  font-size: 1.3rem;
  font-weight: var(--fw-bold);
}
@media screen and (min-width: 768px) {
  [data-section-name=service] .p-servicelist__description--tool {
    font-size: 1.8rem;
  }
}
[data-section-name=service] .p-servicelist__description--tool a {
  color: var(--color-text-default);
  text-decoration: underline;
}
@media screen and (min-width: 768px) {
  [data-section-name=service] .p-servicelist__description--tool a {
    text-decoration: none;
    pointer-events: none;
  }
}
@media screen and (max-width: 767px) {
  [data-section-name=service] .p-servicelist__sns .p-servicelist__description--list-item {
    grid-template-columns: auto;
    justify-items: center;
  }
}
[data-section-name=service] .p-servicelist .c-button__text {
  margin-top: 1.6rem;
}
[data-section-name=service] .p-servicelist .c-button__text .c-button__top--detail {
  min-width: auto;
  width: 18rem;
  height: 3.7rem;
}

[data-section-name=banner] {
  background-color: var(--color-bg-2);
}
[data-section-name=banner] .top__section--inner {
  padding: 0 3rem;
}
@media screen and (min-width: 768px) {
  [data-section-name=banner] .top__section--inner {
    padding: 0 8rem;
    width: min(100%, 128rem);
  }
}
@media screen and (min-width: 768px) {
  [data-section-name=banner] .top__section--inner .section__container {
    padding: 0;
  }
}
[data-section-name=banner] .p-top__banner--rectangle .p-top__banner--list {
  display: grid;
  grid-gap: 2rem;
  grid-template-columns: 77vw;
  justify-content: center;
  align-items: center;
}
@media screen and (min-width: 768px) {
  [data-section-name=banner] .p-top__banner--rectangle .p-top__banner--list {
    grid-gap: 3rem;
    grid-template-columns: repeat(2, min(32.96875vw, 42.2rem));
  }
}
[data-section-name=banner] .p-top__banner--square {
  margin-top: 4.8rem;
  padding-bottom: 7rem;
}
@media screen and (min-width: 768px) {
  [data-section-name=banner] .p-top__banner--square {
    padding-bottom: 12rem;
    margin-top: 7.7rem;
  }
}
[data-section-name=banner] .p-top__banner--square-inner {
  padding-top: 3.2rem;
  padding-bottom: 3.2rem;
  background-color: var(--color-white);
}
@media screen and (min-width: 768px) {
  [data-section-name=banner] .p-top__banner--square-inner {
    margin: 0 2rem;
    padding: 3.3rem 11.3rem 3.6rem;
  }
}
[data-section-name=banner] .p-top__banner--square-title {
  font-size: 1.9rem;
  line-height: 1.5;
  text-align: center;
  width: fit-content;
  margin: 0 auto 3rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.055em;
}
@media screen and (min-width: 768px) {
  [data-section-name=banner] .p-top__banner--square-title {
    font-size: 2.4rem;
  }
}
[data-section-name=banner] .p-top__banner-slider {
  padding-bottom: 4rem;
}
[data-section-name=banner] .p-top__banner-slider-container {
  position: relative;
}
[data-section-name=banner] .m-product-slider__arrow {
  top: -2rem;
  bottom: 0;
  margin: auto;
  width: 3.6rem;
  height: 3.6rem;
  aspect-ratio: 1;
  background-color: var(--color-white);
  border: 1px solid var(--color-primary);
  background-image: var(--arrow-blue-slide);
  background-position: center left 54%;
  background-repeat: no-repeat;
  background-size: 0.7rem;
  border-radius: 10rem;
  transition: background-color var(--transition-default);
  position: absolute;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  [data-section-name=banner] .m-product-slider__arrow {
    width: 5rem;
    height: 5rem;
    aspect-ratio: 1;
    background-size: 0.8rem;
  }
}
[data-section-name=banner] .m-product-slider__arrow[data-arrow-direction=prev] {
  transform: scale(-1);
  left: -1.8rem;
}
@media screen and (min-width: 768px) {
  [data-section-name=banner] .m-product-slider__arrow[data-arrow-direction=prev] {
    left: -7.6rem;
  }
}
[data-section-name=banner] .m-product-slider__arrow[data-arrow-direction=next] {
  right: -1.8rem;
}
@media screen and (min-width: 768px) {
  [data-section-name=banner] .m-product-slider__arrow[data-arrow-direction=next] {
    right: -7.6rem;
  }
}
[data-section-name=banner] .m-product-slider__arrow:hover {
  background-color: #5797DB;
}
@media screen and (min-width: 768px) {
  [data-section-name=banner] .swiper-pagination {
    bottom: 0;
  }
}
[data-section-name=banner] .swiper-pagination .swiper-pagination-bullet {
  width: 1rem;
  height: 1rem;
  margin: 0 1.1rem;
  background-color: var(--color-primary);
  opacity: 0.3;
}
@media screen and (min-width: 768px) {
  [data-section-name=banner] .swiper-pagination .swiper-pagination-bullet {
    margin: 0 1.45rem;
  }
}
[data-section-name=banner] .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--color-primary);
  opacity: 1;
}

/* ===============================================
     * Utility *
   =============================================== */
.u-grid-container {
  display: grid;
  column-gap: var(--gap-column, 0);
  row-gap: var(--gap-row, 0);
}

.u-grid-column-1 {
  grid-template-columns: repeat(1, 1fr);
}

.u-grid-column-2 {
  grid-template-columns: repeat(2, 1fr);
}

.u-grid-column-3 {
  grid-template-columns: repeat(3, 1fr);
}

.u-grid-column-4 {
  grid-template-columns: repeat(4, 1fr);
}

.u-grid-column-5 {
  grid-template-columns: repeat(5, 1fr);
}

.u-grid-column-6 {
  grid-template-columns: repeat(6, 1fr);
}

.u-grid-column-7 {
  grid-template-columns: repeat(7, 1fr);
}

.u-grid-column-8 {
  grid-template-columns: repeat(8, 1fr);
}

@media screen and (min-width: 768px) {
  .md\:u-grid-column-1 {
    grid-template-columns: repeat(1, 1fr);
  }
  .md\:u-grid-column-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .md\:u-grid-column-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .md\:u-grid-column-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .md\:u-grid-column-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  .md\:u-grid-column-6 {
    grid-template-columns: repeat(6, 1fr);
  }
  .md\:u-grid-column-7 {
    grid-template-columns: repeat(7, 1fr);
  }
  .md\:u-grid-column-8 {
    grid-template-columns: repeat(8, 1fr);
  }
}
.u-text-clamp {
  --clamp-line: 1;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--clamp-line);
}

.u-text-clamp[data-clamp-line="2"] {
  --clamp-line: 2;
}

.u-text-clamp[data-clamp-line="3"] {
  --clamp-line: 3;
}

.u-text-clamp[data-clamp-line="4"] {
  --clamp-line: 4;
}

@media screen and (min-width: 768px) {
  .u-text-clamp[data-md\:clamp-line="2"] {
    --clamp-line: 2;
  }
  .u-text-clamp[data-md\:clamp-line="3"] {
    --clamp-line: 3;
  }
  .u-text-clamp[data-md\:clamp-line="4"] {
    --clamp-line: 4;
  }
}

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