@charset "UTF-8";

/* 各トップページ共通のスタイル */


/* ===============================================
  * Foundation *
=============================================== */

.l-contents {
  --color-brand-theme: var(--color-primary);
  --spacer-between-section: 6rem;
}

@media (min-width: 768px) {
  .l-contents {
    --spacer-between-section: 12rem;
  }
}

.l-contents .c-breadcrumb {
   margin-bottom: 0;
  padding-bottom: 0;
  background-color: var(--color-white);
}

@media (min-width: 768px) {
  .l-contents .c-breadcrumb {
    background-color: var(--color-project-bg-sub);
  }
}




/* ===============================================
  * Layout *
=============================================== */

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

.l-contents__inner > section:first-of-type {
  padding-top: 0;
}

.l-top__section {
  padding-block: var(--spacer-between-section);
  background-color: var(--color-white);
}

.l-top__section:not(:has(.c-top-parallax)) {
  position: relative;
}

.l-top__section:not(.l-top__section--bg):has(+ .l-top__section:not(.l-top__section--bg)) {
  padding-bottom: 0;
}

.l-top__section--bg {
  background-color: var(--color-section-bg, var(--color-project-bg-sub));
}

/* .l-top__section--bg:has(+ .l-top__section--bg) {
  padding-bottom: 0;
} */

#dvCheckList {
  padding-bottom: var(--spacer-between-section);
}




/* ===============================================
  * Object *
=============================================== */

/* Object - Component */

/*
 * パンくず
 */

.c-breadcrumb > ol {
  padding-inline: 1rem;
}

@media (min-width: 768px) {
  .c-breadcrumb > ol {
    padding-inline: 2rem;
  }
}


/*
 * 見出しテキスト
 */

.c-heading__text,
.c-top__hgroup {
  margin-bottom: 3rem;
}

@media (min-width: 768px) {
  .c-heading__text,
  .c-top__hgroup {
    margin-bottom: 4rem;
  }
}

.c-top__text--section-paragraph {
  color: var(--color-section-heading, var(--color-text-default));
  font-size: 1.3rem;
  font-weight: var(--fw-medium);
  letter-spacing: .05em;
  line-height: 2;
}

@media (min-width: 768px) {
  .c-top__text--section-paragraph {
    font-size: 1.5rem;
    letter-spacing: .05em;
  }
}

.c-top__hgroup {
  display: grid;
  row-gap: .6rem;

  text-align: center;
}

@media (min-width: 768px) {
  .c-top__hgroup {
    row-gap: 1rem;
  }
}

.c-top__hgroup > * {
  margin: 0;
}


/*
 * 見出しテキスト - ブランド紹介
 */

.c-top-brand__hgroup {
  display: grid;
  row-gap: 1.5rem;

  color: var(--color-theme, var(--color-text-default));
}

@media (min-width: 768px) {
  .c-top-brand__hgroup {
    row-gap: 3rem;
  }
}

.c-top-brand__heading {
  display: grid;
  row-gap: 1rem;
  justify-items: center;

  font-size: 1.8rem;
  font-weight: var(--fw-bold);
  letter-spacing: .05em;
  text-align: center;
}

@media (min-width: 768px) {
  .c-top-brand__heading {
    font-size: 3rem;
  }
}

.c-top-brand__heading img {
  width: auto;
  height: 3.1rem;
}

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

.c-top-brand__paragraph {
  position: relative;

  font-size: 1.4rem;
  font-weight: var(--fw-medium);
  letter-spacing: .05em;
  line-height: 2;
  text-align: center;
}

@media (min-width: 768px) {
  .c-top-brand__paragraph {
    font-size: 1.8rem;
  }
}

.c-top-brand__paragraph .u-visually-hidden {
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  pointer-events: none;
}


/*
 * 見出しテキスト & タブボタン
 */

.l-top__heading-tab-container {
  display: grid;
  row-gap: 3rem;

  margin-bottom: 1.9rem;
}

@media (min-width: 768px) {
  .l-top__heading-tab-container {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    margin-bottom: 4rem;
  }
}

.l-top__heading-tab-container * {
  margin: 0;
}


/*
 * 見出しテキスト ＆ テキストリンク
 */

.l-top__heading-news-container {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: flex-end;

  margin-bottom: 3rem;
}

@media (min-width: 768px) {
  .l-top__heading-news-container {
    grid-template-columns: auto;

    row-gap: 6rem;
  }
}

.l-top__heading-news-container > * {
  margin: 0;
}

.l-top__heading-news-container .c-link__text {
  --accordion-icon-width: 1.07rem;

  column-gap: .8rem;

  width: fit-content;
  padding-bottom: .25rem;
  border-bottom: solid 1px var(--color-theme, var(--color-primary));

  color: var(--color-theme, var(--color-primary));
}

@media (min-width: 768px) {
  .l-top__heading-news-container .c-link__text {
    font-size: 1.6rem;
  }
}


/*
 * タブボタン & タブパネル
 */

.c-tab-panel__tab-list {
  display: grid;
  grid-template-columns: repeat(var(--column-num, 2), 1fr);
  gap: .5rem;
}

@media (min-width: 768px) {
  .c-tab-panel__tab-list {
    display: flex;
  }
}

@media (max-width: 767px) {
  .l-section--full .c-tab-panel__tab-list {
    padding-inline: var(--padding-horizontal-global);
  }
}

