/*
 * サービスロゴ（アイコン＋ClassPlan）。LP（lp/src/components/Logo.astro）と同じ値に揃えている。
 * LP は別ビルドで本ファイルを読めないため、値を変える時は両方を直すこと（濃い背景のアイコン色だけは下記の理由で異なる）。
 */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #1F2933;
    vertical-align: middle;
    white-space: nowrap;
}
.brand--on-dark {
    color: #fff;
}
.brand__icon {
    display: block;
    flex: 0 0 13px;
    width: 13px;
    height: 13px;
    /* 10px 時の 3px 5px 3px 3px と同じ比率 */
    border-radius: 30% 50% 30% 30%;
    background: linear-gradient(90deg, #2788c4, #309ad6, #8fcdee);
    transform: translateY(-0.5px);
}
.brand__word {
    display: block;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 19px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .02em;
    font-kerning: none;
    font-variant-ligatures: none;
    font-synthesis: none;
}
/* 製品画面の濃い背景はキーカラーの青で、同系色のグラデーションが溶けるため白で塗る（LP フッターは #1F2933 のためグラデーションのまま） */
.brand--on-dark .brand__icon {
    background: #fff;
}
/* ペア補正。後ろの文字の margin-left に letter-spacing への加算値として入れる */
.brand__pair--cl { margin-left: -.008em; }
.brand__pair--ss { margin-left: .008em; }
.brand__pair--sp { margin-left: .032em; }
.brand__pair--pl { margin-left: -.012em; }
.brand__pair--an { margin-left: .006em; }

/* ロゴの横に画面名（会員ポータル等）を添える */
.brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    vertical-align: middle;
    white-space: nowrap;
}
.brand-lockup__label {
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    color: #5d5d5d;
}
.brand-lockup--on-dark .brand-lockup__label {
    color: rgba(255, 255, 255, .85);
}