@charset 'utf-8';
/* ----------------------------------------
fv
---------------------------------------- */
.fv {
  position: relative;
  width: 100%;
  height: 70vh;
  overflow: hidden;
  color: var(--color-white);
}

.fv__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.fv__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.fv__bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fv__inner {
  z-index: 1;
  display: flex;
  align-items: center;
}

.fv__content {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  padding: 3rem 2rem;
  box-sizing: border-box;
}

.fv__content-bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.fv__content-body {
  position: relative;
  z-index: 1;
  color: #fff;
}

.fv__sub {
  margin-bottom: 16px;
  font-size: 2rem;
  font-weight: 100;
  letter-spacing: 0.12em;
}

.fv__title {
  font-size: clamp(2rem, 8vw, 4rem);
  font-family: "Montserrat", sans-serif;
  font-weight: 200;
}

.fv__btn {
  margin-top: 32px;
}

@media screen and (max-width: 580px) {
  .fv {
    height: 50vh;
  }

  .fv__content {
    padding: 2rem 1rem;
  }

  .fv__title {
    font-size: 6cqw;
  }

  .fv__sub {
    margin-bottom: 16px;
    font-size: 6.5cqw;
  }
}
/* ----------------------------------------
featured-stock
---------------------------------------- */
.featured-stock {
  padding-bottom: 10rem;
  background: #eee;
}

.featured-stock__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  margin-top: 5rem;
}

.stock-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.stock-card__img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.stock-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.stock-card__link:hover .stock-card__img img {
  transform: scale(1.04);
}

.stock-card__body {
  padding: 1rem 0.5rem 0;
}

.stock-card__title {
  font-size: 1.15rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  /* line-height: 1.5; */
}

.stock-card__meta {
  margin-top: 0.25rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  color: #7f7f7f;
}

.stock-card__price {
  margin-top: 0.25rem;
  color: #111;
  font-size: 1.5rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
}

@media screen and (max-width: 900px) {
  .featured-stock {
    padding-bottom: 7rem;
  }

  .featured-stock__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }

  .stock-card__title {
    font-size: 2.5cqw;
  }

  .stock-card__meta {
    font-size: 2cqw;
  }

  .stock-card__price {
    font-size: 3cqw;
  }
}

@media screen and (max-width: 580px) {
  .featured-stock {
    padding-bottom: 5rem;
  }

  .featured-stock__grid {
    gap: 1rem;
    margin-top: 3rem;
  }

  .stock-card__body {
    padding: 0.5rem 0.5rem 0;
  }
}

/* ----------------------------------------
philosophy
---------------------------------------- */
.philosophy {
  margin-top: 5rem;
}

.philosophy__content {
  display: flex;
  align-items: stretch;
  flex-direction: row-reverse;
  gap: 40px;
  background: #1F1F1F;
  height: 550px;
}

/* 左テキスト */
.philosophy__textWrap {
  padding: 3rem 0 3rem 3rem;
  width: 45%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center; 
}

.philosophy__text {
  margin-top: 2rem;
  color: #fff;
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.75;
}

/* 右画像 */
.philosophy__img {
  position: relative;
  width: 60%;
  height: 100%;
}

.philosophy__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ←ここがキモ（グラデーション） */
.philosophy__img::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    #1F1F1F 0%,
    rgba(31,31,31,0.9) 5%,
    rgba(31,31,31,0.5) 25%,
    rgba(31,31,31,0) 45%
  );
}

@media screen and (max-width: 900px) {
  .philosophy__content {
    display: block;
    height: auto;
    background: transparent;
  }

  /* 左テキスト */
  .philosophy__textWrap {
    padding: 3rem;
    width: 100%;
    display: block;
    background: #000;
    box-sizing: border-box;
  }

  .philosophy__text {
    font-size: 2.5cqw;
  }

  /* 右画像 */
  .philosophy__img {
    position: relative;
    width: 100%;
    height: 400px;
  }

  .philosophy__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* ←ここがキモ（グラデーション） */
  .philosophy__img::before {
    background: none;
  }
}

@media screen and (max-width: 580px) {
  .philosophy {
    margin-top: 0;
  }

  .philosophy__text {
    font-size: 3.5cqw;
  }


  .philosophy__img {
    position: relative;
    width: 100%;
    height: 300px;
  }
}

