@charset "utf-8"; /** * わたしのヒカリ記事ページ用ポップ装飾レイヤー * 対象: 投稿ページ(.post_content配下)のみ。functions.phpでis_singular('post')時にenqueue。 * * 方針(TOPと共通のテイスト): * - ロゴ準拠のティール(#3BC3B3)×ピンク(#EB5E96) + クリーム * - 丸ゴシック見出し・角丸・ずらしベタ影 * - レイアウト構造には触れず「色・角丸・影・線」の装飾に限定する * - SWELLブロックの内部構造やレイアウトプロパティは上書きしない * * 注意: * - キャップボックスは「親要素は透明で、タイトルバー/中身が枠線・背景を持つ」 * スタイルが多いため、親にoverflow:hiddenを掛けてはいけない(四隅が欠ける) * - テーブルはthead(列見出し)とtbody th(行見出し)で配色を分ける */ :root { --wh-teal: #3bc3b3; --wh-teal-dark: #27a99a; --wh-teal-pale: #e3f7f4; --wh-pink: #eb5e96; --wh-pink-dark: #d8437e; --wh-pink-pale: #fdecf3; --wh-cream: #fff9f1; --wh-ink: #40404a; --wh-line: #efe9e0; --wh-font-rounded: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "HG丸ｺﾞｼｯｸM-PRO", "Yu Gothic", sans-serif; } /* ============================================================ ページ背景 + 本文の白カード化背景に水玉と「＋」を散らす(TOPのfront-page.cssと同じSVGパターン。変更時は両方更新)。記事は本文が背景に直接乗る構造のため、可読性維持で本文エリアを白カードにする。 ============================================================ */ /* SWELLはbody_class()をではなく#body_wrapに出力するため、#body_wrapを起点にする */ #body_wrap.single-post, #body_wrap.page { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg fill='none'%3E%3Ccircle cx='32' cy='44' r='4' fill='%233bc3b3' opacity='.13'/%3E%3Ccircle cx='150' cy='96' r='3' fill='%23eb5e96' opacity='.12'/%3E%3Ccircle cx='224' cy='34' r='5' stroke='%233bc3b3' stroke-width='2' opacity='.11'/%3E%3Ccircle cx='76' cy='184' r='5' stroke='%23eb5e96' stroke-width='2' opacity='.1'/%3E%3Ccircle cx='204' cy='216' r='3.5' fill='%233bc3b3' opacity='.11'/%3E%3Cpath d='M122 26h11M127.5 20.5v11' stroke='%23eb5e96' stroke-width='2.5' stroke-linecap='round' opacity='.12'/%3E%3Cpath d='M26 124h13M32.5 117.5v13' stroke='%233bc3b3' stroke-width='2.5' stroke-linecap='round' opacity='.12'/%3E%3Cpath d='M182 150h11M187.5 144.5v11' stroke='%233bc3b3' stroke-width='2.5' stroke-linecap='round' opacity='.09' transform='rotate(20 187.5 150)'/%3E%3Ccircle cx='118' cy='236' r='2.5' fill='%23eb5e96' opacity='.1'/%3E%3C/g%3E%3C/svg%3E"); background-size: 260px 260px; } .single-post .l-mainContent.l-article, .page .l-mainContent.l-article { background: #fff; border-radius: 24px; box-shadow: 0 4px 24px rgba(64, 64, 74, .05); padding: clamp(20px, 3.5vw, 36px) clamp(16px, 4vw, 44px) clamp(32px, 5vw, 56px); } /* ============================================================ 見出し ============================================================ */ /* h2: ステッカー風カード(白地+ティール枠+ずらしベタ影+2連ドット) */ .post_content h2 { display: flex; align-items: center; font-family: var(--wh-font-rounded); font-weight: 800; color: var(--wh-ink); background: #fff; border: 2.5px solid var(--wh-teal); border-radius: 14px; box-shadow: 5px 5px 0 rgba(59, 195, 179, .22); padding: .65em .9em; } .post_content h2::after { content: none; } /* ティール+ピンクの2連ドット */ .post_content h2::before { content: ""; position: static; /* SWELLの見出し装飾(絶対配置)を打ち消す */ flex-shrink: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--wh-teal); box-shadow: 16px 0 0 var(--wh-pink); margin-right: calc(16px + .6em); } /* h3: 2トーンの太下線(ピンク→ティール) */ .post_content h3 { position: relative; font-family: var(--wh-font-rounded); font-weight: 800; color: var(--wh-ink); background: none; border: none; border-bottom: 4px solid var(--wh-teal-pale); border-radius: 0; padding: 0 .1em .5em; } .post_content h3::before { content: none; } .post_content h3::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 96px; height: 4px; border-radius: 3px; background: linear-gradient(90deg, var(--wh-pink) 0 60%, var(--wh-teal) 60% 100%); } /* h4: ピンクドット */ .post_content h4 { display: flex; align-items: baseline; gap: .5em; font-family: var(--wh-font-rounded); font-weight: 800; color: var(--wh-ink); background: none; border: none; padding: 0; } .post_content h4::after { content: none; } .post_content h4::before { content: ""; position: static; /* SWELLの見出し装飾(絶対配置)を打ち消す */ flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--wh-pink); transform: translateY(-1px); } /* ============================================================ リスト・リンク ============================================================ */ .post_content ul > li::marker { color: var(--wh-teal); } .post_content ol > li::marker { color: var(--wh-pink); font-weight: 800; } .post_content a:not([class]) { text-decoration-color: rgba(235, 94, 150, .45); text-decoration-thickness: 2px; text-underline-offset: 3px; } /* ============================================================ 目次（all-connect由来のグレー地をポップに置き換え） ============================================================ */ .post_content .p-toc, .p-toc { background: var(--wh-teal-pale) !important; border-radius: 16px !important; border: none !important; } .p-toc__ttl { font-family: var(--wh-font-rounded); font-weight: 800 !important; color: var(--wh-ink); } .p-toc .p-toc__list a { color: var(--wh-ink); } /* ============================================================ テーブル - thead(列見出し): ティール地×白文字 - tbody th(行見出し): 淡ティール地×濃文字 ※白文字化しないこと - SWELLの「1列目固定」テーブルは固定列の背景を!importantで強制し、 ::before(--tbody-th-color--bg)で色を塗る仕組みのため、セレクタで戦わずSWELLのCSS変数を上書きして対応する ============================================================ */ .post_content { --tbody-th-color--bg: var(--wh-teal-pale); --tbody-th-color--txt: var(--wh-ink); } .post_content table thead tr th { background: var(--wh-teal) !important; color: #fff !important; border-color: rgba(255, 255, 255, .25) !important; font-weight: 800; } .post_content table tbody tr th { background: var(--wh-teal-pale) !important; color: var(--wh-ink) !important; border-color: #d5eeea !important; font-weight: 800; } .post_content table td { border-color: #eef2f0 !important; } .post_content table tbody tr:nth-child(even) td { background: #f7fcfb !important; } .post_content table tbody tr:hover td { background: var(--wh-pink-pale) !important; } /* ============================================================ ボタン（色はSWELL設定を尊重し、形と影だけポップに） ============================================================ */ .post_content .swell-block-button__link { border-radius: 999px; box-shadow: 0 4px 0 rgba(0, 0, 0, .16); font-weight: 800; transition: transform .15s, box-shadow .15s; } .post_content .swell-block-button__link:hover { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0, 0, 0, .16); } /* ============================================================ キャップボックス親はクリップせず、枠線・背景を持つ要素(タイトルバー/中身)側を角丸にする ============================================================ */ .post_content .cap_box { border-radius: 0; overflow: visible; } /* タイトルが箱の上に乗る標準系: 上だけ角丸のタイトルバー + 下だけ角丸の中身 */ .post_content .cap_box_ttl { border-radius: 10px 10px 0 0; font-weight: 800; } .post_content .cap_box_content { border-radius: 0 0 12px 12px; } /* 枠線の上にラベルが浮くスタイル: ラベルは全周角丸、中身も全周角丸 */ .post_content .cap_box.is-style-onborder_ttl .cap_box_ttl, .post_content .cap_box.is-style-onborder_ttl2 .cap_box_ttl { border-radius: 8px; } .post_content .cap_box.is-style-onborder_ttl .cap_box_content, .post_content .cap_box.is-style-onborder_ttl2 .cap_box_content { border-radius: 12px; } /* 親自体が枠線を持つスタイル(intext): 親を角丸に */ .post_content .cap_box.is-style-intext { border-radius: 12px; } .post_content .cap_box.is-style-intext .cap_box_content { border-radius: 11px; } /* ============================================================ アコーディオン ============================================================ */ .post_content .swell-block-accordion__item { border: 2px solid var(--wh-line); border-radius: 12px; overflow: hidden; } .post_content .swell-block-accordion__item + .swell-block-accordion__item { margin-top: 10px; } .post_content .swell-block-accordion__title { font-weight: 800; } /* ============================================================ ふきだし（わたしのヒカリのキャラが話す用） SWELLのふきだしセットに8キャラを登録済み。id・左右・色の対応: 3 ルッペ左/green 4 テッペ左/blue 5 ビュン左/blue 6 ピカリ左/yellow 7 トック右/red 8 キュン右/red 9 ユルン右/gray 10 ホッコ右/yellow SWELLはのインラインCSSで [data-col="x"] .c-balloon__text を出力するので、 .post_content を前置して詳細度(0,3,0)で確実に勝たせる。色を足す/変える場合はふきだしセット側のcolと必ずセットで見直す。 ============================================================ */ .post_content .c-balloon__icon img, .post_content .c-balloon__iconImg { background: var(--wh-cream); border: 3px solid var(--wh-teal-pale); border-radius: 50%; } /* キャラ名は丸ゴシックで、ゆるキャラらしい見た目に */ .post_content .c-balloon__iconName { font-family: var(--wh-font-rounded); font-weight: 800; letter-spacing: .02em; } /* 吹き出し本体はTOPのキャラ吹き出し([hikari_talk])と同じ角丸・太線に揃える */ .post_content .c-balloon__text { border-radius: 16px; border-width: 2px; color: var(--wh-ink); } /* --- SWELL既定の5色をブランド配色へ上書き --- */ /* green: ティール（ルッペ） */ .post_content [data-col="green"] .c-balloon__text { background: #e9f8f5; border-color: #7ed8cb; } .post_content [data-col="green"] .c-balloon__before { border-right-color: #e9f8f5; } .post_content [data-col="green"] .c-balloon__iconImg { border-color: #b7e9e1; } /* blue: ミント（テッペ・ビュン） */ .post_content [data-col="blue"] .c-balloon__text { background: #e4f4fa; border-color: #86cde0; } .post_content [data-col="blue"] .c-balloon__before { border-right-color: #e4f4fa; } .post_content [data-col="blue"] .c-balloon__iconImg { border-color: #bde5f0; } /* red: ピンク（トック・キュン） */ .post_content [data-col="red"] .c-balloon__text { background: #fdecf3; border-color: #f39dbe; } .post_content [data-col="red"] .c-balloon__before { border-right-color: #fdecf3; } .post_content [data-col="red"] .c-balloon__iconImg { border-color: #f9c7db; } /* yellow: クリーム（ピカリ・ホッコ） */ .post_content [data-col="yellow"] .c-balloon__text { background: #fff5e1; border-color: #f3cd8b; } .post_content [data-col="yellow"] .c-balloon__before { border-right-color: #fff5e1; } .post_content [data-col="yellow"] .c-balloon__iconImg { border-color: #fae3bb; } /* gray: ふんわりグレー（ユルン） */ .post_content [data-col="gray"] .c-balloon__text { background: #f8f7f4; border-color: #d9d4cb; } .post_content [data-col="gray"] .c-balloon__before { border-right-color: #f8f7f4; } .post_content [data-col="gray"] .c-balloon__iconImg { border-color: #e7e3dc; } /* ============================================================ 引用 ============================================================ */ .post_content blockquote { background: var(--wh-cream); border: none; border-left: 6px solid var(--wh-pink); border-radius: 12px; } /* ============================================================ タブ見出し旧SWELL時代の装飾をラベルから除去したため、CSSで常時太字にする ============================================================ */ .post_content .c-tabList__button { font-weight: 700; } /* ============================================================ CTAボタン記事内のSWELLボタン(green_)をテーマのピンクに統一。 SWELLはインラインCSSの .green_ で変数を定義しているため、クラス2つ分の特異性で変数ごと上書きする。対象: ブロックボタン + 表内などのインラインボタン ============================================================ */ .swell-block-button.green_, .swl-inline-btn.green_ { --the-btn-color: var(--wh-pink); --the-btn-color2: #f9a8c9; --the-solid-shadow: var(--wh-pink-dark); } /* ============================================================ 免責事項(functions.phpで全記事冒頭に自動挿入) ============================================================ */ .post_content .wh-disclaimer { margin: 0 0 1.6em; padding: 10px 14px; background: var(--wh-cream); border: 1.5px solid var(--wh-line); border-radius: 10px; color: #7a7a85; font-size: 0.8em; line-height: 1.7; } /* ============================================================ 記事冒頭の監修者クレジット + 更新履歴リンク (functions.phpで目次より上に自動挿入) 記事下のフルボックスと役割を分けているので、ここは「箱」にしない。上下の細い罫線だけで区切り、写真34px・文字0.78emに抑えて本文より前に出さない。 ============================================================ */ .post_content .wh-articleMeta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; margin: 0 0 1.4em; padding: 9px 2px; border-top: 1.5px solid var(--wh-line); border-bottom: 1.5px solid var(--wh-line); font-size: 0.78em; line-height: 1.5; } .post_content .wh-articleMeta__sv { display: flex; align-items: center; gap: 9px; color: var(--wh-ink); text-decoration: none; } .post_content .wh-articleMeta__sv:hover .wh-articleMeta__name { text-decoration: underline; } .post_content .wh-articleMeta__photo { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--wh-teal-pale); background: var(--wh-cream); } .post_content .wh-articleMeta__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .post_content .wh-articleMeta__label { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 999px; background: var(--wh-teal-pale); color: var(--wh-teal-dark); font-family: var(--wh-font-rounded); font-weight: 800; font-size: 0.92em; letter-spacing: .06em; vertical-align: 1px; } .post_content .wh-articleMeta__name { font-weight: 700; } .post_content .wh-articleMeta__job { color: #8a8a96; font-size: 0.92em; } .post_content .wh-articleMeta__log { color: var(--wh-teal-dark); font-weight: 700; text-decoration: none; white-space: nowrap; } .post_content .wh-articleMeta__log::after { content: "↓"; margin-left: 3px; } .post_content .wh-articleMeta__log:hover { text-decoration: underline; } /* ============================================================ 更新履歴(functions.phpで記事末尾・監修者ボックスの後に自動挿入) ============================================================ */ .post_content .wh-changelog { margin: 1.6em 0 0; padding: 1em 1.2em 1.1em; background: var(--wh-cream); border: 1.5px solid var(--wh-line); border-radius: 12px; } .post_content .wh-changelog__label { display: inline-block; margin: 0 0 .8em; padding: 2px 12px; background: #fff; border: 1.5px solid var(--wh-teal-pale); border-radius: 999px; color: var(--wh-teal-dark); font-family: var(--wh-font-rounded); font-weight: 800; font-size: 0.85em; } .post_content .wh-changelog__list { list-style: none; margin: 0; padding: 0; } .post_content .wh-changelog__item { display: flex; gap: .9em; padding: .4em 0; border-top: 1px dashed var(--wh-line); font-size: 0.83em; line-height: 1.7; color: var(--wh-ink); } .post_content .wh-changelog__item:first-child { border-top: none; padding-top: 0; } .post_content .wh-changelog__date { flex-shrink: 0; width: 7.6em; color: #8a8a96; font-variant-numeric: tabular-nums; } @media (max-width: 559px) { .post_content .wh-articleMeta { font-size: 0.74em; } .post_content .wh-changelog__item { flex-direction: column; gap: 0; } .post_content .wh-changelog__date { width: auto; } } /* ============================================================ 監修者ボックス(functions.phpで記事末尾に自動挿入) ============================================================ */ .post_content .wh-supervisor { margin: 2.5em 0 0; background: #fff; border: 2.5px solid var(--wh-teal); border-radius: 14px; box-shadow: 5px 5px 0 rgba(59, 195, 179, .22); padding: 1em 1.2em 1.2em; } .post_content .wh-supervisor__label { display: inline-block; font-family: var(--wh-font-rounded); font-weight: 800; font-size: 0.85em; color: #fff; background: var(--wh-teal); border-radius: 999px; padding: .2em 1em; margin: 0 0 .9em; } .post_content .wh-supervisor__body { display: flex; gap: 1em; align-items: flex-start; } .post_content .wh-supervisor__photo { flex-shrink: 0; width: 88px; height: 88px; border-radius: 50%; object-fit: cover; border: 3px solid var(--wh-teal-pale); } .post_content .wh-supervisor__name { font-family: var(--wh-font-rounded); font-weight: 800; color: var(--wh-ink); margin: 0 0 .4em; } .post_content .wh-supervisor__job { display: block; font-size: 0.75em; font-weight: 500; color: #7a7a85; margin-top: .2em; } .post_content .wh-supervisor__desc { font-size: 0.85em; line-height: 1.7; color: var(--wh-ink); margin: 0 0 .6em; } .post_content .wh-supervisor__link { display: inline-block; font-size: 0.85em; font-weight: 700; color: var(--wh-pink); text-decoration-color: rgba(235, 94, 150, .45); text-underline-offset: 3px; } @media (max-width: 559px) { .post_content .wh-supervisor__body { flex-direction: column; align-items: center; text-align: center; } } /* ============================================================ パンくず〜記事カードの間隔を詰める(2026-07-22) SWELL標準の .l-content padding-top:64px + パンくずmargin-bottom:20px で計84pxも空いていたため、記事・固定ページに限定して計24pxに縮める。 (style.cssのdiv#breadcrumb指定より後読みで同specificityのため上書きが効く) ============================================================ */ .single-post .l-content.l-container, .page .l-content.l-container { padding-top: 16px; } .single-post div#breadcrumb.p-breadcrumb, .page div#breadcrumb.p-breadcrumb { margin-bottom: 8px; }