@charset "utf-8";

/* ==========================================================================
   トップページ専用
   寸法・時序は参照サイトの実測値に準拠
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.lcl-hero {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  overflow: hidden;
}

/* 背景メディア：inset:-100% + margin:auto で常に中央を保ったまま被覆する */
.lcl-hero .lcl-hero__video {
  position: absolute;
  z-index: -1;
  inset: -100%;
  min-width: 100%;
  min-height: 100%;
  margin: auto;
  object-fit: cover;
}

/* 動画読み込み前の下地のみ。映像自体が暗いため CSS 側で暗くする処理は入れない */
.lcl-hero .lcl-hero__fallback {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: #10141a;
}

/* 映像は明暗が動くため、タイトルが常に読めるだけの薄い覆いを一枚だけ置く。
   画像自体を暗くする処理はしない（映像の質感を殺さないため） */
.lcl-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* 自然の映像は総じて明るく、実測でタイトル位置の輝度が 127〜156 あった
     （白文字を載せるなら 110 以下が目安）。映像全体を暗くすると質感が死ぬので、
     タイトル周りだけを広く・柔らかく落とす。 */
  background: radial-gradient(
      ellipse 72% 56% at 50% 47%,
      rgba(10, 14, 20, 0.56) 0%,
      rgba(10, 14, 20, 0.34) 45%,
      rgba(10, 14, 20, 0.1) 75%,
      rgba(10, 14, 20, 0) 100%
    ),
    linear-gradient(180deg, rgba(10, 14, 20, 0.34) 0%, rgba(10, 14, 20, 0) 22%);
}
.lcl-hero .lcl-hero__ttl,
.lcl-hero .lcl-hero__scroll {
  position: relative;
  z-index: 1;
}

.lcl-hero .lcl-hero__ttl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  width: 59rem;
  color: var(--c-white);
  text-align: center;
  /* 実写背景の上でも可読性を保つ（大きな文字が濁らないよう控えめに） */
  text-shadow: 0 0.1rem 0.8rem rgba(10, 14, 20, 0.45);
}
@media screen and (max-width: 1023px) {
  .lcl-hero .lcl-hero__ttl {
    width: 32.8rem;
    gap: 2rem;
  }
}
.lcl-hero .lcl-hero__mark {
  display: block;
  width: 8.5rem;
}
@media screen and (max-width: 1023px) {
  .lcl-hero .lcl-hero__mark {
    width: 6.5rem;
  }
}
.lcl-hero .lcl-hero__ja {
  display: block;
  font-size: max(6.4rem, 10px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
}
@media screen and (max-width: 1023px) {
  .lcl-hero .lcl-hero__ja {
    font-size: max(3.8rem, 10px);
  }
}
.lcl-hero .lcl-hero__en {
  display: block;
  font-family: var(--f-en);
  font-weight: 500;
  font-size: max(1.4rem, 10px);
  line-height: 1;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  opacity: 0.85;
}
@media screen and (max-width: 1023px) {
  .lcl-hero .lcl-hero__en {
    font-size: max(1.1rem, 10px);
    letter-spacing: 0.3em;
    text-indent: 0.3em;
  }
}

/* hero 内要素の初期表示アニメーション */
.lcl-hero .lcl-hero__mark,
.lcl-hero .lcl-hero__ja,
.lcl-hero .lcl-hero__en {
  opacity: 0;
  translate: 0 2rem;
  transition: opacity 1.2s ease, translate 1.2s var(--e-main);
}
.is-loaded .lcl-hero .lcl-hero__mark { opacity: 1; translate: 0; transition-delay: 0.2s; }
.is-loaded .lcl-hero .lcl-hero__ja { opacity: 1; translate: 0; transition-delay: 0.35s; }
.is-loaded .lcl-hero .lcl-hero__en { opacity: 0.85; translate: 0; transition-delay: 0.5s; }

/* スクロール誘導 */
.lcl-hero .lcl-hero__scroll {
  position: absolute;
  bottom: 3rem;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: fit-content;
  margin-inline: auto;
  font-family: var(--f-en);
  font-weight: 500;
  font-size: max(1.1rem, 10px);
  letter-spacing: 0.16em;
  color: var(--c-white);
}
.lcl-hero .lcl-hero__scroll::after {
  content: "";
  display: block;
  width: 0.1rem;
  height: 6rem;
  background-color: rgba(255, 255, 255, 0.4);
  overflow: hidden;
}
.lcl-hero .lcl-hero__scroll::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 0.1rem;
  height: 6rem;
  margin-inline: auto;
  background-color: var(--c-white);
  transform-origin: top center;
  animation: kf-scrollline 2.4s var(--e-main) infinite;
}

@keyframes kf-scrollline {
  0% { scale: 1 0; transform-origin: top center; }
  45% { scale: 1 1; transform-origin: top center; }
  55% { scale: 1 1; transform-origin: bottom center; }
  100% { scale: 1 0; transform-origin: bottom center; }
}

/* --------------------------------------------------------------------------
   Philosophy
   -------------------------------------------------------------------------- */
