/* PropFirmJP独自の補助パーツ用CSS(2026-08-26)。MIKIWAMERU本家に存在しないパーツ (パンくず/目次/リスク注意書き/公式情報源リスト/モバイル固定CTA/PR開示)を、 mk-exact-tokens.css/mk-exact-v2article.cssと同じソフトピンクのトーンで最小限に整える。 本家の構造(hero/mk-band等)には一切触れない、追加分のみ。 */ .pfj-breadcrumb{ padding:14px 0 0; font-size:0.95rem; color:var(--ink-soft); } .pfj-breadcrumb ol{ display:flex; flex-wrap:wrap; align-items:center; gap:0; margin:0; padding:0; list-style:none; } .pfj-breadcrumb li{ display:flex; align-items:center; } .pfj-breadcrumb li:not(:last-child)::after{ content:"/"; margin:0 6px; color:var(--pale2); } .pfj-breadcrumb a{ color:var(--ink-soft); } .pfj-breadcrumb a:hover{ color:var(--accent); } .pfj-breadcrumb [aria-current="page"]{ color:var(--ink); font-weight:700; } .pfj-ad-disclosure{ font-size:0.95rem; color:var(--ink2); background:var(--pale); border-radius:var(--r-md); padding:10px 14px; margin:16px 0; max-width:44em; } .pfj-grid{ display:grid; grid-template-columns:1fr; gap:32px; padding-top:8px; } .pfj-toc{ display:none; } @media (min-width:980px){ .pfj-toc{ display:block; position:sticky; top:16px; align-self:start; border-left:2px solid var(--pale2); padding:0 0 0 18px; } .pfj-toc-label{ font-size:0.95rem; font-weight:800; color:var(--ink-soft); letter-spacing:.04em; margin-bottom:12px; } .pfj-toc ol{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; } .pfj-toc a{ display:block; padding:7px 4px; font-size:0.95rem; font-weight:600; color:var(--ink-soft); } .pfj-toc a:hover{ color:var(--accent); } .pfj-grid{ display:grid; grid-template-columns:200px minmax(0,1fr); gap:44px; } } .pfj-risk-note{ background:var(--risk-bg); border:1px solid var(--risk-line); border-radius:var(--r-md); padding:18px 22px; } .pfj-risk-note strong{ color:var(--risk-ink); display:block; margin-bottom:6px; } .pfj-risk-note p{ margin:0; font-size:0.95rem; color:var(--risk-ink); line-height:1.8; } .pfj-source-list{ margin-top:36px; background:var(--paper-raise); border:1px solid var(--pale2); border-radius:var(--r-md); padding:16px 18px; font-size:0.95rem; color:var(--ink-soft); } .pfj-source-list h2{ font-size:0.95rem; font-weight:800; color:var(--ink); margin:0 0 10px; } .pfj-source-list ul{ margin:0; padding-left:1.2em; } .pfj-source-list a{ color:var(--link); } .pfj-firm-cta-note{ font-size:0.95rem; color:var(--ink-soft); margin-top:8px; } .pfj-sticky-cta{ position:fixed; left:14px; right:14px; bottom:14px; z-index:70; display:none; align-items:center; justify-content:space-between; gap:10px; background:var(--ink); color:#fff; border-radius:var(--r-sm); padding:12px 10px 12px 18px; box-shadow:0 12px 30px rgba(61,36,48,.3); } .pfj-sticky-cta span{ font-size:0.95rem; font-weight:700; } @media (max-width:760px){ .pfj-sticky-cta{ display:flex; } } /* 2026-08-27バグ修正: mk-exact-v2article.cssの`.mk-article h1,h2,h3{color:var(--ink)}`が heroの背景色(同じvar(--ink))と一致し、hero内のh1が見えなくなる。hero-kicker/leadは個別に 明るい色を指定済みでこの問題を回避できていたが、h1だけ指定漏れだった。最小修正として上書き。 */ .mk-article .hero h1{ color:#fff; } /* ------------------------------------------------------------------ 見出し・リードの折り返し位置（2026-09-11追加、CONTENT_STYLE_RULES 7-A） 日本語は単語の間に空白が無いため、既定では文字単位で折り返され、 助詞が行頭に落ちたり単語の途中で切れたりする。auto-phrase で文節の 切れ目に寄せる（Chrome・Edgeが対応。未対応のブラウザは従来どおりに戻るだけ）。 英語は balance で各行の長さを揃え、最終行に単語がひとつだけ残る形を避ける。 記事の本文（single）には .pfjp-scope が付かないので、接頭辞を付けない。 付けるとトップページにしか効かない（2026-09-11に実際にそれで外した）。 ------------------------------------------------------------------ */ .mk-article .hero h1, .mk-article .hero .lead, .mk-article .mk-h2 .jp, .mk-article .mk-faq .q, .mk-article .mk-tablecard th, .pfjp-scope h1, .pfjp-scope h2, .pfjp-scope h3, .pfjp-scope .pf-cmp .pf-swbtn{ word-break:auto-phrase; line-break:strict; overflow-wrap:break-word; text-wrap:balance; } /* 2026-09-12: 記事のヒーローが左右に32pxずつはみ出していた件。 .mk-article .hero は margin:0 -32px で外側へ広げる作りだが、 親の .mk-article に32pxの内側余白が無いため、全ての画面幅で 右へ32pxはみ出して横スクロールが出ていた（73本の記事すべてで発生）。 親と同じ幅に揃える。見た目はほぼ変わらず、はみ出しだけ消える。 */ .mk-article .hero{margin-left:0;margin-right:0} /* 2026-09-12: 「秒でわかる」12本でも同じはみ出しが出ていた。 本文の中に書かれた .sw-hero と .sw-cta が margin:0 -32px で外へ広がるが、 親に32pxの内側余白が無いため右へ32pxはみ出す。記事の本文には触らず、 セレクタの強さで上書きする（body を足すと本文内の指定より強くなる）。 */ body .mk-article .sw-hero, body .mk-article .sw-cta{margin-left:0;margin-right:0} /* 2026-09-12: 用語集の並びが狭い画面ではみ出していた件。 grid-template-columns:repeat(auto-fit,minmax(330px,1fr)) は、 画面が330pxに近いときに列の最小幅が画面を超えてしまう。 minmax の下限を min(330px,100%) にすると、狭いときは画面幅まで縮む。 */ body .mk-article .gl-grid{grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr))} /* 用語集の本当の原因。.gl-layout はグリッドで、その中の子要素は 既定の min-width:auto のせいで中身の最小幅（802px）より小さくなれない。 min-width:0 を与えると親の幅まで縮み、中の並びも1列へ落ちる。 */ body .mk-article .gl-layout > *{min-width:0} /* 2026-09-12（本人指摘）: 表のすぐ下に置いた注記の文字が、上半分だけ隠れていた件。 .mk-tablecard は position:relative + z-index:1 で描かれるのに対し、 直後の注記は上マージンが -8px のため、カードの下へ8px潜り込んでいた。 注記は本文側でインラインの style を持つので !important で打ち消す。 */ body .mk-article .mk-tablecard + p, body .mk-article .mk-tablecard + .mk-scroll-hint + p{margin-top:10px!important} /* 2026-09-12（本人指摘）: 本文のリンクが押せると分からない件。 .mk-article a は色を継承して下線も消す指定なので、本文の中だけ上書きする。 対象は段落・箇条書き・表のセル・FAQの答え。カード型のリンク（.mk-related）は対象外。 色は --brand-deep(#BE4470)。白背景で4.94:1、ホバー時は白文字で4.94:1（どちらもAA以上）。 */ body .mk-article main p a, body .mk-article main li a, body .mk-article main td a{ color:var(--brand-deep); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color:rgba(190,68,112,.45); border-radius:4px; transition:color .15s ease, background-color .15s ease, text-decoration-color .15s ease; } body .mk-article main p a:hover, body .mk-article main li a:hover, body .mk-article main td a:hover, body .mk-article main p a:focus-visible, body .mk-article main li a:focus-visible, body .mk-article main td a:focus-visible{ color:#ffffff; background:var(--brand-deep); text-decoration-color:transparent; box-shadow:0 0 0 2px var(--brand-deep); } /* 表のセルの中は行が詰まっているので、下線を少し近づける */ body .mk-article main td a{text-underline-offset:2px} /* 2026-09-12（本人指摘）: 文章のかたまりが白いカードにならず、 地の文が帯の上に流れてペンギンと重なっていた。.mk-card に定義が無かったため。 見た目は .mk-tablecard にそろえる。 */ body .mk-article .mk-card{ background:var(--paper-raise); border:1px solid var(--paper-line); border-radius:var(--r-md); box-shadow:0 2px 3px rgba(32,32,80,.07),0 10px 20px rgba(32,32,80,.1); padding:28px 32px; margin-top:48px; position:relative; z-index:1; } body .mk-article .mk-card > *:first-child{margin-top:0} body .mk-article .mk-card > *:last-child{margin-bottom:0} body .mk-article .mk-card p{margin:0 0 14px;line-height:1.95} body .mk-article .mk-card p:last-child{margin-bottom:0} /* 本文の箇条書き。既定のままだと行頭が詰まって読みにくい。 */ body .mk-article .mk-card ul, body .mk-article .mk-card ol{margin:0;padding-left:0;list-style:none} body .mk-article .mk-card li{ position:relative; padding:12px 0 12px 26px; border-bottom:1px solid var(--paper-line); line-height:1.9; } body .mk-article .mk-card li:last-child{border-bottom:none;padding-bottom:0} body .mk-article .mk-card li::before{ content:""; position:absolute; left:6px; top:1.25em; width:8px;height:8px;border-radius:50%; background:var(--brand); } body .mk-article .mk-card li strong{display:block;margin-bottom:2px} @media (max-width:820px){ body .mk-article .mk-card{padding:22px 20px;margin-top:36px} } /* 表の中で同じ項目が縦に続くとき、1つの枠にまとめる（functions.php の pfjp_merge_table_rows が rowspan を付ける）。まとまりの境目を太めの線で示す。 */ body .mk-article .mk-tablecard td.-group{ vertical-align:middle; font-weight:700; background:var(--brand-pale); border-bottom:2px solid var(--paper-line); } body .mk-article .mk-tablecard tr.-groupstart > td{border-top:2px solid var(--paper-line)} body .mk-article .mk-tablecard tbody tr:first-child > td{border-top:none} /* 表のセルは折り返す。長い値が1行で伸びて横スクロールを増やさないように。 */ body .mk-article .mk-tablecard td, body .mk-article .mk-tablecard th{word-break:auto-phrase;overflow-wrap:anywhere} /* 2026-09-12（点検で発見）: スマホで表の2列目が1文字も見えない表があった。 1列目に上限を付けて折り返させ、右端に影を出して続きがあることを示す。 */ @media (max-width:600px){ body .mk-article .mk-tablecard td:first-child, body .mk-article .mk-tablecard th:first-child{ max-width:38vw; word-break:auto-phrase; overflow-wrap:anywhere; } body .mk-article .mk-tablecard td, body .mk-article .mk-tablecard th{padding:14px 16px} } /* 横に続きがあることを右端の影で示す。スクロールしきると消える。 */ body .mk-article .mk-tablecard{ background-image: linear-gradient(to right, var(--paper-raise) 30%, rgba(254,248,250,0)), linear-gradient(to right, rgba(254,248,250,0), var(--paper-raise) 70%), linear-gradient(to right, rgba(190,68,112,.18), rgba(190,68,112,0)), linear-gradient(to left, rgba(190,68,112,.18), rgba(190,68,112,0)); background-position:0 0, 100% 0, 0 0, 100% 0; background-repeat:no-repeat; background-size:32px 100%, 32px 100%, 14px 100%, 14px 100%; background-attachment:local, local, scroll, scroll; } /* 2026-09-12（点検で発見）: スマホで左右分割が2列のままだった。 .mk-split に狭い画面用の指定が無く、右側の枠が潰れて中のロゴが豆粒になっていた。 本文側がインラインで grid-template-columns を持つため !important で上書きする。 */ @media (max-width:820px){ body .mk-article .mk-split{ grid-template-columns:1fr!important; gap:28px; direction:ltr!important; } body .mk-article .mk-split .txt p{max-width:none} body .mk-article .mk-split .mk-panel{ max-width:360px; width:100%; margin:0 auto; } } /* 2026-09-12（点検で発見）: 「秒でわかる」の見出しの末尾がペンギンに隠れていた。 見出しは中央寄せのまま幅に上限を付け、ペンギンは右端寄りへ寄せる。 ペンギンが出るのは1100pxより広いときだけなので、そこだけ変える。 */ @media (min-width:1101px){ body .mk-article .sw-hero h1{max-width:760px;margin-left:auto;margin-right:auto} body .mk-article .sw-hero .sw-lead{max-width:680px;margin-left:auto;margin-right:auto} body .mk-article .sw-heropg{right:clamp(16px,3vw,80px)} } /* 2026-09-12（点検で発見）: ハブのヒーローで見出しの末尾がペンギンに重なっていた。 ペンギンが出る1320pxより広いときだけ、文章の幅を絞り、絵を右端へ寄せて小さくする。 */ @media (min-width:1321px){ body .mk-article .hero{overflow:hidden} body .mk-article .hero-main h1, body .mk-article .hero-main .lead{max-width:820px;margin-left:auto;margin-right:auto} /* present のポーズは腕を広げていて横幅が440px前後ある。右端から少しはみ出させて、 はみ出した分はヒーローの外へ隠す（はみ出しで横スクロールが出ないよう overflow:hidden）。 */ body .mk-article .mascot-herowrap.-r{right:-60px} body .mk-article .mascot-hero{height:360px} } @media (min-width:1600px){ body .mk-article .mascot-herowrap.-r{right:0} body .mk-article .mascot-hero{height:400px} } /* 2026-09-13（本人指摘・実測で確認）: 文字の色の見直し。 --ink-soft は補足文の大半に効く色だが、4.49〜4.09で基準（4.5:1）をわずかに割っていた。 同じ色相のまま暗くして、paper 5.01 / brand-pale 4.56 / 白 5.26 にした。 */ :root{--ink-soft:#816471} /* .mk-article 側にも同じ名前の定義があるので、そちらも上書きする。 */ body .mk-article{--ink-soft:#816471} /* フッターのブランド名（footer.php にインラインで #fbdce8。ピンク背景で3.88）も白へ。 */ body footer p[style]{color:#ffffff!important} /* フッターは背景がピンク(#BE4470)。元のテンプレートの青灰色が残っていて、 1.56〜3.27しかなかった。白にすると4.94で基準を満たす。 文字の大小と太さで差を付け、色では差を付けない。 */ body footer{color:#ffffff} body footer h4{color:#ffffff;opacity:1} body footer p{color:#ffffff} body footer a{color:#ffffff} body footer a:hover{text-decoration:underline} body .footer-bottom{color:#ffffff} body footer .footer-note, body footer small{color:#ffffff} /* 2026-09-13（本人指摘）: スマホの表。列の数で見せ方を変える。 4列までは文字を小さくして1画面に収める（PCと同じ見た目のまま）。 5列以上は縮めても読めないので、1行を1枚のカードへ積み替える。 列の数は functions.php の pfjp_table_column_class が -cols2〜-cols8 として付ける。 */ @media (max-width:600px){ body .mk-article .mk-tablecard{overflow-x:visible;background-image:none;padding:6px 8px} body .mk-article .mk-scroll-hint{display:none} /* 見出し行（thead）を持たない表は列の数が数えられず、クラスが付かない。 実測で21本あった。既定の min-width が効いたままだと必ずはみ出すので、 4列までと同じ扱いにする。 */ body .mk-article .mk-tablecard:not([class*="-cols"]) table{ min-width:0;width:100%;table-layout:auto;font-size:12px; } body .mk-article .mk-tablecard:not([class*="-cols"]) th, body .mk-article .mk-tablecard:not([class*="-cols"]) td{ padding:8px 6px;line-height:1.7;vertical-align:top;max-width:none; white-space:normal;word-break:auto-phrase;overflow-wrap:break-word; } body .mk-article .mk-tablecard:not([class*="-cols"]) td.-short{white-space:nowrap} /* ---- 4列まで：縮小して収める ---- */ body .mk-article .mk-tablecard.-cols2 table, body .mk-article .mk-tablecard.-cols3 table, body .mk-article .mk-tablecard.-cols4 table{ min-width:0;width:100%;table-layout:auto;font-size:12px; } body .mk-article .mk-tablecard.-cols4 table{font-size:11px} body .mk-article .mk-tablecard.-cols2 th, body .mk-article .mk-tablecard.-cols2 td, body .mk-article .mk-tablecard.-cols3 th, body .mk-article .mk-tablecard.-cols3 td, body .mk-article .mk-tablecard.-cols4 th, body .mk-article .mk-tablecard.-cols4 td{ padding:8px 6px;line-height:1.7;vertical-align:top;max-width:none; white-space:normal;word-break:auto-phrase;overflow-wrap:break-word; } /* 「25,000ドル」「Growth」のような短い値は途中で折り返さない。 4列までなら nowrap にしても画面に収まる（実測）。 */ body .mk-article .mk-tablecard.-cols2 td.-short, body .mk-article .mk-tablecard.-cols3 td.-short, body .mk-article .mk-tablecard.-cols4 td.-short{white-space:nowrap} /* 見出しの語（「割引後（コードSEP）」など）は長くても列幅を決めてしまうので、 どこでも折り返してよいことにする。見出しは短い語なので読みにくくならない。 */ body .mk-article .mk-tablecard thead th{overflow-wrap:anywhere;word-break:auto-phrase} body .mk-article .mk-tablecard.-cols2 td.company, body .mk-article .mk-tablecard.-cols3 td.company, body .mk-article .mk-tablecard.-cols4 td.company{white-space:normal;font-weight:700} body .mk-article .mk-tablecard td.-group{background:var(--brand-pale);vertical-align:middle} /* ---- 5列以上：1行を1枚のカードへ積み替える ---- */ body .mk-article .mk-tablecard.-stack table, body .mk-article .mk-tablecard.-stack table{min-width:0;width:100%;display:block;font-size:12.5px} body .mk-article .mk-tablecard.-stack thead{display:none} body .mk-article .mk-tablecard.-stack tbody{display:block} body .mk-article .mk-tablecard.-stack tbody tr{ display:block;border:1px solid var(--paper-line);border-radius:10px; padding:6px 10px;margin:10px 0;background:var(--paper-raise); } body .mk-article .mk-tablecard.-stack tbody td{ display:grid;grid-template-columns:6.5em 1fr;gap:10px;align-items:start; padding:7px 2px;border-bottom:1px dashed var(--paper-line); max-width:none;white-space:normal;word-break:auto-phrase;overflow-wrap:break-word; } body .mk-article .mk-tablecard.-stack tbody tr td:last-child{border-bottom:none} body .mk-article .mk-tablecard.-stack tbody td::before{ content:attr(data-label);font-size:.84rem;font-weight:700;color:var(--ink-soft);line-height:1.7; } body .mk-article .mk-tablecard.-stack tbody td.company{white-space:normal} /* 短いセルの折り返し禁止（-cols4 td.-short）がカード表示にも効き、長い見出し 「Rapid・Rapid EOD」が値の上に重なった（2026-09-27 実測）。カードでは折り返させる */ body .mk-article .mk-tablecard.-stack tbody td.-short{white-space:normal} body .mk-article .mk-tablecard.-stack tbody td.-group{ display:block;background:var(--brand-pale);border-radius:8px;margin:2px 0 6px; padding:8px 10px;font-weight:700;border-bottom:none; } body .mk-article .mk-tablecard.-stack tbody td.-group::before{content:""} } /* 2026-09-13（実測）: トップの手順の番号に使っている --c-cfd(#ec7a12) は白背景で2.85しかなく、 大きい文字の基準3:1も割っていた。同系の濃い色（#c86308、白背景で4.00）へ。 色ドットなど背景として使う場所には影響しないよう、文字色として使う番号だけを上書きする。 */ /* .rank-list li:nth-child(1) .n が --c-cfd を指定していて、そちらのほうが強い。 同じだけの強さで上書きする。 */ body .rank-list li:nth-child(n) .n, body .pf-steps .n, body .pf-flow .n{color:#c86308} /* 2026-09-19: 節見出しを実際の h2 タグにした（SEO。96ページで h2 が0本だった）。 hgroup.mk-h2 の中の span.jp を h2.jp へ替えただけ。書体は各ページの記事内styleが .mk-article h2 と .mk-h2 .jp の両方へ同じものを指定しているので（82ページ全件で一致を実測） ここでは指定しない。margin は mk-exact-v2article.css:42 で既に 0。 */ /* 2026-09-19: 地の文（ステージ2）。節の中に置く読み物の段落。 p.p-lead が節の1文目、h3 が節の中の小見出し、strong は黄色マーカー。 マーカーの文字色は固定の濃い色にする（ダークモードで --ink が明るくなると 黄色の上で読めなくなるため。#241018 と #FFE066 で 13:1）。 */ /* 影のぶんを空ける。カードと表の影は記事内styleで 0 28px 48px まで伸びるので、 下に本文を置くと文字が影に沈む（2026-09-19 本人指摘）。88px = 28+48 に余白10px。 */ .mk-article .prose{max-width:760px;margin:88px auto 36px;text-align:left} .mk-article .prose + .prose{margin-top:36px} .mk-article .prose p{font-size:1.02rem;line-height:1.95;margin:0 0 26px;color:var(--ink)} .mk-article .prose p.p-lead{font-size:1.12rem;font-weight:700;line-height:1.75;margin:0 0 10px} .mk-article .prose p:last-child{margin-bottom:0} .mk-article .prose h3{font-size:1.18rem;line-height:1.6;margin:44px 0 16px;padding:2px 0 2px 14px;border-left:6px solid #C77800} .mk-article .prose h3:first-child{margin-top:0} .mk-article .prose strong{font-weight:700;color:#241018;background:linear-gradient(transparent 56%,#FFE066 56%);padding:0 2px} .mk-article .mk-band.-dark .prose p,.mk-article .mk-band.-dark .prose h3{color:#fff} .mk-article .mk-inlinelink{max-width:760px;margin:26px auto 0;text-align:left} .mk-article .mk-tablecard + .mk-inlinelink,.mk-article .mk-numgrid + .mk-inlinelink,.mk-article .mk-fitgrid + .mk-inlinelink,.mk-article .mk-faq + .mk-inlinelink{margin-top:88px} .mk-article .mk-inlinelink a{display:block;background:var(--paper-raise);border:1px solid var(--paper-line);border-left:6px solid #C77800;border-radius:0 10px 10px 0;padding:14px 18px;font-weight:700;color:var(--link);text-decoration:none;line-height:1.7;box-shadow:0 1px 2px rgba(16,24,39,.04),0 10px 24px -18px rgba(16,24,39,.22)} .mk-article .mk-inlinelink a:hover{background:var(--brand-pale)} .mk-article .mk-btnrow{max-width:760px;margin:26px auto 0;text-align:center} .mk-article .mk-tablecard + .mk-btnrow,.mk-article .mk-numgrid + .mk-btnrow,.mk-article .mk-fitgrid + .mk-btnrow,.mk-article .mk-faq + .mk-btnrow{margin-top:88px} .mk-article .mk-btnrow .mk-cta-button{box-shadow:0 10px 22px -12px rgba(190,68,112,.75)} .mk-article .mk-btnrow .mk-cta-button:hover{background:var(--accent-deep)} @media (max-width:768px){ .mk-article .prose p{font-size:.98rem;line-height:1.9;margin-bottom:22px} .mk-article .prose p.p-lead{font-size:1.05rem} .mk-article .prose h3{font-size:1.08rem;margin:34px 0 14px} .mk-article .prose{margin-top:76px} .mk-article .mk-inlinelink a{padding:12px 14px;font-size:.95rem} } @media (max-width:600px){.mk-article .mk-btnrow .mk-cta-button{width:100%;justify-content:center;padding:15px 18px;font-size:.92rem}} /* 2026-09-23（全ページ点検で発見）: スマホでクーポンの箱（.pf-offer）から文字とボタンが右へはみ出し、 ページ全体が横にずれていた（390px幅の画面でページが438〜506pxになる）。 ボタンの文言が「◯◯をはじめる（いまなら◯%オフ）」と長くなり、nowrap のまま箱を押し広げていたため。 狭い画面ではボタンも折り返させ、グリッドの列が中身に押し広げられないようにする。 */ body .mk-article .pf-offer{grid-template-columns:minmax(0,1fr) auto} body .mk-article .pf-offer > *{min-width:0} @media (max-width:720px){ body .mk-article .pf-offer{grid-template-columns:minmax(0,1fr)} body .mk-article .pf-offer .btn{white-space:normal;max-width:100%;box-sizing:border-box;line-height:1.5;padding:14px 22px} body .mk-article .pf-offer .code{max-width:100%;box-sizing:border-box;overflow-wrap:anywhere;letter-spacing:.08em} body .mk-article .pf-offer .lbl,body .mk-article .pf-offer .sub{overflow-wrap:anywhere} } /* 2026-09-23（全ページ点検で発見）: 絵の枠（.mk-panel）の中のペンギンに四角い影が出ていた。 記事内CSSの img への box-shadow が透過画像に当たり、中身ではなく四角い枠に影が落ちるため （2026-09-19 にニュース記事で直したのと同じ原因）。ペンギンの絵には四角い影を付けない。 */ body .mk-article img[src*="/mascot/"]{box-shadow:none!important} /* 2026-09-23（全ページ点検で発見）: スマホで記事末尾の「もっと知りたい方へ」の一覧に、 座ったペンギンが重なって「読む →」が隠れていた。スマホではペンギンを下へ96px沈めて 次の箱の後ろへ隠す作りだが、一覧には背景が無いので、文字の上にそのまま見えてしまう。 一覧の上に来るペンギンだけは沈めず、一覧の上の線に座らせる。 */ @media (max-width:600px){ body .mk-article .mascot-topper:has(+ .mk-related) img{bottom:-6px!important;height:92px!important} } /* 同日: 上の枠の中のペンギンが、スマホで高さ64pxほどに縮んで豆粒になっていた。枠の高さに合わせて描く。 */ body .mk-article .mk-panel img[src*="/mascot/"]{width:auto!important;height:78%!important;max-width:90%;object-fit:contain} /* 同日: クーポンの箱のボタンが折り返すと、最後の1文字だけが次の行に落ちていた。行の長さをそろえる。 */ @media (max-width:720px){body .mk-article .pf-offer .btn{text-wrap:balance;font-size:.95rem}} /* 2026-09-26 本人指示: スマホではふわっと出てくる演出をやめ、最初から全部見えるようにする。 電波が弱いと演出用のJSが届くまで空白のままになるため。PCの演出は残す。 */ @media (max-width:768px){ .reveal,.reveal.in,body .mk-article .reveal{opacity:1!important;transform:none!important;transition:none!important} } /* 2026-09-26 スマホの見やすさ総点検（本人依頼「見づらいやつもぜんぶ最適化して見やすく」）。 全115ページを390px幅で測った結果（scripts/mobile_readability_check.py）から直す。基準は一次情報： 文字は12px未満を作らない（Lighthouse）、本文14px以上（デジタル庁デザインシステム）、 押す場所は24px以上（WCAG 2.5.8）、文字色は背景に4.5:1以上（WCAG 1.4.3）。 デザインは変えず、スマホの余白・文字の大きさ・押しやすさだけを整える。 */ /* トップの「私たちの確かめ方」の番号が薄いピンク（白地で1.9:1）で読めなかった */ .method-item .num{color:var(--brand-deep)} @media (max-width:768px){ /* 節と節のあいだが1ページ平均12か所、72〜110px空いていた。 原因は帯の上下の余白（各56px）と、カードや表の大きい影を避けるための88pxの空き。 スマホでは影を小さくして、空きを詰める（影に文字が沈まないことは保つ）。 */ body .mk-article .mk-band{padding:40px 0} body .mk-article .mk-tablecard,body .mk-article .mk-fitcard{box-shadow:0 4px 8px rgba(30,30,40,.14),0 12px 22px rgba(30,30,40,.16)!important} body .mk-article .prose{margin-top:52px} body .mk-article .prose + .prose{margin-top:28px} body .mk-article .mk-tablecard + .mk-inlinelink,body .mk-article .mk-numgrid + .mk-inlinelink, body .mk-article .mk-fitgrid + .mk-inlinelink,body .mk-article .mk-faq + .mk-inlinelink, body .mk-article .mk-tablecard + .mk-btnrow,body .mk-article .mk-numgrid + .mk-btnrow, body .mk-article .mk-fitgrid + .mk-btnrow,body .mk-article .mk-faq + .mk-btnrow{margin-top:52px} section{padding:32px 0} .pickup{padding:20px 0 32px} /* 注記（※の文）が13px前後で94ページにあった。14pxへ */ body .mk-article .mk-note,body .mk-article .sw-note,body .mk-article .pf-offer .sub{font-size:14px} /* フッターのリンクが高さ22pxで、指で押し分けにくかった（全ページ）。上下に余白を足して36px前後に */ footer ul{gap:0} footer a{padding:7px 0!important} } /* スマホの表の文字が11〜12pxだった（約80ページ）。列の数に合わせて上げる。 4列の表は12pxにすると右端がはみ出したので（実測）、11pxのまま据え置く。 3列の表は13pxにすると3列目が細くなり、金額が1行1つずつ縦に積まれて行が倍の高さになった （FTMOの報酬ページで4行→8行）ので12pxに戻す。2列の表も14pxでは同じく行が伸びたので13pxにする。 */ @media (max-width:600px){ body .mk-article .mk-tablecard:not([class*="-cols"]) table{font-size:13px} body .mk-article .mk-tablecard.-cols2 table{font-size:13px} body .mk-article .mk-tablecard.-cols3 table{font-size:12px} body .mk-article .mk-tablecard.-stack table{font-size:13px} } /* 2026-09-26 関連リンクの「READ MORE →」が短いタイトルの後ろに同じ行でくっついていた （記事一覧ページで47か所。説明文 p がない a では span がインラインのまま並ぶため）。 常にタイトルの下の行に置く。 */ body .mk-article .mk-related a span{display:block;width:fit-content} /* 上の変更で、記事冒頭の「← ◯◯のまとめページに戻る」の末尾の「→」だけが次の行に残った（58ページ）。 左向きの矢印がすでにあり右向きは不要なので、戻るリンク（style="margin-bottom:8px" の枠、実測で58個すべてこれ）では消す。 */ body .mk-article .mk-related[style*="margin-bottom:8px"] a span{display:none} /* 2026-09-27（本人の選択「少し濃くする」、スマホ判断の②）: 淡いピンクの帯（偶数番目の .mk-band、背景 --pale #FDEAF1）の上の本文リンクは、 #BE4470 だと 4.29:1 で基準の 4.5:1 に届かなかった（2ページ）。帯の上だけ --accent-deep にする。 #9C2F56 × #FDEAF1 = 6.17:1、ダーク表示では #8fb6ff × #1c2140 = 7.68:1。ホバー時は既存のまま白文字。 */ body .mk-article .mk-band:nth-of-type(even):not(.-dark):not(.-risk):not(.-paper) :is(.prose,.txt) :is(p,li) a:not(:hover):not(:focus-visible){ color:var(--accent-deep); text-decoration-color:currentColor; } /* 2026-09-27（本人の選択「ロゴの上下も含めて全体を詰める」、スマホ判断の④）: 記事の一番上が、会社ロゴの枠208px・上の空き64px・導入文の下の空き116pxで、 1画面目がほぼ見出しだけだった。スマホだけ、ロゴを小さくし、上下の空きを詰める。 記事内の