/*
Theme Name: Lightning
Text Domain: lightning
Theme URI: https://lightning.vektor-inc.co.jp/en/
Description: Lightning is a very simple & easy to customize theme which is based on the Bootstrap. It is also very friendly with custom post types and custom taxonomies. When you add a new one, the breadcrumbs will be adjusted and posts will look beautifully without editing or adding a template files.
Author: Vektor,Inc.
Author URI: https://www.vektor-inc.co.jp
Version: 15.35.3
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 7.4
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

Lightning WordPress theme, Copyright (C) 2015-2026 Vektor,Inc.
Lightning WordPress theme is licensed under the GPL.

Lightning WordPress Theme bundles the following third-party resources:

Font Awesome icon font, Copyright 2012 Fonticons, Inc.
its fonts are licensed under the terms of the SIL OFL License 1.1, and its code is licensed under the terms of the MIT license
Source: https://fontawesome.com/

Bootstrap framework, Copyright 2011 Bootstrap Authors and Twitter, Inc.
Bootstrap is licensed under the terms of the MIT license
Source: https://getbootstrap.com/

CSS Simple Tree Shaking
CSS Simple Tree Shaking is licensed under the terms of the GNU General Public License v2 license
Source: https://celtislab.net/
*/　


/*==============================
 共通
==============================*/

body {
    font-family: "Zen Kaku Gothic New", sans-serif;
}


.site-body{
    padding-top:0 !important;
}


/* 全固定ページの大きなページヘッダー（緑の帯）を非表示にする */
.page-header_pageTitle,
.page-header {
    display: none !important;
}


/*==============================
 ヘッダー
==============================*/

/* ① メニュー全体を縦並び（2段）にし、日本語の文字サイズを16pxにする */
.site-header nav ul li a,
.global-nav-list li a {
    display: flex !important;
    flex-direction: column !important; 
    align-items: center !important;    
    justify-content: center !important;
    line-height: 1.3 !important;
    font-size: 16px !important;       /* 上の日本語を16pxに設定 */
    font-weight: bold !important;     /* 文字をはっきり太字に */
}

/* ② 下段のローマ字（HOMEなど）の文字サイズを12pxにする */
.gnav-english {
    display: block !important;         
    font-size: 12px !important;       /* 下のローマ字を12pxに設定 */
    color: #3a844f !important;        /* 文字を緑色に */
    font-weight: bold !important;     
    text-transform: uppercase !important; 
    margin-top: 5px !important;       /* 上下の文字が重ならないよう隙間を調整 */
    letter-spacing: 0.05em;           /* ローマ字の文字間隔を少し広げておしゃれに */
}

/* ③ お問い合わせボタンの形と文字サイズのキープ（ボタンの文字も16pxになります） */
.site-header nav ul li.gnav-btn a,
.global-nav-list li.gnav-btn a,
.site-header nav ul li a:has(.fa-envelope),
.global-nav-list li a:has(.fa-envelope) {
    flex-direction: row !important;      
    height: auto !important;             
    min-height: 44px !important;         
    padding: 10px 24px !important;       
    align-self: center !important;       
    border-radius: 6px !important;       
    background-color: #157d4c !important; 
    color: #ffffff !important;           
    font-size: 16px !important;          /* ボタン内の文字も16pxで統一 */
}

/* ヘッダー内のリスト全体の高さを中央で揃える */
.site-header nav ul {
    align-items: center !important;      
}

/* ④ メニューごとの左右の間隔（20px） */
.site-header nav ul li,
.global-nav-list li {
    margin-left: 20px !important;  
    margin-right: 20px !important; 
}
.site-header nav ul li:first-child { margin-left: 0 !important; }

/* ⑤ お問い合わせボタンの左側だけ隙間をさらに広げる（50px） */
.site-header nav ul li.gnav-btn,
.global-nav-list li.gnav-btn,
.site-header nav ul li:has(.fa-envelope),
.global-nav-list li:has(.fa-envelope) {
    margin-left: 50px !important; 
}





.global-nav-list > li:last-child > a{
    background:#008A3D;
    color:#fff !important;
    padding:12px 28px;
    border-radius:6px;
    font-weight:700;
}

.global-nav-list > li:last-child > a:hover{
    background:#006F31;
}


/* メニュー1つずつの左右の間隔（隙間）を広げる */
.site-header nav ul li,
.global-nav-list li {
    margin-left: 10px !important;  /* 左側の隙間 */
    margin-right: 20px !important; /* 右側の隙間 */
}

