/*
Theme Name: Arkhe Child
Template:   arkhe
Description: Arkheのカスタム子テーマです
Version:     1.0
*/

/* ===================================================
 * 📌 【最優先】ヘッダー・フッターをブラウザの上下に絶対固定
 * =================================================== */

/* 1. 画面の一番大元の基本設定（homeのみスクロール制限） */
body {
    margin: 0 !important;
    padding: 0 !important;
}
body.home {
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
}
body.home #page,
body.home #l-wrapper {
    height: 100vh !important;
}

/* 2. 【ヘッダー】をブラウザの最上部にピン留め */
body header,
body #l-header,
body .l-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 56px !important;
    max-height: 56px !important;
    min-height: 56px !important;
    z-index: 9999 !important; /* 最前面に固定 */
}

/* 3. 【フッター】をブラウザの最下部にピン留め */
body footer,
body #l-footer,
body .l-footer {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 48.03px !important;
    max-height: 48.03px !important;
    min-height: 48.03px !important;
    z-index: 9999 !important; /* 最前面に固定 */
    background-color: #ffffff !important; /* 後ろの文字が透けないように背景を白に固定 */
}


/* ===================================================
 * 📌 【重要】ホーム以外の通常ページ：上下の潜り込みを完全に防ぐ（確定版）
 * =================================================== */

/* 1. 下層ページの大元の箱（#l-wrapper）を、ヘッダーの高さ（56px）分だけ丸ごと下に引っ越しさせる */
body:not(.home) #l-wrapper {
    position: relative !important;
    top: 56px !important; /* 💡 これでアイキャッチ画像も含め、中身が100%ヘッダーの真下からスタートします */
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
}

/* 2. 下層ページのすべての親箱の高さ制限・位置固定を完全に解除する */
body:not(.home) #app,
body:not(.home) #page,
body:not(.home) #l-content,
body:not(.home) .l-content {
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
    overflow: visible !important;
    position: static !important;
}

/* 3. アイキャッチ画像の箱（.l-content__top）がヘッダーの裏に潜るのを完全に防ぐ */
body:not(.home) .l-content__top {
    position: relative !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 4. 🎯【下部の隠れを完全解決：投稿ページ専用の特効薬】
   テーマのシステムが #l-main を書き換えてくるため、
   その内側にある記事の箱（article）と、お客様の声の箱（.custom-voice-single）の床に、
   絶対に干渉を受けない 100px のクッションを敷きます。 */
body:not(.home) article,
body:not(.home) .custom-voice-single,
body:not(.home) .l-main__inner {
    padding-bottom: 48px !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
    height: auto !important;
}

/* 既存の #l-main などの設定からは padding-bottom を除外してスッキリさせます */
body:not(.home) #l-main,
body:not(.home) .l-main,
body:not(.home) main {
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
    overflow: visible !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    padding-bottom: 0 !important; /* ここは0にして、内側の article に任せる */
    margin-bottom: 0 !important;
}

/* ===================================================
 * 📱 風の音整体院様・フッター角丸ボタン＆コピーライト完全最適化
 * =================================================== */
body .footer-container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
}

body .footer-reservation-buttons {
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;
}