.c-tab-panel__button--tab {
  display: grid;
  place-content: center;

  background-color: var(--color-button-bg, transparent);
  border-radius: .4rem;
  padding-block: 1.2rem;
  border: solid 1px var(--color-button-border, var(--color-project-text-sub));

  color: var(--color-button-text, var(--color-project-text-sub));
  font-size: 1.4rem;
  font-weight: var(--fw-bold);
  letter-spacing: .05em;
  line-height: 1;
}

.c-tab-panel__button--tab[aria-selected="true"] {
  --color-button-bg: var(--color-text-default) !important;
  --color-button-border: var(--color-text-default) !important;
  --color-button-text: var(--color-white) !important;
}

@media (min-width: 768px) {
  .c-tab-panel__button--tab {
    padding: 1rem 4rem;

    font-size: 1.6rem;
  }
}

/* TODO: デバッグ用スタイル */
.c-tab-panel__panel-inner:has(.u-todo) {
  display: grid;
  place-content: center;

  padding: 6.4rem 3.2rem;
  background-color: var(--color-project-bg-sub);
  border: solid 1px var(--color-project-text-sub);
}

/* Animation */

.c-tab-panel__button--tab {
  transition:
    background-color var(--transition-duration-short) ease,
    border-color var(--transition-duration-short) ease,
    color var(--transition-duration-short) ease;
}

@media (prefers-reduced-motion: reduce) {
  .c-tab-panel__button--tab {
    transition: none;
  }
}

.c-tab-panel__button--tab:hover,
.c-tab-panel__button--tab:focus-visible {
  --color-button-bg: var(--color-project-text-sub);
  --color-button-border: var(--color-project-text-sub);
  --color-button-text: var(--color-white);
}


/*
 * MVスライダー
 */

.c-top-mv__slider {
  --max-slider-width: 120rem;

  display: flex;
  flex-direction: column-reverse;
}

.c-top-mv__slider.splide {
  width: 100%;
}

/* 初期化前の高さ確保 (track要素に対して) */
.c-top-mv__slider.splide:not(.is-initialized) .splide__track {
  aspect-ratio: 375 / 295;
}

@media (min-width: 768px) {
  .c-top-mv__slider.splide:not(.is-initialized) .splide__track {
    aspect-ratio: 1500 / 600;
  }
}

@media (min-width: 1500px) {
  .c-top-mv__slider.splide:not(.is-initialized) .splide__track {
    aspect-ratio: auto;
    height: 60rem;
  }
}


/* MVスライダー - ナビゲーションコンテナ */

.c-top-mv__navigation-container {
  display: grid;
  row-gap: 2rem;
  justify-items: center;

  margin-top: 1rem;
  margin-inline: auto;
  padding-inline: var(--padding-horizontal-global);
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  .c-top-mv__navigation-container {
    --navigation-button-container-width: 15rem;

    grid-template-columns: var(--navigation-button-container-width) auto var(--navigation-button-container-width);
    align-items: center;
    justify-content: space-between;

    width: 100%;
    max-width: calc(var(--max-slider-width, 1200px) + 20%);
    margin-top: 1.5rem;
    padding-inline: 10%;
    box-sizing: border-box;
  }
}

@media (min-width: 1500px) {
  .c-top-mv__navigation-container {
    max-width: var(--max-slider-width);
    width: 100%;
    padding-inline: 0;
  }
}

/* MVスライダー - ページネーション */

.c-top-mv__navigation-container .splide__pagination {
  --splide-pagination-bullet-size: .3rem;
  --splide-pagination-bullet-width: 4rem;
  --splide-pagination-bullet-inactive-opacity: 0.2;

  position: initial;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .8rem;
  padding: 0;
  margin: 0;
  list-style: none;

  bottom: auto;
  left: auto;
  right: auto;
  transform: none;
}

@media (min-width: 768px) {
  .c-top-mv__navigation-container .splide__pagination {
    --splide-pagination-bullet-size: .4rem;
    --splide-pagination-bullet-width: 6rem;
    grid-column: 2 / 3;
    gap: 1rem;
  }
}

.c-top-mv__navigation-container .splide__pagination__page {
  position: relative;

  display: block;

  width: var(--splide-pagination-bullet-width);
  height: var(--splide-pagination-bullet-size);
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background-color: transparent;
  cursor: pointer;
}

.c-top-mv__navigation-container .splide__pagination__page.is-active {
  opacity: 1;
  transform: scale(1);
}

.c-top-mv__navigation-container .splide__pagination__page::before,
.c-top-mv__navigation-container .splide__pagination__page::after {
  content: "";

  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;
  background-color: var(--color-theme, var(--color-text-default));
}

.c-top-mv__navigation-container .splide__pagination__page::before {
  content: "";

  scale: 0 1;
  transform-origin: right;
  transition: scale 500ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .c-top-mv__navigation-container .splide__pagination__page::before {
    transition: none;
  }
}

.c-top-mv__navigation-container .splide__pagination__page.is-active::before {
  scale: 1 1;
  transform-origin: left;
  transition-duration: 4000ms;
  transition-timing-function: linear;
}

.c-top-mv__navigation-container .splide__pagination__page::after {
  opacity: var(--splide-pagination-bullet-inactive-opacity);
}

/* MVスライダー - 操作ボタン */

.c-top-mv__navigation-button-container {
  display: grid;
  grid-template-columns: repeat(3, var(--icon-size, 1.6rem));
  align-items: center;
  justify-content: center;
  column-gap: 1.5rem;
}

@media (min-width: 768px) {
  .c-top-mv__navigation-button-container {
    --icon-size: 2rem;
    justify-self: flex-end;
    grid-column: 3 / 4;
  }
}