/* ----------------------------------------
features
---------------------------------------- */
.top-features {
  margin-top: 5rem;
}

.top-features__list {
  margin-top: 5rem;
}


.top-features__list article:nth-of-type(n + 2) {
  margin-top: 10rem;
}

.top-feature__inner {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  align-items: start;
}

/* 画像 */
.top-feature__img {
  position: relative;
  overflow: hidden;
  grid-column: 1 / 7;
  grid-row: 1;
  margin: 0;
  z-index: 1;
}

.top-feature__img img {
  display: block;
  width: 100%;
  height: 600px;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.05);
}

.top-feature__cover {
  position: absolute;
  inset: 0;
  background: #111;
  transform: scaleX(0);
  transform-origin: left center;
  z-index: 2;
  pointer-events: none;
}

/* テキストボックス全体 */
.top-feature__body {
  grid-column: 5 / -1;
  grid-row: 1;
  margin-top: 4rem;
  z-index: 0;
  display: flex; /* ←ここでoffset/contentを横並び */
  height: 600px;
  background: linear-gradient(90deg, #d9d9d9, #222);
}

/* 2段目だけ左右反転 */
.top-feature--reverse .top-feature__img {
  grid-column: 5 / -1;
}

.top-feature--reverse .top-feature__body {
  grid-column: 1 / 7;
}

.top-feature--reverse .top-feature__body {
  flex-direction: row-reverse;
}

/* 被り分 */
.feature__offset {
  width: 18%;
  flex-shrink: 0;
}

/* 有効領域 */
.feature__content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
}

/* テキストの最大幅 */
.content__inner {
  width: min(100%, 28rem);
  opacity: 0;
  transform: translateY(30px);
}

article:nth-of-type(1) .top-feature__body {
  background-image: linear-gradient(135deg, rgba(94, 94, 94, 1), rgba(0, 0, 0, 1) 77%);
}

article:nth-of-type(2) .top-feature__body {
   background-image: linear-gradient(45deg, rgba(93, 93, 93, 1), rgba(166, 166, 166, 1));
}

article:nth-of-type(3) .top-feature__body {
  background-image: linear-gradient(135deg, rgba(240, 240, 240, 1), rgba(151, 149, 149, 1));
}

.feature__offset {
  width: 33%;
}

.feature__content {
  width: 67%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content__inner {
  width: fit-content;
}

.top-feature__title {
  font-size: 1.25rem;
  color: #fff;
  letter-spacing: 15%;
}

.top-feature__catch {
  margin-top: 0.75rem;
  font-size: min(2.5cqw, 2rem);
  font-weight: 600;
  color: #fff;
  letter-spacing: 20%;
}

.top-feature__text {
  margin-top: 2rem;
  color: #fff;
  font-size: clamp(1rem, 1.5cqw, 1.25rem);
  font-weight: 300;
  line-height: 2;
  letter-spacing: 15%;
}

.feature__btn {
  margin-top: 3rem;
  text-align: center;
}

@media screen and (max-width: 900px) {
  .top-features__list article:nth-of-type(n + 2) {
    margin-top: 0;
  }

  .top-feature__inner {
    display: block;
  }

  .top-feature__img img {
    height: 500px;
  }

  .feature__offset {
    display: none;
  }

  /* テキストボックス全体 */
  .top-feature__body {
    margin-top: 0;
    display: flex;
    height: auto;
  }

  .feature__content {
    display: block;
    padding: 3rem;
  }

  .content__inner {
    margin: 0 auto;
    width: 60%;
  }

  article:nth-of-type(1) .top-feature__body {
    background-image: linear-gradient(225deg, rgba(94, 94, 94, 1), rgba(0, 0, 0, 1) 77%);
  }

  article:nth-of-type(3) .top-feature__body {
    background-image: linear-gradient(225deg, rgba(240, 240, 240, 1), rgba(151, 149, 149, 1));
  }

  .top-feature__title {
    font-size: 3.5cqw;
    color: #fff;
    letter-spacing: 15%;
  }

  .top-feature__catch {
    margin-top: 1.5rem;
    font-size: min(2.5cqw, 2rem);
    font-weight: 600;
    color: #fff;
    letter-spacing: 20%;
  }

  .feature__btn {
    margin-top: 2rem;
  }
}

@media screen and (max-width: 580px) {
  .top-features {
    margin-top: 3rem;
  }

  .top-features__list {
    margin-top: 3rem;
  }

  .top-feature__img img {
    height: 300px;
  }

  .feature__content {
    padding: 2rem;
  }

   .content__inner {
    width: 100%;
  }

  .top-feature__title {
    font-size: 5.5cqw;
    color: #fff;
    letter-spacing: 15%;
  }

  .top-feature__catch {
    margin-top: 1.5rem;
    font-size: 4cqw;
  }

  .top-feature__text {
    font-size: 3.5cqw;
  }
}

/* ----------------------------------------
showroom
---------------------------------------- */
.showroom {
  margin-top: 5rem;
}
.showroom__content {
  display: flex;
  align-items: stretch;
  gap: 40px;
  background: #1F1F1F;
  height: 550px;
}

.showroom__content-inner {
  width: fit-content;
}

/* 左テキスト */
.showroom__textWrap {
  padding: 3rem 0 3rem 3rem;
  width: 45%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center; 
}

.showroom__text {
  margin-top: 2rem;
  color: #fff;
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.75;
}

.showroom__btn {
  margin-top: 3rem;
  text-align: center;
}

/* 右画像 */
.showroom__img {
  position: relative;
  width: 60%;
  min-height: 400px;

}

.showroom__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ←ここがキモ（グラデーション） */
.showroom__img::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to left, /* ←逆 */
    #1F1F1F 0%,
    rgba(31,31,31,0.9) 5%,
    rgba(31,31,31,0.5) 25%,
    rgba(31,31,31,0) 45%
  );
}

