/* Theme Name: SWELL CHILD (婚活レポ) Template: swell Version: 2026.09.12 Description: 婚活レポ 用の子テーマ。配色・スマホ向け調整（本部 designs/konkatsu.css）＋追従バー・カード（サイト側 designs/child_theme）。 */ /* 婚活レポ — 配色: 競合（相談所公式）はピンク・赤が多い。あえて外して「冷静な比較サイト」の立ち位置を色で示す スマホファーストの土台は designs/_base_mobile.css と同じ内容をこの下に含む（子テーマ1枚で完結させるため） */ :root { --color_main: #2d5a4a; --color_text: #2b2b2b; --color_link: #2d5a4a; --color_htag: #2d5a4a; --color_bg: #fdfaf7; --color_gradient1: #2d5a4a; --color_gradient2: #4a7d69; --color_deep01: #e8927c; /* ボタン・強調 */ --color_deep02: #c9a227; /* 見出しの下線 */ --color_deep03: #c9a227; /* 結論ボックス */ --color_deep04: #8a8a8a; --color_pale01: #fdeee9; --color_pale02: #fdf6e3; --color_pale03: #eaf3ee; --color_pale04: #f0f0f0; --color_light01: #f3bfae; --color_light02: #e8d493; --color_light03: #a8ccb8; --color_light04: #cfcfcf; } body { background: var(--color_bg); font-family: "Hiragino Mincho ProN", "Noto Serif JP", serif; } .l-footer { background: var(--color_main); color: #fff; } .l-footer a { color: #fff; } .c-widget__title { border-left: 6px solid var(--color_deep01); } /* 3サイト共通のスマホファースト土台。各サイトの CSS の先頭で読み込む前提で、 色は CSS 変数（--color_main 等）を各サイト側で上書きする。 根拠: 競合実測（data/scout/*/mobile_deep.json）と docs/サイト運用仕様_3サイト_2026-09-10.md */ /* --- 本文の読みやすさ（1行22文字・iPhone標準幅を基準） --- */ .post_content { font-size: 16px; line-height: 1.9; letter-spacing: .01em; } .post_content p { margin-bottom: 1.1em; } /* --- 見出し: スマホで「章の切れ目」がひと目で分かる太さにする --- */ .post_content h2 { font-size: 1.28em; line-height: 1.5; padding: .7em .8em; border-left: 6px solid var(--color_deep01); background: #fff; border-radius: 4px; margin-top: 2.4em; color: var(--color_htag) !important; } .post_content h3 { font-size: 1.1em; line-height: 1.55; padding-bottom: .35em; border-bottom: 2px solid var(--color_deep02); margin-top: 2em; color: var(--color_htag) !important; } /* SWELL 標準の見出し装飾（塗りつぶし・白文字）を無効化 */ .post_content h2::before, .post_content h2::after { display: none !important; } /* --- ボタン: 画面幅いっぱい・指で押しやすい高さ --- */ .swell-block-button__link, .is-style-btn_normal .swell-block-button__link, .is-style-btn_shiny .swell-block-button__link { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; padding: 1em 1.2em; background: var(--color_deep01) !important; color: #fff !important; border-radius: 8px; font-weight: 700; font-size: 1.02em; } .swell-block-button { margin: 1.6em 0 .6em; } /* ボタンの下の注意書き（料金は変わる等） */ .cta-note { font-size: .8em; color: #777; margin-top: -.2em; margin-bottom: 1.8em; line-height: 1.7; } /* --- 表: スマホではみ出さないよう横スクロールの箱に入れる --- */ .post_content .wp-block-table, .post_content figure.wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; } .post_content table { font-size: .92em; } /* 段落の最後の数文字（「す。」など）だけが次の行に落ちないようにする（2026-10-03） */ .post_content p { text-wrap: pretty; } .post_content table th { background: var(--color_main); color: #fff; } .post_content table td, .post_content table th { padding: .6em .7em; } /* --- 目次: スマホでは記事の地図。開いた状態で見せる --- */ .p-toc { font-size: .94em; } .p-toc__title { font-weight: 700; } /* --- 画像: 角丸で本文となじませる。図解は文字が読めるよう幅いっぱい --- */ .post_content img { border-radius: 6px; } .post_content figure { margin: 1.6em 0; } /* --- 記事のポイント・結論のボックス --- */ .point-box, .lesson-box { border-radius: 8px; padding: 1.1em 1.2em; margin: 1.6em 0; line-height: 1.85; } .point-box { background: var(--color_pale02); border: 1px solid var(--color_light02); } .lesson-box { background: var(--color_pale03); border-left: 5px solid var(--color_deep03); } /* --- ファーストビュー: 大きなヒーローを置かず、記事本文をすぐ見せる --- */ .p-mainVisual { display: none; } .l-header { border-bottom: 3px solid var(--color_main); } /* --- スマホ幅での微調整 --- */ @media (max-width: 599px) { .post_content { font-size: 16px; } .post_content h2 { font-size: 1.2em; margin-top: 2em; } .post_content h3 { font-size: 1.05em; } .l-content { padding-left: 0; padding-right: 0; } } /* ===== サイト側の追加（designs/child_theme/style.css）===== */ :root { --kr-green: #2d5a4a; --kr-green-mid: #3f7561; --kr-coral: #e8927c; --kr-coral-light: #f0a893; --kr-cream: #FDFAF7; --kr-text: #26241F; --kr-muted: #63605A; --kr-line: rgba(45, 90, 74, .22); --kr-fill: rgba(45, 90, 74, .06); --kr-agebar-h: 58px; } /* ========================================================= * (a) スマホだけの追従バー「年代で選ぶ：20代｜30代｜40代〜」 * - functions.php の kr_age_bar が出力する