@charset "UTF-8"; /*! ================================================================== * nullify.css — 外部プラットフォームCSS（img-fan.pia.jp）の指定を * 「安全に打ち消せる範囲だけ」打ち消す限定版 * * 対象: common.css / default.css / global.css / doc.css / fc.css / * guide.css / survey.css / photo.css * * ------------------------------------------------------------------ * ★ このファイルに項目を追加してよい条件（2段階の審査）★ * * 条件1）!important の禁則 * 自作CSS（base.css / top.css / kasou-〇〇.css）側の該当セレクタへの * 宣言が「!important 無しの通常宣言」である場合、そのセレクタは * 絶対に「!important 付き」でここへ書いてはならない。 * CSSでは !important 宣言は詳細度・記述順に関係なく非!important宣言に * 必ず勝つため、nullify.css 側の `all: revert !important` が * 自作CSSの指定まで丸ごと消してしまう。 * （実例: base.css の `#mainNav{position:fixed}` は !important 無し * → `#mainNav{all:revert !important}` に負けて position:fixed が消え、 * ヘッダー・ナビが崩壊した） * → 後述 D セクションは !important を使わないため、この事故は * 構造的に起きない（詳細は D セクション冒頭）。 * * 条件2）プロパティ単位の完全被覆 * 条件1をクリアした場合のみ、外部CSSの実ファイルを読み、そのセレクタに * 対して外部CSSが設定している「全プロパティ」（@media の PC/SP 両方の * ブレークポイントを含む、全ファイル横断の和集合）を列挙し、自作CSS側が * その全てを再指定しているかを確認する。 * 1つでも漏れがあれば打ち消してはならない。漏れたプロパティは現状 * 外部CSSから効いており、revert すると見た目が黙って変わるため。 * 「セレクタが自作CSSにも存在する」だけでは不十分。 * * 条件3）子孫まとめて打ち消し（`:is(...) *`）は原則禁止 * ブロック配下の全子要素を revert する書き方は、条件1・2を子孫の * 全パスについて満たす必要があり、実際にはまず成立しない。 * * 条件4）`all: revert` は「そのセレクタの宣言」ではなく * 「その要素に効いているオーサー宣言すべて」を巻き戻す * → default.css の要素リセット（font-weight:normal / list-style:none / * vertical-align:baseline 等）も同時に消える。 * 結果 body の `font-weight:500` が継承され、ul には disc マーカーが * 復活する。font-weight / list-style を自作CSSが再指定していない * 要素は対象にできない。 * ------------------------------------------------------------------ * * 読み込み位置: 外部CSSの「後」、かつ自作CSSの「前」 * ← ここ * ← 自作 * * 構成 * C-1 自作CSSが触れている要素セレクタの既定値を戻す（!important なし） * C-2 クラス・IDの `all: revert !important` 版 → 全項目が条件1に抵触、対象なし * C-3 疑似要素・clearfix の後始末 → 現在対象なし * D 外部6ファイルと自作CSSの「両方に記述がある」セレクタの打ち消し * （!important なしの `all: revert`） * D-1 審査通過ぶん（有効）／ D-2 条件2で不合格ぶん（コメントアウト） * ================================================================== */ /* ================================================================== * C-1. 自作CSSが使っている要素セレクタの打ち消し（ブラウザ既定値へ戻す） * !important を付けていないので、自作CSSから普通に上書きできる。 * * ここに残しているのは以下のみ： * ・default.css のリセット値が UA 既定値と実質同じで、revert しても * 見た目が変わらない要素（dt / label / article / figcaption / * span / div / li / nav） * ・外部CSSが padding / background を指定しているが、base.css が * 同プロパティを完全に再指定している要素（header / footer） * * ＜除外したもの / 理由＞ * font: revert … default.css の `font-weight:normal` を戻すと * base.css の `body{font-weight:500}` を継承して * 全体の文字太さが変わる（自作CSS側に代替指定なし） * h1 / h3 / p / dd / ul / figure / hr * … UA 既定の margin（p:1em 0, ul:1em 0 + padding-left:40px, * dd:margin-inline-start:40px, figure:1em 40px, * hr:border 1px inset 等）が復活し、自作CSSに * 打ち消し指定が無いためレイアウトが動く * strong … font を戻さない前提では無意味（font-weight のみの差） * img … global.css の `max-width:100%` と reset の * `vertical-align:top` を自作CSSが再指定していない * ul/nav ul の list-style … 戻すと全 ul に disc マーカーが出る * （自作CSSに list-style の指定が1つも無い） * input, textarea … reset の `input{vertical-align:middle}` を * checkbox/radio 以外で再指定していない * header a … global.css の `header a:link{color:#fff}` を * 自作CSSが再指定していない（赤リンクに変わる） * header/footer の `all: revert` * … footer の font-weight / footer nav li の font-size / * footer nav ul の list-style・padding-left が * 自作CSS未指定 * a の outline: revert … global.css の `a{outline:none}` の代替指定なし * ================================================================== */ dt, label, article, figcaption, footer, header, nav, span, div, li { margin: revert; padding: revert; border: revert; outline: revert; vertical-align: revert; background: revert; } /* base.css が font-family / font-size / font-weight / line-height / color を すべて再指定しているため、global.css の body 指定は安全に戻せる。 （text-size-adjust は自作CSSに代替が無いので戻さない） */ body { font: revert; line-height: revert; color: revert; } /* base.css の `a:link, a:visited{text-decoration:underline; color:#FF2731}` が同詳細度・後勝ちで全状態を上書きしているため安全。 */ a, a:link, a:visited, a:hover, a:active { color: revert; text-decoration: revert; } /* base.css の `footer a:link, footer a:visited{color:var(--c_white); text-decoration:none; font-size:14px}` が完全に再指定している。 */ footer a, footer a:link, footer a:visited, footer a:hover, footer a:active { color: revert; text-decoration: revert; } /* ================================================================== * C-2. クラス・IDの `all: revert !important` 版 * ------------------------------------------------------------------ * 全項目が条件1（自作側が !important 無し）に抵触するため対象なし。 * 打ち消したい場合は !important を使わない D セクション側に書く。 * * 代表的な不採用理由（!important 版として書いた場合の実害） * #mainNav … base.css の position:fixed / z-index が消えナビが落ちる * #navSwitcher … base.css の right 指定が消えハンバーガーが左端へ飛ぶ * .inner … 自作 `.container.inner{width}` が消える * .content … 自作の margin・text-align、`.content.profile` の * カード装飾（!important 無し）が消える * .new / .date / .btn_orange / .newsArticle / .personTag / .pageTop * … いずれも自作側が !important 無し * ================================================================== */ /* ================================================================== * C-3. 疑似要素・clearfix の後始末 * ------------------------------------------------------------------ * 現在対象なし。 * `.inner::before/::after` `.content::before/::after` は外部CSSの * clearfix（content:" "; display:table; clear:both）であり、自作CSSに * 代替が無い。消すと float 子要素（.header_main / .newsArticle figure / * .articleSocial 等）の回り込み解除が失われて高さが潰れる。 * ================================================================== */ /* ================================================================== * D. 外部6ファイルと自作CSS（base.css / kasou-common.css / top.css）の * 両方に記述があるセレクタの打ち消し * ------------------------------------------------------------------ * ■ 機構：!important を使わず `all: revert` を使う * 読み込み順が 外部CSS → nullify.css → 自作CSS であるため、 * ・nullify は外部より後 → 同詳細度で外部に勝つ（打ち消せる） * ・自作は nullify より後 → 同詳細度で nullify に勝つ（守られる） * つまり「自作が再指定しているプロパティは自作の値に戻り、 * 再指定していない外部プロパティだけが UA 既定値に落ちる」。 * 条件1の事故は構造的に起きない。 * * ■ 残るリスクは条件2（未被覆プロパティ）と条件4（要素リセットの巻き戻り）。 * そのためセレクタ単位で「revert によって失われる外部プロパティ」を * 洗い出し、実害が無いものだけ D-1 に置いた。 * * ■ 詳細度の使い分け（意図的） * 外部側により詳細なセレクタがある場合、D の宣言では勝てない。 * これは温存目的で利用している。例: `#mainNav li{all:revert}` は * 外部 `@767 #mainNav ul li{height:0; overflow:hidden}`（1,0,2）に * 負けるため、SPメニューの開閉機構は壊れない。 * ================================================================== */ /* ------------------------------------------------------------------ * D-1. 審査通過ぶん（有効） * ------------------------------------------------------------------ */ /* .mainSection 外部: default.css のリセット / @768 margin:40px 0 80px / clearfix疑似要素 自作: kasou-common.css `.mainSection{margin:0}` revert で失うもの: なし（margin は自作が後勝ち。clearfix疑似要素は 別セレクタなので温存。section の UA 既定は display:block で同じ） */ .mainSection { all: revert; } /* .contentHeading / .contentHeadingbig 外部: margin-bottom:1em / padding-bottom:.2em / border-bottom:1px solid #000 / @768 font-size:184.6% / @767 146.2% 自作: font-family・font-size・font-weight・line-height・margin-bottom・ text-align（+ h1.contentHeading で margin-top・color・position・ border-bottom:none、SPは margin/padding を !important） revert で失うもの: PC の padding-bottom:.2em のみ（下線は自作が none に しているため見た目の差はほぼ無い） */ .contentHeading, .contentHeadingbig { all: revert; } /* .content 外部: margin:32px 0 16px / padding:32px 3% / border:1px solid gray 自作: kasou-common.css で margin:0 0 20px / padding:0 !important / border:solid 1px gray !important / text-align:left revert で失うもの: div リセットの font-weight:normal（.content 直下の テキストノードのみ body の 500 を継承。子の div/p は要素リセットが 残るため影響しない） ※ clearfix の ::before/::after は温存（C-3 参照） */ .content { all: revert; } /* .news 外部: @768 margin:40px 0 80px / @767 margin:24px 0 64px 自作: kasou-common.css `.news{margin:0}` + @767 `margin-bottom:0` revert で失うもの: なし（外部は margin のみ） */ .news { all: revert; } /* #personFilter 外部: height:40px / margin-bottom:32px / position:relative（+ 子要素群） 自作: kasou-common.css `#personFilter{display:none}` revert で失うもの: なし（display:none のため height 等は無意味） ※ 子要素（.controller / .viewport / ul / li）は対象外 */ #personFilter { all: revert; } /* #mainNav（自身のみ。子孫は対象外） 外部: @768 padding:8px 0 / background-color:#666666 自作: base.css @768 で padding:0 / background:transparent を再指定 revert で失うもの: なし ※ `#mainNav ul` `#mainNav ul li` `#mainNav li a` は D-2 参照 */ #mainNav { all: revert; } /* #mainNav li 外部: @768 margin-right:2em / float:left 自作: base.css @768 で margin:0 / float:none を再指定 revert で失うもの: なし ※ @767 の `#mainNav ul li{height:0;overflow:hidden}`（1,0,2）は 詳細度で勝ち残るため SPメニューの開閉は無事 */ #mainNav li { all: revert; } /* .pageTop / .pageTop a 外部: .pageTop{max-width:1000px; margin:10px auto 20px; padding:0 8px; text-align:right} / .pageTop a{color:#666} 自作: base.css で position:fixed + bottom/right/z-index/opacity/transition、 a 側は width/height/line-height/border-radius/background/text-indent/ text-decoration/color/padding/text-align/display を全指定 revert で失うもの: max-width・margin・text-align（position:fixed + bottom/right 配置なので影響しない。むしろ残骸の除去になる） */ .pageTop, .pageTop a { all: revert; } /* footer（自身のみ） 外部: padding:20px 0 / background-color:#000 / color:#fff 自作: base.css で color / background-color / padding / position / margin-top revert で失うもの: footer リセットの font-weight:normal（footer 直下に テキストノードが無いため実害なし。文字は .copyright と nav 内） ※ C-1 の要素リストにも footer があるが、こちらは color まで含む上位互換 */ footer { all: revert; } /* ------------------------------------------------------------------ * D-2. 条件2で不合格ぶん（コメントアウト。有効化しないこと） * * いずれも「セレクタは自作CSSにもある」が、外部CSSのプロパティに * 自作側が再指定していないものが含まれ、revert すると黙って見た目や * 機能が変わる。有効化するには、まず自作CSS側で括弧内のプロパティを * 明示的に指定してから、この行を D-1 へ移すこと。 * ------------------------------------------------------------------ header … color:#fff（自作未指定。ヘッダー直下テキストが黒に） .siteHeading … width:100% / margin-right:-134px / padding-right:134px （自作は font-size・float・z-index・position のみ） .inner … max-width:1000px / margin:0 auto / padding-right:8px （自作 .container.inner は width・color のみ。 戻すと本文がワイド画面で際限なく広がる） .header_main … @768 width:100% / margin-right:-176px / float:left #header_user … @768 float:right（base.css 側は float:right の行が コメントアウト済みで、現在の右寄せは外部CSS依存） / font-size:92.3% #mainNav ul … @767 width:100%・position:fixed・top:60px（自作も同値を 指定しているが background-color / margin-left が未被覆） #mainNav ul li … @767 height:0 / overflow:hidden / transition （SPメニューの開閉機構そのもの。消すと開いたまま） #mainNav li a … @768 text-decoration:none（自作未指定 → base.css の `a:link{text-decoration:underline}` で下線が出る） #navSwitcher … @767 padding:12px 8px（ハンバーガーの当たり判定と位置） footer nav ul … reset の list-style:none も巻き戻り disc が出る / padding-left も UA 既定の40pxが復活 footer nav li … font-size:92.3%（14px に太る） .copyright … font-size:84.6%（14px に太る） .newsArticle … margin-bottom:16px（カード同士が密着する） / figure・.newsBodyWrap 等の子要素も外部依存 .personTag … .newsArticle .personTag{margin-bottom:24px} .personTag li … display:inline-block（li の UA 既定 list-item に戻り 縦積みになる）/ .personTag img{vertical-align:middle} .articleSocial … 自作は `.blog .articleSocial{display:none}` のみで、 .articleSocial 自身への指定が無い .newsBodyWrap … 自作に指定が無く、clear:left と clearfix が失われる .membersDetail h3 … padding:.4em 16px / color:#fff （自作 .join 側は background-color と font 系のみ。 revert すると黒背景に黒文字になる） .btnEntryGroup a … padding:1em 2% / display:inline-block / min-width （自作は .admissionButton など個別ボタンのみ再指定） .photoList 系 … 自作は `.gallery .photoList …` 接頭辞付きの部分再指定。 .surveyList 系 外部の .photoBox / .photoFig img / .surveyBox 等の .surveyForm 系 素の値が土台として効いており、和集合を被覆していない .btn_orange / … background-color は自作が !important で被覆しているが、 .btn_blue 対象要素が `.btnSurvey a`（!important 無し）とも重なる .new / .date … 外部 `.newsArticle .date{margin-bottom:1em}` 等が未被覆。 base.css の `.pick_list … .date:before{content:"■"}` は 別セレクタなので直接の影響は無いが、`.new` は `.newsItem .new` `.photoList .new` `.surveyList .new` と ページ毎に土台が違い一括では扱えない * ------------------------------------------------------------------ */ /* ================================================================== * 備考 / 注意点 * ------------------------------------------------------------------ * 1) 読み込み順 * 外部CSSより後、自作CSSより前。D セクションはこの順序が前提で * 成立している。順序を変えると打ち消しも保護も両方壊れる。 * * 2) このファイルに載っていないクラス・ID * 意図的に打ち消していない（外部CSSの既定スタイルがそのまま表示に * 使われる）。追加したい場合は冒頭の条件1〜4を必ず満たすこと。 * * 3) 打ち消しの代わりに推奨する方法 * `all: revert` でまとめて消すのではなく、消したいプロパティを * 自作CSS側で個別に上書きする（例: `#mainNav{background:transparent}`）。 * これなら未被覆プロパティの消失も、要素リセットの巻き戻りも起きない。 * * 4) 調査中に見つかった別件（このファイルでは対処しない） * 外部 global.css の `.content + .contentHeading{margin-top:40px}` は * 詳細度 0,2,0 で、自作 `h1.contentHeading{margin-top:calc(80px + 86px)}` * （0,1,1）に勝つ。div.content の直後に来る見出しだけ上余白が 40px に * なる。nullify 側で `.content + .contentHeading` を revert すると * 今度は自作の見出しスタイル全体が負けるため、対処は自作CSS側で * `.content + h1.contentHeading` を追加するのが正しい。 * * 5) all: revert が効かない項目 * direction / unicode-bidi は all の対象外。 * ::placeholder / ::marker / ::selection は必要なら個別指定。 * * 6) ブラウザ対応 * all: revert … Chrome/Edge 84+, Firefox 67+, Safari 9.1+ * ================================================================== */