@charset "utf-8";
/* ===============================================================
   home.css … トップページ専用
   1. プロフィール
   2. Film / Street / People 切り替え（common/js/photo.js）
   3. 作品グリッド（Film のサムネ：common/js/common.js）
   4. 写真グリッド（Street / People）
      ※ 写真ファイルの割り当ては photos/photo.css
   =============================================================== */


/* ===============================
   1. プロフィール
   =============================== */

.profile-section {
  margin: 7em 0 0 0;
  font-size: var(--fs-base);
}

h1 {
  display: inline;
  font-size: var(--fs-2xl);
  letter-spacing: 0.35em;
}

/* 名前のリンクは本文色のまま */
h1 a:link,
h1 a:visited,
h1 a:hover,
h1 a:active {
  color: var(--c-text);
}

h1 .eng {
  display: block;
  margin: 4em 0 0 0.2em;
  font-size: var(--fs-l);
  letter-spacing: 0.12em;
}

h2 {
  margin: 0.5em 0 1em 0.3em;
}

.profile-section p {
  margin: 2em 0.3em; /* 文字まわりは base.css の .lang-text */
}

@media (max-width: 840px) {
  .profile-section {
    margin: 3em 4% 0 4%;
  }

h1 {
  font-size: var(--fs-xl2);
}

  h2 {
    line-height: 2;
    margin: 1em 0 1em 0.3em;
  }

  .profile-section p {
    margin: 2em 0.2em 1.6em 0.2em;
  }
}


/* ===============================
   2. Film / Street / People 切り替え
   上（.work-section）と下（.site-footer）の2か所。
   選択中は本文色、それ以外はリンク色
   =============================== */

.work-switch {
  padding: 3.2em 0 5em 0.3em;
  font-size: var(--fs-base);
}

.site-footer .work-switch {
  font-size: var(--fs-base);
}

.work-switch__btn {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  color: var(--c-link);
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transition: color 200ms ease;
}

.work-switch__btn::after {
  content: "/";
  margin: 0 1.2em;
}

.work-switch__btn:hover        { color: var(--c-hover); }
.work-switch__btn:active       { color: var(--c-active); }

.work-switch__btn.is-active {
  color: var(--c-text);
  cursor: default;
}

.work-switch__btn:focus-visible {
  outline: 1px solid var(--c-line);
  outline-offset: 0.3em;
}

@media (max-width: 840px) {
  .work-switch {
    padding: 2em 0 4em 5%;
  }

  .site-footer .work-switch {
    margin-left: 4.2%;
  }

  .work-switch__btn::after {
    margin: 0 0.5em;
  }
}


/* ===============================
   3. 作品グリッド
   =============================== */

.work-section {
  margin-bottom: 1.8em;
  /* gap を「グリッド幅の◯%」で指定するための基準（cqw = この要素の幅の1%） */
  container-type: inline-size;
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* gap に % を使うと縦方向が高さ基準になり不揃いになるため cqw を使用 */
  gap: 1cqw;
}

/* hidden 属性のリストは非表示（display:grid に負けないように） */
.work-grid[hidden] {
  display: none;
}

/* 切り替えて表示したリストを軽くフェードイン */
@keyframes work-grid-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.work-grid.is-entering {
  animation: work-grid-in 600ms ease;
}

/* JS 無効時は切り替えられないので全部表示 */
@media (scripting: none) {
  .work-grid[hidden] {
    display: grid;
    margin-top: 5em;
  }
}

/* --- タイル --- */
.work-grid .work-item {
  position: relative;
  overflow: hidden;
  border-radius: 1px;
  --overlay-opacity: 0;
  /* サブピクセルの丸め誤差でタイル間に隙間が出ても白が透けないよう黒で埋める。
     自分の画像のフェードインに合わせて背景も一緒にフェードイン（JS が .is-loaded を付与）
     速度は Street / People の写真（.work-item__photo）と同じ 1400ms */
  transition: background-color 1400ms ease;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.work-grid .work-item.is-loaded {
  background-color: #000;
}

/* 横幅いっぱいのタイル */
.work-grid .work-item--wide {
  grid-column: 1 / -1;
}

.work-grid .work-item a {
  position: relative;
  display: block;
}

/* ホバー／スクロール時の暗転 */
.work-grid .work-item a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  opacity: var(--overlay-opacity, 0);
  pointer-events: none;
  transition: opacity 0.2s linear;
  will-change: opacity;
}

