@charset "UTF-8";

/* ページ全体と共通ヘッダー用の色 */
.process-page {
    --orange: #ff921a;
    --brown: #774617;
    --gray: #62544b;
    color: var(--brown);
    background: #fff;
    font-weight: 500;
    line-height: 1.65;
    letter-spacing: normal;
}

.process-page main {
    overflow: clip;
}

/* 障がい福祉の上部装飾も本文と同じ配色に揃える。 */
.barrier-process-page main {
    padding-top: 0;
}

.barrier-process-page .process-hero::before {
    background: #fa707c;
}

body.barrier-process-page .process-title-circle {
    border-color: #f5bbc1;
    background: #fff8f8;
    box-shadow: -1.875vw -.3vw 0 #faece8;
}

.process-page main [id] {
    scroll-margin-top: max(160px, 18vw);
}

.process-page a:focus-visible {
    outline: 3px solid #774617;
    outline-offset: 5px;
}

/* タイトルとパンくず */
.process-hero {
    position: relative;
    height: 18vw;
    min-height: 210px;
    background: radial-gradient(ellipse at 80% 25%, #fff4e4, #fff 60%);
}

.process-breadcrumb {
    padding: 1.3vw 0 0 22.5vw;
    font-size: max(11px, .8vw);
    color: #c4a28b;
}

.process-title-circle {
    position: absolute;
    z-index: 1;
    right: -3vw;
    top: -11vw;
    width: 35vw;
    height: 35vw;
    border: 1.5vw solid #ffce97;
    border-radius: 50%;
    background: #fcf8f3;
    box-shadow: -2vw 0 0 #ffdcac99;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 6vw;
}

.process-title-circle h1 {
    color: #24211d;
    font-size: 3vw;
    font-weight: 800;
    margin: 0 0 1vw;
}

.process-title-circle p {
    align-self: flex-end;
    width: 75%;
    font-size: 1.2vw;
    margin: 0;
    display: flex;
    align-items: center;
    gap: .6em;
}

.process-title-circle p::before {
    content: "";
    width: 35%;
    height: 1px;
    background: #bf967c;
}

/* サービスごとの配色とサイドナビゲーション */
.process-layout {
    --process-accent: #ff921a;
    --process-pale: #fff7e1;
    display: grid;
    grid-template-columns: 14% minmax(0, 1fr);
}

.process-barrier {
    --process-accent: #fa707c;
    --process-pale: #faece8;
}

.process-sidebar {
    background: var(--process-accent);
}

.process-sidebar nav {
    position: sticky;
    top: max(170px, 20vw);
    padding: 5vw 1.6vw;
}

.process-sidebar a {
    display: block;
    font-size: max(11px, 1vw);
    line-height: 2.4;
    color: #774617;
}

.process-sidebar .is-current {
    color: #fff;
    font-weight: 700;
}

.process-content {
    min-width: 0;
}

.process-section-heading,
.process-heading {
    position: relative;
    font-size: clamp(18px, 2.1vw, 40px);
    font-weight: 700;
    padding-left: .65em;
    line-height: 1.5;
}

.process-section-heading::before,
.process-heading::before {
    content: "";
    position: absolute;
    left: 0;
    top: .2em;
    bottom: .2em;
    width: .18em;
    background: var(--process-accent);
}

.process-section-heading {
    margin: 0 5.5vw 1.2vw;
}

.process-heading {
    margin: 0 0 4vw;
}

/* 写真付きの導入 */
.process-banner {
    position: relative;
    isolation: isolate;
    min-height: 27vw;
    display: flex;
    align-items: center;
    background: #665f48;
}

.process-banner > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

.process-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #28271965;
    z-index: -1;
}

.process-banner-content {
    padding: 4vw 6.5vw 3vw;
    width: 100%;
}

.process-banner p {
    color: #fff;
    font-size: clamp(14px, 1.65vw, 30px);
    line-height: 1.9;
    font-weight: 700;
    margin-bottom: 3vw;
}

.process-jump {
    display: flex;
    gap: 11vw;
    justify-content: center;
}

