@charset "UTF-8";
/* CSS Document */
#home main {
  margin: 0;
  padding: 0;
}

#home header {
  position: relative;
}

/* main を最初は非表示（hero完了後に出す） */
body#home main {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s linear 0.5s;
}

/* 表示状態 */
body#home.is-main-visible main {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s;
}

.top_inner {
  width: 1100px;
  margin: 0 auto;
  padding-top: 100px;
  text-align: center;
}

:root {
  scrollbar-gutter: stable; /* 対応ブラウザではこれだけでズレ激減 */
}

body.is-scroll-locked {
  overflow: hidden;
}

/* =========================================================
  scatter（最終：mx/my + hoverScale 統合版）
========================================================= */
.hero_scatter {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.hero_scatter #scatter {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 2000ms ease;
}

.hero_scatter #scatter.is-visible {
  opacity: 1;
}

/* 初期：中央に束 */
.hero_scatter #scatter .scatter_card {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;

  --hoverScale: 1;
  --mx: 0px;
  --my: 0px;

  transform: translate(-50%, -50%) translate3d(var(--sx, 0px), var(--sy, 0px), 0) translate3d(var(--mx, 0px), var(--my, 0px), 0) scale(var(--hoverScale));

  width: var(--w);
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  will-change: transform;
}

/* 展開：テンプレ座標へ */
.hero_scatter #scatter.is-open .scatter_card {
  transform: translate(-50%, -50%) translate3d(var(--tx, 0px), var(--ty, 0px), 0) translate3d(var(--mx, 0px), var(--my, 0px), 0) scale(var(--hoverScale));

  transition: transform 1200ms cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: var(--delay, 0ms);
}

.hero_scatter #scatter .scatter_card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* hoverの反応を即にする：遅延ゼロ＋短いtransition */
@media (hover: hover) and (pointer: fine) {
  .hero_scatter #scatter.is-open .scatter_card {
    transition-delay: 0ms; /* ← delay殺す（hoverも即反応） */
  }

  .hero_scatter #scatter.is-open .scatter_card:hover {
    --hoverScale: 1.2;
    z-index: 10;
    transition: transform 160ms ease-out; /* ← hover時だけ速く */
  }
}

/* =========================================================
  Scroll intro (header float + scatter fade)
========================================================= */
/* ヘッダーを最終的に fixed header として扱う */
body#home header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 9989;

  /* 初期：見えない（JSで進行に合わせて出す） */
  opacity: var(--hdrO, 0);

  /* 中央→上へ移動（JSが --hdrY を 0 まで詰める） */
  transform: translateY(var(--hdrY, -120vh));
  will-change: transform, opacity;

  pointer-events: auto; /* ← 常に触れる */
}

/* 演出完了後：通常ヘッダーとして操作可能に */
body#home header.is-docked {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* hero_scatter側：スクロールに合わせてフェードアウト */
body#home .hero_scatter {
  opacity: var(--scatterO, 1);
  will-change: opacity;
}

/* 念のため、固定headerの分だけコンテンツが隠れるなら main に余白を入れる（必要なら） */
/*
body#home main {
  padding-top: 120px;
}
*/

.top_title_en {
  font-size: 40px;
  text-align: center;
  color: #7b7b7c;
  font-weight: 300;
  letter-spacing: 0.15em;
}

.top_copy {
  color: #7b7b7c;
  font-size: 49px;
  font-weight: 500;
  letter-spacing: 0.4em;
  margin-bottom: 10px;
}

.top_bodycopy {
  font-size: 25px;
  margin-bottom: 100px;
  letter-spacing: 0.15em;
  color: #7b7b7c;
}

.top_work_list {
  margin-bottom: 72px;
}

.top_work_list li.reveal {
  width: 720px;
  margin-bottom: 50px;
}

.top_work_list li.reveal img {
  width: 100%;
}

.top_work_list li.reveal:nth-child(even) {
  margin-left: auto;
}

/* reveal：マスク解除 + 下から上へ + フェード */
.top_work_list .reveal {
  overflow: hidden;
}

