どれにでも使える。
ブレークポイントは SP(~767) / TAB(768-1279) / PC(1280+)。
"X-only" は単一帯、"X-up" は以上、"X-down" は以下。
revert で要素本来の表示 (
=block) に戻る。
早見表:
.u-sp-only → スマホだけ
.u-tb-only → タブレットだけ
.u-pc-only → PCだけ (例:
)
.u-tb-up → タブレット以上 (= TAB + PC)
.u-tb-down → タブレット以下 (= SP + TAB) */
/* SP only (~767px) */
@media (min-width: 768px) {
.u-sp-only { display: none; }
}
/* TAB only (768-1279px) */
.u-tb-only { display: none; }
@media (min-width: 768px) {
.u-tb-only { display: revert; }
}
@media (min-width: 1280px) {
.u-tb-only { display: none; }
}
/* PC only (1280+) */
.u-pc-only { display: none; }
@media (min-width: 1280px) {
.u-pc-only { display: revert; }
}
/* TAB and up (768+) */
.u-tb-up { display: none; }
@media (min-width: 768px) {
.u-tb-up { display: revert; }
}
/* TAB and down (~1279px) */
@media (min-width: 1280px) {
.u-tb-down { display: none; }
}
/* ========== Layout primitives ========== */
.container {
max-width: 100%;
margin: 0 auto;
padding-left: var(--gutter-sp);
padding-right: var(--gutter-sp);
position: relative;
}
@media (min-width: 768px) {
/* fixed left rail がコンテンツに被らないよう、左パディングをレール幅 + バッファで確保 */
.container {
padding-left: calc(var(--rail) + var(--gutter-tb));
padding-right: var(--gutter-tb);
}
}
@media (min-width: 1280px) {
.container {
max-width: var(--container);
/* PC帯でも片側ガーター盛りは継続 — 中央寄せ時の自然な左マージンが
rail(130px) を抜く幅 (≒ 1520px) まで asymmetric padding を引っ張る。
1520px 未満で symmetric に戻すと左レールにコンテンツが寄りすぎる。 */
padding-left: calc(var(--rail) + var(--gutter-pc));
padding-right: var(--gutter-pc);
}
}
@media (min-width: 1520px) {
/* 自然な margin-auto がレール幅+息継ぎを超えたので、対称 padding に戻して中央に見せる */
.container {
padding-left: var(--gutter-pc);
}
}
.section {
position: relative;
margin-top: 50px;
scroll-margin-top: 80px; /* SP: 固定ヘッダ分のアンカージャンプ補正 */
}
@media (min-width: 768px) {
.section {
margin-top: 80px;
scroll-margin-top: 40px;
}
}
/* scroll-margin-top を無効にする汎用クラス（ぴったり止め） */
.no-scroll-margin { scroll-margin-top: 0 !important; }
/* ダークセクションは背景色が違うので帯の内側 padding で余白を確保 */
.section.works,
.section.contact {
padding-block: 50px;
}
@media (min-width: 768px) {
.section.works,
.section.contact {
padding-block: 80px;
}
}
.sec-head {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
gap: 6px;
align-items: center;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid var(--c-fg);
}
.sec-num {
grid-column: 1 / -1;
grid-row: 1;
font-size: 12px;
letter-spacing: .3em;
}
.sec-title {
grid-column: 1;
grid-row: 2;
font-family: var(--ff-en);
font-weight: 400;
font-size: clamp(40px, 5.6vw, 72px);
line-height: 1;
letter-spacing: .04em;
user-select: none;
-webkit-user-select: none;
}
.sec-title__amp { font-size: .72em; }
.sec-sub {
grid-column: 1;
grid-row: 3;
font-size: 14px;
letter-spacing: .14em;
justify-self: start;
align-self: center;
}
.sec-head--dark { border-color: rgba(255,255,255,.5); }
.sec-head--dark .sec-title { color: #fff; }
@media (min-width: 768px) {
.sec-head {
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
column-gap: 40px;
row-gap: 4px;
margin-bottom: 40px;
}
.sec-sub {
font-size: 16px;
grid-column: 2; grid-row: 2;
}
}
@media (min-width: 1280px) {
.sec-head { column-gap: 40px;}
}
/* ========== HERO ==========
SP: フルブリード固定、レール無し
TAB+: KV はフルブリード→ narrowed 時にレール幅分右へ寄せる。
transition は width 1 本だけで完結 (margin/padding を二重に動かさない)。 */
.hero {
position: relative;
width: 100%;
margin-left: auto;
/* ヘッダーは透明レイヤとして上に乗るので、hero は 100dvh フルブリードでOK。
現在は 500px の仮置き — 本実装時に 100dvh / 100svh などへ戻す。 */
height: 500px;
display: grid;
align-items: center;
text-align: center;
padding: 0 var(--gutter-sp);
overflow: hidden;
transition: width 1.2s var(--ease-inout);
}
/* SP: レール無し → narrowed しない */
@media (min-width: 768px) {
.hero {
/* TAB+ もフル幅。左レールは透明レイヤとして hero の上に乗り、
中身の色は JS の is-on-dark 切り替えで担保する。
100dvh はアドレスバー出し入れで値が動き、ResizeObserver 経由で
WebGL canvas の再描画が走るので NG。lvh で「バーが消えた状態」固定。 */
width: 100%;
height: 100lvh;
min-height: 560px;
padding: 0 var(--gutter-pc);
}
}
.hero__media { position: absolute; inset: 0; z-index: -1; background: var(--c-dark); }
.hero__media canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero__media img {
width: 100%; height: 100%; object-fit: cover;
transform: scale(1.1);
animation: heroZoom 5s var(--ease-out) forwards;
}
/* GL スライダーが有効なら 2枚目以降は非表示 (1枚目は JS 側で hide) */
.hero__media img ~ img { display: none; }
@keyframes heroZoom { to { transform: scale(1); } }
.hero__media-cover {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.45) 100%);
}
.hero__inner {
color: #fff;
margin: 0;
max-width: 880px;
text-align: center;
}
@media (min-width: 768px) {
.hero__inner { margin: 0 auto; }
}
.hero__title {
margin: 0 0 30px;
font-family: var(--ff-jp);
font-weight: 700;
font-size: clamp(24px, 7.5vw, 44px);
line-height: 1.3;
letter-spacing: .18em;
user-select: none;
-webkit-user-select: none;
pointer-events: none;
}
@media (min-width: 768px) {
.hero__title { font-size: clamp(36px, 5.6vw, 64px); }
}
.hero__title-line { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .35em; justify-content: center; }
/* 初期状態: is-ready が付くまで隠して待機。
ページ描画起点の animation-delay だと loader が長引いた時に
演出を見逃すため、発火は body.is-ready 起点に統一する。
コミカルな bounce/scale は排して、上品な ease-out で
"translateY 量" と "持続時間" の差だけで階層を作る: */
.hero__word { display: inline-block; opacity: 0; transform: translateY(26px); }
/* × の span は親の line-height (1.3) を継承して縦に余白を持ってしまう。
その状態で scale すると "span の中心" = "画像の中心" にならず、拡大時に位置がブレる。
line-height:0 + img を display:block にして span を画像サイズちょうどに収縮させる。 */
.hero__times { display: inline-block; opacity: 0; transform: scale(0.3); line-height: 0; } /* × は scale で "拡大" 入場 */
.hero__word--ai { transform: translateY(44px); } /* AI のみ持ち上がり大 → 主役感 */
.is-ready .hero__word { animation: heroWord 1s var(--ease-out) forwards; }
.is-ready .hero__times { animation: heroCross 1s var(--ease-out) forwards; }
.is-ready .hero__word--ai{ animation: heroAi 1.25s cubic-bezier(0.16,1,0.3,1) forwards; } /* AI だけ Apple 系の深い deceleration */
/* 不等間隔ステージング: 撮影 →(間) × AI 連続 →(長い呼吸) × 人の手
間隔を約30%広げてテンポをゆるやかに */
.is-ready .hero__title-line > :nth-child(1) { animation-delay: 0s; } /* 撮影 */
.is-ready .hero__title-line > :nth-child(2) { animation-delay: .5s; } /* × */
.is-ready .hero__title-line > :nth-child(3) { animation-delay: .75s; } /* AI */
.is-ready .hero__title-line > :nth-child(4) { animation-delay: 1.55s; } /* × */
.is-ready .hero__title-line > :nth-child(5) { animation-delay: 1.8s; } /* 人の手 */
.hero__times { color: rgba(255,255,255,.85); font-weight: 300; font-size: .9em; }
/* img を block にすれば baseline 計算が不要になり、span が画像と完全に同サイズに収縮。
scale の中心 (transform-origin: 50% 50% 既定) が画像中心と一致する。 */
.hero__times img { width: .65em; height: .65em; display: block; }
@keyframes heroIn { to { opacity: 1; transform: translateY(0); } }
@keyframes heroWord {
0% { opacity: 0; transform: translateY(26px); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes heroCross {
0% { opacity: 0; transform: scale(0.4); }
100% { opacity: 1; transform: scale(1); }
}
@keyframes heroAi {
0% { opacity: 0; transform: translateY(44px); }
100% { opacity: 1; transform: translateY(0); }
}
.hero__lead {
margin: 0;
font-size: 12px;
line-height: 2;
letter-spacing: .1em;
opacity: 0; transform: translateY(14px);
user-select: none;
}
.is-ready .hero__lead {
/* タイトル (.9s ease-out) の "3拍子" に乗らないよう、尺を 1.4s と長めにし、
カーブも cubic-bezier の深い deceleration に変えてリズム自体を別物に。
遅延も 人の手 着地 (~2.25s) からしっかり間を置く。 */
animation: heroIn 1.4s cubic-bezier(0.22, 1, 0.36, 1) 2.5s forwards;
}
@media (min-width: 768px) {
.hero__lead { font-size: 18px; }
}
.hero__scroll {
position: absolute; right: 18px; bottom: 18px;
display: flex; flex-direction: column; align-items: center; gap: 5px;
color: #fff;
font-size: 11px; letter-spacing: .3em;
writing-mode: vertical-rl;
/* 上から下に落ちる: 初期はマイナス側に置いて heroIn の translateY(0) に着地 */
opacity: 0; transform: translateY(-16px);
user-select: none;
}
.is-ready .hero__scroll {
/* lead 着地後にすこし遅れて出す */
animation: heroIn 1s var(--ease-out) 3.5s forwards;
}
@media (min-width: 768px) {
/* hero は 100lvh 固定。bottom: 20px だとバー表示時にアイコンがバー裏に隠れる。
(100lvh - 100svh) = アドレスバー高 (PC等は0) → 常に小VP底+20px に置ける */
.hero__scroll { right: 30px; bottom: calc(100lvh - 100svh + 20px); }
}
.hero__scroll-line {
width: 1px; height: 70px; background: rgba(255,255,255,.5);
position: relative; overflow: hidden;
}
.hero__scroll-line::after {
content: ""; position: absolute; left: 0; right: 0; top: 0;
height: 80%; background: #fff;
animation: scrollLine 1.8s var(--ease) infinite;
}
@keyframes scrollLine {
0% { top: -100%; }
100% { top: 100%; }
}
/* ========== CONCEPT ========== */
.concept__grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
@media (min-width: 768px) {
.concept__grid { grid-template-columns: 1fr 1.05fr;}
}
@media (min-width: 1280px) {
.concept__grid { gap: 40px; }
}
.concept__copy p {
font-size: 14px;
line-height: 2;
color: #2a2a2a;
}
/* lobotomized owl: 段落間のリズムは「隣接要素間にだけ」上マージンで取る。
の margin はそもそも reset.css 側で unset 済み (UA 由来のリセット不要)。 */
.concept__copy > * + * { margin-top: 1.4em; }
@media (min-width: 768px) {
.concept__copy p { font-size: 16px; }
}
.concept__diagram {
margin: 0; width: 100%;
max-width: 320px;
justify-self: center;
/* SP: 視覚的には図を先に見せたい。HTML 順 (説明文 → 図) は SR/SEO の読み順として
維持したいので、grid の order だけで表示順を入れ替える。 */
order: -1;
}
@media (min-width: 768px) {
.concept__diagram {
max-width: 480px;
justify-self: end;
order: 0; /* PC は HTML 順 (copy 左 / diagram 右) に戻す */
}
}
.concept__diagram svg { width: 100%; height: auto; overflow: visible; }
/* SVG の transform-origin は既定で SVG ビューポート中央になり、
scale 中に円が中央に寄って "移動しながら出現" する見栄えになるため、
各ノードの bbox 中心を基準に変えてその場でズームさせる */
.concept__diagram .diagram-node {
transform-box: fill-box;
transform-origin: center;
}
/* 全要素 ease-in で「最後に強く来る」勢い。
円とロゴはサッと出したいので duration を縮める (zoom-in .8s→.4s / fade-in-up 1s→.5s)。
線は 1.6s だと冗長なので 1s に短縮。 */
.concept__diagram .diagram-lines [data-line-draw][data-scroll="onScreen"],
[data-scroll="onScreen"] .concept__diagram .diagram-lines [data-line-draw] {
animation-duration: .95s;
animation-timing-function: var(--ease); /* 自然な ease-out, 加速ほどほど */
}
.concept__diagram .diagram-node[data-zoom-in][data-scroll="onScreen"],
[data-scroll="onScreen"] .concept__diagram .diagram-node[data-zoom-in] {
animation-duration: .5s;
animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); /* back ease-out: 軽く弾んで収まる */
}
.concept__diagram .diagram-center[data-fade-in-up][data-scroll="onScreen"],
[data-scroll="onScreen"] .concept__diagram .diagram-center[data-fade-in-up] {
animation-duration: .75s;
animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); /* back ease-out: 軽く弾んで収まる */
}
/* ========== Badge row (svc/work header) ========== */
.badge-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
margin-bottom: 15px;
}
.badge {
display: inline-flex; align-items: center; justify-content: center;
background: var(--c-fg); color: #fff;
font-size: 12px;
letter-spacing: .14em;
padding: 3px 10px;
min-height: 20px;
}
.badge-x {
display: inline-block;
width: 10px; height: 10px;
background: url('../images/cross.svg') no-repeat center / contain;
flex: 0 0 auto;
font-size: 0;
line-height: 0;
color: transparent;
text-indent: -9999px;
overflow: hidden;
}
.badge-row--dark .badge { background: #fff; color: var(--c-fg); }
.badge-row--dark .badge-x { background-image: url('../images/cross-white.svg'); }
/* ========== SERVICE ========== */
.service__grid {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
@media (min-width: 768px) {
.service__grid {
grid-template-columns: repeat(3, 1fr);
/* subgrid 用の行定義: badge / title / en / list / body / btn の 6 行。
body だけ 1fr で残りスペースを吸収し、3 カードのボタン位置が下端で揃う。
他の auto 行は各カードの最大コンテンツ高さに揃うので、タイトルが 1行/2行 でも
後続の en / 区切り線 / list が同じ y 座標に並ぶ。 */
grid-template-rows: auto auto auto auto 1fr auto;
}
}
@media (min-width: 1280px) {
.service__grid {
}
}
.svc-card {
background: var(--c-card);
border-radius: 5px;
padding: 20px;
display: flex; flex-direction: column;
/* SP (flex column) の行間。TAB+ では subgrid に切り替わり親 grid の gap が使われる */
gap: 15px;
position: relative;
transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
@media (min-width: 768px) {
.svc-card {
padding: 25px;
/* SP は単独表示なので flex column のままで十分。TAB+ では親グリッドの 6 行を
subgrid で継承して 3 カードの行位置を揃える */
display: grid;
grid-template-rows: subgrid;
grid-row: span 6;
}
}
/* 行間は親 (subgrid gap / flex gap) に一本化するため、子要素は自前の margin を持たない。
※ badge-row は SERVICE 外 (WORKS) でも使うので共通の margin-bottom を残し、ここで打ち消す */
.svc-card > * { margin: 0; }
.svc-card__title {
font-family: var(--ff-jp-s);
font-weight: 500;
font-size: 20px;
letter-spacing: .08em;
line-height: 1.4;
}
.svc-card__en {
padding-bottom: 10px;
border-bottom: 1px solid #333;
font-size: 12px;
letter-spacing: .14em;
}
.svc-card__list { display: grid; gap: 3px; }
.svc-card__list li {
position: relative;
padding-left: 15px;
font-size: 12px;
font-weight: bold;
color: #333;
}
.svc-card__list li::before {
content: ""; position: absolute; left: 0; top: .85em;
width: 5px; height: 1px; background: currentColor;
}
.svc-card__body {
font-size: 12px; line-height: 2;
color: #444;
/* SP (flex column) では本文を伸ばしてボタンを下端へ。TAB+ では subgrid の 1fr 行が
同じ役目を果たすので flex: 1 は無効化されるが残しても害はない */
flex: 1;
}
.svc-card__btn {
/* inline-flex だと subgrid セル内で intrinsic 幅になるため、block-flex に */
display: flex; align-items: center; justify-content: center; gap: 10px;
background: var(--c-fg); color: #fff;
border-radius: 5px;
padding: 10px 20px;
font-size: 12px; letter-spacing: .14em;
transition: background .3s var(--ease);
}
.svc-card__btn .arrow {
transition: transform .3s var(--ease);
}
.svc-card__btn:hover,
.svc-card__btn:focus-visible { background: #2c2c2c; }
.svc-card__btn:hover .arrow,
.svc-card__btn:focus-visible .arrow { transform: translateX(4px); }
@media (min-width: 768px) {
.svc-card__btn { padding: 10px 20px; gap: 10px; }
}
/* base .arrow uses the white SVG. On white-bg pills we apply filter:invert(1)
(see .work-block__btn) to flip it dark — no separate dark asset. */
.arrow {
width: 14px; height: 8px;
background: url('../images/arrow-right.svg') no-repeat center / contain;
display: inline-block;
flex: 0 0 auto;
}
@media (min-width: 768px) {
.arrow { width: 18px; height: 10px; }
}
/* .arrow--white は base と同じ SVG を指す no-op モディファイア。
HTML 側で残っているが視覚的差分はない (将来削除可)。 */
.arrow--white { background-image: url('../images/arrow-right-white.svg'); }
/* ========== STANCE — full bordered grid ==========
"親背景が gap/padding の隙間から覗いて線に見える" 方式。
- .stance__grid に gap:1px / padding:1px を入れて、子セルの間と外枠に 1px の隙間を作る
- 線色レイヤーは ::before で持ち、clip-path: circle() の半径をアニメーション
- 各 .stance__col / .stance__quote は --c-bg で塗りつぶし、線部分だけ ::before の色が露出
左上を中心とした円形に線色が広がり、外枠も内側の区切りも放射状に露出する。
clip-path の transition は標準仕様で動くので、@property 不要 (古いブラウザでも 1.4s 補間される) */
.stance__grid {
display: grid;
grid-template-columns: 1fr;
gap: 1px;
position: relative;
}
@media (min-width: 768px) {
.stance__grid { grid-template-columns: repeat(3, 1fr); }
}
/* clip-path: circle 展開で黒線を露出。
left-top を中心に円形に広がる。 */
.stance__grid::after {
content: "";
position: absolute;
inset: 0;
clip-path: circle(0% at 0% 0%);
pointer-events: none;
z-index: 0;
background: var(--c-fg);
box-shadow: 0 0 0 1px var(--c-fg); /* 外枠: 列幅の丸めに依存しないので subpixel ズレが起きない */
transition: clip-path 2.2s cubic-bezier(.4, 0, .2, 1);
}
/* circle() の % は √((w²+h²)/2) 基準。左上→右下の対角は √2 倍。
+2px は box-shadow(1px) が対角の角でクリップされないための余白 */
[data-scroll="onScreen"] .stance__grid::after { clip-path: circle(calc(sqrt(2) * 100% + 2px) at 0% 0%); }
/* ::before (z-index:0) より上にセルを出し、セルの塗りで線色を隠す */
.stance__grid > * {
position: relative;
z-index: 1;
background: var(--c-bg);
}
.stance__col {
padding: 20px;
}
.stance__label {
display: inline-block;
margin: 0 0 15px;
padding: 0 0 8px;
font-size: 12px;
letter-spacing: .3em;
border-bottom: 1px solid #333;
}
.stance__h {
margin: 0 0 10px;
font-weight: 500;
font-size: 16px; letter-spacing: .1em;
line-height: 1.6;
}
.stance__col p { margin: 0; font-size: 12px; line-height: 2; color: #444; }
@media (min-width: 768px) {
.stance__col p{
font-size: 14px;
}
}
.stance__quote {
margin: 0; text-align: center;
padding: 40px 15px;
grid-column: 1 / -1;
}
.stance__quote p {
font-weight: 500;
font-size: 16px;
letter-spacing: .14em;
line-height: 1.5;
margin: 0 0 14px;
}
@media (min-width: 768px) {
.stance__quote p {
font-size: 24px;
}
}
.stance__quote cite {
font-style: normal;
font-size: 12px;
letter-spacing: .1em;
}
@media (min-width: 768px) {
.stance__quote cite {
font-size: 14px;
}
}
/* ========== COMPARISON ========== */
/* overflow-x: auto と overflow-y を明示しないとブラウザは縦も auto 扱いにして
1px のレンダリング誤差で縦バーが出ることがある。横バーは SP のみ必要。 */
.cmp-table-wrap { overflow-x: auto; overflow-y: hidden; }
.cmp-table {
width: 100%;
/* SP では容器が狭くなるので min-width で横スクロールに任せる。
TAB+ では容器の方が広いので width:100% に従い 480px は実質無効化される */
min-width: 480px;
border-collapse: collapse;
font-size: 12px;
border: 1px solid currentColor;
background: #fff;
}
.cmp-table th, .cmp-table td {
padding: 16px 8px;
text-align: center;
vertical-align: middle;
border: 1px solid #252525;
border-color: currentColor;
}
@media (min-width: 768px) {
.cmp-table th, .cmp-table td { padding: 15px 10px; }
}
.cmp-table th:last-child, .cmp-table td:last-child { border-right: 0; }
.cmp-table tr:last-child th, .cmp-table tr:last-child td { border-bottom: 0; }
.cmp-table thead th {
font-size: 12px; letter-spacing: .2em;
color: #fff;
font-weight: 400;
background: var(--c-fg);
white-space: nowrap;
padding: 15px 10px;
border-bottom: 0;
}
.cmp-table tbody th {
text-align: left;
font-weight: 400;
letter-spacing: .12em;
font-size: 12px;
color: #fff;
width: 24%;
background: var(--c-fg);
padding-left: 22px;
white-space: nowrap;
}
.stars {
display: inline-block;
font-size: 16px; letter-spacing: 2px;
position: relative;
color: #d3d0cb;
}
.stars::before {
content: "★★★★★";
position: absolute; top: 0; left: 0;
width: var(--p, 0%); overflow: hidden;
color: var(--c-fg);
white-space: nowrap;
}
.stars::after {
content: "★★★★★";
}
/* ========== WORKS (dark) ========== */
.works {
background: var(--c-dark);
color: #fff;
}
/* WORKS 内の各 .work-item は「サブセクション」相当として扱うので、
ページ全体の section margin-top (50/80) と同じリズムに揃える */
.work-item + .work-item {
margin-top: 50px;
}
@media (min-width: 768px) {
.work-item + .work-item {
margin-top: 80px;
}
}
.work-block {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
@media (min-width: 768px) {
.work-block {
grid-template-columns: minmax(260px, 360px) 1fr;
gap: 40px;
align-items: start;
}
}
@media (min-width: 1280px) {
.work-block {
gap: 56px;
}
}
.work-block__title {
font-weight: 400;
font-size: 22px;
letter-spacing: .12em;
margin: 0 0 6px;
}
@media (min-width: 768px) {
.work-block__title { font-size: 26px; }
}
.work-block__en {
margin: 0 0 20px;
font-size: 12px;
letter-spacing: .2em;
}
.work-block__body {
margin: 0 0 20px;
font-size: 12px; line-height: 2;
color: rgba(255,255,255,.78);
}
@media (min-width: 768px) {
.work-block__body {
font-size: 14px;
}
}
/* sticky はハイブリッドレタッチ (work-item 02) のみ。
素材が多くスクロールに連れて読み物として残したいので */
@media (min-width: 768px) {
.work-block__text--sticky {
position: sticky;
top: 40px;
}
}
/* 白ピル: アイコンのみ。aria-label でラベル提供。 */
.work-block__btn {
display: inline-flex; align-items: center; justify-content: center;
background: #fff;
border: 0;
border-radius: 999px;
width: 60px; height: 30px;
transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.work-block__btn .arrow {
filter: invert(1); /* base arrow svg is white → invert to dark on white pill */
transition: transform .3s var(--ease);
}
.work-block__btn:hover,
.work-block__btn:focus-visible {
background: #f1ede6;
box-shadow: 0 6px 22px rgba(0,0,0,.18);
}
.work-block__btn:hover .arrow,
.work-block__btn:focus-visible .arrow {
transform: translateX(4px);
}
@media (min-width: 768px) {
.work-block__btn { width: 70px; }
}
.work-block__media {
margin: 0;
overflow: hidden;
}
/* 直下 img の場合のみ hover で軽くズーム（compare slider 内 img には掛けない）*/
.work-block__media > img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 1.4s var(--ease-out);
}
.work-block__media:hover > img { transform: scale(1.04); }
/* ---------- Before/After Compare Slider (Works main visual) ----------
仕組み:
1. before/after 画像を絶対配置で重ねる
2. before(=上層) は CSS clip-path で右側を切り、handle 位置までを表示
3. を全面に被せ、value(0-100) を CSS変数 --pos に流し込む
4. キーボード矢印 / ドラッグ / タップ全部ネイティブで動く */
.compare {
--pos: 50%;
position: relative;
width: 100%;
aspect-ratio: var(--ar-img);
overflow: hidden;
user-select: none;
-webkit-user-select: none;
background: #000;
}
.compare img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
pointer-events: none;
-webkit-user-drag: none;
}
/* 画像+ラベルをグループでまとめ、clip-path/重ね順はグループ側で持つ */
.compare__group { position: absolute; inset: 0; pointer-events: none; }
.compare__group--after { z-index: 0; }
.compare__group--before {
z-index: 1;
clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
/* range input を全面に被せる。thumb のサイズはブラウザ標準 (小さい) のままで OK。
width:100% にすると value 計算が破綻する (thumbWidth == trackWidth → ゼロ除算)
ので絶対に触らない。視覚は opacity:0 で消すだけ。
touch-action:pan-y で「縦スクロールはページに通す/横ドラッグだけスライダーが拾う」 */
.compare__slider {
position: absolute; inset: 0;
width: 100%; height: 100%;
margin: 0; padding: 0;
opacity: 0;
cursor: ew-resize;
z-index: 4;
touch-action: pan-y;
}
.compare__slider:focus { outline: none; }
/* 仕切り線 + ハンドル (range input の入力に応じて --pos が動くだけ) */
.compare__handle {
position: absolute; top: 0; bottom: 0;
left: var(--pos);
width: 2px;
background: #9AFF00;
transform: translateX(-1px);
pointer-events: none;
z-index: 3;
}
.compare__handle-knob {
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: 38px; height: 38px;
border-radius: 50%;
background: #9AFF00;
box-shadow: 0 4px 18px rgba(0,0,0,.45);
transition: transform .25s var(--ease-out);
}
/* compare 領域 (=スライダー) にホバーしたらノブを少し拡大 */
.compare:hover .compare__handle-knob { transform: translate(-50%, -50%) scale(1.05); }
/* ドラッグ中: ノブ拡大 + 仕切り線太り */
.compare.is-dragging .compare__handle { width: 3px; }
.compare.is-dragging .compare__handle-knob { transform: translate(-50%, -50%) scale(1.18); }
@media (min-width: 768px) {
.compare__handle-knob { width: 46px; height: 46px; }
}
/* ハンドル中央の左右矢印 */
.compare__handle-knob::before,
.compare__handle-knob::after {
content: '';
position: absolute; top: 50%;
width: 7px; height: 7px;
border-top: 1.5px solid #0a0a0a;
border-right: 1.5px solid #0a0a0a;
}
.compare__handle-knob::before {
left: 12px;
transform: translateY(-50%) rotate(-135deg);
}
.compare__handle-knob::after {
right: 12px;
transform: translateY(-50%) rotate(45deg);
}
/* ホバー時: 同心円シャドウが外側へ広がってフェードするだけ（縮み戻りなし）→ ループで繰り返し */
@keyframes compare-knob-halo {
0% {
box-shadow:
0 4px 18px rgba(0, 0, 0, 0.45),
0 0 0 0 rgba(255, 255, 255, 0.44),
0 0 0 0 rgba(154, 255, 0, 0.34),
0 0 0 0 rgba(255, 255, 255, 0.18);
}
100% {
box-shadow:
0 4px 18px rgba(0, 0, 0, 0.45),
0 0 0 14px rgba(255, 255, 255, 0),
0 0 0 26px rgba(154, 255, 0, 0),
0 0 0 38px rgba(255, 255, 255, 0);
}
}
.compare__slider:hover ~ .compare__handle .compare__handle-knob {
animation: compare-knob-halo 2.4s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.compare__slider:hover ~ .compare__handle .compare__handle-knob {
animation: none;
box-shadow:
0 4px 18px rgba(0, 0, 0, 0.45),
0 0 0 3px rgba(255, 255, 255, 0.3);
}
}
.compare__slider:focus-visible ~ .compare__handle .compare__handle-knob {
animation: none;
box-shadow: 0 0 0 3px rgba(255,255,255,.55), 0 4px 18px rgba(0,0,0,.45);
}
/* BEFORE / AFTER ラベル（縦書き） */
.compare__label {
position: absolute; top: 4px;
writing-mode: vertical-rl;
font-size: 10px; letter-spacing: .24em;
color: #fff;
background: rgba(0,0,0,.6);
padding: 10px 4px;
pointer-events: none;
z-index: 2;
backdrop-filter: blur(5px);
}
.compare__label--before { left: 4px; }
.compare__label--after { right: 4px; }
@media (min-width: 768px) {
.compare__label { top: 6px; font-size: 11px; padding: 14px 6px; }
.compare__label--before { left: 6px; }
.compare__label--after { right: 6px; }
}
/* ---------- Composite (素材A + 素材B = 結果) 表示 ---------- */
.composite { display: grid; gap: 12px; }
.composite__sources {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
}
.composite__src {
position: relative;
margin: 0;
aspect-ratio: var(--ar-img);
overflow: hidden;
background: #1a1a1a;
}
/* メイン表示エリアの画像はテキスト選択/ドラッグの対象から外す */
.work-block__media img {
user-select: none;
-webkit-user-select: none;
-webkit-user-drag: none;
-webkit-touch-callout: none;
}
.composite__src-img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.composite__src-label {
position: absolute;
top: 10px; left: 10px;
writing-mode: vertical-rl;
font-family: var(--ff-en);
font-size: 12px;
letter-spacing: .18em;
color: #fff;
background: rgba(0,0,0,.55);
padding: 8px 2px;
pointer-events: none;
}
.composite__src:nth-child(3) .composite__src-label {
left: auto; right: 10px;
}
/* 中央の "+" マーク (素材2枚を繋ぐ) — 黒ピル */
.composite__plus {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 50px; height: 25px;
border-radius: 999px;
background: #0a0a0a;
border: 1px solid rgba(255,255,255,.22);
box-shadow: 0 6px 22px rgba(0,0,0,.5);
z-index: 2;
}
@media (min-width: 768px) {
.composite__plus { width: 70px; height: 30px; }
}
.composite__plus::before,
.composite__plus::after {
content: "";
position: absolute;
top: 50%; left: 50%;
background: #fff;
}
.composite__plus::before { width: 12px; height: 1.5px; transform: translate(-50%, -50%); }
.composite__plus::after { width: 1.5px; height: 12px; transform: translate(-50%, -50%); }
.composite__result {
aspect-ratio: var(--ar-img);
overflow: hidden;
background: #1a1a1a;
}
.composite__result-img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
/* ---------- Gallery (普通の画像表示: メイン1枚) ---------- */
.gallery {
position: relative;
aspect-ratio: var(--ar-img);
overflow: hidden;
background: #1a1a1a;
}
.gallery__main {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
/* ---------- Thumbnails (clickable, swap compare's images) ---------- */
.work-slider {
position: relative;
margin-top: 40px;
border-bottom: 1px solid rgba(255,255,255,.08);
}
.work-item:last-of-type .work-slider { border-bottom: 0; }
.work-slider__track {
display: grid;
grid-auto-flow: column;
/* SP: 1枚弱の幅 / TAB: 3枚見え / PC: 4枚見え */
grid-auto-columns: 80%;
gap: 10px;
overflow-x: auto;
scroll-snap-type: none;
scroll-behavior: smooth;
scrollbar-width: none;
/* 左右にも余白を確保: outline-offset:2px のフォーカスリングが
scroll コンテナ端でクリップされないように padding を取り、
scroll-padding でスナップ位置を補正 */
padding: 4px;
scroll-padding-inline: 4px;
}
@media (min-width: 768px) {
.work-slider__track { grid-auto-columns: 32%; }
}
@media (min-width: 1280px) {
.work-slider__track { grid-auto-columns: calc((100% - 30px) / 4); }
}
/* works-3（AIビジュアル生成）だけサムネ枚数が多いので 1 画面により多く見せる */
.work-slider[data-slider="works-3"] .work-slider__track {
/* 約 2.2 枚見える幅（2 列分の gap を控除） */
grid-auto-columns: calc((100% - 20px) / 2.2);
}
@media (min-width: 768px) {
.work-slider[data-slider="works-3"] .work-slider__track {
grid-auto-columns: calc((100% - 30px) / 4);
}
}
@media (min-width: 1280px) {
.work-slider[data-slider="works-3"] .work-slider__track {
grid-auto-columns: calc((100% - 50px) / 6);
}
}
/* ペア / プラス サムネ (横長) を含むトラックは見える枚数を SP:1, TAB:1.x, PC:2 に */
.work-slider:has(.work-slider__thumb--pair) .work-slider__track,
.work-slider:has(.work-slider__thumb--plus) .work-slider__track {
grid-auto-columns: 92%;
}
@media (min-width: 768px) {
.work-slider:has(.work-slider__thumb--pair) .work-slider__track,
.work-slider:has(.work-slider__thumb--plus) .work-slider__track {
grid-auto-columns: 60%;
}
}
@media (min-width: 1280px) {
.work-slider:has(.work-slider__thumb--pair) .work-slider__track,
.work-slider:has(.work-slider__thumb--plus) .work-slider__track {
grid-auto-columns: calc((100% - 10px) / 2);
}
}
.work-slider__track::-webkit-scrollbar { display: none; }
.work-slider__thumb {
margin: 0; padding: 0;
border: 0; background: none;
cursor: pointer;
scroll-snap-align: start;
aspect-ratio: var(--ar-img);
overflow: hidden;
position: relative;
outline-offset: 2px;
}
.work-slider__thumb img {
width: 100%; height: 100%; object-fit: cover;
opacity: .7;
transition: opacity .3s var(--ease), transform .8s var(--ease-out);
}
/* スライダー内画像のドラッグ持ち出し / 選択を禁止
img の pointer-events を切ることで Firefox の dragstart も止める。
クリックは親の