@charset "UTF-8";
/*
 * 共通ヘッダー専用 CSS — Figma「強みページ」ヘッダーデザインの再現。
 * import.css は編集禁止（Xserver で max-age 7日・キャッシュバスター無し配信のため）。
 * 本ファイルは type1 レイアウトの @section('header-css') から mics()->asset() で全ページ読み込む。
 * 公開後に修正する場合は system/config/mics.php の version を bump すること。
 *
 * スコープ:
 *   .header-wrap.-register … 未ログイン（type1.blade.php、Auth なし）
 *   .header-wrap.-member   … ログイン（type1.blade.php、Auth あり）
 *   .head-slide            … SP スライドメニュー（両状態で共通の器、中身が異なる）
 */

/* ===== ヘッダー下部の影（Figma 実測: 下端で黒約12%→約13pxで白へフェード） ===== */
header:has(.header-wrap.-register),
header:has(.header-wrap.-member) {
    box-shadow: 0 2px 13px rgba(0, 0, 0, 0.16);
}

/* ===== PC ヘッダー（ログイン前後で共通の枠） ===== */
.header-wrap.-register,
.header-wrap.-member {
    max-width: 1280px;
    min-height: 100px;
    padding: 0 20px;
    flex-wrap: nowrap;
    align-items: center;
}

/* タグライン「在宅医療の求人サービス」は Figma に無いので非表示 */
.header-wrap.-register .logo .txt,
.header-wrap.-member .logo .txt {
    display: none;
}

/* ナビ（テキストリンク） */
.header-wrap.-register .head-nav,
.header-wrap.-member .head-nav {
    display: flex;
    align-items: center;
}

.header-wrap.-register .head-nav-link,
.header-wrap.-member .head-nav-link {
    margin-right: 44px;
    color: #12b3af;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .1em;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity .3s;
}

.header-wrap.-register .head-nav-link:hover,
.header-wrap.-member .head-nav-link:hover {
    opacity: .7;
}

/* ハンバーガー（PC では非表示） */
.header-wrap.-register .head-burger,
.header-wrap.-member .head-burger {
    display: none;
}

/* ===== ログイン前: ボタン2（ログイン / 会員登録） ===== */
.header-wrap.-register .head-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 148px;
    height: 50px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .1em;
    text-decoration: none;
    white-space: nowrap;
    transition: all .3s;
}

.header-wrap.-register .head-btn.-login {
    margin-right: 10px;
    background: #fff;
    border: 2px solid #12b3af;
    color: #12b3af;
}

.header-wrap.-register .head-btn.-login:hover {
    background: #12b3af;
    color: #fff;
}

.header-wrap.-register .head-btn.-register {
    background: #ff9000;
    color: #fff;
}

.header-wrap.-register .head-btn.-register:hover {
    opacity: .85;
}

/* SP 専用の会員登録ボタン。PC は上の .head-nav 内 .head-btn.-register が担当するので非表示。
   実体の指定は下の SP メディアブロック（max-width:768px）にある。 */
.header-wrap.-register .head-sp-register {
    display: none;
}

/* ===== ログイン後: 検討中バッジ + プロフィールドロップダウン ===== */
.header-wrap.-member .head-nav-badge {
    display: inline-block;
    box-sizing: border-box;
    min-width: 18px;
    height: 18px;
    margin-left: 6px;
    padding: 0 4px;
    border-radius: 9px;
    background: #12b3af;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    vertical-align: middle;
}

.header-wrap.-member .head-profile {
    position: relative;
}

.header-wrap.-member .head-profile-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 0;
    background: none;
    border: 0;
    color: #12b3af;
    font-family: inherit;
    cursor: pointer;
}

.header-wrap.-member .head-profile-btn i {
    font-size: 17px;
    line-height: 1;
}

.header-wrap.-member .head-profile-btn span {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .1em;
}

.header-wrap.-member .head-profile-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 134px;
    background: #fff;
    border: 1px solid #12b3af;
    overflow: hidden;
}

.header-wrap.-member .head-profile:hover .head-profile-menu {
    display: block;
}