.c-top-mv__navigation-button-container .splide__arrow,
.c-top-mv__navigation-button-container .splide__toggle {
  position: initial;

  display: grid;
  place-content: center;

  width: var(--icon-size);
  height: var(--icon-size);
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: .2rem;

  color: var(--color-theme, var(--color-text-default));
  cursor: pointer;

  transition:
    opacity var(--transition-default),
    color var(--transition-duration-short) ease;

  /* Splideのデフォルトスタイルを上書き */
  transform: none;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .c-top-mv__navigation-button-container .splide__arrow,
  .c-top-mv__navigation-button-container .splide__toggle {
    transition: none;
  }
}

.c-top-mv__navigation-button-container .splide__arrow:hover,
.c-top-mv__navigation-button-container .splide__arrow:focus-visible,
.c-top-mv__navigation-button-container .splide__toggle:hover,
.c-top-mv__navigation-button-container .splide__toggle:focus-visible {
  color: var(--color-theme, var(--color-primary));
}

.c-top-mv__navigation-button-container .splide__arrow:active,
.c-top-mv__navigation-button-container .splide__toggle:active {
  outline: solid 2px var(--color-project-border);
}

.c-top-mv__navigation-button-container .splide__arrow svg {
  width: auto;
  height: 100%;
  transform: initial;
}

.c-top-mv__navigation-button-container .splide__toggle svg {
  width: 100%;
  height: 100%;
}


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

.c-top-news__list--notification {
  --accent-color: var(--color-emphasis);
  --link-icon: var(--asset-link-arrow-right-red);
}

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

.c-top-news__link {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 1.5rem;

  padding: 1.5rem;
  border: solid 1px var(--accent-color, var(--color-text-default));
  border-radius: .4rem;

  color: var(--accent-color, var(--color-text-default));
  text-decoration: none;

  transition: box-shadow var(--transition-default);
}

@media (min-width: 768px) {
  .c-top-news__link {
    padding: 1.6rem 2.5rem;
  }
}

.c-top-news__link::after {
  content: "";

  width: .7rem;
  aspect-ratio: 7.33 / 12;
  background-image: var(--link-icon, var(--asset-link-arrow-right-black));
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

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

@media (min-width: 768px) {
  .c-top-news__article {
    grid-template-columns: 10rem 1fr;
    align-items: center;
    column-gap: 1rem;
  }
}

.c-top-news__article-text--date {
  font-size: 1.4rem;
  font-weight: var(--fw-bold);
  letter-spacing: .05em;
  line-height: calc(16 / 14);
}

@media (min-width: 768px) {
  .c-top-news__article-text--date {
    font-size: 1.5rem;
    line-height: calc(18 / 15);
  }
}

.c-top-news__article-text--title {
  font-size: 1.4rem;
  font-weight: var(--fw-medium);
  letter-spacing: .05em;
  line-height: calc(22 / 14);
}

@media (min-width: 768px) {
  .c-top-news__article-text--title {
    font-size: 1.5rem;
    line-height: calc(21 / 15);
  }
}

/* 重要なお知らせ - アニメーション */

.c-top-news__link {
  transition: box-shadow var(--transition-default);
}

.c-top-news__link::after {
  transition: translate var(--transition-default);
}

@media (prefers-reduced-motion: reduce) {
  .c-top-news__link,
  .c-top-news__link::after {
    transition: none;
  }
}

.c-top-news__link:hover,
.c-top-news__link:focus-visible {
  box-shadow: 0 0 .6rem rgba(0, 0, 0, .16);
}

.c-top-news__link:hover::after,
.c-top-news__link:focus-visible::after {
  translate: .5rem;
}


/*
 * PICKUP 重要なお知らせ
 */

#topSectionImportantNotice .l-top-news__content {
  --row-gap: 1.6rem;
  padding: 2.5rem 1.5rem calc(2.5rem - var(--row-gap, 1.6rem));
  display: grid;
  gap: 0;
  background-color: var(--color-project-bg-sub);
}

@media (min-width: 768px) {
  #topSectionImportantNotice .l-top-news__content {
    --row-gap: 2rem;
    padding: .5rem 3rem .5rem 4.5rem;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 4.6rem;
  }
}

#topSectionImportantNotice .l-top-news__heading {
  font-size: 1.6rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  line-height: 1.3125;
  text-align: center;
}

#topSectionImportantNotice .c-top-news__list {
  row-gap: 0;
}

#topSectionImportantNotice .c-top-news__list-item:nth-of-type(n+2) {
  border-top: 1px solid var(--color-project-border);
}

#topSectionImportantNotice .c-top-news__link {
  padding: var(--row-gap) 0.6rem;
  border: none;
  border-radius: 0;
  color: var(--color-project-text);
}

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

#topSectionImportantNotice .c-top-news__link:hover,
#topSectionImportantNotice .c-top-news__link:focus-visible {
  box-shadow: none;
}

#topSectionImportantNotice .c-top-news__article-text--date,
#topSectionImportantNotice .c-top-news__article-text--title {
  font-size: 1.3rem;
  line-height: 2;
}

@media (min-width: 768px) {
  #topSectionImportantNotice .c-top-news__article-text--date,
  #topSectionImportantNotice .c-top-news__article-text--title {
    font-size: 1.5rem;
    line-height: calc(26 / 15);
  }
}

#topSectionImportantNotice .c-top-news__article-text--date {
  color: var(--color-project-text-sub);
}


/*
 * タイルレイアウト
 */

