@charset "utf-8";

/* The hero uses a small CSS/JS crossfade slideshow. The document below it explains the
   company, shows a browsable range of work, then closes with current activity
   and direct routes for enquiries and recruitment. */

body.top-page {
  --home-content-color: var(--color-text);
  --home-ui-color: #666666;
  overflow-x: clip;
  background: var(--color-bg);
}

body.top-page #header,
body.top-page #content-wrapper.home-content-wrapper,
body.top-page #content.home-content,
body.top-page #main.home-main {
  min-width: 0;
}

.home-page-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body.top-page #content-wrapper.home-content-wrapper,
body.top-page #content.home-content {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 !important;
}

body.top-page #main.home-main {
  display: block;
  float: none;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.home-main :is(h2, h3, p) {
  margin-block: 0;
}

.home-introduction,
.home-works,
.home-topics {
  width: 100%;
  scroll-margin-top: var(--space-lg);
}

.home-section-heading {
  display: flex;
  width: 100%;
  max-width: var(--container-wide-box);
  gap: var(--space-lg);
  align-items: center;
  justify-content: space-between;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* 色は本文と同じ濃さ（2026-10-05 ユーザー指定）。Topics の欄のカードの題名（Noto Sans JP 500・本文色）より
   薄い #666 だと、見出しのほうが弱く見えた。太さは欧文の決まりどおり 400 のまま。 */
.home-section-heading h2 {
  color: var(--color-heading);
  font-family: var(--font-latin);
  font-size: var(--fs-lg);
  font-weight: var(--font-latin-strong-weight);
  letter-spacing: 0.01em;
  line-height: var(--lh-tight);
}

.home-text-link {
  display: inline-flex;
  gap: var(--space-sm);
  align-items: center;
  padding-block: var(--space-2xs);
  border-bottom: 1px solid var(--color-line-strong);
  color: var(--home-ui-color);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

.home-text-link > span {
  transition: transform var(--dur-fast) var(--ease);
}

.home-text-link:hover {
  color: var(--home-ui-color);
}

@media (hover: hover) {
  .home-text-link:hover > span {
    transform: translateX(var(--space-3xs));
  }
}

/* 一覧・詳細への導線の置き場所（Top 共通ルール・2026-09-25）。
   **各セクションの末尾に置き、リンクはセクション本文の右端に寄せる**。見出しの横や
   本文の左下には置かない（置き場所がセクションごとに違うと導線が探しにくい）。
   3列の中央は Works の送りボタンのような「その場の操作」用で、リンクは常に右列。 */
.home-section-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  margin-block-start: var(--space-lg);
}

.home-section-footer > .home-text-link {
  grid-column: 3;
  justify-self: end;
  min-width: 10rem;
  min-height: 44px;
  justify-content: space-between;
}

.home-section-empty {
  padding-block: var(--space-xl);
  color: var(--home-ui-color);
}

/* Introduction ------------------------------------------------------------ */
.home-introduction {
  /* Hero内リンクからの移動時は、直前の操作バーを上端に残さない。 */
  scroll-margin-top: 0;
  /* 下だけ固定で詰める（2026-09-28）。次の Topics と背景が同じ白で境目が無く、
     上下を足した分がそのまま間隔に見えるため。 */
  padding-block: clamp(
    calc(var(--space-xl) + var(--space-2xs)),
    6vw,
    calc(var(--space-2xl) + var(--space-2xs))
  ) calc(var(--space-xl) + var(--space-2xs));
  background: var(--color-surface);
}

.home-introduction__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--space-lg), 4vw, var(--space-xl));
  align-items: start;
  width: 100%;
  max-width: var(--container-box);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* 大見出しだけ Vision と同じ書体にする。本文まで広げると、全テキストが
   Adobe Fonts の読み込み待ちに乗るため見出しに留める。 */
