/*
Theme Name: Atelier NODE
Theme URI: https://atelier-node.jp/
Template: arkhe
Author: FUKASA Taro
Description: Atelier NODE（酒井建築事務所）公式サイト用 Arkhe 子テーマ。
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.1
License: GNU General Public License v2 or later
Text Domain: atelier-node
*/

:root {
	--node-color-ink: #4d4c46;
	--node-color-ink-soft: #83827d;
	--node-color-body-dark: #403d3c;
	--node-color-heading: #000000;
	--node-color-bright: #00ff1a;
	/* MOVEアイコンのホバー色（lime）と同じ。Works・Awards/Newsのホバー時にも使う */
	--node-color-lime: #00ff00;
	--node-color-accent-blue: #0000e6;

	/* Profileのスタッフ行とAwardの一覧を、見出しより内側に寄せる量。
	   2か所そろえたいので1つの値で持つ（2026-08-08） */
	--node-list_indent: 3.672vw; /* 70.5px：STAFF行とAward一覧の左端をx=180に合わせる */

	/* Works詳細ページ（濃色ページ）専用。写真を主役にするため背景を沈め、
	   その上に置くスクロールバーだけ明るくする（2026-08-07） */
	--node-color-works_bg: #5d5c56;
	--node-color-works_scroll: #c2c2c2;

	/* Awards / News詳細ページ（黄色のページ）専用。
	   スクロールバーは当初仕様書の#c2c2c2で作ったが、黄色の地では
	   コントラスト比1.6でほとんど見えず、先方から#4d4c46へ訂正の連絡があった
	   （同じ地に対して比7.7。2026-08-13） */
	--node-color-awards_bg: #ecff00;
	--node-color-awards_scroll: #4d4c46;

	/* 和文はデザイン仕様どおりNoto Sans JPにする。Arkhe標準は
	   "Helvetica Neue", Arial, ヒラギノ…, Meiryo で、和文が閲覧環境の
	   システムフォント任せになっていた。欧文（Helvetica Neue/Arial）には
	   日本語字形が無いため、その後ろにNoto Sans JPを差し込むことで
	   欧文の見た目は変えずに和文だけ差し替わる（2026-08-04） */
	--ark-font_family: "Helvetica Neue", Arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

/* デザイン仕様は和欧文ともMedium指定のため、既定のウェイトを500にする
   （Arkhe標準はbodyで400。見出し等の個別指定はそのまま優先される） */
body {
	font-weight: 500;
}

/* ==========================================================================
   ヘッダー（PC・モバイル共通）: ロゴ左・ハンバーガー右に固定
   Arkhe標準の5カラムグリッド（menu/left/center/right/search）はDOM順で
   menuが先頭に来るため、`header_btn_layout`設定だけでは左右化できない。
   flexに切替え、orderで並びを明示的に入替える。

   モバイル（<1000px）: Arkhe標準のフルスクリーン・ドロワー（`.l-header__drawerBtn`→
   `.c-drawerNav`）をそのまま使用。

   PC（>=1000px）: フルスクリーン・ドロワーは使わず、ハンバーガーをクリックすると
   ヘッダー内で横並びナビ（`.l-header__right`内の`#gnav`）が横にスライドして現れる
   独自実装にする（`js/header-nav-toggle.js`）。Arkhe標準のハンバーガーボタンは非表示にし、
   複製した独自ボタン（`.js-pcNavToggle`、data-onclick属性なし＝Arkhe側のイベントには
   紐付かない）をクリックトリガーにする。
   ========================================================================== */
.l-header__body {
	display: flex !important;
	align-items: center;
	justify-content: flex-end;
	/* ロゴの上に少し余白を取る（2026-08-03） */
	padding-top: 0.75rem;
}

.l-header__center {
	order: 1;
	margin-right: auto;
}

.l-header__left {
	display: none;
}

@media (max-width: 999px) {
	/* モバイルはロゴを左寄せではなく中央に配置する。
	   ロゴ側は通常のflowに残して高さ・上下余白はそのまま保ち、
	   ハンバーガーボタン（小さい要素）だけ右端に絶対配置で固定する */
	.l-header__body {
		position: relative;
		justify-content: center;
	}

	.l-header__center {
		margin-right: 0;
	}

	.l-header__drawerBtn {
		display: flex !important;
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.l-header__right,
	.l-header__pcNavToggle {
		display: none !important;
	}

	/* 「全画面表示にしないで右上に1/4くらいのサイズに」との指摘のため、Arkhe標準の
	   フルスクリーン・ドロワー（`.p-drawer{width:100%;height:100%;left:0;top:0}`）を
	   上書きし、ヘッダー直下・右寄せのコンパクトなパネルに変更する */
	.p-drawer {
		left: auto;
		right: 0;
		top: var(--ark-header_height, 0px);
		width: min(70vw, 300px);
		height: auto;
		max-height: calc(100vh - var(--ark-header_height, 0px) - 2rem);
		padding-top: 0;
		box-shadow: -8px 8px 24px rgba(0, 0, 0, 0.35);
	}

	.p-drawer__inner {
		height: auto;
		max-height: calc(100vh - var(--ark-header_height, 0px) - 2rem);
	}

	.p-drawer__body {
		padding: 8vw;
	}

	/* Arkhe本体の`.admin-bar .p-drawer{height:calc(100% - ...);top:...}`は
	   `.p-drawer`単体（クラス1つ）より詳細度が高く（`.admin-bar`+`.p-drawer`の2つ）、
	   ログイン中は上のコンパクト化が上書きされてしまうため個別に対応する */
	.admin-bar .p-drawer {
		top: calc(var(--ark-adminbar_height, 0px) + var(--ark-header_height, 0px));
		height: auto;
		max-height: calc(
			100vh - var(--ark-adminbar_height, 0px) - var(--ark-header_height, 0px) - 2rem
		);
	}

	/* パネルがコンパクトになり背後のページがほぼ見える状態になったため、
	   メニュー表示中は背後を少しグレーに透過させる（Arkhe標準では`background:none`で
	   暗転なし）。`.p-drawerUnderlayer`自体がクリックで閉じる領域を兼ねている */
	.p-drawerUnderlayer {
		background: rgba(20, 20, 20, 0.7);
	}
}

@media (min-width: 1000px) {
	.l-header__drawerBtn {
		display: none !important;
	}

	.l-header__right {
		display: flex !important;
		order: 2;
		align-items: center;
		max-width: 0;
		overflow: hidden;
		opacity: 0;
		white-space: nowrap;
		transition: max-width 0.4s ease, opacity 0.3s ease;
	}

	.l-header__right.is-open {
		max-width: 640px;
		opacity: 1;
		/* Newsとハンバーガーの間の余白（.c-snsLinks__menu.is-openのmargin-rightと
		   同じ値にして、ハンバーガー/SNSアイコンのx位置が引き続き揃うようにする。
		   2026-08-03） */
		margin-right: 1.25rem;
	}

	.l-header__pcNavToggle {
		display: flex;
		order: 3;
		/* .l-header__bodyのalign-items:centerだと縦中央揃えになりロゴの上寄りに来るため、
		   NODEロゴの下端に揃うよう自身だけ下端揃えにする（2026-08-03） */
		align-self: flex-end;
		/* テキスト下端・ハンバーガー下端を70pxに揃えるための微調整
		   （0.5rem=8px → 6px、2026-08-03） */
		margin-bottom: 6px;
	}

	.js-pcNavToggle.is-open .__open {
		opacity: 0;
		transform: rotate(-180deg);
	}

	.js-pcNavToggle.is-open .__close {
		opacity: 1;
		transform: rotate(0);
	}
}

/* ==========================================================================
   トップモーション（オープニング演出）
   ページ読み込み時に1回だけ全画面で再生し、終了後にフェードアウトしてhero
   （p-heroIntro）を表示する。JS: js/top-motion.js
   ========================================================================== */
.p-topMotion {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	opacity: 1;
	transition: opacity 0.6s ease;
}

.p-topMotion.is-hidden {
	opacity: 0;
	pointer-events: none;
}

.p-topMotion__video {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* スマホ縦画面ではcontainのまま全体を映すと上下に大きな余白ができてしまう。
   動画本体のテキスト・ロゴは横方向の中央にしか出てこない（左右に大きな余白がある）
   ことをフレーム解析で確認済みなので、正方形に近い比率でクロップして
   動画を大きく見せる（テキストが切れない安全な範囲でのみクロップ） */
@media (max-width: 640px) {
	.p-topMotion__video {
		height: auto;
		aspect-ratio: 1 / 1;
		object-fit: cover;
	}
}

/* 再生中はヘッダーがオーバーレイの上（または透けて）見えてしまう場合があるため、
   body.has-top-motion の間はヘッダー自体を非表示にする（JS: js/top-motion.js）。
   丸印スクロールバーも同じ理由で隠す。オープニングの間は画面を動かす想定が無く、
   白い画面の右端に線と丸だけが残ると浮いて見えるため（2026-08-08） */
body.has-top-motion .l-header,
body.has-top-motion .c-circleScrollbar {
	display: none;
}

/* ==========================================================================
   Hero Intro（トップページ・1段目：ロゴ大表示 + タグライン、白背景）
   ========================================================================== */
/* 寸法はすべてデザイン仕様どおり（1920px幅に対する比率＝vw）。
   上下の余白を仕様値で決めるため、以前の flex + align-items:center による
   縦中央寄せはやめている（中央寄せだと余白の指定が効かなくなるため）。2026-08-04 */
.p-heroIntro {
	padding: 15.625vw 1.5rem 7.81vw; /* 上300px（ロゴまで） / 下150px（緑の長方形まで） */
	text-align: center;
}

.p-heroIntro__body {
	margin: 0 auto;
}

/* ロゴ・英文タグライン・和文の3つは、下限に達する幅（約624px）が揃うように
   clampの最小値を決めてある。こうすると狭い画面でも三者の比率が変わらず、
   「和文だけ大きく見える」といった崩れが起きない（2026-08-04） */
.p-heroIntro__logo {
	width: clamp(260px, 41.67vw, 800px); /* 800px */
	margin: 0 auto 13.02vw; /* ロゴとタグラインの間250px */
	/* 真ん中に置くと右上の「°」の分だけ左に寄って見えるため、少し右へずらす。
	   仕様は左566px・右554pxで、800pxのロゴを6px右へ＝自身の幅の0.75%
	   （画面中央がOとDの間に来る）。%で指定しているのは、幅がclampの上限・下限で
	   止まったときもロゴの大きさに対する比率を保つため（2026-08-23の指示） */
	transform: translateX(0.75%);
}

.p-heroIntro__logoImg {
	display: block;
	width: 100%;
	height: auto;
}

.p-heroIntro__logoText {
	margin: 0 0 13.02vw;
	color: var(--node-color-ink);
	font-size: clamp(2rem, 6vw, 4rem);
	font-weight: 700;
}

.p-heroIntro__tagline {
	margin: 0;
	color: var(--node-color-ink-soft);
	font-size: var(--ark-fz--m, 1rem);
	letter-spacing: 0.05em;
}

/* SVG自体が仕様と同じ750×45なので、幅だけ指定すれば高さ45pxもそのまま出る */
.p-heroIntro__taglineImg {
	display: block;
	width: clamp(244px, 39.06vw, 750px); /* 750px */
	height: auto;
	margin: 0 auto;
}

/* 英語タグラインの下の和文キャッチコピー（2026-08-04） */
.p-heroIntro__taglineJa {
	margin: 2.08vw auto 0; /* 英文タグラインとの間40px */
	color: var(--node-color-ink);
	/* 仕様の「高さ40px」に合わせると28pxになり、上の英文タグライン（750px幅）に対して
	   72%の幅にしかならず小さすぎたため、英文に対して約95%の幅になるサイズにした。
	   下限12.1pxは英文・ロゴと同じ幅（約624px）で効き始めるので、
	   狭い画面でも英文との比率は保たれる（2026-08-04） */
	font-size: clamp(12.1px, 1.93vw, 37.1px);
	font-weight: 500;
	line-height: 1.42;
	text-align: center;
}

/* ロゴ・英文・和文のサイズはclampの下限で連動して止まるのでここでは触らない。
   上下の余白だけ、vwのままだと狭い画面で詰まりすぎるため確保し直す */
@media (max-width: 999px) {
	.p-heroIntro {
		padding-top: 6rem;
		padding-bottom: 4rem;
	}

	.p-heroIntro__logo,
	.p-heroIntro__logoText {
		margin-bottom: 5rem;
	}

	.p-heroIntro__taglineJa {
		margin-top: 1rem;
	}
}

/* ==========================================================================
   Hero Visual（トップページ・2段目：フルブリード写真/動画 + MOVE°ラベル）
   ========================================================================== */
.p-heroVisual {
	position: relative;
	min-height: 100vh;
	overflow: hidden;
	color: #fff;
}

/* 動画は--ark-header_height分だけ下にオフセットして配置しているため、
   ヘッダーの高さ分はこの背景色がそのまま透けて見える。ヘッダーを透過に
   した際にここがダークグレーのままだと不自然に見えるため白にした（2026-08-04） */
.p-heroVisual__bg {
	position: absolute;
	inset: 0;
	background: #fff;
}

.p-heroVisual__video,
.p-heroVisual__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 動画のみ上端をヘッダーの下まで下げて配置する。当初225px（リキッド換算8.51%）で
   指定したが、「ヘッダーの下くらいまでずらす」との追加指示を受け、固定値ではなく
   実際のヘッダー高さ（--ark-header_height）に連動させる方式に変更。
   .p-heroVisual__label（MOVEラベル）も同じ変数を基準に配置しているため、
   常に動画の左上と重なる（2026-08-03） */
.p-heroVisual__video {
	top: var(--ark-header_height, 56px);
	height: calc(100% - var(--ark-header_height, 56px));
}

/* スマホ縦画面では16:9の動画をmin-height:100vhの縦長ボックスにcoverすると
   左右が大きく切れて動画に焼き込まれた字幕まで見切れてしまうため、
   コンテナの縦横比を動画と同じ16:9に合わせてクロップそのものを無くす */
@media (max-width: 640px) {
	.p-heroVisual {
		aspect-ratio: 16 / 9;
		min-height: 0;
		width: calc(100% + 30px);
		margin-left: -15px;
	}
}

.p-heroVisual__poster {
	background-position: center;
	background-size: cover;
}

/* YouTube仮動画（本番mp4差し替えまでの背景）。iframeをobject-fit:coverできないため
   16:9を保ったまま拡大してコンテナ全体を覆うサイズに調整する定番手法 */
.p-heroVisual__youtube {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.p-heroVisual__youtube iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 177.78vh; /* 16/9 * 100vh */
	height: 100vh;
	min-width: 100%;
	min-height: 56.25vw; /* 9/16 * 100vw */
	transform: translate(-50%, -50%);
}

.p-heroVisual__poster.-placeholder {
	background: linear-gradient(135deg, #3d3c37, var(--node-color-ink) 60%, #5b594f);
}

.p-heroVisual__dots {
	position: absolute;
	inset: 0;
	background-image: url('img/halftone-dots.png');
	background-size: cover;
	background-position: center;
	mix-blend-mode: overlay;
	opacity: 0.5;
	pointer-events: none;
}

/* 動画全体をYouTubeへのリンクにする（音量ボタンは別要素・z-indexで上に重ねて
   クリックを奪わないようにする）。「動画全体にホバーした時にホバーアイコンへ」
   との指示のため、クロスフェードのトリガーもこのリンク全体への:hoverにする
   （2026-08-03） */
.p-heroVisual__link {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
}

.p-heroVisual__label {
	position: absolute;
	left: 1.5rem;
	/* オーバーレイヘッダー（ロゴ・ハンバーガー）が写真の上に重なって表示されるため、
	   その高さ分下げてから配置し、左上のロゴ・アイコンと重ならないようにする */
	top: calc(var(--ark-header_height, 56px) + 1rem);
	display: block;
	line-height: 0;
	/* 動画幅の15%程度に拡大（2026-08-03、従来は固定100px） */
	width: 15%;
}

.p-heroVisual__labelImg {
	display: block;
	width: 100%;
	height: auto;
	transition: opacity 0.2s ease;
}

.p-heroVisual__labelImg.-default {
	opacity: 1;
}

.p-heroVisual__labelImg.-hover {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}

.p-heroVisual__link:hover .p-heroVisual__labelImg.-default {
	opacity: 0;
}

.p-heroVisual__link:hover .p-heroVisual__labelImg.-hover {
	opacity: 1;
}

/* 背景動画の音声オン/オフボタン（初期状態はミュート、クリックで音声再生） */
.p-heroVisual__soundBtn {
	position: absolute;
	left: 1.5rem;
	bottom: 1.5rem;
	z-index: 2;
	width: 2.5rem;
	height: 2.5rem;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.3);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease;
}

.p-heroVisual__soundBtn:hover {
	background: rgba(0, 0, 0, 0.55);
}

.p-heroVisual__soundIcon {
	width: 1.1rem;
	height: 1.1rem;
}

.p-heroVisual__soundIcon.-unmuted {
	display: none;
}

.p-heroVisual__soundBtn[aria-pressed="true"] .p-heroVisual__soundIcon.-muted {
	display: none;
}

.p-heroVisual__soundBtn[aria-pressed="true"] .p-heroVisual__soundIcon.-unmuted {
	display: block;
}

/* ==========================================================================
   Works ランダム表示（トップページ）
   ========================================================================== */
.p-worksPreview {
	padding: 0;
}

.p-worksPreview__gridWrap {
	position: relative;
}

.p-worksPreview__title {
	position: absolute;
	top: 1.5rem;
	left: 1.5rem;
	z-index: 2;
	display: block;
	margin: 0;
	color: #fff;
	font-size: var(--ark-fz--l, 1.1rem);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-decoration: none;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
	transition: color 0.3s ease;
}

/* ホバー対象は文字自体ではなく写真側。写真（.p-worksPreview__link）に
   カーソルを乗せている間、Worksの文字をlimeにする（2026-08-04にグレーから変更） */
.p-worksPreview__gridWrap:has(.p-worksPreview__link:hover) .p-worksPreview__title {
	color: var(--node-color-lime);
}

.p-worksPreview__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	/* .l-containerの外に出しても、main（Arkheのl-main、max-width:1200px）の
	   制約はそのまま効くため、特別な指定をしなくてもhero動画・Awardsと
	   同じ幅（1200px）に自然に揃う */
}

.p-worksPreview__item {
	flex: 0 1 50%;
	min-width: 280px;
}

/* スマホは`.l-content__body.l-container`（左右15pxパディング）の内側に
   あるため画面幅いっぱいにならない。hero動画と同じ手法で外に出す。
   あわせてmin-width:280pxのままだと2枚が横並びできず縦積みになってしまう
   ため、スマホ幅では解除して2列を維持する */
@media (max-width: 640px) {
	.p-worksPreview {
		width: calc(100% + 30px);
		margin-left: -15px;
	}

	.p-worksPreview__item {
		min-width: 0;
	}
}

.p-worksPreview__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.p-worksPreview__thumb {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #eee;
}

/* ホバーは色が戻るだけ。写真自体は動かさない（ズームなしの指示。2026-08-07）。
   Works詳細ページの写真も同じ扱いにそろえてある */
.p-worksPreview__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1);
	transition: filter 0.4s ease;
}