.top_work_list .reveal > a {
  display: block;
  will-change: clip-path, opacity, transform;
  transition: clip-path 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 初期（is-in なし） */
.top_work_list .reveal:not(.is-in) > a {
  clip-path: inset(100% 0 0 0);
  opacity: 0;
  transform: translateY(125px);
}

.top_work_list .reveal:not(.is-in) {
  transform: translateY(30px);
}

/* 表示（is-in あり） */
.top_work_list .reveal.is-in > a {
  clip-path: inset(0 0 0 0);
  opacity: 1;
  transform: translateY(0);
}

.top_work_list .reveal.is-in {
  transform: translateY(0px);
}

.arrow {
  position: relative;
  display: inline-block;
  width: 110px;
  height: 1px;
  margin-top: 0;
  border-radius: 9999px;
  background-color: #555555;
}

.arrow::before {
  content: "";
  position: absolute;
  top: calc(50% - 0.5px);
  right: 0;
  width: 21px;
  height: 1px;
  border-radius: 9999px;
  background-color: #555555;
  transform: rotate(65deg);
  transform-origin: calc(100% - 0.5px) 50%;
}

.photo_overlay .viewlink {
  margin: 0;
}

.photo_overlay .arrow {
  background-color: #fff;
}

.photo_overlay .arrow::before {
  background-color: #fff;
}
.top_bottomarea .circle_more {
  font-size: 20px;
  align-items: flex-start;
}
.circle_more {
  font-size: 14px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.viewlink {
  display: block;
  margin: 0 auto 130px;
  text-align: center;
}

.about_photo:hover .photo_overlay {
  transform: translateX(0);
}

.photo_overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  transform: translateX(-100%);
  transition: transform 0.4s ease;

  display: flex;
  align-items: center;
  justify-content: center;
}

.about_photo:hover .photo_overlay {
  transform: translateX(0);
}

.photo_text {
  color: #fff;
  text-align: center;
  padding: 24px;
  transition: opacity 0.3s ease 0.15s, transform 0.3s ease 0.15s;
}

.about_photo:hover .photo_text {
  opacity: 1;
}

.photo_title {
  font-size: 25px;
  line-height: 1.4;
  margin-bottom: 20px;
  font-weight: 400;
}

.photo_body {
  font-size: 13px;
  line-height: 1.8;
  margin-bottom: 20px; /* カテゴリーとの間 */
  max-width: 295px;
}

.photo_category {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 0;
  margin: 0 0 25px 0;
  list-style: none;
}

.photo_category li {
  font-size: 11px;
  padding: 4px 10px;
  border: 1px solid #fff;
  line-height: 1;
  white-space: nowrap;
}

.icon_scroll {
  opacity: 0;
  position: absolute;
  bottom: 30px;
  right: 30px;
  width: 80px;
  transition: 0.2s ease-out all;
}

.is-open .icon_scroll {
  opacity: 1;
}

/* hoverできない端末では overlay を常時表示させず、透明だけにする */
@media (hover: none) {
  .photo_overlay {
    transform: none;
    opacity: 0;
  }
}
@media (max-width: 768px) {
  .hero_scatter {
    height: var(--fixed-vh);
  }
  .scatter_card {
    transition-property: opacity;
  }
  .top_inner {
    width: 90%;
  }
  .top_work_list {
    margin-bottom: 0;
  }
  .top_title_en {
    font-size: calc(25 * var(--vw375));
  }
  .top_copy {
    font-size: calc(23 * var(--vw375));
  }
  .photo_title {
    font-size: calc(16 * var(--vw375));
  }
  .top_bodycopy {
    font-size: calc(16 * var(--vw375));
    margin-bottom: calc(48 * var(--vw375));
  }
  .top_inner img {
    max-width: 100%;
  }
  .top_work_list li.reveal {
    width: 100%;
  }
  .top_work_list li.reveal {
    margin-bottom: calc(20 * var(--vw375));
  }
  .top_link_contact {
    text-align: center;
  }
  .viewlink {
    margin-bottom: calc(62 * var(--vw375));
  }
  .top_bottomarea .circle_more {
    font-size: calc(14 * var(--vw375));
  }
  .top_bottomarea .arrow {
    width: calc(87 * var(--vw375));
  }
  .icon_scroll {
    display: none;
  }

  body#home header {
    position: fixed; /* すでにfixedならそのまま */
    top: 0;
    left: 0;
    right: 0;
    transform: translateY(0) !important; /* 変なY移動を打ち消す */
    opacity: 1 !important;
    pointer-events: auto;
  }

  body#home header .logo_box {
    visibility: hidden; /* 見えない */
    opacity: 0; /* 念のため */
    pointer-events: none;
  }
  body#home header.is-scrolled .logo_box {
    opacity: 1;
    pointer-events: all;
    visibility: visible;
  }
  /* SPアニメ用ロゴ：初期は非表示 */
  .hero_scatter .sp_logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 500ms ease-out;
    z-index: 9999;
    pointer-events: none;
    width: calc(175 * var(--vw375));
    transition-delay: 1s;
  }

  .is-main-visible .hero_scatter .sp_logo {
    visibility: visible;
  }
}
/* PCでは出さない */
@media (min-width: 769px) {
  .hero_scatter .sp_logo {
    display: none;
  }
}