/* 一番最初と最後の余白が浮かないようにする調整 */
.site-header nav ul li:first-child { margin-left: 0 !important; }


/* お問い合わせボタンの左側だけ隙間をさらに広げる */
.site-header nav ul li.gnav-btn,
.global-nav-list li.gnav-btn,
.site-header nav ul li:has(.fa-envelope),
.global-nav-list li:has(.fa-envelope) {
    margin-left: 40px !important; /* 他のメニュー（20px）よりさらに広い隙間をあける */
}


/* ヘッダーの中身を左右の端まで広げる */
.site-header .container {
    max-width: 100% !important;     /* 横幅の制限を解除して100%にする */
    padding-left: 4% !important;    /* 左端にほんの少しだけ余白を作る（ロゴが壁にくっつきすぎないように） */
    padding-right: 4% !important;   /* 右端にほんの少しだけ余白を作る（ボタンが壁にくっつきすぎないように） */
}

/* ロゴとナビゲーションを左右両端に引っ張り合う */
.site-header-container {
    justify-content: space-between !important;
}



/* ==========================================================
   ABOUTセクション（親がカラムブロックの場合の完全再現）
========================================================== */
@media (min-width: 992px) {
    /* 1. 一番上の親「カラム」を画面の左右100%いっぱいに強制拡大 */
    .wp-block-columns.about-section-columns {
        display: flex !important;
        align-items: center !important;
        width: 100vw !important; /* 画面の横幅ぴったりに固定 */
        max-width: 100vw !important;
        position: relative !important;
        left: 50% !important;
        transform: translateX(-50%) !important; /* 中央寄せの魔法 */
        margin: 0 !important;
        gap: 0 !important; /* カラム間の余計な隙間を排除 */
    }

    /* 2. 左側の子「カラム」（画像側）：左の画面端に密着 */
    .about-section-columns > .wp-block-column:first-child {
        flex: 0 0 40% !important; 
        max-width: 40% !important;
        padding: 0 !important;
        margin: 0 -5% 0 0 !important; /* 右側にマイナスをかけてテキストボックスに重ねる */
        position: relative !important;
        z-index: 10 !important; /* 写真を上に重ねる */
			 /* 斜め配置 */
    transform: translateY(150px);
    }

    /* 画像の中のグループやブロックの制限を解除 */
    .about-section-columns > .wp-block-column:first-child .wp-block-group {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 写真自体のサイズと角丸（見本通り右側だけ丸く） */
    .about-section-columns img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        display: block !important;
        border-radius: 0 20px 20px 0 !important; 
    }

    /* 3. 右側の子「カラム」（テキスト側）：右の画面端に密着 */
    .about-section-columns > .wp-block-column:last-child {
        flex: 0 0 64% !important; /* 重なる分を含めて多めに確保 */
        max-width: 64% !important;
        padding: 0 !important;
        margin: 0 !important;
        position: relative !important;
        z-index: 1 !important;
			 /* 少し上へ */
    transform: translateY(-50px);
    }

    /* 4. テキストの中の「グループ」ブロック：ここを薄グレーの座布団にして右端へ伸ばす */
    .about-section-columns > .wp-block-column:last-child .wp-block-group {
        background: #f7f9f6 !important; /* 見本の薄いグレーグリーン */
        /* padding: 上 / 右(画面端までの余白) / 下 / 左(写真と被らないための広い余白) */
        padding: 60px 18% 60px 19% !important; 
        border-radius: 20px 0 0 20px !important; /* 見本通り、左側の角だけを丸くする */
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
}

/* ==========================================================
   スマホ向けのレスポンシブ設定（安全に縦並びにする）
========================================================== */
@media (max-width: 991px) {
    .wp-block-columns.about-section-columns {
        display: block !important;
        width: auto !important;
        max-width: 100% !important;
        left: auto !important;
        transform: none !important;
        margin: 0 0 40px 0 !important;
        padding: 0 20px !important; /* スマホでは左右に安全な余白を作る */
    }
    
    .about-section-columns > .wp-block-column {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 24px 0 !important;
    }

    /* スマホでは写真のすべての角を丸くする */
    .about-section-columns img {
        width: 100% !important;
        height: auto !important;
        border-radius: 20px !important;
    }

    /* スマホではテキストのグループを通常の箱に戻す */
    .about-section-columns > .wp-block-column:last-child .wp-block-group {
        background: #f7f9f6 !important;
        padding: 40px 24px !important;
        border-radius: 20px !important;
    }
}



/* ==========================================================
   SERVICEセクション（左右逆転・全幅完全再現）
========================================================== */
@media (min-width: 992px) {
    /* 1. 一番上の親「カラム」を画面の左右100%いっぱいに強制拡大 */
    .wp-block-columns.service-section-columns {
        display: flex !important;
        align-items: center !important;
        width: 100vw !important; /* 画面の横幅ぴったりに固定 */
        max-width: 100vw !important;
        position: relative !important;
        left: 50% !important;
        transform: translateX(-50%) !important; /* 中央寄せの魔法 */
        margin: 0 !important;
        gap: 0 !important; /* カラム間の余計な隙間を排除 */
    }

    /* 2. 左側の子「カラム」（テキスト側）：左の画面端に密着 */
    .service-section-columns > .wp-block-column:first-child {
        flex: 0 0 64% !important; /* ABOUTのlast-childと同じ比率 */
        max-width: 64% !important;
        padding: 0 !important;
        margin: 0 !important;
        position: relative !important;
        z-index: 1 !important;
			 /* 少し上へ */
    transform: translateY(-50px);
    }

    /* 3. テキストの中の「グループ」ブロック：ここを薄グレーの座布団にして左端へ伸ばす */
    .service-section-columns > .wp-block-column:first-child .wp-block-group {
        background: #f7f9f6 !important; 
        /* 💡 逆転：左右の余白を逆（上 / 右 / 下 / 左）に設定 */
        padding: 60px 19% 60px 18% !important; 
        /* 💡 逆転：右側の角だけを丸くする（10px） */
        border-radius: 0 20px 20px 0 !important; 
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* 4. 右側の子「カラム」（画像側）：右の画面端に密着 */
    .service-section-columns > .wp-block-column:last-child {
        flex: 0 0 40% !important; /* ABOUTのfirst-childと同じ比率 */
        max-width: 40% !important;
        padding: 0 !important;
        /* 💡 逆転：左側にマイナスをかけてテキストボックスに重ねる */
        margin: 0 0 0 -5% !important; 
        position: relative !important;
        z-index: 10 !important; /* 写真を上に重ねる */
			/* 下へ */
    transform: translateY(150px);
    }

    /* 画像の中のグループやブロックの制限を解除 */
    .service-section-columns > .wp-block-column:last-child .wp-block-group {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 写真自体のサイズと角丸 */
    .service-section-columns img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        display: block !important;
        /* 💡 逆転：写真の左側だけ丸くする（10px） */
        border-radius: 20px 0 0 20px !important; 
    }
}

/* ==========================================================
   スマホ向けのレスポンシブ設定（安全に縦並びにする）
========================================================== */
@media (max-width: 991px) {
    .wp-block-columns.service-section-columns {
        display: block !important;
        width: auto !important;
        max-width: 100% !important;
        left: auto !important;
        transform: none !important;
        margin: 0 0 40px 0 !important;
        padding: 0 20px !important; /* スマホでは左右に安全な余白を作る */
    }
    
    .service-section-columns > .wp-block-column {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 24px 0 !important;
    }

    /* 💡 スマホ対応：スマホでは「写真が上、テキストが下」のほうが読みやすいため、順番を入れ替える設定 */
    @media (max-width: 991px) {
        .wp-block-columns.service-section-columns {
            display: flex !important;
            flex-direction: column !important;
        }
        .service-section-columns > .wp-block-column:first-child { order: 2; } /* テキストを下へ */
        .service-section-columns > .wp-block-column:last-child { order: 1; }  /* 写真を上へ */
    }

    /* スマホでは写真のすべての角を丸くする */
    .service-section-columns img {
        width: 100% !important;
        height: auto !important;
        border-radius: 20px !important;
    }

    /* スマホではテキストのグループを通常の箱に戻す */
    .service-section-columns > .wp-block-column:first-child .wp-block-group {
        background: #f7f9f6 !important;
        padding: 40px 24px !important;
        border-radius: 20px !important;
    }
}


/* ==========================================================
   ABOUT / SERVICE / NEWS共通：ボタン完全統一版（38px・右寄せ）
========================================================== */
@media (min-width: 992px) {
    /* 1. ボタンを包む親ブロック：テキストボックスの右端へ配置 */
    .about-section-columns .wp-block-buttons,
    .service-section-columns .wp-block-buttons,
    .news-section-columns .wp-block-buttons,
    .about-section-columns .vk_buttons,
    .service-section-columns .vk_buttons,
    .news-section-columns .vk_buttons {
        display: flex !important;
        justify-content: flex-end !important; /* 絶対に右寄せ */
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 40px !important; /* 文章との隙間 */
        clear: both !important;
    }

    /* 2. ボタンの土台：横幅を184pxに完全固定 */
    .about-section-columns .wp-block-button,
    .service-section-columns .wp-block-button,
    .news-section-columns .wp-block-button,
    .about-section-columns .vk_button,
    .service-section-columns .vk_button,
    .news-section-columns .vk_button {
        display: block !important;
        width: 184px !important; /* 横幅184px固定 */
        max-width: 184px !important;
        margin-left: auto !important; /* 左側に自動で最大の余白を作って右端へ押し出す */
        margin-right: 0 !important;
    }

    /* 3. ボタンのリンク（座布団）：縦幅を38pxに固定 */
    .about-section-columns .vk_button_link,
    .service-section-columns .vk_button_link,
    .news-section-columns .vk_button_link,
    .about-section-columns .wp-block-button__link,
    .service-section-columns .wp-block-button__link,
    .news-section-columns .wp-block-button__link {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important; /* 文字だけを完全に中央寄せ */
        
        width: 100% !important;  
        height: 38px !important;  /* ボタンの縦幅を38pxに固定 */
        padding: 0 !important;    /* テーマ独自の余白を完全リセット */
        position: relative !important; /* 矢印を右端に飛ばすための絶対基準 */
        
        font-size: 14px !important; /* 文字サイズ調整 */
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    /* 4. 中のテキスト（More）配置を中央にロック */
    .about-section-columns .vk_button_link_txt,
    .service-section-columns .vk_button_link_txt,
    .news-section-columns .vk_button_link_txt {
        display: inline-block !important;
        text-align: center !important;
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
    }

    /* 5. 矢印アイコンを右端ポジションにピン留め */
    .about-section-columns .vk_button_link .vk_button_link_icon,
    .service-section-columns .vk_button_link .vk_button_link_icon,
    .news-section-columns .vk_button_link .vk_button_link_icon,
    .about-section-columns .vk_button_link svg,
    .service-section-columns .vk_button_link svg,
    .news-section-columns .vk_button_link svg,
    .about-section-columns .vk_button_link i,
    .service-section-columns .vk_button_link i,
    .news-section-columns .vk_button_link i {
        position: absolute !important; /* 文字の並びから完全に切り離す */
        right: 18px !important;        /* ボタンの右端から18pxの場所に固定 */
        left: auto !important;         
        top: 50% !important;           /* 上下中央 */
        transform: translateY(-50%) !important; 
        margin: 0 !important;
        padding: 0 !important;
    }
}







/* 「最新の投稿」ブロックの上下のズレを完璧に直すCSS */
.wp-block-latest-posts li {
    display: flex !important;
    flex-direction: row !important; 
    align-items: center !important; 
    align-content: center !important;
    flex-wrap: wrap !important;
    padding: 14px 0 !important;
    border-bottom: 1px solid #e0e0e0 !important;
    list-style: none !important;
}

/* 日付の調整 */
.wp-block-latest-posts li time {
    order: 1 !important;
    margin-right: 30px !important;
    color: #666666 !important;
    font-size: 0.95rem !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* タイトルの調整（位置を微調整） */
.wp-block-latest-posts li a {
    order: 2 !important;
    color: #333333 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    flex: 1 !important;
    line-height: 1.4 !important; 
    display: inline-block !important;
    
    /* ↓ ここでテキストだけを少し下に押し下げています */
    position: relative !important;
    top: 5px !important; /* ← まだズレる場合は1px〜3pxで調整してください */
}

/* マウスを乗せたときのエフェクト */
.wp-block-latest-posts li a:hover {
    opacity: 0.7;
}



/* 見出しの左側に太い緑の縦線をつけるCSS */
.green-left-line {
    border-left: 8px solid #3a844f !important; /* 左線の太さと色（緑） */
    padding-left: 15px !important;            /* 線と文字の間の隙間 */
    background: transparent !important;       /* 背景を透明にする */
}






/*==============================
 サービスページ
==============================*/











/*==============================
 コラムページ
==============================*/

/*記事のコメント欄一括で消す  */
.comments-area,
#comments,
.comment-respond {
    display: none !important;
}





/*==============================
 フッター
==============================*/



/* フッター全体の背景色を強制変更 */
.site-footer {
    background-color: #008A3F !important; /* ←薄い緑色（お好みの色に変えてください） */
}

/* フッター内の文字色も合わせて変更したい場合 */
.site-footer, 
.site-footer a, 
.site-footer p, 
.site-footer .widget-title {
    color: #ffffff !important; /* ←濃いグレー */
}