.process-jump a {
    flex: 1;
    text-align: center;
    background: #fffdf3dd;
    border: 2px solid var(--process-accent);
    padding: .6vw 1vw;
    font-size: clamp(13px, 1.65vw, 30px);
    font-weight: 700;
    color: var(--brown);
}

.process-jump a:hover {
    background: #fff;
}

/* 申請の3ステップと手帳の案内 */
.process-block {
    padding: 5.5vw 5.5vw 7vw;
    font-size: clamp(13px, 1.25vw, 24px);
}

.process-tinted {
    background: var(--process-pale);
}

.process-application-list,
.process-certificate-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4vw;
    margin: 0;
    padding: 0;
    list-style: none;
}

.process-application-list > li {
    position: relative;
    padding: 2.5vw 2vw 2vw;
    background: var(--process-pale);
}

.process-step-number {
    position: absolute;
    left: -1.5vw;
    top: -1.5vw;
    color: #fff;
    background: var(--process-accent);
    text-align: center;
    padding: .1em .2em;
    font-size: 2.6vw;
    line-height: 1;
}

.process-step-number small {
    display: block;
    font-size: .4em;
}

.process-application-list h3,
.process-certificate-list h3 {
    color: var(--process-accent);
    font-size: clamp(15px, 1.6vw, 30px);
    font-weight: 700;
}

.process-application-list p,
.process-certificate p {
    font-size: clamp(12px, .95vw, 18px);
    margin-bottom: 0;
}

.process-note {
    margin: 3vw auto 0;
    max-width: 50vw;
    font-size: clamp(11px, .95vw, 18px);
}

.process-certificate-list {
    gap: 4vw;
}

.process-certificate-list > section {
    display: flex;
    flex-direction: column;
}

.process-certificate-list h3 {
    text-align: center;
    margin-bottom: .8vw;
}

.process-certificate {
    background: var(--process-pale);
    padding: 1vw 1.5vw;
    flex: 1;
}

.process-certificate .process-counter {
    display: flex;
    align-items: center;
    border: 1px solid var(--process-accent);
    background: #fff;
    font-size: clamp(10px, .8vw, 16px);
    margin-bottom: 1vw;
    gap: .5em;
}

.process-counter span {
    padding: .3em;
    color: #fff;
    background: var(--process-accent);
    writing-mode: vertical-rl;
    flex-shrink: 0;
}

.process-certificate .process-certificate-note {
    margin-top: .6em;
    font-size: clamp(10px, .8vw, 16px);
    color: #a8795c;
}

/* 介護サービス利用フロー */
.process-case + .process-case {
    margin-top: 11vw;
}

.process-case-title {
    display: flex;
    align-items: center;
    font-size: clamp(16px, 1.6vw, 30px);
    margin: 0 0 1.5vw;
}

.process-case-title::after {
    content: "";
    flex: 1;
    height: 3px;
    background: #8e663e;
}

.process-case-title > span {
    position: relative;
    background: var(--process-accent);
    color: #fff;
    padding: .4em .8em;
}

.process-case-title small {
    position: absolute;
    left: .8em;
    bottom: 100%;
    font-size: .6em;
    line-height: 1.6;
    color: var(--process-accent);
    font-style: italic;
}

.process-care-flows {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10vw;
    padding: 5vw 1.5vw 0 3vw;
}

.process-care-flow {
    position: relative;
    background: var(--process-accent);
    padding: 0 1vw 1vw;
    text-align: center;
}

.process-care-flow h4 {
    padding: .7vw 0 .5vw 1.5vw;
    color: #fff;
    font-size: clamp(12px, 1.2vw, 24px);
    font-weight: 700;
    margin: 0;
}

.process-level {
    position: absolute;
    left: -3.5vw;
    top: -2.5vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 7.5vw;
    height: 7.5vw;
    background: white;
    border: 2px solid var(--process-accent);
    border-radius: 50%;
    font-size: .7vw;
    line-height: 1.2;
}

.process-level img {
    width: 3vw;
    height: 3.5vw;
    object-fit: contain;
}

.process-care-flow ol {
    background: #fff;
    border-radius: .8vw;
    padding: 1.2vw .8vw;
    list-style: none;
    margin: 0;
    font-size: clamp(11px, 1.15vw, 23px);
}

.process-care-flow li:first-child {
    color: #e86a77;
    font-weight: 700;
}

