/* Theme Name: Keio Pediatric Surgery Theme URI: Author: 慶應義塾大学医学部小児外科 Description: 慶應義塾大学医学部小児外科 独自HP用テーマ。Preliminary-Ped-surg-site/public/ の静的サイトを正本として再現する。特定の親テーマ・ページビルダー・プラグインに依存しない単独テーマ（憲章 目標9：将来の別ホスティング・別CMSへの移行を妨げない構造）。 Version: 1.1.0 Requires at least: 6.0 Tested up to: 6.8 Requires PHP: 7.4 License: 慶應義塾大学医学部小児外科 内部利用 Text Domain: keio-pedsurg */ /* ============================================================ このファイルには「/public/css/style.css からの差分」だけを書く。 /public/css/style.css は assets/css/site.css として無改変でコピーし、 functions.php で site.css → style.css の順に読み込む。 したがって本ファイルの記述が後勝ちで上書きする。 静的サイト側の色・字送りの微調整を行う場合は、 原則として assets/css/site.css ではなく本ファイルに追記し、 「静的サイト由来」と「WP移行後の調整」を分離できる状態を保つこと。 ============================================================ */ /* ------------------------------------------------------------ [追加1] ロゴのサイズ制御 2026-08-22 /public/css/style.css には .site-brand__logo の定義が無く、 img { max-width:100% } のみで制御されていた（＝ロゴ画像の 実寸がそのまま出る）。ヘッダー高さを安定させるため高さを固定し、 幅は縦横比維持で自動とする。 ※ height の値はロゴ実物を見て調整可（56px は暫定値）。 ------------------------------------------------------------ */ .site-brand__logo { display: block; height: 72px; width: auto; max-width: 100%; } @media (max-width: 760px) { .site-brand__logo { height: 44px; } } /* ------------------------------------------------------------ [追加2] 未トークン化だった色の変数化 2026-08-22 site.css 側でハードコードされていた値を変数として宣言する。 site.css 自体は書き換えないため、この宣言は「今後の調整の 受け皿」であり、現時点で見た目は変わらない。 ------------------------------------------------------------ */ :root { --color-focus: #1f6fb2; --color-footer-bg: #0f2638; --color-footer-heading: #d8e8f5; --color-footer-muted: #b9cddd; --color-hero-top: #edf5fb; --radius-lg: 16px; --radius-md: 12px; --radius-pill: 999px; } /* ------------------------------------------------------------ [追加3] WordPress が出力する要素の最低限の整形 2026-08-22 静的サイトには存在しなかったが WP では出力されうる要素。 ------------------------------------------------------------ */ .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .wp-caption, figure { max-width: 100%; margin-inline: 0; } figcaption { font-size: .9rem; color: var(--color-muted); } .aligncenter { display: block; margin-inline: auto; } table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid var(--color-border); padding: .5rem .7rem; text-align: left; } th { background: var(--color-subtle); } /* 投稿一覧（News） */ .news-list li a { font-weight: 700; } .news-list__date { color: var(--color-muted); font-size: .92rem; margin-right: .6rem; } .pagination { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .5rem; } .pagination .page-numbers { display: inline-flex; min-height: 44px; min-width: 44px; align-items: center; justify-content: center; border: 1px solid var(--color-border); border-radius: var(--radius-md); text-decoration: none; } .pagination .current { background: var(--color-primary); border-color: var(--color-primary); color: #fff; font-weight: 700; } /* 更新日・監修者表示（憲章 目標8：責任主体と最新性の明示） */ .entry-meta { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--color-border); color: var(--color-muted); font-size: .92rem; } .entry-meta dt { font-weight: 700; margin-top: .5rem; } .entry-meta dd { margin: 0 0 0 0; } /* ------------------------------------------------------------ [追加4] スマートフォンでの疾患カード表示枚数 2026-08-22 site.css には次の指定があり、760px以下で 5枚目以降が 非表示になっていた。 @media (max-width: 760px) { .card-grid--mobile-priority .card:nth-child(n+5) { display: none; } } トップページの疾患情報は8疾患群すべてを提示する方針としたため、 この非表示指定を解除する（2026-08-22 決定）。 site.css 自体は書き換えず、ここで上書きする。 ------------------------------------------------------------ */ @media (max-width: 760px) { .card-grid--mobile-priority .card:nth-child(n+5) { display: block; } } /* ------------------------------------------------------------ [追加5] 外部リンクの明示 2026-08-24 別タブで開くリンクに小さなアイコンを付ける。 アイコンだけでは支援技術に伝わらないため、 functions.php 側で読み上げ用テキストを併記している。 ------------------------------------------------------------ */ .external-mark { display: inline-block; width: .7em; height: .7em; margin-left: .3em; vertical-align: baseline; border: 1px solid currentColor; border-radius: 2px; position: relative; } .external-mark::after { content: ""; position: absolute; right: -.22em; top: -.22em; width: .45em; height: .45em; border-top: 1px solid currentColor; border-right: 1px solid currentColor; background: var(--color-bg); } .site-footer .external-mark::after { background: #0f2638; } /* ------------------------------------------------------------ [追加6] SNSリンクの公式アイコン　2026−9−4修正 ------------------------------------------------------------ */ .footer-links a { display: flex; flex-direction: column; align-items: center; gap: .45rem; } .footer-links a[href^="https://x.com/"]::before, .footer-links a[href^="https://www.instagram.com/"]::before, .footer-links a[href^="https://www.facebook.com/"]::before { content: ""; display: block; width: 2.5rem; height: 2.5rem; margin-right: 0; margin-bottom: .1rem; background-repeat: no-repeat; background-position: center; background-size: contain; } .footer-links a[href^="https://x.com/"]::before { background-image: url("/wp-content/uploads/2026/09/x-logo-black.png"); } .footer-links a[href^="https://www.instagram.com/"]::before { background-image: url("/wp-content/uploads/2026/09/Instagram_Glyph_Gradient-scaled.png"); } .footer-links a[href^="https://www.facebook.com/"]::before { background-image: url("/wp-content/uploads/2026/09/Facebook_Logo_Primary.png"); } /* --------------------------------------------------------------- [追加7] 研修案内ページ（/education/）専用 2026-08-31（v2） 目的：Step6G 研修案内ページのヒーロー（写真＋キャッチ）と、 図版の見え方を整える。 v2 での変更：研修フロー図・キャリアパス図を HTML+CSS で描く方式から 画像掲載へ変更したため、`.edu-flow` / `.edu-career` の指定を削除した。 代わりに画像ブロック用の `.edu-figure` を追加している。 方針（既存の運用を踏襲） - assets/css/site.css は編集しない。差分は本ファイル（テーマ直下 style.css）へ追記する。 - 新規の色は宣言せず、既存トークン（--color-primary 等）を使う。 --------------------------------------------------------------- */ /* --- 7-1 ヒーロー（写真＋キャッチ） ------------------------------ */ .edu-hero { position: relative; margin: 0 0 1.5rem; border-radius: var(--radius-lg); overflow: hidden; } .edu-hero img { display: block; width: 100%; height: auto; } /* キャッチは写真に重ねる。可読性確保のため下部に濃色グラデーションを敷き、 白文字とする。背景実効色 rgba(10,53,91,.88) に対する白文字のコントラスト比は 約 11:1 で WCAG 2.1 AA（4.5:1）を満たす。 */ .edu-hero__caption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 3rem 1.25rem 1.25rem; color: #ffffff; font-size: clamp(1.15rem, 2.6vw, 1.9rem); font-weight: 700; line-height: 1.5; text-align: center; background: linear-gradient(180deg, rgba(10, 53, 91, 0) 0%, rgba(10, 53, 91, .72) 55%, rgba(10, 53, 91, .88) 100%); } /* 640px以下は重ねない。写真の縦が縮み、文字が写真を覆い尽くすため。 */ @media (max-width: 640px) { .edu-hero { border-radius: var(--radius-md); } .edu-hero__caption { position: static; padding: 1rem; background: var(--color-primary-dark); font-size: 1.15rem; text-align: left; } } /* --- 7-2 図版（画像ブロック） ------------------------------------ */ /* 図の背景が白のため、枠線が無いと本文背景に溶ける。枠と角丸を付ける。 画像ブロックの「高度な設定 → 追加CSSクラス」に edu-figure と入力する。 */ .edu-figure img { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; } .edu-figure figcaption { font-size: .9rem; color: var(--color-muted); margin-top: .5rem; } /* 拡大できることが伝わるよう、スマホではキャプションを少し強調する。 */ @media (max-width: 760px) { .edu-figure figcaption { color: var(--color-primary); font-weight: 700; } } /* --------------------------------------------------------------- [追加8] 研修案内ページのヒーロー（カバーブロック） 2026-09-02（v4） ★差し替え作業★ style.css に入っている旧 [追加8] は**ブロックごと削除**して、 本ファイルの内容に置き換えること。 目印：「[追加8] ヒーローをカバーブロックへ変更」というコメントから ファイル末尾まで。 旧版から削った指定と、その理由 - `.site-main .wp-block-cover__inner-container > p { max-width: 22em }` → 削除。「見出しも重ねる案」のときに入れたもので、現在の構成では 34px の文字に対して約748pxとなり、PC幅でもキャッチが2行に 折り返してしまう（実測：1行57.8px → 2行115.6px）。 - `.edu-hero-cover` 系の配置指定 → 削除。見出しを画像内に置く案が廃案になったため不要。 現在の構成 - 見出し「慶應小児外科の目指すところ」…… 画像の外（通常のH2） - キャッチ「「こどもを…」になること」…… 画像の中央下に重ねる （カバーブロックの「コンテンツ位置＝下中央」で実現。CSSは不要） したがってテーマ側で補うのは**角丸だけ**である。 オーバーレイの色・不透明度・焦点・文字サイズは、すべてブロックの設定側で持つ。 [追加7] の 7-1（.edu-hero / .edu-hero__caption）は不使用。削除してよい。 7-2（.edu-figure）は図で使う可能性があるため残す。 --------------------------------------------------------------- */ /* カバーブロックの角丸。他のカード類（--radius-lg）と見た目を揃える。 */ .site-main .wp-block-cover { border-radius: var(--radius-lg); overflow: hidden; margin: 0 0 1.5rem; } @media (max-width: 640px) { .site-main .wp-block-cover { border-radius: var(--radius-md); } } /* ------------------------------------------------------------ [追加9] 下層ページ見出し部（.page-title）の軽量化 2026-09-03（統合版 v2） ※旧 [追加9] [追加9-2] は本ブロックへ統合済み。重複指定は削除すること。 目的：パンくず＋H1＋リード文が薄青の帯として塊に見え、本文の開始位置が 下がりすぎるため、「面」をやめて本文と地続きにする。 方針：H1は憲章 目標8（明確なページタイトル・見出し）に基づき残す。 site.css は編集せず、本ファイルで上書きする。 注意：パンくずも

のため、リード文の指定は :not(.breadcrumb) で限定する。 ------------------------------------------------------------ */ /* グローバルナビ下端の余白 */ .site-header__inner { padding: 1rem 0 .6rem; } /* 見出し部：背景色と下ボーダーをやめる */ .page-title { background: transparent; border-bottom: 0; padding: 1rem 0 0; } .page-title .breadcrumb { margin: 0 0 .35rem; } .page-title h1 { margin: 0; font-size: clamp(1.4rem, 3vw, 1.75rem); line-height: 1.3; } .page-title p:not(.breadcrumb) { margin: .5rem 0 0; font-size: .95rem; color: var(--color-muted); max-width: 60em; } /* 見出し部直下の本文セクション（トップページの .section は変更しない） */ .page-title + .section { padding-top: 1.25rem; } @media (max-width: 760px) { .site-header__inner { padding: .75rem 0 .5rem; } .page-title { padding: .75rem 0 0; } .page-title + .section { padding-top: 1rem; } } /* ------------------------------------------------------------ [追加10] トップページ ヒーローの余白調整とロゴ拡大 2026-09-03 目的 1. ヘッダーのロゴを大きくする（56px → 72px）。 2. 英字表記（.eyebrow）を front-main.html から削除したことに伴い、 ヒーロー上部の余白を詰める（実測 89px → 32px）。 3. キャッチと「対象者別に探す」の間の余白を詰める（実測 141px → 48px）。 方針 - assets/css/site.css は編集しない。差分は本ファイルに追記する（既存の運用を踏襲）。 - 新しい色・トークンは追加しない。余白と高さのみを変更する。 - .hero はトップページにしか存在しないため、下層ページには影響しない。 隣接セレクタ .hero + .section により、詰めるのは ヒーロー直後のセクション（対象者別に探す）のみに限定される。 ※ 数値はすべて調整可。72px / 2rem / 1.5rem が調整点である。 ロゴ高さの上限については別紙第4節（解像度の制約）を参照。 ------------------------------------------------------------ */ /* --- 10-1 ヘッダーのロゴ ------------------------------------ */ .site-brand__logo { height: 72px; } @media (max-width: 760px) { .site-brand__logo { height: 52px; } } /* --- 10-2 ヒーロー上部・下部の余白 -------------------------- */ /* site.css の .hero { padding: 4.5rem 0 3.5rem } を上書きする。 */ .hero { padding: 2rem 0 1.5rem; } /* 英字表記の削除により h1 が先頭になるため、上マージンを0にする。 */ .hero h1 { margin: 0 0 .9rem; } /* .hero p はブラウザ既定の margin 1em（約17px）で開いている。 写真とキャッチの間隔、キャッチ下の余白をここで明示する。 */ .hero__image { margin: 0 0 .75rem; } .hero__tagline { margin: 0; } /* --- 10-3 ヒーロー直後のセクション上端 ---------------------- */ .hero + .section { padding-top: 1.5rem; } .hero + .section > .container > :first-child { margin-top: 0; } /* --- 10-4 スマートフォン ------------------------------------ */ @media (max-width: 760px) { .hero { padding: 1.5rem 0 1.25rem; } .hero + .section { padding-top: 1.25rem; } } /* ------------------------------------------------------------------ [追加11] 760px以下のグローバルナビ（ハンバーガー） 2026-09-05 目的：設計決定記録 §2-8・§2-9 のとおり、760px以下のナビを ハンバーガー開閉にする。ヘッダー高さが約289px→約73pxとなり、 FirstView と3導線カードが早期に見えるようになる。 方針 - assets/css/site.css は編集しない。差分は本ファイルに追記する。 - 新しい色は宣言せず、既存トークン（--color-border 等）を使う。 - 展開時のナビは site.css の 2列×4段の指定をそのまま使う。ここでは ヘッダー内の配置と開閉の表示制御だけを行う。 - 折りたたみは .js-nav 配下でのみ行う。JSが読み込まれない環境では 2列×4段が常時表示され、ナビ項目への到達性は損なわれない。 - タップ領域44px以上（設計決定記録 §3-3【原則】）を守る。 - フォーカスリングは site.css の button:focus-visible が担当するため ここでは指定しない。 調整点：ボタンの min-height（44px）、ヘッダー内の列間隔（.75rem）、 展開時のナビ上余白（.75rem）。 ------------------------------------------------------------------ */ /* --- 11-1 開閉ボタン（既定は非表示） --------------------------------- */ /* 761px以上、およびJSが読み込まれない環境では表示しない。 */ .global-nav__toggle { display: none; align-items: center; gap: .5rem; min-height: 44px; padding: .4rem .85rem; border: 1px solid var(--color-border); border-radius: 10px; background: #fff; color: var(--color-primary-dark); font-family: inherit; font-size: .95rem; font-weight: 700; line-height: 1.2; cursor: pointer; } .global-nav__toggle:hover { background: var(--color-subtle); } /* --- 11-2 ハンバーガーの三本線（画像を使わずCSSで描く） ---------------- */ .global-nav__toggle-bars { position: relative; flex: 0 0 auto; width: 18px; height: 2px; background: currentColor; } .global-nav__toggle-bars::before, .global-nav__toggle-bars::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; } .global-nav__toggle-bars::before { top: -6px; } .global-nav__toggle-bars::after { top: 6px; } /* 開いている間は×印にする（状態はボタンのテキストとaria-expandedでも伝わる） */ .global-nav__toggle[aria-expanded="true"] .global-nav__toggle-bars { background: transparent; } .global-nav__toggle[aria-expanded="true"] .global-nav__toggle-bars::before { top: 0; transform: rotate(45deg); } .global-nav__toggle[aria-expanded="true"] .global-nav__toggle-bars::after { top: 0; transform: rotate(-45deg); } /* --- 11-3 760px以下の配置と開閉 -------------------------------------- */ @media (max-width: 760px) { /* ロゴを左、ボタンを右に並べ、ナビはその下の行に置く。 ボタンは