/* ==========================================================================
   Family One 安心・安全認定ランキング（/familyone/certification-ranking/）

   共有CSS（design-system.css・family-one.css）は複数の担当が同時に触るため、
   この画面の見た目はこのファイルへ分けている。
   クラス名は f1-crank- で始める（他機能と衝突させないため）。

   認定バッジ（.f1-cert）の見た目は css/family-one-score.css にもあるが、
   /familyone/ 配下のページは wp_head() を通らずCSSが読み込まれないため、
   この画面で必要な分だけ .f1-crank 配下に限定して定義している
   （共有側の定義には手を入れない）。
   ========================================================================== */

/* ---- 2軸の説明（人気ランキングとの相互リンク） ---- */
.f1-crank-axis {
    margin: 16px 0 20px;
    padding: 14px 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}
.f1-crank-axis__lead {
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.7;
    color: #243b53;
}
.f1-crank-axis__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
}
.f1-crank-axis__item {
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}
.f1-crank-axis__item.is-current {
    border-color: #3182ce;
    box-shadow: inset 0 0 0 1px rgba(49, 130, 206, .18);
}
.f1-crank-axis__title {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 700;
    color: #1a365d;
}
.f1-crank-axis__desc {
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 1.7;
    color: #486581;
}
.f1-crank-axis__link {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: #2b6cb0;
    text-decoration: underline;
}
.f1-crank-axis__here {
    display: inline-block;
    font-size: 12px;
    color: #829ab1;
}
.f1-crank-axis__note {
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.7;
    color: #486581;
}

/* ---- 対象範囲の明記 ---- */
.f1-crank-scope {
    margin: 0 0 18px;
    padding: 14px 16px;
    background: #fffdf5;
    border: 1px solid #f0e2c0;
    border-radius: 12px;
}
.f1-crank-scope__title {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 700;
    color: #744210;
}
.f1-crank-scope__body {
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
    color: #334e68;
}
.f1-crank-scope__note {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.7;
    color: #627d98;
}

/* ---- 絞り込み ---- */
.f1-crank-filter {
    margin: 0 0 12px;
}
.f1-crank-filter__label {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    color: #486581;
}
.f1-crank-filter__count {
    margin-left: 5px;
    font-size: 11px;
    color: #829ab1;
}
.f1-crank-count {
    margin: 14px 0 4px;
    font-size: 13px;
    color: #486581;
}
.f1-crank-note {
    margin: 0 0 10px;
    font-size: 12px;
    line-height: 1.7;
    color: #627d98;
}

/* ---- カード ---- */
.f1-crank-list {
    display: grid;
    gap: 12px;
}
.f1-crank-card {
    display: flex;
    gap: 12px;
    padding: 14px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}
.f1-crank-card--gold   { border-color: #d69e2e; box-shadow: inset 0 0 0 1px rgba(214, 158, 46, .2); }
.f1-crank-card--silver { border-color: #cbd5e0; }
.f1-crank-card--bronze { border-color: #dd9a6c; }

.f1-crank-card__rank {
    flex: 0 0 46px;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 1px;
    height: fit-content;
    padding: 4px 0;
    color: #334e68;
}
.f1-crank-card__rank-num { font-size: 24px; font-weight: 700; line-height: 1; }
.f1-crank-card__rank-unit { font-size: 11px; color: #829ab1; }
.f1-crank-card--gold   .f1-crank-card__rank-num { color: #b7791f; }
.f1-crank-card--silver .f1-crank-card__rank-num { color: #718096; }
.f1-crank-card--bronze .f1-crank-card__rank-num { color: #b7642f; }

.f1-crank-card__body { flex: 1 1 auto; min-width: 0; }
.f1-crank-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.f1-crank-card__score {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    padding: 2px 9px;
    background: #f0f7ff;
    border: 1px solid #bee3f8;
    border-radius: 999px;
    color: #2b6cb0;
}
.f1-crank-card__score-label { font-size: 11px; }
.f1-crank-card__score-value { font-size: 15px; font-weight: 700; }
.f1-crank-card__score-unit { font-size: 11px; }

.f1-crank-card__name {
    display: block;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    color: #1a365d;
    text-decoration: none;
}
.f1-crank-card__name:hover { text-decoration: underline; }

.f1-crank-card__cats {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 5px;
}
.f1-crank-card__cat {
    padding: 1px 8px;
    font-size: 11px;
    color: #486581;
    background: #f0f4f8;
    border-radius: 999px;
}

.f1-crank-card__reasons { margin-top: 9px; }
.f1-crank-card__reasons-title {
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 700;
    color: #486581;
}
.f1-crank-card__reason-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 3px;
}
.f1-crank-card__reason-list li {
    position: relative;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.6;
    color: #334e68;
}
.f1-crank-card__reason-list li::before {
    content: "";
    position: absolute;
    left: 5px;
    top: .58em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d69e2e;
}
.f1-crank-card__no-reason,
.f1-crank-card__capped {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.7;
    color: #627d98;
}
.f1-crank-card__cta { margin-top: 10px; }
.f1-crank-card__btn { font-size: 13px; }

/* ---- 該当0件 ---- */
.f1-crank-empty {
    margin: 16px 0;
    padding: 18px;
    background: #f8fafc;
    border: 1px dashed #cbd5e0;
    border-radius: 12px;
}
.f1-crank-empty__title {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    color: #243b53;
}
.f1-crank-empty__body {
    margin: 0;
    font-size: 13px;
    line-height: 1.8;
    color: #486581;
}

.f1-crank-about { margin-top: 18px; }

/* ---- 認定バッジ（この画面用。共有CSSが読み込まれないページのため最小限で再定義） ---- */
.f1-crank .f1-cert {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.6;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #f7fafc;
    color: #4a5568;
}
.f1-crank .f1-cert__stars { letter-spacing: 1px; color: #d69e2e; }
.f1-crank .f1-cert--premium   { background: #fffbeb; border-color: #d69e2e; color: #744210; }
.f1-crank .f1-cert--gold      { background: #fffaf0; border-color: #f6ad55; color: #975a16; }
.f1-crank .f1-cert--silver    { background: #f7fafc; border-color: #cbd5e0; color: #4a5568; }
.f1-crank .f1-cert--silver .f1-cert__stars { color: #a0aec0; }
.f1-crank .f1-cert--certified { background: #f7fafc; border-color: #e2e8f0; color: #627d98; }
.f1-crank .f1-cert--certified .f1-cert__stars { color: #a0aec0; }

@media (max-width: 480px) {
    .f1-crank-card { padding: 12px; gap: 8px; }
    .f1-crank-card__rank { flex-basis: 36px; }
    .f1-crank-card__rank-num { font-size: 20px; }
    .f1-crank-card__name { font-size: 15px; }
}