.p-worksPreview__link:hover .p-worksPreview__thumb img {
	filter: grayscale(0);
}


/* ==========================================================================
   クイックナビ（Profile / Works / Awards News / Contact）+ Awards/Newsビジュアル
   ========================================================================== */
.p-quickNav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 60vh;
	/* Worksの写真帯との間に少し隙間を空ける。モバイル仕様の2.4px（390pxに対して
	   0.615%）をそのまま比率で持たせている（2026-08-16） */
	margin-top: 0.615vw;
}

/* 上下の余白・文字サイズ・項目間はデザイン仕様どおり（1920px幅に対する比率＝vw）。
   上下paddingで位置を決めるため、中央寄せ（align-items:center）はやめる（2026-08-04） */
.p-quickNav__nav {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 9.11vw 0 9.64vw; /* 上175px / 下185px */
	background: #fff;
}

.p-quickNav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
}

.p-quickNav__list li + li {
	margin-top: 4.69vw; /* 項目間90px */
}

/* inline-blockはベースライン揃えのため下にディセンダ分の余白（約6.5px）が付き、
   項目間・下マージンが仕様より広くなる。line-height:0とvertical-align:topで打ち消す */
.p-quickNav__list li {
	line-height: 0;
}

.p-quickNav__link {
	display: inline-block;
	position: relative;
	vertical-align: top;
}

.p-quickNav__label {
	display: block;
	height: 2.86vw; /* 55px */
	width: auto;
	transition: opacity 0.3s ease;
}

.p-quickNav__label.-default {
	opacity: 1;
}

.p-quickNav__label.-hover {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}

.p-quickNav__link:hover .p-quickNav__label.-default,
.p-quickNav__link:focus-visible .p-quickNav__label.-default {
	opacity: 0;
}

.p-quickNav__link:hover .p-quickNav__label.-hover,
.p-quickNav__link:focus-visible .p-quickNav__label.-hover {
	opacity: 1;
}

/* ホバー時に表示する丸オブジェクト（Maru_30px.svg）。文字の右上に、
   円の中心が文字の高さ（-defaultラベルの上端＝キャップハイトの目安）に
   来るように配置する（2026-08-04） */
.p-quickNav__dot {
	display: block;
	position: absolute;
	top: 0;
	left: 100%;
	width: 1.5625vw; /* 30px */
	height: 1.5625vw;
	margin-left: 1.15vw; /* 22px */
	opacity: 0;
	transform: translateY(-50%);
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.p-quickNav__link:hover .p-quickNav__dot,
.p-quickNav__link:focus-visible .p-quickNav__dot {
	opacity: 1;
}

.p-quickNav__awards {
	position: relative;
}

.p-quickNav__awardsLink {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.p-quickNav__awardsThumb {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 300px;
	overflow: hidden;
	background: var(--node-color-ink);
}

.p-quickNav__awardsThumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* 通常はモノクロ、ホバーでカラーへ。Worksの写真帯と同じ扱いにする
	   （ズームはしない。2026-08-16） */
	filter: grayscale(1);
	transition: filter 0.4s ease;
}

.p-quickNav__awardsLink:hover .p-quickNav__awardsThumb img,
.p-quickNav__awardsLink:focus-visible .p-quickNav__awardsThumb img {
	filter: grayscale(0);
}

.p-quickNav__awardsThumb.-placeholder {
	background: linear-gradient(135deg, #3d3c37, var(--node-color-ink) 60%, #5b594f);
}

.p-quickNav__awardsTitle {
	position: absolute;
	top: 1.5rem;
	left: 1.5rem;
	color: #fff;
	font-size: var(--ark-fz--l, 1.1rem);
	font-weight: 700;
	letter-spacing: 0.02em;
	transition: color 0.3s ease;
}

/* 写真（.p-quickNav__awardsLink）にカーソルを乗せている間、
   Awards / Newsの文字をlimeにする（Worksの文字と同じ挙動。2026-08-04にグレーから変更） */
.p-quickNav__awardsLink:hover .p-quickNav__awardsTitle {
	color: var(--node-color-lime);
}

/* 仕様はPC（1920px基準）のリキッド指定なので、タブレット以下では
   文字が小さくなりすぎないよう最低サイズを確保する（2026-08-04） */
@media (max-width: 999px) {
	.p-quickNav__nav {
		padding: 4rem 0;
	}

	.p-quickNav__list li + li {
		margin-top: 2.25rem;
	}

	.p-quickNav__label {
		height: clamp(1.5rem, 4vw, 2.86rem);
	}

	.p-quickNav__dot {
		width: clamp(0.9rem, 2.2vw, 1.6rem);
		height: clamp(0.9rem, 2.2vw, 1.6rem);
		margin-left: 0.6rem;
	}
}

@media (max-width: 640px) {
	.p-quickNav {
		grid-template-columns: 1fr;
		/* `.l-content__body.l-container`（左右15pxパディング）の内側にあるため
		   画面幅いっぱいにならない。hero動画・Works等と同じ手法で外に出す */
		width: calc(100% + 30px);
		margin-left: -15px;
	}

	.p-quickNav__nav {
		padding: 3rem 0;
	}

	.p-quickNav__awardsThumb {
		min-height: 240px;
	}
}

/* ==========================================================================
   理念文セクション
   背景はスクロール連動（js/philosophy-slider.js）。
   緑(120)⇔青(240)の120度幅の中だけで色相が変化する（1920pxモニターで
   確認したところ、以前は1周以上してしまっていたためこの範囲に固定した。
   2026-08-04）。長方形の外では、その時点の色で止まる。
   ========================================================================== */
:root {
	/* 初期値（JS読み込み前のフォールバック）。MOVEアイコンのホバー色（lime = hsl(120,100%,50%)）に
	   合わせてhue=120にしている（2026-08-04） */
	--philo-hue: 120;
	--philo-radius: 0; /* グラデーションの広がり幅（度）。JSが進度に応じて書き換える */
}

/* 背景（グラデーション+切り欠き）はmain/subをまたいで1枚の長方形になるよう
   親の.p-philosophyに持たせている（2026-08-04、以前はp-philosophy__mainだけの
   背景だったため下部の本文（__body-en/ja）が白背景にはみ出していた） */
/* .l-main__body.p-frontの左右余白（このページ全体のコンテナ幅）から
   はみ出して画面幅いっぱいにする定番の手法（2026-08-04）。
   中の文章は各`.l-container`側で改めて中央寄せ・幅制限されるので、
   背景の長方形だけが全幅になる */
/* 4つの文章＋余白の縦位置を「長方形自体の高さ」の%で指定するため
   （js/philosophy-slider.jsが計算してmargin-top/bottomをpxで書き換える）、
   子要素のmarginが外側に染み出して高さの計算がずれないよう、
   このセクションとmain/subをそれぞれBFC化（display:flow-root）している（2026-08-04） */
.p-philosophy {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-bottom: 9px;
	display: flow-root;
}

.p-philosophy__main {
	position: relative;
	display: flow-root;
	padding-top: 9.9vw;    /* 190px：長方形の上端から最初の英文まで */
	margin-bottom: 7.29vw; /* 140px：和文リードと英文本文の間 */
}

/* 大きな"N"の文字をイメージした背景。「長方形として考えて、上下に直角
   三角形の切れ込みを白で入れる」という発想の1本のclip-pathで実装。
   左上と右下に直角三角形の切れ込み（背景色が見える部分）を作ることで、
   太い斜めの帯が中央を貫いているように見える。
   三角形のサイズは--notch-h（横方向の広がり）と--notch-v（縦方向の深さ）
   というCSS変数にしてあり、スクロール進度と連動してJS（philosophy-slider.js）
   側から書き換えられるようにしている。
   三角形の位置（ヒンジのX座標）は--notch-top-x（上の三角形。デフォルト70%＝
   右から30%）と--notch-bottom-x（下の三角形。デフォルト30%＝左から30%）で
   個別に指定できる。

   左右の辺にも同じく直角三角形の切れ込みを入れる（2026-08-22の指示）。
   上下の三角（横軸を動くもの）はそのままで、こちらは大きさが20%〜100%に
   育つ。直角は上、斜辺は外側の辺に向かって下がるので、100%まで育つと
   長方形が「上が狭く下が広い台形」になる（仕様の100%の図と同じ）。
   仕様の寸法は1920px幅・高さ1700pxの長方形に対して、
   100%で 横550px（=28.65%）・縦1700px（=長方形の高さそのもの）、
   20%で 横110px・縦340px。縦は長方形の高さの%で持たせているので、
   画面幅が変わって長方形の高さが変わっても比率が保たれる。
   拡大縮小の中心は長方形の上下中央（--side-vが小さいほど中央に寄る）。

   【2026-08-23】三角のオブジェクトはいったん使わないことになった
   （横も縦も無しで、グラデーションの変化だけ）。あとでどちらかを戻す可能性が
   あるため、形の指定とJS側の計算はそのまま残し、下の4つの変数を0にして
   長方形に潰している。戻すときはこの4行のうち戻したいほうを消すだけでよい
   （--notch-* が横軸＝上下の辺の三角、--side-* が縦軸＝左右の辺の三角）。
   ここで宣言した値は、JSが:rootへ書き込む値より優先される。 */
.p-philosophy::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	/* 三角を非表示にするための打ち消し（2026-08-23）。上のコメントを参照 */
	--notch-h: 0;
	--notch-v: 0;
	--side-h: 0;
	--side-v: 0;
	/* --philo-hue（120〜240の間だけを動く基準の色相）を中心に、
	   --philo-radius（度）だけ左右対称に開いた7段階のグラデーション。
	   JS側でradius = min(--philo-hue - 120, 240 - --philo-hue, 30) を計算しており、
	   hue±radiusが常に120〜240の範囲に収まることを保証しているため、
	   1920pxモニターなどでスクロール量が多くても緑⇔青の範囲を超えて
	   一周してしまうことがない（2026-08-04）。
	   明度はMOVEアイコンのホバー色（lime = hsl(120,100%,50%)）に合わせて50% */
	background: linear-gradient(
		180deg,
		hsl(calc(var(--philo-hue) - var(--philo-radius, 0)) 100% 50%) 0%,
		hsl(calc(var(--philo-hue) - var(--philo-radius, 0) * 0.667) 100% 50%) 16.67%,
		hsl(calc(var(--philo-hue) - var(--philo-radius, 0) * 0.333) 100% 50%) 33.33%,
		hsl(var(--philo-hue) 100% 50%) 50%,
		hsl(calc(var(--philo-hue) + var(--philo-radius, 0) * 0.333) 100% 50%) 66.67%,
		hsl(calc(var(--philo-hue) + var(--philo-radius, 0) * 0.667) 100% 50%) 83.33%,
		hsl(calc(var(--philo-hue) + var(--philo-radius, 0)) 100% 50%) 100%
	);
	clip-path: polygon(
		/* 上の辺（左上の角 → 上の三角 → 右上の角） */
		0% 0%,
		calc(var(--notch-top-x, 70) * 1% - var(--notch-h, 2) * 1%) 0%,
		calc(var(--notch-top-x, 70) * 1%) calc(var(--notch-v, 3) * 1%),
		calc(var(--notch-top-x, 70) * 1%) 0%,
		100% 0%,
		/* 右の辺の三角。上下中央から--side-vの半分ずつ開く */
		100% calc(50% - var(--side-v, 20) * 0.5%),
		calc(100% - var(--side-h, 5.73) * 1%) calc(50% - var(--side-v, 20) * 0.5%),
		100% calc(50% + var(--side-v, 20) * 0.5%),
		/* 下の辺（右下の角 → 下の三角 → 左下の角） */
		100% 100%,
		calc(var(--notch-bottom-x, 30) * 1% + var(--notch-h, 2) * 1%) 100%,
		calc(var(--notch-bottom-x, 30) * 1%) calc(100% - var(--notch-v, 3) * 1%),
		calc(var(--notch-bottom-x, 30) * 1%) 100%,
		0% 100%,
		/* 左の辺の三角（右の辺と左右対称） */
		0% calc(50% + var(--side-v, 20) * 0.5%),
		calc(var(--side-h, 5.73) * 1%) calc(50% - var(--side-v, 20) * 0.5%),
		0% calc(50% - var(--side-v, 20) * 0.5%)
	);
	transition: background 0.05s linear, clip-path 0.05s linear;
}

/* 文字組幅は仕様で1400px（72.92vw）＝Arkhe標準の.l-container（最大1200px）より広い。
   .p-philosophyは既に全幅なので、内側のl-containerの制限を外して
   幅の決定と中央寄せを各テキスト側のmax-width:72.92vw + margin:autoに任せる（2026-08-04） */
.p-philosophy .l-container {
	max-width: none;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}

.p-philosophy__main > .l-container {
	position: relative;
	z-index: 1;
}

/* 長方形エリアの丸印（スライダーの名残の装飾）は非表示に（2026-08-04） */
.p-philosophy__slider {
	display: none;
	position: absolute;
	left: 25%; /* 初期値。JS読み込み後はスクロール進度で動的に更新される */
	bottom: -0.75rem;
	z-index: 2;
	width: 1.5rem;
	height: 1.5rem;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--node-color-ink);
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.6);
	pointer-events: none;
	transform: translate(-50%, 50%);
}

/* 上部の丸印も同様に非表示（2026-08-04） */
.p-philosophy__dot.-top {
	display: none;
	position: absolute;
	left: 75%; /* 下の丸印（初期25%）と左右反対の初期位置 */
	top: -0.75rem;
	z-index: 2;
	width: 1.5rem;
	height: 1.5rem;
	pointer-events: none;
	transform: translate(-50%, -50%);
}

/* 文字サイズ・幅・余白はすべてvw（＝ビューポート幅基準）で指定したリキッドレイアウト。
   デザイン仕様の数値は縦横ともに1920px幅に対する比率で示されているため
   （例：文字組幅1400px=72.92%、上マージン190px=9.9%）、そのままvwに置き換えている。
   以前はJSで長方形の高さの%からmarginを算出していたが、仕様が幅基準だと分かったため
   JSをやめてCSSだけで完結させた（2026-08-04） */
.p-philosophy__lead-en,
.p-philosophy__lead-ja,
.p-philosophy__body-en,
.p-philosophy__body-ja {
	max-width: 72.92vw; /* 1400px */
	margin-left: auto;
	margin-right: auto;
	/* js/philosophy-slider.jsが、背景に追従する縦グラデーションを文字に
	   流し込む（background-clip:text）。長方形の高さぶんに引き伸ばして
	   段落ごとにずらして貼るので、繰り返されると色が合わなくなる。
	   下の色指定は、その仕組みが効かないブラウザ用の単色（2026-08-23） */
	background-repeat: no-repeat;
}

.p-philosophy__lead-en {
	margin-top: 0;
	margin-bottom: 5.21vw; /* 100px */
	color: var(--node-color-ink);
	font-size: 2.86vw; /* 55px：3行目が文字組幅1400pxをちょうど埋めるサイズ */
	font-weight: 500; /* 仕様どおりMediumで統一 */
	line-height: 1.366; /* 1行75px×3行＝225px（11.7%） */
}

.p-philosophy__lead-ja {
	margin-top: 0;
	margin-bottom: 0;
	color: var(--node-color-ink);
	font-size: 1.30vw; /* 25px：1行に収まる上限 */
	font-weight: 500;
	line-height: 1.2; /* 1行30px（1.56%） */
}

.p-philosophy__sub {
	position: relative;
	display: flow-root;
	padding-bottom: 10.42vw; /* 200px：長方形の下端までの余白 */
}

.p-philosophy__body-en {
	margin-top: 0;
	margin-bottom: 5.21vw; /* 100px */
	color: var(--node-color-accent-blue);
	font-size: 2.86vw; /* リード文（We see…）と同じサイズに統一 */
	font-weight: 500; /* 仕様どおりMediumで統一 */
	line-height: 1.353; /* 1行74.3px×7行＝520px（27%） */
	text-align: justify;
	/* 両端揃えのため、長い単語が丸ごと次行に送られると前の行の単語間が
	   極端に空いてしまう。デザインどおり communi-ties のように分割させる
	   （HTML側の lang="en" が必要。2026-08-04）。
	   Arkhe側から継承される overflow-wrap:break-word はハイフンなしで
	   単語を任意の位置で切ってしまい（crea|te のようになる）、
	   ハイフネーションより優先されるため normal に戻す */
	overflow-wrap: normal;
	word-wrap: normal;
	hyphens: auto;
	-webkit-hyphens: auto;
	/* 既定だと"create"まで crea-te と切ってしまうため、8文字以上の単語だけを、
	   前4文字・後4文字以上を残して分割する。createは対象外になり、
	   communitiesは communit-ies ではなく音節どおり communi-ties で分割される */
	hyphenate-limit-chars: 8 4 4;
}

.p-philosophy__body-ja {
	margin-top: 0;
	margin-bottom: 0;
	color: var(--node-color-ink-soft);
	font-size: 1.45vw; /* 27.8px：デザインと同じ4行に折り返すサイズ */
	font-weight: 500;
	line-height: 1.78; /* 1行49.5px×4行＝198px（10.31%） */
}