.header-wrap.-member .head-profile-menu a {
    display: block;
    padding: 12px;
    color: #12b3af;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .1em;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}

.header-wrap.-member .head-profile-menu a + a {
    border-top: 1px solid #12b3af;
}

/* ===== SP（768px 以下、ログイン前後で共通: ロゴ＋ハンバーガー 64px） ===== */
@media only screen and (max-width: 768px) {
    body:has(.header-wrap.-register),
    body:has(.header-wrap.-member) {
        padding-top: 64px;
    }

    .header-wrap.-register,
    .header-wrap.-member {
        max-width: none;
        min-height: 64px;
        padding: 0 20px;
    }

    .header-wrap.-register .head-nav,
    .header-wrap.-member .head-nav {
        display: none;
    }

    .header-wrap.-register .head-burger,
    .header-wrap.-member .head-burger {
        display: inline-flex;
        flex-direction: column;
        justify-content: space-between;
        width: 32px;
        height: 20px;
        padding: 0;
        background: none;
        border: 0;
        cursor: pointer;
    }

    .header-wrap.-register .head-burger span,
    .header-wrap.-member .head-burger span {
        display: block;
        width: 100%;
        height: 3px;
        border-radius: 2px;
        background: #999;
    }

    /* ===== SP 未ログイン: ヘッダー右の会員登録ボタン（Figma 1188:2076 / ボタン 1217:445）=====
       Figma 実測（フレーム 390×64・ヘッダー内座標）:
         ロゴ        X20  Y19  101×27
         会員登録ボタン X206 Y18  120×28  角丸16  塗り #FF9000
           └ テキスト  X227 Y25  78×14   Noto Sans JP Bold 12px  #FFF  文字間隔 10%
         ハンバーガー  X338 Y18  32×28
       → ボタン右端 326 とハンバーガー左端 338 の差 = 12px、ハンバーガー右端 370 は
         .header-wrap の padding 20px と一致（= 390 − 20）。上下は 18px ずつで中央。

       ★ margin-left:auto が要。基底 .header-wrap は justify-content:space-between で、
         SP の在フロー子要素は「ロゴ / 本ボタン / ハンバーガー」の 3 つになる（.head-nav は
         display:none、.slide-menu は position:fixed で在フロー外）。auto を付けずに
         space-between へ任せると余白が 2 つのすき間へ均等配分され、ボタンがヘッダー中央付近まで
         流れて Figma の「右寄せ 2 点セット」にならない。auto で余白を全部ここに吸わせると、
         配分すべき余白が無くなりボタンとハンバーガーが 12px 間隔で右端に並ぶ。
       ログイン時（.-member）は対象外＝この要素は Blade の @else 側にしか出力しない。 */
    .header-wrap.-register .head-sp-register {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        flex: none;
        margin-left: auto;
        margin-right: 12px;
        width: 120px;
        height: 28px;
        border-radius: 16px;
        background: #ff9000;
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .1em;
        line-height: 1;
        text-decoration: none;
        white-space: nowrap;
    }
}

/* ===== SP スライドメニュー（.slide-menu を流用。z-index でヘッダーを覆う） =====
   ログイン前(422:6671): テキストリンク2 + ボタン2 / ログイン後(427:1922): テキストリンク5。
   会員登録ボタンはヘッダーのオレンジではなくティール塗り。フォントは Noto Sans JP Bold。 */
.slide-menu.head-slide {
    /* 全画面パネル（2026-08-10 ユーザー指定）。基底 .slide-menu(import.css:8828) の
       height:100%/width:100%/position:fixed/background:#fff をそのまま活かして画面全体を覆う。
       ★ かつて Figma 422:6459 の「ヘッダー下に降りる高さ自動パネル（下にページ本体が見える）」に
         合わせて height:auto/overflow:visible で打ち消していたが、実機で画面の半分しか塞がらず
         下のページが覗いて見えるため撤回した。ここに height:auto を戻さないこと。
       overflow は基底の scroll ではなく auto にして、内容が短いときに常時スクロールバーが
       出ないようにする（項目が増えて画面に収まらない場合はスクロールできる）。
       ★ overflow-y だけを上書きしないこと。基底は `overflow: scroll`（両軸）なので縦だけ直すと
         横軸に scroll が残り、オーバーレイスクロールバーでない環境（Android Chrome + マウス、
         DevTools のレスポンシブ検証など）でメニュー下端に操作対象のない横スクロールバーの帯が
         常時出て、その分コンテンツ高が削られる。必ずショートハンドで両軸まとめて指定する。
       回帰テスト: HeaderSlideMenuFullScreenTest。 */
    height: 100%;
    overflow: auto;
    box-shadow: 0 2px 13px rgba(0, 0, 0, 0.16);
    z-index: 10000;
    padding: 0;
    font-family: 'Noto Sans JP', "ヒラギノ角ゴシック", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "メイリオ", Meiryo, "Yu Gothic", sans-serif;
}

.head-slide .head-slide-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 36px 28px 0 58px;
}

.head-slide .head-slide-top .logo {
    height: 27px;
}

.head-slide .head-slide-top .logo img {
    height: 100%;
    vertical-align: middle;
}

.head-slide .head-slide-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: 0;
    color: #999;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.head-slide .head-slide-body {
    padding: 6px 58px 40px;
}

.head-slide .head-slide-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.head-slide .head-slide-list a {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: 40px;
    border-bottom: 1px solid #12b3af;
    color: #12b3af;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    line-height: 1;
    text-decoration: none;
}

.head-slide .head-slide-btns {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 20px;
}

.head-slide .head-slide-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 40px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-decoration: none;
}

.head-slide .head-slide-btn.-login {
    background: #fff;
    border: 2px solid #12b3af;
    color: #12b3af;
}

.head-slide .head-slide-btn.-register {
    background: #12b3af;
    color: #fff;
}

/* ===== 固定ヘッダー直下の余白（非トップページ）=====
   import.css の `body:not(.top) header { margin-bottom }` は header が position:fixed のため
   後続本文を押し下げず無効。フロー内の .l-main に margin-top を与えて実余白を作る
   （.l-container が overflow:hidden の BFC のため margin が相殺されない）。
   PC 60px / SP 25px。class="top" ページ（TOP/feature/search/company/privacy/terms）は対象外。
   register/index はヒーローをヘッダー直下にフラッシュ表示するため同ページのインライン
   <style> で .l-main margin-top を 0 に打ち消している。 */
body:not(.top) .l-main {
    margin-top: 60px;
}
@media only screen and (max-width: 768px) {
    body:not(.top) .l-main {
        margin-top: 25px;
    }
}