/*
Theme Name: Lightning Child Sample
Theme URI: 
Template: lightning
Description: 
Author: 
Tags: 
Version: 0.6.0
*/
/* ====================================
   sawaruglyph テーマ移植CSS v18
   ==================================== */

/* --- 1. ヘッダーコンテナ・PCロゴ制御 --- */
@media (min-width: 768px) {
    header.siteHeader .container {
        max-width: none !important;
        padding: 0 !important;
    }
}
.siteHeader { box-shadow: unset !important; }

/* PC用ロゴ設定 */
.site-logo-pc {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto;
}
.navbar-header {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center;
    background-color: #fff;
}
.header_logo { margin: 0 !important; line-height: 0; }
.site-logo-sp { display: none !important; }

/* --- 2. PCグローバルメニュー --- */
.gMenu_outer {
    background: #006a96 !important;
    width: 100% !important;
    float: unset !important;
    margin: auto !important;
    padding: 0 13px;
}
.gMenu { float: unset !important; justify-content: center; }

@media (min-width: 992px) {
    ul.gMenu > li > a {
        color: #ffffff !important;
        padding: 27px 1.8em !important;
        font-weight: bold;
    }
    ul.gMenu > li > a:hover,
    ul.gMenu > li.current-menu-item > a {
        background-color: #004b77 !important;
        color: #ffffff !important;
    }
    #sp_custom_nav_wrapper { display: none; }
}


/* --- 3. スマホ用独自メニュー制御（矢印位置固定版） --- */
@media (max-width: 991px) {
    .vk-mobile-nav-menu-btn { display: none !important; }
    
    /* メニューバー */
    #spnavi {
        background-color: #006a96;
        margin: 0;
        padding: 5px 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        list-style: none;
    }
    #spnavi_tel_banner { 
        margin: 0; flex-grow: 1; padding-right: 15px;
    }
    #spnavi_tel_banner img {
        vertical-align: middle; 
        max-height: 36px;
        width: auto; max-width: 100%;
    }
    #drop_menu_icon { 
        margin: 0; flex-shrink: 0;
    }

    /* メニュー本体 */
    #dorp_menu_hidden {
        background-color: #006a96;
        padding: 0 20px 10px;
    }
    #dorp_menu_hidden ul {
        list-style: none; margin: 0; padding: 0;
    }
    
    /* リスト項目（下線を2pxに変更） */
    #dorp_menu_hidden ul li {
        border-bottom: 2px solid rgba(255,255,255,0.4);
        position: relative;
        min-height: 32px;
    }
    
    /* リンク文字 */
    #dorp_menu_hidden ul li > a {
        display: block;
        color: #fff;
        padding: 6px 0;
        padding-right: 45px;
        text-decoration: none;
        font-weight: bold;
        font-size: 13px;
        line-height: 1.2;
    }

    /* ▼▼▼ アコーディオン矢印（高さを固定してズレ防止） ▼▼▼ */
    .acc-btn {
        position: absolute;
        top: 0;
        right: 0;
        width: 40px;
        height: 36px; /* ★ここを固定値に変更！ */
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 0.9rem;
        cursor: pointer;
        z-index: 10;
    }

    /* ▼▼▼ サブメニュー ▼▼▼ */
    #dorp_menu_hidden ul.sub-menu {
        display: none;
        width: 100%;
    }
    #dorp_menu_hidden li.is-open > ul.sub-menu {
        display: block;
    }
    #dorp_menu_hidden ul.sub-menu li {
        border-bottom: 2px solid rgba(255,255,255,0.2);
        min-height: auto;
    }
    #dorp_menu_hidden ul.sub-menu li a {
        padding: 5px 0 5px 15px;
        font-size: 12px;
    }
}


/* --- 4. フッター・その他 --- */
.siteFooter {
    background-color: #182c4b !important; color: #ffffff !important; border-top: unset !important;
}
.siteFooter a, .siteFooter h3, .siteFooter h4, .siteFooter .widget-title {
    color: #ffffff !important; border-color: #ffffff !important;
}