/* デザイン仕様はPC（1920px基準）のリキッド指定なので、そのままだと
   タブレット以下で和文が10px未満になり読めない。Arkheと同じ1000pxを境に
   可読性優先のサイズへ切り替える（2026-08-04） */
@media (max-width: 999px) {
	.p-philosophy__lead-en,
	.p-philosophy__lead-ja,
	.p-philosophy__body-en,
	.p-philosophy__body-ja {
		max-width: 86vw;
	}

	.p-philosophy__main {
		padding-top: 4rem;
		margin-bottom: 3rem;
	}

	.p-philosophy__lead-en {
		margin-bottom: 2rem;
		font-size: clamp(1.25rem, 3.6vw, 2rem);
		line-height: 1.5;
	}

	.p-philosophy__lead-ja {
		font-size: clamp(0.9rem, 1.9vw, 1.05rem);
		line-height: 1.8;
	}

	.p-philosophy__sub {
		padding-bottom: 4rem;
	}

	.p-philosophy__body-en {
		margin-bottom: 2rem;
		font-size: clamp(1.15rem, 3.3vw, 1.85rem);
		line-height: 1.55;
	}

	.p-philosophy__body-ja {
		font-size: clamp(0.9rem, 1.9vw, 1.05rem);
		line-height: 1.9;
	}
}


.c-btn {
	display: inline-block;
	padding: 0.85em 2.5em;
	border: 1px solid var(--node-color-ink);
	color: var(--node-color-ink);
	text-decoration: none;
	letter-spacing: 0.05em;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.c-btn:hover {
	background-color: var(--node-color-ink);
	color: #fff;
}

/* ==========================================================================
   ヘッダーのロゴ・文字色は常にダークで固定する。
   Arkhe標準の「オーバーレイヘッダー」機能はスクロール前を白ロゴ・白文字に
   切り替えるが（dist/css/module/-overlay-header.css）、このサイトでは
   ヘッダーの背後（動画の上の帯＝.p-heroVisual__bg）が白のため、
   白ロゴ・白アイコンだと最上部で見えなくなってしまう。
   背景の透明度だけは下のルールでスクロールに連動させ、色は固定する（2026-08-04）。
   SNSリンクやハンバーガーアイコンは--ark-color--header_txtに追従する実装なので、
   この変数の固定だけで全体が連動する */
.l-header {
	/* Arkhe側の[data-scrolled=false] .l-header[data-pcfix="1"]等、属性セレクタを
	   複数重ねた高詳細度のルールに勝つ必要があるため!importantで確実に上書きする */
	--ark-color--header_txt: var(--node-color-ink) !important;
}

/* ロゴ画像もオーバーレイ用の白版（-top）を常時隠し、ダーク版（-common）を常時表示する */
.l-header .c-headLogo__img.-top {
	opacity: 0 !important;
}

.l-header .c-headLogo__img.-common {
	opacity: 1 !important;
}

/* スクロール後（data-scrolled=true）に固定表示される段階のヘッダーは、
   スクロール中は背景を透過にし、止まってからも完全な白ではなく半透明
   （50%）に留める（メニューの視認性は保ちつつ透過感を残したいとの指示、
   2026-08-04）。js/header-scroll-fade.jsがdata-header-scrolling属性を
   付け外しする。文字色（--ark-color--header_txt）はスクロール後は常に
   ダークのままで、背景の透明度だけが切り替わる。ページ最上部
   （data-scrolled=false）は対象外 */
/* スクロール後の背景「色」は常に透明にし、白味は下の疑似要素の
   グラデーションだけで与える（色を残すとArkhe既定の不透明な白が効いてしまう） */
[data-scrolled="true"] .l-header {
	--ark-color--header_bg: transparent !important;
}

/* 停止時の白は上下でグラデーションさせる（上＝透過50%／下＝透過90%）。
   グラデーションはbackground-imageのためtransitionが効かず、切り替わりが
   急になってしまうので、疑似要素に敷いてopacityでフェードさせている。
   .l-headerはposition:fixed＋z-index:100で重ね合わせ文脈を作るので、
   z-index:-1にしてもヘッダーの外（本文側）に潜り込むことはない（2026-08-04） */
[data-scrolled="true"] .l-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.5) 0%,
		rgba(255, 255, 255, 0.1) 100%
	);
	opacity: 0;
	transition: opacity 0.25s;
	pointer-events: none;
}

[data-scrolled="true"]:not([data-header-scrolling="true"]) .l-header::before {
	opacity: 1;
}

/* ==========================================================================
   SNSリンク（ヘッダー下の帯、右寄せ）
   ========================================================================== */
/* デザインラフ準拠：SNSバーはロゴ・ナビ行の下に来る（Arkhe標準ではバーが先にDOM出力されるため順序を入替える） */
.l-header {
	display: flex;
	flex-direction: column;
}

/* 点線はヘッダーの下端ではなく、ナビ行（Works/Profile/News＋ハンバーガー）と
   SNS行（note/Instagram/YouTube＋SNSアイコン）の「間」に置く。
   仕様の幅は1800px（1920pxに対して93.75%）でヘッダー幅より狭いため、
   borderではなく疑似要素で描いて中央に置く（2026-08-04） */
.l-header__bar {
	order: 2;
	position: relative;
}

.l-header__bar::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 93.75vw; /* 1800px */
	border-top: 1px dashed #ddd;
	transform: translateX(-50%);
	pointer-events: none;
}

.l-header__body {
	order: 1;
}

.c-snsLinks {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding: 0.6rem 0;
	font-size: 1rem; /* デザイン仕様書のヘッダーメニューレイアウト（2026-08-03）: 16px */
	/* Works/Profile/News行との間隔。詰めすぎとの指摘を受けて再度少し広げた
	   （2026-08-03、-0.5rem→0.25rem） */
	margin-top: 0.25rem;
}

/* Arkhe標準の.c-gnav（Works/Profile/News）は`text-align:center`が.c-gnav__aまで
   継承され、js/sns-links-toggle.jsでmin-widthを広げた列（Instagram等に合わせた分）の
   中でテキストが中央寄せになってしまう。列の左端をnote/Instagram/Youtube側と揃えるには
   文字も左寄せにする必要があるため、このヘッダーのgnavに限定して左寄せに上書きする */
.l-header__right .c-gnav {
	text-align: left;
	/* 「各メニューの間（横のマージン）ももう少し」との指示で、項目間に余白を追加
	   （.c-snsLinks__menuのcolumn-gapと同じ値にして列位置がズレないようにする。
	   2026-08-03） */
	column-gap: 1rem;
}

/* デザイン仕様書どおり、Works/Profile/Newsのフォントサイズを18px固定にする
   （note/Instagram/Youtube側は.c-snsLinks__itemで16px固定。2026-08-03） */
.l-header__right .c-gnav__a {
	font-size: 18px;
	/* Arkhe標準は`justify-content:center`で文字が縦中央に来るため、
	   下端揃えのハンバーガー（.l-header__pcNavToggle）より上に見えてしまう。
	   文字を下端揃えにしてハンバーガーの位置に揃える（2026-08-03） */
	justify-content: flex-end;
	/* flex-endにしても内側padding分（Arkhe標準padding:16px 12px）だけ
	   ハンバーガーより上に残るため、もう少し下げる。テキスト下端を70pxに
	   揃えるための微調整（0.5rem=8px → 8.5px、2026-08-03） */
	transform: translateY(8.5px);
}

/* 初期状態はアイコンのみ表示。トグルボタン（.c-snsLinks__toggle）を押すとnote/Instagram/
   Youtubeが現れる。既存のPCナビ（.c-gnav、Works/Profile/News）とは別トグルで独立して
   開閉するが、列幅は.c-gnav__liの実測幅に同期させ（js/sns-links-toggle.js）、
   Worksとnote・Profileとinstagram・NewsとYoutubeの列位置を揃える
   （「メニューナビとSNSナビをcolで揃えて」との指示、2026-08-03） */
.c-snsLinks__menu {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, max-content));
	/* 列間の余白は.l-header__right .c-gnavと同じ値にする（列位置を揃えるため。
	   列幅自体はjs/sns-links-toggle.jsが.c-gnav__liの実測幅をそのまま
	   grid-template-columnsに反映するので、gapだけ揃えれば列位置が一致する。
	   「各メニューの間（横のマージン）ももう少し」との指示で0→1remに変更。2026-08-03） */
	column-gap: 1rem;
	max-width: 0;
	overflow: hidden;
	opacity: 0;
	white-space: nowrap;
	transition: max-width 0.4s ease, opacity 0.3s ease;
}

.c-snsLinks__menu.is-open {
	max-width: 560px;
	opacity: 1;
	/* Youtubeとアイコンの間の余白。.l-header__right.is-openのmargin-rightと
	   同じ値にすることで、ハンバーガー/SNSアイコンのx位置は引き続き揃う
	   （どちらもjustify-content:flex-endで右端に固定され、コンテンツ側だけが
	   左に縮むため。2026-08-03、0→1.25rem） */
	margin-right: 1.25rem;
}

/* デザイン仕様書のヘッダーメニューレイアウト（2026-08-03）: note/Instagram/Youtubeとも
   ブランドカラーではなく#4d4c46で統一。オーバーレイヘッダー時は自動で白、
   スクロール後は通常のヘッダー文字色に切り替わる（ハンバーガー等と同じ挙動）。
   font-size/weight/paddingも.c-gnav__a（Works/Profile/News）と同じ値に揃える
   （太字・大きめ・パディング無しのままだと、Instagram/Youtubeなど長い単語の見た目上の
   余白が無くなり隣と接触してしまうため。paddingの値は.c-gnav__aの実測値を直値で指定）。
   実際の列幅の同期（Works/Profile/Newsとnote/Instagram/Youtubeの左端を揃える）は
   js/sns-links-toggle.jsが両方の実測幅を比較し、大きい方に統一することで行う。
   フォントサイズは仕様書どおりnote/Instagram/Youtube側=16px固定
   （Works/Profile/News側は.c-gnav__aで18pxに指定。2026-08-03） */
.c-snsLinks__item {
	display: inline-block;
	box-sizing: border-box;
	padding: 1rem 0.75rem;
	text-decoration: none;
	letter-spacing: 0.02em;
	font-size: 16px;
	font-weight: 400;
	color: var(--ark-color--header_txt, var(--node-color-ink));
}

/* noteは少し大きく、Instagram/Youtubeは少し小さく（2026-08-03、基準16pxから±4px） */
.c-snsLinks__item.-note {
	display: inline-flex;
	align-items: center;
	font-size: 20px;
}

.c-snsLinks__item.-instagram,
.c-snsLinks__item.-youtube {
	font-size: 14px;
}

/* noteの公式ロゴ（note-logo.svg）。fillが固定色(black)のためmask-imageで形状だけを使い、
   background-color:currentColorで.c-snsLinks__item.-noteのcolor（ヘッダー明暗自動追従）に
   そのまま追従させる */
.c-snsLinks__itemLogo.-note {
	display: block;
	width: 3em;
	height: 1.1em;
	background-color: currentColor;
	-webkit-mask-image: url(img/note-logo.svg);
	mask-image: url(img/note-logo.svg);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.c-snsLinks__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	background: none;
	border: none;
	padding: 0;
	margin: 0;
}

/* 初期状態（未クリック）はsns-icon.svg（閉）、クリック後（aria-expanded=true）は
   sns-icon-open.svg（開）に切り替える。デザイナー支給SVGはfillが固定色のため、
   そのまま<img>で使うとハンバーガー（.c-iconBtn、header_txtに追従）と色が揃わない。
   mask-imageでSVG形状だけを使い、background-colorをheader_txt変数に追従させることで
   オーバーレイヘッダー時は白、通常時は黒に自動追従する見た目を維持する */
