@charset "UTF-8";


/* ===============================================
  * 共通 *
=============================================== */

.global-contents__inner {
  width: 100%;
  padding: 0;
}


/* Section */

.global-contents__inner > section:not(:last-of-type) {
  border-bottom: solid 3px var(--color-white);
}

.l-top__section {
  padding-block: 6rem;
  background-color: var(--color-project-bg);
}

@media (min-width: 768px) {
  .l-top__section {
    padding-block: 8rem;
  }
}

.l-top__section-inner {
  display: grid;
  row-gap: 3rem;
}


/* Swiper */

.l-top__section .swiper {
  display: grid;
  width: 100%;
}

.l-top__section .swiper-wrapper {
  min-width: 0;
}


/* Heading */

.global-content__fluid-wrapper--full:has(.c-heading__text) {
  padding-inline: var(--padding-horizontal-global);
}


/* Common Top Slide */

.js-commonTopSlider {
  --swiper-navigation-size: 5rem;

  opacity: 0;
  transition: opacity var(--transition-default);
}

.js-commonTopSlider:has(.swiper-initialized) {
  opacity: 1;
}

.js-commonTopSlider[data-slider-type="magazine"] {
  --swiper-button-position-desktop: var(--padding-horizontal-global);
}

.js-commonTopSlider .swiper-slide {
  position: relative;
}

.js-commonTopSlider:not([data-slider-type="magazine"]) .swiper-slide::before {
  content: "";

  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;

  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);

  opacity: 0;
  transition: opacity var(--transition-default);

  pointer-events: none;
}

.js-commonTopSlider:not([data-slider-type="magazine"]) .swiper-slide:not(.swiper-slide-active)::before {
  opacity: 1;
}

.js-commonTopSlider [class*="swiper-button"] {
  width: var(--swiper-navigation-size);
}

.js-commonTopSlider [class*="swiper-button"]::after {
  content: none;
}

@media (min-width: 768px) {
  .js-commonTopSlider .swiper-button-prev {
    left: var(--swiper-button-position-desktop, 20%);
  }

  .js-commonTopSlider .swiper-button-next {
    right: var(--swiper-button-position-desktop, 20%);
  }
}

.js-commonTopSlider .swiper-pagination {
  --swiper-pagination-bullet-horizontal-gap: 0;
  --swiper-pagination-bullet-width: 2.8rem;
  --swiper-pagination-bullet-height: 2.175rem;

  position: static;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.8rem;

  margin-top: 2rem;
}

.js-commonTopSlider .swiper-pagination-bullet {
  background-color: transparent;
  border-radius: 0;

  color: var(--color-project-sub);

  opacity: 1 !important;

  scale: .75;
  transition: scale var(--transition-default);
}

.js-commonTopSlider .swiper-pagination-bullet.swiper-pagination-bullet-active {
  color: var(--color-text-default);

  scale: 1;
}




/* ===============================================
  * Section - Hero *
=============================================== */

.l-top__section[data-section-name="hero"] {
  display: grid;
  place-content: center;

  aspect-ratio: 375 / 520;
  padding: 0;
  background-color: rgba(0, 0, 0, .2);
}

@media (min-width: 768px) {
  .l-top__section[data-section-name="hero"] {
    aspect-ratio: 1400 / 680;
  }
}

.l-top__hero-text-container {
  display: grid;
  row-gap: 1rem;

  color: var(--color-white);
  text-align: center;
}

@media (min-width: 768px) {
  .l-top__hero-text-container {
    row-gap: 2rem;
  }
}

.l-top__hero-text-container > b {
  font-size: 2.2rem;
  font-weight: var(--fw-medium);
  letter-spacing: .03em;
  line-height: calc(36 / 22);
}

@media (min-width: 768px) {
  .l-top__hero-text-container > b {
    font-size: 3rem;
  }
}

.l-top__hero-text-container > small {
  font-size: 1rem;
  font-weight: var(--fw-regular);
  letter-spacing: .03em;
  line-height: 2;
}

.l-top__hero-image {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;

  width: 100%;
  height: 100svh;
  margin: auto;

  pointer-events: none;
}

.l-top__hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}




/* ===============================================
  * Section - MV *
=============================================== */

