/* 🚨 このファイルは base.scss から書き出したもの。直すときは base.scss を直す */
/* サポートのページの土台と共通の部品 */
.lwsd_page {
    --color-navy: #031533;
    --color-navy-2: #052151;
    --color-ink: #14233c;
    --color-sub: #526078;
    --color-blue: #2b7ced;
    --color-blue-deep: #2167ca;
    --color-coral: #e45d5d;
    --color-req: #c64a4a;
    --color-line: #d8e0ee;
    --color-line-soft: #e8edf5;
    --color-bg: #f3f5fa;
    --color-soft: #f6f8fc;
    --color-input: #eaeef8;
    --color-input-line: #dfe5f1;
    --color-pick-line: #b6cbed;
    --color-mute-bg: #e7edf8;
    --color-mute-txt: #405376;
    --color-selected: #edf4ff;
    --color-current-bg: #edf3ff;
    --color-current-line: #bdd4ff;
    --color-reply-line: #bed4f7;
    --color-rail: #e0e7f2;
    --color-rail-thumb: #97accb;
    --color-warn-bg: #fff3f3;
    --color-warn-txt: #914343;
    --color-off-bg: #f0f2f6;
    --color-off-txt: #939dad;
    --color-off-mark: #b2bbc9;
    --color-icon: #61708a;
    --font-base: "Sora", "Noto Sans JP", sans-serif;
    background: var(--color-bg);
    color: var(--color-ink);
    font-family: var(--font-base);
    font-weight: 400;
    /* セクションの見出し（見出し → 一言 → 会員の種類を縦に） */
    /* 面の中の見出し */
    /* 印（会員の種類・質問の状態）。色と太さは type_ か、使う側が --color-badge（文字）・--color-badge-bg（地）・--weight-badge で渡す */
    /* 幅で出し入れする改行（none_600px＝PC だけ・on_600px＝スマホだけ・on_374px＝幅の狭いスマホだけ） */
}
@media (max-width: 600px) {
    .lwsd_page {
        background: #fff;
    }
}
.lwsd_page input,
.lwsd_page textarea,
.lwsd_page select,
.lwsd_page button {
    box-sizing: border-box;
    font-family: inherit;
}
.lwsd_page * {
    letter-spacing: 0.03em;
}
.lwsd_page [hidden] {
    display: none !important;
}
.lwsd_page .sr_only {
    position: absolute;
    width: 1px;
    height: 1px;
    white-space: nowrap;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
}
.lwsd_page .icon {
    width: 20px;
    height: 20px;
    display: block;
    flex-shrink: 0;
}
.lwsd_page .ttl_ptn_1 {
    display: grid;
    justify-items: start;
}
.lwsd_page .ttl_ptn_1 .main {
    color: var(--color-navy);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.4em;
}
@media (max-width: 900px) {
    .lwsd_page .ttl_ptn_1 .main {
        font-size: 24px;
    }
}
@media (max-width: 600px) {
    .lwsd_page .ttl_ptn_1 .main {
        font-size: 22px;
    }
}
.lwsd_page .ttl_ptn_1 .lead {
    margin-top: 8px;
    color: var(--color-sub);
    font-size: 16px;
    line-height: 1.625em;
}
@media (max-width: 600px) {
    .lwsd_page .ttl_ptn_1 .lead {
        margin-top: 6px;
    }
}
.lwsd_page .ttl_ptn_1 .badge_ptn_1 {
    margin-top: 20px;
}
.lwsd_page .ttl_ptn_2 {
    color: var(--color-navy);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4em;
}
@media (max-width: 600px) {
    .lwsd_page .ttl_ptn_2 {
        font-size: 22px;
    }
}
.lwsd_page .badge_ptn_1 {
    padding: 5px 10px 7px;
    display: inline-block;
    background: var(--color-badge-bg, var(--color-mute-bg));
    color: var(--color-badge, var(--color-mute-txt));
    font-size: 14px;
    font-weight: var(--weight-badge, 400);
    line-height: 1.1429em;
    white-space: nowrap;
    border-radius: 4px;
}
.lwsd_page .badge_ptn_1.type_new {
    --color-badge: #a92f3b;
    --color-badge-bg: #ffebed;
}
.lwsd_page .badge_ptn_1.type_reply {
    --color-badge: #1858ab;
    --color-badge-bg: #e8f1ff;
}
.lwsd_page .badge_ptn_1.type_wait {
    --color-badge: #79551a;
    --color-badge-bg: #fff3dd;
}
.lwsd_page .badge_ptn_1.type_mute {
    --color-badge: var(--color-sub);
    --color-badge-bg: var(--color-input);
    --weight-badge: 700;
}
.lwsd_page .lw-br {
    width: 100%;
    height: 0;
    display: block;
}
@media (max-width: 600px) {
    .lwsd_page .lw-br.none_600px {
        display: none;
    }
}
.lwsd_page .lw-br.on_600px {
    display: none;
}
@media (max-width: 600px) {
    .lwsd_page .lw-br.on_600px {
        display: block;
    }
}
.lwsd_page .lw-br.on_374px {
    display: none;
}
@media (max-width: 374px) {
    .lwsd_page .lw-br.on_374px {
        display: block;
    }
}