@charset "utf-8";

/*
クチコミ評判スコアとは（/score）専用スタイル
共通レイアウト（ヘッダー・フッター）と衝突しないよう、すべて .p-score 配下にスコープする。
*/

.p-score {
    --ink: #10243f;
    --ink-2: #41556e;
    --ink-3: #7c8ca0;
    --rule: #dce3ec;
    --paper: #ffffff;
    --paper-2: #f4f7fa;
    --brand: #1b5fa8;
    --amber: #f2a20c;

    /* 6軸の色は求人詳細のスコアカード（RecruitsController::_setClinicScoreCards）と共通 */
    --a1: #e5318a; /* 休み・時間 */
    --a2: #22b573; /* 働き方ペース */
    --a3: #8b5cf6; /* 教育・フォロー */
    --a4: #2d6cdf; /* 給与の納得感 */
    --a5: #f5a623; /* 人間関係 */
    --a6: #e53935; /* 衛生管理 */

    --display: "Zen Old Mincho", serif;
    --body: "Noto Sans JP", system-ui, sans-serif;
    --mono: "Roboto Mono", ui-monospace, monospace;

    --pad: clamp(20px, 5vw, 64px);

    background: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.9;
    font-feature-settings: "palt" 1;
}

.p-score img {
    max-width: 100%;
}

.p-score a {
    color: var(--brand);
}

.p-score p {
    margin: 0 0 16px;
}

.p-score__wrap {
    max-width: 880px;
    margin: 0 auto;
    padding: 0 var(--pad);
}

/* ---------- hero ---------- */

.p-score__hero {
    padding: clamp(40px, 7vw, 80px) 0 clamp(32px, 5vw, 56px);
    border-bottom: 1px solid var(--rule);
}

.p-score p.p-score__eyebrow {
    margin: 0 0 18px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--brand);
    text-transform: uppercase;
}

.p-score__title {
    margin: 0 0 26px;
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(30px, 6.2vw, 50px);
    line-height: 1.42;
    letter-spacing: 0.01em;
}

.p-score p.p-score__lede {
    margin: 0 0 34px;
    max-width: 44em;
    font-size: clamp(15px, 1.9vw, 17.5px);
    color: var(--ink-2);
}

.p-score__lede strong {
    color: var(--ink);
    font-weight: 700;
}

.p-score__facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin: 0;
    background: var(--rule);
    border: 1px solid var(--rule);
}

.p-score__facts > div {
    padding: 18px 16px;
    background: var(--paper);
}

.p-score__facts dt {
    margin: 0 0 6px;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--ink-3);
}

.p-score__facts dd {
    margin: 0;
    font-family: var(--display);
    font-size: clamp(17px, 2.6vw, 21px);
    font-weight: 700;
    line-height: 1.4;
}

@media (max-width: 640px) {
    .p-score__facts {
        grid-template-columns: 1fr;
    }
}

/* ---------- section ---------- */

.p-score__section {
    padding: clamp(44px, 6vw, 72px) 0;
    border-bottom: 1px solid var(--rule);
}

.p-score__sec-no {
    display: block;
    margin-bottom: 12px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--a4);
}

.p-score__heading {
    margin: 0 0 8px;
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(21px, 3.4vw, 29px);
    line-height: 1.5;
}

.p-score p.p-score__sec-lede {
    margin: 0 0 32px;
    max-width: 44em;
    color: var(--ink-2);
}

.p-score__sub-heading {
    margin: 34px 0 10px;
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.6;
}

.p-score__small {
    font-size: 13.5px;
    line-height: 1.8;
    color: var(--ink-3);
}

/* ---------- 6軸カード ---------- */

.p-score__axes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 8px;
}

@media (max-width: 720px) {
    .p-score__axes {
        grid-template-columns: 1fr;
    }
}

.p-score__axis {
    padding: 22px 22px 20px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-top: 3px solid var(--ac);
}

.p-score__axis-title {
    margin: 0 0 4px;
    font-family: var(--display);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--ink);
}

.p-score__axis-max {
    display: block;
    margin-bottom: 14px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--ink-3);
}