.process-care-flow li + li::before {
    content: "⌄";
    display: block;
    color: #ac9c90;
    font-size: 1.5em;
    line-height: 1.4;
}

.process-single-flow {
    grid-template-columns: minmax(0, 1fr);
    width: 45%;
    margin: auto;
    padding-left: 0;
    padding-right: 0;
}

.process-flow-note {
    background: #fff;
    margin: -.8vw 0 0;
    padding: .8vw;
    font-size: clamp(10px, .8vw, 16px);
}

/* 障がい福祉の6手順。読み上げ順は1〜6、PCでは折り返す配置 */
.process-welfare-flow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9vw 6vw;
    list-style: none;
    padding: 0;
    margin: 8vw 0 4vw;
}

.process-welfare-flow > li {
    position: relative;
    border: 1vw solid var(--process-accent);
    border-top: 0;
    border-radius: .5vw;
    background: #fff;
}

.process-welfare-flow > li:nth-child(4) {
    grid-area: 2 / 3;
}

.process-welfare-flow > li:nth-child(5) {
    grid-area: 2 / 2;
}

.process-welfare-flow > li:nth-child(6) {
    grid-area: 2 / 1;
}

.process-welfare-flow > li:not(:last-child)::after {
    content: "»";
    position: absolute;
    top: 40%;
    right: -5vw;
    font-size: 3.5vw;
    color: #ad9f95;
    line-height: 1;
}

.process-welfare-flow > li:nth-child(3)::after {
    top: auto;
    right: calc(50% - 1.5vw);
    bottom: -6vw;
    transform: rotate(90deg);
}

.process-welfare-flow > li:nth-child(4)::after,
.process-welfare-flow > li:nth-child(5)::after {
    right: auto;
    left: -5vw;
    transform: rotate(180deg);
}

.process-welfare-number {
    position: absolute;
    top: -1.5vw;
    left: -3vw;
    border: 2px solid var(--process-accent);
    border-radius: 50%;
    background: #fff;
    color: var(--process-accent);
    display: grid;
    place-items: center;
    width: 4.5vw;
    height: 4.5vw;
    font-size: 3.3vw;
    line-height: 1;
}

.process-welfare-flow h3 {
    background: var(--process-accent);
    color: #fff;
    padding: .8vw 0 .8vw 1vw;
    margin: 0;
    font-size: clamp(12px, 1.2vw, 24px);
    font-weight: 700;
    text-align: center;
}

.process-welfare-flow p {
    padding: 1.5vw;
    font-size: clamp(12px, 1.2vw, 24px);
    line-height: 1.7;
    margin: 0;
}

.process-clipboard {
    position: absolute;
    width: 5vw;
    height: auto;
    right: -.5vw;
    bottom: -3vw;
    transform: rotate(15deg);
}

/* お問い合わせ */
.process-contact {
    position: relative;
    min-height: 53vw;
    padding: 6vw 0 15vw;
    overflow: hidden;
    text-align: center;
}

.process-contact-card {
    position: relative;
    z-index: 1;
    width: 75vw;
    margin: auto;
    padding: 5vw 6vw;
    background: #fff;
    border-radius: 3vw;
    box-shadow: 0 0 30px #f3c89a77;
}

.process-contact-card h2 {
    display: flex;
    align-items: center;
    gap: 3vw;
    font-size: 1.7vw;
    margin: 0 0 2vw;
}

.process-contact-card h2::before,
.process-contact-card h2::after {
    content: "";
    height: 1px;
    background: #8a7b73;
    flex: 1;
}

.process-contact-card > p {
    font-size: 1.3vw;
    margin: 0;
}

.process-phone {
    display: block;
    font-size: 5.4vw;
    line-height: 1.8;
    font-weight: 600;
    white-space: nowrap;
}

.process-phone small {
    font-size: 2.4vw;
}

.process-contact-card .process-hours {
    width: max-content;
    margin: 1vw auto 0;
    padding: .4vw 4.5vw;
    background: #5e4d42;
    color: white;
    font-size: 1.6vw;
}

.process-bubble {
    position: absolute;
    border-radius: 50%;
    width: 28vw;
    height: 28vw;
}