.home-introduction h2 {
  color: var(--home-content-color);
  font-family: var(--font-display-jp);
  font-size: clamp(1.75rem, 4.5vw, 3.5rem);
  font-weight: 500;
  line-height: 1.35;
}

.home-introduction h2 span {
  display: block;
}

.home-introduction__body {
  margin: 0;
}

.home-introduction__body > p {
  color: var(--home-content-color);
  line-height: 1.85;
}

.home-introduction__body > p + p {
  margin-block-start: var(--space-sm);
}

/* Philosophy へのリンクは本文（960）ではなく、他のセクションの一覧リンクと同じ 1340 の枠の右端にそろえる
   （2026-10-05 ユーザー指摘。本文幅に沿っていたので、他より内側に凹んで見えた）。 */
.home-introduction__footer {
  width: 100%;
  max-width: var(--container-wide-box);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* まとまり（序文・Topics・Works）を段ごとにフェードで出す（js/home-reveal.js・2026-10-06 ユーザー指定）。
   Philosophy の段と同じく、動かさずフェードだけ。既定は見えている。JS が html に data-home-reveal-ready を
   立てたときだけ伏せ、見出しが画面に入って書体の決着がついたら、まとまり（data-home-reveal）に .is-in が付く。
   段（data-home-reveal-step）は「ため → 0 見出し → 1 → 2」の順に --home-reveal-step ずつ遅れて出る。
   同時に画面に入ったまとまりは上から順に出し、後のまとまりには前に続く段として待つ --home-reveal-after を JS が入れる
   （序文は見出し → 1段落目 → 2段落目とリンク、Topics と Works は見出し → 中身とリンク）。
   経緯（序文）: 見出しを即座に --ease の 0.6s で出し本文を 0.4s 遅らせた形は「早すぎる」、本文を段落ごとに
   0.12s ずつ 0.45s で出した形は「ぱらぱら雑すぎる」とされ、段落を1段ずつ同じ速さで出す今の形になった。
   緩急は --ease ではない。--ease は出だしで半分以上進み、ためが消える。印刷では伏せない。 */
@media screen {
  [data-home-reveal-ready] [data-home-reveal] {
    --home-reveal-hold: 100ms;   /* 画面に入ってから見出しが出始めるまで（2026-10-15 に 300 → 100ms。出始めが遅く空白が続いた） */
    --home-reveal-dur: 900ms;
    --home-reveal-step: 700ms;   /* 段と段の間（前の段がほぼ出たところで次の段） */
  }

  /* Topics と Works は序文より早める（2026-10-06 ユーザー指摘）。Works は帯の高さが無く、見出しと写真が
     ほぼ同時に画面に入るので、序文と同じ間合いでは写真を待たされて遅く見えた。
     Works は 150 / 700 / 400ms まで詰めたら「若干だけ遅く」とされ、その間を取った。 */
  /* Topics と Works のためは 2026-10-15 に 250 / 200 → 100ms（序文と同じ。「ちょっと遅い」・ユーザー指摘）。
     段の間と長さは変えていない（Works を 0.4s・0.7s まで詰めたときは「若干だけ遅く」とされた）。 */
  [data-home-reveal-ready] .home-topics[data-home-reveal] {
    --home-reveal-hold: 100ms;
    --home-reveal-dur: 850ms;
    --home-reveal-step: 600ms;
  }

  [data-home-reveal-ready] .home-works[data-home-reveal] {
    --home-reveal-hold: 100ms;
    --home-reveal-dur: 800ms;
    --home-reveal-step: 500ms;
  }

  [data-home-reveal-ready] [data-home-reveal-step] {
    --home-reveal-n: 0;
    opacity: 0;
    transition: opacity var(--home-reveal-dur) ease-in-out
      calc(var(--home-reveal-after, 0ms) + var(--home-reveal-hold) + var(--home-reveal-n) * var(--home-reveal-step));
  }

  [data-home-reveal-ready] [data-home-reveal-step="1"] {
    --home-reveal-n: 1;
  }

  [data-home-reveal-ready] [data-home-reveal-step="2"] {
    --home-reveal-n: 2;
  }

  /* 序文の見出しは書体待ちの色の遷移（css/foundation.css）を消さないよう、transition に color も並べる。 */
  [data-home-reveal-ready] .home-introduction h2[data-home-reveal-step] {
    transition:
      color var(--dur-slow) var(--ease),
      opacity var(--home-reveal-dur) ease-in-out calc(var(--home-reveal-after, 0ms) + var(--home-reveal-hold));
  }

  [data-home-reveal-ready] [data-home-reveal].is-in [data-home-reveal-step] {
    opacity: 1;
  }

  /* 途中から見ているとき（スクロールした状態で読み込んだ・下から戻ってきた）は、段もためも付けずに
     まとめてすっと出す。序文の見出しの書体待ちの color もここで並べ直す。 */
  [data-home-reveal-ready] [data-home-reveal].is-in-direct [data-home-reveal-step] {
    transition:
      color var(--dur-slow) var(--ease),
      opacity var(--reveal-dur) var(--ease);
  }
}

/* スマホの序文は1段落目だけなので（下の 640px のブロック）、見出し → 1段落目 → リンクの順に出る（Philosophy のパネルと同じ順）。
   見出しは Philosophy のパネルの見出しと同じくらいためてから出す（2026-10-07 ユーザー指定。前の段が消えて出始めるまでの
   280 + 100 − 100ms。css/vision_stage.css の --vision-heading-at。2026-10-15 に両方とも早めて 480 → 280ms）。PC は 100ms。 */
@media screen and (max-width: 640px) {
  [data-home-reveal-ready] .home-introduction[data-home-reveal] {
    --home-reveal-hold: 280ms;
  }
}

/* Works ------------------------------------------------------------------- */
/* 画面いっぱいの帯だが、中身は --frame-inset でフレーム(1340)へ戻す（foundation）。 */
.home-works {
  padding-block: var(--space-xl) var(--space-2xl);
  overflow: hidden;
  background: var(--color-bg);
}

.home-works__heading {
  margin-block-end: var(--space-lg);
}

.home-works__controls[hidden],
.home-works__motion-toggle[hidden] {
  display: none;
}

/* フッター行は Top の Hero と同じ並び（2026-11-04 ユーザー指定）。停止ボタンは左端、ドットは中央、一覧リンクは右端。
   それまでは「‹ 停止 ›」の3つを中央にまとめていた。 */
.home-works__motion-toggle {
  grid-column: 1;
  justify-self: start;
}

.home-works__controls {
  display: flex;
  grid-column: 2;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

/* 1つが1作品。現在の1つだけを塗る。ホバーは塗りが現在位置と同じ色になるだけで、大きさは変えない
   （Top の Hero・Works 詳細のカルーセルのドットと同じ反応）。 */
.home-works__dot {
  display: grid;
  width: 24px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--home-content-color);
  cursor: pointer;
  place-items: center;
}

.home-works__dot-mark {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-text-faint);
  transition: background-color var(--dur-fast) var(--ease);
}

