/* * WordPress 版だけの微調整。 * 1) 320px 幅でヘッダーが横にはみ出す問題の解消。 * - 320〜479px: 三本線のみ（可視ラベルなし） * - 480〜1023px: MENU 文字 ＋ 三本線 * - 1024px 以上: デスクトップナビ * 360px 以上の現行の見た目は変えない。 * 2) WordPress 管理バー表示時に sticky ヘッダーが隠れないようにする。 * それ以外の再デザインは行っていません。 */ /* 横スクロールそのものを止める */ html, body { overflow-x: hidden; } /* ヘッダー内の要素が縮めるようにする（flex アイテムの既定 min-width:auto を解除） */ .mkm-header .shell { min-width: 0; } .mkm-header .mkm-header-inner > * { min-width: 0; } .mkm-header .mkm-wordmark { min-width: 0; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 359px) { .mkm-header .mkm-header-inner { gap: 0.25rem; padding-inline: 0.5rem; } .mkm-header .mkm-wordmark { font-size: 0.78rem; letter-spacing: 0.04em; } .mkm-header .mkm-lang a { min-width: 2rem; } } /* 管理バーぶんだけ sticky ヘッダーを下げる */ body.admin-bar .mkm-header { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar .mkm-header { top: 46px; } } /* WordPress 既定のブロック/添付画像がテーマの枠からはみ出さないように */ .mkm-content img, .mkm-content iframe { max-width: 100%; height: auto; } /* * 3) Reveal（出現アニメーション）の安全装置。 * 既定では本文が見えています。JS が Reveal を初期化できたときだけ * が付き、そのときだけ未表示の要素を隠します。 * JS が読み込めない・404・エラーで止まった場合は、全文が見えたままになります。 */ .reveal { opacity: 1; transform: none; } html[data-reveal-ready="true"] .reveal:not([data-shown="true"]) { opacity: 0; transform: translateY(18px); } /* * 4) PHP テンプレートだけで使うユーティリティ。 * site.css は React 版のビルド成果物で、PHP は走査対象に入っていません。 * React 版のソースには手を入れない方針のため、不足分だけをここで同じ値で補います。 * （Tailwind の --spacing は site.css の :root で定義済み） */ .py-10 { padding-block: calc(var(--spacing) * 10); } .py-20 { padding-block: calc(var(--spacing) * 20); } .pb-8 { padding-bottom: calc(var(--spacing) * 8); } @media (min-width: 48rem) { .md\:py-32 { padding-block: calc(var(--spacing) * 32); } .md\:text-\[2\.4rem\] { font-size: 2.4rem; } }