@charset "utf-8";
/* =============================================================================
works-detail-variants.css — Works 詳細の分割レイアウト
-----------------------------------------------------------------------------
Main / Story / Gallery に分けた採用レイアウトのスタイルを持つ。
規則の出所は knowledge research/2026-08-19_works-detail-design-language.md。
============================================================================ */
/* -----------------------------------------------------------------------------
案の骨格とは独立して試す規則
どれも単独で A に後付けできる。
-------------------------------------------------------------------------- */
[data-work-variant='one'] {
/* 縦の刻みを本文1行分（16px × 1.75）に合わせる。NDC が rlh 単位でやっている
ことを、html の line-height を触らずに済ませるため実値で持つ。
minimal: 本採用時は html に line-height を宣言して 1rlh へ置き換える。 */
--rhythm: 1.75rem; /* 28px = 本文1行 */
--rhythm-2: 3.5rem; /* 56px */
--rhythm-4: 7rem; /* 112px */
/* 欧文と数字にだけ掛ける字送り。和文には掛けない。 */
--tracking-latin: 0.06em;
/* 作品名 → 解説（並べる一覧・カルーセル）の余白。作品名の下の半行と解説の上の半行が足されて、
文字どうしで 31px（段落の間 23px より一段広い）。 */
--work-piece-copy-gap: calc(var(--space-sm) + var(--space-3xs));
}
@media (max-width: 767px) {
[data-work-variant='one'] {
--rhythm-2: 1.75rem;
--rhythm-4: 3.5rem;
}
}
@keyframes work-c-rise {
from {
opacity: 0;
transform: translateY(0.5em);
}
}
/* =============================================================================
子ページ共通の骨格
============================================================================ */
/* 子ページは型で幅を選ぶ。テーマの3系統（1340 フレーム / 960 コンテンツ /
720 プロース）をそのまま使う。Main は写真を大きく見せるので 1340、作品は
写真と短い説明なので 960、読み物は 720。いずれも中央寄せ。 */
.work-cgal {
--frame: var(--container-box);
}
.work-cgal__header,
.work-cgal__bar,
.work-cgal__items {
width: 100%;
max-width: var(--frame);
margin-inline: auto;
padding-inline: var(--gutter);
}
.work-cgal__header {
padding-top: var(--space-lg);
}
.work-cgal__eyebrow {
margin: 0;
font-size: var(--fs-sm);
color: var(--color-text-muted);
}
.work-cgal__title {
margin-block: var(--space-2xs) 0;
max-width: 20em;
font-size: var(--fs-xl);
font-weight: 500;
line-height: var(--lh-tight);
letter-spacing: normal;
color: var(--color-heading);
word-break: auto-phrase;
}
.work-cgal__lead {
margin-block: var(--space-md) 0;
font-size: var(--fs-md);
line-height: var(--lh-base);
color: var(--color-text-muted);
}
/* 原本の解像度がまちまちなので、一定の高さの「台」に載せて原寸を超えて
引き伸ばさない。小さい作品は小さいまま中央に置かれる。 */
.work-cgal__stage {
display: grid;
place-items: center;
overflow: hidden;
background: var(--color-surface);
}
.work-cgal__stage img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
/* =============================================================================
作品
解説を持つ代表作は大きく積み、短いキャプションの作品群は全点を組んで見せる。
============================================================================ */
.work-cgal__group {
margin-block-start: var(--work-block-space);
}
.work-cgal__bar {
padding-bottom: var(--space-md);
}
.work-cgal__group-title {
margin: 0;
font-size: var(--fs-lg);
font-weight: 500;
color: var(--color-heading);
}
/* margin の一括指定は使わない。共通の骨格が持つ `margin-inline: auto` を
打ち消して、写真の列だけ左に寄る。 */
.work-cgal__items {
display: grid;
gap: var(--space-xl);
margin-block: 0;
padding-block: 0;
list-style: none;
}
.work-cgal__item {
margin: 0;
min-width: 0;
}
.work-cgal__figure {
margin: 0;
}
.work-cgal__caption {
margin-top: var(--space-md);
}
.work-cgal__text {
display: block;
}
.work-cgal__item-title {
display: block;
font-size: var(--fs-md);
font-weight: 500;
line-height: var(--lh-snug);
color: var(--color-heading);
}
.work-cgal__item-body,
.work-cgal__item-caption {
display: block;
margin-top: var(--space-2xs);
font-size: var(--fs-base);
line-height: var(--lh-base);
color: var(--color-text);
}
/* --- 代表作 -----------------------------------------------------------------
積む場合は行ごとに高さが独立しているので、台の高さを固定する必要がない。
固定すると縦横比の違いがそのまま上下の白い帯になる。 */
/* 積む群では、原寸が列より小さい写真も列の左端に置く。中央に浮かせると、
直下の説明文と左端が食い違って列の輪郭が読めない。 */
.work-cgal__group--features .work-cgal__stage,
.work-cgal__group--collection .work-cgal__stage {
height: auto;
place-items: center start;
background: transparent;
}
/* 代表作も横に組まず、写真を1点ずつ見る流れに戻す。 */
/* --- 館内の工芸 -------------------------------------------------------------
JSが無い場合は写真とキャプションを1組ずつ積む。カルーセルが有効な場合は
写真を途切れず見せ、作品情報は横送りの外にまとめる。 */
.work-cgal__group--collection .work-cgal__items {
row-gap: var(--space-2xl);
}
.work-cgal__group--collection .work-cgal__caption {
margin-block-start: var(--space-2xs);
}
.work-cgal__group--collection .work-cgal__item-caption {
margin-block-start: 0;
max-width: 38em;
font-size: var(--fs-sm);
line-height: var(--lh-snug);
color: var(--color-text-muted);
}
/* --- 画面に入ったところで立ち上げる ----------------------------------------
初期状態は「見えている」。JS が `data-work-reveal` を立てたときだけ隠す。
スクリプトが落ちても中身が消えない。 */
[data-work-reveal] .work-reveal {
opacity: 0;
transform: translateY(1.5rem);
transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
[data-work-reveal] .work-reveal.is-in {
opacity: 1;
transform: none;
}
@media (max-width: 767px) {
/* 狭い画面では台を持たせず、写真を段の幅いっぱいに置く。350px の欄では
どの原本も縮小側になるので、引き伸ばしの心配が無い。 */
.work-cgal__stage,
.work-cgal__group--features .work-cgal__stage,
.work-cgal__group--collection .work-cgal__stage {
height: auto;
}
.work-cgal__stage img {
width: 100%;
max-height: none;
}
}
/* --- 控えめな横送り ---------------------------------------------------------
自動再生はしない。写真は1点ずつ大きく見せ、左右の広い操作領域と小さな
ドットで送る。`is-carousel` はJSから付くため、失敗時は縦積みが残る。 */
.work-cgal__carousel-viewport {
min-width: 0;
}
.work-cgal__carousel {
position: relative;
width: 100%;
max-width: var(--frame);
margin-inline: auto;
padding-inline: var(--gutter);
}
.work-cgal__carousel.is-carousel .work-cgal__carousel-viewport {
overflow-x: auto;
overscroll-behavior-inline: contain;
scroll-behavior: auto;
scroll-snap-type: inline mandatory;
scrollbar-width: none;
}
.work-cgal__carousel.is-programmatic .work-cgal__carousel-viewport {
scroll-snap-type: none;
}
.work-cgal__carousel.is-carousel .work-cgal__carousel-viewport::-webkit-scrollbar {
display: none;
}
.work-cgal__carousel.is-carousel .work-cgal__items {
display: flex;
gap: 0;
width: 100%;
max-width: none;
margin-inline: 0;
padding-inline: 0;
}
.work-cgal__carousel.is-carousel .work-cgal__item {
flex: 0 0 100%;
scroll-snap-align: start;
}
.work-cgal__carousel.is-carousel .work-cgal__stage {
display: grid;
width: 100%;
height: clamp(13rem, 44.45vw, 40rem);
place-items: center;
}
.work-cgal__carousel.is-carousel .work-cgal__stage img {
display: block;
width: 100%;
max-width: 100%;
height: auto;
max-height: 100%;
object-fit: contain;
}
.work-cgal__carousel.is-carousel .work-cgal__item .work-cgal__caption {
display: none;
}
.work-cgal__carousel-meta {
margin-block-start: var(--space-xs);
}
.work-cgal__carousel-controls {
position: absolute;
z-index: 1;
inset-block-start: 0;
inset-inline: var(--gutter);
display: flex;
justify-content: space-between;
height: clamp(13rem, 44.45vw, 40rem);
pointer-events: none;
}
.work-cgal__carousel-button {
display: grid;
width: clamp(2.5rem, 5vw, 3.75rem);
height: 100%;
padding: 0;
place-items: center;
border: 0;
border-radius: 0;
background: transparent;
font-size: 2rem;
font-weight: 300;
line-height: 1;
color: var(--color-heading);
cursor: pointer;
pointer-events: auto;
transition: color var(--dur-fast) var(--ease);
}
.work-cgal__carousel-button:hover,
.work-cgal__carousel-button:focus-visible {
color: var(--color-heading);
}
.work-cgal__carousel-button:disabled {
opacity: 0.16;
cursor: default;
}
.work-cgal__carousel-dots {
display: flex;
justify-content: center;
gap: 0.35rem;
}
.work-cgal__carousel-dot {
position: relative;
width: 0.75rem;
height: 1rem;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
}
.work-cgal__carousel-dot::before {
position: absolute;
top: 50%;
left: 50%;
width: 0.16rem;
height: 0.16rem;
border-radius: 50%;
background: var(--color-text-faint);
content: "";
transform: translate(-50%, -50%);
transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.work-cgal__carousel-dot.is-current::before {
background: var(--color-heading);
transform: translate(-50%, -50%) scale(1.35);
}
.work-cgal__info {
width: 100%;
max-width: var(--frame);
margin-block-start: var(--work-block-space);
margin-inline: auto;
padding-inline: var(--gutter);
}
.work-cgal__info-summary {
display: flex;
gap: var(--space-md);
align-items: center;
padding-block: var(--space-md);
font-size: var(--fs-sm);
line-height: var(--lh-snug);
color: var(--color-heading);
cursor: pointer;
list-style: none;
border-block: 1px solid var(--color-line);
}
.work-cgal__info-summary::-webkit-details-marker {
display: none;
}
.work-cgal__info-summary::after {
content: "+";
margin-inline-start: var(--space-sm);
color: var(--color-text-muted);
}
.work-cgal__info[open] .work-cgal__info-summary::after {
content: "−";
}
.work-cgal__info-count {
margin-inline-start: auto;
color: var(--color-text-faint);
}
.work-cgal__info-list {
max-width: 42em;
margin: 0;
padding: var(--space-xl) 0;
list-style: none;
}
.work-cgal__info-item {
display: grid;
grid-template-columns: 2.5rem minmax(0, 1fr);
gap: var(--space-sm);
font-size: var(--fs-sm);
line-height: var(--lh-snug);
color: var(--color-text-muted);
}
.work-cgal__info-item + .work-cgal__info-item {
margin-block-start: var(--space-md);
}
.work-cgal__info-index {
font-size: var(--fs-xs);
font-variant-numeric: tabular-nums;
color: var(--color-text-faint);
}
.work-cgal__info-title {
display: block;
font-weight: 500;
color: var(--color-heading);
}
.work-cgal__info-body {
margin: 0;
}
.work-cgal__info-title + .work-cgal__info-body {
margin-block-start: var(--space-2xs);
}
/* =============================================================================
1ページ完結の作品ページ
-----------------------------------------------------------------------------
単独プロジェクトのクライアントはここで情報が閉じる。Main と子ページに分けて
いた頃の「続きは別ページ」という前提が無いので、見出しで区切りながら一本に
通して読ませる。
冒頭写真は全幅。本文と途中の写真は960の枠で左右端を揃える。
============================================================================ */
.work-one {
--one-frame: var(--container-box);
/* 原稿は管理画面のフォームから入る。本文に貼った URL や長い英数字の並びが
折れずに枠を突き抜け、スマホではページごと横にスクロールしていた。
入り切らない語だけを折る（和文の折り返しは変わらない）。 */
overflow-wrap: break-word;
}
/* 複数行の欄（段落・解説）で打った改行をそのまま出す。
カルーセルは解説を textContent で写すので、
ではなく改行文字のまま扱う。
キャッチコピーは gkk_work_phrase() が改行を
にする（スマホでは下で消す）。 */
.work-one :is(.work-one__paragraph, .work-one__piece-body, .work-one__carousel-body) {
white-space: pre-line;
}
/* 見出し類で打った改行は PC の幅に合わせたもの。スマホでは短い行や1〜2字の送りを作るので、
消して文節の折り返し（budoux-ja）に任せる。 */
@media (max-width: 767px) {
.work-one__line-break {
display: none;
}
}
[data-work-variant='one'] .menu-container:has(~ .work-one) {
max-width: var(--container-box);
}
/* 半行のアキを打ち消して、見た目の間隔を指定値どおりにする。 */
[data-work-variant='one'] :where(h1, h2, h3, h4, h5, p) {
margin-block: calc((1em - 1lh) / 2);
}
/* 本文中リンクは色でなく下線の濃さで反応させる。`li` は作品の並びなので除く。 */
[data-work-variant='one'] :is(p, dd) a {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
text-decoration-color: var(--color-line-strong);
transition: text-decoration-color var(--dur-fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
[data-work-variant='one'] :is(p, dd) a:hover {
text-decoration-color: var(--color-text);
}
}
/* --- 枠 -------------------------------------------------------------------- */
.work-one__header,
.work-one__section-inner,
.work-one__credit-inner,
.work-one__related-inner,
.work-one__back {
width: 100%;
max-width: var(--one-frame);
margin-inline: auto;
padding-inline: var(--gutter);
}
/* --- 作品名 ----------------------------------------------------------------
行間を詰めた大きな和文どうしを margin で空けると、両側のハーフレディング
（それぞれ負値）が指定分を食い切って行が重なる。ここは gap で確定させる。 */
.work-one__header {
display: grid;
justify-items: start;
gap: var(--space-sm);
padding-block: clamp(28px, 4vw, 56px);
}
/* 案件名とクライアントは1つの塊。詰めて置き、一行コピーとの間だけを空ける。 */
.work-one__identity {
display: grid;
justify-items: start;
gap: var(--space-2xs);
}
.work-one__header > *,
.work-one__identity > * {
margin-block: 0;
}
.work-one__title {
max-width: 36em;
margin-block: 0;
font-size: var(--fs-md);
/* セザンヌも Noto Sans JP も 500 しか読んでいないので、実際は 500 で出る。 */
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--color-heading);
word-break: auto-phrase;
}
/* キャッチコピーが無いと 18px と 14px の2行だけになり、写真に対して文字が軽すぎた。
空いた大きい行を作品名が引き継ぎ、級数をキャッチと揃える。クライアントは直下のまま。 */
.work-one__header--no-tagline .work-one__title {
font-size: clamp(22px, 2.4vw, 34px);
}
/* 単独ページの写真は、位置を動かさず旧Detailに近い軽いフェードだけで見せる。 */
[data-work-reveal] [data-work-variant='one'] .work-reveal {
transform: none;
transition: opacity var(--dur-slow) ease;
}
.work-one__tagline {
max-width: 30em;
margin-block: 0;
font-size: clamp(22px, 2.4vw, 34px);
font-weight: 600;
line-height: 1.5;
color: var(--color-text);
}
/* 級数はクレジットと同じ 14px。大きさで持ち上げるのではなく、タイトル直下に
詰めて置くことで塊にする（下の級数の階段を崩さない）。 */
.work-one__client {
margin-block: 0;
font-size: var(--fs-sm);
font-weight: 500;
line-height: var(--lh-snug);
color: var(--color-text-muted);
}
.work-one__hero {
position: relative;
isolation: isolate;
}
/* 器の高さは写真の比率が決める。ただし画面の高さで頭打ちにする。
固定高 + object-fit: cover だと、3:2 の写真で縦が28%、幅の狭い端末では横が41%
落ちていた（実測）。比率に委ねると 1440 幅で 960px になり、今度はノートPCの
画面高（900px前後）を越えて**下端のタイトルが初期表示から落ちる**。
そこで上限を 100svh に置き、越える分だけを切る。1440x900 で切れるのは 6% 前後で、
固定高の 28% より遥かに小さい。頭打ちは写真の箱に掛け、切るのは object-fit: cover に任せる
（上下へ均等に切れる）。器に頭打ちを掛けて写真をはみ出させると、端数の高さで器と写真の
下端が揃わず、写真の下に地の白が細い線で出た。
重ね方はグリッドの同一セル。コピーが写真より高くなる場合は器が伸び、
写真の下に地の色が出る。
地の色は白（透過素材を置いたときに写真の後ろが黒く出ないように・2026-10-01 ユーザー指定）。
768px 以上はコピーを絶対配置にするので器は写真の高さのままで、地が出るのは透過部分だけ。 */
.work-one__hero--image {
display: grid;
grid-template-areas: "hero";
align-items: end;
background: var(--color-surface);
}
/* ⚠️ コピーへ grid-area を与えないこと。絶対配置にしたとき、包含ブロックが
パディングボックスではなく**グリッド領域**になり、
写真と器の高さが食い違ったときに下端合わせがずれる。写真だけを領域に乗せる。 */
.work-one__hero-image {
grid-area: hero;
}
/* スマホ用の画像を差し替える器。箱を作らず、中の写真をグリッドのセルに直接載せる。 */
.work-one__hero-picture {
display: contents;
}
.work-one__hero-image {
z-index: -2;
display: block;
width: 100%;
height: auto;
}
@media (min-width: 768px) {
/* 幅は 100% のまま高さだけを頭打ちにする。器は写真の箱の高さになる。 */
.work-one__hero-image {
max-height: 100svh;
object-fit: cover;
}
}
/* 器の下端へ固定する（スマホも PC と同じく写真に重ねる・2026-10-05 ユーザー指定）。 */
.work-one__hero--image .work-one__hero-copy {
position: absolute;
inset-inline: 0;
bottom: 0;
}
.work-one__hero-copy {
position: relative;
}
/* 陰影はコピーの範囲だけに留め、元写真の明るさと浴槽の色を残す。
濃さ（文字の下で 25〜45%）は白い写真でも作品名が読める値なので保ち、範囲を削る（2026-10-20 ユーザー指摘「全面暗く見える」）。
薄い始まりを箱の上から 15% まで下げる。スマホは文字が横幅いっぱいなので、縦に濃くなるだけで敷く。
PC は文字が左に寄るので、左下を中心に楕円で薄くする（同日ユーザー判断。今・素直に敷く・丸めるを見比べた）。
縦と右へのグラデーションを掛け合わせた形は右下へ斜めに切れて白い写真で境目が見え、素直に敷くと下端が横幅いっぱいの灰色の帯になった。
楕円は箱の幅と高さいっぱい（ellipse 100% 100%）で、箱の上端と右端でちょうど消える（高さを箱より大きくすると上端に段差が出た）。
地の平らな画像（--plate）は下の指定で 4% を素直に敷く。 */
.work-one__hero--image .work-one__hero-copy::before {
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(to bottom, transparent 15%, rgb(0 0 0 / 25%) 50%, rgb(0 0 0 / 45%));
content: "";
pointer-events: none;
}
@media (min-width: 768px) {
.work-one__hero--image:not(.work-one__hero--plate) .work-one__hero-copy::before {
background: radial-gradient(ellipse 100% 100% at 0% 100%, rgb(0 0 0 / 45%), rgb(0 0 0 / 25%) 50%, rgb(0 0 0 / 0%));
}
}
.work-one__hero--image :is(.work-one__title, .work-one__client, .work-one__tagline) {
color: #fff;
text-shadow: 0 1px 3px rgb(0 0 0 / 45%);
}
.work-one__hero--image .work-one__header {
max-width: var(--container-wide-box);
}
.work-one__hero.is-image-fallback {
background: var(--color-bg);
}
.work-one__hero.is-image-fallback .work-one__hero-image,
.work-one__hero.is-image-fallback .work-one__hero-copy::before {
opacity: 0;
}
.work-one__hero.is-image-fallback :is(.work-one__title, .work-one__client, .work-one__tagline) {
color: var(--color-text);
text-shadow: none;
}
/* --- 地の平らな画像の作品（ロゴ・図版。原稿の hero.surface = 'flat'・2026-10-20 ユーザー判断）------------------------
地の平らな画像では、作品名の下の影とヘッダーの下の影が灰色の帯に見えて汚れた（Asue の VI など）。
影は上下とも敷かず、作品名・クライアント・キャッチコピーは普通の文字色（黒）にする。ヘッダーは白にせずグレーで載せる
（下の白いヘッダーの指定は .work-one__hero--plate を除いてある）。
PC は写真の作品と同じく写真の下端に重ねる（同日ユーザー指摘。写真の下に出すと、ヘッダーは写真に重なるのに作品名は外に出て、
ロゴが上に詰まって見えた。黒い文字なら影なしで重ねられる。上にヘッダー・下に作品名で、ロゴが真ん中に来る）。
スマホは写真の下に出す（ヘッダーを写真に重ねず、横長のロゴは低いので重ねるとぶつかる）。 */
/* 作品名の下だけ、ごく薄い影を敷く（PC。下端で黒 4%（同日デザイナー決定。6% と 10% と見比べた）。同日ユーザー指摘「白地の上に置くだけだとタイトル感が薄れる」）。
文字が黒なので濃くしない（10% で灰色の帯が分かるようになる）。上 15% から縦に濃くなるだけで、横幅いっぱいに素直に敷く
（同日ユーザー判断。下端の色が白に黒 4% ≒ #f5f5f5 でページの地 #f8f8f8 とほぼ同じなので、ヒーローからページへ境目なくつながる。
右へ薄くすると右下だけ白く残り、下端に白い線が見えた）。
スマホは作品名を写真の下（白い面）に出すので敷かない。 */
.work-one__hero--plate .work-one__hero-copy::before {
background: linear-gradient(to bottom, transparent 15%, rgb(0 0 0 / 2%) 50%, rgb(0 0 0 / 4%));
}
@media (max-width: 767px) {
.work-one__hero--plate .work-one__hero-copy::before {
content: none;
}
}
.work-one__hero--plate :is(.work-one__title, .work-one__client, .work-one__tagline) {
color: var(--color-text);
text-shadow: none;
}
/* スマホ: 写真の下に作品名を出し、作品名まで含めてヘッダーの下に見えている高さに収める（縦の flex で写真だけが縮む。
縮んだぶんは cover で上下を切る。作品名の高さは測らない）。写真の作品のように 3:4 に切ると横長のロゴの端が切れるので、
画像の比率のまま出す（スマホ用の画像があればその比率）。
⚠️ 縦の flex では元のグリッドの align-items: end が横に掛かり作品名が右へ寄るので、stretch に戻す。 */
@media (max-width: 767px) {
.work-one__hero--plate {
display: flex;
flex-direction: column;
align-items: stretch;
max-height: calc(100svh - var(--mobile-header-height, var(--header-bar-compact)));
}
.work-one__hero--plate .work-one__hero-image {
flex: 0 1 auto;
min-height: 0;
max-height: none;
aspect-ratio: auto;
object-fit: cover;
}
.work-one__hero--plate .work-one__hero-copy {
position: static;
flex: none;
}
}
/* スマホで写真に重ねた文字の大きさと余白を詰める（2026-10-27 ユーザー判断。?hero=compact で見比べて既定にした）。キャッチのある作品だけ。
390px 幅では、作品名 17・クライアント 14・キャッチ 22px（2〜3行）と上下の余白 28px で、文字が写真（3:4 で約 520px）の
高さの 4 割前後に届き、写真の中ほどまで被った（ユーザー指摘）。キャッチ 18 / 作品名 16 / クライアント 13px にし、
余白を 24px・キャッチとの間を 12px に詰めると、同じ作品で 3 割ほどに収まる（計算）。キャッチがいちばん大きい並びは保つ。
作品名とクライアントは1行に入れば横に並べる（下の .work-one__identity）。
文字を写真の下に分ける形（キャッチを下・作品名とクライアントを下の2通り）は違和感が強いとして外した（同日ユーザー）。PC は変えない。 */
@media (max-width: 767px) {
.work-one__hero--compact .work-one__header {
gap: var(--space-xs);
padding-block: 24px;
}
/* 作品名とクライアントは横に並べ、1行に入らなければクライアントを次の行へ送る（同日ユーザー指定。行を減らして文字の塊を
写真の下へ寄せる）。作品名が長くて折り返すときは、作品名が行の幅を取り、クライアントはその下に来る。字の並びはベースラインでそろえる。 */
.work-one__hero--compact .work-one__identity {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--space-2xs) var(--space-xs);
}
.work-one__hero--compact .work-one__title {
font-size: 16px;
line-height: 20px;
}
.work-one__hero--compact .work-one__client {
font-size: 13px;
line-height: 20px;
}
.work-one__hero--compact .work-one__tagline {
font-size: 18px;
line-height: 27px;
}
}
/* スマホは 3:4 の縦長の枠で見せ、PC と同じく作品名を写真の下端に重ねる（影と白文字も同じ・2026-10-05 ユーザー指定）。
以前は 3:2 の写真が 260px 前後にしかならず、重ねると写真が帯になるので写真の下へ流していた。
スマホ用の画像（hero.mobileImage）があれば template が source で差し替え、無ければ同じ画像の中央を切り出す。
高さはヘッダーの下に見えている画面の高さで頭打ちにする（767px 幅だと 3:4 は画面より高い）。 */
@media (max-width: 767px) {
.work-one__hero-image {
aspect-ratio: 3 / 4;
max-height: calc(100svh - var(--mobile-header-height, var(--header-bar-compact)));
object-fit: cover;
object-position: center;
}
}
/* 写真のある Works だけ、ヘッダーを写真に直接重ねて Top と同じく白で載せる（2026-10-06 デザイン FB で試作。
それまでは白 65% の帯を敷いてグレーで載せていた）。共通ナビの幅と操作は維持する。
白にするのは流れの中で写真に載っている間だけ。上へ戻して固定したとき（不透明の面の上）、ドロワーを
開いている間、写真が読めなかったときはグレーへ戻す。ロゴと SNS は header.php が白とグレーの2版を出す。
スマホは写真に重ねないので下の 767px 以下で元に戻している。 */
body.site-page:has(.work-one__hero--image) > #header-wrapper {
position: absolute;
inset: 0 0 auto;
height: auto;
}
/* 上端の影の帯。既定では敷かない（文字の影だけで読ませる）。帯を敷くと青空が曇天に、白い写真は灰色の帯に
見えた（2026-10-09 ユーザー判断）。真っ白に近い写真など文字の影だけでは読めない写真だけ、編集画面の
「ヘッダーの下に影をつける」で敷く（hero.header。inc/works-detail.php の gkk_work_hero_has_header_shade()）。
濃さは上端 28% の1種類。真っ白の写真でもこれで足りた（50% の濃い影は選択肢から外した・同日ユーザー判断）。
高さはバーの 1.5 倍（2026-10-20 に 2 倍から縮めた。ユーザー指摘「全面暗く見える」。ナビの文字はバーの中ほどまでなので足りる）。
写真に載せるものなので、写真が読めなかったときは敷かない。 */
body.site-page:has(.work-one__hero--shade) > #header-wrapper::before {
content: "";
position: absolute;
inset: 0 0 auto;
z-index: -1;
height: calc(1.5 * var(--mobile-header-height, var(--header-bar)));
pointer-events: none;
background: linear-gradient(
to bottom,
rgb(0 0 0 / 28%),
rgb(0 0 0 / 22%) 30%,
rgb(0 0 0 / 12%) 55%,
rgb(0 0 0 / 4%) 80%,
rgb(0 0 0 / 0%)
);
}
body.site-page.body-no-scroll:has(.work-one__hero--image) > #header-wrapper::before,
body.site-page:has(.work-one__hero.is-image-fallback) > #header-wrapper::before {
display: none;
}
/* ロゴと SNS は白とグレーを同じ座標へ重ね、opacity で入れ替える（Top と同じ。top_header_style.css）。
既定はグレーで、白は下の「写真に載っている間」だけ出す。 */
body.site-page:has(.work-one__hero--image) .index-siteinfo a.index-sitetop {
display: grid;
}
body.site-page:has(.work-one__hero--image) :is(.top-hero-ui-asset--white, .top-hero-ui-asset--grey) {
grid-area: 1 / 1;
}
body.site-page:has(.work-one__hero--image) .top-hero-ui-asset--white {
opacity: 0;
}
/* 写真に載っている間。流れの中（固定していない）で、ドロワーが閉じていて、写真が読めている。
グレーへは即座に移る（固定は画面の外で起き、ドロワーの面も即座に敷かれる）。白へは先頭へ戻って
固定を外したときの面のフェード（下の #header::before・0.6s）と同じ速さで戻す。 */
@media (min-width: 768px) {
html:not([data-header-reveal]) body.site-page:not(.body-no-scroll):has(.work-one__hero--image:not(.is-image-fallback, .work-one__hero--plate)) #header {
--work-header-ui: #fff;
/* 白は濃くできないので、hover は薄くする方向で示す（Top と同じ）。 */
--work-header-ui-hover: rgb(255 255 255 / 70%);
}
/* 文字の影。上端の影の帯を敷かないので、これで読ませる。ずらさずに薄く広げる（下の作品名と同じ 0 1px 3px 45% は、
細いナビでは影が文字の下に付いて見えてきつかった・2026-10-09 ユーザー指摘）。 */
html:not([data-header-reveal]) body.site-page:not(.body-no-scroll):has(.work-one__hero--image:not(.is-image-fallback, .work-one__hero--plate)) #header #menu-topnavi > li > a {
color: var(--work-header-ui);
text-shadow: 0 0 6px rgb(0 0 0 / 25%);
transition: color var(--dur-slow) ease;
}
html:not([data-header-reveal]) body.site-page:not(.body-no-scroll):has(.work-one__hero--image:not(.is-image-fallback, .work-one__hero--plate)) #header #menu-topnavi > li > a:hover {
color: var(--work-header-ui-hover);
}
html:not([data-header-reveal]) body.site-page:not(.body-no-scroll):has(.work-one__hero--image:not(.is-image-fallback, .work-one__hero--plate)) #smp-menu-button span {
background-color: var(--work-header-ui);
box-shadow: 0 0 6px rgb(0 0 0 / 25%);
transition:
transform 0.2s,
opacity 0.1s,
background-color var(--dur-slow) ease;
}
html:not([data-header-reveal]) body.site-page:not(.body-no-scroll):has(.work-one__hero--image:not(.is-image-fallback, .work-one__hero--plate)) :is(.top-hero-ui-asset--white, .top-hero-ui-asset--grey) {
transition: opacity var(--dur-slow) ease;
}
html:not([data-header-reveal]) body.site-page:not(.body-no-scroll):has(.work-one__hero--image:not(.is-image-fallback, .work-one__hero--plate)) .top-hero-ui-asset--white {
opacity: 1;
filter: drop-shadow(0 0 6px rgb(0 0 0 / 25%));
}
html:not([data-header-reveal]) body.site-page:not(.body-no-scroll):has(.work-one__hero--image:not(.is-image-fallback, .work-one__hero--plate)) .top-hero-ui-asset--grey {
opacity: 0;
}
/* 退避中から途中で固定を外したときは、面と同じく即座に白へ（下の #header::before）。 */
html[data-header-scrolled]:not([data-header-reveal]) body.site-page:has(.work-one__hero--image) #header :is(#menu-topnavi > li > a, .top-hero-ui-asset--white, .top-hero-ui-asset--grey) {
transition: none;
}
html[data-header-scrolled]:not([data-header-reveal]) body.site-page:has(.work-one__hero--image) #smp-menu-button span {
transition: transform 0.2s, opacity 0.1s;
}
}
/* 上へ戻したヘッダーは不透明の面で固定する（css/header_style.css の #header::before）。
先頭まで戻ると固定を外すので、面が一緒に消えて写真へ一瞬で切り替わっていた。
ここだけ面を流れの中にも残し、透明へフェードさせて下の写真を見せる。
流れの中の面は #header-wrapper（画面幅いっぱい）を基準に、バー + 伸びの高さで敷く。
固定中の 50% - 50vw は使わない。100vw がスクロールバー込みになる幅帯があり、
流れの中だとその分だけ横スクロールが出る（固定中は画面の外へ出るだけで済んでいる）。
--mobile-header-height は 980 以下でその帯のバー高（css/header_style.css）。
緩急は --ease ではなく ease。--ease は出だしの 60ms で半分以上抜け、切り替わりに見える。 */
html:not([data-header-reveal]) body.site-page:has(.work-one__hero--image) #header::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: calc(
var(--mobile-header-height, var(--header-bar)) + var(--header-reveal-extend, var(--space-md))
);
z-index: -1;
pointer-events: none;
border-bottom: 1px solid transparent;
background-color: var(--color-bg);
opacity: 0;
transition:
opacity var(--dur-slow) ease,
border-color var(--dur-fast) ease;
}
/* フェードは先頭で固定を外したとき（data-header-scrolled が無い）だけ。
退避中にゆっくり戻して途中で固定を外したときは、流れのバーが画面に入り始めて
いるので、不透明の面が遅れて消えるのが見える。そちらは従来どおり即座に消す。 */
html[data-header-scrolled]:not([data-header-reveal]) body.site-page:has(.work-one__hero--image) #header::before {
transition: none;
}
/* 速く先頭へ戻すと、滑り込みの途中で固定が外れる。transform の遷移は終点（none）が流れの中の値と
同じなので、固定を外した後も走り続け、その間は #header が上の面の配置の基準になる。面が #header の幅
（1340 の器）に縮んで左右に写真が覗き、バーも遅れて動いて見えた（2026-10-06 ユーザー指摘）。
流れの中では遷移を止めて残りを打ち切る（transition-property が合わない遷移は取り消される）。 */
html:not([data-header-reveal]) body.site-page:has(.work-one__hero--image) #header {
transition: none;
}
/* ドロワー展開時は透過をやめる。透明のままだと、ドロワーの面の上へ写真が
帯状に覗いて分断されて見える。JS が body へ .body-no-scroll を付けるので
それをフックにする（Top も同じ扱い。top_header_style.css のドロワー展開時）。 */
body.site-page.body-no-scroll:has(.work-one__hero--image) > #header-wrapper {
background: var(--color-bg);
}
/* スマホはヘッダーを写真に重ねない。バーを不透明のまま流れに置き、写真はその下から始める
（3:2 の写真のころは 260px 前後の3分の1がヘッダーに隠れた。3:4 になった今も、作品名を重ねる
下端と同じ写真の上にバーまで載せると、写真の見える範囲が狭くなる）。 */
@media (max-width: 767px) {
body.site-page:has(.work-one__hero--image) > #header-wrapper {
position: relative;
height: var(--mobile-header-height);
padding-block: 0;
background: var(--color-bg);
}
body.site-page:has(.work-one__hero--image) > #header-wrapper::before {
display: none;
}
}
body.site-page:has(.work-one) > #content-wrapper::before {
display: none;
}
body.site-page:has(.work-one) > #content-wrapper > #content {
margin-block-start: 0;
}
/* --- 節 -------------------------------------------------------------------- */
.work-one__section {
margin-block-start: var(--rhythm-2);
}
/* 写真・作品群（カルーセルの罫・写真）で終わる節の後は、段落の下の半行が無いぶん節の間が詰まって見える
（PC で 60 対 68）。8px 足して、どの節の間も見た目 68 にそろえる（スマホは下で同じ形）。
作品の節（具体的な表現）の前後だけを 5rem に広げていたのは 2026-10-09 にやめた。入れたとき（10-02）は
見出しの下も 50px 前後あって見出しが浮いたが、今は見出しの下が 26px で、節の間はその2倍以上ある。
この節の前後だけ広いのが違和感として見えた（ユーザー指摘）。 */
.work-one__section:has(> .work-one__section-inner > :is(.work-one__media, .work-one__group:not(.work-one__group--text, .work-one__group--text-below)):last-child) + .work-one__section {
margin-block-start: calc(var(--rhythm-2) + var(--space-2xs));
}
.work-one__section--pieces :is(.work-one__heading, .work-one__paragraph) + .work-one__group {
margin-block-start: var(--space-lg);
}
/* 見出し、本文、途中の写真を同じ左右端に揃える。 */
.work-one__heading,
.work-one__paragraph {
max-width: var(--container);
margin-inline: auto;
}
/* 見出しと本文の間は指定値のほかに双方のハーフレディング（見出し 1.4・本文 2）が
乗る。指定を 24px のままにすると見た目 37px 前後まで開き、節の中で見出しだけが
浮いた。実測の見えが1行弱に収まる 12px を基準にする。 */
.work-one__heading {
margin-block: 0 var(--space-xs);
font-size: var(--fs-lg);
font-weight: 500;
line-height: var(--lh-snug);
color: var(--color-heading);
word-break: auto-phrase;
}
/* 作品の節も見出し・本文・節間隔を他の節と揃える（見出しだけ大きくすると、
区分の違う節に見えてページの調子が崩れた）。 */
/* 両端揃えは字間が行ごとに伸縮して、和文だと行末の揃いより行内のムラが目立つ。
左寄せにする（text-wrap: pretty は和文だと行末を手前で折って右端が欠けるので使わない。
css/foundation.css の本文基線を参照）。
⚠️ 本文に word-break: auto-phrase も当てない。文節の切れ目でしか折れず、長い文節が送られる
たびに行末が大きく空く（390px 幅で最大 121px・2026-09-25 に本文から撤去）。見出しだけに使う。 */
.work-one__paragraph,
.work-one__piece-body {
margin-block: 0;
font-size: var(--fs-base);
line-height: var(--lh-loose);
text-align: start;
line-break: strict;
hanging-punctuation: allow-end;
/* かな・括弧類は palt で詰め、句読点は下の span で全角の送りへ戻す。 */
font-feature-settings: "palt" 1;
}
.work-one__paragraph .work-prose__punct,
.work-one__piece-body .work-prose__punct {
font-feature-settings: normal;
}
/* 作品の解説（並べる一覧・カルーセル）は段落ごとの p を持つ（gkk_work_prose_block()）。
文字どうしの空きで「行の間 8 < 段落の間 23 < 作品名 → 解説 31」と段を付ける（2026-10-09 ユーザー指定。
段落の間を作品名との間と同じ 19 にそろえたら、2つがほぼ同じに見えた）。段落の間は余白 8px に
行の上下の半行（各 7.5px = 15px の文字・行間 2）が足される。作品名 → 解説は下の --work-piece-copy-gap。
空行を pre-line で出していた頃は段落の間が 45px 開いていた。 */
:is(.work-one__piece-body, .work-one__carousel-body) > p {
margin-block: 0;
}
:is(.work-one__piece-body, .work-one__carousel-body) > p + p {
margin-block-start: var(--space-2xs);
}
/* 意味段落の切れ目はアキで示す。字下げは使わない。
上下の半行（8px ずつ）が乗るので、見た目は指定値 + 16px。24px では見た目 40px と
1行より広く、段落が切れて見えた。見た目を本文1行分の 32px にする。 */
.work-one__paragraph + .work-one__paragraph {
margin-block-start: var(--space-sm);
}
/* --- 図版 ------------------------------------------------------------------ */
.work-one__figure {
margin: var(--space-xl) 0 0;
}
.work-one__figure img {
display: block;
width: 100%;
height: auto;
}
/* 縦長の写真は列幅いっぱいだと画面2枚分近くになる。画面の高さで頭打ちにし、
切らずに中央へ寄せる。正方形と縦長だけ（is-tall、gkk_work_figure_is_tall()）。
横長にも掛けていたときは、画面の縦が短いと 3:2 や 4:3 の写真まで幅が縮んでいた。 */
.work-one__figure img.is-tall {
max-height: 80svh;
object-fit: contain;
}
.work-one__figure + .work-one__paragraph {
margin-block-start: var(--space-xl);
}
.work-one__caption {
margin-block: var(--space-2xs) 0;
font-size: var(--fs-2xs);
line-height: var(--lh-snug);
color: var(--color-text-muted);
}
/* 写真が未手配の枠。必要な絵と、その絵が流れの中で果たす役割を書いておく。
公開前に全て実写へ差し替わる前提の暫定表示。 */
.work-one__pending {
display: grid;
align-content: end;
min-height: 18rem;
padding: var(--space-lg);
background: #efefed;
color: var(--color-text-muted);
}
.work-one__figure--hero .work-one__pending {
min-height: 26rem;
}
.work-one__figure--piece .work-one__pending {
min-height: 14rem;
}
.work-one__pending-label {
font-size: var(--fs-2xs);
color: var(--color-text-muted);
}
.work-one__pending-subject {
max-width: 30em;
margin-block-start: var(--space-sm);
font-size: var(--fs-md);
font-weight: 500;
line-height: var(--lh-snug);
color: var(--color-heading);
}
.work-one__pending-intent {
max-width: 42em;
margin-block-start: var(--space-2xs);
font-size: var(--fs-sm);
line-height: var(--lh-base);
}
/* --- 作品 ------------------------------------------------------------------ */
.work-one__group {
margin-block-start: var(--space-xl);
}
/* 小見出しは一覧のまとまりの名前。作品名（16px）と見分けが付くよう、節見出し
（20–24px）との間の 18 / 20px に置く。字の大きさに加えて、前の一覧との間を
広く取り、自分の作品へは詰めて付けることで、どの作品の見出しかを示す。
区切り線は使わない（カルーセルの有無で線の有無が変わり、調子が揃わなかった）。 */
.work-one__group-heading {
margin-block: 0 var(--space-sm);
font-size: 1.125rem;
font-weight: 500;
line-height: var(--lh-snug);
color: var(--color-heading);
}
@media (min-width: 769px) {
.work-one__group-heading {
font-size: 1.25rem;
}
}
.work-one__pieces {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--rhythm-2);
margin: 0;
padding: 0;
list-style: none;
}
.work-one__piece {
display: flex;
flex-direction: column;
margin: 0;
min-width: 0;
}
.work-one__piece .work-one__figure {
margin-block-start: 0;
}
/* 作品名・解説は本文なので、既定では写真の前に置く（他の節の「見出し → 本文 → 写真」と
同じ順）。マークアップもこの順で、写真を下に置く群は order で写真を先頭へ回す。
カルーセルは説明を写真の下の1か所へ写すので、こちらも写真が先。 */
.work-one__piece > :is(.work-one__piece-title, .work-one__piece-body) + .work-one__figure {
margin-block-start: var(--space-md);
}
:is(.work-one__group--text-below, .work-one__group--carousel) .work-one__piece > .work-one__figure {
order: -1;
margin-block-start: 0;
}
:is(.work-one__group--text-below, .work-one__group--carousel) .work-one__piece:has(> .work-one__figure) > :is(.work-one__piece-title, .work-one__piece-body):first-child {
margin-block-start: var(--space-md);
}
.work-one__piece-title {
max-width: 28em;
margin-block: 0;
font-size: var(--fs-base);
font-weight: 500;
line-height: var(--lh-snug);
color: var(--color-heading);
word-break: auto-phrase;
}
.work-one__piece-body {
margin-block: var(--work-piece-copy-gap) 0;
}
.work-one__piece-caption {
margin-block: var(--space-2xs) 0;
font-size: var(--fs-2xs);
line-height: var(--lh-snug);
color: var(--color-text-muted);
}
/* 名札だけの作品群は、読ませるのでなく見せる。詰めて並べる。 */
.work-one__group--plates .work-one__pieces {
gap: var(--space-lg);
}
/* 2列で作品名が上にあると、名前の行数が左右で違うぶん写真の頭がずれる。写真を下へ寄せて揃える。 */
.work-one__group--plates:not(.work-one__group--text-below, .work-one__group--carousel) .work-one__piece > :is(.work-one__piece-title, .work-one__piece-body):has(+ .work-one__figure) {
margin-block-end: var(--space-md);
}
.work-one__group--plates:not(.work-one__group--text-below, .work-one__group--carousel) .work-one__piece > :is(.work-one__piece-title, .work-one__piece-body) + .work-one__figure {
margin-block-start: auto;
}
/* 写真の無い群は文章の並び。写真向けの広いアキを使わず、段落どうしと同じ詰め方にする。 */
.work-one__group--text {
margin-block-start: var(--space-sm);
}
.work-one__group--text .work-one__pieces {
gap: var(--space-sm);
}
/* 後半の作品群は、写真と説明の対応が一目で分かる1枚表示のフェードにする。
作品数は下のセグメントで伝え、カード内へ文章を横並びにしない。 */
.work-one__carousel {
--work-carousel-duration: var(--dur-slow);
min-width: 0;
}
/* 本文途中の写真群。ドットは写真の下辺に重ね、縦の占有を増やさない。
ドットの帯に暗いグラデーションは敷かない（2026-09-30）。見せたい写真の下3分の1が
暗く沈んで見えた。読ませる文字があるヒーローだけが暗幕を持ち、ここはドット自体の影で
写真から浮かせる（.work-one__media-dot / .work-one__carousel-progress-item）。 */
.work-one__media {
position: relative;
margin-block-start: var(--space-xl);
}
.work-one__media + .work-one__paragraph {
margin-block-start: var(--space-xl);
}
.work-one__media .work-one__figure {
margin: 0;
}
/* YouTube の動画（template-parts/works-detail-video.php・2026-10-15）。押すまでは自前のサムネイルと再生ボタンだけ。
枠は 16:9 に固定し、押してプレーヤーに替わっても高さが変わらないようにする。
再生ボタンはカルーセルの丸い矢印と同じ書き方（白い半透明の丸 + ぼかし + ごく薄い縁）。 */
.work-one__video-frame {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
background: #000;
}
.work-one__video-link,
.work-one__video-player {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
}
.work-one__video-player {
border: 0;
}
.work-one__figure .work-one__video-link img {
width: 100%;
height: 100%;
max-height: none;
object-fit: cover;
}
.work-one__video-play {
position: absolute;
top: 50%;
left: 50%;
display: grid;
place-items: center;
width: 72px;
height: 72px;
border: 1px solid rgb(0 0 0 / 6%);
border-radius: 50%;
background: rgb(255 255 255 / 72%);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
color: var(--color-heading);
transform: translate(-50%, -50%);
transition: background-color var(--dur-fast) var(--ease);
}
.work-one__video-play svg {
width: 30px;
height: 30px;
/* 三角の重心を丸の中心へ寄せる */
margin-inline-start: 3px;
fill: currentColor;
}
@media (hover: hover) {
.work-one__video-link:hover .work-one__video-play {
background: rgb(255 255 255 / 92%);
}
}
.work-one__video-link:focus-visible {
outline-offset: -4px;
}
@media (max-width: 767px) {
.work-one__video-play {
width: 56px;
height: 56px;
}
.work-one__video-play svg {
width: 24px;
height: 24px;
}
}
.work-one__media-controls:not([hidden]),
.work-one__carousel.is-carousel .work-one__carousel-navigation {
position: absolute;
inset: auto 0 0;
display: flex;
justify-content: center;
align-items: center;
padding: 0 8px 4px;
color: #fff;
}
.work-one__media-dots {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
/* ドット帯の余白では背後の写真の送り操作を受け付ける。 */
.work-one__carousel.is-carousel .work-one__media-controls,
.work-one__carousel.is-carousel .work-one__carousel-navigation {
pointer-events: none;
}
.work-one__carousel.is-carousel :is(.work-one__media-controls, .work-one__carousel-navigation) button {
pointer-events: auto;
}
.work-one__media-dot,
.work-one__media-arrow {
display: grid;
place-items: center;
flex: 0 0 auto;
width: 44px;
height: 44px;
padding: 0;
border: 0;
background: transparent;
color: inherit;
cursor: pointer;
}
/* 影はヒーローの題の文字影と同じ値。暗幕が無いので、明るい写真の上でもこれで丸を拾わせる。 */
.work-one__media-dot::before {
width: 6px;
height: 6px;
background: rgb(255 255 255 / 30%);
border-radius: 50%;
box-shadow: 0 1px 3px rgb(0 0 0 / 45%);
content: "";
transition: background-color var(--dur-fast) var(--ease);
}
.work-one__media-dot.is-current::before {
background: #fff;
}
.work-one__media :is(button, [data-work-carousel-viewport]):focus-visible {
outline: 2px solid currentColor;
outline-offset: -4px;
}
/* ドットの白い輪は、暗幕が無いと明るい写真の上で沈む。輪の内外に 1〜2px の影を添える
（輪は内側 2〜4px。影は 0〜5px に敷き、輪の下は outline が覆う）。 */
:is(.work-one__media-dot, .work-one__carousel-progress-item):focus-visible {
box-shadow: inset 0 0 0 5px rgb(0 0 0 / 40%);
}
.work-one__carousel-stage {
position: relative;
}
.work-one__carousel-viewport {
min-width: 0;
}
.work-one__carousel.is-carousel .work-one__carousel-viewport {
overflow: hidden;
touch-action: pan-y pinch-zoom;
}
.work-one__carousel.is-carousel .work-one__pieces {
display: grid;
/* 名札用の2列グリッドを引き継がず、写真1枚で表示枠を満たす。 */
grid-template-columns: minmax(0, 1fr);
gap: 0;
width: 100%;
max-width: none;
}
.work-one__carousel.is-carousel .work-one__piece {
grid-area: 1 / 1;
min-width: 0;
opacity: 0;
pointer-events: none;
}
.work-one__carousel.is-fade-ready .work-one__piece {
transition: opacity var(--work-carousel-duration) var(--ease);
}
.work-one__carousel.is-carousel .work-one__piece.is-current {
opacity: 1;
pointer-events: auto;
}
/* 枠は 3:2 に固定する（送っても高さが跳ねない）。3:2 から外れる作品写真
（縦長・正方形など）は切らずに収め、余りは地色のまま見せる。
どれを収めるかは PHP が画像の比率で決める（gkk_work_figure_is_letterboxed()）。 */
:is(.work-one__carousel.is-carousel, .work-one__group--plates) .work-one__figure img {
aspect-ratio: 3 / 2;
max-height: none;
object-fit: cover;
}
:is(.work-one__carousel.is-carousel, .work-one__group--plates) .work-one__figure img.is-letterboxed {
object-fit: contain;
}
/* JSが無い場合は各写真の下に原稿を残す。カルーセルになったときだけ
カード内の文字を隠し、下の一列表示へ移す。 */
.work-one__carousel.is-carousel .work-one__piece-title,
.work-one__carousel.is-carousel .work-one__piece-body,
.work-one__carousel.is-carousel .work-one__piece-caption {
display: none;
}
.work-one__carousel-meta {
margin-block-start: var(--space-xs);
}
.work-one__carousel-navigation {
display: none;
min-width: 0;
}
.work-one__carousel-button {
display: none;
width: 2.75rem;
height: 2.75rem;
padding: 0;
place-items: center;
border: 1px solid var(--color-line-strong);
border-radius: 50%;
background: transparent;
color: var(--color-heading);
cursor: pointer;
transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.work-one__carousel.is-carousel :is(.work-one__carousel-button, .work-one__media-arrow) {
display: none;
}
/* 左右半分ずつの送り操作。強制配色時は標準のポインターへ戻す。 */
.work-one__carousel-viewport:is(.is-edge-prev, .is-edge-next) {
cursor: pointer;
}
/* 記号の背後に明るさを確保するガラス調の丸背景。ぼかし非対応でも半透明の面が残る。
マウスへの追従は即時にし、遅延アニメーションは付けない。 */
.work-carousel-cursor {
position: fixed;
z-index: var(--z-toast);
box-sizing: border-box;
width: 48px;
height: 48px;
border: 1px solid rgb(255 255 255 / 18%);
border-radius: 50%;
background: rgb(255 255 255 / 48%);
box-shadow:
0 2px 8px rgb(0 0 0 / 8%),
inset 0 1px 0 rgb(255 255 255 / 24%);
transform: translate(-50%, -50%);
color: #fff;
pointer-events: none;
}
/* 中央から白を徐々に薄め、明色面の輪郭を作らず外周へなじませる。 */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.work-carousel-cursor {
background:
radial-gradient(circle,
rgb(255 255 255 / 24%) 0%,
rgb(255 255 255 / 18%) 25%,
rgb(255 255 255 / 8%) 50%,
rgb(255 255 255 / 2%) 68%,
rgb(255 255 255 / 0%) 78%),
linear-gradient(145deg,
rgb(255 255 255 / 18%),
rgb(255 255 255 / 8%) 60%,
rgb(255 255 255 / 13%));
-webkit-backdrop-filter: blur(10px) saturate(125%);
backdrop-filter: blur(10px) saturate(125%);
}
}
.work-carousel-cursor[hidden] {
display: none;
}
.work-carousel-cursor::before {
position: absolute;
top: 50%;
left: calc(50% - 3px);
width: 14px;
height: 14px;
border-top: 1.5px solid currentColor;
border-right: 1.5px solid currentColor;
opacity: 0.95;
filter: drop-shadow(0 1px 2px rgb(0 0 0 / 38%));
transform: translate(-50%, -50%) rotate(45deg);
content: "";
}
.work-carousel-cursor.is-prev::before {
left: calc(50% + 3px);
transform: translate(-50%, -50%) rotate(-135deg);
}
.has-glass-cursor .work-one__carousel-viewport:is(.is-edge-prev, .is-edge-next) {
cursor: none;
}
/* 透明度を下げる設定では、ぼかしと半透明だけをやめて不透明の丸にする。
Windows の「透明効果」オフでも該当する（Chrome / Edge）ので、普段の閲覧環境で出る。
縁線を付けていたときは黒い輪の丸になり、ガラスと別物に見えた。影だけで写真から浮かせる。 */
@media (prefers-reduced-transparency: reduce) {
.work-carousel-cursor {
border-color: transparent;
background: #f2f1ef;
box-shadow: 0 2px 8px rgb(0 0 0 / 16%);
color: #292827;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
/* 明るい丸の上の暗い記号には、白い記号用の影が濁りになる。 */
.work-carousel-cursor::before {
filter: none;
}
}
/* コントラストを上げる設定では、丸の輪郭を線で示す。 */
@media (prefers-contrast: more) {
.work-carousel-cursor {
border-color: currentColor;
background: #f2f1ef;
color: #292827;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.work-carousel-cursor::before {
filter: none;
}
}
@media (forced-colors: active) {
.work-carousel-cursor {
display: none;
}
.has-glass-cursor .work-one__carousel-viewport:is(.is-edge-prev, .is-edge-next) {
cursor: pointer;
}
}
.work-one__carousel-viewport:focus-visible {
outline: var(--focus-ring-width) solid var(--focus-ring-color);
outline-offset: var(--focus-ring-offset);
}
.work-one__carousel-button svg {
width: 1.5rem;
height: 1.5rem;
fill: none;
stroke: currentColor;
stroke-linecap: square;
stroke-linejoin: miter;
stroke-width: 1.5;
}
.work-one__carousel-button:focus-visible {
outline: var(--focus-ring-width) solid var(--focus-ring-color);
outline-offset: var(--focus-ring-offset);
}
.work-one__carousel-progress {
display: flex;
flex-wrap: wrap;
justify-content: center;
min-width: 0;
align-items: center;
}
/* 本文写真と同じ6pxの丸、44pxの操作領域。現在位置は塗りで示す。 */
.work-one__carousel-progress-item {
position: relative;
display: grid;
place-items: center;
flex: 0 0 auto;
width: 44px;
height: 44px;
padding: 0;
border: 0;
background: transparent;
color: inherit;
cursor: pointer;
}
.work-one__carousel-progress-item::before {
width: 6px;
height: 6px;
background: rgb(255 255 255 / 30%);
border-radius: 50%;
box-shadow: 0 1px 3px rgb(0 0 0 / 45%);
content: "";
transition: background-color var(--dur-fast) var(--ease);
}
.work-one__carousel-progress-item.is-current::before {
background: currentColor;
}
.work-one__carousel-progress-item:focus-visible {
outline: 2px solid currentColor;
outline-offset: -4px;
}
.work-one__carousel-copy {
margin-block-start: var(--space-md);
padding-block-end: var(--space-lg);
border-block-end: 1px solid var(--color-line);
}
.work-one__carousel-title {
margin-block: 0;
font-size: var(--fs-base);
font-weight: 500;
line-height: var(--lh-snug);
color: var(--color-heading);
}
/* 解説は本文と同じ組み方（幅・折り返し）にする。キャプション時代の 38em / 720 の
上限が残っていて、本文より手前で折り返していた。句読点の span を持たない
プレーンテキストなので palt は当てない（当てると句読点まで詰まる）。 */
.work-one__carousel-body {
margin-block: var(--work-piece-copy-gap) 0;
font-size: var(--fs-base);
line-height: var(--lh-loose);
color: var(--color-text);
text-align: start;
line-break: strict;
hanging-punctuation: allow-end;
}
/* PCでは画面の高さから説明と見出しの領域を引き、3:2の写真を等比で縮める。
本文を省略・内部スクロールにせず、写真と説明を一緒に読める大きさにする。
説明の文字は本文と同じ級数・行間（小さくすると、この節だけ別の調子に見えた）。 */
@media (min-width: 769px) {
.work-one__group--carousel:has(.is-carousel) {
width: min(100%, max(640px, calc((100svh - 240px) * 1.5)));
margin-inline: auto;
}
/* 背の低い画面では写真だけをさらに縮め、説明の行数を増やさない。 */
.work-one__group--carousel .is-carousel .work-one__carousel-stage {
width: min(100%, max(240px, calc((100svh - 240px) * 1.5)));
margin-inline: auto;
}
.work-one__carousel-meta {
margin-block-start: var(--space-sm);
}
/* 送っても下の本文が跳ねないよう、説明3行分の高さを確保する（作品名 25 + 作品名 → 解説の余白 20 +
解説 3行 90 + 下の余白 16 = 151px。作品名 → 解説を広げたので 2026-10-09 に 9rem から上げた）。 */
.work-one__carousel-copy {
min-height: 9.5rem;
margin-block-start: 0;
padding-block-end: var(--space-sm);
}
}
@media (hover: hover) and (pointer: fine) {
.work-one__carousel-button:hover {
background: var(--color-heading);
color: var(--color-surface);
}
.work-one__carousel-progress-item:hover::before {
background: currentColor;
}
}
/* --- 概要 ------------------------------------------------------------------
クレジットは読ませる文章ではなく参照する記録。級数は本文より一段落とし
（キャプション 12 < クレジット 14 < 本文 16）、行間と余白も詰めて、ページ末尾
に小さくまとまった一枚として置く。面の切り替えは既に白帯が担っているので、
大きさで存在を主張させる必要がない。 */
.work-one__credit {
margin-block-start: var(--rhythm-2);
padding-block: var(--space-md);
background: var(--color-surface);
}
.work-one__credit-label {
margin-block: 0 var(--space-sm);
font-size: var(--fs-2xs);
color: var(--color-text-muted);
}
/* ラベルの列は、出ている中でいちばん長いラベルの幅（2026-10-15。「プロジェクト実施期間」は 6em の固定幅に
入らず、折り返さないので値に重なった）。行は display: contents で開き、全行で同じ2列を共有する。 */
.work-one__credit-list {
display: grid;
grid-template-columns: max-content minmax(0, 1fr);
gap: 8px 12px;
align-items: baseline;
margin: 0;
font-size: var(--fs-sm);
}
.work-one__credit-row {
display: contents;
}
.work-one__credit-key {
font-size: var(--fs-sm);
white-space: nowrap;
line-height: 1.6;
color: var(--color-text-muted);
}
.work-one__credit-value {
margin: 0;
font-size: var(--fs-sm);
min-width: 0;
line-height: 1.6;
word-break: normal;
overflow-wrap: anywhere;
}
.work-one__credit-items {
display: flex;
flex-wrap: wrap;
gap: 0 1em;
}
.work-one__credit-item {
max-width: 100%;
}
/* --- 関連する事例 ------------------------------------------------------------
相互に結んだ作品（inc/works-related.php）。Works 一覧のタイルと同じ正方形の写真に、
作品名を常に出す（一覧のようにホバーを待たない。ここでは何の事例かが読めないと選べない）。
列は 960 の枠に PC 3列・スマホ 2列。見出しは節の見出しより一段下げ、ページ末尾の
案内として置く（本文の節に見えないように）。 */
.work-one__related {
margin-block-start: var(--rhythm-2);
}
.work-one__related-heading {
margin-block: 0 var(--space-md);
font-size: var(--fs-md);
font-weight: 500;
line-height: var(--lh-snug);
color: var(--color-heading);
}
.work-one__related-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-md) var(--space-xs);
margin: 0;
padding: 0;
list-style: none;
}
.work-one__related-link {
display: grid;
gap: var(--space-xs);
color: inherit;
text-decoration: none;
}
.work-one__related-thumb {
display: block;
aspect-ratio: 1;
overflow: hidden;
background: var(--color-surface);
}
.work-one__related-thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.work-one__related-title {
font-size: var(--fs-sm);
line-height: var(--lh-snug);
text-decoration: underline;
text-decoration-color: transparent;
text-underline-offset: 0.2em;
transition: text-decoration-color var(--dur-fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
.work-one__related-link:hover .work-one__related-title {
text-decoration-color: currentColor;
}
}
@media (min-width: 768px) {
.work-one__related-list {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-lg) var(--space-md);
}
.work-one__related-title {
font-size: var(--fs-base);
}
}
.work-one__back {
margin-block: var(--space-lg) var(--rhythm-4);
font-size: var(--fs-sm);
}
@media (min-width: 768px) {
.work-one__group--plates .work-one__pieces {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 769px) {
.work-one__credit-inner {
display: grid;
grid-template-columns: 5rem minmax(0, 1fr);
gap: var(--space-md);
align-items: baseline;
}
.work-one__credit-label {
margin: 0;
}
}
/* --- スマホの縦の刻み ---------------------------------------------------------
上の図版・一覧の指定を上書きするので末尾に置く。
節の間が --rhythm-2（28px）だと、節の中で写真の前に取る 48px より
狭く、区切りの強さが逆になっていた。
段落は行間 2 の上下に半行（8px）ずつ空きを持つので、指定値は見た目より 8〜16px 小さい。
見た目で「節の間 約60 > 写真の前後 48 > 段落の間 32」になるよう指定する
（写真の前後を 32 にしていたときは見た目が段落の間と同じ 40 になり、写真が浮いて見えた）。
作品名のまとまりから最初の節までは、写真の前後と同じ見た目 50 前後に詰める
（節の間と同じにすると、作品名の上の 28px と比べて下だけが広く見えた）。
作品の節の前後も他の節の間と同じ（2026-10-09 に広げるのをやめた。上の「節」を参照）。
2026-10-07 に段落の間より上の区切りを一段ずつ広げた（ユーザー指定。情報量の多いページなので過剰にはせず、
ゆったり見せる。Top のスマホのセクション間を広げたのと同じ目的）。見た目で
節の間 60 → 80、写真の前後 48 → 56、作品の節の前後 84 / 76 → 104 / 96、作品名のまとまり → 最初の節 44 → 56。
段落の間（32）と罫 → 本文（20）は読む密度なので変えない。
2026-10-08 に本文 ↔ 写真だけ 56 → 32 に詰めた（ユーザー指定。下の個別の指定を参照）。 */
@media (max-width: 767px) {
.work-one__section {
margin-block-start: 4.25rem;
}
/* 写真の無いヒーローだけ。写真に重ねるときは、写真の下端との間に上と同じ余白を残す。 */
.work-one__hero:not(.work-one__hero--image) .work-one__header {
padding-block-end: 0;
}
.work-one__hero + .work-one__section {
margin-block-start: 3.25rem;
}
/* 写真・作品群で終わる節の後は、半行の空きが無いぶん節の間が詰まって見える。見た目を揃える（条件は PC と同じ）。 */
.work-one__section:has(> .work-one__section-inner > :is(.work-one__media, .work-one__group:not(.work-one__group--text, .work-one__group--text-below)):last-child) + .work-one__section {
margin-block-start: 4.75rem;
}
.work-one__group:not(.work-one__group--text) {
margin-block-start: 3rem;
}
/* 段落 ↔ 写真は、作品の節の作品名・解説 → 写真（24px。見た目 32）にそろえる
（2026-10-08 ユーザー指定。48px 指定で見た目 56 は、本文の節だけ広く見えた）。 */
.work-one__media,
.work-one__media + .work-one__paragraph,
.work-one__figure,
.work-one__figure + .work-one__paragraph {
margin-block-start: var(--space-md);
}
/* 作品の節の導入 → 最初の作品も、作品の間（見た目 48）にそろえる（段落の半行 8px のぶん小さく指定）。 */
.work-one__section--pieces :is(.work-one__heading, .work-one__paragraph) + .work-one__group {
margin-block-start: 2.5rem;
}
.work-one__piece .work-one__figure,
.work-one__media .work-one__figure {
margin-block-start: 0;
}
}
/* --- スマホの節の見出しの罫（2026-10-07 ユーザー指定） ----------------------------
見出しの下に全幅の薄い罫（1px）を引き、左端の 48px だけ濃い 2px を重ねる。Topics の見出しのタブ・左カラムの
「薄い罫に現在地だけ濃く重ねる」線と同じ言葉。見出しから本文までの見た目 24px が、本文の行の間（16px）と
段落の間（32px）の中間で浮き、セザンヌはキットに 500 しか無いので太さで差も付かず、見出しが埋もれて見えた。
罫が見出しの終わりを示し、間の余白が罫の上下として読める。字→罫 12px、罫→本文の字 約 24px。
見比べた案: 頭に四角（不採用）、短い太線だけ（線が浮く）、見出しの上に短い太線、薄い罫だけ。
濃い区間は見出しの字の幅にしない（見出しの長さで伸び縮みし、Top の下線付きのリンクと紛れる）。 */
@media (max-width: 767px) {
.work-one__heading {
margin-block-end: var(--space-xs);
}
.work-one__heading::after {
content: "";
display: block;
height: 2px;
margin-block-start: var(--space-xs);
background:
linear-gradient(var(--color-heading), var(--color-heading)) left bottom / 48px 2px no-repeat,
linear-gradient(var(--color-line), var(--color-line)) left bottom / 100% 1px no-repeat;
}
}
/* --- スマホのカルーセルのドット ------------------------------------------------
PC と同じ 44px 刻み・72px の帯だと、幅 350px・高さ 233px の写真では 7 点で幅の 9 割、
帯が高さの 3 割を占め、写真より目立っていた。刻みを 24px（押せる大きさの下限）、
丸を 5px、帯を 44px に縮めた（暗幕を外した今は、ドットの行の高さ 32px だけが残る）。
送る操作はスワイプが主で、ドットは位置の目印。 */
@media (max-width: 767px) {
.work-one__media-controls:not([hidden]),
.work-one__carousel.is-carousel .work-one__carousel-navigation {
padding: 0 8px;
}
.work-one__media-dot,
.work-one__carousel-progress-item {
width: 24px;
height: 32px;
}
.work-one__media-dot::before,
.work-one__carousel-progress-item::before {
width: 5px;
height: 5px;
}
/* 送りの矢印を写真に重ねる（2026-10-05 ユーザー指摘。スマホではドットを押さないと送れなかった）。
Top の Works（.home-works__overlay-control）と同じ形と置き方。帯を写真の全面に広げ、
ドットは下端、矢印は上下中央に置く。帯自体は触れても素通し（スワイプを奪わない）。 */
.work-one__media-controls:not([hidden]),
.work-one__carousel.is-carousel .work-one__carousel-navigation {
inset: 0;
align-items: flex-end;
}
.work-one__carousel.is-carousel :is(.work-one__carousel-button, .work-one__media-arrow) {
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(--color-heading);
place-items: center;
transform: translateY(-50%);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
/* 丸の中心を写真の縁に置き、半円を外へ出す。画面端には最低 4px を残す（Top と同じ式）。 */
.work-one__carousel.is-carousel :is(.work-one__carousel-button--prev, .work-one__media-arrow--prev) {
left: calc(-1 * min(22px, var(--gutter) - 4px));
}
.work-one__carousel.is-carousel :is(.work-one__carousel-button--next, .work-one__media-arrow--next) {
right: calc(-1 * min(22px, var(--gutter) - 4px));
}
.work-one__carousel.is-carousel :is(.work-one__carousel-button, .work-one__media-arrow) svg {
width: 100%;
height: 100%;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.75;
}
}
/* --- スマホの文字の段（2026-10-07 ユーザー指定） ------------------------------------
見出し → 作品名 → 本文の順に必ず一段ずつ大きさを変える: 節の見出し 22 / 作品群の見出し 18 / 作品名 17 / 本文 15。
作品名が本文と同じ 16px で本文の1行目に見え、節の見出し 20・作品群の見出し 18 も 2px 刻みで、ページが均一に見えた
（セザンヌは 500 しか無いので太さで差を付けられない）。本文を 1px 下げて作品名との差を作る形が一番分かりやすかった
（?type= で見比べた。本文 16 のまま上を 24 / 20 / 18 に上げる案、作品名を作品群の見出しと同じ 18 にする案より）。
本文 15 は Works 詳細のスマホだけで、サイト共通の本文（16）とは意図して違えている。1行の字数は 21 → 23 字。
上の各部品の指定より後に置く（同じ詳細度で後勝ち）。 */
@media (max-width: 767px) {
.work-one__heading {
font-size: 1.375rem;
}
.work-one__group-heading {
font-size: 1.125rem;
}
.work-one__carousel-title,
.work-one__piece-title {
font-size: 1.0625rem;
}
.work-one :is(.work-one__paragraph, .work-one__piece-body, .work-one__carousel-body) {
font-size: 0.9375rem;
}
}
/* --- PC の作品名と解説（2026-10-07 ユーザー指定） ------------------------------------------
PC も作品名と解説が同じ 16px で並び、作品名が解説の1行目に見えた。スマホのように本文全体を下げると、
960px の本文の1行（今でも約 60 字）がさらに長くなるので、作品の節の中だけで差を付ける: 作品名 18 / 解説 15。
節の本文（段落）は 16 のまま。?type= で見比べ、作品名 18 / 解説 16、作品名 17 / 解説 15 より差がはっきりする
この形にした（「せめてこれくらい」。差を詰める方向には戻さない）。 */
@media (min-width: 768px) {
.work-one__carousel-title,
.work-one__piece-title {
font-size: 1.125rem;
}
.work-one :is(.work-one__piece-body, .work-one__carousel-body) {
font-size: 0.9375rem;
}
}
/* --- 簡易版（アーカイブに収める作品。原稿の layout = 'brief'・2026-10-23 試作）------------------------------------
旧 works_lib から取り込んだ作品は写真が小さく（1枚目の 86% が幅 1200px 未満）、縦長も多い（284 件中 68 件）。
全幅に引き伸ばしてエモーショナルには見せられないので、テイストとトーンは保ったまま、地の平らな画像の作品（--plate）と
同じく白地に素直に置く。文字だけのヒーローの下に1枚目を、元の大きさまで、高さは画面の 80% まで、切らずに置く。
余白は既存のトークンで仮に置いた。見てから詰める（ユーザー）。 */
.work-one__brief-lead {
margin-block-start: var(--space-lg);
}
.work-one__brief-figure {
margin: 0;
}
/* width: auto で元の大きさを超えない。幅と高さの上限は、置換要素なので比率を保ったまま掛かる。 */
.work-one__brief-figure img {
display: block;
width: auto;
max-width: 100%;
height: auto;
max-height: 80svh;
}
/* 一言（見出しの無い先頭の節）は1枚目のすぐ下に続ける。節の間（--rhythm-2）では離れすぎる。 */
.work-one--brief .work-one__brief-lead + .work-one__section {
margin-block-start: var(--space-lg);
}
/* PC は「写真 | 一言とクレジット」の2列にする（template が --side を付ける。1枚目が無いときだけ縦積み）。
左に寄って右が空くのを埋める（2026-10-23 ユーザー指摘）。
クレジットは末尾の帯ではなく、一言の下に置く。スマホは縦に積む。 */
.work-one__brief-text {
margin-block-start: var(--space-lg);
}
.work-one__brief-credit {
margin-block-start: var(--space-lg);
}
.work-one__brief-text > .work-one__brief-credit:first-child {
margin-block-start: 0;
}
/* 縦積みのクレジットは地の色の帯で本文と分かれるが、写真の横では帯を敷けない。一言との区切りが分かりにくかった
（2026-10-23 ユーザー指摘）ので、サイトの見出しと同じ薄い罫で区切る。一言が無ければ罫も引かない。 */
.work-one__brief-text > .work-one__paragraph + .work-one__brief-credit {
padding-block-start: var(--space-md);
border-block-start: 1px solid var(--color-line);
}
/* 列は 7:5 に固定し、写真は自分の列の左に元の大きさまで置く（2026-10-26 ユーザー判断）。写真の幅で列を決めていた頃は、
文字の始まる位置が作品ごとに動いた。一言とクレジットは写真の下端にそろえる（同日）。文字のほうが高い作品は
行の高さが文字で決まり、写真は上に付く。
作品名（ヒーロー）は2列の器の上の行に全幅・元の大きさで置き（template が出す場所を移す）、スクロールしても画面の上に残す。
後ろを地の色で塗り、本文と写真は作品名の下へもぐって消える（同日ユーザー指摘「全幅で本文がタイトルを上限として消えるように」。
作品名を左の列に入れて小さくした形は、元の大きい作品名のほうがきれいだった）。写真は作品名の下に残す。
貼り付く範囲は2列の器の中だけで、本文を読み終えると写真 → 作品名の順に流れていく。
--brief-band は作品名の上の余白（元のヒーローの上の余白と同じ）で、貼り付いている間は本文を隠す帯になる。
作品名の下は 48px（作品名の行の下 32px + 行の間 16px。本文は作品名から 32px 下で消え、写真は 48px 下）。元のヒーローの
下の余白（最大 56px）+ 32px の 88px は、作品名の下がやや広かった（同日ユーザー指摘）。
写真を止める位置は作品名の高さで決まる。高さは js/works-brief.js が測って --brief-hero-h に入れる（JS が無いときは1行と見積もる）。
測った値は貼り付いている間の位置にしか使わないので、読み込んだ後に画面はずれない。 */
.work-one__brief-lead--side {
--brief-band: clamp(28px, 4vw, 56px);
--brief-sticky-top: 0px;
margin-block-start: 0; /* 上の余白は作品名の行（ヒーローの上の余白）が持つ */
}
.work-one__brief-lead--side .work-one__hero .work-one__header {
max-width: none;
padding-inline: 0;
}
@media (min-width: 768px) {
.work-one__brief-lead--side {
--brief-hero-estimate: calc(var(--brief-band) + 1.25 * clamp(22px, 2.4vw, 34px) + var(--space-2xs) + var(--fs-sm) * var(--lh-snug) + var(--space-lg));
--brief-page-top: calc(var(--header-bar) + var(--space-header-gap));
}
.work-one__brief-lead--side .work-one__section-inner {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
column-gap: var(--space-xl);
row-gap: var(--space-sm);
align-items: start;
}
.work-one__brief-lead--side .work-one__hero .work-one__header {
padding-block-end: var(--space-lg);
}
.work-one__brief-lead--side .work-one__hero {
position: sticky;
top: var(--brief-sticky-top);
z-index: 2;
grid-column: 1 / -1;
background: var(--color-bg);
transition: top var(--dur) var(--ease);
}
.work-one__brief-lead--side .work-one__brief-aside {
position: sticky;
top: calc(var(--brief-sticky-top) + var(--brief-hero-h, var(--brief-hero-estimate)) + var(--space-sm));
z-index: 1;
transition: top var(--dur) var(--ease);
}
.work-one__brief-lead--side .work-one__brief-text {
align-self: end;
margin-block-start: 0;
}
/* 写真の高さの上限は、開いた最初の画面にヘッダー・作品名・写真が切れずに収まる高さ（2026-10-26 ユーザー指摘
「最初は見きれず全体が見える高さを上限としたほうがきれい」）。それまでは画面の 80% で、縦長の写真は下が切れていた。
JS で測ると読み込んだ後に写真が縮んで画面がずれるので、CSS の値から見積もる。作品名は1行とみなす（アーカイブの
266 件のうち 30 字を超えるのは 9 件。全幅の 34px で1行 28 字ほど）。2行の作品名でも、写真の下に残す 48px の中に収まる。
本文が長い作品にも同じ上限を当てる（作品名と写真を残す範囲が画面に収まる）。
式: ヘッダー + 作品名の行（上下の余白込み）+ 行の間 + 写真の下に残す余白。 */
/* ただし 528px より低くはしない（110% で 100% の 582px を下回らない値）。画面の高さから出す上限は、ブラウザで拡大しても大きくならない（画面の大きさは変わらない）。
引く量（ヘッダー・作品名・余白）は拡大に比例して増えるので、拡大するほど文字は大きく、写真だけが縮んでいった
（同日ユーザー指摘「画面ズーム時に写真のサイズが崩れる」「どんどん縮むのが気になる」）。固定の 528px は拡大に比例して
大きくなるので、拡大していくと写真も周りと一緒に大きくなる。1440×900 の 100% では収まる高さ（582px）のほうが大きいので
変わらない。画面が低い（拡大を含む）と最初の画面に収まらず写真の下が切れるが、縦が足りなければスクロールさせる
（サイトの方針）。以前の上限の画面の 80% も拡大で縮むので外した（幅は列、高さは元の大きさでも止まる）。 */
.work-one__brief-lead--side .work-one__brief-figure img {
max-height: max(528px, calc(100svh - var(--brief-page-top) - var(--brief-hero-estimate) - var(--space-sm) - var(--space-xl)));
}
}
/* 画面が低い（拡大を含む）ときは貼り付けない。写真が 528px まで大きくなるので、作品名と写真を残す範囲が画面に収まらず、
写真の下が読み終えるまで見えなくなる。 */
@media (min-width: 768px) and (max-height: 699px) {
.work-one__brief-lead--side :is(.work-one__hero, .work-one__brief-aside) {
position: static;
}
}
/* ヘッダーが呼び戻されている間は、作品名をその下へずらす（帯はヘッダーの面の下にもぐる）。左カラムの版面と同じ扱い
（header_style.css の .page-shell__rail-inner）。 */
html[data-header-reveal="shown"] .work-one__brief-lead--side {
--brief-sticky-top: calc(var(--header-reveal-top) + var(--header-reveal-surface) + var(--space-sm) - var(--brief-band));
}
/* 768〜790px はヘッダーがスマホの寸法（header_style.css の 790px 以下）。 */
@media (min-width: 768px) and (max-width: 790px) {
.work-one__brief-lead--side {
--brief-page-top: calc(var(--header-bar-compact) + var(--space-header-gap-compact));
}
}
/* スマホは縦に積む（作品名 → 写真 → 文字）。貼り付けない。作品名と写真の間は元の形と同じ。 */
@media (max-width: 767px) {
.work-one__brief-lead--side .work-one__brief-aside {
margin-block-start: var(--space-lg);
}
}
/* 簡易版の残りの写真は送らずに並べる（2026-10-26 ユーザー判断）。行の高さをそろえ、写真は比率どおりの幅で
切らずに並べる。各行は列の幅いっぱいに伸ばす（行の中の写真は比率に比例して伸びるので、同じ行の高さはそろったまま）。
PC は伸びる上限を基準の 1.25 倍にする。上限も比率に比例するので、同じ行の写真は同時に止まって高さはそろう。
上限が無いと、極端に横長の写真が1行を独り占めして列いっぱい（1枚目より大きい）に伸びた。最後の行も上限まで伸ばす
（伸ばさないと、ほぼ埋まった行が右端に少しだけ届かず、ずれて見えた）。行の高さは PC 200px・スマホ 120px。 */
.work-one__pieces--grid {
--piece-row: 120px;
display: flex;
flex-wrap: wrap;
gap: var(--space-xs);
}
.work-one__pieces--grid .work-one__piece {
flex: var(--piece-ratio) 1 calc(var(--piece-ratio) * var(--piece-row));
}
.work-one__pieces--grid .work-one__figure img {
aspect-ratio: var(--piece-ratio);
max-height: none;
object-fit: cover;
}
@media (min-width: 768px) {
.work-one__pieces--grid {
--piece-row: 200px;
gap: var(--space-sm);
}
.work-one__pieces--grid .work-one__piece {
max-width: calc(var(--piece-ratio) * var(--piece-row) * 1.25);
}
}
/* --- 写真の拡大（js/works-zoom.js・2026-10-26）--------------------------------------------------------------------
簡易版の1枚目と並べた写真をリンクで包み、押すと