.c-top-tile__list {
  display: grid;
  grid-template-columns: repeat(var(--column-num, 1), 1fr);
  gap: var(--gap, 5rem);
}

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

.c-top-tile__list-item:has(.c-top-tile__description) .c-image-banner__image {
  aspect-ratio: 345 / 172.5;
}

@media (min-width: 768px) {
  .c-top-tile__list-item:has(.c-top-tile__description) .c-image-banner__image {
    aspect-ratio: 328 / 218;
  }
}

.c-top-tile__list-item:has(.c-top-tile__description) .c-image-banner__image > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.c-top-tile__list-item:has(.c-top-tile__description) .c-image-banner__name-wrapper {
  align-items: center;
  column-gap: .8rem;

  padding: 1.2rem;

  font-size: 1.4rem;
}

@media (min-width: 768px) {
  .c-top-tile__list-item:has(.c-top-tile__description) .c-image-banner__name-wrapper {
    padding: 1.5rem;

    background-color: transparent;
    background-image: none;

    font-size: 1.6rem;
  }
}

.c-top-tile__list-item:has(.c-top-tile__description) .c-image-banner__name-wrapper img {
  height: 2rem;
}

@media (min-width: 768px) {
  .c-top-tile__list-item:has(.c-top-tile__description) .c-image-banner__name-wrapper img {
    height: 2.5rem;
  }
}

.c-top-tile__list-item .c-image-banner__link {
  display: grid;
  row-gap: 1.5rem;
}

@media (min-width: 768px) {
  .c-top-tile__list-item .c-image-banner__link {
    row-gap: 1.2rem;
  }
}

.c-top-tile__description {
  display: grid;
  row-gap: .8rem;
}

@media (min-width: 768px) {
  .c-top-tile__description {
    row-gap: 1rem;
  }
}

.c-top-tile__text--heading {
  font-size: 1.4rem;
  font-weight: var(--fw-semibold);
  letter-spacing: .05em;
  line-height: calc(22 / 14);
}

@media (min-width: 768px) {
  .c-top-tile__text--heading {
    font-size: 1.8rem;
    font-weight: var(--fw-bold);
    line-height: calc(28 / 18);
  }
}

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

@media (min-width: 768px) {
  .c-top-tile__text--paragraph {
    font-size: 1.4rem;
    line-height: calc(26 / 14);
  }
}

.c-top-tile__text--link {
  display: flex;
  align-items: center;
  column-gap: .5em;

  width: fit-content;
  padding-bottom: .5rem;
  border-bottom: solid 1px var(--color-theme, var(--color-primary));

  color: var(--color-theme, var(--color-primary));
  font-size: 1.2rem;
  font-weight: var(--fw-bold);
  letter-spacing: .05em;
  line-height: 1;
}

@media (min-width: 768px) {
  .c-top-tile__text--link {
    --arrow-size: .6rem;
    --blank-size: 1rem;

    font-size: 1.3rem;
  }
}

.c-top-tile__text--link > b {
  font-size: 1.2em;
}

.c-top-tile__text--link::after {
  content: "";

  width: var(--arrow-size, .57rem);
  aspect-ratio: 5.7 / 8.89;
  background-image: var(--arrow-icon, var(--asset-link-arrow-right-red));
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

[target="_blank"] .c-top-tile__text--link::after,
.c-top-tile__text--link[target="_blank"]::after {
  width: var(--blank-size, .8rem);
  aspect-ratio: 1;
  background-image: var(--blank-icon, var(--asset-link-blank-red));
}

.c-top-tile__link {
  color: var(--color-text-default);
  text-decoration: none;
}

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

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

.c-top-tile__article-image {
  overflow: hidden;
}

.c-top-tile__article-image,
.c-top-tile__article-image img {
  aspect-ratio: 1;
}

@media (min-width: 768px) {
  .c-top-tile__article-image,
  .c-top-tile__article-image img {
    aspect-ratio: 2 / 1;
  }
}

/* コンテンツ */

.c-top-contents__link {
  color: var(--color-text-default);
  text-decoration: none;
}

.c-top-contents__article {
  display: grid;
}

.c-top-contents__article-image {
  overflow: hidden;
}

.c-top-contents__article-image,
.c-top-contents__article-image img {
  aspect-ratio: 315 / 210;
}

.c-top-contents__description {
  display: grid;
  row-gap: .8rem;

  padding: 1.2rem 1.5rem 1.5rem;
  background-color: var(--color-white);
}

.c-top-contents__text--heading {
  font-size: 1.4rem;
  font-weight: var(--fw-bold);
  letter-spacing: .05em;
  line-height: calc(24 / 14);
}

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

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

  margin-top: .4rem;
}

/* Animation */

.c-top-tile__article-image img,
.c-top-contents__article-image img {
  transition: scale var(--transition-duration-extra-long) ease-out;
}

.c-top-tile__text--link::after {
  transition: translate var(--transition-default);
}

@media (prefers-reduced-motion: reduce) {
  .c-top-tile__article-image img,
  .c-top-tile__text--link::after,
  .c-top-contents__article-image img {
    transition: none;
  }
}

.c-top-tile__link:hover .c-top-tile__article-image img,
.c-top-tile__link:focus-visible .c-top-tile__article-image img,
.c-image-banner__link:hover .c-top-tile__article-image img,
.c-image-banner__link:focus-visible .c-top-tile__article-image img,
.c-top-contents__link:hover .c-top-contents__article-image img,
.c-top-contents__link:focus-visible .c-top-contents__article-image img {
  scale: 1.2;
}