.l-top__section[data-section-name="mv"] {
  padding-top: 4rem;
}

@media (min-width: 768px) {
  .l-top__section[data-section-name="mv"] {
    padding-top: 6rem;
  }
}




/* ===============================================
  * Section - New Items *
=============================================== */

.l-top__new-items-container {
  display: grid;
  row-gap: 4rem;
}

@media (min-width: 768px) {
  .l-top__new-items-container {
    row-gap: 3rem;

    padding-inline: var(--padding-horizontal-global);
  }
}




/* ===============================================
  * Section - Magazine *
=============================================== */

.l-top__magazine-link {
  text-decoration: none;
}

.l-top__magazine-figure {
  display: grid;
  row-gap: 1.4rem;
}

.l-top__magazine-figure figcaption {
  font-size: 1.8rem;
  font-weight: var(--fw-regular);
  letter-spacing: .03em;
  line-height: calc(24 / 18);

  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.l-top__magazine-figure figcaption > * {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}




/* ===============================================
  * Section - Subscription *
=============================================== */

.l-top__subscription-content-wrapper {
  display: grid;

  width: calc(100% - calc(var(--padding-horizontal-global) * 2));
  margin-inline: auto;

  aspect-ratio: 355 / 625;
  background-image: var(--bg-mobile);
  background-repeat: no-repeat;
  background-size: cover;
}

@media (min-width: 768px) {
  .l-top__subscription-content-wrapper {
    position: relative;

    background-image: var(--bg-desktop);
    aspect-ratio: 1320 / 520;
  }
}

.l-top__subscription-text-container {
  align-self: flex-end;

  display: grid;
  row-gap: 2rem;

  padding: 0 2rem 3rem;
  overflow: hidden;

  color: var(--color-white);
}

@media (min-width: 768px) {
  .l-top__subscription-text-container {
    position: absolute;
    top: 0;
    left: calc(720 / 1320 * 100%);
    bottom: 0;

    row-gap: 3rem;

    margin-block: auto;
    padding-block: 9rem;
    padding-inline: 0;
  }
}

.l-top__subscription-text-container .c-heading__text {
  padding-left: 0;
  border-left: none;

  font-size: 2.8rem;
  font-weight: var(--fw-medium);
  word-break: keep-all;
}

.l-top__subscription-text-container .c-heading__text > small {
  font-weight: var(--fw-regular);
}

@media (min-width: 768px) {
  .l-top__subscription-text-container .c-heading__text {
    font-size: 4.6rem;
  }

  .l-top__subscription-text-container .c-heading__text > small {
    font-size: 1.6rem;
  }
}

.l-top__subscription-subheading-container {
  display: grid;
  row-gap: 1rem;
}

@media (min-width: 768px) {
  .l-top__subscription-subheading-container {
    margin-top: 1rem;
  }
}

.l-top__subscription-text--sub-heading {
  font-size: 2rem;
  font-weight: var(--fw-medium);
  letter-spacing: .03em;
  line-height: calc(32 / 20);
}

@media (min-width: 768px) {
  .l-top__subscription-text--sub-heading {
    font-size: 2.6rem;
  }
}

.l-top__subscription-text--paragraph {
  font-size: 1.3rem;
  font-weight: var(--fw-regular);
  letter-spacing: .03em;
  line-height: calc(24 / 13);
}

@media (min-width: 768px) {
  .l-top__subscription-text--paragraph {
    font-size: 1.4rem;
  }
}

.l-top__subscription-button--primary {
  display: grid;
  place-content: center;

  width: 22rem;
  aspect-ratio: 220 / 48;
  background-color: #60BF9A;

  color: var(--color-white);
  font-size: 1.4rem;
  font-weight: var(--fw-semibold);
  letter-spacing: .03em;
  text-decoration: none;

  transition: background-color var(--transition-default);
}

@media (prefers-reduced-motion: reduce) {
  .l-top__subscription-button--primary {
    transition: none;
  }
}

.l-top__subscription-button--primary:hover {
  background-color: var(--color-project-text);
}




/* ===============================================
  * Section - Best Seller *
=============================================== */

[data-section-name="best-seller"] .product__container.js-commonProductSlider .product__item--rank {
  display: grid;
}




/* ===============================================
  * Section - About Us *
=============================================== */

.l-top__about-content-wrapper {
  background-color: var(--color-project-text);
}

@media (min-width: 768px) {
  .l-top__about-content-wrapper {
    display: grid;
    grid-template-columns: calc(760 / 1400 * 100%) 1fr;

    width: calc(100% - calc(var(--padding-horizontal-global) * 2));
    margin-inline: auto;
  }
}

.l-top__about-image-wrapper {
  width: 100%;
  /* aspect-ratio: 375 / 237; */
}

.l-top__about-text-container {
  display: grid;
  row-gap: 3rem;

  padding: 4rem 3rem;

  color: var(--color-white);
}

@media (min-width: 768px) {
  .l-top__about-text-container {
    place-content: center;

    height: 100%;
    padding-inline: calc(80 / 640 * 100%);
  }
}

.l-top__about-text-container .c-heading__text {
  border-color: var(--color-white);
}

.l-top__about-text--paragraph {
  font-size: 1.4rem;
  font-weight: var(--fw-regular);
  letter-spacing: .03em;
  line-height: calc(30 / 14);
}




/* ===============================================
  * Section - Campaign *
=============================================== */

[data-section-name="campaign"] .product__item {
  padding: 0;

  text-decoration: none;
}

[data-section-name="campaign"] .product__item--image {
  padding: 0;
  aspect-ratio: 1;
}

[data-section-name="campaign"] .product__item--name {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}




/* ===============================================
  * Section - Recommended *
=============================================== */

.l-top__recommended-items-container {
  padding-inline: var(--padding-horizontal-global);
}




/* ===============================================
  * Section - Category *
=============================================== */

.global-content__fluid-wrapper--full:has(.l-top__category-list) {
  padding-inline: var(--padding-horizontal-global);
}

.l-top__category-list {
  --border-style: solid 5px var(--color-project-sub);

  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (min-width: 768px) {
  .l-top__category-list {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem 2.7rem;
  }
}

.l-top__category-link {
  display: grid;
  place-content: center;
  row-gap: 1rem;

  height: 16rem;
  background-color: var(--color-white);

  font-size: 2.4rem;
  font-weight: var(--fw-medium);
  letter-spacing: .03em;
  line-height: calc(32 / 24);
  text-align: center;
  text-decoration: none;
}

@media (max-width: 767px) {
  .l-top__category-link {
    border-bottom: var(--border-style);
  }
}

@media (min-width: 768px) {
  .l-top__category-link {
    height: 11rem;
    border-left: var(--border-style);
  }
}

.l-top__category-link > small {
  font-size: 1.4rem;
  line-height: calc(24 / 14);
}




/* ===============================================
  * Section - Search *
=============================================== */

[data-section-name="search"] .global-content__fluid-wrapper--full {
  padding-inline: var(--padding-horizontal-global);
}

.l-top__search-content-wrapper {
  display: grid;
  row-gap: 3rem;

  padding: 4rem 2rem;
  background-color: var(--color-white);
}

@media (min-width: 768px) {
  .l-top__search-content-wrapper {
    grid-template-columns: auto 1fr;
    align-items: flex-start;
    column-gap: calc(140 / 1320 * 100%);

    padding: 6rem;
  }
}

.l-top__search-form-keywords-container {
  display: grid;
  row-gap: 3rem;
}

@media (min-width: 768px) {
  .l-top__search-form-keywords-container {
    row-gap: 4rem;
  }
}

.l-top__search-form-wrapper {
  max-width: 48rem;
}

.l-top__search-form-wrapper input {
  height: 6rem;
  border: solid 1px var(--color-project-text);
  border-radius: 0;

  font-size: 1.6rem;
}

.l-top__search-form-wrapper input:placeholder {
  color: #B4B4B4;
  font-size: 1.4rem;
}

.l-top__search-form-wrapper .global-header__search-button {
  --search-button-width: 3rem;
}

.l-top__search-keywords-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.l-top__search-keywords-link {
  display: grid;
  grid-template-columns: .8rem auto;
  column-gap: .4rem;
  align-items: center;

  padding: .6rem 1rem;
  background-color: #F8F8F8;

  font-size: 1.3rem;
  font-weight: var(--fw-regular);
  letter-spacing: .03em;
  line-height: 1;
  text-decoration: none;
  word-break: keep-all;
}

.l-top__search-keywords-link::before {
  content: "";

  width: 100%;
  aspect-ratio: 1;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%228%22%20height%3D%228%22%20viewBox%3D%220%200%208%208%22%3E%20%3Cpath%20id%3D%22Icon_awesome-hashtag%22%20data-name%3D%22Icon%20awesome-hashtag%22%20d%3D%22M7.869%2C4.931%2C8%2C4.216a.214.214%2C0%2C0%2C0-.211-.252H6.45L6.711%2C2.5A.214.214%2C0%2C0%2C0%2C6.5%2C2.25H5.774a.214.214%2C0%2C0%2C0-.211.177L5.289%2C3.964H3.527L3.789%2C2.5a.214.214%2C0%2C0%2C0-.211-.252H2.852a.214.214%2C0%2C0%2C0-.211.177L2.367%2C3.964H.954a.214.214%2C0%2C0%2C0-.211.177l-.128.714a.214.214%2C0%2C0%2C0%2C.211.252H2.162L1.754%2C7.393H.342a.214.214%2C0%2C0%2C0-.211.177L0%2C8.284a.214.214%2C0%2C0%2C0%2C.211.252H1.55L1.289%2C10a.214.214%2C0%2C0%2C0%2C.211.252h.726a.214.214%2C0%2C0%2C0%2C.211-.177l.275-1.538H4.472L4.211%2C10a.214.214%2C0%2C0%2C0%2C.211.252h.726a.214.214%2C0%2C0%2C0%2C.211-.177l.275-1.538H7.046a.214.214%2C0%2C0%2C0%2C.211-.177l.128-.714a.214.214%2C0%2C0%2C0-.211-.252H5.838l.408-2.286H7.658a.214.214%2C0%2C0%2C0%2C.211-.177ZM4.677%2C7.393H2.915l.408-2.286H5.085Z%22%20transform%3D%22translate(0%20-2.25)%22%20fill%3D%22%23c1c6c2%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-size: contain;
}




/* ===============================================
  * Section - History *
=============================================== */

.l-top__section[data-section-name="history"]:not(:has(.product__container--history)) {
  display: none !important;
}




/* ===============================================
  * Section - News *
=============================================== */

[data-section-name="news"] .l-top__section-inner {
  padding-inline: var(--padding-horizontal-global);
}

@media (min-width: 768px) {
  [data-section-name="news"] .l-top__section-inner {
    grid-template-columns: auto 1fr;
    column-gap: calc(214 / 1400 * 100%);
    align-items: flex-start;
  }
}

.js-formatNews {
  opacity: 0;
}

.js-formatNews.is-initialized {
  opacity: 1;
}

.l-top__news-content-wrapper {
  display: grid;
  row-gap: 3rem;
}

.c-news__list {
  display: grid;
  row-gap: 1.5rem;
}

.c-news__list > *:nth-of-type(n+4) {
  display: none !important;
}

.c-news__link {
  display: grid;

  padding: 2rem;
  background-color: var(--color-white);

  color: var(--color-text-default);
  text-decoration: none;
}

@media (min-width: 768px) {
  .c-news__link {
    padding: 1.8rem 4rem;
  }
}

.c-news__article {
  display: grid;
  row-gap: 1rem;
}

@media (min-width: 768px) {
  .c-news__article {
    grid-template-columns: auto 1fr;
    column-gap: 3rem;
  }
}

.c-news__text--time {
  display: grid;
  place-content: center;

  width: 9rem;
  aspect-ratio: 91 / 25;
  border: solid 1px var(--color-project-text);

  font-size: 1.2rem;
  font-weight: var(--fw-regular);
  letter-spacing: .03em;
}

.c-news__text--title {
  font-size: 1.4rem;
  font-weight: var(--fw-regular);
  letter-spacing: .05em;
  line-height: calc(24 / 14);
}

.c-news__content {
  display: none !important;
}

.l-top__news-content-wrapper .c-button {
  width: 22rem;
  min-width: 0;
  margin-inline: auto;

  font-weight: var(--fw-regular);
}