@charset "UTF-8";
/* ==========================================================
   /works 専用（base02.1.css と分ける）
   元：ポートフォリオ/works-mock/works_v2_site-tone.html
   段階1：PHP の一覧（ヒーローの文字、タブ、カード）
   段階2：タイル・石積み・マスク演出・Vanta波・ローディング（works.js）
   ========================================================== */

:root {
	--wk-navy: #343d62;
	--wk-navy-d: #252A4B;
	--wk-text: #474343;
	--wk-gray: #979797;
	--wk-line: #DDD;
	--wk-accent: #5ba2c3;
	--wk-accent-d: #1d81a2;
	--wk-mono: ui-monospace, "SFMono-Regular", Menlo, monospace;
	--wk-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ヘッダーの「事例」をカレント表示（/works） */
.post-type-archive-works header .main-navi a[href="/works"],
.single-works header .main-navi a[href="/works"] {
	color: var(--wk-accent-d);
	border-bottom: 2px solid var(--wk-accent);
	padding-bottom: 4px;
}

.is-works #main.wk-main { position: relative; z-index: 1; }
.is-works #main.wk-main a { text-decoration: none; }
.is-works #main.wk-main a:hover img,
.is-works #main.wk-main a:hover video { filter: none; }


/* ---------- HEADER：ヒーローに重ねて白く。500px を過ぎると base.js が .fixed を付け、サイト共通の白いヘッダーに戻る ---------- */
.is-works header:not(.fixed) { position: absolute; top: 0; left: 0; right: 0; background: transparent; }
.is-works header:not(.fixed) h1 img { filter: brightness(0) invert(1); }
.is-works header:not(.fixed) .hamburger-menu .menu-item { background: #FFF; }
@media (min-width: 781px) {
	.is-works header:not(.fixed) nav a,
	.is-works header:not(.fixed) nav a:link,
	.is-works header:not(.fixed) nav a:visited { color: #FFF; }
	.is-works header:not(.fixed) .main-navi a[href="/works"] { color: #FFF; border-bottom-color: #FFF; }
}


/* ---------- LOADER（一覧を最初に開いたときだけ。右へ抜けて消える） ---------- */
.wk-loader { display: none; }
/* ローディングの板より先に読まれるヘッダーを、一瞬も見せない */
html.wk-loading { background: var(--wk-navy-d); }
html.wk-loading body { visibility: hidden; }
.wk-loading .wk-loader { visibility: visible; }
.wk-loading .wk-loader {
	position: fixed; inset: 0; z-index: 10000;
	display: flex; align-items: flex-end; justify-content: space-between;
	padding: clamp(24px, 6vh, 56px) clamp(16px, 7vw, 110px);
	background: var(--wk-navy-d); color: #FFF;
	font-family: 'Roboto', sans-serif;
	transition: transform .8s cubic-bezier(.7, 0, .2, 1);
}
.wk-loading .wk-loader.is-done { transform: translate3d(100%, 0, 0); pointer-events: none; }
.wk-loader__logo { height: 30px; width: auto; filter: invert(1); }
.wk-loader__num { font-weight: 700; font-size: clamp(56px, 9vw, 120px); line-height: .8; font-variant-numeric: tabular-nums; }
.wk-loader__bar { position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: var(--wk-accent, #5ba2c3); transform: scaleX(var(--p, 0)); transform-origin: left; }


/* ---------- HERO ---------- */
.wk-hero {
	--u: 150px;        /* タイルの大きさ */
	--gap: 8px;
	--rows: 10;
	--dur: 110s;       /* 1周の秒数 */
	--shade: .6;       /* 暗さ */
	position: relative;
	z-index: 2;
	height: 52vh;
	min-height: 420px;
	overflow: hidden;
	background: var(--wk-navy-d);
	color: #FFF;
	font-family: 'Roboto', "Noto Sans JP", sans-serif;
	perspective: 1700px;
}
.wk-hero__plane {
	position: absolute;
	left: 50%;
	top: 50%;
	transform-style: preserve-3d;
	transform: translate(-50%, -50%) rotateX(52deg) rotateZ(-24deg) scale(1.55);
	opacity: 0;
	transition: opacity 1.2s ease;
}
.wk-hero.is-ready .wk-hero__plane { opacity: 1; }
.wk-hero__track { display: flex; gap: var(--gap); width: max-content; animation: wk-flow var(--dur) linear infinite; will-change: transform; }
@keyframes wk-flow { to { transform: translate3d(calc(var(--shift, 0px) * -1), 0, 0); } }
.wk-hero__block { display: grid; grid-auto-flow: column dense; grid-template-rows: repeat(var(--rows), var(--u)); grid-auto-columns: var(--u); gap: var(--gap); }

/* タイル */
.wk-tile { position: relative; overflow: hidden; border-radius: 3px; background: var(--wk-navy); }
.wk-tile--L { grid-column: span 2; }
.wk-tile--P { grid-row: span 2; }
.wk-tile img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var(--fx, 50%) var(--fy, 50%);
	transform: scale(1.5);
	filter: grayscale(1) contrast(1.06);
}
/* 作品タイルは紺で色調をそろえる */
.wk-tile--real::after { content: ""; position: absolute; inset: 0; z-index: 2; background: #2b3a78; mix-blend-mode: color; opacity: .82; pointer-events: none; }
.wk-tile__cap { position: absolute; left: 8px; bottom: 6px; z-index: 3; font: 500 9px/1 var(--wk-mono); letter-spacing: .14em; color: rgba(255, 255, 255, .8); }

/* 装飾タイル（サイトの色だけ） */
.wk-fx { position: absolute; inset: 0; }
.wk-fx--grad { background: linear-gradient(135deg, var(--c1), var(--c2)); }
.wk-fx--lines { background: var(--c1); overflow: hidden; }
.wk-fx--lines::before { content: ""; position: absolute; inset: -50% -100%; background: repeating-linear-gradient(115deg, var(--c2) 0 1.5px, transparent 1.5px 16px); animation: wk-slide var(--t) linear infinite; opacity: .6; }
.wk-fx--dots { background: var(--c1) radial-gradient(var(--c2) 1.2px, transparent 1.4px) 0 0 / 14px 14px; }
.wk-fx--ring { background: var(--c1); }
.wk-fx--ring::before { content: ""; position: absolute; left: 50%; top: 50%; width: 70%; aspect-ratio: 1; border: 1.5px dashed var(--c2); border-radius: 50%; transform: translate(-50%, -50%); animation: wk-spin var(--t) linear infinite; }
.wk-fx--word { background: var(--c1); display: flex; align-items: center; overflow: hidden; }
.wk-fx--word span { white-space: nowrap; padding-left: 8%; font-weight: 900; font-size: calc(var(--u) * .5); letter-spacing: -.02em; color: var(--c2); animation: wk-marq var(--t) linear infinite; }
@keyframes wk-slide { to { transform: translateX(68px); } }
@keyframes wk-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes wk-marq { to { transform: translateX(-50%); } }

/* 暗さ（文字を読ませる）と、上端（ヘッダーを読ませる） */
.wk-hero::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
	background: linear-gradient(90deg, rgba(37, 42, 75, calc(var(--shade) + .25)) 0%, rgba(37, 42, 75, var(--shade)) 45%, rgba(37, 42, 75, calc(var(--shade) * .55)) 100%); }
.wk-hero::before { content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 4; height: 180px; pointer-events: none; background: linear-gradient(rgba(20, 23, 45, .55), rgba(20, 23, 45, 0)); }

.wk-hero__copy { position: absolute; z-index: 5; left: 0; right: 0; bottom: clamp(28px, 7vh, 64px); }
.wk-hero__in { max-width: 1176px; margin: 0 auto; padding: 0 16px; }
.wk-hero h1 {
	font-size: clamp(52px, 7.5vw, 104px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.01em;
	color: #FFF; /* ほかのページと同じく頭文字だけ大文字（Works） */
}
.wk-hero__jp { display: block; margin-top: 12px; font-size: 13px; font-weight: 500; letter-spacing: .12em; }
.wk-hero__lead { margin-top: 18px; font-size: clamp(14px, 1.4vw, 17px); letter-spacing: .06em; opacity: .92; }

/* スマホは PC より浅い角度・小さめ（2026-10-15 平面から変更）。動きを減らす設定では止める */
@media (max-width: 780px) {
	.wk-hero { --u: 100px; }
	.wk-hero__plane { transform: translate(-50%, -50%) rotateX(38deg) rotateZ(-14deg) scale(1.3); }
}
@media (prefers-reduced-motion: reduce) {
	.wk-hero__track,
	.wk-fx--lines::before,
	.wk-fx--ring::before,
	.wk-fx--word span { animation: none; }
}


/* ---------- BREADCRUMB ---------- */
.wk-crumb { position: relative; z-index: 1; max-width: 1176px; margin: 0 auto; padding: 14px 16px; font-size: 12px; color: var(--wk-gray); } /* 背景の波より手前に */
.wk-crumb ul { display: flex; flex-wrap: wrap; }
.wk-crumb ul li { padding: 0 .6em 0 0; }
.wk-crumb ul li::after { content: "›"; padding-left: .6em; }
.wk-crumb ul li:last-child::after { content: none; }
.wk-crumb a { color: var(--wk-accent-d); }


/* ---------- TABS（制作実績／事例紹介） ---------- */
nav.wk-tabs { margin: 0; position: relative; z-index: 1; border-bottom: 1px solid var(--wk-line); background: #FFF; }
.wk-tabs__in { max-width: 1176px; margin: 0 auto; padding: 0 16px; display: flex; gap: 8px; }
nav.wk-tabs a,
nav.wk-tabs a:link,
nav.wk-tabs a:visited {
	display: grid;
	grid-template-columns: auto auto;
	align-items: baseline;
	column-gap: 10px;
	padding: 18px 22px 16px;
	margin-bottom: -1px;
	border-bottom: 3px solid transparent;
	color: var(--wk-gray);
	text-decoration: none;
}
.wk-tabs a b { font-size: 16px; font-weight: 700; color: var(--wk-text); }
.wk-tabs a span { font: 500 10px/1 var(--wk-mono); letter-spacing: .16em; }
.wk-tabs a small { grid-column: 1 / -1; margin-top: 6px; font-size: 11px; }
nav.wk-tabs a.is-on { border-bottom-color: var(--wk-navy); }
.wk-tabs a.is-on b { color: var(--wk-navy); }
.wk-tabs a:not(.is-on):hover b { color: var(--wk-accent-d); }


/* ---------- WORKS ---------- */
.wk-works { position: relative; padding: 64px 16px 140px; }
.wk-works__wrap { max-width: 1176px; margin: 0 auto; }
.wk-works__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 56px; }
.wk-title {
	font-family: 'Roboto', "Noto Sans JP", sans-serif;
	font-size: clamp(38px, 5vw, 64px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: .01em;
	color: var(--wk-text); /* トップページの Featured Work と同じ表記 */
}
.wk-title__jp { display: block; margin-bottom: 12px; font-size: 13px; font-weight: 500; letter-spacing: .12em; color: var(--wk-accent-d); text-transform: none; }
.wk-empty { color: var(--wk-gray); }

/* 段階1は普通のグリッド。段階2で JS が石積み（.is-masonry）にする */
.wk-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 56px; grid-auto-flow: dense; align-items: start; }
.wk-grid.is-masonry { row-gap: 0; grid-auto-rows: 6px; }
.wk-grid.is-masonry .wk-card { padding-bottom: 56px; }

.wk-card { grid-column: span 4; }
.wk-card--L { grid-column: span 8; }
.wk-card__frame { position: relative; overflow: hidden; border-radius: 2px; background: #e7e9ef; contain: paint; }
.wk-card--L .wk-card__frame,
.wk-card--M .wk-card__frame { aspect-ratio: 16 / 10; }
.wk-card--P .wk-card__frame { aspect-ratio: 3 / 4; }
.wk-card--S .wk-card__frame { aspect-ratio: 1 / 1; }
.wk-card__media { position: absolute; inset: 0; overflow: hidden; }
.wk-card__inner { position: absolute; inset: 0; }
.wk-card__inner img,
.wk-card__inner video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var(--fx, 50%) var(--fy, 50%);
	transition: transform 1.2s var(--wk-ease);
}
/* ロゴは白地の画像が多いので、薄いグレーの地に白をなじませる（乗算。地は画像のすぐ外側に置く） */
.wk-card--t-logo .wk-card__inner { background: #F2F4F7; }
.wk-card--t-logo .wk-card__inner img { mix-blend-mode: multiply; }
.wk-card:hover .wk-card__inner img,
.wk-card:hover .wk-card__inner video { transform: scale(1.03); }
.wk-card__badge { position: absolute; top: 10px; left: 10px; z-index: 3; padding: 5px 7px; border-radius: 2px; background: #FFF; color: var(--wk-navy); font-size: 10px; font-weight: 700; line-height: 1.2; }
.wk-card__ph {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 16px;
	background: linear-gradient(150deg, var(--wk-navy), var(--wk-accent-d));
	color: #FFF;
}
.wk-card__ph b { font-size: clamp(22px, 3vw, 40px); font-weight: 900; line-height: .95; text-transform: uppercase; }
.wk-card__ph small { margin-top: 8px; font: 500 9px/1 var(--wk-mono); letter-spacing: .2em; opacity: .7; }

.wk-card__meta { margin-top: 16px; }
.wk-card__type { font: 500 10px/1 var(--wk-mono); letter-spacing: .16em; color: var(--wk-gray); }
.wk-card__name {
	margin: 8px 0 10px;
	font-family: 'Roboto', "Noto Sans JP", sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .03em;
	text-transform: uppercase; /* カード名は見栄えをそろえて全部大文字 */
	color: var(--wk-navy);
}
.wk-card__one { margin: -4px 0 10px; font-size: 13px; line-height: 1.7; color: var(--wk-text); }
.wk-card__links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: -2px 0 10px; }
.is-works .wk-card__links a { font-size: 13px; font-weight: 700; line-height: 1.6; color: var(--wk-accent-d); border-bottom: 1px solid var(--wk-accent); }
/* 外部リンクは控えめに（遷移を促さない） */
.is-works .wk-card__links a.wk-card__ext { display: inline-flex; align-items: center; gap: 5px; font: 500 10px/1.6 var(--wk-mono); letter-spacing: .14em; color: var(--wk-gray); border-bottom: 0; transition: color .3s; }
.is-works .wk-card__links a.wk-card__ext:hover { color: var(--wk-accent-d); }
.is-works .wk-card__links a.wk-card__ext::after { content: "\f08e"; font-family: FontAwesome; font-size: 10px; letter-spacing: 0; } /* fa-external-link（Font Awesome 4.5） */
.wk-card__tags { display: flex; flex-wrap: wrap; gap: 5px; }
.wk-tag { padding: 5px 7px; border: 1px solid var(--wk-navy); border-radius: 2px; font: 500 10px/1 var(--wk-mono); letter-spacing: .08em; color: var(--wk-navy); }
.wk-card__stack,
.wk-card__credit { margin-top: 8px; font: 11px/1.4 var(--wk-mono); letter-spacing: .04em; color: var(--wk-gray); }


/* ---------- 演出（works.js が html に .wk-js を付けたときだけ。JS なしでは全部そのまま見える） ---------- */

/* 背景：波（Vanta.js。作品一覧が見えている間だけ表示） */
.wk-bgfx { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .8s ease; }
.wk-bgfx.is-on { opacity: 1; }
.wk-works__wrap { position: relative; z-index: 1; }

/* 読み込み中はうっすら光る */
.wk-js .wk-card__frame { background: linear-gradient(100deg, #e7e9ef 30%, #f3f4f8 50%, #e7e9ef 70%) 0 0 / 300% 100%; animation: wk-shim 1.3s linear infinite; }
.wk-js .wk-card.is-loaded .wk-card__frame { animation: none; background: #e7e9ef; }
@keyframes wk-shim { to { background-position: -300% 0; } }

/* マスク：覆いを左から開く（clip-path はカクつくので transform） */
.wk-js .wk-card__frame::after { content: ""; position: absolute; inset: 0; z-index: 4; background: #FFF; transform: scaleX(0); transform-origin: right center; pointer-events: none; }
.wk-js .wk-card.is-loaded:not(.is-in) .wk-card__frame::after { transform: scaleX(1); }
.wk-js .wk-card.is-in .wk-card__frame::after { transform: scaleX(0); transition: transform .9s cubic-bezier(.7, 0, .2, 1) var(--d, 0s); }
/* 中身は動かさない（覆いが開くだけ。動画と重なるとうるさいため） */

/* 文字は少し遅れて下から */
.wk-js .wk-card__meta { opacity: 0; transform: translateY(14px); transition: opacity .8s ease, transform .8s var(--wk-ease); }
.wk-js .wk-card.is-in .wk-card__meta { opacity: 1; transform: none; transition-delay: calc(var(--d, 0s) + .2s); }

/* 動きを減らす設定では演出なし */
.wk-still .wk-card__frame::after { display: none; }
.wk-still .wk-card__inner,
.wk-still .wk-card__meta { opacity: 1 !important; transform: none !important; transition: none !important; }
.wk-still .wk-card__frame { animation: none !important; }


@media (max-width: 780px) {
	.wk-tabs__in { padding: 0; }
	nav.wk-tabs a { flex: 1; padding: 14px 12px; }
	.wk-tabs a span { display: none; } /* 英字は幅が足りず折り返すので隠す */
	.wk-grid { grid-template-columns: 1fr; row-gap: 44px; }
	.wk-card,
	.wk-card--L { grid-column: auto; }
}