.c-snsLinks__icon {
	display: none;
	height: 1.5rem;
	width: 1.375rem;
	background-color: var(--ark-color--header_txt, var(--node-color-ink));
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.c-snsLinks__icon.-closed {
	display: block;
	-webkit-mask-image: url(img/sns-icon.svg);
	mask-image: url(img/sns-icon.svg);
}

.c-snsLinks__toggle[aria-expanded="true"] .c-snsLinks__icon.-closed {
	display: none;
}

.c-snsLinks__icon.-open {
	display: none;
	-webkit-mask-image: url(img/sns-icon-open.svg);
	mask-image: url(img/sns-icon-open.svg);
}

.c-snsLinks__toggle[aria-expanded="true"] .c-snsLinks__icon.-open {
	display: block;
}

/* モバイルのドロワーメニュー内のSNSリンク。ドロワーはArkhe標準で背景が黒（#000000eb）
   なので、`.c-snsLinks__item`の色（PCの明るいヘッダー前提）は流用せず専用の配色にする。
   「上のWorks/Profile/Newsと同じスタイルで」との指摘のため、Arkhe本体のドロワーナビ
   （`.c-drawerNav__a`/`.c-drawerNav .menu-item`）と同じCSS変数
   （`--ark-nav_fz`・`--ark-nav-padding--Y`・`--ark-menulist_border`）をそのまま使い、
   全幅の罫線・同じ余白でnote/Instagram/Youtubeを直下に続ける */
.c-drawerSns {
	display: flex;
	flex-direction: column;
}

.c-drawerSns__item {
	display: flex;
	align-items: center;
	text-decoration: none;
	letter-spacing: 0.02em;
	font-weight: 600;
	color: #fff;
	font-size: var(--ark-nav_fz, 1em);
	padding: var(--ark-nav-padding--Y, 0.75rem) var(--ark-nav-padding--R, 0.5rem) var(--ark-nav-padding--Y, 0.75rem)
		var(--ark-nav-padding--L, 0.5rem);
	border-bottom: var(--ark-menulist_border, solid 1px rgba(255, 255, 255, 0.15));
}

/* ドロワーは背景が常に黒なので、noteロゴもcurrentColor(白)追従でそのまま見える */
.c-drawerSns__itemLogo.-note {
	display: block;
	width: 3.5em;
	height: 1.3em;
	background-color: currentColor;
	-webkit-mask-image: url(img/note-logo.svg);
	mask-image: url(img/note-logo.svg);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* Awards詳細ページの「一覧へ戻る」ボタン。Works詳細ページのマークアップを
   流用していた名残でこのクラス名になっている（Works側は2026-08-07の
   デザイン変更でSVGのボタンに置き換わり、この指定は使わなくなった） */
.p-worksSingle__back {
	text-align: center;
	margin-bottom: 4rem;
}

/* ==========================================================================
   Works 詳細ページ
   デザイン仕様：背景を濃色（#5d5c56）にし、写真を高さ840pxにそろえて縦に積む。
   クレジット（設計者名など）は同じ背景色で作った文字だけの画像を写真と同じ枠に
   入れて表す仕様なので、ページ側では写真と区別していない。2026-08-07
   寸法はすべて1920px幅に対する比率＝vwで指定（サイト全体の方針）。
   ========================================================================== */
.single-works {
	background: var(--node-color-works_bg);
}

/* Arkheの本文コンテナ（最大1296px・左右48pxのパディング＋上下48pxのマージン）と、
   記事ページ用の本文幅（.l-articleの最大1200px）は、1720px幅の写真を並べる
   このページでは邪魔になるのでまとめて開放する */
.single-works .l-content__body.l-container,
.single-works .l-main,
.single-works .l-main__body {
	max-width: none;
	margin: 0;
	padding: 0;
}

/* 本文とフッターの間のパンくずは仕様に無い */
.single-works .p-breadcrumb {
	display: none;
}

/* ヘッダーの帯も濃色の地の上に乗せる。仕様の指示は「ロゴ、ヘッダーの色はそのままで」
   なので、ロゴと文字の色には手を付けず、白い背景だけを外す。
   スクロール停止時に出る白のグラデーションも、この地の上では浮くので止める */
.single-works .l-header {
	--ark-color--header_bg: transparent !important;
}

.single-works .l-header::before {
	content: none;
}

/* フッターも同じ地の上に乗せる。文字色はヘッダー同様そのまま（濃色）でよい */
.single-works .l-footer {
	--ark-color--footer_bg: transparent;
}

/* 上下の破線は、白地のページでは薄いグレー（#ddd）だが、この濃色の地の上では
   逆に浮いて目立ってしまう。仕様書でもここだけ濃い線で描かれているため合わせる */
.single-works .l-header__bar::before,
.single-works .l-footer__foot::before {
	border-top-color: var(--node-color-body-dark);
}

/* 濃色の上に置くので、丸印スクロールバーは明るい色に差し替える */
.single-works .c-circleScrollbar__track,
.single-works .c-circleScrollbar__thumb {
	--node-scrollbar_color: var(--node-color-works_scroll);
}

/* プロジェクト名。ヘッダーの破線から105px下、左は写真と同じ100px。
   ヘッダーの2段目（SNSの行、実測77px）がこの105pxの中に入るので差し引く */
.p-worksSingle__title {
	width: 89.58vw; /* 1720px：写真と左端をそろえる */
	margin: 0 auto;
	padding-top: max(0px, calc(5.47vw - 77px));
	color: #fff;
	font-size: 1.72vw; /* 33px */
	font-weight: 600;  /* 仕様のSemiBold相当 */
	line-height: 1;
	letter-spacing: 0.01em;
}

.p-worksSingle__titleJa,
.p-worksSingle__titleEn {
	display: block;
}

/* 英文は和文に対する従属なので、少しだけ落とす（一覧のキャプションと同じ扱い） */
.p-worksSingle__titleEn {
	margin-top: 0.31vw; /* 6px */
	font-size: 0.86em;
	opacity: 0.85;
}

/* 一覧へ戻る導線。仕様では「ヘッダーと同様に、カーソルの上下に合わせて常時表示」
   なので画面に固定する。上端はヘッダーの破線＋2段目のさらに下 */
.p-worksSingle__backLink {
	position: fixed;
	/* 上端はヘッダーの破線から145px下（プロジェクト名の下、1枚目の写真の手前）。
	   破線の実際の高さはjs/circle-scrollbar.jsが測って変数に入れている */
	top: calc(var(--node-scrollbar_top, 76px) + 7.55vw);
	/* 右端はヘッダーの右端（ハンバーガーやナビの1820px）からさらに20px内側。
	   仕様書ではボタンの右に20pxの空きが指定されている */
	right: 6.25vw; /* 120px = 100 + 20 */
	z-index: 400;
	display: block;
	width: 5.31vw; /* 102px（SVGのviewBoxが102×33なので幅だけ指定すればよい） */
	line-height: 0;
}

.p-worksSingle__backImg {
	display: block;
	width: 100%;
	height: auto;
	transition: opacity 0.3s ease;
}

.p-worksSingle__backImg.-hover {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}

.p-worksSingle__backLink:hover .p-worksSingle__backImg.-default,
.p-worksSingle__backLink:focus-visible .p-worksSingle__backImg.-default {
	opacity: 0;
}

.p-worksSingle__backLink:hover .p-worksSingle__backImg.-hover,
.p-worksSingle__backLink:focus-visible .p-worksSingle__backImg.-hover {
	opacity: 1;
}

/* 写真の積み。1枚目はプロジェクト名から60px下、以降は14px間隔 */
.p-worksPhotos {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.73vw; /* 14px */
	margin: 3.125vw 0 0; /* 60px */
	padding: 0;
	list-style: none;
}

/* 写真を出し切っていてview moreが無いときは、この積みが記事の最後になる。
   仕様の「最後の写真→120→view more(60)→125→フッターの破線」と同じだけ
   下に空けて、ボタンの有無でページの締まり方が変わらないようにする */
.p-worksPhotos:last-child {
	padding-bottom: 15.885vw; /* 305px */
}

/* 高さは常に840px。横長は幅1720pxいっぱいに使い、はみ出した上下を切る */
.p-worksPhotos__item {
	width: 89.58vw; /* 1720px */
	height: 43.75vw; /* 840px */
}

.p-worksPhotos__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 切らずに見せる写真（縦長、およびほぼ正方形のもの）は
   「縦幅を840pxのままで、センターに配置」（仕様）。
   実寸の比率のまま置きたいので、幅は内容にまかせる */
/* 枠より横に細長い写真（パノラマ）は幅1720pxに合わせ、高さは成り行き。
   高さ840pxに合わせると左右が大きく切れるため（2026-08-20） */
.p-worksPhotos__item.-wide {
	width: 89.58vw;
	height: auto;
}

.p-worksPhotos__item.-wide img {
	width: 100%;
	height: auto;
	object-fit: contain;
}

.p-worksPhotos__item.-contain {
	width: auto;
	max-width: 89.58vw;
}

.p-worksPhotos__item.-contain img {
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

/* 最後の写真から120px下、フッターの破線までは125px空ける */
.p-worksPhotos__moreWrap {
	display: flex;
	justify-content: center;
	margin-top: 6.25vw;
	padding-bottom: 6.51vw;
}

.p-worksPhotos__more {
	position: relative;
	display: block;
	width: 5.42vw; /* 104px */
	padding: 0;
	border: none;
	background: none;
	line-height: 0;
	cursor: pointer;
}

.p-worksPhotos__more:disabled {
	opacity: 0.5;
}

.p-worksPhotos__moreImg {
	display: block;
	width: 100%;
	height: auto;
	transition: opacity 0.3s ease;
}

.p-worksPhotos__moreImg.-hover {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}

.p-worksPhotos__more:hover .p-worksPhotos__moreImg.-default,
.p-worksPhotos__more:focus-visible .p-worksPhotos__moreImg.-default {
	opacity: 0;
}

.p-worksPhotos__more:hover .p-worksPhotos__moreImg.-hover,
.p-worksPhotos__more:focus-visible .p-worksPhotos__moreImg.-hover {
	opacity: 1;
}

/* 1000px未満は他セクションと同じく可読性優先へ切り替える */
@media (max-width: 1000px) {
	.p-worksSingle__title {
		width: auto;
		margin: 0 1.5rem;
		padding-top: 2rem;
		font-size: 1.25rem;
	}

	.p-worksPhotos {
		margin-top: 2rem;
		gap: 0.5rem;
	}

	.p-worksPhotos:last-child {
		padding-bottom: 4rem;
	}

	/* 幅の狭い画面で840px相当（＝横長に強く切り抜いた形）にすると写真が
	   帯のようになってしまうので、ここでは元の縦横比のまま見せる */
	.p-worksPhotos__item,
	.p-worksPhotos__item.-contain {
		width: calc(100% - 3rem);
		max-width: calc(100% - 3rem);
		height: auto;
	}

	.p-worksPhotos__item img,
	.p-worksPhotos__item.-contain img {
		width: 100%;
		height: auto;
		object-fit: contain;
	}

	.p-worksPhotos__moreWrap {
		margin-top: 3rem;
		padding-bottom: 3rem;
	}

	.p-worksPhotos__more {
		width: 104px;
	}
}
/* ==========================================================================
   Works 一覧ページ
   デザイン仕様：1段＝1件。写真は1720×700でそろえ、段間14px。
   冒頭は左に見出し＋説明文、右に最新プロジェクトの正方形画像1000×1000。
   寸法はすべて1920px幅に対する比率＝vwで指定（サイト全体の方針）。2026-08-06
   ========================================================================== */

/* Arkheの本文コンテナは最大1296px・左右48pxのパディング＋上下48pxのマージンだが、
   このページは1720px幅の写真を並べ、余白もデザイン仕様の値で決めたいので
   幅の制限と既定の余白をまとめて落とす */
.post-type-archive-works .l-content__body.l-container,
.post-type-archive-works .l-main__body {
	max-width: none;
	margin: 0;
	padding: 0;
}

/* Arkheは本文とフッターの間にパンくず（ホーム > Works）を出すが、
   デザイン仕様ではview moreの下はすぐフッターの破線になっているため隠す */
.post-type-archive-works .p-breadcrumb {
	display: none;
}

/* 冒頭ブロック。内容の幅・左右のマージンは下の写真（1720px）と同じにして、
   見出しと写真の左端、冒頭画像と写真の右端がそれぞれ縦に揃うようにする。
   上端はヘッダーの破線から105px下。ただしヘッダーの2段目（SNSの行）が
   この105pxの中に入るので、その高さ（アイコン基準の固定77px）を差し引く */
.p-worksArchive__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 2.6vw;
	width: 89.58vw; /* 1720px */
	margin: 0 auto;
	padding-top: max(0px, calc(5.47vw - 77px)); /* 破線から105px − 2段目77px */
}

.p-worksArchive__intro {
	min-width: 0;
}

.p-worksArchive__title {
	margin: 0;
	color: var(--node-color-heading);
	font-size: 1.72vw; /* 33px */
	font-weight: 600;  /* 仕様のSemiBold相当 */
	line-height: 1;
	letter-spacing: 0.01em;
}

/* 見出しのベースラインから本文まで60px。line-height:1の見出しの下に
   ディセンダぶんの余白が付かないので、そのまま60pxを足せばよい */
.p-worksArchive__description {
	margin: 3.125vw 0 0; /* 60px */
	color: var(--node-color-ink);
	font-size: 1.04vw;   /* 20px */
	font-weight: 500;
	line-height: 1.8;
}

/* 最新プロジェクトの1枚。1000×1000の正方形。
   デザイン仕様どおり、ここだけはホバー時も常にカラーのまま（ズームもしない） */
.p-worksArchive__introImage {
	flex: 0 0 52.08vw; /* 1000px */
	max-width: 52.08vw;
}

.p-worksArchive__introImage .p-worksArchive__link {
	aspect-ratio: 1;
}

.p-worksArchive__list {
	display: flex;
	flex-direction: column;
	gap: 0.73vw; /* 段間14px */
	width: 89.58vw; /* 1720px */
	margin: 0.73vw auto 0; /* 冒頭画像との間も14px */
	padding: 0;
	list-style: none;
}

.p-worksArchive__item {
	width: 100%;
}

.p-worksArchive__link {
	position: relative;
	display: block;
	color: inherit;
	text-decoration: none;
}

.p-worksArchive__link img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 各段は1720×700の横長。写真の縦横比はまちまちなのでobject-fitで切り抜く */
.p-worksArchive__item .p-worksArchive__link {
	height: 36.46vw; /* 700px */
}

/* 通常はモノクロ、ホバーでカラーへ。仕様によりズームはしない */
.p-worksArchive__item .p-worksArchive__link img {
	filter: grayscale(1);
	transition: filter 0.4s ease;
}

.p-worksArchive__item .p-worksArchive__link:hover img,
.p-worksArchive__item .p-worksArchive__link:focus-visible img {
	filter: grayscale(0);
}

/* プロジェクト名は写真の内側に白抜きで置く。各段は左下、
   冒頭の1枚だけはデザイン仕様どおり左上に出す。
   和文・英文を2行で重ねる（英語タイトル未入力の実績では和文だけになる。2026-08-07） */
.p-worksArchive__caption {
	position: absolute;
	left: 1.30vw; /* 25px */
	bottom: 1.30vw;
	color: #fff;
	font-size: 1.09vw; /* 21px：仕様の15pxから少し大きくした */
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: 0.02em;
	text-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);
}

.p-worksArchive__captionJa,
.p-worksArchive__captionEn {
	display: block;
}

/* 英文は和文に対する従属なので、少しだけ落として重なりを避ける */
.p-worksArchive__captionEn {
	font-size: 0.86em;
	opacity: 0.85;
}

.p-worksArchive__introImage .p-worksArchive__caption {
	top: 1.30vw;
	bottom: auto;
}

.p-worksArchive__empty {
	width: 89.58vw;
	margin: 5vw auto;
	color: var(--node-color-ink-soft);
}

/* 番号ページネーションの代わりの「view more」ボタン。クリックで次の10件を
   ページ遷移なしで追加読み込みする（js/works-load-more.js）。
   最後の写真から120px下、フッターの破線までは125px空ける */
.p-worksArchive__loadMoreWrap {
	display: flex;
	justify-content: center;
	margin-top: 6.25vw;      /* 最後の写真から120px */
	padding-bottom: 6.51vw;  /* フッターの破線まで125px */
}

/* Arkheは本文の最後の要素のmargin-bottomを!importantで打ち消すため、
   下の余白はpaddingで取っている（上のpadding-bottom） */

.p-worksArchive__loadMore {
	position: relative;
	display: block;
	width: 5.42vw; /* 104px（SVGのviewBoxが104×60なので幅だけ指定すればよい） */
	padding: 0;
	border: none;
	background: none;
	line-height: 0;
	cursor: pointer;
}

.p-worksArchive__loadMore:disabled {
	opacity: 0.5;
}

.p-worksArchive__loadMoreImg {
	display: block;
	width: 100%;
	height: auto;
	transition: opacity 0.3s ease;
}

.p-worksArchive__loadMoreImg.-hover {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}

.p-worksArchive__loadMore:hover .p-worksArchive__loadMoreImg.-default,
.p-worksArchive__loadMore:focus-visible .p-worksArchive__loadMoreImg.-default {
	opacity: 0;
}

.p-worksArchive__loadMore:hover .p-worksArchive__loadMoreImg.-hover,
.p-worksArchive__loadMore:focus-visible .p-worksArchive__loadMoreImg.-hover {
	opacity: 1;
}

/* 1000px未満は他セクションと同じく可読性優先へ切り替える。
   vwのままだと見出し17px・本文10pxまで縮んでしまうため */
@media (max-width: 1000px) {
	.p-worksArchive__header {
		display: block;
		width: auto;
		margin: 0 1.5rem;
		padding-top: 2rem;
	}

	.p-worksArchive__title {
		font-size: 1.5rem;
	}

	.p-worksArchive__description {
		margin-top: 1.5rem;
		font-size: 0.9rem;
	}

	.p-worksArchive__introImage {
		max-width: none;
		margin-top: 2rem;
	}

	.p-worksArchive__list {
		width: auto;
		margin: 1rem 1.5rem 0;
		gap: 0.5rem;
	}

	.p-worksArchive__item .p-worksArchive__link {
		height: auto;
		aspect-ratio: 1720 / 700;
	}

	.p-worksArchive__caption {
		left: 1rem;
		bottom: 1rem;
		font-size: 0.875rem;
	}

	.p-worksArchive__introImage .p-worksArchive__caption {
		top: 1rem;
	}

	.p-worksArchive__loadMoreWrap {
		margin-top: 3rem;
		padding-bottom: 3rem;
	}

	.p-worksArchive__loadMore {
		width: 104px;
	}
}
/* 三角オブジェクト＋罫線（Profileの前に置く区切り装飾。以前は三角がPhilosophy側、
   罫線がProfileのタイトル直下にあったが、Profileの前にまとめて移動した（2026-08-04）） */
/* 寸法はデザイン仕様どおり（1920px幅に対する比率＝vw）。SVG自体も
   仕様と同じviewBox（三角120×105、罫線1530×10）なので、幅だけ指定して
   高さはautoで比率を保たせる（2026-08-04） */
.p-profileDivider {
	padding-top: 12.03vw; /* 231px：上のWorksとの間隔 */
}

/* 回転はjs/profile-triangle-motion.jsがtransformで与える。
   軸は三角形の重心。外接矩形の中心（既定の50% 50%）で回すと、
   重心がそこより16px下にあるぶん回転中に横へ振れて見えてしまう。
   SVG（120×105）の3頂点は (60,4.24) (4.24,100.76) (115.76,100.76) で、
   重心は (60, 68.59)＝縦65.32%。SVG内にもその位置に点が描かれている（2026-08-13） */
.p-profileDivider__mark {
	display: block;
	width: 6.25vw; /* 120px */
	height: auto;
	margin: 0 auto 10.41vw; /* 三角と罫線の間200px */
	transform-origin: 50% 65.32%;
	will-change: transform;
}

.p-profileDivider__blueline {
	display: block;
	width: 79.69vw; /* 1530px：Profile本文（88.54vw）より内側に入る */
	height: auto;
	margin: 0 auto;
}

/* 仕様はPC（1920px基準）のリキッド指定なので、そのままだとタブレット以下で
   三角も黒丸も極端に小さくなる。Philosophyと同じ1000pxを境に最低サイズを確保する */
@media (max-width: 999px) {
	.p-profileDivider {
		padding-top: 5rem;
	}

	.p-profileDivider__mark {
		width: clamp(48px, 8vw, 120px);
		margin-bottom: 3.5rem;
	}

	.p-homeProfile {
		padding-top: 3.5rem;
	}

	.p-homeProfile__dot {
		width: clamp(40px, 6.5vw, 80px);
		margin-bottom: 2rem;
	}
}

/* ==========================================================================
   Profile セクション（トップページ下部に埋め込み。旧・独立ページの内容を流用）
   ========================================================================== */
.p-homeProfile {
	/* 上200px：罫線から黒丸までの間隔 / 下150px：STAFF行からAwardまでの間隔
	   （Awardセクション側のpadding-top 5remと合算されないよう、下は0にして
	   ここで持たせるのではなくAwards側を調整している） */
	padding: 10.41vw 0 0;
	scroll-margin-top: 2rem;
}

/* デザイン仕様の内容幅は1700px（1920pxに対して88.54%）で、Arkhe標準の
   .l-container（最大1200px）より広い。親（.l-main__body）の幅から
   はみ出して中央に置き直す（2026-08-04） */
.p-homeProfile > .l-container,
.p-profileDivider > .l-container {
	max-width: none;
	width: 88.54vw;
	margin-left: calc(50% - 44.27vw);
	padding-left: 0;
	padding-right: 0;
}

/* 見出しの上に置く黒丸。デザイン仕様で80px（1920px幅に対して約4.17%）、
   見出しより少し内側から始まる（2026-08-04） */
.p-homeProfile__dot {
	display: block;
	width: 4.17vw; /* 80px */
	aspect-ratio: 1;
	margin: 0 0 3.91vw 5.5%; /* 黒丸とProfileの間75px */
	border-radius: 50%;
	background: var(--node-color-heading);
}

.p-homeProfile__title {
	/* 上の余白は黒丸のmargin-bottom（75px）が担う。下は写真までの65px */
	margin: 0 0 3.385vw;
	/* 仕様の文字幅145pxになるサイズ（Aktではなく代替フォントのため実測から逆算） */
	font-size: 2.51vw;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: var(--node-color-heading);
}

/* ==========================================================================
   Awards セクション（トップページ下部・Profileの下に埋め込み。全件表示）
   一覧ページは2026-08-12のデザイン変更で別構成（.p-awardsHead / .p-awardsCards）になり、
   クラスの共用はしていない
   ========================================================================== */
.p-homeAwards {
	padding: 7.812vw 0 5rem; /* 上150px：ProfileのSTAFF行からAward見出しまで */
	scroll-margin-top: 2rem;
}

/* スマホは`.l-content__body.l-container`の左右15pxパディングの内側にあるため
   画面幅いっぱいにならない。hero動画・Worksと同じ手法で外に出す */
@media (max-width: 640px) {
	.p-homeAwards {
		width: calc(100% + 30px);
		margin-left: -15px;
	}
}

/* 内容幅・左寄せ・見出しサイズをProfileと揃える（2026-08-04） */
.p-homeAwards > .l-container {
	max-width: none;
	width: 88.54vw; /* 1700px */
	margin-left: calc(50% - 44.27vw);
	padding-left: 0;
	padding-right: 0;
}

.p-homeAwards__title {
	margin: 0 0 3.906vw; /* 見出しから一覧までの75px */
	/* 仕様の文字幅125pxになるサイズ（Aktではなく代替フォントのため実測から逆算） */
	font-size: 2.19vw;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: var(--node-color-heading);
}

/* 和文が左・英文が右。左右を等分すると英文がx=1030から始まってしまうので、
   和文の列幅を824.2pxにして、仕様どおり英文をx=1004から始める。
   STAFF行の2列目と同じ位置（(Top)pc_profole.pdf / 2026-08-15） */
.p-awardList {
	display: grid;
	grid-template-columns: 42.927vw 1fr;
	gap: 0;
	margin: 0;
}

/* 行ごとの区切り罫線は外した（2026-08-08）。年と内容だけが並ぶ見た目にする。
   1組目（日英2行）だけ打ち消していた指定も不要になったので併せて削除 */
.p-awardList__row {
	display: flex;
	margin: 0;
}

/* 各記事へのリンクを外して文字だけにした（2026-08-08）。
   見出しAwardより内側に寄せ、字を少し小さくして行間も詰めた */
.p-awardList__line {
	display: flex;
	gap: 0.9em; /* 年と内容の間13px */
	align-items: baseline;
	width: 100%;
	padding: 0.35rem 0;
	padding-left: var(--node-list_indent);
	color: var(--node-color-body-dark);
	font-size: 0.68vw; /* 13px */
	line-height: 1.5;
}

.p-awardList__row.-en .p-awardList__line {
	color: var(--node-color-accent-blue);
}

/* 年の枠は「2007-10」のような最長表記が1行に収まる幅にする。
   行ごとに年の桁数が違っても内容の開始位置は揃える必要があるので幅は固定。
   4.5em＋間隔0.9emで内容がx=250.7から始まり、仕様書((Top)pc_profole.pdf)の
   1行目（年180.5〜240.0／内容250.6）と一致する（2026-08-15） */
.p-awardList__year {
	flex: 0 0 4.5em;
	/* 「2007-2010」はハイフンでも折り返せてしまうので、折り返しを禁じる。
	   幅だけ広げても、枠の幅ぴったりだと改行位置が見つかって2行になっていた */
	white-space: nowrap;
	color: var(--node-color-ink-soft);
}

.p-awardList__row.-en .p-awardList__year {
	color: var(--node-color-accent-blue);
	opacity: 0.7;
}

.p-awardList__text {
	flex: 1;
}

.p-homeAwards__more {
	text-align: center;
	margin: 3rem 0 0;
}

.c-btn.-pill {
	border-radius: 999px;
	border-color: var(--node-color-accent-blue);
	color: var(--node-color-accent-blue);
}

.c-btn.-pill:hover {
	border-color: var(--node-color-bright);
	background-color: var(--node-color-bright);
	color: var(--node-color-ink);
}

/* デザイナー支給SVG版ピルボタン(青=通常/緑=ホバー、img/btn-*.svg)。
   .c-btn.-pillと同じ箇所で使うが、色の切り替えは画像のクロスフェードで行う */
.c-btnSvg.-pill {
	display: inline-block;
	position: relative;
}

.c-btnSvg__img {
	display: block;
	height: 2.6em;
	width: auto;
	transition: opacity 0.3s ease;
}

.c-btnSvg__img.-default {
	opacity: 1;
}

.c-btnSvg__img.-hover {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}

.c-btnSvg.-pill:hover .c-btnSvg__img.-default,
.c-btnSvg.-pill:focus-visible .c-btnSvg__img.-default {
	opacity: 0;
}

.c-btnSvg.-pill:hover .c-btnSvg__img.-hover,
.c-btnSvg.-pill:focus-visible .c-btnSvg__img.-hover {
	opacity: 1;
}

/* 幅に比例させたままだと画面が狭いほど字が小さくなり、375pxでは2.5px程度になる。
   1000px以下は比率での指定をやめ、仕様どおりの13pxで固定して読めるようにする
   （サイト全体の「1000px以下は可読性を優先する」方針に合わせた。2026-08-14） */
@media (max-width: 1000px) {
	.p-awardList__line {
		/* この幅ではArkheがルートを15pxにするので0.875rem＝約13px。
		   1920px幅の仕様（13px）と同じ大きさになる */
		font-size: 0.875rem;
	}
}

@media (max-width: 640px) {
	.p-awardList {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Contact / Location セクション（トップページ下部・Awardの下に埋め込み）
   ========================================================================== */
.p-homeContact {
	padding: 5rem 0;
	scroll-margin-top: 2rem;
}

.p-homeContact__title {
	text-align: center;
	margin-bottom: 2.5rem;
	color: var(--node-color-heading);
}

.p-officeBlock {
	max-width: 1200px;
	margin: 0 auto 4rem;
}

.p-officeBlock__info {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem 3rem;
	margin-bottom: 1.5rem;
}

.p-officeBlock__col.-en {
	color: var(--node-color-accent-blue);
}

.p-officeBlock__label {
	margin: 0 0 0.5rem;
	font-weight: 700;
	color: var(--node-color-body-dark);
}

.p-officeBlock__col.-en .p-officeBlock__label {
	color: var(--node-color-accent-blue);
}

.p-officeBlock__address,
.p-officeBlock__tel {
	margin: 0 0 0.5rem;
	font-size: var(--ark-fz--s, 0.85rem);
	color: var(--node-color-body-dark);
}

.p-officeBlock__col.-en .p-officeBlock__address,
.p-officeBlock__col.-en .p-officeBlock__tel {
	color: var(--node-color-accent-blue);
}

.p-officeBlock__map {
	position: relative;
	aspect-ratio: 16 / 7;
	overflow: hidden;
	background: #eee;
}

.p-officeBlock__map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	/* 通常はモノクロ、ホバーでカラーへ。Works・Awardsの写真と同じ扱い（2026-08-16） */
	filter: grayscale(1);
	transition: filter 0.4s ease;
}

.p-officeBlock__map:hover iframe,
.p-officeBlock__map:focus-within iframe {
	filter: grayscale(0);
}

.p-homeContact__mailLabel {
	text-align: center;
	margin: 0 0 1rem;
	color: var(--node-color-accent-blue);
}

.p-homeContact__mail {
	text-align: center;
	margin: 0;
}

@media (max-width: 640px) {
	.p-officeBlock__info {
		grid-template-columns: 1fr;
		gap: 0.25rem 0;
	}

	.p-officeBlock__col.-en {
		margin-bottom: 1rem;
	}
}

.p-profile__intro {
	max-width: 720px;
	margin: 0 auto 3rem;
	padding: 0 1.5rem;
}

/* --------------------------------------------------------------------------
   代表者ブロック（Profile と History の2段）
   デザイン仕様 (Top)pc_profole.pdf（2026-08-15）。
   位置はすべて1920px幅に対する比率＝vwで、仕様の数値をそのまま換算している。
   仕様は左端100px・右端1820pxのガイドを基準に書かれているが、
   このセクションの箱（.l-container）は1700px幅＝左端110pxなので、
   ここでの数値は「仕様のx座標 − 110」を1920で割ったもの。

   Profile … 写真250px ｜ 60px ｜ 和文カラム ｜ 英文カラム
             和文はx=450、英文はx=1140から始まる
   History … 年表(和) ｜ ＜所属＞ ｜ 年表(英)
             年x=180 / 内容x=271 / ＜所属＞x=513 / 団体x=586 / 年(英)x=1136 / 内容(英)x=1227
   -------------------------------------------------------------------------- */
.p-staffLead {
	display: grid;
	/* 写真250px、写真から和文までの間隔60px */
	grid-template-columns: 13.021vw 1fr;
	column-gap: 3.125vw;
	/* 見出しと同じく、箱の左端から30px内側に置く（仕様のx=140） */
	margin-left: 1.5625vw;
	align-items: start;
	color: var(--node-color-body-dark);
}

.p-staffLead__photo img {
	display: block;
	width: 100%;
	height: auto;
}

/* 写真の右の和文｜英文。和文はx=450から690px、英文はx=1140から右端1810まで。
   写真は中身より背が高いので、写真とはグリッドを分けている（2026-08-04） */
.p-staffLead__detail {
	display: grid;
	grid-template-columns: 35.938vw 34.896vw;
	/* 写真の上端から肩書きの上端までの23px */
	padding-top: 1.198vw;
	align-items: start;
	font-size: 0.625vw; /* 12px */
	line-height: 2; /* 行送り24px */
}

/* 肩書きは1行目、名前は2行目。和文が左（1列目）、英文が右（2列目） */
.p-staffLead__role {
	grid-column: 1;
	grid-row: 1;
	margin: 0;
	font-size: 0.625vw; /* 12px */
	line-height: 1;
}

.p-staffLead__name {
	grid-column: 1;
	grid-row: 2;
	/* 肩書きの下端から名前の上端までの12px */
	margin: 0.625vw 0 0;
	font-size: 0.99vw; /* 19px */
	line-height: 1;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--node-color-heading);
}

.p-staffLead__role.-en,
.p-staffLead__name.-en {
	grid-column: 2;
	color: var(--node-color-accent-blue);
}

.p-staffLead__name.-en {
	text-transform: uppercase;
}

/* 紹介文。名前の下端から30px下に置き、1行が1段落 */
.p-staffLead__text {
	grid-column: 1;
	grid-row: 3;
	margin-top: 1.5625vw;
}

.p-staffLead__text.-en {
	grid-column: 2;
	color: var(--node-color-accent-blue);
}

.p-staffLead__text p {
	margin: 0;
}

/* --------------------------------------------------------------------------
   History（年表）
   -------------------------------------------------------------------------- */
/* Profileの写真の下端から90px下に1700pxの罫線を引き、その90px下に見出しを置く。
   罫線は見出しのborder-topで引く（箱の幅がそのまま1700pxなので全幅でよい） */
.p-homeProfile__title.-history {
	margin-top: 4.688vw;
	padding-top: 4.688vw;
	border-top: 1px solid var(--node-color-body-dark);
	/* 仕様の文字幅160pxになるサイズ（Aktではなく代替フォントのため実測から逆算） */
	font-size: 2.488vw;
}

/* 年表(和) 333px ｜ ＜所属＞ 623px ｜ 年表(英) 674px。
   左端は箱から70px内側（仕様のx=180） */
.p-history {
	display: grid;
	grid-template-columns: 17.344vw 32.448vw 35.104vw;
	margin-left: 3.646vw;
	font-size: 0.625vw; /* 12px */
	line-height: 2; /* 行送り24px */
	color: var(--node-color-body-dark);
}

.p-history__col.-en {
	color: var(--node-color-accent-blue);
}

.p-history__list {
	margin: 0;
}

/* グループ（入力の空行区切り）どうしは1行ぶん空ける */
.p-history__list + .p-history__list {
	margin-top: 1.25vw;
}

/* 年の列は「2012-2014」がちょうど収まる91px。内容の開始位置を行ごとに揃える */
.p-history__row {
	display: grid;
	grid-template-columns: 4.74vw 1fr;
}

/* ＜所属＞の列は見出し73px＋団体名。年表と同じ組み方にして行送りをそろえる */
.p-history__col.-affiliations {
	display: grid;
	grid-template-columns: 3.802vw 1fr;
}

.p-history__affiliationsTitle,
.p-history__affiliationsList {
	margin: 0;
}

.p-history__affiliationsList {
	list-style: none;
	padding: 0;
}

.p-history__year,
.p-history__desc {
	margin: 0;
	font-weight: 400;
}

/* 続きの行（行頭スペースで入力された2行目以降）はブロックで積む */
.p-history__desc span {
	display: block;
}

/* 年のない行は年の列を作らず、1行を横幅いっぱいに流す */
.p-history__row.-noYear {
	grid-template-columns: 1fr;
}

.p-history__row.-noYear .p-history__year {
	display: none;
}

/* --------------------------------------------------------------------------
   代表以外（パートナー / スペシャルパートナー）の横並び
   -------------------------------------------------------------------------- */
/* STAFFが左半分、SPECIAL PARTNERが右半分を分け合う配置（均等割ではない）。
   1人目（STAFF）だけ幅50%を占め、残りが右半分を等分するので、
   スペシャルパートナーの人数が増減しても破綻しない（2026-08-04） */
/* 罫線は全幅のまま、中身だけ内側に寄せたいので、
   インデントはpadding-leftではなく1人目の左マージンで付ける（2026-08-08） */
.p-staffList {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	list-style: none;
	margin: 4.688vw 0 0; /* 年表から罫線までの90px */
	padding: 4.688vw 0 0; /* 罫線からSTAFFまでの90px */
	border-top: 1px solid var(--node-color-body-dark);
	color: var(--node-color-body-dark);
}

.p-staffList__item:first-child {
	margin-left: var(--node-list_indent);
}

/* 仕様の列位置は 1人目x=180.5 / 2人目x=1004 / 3人目x=1364。
   等分にすると2人目以降がずれるので、1人目に824.2px、以降は360pxずつ与えている。
   人数が増えたぶんは折り返す（はみ出させない）*/
.p-staffList__item {
	flex: 0 0 18.75vw; /* 360px */
	min-width: 0;
}

.p-staffList__item:first-child {
	flex: 0 0 42.927vw; /* 824.2px */
}

.p-staffList__role {
	margin: 0 0 0.9rem;
	font-size: 0.75rem;
	letter-spacing: 0.04em;
}

.p-staffList__name {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 500;
	letter-spacing: 0.02em;
}

.p-staffList__name.-en {
	margin-top: 0.9rem;
	font-size: 1rem;
	text-transform: uppercase;
}

/* 1000px以下は幅に比例させると字が小さくなりすぎるので、
   比率での指定をやめて読める大きさに切り替える。
   横3カラムのままでは1カラムが狭すぎるため、和文と英文は縦に積む */
@media (max-width: 1000px) {
	.p-staffLead {
		grid-template-columns: 200px 1fr;
		column-gap: 2rem;
		margin-left: 0;
	}

	.p-staffLead__detail {
		grid-template-columns: 1fr;
		padding-top: 0;
		font-size: 0.875rem;
		line-height: 1.9;
	}

	/* 1カラムに畳むので、和文・英文の行と列の対応は解除して素直に縦へ積む。
	   英文側は`.-en`付きでも指定する。クラス1つの指定のままだと、
	   横並び用の`.p-staffLead__role.-en`（クラス2つ＝詳細度が高い）に負けて
	   英文の肩書きと名前だけ2列目に残ってしまう */
	.p-staffLead__role,
	.p-staffLead__role.-en,
	.p-staffLead__name,
	.p-staffLead__name.-en,
	.p-staffLead__text,
	.p-staffLead__text.-en {
		grid-column: 1;
		grid-row: auto;
	}

	.p-staffLead__role,
	.p-staffLead__role.-en {
		font-size: 0.875rem;
	}

	.p-staffLead__name,
	.p-staffLead__name.-en {
		margin-top: 0.4rem;
		font-size: 1.25rem;
	}

	.p-staffLead__text {
		margin-top: 1rem;
	}

	/* 縦積みでは英語の肩書きが和文の紹介文の下に来るので、1組ぶん余白をあける */
	.p-staffLead__role.-en {
		margin-top: 1.9rem;
	}

	/* Historyも横3カラムでは収まらないので縦に積む */
	.p-history {
		grid-template-columns: 1fr;
		row-gap: 1.5rem;
		margin-left: 0;
		font-size: 0.875rem;
		line-height: 1.9;
	}

	.p-homeProfile__title.-history {
		margin-top: 3rem;
		padding-top: 3rem;
		font-size: clamp(1.5rem, 4.2vw, 3rem);
	}

	.p-history__row,
	.p-history__col.-affiliations {
		grid-template-columns: 6em 1fr;
	}
}

@media (max-width: 640px) {
	.p-staffLead {
		grid-template-columns: 1fr;
	}

	.p-staffLead__photo {
		max-width: 240px;
	}

	.p-staffLead__detail {
		margin-top: 1.5rem;
	}

	.p-history__row,
	.p-history__col.-affiliations {
		grid-template-columns: 5em 1fr;
	}

	/* 狭い画面では左右2列に折り返す（STAFFの50%指定も解除する） */
	.p-staffList {
		flex-wrap: wrap;
	}

	.p-staffList__item,
	.p-staffList__item:first-child {
		flex: 0 0 calc(50% - 1rem);
	}
}

/* ==========================================================================
   Awards / News 一覧ページ
   デザイン仕様（2026-08-12）：上部は左に見出し＋受賞一覧、右に最新記事の大きな写真。
   その下はカード（写真720×435）を2列で並べ、途中にNews/Mediaの帯を挟む。
   本文はNoto Serif JP。寸法はすべて1920px幅に対する比率＝vwで指定。
   ========================================================================== */

/* Arkheの本文コンテナ（最大1296px・左右48pxのパディング＋上下48pxのマージン）は
   全幅を使うこのページでは邪魔になるので開放する */
.post-type-archive-awards .l-content__body.l-container,
.post-type-archive-awards .l-main,
.post-type-archive-awards .l-main__body {
	max-width: none;
	margin: 0;
	padding: 0;
}

.post-type-archive-awards .p-breadcrumb {
	display: none;
}

/* --- 上部：左の一覧＋右の大きな写真 --- */
.p-awardsHead {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	width: 89.58vw; /* 1720px */
	margin: 0 auto;
	/* ヘッダーの破線から105px。2段目（SNSの行、実測77px）がこの中に入るので差し引く */
	padding-top: max(0px, calc(5.47vw - 77px));
}

.p-awardsHead__left {
	flex: 0 0 40.89vw; /* 785px：見出し下の罫線と同じ幅 */
	max-width: 40.89vw;
}

/* 見出しと「Award / JP」は同じ行の両端。下の罫線は左ブロックの幅いっぱい */
.p-awardsHead__titleRow {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	padding-bottom: 0.26vw; /* 5px */
	border-bottom: 1px solid #000;
}

.p-awardsHead__title {
	margin: 0;
	color: var(--node-color-heading);
	font-size: 1.72vw; /* 33px */
	font-weight: 600;  /* 仕様のSemiBold相当 */
	line-height: 1;
	letter-spacing: 0.01em;
}

.p-awardsHead__lang {
	position: relative;
	display: block;
	width: 8.59vw; /* 165px（SVGのviewBoxが165×33なので幅だけ指定すればよい） */
	padding: 0;
	border: none;
	background: none;
	line-height: 0;
	cursor: pointer;
}

.p-awardsHead__langImg {
	display: block;
	width: 100%;
	height: auto;
	transition: opacity 0.3s ease;
}

.p-awardsHead__langImg.-hover {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}

.p-awardsHead__lang:hover .p-awardsHead__langImg.-default,
.p-awardsHead__lang:focus-visible .p-awardsHead__langImg.-default {
	opacity: 0;
}

.p-awardsHead__lang:hover .p-awardsHead__langImg.-hover,
.p-awardsHead__lang:focus-visible .p-awardsHead__langImg.-hover {
	opacity: 1;
}

.p-awardsHead__list {
	margin: 2.08vw 0 0; /* 40px */
	padding: 0;
	list-style: none;
	color: var(--node-color-accent-blue);
}

.p-awardsHead__row {
	display: flex;
	gap: 0.9em;
	align-items: baseline;
	padding: 0.26vw 0; /* 5px */
	font-size: 0.68vw; /* 13px */
	line-height: 1.5;
}

.p-awardsHead__year {
	flex: 0 0 3.4em;
}

.p-awardsHead__name {
	flex: 1;
}

/* 日英どちらの表記も出力しておき、切り替えは表示の出し分けで行う
   （js/awards-lang-toggle.jsがbodyにis-awardsJaを付ける） */
.p-awardsHead__name.-ja {
	display: none;
}

body.is-awardsJa .p-awardsHead__name.-en {
	display: none;
}

body.is-awardsJa .p-awardsHead__name.-ja {
	display: block;
}

/* 右の大きな写真。1枚目が790×915、2枚目があれば下に帯として続く */
.p-awardsHead__feature {
	flex: 0 0 41.15vw; /* 790px */
	max-width: 41.15vw;
}

.p-awardsHead__featureLink {
	display: block;
	color: inherit;
	text-decoration: none;
}

.p-awardsHead__featureImage {
	display: block;
	overflow: hidden;
}

.p-awardsHead__featureImage img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 1枚目は大きく、2枚目は下に添える帯 */
.p-awardsHead__featureImage:first-child {
	height: 33.07vw; /* 635px */
}

.p-awardsHead__featureImage + .p-awardsHead__featureImage {
	height: 14.58vw; /* 280px */
	margin-top: 0.05vw;
}

/* 見出しはセリフ体・中央。仕様のNoto Serif JPを使う */
.p-awardsHead__featureTitle {
	margin: 2.34vw 0 0; /* 45px */
	color: var(--node-color-heading);
	font-family: "Noto Serif JP", serif;
	font-size: 1.82vw; /* 35px */
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
}

/* 説明文は左揃え。見出しは中央のまま（2026-08-22の指示）。
   下のカードの説明文・左の受賞一覧も左揃えで、そちらとそろう */
.p-awardsHead__featureText {
	margin: 1.04vw 0 0; /* 20px */
	color: var(--node-color-body-dark);
	font-family: "Noto Serif JP", serif;
	font-size: 0.83vw; /* 16px */
	font-weight: 400;
	line-height: 1.6;
	text-align: left;
}

/* --- News/Media の帯（支給SVG 1720×80） --- */
.p-awardsBand {
	width: 89.58vw; /* 1720px */
	margin: 7.81vw auto 5.21vw; /* 上150px・下100px */
	line-height: 0;
}

/* 帯はPC用（1720×80）とモバイル用（350×20）の2枚を出し分ける。
   既定ではモバイル用を隠す（2026-08-18） */
.p-awardsBand__img.-mobile {
	display: none;
}

.p-awardsBand img {
	display: block;
	width: 100%;
	height: auto;
}

/* --- カードの2列グリッド --- */
/* 120 | 720 | 120 |1| 120 | 720 | 120 = 1920。列の間の1pxは境目に引く */
.p-awardsCards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 12.5vw; /* 240px：120＋120 */
	row-gap: 8.85vw;    /* 170px */
	/* 120＋720＋120｜120＋720＋120＝1920。両端の120を除いた1680がこの幅で、
	   間の240を引いた残りが720の2列になる */
	width: 87.5vw;      /* 1680px */
	margin: 6.25vw auto 0;
	padding: 0;
	list-style: none;
}