.home-works__dot.is-current .home-works__dot-mark {
  background: currentColor;
}

@media (hover: hover) and (pointer: fine) {
  .home-works__dot:hover .home-works__dot-mark {
    background: currentColor;
  }
}

.home-works__dot:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -4px;
}

@media (forced-colors: active) {
  .home-works__dot-mark {
    background: ButtonFace;
    box-shadow: 0 0 0 1px ButtonText;
  }

  .home-works__dot.is-current .home-works__dot-mark {
    background: ButtonText;
  }
}

/* 見出しと同じく 1340 の器へ戻す（帯は全幅）。 */
.home-works__footer {
  width: 100%;
  max-width: var(--container-wide-box);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.home-works__control {
  display: grid;
  width: 28px;
  height: 28px;
  padding: 5px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--home-content-color);
  cursor: pointer;
  place-items: center;
  transition:
    opacity var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.home-works__control svg {
  width: 100%;
  height: 100%;
}

.home-works__motion-toggle svg {
  fill: currentColor;
}

.home-works__icon-play {
  display: none;
}

.home-works__motion-toggle.is-paused .home-works__icon-pause {
  display: none;
}

.home-works__motion-toggle.is-paused .home-works__icon-play {
  display: block;
}

@media (hover: hover) {
  .home-works__control:hover {
    opacity: 0.7;
    transform: scale(1.1);
  }
}

/* スマホの重ね矢印（.home-works__overlay）の基準。PC では何も重ねない。 */
.home-works__stage {
  position: relative;
}

.home-works__overlay {
  display: none;
}

.home-works__track {
  width: 100%;
  padding-block-end: var(--space-md);
  padding-inline: var(--frame-inset);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-padding-inline: var(--frame-inset);
  scroll-snap-type: inline mandatory;
  scrollbar-color: var(--color-line-strong) transparent;
  scrollbar-width: thin;
}

.home-works__track.swiper-initialized {
  overflow: hidden;
  scroll-snap-type: none;
  scrollbar-width: none;
}

.home-works__track.swiper-initialized::-webkit-scrollbar {
  display: none;
}

.home-works__track::-webkit-scrollbar {
  height: var(--space-3xs);
}

.home-works__track::-webkit-scrollbar-track {
  background: transparent;
}

.home-works__track::-webkit-scrollbar-thumb {
  border-radius: var(--radius-sm);
  background: var(--color-line-strong);
}

.home-works__flow {
  display: flex;
  gap: var(--space-sm);
  width: max-content;
}

.home-works__track.swiper-initialized .home-works__flow {
  width: 100%;
  gap: 0;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.home-work-card {
  width: clamp(17rem, 28vw, 25rem);
  height: auto;
  flex: 0 0 clamp(17rem, 28vw, 25rem);
  min-width: 0;
  scroll-snap-align: start;
}

.home-work-card a {
  display: block;
  color: var(--home-content-color);
}

.home-work-card__media {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--color-line);
}

.home-work-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-work-card h3 {
  margin-block-start: var(--space-xs);
  overflow: hidden;
  color: var(--home-content-color);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: var(--lh-snug);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-works__placeholder {
  display: grid;
  width: calc(100% - 2 * var(--frame-inset));
  max-width: var(--container-wide);
  min-height: 18rem;
  margin-inline: auto;
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  color: var(--home-ui-color);
  font-size: var(--fs-sm);
  place-items: center;
}

/* Topics ------------------------------------------------------------------ */
.home-topics {
  padding-block: var(--space-xl) var(--space-2xl);
  background: var(--color-surface);
}

.home-topics__inner {
  width: 100%;
  max-width: var(--container-wide-box);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.home-topics__heading {
  max-width: none;
  margin-block-end: var(--space-lg);
  padding-inline: 0;
}

/* The tile layout is the current default. The editorial feature + list layout
   remains below and can be restored through `gkk_home_topics_layout`. */
.home-topics--tiles .home-topics__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg) var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* カードは Topics 一覧と同じもの（css/items_style.css・2026-10-05 ユーザー指定）。Top で変えるのは地の色だけ。
   PC は Topics の欄の地が白なので、カードをページ地のグレーにして溶けないようにする（スマホは下で白に戻す）。 */
.home-topics .topics-archive-card {
  background: var(--color-bg);
}

/* Editorial alternative -------------------------------------------------- */
.home-topics__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(18rem, 1fr);
  gap: var(--space-2xl);
  align-items: start;
}

.home-topic-feature {
  min-width: 0;
}

.home-topic-feature > a {
  display: block;
  color: var(--home-content-color);
}

.home-topic-feature__media {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-line);
}

