/* =========================================================== 特集ページ（/special/）の互換レイヤー 2017年のページは /2017/common/css/base.css のリセットを前提に組まれている。 2026の common.css はリセットが最小限（box-sizing と body と img だけ）なので、 そのままだと見出しや段落にブラウザ既定の余白が付いてレイアウトが崩れる。 ここでは base.css の規則を **#contents の中だけ** に閉じ込めて再現する。 ヘッダー・フッター・パンくずは #contents の外にあるので影響を受けない。 生成元：_src/build_special.py ========================================================= */ #contents, #contents * { margin: 0; padding: 0; } #contents { position: relative; font-family: 'Zen Kaku Gothic New', sans-serif; font-style: normal; font-weight: 400; font-feature-settings: palt; font-size: 16px; line-height: 1.8; letter-spacing: normal; color: #000; background: #fff; text-align: left; } #contents h1, #contents h2, #contents h3, #contents h4, #contents h5, #contents h6 { font-size: 100%; font-weight: 400; } #contents ol, #contents ul { list-style-type: none; } #contents a { position: relative; } #contents a:link { color: #0039dc; text-decoration: underline; } #contents a:visited, #contents a:hover, #contents a:active { color: #0039dc; text-decoration: none; } #contents table { font-size: 12px; line-height: 1.5; } #contents hr { display: none; } #contents img { border: 0; max-width: 100%; display: block; } /* 旧ページは横幅いっぱいのセクションを前提にしている。 2026の版面（--shell 1260px）には合わせない。 */ #contents section { display: block; } /* ----------------------------------------------------------- フロートの回り込み解除（旧 frame.css の要） 2017年のレイアウトは float の2段組みで組まれている。 frame.css がまとめてクリアフィックスを当てていたので、 これが無いとセクションの高さが潰れ、中身が次のセクションに重なる。 実際、これを入れる前は SCT1 が本文836字あるのに高さ80pxまで潰れていた。 元の指定： #header:after, .cont:after, .pack:after, .set:after, .box:after, .block:after, section:after { … clear:both … } ----------------------------------------------------------- */ #contents section::after, #contents .cont::after, #contents .pack::after, #contents .set::after, #contents .box::after, #contents .block::after, #contents .inner::after, #contents .list::after, #contents .head::after { /* 元は content:"." だったが、その1文字ぶんの行ボックスが scrollHeight を29px押し上げるので空文字にした。回り込み解除の効きは同じ。 */ content: ""; display: block; height: 0; clear: both; } /* 改行の出し分け。旧 frame.css と同じ 768px 境界。 */ #contents br.sp { display: block; } #contents br.pc { display: none; } @media (min-width: 768px) { #contents br.sp { display: none; } #contents br.pc { display: block; } } /* ----------------------------------------------------------- スクロール演出 旧実装は jQuery の scrollEvent() が .fadeElm / .activeView を付け外ししていた。 共通CSSの .rv は使わない。あれは「JSが .in を付けるまで opacity:0」という 作りなので、何かの理由で JS が走らないと**本文が丸ごと消える**。 このページは1セクションが1,500〜3,000pxあり、消えたときの被害が大きい。 そこで既定は「表示」にしておき、JSが動いたときだけ に .sp-anim が付いて隠れる、という順番にしている。 ページ末尾のスクリプトが3秒後には必ず全部表示する保険も入れてある。 ----------------------------------------------------------- */ #contents section.fade { opacity: 1; } html.sp-anim #contents section.fade { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); } html.sp-anim #contents section.fade.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html.sp-anim #contents section.fade { opacity: 1; transform: none; } }