/* front-page.css — TOP ページ
   Figma: 1627:50645。メインカラムは gap 40 / 上 56 / 下 80。MV だけ右に 64px はみ出して画面端に届く */

.front {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-40);
  padding: var(--space-56) 0 var(--space-80);
}

.front > * {
  width: 100%;
}

/* オープニング Figma: 1606:50652 ------------------------------------------- */
/* 白い全面オーバーレイ：マークが左から描かれる → 文字がフェードイン → 全体がフェードアウト */
.opening {
  --opening-mark-width: 20rem;                         /* 320px */
  --opening-mark-height: calc(211.197 / 16 * 1rem);
  /* タイムライン（motion.js の OPENING_* と揃える）：
     マーク描画 0〜1.6s → 文字 1.4s〜2.8s → 保持 → 3.6s からフェードアウト 1s */
  --opening-draw: 1.6s;
  --opening-text: 1s;
  --opening-text-delay: 1.4s;
  --opening-text-stagger: 0.4s;
  --opening-leave: 1s;

  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  color: var(--color-black);
  text-align: center;
}

/* 幕は header.php の先読みスクリプトが付ける html.has-opening で出す（ページが一瞬見えないように）。
   アニメーションは motion.js が .is-playing を付けてから始まる */
.js.has-opening .opening,
.js .opening.is-playing {
  display: flex;
}

.js .has-opening {
  overflow: hidden; /* 再生中はスクロールさせない */
}

.opening.is-leaving {
  opacity: 0;
  transition: opacity var(--opening-leave) var(--ease-in-out);
}

.opening__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
}

.opening__mark {
  width: var(--opening-mark-width);
  height: var(--opening-mark-height);
  clip-path: inset(0 100% 0 0);
}

.is-playing .opening__mark {
  animation: ic-draw var(--opening-draw) var(--ease-in-out) forwards;
}

.opening__title,
.opening__sub {
  margin: 0;
  opacity: 0;
  transform: translateY(var(--reveal-offset));
}

.opening__title {
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
}

.opening__sub {
  font-size: var(--font-size-h2-lead);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-hero-sub);
}

.is-playing .opening__title {
  animation: ic-fade-up var(--opening-text) var(--ease-out) var(--opening-text-delay) forwards;
}

.is-playing .opening__sub {
  animation: ic-fade-up var(--opening-text) var(--ease-out) calc(var(--opening-text-delay) + var(--opening-text-stagger)) forwards;
}

@keyframes ic-draw {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

@keyframes ic-fade-up {
  from { opacity: 0; transform: translateY(var(--reveal-offset)); }
  to   { opacity: 1; transform: none; }
}

/* MV ---------------------------------------------------------------------- */
/* 出現：写真が 1.05→1.0 にズームしながら、見出し→社名の順にフェードイン
   オープニングがあるときは、写真のズームはフェードアウトと同時（html.is-mv-zoom）、
   文字は消えきって少し待ってから（html.is-opened）。目で追えるようゆっくりめにする */
.js .front-mv__image img {
  transform: scale(var(--hover-zoom));
  transition: transform calc(var(--duration-slow) * 3) var(--ease-out);
}

.js .front-mv__title,
.js .front-mv__sub {
  opacity: 0;
  transform: translateY(var(--reveal-offset));
  transition:
    opacity var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
  transition-delay: 0.2s;
}

.js .front-mv__sub {
  transition-delay: 0.6s;
}

.js.is-mv-zoom .front-mv__image img,
.js.is-opened .front-mv__image img {
  transform: none;
}

.js.is-opened .front-mv__title,
.js.is-opened .front-mv__sub {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .front-mv__image img,
  .js .front-mv__title,
  .js .front-mv__sub {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.front-mv {
  --front-mv-bleed: calc(var(--site-gutter, var(--space-64)) + var(--site-side, 0px)); /* 右のはみ出し：左右余白＋大きな画面での余白（画面端まで）*/
  --front-mv-width: calc(100% + var(--front-mv-bleed)); /* 1440px 幅で 1064px */
  --front-mv-height: calc(598 / 16 * 1rem);

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-16);
  width: var(--front-mv-width);
  height: var(--front-mv-height);
  padding: var(--space-40) var(--front-mv-bleed) 0 0; /* 文字はメインカラムの中央に置く */
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  overflow: hidden;
  color: var(--color-white);
  text-align: center;
  isolation: isolate;
}

.front-mv__image {
  position: absolute;
  inset: 0;
  z-index: -1;
}

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

.front-mv__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-overlay-30);
}