/* 列の間の縦罫線。カードごとに引くと行間で切れてしまうので、
   グリッド全体の中央に1本だけ重ねる */
.p-awardsCards {
	position: relative;
}

.p-awardsCards::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 8.85vw; /* 最後の行の下には伸ばさない */
	left: 50%;
	width: 1px;
	background: #000;
	pointer-events: none;
}

.p-awardsCards__item {
	min-width: 0;
}

.p-awardsCards__thumb {
	display: block;
	height: 22.66vw; /* 435px */
	overflow: hidden;
	background: #eee;
}

/* 縦型は高さ435pxのまま実寸の比率で中央に置く（切らない）。
   2枚続くときは横に並べる。枠の背景（#eee）は左右に出てしまうので外す（2026-08-21） */
.p-awardsCards__thumb.-portrait,
.p-awardsCards__thumb.-portraitPair {
	display: flex;
	justify-content: center;
	gap: 0.73vw; /* 14px：子ページの写真と同じ間隔 */
	background: none;
}

.p-awardsCards__thumb.-portrait img,
.p-awardsCards__thumb.-portraitPair img {
	width: auto;
	max-width: 100%;
	height: 100%;
	object-fit: contain;
}

.p-awardsCards__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1);
	transition: filter 0.4s ease;
}

/* トップページ・Works同様、ホバーでカラーに戻す。ズームはしない */
.p-awardsCards__thumb:hover img,
.p-awardsCards__thumb:focus-visible img {
	filter: grayscale(0);
}

