.mh-pr{display:none!important} :where(.hm-front-events,.hm-article-calendar-lazy,.hm-today-tomorrow-events,.mh-product-front,.mh-campaign-box,.sp1-campaign-front,.sc-portfolio-front,.codex-swell-popular) { --codex-muted-text:#475569; --codex-muted-strong:#334155; --codex-accent-green:#166534; --codex-accent-orange:#9a3f0d; } :where(.hm-front-events,.hm-article-calendar-lazy,.hm-today-tomorrow-events,.mh-product-front,.mh-campaign-box,.sp1-campaign-front,.sc-portfolio-front,.codex-swell-popular) :where(.hm-lead,.hm-sub,.hm-ac-sub,.hm-submit-cta span,.hm-card em,.hm-guide-card em,.mh-sub,.mh-note,.sp1-sub,.sc-sub) { color:var(--codex-muted-text)!important; } :where(.hm-front-events,.hm-article-calendar-lazy,.hm-today-tomorrow-events) :where(.hm-eyebrow,.hm-ac-eyebrow) { color:var(--codex-accent-orange)!important; } :where(.hm-front-events,.hm-article-calendar-lazy,.hm-today-tomorrow-events) :where(.hm-cal-day.muted,.hm-cal-day.muted .hm-cal-num) { color:#64748b!important; } :where(.hm-front-events,.hm-article-calendar-lazy,.hm-today-tomorrow-events,.mh-product-front,.mh-campaign-box,.sp1-campaign-front,.sc-portfolio-front,.codex-swell-popular) :where(button,a.hm-btn,.hm-btn,.hm-month-tab,.hm-cal-day,.hm-cal-nav,.hm-ac-main-link,.hm-submit-cta a,.mh-btn,.mh-campaign-link,.sp1-btn,.sc-btn,.codex-swell-popular-tab) { min-height:44px!important; touch-action:manipulation; } :where(.hm-chip,.mh-chip,.sp-chip,.sc-chip,.sp-compact-offer,.codex-swell-popular-tab,.c-searchForm__submit) { min-height:44px!important; touch-action:manipulation; } @media (max-width: 640px) { :where(.p-spMenu a,.p-spMenu__inner a,.c-widget a,.c-gnav a,.hm-front-events a,.mh-product-front a,.mh-campaign-box a,.sp1-campaign-front a,.sc-portfolio-front a) { min-height:44px; display:inline-flex; align-items:center; } } :where(.c-categoryList__link,.c-tagList__link,.p-breadcrumb__text,.p-toc__link) { min-height:32px; display:inline-flex; align-items:center; } :where(.p-articleMetas__termList.c-categoryList,.p-articleMetas__termList.c-tagList) { display:flex!important; flex-wrap:wrap; align-items:center; gap:8px!important; width:100%; margin:0!important; padding-left:0!important; box-sizing:border-box; } :where(.p-articleMetas__termList.c-categoryList,.p-articleMetas__termList.c-tagList)::before { content:none!important; display:none!important; } :where(.p-articleMetas__termList.c-categoryList,.p-articleMetas__termList.c-tagList) :where(.c-categoryList__link,.c-tagList__link) { display:inline-flex!important; align-items:center!important; justify-content:center!important; box-sizing:border-box; min-height:0!important; height:34px; margin:0!important; padding:0 13px!important; line-height:1!important; white-space:nowrap; } :where(.hm-front-events,.hm-article-calendar-lazy,.hm-today-tomorrow-events) :where(.hm-month-tab,.hm-cal-nav) { padding-top:9px; padding-bottom:9px; } :where(.hm-traffic-alert span,.hm-guide-card span,.sp-feature-label,.sp-offer-row-label.deadline) { color:#9a3f0d!important; } :where(.hm-traffic-alert span) { background:#9a3f0d!important; color:#fff!important; } :where(.hm-chip span,.mh-chip span,.sp-chip span,.sc-chip span,.hm-cal-panel-head span,.hm-cal-pick-body > span,.hm-date) { color:#334155!important; } :where(.codex-swell-popular-tab.is-active,.codex-swell-popular-rank,.c-postThumb__cat,.mh-amazon) { background:#9a3f0d!important; color:#fff!important; } :where(.monohikaku-price-btn) { min-height:44px!important; background:#0b63b6!important; color:#fff!important; display:inline-flex!important; align-items:center; justify-content:center; padding:10px 12px!important; } :where(.codex-symbol-muted) { color:#475569!important; } :where(.footer-kouki-label,.footer-kouki-tag) { background:#e5edf6!important; color:#17324d!important; } :where(.l-footer,.l-footer__body,.l-footer__widgetArea,.footer-kouki,.footer-kouki *) { color:#334155!important; } :where(.post_content,.entry-content,.c-entry__content) table th { background:#e5edf6!important; color:#17324d!important; } :where(.post_content,.entry-content,.c-entry__content) a { color:#0b63b6; } :where(.c-postTimes__modified,.c-postTimes__posted) { color:#475569!important; } :where(.hm-front-events,.hm-article-calendar-lazy) :where(.hm-cal-thumb img,.hm-card img,.hm-cal-pick img) { aspect-ratio:16/9; } :root { --codex-readable-font-stack: system-ui, -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Meiryo, sans-serif; --codex-readable-text: #172033; --codex-readable-muted: #475569; --codex-readable-heading: #0f172a; } body, button, input, select, textarea { font-family: var(--codex-readable-font-stack); } body { color: var(--codex-readable-text); letter-spacing: 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .post_content, .entry-content, .c-postContent { color: var(--codex-readable-text); font-size: 16.5px !important; line-height: 1.86 !important; letter-spacing: 0; overflow-wrap: anywhere; } .post_content :where(p, li, dd), .entry-content :where(p, li, dd), .c-postContent :where(p, li, dd) { line-height: 1.86 !important; } .post_content :where(p), .entry-content :where(p), .c-postContent :where(p) { margin-top: 0; margin-bottom: 1.16em; } .post_content :where(ul, ol), .entry-content :where(ul, ol), .c-postContent :where(ul, ol) { padding-left: 1.45em; } .post_content :where(li + li), .entry-content :where(li + li), .c-postContent :where(li + li) { margin-top: 0.28em; } .post_content :where(h2, h3, h4), .entry-content :where(h2, h3, h4), .c-postContent :where(h2, h3, h4) { color: var(--codex-readable-heading); letter-spacing: 0; line-height: 1.44; overflow-wrap: anywhere; text-wrap: balance; } .post_content :where(figcaption, small, .wp-element-caption), .entry-content :where(figcaption, small, .wp-element-caption), .c-postContent :where(figcaption, small, .wp-element-caption) { color: var(--codex-readable-muted); line-height: 1.72; } .p-postList__title, .c-postTitle__ttl, .c-widget .p-postList__title { letter-spacing: 0; line-height: 1.48; overflow-wrap: anywhere; } .post_content :where(table), .entry-content :where(table), .c-postContent :where(table) { font-size: 0.96em; line-height: 1.62; } .post_content :where(a), .entry-content :where(a), .c-postContent :where(a) { text-underline-offset: 0.16em; } @media (max-width: 640px) { .post_content, .entry-content, .c-postContent { font-size: 16px !important; line-height: 1.82 !important; } .post_content :where(p, li, dd), .entry-content :where(p, li, dd), .c-postContent :where(p, li, dd) { line-height: 1.82 !important; } .post_content :where(p), .entry-content :where(p), .c-postContent :where(p) { margin-bottom: 1.08em; } .p-postList__title, .c-postTitle__ttl, .c-widget .p-postList__title { line-height: 1.46; } } .single .w-singleBottom:not(:has(a,img,iframe,ins,p,ul,table)),.single #after_article:not(:has(*)){display:none!important} .single .l-mainContent__inner > .post_content{margin-bottom:24px} .single .l-mainContent__inner > .p-articleFoot{margin-top:16px;margin-bottom:0;padding-top:16px} .single:has(.post_content .cr-prefsrc) #before_footer_widget{display:none} #footer.l-footer{display:flow-root} #footer > .reader-nav--footer{margin-top:24px} .l-footer .footer-kouki-block{padding-top:8px} .l-footer .footer-kouki-label{background:transparent!important;color:#c9d8e8!important;font-weight:700;letter-spacing:.04em} @media (max-width:959px){ .single #main_content.l-article article.l-mainContent__inner{padding-bottom:20px} .single #content.l-content{padding-bottom:16px} .l-footer details.mh5-footer-disclosure > ul,.l-footer details.mh5-footer-disclosure > .footer-kouki-block{padding:8px 12px 14px!important} .l-footer details.mh5-footer-disclosure .footer-kouki-label{padding:0} } .post_content :is(p,li,dd,td,th,figcaption,blockquote) a:not([class]):not([style]):not(:has(img)){text-decoration:underline!important;text-decoration-thickness:1px!important;text-underline-offset:.22em!important;text-decoration-skip-ink:auto} .post_content :is(p,li,dd,td,th,figcaption,blockquote) a:not([class]):not([style]):not(:has(img)):hover{text-decoration-thickness:2px!important} .post_content :is(p,li,dd) a:not([class]):not([style]):not(:has(img)):visited{color:#6b3fa0} #body_wrap#body_wrap#body_wrap a.mh-price-btn[class*="mh-price-btn--"]{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:2px!important;box-sizing:border-box!important;width:100%!important;max-width:100%!important;min-height:56px!important;margin:0!important;padding:8px 12px!important;border:0!important;border-radius:10px!important;box-shadow:0 2px 0 rgba(0,0,0,.18)!important;text-align:center!important;text-decoration:none!important;line-height:1.3!important;font-weight:700!important;word-break:keep-all!important;overflow-wrap:anywhere!important;cursor:pointer;transition:filter .15s,transform .15s,box-shadow .15s} #body_wrap#body_wrap#body_wrap a.mh-price-btn--amazon{background:#FF9900!important;color:#0F1111!important} #body_wrap#body_wrap#body_wrap a.mh-price-btn--rakuten{background:#BF0000!important;color:#fff!important} #body_wrap#body_wrap#body_wrap a.mh-price-btn--yahoo{background:#E60033!important;color:#fff!important} #body_wrap#body_wrap#body_wrap a.mh-price-btn[class*="mh-price-btn--"]:hover{filter:brightness(1.07);transform:translateY(-1px);box-shadow:0 4px 10px rgba(0,0,0,.2)!important} #body_wrap#body_wrap#body_wrap a.mh-price-btn[class*="mh-price-btn--"]:focus-visible{outline:3px solid #1d4ed8!important;outline-offset:2px!important} #body_wrap#body_wrap#body_wrap a.mh-price-btn[class*="mh-price-btn--"] span{color:inherit!important;background:none!important} #body_wrap#body_wrap#body_wrap .mh-price-btn__head{display:flex!important;flex-wrap:wrap;justify-content:center;gap:0 .5em;font-size:14px!important;font-weight:700!important;line-height:1.35!important} #body_wrap#body_wrap#body_wrap .mh-price-btn__date{display:none!important} /* 確認日は表示しない（2026-10-10本人「日付もボタンには不要」）。属性 data-mh-price-checked-at と aria-label には残す */ #body_wrap#body_wrap#body_wrap .mh-price-btn__main{display:flex!important;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:0 .35em;max-width:100%!important;min-width:0!important} #body_wrap#body_wrap#body_wrap .mh-price-ref{display:flex!important;align-items:center;justify-content:center;box-sizing:border-box;width:100%;min-height:56px;margin:0;padding:8px 12px;border:1px dashed #b8bcc4;border-radius:10px;color:#4b5563;background:#f8f9fb;font-size:14px;font-weight:600;line-height:1.4;text-align:center} #body_wrap#body_wrap#body_wrap .mh-price-btn__price{font-size:19px!important;font-weight:800!important;letter-spacing:.01em;line-height:1.25!important;white-space:nowrap!important} @media (max-width:480px){#body_wrap#body_wrap#body_wrap a.mh-price-btn[class*="mh-price-btn--"]{padding:8px 4px!important}#body_wrap#body_wrap#body_wrap .mh-price-btn__price{font-size:min(16px,4.1vw)!important;letter-spacing:0}} /* 3列だと「378,9／97円」と数字の途中で折れていた（2026-10-12） */ #body_wrap#body_wrap#body_wrap .mh-price-btn__note{font-size:14px!important;font-weight:500!important;display:block!important;white-space:normal!important;overflow-wrap:anywhere!important;word-break:normal!important;max-width:100%!important;min-width:0!important} #body_wrap#body_wrap#body_wrap .mh-price-btn__action{font-size:15px!important;font-weight:700!important;line-height:1.35!important} #body_wrap#body_wrap#body_wrap td a.mh-price-btn[class*="mh-price-btn--"]{min-width:7.5em} #body_wrap#body_wrap#body_wrap td a.mh-price-btn[class*="mh-price-btn--"]+a.mh-price-btn[class*="mh-price-btn--"],#body_wrap#body_wrap#body_wrap td a.mh-price-btn[class*="mh-price-btn--"]+br+a.mh-price-btn[class*="mh-price-btn--"]{margin-top:6px!important} :root{--ms-head:#173b64;--ms-key:#b42318;--ms-key-bg:#fff4f2;} /* 管理サイト共通の比較表・基本情報カード（たまコイン型、2026-10-09）。SP1は sp1-operations/templates/compare-table.css（.sp1-）を使う。 比較表: .ms-cmp > table.ms-cmp-table[data-codex-mobile-table="1"] / caption(.ms-cmp-sub) / .is-key 列 / tr.is-best / td.is-win / .ms-num .ms-unit .ms-pre .ms-cmp-diff(.is-up/.is-good/.is-note) .ms-cmp-tag / table.is-2col details.ms-cmp-all（全項目） / .ms-example（具体例） 基本情報カード: .ms-info > table.ms-info-table[data-codex-mobile-table="1"] / caption / tr.is-main（日時・料金など最重要行を大きく） 色はサイトごとに --ms-head（見出し行）・--ms-key（強調列）・--ms-key-bg を配布時に指定する。 改善の記録（使って合わなかった所を直したら1行足し、古くなった行は消す）: - 2026-10-09 列幅を中身に合わせる（table-layout:auto）：招待コードナビの狭い本文で項目列が95pxになり3〜4行折り返した（2399、表の高さ951→733px） - 2026-10-09 群の見出し行 tr.ms-group：モノヒカク洋服レンタルの9行が1表に詰まりサービス名が毎行折り返した（36059） - 2026-10-09 見出し行の補足 thead small を白系に：ハリマップのムーミン展「前売 10/9まで」が濃い背景で読めなかった（36756） - 2026-10-09 長い注記はセルに入れず表の下の foot へ：付与時期の注記で行が縦に伸びた（招待コードナビ2364） - 2026-10-10 overflow-wrap:anywhere をやめる：列幅の最小値が1字になり、文のセルがある列が1〜3字幅に細った（モノヒカク protein「12,0/53円」、招待コードナビ pointsite 期限列）。is-text のセルに最小幅、small は折らない - 2026-10-10 長文の旧表は項目名を上に積むだけでは強弱がなく読みにくい（SP1 mnpdan、本人指摘）→ 選び方カード ms-picks・ms-dodont・ms-steps・特典ごとの行 ms-rewards を追加 - 2026-10-10 行見出しは keep-all＋本文の で区切りの良い位置だけで折る（「お城通り善意駐車/場」）。最小幅で押し広げると表がはみ出した - 2026-10-10 4列の比較表がスマホで枠より広くなり、外側の overflow:clip で右端の列と見出しが切れて横スクロールもできなかった（モノヒカク wireless-earphone-under-10000 の「防水」列）。4列以上は詰めて収め、数値以外は折り返す。それでも広い時は枠内で横スクロール - 2026-10-10 リストが黒丸か数字だけで条件・日付が埋もれた（ハリマップ ako-hamazushi ほか）→ チェック ms-check・タイムライン ms-tl を追加、ふつうのリストの行間をそろえる - 2026-10-10 4〜5列の表の3つの型を追加：.ms-wt（多い件数×短い値）・.ms-cmp3（少ない製品×多い項目）・.ms-pcard（長文は要約表＋カード）。旧部品 codex-mobile-table の小さい項目名（10.5px）と2列表の縦積みも直す - 2026-10-11 型Bの4製品で6桁の金額が「153,6/50」と数字の途中で折れた（SP1 32487、スマホ375で7セル）→ .ms-num を折らない・4製品はスマホで数字を1.1emに。単位は行ラベルへ（「24か月の支払い（円）」） - 2026-10-12 表の小さい文字（項目名・補足・印・日付の札 12〜13.5px）を14pxへ（方針の表・注釈14px以上。SP1 mnp-campaign のカード型項目名13px）。アイコンの ▼▶✓ だけ据え置き。戻し方: sitewide_css の受領記録 backup_path。 */ .ms-cmp { margin: 1.6em 0; padding: 16px 14px 14px; border: 1px solid #cbd8e1; border-radius: 12px; background: #fff; max-width: 100%; } .ms-cmp .ms-cmp-table { width: 100% !important; min-width: 0 !important; table-layout: auto; border-collapse: separate; border-spacing: 0; margin: 0 !important; font-size: 16px; line-height: 1.5; display: table !important; } .ms-cmp .ms-cmp-table caption { display: table-caption !important; caption-side: top; text-align: left; padding: 0 0 12px !important; color: #172b3a; font-size: 1.2em !important; font-weight: 800; line-height: 1.45; } .ms-cmp .ms-cmp-table caption .ms-cmp-sub { display: block; margin-top: 4px; color: #465b6a; font-size: 14px; font-weight: 400; line-height: 1.5; } .ms-cmp .ms-cmp-table thead { position: static !important; width: auto !important; height: auto !important; clip-path: none !important; overflow: visible !important; display: table-header-group !important; } .ms-cmp .ms-cmp-table tbody { display: table-row-group !important; } .ms-cmp .ms-cmp-table tr { display: table-row !important; border: 0 !important; } .ms-cmp .ms-cmp-table :is(th,td) { display: table-cell !important; width: auto !important; padding: 12px 10px !important; border: 0 !important; border-bottom: 1px solid #dfe7ee !important; vertical-align: middle !important; background: #fff; color: #172b3a; white-space: normal !important; overflow-wrap: break-word; } .ms-cmp .ms-cmp-table :is(th,td)::before { content: none !important; display: none !important; } .ms-cmp .ms-cmp-table thead th { background: var(--ms-head,#172b3a) !important; color: #fff !important; font-size: 14px !important; font-weight: 700; text-align: center !important; padding: 9px 6px !important; } .ms-cmp .ms-cmp-table thead th small { display: block; margin-top: 1px; color: rgba(255,255,255,.85) !important; font-size: 14px !important; font-weight: 400; } .ms-cmp .ms-cmp-table thead th:first-child { border-radius: 8px 0 0 0; } .ms-cmp .ms-cmp-table thead th:last-child { border-radius: 0 8px 0 0; } .ms-cmp .ms-cmp-table tbody th { width: auto; min-width: 6.5em; text-align: left !important; font-weight: 700; background: #f6f9fb !important; } .ms-cmp .ms-cmp-table tbody th small { display: block; margin-top: 2px; color: #465b6a; font-size: 14px !important; font-weight: 400; } .ms-cmp .ms-cmp-table tbody td { text-align: right !important; white-space: nowrap !important; } .ms-cmp .ms-cmp-table tbody td .ms-cmp-diff { white-space: normal; } .ms-cmp .ms-cmp-table tbody td.is-text { text-align: left !important; font-size: 15px; white-space: normal !important; } .ms-cmp .ms-num { font-size: 1.4em; font-weight: 800; letter-spacing: .01em; font-variant-numeric: tabular-nums; line-height: 1.2; } .ms-cmp .ms-unit { margin-left: 1px; font-size: .8em; font-weight: 700; color: inherit; } .ms-cmp .ms-pre { font-size: .85em; font-weight: 700; margin-right: 1px; } .ms-cmp .ms-cmp-diff { display: block; margin-top: 3px; font-size: 14px; font-weight: 700; line-height: 1.3; } .ms-cmp .ms-cmp-diff.is-up { color: #b42318; } .ms-cmp .ms-cmp-diff.is-up::before { content: "▲"; font-size: .8em; margin-right: 2px; } .ms-cmp .ms-cmp-diff.is-good { color: #067647; } .ms-cmp .ms-cmp-diff.is-note { color: #465b6a; font-weight: 400; } .ms-cmp .ms-cmp-table .is-key { background: var(--ms-key-bg,#fff4f2) !important; color: var(--ms-key,#b42318); } .ms-cmp .ms-cmp-table thead .is-key { background: var(--ms-key,#b42318) !important; color: #fff !important; } .ms-cmp .ms-cmp-table td.is-win { background: #ecfdf3 !important; color: #067647; box-shadow: inset 0 0 0 2px #12b76a; } .ms-cmp .ms-cmp-tag { display: inline-block; margin: 0 0 0 6px; padding: 1px 7px; border-radius: 4px; background: #fde68a; color: #713f12; font-size: 14px; font-weight: 800; line-height: 1.5; vertical-align: 1px; } .ms-cmp tr.is-best th { box-shadow: inset 4px 0 0 #f59e0b; } .ms-cmp .ms-cmp-foot { margin: 10px 0 0 !important; color: #465b6a; font-size: 14px !important; line-height: 1.6; } .ms-cmp-all { margin: -.6em 0 1.6em; border: 1px solid #cbd8e1; border-radius: 10px; background: #f6f9fb; } .ms-cmp-all > summary { cursor: pointer; list-style: none; padding: 14px 44px 14px 16px; position: relative; font-weight: 700; color: #172b3a; min-height: 48px; } .ms-cmp-all > summary::-webkit-details-marker { display: none; } .ms-cmp-all > summary::after { content: "▼"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 12px; color: #465b6a; } .ms-cmp-all[open] > summary::after { content: "▲"; } .ms-cmp-all > :not(summary) { margin: 0 12px 12px !important; width: auto !important; max-width: calc(100% - 24px) !important; } .ms-example { display: flex; gap: 12px; align-items: flex-start; margin: 1.2em 0 1.6em; padding: 14px 16px; border-radius: 10px; background: #effaf3; border-left: 4px solid #12b76a; } .ms-example::before { content: "例"; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #12b76a; color: #fff; font-size: 14px; font-weight: 800; } .ms-example p { margin: 0 !important; } .ms-example mark { background: linear-gradient(transparent 55%, #fde68a 55%); color: #b42318; font-weight: 800; padding: 0 1px; } /* 群の見出し行（例：サービス名ごとにプランを並べる）。2026-10-09 モノヒカク洋服レンタルで9行が1表に詰まり読みにくかったため追加 */ .ms-cmp .ms-cmp-table tr.ms-group > th { background: #e8eef3 !important; color: #172b3a !important; font-size: 14px !important; font-weight: 800; text-align: left !important; padding: 6px 10px !important; border-bottom: 0 !important; } .ms-cmp .ms-cmp-table tr.ms-group + tr > * { border-top: 0 !important; } @media (max-width: 600px) { .ms-cmp { padding: 12px 8px 10px; margin-inline: 0; } .ms-cmp .ms-cmp-table caption { font-size: 1.12em !important; } .ms-cmp .ms-cmp-table :is(th,td) { padding: 10px 6px !important; } .ms-cmp .ms-cmp-table tbody th { font-size: 15px !important; } .ms-cmp .ms-num { font-size: 1.18em; } .ms-cmp .ms-cmp-table tbody td { padding: 10px 5px !important; } } .ms-info { margin: 1.6em 0; padding: 14px 14px 6px; border: 1px solid #cbd8e1; border-radius: 12px; background: #fff; border-top: 5px solid var(--ms-head,#172b3a); } .ms-info .ms-info-table { width: 100% !important; min-width: 0 !important; table-layout: fixed; border-collapse: collapse; margin: 0 !important; display: table !important; font-size: 16px; line-height: 1.6; } .ms-info .ms-info-table caption { display: table-caption !important; caption-side: top; text-align: left; padding: 0 0 10px !important; color: #172b3a; font-size: 1.15em !important; font-weight: 800; line-height: 1.5; } .ms-info .ms-info-table caption .ms-cmp-sub { display: block; margin-top: 3px; color: #465b6a; font-size: 14px; font-weight: 400; } .ms-info .ms-info-table tbody, .ms-info .ms-info-table thead { display: table-row-group !important; position: static !important; clip-path: none !important; width: auto !important; height: auto !important; overflow: visible !important; } .ms-info .ms-info-table tr { display: table-row !important; border: 0 !important; } .ms-info .ms-info-table :is(th,td) { display: table-cell !important; width: auto !important; padding: 10px 6px !important; border: 0 !important; border-bottom: 1px solid #e6edf2 !important; background: transparent !important; color: #172b3a; vertical-align: top !important; white-space: normal !important; overflow-wrap: break-word; text-align: left !important; } .ms-info .ms-info-table :is(th,td)::before { content: none !important; display: none !important; } .ms-info .ms-info-table tr:last-child > * { border-bottom: 0 !important; } .ms-info .ms-info-table th { width: 33% !important; color: #465b6a !important; font-size: 14px !important; font-weight: 700; padding-top: 12px !important; } .ms-info .ms-info-table td { font-weight: 700; } .ms-info .ms-info-table td small { display: block; color: #465b6a; font-size: 14px !important; font-weight: 400; margin-top: 2px; } .ms-info .ms-info-table tr.is-main td { font-size: 1.15em; font-weight: 800; color: var(--ms-key,#b42318); } .ms-info .ms-info-table tr.is-main td small { color: #465b6a; } /* ---- 2026-10-10 文のセル（is-text）：最小幅を持たせ、補足（モール名・確認日）は折らない ---- */ .ms-cmp .ms-cmp-table tbody td.is-text small { display: block; margin-top: 2px; color: #465b6a; font-size: 14px !important; font-weight: 400; white-space: nowrap; } @media (max-width: 600px) { .ms-cmp .ms-cmp-table tbody th { min-width: min(8.2em, 36vw); font-size: 14.5px !important; } .ms-wt .ms-wt-table :is(td) { padding: 9px 4px !important; } .ms-cmp .ms-cmp-table tbody td.is-text { min-width: min(6em, 24vw); font-size: 14px; } } /* ---- 型A：多い件数×短い値（2026-10-10、参考 mybest・RTINGS）。1列を区切り見出し＋飛び先ボタンへ移し、値は印・大きな数字・✓に縮めて4列以内に収める。JSなし。 .ms-wt > p.ms-wt-cap / nav.ms-wt-jump > a[href="#…"] / table.ms-wt-table[data-codex-mobile-table="1"] > thead / tbody > tr.ms-wt-grp[id] > th[colspan] / tr > th[scope=row] + td 値: .ms-wt-free（無料などの良い値）・.ms-wt-num（数字）+ small（単位）・.ms-wt-yes（✓）・.ms-wt-no（—）。10行を超える時は details.ms-wt-more に残りを入れる */ .ms-wt { margin: 1.6em 0; padding: 14px 12px 10px; border: 1px solid #cbd8e1; border-radius: 12px; background: #fff; } .ms-wt .ms-wt-cap { margin: 0 0 8px !important; font-weight: 800; font-size: 1.1em; color: #172b3a; line-height: 1.45; } .ms-wt .ms-wt-cap small { display: block; font-size: 14px; font-weight: 400; color: #465b6a; } .ms-wt .ms-wt-jump { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; } .ms-wt .ms-wt-jump a { display: inline-block; padding: 3px 12px; border: 1px solid #cbd8e1; border-radius: 999px; background: #f6f9fb; color: #172b3a !important; font-size: 14px; font-weight: 700; text-decoration: none !important; line-height: 1.6; } .ms-wt table.ms-wt-table { width: 100% !important; min-width: 0 !important; display: table !important; border-collapse: separate; border-spacing: 0; margin: 0 !important; font-size: 15px; line-height: 1.45; table-layout: auto; } .ms-wt .ms-wt-table thead { display: table-header-group !important; position: static !important; clip-path: none !important; width: auto !important; height: auto !important; overflow: visible !important; } .ms-wt .ms-wt-table tbody { display: table-row-group !important; } .ms-wt .ms-wt-table tr { display: table-row !important; border: 0 !important; } .ms-wt .ms-wt-table :is(th,td) { display: table-cell !important; width: auto !important; padding: 9px 6px !important; border: 0 !important; border-bottom: 1px solid #e3eaf0 !important; background: transparent !important; color: #172b3a; vertical-align: middle !important; white-space: nowrap !important; text-align: center !important; overflow-wrap: normal; position: static !important; } .ms-wt .ms-wt-table :is(th,td)::before { content: none !important; display: none !important; } .ms-wt .ms-wt-table thead th { background: #f1f5f8 !important; color: #465b6a !important; font-size: 14px !important; font-weight: 700; padding: 6px !important; } .ms-wt .ms-wt-table thead th:first-child, .ms-wt .ms-wt-table tbody th { text-align: left !important; } .ms-wt .ms-wt-table tbody th { white-space: normal !important; font-weight: 700; line-height: 1.35; min-width: 0; font-size: 14px; } .ms-wt .ms-wt-table td { font-size: 14px; } .ms-wt .ms-wt-table tbody th small { display: block; font-size: 14px; font-weight: 400; color: #465b6a; } .ms-wt .ms-wt-table tr.ms-wt-grp > th { background: #e8eef3 !important; color: #172b3a !important; font-size: 14px !important; font-weight: 800; text-align: left !important; padding: 5px 8px !important; scroll-margin-top: 90px; } .ms-wt .ms-wt-free { display: inline-block; padding: 0 8px; border-radius: 6px; background: #ecfdf3; color: #067647; font-weight: 800; } .ms-wt .ms-wt-num { font-size: 1.15em; font-weight: 800; font-variant-numeric: tabular-nums; } .ms-wt .ms-wt-num small { font-size: 14px; font-weight: 600; color: #465b6a; margin: 0 1px; } .ms-wt .ms-wt-yes { color: #067647; font-weight: 800; } .ms-wt .ms-wt-no { color: #8a99a6; } .ms-wt .ms-wt-foot { margin: 8px 0 0 !important; font-size: 14px !important; color: #465b6a; line-height: 1.6; } .ms-wt details.ms-wt-more { margin-top: 8px; } .ms-wt details.ms-wt-more > summary { cursor: pointer; list-style: none; text-align: center; padding: 8px; border: 1px solid #cbd8e1; border-radius: 8px; font-weight: 700; color: #172b3a; } .ms-wt details.ms-wt-more > summary::-webkit-details-marker { display: none; } .ms-wt details.ms-wt-more[open] > summary { display: none; } /* ---- 型B：少ない製品×多い項目（2026-10-10、参考 GSMArena・Apple）。項目名を値の上の帯に置き、横幅を全部値に使う。製品名の帯は上に固定。 div.ms-cmp3[role=table][style="--n:3"] > div.ms-cmp3-head[role=row] > div[role=columnheader]（製品名 + small） / div.ms-cmp3-row[role=row] > div.ms-cmp3-lab[role=rowheader] + div.ms-cmp3-vals > div[role=cell]（.is-win で得な値、.ms-num/.ms-unit、.ms-cmp-tag、small で補足） / details.ms-cmp3-more（長い説明：選ぶ用途・注意点など） */ .ms-cmp3 { --n: 3; margin: 1.6em 0; border: 1px solid #cbd8e1; border-radius: 12px; background: #fff; font-size: 15px; line-height: 1.45; } .ms-cmp3 .ms-cmp3-cap { margin: 0 !important; padding: 12px 12px 10px; font-weight: 800; font-size: 1.1em; color: #172b3a; line-height: 1.45; } .ms-cmp3 .ms-cmp3-cap small { display: block; font-size: 14px; font-weight: 400; color: #465b6a; } .ms-cmp3 .ms-cmp3-head { display: grid; grid-template-columns: repeat(var(--n), minmax(0,1fr)); position: sticky; top: 0; z-index: 2; background: var(--ms-head,#172b3a); color: #fff; } .ms-cmp3 .ms-cmp3-head > div { padding: 8px 6px; text-align: center; font-size: 14px; font-weight: 800; line-height: 1.3; border-left: 1px solid rgba(255,255,255,.18); overflow-wrap: break-word; } .ms-cmp3 .ms-cmp3-head > div:first-child { border-left: 0; } .ms-cmp3 .ms-cmp3-head small { display: block; margin-top: 2px; font-size: 14px; font-weight: 500; color: rgba(255,255,255,.85); } .ms-cmp3 .ms-cmp3-row { border-top: 1px solid #dfe7ee; } .ms-cmp3 .ms-cmp3-lab { padding: 4px 10px; background: #f1f5f8; color: #465b6a; font-size: 14px; font-weight: 700; } .ms-cmp3 .ms-cmp3-vals { display: grid; grid-template-columns: repeat(var(--n), minmax(0,1fr)); } .ms-cmp3 .ms-cmp3-vals > div { padding: 9px 6px; text-align: center; border-left: 1px solid #dfe7ee; color: #172b3a; overflow-wrap: break-word; } .ms-cmp3 .ms-cmp3-vals > div:first-child { border-left: 0; } .ms-cmp3 .ms-cmp3-vals > div small { display: block; margin-top: 2px; font-size: 14px; color: #465b6a; line-height: 1.4; } .ms-cmp3 .ms-cmp3-vals > div.is-win { background: #ecfdf3; color: #067647; } .ms-cmp3 .ms-num { font-size: 1.3em; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.2; } .ms-cmp3 .ms-unit { font-size: .75em; font-weight: 700; margin-left: 1px; } .ms-cmp3 .ms-cmp-tag { display: inline-block; margin: 2px 0 0 2px; padding: 0 5px; border-radius: 4px; background: #fde68a; color: #713f12; font-size: 14px; font-weight: 800; line-height: 1.5; vertical-align: 1px; } .ms-cmp3 details.ms-cmp3-more { border-top: 1px solid #dfe7ee; } .ms-cmp3 details.ms-cmp3-more > summary { cursor: pointer; list-style: none; padding: 10px 12px; font-weight: 700; color: #172b3a; } .ms-cmp3 details.ms-cmp3-more > summary::-webkit-details-marker { display: none; } .ms-cmp3 details.ms-cmp3-more > summary::before { content: "▶"; font-size: 11px; margin-right: 6px; color: #465b6a; } .ms-cmp3 details.ms-cmp3-more[open] > summary::before { content: "▼"; } .ms-cmp3 details.ms-cmp3-more > dl { margin: 0 !important; padding: 0 12px 12px; font-size: 15px; } .ms-cmp3 details.ms-cmp3-more dt { margin-top: 8px; font-weight: 800; color: #172b3a; } .ms-cmp3 details.ms-cmp3-more dd { margin: 2px 0 0 !important; color: #172b3a; } .ms-cmp3 .ms-cmp3-foot { margin: 0 !important; padding: 8px 12px 12px; font-size: 14px !important; color: #465b6a; border-top: 1px solid #dfe7ee; line-height: 1.6; } .ms-cmp3 .ms-num { white-space: nowrap; } @media (max-width: 600px) { .ms-cmp3 { font-size: 14px; } .ms-cmp3 .ms-cmp3-vals > div { padding: 8px 4px; } .ms-cmp3[style*="--n:4"] .ms-num { font-size: 1.1em; letter-spacing: -.01em; } .ms-cmp3[style*="--n:4"] .ms-cmp3-vals > div { padding: 8px 3px; } } /* ---- 型C：長文の表は、比べる2〜3列の要約表（.ms-cmp に is-text）＋製品カード（2026-10-10、参考 NerdWallet・mybest） div.ms-pcards > div.ms-pcard > p.ms-pcard-name + p.ms-pcard-who + dl（dt 項目 / dd 内容） */ .ms-pcards { display: grid; gap: 10px; margin: 0 0 1.6em; } .ms-pcard { border: 1px solid #cbd8e1; border-radius: 12px; padding: 12px 14px; background: #fff; } .ms-pcard .ms-pcard-name { margin: 0 !important; font-weight: 800; font-size: 1.05em; color: #172b3a; line-height: 1.4; } .ms-pcard .ms-pcard-who { margin: 2px 0 8px !important; font-weight: 700; font-size: 14px; color: var(--ms-key,#067647); } .ms-pcard dl { display: block; margin: 0 !important; font-size: 15.5px; line-height: 1.7; } .ms-pcard dt { color: #465b6a; font-weight: 700; font-size: 14px; margin-top: 8px; } .ms-pcard dt:first-child { margin-top: 0; } .ms-pcard dd { margin: 0 !important; color: #172b3a; } .ms-pcard dd.is-key { color: var(--ms-key,#b42318); font-weight: 700; } .ms-pcards-cap { margin: 1.6em 0 8px !important; font-weight: 800; font-size: 1.15em; color: #172b3a; line-height: 1.45; } .ms-pcards-cap small { display: block; margin-top: 2px; font-size: 14px; font-weight: 400; color: #465b6a; } .ms-pcards-cap + .ms-pcards { margin-top: 0; } /* ---- 旧部品（codex-mobile-readable-tables）のスマホ表示を読みやすく（2026-10-10）：積んだ表の項目名が10.5pxで「よくある落とし/穴」と折れていたので、項目名を値の上に14pxで置く。2列の表（kv）は縦積みをやめて横並びに戻す */ @media (max-width: 640px) { body .post_content .codex-mobile-table-stack-labeled :is(td,th)[data-codex-label] { grid-template-columns: minmax(0,1fr) !important; row-gap: 1px; } body .post_content .codex-mobile-table-stack-labeled tr > :not(:first-child)[data-codex-label]::before { grid-column: 1 !important; font-size: 14px !important; font-weight: 700 !important; color: #465b6a !important; line-height: 1.5 !important; } body .post_content .codex-mobile-table-stack-labeled .codex-mobile-table-cell-value { grid-column: 1 !important; } body .post_content .codex-mobile-table-kv tr { display: grid !important; grid-template-columns: 8.5em minmax(0, 1fr); } body .post_content .codex-mobile-table-kv tr > :first-child { min-width: 5.5em; } body .post_content .codex-mobile-table-kv tr > :first-child { background: #eef3f7 !important; color: #172b3a !important; font-weight: 700 !important; font-size: 14px !important; border-bottom: 1px solid #c7d5e2 !important; } body .post_content .codex-mobile-table-kv tr > :first-child:last-child { grid-column: 1 / -1; background: #102a43 !important; color: #fff !important; } /* SWELL の td_to_th_（表の1列目を見出しにする）は見出し色を ::before で上に重ねる。上の薄い背景＋紺文字が紺に塗られて読めなかった（2026-10-10 梅小路ポテル京都の施設情報） */ body .post_content .td_to_th_.codex-mobile-table-stack tbody tr > :first-child::before { background: none !important; } } /* ---- 選び方カード・やってよい/避ける・手順ステップ（2026-10-10）。旧表を「項目名を上に積んだだけ」のカードにしたら、答え・理由・注意が同じ強さで並び読みにくかった（SP1 mnpdan、本人指摘）。答えを大きく、注意は注意の色で、強弱を付ける。 選び方: div.ms-picks > div.ms-pick > p.ms-pick-q（こんな人）+ p.ms-pick-a（答え：大きく）| p.ms-pick-title（項目名）+ p.ms-pick-why（理由・本文）+ p.ms-pick-line > b（短い項目）+ p.ms-pick-note（注意）/.is-bad（落とし穴）/ p.ms-pick-ok（安全側）+ p.ms-pick-src（確認した条件）+ a.ms-pick-link やってよい/避ける: div.ms-dodont > div.is-do / div.is-dont > p.ms-dodont-h + ul > li 手順: ol.ms-steps > li > p.ms-step-t（やること見出し）+ p.ms-step-b（本文）+ p.ms-step-c（確認ポイント） */ .ms-picks { display: grid; gap: 12px; margin: 1.6em 0; } .ms-pick { border: 1px solid #d6e1ea; border-radius: 12px; padding: 14px 16px; background: #fff; box-shadow: 0 2px 8px rgba(18,50,79,.05); } .ms-pick > p { margin: 0 0 6px !important; } .ms-pick > :last-child { margin-bottom: 0 !important; } .ms-pick .ms-pick-q { font-size: 14px; font-weight: 700; color: #465b6a; line-height: 1.5; } .ms-pick .ms-pick-q::before { content: "こんな人は"; display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 4px; background: #eef3f7; font-size: 14px; color: #465b6a; } .ms-pick .ms-pick-a { font-size: 21px; font-weight: 800; color: var(--ms-head,#172b3a); line-height: 1.35; margin-bottom: 8px !important; } .ms-pick .ms-pick-a::before { content: "→ "; color: var(--ms-key,#b42318); } .ms-pick .ms-pick-title { font-size: 18px; font-weight: 800; color: #172b3a; line-height: 1.45; } .ms-pick .ms-pick-why { font-size: 16px; line-height: 1.75; color: #172b3a; } .ms-pick .ms-pick-line { font-size: 15px; line-height: 1.7; color: #172b3a; } .ms-pick .ms-pick-line b { display: block; font-size: 14px; font-weight: 700; color: #465b6a; line-height: 1.5; } .ms-pick .ms-pick-note, .ms-pick .ms-pick-ok { margin-top: 8px !important; padding: 8px 10px; border-radius: 8px; font-size: 14.5px; line-height: 1.65; } .ms-pick .ms-pick-note { background: #fff7e6; color: #6b3f00; } .ms-pick .ms-pick-note::before { content: "注意"; font-weight: 800; margin-right: 6px; } .ms-pick .ms-pick-note.is-bad { background: #fdecec; color: #8a1c1c; } .ms-pick .ms-pick-note.is-bad::before { content: "✕ 落とし穴"; } .ms-pick .ms-pick-ok { background: #ecfdf3; color: #05603a; } .ms-pick .ms-pick-ok::before { content: "✓ 確認"; font-weight: 800; margin-right: 6px; } .ms-pick .ms-pick-src { font-size: 14px; color: #52667a; line-height: 1.6; } .ms-pick .ms-pick-src::before { content: "公式条件："; font-weight: 700; } .ms-pick .ms-pick-link { display: inline-block; margin-top: 8px; font-weight: 700; } .ms-pick .ms-pick-link::after { content: " →"; } .ms-dodont { display: grid; gap: 10px; margin: 1.6em 0; } .ms-dodont > div { border-radius: 12px; padding: 12px 14px; } .ms-dodont > .is-do { background: #ecfdf3; border: 1px solid #abefc6; } .ms-dodont > .is-dont { background: #fdf0f0; border: 1px solid #f5c2c2; } .ms-dodont .ms-dodont-h { margin: 0 0 4px !important; font-weight: 800; font-size: 16px; } .ms-dodont > .is-do .ms-dodont-h { color: #05603a; } .ms-dodont > .is-dont .ms-dodont-h { color: #8a1c1c; } .ms-dodont ul { margin: 0 !important; padding: 0 !important; list-style: none !important; } .ms-dodont li { position: relative; margin: 6px 0 0 !important; padding: 0 0 0 1.6em !important; line-height: 1.65; font-size: 15.5px; color: #172b3a; list-style: none !important; } .ms-dodont li::before { position: absolute; left: 0; top: 0; font-weight: 800; background: none !important; width: auto !important; height: auto !important; border: 0 !important; } .ms-dodont > .is-do li::before { content: "✓"; color: #067647; } .ms-dodont > .is-dont li::before { content: "✕"; color: #b42318; } .ms-steps { list-style: none !important; margin: 1.6em 0 !important; padding: 0 !important; counter-reset: ms-step; } .ms-steps > li { position: relative; margin: 0 !important; padding: 0 0 18px 46px !important; list-style: none !important; } .ms-steps > li::before { counter-increment: ms-step; content: counter(ms-step); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--ms-head,#172b3a); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; } .ms-steps > li::after { content: ""; position: absolute; left: 15px; top: 36px; bottom: 4px; width: 2px; background: #d6e1ea; } .ms-steps > li:last-child::after { display: none; } .ms-steps .ms-step-t { margin: 3px 0 4px !important; font-weight: 800; font-size: 16.5px; line-height: 1.5; color: #172b3a; } .ms-steps .ms-step-b { margin: 0 0 6px !important; font-size: 15.5px; line-height: 1.7; } .ms-steps .ms-step-c { margin: 0 !important; padding: 6px 10px; border-radius: 8px; background: #f1f5f8; font-size: 14.5px; line-height: 1.6; color: #172b3a; } .ms-steps .ms-step-c::before { content: "確認"; font-weight: 800; margin-right: 6px; color: var(--ms-key,#b42318); } @media (min-width: 768px) { .ms-picks.is-cols { grid-template-columns: repeat(2, minmax(0,1fr)); } .ms-dodont { grid-template-columns: 1fr 1fr; } } /* 旧部品の積んだ表（全記事）に強弱を付ける（2026-10-10）：紺の帯が答えより強く、全項目が罫線で同じ強さに並んでいた。見出しは淡い地＋左の線、項目の罫線は消して余白で区切る */ @media (max-width: 640px) { body .post_content .codex-mobile-table-stack-labeled tr { border: 1px solid #d6e1ea !important; border-radius: 10px !important; margin: 0 0 10px !important; overflow: hidden; } body .post_content .codex-mobile-table-stack-labeled table { border: 0 !important; background: transparent !important; } body .post_content .codex-mobile-table-stack-labeled tr > :first-child { display: block !important; width: 100% !important; max-width: none !important; min-width: 0 !important; box-sizing: border-box !important; background: #eef4f8 !important; color: #12324f !important; font-size: 16px !important; font-weight: 800 !important; border-left: 4px solid var(--ms-head,#12324f) !important; border-bottom: 0 !important; padding: 9px 12px !important; } body .post_content .codex-mobile-table-stack-labeled tr > :not(:first-child) { border-bottom: 0 !important; padding: 7px 12px 5px !important; font-size: 15px !important; } body .post_content .codex-mobile-table-stack-labeled tr > :last-child { padding-bottom: 12px !important; } } /* 行見出し（名前）は単語の途中で折らない（2026-10-10：「お城通り善意駐車/場」「シンレンタルサー/バー」）。折ってよい位置は本文で を入れる（例：お城通り善意駐車場、シンレンタルサーバー）。長すぎる時だけ折る */ .ms-cmp .ms-cmp-table tbody th, .ms-wt .ms-wt-table tbody th, .ms-cmp3 .ms-cmp3-head > div { word-break: keep-all; overflow-wrap: break-word; } .ms-cmp .ms-cmp-table tbody th small, .ms-wt .ms-wt-table tbody th small { word-break: normal; } /* ---- 特典ごとの行（2026-10-10）：1社に特典が複数あるポイントサイト等。条件の長文カードが「文字の壁」で、金額と期限が埋もれた（招待コードナビ 2415、本人指摘）。 div.ms-pcard > p.ms-pcard-name + ul.ms-rewards > li > span.ms-rw-amt（金額：大きく）+ span.ms-rw-cond（条件）+ span.ms-rw-due（期限：無ければ省く。「期限」の印が付くので、向いている人・注意は入れず cond 内の
へ。2026-10-11 招待コードナビ ahamo-invite で誤用） */ .ms-pcard ul.ms-rewards { list-style: none !important; margin: 6px 0 0 !important; padding: 0 !important; } .ms-pcard ul.ms-rewards > li { list-style: none !important; margin: 0 !important; padding: 10px 0 !important; border-top: 1px solid #e3eaf0; display: grid; grid-template-columns: minmax(0,1fr); row-gap: 3px; } .ms-pcard ul.ms-rewards > li::before { content: none !important; display: none !important; } .ms-pcard ul.ms-rewards > li:first-child { border-top: 0; padding-top: 4px !important; } .ms-pcard .ms-rw-amt { font-size: 19px; font-weight: 800; color: var(--ms-head,#172b3a); line-height: 1.35; } .ms-pcard .ms-rw-amt small { font-size: 14px; font-weight: 700; color: #465b6a; margin-right: 4px; } .ms-pcard .ms-rw-cond { font-size: 15px; line-height: 1.65; color: #172b3a; } .ms-pcard .ms-rw-due { justify-self: start; margin-top: 2px; padding: 2px 8px; border-radius: 6px; background: var(--ms-key-bg,#fff4f2); color: var(--ms-key,#b42318); font-size: 14px; font-weight: 700; line-height: 1.5; } .ms-pcard .ms-rw-due::before { content: "期限 "; } /* 型Aの値：良い／悪いを色と記号で（2026-10-10、SP1 アキッパ）。.ms-wt-ok（✓ 緑）・.ms-wt-ng（✕ 赤）、補足は small で下に */ .ms-wt .ms-wt-ok, .ms-wt .ms-wt-ng { font-weight: 800; white-space: nowrap; } .ms-wt .ms-wt-ok { color: #067647; } .ms-wt .ms-wt-ng { color: #b42318; } .ms-wt .ms-wt-ok::before { content: "✓ "; } .ms-wt .ms-wt-ng::before { content: "✕ "; } .ms-wt td small { display: block; margin-top: 2px; font-size: 14px; font-weight: 400; color: #52667a; white-space: normal; line-height: 1.45; } .ms-wt.is-text-left .ms-wt-table td { text-align: left !important; } .ms-wt .ms-wt-table thead th { white-space: normal !important; word-break: keep-all; overflow-wrap: break-word; } .ms-wt td small { word-break: keep-all; overflow-wrap: break-word; } @media (min-width: 768px) { .ms-pcards { grid-template-columns: repeat(2, minmax(0,1fr)); } } /* ---- 2026-10-10 4列以上の比較表をスマホ幅に収める（右端の列が切れて読めなかった）。数値（.ms-num と単位）は折らず、文の値は折り返す ---- */ .ms-cmp { overflow-x: auto; -webkit-overflow-scrolling: touch; } @media (max-width: 600px) { .ms-cmp .ms-cmp-table tbody td { white-space: normal !important; word-break: keep-all; overflow-wrap: anywhere; } .ms-cmp .ms-cmp-table tbody td:has(> .ms-num) { white-space: nowrap !important; } .ms-cmp .ms-cmp-table .ms-num { white-space: nowrap; } .ms-cmp .ms-cmp-table:has(thead th:nth-child(4)) tbody th { min-width: min(6.2em, 27vw); font-size: 14px !important; } .ms-cmp .ms-cmp-table:has(thead th:nth-child(4)) :is(th,td) { padding: 9px 4px !important; } .ms-cmp .ms-cmp-table:has(thead th:nth-child(4)) thead th { font-size: 14px !important; padding: 8px 3px !important; } .ms-cmp .ms-cmp-table:has(thead th:nth-child(4)) .ms-num { font-size: 1.08em; } .ms-cmp .ms-cmp-table:has(thead th:nth-child(4)) tbody td { font-size: 14px; } /* 文のセルの補足も折り返す（「通話無制限（Rakuten Link）」の nowrap で3列表が枠を超えた。SP1 26135、2026-10-10） */ .ms-cmp .ms-cmp-table tbody td.is-text small { white-space: normal !important; word-break: keep-all; overflow-wrap: anywhere; } } /* ---- リストの用途別部品（2026-10-10）：リストがほぼ黒丸か数字だけで、条件・日付が長文に埋もれた（ハリマップ ako-hamazushi の出店経緯 1項目平均73字、招待コードナビの申込手順、本人「表やリストも」）。 使い分け：条件・持ち物・確認事項＝ul.ms-check、手順＝ol.ms-steps（上）、日付の経緯＝ol.ms-tl、やってよい/避ける＝.ms-dodont（上）。並べるだけの短い語はふつうのリストのまま。 チェック: ul.ms-check > li > b（要点）+ 本文 タイムライン: ol.ms-tl > li > span.ms-tl-date（日付）+ b（出来事）+ 本文。li.is-now は「いま」の項目（強調色） */ ul.ms-check { list-style: none !important; margin: 1.5em 0 !important; padding: 10px 14px !important; border: 1px solid #d6e1ea; border-radius: 12px; background: #f8fbfd; } ul.ms-check > li { position: relative; list-style: none !important; margin: 0 !important; padding: 9px 0 9px 32px !important; border-top: 1px dashed #d6e1ea; font-size: 15.5px; line-height: 1.7; color: #172b3a; } ul.ms-check > li:first-child { border-top: 0; } ul.ms-check > li::before { content: "✓" !important; position: absolute; left: 0; top: 11px; box-sizing: border-box; width: 22px !important; height: 22px !important; border: 0 !important; border-radius: 6px; background: var(--ms-head,#172b3a) !important; color: #fff !important; font-size: 13px; font-weight: 800; line-height: 22px; text-align: center; transform: none !important; } ul.ms-check > li > b:first-child, ul.ms-check > li > strong:first-child { display: block; font-size: 16px; font-weight: 800; line-height: 1.5; margin-bottom: 2px; background: none !important; } ol.ms-tl { list-style: none !important; margin: 1.6em 0 !important; padding: 0 0 0 11px !important; counter-reset: none; } ol.ms-tl > li { position: relative; list-style: none !important; margin: 0 !important; padding: 0 0 18px 24px !important; border-left: 2px solid #d6e1ea; font-size: 15.5px; line-height: 1.7; color: #172b3a; } ol.ms-tl > li:last-child { border-left-color: transparent; padding-bottom: 0 !important; } ol.ms-tl > li::before { content: "" !important; position: absolute; left: -9px; top: 3px; box-sizing: border-box; width: 16px !important; height: 16px !important; border-radius: 50%; background: #fff !important; border: 3px solid var(--ms-head,#172b3a) !important; transform: none !important; } ol.ms-tl > li.is-now::before { background: var(--ms-key,#b42318) !important; border-color: var(--ms-key,#b42318) !important; } ol.ms-tl .ms-tl-date { display: table; margin: 0 0 4px; padding: 1px 8px; border-radius: 6px; background: var(--ms-key-bg,#fff4f2); color: var(--ms-key,#b42318); font-size: 14px; font-weight: 800; line-height: 1.5; } ol.ms-tl > li > b, ol.ms-tl > li > strong { display: block; font-size: 16px; font-weight: 800; line-height: 1.5; margin-bottom: 2px; background: none !important; } /* ふつうのリストの行間・余白をそろえる（項目どうしが詰まり、2行に折れた項目の区切りが見えなかった）。部品と枠付きリスト（クラス付き）は触らない */ .post_content > :is(ul,ol):is(:not([class]),.wp-block-list):not([class*="is-style"]) > li { margin: .55em 0 !important; line-height: 1.75; } .post_content > :is(ul,ol):is(:not([class]),.wp-block-list) > li > :is(b,strong):first-child { color: var(--ms-head,#172b3a); } .ms-dodont:has(> div:only-child) { grid-template-columns: 1fr !important; } :root{--ms-head:#173b64;} /* 申込先の枠とボタン（tools/affmiss_insert.py が足す .ms-apply / .ms-apply-mid）。全サイト共通、色は --ms-head（各サイトの比較表と同じ）。 ボタンは高さ48px以上・16px・白文字（コントラスト4.5:1以上）、スマホでは横幅いっぱい。 */ .post_content .ms-apply{margin:2em 0 1.5em;padding:16px 16px 10px;border:2px solid var(--ms-head,#173b64);border-radius:10px;background:#f7f9fc} .post_content .ms-apply__title{margin:0 0 10px!important;font-size:17px;font-weight:700;color:var(--ms-head,#173b64);line-height:1.5} .post_content .ms-apply p{margin:0 0 10px} .post_content .ms-apply__btn,.post_content .ms-apply-mid .ms-apply__btn{display:flex;align-items:center;justify-content:center;gap:.4em;box-sizing:border-box;width:100%;min-height:52px;padding:10px 16px;border-radius:8px;background:var(--ms-head,#173b64);color:#fff!important;font-size:16px;font-weight:700;line-height:1.45;text-align:center;text-decoration:none!important;box-shadow:0 2px 0 rgba(0,0,0,.18)} .post_content .ms-apply__btn::after{content:"›";font-size:1.3em;line-height:1} .post_content .ms-apply__btn:hover{filter:brightness(1.12)} #body_wrap .post_content .ms-apply__btn:focus-visible{outline:3px solid #2454db!important;outline-offset:3px!important} .post_content .ms-apply__sub{display:block;margin-top:4px;font-size:14px;color:#3d4652} .post_content .ms-apply__note{margin:4px 0 6px!important;font-size:14px;color:#3d4652;line-height:1.6} .post_content .ms-apply-mid{margin:1.2em 0 1.6em} @media (min-width:768px){.post_content .ms-apply__btn{width:auto;min-width:min(100%,420px);display:inline-flex}.post_content .ms-apply p{display:block}} /* 比較表の製品の行の直後に置く購入ボタン行（tools/mono_section_buttons.py table_rows、2026-10-10本人「比較表の中に購入ボタン」）。3モールを横に並べ、押しやすい高さを保つ */ .post_content tr.mh-buy-row > td{padding:4px 6px 12px!important;background:#fff!important;border-top:0!important;text-align:left!important;white-space:normal!important} .post_content .mh-row-buy{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:6px;margin:0} .post_content .mh-row-buy a.mh-price-btn{display:flex!important;flex-direction:column;align-items:center!important;justify-content:center!important;width:100%!important;min-width:0!important;min-height:48px!important;margin:0!important;padding:6px 4px!important;font-size:13px!important;line-height:1.3!important;box-sizing:border-box!important} .post_content .mh-row-buy .mh-price-btn__date{display:none!important} .post_content .mh-row-buy a.mh-price-btn{padding:5px 4px!important;gap:1px!important;overflow:hidden} .post_content .mh-row-buy .mh-price-btn__head,.post_content .mh-row-buy .mh-price-btn__mall{font-size:11px!important;letter-spacing:-.02em;line-height:1.25!important;white-space:nowrap!important;margin:0!important} .post_content .mh-row-buy .mh-price-btn__main,.post_content .mh-row-buy .mh-price-btn__price{font-size:15px!important;line-height:1.25!important;white-space:nowrap!important;margin:0!important} .post_content .mh-row-buy .mh-price-btn__action{font-size:12.5px!important;white-space:normal!important;line-height:1.25!important;text-align:center} /* 提携リンクのボタンをリンク先サービスのイメージカラーにする。tools/brand_colors.py が assets/brand-colors.json から作る（手で直さない） */ #body_wrap .post_content a:is(.ms-apply__btn,.wp-block-button__link,.swell-block-button__link,[class*="btn"],[class*="button"],[style*="background"]):is([href*="valuecommerce.com"],[href*="afl.rakuten.co.jp"],[href*="a8.net"],[href*="accesstrade.net"],[href*="linksynergy.com"],[href*="moshimo.com"],[href*="trafficgate.net"],[href*="rentracks.jp"],[href*="felmat.net"],[href*="afi-b.com"],[href*="amazon.co.jp"][href*="tag="],[href*="amzn."],[href^="https://shopping.yahoo.co.jp/"],[href^="https://store.shopping.yahoo.co.jp/"],[href^="https://travel.yahoo.co.jp/"],[href^="https://www.asoview.com/"],[href^="https://www.ikyu.com/"],[href^="https://www.jalan.net/"],[href^="https://www.jtb.co.jp/"],[href^="https://www.kkday.com/"],[href^="https://www.klook.com/"],[href^="https://yado.knt.co.jp/"]):is([href*="0100p03h00"],[href*="35FBA6+BA1SQY+50"],[href*="35FBA6+BET9L6+50"],[href*="4B7VKV+123W4I+3NAY"],[href*="4B7VKV+123WWA+3NAY"],[href*="4B85OZ+E39HL6+5W12"],[href*="4B9XTA+C1FQKQ+50"],[href*="4BEA4X+3NKYVE+7QW"],[href*="4BEA51+4V1L9E+35UM"],[href*="4BEET2+50ZY2Y+59RY"],[href*="4BEFL7+D2CMUQ+2WL0"],[href*="4BEGD9+D8AY4Q+5XHK"],[href*="4BEJHC+F5D8AY+4WD6"],[href*="4BEL1G+9RVDGY+3ZZC"],[href*="4BEL1J+4FKCAY+4KHO"],[href*="4BEMLP+7MH022+1LOO"],[href*="akippa.com"],[href*="algo.promo"],[href*="amazon.co.jp"],[href*="amzn.asia"],[href*="amzn.to"],[href*="asoview.com"],[href*="asus.com"],[href*="cado.com"],[href*="conoha.jp"],[href*="deli-picks.com"],[href*="dell.com"],[href*="dyson.co.jp"],[href*="gmktec.com"],[href*="gmobb.jp"],[href*="gnavi.co.jp"],[href*="ikyu.com"],[href*="interlink.or.jp"],[href*="irobot-jp.com"],[href*="jalan.net"],[href*="jtb.co.jp"],[href*="knt.co.jp"],[href*="lenovo.com"],[href*="macromill.com"],[href*="monitor.macromill.com"],[href*="nishikawa1566.com"],[href*="ns-softbank-hikari.com"],[href*="nta.co.jp"],[href*="o-ken.com"],[href*="offerid=1728655"],[href*="offerid=2040720"],[href*="rakuten.co.jp"],[href*="rental-car.jp"],[href*="rog.asus.com"],[href*="tabelog.com"],[href*="ticket.rakuten.co.jp"],[href*="travel.rakuten.co.jp"],[href*="warau.jp"],[href*="yahoo.co.jp"]){background:var(--se-brand-bg)!important;background-color:var(--se-brand-bg)!important;border-color:var(--se-brand-bg)!important;color:var(--se-brand-text)!important} #body_wrap .post_content a:is(.ms-apply__btn,.wp-block-button__link,.swell-block-button__link,[class*="btn"],[class*="button"],[style*="background"]):is([href*="valuecommerce.com"],[href*="afl.rakuten.co.jp"],[href*="a8.net"],[href*="accesstrade.net"],[href*="linksynergy.com"],[href*="moshimo.com"],[href*="trafficgate.net"],[href*="rentracks.jp"],[href*="felmat.net"],[href*="afi-b.com"],[href*="amazon.co.jp"][href*="tag="],[href*="amzn."],[href^="https://shopping.yahoo.co.jp/"],[href^="https://store.shopping.yahoo.co.jp/"],[href^="https://travel.yahoo.co.jp/"],[href^="https://www.asoview.com/"],[href^="https://www.ikyu.com/"],[href^="https://www.jalan.net/"],[href^="https://www.jtb.co.jp/"],[href^="https://www.kkday.com/"],[href^="https://www.klook.com/"],[href^="https://yado.knt.co.jp/"]):is([href*="0100p03h00"],[href*="35FBA6+BA1SQY+50"],[href*="35FBA6+BET9L6+50"],[href*="4B7VKV+123W4I+3NAY"],[href*="4B7VKV+123WWA+3NAY"],[href*="4B85OZ+E39HL6+5W12"],[href*="4B9XTA+C1FQKQ+50"],[href*="4BEA4X+3NKYVE+7QW"],[href*="4BEA51+4V1L9E+35UM"],[href*="4BEET2+50ZY2Y+59RY"],[href*="4BEFL7+D2CMUQ+2WL0"],[href*="4BEGD9+D8AY4Q+5XHK"],[href*="4BEJHC+F5D8AY+4WD6"],[href*="4BEL1G+9RVDGY+3ZZC"],[href*="4BEL1J+4FKCAY+4KHO"],[href*="4BEMLP+7MH022+1LOO"],[href*="akippa.com"],[href*="algo.promo"],[href*="amazon.co.jp"],[href*="amzn.asia"],[href*="amzn.to"],[href*="asoview.com"],[href*="asus.com"],[href*="cado.com"],[href*="conoha.jp"],[href*="deli-picks.com"],[href*="dell.com"],[href*="dyson.co.jp"],[href*="gmktec.com"],[href*="gmobb.jp"],[href*="gnavi.co.jp"],[href*="ikyu.com"],[href*="interlink.or.jp"],[href*="irobot-jp.com"],[href*="jalan.net"],[href*="jtb.co.jp"],[href*="knt.co.jp"],[href*="lenovo.com"],[href*="macromill.com"],[href*="monitor.macromill.com"],[href*="nishikawa1566.com"],[href*="ns-softbank-hikari.com"],[href*="nta.co.jp"],[href*="o-ken.com"],[href*="offerid=1728655"],[href*="offerid=2040720"],[href*="rakuten.co.jp"],[href*="rental-car.jp"],[href*="rog.asus.com"],[href*="tabelog.com"],[href*="ticket.rakuten.co.jp"],[href*="travel.rakuten.co.jp"],[href*="warau.jp"],[href*="yahoo.co.jp"]) :not(img){color:var(--se-brand-text)!important} #body_wrap .post_content a[href*="amzn.to"]{--se-brand-bg:#ff9900;--se-brand-text:#0f1111} #body_wrap .post_content a[href*="asus.com"]{--se-brand-bg:#b3b3b3;--se-brand-text:#1a1a1a} #body_wrap .post_content a[href*="cado.com"]{--se-brand-bg:#27282d;--se-brand-text:#ffffff} #body_wrap .post_content a[href*="dell.com"]{--se-brand-bg:#0073cd;--se-brand-text:#ffffff} #body_wrap .post_content a[href*="gmobb.jp"]{--se-brand-bg:#005bac;--se-brand-text:#ffffff} #body_wrap .post_content a[href*="ikyu.com"]{--se-brand-bg:#1a4678;--se-brand-text:#ffffff} #body_wrap .post_content a[href*="warau.jp"]{--se-brand-bg:#eb1315;--se-brand-text:#ffffff} #body_wrap .post_content a[href*="amzn.asia"]{--se-brand-bg:#ff9900;--se-brand-text:#0f1111} #body_wrap .post_content a[href*="conoha.jp"]{--se-brand-bg:#12b8d7;--se-brand-text:#1a1a1a} #body_wrap .post_content a[href*="jalan.net"]{--se-brand-bg:#ff6600;--se-brand-text:#1a1a1a} #body_wrap .post_content a[href*="jtb.co.jp"]{--se-brand-bg:#d04510;--se-brand-text:#ffffff} #body_wrap .post_content a[href*="knt.co.jp"]{--se-brand-bg:#024299;--se-brand-text:#ffffff} #body_wrap .post_content a[href*="nta.co.jp"]{--se-brand-bg:#111184;--se-brand-text:#ffffff} #body_wrap .post_content a[href*="o-ken.com"]{--se-brand-bg:#1d3b4e;--se-brand-text:#ffffff} #body_wrap .post_content a[href*="akippa.com"]{--se-brand-bg:#000000;--se-brand-text:#ffffff} #body_wrap .post_content a[href*="algo.promo"]{--se-brand-bg:#000000;--se-brand-text:#ffffff} #body_wrap .post_content a[href*="gmktec.com"]{--se-brand-bg:#454546;--se-brand-text:#ffffff} #body_wrap .post_content a[href*="lenovo.com"]{--se-brand-bg:#e3140c;--se-brand-text:#ffffff} #body_wrap .post_content a[href*="0100p03h00"]{--se-brand-bg:#000000;--se-brand-text:#ffffff} #body_wrap .post_content a[href*="asoview.com"]{--se-brand-bg:#eb0000;--se-brand-text:#ffffff} #body_wrap .post_content a[href*="dyson.co.jp"]{--se-brand-bg:#000000;--se-brand-text:#ffffff} #body_wrap .post_content a[href*="gnavi.co.jp"]{--se-brand-bg:#f1b145;--se-brand-text:#1a1a1a} #body_wrap .post_content a[href*="tabelog.com"]{--se-brand-bg:#7e5b24;--se-brand-text:#ffffff} #body_wrap .post_content a[href*="yahoo.co.jp"]{--se-brand-bg:#e60033;--se-brand-text:#ffffff} #body_wrap .post_content a[href*="amazon.co.jp"]{--se-brand-bg:#ff9900;--se-brand-text:#0f1111} #body_wrap .post_content a[href*="rog.asus.com"]{--se-brand-bg:#ea0a19;--se-brand-text:#ffffff} #body_wrap .post_content a[href*="irobot-jp.com"]{--se-brand-bg:#6cb86a;--se-brand-text:#1a1a1a} #body_wrap .post_content a[href*="macromill.com"]{--se-brand-bg:#0052a4;--se-brand-text:#ffffff} #body_wrap .post_content a[href*="rakuten.co.jp"]{--se-brand-bg:#bf0000;--se-brand-text:#ffffff} #body_wrap .post_content a[href*="rental-car.jp"]{--se-brand-bg:#f1ab10;--se-brand-text:#1a1a1a} #body_wrap .post_content a[href*="deli-picks.com"]{--se-brand-bg:#000000;--se-brand-text:#ffffff} #body_wrap .post_content a[href*="offerid=2040720"]{--se-brand-bg:#f1b145;--se-brand-text:#1a1a1a} #body_wrap .post_content a[href*="interlink.or.jp"]{--se-brand-bg:#0060af;--se-brand-text:#ffffff} #body_wrap .post_content a[href*="offerid=1728655"]{--se-brand-bg:#8020cb;--se-brand-text:#ffffff} #body_wrap .post_content a[href*="35FBA6+BA1SQY+50"]{--se-brand-bg:#12b8d7;--se-brand-text:#1a1a1a} #body_wrap .post_content a[href*="35FBA6+BET9L6+50"]{--se-brand-bg:#12b8d7;--se-brand-text:#1a1a1a} #body_wrap .post_content a[href*="4B9XTA+C1FQKQ+50"]{--se-brand-bg:#005bac;--se-brand-text:#ffffff} #body_wrap .post_content a[href*="4BEA4X+3NKYVE+7QW"]{--se-brand-bg:#0060af;--se-brand-text:#ffffff} #body_wrap .post_content a[href*="nishikawa1566.com"]{--se-brand-bg:#d71623;--se-brand-text:#ffffff} #body_wrap .post_content a[href*="4B7VKV+123W4I+3NAY"]{--se-brand-bg:#000000;--se-brand-text:#ffffff} #body_wrap .post_content a[href*="4B7VKV+123WWA+3NAY"]{--se-brand-bg:#000000;--se-brand-text:#ffffff} #body_wrap .post_content a[href*="4BEGD9+D8AY4Q+5XHK"]{--se-brand-bg:#000000;--se-brand-text:#ffffff} #body_wrap .post_content a[href*="4BEET2+50ZY2Y+59RY"]{--se-brand-bg:#27282d;--se-brand-text:#ffffff} #body_wrap .post_content a[href*="4BEJHC+F5D8AY+4WD6"]{--se-brand-bg:#000000;--se-brand-text:#ffffff} #body_wrap .post_content a[href*="4B85OZ+E39HL6+5W12"]{--se-brand-bg:#454546;--se-brand-text:#ffffff} #body_wrap .post_content a[href*="4BEL1J+4FKCAY+4KHO"]{--se-brand-bg:#6cb86a;--se-brand-text:#1a1a1a} #body_wrap .post_content a[href*="4BEFL7+D2CMUQ+2WL0"]{--se-brand-bg:#ff5300;--se-brand-text:#1a1a1a} #body_wrap .post_content a[href*="4BEMLP+7MH022+1LOO"]{--se-brand-bg:#1d3b4e;--se-brand-text:#ffffff} #body_wrap .post_content a[href*="4BEA51+4V1L9E+35UM"]{--se-brand-bg:#f1ab10;--se-brand-text:#1a1a1a} #body_wrap .post_content a[href*="4BEL1G+9RVDGY+3ZZC"]{--se-brand-bg:#eb1315;--se-brand-text:#ffffff} #body_wrap .post_content a[href*="ticket.rakuten.co.jp"]{--se-brand-bg:#8020cb;--se-brand-text:#ffffff} #body_wrap .post_content a[href*="travel.rakuten.co.jp"]{--se-brand-bg:#00b800;--se-brand-text:#1a1a1a} #body_wrap .post_content a[href*="monitor.macromill.com"]{--se-brand-bg:#ff5300;--se-brand-text:#1a1a1a} #body_wrap .post_content a[href*="ns-softbank-hikari.com"]{--se-brand-bg:#000000;--se-brand-text:#ffffff} .c-pagination:not(:has(a)){display:none} #body_wrap ul.page-numbers{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;height:auto;min-width:0;line-height:normal;margin:24px 0;padding:0;background:none;box-shadow:none;list-style:none} #body_wrap ul.page-numbers > li{margin:0;padding:0;list-style:none} #body_wrap :is(a,span)[class*="page-numbers"]{height:48px;min-width:48px;line-height:48px;font-size:16px;border-radius:8px;box-sizing:border-box} #body_wrap :is(a,span)[class*="page-numbers"]:not(.current):not(.dots){background:#fff;color:#1f2937;border:1px solid #cbd5e1;box-shadow:none} #body_wrap :is(a,span)[class*="page-numbers"]:not(.current):not(.dots):hover{background:#f1f5f9;color:#111827;border-color:#64748b} #body_wrap :is(a,span)[class*="page-numbers"].current{background:#b4501a;color:#fff;border:1px solid transparent;font-weight:700} #body_wrap :is(a,span)[class*="page-numbers"].dots{background:none;color:#4b5563;box-shadow:none} :is(body,#body_wrap).single #main_content .c-postTitle__ttl,:is(body,#body_wrap).page #main_content .c-postTitle__ttl{font-size:23px!important;line-height:1.45!important;letter-spacing:.01em!important} @media (min-width:768px){ :is(body,#body_wrap).single #main_content .c-postTitle__ttl,:is(body,#body_wrap).page #main_content .c-postTitle__ttl{font-size:34px!important;line-height:1.4!important} #body_wrap.codex-mh-v5.single-post.single #main_content article .post_content:not(.p-blogParts):not(.p-toc) h2{font-size:26px!important;line-height:1.45!important} } /* モノヒカクの部品の細かな直し（定期タスク claude-ux-research の「一つずつ見る」で見つけたもの。台帳 units の note に結ぶ）。 2026-10-11 いまが買い時の枠：特典が1件だけの日、PC では1枚のカードが幅の4割で左に寄り右が空いていた（スマホは既に全幅）。1件の時は全幅にする。 枠の位置・中身・クラス名は変えない（位置は A/B テスト 20261010-campaign-ab-measure で決める）。 */ .mh-campaign-box.mhc .mhc-card:only-child{flex-basis:100%} /* 2026-10-12 claude-sitewide-review design top_sections：トップの記事枠（いま比較する製品・購入先と価格を比べる）のサムネイルが スマホ100×92px・PC120×112pxのほぼ正方形に切り抜かれ、16:9のアイキャッチの文字（「衣類乾燥除湿機」「SUNEAST SA5K」）が欠けていた。 16:9のまま全体を見せ、説明文は1行の「…」切れ（「2026年10月時点の現行モデル…」で型番に届かない）を2行にして比べる材料を読めるようにする。 design system v5（snippet 85）は変えず、ここで上書き。戻し方：この段落を消して sitewide_css.py で配り直す。 */ #body_wrap.home .mhz-grid .mhz-item.has-image > img{height:auto!important;aspect-ratio:16/9;object-fit:cover!important;align-self:center} #body_wrap.home .mhz-grid .mhz-item.has-image{grid-template-columns:10rem minmax(0,1fr) 1rem!important} #body_wrap.home .mhz-grid .mhz-item.has-image > img{width:10rem!important} @media (max-width:767px){ #body_wrap.home .mhz-grid .mhz-item.has-image{grid-template-columns:7.5rem minmax(0,1fr) .75rem!important;column-gap:.75rem!important} #body_wrap.home .mhz-grid .mhz-item.has-image > img{width:7.5rem!important} #body_wrap.home .mhz-grid .mhz-item.has-image > span > small{-webkit-line-clamp:2!important} } @media (max-width:359px){ #body_wrap.home .mhz-grid .mhz-item.has-image{grid-template-columns:6rem minmax(0,1fr) .65rem!important} #body_wrap.home .mhz-grid .mhz-item.has-image > img{width:6rem!important} } /* 2026-10-12 14:10 claude-sitewide-review（car-comfort-tire の巡回）：記事内の部品の文字が方針の下限14pxに届いていなかった。 目次のリンク13.5px、価格ボタンのモール名12px・補足（送料別・取付予約OK）11.5px、比較表の行ラベル13px・単位10.5px、 関連比較のラベル12px、タイヤ価格ツールの補助行12〜13px。記事上キャンペーン（mhc-*）は触らない。 戻し方：この段落を消して sitewide_css.py で配り直す（退避 monohikaku-operations/state/part_fixes.css.bak-20261012-1410）。 */ #body_wrap .p-toc__link,#body_wrap .mh-related-comparisons__label,#body_wrap .ms-cmp3-lab{font-size:14px!important} #body_wrap .mh-price-btn__mall,#body_wrap .mh-price-btn__note{font-size:14px!important;line-height:1.3} #body_wrap .ms-unit{font-size:14px!important} #body_wrap .mh-tire :is(.mh-tire__sub,.mh-tire__foot,.mh-tire__four,.mh-tire__tag,.mh-tire__label,.mh-tire__price small){font-size:14px!important} /* 開閉の見出し（details>summary）のタップ領域を44px以上にそろえる（2026-10-11 claude-ux-research、台帳 20261010-details-summary-44px）。 Apple HIG 44pt・Material 48dp。SP1 の問い合わせの開閉が29px、モノヒカクの「条件・注意点を見る」が42pxだった（390px実測）。 min-height は低いものだけを伸ばす。上下の余白は :where() で詳細度0にして、テーマや部品が余白を指定している所はそちらを優先する。 */ summary{min-height:44px;box-sizing:border-box} :where(summary){padding-top:7px;padding-bottom:7px} /* モノヒカク：比較表のセルに3モールの価格ボタンだけが並ぶ時、PC（768px以上）では横並びにする（2026-10-11 claude-ux-research の部品見直し）。 air-cooler-comparison の比較表が PC 1280px で縦に3つずつ積まれ高さ1130px → 横並びで558px（実測）。スマホは縦積みのまま（横並びにすると伸びた）。 ボタンの中身・色・順番・リンクは変えない。戻し方：sitewide_css.py --site monohikaku --css assets/monohikaku/price_btn_row.css --name "Claude: price btn row" --deactivate */ @media(min-width:768px){ .post_content td .codex-mobile-table-cell-value:has(> a.mh-price-btn ~ a.mh-price-btn){display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;align-items:stretch} .post_content td .codex-mobile-table-cell-value:has(> a.mh-price-btn ~ a.mh-price-btn)>a.mh-price-btn{width:auto!important;min-width:0!important;margin:0!important} .post_content td .codex-mobile-table-cell-value:has(> a.mh-price-btn ~ a.mh-price-btn)>br{display:none} /* v2（10/11 21:10）：snippet 98 の #body_wrap×3 の『2つ目以降 margin-top:6px』が残り、楽天・Yahoo だけ6px下がって高さが77/71pxとずれていたので詳細度を上げて0に。 「CCH8WHWSを検／索」の語の途中折れは word-break:auto-phrase（Chrome系。Safari は従来の keep-all のまま）で「を／検索」に。 */ #body_wrap#body_wrap#body_wrap#body_wrap td .codex-mobile-table-cell-value:has(> a.mh-price-btn ~ a.mh-price-btn)>a.mh-price-btn[class*="mh-price-btn--"]{margin:0!important} .post_content td .codex-mobile-table-cell-value:has(> a.mh-price-btn ~ a.mh-price-btn) .mh-price-btn__action{word-break:auto-phrase} /* v3（10/21 claude-ux-research 部品見直し）：Amazon が「商品検索＋注記」の入れ物（.mh-search-copy-choice）に入った行では、 align-items:stretch で楽天・Yahoo! のボタンが高さ171pxの赤い塊に伸びていた（air-cooler-comparison PC1280 実測）。 その行だけボタンを中身の高さで上にそろえ、♡ 気になるは次の行の左端に置く。 */ .post_content td .codex-mobile-table-cell-value:has(> a.mh-price-btn ~ a.mh-price-btn):has(> .mh-search-copy-choice){align-items:start} .post_content td .codex-mobile-table-cell-value:has(> a.mh-price-btn ~ a.mh-price-btn)>.mh-pw-btn{grid-column:1/-1;justify-self:start} } /* SWELL のアイコン付き注記（is-style-icon_info 等）が本文の最初の段落の時、先頭段落を囲み枠にする共通CSS （codex-monohikaku-readable-design-system-v5 の > p:first-child）の余白でアイコンと区切り線が文字に重なっていたのを戻す（2026-10-12）。 id 2つで v4 の規則（id 1つ）より強くし、テーマ本来の左余白 4.25em だけを戻す。 */ #body_wrap #main_content .post_content > p[class*="is-style-icon_"] { padding-left: 4.25em; } /* モノヒカク PC上部バーのRSS・検索アイコンが14×14pxに潰れ、検索の虫眼鏡が上で切れていた（キャッチフレーズが空で帯が14px）。 はりまっぷと同じ28×28pxの押せる大きさにする（2026-10-12 部品の見直し part:monohikaku:pc:header:button.c-iconList__link）。 */ #header .l-header__bar .c-iconList__link { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; font-size: 14px; line-height: 1; } #header .l-header__bar .c-iconList__item { display: flex; } /* モノヒカク：価格ボタンの並ぶ表の行見出し（Amazon・楽天市場・Yahoo!ショッピング）が、スマホで86px幅の列に16px太字で入らず 「Amazo/n」「楽天市/場」「ショッピ/ング」と単語の途中で折れていた（2026-10-13 全395記事の390px実測）。 列を店名が入る幅にし、日本語の語の途中では折らない（「Yahoo!」と「ショッピング」の境でだけ折れる）。 2026-10-22：overflow-wrap:normal だと、同じ表の型番行「CCH8WHWS／ホワイト・国内新品標準1台」の『国内新品標準1台』（約108px）が 96px列に入らず末尾が切れて読めなかった（air-cooler-comparison 390px、UX台帳 20261021-2-1-82f59a）。語句単位（auto-phrase、 Chrome系）で折り、入らない時だけ break-word で折る。店名（Amazon 等）は列に収まるので従来どおり途中で折れない。 2026-10-24 UX units：型番『CCH8WHWS』（14px太字で88px）・『T3＋R8セット』（93px）が中身81.6pxに入らず『CCH8WHW/S』と型番の途中で折れていた。 列を96→104px・左右余白6→5px（中身約94px）にし型番を1行に収めた。360/390pxで価格ボタン幅・横はみ出し不変を確認。戻し方 price_table_rowhead.css.bak-20261024-modelfit を同コマンドで再配布。 */ @media (max-width:767px){ html body .post_content table:has(.mh-price-btn) tbody th:first-child{width:104px!important;min-width:104px!important;padding-left:5px!important;padding-right:5px!important;font-size:14px!important;word-break:keep-all!important;word-break:auto-phrase!important;overflow-wrap:break-word!important;line-height:1.45!important} } /* 製品が行の購入比較。engine/comparison.py のJSON部品専用。 PC: 画像・用途→3〜4比較軸→3モール。767px以下: 製品カード。 2026-10-13 mono-compare-structure: LANケーブル1453で導入。既存の表の型には適用しない。 */ html .post_content .mh-compare { margin: 24px 0 12px; max-width: 100%; border: 1px solid #cbd8e1; border-radius: 12px; background: #fff; color: #172b3a; font-size: 15px; line-height: 1.6; overflow: hidden; } html .post_content .mh-compare-caption { margin: 0 !important; padding: 16px; background: #edf4fa; font-size: 19px; font-weight: 800; color: #173b64; } .mh-compare--axes-3 { --mh-compare-cols: minmax(140px,1.4fr) repeat(3,minmax(0,.85fr)) minmax(155px,1.2fr); } .mh-compare--axes-4 { --mh-compare-cols: minmax(130px,1.4fr) repeat(4,minmax(0,.8fr)) minmax(155px,1.2fr); } .mh-compare :is(.mh-compare-head,.mh-compare-row) { display: grid; grid-template-columns: var(--mh-compare-cols); } html .post_content .mh-compare-head { background: #173b64; color: #fff; font-size: 14px; font-weight: 700; } .mh-compare-head > div { padding: 10px 8px; min-width: 0; overflow-wrap: anywhere; } .mh-compare-row + .mh-compare-row { border-top: 2px solid #dfe7ee; } .mh-compare-row > div { min-width: 0; padding: 14px 8px; overflow-wrap: anywhere; } .mh-compare-row > div + div { border-left: 1px solid #dfe7ee; } html .post_content .mh-compare-image { margin: 0 0 10px !important; text-align: center; } html .post_content .mh-compare-image img { display: block; width: 112px; height: 112px; max-width: 100%; object-fit: contain; margin: 0 auto; background: #fff; } html .post_content .mh-compare-image figcaption { font-size: 12px; line-height: 1.4; color: #465b6a; margin-top: 4px; word-break: keep-all; } html .post_content .mh-compare-image a { color: #175b8e; } html .post_content .mh-compare-name { display: block; font-size: 17px; line-height: 1.5; color: #172b3a; } html .post_content .mh-compare-model { display: block; font-size: 14px; color: #465b6a; } html .post_content .mh-compare-release { display: block; font-size: 14px; color: #465b6a; } html .post_content .mh-compare-shop-note { display: block; margin-top: 3px; font-size: 14px; line-height: 1.5; color: #465b6a; } .mh-compare-offer { min-width: 0; } .mh-compare-common-note { grid-column: 1 / -1; margin: 0 !important; } html .post_content .mh-compare-who { margin: 8px 0 0 !important; font-size: 15px; font-weight: 700; color: #173b64; } html .post_content .mh-compare-badge { display: inline-block; padding: 3px 8px; margin-bottom: 6px; background: #fff2bf; color: #684900; font-size: 14px; font-weight: 800; border-radius: 4px; } .mh-compare-label { display: none; } .mh-compare-buy { display: grid; gap: 8px; min-width: 0; } html .post_content .mh-compare-buy .mh-price-btn { width: 100% !important; min-width: 0 !important; min-height: 56px; margin: 0 !important; box-sizing: border-box; } html .post_content .mh-compare-note { font-size: 14px; line-height: 1.7; color: #465b6a; margin: 8px 0 24px; } .mh-product-detail { margin: 28px 0; } .mh-product-detail .mh-compare-image img { width: 200px; height: 200px; } .mh-product-detail .mh-compare-buy { grid-template-columns: repeat(3,minmax(0,1fr)); margin: 20px 0; } @media (max-width: 767px) { html .post_content .mh-compare { border: 0; background: transparent; overflow: visible; } html .post_content .mh-compare-caption { border-radius: 10px; margin-bottom: 12px !important; } .mh-compare .mh-compare-head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .mh-compare .mh-compare-row { display: block; background: #fff; border: 1px solid #cbd8e1; border-radius: 10px; margin: 0 0 16px; } .mh-compare-row > div { padding: 12px 14px; } .mh-compare-row > div + div { border-left: 0; border-top: 1px solid #dfe7ee; } /* 2026-10-22：画像は中盤の表だけ（末尾表の製品欄は画像なしなので2列グリッドにしない） */ .mh-compare .mh-compare-product:has(.mh-compare-image) { display: grid; grid-template-columns: 100px minmax(0,1fr); column-gap: 12px; align-items: start; } .mh-compare-product .mh-compare-image { grid-row: 1 / span 5; } html .post_content .mh-compare-product .mh-compare-image img { width: 96px; height: 96px; } html .post_content .mh-compare-product .mh-compare-image figcaption { font-size: 11px; line-height: 1.3; } .mh-compare-product :is(.mh-compare-badge,.mh-compare-name,.mh-compare-model,.mh-compare-release,.mh-compare-who) { grid-column: 2; } .mh-compare .mh-compare-value { display: grid; grid-template-columns: minmax(90px, .9fr) minmax(0,1.3fr); gap: 12px; font-size: 15px; } html .post_content .mh-compare-label { display: block; font-weight: 700; color: #465b6a; } .mh-compare-offers .mh-compare-buy { grid-template-columns: repeat(3,minmax(0,1fr)); } html .post_content .mh-compare-buy .mh-price-btn { padding-inline: 4px !important; } } /* モノヒカク：価格枠の旧 nth-child 2列指定を、表やラベル＋ボタンのセルへ適用させない。 2026-10-13 mono-price-links-grid-squash-20261011。 スマートフォンのボタンは120px以上で折り返し、条件付き価格の注記は全幅に保つ。 本文・価格・リンク・注記は変更しない。戻す時は次のsnippetを無効化： sitewide_css.py --site monohikaku --css assets/monohikaku/price_grid.css --name "Codex: mono price grid" --deactivate */ /* Keep tables and label/button cells out of legacy positional grids. */ html body .mh-section-price-links>div:nth-child(2)>div:has(>table), html body .mh-section-price-links>div:nth-child(2)>div:has(>.tm){display:block!important;grid-template-columns:none!important} html body .mh-section-price-links>div:nth-child(2)>div:has(>span):has(>a.mh-price-btn){display:block!important} @media(max-width:767px){ /* Only table-cell groups need to wrap; ordinary full-width sections keep their layout. */ html body :is(td div.mh-section-price-links,div.mh-section-price-links.mh-row-buy):has(>a.mh-price-btn){display:flex!important;flex-wrap:wrap!important;gap:6px!important;align-items:stretch!important} html body :is(td div.mh-section-price-links,div.mh-section-price-links.mh-row-buy):has(>a.mh-price-btn)>a.mh-price-btn{flex:1 1 120px!important;min-width:120px!important;width:auto!important;margin:0!important} html body :is(td div.mh-section-price-links,div.mh-section-price-links.mh-row-buy)>a.mh-price-btn:has(.mh-price-btn__note:not(:empty)){flex-basis:100%!important} html body td:has(div.mh-section-price-links){min-width:136px!important} /* Keep the full condition text readable without extra vertical padding. */ html body #body_wrap#body_wrap#body_wrap#body_wrap div.mh-section-price-links>a.mh-price-btn:has(.mh-price-btn__note:not(:empty)){padding-top:6px!important;padding-bottom:6px!important} } /* Explicitly authored .se-cta and owned ms-apply keyboard-focus correction; no generic link conversion or color assignment. Site/vendor colors continue to come from the existing canonical color modules. */ .post_content .se-cta{margin:1.25em 0;max-width:100%;clear:both} .post_content .se-cta__benefit{margin:0 0 .55em!important;font-size:16px;font-weight:700;line-height:1.6} .post_content .se-cta .se-cta__btn,.post_content .se-cta--provided>a,.post_content .se-cta--provided>p>a{position:relative;display:flex;align-items:center;justify-content:center;gap:.65em;box-sizing:border-box;width:100%;max-width:100%;min-height:52px;padding:12px 18px;border:0;border-radius:8px;background:var(--ms-head,#173b64);color:var(--se-cta-text,#fff);font-size:16px;font-weight:700;line-height:1.5;text-decoration:none;text-align:center;box-shadow:0 2px 0 #0003} .post_content .se-cta .se-cta__btn::after{content:none!important} .post_content .se-cta__label{min-width:0;overflow-wrap:anywhere} .post_content .se-cta__arrow{flex:none;font-size:1.1em;line-height:1} .post_content .se-cta__btn:hover,.post_content .se-cta--provided>a:hover,.post_content .se-cta--provided>p>a:hover{text-decoration:underline;text-underline-offset:.2em} .post_content .se-cta .se-cta__btn:focus-visible,.post_content .se-cta--provided>a:focus-visible,.post_content .se-cta--provided>p>a:focus-visible,#body_wrap .post_content a.ms-apply__btn:focus-visible{outline:3px solid #2454db!important;outline-offset:3px!important} .post_content .se-cta--provided img[width="1"][height="1"]{position:absolute;width:1px!important;height:1px!important;opacity:0;visibility:hidden;pointer-events:none} .post_content .se-cta__note{margin:.6em 0 0!important;color:#3d4652;font-size:14px;line-height:1.7} @media(min-width:768px){.post_content .se-cta .se-cta__btn,.post_content .se-cta--provided>a,.post_content .se-cta--provided>p>a{width:fit-content;min-width:min(100%,360px)}} /* Classic WordPress may wrap a complete text material and its tracker in a paragraph. */ .post_content .se-cta--provided>p:not(.se-cta__benefit):not(.se-cta__note){margin:0!important} /* カテゴリー：SWELL既定の英字の副題（全サイト） */ #body_wrap .c-pageTitle__subTitle{display:none!important} /* 記事・固定ページの枠（トップ以外）。並び順に依らないよう要素ごとに上の余白だけで間隔を作る */ #body_wrap.sr-on:is(.single,.page):not(.home) .l-mainContent__inner>*{margin-bottom:0!important} #body_wrap.sr-on:is(.single,.page):not(.home) .l-mainContent__inner>:is(.p-articleHead,.c-pageTitle){margin-top:0!important} #body_wrap.sr-on:is(.single,.page):not(.home) .l-mainContent__inner>.p-articleMetas.-top{margin-top:12px!important} #body_wrap.sr-on:is(.single,.page):not(.home) .l-mainContent__inner>:is(.p-articleThumb,.w-singleTop,.sp1-mnp-strip,.post_content){margin-top:24px!important} #body_wrap.sr-on:is(.single,.page):not(.home) .l-mainContent__inner>:is(.p-articleFoot,.w-singleBottom){margin-top:40px!important} #body_wrap.sr-on:is(.single,.page):not(.home) .l-mainContent__inner>.p-articleFoot{padding-top:16px!important} #body_wrap.sr-on:is(.single,.page):not(.home) .l-mainContent__inner>:is(.w-singleBottom,.w-singleTop):not(:has(*)){margin-top:0!important} #body_wrap.sr-on:is(.single,.page):not(.home) .l-mainContent__inner>.c-shareBtns.-bottom{margin-top:24px!important} #body_wrap.sr-on:is(.single,.page):not(.home) .l-mainContent__inner>#after_article{margin-top:32px!important;padding-top:0!important} #body_wrap.sr-on #after_article .l-articleBottom__section{margin-top:40px!important} #body_wrap.sr-on #after_article>:first-child{margin-top:0!important} /* 本文の見出しと段落 */ #body_wrap.sr-on .post_content>h2:not(:first-child){margin-top:48px!important} #body_wrap.sr-on .post_content>h2{margin-bottom:24px!important} #body_wrap.sr-on .post_content>h3:not(:first-child){margin-top:32px!important} #body_wrap.sr-on .post_content>h3{margin-bottom:16px!important} #body_wrap.sr-on .post_content>*:has(+.p-toc){margin-bottom:32px!important} #body_wrap.sr-on .post_content>.p-toc{margin-top:0!important;margin-bottom:32px!important} /* 目次の「もっと見る」：SWELL既定は 98x35px でタップ目安44pxに届かない（2026-10-22 モノ比較 anker-charger 390px実測）。全サイト共通で高さ44px */ .p-toc__expandBtn{min-height:44px!important;padding:10px 20px!important} #body_wrap.sr-flat .post_content>p{margin-bottom:1.2em!important} /* 段落→段落の間：行間1.82（29px）と段落間18px の差が小さく切れ目が見えなかった。参考記事の390px実測の中央値24〜25px（ダイヤモンド・Zenn24、 ライフハッカー25/PC30、note30/PC36）に合わせ SP1.5em≒24px・PC1.7em≒28px。段落の次が段落の時だけ（囲み・表・リストの前の余白は別管理）。 2026-10-23 UX 20261010-sp-17px-24px-1-5em-pc-28px-1-82。戻し方：この2行を消して配り直す */ #body_wrap:is(.sr-card,.sr-hm) .post_content>p:has(+p){margin-bottom:1.5em!important} @media (min-width:960px){#body_wrap:is(.sr-card,.sr-hm) .post_content>p:has(+p){margin-bottom:1.7em!important}} /* カテゴリー：見出し→説明16→一覧24。案内パーツの重なる見出し・説明を隠す */ #body_wrap.sr-on.archive .c-pageTitle{margin-bottom:0!important} #body_wrap.sr-on.archive .p-termHead{margin-top:16px!important;margin-bottom:24px!important} #body_wrap.sr-on.archive .l-mainContent__inner>*{margin-bottom:0!important} #body_wrap.sr-on.archive .l-mainContent__inner>:is(.p-termContent,.sc-guide,.c-prNotation,.p-postListWrap,.c-pagination){margin-top:24px!important} #body_wrap.sr-shotai.archive .p-termHead{padding:16px!important} #body_wrap.sr-card.archive .p-termHead__desc{padding:0!important} #body_wrap.sr-mono .mono-cat-head>div:first-child,#body_wrap.sr-sp1 .sp1-cat-head>div:first-child, #body_wrap.sr-mono .mono-cat-lead{display:none!important} #body_wrap.sr-mono .mono-cat-head,#body_wrap.sr-sp1 .sp1-cat-head{justify-content:flex-start!important;margin-bottom:8px!important} /* トップ：見出し直後とセクション間 */ #body_wrap.sr-on.home :is(.mhz,.spz,.shz){row-gap:0!important} #body_wrap.sr-on.home :is(.mhz,.spz,.shz)>*{margin-top:0!important;margin-bottom:0!important} #body_wrap.sr-on.home :is(.mhz,.spz,.shz)>:not(style,script,link,template)~:not(style,script,link,template){margin-top:28px!important} #body_wrap.sr-on.home :is(.mhz,.spz,.shz)>:is(.mhz-intro,.spz-head,.shz-hero)+*,#body_wrap.sr-on.home :is(.mhz,.spz,.shz)>:is(.mhz-intro,.spz-head,.shz-hero)+:is(style,script)+*{margin-top:16px!important} /* フッター */ #body_wrap.sr-on .w-footer{padding-top:0!important} #body_wrap.sr-on .l-footer__widgetArea{padding-top:32px!important;padding-bottom:32px!important} @media (max-width:959px){ /* カード型3サイトのスマホ：本文の左右を20pxに */ #body_wrap.sr-card:not(.home) #content.l-content{padding-top:16px!important} #body_wrap.sr-shotai:not(.home) #content.l-content{padding-left:8px!important;padding-right:8px!important} #body_wrap.sr-card:not(.home) .l-mainContent__inner{padding:20px 12px 28px!important} #body_wrap.sr-on .w-footer__box{padding-top:0!important;padding-bottom:0!important;margin-bottom:0!important} #body_wrap.sr-on .w-footer__box+.w-footer__box{margin-top:32px!important} } @media (min-width:960px){ #body_wrap.sr-card:not(.home) #content.l-content{padding-top:40px!important} #body_wrap.sr-card:not(.home) .l-mainContent__inner{padding:56px 64px!important} #body_wrap.sr-flat:is(.single,.page):not(.home) .l-mainContent__inner{max-width:800px;margin-left:auto;margin-right:auto} #body_wrap.sr-on:is(.single,.page):not(.home) .l-mainContent__inner>:is(.p-articleThumb,.w-singleTop,.sp1-mnp-strip,.post_content){margin-top:32px!important} #body_wrap.sr-on:is(.single,.page):not(.home) .l-mainContent__inner>:is(.p-articleFoot,.w-singleBottom){margin-top:48px!important} #body_wrap.sr-on:is(.single,.page):not(.home) .l-mainContent__inner>:is(.w-singleBottom,.w-singleTop):not(:has(*)){margin-top:0!important} #body_wrap.sr-on:is(.single,.page):not(.home) .l-mainContent__inner>#after_article{margin-top:40px!important} #body_wrap.sr-on #after_article .l-articleBottom__section{margin-top:48px!important} #body_wrap.sr-on .post_content>h2:not(:first-child){margin-top:64px!important} #body_wrap.sr-on .post_content>h2{margin-bottom:28px!important} #body_wrap.sr-on .post_content>h3:not(:first-child){margin-top:40px!important} #body_wrap.sr-on.home :is(.mhz,.spz,.shz)>:not(style,script,link,template)~:not(style,script,link,template){margin-top:40px!important} #body_wrap.sr-on.home :is(.mhz,.spz,.shz)>:is(.mhz-intro,.spz-head,.shz-hero)+*,#body_wrap.sr-on.home :is(.mhz,.spz,.shz)>:is(.mhz-intro,.spz-head,.shz-hero)+:is(style,script)+*{margin-top:24px!important} #body_wrap.sr-on .l-footer__widgetArea{padding-top:48px!important;padding-bottom:48px!important} #body_wrap.sr-shotai.archive .p-termHead{padding:20px 24px!important} } /* モノヒカク：型番ごとの「色・容量・本数・販路を比べた最安」パネル（tools/mono_offers.py が本文に置く .mh-offers）。 2026-10-19 本人「色違い、本数違い、販路違いなどのあらゆる全てを比較でき、見やすく、わかりやすく最安を見つけられるようにしてよ」。 最安の1行を先頭で強調し、上位3行だけ最初に見せ、残りは「すべて見る」に畳む。スマートフォンでは1行を2段のカードにする。 配布：tools/sitewide_css.py --site monohikaku --css assets/monohikaku/offers.css --name "Claude: mono offers" --style-id claude-mh-offers-v1 戻す時は同じ指定に --deactivate。 */ .mh-offers{margin:14px 0 22px;padding:14px 14px 10px;border:1px solid #d9e2ec;border-radius:10px;background:#fbfcfe;font-size:14px;line-height:1.5} .mh-offers p{margin:0 0 6px} .mh-offers__title{font-weight:700;font-size:15px;color:#173b64} .mh-offers__lead{font-size:14px} .mh-offers__lead strong{color:#b42318} .mh-offers__dims{font-size:12px;color:#5b6b7c} .mh-offers__list{list-style:none;margin:8px 0 6px!important;padding:0!important;counter-reset:none} .mh-offers__row{display:grid;grid-template-columns:44px minmax(0,1.3fr) minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) 64px;gap:8px;align-items:center; margin:0 0 6px!important;padding:8px 10px;border:1px solid #e3e8ef;border-radius:8px;background:#fff;list-style:none} .mh-offers__row::before,.mh-offers__row::marker{content:none!important} .mh-offers__row.is-best{border:2px solid #b42318;background:#fff7f5} .mh-offers__rank{font-weight:700;font-size:13px;color:#5b6b7c;text-align:center} .mh-offers__row.is-best .mh-offers__rank{color:#fff;background:#b42318;border-radius:4px;padding:2px 0} .mh-offers__variant{font-weight:600;word-break:break-word} .mh-offers__seller{font-size:13px;color:#333;word-break:break-word} .mh-offers__tag{display:inline-block;margin-left:4px;padding:0 5px;border-radius:3px;background:#e8f0fb;color:#173b64;font-style:normal;font-size:11px;font-weight:700} .mh-offers__price{font-weight:700;font-size:15px;white-space:nowrap} .mh-offers__price small,.mh-offers__eff small{display:block;font-weight:400;font-size:11px;color:#5b6b7c;white-space:normal} .mh-offers__eff{font-weight:700;color:#b42318;font-size:14px} .mh-offers__go{display:block;text-align:center;padding:7px 0;border-radius:6px;font-weight:700;font-size:13px;color:#fff!important;text-decoration:none!important} .mh-offers__go--amazon{background:#f08804} .mh-offers__go--rakuten{background:#bf0000} .mh-offers__go--yahoo{background:#ff0033} .mh-offers__go:hover{opacity:.85} .mh-offers__more>summary{cursor:pointer;margin:4px 0 8px;padding:8px;border:1px dashed #9fb3c8;border-radius:6px;text-align:center;font-weight:700;color:#173b64;list-style:none} .mh-offers__more>summary::-webkit-details-marker{display:none} .mh-offers__more[open]>summary{border-style:solid} .mh-offers__calc{margin:6px 0 4px;font-size:13px} .mh-offers__calc>summary{cursor:pointer;color:#173b64;font-weight:700} .mh-offers__calc-body{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin-top:6px;padding:8px 10px;border-radius:6px;background:#eef3f9} .mh-offers__calc-body label{white-space:nowrap} .mh-offers__calc-body input[type=number]{width:4.2em;padding:2px 4px;border:1px solid #9fb3c8;border-radius:4px;font-size:14px} .mh-offers__calc-body p{flex-basis:100%;margin:2px 0 0;font-size:11px;color:#5b6b7c} .mh-offers__note{font-size:11px;color:#6b7785} @media(max-width:767px){ .mh-offers{padding:12px 10px 8px} .mh-offers__row{grid-template-columns:36px minmax(0,1fr) 72px;grid-template-areas:"rank variant variant" "rank seller seller" "rank price go" "rank eff go";row-gap:2px;column-gap:8px;padding:8px} .mh-offers__rank{grid-area:rank;align-self:start} .mh-offers__variant{grid-area:variant} .mh-offers__seller{grid-area:seller} .mh-offers__price{grid-area:price;white-space:normal} .mh-offers__price small{display:inline;margin-left:4px} .mh-offers__eff{grid-area:eff} .mh-offers__eff small{display:inline;margin-left:4px} .mh-offers__go{grid-area:go;align-self:center} } .mh-pw-btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:40px;margin:4px 0 0;padding:6px 14px;border:1.5px solid #e11d48;border-radius:999px;background:#fff;color:#be123c;font-size:13.5px;font-weight:800;line-height:1.2;cursor:pointer;vertical-align:middle;transition:transform .08s,background .15s} .mh-pw-btn{white-space:nowrap} .mh-row-buy .mh-pw-btn,.mh-compare-buy .mh-pw-btn,.mh-compare-offer .mh-pw-btn{grid-column:1/-1;flex:0 0 auto;justify-self:start;align-self:start} .mh-pw-btn:hover{background:#fff1f3} .mh-pw-btn:active{transform:scale(.96)} .mh-pw-btn[aria-pressed="true"]{background:#e11d48;color:#fff;border-color:#e11d48} .mh-pw-btn.is-drop{background:#047857;border-color:#047857;color:#fff} .mh-pw-btn.is-pop{animation:mh-pw-pop .45s ease} .mh-pw-btn:focus-visible,.mh-kn button:focus-visible,.mh-kn a:focus-visible{outline:3px solid #ffbf47;outline-offset:2px} @keyframes mh-pw-pop{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}} .mh-pw-toast{position:fixed;top:10px;left:50%;z-index:993;display:flex;align-items:center;gap:10px;width:min(calc(100vw - 24px),420px);box-sizing:border-box;padding:10px 12px;border-radius:14px;background:#0f2740;color:#fff;font-size:13.5px;font-weight:700;line-height:1.45;box-shadow:0 10px 30px rgba(15,39,64,.3);transform:translate(-50%,-16px);opacity:0;transition:opacity .25s,transform .25s;pointer-events:none} .mh-pw-toast.is-on{opacity:1;transform:translate(-50%,0);pointer-events:auto} .mh-pw-toast span{flex:1;min-width:0} .mh-pw-toast a{flex:0 0 auto;padding:7px 12px;border-radius:999px;background:#fff;color:#0f2740!important;font-weight:900;text-decoration:none!important;white-space:nowrap} .mh-pw-bar{display:flex;align-items:center;gap:10px;margin:28px 0 8px;padding:12px 14px;border-radius:14px;background:#fff1f3;border:1.5px solid #fda4af;color:#881337!important;font-size:14.5px;font-weight:800;text-decoration:none!important} .mh-pw-bar b{font-size:20px;color:#e11d48} .mh-pw-bar em{margin-left:auto;font-style:normal;white-space:nowrap;color:#be123c} .mh-pw-bar.has-drop{background:#ecfdf5;border-color:#6ee7b7;color:#065f46!important} .mh-pw-bar.has-drop b,.mh-pw-bar.has-drop em{color:#047857} .mh-kn-hero{margin:0 0 18px;padding:18px 16px;border-radius:18px;background:linear-gradient(135deg,#0f2740,#1d4f80);color:#fff;text-align:center} .mh-kn-hero__label{display:block;font-size:13px;font-weight:700;opacity:.85} .mh-kn-hero__num{display:block;margin:4px 0 2px;font-size:clamp(30px,8vw,44px);font-weight:900;letter-spacing:.01em;line-height:1.15} .mh-kn-hero__num.is-drop{color:#6ee7b7} .mh-kn-hero__num.is-pulse{animation:mh-pw-pop .6s ease 2} .mh-kn-hero__sub{display:block;font-size:12.5px;opacity:.85} .mh-kn-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:14px 0 0} .mh-kn-tile{padding:8px 4px;border-radius:12px;background:rgba(255,255,255,.14);color:#fff} .mh-kn-tile b{color:#fff!important;display:block;font-size:22px;font-weight:900;line-height:1.2} .mh-kn-tile small{display:block;font-size:12px;font-weight:700;color:#dbe7f3!important} .post_content .mh-kn-sec,.mh-kn-sec{margin:22px 0 10px!important;padding:0!important;border:0!important;background:none!important;font-size:17px!important;font-weight:900!important;color:#0f2740!important} .post_content .mh-kn-sec::before,.post_content .mh-kn-sec::after{content:none!important} .mh-kn-list{display:grid;gap:12px;margin:0;padding:0;list-style:none} .mh-kn-card{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;margin:0!important;padding:12px 44px 12px 12px!important;border-radius:14px;background:#fff;box-shadow:0 1px 4px rgba(15,39,64,.14);list-style:none} .mh-kn-card::before{content:none!important} .mh-kn-card.is-drop{box-shadow:0 0 0 2px #10b981,0 4px 14px rgba(4,120,87,.18)} .mh-kn-img{display:block;width:96px;height:72px;border-radius:10px;overflow:hidden;background:#e8eef5} .mh-kn-img img{display:block;width:100%!important;height:100%!important;object-fit:cover;margin:0!important} .mh-kn-name{display:block;margin:0 0 2px;font-size:15px;font-weight:900;line-height:1.4;color:#0f2740} .mh-kn-from{display:block;margin:0 0 6px;font-size:12px;color:#5b6b7c;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mh-kn-now{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px} .mh-kn-now strong{font-size:22px;font-weight:900;color:#0f2740;line-height:1.2} .mh-kn-diff{display:inline-block;padding:2px 9px;border-radius:999px;font-size:13px;font-weight:900} .mh-kn-diff.is-down{background:#d1fae5;color:#065f46} .mh-kn-diff.is-up{background:#fee2e2;color:#991b1b} .mh-kn-diff.is-same{background:#eef1f5;color:#45556a} .mh-kn-meta{display:block;margin:4px 0 0;font-size:12px;color:#5b6b7c;line-height:1.5} .mh-kn-acts{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0} .mh-kn-mall{display:inline-flex;align-items:center;min-height:40px;padding:6px 14px;border-radius:999px;background:#075ea9;color:#fff!important;font-size:13.5px;font-weight:900;text-decoration:none!important} .mh-kn-art{display:inline-flex;align-items:center;min-height:40px;padding:6px 4px;color:#075ea9!important;font-size:13.5px;font-weight:800} .mh-kn-x{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:32px;height:32px;margin:0;padding:0;border:0;border-radius:50%;background:#f1f4f7;color:#45556a;font-size:15px;line-height:1;cursor:pointer} .mh-kn-rebase{margin:0;padding:0;border:0;background:none;color:#5b6b7c;font-size:12px;text-decoration:underline;cursor:pointer} .mh-kn-empty{padding:18px;border-radius:14px;background:#f5f8fb;font-size:14px;line-height:1.7} .mh-kn-empty a{font-weight:900} .mh-kn-note{margin:18px 0 0!important;font-size:12px!important;color:#5b6b7c;line-height:1.6} @media(max-width:420px){.mh-kn-card{grid-template-columns:76px minmax(0,1fr);gap:10px}.mh-kn-img{width:76px;height:60px}.mh-kn-now strong{font-size:20px}} @media(prefers-reduced-motion:reduce){.mh-pw-toast{transition:none}.mh-pw-btn.is-pop,.mh-kn-hero__num.is-pulse{animation:none}} @media print{.mh-pw-toast,.mh-pw-btn{display:none!important}} /* 記事下の関連枠（codex-related-context-v5）の小さい文字の下限（2026-10-21 claude-fill、台帳 20261010-kicker-eyebrow-12px・20261017-shotai-card-title-readable）。 390px実測：上のラベル monohikaku 11.52px・shotai-code 10.1px、カード見出し shotai-code 14.04px。ラベルは12px以上、見出しは他の記事カードと同じ16pxへ。 色・字間・余白は元の部品のまま。戻し方：sitewide_css.py --deactivate。 */ .codex-related-context-v5__eyebrow{font-size:max(12px,.72rem)!important} .codex-related-context-v5__title{font-size:max(16px,1em)!important} /* * Monohikaku design system v5 — readable comparison newsroom. * * Information leads; decoration recedes. The article-top campaign remains in * its original DOM position with its original text, links, groups and order. */ :root { --mh5-ink: #172334; --mh5-text: #29394d; --mh5-muted: #5e6d7e; --mh5-paper: #fff; --mh5-canvas: #f7f6f3; --mh5-line: #d7dde3; --mh5-line-dark: #aeb9c4; --mh5-navy: #18344f; --mh5-rust: #9c3f19; --mh5-rust-soft: #f8eee8; --mh5-blue-soft: #eef4f8; --mh5-green: #25705d; --mh5-focus: #006fc9; --mh5-reading: 46rem; --mh5-wide: 68rem; } html { background: var(--mh5-canvas); font-size: 16px; scroll-padding-top: 5rem; } body, #body_wrap { background: var(--mh5-canvas); color: var(--mh5-text); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", YuGothic, Meiryo, sans-serif; font-feature-settings: "palt" 1; -webkit-font-smoothing: antialiased; line-break: strict; } #body_wrap *, #body_wrap *::before, #body_wrap *::after { box-sizing: border-box; } #body_wrap :where(img, video, svg) { max-width: 100%; height: auto; } #body_wrap :where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid var(--mh5-focus) !important; outline-offset: 3px; } #header { border-top: 4px solid var(--mh5-rust); border-bottom: 1px solid var(--mh5-line); background: rgba(255, 255, 255, .98); box-shadow: none; } #header .l-header__inner, #header .l-header__barInner, .p-breadcrumb__list { max-width: 72rem; } #header .c-gnav > li > a { color: var(--mh5-ink); font-size: .875rem; font-weight: 720; } #header .c-gnav > li > a:hover { color: var(--mh5-rust); } .p-breadcrumb { border-bottom: 1px solid #e8ebee; background: #fbfbfa; color: var(--mh5-muted); } .p-breadcrumb__text { font-size: .75rem; } #content { width: min(72rem, calc(100% - 3rem)); padding-top: clamp(2rem, 4vw, 3.75rem); padding-bottom: clamp(4.5rem, 8vw, 7rem); } #main_content, #main_content > .l-mainContent__inner { min-width: 0; } #main_content > .l-mainContent__inner { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } #main_content :where(.c-pageTitle, .c-postTitle__ttl) { color: var(--mh5-ink) !important; font-weight: 850 !important; letter-spacing: -.025em !important; line-height: 1.36 !important; text-wrap: balance; } #main_content .c-pageTitle { margin: 0 0 2rem; padding: 0 0 .8rem; border: 0; border-bottom: 3px solid var(--mh5-ink); font-size: clamp(1.9rem, 3vw, 2.5rem) !important; } #main_content a { text-underline-offset: .2em; } /* Home: one clear task, then flat editorial sections. */ .home #content { width: min(72rem, calc(100% - 3rem)); margin-bottom: 0 !important; padding-bottom: clamp(2.5rem, 4vw, 3.5rem); } .home #main_content > .l-mainContent__inner { padding: 0; } .home .mhz { display: grid; gap: clamp(2.75rem, 6vw, 5.5rem); } .home .mhz-intro { position: relative; display: grid; grid-template-columns: minmax(19rem, .85fr) minmax(24rem, 1.15fr); align-items: center; gap: clamp(2.5rem, 6vw, 5rem); padding: clamp(2.75rem, 6vw, 5rem); border: 0; border-left: 8px solid var(--mh5-rust); border-radius: 0; background: var(--mh5-paper); box-shadow: 0 1px 0 var(--mh5-line); } .home .mhz-intro h1 { max-width: 12em; margin: 0 0 .8rem; color: var(--mh5-ink); font-size: clamp(2.35rem, 4.8vw, 4rem); font-weight: 900; letter-spacing: -.05em; line-height: 1.12; word-break: keep-all; } .home .mhz-intro p { max-width: 34em; margin: 0; color: var(--mh5-text); font-size: 1rem; line-height: 1.8; } .home .mhz-search form, .home .c-searchForm { display: grid; grid-template-columns: minmax(0, 1fr) auto; overflow: visible; border: 2px solid var(--mh5-ink); border-radius: 0; background: #fff; box-shadow: none; } .home .mhz-search input { min-height: 3.75rem; border: 0; padding: .75rem 1rem; font-size: 1rem; } .home .mhz-search button { min-width: 6.25rem; min-height: 3.75rem; margin: 0; border-radius: 0; background: var(--mh5-rust); color: #fff; font-weight: 800; } .home .mhz-search-note { margin-top: .65rem; color: var(--mh5-muted); font-size: .8125rem; line-height: 1.7; } .home .mhz-section { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .home .mhz-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 0 1.25rem; padding: 0 0 .8rem; border: 0; border-bottom: 3px solid var(--mh5-ink); } .home .mhz-head h2 { margin: 0; color: var(--mh5-ink); font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 850; letter-spacing: -.025em; } .home .mhz-head :where(p, span) { color: var(--mh5-muted); font-size: .8125rem; } .home .mhz-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--mh5-line-dark); background: var(--mh5-line); } .home .mhz-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } .home .mhz-item { min-height: 7.25rem; padding: 1.1rem; border: 0; border-radius: 0; background: var(--mh5-paper); box-shadow: none; transition: background-color .16s ease; } .home .mhz-item:hover { background: var(--mh5-blue-soft); transform: none; } .home .mhz-item strong { color: var(--mh5-ink); font-size: 1rem; font-weight: 800; line-height: 1.5; } .home .mhz-item span { color: var(--mh5-muted); font-size: .8125rem; line-height: 1.65; } /* Give long Japanese headlines the full card width. The legacy home part * kept thumbnail, text and arrow in three columns, which squeezed titles * into tall narrow strips—especially in the four-card desktop row and on * phones. Thumbnail and label form a short first row; title and summary use * the complete card width below it. */ .home .mhz-grid .mhz-item.has-image { display: grid !important; grid-template-columns: 5.25rem minmax(0, 1fr) 1rem !important; grid-template-rows: auto auto auto !important; align-items: center !important; gap: .45rem .7rem !important; min-height: 0 !important; } .home .mhz-grid .mhz-item.has-image > img { grid-column: 1; grid-row: 1; width: 5.25rem !important; height: 3rem !important; margin: 0 !important; object-fit: cover !important; } .home .mhz-grid .mhz-item.has-image > span { display: contents !important; } .home .mhz-grid .mhz-item.has-image > span > b { grid-column: 2; grid-row: 1; justify-self: start; margin: 0; } .home .mhz-grid .mhz-item.has-image > span > strong { display: block !important; grid-column: 1 / -1; grid-row: 2; width: 100% !important; font-size: 1rem !important; line-height: 1.55 !important; } .home .mhz-grid .mhz-item.has-image > span > small { display: -webkit-box !important; grid-column: 1 / -1; grid-row: 3; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: .78rem !important; line-height: 1.65 !important; } .home .mhz-grid .mhz-item.has-image > em { grid-column: 3; grid-row: 1; justify-self: end; } .home :where(.mhz-directory, .mhz-info) { overflow: visible; border: 1px solid var(--mh5-line); border-radius: 0; background: var(--mh5-paper); } .home :where(.mhz-directory, .mhz-info) > summary { min-height: 3.25rem; padding: .85rem 1rem; color: var(--mh5-ink); font-weight: 800; } /* Articles: wide title/media, fixed campaign, narrow reading rail. */ .single-post #main_content > .l-mainContent__inner { width: min(100%, 62rem); margin-inline: auto; padding: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 5vw, 4.5rem); border-top: 6px solid var(--mh5-ink); background: var(--mh5-paper); } .single-post #main_content .c-postTitle__ttl { max-width: 54rem; margin-inline: auto; font-size: clamp(2rem, 3.5vw, 2.8rem) !important; } .single-post .p-articleMetas { max-width: 54rem; margin: .9rem auto 0; color: var(--mh5-muted); } .single-post .p-articleThumb { width: min(100%, 54rem) !important; margin: 2rem auto 2.5rem !important; } .single-post .p-articleThumb img { border-radius: .25rem; box-shadow: none; } .single-post .w-singleTop { width: min(100%, 54rem); margin: 2rem auto 2.5rem !important; } .single-post .w-singleTop .mh-campaign-box { overflow: hidden; margin: 0 !important; border: 1px solid var(--mh5-line-dark); border-radius: .25rem; background: #fff; box-shadow: none; } .single-post .w-singleTop .mh-campaign-head { gap: .55rem; padding: .8rem 1rem; background: var(--mh5-navy); color: #fff; } .single-post .w-singleTop .mh-campaign-title { color: #fff; font-size: 1rem; font-weight: 800; } .single-post .w-singleTop .mh-campaign-eyebrow { color: #ffe5d5; } .single-post .w-singleTop .mh-campaign-body { display: grid !important; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr) !important; align-items: stretch !important; gap: 0 !important; max-width: none !important; overflow: visible !important; padding: 0 !important; scroll-snap-type: none !important; } .single-post .w-singleTop .mh-campaign-group { min-width: 0 !important; width: auto !important; margin: 0 !important; padding: .8rem !important; border: 0 !important; border-right: 1px solid var(--mh5-line) !important; border-radius: 0 !important; background: #fff !important; box-shadow: none !important; scroll-snap-align: none !important; } .single-post .w-singleTop .mh-campaign-group:last-child { border-right: 0 !important; } .single-post .w-singleTop .mh-campaign-group-head { min-height: 1.9rem; margin-bottom: .55rem; } .single-post .w-singleTop .mh-campaign-brand { color: var(--mh5-ink); font-size: .8125rem; font-weight: 850; } .single-post .w-singleTop .mh-campaign-links { display: grid !important; grid-template-columns: 1fr !important; gap: .45rem !important; } .single-post .w-singleTop .mh-amazon-group .mh-campaign-links { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .single-post .w-singleTop :where(.mh-campaign-link, .mh-campaign-subcta a, .mh-campaign-points summary) { display: flex !important; box-sizing: border-box; min-height: 3rem !important; align-items: center; justify-content: center; padding: .6rem .75rem !important; border-radius: .2rem !important; font-size: .79rem !important; font-weight: 740; line-height: 1.45 !important; } /* Some legacy article-local styles hide the third and later campaign links * with !important. The campaign itself is immutable; this selector only * restores all existing links in their original DOM order and position. */ #body_wrap.codex-mh-v5 .w-singleTop .mh-campaign-links > a.mh-campaign-link { display: flex !important; } .single-post .w-singleTop :where(.mh-campaign-primary, .mh-amazon-btn.mh-campaign-primary) { border-color: var(--mh5-rust) !important; background: var(--mh5-rust) !important; color: #fff !important; } .single-post .post_content:not(.p-blogParts):not(.p-toc), .page:not(.home) #main_content .post_content:not(.p-blogParts):not(.p-toc) { width: min(100%, var(--mh5-reading)); margin-inline: auto !important; color: var(--mh5-text); font-size: clamp(1rem, 1.2vw, 1.075rem); line-height: 1.9; } .single-post .post_content:not(.p-blogParts):not(.p-toc) > p:first-child:not(:empty), .page:not(.home) #main_content .post_content:not(.p-blogParts):not(.p-toc) > p:first-child:not(:empty) { margin-bottom: 2rem; padding: 1rem 0 1rem 1.2rem; border: 0; border-left: 4px solid var(--mh5-rust); border-radius: 0; background: transparent; color: var(--mh5-ink); font-weight: 620; } #body_wrap.codex-mh-v5.single-post #main_content article .post_content:not(.p-blogParts):not(.p-toc) h2, #main_content .post_content:not(.p-blogParts):not(.p-toc) h2 { margin-top: 3.3em; margin-bottom: 1.25em; padding: .25em 0 .65em !important; border: 0 !important; border-top: 5px solid var(--mh5-ink) !important; border-bottom: 1px solid var(--mh5-line) !important; border-radius: 0 !important; background: transparent !important; color: var(--mh5-ink) !important; font-size: clamp(1.45rem, 2.3vw, 1.85rem); font-weight: 850; line-height: 1.5; letter-spacing: -.02em; } #body_wrap.codex-mh-v5.single-post #main_content article .post_content:not(.p-blogParts):not(.p-toc) h2::before, #main_content .post_content:not(.p-blogParts):not(.p-toc) h2::before { content: none !important; } #body_wrap.codex-mh-v5.single-post #main_content article .post_content:not(.p-blogParts):not(.p-toc) h3, #main_content .post_content:not(.p-blogParts):not(.p-toc) h3 { margin-top: 2.5em; margin-bottom: 1em; padding: .05em 0 .4em .85em !important; border: 0 !important; border-left: 4px solid var(--mh5-rust) !important; border-bottom: 1px solid var(--mh5-line) !important; background: transparent !important; color: var(--mh5-ink) !important; font-size: clamp(1.2rem, 1.8vw, 1.45rem); font-weight: 800; line-height: 1.55; } #main_content .p-toc.-capbox { overflow: hidden; width: min(100%, var(--mh5-reading)); margin: 2rem auto 3rem; border: 1px solid var(--mh5-line-dark); border-radius: 0; background: #fff; box-shadow: none; } #main_content .p-toc.-capbox .p-toc__ttl { margin: 0 -1.5em 1em; padding: .7em 1em; border-radius: 0; background: var(--mh5-navy); color: #fff; } #main_content :where(.wp-block-table, .codex-mobile-table-wrap) { position: relative; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; border: 1px solid var(--mh5-line); border-radius: 0; box-shadow: none; } #main_content :where(.wp-block-table, .codex-mobile-table-wrap):has(tr > *:nth-child(4)) table { min-width: 42rem; } #main_content .wp-block-table th { background: var(--mh5-blue-soft); color: var(--mh5-ink); font-weight: 800; } /* Categories: explain once, then expose every primary choice without a carousel. */ .archive #main_content > .l-mainContent__inner, .search #main_content > .l-mainContent__inner, .page:not(.home) #main_content > .l-mainContent__inner, .error404 #main_content > .l-mainContent__inner { width: min(100%, 62rem); margin-inline: auto; padding: clamp(2.5rem, 5vw, 4.25rem) clamp(2rem, 5vw, 4.25rem); border-top: 6px solid var(--mh5-ink); background: var(--mh5-paper); } .archive #main_content .p-termHead { min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0; background: transparent; color: var(--mh5-text); line-height: 1.85; } /* The accessibility skip target belongs at the document start. Keeping it * absolute prevents a keyboard-focused link from following the reader over * footer categories after a long PageDown sequence. */ .mh-skip-link { position: absolute !important; } .archive #main_content .mono-cat-entry { margin: 0 0 3.5rem !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } .archive #main_content .mono-cat-head { margin-bottom: 1rem; padding-bottom: .75rem; border-bottom: 3px solid var(--mh5-ink); } .archive #main_content .mono-cat-kicker { color: var(--mh5-rust); font-size: .72rem; letter-spacing: .13em; } .archive #main_content .mono-cat-title { padding: 0 !important; border: 0 !important; color: var(--mh5-ink) !important; font-size: clamp(1.5rem, 2.5vw, 1.9rem) !important; } .archive #main_content .mono-cat-lead { max-width: var(--mh5-reading); margin-bottom: 1.5rem; color: var(--mh5-text); font-size: .95rem; line-height: 1.85; } .archive #main_content .mono-cat-section { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--mh5-line-dark); } .archive #main_content .mono-cat-section-title { color: var(--mh5-ink) !important; font-size: 1.15rem !important; } .archive #main_content .mono-cat-section-sub { color: var(--mh5-muted); font-size: .8rem; } .archive #main_content .mono-cat-track { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .75rem !important; overflow: visible !important; padding: 0 !important; scroll-snap-type: none !important; } .archive #main_content .mono-cat-card { display: grid !important; grid-template-columns: 8.5rem minmax(0, 1fr) !important; grid-template-rows: 1fr !important; gap: .8rem !important; min-width: 0 !important; width: 100% !important; padding: .65rem !important; border: 1px solid var(--mh5-line) !important; border-radius: .2rem !important; background: #fff !important; box-shadow: none !important; scroll-snap-align: none !important; } .archive #main_content .mono-cat-card img { width: 8.5rem !important; height: 5rem !important; border-radius: .15rem !important; object-fit: cover; } .archive #main_content .mono-cat-card strong { color: var(--mh5-ink); font-size: .92rem; font-weight: 800; line-height: 1.5; } .archive #main_content .mono-cat-card em { color: var(--mh5-muted); font-size: .75rem; line-height: 1.55; } .archive #main_content .mono-cat-scroll-progress { width: 100% !important; height: 1px !important; margin-top: .75rem !important; background: var(--mh5-line) !important; } .archive #main_content .mono-cat-scroll-progress span { width: 100% !important; margin-left: 0 !important; background: var(--mh5-line) !important; } .archive #main_content :where(.p-postList, .mono-cat-track), .search #main_content .p-postList { min-width: 0; } .archive #main_content .p-postList, .search #main_content .p-postList { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 1rem !important; } #main_content .p-postList__item, .archive #main_content .p-postList.-type-card > .p-postList__item, .search #main_content .p-postList.-type-card > .p-postList__item { width: 100% !important; min-width: 0; margin-bottom: 0 !important; overflow: hidden; border: 1px solid var(--mh5-line); border-radius: .25rem; background: #fff; box-shadow: none; } #main_content .p-postList__link { height: 100%; color: inherit; text-decoration: none; } #main_content .p-postList__body { width: 100% !important; min-width: 0; padding: .85rem .9rem 1rem; } #main_content .p-postList__thumb, #footer .p-postList__thumb { width: 100% !important; min-width: 0 !important; } #main_content .p-postList__title { color: var(--mh5-ink); font-size: .98rem; font-weight: 800; line-height: 1.55; } #main_content .p-postList__excerpt { color: var(--mh5-muted); font-size: .84rem; line-height: 1.7; } .search #main_content .p-postList__link { display: grid; grid-template-columns: 10rem minmax(0, 1fr); align-items: stretch; } .search #main_content .p-postList__thumb img { width: 100%; height: 100%; min-height: 10rem; object-fit: cover; } .search #main_content .p-postList__thumb, .search #main_content .p-postList__thumb > figure { width: 100% !important; height: 100% !important; min-height: 10rem; } /* Article ending: compact related reading and remove dead air before the footer. */ .single-post .p-articleFoot, .single-post #after_article { width: min(100%, var(--mh5-reading)); margin-inline: auto; } .single-post #after_article { padding-bottom: 1.5rem; } .single-post .mh5-reading-end { margin: 0 0 2rem; padding: 1.35rem 1.5rem 1.5rem; border-top: .3rem solid var(--mh5-rust); border-bottom: 1px solid var(--mh5-line); background: var(--mh5-paper); } .single-post .mh5-reading-end__eyebrow { margin: 0 0 .35rem; color: var(--mh5-rust-dark); font-size: .72rem; font-weight: 800; letter-spacing: .12em; } .single-post .mh5-reading-end h2 { margin: 0; padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--mh5-ink) !important; font-size: 1.35rem; line-height: 1.35; } .single-post .mh5-reading-end__guide { margin: .55rem 0 0; color: var(--mh5-muted); font-size: .9rem; line-height: 1.7; } .single-post .mh5-reading-end__stamp { margin: .35rem 0 0; color: var(--mh5-muted); font-size: .76rem; } .single-post .mh5-reading-end__actions { display: grid; grid-template-columns: repeat(2, minmax(0, auto)) minmax(15rem, 1fr); gap: .65rem; align-items: stretch; margin-top: 1rem; } .single-post .mh5-reading-end__category { display: flex; min-height: 3rem; align-items: center; justify-content: center; padding: .65rem .85rem; border: 1px solid var(--mh5-navy); color: var(--mh5-navy); font-size: .82rem; font-weight: 800; line-height: 1.35; text-align: center; text-decoration: none; } .single-post .mh5-reading-end__search { display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem; } .single-post .mh5-reading-end__search input { min-width: 0; min-height: 3rem; padding: .65rem .8rem; border: 1px solid var(--mh5-line-dark); border-right: 0; border-radius: 0; background: #fff; color: var(--mh5-ink); font: inherit; } .single-post .mh5-reading-end__search button { min-height: 3rem; border: 1px solid var(--mh5-navy); border-radius: 0; background: var(--mh5-navy); color: #fff; font: inherit; font-size: .82rem; font-weight: 800; } /* One legacy conclusion wraps a full five-product table in a saturated * gradient. Keep every row, but bring the long comparison back into the * editorial reading surface and restore readable supporting copy. */ .single-post .post_content .mh5-flat-decision-panel { padding: 1.4rem !important; border: 1px solid var(--mh5-line-dark) !important; border-top: .3rem solid var(--mh5-rust) !important; border-radius: .25rem !important; background: var(--mh5-paper) !important; color: var(--mh5-text) !important; box-shadow: none !important; } .single-post .post_content .mh5-flat-decision-panel > :where(h2, h3, p) { color: var(--mh5-text) !important; text-shadow: none !important; } /* Some legacy campaign parts wrap their embedded stylesheet in a visually * empty paragraph. Reset only its box; the campaign DOM and every link remain * in their original position and order. */ .single-post .w-singleTop .p-blogParts > p:first-child { min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } /* Keep the legacy Soundbar jump links, but put them back into the article * flow so the bar can no longer cover the paragraph being read. */ .single-post #floating-compare-nav { position: static !important; width: fit-content !important; max-width: 100% !important; margin: 1.5rem auto !important; border-radius: .25rem !important; background: var(--mh5-navy) !important; } /* Keep marketplace names intact inside narrow two-column price cards. */ .single-post #main_content .mh-price-btn { word-break: normal !important; overflow-wrap: normal !important; } .single-post #main_content .mh-price-btn:not(.mh-price-btn-amazon):not(.mh-price-btn-rakuten):not(.mh-price-btn-yahoo) { border: 1px solid var(--mh5-line-dark) !important; background: var(--mh5-blue-soft) !important; color: var(--mh5-navy) !important; } .single-post .mh5-inline-related-disclosure { margin: 2rem 0 1rem; border-block: 1px solid var(--mh5-line-dark); } .single-post .mh5-inline-related-disclosure > summary { min-height: 3.25rem; padding: .8rem 2rem .8rem .15rem; color: var(--mh5-ink); font-size: .9rem; font-weight: 800; } .single-post .mh5-inline-related-disclosure[open] > summary { margin-bottom: 1rem; border-bottom: 1px solid var(--mh5-line); } .single-post .mh5-inline-related-disclosure > :where(.is-style-awase-yomitai-list, .mh-related-comparisons) { margin-inline: 0 !important; } /* Two old article-local rules turn a heading/body price card into two equal * columns. Keep the same contents, but restore their intended reading order. */ .single-post #dynabook-g7-price-block { display: block !important; } /* Some older articles reuse the button-grid helper class on a table row. * Keep every seller and product cell in the same semantic row on desktop. */ #main_content table.mh-price-comparison-table tr.mh-section-price-links { display: table-row !important; } #main_content table.mh-price-comparison-table tr.mh-section-price-links > :where(th, td) { display: table-cell !important; } /* This article's five Shokz source images are square canvases with generous * built-in white space. Reduce only their desktop display height while * preserving the full product image and its source asset. */ @media (min-width: 768px) { #body_wrap.postid-18923 .post_content figure.size-large > img.wp-image-0 { display: block; width: auto !important; max-width: 100% !important; max-height: 28rem !important; margin-inline: auto; object-fit: contain; } } @media (min-width: 768px) { #body_wrap.postid-23013 #price-table.mh-price-comparison-table tr > :first-child { position: sticky; left: 0; z-index: 2; width: 7rem !important; min-width: 7rem !important; max-width: 7rem !important; background: var(--mh5-blue-soft) !important; box-shadow: 1px 0 0 var(--mh5-line); } #body_wrap.postid-23013 #price-table.mh-price-comparison-table thead tr > :first-child { z-index: 3; background: var(--mh5-navy) !important; color: #fff !important; } #body_wrap.postid-19986 #price-table.mh-wash-table tr > :first-child { width: 7rem !important; min-width: 7rem !important; } #body_wrap.postid-23736 #price-table.mh-pokemon-table { min-width: 82.5rem !important; } #body_wrap.postid-23736 #price-table.mh-pokemon-table > :where(thead, tbody, tfoot) > tr > :where(th, td):first-child { min-width: 12rem !important; } #body_wrap.postid-23736 #price-table.mh-pokemon-table > :where(thead, tbody, tfoot) > tr > :where(th, td):not(:first-child) { min-width: 8.25rem !important; word-break: normal !important; } } /* This official creative is almost entirely pale negative space and its text * is not legible even after a stable viewport load. Preserve the linked * source/copyright, but present the image's existing identification as a calm * text source card instead of an apparently broken image panel. */ .single-post figure:has(> img[src*="daikin-hybrid-ceramheat-wrh135as-h1"]) { padding: .9rem 1rem !important; border: 1px solid var(--mh5-line-dark); border-left: 4px solid var(--mh5-rust); background: var(--mh5-blue-soft); } .single-post figure:has(> img[src*="daikin-hybrid-ceramheat-wrh135as-h1"])::before { content: "公式製品情報：ダイキン ハイブリッドセラムヒート WRH135AS"; display: block; color: var(--mh5-ink); font-size: .9rem; font-weight: 800; line-height: 1.6; } .single-post img[src*="daikin-hybrid-ceramheat-wrh135as-h1"] { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; clip-path: inset(50%) !important; } .single-post figure:has(> img[src*="daikin-hybrid-ceramheat-wrh135as-h1"]) figcaption { margin: .35rem 0 0 !important; color: var(--mh5-muted); font-size: .72rem; line-height: 1.5; text-align: left; } .single-post #after_article .l-articleBottom__section { margin-bottom: 0; padding-bottom: 0; } .single-post #after_article .p-postList { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .85rem !important; } .single-post #after_article .p-postList__link { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); min-height: 7rem; } .single-post #after_article .p-postList__thumb img { width: 100%; height: 100%; min-height: 7rem; object-fit: cover; } .single-post #after_article .p-postList__thumb, .single-post #after_article .p-postList__thumb > figure { width: 100% !important; height: 100% !important; min-height: 7rem; } #before_footer_widget { margin-top: 0 !important; padding-top: 1.25rem; padding-bottom: 1.25rem; } /* Footer: useful wayfinding, not a second endless home page. */ #footer { border-top: 5px solid var(--mh5-rust); background: var(--mh5-navy); color: rgba(255, 255, 255, .9); } #footer a, #footer .c-widget__title { color: #fff; } #footer .mh5-footer-disclosure > summary { margin-bottom: .9rem; padding: .75rem 2.25rem .75rem 0; border-bottom: 2px solid rgba(255, 255, 255, .4); color: #fff; font-size: 1rem; font-weight: 800; cursor: pointer; } #footer .mh5-footer-disclosure > summary::marker { color: rgba(255, 255, 255, .8); } #footer .p-postList { display: grid !important; grid-template-columns: 1fr !important; gap: .55rem !important; } #footer .w-footer { max-width: 72rem; gap: 2rem; } #footer .w-footer__box { min-width: 0; } #footer .c-widget { margin-bottom: 2rem; } #footer .c-widget__title { margin-bottom: .9rem; padding-bottom: .55rem; border-bottom: 2px solid rgba(255, 255, 255, .4); font-size: 1rem; } #footer .p-postList__item { width: 100% !important; min-width: 0 !important; margin-bottom: .65rem !important; border-color: rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .04); } #footer .p-postList__link { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); min-height: 4.5rem; } #footer .p-postList__thumb img { width: 100%; height: 100%; min-height: 4.5rem; object-fit: cover; } #footer .p-postList__thumb, #footer .codex-swell-popular-media { background: rgba(255, 255, 255, .1) !important; } #footer .p-postList__body { padding: .55rem .65rem; } #footer .p-postList__title { color: #fff; font-size: .82rem; line-height: 1.5; } #footer .codex-swell-popular-tablist { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 1px !important; overflow: hidden; margin-bottom: .75rem !important; border: 1px solid rgba(255, 255, 255, .26) !important; border-radius: .2rem !important; background: rgba(255, 255, 255, .26) !important; } #footer .codex-swell-popular-tab { min-height: 2.75rem !important; border: 0 !important; border-radius: 0 !important; background: var(--mh5-navy) !important; color: rgba(255, 255, 255, .78) !important; font-weight: 750 !important; } #footer .codex-swell-popular-tab.is-active { background: #fff !important; color: var(--mh5-navy) !important; } #footer .codex-swell-popular-list { display: grid !important; gap: .55rem !important; } #footer .codex-swell-popular-item { min-width: 0 !important; border: 1px solid rgba(255, 255, 255, .18) !important; border-radius: .2rem !important; background: rgba(255, 255, 255, .04) !important; } #footer .codex-swell-popular-link { display: grid !important; grid-template-columns: 1.7rem 5.5rem minmax(0, 1fr) !important; align-items: stretch !important; min-height: 4.5rem !important; color: #fff !important; text-decoration: none !important; } #footer .codex-swell-popular-rank { display: grid !important; place-items: center !important; color: #fff !important; font-weight: 850 !important; } #footer .codex-swell-popular-media { min-height: 4.5rem !important; } #footer .codex-swell-popular-media img { width: 100% !important; height: 100% !important; object-fit: cover !important; } #footer .codex-swell-popular-body { display: flex !important; align-items: center !important; min-width: 0 !important; padding: .55rem .65rem !important; } #footer .codex-swell-popular-title { color: #fff !important; font-size: .82rem !important; font-weight: 720 !important; line-height: 1.5 !important; } #footer #categories-7 > ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: rgba(255, 255, 255, .18); } #footer #categories-7 > ul > li { margin: 0; border: 0; background: var(--mh5-navy); } #footer #categories-7 > ul > li > a { display: flex; align-items: center; gap: .55rem; min-height: 2.75rem; padding: .55rem .65rem; font-size: .8rem; line-height: 1.4; } #footer #categories-7 > ul > li > a::before { content: "" !important; display: block !important; flex: 0 0 auto; width: .38rem !important; height: .38rem !important; border-radius: 50%; background: #d9a16f; font-family: inherit !important; } #footer .l-footer__foot { border-top: 1px solid rgba(255, 255, 255, .22); } /* Desktop footer: keep all ten ranking entries, but make the footer a compact * directory instead of a second full article page. The utility/search column * gets half the row and lays categories and institutional links side by side. */ @media (min-width: 768px) { #footer .w-footer { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(32rem, 2fr) !important; align-items: start !important; } #footer .w-footer__box { width: auto !important; min-height: 0 !important; } #footer .w-footer__box:last-child { display: grid !important; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr) !important; align-items: start !important; gap: 0 1rem !important; } #footer .w-footer__box:last-child > #search-5 { grid-column: 1 / -1; } #footer .w-footer__box:last-child > .c-widget { min-width: 0; margin-bottom: 1rem; } #footer .p-postList { gap: .35rem !important; } #footer .p-postList__item { margin-bottom: .25rem !important; } #footer .p-postList__link { grid-template-columns: minmax(0, 1fr) !important; min-height: 3.15rem; } #footer .p-postList__thumb, #footer .codex-swell-popular-media { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; } #footer .p-postList__body { padding: .45rem .6rem; } #footer .codex-swell-popular-list { gap: .35rem !important; } #footer .codex-swell-popular-link { grid-template-columns: 1.7rem minmax(0, 1fr) !important; min-height: 3.15rem !important; } #footer .codex-swell-popular-body { padding: .4rem .55rem !important; } #footer #categories-7 > ul > li > a { min-height: 2.35rem; padding: .4rem .5rem; } } .c-pagination :where(a, span) { min-width: 2.75rem; min-height: 2.75rem; border-radius: .2rem; } @media (max-width: 767px) { html { font-size: 16px; } #content, .home #content { width: 100%; padding: 1.5rem .5rem 4.5rem; } .home #content { margin-bottom: 0 !important; padding-bottom: 2rem; } #main_content > .l-mainContent__inner, .single-post #main_content > .l-mainContent__inner, .archive #main_content > .l-mainContent__inner, .search #main_content > .l-mainContent__inner, .page:not(.home) #main_content > .l-mainContent__inner, .error404 #main_content > .l-mainContent__inner { width: 100%; padding: 2rem .75rem 2.75rem; border-top-width: 4px; background: var(--mh5-paper); } .home #main_content > .l-mainContent__inner { padding-inline: 0; } #main_content .c-pageTitle { margin-bottom: 1.5rem; font-size: 1.7rem !important; } .home .mhz { gap: 3.25rem; } .home .mhz-intro { grid-template-columns: 1fr; gap: 1.5rem; padding: 2rem 1.25rem; border-left-width: 5px; } .home .mhz-intro h1 { font-size: 2rem; line-height: 1.2; } .home .mhz-search button { min-width: 5.75rem; } .home .mhz-head { display: block; } .home .mhz-head :where(p, span) { display: block; margin-top: .35rem; } .home .mhz-grid, .home .mhz-grid:has(> :nth-child(4):last-child) { grid-template-columns: 1fr; } .home .mhz-item { min-height: 6.75rem; padding: .9rem; } /* Mobile home uses color as information hierarchy: navy for choices, * slate for supporting copy, and rust only for labels/counts. This also * overrides older home-part rules that made secondary copy look washed * out on a phone. */ .home .mhz-intro h1, .home .mhz-head h2, .home .mhz-item strong, .home :where(.mhz-directory, .mhz-info) > summary { color: var(--mh5-navy) !important; } .home .mhz-intro p, .home .mhz-search-note, .home .mhz-head :where(p, span), .home .mhz-item :where(span, small) { color: #465b70 !important; } .home .mhz-item b { display: inline-flex; align-items: center; width: fit-content; margin-bottom: .42rem; padding: .18rem .48rem; border: 1px solid #e6bca8; border-radius: 999px; background: var(--mh5-rust-soft); color: #873515 !important; font-size: .7rem; font-style: normal; font-weight: 800; line-height: 1.35; } .home .mhz-item em, .home .mhz-cats .mhz-item :where(i, small:last-child), .home .mhz-directory summary span { color: #873515 !important; } .home .mhz-info a { color: #234e70 !important; text-decoration-color: #9eb5c7; } .single-post #main_content .c-postTitle__ttl { font-size: 1.65rem !important; line-height: 1.42 !important; } .single-post .p-articleThumb { margin: 1.5rem auto 2rem !important; } .single-post .p-articleThumb img { border-radius: .2rem; } .single-post .w-singleTop { width: 100%; margin: 1.75rem auto 2.25rem !important; } .single-post .w-singleTop .mh-campaign-body { grid-template-columns: 1fr !important; } .single-post .w-singleTop .mh-campaign-group { width: 100% !important; max-width: none !important; padding: .75rem !important; border-right: 0 !important; border-bottom: 1px solid var(--mh5-line) !important; flex: none !important; } .single-post .w-singleTop .mh-campaign-group:last-child { border-bottom: 0 !important; } .single-post .w-singleTop .mh-amazon-group .mh-campaign-links { grid-template-columns: 1fr !important; } .single-post .w-singleTop :where(.mh-campaign-link, .mh-campaign-subcta a, .mh-campaign-points summary) { min-height: 3rem !important; padding: .6rem .7rem !important; font-size: .8125rem !important; } .single-post .post_content:not(.p-blogParts):not(.p-toc), .page:not(.home) #main_content .post_content:not(.p-blogParts):not(.p-toc) { font-size: 1rem; line-height: 1.9; } #body_wrap.codex-mh-v5.single-post #main_content article .post_content:not(.p-blogParts):not(.p-toc) h2, #main_content .post_content:not(.p-blogParts):not(.p-toc) h2 { margin-top: 2.75em; padding-top: .3em !important; font-size: 1.35rem; } #main_content .post_content:not(.p-blogParts):not(.p-toc) h3 { margin-top: 2.2em; font-size: 1.18rem; } /* Existing mobile helpers stack cells. That is useful for two-column fact * lists, but destroys comparison tables with three or more columns. Restore * those to a readable horizontal table instead of one-character wrapping. */ #main_content .codex-mobile-table-stack:has(tr > *:nth-child(3)) { overflow-x: auto !important; overscroll-behavior-inline: contain; } #main_content .codex-mobile-table-stack:has(tr > *:nth-child(3)) table { display: table !important; width: 42rem !important; min-width: 42rem !important; table-layout: fixed !important; } #main_content .codex-mobile-table-stack:has(tr > *:nth-child(3)) :where(thead, tbody, tfoot) { display: table-row-group !important; } #main_content .codex-mobile-table-stack:has(tr > *:nth-child(3)) thead { display: table-header-group !important; } #main_content .codex-mobile-table-stack:has(tr > *:nth-child(3)) tr { display: table-row !important; } #main_content .codex-mobile-table-stack:has(tr > *:nth-child(3)) :where(th, td) { display: table-cell !important; width: auto !important; min-width: 9rem !important; max-width: none !important; padding: .7rem !important; vertical-align: top !important; word-break: normal !important; overflow-wrap: anywhere; } #main_content .codex-mobile-table-stack:has(tr > *:nth-child(3)) tr > :first-child { width: 7rem !important; min-width: 7rem !important; max-width: 7rem !important; } #main_content .codex-mobile-table-stack:has(tr > *:nth-child(3)) td::before { content: none !important; } /* Price tables often freeze the product column. Older rules allowed that * column to grow to almost the full phone viewport, leaving no useful view * of Amazon/Rakuten/Yahoo columns. Constrain only this table family; normal * specification tables keep their own narrower row-header widths. */ #main_content .mh-price-comparison-table tr > :first-child { width: 7rem !important; min-width: 7rem !important; max-width: 7rem !important; white-space: normal !important; overflow-wrap: anywhere; } #main_content .mh-price-comparison-table { table-layout: fixed !important; } #body_wrap.postid-23736 .mh-pokemon-scroll .mh-pokemon-table tr > :first-child { position: sticky !important; left: 0; z-index: 2; width: 7rem !important; min-width: 7rem !important; max-width: 7rem !important; background: var(--mh5-blue-soft) !important; white-space: normal !important; overflow-wrap: anywhere; box-shadow: 1px 0 0 var(--mh5-line); } #body_wrap.postid-23736 .mh-pokemon-scroll .mh-pokemon-table { table-layout: fixed !important; } #body_wrap.postid-23736 .mh-pokemon-scroll .mh-pokemon-table thead tr > :first-child { z-index: 3; background: var(--mh5-navy) !important; color: #fff !important; } /* Older product reviews use an inline image/spec two-column grid that * leaves only a few characters per line on phones. Preserve both parts and * stack them as one product unit. */ #main_content .post_content > div[style*="grid-template-columns:minmax(130px,190px) 1fr"] { grid-template-columns: 1fr !important; gap: 1rem !important; } /* Three older comparison articles use their own inline two-column product * grids. Their fixed image-column minimums leave only a few characters per * line on phones. Keep the desktop comparison layout and stack only these * exact article grids at the mobile breakpoint. */ #body_wrap.postid-17608 .post_content > h3.wp-block-heading + div[style*="grid-template-columns:minmax(160px,240px) 1fr"], #body_wrap.postid-21274 .post_content div[style*="grid-template-columns:minmax(118px,170px) 1fr"], #body_wrap.postid-17902 .post_content > h3.wp-block-heading + div[style*="grid-template-columns:minmax(180px,240px) 1fr"] { grid-template-columns: minmax(0, 1fr) !important; align-items: start !important; gap: 1rem !important; } #body_wrap.postid-21274 .post_content div[style*="grid-template-columns:1fr 1fr"][style*="gap:12px"] { grid-template-columns: minmax(0, 1fr) !important; gap: .75rem !important; } #body_wrap.postid-17608 .post_content > h3.wp-block-heading + div[style*="grid-template-columns:minmax(160px,240px) 1fr"] > figure, #body_wrap.postid-21274 .post_content div[style*="grid-template-columns:minmax(118px,170px) 1fr"] > figure, #body_wrap.postid-17902 .post_content > h3.wp-block-heading + div[style*="grid-template-columns:minmax(180px,240px) 1fr"] > figure { justify-self: center; width: min(100%, 18rem) !important; } .archive #main_content .p-termHead { margin: 0 !important; padding: 0 !important; } .archive #main_content .mono-cat-track, .archive #main_content .p-postList, .search #main_content .p-postList, .single-post #after_article .p-postList { grid-template-columns: 1fr !important; } .single-post .mh5-reading-end { padding: 1.15rem 1rem 1.25rem; } .single-post .post_content .mh5-flat-decision-panel { padding: 1rem !important; } .single-post .mh5-reading-end__actions { grid-template-columns: 1fr; } .archive #main_content .mono-cat-card { grid-template-columns: 7.25rem minmax(0, 1fr) !important; } .archive #main_content .mono-cat-card img { width: 7.25rem !important; height: 4.5rem !important; } .search #main_content .p-postList__link, .single-post #after_article .p-postList__link { grid-template-columns: 7.25rem minmax(0, 1fr); } .search #main_content .p-postList__thumb img, .single-post #after_article .p-postList__thumb img { min-height: 7rem; } #before_footer_widget { padding-inline: .5rem; } #footer .w-footer { gap: 1.25rem; } #footer .w-footer__box { margin: 0 !important; padding-block: 0 !important; } #footer .c-widget { margin-bottom: 1.35rem; } #footer .mh5-footer-disclosure { border-top: 1px solid rgba(255, 255, 255, .18); border-bottom: 1px solid rgba(255, 255, 255, .18); } #footer .mh5-footer-disclosure > summary { min-height: 3.5rem; margin: 0; padding: 1rem .25rem; border: 0; } #footer .mh5-footer-disclosure[open] > summary { margin-bottom: .75rem; border-bottom: 1px solid rgba(255, 255, 255, .3); } #footer .p-postList__link { grid-template-columns: 4.75rem minmax(0, 1fr) !important; min-height: 4.25rem !important; } #footer .codex-swell-popular-link { grid-template-columns: 1.5rem 4.75rem minmax(0, 1fr) !important; min-height: 4.25rem !important; color: var(--mh5-ink) !important; } /* The ranking is a reading surface rather than footer chrome on phones. * Light cards and dark titles remain legible at a glance, while the rust * rank badge keeps the order obvious without making every word white. */ #footer .codex-swell-popular-tab { color: #fff !important; } #footer .codex-swell-popular-tab.is-active { color: var(--mh5-navy) !important; } #footer .codex-swell-popular-item { border-color: #d9e0e6 !important; background: #fffdf9 !important; } #footer .codex-swell-popular-rank { align-self: stretch !important; background: var(--mh5-rust) !important; color: #fff !important; } #footer .codex-swell-popular-title { color: var(--mh5-ink) !important; } #footer .codex-swell-popular-views, #footer .codex-swell-popular-empty { color: #4d6072 !important; } #footer .p-postList__thumb img, #footer .codex-swell-popular-media, #footer .codex-swell-popular-media img { min-height: 4.25rem !important; } #footer #categories-7 > ul > li > a { min-height: 3rem; font-size: .8125rem; } } @media (max-width: 359px) { #content, .home #content { padding-inline: .375rem; } #main_content > .l-mainContent__inner, .single-post #main_content > .l-mainContent__inner, .archive #main_content > .l-mainContent__inner, .search #main_content > .l-mainContent__inner, .page:not(.home) #main_content > .l-mainContent__inner, .error404 #main_content > .l-mainContent__inner { padding-inline: .5rem; } .home #main_content > .l-mainContent__inner { padding-inline: 0; } #main_content .mh-price-comparison-table tr > :first-child { width: 6.5rem !important; min-width: 6.5rem !important; max-width: 6.5rem !important; } #main_content .codex-mobile-table-stack:has(tr > *:nth-child(3)) tr > :first-child { width: 6.5rem !important; min-width: 6.5rem !important; max-width: 6.5rem !important; } #body_wrap.postid-23736 .mh-pokemon-scroll .mh-pokemon-table tr > :first-child { width: 6.5rem !important; min-width: 6.5rem !important; max-width: 6.5rem !important; } .home .mhz-grid, .home .mhz-grid:has(> :nth-child(4):last-child) { grid-template-columns: 1fr; } .home .mhz-search form, .home .c-searchForm { grid-template-columns: minmax(0, 1fr) 5rem; } .archive #main_content .mono-cat-card, .single-post #after_article .p-postList__link { grid-template-columns: 6rem minmax(0, 1fr) !important; } .search #main_content .p-postList__link { grid-template-columns: 1fr !important; } .search #main_content .p-postList__thumb, .search #main_content .p-postList__thumb > figure, .search #main_content .p-postList__thumb img { min-height: 9.5rem !important; max-height: 11rem; } .archive #main_content .mono-cat-card img { width: 6rem !important; height: 4rem !important; } #footer #categories-7 > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* 2026-09-03 professional review refinements: tables use the reading width on * phones and a deliberate editorial breakout on desktop. Captions remain in * view while readers actually scroll horizontally. */ .single-post .post_content :where(.compare-table-scroll, figure.wp-block-table, .codex-mobile-table-wrap) { position: relative; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-gutter: stable; } .single-post .post_content :where(.mh-current-model-callout, .mh-price-note) { padding: 1rem 1.1rem; border: 1px solid rgba(24, 117, 104, .24); border-left: 4px solid var(--mh5-green); border-radius: .8rem; background: #f2fbf8; line-height: 1.75; } .single-post .post_content .mh-purchase-actions, .single-post .post_content .mh-tp-purchase-grid .mh-purchase-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin: 1rem 0; } .single-post .post_content .mh-purchase-actions a, .single-post .post_content .mh-tp-purchase-grid .mh-purchase-actions a { display: flex; min-height: 3.25rem; align-items: center; justify-content: center; padding: .8rem 1rem; border: 1px solid #b8c8d4; border-radius: .7rem; background: #fff; color: var(--mh5-ink); font-weight: 800; line-height: 1.4; text-align: center; text-decoration: none; } @media (min-width: 960px) { .single-post .post_content :where(.compare-table-scroll, figure.wp-block-table), .single-post .post_content > .codex-mobile-table-wrap, .single-post .post_content > div:has(> .codex-mobile-table-wrap) { position: relative; width: min(70rem, calc(100vw - 4rem)); max-width: none; left: 50%; margin-right: 0; margin-left: 0; transform: translateX(-50%); } } @media (max-width: 767px) { .single-post .w-singleTop .mh-campaign-title { font-size: .92rem !important; letter-spacing: 0 !important; word-break: auto-phrase !important; text-wrap: balance !important; } #main_content table tr > :first-child { overflow: visible; padding-right: .45rem !important; padding-left: .45rem !important; } .single-post .post_content :where(.compare-table-scroll, figure.wp-block-table, .codex-mobile-table-wrap) { width: 100%; max-width: 100%; margin-right: 0; margin-left: 0; transform: none; } .single-post .post_content .mh-purchase-actions, .single-post .post_content .mh-tp-purchase-grid .mh-purchase-actions { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } } @media (forced-colors: active) { #body_wrap :where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid CanvasText !important; } } /* * 2026-09 Product Lab rebuild. * * This is a true visual-system override rather than another article template. * It does not move or rewrite the protected article-top campaign surface. */ :root { --mh5-ink: #172536; --mh5-text: #314255; --mh5-muted: #607080; --mh5-paper: #fff; --mh5-canvas: #f5f7f8; --mh5-line: #dce3e7; --mh5-line-dark: #becbd2; --mh5-navy: #17324d; --mh5-rust: #c65324; --mh5-rust-soft: #fff1ea; --mh5-blue-soft: #eef5f7; --mh5-green: #187568; --mh5-focus: #006fc9; } body, #body_wrap { background: radial-gradient(circle at 92% 4%, rgba(24, 117, 104, .055), transparent 21rem), var(--mh5-canvas); } #header { border-top: 0; border-bottom-color: rgba(23, 50, 77, .1); box-shadow: 0 1px 12px rgba(23, 37, 54, .045); } #header .c-gnav > li > a { min-height: 4.5rem; font-weight: 760; } /* 2026-10-10 claude-sitewide-review（header_nav）：PCナビを15pxにし、hover・フォーカス・現在地で錆色の下線を出す（比べて選ぶ時に今どの棚にいるか分かるように）。 */ @media (min-width: 960px) { #header .c-gnav > li > a { position: relative; padding: 0 14px; font-size: .9375rem; background: linear-gradient(var(--mh5-rust), var(--mh5-rust)) no-repeat center bottom 16px / 0 3px; transition: background-size .18s ease, color .18s ease; } #header .c-gnav > li > a:is(:hover, :focus-visible), #header .c-gnav > li:is(.current-menu-item, .current-menu-parent, .current-post-ancestor, .current-category-ancestor) > a { color: var(--mh5-rust); background-size: calc(100% - 28px) 3px; } #header .c-gnav > li > a::after { display: none !important; } } @media (min-width: 960px) and (max-width: 1099px) { #header .c-gnav > li > a { padding: 0 9px; font-size: .875rem; background-size: 0 3px; } } .p-breadcrumb { border-bottom: 0; background: rgba(255, 255, 255, .72); } #content { padding-top: clamp(1.5rem, 3vw, 3rem); } .home #main_content { width: 100% !important; max-width: none !important; } .home .mhz { gap: clamp(2.6rem, 5vw, 4.5rem); } .home .mhz-intro { position: relative; grid-template-columns: minmax(24rem, 1fr) minmax(22rem, 1fr); gap: clamp(2rem, 4vw, 3rem); overflow: hidden; padding: clamp(2.5rem, 5vw, 4.5rem); border: 1px solid rgba(24, 117, 104, .16); border-radius: 1.35rem; background: linear-gradient(120deg, rgba(24, 117, 104, .065), rgba(255, 255, 255, 0) 52%), var(--mh5-paper); box-shadow: 0 18px 55px rgba(23, 50, 77, .07); } .home .mhz-intro::before { content: "現行モデルと購入先を、同じ条件で比較"; position: absolute; top: clamp(1.35rem, 2.5vw, 2.25rem); left: clamp(2.5rem, 5vw, 4.5rem); width: fit-content; margin: 0; color: var(--mh5-green); font-size: .75rem; font-weight: 850; letter-spacing: .07em; } .home .mhz-intro > div:first-of-type { padding-top: 1.25rem; } .home .mhz-intro h1 { max-width: none; margin-bottom: .75rem; font-size: clamp(2.25rem, 3.5vw, 2.9rem); letter-spacing: -.055em; line-height: 1.13; } .home .mhz-intro p { color: #526476; line-height: 1.85; } @media (min-width: 768px) and (max-width: 1023px) { .home .mhz-intro { grid-template-columns: 1fr; } .home .mhz-intro > div:first-of-type { padding-top: 1.5rem; } .home .mhz-intro h1 { font-size: 2.55rem; } } .home .mhz-search form, .home .c-searchForm { padding: .35rem; border: 1px solid var(--mh5-line-dark); border-radius: .9rem; box-shadow: 0 7px 22px rgba(23, 50, 77, .075); } .home .mhz-search input { min-height: 3.5rem; border-radius: .65rem 0 0 .65rem; } .home .mhz-search button { min-width: 6.5rem; min-height: 3.5rem; border-radius: .65rem; background: var(--mh5-rust); box-shadow: 0 4px 12px rgba(198, 83, 36, .2); } .home .mhz-head { align-items: end; margin-bottom: 1rem; padding: 0; border: 0; } .home .mhz-head h2 { position: relative; padding-top: .7rem; font-size: clamp(1.45rem, 2.3vw, 1.9rem); } .home .mhz-head h2::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 2.75rem; height: .24rem; border-radius: 999px; background: var(--mh5-green); } .home .mhz-grid, .home .mhz-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; overflow: visible; border: 0; background: transparent; } .home .mhz-item { min-height: 8rem; padding: 1rem; border: 1px solid var(--mh5-line); border-radius: 1rem; background: rgba(255, 255, 255, .96); box-shadow: 0 5px 18px rgba(23, 50, 77, .045); transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; } .home .mhz-item:hover { border-color: rgba(24, 117, 104, .45); background: #fff; box-shadow: 0 12px 28px rgba(23, 50, 77, .09); transform: translateY(-2px); } .home .mhz-grid .mhz-item.has-image { grid-template-columns: 7.5rem minmax(0, 1fr) 1rem !important; grid-template-rows: auto 1fr auto !important; gap: .35rem .9rem !important; } .home .mhz-grid .mhz-item.has-image > img { grid-row: 1 / 4; width: 7.5rem !important; height: 7rem !important; border-radius: .7rem; background: #eef2f3; object-fit: cover !important; } .home .mhz-grid .mhz-item.has-image > span > b { grid-column: 2; padding: .2rem .5rem; border-radius: 999px; background: var(--mh5-rust-soft); color: #9f3d18; font-size: .68rem; } .home .mhz-grid .mhz-item.has-image > span > strong { grid-column: 2; grid-row: 2; align-self: start; font-size: .96rem !important; line-height: 1.55 !important; } .home .mhz-grid .mhz-item.has-image > span > small { grid-column: 2; grid-row: 3; -webkit-line-clamp: 1; color: var(--mh5-muted); } .home .mhz-grid .mhz-item.has-image > em { grid-row: 1 / 4; align-self: center; color: var(--mh5-green); } #body_wrap.home .post_content .mhz-cats { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: .85rem !important; border: 0 !important; background: transparent !important; } #body_wrap.home .post_content .mhz-cats > a { min-height: 7.5rem; padding: 1rem !important; border: 1px solid var(--mh5-line) !important; border-radius: .9rem; background: #fff !important; box-shadow: 0 4px 16px rgba(23, 50, 77, .035); } #body_wrap.home .post_content .mhz-cats > a:hover { border-color: rgba(24, 117, 104, .45) !important; box-shadow: 0 10px 24px rgba(23, 50, 77, .075); } #body_wrap.home .post_content .mhz-cats > a.is-life-revenue { background: linear-gradient(135deg, #f0faf7, #fff) !important; box-shadow: inset 0 0 0 1px rgba(24, 117, 104, .18); } #body_wrap.home .post_content .mhz-cats > a.is-life-revenue strong { color: #135f56; } #body_wrap.home .post_content .mhz-cats > a.is-life-revenue b { background: var(--mh5-green); } .single-post #main_content > .l-mainContent__inner, .archive #main_content > .l-mainContent__inner, .search #main_content > .l-mainContent__inner, .page:not(.home) #main_content > .l-mainContent__inner, .error404 #main_content > .l-mainContent__inner { border: 1px solid rgba(23, 50, 77, .08); border-radius: 1.25rem; background: rgba(255, 255, 255, .98); box-shadow: 0 14px 45px rgba(23, 50, 77, .055); } .single-post #main_content .c-postTitle__ttl { font-size: clamp(2rem, 4vw, 3rem) !important; line-height: 1.3 !important; } #body_wrap.codex-mh-v5.single-post #main_content article .post_content:not(.p-blogParts):not(.p-toc) h2, #main_content .post_content:not(.p-blogParts):not(.p-toc) h2 { margin-top: 2.6em; padding: .75rem 0 .7rem 1rem !important; border: 0 !important; border-left: 4px solid var(--mh5-green) !important; border-bottom: 1px solid var(--mh5-line) !important; border-radius: 0 !important; background: transparent !important; color: var(--mh5-ink) !important; box-shadow: none !important; font-size: clamp(1.45rem, 2.8vw, 1.95rem) !important; } #body_wrap.codex-mh-v5.single-post #main_content article .post_content:not(.p-blogParts):not(.p-toc) h2::before, #main_content .post_content:not(.p-blogParts):not(.p-toc) h2::before { content: none !important; } #body_wrap.codex-mh-v5.single-post #main_content article .post_content:not(.p-blogParts):not(.p-toc) h3, #main_content .post_content:not(.p-blogParts):not(.p-toc) h3 { margin-top: 2.2em; padding-bottom: .45rem; border-bottom: 1px solid rgba(24, 117, 104, .3); color: var(--mh5-ink) !important; } .single-post .post_content:not(.p-blogParts):not(.p-toc) > p { line-height: 1.92; } .single-post .w-singleTop .mh-campaign-box { overflow: hidden; border: 1px solid rgba(23, 50, 77, .14) !important; border-radius: 1rem !important; box-shadow: 0 8px 24px rgba(23, 50, 77, .055) !important; } #main_content :where(.wp-block-table, .codex-mobile-table-wrap) { border: 1px solid var(--mh5-line); border-radius: .8rem; background: #fff; box-shadow: inset 0 -1px 0 rgba(23, 50, 77, .03); } #main_content :where(.wp-block-table, .codex-mobile-table-wrap)::before { color: #687889; font-size: .7rem; font-weight: 750; } #main_content table :where(th, td) { border-color: #d8e1e6 !important; } #main_content table tr > :first-child { overflow: hidden; } #main_content table tr > :only-child, #main_content table [colspan]:first-child { position: static !important; width: auto !important; min-width: 0 !important; max-width: none !important; transform: none !important; white-space: normal !important; } #main_content :where(.mh-price-comparison-table, .mh-pokemon-table) { border-collapse: separate !important; border-spacing: 0 !important; } .single-post .post_content p:has(> .mh-price-btn) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin-block: 1rem 1.5rem; } .single-post #main_content .mh-price-btn { display: flex !important; align-items: center; justify-content: center; min-height: 3.2rem; padding: .65rem .8rem !important; border: 1px solid #d5dee3 !important; border-radius: .7rem !important; background: #f7fafb !important; color: var(--mh5-navy) !important; font-size: .84rem; font-weight: 820; line-height: 1.45; text-align: center; text-decoration: none !important; box-shadow: none !important; } .single-post #main_content .mh-price-btn[data-mh-price-status="verified_exact"] { border-color: rgba(198, 83, 36, .36) !important; background: var(--mh5-rust-soft) !important; color: #8d3515 !important; } #body_wrap.codex-mh-v5.single-post #main_content .mh-price-btn[data-mh-price-status="verified_exact"] { border-color: rgba(198, 83, 36, .42) !important; background: var(--mh5-rust-soft) !important; color: #8d3515 !important; } #body_wrap.codex-mh-v5.single-post #main_content .mh-price-btn[data-mh-price-status="no_exact_current_offer"] { border-style: dashed !important; border-color: #c9d2d8 !important; background: #f7f9fa !important; color: #667583 !important; font-weight: 720; } .single-post #main_content .mh-price-btn:hover { border-color: var(--mh5-rust) !important; box-shadow: 0 7px 18px rgba(23, 50, 77, .08) !important; } .single-post .mh5-reading-end { padding: 1.4rem 1.5rem 1.5rem; border: 1px solid rgba(24, 117, 104, .2); border-radius: 1rem; background: linear-gradient(135deg, #f1faf8, #fff 70%); box-shadow: 0 8px 24px rgba(23, 50, 77, .045); } .single-post .mh5-reading-end__eyebrow { color: var(--mh5-green); } .single-post .mh5-reading-end__category, .single-post .mh5-reading-end__search input, .single-post .mh5-reading-end__search button { border-radius: .65rem; } .single-post .mh5-reading-end__category { border-color: rgba(24, 117, 104, .42); color: var(--mh5-green); background: #fff; } .single-post .mh5-reading-end__search { gap: .4rem; } .single-post .mh5-reading-end__search input { border-right: 1px solid var(--mh5-line-dark); } .single-post .mh5-reading-end__search button { border-color: var(--mh5-green); background: var(--mh5-green); } .single-post .mh5-reading-end__more { margin-top: .85rem; border-top: 1px solid rgba(24, 117, 104, .18); } .single-post .mh5-reading-end__more > summary { padding: .85rem .15rem .2rem; color: var(--mh5-green); font-size: .82rem; font-weight: 820; cursor: pointer; } .single-post .mh5-reading-end__more[open] > summary { margin-bottom: .75rem; } #main_content .p-postList__item, .archive #main_content .mono-cat-card { overflow: hidden; border-radius: .8rem !important; box-shadow: 0 4px 14px rgba(23, 50, 77, .04); } #footer { border-top: 0; background: #17324d; } #footer .w-footer { padding-top: clamp(2rem, 5vw, 3.5rem); } #footer .mh5-footer-disclosure > summary, #footer .c-widget__title { border-bottom-color: rgba(255, 255, 255, .22); } #footer .codex-swell-popular-item, #footer .codex-swell-popular-tablist { border-radius: .65rem !important; } #footer #categories-7 > ul { gap: .35rem; background: transparent; } #footer #categories-7 > ul > li { border-radius: .45rem; background: rgba(255, 255, 255, .055); } #footer .l-footer__foot, #footer .copyright, #footer .copyright a { color: rgba(255, 255, 255, .72) !important; } .single-post #content { margin-bottom: 1.5rem !important; padding-bottom: 2rem; } @media (max-width: 767px) { #content, .home #content { padding: 1rem .5rem 3.5rem; } .home .mhz { gap: 2.5rem; } .home .mhz-intro { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding: 1.4rem 1rem 1.15rem; border-radius: 1rem; } .home .mhz-intro::before { top: 1.15rem; left: 1rem; margin: 0; font-size: .68rem; } .home .mhz-intro > div:first-of-type { grid-row: auto; padding-top: 1.1rem; } .home .mhz-intro > div:last-of-type { grid-row: auto; } .home .mhz-intro h1 { max-width: none; font-size: clamp(1.75rem, 8vw, 2.2rem); line-height: 1.22; } .home .mhz-intro p { font-size: .92rem; line-height: 1.75; } .home .mhz-search form, .home .c-searchForm { grid-template-columns: minmax(0, 1fr) 5.25rem; padding: .25rem; border-radius: .8rem; } .home .mhz-search input, .home .mhz-search button { min-height: 3.25rem; } .home .mhz-head { display: grid; gap: .35rem; } .home .mhz-head h2 { font-size: 1.42rem; } .home .mhz-grid, .home .mhz-grid:has(> :nth-child(4):last-child) { grid-template-columns: 1fr; gap: .75rem; } .home .mhz-item { border-radius: .85rem; } .home .mhz-grid .mhz-item.has-image { grid-template-columns: 6.25rem minmax(0, 1fr) .75rem !important; padding: .75rem !important; } .home .mhz-grid .mhz-item.has-image > img { width: 6.25rem !important; height: 5.75rem !important; border-radius: .55rem; } .home .mhz-grid .mhz-item.has-image > span > strong { font-size: .9rem !important; line-height: 1.5 !important; } .home .mhz-grid .mhz-item.has-image > span > small { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; } #body_wrap.home .post_content .mhz-cats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .55rem !important; } #body_wrap.home .post_content .mhz-cats > a { min-height: 7rem; padding: .8rem !important; border-radius: .75rem; } .single-post #main_content > .l-mainContent__inner, .archive #main_content > .l-mainContent__inner, .search #main_content > .l-mainContent__inner, .page:not(.home) #main_content > .l-mainContent__inner, .error404 #main_content > .l-mainContent__inner { padding: 1.5rem .75rem 2.25rem; border-radius: .9rem; } .single-post #main_content .c-postTitle__ttl { font-size: clamp(1.7rem, 7.6vw, 2.05rem) !important; line-height: 1.34 !important; } #body_wrap.codex-mh-v5.single-post #main_content article .post_content:not(.p-blogParts):not(.p-toc) h2, #main_content .post_content:not(.p-blogParts):not(.p-toc) h2 { margin-top: 2.35em; padding: .65rem 0 .6rem .75rem !important; font-size: 1.4rem !important; } .single-post .post_content p:has(> .mh-price-btn) { grid-template-columns: 1fr; gap: .5rem; } .single-post #main_content .mh-price-btn { min-height: 3rem; font-size: .82rem; } .single-post .mh5-reading-end { padding: 1.1rem; border-radius: .85rem; } #footer .w-footer { padding-inline: .75rem; } #footer .mh5-footer-disclosure { border: 1px solid rgba(255, 255, 255, .13); border-radius: .65rem; } #footer .mh5-footer-disclosure > summary { padding-inline: .8rem; } } @media (max-width: 359px) { #content, .home #content { padding-inline: .375rem; } .home .mhz-intro { padding-inline: .85rem; } .home .mhz-intro h1 { font-size: 1.7rem; } .home .mhz-search form, .home .c-searchForm { grid-template-columns: minmax(0, 1fr) 4.75rem; } .home .mhz-grid .mhz-item.has-image { grid-template-columns: 5.6rem minmax(0, 1fr) .65rem !important; } .home .mhz-grid .mhz-item.has-image > img { width: 5.6rem !important; height: 5.25rem !important; } #body_wrap.home .post_content .mhz-cats > a { min-height: 6.75rem; padding: .7rem !important; } } /* Footer discovery: share Harimap's always-visible calendar-card pattern. New and Popular keep identical card edges, full eyecatches and complete titles; lower-priority utility groups retain their compact disclosure. */ #body_wrap.codex-mh-v5 #footer .mh5-footer-section { height: auto; margin: 0; padding: 0; } #body_wrap.codex-mh-v5 #footer .mh5-footer-section__title { margin: 0 0 .875rem; padding: .1875rem 0 .1875rem .6875rem; border-left: 4px solid var(--mh5-rust); color: #fff; font-size: 1.125rem; font-weight: 820; line-height: 1.45; } #body_wrap.codex-mh-v5 #footer .mh5-footer-section__content, #body_wrap.codex-mh-v5 #footer .mh5-footer-section__content .p-postList, #body_wrap.codex-mh-v5 #footer .mh5-footer-section__content .codex-swell-popular-panel:not([hidden]), #body_wrap.codex-mh-v5 #footer .mh5-footer-section__content .codex-swell-popular-list { max-height: none !important; overflow: visible !important; } #body_wrap.codex-mh-v5 #footer .mh5-footer-section[data-mh5-footer-type="new"] .p-postList, #body_wrap.codex-mh-v5 #footer .mh5-footer-section[data-mh5-footer-type="popular"] .codex-swell-popular-list { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: .625rem !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } #body_wrap.codex-mh-v5 #footer .mh5-footer-section[data-mh5-footer-type="new"] .p-postList__item, #body_wrap.codex-mh-v5 #footer .mh5-footer-section[data-mh5-footer-type="popular"] .codex-swell-popular-item { display: list-item !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; list-style: none !important; } #body_wrap.codex-mh-v5 #footer .mh5-footer-section[data-mh5-footer-type="new"] .p-postList__link, #body_wrap.codex-mh-v5 #footer .mh5-footer-section[data-mh5-footer-type="popular"] .codex-swell-popular-link { box-sizing: border-box; display: grid !important; grid-template-columns: 7.5rem minmax(0, 1fr) !important; align-items: start !important; gap: .625rem !important; width: 100% !important; min-height: 6rem !important; margin: 0 !important; padding: .5rem !important; border: 1px solid #d9e0e6 !important; border-radius: .6rem !important; background: #fffdf9 !important; box-shadow: none; color: var(--mh5-ink) !important; text-decoration: none !important; } #body_wrap.codex-mh-v5 #footer .mh5-footer-section[data-mh5-footer-type="new"] .p-postList__thumb, #body_wrap.codex-mh-v5 #footer .mh5-footer-section[data-mh5-footer-type="popular"] .codex-swell-popular-media { position: relative !important; align-self: start !important; width: 7.5rem !important; height: auto !important; min-height: 0 !important; aspect-ratio: 16 / 9; margin: 0 !important; border-radius: .5rem; background: #f2f5f7 !important; box-shadow: none; clip-path: none !important; } #body_wrap.codex-mh-v5 #footer .mh5-footer-section[data-mh5-footer-type="new"] .p-postList__thumb { overflow: hidden !important; } #body_wrap.codex-mh-v5 #footer .mh5-footer-section[data-mh5-footer-type="popular"] .codex-swell-popular-media { overflow: visible !important; } #body_wrap.codex-mh-v5 #footer .mh5-footer-section :is(.p-postList__thumb figure, .p-postList__thumb img, .codex-swell-popular-media img) { display: block !important; width: 100% !important; height: 100% !important; min-height: 0 !important; margin: 0 !important; border-radius: .5rem; background: #f2f5f7; clip-path: none !important; object-fit: contain !important; } #body_wrap.codex-mh-v5 #footer .mh5-footer-section[data-mh5-footer-type="new"] .p-postList__thumb figure { position: relative !important; overflow: hidden !important; } #body_wrap.codex-mh-v5 #footer .mh5-footer-section[data-mh5-footer-type="new"] .p-postList__thumb img { position: absolute !important; inset: 0 !important; } #body_wrap.codex-mh-v5 #footer .mh5-footer-section[data-mh5-footer-type="new"] .p-postList__body, #body_wrap.codex-mh-v5 #footer .mh5-footer-section[data-mh5-footer-type="popular"] .codex-swell-popular-body { align-self: start !important; display: block !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } #body_wrap.codex-mh-v5 #footer .mh5-footer-section[data-mh5-footer-type="new"] .p-postList__title, #body_wrap.codex-mh-v5 #footer .mh5-footer-section[data-mh5-footer-type="popular"] .codex-swell-popular-title { display: block !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; color: var(--mh5-ink) !important; font-size: 1rem !important; font-weight: 740 !important; line-break: strict; line-height: 1.55 !important; overflow-wrap: normal; text-overflow: clip !important; text-wrap: wrap; white-space: normal !important; word-break: normal; word-break: auto-phrase; -webkit-box-orient: initial !important; -webkit-line-clamp: initial !important; } #body_wrap.codex-mh-v5 #footer .mh5-footer-section .codex-swell-popular-tablist { margin: 0 0 .75rem !important; } #body_wrap.codex-mh-v5 #footer .mh5-footer-section .codex-swell-popular-rank { position: absolute !important; top: -.75rem; left: -.5rem; z-index: 2; display: grid !important; place-items: center !important; width: 1.6875rem; height: 1.6875rem; margin: 0 !important; border-radius: 999px; background: var(--mh5-rust) !important; box-shadow: 0 0 0 2px #fff, 0 2px 5px rgba(23, 50, 77, .24); color: #fff !important; font-size: .75rem; font-weight: 850; line-height: 1; } @media (min-width: 768px) { #body_wrap.codex-mh-v5 #footer .w-footer { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } #body_wrap.codex-mh-v5 #footer .w-footer__box:last-child { grid-column: 1 / -1; } } @media (max-width: 359px) { #body_wrap.codex-mh-v5 #footer .mh5-footer-section[data-mh5-footer-type="new"] .p-postList__link, #body_wrap.codex-mh-v5 #footer .mh5-footer-section[data-mh5-footer-type="popular"] .codex-swell-popular-link { grid-template-columns: 5.5rem minmax(0, 1fr) !important; min-height: 5.125rem !important; } #body_wrap.codex-mh-v5 #footer .mh5-footer-section[data-mh5-footer-type="new"] .p-postList__thumb, #body_wrap.codex-mh-v5 #footer .mh5-footer-section[data-mh5-footer-type="popular"] .codex-swell-popular-media { width: 5.5rem !important; } } /* claude-sitewide-review（top_first_view, 2026-10-11）：トップの節見出し（カテゴリから探す等）が記事用h2の左の緑線・灰色の下線を拾い、下の橙線と三重の装飾になっていた。 見出しの印を橙の短い線1本にし、説明を見出しの下に左揃え。PCは本文上の余白64→32pxで最初の画面にカテゴリ6枠まで入れる。上の小見出し（::before）を14pxに。 */ #body_wrap #main_content .post_content .mhz-head{display:block!important;margin:0 0 16px!important;padding:0!important;border:0!important} #body_wrap #main_content .post_content .mhz-head h2{margin:0!important;padding:0 0 10px!important;border:0!important;background:none!important;box-shadow:none!important;color:var(--mh5-navy,#172536)!important;font-size:26px!important;line-height:1.35!important;letter-spacing:-.02em} #body_wrap #main_content .post_content .mhz-head h2::before{content:none!important} #body_wrap #main_content .post_content .mhz-head h2::after{content:""!important;display:block!important;position:static!important;width:40px!important;height:4px!important;margin:10px 0 0!important;border-radius:999px!important;background:#c65324!important} #body_wrap #main_content .post_content .mhz-head>p{display:block!important;margin:2px 0 0!important;text-align:left!important} .home .mhz-intro::before{font-size:14px!important;letter-spacing:.04em} @media (min-width:960px){.home #content.l-content{padding-top:32px!important}} @media (max-width:959px){.home .mhz-intro>div:first-of-type{padding-top:1.6rem!important}} @media (max-width:599px){#body_wrap #main_content .post_content .mhz-head h2{font-size:22px!important}} .mhz-cats a b{color:#b8461b!important}.mhz-item small{color:#596b7c!important} @media(max-width:767px){ html.pmx-mono-footer-category-grid #body_wrap:is(.home,.archive) #footer .widget_categories .mh5-footer-disclosure > ul{ display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important; grid-template-rows:none!important;grid-auto-flow:row!important;grid-auto-columns:auto!important; gap:8px!important;overflow:visible!important;padding:12px!important;list-style:none } html.pmx-mono-footer-category-grid #body_wrap:is(.home,.archive) #footer .widget_categories .mh5-footer-disclosure > ul > li{ min-width:0;margin:0!important;padding:0!important;border:0!important } html.pmx-mono-footer-category-grid #body_wrap:is(.home,.archive) #footer .widget_categories .mh5-footer-disclosure > ul > li > a{ display:flex!important;align-items:center;box-sizing:border-box;width:100%;height:100%;min-height:44px; padding:8px 10px!important;border:1px solid #8096aa!important;border-radius:8px!important; color:#fff!important;background:#ffffff08;line-height:1.5!important;font-size:14px!important; overflow-wrap:anywhere;text-decoration:none } html.pmx-mono-footer-category-grid #body_wrap:is(.home,.archive) #footer .widget_categories .mh5-footer-disclosure > ul > li > a::before, html.pmx-mono-footer-category-grid #body_wrap:is(.home,.archive) #footer .widget_categories .mh5-footer-disclosure > ul > li > a::after{display:none!important} html.pmx-mono-footer-category-grid #body_wrap:is(.home,.archive) #footer .widget_categories a:hover{background:#ffffff18} html.pmx-mono-footer-category-grid #body_wrap:is(.home,.archive) #footer .widget_categories a:focus-visible{outline:3px solid #ffd28b;outline-offset:2px} }