/*
Theme Name: Lightning Child Clean
Template: lightning
*/


#site-header{
    background-color: #4387E9;
}

.global-nav-name{
    color: white;
}

.global-nav-description{
    color: white;   
}

.logo-after {
    color: white;
    display: block;
    width: 500px;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.logo-after .message span {
  font-size: 1.5em;
}

/* ===================================================
   PCサイズ（画面幅992px以上）のヘッダーレイアウト調整
==================================================== */
@media (min-width: 992px) {
    .site-header-container {
        display: grid !important;
        /* 左(ロゴ)側の余白を最大まで伸ばし、右側の列はコンテンツの幅に合わせる */
        grid-template-columns: 1fr max-content; 
        grid-template-rows: auto auto;
        align-items: center;
    }

    /* 1. 左側のロゴ */
    .site-header-logo {
        grid-column: 1;
        grid-row: 1 / 3;
    }

    /* 2. 右側の上段（追加した会社名テキスト） */
    .logo-after {
        grid-column: 2;
        grid-row: 1;
        justify-self: start; /* 【変更点】列の中で左揃えにする */
        text-align: left;    /* 【変更点】文字も左揃え */
        padding-top: 15px;
        padding-bottom: 5px; /* メニューとの隙間を微調整 */
    }

    /* 3. 右側の下段（ナビゲーションメニュー） */
    .global-nav {
        grid-column: 2;
        grid-row: 2;
        justify-self: start; /* 【変更点】列の中で左揃えにして、上のテキストと端を合わせる */
    }
}

/* ===================================================
   スマホ・タブレットサイズ（画面幅991px以下）の調整
==================================================== */
@media (max-width: 991px) {
    /* スマホ画面だとロゴ、テキスト、ハンバーガーボタンで大渋滞するため、
       一旦テキストを非表示にする（あるいは文字を極端に小さくする）のが標準的です */
    .logo-after {
        text-align: center; 
    }
}

/* ===================================================
   スクロール時（ヘッダー追従時）のスタイル（全方位カバー版）
==================================================== */
body.header_scrolled .logo-after{
    display: none !important;
}

/* ===================================================
   スクロール時（ヘッダー追従時）のレイアウト調整
==================================================== */

/* 1. ロゴと追加テキストを非表示にする */
body.header_scrolled .navbar-brand,
body.header_scrolled .siteHeader_logo,
body.header_scrolled .logo-after {
    display: none !important;
}

/* 2. メニューエリアを全幅（100%）に広げる */
body.header_scrolled .global-nav {
    width: 100% !important;
    grid-column: 1 / -1 !important; /* グリッドの左端から右端までぶち抜いて配置 */
}

/* 3. メニュー全体（ul）の設定 */
body.header_scrolled .global-nav ul {
    display: flex !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 4. メニュー各項目（li）を等間隔にし、白い区切り線を引く */
body.header_scrolled .menu-item {
    flex-grow: 1 !important; 
    text-align: center !important;
    border-right: 1px solid rgba(255, 255, 255, 0.4) !important; /* 全ての項目に右側の線を引く（これで右端にも線が付きます） */
}

/* 一番左のメニューにだけ、左側の線を追加する */
body.header_scrolled .menu-item:first-child {
    border-left: 1px solid rgba(255, 255, 255, 0.4) !important;
}

/* 5. リンク（aタグ）の当たり判定を最大化する */
body.header_scrolled .menu-item a {
    padding: 15px 0 !important; /* 左右の余白指定は削除し、上下の余白のみ指定 */
    display: block !important;  /* 各メニューのマス目全体をクリックできるようにする */
}

.page-header {
    background-image: url(http://localhost:8080/wp-content/uploads/sub.jpg);
    max-height: 250px;
    height: 250px;
}

.page-header-title{
    margin: 5em 0;
    text-shadow: 0px 0px 1px #000,1px 1px 2px #000,2px 2px 3px #000;
    font-size: 2.2rem;
}

.sub-section {
    position: static !important;
}

.btn-primary a{
    color: white;
}