.p-awardsCards__title {
	margin: 1.82vw 0 0; /* 35px */
	color: var(--node-color-body-dark);
	font-family: "Noto Serif JP", serif;
	font-size: 1.09vw; /* 21px */
	font-weight: 800;
	line-height: 1.3;
}

.p-awardsCards__text {
	margin: 0.83vw 0 0; /* 16px */
	color: var(--node-color-body-dark);
	font-family: "Noto Serif JP", serif;
	font-size: 0.73vw; /* 14px */
	font-weight: 400;
	line-height: 1.6;
}

/* read moreは右端に寄せる */
.p-awardsCards__more {
	margin: 0.83vw 0 0;
	text-align: right;
	line-height: 0;
}

.p-awardsCards__moreLink {
	position: relative;
	display: inline-block;
	width: 5.73vw; /* 110px（SVGのviewBoxが110×28） */
	vertical-align: top;
}

.p-awardsCards__moreImg {
	display: block;
	width: 100%;
	height: auto;
	transition: opacity 0.3s ease;
}

.p-awardsCards__moreImg.-hover {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}

.p-awardsCards__moreLink:hover .p-awardsCards__moreImg.-default,
.p-awardsCards__moreLink:focus-visible .p-awardsCards__moreImg.-default {
	opacity: 0;
}

.p-awardsCards__moreLink:hover .p-awardsCards__moreImg.-hover,
.p-awardsCards__moreLink:focus-visible .p-awardsCards__moreImg.-hover {
	opacity: 1;
}

/* --- view more --- */
.p-awardsCards__moreWrap {
	display: flex;
	justify-content: center;
	margin-top: 6.25vw; /* 120px */
}

.p-awardsCards__viewMore {
	position: relative;
	display: block;
	width: 5.42vw; /* 104px */
	padding: 0;
	border: none;
	background: none;
	line-height: 0;
	cursor: pointer;
}

.p-awardsCards__viewMore:disabled {
	opacity: 0.5;
}

.p-awardsCards__viewMoreImg {
	display: block;
	width: 100%;
	height: auto;
	transition: opacity 0.3s ease;
}

.p-awardsCards__viewMoreImg.-hover {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}

.p-awardsCards__viewMore:hover .p-awardsCards__viewMoreImg.-default,
.p-awardsCards__viewMore:focus-visible .p-awardsCards__viewMoreImg.-default {
	opacity: 0;
}

.p-awardsCards__viewMore:hover .p-awardsCards__viewMoreImg.-hover,
.p-awardsCards__viewMore:focus-visible .p-awardsCards__viewMoreImg.-hover {
	opacity: 1;
}

/* 最後のview moreとフッターの破線の間（Works一覧と同じ125px） */
.p-awardsCards__moreWrap:last-child,
.p-awardsCards:last-child {
	padding-bottom: 6.51vw;
}

/* 1000px未満は他セクションと同じく可読性優先へ切り替える */
@media (max-width: 1000px) {
	.p-awardsHead {
		display: block;
		width: auto;
		margin: 0 1.5rem;
		padding-top: 2rem;
	}

	.p-awardsHead__left,
	.p-awardsHead__feature {
		flex-basis: auto;
		max-width: none;
	}

	.p-awardsHead__title {
		font-size: 1.5rem;
	}

	.p-awardsHead__lang {
		width: 165px;
	}

	.p-awardsHead__row {
		font-size: 0.8rem;
	}

	.p-awardsHead__feature {
		margin-top: 2rem;
	}

	.p-awardsHead__featureImage:first-child,
	.p-awardsHead__featureImage + .p-awardsHead__featureImage {
		height: auto;
	}

	.p-awardsHead__featureImage img {
		height: auto;
	}

	.p-awardsHead__featureTitle {
		font-size: 1.25rem;
	}

	.p-awardsHead__featureText {
		font-size: 0.9rem;
	}

	.p-awardsBand {
		width: auto;
		margin: 3rem 1.5rem 2rem;
	}

	.p-awardsCards {
		grid-template-columns: 1fr;
		column-gap: 0;
		row-gap: 3rem;
		width: auto;
		margin: 3rem 1.5rem 0;
	}

	.p-awardsCards::before {
		display: none;
	}

	.p-awardsCards__thumb {
		height: auto;
		aspect-ratio: 720 / 435;
	}

	.p-awardsCards__title {
		margin-top: 1rem;
		font-size: 1.05rem;
	}

	.p-awardsCards__text {
		font-size: 0.85rem;
	}

	.p-awardsCards__moreLink {
		width: 110px;
	}

	.p-awardsCards__moreWrap {
		margin-top: 3rem;
	}

	.p-awardsCards__viewMore {
		width: 104px;
	}

	.p-awardsCards__moreWrap:last-child,
	.p-awardsCards:last-child {
		padding-bottom: 3rem;
	}
}

/* ==========================================================================
   Awards / News 詳細ページ
   デザイン仕様（2026-08-13）：地の色を黄色（#ecff00）にし、写真を幅1320px・
   高さ825pxにそろえて縦に積み、最後に本文を置く構成。
   骨格はWorks詳細ページと同じで、色と写真の寸法だけが違う。
   寸法はすべて1920px幅に対する比率＝vwで指定。
   ========================================================================== */
.single-awards {
	background: var(--node-color-awards_bg);
}

/* Arkheの本文コンテナと記事ページ用の本文幅（最大1200px）は、
   1320px幅の写真を並べるこのページでは邪魔になるのでまとめて開放する */
.single-awards .l-content__body.l-container,
.single-awards .l-main,
.single-awards .l-main__body {
	max-width: none;
	margin: 0;
	padding: 0;
}

.single-awards .p-breadcrumb {
	display: none;
}

/* ヘッダー・フッターの帯も同じ地の上に乗せる。
   仕様の指示は「ロゴ、ヘッダーの色はそのままで」なので色には手を付けない */
.single-awards .l-header {
	--ark-color--header_bg: transparent !important;
}

.single-awards .l-header::before {
	content: none;
}

.single-awards .l-footer {
	--ark-color--footer_bg: transparent;
}

/* 破線は白地では薄いグレーだが、この地の上では浮くので濃い線にそろえる */
.single-awards .l-header__bar::before,
.single-awards .l-footer__foot::before {
	border-top-color: var(--node-color-body-dark);
}

/* 黄色の上でも見えるように濃い色にする */
.single-awards .c-circleScrollbar__track,
.single-awards .c-circleScrollbar__thumb {
	--node-scrollbar_color: var(--node-color-awards_scroll);
}

/* タイトル。ヘッダーの破線から105px下、左は写真の外側の100px。
   ヘッダーの2段目（SNSの行、実測77px）がこの105pxの中に入るので差し引く */
.p-awardsSingle__title {
	width: 89.58vw; /* 1720px */
	margin: 0 auto;
	padding-top: max(0px, calc(5.47vw - 77px));
	color: var(--node-color-heading);
	font-size: 1.72vw; /* 33px */
	font-weight: 600;  /* 仕様のSemiBold相当 */
	line-height: 1;
	letter-spacing: 0.01em;
}

/* 一覧へ戻る導線。Works詳細ページと同じ位置・同じ振る舞い */
.p-awardsSingle__backLink {
	position: fixed;
	top: calc(var(--node-scrollbar_top, 76px) + 7.55vw);
	right: 6.25vw; /* 120px = 100 + 20 */
	z-index: 400;
	display: block;
	width: 5.31vw; /* 102px（SVGのviewBoxが102×33） */
	line-height: 0;
}

.p-awardsSingle__backImg {
	display: block;
	width: 100%;
	height: auto;
	transition: opacity 0.3s ease;
}

.p-awardsSingle__backImg.-hover {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}

.p-awardsSingle__backLink:hover .p-awardsSingle__backImg.-default,
.p-awardsSingle__backLink:focus-visible .p-awardsSingle__backImg.-default {
	opacity: 0;
}

.p-awardsSingle__backLink:hover .p-awardsSingle__backImg.-hover,
.p-awardsSingle__backLink:focus-visible .p-awardsSingle__backImg.-hover {
	opacity: 1;
}

/* 写真の積み。1枚目はタイトルから60px下、以降は14px間隔 */
.p-awardsPhotos {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.73vw; /* 14px */
	margin: 3.125vw 0 0; /* 60px */
	padding: 0;
	list-style: none;
}

/* 横長は幅1320px・高さ825pxにそろえ、はみ出した上下を切る */
.p-awardsPhotos__item {
	width: 68.75vw;  /* 1320px */
	height: 42.97vw; /* 825px */
}

.p-awardsPhotos__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 枠より横に細長い写真（パノラマ）は幅1320pxに合わせ、高さは成り行き。
   高さ825pxに合わせると左右が大きく切れるため（2026-08-20） */
.p-awardsPhotos__item.-wide {
	width: 68.75vw;
	height: auto;
}

.p-awardsPhotos__item.-wide img {
	width: 100%;
	height: auto;
	object-fit: contain;
}

/* 縦長（およびほぼ正方形）は「横幅を825pxでセンターに配置」（仕様）。
   幅だけを決めて高さは実寸の比率にまかせる＝切らない */
.p-awardsPhotos__item.-contain {
	width: 42.97vw; /* 825px */
	height: auto;
}

.p-awardsPhotos__item.-contain img {
	height: auto;
	object-fit: contain;
}

/* 本文。写真と同じ列にそろえる */
.p-awardsSingle__body {
	width: 68.75vw; /* 1320px */
	margin: 1.04vw auto 0; /* 20px */
	color: var(--node-color-heading);
	font-size: 0.94vw; /* 18px */
	line-height: 1.9;
}

.p-awardsSingle__body > *:first-child {
	margin-top: 0;
}

/* 本文から120px下にview more、フッターの破線までは125px（他ページと同じ間合い）。
   view more自体はまだ置いていないので、その分をまとめて下の余白にする */
.p-awardsSingle__body,
.p-awardsPhotos:last-child {
	padding-bottom: 15.885vw; /* 305px = 120 + 60 + 125 */
}

/* 1000px未満は他セクションと同じく可読性優先へ切り替える */
@media (max-width: 1000px) {
	.p-awardsSingle__title {
		width: auto;
		margin: 0 1.5rem;
		padding-top: 2rem;
		font-size: 1.25rem;
	}

	.p-awardsPhotos {
		margin-top: 2rem;
		gap: 0.5rem;
	}

	/* 幅の狭い画面で1320×825に切ると帯のようになるので、元の縦横比のまま見せる */
	.p-awardsPhotos__item,
	.p-awardsPhotos__item.-contain {
		width: calc(100% - 3rem);
		height: auto;
	}

	.p-awardsPhotos__item img,
	.p-awardsPhotos__item.-contain img {
		height: auto;
		object-fit: contain;
	}

	.p-awardsSingle__body {
		width: auto;
		margin: 1.5rem 1.5rem 0;
		font-size: 0.95rem;
	}

	.p-awardsSingle__body,
	.p-awardsPhotos:last-child {
		padding-bottom: 4rem;
	}
}
/* ==========================================================================
   カスタムカーソル（PCのリンクホバー時。先方支給のpointer_02.svgをベースにした矢印アイコン）
   個別セレクターの都度追加が漏れやすかったため、サイト全体のリンク・ボタン類に
   一括適用する方式に変更（2026-07-22）。管理者ツールバー（#wpadminbar）はWP標準の
   操作性を保つため対象外にする
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
	a,
	button,
	input[type="submit"],
	input[type="button"],
	[role="button"],
	.c-iconBtn {
		cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 36.77 36.77'%3E%3Cpolygon points='0 0 15.56 36.77 22.42 22.42 36.77 15.56 0 0' fill='%234d4c45'/%3E%3C/svg%3E") 5 5, pointer;
	}

	#wpadminbar,
	#wpadminbar * {
		cursor: auto;
	}
}

/* ==========================================================================
   丸印スクロールバー（サイト全体、PCのみ）
   ネイティブのスクロールバーを非表示にし、縦線+丸のドラッグ可能なUIに置き換える。
   JS: js/circle-scrollbar.js（`.c-circleScrollbar__thumb`のtopを0〜100%で更新）
   ========================================================================== */
html {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

html::-webkit-scrollbar {
	display: none;
}

.c-circleScrollbar {
	position: fixed;
	/* 上端はヘッダーの点線、下端はフッターの点線に揃える
	   （どちらもjs/circle-scrollbar.jsが実測して設定） */
	top: var(--node-scrollbar_top, 2rem);
	right: 2rem;
	bottom: var(--node-scrollbar_bottom, 2rem);
	width: 0;
	z-index: 500;
	pointer-events: none;
}

.c-circleScrollbar__track {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 1px;
	/* 濃色ページでは明るい色に差し替わる（.single-works側で上書き） */
	background: var(--node-scrollbar_color, var(--node-color-ink-soft));
	opacity: 0.4;
	transform: translateX(-50%);
	pointer-events: auto;
	cursor: pointer;
}

.c-circleScrollbar__thumb {
	position: absolute;
	left: 0;
	top: 0;
	width: 20px;
	height: 20px;
	margin: 0;
	padding: 0;
	border: 6px solid var(--node-scrollbar_color, var(--node-color-ink));
	border-radius: 50%;
	background: #fff;
	transform: translate(-50%, -50%);
	cursor: grab;
	touch-action: none;
	pointer-events: auto;
}

.c-circleScrollbar__thumb:active {
	cursor: grabbing;
}

.c-circleScrollbar__thumb:focus-visible {
	outline: 2px solid var(--node-color-accent-blue);
	outline-offset: 3px;
}

@media (max-width: 999px) {
	.c-circleScrollbar {
		display: none;
	}
}

/* ==========================================================================
   フッター: ヘッダーと同じ点線の罫線 + コピーライトを左寄せ
   ========================================================================== */
/* 破線はヘッダー（.l-header__bar::before）とまったく同じ引き方にする。
   要素にborder-topを付けると幅いっぱい（100%）に伸びてしまうので、
   幅を決められる疑似要素で引く（2026-08-13） */
.l-footer__foot {
	position: relative;
	border-top: none;
}

.l-footer__foot::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 93.75vw; /* 1800px：ヘッダーと同じ */
	border-top: 1px dashed #ddd;
	transform: translateX(-50%);
	pointer-events: none;
}

