@charset "UTF-8";
/*
Template: swell
Theme Name: SWELL CHILD
Theme URI: https://swell-theme.com/
Description: SWELLの子テーマ
Version: 1.0.0
Author: LOOS WEB STUDIO
Author URI: https://loos-web-studio.com/
License: GNU General Public License
License URI: http://www.gnu.org/licenses/gpl.html
*/
/* ==========================================================================
キャリアをカエル。 カスタムスタイル
design-handoff.md / design-mockup-v9c.html 準拠
対象: SWELL 2.19.0 + SWELL CHILD
最終更新: 2026-09-02
【前提】このファイルは SWELL 本体のCSSより後に読み込まれるため、
同じ詳細度なら !important なしで上書きできる。
!important は SWELL 側が !important を使っている箇所のみに限定している。
========================================================================== */
/* Noto Sans JP をWebフォントとして読み込みたい場合のみ、次の行のコメントを外す。
外さない場合は端末内蔵フォント（iOS=ヒラギノ / Android=Noto / Win=游ゴシック）で
描画される。design-handoff.md のフォールバック指定どおりの挙動なので、
通常はコメントアウトのままで問題ない（外部リクエストが減り表示も速い）。 */
/* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600&display=swap'); */
/* ==========================================================================
1. デザイントークン
SWELLのCSS変数を上書きする。個別セレクタで戦うより確実で副作用が少ない。
========================================================================== */
:root {
/* --- 独自トークン（このファイル内で参照する） --- */
--ck-bg: #FFFFFF;
--ck-surface: #F5F5F4; /* CTA等の面。装飾的な面のみ */
--ck-text: #1A1A1A; /* 本文・見出し。色味を混ぜないニュートラル黒 */
--ck-text-sub: #5C5C5C; /* 補助テキスト・日付 */
--ck-rule: rgba(26, 26, 26, 0.1); /* 罫線 */
--ck-rule-accent: rgba(139, 92, 246, 0.45); /* 見出し下の罫線。薄紫 */
--ck-mint: #4DBFB3; /* ロゴ「カエル」とドット装飾のみ。UI要素には使わない */
--ck-cat: #8B5CF6; /* カテゴリータグ */
--ck-radius-face: 16px; /* 面の角丸 */
--ck-radius-pill: 999px; /* ボタンの角丸 */
--ck-font: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
/* --- SWELL変数の上書き --- */
--swl-font_family: var(--ck-font);
--swl-font_weight: 400; /* SWELL既定の500 → 本文は400 */
--swl-fz--content: 15px; /* 記事本文 15px（SP/PC共通） */
--color_text: var(--ck-text);
--color_main: var(--ck-text); /* アクセントをミントに広げない。黒に寄せる */
--color_main_dark: #000000;
--color_main_thin: rgba(26, 26, 26, 0.05);
--color_htag: var(--ck-text);
--color_link: var(--ck-text);
--color_bg: var(--ck-bg);
--color_content_bg: var(--ck-bg);
--color_border: var(--ck-rule);
--color_gray: rgba(26, 26, 26, 0.06);
--swl-color_hov_gray: rgba(26, 26, 26, 0.03);
--swl-text_color--black: var(--ck-text);
--color_header_bg: var(--ck-bg);
--color_header_text: var(--ck-text);
--color_footer_bg: var(--ck-bg);
--color_footer_text: var(--ck-text-sub);
/* コンテンツ最大幅 760px */
--container_size: 760px;
--article_size: 760px;
/* 影を全面的に無効化（カード+影は使わない方針） */
--swl-box_shadow: none;
--swl-img_shadow: none;
--swl-btn_shadow: none;
--swl-color_shadow: transparent;
/* テキストロゴの行の高さ。ロゴ+キャッチの2行分を確保する */
--logo_size_sp: auto;
--logo_size_pc: auto;
--logo_size_pcfix: auto;
}
/* ==========================================================================
2. ベース / タイポグラフィ
========================================================================== */
body {
background: var(--ck-bg);
color: var(--ck-text);
font-family: var(--ck-font);
font-weight: 400;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
}
/* font-weight は 600 を上限とする。SWELLが 700 を当てている箇所を丸める */
h1, h2, h3, h4, h5, h6,
.c-headLogo__link,
.p-postList__title,
.c-postTitle__ttl,
.p-articleThumb__cat,
.swell-block-button__link,
strong, b {
font-weight: 600;
}
/* SWELL側が font-weight:700 を当てている箇所を600に丸める。
詳細度をSWELL側と同じにして（子テーマは後読みなので）上書きする。
関連記事・サイドバーのレイアウトには触れず、太さだけを揃える。 */
.p-postList .p-postList__title,
.p-authorBox__name,
.c-secTitle,
.l-articleBottom__title,
.p-toc__ttl {
font-weight: 600;
}
/* 装飾的な影を全て落とす（SWELLは個別に box-shadow を持つ要素がある） */
.p-postList__item,
.p-postList__link,
.c-postThumb,
.l-header,
.l-fixHeader,
.p-articleThumb {
box-shadow: none;
}
/* ==========================================================================
3. ヘッダー / ロゴタイプ
「キャリアをカエル。」の "カエル" だけをミントにする。
SWELLはロゴをテキストノード一つで出力するため（キャリアをカエル。）、
CSSだけで部分着色するには疑似要素で文字を置き換えるしかない。
→ より綺麗な span 版に差し替える手順は README-implementation.md の「任意」節を参照。
========================================================================== */
.l-header {
background: var(--ck-bg);
border-bottom: 1px solid var(--ck-rule);
box-shadow: none;
}
/* PC上部のバー（キャッチフレーズ+アイコン列）は使わない。ヘッダーを1段に保つ */
.l-header__bar {
display: none;
}
.l-header__inner {
align-items: center;
padding-bottom: 24px;
padding-top: 32px;
}
.c-headLogo,
.c-headLogo.-txt {
display: block;
height: auto;
}
/* --- ロゴ本体：文字を疑似要素で組み直す --- */
.c-headLogo.-txt .c-headLogo__link {
color: var(--ck-text);
font-size: 0; /* 元テキストを視覚的に潰す（DOM上には残るのでリンク名は保たれる） */
font-weight: 600;
letter-spacing: 0.01em;
line-height: 1.4;
}
.c-headLogo.-txt .c-headLogo__link::before,
.c-headLogo.-txt .c-headLogo__link::after {
font-size: 20px;
font-weight: 600;
letter-spacing: 0.01em;
vertical-align: baseline;
}
.c-headLogo.-txt .c-headLogo__link::before {
color: var(--ck-text);
content: "キャリアを";
}
.c-headLogo.-txt .c-headLogo__link::after {
color: var(--ck-mint);
content: "カエル。";
}
/* functions.php で を入れた場合は、
そちらを正とし疑似要素版を自動的に無効化する（二重表示を防ぐ） */
.c-headLogo.-txt .c-headLogo__link:has(.ck-logo-accent) {
font-size: 20px;
}
.c-headLogo.-txt .c-headLogo__link:has(.ck-logo-accent)::before,
.c-headLogo.-txt .c-headLogo__link:has(.ck-logo-accent)::after {
content: none;
}
.ck-logo-accent {
color: var(--ck-mint);
}
/* --- ロゴ下のキャッチコピー ---
SWELLのキャッチフレーズはPC限定のヘッダーバーにしか出ないため、
ロゴブロックの疑似要素として全デバイスで表示する。
文言を変える場合は下の content: の中身を書き換える。不要なら本ブロックごと削除。 */
.l-header__logo::after {
color: var(--ck-text-sub);
content: "地方公務員の、転職のリアル";
display: block;
font-size: 12px;
font-weight: 400;
letter-spacing: 0;
line-height: 1.5;
margin-top: 3px;
}
/* --- グローバルナビ：ベタ塗りボタンではなく、下線付きのテキストリンク --- */
.c-gnav > .menu-item > a {
color: var(--ck-text-sub);
font-size: 13px;
font-weight: 400;
padding: 0 0 2px;
}
.c-gnav > .menu-item {
margin-left: 20px;
}
.c-gnav > .menu-item > a .ttl {
border-bottom: 1px solid rgba(26, 26, 26, 0.2);
padding-bottom: 2px;
}
/* SWELLのナビ下線アニメーション等の装飾を無効化 */
.c-gnav > .menu-item > a::after,
.c-gnav .ttl::after {
content: none;
}
/* --- SPヘッダー：ロゴを左寄せにする ---
SWELLのカスタマイザー既定は「ロゴ中央」で、.l-header__logo に
order:2 / text-align:center が当たる。カスタマイザー側で「左寄せ」に
変更するのが本筋だが、設定漏れでも崩れないようCSSでも固定しておく。
ヘッダーのSP/PC切り替えは960pxが境界（本文の599pxとは別）。 */
@media screen and (max-width: 959px) {
.l-header__inner {
justify-content: flex-start;
padding-left: 24px;
padding-right: 24px;
}
.l-header__logo {
flex: 1 1 auto;
margin-right: 0;
order: 0;
text-align: left;
}
.-series .l-header__logo {
display: block;
padding: 0;
}
.l-header__customBtn,
.l-header__menuBtn {
flex: none;
height: auto;
order: 9;
width: 44px; /* タップ領域は44px確保する */
}
}
/* ==========================================================================
4. レイアウト
1カラム・最大幅760px。カスタマイザーで1カラムに設定した上での微調整。
========================================================================== */
.l-mainContent__inner {
margin-left: auto;
margin-right: auto;
max-width: var(--article_size);
}
/* サイドバーを使わない前提。カスタマイザーで1カラムにしていれば
そもそも出力されないが、保険として残す（消したい場合のみ有効化）。 */
/* #sidebar { display: none; } */
/* コンテンツ上部の余白
SWELL既定は padding-top:64px(PC) / 54px(SP) と広い。
モックアップはヘッダー罫線から見出しまで52pxなので、
ここで詰めて、残りは記事一覧の先頭記事側のpaddingで作る。 */
#content,
.top #content { /* SWELLはトップだけ .top #content{padding-top:4em} を当てるので詳細度を合わせる */
padding-top: 28px;
}
/* SWELLはトップの記事一覧ラッパーに .u-mt-40 (margin-top:4em!important) を付ける。
上余白が二重になるので打ち消す。SWELL側が !important のためこちらも必要。 */
.p-homeContent.u-mt-40 {
margin-top: 0 !important;
}
/* 記事本文まわりの余白 */
.l-mainContent__inner > .post_content {
margin: 3em 0;
}
/* ==========================================================================
5. 記事一覧 ─ 罫線区切りリスト
カスタマイザーで「シンプル型」(.-type-simple) を選ぶのが前提。
万一カード型 (.-type-card) のままでも崩れないよう、両方に効く形で書いている。
【重要】以下のルールは全て
:not(:where(.-related, .p-relatedPosts, .p-postSlider, #sidebar, .l-articleBottom, .widget) *)
というガードを付けている。SWELLは「関連記事」「投稿スライダー」「サイドバー
ウィジェット」でも同じ .p-postList クラスを使い回すため、ガードなしだと
それらのカード型レイアウトまで巻き添えで壊れる。
ガードは :where() を使っているので詳細度は 0 のまま増えない。
========================================================================== */
/* --- 共通：カード・影・背景を打ち消し、罫線だけの区切りにする --- */
.p-postList.-type-card:not(:where(.-related, .p-relatedPosts, .p-postSlider, #sidebar, .l-articleBottom, .widget) *),
.p-postList.-type-simple:not(:where(.-related, .p-relatedPosts, .p-postSlider, #sidebar, .l-articleBottom, .widget) *),
.p-postList.-type-list:not(:where(.-related, .p-relatedPosts, .p-postSlider, #sidebar, .l-articleBottom, .widget) *) {
border-top: none;
display: block;
gap: 0;
margin: 0;
}
.p-postList.-type-card:not(:where(.-related, .p-relatedPosts, .p-postSlider, #sidebar, .l-articleBottom, .widget) *) .p-postList__item,
.p-postList.-type-simple:not(:where(.-related, .p-relatedPosts, .p-postSlider, #sidebar, .l-articleBottom, .widget) *) .p-postList__item,
.p-postList.-type-list:not(:where(.-related, .p-relatedPosts, .p-postSlider, #sidebar, .l-articleBottom, .widget) *) .p-postList__item {
background: none;
border: none;
box-shadow: none;
margin: 0;
padding: 0;
width: 100%;
}
.p-postList.-type-card:not(:where(.-related, .p-relatedPosts, .p-postSlider, #sidebar, .l-articleBottom, .widget) *) .p-postList__link,
.p-postList.-type-simple:not(:where(.-related, .p-relatedPosts, .p-postSlider, #sidebar, .l-articleBottom, .widget) *) .p-postList__link,
.p-postList.-type-list:not(:where(.-related, .p-relatedPosts, .p-postSlider, #sidebar, .l-articleBottom, .widget) *) .p-postList__link {
background: none;
border-bottom: 1px solid var(--ck-rule);
border-radius: 0;
box-shadow: none;
display: flex;
flex-direction: column;
padding: 26px 0;
}
/* 一覧の最後の記事は罫線を引かない（モックアップ準拠） */
.p-postList:not(:where(.-related, .p-relatedPosts, .p-postSlider, #sidebar, .l-articleBottom, .widget) *) .p-postList__item:last-child .p-postList__link {
border-bottom: none;
}
.p-postList:not(:where(.-related, .p-relatedPosts, .p-postSlider, #sidebar, .l-articleBottom, .widget) *) .p-postList__link:hover {
background: none;
}
.p-postList:not(:where(.-related, .p-relatedPosts, .p-postSlider, #sidebar, .l-articleBottom, .widget) *) .p-postList__link:hover .p-postList__title {
opacity: 0.6;
transition: opacity 0.2s;
}
/* --- サムネイルは出さない ---
シンプル型ならそもそも出力されないが、カード型のままでも見た目を揃える。 */
.p-postList:not(:where(.-related, .p-relatedPosts, .p-postSlider, #sidebar, .l-articleBottom, .widget) *) .p-postList__thumb {
display: contents; /* ボックスだけ消す。中のカテゴリーラベルは残す */
}
.p-postList:not(:where(.-related, .p-relatedPosts, .p-postSlider, #sidebar, .l-articleBottom, .widget) *) .c-postThumb__figure {
display: none; /* 画像本体だけを隠す */
}
/* --- メタ情報の並び替え ---
SWELLは「カテゴリ+日付」を1つの __meta にまとめて出力する。
display:contents で __body / __meta を透過させ、order で
カテゴリ → タイトル → 抜粋 → 日付 の順に組み直す（モックアップ準拠）。 */
.p-postList:not(:where(.-related, .p-relatedPosts, .p-postSlider, #sidebar, .l-articleBottom, .widget) *) .p-postList__body,
.p-postList:not(:where(.-related, .p-relatedPosts, .p-postSlider, #sidebar, .l-articleBottom, .widget) *) .p-postList__meta {
display: contents;
}
.p-postList:not(:where(.-related, .p-relatedPosts, .p-postSlider, #sidebar, .l-articleBottom, .widget) *) .p-postList__cat { order: 1; }
.p-postList:not(:where(.-related, .p-relatedPosts, .p-postSlider, #sidebar, .l-articleBottom, .widget) *) .p-postList__title { order: 2; }
.p-postList:not(:where(.-related, .p-relatedPosts, .p-postSlider, #sidebar, .l-articleBottom, .widget) *) .p-postList__excerpt { order: 3; }
.p-postList:not(:where(.-related, .p-relatedPosts, .p-postSlider, #sidebar, .l-articleBottom, .widget) *) .p-postList__times { order: 4; }
.p-postList:not(:where(.-related, .p-relatedPosts, .p-postSlider, #sidebar, .l-articleBottom, .widget) *) .p-postList__author,
.p-postList:not(:where(.-related, .p-relatedPosts, .p-postSlider, #sidebar, .l-articleBottom, .widget) *) .p-postList__views { order: 5; }
/* --- カテゴリーラベル：ベタ塗りバッジではなく、ドット + テキスト --- */
.p-postList:not(:where(.-related, .p-relatedPosts, .p-postSlider, #sidebar, .l-articleBottom, .widget) *) .p-postList__cat {
align-items: center;
background: none;
color: var(--ck-cat);
display: flex;
font-size: 12px;
font-weight: 500;
gap: 7px;
letter-spacing: 0.02em;
line-height: 1.5;
margin: 0;
padding: 0;
}
.p-postList:not(:where(.-related, .p-relatedPosts, .p-postSlider, #sidebar, .l-articleBottom, .widget) *) .p-postList__cat a {
color: var(--ck-cat);
text-decoration: none;
}
/* SWELLのフォルダアイコン（アイコンフォント）を消し、ミントの小さなドットに置換 */
.p-postList:not(:where(.-related, .p-relatedPosts, .p-postSlider, #sidebar, .l-articleBottom, .widget) *) .p-postList__cat::before,
.p-postList:not(:where(.-related, .p-relatedPosts, .p-postSlider, #sidebar, .l-articleBottom, .widget) *) .p-postList__cat .icon-folder::before {
content: none;
}
.p-postList:not(:where(.-related, .p-relatedPosts, .p-postSlider, #sidebar, .l-articleBottom, .widget) *) .p-postList__cat::after {
background: var(--ck-mint);
border-radius: 50%;
content: "";
display: inline-block;
flex: none;
height: 7px;
order: -1; /* ドットをラベルの左に置く */
width: 7px;
}
/* リスト型・カード型ではカテゴリーがサムネ内の .c-postThumb__cat に出る。
メタ側の .p-postList__cat と同じ「ミントのドット + 紫のテキスト」に揃える。 */
.p-postList:not(:where(.-related, .p-relatedPosts, .p-postSlider, #sidebar, .l-articleBottom, .widget) *) .c-postThumb__cat {
align-items: center;
background: none;
color: var(--ck-cat);
display: flex;
font-size: 12px;
font-weight: 500;
gap: 7px;
letter-spacing: 0.02em;
line-height: 1.5;
margin: 0;
order: 1;
padding: 0;
position: static;
transform: none;
white-space: normal;
}
.p-postList:not(:where(.-related, .p-relatedPosts, .p-postSlider, #sidebar, .l-articleBottom, .widget) *) .c-postThumb__cat::before {
content: none; /* SWELLのフォルダアイコンを消す */
}
.p-postList:not(:where(.-related, .p-relatedPosts, .p-postSlider, #sidebar, .l-articleBottom, .widget) *) .c-postThumb__cat::after {
background: var(--ck-mint);
border-radius: 50%;
content: "";
display: inline-block;
flex: none;
height: 7px;
order: -1;
width: 7px;
}
/* テキスト型のようにメタ側にもカテゴリーが出る場合は、サムネ側を隠して重複を防ぐ */
.p-postList:not(:where(.-related, .p-relatedPosts, .p-postSlider, #sidebar, .l-articleBottom, .widget) *) .p-postList__link:has(.p-postList__cat) .c-postThumb__cat {
display: none;
}
/* --- タイトル --- */
.p-postList:not(:where(.-related, .p-relatedPosts, .p-postSlider, #sidebar, .l-articleBottom, .widget) *) .p-postList__title {
color: var(--ck-text);
font-size: 20px;
font-weight: 600;
line-height: 1.45;
margin: 8px 0;
}
/* --- 抜粋 --- */
.p-postList:not(:where(.-related, .p-relatedPosts, .p-postSlider, #sidebar, .l-articleBottom, .widget) *) .p-postList__excerpt {
color: var(--ck-text-sub);
display: block;
font-size: 14px;
line-height: 1.7;
margin: 0 0 8px;
max-width: 36em;
}
/* --- 日付 --- */
.p-postList:not(:where(.-related, .p-relatedPosts, .p-postSlider, #sidebar, .l-articleBottom, .widget) *) .p-postList__times,
.p-postList:not(:where(.-related, .p-relatedPosts, .p-postSlider, #sidebar, .l-articleBottom, .widget) *) .c-postTimes {
color: var(--ck-text-sub);
font-size: 13px;
font-weight: 400;
margin: 0;
padding: 0;
}
.p-postList:not(:where(.-related, .p-relatedPosts, .p-postSlider, #sidebar, .l-articleBottom, .widget) *) .c-postTimes__posted::before,
.p-postList:not(:where(.-related, .p-relatedPosts, .p-postSlider, #sidebar, .l-articleBottom, .widget) *) .c-postTimes__modified::before {
content: none; /* 時計アイコンを消し、日付だけを置く */
}
/* --- トップの先頭記事をヒーロー扱いにする（任意） ---
モックアップ冒頭の大きな見出しを、マークアップ変更なしで再現する。
不要ならこのブロックごと削除してよい。 */
.home .p-homeContent .p-postList__item:first-child .p-postList__link {
padding: 24px 0 44px; /* #content の padding-top:28px と合わせて52px */
}
.home .p-homeContent .p-postList__item:first-child .p-postList__title {
font-size: clamp(24px, 6vw, 32px);
letter-spacing: 0.01em;
line-height: 1.4;
margin: 0 0 16px;
max-width: 14em;
}
.home .p-homeContent .p-postList__item:first-child .p-postList__excerpt {
font-size: 15px;
margin-bottom: 18px;
max-width: 32em;
}
.home .p-homeContent .p-postList__item:first-child .p-postList__cat {
margin-bottom: 14px;
}
/* ページネーション */
.c-pagination {
margin-top: 32px;
}
.c-pagination .page-numbers {
border-radius: var(--ck-radius-pill);
box-shadow: none;
font-size: 13px;
font-weight: 400;
}
.c-pagination .page-numbers.current {
background: var(--ck-text);
color: #FFFFFF;
}
/* ==========================================================================
6. 記事ページ（single）
========================================================================== */
.c-postTitle__ttl,
.p-articleHead .c-postTitle__ttl {
font-size: clamp(24px, 6vw, 32px);
font-weight: 600;
letter-spacing: 0.01em;
line-height: 1.4;
}
.c-postTitle__date,
.p-articleHead .c-postTimes {
color: var(--ck-text-sub);
font-size: 13px;
}
.p-articleHead .c-postTimes__posted::before,
.p-articleHead .c-postTimes__modified::before {
content: none;
}
/* 記事上のカテゴリ表示もドット+テキストに揃える */
.p-articleThumb__cat,
.c-categoryList__link {
background: none;
border-radius: 0;
box-shadow: none;
color: var(--ck-cat);
font-size: 12px;
font-weight: 500;
padding: 0;
}
.post_content {
font-size: 15px;
line-height: 1.7;
}
.post_content h2 {
background: none;
border: none;
border-bottom: 1px solid var(--ck-rule-accent);
color: var(--ck-text);
font-size: 20px;
font-weight: 600;
line-height: 1.45;
padding: 0 0 10px;
}
.post_content h2::before,
.post_content h2::after {
content: none;
}
.post_content h3 {
background: none;
border: none;
border-left: 2px solid var(--ck-rule);
color: var(--ck-text);
font-size: 17px;
font-weight: 600;
padding: 0 0 0 12px;
}
.post_content h3::before,
.post_content h3::after {
content: none;
}
.post_content a {
color: var(--ck-text);
text-decoration: underline;
text-underline-offset: 3px;
}
/* --- パンくずリスト：背景の帯をやめてテキストだけにする --- */
.p-breadcrumb.-bg-on,
.p-breadcrumb {
background: none;
border-bottom: none;
}
.p-breadcrumb__list {
padding-bottom: 10px;
padding-top: 10px;
}
.p-breadcrumb__text,
.p-breadcrumb__item {
color: var(--ck-text-sub);
font-size: 12px;
}
.p-breadcrumb a.p-breadcrumb__text {
color: var(--ck-text-sub);
}
/* --- タイトル横の大きな日付ブロックを消す ---
SWELLは記事タイトルの左に「2026 / 9/02」という日付ブロックを出す。
モックアップにはこの表現がなく、日付はタイトル下のメタ情報で足りるため隠す。
カスタマイザー側の「タイトル横に日付を表示」をOFFにできる場合はそちらが本筋。 */
.c-postTitle__date {
display: none;
}
.p-articleHead.c-postTitle {
display: block;
}
/* --- SNSシェアボタン：原色のベタ塗りをやめ、モノクロの輪郭に統一する ---
SWELLはSNSごとにブランドカラー（#3b5998 等）をベタ塗りで当てるため、
ニュートラルな配色の中で強く浮く。詳細度をSWELL側(0,2,0)に合わせて上書き。
不要ならこのブロックごと削除してよい。 */
.c-shareBtns .c-shareBtns__btn {
background: none;
border: 1px solid var(--ck-rule);
border-radius: var(--ck-radius-pill);
box-shadow: none;
color: var(--ck-text-sub);
}
.c-shareBtns .c-shareBtns__btn:hover {
background: var(--swl-color_hov_gray);
}
.c-shareBtns__message {
color: var(--ck-text-sub);
font-size: 13px;
font-weight: 400;
}
/* 「＼ よかったらシェアしてね！ ／」の斜線装飾を外す */
.c-shareBtns__message::before,
.c-shareBtns__message::after,
.c-shareBtns__message .__text::before,
.c-shareBtns__message .__text::after {
content: none;
}
/* --- 著者情報ボックス ---
【重要】このサイトの編集方針（身元特定リスクの回避）上、著者ボックスは
カスタマイザー側でOFFにすること。CSSで display:none にしても
HTMLソースにはWordPressのユーザー名（例: ky-20260902yk）が残り、
ページのソースを見れば読めてしまうため、CSSでの非表示は対策にならない。
下の行は「GUIでOFFにするまでの暫定の目隠し」であり、恒久対策ではない。 */
/* .p-authorBox, .l-articleBottom__section.-author { display: none; } */
.p-authorBox {
background: none;
border: 1px solid var(--ck-rule);
border-radius: var(--ck-radius-face);
box-shadow: none;
}
/* ==========================================================================
7. CTAセクション
カスタムHTMLブロック / ブログパーツに貼る想定。
マークアップは README-implementation.md の「CTAブロック」節を参照。
クラス名は ck- 接頭辞でSWELL（l-/c-/p-/u-/is-/swell-）と衝突しない。
========================================================================== */
.ck-cta {
align-items: center;
background: var(--ck-surface);
border-radius: var(--ck-radius-face);
display: flex;
flex-wrap: wrap;
gap: 16px;
justify-content: space-between;
margin: 20px 0;
padding: 26px;
}
.ck-cta__body {
min-width: 0;
}
.ck-cta__title {
color: var(--ck-text);
font-size: 15px;
font-weight: 600;
line-height: 1.5;
margin: 0 0 4px;
}
.ck-cta__note {
color: var(--ck-text-sub);
font-size: 13px;
line-height: 1.6;
margin: 0;
}
.ck-cta__btn,
.ck-cta__btn:hover,
.ck-cta__btn:visited {
background: var(--ck-text);
border-radius: var(--ck-radius-pill);
box-shadow: none;
color: #FFFFFF;
display: inline-block;
font-size: 14px;
font-weight: 500;
padding: 11px 22px;
text-decoration: none;
white-space: nowrap;
}
.ck-cta__btn:hover {
opacity: 0.85;
}
/* SWELLのボタンブロックを使う場合も黒ピルに揃える */
.swell-block-button__link {
border-radius: var(--ck-radius-pill);
box-shadow: none;
font-weight: 500;
}
/* ==========================================================================
8. フッター
========================================================================== */
.l-footer {
background: var(--ck-bg);
border-top: 1px solid var(--ck-rule);
margin-top: 44px;
}
.l-footer__foot {
background: none;
padding: 24px 0;
}
.l-footer .copyright {
color: var(--ck-text-sub);
font-size: 12px;
}
/* コピーライトはモックアップに合わせて左揃え（SWELL既定は中央） */
.l-footer__foot,
.l-footer__foot .l-container,
.l-footer .copyright {
text-align: left;
}
/* トップへ戻るボタンの影を落とす */
.p-fixBtnWrap,
#pagetop {
box-shadow: none;
}
/* ==========================================================================
9. レスポンシブ調整
X経由の流入が主。モバイル表示を最優先で詰める。
========================================================================== */
/* --- スマートフォン（〜599px） --- */
@media screen and (max-width: 599px) {
:root {
--swl-pad_container: 24px; /* モックアップの左右padding 24px に合わせる */
}
#content,
.top #content {
padding-top: 16px;
}
.l-header__inner {
padding-bottom: 20px;
padding-top: 24px;
}
.c-headLogo.-txt .c-headLogo__link::before,
.c-headLogo.-txt .c-headLogo__link::after,
.c-headLogo.-txt .c-headLogo__link:has(.ck-logo-accent) {
font-size: 19px;
}
.p-postList:not(:where(.-related, .p-relatedPosts, .p-postSlider, #sidebar, .l-articleBottom, .widget) *) .p-postList__link {
padding: 22px 0;
}
.p-postList:not(:where(.-related, .p-relatedPosts, .p-postSlider, #sidebar, .l-articleBottom, .widget) *) .p-postList__title {
font-size: 18px;
}
.p-postList:not(:where(.-related, .p-relatedPosts, .p-postSlider, #sidebar, .l-articleBottom, .widget) *) .p-postList__excerpt {
font-size: 14px;
}
.home .p-homeContent .p-postList__item:first-child .p-postList__link {
padding: 20px 0 32px; /* #content の padding-top:16px と合わせて36px */
}
/* CTAは縦積みにして、ボタンを全幅にする（親指で押しやすくする） */
.ck-cta {
align-items: stretch;
flex-direction: column;
gap: 18px;
padding: 22px 20px;
}
.ck-cta__btn {
padding: 13px 22px;
text-align: center;
width: 100%;
}
.post_content h2 {
font-size: 19px;
}
}
/* --- 760px未満で本文が端に付かないようにする --- */
@media screen and (max-width: 800px) {
.l-mainContent__inner {
padding-left: 0;
padding-right: 0;
}
}
/* ==========================================================================
10. ブロックエディター内の表示
functions.php でこのCSSを編集画面にも読み込んでいる。
ただしSWELLのエディタ用CSSが後から読まれるため、ここだけ !important で押し切る。
.editor-styles-wrapper はサイト側には存在しないので、表示には影響しない。
========================================================================== */
.editor-styles-wrapper {
color: var(--ck-text);
font-family: var(--ck-font);
}
.editor-styles-wrapper p {
font-size: 15px;
line-height: 1.7;
}
.editor-styles-wrapper h2.wp-block-heading {
background: none !important;
border: none !important;
border-bottom: 1px solid var(--ck-rule-accent) !important;
border-radius: 0 !important;
color: var(--ck-text) !important;
font-size: 20px;
font-weight: 600;
line-height: 1.45;
padding: 0 0 10px !important;
}
.editor-styles-wrapper h3.wp-block-heading {
background: none !important;
border: none !important;
border-left: 2px solid var(--ck-rule) !important;
border-radius: 0 !important;
color: var(--ck-text) !important;
font-size: 17px;
font-weight: 600;
padding: 0 0 0 12px !important;
}
.editor-styles-wrapper h2.wp-block-heading::before,
.editor-styles-wrapper h2.wp-block-heading::after,
.editor-styles-wrapper h3.wp-block-heading::before,
.editor-styles-wrapper h3.wp-block-heading::after {
content: none !important;
}