@charset "UTF-8"; /* * 移行してきた本文の中に残る横送りの器（ul.bxslider）の見た目（Issue #2699）。 * * 組み立ては assets/js/legacy-bxslider.js が行い、最後に器へ is-bxslider-ready を * 付ける。このファイルの指定は、その印が付いているときだけ効く。よって * JavaScript が動かない環境では写真が縦に並ぶだけで、隠れて読めなくなる中身は * 1 つも無い。移行元も bxSlider が動かなければ同じ見え方になる。 * * 内側の名前（bx-wrapper / bx-pager / bx-pager-item / bx-pager-link / * bx-controls-direction / bx-prev / bx-next）は、移行元 bxSlider が組み立てる * 名前をそのまま使っている。移行元のページ別 CSS はこの名前に対して書かれて * いるためで、/research/ のページ別 CSS を移す別区画の作業がそのまま効く。 * * 【移行元 bxSlider との作りの違い】 * 移行元は帯（ul.bxslider）を transform で横へずらして送る。ここでは窓 * （ul.bxslider 自身）の横スクロールと吸着（scroll-snap）で送る。 * assets/css/legacy-slider.css・assets/css/legacy-swiper.css と同じ考え方である。 * * 【器の幅と高さについて】 * このファイルは器の中の組み方（1 度に 1 枚・矢印・丸い印）だけを扱う。移行元 * #research #slider { width: 1100px; } にあたる幅の指定は、/research/ の * ページ別 CSS を移す別区画の作業が持つ。ここで幅を決めると、その作業と重複 * したときにどちらが有効かが分かりにくくなるため、あえて指定していない。 */ /* --- 窓（ul.bxslider）--------------------------------------------------- */ .bxslider.is-bxslider-ready { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; margin: 0; padding: 0; list-style: none; /* * スクロールバーは隠す。移行元は transform で送るためスクロールバーが出ず、 * 出したままにすると器の高さが移行元より数ピクセル高くなる。隠しても、指・ * ホイール・矢印キー・送りボタンで送れる. */ -ms-overflow-style: none; scrollbar-width: none; } .bxslider.is-bxslider-ready::-webkit-scrollbar { display: none; } /* 1 枚（li）。移行元は minSlides: 1 / maxSlides: 1 で、窓の幅いっぱいに 1 枚だけ 見せる。中身の固有の大きさに任せると、写真の大きさで同時に見える枚数が 変わるため、窓の幅を明示する. */ .bxslider.is-bxslider-ready > li { flex: 0 0 100%; scroll-snap-align: start; list-style: none; } @media (prefers-reduced-motion: reduce) { .bxslider.is-bxslider-ready { scroll-behavior: auto; } } /* --- 入れ物（bx-wrapper）------------------------------------------------ */ /* 前後の矢印・丸い印の位置の基準になる。JavaScript が組み立てるまで存在しない ため、印での出し分けは不要である. 下の外余白 60px は jquery.bxslider.css の .bx-wrapper（版 19f499fe3・ 17〜22 行・`margin: 0 auto 60px;`）をそのまま写した。絶対配置にした丸い印 （下を参照）は器の外へ沈めて描くため、この余白が無いと後続の内容と重なる （レビュー指摘）。印そのものの大きさ（内余白 20px + 高さ 6px）は画面幅で 変わらないため、この余白の値も画面幅で変えていない. */ .bx-wrapper { position: relative; margin: 0 auto 60px; } /* 🚨 訂正（レビュー指摘）: jquery.bxslider.css の同じ規則（版 19f499fe3・ * 24〜27 行）は次の 2 行だったが、display: block を写し漏らしていた。 * * .bx-wrapper img { * max-width: 100%; * display: block; * } * * max-width: 100% はテーマの共通規則（main.css の img { max-width: 100%; * height: auto; }）がすでに与えているため、ここでは display: block だけを * 足せば足りる。display を指定しないと img は既定のインライン要素のままで、 * 文字の行として扱われ、ベースラインの下に文字の下端ぶんの隙間ができる * （main.css の 631 行あたりの img の縦揃えの節を参照。/research/ はこの * 隙間を消す vertical-align: bottom の対象ページに含まれない）。この隙間が * 器（.bx-wrapper）の高さに上乗せされ、幅 1440px で受入基準の 310px より * 数 px 高くなり、狭い画面では写真とその下の帯（box_caption）の間にも * 隙間ができる。display: block はインライン扱いをやめさせ、この隙間を消す. */ .bx-wrapper img { display: block; } /* --- 前後の矢印（bx-controls-direction）-------------------------------- */ /* * 移行元の共通の見た目（jquery.bxslider.css）は、矢印を画像スプライト * （images/controls02.png）で描く。移行してきたページはその画像を持たないため、 * ここでは白い丸の上に濃い矢印を描く。大きさは 40 × 40px で、押す的として * 十分な広さがある（assets/css/legacy-slider.css・assets/css/legacy-swiper.css と * 同じ値にそろえた）. * * 【レビュー指摘の確認】ここはすでに絶対配置である * （jquery.bxslider.css の .bx-wrapper .bx-controls-direction a も * position: absolute; top: 50%; と絶対配置なので前提は同じ）。器の高さ * （写真の 310px）に矢印の高さは加算されない. */ .bx-controls-direction .bx-prev, .bx-controls-direction .bx-next { position: absolute; inset-block-start: 50%; z-index: 2; display: flex; align-items: center; justify-content: center; inline-size: 40px; block-size: 40px; margin-block-start: -20px; border: 0; border-radius: 50%; background: rgb(255 255 255 / 90%); box-shadow: 0 0 4px rgb(0 0 0 / 20%); color: #333; cursor: pointer; } .bx-controls-direction .bx-prev { inset-inline-start: 8px; } .bx-controls-direction .bx-next { inset-inline-end: 8px; } /* 矢印の形。文字ではなく罫線で描くので、書体に左右されない. */ .bx-controls-direction .bx-prev::before, .bx-controls-direction .bx-next::before { content: ""; inline-size: 10px; block-size: 10px; border-block-start: 2px solid currentcolor; border-inline-end: 2px solid currentcolor; } .bx-controls-direction .bx-prev::before { transform: rotate(-135deg); margin-inline-start: 4px; } .bx-controls-direction .bx-next::before { transform: rotate(45deg); margin-inline-end: 4px; } .bx-controls-direction .bx-prev:focus-visible, .bx-controls-direction .bx-next:focus-visible { outline: 2px solid #333; outline-offset: 2px; } /* * --- QOM総研の一覧だけ、移行元と同じ画像で描く（Bug #8271）----------------- * * 移行元は**幅で別の CSS を読み、別の画像を使う**。 * * | 幅 | 移行元が読む CSS | 画像 | 大きさ | 上端 | * |---|---|---|---|---| * | パソコン | `js/bxslider02/jquery.bxslider.css` | `controls02.png`（スプライト） | 40 × 40 | `top: 50%` | * | 携帯 | `sp/js/bxslider/jquery.bxslider.css` | `arrow_prev.jpg` / `arrow_next.jpg` | 20 × 20 | `top: 15%` | * * 画像は移行元の写しから運んだ（`assets/images/research/controls02.png` と * `assets/images/research/sp/arrow_prev.jpg` / `arrow_next.jpg`。移行元リポジトリの * HEAD `25cf8dcdd` と md5 が一致する）。**CSS の背景の画像は本文の投入では届かない**ので、 * テーマの資材として置くほかない。 * * 🚨🚨 **当たり先を QOM総研に絞る。**この資材は `.bxslider` を持つ投稿すべて * （`pa_has_legacy_bxslider()`）に配られ、さらに `inc/ad-lp-frame.php` の * `PA_AD_LP_COMMON_HANDLES` が**広告 LP の全ページ**へ配る。**移行元にも横送りを持つ * 広告 LP が 2 ページある**（`ad/koriyama/index.html`・`ad/main/index.html`）。 * そちらは**自分の別の画像**（`static/css/jquery.bxslider.css` が指す `controls.png`）で * 矢印を描くので、絞らないと巻き込む。 * * 🚨 **数えるときは include の中も数える。**はじめ `class="bxslider"` を `.html` だけで * 数えて「広告 LP に横送りは無い」と読み違えた。移行元は SSI の `.shtml` や PHP の * `include` で部品を配るので、拡張子を絞ると取りこぼす。 * * 🚨 **上の既定（白い丸に罫線の矢印）は残す。**絞ったぶん、QOM総研以外の横送りは * 今までどおりその見た目で出る。 * * 🚨 **`