.home-topic-feature__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-topic-feature__media--empty::after {
  display: block;
  height: 100%;
  background: linear-gradient(135deg, var(--color-line), var(--color-bg));
  content: "";
}

.home-topic-feature__body {
  margin-block-start: var(--space-sm);
}

.home-topic-meta {
  display: flex;
  gap: var(--space-sm);
  align-items: baseline;
  color: var(--home-ui-color);
  font-family: var(--font-latin);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
}

.home-topic-feature h3 {
  margin-block-start: var(--space-xs);
  color: var(--home-content-color);
  font-size: var(--fs-lg);
  font-weight: 500;
  line-height: var(--lh-snug);
  line-break: strict;
  text-wrap: balance;
  word-break: auto-phrase;
}

.home-topic-feature__body > p {
  display: -webkit-box;
  margin-block-start: var(--space-xs);
  overflow: hidden;
  color: var(--home-ui-color);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.home-topic-list {
  border-block-start: 1px solid var(--color-line-strong);
}

.home-topic-list__item {
  border-block-end: 1px solid var(--color-line);
}

.home-topic-list__item a {
  display: grid;
  grid-template-columns: clamp(5.5rem, 9vw, 7rem) minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: start;
  padding-block: var(--space-sm);
  color: var(--home-content-color);
}

.home-topic-list__media {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-line);
}

