.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; } .mh-bf{margin:0 0 24px;border:1px solid #d6dee8;border-radius:14px;background:#fff} .mh-bf__head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:10px 14px;border-radius:13px 13px 0 0;background:#0f2740;color:#fff;font-size:15.5px;font-weight:800} .mh-bf__head small{flex:none;font-size:11.5px;font-weight:600;color:#cbd5e1} .mh-bf__flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0!important;padding:14px 8px 6px!important;list-style:none!important} .mh-bf__flow li{position:relative;display:flex;flex-direction:column;align-items:center;margin:0!important;padding:0 2px!important;text-align:center;list-style:none!important} .mh-bf__flow li::before{display:none!important} .mh-bf__flow li:not(:last-child)::after{content:'';position:absolute;top:21px;left:calc(50% + 24px);right:calc(-50% + 24px);border-top:2px dashed #b6c3d1} .mh-bf__ic{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:#e8eef5;color:#0f2740} .mh-bf__flow li.is-now .mh-bf__ic{background:#f59e0b;color:#111;box-shadow:0 0 0 4px #fde7bd} .mh-bf__flow li.is-goal .mh-bf__ic{background:#0f9d58;color:#fff} .mh-bf__flow b{display:block;margin-top:6px;color:#0f2740;font-size:13.5px;font-weight:800;line-height:1.3} .mh-bf__flow b i{margin-right:2px;font-style:normal;color:#64748b} .mh-bf__flow small{display:block;color:#64748b;font-size:11.5px;line-height:1.35} .mh-bf__item{padding:10px 14px 12px;border-top:1px solid #e6ecf2} .mh-bf__item:first-of-type{border-top:0} .mh-bf__name{margin:0 0 7px!important;color:#0f2740;font-size:15px!important;font-weight:800;line-height:1.45} .mh-bf__btns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px} .mh-bf__btn{position:relative;display:flex!important;flex-direction:column;align-items:center;justify-content:center;min-height:52px;padding:6px 4px!important;border-radius:9px;color:#fff!important;text-decoration:none!important;line-height:1.25;text-align:center} .mh-bf__btn span{font-size:11.5px;font-weight:800} .mh-bf__btn b{font-size:clamp(12.5px,3.8vw,15px);font-weight:900;white-space:nowrap} .mh-bf__btn b.mh-bf__action{font-size:13.5px;white-space:normal} .mh-bf__btn small{display:block;margin-top:2px;font-size:11.5px;font-weight:700;line-height:1.3;overflow-wrap:anywhere} .mh-bf__btn.is-amazon{background:#f59e0b;color:#111!important} .mh-bf__btn.is-rakuten{background:#bf0000} .mh-bf__btn.is-yahoo{background:#d6003a} .mh-bf__btn:focus-visible{outline:3px solid #0f2740;outline-offset:2px} .mh-bf__more{display:block;padding:10px 14px;border-radius:0 0 13px 13px;background:#f1f5f9;color:#0f2740!important;font-size:13px;font-weight:700;text-align:center;text-decoration:none!important;border-top:1px solid #e6ecf2} .mh-bf__method{margin:0!important;padding:8px 14px 10px;border-top:1px solid #e6ecf2;color:#475569;font-size:12.5px!important;line-height:1.6} .mh-bf__method a{color:#1d4ed8!important;margin-left:4px;white-space:nowrap} .mh-bf-end{margin:32px 0 24px;padding:12px 14px 12px;border:2px solid #0f2740;border-radius:14px;background:#f8fafc} .mh-bf-end__head{margin:0 0 4px!important;color:#475569;font-size:13px!important;font-weight:700;line-height:1.5} .mh-bf-end__name{margin:0 0 8px!important;color:#0f2740;font-size:16px!important;font-weight:800;line-height:1.45} .mh-bf-end__back{display:block;margin-top:10px;color:#1d4ed8!important;font-size:13px;font-weight:700;text-align:center} @media (max-width:767px){.mh-bf__flow{padding:10px 4px 4px!important}.mh-bf__ic{width:34px;height:34px}.mh-bf__ic svg{width:18px;height:18px}.mh-bf__flow li:not(:last-child)::after{top:17px;left:calc(50% + 20px);right:calc(-50% + 20px)}.mh-bf__flow b{margin-top:4px;font-size:12.5px}.mh-bf__flow li:not(.is-now) small{display:none}.mh-bf__flow li.is-now small{color:#b45309;font-weight:800}.mh-bf__head{padding:8px 12px}.mh-bf__item{padding:8px 12px 10px}.mh-bf__name{margin-bottom:5px!important}} @media (min-width:768px){.mh-bf__btns{max-width:540px}.mh-bf__flow{padding:16px 40px 8px!important}.mh-bf__flow li.is-now small{color:#b45309;font-weight:800}} :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; } } /* Keep the shared campaign list once at article top before the comparison body. */ .l-mainContent__inner { display: flex; flex-direction: column; } .l-mainContent__inner > .p-articleHead { order: 1; } .l-mainContent__inner > .p-articleMetas { order: 2; } .l-mainContent__inner > .p-articleThumb { order: 3; } .l-mainContent__inner > .w-singleTop { order: 4 !important; } .l-mainContent__inner > .post_content { order: 5 !important; } .l-mainContent__inner > .w-singleBottom { order: 6; } .l-mainContent__inner > .p-articleFoot { order: 7; } .l-mainContent__inner > .l-articleBottom { order: 8; } /* Keep the first decision path compact; the theme's expand control restores every group. */ @media (max-width: 767px) { .p-toc.is-omitted > .p-toc__list > li:nth-of-type(n+5), .p-toc.is-omitted > .p-toc__list > li > .p-toc__childList { display: none !important; } } /* Keep long visible TOCs readable without hiding any decision link. */ @media (max-width: 767px) { .p-toc.-capbox:not(.is-omitted):has(> .p-toc__list > li > .p-toc__childList > li:nth-of-type(5)) { margin-top: 32px !important; margin-bottom: 32px !important; padding-bottom: 16px !important; } .p-toc.-capbox:not(.is-omitted):has(> .p-toc__list > li > .p-toc__childList > li:nth-of-type(5)) > .p-toc__list > li { margin-top: 4px !important; margin-bottom: 4px !important; font-size: 15px !important; line-height: 1.55 !important; } .p-toc.-capbox:not(.is-omitted):has(> .p-toc__list > li > .p-toc__childList > li:nth-of-type(5)) > .p-toc__list > li > .p-toc__link { font-size: 15px !important; line-height: 1.55 !important; } } @media (max-width: 959px) { html.pmx-ft-new .single .l-footer .w-footer__box:has(.widget_swell_new_posts) { display: none; } html.pmx-pop-5 #body_wrap.single #footer .w-footer__box .codex-swell-popular-panel .codex-swell-popular-item:nth-child(n+6) { display: none !important; } .single .l-footer .c-listMenu li { margin: 0; border: 0; } .single .l-footer .c-listMenu li a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border: 1px solid currentColor; border-radius: 999px; line-height: 1.4; } .single .l-footer .c-listMenu li a::before, .single .l-footer .c-listMenu li a::after { display: none; } .single .l-footer .c-listMenu .children, .single .l-footer .c-listMenu .sub-menu { display: none; } } @media (max-width: 959px) { .single .l-footer .c-listMenu ul { display: grid !important; grid-template-rows: repeat(3, auto); grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; gap: 8px; padding: 0 0 6px; } #body_wrap.single #footer [data-partsID="24143"] ul { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px !important; } #body_wrap.single #footer [data-partsID="24143"] li a > div > div + div, #body_wrap.single #footer [data-partsID="24143"] li a > span:last-child { display: none !important; } #body_wrap.single #footer [data-partsID="24143"] li a { height: 100%; padding: 8px !important; gap: 6px !important; } html.pmx-kouki-tag .single .l-footer .footer-kouki-tag { display: none; } } @media (max-width: 959px) { #body_wrap.single #footer [data-partsID="24143"] > div > div:first-child > div > div + div { display: none !important; } } @media (max-width: 959px) { .single #content.l-content { margin-bottom: 24px !important; padding-bottom: 24px !important; } .single #before_footer_widget { margin-top: 24px !important; margin-bottom: 20px !important; } .single .codex-preferred-source-widget { margin: 8px auto !important; } .single .codex-preferred-source-widget:has([google-add-preferred-source-btn] > *) > p:last-of-type { display: none !important; } html.pmx-ft-search .single .l-footer .widget_search { display: none; } } .mh-related-comparisons { margin: clamp(40px, 6vw, 68px) 0 10px; padding: clamp(18px, 3vw, 26px); border: 1px solid #d5e1eb; border-radius: 16px; background: linear-gradient(145deg, #f7fafc, #fff); box-shadow: 0 8px 24px rgba(15, 35, 55, .06); } .mh-related-comparisons__label { margin: 0 0 5px; color: #a83f17; font-size: .76rem; font-weight: 850; letter-spacing: .08em; } .mh-related-comparisons__title { margin: 0 0 15px !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: #17324d !important; font-size: clamp(19px, 2vw, 23px) !important; line-height: 1.45; } .mh-related-comparisons__title::before { display: none !important; } .mh-related-comparisons__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 !important; padding: 0 !important; list-style: none !important; } .mh-related-comparisons__item { margin: 0 !important; } .mh-related-comparisons__link { display: flex; min-height: 72px; height: 100%; box-sizing: border-box; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid #cfdae4; border-radius: 11px; background: #fff; color: #17324d !important; font-weight: 750; line-height: 1.55; text-decoration: none !important; } .mh-related-comparisons__link::after { content: '›'; flex: 0 0 auto; color: #d9561f; font-size: 1.35rem; } .mh-related-comparisons__link:hover { border-color: #e19b7d; box-shadow: 0 6px 16px rgba(15, 35, 55, .08); } .mh-related-comparisons__link:focus-visible { outline: 3px solid rgba(26, 101, 168, .34) !important; outline-offset: 3px; } @media (max-width: 600px) { .mh-related-comparisons { margin-top: 36px; padding: 15px; } .mh-related-comparisons__list { grid-template-columns: 1fr; } .mh-related-comparisons__link { min-height: 58px; padding: 11px 12px; } } @media (prefers-reduced-motion: reduce) { .mh-related-comparisons__link { scroll-behavior: auto; } } .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} .post_content h2 .ms-h-sep{display:none} .post_content h2 .ms-h-sub{display:block;margin-top:.25em;font-size:max(14px,.72em);font-weight:600;line-height:1.45;opacity:.82} .post_content h2 .ms-h-kicker{display:inline-block;margin:0 .5em .15em 0;padding:.1em .55em;border-radius:4px;background:var(--color_main,#2d6a3e);color:#fff;font-size:max(14px,.68em);line-height:1.5;vertical-align:.12em} .post_content .ms-faq{display:grid;gap:12px;margin:1em 0 2em} .post_content .ms-faq__item{border:1px solid rgba(0,0,0,.12);border-radius:8px;background:#fff;padding:14px 16px} #body_wrap #main_content .post_content .ms-faq .ms-faq__item h3.ms-faq__q.ms-faq__q.faq_q{position:relative;margin:0 0 8px!important;padding:0 0 0 2.1em!important;border:0!important;background:none!important;box-shadow:none!important;font-size:1em!important;line-height:1.6!important;color:inherit} #body_wrap #main_content .post_content .ms-faq .ms-faq__item h3.ms-faq__q.ms-faq__q.faq_q::before,.post_content .ms-faq__a::before{position:absolute!important;left:0!important;top:.05em!important;bottom:auto!important;width:1.6em!important;height:1.6em!important;border-radius:50%!important;display:flex!important;align-items:center;justify-content:center;font-size:.85em!important;font-weight:700;line-height:1!important;content:"Q"!important;color:#fff!important;background:var(--color_main,#2d6a3e)!important;border:0!important;transform:none!important;box-shadow:none!important} #body_wrap #main_content .post_content .ms-faq .ms-faq__item h3.ms-faq__q.ms-faq__q.faq_q::after{display:none!important;content:none!important} .post_content .ms-faq__a{position:relative;padding-left:2.1em} .post_content .ms-faq .ms-faq__a::before{content:"A"!important;color:var(--color_main,#2d6a3e)!important;background:#fff!important;border:1.5px solid var(--color_main,#2d6a3e)!important} .post_content .ms-faq__a>*:last-child{margin-bottom:0} /* 提携リンクのボタンをリンク先サービスのイメージカラーにする。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} }