@charset "UTF-8";

/* === Page-summary Section === */
.page-summary__title {
    margin: var(--spacing-md) 0 var(--spacing-xs);
    border-bottom: solid 1px var(--gray-200);
    font-size: var(--font-size-heading-jp-sp);
    font-weight: var(--font-weight-heading-jp);
    font-family: var(--font-family-heading-jp);
}

.page-summary__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-xs);
}

.page-summary__catch {
    font-size: var(--font-size-20);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

.page-summary__text {
    margin-top: var(--spacing-xs);
}

.page-summary__button {
        margin: var(--spacing-sm) auto 0;
    }

/* Page-summary Section pc 1024px~ */
@media (min-width: 1024px){
    .page-summary__title {
        margin: var(--spacing-lg) 0 var(--spacing-sm);
        font-size: var(--font-size-heading-jp-pc);
    }

    .page-summary__content {
        flex-direction: row-reverse;
        gap: 50px;
        margin-top: var(--spacing-sm);
    }

    .page-summary__body {
        flex: 1 1 0;
        min-width: 0;
    }

    .page-summary__catch {
        font-size: var(--font-size-24);
    }

    .page-summary__text {
        margin-top: var(--spacing-sm);
    }

    .page-summary__button {
        margin: var(--spacing-md) auto 0 0;
    }

    .page-summary__image-area {
        flex: 1 1 0;
        max-width: 583px;
    }
}

/* === existing Section === */
.existing {
    width: 100%;
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md) 4%;
    background-color: var(--gray-4);
}

.existing__content {
    padding: var(--spacing-sm) min(4%, 200px);
    background-color: var(--white);
    border: solid 1px var(--gray-700);
}

.existing__title {
    display: block;
    width: fit-content;
    margin: 0 auto;
    font-size: var(--font-size-20);
    font-weight: var(--font-weight-bold);
}

.existing__list {
    display: grid;
    gap: 20px 7%;
    margin: var(--spacing-sm) auto;
    padding-left: 50px;
}

.existing__item {
    position: relative;
    display: block;
    width: fit-content;
    margin: 0 auto;
}

.existing__item::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -50px;
    width: 40px;
    height: 40px;
    background-image: url(../images/check.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    transform: translate(0, -50%);
}

/* Existing pc 1024px~ */
@media (min-width: 1024px){ 
    .existing {
        padding: var(--spacing-md) 11%;
    }

    .existing__title {
        font-size: var(--font-size-24);
    }

    .existing__list {
        grid-template-columns: 1fr 1fr;
        gap: 50px 7%;
    }

    .existing__item {
        margin-left: 70px;
    }

    .existing__item::before {
        left: -70px;
        width: 51px;
        height: 51px;
    }
}

/* Existing 1240px~ */
@media (min-width: 1240px){ 
    .existing {
        padding: var(--spacing-md) calc(100px + 11%) var(--spacing-md) 11%;;
    }

    .existing__content {
        max-width: 1090px;
        margin: 0 auto;
    }
}

/* === Before-after Section === */
.before-after__list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-md);
}

.before-after__image-area {
    position: relative;
    display: flex;
    justify-content: center;
}

.before-after__image-area::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1px;
    height: 90%;
    transform: translate(-50%, -50%);
    background-color: var(--gray-800);
}

.before-after__image--before {
    position: relative;
}

.before-after__image--before::before {
    content: "Before";
    position: absolute;
    top: 10%;
    left: 50%;
    font-size: var(--font-size-24);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    color: var(--black);
    transform: translate(-50%, 0);
}

.before-after__image--after {
    position: relative;
}
.before-after__image--after::after {
    content: "After";
    position: absolute;
    top: 10%;
    left: 50%;
    font-size: var(--font-size-24);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    color: var(--black);
    transform: translate(-50%, 0);
}

.before-after__title {
    max-width: 574px;
    margin: var(--spacing-xs) auto 0;
    font-size: var(--font-size-20);
    font-weight: var(--font-weight-bold);
    text-align: center;
}

.before-after__text {
    max-width: 574px;
    margin: var(--spacing-xs) auto 0;
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-bold);
}

/* Existing pc 1024px~ */
@media (min-width: 1024px){ 
    .before-after__list {
        flex-direction: row;
        gap: 90px;
        margin-top: var(--spacing-lg);
    }
}

/* === Flow Section === */
.flow__list {
    margin-top: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.flow__item {
    flex: 1;
    position: relative;
    counter-increment: flow;
}

.flow__item::before {
    position: absolute;
    top: -40px;
    left: 50%;
    content: "STEP";
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-bold);
    transform: translate(-50%, -50%);
}

.flow__item::after {
    position: absolute;
    top: 0;
    left: 50%;
    content: counter(flow, decimal-leading-zero);
    display: block;
    width: 50px;
    height: 50px;
    font-size: var(--font-size-28);
    font-weight: var(--font-weight-bold);
    line-height: 50px;
    color: var(--white);
    text-align: center;
    background-color: var(--gray-700);
    border-radius: var(--border-radius-circle);
    transform: translate(-50%, -50%);
}

.flow__caption {
    display: block;
    width: 100%;
    font-weight: var(--font-weight-bold);
    text-align: center;
}

.flow__supplement {
    display: block;
    width: 100%;
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-bold);
    text-align: center;
}

/* Flow pc 1024px~ */
@media (min-width: 1024px){
    .flow__list {
        margin-top: var(--spacing-xl);
        flex-direction: row;
        justify-content: center;
        gap: 30px;
    }

    .flow__item::before {
        top: -50px;
        font-size: var(--font-size-16);
    }

    .flow__item::after {
        width: 67px;
        height: 67px;
        font-size: var(--font-size-31);
        line-height: 67px;
    }

    .flow__caption {
        margin-top: var(--spacing-xs);
    }
}

/* === Reform-results Section  === */
.reform-results__slider {
    margin-top: var(--spacing-md);
}

.reform-results__item {
    padding: 0 15px;
}

.reform-results__meta {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-top: 10px;
}

.reform-results__date {
    font-size: var(--font-size-15);
    font-weight: var(--font-weight-bold);
    color: var(--gray-600);
}

.reform-results__category {
    padding: 4px 18px;
    background-color: var(--color-primary);
    font-size: var(--font-size-15);
    font-weight: var(--font-weight-bold);
    line-height: 1.35;
    color: var(--white);
}

.reform-results__title {
    display: inline;
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    border-bottom: solid 1px var(--color-primary);
    transition: color 0.4s ease, border 0.4s ease;
}

.reform-results__link:hover .reform-results__title {
    color: var(--color-btn);
    border-bottom: solid 1px var(--color-btn);
}

.reform-results__button {
        margin: var(--spacing-sm) auto 0;
    }

/* reform-results Section pc 1240px~ */
@media (min-width: 1240px){
    .reform-results__slider {
        margin-top: var(--spacing-lg);
    }

    .reform-results__button {
        margin: var(--spacing-lg) auto 0;
    }
}