/** * Layout bridge: kokorocare mirrored pages (about / evidence). * * Alignment (actual cause of “ずれ”): * - Site header uses polish.css `.dm-header__inner`: max-width `var(--dm-container)` (1180px) * + horizontal padding 24px (16px on small screens). * - Breadcrumb used GENSEN `.inner` at 1200px — wider than the header bar. * - `#main_col` was capped at 1200px without the same padding model. * - Bootstrap `.container` adds horizontal padding — double-indent vs header. * * Fix: same width token + same horizontal padding as `.dm-header__inner`, breadcrumb * inner overridden, and container gutters zeroed inside `.dm-kokorocare-root`. */ body.page-id-107 #breadcrumb ul.inner, body.page-id-108 #breadcrumb ul.inner { max-width: var(--dm-container, 1180px) !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; padding-left: 24px !important; padding-right: 24px !important; } @media (max-width: 767px) { body.page-id-107 #breadcrumb ul.inner, body.page-id-108 #breadcrumb ul.inner { padding-left: 16px !important; padding-right: 16px !important; } } html:has(body.page-id-107.dm-site-header), html:has(body.page-id-108.dm-site-header), body.page-id-107.dm-site-header, body.page-id-108.dm-site-header, body.page-id-107.dm-site-header #page, body.page-id-108.dm-site-header #page { background: #ffffff !important; } #main_col.dm-about-main { display: block !important; width: 100%; max-width: var(--dm-container, 1180px); margin-left: auto !important; margin-right: auto !important; margin-top: 50px; margin-bottom: 150px; padding-left: 24px; padding-right: 24px; box-sizing: border-box; } @media (max-width: 767px) { #main_col.dm-about-main { padding-left: 16px; padding-right: 16px; } } #main_col.dm-about-main #left_col { width: 100% !important; max-width: 100% !important; float: none !important; box-sizing: border-box; } #main_col.dm-about-main + #side_col, #main_col.dm-about-main #side_col { display: none !important; } #main_col.dm-about-main #article { width: 100%; max-width: none; box-sizing: border-box; } #main_col.dm-about-main #post_title { display: none; } .dm-kokorocare-root { overflow-x: visible; } /* * Bootstrap grid-only CSS has no utilities; partials still use `.text-center` * (kokorocare originally relied on full Bootstrap). Without this, CTA rows * (e.g. parts-0204) stay left-aligned. */ .dm-kokorocare-root .text-center { text-align: center !important; } /* 安全性試験カード（黄帯）: キャプションをカード幅いっぱいで中央寄せ */ .dm-kokorocare-root .dm-safety-test-cards > div { display: flex; flex-direction: column; align-items: stretch; } .dm-kokorocare-root .dm-safety-test-cards > div > p:last-child { width: 100%; box-sizing: border-box; text-align: center !important; padding-left: 12px; padding-right: 12px; } /* Bootstrap grid: remove extra horizontal inset (header already defines side padding). */ .dm-kokorocare-root .container { --bs-gutter-x: 0; padding-left: 0 !important; padding-right: 0 !important; } .dm-kokorocare-root .container-980, .dm-kokorocare-root .container-fluid--, .dm-kokorocare-root .block-pc-980 { margin-left: auto !important; margin-right: auto !important; } /* * Evidence TOC: kokorocare `gap` + Bootstrap `.row` gutters skew the grid. */ .dm-kokorocare-root .parts-0114 .row { --bs-gutter-x: 0; --bs-gutter-y: 0; margin-left: 0 !important; margin-right: 0 !important; justify-content: center; } .dm-kokorocare-root .parts-0114 .row > [class*='col-'] { padding-left: 0 !important; padding-right: 0 !important; } .dm-kokorocare-root img { max-width: 100%; height: auto; } .dm-kokorocare-root .btn, .dm-kokorocare-root .btn-silver, .dm-kokorocare-root .btn-white, .dm-kokorocare-root .btn-yellow { display: inline-block; text-align: center; vertical-align: middle; text-decoration: none; white-space: nowrap; cursor: pointer; } .dm-kokorocare-root .btn-silver, .dm-kokorocare-root .btn-white { font-size: 16px; line-height: 4em; padding: 0 5em; } @media (max-width: 767px) { .dm-kokorocare-root .btn-silver, .dm-kokorocare-root .btn-white { width: 100%; max-width: 320px; padding-left: 0; padding-right: 0; } } /* DEOFACTORのエビデンスCTA（黄帯ボックス内）：地味なシルバーボタンを * サイトの赤アクセントに揃えたピル型ボタンへリデザイン。 * 元の .btn-silver の line-height: 4em / padding 5em 等を確実に上書きするため * inline-flex で組み直し、必要なプロパティに !important を付与。 */ .dm-kokorocare-root .parts-0204 .btn-silver { position: relative; display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; min-height: 0 !important; height: auto !important; padding: 14px 28px !important; margin: 0 auto; background: linear-gradient(180deg, #e3343b 0%, #b71d24 100%) !important; color: #fff !important; font-size: 15px !important; font-weight: 800; line-height: 1.4 !important; letter-spacing: .04em; border-radius: 999px; border: 0; box-shadow: 0 14px 26px -12px rgba(183, 29, 36, .6), 0 2px 4px rgba(15, 23, 42, .08); transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; overflow: hidden; } .dm-kokorocare-root .parts-0204 .btn-silver::before { content: ""; position: absolute; left: -40%; top: 0; width: 40%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-20deg); transition: left .55s ease; pointer-events: none; } .dm-kokorocare-root .parts-0204 .btn-silver::after { content: ""; flex-shrink: 0; width: 16px; height: 16px; background: url("data:image/svg+xml;utf8,") center / contain no-repeat; transition: transform .2s ease; } .dm-kokorocare-root .parts-0204 .btn-silver:hover, .dm-kokorocare-root .parts-0204 .btn-silver:focus-visible { transform: translateY(-2px); filter: brightness(1.04); box-shadow: 0 18px 32px -14px rgba(183, 29, 36, .68), 0 2px 4px rgba(15, 23, 42, .08); } .dm-kokorocare-root .parts-0204 .btn-silver:hover::before { left: 130%; } .dm-kokorocare-root .parts-0204 .btn-silver:hover::after { transform: translateX(3px); } .dm-kokorocare-root .parts-0204 .btn-silver:active { transform: translateY(0); } .dm-kokorocare-root .parts-0204 .btn-silver:focus-visible { outline: 3px solid rgba(212, 36, 43, .35); outline-offset: 3px; } @media (max-width: 767px) { .dm-kokorocare-root .parts-0204 .btn-silver { max-width: 320px !important; width: 100% !important; padding: 14px 24px !important; } } body.page-id-107, body.page-id-108 { scroll-behavior: smooth; } .dm-kokorocare-root [id] { scroll-margin-top: 80px; }