@charset "UTF-8";
/*
Theme Name: Lightning Child
Template: lightning
*/

/* =========================================
   共通変数（カラー設定）
   ========================================= */
:root {
    --color-main: #639094;
    --color-sub-bg: #dce6e7;
    --color-warm-bg: #eeeae1;
    --color-accent: #1f6f8a;
    --color-text: #2c3e42;
    --color-white: #ffffff;
}

/* =========================================
   Global Header (独自クラス .g-header で完全制御)
   ========================================= */

/* 1. ヘッダー枠（全ページ共通・スクロール後） */
.g-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999; /* 親テーマより確実に上に */
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 10px 0;
    transition: background-color 0.3s, padding 0.3s, box-shadow 0.3s;
}

/* 2. ヘッダー内部のレイアウト（親テーマの干渉がないのでFlex指定必須） */
.g-header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box; /* 崩れ防止 */
}

/* 3. ロゴ */
.g-header-logo .site-title {
    margin: 0; /* 親テーマのマージンをリセット */
    line-height: 1;
}
.g-header-logo a {
    color: var(--color-text);
    text-decoration: none;
    font-weight: bold;
    font-size: 1.5rem;
}

/* 4. ナビゲーション（PC用） */
@media (min-width: 992px) {
    .g-nav-list {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .g-nav-list li {
        margin-left: 30px;
    }
    .g-nav-list a {
        color: var(--color-text);
        text-decoration: none;
        font-weight: bold;
        font-size: 0.95rem;
        transition: color 0.3s;
        display: block; /* クリック領域確保 */
        padding: 5px 0;
    }
    .g-nav-list a:hover {
        color: var(--color-main);
    }
}
/* スマホではメニューを非表示（ハンバーガー実装までの暫定処置） */
@media (max-width: 991px) {
    .g-header-nav { display: none; }
    .g-header-action { display: none; }
}


/* 5. お問い合わせボタン */
.header-contact-btn {
    background-color: var(--color-main);
    color: #fff !important;
    padding: 10px 25px;
    border-radius: 30px;
    font-size: 0.9rem;
    text-decoration: none;
    display: inline-block;
    line-height: 1.5;
}
.header-contact-btn:hover {
    background-color: var(--color-accent);
}

/* ロゴ画像のサイズ調整 */
.g-header-logo img {
    height: 20px; /* 高さを固定（PC） */
    width: auto;  /* 横幅はなりゆき */
    vertical-align: bottom;
    transition: filter 0.3s; /* 色変化のアニメーション */
}

/* スマホでのサイズ調整 */
@media (max-width: 768px) {
    .g-header-logo img {
        height: 30px; /* スマホは少し小さく */
    }
}


/* =========================================
   Top Page Specific Header
   ========================================= */

/* .home かつ .is-scrolled が無いとき（最初の状態） */
.home .g-header:not(.is-scrolled) {
    width: calc(100vw - 64px);
    /* ▼ ここで「半透明グレー」と「形」を作ります */
    background-color: rgba(240, 240, 240, 0.35); 
    border-radius: 50px;
    max-width: 1600px; 
    top: 30px; /* 上からの距離 */
    left: 0;
    right: 0;
    margin: 0 auto;
    padding: 10px 0;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); 

    transition: all 0.3s ease;
}

/* ★重要：背景が明るいグレーになるので、文字色は「黒」に変更します */
.home .g-header:not(.is-scrolled) .g-header-logo a,
.home .g-header:not(.is-scrolled) .g-nav-list a {
    color: #333; /* 黒文字 */
    text-shadow: none; /* 影は不要なので消す */
}

/* お問い合わせボタンのデザイン（このままでOKなら変更なし） */
.home .g-header:not(.is-scrolled) .header-contact-btn {
    background-color: var(--color-main); /* 通常色に戻す */
    border: none;
    color: #fff !important;
}

/* -----------------------------------------
   スマホ対応（スマホでは浮かせず、シンプルにする場合）
   ----------------------------------------- */
@media (max-width: 768px) {
    .home .g-header:not(.is-scrolled) {
        width: 100%;
        top: 0;
        border-radius: 0;
        background-color: rgba(240, 240, 240, 0.9); /* スマホは少し濃い目に */
        padding: 15px 0;
    }
}

/* =========================================
   Scrolled State (スクロール後)
   ========================================= */
.g-header.is-scrolled {
    background-color: rgba(255, 255, 255, 0.98);
    padding: 10px 0;
}
/* 文字色などはデフォルト設定（黒）が適用されるので記述不要 */


/* =========================================
   共通ボタン（全ページ）
   ========================================= */
.btn {
    padding: 16px 45px;
    border-radius: 50px;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
    transition: 0.3s;
    cursor: pointer;
    border: none;
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
    box-sizing: border-box;
}
.btn-lg {
    padding: 18px 52px;
    font-size: 1.05rem;
}
.btn-primary {
    background: var(--color-main);
    color: #fff !important;
    box-shadow: 0 5px 15px rgba(99,144,148,0.4);
}
.btn-primary:hover {
    background: var(--color-accent);
    transform: translateY(-2px);
    color: #fff !important;
}
.btn-outline {
    border: 2px solid var(--color-main);
    color: var(--color-main) !important;
    background: transparent;
}
.btn-outline:hover {
    background: var(--color-main);
    color: #fff !important;
}
.btn-line {
    background: #06c755;
    color: #fff !important;
    box-shadow: 0 5px 15px rgba(6,199,85,0.3);
}
.btn-line:hover {
    background: #05a847;
    transform: translateY(-2px);
    color: #fff !important;
}


/* =========================================
   パンくずリスト（全ページ共通）
   ========================================= */
.breadcrumbs {
    margin-bottom: 20px;
    font-size: 0.82rem;
}
.breadcrumbs-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.breadcrumbs-item {
    display: flex;
    align-items: center;
    color: #888;
}
.breadcrumbs-item a {
    color: var(--color-main);
    text-decoration: none;
    transition: color 0.2s;
}
.breadcrumbs-item a:hover {
    color: var(--color-accent);
    text-decoration: underline;
}
.breadcrumbs-item:not(:last-child)::after {
    content: '›';
    margin-left: 6px;
    color: #bbb;
}
.breadcrumbs-item.current {
    color: #aaa;
}


/* =========================================
   共通CTAパーツ（parts/cta-area.php）
   全ページ共通で呼び出されるため style.css に配置
   ========================================= */
.parts-cta {
    background: var(--color-sub-bg);
    padding: 100px 0;
    text-align: center;
}
.cta-title {
    font-size: 1.9rem;
    font-weight: bold;
    line-height: 1.55;
    color: var(--color-accent);
    margin-bottom: 18px;
}
.cta-desc {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--color-text);
    margin-bottom: 0;
}
.cta-buttons {
    margin-top: 44px;
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}
@media (max-width: 600px) {
    .cta-title { font-size: 1.45rem; }
    .cta-buttons { flex-direction: column; align-items: center; }
    .cta-buttons .btn { width: 100%; max-width: 320px; }
}


/* =========================================
   関連サービス（parts/related-service.php）
   ========================================= */
.related-service-block {
    margin-top: 30px;
}
.related-service-block h3 {
    font-size: 1.05rem;
    font-weight: bold;
    color: var(--color-accent);
    margin-bottom: 16px;
}
.related-service-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.related-service-list li a {
    display: inline-block;
    padding: 8px 20px;
    border: 1px solid var(--color-main);
    border-radius: 50px;
    color: var(--color-main);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: bold;
    transition: 0.3s;
}
.related-service-list li a:hover {
    background: var(--color-main);
    color: #fff;
}