/* --- 5. ヒーロー画像制御 --- */
.sp-hero-banner { display: none !important; }
@media (max-width: 991px) {
    .site-logo-pc { display: none !important; }
    .site-logo-sp { display: block !important; max-width: 250px; height: auto; margin: 0 auto; padding: 10px 0; }
    .sp-hero-banner { display: block !important; width: 100%; }
    .sp-hero-banner img { width: 100%; height: auto; }
    #top__fullcarousel { display: none !important; }
    .siteHeader .container { padding: 0 !important; }
    .siteHeader_logo { padding: 0 !important; }
    .mainSection h2 { border-left: 9px solid #006a96; border-bottom: 2px solid #006a96; background: transparent; }
    .mainSection h3::before { background: #006a96; }
}
/* --- 6. SNSシェアボタン --- */
.custom-sns-share { margin-top: 40px; margin-bottom: 20px; background: #f9f9f9; padding: 20px; border-radius: 4px; }
.sns-share-title { font-weight: bold; font-size: 14px; margin-bottom: 15px; text-align: center; }
.custom-sns-share ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.custom-sns-share ul li { flex: 1; min-width: 100px; max-width: 140px; }
.custom-sns-share ul li a { display: block; text-align: center; padding: 10px 0; color: #fff; text-decoration: none; border-radius: 4px; font-size: 13px; font-weight: bold; }
.custom-sns-share ul li a:hover { opacity: 0.8; }
.sns-x a { background-color: #000; }
.sns-fb a { background-color: #1877f2; }
.sns-hatebu a { background-color: #00a4de; }
.sns-line a { background-color: #06c755; }

/* --- 7. サイドバー見出し --- */
.sideSection .widget_title {
    font-size: 16px; font-weight: bold; color: #333;
    padding: 10px 15px; margin-bottom: 20px;
    background-color: #fff;
    border-left: 5px solid #006a96;
    border-bottom: 1px solid #ddd;
}
/* ====================================
   sawaruglyph テーマ移植CSS v20 (ヘッダーサイズ調整)
   ==================================== */

@media (min-width: 992px) {
    /* 1. ロゴエリア（白い部分）の上下に余白を追加 */
    .navbar-header {
        padding-top: 15px !important;    /* 上の余白 */
        padding-bottom: 15px !important; /* 下の余白 */
    }

    /* 2. ロゴ画像のサイズ制限を緩和 */
    /* 英語版の比率に合わせて大きくします */
    .site-logo-pc {
        max-height: 110px !important; /* 必要に応じて 80px〜120px で調整してください */
        width: auto !important;      /* 比率を保ったまま拡大 */
    }

    /* 3. グローバルメニュー（青い帯）の高さ調整（必要な場合） */
    /* 現在の設定(27px)で細すぎると感じる場合は数値を大きくしてください */
    /* ul.gMenu > li > a {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }
    */
}
/* ====================================
   sawaruglyph テーマ移植CSS v21 (引用符の削除)
   ==================================== */

blockquote::before,
blockquote::after {
    content: none !important;
    display: none !important;
}
/* ====================================
   sawaruglyph テーマ移植CSS v22 (メニュー縦線削除)
   ==================================== */

@media (min-width: 992px) {
    /* グローバルメニュー項目の縦線（境界線）を削除 */
    ul.gMenu > li {
        border-left: none !important;
        border-right: none !important;
    }
    
    /* 念のためリンク要素のボーダーもなしに指定 */
    ul.gMenu > li > a {
        border-left: none !important;
        border-right: none !important;
    }
}
/* ====================================
   sawaruglyph テーマ移植CSS v25 (英語版デザイン完全再現)
   ==================================== */

/* --- H1 (ページタイトル) --- */
/* 上下に青いライン */
.mainSection h1.entry-title,
.entry-body h1 {
    background: none !important;
    width: 100%;
    margin-bottom: 30px !important;
    padding: 20px 0 !important;
    border: none !important; /* デフォルト枠線リセット */
    border-top: 2px solid #006a96 !important;
    border-bottom: 2px solid #006a96 !important;
    line-height: 1.5;
    letter-spacing: 0.05em;
    color: #333;
    text-align: center;
    font-size: 1.625rem !important;
    font-weight: 700;
}

/* タイトル下の余計な線を消す */
.entry-header {
    border-bottom: unset !important;
}


/* --- H2 (大見出し) --- */
/* 左に太い青線 ＋ 下に青線 */
.mainSection h2 {
    background: none !important;
    margin: 24px 0 12px !important;
    padding: 0 0 0 16px !important;
    border: none !important; /* デフォルト枠線リセット */
    border-bottom: 2px solid #006a96 !important;
    border-left: 9px solid #006a96 !important;
    line-height: 1.3;
    font-weight: 700;
    font-size: 1.5rem !important; /* Lightningのデフォルト調整 */
    position: relative;
}
/* Lightningデフォルトの装飾を削除 */
.mainSection h2::before,
.mainSection h2::after {
    content: none !important;
    display: none !important;
}


/* --- H3 (小見出し) --- */
/* 青い丸の中に白い点（ドーナツ型）アイコン */
.mainSection h3 {
    background: none !important;
    border: none !important; /* デフォルト枠線リセット */
    position: relative !important;
    margin: 24px 0 12px !important;
    padding: 0 0 0 30px !important;
    font-size: 1.625rem !important;
    font-weight: 700;
}

/* ドーナツ型の外側（青い丸） */
.mainSection h3::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 6px !important;
    left: 0 !important;
    width: 20px !important;
    height: 20px !important;
    background: #006a96 !important;
    border-radius: 10px !important;
    border: none !important; /* Lightningのデフォルト線消去 */
}

/* ドーナツ型の内側（白い点） */
.mainSection h3::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 12px !important;
    left: 6px !important;
    width: 8px !important;
    height: 8px !important;
    background-color: #fff !important;
    border-radius: 5px !important;
    border: none !important; /* Lightningのデフォルト線消去 */
}

/* スマホ時のアイコン位置調整 */
@media screen and (max-width: 768px) {
    .mainSection h3::before {
        top: 3px !important;
    }
    .mainSection h3::after {
        top: 9px !important;
    }
}
/* ====================================
   sawaruglyph テーマ移植CSS v26 (カラム幅調整)
   ==================================== */

@media (min-width: 992px) {
    /* 1. メインコンテンツの幅を広げる（通常約66% → 72%） */
    .mainSection {
        width: 72% !important;
        flex: 0 0 72% !important; /* Flexbox用の指定 */
        max-width: 72% !important;
    }

    /* 2. サイドバーの幅を狭くする（通常約33% → 22%） */
    .sideSection {
        width: 22% !important;
        flex: 0 0 22% !important;
        max-width: 22% !important;
        
        /* 3. サイドバーを右端に寄せて、メインとの間に余白を作る */
        margin-left: auto !important; 
    }
}
/* ====================================
   sawaruglyph テーマ移植CSS v30 (スマホロゴ拡大・余白5px)
   ==================================== */

@media (max-width: 991px) {
    /* スマホ用ロゴの設定 */
    .site-logo-sp {
        width: 280px !important;      /* 横幅（必要に応じて調整） */
        max-width: 80% !important;
        height: auto !important;      /* 比率を保つ */
        max-height: none !important;  /* 高さ制限解除 */
        margin: 0 auto;
        object-fit: contain;
    }

    /* ロゴ周りの余白（5pxに短縮） */
    .navbar-header {
        padding-top: 5px !important;    /* 上 5px */
        padding-bottom: 5px !important; /* 下 5px */
        text-align: center;
        height: auto !important;
    }
    
    .header_logo a {
        display: block;
        height: auto !important;
    }
}