/* Theme Name: ぎふ就労支援センター LP C228 Theme URI: Author: ぎふ就労支援センター Description: 「ぎふ就労支援センター 利用者募集LP」専用のWordPressテーマ（C228）。スマートフォンの「利用者の声」アコーディオンの開閉不具合を修正し、SPで役割を失っていたスライダー装飾を非表示にし、SP「1日の流れ」カルーセルの現在場面表示（SCENE番号・時刻・進行ライン）を実表示カードへ同期させています。お問い合わせページにもトップページと同じヘッダー・モバイルメニュー・フッターを表示します。LP本体（HTML/CSS/JS/画像）はテーマ内に同梱し、front-page.php から template-parts/lp-content.php を読み込みます。お問い合わせは固定ページ（スラッグ contact）＋ Contact Form 7 を想定しています。 Version: C228 Requires at least: 6.0 Tested up to: 6.8 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: gifu-lp-theme Tags: one-column, custom-menu, landing-page */ /*! * このファイルは自動生成です。編集しないでください。 * 編集する場合は src/ を編集し、node tools/build-theme.js を実行してください。 * * 生成元: theme-base/style.css */ /* * このファイルは「WordPress固定部分」です。 * LPのデザインCSSは assets/css/lp.css にあります。ここには書かないでください。 * * ここに置くのは次のものだけです。 * 1. テーマヘッダー（上のコメント。WordPressがテーマ情報として読みます） * 2. 管理バー表示時の固定・スティッキー要素の位置補正 * 3. お問い合わせ固定ページなど、LP以外のページの最小限のスタイル */ /* ------------------------------------------------------------------ * * 1. 管理バー（wp_admin_bar）表示時の補正 * ログイン中は に margin-top が入り、画面上部32px（狭い幅では46px）が * 管理バーで覆われます。position:fixed のドロワーだけがその影響を受けるため、 * ここで補正します。LP側のCSSには手を入れません。 * ------------------------------------------------------------------ */ @media screen and (min-width: 783px) { body.admin-bar .mnav-panel { top: 32px; height: calc(100vh - 32px); height: calc(100dvh - 32px); } } @media screen and (min-width: 601px) and (max-width: 782px) { body.admin-bar .mnav-panel { top: 46px; height: calc(100vh - 46px); height: calc(100dvh - 46px); } } /* 600px以下では管理バーが position:absolute になりスクロールで流れるため補正しない */ /* #flow のスティッキーステージは top を clamp() で持っており、 JS（lp.js）は getComputedStyle から実際の top を読むため、 ここで top を足すだけでスクロール計算もそのまま追従します。 */ @media screen and (min-width: 783px) { body.admin-bar .flow-stage-shell { top: calc(clamp(0px, 8vh, 84px) + 32px); } } /* ------------------------------------------------------------------ * * 2. LP以外のページ（index.php フォールバック専用） * C225以降、お問い合わせ固定ページはトップページと同じヘッダー・フッター * （.gsh-header / #site-footer）を使うため、ここの .gifu-basic-* は * index.php のフォールバック表示だけで使われます。 * フォントと配色はLPと同じ値を使用しています。 * ------------------------------------------------------------------ */ .gifu-basic { margin: 0; background: #ffffff; color: #0d2b52; font-family: 'Noto Sans JP', sans-serif; -webkit-font-smoothing: antialiased; } .gifu-basic a { color: #1a5fd0; } .gifu-basic-header { border-bottom: 1px solid rgba(13, 43, 82, 0.08); } .gifu-basic-header-inner { max-width: 1320px; margin: 0 auto; padding: 22px 32px; display: flex; align-items: center; gap: 14px; } .gifu-basic-header-inner img { width: 40px; height: 40px; flex: 0 0 auto; object-fit: contain; } .gifu-basic-home { font-size: 19px; font-weight: 800; letter-spacing: 0.04em; color: #0d2b52; text-decoration: none; } .gifu-basic-main { max-width: 820px; margin: 0 auto; padding: 56px 24px 88px; } .gifu-basic-title { margin: 0 0 32px; font-size: clamp(28px, 4vw, 38px); font-weight: 800; line-height: 1.5; letter-spacing: 0.02em; } .gifu-basic-content { font-size: 16px; font-weight: 500; line-height: 1.9; letter-spacing: 0.02em; } .gifu-basic-content p { margin: 0 0 1.4em; } .gifu-basic-content img { max-width: 100%; height: auto; } /* Contact Form 7 未導入でもレイアウトが崩れないよう、素のフォーム要素にも最低限あてる */ .gifu-basic-content input[type='text'], .gifu-basic-content input[type='email'], .gifu-basic-content input[type='tel'], .gifu-basic-content input[type='url'], .gifu-basic-content input[type='date'], .gifu-basic-content input[type='number'], .gifu-basic-content select, .gifu-basic-content textarea { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid rgba(13, 43, 82, 0.22); border-radius: 8px; font-family: inherit; font-size: 16px; color: inherit; background: #ffffff; } .gifu-basic-content textarea { min-height: 180px; } .gifu-basic-content input[type='submit'], .gifu-basic-content button[type='submit'] { min-height: 56px; padding: 0 34px; border: 0; border-radius: 10px; background: linear-gradient(95deg, #1a5fd0, #2f80e0); color: #ffffff; font-family: inherit; font-size: 16px; font-weight: 700; letter-spacing: 0.05em; cursor: pointer; } .gifu-basic-footer { border-top: 1px solid rgba(13, 43, 82, 0.08); background: #071827; } .gifu-basic-footer-inner { max-width: 1320px; margin: 0 auto; padding: 26px 32px; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.7); } .gifu-basic-back { display: inline-block; margin-top: 40px; font-size: 15px; font-weight: 700; color: #1a5fd0; } /* スクリーンリーダー専用テキスト（LP側と同じ挙動） */ .gifu-screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ------------------------------------------------------------------ * * 3. お問い合わせ固定ページ（C225） * ヘッダー・フッターはトップページと同じものを使うため、ここでは * 本文（フォーム）まわりの最小限の体裁だけを整えます。 * フォームの項目・文章・送信処理には一切関与しません。 * ------------------------------------------------------------------ */ .gifu-contact-page { background: #ffffff; color: #0d2b52; font-family: 'Noto Sans JP', sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* ヘッダーは position:fixed（高さは --gsh-h。トップページと同じ値）なので、 その分をここで確保する。トップページ側の .page-root には手を入れていない。 */ .gifu-contact-main { max-width: 820px; margin: 0 auto; padding: calc(var(--gsh-h, 70px) + 40px) 24px 88px; } .gifu-contact-title { margin: 0 0 32px; font-size: clamp(28px, 4vw, 38px); font-weight: 800; line-height: 1.5; letter-spacing: 0.02em; color: #0d2b52; } .gifu-contact-content { font-size: 16px; font-weight: 500; line-height: 1.9; letter-spacing: 0.02em; } .gifu-contact-content p { margin: 0 0 1.4em; } .gifu-contact-content a { color: #1a5fd0; } .gifu-contact-content img { max-width: 100%; height: auto; } /* Contact Form 7 が未導入でも崩れないよう、素のフォーム要素にも最低限あてる。 CF7自身が出力するクラス（.wpcf7-form 等）には触れていません。 */ .gifu-contact-content input[type='text'], .gifu-contact-content input[type='email'], .gifu-contact-content input[type='tel'], .gifu-contact-content input[type='url'], .gifu-contact-content input[type='date'], .gifu-contact-content input[type='number'], .gifu-contact-content select, .gifu-contact-content textarea { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid rgba(13, 43, 82, 0.22); border-radius: 8px; font-family: inherit; font-size: 16px; color: inherit; background: #ffffff; } .gifu-contact-content textarea { min-height: 180px; } .gifu-contact-content input[type='submit'], .gifu-contact-content button[type='submit'] { min-height: 56px; padding: 0 34px; border: 0; border-radius: 10px; background: linear-gradient(95deg, #1a5fd0, #2f80e0); color: #ffffff; font-family: inherit; font-size: 16px; font-weight: 700; letter-spacing: 0.05em; cursor: pointer; } /* お問い合わせページはLPのCSSも読み込むため、.page-root の min-width:1180px を 受けない代わりに、ヘッダー幅の基準だけを合わせておく。 */ .gifu-contact-page .gsh-header, .gifu-contact-page #site-footer { min-width: 0; }