.work-grid .work-item.is-hover {
  --overlay-opacity: 0.5;
}

/* --- サムネ画像（<picture> で PC / SP を出し分け） --- */
.work-grid .work-item picture {
  display: block;
}

.work-grid .work-item img {
  display: block;
  width: 100%;
  height: auto; /* width / height 属性で読み込み前から枠の高さを確保する */
  opacity: 0;
  transition: opacity 1400ms ease; /* Street / People の写真と同じ速度 */
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.work-grid .work-item img.is-loaded,
.work-grid .work-item img.is-error { /* 失敗時も真っ黒にならないよう表示 */
  opacity: 1;
}

/* --- サムネ上のタイトル --- */
.work-grid .work-item p {
  position: absolute;
  top: 83%;
  left: 50%;
  z-index: 1;
  width: 85%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: var(--fs-xs);
  line-height: 2;
  letter-spacing: 0.1em;
  pointer-events: none;
  opacity: 0;
  will-change: opacity;
  transition: opacity 180ms linear;
}

.work-grid .work-item .work-item__title {
  display: block;
  font-size: var(--fs-base);
}

/* --- サムネ上に被せるロゴ（2021 など）
   タイトルと同じタイミングで表示：PC はホバー時、SP はスクロール連動 --- */
.work-grid .work-item__logo {
  position: absolute;
  inset: 0;
  z-index: 1; /* 暗転（a::after）より上 */
  pointer-events: none;
  opacity: 0;
  background-position: center;
  background-size: 100% 100%; /* サムネと同じ縦横比の画像を全面に重ねる */
  background-repeat: no-repeat;
  will-change: opacity;
  transition: opacity 180ms linear;
}

.work-grid .work-item__logo--2o21 {
  background-image: url(../../2o21/logo.png);
}

.work-grid .work-item.is-hover p,
.work-grid .work-item.is-hover .work-item__logo {
  opacity: 1;
}

@media (max-width: 840px) {
  .work-section {
    margin-bottom: 1.5em;
    padding-bottom: 0;
  }

  .work-grid {
    grid-template-columns: 1fr;
    gap: 2cqw;
  }

  /* ロゴも SP 用に差し替え（SP 用サムネ pic_sp.webp と同じ 16:9） */
  .work-grid .work-item__logo--2o21 {
    background-image: url(../../2o21/logo_sp.png);
  }

  /* iOS Safari 対策：SP では transition を切って再描画負荷を下げる */
  .work-grid .work-item__logo,
  .work-grid .work-item p,
  .work-grid .work-item a::after {
    transition: none;
  }
}


/* ===============================
   4. 写真グリッド（Street / People）
   写真は <img> ではなく背景画像として表示（ドラッグ／保存対策）
   =============================== */

.work-grid--photo li {
  padding: 0 0 5em 0;
}

.work-grid--photo li:last-child {
  padding: 0;
}

/* 写真も Film と同じく背景に黒を敷く。
   li には下余白（padding）があり、li に黒を敷くと写真の下まで黒くなるため、
   li は透明のままにして写真（.work-item__photo）自体に黒を敷く。
   写真の opacity フェード（1400ms）に合わせて黒も一緒にフェードインする */
.work-grid--photo .work-item.is-loaded {
  background-color: transparent;
}

/* ローダーの位置：li の下余白があるため写真（16:9）の中心に置く。
   margin-top の % は幅基準なので 9/16 の半分 = 28.125% */
.work-grid--photo .work-item::before {
  top: 0;
  margin-top: calc(28.125% - 12px);
}

.work-grid--photo .work-item__photo {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #000;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1400ms ease;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none; /* iOS 長押しメニュー対策 */
}

.work-grid--photo .work-item__photo.is-loaded,
.work-grid--photo .work-item__photo.is-error {
  opacity: 1;
}

/* JS 有効時は、画面に入るまで（.is-armed が付くまで）読み込ませない＝遅延読み込み */
@media (scripting: enabled) {
  .work-grid--photo .work-item__photo:not(.is-armed) {
    background-image: none !important;
  }
}

/* JS 無効時はフェードなしでそのまま表示 */
@media (scripting: none) {
  .work-grid--photo .work-item__photo {
    opacity: 1;
  }
}

/* 写真リストの文字の基準（li の余白 em に効く） */
.work-grid--photo {
  font-size: var(--fs-base);
}

/* キャプション（現在は非表示） */
.work-grid--photo .work-item__caption {
  display: none;
  width: 100%;
  padding-top: 0.75em;
  text-align: right;
  font-size: var(--fs-xs);
}

@media (max-width: 840px) {
  .work-grid--photo {
    width: 94%;
    margin: 0 3% 0 3%;
  }

  .work-grid--photo li {
    padding: 0 0 2em 0;
  }

  .work-grid--photo li:last-child {
    padding: 0;
  }
}


/* ===============================
   5. People だけ 14:9 の画角で見せる
   画像データ（16:9）はそのまま、表示枠でマスクする（background-size: cover で切り出し）
   ・PC：高さは 16:9 のときと同じ。左右を削って幅を縮め、中央寄せ
         幅 = 9/16 × 14/9 = 87.5%（ローダー位置も高さが同じなので 16:9 のまま）
   ・SP：ブラウザの左右に 5.5% ずつ余白を残す幅（89vw）。高さは 14:9 で成り行き
   ・見せる位置（左右どこを切り出すか）は photos/photo.css で 1 枚ずつ指定
   =============================== */

#works-people .work-item__photo {
  width: 87.5%;
  margin: 0 auto;
  aspect-ratio: 14 / 9;
  border-radius: 1px; /* li の角丸が写真に届かないため写真側にも付ける */
}