@media screen and (max-width: 900px) {
  .showroom__content {
    display: block;
    background: transparent;
    height: auto;
  }

  .showroom__textWrap {
    padding: 3rem;
    width: 100%;
    display: block;
    background: #000;
    box-sizing: border-box;
  }

   .showroom__content-inner {
    margin: 0 auto;
  }

  .showroom .section-title__en,
  .showroom .section-title__ja {
    text-align: center;
  }

  .showroom__text {
    font-size: 2.5cqw;
    text-align: center;
  }

  /* 右画像 */
  .showroom__img {
    position: relative;
    width: 100%;
    height: 400px;
    min-height: 0;
  }

  .showroom__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* ←ここがキモ（グラデーション） */
  .showroom__img::before {
    background: none;
  }
}

@media screen and (max-width: 580px) {
  .showroom__img {
    position: relative;
    width: 100%;
    height: 300px;
  }

  .showroom__text {
    font-size: 3.5cqw;
  }
}

/* ----------------------------------------
news
---------------------------------------- */
.news__container {
  margin: 5rem auto 0;
  max-width: 1000px;
}

.card__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 2rem;
  margin: 0;
  padding: 0;
}

.hover__all {
  position: relative;
}

.card__link{
  display:block;
  cursor: pointer;
}

.card {
  width: 100%;
  margin-top: 20px;
}

.card__thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
}

.card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  transition: all .3s ease-in-out;
}

.card:hover figure img {
  transform: scale(1.05);
}

.card__body {
  margin-top: 0.5rem;
}

.news__ttl {
  margin-top: 0.5rem;
  color: var(--color-primary);
  font-size: 1rem;
  font-weight: 600;
}

.news__txt {
  margin-top: 0.5rem;
  color: var(--color-text-main);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
}

.data-box {
  margin-top: 0.5rem;
  color: var(--color-text-main);
  font-size: 0.8rem;
  font-weight: 600;
}

@media screen and (max-width: 900px) {
  .card__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
    gap: 30px;
  }
}

@media screen and (max-width: 580px) {
  .news__container {
    margin: 3rem auto 0;
  }

  .card__list {
    grid-template-columns: 1fr; /* 1列 */
    justify-items: center;      /* 中央配置 */
    gap: 1rem;                  /* card間の余白 */
  }

  .card {
    width: 90%;
  }

  .card__thumb {
    height: 250px
  }

  .data-box {
    font-size: 0.9rem;
  }

  .news__ttl {
    font-size: 4cqw;
  }

  .news__txt {
    font-size: 0.8rem;
  }

  .data-box {
    font-size: 0.65rem;
  }
}