@charset "UTF-8";

/* PENTAX 双眼鏡 トップページのスタイル */

.l-contents {
  --color-theme: var(--color-project-brand-pentax-binoculars);
  --arrow-icon: var(--asset-link-arrow-right-green);
  --blank-icon: var(--asset-link-blank-green);

  border-top: solid .5rem var(--color-project-brand-pentax-binoculars);
}




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

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

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




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

#topSectionBrandDescription .c-top-brand__heading img {
  height: 6.386rem;
}

@media (min-width: 768px) {
  #topSectionBrandDescription .c-top-brand__heading img {
    height: 10.24rem;
  }
}

#topSectionBrandDescription .c-top-brand__paragraph {
  color: var(--color-text-default);
}




/*
 * Section - MV
 */

#topSectionMv {
  margin-top: 0;
}

#topSectionMv .c-top-mv__navigation-container {
  --color-theme: var(--color-text-default);
}

#topSectionMv .c-top-mv__navigation-container .splide__pagination__page.is-active {
  --color-theme: var(--color-project-brand-pentax-binoculars);
}




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

#topSectionImportantNotice .l-top-news__heading {
  color: var(--color-theme);
}




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

#topSectionCategory {
  --asset-link-icon: var(--arrow-icon);
  --asset-blank-icon: var(--blank-icon);
}

#topSectionCategory .c-image-banner__link {
  display: grid;

  border: solid 1px var(--color-project-border);
}

#topSectionCategory .c-image-banner__image {
  padding: 1rem 3.4rem;
  aspect-ratio: auto;
}

@media (min-width: 768px) {
  #topSectionCategory .c-image-banner__image {
    padding-inline: 4rem;
  }
}

#topSectionCategory .c-image-banner__image::before {
  content: none;
}

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

  gap: .8rem;
}

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

    gap: 1.6rem;
  }
}

#topSectionCategory .c-image-banner__name-wrapper {
  --padding-inline: 1.2rem;

  position: initial;

  height: 5.4rem;
  padding-block: 0;
  background-color: var(--color-project-bg-sub);

  color: var(--color-text-default);
  font-size: 1.4rem;
  line-height: calc(18 / 14);
}

@media (min-width: 768px) {
  #topSectionCategory .c-image-banner__name-wrapper {
    --padding-inline: 1.8rem;

    height: 6rem;

    font-size: 2rem;
    line-height: calc(30 / 20);
  }
}




/*
 * Section - 双眼鏡の選び方
 */

.l-top__section--parallax:has(.c-top-parallax) {
  margin-top: 0;
  padding-top: var(--spacer-between-section);
}

#topSectionHowToChoose .c-top-tile__list {
  --gap: 4rem;
}

@media (min-width: 768px) {
  #topSectionHowToChoose .c-top-tile__list {
    --column-num: 3;
    --gap: 5rem 2.8rem;
  }
}

#topSectionHowToChoose .c-top-tile__article {
  row-gap: 1.2rem;
}

@media (min-width: 768px) {
  #topSectionHowToChoose .c-top-tile__article {
    row-gap: 1.5rem;
  }
}

#topSectionHowToChoose .c-top-tile__article-image {
  padding-inline: 1.5rem;
  aspect-ratio: auto;
}

@media (min-width: 768px) {
  #topSectionHowToChoose .c-top-tile__article-image {
    padding-inline: 0;
  }
}

#topSectionHowToChoose .c-top-tile__article-image img {
  aspect-ratio: 315 / 210;
}

.c-top-tile__text--heading {
  font-size: 1.6rem;
  font-weight: var(--fw-bold);
  letter-spacing: .05em;
  line-height: calc(28 / 16);
}

@media (min-width: 768px) {
  .c-top-tile__text--heading {
    font-size: 2rem;
  }
}

.c-top-tile__text--paragraph {
  font-size: 1.3rem;
  font-weight: var(--fw-regular);
  letter-spacing: .05em;
  line-height: calc(23 / 13);
}

@media (min-width: 768px) {
  .c-top-tile__text--paragraph {
    font-size: 1.5rem;
  }
}

.c-top-tile__text--link {
  justify-self: flex-end;

  margin-top: .4rem;
}

@media (min-width: 768px) {
  .c-top-tile__text--link {
    justify-self: initial;

    margin-top: 1rem;
  }
}




/*
 * Section - Brand Movie
 */

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




/*
 * Section - ブランドコンテンツ
 */

@media (min-width: 768px) {
  #topSectionBrandContents .l-top-brand-contents__list {
    row-gap: 10rem;
  }
}

#topSectionBrandContents .l-top-brand-contents__article {
  padding: 0;
}




/*
 * Section - FAQ
 */

#topSectionFaq {
  --color-theme: var(--color-project-text-sub);
}