/* 写真ごとの下余白は元の Street（PC 5em / SP 2em）の 1.2 倍（PC 6em、SP 2.4em）。最後の 1 枚は 0 のまま */
#works-people li:not(:last-child) {
  padding-bottom: 6em;
}

@media (max-width: 840px) {
  #works-people li:not(:last-child) {
    padding-bottom: 2.4em;
  }

  #works-people .work-item__photo {
    width: 89vw; /* ブラウザ左右に 5.5% ずつ */
    /* リストの実幅（約 90vw）とほぼ同じなので、画面の中央を基準に置く（はみ出しても均等） */
    margin: 0 calc(50% - 44.5vw);
  }

  #works-people .work-item {
    overflow: visible; /* はみ出した分が切れないように（角丸は写真側） */
    min-width: 0; /* 列が写真の幅に合わせて広がらないように（Street と同じ理由） */
  }

  /* ローダーを写真の中心に：高さ 89vw × 9/14 の半分 ≒ 28.607vw */
  #works-people .work-item::before {
    margin-top: calc(28.607vw - 12px);
  }
}


/* ===============================
   6. Street は全体を少し小さく（PC は今の幅の 95%、SP はブラウザ左右 4%。16:9 のまま中央寄せ）
   =============================== */

#works-street .work-item__photo {
  width: 95%;
  margin: 0 auto;
  border-radius: 1px; /* li の角丸が写真に届かないため写真側にも付ける */
}

/* 写真ごとの下余白は元（PC 5em / SP 2em）の 80%（PC 4em、SP 1.6em）。最後の 1 枚は 0 のまま */
#works-street li:not(:last-child) {
  padding-bottom: 4em;
}

@media (max-width: 840px) {
  #works-street li:not(:last-child) {
    padding-bottom: 1.6em;
  }
}

/* ローダーを写真の中心に：95% × 9/16 の半分 = 26.71875% */
#works-street .work-item::before {
  margin-top: calc(26.71875% - 12px);
}

/* SP：ブラウザの左右に 4% ずつ余白を残す幅（92vw）。リスト（94vw）の中で中央寄せ */
@media (max-width: 840px) {
  #works-street .work-item__photo {
    width: 92vw;
    /* リストの実幅（約 90vw）より広いので、左右に均等にはみ出させて画面の中央に置く */
    margin: 0 calc(50% - 46vw);
  }

  /* はみ出した分が切れないように（角丸は写真側に付けてある） */
  #works-street .work-item {
    overflow: visible;
    /* グリッドの列が写真の幅（92vw）に合わせて広がらないように。
       これが無いと Safari では列（li）が広がって左端揃えになり、写真が右に寄る */
    min-width: 0;
  }

  /* ローダーを写真の中心に：高さ 92vw × 9/16 の半分 = 25.875vw */
  #works-street .work-item::before {
    margin-top: calc(25.875vw - 12px);
  }
}