.c-top-tile__link:hover .c-top-tile__text--link::after,
.c-top-tile__link:focus-visible .c-top-tile__text--link::after,
.c-image-banner__link:hover .c-top-tile__text--link::after,
.c-image-banner__link:focus-visible .c-top-tile__text--link::after,
.c-top-contents__link:hover .c-top-tile__text--link::after,
.c-top-contents__link:focus-visible .c-top-tile__text--link::after {
  translate: .5rem;
}


/*
 * カード型リンク
 */

/* .l-top__section .c-image-banner__link {} */

.l-top__section .c-image-banner__image {
  aspect-ratio: var(--img-aspect, 133 / 88.8);
}

.l-top__section .c-image-banner__name-wrapper {
  --padding-inline: 1.5rem;
  --arrow-size: .733rem;

  align-items: center;

  padding: 1.4rem var(--padding-inline);
  background-color: var(--color-link-bg, rgba(0, 0, 0, .7));
  background-image: var(--asset-link-icon, var(--asset-link-arrow-right-white));
  background-position: right var(--padding-inline) center;
  background-repeat: no-repeat;
  background-size: var(--arrow-size);

  color: var(--color-link-text, var(--color-white));
  font-size: var(--font-size-link, 1.6rem);
}

@media (min-width: 768px) {
  .l-top__section .c-image-banner__name-wrapper {
    --padding-inline: 2rem;
    --arrow-size: .8rem;

    padding-block: 1.75rem;

    font-size: var(--font-size-link, 1.8rem);
  }
}


/*
 * お知らせ
 */

.js-formatNews {
  opacity: 0;
}

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

.c-news__list {
  --border-style: solid 1px #C9C9C9;

  display: grid;

  border-top: var(--border-style);
}

.c-news__list > li {
  border-bottom: var(--border-style);
}

.c-news__link {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 1em;

  padding: 1.8rem 1rem;

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

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

.c-news__link::after {
  content: "";

  width: .8rem;
  aspect-ratio: 8 / 12;
  background-image: var(--asset-link-arrow-right-red);
  background-repeat: no-repeat;
  background-size: contain;

}

.c-news__header {
  display: grid;
  grid-template-areas: "date category" "title title";
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .7rem 1rem;
}

@media (min-width: 768px) {
  .c-news__header {
    grid-template-areas: "date category title";
    grid-template-columns: 9rem auto 1fr;
    column-gap: 1.5rem;
  }
}

.c-news__text--time {
  grid-area: date;

  font-size: 1.4rem;
  font-weight: var(--fw-medium);
  letter-spacing: .05em;
  line-height: 1;
}

@media (min-width: 768px) {
  .c-news__text--time {
    font-size: 1.5rem;
    font-weight: var(--fw-regular);
  }
}

.c-news__text--category {
  grid-area: category;
}

.c-news__text--title {
  grid-area: title;

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

@media (min-width: 768px) {
  .c-news__text--title {
    font-size: 1.5rem;
  }
}

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

/* Animation */

.c-news__link::after {
  transition: translate var(--transition-default);
}

@media (prefers-reduced-motion: reduce) {
  .c-news__link::after {
    transition: none;
  }
}

.c-news__link:hover .c-news__text--title,
.c-news__link:focus-visible .c-news__text--title {
  text-decoration: underline;
}

.c-news__link:hover::after,
.c-news__link:focus-visible::after {
  translate: .5rem;
}

@media (min-width: 768px) {
  .c-news__link:hover::after,
  .c-news__link:focus-visible::after {
    translate: 1rem;
  }
}


/*
 * パララックス
 */

.l-top__section--parallax:has(.c-top-parallax) {
  position: relative;

  background-color: transparent;
}

.l-top__section--parallax:has(.c-top-parallax)::after {
  content: "";

  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;

  width: 100%;
  /* height: 84%; */
  height: calc(100% - 25.38rem);
  background-color: var(--color-white);
}

@media (min-width: 768px) {
  .l-top__section--parallax:has(.c-top-parallax)::after {
    /* height: 67%; */
    height: calc(100% - 43.4rem);
  }
}

.l-top__section--parallax:has(.c-top-parallax) .c-heading__text {
  --color-section-heading: var(--color-white);
  --color-theme: var(--color-section-heading);
}

.c-top-parallax {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: -1;

  width: 100%;
}

/* .c-top-parallax__inner {
  position: relative;
} */

.c-top-parallax__image {
  /* position: absolute; */
  /* bottom: 0; */
  /* left: 0; */

  width: 100%;
  height: 100vh;
  /* aspect-ratio: 375 / 660; */
}

/* @media (min-width: 768px) {
  .c-top-parallax__image {
    aspect-ratio: 1920 / 1080;
  }
} */

.c-top-parallax__image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
}



/* Object - Project */

/*
 * 見出しテキスト - ブランド紹介
 */

#topSectionBrandDescription {
  margin: 0;
  padding-block: 4rem 3rem;
}

@media (min-width: 768px) {
  #topSectionBrandDescription {
    padding-block: 6rem 4rem;
  }
}

/*
 * Section - MV
 */

#topSectionMv {
  padding-top: 0;
}

#topSectionMv:has(+ #topSectionNotification),
#topSectionMv:has(+ #topSectionImportantNotice) {
  padding-bottom: 0;
}

#topSectionMv + #topSectionNotification:not(.l-top__section--bg),
#topSectionMv + #topSectionImportantNotice:not(.l-top__section--bg) {
  padding-top: 4rem;
}