.lcl-philosophy {
  position: relative;
  z-index: 1;
  width: 83rem;
  margin-inline: auto;
  padding-block: 26rem 16rem;
}
@media screen and (max-width: 1023px) {
  .lcl-philosophy {
    width: 29.5rem;
    padding-block: 26rem 12rem;
  }
}


.lcl-philosophy .lcl-philosophy__txt {
  font-size: max(1.8rem, 10px);
  line-height: 2.4;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 1023px) {
  .lcl-philosophy .lcl-philosophy__txt {
    font-size: max(1.4rem, 10px);
  }
}

.lcl-philosophy .lcl-philosophy__span {
  display: block;
}

/* 一文ずつの浮上（0.1s 刻み） */
.lcl-philosophy .lcl-philosophy__txt.scr-anin .lcl-philosophy__span {
  opacity: 0;
  translate: 2rem;
  transition: opacity 0.8s ease, translate 1.2s ease;
}
.lcl-philosophy .lcl-philosophy__txt.scr-anin .lcl-philosophy__span:nth-of-type(1) { transition-delay: 0s; }
.lcl-philosophy .lcl-philosophy__txt.scr-anin .lcl-philosophy__span:nth-of-type(2) { transition-delay: 0.1s; }
.lcl-philosophy .lcl-philosophy__txt.scr-anin .lcl-philosophy__span:nth-of-type(3) { transition-delay: 0.2s; }
.lcl-philosophy .lcl-philosophy__txt.scr-anin .lcl-philosophy__span:nth-of-type(4) { transition-delay: 0.3s; }
.lcl-philosophy .lcl-philosophy__txt.scr-anin .lcl-philosophy__span:nth-of-type(5) { transition-delay: 0.4s; }
.lcl-philosophy .lcl-philosophy__txt.scr-anin .lcl-philosophy__span:nth-of-type(6) { transition-delay: 0.5s; }
.lcl-philosophy .lcl-philosophy__txt.scr-anin .lcl-philosophy__span:nth-of-type(7) { transition-delay: 0.6s; }
.lcl-philosophy .lcl-philosophy__txt.scr-anin .lcl-philosophy__span:nth-of-type(8) { transition-delay: 0.7s; }
.lcl-philosophy .lcl-philosophy__txt.scr-anin .lcl-philosophy__span:nth-of-type(9) { transition-delay: 0.8s; }
.lcl-philosophy .lcl-philosophy__txt.scr-anin .lcl-philosophy__span:nth-of-type(10) { transition-delay: 0.9s; }
.lcl-philosophy .lcl-philosophy__txt.scr-anin--on .lcl-philosophy__span {
  opacity: 1;
  translate: 0;
}

.lcl-philosophy .lcl-philosophy__copy {
  margin-top: 3.8rem;
  font-size: max(3.5rem, 10px);
  line-height: 1.7;
  letter-spacing: 0;
  font-weight: 700;
}
@media screen and (max-width: 1023px) {
  .lcl-philosophy .lcl-philosophy__copy {
    margin-top: 3rem;
    font-size: max(2.8rem, 10px);
  }
}
.lcl-philosophy .lcl-philosophy__copy.scr-anin {
  opacity: 0;
  translate: 0 2rem;
  transition: opacity 0.8s ease, translate 0.8s ease;
}
.lcl-philosophy .lcl-philosophy__copy.scr-anin--on {
  opacity: 1;
  translate: 0;
}

/* --------------------------------------------------------------------------
   Link area（2 分割の大バナー）
   -------------------------------------------------------------------------- */
.lcl-linkarea {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
}
@media screen and (max-width: 1023px) {
  .lcl-linkarea {
    display: block;
  }
}

.lcl-linkarea .lcl-linkarea__link {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  flex-direction: column;
  width: 50%;
  min-height: 72rem;
  padding-inline: 6.9230769231% 18.4615384615%;
  color: var(--c-white);
  overflow: hidden;
}
@media screen and (min-width: 1024px) and (max-width: 1280px) {
  .lcl-linkarea .lcl-linkarea__link {
    padding-inline: 7rem 20rem;
  }
}
@media screen and (max-width: 1023px) {
  .lcl-linkarea .lcl-linkarea__link {
    width: 100%;
    min-height: 32rem;
    padding-inline: 2.7rem;
  }
}

@media (any-hover: hover) {
  .lcl-linkarea .lcl-linkarea__link:hover .lcl-linkarea__bg {
    scale: 1.1;
  }
  .lcl-linkarea .lcl-linkarea__link:hover .lcl-linkarea__bg img {
    opacity: 0.6;
  }
  .lcl-linkarea .lcl-linkarea__link:hover .lcl-linkarea__ico {
    background-color: var(--c-white);
    translate: 1.5rem;
  }
  .lcl-linkarea .lcl-linkarea__link:hover .lcl-linkarea__ico .ico_svg .svg-path {
    fill: var(--c-text);
  }
}

.lcl-linkarea .lcl-linkarea__bg {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--c-text);
  transition: scale 0.6s var(--e-main);
}
.lcl-linkarea .lcl-linkarea__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.4s ease, scale 1s var(--e-img);
}

