/*
 * First & Effect - テーマテンプレート用補助CSS
 * Version: 1.7.4
 *
 * style.css に含めるほどではない、テンプレートPHP側だけで使う
 * ユーティリティクラスをまとめたファイル。
 * SEO遵守のため、HTML内のインラインstyle="..."を排除してこちらに移しています。
 */

/* ---- 404 ページ ---- */
.fe-404 {
    padding-top: 160px;
    text-align: center;
}
.fe-404__num {
    font-size: 120px;
    font-weight: 800;
    color: var(--color-primary, #1e6eff);
    line-height: 1;
    letter-spacing: -.02em;
}
.fe-404__back {
    margin-top: 32px;
}

/* ---- フロントページ未設定時のセットアップ案内 ---- */
.fe-front-setup {
    padding-top: 160px;
}
.fe-front-setup__inner {
    text-align: center;
}
.fe-front-setup__title {
    font-size: 28px;
    margin-bottom: 16px;
}
.fe-front-setup__text {
    color: var(--color-text-light, #5a6a7a);
    line-height: 1.9;
}

/* ---- 通常記事一覧の空状態 ---- */
.fe-index__back {
    text-align: center;
    margin-top: 32px;
}

/* ---- page.php の見出し ---- */
.fe-page__title {
    font-size: 32px;
    margin-bottom: 32px;
}

/* ---- フッター左カラム住所表示 ---- */
.site-footer__address {
    font-size: 12px;
    opacity: .6;
    line-height: 1.8;
}

/* ---- v1.4.1: フッター内のあらゆるウィジェット見出しを白色に ----
 * WordPress標準ウィジェット (アーカイブ・カテゴリー・最近の投稿 等) は、
 * register_sidebar の before_title 設定にかかわらず、
 * 内部で <h2 class="widget-title"> や <h3> 等を出力する場合がある。
 * 背景が濃紺(#0a2540)なので、見出し色をデフォルトの濃紺のままだと
 * 見出しテキストが見えなくなる。
 * → フッター内のあらゆる見出し要素を白色にして可読性を確保。
 */
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6,
.site-footer .widget-title,
.site-footer .widgettitle {
    color: #fff;
    font-size: 13px;
    margin: 0 0 16px;
    letter-spacing: .05em;
    font-weight: 700;
}
/* WordPress標準ウィジェット内のリンクも白系に統一 */
.site-footer .widget a {
    color: rgba(255,255,255,.8);
    text-decoration: none;
}
.site-footer .widget a:hover {
    color: #fff;
    opacity: 1;
}
/* WordPress標準ウィジェット内のテキスト全般 (「表示するアーカイブはありません」等) */
.site-footer .widget {
    color: rgba(255,255,255,.8);
    font-size: 13px;
    line-height: 1.8;
}

/* ---- v1.5.0: [first_effect_cta] ショートコード用ラッパー ----
 * ショートコードで本文中に挿入されたCTAボタンを左/中央/右に整列する。
 * 中身のメニュー <ul> はメニュー位置に応じた装飾クラス
 * (.pc-fixed-bar__menu 等) を持つため、見た目はそのまま流用される。
 */
.fe-cta-shortcode {
    margin: 24px 0;
}
.fe-cta-shortcode__menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.fe-cta-shortcode__menu > li {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
}
/* 中身のulがインラインなので、外側の整列はテキストアラインで制御する */
.fe-cta-shortcode--left {
    text-align: left;
}
.fe-cta-shortcode--center {
    text-align: center;
}
.fe-cta-shortcode--right {
    text-align: right;
}

/* ショートコード内では、各メニュー位置の専用クラスが display:flex を持つので、
 * text-align を効かせるために inline-flex に上書きする。
 * これで .fe-cta-shortcode--left/center/right の整列が機能する。
 */
.fe-cta-shortcode .pc-fixed-bar__menu,
.fe-cta-shortcode .header-cta-group__menu,
.fe-cta-shortcode .fixed-cta__menu {
    display: inline-flex;
}

/* ショートコード内の fixed-cta__menu はモバイル追従バーの flex:1 (横幅均等割) を
 * 引き継ぐと、横並びでなく1個ずつ伸びすぎてしまう。本文内では均等割を解除。
 */
.fe-cta-shortcode .fixed-cta__menu > li {
    flex: none;
}

/* ---- 管理画面メタボックス側（公開ページに影響しないが念のため）---- */
/* Admin CSS は wp_enqueue_style で admin 側に登録しているため別ファイル */