/**
 * LPとヘルプで共有するヘッダー（templates/parts/header.php）のスタイル。
 *
 * 【重要】lp.css / guide.css より「後」に読み込むこと（repoton_pages() の styles の並び順）。
 * 両ファイルは `.rlp *` `.rhp *` で padding をリセットしており、同じ詳細度(0,1,0)なので
 * 先に読むとこのファイルの余白が全部 0 になる。
 *
 * 変数には依存しない。ここだけ見れば色が分かるようにリテラルで書く。
 */

.rh-hd {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    padding: 22px max(28px, 5vw);
    background: #1089EF;
    font-family: 'Noto Sans JP', 'Inter', sans-serif;
}
.rh-hd a { text-decoration: none; }

.rh-lg {
    display: flex; align-items: center; gap: 10px;
    font-size: 1.1rem; font-weight: 900; color: #fff;
}
.rh-lg img { width: 32px; height: 32px; border-radius: 9px; background: #fff; }

.rh-nav { display: flex; align-items: center; gap: 10px; }

/* ヘルプは補助的な導線なので、白ベタではなく白の輪郭で一段弱くする */
.rh-help {
    font-size: 0.86rem; font-weight: 700; color: #fff;
    border: 1.5px solid rgba(255,255,255,0.5); border-radius: 999px;
    padding: 8px 20px; white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}
.rh-help:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.85); }
.rh-help.on { background: rgba(255,255,255,0.2); border-color: transparent; }

.rh-login {
    font-size: 0.86rem; font-weight: 700; color: #1089EF; background: #fff;
    border-radius: 999px; padding: 10px 24px; white-space: nowrap;
    transition: transform 0.15s;
}
.rh-login:hover { transform: translateY(-1px); }

/* スマホ幅ではロゴ＋ボタン2つが収まらないので、全体を一段小さくする */
@media (max-width: 560px) {
    .rh-hd { padding: 14px 18px; gap: 10px; }
    .rh-lg { font-size: 1rem; gap: 8px; }
    .rh-lg img { width: 28px; height: 28px; }
    .rh-nav { gap: 7px; }
    .rh-help { font-size: 0.76rem; padding: 7px 14px; }
    .rh-login { font-size: 0.76rem; padding: 8px 16px; }
}