@charset "UTF-8"; /* Template: swell Theme Name: SWELL CHILD Theme URI: https://swell-theme.com/ Description: SWELLの子テーマ Version: 1.0.0 Author: LOOS WEB STUDIO Author URI: https://loos-web-studio.com/ License: GNU General Public License License URI: http://www.gnu.org/licenses/gpl.html */ /* ============================================================ BLST CSS MAP — このファイルの役割（2026-09-20） ここに書くもの 記事本文の中身。表の折り返し、目次、診断ツールなど。 .post_content 配下に閉じられるものは全部こちら。 !important は使わない。使わないと勝てないなら、 それはテーマ側の指定なので置き場所が違う（下記）。 ここに書かないもの ヘッダー・スマホメニュー・著者ボックス・サイドバー目次。 SWELLが にインラインで出すCSSに勝てないため、 カスタマイザー > 追加CSS に置いてある（!important 付き）。 WordPress管理画面 > 外観 > カスタマイズ > 追加CSS 先頭に区画の一覧がある。 ショートコードの部品は wp-content/plugins/blst-vpn-ssr/css/styles.php ============================================================ */ /* ===================================================== 2026-09-18 スマホでの表・目次の折り返しを読みやすく ===================================================== */ /* 語の途中で折り返さない。 SWELL は td,th に word-break:break-all を当てており、そのままだと 「NordVPN」が「NordVP / N」、「580円」が「58 / 0円」のように割れる。 auto-phrase は未対応ブラウザ（iOS Safari など）では無視され、 SWELL の break-all がそのまま効いてしまうので、normal を明示する。 1語が列幅に収まらないときだけ break-word で折る。 */ /* WordPress標準（.wp-block-table .has-fixed-layout td）と SWELL（td,th）の 両方に勝つ必要があるため、テーブル側は1段深いセレクタで指定する。 */ .post_content table th, .post_content table td, .post_content .wp-block-table table th, .post_content .wp-block-table table td, .p-toc__link, .p-toc__text { word-break: normal; overflow-wrap: break-word; line-break: strict; text-wrap: pretty; } /* 対応ブラウザでは、さらに文節で折り返す */ @supports (word-break: auto-phrase) { .post_content table th, .post_content table td, .post_content .wp-block-table table th, .post_content .wp-block-table table td, .p-toc__link, .p-toc__text { word-break: auto-phrase; } } /* 表：スマホでは列幅を内容に合わせ、文字を少し小さく */ @media (max-width: 600px) { .post_content .wp-block-table table, .post_content .wp-block-table table.has-fixed-layout { table-layout: auto; font-size: .86em; } .post_content .wp-block-table th, .post_content .wp-block-table td { padding: .5em .6em; line-height: 1.6; } /* 2026-09-20: ここには中央寄せセルの white-space:nowrap を入れていたが、 table-layout:auto と組み合わさると、折り返さない列が幅を取り切って 他の列が28pxまで潰れ、1文字ずつ縦に折り返していた。削除した。 （td への min-width はブラウザが無視するので、代わりにはならない） */ } /* 目次：長い見出しでも1文字だけ折り返さない */ .p-toc__link { text-align: left; } /* 本文のアイコン: base64のSVGを記事本文に何度も埋め込まずに、ここで一度だけ定義する（2026-09-18） */ .swl-inline-icon[data-icon="LsCaretRight"] { --the-icon-svg: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjFlbSIgd2lkdGg9IjFlbSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBhcmlhLWhpZGRlbj0idHJ1ZSIgdmlld0JveD0iMCAwIDQ4IDQ4Ij48cGF0aCBkPSJNMTkuNCAzOC4zIDMyLjcgMjVjLjYtLjYuNi0xLjUgMC0yLjFMMTkuNCA5LjZjLS45LS45LTIuNi0uMy0yLjYgMS4xdjI2LjVjMCAxLjQgMS42IDIuMSAyLjYgMS4xeiI+PC9wYXRoPjwvc3ZnPg==); } .swl-inline-icon[data-icon="LsStarFull"] { --the-icon-svg: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjFlbSIgd2lkdGg9IjFlbSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBhcmlhLWhpZGRlbj0idHJ1ZSIgdmlld0JveD0iMCAwIDQ4IDQ4Ij48cGF0aCBkPSJtMjQuOSAxLjkgNiAxMy45TDQ2IDE3LjJjLjkuMSAxLjIgMS4yLjYgMS44TDM1LjIgMjlsMy4zIDE0LjhjLjIuOS0uNyAxLjYtMS41IDEuMWwtMTMtNy42TDEwLjkgNDVjLS44LjUtMS43LS4yLTEuNS0xLjFsMy4zLTE0LjgtMTEuNC0xMGMtLjctLjYtLjMtMS43LjYtMS44TDE3IDE1LjkgMjMgMmMuNC0uOSAxLjYtLjkgMS45LS4xeiI+PC9wYXRoPjwvc3ZnPg==); } .swl-inline-icon[data-icon="LsStarEmpty"] { --the-icon-svg: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjFlbSIgd2lkdGg9IjFlbSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBhcmlhLWhpZGRlbj0idHJ1ZSIgdmlld0JveD0iMCAwIDQ4IDQ4Ij48cGF0aCBkPSJtMjQgMTAgMy4yIDcuNSAxIDIuMiAyLjQuMiA4LjEuOC02LjEgNS40LTEuOCAxLjYuNSAyLjQgMS44IDcuOS03LTQuMS0yLjEtMS4zLTIuMSAxLjItNyA0LjEgMS44LTcuOS41LTIuNC0xLjgtMS42LTYuMS01LjQgOC4xLS44IDIuNC0uMiAxLTIuMkwyNCAxMG0wLTguN2MtLjQgMC0uOC4yLS45LjZsLTYgMTMuOS0xNS4yIDEuNWMtLjkuMS0xLjIgMS4yLS42IDEuOGwxMS40IDEwLTMuMyAxNC44Yy0uMi43LjQgMS4yIDEgMS4yLjIgMCAuMyAwIC41LS4xTDI0IDM3LjMgMzcuMSA0NWMuMi4xLjMuMS41LjEuNiAwIDEuMS0uNiAxLTEuMmwtMy4zLTE0LjggMTEuNC0xMGMuNy0uNi4zLTEuNy0uNi0xLjhMMzEgMTUuOSAyNSAyYy0uMi0uNS0uNi0uNy0xLS43eiI+PC9wYXRoPjwvc3ZnPg==); } .swl-inline-icon[data-icon="PhArrowRightFill"] { --the-icon-svg: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjFlbSIgd2lkdGg9IjFlbSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBhcmlhLWhpZGRlbj0idHJ1ZSIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxyZWN0IHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2IiBmaWxsPSJub25lIj48L3JlY3Q+PHBhdGggZD0iTTIyMS43LDEzMy43bC03Miw3MkE4LjMsOC4zLDAsMCwxLDE0NCwyMDhhOC41LDguNSwwLDAsMS0zLjEtLjZBOCw4LDAsMCwxLDEzNiwyMDBWMTM2SDQwYTgsOCwwLDAsMSwwLTE2aDk2VjU2YTgsOCwwLDAsMSw0LjktNy40LDguNCw4LjQsMCwwLDEsOC44LDEuN2w3Miw3MkE4LjEsOC4xLDAsMCwxLDIyMS43LDEzMy43WiI+PC9wYXRoPjwvc3ZnPg==); } .swl-inline-icon[data-icon="LsArrowCircleRight"] { --the-icon-svg: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjFlbSIgd2lkdGg9IjFlbSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBhcmlhLWhpZGRlbj0idHJ1ZSIgdmlld0JveD0iMCAwIDQ4IDQ4Ij48cGF0aCBkPSJNMjQgNDVDMTIuNCA0NSAzIDM1LjYgMyAyNFMxMi40IDMgMjQgM3MyMSA5LjQgMjEgMjEtOS40IDIxLTIxIDIxem0wLTM5QzE0LjEgNiA2IDE0LjEgNiAyNHM4LjEgMTggMTggMTggMTgtOC4xIDE4LTE4UzMzLjkgNiAyNCA2eiI+PC9wYXRoPjxwYXRoIGQ9Im0zNC4zIDIyLjktOC44LTguOGMtLjYtLjYtMS41LS42LTIuMSAwcy0uNiAxLjUgMCAyLjFsNi4zIDYuM0gxNC44Yy0uOCAwLTEuNS43LTEuNSAxLjVzLjcgMS41IDEuNSAxLjVoMTQuOGwtNi4zIDYuM2MtLjYuNi0uNiAxLjUgMCAyLjFzMS41LjYgMi4xIDBsOC44LTguOGMuNy0uNi43LTEuNi4xLTIuMnoiPjwvcGF0aD48L3N2Zz4=); } .swl-inline-icon[data-icon="LsStarHalf"] { --the-icon-svg: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjFlbSIgd2lkdGg9IjFlbSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBhcmlhLWhpZGRlbj0idHJ1ZSIgdmlld0JveD0iMCAwIDQ4IDQ4Ij48cGF0aCBkPSJNNDYuMSAxNy4zIDMxIDE1LjkgMjUgMmMtLjItLjQtLjYtLjYtLjktLjYtLjQgMC0uOC4yLS45LjZsLTYgMTMuOS0xNS4zIDEuNGMtLjkuMS0xLjIgMS4yLS42IDEuOGwxMS40IDEwLTMuMyAxNC44Yy0uMi43LjQgMS4yIDEgMS4yLjIgMCAuMyAwIC41LS4xTDI0IDM3LjMgMzcuMSA0NWMuMi4xLjMuMS41LjEuNiAwIDEuMS0uNiAxLTEuMmwtMy4zLTE0LjggMTEuNC0xMGMuNi0uNi4zLTEuNy0uNi0xLjh6bS0xMy41IDguOC0xLjggMS42LjUgMi40IDEuOCA3LjktNy00LjEtMi4xLTEuM1YxMGwzLjIgNy41IDEgMi4yIDIuNC4yIDguMS44LTYuMSA1LjR6Ij48L3BhdGg+PC9zdmc+); } .swl-inline-icon[data-icon="PhArrowFatRightFill"] { --the-icon-svg: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjFlbSIgd2lkdGg9IjFlbSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBhcmlhLWhpZGRlbj0idHJ1ZSIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxyZWN0IHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2IiBmaWxsPSJub25lIj48L3JlY3Q+PHBhdGggZD0iTTEzMi45LDIzMS40QTgsOCwwLDAsMSwxMjgsMjI0VjE4NEg0OGExNiwxNiwwLDAsMS0xNi0xNlY4OEExNiwxNiwwLDAsMSw0OCw3Mmg4MFYzMmE4LDgsMCwwLDEsNC45LTcuNCw4LjQsOC40LDAsMCwxLDguOCwxLjdsOTYsOTZhOC4xLDguMSwwLDAsMSwwLDExLjRsLTk2LDk2QTguNCw4LjQsMCwwLDEsMTMyLjksMjMxLjRaIj48L3BhdGg+PC9zdmc+); } /* 色付き文字（mark）の背景。以前は1か所ずつ style="background-color:rgba(0,0,0,0)" が書かれていた（2026-09-18） */ .post_content mark.has-inline-color { background-color: transparent; } /* ------------------------------------------------------------------ 記事内で繰り返し使うCTA・囲み（2026-09-18） 以前は記事ごとに style="..." を直接書いていた。文面を直すときは ここ1か所を変えれば全記事に反映される。 ------------------------------------------------------------------ */ /* 濃紺のCTA */ .post_content .blst-cta { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); border-radius: 12px; padding: 24px; margin: 32px 0; text-align: center; } .post_content .blst-cta__badge { display: inline-block; background: rgba(78, 205, 196, .2); border: 1px solid #4ecdc4; color: #4ecdc4; font-size: 12px; padding: 4px 12px; border-radius: 20px; margin: 0 0 12px; } .post_content .blst-cta__title { color: #fff; font-size: 22px; margin: 0 0 12px; font-weight: bold; } .post_content .blst-cta__text { color: #fff; font-size: 14px; margin: 0 0 8px; } .post_content .blst-cta__lead { color: #ccc; font-size: 14px; margin: 0 0 16px; } .post_content .blst-cta__btn { display: inline-block; background: #4ecdc4; color: #1a1a2e; padding: 14px 32px; border-radius: 8px; text-decoration: none; font-weight: bold; font-size: 16px; border: none; } .post_content .blst-cta__note { color: #64748b; font-size: 12px; margin: 12px 0 0; } /* 青枠のCTA */ .post_content .blst-ctab { background: #f5f8ff; border: 2px solid #2b5fd9; border-radius: 12px; padding: 20px; margin: 32px 0; box-sizing: border-box; } .post_content .blst-ctab__title { font-weight: bold; font-size: 16px; margin: 0 0 10px; color: #1c3f94; } .post_content .blst-ctab__item { margin: 0 0 6px; font-size: 14px; line-height: 1.7; } .post_content .blst-ctab__item--last { margin-bottom: 14px; } .post_content .blst-ctab__btn { display: inline-block; background: #2b5fd9; color: #fff; padding: 14px 28px; border-radius: 8px; text-decoration: none; font-weight: bold; font-size: 15px; } .post_content .blst-ctab__note { margin: 10px 0 0; font-size: 12px; color: #666; line-height: 1.6; } /* 薄いグレーの囲み */ .post_content .blst-panel { background: #f8f9fa; border-radius: 12px; padding: 24px; margin: 32px 0; } .post_content .blst-panel__title { font-weight: bold; font-size: 16px; margin: 0 0 20px; text-align: center; color: #1e293b; } /* 補助 */ .post_content .blst-center { text-align: center; } .post_content .blst-scroll { overflow-x: auto; margin: 24px 0; -webkit-overflow-scrolling: touch; } /* ============================================================ 表のアイコン付きセル（2026-09-20） SWELL のセルアイコンは2種類ある。 obj … アイコンと文字が横に並ぶ（✓あり / ✗なし） bg … 幅ゼロの span を置き、文字の背後に大きなアイコンを敷く bg のほうは、2〜4文字の短いラベルだと◯の中に文字が詰まって読みにくく、 行の高さも obj の行と揃わない。表の中で2種類の見え方が混在するのも 比較表として良くない。そこで bg も obj と同じ「アイコン＋文字」に揃える。 触っているのは見た目だけで、記事の中身は変えていない。 元に戻したいときはこのブロックを消せばよい。 ============================================================ */ /* obj: text-indent が負の値で、アイコンと文字が重なっていた */ .post_content .swl-cell-bg[data-icon-type="obj"] { text-indent: 0; gap: .3em; } /* bg: 幅ゼロの背景アイコン → 文字の左に並ぶ普通のアイコンにする */ .post_content .swl-cell-bg[data-icon-type="bg"] { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -.22em; margin-right: .28em; } .post_content .swl-cell-bg[data-icon-type="bg"]::after { position: static; display: block; left: auto; top: auto; width: 100%; height: 100%; opacity: 1; z-index: 0; mask-size: contain; mask-position: center center; -webkit-mask-size: contain; -webkit-mask-position: center center; } /* 背後に敷かなくなったので、文字を浮かせるための影は不要。行の高さも揃える */ .post_content [data-has-cell-icon*="-bg"] { text-shadow: none; padding-top: .7em; padding-bottom: .7em; } /* ============================================================ VPN診断ツールの選択肢（2026-09-20） 絵文字が block で見出しの上に積まれるため、1択あたり146pxあった。 6択で876px、Q1だけでスマホ1.5画面分のスクロールになっていた。 絵文字を左に置き、見出しと説明を右に重ねる形にして高さを半分にする。 PCでは元のカード型のままにするので、スマホ幅にだけ当てる。 ============================================================ */ @media (max-width: 600px) { .diagnosis-container .options-grid { grid-template-columns: 1fr; gap: 8px; } .diagnosis-container .option-btn { padding: 11px 14px; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; line-height: 1.5; } /* 絵文字は2行ぶんをまたいで左に置く */ .diagnosis-container .option-icon { font-size: 21px; line-height: 1; margin: 0; grid-row: 1 / 3; align-self: center; } .diagnosis-container .option-label { grid-column: 2; font-size: 14px; line-height: 1.4; } .diagnosis-container .option-desc { grid-column: 2; font-size: 11.5px; line-height: 1.45; color: #9aa4b2; } /* 「海外コンテン / ツ」のようにカタカナ語の途中で折れないようにする。 keep-all は日本語の文字同士では折らず、読点や空白では折る。 どうしても収まらない語だけ overflow-wrap:anywhere で折る。 */ .diagnosis-container .option-label, .diagnosis-container .option-desc { word-break: keep-all; overflow-wrap: anywhere; } }