.front-mv__title {
  margin: 0;
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-hero);
  letter-spacing: var(--letter-spacing-3);
}

.front-mv__sub {
  margin: 0;
  font-size: var(--font-size-h2-lead);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-hero-sub);
}

/* コンセプト ---------------------------------------------------------------- */
.front-concept {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-56);
  padding: var(--space-24) 0 var(--space-40);
}

.front-concept__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32);
  width: 100%;
  padding: var(--space-24) 0 var(--space-40);
}

.front-concept__mark {
  width: 11.25rem; /* 180px */
  height: calc(118.797 / 16 * 1rem);
}

.front-concept__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-40);
  width: 100%;
  text-align: center;
}

.front-concept__title {
  margin: 0;
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-compact);
  color: var(--color-black);
}

.front-concept__lead {
  width: 100%;
  margin: 0;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-loose);
  color: var(--color-black);
}

/* 1文＝1行（文の区切りは <br> ではなくブロックで改行）。SP 用の改行は PC では使わない */
.front-concept__line {
  display: block;
}

.front-concept__br-sp {
  display: none;
}

/* 見出し＋リード（左）とボタン（右下）の行 ---------------------------------- */
/* 事業概要（500/500・間隔なし）Figma: 1627:50794 ／ 経営者の方へ（480/480・間隔40）Figma: 1627:50861 */
.intro-row {
  --intro-row-gap: var(--space-40);

  display: flex;
  align-items: flex-end;
  gap: var(--intro-row-gap);
}

.intro-row--tight {
  --intro-row-gap: 0;
}

.intro-row__text {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-32);
  min-width: 0;
}

.intro-row__text .heading {
  width: 100%;
}

.intro-row__lead {
  margin: 0;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-loose);
  color: var(--color-black);
}

.intro-row__action {
  display: flex;
  flex: 1 0 0;
  justify-content: flex-end;
  min-width: 0;
}

/* セクション余白（Figma の各ブロックの padding）*/
.front-business {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
  padding-top: var(--space-40);
}

.front-owners {
  padding-block: var(--space-40);
}

/* 767px 以下（SP）：横並びを縦1列に。⚠ SPデザイン未確定のため仮レイアウト */
@media (max-width: 767px) {
  /* MV は右の画面端までのはみ出しをやめ、左右に余白を残した正方形にする（写真は中央で切り抜き）*/
  .front-mv {
    --front-mv-width: 100%;
    --front-mv-height: auto;

    justify-content: flex-end; /* 見出し・社名は下寄せ */
    aspect-ratio: 1 / 1;
    padding: 0 0 var(--space-32);
    border-radius: var(--radius-lg);
  }

  .front-concept,
  .front-concept__inner {
    padding-top: 0;
  }

  .front-concept {
    gap: var(--space-16);
    padding-bottom: var(--space-16);
  }

  .front-business {
    padding-top: var(--space-16);
  }

  .front-owners .heading__title {
    font-size: var(--font-size-h2);
  }

  /* マーク・文字を一回り小さく（マーク 180px → 120px、比率は維持）*/
  .front-concept__mark {
    width: 7.5rem; /* 120px */
    height: calc(118.797 / 180 * 7.5rem);
  }

  .front-concept__text {
    gap: var(--space-24);
  }

  .front-concept__title {
    font-size: var(--font-size-h1);
  }

  .front-concept__lead {
    font-size: var(--font-size-h5);
  }

  /* リードは SP 用の改行で区切り、文（。）ごとに少しあける */
  .front-concept__br-sp {
    display: inline;
  }

  .front-concept__line + .front-concept__line {
    margin-top: var(--space-12);
  }

  .intro-row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-32);
  }

  .intro-row__text,
  .intro-row__action {
    flex: none;
  }

  .intro-row__action {
    justify-content: center;
  }
}