@charset "UTF-8";

/* GR トップページのスタイル */

.l-contents {
  --color-theme: var(--color-project-brand-gr);
  --arrow-icon: var(--asset-link-arrow-right-black);
  --blank-icon: var(--asset-link-blank-black);
}




/*
 * お知らせ
 * NOTE: ブランド関連のニュースのみを表示する設定.
 */

#topSectionNews .c-news__list-item:not(:has([data-article-category="GR"], [data-article-category="all"])) {
  display: none !important;
}

#topSectionNews .c-news__list > li:nth-child(n+6 of li:has([data-article-category="GR"], [data-article-category="all"])) {
  display: none;
}




/*
 * Section - ブランド説明
 */

 #topSectionBrandDescription {
  --color-section-bg: var(--color-project-brand-gr);
  --color-section-heading: var(--color-white);
  --color-theme: var(--color-white);
}




/*
 * Section - MV
 */

#topSectionMv {
  --color-section-bg: var(--color-project-brand-gr);
  --color-section-heading: var(--color-white);
  --color-theme: var(--color-white);
}




/*
 * Section - 重要なお知らせ
 */

#topSectionImportantNotice {
  --color-section-bg: var(--color-project-brand-gr);
  --color-section-heading: var(--color-white);
  --color-theme: var(--color-white);
}

#topSectionImportantNotice .l-top-news__content {
  background-color: #444;

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

#topSectionImportantNotice .c-top-news__list-item:nth-of-type(n+2) {
  border-color: var(--color-text-default);
}

#topSectionImportantNotice .c-top-news__link,
#topSectionImportantNotice .c-top-news__article-text--date {
  color: var(--color-white);
}

#topSectionImportantNotice .c-top-news__link::after {
  background-image: var(--asset-link-arrow-right-white);
}

#topSectionImportantNotice .c-top-news__link[target="_blank"]::after {
  background-image: var(--asset-link-blank-white);
}




/*
 * Section - 商品カテゴリー
 */

#topSectionCategory {
  --color-section-bg: var(--color-project-text);
  --color-section-heading: var(--color-white);
  --color-theme: var(--color-white);
}

#topSectionCategory .c-image-banner__image {
  --img-aspect: 345 / 230;
}

#topSectionCategory .c-image-banner__list {
  --grid-column: 1;

  gap: 1.5rem;
}

@media (min-width: 768px) {
  #topSectionCategory .c-image-banner__list {
    --grid-column: 3;

    gap: 1.6rem;
  }
}




/*
 * Section - おすすめ商品
 */

#topSectionRecommended {
  --color-section-bg: var(--color-project-brand-gr);
  --color-section-heading: var(--color-white);
  --color-theme: var(--color-white);
}

@media (min-width: 768px) {
  #topSectionRecommended .top-section__ranking-list {
    grid-template-columns: repeat(12, 1fr);
  }

  #topSectionRecommended .top-section__ranking-list > li {
    grid-column: span 3;
  }

  #topSectionRecommended .top-section__ranking-list > li:nth-of-type(-n+6) {
    grid-column: span 4;
  }
}

#topSectionRecommended .product__icon--guarantee {
  color: var(--color-text-default);
}

@media (min-width: 768px) {
  #topSectionRecommended .top-section__ranking-list > li .product__item {
    padding: 1.5rem 2rem 2.5rem;
  }

  #topSectionRecommended .top-section__ranking-list > li:nth-of-type(-n+6) .product__item {
    padding: 2.3rem 2.5rem 3rem;
  }

  #topSectionRecommended .top-section__ranking-list .product__item--image {
    margin-bottom: 1.5rem;
    padding-inline: 1rem;
  }

  #topSectionRecommended .top-section__ranking-list > li:nth-of-type(-n+6) .product__item--image {
    --icon-position: -1.5rem;

    display: flex;
    justify-content: center;

    margin-bottom: 2rem;
    padding-inline: 0;
  }

  #topSectionRecommended .top-section__ranking-list > li:nth-of-type(-n+6) .product__item--image img {
    width: 77%;
  }

  #topSectionRecommended .top-section__ranking-list > li:nth-of-type(-n+6) .product__item--image .product__icon,
  #topSectionRecommended .top-section__ranking-list > li:nth-of-type(-n+6) .product__item--image .product__item--guarantee {
    top: -1.3rem;
  }

  #topSectionRecommended .top-section__ranking-list .product__item--image .product__icon {
    padding: .4rem .6rem;

    font-size: 1.2rem;
  }

  #topSectionRecommended .top-section__ranking-list > li:nth-of-type(-n+6) .product__item--image .product__icon {
    padding: .4rem .8rem;

    font-size: 1.3rem;
  }

  #topSectionRecommended .top-section__ranking-list > li:nth-of-type(-n+6) .product__item--catch {
    font-size: 1.5rem;
    line-height: calc(25 / 15);
  }

  #topSectionRecommended .top-section__ranking-list > li:nth-of-type(-n+6) .product__item--name {
    margin-bottom: 2.5rem;

    font-size: 1.8rem;
    font-weight: var(--fw-bold);
    line-height: calc(28 / 18);
  }

  #topSectionRecommended .top-section__ranking-list > li:nth-of-type(-n+6) .product__price--proper {
    font-size: 1.8rem;
  }


  #topSectionRecommended .top-section__ranking-list > li:nth-of-type(-n+6) .product__price--item:not(.product__price--proper) {
    font-size: 2.5rem;
  }

  #topSectionRecommended .top-section__ranking-list > li:nth-of-type(-n+6) .product__price--tax {
    font-size: 1rem;
  }

  #topSectionRecommended .top-section__ranking-list > li:nth-of-type(-n+6) .product__price--item:not(.product__price--proper) .product__price--tax {
    font-size: 1.2rem;
  }

  #topSectionRecommended .top-section__ranking-list > li:nth-of-type(-n+6) .product__price--discountrate {
    font-size: 1.3rem;
  }
}




/*
 * Section - Concept Movie
 */

#topSectionConceptMovie {
  --color-section-bg: var(--color-text-default);
  --color-section-heading: var(--color-white);
  --color-theme: var(--color-white);
}




/*
 * Section - Brand Contents
 */

#topSectionBrandContents {
  --color-section-bg: var(--color-theme);
  --color-item-text: var(--color-white);
}

@media (min-width: 768px) {
  #topSectionBrandContents {
    --color-item-text: var(--color-text-default);
  }
}




/*
 * Section - Instagram
 */

#topSectionInstagram {
  --color-section-bg: var(--color-project-text);
  --color-section-heading: var(--color-white);
  --color-theme: var(--color-white);
}

/* TODO: デバッグ用スタイル */
#topSectionInstagram .u-todo {
  color: var(--color-white);
}