.process-bubble::after {
    content: "";
    position: absolute;
    inset: -1vw 1vw 0 -1vw;
    border: 1px solid;
    border-radius: 50%;
}

.process-bubble.bubble-peach {
    background: #fae8d5;
    right: -3vw;
    top: 0;
}

.process-bubble.bubble-peach::after {
    border-color: #ffbc82;
}

.process-bubble.bubble-pink {
    background: #fceef1;
    left: -15vw;
    bottom: -7vw;
    width: 39vw;
    height: 39vw;
}

.process-bubble.bubble-pink::after {
    border-color: #ffb6d8;
}

.process-bubble.bubble-green {
    background: #f2f6e5;
    right: 17vw;
    bottom: 6vw;
    width: 26vw;
    height: 26vw;
}

.process-bubble.bubble-green::after {
    border-color: #b8dc95;
}

/* PC・タブレットでは、サイドバーとタイトルの円を上部から連続させる */
@media (min-width: 768px) {
    .process-hero::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 14%;
        background: var(--orange);
    }
}

/* タブレット・スマートフォン */
@media (max-width: 991.98px) {
    .process-title-circle {
        width: 320px;
        height: 320px;
        top: -65px;
        right: -35px;
        padding-bottom: 65px;
    }

    .process-title-circle h1 {
        font-size: 28px;
    }

    .process-title-circle p {
        font-size: 13px;
    }

    .process-breadcrumb {
        padding-top: 95px;
        padding-left: 25px;
    }

    .process-application-list,
    .process-certificate-list {
        gap: 20px;
    }
}

@media (max-width: 767.98px) {
    .process-hero {
        height: 240px;
    }

    .process-title-circle {
        top: -55px;
        width: 275px;
        height: 275px;
        padding-bottom: 45px;
    }

    .process-title-circle h1 {
        font-size: 24px;
    }

    .process-breadcrumb {
        position: absolute;
        left: 20px;
        bottom: 8px;
        padding: 0;
        z-index: 1;
    }

    .process-layout {
        display: block;
    }

    .process-sidebar nav {
        position: static;
        display: flex;
        justify-content: center;
        gap: 20px;
        padding: 12px;
    }

    .process-sidebar a {
        font-size: 12px;
    }

    .process-section-heading,
    .process-barrier .process-section-heading {
        margin: 30px 20px;
        font-size: 19px;
    }

    .process-banner-content {
        padding: 30px 22px;
    }

    .process-banner p {
        font-size: 14px;
        margin-bottom: 24px;
    }

    .process-jump {
        flex-direction: column;
        gap: 12px;
    }

    .process-jump a {
        padding: 10px;
        font-size: 15px;
    }

    .process-block {
        padding: 45px 24px;
        font-size: 14px;
    }

    .process-heading {
        font-size: 21px;
        margin-bottom: 35px;
    }

    .process-application-list,
    .process-certificate-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 35px;
    }

    .process-application-list > li {
        padding: 25px 25px 25px 45px;
    }

    .process-step-number {
        font-size: 32px;
        left: -8px;
        top: -12px;
    }

    .process-note {
        max-width: none;
        margin-top: 25px;
        font-size: 12px;
    }

    .process-case-title {
        margin-bottom: 18px;
    }

    .process-case + .process-case {
        margin-top: 65px;
    }

    .process-care-flows,
    .process-single-flow {
        grid-template-columns: minmax(0, 1fr);
        width: auto;
        gap: 55px;
        padding: 40px 0 0 20px;
    }

    .process-care-flow {
        padding: 0 8px 8px;
    }

    .process-care-flow h4 {
        font-size: 13px;
        padding: 10px 4px 10px 40px;
    }

    .process-level {
        width: 70px;
        height: 70px;
        left: -32px;
        top: -25px;
        font-size: 9px;
    }

    .process-level img {
        width: 28px;
        height: 33px;
    }

    .process-care-flow ol {
        font-size: 13px;
        padding: 18px 10px;
        border-radius: 8px;
    }

    .process-certificate {
        padding: 16px;
    }

    .process-certificate-list h3 {
        margin-bottom: 10px;
        font-size: 18px;
    }

    .process-certificate p,
    .process-application-list p {
        font-size: 13px;
    }

    .process-certificate .process-counter {
        font-size: 12px;
        margin-bottom: 15px;
    }

    .process-certificate .process-certificate-note {
        font-size: 11px;
    }

    .process-welfare-flow {
        grid-template-columns: minmax(0, 1fr);
        gap: 50px;
        margin: 45px 0 10px 10px;
    }

    .process-welfare-flow > li:nth-child(n) {
        grid-area: auto;
        border-width: 8px;
        border-radius: 5px;
    }

    .process-welfare-number {
        width: 46px;
        height: 46px;
        font-size: 32px;
        top: -14px;
        left: -25px;
    }

    .process-welfare-flow h3 {
        padding: 10px 5px 10px 25px;
        font-size: 15px;
    }

    .process-welfare-flow p {
        padding: 20px;
        font-size: 14px;
    }

    .process-welfare-flow > li:not(:last-child)::after {
        top: auto;
        bottom: -45px;
        left: calc(50% - 10px);
        right: auto;
        transform: rotate(90deg);
        font-size: 32px;
    }

    .process-clipboard {
        width: 48px;
        bottom: -25px;
    }

    .process-contact {
        padding: 70px 0;
    }

    .process-contact-card {
        width: 88%;
        padding: 30px 15px;
        border-radius: 20px;
    }

    .process-contact-card h2 {
        font-size: 16px;
        margin-bottom: 20px;
    }

    .process-contact-card > p {
        font-size: 11px;
    }

    .process-phone {
        font-size: clamp(23px, 6.5vw, 40px);
        margin: 10px 0;
    }

    .process-phone small {
        font-size: 12px;
    }

    .process-contact-card .process-hours {
        font-size: 12px;
        padding: 5px 20px;
    }
}

