@charset "UTF-8";

#balance-check {
    --c-primary: #ffd500;
    --c-primary-l: #faf99d;
    --c-accent: #ff5a00;
    --c-accent-l: #fdca9a;
    --c-accent2: #f19d93;
    --c-accent2-l: #ffcbbe;
    --c-sub-01: #c5e3c9;
    --c-sub-02: #e1c8e5;
    --c-sub-03: #F8F6EF;
    --c-gray-01: #9FA0A0;
    --c-gray-02: #efefef;
    --c-body-bg: #fff;
    --c-body-font: #333;
    --bdr-radius-01: 8px;
    --f-size-h1: clamp(1.75rem, 0.836rem + 2.539vw, 3rem);
    --f-size-h2: clamp(1.625rem, 0.992rem + 1.758vw, 2.4444444444rem);
    --f-size-h3: clamp(1.375rem, 0.953rem + 1.172vw, 1.8888888889rem);
    --f-size-h4: clamp(1.25rem, 0.969rem + 0.781vw, 1.5555555556rem);
    --f-size-h5: clamp(1.125rem, 0.984rem + 0.391vw, 1.2222222222rem);
    --f-size-h6: 1rem;
    --f-size-s: 0.875rem;
    --f-size-ss: 0.625rem;
    scroll-margin-top: 120px;

    p { margin: 1rem 0; }
    strong { font-weight: 700; }
    h1,.h1 { font-size: var(--f-size-h1); }
    h2,.h2 { font-size: var(--f-size-h2); }
    h3,.h3 { font-size: var(--f-size-h3); }
    h4,.h4 { font-size: var(--f-size-h4); }
    h5,.h5 { font-size: var(--f-size-h5); }
    h6,.h6 { font-size: var(--f-size-h6); }

    .blc-fade-enter {
        opacity: 0;
        animation: blcFadein 0.5s forwards;
    }

    .blc-btn-01 {
        color: var(--c-body-bg);
        background-color: var(--c-accent);
        border-radius: var(--bdr-radius-01);
        padding: 0.5rem;
        display: inline-block;
        font-size: var(--f-size-h5);
        font-weight: 700;
        text-decoration: none;
        transition: all 0.3s ease-in;
        border: 2px solid var(--c-accent);
        cursor: pointer;
        &:hover, &:focus, &:active {
            color: var(--c-accent);
            background-color: var(--c-primary-l);
        }
    }
    .blc-btn-02 {
        color: var(--c-body-bg);
        background-color: var(--c-gray-01);
        border-radius: var(--bdr-radius-01);
        padding: 0.5rem;
        display: inline-block;
        text-decoration: none;
        transition: all 0.3s ease-in;
        cursor: pointer;
        &:hover, &:focus, &:active {
            background-color: var(--c-body-font);
        }
    }
    .blc-btn-03 {
        color: var(--c-body-bg);
        background-color: var(--c-accent2);
        border-radius: var(--bdr-radius-01);
        padding: 0.5rem;
        display: inline-block;
        font-size: var(--f-size-h5);
        font-weight: 700;
        text-decoration: none;
        transition: all 0.3s ease-in;
        border: 2px solid var(--c-accent2);
        cursor: pointer;
        &:hover, &:focus, &:active {
            color: var(--c-body-font);
            background-color: var(--c-accent2-l);
        }
    }
    .blc-btn-ans {
        background-color: var(--c-accent-l);
        padding: 0.5rem 0.5rem 0.5rem 1.5rem;
        text-indent: -1rem;
        border-radius: var(--bdr-radius-01);
        cursor: pointer;
        display: block;
        height: 100%;
        border: 2px solid var(--c-accent-l);
        transition: all 0.3s ease-in;
        &::before {
            content: "";
            width: 0.8em;
            height: 0.8em;
            display: inline-block;
            border-radius: 50%;
            background-color: var(--c-body-bg);
            margin-right: 0.5em;
            transition: all 0.3s ease-in;
        }
        &:hover, &:focus, &:active {
            border: 2px solid var(--c-accent);
            &::before {
                border: 0.2em solid var(--c-accent);
            }
        }
    }

    .blc-marker-01 {
        background-image: linear-gradient(180deg, transparent 60%, var(--c-primary) 60%);
    }

    .blc-section-01 {
        text-align: center;
        background-color: var(--c-sub-01);
        padding: 2rem 1rem;
        img {
            max-width: 150px;
        }
        h2 {
            font-weight: 800;
            margin: 1rem 0;
            line-height: 1.2;
            background-color: transparent;
            text-stroke: var(--c-body-bg) 6px;
            -webkit-text-stroke: var(--c-body-bg) 6px;
            paint-order: stroke;
        }
        h6 {
            word-break: keep-all;
        }
        .blc-btn-01 {
            width: 100%;
        }
        .blc-btn-02 {
            width: 100%;
        }
    }
    @media screen and (min-width: 769px) {
        .blc-section-01 {
            .blc-btn-01 {
                width: 80%;
            }
            .blc-btn-02 {
                width: 80%;
            }
        }
    }

    .blc-section-02 {
        margin: 5rem auto 0 auto;
        .blc-h-teigi {
            margin-top: 5rem;
            word-break: keep-all;
        }
        .blc-table {
            >dl {
                background-color: var(--c-sub-03);
                padding: 1rem;
                border-radius: 0.5rem;
                margin: 1rem 0;
                >dt {
                    font-size: var(--f-size-h5);
                    font-weight: 700;
                    .num {
                        position: relative;
                        padding: 0 0.5rem;
                        font-size: 1rem;
                        z-index: 1;
                        margin-right: 0.5rem;
                        &::after {
                            content: "";
                            background-color: var(--c-accent-l);
                            border-radius: 50%;
                            aspect-ratio: 1 / 1;
                            width: 100%;
                            display: inline-block;
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            z-index: -1;
                            transform: translate(-50%, -50%);
                        }
                    }
                }
                >dd {
                    font-size: var(--f-size-h6);
                    margin: 0.5rem 0;
                }
            }
        }
        .blc-btn-01,.blc-btn-02 {
            width: 100%;
            text-align: center;
        }
    }
    @media screen and (min-width: 769px) {
        .blc-section-02 {
            width: 80%;
            .blc-about {
                display: flex;
                .text {
                    width: 66.66%;
                }
                .img {
                    width: 33.33%;
                    padding-left: 2rem;
                }
            }
            .blc-table {
                width: 100%;
                >dl {
                    display: flex;
                    align-items: center;
                    >dt {
                        width: 30%;
                    }
                    >dd {
                        width: 70%;
                    }
                }
            }
        }
    }

    .blc-section-question {
        figure {
            text-align: center;
        }
        p {
            text-align: center;
            word-break: keep-all;
            overflow-wrap: anywhere;
        }
        h4 {
            padding-left: 3rem;
            text-indent: -3rem;
            .num {
                position: relative;
                padding: 0 0.5rem;
                font-size: 1rem;
                font-weight: 700;
                &::after {
                    content: "";
                    background-color: var(--c-primary);
                    border-radius: 50%;
                    aspect-ratio: 1 / 1;
                    width: 100%;
                    display: inline-block;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    z-index: -1;
                    transform: translate(-50%, -50%);
                }
            }
        }
        .blc-select {
            >li {
                margin-top: 1rem;
            }
        }
        .blc-nav {
            max-width: 600px;
            margin: 3rem auto 0 auto;
            background-color: var(--c-sub-03);
            padding: 0.5rem;
            >ul {
                display: flex;
                align-items: center;
                >li {
                    padding: 0.25rem;
                    flex-grow: 1;
                    >a {
                        width: 100%;
                        text-align: center;
                    }
                }
            }
        }
        .blc-prograss {
            width: 100%;
            -webkit-appearance: none;
            -moz-appearance: none;
            background-color: var(--c-body-bg);
            border: none;
            &::-webkit-progress-bar {
                background-color: var(--c-body-bg);
            }
            &::-webkit-progress-value {
                background-color: var(--c-primary);
            }
            &::-moz-progress-bar {
                background-color: var(--c-primary);
            }
        }
    }
    @media screen and (min-width: 769px) {
        .blc-section-question {
            figure {
                img {
                    max-width: 50%;
                }
            }
            h4 {
                text-align: center;
            }
            .blc-select {
                width: 80%;
                margin: auto;
                >li {
                }
            }
            .blc-nav {
                >ul {
                    >li {
                        width: 33.3%;
                    }
                }
            }
        }
    }

    .blc-section-result {
        .blc-type {
            margin: auto;
        }
        .blc-advice {
            text-align: center;
        }
        .blc-marker-01 {
            text-align: center;
            font-weight: 700;
            width: fit-content;
            padding: 0 2rem;
            margin: 2rem auto;
        }
        .blc-kuma {
            margin: auto;
            img {
                max-width: 100px;
            }
        }
        .blc-fukidashi {
            background-color: var(--c-sub-03);
            border-radius: 1rem;
            padding: 1rem;
            text-align: left;
            position: relative;
            margin-top: 1rem;
            &::after {
                content: "";
                width: 3rem;
                height: 3rem;
                background-color: var(--c-sub-03);
                position: absolute;
                bottom: 100%;
                left: 60%;
                clip-path: polygon(0 0, 100% 100%, 0.5rem 100%);
            }
        }
        h5 {
            font-weight: 700;
            word-break: break-all;
        }
        h3 {
            margin-top: 3rem;
            display: flex;
            align-items: center;
            &::before {
                content: "";
                flex-grow: 1;
                display: block;
                margin-right: .5em;
                border-top-style: solid;
                border-top-width: .1em;
                border-top-color: var(--c-primary);
            }
            &::after {
                content: "";
                flex-grow: 1;
                display: block;
                margin-left: .5em;
                border-top-style: solid;
                border-top-width: .1em;
                border-top-color: var(--c-primary);
            }
        }
        .blc-items {
            display: flex;
            flex-wrap: wrap;
            >.blc-item {
                width: 100%;
                padding: 0 0.5rem;
                margin: 1rem 0;
                >a {
                    background-color: var(--c-body-bg);
                    transition: 0.3s all ease-in;
                    height: 100%;
                    .blc-item-text {
                        padding: 1rem;
                        h6 {
                            font-weight: 700;
                            word-break: keep-all;
                            text-align: center;
                        }
                        p {
                            font-size: var(--f-size-h6);
                            margin: 0.5rem 0 1rem 0;
                            text-align: center;
                            line-height: 1.2;
                        }
                        small {
                            display: block;
                            line-height: 1;
                        }
                    }
                    &:hover, &:focus, &:active {
                        box-shadow: 0 0 5px rgba(0,0,0,0.5);
                    }
                }
            }
        }
        nav {
            text-align: center;
            margin-top: 3rem;
            .blc-btn-03,.blc-btn-02 {
                width: 100%;
            }
        }
    }
    @media screen and (min-width: 769px) {
        .blc-section-result {
            .blc-result-box {
                display: flex;
                width: 100%;
                align-items: center;
            }
            .blc-type {
                width: 50%;
            }
            .blc-advice {
                width: 50%;
                padding-left: 2rem;
                flex-shrink: 1;
                flex-grow: 0;
                max-width: 60%;
            }
            .blc-fukidashi {
                padding: 2rem;
            }
            h5{
                word-break: keep-all;
                text-align: center;
            }
            .blc-items {
                justify-content: center;
                >.blc-item {
                    width: 25%;
                    padding: 0 1rem;
                }
            }
            nav {
                .blc-btn-03,.blc-btn-02 {
                    width: 80%;
                }
            }
        }
    }
}

@keyframes blcFadein { to { opacity: 1; } }