@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/

/* ヘッダー全体のレイアウト調整 */
.header-in {
    position: relative;
    /* 子要素のabsolute配置の基準にする */
    align-items: center;
    justify-content: space-between;
}

/* カスタムヘッダーブロック (.my-header) */
.my-header {
    position: absolute;
    /* 左側のロゴグループから切り離して配置 */
    right: 10px;
    /* 右端から少し余白を空ける */
    top: 50%;
    /* 上下中央 */
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0;
    z-index: 100;
    /* 他の要素より手前に */
}

/* メニューなどが被らないように余白を調整（必要に応じてクラス名を調整してください） */
/* Cocoonのグローバルナビ用クラス（推定: .navi, .header-div .navi など） */
.header-in>nav,
.header-in .navi-in,
.header-in .gmenu {
    margin-right: 280px;
    /* お問い合わせ情報の幅分だけ右に空ける */
}

@media screen and (max-width: 1200px) {

    .header-in>nav,
    .header-in .navi-in,
    .header-in .gmenu {
        margin-right: 200px;
        /* 少し狭める */
    }
}

.my-header-info {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    /* メッセージと電話番号の間隔を広げる */
    padding: 4px;
    white-space: nowrap;
    /* 改行防止 */
}

/* メッセージ */
.my-message {
    font-size: 13px;
    margin: 0;
    color: #333;
    white-space: nowrap;
}

/* 電話番号とボタンのラッパー（通常時から縦並びに変更） */
.my-phone-wrap {
    display: flex;
    flex-direction: column;
    /* 縦並び */
    align-items: flex-end;
    /* 右寄せ */
    gap: 14px;
    /* 電話番号とボタンの間隔を広げる */
}

/* 電話番号 */
.my-phone {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    line-height: 1;
    white-space: nowrap;
}

/* 営業時間 */
.my-hours {
    font-size: 12px;
    margin: 0;
    color: #666;
    white-space: nowrap;
}

/* お問い合わせボタン */
.my-btn-contact {
    display: inline-block;
    background-color: #333;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    padding: 8px 16px;
    border-radius: 4px;
    text-decoration: none !important;
    transition: opacity 0.3s;
    line-height: 1.2;
    white-space: nowrap;
}

.my-btn-contact:hover {
    opacity: 0.8;
    color: #fff;
}

.my-btn-contact i {
    margin-right: 4px;
}

/* ==============================================
   スクロール時 (Sticky Header) のレイアウト調整 - Flexbox (Display Contents) アプローチ
   ============================================== */

/* 固定ヘッダー（スクロール時）の高さを調整 */
.fixed-header .header-container-in {
    height: 80px !important;
}

/* コンテナ全体をFlexボックス化して子要素を整列 */
.fixed-header .header-container-in {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
}

/* 中間のラッパーを無視して、Logo/MyHeader/Naviを直接のFlexアイテムとして扱う */
.fixed-header .header,
.fixed-header .header-in {
    display: contents !important;
}

/* 1. ロゴ (左) */
.fixed-header .logo {
    order: 1 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 10px !important;
    float: none !important;
    /* float解除 */
}

.fixed-header .logo img {
    max-height: 40px;
    /* ロゴサイズ調整 */
    width: auto;
}

/* 2. メニュー (中央) */
.fixed-header #navi {
    order: 2 !important;
    flex: 1 1 auto !important;
    /* 余ったスペースを占有 */
    margin: 0 !important;
    float: none !important;
    width: auto !important;
}

.fixed-header #navi .navi-in>ul {
    justify-content: center;
    /* メニュー項目を中央寄せ */
    display: flex;
}

/* 3. お問い合わせ情報 (右) */
.fixed-header .my-header {
    order: 3 !important;
    flex: 0 0 auto !important;
    position: static !important;
    /* 絶対配置解除 */
    transform: none !important;
    margin: 0 !important;
    padding: 0 10px !important;
    background: none;
    width: auto !important;
    white-space: nowrap;
}

/* スクロール時の表示要素調整 */
.fixed-header .my-message,
.fixed-header .my-hours {
    display: none;
    /* スペース確保のため非表示 */
}

.fixed-header .my-phone {
    font-size: 18px;
    line-height: 1.2;
}

.fixed-header .my-btn-contact {
    padding: 4px 8px;
    font-size: 12px;
}

/* ==============================================
   タブレット・狭いPC画面 (幅が足りなくなるケースへの対策)
   ============================================== */
@media screen and (max-width: 1160px) {

    /* ラップトップ・タブレット時はカスタムヘッダー（電話番号等）を全て非表示にする */
    .my-header,
    .fixed-header .my-header {
        display: none !important;
    }

    /* メニューの余白もリセット */
    .header-in>nav,
    .header-in .navi-in,
    .header-in .gmenu {
        margin-right: 0 !important;
    }
}


/* ==============================================
   レスポンシブ (スマホなど)
   ============================================== */
@media screen and (max-width: 1023px) {

    /* タブレット以下 */
    .my-header {
        position: relative;
        /* 指定解除して通常のフローに戻すことも検討 */
        right: auto;
        top: auto;
        transform: none;
        margin-left: auto;
        /* 右寄せ */
    }

    .header-in>nav,
    .header-in .navi-in {
        margin-right: 0;
    }

    .my-message,
    .my-hours {
        display: none;
    }
}

@media screen and (max-width: 480px) {
    .my-header {
        display: none;
        /* スマホはヘッダー内非表示（モバイルメニュー等に任せる） */
    }
}