@charset "UTF-8"; /*! Theme Name: Cocoon Child Description: Cocoon専用の子テーマ Theme URI: https://wp-cocoon.com/ Author: わいひら Author URI: https://nelog.jp/ Template: cocoon-master Version: 1.1.3 */ /* ============================================================================ LifeReviews デザインシステム v4（2026-07-29） ---------------------------------------------------------------------------- オーナー指示: https://high-class.heteml.net/（SWELLテーマ）の見た目に寄せる。採用した要素: ・H2 は濃紺のベタ塗り帯（白文字）／H3 は2色のアンダーライン・記事一覧は2カラムのカードグリッド（サムネイル大）・比較表はヘッダー行が濃紺・1列目がベージュ地・上に見出しピル・FAQ は Q/A のバッジ・CTAボタンはオレンジ（構造色と行動色を分ける）・シェアボタンは各SNSのブランド色色は「構造＝濃紺 1色」「行動＝オレンジ 1色」の2本立て。マーカーの黄色を足しても3色までに抑える。 Cocoon本体のCSSはにインライン展開され、このファイルはその「後」に外部ファイルとして読み込まれる。よって同一詳細度なら本ファイルが勝つ。 Cocoon設定由来のCSSが強い箇所（見出し・目次）だけ !important を使う。 ============================================================================ */ :root { /* --- 構造色（濃紺） --- */ --lr-navy: #14395c; --lr-navy-d: #0d2942; --lr-navy-l: #2f5d85; --lr-tint: #eef3f8; /* 濃紺の極薄 */ /* --- 行動色（オレンジ・CTAのみ） --- */ --lr-cta: #ee7b33; --lr-cta-d: #d9641c; /* --- 文字・罫線・地色 --- */ --lr-ink: #1f2833; --lr-ink-2: #55606b; --lr-ink-3: #8a939c; --lr-line: #e2e6ea; --lr-line-2: #eef1f4; --lr-bg: #ffffff; --lr-bg-soft: #f6f7f9; --lr-warm: #faf7f2; /* 表の見出し列など */ /* --- 形 --- */ --lr-r: 6px; --lr-r-sm: 4px; --lr-shadow: 0 1px 3px rgba(31,40,51,.06); } /* ============================================================================ 1. ベース / タイポグラフィ ========================================================================= */ body { color: var(--lr-ink); background: #f2f4f6; font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, Meiryo, sans-serif; -webkit-font-smoothing: antialiased; } /* 約物の詰め（palt）は見出しだけ。本文に効かせると句読点が詰まって読みづらい。 */ .entry-title, .article h2, .article h3, .article h4, .lr-hero-title, .entry-card-title, .related-entry-card-title, .logo-header .site-name-text, .logo-text .site-name-text { font-feature-settings: "palt"; } .article .entry-content, .article .entry-content p, .entry-content li, .entry-content dd { font-size: 16.5px; /* ★2026-07-31 オーナー指示「文字が詰まりすぎ／文字エリアが多すぎて離脱ポイントになる」行間 1.9 → 2.1、段落間 1.5em → 2.6em（およそ2行分の空き）。第一印象の"圧"を下げるのが目的なので、ここは詰め直さないこと。 */ line-height: 2.1; color: var(--lr-ink); letter-spacing: .015em; } .entry-content p { margin: 0 0 2.6em; } /* 箱の中まで2.6emにすると間延びするので、箱内は従来どおり */ .lr-source-body p, .lr-close-body p, .lr-conclusion p, .lr-balloon-body p, .lr-caution p, .lr-offer p, .lr-faq-a p { margin-bottom: 1.5em; } .lr-source-body p:last-child, .lr-close-body p:last-child, .lr-conclusion p:last-child, .lr-balloon-body p:last-child, .lr-caution p:last-child, .lr-faq-a p:last-child { margin-bottom: 0; } .entry-content a { color: var(--lr-navy-l); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; text-decoration-color: rgba(47,93,133,.4); } .entry-content a:hover { text-decoration-color: var(--lr-navy); color: var(--lr-navy); } .entry-content strong, .entry-content b { font-weight: 700; color: var(--lr-ink); } /* --- 関連記事カード（.lr-related-box） ----------------------------------- オーナー指示（2026-08-01）「今まで書いた記事が無駄にならない様に全て関連できる構成で」。見出しは「関連記事」ではなく読者の次の疑問にする。クリック率が変わる。ハブ（マネーページ）を常に先頭に置き、どの記事から入っても合流させる。 */ .lr-related-box { margin: 2.6em 0; border: 1px solid var(--lr-line); border-radius: var(--lr-r); background: var(--lr-bg-soft); overflow: hidden; } .entry-content .lr-related-head { margin: 0; padding: .8em 1.1em; background: var(--lr-tint); color: var(--lr-navy-d); font-size: .9rem; font-weight: 700; } .lr-related-list { margin: 0; padding: 0; list-style: none; } .entry-content .lr-related-list > li.lr-related-item { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--lr-line-2); } .entry-content .lr-related-list > li.lr-related-item::before { content: none; } .lr-related-item:first-child { border-top: none; } .entry-content .lr-related-item > a { display: block; padding: .95em 1.1em; text-decoration: none !important; color: inherit; transition: background .15s; } .entry-content .lr-related-item > a:hover { background: #fff; } .lr-related-t { display: block; font-size: .95rem; font-weight: 700; line-height: 1.65; color: var(--lr-navy); text-decoration: underline; text-underline-offset: .18em; } .lr-related-h { display: block; margin-top: .3em; font-size: .82rem; line-height: 1.7; color: var(--lr-ink-2); } /* マーカー（要所だけに使う） ★2026-07-31: でも使えるようにした。はブラウザ既定が黄色のベタ塗りで読みにくいので、必ず打ち消す。下半分だけに敷く下線マーカーにすると、可読性を落とさずに目が止まる。 */ .entry-content mark.lr-mark, .entry-content .lr-mark, mark.lr-mark, .lr-mark { background: linear-gradient(transparent 58%, #ffe9a8 58%); color: inherit; font-weight: 700; padding: 0 .06em; border-radius: 0; } .lr-mark-b { background: linear-gradient(transparent 62%, #cfe6f7 62%); font-weight: 600; } /* リスト */ .entry-content ul, .entry-content ol { margin: 0 0 1.6em; padding-left: 1.4em; } .entry-content ul { list-style: none; padding-left: 0; } .entry-content ul > li { position: relative; padding-left: 1.35em; margin: .5em 0; } .entry-content ul > li::before { content: ""; position: absolute; left: .35em; top: .82em; width: 6px; height: 6px; border-radius: 50%; background: var(--lr-navy); opacity: .5; } .entry-content ol > li { margin: .5em 0; padding-left: .2em; } .entry-content ol > li::marker { color: var(--lr-navy); font-weight: 700; } /* 引用 */ .entry-content blockquote { margin: 1.8em 0; padding: .2em 0 .2em 1.2em; border-left: 3px solid var(--lr-line); background: none; color: var(--lr-ink-2); font-style: normal; } /* 画像 */ .entry-content img, .entry-content figure img { max-width: 100%; height: auto; border-radius: var(--lr-r); display: block; } .entry-content figure { margin: 1.9em 0; } .entry-content figcaption, .entry-content .wp-caption-text { font-size: .82em; color: var(--lr-ink-3); text-align: center; margin-top: .7em; line-height: 1.7; } /* 素のテーブル（スペック表など） */ .entry-content > table, .entry-content .lr-scroll > table { width: 100%; border-collapse: collapse; font-size: .93em; margin: 1.8em 0; } .entry-content > table th, .entry-content > table td { border: 1px solid var(--lr-line); padding: .75em .85em; line-height: 1.75; } .entry-content > table th { background: var(--lr-warm); font-weight: 700; text-align: left; white-space: nowrap; } .lr-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.8em 0; } /* スクリーンリーダー専用テキスト */ .lr-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* --- アイコン（本文にはだけを置く） --- 絵は mask-image、色は currentColor。lr_icons.py --css で再生成できる。 */ /* --- アイコン（本文にはだけを置く） --- 絵は mask-image、色は currentColor。lr_icons.py --css で再生成できる。 */ .lr-ico { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; flex: 0 0 auto; } .lr-ico-home { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .lr-ico-clock { -webkit-mask-image: url("data:image/svg+xml,

"); mask-image: url("data:image/svg+xml,

"); } .lr-ico-eye-off { -webkit-mask-image: url("data:image/svg+xml,

"); mask-image: url("data:image/svg+xml,

"); } .lr-ico-train { -webkit-mask-image: url("data:image/svg+xml,

"); mask-image: url("data:image/svg+xml,

"); } .lr-ico-calendar { -webkit-mask-image: url("data:image/svg+xml,

"); mask-image: url("data:image/svg+xml,

"); } .lr-ico-user { -webkit-mask-image: url("data:image/svg+xml,

"); mask-image: url("data:image/svg+xml,

"); } .lr-ico-book { -webkit-mask-image: url("data:image/svg+xml,

"); mask-image: url("data:image/svg+xml,

"); } .lr-ico-wallet { -webkit-mask-image: url("data:image/svg+xml,

"); mask-image: url("data:image/svg+xml,

"); } .lr-ico-graduation { -webkit-mask-image: url("data:image/svg+xml,

"); mask-image: url("data:image/svg+xml,

"); } .lr-ico-shield { -webkit-mask-image: url("data:image/svg+xml,

"); mask-image: url("data:image/svg+xml,

"); } .lr-ico-check { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .lr-ico-chat { -webkit-mask-image: url("data:image/svg+xml,

"); mask-image: url("data:image/svg+xml,

"); } .lr-ico-yen { -webkit-mask-image: url("data:image/svg+xml,

"); mask-image: url("data:image/svg+xml,

"); } .lr-ico-info { -webkit-mask-image: url("data:image/svg+xml,

"); mask-image: url("data:image/svg+xml,

"); } :root { --lr-check-mask: url("data:image/svg+xml,"); --lr-user-mask: url("data:image/svg+xml,

"); } /* ============================================================================ 2. 全体レイアウト ========================================================================= */ #content.content { margin-top: 0; } .main { background: var(--lr-bg); border: 1px solid var(--lr-line); border-radius: var(--lr-r); box-shadow: none; padding: 24px 18px 32px; } /* 一覧ページはカードそのものが枠を持つので、外側の白箱は外す */ .home .main, .archive .main, .blog .main { background: none; border: none; padding: 0; } .sidebar { background: none; border: none; padding: 0; } /* ============================================================================ 3. ヘッダー / グローバルナビ ========================================================================= */ .header-container { background: var(--lr-bg); border-bottom: 1px solid var(--lr-line); } .header { padding: 12px 0 10px; } .header .tagline { font-size: .72rem; color: var(--lr-ink-3); letter-spacing: .06em; margin: 0 0 .3em; line-height: 1.5; } .logo-header .site-name-text, .logo-text .site-name-text { font-size: 1.24rem; font-weight: 700; letter-spacing: .01em; color: var(--lr-navy); line-height: 1.4; } .logo-header img, .logo-image img { max-height: 40px; width: auto; } #navi, .navi { background: var(--lr-bg); border-top: none; border-bottom: 1px solid var(--lr-line); } .navi-in > ul > li > a { font-size: .9rem; font-weight: 600; color: var(--lr-ink); letter-spacing: .02em; padding: 0 1.1em; height: 46px; line-height: 46px; position: relative; transition: color .16s; } .navi-in > ul > li > a::after { content: ""; position: absolute; left: 1.1em; right: 1.1em; bottom: 10px; height: 2px; background: var(--lr-navy); transform: scaleX(0); transform-origin: left; transition: transform .18s ease; } .navi-in > ul > li > a:hover { background: none; color: var(--lr-navy); } .navi-in > ul > li > a:hover::after { transform: scaleX(1); } .navi-in > ul > li.menu-item-has-children > a::before { display: none; } .navi-in > ul .sub-menu { border: 1px solid var(--lr-line); box-shadow: 0 6px 20px rgba(31,40,51,.1); border-radius: var(--lr-r-sm); overflow: hidden; } .navi-in > ul .sub-menu li a { font-size: .86rem; color: var(--lr-ink); background: var(--lr-bg); padding: .85em 1.1em; line-height: 1.5; height: auto; } .navi-in > ul .sub-menu li a:hover { background: var(--lr-tint); color: var(--lr-navy); } /* ============================================================================ 4. パンくず（本文の上・薄い帯） ========================================================================= */ .breadcrumb { font-size: .78rem; color: var(--lr-ink-3); padding: 0; margin: 0 0 1.3em; line-height: 1.7; word-break: break-all; } .breadcrumb a { color: var(--lr-ink-2); text-decoration: none; } .breadcrumb a:hover { color: var(--lr-navy); text-decoration: underline; } .breadcrumb .sp { margin: 0 .45em; color: var(--lr-line); } .breadcrumb.sbp-main-bottom, .breadcrumb.pbp-main-bottom { margin: 2.5em 0 0; } /* ============================================================================ 5. 記事ヘッダー ========================================================================= */ .article .entry-title, .entry-title { font-size: 1.52rem; line-height: 1.52; font-weight: 700; color: var(--lr-ink); letter-spacing: .005em; margin: 0 0 .7em; padding: 0; border: none; } .article .entry-header { margin-bottom: 1.1em; } .date-tags { font-size: .78rem; color: var(--lr-ink-3); text-align: left; margin: 0 0 1.3em; display: flex; flex-wrap: wrap; gap: .9em; } .date-tags .post-date, .date-tags .post-update { margin: 0; } .eye-catch { width: 100%; margin: 0 0 1.6em; border-radius: var(--lr-r); overflow: hidden; background: var(--lr-bg-soft); } .eye-catch img { width: 100%; height: auto; display: block; } .eye-catch .cat-label { font-size: .7rem; font-weight: 700; letter-spacing: .04em; background: rgba(20,57,92,.85); border: none; padding: .4em .8em; border-radius: 0 var(--lr-r-sm) var(--lr-r-sm) 0; top: 12px; left: 0; } /* 広告表記（ステマ規制対応・本文の先頭に自動挿入） */ .entry-content .lr-ad-notice { display: flex; align-items: center; gap: .5em; background: var(--lr-bg-soft); border: 1px solid var(--lr-line); border-radius: var(--lr-r-sm); padding: .75em 1em; margin: 0 0 2em; font-size: .8rem; line-height: 1.6; color: var(--lr-ink-2); } .lr-ad-notice .lr-ico { font-size: 15px; color: var(--lr-ink-3); } /* ============================================================================ 6. 本文の見出し（H2=濃紺のベタ塗り帯／H3=2色アンダーライン） ========================================================================= */ .article h2, .entry-content h2 { font-size: 1.24rem !important; line-height: 1.55; font-weight: 700; color: #fff !important; background: var(--lr-navy) !important; border: none !important; border-left: 5px solid var(--lr-navy-l) !important; border-radius: var(--lr-r-sm) !important; padding: .82em 1em !important; margin: 3em 0 1.4em !important; letter-spacing: .01em; } .article h2::before, .article h2::after { display: none !important; } .article h3, .entry-content h3 { font-size: 1.12rem !important; line-height: 1.6; font-weight: 700; color: var(--lr-ink) !important; background: none !important; border: none !important; border-bottom: 1px solid var(--lr-line) !important; border-radius: 0 !important; padding: 0 0 .55em !important; margin: 2.5em 0 1em !important; position: relative; } .article h3::after { content: "" !important; display: block !important; position: absolute; left: 0; bottom: -1px; width: 5em; max-width: 45%; height: 3px; background: var(--lr-navy); border-radius: 2px; } .article h3::before { display: none !important; } .article h4, .entry-content h4 { font-size: 1.02rem !important; line-height: 1.65; font-weight: 700; color: var(--lr-navy) !important; background: none !important; border: none !important; border-left: 3px solid var(--lr-navy) !important; padding: .05em 0 .05em .7em !important; margin: 2.1em 0 .9em !important; } .article h4::before, .article h4::after { display: none !important; } .article h5, .article h6 { font-size: .98rem !important; font-weight: 700; background: none !important; border: none !important; padding: 0 !important; margin: 1.8em 0 .7em !important; } .entry-content h2 + p, .entry-content h3 + p, .entry-content h4 + p { margin-top: 0; } /* ============================================================================ 7. 目次 ========================================================================= */ .entry-content .toc, .toc { width: 100% !important; max-width: none !important; display: block !important; background: var(--lr-bg-soft) !important; border: 1px solid var(--lr-line) !important; border-radius: var(--lr-r) !important; padding: 0 !important; margin: 0 0 2.4em !important; font-size: .93rem; overflow: hidden; } .toc-title { font-size: .95rem !important; font-weight: 700; text-align: left !important; color: #fff; background: var(--lr-navy); padding: .8em 1.1em !important; margin: 0 !important; border: none; display: block; } .toc-title::before { display: none; } .toc-checkbox + .toc-title { cursor: pointer; } .toc-content { padding: 18px 20px 16px; } .toc-list, .toc .toc-list { margin: 0; padding-left: 1.5em; list-style: decimal; } .toc-list > li { margin: .5em 0; line-height: 1.65; } .toc-list > li::marker { color: var(--lr-navy-l); font-weight: 700; font-size: .9em; } .toc-list a { color: var(--lr-ink); text-decoration: none; border-bottom: 1px solid transparent; /* ★2026-08-01 スマホ実測で修正: リンクの高さが19〜20pxしかなく指で押しにくかった。行間を広げずにタップ領域だけ稼ぐため、inline-block＋上下paddingにする。 */ display: inline-block; padding: .34em 0; } @media (max-width: 767px) { .toc-list a { padding: .58em 0; } .toc-list > li { margin: .28em 0; } .toc-list ul li, .toc-list ol li { margin: .1em 0; } } .toc-list a:hover { color: var(--lr-navy); border-bottom-color: var(--lr-navy); } .toc-list ul, .toc-list ol { margin: .3em 0 .5em; padding-left: .2em; list-style: none; } .toc-list ul li, .toc-list ol li { font-size: .94em; color: var(--lr-ink-2); position: relative; padding-left: 1em; margin: .28em 0; } .toc-list ul li::before, .toc-list ol li::before { content: ""; position: absolute; left: 0; top: .8em; width: 6px; height: 1px; background: var(--lr-ink-3); opacity: .7; } .toc-list ul li a, .toc-list ol li a { color: var(--lr-ink-2); } /* ============================================================================ 8. 記事内コンポーネント ========================================================================= */ /* --- 8-1. 比較表 ------------------------------------------------------- */ .lr-compare { margin: 2.4em 0; } .entry-content .lr-compare-caption, .lr-compare-caption { display: inline-block; background: var(--lr-warm); border: 1px solid #e6ded0; color: #7a6a52; font-size: .76rem; font-weight: 700; border-radius: 999px; padding: .35em 1.1em; margin: 0 auto .8em; } .lr-compare-inner { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--lr-line); border-radius: var(--lr-r); } .lr-compare table { width: 100%; min-width: 330px; border-collapse: collapse; table-layout: fixed; font-size: .88rem; margin: 0; background: var(--lr-bg); } .lr-compare th, .lr-compare td { border: none; border-bottom: 1px solid var(--lr-line-2); border-right: 1px solid var(--lr-line-2); padding: .8em .5em; text-align: center; vertical-align: middle; line-height: 1.5; } .lr-compare th:last-child, .lr-compare td:last-child { border-right: none; } .lr-compare thead th { background: var(--lr-navy); color: #fff; font-size: .82rem; font-weight: 700; border-bottom: none; border-right-color: rgba(255,255,255,.18); padding: .9em .4em; } .lr-compare thead th.is-hero { background: var(--lr-navy-d); } .lr-compare tbody th { width: 24%; text-align: left; font-size: .84rem; font-weight: 700; color: var(--lr-ink-2); padding-left: .95em; background: var(--lr-warm); } .lr-compare td.is-hero { background: var(--lr-tint); } .lr-compare tbody tr:last-child th, .lr-compare tbody tr:last-child td { border-bottom: none; } .lr-badge { display: inline-flex; align-items: center; justify-content: center; width: 1.75em; height: 1.75em; border-radius: 50%; font-size: .88rem; font-weight: 700; line-height: 1; color: #fff; } .lr-badge-best { background: #17835f; } .lr-badge-good { background: #3573b0; } .lr-badge-fair { background: #d0952d; } .lr-badge-poor { background: #b8503f; } .entry-content .lr-compare-note, .lr-compare-note { font-size: .76rem; color: var(--lr-ink-3); margin: .8em 0 0; line-height: 1.7; } /* --- 8-11. 結論ボックス（H2直後の「先に結論」） ---------------------------- */ .lr-conclusion { position: relative; margin: 2em 0; padding: 22px 20px 18px; border: 2px solid var(--lr-navy); border-radius: var(--lr-r); background: var(--lr-bg); } .lr-conclusion::before { content: "結論"; position: absolute; top: -.85em; left: 16px; background: var(--lr-navy); color: #fff; font-size: .74rem; font-weight: 700; letter-spacing: .1em; padding: .28em 1em; border-radius: 999px; } .entry-content .lr-conclusion > p { margin: 0 0 .8em; font-size: 1rem; line-height: 1.9; } .entry-content .lr-conclusion > p:last-child { margin-bottom: 0; } .entry-content .lr-conclusion > ul { margin: .4em 0 0; } /* --- 8-12. この記事でわかること -------------------------------------------- */ .lr-learn { margin: 2em 0; padding: 18px 20px 16px; background: var(--lr-bg-soft); border-radius: var(--lr-r); } .entry-content .lr-learn-title { font-size: .86rem; font-weight: 700; color: var(--lr-ink-2); letter-spacing: .04em; margin: 0 0 .7em; display: flex; align-items: center; gap: .45em; } .lr-learn-title .lr-ico { font-size: 16px; color: var(--lr-navy); } .entry-content .lr-learn ul { margin: 0; padding: 0; list-style: none; } .entry-content .lr-learn li { display: flex; gap: .65em; align-items: flex-start; padding: .6em 0; margin: 0; border-bottom: 1px dashed #d7dce2; font-size: .95rem; font-weight: 600; line-height: 1.75; } .entry-content .lr-learn li:last-child { border-bottom: none; } .entry-content .lr-learn li::before { content: ""; position: static; flex: 0 0 1.05em; width: 1.05em; height: 1.05em; margin-top: .38em; border-radius: 0; opacity: 1; background-color: #17835f; -webkit-mask: var(--lr-check-mask) no-repeat center / contain; mask: var(--lr-check-mask) no-repeat center / contain; } /* --- 8-13. ポイントボックス（番号つき） ------------------------------------ */ .lr-points { position: relative; margin: 2.1em 0; padding: 20px 20px 16px; border: 1px solid var(--lr-navy); border-radius: var(--lr-r); background: var(--lr-bg); list-style: none; counter-reset: lr-point; } .lr-points::before { content: attr(data-title); position: absolute; top: -.8em; left: 16px; background: var(--lr-bg); color: var(--lr-navy); font-size: .78rem; font-weight: 700; letter-spacing: .06em; padding: 0 .6em; } .entry-content .lr-points > li { counter-increment: lr-point; display: flex; gap: .7em; align-items: flex-start; padding: .58em 0; margin: 0; font-size: .95rem; line-height: 1.8; } .entry-content .lr-points > li::before { content: counter(lr-point); position: static; flex: 0 0 1.5em; width: 1.5em; height: 1.5em; margin-top: .28em; border-radius: 50%; opacity: 1; background: var(--lr-navy); color: #fff; font-size: .74rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } /* --- 8-14. 注意ボックス ---------------------------------------------------- */ .lr-caution { display: flex; gap: .85em; align-items: flex-start; margin: 2em 0; padding: 16px 18px; background: #fdf6ef; border-left: 4px solid var(--lr-cta); border-radius: 0 var(--lr-r-sm) var(--lr-r-sm) 0; } .lr-caution .lr-ico { font-size: 20px; color: var(--lr-cta-d); margin-top: .18em; } .entry-content .lr-caution p { margin: 0; font-size: .93rem; line-height: 1.85; color: #6b4a2e; } .entry-content .lr-caution p + p { margin-top: .6em; } /* --- 8-15. データ・出典ボックス（一次情報の引用） -------------------------- */ .lr-source { margin: 2em 0; border: 1px solid var(--lr-line); border-radius: var(--lr-r); overflow: hidden; background: var(--lr-bg); } .entry-content .lr-source-label { margin: 0; padding: .6em 1em; background: var(--lr-tint); color: var(--lr-navy); font-size: .78rem; font-weight: 700; letter-spacing: .04em; display: flex; align-items: center; gap: .45em; } .lr-source-body { padding: 16px 18px 14px; } .entry-content .lr-source-body > p { margin: 0 0 .7em; font-size: .95rem; line-height: 1.85; } .entry-content .lr-source-body > p:last-child { margin-bottom: 0; } .entry-content .lr-source-cite { margin: .9em 0 0 !important; padding-top: .7em; border-top: 1px dashed var(--lr-line); font-size: .78rem !important; color: var(--lr-ink-3); line-height: 1.7; } .lr-source-cite a { color: var(--lr-ink-2); } /* --- 8-16. クロージング（まとめ→ボタン） ---------------------------------- */ .lr-close { margin: 3em 0 0; border: 1px solid var(--lr-line); border-radius: var(--lr-r); overflow: hidden; background: var(--lr-bg); } .entry-content .lr-close-head { margin: 0; padding: .9em 1.1em; background: var(--lr-navy); /* 濃紺の帯に白文字。Cocoon側の p の色指定に負けて「濃紺に濃紺」で読めなくなった実績があるので、ここだけ !important で固定する。 */ color: #fff !important; font-size: 1rem; font-weight: 700; text-align: center; line-height: 1.6; } .lr-close-body { padding: 20px 18px 22px; } .entry-content .lr-close-body > p:last-of-type { margin-bottom: 0; } .entry-content .lr-close-note { margin: .9em 0 0 !important; font-size: .8rem !important; color: var(--lr-ink-3); text-align: center; line-height: 1.7; } /* --- 8-17. セクション見出し画像（H2直下の figure） ------------------------- */ .entry-content .lr-secimg { margin: 0 0 1.6em; } .lr-secimg img { width: 100%; height: auto; border-radius: var(--lr-r); } /* --- 8-2. チェックリストボックス ---------------------------------------- */ .lr-check { margin: 2em 0; padding: 1.1em 1.2em; background: var(--lr-bg-soft); border-radius: var(--lr-r); list-style: none; } .entry-content .lr-check > li { display: flex; gap: .7em; align-items: flex-start; padding: .7em 0; margin: 0; border-bottom: 1px dashed #d5dae0; font-weight: 600; line-height: 1.75; } .entry-content .lr-check > li:last-child { border-bottom: none; } .entry-content .lr-check > li::before { content: ""; position: static; flex: 0 0 1em; width: 1em; height: 1em; margin-top: .42em; border-radius: 0; opacity: 1; background-color: var(--lr-navy); -webkit-mask: var(--lr-check-mask) no-repeat center / contain; mask: var(--lr-check-mask) no-repeat center / contain; } /* --- 8-3. ベネフィット一覧 ---------------------------------------------- */ .lr-benefit { margin: 2.2em 0; border: 1px solid var(--lr-line); border-radius: var(--lr-r); overflow: hidden; } .entry-content .lr-benefit-head, .lr-benefit-head { background: var(--lr-navy); color: #fff !important; border-bottom: none; padding: .85em 1.1em; font-size: .93rem; font-weight: 700; margin: 0; line-height: 1.6; text-align: center; } .lr-benefit-list { margin: 0; padding: 0; list-style: none; } .lr-benefit-list li { display: flex; gap: .8em; align-items: flex-start; padding: .95em 1.1em; border-bottom: 1px dashed #dfe4e9; margin: 0; } .lr-benefit-list li:last-child { border-bottom: none; } .lr-benefit-list li::before { display: none; } .lr-benefit-ico { flex: 0 0 18px; font-size: 18px; line-height: 0; margin-top: .5em; color: #17835f; } .lr-benefit-txt { min-width: 0; } .lr-benefit-from { display: block; font-size: .84rem; color: var(--lr-ink-3); line-height: 1.6; } .lr-benefit-to { display: block; font-size: .95rem; font-weight: 700; color: var(--lr-ink); line-height: 1.65; margin-top: .12em; } /* --- 8-4. CTA ボックス --------------------------------------------------- */ .lr-cta { margin: 2.8em 0; border: 1px solid var(--lr-line); border-radius: var(--lr-r); overflow: hidden; background: var(--lr-bg); } .entry-content .lr-cta-hero, .lr-cta-hero { margin: 0; display: block; } .lr-cta-hero img { width: 100%; height: auto; display: block; border-radius: 0; } .lr-cta-body { padding: 20px 18px 22px; } .entry-content .lr-cta-head, .lr-cta-head { font-size: 1.02rem; font-weight: 700; color: var(--lr-navy); margin: 0 0 1.1em; line-height: 1.6; text-align: center; } .lr-merits { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0 0 1.6em; padding: 0; list-style: none; } .lr-merits li { display: flex; flex-direction: column; align-items: center; gap: .5em; text-align: center; background: var(--lr-tint); border: none; border-radius: var(--lr-r-sm); padding: 14px 8px; margin: 0; font-size: .81rem; font-weight: 600; color: var(--lr-navy-d); line-height: 1.55; } .lr-merits li::before { display: none; } .lr-merits .lr-merit-ico { font-size: 24px; line-height: 0; color: var(--lr-navy); } .lr-cta-criteria { border-top: 1px solid var(--lr-line); padding-top: 1.3em; } .lr-cta-criteria > p { font-size: .93rem; font-weight: 700; margin: 0 0 .7em; } .lr-cta-criteria ul { margin: 0; padding: 0; list-style: none; } .lr-cta-criteria li { position: relative; padding-left: 1.35em; margin: .5em 0; font-size: .93rem; line-height: 1.8; color: var(--lr-ink-2); } .lr-cta-criteria li::before { content: ""; position: absolute; left: .35em; top: .82em; width: 6px; height: 6px; border-radius: 50%; background: var(--lr-navy); opacity: .5; } /* オファーボタン（提携承認後に OFFER_SLOT へ差し込む） */ .entry-content .lr-btn-lead, .lr-btn-lead { text-align: center; font-size: .86rem; font-weight: 700; color: var(--lr-ink-2); margin: 1.6em 0 .5em; letter-spacing: .04em; } .lr-btn-lead::before { content: "＼"; margin-right: .4em; } .lr-btn-lead::after { content: "／"; margin-left: .4em; } .entry-content .lr-btn { display: block; width: 100%; max-width: 440px; margin: 0 auto; padding: 1.05em 1.2em; background: var(--lr-cta); color: #fff !important; border-radius: 999px; font-size: 1rem; font-weight: 700; text-align: center; text-decoration: none !important; line-height: 1.5; box-shadow: 0 3px 0 var(--lr-cta-d); transition: transform .12s, box-shadow .12s, background .16s; } .entry-content .lr-btn:hover { background: var(--lr-cta-d); box-shadow: 0 1px 0 var(--lr-cta-d); transform: translateY(2px); } /* --- 8-4b. オファーカード（.lr-offer） ----------------------------------- 記事の中で「これに申し込む」を明示する箱。これが無いと記事が解説で終わる。 ※

を含むので .entry-content を前置しないと Cocoon の段落指定に負ける。 */ .lr-offer { margin: 2.4em 0; border: 2px solid var(--lr-navy); border-radius: var(--lr-r); overflow: hidden; background: var(--lr-bg); } .entry-content .lr-offer-head { margin: 0; padding: .85em 1.1em; background: var(--lr-navy); color: #fff !important; font-size: 1.02rem; font-weight: 700; line-height: 1.55; text-align: center; } .entry-content .lr-offer-sub { margin: 0; padding: .5em 1.1em; background: var(--lr-tint); color: var(--lr-navy-d); font-size: .85rem; font-weight: 700; text-align: center; letter-spacing: .02em; } .lr-offer-body { padding: 18px 18px 22px; } .lr-offer-feat { margin: 0 0 1.1em; padding: 0; list-style: none; } .entry-content .lr-offer-feat li { position: relative; margin: 0 0 .55em; padding-left: 1.8em; font-size: .95rem; line-height: 1.75; list-style: none; } /* ★em指定だとCocoonの li::before（小さいfont-size）に引きずられて6pxまで潰れた。 px固定＋.entry-content前置で確実に効かせる（2026-08-01 実測で修正）。 */ .entry-content .lr-offer-feat li::before, .lr-offer-feat li::before { content: ""; position: absolute; left: 0; top: .45em; width: 17px; height: 17px; font-size: 17px; background: var(--lr-navy-l); -webkit-mask: var(--lr-check-mask) no-repeat center / contain; mask: var(--lr-check-mask) no-repeat center / contain; } .entry-content .lr-offer-price { margin: 0 0 .3em; padding: .7em .9em; background: var(--lr-warm); border-radius: var(--lr-r-sm); text-align: center; font-size: .95rem; line-height: 1.7; } .lr-offer-price strong { color: var(--lr-cta-d); font-size: 1.35em; font-weight: 700; } .entry-content .lr-offer-note { margin: .9em 0 0; font-size: .8rem; line-height: 1.7; color: var(--lr-ink-3); text-align: center; } .entry-content .lr-offer-area { margin: .6em 0 0; font-size: .82rem; line-height: 1.7; color: var(--lr-ink-2); text-align: center; } /* 対応市区町村リスト（畳んで置く・SEO用） */ .lr-area { margin: .9em 0 0; border-top: 1px solid var(--lr-line); padding-top: .8em; } .lr-area > summary { cursor: pointer; font-size: .84rem; font-weight: 700; color: var(--lr-navy-l); list-style: none; text-align: center; padding: .4em 0; } .lr-area > summary::-webkit-details-marker { display: none; } .lr-area > summary::after { content: " ▼"; font-size: .8em; } .lr-area[open] > summary::after { content: " ▲"; } .lr-area-body { padding: .4em .2em 0; } .entry-content .lr-area-pref { margin: .9em 0 .2em; font-size: .82rem; font-weight: 700; color: var(--lr-navy); } .entry-content .lr-area-cities { margin: 0; font-size: .74rem; line-height: 1.9; color: var(--lr-ink-2); } .entry-content .lr-area-note { margin: 1em 0 0; font-size: .74rem; color: var(--lr-ink-3); } @media (max-width: 480px) { .lr-offer-body { padding: 16px 14px 18px; } .entry-content .lr-offer-head { font-size: .96rem; } } /* --- 8-5. FAQ（Q/Aバッジ） ---------------------------------------------- */ .lr-faq { margin: 2.2em 0; } .lr-faq-item { border: 1px solid var(--lr-line); border-radius: var(--lr-r); margin: 0 0 12px; background: var(--lr-bg); overflow: hidden; } .article h3.lr-faq-q, .lr-faq-q { display: flex !important; align-items: flex-start; gap: .7em; font-size: 1rem !important; font-weight: 700; line-height: 1.7; margin: 0 !important; padding: .95em 1.1em !important; border: none !important; border-radius: 0 !important; background: var(--lr-bg-soft) !important; color: var(--lr-ink) !important; } .article h3.lr-faq-q::after { display: none !important; } .article h3.lr-faq-q::before { content: "Q" !important; display: inline-flex !important; position: static; flex: 0 0 auto; width: 1.55em; height: 1.55em; align-items: center; justify-content: center; border-radius: 50%; background: #c15a4a; color: #fff; font-size: .8rem; font-weight: 700; margin-top: .12em; } /* 回答は

や表など複数要素がそのまま入る。flexにすると横並びに崩れるので、左に余白を空けて A バッジだけを絶対配置する。 */ .lr-faq-a { position: relative; padding: 1.15em 1.1em 1.2em 3.3em; margin: 0; border-top: 1px solid var(--lr-line-2); } .lr-faq-a::before { content: "A"; position: absolute; left: 1.05em; top: 1.35em; width: 1.55em; height: 1.55em; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--lr-navy-l); color: #fff; font-size: .8rem; font-weight: 700; } .lr-faq-a > *:last-child { margin-bottom: 0; } /* --- 8-6. 吹き出し ------------------------------------------------------- */ .lr-balloon { display: flex; gap: 14px; align-items: flex-start; margin: 2em 0; } .lr-balloon-fig { flex: 0 0 52px; text-align: center; margin: 0; } /* 画像を持たない吹き出し（編集部のひとこと等）でも形が崩れないように、薄い丸地＋人物アイコンの既定アバターを出す。 */ .lr-balloon-fig:not(:has(img)) { position: relative; display: flex; flex-direction: column; align-items: center; } .lr-balloon-fig:not(:has(img))::before { content: ""; display: block; width: 52px; height: 52px; border-radius: 50%; background: var(--lr-tint); border: 1px solid var(--lr-line); } .lr-balloon-fig:not(:has(img))::after { content: ""; position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 26px; height: 26px; background-color: var(--lr-navy); -webkit-mask: var(--lr-user-mask) no-repeat center / contain; mask: var(--lr-user-mask) no-repeat center / contain; } .lr-balloon-fig img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 1px solid var(--lr-line); } .lr-balloon-name { display: block; font-size: .7rem; color: var(--lr-ink-3); margin-top: .35em; line-height: 1.4; } .lr-balloon-body { position: relative; flex: 1 1 auto; background: var(--lr-bg-soft); border: 1px solid var(--lr-line); border-radius: var(--lr-r); padding: 14px 16px; font-size: .93rem; line-height: 1.85; } .lr-balloon-body::before, .lr-balloon-body::after { content: ""; position: absolute; top: 18px; border-style: solid; } .lr-balloon-body::before { left: -9px; border-width: 8px 9px 8px 0; border-color: transparent var(--lr-line) transparent transparent; } .lr-balloon-body::after { left: -8px; border-width: 8px 9px 8px 0; border-color: transparent var(--lr-bg-soft) transparent transparent; } .lr-balloon-body > p:last-child { margin-bottom: 0; } .lr-balloon.is-right { flex-direction: row-reverse; } .lr-balloon.is-right .lr-balloon-body::before { left: auto; right: -9px; border-width: 8px 0 8px 9px; border-color: transparent transparent transparent var(--lr-line); } .lr-balloon.is-right .lr-balloon-body::after { left: auto; right: -8px; border-width: 8px 0 8px 9px; border-color: transparent transparent transparent var(--lr-bg-soft); } /* --- 8-7. ランキング ----------------------------------------------------- */ .lr-rank { margin: 2.2em 0; padding: 0; list-style: none; counter-reset: lr-rank; } .entry-content .lr-rank > li { counter-increment: lr-rank; position: relative; border: 1px solid var(--lr-line); border-radius: var(--lr-r); padding: 22px 18px 18px; margin: 0 0 16px; background: var(--lr-bg); } .entry-content .lr-rank > li::before { content: counter(lr-rank); position: absolute; top: -1px; left: -1px; min-width: 2.2em; height: 2.2em; padding: 0 .55em; background: var(--lr-navy); color: #fff; font-size: .82rem; font-weight: 700; border-radius: var(--lr-r) 0 var(--lr-r) 0; display: inline-flex; align-items: center; justify-content: center; opacity: 1; width: auto; } .entry-content .lr-rank > li:nth-child(1)::before { background: #b08d34; } .entry-content .lr-rank > li:nth-child(2)::before { background: #8d9298; } .entry-content .lr-rank > li:nth-child(3)::before { background: #a1723f; } .lr-rank-name { font-size: 1.05rem !important; font-weight: 700; margin: .3em 0 .7em !important; padding: 0 0 0 2.7em !important; border: none !important; background: none !important; line-height: 1.55; } .lr-rank-name::after { display: none !important; } /* --- 8-8. 補足・注意ボックス --------------------------------------------- */ .lr-note { margin: 2em 0; padding: 16px 18px; background: var(--lr-bg-soft); border-left: 4px solid var(--lr-navy); border-radius: 0 var(--lr-r-sm) var(--lr-r-sm) 0; font-size: .92rem; line-height: 1.85; color: var(--lr-ink-2); } .lr-note > p:last-child { margin-bottom: 0; } .entry-content .lr-note-title, .lr-note-title { display: block; font-weight: 700; color: var(--lr-navy); margin-bottom: .4em; font-size: .95rem; } /* --- 8-9. あわせて読みたい（ブログカード） -------------------------------- */ .lr-linkcard { position: relative; display: flex; gap: 14px; align-items: center; border: 1px solid var(--lr-line); border-radius: var(--lr-r); padding: 16px 16px; margin: 2.2em 0; background: var(--lr-bg); text-decoration: none !important; } .lr-linkcard::before { content: "あわせて読みたい"; position: absolute; top: -.72em; left: 14px; background: var(--lr-bg); padding: 0 .6em; font-size: .72rem; font-weight: 700; color: var(--lr-ink-3); letter-spacing: .04em; } .lr-linkcard:hover { border-color: var(--lr-navy-l); } .lr-linkcard-thumb { flex: 0 0 104px; width: 104px; margin: 0; } .lr-linkcard-thumb img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--lr-r-sm); } .lr-linkcard-title { font-size: .93rem; font-weight: 700; color: var(--lr-ink); line-height: 1.6; } /* --- 8-10. 記事内バナー -------------------------------------------------- */ .entry-content .lr-artbanner { margin: 0 0 1.8em; } .lr-artbanner img { width: 100%; height: auto; border-radius: var(--lr-r); } /* ============================================================================ 9. 記事末：シェア・著者・関連記事 ========================================================================= */ /* --- 9-1. SNSシェア（各社ブランド色） ------------------------------------ */ .lr-share { margin: 2.8em 0 0; } .entry-content .lr-share-label, .lr-share-label { text-align: center; font-size: .84rem; font-weight: 700; color: var(--lr-ink-2); letter-spacing: .04em; margin: 0 0 .9em; } .lr-share-label::before { content: "＼"; margin-right: .4em; } .lr-share-label::after { content: "／"; margin-left: .4em; } .lr-share-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; } .lr-share-list li { margin: 0; padding: 0; } .lr-share-list li::before { display: none; } .lr-share-list a { display: flex; align-items: center; justify-content: center; gap: .5em; padding: .8em 1em; border: none; border-radius: var(--lr-r-sm); font-size: .82rem; font-weight: 700; color: #fff !important; text-decoration: none !important; line-height: 1; opacity: .96; transition: opacity .16s; } .lr-share-list a:hover { opacity: 1; } .lr-share-list svg { width: 15px; height: 15px; } .lr-share-x a { background: #14171a; } .lr-share-fb a { background: #1877f2; } .lr-share-line a { background: #06c755; } .lr-share-hatena a { background: #00a4de; } /* --- 9-2. 著者プロフィール ------------------------------------------------ */ .lr-author { display: flex; gap: 16px; align-items: flex-start; margin: 2.6em 0 0; padding: 20px 18px; border: 1px solid var(--lr-line); border-radius: var(--lr-r); background: var(--lr-bg-soft); } .lr-author-ico { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%; background: var(--lr-tint); color: var(--lr-navy); display: flex; align-items: center; justify-content: center; } .lr-author-ico svg { width: 26px; height: 26px; } .lr-author-body { min-width: 0; flex: 1 1 auto; } .entry-content .lr-author-label, .lr-author-label { font-size: .7rem; letter-spacing: .1em; color: var(--lr-ink-3); font-weight: 700; margin: 0 0 .25em; } .entry-content .lr-author-name, .lr-author-name { font-size: 1rem; font-weight: 700; color: var(--lr-ink); margin: 0 0 .5em; line-height: 1.5; } .entry-content .lr-author-desc, .lr-author-desc { font-size: .87rem; line-height: 1.85; color: var(--lr-ink-2); margin: 0 0 .6em; } .lr-author-link { font-size: .84rem; color: var(--lr-navy-l); text-decoration: none; font-weight: 700; } .lr-author-link:hover { text-decoration: underline; } /* ============================================================================ 10. 記事一覧カード（TOP・アーカイブ・関連記事すべて2カラムのカード） ========================================================================= */ /* 一覧の見出し */ #main .lr-list-heading, .lr-list-heading, .index-tab-buttons, .list-title, .related-entry-heading, .recommend-entries-heading { font-size: 1.06rem !important; font-weight: 700; color: var(--lr-ink) !important; background: none !important; border: none !important; border-left: 5px solid var(--lr-navy) !important; border-radius: 0 !important; padding: .1em 0 .1em .65em !important; margin: 2.4em 0 1.1em !important; } .home .lr-list-heading, .home .list-title { margin-top: 0 !important; } /* グリッド */ #list.list, .related-list { display: grid; grid-template-columns: 1fr; gap: 16px; } .entry-card-wrap, .related-entry-card-wrap { display: block; background: var(--lr-bg); border: 1px solid var(--lr-line); border-radius: var(--lr-r); overflow: hidden; margin: 0; padding: 0; transition: border-color .16s, box-shadow .16s, transform .16s; } .entry-card-wrap:hover, .related-entry-card-wrap:hover { border-color: var(--lr-navy-l); box-shadow: var(--lr-shadow); transform: translateY(-2px); } .entry-card, .related-entry-card { display: flex; flex-direction: column; gap: 0; padding: 0; margin: 0; height: 100%; } .entry-card-thumb, .related-entry-card-thumb { width: 100%; flex: none; margin: 0; border-radius: 0; overflow: hidden; background: var(--lr-bg-soft); } .entry-card-thumb img, .related-entry-card-thumb img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-radius: 0; } .entry-card-thumb .cat-label, .related-entry-card-thumb .cat-label { font-size: .68rem; font-weight: 700; background: rgba(20,57,92,.85); border: none; padding: .32em .7em; border-radius: 0; top: 0; left: 0; } .entry-card-content, .related-entry-card-content { margin: 0; min-width: 0; flex: 1 1 auto; padding: 14px 15px 15px; display: flex; flex-direction: column; } .entry-card-title, .related-entry-card-title { font-size: .96rem; font-weight: 700; line-height: 1.6; color: var(--lr-ink); margin: 0 0 .5em; } /* Cocoonはスマホで抜粋を隠す設定があるが、カード型では説明が1行もないとタイトルだけの一覧になって選びづらいので表示する（3行でクランプ）。 */ .entry-card-snippet, .related-entry-card-snippet { display: -webkit-box !important; font-size: .81rem; line-height: 1.75; color: var(--lr-ink-3); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .entry-card-meta, .related-entry-card-meta, .entry-card-info, .e-card-info { position: static; margin-top: auto; padding-top: .8em; font-size: .73rem; color: var(--lr-ink-3); text-align: left; display: flex; gap: .8em; } .entry-card-meta .post-date, .e-card-info .post-date { margin: 0; } /* 前後記事ナビ（左右2分割） */ .pager-post-navi { display: grid; grid-template-columns: 1fr; gap: 8px; border-top: none; margin-top: 2.6em; padding-top: 0; } .pager-post-navi a, .pager-post-navi a.prev-post, .pager-post-navi a.next-post { display: flex; flex-direction: row; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; margin: 0; background: var(--lr-bg-soft); border-radius: var(--lr-r-sm); text-align: left; } .pager-post-navi a:hover { background: var(--lr-tint); } .pager-post-navi figure { flex: 0 0 64px; width: 64px; margin: 0; order: 0; } .pager-post-navi figure img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--lr-r-sm); display: block; } .pager-post-navi .prev-post-title, .pager-post-navi .next-post-title { text-align: left; font-size: .84rem; line-height: 1.6; color: var(--lr-ink-2); flex: 1 1 auto; order: 1; } .pager-post-navi .iconfont, .pager-post-navi .fa { order: 2; flex: 0 0 auto; color: var(--lr-ink-3); font-size: .9rem; } /* ページネーション */ .pagination { margin-top: 2em; } .pagination .page-numbers { border: 1px solid var(--lr-line); border-radius: var(--lr-r-sm); color: var(--lr-ink-2); background: var(--lr-bg); min-width: 40px; height: 40px; line-height: 38px; font-size: .9rem; font-weight: 600; } .pagination .page-numbers.current, .pagination a.page-numbers:hover { background: var(--lr-navy); border-color: var(--lr-navy); color: #fff; } /* ============================================================================ 11. サイドバー ========================================================================= */ #sidebar .widget h2, #sidebar .widget h3, #sidebar .wp-block-heading, #sidebar .widget-sidebar-title, .sidebar h2, .sidebar h3 { font-size: .9rem !important; font-weight: 700; color: var(--lr-ink) !important; background: none !important; border: none !important; border-left: 4px solid var(--lr-navy) !important; padding: .1em 0 .1em .6em !important; margin: 0 0 .9em !important; border-radius: 0 !important; } .sidebar .widget { background: var(--lr-bg); border: 1px solid var(--lr-line); border-radius: var(--lr-r); padding: 18px 16px 20px; margin-bottom: 16px; } .sidebar .widget ul { margin: 0; padding: 0; list-style: none; } .sidebar .widget li { border-bottom: 1px solid var(--lr-line-2); padding: 0; margin: 0; } .sidebar .widget li:last-child { border-bottom: none; } .sidebar .widget li a { display: block; padding: .8em 0; font-size: .85rem; line-height: 1.65; color: var(--lr-ink); text-decoration: none; } .sidebar .widget li a:hover { color: var(--lr-navy); } /* --- サイト説明（右カラムに置く長文） ------------------------------------- */ .lr-site-intro > div, .lr-site-intro .widget { background: none !important; border: none !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; } .sidebar .lr-site-intro p { font-size: .84rem; color: var(--lr-ink-2); line-height: 1.95; margin: 0 0 1.1em; } /* サイドバー説明文の見出し（ウィジェットタイトル相当） */ .sidebar .lr-site-intro .lr-intro-heading { font-size: .9rem !important; margin: 0 0 1em !important; } .sidebar .lr-site-intro h2 { font-size: .92rem !important; font-weight: 700; color: var(--lr-ink) !important; background: none !important; border: none !important; border-left: 4px solid var(--lr-navy) !important; border-radius: 0 !important; padding: .1em 0 .1em .6em !important; margin: 1.9em 0 .8em !important; } .sidebar .lr-site-intro ul { margin: 0 0 1.1em; padding-left: 0; list-style: none; } .sidebar .lr-site-intro li { position: relative; padding-left: 1.2em; margin: .4em 0; font-size: .82rem; color: var(--lr-ink-2); line-height: 1.85; border-bottom: none; } .sidebar .lr-site-intro li::before { content: ""; position: absolute; left: .25em; top: .8em; width: 5px; height: 5px; border-radius: 50%; background: var(--lr-navy); opacity: .5; } .sidebar .lr-site-intro strong { font-weight: 700; color: var(--lr-ink); } /* ============================================================================ 12. トップページ（ヒーロー / カテゴリ導線） ========================================================================= */ .lr-hero { background: var(--lr-bg); border: 1px solid var(--lr-line); border-radius: var(--lr-r); padding: 26px 20px 24px; margin: 0 0 16px; } .lr-hero-eyebrow { font-size: .72rem; letter-spacing: .14em; color: var(--lr-navy-l); font-weight: 700; margin: 0 0 .7em; } #main .lr-hero-title, .widget .lr-hero-title, .lr-hero-title { font-size: 1.5rem; line-height: 1.55; font-weight: 700; color: var(--lr-navy); margin: 0 0 .6em; padding: 0; border: none; background: none; } .lr-hero-lead { font-size: .92rem; line-height: 1.95; color: var(--lr-ink-2); margin: 0; max-width: 46em; } .lr-cats { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0 0 24px; } .lr-cat { display: flex; align-items: center; gap: 14px; text-decoration: none !important; background: var(--lr-bg); border: 1px solid var(--lr-line); border-radius: var(--lr-r); padding: 16px 16px; transition: border-color .16s, box-shadow .16s; } .lr-cat:hover { border-color: var(--lr-navy-l); box-shadow: var(--lr-shadow); } .lr-cat-ico { width: 24px; height: 24px; flex: 0 0 24px; color: var(--lr-navy); } .lr-cat-body { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; } .lr-cat-name { font-size: .96rem; font-weight: 700; color: var(--lr-ink); line-height: 1.45; } .lr-cat-desc { font-size: .78rem; color: var(--lr-ink-3); line-height: 1.6; margin-top: .25em; } .lr-cat-arrow { color: var(--lr-line); flex: 0 0 auto; transition: color .16s, transform .16s; } .lr-cat:hover .lr-cat-arrow { color: var(--lr-navy); transform: translateX(3px); } /* アーカイブのページ見出し（そのページの h1） */ .archive-title { font-size: 1.4rem !important; font-weight: 700; color: var(--lr-ink) !important; background: var(--lr-bg) !important; border: 1px solid var(--lr-line) !important; border-left: 5px solid var(--lr-navy) !important; border-radius: var(--lr-r) !important; padding: .7em .9em !important; margin: 0 0 1.3em !important; line-height: 1.5; display: flex; align-items: center; gap: .45em; } .archive-title .fa { color: var(--lr-navy); font-size: .85em; } /* ============================================================================ 13. フッター ========================================================================= */ .footer { background: var(--lr-navy-d); border-top: none; margin-top: 3em; padding: 34px 0 28px; color: rgba(255,255,255,.75); } .footer-bottom { padding: 0; } .footer .menu-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 1.6em; margin: 0 0 1.2em; padding: 0; list-style: none; } .footer .menu-footer li { border: none; margin: .3em 0; } .footer .menu-footer li a { font-size: .82rem; color: rgba(255,255,255,.8); text-decoration: none; } .footer .menu-footer li a:hover { color: #fff; text-decoration: underline; } .footer-bottom-content, .credit { padding: 0 16px; font-size: .78rem; color: rgba(255,255,255,.6); text-align: center; line-height: 1.9; } .footer-bottom-content a, .credit a { color: rgba(255,255,255,.8); } /* ============================================================================ 14. 非表示（既存方針の踏襲） ========================================================================= */ .entry-categories-tags { display: none !important; } .footer-bottom-logo { display: none !important; } .sns-follow { display: none !important; } .author-info { display: none !important; } .comment-area, #comment-area, .comment-btn-wrap { display: none !important; } .page-id-100 .entry-header { display: none !important; } /* ============================================================================ 15. レスポンシブ（モバイルファースト） ========================================================================= */ /* --- 600px以上：一覧を2カラムに --- */ @media screen and (min-width: 600px) { #list.list, .related-list { grid-template-columns: repeat(2, 1fr); gap: 18px; } .lr-merits { grid-template-columns: repeat(3, 1fr); } .lr-cats { grid-template-columns: repeat(2, 1fr); } .lr-share-list { grid-template-columns: repeat(4, 1fr); } .pager-post-navi { grid-template-columns: 1fr 1fr; } .main { padding: 28px 24px 36px; } .home .main, .archive .main, .blog .main { padding: 0; } } /* --- 835px以上（タブレット〜PC） --- */ @media screen and (min-width: 835px) { .article .entry-content, .article .entry-content p, .entry-content li, .entry-content dd { font-size: 17px; line-height: 1.95; } .article .entry-title, .entry-title { font-size: 1.85rem; line-height: 1.48; } .article h2, .entry-content h2 { font-size: 1.34rem !important; } .article h3, .entry-content h3 { font-size: 1.22rem !important; } .article h4, .entry-content h4 { font-size: 1.08rem !important; } .main { padding: 36px 40px 44px; } .home .main, .archive .main, .blog .main { padding: 0; } .lr-hero { padding: 32px 30px 30px; } #main .lr-hero-title, .widget .lr-hero-title, .lr-hero-title { font-size: 1.85rem; } .lr-hero-lead { font-size: .97rem; } .lr-cats { grid-template-columns: repeat(3, 1fr); } .lr-cat { padding: 14px 12px; gap: 10px; } .lr-cat-desc { font-size: .74rem; } .entry-card-title, .related-entry-card-title { font-size: 1rem; } .entry-card-snippet, .related-entry-card-snippet { font-size: .84rem; } .lr-compare table { font-size: .95rem; } .lr-cta-body { padding: 26px 28px 28px; } .toc-content { padding: 22px 26px 20px; } .archive-title { font-size: 1.6rem !important; } } /* --- 1024px以上 --- */ @media screen and (min-width: 1024px) { .main { padding: 40px 48px 48px; } .home .main, .archive .main, .blog .main { padding: 0; } } /* --- 834px以下：ヘッダーを低くしてファーストビューを本文に使う --- */ @media screen and (max-width: 834px) { .header .tagline { display: none; } .header { padding: 10px 0 8px; } .logo-header .site-name-text, .logo-text .site-name-text { font-size: 1.06rem; } .navi-in > ul { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; justify-content: flex-start; padding: 0 12px; } .navi-in > ul::-webkit-scrollbar { display: none; } .navi-in > ul > li { flex: 0 0 auto; } .navi-in > ul > li > a { height: 42px; line-height: 42px; padding: 0 .85em; font-size: .86rem; white-space: nowrap; } .navi-in > ul > li > a::after { bottom: 8px; left: .85em; right: .85em; } } /* --- 480px以下の微調整 --- */ @media screen and (max-width: 480px) { .main { padding: 20px 16px 28px; border-left: none; border-right: none; border-radius: 0; } .home .main, .archive .main, .blog .main { padding: 0; } .article .entry-title, .entry-title { font-size: 1.34rem; } .article h2, .entry-content h2 { font-size: 1.14rem !important; margin-top: 2.6em !important; padding: .75em .85em !important; } .article h3, .entry-content h3 { font-size: 1.06rem !important; } .toc-content { padding: 15px 15px 13px; font-size: .89rem; } .toc-list { padding-left: 1.25em; } .toc-list ul, .toc-list ol { padding-left: 0; } .toc-list ul li, .toc-list ol li { padding-left: .85em; } .lr-benefit-list li { padding: .85em .9em; } .lr-faq-a { padding: 1.1em .9em 1.15em 2.9em; } .lr-faq-a::before { left: .8em; top: 1.25em; } .lr-cta-body { padding: 16px 14px 18px; } .lr-author { flex-direction: column; gap: 12px; padding: 16px 15px; } .lr-hero { padding: 20px 16px 20px; border-radius: 0; border-left: none; border-right: none; } .archive-title { border-radius: 0; border-left-width: 5px; } }