.c-copyright {
	text-align: left;
}

/* ==========================================================================
   タブレット〜スマホ共通のヘッダー
   1000px未満はArkheがスマホ用ヘッダー（ハンバーガー＋中央ロゴ＋フルスクリーン・
   ドロワー）に切り替わる。PC・モバイルのどちらの仕様書もロゴは左端で、
   メニューもドロワーではなくPCと同じ横並び（Works / Profile / News）なので、
   この帯でもPC側の仕組み（js/header-nav-toggle.jsの.js-pcNavToggle）を使う
   （モバイル仕様書#02の2ページ目。2026-08-17）
   ========================================================================== */
@media (max-width: 999px) {
	.l-header__body.l-container {
		justify-content: flex-start;
		align-items: flex-start;
	}

	.l-header__center {
		order: 1;
		flex: 0 0 auto;
		margin: 0; /* Arkheはauto marginで中央に置いているので解除する */
		text-align: left;
	}

	/* 横並びナビとその開閉ボタンを、PCと同じように出す。
	   閉じている間は幅0で隠し、ボタンで.is-openが付いたら横に開く（PCと同じ仕組み） */
	.l-header__right {
		display: flex !important;
		order: 2;
		align-items: center;
		max-width: 0;
		overflow: hidden;
		opacity: 0;
		white-space: nowrap;
		transition: max-width 0.4s ease, opacity 0.3s ease;
	}

	.l-header__right.is-open {
		max-width: 640px;
		opacity: 1;
	}

	.l-header__pcNavToggle {
		display: flex !important;
		order: 3;
		margin-left: auto;
	}

	/* Arkhe標準のドロワーを開くボタンは使わない */
	.l-header__drawerBtn {
		display: none !important;
	}
}

/* ==========================================================================
   モバイル（トップページ）
   デザイン仕様 (Top)_Mobile#01.pdf（2026-08-16）。390px＝100%で書かれているので、
   仕様のpxを3.9で割ってvwにしている（390px幅で仕様どおりの実寸になる）。
   左右の余白は20px、内容幅は350px。
   ここはファイル末尾に置いて、上の@media (max-width:1000px)より後に効かせている。
   ========================================================================== */