@media (min-width: 768px) {
  #topSectionMv + #topSectionNotification:not(.l-top__section--bg),
  #topSectionMv + #topSectionImportantNotice:not(.l-top__section--bg) {
    padding-top: 8.5rem;
  }
}

#topSectionMv + #topSectionNotification.l-top__section--bg,
#topSectionMv + #topSectionImportantNotice.l-top__section--bg {
  padding-top: 4rem;
}

@media (min-width: 768px) {
  #topSectionMv + #topSectionNotification.l-top__section--bg,
  #topSectionMv + #topSectionImportantNotice.l-top__section--bg {
    padding-top: 8rem;
  }
}

#topSectionNotification:not(:has(+ .l-top__section--bg)),
#topSectionImportantNotice:not(:has(+ .l-top__section--bg)) {
  padding-bottom: 0;
}


/*
 * Section - News
 */

@media (min-width: 768px) {
  #topSectionNews .l-top-news {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 8rem;

    padding: 10rem 12rem;
    border: solid 3px #C9C9C9;
  }
}

.l-top__heading-news-container {
  --color-theme: var(--color-primary);
}

.l-top__heading-news-container .c-heading__text {
  text-align: left;
}

@media (min-width: 768px) {
  .l-top__heading-news-container .c-heading__text {
    flex-direction: row;
    align-items: center;
    column-gap: 2rem;

    font-size: 3rem;
  }

  .l-top__heading-news-container .c-heading__text > small {
    font-size: 1.5rem;
  }
}


/*
 * Section - Concept Movie
 */

.l-top__movie-wrapper iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}


/*
 * Section - Brand Concept
 */

.l-top-brand-contents__list {
  display: grid;
  row-gap: 5rem;
}

@media (min-width: 768px) {
  .l-top-brand-contents__list > li:nth-of-type(odd) .l-top-brand-contents__article {
    flex-direction: row-reverse;
  }

  .l-top-brand-contents__list > li:nth-of-type(even) .l-top-brand-contents__article {
    flex-direction: row;
  }
}

.l-top-brand-contents__article {
  display: flex;
  flex-direction: column;
  justify-content: center;
  row-gap: 2rem;
}

@media (min-width: 768px) {
  .l-top-brand-contents__article {
    column-gap: 5rem;
    align-items: center;

    padding: 8rem 10rem;
    background-color: var(--color-item-bg, var(--color-white));
  }
}

@media (min-width: 768px) {
  .l-top-brand-contents__image {
    flex-shrink: 0;

    width: calc(575 / 1200 * 100%);
  }
}

.l-top-brand-contents__description-container {
  display: grid;
  row-gap: 1.2rem;
}

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

.l-top-brand-contents__text--heading {
  color: var(--color-item-text, var(--color-text-default));
  font-size: 2rem;
  font-weight: var(--fw-bold);
  letter-spacing: .05em;
  line-height: calc(30 / 20);
  text-align: center;
}

@media (min-width: 768px) {
  .l-top-brand-contents__text--heading {
    font-size: 3rem;
    text-align: left;
  }
}

.l-top-brand-contents__text--paragraph {
  color: var(--color-item-text, var(--color-text-default));
  font-size: 1.3rem;
  font-weight: var(--fw-regular);
  letter-spacing: .05em;
  line-height: calc(26 / 13);
}

@media (min-width: 768px) {
  .l-top-brand-contents__text--paragraph {
    font-size: 1.6rem;
  }
}

.l-top-brand-contents__link {
  display: grid;
  grid-template-columns: var(--button-icon-size, 1rem) 1fr var(--button-icon-size, 1rem);
  align-items: center;
  column-gap: 1em;

  min-width: 23.5rem;
  margin-top: 1.8rem;
  margin-inline: auto;
  padding: 1.4rem 1.5rem;
  border-radius: .5rem;
  background-color: var(--color-button-bg, var(--color-black));

  color: var(--color-button-text, var(--color-white));
  font-size: 1.4rem;
  font-weight: var(--fw-medium);
  letter-spacing: .05em;
  line-height: 1;
  text-align: center;
  text-decoration: none;
}

@media (min-width: 768px) {
  .l-top-brand-contents__link {
    --button-icon-size: 1.4rem;

    min-width: 35rem;
    margin-top: 2rem;
    margin-left: 0;
    padding: 2rem;

    font-size: 1.8rem;
  }
}

.l-top-brand-contents__link::before,
.l-top-brand-contents__link::after {
  content: "";

  width: 100%;
  aspect-ratio: 1;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.l-top-brand-contents__link::after {
  background-image: var(--button-icon-arrow, var(--asset-link-arrow-right-white));
}

.l-top-brand-contents__link[target="_blank"]::after {
  background-image: var(--button-icon-blank, var(--asset-link-blank-white));
}

/* モバイルで背景色が付く場合 */

.l-top-brand-contents__list-item--bg .l-top-brand-contents__article {
  row-gap: 0;
}

.l-top-brand-contents__list-item--bg .l-top-brand-contents__description-container {
  padding: 2.4rem var(--padding-horizontal-global) 3rem;
  background-color: var(--color-item-bg, var(--color-white));
}


/*
 * Section - Instagram
 */

.l-top__instagram-wrapper .ecbn-selection-widget,
.l-top__instagram-wrapper .ecbn-selection-content {
  max-width: none !important;
  margin: 0 !important;
}

.l-top__instagram-wrapper .ecbn-selection-page-wrapper {
  margin: 0 !important;
}

.l-top__instagram-wrapper .ecbn-selection-item a {
  aspect-ratio: 1;
  border: solid 1px var(--color-project-border);
}

.l-top__instagram-wrapper .ecbn-selection-footer2 {
  display: none;
}

/* TODO: デバッグ用スタイル */
.l-top__instagram-wrapper .u-todo {
  margin-inline: auto;
}


/*
 * Section - FAQ
 */

@media (min-width: 768px) {
  .l-top-faq {
    padding: 6rem 10rem 10rem;
    background-color: var(--color-faq-bg, var(--color-white));
  }
}

.l-top-faq__list {
  display: grid;
  row-gap: 1rem;
}

@media (min-width: 768px) {
  .l-top-faq__list {
    row-gap: 0;
  }
}


/*
 * Section - ランキングパーツエリア（非スライダー）
 */

.top-section__ranking-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 1.2rem;
}