.home-topic-list__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-topic-list__media--empty::after {
  display: block;
  height: 100%;
  background: linear-gradient(135deg, var(--color-line), var(--color-bg));
  content: "";
}

.home-topic-list__body {
  min-width: 0;
}

.home-topic-list__item h3 {
  margin-block-start: var(--space-2xs);
  color: var(--home-content-color);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.6;
  line-break: strict;
  text-wrap: balance;
  word-break: auto-phrase;
}


@media (max-width: 1024px) {
  .home-topics--tiles .home-topics__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-topics__layout {
    gap: var(--space-lg);
  }

}

@media (min-width: 641px) and (max-width: 1024px) {
  .home-topics--tiles .home-topics__grid {
    row-gap: var(--space-md);
  }

}

/* Mobile / portrait tablet ------------------------------------------------ */
@media (max-width: 790px) {
  body.top-page #header {
    width: 100%;
  }

  /* Hero は通常フローへ落ちる。構図は top_hero.css の max-width:790px
     ブロックが持つので、ここでは Hero に触れない。 */

  /* 上だけ詰めて、見出しを Hero の直下に寄せる（2026-09-25）。Hero が通常の流れに入る幅なので、
     見出しが Hero から離れると最初の画面の下端に来て iOS のツールバーに被る。 */
  /* セクション間は上下 32px ずつで 64px（2026-10-07 ユーザー指摘。16 + 24 = 40px では窮屈だった）。
     セクション内（16px）の4倍にして、切れ目をはっきりさせる。 */
  .home-introduction {
    padding-block: var(--space-md) var(--space-lg);
  }

  .home-works,
  .home-topics {
    padding-block: var(--space-lg);
  }

  /* 背景は3セクションともページ地のグレーに揃える（2026-09-28・スマホだけ。PC は白/グレーの交互のまま）。
     区切りはセクション間の余白で付ける。Topics のカードはグレーの上で溶けないよう白に反転する。 */
  .home-introduction,
  .home-topics,
  .home-works {
    background: var(--color-bg);
  }

  .home-topics .topics-archive-card {
    background: var(--color-surface);
  }

  /* セクション内の余白はセクション間より狭く保つ（2026-09-28）。上の padding を詰めたので、
     見出し→本文・本文→一覧リンクが PC のままだと、切れ目がセクション間と区別できなくなる。 */
  .home-introduction__inner {
    gap: var(--space-sm);
  }

  .home-topics__heading,
  .home-works__heading {
    margin-block-end: var(--space-sm);
  }

  .home-section-footer {
    margin-block-start: var(--space-sm);
  }

  /* Works だけ track の下余白（PC ではスクロールバー用）が一覧リンクの前に足されるので外し、
     他セクションの「本文→一覧リンク」と揃える。 */
  .home-works__track {
    padding-block-end: 0;
  }

  .home-works__control {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0.65rem;
  }

  .home-topics__layout {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

}