@media (max-width: 640px) {
	:root {
		--node-mob-side: 5.128vw;  /* 20px */
		--node-mob-body: 89.744vw; /* 350px */
		--node-mob-text: 3.077vw;  /* 12px */
	}

	/* 内容の左右は20px（内容幅350px）。Arkheの.l-containerは15pxなので上書きする */
	.l-container {
		padding-left: var(--node-mob-side);
		padding-right: var(--node-mob-side);
	}

	/* Profile・Historyの箱はPC用に1700px幅（88.54vw）で置き直しているので、
	   モバイルでは350px幅に戻す */
	.p-homeProfile > .l-container,
	.p-profileDivider > .l-container {
		width: var(--node-mob-body);
		margin-left: calc(50% - 44.872vw);
		padding-left: 0;
		padding-right: 0;
	}

	/* ---- ヘッダー -------------------------------------------------------- */
	/* 仕様ではロゴが左（x=20）、ハンバーガーが右（x=345）。
	   Arkhe標準のスマホヘッダーはハンバーガーが左・ロゴが中央なので入れ替える */
	.l-header__body.l-container {
		padding: 5.051vw var(--node-mob-side) 3.590vw; /* 上19.7px／下14px＝破線をy=49に置く */
	}

	/* ハンバーガーの絵柄（24px）が仕様の345〜370に来るよう、
	   ボタンの余白ぶん（左右8px）だけ外へ出す */
	.l-header__pcNavToggle .c-iconBtn {
		width: 6.282vw;  /* 絵柄24.5px */
		height: 3.923vw; /* ロゴと同じ15.3px。40px角のままだと行が高くなる */
		margin-right: 0;
	}

	/* 開いたときの Works / Profile / News。仕様は12px・項目の間隔30px。
	   Arkhe標準の内側余白（16px 12px）が入ると間隔がずれるので外す */
	/* 仕様書#02の2ページ目をPDFの座標で測ると、上下の段は「3つの等幅の列に
	   中央揃え」で組まれている。列の中心は136 / 214.5 / 293px、間隔78.5px。
	   文字幅で位置を決めると代替フォントの字幅の差が積み上がってずれるので、
	   列の枠を先に決めて、その中で中央に置く（2026-08-17） */
	.l-header__right {
		margin-left: auto;
		margin-right: 9.679vw; /* 列の右端332.25px → 右余白37.75px */
	}

	.l-header__right .c-gnav,
	.c-snsLinks__menu {
		display: grid;
		grid-template-columns: repeat(3, 20.128vw); /* 1列78.5px */
		column-gap: 0;
		justify-items: center;
	}

	.l-header__right .c-gnav__li,
	.c-snsLinks__item {
		min-width: 0; /* JSが書き込む実測値の名残を打ち消す */
	}

	.l-header__right .c-gnav__a {
		padding: 0;
		font-size: 3.077vw; /* 12px */
		transform: none;    /* PC用の下端そろえは使わない */
	}

	/* 2段目の note / Instagram / Youtube も同じ大きさ・列にそろえる。
	   ハンバーガーは絶対配置で行の外だが、SNSアイコンは行の中にあるので、
	   その幅（25px）ぶん右余白を詰めて列の位置を上段に合わせる。
	   .is-openまで書かないと既存の指定（クラス2つ）に負ける */
	.c-snsLinks__menu,
	.c-snsLinks__menu.is-open {
		margin-right: 3.269vw; /* 12.75px */
	}

	.c-snsLinks__item,
	.c-snsLinks__item.-note {
		padding: 0;
		font-size: 3.077vw;
	}

	.l-header__pcNavToggle .c-iconBtn__icon {
		width: 100%;
		height: 100%;
	}

	/* ロゴの箱にArkheの余白が入っていて、絵柄がy=27.7まで下がる */
	.l-header__center {
		padding-top: 0;
	}

	.l-header__center .c-headLogo {
		display: block;
		height: 3.923vw; /* 15.3px。Arkheの48pxのままだと破線がy=81まで下がる */
		line-height: 1;
	}

	/* 破線とSNSアイコンの行。Arkheはスマホでこの行を隠すが、仕様には入っている */
	.l-header__bar {
		display: block;
	}

	/* ハンバーガーはArkheが絶対配置で置いている。右端と上端を指定して、
	   破線・SNSアイコンと同じ右端（x=370）／ロゴと同じ上端（y=19.7）にそろえる */
	/* 横並びナビの開閉ボタン（PC用の複製）を、破線・SNSアイコンと同じ右端（x=370）／
	   ロゴと同じ上端（y=19.7）に置く。Arkheの40px角の枠のままだと右へ張り出す */
	.l-header__pcNavToggle {
		position: absolute;
		left: auto;
		right: var(--node-mob-side);
		top: 5.051vw;
		width: 6.282vw;  /* 24.5px */
		height: 3.923vw; /* 15.3px */
		transform: none;
	}

	.l-header .c-headLogo__img {
		width: 12.692vw; /* ロゴ幅49.5px */
		height: auto;
	}

	/* 破線はヘッダー幅ではなく内容幅（350px）。PC側は93.75vwを指定している */
	.l-header__bar::before {
		width: var(--node-mob-body);
	}

	.c-snsLinks {
		margin-top: 0;
		padding: 3.923vw 0 0; /* 破線からSNSアイコンまでの15.3px */
	}

	/* 仕様のアイコンは25×26.9px。既定の24px角だと素材（55:60）が
	   縦に収まりきらず、一回り小さく見える */
	.c-snsLinks__toggle {
		width: 6.410vw;  /* 25px */
		height: 6.897vw; /* 26.9px */
	}

	/* ---- ヒーロー動画 ---------------------------------------------------- */
	/* 全幅・高さ211px（390:211）。ヘッダーは固定配置で場所を取らないので、
	   仕様のy=106に置くぶんの余白を動画側に持たせる */
	.p-heroVisual {
		aspect-ratio: 390 / 211;
		/* 幅いっぱいに出す。左右20pxの内側にあるので、そのぶん外へ広げる */
		width: calc(100% + 10.256vw);
		margin-left: -5.128vw;
	}

	/* ヒーローの上端をy=106に置く。marginで下げると親と相殺して
	   ページ全体（固定ヘッダーを含む）がずれるため、親のpaddingで空ける */
	.l-main__body.p-front {
		padding-top: 27.179vw; /* 106px */
	}

	/* PCはヘッダーが動画の上に重なるため、動画をヘッダーの高さぶん下げて
	   配置している。モバイルはヘッダーの下に211pxの枠として置くので、
	   このずらしがあると枠の半分が白いまま残ってしまう（2026-08-16） */
	.p-heroVisual__video {
		top: 0;
		height: 100%;
	}

	/* MOVEのラベルも同じ変数で下げているので、動画の左上に置き直す */
	.p-heroVisual__label {
		left: 5.128vw; /* 20px */
		top: 4.872vw;  /* 動画の上端から19px */
	}

	/* ---- NODEロゴ・タグライン -------------------------------------------- */
	.p-heroIntro {
		padding: 12.795vw 0 0; /* ヒーロー下端からロゴ上端までの49.9px */
	}

	.p-heroIntro__logo {
		width: 46.154vw; /* 180px */
		margin: 0 auto;
	}

	.p-heroIntro__logoImg {
		width: 100%;
		height: auto;
	}

	.p-heroIntro__taglineImg {
		width: 42.821vw; /* 167px */
		height: auto;
		margin-top: 12.795vw; /* ロゴ下端からタグラインまでの49.9px */
	}

	/* 仕様の和文タグラインは幅168px（英文167pxとほぼ同じ）。
	   12pxだと235pxまで伸びるので、幅が168pxになる8.6pxまで落とす */
	.p-heroIntro__taglineJa {
		margin-top: 2.615vw; /* 英文の下端から10.2px */
		font-size: 2.205vw;  /* 8.6px */
		line-height: 1.12;   /* 文字の高さ9.6px */
	}

	/* 和文タグラインの下端から緑帯までの51.9px */
	.p-heroIntro {
		padding-bottom: 13.308vw;
	}

	/* 内容の左右余白が15px前提で+30pxしている箇所を、20px（＝+40px）に直す */
	.p-philosophy,
	.p-worksPreview,
	.p-quickNav,
	.p-homeAwards,
	.p-homeContact {
		width: calc(100% + 10.256vw);
		margin-left: -5.128vw;
	}

	/* ---- Philosophy（緑帯） ---------------------------------------------- */
	/* 999px以下は86vwに絞られるが、モバイルは内容幅350pxに合わせる */
	.p-philosophy__lead-en,
	.p-philosophy__lead-ja,
	.p-philosophy__body-en,
	.p-philosophy__body-ja {
		max-width: var(--node-mob-body);
	}

	/* 帯は552〜1043の491px。英文14px・和文12pxで、行送りはどちらも20.5px */
	.p-philosophy__main {
		padding-top: 12.410vw; /* 帯の上端から英文までの48.4px */
		margin-bottom: 0;      /* 段の間隔は下の.p-philosophy__subで持たせる */
	}

	/* PCの段間（英文の下31.2px）は使わず、仕様の間隔だけを効かせる */
	.p-philosophy__lead-en,
	.p-philosophy__body-en {
		margin-bottom: 0;
	}

	.p-philosophy__body-en {
		font-size: 3.590vw; /* 14px */
		line-height: 1.46;  /* 行送り20.5px */
	}

	/* リード英文だけ13.5px。14pxだと最長行が350pxに収まらず4行になる。
	   13.75pxでも3行に収まるが余白が0.4pxしかなく、環境差で折り返しかねない
	   （13.5pxなら最長行343.6pxで6.4px残る。2026-08-16） */
	.p-philosophy__lead-en {
		font-size: 3.462vw;  /* 13.5px */
		line-height: 1.519;  /* 行送り20.5px */
	}

	.p-philosophy__lead-ja {
		font-size: var(--node-mob-text); /* 12px */
		line-height: 1.7;                /* 行送り20.4px */
	}

	/* 和文本文は仕様どおり5行に収める。12pxだと6行になり、
	   11.75〜10.25pxでも6行のままだったので10pxまで落としている */
	.p-philosophy__body-ja {
		font-size: 2.564vw; /* 10px */
		line-height: 2.05;  /* 行送り20.5px */
	}

	.p-philosophy__lead-ja {
		margin-top: 5.538vw; /* 21.6px */
	}

	.p-philosophy__sub {
		padding-top: 10.821vw;    /* 英文リードから本文までの42.2px */
		padding-bottom: 11.179vw; /* 和文本文から帯の下端までの43.6px */
	}

	.p-philosophy__body-ja {
		margin-top: 4.923vw; /* 19.2px */
	}

	/* ---- Works / Awards の写真帯 ----------------------------------------- */
	/* Worksは195×195を2枚、Awardsは390×195を1枚。帯どうしの間は2px */
	.p-worksPreview__thumb {
		aspect-ratio: 1;
	}

	/* 1カラムに畳んだとき、グリッドの列が中身の最小幅で広がらないようにする。
	   min-heightはPCで左右の高さを揃えるためのものだが、モバイルでは
	   メニューの下に200px前後の余白が生まれてしまうので外す */
	.p-quickNav {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	/* PCは「左＝メニュー / 右＝Awardsの写真」の横並びだが、モバイルは
	   Worksの写真 → Awardsの写真 → メニュー の縦順（仕様 (Top)_Mobile#01.pdf）。
	   HTMLはメニューが先に来るので、ここで入れ替える */
	.p-quickNav__awards {
		order: 1;
	}

	.p-quickNav__nav {
		order: 2;
	}

	.p-quickNav__awards,
	.p-quickNav__awardsLink,
	.p-quickNav__awardsThumb {
		display: block;
		width: 100%;
	}

	.p-quickNav__awardsThumb {
		/* min-heightが残っていると縦横比より優先されて写真が大きくなる */
		min-height: 0;
		height: auto;
		aspect-ratio: 390 / 195;
	}

	.p-quickNav__awardsThumb img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* ---- クイックナビ ---------------------------------------------------- */
	.p-quickNav__nav {
		padding: 12.205vw 0 0; /* 写真帯からProfileまでの47.6px */
	}

	.p-quickNav__list > li + li {
		margin-top: 5.221vw; /* 行送り33.4px − 文字高13.04px */
	}

	/* 仕様#02（2026-08-17）でメニューが一回り小さくなった。
	   Works=51.4px / Awards/News=118.6px / Contact=69.6px の幅に合う高さ */
	.p-quickNav__label {
		height: 3.344vw; /* 13.04px */
	}

	/* ---- 三角形・青線・黒丸 ---------------------------------------------- */
	/* PCの余白（78px）が三角の上に足されてしまうので外す。
	   メニューから三角までの間隔は三角のmargin-topだけで持たせる */
	.p-profileDivider {
		padding-top: 0;
	}

	.p-profileDivider__mark {
		width: 10.256vw;   /* 40px */
		margin: 19.333vw auto 0; /* ナビ最終行から三角までの75.4px */
	}

	.p-profileDivider__blueline {
		width: var(--node-mob-body);
		margin-top: 12.923vw; /* 三角下端から青線までの50.4px */
	}

	/* 青線の上端から黒丸の上端までが26.4px。青線の画像自体に2.3pxの高さが
	   あるので、そのぶん引いた値を余白にする */
	.p-homeProfile {
		padding-top: 6.179vw;
	}

	.p-homeProfile__dot {
		width: 3.846vw; /* 15px */
		margin: 0 0 6.385vw 2.564vw; /* 黒丸下端から見出しまで24.9px／左は内容から10px内側 */
	}

	.p-homeProfile__title {
		margin-bottom: 6.538vw; /* 見出し下端から写真までの25.5px */
		font-size: 3.449vw;     /* 大文字の高さが仕様の9.6pxになるサイズ＝13.45px */
	}

	/* ---- Profile（写真・肩書き・名前・紹介文） --------------------------- */
	.p-staffLead {
		grid-template-columns: 1fr;
		margin-left: 0;
	}

	.p-staffLead__photo {
		width: 33.333vw; /* 130px */
		max-width: none;
	}

	/* 文字サイズは仕様書の文字幅から逆算している。
	   紹介文は1行目の幅208.3px、名前は「酒井 一徳」49.9px、
	   英語名は「KAZUNORI SAKAI」95.0px、肩書きは「代表取締役」43.2pxが基準 */
	.p-staffLead__detail {
		grid-template-columns: 1fr;
		padding-top: 0;
		margin-top: 5.051vw; /* 写真下端から肩書きまでの19.7px */
		font-size: 2.436vw;  /* 9.5px */
		line-height: 1.947;  /* 行送り18.5px */
	}

	.p-staffLead__role,
	.p-staffLead__role.-en {
		margin: 0;
		font-size: 2.205vw; /* 8.6px */
		line-height: 1;
	}

	.p-staffLead__name {
		margin-top: 2.718vw; /* 10.6px */
		font-size: 2.923vw;  /* 11.4px */
		line-height: 1;
	}

	.p-staffLead__name.-en {
		margin-top: 2.718vw;
		font-size: 2.821vw; /* 11px */
		line-height: 1;
	}

	.p-staffLead__text {
		margin-top: 4.692vw; /* 名前下端から紹介文までの18.3px */
	}

	/* 英語だけ名前から本文までが21.1px（和文は18.3px） */
	.p-staffLead__text.-en {
		margin-top: 5.410vw;
	}

	/* 英語の組は和文の紹介文から40.4px下 */
	.p-staffLead__role.-en {
		margin-top: 10.359vw;
	}

	/* ---- History --------------------------------------------------------- */
	.p-homeProfile__title.-history {
		margin-top: 8vw;      /* 英文下端から罫線までの31.2px */
		padding-top: 7.641vw; /* 罫線から見出しまでの29.8px */
		font-size: 3.449vw;   /* 大文字の高さが仕様の9.6pxになるサイズ＝13.45px */
	}

	.p-history {
		grid-template-columns: 1fr;
		row-gap: 0;
		margin-left: 0;
		margin-top: 5.436vw; /* 見出し下端から年表までの21.2px */
		font-size: 2.615vw;  /* 仕様の文字幅から逆算した10.2px */
		line-height: 1.95;   /* 行送り19.9px */
	}

	/* 年の列は仕様どおり76.5px（年20〜内容96.5） */
	.p-history__row,
	.p-history__col.-affiliations {
		grid-template-columns: 19.615vw 1fr;
	}

	/* 年表（和）→ 所属 30.7px、所属 → 年表（英） 32.7px */
	.p-history__col.-affiliations {
		margin-top: 7.872vw;
	}

	.p-history__col.-en {
		margin-top: 8.385vw;
	}

	/* ---- STAFF / SPECIAL PARTNER ---------------------------------------- */
	/* 左の列にSTAFF、右の列にSPECIAL PARTNERを縦に積む（仕様 (Top)_Mobile#01.pdf）。
	   flexの折り返しだと3人目が左の列に回ってしまうのでgridにする */
	.p-staffList {
		display: grid;
		grid-template-columns: 44.872vw 44.872vw; /* 175px × 2。x=20 / x=195 */
		column-gap: 0;
		row-gap: 6.897vw; /* パートナーどうしの間隔26.9px */
		margin-top: 7.513vw;  /* 年表（英）下端から罫線までの29.3px */
		padding-top: 7.641vw; /* 罫線からSTAFFまでの29.8px */
		margin-left: 0;
	}

	.p-staffList__item:first-child {
		grid-column: 1;
		grid-row: 1;
		margin-left: 0;
	}

	.p-staffList__item {
		grid-column: 2;
	}

	/* 仕様#02（2026-08-17）で肩書きが小さくなり、行間も詰まった。
	   STAFF=29.3px（#01は32.6px）、行間は肩書き→名前8.7px・名前→ローマ字6.3px */
	.p-staffList__role {
		/* 既定の下マージン0.9rem（13.5px）が名前との間隔と相殺して
		   8.7pxにならないので消す */
		margin-bottom: 0;
		font-size: 2.351vw; /* 9.17px */
		line-height: 1;
	}

	.p-staffList__name {
		margin-top: 2.231vw; /* 8.7px */
		font-size: 2.923vw;  /* 11.4px */
		line-height: 1;
	}

	.p-staffList__name.-en {
		margin-top: 1.615vw; /* 6.3px */
		font-size: 2.615vw;  /* 10.2px */
		line-height: 1;
	}

	/* ---- Award一覧 ------------------------------------------------------- */
	.p-homeAwards {
		padding-top: 15.641vw; /* STAFF下端からAward見出しまでの61px */
		/* PCの下余白（5rem＝78px）がContactまでの間隔に足されてしまうので外す。
		   ボタンからContact見出しまでの99.9pxは.p-homeContact側で持たせている */
		padding-bottom: 0;
	}

	.p-homeAwards__title {
		margin-bottom: 6.154vw; /* 見出しから一覧までの24px */
		font-size: 3.449vw;     /* 大文字の高さが仕様の9.6pxになるサイズ＝13.45px */
	}

	/* PCは和文と英文が左右2列。モバイルは上に和文の一覧、下に英文の一覧
	   （仕様 (Top)_Mobile#01.pdf）。HTMLは1件ごとに和・英が交互に並ぶので、
	   orderでまとめ直す */
	.p-awardList {
		grid-template-columns: 1fr;
	}

	.p-awardList__row.-ja {
		order: 1;
	}

	.p-awardList__row.-en {
		order: 2;
	}

	/* 和文の一覧と英文の一覧の間を32px空ける。並べ替え後の先頭にあたるのは
	   HTML上の2番目（1件目の英文）なので、そこに余白を付ける */
	.p-awardList__row.-en:nth-child(2) {
		margin-top: 8.205vw;
	}

	/* 見出しと同じ左端（x=20）にそろえる。PCは内側に寄せている。
	   年と内容の間隔は仕様で和文20px・英文6pxと違うので、gapで出し分ける */
	.p-awardList__line {
		padding: 0;
		font-size: 2.487vw; /* 仕様の文字幅から逆算した9.7px */
		line-height: 2.04;  /* 行送り19.8px */
		gap: 5.128vw;       /* 和文は20px */
	}

	.p-awardList__row.-en .p-awardList__line {
		gap: 1.538vw; /* 英文は6px */
	}

	/* 年の枠は最長の「2007-10」がちょうど収まる幅。ここを固定にすることで
	   年の桁数が違っても内容の開始位置がそろう */
	.p-awardList__year {
		flex: 0 0 10vw; /* 39px */
	}

	.p-homeAwards__more {
		margin-top: 15.385vw; /* 一覧下端からボタンまでの60px */
	}

	/* ボタンの大きさは仕様どおり。既定は文字サイズ基準（2.6em）で決まるため、
	   モバイルでは幅を直接指定して高さを縦横比に任せる。
	   Award/News＝120.5×22.5、Mail＝124.3×22.5 */
	.p-homeAwards__more .c-btnSvg__img,
	.p-homeContact__mail .c-btnSvg__img {
		height: auto;
	}

	.p-homeAwards__more .c-btnSvg__img {
		width: 30.897vw; /* 120.5px */
	}

	.p-homeContact__mail .c-btnSvg__img {
		width: 31.872vw; /* 124.3px */
	}

	/* ---- Contact / Location --------------------------------------------- */
	.p-homeContact {
		/* 上：Award/Newsボタンから見出しまでの99.9px
		   下：Mailボタンからフッターの破線までの89.3px */
		padding: 25.615vw 0 22.897vw;
	}

	/* Contactの見出しだけ仕様でも一回り小さい（大文字の高さ8.64px。
	   Profile / History / Award は9.6px） */
	.p-homeContact__title {
		margin-bottom: 6.641vw; /* 見出しから奄美事務所までの25.9px */
		text-align: left;
		font-size: 3.031vw;     /* 11.82px */
	}

	/* 事務所ブロックは見出しと違って.l-containerの外にあるので、
	   ここで内容幅350px（左右20px）に収める */
	.p-officeBlock {
		width: var(--node-mob-body);
		margin: 0 auto;
	}

	.p-officeBlock__info {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.p-officeBlock__col.-en {
		margin-top: 5.846vw; /* 和文の最終行から英文までの32.2px */
		margin-bottom: 0;
	}

	.p-officeBlock__map {
		width: var(--node-mob-body);
		height: 26.154vw;    /* 102px */
		margin-top: 7.128vw; /* 英文の最終行から地図まで27.8px */
		margin-bottom: 9.359vw; /* 地図から次の事務所名まで36.5px */
	}

	/* 2つ目（鹿児島）の地図はMailまで40.3px空ける。
	   :last-of-typeはdiv兄弟の並び次第で外れるので、隣接セレクタで指定する */
	.p-officeBlock + .p-officeBlock .p-officeBlock__map {
		margin-bottom: 10.333vw;
	}
}

/* ==========================================================================
   モバイル（Works一覧ページ）
   デザイン仕様 (Works)_Mobile#01.pdf（2026-08-17）。390px＝100%。
   数値は仕様のpxを3.9で割ったvw。左右20px・内容幅350pxはトップページと同じ。
   ========================================================================== */
@media (max-width: 640px) {
	/* ロゴの絵柄がinline要素のままだと行の下端に落ちて、ハンバーガーより
	   20px下にずれる。ブロックにして箱の上端にそろえる（2026-08-17） */
	.l-header .c-headLogo__img {
		display: block;
	}

	.p-worksArchive__header {
		width: var(--node-mob-body);
		margin: 0 auto;
		/* 固定ヘッダーのぶんはArkheが本文の上に確保しているので、
		   ここではSNSアイコンの下端から見出しまでの14.9pxだけを持たせる */
		padding-top: 3.821vw;
	}

	.p-worksArchive__title {
		/* 大文字の高さが仕様の10.08pxになるサイズ */
		font-size: 3.621vw; /* 14.12px */
	}

	.p-worksArchive__description {
		/* 仕様の1行目は30文字で幅306.2px＝1文字10.2px。
		   12.97pxでは1文が2行に折り返して全体が4行になっていた */
		margin-top: 3.923vw; /* 見出しの下端から15.3px */
		font-size: 2.615vw;  /* 10.2px */
		line-height: 1.794;  /* 行送り18.3px */
	}

	.p-worksArchive__introImage {
		width: var(--node-mob-body);
		margin: 8.128vw auto 0; /* 説明の下端から31.7px */
		aspect-ratio: 350 / 350.9;
	}

	.p-worksArchive__list {
		width: var(--node-mob-body);
		margin: 0.744vw auto 0; /* 写真どうしの間隔2.9px */
		gap: 0.744vw;
	}

	.p-worksArchive__item .p-worksArchive__link {
		height: auto;
		aspect-ratio: 350 / 145.4;
	}

	.p-worksArchive__loadMoreWrap {
		margin-top: 12.667vw; /* 最後の写真から▽まで49.4px */
	}

	.p-worksArchive__loadMoreImg {
		width: 13.282vw; /* 51.8px */
		height: auto;
	}
}

/* ==========================================================================
   モバイル（Works / Awards 子ページ）の「一覧へ戻る」ボタン
   画面に固定したままだとページ末尾でフッターの破線・著作権表示に重なるため、
   記事の末尾に置いてstickyにする。スクロール中は右下に浮き、記事が終わると
   そこで止まるのでフッターには重ならない（2026-08-19）
   ========================================================================== */
@media (max-width: 1000px) {
	.p-worksSingle__backLink,
	.p-awardsSingle__backLink {
		position: sticky;
		top: auto;
		bottom: 1.5rem;
		right: auto;
		width: 102px;
		/* 写真が少ないページではボタンが写真の直下に来るので、間隔を空ける */
		margin: 5.128vw 1.5rem 0 auto; /* 上20px */
	}
}

/* ==========================================================================
   モバイル（Awards / News 子ページ）
   「タイトルは他ページと統一して10px、写真の間は3px」との指示（2026-08-18）
   ========================================================================== */
@media (max-width: 640px) {
	.p-awardsSingle__title {
		margin: 0 var(--node-mob-side);
		font-size: 2.564vw; /* 10px */
	}

	.p-awardsPhotos {
		gap: 0.769vw; /* 3px */
	}
}

/* ==========================================================================
   モバイル（Awards / News 一覧ページ）
   デザイン仕様 (Awards News)_Mobile#01.pdf（2026-08-18）。390px＝100%。
   数値は仕様のpxを3.9で割ったvw。左右20px・内容幅350pxは他ページと同じ。
   見出し・タイトルの大きさは大文字の高さから、本文は文字幅から逆算している。
   ========================================================================== */
@media (max-width: 640px) {
	/* 帯はモバイル用の素材（350×20）に差し替える */
	.p-awardsBand__img.-pc {
		display: none;
	}

	.p-awardsBand__img.-mobile {
		display: block;
		width: var(--node-mob-body);
	}

	.p-awardsHead,
	.p-awardsCards,
	.p-awardsBand,
	.p-awardsCards__moreWrap {
		width: var(--node-mob-body);
		margin-left: auto;
		margin-right: auto;
	}

	/* 見出しと Award / JP の切り替えボタンを1行に置く。
	   罫線は見出しの下端から9.4px下、その10.3px下から一覧が始まる */
	.p-awardsHead__titleRow {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 2.410vw; /* 9.4px */
	}

	.p-awardsHead__title {
		/* 大文字の高さが仕様の10.55pxになるサイズ */
		font-size: 3.79vw; /* 14.78px */
	}

	/* ボタンの箱が中身より広く、絵柄が左に寄ってしまうので幅を絵柄に合わせる */
	.p-awardsHead__lang {
		width: 12.795vw;
		padding: 0;
	}

	.p-awardsHead__langImg {
		width: 12.795vw; /* 49.9px */
		height: auto;
	}

	/* 受賞一覧。年の枠は仕様どおり36.5px（年x18.7・内容x55.2） */
	.p-awardsHead__list {
		margin-top: 2.641vw; /* 罫線から一覧までの10.3px */
	}

	.p-awardsHead__row {
		font-size: 2.564vw; /* 10px */
		line-height: 1.86;  /* 行送り18.6px */
	}

	/* 年の枠は最長の「2007-10」＋仕様の間隔12pxが収まる幅。
	   仕様は36.5pxだが、それは支給フォント（Akt）で年が24.5pxに収まる前提。
	   代替フォントでは40pxあり、36.5pxのままだと枠からはみ出して
	   タイトルと文字が接触してしまう（2026-08-18） */
	.p-awardsHead__year {
		flex: 0 0 13.333vw; /* 52px */
		white-space: nowrap;
	}

	.p-awardsHead__row {
		gap: 0;
	}

	/* 仕様の大きな写真は350×583.2（縦長）だが、実際に登録されている写真は
	   横長で縦横比が合わない。枠を仕様どおりに固定すると、切って合わせるか
	   下に空白が出るかのどちらかになる。切れるのが気になるとのことなので、
	   枠の縦横比は指定せず写真そのものの形で見せる（2026-08-18）。
	   写真が未登録のカードも、枠が潰れて空箱が残らなくなる */
	.p-awardsHead__featureImage {
		width: 100%;
	}

	.p-awardsHead__featureTitle {
		/* 大文字の高さが仕様の12.47pxになるサイズ */
		font-size: 4.3vw; /* 16.77px */
	}

	.p-awardsHead__featureText {
		font-size: 2.564vw; /* 10px */
		line-height: 1.87;  /* 行送り18.7px */
	}

	/* カードは1列。写真350×210.5、その下にタイトルとread more */
	.p-awardsCards {
		grid-template-columns: 1fr;
	}

	.p-awardsCards::before {
		display: none; /* PCの2列を仕切る縦線はモバイルでは使わない */
	}

	/* 1000px以下の指定（aspect-ratio: 720/435）が残っていると、
	   写真が未登録のカードで211pxの空箱になる */
	.p-awardsCards__thumb {
		height: auto;
		aspect-ratio: auto;
	}

	.p-awardsCards__title {
		/* 大文字の高さが仕様の10.55pxになるサイズ */
		margin-top: 5.282vw; /* 写真の下端から20.6px */
		font-size: 3.636vw;  /* 14.18px */
	}

	.p-awardsCards__moreImg {
		width: 9.949vw; /* 38.8px */
		height: auto;
	}

	.p-awardsCards__viewMoreImg {
		width: 13.282vw; /* 51.8px */
		height: auto;
	}
}

/* ==========================================================================
   動画（Works / Awards 詳細ページ）
   1件につき1本。YouTubeをページ内で再生する（2026-08-22）。
   読み込み時はサムネイルと再生ボタンだけで、押されるとjs/video-embed.jsが
   iframeを差し込む。音は最初は無音で、再生後に出るボタンで切り替える。
   写真の枠に対して16:9が収まる大きさにして、上下の並びを乱さない。
   ========================================================================== */
.p-worksPhotos__item.-video,
.p-awardsPhotos__item.-video {
	height: auto;
}

/* 幅は写真と同じにそろえる。16:9なので高さは写真の枠とは変わる
   （Works 1720×967.5 / Awards 1320×742.5。2026-08-22） */
.p-worksPhotos__item.-video .c-videoEmbed {
	width: 89.58vw; /* 1720px：写真と同じ */
}

.p-awardsPhotos__item.-video .c-videoEmbed {
	width: 68.75vw; /* 1320px：写真と同じ */
}

.c-videoEmbed {
	position: relative;
	aspect-ratio: 16 / 9;
	margin: 0 auto;
	overflow: hidden;
	background: #000;
	line-height: 0;
}

.c-videoEmbed__poster,
.c-videoEmbed__iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.c-videoEmbed__poster {
	object-fit: cover;
}

/* 再生ボタン。YouTubeの見慣れた形にして、押せることが分かるようにする */
.c-videoEmbed__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 4.58vw; /* 88px */
	padding: 0;
	border: 0;
	background: none;
	transform: translate(-50%, -50%);
	cursor: pointer;
	line-height: 0;
	transition: opacity 0.3s ease;
}

.c-videoEmbed__play svg {
	display: block;
	width: 100%;
	height: auto;
}

.c-videoEmbed__playBg {
	fill: rgba(0, 0, 0, 0.6);
	transition: fill 0.3s ease;
}

.c-videoEmbed:hover .c-videoEmbed__playBg,
.c-videoEmbed__play:focus-visible .c-videoEmbed__playBg {
	fill: #f00; /* YouTubeの赤。押せる場所だと分かるように */
}

/* 再生／停止と音声のボタン。YouTubeの操作バーを出していないので、
   こちら側で用意する。見た目はヒーロー動画の音声ボタンにそろえる */
.c-videoEmbed__controls {
	position: absolute;
	left: 1.5rem;
	bottom: 1.5rem;
	z-index: 2;
	display: flex;
	gap: 0.75rem;
}

.c-videoEmbed__ctrl {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.7);
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.35);
	color: #fff;
	cursor: pointer;
	transition: background 0.3s ease;
}

.c-videoEmbed__ctrl:hover,
.c-videoEmbed__ctrl:focus-visible {
	background: rgba(0, 0, 0, 0.6);
}

.c-videoEmbed__ctrl svg {
	width: 1.25rem;
	height: 1.25rem;
}

@media (max-width: 640px) {
	/* 幅は写真にそろえる。枠（__item）自体が1000px以下では写真と同じ幅に
	   なっているので、その幅いっぱいにするだけでよい（2026-08-22） */
	.p-worksPhotos__item.-video .c-videoEmbed,
	.p-awardsPhotos__item.-video .c-videoEmbed {
		width: 100%;
	}

	.c-videoEmbed__play {
		width: 15.385vw; /* 60px */
	}

	.c-videoEmbed__controls {
		left: 0.75rem;
		bottom: 0.75rem;
		gap: 0.5rem;
	}

	.c-videoEmbed__ctrl {
		width: 2rem;
		height: 2rem;
	}

	.c-videoEmbed__ctrl svg {
		width: 1rem;
		height: 1rem;
	}
}