/* ============================================================
   実績詳細：縦長の制作物を「本文と横並び」で見せる（2026-09-12）
   ------------------------------------------------------------
   背景：採用サイト(752x1874)・年始挨拶HTMLメール(700x3240)のような
   縦長の制作物を1カラムで原寸表示すると、本文400字に対して画像だけで
   数画面分の縦幅を占め、右半分が数画面にわたって空白になる。

   方針：本文を左・制作物を右に置き、本文側を position:sticky で追従
   させる。制作物の全体を省略せず見せたまま、縦の空白を本文が埋める。
   スクロール中も「課題／提案と工夫／制作内容」が視界に残るため、
   制作物のどの部分の話かを対応づけながら読める。

   ・祖先（.content / .inner / .works_content）に overflow・height 指定が
     無いことを実測で確認済み（sticky が効く条件）。
   ・950px の .inner を 1fr / 700px の2カラムに割る。
   ・1024px 未満は1カラムに戻す（縦並び）。
   ・JS不使用。WordPress由来のlightbox JSは読み込まれていないため依存しない。
   ============================================================ */

/* 横並びにするのは「縦長の制作物を持つページ」だけ。
   既存の横長画像ページ（website/flyer1/banner-4）は従来どおり1カラム。 */
.works-detail .works_content.is-split {
	display: grid;
	/* .inner は 950px。制作物を原寸(700px)にすると本文が約200pxしか残らず
	   読めなくなるため、本文:制作物 = 1:1.1 の可変配分にする。 */
	grid-template-columns: 1fr 1.1fr;
	gap: 40px;
	align-items: start;
}

/* タグ（制作実績／カテゴリ）は works_content の直下にあるためグリッドの
   子になる。1列目を占有して本文・制作物の配置を崩すので、全幅に渡らせる。
   ※ 明示しないと タグ=cell1 / 本文=cell2(右) / 制作物=2行目1列(左・狭い)
     という左右逆転が起きる（2026-09-12 実測で確認） */
.works-detail .works_content.is-split > .workspage_tab {
	grid-column: 1 / -1;
}

/* 左：本文。スクロールに追従させる */
.works-detail .works_content.is-split > .works_textcol {
	position: sticky;
	top: 96px; /* ヘッダーに隠れない位置 */
}

/* 右：制作物。グリッドの2列目に置く */
.works-detail .works_content.is-split > .works_figurecol {
	min-width: 0; /* グリッド内で画像がはみ出さないための保険 */
}

.works_figurecol figure {
	margin: 0;
}

.works_figurecol img {
	display: block;
	width: 100%;
	height: auto;
	vertical-align: bottom;
	border: 1px solid #e2e2e2;
	border-radius: 4px;
	background: #fff;
}

/* 制作物が複数点ある場合の間隔（冒頭アニメ＋メール全体 など） */
.works_figurecol .works_figure_item + .works_figure_item {
	margin-top: 28px;
}

.works_figure_note {
	margin: 10px 0 0;
	color: #666;
	font-size: 13px;
	line-height: 1.7;
}

/* 実物へのリンク（公開中の制作物がある場合） */
.works_live_link {
	margin-top: 20px;
}
.works_live_link a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #0b3f8f;
	font-size: 14px;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.works_live_link a::after {
	content: "";
	width: 11px;
	height: 11px;
	border: 1.5px solid currentColor;
	border-left-width: 0;
	border-bottom-width: 0;
	transform: rotate(45deg);
}

/* --- 中間幅：画像列を可変にして詰まりを防ぐ --- */
@media screen and (max-width: 1100px) {
	.works-detail .works_content.is-split {
		grid-template-columns: 1fr 1fr;
		gap: 28px;
	}
}

/* --- タブレット以下：1カラムへ戻す --- */
@media screen and (max-width: 1023px) {
	.works-detail .works_content.is-split {
		display: block;
	}
	.works-detail .works_content.is-split > .works_textcol {
		position: static;
	}
	.works-detail .works_content.is-split > .works_figurecol {
		margin-top: 28px;
	}
	.works_figure_note {
		font-size: 12px;
	}
}

/* 高さの低い画面では sticky が本文を隠しうるので追従を切る */
@media screen and (max-height: 700px) {
	.works-detail .works_content.is-split > .works_textcol {
		position: static;
	}
}