/* トップで紹介する6つの用途 */
.home .kick-second::before { content: "・"; }
@media (max-width: 720px) {
  .home .kick::before { display: none; }
  .home .kick-second { display: block; }
  .home .kick-second::before { content: ""; }
}
.home #works .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home #works figure { aspect-ratio: 16 / 9; min-width: 0; }
.home #works figcaption { display: block; text-align: right; }
.home #works figcaption b { word-break: keep-all; display: block; font-size: clamp(14px, 1.5vw, 18px); line-height: 1.5; letter-spacing: 0; }
.home #works figcaption small { font-size: 12px; line-height: 1.6; letter-spacing: 0; }
.home #works figcaption .work-meta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 10px; }
.home #works .work-meta span { font: inherit; color: inherit; }
.home #works .work-meta time, .home #works .work-meta span { white-space: nowrap; }
@media (max-width: 720px) {
  .home #works .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 10px; }
  .home #works figure { grid-column: auto; aspect-ratio: auto; background: none; border-radius: 0; }
  .home #works img { display: block; height: auto; aspect-ratio: 16 / 9; border-radius: var(--radius); }
  .home #works figcaption { position: static; padding: 8px 0 0; background: none; color: var(--ink); }
  .home #works figcaption b { font-size: 13px; }
  .home #works figcaption small { margin-top: 3px; font-size: 11px; color: var(--note); }
}

.home #works .keep-phrase { display: inline-block; white-space: nowrap; }

/* トップの写真から拡大表示へ */
.home #works .work-photo { display: block; position: relative; height: 100%; cursor: zoom-in; }
.home #works .work-photo:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.home #works figcaption { pointer-events: none; }
@media (max-width: 720px) { .home #works .work-photo { height: auto; } }

/* 拡大写真と、ほかの実績へのリンク */
body.photo-viewer-open { overflow: hidden; }
.photo-viewer { border: 0; padding: 0; margin: auto; width: fit-content; max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); background: #171717; color: #fff; border-radius: 10px; }
.photo-viewer::backdrop { background: rgba(0, 0, 0, .85); }
.photo-viewer-content { position: relative; padding: 56px 16px 16px; }
.photo-viewer button { min-width: 44px; min-height: 44px; border: 0; border-radius: 6px; background: transparent; color: #fff; font: inherit; cursor: pointer; }
.photo-viewer .photo-close { position: absolute; top: 6px; right: 10px; min-width: 80px; }
.photo-viewer-position { position: absolute; top: 16px; left: 16px; font-size: 13px; color: rgba(255, 255, 255, .8); }
.photo-viewer-stage { position: relative; }
.photo-viewer .photo-prev, .photo-viewer .photo-next { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(0, 0, 0, .68); font-size: 34px; line-height: 1; z-index: 1; }
.photo-viewer .photo-prev { left: 8px; }
.photo-viewer .photo-next { right: 8px; }
.photo-viewer .photo-prev:hover, .photo-viewer .photo-next:hover { background: rgba(0, 0, 0, .9); }
.photo-viewer button:hover { background: rgba(255, 255, 255, .12); }
.photo-viewer button:focus-visible { outline: 2px solid var(--shu); }
.photo-viewer img { display: block; width: auto; height: auto; max-width: min(1200px, calc(100vw - 64px)); max-height: calc(100dvh - 168px); margin: 0 auto; object-fit: contain; }
.photo-viewer figcaption { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; max-width: 1100px; margin: 12px auto 0; font-size: 13px; line-height: 1.7; text-align: center; }
.photo-viewer figcaption span { white-space: nowrap; }
@media (max-width: 560px) {
  .photo-viewer { max-width: calc(100vw - 16px); }
  .photo-viewer-content { padding: 52px 8px 12px; }
  .photo-viewer img { max-width: calc(100vw - 32px); }
}
.photo-viewer img { max-height: max(100px, calc(100dvh - 240px)); }
.photo-viewer-actions { display: flex; justify-content: center; margin-top: 16px; }
.photo-viewer .photo-portfolio-link { background: var(--accent); color: var(--on-accent); font-size: 14px; }
.photo-viewer .photo-portfolio-link:hover { filter: brightness(1.12); }
.photo-viewer .photo-portfolio-link:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }