/* =========================================================
   SPIRYTUS HEADER
   完全固定ヘッダー
   ========================================================= */


/* =========================================================
   基本変数
   ========================================================= */

:root {
    --header-height: 60px;
}


/* =========================================================
   ページ上部のヘッダー分スペース
   ========================================================= */

body {
    padding-top:
        calc(
            var(--header-height)
            + env(safe-area-inset-top)
        );
}


/* =========================================================
   HEADER
   絶対にスクロールさせない
   ========================================================= */

.site-header {
    position: fixed !important;

    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;

    height:
        calc(
            var(--header-height)
            + env(safe-area-inset-top)
        ) !important;

    margin: 0 !important;

    padding-top:
        env(safe-area-inset-top) !important;

    padding-right: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;

    background: #fff !important;

    border-top: none !important;
    border-right: none !important;
    /* border-bottom: 1px solid #ddd !important; */
    border-left: none !important;

    /*
     * 最重要
     * JSによる移動を完全に無効化
     */
    transform: none !important;

    /*
     * transformによる再配置を防止
     */
    translate: none !important;

    /*
     * 他要素より常に前面
     */
    z-index: 2147483647 !important;

    /*
     * Safari / iOS対策
     */
    -webkit-transform: none !important;

    /*
     * ヘッダー自身をスクロールさせない
     */
    overflow: visible !important;

    /*
     * ブラウザによる余計な合成を抑制
     */
    will-change: auto !important;

    /*
     * Safariでのタッチスクロールによる
     * 不要な挙動を防止
     */
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
}


/* =========================================================
   HEADER内部
   ========================================================= */

.site-header .header-inner {
    width: 100% !important;

    height: var(--header-height) !important;

    max-width: 520px;

    margin: 0 auto;

    padding:
        0 16px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    box-sizing: border-box;
}


/* =========================================================
   ロゴ
   ========================================================= */

.site-header h1 {
    margin: 0;

    padding: 0;

    font-size: 1.4rem;

    line-height: 1.2;

    white-space: nowrap;
}


.site-header h1 a {
    text-decoration: none;

    color: #222;

    font-weight: bold;
}


.site-header .logo-text {
    display: inline-block;

    text-decoration: none;
}


.site-header .logo-sub {
    display: block;

    font-size: 11px;

    line-height: 1.2;

    opacity: 0.75;
}


/* =========================================================
   ユーザーエリア
   ========================================================= */

.site-header .user-area {
    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 0.85rem;

    flex-shrink: 0;
}


/* =========================================================
   HEADER内ボタン
   ========================================================= */

.site-header .btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 36px;

    padding:
        6px 14px;

    border: none;

    border-radius: 20px;

    background: #4f46e5;

    color: #fff;

    text-decoration: none;

    cursor: pointer;

    font-size: 0.85rem;

    line-height: 1;

    box-sizing: border-box;

    white-space: nowrap;
}


.site-header .btn:hover {
    background: #4338ca;
}


/* =========================================================
   募集・DM 未読バッジ
   ========================================================= */

.site-header .chat-unread-badge {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 20px;

    height: 20px;

    padding: 0 6px;

    margin-left: 6px;

    border-radius: 999px;

    background: #ff2d55;

    color: #fff;

    font-size: 11px;

    font-weight: 700;

    line-height: 1;

    box-sizing: border-box;
}


/* =========================================================
   マイページ通知バッジ
   ========================================================= */

.site-header .notification-badge {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 20px;

    height: 20px;

    padding: 0 5px;

    margin-left: 4px;

    border-radius: 999px;

    background: #e53935;

    color: #fff;

    font-size: 11px;

    font-weight: 700;

    line-height: 1;

    box-sizing: border-box;
}


/* =========================================================
   iPhone / iPad
   ========================================================= */

@media (max-width: 600px) {

    :root {
        --header-height: 60px;
    }


    body {
        padding-top:
            calc(
                var(--header-height)
                + env(safe-area-inset-top)
            );
    }


    .site-header {
        position: fixed !important;

        top: 0 !important;

        bottom: auto !important;

        left: 0 !important;
        right: 0 !important;

        width: 100vw !important;

        height:
            calc(
                var(--header-height)
                + env(safe-area-inset-top)
            ) !important;

        /*
         * キーボード表示時にも
         * transformさせない
         */
        transform: none !important;

        -webkit-transform: none !important;

        translate: none !important;

        z-index: 2147483647 !important;
    }


    .site-header .header-inner {
        width: 100% !important;

        height: var(--header-height) !important;

        padding:
            0 12px;
    }
}


/* =========================================================
   小型スマートフォン
   ========================================================= */

@media (max-width: 380px) {

    .site-header .header-inner {
        padding:
            0 10px;
    }

    .site-header h1 {
        font-size: 1.2rem;
    }

    .site-header .btn {
        padding:
            6px 10px;

        font-size: 0.8rem;
    }
}