/* ============================================================ Kurarebo Design Runtime 0.5.0-r5 — runtime.css ------------------------------------------------------------ 所有者: kurarebo-design-runtime（registered consumer 専用） 対象 : home-main(159) / saas-catalog-listing(220) / saas-support-service(1232) — フルデザイン blog-index(183) — theme adapter のみ（本文内デザインは本文所有のまま） blog-article(post_type=post) — 記事本文のH2/H3 componentのみ 出典 : R5整理前 WordPress Additional CSS（旧完成版）を移植。 構造ブレークポイントは KRB-DEC-065 に合わせ 820/821px に統一。 カタログは design-ownership-contract（PC 2列×3行・6件／SP 1列）。 注意 : SaaS公開ページ(R6.3)には配信しない。SaaS名・ページID分岐なし。 ============================================================ */ /* ---------- 1. SWELL theme adapter（見出し飾り・表罫線の打消し。!important はテーマ既定を打ち消すための例外） ---------- */ .krb-design-runtime .kb-page h1,.krb-design-runtime .kb-page h2,.krb-design-runtime .kb-page h3,.krb-design-runtime .kb-page h4, .krb-design-runtime .kb-page .post_content h1,.krb-design-runtime .kb-page .post_content h2,.krb-design-runtime .kb-page .post_content h3,.krb-design-runtime .kb-page .post_content h4{ background:none !important;border:0 !important;padding:0 !important;margin:0 !important; text-align:left !important;counter-increment:none !important;color:var(--ink) !important; } .krb-design-runtime .kb-page .top-hero h1,.krb-design-runtime .kb-page .top-hero h2,.krb-design-runtime .kb-page .kb-help h2,.krb-design-runtime .kb-page .kb-help h3{color:#fff !important} .krb-design-runtime .kb-page h1::before,.krb-design-runtime .kb-page h1::after,.krb-design-runtime .kb-page h2::before,.krb-design-runtime .kb-page h2::after, .krb-design-runtime .kb-page h3::before,.krb-design-runtime .kb-page h3::after,.krb-design-runtime .kb-page h4::before,.krb-design-runtime .kb-page h4::after{content:none !important;display:none !important} .krb-design-runtime .kb-page table{border-collapse:collapse !important;margin:0 !important} .krb-design-runtime .kb-page .ls-table tr{background:none} .krb-design-runtime .kb-page .ls-table th,.krb-design-runtime .kb-page .ls-table td{border-left:0 !important;border-right:0 !important} .krb-design-runtime .kb-page .ls-table td:first-child{border-left:0 !important} .krb-design-runtime .kb-page .kb-list,.krb-design-runtime .kb-page .kb-list li{list-style:none !important;background:none !important;padding-left:0;margin-left:0} .krb-design-runtime .kb-page .kb-list li::marker{content:none} .krb-design-runtime .kb-page p{margin-top:0} .krb-design-runtime .kb-page .kb-faq summary::-webkit-details-marker{display:none} /* ---------- 1b. SWELL theme adapter R4（登録 consumer 全部：159/220/1232/183） 旧完成版 Additional CSS「① ヘッダーとページの間の余白を詰める」「タイトルを隠す」の移植。 ・SWELL が自動で出す固定ページタイトル(.c-pageTitle) は、本文の独自見出しと二重になるため 視覚的にだけ隠す（読み上げ・検索エンジンには残す）。フロント(159)にはもともと出ない。 ・外枠(.l-content / .l-mainContent__inner / .post_content) の上余白を 0 にし、 本文側の余白（.kb-page の padding-top 等）だけを残す。 ・キーは body_class の .krb-theme-adapter（プラグインが登録 consumer にだけ付与）。 ページID・SaaS名では分岐しない。!important 不使用。フロントは SWELL が `.top #content{padding-top:4em}` （ID付き）で余白を付けるため、`#content.l-content` を併記して specificity で上回る。 ・blog-index(183) は .krb-design-runtime が付かないため、この 1b だけが効く。 ---------- */ .krb-theme-adapter .c-pageTitle{ position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap; } .krb-theme-adapter #content.l-content, .krb-theme-adapter .l-content, .krb-theme-adapter .l-mainContent__inner, .krb-theme-adapter .post_content, .krb-theme-adapter .l-mainContent__inner > .post_content{padding-top:0;margin-top:0} /* ---------- 1c. Blog article heading component ---------- 全公開投稿を post_type で一括登録し、SWELL の旧見出し装飾だけを置換する。 記事H1、目次、PR、表、リスト、CTA、画像、リンク、記事下部は本文・テーマ所有のまま。 #body_wrap は SWELL が body_class を出力する実DOM。body も他テーマ互換として許容する。 !important は SWELL既定と既存Additional CSS内の旧ID allowlistを同じ最終値へ収束させる theme-adapter境界に限る。新しい投稿ID・slug・サービス名分岐は持たない。 ---------- */ :is(body,#body_wrap).krb-consumer--blog-article{ --krb-article-navy:#14213d; --krb-article-blue:#1675e0; --krb-article-orange:#f28c28; --krb-article-line:#dfe7f0; --krb-article-pale:#f6faff; } :is(body,#body_wrap).krb-consumer--blog-article .post_content h2:where(:not(.faq_q):not(.p-postList__title):not(.c-secTitle)){ position:relative;margin:70px 0 26px;padding:0 0 18px !important; border:0 !important;border-bottom:1px solid var(--krb-article-line) !important; background:none !important;box-shadow:none !important;color:var(--krb-article-navy) !important; font-size:clamp(25px,2.4vw,32px);line-height:1.45;text-align:left; } :is(body,#body_wrap).krb-consumer--blog-article .post_content h2:where(:not(.faq_q):not(.p-postList__title):not(.c-secTitle))::before{ content:"ARTICLE GUIDE" !important;position:static !important;inset:auto !important; display:block !important;width:max-content !important;height:auto !important; margin:0 0 10px !important;padding:0 !important;border:0 !important; background:none !important;box-sizing:border-box !important;color:var(--krb-article-orange) !important; font-size:12px !important;font-weight:700;letter-spacing:.18em;line-height:1.35 !important; white-space:nowrap;pointer-events:none; } :is(body,#body_wrap).krb-consumer--blog-article .post_content h2:where(:not(.faq_q):not(.p-postList__title):not(.c-secTitle))::after{ content:none !important;display:none !important; } :is(body,#body_wrap).krb-consumer--blog-article .post_content > h2:first-of-type:has(+ ul){ margin-top:36px;padding:26px 30px 12px !important; border:1px solid #dbe7f3 !important;border-bottom:0 !important; border-radius:16px 16px 0 0;background:var(--krb-article-pale) !important; } :is(body,#body_wrap).krb-consumer--blog-article .post_content > h2:first-of-type:has(+ ul)::before{ content:"SUMMARY" !important; } :is(body,#body_wrap).krb-consumer--blog-article .post_content > h2:first-of-type:has(+ ul) + ul{ margin-top:-26px;padding:8px 34px 26px 58px; border:1px solid #dbe7f3;border-top:0;border-radius:0 0 16px 16px; background:var(--krb-article-pale); } :is(body,#body_wrap).krb-consumer--blog-article .post_content h3:where(:not(.faq_q):not(.p-postList__title):not(.c-secTitle)){ position:relative;margin:42px 0 18px;padding:10px 0 10px 18px !important; border:0 !important;border-left:4px solid var(--krb-article-blue) !important; background:none !important;box-shadow:none !important;color:var(--krb-article-navy) !important; font-size:22px;line-height:1.5;text-align:left; } :is(body,#body_wrap).krb-consumer--blog-article .post_content h3:where(:not(.faq_q):not(.p-postList__title):not(.c-secTitle))::before, :is(body,#body_wrap).krb-consumer--blog-article .post_content h3:where(:not(.faq_q):not(.p-postList__title):not(.c-secTitle))::after{ content:none !important;display:none !important; } @media (max-width:767px){ :is(body,#body_wrap).krb-consumer--blog-article .post_content h2:where(:not(.faq_q):not(.p-postList__title):not(.c-secTitle)){margin-top:52px;font-size:24px} :is(body,#body_wrap).krb-consumer--blog-article .post_content h2:where(:not(.faq_q):not(.p-postList__title):not(.c-secTitle))::before{margin-bottom:8px !important;font-size:11px !important;letter-spacing:.14em} :is(body,#body_wrap).krb-consumer--blog-article .post_content > h2:first-of-type:has(+ ul){padding:22px 20px 10px !important} :is(body,#body_wrap).krb-consumer--blog-article .post_content > h2:first-of-type:has(+ ul) + ul{padding:6px 22px 22px 44px} :is(body,#body_wrap).krb-consumer--blog-article .post_content h3:where(:not(.faq_q):not(.p-postList__title):not(.c-secTitle)){margin-top:32px;font-size:20px} } /* ---------- 2. 骨格（.kb-page 共通） ---------- */ .krb-design-runtime .kb-page *{box-sizing:border-box} .krb-design-runtime .kb-page{ --navy:#1F3864; --navy-d:#16294a; --navy-dd:#0e1c33; --orange:#E07A31; --orange-l:#fff3e8; --ink:#1c2331; --sub:#5a6270; --line:#e6eaef; --hair:rgba(28,35,49,.09); --bg:#f6f7f9; --w:1160px; --sh1:0 1px 2px rgba(28,35,49,.06); --sh2:0 14px 34px rgba(28,35,49,.10); --sh2h:0 20px 46px rgba(28,35,49,.14); /* 旧CSSで未定義のまま参照されていた別名（kb-box / kb-name） */ --or:var(--orange); --tx:var(--ink); margin:0;padding-top:22px;background:#fff;color:var(--ink); font-family:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Sans",sans-serif; font-size:15.5px;line-height:1.8;letter-spacing:.01em; -webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;text-size-adjust:100%; } .krb-design-runtime .kb-page img{max-width:100%;height:auto;display:block;border:0;box-shadow:none;border-radius:0} .krb-design-runtime .kb-page a{color:var(--navy);text-decoration:none} .krb-design-runtime .kb-page h1,.krb-design-runtime .kb-page h2,.krb-design-runtime .kb-page h3,.krb-design-runtime .kb-page p,.krb-design-runtime .kb-page li,.krb-design-runtime .kb-page dd,.krb-design-runtime .kb-page figcaption,.krb-design-runtime .kb-page td,.krb-design-runtime .kb-page th{word-break:auto-phrase;overflow-wrap:break-word;text-wrap:pretty;line-break:strict} .krb-design-runtime .kb-page .num,.krb-design-runtime .kb-page .kb-eyebrow{font-family:Inter,"Noto Sans JP",sans-serif;font-feature-settings:"tnum"} .krb-design-runtime .kb-page .kb-wrap{max-width:var(--w);margin:0 auto;padding:0 24px} .krb-design-runtime .kb-page .kb-sec{padding:33px 0;margin:44px 0 0} .krb-design-runtime .kb-page .kb-sec + .kb-sec{border-top:1px solid var(--hair)} .krb-design-runtime .kb-page .kb-eyebrow{display:block;font-size:11px;font-weight:600;letter-spacing:.18em;color:var(--orange);text-transform:uppercase;margin:0 0 8px} .krb-design-runtime .kb-page h1,.krb-design-runtime .kb-page h2,.krb-design-runtime .kb-page h3{letter-spacing:-.025em;line-height:1.45;margin:0} .krb-design-runtime .kb-page h2{font-size:24px;font-weight:700} .krb-design-runtime .kb-page :where(label,a,summary,button):focus-visible{outline:3px solid var(--orange);outline-offset:3px} /* 2段組（左見出し・右本文）— 唯一の構造ブレークポイント 820/821 */ @media (min-width:821px){ .krb-design-runtime .kb-page .kb-cols{display:grid;grid-template-columns:210px 1fr;gap:52px;align-items:start} .krb-design-runtime .kb-page .kb-colhead{padding-top:2px} .krb-design-runtime .kb-page .kb-colhead h2{font-size:22px;line-height:1.5} } @media (max-width:820px){ .krb-design-runtime .kb-page .kb-colhead{margin-bottom:14px} .krb-design-runtime .kb-page .kb-sec{padding:26px 0} .krb-design-runtime .kb-page h2{font-size:21px} } /* ---------- 3. ヒーロー（トップ旧hero / 提供サービスhero） ---------- */ .krb-design-runtime .kb-page .top-hero{background:linear-gradient(180deg,#16294a 0%,var(--navy) 60%,#24457a 100%);color:#fff;padding:64px 0 58px} .krb-design-runtime .kb-page .top-hero h1{font-size:34px;line-height:1.5;letter-spacing:-.03em;max-width:22em} .krb-design-runtime .kb-page .top-hero p{color:rgba(255,255,255,.82);font-size:15.5px;line-height:1.95;margin:18px 0 0;max-width:44em} .krb-design-runtime .kb-page .kb-hero{padding:26px 0 20px} @media (min-width:821px){ .krb-design-runtime .kb-page .kb-hero .kb-wrap{display:grid;grid-template-columns:360px 1fr;gap:56px;align-items:start} } .krb-design-runtime .kb-page .kb-tag{display:inline-block;font-size:12px;font-weight:500;color:var(--navy);background:#eef1f7;border-radius:999px;padding:5px 13px;margin:0 0 14px} .krb-design-runtime .kb-page .kb-name{margin:16px 0 0;font-size:34px;font-weight:700;letter-spacing:-.01em;line-height:1.25;color:var(--tx);font-family:"Inter","Noto Sans JP",sans-serif} .krb-design-runtime .kb-page .kb-name span{display:block;margin-top:6px;font-size:13px;font-weight:400;letter-spacing:.02em;color:var(--sub);line-height:1.6} .krb-design-runtime .kb-page .kb-maker{margin:6px 0 0;font-size:13px;color:var(--sub);letter-spacing:.01em} .krb-design-runtime .kb-page .kb-oneline{font-size:19px;line-height:1.75;margin:0;font-weight:500;letter-spacing:-.01em} .krb-design-runtime .kb-page .kb-intro{font-size:15px;line-height:1.9;color:var(--sub);margin:14px 0 0} @media (max-width:820px){ .krb-design-runtime .kb-page .top-hero{padding:38px 0 34px} .krb-design-runtime .kb-page .top-hero h1{font-size:24px} .krb-design-runtime .kb-page .kb-hero{padding-bottom:14px} .krb-design-runtime .kb-page .kb-name{font-size:27px;margin-top:12px} .krb-design-runtime .kb-page .kb-name span{font-size:12.5px} .krb-design-runtime .kb-page .kb-maker{margin-top:5px;font-size:12.5px} .krb-design-runtime .kb-page .kb-oneline{margin-top:16px} } /* ---------- 4. 箇条書き・ボタン・注記枠 ---------- */ .krb-design-runtime .kb-page .kb-list{list-style:none;padding:0;margin:0} .krb-design-runtime .kb-page .kb-list li{position:relative;padding:0 0 0 24px;margin:0 0 12px} .krb-design-runtime .kb-page .kb-list li:last-child{margin-bottom:0} .krb-design-runtime .kb-page .kb-list li::before{content:"";position:absolute;left:6px;top:.82em;width:6px;height:6px;border-radius:50%;background:var(--orange)} .krb-design-runtime .kb-page .kb-list b{display:block;font-weight:700;margin-bottom:1px} .krb-design-runtime .kb-page .kb-list span{color:var(--sub);font-size:14.5px;line-height:1.8} .krb-design-runtime .kb-page .kb-cta{margin:30px 0 0;text-align:center} .krb-design-runtime .kb-page .kb-btn{ display:inline-block;background:linear-gradient(180deg,#284878 0%,var(--navy) 55%,#1b3157 100%); color:#fff;text-decoration:none;font-size:16.5px;font-weight:700;letter-spacing:.06em; padding:17px 74px;border-radius:6px; box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 1px 2px rgba(14,28,51,.24),0 12px 28px rgba(31,56,100,.22); transition:transform .19s ease,box-shadow .19s ease,filter .19s ease; } .krb-design-runtime .kb-page .kb-btn:hover{transform:translateY(-3px);filter:brightness(1.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 1px 2px rgba(14,28,51,.24),0 20px 40px rgba(31,56,100,.28)} .krb-design-runtime .kb-page .kb-btn:active{transform:translateY(-1px)} .krb-design-runtime .kb-page .kb-cta .kb-btn{min-width:280px} .krb-design-runtime .kb-page .kb-box{background:#fbfcfd;border:1px solid var(--hair);border-top:2px solid var(--or);border-radius:10px;padding:11px 16px;margin:0 0 26px;font-size:12.5px;line-height:1.8;color:var(--sub);text-align:center} .krb-design-runtime .kb-page .kb-box strong{color:var(--tx);font-weight:700} .krb-design-runtime .kb-page .kb-box a{color:var(--navy);font-weight:700;text-decoration:underline} .krb-design-runtime .kb-page .kb-box.i{border:1px solid #f3d5b5;border-radius:10px;background:#fff8f0;color:#72502f} @media (max-width:820px){ .krb-design-runtime .kb-page .kb-cta{margin-top:22px} .krb-design-runtime .kb-page .kb-cta .kb-btn{min-width:0;width:100%;display:block;text-align:center;padding:17px 20px;letter-spacing:.04em} .krb-design-runtime .kb-page .kb-box{font-size:12px;padding:10px 13px;text-align:left} } /* ---------- 5. カタログ component（home-main / saas-catalog-listing 共有） ---------- */ /* 絞り込みチップ・表示切替 */ .krb-design-runtime .kb-page .ls-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px} .krb-design-runtime .kb-page .ls-tabs label{cursor:pointer;font-size:13px;padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);transition:all .19s ease;user-select:none} .krb-design-runtime .kb-page .ls-tabs label:hover{border-color:#b9c6dd} .krb-design-runtime .kb-page .ls-tabs label i{font-style:normal;font-family:Inter,sans-serif;font-size:11px;color:var(--sub);margin-left:6px} .krb-design-runtime .kb-page .ls-tabs label:hover i{color:inherit} .krb-design-runtime .kb-page .ls-view{display:flex;gap:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-left:auto} .krb-design-runtime .kb-page .ls-view label{cursor:pointer;font-size:12.5px;padding:7px 16px;background:#fff;color:var(--sub);border-right:1px solid var(--line);transition:all .19s ease;user-select:none} .krb-design-runtime .kb-page .ls-view label:last-child{border-right:0} .krb-design-runtime .kb-page input[name="cat"],.krb-design-runtime .kb-page input[name="view"],.krb-design-runtime .kb-page input[name="pg"],.krb-design-runtime .kb-page input[name="bpg"],.krb-design-runtime .kb-page input[name="form"]{position:absolute;opacity:0;pointer-events:none} .krb-design-runtime .kb-page #cat-all:checked ~ .ls-tabs label.all{background:var(--navy);color:#fff;border-color:var(--navy)} .krb-design-runtime .kb-page #cat-c0:checked ~ .ls-tabs label[for="cat-c0"], .krb-design-runtime .kb-page #cat-c1:checked ~ .ls-tabs label[for="cat-c1"], .krb-design-runtime .kb-page #cat-c2:checked ~ .ls-tabs label[for="cat-c2"], .krb-design-runtime .kb-page #cat-c3:checked ~ .ls-tabs label[for="cat-c3"], .krb-design-runtime .kb-page #cat-c4:checked ~ .ls-tabs label[for="cat-c4"], .krb-design-runtime .kb-page #cat-c5:checked ~ .ls-tabs label[for="cat-c5"], .krb-design-runtime .kb-page #cat-c6:checked ~ .ls-tabs label[for="cat-c6"], .krb-design-runtime .kb-page #cat-c7:checked ~ .ls-tabs label[for="cat-c7"], .krb-design-runtime .kb-page #cat-c8:checked ~ .ls-tabs label[for="cat-c8"], .krb-design-runtime .kb-page #cat-c9:checked ~ .ls-tabs label[for="cat-c9"]{background:var(--navy);color:#fff;border-color:var(--navy)} .krb-design-runtime .kb-page #view-card:checked ~ .ls-tabs .ls-view label[for="view-card"], .krb-design-runtime .kb-page #view-table:checked ~ .ls-tabs .ls-view label[for="view-table"]{background:var(--navy);color:#fff} /* カテゴリ絞り込み（CSSのみのフォールバック。JS有効時はJSが同じ条件で選別する） */ .krb-design-runtime .kb-page #cat-c0:checked ~ .ls-wrap .ls-card:not([data-cat="c0"]),.krb-design-runtime .kb-page #cat-c0:checked ~ .ls-wrap tr[data-cat]:not([data-cat="c0"]), .krb-design-runtime .kb-page #cat-c1:checked ~ .ls-wrap .ls-card:not([data-cat="c1"]),.krb-design-runtime .kb-page #cat-c1:checked ~ .ls-wrap tr[data-cat]:not([data-cat="c1"]), .krb-design-runtime .kb-page #cat-c2:checked ~ .ls-wrap .ls-card:not([data-cat="c2"]),.krb-design-runtime .kb-page #cat-c2:checked ~ .ls-wrap tr[data-cat]:not([data-cat="c2"]), .krb-design-runtime .kb-page #cat-c3:checked ~ .ls-wrap .ls-card:not([data-cat="c3"]),.krb-design-runtime .kb-page #cat-c3:checked ~ .ls-wrap tr[data-cat]:not([data-cat="c3"]), .krb-design-runtime .kb-page #cat-c4:checked ~ .ls-wrap .ls-card:not([data-cat="c4"]),.krb-design-runtime .kb-page #cat-c4:checked ~ .ls-wrap tr[data-cat]:not([data-cat="c4"]), .krb-design-runtime .kb-page #cat-c5:checked ~ .ls-wrap .ls-card:not([data-cat="c5"]),.krb-design-runtime .kb-page #cat-c5:checked ~ .ls-wrap tr[data-cat]:not([data-cat="c5"]), .krb-design-runtime .kb-page #cat-c6:checked ~ .ls-wrap .ls-card:not([data-cat="c6"]),.krb-design-runtime .kb-page #cat-c6:checked ~ .ls-wrap tr[data-cat]:not([data-cat="c6"]), .krb-design-runtime .kb-page #cat-c7:checked ~ .ls-wrap .ls-card:not([data-cat="c7"]),.krb-design-runtime .kb-page #cat-c7:checked ~ .ls-wrap tr[data-cat]:not([data-cat="c7"]), .krb-design-runtime .kb-page #cat-c8:checked ~ .ls-wrap .ls-card:not([data-cat="c8"]),.krb-design-runtime .kb-page #cat-c8:checked ~ .ls-wrap tr[data-cat]:not([data-cat="c8"]), .krb-design-runtime .kb-page #cat-c9:checked ~ .ls-wrap .ls-card:not([data-cat="c9"]),.krb-design-runtime .kb-page #cat-c9:checked ~ .ls-wrap tr[data-cat]:not([data-cat="c9"]){display:none} /* カード型：PC 2列 × 3行（6件）／SP 1列 */ .krb-design-runtime .kb-page .ls-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:stretch} .krb-design-runtime .kb-page .ls-card{display:flex;flex-direction:column;height:100%;min-width:0;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--hair);border-radius:12px;overflow:hidden;box-shadow:var(--sh1);transition:transform .19s ease,box-shadow .19s ease} .krb-design-runtime .kb-page .ls-card:hover{transform:translateY(-3px);box-shadow:var(--sh1),var(--sh2)} .krb-design-runtime .kb-page .ls-thumb{aspect-ratio:16/10;background:#eef1f7;overflow:hidden} .krb-design-runtime .kb-page .ls-thumb img{width:100%;height:100%;object-fit:cover;object-position:top center;border-radius:0} .krb-design-runtime .kb-page .ls-thumb.is-missing{display:flex;align-items:center;justify-content:center;color:#a8b2c2;font-size:12px} .krb-design-runtime .kb-page .ls-thumb.is-missing::after{content:attr(data-missing)} .krb-design-runtime .kb-page .ls-thumb.is-missing img{display:none} .krb-design-runtime .kb-page .ls-body{display:flex;flex:1;flex-direction:column;padding:14px 16px 16px} .krb-design-runtime .kb-page .ls-cat{display:block;font-size:11px;color:var(--orange);font-weight:600;letter-spacing:.06em} .krb-design-runtime .kb-page .ls-body b{display:block;font-size:16px;letter-spacing:-.02em;margin:5px 0 0} .krb-design-runtime .kb-page .ls-body b i{font-style:normal;font-size:11.5px;font-weight:400;color:var(--sub);margin-left:7px} .krb-design-runtime .kb-page .ls-body p{margin:6px 0 0;font-size:13px;color:var(--sub);line-height:1.75;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .krb-design-runtime .kb-page .ls-tags{display:flex;gap:6px;flex-wrap:wrap;margin:auto 0 0;padding-top:10px} .krb-design-runtime .kb-page .ls-tags span{font-size:11px;color:var(--navy);background:#eef1f7;border-radius:4px;padding:3px 8px;font-family:Inter,"Noto Sans JP",sans-serif} @media (min-width:821px){ .krb-design-runtime .kb-page .ls-card{height:490px} .krb-design-runtime .kb-page .ls-thumb{aspect-ratio:32/17} } @media (max-width:820px){ .krb-design-runtime .kb-page .ls-grid{grid-template-columns:1fr} .krb-design-runtime .kb-page .ls-view{margin-left:0;width:100%} .krb-design-runtime .kb-page .ls-view label{flex:1;text-align:center} } /* 表型 */ .krb-design-runtime .kb-page .ls-tablewrap{border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--sh1);background:#fff} .krb-design-runtime .kb-page .ls-table{width:100%;border-collapse:collapse;font-size:14px;background:#fff} .krb-design-runtime .kb-page .ls-table th{background:#f4f6fa;color:var(--navy);font-size:12.5px;font-weight:700;text-align:left;padding:12px 18px;border-bottom:1px solid var(--line);letter-spacing:.03em} .krb-design-runtime .kb-page .ls-table td{padding:12px 18px;border-bottom:1px solid var(--hair)} .krb-design-runtime .kb-page .ls-table tr:last-child td{border-bottom:0} .krb-design-runtime .kb-page .ls-table tbody tr:hover{background:#fbfcfd} .krb-design-runtime .kb-page .ls-table tbody tr:hover td[colspan]{background:#f4f6fa} .krb-design-runtime .kb-page .ls-table .nm b{display:block;font-size:14.5px;letter-spacing:-.02em} .krb-design-runtime .kb-page .ls-table .nm span{display:block;font-size:11.5px;color:var(--sub)} .krb-design-runtime .kb-page .ls-table .nm b a:hover{text-decoration:underline} .krb-design-runtime .kb-page .ls-table .act{text-align:right} .krb-design-runtime .kb-page .ls-go{font-size:12.5px;color:var(--navy);font-weight:700} @media (max-width:820px){ .krb-design-runtime .kb-page .ls-tablewrap{overflow-x:auto} .krb-design-runtime .kb-page .ls-table{min-width:560px} } /* 表示切替 */ .krb-design-runtime .kb-page #view-card:checked ~ .ls-wrap .ls-tablewrap{display:none} .krb-design-runtime .kb-page #view-table:checked ~ .ls-wrap .ls-grid{display:none} .krb-design-runtime .kb-page #view-table:checked ~ .ls-wrap .krb-pager{display:none} /* ページ送り（JS無効時のフォールバック＝本文の radio + .pg-page 構造） */ .krb-design-runtime .kb-page .pg-page{display:none} .krb-design-runtime .kb-page .pg-nav{display:none;align-items:center;justify-content:center;gap:8px;margin:22px 0 0} .krb-design-runtime .kb-page .pg-nav label,.krb-design-runtime .kb-page .krb-pager button{cursor:pointer;font-size:13px;padding:8px 18px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);transition:all .19s ease;user-select:none;font-family:inherit;line-height:1.4} .krb-design-runtime .kb-page .pg-nav label:hover,.krb-design-runtime .kb-page .krb-pager button:hover{border-color:#b9c6dd;background:#fbfcfd} .krb-design-runtime .kb-page .pg-nav .num,.krb-design-runtime .kb-page .krb-pager .num{min-width:38px;text-align:center;font-family:Inter,sans-serif;font-size:12.5px;padding:8px 0} .krb-design-runtime .kb-page .pg-nav .now,.krb-design-runtime .kb-page .krb-pager .now{color:var(--sub);font-size:12.5px;font-family:Inter,sans-serif;margin:0 6px} .krb-design-runtime .kb-page #pg1:checked ~ .ls-wrap .pg1,.krb-design-runtime .kb-page #pg2:checked ~ .ls-wrap .pg2,.krb-design-runtime .kb-page #pg3:checked ~ .ls-wrap .pg3,.krb-design-runtime .kb-page #pg4:checked ~ .ls-wrap .pg4,.krb-design-runtime .kb-page #pg5:checked ~ .ls-wrap .pg5,.krb-design-runtime .kb-page #pg6:checked ~ .ls-wrap .pg6{display:grid} .krb-design-runtime .kb-page #pg1:checked ~ .ls-wrap .pg1 + .pg-nav,.krb-design-runtime .kb-page #pg2:checked ~ .ls-wrap .pg2 + .pg-nav,.krb-design-runtime .kb-page #pg3:checked ~ .ls-wrap .pg3 + .pg-nav,.krb-design-runtime .kb-page #pg4:checked ~ .ls-wrap .pg4 + .pg-nav,.krb-design-runtime .kb-page #pg5:checked ~ .ls-wrap .pg5 + .pg-nav,.krb-design-runtime .kb-page #pg6:checked ~ .ls-wrap .pg6 + .pg-nav{display:flex} .krb-design-runtime .kb-page #pg1:checked ~ .ls-wrap .pg-nav label.num[for="pg1"],.krb-design-runtime .kb-page #pg2:checked ~ .ls-wrap .pg-nav label.num[for="pg2"],.krb-design-runtime .kb-page #pg3:checked ~ .ls-wrap .pg-nav label.num[for="pg3"],.krb-design-runtime .kb-page #pg4:checked ~ .ls-wrap .pg-nav label.num[for="pg4"],.krb-design-runtime .kb-page #pg5:checked ~ .ls-wrap .pg-nav label.num[for="pg5"],.krb-design-runtime .kb-page #pg6:checked ~ .ls-wrap .pg-nav label.num[for="pg6"]{background:var(--navy);color:#fff;border-color:var(--navy)} .krb-design-runtime .kb-page #view-table:checked ~ .ls-wrap .pg-nav{display:none} .krb-design-runtime .kb-page [id^="cat-c"]:checked ~ #view-card:checked ~ .ls-wrap .pg-page{display:grid} .krb-design-runtime .kb-page [id^="cat-c"]:checked ~ #view-card:checked ~ .ls-wrap .pg-nav{display:none} /* JS有効時（body.krb-catalog-js）：本文の旧ページ構造を隠し、共通pagerが6件ずつ表示する。 !important は本文内