body .btn-reservation {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 130px !important;
    height: 32px !important;
    border-radius: 16px !important;
    font-size: 13px !important;
    font-weight: bold !important;
    text-decoration: none !important;
    transition: background-color 0.2s, opacity 0.2s !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

body .btn-web { background-color: #0073aa !important; color: #ffffff !important; }
body .btn-tel { background-color: #e14d43 !important; color: #ffffff !important; }
body .btn-reservation:hover { opacity: 0.85 !important; }

body .footer-copyright {
    font-size: 12px !important;
    color: #333333 !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* ===================================================
 * 📱 スマホ表示（画面横幅が959px以下）の時のレイアウト切り替え
 * =================================================== */
@media screen and (max-width: 959px) {
    body footer,
    body #l-footer,
    body .l-footer {
        height: auto !important;
        max-height: none !important;
        min-height: auto !important;
        padding-top: 2px !important;
        padding-bottom: 2px !important;
    }

    body .footer-container {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 2px !important;
        padding: 0 10px !important;
    }

    body .footer-reservation-buttons {
        width: 100% !important;
        display: flex !important;
        gap: 8px !important;
    }
    
    body .btn-reservation {
        flex: 1 !important; 
        width: auto !important;
        height: 35px !important;
        border-radius: 17px !important;
        font-size: 13px !important;
    }

    body .footer-copyright {
        font-size: 14px !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
    }
}


/* ===================================================
 * 🍔 ハンバーガーメニューの下部に余白を作り、フッターと被らないようにする
 * =================================================== */
@media screen and (max-width: 959px) {
    body .l-drawer__inner,
    body .c-drawer__inner {
        padding-bottom: 80px !important;
        box-sizing: border-box !important;
    }
    body .c-drawer__close,
    body .l-drawer__close,
    body .p-drawer__close {
        margin-bottom: 80px !important;
    }
}


/* ===================================================
 * 💬 お客様の声・専用デザイン（一覧＆詳細ページ共通）
 * =================================================== */

/* 🟦 【一覧ページ】ショートコード用 */
.custom-voice-list {
    margin: 2em 0;
    padding: 0;
}
.custom-voice-list .voice-title {
    font-size: 1.25rem !important;
    font-weight: bold !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    line-height: 1.4 !important;
}
.custom-voice-list .voice-title a {
    color: #0073aa !important;
    text-decoration: none !important;
    transition: color 0.2s, text-decoration 0.2s;
}
.custom-voice-list .voice-title a:hover {
    color: #005177 !important;
    text-decoration: underline !important;
}
.custom-voice-list .voice-excerpt {
    font-size: 0.95rem !important;
    line-height: 1.7 !important;
    color: #444444 !important;
    margin-bottom: 24px !important;
}
.custom-voice-list hr {
    border: 0 !important;
    border-top: 1px dashed #cccccc !important;
    margin-top: 0 !important;
    margin-bottom: 28px !important;
}
.custom-voice-list hr:last-child {
    margin-bottom: 0 !important;
}

/* 🟧 【詳細ページ】専用テンプレート用（single.php） */
.custom-voice-single {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* タイトルエリア（親箱） */
.voice-header {
    display: block !important;
    position: relative !important; /* 💡 位置の基準を通常表示に固定 */
    margin-top: 0px !important;  /* ヘッダー分の押し下げ */
    margin-bottom: 32px !important; /* 画像との間の隙間 */
    padding-bottom: 12px !important;
    border-bottom: 2px solid #0073aa !important;
    clear: both !important;
    height: auto !important;
}

/* タイトルの文字自体が浮かないように固定 */
.voice-header .entry-title {
    display: block !important;
    position: relative !important;
    font-size: 1.75rem !important;
    font-weight: bold !important;
    color: #333333 !important;
    line-height: 1.3 !important;
    
    /* 🎯【ここを追加・変更】テーマ本来の青い下線と、無駄な広がりを完全に消し去ります */
    border: none !important;          /* 大線の下線を消去 */
    border-bottom: none !important;   /* 念のため下線を完全に無効化 */
    padding: 0 !important;            /* 内側の余白をゼロに */
    margin: 0 !important;             /* 外側の余白をゼロに */
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* 🎯【ここが最重要：アイキャッチ画像の重なりを破壊する】 */
.voice-eyecatch {
    display: block !important;
    position: relative !important; /* ❌ absolute（絶対配置）を完全に解除し、並び順通りにする */
    top: auto !important;          /* 過去の固定位置設定をゴミ箱へ */
    left: auto !important;
    margin-top: 0 !important;
    margin-bottom: 40px !important; /* 本文との隙間 */
    text-align: center !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
    clear: both !important;
    height: auto !important;
}

/* 画像の浮き上がりも完全に抑え込む */
.voice-eyecatch img {
    display: block !important;
    position: relative !important; /* ❌ 画像単体の浮き上がりも解除 */
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    max-height: 400px !important;
    object-fit: cover !important;
    margin: 0 auto !important;
}

/* 本文エリア */
.voice-content {
    display: block !important;
    position: relative !important;
    font-size: 1rem !important;
    line-height: 1.8 !important;
    color: #333333 !important;
    padding-top: 10px !important; 
    clear: both !important;
}
.voice-content p {
    margin-bottom: 1.5em !important;
}

/* ===================================================
 * 🎯 【最終手段】どんなクラス名であっても強制的にヘッダーの下に押し下げる
 * =================================================== */
body:not(.home) #l-content,
body:not(.home) .l-content {
    /* 💡 外枠の引き上げを完全に相殺し、内側に56px（ヘッダーの高さ）の物理的なクッションを作ります */
    margin-top: 0 !important;
    padding-top: 56px !important; 
}

/* 📱 スマホ表示の時も強制押し下げ */
@media screen and (max-width: 959px) {
    body:not(.home) #l-content,
    body:not(.home) .l-content {
        margin-top: 0 !important;
        padding-top: 56px !important; /* スマホもヘッダーの高さに合わせて調整 */
    }
}

/* ===================================================
 * 🍊 「風のたより」専用：ブログ一覧のカスタム成形
 * =================================================== */

/* 記事1件ごとの枠組み（下線で区切る） */
.custom-blog-item,
body:not(.home) .custom-blog-item {
    /* 💡 テーマ大元が勝手に作る上下の余白を一度すべて「0」にリセットします */
    margin: 0 !important;
    padding: 0 !important;
    
    /* 🎯 100文字の内容から「破線」までの距離を 30px に強制固定 */
    padding-bottom: 30px !important;
    
    /* 🎯 破線から「次のカテゴリ見出し」までの距離を 30px に強制固定 */
    margin-bottom: 30px !important;
    
    border-bottom: 1px dashed #cccccc !important;
    display: block !important;
    position: relative !important;
}

/* 最後の記事の下には破線も無駄な余白も入れない設定 */
.custom-blog-item:last-of-type,
body:not(.home) .custom-blog-item:last-of-type {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* 1. カテゴリ見出し（オレンジ背景・白文字） */
.blog-cat-title {
    display: inline-block !important;
    background-color: #ff9800 !important; /* 鮮やかなオレンジ */
    color: #ffffff !important;            /* 文字は白 */
    font-size: 14px !important;
    font-weight: bold !important;
    padding: 6px 16px !important;         /* リボン風の余白 */
    border-radius: 4px !important;        /* 少し角を丸く */
    margin: 0 0 12px 0 !important;        /* 下への余白 */
    line-height: 1 !important;
}

/* 2. 記入日 */
.blog-date {
    font-size: 13px !important;
    color: #666666 !important;
    margin-bottom: 10px !important;
    display: block !important;
}

/* 3. 投稿タイトル */
.blog-post-title {
    font-size: 1.6rem !important;
    font-weight: bold !important;
    margin: 0 0 14px 0 !important;
    line-height: 1.4 !important;
    display: block !important;
}
.blog-post-title a {
    color: #333333 !important;
    text-decoration: none !important;
}
.blog-post-title a:hover {
    color: #ff9800 !important; /* マウスを乗せたときにオレンジに光る */
}

/* 4. 100文字の内容（抜粋） */
.blog-excerpt {
    font-size: 14px !important;
    line-height: 1.8 !important;
    color: #444444 !important;
    margin: 0 !important;
    display: block !important;
}

body:not(.home) .custom-blog-list {
    /* 💡 記事一覧の床に 120px の物理的なクッションを敷き、フッター被りを永久追放します */
    padding-bottom: 120px !important;
    box-sizing: border-box !important;
}

/* スマホ表示（画面横幅が959px以下）の時のクッション延長 */
@media screen and (max-width: 959px) {
    body:not(.home) .custom-blog-list {
        /* スマホはフッターが2行になり縦に少し伸びるため、安全のためにクッションを 150px に広げます */
        padding-bottom: 150px !important;
    }
}

/* ===================================================
 * 🛡️ PHP連動型：個別ページのフッター被りを永久に防ぐ防護壁
 * =================================================== */
.footer-safety-buffer {
    height: 120px !important; /* 💡 パソコン時に空ける絶対安全な空白の高さ */
}

/* スマホ用の微調整 */
@media screen and (max-width: 959px) {
    .footer-safety-buffer {
        height: 160px !important; /* 💡 スマホはフッターが縦に伸びるため空白を広げます */
    }
}