@charset "UTF-8";
/* 01 WORKS／トップ共通グリッド：基本2列・画像間隔16px */
.works-gallery {
  container: works-gallery / inline-size;
}

.works-grid {
  --columns: 2;
  --grid-gap: 16px;
  /* JavaScript無効時も各行を端まで埋める正方形の折り返し配置。 */
  display: flex;
  flex-wrap: wrap;
  gap: var(--grid-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 固定パターン：投稿順を変えず、隙間のない長方形の帯を縦に連結する。 */
.works-grid.is-pattern-layout {
  flex-direction: column;
  flex-wrap: nowrap;
}

.works-band {
  display: grid;
  grid-template-columns: repeat(var(--band-columns), minmax(0, 1fr));
  grid-auto-rows: calc((100cqw - (var(--band-columns) - 1) * var(--grid-gap)) / var(--band-columns));
  gap: var(--grid-gap);
  width: 100%;
}

.works-grid > .works-tile {
  flex: 1 1 calc((100% - (var(--columns) - 1) * var(--grid-gap)) / var(--columns));
  aspect-ratio: 1;
}

/* 02 画像の枠と4種類の比率：小正方形・大正方形・横長・縦長 */
.works-tile {
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.works-tile--large {
  grid-column: span 2;
  grid-row: span 2;
}

.works-tile--wide {
  grid-column: span 2;
}

.works-tile--tall {
  grid-row: span 2;
}

.works-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%; /* すべての枠で画像の中央を基準に切り抜く */
}

/* 03 コンテンツ幅に応じた列数：480pxで3列・700pxで4列・920pxで5列 */
@container works-gallery (min-width: 480px) {
  .works-grid {
    --columns: 3;
  }
}

@container works-gallery (min-width: 700px) {
  .works-grid {
    --columns: 4;
  }
}

@container works-gallery (min-width: 920px) {
  .works-grid {
    --columns: 5;
  }
}

/* トップのピックアップのみ最大4列。正方形・16px間隔は共通。 */
@container works-gallery (min-width: 920px) {
  .works-grid--pickup {
    --columns: 4;
  }
}

/* 04 作品へのリンク：フォーカス・ホバー時のタイトル */
.works-link {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: var(--white);
}

.works-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}

.works-title {
  position: absolute;
  inset: auto 0 0;
  padding: 12px;
  background: rgba(17,17,17,.88);
  color: var(--white);
  font-size: 12px;
  line-height: 1.6;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .2s ease, transform .2s ease;
  overflow-wrap: anywhere;
}

.works-link:hover .works-title, .works-link:focus-visible .works-title {
  opacity: 1;
  transform: translateY(0);
}

/* 05 作品詳細：日付・元画像・説明・一覧への導線 */
.work-date {
  margin: 0 0 24px;
  font-family: var(--font-en), var(--font-ja);
  font-size: 14px;
}

.work-image {
  margin: 0 0 40px;
}

.work-image img {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  margin-inline: auto;
}

.work-description {
  margin-bottom: 48px;
}

.work-navigation {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
  border-top: 1px solid var(--black);
  padding-top: 24px;
  font-size: 12px;
}

.work-navigation > :last-child {
  text-align: right;
}

/* 06 タッチ操作・動きを減らす設定：作品タイトル */
@media (hover: none) {
  .works-title {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .works-title {
    transition: none;
    transform: none;
  }
}

/* 07 Lazy Loading：画像枠を確保し、読込後に0.55秒でフェード表示 */
.works-image {
  opacity: 1;
  transition: opacity .55s ease;
}

.works-image.is-loading {
  opacity: 0;
}

.works-tile {
  background: var(--black);
}

/* 08 WORKSの子カテゴリー：リンクボタン・選択状態 */
.works-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 32px;
}

.category-button {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 18px;
  border: 1px solid var(--black);
  border-radius: 6px;
  font-size: 12px;
}

.category-button:hover, .category-button[aria-current="page"] {
  color: var(--white);
  background: var(--black);
}

/* 09 トップページ：Recent WORKS／informationの見出し・余白 */
.home-section {
  margin-top: 64px;
  font-size: 14px;
  line-height: 2;
}

.section-heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0 0 28px;
  font-size: 24px;
  line-height: 1.6;
  font-weight: 500;
}

.section-heading [lang="en"] {
  font-family: var(--font-en);
}

.section-subtitle {
  font-family: var(--font-ja);
  font-size: 14px;
  font-weight: 400;
}

.home-section .content-action {
  margin: 28px 0 0;
}

/* 10 最新情報：日付とタイトルの横並び・各行の下罫線 */
.latest-information {
  margin: 0;
  padding: 0;
  list-style: none;
}

.latest-information li {
  border-bottom: 1px solid var(--black);
}

.latest-information a {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: baseline;
  gap: 20px;
  padding: 18px 0;
}

.latest-information time {
  font-family: var(--font-en);
  font-size: 14px;
}

.latest-information span {
  overflow-wrap: anywhere;
}

/* 11 スマホ表示：トップ見出し・最新情報の列幅 */
@media (max-width: 767px) {
  .home-section {
    margin-top: 48px;
  }
  .section-heading {
    font-size: 22px;
  }
  .latest-information a {
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 12px;
  }
}

/* 12 アクセシビリティ：画像のフェードを無効化 */
@media (prefers-reduced-motion: reduce) {
  .works-image {
    transition: none;
    opacity: 1;
  }
}