.p-score__axis p {
    margin: 0 0 14px;
    font-size: 14.2px;
    line-height: 1.85;
    color: var(--ink-2);
}

.p-score__axis-points-label {
    display: block;
    margin-bottom: 8px;
    padding-top: 12px;
    border-top: 1px dashed var(--rule);
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    color: var(--ink-3);
}

.p-score__axis-points {
    margin: 0;
    padding: 0;
    list-style: none;
}

.p-score__axis-points li {
    position: relative;
    margin-bottom: 5px;
    padding-left: 16px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--ink-2);
}

.p-score__axis-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ac);
}

/* ---------- 注記ボックス ---------- */

.p-score__note {
    margin: 26px 0;
    padding: 20px 22px;
    background: #fffbf2;
    border-left: 3px solid var(--amber);
}

.p-score__note p:last-child {
    margin-bottom: 0;
}

.p-score__note-title {
    display: block;
    margin-bottom: 8px;
    font-family: var(--display);
    font-size: 16px;
    font-weight: 700;
}

/* ---------- 受診バッジ ---------- */

.p-score__badge {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 24px;
    border: 1px solid var(--rule);
}

.p-score__badge-mark {
    font-size: 30px;
    line-height: 1;
}

.p-score__badge p:last-child {
    margin-bottom: 0;
}

@media (max-width: 520px) {
    .p-score__badge {
        flex-direction: column;
        gap: 10px;
    }
}

/* ---------- わかること／わからないこと ---------- */

.p-score__compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    margin-top: 8px;
    background: var(--rule);
    border: 1px solid var(--rule);
}

.p-score__compare > div {
    padding: 24px;
    background: var(--paper);
}

.p-score__compare-title {
    margin: 0 0 14px;
    font-family: var(--display);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.6;
}

.p-score__compare ul {
    margin: 0;
    padding-left: 1.15em;
    /* 共通CSS（foundation/base）の list-style: none を打ち消す */
    list-style: disc;
}

.p-score__compare li {
    list-style: disc;
    margin-bottom: 9px;
    font-size: 14.2px;
    line-height: 1.85;
    color: var(--ink-2);
}

.p-score__compare-can .p-score__compare-title {
    color: var(--a2);
}

.p-score__compare-cant .p-score__compare-title {
    color: var(--a6);
}

@media (max-width: 640px) {
    .p-score__compare {
        grid-template-columns: 1fr;
    }
}

/* ---------- FAQ ---------- */

.p-score__faq {
    border-bottom: 1px solid var(--rule);
}

.p-score__faq summary {
    position: relative;
    padding: 20px 34px 20px 0;
    cursor: pointer;
    list-style: none;
    font-weight: 700;
    font-size: 15.5px;
    line-height: 1.7;
}

.p-score__faq summary::-webkit-details-marker {
    display: none;
}

.p-score__faq summary::after {
    content: "＋";
    position: absolute;
    right: 4px;
    top: 19px;
    font-size: 18px;
    font-weight: 400;
    color: var(--brand);
}

.p-score__faq[open] summary::after {
    content: "−";
}

.p-score__faq summary:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.p-score__faq-answer {
    padding: 0 0 22px;
    font-size: 14.6px;
    color: var(--ink-2);
}

.p-score__faq-answer p:last-child {
    margin-bottom: 0;
}

/* ---------- CTA ---------- */

.p-score__cta {
    padding: clamp(40px, 6vw, 64px) 0;
    background: var(--ink);
    border-bottom: 0;
    color: #fff;
}

.p-score__cta .p-score__heading {
    margin-bottom: 14px;
    color: #fff;
}

.p-score__cta p {
    max-width: 38em;
    color: #c6d2e0;
}

.p-score a.p-score__cta-btn {
    display: inline-block;
    margin-top: 14px;
    padding: 16px 34px;
    border-radius: 3px;
    background: var(--amber);
    color: #3a2a00;
    font-size: 15.5px;
    font-weight: 700;
    text-decoration: none;
}

.p-score a.p-score__cta-btn:hover {
    filter: brightness(1.06);
    color: #3a2a00;
}

/* ---------- 更新日 ---------- */

.p-score p.p-score__updated {
    margin: 0;
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.06em;
    color: var(--ink-3);
}