/*
Theme Name: Enecle Business
Author: Enecle
Description: エネクル企業向けLPガス導入ソリューションサイトのオリジナルテーマ。トップページ・コラム一覧・コラム詳細のみWordPress化し、その他のページ（お問い合わせ・資料請求等）はサイトルートの静的HTML/PHPをそのまま利用するハイブリッド構成。
Version: 1.0.0
Requires PHP: 7.4
Text Domain: eneclebusiness
*/

/* =========================================================
   下層ページ（コラム一覧・コラム詳細）共通スタイル
   ※トップページは front-page.php が index.html 由来の
     スタイルを自前で持つため、このCSSは読み込まない
   ========================================================= */

/* デフォルト（モバイル含む）のルートフォントサイズ */
html { font-size: 16px; }

body {
    font-family: 'Noto Sans JP', sans-serif;
    overflow-x: hidden;
    line-height: 1.8;
    background-color: #f8fafc; /* slate-50 */
}

/* Poppins 欧文・数字用フォント */
.font-din {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
}

/* 装飾テキスト（COLUMN見出し装飾） */
.bg-text {
    position: absolute;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 10rem;
    letter-spacing: -0.02em;
    line-height: 1;
    user-select: none;
    z-index: 0;
    white-space: nowrap;
    text-transform: uppercase;
    pointer-events: none;
}
@media (max-width: 1023px) {
    .bg-text { font-size: 4.5rem; top: 0; max-width: 100%; overflow: hidden; opacity: 0.05; }
}

/* --- 721px以上：index準拠レイアウト（1280pxで拡大停止） --- */
@media (min-width: 721px) {
    html {
        font-size: 1.111111vw; /* 1440px時に16pxとなる比率 */
    }
    .container {
        max-width: 73.75rem !important;
        margin-left: auto;
        margin-right: auto;
        padding-left: 1.875rem;
        padding-right: 1.875rem;
    }
    #main-header .container {
        max-width: 90rem !important;
        padding-left: 3.75rem;
        padding-right: 0 !important;
        margin: 0 auto;
    }
    #main-header {
        height: 6.875rem;
        min-height: 6.875rem;
    }
    .logo-container {
        width: 16.875rem;
        margin-right: 4.375rem;
        flex-shrink: 0;
    }
    .header-logo {
        width: 100% !important;
        height: auto !important;
    }
    .nav-link { font-size: 1rem; }
    .nav-container { gap: 1.875rem; }
    .header-btn-group { margin-left: auto; height: 100%; display: flex; }
    .header-btn { width: 11.25rem; font-size: 0.9375rem; }
    .header-btn i { width: 1.375rem; height: 1.375rem; max-width: 1.375rem; max-height: 1.375rem; }

    .desktop-nav { display: flex; }
    .mobile-toggle-btn { display: none; }
}

/* 720px以下モバイル表示 */
@media (max-width: 720px) {
    html { font-size: 16px !important; }
    .desktop-nav { display: none; }
    .mobile-toggle-btn { display: flex; }
    #main-header { height: 4.375rem; min-height: 4.375rem; }
    .logo-container { width: 11.25rem !important; }
}

/* ロゴの歪み防止 */
.header-logo, .footer-logo {
    width: auto;
    object-fit: contain;
}
.footer-logo {
    filter: brightness(0) invert(1);
}
.bg-accent-orange { background-color: #F25A00 !important; }

/* =========================================================
   コラム詳細：記事本文（the_content 出力に適用）
   ========================================================= */
.article-content h2 {
    font-size: 1.8rem;
    font-weight: 900;
    color: #0f172a;
    border-left: 0.375rem solid #005BAC;
    padding-left: 1rem;
    margin-top: 4rem;
    margin-bottom: 2rem;
    line-height: 1.4;
}
.article-content h3 {
    font-size: 1.4rem;
    font-weight: 900;
    color: #0f172a;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 0.125rem solid #e2e8f0;
    line-height: 1.5;
}
.article-content p {
    margin-bottom: 2rem;
    color: #334155;
    font-size: 1.125rem;
    line-height: 2.2;
    font-weight: 500;
}
.article-content strong {
    color: #005BAC;
    font-weight: 900;
    background: linear-gradient(transparent 70%, #dbeafe 70%);
}
.article-content img {
    border-radius: 0.75rem;
    margin: 2.5rem 0;
    width: 100%;
    height: auto;
    box-shadow: 0 0.25rem 0.375rem -0.0625rem rgba(0, 0, 0, 0.05), 0 0.125rem 0.25rem -0.0625rem rgba(0, 0, 0, 0.03);
}
.article-content ul {
    list-style-type: disc;
    margin-left: 1.5rem;
    margin-bottom: 2rem;
    color: #334155;
    font-size: 1.125rem;
    line-height: 2.2;
    font-weight: 500;
}
.article-content li {
    margin-bottom: 0.5rem;
}
.article-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 2rem;
    font-size: 1rem;
    background-color: white;
}
.article-content th, .article-content td {
    border: 0.0625rem solid #cbd5e1;
    padding: 1rem;
    text-align: left;
}
.article-content th {
    background-color: #f1f5f9;
    font-weight: 900;
    color: #0f172a;
}

/* =========================================================
   ページャー（WP-PageNavi）
   wp_pagenavi() の出力クラス（.wp-pagenavi / .pages / .current /
   .page / .previouspostslink / .nextpostslink / .first / .last /
   .extend）に対応。未導入時の paginate_links フォールバック
   （.page-numbers）も同じ見た目になる。
   ========================================================= */
.wp-pagenavi {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin-top: 4rem;
    font-weight: 700;
}
.wp-pagenavi a,
.wp-pagenavi span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3rem;
    height: 3rem;
    padding: 0 0.75rem;
    background: #ffffff;
    border: 0.0625rem solid #e2e8f0;
    border-bottom: 0.25rem solid #005BAC;
    color: #005BAC;
    font-size: 1rem;
    text-decoration: none;
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;
}
.wp-pagenavi a:hover {
    background: #005BAC;
    border-color: #005BAC;
    color: #ffffff;
}
.wp-pagenavi span.current {
    background: #005BAC;
    border-color: #005BAC;
    color: #ffffff;
}
/* 「1 / 2」の総ページ数表示と「…」は枠なしテキストで表示 */
.wp-pagenavi span.pages,
.wp-pagenavi span.extend,
.wp-pagenavi span.dots {
    background: transparent;
    border: none;
    box-shadow: none;
    color: #94a3b8;
    font-family: 'Poppins', sans-serif;
}
@media (max-width: 720px) {
    .wp-pagenavi span.pages { display: none; }
    .wp-pagenavi a,
    .wp-pagenavi span {
        min-width: 2.75rem;
        height: 2.75rem;
        font-size: 0.9375rem;
    }
}