@media (min-width: 768px) {
  .top-section__ranking-list {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.6rem;
  }
}

.top-section__ranking-list .top-section__ranking--item:is(:nth-of-type(1), :nth-of-type(2)) {
  grid-column: 1/3;
}

@media (min-width: 768px) {
  .top-section__ranking-list .top-section__ranking--item:nth-of-type(1) {
    grid-column: 1/3;
  }

  .top-section__ranking-list .top-section__ranking--item:nth-of-type(2) {
    grid-column: 3/5;
  }
}

.top-section__ranking-list .top-section__ranking--item:is(:nth-of-type(1), :nth-of-type(2)) .product__item {
  padding: 1rem 2rem 3rem;
}

@media (min-width: 768px) {
  .top-section__ranking-list .top-section__ranking--item:is(:nth-of-type(1), :nth-of-type(2)) .product__item {
    padding: 3rem 3rem 4rem;
  }
}

.top-section__ranking-list .top-section__ranking--item:not(:is(:nth-of-type(1), :nth-of-type(2))) .product__item {
  padding: 1rem 1rem 1.8rem;
}

@media (min-width: 768px) {
  .top-section__ranking-list .top-section__ranking--item:not(:is(:nth-of-type(1), :nth-of-type(2))) .product__item {
    padding: 1.5rem 2rem 3rem;
  }
}

@media (min-width: 768px) {
  .top-section__ranking-list .top-section__ranking--item:is(:nth-of-type(1), :nth-of-type(2)) .product__item--image {
    --icon-position: -1rem;

    display: flex;
    justify-content: center;

    margin-bottom: 2.5rem;
    padding: 0;
  }

  .top-section__ranking-list .top-section__ranking--item:is(:nth-of-type(1), :nth-of-type(2)) .product__item--image img {
    width: 62%;
  }
}

.top-section__ranking-list .top-section__ranking--item:not(:is(:nth-of-type(1), :nth-of-type(2))) .product__item--image {
  --icon-position: -.5rem;

  margin-bottom: 1rem;
  padding: 0;
}

@media (min-width: 768px) {
  .top-section__ranking-list .top-section__ranking--item:not(:is(:nth-of-type(1), :nth-of-type(2))) .product__item--image {
    --icon-position: -1rem;

    margin-bottom: 1.5rem;
  }
}

@media (min-width: 768px) {
  .top-section__ranking-list .top-section__ranking--item:is(:nth-of-type(1), :nth-of-type(2)) .product__item--image .product__icon,
  .top-section__ranking-list .top-section__ranking--item:is(:nth-of-type(1), :nth-of-type(2)) .product__item--image .product__item--guarantee {
    top: -1rem;
  }
}

.top-section__ranking-list .top-section__ranking--item:not(:is(:nth-of-type(1), :nth-of-type(2))) .product__item--image .product__icon,
.top-section__ranking-list .top-section__ranking--item:not(:is(:nth-of-type(1), :nth-of-type(2))) .product__item--image .product__item--guarantee {
  top: -.5rem;
}

.top-section__ranking-list .top-section__ranking--item:is(:nth-of-type(1), :nth-of-type(2)) .product__item--image .product__icon {
  font-size: 1.2rem;
}

@media (min-width: 768px) {
  .top-section__ranking-list .top-section__ranking--item:is(:nth-of-type(1), :nth-of-type(2)) .product__item--image .product__icon {
    padding: .6rem 1.2rem;

    font-size: 1.6rem;
  }
}

.top-section__ranking-list .top-section__ranking--item:not(:is(:nth-of-type(1), :nth-of-type(2))) .product__item--image .product__icon {
  padding: .4rem .6rem;

  font-size: 1rem;
}

@media (min-width: 768px) {
  .top-section__ranking-list .top-section__ranking--item:not(:is(:nth-of-type(1), :nth-of-type(2))) .product__item--image .product__icon {
    padding-inline: .8rem;

    font-size: 1.2rem;
  }
}

@media (min-width: 768px) {
  .top-section__ranking-list .top-section__ranking--item:is(:nth-of-type(1), :nth-of-type(2)) .product__item--image .product__icon--guarantee {
    width: 5rem;
  }
}

.top-section__ranking-list .top-section__ranking--item:not(:is(:nth-of-type(1), :nth-of-type(2))) .product__item--image .product__icon--guarantee {
  width: 3.2rem;
}

@media (min-width: 768px) {
  .top-section__ranking-list .top-section__ranking--item:not(:is(:nth-of-type(1), :nth-of-type(2))) .product__item--image .product__icon--guarantee {
    width: 4rem;
  }
}

.top-section__ranking-list .top-section__ranking--item:not(:is(:nth-of-type(1), :nth-of-type(2))) .product__item--icon {
  margin-bottom: .5rem;
}

