:root {
  --color-main: #FF0000;
  --color-sub: #4AE563;
}
#header01 { background: var(--color-main); }
#footer01 { background: var(--color-main); }
@media screen and (max-width: 767px) {
  #globalNav01 { background-color: var(--color-main); }
}

/* 2026-09-22追加: ヘッダー/フッターの背景(#header01/#footer01)は上記でメインカラーに
   なっているが、その上に乗るナビ文字(.nav01/.languageNav/#nav0)・モバイルのアイコン行
   (.spIcon p)・ハンバーガーアイコンの3本線(.headButton01 > span)は、元々common.cssで
   #231815(ほぼ黒)固定になっており、背景色に連動していなかった。上のメインカラー文字色
   (#ffffff、厳格に白固定)と揃える。 */
#header01 .nav01 li a, #footer01 .nav01 li a { color: #ffffff; }
#header01 .languageNav li a, #footer01 .languageNav li a { color: #ffffff; }
#globalNav01 #nav0 p, #globalNav01 #nav0 p a { color: #ffffff; }
.nav01 li.current a::before, .languageNav li.current a::before { background: #ffffff; }
@media screen and (max-width: 767px) {
  #header01 > .inner01 .titleArea .spIcon p { color: #ffffff; }
  .headButton01 > span { background-color: #ffffff; }
}

/* 2026-10-03追加: ヘッダーロゴ(/common/img/logo01.svg)は#231815単色のSVGで、赤い背景に沈むため
   CSSフィルタで白に反転する(共有ファイルは触らない。単色SVGなので全体が純白になる)。
   フッターのSNSアイコン(X・note等は黒/濃紺の背景画像)と著作権表記も同様に白へ揃える。 */
#header01 .titleArea .logo img { filter: brightness(0) invert(1); }
#footer01 .snsList li { filter: brightness(0) invert(1); }
#footer01 .copyright01, #footer01 .copyright01 small { color: #ffffff; }
#footer01 .snsList li.youtube { filter: none; background-image: url("/2026/img/logo_youtube_white.svg"); }

/* アーカイブページ最上部の「東京フィルメックスとは」の帯は、about.htmlと同じ2026年の見た目に揃える
   (サイト共通の外枠なので)。年度の中身の見出し(.leadArea内)には触れない。 */
.contents02.typeArchive > .inner01 > .heading01.mt0 { background: var(--color-sub); color: #000000; }

.pgTitleArea .specialLabel { text-align: center; margin: 0 0 24px; }
.pgTitleArea .specialLabel span { display: inline-block; font-size: 2.2rem; line-height: 1.4; padding: 0.3em 1.8em; border-radius: 999px; }
@media screen and (max-width: 767px) {
  .pgTitleArea .specialLabel span { font-size: 1.6rem; }
}
.textMain { color: var(--color-main); }
.textSub { color: var(--color-sub); }
.bgMain { background-color: var(--color-main); color: #ffffff; }
.bgSub { background-color: var(--color-sub); color: #000000; }
.bgMainTextSub { background-color: var(--color-main); color: var(--color-sub); }
.bgSubTextMain { background-color: var(--color-sub); color: var(--color-main); }
/* ---- 以下、common.cssの#4c2faf/#e4f962使用箇所をこのページ限定で上書き ---- */
/* 単色使用(文字色のみ、または背景色のみ)箇所: そのまま新色に置き換え */
.heading01 { color: var(--color-sub); }
.heading02 { color: var(--color-sub); }
.text01.type02 { color: var(--color-sub); }
.newsArea .hdg { color: var(--color-sub); }
.contentsWrap .contents02 .leadArea > .inner01 .scheduleWrap .schedule .btn02 a { background-color: var(--color-main); color: #ffffff; border: 1px solid var(--color-main); }
.btn02 > a { border: 1px solid var(--color-sub); }
.text01 span { background: linear-gradient(transparent 60%, var(--color-main) 60%); }
/* アクセントカラー同士の組み合わせだった箇所: 相手色ではなく自動判定の白/黒に変更 */
.heading01.type03 { background: var(--color-main); color: #ffffff; }
.txResult { background: var(--color-main); color: #ffffff; }
.scheduleWrap .schedule .detailWrap .icon { background: var(--color-main); color: #ffffff; }
.c_OE { background: var(--color-main) !important; color: #ffffff !important; }
.contentsWrap .contents02 .leadArea > .inner01 .scheduleWrap .schedule .btn02 a:hover { background-color: transparent; color: #000000; border: 1px solid var(--color-main); }
@media screen and (min-width: 768px) {
  .btn01.type02 a:hover { background-color: var(--color-sub); color: #000000; border: 1px solid var(--color-sub); }
  .btn01.type03 a:hover { border: 1px solid var(--color-sub); background-color: var(--color-sub); color: #000000; }
}
.btn02 > a:hover { color: #000000; background-color: var(--color-sub); }

/* サブ色(紫)背景+白文字だった箇所: 新しいサブ色(金)は明るいため白文字だと読みにくい。
   自動判定の文字色に置き換え */
.heading01:first-child { background: var(--color-sub); color: #000000; }
.text01.type02 span { background: var(--color-sub); color: #000000; }
.dlWrap04 dl dt { background: var(--color-sub); color: #000000; }
.table01 thead tr th, .table01 thead tr td { background: var(--color-sub); color: #000000; }
.contentsWrap .program24hArea01 { background: var(--color-sub); }
.program24hArea01 .heading01 { color: #000000; }
.contentsWrap .contents02 .leadArea { background: var(--color-sub); }
.contentsWrap .contents02 .leadArea > .inner01 { color: #000000; }
.contentsWrap .contents02 .leadArea > .inner01 a { color: #000000; }
.leadArea .heading01 { color: #000000; }
.contentsWrap .contents02 .leadArea > .inner01 .tx04 { color: #000000; }

/* 2026-10-04: 作品ページのタイトルの級数を上げる(common.cssは5.0rem・スマホ3.2rem)。 */
.contentsWrap .contents02 .pgTitleArea .heading01 { font-size: 6.4rem; line-height: 1.3; }
.contentsWrap .contents02 .pgTitleArea .heading01 span { font-size: 4.0rem; }
@media screen and (max-width: 767px) {
  .contentsWrap .contents02 .pgTitleArea .heading01 { font-size: 4.0rem; }
  .contentsWrap .contents02 .pgTitleArea .heading01 span { font-size: 2.4rem; }
}

/* 2026-10-04: トップのスポンサーロゴは、common.cssの「1段5個」固定だと6個のとき5+1になってしまう。
   ロゴの数から段ごとの個数(--sponsor-cols。6個なら3+3、7個なら4+3)をページ側で決め、
   均等な段組(グリッド)にする。スマホは従来どおり2列。 */
@media screen and (min-width: 768px) {
  .contentsWrap .contents01 .sponsorsArea > .inner01 .sponsorsList { display: grid; grid-template-columns: repeat(var(--sponsor-cols, 5), 1fr); gap: 30px 2.75%; align-items: center; justify-items: center; }
  .contentsWrap .contents01 .sponsorsArea > .inner01 .sponsorsList li { width: auto; margin: 0 !important; }
}