/* Theme Name: Libratech Theme URI: https://libratech.example.com Author: Libratech Author URI: https://libratech.example.com Description: シンプルで読みやすい、個人事業主・技術ブログ向けのブロックテーマ。日本語表示最適化済み。 Requires at least: 6.6 Tested up to: 7.0 Requires PHP: 7.0 Version: 1.0.0 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: libratech Tags: blog, portfolio, full-site-editing, block-patterns, wide-blocks, japanese */ /* ─── グローバル ─────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } /* ─── ヒーローの光オーバーレイ ──────────────── */ /* 背景グラデーション自体はブロック属性のインラインスタイルで設定 */ .lt-hero { position: relative; overflow: hidden; } .lt-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 65% 55% at 75% 35%, rgba(59,130,246,.18) 0%, transparent 65%), radial-gradient(ellipse 45% 65% at 15% 75%, rgba(14,165,233,.10) 0%, transparent 60%); pointer-events: none; z-index: 0; } .lt-hero > * { position: relative; z-index: 1; } /* ─── スクロールアニメーション ──────────────── */ /* lt-js クラスが に付いているときだけ非表示にする（JS無効時でも見える） */ .lt-js .lt-fade { opacity: 0; transform: translateY(30px); transition: opacity 0.7s cubic-bezier(.4,0,.2,1), transform 0.7s cubic-bezier(.4,0,.2,1); } .lt-js .lt-fade.lt-d1 { transition-delay: 0.08s; } .lt-js .lt-fade.lt-d2 { transition-delay: 0.18s; } .lt-js .lt-fade.lt-d3 { transition-delay: 0.28s; } .lt-js .lt-fade.lt-d4 { transition-delay: 0.38s; } .lt-fade.lt-in { opacity: 1 !important; transform: translateY(0) !important; } @media (prefers-reduced-motion: reduce) { .lt-js .lt-fade { opacity: 1; transform: none; transition: none; } } /* ─── カードホバー ──────────────────────────── */ .lt-card { transition: transform 0.25s ease, box-shadow 0.25s ease; } .lt-card:hover { transform: translateY(-5px); box-shadow: 0 14px 36px rgba(15,23,42,.12); } /* ─── ボタン ──────────────────────────────────── */ .wp-block-button__link { transition: opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .wp-block-button__link:hover { opacity: 0.88; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(59,130,246,.3); } /* ─── ナビゲーション ──────────────────────────── */ .wp-block-navigation a { transition: color 0.15s ease; letter-spacing: 0.01em; } /* ─── ご依頼の流れ ステップ番号バッジ ──────── */ .lt-step-badge { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: #eff6ff; color: #3b82f6; font-weight: 800; font-size: 0.8125rem; letter-spacing: 0.04em; margin-bottom: 1rem !important; flex-shrink: 0; } /* ステップ間のコネクター線（デスクトップ） */ @media (min-width: 600px) { .lt-steps .wp-block-column { position: relative; } .lt-steps .wp-block-column:not(:last-child)::after { content: ''; position: absolute; top: 1.375rem; right: -0.5rem; width: 1rem; height: 2px; background: #dbeafe; } } /* ─── コードブロック ──────────────────────────── */ pre, code { overflow-x: auto; } :not(pre) > code { background: #f1f5f9; color: #0f172a; padding: 0.15em 0.45em; border-radius: 4px; font-size: 0.875em; } /* ─── 引用・テーブル ──────────────────────────── */ blockquote { border-left: 4px solid var(--wp--preset--color--accent); padding-left: 1.25em; margin-left: 0; color: var(--wp--preset--color--contrast-2); } table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid var(--wp--preset--color--border); padding: 0.55em 0.85em; text-align: left; } thead th { background: var(--wp--preset--color--accent-2); font-weight: 600; } tbody tr:nth-child(even) { background: var(--wp--preset--color--base-2); } /* ─── アクセシビリティ ────────────────────────── */ :focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; } /* ─── モバイル対応 ───────────────────────────── */ @media (max-width: 599px) { /* ヒーローの縦パディングを縮小 */ .lt-hero { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; } /* 各セクションの縦パディングを縮小 */ .lt-section-lg { padding-top: 3rem !important; padding-bottom: 3rem !important; } /* カラム折り返し時の間隔調整 */ .wp-block-columns { gap: 1.5rem !important; } /* お問い合わせページ フォームカードのパディング縮小 */ .wp-block-group[style*="padding:2.5rem"] { padding: 1.5rem !important; } /* ナビゲーションのラップ */ .wp-block-navigation.is-horizontal { flex-wrap: wrap !important; gap: 0.75rem !important; } }