@media (min-width: 768px) {
  .top-section__ranking-list .top-section__ranking--item:not(:is(:nth-of-type(1), :nth-of-type(2))) .product__item--icon {
    margin-bottom: 1rem;
  }
}

.top-section__ranking-list .product__item--catch {
  margin-bottom: .8rem;

  font-size: 1.3rem;
  font-weight: var(--fw-regular);
  letter-spacing: .05em;
  line-height: calc(21 / 13);
}

@media (min-width: 768px) {
  .top-section__ranking-list .product__item--catch {
    font-size: 1.8rem;
    line-height: calc(28 / 18);
  }
}

.top-section__ranking-list .top-section__ranking--item:is(:nth-of-type(1), :nth-of-type(2)) .product__item--name {
  font-size: 1.5rem;
  font-weight: var(--fw-bold);
}

@media (min-width: 768px) {
  .top-section__ranking-list .top-section__ranking--item:is(:nth-of-type(1), :nth-of-type(2)) .product__item--name {
    font-size: 2.2rem;
  }
}

.top-section__ranking-list .top-section__ranking--item:not(:is(:nth-of-type(1), :nth-of-type(2))) .product__item--name {
  font-size: 1.2rem;
  font-weight: var(--fw-regular);
}

@media (min-width: 768px) {
  .top-section__ranking-list .top-section__ranking--item:not(:is(:nth-of-type(1), :nth-of-type(2))) .product__item--name {
    font-size: 1.5rem;
  }
}

.top-section__ranking-list .product__price--item {
  flex-wrap: wrap;
  row-gap: 0.4rem;
}

.top-section__ranking-list .top-section__ranking--item:is(:nth-of-type(1), :nth-of-type(2)) .product__price--proper {
  font-size: 1.5rem;
}

@media (min-width: 768px) {
  .top-section__ranking-list .top-section__ranking--item:is(:nth-of-type(1), :nth-of-type(2)) .product__price--proper {
    font-size: 2rem;
  }
}

.top-section__ranking-list .top-section__ranking--item:not(:is(:nth-of-type(1), :nth-of-type(2))) .product__price--proper {
  font-size: 1.2rem;
}

@media (min-width: 768px) {
  .top-section__ranking-list .top-section__ranking--item:not(:is(:nth-of-type(1), :nth-of-type(2))) .product__price--proper {
    font-size: 1.6rem;
  }
}

.top-section__ranking-list .top-section__ranking--item:is(:nth-of-type(1), :nth-of-type(2)) .product__price--item:not(.product__price--proper) {
  font-size: 2.2rem;
}

@media (min-width: 768px) {
  .top-section__ranking-list .top-section__ranking--item:is(:nth-of-type(1), :nth-of-type(2)) .product__price--item:not(.product__price--proper) {
    font-size: 3rem;
  }
}

.top-section__ranking-list .top-section__ranking--item:not(:is(:nth-of-type(1), :nth-of-type(2))) .product__price--item:not(.product__price--proper) {
  font-size: 1.6rem;
}

@media (min-width: 768px) {
  .top-section__ranking-list .top-section__ranking--item:not(:is(:nth-of-type(1), :nth-of-type(2))) .product__price--item:not(.product__price--proper) {
    font-size: 2.2rem;
  }
}

.top-section__ranking-list .top-section__ranking--item:is(:nth-of-type(1), :nth-of-type(2)) .product__price--tax {
  font-size: 1rem;
}

@media (min-width: 768px) {
  .top-section__ranking-list .top-section__ranking--item:is(:nth-of-type(1), :nth-of-type(2)) .product__price--tax {
    font-size: 1.2rem;
  }
}

.top-section__ranking-list .top-section__ranking--item:is(:nth-of-type(1), :nth-of-type(2)) .product__price--item:not(.product__price--proper) .product__price--tax {
  font-size: 1.2rem;
}

@media (min-width: 768px) {
  .top-section__ranking-list .top-section__ranking--item:is(:nth-of-type(1), :nth-of-type(2)) .product__price--item:not(.product__price--proper) .product__price--tax {
    font-size: 1.6rem;
  }
}

.top-section__ranking-list .product__price--discountrate {
  font-size: 1rem;
  background-color: var(--color-project-accent);
  color: var(--color-white);
}

.top-section__ranking-list .top-section__ranking--item:is(:nth-of-type(1), :nth-of-type(2)) .product__price--discountrate {
  font-size: 1.1rem;
}

@media (min-width: 768px) {
  .top-section__ranking-list .top-section__ranking--item:is(:nth-of-type(1), :nth-of-type(2)) .product__price--discountrate {
    font-size: 1.5rem;
  }
}

.top-section__ranking-list .top-section__ranking--item:not(:is(:nth-of-type(1), :nth-of-type(2))) .product__price--discountrate {
  font-size: 1rem;
}

@media (min-width: 768px) {
  .top-section__ranking-list .top-section__ranking--item:not(:is(:nth-of-type(1), :nth-of-type(2))) .product__price--discountrate {
    font-size: 1.2rem;
  }
}




/* Object - Utility */

.u-todo {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: .5em;

  width: fit-content;
  margin-block: 1em;

  font-size: 1.4rem;
  font-weight: var(--fw-bold);

  &::before {
    content: "TODO";

    display: grid;
    place-content: center;

    padding: .25em .5em;
    background-color: var(--color-emphasis);
    border-radius: .4em;

    color: var(--color-white);
    font-size: 1.1rem;
    letter-spacing: .1em;
    line-height: 1;
  }
}