@charset "utf-8";

/*-------------------------------------------- ページ内共通 */

@media screen and (max-width: 767px) {
  .slick-dots {
    bottom: -45px;
    left: 50%;
    position: absolute;
    text-align: left;
    transform: translateX(-50%);
    width: auto;
  }
  .slick-dots li {
    height: 35px;
    margin: 0 2px;
  }
  .slick-dots li button:before {
    background-color: transparent;
    border: 1px solid #21201F;
    border-radius: 50%;
    color: transparent;
    content: '';
    font-size: 0;
    height: 9px;
    left: 8px;
    opacity: 1;
    top: 11px;
    width: 9px;
  }
  .slick-dots li.slick-active button:before {
    background-color: #21201F;
    opacity: 1;
  }

  /* Slick SEO対策 */
  .index-kv-banner-list > .index-kv-banner-list__item:not(:first-of-type){
    display: none;
  }
}

#toTop {
  display: none;
}
.index {
  color: var(--text-main-color);
  font-family: "neue-haas-grotesk-display", "Yu Gothic Pr6N M","YuGothic","Yu Gothic Medium", sans-serif;
  font-feature-settings: "palt", "ss01", "ss02";
  font-weight: 400;
  overflow-x: hidden;
  position: relative;
  z-index: 0;
}
.index-headline {
  color: var(--text-main-color);
  letter-spacing: var(--default-letter-spacing-en);
  line-height: 1.0;
  margin-bottom: 0;
  margin-top: 0;
}
@media screen and (min-width: 768px) {
  .index-headline {
    font-size: 20px;
  }
}
@media screen and (max-width: 767px) {
  .index-headline {
    font-size: 18px;
  }
}

/*-------------------------------------------- KV */