/* 両手続きページの確定済み共通寸法。 */


@media (min-width: 768px) {
    .process-page .process-layout {
        grid-template-columns: 10.8vw minmax(0, 1fr);
    }

    .process-page .process-hero::before {
        width: 10.8vw;
    }
}

.process-page .process-jump a {
    flex: 0 1 32%;
    max-width: 420px;
    border-width: 6px;
    background: rgba(255, 253, 243, .75);
}

@media (max-width: 767.98px) {
    .process-page .process-jump a {
        flex-basis: auto;
        width: 90%;
        margin-inline: auto;
    }
}

/* ページ上部を情報公開ページと同じ寸法に揃える。 */
body.process-page .front-breadcrumb {
    font-size: clamp(11.5px, .738vw, 15px);
}

.process-page .process-hero {
    height: 16.3vw;
    min-height: 0;
}

.process-page .process-title-circle {
    top: -10.65vw;
    right: -1.275vw;
    width: 25.5vw;
    height: 26.775vw;
    padding-bottom: 4.575vw;
    border-width: .975vw;
    box-shadow: -1.875vw -.3vw 0 #ffdcac99;
}

.process-page .process-title-circle h1 {
    margin-bottom: .8vw;
    font-size: 1.8vw;
}

.process-page .process-title-circle p {
    align-self: center;
    justify-content: center;
    width: auto;
    gap: .5vw;
    font-size: 1.1025vw;
}

.process-page .process-title-circle p::before {
    width: 6.8vw;
}

@media (min-width: 992px) {
    body.process-page .front-breadcrumb {
        margin-left: 20.8%;
        width: calc(79.2% - 24px);
    }
}

@media (max-width: 991.98px) {
    body.process-page .front-breadcrumb {
        font-size: 11.5px;
    }

    .process-page .process-hero {
        height: 195px;
    }

    .process-page .process-title-circle {
        width: 270px;
        height: 270px;
        top: -80px;
        right: -20px;
        padding-bottom: 45px;
        border-width: 10px;
    }

    .process-page .process-title-circle h1 {
        font-size: 20px;
    }

    .process-page .process-title-circle p {
        font-size: 14px;
        gap: 8px;
    }

    .process-page .process-title-circle p::before {
        width: 65px;
    }
}

@media (max-width: 767.98px) {
    body.process-page .front-breadcrumb {
        display: none;
    }

    .process-page .process-hero {
        height: 225px;
    }

    .process-page .process-title-circle {
        top: -50px;
    }
}

