/* Theme Name: 御幸南保育所 Theme URI: https://miyuki-minami.net Description: 社会福祉法人白梅会 御幸南保育所 公式サイト子テーマ。Twenty Twenty-Five をベースに、サイトトークン正本（デザイン指示書 brandsite-master_miyuki_20260805.md §7/§8/§8a）の配色・書体・余白を適用する。 Author: 八千代に合同会社 Template: twentytwentyfive Text Domain: miyuki-minami Version: 0.1.0 Requires PHP: 7.4 Requires at least: 6.4 */ /* * トークン（色・書体・spacing・角丸）の値そのものは theme.json を単一ソースとする。 * このファイルに新しい HEX・フォント名・spacing 値を書かない。 * * ここに書くのは theme.json のブロックサポートでは表現できないコンポーネントの * 挙動（transform・position:fixed・レスポンシブ表示切替・ハッチング背景）のみ。 * 色・サイズは必ず var(--wp--preset--...) / var(--wp--custom--...) を参照する * （デザインカンプ実装タスク 2026-08-05〜06・受入条件の色監査に対応）。 */ /* * ==== ヘッダーのブレークポイント方針（2026-08-06） ==== * * 【計測した事実】ヘッダー（園名＋ナビ7項目＋電話ブロック＋採用ボタン）が1行に収まるための * 実測必要幅は約1296px（ナビ単体の実測幅704px＋園名159px＋右ゾーン289px＋行内gap64px＋ * 左右padding80px。ナビは参照カンプ実測値 font-size:16px/gap:22px に合わせ済み・これ以上は * カンプの意匠を離れるため縮めない）。この必要幅は **物理ビューポート幅に関係なく一定**。 * さらに旧実装はヘッダー行の幅を alignwide（theme.jsonのwideSize=1200px。本文の読みやすい * 幅として設定したトークンで、ヘッダー用に決めた値ではない）で頭打ちにしていたため、 * 1920px等の広いデスクトップでもナビが2行に折れる不具合を実機Playwright確認で検出した * （検証側の900px不具合報告を機に、より広い幅でも再検証して判明）。 * * 【対応1】ヘッダー行の上限幅を1200px->1440pxへ拡張（下記 .alignwide 上書き）。 * 実測必要幅1296pxに約144pxの余裕を持たせた値。 * 【対応2】「PC想定＝ナビ横並び／SP想定＝ハンバーガー」の切替ブレークポイントを * 781px->1349pxへ引き上げ（検証側の選択肢(a)を採用）。実測必要幅1296pxに * 約53pxの余裕を持たせた値。782〜1199px帯（検証側がタブレット横持ち・ノートPC狭幅と * 指摘した帯）はこのブレークポイント変更によりSP側の表示（ハンバーガー・お電話リンク・ * 短縮「採用」ボタン）に含まれる。 * * 【選択肢(b)（PC/タブレット/SPの3段）を採らなかった理由】 * 参照カンプにタブレット幅のレイアウトが存在せず、3段目の視覚仕様（ナビ折り畳み時に電話ブロックを * どう配置するか等）を実装者が新規に決めることになり、脱AIデザインゲートの「指示書に無い意匠を * 自分で決めない」に抵触するおそれがあるため。SP表示でも見学の電話CTA自体は * ヘッダーの「お電話」リンク＋画面下部の追従バー（電話番号・受付時間を常時表示）で担保されており、 * 782〜1199px帯でCTAが失われるわけではない。 * * ブレークポイント値はこのファイル内すべて 1349px に統一する（複数箇所に分散しているため、 * 変更する場合は "max-width: 1349px" を一括置換すること）。 */ .miyuki-header .miyuki-header__row.alignwide { max-width: 1440px; } /* * カンプは区切り罫線・FVパネル等に承認6色の半透明版（例: rgba(138,90,59,0.35)）を使う。 * 新しい色を持ち込まないよう、HEXの直書きではなく承認トークンからの color-mix() で導出する。 */ :root { --miyuki-hairline: color-mix(in srgb, var(--wp--preset--color--warm-wood) 35%, transparent); --miyuki-hairline-soft: color-mix(in srgb, var(--wp--preset--color--warm-wood) 25%, transparent); --miyuki-panel-bg: color-mix(in srgb, var(--wp--preset--color--paper-cream) 94%, transparent); --miyuki-caption-bg: color-mix(in srgb, var(--wp--preset--color--paper-cream) 90%, transparent); } /* ==== signature: 屋根の傾きのライン（サイト共通 signature の適用形） ==== */ .miyuki-signature { width: var(--wp--custom--signature--width, 64px); height: var(--wp--custom--signature--height, 7px); background-color: var(--wp--preset--color--roof-red); transform: rotate(var(--wp--custom--signature--rotate, -15deg)); transform-origin: left center; margin-bottom: var(--wp--preset--spacing--20); } @media (max-width: 1349px) { .miyuki-signature { width: var(--wp--custom--signature--width-mobile, 56px); height: var(--wp--custom--signature--height-mobile, 6px); } } /* ==== ヘッダー: PC/SP で表示を切り替える要素 ==== * 電話ブロック（3行詳細）は SP で「お電話」1行リンクに置き換える。 * 採用ボタンは PC=「採用情報」・SP=「採用」（短縮ラベル）で出し分ける * （参照カンプ v2 改修メモに合わせた・header.html コメント参照）。 * * 【2026-08-06 実機検証で発覚した不具合1】 * .miyuki-header__phone は layout:flex を持つため WP が自動付与する `.is-layout-flex` の * グローバルルール `body .is-layout-flex{display:flex}`（詳細度 0,1,1）が、単純クラス1つの * `.miyuki-header__phone{display:none}`（詳細度 0,1,0）に競り勝ち、SPでも電話ブロックが * 消えずに3行表示のままはみ出す不具合をPlaywrightでの実描画確認で検出した。 * 詳細度をクラス2つ（0,2,0）に上げて確実に勝たせる。 * * 【2026-08-06 実機検証で発覚した不具合2】 * 採用ボタンをPC/SP共通で「採用情報」表示にすると、390px幅で * ブランド名＋ハンバーガー＋「お電話」＋ボタンの合計が収まらず、実測で右端が * 約27px画面外にはみ出すことを Playwright の boundingBox() 実測で確認した。 * 参照カンプ v2 が SP のみ「採用」と短縮している理由はこれ。ラベルをPC/SPで * 分けるため、ボタンをPC用（miyuki-header__recruit）とSP用 * （miyuki-header__recruit-mobile）の2要素に分離した。 * * 【2026-08-06 実機検証で発覚した不具合3】 * miyuki-header__recruit-mobile は wp:buttons ブロック（WPが自動で is-layout-flex を * 付与する）のため、不具合1と同じ詳細度競合で「デフォルト非表示」のはずが * デスクトップ幅でも表示されてしまい、採用情報ボタンと採用ボタンが同時に出る不具合を * Playwrightで検出した。.miyuki-header__mobile-call（p要素・is-layout-flex を持たない） * は同じ問題が起きないため気づきにくかった。デフォルト非表示側も詳細度をクラス2つに揃える。 */ .miyuki-header .miyuki-header__mobile-call, .miyuki-header .miyuki-header__recruit-mobile { display: none; } @media (max-width: 1349px) { .miyuki-header .miyuki-header__phone, .miyuki-header .miyuki-header__recruit { display: none; } .miyuki-header .miyuki-header__mobile-call { display: block; } .miyuki-header .miyuki-header__recruit-mobile { display: flex; } } /* タップ領域44px（参照カンプ v2 改修メモ：主CVが電話のため） */ .miyuki-header__mobile-call a, .miyuki-header__recruit .wp-block-button__link, .miyuki-header__recruit-mobile .wp-block-button__link { min-height: 44px; display: inline-flex; align-items: center; } /* ==== ヘッダー/フッターの左右余白（2026-08-06 実機検証で発覚） ==== * alignfull > constrained > alignwide 構造にすると、中間の constrained ラッパーに * サイト共通のルートパディング（`--wp--style--root--padding-left/right` = spacing--50 = 5.5rem * = 88px。本文の読みやすい余白として theme.json で設定した値）が `.has-global-padding` 経由で * 自動的にかかる。本文用の大きい余白がヘッダー/フッターの帯にもそのまま適用され、 * 390px幅のSPで左右176px分を専有し、採用ボタンが画面外にはみ出す不具合をPlaywright実描画で検出した。 * ヘッダー/フッターはこの継承を打ち消し、カンプ実測値（PC 40px／SP 16px）を明示指定する。 */ .miyuki-header > .is-layout-constrained.has-global-padding, .miyuki-footer > .is-layout-constrained.has-global-padding { padding-left: 0; padding-right: 0; } .miyuki-header__row, .miyuki-footer__row { padding-left: 40px; padding-right: 40px; box-sizing: border-box; } @media (max-width: 1349px) { .miyuki-header__row, .miyuki-footer__row { padding-left: 16px; padding-right: 16px; } } /* ==== SPヘッダーの間隔を詰める（2026-08-06 実機検証で発覚した不具合4） ==== * .miyuki-header__row と .miyuki-header__right は WP既定の blockGap（spacing--30 = 32px）を * そのまま使っており、390px幅では「ブランド/お電話+採用/ハンバーガー」間の2箇所＋ * 「お電話/採用」間の1箇所＝計3ギャップ×32px=96pxだけで利用可能幅358pxの4分の1超を消費し、 * ハンバーガーが画面外に約11pxはみ出す不具合をPlaywrightのboundingBox実測で検出した。 * 参照カンプ v2 のSPヘッダーは gap:12px〜14px。同程度まで詰める。 */ @media (max-width: 1349px) { .miyuki-header__row, .miyuki-header__right { gap: 12px; } } /* ==== SPフッターのリンクを1列縦並びに（2026-08-06） ==== * PCは編集単位として3つの wp:navigation（各2〜3項目）を横並びにしているため、 * SPでそのまま折り返すと「入園案内／子育て支援」のような2列グリッド状に見え、 * 項目の対応関係が読めない不具合を実機Playwright確認で検出した。 * 参照カンプ v2 のSP版は1列縦並び（flex-direction:column, gap:14px）。 * ラッパーを縦に切り替えるだけで、内部の各 wp:navigation は元々 orientation:vertical * なので3つが縦に積み重なり、結果として全リンクが1列になる。 * * 【追加修正】WPの `.is-layout-flex{align-items:center}` がそのまま効くため、 * flex-direction:column にしただけだと3つの nav が幅の違い（実測71/85/141px）に応じて * 個別に中央寄せされ、x座標がバラバラになる不具合を実機Playwright確認で検出した。 * align-items:flex-start で左揃えに固定する。 */ @media (max-width: 1349px) { .miyuki-footer__links { flex-direction: column; align-items: flex-start; gap: var(--wp--preset--spacing--20); } } /* ==== ヘッダー破綻の再発防止（2026-08-06 実機検証で発覚した defect 1 対応） ==== * 根本原因は layout:constrained の子要素幅が contentSize(720px) に固定される点で、 * header.html 側を alignwide 化して解消済み。以下はそれでも極端な狭幅で * 文字が1文字ずつ折り返るのを防ぐ安全策（3ゾーンを shrink させない／主要文言を折り返さない）。 */ .miyuki-header__row { width: 100%; } .miyuki-header__brand, .miyuki-header__right { flex-shrink: 0; } .miyuki-header__nav { flex-shrink: 1; min-width: 0; } .miyuki-header__brand .wp-block-site-title, .miyuki-header__brand .wp-block-site-title a, .miyuki-header__brand p, .miyuki-header__phone p, .miyuki-header__mobile-call, .miyuki-header__recruit .wp-block-button__link { white-space: nowrap; } /* ==== SPヘッダーの並び順（2026-08-06） ==== * PCはブランド->ナビ->電話+採用の順で正しいが、SPではナビがハンバーガー1個に潰れるため * そのまま表示すると「ブランド->ハンバーガー->お電話->採用」という中間にハンバーガーが挟まる * 押し間違えやすい並びになる。参照カンプ v2 の SP ヘッダーは「ブランド->お電話->採用->ハンバーガー」 * （ハンバーガーは常に右端）。HTMLの実装順は変えず、flexの order でSP時のみ視覚順を並べ替える * （.miyuki-header__row の直接の子: brand / nav / right の3つ）。 */ @media (max-width: 1349px) { .miyuki-header__row > .miyuki-header__brand { order: 1; } .miyuki-header__row > .miyuki-header__right { order: 2; } .miyuki-header__row > .miyuki-header__nav { order: 3; } } /* ==== ナビのハンバーガー化ブレークポイントを1349pxに揃える（2026-08-06） ==== * WordPress core/navigation は overlayMenu:"mobile" の場合、ハンバーガー<->インライン表示の * 切替を **600px固定**でCSSに直書きしている（wp-includes/blocks/navigation/style.css: * `.wp-block-navigation__responsive-container-open:not(.always-shown){display:none}` と * `.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open){display:block}` * がともに `@media (min-width:600px)`）。これは電話ブロック／採用ボタンの出し分け * ブレークポイント（1349px・本ファイル冒頭の方針参照）と一致していなかった。 * 600〜1349px帯では「電話ブロックは非表示（SP扱い）なのにナビだけ7項目インライン表示のまま」 * という宙ぶらりんの状態になり、900px幅でナビが折り返して縦に間延びする不具合として現れていた * （検証側の900px不具合報告を受けての実機再検証で判明。ブロックエディタの標準機能では * ブレークポイント値を変更できないため、CSSで明示的に上書きする）。 */ @media (max-width: 1349px) { .miyuki-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; } .miyuki-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none !important; } } /* ==== 採用ボタン: is-style-outline に依存しない自前スタイル ==== * 実機検証（wp-block-button-inline-css -> global-styles-inline-css の順で読み込まれ、 * どちらも :where() で詳細度0のため後勝ちする）で、is-style-outline を付けても * theme.json の core/button 既定（cta-green 塗り）に上書きされることを確認した。 * 明示的に背景・枠線・文字色を指定して確定させる。 */ .miyuki-btn--outline .wp-block-button__link { background-color: transparent; border: 1px solid var(--wp--preset--color--warm-wood); color: var(--wp--preset--color--warm-wood); } .miyuki-btn--outline .wp-block-button__link:hover { background-color: var(--wp--preset--color--warm-wood); color: var(--wp--preset--color--paper-cream); } /* ==== ナビゲーション現在地表示（roof-red + 下線2px）==== * WordPress core/navigation は現在のURLと一致するリンクに * current-menu-item クラスを自動付与する。ナビURLがプレースホルダの間は * 一致しないため発火しない（構造設計案 v2 承認後、実URL設定で有効化される）。 */ .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content, .wp-block-navigation .current-menu-parent > .wp-block-navigation-item__content { color: var(--wp--preset--color--roof-red); border-bottom: 2px solid var(--wp--preset--color--roof-red); padding-bottom: 2px; } /* ==== 追従バー: 画面下部に固定（カンプは枠内表現の absolute。実装は fixed が正） ==== * 【2026-08-06】電話ボタンが3行に折れる不具合を実機Playwright確認で検出。 * 原因は左テキストが1行のまま幅を占有し、ボタン側が min-content まで縮んでいたこと。 * ボタンは常に1行を維持（flex-shrink:0 + white-space:nowrap）し、左テキストは * SPでは短い2行文言（miyuki-sticky-cta__text-mobile）に切り替えて幅を空ける。 */ .miyuki-sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30); align-items: center; gap: var(--wp--preset--spacing--20); } .miyuki-sticky-cta .miyuki-sticky-cta__text-mobile { display: none; } .miyuki-sticky-cta__text, .miyuki-sticky-cta__text-mobile { margin: 0; flex-shrink: 1; min-width: 0; } .miyuki-sticky-cta .miyuki-sticky-cta__btn, .miyuki-sticky-cta .miyuki-sticky-cta__btn .wp-block-button__link { flex-shrink: 0; white-space: nowrap; } /* 追従バーの高さぶん、本文末尾が隠れないよう余白を確保する */ body { padding-bottom: var(--wp--custom--sticky-bar--height-desktop, 88px); } @media (max-width: 1349px) { .miyuki-sticky-cta { padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20); gap: var(--wp--preset--spacing--10); } .miyuki-sticky-cta .miyuki-sticky-cta__text { display: none; } .miyuki-sticky-cta .miyuki-sticky-cta__text-mobile { display: block; } body { padding-bottom: var(--wp--custom--sticky-bar--height-mobile, 72px); } } /* ==== 撮影待ちプレースホルダ（assets/img/placeholder-*.svg が無い汎用枠用） ==== * カンプの「撮影待ち」枠（paper-cream地・warm-wood破線・45度ハッチング）を再現。 * ハッチングはカンプ本体と同じ手法（8x8の斜線SVGをタイル状に敷く data URI）で再現する。 * CSSグラデーション関数は使わない（受入条件のグラデーション監査対応）。 * SVG内の色は warm-wood（#8A5A3B）固定値 — data URI は CSS カスタムプロパティを参照できないための * やむを得ない例外。値は theme.json の warm-wood トークンと同一（新規色ではない）。 */ .miyuki-placeholder-box { display: flex; align-items: center; justify-content: center; text-align: center; color: var(--wp--preset--color--warm-wood); background-color: var(--wp--preset--color--paper-cream); background-image: url("data:image/svg+xml;utf8,"); border: 2px dashed var(--wp--preset--color--warm-wood); padding: var(--wp--preset--spacing--20); } .miyuki-placeholder-box__inner { background-color: var(--wp--preset--color--paper-cream); padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20); } /* ==== data-table パターン: ヘッダー行を nursery-pink に ==== */ .wp-block-table thead { background-color: var(--wp--preset--color--nursery-pink); } /* ==== カテゴリタグ風ピル（news-list / news-grid パターンの静的デモ表示用） ==== */ .miyuki-tag-pill { display: inline-block; background-color: var(--wp--preset--color--nursery-pink); color: var(--wp--preset--color--ink); border-radius: 999px; padding: 4px 12px; font-size: var(--wp--custom--font-size--caption, 14px); }