.index-kv,
.index-kv-main,
.index-kv-banner-list,
.index-kv-banner-list__item {
  position: relative;
  z-index: 0;
}
.index-kv-main::before,
.index-kv-banner-list__item::before {
  content: '';
  display: block;
  position: relative;
  width: 100%;
  z-index: 2;
}
.index-kv-main.is-active::before,
.index-kv-banner-list__item.is-active::before {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s;
  transition-delay: .05s;
}
.index-kv-main::before {
  background-color: var(--base-color);
}
.index-kv-banner-list__item:nth-of-type(1)::before {
  background-color: #e3e0d5;
}
.index-kv-banner-list__item:nth-of-type(2)::before {
  background-color: #ebe7dd;
}
@keyframes loadingVertical {
  0%{
    top: 0;
  }
  100%{
    top: 400%;
  }
}
@keyframes loadingHorizontal {
  0%{
    left: 0;
  }
  100%{
    left: 400%;
  }
}
.index-kv-banner-list__image-wrap {
  display: block;
  pointer-events: none;
  position: relative;
  z-index: 0;
}
.index-kv-main__image,
.index-kv-banner-list__image {
  display: block;
  pointer-events: none;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .index-kv-main__image {
    aspect-ratio: 75 / 92;
  }
  .index-kv-banner-list__image {
    aspect-ratio: 75 / 46;
  }
}
@media screen and (max-width: 767px) {
  .index-kv-banner-list__image {
    aspect-ratio: 1 / 1;
  }
}
.index-kv-main__text,
.index-kv-banner-list__text-wrap {
  position: absolute;
  z-index: 1;
}
.index-kv-main__text {
  left: 50%;
  letter-spacing: .12em;
  line-height: 1.6296;
  text-align: center;
  transform: translateX(-50%);
  white-space: nowrap;
}
.index-kv-main__image-wrap,
.index-kv-banner-list__link {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 0;
}
.index-kv-banner-list {
  margin-bottom: 0;
}
.index-kv-banner-list__link {
  color: inherit;
}
.index-kv-banner-list__more-text {
  display: block;
}
.index-kv-banner-list__more-text {
  display: table;
}
.index-kv-main__text,
.index-kv-banner-list__headline,
.index-kv-banner-list__text,
.index-kv-banner-list__more-text {
  color: var(--text-main-color);
}
.index-kv-banner-list__headline,
.index-kv-banner-list__text,
.index-kv-banner-list__more-text {
  letter-spacing: var(--default-letter-spacing-en);
}
.index-kv-main__text--white,
.index-kv-banner-list__headline--white,
.index-kv-banner-list__text--white,
.index-kv-banner-list__more-text--white {
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media screen and (min-width: 768px) {
  .index-kv {
    display: flex;
  }
  .index-kv-main,
  .index-kv-banner-list {
    width: 50%;
  }
  .index-kv-banner-list__link:hover .index-kv-banner-list__more-text {
    text-decoration: none;
  }
  .index-kv-main::before {
    padding-top: 122.6667%;
  }
  .index-kv-banner-list__item::before {
    padding-top: 61.3334%;
  }
  .index-kv-banner-list__item::after {
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-name: loadingHorizontal;
    animation-timing-function: linear;
    background: linear-gradient(90deg, transparent, var(--foundation-color-gray), transparent);
    height: 100%;
    left: -100%;
    transform: translateX(-100%);
    top: 0;
    width: 300%;
  }
  .index-kv-main__text {
    bottom: calc(3.5% + 7px);
    font-size: 26px;
    margin-bottom: 0;
  }
  .index-kv-banner-list__text-wrap {
    bottom: calc(7% + 5px);
    left: 5.3333%;
  }
  .index-kv-banner-list__headline {
    font-size: 13px;
    margin: 0;
  }
  .index-kv-banner-list__text {
    font-size: 18px;
    margin: 0;
  }
  .index-kv-banner-list__more-text {
    font-size: 13px;
    margin: 13px 0 0;
    text-decoration: underline;
  }
  .index-kv-main__text--black-pc,
  .index-kv-banner-list__headline--black-pc,
  .index-kv-banner-list__text--black-pc,
  .index-kv-banner-list__more-text--black-pc {
    color: var(--text-main-color);
  }
  .index-kv-main__text--white-pc,
  .index-kv-banner-list__headline--white-pc,
  .index-kv-banner-list__text--white-pc,
  .index-kv-banner-list__more-text--white-pc {
    color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}
@media screen and (max-width: 767px) {
  .index-kv-main::before {
    padding-top: 133.3334%;
  }
  .index-kv-banner-list__item::before {
    padding-top: 100%;
  }
  .index-kv-banner-list__item::after {
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-name: loadingVertical;
    animation-timing-function: linear;
    background: linear-gradient(transparent, var(--foundation-color-gray), transparent);
    height: 300%;
    left: 0;
    top: 0;
    transform: translateY(-100%);
    width: 100%;
  }
  .index-kv-banner-list img{
    width: 100%;
    object-fit: cover;
  }
  .index-kv-main__text {
    bottom: 4.5%;
    font-size: calc(2vw + 11px);
  }
  .index-kv-banner-list__text-wrap {
    bottom: 7%;
    left: 5.3333%;
  }
  .index-kv-banner-list__headline {
    font-size: 12px;
    margin: 0;
  }
  .index-kv-banner-list__text {
    font-size: 17px;
    margin: 0;
  }
  .index-kv-banner-list__more-text {
    font-size: 12px;
    margin: 11px 0 0;
    text-decoration: underline;
  }
  .index-kv-main__text--black-sp,
  .index-kv-banner-list__headline--black-sp,
  .index-kv-banner-list__text--black-sp,
  .index-kv-banner-list__more-text--black-sp {
    color: var(--text-main-color);
  }
  .index-kv-main__text--white-sp,
  .index-kv-banner-list__headline--white-sp,
  .index-kv-banner-list__text--white-sp,
  .index-kv-banner-list__more-text--white-sp {
    color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/*-------------------------------------------- Product */

.index-product-category {
  position: relative;
  z-index: 0;
}
.index-product-category-headline {
  display: table;
}
.index-product-category-diamond-propose-link {
  color: inherit;
  display: block;
  position: relative;
  z-index: 0;
}
@media screen and (min-width: 768px) {
  .index-product-category {
    margin-top: 10%;
  }
  .index-product-category-headline {
    left: 8.3333%;
    position: absolute;
    top: 0;
    z-index: 1;
  }
  .index-product-category-diamond-propose-link {
    margin: 10% auto 0;
    width: 61.6666%;
  }
  .index-product-category-diamond-propose-link:hover .index-product-category-diamond-propose-link__label-ja {
    text-decoration: none;
  }
  .index-product-category-diamond-propose-link__label {
    color: var(--text-main-color);
    left: 8.8235%;
    margin: 0;
    position: absolute;
    top: 51%;
    transform: translateY(-50%);
    z-index: 1;
  }
  .index-product-category-diamond-propose-link__label-en {
    display: block;
    font-size: 22px;
    letter-spacing: var(--default-letter-spacing-en);
  }
  .index-product-category-diamond-propose-link__label-ja {
    display: block;
    font-size: 11px;
    letter-spacing: var(--default-letter-spacing-ja);
    margin-top: 6px;
    text-decoration: underline;
  }
  .index-product-category-diamond-propose-link__image-wrap {
    position: relative;
    z-index: 0;
  }
  .index-product-category-diamond-propose-link__image {
    display: block;
    pointer-events: none;
    width: 100%;
    aspect-ratio: 45 / 17;
  }
}
@media screen and (max-width: 767px) {
  .index-product-category {
    margin-top: calc(8vw + 45px);
  }
  .index-product-category-headline {
    padding-left: 5.3333%;
  }
  .index-product-category-diamond-propose-link {
    margin: calc(4vw + 30px) 5.3333% 0;
  }
  .index-product-category-diamond-propose-link:hover,
  .index-product-category-diamond-propose-link:focus {
    background-color: transparent;
    color: var(--text-main-color);
  }
  .index-product-category-diamond-propose-link__label {
    color: var(--text-main-color);
    left: 8.8235%;
    margin: 0;
    position: absolute;
    top: 51%;
    transform: translateY(-50%);
    z-index: 1;
  }
  .index-product-category-diamond-propose-link__label-en {
    display: block;
    font-size: 14px;
    letter-spacing: var(--default-letter-spacing-en);
  }
  .index-product-category-diamond-propose-link__label-ja {
    display: block;
    font-size: 10px;
    letter-spacing: var(--default-letter-spacing-ja);
    margin-top: 1px;
    text-decoration: underline;
  }
  .index-product-category-diamond-propose-link__image-wrap {
    position: relative;
    z-index: 0;
  }
  .index-product-category-diamond-propose-link__image {
    display: block;
    pointer-events: none;
    width: 100%;
    aspect-ratio: 45 / 17;
  }
}

/*-------------------------------------------- Showroom */

/* Slick SEO対策 */
.index-showroom-image-list > .index-showroom-image-list__item:not(:first-of-type){
  display: none;
}


.index-showroom {
  display: flex;
  position: relative;
  z-index: 0;
}
.index-showroom-image-list__image {
  display: block;
  pointer-events: none;
  width: 100%;
}
.index-showroom-text-wrap {
  order: 2;
}
.index-showroom-image-list {
  margin-bottom: 0;
  order: 1;
  pointer-events: none;
}
.index-showroom-text {
  letter-spacing: var(--default-letter-spacing-ja);
  line-height: 1.95;
}
@media screen and (min-width: 768px) {
  .index-showroom {
    align-items: center;
    margin-top: 10%;
  }
  .index-showroom-text-wrap {
    margin-left: 11.6666%;
  }
  .index-showroom-text {
    font-size: 13px;
    margin: 21px 0 0;
  }
  .index-showroom-link {
    margin-top: 27px;
  }
  .index-showroom-image-list {
    width: 50%;
  }
}
@media screen and (max-width: 767px) {
  .index-showroom {
    flex-wrap: wrap;
    margin-top: calc(8vw + 45px);
  }
  .index-showroom-text-wrap {
    margin-top: calc(4vw + 30px);
    padding: 0 5.3333%;
    width: 100%;
  }
  .index-showroom-text {
    font-size: 11px;
    margin: 16px 0 0;
  }
  .index-showroom-link {
    margin-top: 23px;
  }
  .index-showroom-image-list {
    width: 100%;
  }
}

/*-------------------------------------------- Banner */

.index-banner-link {
  display: block;
  color: inherit;
  position: relative;
  z-index: 0;
}
.index-banner-link:hover,
.index-banner-link:focus{
  color: var(--text-main-color);
}
.index-banner-link-text-wrap {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
.index-banner-link__headline {
  color: #fff;
  letter-spacing: var(--default-letter-spacing-en);
  line-height: 1.2;
  margin: 0;
  text-align: center;
}
.index-banner-link__date {
  color: #fff;
  display: block;
  letter-spacing: .08em;
  text-align: center;
}
.index-banner-link__image-wrap {
  position: relative;
  z-index: 0;
}
.index-banner-link__image {
  display: block;
  pointer-events: none;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .index-banner-link {
    margin: 10% auto 0;
    width: 61.6666%;
  }
  .index-banner-link-text-wrap {
    bottom: 13%;
  }
  .index-banner-link-text-wrap--up-position {
    bottom: 21.5%;
  }
  .index-banner-link__headline {
    font-size: 28px;
  }
  .index-banner-link__date {
    font-size: 13px;
    margin-top: 2px;
  }
}
@media screen and (max-width: 767px) {
  .index-banner-link {
    margin: calc(8vw + 41px) auto 0;
    width: calc(100% - 5.3333% * 2);
  }
  .index-banner-link-text-wrap {
    bottom: 10%;
    width: 100%;
  }
  .index-banner-link__headline {
    font-size: 17px;
  }
  .index-banner-link__date {
    font-size: 10px;
    margin-top: -2px;
  }
}

/*-------------------------------------------- BRILLIANCE+ Story */

.index-story {
  background-color: var(--base-color);
  display: flex;
  position: relative;
  z-index: 0;
}
.index-story-text-wrap {
  text-align: center;
}
.index-story-headline > span {
  letter-spacing: .0875em;
}
.index-story-text {
  letter-spacing: .11em;
  line-height: 2;
  margin-bottom: 0;
}
.index-story-text > span {
  display: block;
}
.index-story-image {
  display: block;
  pointer-events: none;
  width: 100%;
}
.index-story-sub-link {
  letter-spacing: var(--default-letter-spacing-ja);
}
@media screen and (min-width: 768px) {
  .index-story {
    align-items: center;
  }
  .index-story-text-wrap {
    width: 40%;
  }
  .index-story-headline {
    font-size: 24px;
  }
  .index-story-text {
    font-size: 14px;
    margin-top: 33px;
  }
  .index-story-text > span:nth-of-type(n+2) {
    margin-top: 20px;
  }
  .index-story-main-link {
    margin-top: 35px;
  }
  .index-story-sub-link {
    margin-top: 14px;
  }
  .index-story-image-wrap {
    width: 60%;
  }
}
@media screen and (max-width: 767px) {
  .index-story {
    flex-wrap: wrap;
    padding: calc(8vw + 45px) 5.3333%;
  }
  .index-story-text-wrap {
    margin-top: 45px;
    order: 2;
    width: 100%;
  }
  .index-story-image-wrap {
    order: 1;
    padding: 65px 5.3333% 0;
    width: 100%;
  }
  .index-story-headline {
    font-size: 18px;
    left: 50%;
    position: absolute;
    top: calc(8vw + 45px);
    transform: translateX(-50%);
  }
  .index-story-text {
    font-size: 13px;
  }
  .index-story-text > span:nth-of-type(n+2) {
    margin-top: 20px;
  }
  .index-story-main-link {
    margin-top: 44px;
  }
  .index-story-sub-link {
    margin-top: 17px;
  }
}

/*-------------------------------------------- BHリスト */

.index-bh-list {
  border-top: 1px solid var(--text-main-color);
}
@media screen and (min-width: 768px) {
  .index-bh-list {
    padding-top: 8.75%;
  }
}
@media screen and (max-width: 767px) {
  .index-bh-list {
    padding-top: calc(8vw + 39px);
  }
}
/*-------------------------------------------- 新着お知らせ */

.index-information-list {
  border-top: 1px solid var(--text-main-color);
  margin-bottom: 0;
  position: relative;
  z-index: 0;
}
.index-information-list__item {
  border-bottom: 1px solid var(--text-main-color);
}
.index-information-list__link, .index-information-list__nonlink {
  color: inherit;
  display: block;
  position: relative;
  z-index: 0;
}
.index-information-list__link:hover,
.index-information-list__link:focus {
  color: inherit;
}
.index-information-detail {
  margin-bottom: 0;
}
.index-information-detail__text,
.index-information-detail__head {
  letter-spacing: var(--default-letter-spacing-ja);
  margin-bottom: 0;
}
.index-information-list-link {
  letter-spacing: var(--default-letter-spacing-ja);
}
.index-information-detail__date {
  letter-spacing: .085em;
}
@media screen and (min-width: 768px) {
  .index-information-list-wrap {
    margin: 8.3333% auto 0;
    width: 56.6666%;
  }
  .index-information-list__link, .index-information-list__nonlink {
    padding: 24px 0 23px;
  }
  .index-information-list__link:hover .index-information-detail__text {
    text-decoration: underline;
  }
  .index-information-detail {
    display: flex;
  }
  .index-information-detail__head {
    font-size: 12px;
    min-width: 180px;
    width: 27.85%;
  }
  .index-information-detail__text {
    font-size: 12px;
    width: auto;
    max-width: 72%;
  }
  .index-information-list-link {
    margin-top: 30px;
  }
}
@media screen and (max-width: 767px) {
  .index-information-list-wrap {
    margin: calc(8vw + 39px) auto 0;
    width: calc(100% - 5.3333% * 2);
  }
  .index-information-list__link, .index-information-list__nonlink {
    padding: 24px 0 23px;
  }
  .index-information-detail__head {
    font-size: 11px;
    margin-bottom: 8px;
  }
  .index-information-detail__text {
    font-size: 12px;
  }
  .index-information-list-link {
    margin-top: 30px;
  }
}