/* 情報公開ページとお問い合わせ・フッターの寸法を揃える。 */
@media (min-width: 768px) {
    .process-page .footer-contact {
        min-height: 0;
        padding: 8vw 0;
    }

    .process-page .footer-contact-bubble {
        width: 22.4vw;
        height: 22.4vw;
    }

    .process-page .footer-contact-pink {
        width: 31.2vw;
        height: 31.2vw;
    }

    .process-page .footer-contact-green {
        width: 20.8vw;
        height: 20.8vw;
    }

    .process-page .footer-contact-card {
        width: 56.25vw;
        padding: 3.375vw 4.5vw;
        border-radius: 2.25vw;
    }

    .process-page .footer-contact-card h2 {
        gap: 2.025vw;
        margin-bottom: 1.29375vw;
        font-size: 1.0125vw;
    }

    .process-page .footer-contact-message {
        margin-bottom: .45vw;
        font-size: .759375vw;
    }

    .process-page .footer-contact-phone {
        font-size: 3.0375vw;
    }

    .process-page .footer-contact-phone small {
        font-size: 1.4625vw;
    }

    .process-page .footer-contact-hours {
        margin-top: .75vw;
        padding: .3vw 3.375vw;
        font-size: .95625vw;
    }

}

@media (max-width: 767.98px) {

    .process-page .footer-contact-message,
    .process-page .footer-contact-phone small,
    .process-page .footer-contact-hours,
    .process-page .footer-tagline,
    .process-page .footer-brand address,
    .process-page .footer-sitemap h2,
    .process-page .footer-sitemap a,
    .process-page .footer-bottom,
    .process-page .copyright {
        font-size: 14px;
    }

    .process-page .footer-bottom {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .process-page .footer-sitemap > div,
    .process-page .footer-bottom > div {
        flex: 0 0 100%;
        width: 100%;
        padding: 0 15px;
    }

    .process-page .footer-bottom {
        row-gap: 20px;
    }

    .process-page .footer-brand .badges {
        display: none;
    }

    .process-page .footer-brand address {
        text-align: left;
    }

    .process-page .footer-tagline > span {
        display: block;
        white-space: nowrap;
    }

    .process-page .footer-tagline > .footer-tagline-gap {
        display: none;
    }

    .process-page .footer-mobile-badges {
        display: flex;
        width: 100%;
        margin-top: 0;
        padding: 0 15px 24px;
        gap: 16px;
    }

}


/* 最新デザインの障がい福祉サービス利用手順。 */
.barrier-process-page .process-welfare-flow > li {
    display: flex;
    flex-direction: column;
    border-radius: 0;
    background: var(--process-accent);
}

.barrier-process-page .process-welfare-flow p {
    flex: 1;
    background: #fff;
    border-radius: .8vw;
}

.barrier-process-page .process-welfare-number {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
}

.barrier-process-page .process-welfare-number small {
    font-size: clamp(10px, .7vw, 14px);
}

.barrier-process-page .process-clipboard {
    width: 5vw;
    transform: none;
}

.barrier-process-page .process-handshake {
    position: absolute;
    width: 8.5vw;
    height: auto;
    right: 1vw;
    bottom: -2vw;
}

.barrier-process-page .process-welfare-flow > li:not(:last-child)::after {
    content: "";
    width: 2vw;
    height: 1.6vw;
    background: #ad9f95;
    clip-path: polygon(0 0, 40% 50%, 0 100%, 0 0, 60% 0, 100% 50%, 60% 100%, 60% 0);
}

@media (max-width: 767.98px) {
    .barrier-process-page .process-welfare-flow p {
        border-radius: 8px;
    }

    .barrier-process-page .process-welfare-number {
        width: 54px;
        height: 54px;
        font-size: 30px;
    }

    .barrier-process-page .process-welfare-number small {
        font-size: 12px;
    }

    .barrier-process-page .process-clipboard {
        width: 48px;
    }

    .barrier-process-page .process-handshake {
        width: 85px;
        right: 10px;
        bottom: -20px;
    }

    .barrier-process-page .process-welfare-flow > li:not(:last-child)::after {
        width: 24px;
        height: 20px;
    }
}