）通常時 */
--color-link: var(--accent);
/* 同 hover 時 */
--color-link-hover: var(--base-light);
/* === ボタン === */
/* .btn 背景（ボタン専用） */
--color-button: var(--accent);
/* .btn 内テキスト */
--color-button-text: var(--base-dark);
/* .btn 枠線色（通常） */
--color-button-border: var(--base-dark);
/* .btn:hover 背景 / .works-filter__btn.is-active 背景 */
--color-button-hover: var(--base-dark);
/* .btn:hover 内テキスト */
--color-button-hover-text: var(--accent);
/* .btn:hover 枠線色 */
--color-button-hover-border: var(--base-dark);
/* --- セカンダリーボタン --- */
--color-button-secondary: var(--base-light);
--color-button-secondary-text: var(--base-mid);
--color-button-secondary-border: var(--base-mid);
--color-button-secondary-hover: var(--base-dark);
--color-button-secondary-hover-text: var(--base-light);
--color-button-secondary-hover-border: var(--base-dark);
/* === カード === */
/* カード面色
.work-card / .game-row / .contact-option / .status-card
.video-card / .skill-card / .studio-brand */
--color-card: var(--base-light);
/* カード内見出し
.work-card__title / .game-row__title / .contact-option__title
.status-card__label など */
--color-card-heading: var(--base-dark);
/* カード内英字ラベル（現状 badge/tag 表記に使用） */
--color-card-subheading: var(--base-dark);
/* カード内本文 */
--color-card-paragraph: var(--base-mid);
/* カード内アクセント（現状予備） */
--color-card-highlight: var(--accent);
/* === バッジ（New!, SERIES, ステータス等） === */
/* .badge 背景 / .status-card__badge--open 背景 */
--color-badge: var(--accent);
/* バッジ内テキスト */
--color-badge-text: var(--base-dark);
/* === ボーダー・オーバーレイ === */
/* 太めのボーダー（.works-filter__btn / .timeline 左線） */
--color-border: var(--base-mid);
/* 薄いボーダー
ヘッダー下 / カード外枠 / .section-heading 下線 など */
--color-border-soft: color-mix(in srgb, var(--base-mid) 35%, transparent);
/* 画像 hover 時の暗幕
.work-card__overlay / .photo-gallery__overlay など */
--color-overlay: color-mix(in srgb, var(--base-dark) 72%, transparent);
/* === プレースホルダー（画像未配置時のサムネ枠） === */
/* プレースホルダー面色
.work-card__thumb / .game-row__visual / .photo-gallery__item
.hero--bleed__bg / .profile-visual-placeholder
（ミント背景内は白枠でコントラスト） */
--color-placeholder: var(--base-light);
/* プレースホルダー文字色 */
--color-placeholder-text: color-mix(in srgb, var(--base-mid) 55%, transparent);
/* プレースホルダー枠色 */
--color-placeholder-border: color-mix(in srgb, var(--base-mid) 15%, transparent);
}
/* ===== セクションC = 暗い背景用 ===== */
.section--C {
/* セクション地色（CSSプロパティ実描画） */
background: var(--base-dark);
/* デフォルトテキスト色（黄背景用に濃紺明示） */
color: var(--base-light);
/* === セクション/ページ === */
/* ページ地色（body背景・.section 地色） */
--color-background: var(--base-dark);
/* 大見出し（.hero__title / .section-heading__jp） */
--color-heading: var(--base-light);
/* 英字ラベル
.section-heading__en / .hero__name / .timeline__year
.contact-option__label など */
--color-subheading: var(--base-light);
/* 本文
/
/ .timeline__desc / .status-card__desc など
（黄背景では濃紺で強く） */
--color-paragraph: var(--base-light);
/* 補足・メタ情報
.hero__tagline / .work-card__meta / .game-row__visual
footer copyright など */
--color-caption: color-mix(in srgb, var(--base-light) 65%, transparent);
/* 装飾線・アクセント
.hero__title::after 下線 / .contact-note 左縦線
カード枠 hover 色（.work-card / .game-row / .contact-option
.skill-card / .photo-gallery__item :hover） */
--color-highlight: var(--accent);
/* === リンク === */
/* 本文中テキストリンク（ / ）通常時 */
--color-link: var(--accent);
/* 同 hover 時 */
--color-link-hover: var(--primary);
/* === ボタン === */
/* .btn 背景（ボタン専用・黄背景では濃紺ボタンで対比） */
--color-button: var(--accent);
/* .btn 内テキスト */
--color-button-text: var(--base-dark);
/* .btn 枠線色（通常） */
--color-button-border: var(--base-dark);
/* .btn:hover 背景 / .works-filter__btn.is-active 背景 */
--color-button-hover: var(--base-dark);
/* .btn:hover 内テキスト */
--color-button-hover-text: var(--accent);
/* .btn:hover 枠線色 */
--color-button-hover-border: var(--accent);
/* --- セカンダリーボタン（暗背景では白枠+透過が視認良好） --- */
--color-button-secondary: transparent;
--color-button-secondary-text: var(--base-light);
--color-button-secondary-border: var(--base-light);
--color-button-secondary-hover: var(--base-light);
--color-button-secondary-hover-text: var(--base-dark);
--color-button-secondary-hover-border: var(--base-light);
/* === カード === */
/* カード面色
.work-card / .game-row / .contact-option / .status-card
.video-card / .skill-card / .studio-brand
（現状 CTAセクションでカード未使用） */
--color-card: var(--base-light);
/* カード内見出し
.work-card__title / .game-row__title / .contact-option__title
.status-card__label など */
--color-card-heading: var(--base-dark);
/* カード内英字ラベル（現状 badge/tag 表記に使用） */
--color-card-subheading: var(--base-dark);
/* カード内本文 */
--color-card-paragraph: var(--base-mid);
/* カード内アクセント（現状予備） */
--color-card-highlight: var(--accent);
/* === バッジ（New!, SERIES, ステータス等） === */
/* .badge 背景 / .status-card__badge--open 背景 */
--color-badge: var(--base-dark);
/* バッジ内テキスト */
--color-badge-text: var(--base-light);
/* === ボーダー・オーバーレイ === */
/* 太めのボーダー（.works-filter__btn / .timeline 左線） */
--color-border: var(--primary);
/* 薄いボーダー
ヘッダー下 / カード外枠 / .section-heading 下線 など
（黄背景では濃紺40%で視認性確保） */
--color-border-soft: color-mix(in srgb, var(--primary) 35%, transparent);
/* 画像 hover 時の暗幕
.work-card__overlay / .photo-gallery__overlay など */
--color-overlay: color-mix(in srgb, var(--base-dark) 72%, transparent);
/* === プレースホルダー（画像未配置時のサムネ枠） === */
/* プレースホルダー面色
.work-card__thumb / .game-row__visual / .photo-gallery__item
.hero--bleed__bg / .profile-visual-placeholder */
--color-placeholder: var(--primary);
/* プレースホルダー文字色 */
--color-placeholder-text: color-mix(in srgb, var(--base-dark) 65%, transparent);
/* プレースホルダー枠色 */
--color-placeholder-border: color-mix(in srgb, var(--base-dark) 15%, transparent);
}
/* ============================================
バリアント修飾クラス（部分上書き）
============================================
セクションクラスと組み合わせて使う：
============================================ */
/* カード面色をミントに（例：白背景セクション内でミントカードを見せたい時） */
.card-mint {
--color-card: var(--secondary);
--color-surface: var(--secondary);
}
/* カード面色を濃紺に + カード内テキスト反転（暗カード用） */
.card-dark {
--color-card: var(--base-dark);
--color-card-heading: var(--base-light);
--color-card-subheading: var(--primary);
--color-card-paragraph: var(--base-light);
--color-card-highlight: var(--accent);
}
/* ============================================
ヘッダー
============================================ */
.site-header {
position: sticky;
top: 0;
background: var(--color-background);
border-bottom: 1px solid var(--color-border-soft);
z-index: 100;
height: var(--header-height);
display: flex;
align-items: center;
}
.site-header__inner {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
max-width: var(--max-width);
margin: 0 auto;
padding: 0 24px;
}
.site-header__logo {
display: flex;
align-items: center;
font-family: var(--font-en);
font-weight: 700;
font-size: 20px;
letter-spacing: 0.05em;
}
.site-header__logo img {
max-height: 60px;
width: auto;
display: block;
}
.site-nav {
display: flex;
gap: 32px;
align-items: center;
}
.site-nav a {
font-size: 14px;
letter-spacing: 0.05em;
color: var(--color-paragraph);
}
.site-nav a:hover {
color: var(--color-subheading);
opacity: 1;
}
/* モバイルナビ */
.site-nav__toggle {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 8px;
font-size: 20px;
}
@media (max-width: 768px) {
.site-nav {
display: none;
position: absolute;
top: var(--header-height);
left: 0;
right: 0;
flex-direction: column;
background: var(--color-background);
border-bottom: 1px solid var(--color-border-soft);
padding: 24px;
gap: 20px;
}
.site-nav.is-open { display: flex; }
.site-nav__toggle { display: block; }
}
/* ============================================
ヒーロー
============================================ */
.hero {
padding: 120px 0 96px;
text-align: center;
border-bottom: 1px solid var(--color-border-soft);
}
.hero__name {
font-family: var(--font-en);
font-size: 14px;
letter-spacing: 0.3em;
color: var(--color-subheading);
margin-bottom: 16px;
}
.hero__title {
font-size: clamp(32px, 6vw, 56px);
font-weight: 700;
letter-spacing: 0.05em;
line-height: 1.3;
margin-bottom: 24px;
position: relative;
display: inline-block;
}
.hero__title::after {
content: "";
display: block;
width: 48px;
height: 2px;
background: var(--color-highlight);
margin: 24px auto 0;
}
/* ============================================
ヒーロー: フルブリードビジュアル（背景画像+テキスト中央）
トップページで大きな1枚絵を見せる用
============================================ */
.hero--bleed {
position: relative;
padding: 0;
height: 92vh;
min-height: 600px;
overflow: hidden;
border-bottom: 1px solid var(--color-border-soft);
}
.hero--bleed__bg {
position: absolute;
inset: 0;
background-color: var(--color-placeholder);
background-image: url('../images/2026WEBtop01.jpg'); /* JSで未設定時のフォールバック */
background-size: cover;
background-position: center;
background-attachment: fixed; /* スクロールに対して固定（パララックス） */
}
/* img タグは CSS background に置き換えたので非表示。HTML側の ![]()
は残してOK（alt属性はSEO/アクセシビリティで意味あり） */
.hero--bleed__bg img {
display: none;
}
.hero--bleed__overlay {
position: relative;
z-index: 2;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 24px;
}
.hero--bleed__name {
font-family: var(--font-en);
font-weight: 700;
font-size: clamp(48px, 12vw, 160px);
letter-spacing: 0.05em;
color: #FFFFFF;
text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
line-height: 1;
margin: 0;
}
.hero--bleed__name::after {
content: "";
display: block;
width: 80px;
height: 2px;
background: #FFFFFF;
margin: 28px auto 0;
}
.hero--bleed__tagline {
margin-top: 24px;
font-size: 14px;
color: #FFFFFF;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
letter-spacing: 0.1em;
line-height: 1.9;
}
.hero--bleed__more {
margin-top: 40px;
font-family: var(--font-en);
font-size: 15px;
letter-spacing: 0.35em;
color: #FFFFFF;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
border-bottom: 1px solid rgba(255, 255, 255, 0.6);
padding-bottom: 6px;
transition: opacity 0.2s ease;
}
.hero--bleed__more:hover {
opacity: 0.75;
}
/* ============================================
ヒーロー: ビジュアル主役バリアント（左右分割・他ページ用）
============================================ */
.hero--visual {
padding: 0;
border-bottom: 1px solid var(--color-border-soft);
}
.hero--visual__grid {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 80vh;
}
.hero--visual__image {
background: var(--color-placeholder);
position: relative;
overflow: hidden;
}
.hero--visual__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hero--visual__image-placeholder {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--color-caption);
font-family: var(--font-en);
letter-spacing: 0.2em;
text-align: center;
padding: 32px;
}
.hero--visual__image-placeholder small {
margin-top: 8px;
font-size: 15px;
opacity: 0.7;
letter-spacing: 0.1em;
}
.hero--visual__content {
padding: 80px 64px;
display: flex;
flex-direction: column;
justify-content: center;
}
.hero--visual__content .hero__name,
.hero--visual__content .hero__title,
.hero--visual__content .hero__tagline {
text-align: left;
margin-left: 0;
}
.hero--visual__content .hero__title {
display: inline-block;
}
.hero--visual__content .hero__title::after {
margin: 24px 0 0;
}
.hero--visual__content .hero__tagline {
max-width: none;
}
@media (max-width: 768px) {
.hero--visual__grid {
grid-template-columns: 1fr;
min-height: auto;
}
.hero--visual__image {
aspect-ratio: 4 / 5;
}
.hero--visual__content {
padding: 56px 24px;
text-align: center;
}
.hero--visual__content .hero__name,
.hero--visual__content .hero__title,
.hero--visual__content .hero__tagline {
text-align: center;
}
.hero--visual__content .hero__title::after {
margin: 24px auto 0;
}
}
.hero__tagline {
font-size: 16px;
color: var(--color-paragraph);
max-width: 560px;
margin: 0 auto;
}
/* ============================================
セクション共通
============================================ */
.section-heading {
display: flex;
align-items: baseline;
gap: 16px;
margin-bottom: 48px;
padding-bottom: 16px;
border-bottom: 1px solid var(--color-border-soft);
}
.section-heading__en {
font-family: var(--font-en);
font-size: 14px;
letter-spacing: 0.3em;
color: var(--color-subheading);
text-transform: uppercase;
}
.section-heading__jp {
font-size: 24px;
font-weight: 700;
letter-spacing: 0.05em;
}
/* ============================================
作品グリッド（Works）
============================================ */
.works-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 32px;
}
.work-card {
display: block;
background: var(--color-card);
transition: transform 0.3s ease;
}
.work-card:hover {
opacity: 1;
transform: translateY(-4px);
}
.work-card__thumb {
position: relative; /* オーバーレイのため */
aspect-ratio: 1 / 1; /* 1:1 で揃える */
background: var(--color-placeholder); /* 「黒帯」相当（薄紫の余白） */
border: 1px solid var(--color-placeholder-border);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-placeholder-text);
font-family: var(--font-en);
font-size: 14px;
letter-spacing: 0.2em;
transition: border-color 0.3s ease;
}
/* ============================================
作品カード ホバーオーバーレイ（担当詳細表示）
============================================ */
.work-card__overlay {
position: absolute;
inset: 0;
background: color-mix(in srgb, var(--color-heading) 72%, transparent); /* 濃紫系青 半透明（ぼかしと組合せ） */
backdrop-filter: blur(8px); /* frosted glass：背後の画像をぼかす */
-webkit-backdrop-filter: blur(8px);
color: #FFFFFF;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 24px;
opacity: 0;
transition: opacity 0.3s ease;
font-family: var(--font-jp);
pointer-events: none; /* リンクのクリック判定を阻害しない */
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); /* テキスト可読性補強 */
}
.work-card:hover .work-card__overlay {
opacity: 1;
}
.work-card__overlay-label {
font-family: var(--font-en);
font-size: 14px;
letter-spacing: 0.3em;
opacity: 0.75;
margin-bottom: 10px;
}
.work-card__overlay-text {
font-size: 15px;
line-height: 1.8;
}
/* タッチデバイス（マウスホバー無し）: 下部グラデで常時表示・ぼかしOFF */
@media (hover: none) {
.work-card__overlay {
opacity: 1;
background: linear-gradient(to top,
color-mix(in srgb, var(--color-heading) 95%, transparent) 0%,
color-mix(in srgb, var(--color-heading) 60%, transparent) 55%,
color-mix(in srgb, var(--color-heading) 0%, transparent) 100%);
backdrop-filter: none;
-webkit-backdrop-filter: none;
justify-content: flex-end;
padding: 16px;
}
.work-card__overlay-label {
margin-bottom: 4px;
}
}
.work-card:hover .work-card__thumb {
border-color: var(--color-highlight);
}
.work-card__thumb img {
width: 100%;
height: 100%;
object-fit: contain; /* デフォルト: 黒帯方式（画像全体を見せる） */
}
/* 拡大表示で1:1で揃えたいときは class="work-card__thumb work-card__thumb--cover" を付与 */
.work-card__thumb--cover img {
object-fit: cover;
}
/* トリミング基準位置のプリセット — work-card__thumb--cover と併用してください */
.work-card__thumb--cover.work-card__thumb--top img { object-position: center top; }
.work-card__thumb--cover.work-card__thumb--bottom img { object-position: center bottom; }
.work-card__thumb--cover.work-card__thumb--left img { object-position: left center; }
.work-card__thumb--cover.work-card__thumb--right img { object-position: right center; }
.work-card__title {
margin-top: 16px;
font-size: 16px;
font-weight: 700;
}
.work-card__meta {
margin-top: 4px;
font-size: 14px;
color: var(--color-caption);
letter-spacing: 0.1em;
}
/* ============================================
動画グリッド
============================================ */
.videos-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 24px;
}
.video-card {
background: var(--color-card);
}
.video-card__frame {
aspect-ratio: 16 / 9;
background: #000;
width: 100%;
}
.video-card__frame iframe {
width: 100%;
height: 100%;
border: 0;
}
.video-card__title {
margin-top: 12px;
font-size: 14px;
font-weight: 700;
}
/* ============================================
ボタン
============================================ */
.btn {
display: inline-block;
padding: 14px 32px;
border: 1px solid var(--color-button-border);
background: var(--color-button);
color: var(--color-button-text);
font-size: 14px;
letter-spacing: 0.15em;
font-family: var(--font-en);
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn:hover {
background: var(--color-button-hover);
color: var(--color-button-hover-text);
border-color: var(--color-button-hover-border);
opacity: 1;
}
.btn--center {
display: block;
width: fit-content;
margin: 48px auto 0;
}
/* ============================================
バッジ（NEW, お知らせ等）
============================================ */
.badge {
display: inline-block;
padding: 2px 10px;
font-family: var(--font-en);
font-size: 14px;
letter-spacing: 0.2em;
color: var(--color-heading);
background: var(--color-highlight); /* CTA色（黄・薄紫 etc.） */
vertical-align: middle;
}
.badge--soft {
background: var(--secondary);
color: var(--color-heading);
}
/* ============================================
プロフィールレイアウト（About）
============================================ */
.profile-layout {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 64px;
align-items: start;
}
@media (max-width: 768px) {
.profile-layout {
grid-template-columns: 1fr;
gap: 32px;
}
}
.profile-layout__text p {
margin-bottom: 16px;
color: var(--color-paragraph);
}
/* 一般リスト（class未指定の ul/ol）— .timeline 等クラス付きリストは対象外 */
ul:not([class]),
ol:not([class]) {
margin: 0 0 16px;
padding-left: 1.8em; /* マーカー用の左gutter（傘マーカー等が綺麗に収まる） */
color: var(--color-paragraph);
}
ul:not([class]) li,
ol:not([class]) li {
margin-bottom: 6px;
line-height: 1.85;
font-family: inherit;
padding-left: 0.3em; /* マーカーと本文の間に少し空け */
}
.profile-visual-placeholder {
aspect-ratio: 3 / 4;
background: var(--color-placeholder);
border: 1px solid var(--color-placeholder-border);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--color-placeholder-text);
gap: 8px;
font-family: var(--font-en);
letter-spacing: 0.1em;
}
.profile-visual-placeholder small {
font-size: 15px;
opacity: 0.7;
}
/* プロフィール画像：枠を埋めるようにトリミング表示 */
.profile-visual-placeholder img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center; /* トリミング基準位置（top/bottom/50% 30% など変更可） */
display: block;
}
/* ============================================
写真ギャラリー（Photo Gallery）
============================================ */
.photo-gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 16px;
}
.photo-gallery__item {
aspect-ratio: 1 / 1;
background: var(--color-placeholder);
border: 1px solid var(--color-placeholder-border);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-placeholder-text);
font-family: var(--font-en);
font-size: 15px;
letter-spacing: 0.2em;
transition: opacity 0.3s ease, border-color 0.3s ease;
text-align: center;
padding: 16px;
}
.photo-gallery__item:hover {
opacity: 0.85;
border-color: var(--color-highlight);
}
.photo-gallery__item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* アスペクト比バリアント */
.photo-gallery__item--tall { aspect-ratio: 3 / 4; } /* 縦長（3:4） */
.photo-gallery__item--wide { aspect-ratio: 16 / 9; } /* 横長（16:9 ワイド） */
.photo-gallery__item--landscape { aspect-ratio: 4 / 3; } /* 横長（4:3 標準写真） */
.photo-gallery__item--span-2 { grid-column: span 2; }
/* ボタン化：クリック可能 + キーボード対応 + オーバーレイの位置決め基準 */
.photo-gallery__item {
font-family: inherit;
padding: 0;
cursor: pointer;
text-align: left;
position: relative; /* ★ .photo-gallery__overlay の absolute 基準 */
}
.photo-gallery__item:focus-visible {
outline: 2px solid var(--color-subheading);
outline-offset: 2px;
}
/* 動画アイテム対応 */
.photo-gallery__item video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
pointer-events: none; /* クリックはボタン側で受ける */
background: #000;
}
/* VIDEOバッジ（動画アイテムの右上に表示） */
.photo-gallery__badge {
position: absolute;
top: 10px;
right: 10px;
z-index: 2;
background: rgba(0, 0, 0, 0.72);
color: #FFFFFF;
padding: 4px 10px;
font-family: var(--font-en);
font-size: 14px;
letter-spacing: 0.2em;
font-weight: 700;
pointer-events: none;
}
/* ホバーオーバーレイ：全面 + backdrop-filter で背景ぼかし（frosted glass） */
.photo-gallery__overlay {
position: absolute;
inset: 0;
background: color-mix(in srgb, var(--color-heading) 55%, transparent);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: #FFFFFF;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 24px;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
font-family: var(--font-jp);
}
.photo-gallery__item:hover .photo-gallery__overlay,
.photo-gallery__item:focus-visible .photo-gallery__overlay {
opacity: 1;
}
.photo-gallery__overlay-title {
font-size: 15px;
font-weight: 700;
margin-bottom: 8px;
letter-spacing: 0.03em;
line-height: 1.5;
}
.photo-gallery__overlay-artist {
font-size: 15px;
color: rgba(255, 255, 255, 0.85);
font-family: var(--font-en);
letter-spacing: 0.15em;
}
/* タッチデバイス（ホバー不可）は下部グラデで常時表示（画像を最大限見せる） */
@media (hover: none) {
.photo-gallery__overlay {
opacity: 1;
background: linear-gradient(to top,
color-mix(in srgb, var(--color-heading) 92%, transparent) 0%,
color-mix(in srgb, var(--color-heading) 55%, transparent) 45%,
color-mix(in srgb, var(--color-heading) 0%, transparent) 85%);
backdrop-filter: none;
-webkit-backdrop-filter: none;
justify-content: flex-end;
align-items: stretch;
text-align: left;
padding: 16px;
}
.photo-gallery__overlay-title { font-size: 14px; margin-bottom: 4px; }
}
/* ============================================
写真ポップアップ（