/* 参照サイトは画像側に暗部が焼き込まれているが、自社写真は素のままなので
   文字が乗る左側だけを階調で落とす。写真全体は暗くしない。 */
.lcl-linkarea .lcl-linkarea__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    95deg,
    rgba(12, 16, 22, 0.72) 0%,
    rgba(12, 16, 22, 0.52) 38%,
    rgba(12, 16, 22, 0.18) 72%,
    rgba(12, 16, 22, 0.06) 100%
  );
}
@media screen and (max-width: 1023px) {
  .lcl-linkarea .lcl-linkarea__bg::after {
    background: linear-gradient(
      180deg,
      rgba(12, 16, 22, 0.62) 0%,
      rgba(12, 16, 22, 0.42) 55%,
      rgba(12, 16, 22, 0.2) 100%
    );
  }
}

.lcl-linkarea .lcl-linkarea__en {
  font-family: var(--f-en);
  font-weight: 500;
  font-size: max(1.4rem, 10px);
  line-height: 1.2;
  letter-spacing: 0.1em;
  color: #646e81;
  mix-blend-mode: plus-lighter;
}
@media screen and (max-width: 1023px) {
  .lcl-linkarea .lcl-linkarea__en {
    font-size: max(1.2rem, 10px);
  }
}

.lcl-linkarea .lcl-linkarea__ttl {
  margin-top: 3rem;
  font-size: max(3.4rem, 10px);
  line-height: 1.4;
  letter-spacing: 0.05em;
  font-weight: 700;
}
@media screen and (max-width: 1023px) {
  .lcl-linkarea .lcl-linkarea__ttl {
    margin-top: 2rem;
    font-size: max(2.8rem, 10px);
  }
}

.lcl-linkarea .lcl-linkarea__txt {
  margin-top: 2.5rem;
  font-family: var(--f-body);
  font-size: max(1.4rem, 10px);
  line-height: 2;
}
@media screen and (max-width: 1023px) {
  .lcl-linkarea .lcl-linkarea__txt {
    margin-top: 1.5rem;
  }
}

.lcl-linkarea .lcl-linkarea__ico {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 12.3076923077%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 4rem;
  aspect-ratio: 1;
  margin: auto;
  border-radius: 50%;
  border: 0.1rem solid var(--c-white);
  transition: background-color 0.4s ease, opacity 0.8s 0.4s ease,
    translate 0.6s var(--e-main);
}
@media screen and (max-width: 1023px) {
  .lcl-linkarea .lcl-linkarea__ico {
    top: auto;
    bottom: 2.5rem;
    right: 2.5rem;
    width: 3.5rem;
  }
}
.lcl-linkarea .lcl-linkarea__ico .ico_svg {
  width: 0.8rem;
}
@media screen and (max-width: 1023px) {
  .lcl-linkarea .lcl-linkarea__ico .ico_svg {
    width: 0.7rem;
  }
}
.lcl-linkarea .lcl-linkarea__ico .ico_svg .svg-path {
  fill: var(--c-white);
}

/* 出現アニメーション */
.lcl-linkarea.scr-anin .lcl-linkarea__bg img {
  scale: 1.2;
}
.lcl-linkarea.scr-anin .lcl-linkarea__en,
.lcl-linkarea.scr-anin .lcl-linkarea__ttl,
.lcl-linkarea.scr-anin .lcl-linkarea__txt {
  opacity: 0;
  translate: 1.5rem;
  transition: opacity 0.8s 0.3s ease, translate 0.8s 0.3s ease;
}
.lcl-linkarea.scr-anin .lcl-linkarea__ttl {
  transition-delay: 0.4s;
}
.lcl-linkarea.scr-anin .lcl-linkarea__txt {
  transition-delay: 0.5s;
}
.lcl-linkarea.scr-anin .lcl-linkarea__ico {
  opacity: 0;
}
.lcl-linkarea.scr-anin--on .lcl-linkarea__bg img {
  scale: 1;
}
.lcl-linkarea.scr-anin--on .lcl-linkarea__en,
.lcl-linkarea.scr-anin--on .lcl-linkarea__ttl,
.lcl-linkarea.scr-anin--on .lcl-linkarea__txt {
  opacity: 1;
  translate: 0;
}
.lcl-linkarea.scr-anin--on .lcl-linkarea__ico {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   News
   -------------------------------------------------------------------------- */
.lcl-news {
  margin-top: 0;
  padding-block: 16rem;
}
@media screen and (max-width: 1023px) {
  .lcl-news {
    padding-block: 12rem;
  }
}
.lcl-news .news01__in {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  width: 100%;
}
@media screen and (max-width: 1023px) {
  .lcl-news .news01__in {
    display: block;
  }
}
.lcl-news .news01__head {
  width: 30rem;
}
@media screen and (max-width: 1023px) {
  .lcl-news .news01__head {
    width: 100%;
  }
}
.lcl-news .news01__body {
  width: 76rem;
}
@media screen and (max-width: 1023px) {
  .lcl-news .news01__body {
    width: 100%;
    margin-top: 4rem;
  }
}
.lcl-news .news01__more {
  margin-top: 4rem;
}