@media (max-width: 640px) {
  /* スマホだけ情報量を絞る。序文は1段落目（見出しの理念の説明）だけ（2026-10-07 ユーザー指定。2026-10-01 からは
     見出しと Philosophy への導線だけにしていたが、序文も読ませたい）、Topics は先頭4件だけ（2026-09-25）。
     PC は序文2段落・Topics 6件のまま。 */
  .home-introduction__body > p + p {
    display: none;
  }

  .home-topics--tiles .topics-archive-card:nth-child(n + 5) {
    display: none;
  }

  /* Works は1枚ずつ、画面幅いっぱいの正方形で見せる（写真を大きく見せるため・2026-09-25）。
     送りは写真に重ねた丸い矢印とスワイプ。自動送りはしないので停止ボタンも出さない
     （js/home-content.js）。フッター行のドットは隠し、一覧リンクだけを右端に残す。 */
  /* 写真は本文と同じ左右の余白だけ内側に置く。隣の写真が余白に覗かないよう、
     写真同士の間隔は JS 側で余白より広く取っている（js/home-content.js）。 */
  .home-works__track {
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }

  .home-work-card {
    width: 100%;
    flex-basis: 100%;
  }

  .home-works__controls {
    display: none;
  }

  /* 作品名から一覧リンクまでを詰める（2026-10-07 ユーザー指摘）。作品名は箱を持たない文字で終わるので、
     Topics（カードの後）と同じ 16px でも離れて見えた。字から字まで 33 → 25px。リンクのタップ領域（44px）は削らない。 */
  .home-works__footer {
    margin-block-start: var(--space-2xs);
  }

  /* 写真と同じ正方形の枠を重ね、その上下中央に矢印を置く。枠自体は触れても素通しにして、
     スワイプと写真のリンクを奪わない。 */
  .home-works__overlay:not([hidden]) {
    display: block;
    position: absolute;
    /* Swiper が track に z-index: 1 を付けるので、それより手前に出す。 */
    z-index: 2;
    inset: 0 var(--gutter) auto;
    aspect-ratio: 1;
    pointer-events: none;
  }

  .home-works__overlay-control {
    display: grid;
    position: absolute;
    top: 50%;
    width: 44px;
    height: 44px;
    padding: 12px;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / 72%);
    color: var(--home-content-color);
    cursor: pointer;
    pointer-events: auto;
    place-items: center;
    transform: translateY(-50%);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }

  /* 丸の中心を写真の縁に置き、半円を外へ出す。ただし画面端には最低 4px を残す
     （390px 幅だと余白が 20px しかなく、ちょうど半分だと 2px はみ出すため、そこだけ少し内側に寄る）。
     44px はタップ領域の推奨最小なのでこれ以上小さくしない。 */
  .home-works__overlay-control--prev {
    left: calc(-1 * min(22px, var(--gutter) - 4px));
  }

  .home-works__overlay-control--next {
    right: calc(-1 * min(22px, var(--gutter) - 4px));
  }

  .home-works__overlay-control svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.75;
  }

  .home-works__overlay-control:disabled {
    opacity: 0.4;
    cursor: default;
  }

  .home-topics--tiles .home-topics__grid {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

}

@media (max-width: 480px) {
  .home-section-heading {
    gap: var(--space-sm);
  }

  .home-topic-feature h3 {
    font-size: var(--fs-md);
  }

  .home-topic-meta {
    flex-wrap: wrap;
    gap: var(--space-3xs) var(--space-sm);
  }

}